/* haruhome — 하루가전 (가상 가전 자사몰) · 4단계 구현
 * 값은 tokens.css 의 변수만 쓴다. 원칙: 숫자가 믿음 · 색은 사진이 낸다(잎색은 글자와 ≤2px 고리, 카드 한 장에 한 곳) · 멈춘 진열대.
 * 격자는 고정 열 수(4/3/2) — 12열 0. 알약은 필터 칩 하나. 헤어라인은 표와 목록 구분에만. 등장 연출 0. */

/* ── 리셋 (특이성 0, lessons #49) ─────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
:where(img, svg) { display: block; max-width: 100%; }
:where(table) { border-collapse: collapse; }
:where(del) { text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

/* ── 바탕 ─────────────────────────────────────────────────────── */
html { color-scheme: light; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none;
  word-break: keep-all; /* 한글은 어절 단위로 줄을 바꾼다 */
  overflow-wrap: break-word;
}
html.is-locked { overflow: hidden; }
main:focus { outline: none; }
::selection { background: var(--color-band); color: var(--color-on-band); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--spacing-4); top: var(--spacing-2); z-index: 90; display: inline-flex; align-items: center; min-height: var(--spacing-tap); padding: 0 var(--spacing-4); background: var(--color-band); color: var(--color-on-band); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip:focus { transform: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: var(--font-display); font-weight: 700; }

/* 가운데 고정 폭 — 여백은 브레이크포인트 값(20 · 24 · 32 · 40) */
.wrap { --px: var(--spacing-5); width: 100%; max-width: calc(var(--spacing-container) + 2 * var(--px)); margin-inline: auto; padding-inline: var(--px); }
@media (min-width: 720px) { .wrap { --px: var(--spacing-6); } }
@media (min-width: 1024px) { .wrap { --px: var(--spacing-8); } }
@media (min-width: 1200px) { .wrap { --px: var(--spacing-10); } }

/* ── 글자 ─────────────────────────────────────────────────────── */
.display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
.display { font-size: var(--text-display); line-height: var(--text-display--line-height); letter-spacing: var(--text-display--letter-spacing); }
.h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); }
.h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); }
.h3 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); }
.lead { font-size: var(--text-body); line-height: var(--text-body--line-height); color: var(--color-ink-muted); max-width: 36em; text-wrap: pretty; }

/* ── 버튼 (반경 ≤ 8) ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-height: 3rem; padding: 0 var(--spacing-6); border-radius: var(--radius-sm);
  font-size: var(--text-ui); line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 100ms var(--ease-out), background-color 160ms var(--ease-out);
}
@media (min-width: 720px) { .btn { min-height: 3.25rem; } }
.btn:active { transform: scale(0.98); }
.btn--fill { background: var(--color-band); color: var(--color-on-band); }
.btn--line { background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.btn--block { width: 100%; }
.btn.btn--sm { min-height: var(--spacing-tap); padding-inline: var(--spacing-4); } /* 44 — 쿠폰 [받기] · 회원 띠 [로그인] · 이벤트 행동 (v2 #47) */
@media (hover: hover) {
  .btn--fill:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  .btn--line:hover { background: var(--color-surface); }
}
.btn:focus-visible { outline-offset: 2px; }
.btn-text {
  display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-tap);
  font-size: var(--text-ui); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.btn-text .ico { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) { .btn-text:hover { text-decoration-thickness: 2px; } }
.btn-text--sm { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-muted); }
.say { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.say:empty { display: none; }
.ibtn { display: inline-grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-sm); position: relative; text-decoration: none; transition: transform 100ms var(--ease-out); }
.ibtn:active { transform: scale(0.96); }

/* ── 딱지 ─────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: var(--spacing-1); height: 1.5rem; padding: 0 var(--spacing-2); border-radius: var(--radius-xs); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-2xs); line-height: 1; font-weight: 600; white-space: nowrap; }
.badge--soft { background: var(--color-surface); }

/* ── 사진 무대 · 자리표시자 ───────────────────────────────────── */
.stage { position: relative; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-md); isolation: isolate; }
.render { width: 100%; height: 100%; object-fit: cover; }
.stage > .render, .stage > .ph { position: absolute; inset: 0; }
/* 제품 렌더의 오프화이트 바탕을 무대색에 맞춘다 — 무대가 더 어두우면(hover · sunk) 무대색이 보인다 */
.render[data-asset^="P"] { mix-blend-mode: darken; }
.render[data-asset="S01"] { object-position: 60% 50%; }
.ph {
  container-type: inline-size; display: grid; place-items: center; width: 100%; height: 100%;
  background:
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) left 0.75rem top 0.75rem / 0.875rem 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) left 0.75rem top 0.75rem / 1px 0.875rem no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) right 0.75rem top 0.75rem / 0.875rem 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) right 0.75rem top 0.75rem / 1px 0.875rem no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) left 0.75rem bottom 0.75rem / 0.875rem 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) left 0.75rem bottom 0.75rem / 1px 0.875rem no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) right 0.75rem bottom 0.75rem / 0.875rem 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) right 0.75rem bottom 0.75rem / 1px 0.875rem no-repeat;
}
.ph__pd { width: 62%; height: 62%; fill: var(--pd-fill, none); stroke: var(--color-ink-faint); stroke-width: 1; }
.ph__tag { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 1.5rem; text-align: center; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
@container (max-width: 140px) { .ph__tag { display: none; } }
.lineart { width: 62%; height: 62%; fill: none; stroke: var(--color-ink); stroke-width: 1; }

/* ── 프로모션 띠 (먹 면 · 움직이지 않는다) ────────────────────── */
.promo { background: var(--color-band); color: var(--color-on-band); font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
.promo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); min-height: 2rem; }
.promo b { font-family: var(--font-display); font-weight: 700; color: var(--color-accent-soft); }
.promo__name { font-weight: 600; }
.promo__msg { display: none; }
.promo__msg a { display: inline-block; line-height: var(--spacing-promo); text-decoration: none; } /* 띠 높이 그대로 — 약속이 풀리는 곳(혜택)으로 */
@media (hover: hover) { .promo__msg a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
@media (min-width: 720px) {
  .promo__in { min-height: var(--spacing-promo); }
  .promo__short { display: none; }
  .promo__msg { display: block; }
}

/* ── 머리 (붙지 않는다 · 선 없음) ─────────────────────────────── */
.hd__in { display: flex; align-items: center; gap: var(--spacing-2); height: 3.5rem; } /* <1024 은 아이콘 4개(검색 · 로그인 · 장바구니 · 메뉴) — 360 에서 로고와 틈 8 (v2 §4 #31) */
@media (min-width: 1024px) { .hd__in { gap: var(--spacing-8); height: var(--spacing-header); } }
.logo { display: inline-flex; align-items: baseline; gap: var(--spacing-2); padding-block: 0.75rem; text-decoration: none; white-space: nowrap; } /* 글자 20px + 위아래 12 = 44 터치 */
.logo__ko { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: -0.02em; }
.logo__en { font-size: var(--text-2xs); line-height: 1; font-weight: 500; color: var(--color-ink-muted); }
.nav { display: none; }
.nav ul { display: flex; gap: var(--spacing-6); }
.nav a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-size: var(--text-ui); font-weight: 600; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-ink); }
@media (hover: hover) { .nav a:hover, .hd__login:hover { box-shadow: inset 0 -2px 0 var(--color-line-strong); } .nav a[aria-current="page"]:hover, .hd__login[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--color-ink); } }
.hd__tools { display: flex; align-items: center; gap: var(--spacing-1); margin-left: auto; margin-right: calc(-1 * var(--spacing-3)); }
.searchbox { display: none; align-items: center; gap: var(--spacing-2); width: 15rem; height: 2.5rem; padding: 0 var(--spacing-3); margin-right: var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink-muted); font-size: var(--text-sm); text-decoration: none; }
.searchbox .ico { width: 1.25rem; height: 1.25rem; color: var(--color-ink); }
@media (hover: hover) { .searchbox:hover { background: var(--color-surface-sunk); } }
.hd__login { display: inline-grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-sm); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: transform 100ms var(--ease-out); }
.hd__login:active { transform: scale(0.96); }
.hd__login-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* <1024 은 사람 아이콘 — 이름은 글자로 남긴다 */
.hd__login[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-ink); border-radius: 0; }
.count { position: absolute; top: 0.25rem; right: 0.125rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--spacing-1); border-radius: var(--radius-round); background: var(--color-band); color: var(--color-on-band); font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xs); line-height: 1; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .hd__login { display: inline-flex; align-items: center; width: auto; height: auto; min-height: var(--spacing-tap); padding: 0 var(--spacing-2); border-radius: 0; font-size: var(--text-sm); font-weight: 500; }
  .hd__login .ico { display: none; }
  .hd__login-t { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .hd__menu { display: none; }
}
@media (min-width: 1200px) {
  .searchbox { display: inline-flex; }
  .hd__search { display: none; }
}

/* ── 사양 줄 (이 장의 한 가지) ────────────────────────────────── */
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-1); }
.spec dt { font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); color: var(--color-ink-muted); }
.spec dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); line-height: 1.35; white-space: nowrap; }
@media (min-width: 720px) { .spec { gap: var(--spacing-2); } .spec dd { font-size: var(--text-sm); } }
/* 720–1023 의 4열 카드는 156px — "1,500W" 14px(50.7) 가 칸(46.7)을 넘는다 → 모바일 단계(13px · 틈 4) */
@media (min-width: 720px) and (max-width: 1023.98px) { .grid--4 .spec { gap: var(--spacing-1); } .grid--4 .spec dd { font-size: var(--text-xs); } }
.spec--lg { max-width: 22rem; gap: var(--spacing-4); }
.spec--lg dt { font-size: var(--text-xs); }
.spec--lg dd { font-size: var(--text-h3); line-height: 1.3; }

/* ── 가격 3단 ─────────────────────────────────────────────────── */
.price { display: grid; align-content: end; gap: 0.125rem; }
.price__was { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.price__now { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--spacing-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-price); line-height: var(--text-price--line-height); }
.pct { color: var(--color-accent); font-family: var(--font-display); font-weight: 700; }
.price__soon { font-size: var(--text-sm); font-weight: 600; }
.price--lg .price__was { font-size: var(--text-sm); }
.price--lg .price__now { font-size: var(--text-price-lg); line-height: var(--text-price-lg--line-height); column-gap: var(--spacing-3); }
.price--hero .price__was { font-size: var(--text-sm); }
.price--hero .price__now { font-size: 1.75rem; line-height: 1.15; column-gap: var(--spacing-3); }

/* ── 스와치 ───────────────────────────────────────────────────── */
.swatches { display: flex; gap: var(--spacing-1); margin-left: calc(-1 * var(--spacing-2)); }
.swatch { display: inline-grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); border-radius: var(--radius-round); transition: transform 100ms var(--ease-out); }
.swatch:active { transform: scale(0.94); }
.swatch__o { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-round); background: var(--sw); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.swatch[aria-pressed="true"] .swatch__o, .swatch[aria-current="true"] .swatch__o { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.swatch:focus-visible { outline: none; }
.swatch:focus-visible .swatch__o { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (hover: hover) { .swatch:hover .swatch__o { outline: 1px solid var(--color-ink-faint); outline-offset: 3px; } .swatch[aria-pressed="true"]:hover .swatch__o, .swatch[aria-current="true"]:hover .swatch__o { outline: 2px solid var(--color-accent); } }

/* ── 상품 격자 (고정 열 4/3/2) · 사양 줄 카드 (subgrid 6행) ─────── */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-3); row-gap: 0; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-4); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { column-gap: var(--spacing-6); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; margin-block-end: var(--spacing-10); text-decoration: none; color: inherit; border-radius: var(--radius-md); }
.card:focus-visible { outline-offset: 6px; }
.card__stage { position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: var(--color-surface); border-radius: var(--radius-md); margin-block-end: var(--spacing-3); transition: background-color 240ms var(--ease-out); }
.card__stage > .render, .card__stage > .ph { position: absolute; inset: 0; transition: transform 240ms var(--ease-out); }
.card__stage > .lineart { position: absolute; inset: 19%; width: 62%; height: 62%; }
.card__stage > .badge { position: absolute; left: var(--spacing-2); top: var(--spacing-2); z-index: 1; }
.card__sw { display: flex; align-items: center; gap: var(--spacing-2); min-height: 1.25rem; margin-block-end: var(--spacing-1); }
.card__dots { display: flex; gap: var(--spacing-2); padding-inline-start: 0.1875rem; }
.dot { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-round); background: var(--sw); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.dot.is-cur { outline: 1.5px solid var(--color-ink); outline-offset: 2px; }
.card__swn { font-size: var(--text-2xs); line-height: 1; color: var(--color-ink-muted); }
.card__name { font-size: var(--text-ui); line-height: var(--text-ui--line-height); font-weight: 500; font-family: var(--font-sans); margin-block-end: var(--spacing-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .spec { margin-block-end: var(--spacing-3); }
.card__price { margin-block-end: var(--spacing-2); }
.card__rate { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.rate__star { color: var(--color-ink); margin-inline-end: 0.125rem; }
.card--soon .card__price { justify-items: start; row-gap: 0; }
.card--soon .btn-text { min-height: var(--spacing-tap); font-size: var(--text-sm); }
@media (hover: hover) {
  a.card:hover .card__stage { background: var(--color-surface-sunk); }
  a.card:hover .card__stage > .render, a.card:hover .card__stage > .ph { transform: scale(1.03); }
  a.card:hover .card__name { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* ── 구간 ─────────────────────────────────────────────────────── */
.sec { margin-block-start: var(--spacing-section); }
.sec__hd { display: flex; align-items: end; justify-content: space-between; gap: var(--spacing-4); margin-block-end: var(--spacing-6); }
.sec__hd--col { flex-direction: column; align-items: start; gap: var(--spacing-2); }
.sec__hd--wrap { flex-wrap: wrap; row-gap: 0; }
.sec__sub { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); margin-block-start: var(--spacing-3); }
.sec__hd .sec__sub { margin: 0; }

/* ════════ (1) 홈 ════════ */
.home-top { display: flex; flex-direction: column; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); margin-block-start: var(--spacing-3); }
.hero__media { aspect-ratio: 4 / 3; order: -1; }
.hero__txt { display: flex; flex-direction: column; align-items: flex-start; }
.hero__txt .badge { margin-block-end: var(--spacing-2); }
.hero__lead { display: none; font-size: var(--text-body); color: var(--color-ink-muted); margin-block-start: var(--spacing-3); }
.hero .spec--lg { margin-block-start: var(--spacing-3); width: 100%; }
.price--hero { margin-block-start: var(--spacing-3); }
.hero__sw { display: flex; align-items: center; gap: var(--spacing-3); margin-block-start: var(--spacing-3); }
.hero__swl { font-size: var(--text-sm); color: var(--color-ink-muted); order: 1; }
.hero__swl b { color: var(--color-ink); font-weight: 600; }
.hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); width: 100%; margin-block-start: var(--spacing-3); }
.cats { order: -1; margin-block-start: var(--spacing-1); }
/* 393×660 첫 화면에 판매가까지 — 딱지는 사진 위로, 가격은 한 줄 (wireframe 2 모바일) */
@media (max-width: 719.98px) {
  .hero__txt .badge { position: absolute; top: var(--spacing-3); left: var(--spacing-3); z-index: 1; background: var(--color-bg); }
  .hero .spec--lg { margin-block-start: var(--spacing-2); }
  .price--hero { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-3); }
}
.cats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-2); }
.cat { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); padding-block: var(--spacing-1) 0; text-decoration: none; border-radius: var(--radius-md); }
.cat__img { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden; isolation: isolate; border-radius: var(--radius-md); background: var(--color-surface); transition: background-color 240ms var(--ease-out); }
.cat__img > .render, .cat__img > .ph { position: absolute; inset: 0; }
.cat__img > .lineart { width: 70%; height: 70%; }
.cat__txt { display: flex; flex-direction: column; align-items: center; }
.cat__name { font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; white-space: nowrap; }
.cat__cnt, .cat__arr, .cats__all { display: none; }
@media (hover: hover) { .cat:hover .cat__img { background: var(--color-surface-sunk); } .cat:hover .cat__name { text-decoration: underline; text-underline-offset: 0.2em; } }
@media (min-width: 720px) {
  .hero { gap: var(--spacing-6); margin-block-start: var(--spacing-6); }
  .hero__lead { display: block; }
  .hero__cta { display: flex; width: auto; }
  .hero__cta .btn { min-width: 10rem; }
  .cats { order: 0; margin-block-start: var(--spacing-8); display: flex; align-items: center; gap: var(--spacing-4); }
  .cats ul { flex: 1; gap: var(--spacing-3); }
  .cat { flex-direction: row; gap: var(--spacing-3); padding: var(--spacing-2); }
  .cat__img { width: 4rem; height: 4rem; }
  .cat__txt { align-items: flex-start; }
  .cat__name { font-size: var(--text-ui); }
  .cat__cnt { display: block; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-split); align-items: center; margin-block-start: var(--spacing-8); }
  .hero__media { order: 0; }
  .hero__txt .badge { margin-block-end: var(--spacing-4); }
  .hero .spec--lg { margin-block-start: var(--spacing-6); }
  .price--hero { margin-block-start: var(--spacing-5); }
  .price--hero .price__now { font-size: var(--text-price-lg); }
  .hero__sw { margin-block-start: var(--spacing-4); }
  .hero__cta { margin-block-start: var(--spacing-5); }
  .cats { margin-block-start: var(--spacing-10); }
  .cat { padding: var(--spacing-4) var(--spacing-2); }
  .cat__img { width: 5rem; height: 5rem; }
  .cat__arr { display: block; width: 1.125rem; height: 1.125rem; margin-left: auto; color: var(--color-ink-muted); }
  .cats__all { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-tap); font-size: var(--text-ui); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
  .cats__all b { font-family: var(--font-display); }
  .cats__all .ico { width: 1.125rem; height: 1.125rem; }
}
.sec--best { margin-block-start: var(--spacing-12); }
@media (min-width: 1024px) { .sec--best { margin-block-start: var(--spacing-14); } }

/* 브랜드 한 줄 · 이야기 (2단 반반) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); align-items: center; }
.split__media { aspect-ratio: 3 / 2; }
.split--story .split__media { aspect-ratio: 4 / 5; }
.split__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.split__txt > p:not(.lead):not(.sign) { color: var(--color-ink-muted); max-width: 36em; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-split); }
  .split--story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.promise { display: grid; grid-template-columns: max-content minmax(0, 1fr); width: 100%; margin-block: var(--spacing-2); }
.promise li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; column-gap: var(--spacing-6); padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
.promise li:first-child { border-top: 1px solid var(--color-line); }
.promise__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.1; white-space: nowrap; }
.promise span { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
@media (min-width: 720px) { .promise__n { font-size: 2rem; } .promise li { column-gap: var(--spacing-10); } }

/* ════════ (2) 목록 ════════ */
.crumb { margin-block-start: var(--spacing-2); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.crumb ol { display: flex; flex-wrap: wrap; }
.crumb li { display: inline-flex; align-items: center; }
.crumb a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); text-decoration: none; }
@media (hover: hover) { .crumb a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.crumb__sep { padding-inline: var(--spacing-2); }
.pagehd { display: flex; align-items: baseline; gap: var(--spacing-3); margin-block: var(--spacing-3) var(--spacing-6); }
.pagehd__n { font-size: var(--text-sm); color: var(--color-ink-muted); }
.pagehd__n b { font-family: var(--font-display); color: var(--color-ink); }

.filters { display: grid; gap: var(--spacing-2); }
.filters__row { display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }
.filters__lbl { flex: none; width: 2rem; font-size: var(--text-2xs); line-height: 1; color: var(--color-ink-muted); }
.filters__pair { display: grid; gap: var(--spacing-2); }
@media (min-width: 1024px) {
  .filters__pair { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--spacing-10); }
}
.chips { display: flex; gap: var(--spacing-2); min-width: 0; }
.filters .chips { position: relative; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--spacing-5); margin-inline-end: calc(-1 * var(--px, 0px)); padding-inline-end: var(--px, 0px); }
.filters .chips::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .filters .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.chip { flex: none; display: inline-flex; align-items: center; min-height: var(--spacing-tap); transition: transform 100ms var(--ease-out); }
.chip:active { transform: scale(0.98); }
.chip > span { display: inline-flex; align-items: center; gap: var(--spacing-2); height: 2.25rem; padding: 0 var(--spacing-4); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-sm); line-height: 1; font-weight: 500; white-space: nowrap; transition: background-color 160ms var(--ease-out); }
.chip[aria-pressed="true"] > span { background: var(--color-band); color: var(--color-on-band); }
.chip:focus-visible { outline: none; }
.chip:focus-visible > span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (hover: hover) { .chip:hover > span { background: var(--color-surface-sunk); } .chip[aria-pressed="true"]:hover > span { background: var(--color-band); } }
.chip__sw { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-round); background: var(--sw); box-shadow: 0 0 0 1px var(--color-line-strong); }

.rhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--spacing-4); margin-block: var(--spacing-6) var(--spacing-4); }
.rhead__n { font-size: var(--text-sm); color: var(--color-ink-muted); }
.rhead__n b { font-family: var(--font-display); font-size: var(--text-h3); color: var(--color-ink); margin-inline-end: 0.125rem; }
.rhead__sort { position: relative; grid-column: 1 / -1; grid-row: 2; display: flex; gap: var(--spacing-4); overflow-x: auto; scrollbar-width: none; margin-inline-end: calc(-1 * var(--px, 0px)); }
.rhead__sort::-webkit-scrollbar { display: none; }
.rhead__view { display: flex; }
.sortb { flex: none; min-height: var(--spacing-tap); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.sortb[aria-pressed="true"] { color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-ink); }
.viewb { color: var(--color-ink-faint); }
.viewb[aria-pressed="true"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); border-radius: 0; }
@media (hover: hover) { .sortb:hover, .viewb:hover { color: var(--color-ink); } }
@media (min-width: 1024px) {
  .rhead { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--spacing-6); }
  .rhead__sort { grid-column: 2; grid-row: 1; margin: 0; overflow: visible; }
}
.endline, .empty { text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); margin-block: var(--spacing-4) 0; }
.empty { display: grid; justify-items: center; gap: var(--spacing-4); padding-block: var(--spacing-12); }

/* 비교표 (#view=compare) — 표 안에만 헤어라인 */
.cmp-wrap { position: relative; }
.cmp-hint { display: none; }
.cmp-scroll { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--px)); padding-inline: var(--px); }
.cmp-scroll:focus-visible { outline-offset: -2px; }
.cmp { width: 100%; min-width: 44rem; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.cmp th, .cmp td { padding: var(--spacing-3) var(--spacing-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-line); }
.cmp thead th { padding-block: var(--spacing-2); font-size: var(--text-2xs); font-weight: 500; color: var(--color-ink-muted); white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { padding-inline-start: 0; }
.cmp tbody th { width: 9.375rem; font-weight: 500; }
@media (min-width: 720px) { .cmp tbody th { width: 18rem; } }
.cmp__p { display: flex; align-items: center; gap: var(--spacing-3); text-decoration: none; }
.cmp__img { position: relative; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; isolation: isolate; border-radius: var(--radius-sm); background: var(--color-surface); }
.cmp__img > .render, .cmp__img > .ph { position: absolute; inset: 0; }
.cmp__img > .lineart { width: 70%; height: 70%; }
.cmp__name { display: grid; }
.cmp__name small { font-family: var(--font-display); font-size: var(--text-2xs); color: var(--color-ink-muted); }
@media (hover: hover) { a.cmp__p:hover .cmp__name { text-decoration: underline; text-underline-offset: 0.2em; } }
.cmp__lbl, .cmp td small { font-size: var(--text-2xs); color: var(--color-ink-muted); }
.cmp td { white-space: nowrap; }
.cmp__soon { color: var(--color-ink-muted); }
/* <720 — 표가 화면보다 넓다(qa-2 P2-1). 상품 열은 붙어 있고, 한 줄 안내가 밀 수 있다고 말하고,
   크기 · 전력 열의 끝이 화면 끝에 온다(소음 막대가 반만 걸려 "잘린 값" 으로 읽히지 않게). 오른쪽 흐림은 밀던 도중에만 */
@media (max-width: 719.98px) {
  .cmp-hint { display: block; margin-block-end: var(--spacing-2); font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); color: var(--color-ink-muted); }
  .cmp-scroll { padding-inline-start: 0; scrollbar-width: none; }
  .cmp {
    --c2: 6rem; --c3: 5.25rem; --c4: 8.5rem; --c5: 8.25rem; --c6: 7.25rem;
    --c1: max(calc(var(--px) + 9.5rem), calc(100vw - var(--c2) - var(--c3))); /* 상품 + 크기 + 전력 = 화면 폭 */
    width: calc(var(--c1) + var(--c2) + var(--c3) + var(--c4) + var(--c5) + var(--c6)); min-width: 0;
  }
  .cmp thead th:nth-child(1) { width: var(--c1); }
  .cmp thead th:nth-child(2) { width: var(--c2); }
  .cmp thead th:nth-child(3) { width: var(--c3); }
  .cmp thead th:nth-child(4) { width: var(--c4); }
  .cmp thead th:nth-child(5) { width: var(--c5); }
  .cmp thead th:nth-child(6) { width: var(--c6); }
  .cmp tbody th { width: auto; }
  .cmp thead th:first-child, .cmp tbody th { position: sticky; inset-inline-start: 0; z-index: 1; padding-inline-start: var(--px); background: var(--color-bg); }
  .cmp-wrap.is-moved .cmp thead th:first-child, .cmp-wrap.is-moved .cmp tbody th { background: linear-gradient(var(--color-line), var(--color-line)) right / 1px 100% no-repeat, var(--color-bg); } /* 붙은 열의 끝 — 접힌 테두리 표에서 box-shadow 는 칠해지지 않는다 */
  .cmp-wrap::after { content: ""; position: absolute; inset-block: 1.5rem 0; inset-inline-end: calc(-1 * var(--px)); width: var(--spacing-8); background: linear-gradient(to left, var(--color-bg), transparent); pointer-events: none; opacity: 0; }
  .cmp-wrap.is-moved:not(.is-end)::after { opacity: 1; }
}
.nb { display: inline-flex; align-items: center; gap: 0.125rem; }
.nb small { font-size: var(--text-2xs); color: var(--color-ink-muted); margin-inline-end: var(--spacing-2); }
.nb__bar { position: relative; width: 4rem; height: 0.375rem; border-radius: var(--radius-xs); background: var(--color-surface-sunk); overflow: hidden; }
.nb__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--color-ink); border-radius: var(--radius-xs); }

/* ════════ (3) 상세 ════════ */
.pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-6); margin-block-start: var(--spacing-2); }
@media (min-width: 1024px) { .pd { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24rem, 2rem + 32vw, 30rem)); gap: var(--spacing-split); align-items: start; } } /* 정보 칸 384(1024) → 480(1440) — 1024 에서 갤러리가 336 으로 줄지 않게 */
.gal { display: grid; gap: var(--spacing-3); }
.gal__main { aspect-ratio: 1; }
.gal__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 160ms var(--ease-out); }
.gal__layer.is-on { opacity: 1; }
.gal__layer[data-layer^="1:"] { transition-duration: 200ms; }
.gal__layer > .render, .gal__layer > .ph { position: absolute; inset: 0; }
.gal__layer--dim { display: grid; place-items: center; }
.gal__layer--dim .dim { width: 84%; }
.gal__thumbs { display: grid; grid-template-columns: repeat(4, 4.5rem); gap: var(--spacing-2); }
@media (min-width: 1024px) { .gal { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--spacing-4); } .gal__thumbs { order: -1; grid-template-columns: 4.5rem; align-content: start; } }
.thumb { position: relative; width: 4.5rem; height: 4.5rem; overflow: hidden; isolation: isolate; border-radius: var(--radius-sm); background: var(--color-surface); transition: transform 100ms var(--ease-out); }
.thumb:active { transform: scale(0.97); }
.thumb > .render, .thumb > .ph, .thumb__c, .thumb__c > .render, .thumb__c > .ph { position: absolute; inset: 0; }
.thumb__c { opacity: 0; }
.thumb__c.is-on { opacity: 1; }
.thumb[aria-current="true"] { outline: 1.5px solid var(--color-ink); outline-offset: 2px; }
.thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.thumb--dim { display: grid; place-items: center; }
.dim { width: 100%; height: auto; overflow: visible; }
.dim--mini { width: 86%; }
.dim__body, .dim__line { fill: none; stroke: var(--color-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dim__body * , .dim__line * { vector-effect: non-scaling-stroke; }
.dim__t text { fill: var(--color-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 400; }
.dim__t .dim__cap { fill: var(--color-ink-muted); font-family: var(--font-sans); font-size: 0.8125rem; }
.dim--mini .dim__t { display: none; }

.info { display: flex; flex-direction: column; align-items: stretch; }
.info__meta { display: flex; align-items: center; gap: var(--spacing-2); }
.info__code { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-ink-muted); }
.info__t { margin-block-start: var(--spacing-2); }
.info__rate { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: none; }
.info__rate .num { color: var(--color-ink); font-weight: 700; }
.info__rate .ico { width: 1rem; height: 1rem; }
@media (hover: hover) { .info__rate:hover span:not(.num) { text-decoration: underline; text-underline-offset: 0.2em; } }
.price--lg { margin-block-start: var(--spacing-1); }
.benefit { display: grid; margin-block-start: var(--spacing-4); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.benefit > div { display: flex; justify-content: space-between; gap: var(--spacing-4); padding-block: var(--spacing-2); border-bottom: 1px solid var(--color-line); }
.benefit > div:first-child { border-top: 1px solid var(--color-line); }
.benefit dt { color: var(--color-ink-muted); }
.benefit dd { font-family: var(--font-display); font-weight: 700; }
.benefit dd small { font-weight: 400; color: var(--color-ink-muted); margin-inline-start: var(--spacing-1); }
.benefit__more { display: inline-flex; align-items: center; gap: 0.125rem; margin-inline-start: var(--spacing-2); padding-block: 0.75rem; margin-block: -0.75rem; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } /* 등급별 혜택(benefit/#tiers) — 44 터치, 행 높이는 그대로 */
.benefit__more .ico { width: 0.875rem; height: 0.875rem; }
@media (hover: hover) { .benefit__more:hover { text-decoration-thickness: 2px; } }
.benefit__max { align-items: baseline; }
.benefit__max dt { color: var(--color-ink); font-weight: 600; }
.benefit__max dd { color: var(--color-accent); font-size: var(--text-h3); }
.ship { display: flex; align-items: center; gap: var(--spacing-2); margin-block-start: var(--spacing-3); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.ship b { color: var(--color-ink); font-weight: 600; }
.ship .ico { width: 1.25rem; height: 1.25rem; color: var(--color-ink); }
.info__opt { margin-block-start: var(--spacing-4); }
.opt__lbl { font-size: var(--text-sm); color: var(--color-ink-muted); }
.opt__lbl b { color: var(--color-ink); font-weight: 600; margin-inline-start: var(--spacing-1); }
.info__qty { display: flex; align-items: center; gap: var(--spacing-4); margin-block-start: var(--spacing-3); }
.info__sum { margin-left: auto; font-size: var(--text-sm); color: var(--color-ink-muted); }
.info__sum b { font-family: var(--font-display); font-size: var(--text-h3); color: var(--color-ink); margin-inline-start: var(--spacing-1); }
.info__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); margin-block-start: var(--spacing-5); }
.note { display: flex; align-items: flex-start; gap: var(--spacing-2); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.note .ico { width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; color: var(--color-ink); }
.note--buy { margin-block-start: var(--spacing-3); }

.stepper { display: inline-flex; align-items: center; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-ink); }
.stepper__b { display: grid; place-items: center; width: var(--spacing-tap); height: var(--spacing-tap); transition: transform 100ms var(--ease-out); }
.stepper__b:active:not(:disabled) { transform: scale(0.94); }
.stepper__b .ico { width: 1.125rem; height: 1.125rem; }
.stepper__b:disabled { color: var(--color-ink-faint); cursor: default; }
.stepper__n { min-width: 2rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-ui); }

/* 탭 — 글자 탭, 먹 밑줄 2px (바탕선 없음) */
.tabs, .ftabs { position: relative; display: flex; gap: var(--spacing-5); margin-block-start: var(--spacing-section); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .ftabs::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .tabs, .ftabs { gap: var(--spacing-8); } }
.tab { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: 3rem; font-size: var(--text-ui); font-weight: 600; color: var(--color-ink-muted); box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.tab__n { font-family: var(--font-display); font-weight: 400; }
@media (hover: hover) { .tab:hover { color: var(--color-ink); } }
.panel { margin-block-start: var(--spacing-8); }
.panel:focus-visible { outline-offset: 8px; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); align-items: center; }
.feat + .feat { margin-block-start: var(--spacing-12); }
.feat__txt { display: grid; gap: var(--spacing-3); }
.feat__txt p { color: var(--color-ink-muted); max-width: 32em; }
.stage--32 { aspect-ratio: 3 / 2; }
.stage--draw { display: grid; place-items: center; aspect-ratio: 3 / 2; }
.stage--draw .dim { width: 80%; }
@media (min-width: 1024px) { .feat { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-split); } .feat + .feat { margin-block-start: var(--spacing-16); } }

/* 소음 막대 — 우리 제품 먹 · 생활 소리 ink-faint · 값은 dB 글자 */
.nbars { display: grid; gap: var(--spacing-3); }
.nbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name v" "track track"; align-items: center; column-gap: var(--spacing-3); row-gap: var(--spacing-1); }
.nbar__name { grid-area: name; font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.nbar--ours .nbar__name { color: var(--color-ink); font-weight: 600; }
.nbar__name.is-quiet { color: var(--color-accent); }
.nbar__track { grid-area: track; position: relative; height: 0.625rem; }
.nbar__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: var(--radius-xs); background: var(--color-ink-faint); } /* 생활 소리 — 흰 바탕 비텍스트 3.11(qa-2 P3-1: sunk 는 1.2 라 비교가 옅었다) */
.nbar--ours .nbar__track i { background: var(--color-ink); }
.nbar__v { grid-area: v; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.nbar__v small { font-size: var(--text-2xs); font-weight: 400; color: var(--color-ink-muted); margin-inline-start: 0.125rem; }
@media (min-width: 720px) {
  .nbar { grid-template-columns: 12rem minmax(0, 1fr) 4.5rem; grid-template-areas: "name track v"; }
  .nbar__v { text-align: right; }
  .nbars--sm .nbar { grid-template-columns: 10rem minmax(0, 1fr) 4.5rem; }
}
.legend { display: inline-flex; align-items: center; gap: var(--spacing-1); margin-inline-start: var(--spacing-3); white-space: nowrap; }
.legend__k { width: 0.875rem; height: 0.5rem; border-radius: var(--radius-xs); background: var(--color-surface-sunk); }
.legend__k--ours { background: var(--color-ink); }

/* 사양 표 · 보증 표 — 행 헤어라인 */
.kv { width: 100%; max-width: 50rem; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.kv th, .kv td { padding: var(--spacing-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.kv tr:first-child th, .kv tr:first-child td { border-top: 1px solid var(--color-line); }
.kv th { width: 7.5rem; font-weight: 400; color: var(--color-ink-muted); padding-inline-end: var(--spacing-4); }
@media (min-width: 720px) { .kv th { width: 11rem; } }
.kv small { color: var(--color-ink-muted); }

/* 후기 */
.rv { display: grid; gap: var(--spacing-6); align-items: center; }
@media (min-width: 720px) { .rv { grid-template-columns: auto minmax(0, 24rem); gap: var(--spacing-12); } }
.rv__sum { display: grid; justify-items: start; gap: var(--spacing-1); }
.rv__avg { font-family: var(--font-display); font-weight: 700; font-size: var(--text-stat); line-height: var(--text-stat--line-height); }
.rv__cnt { font-size: var(--text-sm); color: var(--color-ink-muted); }
.stars { color: var(--color-ink); letter-spacing: 0.08em; font-family: var(--font-display); }
.stars__off { color: var(--color-ink-faint); }
.rv__stars .stars { font-size: var(--text-h3); }
.dist { display: grid; gap: var(--spacing-2); }
.dist li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; align-items: center; gap: var(--spacing-3); font-size: var(--text-xs); line-height: 1.2; }
.dist__k { font-family: var(--font-display); color: var(--color-ink-muted); }
.dist__track { position: relative; height: 0.375rem; border-radius: var(--radius-xs); background: var(--color-surface-sunk); overflow: hidden; }
.dist__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--color-ink); border-radius: var(--radius-xs); }
.dist__v { font-family: var(--font-display); text-align: right; }
.rv__chips { flex-wrap: wrap; margin-block: var(--spacing-8) var(--spacing-2); }
.rvlist { max-width: 50rem; }
.rvi { display: grid; gap: var(--spacing-2); padding-block: var(--spacing-5); border-bottom: 1px solid var(--color-line); }
.rvi:first-child { border-top: 1px solid var(--color-line); }
.rvi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); font-size: var(--text-xs); color: var(--color-ink-muted); }
.rvi__meta .stars { font-size: var(--text-sm); }
.rvi__t { max-width: 40em; }
.rvi__help { display: flex; align-items: center; gap: var(--spacing-2); }
.rv__empty { padding-block: var(--spacing-8); color: var(--color-ink-muted); }

/* 배송/AS 안내 */
.guide { display: grid; max-width: 50rem; margin-block-end: var(--spacing-6); }
.guide { gap: var(--spacing-6); } /* 헤어라인은 설계 8행(표 3 · 목록 5)에만 — 여기는 간격으로 뗀다 */
.guide > div { display: grid; gap: var(--spacing-1); }
@media (min-width: 720px) { .guide > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--spacing-4); } }
.guide dt { font-weight: 600; }
.guide dd { color: var(--color-ink-muted); }
.guide a { color: var(--color-ink); font-weight: 600; text-underline-offset: 0.2em; }

/* 하단 구매 바 (< 1024, 정보 칸 [구매하기] 가 위로 지나가면) */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--color-bg); box-shadow: var(--shadow-sheet); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); visibility: hidden; transition: transform 200ms var(--ease-in), visibility 0s linear 200ms; }
.buybar.is-on { transform: none; visibility: visible; transition: transform 200ms var(--ease-out), visibility 0s; }
.buybar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); height: 4rem; padding-inline: var(--spacing-5); }
.buybar__p { font-family: var(--font-display); font-size: var(--text-price); }
.buybar .btn { min-width: 9rem; }
@media (min-width: 1024px) { .buybar { display: none; } }
@media (max-width: 1023.98px) { body[data-page="product"] .ft { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } }

/* ════════ (4) 브랜드 ════════ */
.bhd { display: grid; gap: var(--spacing-4); margin-block: var(--spacing-8) var(--spacing-8); }
.bhd__lead { max-width: 36em; }
@media (min-width: 1024px) { .bhd { margin-block: var(--spacing-12) var(--spacing-10); } }
.bhero { aspect-ratio: 16 / 9; }
.plist { margin-block-start: var(--spacing-6); }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); padding-block: var(--spacing-6); border-bottom: 1px solid var(--color-line); }
.plist li:first-child { border-top: 1px solid var(--color-line); }
.plist__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-stat); line-height: var(--text-stat--line-height); }
.plist__body { display: grid; gap: var(--spacing-2); }
.plist__body p { color: var(--color-ink-muted); max-width: 36em; }
.plist__fact { display: grid; font-size: var(--text-sm); }
.plist__fact b { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.2; }
.plist__fact small { font-size: var(--text-xs); color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .plist li { grid-template-columns: 6rem minmax(0, 1fr) 12rem; gap: var(--spacing-8); align-items: start; padding-block: var(--spacing-8); }
  .plist__fact { text-align: right; }
}
.qlist { display: grid; gap: var(--spacing-6); margin-block-start: var(--spacing-6); }
@media (min-width: 1024px) { .qlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-10); } }
.qlist dt { font-weight: 600; margin-block-end: var(--spacing-2); }
.qlist dd { display: grid; gap: var(--spacing-2); }
.qlist dd b { font-family: var(--font-display); font-size: var(--text-stat); line-height: var(--text-stat--line-height); }
.qlist dd span { color: var(--color-ink-muted); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.certs { display: grid; gap: var(--spacing-2); margin-block-start: var(--spacing-5); }
@media (min-width: 720px) { .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-8); } }
.certs li { display: flex; align-items: center; gap: var(--spacing-2); }
.certs .ico { width: 1.25rem; height: 1.25rem; }
.certs small { color: var(--color-ink-muted); font-size: var(--text-xs); }
.sign { font-size: var(--text-sm); font-weight: 600; }

/* ════════ (5) 고객지원 ════════ */
.shd { display: grid; gap: var(--spacing-3); margin-block: var(--spacing-8) var(--spacing-6); }
@media (min-width: 1024px) { .shd { margin-block-start: var(--spacing-12); } }
.shd__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-3); row-gap: var(--spacing-1); font-size: var(--text-sm); color: var(--color-ink-muted); }
.shd__tel { font-family: var(--font-display); font-size: var(--text-h2); color: var(--color-ink); }
.noticebox { display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-5) var(--spacing-5); border-radius: var(--radius-md); background: var(--color-surface); }
.noticebox .ico { margin-top: 0.0625rem; }
.noticebox p { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.quick ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); margin-block-start: var(--spacing-6); }
@media (min-width: 720px) { .quick ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); } }
.quick a, .quick button { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; min-height: 3.5rem; padding: 0 var(--spacing-2); border-radius: var(--radius-md); text-align: left; font-size: var(--text-ui); font-weight: 600; text-decoration: none; transition: background-color 160ms var(--ease-out), transform 100ms var(--ease-out); }
.quick button:active { transform: scale(0.98); }
@media (hover: hover) { .quick a:hover, .quick button:hover { background: var(--color-surface); } }
.tbl-wrap { position: relative; overflow-x: auto; margin-block-start: var(--spacing-5); margin-inline: calc(-1 * var(--px)); padding-inline: var(--px); }
.wtable { width: 100%; min-width: 36rem; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.wtable th, .wtable td { padding: var(--spacing-4) var(--spacing-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.wtable th:first-child { padding-inline-start: 0; }
.wtable thead th { padding-block: var(--spacing-2); font-size: var(--text-2xs); font-weight: 500; color: var(--color-ink-muted); }
.wtable tbody th { font-weight: 600; }
.wtable tbody th small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-muted); }
/* 보증 표의 <720 모양 — 제품군마다 한 덩어리(qa-2 P2-2). 선은 보증 표 한 행으로 센다(헤어라인 8행 그대로) */
.wlist { display: none; }
@media (max-width: 719.98px) {
  .tbl-wrap { display: none; }
  .wlist { display: block; margin-block-start: var(--spacing-5); border-top: 1px solid var(--color-line); }
  .wlist__g { padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
  .wlist__t { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600; }
  .wlist__t small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-muted); }
  .wlist__dl { display: grid; gap: var(--spacing-1); margin-block-start: var(--spacing-3); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
  .wlist__dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--spacing-3); }
  .wlist__dl dt { color: var(--color-ink-muted); }
}
.steps { display: grid; gap: var(--spacing-6); margin-block-start: var(--spacing-6); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { display: grid; align-content: start; gap: var(--spacing-2); }
.steps__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-price-lg); line-height: 1; }
.steps p { color: var(--color-ink-muted); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.steps .steps__d { color: var(--color-ink); font-family: var(--font-display); font-weight: 700; }
.faq { max-width: 50rem; margin-inline: auto; }
.faq .ftabs { margin-block-start: var(--spacing-4); }
.faq__list { margin-block-start: var(--spacing-4); }
.faq__item { padding-block-end: var(--spacing-1); border-bottom: 1px solid var(--color-line); } /* 접힌 답(0fr)이 행 선에 붙지 않게 */
.faq__item:first-child { border-top: 1px solid var(--color-line); }
.faq__h { font-size: inherit; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); width: 100%; min-height: 3.5rem; padding-block: var(--spacing-3); text-align: left; font-size: var(--text-h3); line-height: var(--text-h3--line-height); font-weight: 600; }
.faq__ico { transition: transform 220ms var(--ease-out); color: var(--color-ink-muted); }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease-out); }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-block-end: var(--spacing-4); color: var(--color-ink-muted); max-width: 40em; }
.ask { display: grid; gap: var(--spacing-6); align-items: end; }
@media (min-width: 1024px) { .ask { grid-template-columns: minmax(0, 1fr) auto; } }
.channels { display: grid; gap: var(--spacing-3); margin-block-start: var(--spacing-5); }
.channels li { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.channels b { color: var(--color-ink); font-weight: 600; margin-inline-end: var(--spacing-2); }
.ask__cta { display: grid; gap: var(--spacing-2); justify-items: start; }
.ask__cta .btn { min-width: 12rem; }

/* ════════ (6) 혜택 — 회차 4 · wireframe-v2 §1 (부품 33~41) ════════ */
.sec[tabindex="-1"]:focus, .event:focus, .coupons:focus { outline: none; } /* 쪽 안 링크로 옮긴 포커스 — 읽는 자리만 옮긴다 */
/* 1 쪽 머리 — H1 · 회원 띠(33): 무대 면 · 반경 8 · 안 여백 12/20 · 높이 68 */
.bnhd { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-3); }
@media (min-width: 720px) { .bnhd { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-6); } }
.member { display: flex; align-items: center; min-height: 4.25rem; padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.member__in { display: flex; align-items: center; gap: var(--spacing-4); width: 100%; }
.member__msg { flex: 1 1 auto; min-width: 0; }
.member__long, .member__join { display: none; }
.member b { font-weight: 600; }
.member b.num { font-family: var(--font-display); font-weight: 700; }
.member__l1 { display: block; }
.member__sep { display: none; }
.member__go { margin-inline-start: var(--spacing-3); font-size: var(--text-sm); vertical-align: middle; }
@media (min-width: 720px) {
  .member__msg { flex: none; }
  .member__long { display: inline; }
  .member__short { display: none; }
  .member__join { display: inline-flex; font-size: var(--text-sm); }
  .member__l1, .member__sep { display: inline; }
}

/* 2 행사 머리(34) — 숫자 줄은 먹 · 칸 auto(3등분 금지, v2 §4 #2) */
.event { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); margin-block-start: var(--spacing-block); }
.event__media { aspect-ratio: 21 / 9; order: -1; }
.event__txt { display: flex; flex-direction: column; align-items: flex-start; }
.event__meta { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.event .h2 { margin-block-start: var(--spacing-2); }
.event__line { margin-block-start: var(--spacing-1); font-size: var(--text-ui); line-height: var(--text-ui--line-height); color: var(--color-ink-muted); }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: var(--spacing-6); margin-block-start: var(--spacing-4); }
.stats dt { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.stats dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-stat); line-height: var(--text-stat--line-height); white-space: nowrap; }
.event__cta { display: none; }
@media (min-width: 720px) {
  .event { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--spacing-8); align-items: center; }
  .event__media { order: 0; aspect-ratio: 16 / 9; }
  .event__cta { display: inline-flex; margin-block-start: var(--spacing-6); }
}
@media (min-width: 1024px) { .event { column-gap: var(--spacing-split); } }

/* 3 쿠폰 표(35) — 금액 1곳만 잎색 · [받기] 72 고정(1024 4열 여유 13, v2 §4 #8) */
.coupons { margin-block-start: var(--spacing-block); }
.coupons__hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t all" "n n"; align-items: center; column-gap: var(--spacing-4); margin-block-end: var(--spacing-3); }
.coupons__hd .h2 { grid-area: t; }
.coupons__n { grid-area: n; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.coupons__all { grid-area: all; }
.coupons__all[aria-disabled="true"] { text-decoration: none; color: var(--color-ink-muted); cursor: default; }
.cpns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-2); }
.cpn { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4.5rem; grid-template-areas: "amt name btn" "amt cond btn"; align-items: center; column-gap: var(--spacing-3); padding: var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface); }
.cpn__amt { grid-area: amt; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.2; color: var(--color-accent); white-space: nowrap; }
.cpn__name { grid-area: name; align-self: end; font-size: var(--text-ui); line-height: var(--text-ui--line-height); font-weight: 600; }
.cpn__cond { grid-area: cond; align-self: start; margin-block-start: 0.125rem; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.cpn__btn { grid-area: btn; width: 4.5rem; padding-inline: 0; background: var(--color-bg); }
.cpn__got { display: none; align-items: center; gap: 0.125rem; }
.cpn__got .ico { width: 1rem; height: 1rem; }
.cpn__btn[aria-disabled="true"] { color: var(--color-ink-muted); box-shadow: inset 0 0 0 1px var(--color-ink-faint); cursor: default; }
.cpn__btn[aria-disabled="true"] .cpn__get { display: none; }
.cpn__btn[aria-disabled="true"] .cpn__got { display: inline-flex; }
.cpn__btn[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) { .cpn__btn:not([aria-disabled="true"]):hover { background: var(--color-surface-sunk); } .cpn__btn[aria-disabled="true"]:hover { background: var(--color-bg); } }
.coupons__note { margin-block-start: var(--spacing-4); }
@media (min-width: 720px) {
  .coupons__hd { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t n all"; column-gap: var(--spacing-3); margin-block-end: var(--spacing-5); }
  .coupons__n { align-self: center; padding-block-start: 0.25rem; }
  .cpns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); }
  /* 3행 subgrid — 금액+[받기] / 이름 / 조건 2줄이 한 줄의 쿠폰들에서 같은 높이에 선다 */
  .cpn { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; grid-template-columns: minmax(0, 1fr) 4.5rem; grid-template-areas: "amt btn" "name name" "cond cond"; }
  .cpn__name { align-self: start; margin-block-start: var(--spacing-2); }
  .cpn__cond { margin-block-start: var(--spacing-1); }
}
@media (min-width: 1024px) { .cpns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-6); } }
@media (min-width: 1200px) { .cpn { padding: var(--spacing-5); } }

/* 5 등급 자(36) · 등급 사양 줄(37) — 도면 선(ink 1px) · 구간 비 30 : 50 : 40 (생성기 --ruler) */
.tiers { display: grid; grid-template-columns: var(--ruler, 30fr 50fr 40fr); }
.tier__tick { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); white-space: nowrap; }
.tier__axis { position: relative; height: 0.75rem; }
.tier__axis::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--color-ink); }
.tier__axis::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--color-ink); }
.tier__end { position: absolute; right: 1px; top: 50%; width: 0.5rem; height: 0.5rem; border-top: 1px solid var(--color-ink); border-right: 1px solid var(--color-ink); transform: translateY(-50%) rotate(45deg); }
.tier__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); }
.tier__head { display: flex; align-items: baseline; gap: var(--spacing-3); }
.tier__lname { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); line-height: var(--text-h3--line-height); }
.tier__cond { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.tier__spec dd small { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 500; color: var(--color-ink-muted); }
.tier__ship { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.tier__ship b { color: var(--color-ink); font-weight: 600; }
/* 핀 "나 · 614,000원" — 축에서 내려 긋는 인출선 + 삼각 (#me) */
.pin { position: absolute; left: var(--at); top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; translate: -50% 0; pointer-events: none; }
.pin__tri { width: 0.5rem; height: 0.375rem; fill: var(--color-ink); }
.pin__lead { width: 1px; height: 0.5rem; background: var(--color-ink); }
.pin__t { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink); white-space: nowrap; }
@media (min-width: 1024px) {
  .tier { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .tier__d { display: contents; }
  .tier__lname { display: none; }
  .tier__axis { margin-block: var(--spacing-1) var(--spacing-3); }
  .tier__name, .tier__head, .tier__spec, .tier__ship { margin-inline-end: var(--spacing-6); }
  .tier__head { margin-block-start: var(--spacing-1); }
  .tier__spec { margin-block-start: var(--spacing-4); }
  .tier__ship { margin-block-start: var(--spacing-3); }
}
/* <1024 — 띠(이름 · 축 · 눈금 · 핀)만 자로 두고 사양은 목록 3줄(헤어라인 = 목록 구분) */
@media (max-width: 1023.98px) {
  .tier { display: contents; }
  .tier:nth-child(1) > * { grid-column: 1; }
  .tier:nth-child(2) > * { grid-column: 2; }
  .tier:nth-child(3) > * { grid-column: 3; }
  .tier__name { grid-row: 1; margin-block-end: var(--spacing-2); }
  .tier__axis { grid-row: 2; }
  .tier__tick { grid-row: 3; margin-block-start: var(--spacing-1); }
  body.is-me .tier__tick { margin-block-end: var(--spacing-8); } /* 핀 글자 자리 */
  .pin__lead { height: 1.75rem; }
  .tiers > .tier > .tier__d { grid-column: 1 / -1; padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
  .tier:nth-child(1) > .tier__d { grid-row: 4; margin-block-start: var(--spacing-6); border-top: 1px solid var(--color-line); }
  .tier:nth-child(2) > .tier__d { grid-row: 5; }
  .tier:nth-child(3) > .tier__d { grid-row: 6; }
  .tier__spec { margin-block-start: var(--spacing-3); }
  .tier__ship { margin-block-start: var(--spacing-2); }
}

/* 혜택 계산 · 영수증(38) — 최대 혜택가 1곳만 잎색 */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-6); margin-block-start: var(--spacing-block); }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-split); align-items: start; } }
.calc__item { display: flex; align-items: center; gap: var(--spacing-4); margin-block-start: var(--spacing-4); }
.calc__img { flex: none; width: 6rem; height: 6rem; }
.calc__name { font-size: var(--text-ui); line-height: var(--text-ui--line-height); font-weight: 600; }
.calc__price { margin-block-start: var(--spacing-1); font-family: var(--font-display); font-weight: 700; font-size: var(--text-price); line-height: var(--text-price--line-height); }
.tiertabs { display: flex; gap: var(--spacing-2); margin-block-start: var(--spacing-4); }
.tiertabs .tab { padding-inline: var(--spacing-3); }
.rcpt__who { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); margin-block-end: var(--spacing-2); }
.rcpt__who b { color: var(--color-ink); font-weight: 600; }
.rcpt__dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-4); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.rcpt__dl > div:first-child { border-top: 1px solid var(--color-line); }
.rcpt__dl dt { color: var(--color-ink-muted); }
.rcpt__dl dd { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.rcpt__max dt { color: var(--color-ink); font-weight: 600; }
.rcpt__max dd { font-size: var(--text-price-lg); line-height: var(--text-price-lg--line-height); color: var(--color-accent); }

/* 6 적립금 목록(39) */
.pts { display: grid; margin-block-start: var(--spacing-6); }
.pts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--spacing-4); padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.pts > div:first-child { border-top: 1px solid var(--color-line); }
.pts dt { color: var(--color-ink-muted); }

.pts b { font-family: var(--font-display); font-weight: 700; }
.pts__go { min-height: 0; margin-inline-start: var(--spacing-2); padding-block: 0.75rem; margin-block: -0.75rem; font-size: var(--text-sm); vertical-align: baseline; } /* 44 터치, 줄 높이는 그대로 */
@media (min-width: 1024px) {
  .pts-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-split); align-items: start; }
  .pts { margin-block-start: 0; }
  .pts > div { grid-template-columns: 8rem minmax(0, 1fr); }
}

/* 7 이벤트 줄(40) */
.evs { margin-block-start: var(--spacing-6); border-top: 1px solid var(--color-line); }
.ev { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--spacing-4); padding-block: var(--spacing-5); border-bottom: 1px solid var(--color-line); align-items: start; }
.ev__img { display: grid; place-items: center; width: 5rem; aspect-ratio: 1; grid-row: span 2; }
.ev__img > .lineart { width: 62%; height: 62%; }
.ev__meta { margin-block-end: var(--spacing-2); }
.ev__line { margin-block-start: var(--spacing-1); color: var(--color-ink-muted); text-wrap: pretty; }
.ev__act { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-3); margin-block-start: var(--spacing-1); }
/* <720 은 행동을 글 아래 글자 버튼으로 */
@media (max-width: 719.98px) {
  .ev__act .btn { min-height: var(--spacing-tap); padding-inline: 0; background: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
}
@media (min-width: 720px) {
  .ev { grid-template-columns: 7.5rem minmax(0, 1fr) auto; column-gap: var(--spacing-6); align-items: center; }
  .ev__img { width: 7.5rem; grid-row: auto; }
  .ev__act { grid-column: 3; flex-direction: column; align-items: flex-end; row-gap: var(--spacing-1); margin: 0; }
  .ev__act .btn { min-width: 8.5rem; }
}

/* 8 알아 두세요 — FAQ 부품(#25) 그대로, 칸 800 가운데 */
#notes .faq__list { margin-block-start: var(--spacing-6); }

/* ════════ (7) 로그인 — 표현용 · wireframe-v2 §2 (부품 42~46) ════════ */
.auth { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-10); margin-block-start: var(--spacing-6); }
@media (min-width: 720px) { .auth { grid-template-columns: minmax(0, 26.25rem); justify-content: center; margin-block-start: var(--spacing-10); } }
@media (min-width: 1024px) { .auth { grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr); justify-content: stretch; column-gap: var(--spacing-14); } }
@media (min-width: 1200px) { .auth { column-gap: var(--spacing-24); } }
.auth__box { display: flex; flex-direction: column; min-width: 0; }
.auth__t:focus { outline: none; } /* 누른 전환이 옮기는 읽기 자리 — 조작 요소가 아니다 */
.auth__sub { margin-block-start: var(--spacing-2); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.fields { display: grid; gap: var(--spacing-5); margin-block-start: var(--spacing-8); }
/* 입력칸(42) — 1px ink-faint 윤곽 · 반경 6 · 52/48 · 글 16px(iOS 확대 방지) · 오류는 2px 먹 + ⓘ + 문장(빨강 0) */
.field__l { display: block; margin-block-end: var(--spacing-2); font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600; }
.field__box { position: relative; }
.field__in {
  width: 100%; height: 3rem; padding: 0 var(--spacing-4); border: 0; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-ink-faint); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5; -webkit-appearance: none; appearance: none;
}
@media (min-width: 720px) { .field__in { height: 3.25rem; } }
.field__in::placeholder { color: var(--color-ink-muted); opacity: 1; }
.field__in:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--color-ink); }
.field__in[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.field__in:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1px var(--color-ink-faint), inset 0 0 0 6.25rem var(--color-bg); -webkit-text-fill-color: var(--color-ink); }
.field__in:autofill { box-shadow: inset 0 0 0 1px var(--color-ink-faint), inset 0 0 0 6.25rem var(--color-bg); }
.field__in--pw { padding-inline-end: 4.25rem; }
.field__show { position: absolute; right: var(--spacing-1); top: 50%; translate: 0 -50%; min-width: var(--spacing-tap); height: var(--spacing-tap); padding: 0 var(--spacing-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; transition: transform 100ms var(--ease-out); }
.field__show:active { transform: scale(0.96); }
.field__err { display: flex; align-items: flex-start; gap: var(--spacing-2); margin-block-start: var(--spacing-2); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink); }
.field__err .ico { width: 1.125rem; height: 1.125rem; margin-block-start: 0.125rem; }
.rules { display: grid; gap: var(--spacing-1); margin-block-start: var(--spacing-2); }
.rules li { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
.rules .ico { width: 1rem; height: 1rem; }
.rules__no { color: var(--color-ink-faint); }
.rules__ok { display: none; }
.rules li.is-ok { color: var(--color-ink); }
.rules li.is-ok .rules__no { display: none; }
.rules li.is-ok .rules__ok { display: block; }
/* 체크박스(43) — 네이티브 · 20 · 1.5px 먹 · 켜짐 = 먹 면 + 흰 체크(잎색 아님) · 줄 전체 44 */
.check { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-tap); font-size: var(--text-sm); line-height: var(--text-sm--line-height); cursor: pointer; -webkit-user-select: none; user-select: none; }
.check__c { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.check__in { display: block; width: 1.25rem; height: 1.25rem; margin: 0; border-radius: var(--radius-xs); background: var(--color-bg); box-shadow: inset 0 0 0 1.5px var(--color-ink); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform 100ms var(--ease-out); }
.check__in:checked { background: var(--color-band); box-shadow: none; }
.check__in:active { transform: scale(0.92); }
.check__tick { position: absolute; inset: 0.125rem; width: 1rem; height: 1rem; color: var(--color-on-band); stroke-width: 2; opacity: 0; pointer-events: none; }
.check__in:checked + .check__tick { opacity: 1; }
.auth__opts { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin-block-start: var(--spacing-3); }
.auth__find { min-height: var(--spacing-tap); font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) { .auth__find:hover { color: var(--color-ink); } }
.agree { margin-block-start: var(--spacing-5); }
.check--all .check__l { font-size: var(--text-ui); font-weight: 600; }
.agree__list { padding-inline-start: calc(1.25rem + var(--spacing-2)); } /* 체크 칸 + 틈 만큼 들여 — 전체 동의 글자와 맞춘다 */
.agree__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.agree__see { flex: none; min-width: var(--spacing-tap); min-height: var(--spacing-tap); font-size: var(--text-xs); color: var(--color-ink-muted); text-decoration: underline; text-underline-offset: 0.3em; }
.auth__go { margin-block-start: var(--spacing-3); }
.agree + .auth__go { margin-block-start: var(--spacing-5); }
/* 결과 줄(46) — 문장 한 줄 + 다음 줄에 글자 링크 */
.result > p { display: grid; justify-items: start; margin-block-start: var(--spacing-3); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.result a, .auth__switch a { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-tap); font-size: var(--text-ui); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.result .ico, .auth__switch .ico { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) { .result a:hover, .auth__switch a:hover { text-decoration-thickness: 2px; } }
.auth__switch { margin-block-start: var(--spacing-4); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-muted); }
.auth__or { margin-block-start: var(--spacing-8); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-muted); }
/* 간편 로그인(44) — 실존 로고 · 브랜드 색 0, 머리글자 원 28 */
.sso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); margin-block-start: var(--spacing-2); }
.sso__b { padding-inline: var(--spacing-3); }
.sso__i { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-round); background: var(--color-surface); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); }
.auth__note { margin-block-start: var(--spacing-6); }
/* 회원 무대 판(45) — ≥1024 오른쪽(렌더 P01) · <1024 칸 아래 작은 판 */
.lpanel { display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-5); border-radius: var(--radius-md); background: var(--color-surface); }
.lpanel__img { display: none; }
.lpanel__spec { width: 100%; margin-block-start: var(--spacing-4); }
.lpanel .btn-text { margin-block-start: var(--spacing-2); }
@media (min-width: 1024px) {
  .lpanel { padding: var(--spacing-10); }
  .lpanel__img { display: block; width: 100%; max-width: 27.5rem; aspect-ratio: 4 / 3; margin-block-end: var(--spacing-6); }
  .auth[data-tab="signup"] .lpanel { align-self: start; } /* 가입 칸이 길어지면 판을 늘이지 않는다 — 렌더 아래가 비어 보였다(v2 §9) */
}

/* ── 꼬리 (무대 면으로 뗀다) ──────────────────────────────────── */
.ft { margin-block-start: var(--spacing-section); background: var(--color-surface); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.ft__in { display: grid; gap: var(--spacing-8); padding-block: var(--spacing-12) var(--spacing-8); }
@media (min-width: 720px) { .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ft__in { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--spacing-10); } .ft__brand { grid-column: auto; } }
.ft__brand { display: grid; align-content: start; gap: var(--spacing-4); }
.ft__notice { color: var(--color-ink-muted); max-width: 32em; }
.ft__notice strong { color: var(--color-ink); font-weight: 600; }
.ft__h { font-size: var(--text-sm); font-weight: 600; margin-block-end: var(--spacing-1); }
.ft__tel { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.2; }
.ft__sub, .ft__col li { color: var(--color-ink-muted); }
.ft__col a { display: inline-flex; align-items: center; min-width: var(--spacing-tap); min-height: var(--spacing-tap); text-decoration: none; }
@media (hover: hover) { .ft__col a:hover, .ft__base a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; } }
.ft__base p { padding-block: var(--spacing-2) var(--spacing-6); font-size: var(--text-xs); color: var(--color-ink-muted); }
.ft__base a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); text-decoration: none; }

/* ── 장바구니 서랍 (#cart) · 메뉴 시트 (#menu) ────────────────── */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--color-scrim); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-in), visibility 0s linear 200ms; }
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease-out), visibility 0s; }
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; height: 85dvh;
  background: var(--color-bg); border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-sheet);
  transform: translateY(100%); visibility: hidden; transition: transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform 280ms var(--ease-drawer), visibility 0s; }
@media (min-width: 720px) {
  .drawer { left: auto; top: 0; width: min(26.25rem, 100%); height: auto; border-radius: 0; box-shadow: var(--shadow-drawer); transform: translateX(100%); }
}
.drawer__hd { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-5); }
.drawer__t { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; }
.drawer__n { font-weight: 400; color: var(--color-ink-muted); }
.cart { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--spacing-5); }
.cart__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--spacing-4); padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
.cart__item:first-child { border-top: 1px solid var(--color-line); }
.cart__img { position: relative; width: 4.5rem; height: 4.5rem; overflow: hidden; isolation: isolate; border-radius: var(--radius-sm); background: var(--color-surface); }
.cart__img > .render, .cart__img > .ph, .cart__layer, .cart__layer > .render, .cart__layer > .ph { position: absolute; inset: 0; }
.cart__layer { opacity: 0; }
.cart__layer.is-on { opacity: 1; }
.cart__name { font-weight: 500; font-size: var(--text-ui); }
.cart__opt { font-size: var(--text-xs); color: var(--color-ink-muted); }
.cart__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-block-start: var(--spacing-2); }
.cart__price { font-family: var(--font-display); font-weight: 700; }
.drawer__ft { display: grid; gap: var(--spacing-3); padding: var(--spacing-4) var(--spacing-5) calc(var(--spacing-5) + env(safe-area-inset-bottom)); background: var(--color-bg); }
.sum { display: grid; gap: var(--spacing-1); font-size: var(--text-sm); }
.sum > div { display: flex; justify-content: space-between; }
.sum dt { color: var(--color-ink-muted); }
.sum dd { font-family: var(--font-display); font-weight: 700; }
.sum__total { margin-block-start: var(--spacing-1); align-items: baseline; }
.sum__total dt { color: var(--color-ink); font-weight: 600; }
.sum__total dd { font-size: var(--text-h2); }
.drawer__cta { display: grid; gap: var(--spacing-2); }

.sheet { position: fixed; inset: 0 0 auto; z-index: 50; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); box-shadow: var(--shadow-sheet); padding-bottom: var(--spacing-6); opacity: 0; transform: translateY(-0.5rem); visibility: hidden; transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms; }
.sheet.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.sheet__hd { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; margin-inline-end: 0; }
.sheet__hd .ibtn { margin-right: calc(-1 * var(--spacing-3)); }
.sheet__acct { display: flex; align-items: center; gap: var(--spacing-3); margin-block-end: var(--spacing-2); font-size: var(--text-ui); font-weight: 600; } /* 모바일 두 번째 진입점 — 면 없이 글자 줄 */
.sheet__acct span { color: var(--color-ink-muted); font-weight: 400; }
.sheet__acct a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.sheet__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); text-decoration: none; }
.sheet__nav .ico { width: 1.25rem; height: 1.25rem; color: var(--color-ink-muted); }
.sheet__lbl { margin-block: var(--spacing-5) var(--spacing-2); font-size: var(--text-2xs); color: var(--color-ink-muted); }
.sheet__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); }
.sheet__cats a { display: flex; align-items: center; gap: var(--spacing-3); min-height: 3.5rem; font-size: var(--text-ui); font-weight: 600; text-decoration: none; }
.sheet__thumb { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; overflow: hidden; isolation: isolate; border-radius: var(--radius-sm); background: var(--color-surface); }
.sheet__thumb > .render, .sheet__thumb > .ph { position: absolute; inset: 0; }
.sheet__thumb > .lineart { width: 70%; height: 70%; }
.sheet__cnt { font-family: var(--font-display); font-weight: 400; color: var(--color-ink-muted); }
.sheet__cs { margin-block-start: var(--spacing-5); padding: var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-ink-muted); }
.sheet__cs b { font-family: var(--font-display); color: var(--color-ink); }
@media (min-width: 1024px) { .sheet { display: none; } }

/* 알림 한 줄 (표현용 버튼의 대답) */
.toast { position: fixed; left: 50%; bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom)); z-index: 80; max-width: calc(100% - 2.5rem); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-sm); background: var(--color-band); color: var(--color-on-band); font-size: var(--text-sm); translate: -50% 0; transition: opacity 160ms var(--ease-out); }
.toast.is-out { opacity: 0; }
body[data-page="product"] .toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* ── 움직임 줄이기 — 서랍 · 시트는 뜨기만 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  a.card:hover .card__stage > .render, a.card:hover .card__stage > .ph { transform: none; }
  .btn:active, .chip:active, .swatch:active, .ibtn:active, .stepper__b:active, .thumb:active, .quick button:active, .hd__login:active, .field__show:active, .check__in:active { transform: none; }
}