/*
 * 曇時全系統統一視覺層 — 預約
 * 與官網共用 E-Ink Paper × Editorial Grid 視覺語言。
 */
:root{
  --ink:#2f2521;
  --ink-deep:#201822;
  --card:#fbf7f0;
  --parchment:#43342d;
  --parchment-dim:#706159;
  --gold:#a67d49;
  --gold-dim:#8d683d;
  --rose:#84505e;
  --rose-dim:#a86b78;
  --sage:#66745f;
  --sage-dim:#83927c;
  --mist:#725968;
  --line:rgba(58,43,35,.18);
  --ui-bg:#f0e8dc;
  --ui-bg-alt:#e5d8c9;
  --ui-surface:#fbf7f0;
  --ui-surface-strong:#fffdf8;
  --ui-text:#43342d;
  --ui-muted:#706159;
  --ui-faint:#95877e;
  --ui-shadow:0 24px 65px rgba(66,47,37,.14);
  --ui-soft-shadow:0 12px 32px rgba(66,47,37,.09);
}
html{background:var(--ui-bg);color-scheme:light;scroll-behavior:smooth}
body{
  color:var(--ui-text);
  background:
    linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(circle at 12% 4%,rgba(255,255,255,.75),transparent 34rem),
    radial-gradient(circle at 90% 90%,rgba(170,104,120,.11),transparent 31rem),
    var(--ui-bg);
  font-weight:400;
  letter-spacing:.012em;
}
body::before{
  content:"RESERVATION JOURNAL  ·  CAFE L'ÉPHÉMÈRE";
  position:fixed;
  right:clamp(18px,4vw,60px);
  bottom:14px;
  color:rgba(67,52,45,.25);
  font-size:9px;
  font-weight:600;
  letter-spacing:.28em;
  pointer-events:none;
}
.wrap{
  width:min(100% - 40px,1180px);
  max-width:1180px;
  min-height:calc(100vh - 56px);
  margin:28px auto;
  padding:clamp(28px,5vw,62px);
  overflow:hidden;
  color:var(--ui-text);
  background:rgba(251,247,240,.95);
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:var(--ui-shadow);
  isolation:isolate;
}
.wrap::before{content:"";position:absolute;inset:12px;z-index:-1;border:1px solid rgba(166,125,73,.18);pointer-events:none}
.wrap::after{content:"";position:absolute;top:-130px;right:-120px;z-index:-1;width:360px;height:360px;border:1px solid rgba(170,104,120,.16);border-radius:50%;pointer-events:none}
.petal{display:none}
.header{
  align-items:center;
  min-height:82px;
  margin-bottom:42px;
  padding:0 0 20px 72px;
  border-bottom:1px solid var(--line);
}
.header::before{content:"";position:absolute;left:0;top:0;width:56px;height:56px;background:url('logo.webp') center/cover no-repeat;border:1px solid rgba(166,125,73,.34);box-shadow:0 8px 22px rgba(66,47,37,.12)}
.header::after{content:"VOL. 02  /  RESERVATION DESK";position:absolute;left:72px;bottom:-18px;padding-right:9px;color:var(--gold);background:var(--ui-surface);font-size:8px;letter-spacing:.24em}
.brand h1{color:var(--ink);font-size:clamp(21px,3vw,28px);font-weight:600;letter-spacing:.09em}
.brand p{margin-top:5px;color:var(--ui-muted);font-size:11px;letter-spacing:.24em}
.clock{color:var(--ui-muted);font-size:11px;letter-spacing:.06em}
.dot{width:7px;height:7px;box-shadow:0 0 0 4px rgba(113,128,109,.1)}
.dot.online{background:var(--sage)}
.dot.offline{background:var(--rose)}
.booking-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.7fr);gap:30px;align-items:end;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid rgba(58,43,35,.1)}
.booking-intro::before{content:"02  /  PRIVATE EVENING";grid-column:1/-1;color:var(--rose);font-size:9px;font-weight:600;letter-spacing:.26em}
.booking-intro h2{margin:0;color:var(--ink);font-size:clamp(28px,4.4vw,48px);font-weight:500;line-height:1.3;letter-spacing:.06em}
.booking-intro p{margin:0;color:var(--ui-muted);font-size:13px;line-height:2}
.booking-top-grid{grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:18px;margin-bottom:18px}
.booking-main .panel{margin-bottom:18px}
.panel{
  padding:clamp(20px,3.2vw,30px);
  color:var(--ui-text);
  background:rgba(255,253,248,.9);
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:var(--ui-soft-shadow);
}
.panel::after{content:"";position:absolute;top:7px;right:7px;width:14px;height:14px;border-top:1px solid rgba(166,125,73,.36);border-right:1px solid rgba(166,125,73,.36)}
.panel-title{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.12em}
.panel-title::before{content:"JOURNAL";color:var(--rose);font:600 8px/1 'Noto Sans TC',sans-serif;letter-spacing:.22em}
.staff-empty,.booking-intro p,.rules-gate-intro,.rules-p,.rules-li,.quick-reminder,.full-notice span{color:var(--ui-muted)}
#dateList{gap:9px}
.chip{
  min-height:46px;
  color:var(--ink);
  background:rgba(240,232,220,.5);
  border:1px solid var(--line);
  border-radius:0;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.chip:hover{transform:translateY(-1px);color:var(--rose);background:var(--ui-surface-strong);border-color:rgba(166,125,73,.55)}
.date-chip .date-status{color:var(--sage)}
.date-chip.is-full .date-status{color:var(--rose)}
.date-chip.is-pending .date-status{color:var(--mist)}
.staff-chip{color:var(--ink);background:var(--ui-bg-alt);border-color:var(--line);border-radius:0}
.staff-chip .role{color:var(--mist)}
.rules-gate{border-color:rgba(166,125,73,.42)}
.rules-scroll-box{max-height:360px;padding:20px;color:var(--ui-text);background:rgba(240,232,220,.42);border-color:var(--line);border-radius:0;scrollbar-color:var(--gold) var(--ui-bg-alt)}
.rules-title{color:var(--ink)}
.rules-h2{color:var(--gold);border-color:rgba(58,43,35,.14)}
.rules-h2-plain{color:var(--rose);border-color:rgba(132,80,94,.23)}
.rules-highlight{color:var(--ink);background:rgba(166,125,73,.08);border-color:var(--gold);border-radius:0}
.rules-dot{background:var(--rose)}
.rules-scroll-hint{color:var(--rose)}
.rules-scroll-hint.done{color:var(--sage)}
.rules-accept-row{padding:14px;color:var(--ink);background:rgba(229,216,201,.35);border-color:var(--line);border-radius:0}
.rules-accept-row input{accent-color:var(--rose)}
.quick-reminder{padding:15px 17px;background:rgba(166,125,73,.07);border-color:var(--gold);border-radius:0;line-height:1.85}
.full-notice{padding:20px;background:#f4e2df;border-color:rgba(132,80,94,.38);border-radius:0}
.full-notice strong{color:var(--rose)}
.success-panel{border-color:rgba(102,116,95,.4);background:linear-gradient(135deg,rgba(220,226,215,.72),rgba(255,253,248,.95))}
.success-panel h3{color:var(--sage);font-size:26px}
.success-panel>p{color:var(--ui-muted)}
.booking-summary{padding:18px;color:var(--ui-text);background:rgba(255,253,248,.64);border-color:rgba(58,43,35,.16);border-radius:0}
.booking-summary dt{color:var(--ui-muted)}
.booking-summary dd{color:var(--ink)}
.field-label{color:var(--ui-muted);font-size:12px;letter-spacing:.04em}
input[type=text],input[type=number],select,textarea{
  min-height:48px;
  color:var(--ui-text);
  background:rgba(255,253,248,.82);
  border:1px solid rgba(58,43,35,.25);
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
input::placeholder,textarea::placeholder{color:var(--ui-faint);opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(166,125,73,.22);outline-offset:2px;border-color:var(--gold)}
.selected-song{color:var(--ink);background:rgba(229,216,201,.38);border-color:rgba(166,125,73,.42);border-radius:0}
.icon-btn{color:var(--ui-muted);background:transparent;border-color:var(--line);border-radius:0}
.icon-btn:hover{color:#fff;background:var(--rose);border-color:var(--rose)}
.btn{
  min-height:46px;
  padding:10px 18px;
  color:var(--ink);
  background:transparent;
  border:1px solid rgba(58,43,35,.26);
  border-radius:0;
  letter-spacing:.05em;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px);color:var(--ink);background:var(--ui-bg-alt);border-color:var(--gold)}
.btn.primary{min-height:50px;color:#fff9f0;background:var(--ink-deep);border-color:var(--ink-deep);font-weight:500;letter-spacing:.1em}
.btn.primary:hover{color:#fff;background:var(--rose);border-color:var(--rose)}
.btn.ghost{color:var(--ui-muted);border-color:var(--line)}
.btn.ghost:hover{color:var(--ink);border-color:var(--gold)}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.btn:disabled,.chip:disabled{opacity:.5;transform:none}
.configwarn{color:var(--ui-text);background:#f2dedb;border-color:rgba(132,80,94,.42);border-radius:0}

@media(max-width:760px){
  body{background:var(--ui-bg)}
  body::before{display:none}
  .wrap{width:100%;min-height:100vh;margin:0;padding:24px 14px 40px;border:0;box-shadow:none}
  .wrap::before{inset:7px}
  .header{align-items:flex-start;min-height:72px;margin-bottom:30px;padding:2px 0 16px 58px}
  .header::before{width:44px;height:44px}
  .header::after{left:58px;bottom:-15px;font-size:7px}
  .brand h1{font-size:18px;letter-spacing:.045em}
  .brand p{font-size:10px;letter-spacing:.16em}
  .clock{font-size:10px;padding-top:2px}
  .booking-intro{display:block;margin-bottom:20px;padding:2px 3px 19px}
  .booking-intro::before{display:block;margin-bottom:13px}
  .booking-intro h2{font-size:30px}
  .booking-intro p{margin-top:12px;font-size:12px}
  .booking-top-grid{grid-template-columns:1fr;gap:13px}
  .panel{padding:19px 16px;margin-bottom:13px!important}
  .chip{width:100%;justify-content:center}
  .date-chip{align-items:center;text-align:center}
  .field,.field.compact{width:100%;min-width:0;flex:1 1 100%}
  #bookingForm input[type=text],#bookingForm input[type=number],#bookingForm select{min-height:50px!important}
  #bookingForm .row .btn{flex:1 1 135px}
  .booking-summary{grid-template-columns:1fr;gap:3px}
  .booking-summary dd{margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* C — 墨綠靜室：低亮度夜間主題 */
:root{
  --ink:#e3e3dc;--ink-deep:#111718;--card:#192122;
  --parchment:#e3e3dc;--parchment-dim:#9da6a1;
  --gold:#b09267;--gold-dim:#927b59;
  --rose:#bd7775;--rose-dim:#925b5a;
  --sage:#8fa083;--sage-dim:#687860;
  --mist:#a3aca6;--line:#33413f;
  --ui-bg:#111718;--ui-bg-alt:#222c2c;
  --ui-surface:#192122;--ui-surface-strong:#202a2a;
  --ui-text:#e3e3dc;--ui-muted:#9da6a1;--ui-faint:#78837e;
  --ui-shadow:0 24px 65px rgba(3,8,9,.4);
  --ui-soft-shadow:0 10px 30px rgba(3,8,9,.28);
}
html{background:#0d1213;color-scheme:dark}
body{color:var(--ui-text);background:radial-gradient(circle at 12% 0,rgba(143,160,131,.08),transparent 34rem),radial-gradient(circle at 90% 88%,rgba(176,146,103,.045),transparent 30rem),#0d1213}
body::before{color:rgba(157,166,161,.2)}
.wrap{color:var(--ui-text);background:rgba(17,23,24,.97);border-color:#2a3735;box-shadow:var(--ui-shadow)}
.wrap::before{border-color:rgba(143,160,131,.16)}
.wrap::after{border-color:rgba(143,160,131,.12)}
.header{border-color:var(--line)}
.header::before{border-color:rgba(143,160,131,.38);box-shadow:0 10px 26px rgba(0,0,0,.26);filter:saturate(.75) brightness(.78)}
.header::after{color:var(--sage);background:#111718}
.brand h1,.booking-intro h2{color:var(--ui-text)}
.brand p,.clock,.booking-intro p{color:var(--ui-muted)}
.booking-intro{border-color:#293634}
.booking-intro::before{color:var(--sage)}
.panel{color:var(--ui-text);background:rgba(25,33,34,.94);border-color:var(--line);box-shadow:var(--ui-soft-shadow)}
.panel::after{border-color:rgba(143,160,131,.28)}
.panel-title{color:var(--ui-text)}
.panel-title::before{color:var(--sage)}
.staff-empty,.rules-gate-intro,.rules-p,.rules-li,.quick-reminder,.full-notice span{color:var(--ui-muted)}
.chip{color:var(--ui-text);background:#171f20;border-color:var(--line)}
.chip:hover{color:var(--sage);background:#202a2a;border-color:var(--sage)}
.date-chip .date-status{color:var(--sage)}
.staff-chip{color:var(--ui-text);background:#202a2a;border-color:var(--line)}
.staff-chip .role{color:var(--gold)}
.rules-gate{border-color:rgba(176,146,103,.4)}
.rules-scroll-box{color:var(--ui-text);background:#111718;border-color:var(--line);scrollbar-color:var(--sage) #111718}
.rules-title{color:var(--ui-text)}
.rules-h2{color:var(--gold);border-color:#33413f}
.rules-h2-plain,.rules-scroll-hint{color:var(--rose)}
.rules-highlight{color:var(--ui-text);background:rgba(176,146,103,.08);border-color:var(--gold)}
.rules-dot{background:var(--sage)}
.rules-scroll-hint.done{color:var(--sage)}
.rules-accept-row{color:var(--ui-text);background:#171f20;border-color:var(--line)}
.quick-reminder{color:var(--ui-muted);background:rgba(176,146,103,.07);border-color:var(--gold)}
.full-notice{background:rgba(189,119,117,.09);border-color:rgba(189,119,117,.4)}
.success-panel{background:linear-gradient(135deg,rgba(143,160,131,.12),#192122);border-color:rgba(143,160,131,.42)}
.success-panel h3{color:var(--sage)}
.success-panel>p{color:var(--ui-muted)}
.booking-summary{color:var(--ui-text);background:#111718;border-color:var(--line)}
.booking-summary dt{color:var(--ui-muted)}
.booking-summary dd{color:var(--ui-text)}
.field-label{color:var(--ui-muted)}
input[type=text],input[type=number],select,textarea{color:var(--ui-text);background:#111718;border-color:#3a4947;box-shadow:none}
input::placeholder,textarea::placeholder{color:#74807b}
input:focus,select:focus,textarea:focus{outline-color:rgba(143,160,131,.25);border-color:var(--sage)}
.selected-song{color:var(--ui-text);background:#171f20;border-color:rgba(176,146,103,.38)}
.icon-btn{color:var(--ui-muted);border-color:var(--line)}
.icon-btn:hover{color:#111718;background:var(--sage);border-color:var(--sage)}
.btn{color:var(--ui-text);border-color:#3a4947}
.btn:hover{color:var(--ui-text);background:#222c2c;border-color:var(--sage)}
.btn.primary{color:#111718;background:var(--sage);border-color:var(--sage)}
.btn.primary:hover{color:#111718;background:#a2b197;border-color:#a2b197}
.btn.ghost{color:var(--ui-muted);border-color:var(--line)}
.btn.ghost:hover{color:var(--ui-text);background:#1c2525;border-color:#4b5a57}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible{outline-color:var(--sage)}
.configwarn{color:var(--ui-text);background:rgba(189,119,117,.1);border-color:rgba(189,119,117,.42)}
@media(max-width:760px){body{background:#111718}.wrap{background:#111718}}