/* NURISTAY 화면 디자인 (2026-10-25, 1.512, 주인의 결정: 디자인 시안 C "산뜻한 앱"의 밝은·어두운 한 쌍 — 그 전의 Light·Dark
   (네이비 위쪽 줄)·Cream·Wine 모양은 뺌). base.html이 화면 메뉴의 Light → <html data-skin="fresh">, Dark → <html data-bs-theme="dark"
   data-skin="fresh-dark">로 정함. Auto(처음)는 기기 설정을 따라감. 색 변수(--skin-*)는 pms.css의 html[data-skin] 틀이 Bootstrap에 넘겨서
   버튼·입력칸·메뉴가 저절로 맞음. 여기서는 그 위에 모양: 그라데이션 위쪽 줄, 둥근 카드·그림자, 알약 모양 버튼, Today의 머리 부분·
   숫자 타일·새 예약 단추, 예약 화면의 손님 카드·빠른 버튼, 달력의 둥근 예약 칸, 휴대폰·태블릿의 아래 메뉴 바.
   .fresh-only = 화면에서만 보임, .classic-only = 화면에서 숨음. 인쇄할 때는 data-skin이 빠져서(base.html의 beforeprint) 반대: 예전의
   밝은 기본 모양 (제목·"rooms tonight" 등, 숫자 타일·손님 카드·아래 메뉴 바 없이).
   예약 색의 뜻(노랑 완납, 초록 결제 대기, 분홍 일부 결제, 빨강 Hold, 하늘 보증금)과 체크인·체크아웃 테두리는 그대로.
   시안 그림: test-results/2026-10-25-design (git 밖) */

html:not([data-skin^="fresh"]) .fresh-only { display: none !important; }
html[data-skin^="fresh"] .classic-only { display: none !important; }
.qa-icon { display: none; }

/* --- 색 --- */
html[data-skin="fresh"] {
  --skin-head: #06b6d4; --skin-headtext: #ffffff; --skin-bg: #f1f5fb; --skin-surface: #ffffff; --skin-surface2: #eef3fa;
  --skin-border: #dbe4f0; --skin-text: #14213d; --skin-muted: #64748b; --skin-primary: #2563eb; --skin-primary-hover: #1d4ed8;
  --skin-primarytext: #ffffff; --skin-soft: #e3edff;
  --skin-surface-rgb: 255, 255, 255; --skin-surface2-rgb: 238, 243, 250; --skin-text-rgb: 20, 33, 61; --skin-primary-rgb: 37, 99, 235;
  --skin-muted-rgb: 100, 116, 139;
  --fresh-head: linear-gradient(110deg, #06b6d4, #3b82f6);
  --fresh-hero: linear-gradient(120deg, #06b6d4, #3b82f6);
  --fresh-shadow: 0 6px 22px rgba(30, 64, 175, .08);
  --fresh-card-border: 0;
  --fresh-occupancy: #6366f1; --fresh-arrive: #10b981; --fresh-depart: #f97316; --fresh-stay: #0ea5e9; --fresh-danger: #f43f5e;
  --fresh-tile-bg: #ffffff; --fresh-tile-shadow: 0 8px 22px rgba(15, 23, 42, .12);
  --fresh-tab-bg: rgba(255, 255, 255, .96); --fresh-tab-line: #e2e8f2; --fresh-tab-text: #8a97ab; --fresh-tab-on: #2563eb;
  --fresh-tab-on-bg: #e3edff;
  --fresh-cal-line: #e9eef6; --fresh-cal-cell: #fbfcfe; --fresh-cal-head: #ffffff; --fresh-today: #dbeafe; --fresh-today-text: #1d4ed8;
  --fresh-booking-shadow: 0 2px 6px rgba(15, 23, 42, .10); --fresh-due-in: #059669; --fresh-due-out: #f97316;
}
html[data-skin="fresh-dark"] {
  --skin-head: #0e7490; --skin-headtext: #ffffff; --skin-bg: #0b1222; --skin-surface: #141d33; --skin-surface2: #1b2640;
  --skin-border: #263252; --skin-text: #e8eef9; --skin-muted: #93a1b8; --skin-primary: #3b82f6; --skin-primary-hover: #2563eb;
  --skin-primarytext: #ffffff; --skin-soft: #1e2d4d;
  --skin-surface-rgb: 20, 29, 51; --skin-surface2-rgb: 27, 38, 64; --skin-text-rgb: 232, 238, 249; --skin-primary-rgb: 59, 130, 246;
  --skin-muted-rgb: 147, 161, 184;
  --fresh-head: linear-gradient(110deg, #0e7490, #1d4ed8);
  --fresh-hero: linear-gradient(120deg, #0e7490, #1d4ed8);
  --fresh-shadow: 0 8px 26px rgba(0, 0, 0, .40);
  --fresh-card-border: 1px solid #1f2a44;
  --fresh-occupancy: #818cf8; --fresh-arrive: #34d399; --fresh-depart: #fb923c; --fresh-stay: #38bdf8; --fresh-danger: #fb7185;
  --fresh-tile-bg: #141d33; --fresh-tile-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  --fresh-tab-bg: rgba(17, 25, 45, .96); --fresh-tab-line: #1f2a44; --fresh-tab-text: #7d8aa3; --fresh-tab-on: #93c5fd;
  --fresh-tab-on-bg: rgba(96, 165, 250, .18);
  --fresh-cal-line: #1c2740; --fresh-cal-cell: #0d1527; --fresh-cal-head: #111a2e; --fresh-today: rgba(96, 165, 250, .18);
  --fresh-today-text: #93c5fd;
  --fresh-booking-shadow: 0 2px 8px rgba(0, 0, 0, .45); --fresh-due-in: #86efac; --fresh-due-out: #fdba74;
}
html[data-skin="fresh"] { --pms-navy: #1e3a8a; }
html[data-skin="fresh-dark"] { --pms-navy: #2c5596; }
html[data-skin^="fresh"] {
  --bs-body-font-family: "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-radius: .75rem; --bs-border-radius-sm: .6rem; --bs-border-radius-lg: 1rem;
  --fresh-radius: 20px;
}
/* 위쪽의 은은한 파란 빛은 맨 위에 한 번만 (2026-10-26 화면 점검: no-repeat가 바탕색 쪽에 붙어 있어서 빛이 화면 높이마다
   되풀이되어 중간에 띠와 선이 생겼음) */
html[data-skin="fresh-dark"] body {
  background: radial-gradient(900px 420px at 50% -120px, rgba(29, 78, 216, .25), transparent 70%) no-repeat, var(--skin-bg);
}
html[data-skin="fresh-dark"] .text-muted { color: var(--skin-muted) !important; }
/* 작은 표시(text-bg-light: 영수증 번호·사진 수·Keep this room …)는 어두운 화면에서 흰 알약이 아니라 카드에 맞는 색 (2026-11-03
   코드 리뷰: Bootstrap의 흰 바탕 + 검은 글자가 그대로였음) */
html[data-skin="fresh-dark"] .text-bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; }
/* 어두운 화면의 링크 글자는 단추의 파랑보다 밝게 (어두운 바탕에서 잘 읽히게) */
html[data-skin="fresh-dark"] { --bs-link-color: #7cb3fb; --bs-link-color-rgb: 124, 179, 251; --bs-link-hover-color: #a5cbfc;
                               --bs-link-hover-color-rgb: 165, 203, 252; }

/* 예약 색 (뜻은 그대로): 조금 더 선명한 파스텔 + 진한 글자 (pms.css). 어두운 화면도 똑같이 (2026-10-26, 주인의 결정 "헷갈리지
   않게" — 그 전 어두운 화면은 진한 색 + 흰 글자: Paid #ca8a04 (그날 잠깐 주황 #ea580c), Pending #16a34a, Partial #db2777,
   Hold #dc2626, 보증금 #0284c7).
   Hold: 1.593 (2026-10-30, 주인의 결정 A안 "Hold만 더 진한 빨강") #fda4af → #f87171 — Partially paid 분홍(#f9a8d4)과 밝기가
   같고 색만 조금 달라 달력에서 거의 같아 보였음 (색 차이 ΔE2000 10 → 22, 다른 짝들은 25 이상). 진한 글자와의 대비 5.6:1 */
html[data-skin^="fresh"] .booking-paid { --status-colour: #fde68a; }
html[data-skin^="fresh"] .booking-pending { --status-colour: #86efac; }
html[data-skin^="fresh"] .booking-partial { --status-colour: #f9a8d4; }
html[data-skin^="fresh"] .booking-hold { --status-colour: #f87171; }
html[data-skin^="fresh"] .booking-block { --status-colour: #cbd5e1; }  /* 방 막기 (1.659): 회색 점선 (pms.css) */
html[data-skin^="fresh"] .booking-security-deposit { --status-colour: #7dd3fc; }

/* --- 위쪽 줄: 그라데이션, 금색 밑줄 대신 그림자, 고른 메뉴는 알약 모양 --- */
html[data-skin^="fresh"] .navbar.bg-dark { background-image: var(--fresh-head) !important; border-bottom: 0;
                                           box-shadow: 0 4px 18px rgba(37, 99, 235, .22); }
html[data-skin="fresh-dark"] .navbar.bg-dark { box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
html[data-skin^="fresh"] #app-header .property-brand:not(:has(.header-logo))::before {
  content: ""; display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: .4rem; vertical-align: -.2rem; border-radius: 50%;
  background: #ffffff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), inset 0 0 0 6px #22d3ee; }
html[data-skin="fresh-dark"] #app-header .property-brand:not(:has(.header-logo))::before {
  background: #0b1222; box-shadow: inset 0 0 0 3px rgba(103, 232, 249, .35), inset 0 0 0 6px #22d3ee; }
/* 이름 앞 동그라미만큼 넓어져서, 달력처럼 위쪽 줄이 꽉 찬 화면에서 이름 칸이 줄면 이름도 함께 줄어 …로 (옆 표시와 겹치지 않게) */
html[data-skin^="fresh"] .property-switch .property-brand { max-width: min(22rem, 100%); }
@media (min-width: 992px) {
  /* 넓은 화면은 위쪽 줄에 메뉴가 다 있어서 이름 앞 동그라미는 빼고 (달력의 날짜 단추가 위쪽 줄에 들어가게, calendar.js placeNav) */
  html[data-skin^="fresh"] #app-header .property-brand:not(:has(.header-logo))::before { display: none; }
  html[data-skin^="fresh"] #app-header .navbar-nav .nav-link { border-radius: 999px; }  /* 여백은 예전 그대로 (달력의 단추가 위쪽 줄에 들어가게) */
  html[data-skin^="fresh"] #app-header .navbar-nav .nav-link.active { background: rgba(255, 255, 255, .22); }
}
html[data-skin^="fresh"] #app-header .form-control { background-color: rgba(255, 255, 255, .95); }
html[data-skin="fresh-dark"] #app-header .form-control { background-color: rgba(11, 18, 34, .45); color: #ffffff; }

/* --- 카드·목록·버튼 --- */
html[data-skin^="fresh"] .card { --bs-card-border-width: 0; --bs-card-border-radius: var(--fresh-radius);
  --bs-card-inner-border-radius: var(--fresh-radius); --bs-card-cap-bg: transparent; border: var(--fresh-card-border);
  box-shadow: var(--fresh-shadow); }
html[data-skin^="fresh"] .card-header { font-weight: 600; padding-top: .75rem; padding-bottom: .75rem; }
html[data-skin^="fresh"] .modal-content { border-radius: var(--fresh-radius); border: var(--fresh-card-border); }
html[data-skin^="fresh"] .btn:not(.btn-close):not(.btn-link) { --bs-btn-border-radius: 999px; }
html[data-skin^="fresh"] .badge { border-radius: 999px; }
html[data-skin^="fresh"] dl.dl-tight dt { font-weight: 500; color: var(--bs-secondary-color); }

/* --- Today: 머리 부분 (today.html), 숫자 타일 (_today_live.html), 접는 목록, 새 예약 단추 --- */
html[data-skin^="fresh"] .today-hero { background: var(--fresh-hero); color: #ffffff; border-radius: 0 0 28px 28px;
  margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: .9rem 1rem 3.4rem; }
html[data-skin^="fresh"] main > .today-hero:first-of-type { margin-top: -1rem; }
@media (min-width: 768px) {
  html[data-skin^="fresh"] .today-hero { border-radius: 28px; margin: 0; padding: 1.3rem 1.5rem 3.6rem; }
  html[data-skin^="fresh"] main > .today-hero:first-of-type { margin-top: 0; }
}
html[data-skin^="fresh"] .today-hello { font-size: .9rem; font-weight: 600; opacity: .88; }
html[data-skin^="fresh"] .today-hello-name { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin-bottom: .7rem; }
html[data-skin^="fresh"] .today-hero [data-panel-swap="day"] { background: rgba(255, 255, 255, .16); border-radius: 18px; padding: .45rem;
                                                              margin-bottom: 0 !important; }
html[data-skin^="fresh"] .today-hero h1 { color: #ffffff; font-size: 1.05rem; font-weight: 700; }
html[data-skin^="fresh"] .today-hero .text-muted { color: rgba(255, 255, 255, .86) !important; }
html[data-skin^="fresh"] .today-hero .btn { --bs-btn-color: #ffffff; --bs-btn-bg: rgba(255, 255, 255, .22); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(255, 255, 255, .34); --bs-btn-hover-border-color: transparent;
  width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
html[data-skin^="fresh"] .today-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
  position: relative; z-index: 1; margin: -2.7rem .25rem 1.1rem; }
@media (max-width: 575.98px) { html[data-skin^="fresh"] .today-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-left: 0; margin-right: 0; } }
.today-tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: .8rem .95rem; border-radius: var(--fresh-radius);
  background: var(--fresh-tile-bg); border: var(--fresh-card-border); box-shadow: var(--fresh-tile-shadow); color: var(--bs-body-color);
  text-decoration: none; }
a.today-tile:hover { color: var(--bs-body-color); transform: translateY(-1px); }
.today-tile .tile-icon { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--tile-colour); color: #ffffff; margin-bottom: .45rem; }
.today-tile .tile-icon .menu-icon { width: 1.1rem; height: 1.1rem; margin: 0; }
.today-tile .tile-number { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.today-tile .tile-number small { font-size: .95rem; font-weight: 500; color: var(--bs-secondary-color); }
.today-tile .tile-label { font-size: .8rem; color: var(--bs-secondary-color); }
.today-tile .tile-bar { align-self: stretch; height: 5px; border-radius: 3px; background: var(--bs-tertiary-bg); margin-top: .5rem; overflow: hidden; }
.today-tile .tile-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--tile-colour); }
.tile-occupancy { --tile-colour: var(--fresh-occupancy); }
.tile-arrivals { --tile-colour: var(--fresh-arrive); }
.tile-departures { --tile-colour: var(--fresh-depart); }
.tile-staying { --tile-colour: var(--fresh-stay); }
/* 접는 목록: 둥근 카드, 왼쪽 삼각형 대신 오른쪽 꺾쇠 */
html[data-skin^="fresh"] details.today-fold { border: var(--fresh-card-border) !important; border-radius: var(--fresh-radius) !important;
  box-shadow: var(--fresh-shadow); overflow: hidden; margin-bottom: .8rem !important; }
html[data-skin^="fresh"] details.today-fold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .8rem 1rem !important; }
html[data-skin^="fresh"] details.today-fold > summary::-webkit-details-marker { display: none; }
html[data-skin^="fresh"] details.today-fold > summary::marker { content: ""; }
/* 제목 줄: 제목(h2)이 남는 폭을 차지하고 꺾쇠는 오른쪽 끝. Booking emails 카드처럼 h2 없이 아이콘·글자·배지가 바로 오는 줄은 그대로
   (2026-10-25: 첫 칸을 늘렸더니 그 카드의 아이콘이 납작한 타원이 됐음) */
html[data-skin^="fresh"] details.today-fold > summary > h2 { flex: 1; min-width: 0; }
html[data-skin^="fresh"] details.today-fold > summary h2 { font-size: 1rem; font-weight: 700; }
html[data-skin^="fresh"] details.today-fold > summary::after { content: ""; width: .5rem; height: .5rem; flex-shrink: 0; margin: 0 .25rem 0 auto;
  border-right: 2px solid var(--bs-secondary-color); border-bottom: 2px solid var(--bs-secondary-color); transform: rotate(-45deg); }
html[data-skin^="fresh"] details.today-fold[open] > summary::after { transform: rotate(45deg); }
html[data-skin^="fresh"] details.today-fold .page-icon.sm { width: 2rem; height: 2rem; border-radius: 50%; margin-right: .45rem; }
html[data-skin^="fresh"] details.today-fold summary .badge.text-bg-secondary { background: var(--bs-tertiary-bg) !important;
  color: var(--bs-secondary-color) !important; }
html[data-skin^="fresh"] .list-group-item { padding-top: .8rem; padding-bottom: .8rem; }
html[data-skin^="fresh"] .room-badge { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* 새 예약 단추: 오른쪽 아래에 떠 있음 (휴대폰은 동그라미 ＋, 넓은 화면은 글자도) */
.fresh-fab { position: fixed; right: 1rem; bottom: 1.4rem; z-index: 1031; display: flex; align-items: center; justify-content: center;
  gap: .4rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: #ffffff; text-decoration: none; font-weight: 700;
  background: linear-gradient(135deg, #06b6d4, #3b82f6); box-shadow: 0 10px 24px rgba(37, 99, 235, .45); }
.fresh-fab:hover { color: #ffffff; filter: brightness(1.06); }
.fresh-fab .menu-icon { width: 1.6rem; height: 1.6rem; margin: 0; stroke-width: 2.5; }
.fresh-fab span { display: none; }
@media (min-width: 768px) {
  .fresh-fab { width: auto; height: 3.2rem; padding: 0 1.4rem 0 1.1rem; border-radius: 999px; right: 1.6rem; bottom: 1.6rem; }
  .fresh-fab span { display: inline; }
}
html.in-panel .fresh-fab { display: none !important; }
/* 끝까지 내리면 맨 아래 줄(Today의 Staying ›)이 떠 있는 단추 위로 올라오게 단추 높이만큼 빈자리 (2026-10-26 화면 점검: 단추가 그 줄을
   덮었음). main의 py-3이 !important라 여기도 */
html[data-skin^="fresh"]:not(.in-panel) main:has(.fresh-fab) { padding-bottom: 5.5rem !important; }

/* --- 예약 화면: 손님 카드, 빠른 버튼 (booking_detail.html), 온라인 체크인 링크 --- */
.guest-card { display: flex; gap: 1rem; align-items: flex-start; margin: .35rem 0 .9rem; padding: 1.1rem 1.2rem; border-radius: var(--fresh-radius);
  background: var(--fresh-hero); color: #ffffff; box-shadow: 0 10px 26px rgba(37, 99, 235, .28); }
html[data-skin="fresh-dark"] .guest-card { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.guest-card .guest-main { min-width: 0; flex: 1; }
.guest-card .guest-number { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.guest-card .guest-name { font-size: 1.45rem; font-weight: 800; line-height: 1.15; margin: .1rem 0 0; overflow-wrap: anywhere; }
.guest-card .guest-room { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; opacity: .92; margin-top: .25rem; }
.guest-card .guest-room .menu-icon { width: 1rem; height: 1rem; margin: 0; }
.guest-card .guest-status { font-size: .75rem; font-weight: 700; padding: .12rem .6rem; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
html[data-skin="fresh"] .guest-card .guest-status { color: #212529; }
.guest-card .guest-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1.1rem; margin-top: .8rem; padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .28); }
.guest-card .guest-dates span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.guest-card .guest-dates b { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.guest-card .guest-arrow { opacity: .8; }
.guest-card .guest-arrow .menu-icon { width: 1rem; height: 1rem; margin: 0; }
@media (max-width: 575.98px) {
  .guest-card { padding: 1rem; gap: .85rem; }
  .guest-card .guest-name { font-size: 1.3rem; }
}
/* 빠른 버튼: Documents·Email 줄과 Edit·Book again·Cancel을 한 카드의 아이콘 칸으로. 줄(#document-actions, #email-actions)은
   display: contents로 풀어서 그 안의 버튼이 카드의 칸이 됨. "Documents:"·"Email:" 글자는 숨김 */
html[data-skin^="fresh"] .quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .35rem;
  margin-bottom: .9rem; padding: .85rem 1rem 1rem; border-radius: var(--fresh-radius); background: var(--bs-body-bg);
  border: var(--fresh-card-border); box-shadow: var(--fresh-shadow); }
@media (max-width: 575.98px) { html[data-skin^="fresh"] .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; } }
html[data-skin^="fresh"] .quick-actions > .booking-actions { display: contents !important; }
html[data-skin^="fresh"] .quick-actions > .booking-actions > span { display: none; }
html[data-skin^="fresh"] .quick-actions .quick-title { grid-column: 1 / -1; margin: 0 0 .4rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--bs-secondary-color); }
html[data-skin^="fresh"] .quick-actions form { display: contents; }
html[data-skin^="fresh"] .quick-actions .btn { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: auto;
  padding: .45rem .15rem; border: 0; background: transparent; color: var(--bs-body-color); font-size: .74rem; font-weight: 500;
  line-height: 1.15; white-space: normal; text-align: center; box-shadow: none; }
html[data-skin^="fresh"] .quick-actions .btn:is(:hover, :focus-visible, :active) { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
html[data-skin^="fresh"] .quick-actions:not(:has(.btn)) { display: none; }
/* 위쪽 줄: 제목과 Edit·Book again·Cancel booking은 손님 카드·빠른 버튼으로 (booking_detail.html). Back은 왼쪽, 결제 상태·체크인은 오른쪽.
   !important: 체크인한 손님의 Cancel booking 폼(#cancel-stayed)은 Bootstrap의 d-inline(!important)이라 그냥은 숨지 않아 두 번
   보였음 (2026-10-26 화면 점검) */
html[data-skin^="fresh"] #booking-top > :is(h1, a.btn-outline-primary, a.btn-outline-danger, #cancel-stayed) { display: none !important; }
html[data-skin^="fresh"] #booking-top > #back-button { margin-right: auto; }
html[data-skin^="fresh"] .qa-icon { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; color: #ffffff; background: var(--qa-colour, var(--fresh-stay));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--qa-colour, var(--fresh-stay)) 35%, transparent); }
html[data-skin^="fresh"] .qa-icon .menu-icon { width: 1.2rem; height: 1.2rem; margin: 0; }
/* 서명 표시 (1.601, 2026-10-31, 주인의 결정): 체크인 양식·보증금 양식 아이콘의 오른쪽 위 — 초록 ✓ = 서명함, 주황 점 = 체크인했는데
   체크인 양식 서명이 없음 (예약 화면의 "✓ … signed" 줄 대신). 테두리는 카드 바탕색이라 아이콘에서 떨어져 보임 */
html[data-skin^="fresh"] .qa-icon { position: relative; }
.qa-badge { position: absolute; top: -.2rem; right: -.3rem; display: flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--bs-body-bg); color: #ffffff; font-size: .66rem;
  font-weight: 800; line-height: 1; }
.qa-badge-done { background: #16a34a; }
.qa-badge-todo { top: -.1rem; right: -.15rem; width: .85rem; height: .85rem; background: #f97316; }
/* 다음 할 일 하나 (1.670, 주인의 선택 — UX 리뷰 R-13c, bookings/next_step.py): 파란 아이콘에 파란 테두리, 이름은 굵은 파랑 */
html[data-skin^="fresh"] .quick-actions .btn.qa-next { --qa-colour: #2563eb; color: #2563eb; font-weight: 700; }
html[data-skin^="fresh"][data-bs-theme="dark"] .quick-actions .btn.qa-next { color: #60a5fa; }
html[data-skin^="fresh"] .qa-next .qa-icon { box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px #2563eb; }
.qa-edit { --qa-colour: #2563eb; }
.qa-document { --qa-colour: var(--fresh-stay); }
.qa-email { --qa-colour: var(--fresh-occupancy); }
.qa-danger { --qa-colour: var(--fresh-danger); }
html[data-skin^="fresh"] #check-in-documents { padding: .8rem 1rem; border-radius: var(--fresh-radius); background: var(--bs-body-bg);
  border: var(--fresh-card-border); box-shadow: var(--fresh-shadow); margin-bottom: .9rem !important; }
html[data-skin^="fresh"] #check-in-documents > span.small:first-child { width: 100%; font-size: .72rem !important; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }

/* --- 달력: 옅은 선, 둥근 예약 칸과 그림자 (체크인·체크아웃할 손님의 테두리는 그대로) --- */
html[data-skin^="fresh"] .calendar th, html[data-skin^="fresh"] .calendar td { border-color: var(--fresh-cal-line); }
html[data-skin^="fresh"] .calendar thead th { background: var(--fresh-cal-head); }
html[data-skin^="fresh"] .calendar .room { background: var(--fresh-cal-head); }
html[data-skin^="fresh"] .calendar td.day { background-color: var(--fresh-cal-cell); }
html[data-skin^="fresh"] .calendar td.day.weekend, html[data-skin^="fresh"] .calendar td.weekend { background-color: var(--pms-weekend); }
html[data-skin^="fresh"] .calendar th.today { background: var(--fresh-today); color: var(--fresh-today-text); }
html[data-skin^="fresh"] .calendar td.day > .booking { border-radius: 10px; box-shadow: var(--fresh-booking-shadow); }
html[data-skin^="fresh"] .calendar td.day > .booking.due-in { box-shadow: inset 0 0 0 2px var(--fresh-due-in), var(--fresh-booking-shadow); }
html[data-skin^="fresh"] .calendar td.day > .booking.due-out { box-shadow: inset 0 0 0 2px var(--fresh-due-out), var(--fresh-booking-shadow); }
html[data-skin^="fresh"] .calendar .booking-label { font-weight: 700; }  /* 글자·체크 칸은 두 화면 모두 밝은 화면처럼 (위 예약 색) */
html[data-skin^="fresh"] .calendar .checkin-toggle { border-radius: 50%; }

/* --- 아래 메뉴 바 (base.html): 위쪽 메뉴가 ☰ 안에 접히는 폭에서만, 이때 ☰ 단추 대신 More --- */
.tab-bar { display: none; }
@media (max-width: 991.98px) {
  html[data-skin^="fresh"]:not(.in-panel) .tab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around;
    padding: .4rem .25rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--fresh-tab-bg);
    border-top: 1px solid var(--fresh-tab-line); box-shadow: 0 -4px 16px rgba(15, 23, 42, .06); backdrop-filter: blur(12px); }
  html[data-skin^="fresh"]:not(.in-panel) body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  html[data-skin^="fresh"]:not(.in-panel) #app-header .navbar-toggler { display: none; }
  html[data-skin^="fresh"]:not(.in-panel) .fresh-fab { bottom: calc(5.1rem + env(safe-area-inset-bottom)); }
  html[data-skin^="fresh"]:not(.in-panel) .busy-note { bottom: calc(5.1rem + env(safe-area-inset-bottom)); }
  /* 알림 창 (check_in_alerts.js)도 메뉴 바 위로 (2026-11-03 코드 리뷰: 알림이 있는 동안 Calendar·Bookings·More를 누를 수
     없었음). 아래쪽 자리는 그대로 (주인의 결정 2026-10-24). Bootstrap의 bottom-0이 !important라서 */
  html[data-skin^="fresh"]:not(.in-panel) #check-in-alerts {
    bottom: calc(4.3rem + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--pms-header-height, 0px) - 4.3rem - env(safe-area-inset-bottom)); }
}
.tab-bar > a, .tab-bar > button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .2rem 0; border: 0; background: none; color: var(--fresh-tab-text); font-size: .68rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; }
.tab-bar .menu-icon { width: 1.45rem; height: 1.45rem; margin: 0; box-sizing: content-box; padding: .15rem 1rem; border-radius: 999px; }
.tab-bar > .active { color: var(--fresh-tab-on); }
.tab-bar > .active .menu-icon { background: var(--fresh-tab-on-bg); }
@media print { .tab-bar, .fresh-fab { display: none !important; } }