/* 모텔 PMS 전용 화면 꾸미기. Bootstrap 위에 조금만 더합니다. */

/* --- 밝은 화면 / 어두운 화면(다크 모드) ---
   base.html이 휴대폰·PC 설정을 보고 <html data-bs-theme="light" 또는 "dark">로 정함.
   Bootstrap 색(var(--bs-…))은 알아서 바뀌고, 이 앱에만 있는 색은 아래에 두 벌로 정함.
   예약 색(노랑·초록·분홍·빨강·하늘색)은 어두운 화면에서도 그대로 두고(직원이 색 뜻을 다시 익히지 않게) 글자만 늘 진하게 */
:root {
  --pms-weekend: #f1f3f5;
  --pms-highlight: #e7f1ff;          /* 달력 빈칸에 마우스, 통계의 이번 달 */
  --pms-holiday-color: #b02a37;
  --pms-holiday-bg: #fbe4e6;
  --pms-ghost-color: #0a58ca;        /* 끌어서 옮길 때 놓일 자리 */
  --pms-ghost-bad-color: #b02a37;
  --pms-good: #198754;               /* 통계 증감 */
  --pms-bad: #dc3545;
  --pms-same: #6c757d;
  --pms-label: #495057;              /* 변경 기록의 칸 이름 */
  --pms-out-bg: #e9ecef;             /* 오늘 화면의 "Out" 표시 */
  --pms-out-border: #adb5bd;
  --pms-market-green: #198754;       /* 달력 날짜 아래 동네 시세 (bookings/market_prices.py의 색 기준) */
  --pms-market-blue: #0d6efd;
  --pms-market-orange: #e8590c;
  --pms-market-red: #dc3545;
  --pms-navy: #16325c;               /* 검정이던 이름표·고른 버튼 (위쪽 줄과 같은 네이비, 2026-10-21) */
}
[data-bs-theme="dark"] {
  --pms-navy: #2c5596;               /* 어두운 바탕에서 보이게 조금 밝은 네이비 (흰 글자 7:1) */
  --pms-weekend: #262a2f;
  --pms-highlight: #1c2c44;
  --pms-holiday-color: #ea868f;
  --pms-holiday-bg: #3a1f24;
  --pms-ghost-color: #6ea8fe;
  --pms-ghost-bad-color: #ea868f;
  --pms-good: #75b798;
  --pms-bad: #ea868f;
  --pms-same: #adb5bd;
  --pms-label: #adb5bd;
  --pms-out-bg: #343a40;
  --pms-out-border: #6c757d;
  --pms-market-green: #75b798;
  --pms-market-blue: #6ea8fe;
  --pms-market-orange: #feb272;
  --pms-market-red: #ea868f;
}
/* 위쪽 메뉴: NURISTAY 네이비 + 금색 밑줄 3px (2026-10-21 주인의 결정: 검정이 마음에 안 듦. 앱 아이콘의 두 색, tools/make_icons.py).
   밝은 화면·어두운 화면 같은 색 (전에는 #212529, 어두운 화면 #111315 + 회색 선). 2026-10-25부터 화면에서는 새 디자인(fresh.css)의
   그라데이션이 덮음 — 이 색은 data-skin이 없는 인쇄용 기본 모양 */
.navbar.bg-dark { background-color: #16325c !important; border-bottom: 3px solid #f4b942; }
/* 검은 이름표(오늘 화면의 "rooms tonight")는 네이비 (2026-10-21 주인의 요청, 위쪽 줄과 같은 색; 어두운 화면은 조금 밝은
   네이비 — 전에는 흰 이름표). 새 디자인(html[data-skin], fresh.css)은 검정에서 시작해 fresh.css가 정함 */
.text-bg-dark { color: #fff !important; background-color: var(--pms-navy) !important; }
html[data-skin] { --pms-navy: #212529; }

/* --- 예약 색 (Excel Reservations 시트와 같은 뜻, 글자가 잘 보이게 조금 연하게). 글자는 두 화면 모두 진하게 --- */
.booking-paid { --status-colour: #fff59d; background-color: var(--status-colour); color: #212529; }     /* Paid in full: 노랑 */
.booking-pending { --status-colour: #a5e8a5; background-color: var(--status-colour); color: #212529; }  /* Payment pending: 초록 */
.booking-partial { --status-colour: #f8bbe8; background-color: var(--status-colour); color: #212529; }  /* Partially paid: 분홍 */
.booking-hold { --status-colour: #ff9e9e; background-color: var(--status-colour); color: #212529; }     /* Hold: 빨강 */
/* 방 막기 (1.659, bookings/room_blocks.py): 손님이 아니라 막아 둔 방 — 회색 점선 */
.booking-block { --status-colour: #dee2e6; background-color: var(--status-colour); color: #495057; border: 1px dashed #868e96; }
.booking-security-deposit { --status-colour: #9fd8f7; background-color: var(--status-colour); color: #212529; }     /* 보증금 보관 중: 하늘색 */
/* 예약 상세의 결제 상태 버튼: 위 색 그대로 (마우스를 올리거나 열어도 색이 바뀌지 않게, 테두리만 조금 진하게) */
.status-button { --bs-btn-bg: var(--status-colour); --bs-btn-hover-bg: var(--status-colour); --bs-btn-active-bg: var(--status-colour);
                 --bs-btn-color: #212529; --bs-btn-hover-color: #212529; --bs-btn-active-color: #212529;
                 --bs-btn-border-color: rgba(0, 0, 0, .15); --bs-btn-hover-border-color: rgba(0, 0, 0, .4);
                 --bs-btn-active-border-color: rgba(0, 0, 0, .4); }
.checked-in-mark { background-color: #ccffcc; border: 1px solid #7bc47b; border-radius: .25rem; padding: 0 .25rem; color: #212529; }
.checked-out-mark { background-color: var(--pms-out-bg); border: 1px solid var(--pms-out-border); border-radius: .25rem;
                    padding: 0 .25rem; color: var(--pms-label); }

/* 달력의 가로 스크롤바를 화면 맨 아래에 늘 보이게 (calendar.js, 마우스가 있는 PC만. 그 밑의 색 뜻 안내 줄은 2026-10-06에 뺌).
   달력 상자와 같은 폭(둘 다 화면 끝까지, 2026-10-17; 그 전에는 둘 다 좌우 .75rem 안쪽)이고 달력과 함께 움직임. 달력 자체의
   스크롤바는 숨김. Chrome·Edge에서는 잡기 쉽게 굵고 늘 보이는 모양으로. 가려지는 맨 아래만큼 calendar.js가 body 아래쪽을 띄움.
   위아래 여백 2px (2026-10-17; 그 전 4px) */
.calendar-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; padding: .125rem 0;
  background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -2px 6px rgba(0, 0, 0, .08); }
.calendar-hscroll { overflow-x: auto; overflow-y: hidden; }
.calendar-hscroll > div { height: 1px; }
.calendar-hscroll::-webkit-scrollbar { height: 14px; }
.calendar-hscroll::-webkit-scrollbar-track { background: var(--bs-secondary-bg); }
.calendar-hscroll::-webkit-scrollbar-thumb { background: #adb5bd; border: 2px solid var(--bs-secondary-bg); border-radius: 7px; }
.calendar-hscroll::-webkit-scrollbar-thumb:hover { background: #868e96; }
/* 달력 상자 자체의 가로 스크롤바는 숨기고 (맨 아래 큰 스크롤바를 씀) 세로 스크롤바는 같은 모양으로 (2026-10-06).
   Firefox는 따로 숨길 수 없어서 둘 다 가늘게 */
#calendar-scroll.has-bottom-scrollbar::-webkit-scrollbar { width: 14px; height: 0; }
#calendar-scroll.has-bottom-scrollbar::-webkit-scrollbar-track { background: var(--bs-secondary-bg); }
#calendar-scroll.has-bottom-scrollbar::-webkit-scrollbar-thumb { background: #adb5bd; border: 2px solid var(--bs-secondary-bg); border-radius: 7px; }
#calendar-scroll.has-bottom-scrollbar::-webkit-scrollbar-thumb:hover { background: #868e96; }
@supports not selector(::-webkit-scrollbar) { #calendar-scroll.has-bottom-scrollbar { scrollbar-width: thin; } }
/* 달력 상자: 화면 아래 끝까지의 높이 안에서 위아래·옆으로 스크롤 (calendar.js가 높이를 맞춤, 2026-10-06 주인의 요청).
   그래서 날짜 머리글(달·날짜·Market 줄, thead)이 상자 위에 붙어 따라옴 (방 번호 칸이 왼쪽에 붙어 있는 것처럼) */
#calendar-scroll { overflow: auto; }
.calendar thead { position: sticky; top: -1px; z-index: 4; }  /* -1px: 상자가 픽셀 중간에 걸려도 밑의 칸이 비치지 않게 */
@media print {
  .calendar-bottom-bar { display: none !important; }
  #calendar-scroll { max-height: none !important; overflow: visible !important; }
  .calendar thead { position: static; }
}

/* 달력 화면 오른쪽의 Bookings 칸 (2026-10-24, 주인의 요청: 따로 된 Bookings 창 대신 한 화면을 나눠서, side_panel.js): 위쪽 줄
   밑부터 화면 아래 끝까지. 열려 있으면 (html.side-panel-open) 달력과 맨 아래 가로 스크롤바는 칸의 폭(--side-panel-width)만큼
   왼쪽에서 끝남. 왼쪽 가장자리(side-panel-resize)를 끌면 폭이 바뀜 — 끄는 동안은 칸 안의 화면이 마우스를 가져가지 않게.
   위쪽 줄(z-index 1020, 계정 메뉴가 그 안에서 펼쳐짐)보다는 아래 */
.side-panel { position: fixed; top: var(--pms-header-height, 0px); right: 0; bottom: 0; z-index: 1010;
  margin: 0 !important;  /* 달력 화면 안의 다른 것들의 좌우 8px (아래 main.calendar-page > …) 없이 화면 끝까지 */
  width: var(--side-panel-width, 480px); display: flex; flex-direction: column;
  background-color: var(--bs-body-bg); border-left: 1px solid var(--bs-border-color); }
.side-panel[hidden] { display: none; }
/* 칸 위쪽의 Bookings 버튼: 아이콘과 글자 사이에 위쪽 메뉴처럼 작은 틈 (2026-10-26 화면 점검: 붙어 있었음) */
.side-panel [data-panel-show] { display: inline-flex; align-items: center; gap: .3rem; }
.side-panel-frame { flex: 1 1 auto; width: 100%; border: 0; background-color: var(--bs-body-bg); }
.side-panel-resize { position: absolute; top: 0; bottom: 0; left: -5px; width: 9px; cursor: col-resize; z-index: 1;
  touch-action: none; }  /* 손가락으로 끌어도 (Surface): 브라우저가 화면 밀기로 가져가지 않게 */
.side-panel-resize:hover, .side-panel-resize:focus-visible, html.side-panel-dragging .side-panel-resize {
  background-color: rgba(var(--bs-primary-rgb), .3); outline: 0; }
/* ✕ 왼쪽의 □ / ❐ (2026-10-26, 주인의 결정, side_panel.js): Bootstrap의 btn-close와 같은 크기·흐림. 크게(html.side-panel-full)는
   위쪽 메뉴 줄 밑 전체 — 왼쪽 화면은 그 폭 그대로 칸 밑에 (달력이 다시 맞추지 않게: 맨 아래 가로 스크롤바도 visibility만),
   폭 바꾸는 가장자리는 없음. 달력의 그 스크롤바(1020)·Today의 + New booking(1031)은 칸(1010)보다 위라 숨김, 알림은 오른쪽 끝 */
.side-panel-size { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; border: 0; border-radius: .375rem;
  background: transparent; color: var(--bs-emphasis-color); opacity: .5; display: inline-flex; align-items: center;
  justify-content: center; }
.side-panel-size:hover { opacity: .75; }
.side-panel-size:focus-visible { outline: 0; opacity: 1; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.side-panel-to-side, html.side-panel-full .side-panel-to-full { display: none; }
html.side-panel-full .side-panel-to-side { display: block; }
html.side-panel-full .side-panel { left: 0; width: auto; border-left: 0; }
html.side-panel-full .side-panel-resize { display: none; }
html.side-panel-full .calendar-bottom-bar, html.side-panel-full .fresh-fab { visibility: hidden; }
html.side-panel-open.side-panel-full #check-in-alerts { right: 0 !important; }  /* 아래 side-panel-open의 것보다 강하게 */
/* Today의 + New booking (fresh.css의 fresh-fab, 오른쪽 1.6rem): 칸이 열려 있으면 알림처럼 그 칸의 왼쪽 (전에는 칸의 목록 위에 떠 있었음) */
html.side-panel-open .fresh-fab { right: calc(var(--side-panel-width) + 1.6rem); }
html.side-panel-open main.calendar-page { width: auto; margin-right: var(--side-panel-width); }  /* container-fluid는 width 100% */
html.side-panel-open .calendar-bottom-bar { right: calc(var(--side-panel-width) - .5rem); }  /* 그 바의 오른쪽 여백 8px만큼 */
html.side-panel-dragging, html.side-panel-dragging * { cursor: col-resize !important; user-select: none; }
html.side-panel-dragging .side-panel-frame { pointer-events: none; }
/* Today·Company accounts·회사 화면 (1.477, _side_panel.html의 layout "page"): 칸이 열려 있으면 왼쪽(main)만 위아래로 스크롤 —
   스크롤바는 칸 왼쪽. 글은 지금처럼 가운데, 그 화면의 폭 (--side-panel-max: Bootstrap의 .container 1140/1320px, page-narrow 56rem, page-medium 72rem) */
html.side-panel-page.side-panel-open main {
  position: fixed; top: var(--pms-header-height, 0px); left: 0; right: var(--side-panel-width); bottom: 0;
  overflow-y: auto; width: auto; max-width: none; margin: 0;
  padding-left: max(.75rem, calc((100vw - var(--side-panel-width) - var(--side-panel-max, 1320px)) / 2 + .75rem));
  padding-right: max(.75rem, calc((100vw - var(--side-panel-width) - var(--side-panel-max, 1320px)) / 2 + .75rem)); }
@media (max-width: 1399.98px) { html.side-panel-page main.container { --side-panel-max: 1140px; } }
html.side-panel-page main.page-narrow { --side-panel-max: 56rem; }
html.side-panel-page main.page-medium { --side-panel-max: 72rem; }
/* 칸에 열린 예약·회사의 줄 (side_panel.js의 markCurrent, 달력의 파란 테두리와 같은 색) */
.panel-current { outline: 3px solid var(--bs-primary); outline-offset: -3px; position: relative; z-index: 1; }
.list-group-item.panel-current { background-color: rgba(var(--bs-primary-rgb), .08); }
tr.panel-current > * { --bs-table-bg-state: rgba(var(--bs-primary-rgb), .08); }
/* 그 칸 안에서 연 화면 (base.html의 html.in-panel): 위쪽 메뉴 줄·체험·구독 안내는 왼쪽 화면에 이미 있음 */
html.in-panel #app-header, html.in-panel #demo-notice, html.in-panel #subscription-notice { display: none !important; }
/* 알림 창 (check_in_alerts.js, 2026-10-24 주인의 결정: 모든 기기에서 화면 아래쪽, Bookings 칸이 열려 있으면 그 칸의 왼쪽 —
   Bootstrap end-0의 !important보다 강하게). 많이 쌓이면 위쪽 줄 밑까지만, 그 안에서 스크롤. iPhone 아래 막대 위로 */
#check-in-alerts { max-height: calc(100dvh - var(--pms-header-height, 0px)); overflow-y: auto;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important; }
html.side-panel-open #check-in-alerts { right: var(--side-panel-width) !important; }
@media print {
  .side-panel { display: none !important; }
  html.side-panel-open main.calendar-page { margin-right: 0; }
  html.side-panel-page.side-panel-open main { position: static; overflow: visible; padding-left: 0; padding-right: 0; }
}

/* 달력 화면의 여백 (2026-10-17 주인의 요청, 처음엔 휴대폰만 → 같은 날 PC·태블릿도): 달력 표는 화면 끝까지, 위쪽 단추 줄·
   안내는 좌우 8px, 위 여백과 단추 줄 아래 간격 4px, 아래 0 (그 전에는 좌우 12px씩·위아래 16px·단추 줄 아래 8px).
   방 줄 높이 48px (그 전 51px; 휴대폰은 48px → 52px → 48px, 48px에 맞게 글자 층의 위아래 여백 2px을 뺌).
   맨 아래 스크롤바 줄(마우스 PC)은 위아래 2px, 좌우 0 (달력 상자와 같은 폭). 창(.modal)은 그대로.
   PC 1400×900: 12.1일 × 방 13.6개 → 12.3일 × 15.3개, 태블릿 세로: 6일 × 16개 → 6.3일 × 17.9개 */
main.calendar-page { padding: .25rem 0 0 !important; }  /* !important: main의 py-3(16px)이 !important라서 */
main.calendar-page > :not(#calendar-scroll):not(.modal) { margin-left: .5rem; margin-right: .5rem; }
main.calendar-page > .mb-2 { margin-bottom: .25rem !important; }
main.calendar-page .calendar th.room { border-left-width: 0; }
main.calendar-page .calendar td.day { height: var(--fit-row, 3rem); }  /* 방 줄 48px — 휴대폰·태블릿은 calendar.js가 방 12개가 한 화면에
   들어가게 42–48px로 (2026-10-23, 주인의 요청, phoneRows), PC는 아래 PC 부분 */

/* --- 객실 달력 --- */
/* 모든 날짜 칸을 같은 폭으로. 폭은 --day-width 한 곳에서만 정합니다 (칸 폭과 칸 안 날짜 경계선이 함께 바뀜).
   --days = 날짜 수 (템플릿에서 넘겨 줌) */
.calendar { --day-width: 6.5rem; --room-width: 6.5rem; font-size: .8rem; border-collapse: separate; border-spacing: 0;
            table-layout: fixed; width: calc(var(--room-width) + var(--days, 14) * var(--day-width)); }
.calendar col.room-col { width: var(--room-width); }
.calendar col.day-col { width: var(--day-width); }
.calendar th, .calendar td { border: 1px solid var(--bs-border-color); padding: 2px; vertical-align: top; }
.calendar thead th { background: var(--bs-tertiary-bg); text-align: center; white-space: nowrap; font-weight: 600; }
/* 객실 번호 칸은 옆으로 스크롤해도 왼쪽에 붙어 있음. z-index 3: 골라 둔 예약(2)도 그 밑으로 지나감 (2026-10-30, 주인의 요청:
   예약을 고른 채 옆으로 스크롤하면 그 예약이 방 번호를 가렸음 — 둘 다 2라 나중에 그린 예약이 위). 위쪽 날짜 줄(thead 4)보다는 밑 */
.calendar .room { position: sticky; left: 0; z-index: 3; background: var(--bs-tertiary-bg); text-align: center; vertical-align: middle; }
/* 방 번호 아래 주 객실 종류 (짧은 이름, 길면 …) */
.calendar .room-type { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem;
                       font-weight: 500; color: var(--bs-secondary-color); }
/* 맨 아래 줄: 날짜마다 주 객실 종류마다 빈 방, 모두(Available), 그날 매출(Revenue). 숫자는 가운데, 빈 방이 없으면 빨간 글자 */
.calendar tfoot td { text-align: center; vertical-align: middle; white-space: nowrap; overflow: hidden; }
.calendar tfoot tr:first-child > * { border-top: 2px solid var(--bs-secondary-color); }
.calendar tfoot tr.summary-free > * { font-weight: 700; }
/* Available 위에 두 줄 (2026-10-06, 주인의 요청: 객실 종류 줄들의 합계라서). 바로 위 칸의 아래 테두리는 없앰
   (두 줄이 고르게 보이게). 객실 종류가 하나뿐이라 종류 줄이 없으면 방 줄 바로 밑에 */
.calendar tfoot tr.summary-free > * { border-top: 4px double var(--bs-secondary-color); }
.calendar tfoot tr:has(+ tr.summary-free) > *,
.calendar:has(tfoot > tr.summary-free:first-child) tbody > tr:last-child > * { border-bottom-width: 0; }
.calendar tfoot tr.summary-type > * { font-size: .72rem; color: var(--bs-secondary-color); }
.calendar tfoot tr.summary-type th.room { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar tfoot td.none-free { color: var(--pms-bad); }
.calendar tfoot tr.summary-revenue > * { border-top: 2px solid var(--bs-border-color); font-weight: 600; }
.calendar tfoot td.today { background: var(--bs-primary-bg-subtle); }
/* 좌우 여백 0: 예약 칸이 날짜 칸 테두리에 딱 붙음 (아래 날짜 경계선 위치가 이것을 전제로 함) */
.calendar td.day { height: 3.2rem; padding: 1px 0; }
.calendar .weekend { background-color: var(--pms-weekend); }
.calendar th.today { background: var(--bs-primary-bg-subtle); }
/* 공휴일 (뉴질랜드 + 모텔의 지역 기념일): 날짜 칸을 빨간 글자로, 이름은 작게 (길면 …) */
.calendar th.holiday { color: var(--pms-holiday-color); background: var(--pms-holiday-bg); }
.calendar th.holiday.today { background: var(--bs-primary-bg-subtle); }
.calendar .holiday-name { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .65rem; font-weight: 500; }
/* 날짜 아래 동네 시세 줄: 그 밤 Trivago 최저가 모텔 20곳의 평균 (색 = 가격대) / 우리 모텔의 최저가 */
.calendar tr.market-prices th { font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: clip;
                               padding: 2px 1px; background: var(--bs-body-bg); }  /* 한 줄로 */
.calendar tr.market-prices th.room { font-weight: 600; font-size: .65rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.calendar .market-green { color: var(--pms-market-green); }
.calendar .market-blue { color: var(--pms-market-blue); }
.calendar .market-orange { color: var(--pms-market-orange); }
.calendar .market-red { color: var(--pms-market-red); }
.calendar .market-ours { color: var(--bs-body-color); }  /* 우리 모텔의 최저가 ("/ $124", 다 팔렸으면 "/ Full") */
.calendar tr.market-prices th.market-very-high { background: #fff3a8; }  /* 시세 $200 넘음: Very high demand */
[data-bs-theme="dark"] .calendar tr.market-prices th.market-very-high { background: #5c4a00; }
.calendar tr.market-prices th.market-sold-out { background: #e5dbff; }  /* 우리 모텔이 다 팔린 밤 (Full) */
[data-bs-theme="dark"] .calendar tr.market-prices th.market-sold-out { background: #3b2d5c; }
/* 둘 다: 반은 노란색, 반은 보라색 */
.calendar tr.market-prices th.market-very-high.market-sold-out { background: linear-gradient(135deg, #fff3a8 50%, #e5dbff 50%); }
[data-bs-theme="dark"] .calendar tr.market-prices th.market-very-high.market-sold-out { background: linear-gradient(135deg, #5c4a00 50%, #3b2d5c 50%); }
.calendar tr.market-prices th.market-sold-out .market-ours { color: #6f42c1; }  /* "/ Full" 글자도 보라색 */
[data-bs-theme="dark"] .calendar tr.market-prices th.market-sold-out .market-ours { color: #c29ffa; }
.calendar tr.market-prices th > span + span { margin-left: .25em; }  /* "$131 / $119 ▲ #6": 칸 사이 간격 */
.calendar .market-arrow-up { color: var(--pms-bad); }    /* 우리 순위 15등 이상: 비싼 편 ▲ */
.calendar .market-arrow-down { color: var(--pms-market-blue); }  /* 5등 이내: 싼 편 ▼ */
.calendar .market-rank { font-weight: 500; color: var(--bs-secondary-color); }  /* 싼 순서 순위 ("#11"), 가격 바로 뒤 */
/* 새 예약·단체 예약의 빈 방 번호 버튼 (booking_form.js 5): 모두 같은 크기 (2026-10-27, 주인의 요청 — 11은 좁고 07은
   넓었음), 작은 동그라미 (같은 날, 주인의 요청: 더 작게 — 휴대폰의 큰 btn-sm 여백도 쓰지 않음). 숫자는 같은 폭으로,
   1~2자리는 같은 크기 (세 자리 방 번호도 서로는 같은 크기) */
#free-rooms .room-pick { min-width: 2rem; height: 2rem; --bs-btn-padding-x: .25rem; --bs-btn-padding-y: 0; --bs-btn-font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
/* 새 예약·예약 수정의 그 밤들의 시세 (2026-10-08, booking_form.js): 달력 Market 줄과 같은 색 */
.stay-prices .market-green { color: var(--pms-market-green); font-weight: 600; }
.stay-prices .market-blue { color: var(--pms-market-blue); font-weight: 600; }
.stay-prices .market-orange { color: var(--pms-market-orange); font-weight: 600; }
.stay-prices .market-red { color: var(--pms-market-red); font-weight: 600; }
.stay-prices .market-full { color: #6f42c1; font-weight: 600; }
[data-bs-theme="dark"] .stay-prices .market-full { color: #c29ffa; }
.stay-prices .market-arrow-up { color: var(--pms-bad); }
.stay-prices .market-arrow-down { color: var(--pms-market-blue); }
.stay-prices tr.market-very-high { --bs-table-bg: #fff3a8; }  /* 시세 $200 넘음 */
[data-bs-theme="dark"] .stay-prices tr.market-very-high { --bs-table-bg: #5c4a00; }
.stay-prices tr.market-sold-out { --bs-table-bg: #e5dbff; }  /* 우리 모텔이 다 팔린 밤 */
[data-bs-theme="dark"] .stay-prices tr.market-sold-out { --bs-table-bg: #3b2d5c; }
.stay-prices-table { font-size: .8rem; }
.stay-prices-table th, .stay-prices-table td { padding: 1px 10px 1px 0; white-space: nowrap; }
@media (max-width: 575.98px) {  /* 휴대폰: 좁은 날짜 칸에도 한 줄 */
  .calendar tr.market-prices th { font-size: .6rem; letter-spacing: -.02em; }
  .calendar tr.market-prices th > span + span { margin-left: .12em; }
}
/* 색칠된 예약 칸 = div.booking: 링크가 칸 전체를 덮는 층(누르면 예약 상세), 그 위에 이름·요금 글자 층(가운데)과
   체크인·체크아웃 버튼(둘째 줄 왼쪽 끝). 2026-10-16 (주인의 요청): 그 전에는 버튼이 이름 줄 왼쪽이라 1박 칸에서 이름이
   많이 잘렸음. 글자 층과 버튼은 grid의 같은 자리에 겹침. 글자 층은 누름을 아래 링크로 넘김 (pointer-events).
   --toggle-space = 버튼 폭: 요금 줄 양쪽에 같게 비워 둠 (요금이 가운데에 있으면서 버튼에 가리지 않게).
   0박(당일 이용) 예약은 달력에 없음 */
.calendar .booking { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
                     border-radius: 4px; --toggle-space: 0px; }
/* 색칠된 칸은 날짜 칸 높이를 다 채움, 글자·버튼 묶음은 그 세로 가운데 (2026-10-17 주인의 요청: 그 전에는 글자 높이만큼이라
   아래쪽 빈 곳(약 5px)이 위쪽(1px)보다 컸음). 묶음 안에서 요금 줄과 버튼의 바닥은 그대로 같음 */
.calendar td.day > .booking { height: 100%; align-content: center; }
.calendar .booking:has(> .checkin-toggle) { --toggle-space: 1.45rem; }
.calendar .booking:has(> .checkin-toggle.is-out) { --toggle-space: 1.85rem; }
.calendar .booking-link { position: absolute; inset: 0; border-radius: inherit; }
/* 합친 예약 칸 안의 날짜 경계선: 날짜 칸 폭(--day-width)마다 1px 세로줄을 배경에 그림.
   배경이라 글자 뒤쪽에 있고, 위쪽 날짜 칸 경계와 같은 자리에 옴. 1박 칸은 폭이 날짜 칸보다 좁아 줄이 안 생김 */
.calendar .booking {
  background-image: repeating-linear-gradient(to right,
    transparent 0 calc(var(--day-width) - 2px),
    rgba(0, 0, 0, .12) calc(var(--day-width) - 2px) calc(var(--day-width) - 1px),
    transparent calc(var(--day-width) - 1px) var(--day-width));
}
/* 이름·요금: 평소에는 칸 가운데. 긴 예약이라 가운데가 화면 밖이면 보이는 쪽 끝(방 번호 칸 옆 또는 화면 오른쪽 끝)에
   붙어 따라와서 늘 보임 (sticky). 칸보다 길면 …으로 줄임. 이름 줄은 칸 전체 폭 (버튼이 둘째 줄로 가서, 2026-10-16) */
.calendar .booking-label { grid-area: 1 / 1; justify-self: center;
                           position: sticky; left: calc(var(--room-width) + .25rem); right: .25rem; z-index: 1; display: inline-block;
                           max-width: 100%; padding: 0 4px; vertical-align: top; overflow: hidden; text-overflow: ellipsis;
                           white-space: nowrap; text-align: center; color: #212529; pointer-events: none; }
.calendar .booking-label .rate { overflow: hidden; text-overflow: ellipsis; padding: 0 var(--toggle-space); }
.calendar .booking-label .rate { margin-top: var(--fit-gap, .2rem); }  /* 이름과 요금 줄 사이 조금 더 (2026-10-17 주인의 요청) —
   방 줄이 낮으면 calendar.js가 줄임 (PC: fitRows, 휴대폰: phoneRows, 2026-10-23) */
/* 손님 이름은 진하게 (2026-10-17 주인의 요청; 날짜 머리글과 같은 600), 요금은 보통 굵기. 이름 줄 높이는 글자의 1.15배 (PC와
   같게; 2026-10-23: 휴대폰에서 방 줄을 42px까지 낮출 수 있게 — calendar.js의 phoneRows, 그 전에는 1.5배라 48px 밑으로 안 줄었음) */
.calendar .booking-label { font-weight: 600; line-height: 1.15; }
.calendar .booking-label .rate { font-weight: 400; }
/* 요금 글자는 체크인 버튼의 세로 가운데 (2026-10-17 주인의 요청): 요금 줄 = 버튼 높이(1.15rem), 바닥도 같게 (줄 아래 3px =
   버튼 아래 3px; 글자 층은 위아래 여백 없음 — 휴대폰 방 줄 48px에 맞게, 같은 날). 그 전에는 요금 줄이 글자 크기만큼이라
   숫자가 버튼 가운데보다 조금 아래(PC)였고, 글자를 크게 쓰는 휴대폰에서는 더 어긋났음 */
.calendar .booking-label .rate { line-height: 1.15rem; margin-bottom: 3px; }
/* 되는 브라우저(Chrome·Edge 133+, Safari 18.2+)에서는 글꼴의 위아래 빈 곳을 잘라 내고 숫자 높이(1cap)를 그 줄 한가운데에 —
   Windows의 Segoe UI는 숫자가 줄 가운데보다 조금 아래에 그려져서 */
@supports (text-box: trim-both cap alphabetic) and (height: 1cap) {
  .calendar .booking-label .rate { text-box: trim-both cap alphabetic; padding-block: calc((1.15rem - 1cap) / 2); }
}
/* 좁은 칸 (날짜 칸 하나짜리 예약, 방 번호 칸 밑으로 반쯤 들어간 예약 — calendar.js가 is-narrow): 버튼 자리는 왼쪽에만 비움.
   2026-10-17 (주인의 휴대폰): 양쪽을 비우면 넓은 "Out" 버튼인 1박 칸에서 요금이 "$…"로 잘렸음. 요금은 버튼 오른쪽 남은 폭의 가운데 */
.calendar .booking.one-day .booking-label .rate, .calendar .booking-label.is-narrow .rate { padding-right: 0; }
.calendar .booking:hover { outline: 2px solid #0d6efd; }
/* 골라 둔 예약 (예약 상세에서 Back으로 달력에 돌아왔을 때, calendar.js): 굵은 파란 테두리. 다른 예약 위, 방 번호 칸(3) 밑 */
.calendar .booking.is-selected { z-index: 2; outline: 3px solid #0d6efd; outline-offset: 1px; }
/* 빈칸: 마우스를 올리면 "+ New"가 보임 (누르면 새 예약). 휴대폰은 마우스가 없으니 누르면 바로 열림 */
.calendar td[data-new-date] { cursor: pointer; }
.calendar td[data-new-date]:hover { background-color: var(--pms-highlight); }
.calendar td[data-new-date]:hover::after { content: "+ New"; display: flex; align-items: center; justify-content: center;
                                           height: 100%; color: var(--bs-link-color); font-weight: 600; }
.calendar .rate-amount { opacity: .7; }  /* 1박 요금 (버튼은 흐리게 하지 않음) */
/* 일찍 떠나 다시 파는 밤 (2026-10-19, 주인의 요청, bookings/early_check_out.py): 그 밤의 칸을 가로로 반 나눔 (같은 날 주인의
   결정, 처음에는 사선). 위 = 새 예약 또는 빈칸 (누르면 새 예약), 아래 = 원래 예약 (그 예약의 결제 색에 흰 빗금 — 돈은 받았지만 방은
   비었음, 원래 손님 이름, 누르면 그 예약). 이어진 밤은 한 줄 (--at = 칸 안의 첫 밤, --n = 밤 수, --of = 칸의 밤 수; templatetags/
   calendar_cells.py의 released_html). 원래 손님 이름은 다시 파는 밤 전체의 가운데에 한 번 (아래 .released-name) */
.calendar td.day.released { position: relative; }
.calendar .booking-link.released-night { inset: 50% auto 0 calc(100% * var(--at) / var(--of)); width: calc(100% * var(--n) / var(--of));
  border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0 3px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 7px); }
.calendar .booking-link.released-night:hover { filter: brightness(.92); }
/* 원래 손님 이름 (주인의 요청: 가운데 정렬로 한 번): 첫 다시 파는 밤이 든 칸에서 시작해 다시 파는 밤 전체 (뒤의 칸까지) 폭의
   가운데, 아래 절반의 세로 가운데 (--at = 칸 안의 첫 밤, --n = 다시 파는 밤 수, --of = 칸의 밤 수). 누름은 아래 줄로 넘김.
   z-index 1: 뒤의 칸들 위에 보이게 (방 번호 칸(3) 밑) */
.calendar .released-name { position: absolute; left: calc(100% * var(--at) / var(--of)); top: 75%; z-index: 1;
  width: calc(100% * var(--n) / var(--of)); transform: translateY(-50%); padding: 0 3px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; text-align: center; font-size: .7rem; font-weight: 600; line-height: 1.1; color: #212529;
  pointer-events: none; }
.calendar td.day.released[data-new-date]:hover::after { height: 50%; }  /* "+ New"는 위 절반 (빈 곳) */
/* 새 예약: 모든 밤이 다시 파는 밤이면 이름과 체크인 버튼을 위 절반의 가운데 줄에 (in-released, 요금은 예약을 열면; grid-area
   auto: 그리드 칸이 아니라 예약 칸 전체를 기준으로). 두 이름 모두 가운데 정렬 (2026-10-19 주인의 요청; 버튼 자리는 양쪽에 같게). 앞 몇 밤만이면 이름·요금과 버튼을 나머지 밤들에 (after-released,
   --lead = 다시 파는 밤 수).
   1.592 (2026-10-30, 주인의 휴대폰: 1박 예약이 이어지면 이름이 옆 칸으로 넘쳐 다음 예약의 이름·버튼과 겹쳤음): 이름 층은 예약 칸
   폭 그대로 (justify-self: stretch — center면 grid 안의 absolute 층이 글자 길이만큼 넓어짐), 길면 다른 예약처럼 …. 1박 칸은
   버튼 자리를 왼쪽에만 비움 (요금 줄의 one-day처럼: 이름은 버튼 오른쪽 남은 폭의 가운데) */
.calendar .booking.in-released > .booking-label { position: absolute; grid-area: auto; top: 25%; left: 0; right: 0;
  justify-self: stretch; transform: translateY(-50%); max-width: none; padding: 0 var(--toggle-space); text-align: center; }
.calendar .booking.one-day.in-released > .booking-label { padding-right: 3px; }
.calendar .booking.in-released > .booking-label .rate { display: none !important; }
.calendar .booking.in-released > .checkin-toggle { position: absolute; grid-area: auto; top: 25%; left: 0;
  transform: translateY(-50%); margin: 0 0 0 3px; }
.calendar .booking.after-released > .booking-label { margin-left: calc(100% * var(--lead) / var(--of));
  max-width: calc(100% * (var(--of) - var(--lead)) / var(--of)); }
.calendar .booking.after-released > .checkin-toggle { margin-left: calc(100% * var(--lead) / var(--of) + 3px); }

/* 체크인·체크아웃 버튼: 예약 칸의 왼쪽 위. 긴 예약이라 시작이 화면 밖이면 방 번호 칸 옆에 붙어 따라와서 늘 보임 (sticky).
   체크인 전 = 옅은 빈 상자, 체크인 후 = 연두색 ✓, 체크아웃 후 = 회색 Out */
.checkin-toggle { width: 1.15rem; height: 1.15rem; padding: 0; font-size: .7rem; line-height: 1.05rem; font-weight: 700;
                  text-align: center; border: 1px solid rgba(0, 0, 0, .3); border-radius: .25rem;
                  background: rgba(255, 255, 255, .75); color: rgba(0, 0, 0, .2); cursor: pointer; }
/* 달력: 둘째 줄 왼쪽 끝 (2026-10-16). 긴 예약이라 시작이 화면 밖이면 방 번호 칸 옆에 붙어 따라와서 늘 보임 (sticky) */
.calendar .booking > .checkin-toggle { grid-area: 1 / 1; align-self: end; justify-self: start; position: sticky;
                                       left: calc(var(--room-width) + 3px); margin: 0 0 3px 3px; z-index: 1; }  /* 방 번호 칸(3) 밑 */
.checkin-toggle:hover, .checkin-toggle:focus-visible { border-color: #0d6efd; color: #0d6efd; }
.checkin-toggle.is-in { background: #ccffcc; border-color: #5cb85c; color: #1e7b34; }
/* 체크아웃함 = 회색 바탕에 "Out" (같은 버튼. 글자가 길어서 폭만 넓어짐) */
.checkin-toggle.is-out { width: auto; min-width: 1.15rem; padding: 0 .15rem; font-size: .55rem;
                         background: #6c757d; border-color: #6c757d; color: #fff; }
.checkin-toggle:disabled { opacity: .5; cursor: wait; }
/* 예약 상세의 같은 버튼: 조금 크게 (위쪽 줄의 다른 버튼과 높이를 비슷하게), 해야 할 일이면 달력처럼 초록·주황 테두리 */
.checkin-toggle-lg { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; line-height: 1.75rem; }
.checkin-toggle-lg.is-out { width: auto; min-width: 1.9rem; padding: 0 .45rem; font-size: .8rem; }
#stay-toggle[disabled][title="Read-only"] { cursor: default; }
.checkin-toggle.due-in { border-color: #198754; box-shadow: 0 0 0 1px #198754; }
.checkin-toggle.due-out { border-color: #fd7e14; box-shadow: 0 0 0 1px #fd7e14; }

/* 체크아웃해야 할 예약 (오늘 떠나는데 아직 체크아웃 안 함 / 떠날 날이 지났는데 체크아웃을 깜빡함): 주황색.
   달력 칸은 주황색 테두리, 달력 위 목록·오늘 화면은 주황색 이름표 */
.calendar .booking.due-out { box-shadow: inset 0 0 0 2px #fd7e14; }
.calendar .booking.due-out > .checkin-toggle { border-color: #fd7e14; box-shadow: 0 0 0 1px #fd7e14; }
.due-out-badge { background-color: #fd7e14; color: #fff; }
/* 체크인해야 할 예약 (오늘 도착하는데 아직 체크인 안 함 / 묵기 시작했는데 체크인을 깜빡함): 체크인 색(초록).
   달력 칸은 초록색 테두리, 달력 위 목록·오늘 화면은 초록색 이름표 */
.calendar .booking.due-in { box-shadow: inset 0 0 0 2px #198754; }
.calendar .booking.due-in > .checkin-toggle { border-color: #198754; box-shadow: 0 0 0 1px #198754; }
.due-in-badge { background-color: #198754; color: #fff; }
/* 확인할 예약 (2026-10-08, schedule.no_shows): 한 번도 체크인하지 않았는데 숙박 기간이 끝남 — 노쇼일 수 있음. 빨간색.
   달력 칸은 빨간 점선 테두리, 달력 위 목록·오늘 화면은 빨간 이름표, 예약 화면의 체크인 버튼은 빨간 테두리 */
.calendar .booking.no-show { outline: 2px dashed #dc3545; outline-offset: -2px; }
.calendar .booking.no-show > .checkin-toggle, .checkin-toggle.no-show { border-color: #dc3545; box-shadow: 0 0 0 1px #dc3545; }
.due-in-badge:hover { background-color: #146c43; color: #fff; }
.due-out-badge:hover { background-color: #e8590c; color: #fff; }

/* --- 드래그로 예약 옮기기 (마우스, 태블릿·휴대폰은 손가락으로 길게 눌러서) --- */
@media (pointer: fine) {
  .calendar .booking[data-move-url], .calendar .booking[data-move-url] a { cursor: grab; }
}
.calendar .booking.dragging { opacity: .45; }                 /* 끌고 있는 원래 예약은 흐리게 */
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
body.is-resizing, body.is-resizing * { cursor: ew-resize !important; user-select: none; }
/* 숙박 기간 바꾸기 손잡이: 예약 칸 오른쪽 끝(체크아웃 쪽). 마우스를 올리면 파랗게 보임 */
.calendar .resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1;  /* 글자 층(1)보다 뒤 순서라 위, 방 번호 칸(3) 밑 */
                           border-radius: 0 4px 4px 0; }
.calendar .booking:hover > .resize-handle { background: rgba(13, 110, 253, .35); }
/* 태블릿·휴대폰 (2026-10-10, 주인의 요청; calendar.js): 손가락으로 길게 눌러 끎. 손잡이는 잡기 쉽게 넓히고 세로줄 두 개로
   보이게, 길게 눌러도 링크 메뉴·링크 끌기·글자 선택이 뜨지 않게 */
@media (any-pointer: coarse) {
  .calendar .resize-handle { width: 16px; }
  .calendar .resize-handle::after { content: ""; position: absolute; top: 30%; bottom: 30%; right: 5px; width: 4px;
                                    border-left: 1px solid rgba(0, 0, 0, .4); border-right: 1px solid rgba(0, 0, 0, .4); }
  .calendar .booking { -webkit-user-select: none; user-select: none; }
  .calendar .booking a { -webkit-touch-callout: none; -webkit-user-drag: none; }
}
/* 놓일 자리를 보여 주는 점선 상자 (놓을 수 없는 방이면 빨간색) */
.drag-ghost { position: fixed; z-index: 1040; pointer-events: none; display: flex; align-items: center;
              justify-content: center; padding: 0 .4rem; overflow: hidden; white-space: nowrap;
              font-size: .75rem; font-weight: 600; color: var(--pms-ghost-color); background: rgba(13, 110, 253, .12);
              border: 2px dashed #0d6efd; border-radius: 4px; }
.drag-ghost.not-allowed { color: var(--pms-ghost-bad-color); background: rgba(220, 53, 69, .12); border-color: #dc3545; }

/* --- PC 화면: 방 줄과 2주가 한 화면에 (2026-10-19, 주인의 요청) ---
   방 25개 모텔의 주인이 1920 × 1080 (배율 100%) 화면에서 Excel처럼 방 25개 × 2주를 한 화면에 보고 싶어 함 (예전에는 방 줄이
   48px라 브라우저를 67%로 줄여 봐서 글자가 8.6px). 마우스가 있는 넓은 화면만 (calendar.js의 PC_SCREEN과 같은 조건; 태블릿·
   휴대폰은 그대로). 2026-10-20 (1.414, 주인의 요청: Surface 화면에서도): 마우스 대신 PC 같은 기기 (base.html의 html.pc-device:
   휴대폰·iPad·안드로이드 태블릿이 아님 — 터치로 쓰는 Surface도) + 폭 768px 이상 (그 전에는 992px: 세로로 세운 Surface, 반으로
   줄인 PC 창도):
   - 방 줄 높이·이름 글자·요금 글자·체크인 상자·이름과 요금 사이·아래 여백·날짜 칸 폭은 calendar.js가 화면에 맞춰 정함
     (#calendar-scroll의 --fit-*, 없으면 예전 값). 방 줄은 화면 높이를 다 채움 (방이 적으면 높게, 25개보다 많으면 25개가 한
     화면에; 31px 이상), 날짜 칸은 2주가 화면 폭에 (6.5rem보다 좁게는 안 함)
   - 머리글·맨 아래 줄은 줄 간격을 좁게 (달 이름 줄은 2026-10-23부터 모든 기기에서 없음: _calendar_table.html)
   - 객실 종류별 빈 방 줄은 화면에 맞춰: 방이 다 보이면 펴고 많으면 접음, ▸ Available로 바꿈 (calendar.js가 #calendar-scroll에
     types-open, 2026-10-19 주인의 결정; 그 전에는 늘 접어 둠)
   - 요금은 흐리게 하지 않음. Week·Today·날짜·예약 이메일 버튼은 맨 위 검은 줄 오른쪽으로 (calendar.js) */
/* 객실 종류별 빈 방 줄 접기 (▸ Available, calendar.js의 types-open): PC는 화면에 맞춰 저절로, 휴대폰·태블릿은 접어 두고 누르면 폄
   (1.594, 2026-10-30 주인의 요청 "휴대폰에서도 룸 타입 숨길 수 있게" — 그 전에는 PC만 접고 휴대폰은 늘 보였음) */
#calendar-scroll:not(.types-open) .calendar tfoot tr.summary-type { display: none; }
#calendar-scroll:not(.types-open) .calendar:has(tfoot tr.summary-type) tbody > tr:last-child > * { border-bottom-width: 0; }
.summary-fold { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; padding: 0; border: 0; background: none;
                color: inherit; font: inherit; cursor: pointer; }
.summary-fold:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
@media (hover: hover) { .summary-fold:hover { color: var(--bs-link-color); } }  /* 휴대폰은 누른 뒤 파랗게 남지 않게 */
.summary-fold .fold-mark { display: inline-block; width: .8em; font-size: .85em; transition: transform .15s; }
.summary-fold[aria-expanded="true"] .fold-mark { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .summary-fold .fold-mark { transition: none; } }
@media (min-width: 768px) {
  html.pc-device .calendar { --day-width: var(--fit-day-width, 6.5rem); }
  html.pc-device .calendar thead th { line-height: 1.2; }
  html.pc-device .calendar tfoot th, html.pc-device .calendar tfoot td { padding-top: 1px; padding-bottom: 1px; line-height: 1.2; }
  html.pc-device .calendar tbody th.room { padding-top: 0; padding-bottom: 0; line-height: 1.15; font-size: var(--fit-name, .8rem); }
  html.pc-device main.calendar-page .calendar td.day { height: var(--fit-row, 3rem); padding: 0; }
  html.pc-device .calendar .booking-label { font-size: var(--fit-name, .8rem); line-height: 1.15; }
  html.pc-device .calendar .booking-label .rate { font-size: var(--fit-rate, .8rem); line-height: var(--fit-toggle, 1.15rem);
                                   margin-top: var(--fit-gap, .2rem); margin-bottom: var(--fit-bottom, 3px); }
  @supports (text-box: trim-both cap alphabetic) and (height: 1cap) {
    html.pc-device .calendar .booking-label .rate { padding-block: calc((var(--fit-toggle, 1.15rem) - 1cap) / 2); }
  }
  html.pc-device .calendar .booking:has(> .checkin-toggle) { --toggle-space: calc(var(--fit-toggle, 1.15rem) + .3rem); }
  html.pc-device .calendar .booking:has(> .checkin-toggle.is-out) { --toggle-space: calc(var(--fit-toggle, 1.15rem) + .7rem); }
  html.pc-device .calendar .booking > .checkin-toggle { width: var(--fit-toggle, 1.15rem); height: var(--fit-toggle, 1.15rem);
    margin-bottom: var(--fit-bottom, 3px); font-size: calc(var(--fit-toggle, 1.15rem) * .6); line-height: calc(var(--fit-toggle, 1.15rem) - 2px); }
  html.pc-device .calendar .booking > .checkin-toggle.is-out { width: auto; min-width: var(--fit-toggle, 1.15rem);
    font-size: min(.55rem, calc(var(--fit-toggle, 1.15rem) * .62)); }
  html.pc-device .calendar .rate-amount { opacity: 1; }
  /* 맨 위 검은 줄로 옮긴 달력 버튼들 (계정 단추 앞, 위쪽 메뉴가 펼쳐지는 992px 이상에서만 — calendar.js). 다 들어가지 않으면 짧게:
     이메일 버튼은 숫자만, Week 글자 없이 */
  html.pc-device .header-calendar-nav { display: flex; align-items: center; margin-right: .75rem; }
  html.pc-device .header-calendar-nav .calendar-nav.is-short .d-sm-inline,
  html.pc-device .header-calendar-nav .calendar-nav.is-short .d-md-inline { display: none !important; }
}

/* --- 통계 (Stats) --- */
.stats-table { font-size: .85rem; white-space: nowrap; }
.stats-table .section-row th { background: var(--bs-secondary-bg); font-weight: 600; }
/* 옆으로 스크롤해도 줄 이름과 부분 제목(Rooms and guests 등)은 왼쪽에 붙어 있음 (주 보기, 휴대폰) */
.stats-table .section-title { position: sticky; left: .5rem; }
.stats-table tbody th[scope="row"], .stats-table thead th:first-child { position: sticky; left: 0; background: var(--bs-body-bg); z-index: 1; }
.stats-table .this-period { background: var(--pms-highlight); }  /* 이번 주·달·분기 */
.stats-table .total { border-left: 2px solid var(--bs-border-color); }
/* 달 보기 (2026-10-28, 주인의 요청 "Forecast 표와 Revenue 표의 Jan이 같은 자리에, 두 표의 크기가 똑같이"): 두 표 모두 이름 칸
   11rem + 나머지 13칸(12달 + Total)을 똑같이 나눔 (table-layout: fixed, <colgroup>). 좁은 화면은 옆으로 밀어서 봄 (min-width) */
.stats-table.aligned-months { table-layout: fixed; width: 100%; min-width: 72rem; }
.stats-table.aligned-months col.name-col { width: 11rem; }
.stats-table.aligned-months thead .small { white-space: normal; }  /* "so far + booked"는 칸 안에서 줄바꿈 */
#stats-year { width: auto; }
/* 증감 (▲ ▼): 값 아래 작게. 초록 = 좋아짐, 빨강 = 나빠짐, 회색 = 그대로 */
.stat-change { display: block; font-size: .68rem; font-weight: 500; line-height: 1.1; cursor: help; }
.change-good { color: var(--pms-good); }
.change-bad { color: var(--pms-bad); }
.change-same { color: var(--pms-same); }
/* 채널별 매출 그래프 (bookings/charts.py). 화면에서는 표 위에 (표·그래프를 감싼 칸 안에서 순서만 앞으로) */
.stats-body { display: flex; flex-direction: column; }
.stats-body > .stats-chart { order: -1; }
/* 위쪽 줄 (2026-10-17 주인의 요청: 기기마다 보기 좋게): PC가 아니면 보기·증감 단추는 제목 아래 한 줄, 휴대폰은 화면 폭 가득 */
@media (max-width: 991.98px) {
  .stats-head .stats-switches { order: 5; flex: 1 1 100%; }
}
@media (max-width: 575.98px) {
  .stats-head .stats-switches .btn-group { flex: 1 1 100%; }
  .stats-head .stats-switches .btn { flex: 1 1 0; padding-left: .25rem; padding-right: .25rem; }
  /* 표: 이름 칸을 좁게 (두 줄까지) 해서 숫자 칸이 더 보이게, 글자도 조금 작게 */
  .stats-table { font-size: .78rem; }
  .stats-table tbody th[scope="row"] { white-space: normal; min-width: 6.5rem; max-width: 7.5rem; line-height: 1.2; }
  .stats-table.aligned-months { min-width: 60rem; }
  .stats-table.aligned-months col.name-col { width: 7.5rem; }
  .channel-chart.aligned-chart { min-width: 60rem; }
  .aligned-chart .chart-names { flex-basis: 7.5rem; width: 7.5rem; }
}
.chart-scroll { overflow-x: auto; }
.channel-chart { display: block; width: 100%; height: auto; }
.channel-chart .chart-grid { stroke: var(--bs-border-color); stroke-width: 1; }
.channel-chart .chart-axis { fill: var(--bs-secondary-color); font-size: 12px; }
.channel-chart .chart-slot { fill: transparent; }                 /* 보이지 않지만 마우스를 올리면 설명이 보이는 칸 */
.channel-chart .is-current .chart-slot { fill: var(--pms-highlight); }  /* 이번 주·달·분기 */
.channel-chart .is-current .chart-axis { fill: var(--bs-emphasis-color); font-weight: 600; }
.channel-chart .chart-column:hover rect:not(.chart-slot) { opacity: .8; }
/* 달 보기 (2026-10-28, 주인의 요청 "Jan 막대도 표와 같은 자리에"): 표(aligned-months)처럼 이름 칸 11rem(금액 눈금) + 나머지 폭을
   13칸으로 — 막대는 %로 그려서 Forecast 표·Stats 표의 달 칸과 같은 자리 (마지막 칸은 표의 Total 자리라 비어 있음) */
.channel-chart.aligned-chart { display: flex; height: auto; min-width: 72rem; }
.aligned-chart .chart-names { flex: 0 0 11rem; width: 11rem; }
.aligned-chart .chart-plot { flex: 1 1 auto; min-width: 0; display: block; }
.chart-swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .3em; vertical-align: -.05em; }
/* 인쇄할 때만 보이는 것 (주 보기를 13주씩 나눈 표) */
.print-only { display: none; }
@media print {
  .navbar, .no-print, .alert { display: none !important; }
  .print-only { display: block; }
  .printed-page + .printed-page { break-before: page; }  /* 13주마다 새 장 */
  .stats-body { display: block; }                          /* 인쇄는 표 다음에 */
  .stats-chart { break-before: page; }                     /* 그래프는 새 장에 */
  .chart-swatch { print-color-adjust: exact; -webkit-print-color-adjust: exact; }  /* 범례 색도 인쇄 */
  /* 증감을 켜도 표 하나가 A4 가로 한 장에 들어가게: 글자를 작게, 칸 위아래 여백을 줄임 */
  .stats-page h1 { font-size: 13pt; }
  .stats-table { font-size: 7.5pt; }
  .stats-table.aligned-months { min-width: 0; }                 /* 종이 너비에 맞춤 (칸은 여전히 같은 자리) */
  .stats-table.aligned-months col.name-col { width: 22mm; }
  .channel-chart.aligned-chart { min-width: 0; }
  .aligned-chart .chart-names { flex-basis: 22mm; width: 22mm; }
  .stats-table.table-sm > :not(caption) > * > * { padding: 0 4px; }
  .stat-change { font-size: 6pt; line-height: 1; }
  .stats-note { font-size: 6.5pt; }
}

/* --- 오늘 화면: 객실 번호 동그라미 --- */
.room-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem;
              border-radius: .5rem; font-weight: 700; border: 1px solid rgba(0, 0, 0, .15); }
/* 오늘 화면의 돈 요청 목록 한 줄 (Request from Expedia·Balance owing, _payment_request_list.html; 2026-10-17 주인의 요청: 기기마다
   잘 배치 — 그 전에는 한 줄에 다 넣어서 휴대폰에서 이름 칸이 아주 좁았음).
   PC·태블릿: [방 | 이름·자세히 | 금액 | 버튼] 한 줄, 세로 가운데. 금액 칸(오른쪽 맞춤)과 버튼 칸의 폭을 정해 두어서 카드 안의 금액이
   한 세로줄에 (버튼이 하나뿐인 줄도). 버튼은 가로로 나란히 */
.list-group-item.payment-request { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: .75rem;
                                   align-items: center; grid-template-areas: "room info amount actions"; }
.payment-request > .room-badge { grid-area: room; }
/* 이름 줄 = 이름 + (취소 수수료 표시), 그 아래 줄마다 자세히·요청한 날·안내 */
.payment-request .pr-info { grid-area: info; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .375rem; }
.payment-request .pr-details, .payment-request .pr-waiting, .payment-request .pr-note { flex-basis: 100%; }
.payment-request .pr-amount { grid-area: amount; min-width: 5.5rem; text-align: right; }
.payment-request .pr-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; min-width: 12rem; }
/* 휴대폰: 방 | 이름 ··· 금액 / 취소 수수료 표시·자세히·요청한 날·안내(이름 칸과 금액 칸 폭 전체, 한 줄씩) / 버튼(왼쪽부터 가로로,
   맨 아래). 방 번호는 위쪽에 (도착·출발 목록처럼). 이름·자세히 묶음을 풀어서(display: contents) 줄마다 자리를 정함 */
@media (max-width: 575.98px) {
  .list-group-item.payment-request { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: repeat(5, auto) 1fr;
    align-items: start; grid-template-areas: "room name amount" "room flag flag" "room details details" "room waiting waiting"
                                             "room note note" "room actions actions"; }
  .payment-request .pr-info { display: contents; }
  .payment-request .pr-name { grid-area: name; }
  .payment-request .pr-flag { grid-area: flag; justify-self: start; margin: .125rem 0; }
  .payment-request .pr-details { grid-area: details; }
  .payment-request .pr-waiting { grid-area: waiting; }
  .payment-request .pr-note { grid-area: note; }
  .payment-request .pr-amount { min-width: 0; }
  .payment-request .pr-actions { justify-content: flex-start; min-width: 0; margin-top: .5rem; }
}

/* 접는 카드 (<details class="card"><summary class="card-header">: 새 예약의 Company·Booking details, Import bookings).
   접혔을 때는 제목 줄만: 아래 선을 없애고 모서리를 카드처럼 둥글게, 옆 카드가 길어도 늘어나지 않게 (h-100을 무름) */
details.card:not([open]) { height: auto !important; }
details.card:not([open]) > summary.card-header { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }

/* 예약 변경 기록 (전 값 → 새 값) */
/* 예약 화면의 이름-값 목록 (2026-10-23, 주인의 요청: 줄 간격을 좁게): Bootstrap의 dd 아래 여백 .5rem → .2rem */
.dl-tight > dd { margin-bottom: .2rem; }
.dl-tight > dd:last-child { margin-bottom: 0; }
/* 넓은 화면용 페이지 (예약 화면, 2026-10-23): container-fluid로 양옆 여백을 줄이되 1760px까지만 (큰 모니터에서 너무 퍼지지 않게) */
.page-wide { max-width: 1760px; }
.history-table th { width: 11rem; font-weight: 500; color: var(--pms-label); }
.history-table td, .history-table th { padding: .15rem .4rem; }

/* 위쪽 줄 왼쪽의 속성 이름: 길면 … 로 줄임 (휴대폰에서는 ☰ 버튼 자리를 남기고) */
.property-brand { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
/* 위쪽 줄이 화면 위에 붙어 따라오므로 (base.html, sticky-top) #주소로 가거나 스크롤해 보여 줄 때 그 밑으로 */
html { scroll-padding-top: calc(var(--pms-header-height, 0px) + .5rem); }
.property-switch { min-width: 0; }  /* 고르는 목록이 잘리지 않게 이름만 줄임 */
/* 좁은 화면: 이름 + 버전(v1.40) + ☰가 한 줄에 (개발용 PC는 DEVELOPMENT도) */
@media (max-width: 991.98px) { .property-brand { max-width: calc(100vw - 8.75rem); }
  body:has(#development-label) .property-brand { max-width: calc(100vw - 15.75rem); } }

/* 청소 상태 (bookings/housekeeping.py): 빨강 = 청소할 것, 파랑 = 청소 중, 노랑 = 검사할 것, 초록 = 준비됨,
   회색 = 손님이 아직 있음 / 손님이 청소를 사양함. 방 번호 상자·이름표(hk-badge)·달력의 점(hk-dot)이 같은 색 */
.hk-dirty { background-color: #f8d7da; color: #842029; }
.hk-cleaning { background-color: #cfe2ff; color: #084298; }
.hk-clean { background-color: #fff3cd; color: #664d03; }
.hk-inspected { background-color: #d1e7dd; color: #0f5132; }
.hk-occupied, .hk-declined { background-color: #e2e3e5; color: #41464b; }
.hk-number { display: flex; flex: none; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem;
             border-radius: .5rem; font-size: 1.15rem; font-weight: 700; }
.hk-room .btn { min-width: 6.5rem; }  /* 휴대폰에서 누르기 쉽게 */
.hk-dot { display: inline-block; width: .55rem; height: .55rem; margin-left: .3rem; border-radius: 50%; vertical-align: middle; }
.hk-dot.hk-dirty { background-color: #dc3545; }
.hk-dot.hk-cleaning { background-color: #0d6efd; }
.hk-dot.hk-clean { background-color: #ffc107; }
.hk-dot.hk-inspected { background-color: #198754; }
.hk-dot.hk-occupied, .hk-dot.hk-declined { background-color: #adb5bd; }
.hk-report-problem { background-color: #f8d7da; }
.hk-report-lost { background-color: #cff4fc; }
/* 청소 목록의 앞으로의 날 (계획): 방 번호 상자는 색 없이. 지난 날의 기록은 시간 순서 목록 */
.hk-plan { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.hk-timeline { padding-left: 0; list-style: none; }
.hk-timeline li { padding: .05rem 0; }
/* 청소 목록의 방에 보이는 알림 (밝은·어두운 화면 모두 Bootstrap 색) */
.hk-note { padding: .4rem .6rem; border: 1px solid; border-radius: .5rem; }
.hk-note-problem { background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); }
.hk-note-lost { background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); color: var(--bs-info-text-emphasis); }
.hk-note-request { background-color: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); color: var(--bs-emphasis-color); }
.hk-note .btn { min-width: 0; }
.hk-room .hk-report-button { min-width: 0; }
.hk-room-title { flex: 1 1 0; min-width: 0; }
.hk-room-side { flex: none; margin-left: auto; }
/* 묶음으로 바로 가기: 스크롤해도 위에 붙어 있음 (화면 위쪽 줄 바로 밑). 바로 간 묶음·방이 그 밑에 가리지 않게 scroll-margin */
.hk-jump { position: sticky; top: var(--pms-header-height, 0px); z-index: 10; display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0;
  background-color: var(--bs-body-bg); scrollbar-width: none; }
.hk-jump::-webkit-scrollbar { display: none; }
.hk-jump-link { flex: none; padding: .3rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 1rem;
  color: var(--bs-body-color); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.hk-jump-link:hover { background-color: var(--bs-tertiary-bg); }
.hk-group, .hk-room { scroll-margin-top: 3.5rem; }
/* 휴대폰 (좁은 화면) */
@media (max-width: 575.98px) {
  .hk-jump { gap: .3rem; }
  .hk-jump-link { flex: 1 1 auto; padding: .25rem .4rem; font-size: .78rem; text-align: center; }
  .hk-jump-link .badge { font-size: .7rem; }
  .hk-room { padding: .75rem; }
  /* 청소 버튼: 첫 버튼(Start cleaning, Done, Inspected)은 한 줄 전체, 나머지(Towels, Declined, Mark dirty, Issues)는
     작은 글자로 그 밑에 한 줄 (같은 너비, 글이 길면 버튼 안에서 두 줄) */
  .hk-actions { align-items: stretch !important; }
  .hk-actions > .hk-main { flex: 1 1 100%; }
  .hk-actions > .hk-main .btn { width: 100%; min-height: 2.75rem; }
  .hk-actions > .hk-more { flex: 1 1 0; min-width: 0; margin-left: 0 !important; align-items: stretch !important; }
  .hk-actions > .hk-more > .btn, .hk-actions > .btn.hk-more { width: 100%; min-width: 0; min-height: 2.5rem;
    padding: .3rem .3rem; font-size: .75rem; line-height: 1.2; white-space: normal; }
  /* 작은 버튼이 Issues & Lost Property뿐이면 오른쪽에 글자만큼 */
  .hk-actions > .hk-main + .hk-report-button:last-child, .hk-actions > .hk-report-button:only-child {
    flex: 0 0 auto; width: auto; margin-left: auto !important; }
  /* 둘뿐일 때 (첫 버튼 + Issues / Lost): 첫 버튼(Start cleaning 등)을 작게 해서 Issues / Lost와 한 줄에 (2026-10-09, 주인의 요청) */
  .hk-actions > .hk-main:has(+ .hk-report-button:last-child) { flex: 1 1 auto; }
  .hk-actions > .hk-main:has(+ .hk-report-button:last-child) .btn { width: 100%; min-height: 2.5rem; font-size: .85rem; padding: .3rem .6rem; white-space: nowrap; }
  .hk-shower-check { width: 100%; padding-top: .25rem; }
  .hk-shower-check .form-check-input { width: 1.35rem; height: 1.35rem; margin-top: 0; }
  .hk-shower-check .form-check-label { padding-left: .35rem; line-height: 1.35rem; }
  /* 알리는 칸: 종류 고르기·적는 칸·Send가 각각 한 줄 */
  .hk-report-form > .btn-group, .hk-report-form > .form-control, .hk-report-form > .btn { width: 100% !important; flex: 1 1 100%; }
  .hk-report-form > .btn-group > .btn { flex: 1 1 0; min-height: 2.5rem; }
}
/* 청소 종류와 할 일 (보여 주기만). 이불 커버 바꾸기(Linen change)는 Service 1에만 있어서 굵게 */
.hk-service-badge { background-color: var(--pms-navy); color: #fff; }
/* Service 1 / Service 2 버튼 (계속 묵는 방): 지금 할 청소는 네이비로 채움 (이름표 hk-service-badge와 같은 색; 2026-10-21까지
   검정, 어두운 화면은 흰색). 어두운 화면의 고르지 않은 버튼은 흰 테두리·글자 */
.hk-room .hk-service-choice .btn { min-width: 0; padding: .1rem .55rem; border: 1px solid var(--pms-navy); color: var(--pms-navy);
  background-color: transparent; font-size: .75rem; font-weight: 700; line-height: 1.5; }
.hk-room .hk-service-choice .btn.active, .hk-room .hk-service-choice .btn:disabled { background-color: var(--pms-navy); color: #fff; opacity: 1; }
/* 묶음의 바깥 두 끝은 둥글게 — 이름표(hk-service-badge)처럼 (2026-10-31, 주인의 요청: 두 모양을 하나로). form 안의 숨은 입력칸
   (csrf, day) 뒤라서 Bootstrap의 .btn-group 규칙이 첫 버튼의 왼쪽 끝까지 각지게 했음 — 오른쪽 끝만 둥글었음 */
.hk-room .hk-service-choice > .btn:first-of-type { border-top-left-radius: var(--bs-btn-border-radius);
  border-bottom-left-radius: var(--bs-btn-border-radius); }
[data-bs-theme="dark"] .hk-room .hk-service-choice .btn { border-color: #f8f9fa; color: #f8f9fa; }
[data-bs-theme="dark"] .hk-room .hk-service-choice .btn.active,
[data-bs-theme="dark"] .hk-room .hk-service-choice .btn:disabled { background-color: var(--pms-navy); border-color: var(--pms-navy); color: #fff; }
@media (max-width: 575.98px) { .hk-room .hk-service-choice .btn { padding: .3rem .75rem; } }  /* 휴대폰: 누르기 쉽게 */
.hk-shower { background-color: #cff4fc; color: #055160; }
.hk-shower-check { padding-left: 1.75em; }

/* 검색 화면: 검색 칸이 넓게, 상태 고르기와 버튼은 그 옆 (좁으면 다음 줄로) */
.search-form .form-control { flex: 1 1 16rem; width: auto; }
.search-form .form-select { flex: 0 1 12rem; width: auto; }

/* PIN 칸 (로그인 화면의 PIN 탭): 크게, 가운데, 숫자 사이를 띄워서 */
.pin-input { font-size: 1.5rem; letter-spacing: .5em; text-align: center; }
.pin-input::placeholder { font-size: 1rem; letter-spacing: normal; }

/* 사용 안내서 화면: 위쪽 메뉴 아래를 안내서 칸이 채움 (templates/guide.html이 높이를 맞춤) */
.guide-frame { display: block; width: 100%; border: 0; }

.min-w-0 { min-width: 0; }  /* 줄어들 수 있는 칸 (긴 글자가 화면을 넓히지 않게, 말줄임표) */
/* Today·Housekeeping (2026-10-09, 주인의 요청): 넓은 PC 화면에서 목록이 너무 넓어 빈 곳이 많고 한눈에 안 들어왔음.
   화면의 폭을 줄임 (main의 container 대신. 그보다 좁은 화면에서는 전처럼 화면 폭 전체) */
.page-narrow { max-width: 56rem; }
/* Bookings (2026-10-30, 주인의 요청: 검색 표가 좁았음 — 1.537부터 page-narrow였음): 칸이 많은 표라 조금 더 넓게 */
.page-medium { max-width: 72rem; }
/* 태블릿 크기 (576–991px, 2026-10-24 전체 점검): Bootstrap의 container는 540/720px라 iPad 세로(820px)에서 양옆이 60px씩 비고
   표가 잘렸음 → 화면 폭 전체 (좌우 여백은 container의 것 그대로) */
@media (min-width: 576px) and (max-width: 991.98px) { main.container { max-width: none; } }
/* 터치 기기 (휴대폰·태블릿 = html.pc-device가 아닌 기기, 2026-10-24 주인의 결정): 작은 버튼(31px)·작은 칸을 손가락 크기(약 40px)로
   — 달력의 ← Week·Today, 예약 화면의 문서·이메일 줄 등. 달력 칸 안의 체크인 단추는 그대로. PC·Surface는 그대로 */
html:not(.pc-device) main .btn-sm:not(.checkin-toggle), html:not(.pc-device) main .btn-group-sm > .btn,
html:not(.pc-device) main .input-group-sm > .btn, html:not(.pc-device) #check-in-alerts .btn-sm {
  --bs-btn-padding-y: .53rem; --bs-btn-padding-x: .75rem; }
html:not(.pc-device) main .form-control-sm, html:not(.pc-device) main .form-select-sm,
html:not(.pc-device) main .input-group-sm > .form-control { padding-top: .45rem; padding-bottom: .45rem; }
/* 새 예약: 채운 예약 이메일의 글자 (보기만, 길면 칸 안에서 스크롤) */
.email-text { max-height: 24rem; overflow: auto; padding: .5rem .75rem; border-radius: .375rem; white-space: pre-wrap;
  background-color: var(--bs-tertiary-bg); font-size: .8rem; }

/* ---------- 휴대폰 (좁은 화면) 공통 (2026-09-30) ----------
   - 작은 버튼(btn-sm)도 손가락으로 누르기 쉬운 높이로 (달력 칸 안의 버튼은 그대로)
   - 작은 입력 칸도 글자 16px: iPhone이 칸을 누를 때 화면을 확대하지 않게
   - table-stack 표: 줄마다 카드처럼 (칸 이름은 data-label). 통계표: 맨 왼쪽 칸(이름)은 옆으로 밀어도 보이게
   - 달력: 날짜 칸을 좁게 해서 더 많은 날이 보이게 */
.stats-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background-color: var(--bs-body-bg); }
@media (max-width: 575.98px) {
  html.pc-device main .btn-sm:not(.checkin-toggle) { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .7rem; }  /* 좁은 PC 창; 터치 기기는 위 */
  main .form-control-sm, main .form-select-sm { font-size: 1rem; }
  .calendar { --day-width: 5.25rem; --room-width: 5rem; }
  .calendar .room-type { font-size: .58rem; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
  table.table-stack thead { display: none; }
  table.table-stack tr { padding: .5rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
  /* 칸 안의 글·작은 글이 각각 세로 칸으로 쪼개지지 않게 (2026-10-23: Payslips의 "이름 (로그인) · no email"이 좁은 세 칸이 됐었음) */
  table.table-stack td { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; padding: .15rem .25rem; border: 0;
                         text-align: left !important; }
  table.table-stack td::before { content: attr(data-label); flex: 0 0 6.5rem; margin-right: .45rem; color: var(--bs-secondary-color);
                                 font-size: .875em; }
  table.table-stack td:not([data-label])::before, table.table-stack td[data-label=""]::before { display: none; }
  table.table-stack td.table-stack-actions { justify-content: flex-end; padding-top: .4rem; }
  /* 예약 화면의 Documents·Email 버튼: 휴대폰에서는 같은 너비 두 칸으로 가지런히, 이름(Documents:, Email:)은 한 줄 전체 (2026-10-09) */
  .booking-actions.d-flex { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
  .booking-actions > span { grid-column: 1 / -1; margin: .25rem 0 0 !important; }
  .booking-actions > .btn { width: 100%; white-space: normal; padding-top: .45rem; padding-bottom: .45rem; }
  .calendar-nav { flex: 1 1 100%; }  /* 달력: 옮기기 버튼과 날짜가 한 줄 전체 */
  .calendar-nav form { flex: 0 0 auto; min-width: 0; }  /* 날짜 칸은 좁게: Go 버튼 오른쪽에 여백 (2026-10-10) */
  .calendar-nav form input { min-width: 0; width: 7.6rem; }
  .calendar-nav { flex-wrap: nowrap; padding-right: .25rem; }
}


/* 모바일 점검 (2026-10-09, 주인의 요청 "모든 페이지를 Mobile friendly하게"): 휴대폰(좁은 화면)에서 */
@media (max-width: 575.98px) {
  /* 위쪽 줄: 버전은 계정 메뉴 안으로, 개발용 표시는 DEV로 짧게 (base.html) → 모텔 이름이 잘리지 않게 */
  .property-brand { max-width: calc(100vw - 5.75rem); }
  body:has(#development-label) .property-brand { max-width: calc(100vw - 8.75rem); }
  /* 이름-값 목록 (예약 화면, 단체 예약, 취소 화면 …): 이름은 왼쪽에 작게, 값은 오른쪽 (2026-10-23, 주인의 요청 "여백이 많으면
     줄여": 그 전에는 이름을 값 위에 따로 한 줄 — 예약 화면이 두 배로 길었음) */
  dl.row > dt.col-5, dl.row > dt.col-4 { flex: 0 0 40%; max-width: 40%; margin-bottom: .25rem; font-size: .8rem;
    font-weight: 600; color: var(--bs-secondary-color); }
  dl.row > dd.col-7, dl.row > dd.col-8 { flex: 0 0 60%; max-width: 60%; margin-bottom: .25rem; }
  /* 맨 아래 버튼 줄 (form-actions): 저장 버튼이 한 줄 전체, 그 밑에 돌아가기 (긴 버튼 둘이 나란히 두 줄로 깨지지 않게) */
  .form-actions { flex-direction: column; align-items: stretch !important; }
  .form-actions > .btn, .form-actions > form, .form-actions > form > .btn { width: 100%; }
  .form-actions > .ms-auto { margin-left: 0 !important; }
  /* 청소 목록의 작은 버튼: 짧은 이름 (Towels only, Declined, Issues / Lost), 손가락 크기. Service 1 / 2도 크게. 글자 크기와
     줄바꿈은 아래 2026-10-23 규칙 (2026-10-26 화면 점검: 여기의 nowrap 때문에 Start cleaning이 버튼 밖으로 삐져나왔음) */
  .hk-actions > .hk-more > .btn, .hk-actions > .btn.hk-more { min-height: 2.75rem; }
  .hk-room .hk-service-choice .btn { padding: .5rem .9rem; font-size: .85rem; }
  /* table-stack 표의 줄 이름 (th scope=row, 예: Import의 NURISTAY's columns): 카드의 맨 위 줄로 */
  table.table-stack th[scope="row"] { display: block; width: 100%; padding: .15rem .25rem; border: 0; }
  /* 작은 개선 (2026-10-09, 모바일 점검의 "낮음" 10가지) */
  /* 달력: 날짜 칸을 조금 넓게 (손님 이름이 덜 잘리게), 방 번호 밑 객실 종류 글자를 조금 크게 */
  .calendar { --day-width: 5.75rem; }
  .calendar .room-type { font-size: .65rem; }
  /* 달력의 체크인·체크아웃 버튼은 원래 크기 그대로 (1.166에 키웠다가 1.171에 되돌림, 주인의 요청) */
  /* 체크 칸·스위치: 손가락 크기 (글자를 눌러도 체크됨: label) */
  .form-check { min-height: 1.75rem; padding-left: 2rem; }
  .form-check .form-check-input { margin-left: -2rem; }
  .form-check-input:not(.btn-check) { width: 1.3rem; height: 1.3rem; margin-top: .1rem; }
  .form-switch { padding-left: 3.1rem; }
  .form-switch .form-check-input { width: 2.5rem; height: 1.35rem; margin-left: -3.1rem; }
  /* 이메일 보내기의 받는 사람 빠른 버튼: 한 줄에 하나, 누르기 쉽게 */
  [data-use-address] { display: block; padding: .45rem 0 !important; text-align: left; }
  /* 청소 목록 위쪽 바로 가기 줄: 옆으로 밀지 않고 두 줄로 */
  .hk-jump { flex-wrap: wrap; overflow-x: visible; }
  /* 긴 화면 제목 (단체 이름, Email tax invoice #… 등): 조금 작게 */
  main h1.h4 { font-size: 1.15rem; }
}
/* To confirm 줄의 두 버튼: 좁게, 글자는 두 줄로 (2026-10-09) */
.confirm-actions { width: 4.2rem; }  /* 2026-10-09: Check in 버튼과 같은 너비 (주인의 요청) */
.confirm-actions .btn { white-space: normal; line-height: 1.15; width: 100%; font-size: .72rem; padding: .25rem .2rem; }

/* 헤더의 모텔 로고 (모텔 이름 대신, 2026-10-09). 어두운 헤더에서도 보이게 흰 바탕 */
.header-logo { max-height: 40px; max-width: 170px; background: #fff; border-radius: .35rem; padding: 2px 6px; vertical-align: middle; }
/* 달력의 날짜 고르기: 화면 크기에 맞게 (Go 버튼이 없어짐, 2026-10-10) */
.calendar-nav form input { width: 9.5rem; }
@media (max-width: 767.98px) { .calendar-nav form input { width: 8.5rem; } }
/* Bookings의 From – To: 폰(좁은 화면)에서는 한 줄 전체를 반씩 */
@media (max-width: 575.98px) { #search-dates .date-range { flex: 1 1 100%; } #search-dates select[name=date_field] { flex: 1 1 100% !important; } }
/* Booking emails의 Create / Edit / Cancel: 넓게, 세 버튼 같은 너비 (2026-10-10, 주인의 요청) */
.email-actions { width: 100%; max-width: 21rem; }
.email-actions > .btn { flex: 1 1 0; min-width: 0; width: 33.333%; text-align: center; padding-top: .45rem; padding-bottom: .45rem; }
/* Bookings 찾기 줄: 상태 → 날짜 종류 → Search가 한 줄 (폰에서는 글자·간격을 조금 줄임) */
@media (max-width: 575.98px) { #search-filters .form-select { font-size: .9rem; padding-left: .5rem; padding-right: 1.6rem; } #search-filters .btn { padding-left: .8rem; padding-right: .8rem; } }
/* Today의 체크인·체크아웃 버튼: 방 번호 아래에 달력과 같은 작은 ✓ / Out 버튼 (2026-10-10, 주인의 요청). 방 번호 상자와 같은 너비 안에서 가운데 */
.board-left .checkin-toggle-lg { margin: 0; }
/* Housekeeping 폰 (2026-10-23, 주인의 요청 "버튼들을 잘 정렬": 그 전에는 버튼마다 글자 크기·폭이 달랐음 — Start cleaning은 좁고
   Issues / Lost는 넓은데 글자는 작게): 카드 아래 버튼은 모두 같은 높이·같은 글자 크기, 한 줄에 같은 폭으로 나눔 (긴 이름은 버튼
   안에서 두 줄). Done 뒤에 버튼이 더 있으면 (hk-wide) Done은 한 줄 전체, 나머지는 그 밑에 한 줄 */
@media (max-width: 575.98px) {
  .hk-actions { flex-wrap: wrap !important; gap: .4rem !important; align-items: stretch !important; }
  .hk-actions > .hk-main, .hk-actions > .hk-more { flex: 1 1 0 !important; min-width: 0; width: auto; margin-left: 0 !important;
                                                   align-items: stretch !important; }
  .hk-actions > .hk-main.hk-wide { flex: 1 1 100% !important; }
  /* 위의 작은 버튼 규칙(.hk-more > .btn)보다 뒤에, 같은 세기로: 그래야 이 글자 크기·두 줄이 이김 */
  .hk-actions .btn, .hk-actions > .hk-more > .btn, .hk-actions > .btn.hk-more {
    width: 100% !important; min-width: 0; min-height: 2.6rem; padding: .25rem .35rem; font-size: .8rem; line-height: 1.15;
    white-space: normal; }
  .hk-actions > .hk-main.hk-wide .btn { font-size: .95rem; }
}


/* --- 화면 디자인의 색 틀 (2026-10-10 Cream·Wine으로 시작, 2026-10-25부터 새 디자인 하나: bookings/fresh.css) ---
   base.html이 <html data-skin="fresh"> (밝은 화면) 또는 <html data-bs-theme="dark" data-skin="fresh-dark">로 정하고, fresh.css가
   --skin-* 색을 정함. 여기서는 그 색으로 Bootstrap 색 변수(페이지·카드·글자·테두리·링크)와 위쪽 줄·버튼·입력칸 강조를 바꿈.
   예약 색과 상태 색(체크인 초록, 체크아웃 주황, 기한 빨강, 경고·성공 알림)의 뜻은 그대로. 인쇄는 data-skin 없이 예전의 밝은 기본 화면.
   Cream·Wine(크림·와인 위쪽 줄)은 2026-10-25에 뺌 (주인의 결정: 새 디자인의 Light·Dark만) */
html[data-skin] {
  --bs-body-bg: var(--skin-surface); --bs-body-bg-rgb: var(--skin-surface-rgb);   /* 카드·목록·입력칸·창은 이 색 (페이지 바탕은 아래 body) */
  --bs-body-color: var(--skin-text); --bs-body-color-rgb: var(--skin-text-rgb);
  --bs-emphasis-color: var(--skin-text); --bs-emphasis-color-rgb: var(--skin-text-rgb);
  --bs-secondary-color: var(--skin-muted); --bs-secondary-color-rgb: var(--skin-muted-rgb);
  --bs-secondary-bg: var(--skin-surface2); --bs-secondary-bg-rgb: var(--skin-surface2-rgb);
  --bs-tertiary-bg: var(--skin-surface2); --bs-tertiary-bg-rgb: var(--skin-surface2-rgb);
  --bs-border-color: var(--skin-border); --bs-border-color-translucent: color-mix(in srgb, var(--skin-text) 18%, transparent);
  --bs-link-color: var(--skin-primary); --bs-link-color-rgb: var(--skin-primary-rgb);
  --bs-link-hover-color: var(--skin-primary-hover); --bs-link-hover-color-rgb: var(--skin-primary-rgb);
  --bs-primary: var(--skin-primary); --bs-primary-rgb: var(--skin-primary-rgb);
  --bs-primary-bg-subtle: var(--skin-soft); --bs-primary-border-subtle: var(--skin-border); --bs-primary-text-emphasis: var(--skin-primary-hover);
  --bs-focus-ring-color: color-mix(in srgb, var(--skin-primary) 25%, transparent);
  --pms-weekend: color-mix(in srgb, var(--skin-bg) 55%, var(--skin-surface2)); --pms-highlight: var(--skin-soft);
}
html[data-skin] body { background-color: var(--skin-bg); }

/* 위쪽 줄: 헤더 색과 그 위의 글자·메뉴 단추 */
html[data-skin] .navbar.bg-dark { background-color: var(--skin-head) !important; border-bottom: 1px solid color-mix(in srgb, var(--skin-headtext) 18%, transparent); }
html[data-skin] .navbar-dark {
  --bs-navbar-color: color-mix(in srgb, var(--skin-headtext) 78%, transparent); --bs-navbar-hover-color: var(--skin-headtext);
  --bs-navbar-active-color: var(--skin-headtext); --bs-navbar-brand-color: var(--skin-headtext); --bs-navbar-brand-hover-color: var(--skin-headtext);
  --bs-navbar-toggler-border-color: color-mix(in srgb, var(--skin-headtext) 35%, transparent);
}
html[data-skin] .navbar .btn-outline-light {
  --bs-btn-color: var(--skin-headtext); --bs-btn-border-color: color-mix(in srgb, var(--skin-headtext) 40%, transparent);
  /* 누른 때(계정 메뉴를 연 동안)의 글자: 위쪽 줄 색을 진하게 (2026-10-26 화면 점검: 밝은 화면에서 흰 바탕에 옅은 하늘색, 대비 2.4) */
  --bs-btn-hover-color: color-mix(in srgb, var(--skin-head) 62%, #000); --bs-btn-hover-bg: var(--skin-headtext);
  --bs-btn-hover-border-color: var(--skin-headtext);
  --bs-btn-active-color: color-mix(in srgb, var(--skin-head) 62%, #000); --bs-btn-active-bg: var(--skin-headtext);
  --bs-btn-active-border-color: var(--skin-headtext);
}

/* 버튼 */
html[data-skin] .btn-primary {
  --bs-btn-color: var(--skin-primarytext); --bs-btn-bg: var(--skin-primary); --bs-btn-border-color: var(--skin-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--skin-primary-hover); --bs-btn-hover-border-color: var(--skin-primary-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--skin-primary-hover); --bs-btn-active-border-color: var(--skin-primary-hover);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--skin-primary); --bs-btn-disabled-border-color: var(--skin-primary);
  --bs-btn-focus-shadow-rgb: var(--skin-primary-rgb);
}
html[data-skin] .btn-outline-primary {
  --bs-btn-color: var(--skin-primary); --bs-btn-border-color: var(--skin-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--skin-primary); --bs-btn-hover-border-color: var(--skin-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--skin-primary); --bs-btn-active-border-color: var(--skin-primary);
  --bs-btn-disabled-color: var(--skin-primary); --bs-btn-disabled-border-color: var(--skin-primary);
  --bs-btn-focus-shadow-rgb: var(--skin-primary-rgb);
}
html[data-skin] .btn-outline-secondary {
  --bs-btn-color: var(--skin-muted); --bs-btn-border-color: color-mix(in srgb, var(--skin-muted) 65%, transparent);
  --bs-btn-hover-color: var(--skin-surface); --bs-btn-hover-bg: var(--skin-muted); --bs-btn-hover-border-color: var(--skin-muted);
  --bs-btn-active-color: var(--skin-surface); --bs-btn-active-bg: var(--skin-muted); --bs-btn-active-border-color: var(--skin-muted);
  --bs-btn-disabled-color: var(--skin-muted); --bs-btn-disabled-border-color: var(--skin-muted);
}
/* 주의 버튼 (Merge into another company… 등): 밝은 화면에서는 진한 주황빛 글자 (2026-10-26 화면 점검: Bootstrap의 노랑은 흰
   바탕에서 대비 1.6이라 거의 안 보였음). 어두운 화면은 Bootstrap의 노랑 그대로 (어두운 바탕에서 잘 보임) */
html[data-skin="fresh"] .btn-outline-warning {
  --bs-btn-color: #b45309; --bs-btn-border-color: #f59e0b;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #b45309; --bs-btn-active-border-color: #b45309;
  --bs-btn-disabled-color: #b45309; --bs-btn-disabled-border-color: #f59e0b;
}
html[data-skin] .btn-secondary {
  --bs-btn-bg: var(--skin-muted); --bs-btn-border-color: var(--skin-muted); --bs-btn-hover-bg: color-mix(in srgb, var(--skin-muted) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--skin-muted) 82%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--skin-muted) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--skin-muted) 82%, #000); --bs-btn-disabled-bg: var(--skin-muted); --bs-btn-disabled-border-color: var(--skin-muted);
}
html[data-skin] .btn-link { --bs-btn-color: var(--skin-primary); --bs-btn-hover-color: var(--skin-primary-hover); --bs-btn-active-color: var(--skin-primary-hover); }

/* 입력칸·스위치·메뉴·목록의 눌린 항목 */
html[data-skin] .form-control:focus, html[data-skin] .form-select:focus {
  border-color: color-mix(in srgb, var(--skin-primary) 55%, var(--skin-border)); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--skin-primary) 25%, transparent);
}
html[data-skin] .form-check-input:checked { background-color: var(--skin-primary); border-color: var(--skin-primary); }
html[data-skin] .form-check-input:focus { border-color: color-mix(in srgb, var(--skin-primary) 55%, var(--skin-border)); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--skin-primary) 25%, transparent); }
html[data-skin] .dropdown-menu { --bs-dropdown-link-active-bg: var(--skin-primary); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-hover-bg: var(--skin-soft); --bs-dropdown-border-color: var(--skin-border); }
html[data-skin] .list-group { --bs-list-group-active-bg: var(--skin-primary); --bs-list-group-active-border-color: var(--skin-primary); --bs-list-group-action-hover-bg: var(--skin-soft); }
html[data-skin] .nav-tabs { --bs-nav-tabs-link-active-bg: var(--skin-surface); --bs-nav-tabs-link-active-border-color: var(--skin-border) var(--skin-border) var(--skin-surface); --bs-nav-tabs-link-hover-border-color: var(--skin-border); --bs-nav-tabs-border-color: var(--skin-border); }
html[data-skin] .nav-pills { --bs-nav-pills-link-active-bg: var(--skin-primary); }
html[data-skin] .pagination { --bs-pagination-active-bg: var(--skin-primary); --bs-pagination-active-border-color: var(--skin-primary); --bs-pagination-color: var(--skin-primary); --bs-pagination-hover-color: var(--skin-primary-hover); }
html[data-skin] .progress { --bs-progress-bar-bg: var(--skin-primary); }
/* 폰의 ☰ 메뉴 단추: 낮게 (2026-10-10, 주인의 요청: 너무 컸음). 눌렀을 때 테두리 강조도 얇게 */
.navbar-toggler { --bs-navbar-toggler-padding-y: .1rem; --bs-navbar-toggler-padding-x: .45rem; --bs-navbar-toggler-font-size: 1rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .12rem color-mix(in srgb, currentColor 35%, transparent); }
/* 위쪽 줄(앱 헤더)의 높이 42px + 금색 밑줄 3px — 모든 기기 (2026-10-17 주인의 요청: 휴대폰 52px, PC·태블릿 56px이었음). 위아래 여백 8px → 4px,
   그 안의 것은 34px: 모텔 이름 단추 위아래 5px → 2px (휴대폰은 글자가 작아서 4px), PC의 메뉴(Today, Calendar …) 위아래
   8px → 5px. 로고를 쓰는 모텔은 로고를 30px까지 (휴대폰 26px). ☰를 펼친 메뉴의 줄 높이는 그대로 (손가락으로 누르기 좋게) */
/* 모텔 이름 글자 20px(휴대폰 17.6px) → 16px, 조금 굵게 (2026-10-21 주인의 요청: 너무 컸음). 줄 높이는 30px 그대로라
   단추 높이도 34px 그대로 (위쪽 줄 42px, 로고 30px도 그대로 들어감; 휴대폰도 같은 여백 2px) */
#app-header { --bs-navbar-padding-y: .25rem; --bs-navbar-brand-padding-y: .125rem; --bs-navbar-brand-font-size: 1rem; }
#app-header .navbar-brand { font-weight: 600; line-height: 1.875rem; }
/* 메뉴 이름 글자 16px → 14px (2026-10-17 주인의 요청; 계정 단추(btn-sm)와 같은 크기): 위쪽 메뉴(☰를 펼친 메뉴도)와 계정·모텔
   고르는 메뉴 */
#app-header .navbar-nav .nav-link { font-size: .875rem; }
#app-header .dropdown-menu { --bs-dropdown-font-size: .875rem; }
/* 메뉴 아이콘 (2026-10-17 주인의 결정, templates/_menu_icons.html): 글자 앞에 글자와 같은 색의 선 아이콘. 위쪽 메뉴·☰ 메뉴·
   계정 단추와 계정 메뉴. ☰ 메뉴와 계정 메뉴는 아이콘과 글자 사이를 조금 더 (세로 목록이라) */
.menu-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
             stroke-linecap: round; stroke-linejoin: round; }
#app-header .navbar-nav .nav-link { display: flex; align-items: center; gap: .375rem; }
#app-header .dropdown-item { display: flex; align-items: center; gap: .625rem; }
#account-menu { display: inline-flex; align-items: center; gap: .375rem; }
@media (max-width: 991.98px) { #app-header .navbar-nav .nav-link { gap: .625rem; } }
#app-header .header-logo { max-height: 30px; }
@media (min-width: 992px) { #app-header .navbar-nav { --bs-nav-link-padding-y: .3125rem; } }
@media (max-width: 575.98px) { #app-header .header-logo { max-height: 26px; } }
/* 행사 (Property → Events, PropertyEvent, 2026-10-12): 달력 날짜 밑에 공휴일처럼 이름, 파란 글자 (공휴일과 겹치면 공휴일 색) */
.calendar th.event:not(.holiday) { color: var(--bs-primary); }
.calendar .event-name { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .65rem; font-weight: 500; }
/* Market 칸을 누르면 그 밤의 시세 곡선 (bookings/market_history.py, calendar.js) */
.calendar tr.market-prices th[data-night] { cursor: pointer; }
.calendar tr.market-prices th[data-night]:hover { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
/* 시세 곡선 (SVG, _market_history.html): 가로 = 며칠 전, 세로 = 가격. 선은 동네 평균·중앙값(점선)·우리 가격 */
.market-chart { width: 100%; height: auto; display: block; }
.market-chart .chart-grid { stroke: var(--bs-border-color); stroke-width: 1; }
.market-chart .chart-axis { fill: var(--bs-secondary-color); font-size: 11px; }
.market-chart path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.market-chart path.median { stroke-dasharray: 4 3; stroke-width: 1.5; }
.market-chart circle { stroke: var(--bs-body-bg); stroke-width: 1; }
.market-chart circle:hover { r: 5; }
.market-chart .sold-out { font-size: 12px; font-weight: 700; }
/* 보통 곡선 (1.293, market_history.build_curves): 시세 곡선 창의 연한 회색 점선 */
.market-chart path.typical { stroke-dasharray: 2 4; stroke-width: 1.5; }
/* 달력 Market 칸의 수요 경보 "!" (1.293, market_history.forecast): 주황 = 보통보다 훨씬 높게 끝날 듯, 파랑 = 빨리 차는 중 */
.calendar .market-alert { font-weight: 800; margin-left: .2em; }
.calendar .market-alert-high { color: var(--pms-market-orange); }
.calendar .market-alert-fast { color: var(--pms-market-blue); }

/* 하위 화면의 머리 줄 (2026-10-23, 주인: "핸드폰에서 버튼 정렬이 엉망"): 휴대폰에서 ← 돌아가기 + 제목이 한 줄,
   나머지 버튼은 다음 줄부터 같은 너비로 3개씩 (남는 줄은 넓게). 기간 줄(period-nav): ← 날짜 Show → 를 한 줄에 */
@media (max-width: 575.98px) {
  .page-head { gap: .4rem !important; }
  .page-head > h1 { flex: 1 1 55%; min-width: 0; }
  .page-head > .pay-steps { order: 1; flex: 1 1 100%; }
  .page-head > .btn:not(:first-child) { order: 2; }
  /* 3칸 격자처럼: 버튼이 1~2개뿐인 줄도 한 칸 너비 (가득 늘어나지 않게, 2026-10-24) */
  main .page-head > .btn:not(:first-child) { flex: 0 1 calc(33.333% - .27rem); align-self: stretch; display: flex; align-items: center;
                                        justify-content: center; gap: .3rem; /* 글자와 숫자 배지 사이 (flex라 띄어쓰기가 없어짐) */
                                        --bs-btn-padding-x: .25rem; --bs-btn-padding-y: .45rem;
                                        font-size: .8rem; line-height: 1.2; }
  .period-nav { flex-wrap: nowrap !important; gap: .3rem !important; }
  form > .period-nav { flex: 1 1 100%; min-width: 0; }
  .period-nav > span { display: none; }
  .period-nav .form-control { flex: 1 1 0; min-width: 0; width: auto !important; padding-left: .4rem; padding-right: .4rem; }
  .period-nav .btn { flex: 0 0 auto; padding-left: .6rem; padding-right: .6rem; }
  /* 카드로 바뀐 표: 첫 칸의 ps-3 때문에 첫 줄 이름만 안쪽으로 밀리지 않게 */
  table.table-stack td, table.table-stack th[scope="row"] { padding-left: .25rem !important; padding-right: .25rem !important; }
}

/* 화면 제목 앞 묶음 아이콘 (2026-10-24, Property 화면의 묶음 목록과 같은 모양, bookings/_group_icon.html) */
.page-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; margin-right: .45rem;
             border-radius: .45em; background: var(--icon-bg); font-size: .85em; vertical-align: middle; flex-shrink: 0; }
.page-icon.sm { width: 1.6em; height: 1.6em; margin-right: .4rem; font-size: .8em; }  /* Today의 목록 제목 */

/* 청소 목록 카드를 작게 (2026-10-25, 주인의 요청 "카드가 너무 큼"): 할 일 목록은 뺐고 (인쇄한 작업표 아래에만), 카드 안 여백·
   방 번호 상자·줄 사이를 줄임. 휴대폰: 버튼 높이를 줄이고, 며칠마다 하는 일 체크(Shower box)는 Done 옆 같은 줄에 */
.hk-room { padding-top: .55rem; padding-bottom: .55rem; }
.hk-room .hk-service, .hk-room .hk-actions { margin-top: .4rem !important; }
.hk-room .hk-number { min-width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
@media (max-width: 575.98px) {
  .hk-room { padding: .5rem .6rem; }
  .hk-room .hk-number { min-width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .hk-room .hk-room-title .fw-semibold { font-size: .95rem; line-height: 1.25; }
  .hk-actions { gap: .3rem !important; }
  .hk-actions .btn { min-height: 2.3rem; }
  .hk-actions > .hk-main.hk-wide { flex-wrap: nowrap !important; }
  .hk-actions > .hk-main.hk-wide .btn { flex: 1 1 auto; width: auto !important; }
  .hk-actions > .hk-main.hk-wide .hk-shower-check { width: auto; flex: none; padding-top: 0; white-space: nowrap; }
  .hk-room .hk-service-choice .btn { padding: .2rem .6rem; }
}

/* 더 작게 (같은 날, 주인의 요청 "추천하는대로"): 청소 종류 줄(Service 1 · Shower box due)은 머리 줄 안 — PC는 제목 오른쪽 같은
   줄, 휴대폰은 제목 아래 (번호 상자 옆). 휴대폰의 아래 버튼은 낮게 (Done만 조금 높게) */
.hk-head .hk-service { flex: none; margin-top: 0 !important; }
@media (max-width: 575.98px) {
  .hk-head { flex-wrap: wrap; row-gap: .3rem !important; }
  .hk-head .hk-room-title { flex: 1 1 0; order: 1; }
  .hk-head .hk-room-side { order: 2; }
  .hk-head .hk-service { order: 3; flex: 1 1 100%; padding-left: 2.7rem; }
  main .hk-room .hk-actions .btn { min-height: 2.05rem; padding-top: .15rem; padding-bottom: .15rem; }
  main .hk-room .hk-actions > .hk-main.hk-wide .btn { min-height: 2.35rem; }
  main .hk-room .hk-actions > .hk-main:has(+ .hk-report-button:last-child) .btn,
  main .hk-room .hk-actions > .hk-main .btn, main .hk-room .hk-actions > .hk-more > .btn { min-height: 2.05rem; }
}

/* 문서 보기 (2026-10-31, 1.596, document_viewer.html): 모든 기기에서 문서를 NURISTAY 안에. 버튼 네 개(Back, Print, Download,
   Email)를 한 줄에 (주인의 요청) — 폭이 모자라면 넷 다 조금씩 줄고 글자는 …으로. 위쪽 메뉴 줄 밑에 붙어 따라옴.
   쪽은 화면 폭에 맞춘 흰 종이 (PDF.js가 그린 canvas 또는 그림 파일), 넓은 PC 화면에서는 900px까지 (가운데) */
#document-viewer { max-width: 900px; margin: 0 auto; }
.viewer-actions { position: sticky; top: var(--pms-header-height, 0px); z-index: 5; display: flex; gap: .4rem;
                  margin: 0 -.25rem .5rem; padding: .4rem .25rem; background: var(--skin-bg, var(--bs-body-bg)); }
.viewer-actions .btn { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                       padding-left: .45rem; padding-right: .45rem; font-size: .8125rem; }
.viewer-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.viewer-actions .menu-icon { margin: 0; }
/* 412px보다 좁은 휴대폰 (360px 등): 글자·여백을 조금 줄여서 네 버튼이 그대로 한 줄에 */
@media (max-width: 389.98px) {
  .viewer-actions { gap: .3rem; }
  .viewer-actions .btn { padding-left: .3rem; padding-right: .3rem; font-size: .75rem; gap: .2rem; }
}
.viewer-pages .viewer-page { display: block; width: 100%; height: auto; margin-bottom: .75rem; background: #fff;
                             border-radius: .35rem; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }

/* 큰 양식의 Save 줄 (1.648, 주인의 결정: 큰 양식 모두 — UX 리뷰 R-2d): "Back without saving"(data-leave-ok)이 든 form-actions 줄이
   화면 아래에 붙어 있음 (51칸 Edit 등에서 Save까지 내리지 않게). 카드 안이면 카드 색, 휴대폰은 아래 메뉴 바 위에 두 버튼을 나란히 */
.form-actions:has(> a[data-leave-ok]) {
  position: sticky; bottom: 0; z-index: 1020; padding: .6rem 0 .5rem;
  background: var(--bs-card-bg, var(--bs-body-bg)); border-top: 1px solid var(--bs-border-color); }
@media (max-width: 991.98px) {
  html[data-skin^="fresh"]:not(.in-panel) .form-actions:has(> a[data-leave-ok]) { bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 575.98px) {
  .form-actions:has(> a[data-leave-ok]) { flex-direction: row; align-items: center !important; }
  .form-actions:has(> a[data-leave-ok]) > .btn { flex: 1 1 0; width: auto; min-width: 0; white-space: normal; }
}
/* 달력: 견적 기한이 지난 Hold (1.648, 주인의 결정) — 요금 자리에 노란 표시 (calendar_cells) */
.calendar .quote-expired-tag { background: #fde68a; color: #713f12; border-radius: 3px; padding: 0 3px; font-size: .68rem;
  font-weight: 600; white-space: nowrap; }