/* paceone — 스타일. 값은 tokens.css 의 변수만 쓴다(raw 색 0). 원칙(DESIGN.md):
 * ① 흰 면은 올라온 층 — 바탕 chalk, paper 는 타일·머리·패널·모달·표. 카드에 테두리·그림자 0, 그림자는 떠 있는 층만.
 * ② 코발트는 한 점 — 글자·18px 이하 점·2px 선·표장. 주 버튼·선택 채움은 먹.
 * ③ 숫자는 tabular, 영문 display 는 Archivo ExtraCondensed 한 폭. 모서리는 각지게, 둥근 것은 점뿐.
 * 브레이크포인트: <720 모바일 · 720 · 1024(유틸 띠·메가메뉴·레일이 붙는다) · 1280(목록 4열) */

:root {
  --sp-1: var(--spacing);
  --sp-2: calc(var(--spacing) * 2);
  --sp-3: calc(var(--spacing) * 3);
  --sp-4: calc(var(--spacing) * 4);
  --sp-5: calc(var(--spacing) * 5);
  --sp-6: calc(var(--spacing) * 6);
  --sp-8: calc(var(--spacing) * 8);
  --sp-10: calc(var(--spacing) * 10);
  --sp-12: calc(var(--spacing) * 12);
  --sp-16: calc(var(--spacing) * 16);
  --head-h: var(--spacing-header-m);
  color-scheme: light;
}
@media (min-width: 1024px) {
  :root { --head-h: var(--spacing-header); }
}

/* ── 리셋 (:where 로 특이도 0, lessons #49) ─────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, table) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select) { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(img, svg) { display: block; max-width: 100%; }
:where(table) { border-collapse: collapse; }
:where(s) { text-decoration: line-through; }
:where([hidden]) { display: none !important; }
:where(h1) { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
:where(h2) { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
:where(h3) { font-size: var(--text-base); }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--head-h) + var(--sp-4));
}
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-sans--font-feature-settings);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-height: 100svh;
}
html[data-lock] body { overflow: hidden; }
main { display: block; outline: none; }

:focus-visible { outline: 2px solid var(--color-pace); outline-offset: 2px; }
.club :focus-visible, .hero :focus-visible, .sband :focus-visible, .shopall :focus-visible { outline-color: var(--color-pace-on-dark); }

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: 60; padding: var(--sp-3) var(--sp-4); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus { transform: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.shell { width: 100%; max-width: calc(var(--spacing-shell) + var(--spacing-gutter) * 2); margin-inline: auto; padding-inline: var(--spacing-gutter); }

/* ── 활자 부품 ───────────────────────────────────────────────────────── */
.bh__en, .lhead__en, .lhead__eye, .subhead__word, .hero__t, .hero__num, .camp__t, .club__t, .club__gn, .ptile__z, .ptile__en, .rank,
.lcell__date, .foot__en, .mega__card-t, .shopall__t, .rv__score, .logo__word, .popular__n, .pace__label {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-variation-settings: var(--font-display--font-variation-settings);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  word-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow { font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2); }

/* ── 버튼 · 칩 · 탭 ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--spacing-tap); padding: 0 var(--sp-5);
  font-size: var(--text-sm); font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-none);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--ink { background: var(--color-ink); color: var(--color-paper); }
.btn--line { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); }
.btn--paper { background: var(--color-paper); color: var(--color-ink); }
.btn--line-light { color: var(--color-paper); border-color: var(--color-paper); }
.btn--l { min-height: calc(var(--spacing) * 12); font-size: var(--text-base); }
.btn--xl { min-height: calc(var(--spacing) * 14); font-size: var(--text-md); }
.btn--s { min-height: 2.25rem; padding: 0 var(--sp-3); font-size: var(--text-xs); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--color-ink-2); }
  .btn--line:hover { background: var(--color-mist); }
  .btn--paper:hover { background: var(--color-mist); }
  .btn--line-light:hover { background: var(--color-paper); color: var(--color-ink); }
}
.icon-btn { display: inline-grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); color: var(--color-ink); position: relative; }
.icon-btn .ic { width: 1.5rem; height: 1.5rem; }
.icon-btn--dark { color: var(--color-paper); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--spacing-tap); padding: 0 var(--sp-4);
  border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  border-radius: var(--radius-none); transition: transform var(--duration-fast) var(--ease-out);
}
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.chip__n { color: var(--color-ink-3); font-weight: 500; }
.chip[aria-pressed="true"] .chip__n { color: var(--color-mute); }

.tabs { display: flex; gap: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: var(--spacing-tap); min-height: var(--spacing-tap); padding: 0 var(--sp-1);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); white-space: nowrap;
}
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--sp-1); height: 2px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-in-out); }
.tab[aria-selected="true"] { color: var(--color-ink); font-weight: 700; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab__n { font-weight: 500; color: var(--color-ink-3); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--color-ink); } }

.more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.more .ic { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .more:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-pace); } }

.badges { position: absolute; left: var(--sp-2); top: var(--sp-2); display: flex; gap: var(--sp-1); z-index: 2; }
.badge { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 var(--sp-2); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); font-weight: 700; letter-spacing: var(--tracking-caps); border-radius: var(--radius-xs); white-space: nowrap; }

.dots { display: flex; align-items: center; gap: var(--sp-1); min-height: 1.125rem; }
.dot { display: inline-block; width: var(--spacing-swatch); height: var(--spacing-swatch); border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--color-line); flex: none; }
.dots .dot { width: 0.875rem; height: 0.875rem; }
.dots__more { font-size: var(--text-xs); color: var(--color-ink-3); margin-left: 2px; }
.sw-black { background: var(--color-swatch-black); } .sw-charcoal { background: var(--color-swatch-charcoal); } .sw-grey { background: var(--color-swatch-grey); }
.sw-stone { background: var(--color-swatch-stone); } .sw-chalk { background: var(--color-swatch-chalk); } .sw-white { background: var(--color-swatch-white); }
.sw-navy { background: var(--color-swatch-navy); } .sw-cobalt { background: var(--color-swatch-cobalt); } .sw-sage { background: var(--color-swatch-sage); }
.sw-olive { background: var(--color-swatch-olive); } .sw-sand { background: var(--color-swatch-sand); } .sw-mud { background: var(--color-swatch-mud); }
.sw-volt { background: var(--color-swatch-volt); } .sw-ember { background: var(--color-swatch-ember); } .sw-lilac { background: var(--color-swatch-lilac); }
.sw-burgundy { background: var(--color-swatch-burgundy); }

/* 페이스 존 막대 — 이 템플릿만의 한 가지. 채움 = 존 번호, 채움 ink / 빈 칸 line, 선택된 필터에서만 pace */
.pace { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pace__bar { display: inline-flex; gap: 2px; }
.pace__bar i { display: block; width: var(--pw); height: var(--ph); background: var(--color-line); }
.pace--s { --pw: 0.875rem; --ph: 0.25rem; }
.pace--m { --pw: 1.75rem; --ph: 0.375rem; }
.pace--l { --pw: 2.5rem; --ph: 0.5rem; }
.pace--l .pace__bar { gap: 3px; }
.pace--z1 i:nth-child(-n + 1), .pace--z2 i:nth-child(-n + 2), .pace--z3 i:nth-child(-n + 3), .pace--z4 i:nth-child(-n + 4) { background: var(--color-ink); }
.pace__label { font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-caps); color: var(--color-ink-2); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); row-gap: 0; }
.price__pct { color: var(--color-pace); font-weight: 700; }
.price__now { font-size: var(--text-md); line-height: var(--text-md--line-height); font-weight: 700; }
.price__was { font-size: var(--text-sm); color: var(--color-ink-3); }

.dday { color: var(--color-pace); font-weight: 700; }

.meter { display: block; height: 4px; background: var(--color-line); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--p); background: var(--color-ink); }
.meter--dark { background: var(--color-night-line); }
.meter--dark i { background: var(--color-pace-on-dark); }

.emblem { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); font-family: var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: var(--font-display--font-variation-settings); font-weight: 800; font-size: var(--text-lg); color: var(--color-paper); flex: none; }
.emblem--warmup { background: var(--color-grade-warmup); color: var(--color-ink); }
.emblem--runner { background: var(--color-grade-runner); }
.emblem--pacer { background: var(--color-grade-pacer); box-shadow: 0 0 0 1px var(--color-night-2); }
.emblem--elite { background: var(--color-grade-elite); }

/* ── 자리표시자 · 에셋 ────────────────────────────────────────────────── */
.ph { position: relative; display: block; width: 100%; overflow: hidden; background: var(--color-paper); color: var(--color-line); }
.ph[data-ratio="1:1"] { aspect-ratio: var(--ratio-tile); }
.ph[data-ratio="4:5"] { aspect-ratio: var(--ratio-look); }
.ph[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.ph[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.ph[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.ph--fill { position: absolute; inset: 0; aspect-ratio: auto !important; height: 100%; }
.ph__art { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph__id { position: absolute; z-index: 2; left: var(--sp-2); bottom: var(--sp-2); font-size: var(--text-2xs); line-height: 1.2; font-weight: 500; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); }
.ph--dark { background: var(--color-night); color: var(--color-night-line); }
.ph__art--track { inset: 0; left: 0; top: 0; width: 100%; height: 100%; stroke-width: 1.2; }
.ph--dark .ph__id { left: auto; right: var(--sp-3); top: var(--sp-3); bottom: auto; color: var(--color-night-2); }
.ph--photo { background: var(--color-line); color: var(--color-mist); }
.ph--photo .ph__id { color: var(--color-ink-2); }
/* 다듬기 v2 — 누끼 판은 초크. 에셋이 흰 바탕(254)이라 곱하기로 판 색에 녹인다(누끼가 흰 페이지 위에 뜨지 않게) */
.ph--paper { background: var(--color-mist); } /* 판정(메인, 다듬기 v2): 상품·누끼 판은 초크보다 한 단 옅은 mist — nb 의 연회색 판에 맞춤. 공지 띠·요약·빈 상태 판은 초크 그대로 */
.ph--paper.has-img img { mix-blend-mode: multiply; }
.ph.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__tile .ph.has-img img, .mini__tile .ph.has-img img, .ctile .ph.has-img img, .icon-card .ph.has-img img, .gal .ph.has-img img, .swatch .ph.has-img img, .modal__tile .ph.has-img img, .lcell__tile .ph.has-img img { object-fit: contain; }
.only-m { display: block; }
.only-d { display: none; }
@media (min-width: 720px) {
  .only-m { display: none; }
  .only-d { display: block; }
}

/* ── 공지 띠 · 유틸 띠 ──────────────────────────────────────────────── */
.promo { position: relative; display: flex; align-items: center; justify-content: center; height: var(--spacing-promo); padding-inline: var(--spacing-gutter) calc(var(--spacing-tap) + var(--sp-2)); background: var(--color-chalk); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; }
html[data-promo-closed] .promo { display: none; }
.promo__t { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; white-space: nowrap; }
.promo__long { display: none; }
.promo__short { overflow: hidden; text-overflow: ellipsis; }
.promo__t a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--spacing-tap); min-height: var(--spacing-tap); text-decoration: underline; text-underline-offset: 3px; color: var(--color-ink); flex: none; }
.promo__x { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); color: var(--color-ink); }
.promo__x .ic { width: 1rem; height: 1rem; }
@media (min-width: 720px) { .promo__long { display: inline; } .promo__short { display: none; } }

.util { display: none; }
@media (min-width: 1024px) {
  .util { display: block; height: var(--spacing-util); background: var(--color-paper); box-shadow: inset 0 -1px 0 var(--color-line); font-size: var(--text-xs); color: var(--color-ink-2); }
  .util__in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
  .util__l, .util__r { display: flex; align-items: center; height: 100%; }
  .util__l { gap: var(--sp-5); }
  .util__club { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-ink); }
  .util__club .ic { width: 1rem; height: 1rem; }
  .util__r li { display: flex; align-items: center; }
  .util__r li + li::before { content: ""; width: 1px; height: 0.625rem; background: var(--color-line); margin-inline: var(--sp-3); }
  .util a { display: inline-flex; align-items: center; height: var(--spacing-util); }
  .util a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
}

/* ── GNB ─────────────────────────────────────────────────────────────── */
.gnb { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); box-shadow: var(--shadow-rule); }
.gnb.is-stuck { box-shadow: var(--shadow-rule); }
.gnb__in { position: relative; display: grid; grid-template-columns: var(--spacing-tap) 1fr auto; align-items: center; height: var(--spacing-header-m); column-gap: var(--sp-2); }
.gnb__burger { margin-left: calc(var(--sp-3) * -1); }
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--spacing-tap); justify-self: center; color: var(--color-ink); }
.logo__mark { width: 1.625rem; height: 1.625rem; stroke-width: 2.4; }
.logo__word { font-size: 1.625rem; line-height: 1; letter-spacing: 0.02em; }
.gnb__nav { display: none; }
.gnb__tools { display: flex; align-items: center; justify-self: end; margin-right: calc(var(--sp-3) * -1); }
.gnb__me { display: none; }
.gnb__cart .count { position: absolute; top: 0.375rem; right: 0.125rem; display: grid; place-items: center; min-width: var(--spacing-swatch); height: var(--spacing-swatch); padding: 0 3px; border-radius: var(--radius-full); background: var(--color-pace); color: var(--color-paper); font-size: var(--text-2xs); font-weight: 700; line-height: 1; }
.gnb__dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-pace); margin-right: var(--sp-2); flex: none; }
@media (min-width: 1024px) {
  .gnb__in { grid-template-columns: auto 1fr auto; height: var(--spacing-header); column-gap: var(--sp-10); position: static; }
  .gnb__burger { display: none; }
  .logo { justify-self: start; }
  .gnb__nav { display: block; height: 100%; }
  .gnb__list { display: flex; gap: var(--sp-8); height: 100%; }
  .gnb__item { display: flex; height: 100%; }
  .gnb__link { position: relative; display: inline-flex; align-items: center; height: 100%; font-size: var(--text-md); font-weight: 700; white-space: nowrap; }
  .gnb__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-ink); transform: scaleX(0); transition: transform var(--duration-base) var(--ease-out); }
  .gnb__link[aria-current="page"]::after, .gnb__item.is-open > .gnb__link::after { transform: scaleX(1); }
  .gnb__me { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--spacing-tap); padding-inline: var(--sp-2); font-size: var(--text-sm); font-weight: 500; }
  .gnb__me .ic { width: 1.5rem; height: 1.5rem; }
  .gnb__me-t { display: inline-flex; align-items: center; min-height: var(--spacing-tap); }
  .gnb__sep { width: 1px; height: 0.75rem; background: var(--color-line); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .gnb__link:hover::after { transform: scaleX(1); } }

/* 메가메뉴 — GNB 아래 전폭 paper 판. 열림은 main.js 가 .is-open(호버·포커스) 또는 #menu= 로 */
.mega { display: none; }
@media (min-width: 1024px) {
  /* 닫힌 겹은 display:none — 숨은 글이 문서에 남지 않게. 들어옴은 @starting-style, 나감은 allow-discrete */
  .mega {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
    background: var(--color-paper); box-shadow: var(--shadow-pop);
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete;
  }
  .gnb__item.is-open > .mega { display: block; opacity: 1; transform: none; transition-duration: 160ms; }
  @starting-style { .gnb__item.is-open > .mega { opacity: 0; transform: translateY(-8px); } }
  .mega__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 13.75rem); padding-block: var(--sp-8) var(--sp-10); }
  .mega__col { padding-inline: var(--sp-6); }
  .mega__col:first-child { padding-left: 0; }
  .mega__col + .mega__col { box-shadow: inset 1px 0 0 var(--color-line); }
  .mega__h { display: inline-flex; align-items: center; gap: 2px; min-height: 2rem; margin-bottom: var(--sp-2); font-size: var(--text-base); font-weight: 800; }
  .mega__h .ic { width: 1rem; height: 1rem; }
  .mega__col li a { display: inline-flex; align-items: center; min-height: 2rem; font-size: var(--text-sm); color: var(--color-ink-2); }
  .mega__col li a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
  .mega__sub { margin-top: var(--sp-4); margin-bottom: var(--sp-1); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); }
  .mega__pace a { gap: var(--sp-2); }
  .mega__pace span:last-child { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); }
  .mega__card { display: flex; flex-direction: column; gap: var(--sp-1); padding-left: var(--sp-6); box-shadow: inset 1px 0 0 var(--color-line); }
  .mega__card-t { margin-top: var(--sp-2); font-size: var(--text-lg); line-height: 1; }
  .mega__card-s { font-size: var(--text-xs); color: var(--color-ink-3); }
  .mega-veil { display: none; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: var(--color-veil); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete; }
  html[data-menu-open] .mega-veil, html[data-search] .mega-veil { display: block; opacity: 1; transition-duration: 160ms; }
  @starting-style { html[data-menu-open] .mega-veil, html[data-search] .mega-veil { opacity: 0; } }
  html[data-search] .mega-veil { pointer-events: auto; }
}
.mega-veil { display: none; }

/* 검색 층 */
.search {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-paper); overflow-y: auto; overscroll-behavior: contain;
  display: none; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete;
}
html[data-search] .search { display: block; opacity: 1; transform: none; transition-duration: 160ms; }
@starting-style { html[data-search] .search { opacity: 0; transform: translateY(-8px); } }
.search__in { padding-block: var(--sp-3) var(--sp-10); }
.search__bar { display: flex; align-items: center; gap: var(--sp-1); border-bottom: 2px solid var(--color-ink); }
.search__input { flex: 1; min-width: 0; height: calc(var(--spacing) * 14); border: 0; background: none; font-size: var(--text-md); font-weight: 500; outline: none; -webkit-appearance: none; appearance: none; }
.search__input::placeholder { color: var(--color-ink-3); }
.search__go { display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); }
.search__go .ic { width: 1.5rem; height: 1.5rem; }
.search__cols { display: grid; gap: var(--sp-8); margin-top: var(--sp-6); }
.search__h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--text-sm); font-weight: 700; }
.search__time { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.qchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qchip { display: inline-flex; align-items: center; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border: 1px solid var(--color-line); background: var(--color-paper); }
.qchip a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--text-sm); }
.qchip__x { display: grid; place-items: center; width: 2.5rem; height: 2.25rem; color: var(--color-ink-3); }
.qchip__x .ic { width: 0.875rem; height: 0.875rem; }
.popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--sp-4); }
.popular a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--spacing-tap); font-size: var(--text-sm); }
.popular__n { width: 1.25rem; font-size: var(--text-lg); line-height: 1; color: var(--color-ink-3); text-align: right; }
.popular li:nth-child(-n + 3) .popular__n { color: var(--color-ink); }
.popular li:nth-child(-n + 3) a { font-weight: 700; }
.minis { display: grid; gap: var(--sp-3); }
@media (min-width: 1024px) {
  .search { position: absolute; inset: 100% 0 auto 0; z-index: 3; max-height: calc(100svh - var(--spacing-header)); box-shadow: var(--shadow-pop); }
  .search__in { padding-block: var(--sp-6) var(--sp-10); }
  .search__cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-12); }
  .minis:not(.minis--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 모바일 서랍 */
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; transition: display 280ms allow-discrete; }
html[data-nav] .drawer { display: block; }
.drawer__panel, .bsheet__panel, .filters { outline: none; }
.drawer__panel {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: min(86vw, 22.5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-paper); transform: translateX(-100%); transition: transform 280ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
html[data-nav] .drawer__panel { transform: none; transition-duration: var(--duration-slow); }
@starting-style { html[data-nav] .drawer__panel { transform: translateX(-100%); } html[data-nav] .drawer .veil { opacity: 0; } }
.drawer .veil, .modal .veil, .bsheet .veil { position: absolute; inset: 0; background: var(--color-veil); opacity: 0; transition: opacity 280ms var(--ease-out); }
html[data-nav] .drawer .veil { opacity: 1; }
.drawer__head { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); padding-top: max(var(--sp-5), env(safe-area-inset-top)); background: var(--color-chalk); color: var(--color-ink); }
.drawer__head .icon-btn { position: absolute; right: var(--sp-1); top: max(var(--sp-2), env(safe-area-inset-top)); }
.drawer__who { font-size: var(--text-base); padding-right: var(--spacing-tap); }
.drawer__who b { font-weight: 800; }
.drawer__next { font-size: var(--text-xs); color: var(--color-ink-3); }
.drawer__nav { display: grid; padding: var(--sp-2) var(--sp-5); }
.drawer__link, .drawer__grp summary { display: flex; align-items: center; min-height: calc(var(--spacing) * 13); font-size: var(--text-md); font-weight: 700; box-shadow: inset 0 -1px 0 var(--color-line); }
.drawer__grp summary { justify-content: space-between; list-style: none; cursor: pointer; }
.drawer__grp summary::-webkit-details-marker { display: none; }
.drawer__grp .mega { display: block; position: static; opacity: 1; transform: none; box-shadow: none; transition: none; }
.drawer__grp .mega__in { display: grid; gap: var(--sp-4); padding: var(--sp-3) 0 var(--sp-5); }
.drawer__grp .mega__h { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 800; }
.drawer__grp .mega__h .ic { width: 1rem; height: 1rem; }
.drawer__grp .mega__col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer__grp .mega__col li a { display: flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-2); }
.drawer__grp .mega__sub { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); margin-top: var(--sp-2); }
.drawer__grp .mega__pace a { gap: var(--sp-2); }
.drawer__grp .mega__card, .drawer__grp .shell { display: none; }
.drawer__grp .mega__in.shell { display: grid; padding-inline: 0; }
.drawer__util { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-4) var(--sp-5) var(--sp-8); background: var(--color-mist); }
.drawer__util a { display: flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 1024px) { .drawer { display: none; } }

/* ── 꼬리 ────────────────────────────────────────────────────────────── */
.foot { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 1px 0 var(--color-line); margin-top: var(--spacing-section); padding-bottom: env(safe-area-inset-bottom); }
.foot__big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: inset 0 -1px 0 var(--color-line); }
.foot__big a { display: grid; gap: var(--sp-1); padding-block: var(--sp-8); }
.foot__en { font-size: 1.5rem; line-height: 0.95; color: var(--color-ink); }
.foot__ko { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); color: var(--color-ink-3); }
.foot__ko .ic { width: 0.875rem; height: 0.875rem; }
.foot__mid { display: grid; gap: var(--sp-8); padding-block: var(--sp-10); }
.foot__h { margin-bottom: var(--sp-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-ink); }
.foot__col ul { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); }
.foot__col a { display: inline-flex; align-items: center; min-width: var(--spacing-tap); min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot__sns { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); }
.foot__sns a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.foot__legal { margin-top: var(--sp-3); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-3); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-6) var(--sp-8); box-shadow: inset 0 1px 0 var(--color-line); font-size: var(--text-xs); color: var(--color-ink-3); }
.foot__bottom strong { color: var(--color-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 720px) {
  .foot__big { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__big li + li a { box-shadow: inset 1px 0 0 var(--color-line); padding-left: var(--sp-6); }
  .foot__big a { padding-block: var(--sp-12); }
  .foot__en { font-size: var(--text-2xl); }
  .foot__mid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__co { grid-column: 1 / -1; }
  .foot__col ul { display: grid; }
  .foot__col a { min-height: 2rem; }
}
@media (min-width: 1024px) {
  .foot__mid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); }
  .foot__co { grid-column: auto; }
}

/* ── 공통 블록 ───────────────────────────────────────────────────────── */
.sec { margin-top: var(--spacing-section); }
.sec--first { margin-top: var(--sp-12); }
.sec--tight { margin-top: var(--spacing-block); }
.sec__more { display: flex; justify-content: center; margin-top: var(--spacing-block); }
.bh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-6); }
.bh__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-width: 0; font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.bh__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); text-wrap: balance; }
.bh__ko { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); }
.bh__r { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; max-width: 100%; }
.bh__r .tabs { min-width: 0; }

.crumbs { display: none; }
@media (min-width: 720px) {
  .crumbs { display: block; padding-block: var(--sp-4); font-size: var(--text-xs); color: var(--color-ink-3); }
  .crumbs ol { display: flex; flex-wrap: wrap; }
  .crumbs li + li::before { content: "/"; margin-inline: var(--sp-2); color: var(--color-mute); }
  .crumbs a:hover { color: var(--color-ink); text-decoration: underline; }
  .crumbs [aria-current] { color: var(--color-ink-2); }
}

/* ── 격자 · 카드 ─────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-grid-row) var(--spacing-grid); }
@media (min-width: 720px) { .grid--4, .grid--list, .grid--plp { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid--list, .grid--plp { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.card__tile { position: relative; overflow: hidden; background: var(--color-chalk); margin-bottom: var(--sp-1); }
.card__tile .ph { transition: transform var(--duration-base) var(--ease-out); }
.card__name { font-size: var(--text-base); line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__meta { font-size: var(--text-xs); line-height: 1.3; color: var(--color-ink-3); margin-top: calc(var(--sp-1) * -1); }
.card__launch { color: var(--color-pace); font-weight: 700; }
.card .price { margin-top: var(--sp-1); }
.card__rate { font-size: var(--text-xs); line-height: 1.3; color: var(--color-ink-3); }
.card__rev { color: var(--color-ink-3); }
.card .pace { margin-top: var(--sp-1); }
.wish { position: absolute; right: 0; top: 0; z-index: 2; display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); color: var(--color-ink); }
.wish .ic, .wishbtn .ic, .buybar__wish .ic { transition: transform var(--duration-fast) var(--ease-out); }
.wish[aria-pressed="true"] .ic, .wishbtn[aria-pressed="true"] .ic, .buybar__wish[aria-pressed="true"] .ic { fill: var(--color-pace); stroke: var(--color-pace); }
.wish:active .ic, .wishbtn:active .ic, .buybar__wish:active .ic { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__tile .ph { transform: scale(1.03); }
  .card:hover .card__name a { text-decoration: underline; text-underline-offset: 3px; }
}
.card:active .card__tile { transform: scale(0.98); transition: transform var(--duration-fast) var(--ease-out); }
.rank { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); background: var(--color-paper); font-size: 2.5rem; line-height: 1; }
@media (max-width: 719px) { .rank { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); font-size: 1.75rem; } }

.mini { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: var(--spacing-tap); }
.mini__tile { display: block; background: var(--color-chalk); }
.mini__txt { display: grid; gap: 2px; min-width: 0; }
.mini__name { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__note { font-size: var(--text-xs); color: var(--color-ink-3); }
.mini__price { font-size: var(--text-sm); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .mini:hover .mini__name { text-decoration: underline; } }

/* 가로 캐러셀 */
.rail { position: relative; container-type: inline-size; --cols: 2.3; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100cqi - var(--spacing-grid) * (var(--cols) - 1)) / var(--cols)); gap: var(--spacing-grid); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-4); scrollbar-width: none; margin-inline: calc(var(--sp-4) * -1); padding: 0 var(--sp-4) var(--sp-1); }
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; min-width: 0; }
.rail__btns { display: none; }
@media (min-width: 720px) { .rail { --cols: 3; } }
@media (min-width: 1024px) {
  .rail { --cols: 4; }
  .rail__btns { display: block; }
  .rail__btn { position: absolute; z-index: 3; top: calc((100cqi - var(--spacing-grid) * 3) / 8 - var(--spacing-tap) / 2); display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-pop); transition: opacity var(--duration-fast) var(--ease-out); }
  .rail__btn[data-rail-prev] { left: calc(var(--spacing-tap) / -2); }
  .rail__btn[data-rail-next] { right: calc(var(--spacing-tap) / -2); }
  .rail__btn:disabled { opacity: 0; pointer-events: none; }
}
.rail--rank { --cols: 2.3; }
@media (min-width: 720px) { .rail--rank { --cols: 3.3; } }
@media (min-width: 1024px) { .rail--rank { --cols: 5; } .rail--rank .rail__btn { top: calc((100cqi - var(--spacing-grid) * 4) / 10 - var(--spacing-tap) / 2); } }

/* ── A 메인 ──────────────────────────────────────────────────────────── */
.hero { position: relative; aspect-ratio: var(--ratio-hero-m); background: var(--color-night); color: var(--color-paper); overflow: hidden; }
.hero__slides, .hero__slide, .hero__media { position: absolute; inset: 0; }
.hero__slide { opacity: 0; visibility: hidden; transition: opacity var(--duration-hero) var(--ease-in-out), visibility 0s linear var(--duration-hero); }
.hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity var(--duration-hero) var(--ease-in-out), visibility 0s; }
/* 2~4장 사진은 load 뒤에 받는다 — 겹쳐 있어 loading=lazy 만으로는 첫 화면에서 같이 받힌다 */
.hero:not(.is-ready) .hero__slide:not(.is-on) .has-img { display: none; }
/* 사진 위 글자 — 글 덩어리 뒤는 scrim 끝값(56%)을 그대로 채우고 덩어리 밖에서만 풀린다(에셋 실측: 흰 바탕 최악 4.4 · 실제 사진 p95 ≥ 4.5, NOTES 에셋 반영).
 * 모바일은 글이 아래 절반 전폭 → 아래에서, ≥720 은 글이 왼쪽 칸 → 왼쪽에서(--scrim-x = 판 왼끝 + 가장 긴 제목 줄 + 여유) */
/* 다듬기 v2 — 헤더 아래 첫 화면을 히어로가 채운다: 높이 = min(100svh − 머리 띠들, 폭 × 9/16), 모바일은 4:5 그대로. 공지 띠를 닫으면 그만큼 커진다 */
.hero { --promo-h: var(--spacing-promo); }
html[data-promo-closed] .hero { --promo-h: 0px; }
.hero { --scrim-x: calc(max(var(--spacing-gutter), (100% - var(--spacing-shell)) / 2) + var(--text-display-l) * 4 + var(--sp-8)); }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim) 16.5rem, transparent 24rem); pointer-events: none; }
.hero__copy { position: absolute; left: 0; right: 0; bottom: calc(var(--sp-5) + var(--spacing-tap) + var(--sp-3)); display: grid; justify-items: start; gap: var(--sp-2); }
.hero__eye { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); }
.hero__t { display: grid; font-size: var(--text-display-l); line-height: var(--text-display-l--line-height); }
.hero__sub { font-size: var(--text-md); font-weight: 700; line-height: 1.4; }
.hero__cta { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.hero__cta .btn { min-height: var(--spacing-tap); }
.hero__ctrl { position: absolute; left: 0; right: 0; bottom: var(--sp-5); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); pointer-events: none; }
.hero__ctrl > * { pointer-events: auto; }
.hero__num { font-size: var(--text-lg); line-height: 1; letter-spacing: 0.04em; }
.hero__num b { font-weight: 800; }
/* 진행 막대 — 1024 미만에서는 보이지 않게 두되 렌더는 한다(animationend 가 자동 넘김을 민다) */
.hero__bars { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero__bar { display: block; width: var(--sp-12); height: 2px; background: var(--color-night-2); overflow: hidden; }
.hero__bar i { display: block; width: 100%; height: 100%; background: var(--color-paper); transform: scaleX(0); transform-origin: left; }
.hero__bar.is-past i { transform: scaleX(1); }
.hero__bar.is-on i { transform: scaleX(0); }
.hero.is-paused .hero__bar.is-on i, .hero:not(.is-run) .hero__bar.is-on i { transform: scaleX(1); }
.hero.is-run .hero__bar.is-on i { animation: hero-fill var(--hero-dwell) var(--ease-linear) forwards; }
.hero.is-run.is-hold .hero__bar.is-on i { animation-play-state: paused; }
.hero__btns [data-hero-prev], .hero__btns [data-hero-next] { display: none; }
.hero__i-play { display: none; }
.hero.is-paused .hero__i-pause { display: none; }
.hero.is-paused .hero__i-play { display: block; }
/* 모바일: 쪽 번호·멈춤은 CTA 줄 오른쪽 (wireframe A1) */
@media (max-width: 719px) {
  .hero__copy { bottom: var(--sp-5); }
  .hero__ctrl { bottom: var(--sp-5); gap: 0; }
  .hero__sub { font-size: var(--text-base); }
}
@media (min-width: 720px) {
  /* 넓고 낮은 화면일수록 위아래가 잘린다 — 인물 머리·신발 윗선이 남게 초점을 위로(잘림은 아래가 더 많이) */
  .hero .ph.has-img img { object-position: 50% 30%; }
  .hero { aspect-ratio: auto; height: max(26rem, min(calc(100svh - var(--promo-h) - var(--spacing-header-m)), calc(100vw / (var(--ratio-hero))))); }
  .hero__copy { bottom: var(--sp-12); gap: var(--sp-3); }
  .hero__sub { font-size: var(--text-lg); }
  .hero__cta { gap: var(--sp-3); margin-top: var(--sp-3); }
  .hero__cta .btn { min-height: calc(var(--spacing) * 12); padding-inline: var(--sp-6); font-size: var(--text-base); }
  .hero__ctrl { bottom: var(--sp-12); gap: var(--sp-5); }
  .hero__media::after { background: linear-gradient(to right, var(--color-scrim) 0, transparent var(--scrim-x)), linear-gradient(to right, var(--color-scrim) 0, var(--color-scrim) var(--scrim-x), transparent calc(var(--scrim-x) + 22rem)), linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim) 6rem, transparent 13rem); }
}
@media (min-width: 1024px) {
  .hero__bars { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; gap: var(--sp-1); }
  .hero__btns [data-hero-prev], .hero__btns [data-hero-next] { display: inline-grid; }
  .hero { height: max(26rem, min(calc(100svh - var(--promo-h) - var(--spacing-util) - var(--spacing-header)), calc(100vw / (var(--ratio-hero))))); }
}
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.qcats { margin-top: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.qcats::-webkit-scrollbar { display: none; }
.qcats__list { display: flex; gap: var(--sp-2); padding-inline: var(--spacing-gutter); width: max-content; }
@media (min-width: 720px) { .qcats { display: none; } }

.lstrip { display: grid; gap: var(--sp-3); }
.lcell__a { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-3); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.lcell__tile { display: block; }
.lcell__tile .ph { background: var(--color-mist); }
.lcell__txt { display: grid; gap: 2px; min-width: 0; }
.lcell__date { font-size: var(--text-2xl); line-height: 1; }
.lcell__meta { font-size: var(--text-xs); color: var(--color-ink-3); }
.lcell__name { font-size: var(--text-base); font-weight: 700; line-height: 1.35; margin-top: var(--sp-1); }
.lcell__color { font-weight: 500; color: var(--color-ink-2); }
.lcell__way { font-size: var(--text-xs); color: var(--color-ink-2); }
@media (min-width: 720px) { .lstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-grid); } }
@media (min-width: 1024px) { .lcell__a { grid-template-columns: 7.5rem minmax(0, 1fr); padding: var(--sp-4); } }
@media (hover: hover) and (pointer: fine) { .lcell__a:hover .lcell__name { text-decoration: underline; text-underline-offset: 3px; } }

.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-grid); }
.ptile { display: grid; align-content: start; gap: var(--sp-2); height: 100%; padding: var(--sp-5); background: var(--color-chalk); }
.ptile__z { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.ptile__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); margin-top: calc(var(--sp-1) * -1); }
.ptile .pace { margin-block: var(--sp-2) var(--sp-1); }
.ptile .pace--l { --pw: 1.75rem; }
@media (min-width: 720px) { .ptile .pace--l { --pw: 1.5rem; } }
@media (min-width: 1024px) { .ptile .pace--l { --pw: 2.5rem; } }
.ptile__ko { font-size: var(--text-sm); color: var(--color-ink-2); }
.ptile__n { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--sp-2); font-size: var(--text-sm); font-weight: 700; }
.ptile__n .ic { width: 0.875rem; height: 0.875rem; }
@media (min-width: 720px) { .ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .ptile:hover .ptile__n { text-decoration: underline; text-underline-offset: 3px; } }

.camp { display: grid; background: var(--color-chalk); }
.camp__img { position: relative; order: -1; aspect-ratio: var(--ratio-look); }
.camp__txt { display: grid; align-content: center; justify-items: start; gap: var(--sp-3); padding: var(--sp-8) var(--sp-5); }
.camp__t { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.camp__d { max-width: 30rem; color: var(--color-ink-2); }
.camp__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (min-width: 720px) {
  .camp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 27rem; }
  .camp__img { order: 0; aspect-ratio: auto; }
  .camp__txt { padding: var(--sp-10); }
}

.stories { display: grid; gap: var(--spacing-grid-row) var(--spacing-grid); }
.story { position: relative; display: grid; gap: var(--sp-2); align-content: start; }
.story__t a::after { content: ""; position: absolute; inset: 0; bottom: calc(var(--spacing-tap) + var(--sp-2)); }
.story__img { display: block; overflow: hidden; margin-bottom: var(--sp-1); }
.story__img .ph { transition: transform var(--duration-base) var(--ease-out); }
.story__t { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 700; }
.story__d { font-size: var(--text-sm); color: var(--color-ink-2); }
.story__links { position: relative; z-index: 1; display: flex; gap: var(--sp-4); }
.story__links a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-line); }
@media (min-width: 720px) { .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) {
  .story:hover .story__img .ph { transform: scale(1.03); }
  .story__links a:hover { text-decoration-color: var(--color-pace); }
}

.shopall { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--spacing-grid); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shopall::-webkit-scrollbar { display: none; }
.shopall li { scroll-snap-align: start; }
.shopall__a { position: relative; display: block; overflow: hidden; background: var(--color-night); color: var(--color-paper); }
.shopall__a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim) 8rem, transparent 13rem); pointer-events: none; }
.shopall__t { position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 1; display: grid; font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.shopall__k { font-family: var(--font-sans); font-stretch: normal; font-variation-settings: normal; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; margin-top: var(--sp-2); }
@media (min-width: 720px) { .shopall { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

.club { margin-top: var(--spacing-section); background: var(--color-night); color: var(--color-chalk); }
.p-home .foot { margin-top: 0; box-shadow: inset 0 1px 0 var(--color-line); }
.club__in { display: grid; gap: var(--sp-8); padding-block: var(--sp-12); }
.club__me { display: grid; gap: var(--sp-3); align-content: start; }
.club__t { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.club__who { font-size: var(--text-base); color: var(--color-night-2); }
.club__who b { color: var(--color-chalk); }
.club__me .meter { max-width: 22rem; }
.club__grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
.club__g { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
.club__g .emblem { grid-row: span 2; }
.club__gn { font-size: var(--text-lg); line-height: 1; }
.club__gk { font-size: var(--text-xs); color: var(--color-night-2); }
.club__now { grid-column: 2; font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-pace-on-dark); }
.club__btn { justify-self: start; }
@media (min-width: 1024px) {
  .club__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--sp-12); padding-block: var(--sp-16); }
  .club__grades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── E 서브메인 ──────────────────────────────────────────────────────── */
.subhead { display: grid; gap: var(--sp-4); padding-block: var(--sp-4) var(--sp-6); }
.subhead__word { font-size: var(--text-display-xl); line-height: var(--text-display-xl--line-height); margin-left: -0.02em; }
.subhead__meta { display: grid; gap: var(--sp-1); }
.subhead__ko { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.subhead__n, .subhead__note { font-size: var(--text-sm); color: var(--color-ink-3); }
.subhead .tabs { margin-top: var(--sp-2); }
@media (min-width: 1024px) {
  .subhead { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--sp-10); padding-block: var(--sp-2) var(--sp-8); }
  .subhead__meta { justify-self: end; justify-items: end; text-align: right; padding-bottom: var(--sp-2); }
}
.sband { position: relative; display: grid; background: var(--color-night); }
.sband__img { position: relative; aspect-ratio: 4 / 3; }
.sband__txt { position: absolute; inset: auto var(--spacing-gutter) 0; display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-5); color: var(--color-paper); }
.sband__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim) 11rem, transparent 15rem); pointer-events: none; }
.sband__t { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.sband__d { font-size: var(--text-sm); }
.sband__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
@media (min-width: 720px) {
  .sband__img { aspect-ratio: 21 / 9; }
  .sband__img::after { background: linear-gradient(to right, var(--color-scrim) 0, var(--color-scrim) calc(var(--spacing-gutter) + 30rem), transparent calc(var(--spacing-gutter) + 46rem)); }
  .sband__txt { inset: 0 auto 0 var(--spacing-gutter); align-content: center; max-width: 30rem; padding: var(--sp-10); }
  .sband__t { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
  .sband__d { font-size: var(--text-base); }
  .sband__cta { gap: var(--sp-3); margin-top: var(--sp-3); }
}
.ctiles { display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: var(--spacing-grid); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ctiles::-webkit-scrollbar { display: none; }
.ctiles li { scroll-snap-align: start; }
.ctile { display: grid; gap: var(--sp-2); }
.ctile__img { display: block; background: var(--color-chalk); }
.ctile__t { font-size: var(--text-sm); font-weight: 700; text-align: center; min-height: var(--spacing-tap); display: grid; place-items: center; }
@media (min-width: 720px) { .ctiles { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; } }
@media (hover: hover) and (pointer: fine) { .ctile:hover .ctile__t { text-decoration: underline; text-underline-offset: 3px; } }
.iconic { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--spacing-grid); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.iconic::-webkit-scrollbar { display: none; }
.iconic > * { scroll-snap-align: start; }
.icon-card { position: relative; display: grid; gap: var(--sp-2); align-content: start; }
.icon-card__tile { display: block; background: var(--color-chalk); margin-bottom: var(--sp-2); overflow: hidden; }
.icon-card__t { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 700; }
.icon-card__t a::after { content: ""; position: absolute; inset: 0; }
.icon-card__d { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 26rem; }
@media (min-width: 720px) { .iconic { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
@media (hover: hover) and (pointer: fine) { .icon-card:hover .icon-card__t a { text-decoration: underline; text-underline-offset: 3px; } }
.glist-empty { padding: var(--sp-10) 0; color: var(--color-ink-3); }

/* ── F · G 목록 ──────────────────────────────────────────────────────── */
.lhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); padding-block: var(--sp-6) var(--sp-5); }
.lhead__t { display: grid; gap: var(--sp-2); font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.lhead__en { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); text-wrap: balance; }
.lhead__ko { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); }
.lhead--g .lhead__t { grid-template-columns: auto auto; align-items: baseline; column-gap: var(--sp-2); }
.lhead__eye { grid-column: 1 / -1; font-size: var(--text-lg); line-height: 1; color: var(--color-ink-3); }
.lhead__ko2 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.lhead__n { font-size: var(--text-lg); font-weight: 700; color: var(--color-ink-3); }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); }
.chips::-webkit-scrollbar { display: none; }
.chips .chip { min-height: 2.25rem; }
@media (max-width: 1023px) { .chips .chip { min-height: var(--spacing-tap); } }
@media (min-width: 1024px) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-4); margin-bottom: var(--sp-2); }
.tools__n { font-size: var(--text-sm); color: var(--color-ink-2); margin-right: auto; }
.tools__n b { color: var(--color-ink); }
.sortsel { position: relative; display: inline-flex; align-items: center; }
.sortsel select { min-height: var(--spacing-tap); padding: 0 calc(var(--sp-4) + 1.25rem) 0 var(--sp-4); border: 1px solid var(--color-edge); border-radius: var(--radius-none); background: var(--color-paper); font-size: var(--text-md); font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sortsel .ic { position: absolute; right: var(--sp-3); width: 1rem; height: 1rem; pointer-events: none; }
@media (min-width: 1024px) { .sortsel select { font-size: var(--text-sm); min-height: 2.5rem; } }

.plp { position: relative; }
.plp__main { min-width: 0; }
.mtools { position: sticky; top: var(--spacing-header-m); z-index: calc(var(--z-sticky) - 1); display: flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-2); margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); background: var(--color-paper); box-shadow: inset 0 -1px 0 var(--color-line); }
.mtools__btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--spacing-tap); padding: 0 var(--sp-4); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-md); font-weight: 700; }
.mtools .sortsel { margin-left: auto; }
.plp__main .tools .sortsel { display: none; }
.plp__main .tools { padding-top: var(--sp-3); }

/* 필터 — ≥1024 레일, <1024 아래 시트(같은 DOM) */
.filters {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); display: flex; flex-direction: column; max-height: 88svh;
  background: var(--color-paper); transform: translateY(100%); display: none;
  transition: transform 280ms var(--ease-out), display 280ms allow-discrete;
}
html[data-sheet="filter"] .filters { display: flex; transform: none; transition-duration: var(--duration-slow); }
@starting-style { html[data-sheet="filter"] .filters { transform: translateY(100%); } }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--spacing-gutter); box-shadow: inset 0 -1px 0 var(--color-line); }
.filters__t { font-size: var(--text-lg); font-weight: 800; }
.filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--spacing-gutter); }
.filters__foot { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-2); padding: var(--sp-3) var(--spacing-gutter); padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--color-line); }
.filters__foot .btn { min-height: calc(var(--spacing) * 12); }
.sheet-veil { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: var(--color-veil); opacity: 0; display: none; transition: opacity 280ms var(--ease-out), display 280ms allow-discrete; }
html[data-sheet="filter"] .sheet-veil { display: block; opacity: 1; transition-duration: var(--duration-slow); }
@starting-style { html[data-sheet="filter"] .sheet-veil { opacity: 0; } }

.fgrp { box-shadow: inset 0 -1px 0 var(--color-line); }
.fgrp__btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: calc(var(--spacing) * 13); font-size: var(--text-sm); font-weight: 700; text-align: left; }
.fgrp__on { color: var(--color-pace); font-weight: 700; }
.pm { width: 1rem; height: 1rem; }
.fgrp__btn .pm, .drawer__grp summary .pm { margin-left: auto; }
.pm--minus, .fgrp__btn[aria-expanded="true"] .pm--plus, .drawer__grp[open] > summary .pm--plus { display: none; }
.fgrp__btn[aria-expanded="true"] .pm--minus, .drawer__grp[open] > summary .pm--minus { display: block; }
.fgrp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); }
.fgrp__btn[aria-expanded="true"] + .fgrp__body, .fgrp h3:has([aria-expanded="true"]) + .fgrp__body { grid-template-rows: 1fr; }
.fgrp__in { min-height: 0; overflow: hidden; display: grid; gap: 0; }
.fgrp__btn[aria-expanded="false"] ~ .fgrp__body .fgrp__in, .fgrp h3:has([aria-expanded="false"]) + .fgrp__body .fgrp__in { visibility: hidden; }
.fgrp h3:has([aria-expanded="true"]) + .fgrp__body .fgrp__in { padding-bottom: var(--sp-4); }
.fopt { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-2); text-align: left; }
.fopt::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; box-shadow: inset 0 0 0 1px var(--color-edge); background: var(--color-paper) no-repeat center / 0.875rem; }
.fopt[aria-pressed="true"] { color: var(--color-ink); font-weight: 700; }
.fopt[aria-pressed="true"]::before { background-color: var(--color-ink); box-shadow: none; background-image: linear-gradient(var(--color-ink), var(--color-ink)); }
.fopt:disabled { color: var(--color-mute); cursor: default; }
.fopt__l { min-width: 0; }
.fopt__n { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); }
.fopt[aria-pressed="true"]::after { content: ""; position: absolute; width: 0.5rem; height: 0.3125rem; margin-left: 0.3125rem; margin-top: -0.1875rem; border-left: 2px solid var(--color-paper); border-bottom: 2px solid var(--color-paper); transform: rotate(-45deg); }
.fopt { position: relative; }
.fgrp--zone .fopt::before { display: none; }
.fgrp--zone .fopt .pace__bar i { width: 1.5rem; }
.fgrp--zone .fopt[aria-pressed="true"]::after { display: none; }
.fgrp--zone .fopt[aria-pressed="true"] .pace--z1 i:nth-child(-n + 1),
.fgrp--zone .fopt[aria-pressed="true"] .pace--z2 i:nth-child(-n + 2),
.fgrp--zone .fopt[aria-pressed="true"] .pace--z3 i:nth-child(-n + 3),
.fgrp--zone .fopt[aria-pressed="true"] .pace--z4 i:nth-child(-n + 4) { background: var(--color-pace); }
.fgrp--zone .fopt .fopt__l { font-weight: 700; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); }
.fsizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); padding-top: var(--sp-1); }
.fsize { min-height: var(--spacing-tap); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-sm); font-weight: 500; transition: transform var(--duration-fast) var(--ease-out); }
.fsize:active { transform: scale(0.98); }
.fsize[aria-pressed="true"], .fsize[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.fsize[aria-disabled="true"] { color: var(--color-mute); background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--color-line) 50%, transparent calc(50% + 0.5px)), var(--color-paper); border-color: var(--color-line); }
.fcolors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-2); }
.fcolors .fopt::before { display: none; }
.fcolors .fopt[aria-pressed="true"]::after { display: none; }
.fcolors .fopt[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-ink); }
.fcolors .fopt__n { display: none; }

@media (min-width: 1024px) {
  .plp { display: grid; grid-template-columns: var(--spacing-rail) minmax(0, 1fr); column-gap: var(--spacing-rail-gap); align-items: start; }
  .mtools, .sheet-veil { display: none; }
  .filters {
    position: sticky; top: calc(var(--spacing-header) + var(--sp-4)); z-index: auto; max-height: calc(100svh - var(--spacing-header) - var(--sp-8));
    display: flex; transform: none; background: none; transition: none; box-shadow: inset 0 1px 0 var(--color-ink);
  }
  .filters__head, .filters__foot { display: none; }
  .filters__body { padding-inline: 0 var(--sp-2); scrollbar-width: thin; }
  .fgrp__btn { min-height: calc(var(--spacing) * 12); }
  .fopt { min-height: 2rem; }
  .fsizes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fsize { min-height: 2.25rem; font-size: var(--text-xs); }
  .plp__main .tools .sortsel { display: inline-flex; }
  .plp__main .tools { padding-top: 0; min-height: 3.5rem; }
}

.applied { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.applied:empty { display: none; }
.achip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 2.25rem; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--color-ink); background: var(--color-paper); font-size: var(--text-xs); font-weight: 700; }
.achip .ic { width: 0.875rem; height: 0.875rem; }
.aclear { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--sp-2); font-size: var(--text-xs); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .achip, .aclear { min-height: var(--spacing-tap); } }

.empty { display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-16) var(--sp-5); background: var(--color-chalk); text-align: center; }
.empty__art { width: 4rem; height: 4rem; fill: none; stroke: var(--color-ink-3); stroke-width: 1.5; stroke-linecap: round; }
.empty__t { font-size: var(--text-md); font-weight: 700; }

.pager { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--spacing-block); }
.pager:empty { display: none; }
.pager__n { display: grid; place-items: center; min-width: var(--spacing-tap); height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-line); }
.pager__n[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); font-weight: 700; box-shadow: none; }
.pager__n:disabled { color: var(--color-mute); cursor: default; }
.pager__arrow .ic { width: 1rem; height: 1rem; }
@media (min-width: 1024px) { .pager__n { min-width: 2rem; height: 2rem; } }

/* ── H 상품 상세 ─────────────────────────────────────────────────────── */
.pdp { display: grid; gap: var(--sp-6); }
.gal { position: relative; margin-inline: calc(var(--spacing-gutter) * -1); }
.gal__thumbs { display: none; }
.gal__stage { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--color-chalk); }
.gal__stage::-webkit-scrollbar { display: none; }
.gal__slide { scroll-snap-align: start; }
@media (max-width: 1023px) {
  /* 실기기 첫 화면(393×660)에서 이름·가격이 구매 막대 위에 보이게 갤러리 높이를 묶고, 이름·가격을 배지 줄보다 먼저 */
  .gal__stage { height: min(100vw, 56svh); }
  .gal__slide .ph { height: 100%; aspect-ratio: auto; }
  .pdp { gap: var(--sp-4); }
  .pdp__opt > * { order: 2; }
  .pdp__name { order: 0; }
  .pdp__sub, .pdp__price, .pdp__pts { order: 1; }
  .pdp__sub, .pdp__pts { margin-top: calc(var(--sp-1) * -1); }
}
.gal__count { position: absolute; right: var(--spacing-gutter); bottom: var(--sp-3); padding: var(--sp-1) var(--sp-2); background: var(--color-paper); font-size: var(--text-xs); font-weight: 500; }
.pdp__opt { display: grid; align-content: start; gap: var(--sp-3); min-width: 0; }
.pdp__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pdp__top .pdp__rate { margin-left: auto; }
.pdp__top .badge { background: var(--color-chalk); }
.pdp__code { font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: var(--tracking-caps); }
.pdp__name { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; text-wrap: balance; }
.pdp__sub { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: calc(var(--sp-2) * -1); }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-lg); line-height: 1.3; }
.pdp__price strong { font-weight: 800; }
.pdp__price .price__was { font-size: var(--text-sm); }
.pdp__pts { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: calc(var(--sp-2) * -1); }
.pdp__pts a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; margin-left: var(--sp-1); }
.pdp__rate { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--spacing-tap); font-size: var(--text-xs); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line); }
.pdp__rate b { color: var(--color-ink); }
.pdp__rate .stars { font-size: var(--text-xs); }
.stars { color: var(--color-ink); letter-spacing: 1px; font-size: var(--text-sm); }
.stars__off { color: var(--color-line); }
.opt { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); box-shadow: inset 0 1px 0 var(--color-line); }
.opt__row { display: flex; align-items: center; justify-content: space-between; }
.opt__l { font-size: var(--text-sm); font-weight: 700; }
.opt__l b { font-weight: 500; color: var(--color-ink-2); margin-left: var(--sp-1); }
.opt__hint { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 500; }
.opt__guide { display: inline-flex; align-items: center; gap: 2px; min-height: 2rem; font-size: var(--text-xs); color: var(--color-ink-2); }
.opt__guide .ic { width: 0.875rem; height: 0.875rem; }
.opt__pace { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--color-ink-2); }
.opt__pace b { color: var(--color-ink); letter-spacing: var(--tracking-caps); }
.opt__err { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.opt__err .ic { width: 1rem; height: 1rem; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch { position: relative; width: 4rem; background: var(--color-chalk); }
.swatch::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-ink); transform: scaleX(0); transition: transform var(--duration-base) var(--ease-out); }
.swatch[aria-checked="true"]::after { transform: scaleX(1); }
.swatch .ph__art { stroke-width: 3; }
.sbox { position: relative; }
.sbox__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: calc(var(--spacing) * 12); padding: 0 var(--sp-4); border: 1px solid var(--color-edge); background: var(--color-paper); font-size: var(--text-sm); text-align: left; }
.sbox__btn .ic { width: 1rem; height: 1rem; transition: transform var(--duration-base) var(--ease-out); }
.sbox__btn[aria-expanded="true"] { border-color: var(--color-ink); }
.sbox__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.sbox.is-chosen .sbox__btn { font-weight: 700; }
.sbox__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 16.5rem; overflow-y: auto; overscroll-behavior: contain; background: var(--color-paper); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--color-ink); display: none; opacity: 0; transform: translateY(-8px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete; }
.sbox.is-open .sbox__list { display: block; opacity: 1; transform: none; transition-duration: 160ms; }
@starting-style { .sbox.is-open .sbox__list { opacity: 0; transform: translateY(-8px); } }
.sopt { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--spacing-tap); padding: 0 var(--sp-4); font-size: var(--text-sm); cursor: pointer; }
.sopt__s { min-width: 2.5rem; font-weight: 700; }
.sopt__ship { color: var(--color-ink-3); font-size: var(--text-xs); }
.sopt[aria-selected="true"] { background: var(--color-mist); }
.sopt[aria-selected="true"] .sopt__s::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--sp-2); vertical-align: middle; border-radius: var(--radius-full); background: var(--color-pace); }
.sopt:hover, .sopt:focus-visible { background: var(--color-mist); outline: none; box-shadow: inset 2px 0 0 var(--color-ink); }
.sopt[aria-disabled="true"] { color: var(--color-mute); cursor: not-allowed; }
.sopt[aria-disabled="true"] .sopt__s { text-decoration: line-through; }
.sopt[aria-disabled="true"] .sopt__ship { color: var(--color-mute); }
.opt__sizes { display: grid; gap: var(--sp-2); }
.opt__sizes--w { grid-template-columns: minmax(0, 1fr) auto; }
.wtoggle { display: grid; grid-template-columns: repeat(2, auto); }
.wtoggle__b { min-height: calc(var(--spacing) * 12); padding: 0 var(--sp-3); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-sm); white-space: nowrap; }
.wtoggle__b + .wtoggle__b { border-left: 0; }
.wtoggle__b[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.sel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "opt x" "qty price"; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--color-mist); }
.sel__opt { grid-area: opt; font-size: var(--text-sm); font-weight: 700; }
.sel .qty { grid-area: qty; justify-self: start; }
.sel__price { grid-area: price; font-weight: 700; justify-self: end; }
.sel__x { grid-area: x; justify-self: end; margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0 0; }
.sel__x .ic { width: 1rem; height: 1rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-edge); background: var(--color-paper); }
.qty__b { display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); }
.qty__b .ic { width: 1rem; height: 1rem; }
.qty__b:disabled { color: var(--color-mute); cursor: default; }
.qty__n { min-width: 2rem; text-align: center; font-weight: 700; }
.pdp__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--sp-3); box-shadow: inset 0 2px 0 var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.pdp__total strong { font-size: var(--text-2xl); line-height: 1.1; font-weight: 800; }
.pdp__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pdp__btns .btn--xl { grid-column: 1 / -1; }
.wishbtn .ic { width: 1.125rem; height: 1.125rem; }
.ship { width: 100%; font-size: var(--text-xs); margin-top: var(--sp-2); }
.ship th { width: 5rem; padding: var(--sp-1) 0; text-align: left; font-weight: 700; vertical-align: top; }
.ship td { padding: var(--sp-1) 0; color: var(--color-ink-2); }
.ship tbody { display: table-row-group; }
.ship tr:first-child th, .ship tr:first-child td { padding-top: var(--sp-3); box-shadow: inset 0 1px 0 var(--color-line); }
.clubline { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--spacing-tap); padding: var(--sp-2) var(--sp-3); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); font-size: var(--text-xs); color: var(--color-ink-2); }
.clubline span { font-weight: 800; letter-spacing: var(--tracking-caps); color: var(--color-ink); }
.clubline .ic { margin-left: auto; width: 0.875rem; height: 0.875rem; }

@media (min-width: 1024px) {
  .pdp { grid-template-columns: var(--spacing-thumb) minmax(0, 1fr) clamp(22.5rem, 36%, 30rem); column-gap: var(--sp-4); align-items: start; }
  .gal { display: contents; }
  .gal__thumbs { display: grid; align-content: start; gap: var(--sp-2); }
  .gal__thumb { position: relative; display: block; background: var(--color-mist); }
  .gal__thumb::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 2px; background: var(--color-ink); transform: scaleY(0); transition: transform var(--duration-base) var(--ease-out); }
  .gal__thumb[aria-pressed="true"]::before { transform: scaleY(1); }
  .gal__thumb .ph__art { stroke-width: 3; }
  .gal__stage { position: relative; display: block; overflow: hidden; aspect-ratio: 1; }
  .gal__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); }
  .gal__slide.is-on { opacity: 1; visibility: visible; transition: opacity var(--duration-base) var(--ease-out), visibility 0s; }
  .gal__count { display: none; }
  .pdp__opt { position: sticky; top: calc(var(--spacing-header) + var(--sp-4)); margin-left: var(--sp-8); gap: var(--sp-3); }
  .opt { padding-top: var(--sp-3); }
}
@media (min-width: 1280px) { .pdp__opt { margin-left: var(--sp-12); } }

.ptabs-wrap { margin-top: var(--spacing-block); }
.ptabs { position: sticky; top: var(--spacing-header-m); z-index: calc(var(--z-sticky) - 1); padding-block: var(--sp-1); background: var(--color-paper); box-shadow: var(--shadow-rule); }
.tabs--pdp { gap: 0; }
.tabs--pdp .tab { flex: 1; justify-content: center; min-height: calc(var(--spacing-tabbar) - var(--sp-2)); font-size: var(--text-sm); }
.tabs--pdp .tab::after { bottom: 0; }
@media (min-width: 1024px) { .ptabs { top: var(--spacing-header); } .tabs--pdp .tab { font-size: var(--text-base); } }
.ptabs__panels { padding-top: var(--spacing-block); }
.info { display: grid; gap: var(--spacing-block); }
.info__imgs { display: grid; gap: var(--spacing-grid); }
.info__h { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--sp-3); }
.info__h + .spec, .spec + .info__h { margin-top: 0; }
.spec + .info__h { margin-top: var(--spacing-block); }
.spec, .stable { width: 100%; background: var(--color-paper); font-size: var(--text-sm); }
.spec th, .spec td, .stable th, .stable td { padding: var(--sp-3) var(--sp-4); text-align: left; box-shadow: inset 0 -1px 0 var(--color-line); }
.spec th { width: 7.5rem; background: var(--color-mist); font-weight: 700; }
.stable thead th { background: var(--color-mist); font-weight: 700; box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); }
.stable tbody th { font-weight: 700; }
.stable__cap { caption-side: bottom; padding-top: var(--sp-3); text-align: left; font-size: var(--text-xs); color: var(--color-ink-3); }
.zones { display: grid; gap: var(--sp-2); }
.zones__i { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--color-chalk); font-size: var(--text-sm); color: var(--color-ink-2); }
.zones__i b { color: var(--color-ink); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); min-width: 5.5rem; }
.zones__i.is-me { box-shadow: inset 2px 0 0 var(--color-ink); font-weight: 700; color: var(--color-ink); }
@media (min-width: 720px) {
  .info__imgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info__imgs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info__imgs--1 { grid-template-columns: minmax(0, 24rem); }
}
@media (min-width: 1024px) { .info { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .info__imgs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info__imgs--3 > :first-child { grid-column: 1 / -1; } }

.rv { display: grid; gap: var(--spacing-block); }
.rv__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-6); align-items: center; padding: var(--sp-6); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.rv__score { grid-row: span 2; font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.rv__stars { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.rv__dist { grid-column: 1 / -1; display: grid; gap: var(--sp-1); font-size: var(--text-xs); color: var(--color-ink-2); }
.rv__dist li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--sp-3); }
.rv__dist li span:last-child { text-align: right; }
.rv__bar { display: block; height: 6px; background: var(--color-line); }
.rv__bar i { display: block; height: 100%; width: var(--p); background: var(--color-ink); }
.rv__fit { grid-column: 1 / -1; font-size: var(--text-sm); font-weight: 700; }
.rv__list { display: grid; }
.rv__i { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); box-shadow: inset 0 -1px 0 var(--color-line); }
.rv__i:first-child { box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); }
.rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--color-ink-3); }
.rv__opt { font-size: var(--text-xs); color: var(--color-ink-2); }
.rv__text { max-width: 44rem; }
.rv__help .btn span { color: var(--color-ink-3); }
.rv__help .btn[aria-pressed="true"] { border-color: var(--color-ink); font-weight: 700; }
@media (min-width: 1024px) { .rv { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .rv > .pager { grid-column: 2; } .rv__sum { grid-template-columns: 1fr; } .rv__score { grid-row: auto; } }
.qna { display: grid; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.qna__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); font-size: var(--text-sm); }
.qna__st { grid-row: span 2; display: inline-flex; align-items: center; height: 1.5rem; padding: 0 var(--sp-2); border: 1px solid var(--color-edge); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }
.qna__st.is-done { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.qna__who, .qna__d { font-size: var(--text-xs); color: var(--color-ink-3); }
.qna__who { display: none; }
@media (min-width: 720px) { .qna__i { grid-template-columns: 5rem minmax(0, 1fr) 5rem 6rem; } .qna__st { grid-row: auto; justify-self: start; } .qna__who { display: block; } }
.qna__btn { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.pager--static { margin-top: 0; }

.minis--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--spacing-grid); }
@media (min-width: 720px) { .minis--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .minis--row { grid-template-columns: repeat(6, minmax(0, 1fr)); } .minis--row .mini { grid-template-columns: 1fr; } }

/* 모바일 아래 고정 구매 막대 · 구매 시트 */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: var(--spacing-tabbar) minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--spacing-gutter); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--color-paper); box-shadow: 0 -1px 0 var(--color-line); }
.buybar__wish { width: var(--spacing-tabbar); height: var(--spacing-tap); border: 1px solid var(--color-edge); }
.buybar__go { min-height: var(--spacing-tap); font-size: var(--text-md); }
.p-pdp { padding-bottom: calc(var(--spacing-tabbar) + var(--sp-4) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .buybar { display: none; } .p-pdp { padding-bottom: 0; } }
.bsheet { position: fixed; inset: 0; z-index: var(--z-modal); display: none; transition: display 280ms allow-discrete; }
html[data-sheet="buy"] .bsheet { display: block; }
html[data-sheet="buy"] .bsheet .veil { opacity: 1; }
.bsheet__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: var(--sp-3); max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--spacing-gutter) max(var(--sp-4), env(safe-area-inset-bottom)); background: var(--color-paper); transform: translateY(100%); transition: transform 280ms var(--ease-out); }
html[data-sheet="buy"] .bsheet__panel { transform: none; transition-duration: var(--duration-slow); }
@starting-style { html[data-sheet="buy"] .bsheet__panel { transform: translateY(100%); } html[data-sheet="buy"] .bsheet .veil { opacity: 0; } }
.bsheet__head { display: flex; align-items: center; justify-content: space-between; margin-right: calc(var(--sp-3) * -1); }
.bsheet__t { font-size: var(--text-lg); font-weight: 800; }
.bsheet__colors { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ccode { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--spacing-tap); padding: 0 var(--sp-3); border: 1px solid var(--color-edge); font-size: var(--text-sm); }
.ccode[aria-checked="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); font-weight: 700; }
.bsheet__sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); }
.bsheet__free { font-size: var(--text-sm); color: var(--color-ink-2); }
.bsheet__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); box-shadow: inset 0 2px 0 var(--color-ink); }
.bsheet__sum { font-size: var(--text-sm); font-weight: 700; }
.bsheet__sum strong { font-size: var(--text-xl); font-weight: 800; margin-left: var(--sp-2); }
.bsheet__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 1024px) { .bsheet { display: none; } }

/* 담김 모달 */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: end; transition: display 280ms allow-discrete; }
:is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal { display: grid; }
:is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal .veil { opacity: 1; }
.modal__box { position: relative; z-index: 1; display: grid; gap: var(--sp-4); width: 100%; max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-8) var(--spacing-gutter) max(var(--sp-6), env(safe-area-inset-bottom)); background: var(--color-paper); box-shadow: var(--shadow-pop); transform: translateY(100%); transition: transform 280ms var(--ease-out); outline: none; }
:is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal__box { transform: none; transition-duration: var(--duration-slow); }
@starting-style { :is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal__box { transform: translateY(100%); } :is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal .veil { opacity: 0; } }
.modal__x { position: absolute; right: var(--sp-2); top: var(--sp-2); }
.modal__t { padding-right: var(--spacing-tap); font-size: var(--text-lg); line-height: 1.4; font-weight: 700; }
.modal__t b { color: var(--color-pace); }
.modal__line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding-block: var(--sp-4); box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); }
.modal__tile { display: block; background: var(--color-chalk); }
.modal__tile .ph { background: var(--color-mist); }
.modal__txt { display: grid; gap: 2px; min-width: 0; }
.modal__name { font-weight: 700; }
.modal__opt { font-size: var(--text-xs); color: var(--color-ink-2); }
.modal__price { font-weight: 800; }
.modal__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.modal__h { margin-top: var(--sp-2); font-size: var(--text-sm); font-weight: 700; }
.modal__rec { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.modal__rec::-webkit-scrollbar { display: none; }
.modal__rec .mini { scroll-snap-align: start; grid-template-columns: 4.5rem minmax(0, 1fr); }
.modal__rec .mini__tile, .modal__rec .mini__tile .ph { background: var(--color-mist); }
@media (min-width: 720px) {
  .modal { align-items: center; justify-items: center; padding: var(--spacing-gutter); }
  .modal__box { width: min(45rem, 100%); padding: var(--sp-10); gap: var(--sp-5); opacity: 0; transform: scale(0.98); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
  :is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal__box { opacity: 1; transform: none; transition-duration: var(--duration-base); }
  @starting-style { :is(html[data-added], html[data-entered], html[data-notify], html[data-coupon]) .modal__box { opacity: 0; transform: scale(0.98); } }
  .modal__x { right: var(--sp-4); top: var(--sp-4); }
  .modal__t { font-size: var(--text-lg); text-align: center; padding-inline: var(--spacing-tap); }
  .modal__btns { max-width: 26rem; justify-self: center; width: 100%; }
  .modal__h { text-align: center; }
  .modal__rec { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .modal__rec .mini { grid-template-columns: 1fr; align-items: start; }
}

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); z-index: 50; max-width: calc(100% - var(--spacing-gutter) * 2); padding: var(--sp-3) var(--sp-5); background: var(--color-night); color: var(--color-chalk); font-size: var(--text-sm); transform: translate(-50%, 8px); opacity: 0; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.p-pdp .toast { bottom: calc(var(--spacing-tabbar) + var(--sp-6) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .p-pdp .toast { bottom: var(--sp-6); } }

/* ═══ 회차 2 — B 이벤트 · C 이벤트 상세 · D 컬렉션 · I 런칭 캘린더 · H 변형 런칭 상세 ═══════════ */
.evb__t, .evb__lane, .evd__pt, .benefit__v, .howto__n, .chero__t, .facts__i dd, .look__n, .cother__t, .days__t, .dcell__d, .lgrp__d, .lgrp__w, .steps__n {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-variation-settings: var(--font-display--font-variation-settings);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* 상태 딱지 (component 16 — 먹 채움 · 선 · 꺼짐) · 꺼진 버튼 · 라디오 칩 */
.stchip { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--sp-2); border: 1px solid var(--color-ink); border-radius: var(--radius-xs); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-2xs); line-height: 1; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; }
.stchip--ink { background: var(--color-ink); color: var(--color-paper); }
.stchip--off { border-color: var(--color-line); background: transparent; color: var(--color-ink-3); }
.btn--off { padding-block: var(--sp-3); background: var(--color-mist); border-color: var(--color-line); color: var(--color-ink-3); cursor: default; }
.btn--off:active { transform: none; }
.chip[aria-checked="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.tabs--page { gap: var(--sp-6); box-shadow: inset 0 -1px 0 var(--color-line); }
.tabs--page .tab { min-height: calc(var(--spacing) * 12); font-size: var(--text-md); }
.tabs--page .tab::after { bottom: 0; }

/* 유의사항 */
.notes { margin-top: var(--spacing-block); padding-top: var(--sp-5); box-shadow: inset 0 2px 0 var(--color-ink); }
.notes__h { font-size: var(--text-sm); font-weight: 700; }
.notes ul { display: grid; gap: var(--sp-2); max-width: 48rem; margin-top: var(--sp-3); }
.notes li, .wpost__notes li { position: relative; max-width: 40em; padding-left: var(--sp-4); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-2); }
.notes li::before, .wpost__notes li::before { content: ""; position: absolute; left: var(--sp-1); top: 0.6em; width: 4px; height: 4px; background: var(--color-ink-3); }

/* B 이벤트 목록 — CSS 활자 배너(3:2, 12cqi) */
.evgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-grid-row) var(--spacing-grid); margin-top: var(--sp-6); }
.evc__a { display: grid; gap: var(--sp-2); container-type: inline-size; }
.evb { position: relative; display: grid; align-content: end; gap: 3cqi; aspect-ratio: 3 / 2; padding: 7cqi 7cqi 24cqi; overflow: hidden; background: var(--color-chalk); color: var(--color-ink); }
/* 레인 세 줄 — 위·가운데·아래 선을 따로 그린다(반복 그라데이션 아님) */
.evb::before, .evb::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-line); }
.evb::before { bottom: 0; height: 18cqi; border-bottom: 1px solid var(--color-line); }
.evb::after { bottom: 9cqi; }
.evb__eye { position: absolute; left: 7cqi; top: 6cqi; font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); }
.evb__lane { position: absolute; right: 6cqi; top: 4cqi; font-size: 16cqi; line-height: 1; color: var(--color-line); }
.evb__t { position: relative; display: grid; justify-self: start; font-size: 12cqi; line-height: 0.86; }
.evb__ko { position: relative; justify-self: start; font-size: var(--text-sm); font-weight: 700; }
.evb--night { background: var(--color-night); color: var(--color-chalk); }
.evb--night::before, .evb--night::after { border-color: var(--color-night-line); }
.evb--night .evb__lane { color: var(--color-night-line); }
.evb--mist { background: var(--color-mist); }
.evb--ended { background: var(--color-mist); color: var(--color-ink-3); }
.evc__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--text-xs); }
.evc__t { font-size: var(--text-base); font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evc__p { font-size: var(--text-xs); color: var(--color-ink-3); }
@media (min-width: 720px) { .evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .evgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .evc__a:hover .evc__t { text-decoration: underline; text-underline-offset: 3px; } }

/* 당첨자 발표 — 게시판 한 줄 + 펼친 명단(가림 표기) */
.board { margin-top: var(--sp-6); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.board__head { display: none; }
.wpost__row { display: grid; grid-template-columns: minmax(0, 1fr) var(--spacing-tap); align-items: center; gap: var(--sp-1) var(--sp-3); min-height: calc(var(--spacing) * 16); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.wpost__row::-webkit-details-marker { display: none; }
.wpost__n { display: none; }
.wpost__t { grid-column: 1; font-weight: 700; }
.wpost__d, .wpost__v { grid-column: 1; grid-row: 2; font-size: var(--text-xs); color: var(--color-ink-3); }
.wpost__v { justify-self: start; margin-left: 6rem; }
.wpost__i { grid-column: 2; grid-row: 1 / span 2; justify-self: center; transition: transform var(--duration-base) var(--ease-out); }
.wpost[open] .wpost__i { transform: rotate(180deg); }
.wpost__body { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4) var(--sp-8); box-shadow: inset 0 1px 0 var(--color-line); }
.wpost__lead { max-width: 44rem; }
.wpost__cap { font-size: var(--text-xs); color: var(--color-ink-2); }
.wtables { display: grid; gap: var(--sp-4); }
.wtable { width: 100%; font-size: var(--text-sm); }
.wtable th, .wtable td { padding: var(--sp-2) var(--sp-3); text-align: left; }
.wtable thead th { background: var(--color-mist); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }
.wtable tbody tr { box-shadow: inset 0 -1px 0 var(--color-line); }
.wtable tbody th { font-weight: 700; }
.wtable td { color: var(--color-ink-2); }
.wpost__notes { display: grid; gap: var(--sp-2); max-width: 44rem; }
.wpost__cap { max-width: 44rem; }
@media (min-width: 720px) {
  .board__head, .wpost__row { grid-template-columns: 4rem minmax(0, 1fr) 7rem 5rem var(--spacing-tap); }
  .board__head { display: grid; align-items: center; min-height: calc(var(--spacing) * 11); padding-left: var(--sp-4); background: var(--color-mist); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }
  .board__head span:nth-child(n + 3) { text-align: center; }
  .board__head span:last-child { grid-column: 4; }
  .wpost__row { padding-block: 0; }
  .wpost__n { display: block; font-size: var(--text-sm); color: var(--color-ink-3); }
  .wpost__t { grid-column: auto; }
  .wpost__d, .wpost__v { grid-column: auto; grid-row: auto; margin: 0; justify-self: center; font-size: var(--text-sm); }
  .wpost__vk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wpost__i { grid-column: auto; grid-row: auto; }
  .wpost__body { padding-inline: calc(4rem + var(--sp-4)); }
  .wtables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}

/* C 이벤트 상세 — 판 880 가운데 */
.evd { max-width: calc(55rem + var(--spacing-gutter) * 2); }
.evd__head { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-6); box-shadow: inset 0 2px 0 var(--color-ink); }
.evd__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.evd__views { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); }
.evd__t { display: grid; gap: var(--sp-1); font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 800; }
.evd__sub { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 700; color: var(--color-ink-2); }
.evd__when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); font-size: var(--text-sm); color: var(--color-ink-2); }
.evd__poster { position: relative; aspect-ratio: 4 / 3; margin: var(--sp-6) 0 0; overflow: hidden; background: var(--color-night); color: var(--color-paper); }
.evd__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim) 22%, transparent 70%); pointer-events: none; }
.evd__ptxt { position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 1; display: grid; gap: var(--sp-2); }
.evd__peye { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.evd__pt { display: grid; font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.evd__sec { margin-top: var(--spacing-block); }
.evd__h { margin-bottom: var(--sp-4); font-size: var(--text-lg); font-weight: 800; }
.benefits { display: grid; gap: var(--sp-3); }
.benefit { display: grid; gap: var(--sp-1); padding: var(--sp-6) var(--sp-5); background: var(--color-chalk); }
.benefit__v { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.benefit__v small { margin-left: 0.04em; font-family: var(--font-sans); font-size: 0.5em; font-weight: 800; }
.benefit__t { margin-top: var(--sp-2); font-size: var(--text-md); font-weight: 700; }
.benefit__d { font-size: var(--text-xs); color: var(--color-ink-3); }
.howto { display: grid; gap: var(--sp-5); }
.howto__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); padding-top: var(--sp-4); box-shadow: inset 0 2px 0 var(--color-ink); }
.howto__n { grid-row: span 2; font-size: 2rem; line-height: 0.9; }
.howto__t { font-weight: 700; }
.howto__d { font-size: var(--text-sm); color: var(--color-ink-2); }
.evd__cta { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--spacing-block); text-align: center; }
.evd__cta .btn { width: min(100%, 22rem); }
.evd__ctad { font-size: var(--text-xs); color: var(--color-ink-3); }
.prevnext { display: grid; margin-top: var(--spacing-block); box-shadow: inset 0 2px 0 var(--color-ink); }
.prevnext__a { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: calc(var(--spacing) * 14); padding-inline: var(--sp-2); box-shadow: inset 0 -1px 0 var(--color-line); }
.prevnext__k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); }
.prevnext__t { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prevnext__d { display: none; font-size: var(--text-xs); color: var(--color-ink-3); }
.evd__list { display: flex; justify-content: center; margin-top: var(--sp-8); }
.evd__list .btn { min-width: 10rem; }
@media (min-width: 720px) {
  .evd__poster { aspect-ratio: 16 / 9; }
  .evd__ptxt { left: var(--sp-8); bottom: var(--sp-8); }
  .benefits, .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prevnext__a { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  .prevnext__d { display: block; }
}
@media (hover: hover) and (pointer: fine) { .prevnext__a:hover .prevnext__t { text-decoration: underline; text-underline-offset: 3px; } }

/* D 컬렉션 — 전폭 히어로 · 소개 · 룩 3 · 상품 격자 · 다른 컬렉션 */
.chero { position: relative; display: grid; align-items: end; aspect-ratio: 4 / 5; min-width: 0; min-height: 26rem; overflow: hidden; background: var(--color-night); color: var(--color-paper); }
.chero__media { position: absolute; inset: 0; }
.chero { --scrim-x: calc(max(var(--spacing-gutter), (100% - var(--spacing-shell)) / 2) + var(--text-display-xl) * 3.1 + var(--sp-8)); }
.chero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim) 17.5rem, transparent 25rem); pointer-events: none; }
.chero__copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--sp-3); padding-block: var(--sp-10) var(--sp-8); }
.chero__eye { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.chero__t { display: grid; font-size: var(--text-display-xl); line-height: var(--text-display-xl--line-height); }
.chero__sub { font-size: var(--text-md); font-weight: 700; }
.cintro { display: grid; gap: var(--sp-6); margin-top: var(--spacing-block); }
.cintro__t { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 700; text-wrap: balance; }
.cintro__p { max-width: 36rem; color: var(--color-ink-2); line-height: 1.75; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-6); }
.facts__i { display: grid; gap: var(--sp-1); padding: var(--sp-4); background: var(--color-chalk); }
.facts__i dt { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); }
.facts__i dd { margin: 0; font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.looknav { display: flex; gap: var(--sp-1); }
.looknav__a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); padding: 0 var(--sp-3); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); }
.looknav__a[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.looks { display: grid; gap: var(--spacing-block); }
.look { display: grid; gap: var(--sp-5); scroll-margin-top: calc(var(--head-h) + var(--sp-4)); }
.look__img { position: relative; background: var(--color-line); }
.pin { position: absolute; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-weight: 700; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--color-paper); }
.pin--list { position: static; transform: none; flex: none; }
.look.is-on .look__img .pin { box-shadow: 0 0 0 2px var(--color-pace); }
.look.is-on .look__n { color: var(--color-pace); }
.look__txt { display: grid; align-content: start; gap: var(--sp-3); min-width: 0; }
.look__n { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.look__t { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.look__d { color: var(--color-ink-2); }
.look__h { margin-top: var(--sp-2); padding-top: var(--sp-3); box-shadow: inset 0 2px 0 var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.look__items { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); scroll-padding-inline: var(--spacing-gutter); }
.look__items::-webkit-scrollbar { display: none; }
.look__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); scroll-snap-align: start; }
.look__item .mini__tile .ph { background: var(--color-mist); }
.cothers { display: grid; gap: var(--spacing-grid-row) var(--spacing-grid); }
.cother { display: grid; gap: var(--sp-2); }
.cother__img { display: block; margin-bottom: var(--sp-2); }
.cother__eye { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2); }
.cother__t { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.cother__d { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--color-ink-2); }
.cother__d .ic { width: 1rem; height: 1rem; }
@media (min-width: 720px) {
  /* 16:7 을 aspect-ratio 로 주면 min-height 가 폭을 끌어올린다(720 에서 951px 넘침) — 높이로 푼다 */
  .chero { aspect-ratio: auto; height: max(26rem, 43.75vw); }
  .chero__copy { padding-block: var(--sp-12); }
  /* D-H-d 는 인물이 왼쪽 30% — 두 줄 display-xl 제목 밑에 묻힌다. 좌우만 뒤집어 인물을 오른쪽 빈 강변으로(글자 없는 사진) */
  .chero__media img { scale: -1 1; }
  .chero__media::after { background: linear-gradient(to right, var(--color-scrim) 0, transparent var(--scrim-x)), linear-gradient(to right, var(--color-scrim) 0, var(--color-scrim) var(--scrim-x), transparent calc(var(--scrim-x) + 22rem)), linear-gradient(to top, var(--color-scrim) 0, transparent 10rem); }
  .cothers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look__items { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1024px) {
  .chero__sub { font-size: var(--text-lg); }
  .cintro { grid-template-columns: 5fr 7fr; gap: calc(var(--spacing-grid) * 3); align-items: start; }
  .look { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing-grid) * 3); align-items: center; }
  .look--r .look__img { order: 2; }
}
@media (hover: hover) and (pointer: fine) { .cother:hover .cother__t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }

/* I 런칭 캘린더 — 탭·대상 · 날짜 띠(14칸, 점 ≤4) / 달 격자 · 날짜 묶음 */
.cal__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); box-shadow: inset 0 -1px 0 var(--color-line); }
.cal__bar .tabs--page { box-shadow: none; }
.cal__bar .seg { margin-bottom: var(--sp-2); }
.seg { display: inline-flex; border: 1px solid var(--color-ink); background: var(--color-paper); }
.seg__b { min-width: 3.5rem; min-height: var(--spacing-tap); padding: 0 var(--sp-3); font-size: var(--text-sm); font-weight: 500; }
.seg__b + .seg__b { box-shadow: inset 1px 0 0 var(--color-ink); }
.seg__b[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.days { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.days__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.days__t { font-size: var(--text-xl); line-height: 1; white-space: nowrap; }
@media (max-width: 719px) { .days__mon { display: none; } }
.days__tools { display: flex; align-items: center; gap: var(--sp-1); }
.days__arr:disabled { color: var(--color-mute); cursor: default; }
.strip { position: relative; margin: var(--sp-3) calc(var(--sp-4) * -1) 0; padding-inline: var(--sp-4); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--sp-4); }
.strip::-webkit-scrollbar { display: none; }
.strip__track { display: grid; grid-template-columns: repeat(14, minmax(3.5rem, 1fr)); gap: var(--sp-1); }
.dcell { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 5.5rem; padding: var(--sp-2) 0 var(--sp-3); border: 1px solid transparent; color: var(--color-ink-3); text-align: center; }
button.dcell { color: var(--color-ink); background: var(--color-mist); }
.dcell__m { min-height: 0.75rem; font-size: var(--text-2xs); line-height: 1; font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-ink-2); }
.dcell__w { font-size: var(--text-2xs); line-height: 1.2; font-weight: 700; letter-spacing: var(--tracking-caps); }
.dcell__d { font-size: 1.75rem; line-height: 1; }
.dcell__dot { width: 6px; height: 6px; margin-top: var(--sp-1); border-radius: var(--radius-full); background: var(--color-pace); }
.dcell.is-today { border-color: var(--color-ink); }
button.dcell[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
button.dcell[aria-pressed="true"] .dcell__m, button.dcell[aria-pressed="true"] .dcell__w { color: var(--color-night-2); }
button.dcell[aria-pressed="true"] .dcell__dot { background: var(--color-pace-on-dark); }
.mgrid { margin-top: var(--sp-3); }
.mgrid__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-block: var(--sp-2); box-shadow: inset 0 -1px 0 var(--color-line); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); text-align: center; }
.mgrid__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); margin-top: var(--sp-1); }
.mgrid .dcell { min-height: 3.5rem; padding: var(--sp-2) 0; }
.mgrid .dcell__d { font-size: 1.25rem; }
.days__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--color-ink-3); }
.days__clear { min-height: var(--spacing-tap); margin-left: auto; font-size: var(--text-xs); font-weight: 700; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.lgroups { display: grid; gap: var(--spacing-block); margin-top: var(--sp-10); }
.lgrp__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding-top: var(--sp-4); box-shadow: inset 0 2px 0 var(--color-ink); }
.lgrp__d { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.lgrp__w { font-size: var(--text-2xl); line-height: 1; color: var(--color-ink-2); }
.lgrp__h .dday { font-size: var(--text-md); }
.lgrp__past { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-3); }
.lgrp__rows { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.lrow { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start; padding: var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.lrow__tile { grid-row: span 2; }
.lrow__tile .ph { background: var(--color-mist); }
.lrow__info { display: grid; gap: var(--sp-1); min-width: 0; }
.lrow__top { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.lrow__name { font-size: var(--text-lg); line-height: 1.3; font-weight: 700; }
.lrow__color { font-size: var(--text-sm); color: var(--color-ink-2); }
.lrow__spec { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--color-ink-2); }
.lrow__price { font-weight: 700; color: var(--color-ink); }
.lrow__note { font-size: var(--text-xs); color: var(--color-ink-3); }
.lrow__act { grid-column: 2; display: grid; gap: var(--sp-1); }
.lrow__act .btn { width: 100%; }
.lrow__hint { font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; }
.lrow__nt[aria-pressed="true"] { background: var(--color-mist); }
.lrow__nt .ic { width: 1rem; height: 1rem; }
.lrow__nt [data-nt-on] { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cal__fine { margin-top: var(--spacing-block); font-size: var(--text-xs); color: var(--color-ink-3); }
@media (max-width: 719px) {
  .cal__bar { flex-wrap: nowrap; }
  .cal__bar .tabs--page { gap: var(--sp-4); }
  .cal__bar .tabs--page .tab { font-size: var(--text-base); }
  .cal__bar .seg__b { min-width: 2.75rem; padding: 0 var(--sp-2); }
  .lgroups { gap: var(--sp-10); margin-top: var(--sp-8); }
  .lrow__hint { text-align: left; }
}
@media (min-width: 720px) {
  .lrow { grid-template-columns: 10rem minmax(0, 1fr) 11rem; align-items: center; }
  .lrow__tile { grid-row: auto; }
  .lrow__act { grid-column: auto; }
}
@media (min-width: 1024px) {
  .days { padding: var(--sp-5) var(--sp-6); }
  .strip { margin-inline: 0; padding-inline: 0; }
  .lrow { grid-template-columns: 12.5rem minmax(0, 1fr) 14rem; padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4); }
  .lrow__name { font-size: var(--text-xl); }
}
@media (hover: hover) and (pointer: fine) {
  button.dcell:not([aria-pressed="true"]):hover { border-color: var(--color-edge); }
  .lrow__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* 발매 알림 모달 (#notify=) · 입력칸 */
.ntopt { display: grid; gap: var(--sp-2); }
.ntopt__l { font-size: var(--text-sm); font-weight: 700; }
.ntopt__l span { margin-left: var(--sp-1); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.ntopt__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ntopt__fine { font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; }
.field { width: 100%; min-height: calc(var(--spacing) * 12); padding: 0 var(--sp-4); border: 1px solid var(--color-edge); border-radius: var(--radius-none); background: var(--color-paper); font-size: 1rem; }
.field[readonly] { background: var(--color-mist); color: var(--color-ink-2); }
.modal .dday { font-weight: 700; }

/* H 변형 — 런칭 상세: 발매 정보 표 · 응모 단계 · 상태 상자 */
.rel { width: 100%; background: var(--color-mist); font-size: var(--text-sm); }
.rel__cap { caption-side: top; padding-bottom: var(--sp-2); text-align: left; font-size: var(--text-xs); font-weight: 700; }
.rel th { width: 3.5rem; padding: var(--sp-2) var(--sp-3); text-align: left; font-weight: 700; vertical-align: top; }
.rel td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; color: var(--color-ink-2); }
.rel tr + tr { box-shadow: inset 0 1px 0 var(--color-line); }
.rel__s { font-size: var(--text-xs); color: var(--color-ink-3); }
.rel--modal th { width: 4.5rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps__i { position: relative; display: grid; align-content: start; gap: 2px; padding: var(--sp-2) var(--sp-2) var(--sp-3) 0; box-shadow: inset 0 -2px 0 var(--color-line); color: var(--color-ink-3); }
.steps__i + .steps__i { padding-left: var(--sp-4); }
.steps__i + .steps__i::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-2) + 0.35rem); border: 4px solid transparent; border-left-color: currentColor; }
.steps__n { font-size: 1.25rem; line-height: 1; }
.steps__t { font-size: var(--text-sm); font-weight: 700; }
.steps__d { font-size: var(--text-2xs); line-height: 1.45; }
.steps__i[data-st="done"] { color: var(--color-ink-2); box-shadow: inset 0 -2px 0 var(--color-ink-2); }
.steps__i[data-st="now"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.ldp__pace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ldp__pace .opt__l { margin-right: var(--sp-1); }
.lbox { padding: var(--sp-3) var(--sp-4); background: var(--color-paper); box-shadow: inset 2px 0 0 var(--color-ink); font-size: var(--text-sm); }
.ldp .pdp__btns > [data-phase] { grid-column: 1 / -1; }
.buybar__go-wrap { display: grid; }
.buybar__go-wrap > * { width: 100%; }
.bsheet__one { display: grid; }
.lstory { display: grid; gap: var(--spacing-grid-row) var(--spacing-grid); }
.lstory__i { display: grid; gap: var(--sp-3); align-content: start; }
.lstory__i .ph { background: var(--color-line); }
.lstory__t { margin-top: var(--sp-2); font-size: var(--text-xl); font-weight: 800; }
.lstory__d { max-width: 36rem; color: var(--color-ink-2); line-height: 1.75; }
@media (min-width: 720px) { .lstory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .lstory__i { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: end; column-gap: var(--spacing-grid); }
  .lstory__i .ph { grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .wpost__i { transition: none; }
}

/* ── 움직임 줄이기 — 자동 넘김·교차·밀려 들어오기 0, 흐려지기만 ──────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide, .hero__slide.is-on, .gal__slide, .gal__slide.is-on { transition: none; }
  .hero__bar i { animation: none !important; }
  .mega, .search, .sbox__list, .modal__box, .drawer__panel, .bsheet__panel, .filters, .toast { transform: none !important; }
  .drawer, .bsheet, .modal, .drawer__panel, .bsheet__panel, .filters, .sheet-veil, .drawer .veil, .bsheet .veil, .modal .veil { transition: none !important; }
  .card__tile .ph, .story__img .ph { transition: none; transform: none !important; }
  .btn:active, .chip:active, .card:active .card__tile, .fsize:active { transform: none; }
  .tab::after, .gnb__link::after, .swatch::after, .gal__thumb::before, .fgrp__body, .sbox__btn .ic { transition: none; }
}

/* ═══ 회차 3 — J 로그인·찾기·가입 · K 장바구니·주문/결제·주문 완료 ═══════════════════════════════
 * 입력칸은 표현용(<form> 0). 오류 = 먹 2px 테두리 + 느낌표 + 문장(빨강 없음). 결제 금액은 먹 — 코발트는 "총 3개" 숫자 글자 하나 */
.ahead__en, .lclub__en, .welcome__en, .ticket__v b {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-variation-settings: var(--font-display--font-variation-settings);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.shell--narrow { max-width: calc(var(--spacing-shell-narrow) + var(--spacing-gutter) * 2); }
.btn--block { width: 100%; }
.linkbtn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--spacing-tap); padding-inline: var(--sp-1); font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn .ic { width: 1rem; height: 1rem; transition: rotate var(--duration-base) var(--ease-out); }
.linkbtn[aria-expanded="true"] .ic { rotate: 180deg; }

/* 브라우저가 그리는 면도 팔레트로 — 선택 · 캐럿 · 자동완성 배경 */
::selection { background: var(--color-ink); color: var(--color-paper); }
.field { caret-color: var(--color-pace); }
.field:-webkit-autofill, .field:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100px var(--color-mist); -webkit-text-fill-color: var(--color-ink); }

/* 입력 줄 · 선택 상자 · 오류 */
.fstack { display: grid; gap: var(--sp-4); }
.frow { display: grid; gap: var(--sp-2); min-width: 0; }
.frow__l { font-size: var(--text-sm); font-weight: 700; }
.frow__req { margin-left: var(--sp-2); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.frow__c { display: grid; gap: var(--sp-2); min-width: 0; }
.frow__in.has-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.frow__btn { min-height: calc(var(--spacing) * 12); padding-inline: var(--sp-4); }
.field::placeholder { color: var(--color-ink-3); opacity: 1; }
.field[aria-invalid="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.fnote { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-3); }
.fnote b { color: var(--color-ink); }
.ferr { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.ferr .ic { width: 1.125rem; height: 1.125rem; margin-top: 0.1em; }
.fsel { position: relative; display: block; }
.fsel select { padding-right: calc(var(--sp-4) + 1.5rem); -webkit-appearance: none; appearance: none; cursor: pointer; }
.fsel .ic { position: absolute; right: var(--sp-4); top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; pointer-events: none; }
@media (min-width: 720px) {
  .fstack--wide .frow { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; column-gap: var(--sp-5); }
  .fstack--wide .frow__l { padding-top: var(--sp-3); }
  .fstack--wide > .ferr { padding-left: calc(10rem + var(--sp-5)); }
}

/* 체크 상자 · 라디오 — 진짜 input 을 그대로 두고(키보드·읽기) 20px 면을 그린다 */
.cb, .rb { position: relative; display: inline-flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--spacing-tap); padding-block: calc((var(--spacing-tap) - 1.25rem) / 2); font-size: var(--text-sm); cursor: pointer; }
.cb__i, .rb__i { position: absolute; left: 0; top: calc((var(--spacing-tap) - 1.25rem) / 2); width: 1.25rem; height: 1.25rem; margin: 0; opacity: 0; }
.cb__b { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border: 1px solid var(--color-edge); background: var(--color-paper); color: var(--color-paper); }
.cb__b .ic { width: 0.875rem; height: 0.875rem; stroke-width: 3; opacity: 0; }
.cb__i:checked + .cb__b { background: var(--color-ink); border-color: var(--color-ink); }
.cb__i:checked + .cb__b .ic { opacity: 1; }
.cb__t { min-width: 0; line-height: 1.25rem; }
.rb__b { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 1px; border: 1px solid var(--color-edge); border-radius: var(--radius-full); background: var(--color-paper); }
.rb__i:checked + .rb__b { border: 6px solid var(--color-ink); }
.cb__i:focus-visible + .cb__b, .rb__i:focus-visible + .rb__b { outline: 2px solid var(--color-pace); outline-offset: 2px; }
.cb__i[aria-invalid="true"] + .cb__b { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }

/* 계정 쪽 머리 · 탭 · 분절 토글 */
.p-acct main { padding-bottom: var(--spacing-section); }
.ahead { padding-block: var(--sp-8) var(--sp-5); }
.ahead__t { display: grid; gap: var(--sp-2); }
.ahead__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); text-wrap: balance; }
.ahead__ko { font-size: var(--text-md); font-weight: 800; }
.ahead__sub { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.tabs--acct { gap: 0; margin-bottom: var(--sp-6); box-shadow: inset 0 -1px 0 var(--color-line); }
.tabs--acct .tab { flex: 1; min-height: calc(var(--spacing) * 12); font-size: var(--text-base); }
.tabs--acct .tab::after { bottom: 0; }
.tabs--s { margin-bottom: var(--sp-4); }
.tabs--s .tab { min-height: var(--spacing-tap); font-size: var(--text-sm); }
.seg--full { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.ichips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip--wide { min-width: 8rem; justify-content: center; }

/* J 로그인 */
.login { display: grid; gap: var(--spacing-block); max-width: calc(var(--spacing-form) + var(--spacing-gutter) * 2); }
.login__form { min-width: 0; }
.login__opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); }
.login__links { display: flex; justify-content: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.login__links a { position: relative; display: inline-flex; align-items: center; min-height: var(--spacing-tap); padding-inline: var(--sp-3); }
.login__links a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.75rem; translate: 0 -50%; background: var(--color-line); }
.orline { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--color-ink-3); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.login__sns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.login__sns .btn { padding-inline: var(--sp-2); }
.lclub { display: grid; align-content: start; gap: var(--sp-5); padding: var(--sp-8) var(--sp-6); background: var(--color-chalk); }
.lclub__t { display: grid; gap: var(--sp-2); }
.lclub__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.lclub__ko { font-size: var(--text-base); font-weight: 700; color: var(--color-ink-2); }
.lclub__list li { display: grid; gap: 2px; padding-block: var(--sp-3); box-shadow: inset 0 -1px 0 var(--color-line); }
.lclub__list li:first-child { box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); padding-top: var(--sp-4); }
.lclub__list b { font-size: var(--text-md); font-weight: 800; }
.lclub__list span { font-size: var(--text-xs); color: var(--color-ink-3); }
.lclub__grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); text-align: center; }
.lclub__grades li { display: grid; justify-items: center; gap: var(--sp-1); font-size: var(--text-xs); }
.lclub__grades b { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-caps); }
.lclub__grades span:last-child { color: var(--color-ink-2); }
.login, .find, .join { margin-inline: auto; }
@media (min-width: 1024px) {
  .login { max-width: none; grid-template-columns: var(--spacing-form) var(--spacing-form); justify-content: center; align-items: start; column-gap: var(--spacing-rail-gap); }
  .lclub { margin-top: var(--sp-8); }
}

/* J 찾기 */
.find { max-width: calc(var(--spacing-form) + var(--spacing-gutter) * 2); }
.fdone { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); background: var(--color-chalk); text-align: center; }
.fdone__l { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.fstack > .fdone__l { justify-self: start; font-size: var(--text-md); color: var(--color-ink); }
.fdone__v { padding: var(--sp-3) var(--sp-6); background: var(--color-paper); font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; letter-spacing: 0.04em; }
.fdone__v--s { padding: 0; background: none; letter-spacing: 0; }
.fdone__s { font-size: var(--text-xs); color: var(--color-ink-3); }
.fdone__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--color-ink); border-radius: var(--radius-full); }
.fdone__ic .ic { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }
.fdone__btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); width: 100%; margin-top: var(--sp-4); }
.find__help { margin-top: var(--sp-8); padding-top: var(--sp-4); box-shadow: inset 0 1px 0 var(--color-line); font-size: var(--text-xs); color: var(--color-ink-3); }

/* J 가입 — 단계(원 번호 + 밑줄) · 약관 · 정보 입력 · 환영 */
.join { max-width: calc(var(--spacing-form-wide) + var(--spacing-gutter) * 2); }
.jsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-8); }
.jsteps__i { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding-block: var(--sp-3); box-shadow: inset 0 -2px 0 var(--color-line); color: var(--color-ink-3); font-size: var(--text-sm); }
.jsteps__n { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border: 1px solid var(--color-edge); border-radius: var(--radius-full); background: var(--color-paper); font-weight: 800; }
.jsteps__n .ic { display: none; width: 1rem; height: 1rem; stroke-width: 2.5; }
.jsteps__t { min-width: 0; }
.jsteps__i[aria-current="step"] { color: var(--color-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-ink); }
.jsteps__i[aria-current="step"] .jsteps__n { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.jsteps__i.is-done { color: var(--color-ink-2); box-shadow: inset 0 -2px 0 var(--color-ink-2); }
.jsteps__i.is-done .jsteps__n { border-color: var(--color-ink-2); }
.jsteps__i.is-done .jsteps__n b { display: none; }
.jsteps__i.is-done .jsteps__n .ic { display: block; }
.agree { display: grid; gap: var(--sp-5); }
.agree > .cb, .agree__list { background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.cb--all { display: flex; padding: var(--sp-5); box-shadow: inset 0 2px 0 var(--color-ink); }
.cb--all .cb__i { left: var(--sp-5); top: calc(var(--sp-5) + 2px); }
.cb--all .cb__b { width: 1.5rem; height: 1.5rem; }
.cb--all .cb__t { display: grid; gap: var(--sp-1); line-height: 1.4; }
.agree__all { font-size: var(--text-lg); font-weight: 700; }
.agree__s { font-size: var(--text-xs); color: var(--color-ink-3); }
.agree__list { display: grid; padding: var(--sp-2) var(--sp-5); }
.agree__i { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.agree__i + .agree__i { box-shadow: inset 0 1px 0 var(--color-line); }
.agree__tag { display: inline-block; min-width: 2.25rem; margin-right: var(--sp-2); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.agree__tag.is-req { font-weight: 800; color: var(--color-ink); }
.agree__v { display: inline-flex; align-items: center; gap: 2px; min-height: var(--spacing-tap); flex: none; font-size: var(--text-xs); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.agree__v .ic { width: 0.875rem; height: 0.875rem; }
.jstep__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); box-shadow: inset 0 -2px 0 var(--color-ink); font-size: var(--text-lg); font-weight: 800; }
.jstep__req { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-3); }
.jstep__req .frow__req { margin: 0 var(--sp-1) 0 0; font-weight: 700; color: var(--color-ink-2); }
.jstep__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.jstep--done { display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-12) var(--sp-5); background: var(--color-chalk); text-align: center; }
.welcome__en { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.emblem--xl { width: 5.5rem; height: 5.5rem; font-size: var(--text-2xl); }
.welcome__t b { white-space: nowrap; }
.welcome__t { max-width: 30rem; font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; text-wrap: balance; }
.welcome__s { font-size: var(--text-sm); color: var(--color-ink-2); }
.tickets { display: grid; gap: var(--sp-3); width: 100%; max-width: 32rem; margin-top: var(--sp-2); text-align: left; }
.ticket { display: grid; grid-template-columns: max-content minmax(0, 1fr); background: var(--color-mist); }
.ticket__v { display: flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 6.5rem; padding: var(--sp-5); white-space: nowrap; }
.ticket__v b { font-size: var(--text-display-s); line-height: 1; }
.ticket__v span { font-size: var(--text-sm); font-weight: 700; }
.ticket__txt { display: grid; align-content: center; gap: 2px; padding: var(--sp-4) var(--sp-5); border-left: 1px dashed var(--color-edge); }
.ticket__t { font-weight: 800; }
.ticket__d { font-size: var(--text-xs); color: var(--color-ink-2); }
.welcome__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); width: 100%; max-width: 32rem; margin-top: var(--sp-4); }

/* K 머리 · 주문 단계 (▸ 는 CSS 삼각형 — Pretendard 에 없다) */
.kpage { padding-bottom: var(--spacing-section); }
.khead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-6) var(--sp-5); }
.khead__t { font-size: var(--text-xl); line-height: 1.2; font-weight: 800; }
.ksteps { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--text-xs); color: var(--color-ink-3); }
.ksteps__i { position: relative; display: inline-flex; align-items: center; min-height: 2rem; white-space: nowrap; }
.ksteps__i + .ksteps__i::before { content: ""; position: absolute; left: calc(var(--sp-5) / -2 - 3px); top: 50%; translate: 0 -50%; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--color-ink-3); }
.ksteps__i.is-done { color: var(--color-ink-2); }
.ksteps__i[aria-current="step"] { color: var(--color-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-ink); }
@media (min-width: 720px) {
  .khead { padding-block: var(--sp-10) var(--sp-8); }
  .khead__t { font-size: var(--text-2xl); }
  .ksteps { gap: var(--sp-8); font-size: var(--text-md); }
  .ksteps__i { min-height: 2.5rem; }
  .ksteps__i + .ksteps__i::before { left: calc(var(--sp-8) / -2 - 3px); }
}

/* K 장바구니 — ≥1024 표(6칸) · 그 아래 카드 */
.ccount { display: none; padding-bottom: var(--sp-4); font-size: var(--text-md); font-weight: 700; }
.ccount b { color: var(--color-pace); }
.ctable { background: var(--color-paper); }
.ctable__head { display: none; }
.ctable__all { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0 var(--sp-4); box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); }
.ctable__n { color: var(--color-ink-3); }
/* <1024 카드: 줄별 [주문하기] 는 아래 막대·선택상품 주문이 맡고, [삭제] 는 카드 오른쪽 위 × — 390×844 에 카드 2장이 막대 위로 들어온다 */
.cline { position: relative; display: grid; grid-template-columns: 1.75rem 5.5rem minmax(0, 1fr); grid-template-areas: "cb tile info" "cb qty qty" "opt opt opt"; gap: var(--sp-3); align-items: start; padding: var(--sp-5) var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); }
.cline__x { position: absolute; right: var(--sp-1); top: var(--sp-2); }
.cline__x .ic { width: 1.25rem; height: 1.25rem; }
.cline__name { padding-right: var(--sp-8); }
.cline__cb { grid-area: cb; margin-top: calc((var(--spacing-tap) - 1.25rem) / -2); }
.cline__tile { grid-area: tile; position: relative; background: var(--color-chalk); }
.cline__tile .ph { background: var(--color-mist); }
.cline__tile .wish { width: 2rem; height: 2rem; }
.cline__tile .wish .ic { width: 1rem; height: 1rem; }
.cline__info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.cline__name { font-size: var(--text-base); font-weight: 500; }
.cline__opt { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.cline__opt .linkbtn { min-height: 2rem; font-size: var(--text-xs); color: var(--color-ink); }
.cline__unit { font-size: var(--text-sm); color: var(--color-ink-2); }
.cline__ship { display: inline-flex; align-items: center; justify-self: start; gap: var(--sp-1); margin-top: var(--sp-1); padding: 2px var(--sp-2); background: var(--color-mist); font-size: var(--text-xs); color: var(--color-ink-2); }
.cline__ship .ic { width: 0.875rem; height: 0.875rem; }
.cline__qty { grid-area: qty; justify-self: start; }
.cline__amt { grid-area: qty; justify-self: end; align-self: center; display: grid; justify-items: end; }
.cline__amt-l { font-size: var(--text-xs); color: var(--color-ink-3); }
.cline__amt b { font-size: var(--text-md); font-weight: 800; }
.cline__act { grid-area: act; display: none; gap: var(--sp-2); }
.copt { grid-area: opt; display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--color-mist); }
.copt__h { font-size: var(--text-sm); font-weight: 800; }
.copt__row { display: grid; gap: var(--sp-2); }
.copt__l { font-size: var(--text-sm); font-weight: 700; }
.copt__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.copt__c { gap: var(--sp-2); }
.copt__c[aria-checked="true"] .dot { box-shadow: 0 0 0 1px var(--color-paper); }
.copt__free { font-size: var(--text-sm); color: var(--color-ink-2); }
.copt__btns { display: flex; gap: var(--sp-2); }
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-block: var(--sp-5); }
.cbar__n { margin-right: var(--sp-2); font-size: var(--text-sm); }
.cbar__n b { font-weight: 800; }
.cbar__note { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-ink-3); }
.csum { display: grid; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.csum__l { display: grid; padding: var(--sp-2) var(--sp-5); }
.csum__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-4); }
.csum__row + .csum__row { box-shadow: inset 0 1px 0 var(--color-line); }
.csum__row dt { font-weight: 700; }
.csum__row dd { display: grid; justify-items: end; gap: 2px; text-align: right; }
.csum__s { max-width: 22rem; font-size: var(--text-xs); color: var(--color-ink-3); }
.csum__r { display: grid; align-content: center; gap: var(--sp-1); padding: var(--sp-6) var(--sp-5); background: var(--color-mist); }
.csum__h { font-weight: 800; }
.csum__f { font-size: var(--text-xs); color: var(--color-ink-3); }
.csum__pay { margin-top: var(--sp-2); font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 800; }
.csum__pt { font-size: var(--text-sm); color: var(--color-ink-2); }
.csum__pt b { font-weight: 800; color: var(--color-ink); }
.cbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.kpage > .ferr, [data-cart-full] > .ferr { justify-content: flex-end; margin-top: var(--sp-3); }
.cempty { margin-top: var(--sp-2); box-shadow: inset 0 2px 0 var(--color-ink); }
.empty__d { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 720px) {
  .csum { grid-template-columns: minmax(0, 1fr) 22.5rem; }
  .csum__l { padding: var(--sp-4) var(--sp-8); }
  .csum__r { padding: var(--sp-8); }
  .copt__row { grid-template-columns: 4rem minmax(0, 1fr); align-items: center; }
  .copt__row > .frow { grid-column: 1 / -1; }
  .copt .frow { grid-template-columns: 4rem minmax(0, 20rem); align-items: center; column-gap: 0; }
  .cbtns { display: flex; justify-content: flex-end; }
  .cbtns .btn { min-width: 14rem; }
}
@media (min-width: 1024px) {
  .ccount { display: block; }
  .ctable { display: grid; }
  .ctable__head, .cline { grid-template-columns: 2.5rem 6.75rem minmax(0, 1fr) 9rem 9rem 7.5rem; column-gap: var(--sp-5); }
  .ctable__head { grid-row: 1; grid-column: 1; display: grid; align-items: center; min-height: 3.5rem; padding-inline: var(--sp-4); background: var(--color-mist); box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); text-align: center; }
  .ctable__head span:nth-child(2) { grid-column: 2 / 4; }
  .ctable__all { grid-row: 1; grid-column: 1; justify-self: start; align-self: center; padding: 0 var(--sp-4); box-shadow: none; }
  .ctable__all .cb__t { display: none; }
  .ctable__del-m { display: none; }
  .clines { grid-row: 2; }
  .cline { grid-template-areas: "cb tile info qty amt act" "opt opt opt opt opt opt"; align-items: center; row-gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); }
  .cline__cb { align-self: start; margin-top: calc((6.75rem - var(--spacing-tap)) / 2); }
  .cline__qty, .cline__amt { justify-self: center; }
  .cline__amt-l { display: none; }
  .cline__amt { grid-area: amt; }
  .cline__act { display: grid; grid-template-columns: 1fr; }
  .cline__x { display: none; }
  .cline__name { padding-right: 0; }
  .copt { grid-column: 3 / -1; }
  .cbar { flex-wrap: nowrap; }
  .cbar__note { flex-basis: auto; margin-left: auto; text-align: right; }
}

/* K 아래 고정 막대 (<1024) */
.kbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--spacing-gutter); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--color-paper); box-shadow: 0 -1px 0 var(--color-line); }
.kbar__sum { display: grid; line-height: 1.3; }
.kbar__sum span { font-size: var(--text-xs); color: var(--color-ink-3); }
.kbar__sum b { font-size: var(--text-md); font-weight: 800; }
.kbar__go { min-height: var(--spacing-tap); padding-inline: var(--sp-8); font-size: var(--text-base); }
.p-k { padding-bottom: calc(var(--spacing-tabbar) + var(--sp-4) + env(safe-area-inset-bottom)); }
.p-done { padding-bottom: 0; }
.p-k .toast { bottom: calc(var(--spacing-tabbar) + var(--sp-6) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .kbar { display: none; }
  .p-k { padding-bottom: 0; }
  .p-k .toast { bottom: var(--sp-6); }
}

/* K 주문/결제 — ≥1024 왼 판들 + 오른 붙는 요약 360 */
.order { display: grid; gap: var(--sp-3); align-items: start; }
.order__main { display: grid; gap: var(--sp-3); min-width: 0; }
.opanel { padding: var(--sp-6) var(--sp-5); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.opanel__h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.opanel__h h2 { font-size: var(--text-lg); font-weight: 800; }
.opanel > .tabpanel + .frow, .opanel > .tabpanel + .tabpanel + .frow { margin-top: var(--sp-5); }
.oitems__sum { font-size: var(--text-sm); color: var(--color-ink-2); }
.oitems { display: grid; box-shadow: inset 0 2px 0 var(--color-ink); }
.oline { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); box-shadow: inset 0 -1px 0 var(--color-line); }
.oline__tile, .oline__tile .ph { display: block; background: var(--color-mist); }
.oline__txt { display: grid; gap: 2px; min-width: 0; }
.oline__name { font-weight: 700; }
.oline__opt { font-size: var(--text-xs); color: var(--color-ink-2); }
.oline__amt { font-weight: 800; }
.ogrid { display: grid; gap: var(--sp-4); }
.oaddr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-4) var(--sp-5); background: var(--color-mist); font-size: var(--text-sm); color: var(--color-ink-2); }
.oaddr > p { grid-column: 1; }
.oaddr__n { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--text-base); color: var(--color-ink); }
.oaddr__b { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.ocp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--color-mist); }
.ocp__v { display: flex; flex-wrap: wrap; column-gap: var(--sp-3); font-size: var(--text-sm); }
.ocp__v b { font-weight: 800; }
.ocp__n { font-weight: 500; color: var(--color-ink-3); }
.paychips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.paychip { justify-content: center; min-height: calc(var(--spacing) * 12); }
.opay { margin-top: var(--sp-4); }
.opay > .ichips + .fnote { margin-top: var(--sp-2); }
.obank { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--color-mist); font-size: var(--text-sm); }
.obank p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-3); }
.obank span { color: var(--color-ink-2); }
.ophone { padding: var(--sp-4) var(--sp-5); background: var(--color-mist); font-size: var(--text-sm); color: var(--color-ink-2); }
.oagree-box { padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--color-mist); }
.oagree { display: grid; gap: var(--sp-1); padding-left: calc(1.25rem + var(--sp-3)); font-size: var(--text-xs); color: var(--color-ink-3); }
.opanel--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.opanel__t { font-size: var(--text-lg); font-weight: 800; }
.obuyer { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); flex: 1 1 18rem; padding: var(--sp-3) var(--sp-4); background: var(--color-mist); font-size: var(--text-sm); color: var(--color-ink-2); }
.obuyer b { color: var(--color-ink); }
.odisc { display: grid; gap: var(--sp-4); }
.osum { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); background: var(--color-chalk); }
.osum__h { font-size: var(--text-lg); font-weight: 800; }
.osum__l { display: grid; gap: var(--sp-2); font-size: var(--text-sm); }
.osum__l div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.osum__l dt { color: var(--color-ink-2); }
.osum__l dd { font-weight: 700; }
.osum__f { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-4); box-shadow: inset 0 2px 0 var(--color-ink); }
.osum__f span { font-weight: 700; }
.osum__f b { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 800; }
.osum__pt { font-size: var(--text-xs); color: var(--color-ink-2); text-align: right; }
.osum__pt b { font-weight: 800; color: var(--color-ink); }
.osum__note { font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; }
.cpbox__n { display: block; margin-top: var(--sp-1); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); }
.cplist { display: grid; box-shadow: inset 0 2px 0 var(--color-ink); }
.cplist .rb { display: flex; padding: var(--sp-4) 0; box-shadow: inset 0 -1px 0 var(--color-line); }
.cplist .rb__i { top: calc(var(--sp-4) + 1px); }
.rb__t { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; flex: 1; min-width: 0; }
.cp__name { font-size: var(--text-base); font-weight: 700; }
.cp__cond { grid-column: 1; font-size: var(--text-xs); color: var(--color-ink-3); }
.cp__off { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; }
@media (min-width: 720px) {
  .opanel, .osum { padding: var(--sp-8); }
  .ogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ogrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paychips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpbox { width: min(32rem, 100%); }
}
@media (min-width: 1024px) {
  .order { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: var(--sp-6); }
  .odisc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .order__side { align-self: stretch; }
  .osum { position: sticky; top: calc(var(--head-h) + var(--sp-6)); }
}

/* K 주문 완료 */
.done { display: grid; justify-items: center; gap: var(--sp-3); max-width: var(--spacing-form-wide); margin-inline: auto; padding: var(--sp-10) var(--sp-5); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); text-align: center; }
.done__art { width: 4rem; height: 4rem; fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.done__t { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.done__s { max-width: 30rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.dtable { width: 100%; margin-top: var(--sp-4); font-size: var(--text-sm); text-align: left; }
.dtable th, .dtable td { box-shadow: inset 0 -1px 0 var(--color-line); }
.dtable tr:first-child > * { box-shadow: inset 0 2px 0 var(--color-ink), inset 0 -1px 0 var(--color-line); }
.dtable th { width: 6rem; padding: var(--sp-3); background: var(--color-mist); font-weight: 700; vertical-align: top; }
.dtable td { padding: var(--sp-3) var(--sp-4); color: var(--color-ink-2); }
.dtable td b { color: var(--color-ink); font-weight: 800; }
.dtable td .linkbtn { min-height: 1.5rem; font-size: var(--text-xs); color: var(--color-ink); }
.dtable__no { font-size: var(--text-md); letter-spacing: 0.02em; }
.dtable__s { display: block; font-size: var(--text-xs); color: var(--color-ink-3); }
.done__h { justify-self: start; margin-top: var(--sp-4); font-size: var(--text-base); font-weight: 800; }
.oitems--done { width: 100%; text-align: left; }
.done__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); width: 100%; margin-top: var(--sp-4); }
.done__club { width: 100%; background: var(--color-mist); text-align: left; }
.done__club span { white-space: nowrap; }
@media (min-width: 720px) { .done { padding: var(--sp-12) var(--sp-10); } .dtable th { width: 7.5rem; padding-inline: var(--sp-4); } }

@media (prefers-reduced-motion: reduce) {
  .linkbtn .ic { transition: none; }
}

/* ═══ 회차 4 — L 사이드 메뉴 + 본문: MY 7 · SUPPORT 4 ═══════════════════════════════════════════
 * 레일 ≥1024 = 왼 220 sticky · <1024 = 가로 칩 줄(같은 DOM). 칩 줄은 붙이지 않는다 — 1열에서 내용을 덮는다(CLAUDE.md 규칙 11, wireframe L 은 "붙는" — NOTES).
 * 코발트: 레일 현재 항목 2px 막대 · 등급 카드 진행 막대(pace-on-dark) · 관심 ♡ · D-day 글자 · 선택된 지도 핀(상태)뿐 */
.lrail__t, .myhead__en, .gcard__en, .msum__v b, .mflow__n, .rgrp__d, .rgrp__w, .tkt__v b, .gnow__en, .gcom__n, .grow__en, .faq__Q, .faq__A, .scard__no, .spin span {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-variation-settings: var(--font-display--font-variation-settings);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.p-l main { padding-bottom: var(--spacing-section); }
.gcard :focus-visible { outline-color: var(--color-pace-on-dark); }
@media (max-width: 1023px) { .p-l .btn--s { min-height: var(--spacing-tap); } }

/* 레일 · 칩 줄 */
.lwrap { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-5); }
.lbody { min-width: 0; }
.lrail { min-width: 0; margin-bottom: var(--sp-5); }
.lrail__t, .lrail__h { display: none; }
.lrail__gs { position: relative; display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); scroll-padding-inline: var(--spacing-gutter); }
.lrail__gs::-webkit-scrollbar { display: none; }
.lrail__g, .lrail__ul, .lrail__ul li, .lrail__out { display: contents; }
.lrail__a { display: inline-flex; align-items: center; flex: none; min-height: var(--spacing-tap); padding: 0 var(--sp-4); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.lrail__a[aria-current] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); font-weight: 700; }
@media (min-width: 1024px) {
  .lwrap { grid-template-columns: var(--spacing-rail) minmax(0, 1fr); column-gap: var(--spacing-rail-gap); align-items: start; padding-top: var(--sp-10); }
  .lrail { position: sticky; top: calc(var(--spacing-header) + var(--sp-6)); margin: 0; }
  .lrail__t { display: block; padding-bottom: var(--sp-3); font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); box-shadow: inset 0 -2px 0 var(--color-ink); }
  .lrail__gs { display: grid; gap: var(--sp-5); overflow: visible; margin: 0; padding: var(--sp-5) 0 0; }
  .lrail__g { display: grid; gap: var(--sp-1); }
  .lrail__h { display: block; font-size: var(--text-base); font-weight: 700; }
  .lrail__ul { display: grid; }
  .lrail__ul li, .lrail__out { display: block; }
  .lrail__out { padding-top: var(--sp-4); box-shadow: inset 0 1px 0 var(--color-line); }
  .lrail__a { display: flex; min-height: 2rem; padding: 0 0 0 var(--sp-3); border: 0; background: none; color: var(--color-ink-2); }
  .lrail__a[aria-current] { background: none; color: var(--color-ink); box-shadow: inset 2px 0 0 var(--color-pace); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lrail__a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } }

/* 본문 머리 · 쪽 머리 탭 */
.mhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); }
.mhead__t { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 800; }
.mhead__n { font-weight: 700; color: var(--color-ink-3); }
.mhead__sub { order: 3; flex-basis: 100%; margin-top: calc(var(--sp-1) * -1); font-size: var(--text-xs); color: var(--color-ink-3); }
.mhead__r { display: flex; align-items: center; gap: var(--sp-2); }
.p-l .tabs--page { margin-bottom: var(--sp-5); }
.lempty { margin-top: 0; }
.onone { padding: var(--sp-10) var(--sp-5); background: var(--color-chalk); text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }

/* my/ — 대시보드 */
.mypage { padding-top: var(--sp-6); }
.myhead { margin-bottom: var(--sp-5); }
.myhead__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.myhead__en { font-size: var(--text-display-m); line-height: var(--text-display-m--line-height); }
.myhead__ko { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); }
.mgrade { display: grid; gap: var(--sp-3); }
.gcard { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); background: var(--color-night); color: var(--color-chalk); }
.gcard__who { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--text-sm); color: var(--color-night-2); }
.gcard__who b { font-size: var(--text-base); color: var(--color-chalk); }
.gcard__link { display: inline-flex; align-items: center; gap: 2px; min-height: var(--spacing-tap); font-weight: 700; color: var(--color-chalk); }
.gcard__link .ic { width: 1rem; height: 1rem; }
.gcard__g { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.gcard__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.gcard__ko { font-size: var(--text-sm); font-weight: 500; color: var(--color-night-2); }
.gcard__next { font-size: var(--text-sm); color: var(--color-night-2); }
.gcard__next b { color: var(--color-chalk); }
.gcard__m { margin-block: var(--sp-1); }
.gcard__links { display: flex; gap: var(--sp-5); font-size: var(--text-xs); }
.gcard__links a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); color: var(--color-night-2); text-decoration: underline; text-underline-offset: 3px; }
.msum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-line); }
.msum > li { background: var(--color-chalk); }
.msum__a { display: grid; align-content: space-between; gap: var(--sp-2); height: 100%; padding: var(--sp-4) var(--sp-5); }
.msum__l { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.msum__v { display: flex; align-items: baseline; gap: 2px; }
.msum__v b { font-size: var(--text-display-s); line-height: 1; }
.msum__v span { font-size: var(--text-sm); font-weight: 700; }
.msum--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-5); } /* 검수 1 P1: 390 에서 3칸(≈116px)에 36px 숫자 "12,400" 이 안 들어가 줄바꿈 — 720 미만은 2+1(셋째 칸 전폭), MY 홈 2×2 와 같은 리듬 */
.msum--3 > li:nth-child(3) { grid-column: 1 / -1; }
.msum__v b { white-space: nowrap; }
.msum--3 .msum__a { padding: var(--sp-4) var(--sp-3); }
.msum--3 .msum__l { font-size: var(--text-xs); }
@media (hover: hover) and (pointer: fine) { a.msum__a:hover .msum__l, .mflow__a:hover .mflow__k, .mmenu a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 720px) { .msum { grid-template-columns: repeat(4, minmax(0, 1fr)); } .msum--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msum--3 > li:nth-child(3) { grid-column: auto; } .msum--3 .msum__a { padding: var(--sp-5); } .msum--3 .msum__l { font-size: var(--text-sm); } }
/* 1024–1279 는 요약이 60% 칸에 들어가 4칸이면 "12,400P" 가 칸을 넘는다(폭 표 97 ≤ 110 에 단위 P 가 붙는다) → 2×2 */
@media (min-width: 1024px) { .mgrade { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } .mgrade .msum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gcard { padding: var(--sp-6); } }
@media (min-width: 1280px) { .mgrade .msum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mflow, .mmenu, .mrec { margin-top: var(--spacing-block); }
.mflow__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin-bottom: var(--sp-2); }
.mflow__t { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 800; }
.mflow__s { font-size: var(--text-xs); color: var(--color-ink-3); }
.mflow__h .more { margin-left: auto; }
@media (max-width: 719px) { .mflow__s { order: 3; flex-basis: 100%; } }
.mflow__l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.mflow__i { position: relative; }
.mflow__i + .mflow__i::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.5rem; height: 0.5rem; border-top: 1.5px solid var(--color-ink-3); border-right: 1.5px solid var(--color-ink-3); transform: translate(-50%, -50%) rotate(45deg); }
.mflow__a { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-5) var(--sp-1); text-align: center; }
.mflow__n { font-size: 2rem; line-height: 1; }
.mflow__k { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); white-space: nowrap; }
@media (min-width: 720px) { .mflow__a { padding-block: var(--sp-6); } .mflow__k { font-size: var(--text-sm); } }
.mmenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--spacing-grid); }
.mmenu__g { padding-top: var(--sp-3); box-shadow: inset 0 2px 0 var(--color-ink); }
.mmenu__h { margin-bottom: var(--sp-1); font-size: var(--text-base); font-weight: 800; }
.mmenu a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-2); box-shadow: inset 0 -1px 0 var(--color-line); }
.mmenu a .ic { width: 0.875rem; height: 0.875rem; flex: none; color: var(--color-ink-3); }
@media (min-width: 1024px) { .mmenu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mrec .minis--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrec .mini { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .mrec .minis--row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* my/#edit — 회원정보 수정 (표현용 입력) */
.medit { max-width: var(--spacing-form-wide); padding: var(--sp-6) var(--sp-5); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.medit__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); box-shadow: inset 0 -2px 0 var(--color-ink); }
.medit__t { font-size: var(--text-lg); font-weight: 800; }
.medit__cbs, .cform__cbs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.medit__pw { justify-self: start; }
.medit__btns, .cform__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-6); }
.medit__out { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--color-ink-3); }
.medit__out a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .medit { padding: var(--sp-10); } .medit__btns, .cform__btns { max-width: 26rem; margin-left: auto; } }

/* my/wish · my/recent — 카드 + 체크 겹침 / 지우기 */
.wtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); padding: 0 var(--sp-2) 0 var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.wtools__n { color: var(--color-ink-3); }
.wtools__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-2); }
@media (min-width: 720px) { .grid--l3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wcell { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.wcell__cb { position: absolute; left: 0; top: 0; z-index: 3; padding-inline: calc((var(--spacing-tap) - 1.25rem) / 2); }
.wcell__cb .cb__i { left: calc((var(--spacing-tap) - 1.25rem) / 2); }
.wcell__go { align-self: flex-start; margin-top: auto; }
.wcell__x { position: absolute; left: 0; top: 0; z-index: 3; }
.wcell__x .ic { width: 1.125rem; height: 1.125rem; }
.wnote { margin-top: var(--sp-5); }
.rstock { background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.rstock__i { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); }
.rstock__tile, .rstock__tile .ph { display: block; background: var(--color-mist); }
.rstock__txt { display: grid; gap: 2px; min-width: 0; }
.rstock__name { font-weight: 700; }
.rstock__opt { font-size: var(--text-sm); color: var(--color-ink-2); }
.rstock__d { font-size: var(--text-xs); color: var(--color-ink-3); }
.rstock__b { grid-column: 2; justify-self: start; }
@media (min-width: 720px) { .rstock__i { grid-template-columns: 5.5rem minmax(0, 1fr) auto; } .rstock__b { grid-column: auto; } }
.rgrp + .rgrp { margin-top: var(--spacing-block); }
.rgrp__h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); box-shadow: inset 0 -2px 0 var(--color-ink); }
.rgrp__d, .rgrp__w { font-size: 1.5rem; line-height: 1; }
.rgrp__w { color: var(--color-ink-3); }
.rgrp__k { font-size: var(--text-sm); font-weight: 700; }
.rgrp__n { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); }

/* my/orders — 기간 · 주문 묶음 · 상세(#id=) · 취소/반품 · 리뷰 */
.ptools { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.ptools .chip { min-width: 4.5rem; justify-content: center; }
.prange { display: grid; grid-template-columns: minmax(0, 1fr) var(--sp-4) minmax(0, 1fr); align-items: center; gap: var(--sp-2); max-width: 24rem; }
.prange__i { text-align: center; }
.prange__to { height: 1px; background: var(--color-ink-3); }
@media (min-width: 1024px) { .ptools { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .prange { justify-self: end; width: 100%; } }
.ofilter { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ofilter__l { font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }
.ogrps { display: grid; gap: var(--sp-4); }
.ogrp { background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.ogrp__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); min-height: calc(var(--spacing) * 12); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); background: var(--color-mist); box-shadow: inset 0 2px 0 var(--color-ink); }
.ogrp__t { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--text-sm); font-weight: 800; }
.ogrp__no { font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink-2); }
.ogrp__more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--spacing-tap); padding-inline: var(--sp-2); font-size: var(--text-sm); font-weight: 700; }
.ogrp__more .ic { width: 1rem; height: 1rem; }
.ogrp__b { display: grid; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4) var(--sp-4); }
.ogrp__lines .oline:last-child { box-shadow: none; }
.ogrp__s { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); box-shadow: inset 0 1px 0 var(--color-line); }
.ogrp__st { display: grid; gap: 2px; }
.ogrp__st b { font-size: var(--text-base); font-weight: 800; }
.ogrp__st span { font-size: var(--text-xs); color: var(--color-ink-2); }
.ogrp__act, .odet__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (hover: hover) and (pointer: fine) { .ogrp__more:hover, a.oline__name:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 1024px) {
  .ogrp__b { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--sp-6); padding-block: 0; }
  .ogrp__s { align-content: center; padding: var(--sp-4) 0 var(--sp-4) var(--sp-6); box-shadow: inset 1px 0 0 var(--color-line); }
}
.odet__back { margin-bottom: var(--sp-3); }
.odet__back .linkbtn { text-decoration: none; }
.odet__one { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.odet__h { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3); box-shadow: inset 0 -2px 0 var(--color-ink); }
.odet__t { font-size: var(--text-lg); font-weight: 800; }
.odet__no { margin-left: var(--sp-2); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink-2); }
.odet__meta { font-size: var(--text-sm); color: var(--color-ink-2); }
.odet__meta b { color: var(--color-ink); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps--5 .steps__i + .steps__i { padding-left: var(--sp-3); }
.steps--5 .steps__t { font-size: var(--text-xs); white-space: nowrap; }
.odet__note { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--color-mist); font-size: var(--text-sm); }
.odet__note .ic { width: 1rem; height: 1rem; flex: none; margin-top: 0.15em; }
.odet__h3 { margin-top: var(--sp-2); font-size: var(--text-base); font-weight: 800; }
.odet__cols { display: grid; gap: var(--sp-4); }
.odet__cols .dtable { margin-top: var(--sp-2); }
@media (min-width: 720px) { .odet__one { padding: var(--sp-8); } .steps--5 .steps__i + .steps__i { padding-left: var(--sp-4); } .steps--5 .steps__t { font-size: var(--text-sm); } }
@media (min-width: 1024px) { .odet__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); } }
.rv4 { padding: var(--sp-5) var(--sp-4); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.rv4 + .rv4 { margin-top: var(--sp-4); }
.rv4__h { margin-bottom: var(--sp-2); font-size: var(--text-base); font-weight: 800; }
.rv4__h b { color: var(--color-ink-3); }
.rv4__i { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); box-shadow: inset 0 -1px 0 var(--color-line); }
.rv4__i:last-child { box-shadow: none; }
.rv4__i .btn { grid-column: 2; justify-self: start; }
.myrv { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sp-3); padding-top: var(--sp-2); }
.myrv__txt { display: grid; gap: var(--sp-1); min-width: 0; }
.myrv__star { font-size: var(--text-sm); font-weight: 700; }
.myrv__b { max-width: 40em; font-size: var(--text-sm); color: var(--color-ink-2); }
.myrv__m { font-size: var(--text-xs); color: var(--color-ink-3); }
@media (min-width: 720px) { .rv4 { padding: var(--sp-6); } .rv4__i { grid-template-columns: 4.5rem minmax(0, 1fr) auto; } .rv4__i .btn { grid-column: auto; } }

/* my/coupons — 등록 · 쿠폰 표(점선 절취선) */
.creg { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); padding: var(--sp-4); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.creg__l { font-size: var(--text-sm); font-weight: 800; }
.creg__c { display: grid; gap: var(--sp-2); min-width: 0; }
@media (min-width: 720px) { .creg { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; column-gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); } .creg__l { padding-top: var(--sp-3); } .creg__c { max-width: 32rem; } }
.tkts { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .tkts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tkt { position: relative; display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.tkt__v { display: flex; align-items: baseline; justify-content: center; gap: 2px; padding: var(--sp-6) var(--sp-4); white-space: nowrap; }
.tkt__v b { font-size: var(--text-display-m); line-height: 0.9; }
.tkt__v span { font-size: var(--text-base); font-weight: 800; }
.tkt__txt { display: grid; align-content: center; gap: var(--sp-1); min-width: 0; padding: var(--sp-5) var(--sp-4); border-left: 1px dashed var(--color-edge); }
.tkt__t { font-size: var(--text-base); font-weight: 800; }
.tkt__c, .tkt__d { font-size: var(--text-xs); color: var(--color-ink-2); }
.tkt__src { margin-top: var(--sp-1); }
.tkt--used { background: var(--color-mist); }
.tkt--used .tkt__v, .tkt--used .tkt__t, .tkt--used .tkt__c, .tkt--used .tkt__d { color: var(--color-ink-3); }
.tkt__stamp { position: absolute; right: var(--sp-3); top: var(--sp-3); padding: 2px var(--sp-2); border: 1px solid var(--color-ink-3); font-size: var(--text-2xs); font-weight: 800; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); }

/* my/grade — 현재 등급 판 · 공통 혜택 · 등급별 혜택 줄 */
.gnow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-6) var(--sp-5); background: var(--color-chalk); }
.gnow__g { display: grid; gap: var(--sp-1); }
.gnow__en { font-size: var(--text-display-s); line-height: var(--text-display-s--line-height); }
.gnow__ko { font-size: var(--text-base); font-weight: 700; }
.gnow__s { margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--color-ink-3); }
.gnow__r { grid-column: 1 / -1; display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--color-paper); }
.gnow__dl { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); }
.gnow__dl div { display: grid; gap: 2px; }
.gnow__dl dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.gnow__dl dd { font-size: var(--text-lg); font-weight: 800; }
.gnow__next { font-size: var(--text-sm); color: var(--color-ink-2); }
.gnow__next b { color: var(--color-ink); }
@media (min-width: 1024px) { .gnow { grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); padding: var(--sp-8); } .gnow__r { grid-column: auto; } }
.gsec__t { margin-bottom: var(--sp-3); font-size: var(--text-lg); font-weight: 800; }
.gcom, .gtable { margin-top: var(--spacing-block); }
.gcom__l { display: grid; gap: 1px; background: var(--color-line); }
.gcom__i { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 2px var(--sp-3); padding: var(--sp-4); background: var(--color-chalk); }
.gcom__n { grid-row: span 2; font-size: 1.5rem; line-height: 1; color: var(--color-ink-3); }
.gcom__t { font-weight: 800; }
.gcom__d { font-size: var(--text-xs); color: var(--color-ink-2); }
@media (min-width: 720px) { .gcom__l { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gcom__i { grid-template-columns: minmax(0, 1fr); align-content: start; } .gcom__n { grid-row: auto; margin-bottom: var(--sp-2); } }
.gtable__l { background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.grow { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); }
.grow.is-now { background: var(--color-mist); }
.grow__mark { width: 4rem; height: 4rem; font-size: var(--text-xl); }
.grow__en { font-size: 1.5rem; line-height: 1; }
.grow__ko { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--color-ink-2); }
.grow__cond { grid-column: 2; font-size: var(--text-sm); font-weight: 700; }
.grow__ben { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--text-xs); color: var(--color-ink-2); }
.grow__ben li { position: relative; padding-left: var(--sp-3); }
.grow__ben li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; background: var(--color-ink-3); }
@media (min-width: 1024px) { .grow { grid-template-columns: 4rem 8rem 12.5rem minmax(0, 1fr); padding-inline: var(--sp-6); } .grow__cond, .grow__ben { grid-column: auto; } .grow__ben { display: grid; gap: 2px; } }

/* my/points — 표(모바일은 줄 카드) */
.ptable { width: 100%; background: var(--color-paper); font-size: var(--text-sm); box-shadow: inset 0 2px 0 var(--color-ink); }
.ptable thead { display: none; }
.ptable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4); box-shadow: inset 0 -1px 0 var(--color-line); }
.ptable td { display: block; }
.ptable__d, .ptable__no, .ptable__e { grid-column: 1; font-size: var(--text-xs); color: var(--color-ink-3); }
.ptable__t { grid-column: 1; font-weight: 700; }
.ptable__e::before { content: "유효기간 "; }
.ptable__v { grid-column: 2; grid-row: 1 / span 4; align-self: center; text-align: right; font-weight: 800; white-space: nowrap; }
.ptable__v.is-minus { color: var(--color-ink-3); }
.is-plan .ptable__t, .is-plan .ptable__v { color: var(--color-ink-2); }
.ptable__plan { display: inline-flex; padding: 0 var(--sp-1); border: 1px solid var(--color-line); font-size: var(--text-2xs); font-weight: 700; color: var(--color-ink-3); }
@media (min-width: 720px) {
  .ptable thead { display: table-header-group; }
  .ptable tr { display: table-row; padding: 0; }
  .ptable th, .ptable td { display: table-cell; padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; }
  .ptable thead th { background: var(--color-mist); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); box-shadow: inset 0 2px 0 var(--color-ink); }
  .ptable__t { font-weight: 500; }
  .ptable thead th:nth-child(4), .ptable__v { text-align: right; }
  .ptable__e::before { content: none; }
  .ptable__d, .ptable__no, .ptable__e { font-size: var(--text-sm); }
}

/* support/ — 검색 상자 · 분류 칸 8 · 아코디언 · 1:1 문의 */
.fsearch { display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); background: var(--color-mist); }
.fsearch__l { font-size: var(--text-sm); font-weight: 800; }
@media (min-width: 720px) { .fsearch { grid-template-columns: 9rem minmax(0, 32rem); align-items: center; column-gap: var(--sp-4); padding: var(--sp-6); } }
.fres { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); margin-top: var(--sp-3); font-size: var(--text-sm); }
.fres b { font-weight: 800; }
/* 칸 선은 칸마다 바깥 1px 그림자로(이웃 칸 바탕이 겹친 반쪽을 덮어 1px) — 배경색 격자·테두리 틀은 렌더 검사가 "칸이 바탕·테두리에 붙음" 으로 읽는다 */
.fcats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(var(--sp-5) + 1px) 1px 1px; }
.fcat { min-height: calc(var(--spacing) * 12); padding: 0 var(--sp-1); background: var(--color-chalk); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); box-shadow: 0 0 0 1px var(--color-line); }
.fcat[aria-pressed="true"] { position: relative; z-index: 1; background: var(--color-paper); color: var(--color-ink); font-weight: 700; box-shadow: inset 0 2px 0 var(--color-ink), 0 0 0 1px var(--color-line); }
@media (hover: hover) and (pointer: fine) { .fcat:hover { color: var(--color-ink); } }
@media (min-width: 1024px) { .fcats { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.faq { margin-top: var(--sp-5); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.faq__i { box-shadow: inset 0 -1px 0 var(--color-line); }
.faq__h, .nrow__h { font: inherit; }
.faq__q { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: 2px var(--sp-3); width: 100%; min-height: 4.5rem; padding: var(--sp-3) var(--sp-4); text-align: left; }
.faq__Q { grid-row: span 2; font-size: 1.5rem; line-height: 1; }
.faq__cat { grid-column: 2; font-size: var(--text-xs); color: var(--color-ink-3); }
.faq__t { grid-column: 2; font-size: var(--text-base); font-weight: 500; }
.faq__q .pm { grid-column: 3; grid-row: 1 / span 2; }
.faq__q[aria-expanded="true"] .faq__t { font-weight: 700; }
.faq__q[aria-expanded="true"] .pm--plus { display: none; }
.faq__q[aria-expanded="true"] .pm--minus { display: block; }
.faq__a, .nrow__body { transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out); }
@starting-style { .faq__a, .nrow__body { opacity: 0; translate: 0 -4px; } }
.faq__a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-3); margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-4); background: var(--color-mist); }
.faq__A { font-size: 1.5rem; line-height: 1; color: var(--color-ink-3); }
.faq__a p { max-width: 40em; font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
@media (min-width: 720px) {
  .faq__q { grid-template-columns: 2.5rem 6.5rem minmax(0, 1fr) 1rem; }
  .faq__Q, .faq__cat, .faq__t, .faq__q .pm { grid-column: auto; grid-row: auto; }
  .faq__a { grid-template-columns: 2.5rem minmax(0, 1fr); }
}
.cbox { margin-top: var(--spacing-block); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); scroll-margin-top: calc(var(--head-h) + var(--sp-4)); }
.cbox__in { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); }
.cbox__t { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 800; }
.cbox__d { margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--color-ink-2); }
.cbox__d b { color: var(--color-ink); }
.cform { padding: var(--sp-6) var(--sp-5); }
.cform__h { margin-bottom: var(--sp-5); }
.field--area { min-height: 10rem; padding-block: var(--sp-3); font-family: inherit; font-feature-settings: inherit; line-height: 1.6; color: inherit; resize: vertical; } /* 리셋의 font: inherit 목록에 textarea 가 없다 — 이 쪽에만 있어 리셋은 두고 여기서 */
.field--area[aria-invalid="true"], select.field[aria-invalid="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.cform__mail { color: var(--color-ink-3); }
.csent { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-5); text-align: center; }
.csent .cbox__t { outline: none; }
.csent .dtable { max-width: 32rem; text-align: left; }
.csent .cform__btns { width: 100%; max-width: 26rem; margin: var(--sp-3) auto 0; }
@media (min-width: 720px) { .cbox__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--sp-6) var(--sp-8); } .cform { padding: var(--sp-8); } .csent { padding: var(--sp-10) var(--sp-8); } }

/* support/notice — 검색 줄 · 게시판 표(누르면 아래로 펼침) */
.nsearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-4); background: var(--color-mist); }
.nsearch__sel { grid-column: 1 / -1; }
@media (min-width: 720px) { .nsearch { grid-template-columns: 9rem minmax(0, 22rem) auto; justify-content: end; } .nsearch__sel { grid-column: auto; } }
.ntable { margin-top: var(--sp-5); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.ntable__head { display: none; }
.nrow { box-shadow: inset 0 -1px 0 var(--color-line); }
.nrow__b { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: var(--sp-1) var(--sp-3); width: 100%; min-height: 4rem; padding: var(--sp-3) var(--sp-4); text-align: left; }
.nrow__no { grid-column: 1; justify-self: start; font-size: var(--text-sm); color: var(--color-ink-3); }
.nrow:not(.is-pin) .nrow__no, .nrow__v { display: none; }
.nrow__t { grid-column: 1; font-size: var(--text-base); font-weight: 500; }
.nrow__d { grid-column: 1; font-size: var(--text-xs); color: var(--color-ink-3); }
.nrow__i { grid-column: 2; grid-row: 1 / span 3; width: 1rem; height: 1rem; transition: rotate var(--duration-base) var(--ease-out); }
.nrow__b[aria-expanded="true"] .nrow__i { rotate: 180deg; }
.nrow__b[aria-expanded="true"] .nrow__t { font-weight: 700; }
.nrow__body { display: grid; gap: var(--sp-3); margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-5); background: var(--color-mist); font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.nrow__body p { max-width: 44em; }
.nrow__body .more { min-height: 2rem; }
@media (min-width: 720px) {
  .ntable__head, .nrow__b { grid-template-columns: 5rem minmax(0, 1fr) 6.5rem 4.5rem 1rem; }
  .ntable__head { display: grid; gap: var(--sp-3); align-items: center; min-height: calc(var(--spacing) * 11); padding: 0 var(--sp-4); background: var(--color-mist); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); box-shadow: inset 0 2px 0 var(--color-ink); }
  .ntable__head span:not(:nth-child(2)) { text-align: center; }
  .nrow__b { min-height: 3.5rem; padding-block: var(--sp-2); }
  .nrow__no, .nrow__t, .nrow__d, .nrow__v, .nrow__i { grid-column: auto; grid-row: auto; }
  .nrow:not(.is-pin) .nrow__no, .nrow__v { display: block; }
  .nrow__no { justify-self: center; }
  .nrow__d, .nrow__v { text-align: center; font-size: var(--text-sm); color: var(--color-ink-3); }
  .nrow__body { margin-left: calc(5rem + var(--sp-4) + var(--sp-3)); }
}

/* support/stores — 도구 · 가상 지도(선 몇 개 + 번호 핀) · 매장 카드 */
.stool { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.p-l .stool .tabs--page { margin-bottom: 0; }
@media (max-width: 719px) { .stool .tabs--page { margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); scroll-padding-inline: var(--spacing-gutter); } }
.stool__row { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .stool__row { grid-template-columns: minmax(0, 22rem) auto; align-items: center; justify-content: space-between; } }
.scount { font-size: var(--text-sm); color: var(--color-ink-2); }
.scount b { font-weight: 800; color: var(--color-ink); }
.stores { display: grid; gap: var(--sp-4); }
.smap { min-width: 0; }
.smap__in { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-mist); }
.smap__svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.smap__svg path { vector-effect: non-scaling-stroke; }
.smap__coast { stroke: var(--color-edge); stroke-width: 1.5; stroke-dasharray: 4 5; }
.smap__river { stroke: var(--color-paper); stroke-width: 9; }
.smap__hw { stroke: var(--color-line); stroke-width: 4; }
.smap__rd { stroke: var(--color-line); stroke-width: 1.5; }
.spin { position: absolute; z-index: 1; display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); transform: translate(-50%, -50%); }
.spin span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); line-height: 1; transition: transform var(--duration-fast) var(--ease-out); }
.spin[aria-pressed="true"] { z-index: 2; }
.spin[aria-pressed="true"] span { background: var(--color-pace); box-shadow: 0 0 0 3px var(--color-paper); transform: scale(1.2); }
.smap__r { position: absolute; transform: translate(-50%, -50%); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); pointer-events: none; }
.smap__l { position: absolute; left: var(--sp-3); bottom: var(--sp-3); padding: var(--sp-1) var(--sp-2); background: var(--color-paper); font-size: var(--text-2xs); font-weight: 700; color: var(--color-ink-2); }
.slist__w { min-width: 0; }
.slist { display: grid; gap: var(--sp-2); }
.scard { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) var(--sp-1); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); scroll-margin-top: calc(var(--head-h) + var(--sp-4)); }
.scard.is-on { box-shadow: inset 0 0 0 2px var(--color-ink); }
.scard__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.scard__no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); line-height: 1; }
.scard.is-on .scard__no { background: var(--color-pace); }
.scard__name { font-size: var(--text-base); font-weight: 800; }
.scard__a { font-size: var(--text-sm); }
.scard__m, .scard__note { font-size: var(--text-xs); color: var(--color-ink-3); }
.scard__go { justify-self: start; font-size: var(--text-xs); }
/* ≥720 [지도에서 보기] 를 이름 줄 오른쪽으로 — 목록 열이 붙는 지도보다 1.6화면 길던 것을 줄인다(렌더 검사 first-viewport-column-overflow) */
@media (min-width: 720px) { .scard { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding-bottom: var(--sp-4); } .scard > :not(.scard__go) { grid-column: 1; } .scard__go { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: calc(var(--sp-2) * -1); } }
@media (min-width: 1024px) { .stores { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .smap { order: 2; position: sticky; top: calc(var(--spacing-header) + var(--sp-6)); } }

/* support/terms — 시행일 · 목차 · 조항(72ch) */
.tver { display: grid; gap: var(--sp-1); max-width: 20rem; }
.tfake { width: fit-content; max-width: 100%; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--color-mist); font-size: var(--text-xs); color: var(--color-ink-2); }
.ttoc { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--color-paper); box-shadow: inset 0 2px 0 var(--color-ink); }
.ttoc__h { margin-bottom: var(--sp-1); font-size: var(--text-sm); font-weight: 800; }
.ttoc ol { display: grid; }
.ttoc__b { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: var(--spacing-tap); font-size: var(--text-sm); text-align: left; box-shadow: inset 0 -1px 0 var(--color-line); }
.ttoc__r { font-size: var(--text-xs); color: var(--color-ink-3); }
@media (hover: hover) and (pointer: fine) { .ttoc__b:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 720px) { .ttoc { padding-inline: var(--sp-6); } .ttoc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }
.tbody { margin-top: var(--sp-5); padding: var(--sp-6) var(--sp-5); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); }
.tch + .tch { margin-top: var(--sp-10); }
.tch__h { padding-bottom: var(--sp-2); font-size: var(--text-md); font-weight: 800; box-shadow: inset 0 -2px 0 var(--color-ink); }
.tart { max-width: 72ch; padding-top: var(--sp-5); scroll-margin-top: calc(var(--head-h) + var(--sp-4)); }
.tart__h { font-size: var(--text-base); font-weight: 800; }
.tart p { max-width: 34em; margin-top: var(--sp-2); font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); }
@media (min-width: 720px) { .tbody { padding: var(--sp-10); } }

@media (prefers-reduced-motion: reduce) {
  .faq__a, .nrow__body, .nrow__i, .spin span { transition: none; }
}