/* ==========================================================================
   DOKUMI — Walden style system
   흰 종이 위에 그린 선. 색은 쓰지 않는다.
   그림자는 첫 화면 카드 한 곳에만 쓴다 (사진이 종이처럼 떠 보이도록).
   ========================================================================== */

:root {
  --ink:    #3f3f3f;   /* 본문 텍스트 · 기본 테두리 */
  --paper:  #ffffff;   /* 캔버스 */
  --veil:   #d3cec5;   /* 헤어라인 */
  --sumi:   #030302;   /* 채워진 버튼 · 선택 상태 */
  --ash:    #686867;   /* 보조 텍스트 */
  --pebble: #acacac;   /* 가장 조용한 선 · 비활성 */

  --gutter: 24px;
  --gap-section: 48px;

  --t-caption: 10px;
  --t-body: 14px;
  --t-sm: 16px;
  --t-md: 18px;
  --t-lg: 20px;

  --font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
          'Segoe UI', 'Malgun Gothic', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

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

:focus-visible { outline: 1px solid var(--sumi); outline-offset: 2px; }

#app:focus { outline: none; }

/* --- 반복 요소 ---------------------------------------------------------- */

.wrap { padding-inline: var(--gutter); }

.label {
  font-size: var(--t-sm);
  font-weight: 400;
  margin: 0 0 20px;
  padding-inline: var(--gutter);
}

.caption { font-size: var(--t-caption); color: var(--ash); letter-spacing: 0.04em; }
.muted   { color: var(--ash); }
.mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.strike  { color: var(--pebble); text-decoration: line-through; }
.hr      { height: 1px; background: var(--veil); border: 0; margin: 0; }

/* --- 버튼 --------------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  padding: 15px 8px;
  border: 0;
  border-radius: 2px;
  background: var(--sumi);
  color: var(--paper);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { background: #000; }
.btn[disabled] { background: var(--pebble); cursor: not-allowed; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--sumi) 0 0 0 1px inset;
}
.btn--ghost:active { background: transparent; box-shadow: #000 0 0 0 1px inset; }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--veil) 0 0 0 1px inset;
}
.btn--quiet:active { background: transparent; }

/* 담긴 직후 잠깐 반전 — 눌렸다는 걸 버튼 자리에서 바로 알려준다 */
.btn--ghost[data-done] { background: var(--sumi); color: var(--paper); }

.link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--ash);
  font-size: var(--t-body);
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.link:hover, .link:active { border-bottom-color: var(--ash); }

/* --- 상단 바 ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--veil);
}
.nav__brand img { width: auto; height: 26px; }
/* 오른쪽 묶음 — 주문 조회(사람) · 장바구니 */
.nav__right { display: flex; align-items: center; gap: 16px; }

.nav__icon {
  display: flex;
  align-items: center;
  padding: 4px;                       /* 손가락으로 누를 여유 */
  margin: -4px;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav__icon svg { display: block; }
.nav__icon:hover { color: var(--sumi); }

.nav__cart { font-size: var(--t-body); display: flex; align-items: center; gap: 6px; }
.nav__count {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ash);
}

/* --- 첫 화면: 사진 세 장을 일렬로 -----------------------------------------
   글자도 값도 없이 사진만. 카드 테두리 대신 뒤에 그림자만 두어 종이가 살짝
   떠 있는 정도로 보이게 한다. */

.pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 190px);
  padding: 28px 12px;
}

.pick__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 28px);
  width: 100%;
  max-width: 1000px;
}

.pick__card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 18px 36px -20px rgba(20, 18, 15, .45),
              0 3px 10px -6px rgba(20, 18, 15, .28);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(14px);
  animation: pick-in .7s cubic-bezier(.22, .9, .26, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform .35s ease, box-shadow .35s ease;
}
.pick__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@keyframes pick-in { to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
  .pick__card:hover, .pick__card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 28px 48px -22px rgba(20, 18, 15, .5),
                0 4px 12px -6px rgba(20, 18, 15, .3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick__card { animation-duration: .01ms; transform: none; transition: none; }
}

/* --- 상품 상세 ----------------------------------------------------------
   Frama 제품 페이지의 모바일 구성을 따른다. 좌우 여백 20px, 사진은 전면,
   글자는 작게, 섹션 사이는 넓은 흰 여백으로만 나눈다. */

:root { --pdgut: 20px; }

.pd { padding-bottom: 0; }
.pdw { padding: 0 var(--pdgut); }

/* 갤러리 — 전면 5:4, 아래에 숫자 페이지 */
.gal { position: relative; }
.gal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: var(--gal-ar, 5 / 4);
  object-fit: var(--gal-fit, cover);
  background: var(--paper);      /* 자르지 않는 사진의 남는 자리 */
  scroll-snap-align: center;
}

/* 사진마다 비율이 다른 갤러리 — 칸이 지금 보이는 사진 높이를 따라갑니다.
   세로 사진은 길게, 가로 사진은 넓고 낮게. 자르지도, 여백도 없습니다. */
.gal[data-auto] .gal__track {
  align-items: flex-start;
  transition: height .32s cubic-bezier(.22, .9, .26, 1);
}
.gal[data-auto] .gal__track img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .gal[data-auto] .gal__track { transition: none; }
}

.gal__nums {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 26px 0 0;
}
.gal__num {
  min-width: 14px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ash);
  font-size: var(--t-body);
  line-height: 1;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.gal__num[data-on] { color: var(--ink); border-bottom-color: var(--ink); }

/* 사진별 설명 — 해당 사진일 때만 채워집니다.
   글자가 없을 때도 자리를 지켜 페이지가 튀지 않게 합니다. */
.gal__cap {
  margin: 10px 0 0;
  min-height: 1.5em;
  padding: 0 var(--pdgut);
  font-size: 12px;
  color: var(--ash);
  text-align: center;
  line-height: 1.5;
}

.gal__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gal__arrow {
    display: block;
    position: absolute;
    top: 42%;
    left: 12px;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 2px;
    background: var(--paper);
    box-shadow: var(--veil) 0 0 0 1px inset;
    font-size: var(--t-md);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s;
  }
  .gal__arrow--next { left: auto; right: 12px; }
  .gal:hover .gal__arrow, .gal__arrow:focus-visible { opacity: 1; }
}

/* 이름 · 가격 한 줄 */
.pd__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 44px;
}
.pd__name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.3;
}
.pd__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.pd__now { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.pd__price .strike { font-size: 12px; }

/* 옵션 — 라벨 + 선택값, 그 아래 정사각 스와치 */
.opt { padding-top: 34px; }
.opt__head { display: flex; align-items: baseline; gap: 12px; }
.opt__label { font-size: 12px; letter-spacing: .06em; }
.opt__value { font-size: 12px; color: var(--ash); }
.opt__row { display: flex; gap: 8px; padding-top: 12px; }

/* 구성 고르기 — 고를 수 있는 것임이 한눈에 보이도록 라디오 점을 둔다 */
.vars { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

.var {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 56px;                    /* 손가락으로 누르기 충분한 높이 */
  padding: 13px 14px;
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--veil) 0 0 0 1px inset;
  transition: box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 라디오 점 */
.var__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: var(--pebble) 0 0 0 1px inset;
  transition: box-shadow .15s ease;
}

.var__name  { font-size: var(--t-body); }
.var__price { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.var__sub   { grid-column: 2 / -1; font-size: 12px; color: var(--ash); }

@media (hover: hover) and (pointer: fine) {
  .var:hover { box-shadow: var(--ash) 0 0 0 1px inset; }
  .var:hover .var__dot { box-shadow: var(--ash) 0 0 0 1px inset; }
}

.var[aria-checked="true"] { box-shadow: var(--sumi) 0 0 0 2px inset; }
.var[aria-checked="true"] .var__name { font-weight: 600; }
.var[aria-checked="true"] .var__dot {
  box-shadow: var(--sumi) 0 0 0 1px inset, var(--sumi) 0 0 0 5px inset;
}
.sw {
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  box-shadow: var(--veil) 0 0 0 1px inset;
  -webkit-tap-highlight-color: transparent;
}
.sw img { width: 100%; height: 100%; object-fit: cover; }
.sw[aria-pressed="true"] { box-shadow: var(--sumi) 0 0 0 1px inset; outline: 1px solid var(--sumi); outline-offset: 2px; }

/* 수량칸 + 검은 CTA 한 줄 */
.buy { display: flex; gap: 12px; padding-top: 40px; }
.buy__qty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  box-shadow: var(--veil) 0 0 0 1px inset;
  border-radius: 2px;
}
.buy__qty button {
  width: 34px; height: 46px;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  line-height: 1;
  cursor: pointer;
}
.buy__qty button[disabled] { color: var(--pebble); cursor: not-allowed; }
.buy__qty span {
  min-width: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.buy__cta { flex: 1 1 auto; width: auto; height: 46px; padding: 0 8px; }
.buy__cart { margin-top: 8px; height: 46px; padding: 0 8px; }
/* 제작 기간 · 배송비 — 구매 버튼 바로 아래, 본문과 같은 무게로 */
.buy__ship {
  margin: 14px 0 0;
  font-size: var(--t-body);
  color: var(--ink);
  line-height: 1.6;
}
.buy__ship b { font-weight: 600; }

/* 품절 — 이름 옆 표시와 구매 자리를 대신하는 안내 */
.pd__out {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  vertical-align: 2px;
  white-space: nowrap;
}
.buy--out .buy__cta {
  width: 100%;
  letter-spacing: .1em;
}
.buy__out {
  margin: 14px 0 0;
  font-size: var(--t-body);
  color: var(--muted);
  line-height: 1.6;
}

/* 수량별 차등 할인 안내 — 수량을 올리기 전에도 눈에 들어와야 하는 문구 */
.buy__tier {
  margin: 12px 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}


/* 설명 · 안내 */
.pd__desc { margin: 44px 0 0; font-size: var(--t-sm); line-height: 1.65; }
.pd__note { margin: 22px 0 0; font-size: 12px; color: var(--ash); line-height: 1.6; }
.pd__more { display: inline-block; margin-top: 14px; font-size: 12px; border-bottom: 1px solid var(--veil); }

/* 접히는 상세 항목 */
.acc { margin-top: 44px; }
.acc__item { border-top: 1px solid var(--veil); }
.acc__item:last-child { border-bottom: 1px solid var(--veil); }
.acc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px var(--pdgut);
  border: 0;
  background: none;
  font-size: 12px;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.acc__row i { font-style: normal; color: var(--ash); }
.acc__body { padding: 0 var(--pdgut) 20px; }
.acc__p { margin: 0 0 10px; font-size: 12px; color: var(--ash); line-height: 1.7; }
.acc__img { width: 100%; }

.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  padding: 9px 0;
  border-bottom: 1px solid var(--veil);
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  vertical-align: top;
}
.spec th { width: 34%; color: var(--ash); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* 직접 만드신 상세페이지 시안 — 자르지 않고 폭만 맞춰 통째로 깐다 */
.sheet { margin-top: 56px; }
.sheet img { width: 100%; height: auto; }
.pd--sheet { padding-bottom: 0; }

.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 10px var(--pdgut) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--veil);
}
.buybar__cta { height: 46px; padding: 0 8px; }

/* 전면 연출컷 */
.edit { margin-top: 64px; }
.edit img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.edit img + img { margin-top: 40px; }
.edit__line {
  margin: 40px var(--pdgut);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.edit__line + img { margin-top: 0; }

/* 다른 제품 */
.also { margin-top: 64px; }
.also__t {
  margin: 0 var(--pdgut) 16px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
}
.also__row {
  display: flex;
  gap: 12px;
  padding: 0 var(--pdgut);
  overflow-x: auto;
  scrollbar-width: none;
}
.also__row::-webkit-scrollbar { display: none; }
.also__card { flex: 0 0 180px; }
.also__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.also__name { display: block; margin-top: 10px; font-size: 12px; }
.also__price { display: block; margin-top: 2px; font-size: 12px; color: var(--ash); }
/* --- 장바구니 ----------------------------------------------------------- */

.line { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 20px var(--gutter); border-bottom: 1px solid var(--veil); }
.line__thumb { display: block; -webkit-tap-highlight-color: transparent; }
.line img { border-radius: 2px; }
.line__name { display: block; font-size: var(--t-body); }
.line__opt { margin-top: 4px; font-size: 12px; color: var(--ash); }
.line__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
/* 수량 조절 — − · 숫자 · + 가 같은 높이로 붙고, 숫자는 두 버튼의 정가운데에 온다 */
.qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: var(--veil) 0 0 0 1px inset;
  font-size: var(--t-body);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qty__btn[disabled] { color: var(--pebble); cursor: not-allowed; }

.qty__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.line__qty { display: flex; align-items: center; }
.line__price { text-align: right; font-family: var(--mono); }
.line__price .strike { display: block; font-size: 12px; }
.line__save { font-size: var(--t-caption); color: var(--ash); }

.empty { padding: 80px var(--gutter); text-align: center; color: var(--ash); }
.empty .btn { max-width: 260px; margin: 24px auto 0; }

/* --- 금액 요약 -----------------------------------------------------------
   장바구니 · 주문서 · 주문 완료가 이 한 벌을 같이 씁니다.
   라벨은 왼쪽 끝, 금액은 오른쪽 끝. 좌우 여백은 본문과 같은 --gutter 로 맞춥니다. */

.calc { padding: 16px var(--gutter) 20px; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.row__v { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.row--total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--veil);
  font-size: var(--t-sm);
}
.row--total .row__v { font-size: var(--t-sm); }

/* 주문 내역의 상품 줄도 같은 여백·정렬을 따른다 */
.summary__line { padding: 6px var(--gutter); }
.summary__line + .calc { margin-top: 10px; }

/* --- 주문서 ------------------------------------------------------------- */

.field { padding: 0 var(--gutter); margin-top: 20px; }
.field > label { display: block; font-size: 12px; color: var(--ash); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--veil);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-sm);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--sumi); }
.field input::placeholder, .field textarea::placeholder { color: var(--pebble); }
.field textarea { resize: none; }
.field[data-bad] input, .field[data-bad] textarea { border-bottom-color: var(--sumi); }
.field__err { display: none; margin-top: 6px; font-size: 12px; }
.field[data-bad] .field__err { display: block; }

.check { display: flex; gap: 10px; align-items: flex-start; padding: 0 var(--gutter); margin-top: 28px; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #030302; flex: none; }
.check label { font-size: 12px; color: var(--ash); line-height: 1.5; }

.bank {
  margin: 24px var(--gutter) 0;
  padding: 16px;
  border-radius: 2px;
  box-shadow: var(--veil) 0 0 0 1px inset;
}
.bank dl { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; margin: 0; }
.bank dt { color: var(--ash); font-size: 12px; }
.bank dd { margin: 0; font-family: var(--mono); font-size: var(--t-body); word-break: break-all; }
.bank .btn { margin-top: 14px; }

.summary { margin-top: 40px; }
.summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.summary__line span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 주문 조회 -----------------------------------------------------------
   손님이 주문번호 + 이메일로 자기 주문 하나만 봅니다. */

.track { padding-bottom: 60px; }
.track__lead { margin: 0 0 24px; color: var(--ash); }

.track__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.track__no { font-family: var(--mono); font-size: var(--t-sm); }
.track__at { margin: 6px 0 0; font-size: 12px; color: var(--ash); }

/* 지금 어디까지 왔는지 */
.track__flow {
  display: flex;
  gap: 6px;
  margin: 20px 0 4px;
  padding: 0;
  list-style: none;
}
.track__flow li {
  flex: 1;
  padding: 8px 4px;
  border-top: 2px solid var(--veil);
  font-size: 11px;
  color: var(--pebble);
  text-align: center;
}
.track__flow li[data-on] { border-top-color: var(--sumi); color: var(--ink); font-weight: 600; }

/* 취소된 주문이라는 걸 한눈에 */
.track__canceled {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid #a35151;
  background: #f7f5f1;
  font-size: var(--t-body);
  line-height: 1.6;
}
.track__canceled b { color: #a35151; }
.track__canceled a { border-bottom: 1px solid var(--veil); }

.track__items { margin-top: 24px; }
.track__items .row { padding: 6px 0; }

.track__ship {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  background: #f7f5f1;
}
.track__ship b { font-family: var(--mono); font-weight: 400; }

.track__cancel { margin-top: 28px; }
.track__cancel .btn[data-armed] { background: #a33; color: #fff; box-shadow: none; }
.track__note { margin: 10px 0 0; font-size: 12px; color: var(--ash); line-height: 1.6; }
.track__note a { border-bottom: 1px solid var(--veil); }

.track__err {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: #f7f5f1;
  font-size: 13px;
  color: #a33;
}

.track .copy {
  border: 0; background: none; padding: 0;
  color: var(--ash); font-size: 12px; cursor: pointer;
}

.field__help { margin: 6px 0 0; font-size: 12px; color: var(--ash); }

/* 상태 뱃지 (어드민과 같은 색 규칙) */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: .03em;
  box-shadow: currentColor 0 0 0 1px inset;
}
.tag[data-s="입금대기"] { color: #9a7b2f; }
.tag[data-s="입금확인"] { color: #2f6b4f; }
.tag[data-s="제작중"]   { color: #3f3f3f; }
.tag[data-s="발송완료"] { color: #4a5f8a; }
.tag[data-s="취소"]     { color: #a35151; }

/* --- 주문 완료 ---------------------------------------------------------- */

.done { padding: 56px var(--gutter) 0; }
.done h1 { font-size: var(--t-lg); font-weight: 400; margin: 0 0 12px; }
.done__no { font-family: var(--mono); font-size: var(--t-sm); margin: 0 0 24px; }
.done__steps { counter-reset: s; margin: 32px 0 0; padding: 0; list-style: none; }
.done__steps li { counter-increment: s; position: relative; padding: 0 0 16px 26px; color: var(--ash); }
.done__steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
}
.done__steps em { font-style: normal; color: var(--ink); }

/* --- 안내 페이지 --------------------------------------------------------- */

.policy { padding: 40px 0 0; }
.policy__item { padding: 0 var(--gutter) 28px; }
.policy__item h2 { font-size: var(--t-sm); font-weight: 400; margin: 0 0 8px; }
.policy__item p { margin: 0; color: var(--ash); }

/* --- 푸터 --------------------------------------------------------------- */

.foot {
  margin-top: var(--gap-section);
  padding: 32px var(--gutter) 40px;
  border-top: 1px solid var(--veil);
}
.foot__links { display: flex; flex-direction: column; gap: 14px; font-size: 12px; }
.foot__legal { margin: 40px 0 0; font-size: var(--t-caption); color: var(--ash); line-height: 1.6; }

/* --- 토스트 ------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%; bottom: 90px;
  z-index: 40;
  transform: translate(-50%, 8px);
  padding: 10px 16px;
  border-radius: 2px;
  background: var(--sumi);
  color: var(--paper);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast[data-on] { opacity: 1; transform: translate(-50%, 0); }

/* --- 데스크톱 ------------------------------------------------------------
   PC는 소수 트래픽이라 깨지지 않는 선까지만. 종이 폭을 넘지 않게 가둔다.  */

@media (min-width: 760px) {
  :root { --gutter: 40px; --gap-section: 60px; }

  main { max-width: 1100px; margin: 0 auto; }
  .foot, .nav { max-width: 1100px; margin-inline: auto; }

  .nav__brand img { height: 32px; }
  .pick { min-height: calc(100svh - 230px); padding: 48px var(--gutter); }

  /* 사진은 왼쪽에 고정폭으로, 사고 파는 정보는 오른쪽 열에 모은다 */
  .pd {
    display: grid;
    grid-template-columns: 1fr 400px;
    column-gap: 60px;
    align-items: start;
    padding-bottom: 60px;
  }
  .pd > .gal { grid-column: 1; grid-row: 1; }
  .pd > .pdw { grid-column: 2; grid-row: 1; padding: 0 var(--gutter) 0 0; position: sticky; top: 96px; }
  .pd > .acc { grid-column: 2; grid-row: 2; margin-top: 32px; padding-right: var(--gutter); }
  .pd > .edit { grid-column: 1; grid-row: 2; margin-top: 60px; }
  .pd > .also { grid-column: 1 / -1; grid-row: 3; margin-top: 60px; }

  .pd__head { padding-top: 0; }
  .acc__row, .acc__body { padding-inline: 0; }
  .edit__line { margin-inline: 0; }
  .also__t, .also__row { padding-inline: var(--gutter); }

  .foot__links { flex-direction: row; gap: 28px; }
}