/**
 * platform/kiosk.css — 윈도우 21인치 키오스크
 *
 * 규칙을 덮어쓰지 않는다. tokens.css의 값만 다시 선언한다.
 * 서서 팔을 뻗어 누르는 거리라 글자와 터치 대상을 크게 잡는다.
 */

:root[data-platform='kiosk'] {
  --scale: 1.25;
  --card-min: calc(240px * var(--scale));
  --layout-max: calc(1200px * var(--scale));
  --control-min: calc(56px * var(--scale));
  --control-lg: calc(72px * var(--scale));
  --preview-size: calc(320px * var(--scale));
}

/*
 * 손가락이 지나갈 때 색이 바뀌면 눌린 것으로 오해한다 — 여기서 따로 되돌리던
 * 것을, 이제 styles/components.css 가 hover 규칙 자체를 마우스 있는 기기로
 * 한정해 막는다. 키오스크뿐 아니라 패드·휴대폰도 같이 해결된다.
 */

/*
 * 포장하기 / 먹고가기 (그다음 바로주문 / 예약주문 — 같은 크기) 카드를 크게. (매장 요청 2026-10-22)
 * 1920 세로 화면에서 카드가 270px 높이라 아래가 휑했다 → 520px → 다시 두 배(1040px, 세로로 긴
 * 직사각형). 화면이 더 낮은 키오스크에서 넘치지 않게 화면 높이의 54% 를 넘지 않는다.
 * 키오스크·패드(2026-10-24부터 패드도 같은 모양 — 크기는 platform/tablet.css 가 세로 패드에 맞춘다). 휴대폰은 그대로.
 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .choice-grid { gap: var(--space-6); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .choice-grid .choice {
  min-height: min(1040px, 54vh);
  gap: var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.5);
}
/* 1080 폭에서 96px, 그보다 좁은 키오스크에서는 폭에 맞춰 줄어든다 — '포장하/기'로 꺾이지 않게 한 줄 고정 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .choice-grid .choice-name { font-size: min(96px, 8.9vw); white-space: nowrap; }
/* 일본어 '店内で食べる'(6자)는 한국어 4자보다 길어 카드 밖으로 넘쳤다 — 한국어가 아니면 한 단계 작게 */
:root:is([data-platform='kiosk'], [data-platform='tablet']):not([lang='ko']) .order-type .choice-grid .choice-name { font-size: min(80px, 6.2vw); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .choice-grid .choice-benefit,
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .choice-grid .choice-note {
  font-size: var(--text-xl);
  padding: var(--space-3) var(--space-6);
}

/*
 * 기본 화면(흰 바탕)에서 흰 카드가 바탕과 구분이 안 됐다. (매장 요청 2026-10-22)
 * 파파존스 색으로 칠한다 — 포장하기·바로주문은 빨강, 먹고가기·예약주문은 초록(아래 바로가기
 * 배너와 같은 결). 테마(크리스마스·봄)는 자기 카드 색이 있어 건드리지 않는다(:not([data-theme])).
 * 막힌 카드(is-off — 홀 마감 등)는 원래대로 흐리게 둔다.
 */
:root:is([data-platform='kiosk'], [data-platform='tablet']):not([data-theme]) .order-type .choice-grid .choice:not(.is-off) {
  --fg: var(--color-text-on-brand);
  --fg-weak: var(--color-text-on-brand);
  color: var(--color-text-on-brand);
  border-color: transparent;
  box-shadow: var(--shadow-raised);
}
:root:is([data-platform='kiosk'], [data-platform='tablet']):not([data-theme]) .order-type .choice-grid :is(.choice-takeout, .choice-now):not(.is-off) {
  background: var(--color-brand);
}
:root:is([data-platform='kiosk'], [data-platform='tablet']):not([data-theme]) .order-type .choice-grid :is(.choice-dinein, .choice-reserve):not(.is-off) {
  background: var(--color-accent);
}
/* 카드 안 알약(할인 안내)은 흰 바탕 + 빨간 글자로 — 칠한 카드 위에서 또렷하게 */
:root:is([data-platform='kiosk'], [data-platform='tablet']):not([data-theme]) .order-type .choice-grid .choice:not(.is-off) .choice-benefit {
  background: var(--color-surface);
  color: var(--color-brand-text);
}

/*
 * 포장하기 카드의 할인 알약을 이름 위로. (매장 요청)
 * 알약이 이름 아래에 있으면 포장 카드의 내용 덩어리가 길어져 '포장하기'·'먹고가기' 줄이
 * 어긋났다. 알약을 위로 올리고, 먹고가기 카드에는 같은 높이의 보이지 않는 빈 자리를 둬
 * 두 이름이 같은 높이에 선다. 바로주문/예약주문 화면은 알약이 하나씩이라 그대로 둔다.
 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type:not(.order-type-timing) .choice-grid .choice-benefit {
  order: -1;   /* 좁으면 두 줄로 접힌다 — 빈 자리도 같은 글이라 같이 접혀 줄이 맞는다 */
}
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type:not(.order-type-timing) .choice-grid .choice-spacer {
  display: inline-block;
  visibility: hidden;
}

/*
 * 어디 앉으실래요?(좌석 구역) · 어떻게 주문하시겠어요?(혜택) · 세트를 고르세요 — 카드도
 * 포장하기·먹고가기 카드와 같은 높이로. (매장 요청 2026-10-22) 키오스크·패드.
 * 세 장이 한 줄이라 카드 폭이 좁다 — 이름은 낱말 단위로 접힌다(keep-all).
 * 혜택 카드(.benefit-cards)는 단체 세트 '다 같은 걸로/골라서' 화면도 같이 쓰므로 혜택 단계로 좁힌다.
 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) :is(.zone-cards, main[data-step="benefit"] .benefit-cards, .set-choose-cards) {
  gap: var(--space-6);
}
:root:is([data-platform='kiosk'], [data-platform='tablet']) :is(.zone-card, main[data-step="benefit"] .benefit-card, .set-choose-card) {
  min-height: min(1040px, 54vh);
  justify-content: center;
  gap: var(--space-5);
  border-radius: calc(var(--radius-lg) * 1.5);
}
/* 좌석 구역 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .zone-card-icon { font-size: 96px; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .zone-card-name { font-size: min(64px, 5.9vw); word-break: keep-all; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .zone-card-free { font-size: var(--text-2xl); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .zone-card-hours { font-size: var(--text-lg); }
/* 혜택 선택 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) main[data-step="benefit"] .benefit-icon { font-size: 80px; width: 150px; height: 150px; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) main[data-step="benefit"] .benefit-text { gap: var(--space-4); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) main[data-step="benefit"] .benefit-name { font-size: min(64px, 5.9vw); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) main[data-step="benefit"] .benefit-desc { font-size: var(--text-lg); }
/* 세트 고르기 */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .set-choose-name { font-size: min(64px, 5.9vw); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .set-choose-comp { font-size: var(--text-lg); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .set-choose-price { font-size: min(56px, 5.2vw); }

:root:is([data-platform='kiosk'], [data-platform='tablet']) .set-per-person { font-size: var(--text-xl); padding: var(--space-2) var(--space-5); }

/* 먹고가기 전 '네이버로 예약하셨나요?' — 키오스크·패드는 크게 (대표님 요청 2026-11-08) */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-check { width: min(820px, 90vw); padding: 56px 56px 48px; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-check .sc-dialog-title { font-size: min(52px, 4.8vw); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-check .hint { font-size: min(30px, 2.8vw); line-height: 1.45; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-check-actions { gap: 20px; margin-top: 32px; }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-check-actions .btn { min-height: 120px; font-size: min(38px, 3.5vw); }

/* 네이버 예약 알약(제목 줄 오른쪽) — 큰 배너를 없애고 늘 띄운다. 키오스크·패드는 손가락으로 누르기 좋게 크게 (대표님 요청 2026-11-08) */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-pill { padding: 16px 32px; font-size: min(30px, 2.8vw); }
/* 뒷 4자리 창 — '010-••••-' 와 네 칸이 480px 창보다 넓어 오른쪽이 잘렸다 → 창을 넓힌다 (대표님 요청 2026-11-08) */
:root:is([data-platform='kiosk'], [data-platform='tablet']) .booking-dialog { width: min(600px, 94vw); }
:root:is([data-platform='kiosk'], [data-platform='tablet']) .order-type .screen-title-row { margin-bottom: var(--space-4); }