/* 쉼오지 캠프 예약 — 디자인 기준: hompynara.kr preview/pension-booking.html 의 토큰·카드 구성.
   accent 는 로고 초록(#006830 계열), accent-warm 은 로고 갈색(#683800 계열)에 맞췄다. */
:root{
  --bg:#eef1ec;
  --paper:#f6f4ee;
  --surface:#ffffff;
  --ink:#20261f;
  --ink-soft:#616a5c;
  --ink-faint:#9aa093;
  --accent:#17663a;
  --accent-dark:#0f4a29;
  --accent-warm:#8a5a22;
  --accent-tint:#e5efe7;
  --border:#e2ddce;
  --border-soft:#eae6d9;
  --danger:#8a3b2e;
  --cal-open:#e3f1e7;        /* 달력 예약 가능 칸 */
  --cal-open-line:#bcdcc6;
  --cal-full:#e6e4df;        /* 달력 마감 칸 */
  --cal-full-ink:#aaa69d;
  --cal-range:#b9d9c3;       /* 체크인~체크아웃 사이 */
  --shadow:0 18px 40px -22px rgba(32,38,31,.28);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:'Noto Sans KR',sans-serif; font-size:14px; line-height:1.6; -webkit-text-size-adjust:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:700; }
button,input,select,textarea{ font-family:inherit; }
.wrap{ max-width:1120px; margin:24px auto; background:var(--surface); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; overflow:clip; }

/* ── 머리 ── */
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--border-soft); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:46px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-size:18px; font-weight:700; line-height:1.3; }
.brand-sub{ font-size:12px; color:var(--ink-faint); }
.nav-links{ display:flex; gap:24px; font-size:14px; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.nav-links .current{ color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); padding-bottom:4px; }
.site-footer{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; padding:18px; font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--border-soft); background:var(--paper); }
.site-footer a{ color:var(--ink-soft); }

/* ── 단계 표시 ── */
.steps{ display:flex; gap:6px; padding:14px 28px; border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; }
.steps span{ display:inline-flex; align-items:center; gap:6px; }
.steps span + span::before{ content:"›"; margin-right:6px; color:var(--border); }
.steps b{ display:inline-flex; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; background:var(--border-soft); color:var(--ink-soft); font-size:11px; }
.steps .on{ color:var(--ink); font-weight:600; }
.steps .on b{ background:var(--accent); color:#fff; }

/* ── 날짜 선택(첫 페이지) ── */
.date-step{ display:grid; grid-template-columns:1fr 300px; }
.date-main{ padding:26px 28px; }
.date-main h1{ font-size:22px; margin-bottom:6px; }
.date-main .lead{ color:var(--ink-soft); font-size:13.5px; margin:0 0 18px; }
.cal-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cal-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cal-nav button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:16px; color:var(--ink-soft); }
.cal-nav button:disabled{ opacity:.35; cursor:default; }
.cal-nav .hint{ font-size:12.5px; color:var(--ink-soft); }
.cal-month h3{ font-size:15px; text-align:center; margin-bottom:8px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-grid .dow{ text-align:center; font-size:11.5px; color:var(--ink-faint); padding:4px 0; }
.cal-grid .dow.sun{ color:#b3554a; } .cal-grid .dow.sat{ color:#3e6a8c; }
.cal-day{ position:relative; border:1px solid var(--cal-open-line); background:var(--cal-open); border-radius:9px; min-height:54px; padding:5px 4px 4px; text-align:center; cursor:pointer; font-size:14px; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:1px; }
.cal-day .num{ font-weight:600; }
.cal-day .free{ font-size:10.5px; color:var(--accent); font-weight:700; }
.cal-day.sun .num{ color:#b3554a; } .cal-day.sat .num{ color:#3e6a8c; }
.cal-day.blank{ background:transparent; border-color:transparent; cursor:default; }
.cal-day.off{ background:transparent; border-color:transparent; color:var(--ink-faint); cursor:default; }
.cal-day.off .num{ color:var(--ink-faint); font-weight:400; }
.cal-day.full{ background:var(--cal-full); border-color:transparent; }
.cal-day.full .num{ color:var(--cal-full-ink); font-weight:400; }
.cal-day.full .free{ color:var(--danger); font-weight:600; }
.cal-day:not(.off):not(.blank):hover{ border-color:var(--accent); }
.cal-day.in-range{ background:var(--cal-range); border-color:var(--cal-range); border-radius:0; }
.cal-day.sel{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cal-day.sel .num, .cal-day.sel .free{ color:#fff !important; }
.cal-day.today .num{ text-decoration:underline; text-underline-offset:3px; }
.cal-legend{ display:flex; gap:14px; font-size:12px; color:var(--ink-faint); margin-top:12px; flex-wrap:wrap; }
.cal-legend .lg::before{ content:""; display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; }
.cal-legend .lg-open::before{ background:var(--cal-open); border:1px solid var(--cal-open-line); }
.cal-legend .lg-full::before{ background:var(--cal-full); }
.cal-loading{ font-size:12.5px; color:var(--ink-faint); }

.date-side{ background:var(--paper); border-left:1px solid var(--border-soft); padding:26px 22px; display:flex; flex-direction:column; gap:20px; }
.side-block h3{ font-size:14px; margin-bottom:10px; }
.date-pill{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:13.5px; color:var(--accent-dark); font-weight:600; }
.date-pill small{ color:var(--ink-faint); font-weight:400; }
.date-pill a{ font-size:12px; color:var(--ink-soft); font-weight:400; text-decoration:underline; }
.people{ background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.people-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border-soft); }
.people-row:last-child{ border-bottom:none; }
.people-row .lb{ font-size:13.5px; }
.people-row .lb small{ display:block; font-size:11.5px; color:var(--ink-faint); }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface); font-size:16px; cursor:pointer; color:var(--ink-soft); line-height:1; }
.stepper button:disabled{ opacity:.35; cursor:default; }
.stepper input{ width:28px; border:none; text-align:center; font-size:15px; font-weight:600; background:transparent; color:var(--ink); padding:0; }
.side-list{ white-space:pre-line; font-size:13px; color:var(--ink-soft); line-height:1.9; }
.notice-box{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px; white-space:pre-line; }
.info-line{ font-size:13px; color:var(--ink-soft); }

.btn, .cta-btn{ display:inline-block; text-align:center; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:14px 18px; font-size:15px; font-weight:700; cursor:pointer; }
.cta-btn{ width:100%; }
.btn:disabled, .cta-btn:disabled{ background:#b9c2b8; cursor:default; }
.btn-line{ display:inline-block; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); border-radius:10px; padding:10px 14px; font-size:13px; cursor:pointer; }
.form-error{ background:#fbeeea; color:var(--danger); border:1px solid #efcfc6; border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:16px; }

/* ── 사이트 목록 ── */
.list-body{ display:grid; grid-template-columns:290px 1fr; }
.sidebar{ padding:24px 22px; border-right:1px solid var(--border-soft); background:var(--paper); display:flex; flex-direction:column; gap:22px; }
.room-list{ padding:22px 28px; display:flex; flex-direction:column; gap:16px; }
.list-status{ font-size:13px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.list-status b{ color:var(--ink); }
/* 구역 색 — zc1~zc4 를 구역 순서대로 돌려 쓴다(camp_zone_colors) */
.zc1{ --zc:#2c6e9b; --zc-tint:#e6f0f7; }
.zc2{ --zc:#17663a; --zc-tint:#e5efe7; }
.zc3{ --zc:#8a5a22; --zc-tint:#f4ece0; }
.zc4{ --zc:#5b4f8a; --zc-tint:#ece9f5; }
.zone-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding:12px 16px; background:var(--zc-tint, var(--paper)); border-left:5px solid var(--zc, var(--accent)); border-radius:10px; }
.zone-head h2{ font-size:19px; color:var(--zc, var(--ink)); }
.zone-head span{ font-size:12.5px; color:var(--ink-soft); }
.room-card{ display:grid; grid-template-columns:200px 1fr auto; gap:20px; align-items:center; padding:14px; border:1px solid var(--border-soft); border-left:4px solid var(--zc, var(--border-soft)); border-radius:14px; transition:border-color .15s, box-shadow .15s; }
a.room-card:hover{ border-color:var(--zc, var(--accent)); box-shadow:0 0 0 1px var(--zc, var(--accent)); }
.thumb{ height:124px; border-radius:10px; position:relative; overflow:hidden; background:#e7e5df; }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.thumb span{ position:absolute; bottom:8px; right:8px; background:rgba(32,38,31,.72); color:#fff; font-size:11px; padding:4px 9px; border-radius:999px; }
.thumb.t1{ background:linear-gradient(135deg,#233a2f,#3d5c4c 55%,#8fae94); }
.thumb.t2{ background:linear-gradient(135deg,#2c2a24,#5a4a34 55%,#c9a06b); }
.thumb.t3{ background:linear-gradient(135deg,#22303a,#3c5c66 55%,#9bc0c2); }
.thumb.t4{ background:linear-gradient(135deg,#33261f,#6b4a35 55%,#d0b48a); }
.thumb.t5{ background:linear-gradient(135deg,#1f2a20,#48604a 55%,#a9c39f); }
.thumb .ph-no{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:30px; font-weight:700; }
.room-name{ font-size:17px; font-weight:700; margin-bottom:6px; }
.tag-row{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tag{ font-size:11.5px; color:var(--accent-dark); background:var(--accent-tint); border-radius:6px; padding:3px 8px; }
.tag.zone-tag{ color:#fff; background:var(--zc, var(--accent)); font-weight:600; }
.room-meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; }
.room-desc{ font-size:12.5px; color:var(--ink-faint); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price-block{ text-align:right; min-width:140px; }
.price{ font-size:20px; font-weight:700; color:var(--accent-dark); }
.price small{ font-size:12px; color:var(--ink-faint); font-weight:400; }
.price-sub{ font-size:12px; color:var(--ink-faint); }
.empty-box{ padding:30px; text-align:center; color:var(--ink-soft); background:var(--paper); border-radius:14px; }

/* ── 상세 ── */
.detail-wrap{ padding:26px 28px; }
.back-link{ font-size:13.5px; color:var(--ink-soft); display:inline-flex; gap:6px; margin-bottom:12px; }
.gallery-main{ aspect-ratio:1 / 1; height:auto; border-radius:14px; position:relative; overflow:hidden; background:#e7e5df; }
.gallery-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-main .arrow{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.88); border:none; font-size:16px; cursor:pointer; z-index:2; }
.gallery-main .arrow.left{ left:14px; } .gallery-main .arrow.right{ right:14px; }
.gallery-main .count{ position:absolute; right:14px; bottom:12px; z-index:2; background:rgba(32,38,31,.72); color:#fff; font-size:11.5px; padding:4px 10px; border-radius:999px; }
.thumb-strip{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.thumb-strip button{ width:64px; height:64px; border-radius:8px; border:0; padding:0; overflow:hidden; opacity:.65; cursor:pointer; background:#e7e5df; }
.thumb-strip button.active{ opacity:1; outline:2px solid var(--accent); outline-offset:2px; }
.thumb-strip img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.detail-specs{ margin-top:32px; }
.detail-heading{ font-size:23px; margin-bottom:4px; }
.detail-sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:20px; }
.spec-row{ display:flex; border-top:1px solid var(--border-soft); padding:13px 0; font-size:13.5px; }
.spec-row:last-child{ border-bottom:1px solid var(--border-soft); }
.spec-label{ width:110px; color:var(--ink-faint); flex-shrink:0; }
.spec-value{ color:var(--ink); line-height:1.7; white-space:pre-line; }
.side-summary{ background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:20px; height:fit-content; }
.night-table{ width:100%; border-collapse:collapse; font-size:13px; margin:12px 0 4px; }
.night-table td{ padding:6px 0; border-bottom:1px dashed var(--border); }
.night-table td:last-child{ text-align:right; }
.night-table .t-peak{ color:var(--accent-warm); font-weight:600; }
.night-table .t-weekend{ color:#3e6a8c; }

/* ── 예약 정보 입력 ── */
.pay-wrap{ padding:26px 28px; }
.pay-title{ font-size:21px; margin-bottom:22px; }
.pay-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; }
.pay-section{ margin-bottom:28px; }
.pay-section h3{ font-size:15px; margin-bottom:12px; }
.notice-text{ font-size:13px; color:var(--ink-soft); line-height:1.8; background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:14px 16px; white-space:pre-line; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; margin-bottom:6px; font-weight:600; }
.field label .req{ color:var(--accent-warm); }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--border); border-radius:9px; padding:11px 13px; font-size:14px; color:var(--ink); background:var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }
.field textarea{ resize:vertical; min-height:72px; }
.field .help{ font-size:12px; color:var(--ink-faint); margin-top:4px; }
/* 예약 정보(book.php) — 위 사이트 띠 · 번호 붙은 카드 · 오른쪽 금액 칸은 따라 내려온다 */
.book-form{ background:var(--paper); }
.book-head{ display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:24px; }
.book-photo{ height:112px; }
.book-site{ font-size:20px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.book-facts{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:6px 28px; margin:0; }
.book-facts dt{ font-size:12px; color:var(--ink-faint); margin-bottom:2px; }
.book-facts dd{ margin:0; font-size:14px; font-weight:700; color:var(--accent-dark); }
.pay-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow:0 6px 18px -14px rgba(32,38,31,.35); }
.pay-card h3{ display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-soft); }
.pay-card h4{ font-size:13.5px; margin:16px 0 8px; color:var(--ink-soft); }
.pay-card h3 + h4{ margin-top:0; }
.sec-no{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font:700 12.5px/24px 'Noto Sans KR',sans-serif; text-align:center; flex:none; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.field-grid .wide{ grid-column:1 / -1; }
.pay-card > .help{ font-size:12px; color:var(--ink-faint); }
.method-one{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--accent); box-shadow:0 0 0 1px var(--accent); border-radius:10px; padding:14px 16px; background:var(--accent-tint); }
.method-one b{ color:var(--accent-dark); font-size:14.5px; }
.method-one span{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
.scroll-box{ max-height:260px; overflow:auto; border-radius:10px; }
.pay-side{ position:sticky; top:20px; }
.sum-title{ font-size:17px; font-weight:700; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid var(--border-soft); }
.refund-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--border); }
.refund-table th, .refund-table td{ padding:9px 12px; border-bottom:1px solid var(--border-soft); text-align:left; }
.refund-table th{ background:var(--paper); color:var(--ink-soft); font-weight:600; }
.refund-table tr.now td{ background:#eef4ef; color:var(--accent-dark); font-weight:700; }
.agree{ border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.agree label{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; font-size:13px; line-height:1.6; cursor:pointer; border-bottom:1px solid var(--border-soft); }
.agree label:last-child{ border-bottom:none; }
.agree input{ margin-top:3px; accent-color:var(--accent); }
.agree .req-tag{ color:var(--accent-warm); font-weight:600; }
.privacy-box{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-top:10px; }
.privacy-box table{ width:100%; border-collapse:collapse; margin-top:6px; }
.privacy-box th, .privacy-box td{ text-align:left; padding:5px 0; vertical-align:top; border-top:1px solid var(--border-soft); }
.privacy-box th{ width:78px; color:var(--ink-faint); font-weight:500; }
.summary-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:16px; }
.lookup-pick .badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--accent-tint); color:var(--accent-dark); margin-right:4px; }
.lookup-pick .badge.pending{ background:#fbf1e4; color:var(--accent-warm); }
.lookup-pick .badge.canceled, .lookup-pick .badge.expired{ background:#f3e6e3; color:var(--danger); }
.lookup-pick .btn-line{ margin-top:10px; }
.stay-dates{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--border-soft); margin-bottom:14px; }
.stay-dates > div{ text-align:center; }
.stay-dates .d-label{ font-size:11.5px; color:var(--ink-faint); margin-bottom:4px; }
.stay-dates .d-val{ font-size:14px; font-weight:700; color:var(--accent-dark); }
.stay-dates .nights{ font-size:11.5px; background:var(--paper); border-radius:999px; padding:4px 10px; color:var(--ink-soft); }
.sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; color:var(--ink-soft); }
.sum-row.total{ border-top:1px solid var(--border-soft); margin-top:6px; padding-top:12px; font-weight:700; color:var(--ink); font-size:15px; }
.pay-total-box{ background:var(--accent-dark); color:#fff; border-radius:14px; padding:20px; }
.pay-total-box .row{ display:flex; justify-content:space-between; font-size:13.5px; color:#d8e3dc; margin-bottom:6px; }
.pay-total-box .grand{ font-size:21px; font-weight:700; margin-bottom:14px; }
.pay-btn{ width:100%; background:#61a880; color:#fff; border:none; border-radius:10px; padding:16px; font-size:15.5px; font-weight:700; cursor:pointer; }
.pay-btn:disabled{ opacity:.6; cursor:default; }
.pay-warn{ display:none; font-size:12.5px; color:#f3c9a8; margin-top:10px; }
.pay-warn.show{ display:block; }

/* ── 완료·조회 ── */
.done-wrap{ padding:34px 28px; max-width:640px; margin:0 auto; }
.done-head{ text-align:center; margin-bottom:24px; }
.done-head .badge{ display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; background:var(--accent-tint); color:var(--accent-dark); margin-bottom:10px; }
.done-head .badge.pending{ background:#fbf1e4; color:var(--accent-warm); }
.done-head .badge.canceled, .done-head .badge.expired{ background:#f3e6e3; color:var(--danger); }
.done-head h1{ font-size:22px; margin-bottom:6px; }
.done-head p{ color:var(--ink-soft); margin:0; }
.bank-box{ background:var(--accent-dark); color:#fff; border-radius:14px; padding:20px 22px; margin-bottom:16px; }
.bank-box .lb{ font-size:12.5px; color:#cfe0d4; }
.bank-box .acct{ font-size:19px; font-weight:700; margin:4px 0 10px; word-break:break-all; }
.bank-box .row{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; color:#e3ece6; }
.bank-box .row b{ color:#fff; }
.copy-btn{ border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; margin-left:6px; vertical-align:middle; }
.msg-wrap{ padding:60px 20px; }
.msg-box{ max-width:480px; margin:0 auto; text-align:center; }
.msg-box p{ font-size:15px; margin:0 0 20px; }
.lookup-form{ max-width:420px; margin:0 auto; }

@media (max-width:860px){
  .cal-wrap{ grid-template-columns:1fr; }
  .cal-month + .cal-month{ display:none; }
}
@media (max-width:760px){
  .wrap{ margin:0; border-radius:0; box-shadow:none; }
  .site-header{ padding:12px 16px; }
  .brand-logo{ height:38px; }
  .brand-text{ display:none; }
  .nav-links{ gap:16px; font-size:13.5px; }
  .steps{ padding:12px 16px; }
  .date-step, .list-body{ grid-template-columns:1fr; }
  .date-main{ padding:20px 16px; }
  .date-side{ border-left:none; border-top:1px solid var(--border-soft); padding:20px 16px; }
  .sidebar{ border-right:none; border-bottom:1px solid var(--border-soft); padding:18px 16px; }
  .room-list{ padding:16px; }
  .room-card{ grid-template-columns:1fr; gap:12px; }
  .price-block{ text-align:left; }
  .detail-wrap, .pay-wrap, .done-wrap{ padding:18px 16px; }
  .detail-grid, .pay-grid{ grid-template-columns:1fr; gap:24px; }
  .book-head{ grid-template-columns:96px 1fr; gap:14px; padding:12px; }
  .book-photo{ height:96px; }
  .book-site{ font-size:17px; }
  .book-facts{ grid-template-columns:1fr; gap:6px; }
  .pay-card{ padding:16px; }
  .field-grid{ grid-template-columns:1fr; }
  .pay-side{ position:static; }
  .cal-day{ min-height:48px; font-size:13.5px; }
}