/* FELLRUN — 부품과 쪽 · 회차 2 "조망도 — 퇴근하고, 산으로". 색·서체·크기·간격은 tokens.css 의 var() 만 쓴다.
 * 원칙 1 하늘 아래 능선, 능선 아래 옷: 면(sky · cloud · mist · navy)의 교대로만 나눈다. border 0 — 테는 색 칸 선택(box-shadow 2px)과 포커스 링뿐.
 * 원칙 2 고르는 건 남색, 가는 건 주황: 선택 = 남색 면 + 흰 글자(한 문법). 주황은 주 버튼 면 · 선택 코스 정상 표지 · 할인율 글자(accent-ink) · 남색 판 위 포커스 링.
 * 원칙 3 글자는 표지판처럼: Gothic A1(--font-display)은 슬로건 · 제목 · 숫자 · 봉우리 · 로고에만, 나머지는 Pretendard.
 * 수렴 금지: text-transform 0 · letter-spacing 0 · 반경은 6(안쪽 2) · 스크롤 리빌 · clip-path 등장 0 · 12열 0. 움직임은 로드 때 능선 한 번뿐.
 */

/* ── 리셋 (:where — 특이도 0, lessons #49) ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(legend) { padding: 0; }
:where(button, input, output) { font: inherit; color: inherit; }
:where(button) { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; touch-action: manipulation; }
:where(input) { margin: 0; border: 0; }
:where(a) { color: inherit; text-decoration: none; touch-action: manipulation; }
:where(img, svg, picture) { display: block; max-width: 100%; }
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where(summary) { list-style: none; }
:where(summary)::-webkit-details-marker { display: none; }
:where([hidden]) { display: none !important; }

/* 열 수 — 4(모바일) · 6(720) · 8(1200). 12열이 아니다 */
:root { --cols: 4; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  --ring: var(--color-ink);
  --hover: var(--color-surface-2);
  --diff-empty: var(--color-surface);
  --other: var(--color-surface);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[data-overlay="menu"] body, html[data-overlay="filter"] body, html[data-overlay="login"] body { overflow: hidden; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* 브라우저가 그리는 곳도 이 장의 색으로 — 선택 · 캐럿 · 스크롤바 */
::selection { background: var(--color-band-mid); color: var(--color-ink); }
input { caret-color: var(--color-ink); }
.rail, .sheet--menu, html[data-overlay="filter"] .rail__body { scrollbar-color: var(--color-band-mid) transparent; }

/* ── 면 — 구획은 이 교대로만. 면마다 hover · 난이도 빈 칸 · "다른 면" 이 정해진다 ── */
.s-sky { background: var(--color-bg); --hover: var(--color-surface-2); --diff-empty: var(--color-surface); --other: var(--color-surface); }
.s-cloud { background: var(--color-surface); --hover: var(--color-surface-2); --diff-empty: var(--color-band-far); --other: var(--color-bg); }
.notice, .ft { background: var(--color-band-ink); color: var(--color-ink-invert); --ring: var(--color-accent); }

/* ── 공용 ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-h { font-size: var(--text-h3); }
.skip {
  position: absolute; left: var(--spacing-margin); top: calc(var(--spacing) * -20); z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--spacing-tap); padding-inline: var(--spacing-pad-sm);
  background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-base); font-weight: var(--font-weight-bold);
}
.skip:focus { top: calc(var(--spacing) * 2); }
.wrap { width: 100%; max-width: var(--container-page); margin-inline: auto; padding-inline: var(--spacing-margin); }
.sec { padding-block: var(--spacing-section); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--star { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.ico--off { color: var(--color-band-far); }
.ico--arrow { width: 16px; height: 16px; transition: translate 160ms var(--ease-snap); }
.mark { width: 12px; height: 6px; fill: currentColor; }

/* ── 글자 ── */
.display { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-display); line-height: var(--text-display--line-height); }
.title { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-title); line-height: var(--text-title--line-height); }
.h3 { font-family: var(--font-sans); font-weight: var(--font-weight-extrabold); font-size: var(--text-h3); line-height: var(--text-h3--line-height); }
.line { display: block; }
.fig { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-figure); line-height: var(--text-figure--line-height); }
.fig-sm { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-figure-sm); line-height: var(--text-figure-sm--line-height); }
.unit { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--text-card); }
.fig + .unit, .figline .unit { font-size: var(--text-h3); }
.figline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.price-lg { font-family: var(--font-sans); font-weight: var(--font-weight-extrabold); font-size: var(--text-price); line-height: var(--text-price--line-height); font-variant-numeric: tabular-nums; }
.lab { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.eyebrow { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.lead { font-size: var(--text-lead); line-height: var(--text-lead--line-height); font-weight: var(--font-weight-medium); max-width: var(--container-copy); }
.body { color: var(--color-ink-soft); max-width: var(--container-copy); }
.note { margin-top: calc(var(--spacing) * 3); font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.sec-hd { display: grid; gap: calc(var(--spacing) * 2); margin-bottom: var(--spacing-block); }
.sec-hd--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--spacing-pad); } /* 좁으면 링크가 제목 아래로 — 제목을 꺾지 않는다 */
.sec-hd__txt { font-size: var(--text-card); line-height: var(--text-card--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); max-width: var(--container-copy); }

/* ── 단추 · 글 링크 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
  min-height: 48px; padding-inline: 18px; border-radius: var(--radius-base);
  font-size: var(--text-card); line-height: 1.25; font-weight: var(--font-weight-bold); white-space: nowrap;
  transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap), scale 100ms var(--ease-snap);
}
.btn:active { scale: 0.98; }
.btn--primary { gap: 10px; min-height: 52px; padding-inline: 20px 16px; background: var(--color-accent); color: var(--color-ink); font-size: 1.0625rem; }
.btn__arrow { display: grid; place-items: center; }
.btn__arrow .ico { transition: translate 160ms var(--ease-snap); }
.btn--cloud { min-height: 52px; background: var(--color-surface); color: var(--color-ink); font-size: 1.0625rem; }
.btn--navy { background: var(--color-band-ink); color: var(--color-ink-invert); }
.btn--mist { background: var(--color-surface-2); color: var(--color-ink); }
.btn--sm { min-height: var(--spacing-tap); padding-inline: 14px; font-size: var(--text-small); }
.ibtn { position: relative; display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-base); transition: background-color 120ms var(--ease-snap); }
.ibtn[aria-expanded="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.tlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--spacing-tap);
  font-size: var(--text-card); font-weight: var(--font-weight-bold); color: var(--color-ink);
}
.tlink--sm { font-size: var(--text-small); }
.tlink--btn { color: inherit; }

/* ── 태그 · 칩 · 탭 — 선택은 전부 남색 면 + 흰 글자 ── */
.tag { display: inline-flex; align-items: center; height: 22px; padding-inline: 6px; border-radius: var(--radius-inner); font-size: var(--text-micro); line-height: 1; font-weight: var(--font-weight-bold); white-space: nowrap; }
.tag--new { background: var(--color-band-ink); color: var(--color-ink-invert); }
.tag--only { background: var(--color-surface); color: var(--color-ink); }
.tag--svc { background: var(--color-surface); color: var(--color-ink); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1.5); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--spacing-tap); padding-inline: 12px;
  border-radius: var(--radius-base); background: var(--color-surface-2); color: var(--color-ink);
  font-size: var(--text-small); font-weight: var(--font-weight-semibold); line-height: 1.2;
  transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap);
}
.s-sky .chip, .sheet--menu .chip { background: var(--color-surface); }
.chip__n { color: var(--color-ink-soft); font-weight: var(--font-weight-medium); }
.chip__check { display: none; width: 16px; height: 16px; stroke-width: 2.25; }
.chip[aria-pressed="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.chip[aria-pressed="true"] .chip__check { display: block; }
.chip[aria-pressed="true"] .chip__n { color: var(--color-ink-invert-soft); }
.chip .sw { width: 16px; height: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--spacing-tap); min-height: var(--spacing-tap); padding-inline: 12px;
  border-radius: var(--radius-base); color: var(--color-ink-soft); font-size: var(--text-card); line-height: 1.2; font-weight: var(--font-weight-bold); white-space: nowrap;
  transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap);
}
.tab__n { font-weight: var(--font-weight-medium); }
.tab[aria-selected="true"], .tab[aria-pressed="true"], .tab[aria-checked="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.tab[aria-selected="true"] .tab__n, .tab[aria-pressed="true"] .tab__n, .tab[aria-checked="true"] .tab__n { color: var(--color-ink-invert-soft); }

/* ── 사진 · 자리표시자 — 비율 상자는 에셋이 와도 남는다 ── */
.media { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--radius-base); background: var(--color-surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media--cut { background: var(--color-plate); }
.media--cut img { filter: brightness(1.02); } /* 누끼 바탕(생성본 ≈ 세이지보다 2% 어둡다)을 판과 맞춘다 — 판 위에 상자가 보이지 않게 */
.media--contain img { object-fit: contain; }
.media--lift img { filter: var(--photo-lift); }
.media--fill { aspect-ratio: auto; height: 100%; }
.ph { container-type: inline-size; }
.ph__sil { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--color-band-far); }
.media--cut .ph__sil { left: 16%; top: 10%; width: 68%; height: 72%; fill: var(--color-surface-2); }
.ph__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.ph__cap b { font-weight: var(--font-weight-bold); color: var(--color-ink); }
@container (max-width: 200px) { .ph__use { display: none; } }
@container (max-width: 96px) { .ph__cap { display: none; } }

/* ── 이 장의 한 가지 (부품): 난이도 3칸 · 노선 표지 · 견본 ── */
.diff { display: flex; align-items: center; gap: 8px; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.diff__bar { display: flex; gap: 2px; }
.diff__bar i { display: block; width: 14px; height: 4px; background: var(--diff-empty); }
.diff[data-lv="1"] .diff__bar i:nth-child(1),
.diff[data-lv="2"] .diff__bar i:nth-child(-n + 2),
.diff[data-lv="3"] .diff__bar i { background: var(--color-ink); }
.diff--lg { gap: 12px; font-size: var(--text-card); font-weight: var(--font-weight-bold); }
.diff--lg .diff__bar { gap: 3px; }
.diff--lg .diff__bar i { width: 32px; height: 6px; }
.lmark { display: inline-block; flex: none; width: 16px; height: 16px; background: var(--line); border-radius: var(--radius-inner); }
.station { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.station .lmark + span { margin-left: 2px; }
.sws { display: flex; gap: 4px; }
.sw { display: block; width: 14px; height: 14px; background: var(--sw); border-radius: var(--radius-inner); }

/* ── 고지 띠 (navy · 32) ── */
.notice__in { max-width: var(--container-page); margin-inline: auto; padding-inline: var(--spacing-margin); min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-pad); font-size: var(--text-micro); line-height: var(--text-micro--line-height); font-weight: var(--font-weight-semibold); }
.notice__full, .notice__promo { display: none; }
.notice__promo { gap: 6px; font-weight: var(--font-weight-medium); color: var(--color-ink-invert-soft); white-space: nowrap; }
.notice__promo a { color: var(--color-ink-invert); font-weight: var(--font-weight-semibold); }

/* ── 머리 (sky · 56 / 64 · sticky 아님) ── */
.hd { position: relative; z-index: 20; background: var(--color-bg); }
.hd__in { max-width: var(--container-page); margin-inline: auto; padding-inline: var(--spacing-margin); height: 56px; display: flex; align-items: center; gap: var(--spacing-pad); }
.logo { display: inline-flex; align-items: baseline; gap: 6px; min-height: var(--spacing-tap); padding-top: 9px; margin-right: auto; }
.logo__ko { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: 1.375rem; line-height: 1; }
.logo__en { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.nav { display: none; }
.hd__tools { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.hd__wish { display: none; }
.hd__count { position: absolute; right: 2px; top: 4px; min-width: 20px; height: 20px; display: grid; place-items: center; padding-inline: 4px; background: var(--color-band-ink); color: var(--color-ink-invert); font-size: var(--text-micro); font-weight: var(--font-weight-bold); line-height: 1; border-radius: var(--radius-inner); }
.ibtn[aria-expanded="true"] .hd__count { background: var(--color-ink-invert); color: var(--color-ink); }

.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--color-surface); box-shadow: var(--shadow-pop); }
.mega__in { max-width: var(--container-page); margin-inline: auto; padding: var(--spacing-pad-lg) var(--spacing-margin) calc(var(--spacing) * 10); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr); gap: calc(var(--spacing-gutter) * 2); align-items: start; }
.mega__h { font-size: var(--text-small); font-weight: var(--font-weight-extrabold); margin-bottom: calc(var(--spacing) * 3); }
.mega__list { display: grid; gap: 2px; }
.mega__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
.mega__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--spacing-tap); padding-inline: 12px; margin-inline: -12px; border-radius: var(--radius-base); font-size: var(--text-card); font-weight: var(--font-weight-semibold); transition: background-color 120ms var(--ease-snap); }
.mega__n { color: var(--color-ink-soft); font-size: var(--text-label); font-weight: var(--font-weight-medium); }
.mega__pick { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--spacing-pad-sm); align-items: center; padding: 12px; background: var(--color-surface-2); border-radius: var(--radius-base); transition: background-color 120ms var(--ease-snap); }
.mega__pickt { display: grid; gap: 6px; justify-items: start; font-size: var(--text-small); }
.mega__pickt b { font-size: var(--text-card); }

/* ── 검색 판 (머리 아래 떠오르는 판) ── */
.search { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--color-surface); box-shadow: var(--shadow-pop); }
.search__in { max-width: var(--container-page); margin-inline: auto; padding: var(--spacing-pad) var(--spacing-margin) var(--spacing-pad-lg); display: grid; gap: var(--spacing-pad); }
.search__row { display: flex; gap: calc(var(--spacing) * 2); }
.search__input { flex: 1; min-width: 0; min-height: 52px; padding-inline: var(--spacing-pad-sm); background: var(--color-surface-2); color: var(--color-ink); border-radius: var(--radius-base); font-size: var(--text-body); }
.search__input::placeholder { color: var(--color-ink-soft); }
.search__input:focus-visible { outline-offset: 0; }
.search__cols { display: grid; gap: var(--spacing-pad); }
.search__cols .lab { margin-bottom: calc(var(--spacing) * 2); }
.search .chip__n { font-family: var(--font-display); font-weight: var(--font-weight-black); color: var(--color-ink-soft); }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--spacing) * 3); }
.mini { display: grid; gap: calc(var(--spacing) * 2); align-content: start; }
.mini__t { display: grid; gap: 2px; font-size: var(--text-label); line-height: var(--text-label--line-height); color: var(--color-ink-soft); }
.mini__t b { color: var(--color-ink); font-weight: var(--font-weight-bold); }

/* ── 메뉴 · 시트 · 대화 상자 ── */
.sheet--menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); padding: env(safe-area-inset-top) var(--spacing-margin) calc(var(--spacing) * 8 + env(safe-area-inset-bottom)); }
.sheet__hd { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.sheet__title { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-h3); }
.sheet__note { margin-top: var(--spacing-pad); font-size: var(--text-small); color: var(--color-ink-soft); }
.mnav { display: grid; gap: 4px; }
.mnav__group, .mnav > .mnav__row { background: var(--color-surface); border-radius: var(--radius-base); }
.mnav__row { display: flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: 52px; padding-inline: var(--spacing-pad-sm); font-size: var(--text-body); font-weight: var(--font-weight-extrabold); cursor: pointer; }
.mnav__row .acc__plus, .mnav__row .acc__minus { margin-left: auto; }
.mnav__row--aux { font-weight: var(--font-weight-bold); }
.mnav__n { font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.mnav__group ul { padding: 0 var(--spacing-pad-sm) 8px; display: grid; }
.mnav__group ul a { display: flex; align-items: center; justify-content: space-between; min-height: var(--spacing-tap); color: var(--color-ink-soft); font-weight: var(--font-weight-semibold); }
.mnav__h { margin: 12px 0 4px; font-size: var(--text-label); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.mnav__courses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.acc__minus { display: none; }
details[open] > summary .acc__plus { display: none; }
details[open] > summary .acc__minus { display: block; }
.dlg { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center; padding: var(--spacing-pad-sm); padding-bottom: calc(var(--spacing-pad-sm) + env(safe-area-inset-bottom)); background: var(--color-overlay-bg); }
.dlg__box { width: min(440px, 100%); display: grid; gap: var(--spacing-pad-sm); padding: var(--spacing-pad-md); background: var(--color-surface); border-radius: var(--radius-base); box-shadow: var(--shadow-pop); }
.dlg__hd { display: flex; align-items: center; justify-content: space-between; }
.dlg__act { display: grid; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2); }

/* ── 꼬리 (navy · 윗변이 능선) ── */
.ft { position: relative; color: var(--color-ink-invert-soft); }
.ft__ridge { position: absolute; left: 0; bottom: 100%; width: 100%; height: 40px; fill: var(--color-band-ink); }
.ft__ridge--w { display: none; }
.ft__in { max-width: var(--container-page); margin-inline: auto; padding: calc(var(--spacing) * 8) var(--spacing-margin) calc(var(--spacing) * 10 + env(safe-area-inset-bottom)); display: grid; gap: calc(var(--spacing) * 8); }
.ft__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-pad-lg) var(--spacing-pad-sm); }
.ft__h { color: var(--color-ink-invert-soft); font-size: var(--text-label); font-weight: var(--font-weight-bold); margin-bottom: calc(var(--spacing) * 1); }
.ft__col li > * { display: inline-flex; align-items: center; min-width: var(--spacing-tap); min-height: var(--spacing-tap); font-size: var(--text-small); font-weight: var(--font-weight-medium); color: var(--color-ink-invert); }
.ft__col li > span { color: var(--color-ink-invert-soft); }
.ft__notice { max-width: 34rem; font-size: var(--text-small); line-height: var(--text-small--line-height); font-weight: var(--font-weight-medium); }
.ft__copy { font-size: var(--text-micro); }

/* ── 상품 카드 · 끼움 타일 · 격자 ── */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__frame { position: relative; margin-bottom: 10px; }
.card__img { display: block; }
.card__img .media { aspect-ratio: 4 / 5; }
.card__img .media img { transition: translate 160ms var(--ease-snap); }
.card .tag { position: absolute; left: 8px; top: 8px; }
.rank { position: absolute; left: 10px; top: 8px; font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-figure-sm); line-height: 1; color: var(--color-ink); }
.card .ph__cap { left: auto; right: 10px; text-align: right; }
.card .ph__use { display: none; }
.wish { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); color: var(--color-ink); }
.wish[aria-pressed="true"] .ico { fill: currentColor; }
.card__body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.card__body > .diff { margin-top: auto; padding-top: 4px; } /* 난이도는 줄마다 같은 높이(선반) — 구멍은 이름·사양 사이가 아니라 난이도 위로 */
.card__name { font-size: var(--text-card); line-height: var(--text-card--line-height); font-weight: var(--font-weight-semibold); }
.card__name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-block: 12px; margin-block: -12px; }
.card__spec { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: var(--text-body); line-height: 1.35; font-variant-numeric: tabular-nums; }
.price__off { color: var(--color-accent-ink); font-weight: var(--font-weight-extrabold); }
.price__now { font-weight: var(--font-weight-extrabold); }
.price__was { font-size: var(--text-label); color: var(--color-ink-soft); }
.rev { display: flex; align-items: center; gap: 4px; font-size: var(--text-label); line-height: var(--text-label--line-height); color: var(--color-ink-soft); }
.rev b { color: var(--color-ink); font-weight: var(--font-weight-semibold); }

.grid4, .grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 8) var(--spacing-gutter); }
.tile { display: flex; flex-direction: column; min-width: 0; }
.tile--in { grid-column: span 2; }
.tile--shelf { display: none; }
.tile__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-base) var(--radius-base) 0 0; }
.tile__img .media { position: absolute; inset: 0; height: auto; border-radius: 0; }
.tile__cap { display: grid; gap: 2px; padding: var(--spacing-pad-sm) var(--spacing-pad); background: var(--color-surface-2); border-radius: 0 0 var(--radius-base) var(--radius-base); }
.s-sky .tile__cap { background: var(--color-surface); }
.tile__txt { font-size: var(--text-card); font-weight: var(--font-weight-semibold); line-height: var(--text-card--line-height); }

/* ════ 1 홈 ════ */
/* H2 조망도 — 하늘(글) · 먼·가운데 능선(z1) · 사진 카드(z2) · 가까운 능선(z3) · 구름 바다와 이름표(z4) · 글 묶음(z5) */
.hero { position: relative; height: var(--spacing-hero); overflow: clip; background: var(--color-bg); }
.hero__grid {
  position: absolute; inset: 0; max-width: var(--container-page); margin-inline: auto; padding-inline: var(--spacing-margin);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--spacing-gutter);
}
.hero__copy { grid-area: 1 / 1 / 2 / -1; align-self: start; position: relative; z-index: 5; padding-top: 24px; }
.hero__h { margin: 8px 0 10px; }
.hero__lead { color: var(--color-ink); max-width: none; }
.hero__act { display: flex; flex-wrap: wrap; gap: 8px; width: fit-content; margin-top: 18px; }
/* 글 묶음 상자는 칸 폭만큼 넓다 — 빈 곳이 봉우리 이름표 클릭을 가로채지 않게 글·단추만 포인터를 받는다 */
.hero__copy { pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__act .btn { min-height: 48px; }
.hero__card { grid-area: 1 / 3 / 2 / 5; justify-self: end; align-self: end; position: relative; z-index: 2; width: clamp(8.25rem, 34vw, 12.5rem); margin-bottom: 1.5rem; }
.hero__card .media { box-shadow: none; }
.ridge { position: absolute; inset-inline: 0; bottom: 0; height: var(--spacing-ridge); display: none; }
.ridge--m { display: block; }
.ridge__l { position: absolute; inset: 0; width: 100%; height: 100%; animation: var(--animate-rise); animation-duration: 600ms; } /* 설비 규칙 12: 등장 연출 ≤ 600ms(토큰 720 → 600) */
.ridge__l--far { z-index: 1; fill: var(--color-band-far); --rise: 8px; }
.ridge__l--mid { z-index: 1; fill: var(--color-band-mid); --rise: 16px; }
.ridge__l--near { z-index: 3; fill: var(--color-band-near); --rise: 24px; }
.ridge__l--cloud { z-index: 4; fill: var(--color-surface); animation: none; } /* 구름은 땅 — --rise 0 이라 움직이지 않는다(불투명도도 두지 않는다: 카테고리 띠와 이음매가 번쩍이지 않게) */
@keyframes fr-rise { from { translate: 0 var(--rise); opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes fr-fade { from { opacity: 0; } }
.peak {
  position: absolute; z-index: 4; transform: translateX(-50%);
  display: grid; justify-items: center; align-content: end; min-width: var(--spacing-tap); min-height: var(--spacing-tap); padding: 0 4px;
  color: var(--color-ink); text-align: center; white-space: nowrap;
  animation: fr-fade 600ms var(--ease-rise) 1 backwards;
  transition: translate 160ms var(--ease-snap);
}
.peak__alt { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-body); line-height: 1.1; }
.peak__name { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-label); line-height: 1.25; }
.peak__mark { width: 12px; height: 6px; margin-top: 2px; fill: currentColor; transition: fill 120ms var(--ease-snap); }
.peak:focus-visible { translate: 0 -2px; }
.peak:focus-visible .peak__mark { fill: var(--color-accent); }

/* H3 카테고리 6칸 — 구름 바다가 그대로 이어지는 흰 띠 */
.cats { padding-block: 4px 20px; }
.cats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--spacing-tile); }
.cat { display: grid; gap: 6px; }
.cat .media { aspect-ratio: 1 / 0.8; }
.cat .media img { transition: translate 160ms var(--ease-snap); }
.cat__t { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.cat__t b { font-size: var(--text-cat); line-height: var(--text-cat--line-height); font-weight: var(--font-weight-extrabold); white-space: nowrap; }
.cat__t span { font-size: var(--text-micro); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }

/* H4 코스 */
.courses__tabs { margin-bottom: var(--spacing-pad-md); }
.cpanel { display: grid; gap: var(--spacing-pad-md); }
.course { display: grid; align-content: start; padding: var(--spacing-pad-md) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); --diff-empty: var(--color-band-far); }
.course__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--spacing-pad); }
.course__dest { display: flex; align-items: baseline; gap: 4px; font-size: var(--text-card); font-weight: var(--font-weight-bold); }
.course__dest .fig-sm { margin-left: 2px; }
.prof { position: relative; margin: var(--spacing-pad-lg) 0 var(--spacing-pad); }
.prof__svg { width: 100%; height: clamp(5.5rem, 3rem + 9vw, 10rem); fill: var(--color-band-mid); }
.prof__ghost { fill: var(--color-band-far); }
.prof__start { position: absolute; left: 8px; bottom: 6px; font-size: var(--text-label); line-height: 1.2; font-weight: var(--font-weight-bold); }
.prof__top { position: absolute; right: -6px; bottom: calc(var(--top) * 100% + 2px); display: grid; justify-items: end; font-size: var(--text-label); line-height: 1.25; font-weight: var(--font-weight-bold); white-space: nowrap; }
.prof__top b { font-weight: var(--font-weight-extrabold); }
.prof__mark { width: 12px; height: 6px; margin-top: 2px; fill: var(--color-accent); } /* 원칙 2 ② — 선택된 코스 하나의 정상 표지(홈 H4 만) */
.prof--mini { margin: 0 0 10px; }
.prof--mini .prof__svg { height: 48px; }
.prof--mini .prof__top { font-size: var(--text-micro); }
.prof--mini .prof__mark { fill: var(--color-ink); } /* 룩북 미니 카드 — 착장 둘이 한 화면에 걸쳐도 주황 0 */
.course__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-pad-sm); padding-block: 4px 12px; }
.course__stats dt { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.course__stats dd { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.course__st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--text-small); font-weight: var(--font-weight-bold); }
.course__walk { font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.course__note { margin-top: 10px; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.cpanel__side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cpanel__k { font-size: var(--text-small); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.cpanel__say { font-size: var(--text-lead); line-height: var(--text-lead--line-height); font-weight: var(--font-weight-bold); }
.cpanel__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 6) var(--spacing-gutter); margin-block: 6px 2px; }

/* H5 신상품 선반 */
.shelf__tabs { margin-bottom: var(--spacing-pad-md); }

/* H6 숫자로 보는 소재 — 큰 판 1 + 작은 판 2 (같은 크기 카드 3칸 아님) */
.mats__grid { display: grid; gap: var(--spacing-gutter); }
.mat { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); gap: var(--spacing-pad); align-items: start; padding: var(--spacing-pad-md) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); }
.mat--sm { grid-template-columns: 5rem minmax(0, 1fr); }
.mat--big { grid-template-areas: "fig fig" "sw txt"; row-gap: var(--spacing-pad-sm); }
.mat__fig { grid-area: fig; }
.mat--big .mat__sw { grid-area: sw; }
.mat--big .mat__txt { grid-area: txt; }
.mat__sw .media { aspect-ratio: 1; }
.mat__txt { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.mat__say { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); max-width: 28rem; }
.mat--big .fig { font-size: var(--text-figure); }
.mat--sm .fig { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }

/* H7 룩북 미리보기 */
.lp__grid { display: grid; gap: var(--spacing-pad-md); }
.lp__photo .media { aspect-ratio: 16 / 9; }
.lp__txt { display: grid; gap: 12px; align-content: start; }
.lp__k { font-size: var(--text-small); font-weight: var(--font-weight-bold); }
.lp__idx { display: grid; gap: 4px; margin-top: 6px; }
.lp__idx a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding-inline: 12px; margin-inline: -12px; border-radius: var(--radius-base); font-size: var(--text-body); font-weight: var(--font-weight-bold); transition: background-color 120ms var(--ease-snap); }
.lp__n { font-family: var(--font-display); font-weight: var(--font-weight-black); color: var(--color-ink-soft); }

/* H8 같이 올라요 */
.crew__grid { display: grid; gap: var(--spacing-pad-md); }
.crew__photo .media { aspect-ratio: 4 / 5; }
.crew__txt { display: grid; gap: 12px; align-content: start; min-width: 0; }
.crew__lead { font-size: var(--text-body); line-height: var(--text-body--line-height); }
.meets { display: grid; gap: 8px; margin-top: 8px; }
.meet {
  display: grid; align-items: center; gap: 6px 12px; padding: 12px var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day seat" "what what" "st go";
}
.meet__day { grid-area: day; }
.meet__what { grid-area: what; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.meet__what b { font-size: var(--text-body); font-weight: var(--font-weight-extrabold); }
.meet__what span { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.meet__st { grid-area: st; font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.meet__seat { grid-area: seat; font-size: var(--text-small); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.meet__go { grid-area: go; justify-self: end; }

/* H9 가까운 매장 + 가상 고지 */
.near__grid { display: grid; gap: var(--spacing-pad-md); }
.near__list { display: grid; gap: 8px; }
.store { display: grid; gap: 6px; align-content: start; padding: var(--spacing-pad); background: var(--color-surface-2); border-radius: var(--radius-base); --hover: var(--color-band-far); }
.store__tag { justify-self: start; }
.store__name { font-size: var(--text-h3); line-height: var(--text-h3--line-height); font-weight: var(--font-weight-extrabold); }
.store__region { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.store__meta { display: grid; gap: 4px; font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.store__meta li { display: flex; gap: 6px; align-items: flex-start; }
.store__meta .ico { width: 16px; height: 16px; margin-top: 3px; }
.store__svc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.store__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.store__note { font-size: var(--text-label); color: var(--color-ink-soft); }
.store.is-picked { background: var(--color-band-ink); color: var(--color-ink-invert); --ring: var(--color-accent); }
.store.is-picked .store__region, .store.is-picked .store__meta, .store.is-picked .store__note { color: var(--color-ink-invert-soft); }
.store .btn--cloud { min-height: var(--spacing-tap); font-size: var(--text-small); }
.store__tag[data-now] { display: inline-flex; height: 22px; align-items: center; padding-inline: 6px; border-radius: var(--radius-inner); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-micro); font-weight: var(--font-weight-bold); }
.fake { display: grid; gap: 8px; align-content: start; padding: var(--spacing-pad-md); background: var(--other); border-radius: var(--radius-base); }
.fake__t { font-size: var(--text-body); line-height: 1.5; font-weight: var(--font-weight-bold); }
.fake__s { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }

/* ════ 2 재킷 목록 ════ */
.list-hd { padding-block: var(--spacing-pad) var(--spacing-pad-md); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.crumb li { display: flex; align-items: center; }
.crumb li + li::before { content: "/"; padding-inline: 6px; }
.crumb a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); }
.list-hd__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px var(--spacing-pad); margin-bottom: var(--spacing-pad-sm); }
.list-hd__n { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.promo { padding: 10px 14px; background: var(--color-surface); border-radius: var(--radius-base); font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.course-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 12px; font-size: var(--text-card); font-weight: var(--font-weight-bold); }
.list { padding-block: var(--spacing-pad-md) var(--spacing-section); }
.list__body { display: grid; gap: var(--spacing-pad); }
.list__main { min-width: 0; }
.rail { display: none; }
.rail__body { display: grid; gap: var(--spacing-pad-md); }
.fgroup__h { display: block; margin-bottom: 10px; font-size: var(--text-small); font-weight: var(--font-weight-extrabold); }
.fgroup__sub { margin: 12px 0 8px; font-size: var(--text-label); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.chips--size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip--size { justify-content: center; }
.rail__ft, .rail .rail__hd { display: none; }
html[data-overlay="filter"] .rail { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 60; background: var(--color-surface); }
html[data-overlay="filter"] .rail__hd { display: flex; padding-inline: var(--spacing-margin); padding-top: env(safe-area-inset-top); }
html[data-overlay="filter"] .rail__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--spacing-margin) var(--spacing-pad); }
html[data-overlay="filter"] .rail__ft { display: grid; grid-template-columns: 1fr 2fr; gap: calc(var(--spacing) * 2); padding: 12px var(--spacing-margin) calc(12px + env(safe-area-inset-bottom)); background: var(--color-surface); }
.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--spacing-pad); }
.tools__n { font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.tools__m { display: flex; gap: calc(var(--spacing) * 2); }
.tools__fn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: var(--radius-inner); background: var(--color-band-ink); color: var(--color-ink-invert); font-size: var(--text-micro); }
.sorts { display: none; }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--spacing-pad); }
.picked__h { font-size: var(--text-small); font-weight: var(--font-weight-bold); }
.picked .chip .chip__check { display: block; }
.pager { display: flex; gap: 4px; margin-top: calc(var(--spacing) * 12); }
.pager__n, .pager__next { display: grid; place-items: center; min-width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-base); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; transition: background-color 120ms var(--ease-snap); }
.pager__next { display: inline-flex; gap: 6px; padding-inline: 12px; }
.pager__n[aria-current] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.recent__h { margin-bottom: var(--spacing-pad); }
.minis--row { display: flex; gap: var(--spacing-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--spacing-margin); margin-inline: calc(var(--spacing-margin) * -1); padding-inline: var(--spacing-margin); scrollbar-width: none; }
.minis--row::-webkit-scrollbar { display: none; }
.minis--row > li { flex: 0 0 40%; scroll-snap-align: start; }

/* ════ 3 상품 상세 ════ */
.pdp { padding-block: var(--spacing-pad) var(--spacing-section); }
.pdp__grid { display: grid; gap: var(--spacing-pad-md); }
.gallery { position: relative; min-width: 0; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; gap: 8px; border-radius: var(--radius-base); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.gtag, .gallery__n { position: absolute; display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-inner); font-size: var(--text-micro); font-weight: var(--font-weight-bold); }
.gtag { left: 10px; bottom: 10px; }
.gallery__n { right: 10px; top: 10px; font-variant-numeric: tabular-nums; }
.gallery__note { margin-top: 12px; font-size: var(--text-small); color: var(--color-ink-soft); }
.info { display: grid; gap: 14px; align-content: start; min-width: 0; padding: var(--spacing-pad-md) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); --diff-empty: var(--color-band-far); }
.added { display: grid; gap: 4px; padding: 12px var(--spacing-pad-sm); background: var(--color-surface-2); border-radius: var(--radius-base); font-weight: var(--font-weight-semibold); }
.added p { display: flex; gap: 8px; align-items: flex-start; }
.info__tags { display: flex; gap: 4px; }
.info__tags .tag--only { background: var(--color-surface-2); }
.info__name { margin-bottom: -8px; }
.info__en { font-size: var(--text-small); color: var(--color-ink-soft); }
.info__rev { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: var(--spacing-tap); margin-block: -8px; font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.info__rev span { color: var(--color-ink-soft); }
.info__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.info__pt { font-size: var(--text-label); color: var(--color-ink-soft); }
.info__diff { display: grid; gap: 10px; padding-block: 4px; }
.info__diff .opt__h { margin-top: 4px; }
.opt { display: grid; gap: 8px; }
.opt__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opt__h { font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.opt__h b { color: var(--color-ink); font-weight: var(--font-weight-extrabold); margin-left: 4px; }
.colors { display: flex; gap: 6px; }
.color { display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-base); }
.color .sw { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--color-surface); }
.color[aria-checked="true"] .sw { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ink); } /* 견본은 남색 면이 될 수 없어 유일한 예외 — 바깥 2px 테 */
.colors--sm .sw { width: 24px; height: 24px; }
.sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.size { display: grid; place-items: center; min-height: var(--spacing-tap); border-radius: var(--radius-base); background: var(--color-surface-2); font-size: var(--text-small); font-weight: var(--font-weight-bold); transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap); }
.size[aria-checked="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.size[aria-disabled="true"] { background: transparent; color: var(--color-ink-soft); text-decoration: line-through; cursor: not-allowed; }
.stepper { display: inline-flex; align-items: center; justify-self: start; background: var(--color-surface-2); border-radius: var(--radius-base); }
.stepper__b { display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-base); transition: background-color 120ms var(--ease-snap); }
.stepper__v { min-width: 32px; text-align: center; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.opt--qty { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
.buy { display: grid; gap: 8px; margin-top: 4px; }
.buy .btn--primary { width: 100%; justify-content: space-between; }
.buy__row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; }
.buy__row .btn { min-height: 52px; }
.wish--lg { position: static; width: 52px; height: 52px; background: var(--color-surface-2); border-radius: var(--radius-base); }
.ship { display: grid; gap: 6px; font-size: var(--text-small); color: var(--color-ink-soft); }
.ship li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ship .ico { width: 18px; height: 18px; }
.ship .tlink { margin-left: auto; }
.figs3 { display: grid; gap: 4px; margin-bottom: var(--spacing-pad); }
.figs3 > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 10px; }
.figs3 dt { order: 2; font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); text-align: right; }
.figs3 dd { display: flex; align-items: baseline; gap: 4px; }
.narrow2 { display: grid; gap: var(--spacing-block); }
.narrow2 > .sec-hd { margin-bottom: 0; }
.tblbox { padding: 6px; background: var(--color-surface); border-radius: var(--radius-base); }
.tbl { width: 100%; font-size: var(--text-small); line-height: var(--text-small--line-height); }
.tbl th, .tbl td { padding: 12px var(--spacing-pad-sm); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--color-surface-2); font-weight: var(--font-weight-extrabold); }
.tbl tbody th { font-weight: var(--font-weight-bold); white-space: nowrap; }
.tbl tbody tr:nth-child(even) { background: var(--color-surface-2); }
.tbl td { color: var(--color-ink-soft); }
.tbl td.num { color: var(--color-ink); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-base); background: var(--color-surface); }
.tbl--size { min-width: 34rem; }
.tbl--size thead th, .tbl--size tbody tr:nth-child(odd) { background: var(--color-surface-2); }
.tbl--size tbody tr:nth-child(even) { background: var(--color-surface); }
.tbl--size th.num, .tbl--size td.num { text-align: center; }
.reviews__grid { display: grid; gap: var(--spacing-pad-lg); }
.rsum { display: grid; gap: 12px; align-content: start; }
.rsum__big { display: flex; align-items: baseline; gap: 10px; }
.rsum__h { margin-top: 8px; }
.dist { display: grid; gap: 6px; }
.dist li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 10px; font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.dist__bar { display: block; height: 8px; background: var(--color-surface); border-radius: var(--radius-inner); overflow: hidden; }
.dist__bar span { display: block; width: var(--w); height: 100%; background: var(--color-ink-soft); }
.dist__n { text-align: right; font-variant-numeric: tabular-nums; }
.rlist { display: grid; gap: 8px; align-content: start; }
.rcard { display: grid; gap: 8px; padding: var(--spacing-pad) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); }
.rcard__stars { display: flex; gap: 2px; }
.rcard__who { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.rcard__t { max-width: var(--container-copy); }
.rcard__ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-label); color: var(--color-ink-soft); }
.rcard__ft .btn[aria-pressed="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.rlist__more { font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.accs { display: grid; gap: 6px; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-inline: var(--spacing-pad); background: var(--color-surface-2); border-radius: var(--radius-base); font-weight: var(--font-weight-extrabold); cursor: pointer; transition: background-color 120ms var(--ease-snap); }
.acc p { padding: 12px var(--spacing-pad) 16px; color: var(--color-ink-soft); max-width: var(--container-copy); }

/* ════ 4 기술 소재 ════ */
.tech-hd { padding-block: var(--spacing-block) var(--spacing-section); }
.tech-hd__grid { display: grid; gap: var(--spacing-pad-md); }
.tech-hd__txt { display: grid; gap: 12px; }
.tech-hd .fake { background: var(--color-surface); }
.split { display: grid; gap: var(--spacing-pad-md); align-items: start; }
.split__txt { display: grid; gap: 14px; align-content: start; min-width: 0; }
.swbox { display: inline-grid; padding: var(--spacing-pad-md); background: var(--other); border-radius: var(--radius-base); }
/* 소재 견본 = 견본 크기: 1:1, 본문 폭의 1/3 이하 · 최대 360(DESIGN 사진 규칙 3) */
.swbox .media { aspect-ratio: 1; width: min(22.5rem, calc((min(100vw, var(--container-page)) - 2 * var(--spacing-margin)) / 3)); }
.layers { display: grid; gap: 4px; }
.layer-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding-inline: var(--spacing-pad); background: var(--other); border-radius: var(--radius-base); font-size: var(--text-small); transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap); }
.layer-b b { font-size: var(--text-body); font-weight: var(--font-weight-extrabold); }
.layer-b span { color: var(--color-ink-soft); font-weight: var(--font-weight-semibold); }
.layer-b[aria-selected="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.layer-b[aria-selected="true"] span { color: var(--color-ink-invert-soft); }
.layer-say { max-width: var(--container-copy); }
.bars { display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 2.5rem; align-items: center; gap: 12px; font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.bars__bar { display: block; height: 10px; background: var(--color-surface-2); border-radius: var(--radius-inner); overflow: hidden; }
.bars__bar span { display: block; width: var(--w); height: 100%; background: var(--color-ink-soft); }
.bars .is-us .bars__bar span { background: var(--color-ink); }
.bars .is-us { font-weight: var(--font-weight-extrabold); }
.bars__v { text-align: right; font-variant-numeric: tabular-nums; }
.t5__fig { gap: 6px 8px; }
.t5__fig .lab { flex-basis: 100%; }
.facts { display: grid; gap: 8px; max-width: var(--container-copy); }
.facts li { position: relative; padding-left: 18px; color: var(--color-ink-soft); }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 4px; background: var(--color-ink); }
.facts--svc li { display: flex; gap: 8px; align-items: center; padding-left: 0; color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.facts--svc li::before { content: none; }
.split__media .media { aspect-ratio: var(--ar); }
.steps { display: grid; gap: var(--spacing-pad); }
.steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px; align-items: start; }
.steps__h { font-size: var(--text-card); font-weight: var(--font-weight-extrabold); margin-bottom: 2px; }
.steps p { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.brand { display: grid; gap: var(--spacing-pad-md); }
.brand__txt { display: grid; gap: 14px; }
.brand__links { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-pad-md); }
.promise { display: grid; gap: 10px; align-content: start; padding: var(--spacing-pad-md); background: var(--color-surface); border-radius: var(--radius-base); }
.promise p { color: var(--color-ink-soft); }
.promise__f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.promise__f dt { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.promise__f dd { display: flex; align-items: baseline; gap: 3px; }

/* ════ 5 룩북 — 코스 넷, 착장 넷 (겹침 없음) ════ */
.look-hd { padding-block: var(--spacing-block) var(--spacing-section); }
.look-hd .eyebrow { margin-bottom: 8px; }
.look-hd .lead { margin-top: 14px; }
.look-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--spacing-pad-md); }
.look-index .tab { justify-content: flex-start; white-space: normal; text-align: left; padding-block: 6px; }
.look__grid { display: grid; gap: var(--spacing-pad-md); align-items: start; }
.look__photo { min-width: 0; }
.look__photo > .media { width: min(100%, calc(min(78svh, 45rem) * var(--ar))); }
.look__extra { width: 60%; margin-top: 8px; }
.look__txt { display: grid; gap: 12px; align-content: start; min-width: 0; }
.look__now { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; border-radius: var(--radius-inner); background: var(--color-band-ink); color: var(--color-ink-invert); font-size: var(--text-micro); font-weight: var(--font-weight-bold); }
.look__n { color: var(--color-ink-soft); }
.look__say { color: var(--color-ink); }
.minic { padding: var(--spacing-pad-sm) var(--spacing-pad); background: var(--other); border-radius: var(--radius-base); }
.minic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.minic__meta b { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-card); }
.look__items { display: grid; gap: 4px; }
.litem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 6px; margin-inline: -6px; border-radius: var(--radius-base); transition: background-color 120ms var(--ease-snap); }
.litem__img .media { aspect-ratio: 4 / 5; }
.litem__t { display: grid; gap: 2px; font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.litem__t b { font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }
.litem__go { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-label); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.look__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 4px; font-size: var(--text-small); }
.look__sum b { font-size: var(--text-body); font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }

/* ════ 6 매장 ════ */
.stores-hd { padding-block: var(--spacing-block) var(--spacing-pad-md); }
.stores-hd .lead { margin-block: 10px var(--spacing-pad); font-size: var(--text-body); }
.map-grid { display: grid; gap: var(--spacing-pad-md); align-items: start; }
.map {
  display: grid; height: 240px; gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-areas: "gyeonggi seoul gangwon" "gyeonggi chung gangwon" "jeolla gyeong gyeong" "jeolla gyeong gyeong" "jeju . .";
}
.map__cell { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-height: 0; padding: 8px 10px; background: var(--color-surface-2); border-radius: var(--radius-base); text-align: left; overflow: hidden; transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap); }
.map__cell[aria-pressed="true"] { background: var(--color-band-ink); color: var(--color-ink-invert); }
.map__cell--seoul { grid-area: seoul; }
.map__cell--gyeonggi { grid-area: gyeonggi; }
.map__cell--gangwon { grid-area: gangwon; }
.map__cell--chungcheong { grid-area: chung; }
.map__cell--jeolla { grid-area: jeolla; }
.map__cell--gyeongsang { grid-area: gyeong; }
.map__cell--jeju { grid-area: jeju; }
.map__name { font-size: var(--text-label); font-weight: var(--font-weight-bold); line-height: 1.3; }
.map__n { font-family: var(--font-display); font-weight: var(--font-weight-black); font-size: var(--text-h3); line-height: 1; } /* 모바일 지도 칸은 40px 대 — 수를 줄이고 720 부터 figure-sm */
.map__pins { display: none; }
.map__pins > span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-label); line-height: 1.3; font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.map__pins i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink); }
.map__pin-t { display: none; }
.map__cell[aria-pressed="true"] .map__pins > span { color: var(--color-ink-invert-soft); }
.map__cell[aria-pressed="true"] .map__pins i { background: var(--color-ink-invert); }
.store-list { min-width: 0; }
.store-list__n { margin-bottom: 12px; font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.store-list__n b { color: var(--color-ink); }
.store-list__grid { display: grid; gap: 8px; }
.fix { display: grid; gap: var(--spacing-pad-lg); }
.fix .body { margin-block: 10px var(--spacing-pad-md); }
.steps--row li { grid-template-columns: 3rem minmax(0, 1fr); }
.tbl--price caption { text-align: left; padding: 12px var(--spacing-pad-sm) 4px; }
.tbl--price { font-size: var(--text-card); }

/* ════ 7 장바구니 ════ */
.fakebar { padding-block: 14px; }
.fakebar p { font-size: var(--text-card); line-height: var(--text-card--line-height); font-weight: var(--font-weight-bold); max-width: 56rem; }
.cart { padding-top: var(--spacing-pad-md); }
.cart-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--spacing-pad); margin-bottom: var(--spacing-pad-md); }
.cart-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--text-small); font-weight: var(--font-weight-bold); color: var(--color-ink-soft); }
.cart-steps li { display: inline-flex; align-items: center; min-height: 32px; }
.cart-steps li[aria-current] { padding-inline: 10px; background: var(--color-band-ink); color: var(--color-ink-invert); border-radius: var(--radius-base); }
.cart__grid { display: grid; gap: var(--spacing-pad-md); align-items: start; }
.cart__items { display: grid; gap: 8px; min-width: 0; }
.cart__bar { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.cart__ship { display: flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.citem { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--spacing-pad); padding: var(--spacing-pad) 52px var(--spacing-pad) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); }
.citem__img .media { aspect-ratio: 4 / 5; }
.citem__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.citem__name { font-weight: var(--font-weight-bold); }
.citem__opt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: var(--text-small); color: var(--color-ink-soft); }
.citem__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.citem__price { font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }
.citem__del { position: absolute; right: 6px; top: 6px; }
.edit { display: grid; gap: 8px; padding: 12px; background: var(--color-surface-2); border-radius: var(--radius-base); }
.edit .size { background: var(--color-surface); }
.edit .size[aria-checked="true"] { background: var(--color-band-ink); }
.edit .size[aria-disabled="true"] { background: transparent; }
.edit .color .sw { box-shadow: 0 0 0 2px var(--color-surface-2); }
.edit .color[aria-checked="true"] .sw { box-shadow: 0 0 0 2px var(--color-surface-2), 0 0 0 4px var(--color-ink); }
.edit .btn { justify-self: start; }
.perk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 6px var(--spacing-pad); background: var(--color-surface-2); border-radius: var(--radius-base); font-size: var(--text-small); font-weight: var(--font-weight-semibold); }
.sum { display: grid; gap: var(--spacing-pad-sm); align-content: start; padding: var(--spacing-pad-md) var(--spacing-pad); background: var(--color-surface); border-radius: var(--radius-base); }
.sum__rows { display: grid; gap: 8px; font-size: var(--text-small); }
.sum__rows div { display: flex; justify-content: space-between; gap: 12px; }
.sum__rows dt { color: var(--color-ink-soft); }
.sum__rows dd { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.sum__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-top: 12px; font-weight: var(--font-weight-bold); }
.sum .btn--primary { width: 100%; justify-content: space-between; }
.sum__note { font-size: var(--text-label); color: var(--color-ink-soft); }
.empty { display: grid; gap: var(--spacing-pad); justify-items: start; }
.cats__list--empty { width: 100%; padding: 0; margin-block: 8px; }

/* ════ 중단점 ════ */
@media (max-width: 44.99rem) {
  .tbl--spec thead { display: none; }
  .tbl--spec tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px var(--spacing-pad-sm); }
  .tbl--spec th, .tbl--spec td { padding: 0; }
  .tbl--spec td:last-child { grid-column: 1 / -1; }
  .look__photo > .media { width: 100%; }
  /* 360 대 폰: 토큰 최솟값(40 · 28)이 칸을 1~2px 남기고 꽉 찬다 — 칸 폭에 맞춰 조금만 줄인다(390 이상은 토큰 그대로) */
  .hero__h { font-size: min(var(--text-display), calc((100vw - 2 * var(--spacing-margin)) / 8.4)); }
  .title { font-size: min(var(--text-title), 7.4vw); }
}

/* 720 — 6열 · 카테고리 한 줄 6 · 상품 3열 */
@media (min-width: 45rem) {
  :root { --cols: 6; }
  .notice__in { font-size: var(--text-label); line-height: var(--text-label--line-height); }
  .notice__full { display: inline; }
  .notice__short { display: none; }
  .notice__promo { display: flex; }
  .hd__in { height: 64px; }
  .logo__ko { font-size: 1.625rem; }
  .eyebrow { font-size: var(--text-card); }

  .hero__copy { grid-column: 1 / 5; padding-top: 40px; }
  .hero__h { margin: 14px 0 12px; }
  .hero__act { gap: 10px; margin-top: 22px; }
  .hero__act .btn { min-height: 52px; }
  .hero__card { grid-area: 1 / 5 / 2 / 7; width: 100%; justify-self: stretch; margin-bottom: -2px; }
  .ridge--m { display: none; }
  .ridge--t { display: block; }

  .cats { padding-block: 0 var(--spacing-pad-md); }
  .cats__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .cat { gap: 10px; }
  .cat .media { aspect-ratio: 1 / 0.82; }
  .cat__t span { font-size: var(--text-small); }

  .course { padding: var(--spacing-pad-lg); }
  .cpanel__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid4--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--shelf { display: flex; }
  .tile--shelf .tile__img { aspect-ratio: auto; flex: 1 1 0; min-height: 200px; }
  .grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--in .tile__img { aspect-ratio: auto; flex: 1 1 0; min-height: 240px; }
  .mats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat--big { grid-column: 1 / -1; }
  .mat { padding: var(--spacing-pad-md); gap: var(--spacing-pad-md); }
  .mat--sm { grid-template-columns: 6rem minmax(0, 1fr); }
  .crew__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .crew__photo { grid-column: 1 / 3; }
  .crew__txt { grid-column: 3 / -1; }
  .meet { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "day what seat go" "day st seat go"; column-gap: var(--spacing-pad); }
  .meet__day { min-width: 6.5rem; }
  .near__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .ft__ridge--m { display: none; }
  .ft__ridge--w { display: block; height: 56px; }
  .ft__in { padding-top: calc(var(--spacing) * 10); }
  .ft__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .search__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--spacing-gutter) * 2); }
  .figs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .figs3 > div { flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 10px; padding-block: 0; }
  .figs3 dt { text-align: left; }
  .tools__m .btn:last-child { display: none; }
  .sorts { display: flex; }
  .minis--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-pad-lg) var(--spacing-gutter); }
  .rcard { padding: var(--spacing-pad-md); }
  .info { padding: var(--spacing-pad-lg); }
  .tech-hd__grid, .brand { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .tech-hd__txt { grid-column: 1 / -1; }
  .tech-hd .fake { grid-column: 1 / 5; }
  .brand__txt { grid-column: 1 / 5; }
  .promise { grid-column: 5 / -1; }
  .split--steps { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .split--steps .split__media { grid-column: 1 / 4; }
  .split--steps .split__txt { grid-column: 4 / -1; }
  .split--photo { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .split--photo .split__media { grid-column: 1 / 4; }
  .split--photo .split__txt { grid-column: 4 / -1; }
  .look-index { display: flex; }
  .look__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .look__photo { grid-column: 1 / 4; grid-row: 1; }
  .look__txt { grid-column: 4 / -1; grid-row: 1; }
  .look--2 .look__photo, .look--4 .look__photo { grid-column: 4 / -1; }
  .look--2 .look__txt, .look--4 .look__txt { grid-column: 1 / 4; }
  .look--2 .look__photo > .media { margin-left: auto; }
  .look--4 .look__photo { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 34fr); gap: 8px; align-items: end; }
  .look--4 .look__photo > .media { width: 100%; }
  .look__extra { width: auto; margin-top: 0; }
  .store-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map { height: 300px; }
  .map__n { font-size: var(--text-figure-sm); }
  .fix { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--spacing-gutter); align-items: start; }
  .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .steps--row li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dlg { align-items: center; }
  .cats__list--empty { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fakebar p { font-size: var(--text-card); }
}

/* 720–1023 — 기술 T3–T5 는 쌓는다(견본 → 글) */
@media (min-width: 45rem) and (max-width: 63.99rem) {
  .look__photo > .media { width: 100%; }
}

/* 1024 — 메가 메뉴 · 목록 레일 · 상세 2단 · 소재 교대 분할 */
@media (min-width: 64rem) {
  .hd__in { gap: var(--spacing-pad-md); }
  .nav { display: flex; flex: 1; align-items: center; gap: var(--spacing-pad-md); }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__list > li > a { display: flex; align-items: center; min-height: 36px; padding-inline: 10px; border-radius: var(--radius-base); font-size: var(--text-card); font-weight: var(--font-weight-semibold); transition: background-color 120ms var(--ease-snap), color 120ms var(--ease-snap); }
  .nav__list--aux > li > a { color: var(--color-ink-soft); }
  .nav__list--aux > li:not(.nav__course) { display: none; } /* 1024–1199: 둘째 묶음은 "코스" 하나(나머지는 꼬리 · 모바일 메뉴) */
  .nav__list > li > a[aria-current] { background: var(--color-band-ink); color: var(--color-ink-invert); }
  .nav__mega:hover .mega, .nav__mega:focus-within .mega, html[data-nav="jackets"] .mega { display: block; }
  /* 메가 메뉴가 열려 있는 동안 능선 이름표를 숨긴다 — 판 아래 경계가 이름표를 반쪽으로 자르지 않게(qa-3 P2-1).
   * 판 높이를 늘리는 대신 이름표를 숨긴다(코스가 늘어도 다시 깨지지 않는다). 즉시 — 움직임 아님 */
  body:has(.nav__mega:hover) .peak, body:has(.nav__mega:focus-within) .peak, html[data-nav="jackets"] .peak { visibility: hidden; }
  .hd__wish { display: grid; }
  .hd__menu { display: none; }
  .list__body { grid-template-columns: var(--spacing-rail) minmax(0, 1fr); gap: var(--spacing-pad-lg); align-items: start; }
  .rail { display: block; position: sticky; top: var(--spacing-pad); max-height: calc(100svh - var(--spacing-pad) * 2); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
  .rail .chip { min-height: 40px; }
  .tools__m { display: none; }
  .pdp__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--spacing-pad-lg); align-items: start; }
  .gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .gallery__n { display: none; }
  .info { position: sticky; top: calc(var(--spacing) * 6); }
  .narrow2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--spacing-gutter); align-items: start; }
  .narrow2 > .sec-hd { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 12px; }
  .narrow2 > .note { grid-column: 2; }
  .narrow2 > .tbl-scroll, .narrow2 > .tblbox, .narrow2 > .accs { grid-column: 2; }
  .narrow2 > .title { grid-row: 1 / 3; }
  .split { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .split__sw { grid-column: 1 / 4; }
  .split__txt { grid-column: 4 / -1; }
  .split--rev .split__sw { grid-column: 4 / -1; grid-row: 1; justify-self: end; }
  .split--rev .split__txt { grid-column: 1 / 4; grid-row: 1; }
  .map-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--spacing-gutter); }
  .map { position: sticky; top: var(--spacing-pad); height: auto; aspect-ratio: 3 / 4; }
  .map__pins { display: flex; flex-wrap: wrap; gap: 6px; max-width: 64px; }
  .cart__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spacing-pad-lg); }
  .sum { position: sticky; top: calc(var(--spacing) * 6); padding: var(--spacing-pad-lg); }
  .empty { grid-column: 1 / -1; }
}

/* 1200 — 8열 · 조망도 넓은 판 · 홈 코스 좌우 */
@media (min-width: 75rem) {
  :root { --cols: 8; }
  .nav__list--aux > li:not(.nav__course) { display: list-item; }
  .hero__copy { grid-column: 1 / 6; }
  .hero__card { grid-area: 1 / 6 / 2 / 9; width: 78%; justify-self: center; }
  .ridge--t { display: none; }
  .ridge--w { display: block; }
  .cpanel { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: start; }
  .cpanel > .course { grid-column: 1 / 5; }
  .cpanel__side { grid-column: 5 / -1; }
  .cpanel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-pad) var(--spacing-gutter); }
  .card--row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px; align-items: stretch; }
  .card--row .card__frame { margin-bottom: 0; }
  .grid4--shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile--shelf { display: none; }
  .mats__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: auto auto; }
  .mat--big { grid-column: 1 / 5; grid-row: 1 / 3; align-self: stretch; align-content: space-between; padding: var(--spacing-pad-lg); }
  .mat--sm { grid-column: 5 / -1; }
  .lp__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: center; }
  .lp__photo { grid-column: 1 / 6; }
  .lp__txt { grid-column: 6 / -1; padding-left: 8px; }
  .crew__photo { grid-column: 1 / 4; }
  .crew__txt { grid-column: 4 / -1; padding-left: 8px; }
  .near__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: stretch; }
  .near__stores { grid-column: 1 / 6; display: grid; grid-template-rows: auto 1fr; }
  .near__grid > .fake { grid-column: 6 / -1; align-self: end; }
  .near__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tech-hd__txt { grid-column: 1 / 6; }
  .tech-hd .fake { grid-column: 6 / -1; align-self: end; }
  .split__sw { grid-column: 1 / 4; }
  .split__txt { grid-column: 5 / -1; }
  .split--rev .split__sw { grid-column: 6 / -1; }
  .split--rev .split__txt { grid-column: 1 / 6; }
  .split--steps .split__media { grid-column: 1 / 5; }
  .split--steps .split__txt { grid-column: 5 / -1; }
  .split--photo .split__media { grid-column: 1 / 5; }
  .split--photo .split__txt { grid-column: 5 / -1; }
  .brand__txt { grid-column: 1 / 6; }
  .promise { grid-column: 6 / -1; }
  .look__photo { grid-column: 1 / 5; }
  .look__txt { grid-column: 5 / -1; padding-left: 8px; }
  .look--3 .look__photo { grid-column: 1 / 6; }
  .look--3 .look__txt { grid-column: 6 / -1; }
  .look--2 .look__photo, .look--4 .look__photo { grid-column: 5 / -1; }
  .look--2 .look__txt, .look--4 .look__txt { grid-column: 1 / 5; padding-left: 0; padding-right: 8px; }
  .map-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .map { grid-column: 1 / 4; }
  .store-list { grid-column: 4 / -1; }
  .map__pins { max-width: none; gap: 4px 12px; }
  .map__pin-t { display: inline; }
}

/* 1280 — 목록 4열 */
@media (min-width: 80rem) {
  .grid-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* hover — 마우스가 있을 때만(터치에서 붙어 남지 않게, mobile-native) */
@media (hover: hover) {
  .tab:hover:not([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]) { background: var(--hover); color: var(--color-ink); }
  .chip:hover:not([aria-pressed="true"]) { background: var(--color-band-far); }
  .s-sky .chip:hover:not([aria-pressed="true"]), .sheet--menu .chip:hover { background: var(--color-surface-2); }
  .btn--primary:hover .btn__arrow .ico { translate: 3px 0; }
  .btn--cloud:hover { background: var(--color-surface-2); }
  .btn--navy:hover { background: var(--color-ink-soft); }
  .btn--mist:hover { background: var(--color-band-far); }
  .ibtn:hover:not([aria-expanded="true"]) { background: var(--hover); }
  .tlink:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .tlink:hover .ico--arrow { translate: 3px 0; }
  .peak:hover { translate: 0 -2px; }
  .peak:hover .peak__mark { fill: var(--color-accent); }
  .cat:hover .media img { translate: 0 -4px; }
  .card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mega__list a:hover, .lp__idx a:hover, .litem:hover { background: var(--color-surface-2); }
  .s-cloud .litem:hover { background: var(--color-surface-2); }
  .s-sky .litem:hover, .s-sky .lp__idx a:hover { background: var(--color-surface); }
  .mega__pick:hover { background: var(--color-band-far); }
  .nav__list > li > a:not([aria-current]):hover { background: var(--color-surface-2); color: var(--color-ink); }
  .size:hover:not([aria-checked="true"], [aria-disabled="true"]) { background: var(--color-band-far); }
  .stepper__b:hover, .acc summary:hover { background: var(--color-band-far); }
  .map__cell:hover:not([aria-pressed="true"]) { background: var(--color-band-far); }
  .layer-b:hover:not([aria-selected="true"]) { background: var(--color-surface-2); }
  .pager__n:hover:not([aria-current]), .pager__next:hover { background: var(--color-surface-2); }
  .ft__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ridge__l, .peak { animation: none; }
  .btn, .btn__arrow .ico, .ico--arrow, .peak, .cat .media img, .card__img .media img { transition: none; }
  .btn:active { scale: 1; }
  .peak:hover, .peak:focus-visible, .btn--primary:hover .btn__arrow .ico, .tlink:hover .ico--arrow, .cat:hover .media img { translate: none; }
}