/**
 * platform/tablet.css — 아이패드
 *
 * 거치대에 놓고 가까이서 쓴다. 키오스크보다 조금 작게.
 */

:root[data-platform='tablet'] {
  --scale: 1.1;
  --card-min: calc(200px * var(--scale));
  --layout-max: calc(980px * var(--scale));
  --preview-size: calc(260px * var(--scale));
}

/* 세로로 세워 쓰면 폭이 좁다. 카드 한 칸을 줄여 이름이 깨지지 않게 한다. */
@media (orientation: portrait) {
  :root[data-platform='tablet'] { --card-min: calc(170px * var(--scale)); }
}

/*
 * 큰 카드 화면(포장하기·먹고가기, 좌석 구역, 주문 방법, 세트)은 키오스크와 같은 모양을
 * 쓴다(platform/kiosk.css). 여기서는 세로 패드 폭에 맞춰 글자만 줄인다. (매장 요청 2026-10-24)
 * 세 장이 한 줄이라 카드 폭이 240px 안팎 — '그냥 주문하기'가 두 줄로 꺾여 옆 카드와 줄이 어긋났다.
 */
/* 좌석 구역·주문 방법·세트 화면은 카드 아래가 비어 세로 패드에서는 조금 더 길게 (포장하기 화면은 아래에 바로가기가 있어 그대로) */
@media (orientation: portrait) {
  :root[data-platform='tablet'] :is(.zone-card, main[data-step="benefit"] .benefit-card, .set-choose-card) {
    min-height: min(1040px, 62vh);
  }
}
/*
 * 포장하기 화면 아래 바로가기 타일 — 768 폭 패드에서는 두 칸씩 접혀 셋째 타일이 화면 밖으로 밀렸다.
 * 세로 패드에서는 한 줄에 다 놓는다(타일은 240px 를 넘지 않는다).
 */
@media (orientation: portrait) {
  :root[data-platform='tablet'] .shortcut-banners { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /*
   * 높이는 내용이 정한다 — 비율(aspect-ratio)·고정 높이를 주지 않는다. (2026-11-06 매장 사진)
   * 4:3 비율로 묶었더니 아이패드 사파리가 카드를 180px 로 고정해, 세트 4인 줄·업앤업 금색 띠만큼
   * 길어진 내용의 [바로가기] 버튼이 카드 밖으로 잘렸다. 세 장 높이는 그리드가 가장 긴 카드에 맞춘다.
   */
  :root[data-platform='tablet'] .shortcut-banners > .shortcut { width: 100%; max-width: 240px; justify-self: center; height: auto; overflow: visible; }
  /*
   * 매장 패드는 아이패드 에어 3세대(세로 834×1112). 키오스크 높이(54vh)로는 바로가기 타일이
   * 아래 '처음으로' 줄에 가려 화면이 밀렸다 → 카드를 조금 낮추고 타일을 가로로 넓적하게 해
   * 한 화면에 들어오게 한다. 패드는 홈 화면 앱(주소창 없음)으로 쓰므로 높이 1112 전부를 쓴다.
   */
  :root[data-platform='tablet'] .order-type .choice-grid .choice { min-height: min(1040px, 50vh); }
}

/* 세트 —'1/N 12,000원'에서 '원'만 아래로 떨어지고, 구성이 '사이드 1 / 개'로 끊겼다 */
:root[data-platform='tablet'] .set-per-person { font-size: var(--text-lg); padding: var(--space-2) var(--space-4); white-space: nowrap; }
:root[data-platform='tablet'] .set-choose-comp { word-break: keep-all; }
:root[data-platform='tablet'] main[data-step="benefit"] .benefit-name { font-size: min(44px, 4vw); white-space: nowrap; }