/**
 * platform/mobile.css — 모바일 (포장 전용, 고객 배포)
 *
 * 고객 휴대폰이다. 매장 기기와 달리 한 손으로 쥐고 쓴다.
 * 매장 식사 선택은 없다 — 그건 app/platform.js가 막는다. 여기는 크기만 다룬다.
 */

:root[data-platform='mobile'] {
  --scale: 0.95;
  --card-min: calc(150px * var(--scale));
  --layout-max: 100%;
  --gutter: var(--space-4);
  --preview-size: calc(190px * var(--scale));
  --text-choice: var(--text-xl);   /* 카드가 좁다. 큰 글자는 줄바꿈이 깨진다 */
  --preview-size-sm: calc(72px * var(--scale));

  /* 혜택 띠는 한 줄로 고정한다. 좁은 화면에서 세 줄이 되면
     "얇고 조용하게"가 깨지고 광고 배너처럼 보인다. (SPEC 2.5) */
  --band-wrap: nowrap;
  --band-overflow: auto;
  --band-text: nowrap;
}

/* 엄지가 닿는 자리에 다음 버튼을 고정한다. */
/* 좁은 화면이라 버튼 사이·위아래 여백을 더 아낀다. 붙이는 것은 공통 규칙이 한다. */
:root[data-platform='mobile'] .screen > * > .actions {
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
}

:root[data-platform='mobile'] .btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
}

/*
 * 버튼이 넷까지 서는 줄이 있다 — 사이드·음료 화면의
 * '처음으로 · 피자 N판 · 메뉴로 · 담기 완료'. (개시 전 점검에서 실측)
 *
 * 390px 에서 넷이 388px 를 요구하는데 쓸 수 있는 폭은 360px 이라, 줄이
 * 왼쪽으로 밀리며 '처음으로'가 화면 밖으로 13px 잘려 나갔다.
 * 여백을 깎아 넷이 들어오게 하고, 그래도 모자라면(글자가 긴 다른 언어에서)
 * 잘려 나가는 대신 아랫줄로 내려가게 둔다.
 */
@media (max-width: 480px) {
  :root[data-platform='mobile'] .screen > * > .actions {
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  :root[data-platform='mobile'] .actions .btn {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* 하단 고정 줄이 둘이라 자리를 아낀다 — '처음으로'는 글자만큼만 차지한다. */
:root[data-platform='mobile'] .shell-footer {
  gap: var(--space-2);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

:root[data-platform='mobile'] .shell-footer .btn {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
}

/* 고정된 줄 안에서는 '이전'을 밀어낼 여백이 필요 없다. */
:root[data-platform='mobile'] .actions .btn-ghost {
  flex: 0 1 auto;
  margin-right: 0;
}

/* 금액이 없는 줄에서는 '처음으로'가 왼쪽 끝을 맡는다(공통 규칙과 같은 뜻). */
:root[data-platform='mobile'] .actions > .btn-home:first-child { margin-right: auto; }



/*
 * 반반 미리보기 (매장 요청)
 *   [반반 그림]  고른 피자 이름
 *                다음에 할 일 안내
 *   [크게 보기] [다시 선택] [다음]   ← 가로 한 줄, 작게
 *
 * 전에는 버튼 셋이 그림 옆에 세로로 쌓여 화면을 절반 가까이 먹었다. 이 줄은
 * 화면 위에 붙어(sticky) 있어 높을수록 피자 목록이 가려진다 — 낮게 만든다.
 * 줄마다 자리를 지정해야 해서 격자로 짠다. 가운데 .pizza-preview 는
 * display:contents 로 껍데기만 없애 그림과 이름을 각각 격자 칸에 놓는다.
 */
:root[data-platform='mobile'] .half-preview-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  --preview-size: calc(84px * var(--scale));
}

:root[data-platform='mobile'] .half-preview-bar .pizza-preview { display: contents; }

/* DOM 순서가 그림·이름·안내·버튼이라 자리를 하나씩 못 박는다 */
:root[data-platform='mobile'] .half-preview-bar .pizza-preview-disc {
  grid-column: 1;
  grid-row: 1 / span 2;
}

:root[data-platform='mobile'] .half-preview-bar .pizza-preview-caption {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
}

:root[data-platform='mobile'] .half-preview-bar .hint {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  font-size: var(--text-xs);
}

:root[data-platform='mobile'] .half-preview-bar .half-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: var(--space-2) 0 0;
  gap: var(--space-2);
}

:root[data-platform='mobile'] .half-preview-bar .half-actions:empty { display: none; }

/* 버튼은 가로로 나눠 갖고 작게 — 다음은 조금 더 넓게 */
:root[data-platform='mobile'] .half-preview-bar .half-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(44px * var(--scale));
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

:root[data-platform='mobile'] .half-preview-bar .half-actions .btn-go { flex-grow: 1.4; font-size: var(--text-md); }

/* 한 줄에 사진·이름·설명·가격을 다 넣을 폭이 없다.
   설명만 아래 줄로 내려 [사진] [이름] [가격] / [설명] 로 읽히게 한다. */
:root[data-platform='mobile'] .option-desc {
  order: 1;
  flex-basis: 100%;
}

/*
 * 금액이 있는 줄도 한 줄로 세운다. (매장 요청)
 * 금액이 폭을 통째로 차지하면 '처음으로 / 금액 / 이전·다음'이 세 줄로 갈라져
 * 화면의 다섯 중 하나를 버튼이 먹는다. 금액을 위아래 두 칸으로 접어 폭을 아낀다.
 */
:root[data-platform='mobile'] .actions-priced { flex-wrap: nowrap; }

:root[data-platform='mobile'] .actions-priced .price {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0 auto 0 0;      /* 왼쪽에 두고 나머지를 오른쪽으로 민다 */
  line-height: var(--leading-tight);
}

:root[data-platform='mobile'] .actions-priced .price-pay { font-size: var(--text-md); }

:root[data-platform='mobile'] .actions-priced .price-list { font-size: var(--text-xs); }

/* 할인 이름표는 뺀다 — 취소선과 화면 위 혜택 띠가 이미 같은 말을 하고 있다. */
:root[data-platform='mobile'] .actions-priced .price-label { display: none; }


/* ──────────────────────────────────────────────────────────
 * 모바일 피자 카드 — 사진을 가로로 잘라 'U자'로 크게 (매장 요청)
 *
 * 둥근 피자 사진 둘레의 빈 여백이 좁은 휴대폰에서 자리를 많이 먹었다.
 * 아래쪽 반원(U자)만 넓게 보여 피자를 키우고, 카드 높이는 줄인다.
 * 피자 선택·전체 메뉴 보기·세트 담기(피자) 모두 같은 값으로 자른다.
 * ────────────────────────────────────────────────────────── */
:root[data-platform='mobile'] {
  --pizza-crop-aspect: 16 / 9;    /* 넓고 낮게 → 카드 높이 절약 */
  --pizza-crop-pos: center 72%;   /* 아래쪽 반원(U자)을 보여 준다 */
  --pizza-crop-zoom: 1.4;         /* 카드 안에서 피자를 키운다 */
}

/* 피자 사진(.pizza-img)만 자른다. 사이드·음료 사진까지 잘라 키우면 카드 밖으로 넘쳐
 * 흰 사각형이 옆 카드를 덮었다(세트 사이드 화면, 매장 제보). */
:root[data-platform='mobile'] .card-media {
  overflow: hidden;
  border-radius: var(--radius-md);
}
/* .mb-card 는 공통 규칙(.mb-card .card-img 1/1, components.css)보다 명시도가 높아 이쪽이 이긴다. */
:root[data-platform='mobile'] .card-img.pizza-img,
:root[data-platform='mobile'] .mb-card .card-img.pizza-img {
  aspect-ratio: var(--pizza-crop-aspect);
  object-fit: cover;
  object-position: var(--pizza-crop-pos);
  transform: scale(var(--pizza-crop-zoom));
  transform-origin: var(--pizza-crop-pos);
  border-radius: 0;
}

/* 세트 담기 '피자 선택' 카드 — 래퍼(.card-media)가 없어 확대는 빼고 잘라만 준다.
 * 사이드·음료(.batch-grid-food) 타일은 그대로 둔다. */
:root[data-platform='mobile'] .batch-pizza-grid:not(.batch-grid-food) .batch-img {
  aspect-ratio: var(--pizza-crop-aspect);
  object-fit: cover;
  object-position: var(--pizza-crop-pos);
}


/* ──────────────────────────────────────────────────────────
 * 모바일 — 전체 메뉴 보기 하단 바도 화면에 완전 고정 (매장 요청)
 * 스티키 띠가 본문 끝에서 어색하게 떠 보였다 → 흐름 화면처럼 바닥에 붙인다.
 * 본문이 바에 가리지 않게 아래 여백을 둔다.
 * ────────────────────────────────────────────────────────── */
:root[data-platform='mobile'] .mb-bar,
:root[data-platform='mobile'] .mb-detail-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0;
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
:root[data-platform='mobile'] .mb {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/*
 * 상단 단계 이름 — 언어 버튼 넷이 폭을 먹어 '토핑 · 크…', 'Sides & dr…' 로 잘렸다.
 * 휴대폰에서는 두 줄까지 접어 다 보이게 한다. (화면 점검으로 찾음)
 * (한 줄 고정은 구형 키오스크 크롬의 세로 줄바꿈 때문이라 키오스크는 그대로 둔다.)
 */
:root[data-platform='mobile'] .progress-title {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;   /* 'Payment' 를 'Paym/ent' 로 끊지 않는다 — 띄어쓰기에서만 접는다 */
  font-size: var(--text-sm);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: clip;
}

/*
 * 좁은 칸에서 단어가 글자마다 꺾이던 것 (화면 점검으로 찾음)
 * 토핑 분류 탭이 '치/즈', '고/기'로 세로로 쪼개졌다 — 옆 여백이 칸을 다 먹었다.
 */
:root[data-platform='mobile'] .seg-item {
  padding-inline: var(--space-2);
  white-space: nowrap;
  word-break: keep-all;
}

/* 토핑 두 칸 카드 — −·+ 버튼이 카드보다 넓어 + 가 카드 밖으로 삐져나왔다. 버튼을 조금 줄여 맞춘다. */
:root[data-platform='mobile'] .option-stepper .stepper {
  width: 100%;
  margin-left: 0;
  justify-content: space-between;
  gap: var(--space-1);
}
:root[data-platform='mobile'] .option-stepper .stepper-btn {
  width: 40px; min-width: 40px; height: 40px; min-height: 40px;
}

/*
 * 좁은 폰(360px 안팎, 안드로이드에 흔함) — 화면 점검으로 찾은 것들 (매장 요청: 모든 화면 점검)
 *   · 상단: 언어 버튼(크리스마스는 선택 테두리 3px)이 폭을 먹어 단계 이름이 잘렸다
 *   · 사이즈 창: 'Regular' 가 'Regula/r' 로 꺾였다
 *   · 크러스트 창: 'Cheese Roll' 이 잘렸다
 *   · 음료 용량 칩: 크리스마스 테두리만큼 카드 밖으로 3px
 */
:root[data-platform='mobile'] .progress .lang-btn.is-on { border-width: 2px; }
:root[data-platform='mobile'] .mode-card-name { word-break: keep-all; overflow-wrap: normal; }
:root[data-platform='mobile'] .drink-card .size-chip { border-width: 2px; }
@media (max-width: 380px) {
  :root[data-platform='mobile'] .progress { gap: var(--space-2); padding-inline: var(--space-3); }
  :root[data-platform='mobile'] .progress > .lang .lang-btn { padding-inline: 5px; }
  :root[data-platform='mobile'] .progress-title { font-size: var(--text-xs); }
  :root[data-platform='mobile'] .mode-card-name { font-size: var(--text-xl); }
  :root[data-platform='mobile'] .crust-dialog .crust-pick-name { font-size: var(--text-sm); white-space: normal; }
}