/* Full landscape store menu. All original JSON-backed options remain present. */
.service-board-section > .container { width:calc(100% - 32px); max-width:none; }
.menu-board-panel, .menu-board { --board-blue:#d5f5ff; --board-slate:#495c63; --board-red:#9e0913; --board-ink:#141414; --board-green:#154da1; --board-line:#c8cbca; --board-gold:#e32529; }
.menu-board-panel [hidden] { display:none !important; }
.menu-board-toolbar { display:flex; align-items:center; gap:16px; margin:14px 0; }
.menu-board-toolbar > strong { font-size:21px; letter-spacing:.06em; color:var(--board-ink); white-space:nowrap; }
.menu-board-toolbar > div { display:flex; gap:8px; margin-left:auto; }
.menu-board-toolbar button { min-height:46px; padding:8px 16px; border:1px solid #c6d5cd; border-radius:8px; background:white; color:#213c3d; font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
.menu-board-toolbar [aria-pressed="true"] { background:#183832; color:white; }
.menu-board-status { font-size:14px; color:#526663; }
.menu-board-stage { width:100%; }
.menu-board.builder-layout { display:block; width:100%; padding:10px; border:1px solid #a8aeac; border-radius:0; background:white; color:#111; box-shadow:0 6px 22px #1921201a; transform-origin:top left; }
.menu-board-brand { display:flex; align-items:center; gap:22px; min-height:45px; margin-bottom:0; padding:8px 16px; background:#080c0a; color:white; }
.menu-board-brand > strong { font-size:24px; line-height:1.2; letter-spacing:.02em; }
.menu-board-brand > strong > span { margin-left:10px; font-size:16px; font-weight:500; letter-spacing:.1em; }
.menu-board-brand > span { padding-left:22px; border-left:1px solid #6e8476; font-size:19px; font-weight:500; letter-spacing:.12em; }
.menu-board-brand p { margin:0; color:white; font-size:15px; }
.menu-board-grid.builder-main { display:grid; grid-template-columns:2.3fr 1fr 2.18fr; gap:10px; align-items:start; background:white; }
.menu-board-left, .menu-board-middle, .menu-board-right { display:grid; min-width:0; gap:10px; align-content:start; align-items:stretch; }
.menu-board-left { grid-column:1; grid-row:1; grid-template-columns:1fr 1.3fr; grid-template-areas:"time base" "facial facial"; }
.menu-board-middle { grid-column:2; grid-row:1; grid-template-columns:1fr; grid-template-areas:"body" "free"; }
.menu-board-right { grid-column:3; grid-row:1; grid-template-columns:1.18fr 1fr; grid-template-areas:"advanced details" "identity identity"; }
.menu-board [data-board-area="time"] { grid-area:time; }
.menu-board [data-board-area="base"] { grid-area:base; }
.menu-board [data-board-area="body"] { grid-area:body; }
.menu-board [data-board-area="free"] { grid-area:free; }
.menu-board [data-board-area="advanced"] { grid-area:advanced; }
.menu-board [data-board-area="details"] { grid-area:details; }
.menu-board [data-board-area="extra"] { grid-column:1/-1; }
.menu-board .builder-section { min-width:0; margin:0; padding:0 8px 8px; border:0; border-radius:0; background:#d0d1cf; overflow:visible; }
.menu-board .builder-section-head { display:flex; float:left; width:calc(100% + 16px); margin:0 -8px 8px; padding:9px 10px; gap:8px; align-items:center; border:0; border-radius:0; color:white; background:var(--board-slate); line-height:1.25; }
.menu-board .builder-section-head + * { clear:both; }
.menu-board .builder-section-head strong { font-size:22px; font-weight:750; letter-spacing:.035em; }
.menu-board .mini-points { margin:5px 0 0; padding-left:16px; color:inherit; font-size:13px; font-weight:400; line-height:1.4; opacity:.9; }
.menu-board .mini-points li { margin:0; }
.menu-board .step-badge { flex-shrink:0; width:32px; height:32px; border-radius:50%; color:#172b31; background:white; font-size:22px; font-weight:700; }
.menu-board .option-grid, .menu-board .option-grid.three, .menu-board .body-part-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.menu-board .option-card, .menu-board .option-card.compact { display:grid; grid-template-columns:auto minmax(0,1fr); position:relative; align-items:center; min-height:64px; gap:10px; padding:8px 10px; border:1px solid transparent; border-radius:0; background:white; cursor:pointer; touch-action:manipulation; }
.menu-board .option-card > span { min-width:0; }
.menu-board .option-card input[type="checkbox"], .menu-board .option-card input[type="radio"], .menu-board .choice-chips input { flex-shrink:0; width:25px; height:25px; margin:0; accent-color:var(--board-green); cursor:pointer; }
.menu-board .option-title { display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:6px; row-gap:0; font-size:18px; line-height:1.3; font-weight:650; color:var(--board-ink); }
.menu-board .option-title > span:last-child:not(:first-child) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.menu-board .option-note { display:block; margin-top:2px; color:#373b3a; font-size:13px; line-height:1.35; }
.menu-board [data-board-area="time"] .option-title { font-size:20px; }
.menu-board [data-board-area="time"] .option-note { margin-top:3px; }
.menu-board .option-card:has(input:checked), .menu-board .choice-chips label:has(input:checked), .menu-board .is-selected { border-color:#1f60aa; background:#dcebff !important; box-shadow:inset 0 0 0 1px #1f60aa; }
.menu-board .option-card.is-recommended::after { content:"★"; position:absolute; left:-8px; right:auto; top:50%; transform:translateY(-50%); padding:0; border-radius:0; background:transparent; color:#e32529; font-size:23px; line-height:1; }
.menu-board .choice-heading { margin:8px 0 5px; font-size:15px; font-weight:700; color:#222; }
.menu-board .choice-heading:first-of-type { margin-top:0; }
.menu-board .selection-limit { clear:both; margin:0 0 5px; padding:6px; border-radius:0; color:#173e59; background:#ecf8fe; font-size:13px; line-height:1.3; }
.menu-board [data-board-area="free"] .option-note { display:inline; margin-left:6px; }
.menu-board [data-board-area="free"] .option-card > span { display:flex; flex-wrap:wrap; align-items:center; }
.menu-board [data-board-area="advanced"] { background:var(--board-blue); }
.menu-board [data-board-area="advanced"] .builder-section-head { background:#053d9c; color:white; }
.menu-board .supplemental-block { margin-top:7px; padding:6px; border:0; border-radius:0; background:#eefaff; font-size:14px; line-height:1.3; }
.menu-board .supplemental-block > strong { margin-bottom:4px; }
.menu-board .choice-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.menu-board .choice-chips label { display:flex; align-items:center; gap:5px; min-height:44px; padding:6px 7px; border:1px solid transparent; border-radius:0; font-size:15px; line-height:1.3; font-weight:600; background:#fff; cursor:pointer; touch-action:manipulation; }
.menu-board [data-board-area="details"] .preference-grid { display:grid; grid-template-columns:1fr; gap:8px; margin:0 0 8px; }
.menu-board .preference-group { display:grid; grid-template-columns:92px 1fr; gap:8px; align-items:center; }
.menu-board .preference-group > strong { font-size:16px; margin:0; color:#141414; }
.menu-board [data-board-area="details"] .choice-chips { grid-template-columns:1fr; gap:3px; }
.menu-board [data-board-area="details"] .choice-chips label { background:transparent; font-size:17px; min-height:44px; }
.menu-board .field-label { margin:8px 0 4px; font-size:15px; }
.menu-board .single-line-field, .menu-board .text-field { min-height:35px; padding:5px 8px; font-size:16px; border:1px solid #96a5a8; border-radius:0; background:white; color:#111; }
.menu-board .text-field { height:48px; resize:vertical; }
.menu-board .custom-input-row { display:flex; flex-wrap:wrap; gap:5px; margin:3px 0; }
.menu-minute-stepper { display:flex; align-items:center; gap:4px; width:100%; max-width:200px; }
.menu-minute-stepper button { width:40px; height:40px; min-width:40px; border:1px solid #869ca0; border-radius:3px; background:#edf5f5; color:#213c3d; font-size:24px; cursor:pointer; touch-action:manipulation; }
.menu-board .custom-duration-card .menu-minute-stepper input { flex:1; min-width:0; width:70px; height:40px; margin:0; padding:4px; text-align:center; font-size:19px; appearance:textfield; }
.menu-minute-stepper input::-webkit-inner-spin-button { appearance:none; }
.menu-board-facial { grid-area:facial; min-width:0; border:0; border-radius:0; background:#fcefff; }
.menu-board .menu-board-facial-head { display:flex; gap:12px; align-items:center; margin:0; padding:8px 10px; border-radius:0; background:var(--board-red); }
.menu-board-facial-head .menu-program-kicker { display:none; }
.menu-board .menu-board-facial-head h3 { margin:0; color:white; font-size:21px; }
.menu-board .menu-board-facial-head p { margin:0; max-width:none; font-size:13px; color:white; text-align:left; }
.menu-board-facial-grid { display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:5px; }
.menu-board-facial-grid .builder-section { background:#fcefff; border:0; padding:0 6px 6px; border-radius:0; }
.menu-board-facial-grid .builder-section-head { width:calc(100% + 12px); margin:0 -6px 6px; padding:6px; border-radius:0; border:0; color:white; background:#aa26bd; gap:5px; }
.menu-board-facial-grid .builder-section-head strong { font-size:17px; }
.menu-board-facial-grid .mini-points { font-size:13px; }
.menu-board-facial-grid .step-badge { width:27px; height:27px; font-size:17px; background:white; color:#172b31; }
.menu-board-facial-grid .supplemental-block { border:0; background:#fff5ff; }
.menu-board-facial-grid .option-title { font-size:16px; }
.menu-board-facial-grid .option-card { min-height:66px; padding:8px; }
.menu-board-facial-grid .choice-chips { grid-template-columns:1fr; }
.menu-board-facial-grid .choice-chips label { min-height:44px; font-size:15px; }
.menu-board .menu-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; position:static; max-height:none; overflow:visible; margin:8px 0 0; padding:8px 12px; border:1px solid #bdc7c8; border-radius:0; background:#e0e8e8; color:#253b3e; box-shadow:none; }
.menu-board .summary-line, .menu-board .summary-total { display:flex; align-items:center; gap:12px; margin:0; padding:0; border:0; font-size:18px; }
.menu-board .summary-total strong { font-size:32px; color:#253b3e; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.menu-board .summary-line strong { white-space:nowrap; }
.menu-board-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.menu-board-actions .button { width:auto; min-height:46px; padding:9px 18px; border-radius:4px; font-size:17px; white-space:nowrap; }
.menu-board-actions .clear-button { width:auto; min-height:44px; margin:0; padding:8px; font-size:16px; }
.menu-board .menu-board-payment-note { width:100%; order:5; margin:0; font-size:13px; }
.menu-board-capture-note { margin:5px 0 0; color:#515b5b; font-size:13px; line-height:1.3; }
.menu-board-capture-note::before { content:"★ 為店家推薦　"; color:var(--board-gold); }
.menu-board-panel button:focus-visible, .menu-board label:has(input:focus-visible) { outline:3px solid #154d9f; outline-offset:2px; }
.service-touch-mode { overflow:hidden; }
.service-touch-mode .menu-board-panel { position:fixed; z-index:1050; inset:0; display:flex; flex-direction:column; padding:10px; background:#f0f2f1; overflow:hidden; }
.service-touch-mode .menu-board-toolbar { flex:0 0 auto; margin:0 0 8px; }
.service-touch-mode .menu-board-stage { position:relative; flex:1; min-height:0; overflow:hidden; }
.service-touch-mode .menu-board { position:absolute; width:100%; max-width:none; margin:0; transform-origin:top left; }
.menu-board.menu-export { max-width:none; margin:0; }
.menu-capture-check { display:inline-flex; flex-shrink:0; justify-content:center; align-items:center; width:25px; height:25px; border:2px solid #343f45; background:white; color:#154da1; font-size:24px; font-weight:900; line-height:1; }
.menu-capture-check.radio { border-radius:50%; }
.menu-capture-check.checked { background:#154da1; color:white; border-color:#154da1; }
.menu-capture-value { display:block; min-height:28px; min-width:48px; padding:4px; background:white; color:#111; border-bottom:1px solid #899b9e; font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.menu-export .menu-minute-stepper { width:auto; }
.menu-export .menu-board-payment-note { display:none; }
/* Original printed-menu colors and lower-right store signature. */
.menu-board [data-board-area="time"] .option-card:nth-child(odd), .menu-board [data-board-area="base"] .option-card:nth-child(3n+1) { background:var(--board-blue); }
.menu-board-identity { grid-area:identity; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; align-self:start; padding:4px 12px; background:white; }
.menu-board-identity img { display:block; width:80%; max-width:480px; height:auto; }
.menu-board-identity p { margin:0; color:#546b74; font-size:19px; font-weight:700; letter-spacing:.08em; text-align:center; }
.menu-board-identity .menu-board-recommendation { align-self:flex-end; color:#e32529; font-size:16px; font-weight:500; letter-spacing:0; }
.menu-board-capture-note::before { content:none; }
.menu-board-export-time { margin:8px 0 0; padding:10px 14px; border-top:1px solid #bdc7c8; color:#253b3e; background:#f5f7f7; font-size:22px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums; text-align:right; }
/* Feedback is tonal: selection is stronger than hover, and all labels stay visible. */
@media (hover:hover) {
  .menu-board .option-card:hover, .menu-board .choice-chips label:hover { border-color:#6890b0; }
  .menu-board-toolbar button:hover, .menu-minute-stepper button:hover { background:#edf5f5; }
  .menu-board-toolbar [aria-pressed="true"]:hover { background:#254e3e; }
}
/* Responsive layout changes columns, not the scale of text and controls. */
.menu-board-toolbar { flex-wrap:wrap; }
.menu-board-toolbar > .menu-board-orientation { margin-left:0; }
.menu-board-toolbar > .menu-board-tools { margin-left:auto; flex-wrap:wrap; }
.menu-board-status:empty { display:none; }
.menu-service-session-status:empty { display:none; }
.menu-service-session-status { font-size:16px; font-weight:700; color:#183832; }
.menu-board-toolbar button:disabled { opacity:.55; cursor:not-allowed; }
.menu-board.is-service-in-progress input:disabled, .menu-board.is-service-in-progress textarea:disabled { opacity:1; color:#141414; -webkit-text-fill-color:#141414; }
.menu-board .builder-section-head { min-height:104px; }
.menu-board-facial-grid .builder-section-head { min-height:86px; }
.menu-board [data-board-area="body"] .option-card { min-height:48px; }
.menu-board [data-board-area="free"] .option-card { min-height:54px; }
.menu-board [data-board-area="time"] .option-card:not(.custom-duration-card) { min-height:76px; }
.menu-board .option-card > span, .menu-board .option-title { overflow-wrap:anywhere; }
.menu-board .menu-board-facial-head { min-height:52px; }
.menu-board .text-field { min-height:64px; height:64px; }
.menu-board .menu-board-brand { flex-wrap:wrap; gap:8px 22px; }
.menu-board .preference-group { grid-template-columns:minmax(72px,.7fr) minmax(0,1fr); }
.menu-board[data-layout="portrait"] .menu-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"time base" "body free" "advanced details" "facial facial" "identity identity"; }
.menu-board[data-layout="portrait"] .menu-board-left,
.menu-board[data-layout="portrait"] .menu-board-middle,
.menu-board[data-layout="portrait"] .menu-board-right { display:contents; }
.menu-board[data-layout="portrait"] .menu-board-identity { justify-self:end; width:min(100%,620px); }
@media (max-width:1199px) {
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"time base" "body free" "advanced details" "facial facial" "identity identity"; }
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-left,
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-middle,
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-right { display:contents; }
}
@media (max-width:700px) {
  .service-board-section > .container { width:calc(100% - 16px); }
  .menu-board-toolbar { gap:8px; }
  .menu-board-toolbar > .menu-board-tools { width:100%; margin:0; }
  .menu-board-toolbar button { min-height:44px; padding:8px 10px; font-size:14px; }
  .menu-board-toolbar > .menu-board-tools button { flex:1; }
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"time" "base" "body" "free" "advanced" "details" "facial" "identity"; }
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-facial-grid { grid-template-columns:minmax(0,1fr); }
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .builder-section-head { min-height:80px; }
  body:not(.service-touch-mode) .menu-board:not(.menu-export) .menu-board-identity p { font-size:16px; letter-spacing:0; }
  .menu-board-actions { width:100%; margin:0; justify-content:space-between; }
  .menu-board.menu-export .menu-board-actions { width:auto; }
}
/* Entire menu is fitted in touch mode; compact repeated spacing before scaling. */
.service-touch-mode .menu-board .builder-section-head { min-height:72px; padding-top:7px; padding-bottom:7px; }
.service-touch-mode .menu-board-facial-grid .builder-section-head { min-height:72px; }
.service-touch-mode .menu-board .option-card { min-height:48px; padding:6px 8px; }
.service-touch-mode .menu-board [data-board-area="time"] .option-card:not(.custom-duration-card) { min-height:60px; }
.service-touch-mode .menu-board .option-grid { gap:7px; }
.service-touch-mode .menu-board .choice-chips label { min-height:38px; }
.service-touch-mode .menu-board .text-field { min-height:48px; height:48px; resize:none; }
.service-touch-mode .menu-board-identity img { max-width:400px; }

/* Readable all-in-one board: give the facial courses the full lower band,
   rather than squeezing three subcolumns into two of the five main columns.
   menu-fit is retained by the export clone so its composition matches. */
.menu-board.menu-fit[data-layout="landscape"] .menu-board-grid {
  grid-template-columns:.9fr 1.15fr 1fr 1.3fr 1fr;
  grid-template-areas:"time base body advanced details" "time base free advanced details" "facial facial facial facial identity";
  gap:8px;
  align-items:stretch;
}
.menu-board.menu-fit[data-layout="landscape"] .menu-board-left,
.menu-board.menu-fit[data-layout="landscape"] .menu-board-middle,
.menu-board.menu-fit[data-layout="landscape"] .menu-board-right { display:contents; }
.menu-board.menu-fit .option-title,
.menu-board.menu-fit [data-board-area="time"] .option-title { font-size:22px; line-height:1.2; font-weight:700; }
.menu-board.menu-fit .option-note { font-size:14px; line-height:1.25; }
.menu-board.menu-fit .builder-section-head strong { font-size:24px; }
.menu-board.menu-fit .mini-points { font-size:14px; line-height:1.25; opacity:1; }
.menu-board.menu-fit .builder-section-head { min-height:70px; margin-bottom:6px; padding-top:6px; padding-bottom:6px; }
.menu-board.menu-fit .choice-chips label,
.menu-board.menu-fit [data-board-area="details"] .choice-chips label { font-size:20px; min-height:38px; padding:4px 6px; }
.menu-board.menu-fit .option-card { min-height:46px; padding:5px 8px; }
.menu-board.menu-fit .option-grid { gap:6px; }
.menu-board.menu-fit [data-board-area="body"] .body-part-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.menu-board.menu-fit [data-board-area="body"] .option-title { font-size:21px; }
.menu-board.menu-fit [data-board-area="free"] .option-title { font-size:21px; }
.menu-board.menu-fit .preference-group > strong { font-size:19px; }
.menu-board.menu-fit .preference-group { grid-template-columns:minmax(84px,.7fr) minmax(0,1fr); }
.menu-board.menu-fit .choice-heading, .menu-board.menu-fit .field-label { font-size:17px; }
.menu-board.menu-fit .selection-limit { font-size:14px; }
.menu-board.menu-fit .menu-board-facial-head { min-height:42px; padding:6px 10px; }
.menu-board.menu-fit .menu-board-facial-head h3 { font-size:24px; }
.menu-board.menu-fit .menu-board-facial-head p { font-size:15px; }
.menu-board.menu-fit[data-layout="landscape"] .menu-board-facial-grid { grid-template-columns:1fr 1fr 1.3fr; gap:8px; }
.menu-board.menu-fit[data-layout="landscape"] .menu-board-facial-grid .builder-section-head { min-height:66px; }
.menu-board.menu-fit[data-layout="landscape"] .menu-board-facial-grid .choice-chips { grid-template-columns:repeat(2,minmax(0,1fr)); }
.menu-board.menu-fit .menu-board-facial-grid .option-title { font-size:21px; }
.menu-board.menu-fit .menu-board-facial-grid .builder-section-head strong { font-size:22px; }
.menu-board.menu-fit .menu-board-identity { align-self:center; min-width:0; padding:8px; }
.menu-board.menu-fit .menu-board-identity img { width:100%; max-width:400px; }
.menu-board.menu-fit .menu-board-identity p { font-size:17px; letter-spacing:0; }