/* ═══════════════════════════════════════════════════════════════
   고객 화면. 전부 매장에서 폰으로 본다.

   무무즈 앱 패턴을 따른다 — 여백 없는 2열 그리드, 큰 사진,
   사진 위 배지, 칩 형태 메타 정보, 하단 고정 액션 바.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #191919;
  --muted: #767676;
  --faint: #ADADAD;
  --line: #EDEDED;
  --bg: #ffffff;
  --soft: #F4F4F4;
  --accent: #191919;
  --bad: #D64545;

  /* 아이폰 하단 홈 인디케이터. 고정 바가 가려지지 않게 한다. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --header-h: 50px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* 폰에서 탭할 때 파란 사각형이 번쩍이지 않게 */
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.app-main { max-width: 640px; margin: 0 auto; }
.dim { color: var(--muted); }

/*
  hidden 이 실제로 숨게 한다.

  브라우저 기본 스타일의 [hidden] { display: none } 은 **우리 규칙에 진다** —
  .buy__submit 이 display:block, .buy__qty 가 display:flex 를 주면 숨지 않는다.
  실제로 담기 버튼과 무무즈 링크가 같이 보이는 버그가 났다 (2026-10-02).

  el.hidden 으로 켜고 끄는 자리가 여러 곳이라 한 줄로 못 박는다. !important 는
  이 규칙이 display 를 쓰는 모든 컴포넌트를 이겨야 해서 필요하다.
*/
[hidden] { display: none !important; }

/* ── 헤더 ────────────────────────────────────────────────── */

.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h); padding: 0 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 30;
}
.app-header__home { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }

.cart-slot { position: relative; }
.cart-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.cart-btn__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ── 담기 결과 모달 ──────────────────────────────────────── */
/*
   화면 가운데에 잠깐 떴다가 스스로 사라진다. 자바스크립트를 쓰지 않는다 —
   htmx 가 조각을 갈아끼우면 애니메이션이 처음부터 다시 돈다.

   누를 것이 없으므로 pointer-events 를 끈다. 뜨는 동안 상품을 못 누르면
   연달아 담는 고객이 답답하다.
*/
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .28);
  pointer-events: none;
  animation: modal-fade 1.1s forwards;
}
.modal__box {
  min-width: 190px; max-width: 76vw;
  padding: 26px 28px; border-radius: 16px;
  background: rgba(25, 25, 25, .92); color: #fff; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  animation: modal-pop 1.1s forwards;
}
.modal__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 24px; font-weight: 700; line-height: 1;
}
.modal__text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.modal__sub { margin: 6px 0 0; font-size: 13px; opacity: .7; }

/*
  실패는 놓치면 안 되니 성공보다 오래 띄우되, 화면을 오래 붙들지는 않는다.
  3.6s → 2.4s → 1.5s 로 줄였다 (2026-09-09 QA). 사유는 화면에도 글로 남아 있어서
  (cart__error) 모달을 다 읽지 못해도 다시 볼 수 있다.
*/
.modal--bad { animation-duration: 1.5s; }
.modal--bad .modal__box { animation-duration: 1.5s; background: rgba(198, 58, 58, .95); }
.modal--bad .modal__text { font-size: 14px; }

/*
  뜨는 것과 사라지는 것을 둘 다 빠르게 한다 (2026-09-08 QA).

  전에는 페이드인이 전체의 8%(≈140ms)라 누른 뒤 한 박자 뒤에 나타났고, 눌린 건지
  몰라 다시 누르게 됐다. 4% 로 줄여 거의 즉시 뜬다. 대신 사라지는 구간을 20% →
  28% 로 늘려서, 총 시간이 짧아져도 사라지는 게 뚝 끊기지 않는다.
*/
@keyframes modal-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes modal-pop {
  0%   { opacity: 0; transform: scale(.9) translateY(6px); }
  6%   { opacity: 1; transform: scale(1) translateY(0); }
  72%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__box { animation-name: modal-fade; }
  .modal__box { transform: none; }
}

/* ── 진행 중인 주문 ──────────────────────────────────────── */

.open-orders { display: flex; flex-direction: column; }
/* 진행 중인 주문이 없어도 자리는 남는다 — htmx 가 갈아끼울 대상이 있어야 해서다.
   비었을 때 흔적이 보이면 안 된다. */
.open-orders:empty { display: none; }
.open-order {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--ink); color: #fff; font-size: 13px;
}
.open-order__no { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.open-order__state { opacity: .75; }
.open-order__go { margin-left: auto; opacity: .75; }

/* ── 매장 배치도 ─────────────────────────────────────────── */

.sheet__map { background: var(--soft); }
.sheet__map img { width: 100%; height: auto; }

/* ── 섹션 바로가기 ───────────────────────────────────────── */

.sections {
  display: flex; gap: 7px; padding: 12px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: sticky; top: var(--header-h); background: var(--bg);
  border-bottom: 1px solid var(--line); z-index: 20;
  scrollbar-width: none;
}
.sections::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px; flex: 0 0 auto;
  height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px;
  font-size: 13px; white-space: nowrap; align-self: center;
  line-height: 30px;
}
.chip b { font-weight: 700; }
.chip span { color: var(--muted); font-size: 12px; }

/*
  지금 보고 있는 섹션 (2026-09-08 QA — 눌러도 표시가 안 됐다).

  칩은 필터가 아니라 목록 안으로 뛰는 바로가기다. 그래서 "누른 것" 이 아니라
  "지금 화면에 있는 섹션" 을 칠한다 (sections.js). 눌러서 이동한 뒤 손으로
  스크롤해 다른 섹션에 가 있는데 누른 칩이 계속 켜져 있으면 그게 더 헷갈린다.
*/
.chip--active {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.chip--active span { color: var(--bg); opacity: .72; }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 상품 목록 ───────────────────────────────────────────── */
/* 여백 없이 화면을 꽉 채운다. 옷은 사진으로 고르므로 사진이 클수록 좋다. */

/*
  구분선은 카드에 직접 긋는다.

  예전에는 gap 1px 에 컨테이너 배경을 깔아 선처럼 보이게 했는데, 상품 수가 홀수면
  마지막 줄의 빈 칸에 그 배경이 그대로 드러나 커다란 회색 덩어리가 생겼다.
  상품 수는 매장이 정하는 값이라 홀수가 예외일 수 없다.
*/
.items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.card {
  background: var(--bg); scroll-margin-top: 100px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* 오른쪽 칸은 화면 끝이라 선을 긋지 않는다. */
.card:nth-child(2n) { border-right: 0; }
/* 카드 높이가 달라도 사진 아래 내용이 위로 붙어 있게 한다. */
.card__body { flex: 1 0 auto; }
.card__link { display: block; }

/*
  무무즈 사이트의 상품 이미지 비율에 맞춘다 (2026-09-17).
  목록 250×309, 상세 500×620. 옷 사진은 세로가 길어야 실루엣이 산다 —
  정사각형으로 두면 위아래가 잘려 기장을 못 본다.
*/
.card__figure { position: relative; aspect-ratio: 250 / 309; background: var(--soft); }
.card__img { width: 100%; height: 100%; object-fit: cover; }

/* 아이템 번호는 고객이 스태프에게 부르는 값이다. 사진 위에 항상 보이게. */
.card__no {
  position: absolute; left: 0; top: 0;
  min-width: 30px; height: 26px; padding: 0 9px;
  background: rgba(25, 25, 25, .82); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  border-bottom-right-radius: 8px;
}
/*
  품절 (2026-10-02 다시 그렸다).

  전에는 사진 전체를 흰색 78% 로 덮고 그 위에 "품절" 글자만 얹었다. 사진이 통째로
  날아가 무슨 옷인지 안 보였고, 글자는 테두리가 없어 공중에 뜬 것처럼 읽혔다.

  지금은 사진을 흑백으로 눕히고 배지 하나를 얹는다. **"못 산다" 는 흑백이 먼저
  말한다** — 글자를 읽기 전에 눈이 알아챈다. 옷은 알아볼 수 있게 남겨둔다.
  배지 모양은 아이템 번호 배지와 같은 언어다 (어두운 반투명 + 흰 글자).
*/
.card--sold-out .card__img { filter: grayscale(1) opacity(.7); }
.card__soldout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 7px 15px; border-radius: 999px;
  background: rgba(25, 25, 25, .72); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
}

.card__body { padding: 10px 12px 16px; }
.card__brand { margin: 0; font-size: 11px; color: var(--muted); }
.card__name {
  margin: 2px 0 0; font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.card__price { margin: 5px 0 0; font-size: 13px; }
.card__price b { font-size: 15px; font-weight: 700; }
/* 할인율을 판매가 앞에 둔다. 눈이 왼쪽부터 가므로 "얼마나 싼지" 가 먼저 읽힌다. */
.card__off { color: #E2452F; font-size: 15px; font-weight: 700; margin-right: 4px; }
/* 정가는 참고값이라 아랫줄에 작고 흐리게. 취소선으로 판매가와 구분한다. */
/*
  정가 줄. 할인이 없는 상품과 섞여도 같은 줄에서 태그 높이가 어긋나지 않게
  자리를 늘 잡아둔다 — 한 칸만 내려앉으면 줄이 깨져 보인다.
*/
.card__list {
  margin: 1px 0 0; font-size: 12px; color: var(--dim); text-decoration: line-through;
  min-height: 1.3em;
}

.card__tags { margin: 7px 0 0; display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--soft); color: var(--muted);
}
/* 행거는 스태프 동선의 전부다. 눈에 띄게. */
.tag--hanger {
  background: #EEF2F7; color: #3D5A80; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
  글자를 통째로 흐리게 하면(전에는 opacity .45) 상품명이 안 읽힌다. 품절이어도
  무슨 옷인지는 보여야 한다 — 고객이 그걸 들고 "다른 사이즈 있어요?" 를 물으러
  카운터에 온다. 이름은 남기고 가격만 죽인다.
*/
.card--sold-out .card__brand,
.card--sold-out .card__name { color: var(--muted); }
/*
  가격에 취소선을 걸지 않는다. 바로 아랫줄 정가가 이미 취소선을 쓰고 있어서
  (.card__list) 같은 카드 안에서 뜻이 겹친다 — 품절이 아니라 "할인" 으로 읽힌다.
  흐리게만 둔다. 못 산다는 말은 흑백 사진과 배지가 이미 하고 있다.
*/
.card--sold-out .card__price { color: var(--faint); }
.card--sold-out .card__price b { font-weight: 400; }
/* 못 사는 상품에 할인율을 띄울 이유가 없다. 자리는 아랫줄이 이미 잡아둔다. */
.card--sold-out .card__off { display: none; }
.card--sold-out .card__list { visibility: hidden; }

.sheet__count {
  text-align: center; color: var(--faint); font-size: 12px;
  padding: 24px 0 calc(28px + var(--safe-bottom));
}

/* ── 아이템 상세 ─────────────────────────────────────────── */

/* 하단 고정 바에 가리지 않게 본문 아래를 비운다 */
/* 하단 여백은 .buy 의 margin-bottom 이 잡는다. 여기서 또 잡으면 두 배로 빈다. */
.detail { padding-bottom: 0; }

.color-radio { position: absolute; opacity: 0; pointer-events: none; }

.panel { display: none; }
.color-radio:nth-of-type(1):checked ~ .panels .panel:nth-child(1),
.color-radio:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.color-radio:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.color-radio:nth-of-type(4):checked ~ .panels .panel:nth-child(4),
.color-radio:nth-of-type(5):checked ~ .panels .panel:nth-child(5),
.color-radio:nth-of-type(6):checked ~ .panels .panel:nth-child(6),
.color-radio:nth-of-type(7):checked ~ .panels .panel:nth-child(7),
.color-radio:nth-of-type(8):checked ~ .panels .panel:nth-child(8) { display: block; }

.panel__image { position: relative; aspect-ratio: 500 / 620; background: var(--soft); }
.panel__image img { width: 100%; height: 100%; object-fit: cover; }

/*
  뒤로가기.

  흰 반투명 원이었는데 밝은 상품 사진 위에서 묻혀 안 보였다. 옷 사진은 대부분
  배경이 밝아서 흰색은 거의 항상 불리하다. 어두운 바탕에 흰 화살표로 뒤집고,
  손가락이 확실히 닿게 44px 로 키운다.

  화면 맨 위 모서리라 노치·상태바를 피해 safe-area 만큼 내린다.
*/
.detail__back {
  position: absolute; left: 12px; top: calc(12px + var(--safe-top, 0px));
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(25, 25, 25, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.detail__back:active { background: rgba(25, 25, 25, .75); }
.detail__no {
  position: absolute; right: 10px; top: 10px;
  min-width: 36px; height: 28px; padding: 0 11px; border-radius: 14px;
  background: rgba(25, 25, 25, .82); color: #fff;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}

.detail__info { padding: 18px 16px 0; }
.detail__brand { margin: 0; font-size: 12px; color: var(--muted); }
.detail__name { margin: 3px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.detail__price { margin: 10px 0 0; font-size: 15px; }
.detail__price b { font-size: 24px; font-weight: 700; }
/* 할인율을 판매가 앞에 둔다. 눈이 왼쪽부터 가므로 "얼마나 싼지" 가 먼저 읽힌다. */
.detail__off { color: #E2452F; font-size: 24px; font-weight: 700; margin-right: 6px; }
/* 정가는 참고값이다. 작고 흐리게 둬서 판매가와 헷갈리지 않게 한다. */
.detail__list { color: var(--dim); font-size: 14px; margin-left: 6px; }
.detail__tags { margin: 12px 0 0; display: flex; gap: 5px; }
.detail__tags .tag { font-size: 11px; padding: 3px 8px; }

/* 컬러 스와치 */
.swatches {
  display: flex; gap: 8px; padding: 20px 16px 4px; flex-wrap: wrap;
}
.swatch {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  height: 38px; padding: 0 14px 0 8px;
  border: 1px solid var(--line); border-radius: 19px;
  font-size: 13px; color: var(--muted);
}
.swatch::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: var(--swatch); border: 1px solid rgba(0, 0, 0, .1); flex: 0 0 auto;
}
.swatch--sold-out { opacity: .4; }
.color-radio:nth-of-type(1):checked ~ .swatches .swatch:nth-child(1),
.color-radio:nth-of-type(2):checked ~ .swatches .swatch:nth-child(2),
.color-radio:nth-of-type(3):checked ~ .swatches .swatch:nth-child(3),
.color-radio:nth-of-type(4):checked ~ .swatches .swatch:nth-child(4),
.color-radio:nth-of-type(5):checked ~ .swatches .swatch:nth-child(5),
.color-radio:nth-of-type(6):checked ~ .swatches .swatch:nth-child(6),
.color-radio:nth-of-type(7):checked ~ .swatches .swatch:nth-child(7),
.color-radio:nth-of-type(8):checked ~ .swatches .swatch:nth-child(8) {
  border-color: var(--accent); color: var(--ink); font-weight: 600;
}

/* ── 사이즈 선택 + 담기 (하단 고정) ──────────────────────── */
/* 사진을 스크롤해도 항상 보여야 한다. 폰에서 담으려고 아래로 내려가는 건 불편하다. */

.buy { display: none; }
.color-radio:nth-of-type(1):checked ~ .buy:nth-of-type(1),
.color-radio:nth-of-type(2):checked ~ .buy:nth-of-type(2),
.color-radio:nth-of-type(3):checked ~ .buy:nth-of-type(3),
.color-radio:nth-of-type(4):checked ~ .buy:nth-of-type(4),
.color-radio:nth-of-type(5):checked ~ .buy:nth-of-type(5),
.color-radio:nth-of-type(6):checked ~ .buy:nth-of-type(6),
.color-radio:nth-of-type(7):checked ~ .buy:nth-of-type(7),
.color-radio:nth-of-type(8):checked ~ .buy:nth-of-type(8) {
  display: block;
  padding: 4px 16px 0;
  /* 하단 고정 버튼에 가리지 않게 그만큼 비워둔다. */
  margin-bottom: calc(76px + var(--safe-bottom));
}

.buy__sizes {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.buy__sizes::-webkit-scrollbar { display: none; }
.size {
  position: relative; flex: 0 0 auto;
  min-width: 58px; height: 44px;   /* 44px 은 손가락이 확실히 닿는 최소 크기다 */
  border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; background: var(--bg);
}
.size input { position: absolute; opacity: 0; width: 0; height: 0; }
.size:has(input:checked) {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700;
}
/* 품절 사이즈를 감추지 않는다. 없는 사이즈와 품절은 다른 정보다. */
.size--sold-out {
  color: var(--faint); background: var(--soft); cursor: not-allowed;
  text-decoration: line-through; text-decoration-color: var(--faint);
}
/*
  sold-out-size.js 가 disabled 를 풀면 고를 수 있게 된다 (2026-10-02) — 고르면 하단
  버튼이 무무즈 링크로 바뀐다. 스크립트가 안 뜨면 위 규칙대로 못 고르는 상태로 남으므로
  커서도 그때만 바뀌어야 한다. 그 조건을 선택자로 적는다.
*/
.size--sold-out:has(input:not(:disabled)) { cursor: pointer; }

.buy__note { margin: 10px 0 0; font-size: 12px; color: var(--bad); text-align: center; }

/* 수량. 사이즈 아래 한 줄로 둔다. */
.buy__qty {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
}
.buy__qty-label { font-size: 13px; color: var(--muted); }

/*
  담기 버튼만 하단에 고정한다. 사진을 어디까지 스크롤했든 손이 닿아야 한다.
  사이즈·수량까지 여기 있으면 바가 두꺼워져 화면 아래를 늘 가린다.
*/
.buy__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + var(--safe-bottom));
  max-width: 640px; margin: 0 auto;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}

.buy__submit {
  display: block; width: 100%; margin-top: 10px; height: 52px;
  border: none; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.buy__submit:disabled { background: var(--line); color: var(--faint); cursor: not-allowed; }
/*
  품절일 때 담기 대신 나가는 링크 (2026-10-02). 버튼과 같은 크기·같은 자리에 둔다 —
  손이 가는 곳이 바뀌면 안 된다. ↗ 로 새 창이라는 걸 미리 알린다.
*/
.buy__submit--app {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; box-sizing: border-box;
}

.empty { padding: 80px 16px; text-align: center; color: var(--muted); }

/* ── 공용 버튼 ───────────────────────────────────────────── */

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; border: none; border-radius: 8px;
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:disabled { background: var(--line); color: var(--faint); cursor: not-allowed; }
.btn--line { background: var(--bg); border: 1px solid var(--line); font-weight: 500; }

/* ── 주문 줄 (주문서 · 주문 상태 공용) ───────────────────── */

.cart { padding-bottom: calc(190px + var(--safe-bottom)); }

.cart__error, .cart__warn {
  margin: 12px 16px; padding: 12px 14px; border-radius: 8px;
  background: #FDF1F1; border: 1px solid #F4D6D6; color: #A63232; font-size: 13px;
}

.lines { list-style: none; margin: 0; padding: 0; }
.line {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.line--blocked { background: #FEFAFA; }
/* 담은 상품 사진. 줄이 길어지지 않게 작게 둔다 — 여기서는 확인용이지 고르는 자리가 아니다. */
.line__thumb {
  /* 목록·상세와 같은 비율(≈250:309). 여기만 어긋나면 같은 옷이 다르게 잘린다. */
  flex: 0 0 auto; width: 60px; height: 74px; border-radius: 6px; overflow: hidden;
  background: var(--tint); display: block;
}
.line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 품절·수량초과 줄은 사진도 같이 흐려야 한 눈에 "이건 안 된다" 로 읽힌다. */
.line--blocked .line__thumb img { opacity: .45; }
.line__body { flex: 1; min-width: 0; }
.line__name { margin: 0; font-size: 15px; font-weight: 500; display: flex; gap: 8px; }
.line__no {
  color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 600;
}
.line__opt {
  margin: 3px 0 0; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.line__alert { margin: 7px 0 0; font-size: 12px; color: var(--bad); font-weight: 600; }

.line__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 10px;
}
.line__price { margin: 0; font-size: 13px; }
.line__price b { font-size: 15px; font-weight: 700; }

.qty { display: flex; align-items: center; gap: 0; }
.qty form { display: contents; }
.qty button {
  width: 36px; height: 36px; border: 1px solid var(--line); background: var(--bg);
  font-size: 17px; cursor: pointer; color: inherit; line-height: 1; padding: 0;
}
.qty button:first-of-type { border-radius: 8px 0 0 8px; }
.qty button:disabled { color: var(--line); cursor: not-allowed; }
.qty__n {
  min-width: 40px; height: 36px; text-align: center; line-height: 34px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; font-size: 14px;
}
.qty form:last-of-type button { border-radius: 0 8px 8px 0; }

.line__remove button {
  width: 32px; height: 32px; border: none; background: none;
  color: var(--faint); font-size: 15px; cursor: pointer; padding: 0;
}

/* ── 주문자 정보 ─────────────────────────────────────────── */

.order-form { padding: 24px 16px 0; border-top: 8px solid var(--soft); margin-top: 8px; }
.order-form__title { font-size: 15px; margin: 0 0 16px; font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--muted); }
.field input {
  height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px;   /* 16px 미만이면 iOS 사파리가 입력 시 화면을 확대한다 */
  font-family: inherit; color: var(--ink); background: var(--bg);
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input:invalid:not(:placeholder-shown) { border-color: #E0A0A0; }
.field small { font-size: 11px; color: var(--faint); }

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 20px 0 0; font-size: 13px; line-height: 1.5; cursor: pointer;
}
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.consent small { display: block; margin-top: 3px; font-size: 11px; color: var(--faint); }

/* 합계와 주문하기를 하단에 고정한다. 폰에서 매번 끝까지 내려가지 않게. */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + var(--safe-bottom));
  max-width: 640px; margin: 0 auto;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.order-bar__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; font-size: 13px; color: var(--muted);
}
.order-bar__total strong { font-size: 19px; color: var(--ink); }
.order-bar__note { margin: 8px 0 0; font-size: 11px; color: var(--faint); text-align: center; }

/* ── 주문 상태 ───────────────────────────────────────────── */

.status { padding-bottom: calc(40px + var(--safe-bottom)); }

.status__no {
  margin: 16px; padding: 26px; border-radius: 14px;
  background: var(--soft); text-align: center;
}
.status__no-label { margin: 0; font-size: 12px; color: var(--muted); }
.status__no-value {
  margin: 6px 0 0; font-size: 44px; font-weight: 800; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.steps { list-style: none; display: flex; margin: 22px 16px 18px; padding: 0; }
.step { flex: 1; text-align: center; position: relative; font-size: 11px; color: var(--faint); }
.step::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 100%;
  height: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step--done::before { background: var(--ink); }
.step__dot {
  position: relative; z-index: 1; display: block; width: 18px; height: 18px;
  margin: 0 auto 8px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
}
.step--done .step__dot { background: var(--ink); border-color: var(--ink); }
.step--now .step__dot { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(25, 25, 25, .1); }
.step--done, .step--now { color: var(--ink); font-weight: 600; }

.status__state { margin: 0 16px; font-size: 18px; font-weight: 700; text-align: center; }

/*
  대기 인원은 주문번호 다음으로 자주 보는 값이다 (2026-09-08 QA).
  회색 14px 로는 안내 문구와 구분이 안 돼 그냥 지나쳤다. 숫자를 키우고 색을
  본문 색으로 올린다.
*/
.status__waiting {
  margin: 10px 16px 0; text-align: center;
  font-size: 16px; color: var(--ink);
}
.status__waiting b {
  color: var(--ink); font-size: 30px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  margin: 0 2px;
}
.status__guide {
  margin: 12px 16px 0; text-align: center; color: var(--muted);
  font-size: 13px; line-height: 1.7;
}
.status__guide--ready { color: var(--ink); font-weight: 500; }
.status__guide--bad { color: var(--bad); }
/*
  픽업 마감은 놓치면 주문이 취소되는 값이다. 회색 12px 로 묻혀 있어서
  안 보인다는 지적을 받았다 (2026-09-08 QA).

  라벨은 작게 두고 시각만 크게 올린다 — 고객이 찾는 것은 "몇 시까지" 하나다.
*/
.status__deadline {
  margin: 20px 16px 0; padding: 16px 14px; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line);
  text-align: center; font-size: 12px; color: var(--muted);
}
.status__deadline .status__deadline-label {
  display: block; font-size: 12px; color: var(--muted);
  letter-spacing: .02em; margin-bottom: 2px;
}
.status__deadline b {
  display: block; color: var(--ink);
  font-size: 26px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.status__deadline small { display: block; margin-top: 7px; font-size: 11px; color: var(--faint); }

.status__label { font-size: 12px; color: var(--muted); margin: 32px 16px 4px; font-weight: 600; }
.status__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 16px; font-size: 13px; color: var(--muted);
}
.status__total strong { font-size: 19px; color: var(--ink); }
.status__phone { margin: 0 16px 20px; font-size: 12px; color: var(--faint); text-align: center; }
/* .btn 이 width:100% 라 좌우 margin 을 그대로 얹으면 그만큼 문서가 화면보다
   넓어진다. 가로로 16px 밀리고, iOS 는 거기에 고무줄 스크롤을 얹어 화면이
   상하좌우로 흔들린다. width 를 auto 로 돌려 margin 안쪽을 채우게 한다. */
/*
  하단 액션 영역 (2026-09-28 QA).

  버튼을 두 줄로 쌓는다. 폰에서 옆으로 나란히 두면 한 칸이 좁아져 문구가 깨진다.

  .btn 이 width:100% 라 좌우 margin 을 그대로 얹으면 문서가 화면보다 넓어진다.
  컨테이너에 padding 을 주고 버튼은 폭을 그대로 채우게 한다.
*/
.status__actions {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 16px;
}
.status__actions form { display: contents; }

/* ── 담기 수량 스테퍼 ────────────────────────────────────── */
/* 하단 바 높이를 늘리지 않게 담기 버튼과 한 줄에 둔다. */

.buy__bar .buy__submit { margin-top: 0; }

.stepper { display: flex; flex: 0 0 auto; }
.stepper button {
  width: 42px; height: 52px; border: 1px solid var(--line); background: var(--bg);
  font-size: 18px; line-height: 1; color: inherit; cursor: pointer; padding: 0;
  font-family: inherit;
}
.stepper button:first-child { border-radius: 8px 0 0 8px; }
.stepper button:last-child { border-radius: 0 8px 8px 0; }
.stepper button:disabled { color: var(--line); cursor: not-allowed; }
.stepper input {
  width: 46px; height: 52px; text-align: center; padding: 0;
  border: 1px solid var(--line); border-left: none; border-right: none;
  background: var(--bg); color: var(--ink);
  font-size: 16px; font-weight: 600; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.stepper input:focus { outline: none; }

/* 픽업이 확인된 뒤의 안내. 본문 색으로 올려 "끝났다" 가 읽히게 한다. */
.status__guide--done { color: var(--ink); font-weight: 500; }