/**
 * styles/components.css — 화면 부품
 *
 * 색·글자크기·간격은 전부 tokens.css의 변수를 참조한다. 리터럴을 쓰지 않는다.
 * 여기 없는 규칙을 아래에 덧붙이지 않는다. 기존 규칙을 고친다. (SPEC 5.3)
 */

/* ── 기본 ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/*
 * 더블 탭으로 화면이 확대되지 않게 한다. 터치 화면에서는 반응이 없는 줄 알고
 * 두 번 빠르게 누르는 일이 잦은데, 한 번 확대되면 주문 화면이 어긋난다. (매장 요청)
 *
 * 전에는 * 에 manipulation 을 걸었다. 스펙상 스크롤을 막지 않지만, 윈도우
 * 키오스크에서 손가락으로 밀어도 목록이 안 움직인다는 말이 나왔다. 모든 요소에
 * 거는 대신 스크롤을 먹는 바탕에는 pan 을 또렷이 허용하고, 누르는 것들에만
 * manipulation 을 건다 — 뜻은 같고 스크롤은 확실히 열어 둔다.
 */
html, body { touch-action: pan-x pan-y; }

button, a, label, input, .card, .option, .seg-item, .choice, .size-chip,
.chip, .stepper-btn, .lang-option, .pickup-key, .seat-cell {
  touch-action: manipulation;
}

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-family);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--color-page);
  -webkit-text-size-adjust: none;
}

/*
 * 카드·창(surface) 안은 '카드 글자'로 되돌린다. (docs/THEME.md — 문맥 글자색)
 *
 * 글자는 --fg / --fg-weak / --fg-accent / --fg-success 로만 칠한다. 기본값은 '페이지 위' 글자이고,
 * 아래 목록(밝은 바탕을 까는 카드·창·칩)에 들어가면 카드용 값으로 바뀐다.
 * 그래서 '진한 바탕 + 흰 카드' 테마에서도 바탕 위는 흰 글자, 카드 안은 검은 글자가 된다.
 * ':root :where()' 라 명시도가 클래스 하나(0,1,0)다 — button{color:inherit} 같은 태그 규칙은
 * 이기고(카드가 <button> 이어도 되돌려진다), 아래쪽에 있는 각 컴포넌트의 글자색은 이긴다.
 * (처음엔 :where() 만 써서 명시도 0 이었는데, <button> 카드가 페이지 글자색을 물려받았다.)
 * 바탕을 까는 새 카드를 만들면 여기에 이름을 더한다.
 */
:root :where(
  .actions-priced .price, .batch-chosen-row, .batch-item, .batch-pizza-card,
  .benefit-band, .benefit-card, .benefit-set-opt,
  .btn-secondary, .cancel-ask, .card, .card-price-tag, .card.is-off, .card.is-off .card-note,
  .card.is-on, .choice, .choice-benefit, .choice-tag, .choice.is-off, .choice.is-on,
  .combo-line, .crust-pick, .crust-pick.is-on, .deus-gate, .dip-chip, .dip-free-note,
  .extras-tab, .extras-tab.is-on, .half-preview-bar, .idle-warning, .key, .lang,
  .lock-box, .lock-screen, .mb-detail-price-row, .method, .method.is-on, .mode-bar,
  .mode-bar-btn, .mode-bar-btn.is-fixed, .mode-card, .mode-card-sides, .mode-card.is-off,
  .mode-card.is-on, .name-display, .offer-applied, .offer-card, .oneplus-slot-no,
  .oneplus-slot-x, .option, .option.is-on, .panel, .panel-missed, .pay-chip,
  .pay-chip.is-on, .phone-display, .phone-edit, .phone-suggest, .pickup, .pickup-key,
  .pickup-result, .pizza-preview-empty, .pizza-preview-img.is-missing, .price-label,
  .privacy-close, .qty-btn, .receipt, .remember-check, .reserve-open.is-on,
  .review-items li, .sauce-card.is-on, .sauce-unlimited-note, .sc-dialog, .seat-cell,
  .seat-cell.is-on, .seat-current, .seat-door, .seat-zone, .seat-zone.is-closed,
  .seg, .seg-item.is-on, .send-failed, .set-card, .set-choose-card, .sg-cheap .sg-label,
  .sg-label, .sg-now, .sg-now .sg-label, .sg-row, .size-chip, .size-prompt,
  .split-box, .split-row, .split-step, .step-btn, .stepper-btn, .ticket, .ticket-method,
  .total, .tw-band, .wait-panel, .zone-card
) {
  --fg: var(--color-text);
  --fg-weak: var(--color-text-weak);
  --fg-accent: var(--color-brand-text);
  --fg-success: var(--color-accent);
  color: var(--fg);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

button { font: inherit; color: inherit; }

/* 이미지는 어디서도 끌어 옮길 일이 없다 — 기본 이미지 드래그(고스트)를 끈다.
   구형 터치 패널(윈도우 키오스크)에서 밀면 이미지가 손가락을 따라 뜨는 것을 막는다. */
img { max-width: 100%; -webkit-user-drag: none; }

/* 키오스크는 손가락으로 쓴다. 길게 눌러 텍스트가 잡히면 방해만 된다. */
button, .card, .option, .seg-item, .choice {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/*
 * 매장 키오스크(POSBANK·윈도우)의 터치 패널은 손가락을 '마우스'로 보낸다.
 * 그래서 밀면 브라우저가 글자를 파랗게 '드래그 선택'한다. 커스텀 드래그 스크롤
 * (app/drag-scroll.js)만 남기고, 화면 전체의 선택을 끈다. 진짜 터치인
 * 아이패드·손님 휴대폰은 선택이 방해되지 않으므로 건드리지 않는다. (매장 제보)
 */
[data-platform="kiosk"], [data-platform="kiosk"] * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 혹시 글자 입력칸이 생기면 거기서는 선택을 돌려준다. */
[data-platform="kiosk"] input,
[data-platform="kiosk"] textarea {
  user-select: text;
  -webkit-user-select: text;
}

:focus-visible {
  outline: var(--border-width-strong) solid var(--color-brand);
  outline-offset: var(--space-1);
}

/*
 * hover 는 마우스가 있는 기기에서만 건다. (매장 확인)
 *
 * iOS 사파리는 손가락으로 누른 뒤에도 hover 를 남긴다. 수량을 하나 담으면
 * 위쪽 목록에 줄이 하나 늘어 항목들이 아래로 밀리는데, 그때 손가락이 있던
 * 자리로 올라온 '다른' 버튼이 그 hover 를 물려받았다 —
 * 허니머스터드의 +를 눌렀는데 갈릭소스의 +가 붉게 켜졌다.
 */

/* ── 껍데기 ──────────────────────────────────────────── */

/* 못 보낸 주문 경고 — 혜택 띠와 같은 자리지만 색으로 갈라 둔다. (매장 확인) */
.benefit-warn {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  font-weight: var(--weight-bold);
}

.shell-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-header-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
}

.progress-count {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.progress-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  /* 구형 키오스크 크롬에서 한글이 글자마다 세로로 줄바꿈되던 것 방지 — 한 줄 고정. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar {
  flex: none;
  width: calc(var(--card-min) * 0.8);
  height: var(--space-2);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  transition: width var(--transition);
}

/* 혜택 띠 — 얇고 조용하게, 대신 항상 존재하게. (SPEC 2.5) */
.benefit-band {
  display: flex;
  flex-wrap: var(--band-wrap);
  overflow-x: var(--band-overflow);
  gap: var(--space-2) var(--space-5);
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
  background: var(--color-benefit-bg);
  color: var(--color-benefit-text);
  font-size: var(--text-sm);
}

.benefit-band[hidden] { display: none; }
/* 띠 안 '먹고가기 적용은 ○월 ○일까지' — 굵은 강조색. (대표님 요청 2026-11-04) */
.benefit-band .benefit-dine-note { font-weight: var(--weight-bold); color: var(--fg-accent); }

/* 한 줄로 고정한 플랫폼에서는 옆으로 밀어 본다. 막대는 감춘다. */
.benefit-band { scrollbar-width: none; }

.benefit-band::-webkit-scrollbar { display: none; }

.benefit {
  flex: none;
  white-space: var(--band-text);
}

.benefit::before {
  content: '·';
  margin-right: var(--space-2);
  color: var(--color-text-faint);
}

.benefit:first-child::before { content: none; margin-right: 0; }

/* 세트로 주문 중 — 할인 안내와 헷갈리지 않게 또렷하게 둔다. (매장 확인) */
.benefit-set { font-weight: var(--weight-bold); color: var(--fg-accent); }

/* ── 화면 ────────────────────────────────────────────── */

.screen {
  flex: 1;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
}

.screen-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.hint {
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

.hint.is-done { color: var(--fg-success); }

/* ── 버튼 ────────────────────────────────────────────── */

.btn {
  min-height: var(--control-lg);
  white-space: nowrap;
  padding: var(--space-3) var(--space-6);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--color-brand-dark); }
}


.btn-secondary {
  background: var(--color-surface);
  color: var(--fg-accent);
  border-color: var(--color-brand);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-weak);
  border-color: var(--color-border-strong);
}

.btn-sm {
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: transparent;
  cursor: default;
}

.link {
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  cursor: pointer;
}

.actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/*
 * 화면의 마지막 버튼 줄('처음으로·장바구니·이전·다음')은 아래에 붙여 둔다. (매장 요청)
 * 메뉴가 길어 끝까지 내려야 버튼이 보이면, 손님은 다음으로 갈 길을 못 찾는다.
 *
 * 화면 루트의 직계 줄만 고른다 — 카드나 작은 창 안의 버튼 줄까지 붙이면
 * 그 줄이 카드에서 떨어져 나가 무슨 말인지 알 수 없게 된다.
 */
.screen > * > .actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: var(--space-4);
  /* 배경을 화면 좌우 끝까지 넓힌다 — 여백만큼 남겨 두면 그 틈으로 카드가 비친다. */
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: var(--space-3) var(--gutter);
  background: var(--color-bar-bg);
}

.actions .btn-ghost { margin-right: auto; }

.actions-priced { align-items: stretch; }

/* 한 줄에 선 버튼은 키가 같아야 한다 — 글자 크기가 달라도 높이는 맞춘다. */
.actions .btn { align-self: stretch; }

/*
 * 지금 낼 금액. 주황 상자에 담아 버튼들 사이에서 먼저 눈에 들어오게 한다. (매장 요청)
 * 금액은 고르는 내내 바뀌는 값이라, 바뀐 것을 알아채야 다음으로 넘어갈지 정한다.
 */
.actions-priced .price {
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-price-box);
  border: var(--border-width) solid var(--color-price-line);
  border-radius: var(--radius-md);
}

.actions-priced .price-pay { color: var(--color-price-text); }

/* 금액이 왼쪽을 차지하므로 '이전'은 밀지 않는다 */
/* 금액은 왼쪽 끝, 나머지는 오른쪽으로 민다.
   위아래 여백은 지운다 — 남겨 두면 상자만 버튼보다 낮아 줄이 어긋나 보인다. */
.actions-priced .price { margin: 0 auto 0 0; }

/*
 * 금액이 없는 줄에서는 '처음으로'가 왼쪽 끝을 맡는다.
 * 금액이 있는 줄에서는 금액이 맨 앞이므로(first-child 가 아니다) 밀지 않는다 —
 * 밀면 금액과 '처음으로'가 화면 양끝으로 갈라져 한 덩어리로 안 읽힌다.
 */
.actions > .btn-home:first-child { margin-right: auto; }

.actions-priced .btn-ghost { margin-right: 0; }

/* ── 1단계 · 결제 수단 ───────────────────────────────── */

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--control-lg) * 3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .choice:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
}


/*
 * 고를 수 없는 주문 형태 — 좌석 구역이 전부 마감되면 먹고가기를 잠근다. (매장 요청)
 * 흐릿하게만 두면 "왜 안 눌리지?" 하고 계속 누른다. 회색으로 눌러앉히고,
 * 그림자를 없애 눌리는 카드처럼 보이지 않게 하고, 마감 문구를 함께 띄운다.
 */
.choice:disabled,
.choice.is-off {
  color: var(--color-disabled-text);
  background: var(--color-disabled-bg);
  border-color: var(--color-border);
  box-shadow: none;
  cursor: default;
  opacity: 0.75;
}
@media (hover: hover) {
  .choice:disabled:hover,
  .choice.is-off:hover { border-color: var(--color-border); box-shadow: none; }
}


.choice:disabled .choice-name,
.choice.is-off .choice-name { color: var(--color-disabled-text); }

/* 왜 못 고르는지 — 이름 아래에 또렷하게 */
.choice-note {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-text-faint);
  border-radius: var(--radius-pill);
}
/* 만석 안내 — 눈에 띄게 브랜드색으로 (screens/01-order-type.js) */
.choice-note-full { background: var(--color-brand); }

.choice-name {
  font-size: var(--text-choice);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

/* 먹고가기 카드의 줄 맞춤용 빈 자리 — 키오스크만 쓴다(platform/kiosk.css). */
.choice-spacer { display: none; }

/* 포장 버튼이 할인을 직접 말한다. (SPEC 2.5) */
.choice-benefit {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}

/*
 * 픽업 시간 화면의 알약은 한 줄로 둔다 — '약 15~20분'이 '약 15~20 / 분'으로
 * 접히면 고장 난 것처럼 보인다. 여기 문구는 짧아 카드 폭 안에 들어간다.
 */
.order-type-pickup .choice-benefit {
  white-space: nowrap;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.reserve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

.reserve-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

.reserve-time input {
  font: inherit;
  font-size: var(--text-md);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.order-type-note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* ── 선택 막대 (한판/반반, 사이즈) ───────────────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.seg {
  display: inline-flex;
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

/* 피자 옵션 — 소스량·커팅 줄 (screens/03-topping-crust.js) */
.opt-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3); padding: var(--space-2) 0;
}
.opt-row + .opt-row { border-top: var(--border-width) solid var(--color-border); }
.opt-label { min-width: 4.5rem; font-weight: var(--weight-bold); color: var(--fg); }
.opt-seg { flex-wrap: wrap; }

.seg-item {
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-5);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.seg-item.is-on {
  background: var(--color-surface);
  color: var(--fg);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-card);
}

.seg-item:disabled { color: var(--color-disabled-text); cursor: default; }

/* 사이드·음료 단품 담기 — 피자(빨강)와 구분되게 초록 강조. 오른쪽으로 밀어 눈에 띄게. */
.btn-sides {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--transition);
}
@media (hover: hover) {
  .btn-sides:hover { background: #085730; }
}

.btn-sides-ic { font-size: 1.15em; }

/* ── 카드 격자 (피자·사이드·음료) ────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * 화면 밖으로 나간 카드는 그리지 않는다. 매장 키오스크 사양이 낮아 피자 20여 장을
 * 늘 그려 두면 밀 때마다 버벅인다 — 보이는 것만 그리면 훨씬 매끄럽다. (매장 확인)
 *
 * 높이를 함께 일러 둬야 한다. 안 그리는 동안의 크기를 모르면 스크롤 막대가
 * 밀 때마다 튄다. 실제 카드 높이에 가깝게 잡아 둔다.
 */
.card-cell {
  display: flex;
  content-visibility: auto;
  contain-intrinsic-size: auto calc(360px * var(--scale));
}

.card {
  display: flex;
  flex: 1;
  /* 칸(격자 셀)보다 넓어지지 않게 — 긴 이름·버튼은 카드 안에서 접힌다. */
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .card:hover { border-color: var(--color-border-strong); }
}


/*
 * 음료 카드 — 사진 대신 색 띠로 가른다. (매장 요청)
 *
 * 색은 카드마다 --tint 로 꽂아 준다(screens/09-extras.js). 사진이 없으니
 * 높이가 늘 같고, 용량을 바꿔도 목록이 출렁이지 않는다.
 */
.drink-card {
  position: relative;
  overflow: hidden;
  padding-left: var(--space-5);
}

.drink-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--tint, var(--color-border-strong));
}

/* 띠가 카드 밖에서 잘 안 보이는 좁은 화면을 위해 이름 앞에도 같은 색을 찍는다. */
/*
 * 이름이 한 줄이든 두 줄이든('코카-콜라 제로') 카드 높이가 같아야 한다.
 * 두 줄 자리를 늘 비워 두면 그리드가 들쭉날쭉해지지 않는다.
 */
.drink-card .card-name {
  font-size: var(--text-md);
  min-height: calc(var(--text-md) * 2 * var(--leading-tight));
}

/* 값이 '2,500 / 원' 으로 쪼개지면 칩 높이가 한 줄 늘어 카드가 어긋난다. */
.drink-card .size-inch,
.drink-card .size-name { white-space: nowrap; }

.drink-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: var(--space-2);
  background: var(--tint, var(--color-border-strong));
  border-radius: var(--radius-pill);
}

/*
 * 사이드 · 음료 탭. (매장 요청)
 *
 * 둘을 세로로 쌓으면 사이드 열세 종을 지나야 음료가 나와 스크롤이 길다.
 * 한 번에 한 쪽만 보여 주고, 담은 개수를 탭에 적어 반대쪽 상황도 알린다.
 */
.extras-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.extras-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.extras-tab.is-on {
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border-color: var(--color-selected-border);
}

@media (hover: hover) {
  .extras-tab:not(.is-on):hover { border-color: var(--color-border-strong); }
}

/*
 * 음료 칸은 사이드보다 넓게. 안에 용량 칩이 둘 들어간다.
 *
 * 좁은 휴대폰에서는 넓히면 한 열이 되어 오히려 답답하므로, 거기서는
 * 여백을 깎아 두 열을 지킨다(아래 max-width: 480px 블록).
 */
@media (min-width: 481px) {
  .card-grid-drinks {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 1.35), 1fr));
  }
}

/* 담은 개수 — 지금 안 보는 쪽에 무엇이 있는지 알리는 자리다. */
.extras-tab-count {
  min-width: 1.6em;
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.6em;
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

/*
 * 사이드·음료 목록은 화면 밖 카드를 접어 두지 않는다. (매장 확인)
 *
 * 접어 두면 높이를 어림값(360px)으로 잡는데, 이 카드들은 그보다 작다. 스크롤해
 * 카드가 들어올 때마다 진짜 높이로 바뀌며 문서가 늘었다 줄었다 해서, 용량을
 * 고르면 화면이 위로 튀는 것처럼 보였다. 여기는 장수가 적어 접을 이유도 없다.
 * 피자 목록(스무 장 남짓)은 그대로 접어 둔다 — 거기서는 최적화가 값을 한다.
 */
.extras-screen .card-cell,
.side-screen .card-cell,
.drink-screen .card-cell {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.card.is-on {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

.card.is-off {
  background: var(--color-disabled-bg);
  border-color: transparent;
  box-shadow: none;
  color: var(--color-disabled-text);
  cursor: default;
}

.card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: var(--card-img-fit);
  border-radius: var(--radius-md);
}

/* 파일을 못 받은 경우. 깨진 아이콘 대신 빈 자리로 둔다.
   카드 이미지는 자리를 지켜야 줄이 맞고, 작은 썸네일은 비우면 오히려 지저분하다. */
.card-img.is-missing,
.pizza-preview-img.is-missing {
  border: var(--border-width) dashed var(--color-border);
  background: var(--color-surface-sunken);
}

.option-img.is-missing { display: none; }

.card.is-off .card-img { opacity: 0.45; }

.card-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.card-desc {
  font-size: var(--text-xs);
  color: var(--fg-weak);
  line-height: var(--leading-normal);
}

.card.is-off .card-desc { color: var(--color-disabled-text); }

.card-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ── 가격 (SPEC 4.3 — 결과만 보여준다) ───────────────── */

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.price-list {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.price-pay {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.price-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-discount);
  background: var(--color-brand-weak);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

/* ── 접히는 묶음 (크러스트 · 토핑 · 곁들이) ──────────── */

.panel {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* 주문 완료 — 곧 처음 화면으로 돌아간다는 안내. 조용히, 그러나 보이게. */
.done-auto-home {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
  text-align: center;
}

/* 프로모션 화면의 언어 버튼 — 껍데기 머리가 없으므로 화면 위에 직접 얹는다. */
.idle-lang {
  position: absolute;
  top: var(--space-5);
  right: var(--gutter);
  z-index: 3;
}

/*
 * 일회용품(포크) 묻는 창 — 사이드를 담고 나올 때 화면을 덮는다. (매장 요청)
 * 답이 곧 다음 걸음이라 버튼 두 개만 크게 둔다.
 */
.utensil-dialog { width: min(520px, 96vw); text-align: center; }

.utensil-dialog .hint { margin: 0; }

.utensil-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* 주문 형태 카드만큼 클 필요는 없다 — 두 글자짜리 답이다. */
.choice-sm {
  min-height: var(--control-lg);
  padding: var(--space-4) var(--space-3);
}

.choice-sm .choice-name { font-size: var(--text-lg); }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.panel-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.panel-value {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 한도에 닿았음을 누르기 전에 알린다. (SPEC 3.3) */
.panel-value.is-full {
  color: var(--fg-accent);
  font-weight: var(--weight-bold);
}

.panel-missed { background: var(--color-accent-weak); border-color: transparent; }

.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.option-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}

.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-lg);
  padding: var(--space-3);
  flex-wrap: wrap;
  text-align: left;
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.option.is-on {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

/* 토핑처럼 좁은 칸에 들어갈 때는 이름을 한 줄 차지하게 하고 가격·버튼을 아래로 내린다 */
.option-stepper {
  flex-wrap: wrap;
  cursor: default;
}

.option-stepper .option-name {
  flex: 1 1 100%;
  min-width: 0;
}

.option-stepper .option-price { margin-left: 0; }

.option-img {
  width: calc(var(--control-lg) * 1.5);   /* 크러스트 사진이 가로형이라 3:2로 둔다 */
  height: var(--control-lg);
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.option-name {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  min-width: 0;
}

.option-desc {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--fg-weak);
}

.option-price {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--fg-weak);
  white-space: nowrap;
}

/* ── 개수 조절 ───────────────────────────────────────── */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.stepper-btn {
  width: var(--control-min);
  height: var(--control-min);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .stepper-btn:hover:not(:disabled) { border-color: var(--color-brand); color: var(--fg-accent); }
}


.stepper-btn:disabled {
  background: var(--color-disabled-bg);
  border-color: transparent;
  color: var(--color-disabled-text);
  cursor: default;
}

.stepper-count {
  min-width: var(--space-6);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* 수량은 카드 가운데에 둔다. 오른쪽에 붙여 두면 카드마다 위치가 달라 보인다. (매장 요청) */
.card .stepper { margin-top: var(--space-2); align-self: stretch; justify-content: center; }

/* ── 4단계 세트 제안 ─────────────────────────────────── */

.set-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-5);
  text-align: left;
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .set-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
}


.set-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.set-line {
  font-size: var(--text-md);
  color: var(--color-discount);
  font-weight: var(--weight-medium);
}

.set-range, .set-note {
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 충돌하는 항목만 다시 묻는다. 전체 초기화가 아니다. (SPEC 2.6)
   고른 카드에 붙어 보이도록 같은 강조색을 쓴다. */
.size-prompt {
  margin-top: var(--space-2);
  padding: var(--space-5);
  background: var(--color-brand-weak);
  border: var(--border-width-strong) solid var(--color-selected-border);
  border-radius: var(--radius-lg);
}

.size-prompt-text {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.size-prompt .actions {
  margin-top: var(--space-4);
  justify-content: flex-start;
}

.size-prompt .actions .btn-ghost { margin-right: 0; }

/* ── 7단계 주문 확인 ─────────────────────────────────── */

.receipt {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.receipt-row {
  display: grid;
  /* 이름·설명 / 금액 / 빼기 — 빼기를 금액 위에 겹쳐 놓으면 둘 다 안 보인다 */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.receipt-row:last-child { border-bottom: none; }

.receipt-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.receipt-desc {
  grid-column: 1;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

.receipt-row .price {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0;
}

.sauce-list {
  display: grid;
  /* 수량 버튼이 들어가면서 한 줄이 넓어졌다. 칸을 조금 키워 이름이 접히지 않게. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-lg);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.check:has(input:checked) {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

/*
 * 곁들이 카드 — 세로로: 상단 이름 · 중간 수량 · 하단 금액. (매장 요청)
 * 이름이 카드 폭을 다 써서 글자마다 세로로 깨지지 않는다.
 */
.sauce-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-lg);
  padding: var(--space-3);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.sauce-card.is-on {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}
.sauce-card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  /* 단어 단위로만 줄바꿈 — 낱자로 쪼개지 않는다. (한글 세로 깨짐 방지) */
  word-break: keep-all;
  overflow-wrap: normal;
}
.sauce-card .stepper { margin: 0; }
.sauce-card-price {
  font-size: var(--text-sm);
  color: var(--fg-weak);
  white-space: nowrap;
}

.check input {
  width: var(--space-5);
  height: var(--space-5);
  accent-color: var(--color-brand);
}

.check-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  word-break: keep-all;
}

.check-price {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--fg-weak);
  white-space: nowrap;
}

.applied-summary {
  margin: var(--space-4) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--fg-success);
}

.missed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.missed-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.missed-text {
  flex: 1;
  font-size: var(--text-sm);
}

.total {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: var(--border-width-strong) solid var(--color-border-strong);
}

.total-label {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  /*
   * 금액이 커서 라벨 칸이 한 글자 폭까지 눌리면, 일본어·중국어 라벨
   * ('お支払い金額')이 글자마다 세로로 쪼개졌다. (매장 제보 — 실기기)
   * 라벨은 한 줄로 고정한다. 좁은 폰에선 아래에서 금액 위로 쌓는다.
   */
  white-space: nowrap;
}

.total .price { margin: 0; }

.total .price-pay { font-size: var(--text-2xl); }

.total-lg .price-pay { font-size: var(--text-3xl); }

/* 좁은 폰 — 라벨과 금액을 좌우로 두면 긴 금액이 라벨을 눌렀다. 위아래로 쌓는다. */
@media (max-width: 560px) {
  .total { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .total-label { flex: none; }
}

/* ── 8단계 결제 ──────────────────────────────────────── */

.payment .choice-grid { margin-top: var(--space-5); }

.payment-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(var(--card-min) * 2.6);
  margin: 0 auto;
  text-align: center;
  padding-top: var(--space-6);
}

.payment-done .actions { justify-content: center; }

.payment-done .actions .btn-ghost { margin-right: 0; }

/* ── 피자 미리보기 (반반) ────────────────────────────── */

.pizza-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* 메뉴 사진은 634x400이고 피자는 비스듬히 찍혀 타원으로 보인다.
   원형 틀에 끼워 넣으면 테두리가 어긋나므로 사진 비율을 그대로 쓴다. */
.pizza-preview-disc {
  position: relative;
  display: block;
  width: var(--preview-size);
  aspect-ratio: var(--preview-ratio);
}

/* 두 사진을 같은 자리에 같은 크기로 겹쳐 놓고, 각각 반달로 잘라낸다.
   사진을 네모로 자르면 피자 테두리가 어긋나 붙인 티가 난다. */
.pizza-preview-half {
  position: absolute;
  inset: 0;
}

.pizza-preview-left { clip-path: inset(0 50% 0 0); }

.pizza-preview-right { clip-path: inset(0 0 0 50%); }

/* 피자 한 판이 원 안에 온전히 들어와야 두 반쪽의 지름이 맞는다 */
.pizza-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 아직 안 고른 자리. 사진 속 피자와 같은 크기·위치의 타원을 반달로 자른다.
   (피자는 사진의 69% x 87%, 중심은 50% / 51%) */
.pizza-preview-empty {
  position: absolute;
  top: 51%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69%;
  height: 87%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-faint);
  background: var(--color-disabled-bg);
}

/* 숫자가 자르는 선에 걸리지 않도록 보이는 쪽 한가운데로 민다 */
.pizza-preview-left .pizza-preview-empty { padding-right: 50%; }

.pizza-preview-right .pizza-preview-empty { padding-left: 50%; }

.pizza-preview-caption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.pizza-preview-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.pizza-preview-name.is-empty {
  font-weight: var(--weight-medium);
  color: var(--color-text-faint);
}

.pizza-preview-name + .pizza-preview-name::before {
  content: '+';
  margin-right: var(--space-2);
  color: var(--color-text-faint);
}

/* 2단계 — 격자 위에 붙어 따라다닌다 */
/*
 * 미리보기 + 안내 + 버튼을 한 줄에 놓되, 폭이 모자라면 줄을 바꾼다.
 * flex:1 만 주면 남는 폭이 0일 때 글자가 한 자씩 세로로 쌓여 카드가
 * 화면을 다 먹는다(패드 세로에서 안내 문구 높이만 614px이었다). (매장 확인)
 */
/*
 * 반반 미리보기 — 목록을 내리는 동안에도 '지금 뭘 골랐는지'가 늘 보여야 한다.
 * 그래서 헤더 바로 아래에 붙여 둔다(--header-h 는 app/shell.js 가 매 렌더마다
 * 헤더 실제 높이로 갱신한다. 혜택 띠 때문에 높이가 고정이 아니다).
 * 배경이 비쳐 보이면 밑의 카드와 겹쳐 지저분하므로 배경을 꽉 채운다.
 */
.half-preview-bar {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.half-preview-bar .pizza-preview { flex-direction: row; }

/*
 * 이만큼은 확보한다 — 못 하면 통째로 다음 줄로 내려간다.
 * flex-basis 로 잡으면 안 된다. 모바일은 이 줄이 세로 배치라(platform/mobile.css)
 * basis 가 '높이'로 먹혀 한 줄짜리 안내가 256px 높이를 차지한다.
 * 최소 '폭'으로 잡아야 가로·세로 어느 배치에서도 안전하다.
 */
.half-preview-bar .hint {
  flex: 1 1 auto;
  min-width: min(16rem, 100%);
  margin: 0;
}

/* 줄이 바뀌면 버튼도 함께 내려와 오른쪽에 붙는다. */
.half-preview-bar .half-actions { margin-top: 0; margin-left: auto; }

/* 3단계 — 무엇에 토핑을 올리는지 작게 */
.draft-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.draft-head .pizza-preview { flex-direction: row; }

.draft-head .pizza-preview-disc { width: var(--preview-size-sm); }

.draft-head .pizza-preview-empty { font-size: var(--text-md); }

.draft-head-size {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 반쪽을 눌러 그 자리만 다시 고른다 */
.pizza-preview-half.is-clearable {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
@media (hover: hover) {
  .pizza-preview-half.is-clearable:hover::after {
    content: '다시 고르기';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-on-brand);
    background: var(--color-scrim);
  }
}


.pizza-preview-name { white-space: nowrap; }

.half-preview-bar .pizza-preview-caption { flex-wrap: wrap; }

/* 포장 전용 화면 — 시간 지정을 고르면 그 카드가 켜진 상태로 남는다 */
.choice.is-on {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

.order-type-pickup .reserve { margin-top: var(--space-5); }

/* ── 토핑 고르기 ─────────────────────────────────────── */

.topping-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.topping-picker .seg { align-self: flex-start; }

/* 다른 분류에서 고른 개수. 탭을 바꿔도 선택을 놓치지 않게 한다. */
.seg-badge {
  display: inline-block;
  min-width: var(--space-5);
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.seg-item.is-on .seg-badge {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
}

/* 토핑 사진은 잘라내지 않는다 — 재료가 무엇인지 보여야 한다 */
.topping-img {
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* 음료는 비율이 제각각인 제품컷이라 잘라내면 병이 잘린다. 통째로 넣는다. */
.drink-screen .card-img { object-fit: contain; }

/* 카드 배지 (신메뉴 등) — 사진 위 왼쪽 모서리 */
.card-media {
  position: relative;
  display: block;
  width: 100%;
}

.card-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.card.is-off .card-badge { background: var(--color-disabled-text); color: var(--color-disabled-bg); }

/* 못 고르는 이유는 눈에 띄어야 한다 — 가격 자리에 대신 들어간다 */
.card.is-off .card-note {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
  background: var(--color-disabled-bg);
  border-radius: var(--radius-pill);
}

/* ── 업그레이드 제안 (4단계) ─────────────────────────── */

.offer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--color-brand-weak);
  border: var(--border-width-strong) solid var(--color-selected-border);
  border-radius: var(--radius-lg);
}

.offer-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.offer-line {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.offer-note {
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

.offer-card .btn { margin-top: var(--space-2); }

/* ── 8단계 결제 수단 ─────────────────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.method {
  width: 100%;
  min-height: calc(var(--control-lg) * 2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .method:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
}


.method-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

/* ── 접수 완료 — 카운터로 들고 가는 화면 ─────────────── */

.done-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

/* 번호와 금액은 멀리서도 읽혀야 한다. 자기가 얼마 주문했는지
   모르는 채로 카운터에 오는 고객이 있다. */
.ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.ticket-label {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
}

.ticket-no {
  font-size: calc(var(--text-3xl) * 2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-accent);
  letter-spacing: 0.02em;
}

.ticket-divider {
  width: 100%;
  height: var(--border-width);
  margin: var(--space-4) 0 var(--space-2);
  background: var(--color-border);
}

.ticket-amount {
  font-size: calc(var(--text-3xl) * 1.4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.ticket-method {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border-radius: var(--radius-pill);
}

.done-guide {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}

.done-guide-strong {
  margin-top: var(--space-2);
  font-weight: var(--weight-bold);
  color: var(--fg-success);
}

/* ── 전화번호 · 이름 입력 ────────────────────────────── */

.phone-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
/* 결제 금액 카드 바로 아래 '전화번호를 입력해 주세요' 제목이 카드에 딱 붙어 보였다. */
.payment > .total + .phone-step { margin-top: var(--space-5); }

/* 전화번호 표시 — 010-••••-•••• 를 한 칸에 담는다.
   자리마다 칸을 두면 좁은 화면에서 여덟 칸이 안 들어와 잘렸다. (매장 요청) */
.phone-display {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 모바일에서는 화면 폭을 다 쓰고, 큰 화면에서는 지나치게 넓어지지 않게 묶어 둔다. */
  width: min(100%, 560px);
  min-height: var(--control-lg);
  margin: var(--space-2) 0;
  padding: var(--space-4) var(--space-5);
  font-size: clamp(26px, 7.5vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border: var(--border-width-strong) solid var(--color-brand);
  border-radius: var(--radius-lg);
}

.phone-prefix {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.phone-dash { margin: 0 0.1em; }

.phone-group { display: inline-flex; }

/* 점과 숫자의 폭을 맞춰 둔다 — 누를 때마다 번호가 좌우로 흔들리면 읽기 어렵다. */
.phone-char {
  display: inline-block;
  min-width: 0.66em;
  text-align: center;
}

/* 아직 안 누른 자리는 옅은 점으로 남겨 몇 자리가 남았는지 보이게 한다. */
.phone-char:not(.is-filled) { opacity: 0.65; }

.name-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--card-min) * 1.4);
  min-height: var(--control-lg);
  margin: var(--space-2) 0;
  padding: 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  background: var(--color-surface);
  border-bottom: var(--border-width-strong) solid var(--color-brand);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: calc(var(--card-min) * 1.6);
}

.keypad-abc {
  grid-template-columns: repeat(7, 1fr);
  max-width: calc(var(--card-min) * 3);
}

.key {
  min-height: var(--control-lg);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .key:hover { border-color: var(--color-brand); }
}


.key:active { background: var(--color-brand-weak); }

.key-wide { font-size: var(--text-sm); }

.keypad-abc .key-wide { grid-column: span 5; }

/* 전화번호를 다 넣기 전에는 결제 수단을 흐리게 둔다 */
/* 제목('이름을 넣으면 고를 수 있어요')은 할 일을 알려 주므로 흐리지 않는다 (화면 점검) */
.method-step.is-locked > :not(.panel-title) { opacity: 0.45; }
/* 번호를 고치느라 다시 잠기면 열려 있던 나눠 내기 창은 접는다 — 흐리게 남으면 글자가 안 보이고 누를 수도 없다. */
.method-step.is-locked .split-box { display: none; }

.ticket-seq {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
}

/* ── 언어 선택 (우측 상단) ───────────────────────────── */

/* 언어 선택 — 네 버튼을 한 줄로. 드롭다운 없이 항상 보인다. (매장 요청) */
.lang {
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

.lang-btn {
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) {
  .lang-btn:hover { color: var(--fg); }
}

/* 지금 언어 — 브랜드색으로 또렷하게. */
.lang-btn.is-on {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
}

/* ── 글자 자판 (언어별) ──────────────────────────────── */

.keypad-letters {
  display: flex;
  flex-direction: column;
  max-width: calc(var(--card-min) * 3.4);
}

.keypad-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.keypad-row .key {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-1);
  font-size: var(--text-lg);
}

.keypad-row .key-wide { flex: 3; font-size: var(--text-sm); }

/* 배열을 맞추기 위한 빈칸 */
.key-blank {
  flex: 1;
  border: none;
  background: none;
}

/* 가타카나는 한 줄에 10칸이라 글자를 조금 줄인다 */
.keypad-kana .key { font-size: var(--text-md); }

/* ── 예약 픽업 시간 고르기 ───────────────────────────── */

/* 예약은 못 보고 지나치면 안 된다. 링크가 아니라 버튼 크기로 둔다. */
.btn-lg {
  min-height: calc(var(--control-lg) * 1.15);
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-xl);
}

/* 예약주문 버튼 — 먹고가기 카드 정도로 크게. 글자도 카드 이름 크기로 키운다. (매장 요청) */
.reserve-open {
  width: 100%;
  min-height: calc(var(--control-lg) * 2);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  font-size: var(--text-choice);
}

.reserve-open.is-on {
  background: var(--color-brand-weak);
  border-color: var(--color-brand);
}

/* 시간을 고르는 동안에는 버튼을 줄여 선택 화면에 자리를 내준다. (매장 확인) */
.reserve-open.is-open {
  min-height: calc(var(--control-lg) * 1.15);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xl);
}

/* 시간 선택 중에는 위쪽을 접었으므로 화면 맨 위부터 쓴다. */
.order-type.is-picking .reserve { margin-top: 0; }

.reserve-chosen {
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.pickup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pickup-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* 넓으면 시·분이 나란히, 좁으면 위아래로 접힌다.
   375px에 두 열을 밀어넣으면 칸이 화면 밖으로 잘려나간다. */
.pickup-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  width: 100%;
  justify-content: center;
}

.pickup-col {
  display: flex;
  flex: 1 1 calc(var(--card-min) * 1.1);
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.pickup-col-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
  text-align: center;
}

.pickup-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--control-lg) * 1.1), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 분은 :00 ~ :50 여섯 칸을 세 칸씩 두 줄로 */
.pickup-list-minutes { grid-template-columns: repeat(3, 1fr); }

.pickup-key {
  width: 100%;
  min-width: 0;
  min-height: var(--control-lg);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .pickup-key:hover:not(:disabled) { border-color: var(--color-brand); }
}


.pickup-key.is-on {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-bold);
}

.pickup-key:disabled {
  background: var(--color-disabled-bg);
  border-color: transparent;
  color: var(--color-disabled-text);
  cursor: default;
}

/* 고른 시간은 크게. 잘못 고른 걸 여기서 알아챈다. */
.pickup-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.pickup-result-label {
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

.pickup-time {
  font-size: calc(var(--text-3xl) * 1.3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-accent);
}

.pickup-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  margin-top: var(--space-2);
}
/* 두 버튼이 폭을 나눠 갖는다 — 글자 크기대로 늘어나면 상자 밖으로 삐져나왔다(화면 점검). */
.pickup-actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; padding-inline: var(--space-3); }
.pickup-actions .btn-primary { flex-grow: 2; }

/* 창(해피아워 예약) 안에서는 창이 이미 상자다 — 상자 속 상자를 없애 폭을 돌려준다. */
.sc-dialog .pickup { margin-top: 0; padding: 0; background: transparent; border: 0; }

/* ── 예약 시간 휠 — 아이폰 알람처럼 돌려서 고른다 (매장 요청) ── */
.timewheel {
  --tw-item-h: calc(var(--control-lg) * 1.1);
  --tw-rows: 3;                               /* 보이는 칸 수(홀수라야 가운데가 생긴다) */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: calc(var(--tw-item-h) * var(--tw-rows));
  margin-top: var(--space-2);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.tw-col {
  position: relative;
  flex: 0 1 auto;
  min-width: calc(var(--control-lg) * 2);
  height: 100%;
}
.tw-col-min { min-width: calc(var(--control-lg) * 2); }

/* 각 휠 — 세로로 굴러가고, 칸이 가운데로 착 달라붙는다. */
.tw-list {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: center;
}
.tw-list::-webkit-scrollbar { display: none; }

.tw-item {
  height: var(--tw-item-h);
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition), opacity var(--transition);
}
@media (hover: hover) {
  .tw-item:hover { color: var(--fg); }
}

/* 가운데 밴드 — 지금 고른 칸을 감싸 보여 준다. */
.tw-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tw-item-h);
  transform: translateY(-50%);
  border-top: var(--border-width-strong) solid var(--color-border);
  border-bottom: var(--border-width-strong) solid var(--color-border);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 0;
}

.tw-colon {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--fg);
  z-index: 1;
}

/* 위·아래로 멀어질수록 흐려지는 가림막 — 다이얼의 입체감을 준다. */
.tw-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tw-item-h);
  pointer-events: none;
  z-index: 1;
}
.tw-fade-top {
  top: 0;
  background: linear-gradient(to bottom,
    var(--color-surface) 10%,
    color-mix(in srgb, var(--color-surface) 40%, transparent) 60%,
    transparent);
}
.tw-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top,
    var(--color-surface) 10%,
    color-mix(in srgb, var(--color-surface) 40%, transparent) 60%,
    transparent);
}

/* 가운데 밴드 안(=고른 값)에 들어온 글자는 또렷하고 크게. */
.tw-item.is-center {
  color: var(--fg);
  font-weight: var(--weight-bold);
  transform: scale(1.08);
}

/* ── 아이들 화면 (프로모션) ──────────────────────────── */

/* 아이들 화면은 프로모션 이미지를 화면 가득 쓴다 — 껍데기의 여백·폭 제한을 푼다. */
.screen[data-step="idle"] { max-width: none; padding: 0; }

.idle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 화면 높이에 딱 맞춘다. min-height:100% 는 부모 높이가 불명확한 태블릿에서
     0으로 풀려 이미지가 제 비율만큼 세로로 넘쳐 '주문하기'가 화면 밖으로 밀렸다.
     뷰포트 높이로 고정해 이미지를 잘라 담고 버튼이 항상 화면 안에 있게 한다. */
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

.idle-stage {
  position: relative;
  flex: 1;                 /* 남는 세로를 전부 채운다 */
  min-height: 0;           /* flex 자식이 내용보다 작게 줄어들어 이미지를 잘라 담게 한다 */
  display: block;
  width: 100%;
  overflow: hidden;
}

/* 이미지는 절대 위치로 깔아 컨테이너 높이를 밀어내지 못하게 한다.
   flex 안에서 height:100% 만으로는 사파리(실제 아이패드)에서 컨테이너가 이미지
   원본 세로에 맞춰 늘어나 '주문하기'가 화면 밖으로 밀렸다. inset:0 으로 붙이면
   언제나 화면(스테이지) 높이에 맞춰 잘려 담긴다. */
.idle-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 화면을 가득 채운다 */
  object-position: center;
}

.idle-blank {
  flex: 1;
  background: var(--color-surface-sunken);
}

/* 프로모션 없는 시작 화면 — 로고·매장명·주문하기만. (손님 휴대폰) */
.idle-plain {
  gap: var(--space-6);
  padding: var(--space-7) var(--gutter);
  background: var(--color-idle-bg);
}

/* 기기가 커지면 로고도 같이 커진다 — 아이패드에서 16rem 고정은 휑해 보인다. */
.idle-plain-logo {
  width: min(calc(var(--card-min) * 1.6), 62%);
  height: auto;
  filter: var(--idle-logo-filter);   /* 진한 바탕 테마는 로고를 흰색으로 뒤집는다 */
}

.idle-plain-logo.is-missing { display: none; }

.idle-plain-store {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
}

/*
 * 이미지 위가 아니라 흰 바탕이라 그림자까지 필요 없다. 글자도 화면에 맞춰 줄인다.
 * 색은 초록 — 흰 바탕에 빨강 하나만 떠 있으면 경고처럼 보인다. (매장 요청)
 * 프로모션 포스터 위에 겹치는 키오스크 버튼은 빨강 그대로 둔다.
 */
.idle-plain .idle-start {
  width: min(calc(var(--card-min) * 2.16), 88%);
  font-size: calc(var(--text-3xl) * 1.2);
  background: var(--color-accent);
  box-shadow: var(--shadow-card);
}

/* 주문하기·매장명을 이미지 하단에 겹쳐 올린다. 어떤 이미지 위에서도 읽히게 옅은 스크림. */
/* 주문하기 + 매장명을 한 묶음으로, 프로모션 점선 아래 여백을 채운다.
   top 값은 이 프로모션 이미지의 마지막 점선 위치에 맞춘 것 — 이미지가 바뀌면 조정. */
/* 주문하기 + 매장명 묶음을 화면 하단에 고정한다(이미지 점선 위치와 무관). */
.idle-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  background: none;
}

.idle-dots {
  position: absolute;
  bottom: calc(var(--control-lg) * 1.8 + var(--space-7));
  left: 50%;
  display: flex;
  gap: var(--space-2);
  transform: translateX(-50%);
}

.idle-dot {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  opacity: 0.5;
}

.idle-dot.is-on { opacity: 1; background: var(--color-brand); }

.idle-start {
  /* 고정 크기 — 버튼(빨간 박스)만 추가로 20% 축소하고 글자 크기는 그대로 둔다. (매장 요청)
     2.7 × 0.8 ≈ 2.16 */
  width: min(calc(var(--card-min) * 2.16), 80%);
  min-height: calc(var(--control-lg) * 2.16);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: var(--radius-pill);
  font-size: calc(var(--text-3xl) * 1.62);   /* 글자 크기 유지 */
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
}

.idle-store {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 오버레이(이미지 위)에서는 스크림 위라 밝게 */
.idle-overlay .idle-store { font-size: var(--text-base); color: rgba(255, 255, 255, 0.92); }

/*
 * 판(版) 표시 — 오른쪽 아래 구석. (매장 요청)
 *
 * 기기마다 새로고침 시점이 달라 서로 다른 판이 돌 수 있다. 매장에서 눈으로
 * 맞춰 보라고 둔다. 손님 눈에는 들어오지 않을 만큼 작고 흐리게.
 * 프로모션 이미지 위에 올라갈 때도 있어 글자에 옅은 그림자를 준다.
 */
.idle-version {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--fg-weak);
  /* 예전 opacity 0.55 는 바탕에 묻혔다(대비 2.2) — 작아도 읽히게 (화면 점검) */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* 영업 전·후 안내 — 프로모션 대신 이것만 띄운다 */
.idle-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: auto 0;
  padding: var(--space-7) var(--gutter);
  text-align: center;
}

.idle-notice-title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.idle-notice-body {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg-weak);
}

/* ── 자동 복귀 경고 ──────────────────────────────────── */

.overlay[hidden] { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--color-scrim);
}

.idle-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(var(--card-min) * 2.2);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.idle-warning-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.idle-warning-count {
  font-size: calc(var(--text-3xl) * 1.62);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-accent);
}

.idle-warning-note {
  margin: 0;
  font-size: var(--text-md);
  color: var(--fg-weak);
}

.hint-strong { font-weight: var(--weight-bold); color: var(--fg-accent); }

/* 굵은 안내 바로 아래 붙는 곁줄 — 픽업 시간대처럼 덧붙이는 사실. */
.hint-sub { margin-top: calc(var(--space-2) * -1); }

/*
 * 한 줄로 끝나야 하는 안내. (매장 요청)
 *
 * '…주문해 주 / 세요' 처럼 끊기면 급히 적은 쪽지처럼 보인다.
 * 문구를 짧게 줄여 두었고, 그래도 모자라면 글자를 줄여 한 줄을 지킨다.
 */
.hint-oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * 고르는 카드 위에 붙는 꼬리표 — '포장 전용'. (매장 요청)
 *
 * 휴대폰으로 주문해 놓고 매장에 와서 자리를 찾는 손님이 있었다.
 * 맨 위 안내를 못 보고 지나쳐도 누르는 자리에서 한 번 더 걸리게 둔다.
 */
.choice-tag {
  align-self: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ── 하단 줄 (처음으로 · 장바구니) ───────────────────── */

.shell-footer[hidden] { display: none; }

/*
 * '처음으로'는 화면 맨 아래에 붙여 둔다. (매장 요청)
 * 흐름 끝에 두었더니 메뉴를 끝까지 내려야 보였다 — 손님이 빠져나갈 길은
 * 언제나 눈에 있어야 한다. 배경을 꽉 채워 밑의 카드가 비쳐 보이지 않게 한다.
 */
.shell-footer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  /* 처음으로·장바구니를 왼쪽에 — 다른 화면(.actions)에서 '처음으로/이전'이 왼쪽에
   * 오는 것과 위치를 맞춘다. (매장 요청: 처음으로·이전 위치 통일) */
  justify-content: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  background: var(--color-bar-bg);   /* body 와 같은 색 — 밑이 비쳐 보이지 않게 */
}

.shell-cart {
  margin-right: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}

/*
 * '처음으로'는 빠져나가는 길일 뿐 주된 동작이 아니다. 화면 아래에 붙여 두되
 * 작게, 그리고 '이전·다음'과 세로로 겹치지 않게 왼쪽에 둔다. (매장 요청)
 */
.btn-home {
  min-height: var(--control-min);
  font-size: var(--text-sm);
}

/* ── 장바구니 줄 빼기 ────────────────────────────────── */

.receipt-remove {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: var(--control-min);
  height: var(--control-min);
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  color: var(--fg-weak);
  cursor: pointer;
}
@media (hover: hover) {
  .receipt-remove:hover { border-color: var(--color-brand); color: var(--fg-accent); }
}


.btn-add-more {
  width: 100%;
  margin-bottom: var(--space-5);
}

/* 주문 확인의 '한 판 더 / 사이드·음료' 두 버튼을 나란히 */
.add-more-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/*
 * 나란한 두 버튼은 flex:1 로 반씩 나눈다. 기본 .btn 은 nowrap 이라 영문
 * 'Add sides & drinks' 가 한 줄 폭을 강제해 오른쪽이 잘렸다. (매장 제보)
 * 이 두 버튼만 글자를 감싸고 칸을 넘지 않게 한다. 짧은 언어는 그대로 한 줄.
 */
.add-more-row .btn-add-more { margin-bottom: 0; min-width: 0; white-space: normal; }

/* ── 단품 사이드·음료 화면 ───────────────────────────── */
.extras-group { margin-bottom: var(--space-6); }
.extras-group .panel-title { margin-bottom: var(--space-4); }
.extras-screen .total { margin-top: var(--space-4); }

/* ── 좌석 선택 (매장식사) ─────────────────────────────── */

.seat-screen .hint { margin-bottom: var(--space-4); }

/* 구역 탭 — 매장/야외/별관/단체석 */
.seat-zones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.seat-zone {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

/* 구역 탭 — 이름 밑에 이용 시간. 마감된 구역은 눌리지 않는다. (매장 확인) */
.seat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: var(--leading-tight);
}

.seat-zone-name { font-size: inherit; font-weight: inherit; }

.seat-zone-hours {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
}

.seat-zone.is-closed {
  color: var(--color-disabled-text);
  background: var(--color-disabled-bg);
  border-color: var(--color-border);
  cursor: default;
}

.seat-zone.is-closed .seat-zone-hours { color: var(--color-disabled-text); }

.seat-zone.is-on {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.seat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: calc(var(--control-lg) * 2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .seat-cell:hover:not(:disabled) { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
}


.seat-cell.is-on {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-raised);
  background: var(--color-brand-weak);
}

/* 찬 자리는 눌리지 않는다. 회색으로 죽여 한눈에 구분되게 한다. */
.seat-cell:disabled {
  cursor: not-allowed;
  opacity: 0.8;   /* 0.5 는 '2인' 같은 작은 글자가 안 보였다(2.0) — 막힌 자리도 몇 인석인지는 읽혀야 한다 */
  background: var(--color-surface-sunken);
  box-shadow: none;
}

.seat-name { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.seat-cap { font-size: var(--text-sm); color: var(--fg-weak); }
.seat-taken { font-size: var(--text-xs); color: var(--fg-weak); }

/*
 * 자리 배치도 — 야외석. (매장 요청)
 *
 * 매장 앞에 서면 입구가 오른쪽, 테이블이 왼쪽으로 이어진다. 1번이 입구 옆이다.
 * 화면도 [4][3][2][1] 🚪 로 같은 방향으로 그려야 고개만 돌려 맞출 수 있다.
 * 손님이 읽어야 할 것은 테이블 위 번호판과 같은 '번호' 하나뿐이다.
 */
.seat-map { margin: 0 0 var(--space-5); }

.seat-map-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  /* 자리가 늘어도 줄바꿈해 한 줄로 뭉개지지 않게. */
  flex-wrap: wrap;
}

/* 배치도 칸 — 번호가 주인공이라 넓이보다 높이를 준다. */
.seat-map-cell {
  flex: 1 1 calc(20% - var(--space-3));
  min-width: calc(88px * var(--scale, 1));
  padding: var(--space-4) var(--space-2);
}

.seat-no {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 입구 — 자리가 아니므로 누를 수 없고, 칸보다 조용하게 둔다. */
.seat-door {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: calc(72px * var(--scale, 1));
  padding: var(--space-4) var(--space-3);
  border: var(--border-width-strong) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.seat-door-icon { font-size: var(--text-2xl); line-height: 1; }
.seat-door-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-weak);
  white-space: nowrap;
}

.seat-map-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 번호가 커지는 쪽을 화살표로 짚어 준다. 입구가 오른쪽이면 왼쪽을 가리킨다. */
.seat-map-away::before { content: '← '; }
.seat-map .seat-map-hint { margin-left: auto; }

.seat-note { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.seat-note-full { color: var(--fg-accent); font-weight: var(--weight-medium); }
.seat-picked { margin-left: var(--space-2); font-weight: var(--weight-bold); }

/* 줄서기(웨이팅) 안내 — 자리가 다 찼을 때 (screens/07-seat.js · rules/waitlist.js) */
.wait-panel {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.wait-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
}
.wait-seats { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); }
.wait-seat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.wait-seat-row:last-child { border-bottom: none; }
.wait-seat-name { font-weight: var(--weight-medium); }
.wait-seat-time { color: var(--fg-weak); font-variant-numeric: tabular-nums; }
.wait-status {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline;
  padding-top: var(--space-2);
}
.wait-ahead { color: var(--fg-weak); font-size: var(--text-md); }
.wait-eta { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--fg-accent); }
.btn-wait { background: var(--color-brand); }

/* 완료 전표의 좌석 안내 — 어디 앉는지 크게 */
.ticket-seat {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
}

/* ── 인원수 선택 (− N +) ─────────────────────────────── */

/*
 * 화면 가운데에 놓는다. (매장 요청) 위에 붙어 있으면 큰 키오스크 화면에서 아래가 텅 비고
 * 숫자와 −·+ 가 눈높이보다 위에 있었다. 헤더와 하단 바(--bar-h)를 뺀 높이 안에서 가운데.
 */
.party-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-h, 0px) - var(--bar-h, 0px) - var(--space-5) - var(--space-7) - var(--space-4));
}
.party-screen .hint { margin-bottom: var(--space-6); }
/* 단체 '몇 세트?'도 인원수 화면처럼 가운데에. (매장 요청) */
.batch-screen-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-h, 0px) - var(--bar-h, 0px) - var(--space-5) - var(--space-7) - var(--space-4));
}

.party-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-7);
}

.step-btn {
  width: calc(var(--control-lg) * 1.6);
  height: calc(var(--control-lg) * 1.6);
  font-size: var(--text-3xl, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--fg-accent);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .step-btn:hover:not(:disabled) { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
}

.step-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.party-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: calc(var(--control-lg) * 2.4);
  justify-content: center;
}

.party-number { font-size: calc(72px * var(--scale)); font-weight: var(--weight-bold); line-height: 1; }
.party-unit { font-size: var(--text-2xl); color: var(--fg-weak); }

/* 붙이는 구역 진행 표시 */
.seat-progress { color: var(--fg-accent); }

/* ── 피자 카드 사이즈 칩 (9"·12"·14") ─────────────────── */

.card-sizes {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-2);
}

/* 사이즈 하나 = 인치 + 가격. 터치로 누르기 좋게 큼직하게. */
.size-chip {
  position: relative;   /* 담은 개수 배지(.chip-qty)의 기준점 */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-1);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .size-chip:hover { border-color: var(--color-brand); }
}


.size-chip.is-on {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.size-inch { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1; }
/* 9"·12"·14" 아래 레귤러·라지·패밀리 */
.size-name { font-size: var(--text-xs); color: var(--fg-weak); line-height: 1; }
.size-chip.is-on .size-name { color: var(--color-text-on-brand); opacity: 0.85; }

/* 소개글과 사이즈 사이의 금액 한 줄 */
.card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}

.card-price-now { font-size: var(--text-xl); font-weight: var(--weight-bold); }
/* 좁은 카드에서 영어·일본어 값·혜택 이름이 카드 밖으로 나가지 않게(화면 점검) */
.card-price > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.card-price-was { font-size: var(--text-sm); text-decoration: line-through; color: var(--color-text-faint); }
.card-price-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-accent);
  background: var(--color-brand-weak);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
}

/* 선택된 카드 가운데의 '확정' 버튼 */
/*
 * 사이즈까지 고른 카드의 '확정'. (매장 요청)
 *
 * 전에는 사진 한가운데에 동그란 배지로 얹었는데, 피자 무늬와 겹쳐 안 보인다는
 * 말이 나왔다. 카드 맨 위에 초록 사각 버튼으로 크게 세운다 — 빨강(브랜드)은
 * 카드 곳곳에 이미 쓰여 눈에 띄지 않으므로 초록으로 가른다.
 *
 * 이때 사진과 소개는 접는다(.card.is-confirming). 이미 고른 피자라 더 볼 것이
 * 없고, 대신 이름·금액·사이즈가 한눈에 들어온다.
 */
.card-confirm {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3em;      /* '확  정' — 글자를 벌려 버튼을 꽉 채운다 */
  text-indent: 0.3em;         /* 자간 때문에 오른쪽으로 쏠리는 것을 되돌린다 */
  text-align: center;
  color: var(--color-text-on-brand);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

/*
 * 자간 0.3em 은 두 글자짜리 '확정·確定·确定'을 벌리려는 것이다. 영문
 * 'Confirm'(7자)에 그대로 주면 버튼이 카드보다 넓어져 오른쪽이 잘렸다.
 * (매장 제보) 영문만 정상 자간으로 되돌린다.
 */
:lang(en) .card-confirm { letter-spacing: normal; text-indent: 0; }

/* 고른 카드는 사진과 소개를 접는다 — 이름·금액·사이즈만 남긴다. */
.card.is-confirming .card-media,
.card.is-confirming .card-desc { display: none; }

/*
 * 이 화면을 끝내는 버튼. 한판의 '확정'과 반반의 '다음'이 같은 초록이라
 * 어느 쪽으로 골랐든 '여기를 누르면 넘어간다'가 눈에 익는다. (매장 요청)
 */
.btn-go {
  color: var(--color-text-on-brand);
  background: var(--color-accent);
  border: none;
}
@media (hover: hover) {
  .btn-go:hover { background: var(--color-accent); filter: brightness(1.08); }
}


/* 크게 보기 — 다른 버튼을 밀어내지 않게 작게. */
.btn-zoom {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* 붙인 반반을 크게 보는 창 */
.half-zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: min(560px, 92vw);
}

.half-zoom .pizza-preview-disc { width: min(440px, 76vw); }

.half-zoom .pizza-preview-caption { font-size: var(--text-lg); }

/* 반반에서 몇 번째로 고른 장인지 (①②) */
.card-pick-order {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: calc(28px * var(--scale));
  height: calc(28px * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-selected-border, var(--color-brand));
  border-radius: 50%;
}

/* 반반 미리보기 아래 버튼들 (다시 선택하기 / 다음) */
.half-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }

/* ── 하단 바로가기 배너 ───────────────────────────────── */

/*
 * 흰 카드 · 초록 큰 제목 · 가격 한 줄 · 큰 '바로가기' 버튼 — 어느 테마 바탕(빨강·회색·분홍)에서도
 * 또렷하게 흰 카드로 둔다. 색은 tokens.css 의 --color-shortcut-* 만 쓴다. (대표님 시안 1안 2026-11-05)
 * 패드·키오스크: 배너 수만큼 나란히(--sc-n). 휴대폰: 한 줄에 하나, 윗줄 [제목 …… 바로가기].
 */
.shortcut-banners {
  display: grid;
  grid-template-columns: repeat(var(--sc-n, 3), minmax(0, 1fr));
  max-width: calc(var(--sc-n, 3) * 300px);
  margin: var(--space-3) auto 0;
  gap: var(--space-4);
  align-items: stretch;   /* 버튼은 기본(normal)이 늘어나지 않는다 — 세 장 높이를 맞춘다 */
}

.shortcut {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px 14px;
  text-align: left;
  color: var(--color-shortcut-text);
  background: var(--color-shortcut-bg);
  border: 1px solid var(--color-shortcut-border);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .shortcut:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); transform: translateY(-2px); }
}
.shortcut:active { transform: scale(0.98); }

.shortcut-body { display: flex; flex-direction: column; gap: 6px; }
.shortcut-title { font-size: 29px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; color: var(--color-shortcut-title); word-break: keep-all; }
/* 딱지가 있으면 제목 위 한 줄로 — 영어 'Happy Hour' 처럼 긴 제목과 겹치지 않게 */
.shortcut-title.has-badge { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.shortcut-sub { font-size: 19px; font-weight: var(--weight-bold); line-height: 1.35; word-break: keep-all; }
.shortcut-when { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--color-shortcut-weak); }

/* 세트 2인·3인·4인 — 한 칸씩, 값은 초록 굵게 */
.shortcut-prices { display: flex; flex-direction: column; gap: 3px; }
.shortcut-price {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 3px 10px;
  font-size: 17px; font-weight: 600; line-height: 1.35;
  background: var(--color-shortcut-chip);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.shortcut-price b { font-weight: 800; color: var(--color-shortcut-title); }

/* '먹고가기는 ○월 ○일까지' — 금색 띠 (대표님 요청 2026-11-04) */
.shortcut-note {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 12px;
  font-size: 15px; font-weight: 800;
  color: var(--color-shortcut-note-fg);
  background: var(--color-shortcut-note);
  border-radius: var(--radius-pill);
  word-break: keep-all;
}

/* 큰 '바로가기 ›' 버튼 — 카드 전체가 눌리지만, 눌러야 할 곳을 보여 준다 */
.shortcut-cta {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  height: 48px;
  font-size: 19px; font-weight: 800;
  color: var(--color-shortcut-cta-fg);
  background: var(--color-shortcut-cta);
  border-radius: var(--radius-pill);
}
.shortcut-arrow { font-size: 24px; line-height: 1; margin-top: -2px; }

/* '포장 전용' — 패드는 제목 위, 휴대폰은 제목 옆 */
.shortcut-badge {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-shortcut-badge-fg);
  background: var(--color-shortcut-badge);
  border-radius: var(--radius-pill);
}

/* 네 장이 나란히 서면(1+1 이벤트가 켜진 날) 조금 작게 — 휴대폰은 한 줄에 하나라 그대로, 키오스크는 아래 따로 */
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut-title { font-size: 25px; }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut-price { font-size: 15px; padding-inline: 8px; }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut-sub { font-size: 17px; }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] { gap: var(--space-3); }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut { gap: 8px; padding-inline: 14px; }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut-note { padding: 4px 10px; font-size: 13px; }
:root:not([data-platform="mobile"]):not([data-platform="kiosk"]) .shortcut-banners[data-n="4"] .shortcut-cta { height: 44px; font-size: 17px; }

@media (max-width: 640px) { .shortcut-banners { grid-template-columns: 1fr; } }

/*
 * 매장 세로 키오스크(POSBANK 1080×1920) — 배너 묶음을 위 포장하기·먹고가기 칸과 같은 폭으로,
 * 아래 빈 공간만큼 높이·글씨를 키운다. 패드·휴대폰은 그대로. (대표님 요청 2026-11-05)
 */
[data-platform="kiosk"] .shortcut-banners { max-width: none; margin-top: var(--space-5); gap: 20px; }
[data-platform="kiosk"] .shortcut { min-height: 470px; gap: 16px; padding: 30px 28px 26px; border-radius: 28px; }
[data-platform="kiosk"] .shortcut-body { gap: 12px; }
[data-platform="kiosk"] .shortcut-title { font-size: 48px; }
[data-platform="kiosk"] .shortcut-title.has-badge { gap: 10px; }
[data-platform="kiosk"] .shortcut-badge { padding: 6px 14px; font-size: 19px; }
[data-platform="kiosk"] .shortcut-sub { font-size: 29px; }
[data-platform="kiosk"] .shortcut-when { margin-top: 10px; font-size: 24px; }
[data-platform="kiosk"] .shortcut-prices { gap: 8px; }
[data-platform="kiosk"] .shortcut-price { padding: 9px 14px; font-size: 27px; border-radius: 12px; }
[data-platform="kiosk"] .shortcut-note { padding: 9px 16px; font-size: 22px; }
[data-platform="kiosk"] .shortcut-cta { height: 86px; font-size: 32px; gap: 10px; }
[data-platform="kiosk"] .shortcut-arrow { font-size: 38px; margin-top: -4px; }
/* 키오스크에 네 장이면 조금 작게 */
[data-platform="kiosk"] .shortcut-banners[data-n="4"] { gap: 16px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut { padding-inline: 20px; gap: 14px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut-title { font-size: 36px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut-sub { font-size: 23px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut-price { padding-inline: 10px; font-size: 21px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut-note { padding: 6px 12px; font-size: 18px; }
[data-platform="kiosk"] .shortcut-banners[data-n="4"] .shortcut-cta { height: 72px; font-size: 26px; }

/* 바로가기용 작은 모달 (포장/먹고가기 선택, 해피아워 예약) */
.sc-layer {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: var(--color-scrim);
}

.sc-dialog {
  width: min(680px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--color-bg, var(--color-surface));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 20px 60px rgb(0 0 0 / 25%));
}

.sc-dialog-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  text-align: center;
}

/*
 * 세트 고르기 — 2인·3인·4인을 나란히. (매장 요청)
 * 인원마다 사이즈와 구성이 다르므로 값보다 '무엇이 들었나'를 먼저 읽히게 둔다.
 */
.set-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.set-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-5);
  text-align: left;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .set-card:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
  }
}


.set-card-name { font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* 어느 사이즈 전용인지가 고르는 기준이 된다 — 이름 바로 아래 붙인다. */
.set-card-size {
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
  background: var(--color-brand-weak, rgb(200 16 46 / 10%));
  border-radius: var(--radius-sm);
}

.set-card-what { font-size: var(--text-sm); color: var(--fg-weak); }

.set-card-price {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/*
 * 전에 쓴 번호 제안 — 손님 폰에서만 뜬다. (매장 요청 · app/saved-phone.js)
 * 번호 칸 바로 위에 둔다. 키패드를 누르기 시작하면 사라진다.
 */
/*
 * 나눠 내기·분할 결제를 여는 동안 위쪽을 접는다. (매장 요청)
 *
 * 패드 세로 화면에서 번호와 수단 그리드가 자리를 다 먹어, 정작 골라야 할
 * 패널이 화면 밖으로 밀렸다. 접어 두면 패널이 첫 화면에 들어온다.
 * 번호는 한 줄로 남겨 둔다 — 누구 주문인지는 늘 보여야 한다.
 */
.phone-step.is-min .screen-title,
.phone-step.is-min .hint,
.phone-step.is-min .phone-edit,
.phone-step.is-min .phone-suggest { display: none; }

.phone-step.is-min .phone-display {
  transform: scale(0.72);
  transform-origin: center top;
  margin-bottom: calc(var(--space-5) * -1);
}

/* 수단 그리드는 패널 안에 칩으로 다시 나오므로 접는 동안 숨긴다. */
.method-step.is-picking .panel-title,
.method-step.is-picking .hint,
.method-step.is-picking .method-grid,
.method-step.is-picking .method-combo-cell { display: none; }

/* 번호를 다 넣어 키패드를 접었을 때 다시 펴는 버튼 — 작고 조용하게. */
.phone-edit {
  display: block;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-weak);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.phone-suggest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-brand);
  border-radius: var(--radius-lg);
}

.phone-suggest-ask {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-align: center;
}

.phone-suggest-row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* 지우기는 실수로 누르면 안 되니 작고 조용하게 둔다. */
.phone-suggest-forget {
  padding: 0;
  font-size: var(--text-xs);
  color: var(--fg-weak);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/*
 * 나눠 내기 — 결제 수단 아래에 편다. (매장 요청 · rules/split-payment.js)
 * 카운터 직원이 이 숫자를 단말에 그대로 옮겨 찍는다. 금액을 크고 또렷하게.
 */
/* 나눠 내기로 고른 수단 — 아래 패널이 어느 수단의 것인지 알아보게 한다. */
.method.is-on {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

.split-box {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.split-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-align: center;
}

/*
 * 제목 줄과 닫기(×). 제목은 가운데 그대로 두고 ×만 오른쪽 끝에 얹는다.
 * 이 패널이 열리면 결제 수단 목록이 숨으므로, 나가는 길이 눈에 보여야 한다.
 */
.split-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.split-head .split-title { flex: 1; }

.split-close {
  position: absolute;
  top: calc(var(--space-1) * -1);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-min);
  height: var(--control-min);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--fg-weak);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
@media (hover: hover) {
  .split-close:hover { color: var(--fg); background: var(--color-surface-sunken); }
}

.split-counter {
  display: grid;
  grid-template-columns: var(--control-min) 1fr var(--control-min);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.split-step {
  height: var(--control-min);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.split-step:disabled { opacity: 0.35; cursor: default; }

.split-people {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  text-align: center;
}

.split-amounts { display: grid; gap: var(--space-2); }

.split-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
}

/* 100원을 더 내는 사람 — 카운터에서 실랑이가 없게 미리 눈에 띄게 둔다. */
.split-row.is-extra {
  color: var(--fg-accent);
  font-weight: var(--weight-bold);
  outline: var(--border-width) solid var(--color-brand);
}

.split-invalid {
  margin: 0;
  padding: var(--space-4);
  color: var(--fg-accent);
  font-weight: var(--weight-bold);
  text-align: center;
}

.split-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.split-actions .btn { flex: 1; }

/* 주문 전송 실패 안내 — 손님 폰에서 서버에 못 닿았을 때. (screens/08-payment.js) */
.send-failed {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-alert-text) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-alert-text) 40%, var(--color-border));
  color: var(--color-alert-text);   /* 테마별 경고 글자 — 크리스마스는 금색 (tokens.css) */
  font-weight: var(--weight-bold);
  text-align: center;
  line-height: 1.4;
}
.send-failed-code { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .8; word-break: break-all; }

/* 분할 결제 — 얼마를 쓰고 얼마가 남는지가 한눈에 들어와야 한다. */
.method-combo-cell { grid-column: 1 / -1; }
.method-combo { width: 100%; }

.method-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--fg-weak);
}

/* 분할 결제에서 수단을 고르는 칩들 — 결제 수단 카드보다 작고 촘촘하게. */
.pay-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pay-chip {
  flex: 1 1 auto;
  min-width: 6em;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.pay-chip.is-on {
  color: var(--fg-accent);
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
}

.pay-chip:disabled { opacity: 0.35; cursor: default; }

.combo-lines { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }

.combo-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
}

.combo-line.is-first strong { color: var(--fg-accent); }
.combo-line.is-rest strong { font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* 남는 돈이 없으면 둘째 줄은 조용히 둔다 — 0원을 크게 띄울 이유가 없다. */
.combo-line.is-none { opacity: 0.45; }

.keypad-combo { margin-bottom: var(--space-3); }

/*
 * 키패드와 '남은 금액을 낼 수단'을 나란히. (매장 요청)
 *
 * 세로로 쌓으면 패드 세로 화면에서 둘째 수단이 접혀 보이지 않는다.
 * 폭이 되는 기기(패드·키오스크)에서는 좌우로 갈라 한눈에 들어오게 한다.
 * 손 안에 드는 휴대폰에서는 좌우로 갈라 봐야 둘 다 좁아지니 그대로 쌓는다.
 */
.split-pay-main { display: grid; gap: var(--space-4); }

@media (min-width: 620px) {
  .split-pay-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* 금액을 넣기 전에도 자리를 지켜 둔다 — 넣는 순간 화면이 덜컹이지 않게. */
.split-pay-next { min-height: var(--control-lg); }

.split-wait {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  color: var(--fg-weak);
  text-align: center;
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* 나란히 놓이면 칩이 좁아진다. 두 줄로 흐르게 두고 최소 폭만 지킨다. */
.split-pay-next .pay-pick { margin-bottom: 0; }

/*
 * 마지막 확인 — 무엇을 얼마에 시키는지 보고 손님이 직접 보낸다. (매장 요청)
 * 잘못 눌러 주방으로 나가는 일이 없게 화면을 덮는다.
 */
.review-dialog { width: min(560px, 96vw); }

.review-items {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  max-height: 40vh;
  overflow-y: auto;
}

.review-items li {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* 사이드·음료·곁들이는 피자보다 조용하게 */
.review-items li.is-extra {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--fg-weak);
}

.review-pay {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-md);
}

.review-row strong { text-align: right; }

.review-total { font-size: var(--text-2xl); font-weight: var(--weight-bold); }

/* 이 버튼을 눌러야 주방으로 나간다. 되돌릴 수 없으니 크고 또렷하게. */
.btn-send { flex: 2; font-size: var(--text-lg); }

/*
 * 한 판 / 반반 — 먼저 고르고, 고른 것은 맨 위에 접어 둔다. (매장 요청)
 */
.mode-bar {
  position: sticky;
  /* 헤더(진행 표시·혜택 띠) 아래에 선다. 높이는 shell.js 가 알려 준다. */
  top: var(--header-h, 0px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
  background: var(--color-bg, var(--color-surface));
}

.mode-bar-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  background: var(--color-selected-bg);
  border: var(--border-width-strong) solid var(--color-selected-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.mode-bar-edit { color: var(--fg-weak); font-size: var(--text-sm); }

/* 혜택이 정한 크기는 바꿀 수 없다 — 누를 수 없다는 것이 보이게 둔다. */
.mode-bar-btn.is-fixed {
  cursor: default;
  opacity: 1;
  background: var(--color-surface);
  border-style: dashed;
}

/* 고른 것이 셋(한판·크기·크러스트)까지 쌓인다. 좁으면 가로로 밀어 본다. */
.mode-bar-chips {
  display: flex;
  gap: var(--space-2);
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.mode-bar-chips::-webkit-scrollbar { display: none; }
.mode-bar-chips .mode-bar-btn { margin-right: 0; flex: none; }

/* 짧은 이름은 넓은 화면에서 숨겨 둔다. */
.btn-sides-short { display: none; }

/*
 * 좁은 휴대폰 — 칩 셋(한판·크기·크러스트)과 초록 버튼이 한 줄에 안 들어간다.
 *
 * 390px 폭에서 재보니 칩 영역이 119px 잘려 나갔다. 마지막 칩('오리지널')이
 * 반만 보여서 초록 버튼에 글자가 깔린 것처럼 보였다. (매장 제보)
 * 글자와 여백을 줄여 셋이 다 들어오게 한다.
 */
@media (max-width: 480px) {
  .mode-bar { gap: var(--space-2); }
  .mode-bar-chips { gap: var(--space-1); }

  .mode-bar-chips .mode-bar-btn {
    gap: var(--space-1);
    /* 일본어·영어는 한국어보다 글자가 길다. 좌우를 더 깎아 셋이 들어오게 한다. */
    padding: var(--space-2);
    font-size: var(--text-md);
  }

  .btn-sides {
    flex: none;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-md);
    /* 두 줄로 접히면 바가 두꺼워져 목록이 밀린다. */
    white-space: nowrap;
  }

  .btn-sides-long { display: none; }
  .btn-sides-short { display: inline; }

  /*
   * 그래도 넘치면 오른쪽 끝을 흐리게 지워 '옆으로 더 있다'를 알린다.
   * 칼로 자른 듯 끊기면 손님은 밀어 볼 생각을 하지 않는다.
   */
  .mode-bar-chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  /*
   * 음료 카드 — 용량 칩 둘이 카드 안쪽 폭을 넘었다. (개시 전 점검에서 실측)
   *
   * 390px 폭에서 칩 둘이 144px 를 요구하는데 카드 안쪽은 131px 뿐이라
   * 오른쪽 칩 모서리가 잘렸다. 칩 글자는 nowrap 이라(값이 '2,500 / 원' 으로
   * 쪼개지면 칩 높이가 어긋난다) 스스로 줄지 못한다. 여백을 깎아 자리를 낸다.
   */
  .drink-card { padding-left: var(--space-4); padding-right: var(--space-3); }
  .drink-card .card-sizes { gap: var(--space-1); }
  .drink-card .size-chip { min-width: 0; padding-left: 2px; padding-right: 2px; }
  .drink-card .size-name { font-size: var(--text-xs); }

  /*
   * 크러스트 모달 — 좁은 폰에서는 사진·글자를 줄여 한 줄에 다 들어오게 한다.
   * 사진·추가금이 크면 이름이 밀려 0폭까지 눌렸다. (매장 제보)
   * 아래쪽 일반 규칙보다 뒤에 오지 않으므로 선택자를 한 단계 더 좁힌다.
   */
  .crust-dialog .crust-pick { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .crust-dialog .crust-pick-img { width: calc(var(--control-lg) * 0.7); height: calc(var(--control-lg) * 0.6); }
  .crust-dialog .crust-pick-name { font-size: var(--text-md); }
  .crust-dialog .crust-pick-price { font-size: var(--text-sm); }
}

.mode-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mode-card.is-on { border-color: var(--color-selected-border); background: var(--color-selected-bg); }

/* 크러스트는 이름과 추가금을 한 줄로 — 값이 바로 읽혀야 고른다. */
/* 열을 minmax(0,1fr)로 잡아야 칸이 다이얼로그 폭에 갇힌다 — 기본 auto 열은
   내용(사진+이름+추가금) 크기로 늘어나 좁은 폰에서 모달 밖으로 삐져나갔다. (매장 제보) */
.crust-dialog .crust-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }

.crust-pick {
  display: flex;
  justify-content: space-between;
  /* 사진이 들어와 줄 높이가 생겼다. baseline 으로 두면 사진만 위로 붙는다. */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.crust-pick.is-on { border-color: var(--color-selected-border); background: var(--color-selected-bg); }

/* 크러스트 사진 — 토핑 화면(.option-img)과 같은 3:2 비율로 맞춘다. (매장 요청) */
.crust-pick-img {
  width: calc(var(--control-lg) * 1.2);
  height: var(--control-lg);
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* 사진이 없는 크러스트가 생겨도 줄이 무너지지 않게 자리만 비운다. */
.crust-pick-img.is-missing { visibility: hidden; }

/*
 * 이름이 남는 자리를 차지해 값이 오른쪽 끝에 붙는다.
 *
 * 한글은 자리가 좁으면 '오리지널'이 '오/리/지/널'로 세로로 쪼개졌다. (매장 제보)
 * nowrap 으로 한 줄에 고정하고, 남는 폭은 이름이 흡수(min-width:0)하게 해
 * 사진·추가금이 절대 잘리지 않게 한다. 정 좁으면 이름만 …로 줄인다.
 */
/* 이름 + (업앤업 크루아상) 안내줄을 세로로 묶는다. 남는 폭을 흡수한다. */
.crust-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }

.crust-pick-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crust-pick-price { flex: none; color: var(--fg-weak); white-space: nowrap; }

/* 아직 고르기 전에는 닫을 수 없다 — 배경을 눌러도 넘어가지 않는다. */
.mode-dialog { width: min(600px, 96vw); text-align: center; position: relative; }

/* 모달 오른쪽 위 X 닫기 (screens/02-pizza.js modeDialog·sizeDialog) */
.sc-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--control-min);
  height: var(--control-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--fg-weak);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.sc-close:hover { background: var(--color-surface-sunken); }
/* 제목이 길어도 X 밑으로 글자가 들어가지 않게 — 가운데 정렬을 지키려 좌우를 같이 띄운다. */
.mode-dialog .sc-dialog-title { padding-inline: calc(var(--control-min) + var(--space-2)); }

.mode-grid {
  display: grid;
  /*
   * minmax(0,1fr) 로 두 칸을 강제로 똑같이 나눈다. 그냥 1fr 은 암묵적 최소가
   * min-content 라, 영문처럼 글자가 길면('Half & half') 그 칸이 부풀어 합이
   * 화면을 넘어 오른쪽이 잘렸다. (매장 제보) 0 을 최소로 두면 칸 안에서 감싼다.
   */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mode-card {
  display: flex;
  flex-direction: column;
  /* 칸을 넘기지 않도록 — 긴 이름은 카드 안에서 줄바꿈된다. */
  min-width: 0;
  overflow-wrap: anywhere;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

/*
 * 피자 없이 사이드·음료만 — 한 판·반반 아래 한 줄로. (매장 요청)
 *
 * 두 카드가 나란한 격자 밖에서 폭을 꽉 채워, 피자를 고르는 것과 다른 길임을
 * 한눈에 알린다. 곁들이를 담는 화면과 같은 초록으로 통일한다.
 */
.mode-card-sides {
  /* 버튼은 기본이 '내용 폭'이라 두 칸을 가로지르지 못했다. 폭을 꽉 채운다. */
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-4);
  color: var(--fg-success);
  background: var(--color-accent-weak);
  border-color: var(--color-accent);
}

/* 아이콘과 이름을 한 줄로 가운데 묶는다. */
.mode-card-sides-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* 이름은 한 줄로 — 좁은 폰에서 '사이드·음 / 료만' 으로 끊기지 않게. */
.mode-card-sides .mode-card-name {
  font-size: var(--text-xl);
  white-space: nowrap;
}
.mode-card-sides .mode-card-note { color: var(--fg-success); }
.mode-card-ic { font-size: var(--text-2xl); line-height: 1; flex: none; }

.mode-card-name { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
/*
 * 크기 카드는 위에서부터 이름 · 몇 인분 · 인치 순이다. (매장 요청)
 * 고르는 기준이 되는 인분을 가운데 또렷하게 두고, 인치는 참고로 작게 남긴다.
 */
.mode-card-serves {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
  white-space: nowrap;
}

/* 반반 추가요금 — 눈에 띄게. (매장 요청) */
.mode-card-extra {
  display: block; margin-top: var(--space-1);
  font-size: var(--text-md); font-weight: var(--weight-bold);
  color: var(--color-discount);
}
.mode-card-note {
  font-size: var(--text-sm);
  color: var(--fg-weak);
  /*
   * 긴 설명('Two kinds, half and half')은 카드 안에서 접혀야 한다. 예전엔
   * nowrap 이라 좁은 폰·영문에서 오른쪽이 잘렸다. 크기 카드의 짧은 문구
   * ('9인치')는 어차피 접힐 일이 없다. (매장 제보)
   */
  white-space: normal;
}

/* 크기 카드는 셋이 나란히 서므로 칸이 좁다. 여백을 아껴 글자 자리를 낸다. */
.mode-grid-3 .mode-card { padding: var(--space-5) var(--space-2); }


.mode-card.is-off {
  background: var(--color-disabled-bg);
  border-color: transparent;
  box-shadow: none;
  color: var(--color-disabled-text);
  cursor: default;
}

/* ── 주문 확인: 기본 제공 곁들이 ─────────────────────── */
.included-dips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.included-dips-label { font-size: var(--text-xs); color: var(--fg-weak); }
.dip-chip {
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-weak);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

/*
 * 먹고가기에서 피클·핫소스가 목록에 없는 이유를 그 자리에 적는다.
 * 없어진 줄을 눈으로 찾다 직원을 부르는 일이 생기면 안 된다. (매장 요청)
 */
.sauce-unlimited-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-weak);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

/* 곁들이 무상 제공 안내 — 눈에 띄게. (screens/07-confirm.js) */
.dip-free-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--color-brand-weak);
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  line-height: 1.45;
}
.dip-free-badge {
  flex: none;
  padding: var(--space-1) var(--space-3);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.dip-free-items { font-weight: var(--weight-bold); color: var(--fg-accent); }
.dip-free-msg { color: var(--fg); }

/* 하단 장바구니 버튼 */
.btn-cart { margin-left: auto; }

/* 해피아워 등 사이즈에 붙는 프로모 금액 (칩 안, 사이즈명 아래) */
/* 용량 칩에 담은 개수 — 용량을 바꿔도 앞서 담아 둔 것이 보이게 한다. */
.chip-qty {
  position: absolute;
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-1) * -1);
  min-width: 1.4em;
  padding: 0 0.25em;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

/* ── 세트 제안 — 현재/추천/세트를 같은 모양으로 나란히 (매장 요청) ────── */

.suggest-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.sg-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* 라벨이 세로로 붙어 어느 줄인지 바로 읽힌다 */
.sg-label {
  flex: none;
  align-self: start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--fg-weak);
  background: var(--color-surface-sunken);
}

.sg-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* 지금 고른 피자 — 무엇에 대한 이야기인지 먼저 밝힌다 */
.sg-pick { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-weak); }

.sg-name { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.sg-note { font-size: var(--text-md); color: var(--fg); }
.sg-sub { font-size: var(--text-sm); color: var(--fg-weak); }

.sg-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
}

.sg-price { font-size: var(--text-2xl); font-weight: var(--weight-bold); }

/* 지금 받는 값 — 초록으로 '이미 적용됨'을 알린다 */
.sg-now { border-color: var(--color-accent); background: var(--color-accent-weak); }
.sg-now .sg-label { color: var(--fg-success); background: var(--color-surface); }

/* 추천 — 가장 눈에 띄게 */
.sg-offer { border-color: var(--color-brand); }
.sg-offer .sg-label { color: var(--color-text-on-brand); background: var(--color-brand); }
.sg-offer .sg-note { color: var(--fg-accent); font-weight: var(--weight-bold); }

.sg-set .sg-note { color: var(--fg-accent); font-weight: var(--weight-bold); }

/* 업앤업을 물리고 싸게 받는 길. 금액 이야기라 금액 상자와 같은 주황으로. (매장 요청) */
.sg-cheap { border-color: var(--color-price-line); }
.sg-cheap .sg-label { color: var(--color-price-text); background: var(--color-price-box); }
.sg-cheap .sg-note { color: var(--color-price-text); font-weight: var(--weight-bold); }

/* 사이즈 변경 확인은 그 줄 아래에 펼친다 */
.sg-row .size-prompt { grid-column: 1 / -1; margin-top: var(--space-3); }


/* 좁은 화면(모바일)에서는 값과 버튼을 아래로 내린다 */
@media (max-width: 560px) {
  .sg-row { grid-template-columns: auto 1fr; }
  .sg-right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /*
     * 값·버튼을 한 줄에 두는데, 일본어 버튼('アップグレードする')은 길어서
     * 그대로 두면 카드 밖으로 잘렸다. (매장 제보) 버튼이 남는 폭에 맞춰
     * 줄바꿈되게 풀어 준다. 금액은 제 크기를 지킨다.
     */
    white-space: normal;
  }
  .sg-right .sg-price { flex: none; }
  .sg-right .btn {
    flex: 1;
    min-width: 0;
    white-space: normal;
    padding-inline: var(--space-3);
  }
}

/* 사진을 눌렀는데 사이즈를 안 골랐을 때 — 카드 위에 잠깐 띄우는 안내. (매장 확인) */
.card-ask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: rgb(0 0 0 / 78%);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}

.card.is-asking { border-color: var(--color-brand); }

/* 이미 붙어 있는 혜택 카드 — 제안 카드와 구분되게 초록 테두리. */
.offer-applied { border-color: var(--color-accent); background: var(--color-accent-weak); }

/* 해피아워 배지 — 카드 우측 상단. 신메뉴 배지(좌측 상단)와 나란히 놓인다. */
.card-deal {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-brand);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* ── 매장 기기 PIN 잠금 ───────────────────────────────── */

.lock-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-surface-sunken);
}

.lock-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: min(440px, 92vw);
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.lock-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.lock-hint { font-size: var(--text-base); color: var(--fg-weak); }
.lock-dots.is-error ~ * , .lock-dots.is-error { }

.lock-dots { display: flex; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.lock-dot {
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  border-radius: 50%;
  border: var(--border-width-strong) solid var(--color-border);
}
.lock-dot.is-filled { background: var(--color-brand); border-color: var(--color-brand); }
.lock-dots.is-error .lock-dot { border-color: var(--color-danger, #c0392b); }

.lock-keypad { width: 100%; max-width: 320px; }
/* '확인' — PIN 자릿수를 화면이 모르므로(서버가 확인) 다 넣고 누른다. */
.lock-keypad .key-ok { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-on-brand); font-size: var(--text-md); }
.lock-keypad .key-ok:disabled { opacity: 0.45; }
.lock-store { font-size: var(--text-sm); color: var(--fg-weak); margin-top: var(--space-2); }

/*
 * 자는 곰돌이 — 영업 전·후 안내 (매장 요청)
 *
 * 움직이는 것은 transform 과 opacity 뿐이다. 키오스크가 낡아서
 * 레이아웃을 다시 잡게 만드는 애니메이션은 넣지 않는다.
 */
.idle-bear {
  --bear-fur: #c99a6b;
  --bear-fur-light: #ecd2b0;
  --bear-line: #4a3526;
  width: min(300px, 62%);
  margin: 0 auto;
}

.bear-svg { display: block; width: 100%; height: auto; overflow: visible; }

.bear-fur { fill: var(--bear-fur); }
.bear-fur-light { fill: var(--bear-fur-light); }
.bear-nose { fill: var(--bear-line); }
.bear-shadow { fill: rgba(0, 0, 0, 0.06); }
.bear-blanket { fill: var(--color-brand); }

.bear-blanket-fold {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3;
  stroke-linecap: round;
}

/* 감은 눈 — 곡선 하나면 자는 얼굴이 된다 */
.bear-eye {
  fill: none;
  stroke: var(--bear-line);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.bear-z {
  fill: var(--color-text-weak);
  font-size: 30px;
  font-weight: var(--weight-bold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bear-z 3s ease-out infinite;
}

.bear-z2 { font-size: 24px; animation-delay: 0.45s; }
.bear-z3 { font-size: 19px; animation-delay: 0.9s; }

/* 숨을 쉬듯 몸이 천천히 부푼다. 바닥에 닿은 쪽은 그대로 두려고 아래를 축으로 잡는다. */
.bear-breathe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bear-breathe 4.5s ease-in-out infinite;
}

/* 머리는 몸보다 조금 늦게, 조금만 움직인다 */
.bear-head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bear-breathe-head 4.5s ease-in-out infinite;
}

@keyframes bear-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.045); }
}

@keyframes bear-breathe-head {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes bear-z {
  0% { opacity: 0; transform: translateY(8px) scale(0.85); }
  25% { opacity: 1; transform: translateY(0) scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px) scale(1.05); }
}

/* 움직임을 줄여 달라고 한 기기에서는 멈춘 그림으로 둔다. */
@media (prefers-reduced-motion: reduce) {
  .bear-breathe, .bear-head, .bear-z { animation: none; }
  .bear-z { opacity: 0.75; }
}

/*
 * 결제 화면 — 번호 기억 동의와 개인정보 고지 (개인정보처리방침 7항)
 *
 * 주문을 막지 않는 자리에 둔다. 손님이 보려 하면 보이고, 지나치면 지나쳐도
 * 되는 크기다 — 필수 정보 고지는 동의를 받는 자리가 아니다.
 */
.remember-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.remember-check input {
  flex: none;
  /* 손가락으로 누르는 자리다. 기본 크기로는 빗나간다. */
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  accent-color: var(--color-brand);
}
.remember-text { display: flex; flex-direction: column; gap: 2px; }
.remember-label { font-weight: var(--weight-medium); }
.remember-note { font-size: var(--text-xs); color: var(--fg-weak); }

.privacy-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-weak);
}
.privacy-link { color: var(--fg-accent); text-decoration: underline; }

/*
 * 개인정보처리방침 창 — 결제 화면을 덮는다. (screens/privacy-sheet.js)
 *
 * 새 탭으로 열면 주문이 메모리에서 사라지고, 매장 키오스크는 키오스크 모드라
 * 탭을 닫지도 못한다. 덮고, 닫으면 제자리로 돌아온다.
 */
.privacy-dialog {
  display: flex;
  flex-direction: column;
  /* 글이 길다. 화면을 거의 다 쓰되 가장자리는 남겨 덮개를 누를 자리를 둔다. */
  width: min(720px, 96vw);
  height: min(860px, 88vh);
  padding: 0;
  overflow: hidden;
}

.privacy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.privacy-head .sc-dialog-title { margin: 0; }

.privacy-close {
  flex: none;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--fg);
  background: var(--color-surface-sunken);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.privacy-frame {
  flex: 1;
  width: 100%;
  border: 0;
}
/* 방침 본문을 창 안에서 위아래로 넘겨 읽는다 */
.privacy-body { overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--color-surface); }
.privacy-loading { padding: var(--space-6); text-align: center; }

/* 고지 줄의 '개인정보처리방침' — 링크처럼 보이는 버튼이다. */
button.privacy-link {
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/*
 * 주문 완료 화면의 시각 두 줄 — 언제 주문했고 몇 시에 나오는지. (매장 요청)
 *
 * 나오는 시각을 조금 더 크게 둔다. 손님이 이 화면에서 가장 알고 싶은 것이
 * 그것이고, 시계를 보고 다른 일을 하다 돌아온다.
 */
.ticket-time {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-1) 0;
}
.ticket-time-label { font-size: var(--text-sm); color: var(--fg-weak); }
.ticket-time-value { font-size: var(--text-lg); }
.ticket-time-ready .ticket-time-value {
  font-size: var(--text-xl);
  color: var(--fg-accent);
}
/* 조리 소요 예정 — '얼마나 걸리는지'를 크게. (매장 요청) */
.ticket-prep { display: flex; justify-content: center; width: 100%; padding: var(--space-2) 0 0; }
.ticket-prep-value {
  font-size: calc(var(--text-3xl) * 1.1); font-weight: var(--weight-bold);
  color: var(--fg-accent);
}

/*
 * 주문 진행 단계 — 접수됨 · 조리중 · 준비완료 (rules/order-progress.js)
 *
 * 포장 손님은 가게 밖에서 이 화면을 본다. 멀리서도 '지금 어디쯤'이 한눈에
 * 들어와야 하므로 점과 선으로 그린다. 지난 단계는 채우고, 지금은 키운다.
 */
/* 이름이 헤더의 .progress 와 겹쳐 상단 바를 24rem로 눌렀었다 → .progress-steps 로 분리. */
.progress-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* 부모가 가운데 정렬이라 폭을 주지 않으면 글자만큼만 줄어든다. */
  width: 100%;
  max-width: 24rem;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.progress-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-weak);
}
/* 단계 사이를 잇는 선. 첫 칸 왼쪽에는 긋지 않는다. */
.progress-step::before {
  content: '';
  position: absolute;
  top: 9px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--color-border);
}
.progress-step:first-child::before { display: none; }

.progress-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  z-index: 1;
}
/* '준비완료'가 두 줄로 쪼개지면 점과 글자가 어긋나 읽기 어렵다. */
.progress-name { font-size: var(--text-sm); white-space: nowrap; }

.progress-step.is-past { color: var(--fg); }
.progress-step.is-past .progress-dot,
.progress-step.is-now .progress-dot {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.progress-step.is-past::before,
.progress-step.is-now::before { background: var(--color-brand); }

.progress-step.is-now {
  color: var(--fg-accent);
  font-weight: var(--weight-bold);
}
.progress-step.is-now .progress-dot { transform: scale(1.3); }

/*
 * 손님 휴대폰의 주문 완료 화면 — 한 화면에 담는다. (매장 요청)
 *
 * 카운터에서 번호를 보여줄 때마다 두 번씩 쓸어 올려야 했다. 번호를 보여주는
 * 것이 이 화면의 일인데, 그 번호가 화면 밖에 있으면 화면이 제 일을 못 한다.
 *
 * 글자 크기는 한 군데도 줄이지 않았다. 주문번호와 금액은 카운터 건너편에서도
 * 읽혀야 한다 — 자기가 얼마 주문했는지 모르는 채로 오는 손님이 있다.
 * 줄인 것은 사이 여백뿐이다.
 *
 * 매장 키오스크·패드는 화면이 크고 손님이 눈앞에 서 있으므로 그대로 둔다.
 */
[data-platform="mobile"] .payment-done {
  gap: var(--space-1);
  padding-top: var(--space-2);
}
[data-platform="mobile"] .done-title { margin-bottom: var(--space-2); }
[data-platform="mobile"] .progress { margin-bottom: var(--space-2); }
/*
 * 모바일에선 상단 바에 언어 넉 자(한국어·English·日本語·中文)가 안 들어가
 * 오른쪽 끝(中文)이 화면 밖으로 잘렸다. (매장 제보)
 * 진행 정도는 '1/6' 칩이 이미 알려주므로 중복인 막대를 감추고,
 * 언어 버튼 여백을 조금 깎아 넉 자가 모두 보이게 한다.
 */
/*
 * 손님 휴대폰(고객 URL '/')은 창 너비와 무관하게 platform=mobile 로 뜬다.
 * 그래서 폭 미디어쿼리(max-width) 대신 플랫폼으로 걸어야, 브라우저 창이
 * 480px 보다 넓게 열려 있어도 아래 보정이 적용된다. (매장 제보 — 넓은 창에서 잘림)
 *
 * 상단 진행바: 좁을 때 언어 4개(中文)가 잘렸다 → 진행은 '1/6' 칩이 알리므로
 * 중복인 막대를 감추고, 언어 버튼 여백을 깎아 넉 자가 다 들어오게 한다.
 */
[data-platform="mobile"] .progress > .progress-bar { display: none; }
[data-platform="mobile"] .progress > .lang { gap: 0; padding: 2px; }
[data-platform="mobile"] .progress > .lang .lang-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

/*
 * 혜택 띠도 오른쪽이 잘렸다('업앤업 — 라지…'). (매장 제보)
 * 칩은 flex:none 이라 내용 너비 그대로 늘어나 화면 밖으로 밀린다 —
 * 모바일에선 칸을 줄이고 글자를 감싸, 넘치면 아래로 접히게 한다.
 */
[data-platform="mobile"] .benefit-band .benefit { flex: 0 1 auto; min-width: 0; white-space: normal; }
/* 가장 큰 덩어리다 — 안쪽 줄 사이가 아홉 번 벌어진다. */
[data-platform="mobile"] .ticket {
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
}
[data-platform="mobile"] .ticket-divider { margin: var(--space-2) 0 0; }
[data-platform="mobile"] .ticket-method { margin-top: var(--space-1); }
[data-platform="mobile"] .done-guide { margin-top: var(--space-2); }
/* <p> 의 기본 위아래 여백이 그대로 남아 있었다. */
[data-platform="mobile"] .payment-done .receipt-desc { margin: 0; }
[data-platform="mobile"] .payment-done .actions { margin-top: var(--space-2); }

/*
 * 홈 화면에 추가 — 주문 완료 화면 아래 한 줄. (app/install.js)
 *
 * 한 줄로 접어 둔다. 주문을 마친 손님이 가장 먼저 봐야 하는 것은 주문번호이고,
 * 이것은 그 아래에서 기다리면 된다. 화면을 다시 길게 만들지 않는다.
 */
.install-wrap { width: 100%; }

/*
 * 파파보틀 와인 구경가기 (screens/08-payment.js wineBox) — 파파보틀 사이트의 초록·빨강·크림을 그대로 쓴다.
 * 매장 테마(크리스마스 등)를 따라가지 않는다 — 다른 가게의 간판이다.
 */
.wine-card {
  --pb-green: #183B31; --pb-red: #C43124; --pb-cream: #F4EFE6;
  position: relative; width: 100%; margin-top: var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
  border-radius: var(--radius-lg, 16px); overflow: hidden;
  background: var(--pb-green); color: var(--pb-cream); text-decoration: none; text-align: left;
}
.wine-card-photo { width: 96px; height: 96px; object-fit: cover; flex: none; }
.wine-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: var(--space-3) 0; min-width: 0; }
.wine-card-tag {
  background: var(--pb-red); color: #fff; font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: .02em; border-radius: var(--radius-pill); padding: 2px 8px;
}
.wine-card-title { font-size: 17px; line-height: 1.3; }
.wine-card-sub { font-size: var(--text-sm); opacity: .85; }
.wine-card-go { margin-left: auto; padding-right: var(--space-4); font-size: 24px; opacity: .8; }
/* 19 표시 — 술 홍보 */
.wine-card-age {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box;
  background: #fff; color: var(--pb-red); border: 2px solid var(--pb-red);
  font-size: 11px; font-weight: 800; line-height: 1;
}

.install-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-weak);
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.install-icon {
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
}

.install-guide {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-weak);
  line-height: 1.6;
}

/*
 * 주문 무르기 — 잘못 눌렀을 때의 30초. (rules/order-cancel.js)
 *
 * 눈에 띄되 앞서지 않는다. 이 화면의 주인공은 주문번호이고, 이것은 잘못
 * 눌렀다는 것을 아는 손님만 찾으면 된다. 남은 시간은 굵게 — 누를지 말지를
 * 그 숫자를 보고 정한다.
 */
.cancel-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-weak);
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.cancel-left { color: var(--fg-accent); }

.cancel-ask {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.cancel-ask-text { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.cancel-ask-row { display: flex; gap: var(--space-3); justify-content: center; }
/* 무르는 쪽을 앞세우지 않는다 — 되돌릴 수 없는 일이다. */
.cancel-yes { color: var(--fg-weak); }

.cancel-failed {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-accent);
}

/*
 * 마감 임박 카운트다운 — 초기 화면 '주문하기' 위. (screens/00-idle.js)
 *
 * 곧 닫힌다는 것을 서두를 만큼은 눈에 띄게, 그러나 겁줄 만큼은 아니게.
 * 프로모션 이미지 위에도 올라가므로 어두운 바탕에 흰 글씨로 또렷하게 둔다.
 */
.idle-closing {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 auto var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
}
.idle-closing-label { font-size: var(--text-md); font-weight: var(--weight-medium); }
.idle-closing-time {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;   /* 숫자 폭을 고정해 카운트다운이 덜컹이지 않게 */
}

/*
 * 손님용 주문 상세표 — A8 영수증(80mm) 인쇄. (app/receipt.js)
 *
 * 평소에는 화면에서 완전히 숨긴다. 인쇄할 때만 이 영역만 남기고 나머지를
 * 지운다. 크롬 --kiosk-printing 이 대화상자 없이 기본 프린터로 뽑는다.
 */
#receipt { display: none; }

@media print {
  /* 화면의 모든 것을 감추고 영수증만 남긴다. */
  body * { visibility: hidden; }
  #receipt, #receipt * { visibility: visible; }
  #receipt {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 72mm;               /* 80mm 용지의 인쇄 가능 폭 */
  }
  /* 영수증 프린터는 페이지 여백을 스스로 잡는다 — 브라우저 여백은 0 으로. */
  @page { margin: 0; }
}

/*
 * 영수증 본문. 화면 토큰을 쓰지 않는다 — 종이는 흑백이고, 프린터가 자기
 * 글꼴로 찍으므로 색·그림자·둥근 모서리가 의미 없다. 크게, 또렷하게.
 */
.rc {
  font-family: -apple-system, 'Malgun Gothic', sans-serif;
  color: #000;
  font-size: 12pt;
  line-height: 1.5;
  padding: 3mm 0;
}
.rc-store { text-align: center; font-size: 13pt; font-weight: 700; }
.rc-title { text-align: center; font-size: 12pt; margin-bottom: 2mm; }
.rc-rule { border-top: 1px dashed #000; margin: 2mm 0; }

.rc-no { text-align: center; margin: 2mm 0; }
.rc-no-label { display: block; font-size: 10pt; }
.rc-no-value { font-size: 26pt; font-weight: 700; letter-spacing: 1px; }

.rc-row { display: flex; justify-content: space-between; gap: 4mm; }
.rc-l { color: #000; }
.rc-r { text-align: right; font-weight: 700; }

.rc-item { margin: 1.5mm 0; font-weight: 700; }
.rc-item-side { font-weight: 400; padding-left: 2mm; }

.rc-total {
  display: flex;
  justify-content: space-between;
  font-size: 15pt;
  font-weight: 700;
  margin: 1mm 0;
}
.rc-foot { text-align: center; font-size: 10pt; margin-top: 2mm; }

/* 1+1 이벤트 배너 — 눈에 띄어야 손님이 누른다. (screens/01-order-type.js) */
.shortcut-oneplus { border: 3px solid var(--color-shortcut-badge); }
.shortcut-oneplus .shortcut-title { color: var(--color-shortcut-badge); }
.shortcut-oneplus .shortcut-cta { background: var(--color-shortcut-badge); color: var(--color-shortcut-badge-fg); }

/* ── 1+1 이벤트 두 판 고르기 (screens/oneplus.js) ────── */
.oneplus {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-5) var(--space-5) 0;
  gap: var(--space-4);
}
.oneplus-head { text-align: center; }
.oneplus-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-accent); }
.oneplus-sub { margin: var(--space-1) 0 0; color: var(--fg-weak); }

/* 위: 담긴 두 판 */
/*
 * 담긴 두 판 네비게이터 — 스크롤해도 늘 보이게 위에 고정한다. (매장 요청)
 * body(윈도우)가 스크롤되므로 sticky top:0 이면 화면 맨 위에 붙는다. 아래로
 * 지나가는 그리드 카드를 가리도록 body 와 같은 색 배경을 깐다.
 */
.oneplus-slots {
  --op-disc: min(9.5rem, 34vw);   /* 좁은 휴대폰에서 두 타원 + '+' 가 한 줄에 들어오게 */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  justify-content: center;
  background: var(--color-bar-bg);
  padding: var(--space-2) 0 var(--space-3);
}
/* '+' 는 타원 사진의 세로 한가운데에 오도록 사진과 같은 높이 상자에 담는다. */
.oneplus-plus {
  align-self: flex-start;
  display: flex;
  align-items: center;
  height: calc(var(--op-disc) * 400 / 634);
  font-size: var(--text-2xl);
  color: var(--fg-weak);
}
.oneplus-slot {
  position: relative;
  width: var(--op-disc);   /* 캡션이 타원 폭 안에서 줄바꿈되도록 폭을 고정 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
/*
 * 담긴 판 — 반반 네비게이터(pizza-preview)와 같은 방식. 메뉴 사진(634x400)은
 * 피자가 비스듬히 찍혀 타원으로 보이므로, 원형 틀에 끼우면 테두리가 어긋난다.
 * 사진 비율을 그대로 써서 피자 모양대로 보이게 한다. (매장 요청)
 */
.oneplus-disc {
  position: relative;
  width: var(--op-disc);
  aspect-ratio: var(--preview-ratio);
}
.oneplus-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 빈 칸 — 사진 속 피자와 같은 크기·위치의 타원(69% x 87%)에 번호를 넣는다. */
.oneplus-slot-no {
  position: absolute; top: 51%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 69%; height: 87%;
  border-radius: var(--radius-pill);
  background: var(--color-disabled-bg);
  font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-disabled-text);
}
.oneplus-slot-hint { font-size: var(--text-sm); color: var(--fg-weak); text-align: center; }
.oneplus-slot-name { font-weight: var(--weight-bold); text-align: center; }
.oneplus-slot-crust { font-size: var(--text-sm); color: var(--fg-weak); text-align: center; }
.oneplus-slot-x {
  position: absolute; top: 2px; right: 2px;
  z-index: 1;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 0; background: var(--color-surface-sunken);
  font-size: var(--text-lg); cursor: pointer;
}

/* 아래: 피자 고르기 — 일반 피자 화면과 같은 .card 그리드를 쓴다(screens/oneplus.js). */
.oneplus-grid {
  padding-bottom: var(--space-3);
}
/* 이미지를 못 받으면 담긴 칸 썸네일은 자리를 비운다. (image() onerror)
   그리드 카드 이미지는 .card-img.is-missing 규칙이 처리한다. */
.oneplus-slot-img.is-missing { visibility: hidden; }

/* 아래 고정 바 — 페이지와 같은 색으로 깔아 흰 카드처럼 떠 보이지 않게 한다.
   불투명이라 그리드를 스크롤해도 지나가는 카드를 가린다. (매장 제보) */
.oneplus-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-bar-bg);
}
/* 좁은 휴대폰에서 버튼이 화면 밖으로 넘치지 않게 — 큰 좌우 패딩 대신 폭을 나눠 갖는다. */
.oneplus-bar .btn { min-width: 0; }
.oneplus-bar .btn-ghost { flex: 1 1 0; }
.oneplus-bar .btn-primary { flex: 2 1 0; padding-left: var(--space-4); padding-right: var(--space-4); }
.oneplus-count { flex: 1; text-align: right; color: var(--fg-weak); font-weight: var(--weight-medium); }


/* ── 전체 메뉴 보기 (screens/menu-browse.js) ─────────── */
/* 아이들 화면의 보조 버튼 — '주문하기' 아래, 테두리만. */
.idle-browse {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6);
  min-height: var(--control-lg);
  background: transparent;
  color: var(--fg-accent);
  border: var(--border-width-strong) solid var(--color-brand);
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
/* 프로모션 이미지 위(스크림)에서는 밝게. */
.idle-overlay .idle-browse {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
}

.mb {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-5) var(--gutter) 0;
  gap: var(--space-4);
}
.mb-head { text-align: center; }
.mb-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-accent); }

.mb-section { margin: 0; }
.mb-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
/* 메뉴판이니 작은 카드로 여러 개 한눈에. (매장 요청)
   min(8rem,45%) 로 어떤 폭에서도 최소 2열, 넓은 화면(매장 키오스크)은 여러 열. */
.mb-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 45%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.mb-card { padding: var(--space-3); }
.mb-card .card-name { font-size: var(--text-md); word-break: keep-all; }

/* 카드는 일반 피자 카드(.card)를 그대로 쓰되, 값 한 줄을 아래에 붙인다. */
.mb-card { gap: var(--space-1); }
.mb-price {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
}
/* 음료 카드는 사진이 없어 이름·값만 — 높이를 맞춰 목록이 들쭉날쭉하지 않게. */
.mb-card-drink { justify-content: center; min-height: calc(var(--control-lg) * 1.6); }

/* 하단 고정 바 — 페이지와 같은 색으로 자연스럽게. */
.mb-bar {
  position: sticky; bottom: 0;
  margin-top: auto;
  display: flex; justify-content: center;
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-bar-bg);
}
.mb-bar .btn { width: min(calc(var(--card-min) * 1.6), 90%); }

/* ── 상세(크게 보기) ── */
.mb-detail {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
}
.mb-detail-media { width: min(360px, 80%); }
.mb-detail-img {
  width: 100%;
  aspect-ratio: var(--preview-ratio);
  object-fit: contain;
}
.mb-detail-img.is-missing { visibility: hidden; }
.mb-detail-name { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.mb-detail-desc {
  margin: 0;
  max-width: 32rem;
  color: var(--fg-weak);
  line-height: var(--leading-normal);
}
.mb-detail-prices {
  display: flex; flex-direction: column; gap: var(--space-1);
  width: min(360px, 80%);
  margin: var(--space-2) 0;
}
.mb-detail-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.mb-detail-price-row:only-child { justify-content: center; }
.mb-detail-size { font-size: var(--text-md); color: var(--fg-weak); white-space: nowrap; }
.mb-detail-won { font-size: var(--text-lg); font-weight: var(--weight-bold); white-space: nowrap; }

.mb-detail-bar {
  position: sticky; bottom: 0;
  margin-top: auto;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-bar-bg);
}
.mb-detail-bar .btn { min-width: 0; }
.mb-detail-bar .btn-ghost { flex: 1 1 0; }
.mb-detail-bar .btn-primary { flex: 2 1 0; padding-left: var(--space-4); padding-right: var(--space-4); }

/* 아이들 화면 계절/날씨 효과 — 낙엽·개나리·눈·비. CSS transform 만, 옛 PC에서도 가볍게 (screens/00-idle.js) */
/*
 * 효과는 내용 뒤(z-index:0)에 깐다. 정적 내용(로고·버튼 등)만 z-index:1 로 올려
 * 그 위로 보이게 하되, 이미 자리를 잡은 절대위치 요소(언어 버튼 우측 상단·버전)는
 * 건드리지 않는다 — 여기에 position 을 강제하면 그 자리들이 흐트러진다.
 */
.fx-layer {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.idle > *:not(.fx-layer):not(.idle-lang):not(.idle-version):not(.sc-layer) {   /* 처음 화면 [주차 등록] 창은 화면 위에 떠야 한다 */
  position: relative;
  z-index: 1;
}
.fx-p {
  position: absolute; top: 0; display: block;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fx-p svg { width: 100%; height: 100%; display: block; }

/* 낙엽·개나리·눈 — 떨어지며 흔들리고 돈다 */
.fx-maple .fx-p, .fx-forsythia .fx-p, .fx-snow .fx-p { animation-name: fx-fall; }
.fx-maple .fx-p, .fx-forsythia .fx-p { opacity: 0.92; }
@keyframes fx-fall {
  from { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  to   { transform: translate3d(var(--drift, 0px), 112vh, 0) rotate(var(--spin, 360deg)); }
}

/* 함박눈 — 연한 파랑 동그라미 (흰 배경에서도 보이게) */
.fx-p.fx-snow {
  border-radius: 50%;
  background: #bcd6f2;
  box-shadow: inset 0 0 0 1px rgba(120, 160, 205, 0.35);
}

/* 비 — 얇은 물줄기가 빠르게 수직으로 내린다 */
.fx-p.fx-rain {
  width: 2px; border-radius: 1px;
  background: linear-gradient(to bottom, rgba(120, 160, 205, 0), rgba(120, 160, 205, 0.7));
  animation-name: fx-rainfall;
}
@keyframes fx-rainfall {
  from { transform: translate3d(0, -14vh, 0); }
  to   { transform: translate3d(var(--drift, 6px), 114vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-p { animation: none !important; opacity: 0; }
}

/* ── dears 판교 입주민 인증 게이트 (screens/deus-gate.js) ───────────── */
.deus-gate {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: var(--color-surface);
}
.deus-head { max-width: 640px; }
.deus-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--fg-accent);
}
.deus-guide {
  margin: var(--space-2) 0 0;
  color: var(--fg-weak);
  font-size: var(--text-lg);
}
.deus-cam-box {
  position: relative;
  width: min(86vw, 560px);
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border: 3px solid transparent;
  transition: border-color .2s ease;
}
.deus-cam-box.is-matched { border-color: #48B972; }
.deus-cam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deus-cam-empty { width: 100%; height: 100%; background: #111; }
/* 카드를 놓는 자리 안내 틀 — 카드 비율(약 1.58:1) */
.deus-frame {
  position: absolute;
  left: 50%; top: 50%;
  width: 66%;
  aspect-ratio: 1.58 / 1;
  transform: translate(-50%, -50%);
  border: 3px dashed rgba(255,255,255,0.85);
  border-radius: 14px;
  pointer-events: none;
}
.deus-status {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  max-width: 90%;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.deus-status.is-ok { background: #48B972; }
/* 실물카드 주의 — 눈에 확 띄게(주의 앰버 + 경고 아이콘). (매장 요청) */
.deus-card-note {
  max-width: 600px;
  margin: 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: #FFF3CD;
  border: 2px solid #E0A800;
  color: #6B4E00;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}
.deus-card-note::before {
  content: "⚠️ ";
}
/* 결제화면에서는 맨 위에서 한 번 더 강조 */
.confirm-deus-note {
  margin: 0 0 var(--space-3);
  text-align: center;
}
.deus-manual { min-width: 260px; }
.deus-continue { min-width: 280px; }
/* ?debug 전용 — OCR 이 읽은 글자 표시 */
.deus-debug {
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: #222;
  color: #7CFC9B;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--text-sm);
  word-break: break-all;
  max-width: 90%;
}
/* 매장 기기(카메라 없음)는 카드 안내가 주인공 — 여백을 넉넉히 */
.deus-gate-nocam { gap: var(--space-5); }
.deus-gate-nocam .deus-card-note { font-size: var(--text-lg); }

/* 업앤업 도우 선택 — 제공 사이즈(패밀리) 표시. */
.mode-card-size { font-size: var(--text-sm); color: var(--fg-weak); margin-top: 2px; }

/* ── 좌석: 구역 먼저 고르기 (screens/07-seat.js) ─────────────────── */
.zone-cards {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.zone-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .15s ease, transform .05s ease;
}
.zone-card:active { transform: scale(.98); }
.zone-card:hover:not(:disabled) { border-color: var(--color-brand); }
.zone-card-icon { font-size: 44px; line-height: 1; }
.zone-card-name { font-size: var(--text-xl); font-weight: var(--weight-bold); text-align: center; }
.zone-card-free { font-size: var(--text-md); font-weight: var(--weight-bold); color: #2e9e5b; }
.zone-card-free.is-full { color: var(--fg-weak); }
.zone-card-hours { font-size: var(--text-sm); color: var(--fg-weak); }
.zone-card.is-full { opacity: .9; }
/*
 * 못 고르는 구역(마감·주말 운영 안 함) — 회색 카드로 음영. (매장 요청 2026-10-24)
 * 예전엔 카드 전체를 반투명(.5)으로 해 초록 '마감' 글씨가 바탕에 묻혀 읽히지 않았다(대비 1.8).
 * 막힌 항목 색(--color-disabled-*)으로 칠해 '못 고름'은 보이되 글은 읽히게 한다.
 */
.zone-card.is-closed {
  cursor: not-allowed;
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
}
:root .zone-card.is-closed :is(.zone-card-free, .zone-card-hours) { color: var(--color-disabled-text); }
.zone-card.is-closed .zone-card-icon { filter: grayscale(1); opacity: .5; }

/* 선택된 구역 헤더 (자리 그리드 위) */
.seat-current {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: 12px;
}
.seat-current-zone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-lg); font-weight: var(--weight-bold);
}
.seat-current-icon { font-size: 24px; }
.seat-current-change { font-size: var(--text-md); }

/* ── 혜택(주문 방법) 선택 — 좌석 뒤 (screens/01c-benefit.js) ─────────── */
.benefit-cards {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3);
}
.benefit-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-border); border-radius: 20px;
  background: var(--color-surface); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform .05s ease;
}
.benefit-card:active { transform: scale(.98); }
.benefit-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
/* 아이콘은 옅은 원판에 올려 카드가 '디자인된' 느낌이 나게 한다. */
.benefit-icon {
  font-size: 40px; line-height: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-sunken);
}
/* 아이콘과 글자(이름+설명) 분리 — 패드는 세로(가운데). 모바일은 아래에서 가로로 바꾼다. */
.benefit-text { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.benefit-name { font-size: var(--text-xl); font-weight: var(--weight-bold); text-align: center; word-break: keep-all; }
.benefit-desc { font-size: var(--text-sm); color: var(--fg-weak); text-align: center; line-height: 1.4; word-break: keep-all; }

/* ── 모바일: 큰 정사각 카드 대신 얇은 가로 직사각으로 공간을 아낀다. (매장 요청)
 *  아이콘을 앞(왼쪽)에, 이름·설명을 그 뒤에 이어 붙여 여러 카드가 한 화면에 들어오게. */
[data-platform="mobile"] .benefit-cards { grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-3); }
[data-platform="mobile"] .benefit-card {
  height: auto; flex-direction: row; align-items: center; text-align: left;
  gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: 16px;
}
[data-platform="mobile"] .benefit-icon { width: 48px; height: 48px; font-size: 24px; flex: 0 0 auto; }
[data-platform="mobile"] .benefit-text { align-items: flex-start; text-align: left; flex: 1 1 auto; min-width: 0; gap: 2px; }
[data-platform="mobile"] .benefit-name { font-size: var(--text-lg); text-align: left; }
[data-platform="mobile"] .benefit-desc { text-align: left; }

/* 첫 화면 바로가기 배너도 정사각 대신 얇은 가로 직사각 — 한 화면에 여러 개 보이게 */
[data-platform="mobile"] .shortcut-banners { grid-template-columns: 1fr; max-width: none; gap: 10px; margin-top: var(--space-4); }
[data-platform="mobile"] .shortcut {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 10px; row-gap: 6px;
  padding: 14px 14px 14px 18px; border-radius: 18px;
}
[data-platform="mobile"] .shortcut-body { display: contents; }
[data-platform="mobile"] .shortcut-body > * { grid-column: 1 / -1; }
[data-platform="mobile"] .shortcut-body > .shortcut-title { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 25px; }
[data-platform="mobile"] .shortcut-cta { grid-column: 2; grid-row: 1; height: 42px; padding: 0 16px; font-size: 16px; }
[data-platform="mobile"] .shortcut-arrow { font-size: 20px; }
[data-platform="mobile"] .shortcut-sub { font-size: 17px; }
[data-platform="mobile"] .shortcut-when { display: inline; margin: 0; font-size: 15px; }
[data-platform="mobile"] .shortcut-when::before { content: ' · '; }
[data-platform="mobile"] .shortcut-prices { flex-direction: row; gap: 6px; }
[data-platform="mobile"] .shortcut-price { flex: 1; justify-content: center; gap: 5px; padding: 5px 4px; font-size: 15px; }
[data-platform="mobile"] .shortcut-title.has-badge { flex-direction: row; gap: 4px 8px; }
[data-platform="mobile"] .shortcut-badge { font-size: 12px; }
[data-platform="mobile"] .shortcut-price { white-space: nowrap; }
@media (max-width: 380px) {
  [data-platform="mobile"] .shortcut-price { gap: 3px; padding-inline: 2px; font-size: 13px; }
}
/* 업앤업은 가장 눈에 띄게 */
.benefit-upup { border-color: var(--color-brand); background: #fff7f8; }
.benefit-upup .benefit-icon { background: var(--color-brand-weak); }
.benefit-upup .benefit-name { color: var(--fg-accent); }
.benefit-set.is-open { border-color: var(--color-brand); }

.benefit-sets { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.benefit-set-opt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border); border-radius: 14px;
  background: var(--color-surface); cursor: pointer; font-weight: var(--weight-bold);
}
.benefit-set-opt:hover { border-color: var(--color-brand); }
.benefit-set-price { color: var(--fg-accent); }

/* 세트 고르기 — 2인/3인/4인 금액·구성 (screens/01c-benefit.js) */
.set-choose-cards {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3);
}
.set-choose-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px solid var(--color-border); border-radius: 20px;
  background: var(--color-surface); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform .05s ease;
}
.set-choose-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
.set-choose-card:active { transform: scale(.98); }
.set-choose-name { font-size: var(--text-xl); font-weight: var(--weight-bold); word-break: keep-all; }
.set-choose-comp { font-size: var(--text-sm); color: var(--fg-weak); text-align: center; line-height: 1.4; }
.set-choose-price { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-accent); margin-top: var(--space-1); }
/* 세트 1인당 값(1/N) — 가격 바로 아래 작은 알약으로. (매장 요청) */
.set-per-person {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--fg);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

/* ── 세트 여러 개 담기 (screens/set-batch.js) ──────────────────────── */
.batch-screen { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-4); }
.batch-head { position: relative; text-align: center; }
.batch-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.batch-sub { margin: var(--space-1) 0 0; color: var(--fg-accent); font-weight: var(--weight-bold); }
.batch-qty { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) 0; }
.qty-btn { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-border);
  background: var(--color-surface); font-size: 32px; cursor: pointer; }
.qty-btn:disabled { opacity: .55; cursor: default; }
.qty-num { font-size: 56px; font-weight: var(--weight-bold); min-width: 90px; text-align: center; }
.qty-unit { font-size: var(--text-lg); color: var(--fg-weak); }
.batch-count { text-align: center; font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0; }
.batch-count[data-full="true"] { color: #2e9e5b; }
.batch-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.batch-item { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-3); border: 2px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.batch-item.is-on { border-color: var(--color-brand); }
.batch-img { width: 72px; height: 72px; object-fit: contain; }
.batch-item-name { font-size: var(--text-sm); font-weight: var(--weight-bold); text-align: center; word-break: keep-all; }
.batch-item-price { font-size: var(--text-xs); color: var(--fg-weak); }

/* 세트 배치 — 피자 칸(슬롯) 방식 + 반반 (screens/set-batch.js) */
/* 1+1 슬롯(.oneplus-slots)을 재사용하되, 세트는 칸이 여러 개라 작게·줄바꿈. */
.batch-slots {
  --op-disc: min(6.5rem, 24vw);
  position: static;          /* 칸이 많아 길어질 수 있어 고정 해제 */
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
}
.batch-slots .oneplus-slot-name { font-size: var(--text-sm); word-break: keep-all; }
.batch-body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
/* 한판/반반 토글 — 크게, 손이 바로 닿게. 반반은 '+추가요금'이 아랫줄에 붙어
 * 두 줄이 되므로, 두 칸을 같은 높이로 맞추고 세로 가운데 정렬한다. (매장 요청) */
.batch-mode-toggle { align-self: center; align-items: stretch; }
.batch-mode-toggle .seg-item {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-7); min-width: 7rem; line-height: 1.15;
}
.batch-mode-toggle .seg-item strong { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.seg-extra { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-discount); margin-top: 2px; }
.seg-item.is-on .seg-extra { color: inherit; }
.batch-pizza-grid {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3);
  grid-auto-rows: 1fr;               /* 모든 줄 높이를 같게 — 카드 크기 통일 (매장 요청) */
}
.batch-pizza-grid > li { display: flex; }   /* 카드가 칸 높이를 채우게 */
.batch-pizza-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-2);
  padding: var(--space-4); border: 2px solid var(--color-border); border-radius: 16px;
  background: var(--color-surface); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform .05s ease;
}
/* 피자 이미지 — 카드 폭에 꽉 차게 크게. 모두 같은 비율 상자로 통일. (매장 요청) */
.batch-pizza-card .batch-img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; flex: none;
}
/* 사이드·음료 사진은 흰 배경 제품컷이라 녹색 카드에서 흰 네모가 튄다 → 흰 둥근 타일에
 * 담아 깔끔하게, 모두 같은 크기 상자로 통일한다. (매장 요청) */
.batch-grid-food .batch-img {
  background: #fff; border-radius: 12px; padding: var(--space-3);
}
/* 이름은 1줄이든 2줄이든 같은 높이를 차지해 카드가 들쭉날쭉하지 않게 */
.batch-pizza-card .batch-item-name {
  font-size: var(--text-md); margin-top: auto;
  min-height: 2.6em; display: flex; align-items: center; justify-content: center;
}
.batch-pizza-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-raised); }
.batch-pizza-card:active { transform: scale(.98); }
/* 반반 첫 장 — 제자리에 음영으로 남긴다. 고른 것임을 테두리로 알린다. (매장 요청) */
.batch-pizza-card.is-off { cursor: default; box-shadow: none; }
.batch-pizza-card.is-off:hover { box-shadow: none; }
.batch-pizza-card.is-off:active { transform: none; }
.batch-pizza-card.is-off .batch-img { opacity: 0.45; }
.batch-pizza-card.is-first,
.batch-pizza-card.is-first:hover { border-color: var(--color-selected-border); }
.batch-pick-note { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fg-weak); }
.batch-chosen { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.batch-chosen-row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.batch-chosen-num { width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); }
.batch-chosen-name { font-weight: var(--weight-bold); }

/* ══ 하단 네비 바·버튼 배치·금액 한 줄 — 모든 테마 공통 (매장 요청) ═══════════════
 * 처음(왼쪽)·닫기(가운데)·이전(오른쪽), 흐름 화면 하단 바는 화면 맨 아래에 고정.
 * 예전에는 크리스마스 테마 구역에만 있어서 기본·봄 테마에서는 바가 고정되지 않았다.
 * 색은 토큰(--color-bar-bg·--fg·--color-nav-border)이 테마별로 정한다.
 *
 * ':root[data-platform]' — 앱이 언제나 세우는 표시(app/main.js). 옮기기 전
 * ':root[data-theme="xmas"]' 와 명시도가 같아서 결과가 그대로이고, 플랫폼 css
 * (platform/mobile.css 의 :root[data-platform='mobile'] …)가 예전처럼 덮을 수 있다.
 */
/* 전체 메뉴 카드 사진은 정사각, 값은 한 줄 */
:root[data-platform] .mb-card .card-img { aspect-ratio: 1 / 1; }
/* 값은 숫자가 끊기지 않게 낱말 단위로만 접는다 — 한 줄 고정이면 영어 'From 16,900 KRW' 가
 * 패드 카드 밖으로 삐져나왔다(화면 점검). */
:root[data-platform] .mb-price { white-space: normal; word-break: keep-all; }

/* 하단 바의 금액이 두 줄로 밀리던 부분 — 한 줄로, 글자 살짝 줄여서.
 * 하단 바 안에서만. (예전엔 모든 .price 에 걸려 결제 화면의 큰 '결제 금액'까지 작아졌다) */
:root[data-platform] .actions .price { flex-wrap: nowrap; }
:root[data-platform] .actions .price-pay { font-size: var(--text-md); }
:root[data-platform] .actions .price-list { font-size: var(--text-xs); }
/* 버튼이 늘면(피자 N판·영어·중국어) 바가 화면보다 넓어져 '다음'이 화면 밖으로 밀렸다(패드).
 * 금액·버튼이 폭을 나눠 줄어들고, 버튼 글자는 길면 두 줄로 접는다. (화면 점검) */
:root[data-platform] .actions > * { min-width: 0; }
:root[data-platform] .actions .btn { flex-shrink: 1; white-space: normal; word-break: keep-all; }
:root[data-platform] .actions .price { flex-shrink: 1; flex-wrap: wrap; row-gap: 0; }
:root[data-platform] .actions .price-list,
:root[data-platform] .actions .price-pay { white-space: nowrap; }

/* 하단 바. 주의: .actions 는 모달 안 버튼 줄에도 쓰인다 — 아래 모달 규칙이 되돌린다. */
:root[data-platform] .actions {
  position: sticky; bottom: 0; z-index: 10;
  justify-content: space-between; flex-wrap: nowrap; gap: var(--space-3);
  background: var(--color-bar-bg);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
/* 흐름 화면(.screen)의 버튼 바는 스크롤과 무관하게 화면 맨 아래에 완전 고정한다.
 * 본문이 바에 가리지 않게 .screen 아래에 여백을 둔다. */
:root[data-platform] .screen > * > .actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0; max-width: none;
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  justify-content: space-between;
}
/* 바 높이는 화면마다 다르다(금액 줄 유무) — shell 이 잰 --bar-h 만큼 비운다. */
/* has-bar 는 shell 이 단다 — :has() 를 못 읽는 구형 키오스크 크롬에서도 되게. */
:root[data-platform] .screen.has-bar { padding-bottom: calc(var(--bar-h, 88px) + var(--space-4)); }
:root[data-platform] .actions .btn-home { order: 0; margin: 0; }
:root[data-platform] .actions .sc-close,
:root[data-platform] .actions [data-close] { order: 1; margin: 0; }
:root[data-platform] .actions [data-back] { order: 2; margin: 0; }
:root[data-platform] .actions .btn-primary,
:root[data-platform] .actions .btn-send { order: 3; margin: 0; }

/* 처음·이전·닫기는 투명 바탕 + 테두리로 통일 (흐름 바·전체메뉴·세트담기·확인 창·완료 화면) */
:root[data-platform] .actions .btn-home,
:root[data-platform] .actions [data-back],
:root[data-platform] .mb-bar .btn-ghost,
:root[data-platform] .mb-detail-bar .btn-ghost,
:root[data-platform] .oneplus-bar .btn-ghost,
:root[data-platform] .idle-warning .actions .btn-ghost {
  background: transparent; color: var(--fg);
  border: var(--border-width-strong) solid var(--color-nav-border);
}
/* 주문 전송 후 '처음으로'(완료 화면)도 같은 모양 */
:root[data-platform] .payment-done .actions .btn-primary {
  background: transparent; color: var(--fg); border-color: var(--color-nav-border);
}

/* 세트 담기·1+1 하단 바도 동일하게 — 이전(좌)·닫기(중앙)·다음/개수(우).
 * 닫기는 절대위치로 정중앙에 고정하고, 이전/개수만 양끝으로 벌려 겹침을 없앤다. */
:root[data-platform] .oneplus-bar { position: relative; justify-content: space-between; }
:root[data-platform] .oneplus-bar > .btn { flex: 0 0 auto; }
:root[data-platform] .oneplus-bar > .oneplus-count { flex: 0 0 auto; text-align: right; }
:root[data-platform] .oneplus-bar > .sc-close {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
}

/* 창 안의 버튼 줄 — 버튼이 글자 길이대로 늘면(영어 'Yes, start over') 창 밖으로 삐져나왔다.
 * 폭을 나눠 갖고 길면 두 줄로 접는다. (화면 점검) */
:root[data-platform] .idle-warning .actions .btn,
:root[data-platform] .sc-dialog .actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }

/* 모달(처음부터 다시 할까요? 등) 안의 버튼 줄은 하단 고정 바가 아니다 —
 * 위 .actions 규칙의 바 색·고정·여백을 되돌린다. */
:root[data-platform] .overlay .actions,
:root[data-platform] .sc-dialog .actions,
:root[data-platform] [role="dialog"] .actions,
:root[data-platform] [role="alertdialog"] .actions {
  position: static; background: transparent;
  padding: 0; margin-top: var(--space-5);
  justify-content: center; gap: var(--space-3);
}

/* ══ 크리스마스 테마(data-theme="xmas") 전용 모양 ══════════════════════════
 * 색의 역할(페이지·헤더·하단 바·카드·글자)은 tokens.css 의 xmas 토큰이 정한다.
 * 여기에는 이 테마만의 '모양'과, 아직 역할 토큰이 없는 자리의 보정만 둔다.
 * 운영에는 data-theme 가 없어 전혀 적용되지 않는다. 새 테마는 여기를 늘리지 말고
 * 역할 토큰을 쓴다 (docs/THEME.md). */
:root[data-theme="xmas"] .shell-header { box-shadow: 0 2px 10px rgb(0 0 0 / 18%); }
/* 진행 막대 — 빨강 헤더 위에서 초록 채움이 보이게 track 을 더 어둡게 */
:root[data-theme="xmas"] .progress-bar { background: var(--xmas-red-dark); }

/* 바탕 위에 바로 놓이는 글자는 흰색으로 (카드 안 글자는 건드리지 않는다) */
:root[data-theme="xmas"] .screen-title,
:root[data-theme="xmas"] .progress-title,
:root[data-theme="xmas"] .idle-plain-store,
:root[data-theme="xmas"] .idle-store,
:root[data-theme="xmas"] .idle-notice-title,
:root[data-theme="xmas"] .idle-notice-body,
:root[data-theme="xmas"] .idle-closing-label,
:root[data-theme="xmas"] .batch-title,
:root[data-theme="xmas"] .seat-current { color: #fff; }
:root[data-theme="xmas"] .hint,
:root[data-theme="xmas"] .hint-sub,
:root[data-theme="xmas"] .batch-sub,
:root[data-theme="xmas"] .oneplus-count,
:root[data-theme="xmas"] .benefit-band,
:root[data-theme="xmas"] .benefit-band .benefit,
:root[data-theme="xmas"] .benefit-band .benefit-set { color: rgba(255, 255, 255, .9); }
/* 배너 띠는 빨강 헤더에 녹아들게 — 옅은 바탕색을 벗긴다 */
:root[data-theme="xmas"] .benefit-band { background: transparent; }
/* 강조 안내는 금색으로 — 빨강 위 초록 글씨는 대비가 약하다 */
:root[data-theme="xmas"] .hint-strong { color: #ffd98a; }

/* 이전·처음으로·닫기 등 고스트 버튼이 빨강 바탕에서 보이게 */
:root[data-theme="xmas"] .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* 아이들 화면 바탕·로고 반전은 토큰(--color-idle-bg, --idle-logo-filter)이 정한다 */
/* 전체 메뉴 보기 — 빨강 위에서 보이게 흰 테두리로 */
:root[data-theme="xmas"] .idle-browse { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* 선택된 항목은 짙은 초록으로 반전 — 베이지 카드에서 또렷하게. (매장 요청)
 * 평소엔 연초록 틴트지만, 크리스마스 테마에선 꽉 찬 짙은 초록 + 흰 글자로 뒤집는다. */
:root[data-theme="xmas"] .choice.is-on,
:root[data-theme="xmas"] .card.is-on,
:root[data-theme="xmas"] .option.is-on,
:root[data-theme="xmas"] .mode-card.is-on,
:root[data-theme="xmas"] .crust-pick.is-on,
:root[data-theme="xmas"] .sauce-card.is-on,
:root[data-theme="xmas"] .size-chip.is-on,
:root[data-theme="xmas"] .seat-zone.is-on,
:root[data-theme="xmas"] .seat-cell.is-on,
:root[data-theme="xmas"] .method.is-on,
:root[data-theme="xmas"] .pay-chip.is-on,
:root[data-theme="xmas"] .extras-tab.is-on,
:root[data-theme="xmas"] .seg-item.is-on,
:root[data-theme="xmas"] .lang-btn.is-on,
:root[data-theme="xmas"] .pickup-key.is-on {
  background: var(--color-brand);              /* 카드(진녹색)보다 살짝 밝은 녹색 */
  border: 3px solid var(--color-selected-border); /* 금색 테두리로 선택을 또렷하게 */
  color: #fff;
  box-shadow: var(--shadow-raised);
}
/* 선택 카드 안의 글자(이름·설명·값)도 흰색으로 */
:root[data-theme="xmas"] .choice.is-on *,
:root[data-theme="xmas"] .card.is-on *,
:root[data-theme="xmas"] .option.is-on *,
:root[data-theme="xmas"] .mode-card.is-on *,
:root[data-theme="xmas"] .crust-pick.is-on *,
:root[data-theme="xmas"] .sauce-card.is-on *,
:root[data-theme="xmas"] .size-chip.is-on *,
:root[data-theme="xmas"] .seat-zone.is-on *,
:root[data-theme="xmas"] .seat-cell.is-on *,
:root[data-theme="xmas"] .method.is-on *,
:root[data-theme="xmas"] .pay-chip.is-on *,
:root[data-theme="xmas"] .extras-tab.is-on * { color: #fff; }

/* 녹색 카드에서 값·금액은 금색으로 (녹색 글씨는 묻힌다) */
:root[data-theme="xmas"] .set-choose-price,
:root[data-theme="xmas"] .set-card-price,
:root[data-theme="xmas"] .benefit-set-price,
:root[data-theme="xmas"] .benefit-set .benefit-set-price { color: var(--color-discount); }
:root[data-theme="xmas"] .benefit-upup .benefit-name { color: #fff; }
/* 업앤업 강조 카드 — 분홍 대신 금색 테두리로 (바탕은 다른 카드와 같은 녹색) */
:root[data-theme="xmas"] .benefit-upup { background: var(--color-surface); border-color: var(--color-selected-border); }
/* 아이콘 원판 — 녹색 카드 위에서 보이게 옅은 흰색으로 */
:root[data-theme="xmas"] .benefit-icon { background: rgba(255, 255, 255, .12); }

/* 피자 '확정' 버튼 — 초록 대신 빨강 카드로. (매장 요청) */
/* 반반 두 장을 다 고른 뒤의 '다음'도 한판 '확정'과 같은 빨강으로 — 누를 차례임을 알린다. (매장 요청) */
:root[data-theme="xmas"] .card-confirm,
:root[data-theme="xmas"] .half-actions .btn-go { background: #c8102e; color: #fff; }
/* 피자 카드 업앤업/해피아워 가격 배지 — 눈에 띄게 금색으로. (매장 요청) */
:root[data-theme="xmas"] .card-price-tag {
  background: var(--color-discount); color: #3a2600; font-weight: var(--weight-bold);
}
/* 피자옵션·토핑 '바꾸기/추가하기' 링크 글자 — 녹색 바탕에서 묻혀 흰색으로. (매장 요청) */
:root[data-theme="xmas"] .link { color: #fff; }
/* 기본제공 갈릭소스·피클·핫소스 — 노란색으로. (매장 요청) */
:root[data-theme="xmas"] .dip-free-note { color: #ffd54a; }
:root[data-theme="xmas"] .dip-free-items { color: #ffd54a; }   /* 소스 이름 span 이 brand(초록)였다 */
:root[data-theme="xmas"] .dip-free-badge { background: #ffd54a; color: #3a2600; }

/* ── 전체 가독성 점검으로 찾은 저대비 수정 (녹색 테마) ───────────────────────
 * 녹색 카드 위 '초록 글자' 또는 밝은 바탕 위 '흰 글자'로 묻히던 곳들. (매장 요청) */
/* 주문타입 '약 13~17분' 칩 — 연녹 바탕 흰 글자 → 어두운 반투명 바탕 */
:root[data-theme="xmas"] .choice-note { background: rgba(0, 0, 0, .3); color: #fff; }
/* 모바일 '포장 전용' 배지 — 초록 on 진초록 → 밝게 */
:root[data-theme="xmas"] .choice-tag { color: #fff; background: rgba(0, 0, 0, .22); }   /* 밝은 띠 위 흰 글자는 4.4 — 어둡게 깔아 읽히게 */
/* 인원 +/− 스테퍼 — 초록 on 초록 → 흰 글자 */
:root[data-theme="xmas"] .step-btn { color: #fff; }
/* 크기 서빙('1~2인용') — 초록 on 초록 → 밝게 */
:root[data-theme="xmas"] .mode-card-serves { color: rgba(255, 255, 255, .88); }
/* 좌석 '빈자리 N' — 초록 on 초록 → 밝은 민트 */
:root[data-theme="xmas"] .zone-card-free { color: #7fe6a6; }
/* 좌석 자리 화면 'N/M 테이블 선택' 진행 — 초록 on 빨강 → 밝게 */
:root[data-theme="xmas"] .seat-progress { color: rgba(255, 255, 255, .78); }
/* 완료 화면 티켓 — 주문번호·소요예정(초록 on 초록) 흰색, 결제수단 배지 금색. */
:root[data-theme="xmas"] .ticket-no,
:root[data-theme="xmas"] .ticket-prep-value,
:root[data-theme="xmas"] .ticket-time-ready .ticket-time-value { color: #fff; }
:root[data-theme="xmas"] .ticket-method { color: #3a2600; background: var(--color-discount); }
/* 예약 '선택한 시간' — 초록(brand) on 진초록(sunken) 대비 1.9 → 금색으로 또렷하게 */
:root[data-theme="xmas"] .pickup-time { color: var(--color-discount); }
/* 선택된 피자 카드 업앤업 배지 — .is-on * 가 흰 글자로 덮어 금색 위 흰색이 됐다 → 어둡게 */
:root[data-theme="xmas"] .card.is-on .card-price-tag { color: #3a2600; }
/* 반반 몇 번째 장 배지(①②) — 금색 바탕에 흰 숫자는 안 보였다(1.6). 금색 위 글자는 짙은 갈색. */
:root[data-theme="xmas"] .card-pick-order,
:root[data-theme="xmas"] .card.is-on .card-pick-order { color: #3a2600; }
/* 세트 담기 빈 슬롯 번호 — 연녹 on 연회색 → 진한 글자 */
:root[data-theme="xmas"] .oneplus-slot-no { color: var(--color-disabled-text); }   /* #2f6b47 은 짙은 녹색 위에서 안 보였다(1.8) */

/* 세트 제안 화면 — '현재 적용중' 카드가 밝은 accent-weak 바탕이라 흰 글자가 안 보였다.
 * 바탕을 녹색 카드로, 배지·값은 금색으로 또렷하게. */
:root[data-theme="xmas"] .sg-now,
:root[data-theme="xmas"] .offer-applied { background: var(--color-surface); border-color: var(--color-selected-border); }
:root[data-theme="xmas"] .sg-label { color: #3a2600; background: var(--color-discount); }
:root[data-theme="xmas"] .sg-offer .sg-note,
:root[data-theme="xmas"] .sg-set .sg-note,
:root[data-theme="xmas"] .sg-cheap .sg-note,
:root[data-theme="xmas"] .sg-now .sg-note { color: var(--color-discount); }
/* 세트 메뉴 카드 글자(평소 녹색)·혜택 안내 알약이 녹색 카드에서 묻히는 걸 막는다 */
:root[data-theme="xmas"] .benefit-set { color: #fff; }
:root[data-theme="xmas"] .choice-benefit { color: #fff; background: rgba(255, 255, 255, .14); }
/* 보조 버튼(피자 더 담기·취소 유지 등)은 녹색 바탕+녹색 글자라 묻힌다 →
 * 투명 바탕에 흰 글자·테두리만. 주문 확인·완료 화면 글자 가독성 확보. (매장 요청) */
:root[data-theme="xmas"] .btn-secondary {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6);
}
/* 전화번호 입력 — 표시 숫자·안내를 흰색으로, 키패드는 보이게. (매장 요청) */
:root[data-theme="xmas"] .phone-display,
:root[data-theme="xmas"] .name-value { color: #fff; }
:root[data-theme="xmas"] .key { color: #fff; }

/* 전체 메뉴/피자 보기 — 값은 금색, 이름·안내는 흰색, 피자 이미지 크게. (매장 요청) */
:root[data-theme="xmas"] .mb-price,
:root[data-theme="xmas"] .mb-detail-won { color: var(--color-discount); }
:root[data-theme="xmas"] .card-name,
:root[data-theme="xmas"] .mb-detail-name,
:root[data-theme="xmas"] .mb-detail-size,
:root[data-theme="xmas"] .mb-title,
:root[data-theme="xmas"] .mb-section-title { color: #fff; }
/* 못 고르는 카드는 이름도 흐리게 — 위의 흰 이름이 덮지 않게. (매장 요청)
 * 반반 첫 장(이미 선택함)은 빼다 — 선택된 밝은 녹색 바탕이라 흐린 글자는 안 보였다(3.0). */
:root[data-theme="xmas"] .card.is-off:not(.is-on) .card-name { color: var(--color-disabled-text); }

/* 주문 확인 — '○원 할인이 적용되었습니다'(초록 on 빨강) → 금색,
 * '이런 혜택도 있습니다'(밝은 바탕 + 흰 글자) → 녹색 카드 + 금색 테두리, 적용 버튼 금색. */
:root[data-theme="xmas"] .applied-summary { color: var(--color-discount); }
:root[data-theme="xmas"] .panel-missed {
  background: var(--color-surface);
  border: var(--border-width-strong) solid var(--color-discount);
}
:root[data-theme="xmas"] .panel-missed .panel-title { color: var(--color-discount); }
:root[data-theme="xmas"] .panel-missed .missed-text { color: #fff; }
:root[data-theme="xmas"] .panel-missed .btn-secondary {
  background: var(--color-discount); color: #3a2600;
  border-color: var(--color-discount);
}
/* 완료 화면 진행 단계 — 지금 단계('접수됨')가 초록 on 빨강이라 흐렸다 → 금색, 점도 금색. */
:root[data-theme="xmas"] .progress-step.is-now { color: var(--color-discount); }
:root[data-theme="xmas"] .progress-step.is-now .progress-dot {
  background: var(--color-discount); border-color: var(--color-discount);
}
:root[data-theme="xmas"] .progress-step { color: rgba(255, 255, 255, .85); }

/* ── 네이버 예약 손님 — 휴대폰 첫 화면의 매장 식사 미리 주문 (screens/booking-gate.js) ── */
.booking-dialog { width: min(480px, 96vw); }
.booking-pin { display: grid; gap: var(--space-3); text-align: center; }
.booking-pin-boxes { display: flex; justify-content: center; gap: var(--space-3); margin: var(--space-2) 0; }
.booking-pin-box {
  width: 56px; height: 64px; display: grid; place-items: center;
  font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
  border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.booking-pin-box.is-on { border-color: var(--color-brand); }
.booking-pin-boxes { align-items: center; }
.booking-pin-pre { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-weak); font-variant-numeric: tabular-nums; white-space: nowrap; }
.booking-pin-mask { letter-spacing: 0.08em; }
.booking-pin-mask.is-saved { color: var(--color-text); letter-spacing: 0; }
.booking-pin .hint { word-break: keep-all; text-wrap: balance; }   /* '주세 / 요'처럼 한 글자만 넘어가지 않게 */
.booking-party { margin: var(--space-2) 0 0; text-align: center; font-weight: var(--weight-bold); }
.booking-lock { text-align: center; }
/* 핀 키패드 — 창 폭에 맞춰 가운데로(아래 닫기·예약 찾기 단추와 같은 폭), '전체 지움'은 한 줄로. (매장 제보 — 왼쪽으로 쏠림) */
.booking-pin .keypad { max-width: none; justify-self: stretch; }
.booking-pin .key-wide { white-space: nowrap; }
/* 아이폰 전화 키패드처럼 둥근 키 — 숫자는 동그라미, '전체 지움'·'←'는 바탕 없이 글자만. (매장 요청 2026-10-30) */
.booking-pin .keypad { grid-template-columns: repeat(3, 76px); justify-content: center; gap: var(--space-3) var(--space-6); }
.booking-pin .key {
  width: 76px; height: 76px; min-height: 0; padding: 0; justify-self: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-text) 45%, transparent);   /* 둥근 키 테두리 (매장 요청) */
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  font-size: var(--text-2xl); font-weight: var(--weight-medium);
}
.booking-pin .key:active { background: color-mix(in srgb, var(--color-text) 34%, transparent); }
.booking-pin .key-wide, .booking-pin .key[aria-label] { background: transparent; border-color: transparent; font-size: var(--text-md); font-weight: var(--weight-bold); }
.booking-pin .key[aria-label] { font-size: var(--text-2xl); }
/* 못 찾은 까닭 — 결제 실패와 같은 빨간 상자로(예전엔 개발 서버에만 있던 모양이라 운영에선 맨 글씨였다). (매장 제보 2026-10-30) */
.booking-pin .booking-err { margin: 0; }
/* 휴대폰(카카오톡 안 브라우저 등)에서 창이 화면보다 길어 아래 단추가 잘리던 것 — 보이는 높이(dvh)에 맞추고 촘촘하게. (매장 제보) */
.booking-dialog { max-height: 92dvh; }
@media (max-width: 600px) {
  .booking-dialog.sc-dialog { padding: var(--space-4); }
  .booking-pin { gap: var(--space-2); }
  .booking-pin .sc-dialog-title { margin-bottom: 0; font-size: var(--text-lg); }
  .booking-pin .hint { margin: 0; }
  .booking-pin-boxes { margin: 0; }
  .booking-pin-boxes { gap: 6px; }
  .booking-pin-pre { font-size: var(--text-xl); }                 /* '010-••••-' 를 크게, 칸은 작게 (매장 요청) */
  .booking-pin-box { width: 38px; height: 46px; font-size: var(--text-xl); }
  .booking-pin .keypad { grid-template-columns: repeat(3, 60px); gap: var(--space-2) var(--space-6); }
  .booking-pin .key { width: 60px; height: 60px; min-height: 0; font-size: var(--text-xl); }
  .booking-pin .key-wide { font-size: var(--text-sm); }
}
/* 결제 단계 — 네이버 예약 번호로 미리 채운 뒷 4자리는 손님이 누른 것과 구분되게 (screens/08-payment.js) */
.phone-char.is-fixed { color: var(--color-text-weak); }
.phone-tail-hint { margin-top: calc(var(--space-2) * -1); text-align: center; }

/* ── 최근 주문 · 다시 주문하기 — 손님 휴대폰 첫 화면 (screens/01-order-type.js, app/recent-orders.js) ── */
.recent-orders {
  margin-top: var(--space-5); padding: var(--space-4);
  background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg);
}
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.recent-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.recent-forget { padding: 0; font: inherit; font-size: var(--text-xs); color: var(--color-text-faint); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.recent-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.recent-item { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface-sunken); border-radius: var(--radius-md); }
.recent-text {
  margin: 0; font-size: var(--text-sm); line-height: 1.4; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recent-foot { display: flex; align-items: center; gap: var(--space-2); }
.recent-day { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.recent-total { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.recent-again { margin-left: auto; white-space: nowrap; }
.recent-tip { margin: var(--space-3) 0 0; font-size: var(--text-xs); text-align: center; }

/* 네이버 예약석을 매장 손님이 고를 때 — '12:30까지 이용' 꼬리표와 비워 달라는 안내 (screens/07-seat.js, 매장 요청 2026-10-29) */
.seat-until {
  display: inline-block; margin-top: 2px; padding: 1px 8px; font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: #fff; background: #1e63c8; border-radius: var(--radius-pill); white-space: nowrap;
}
.seat-until-notice {
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); font-size: var(--text-md); font-weight: var(--weight-bold);
  color: #0d3c82; background: #e3edfb; border: 2px solid #1e63c8; border-radius: var(--radius-md); text-align: center; word-break: keep-all;
}

/* 14시 뒤 네이버 예약 — 제목 줄 오른쪽 끝 작은 알약 (screens/01-order-type.js, 매장 요청 2026-10-29) */
.screen-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.screen-title-row .screen-title { margin-right: auto; }
.booking-pill {
  flex: none; padding: var(--space-2) var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: #fff; background: #03c75a; border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .booking-pill:hover { background: #029a46; } }
/* 휴대폰 — 제목이 '받으시겠어 / 요?'로 쪼개지지 않게 한 줄로, 알약도 조금 작게 */
@media (max-width: 480px) {
  .screen-title-row .screen-title { font-size: 22px; white-space: nowrap; }
  .booking-pill { padding: 6px 12px; font-size: 13px; }
}

/* ── 주차 등록하기 — 키오스크·패드 주문 완료 화면 (screens/parking.js, 매장 요청 2026-11-01) ── */
.parking-card {
  width: 100%; margin-top: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 0; border-radius: var(--radius-lg, 16px);
  background: var(--color-brand); color: var(--color-on-brand, #fff); text-align: left; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-brand) 35%, transparent);
  animation: parking-nudge 1.6s ease-in-out 2;   /* 두 번만 살짝 — 눈에 띄게, 계속 흔들리진 않게 */
}
.parking-card:active { filter: brightness(.92); }
.parking-card-icon { font-size: 40px; line-height: 1; flex: none; }
.parking-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.parking-card-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.15; }
.parking-card-sub { font-size: var(--text-sm); opacity: .92; word-break: keep-all; }
.parking-card-cta {
  flex: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-brand); font-weight: var(--weight-bold); white-space: nowrap;
}
@keyframes parking-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .parking-card { animation: none; } }
.parking-registered { width: 100%; margin-top: var(--space-4); display: grid; gap: var(--space-2); justify-items: center; }
.parking-more {
  padding: var(--space-2) var(--space-4); min-height: var(--control-min);
  border: var(--border-width-strong) solid var(--color-brand); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-brand); font-weight: var(--weight-bold); cursor: pointer;
}
.parking-car.is-done { opacity: .55; cursor: default; }
.parking-done-line { margin: 0; text-align: center; font-weight: var(--weight-bold); }
.parking-cars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.parking-car {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); min-height: var(--control-lg);
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.parking-car:active { border-color: var(--color-brand); background: var(--color-brand-weak); }
.parking-car-plate { font-size: var(--text-xl); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.parking-car-time { color: var(--color-text-weak); font-variant-numeric: tabular-nums; }
.parking-msg { margin: 0; word-break: keep-all; text-wrap: balance; }
.parking-ok { margin: 0; font-size: 48px; line-height: 1; color: var(--color-brand); }
/* 컴퓨터(키오스크 화면)에서 완료 창이 옆으로 넘쳐 제목이 잘리고 가로 스크롤이 생기던 것 — 단추 글자가 한 줄로 버텨
   grid 칸을 넓혔다. 칸을 창 폭에 묶고, 단추는 줄을 바꿔 두 줄로라도 들어가게. (매장 제보 2026-11-01) */
.parking-body { grid-template-columns: minmax(0, 1fr); }
.parking-dialog { overflow-x: hidden; }
.parking-body .sc-dialog-title { margin: 0; word-break: keep-all; text-wrap: balance; }
.parking-body .split-actions { flex-wrap: wrap; }
.parking-body .split-actions .btn { flex: 1 1 160px; min-width: 0; white-space: normal; word-break: keep-all; }
/* 체크 표시는 글자색으로 — 초록 테마에서 브랜드색(초록)이 초록 창에 묻혔다. */
.parking-ok { color: inherit; }
.booking-dialog.parking-dialog { width: min(600px, 96vw); }   /* 키오스크 큰 글자에서 단추가 세 줄로 접히지 않게 */
.parking-body .split-actions .btn-ghost { flex-grow: 2; }   /* '다른 차도 등록하기 (1/3대)'가 한 줄에 들어가게 더 넓게 */
/* 크리스마스(초록) 테마에서 바탕(surface)과 브랜드색이 둘 다 초록이라 '다른 차도 등록하기'·'무료 주차 등록' 글자가 묻혔다.
   단추는 브랜드색 바탕에 흰 글자, 카드 속 칩은 흰 바탕에 브랜드색 글자로 — 어느 테마든 대비가 난다. */
.parking-more { background: var(--color-brand); color: #fff; border-color: transparent; }
.parking-card-cta { background: #fff; }
/* 휴대폰 — 카드 안 칩까지 한 줄에 넣으면 제목이 접힌다. 칩은 빼고(카드 전체가 단추) 제목을 한 단계 작게. (2026-11-01) */
@media (max-width: 520px) {
  .parking-card { padding: var(--space-3) var(--space-4); }
  .parking-card-icon { font-size: 32px; }
  .parking-card-title { font-size: var(--text-xl); }
  .parking-card-cta { display: none; }
}
/* 처음 화면 [주차 등록] — '전체 메뉴 보기' 단추 모양을 그대로 쓰고 바로 아래에 붙인다. (screens/parking.js) */
.idle-parking { margin-top: var(--space-3); }
/* 주차 등록 — 전화번호 창(파랑)과 차량번호 창(주황)을 색으로 가른다. 둘 다 숫자 4칸이라 헷갈렸다. (매장 요청 2026-11-01)
   테마와 상관없이 같은 색 — 어느 단계인지 알리는 표시라서. 위 띠·칸 테두리·찾기 단추를 그 색으로. */
.parking-dialog.pk-phone { --pk-accent: #1d4ed8; --pk-weak: #dbe6ff; }
.parking-dialog.pk-car { --pk-accent: #c2410c; --pk-weak: #ffe4d2; }
.parking-dialog.pk-phone, .parking-dialog.pk-car { border-top: 10px solid var(--pk-accent); padding: 0 var(--space-5) var(--space-5); }
.parking-band {
  margin: 0 calc(-1 * var(--space-5)) var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--pk-weak); color: var(--pk-accent);
  font-size: var(--text-lg); font-weight: var(--weight-bold); text-align: center;
}
.parking-dialog .booking-pin-box { border-color: color-mix(in srgb, var(--pk-accent) 35%, transparent); }
.parking-dialog .booking-pin-box.is-on { border-color: var(--pk-accent); color: var(--pk-accent); background: var(--pk-weak); }
.parking-dialog .split-actions .btn-primary { background: var(--pk-accent); border-color: var(--pk-accent); color: #fff; }
.parking-finding { margin: 0; text-align: center; font-weight: var(--weight-bold); color: var(--pk-accent, var(--color-text)); }
/* 주차 프리패스 기간 안내 — 누르는 카드가 아니라 읽는 안내(초록 테두리, 흔들림 없음). (매장 요청 2026-11-03) */
.parking-card.is-free {
  cursor: default; animation: none; box-shadow: none;
  background: var(--color-surface); color: var(--color-text);
  border: var(--border-width-strong, 2px) solid var(--color-notice);
}
.parking-card.is-free .parking-card-title { color: var(--color-notice); }
.parking-card.is-free:active { filter: none; }
/* 업앤업 먹고가기 적용 기간 안내 — 혜택 카드 설명 아래 한 줄. (매장 요청 2026-11-03) */
/* 강조 글자색(--fg-accent) — 버튼 바탕색(--color-brand)을 쓰면 크리스마스 녹색 카드에서 녹색 글자가 되어 안 보였다. (대표님 요청 2026-11-04) */
.benefit-note { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--fg-accent); text-align: center; word-break: keep-all; }
[data-platform="mobile"] .benefit-note { text-align: left; }

/* 먹고가기 전 '네이버로 예약하셨나요?' (screens/booking-gate.js bookingCheckDialog, 대표님 요청 2026-11-08) */
.booking-check { width: min(560px, 96vw); text-align: center; }
.booking-check .hint { word-break: keep-all; text-wrap: balance; }
.booking-check-actions { display: grid; gap: var(--space-3); margin-top: var(--space-4); }   /* 위아래로 — '아니요, 그냥 먹고 갈게요'가 쪼개지지 않게 */
.booking-check-actions .btn { word-break: keep-all; white-space: normal; }

/* 첫 화면 '네이버 예약 손님' 알약 — '주문하기' 바로 밑 (screens/00-idle.js, 대표님 요청 2026-11-08) */
.idle-booking { margin-top: var(--space-5); }

/* 손님 휴대폰 — 먹고가기 자리 예약(네이버로) 버튼과 '예약하면 미리 주문' 안내 (screens/01-order-type.js, 대표님 요청 2026-11-08) */
.naver-book-link {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin: var(--space-1) 0 var(--space-3); padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none;
  color: #fff; background: #03c75a; border-radius: var(--radius-pill);
}
.naver-book-note {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-surface); border: 2px solid #03c75a; border-radius: var(--radius-lg);
  text-align: center; word-break: keep-all;
}
.naver-book-note-title { margin: 0; text-wrap: balance; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); }
.naver-book-note-sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-weak); }

/* 매장 기기 예약 손님 — 번호를 누르지 않고 예약 번호로 자동 등록 (screens/08-payment.js, 대표님 요청 2026-11-08) */
.phone-auto { display: flex; justify-content: center; padding: var(--space-3) 0; }
.phone-auto-number { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }