.booking-page { padding: 0 24px 7rem; }
.booking-hero { position: relative; overflow: visible; max-width: 1540px; margin: 0 auto; padding: 7.3rem clamp(1.5rem, 5vw, 5rem) 2rem; background: #e8ddca; background-image: repeating-linear-gradient(0deg, rgba(89,67,46,.025) 0, rgba(89,67,46,.025) 1px, transparent 1px, transparent 5px); }
.booking-hero::after { display: none; }
.booking-tape { top: -17px; left: 9%; width: 150px; height: 38px; transform: rotate(-4deg); }
.booking-hero .section-kicker { position: relative; z-index: 1; color: #75614d; }
.booking-hero h1 { position: relative; z-index: 1; margin: 0 0 .65rem; font: 600 clamp(1.9rem, 3vw, 2.5rem)/1.3 var(--sans); }
.booking-hero h1 em, .booking-section h2 em, .booking-aside h2 em { color: #a47c57; font-style: normal; }
.booking-hero > p:not(.section-kicker) { position: relative; z-index: 1; max-width: 48rem; margin: 0; color: #615144; line-height: 1.7; font-size: .88rem; }
.booking-steps { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3.7rem); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(61,47,35,.23); font-size: .79rem; }
.booking-steps b { margin-right: .4rem; color: #7d5b3c; font: 600 .85rem var(--sans); }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: clamp(3rem, 6vw, 7rem); max-width: 1280px; margin: 0 auto; }
.booking-main { min-width: 0; }
.booking-section { padding: 2.4rem 0 0; }
.booking-section + .booking-section { margin-top: 2.3rem; border-top: 1px solid var(--line); }
.section-head { margin-bottom: 1.25rem; }
.section-head .section-kicker { color: #8d6f52; }
.section-head h2 { margin: 0; font: 600 clamp(1.3rem, 2vw, 1.6rem)/1.4 var(--sans); }
.section-note { max-width: 42rem; color: var(--ink-soft); line-height: 1.8; font-size: .86rem; }
.request-status { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 2px solid #9d7651; background: #ebe0ce; color: #674e39; line-height: 1.6; font-size: .82rem; }
.request-status[hidden] { display: none; }
.service-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-option { display: flex; align-items: center; min-height: 94px; padding: 1rem; border: 1px solid var(--line); background: #f4eee1; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 200ms, background 200ms; }
.service-option:hover { border-color: #74583f; }
.service-option.is-selected { border-color: #74583f; background: #dfceb2; }
.service-icon { color: #a07853; font: 2rem var(--serif); }
.service-option > span:first-child { margin: 0; }
.service-option strong, .service-option small { display: block; }
.service-option strong { font: 600 1.05rem var(--sans); }
.service-option small { margin-top: .35rem; color: #706153; line-height: 1.55; font-size: .76rem; }
.service-option > span:last-child { align-self: flex-end; margin-top: .5rem; }
.guest-field { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; color: #625344; font-size: .87rem; }
.guest-field select { min-width: 145px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 0; background: #f8f3e9; color: var(--ink); font: inherit; }
.calendar-card { padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--line); background: #f7f2e8; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.calendar-toolbar h3 { margin: 0; font: 500 1.65rem var(--serif); }
.calendar-toolbar button { width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.calendar-toolbar button:disabled { opacity: .32; cursor: default; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays span { padding: .6rem 0 1rem; text-align: center; color: #8c7b68; font-size: .72rem; }
.calendar-grid { gap: 5px; }
.calendar-day { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 76px; padding: .65rem; border: 1px solid transparent; background: #e8dcc9; color: var(--ink); text-align: left; cursor: pointer; transition: background 180ms, border-color 180ms; }
.calendar-day:hover:not(:disabled), .calendar-day.is-selected { border-color: #6c4b34; background: #d7b994; }
.calendar-day:disabled { cursor: default; }
.calendar-day.is-closed { background: #ede9e1; color: #a59b90; }
.calendar-day.is-full, .calendar-day.is-outside { background: #eee9df; color: #aaa096; }
.calendar-day strong { font: 500 1.1rem var(--serif); }
.calendar-day small { font-size: .58rem; line-height: 1.2; }
.calendar-day.is-empty { background: transparent; border: 0; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.5rem; color: #786b5e; font-size: .7rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.calendar-legend i { width: 11px; height: 11px; background: #e8dcc9; }
.calendar-legend .legend-closed { background: #ede9e1; }
.calendar-legend .legend-full { background: #d7b994; }
.time-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.time-panel[hidden], #contact-section[hidden], .booking-feedback[hidden] { display: none; }
.time-panel h3 { margin: .6rem 0 0; font: 500 1.55rem var(--serif); }
.time-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; max-width: 470px; }
.time-option { min-width: 77px; padding: .7rem .8rem; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.time-option:hover:not(:disabled), .time-option.is-selected { border-color: #765539; background: #dfceb2; }
.time-option:disabled { color: #aca297; text-decoration: line-through; cursor: default; }
.booking-form { display: grid; gap: 1.35rem; }
.booking-form label { display: grid; gap: .65rem; color: #524538; font-size: .85rem; }
.booking-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.booking-form input:not([type="checkbox"]), .booking-form textarea { width: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: 0; background: #f8f3e9; color: var(--ink); font: .91rem var(--sans); }
.booking-form input:focus, .booking-form textarea:focus, .guest-field select:focus { outline: 2px solid #a97751; outline-offset: 2px; }
.booking-form .agreement { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.7; }
.agreement input { margin-top: .24rem; accent-color: #674833; }
.submit-booking { display: flex; align-items: center; justify-content: space-between; width: min(100%, 340px); margin-top: .7rem; padding: 1.1rem 1.35rem; border: 0; background: var(--ink); color: #f5eee2; cursor: pointer; transition: background 180ms; }
.submit-booking:hover { background: #5b3d29; }
.submit-booking:disabled { opacity: .55; cursor: default; }
.booking-feedback { margin-top: 2rem; padding: 1.5rem; border: 1px solid #9c8365; background: #e4d5bd; line-height: 1.8; }
.booking-feedback.is-error { border-color: #ad6e5d; background: #f1dfd5; }
.booking-aside { position: relative; }
.aside-inner { position: sticky; top: 1rem; margin-top: 2.4rem; padding: 1.6rem; background: #e2d2b9; }
.aside-tape { top: -16px; left: 34%; width: 118px; height: 32px; transform: rotate(5deg); }
.booking-aside .section-kicker { color: #765d45; }
.booking-aside h2 { margin: 0 0 1rem; font: 600 1.1rem/1.4 var(--sans); }
.booking-aside dl { margin: 0; }
.booking-aside dl div { display: flex; justify-content: space-between; gap: .5rem; padding: .9rem 0; border-top: 1px solid rgba(61,47,35,.2); font-size: .8rem; }
.booking-aside dt { color: #70604e; }
.booking-aside dd { margin: 0; text-align: right; }
.aside-notice { margin-top: 2rem; color: #6c5c4c; font-size: .76rem; line-height: 1.8; }
.booking-aside a { display: inline-block; margin-top: .5rem; border-bottom: 1px solid currentColor; padding-bottom: .25rem; font-size: .78rem; }

@media (max-width: 1030px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 2rem; }
  .service-options { gap: .5rem; }
  .service-option { padding: 1rem; }
  .calendar-day { min-height: 65px; padding: .45rem; }
}
@media (max-width: 760px) {
  .booking-page { padding: 0 12px 5rem; }
  .booking-hero { padding: 6.4rem 1.5rem 1.5rem; }
  .booking-hero::after { opacity: .12; width: 70%; }
  .booking-hero h1 { font-size: 1.9rem; }
  .booking-hero > p:not(.section-kicker) { font-size: .82rem; }
  .booking-steps { gap: .65rem 1.2rem; font-size: .68rem; }
  .booking-layout { display: flex; flex-direction: column; gap: 0; padding: 0 12px; }
  .booking-aside { order: 0; }
  .aside-inner { position: relative; top: auto; margin-top: 2rem; padding: 1.5rem; }
  .booking-aside h2 { display: block; }
  .booking-aside dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .booking-aside dl div { gap: .3rem; }
  .aside-notice { margin: 1rem 0 0; }
  .booking-section { padding-top: 2rem; }
  .booking-section + .booking-section { margin-top: 2rem; }
  .service-options { grid-template-columns: 1fr; gap: .6rem; }
  .service-option { min-height: 72px; }
  .calendar-card { padding: .65rem; }
  .calendar-grid { gap: 2px; }
  .calendar-day { min-height: 62px; padding: .32rem; }
  .calendar-day strong { font-size: .95rem; }
  .calendar-day small { font-size: .6rem; }
  .time-panel { display: block; }
  .time-options { justify-content: flex-start; max-width: none; margin-top: 1.2rem; }
  .booking-form .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .service-option, .calendar-day { transition: none; } }
.booking-hero, .calendar-card, .aside-inner, .booking-feedback { border-radius: 14px; }
.service-option, .guest-field select, .calendar-toolbar button, .calendar-day, .time-option, .booking-form input:not([type="checkbox"]), .booking-form textarea, .submit-booking, .request-status, .site-nav .nav-contact { border-radius: 10px; }
/* Shared washi system: the objects are made of tape; the controls remain plain paper. */
.booking-page{padding:0 24px 7rem}.booking-hero{max-width:1280px;min-height:360px;padding:70px 0 55px;background:none;border-bottom:1px solid var(--line);overflow:hidden}.booking-hero h1{font:500 clamp(40px,4vw,58px)/1.3 var(--serif);letter-spacing:.05em}.booking-hero>p:not(.section-kicker){max-width:620px;font-size:16px;color:var(--ink-muted)}.booking-hero-art{position:absolute;width:min(38vw,410px);height:100%;object-fit:contain;right:1%;top:0;opacity:.75;pointer-events:none}.booking-steps{max-width:620px;margin-top:30px;padding-top:16px;border-color:var(--line);font-size:13px}.booking-steps b{color:var(--coffee)}.booking-layout{gap:clamp(30px,5vw,72px)}.booking-section{padding-top:50px}.booking-section+.booking-section{margin-top:38px}.section-head h2{font:500 clamp(24px,2.5vw,32px)/1.4 var(--serif)}.section-note,.guest-field,.booking-form label{color:var(--ink-muted);font-size:14px}.service-options{gap:12px}.service-option{min-height:104px;padding:18px;border:1px solid var(--line);background:transparent;border-radius:2px;position:relative}.service-option:hover{border-color:var(--coffee)}.service-option.is-selected{border:2px solid var(--coffee);background:var(--paper-raised);padding:17px}.service-option.is-selected::after{content:'已選擇 ✓';position:absolute;right:12px;top:10px;font-size:11px;color:var(--coffee)}.service-option strong{font:500 20px/1.4 var(--serif)}.service-option small{font-size:12px;color:var(--ink-muted)}.guest-field select,.booking-form input:not([type="checkbox"]),.booking-form textarea{background:var(--paper-raised);border-radius:2px;color:var(--ink)}.calendar-card{background:var(--paper-raised);border-radius:2px}.calendar-toolbar button{width:44px;height:44px;border-radius:2px}.calendar-weekdays span{color:var(--ink-muted)}.calendar-grid{gap:4px}.calendar-day{background:var(--paper-depth);border-radius:2px;min-height:76px}.calendar-day:hover:not(:disabled),.calendar-day.is-selected{background:var(--tape-oat);border-color:var(--coffee)}.calendar-day.is-selected{box-shadow:inset 0 0 0 1px var(--coffee)}.calendar-day.is-closed{background:#EEEBE5;color:#6F6B63}.calendar-day.is-full,.calendar-day.is-outside{background:#F1EEE8;color:#807B73}.calendar-legend{color:var(--ink-muted)}.calendar-legend i{background:var(--paper-depth)}.calendar-legend .legend-closed{background:#EEEBE5}.calendar-legend .legend-full{background:var(--tape-oat)}.time-option{min-height:44px;border-radius:2px}.time-option:hover:not(:disabled),.time-option.is-selected{background:var(--tape-oat);border-color:var(--coffee)}.submit-booking{min-height:52px;background:var(--coffee);color:var(--paper-raised);border-radius:2px}.request-status{background:var(--paper-depth);border-color:var(--tape-roast);color:var(--ink)}.booking-feedback{border-radius:2px;background:var(--paper-depth)}.booking-feedback.is-error{background:#F1DFD5}.aside-inner{top:26px;margin-top:48px;padding:24px;background:var(--paper-raised);border:1px solid var(--line);border-radius:2px}.aside-art{height:130px;width:100%;object-fit:contain;object-position:left center;margin:0 0 10px}.booking-aside h2{font:500 24px/1.4 var(--serif)}.booking-aside dl div{border-color:var(--line);font-size:13px}.booking-aside dt,.aside-notice{color:var(--ink-muted)}.booking-aside a{font-size:13px}
@media(max-width:760px){.booking-page{padding:0 20px 5rem}.booking-hero{padding:48px 0 30px;min-height:0}.booking-hero h1{font-size:38px}.booking-hero>p:not(.section-kicker){max-width:73%;font-size:14px}.booking-hero-art{width:44%;right:-15%;top:22px;opacity:.48}.booking-steps{gap:8px 14px;font-size:12px}.booking-layout{padding:0}.aside-inner{margin-top:30px}.booking-section{padding-top:32px}.service-options{gap:8px}.service-option{min-height:80px}.calendar-card{padding:8px}.calendar-day{min-height:62px}.calendar-day small{font-size:10px}.time-panel{display:block}}
@media(prefers-reduced-motion:reduce){.service-option,.calendar-day{transition:none}}
.booking-hero{border-radius:0}.site-nav .nav-contact{border-radius:2px}

/* One control language: raised paper, warm outline, coffee selection. */
.service-option,.calendar-toolbar button,.calendar-day,.time-option,.submit-booking,.guest-field select,.booking-form input:not([type="checkbox"]),.booking-form textarea,.site-nav .nav-contact{border-radius:var(--control-radius)}
.service-option,.calendar-toolbar button,.time-option{background:var(--control-surface);border-color:var(--control-border)}
.calendar-day{border-color:var(--control-border);background:var(--paper-depth)}
.service-option:hover,.calendar-toolbar button:hover:not(:disabled),.calendar-day:hover:not(:disabled),.time-option:hover:not(:disabled){border-color:var(--coffee);background:var(--control-selected)}
.service-option.is-selected,.calendar-day.is-selected,.time-option.is-selected{border:2px solid var(--coffee);background:var(--control-surface);box-shadow:none}
.service-option.is-selected{padding:17px}
.calendar-day.is-selected{padding:calc(.65rem - 1px)}
.submit-booking{border:1px solid var(--coffee);background:var(--coffee);color:var(--paper-raised)}
.submit-booking:hover{border-color:var(--ink);background:var(--ink)}
.calendar-toolbar button:disabled,.calendar-day:disabled,.time-option:disabled,.submit-booking:disabled{opacity:.48;cursor:default}
@media(max-width:1030px){.calendar-day.is-selected{padding:calc(.45rem - 1px)}}
@media(max-width:760px){.calendar-day.is-selected{padding:calc(.32rem - 1px)}}

/* Reservation content is deliberately square, like the paper cards in the reference. */
.booking-hero,.calendar-card,.aside-inner,.booking-feedback,.request-status{border-radius:0}

/* Store rich-menu palette: selected and availability states remain explicit. */
.booking-steps b{color:var(--tape-slate)}
.service-option.is-selected,.calendar-day.is-selected,.time-option.is-selected{background:var(--control-selected)}
.calendar-day.is-closed,.calendar-legend .legend-closed{background:#F4D9D1;color:var(--tape-roast)}
.calendar-day.is-full,.calendar-day.is-outside{background:#F2E8D8;color:#806A55}
.calendar-legend .legend-full{background:var(--tape-slate)}
.request-status{border-color:var(--tape-slate);background:#F2E8D8}
.booking-feedback.is-error{border-color:var(--tape-roast);background:#F9E2DC}

/* Keep the reservation columns inside medium-width windows. */
@media (max-width:1100px){
  .booking-layout{display:flex;flex-direction:column;gap:0}
  .booking-aside{width:100%;min-width:0}
  .aside-inner{position:relative;top:auto;margin-top:40px}
}
@media (max-width:760px){.aside-inner{margin-top:30px}}