/* ==========================================================================
   단무지 — Design System v1.0
   Phase 1 HTML 정적 사이트
   ========================================================================== */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Color — Brand */
  --color-navy:        #0A2540;
  --color-navy-deep:   #061A2E;
  --color-sea:         #1F8FFF;
  --color-sea-dark:    #1670CC;
  --color-sun:         #FFB800;
  --color-sun-dark:    #E0A100;

  /* Color — Neutral */
  --color-white:       #FFFFFF;
  --color-mist:        #F5F7FA;
  --color-fog:         #E5EAF0;
  --color-stone:       #C7CFD8;
  --color-slate:       #5C6F7E;
  --color-charcoal:    #2A3B4C;
  --color-ink:         #0A2540;

  /* Semantic */
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-mist);
  --bg-dark:           var(--color-navy);
  --bg-darker:         var(--color-navy-deep);
  --text-primary:      var(--color-navy);
  --text-secondary:    var(--color-slate);
  --text-on-dark:      var(--color-white);
  --text-on-dark-mute: rgba(255,255,255,0.86);
  --border:            var(--color-fog);
  --border-strong:     var(--color-stone);
  --accent:            var(--color-sun);
  --link:              var(--color-sea);

  /* Type — Family */
  --font-sans-kr: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-sans-en: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type — Scale (modular, mobile-first) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */
  --fs-6xl:  4.5rem;    /* 72 */
  --fs-7xl:  6rem;      /* 96 */

  /* Type — Weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* Spacing — 4px base, 9-step scale */
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 — Danny 2026-06-03: nav__primary gap. 이전 미정의로 gap 무효화 → 8px 잔존 버그 fix */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Layout */
  --container:    1280px;
  --container-wide: 1440px;
  --container-narrow: 960px;
  --gutter-mobile:  1.25rem;
  --gutter-desktop: 2rem;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(10,37,64,0.06);
  --shadow-md:  0 4px 12px rgba(10,37,64,0.08);
  --shadow-lg:  0 12px 32px rgba(10,37,64,0.12);
  --shadow-xl:  0 24px 64px rgba(10,37,64,0.18);

  /* Motion */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       180ms;
  --dur-base:       260ms;
  --dur-slow:       420ms;

  /* z-index */
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ── Reset / Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-feature-settings: "ss01", "tnum";
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans-kr);
  font-size: var(--fs-base);
  font-weight: var(--fw-400);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  /* Full-bleed hero를 위한 가로 overflow 방지 (Danny 2026-05-06 #15 보강) */
  overflow-x: hidden;
}

/* ── Korean Typography Policy (v1.3) ──────────────────────────────────────
   Widow 방지·word-break·hanging punctuation 통합 정책.
   적용 대상: 모든 Korean 컨텐츠 (html[lang="ko"]).
   Test 기준: 1920·1440·1024·640·375 viewport에서 widow 0 글자.
   ────────────────────────────────────────────────────────────────────── */

html[lang="ko"],
.ko-text {
  word-break: keep-all;        /* 단어 중간 줄바꿈 차단 — 한국어 어절 유지 */
  overflow-wrap: break-word;   /* 너무 긴 토큰만 break */
  hanging-punctuation: allow-end;
}

/* Headlines: balance + tight letter-spacing — widow 가장 빈번한 위치 */
h1, h2, h3,
.t-display, .t-display-xl,
.t-h1, .t-h2, .t-h3,
.hero__title,
.cons-hero__title,
.demo-hero__title,
.section-head__title,
.demo-section__title,
.quiz-step__title,
.launch__title {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;          /* Chrome 114+, Safari 17.4+, Firefox 121+ */
  hanging-punctuation: allow-end;
}

/* Body·subhead·lead: pretty 적용 — 마지막 줄 widow 자동 방지 */
.t-lead,
.hero__lead,
.cons-hero__lead,
.demo-hero__lead,
.section-head__lead,
.demo-section__lead,
.quiz-step__lead,
.launch__lead,
p.lead {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;           /* 최신 브라우저 widow 방지 */
}

/* Fallback for older browsers — max-width로 줄 길이 자연스럽게 제한 */
@supports not (text-wrap: balance) {
  .hero__title,
  .cons-hero__title,
  .demo-hero__title,
  .section-head__title,
  .demo-section__title {
    max-width: 22em;
  }
}

/* No-break helper class — 의도적 묶음 처리용 */
.nobr { white-space: nowrap; }
.nobr-pair { display: inline-block; }


img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Latin char + numerals get Inter (proportional rendering inside Korean copy) */
.en, .num, [lang="en"] { font-family: var(--font-sans-en); font-feature-settings: "tnum", "ss01"; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ── Typography Utilities ──────────────────────────────────────────────── */
.t-display {
  font-weight: var(--fw-800);
  font-size: clamp(2.25rem, 5vw + 1rem, 5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.t-display-xl {
  font-weight: var(--fw-900);
  font-size: clamp(2.75rem, 7vw + 1rem, 6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.t-h1 {
  font-weight: var(--fw-700);
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.t-h2 {
  font-weight: var(--fw-700);
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-weight: var(--fw-600);
  font-size: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.t-eyebrow {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-600);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-sea);
}
.t-eyebrow--mute { color: var(--text-secondary); }
.t-eyebrow--white { color: rgba(255,255,255,0.85); }
.t-lead {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
}
.t-mute { color: var(--text-secondary); }
.t-on-dark { color: var(--text-on-dark); }
.t-on-dark-mute { color: var(--text-on-dark-mute); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
.container--wide  { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 768px) {
  .container { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
}

.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
}
.section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.section--dark  { background: var(--bg-dark); color: var(--text-on-dark); }
.section--darker { background: var(--bg-darker); color: var(--text-on-dark); }
.section--mist  { background: var(--bg-secondary); }

/* Grid system (light) */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: var(--fw-600);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-sea); outline-offset: 2px; }

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-navy-deep); box-shadow: var(--shadow-md); }

.btn--accent {
  background: var(--color-sun);
  color: var(--color-navy);
}
.btn--accent:hover { background: var(--color-sun-dark); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--color-mist); border-color: var(--color-navy); }

.btn--ghost-light {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255,255,255,0.32);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.08); border-color: var(--text-on-dark); }

.btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.625rem 1.125rem; font-size: var(--fs-xs); }

.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── DO_NOT_REVERT §171 v3 — find-my-gear 결과 2 CTA horizontal layout + 동일 사이즈 ─── */
/* 두 버튼 (견적서 바로 요청하기 / 1:1 구매 상담하기) 가로 grid 1fr 1fr, 동일 padding/font.
   @540px 이하 1-col. 인라인 스타일 회귀 영구 X. */
.fmg-result-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.fmg-result-cta .btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 540px) {
  .fmg-result-cta { grid-template-columns: 1fr; }
}

/* ── Pill / Badge ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  background: rgba(31,143,255,0.10);
  color: var(--color-sea);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.02em;
}
.pill--accent { background: rgba(255,184,0,0.16); color: var(--color-sun-dark); }
.pill--mute { background: var(--color-mist); color: var(--text-secondary); }
.pill--dark { background: rgba(255,255,255,0.10); color: var(--text-on-dark); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* ── Header / Navigation ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-6);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
.nav__logo-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--color-navy);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: var(--fw-800);
  letter-spacing: -0.04em;
}
.nav__logo-sub {
  display: none;
  font-family: var(--font-sans-kr);
  font-weight: var(--fw-500);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .nav__logo-sub { display: inline; } }

.nav__primary {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
@media (min-width: 1024px) { .nav__primary { display: flex; } }

.nav__link {
  position: relative;
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: var(--color-navy);
  border-radius: var(--radius-md);
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.nav__link:hover { color: var(--color-sea); background: rgba(31,143,255,0.06); }
.nav__link[aria-current="page"] { color: var(--color-sea); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.25rem;
  height: 2px; background: var(--color-sea); border-radius: 2px;
}

.nav__has-sub { position: relative; }
.nav__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out);
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__has-sub.is-open > .nav__sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* §145-G v6 (Danny 2026-05-13) — 한 시점 1 dropdown only open.
   nav__has-sub 가 하나라도 .is-open 상태면, 다른 :hover 로 인한 sub-open 차단 (JS 제어 우선).
   DO_NOT_REVERT §145-G v6. */
.nav__primary:has(.nav__has-sub.is-open) .nav__has-sub:not(.is-open):hover .nav__sub {
  opacity: 0;
  pointer-events: none;
}
.nav__sub-link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-navy);
  transition: background var(--dur-fast) var(--ease);
}
.nav__sub-link:hover { background: var(--color-mist); color: var(--color-sea); }
.nav__sub-link b { display: block; font-weight: var(--fw-600); margin-bottom: 2px; }
.nav__sub-link span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); }

.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-navy);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  /* iOS touch fix — prevent 300ms tap delay, ensure click registers */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(10, 37, 64, 0.10);
  cursor: pointer;
}
.nav__icon-btn:hover { background: var(--color-mist); border-color: var(--border); }
/* iOS Safari fix — SVG inside button can capture touch and prevent click bubbling.
   pointer-events: none on inner SVG forces touch to register on button itself. */
.nav__icon-btn > svg,
.nav__icon-btn svg * { pointer-events: none; }

.nav__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  /* iOS touch fix */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(10, 37, 64, 0.10);
  cursor: pointer;
  /* Safety: keep above any decorative overlay that may end up in the header */
  position: relative;
  z-index: 1;
}
.nav__hamburger > svg,
.nav__hamburger svg * { pointer-events: none; }
@media (min-width: 1024px) { .nav__hamburger { display: none; } }

/* Mobile menu close button — same iOS touch fixes */
.mobile-menu__close {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.mobile-menu__close > svg,
.mobile-menu__close svg * { pointer-events: none; }

/* §171-C iOS hit-test fix — 링크(<a>) 안의 SVG 가 iOS Safari 에서
   hit-target 으로 잡혀 <a> href 까지 이벤트가 안 닿는 버그.
   특히 모바일 메뉴의 chevron(→ / ↗) 과 네비 카트 아이콘에서 발현.
   SVG 와 자식 element 의 pointer 이벤트를 모두 막아 부모 <a> 가
   클릭을 받게 한다. 영향 범위는 (1) 모바일 메뉴 내 모든 링크,
   (2) 사이트 헤더 안의 모든 링크 (카트·로고·서브메뉴 포함) 로
   제한한다 — 본문 콘텐츠의 SVG(차트·아이콘) 는 건드리지 않는다.
   (Danny 2026-05-26 hotfix — DO_NOT_REVERT §171-C) */
.mobile-menu a > svg,
.mobile-menu a svg *,
.mobile-menu__list a > svg,
.mobile-menu__list a svg *,
.site-header a > svg,
.site-header a svg *,
.nav__cart > svg,
.nav__cart svg * { pointer-events: none; }

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(10,37,64,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-on-dark);
  padding: var(--space-16) var(--gutter-mobile) var(--space-12);
  z-index: calc(var(--z-nav) + 5);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}
.mobile-menu__close {
  position: absolute;
  top: 18px; right: var(--gutter-mobile);
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-on-dark);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__list { list-style: none; padding: 0; margin: 0; }
.mobile-menu__list li { border-bottom: 1px solid rgba(255,255,255,0.10); }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 0;
  font-size: 1.5rem;
  font-weight: var(--fw-600);
  color: var(--text-on-dark);
  letter-spacing: -0.015em;
}
.mobile-menu__list a:hover { color: var(--color-sun); }
.mobile-menu__brands {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.mobile-menu__brands h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans-en);
}
.mobile-menu__brand-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.mobile-menu__brand-grid a {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
  display: block;
}
.mobile-menu__brand-grid a small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-400);
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

body.menu-open { overflow: hidden; }

/* ── Trust Bar ─────────────────────────────────────────────────────────── */
.trust-bar {
  background: var(--color-navy);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  letter-spacing: 0.01em;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 36px;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none; scrollbar-width: none;
}
.trust-bar__inner::-webkit-scrollbar { display: none; }
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255,255,255,0.85);
}
.trust-bar__item svg { width: 14px; height: 14px; color: var(--color-sun); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(560px, 90vh, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--text-on-dark);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(31,143,255,0.32) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(255,184,0,0.10) 0%, transparent 50%),
    linear-gradient(160deg, #061A2E 0%, #0A2540 50%, #102C4E 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px);
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.hero__inner {
  position: relative;
  width: 100%;
  padding: var(--space-24) 0 var(--space-16);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-sun);
  margin-bottom: var(--space-6);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-sun);
  box-shadow: 0 0 0 4px rgba(255,184,0,0.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,184,0,0.16); }
  50%      { box-shadow: 0 0 0 8px rgba(255,184,0,0.04); }
}
.hero__title {
  font-weight: var(--fw-800);
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-6);
  max-width: 18ch;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, #1F8FFF 0%, #FFB800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.375rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__meta {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12); /* §119: scroll 인디케이터와 충분한 간격 — Danny 2026-05-09 */
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  max-width: 820px;
  padding-top: var(--space-6);
  padding-bottom: var(--space-12); /* §119: 더 늘림 (10 → 12) — scroll 영구 분리 */
  border-top: 1px solid rgba(255,255,255,0.14);
}
@media (min-width: 640px) { .hero__meta { grid-template-columns: repeat(4, 1fr); } }
.hero__meta-item .num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-700);
  font-size: clamp(1.5rem, 1vw + 1rem, 2.25rem);
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
  display: block;
  line-height: 1.1;
}
.hero__meta-item .label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  margin-top: 0.375rem;
  display: block;
}

/* Hero scroll indicator
   §119 (Danny 2026-05-09): bottom 24px로 더 내림 + .hero__meta 가 padding-bottom var(--space-12) +
   margin-bottom var(--space-12) 로 충분한 영역 확보. 겹침 영구 차단. */
.hero__scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: none;
  z-index: 3;
  pointer-events: none;
}
@media (min-width: 1024px) { .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; } }
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Section header ────────────────────────────────────────────────────── */
/* Phase 10 정책: 기본 정렬은 center. 우측에 visual(이미지/SVG/stat panel)이 있을 때만 left
   유지 (예: section-head--split). orphan 좌측 정렬 (우측이 빈 공간) 금지. */
.section-head {
  margin-bottom: var(--space-12);
  max-width: 720px;
}
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--with-visual { text-align: left; max-width: none; } /* alias for layouts where right column has image/video */
.section-head__eyebrow {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-sea);
  display: block;
  margin-bottom: var(--space-3);
}
.section-head__title {
  font-weight: var(--fw-700);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.625rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
.section--dark .section-head__title { color: var(--text-on-dark); }
.section-head__lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.section--dark .section-head__lead { color: rgba(255,255,255,0.86); }

/* ── Brand Cards ───────────────────────────────────────────────────────── */
.brand-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .brand-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease);
  min-height: 420px;
}
.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.brand-card__visual {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.brand-card__visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,37,64,0.32) 100%); z-index: 1; }
.brand-card__visual--levitaz { background: linear-gradient(135deg, #0A2540 0%, #1F8FFF 100%); }
.brand-card__visual--ppc     { background: linear-gradient(135deg, #1F8FFF 0%, #5BB4FF 100%); }
.brand-card__visual--takoon  { background: linear-gradient(135deg, #FFB800 0%, #FFD25C 100%); }
.brand-card__visual--wip     { background: linear-gradient(135deg, #2A3B4C 0%, #5C6F7E 100%); }

.brand-card__monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: clamp(3.5rem, 6vw, 5rem);
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.92);
  z-index: 2;
}
.brand-card__visual--takoon .brand-card__monogram { color: var(--color-navy); }

.brand-card__tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--color-white);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans-en);
  font-size: 10px;
  font-weight: var(--fw-600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-card__visual--takoon .brand-card__tag { background: rgba(10,37,64,0.18); color: var(--color-navy); }

.brand-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.brand-card__name {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.brand-card__sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans-en);
}
.brand-card__copy {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  flex: 1;
}
.brand-card__cta {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.brand-card:hover .brand-card__cta { color: var(--color-sea); }
.brand-card:hover .brand-card__cta .arrow { transform: translateX(4px); }
.brand-card__cta .arrow { transition: transform var(--dur-base) var(--ease-out); }

/* ── Persona Cards ─────────────────────────────────────────────────────── */
.persona-grid {
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 768px) { .persona-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (min-width: 768px) { .persona-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .persona-grid--four { grid-template-columns: repeat(4, 1fr); } }

.persona {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.persona:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-sea);
}
.persona__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--color-sea);
  margin-bottom: var(--space-4);
}
.persona__title {
  font-weight: var(--fw-700);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.persona__sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
  line-height: 1.55;
}
.persona__list {
  list-style: none;
  padding: 0; margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.persona__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);
}
.persona__list li:last-child { border-bottom: none; }
.persona__list svg {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--color-sea);
  margin-top: 3px;
}
.persona__pack {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-sans-en);
  letter-spacing: 0.02em;
}
.persona__pack strong {
  display: block;
  color: var(--color-navy);
  font-size: var(--fs-base);
  font-weight: var(--fw-700);
  font-family: var(--font-sans-kr);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
/* DO_NOT_REVERT §140-C: persona__pack must be a clickable <a> link to #contact.
   button-only/div-only 회귀 영구 금지. */
a.persona__pack,
.persona__pack--cta {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, border-top-color 160ms ease, transform 160ms ease;
}
a.persona__pack:hover,
.persona__pack--cta:hover {
  border-top-color: var(--color-sea);
  transform: translateY(-1px);
}
a.persona__pack:hover strong,
.persona__pack--cta:hover strong {
  color: var(--color-sea-dark);
}
a.persona__pack:focus-visible,
.persona__pack--cta:focus-visible {
  outline: 2px solid var(--color-sea);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Sport Tile Grid (top of homepage) ─────────────────────────────────── */
.sport-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 1024px) { .sport-grid { grid-template-columns: repeat(5, 1fr); } }

.sport-tile {
  position: relative;
  background: var(--bg-primary);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out);
  min-height: 168px;
}
.sport-tile:hover {
  background: var(--color-navy);
  color: var(--text-on-dark);
}
.sport-tile:hover .sport-tile__icon { color: var(--color-sun); transform: scale(1.05); }
.sport-tile__icon {
  width: 36px; height: 36px;
  color: var(--color-sea);
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring);
}
.sport-tile__name {
  font-weight: var(--fw-700);
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}
.sport-tile__count {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.sport-tile:hover .sport-tile__count { color: rgba(255,255,255,0.6); }

/* ── Performance 5축 ───────────────────────────────────────────────────── */
.perf {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) { .perf { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }

.perf__chart-wrap {
  /* DO_NOT_REVERT §141 (Danny 2026-05-11): Performance 5축 chart 사이즈 키우기.
     viewBox 580×500 (aspect 1.16:1) ← STABILITY 9-char 라벨 잘림 방지 위해
     좌·우 70px asymmetric padding. aspect-ratio CSS 도 동일 비율로 lock.
     max-width 420 → 520 으로 lock. 회귀 시 차트가 다시 작아 보임. */
  aspect-ratio: 580 / 500;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perf-axes {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--space-3);
}
.perf-axes li {
  display: grid;
  /* 3-column: label (intrinsic) | bar (flex, capped) | score (intrinsic).
     이전 `1fr auto` 는 score(<span>)가 3번째 자식이라 새 row로 떨어지고
     label이 1fr 전체를 먹어 bar와 큰 gap 발생 → §132 정정. */
  grid-template-columns: minmax(96px, max-content) minmax(120px, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}
.perf-axes__label {
  display: flex;
  flex-direction: column;
}
.perf-axes__label b {
  font-weight: var(--fw-600);
  letter-spacing: -0.01em;
}
.perf-axes__label small {
  font-size: var(--fs-xs);
  color: var(--color-charcoal);
  font-family: var(--font-sans-en);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.perf-axes__bar {
  --p: 0.5;
  width: 100%;
  max-width: 240px;
  height: 8px;
  background: var(--color-fog);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}
.perf-axes__bar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-sea) 0%, var(--color-navy) 100%);
  width: calc(var(--p) * 100%);
  border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-out);
}
.perf-axes__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-700);
  font-size: var(--fs-sm);
  color: var(--color-navy);
  min-width: 32px;
  text-align: right;
}
.section--dark .perf-axes__bar { background: rgba(255,255,255,0.10); }
.section--dark .perf-axes__num { color: var(--color-white); }
.section--dark .perf-axes__label small { color: rgba(255,255,255,0.72); }

/* ── Launch Alert Form ─────────────────────────────────────────────────── */
.launch {
  position: relative;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(31,143,255,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(255,184,0,0.10) 0%, transparent 50%),
    var(--color-navy-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  overflow: hidden;
}
@media (min-width: 768px) { .launch { padding: var(--space-16) var(--space-12); } }

.launch__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) { .launch__inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

.launch__title {
  font-weight: var(--fw-700);
  font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
}
.launch__title em {
  font-style: normal;
  color: var(--color-sun);
}
.launch__lead {
  color: rgba(255,255,255,0.78);
  font-size: var(--fs-md);
  margin: 0 0 var(--space-6);
  line-height: 1.6;
}
.launch__benefits {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: var(--space-2);
}
.launch__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
}
.launch__benefits svg {
  width: 18px; height: 18px;
  color: var(--color-sun);
  flex-shrink: 0;
}

.launch-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.launch-form__label {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: var(--space-2);
}
.launch-form__input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  font-size: var(--fs-base);
  font-family: var(--font-sans-en);
  letter-spacing: -0.005em;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.launch-form__input::placeholder { color: rgba(255,255,255,0.4); }
.launch-form__input:focus {
  outline: none;
  border-color: var(--color-sea);
  background: rgba(255,255,255,0.12);
}
.launch-form__row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 480px) { .launch-form__row { flex-direction: row; } .launch-form__row .launch-form__input { flex: 1; } }
.launch-form__check {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.launch-form__check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--color-sun); }
.launch-form__check a { color: var(--color-sun); text-decoration: underline; text-underline-offset: 3px; }

.launch-form__msg {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,184,0,0.16);
  border: 1px solid rgba(255,184,0,0.32);
  border-radius: var(--radius-md);
  color: var(--color-sun);
  font-size: var(--fs-sm);
  display: none;
}
.launch-form__msg.is-visible { display: block; }
.launch-form__msg--err { background: rgba(255,80,80,0.16); border-color: rgba(255,80,80,0.32); color: #ffaaaa; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-navy-deep);
  color: rgba(255,255,255,0.72);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
}

.footer-brand .nav__logo { color: var(--color-white); margin-bottom: var(--space-4); }
.footer-brand p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0 0 var(--space-6);
  max-width: 32ch;
}
.footer-social {
  display: flex; gap: var(--space-2);
}
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.footer-social a:hover { background: var(--color-sea); border-color: var(--color-sea); }

.footer-col h4 {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 var(--space-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-col ul a { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); transition: color var(--dur-base) var(--ease); display: inline-block; padding: 6px 0; } /* §193 P1-7 — 모바일 터치 타겟 pitch ≥36px (이전 ~28px) */
.footer-col ul a:hover { color: var(--color-white); }

.footer-business {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}
.footer-business strong { color: rgba(255,255,255,0.78); font-weight: var(--fw-600); }
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
}
.footer-bottom__legal { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom__legal a:hover { color: var(--color-white); }

/* ── Brand Hub Page (levitaz/ppc/takoon/wip) ───────────────────────────── */
.brand-hero {
  position: relative;
  min-height: 540px;
  padding: var(--space-24) 0 var(--space-16);
  display: flex;
  align-items: center;
  color: var(--text-on-dark);
  overflow: hidden;
}
/* DO_NOT_REVERT §145 (Danny 2026-05-12): Levitaz hero 배경 = freeseries-lineup-hero-pdf.jpg
   (어두운 carbon-drops texture + Front Wing 4종 silhouette). Gradient-only 회귀 영구 금지.
   cover-freeseries-web.jpg (generic 물방울 추상 — 사진으로 인지 안 됨) 회귀 영구 금지.
   Overlay: 좌측 text 영역 짙게 (rgba ≥ 0.78) → 우측 image 영역 옅게 (~0.45). 텍스트 contrast 유지. */
.brand-hero--levitaz {
  background:
    linear-gradient(90deg, rgba(6,26,46,0.92) 0%, rgba(6,26,46,0.82) 30%, rgba(10,37,64,0.62) 60%, rgba(10,37,64,0.48) 100%),
    url("../images/levitaz/freeseries-lineup-hero-pdf.jpg") right center/cover no-repeat;
}
/* DO_NOT_REVERT §145 (Danny 2026-05-12): 4 brand hero 통일 = 실제 사진 배경 + 좌(짙음)→우(옅음) 비대칭 overlay.
   gradient-only 배경 회귀 영구 금지. 이미지 없는 brand 도 product/lifestyle hotlink 의무 (Takoon).
   Pattern: linear-gradient(90deg, dark 0% → dark 30% → mid 60% → light 100%) + url(...) right center/cover */
.brand-hero--ppc {
  background:
    linear-gradient(90deg, rgba(6,26,46,0.92) 0%, rgba(6,26,46,0.78) 30%, rgba(10,37,64,0.55) 60%, rgba(22,112,204,0.42) 100%),
    url("../images/products/ppc/lifestyle/sean-herbert-brazil-1.jpg") right center/cover no-repeat;
}
.brand-hero--takoon {
  background:
    linear-gradient(90deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.74) 30%, rgba(42,59,76,0.50) 60%, rgba(255,184,0,0.32) 100%),
    url("https://takoon.com/cdn/shop/files/foil-flow-carbon_carousel-5_1600x.jpg") right center/cover no-repeat,
    linear-gradient(135deg, #2A3B4C 0%, #5C6F7E 40%, #FFB800 100%);
}
.brand-hero--wip {
  /* DO_NOT_REVERT §145-W (Danny 2026-05-12): WIP hero 배경 = Mathis Ghio gear shot (X-Over helmet + Long Sleeve Rashguard + Wing Impact Vest 자갈 해변·드리프트우드).
     Portrait orientation 1707×2560 — `center 70%/cover` 의무. center center/right center 회귀 금지 (gear viewport 밖으로 crop 됨).
     sean-herbert-flat-speed.jpg (Swiss Alps lake — 비-WIP brand) 회귀 금지: Danny 명시 WIP gear 자체가 brand identity. */
  background:
    linear-gradient(90deg, rgba(6,26,46,0.88) 0%, rgba(6,26,46,0.72) 30%, rgba(10,37,64,0.48) 60%, rgba(42,59,76,0.28) 100%),
    url("../images/wip/mathis-ghio-hero.jpg") center 70%/cover no-repeat;
}

.brand-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.08) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px);
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.brand-hero__inner { position: relative; z-index: 2; max-width: 920px; }
.brand-hero__crumb {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-6);
  display: flex; align-items: center; gap: var(--space-2);
}
.brand-hero__crumb a { color: rgba(255,255,255,0.6); transition: color var(--dur-base) var(--ease); }
.brand-hero__crumb a:hover { color: var(--color-white); }
.brand-hero__crumb span { opacity: 0.5; }
.brand-hero__name {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0 var(--space-4);
  background: linear-gradient(120deg, #ffffff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-hero__tagline {
  font-weight: var(--fw-600);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 var(--space-6);
  max-width: 24ch;
}
.brand-hero__lead {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 0 var(--space-8);
}
.brand-hero__meta {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 720px;
}
@media (min-width: 640px) { .brand-hero__meta { grid-template-columns: repeat(3, 1fr); } }
.brand-hero__meta dt {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.375rem;
}
.brand-hero__meta dd {
  margin: 0;
  font-weight: var(--fw-600);
  font-size: var(--fs-base);
  color: var(--color-white);
  letter-spacing: -0.005em;
}

/* Story prose */
.story {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.story p {
  font-size: var(--fs-md);
  line-height: 1.78;
  color: var(--text-primary);
  margin: 0 0 var(--space-6);
}
.story p:first-child::first-letter {
  font-size: 4em;
  font-weight: var(--fw-700);
  font-family: var(--font-sans-en);
  color: var(--color-sea);
  float: left;
  line-height: 0.9;
  margin-right: 0.08em;
  margin-top: 0.05em;
  letter-spacing: -0.05em;
}
.story blockquote {
  border-left: 3px solid var(--color-sea);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-500);
  color: var(--text-primary);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.story blockquote cite {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  font-weight: var(--fw-400);
}

/* Lineup card grid (brand hub) */
.sku-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sku-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sku-grid { grid-template-columns: repeat(3, 1fr); } }

.sku-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease);
}
.sku-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-sea);
}
.sku-card__visual {
  aspect-ratio: 4 / 3;
  background: var(--color-mist);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sku-card__visual::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(31,143,255,0.06) 0%, rgba(255,184,0,0.06) 100%);
}
.sku-card__placeholder {
  width: 64%; height: 64%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sku-card__placeholder svg { color: var(--color-stone); width: 32px; height: 32px; }

.sku-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.sku-card__cat {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sea);
  margin-bottom: 6px;
}
.sku-card__name {
  font-weight: var(--fw-700);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.sku-card__char {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  flex: 1;
}
.sku-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.sku-card__price-num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-700);
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
.sku-card__price-num small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  color: var(--text-secondary);
  margin-left: 4px;
}
.sku-card__more {
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  color: var(--color-sea);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Phase 11 — stretched link: whole sku-card is clickable */
.sku-card { position: relative; }
.sku-card__more--link {
  text-decoration: none;
  color: var(--color-sea);
  font-weight: var(--fw-700);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
  transition: color var(--dur-base) var(--ease);
}
.sku-card__more--link:hover { color: var(--color-sun-dark); }
.sku-card__more--link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}
/* The actual stretched-link pseudo-element on the card */
.sku-card--linkable .sku-card__more--link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sku-card--linkable {
  cursor: pointer;
}
.sku-card--linkable:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -12px rgba(31, 143, 255, 0.28);
  border-color: var(--color-sea);
}
.sku-card--linkable:focus-within {
  outline: 2px solid var(--color-sea);
  outline-offset: 3px;
}
/* Make link span the whole card surface */
.sku-card--linkable .sku-card__more--link {
  position: static;
}
.sku-card--linkable .sku-card__more--link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Spec list */
.spec-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0 0;
}
.spec-list dt, .spec-list dd { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); margin: 0; }
.spec-list { grid-template-columns: 1fr 1fr; }
.spec-list dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: var(--fw-500);
  font-family: var(--font-sans-en);
}
.spec-list dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  text-align: right;
  letter-spacing: -0.005em;
  color: var(--color-navy);
}

/* ── Floating KakaoTalk button ─────────────────────────────────────────── */
.kakao-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: var(--z-toast);
  width: 56px; height: 56px;
  background: var(--color-sun);
  color: var(--color-navy);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255,184,0,0.42);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease);
  text-decoration: none;
  font-weight: var(--fw-700);
}
.kakao-fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(255,184,0,0.5); }
.kakao-fab svg { width: 26px; height: 26px; }

/* §182-A — kakao-fab iOS Safari hit-test fix (Danny 2026-06-02, Alex Park #4)
   §171-C 와 동일 패턴이지만 site-header scope 밖이라 별도 적용 필요.
   SVG path 가 hit-target 으로 잡혀 href="#contact" 가 trigger 안 되는 버그.
   pointer-events: none on svg + svg * → 부모 <a> 가 클릭 수신.
   touch-action: manipulation → 300ms tap delay 제거.
   -webkit-tap-highlight-color → iOS 탭 회색 박스 통제.
   audit evidence: _experts/frontend_mobile_hardening_audit_2026-06-02.md §1
   DO_NOT_REVERT §182-A — 회귀 영구 X. */
.kakao-fab > svg,
.kakao-fab svg * { pointer-events: none; }
.kakao-fab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(10, 37, 64, 0.10);
}

/* ── Reveal on scroll ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* ── Util ──────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.rule-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sea);
}
.rule-strip::before, .rule-strip::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Policy pages ──────────────────────────────────────────────────────── */
.legal-page { padding: var(--space-16) 0; }
.legal-content {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--text-primary);
}
.legal-content h1 {
  font-weight: var(--fw-700);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
}
.legal-content h2 {
  font-weight: var(--fw-700);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  margin: var(--space-12) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.legal-content h3 {
  font-weight: var(--fw-600);
  font-size: var(--fs-md);
  margin: var(--space-6) 0 var(--space-2);
}
.legal-content p { margin: 0 0 var(--space-4); }
.legal-content ul, .legal-content ol { padding-left: 1.5rem; margin: 0 0 var(--space-4); }
.legal-content li { margin-bottom: var(--space-2); }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--fs-sm);
}
.legal-content th, .legal-content td {
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--border);
}
.legal-content th { background: var(--color-mist); font-weight: var(--fw-600); }
.legal-content .meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
}

/* 404 */
.error-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--gutter-mobile);
  text-align: center;
}

/* ==========================================================================
   v1.1 — Split layouts, ocean visuals, enhanced placeholders
   ========================================================================== */

/* ── Hero split (text left + visual right) ──────────────────────────────── */
.hero__inner--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-16); }
}

.hero__text { position: relative; z-index: 2; }
.hero__visual {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  display: none;
}
@media (min-width: 1024px) { .hero__visual { display: block; } }

.hero__visual svg { width: 100%; height: 100%; }

.hero__visual-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  animation: orbit 60s linear infinite;
}
.hero__visual-orbit::before {
  content: ""; position: absolute;
  top: -1px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-sun);
  box-shadow: 0 0 16px rgba(255,184,0,0.6);
  transform: translateX(-50%);
}
.hero__visual-orbit--inner { inset: 60px; animation-duration: 40s; animation-direction: reverse; opacity: 0.6; }
.hero__visual-orbit--mid { inset: 30px; animation-duration: 80s; opacity: 0.4; }

@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero__visual-marks {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  z-index: 3;
}
.hero__visual-mark {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: 2.25rem;
  letter-spacing: -0.04em;
  color: var(--color-white);
  position: relative;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease);
}
.hero__visual-mark::after {
  content: attr(data-name);
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans-en);
  font-size: 10px;
  font-weight: var(--fw-500);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__visual-mark:hover { transform: scale(1.08); background: rgba(255,255,255,0.12); }
.hero__visual-mark--levitaz { background: linear-gradient(135deg, #061A2E, #1F8FFF); }
.hero__visual-mark--ppc     { background: linear-gradient(135deg, #1670CC, #5BB4FF); }
.hero__visual-mark--takoon  { background: linear-gradient(135deg, #FFB800, #FFD25C); color: var(--color-navy); }
.hero__visual-mark--wip     { background: linear-gradient(135deg, #2A3B4C, #5C6F7E); }

.hero__visual-pill {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
  background: rgba(10,37,64,0.85);
  border: 1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-family: var(--font-sans-en);
  font-size: 11px;
  font-weight: var(--fw-700);
  letter-spacing: 0.18em;
  color: var(--color-sun);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Adjust hero title max-width on split */
.hero__inner--split .hero__title { max-width: 16ch; }
.hero__inner--split .hero__lead { max-width: 44ch; }

/* ── Brand Story Video block (Phase 10, brand pages) ────────────────────── */
.brand-video-wrap {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto var(--space-8);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #061A2E;
  box-shadow: 0 24px 64px rgba(10,37,64,0.18), 0 0 0 1px rgba(10,37,64,0.06);
}
.brand-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.brand-video-caption {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-secondary);
  text-align: center;
  word-break: keep-all;
  text-wrap: balance;
}
.brand-video-caption strong { color: var(--color-navy); font-weight: var(--fw-700); }
@media (max-width: 640px) {
  .brand-video-caption { font-size: var(--fs-base); line-height: 1.7; text-align: left; }
}

/* ── Hero video (Phase 10) ──────────────────────────────────────────────── */
.hero__visual--video {
  aspect-ratio: 16 / 9;
  max-width: 640px;
  display: block; /* always visible (mobile uses poster image) */
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #061A2E;
  box-shadow: 0 24px 64px rgba(10,37,64,0.45), 0 0 0 1px rgba(255,255,255,0.08);
}
.hero__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fallback gradient — replace with real poster CDN URL once Danny picks the still frame */
  background:
    radial-gradient(ellipse at 30% 35%, rgba(31,143,255,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(255,184,0,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #061A2E 0%, #0A2540 60%, #1670CC 140%);
  background-size: cover;
  background-position: center;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,37,64,0) 45%, rgba(10,37,64,0.55) 100%);
  pointer-events: none;
}
.hero__video-tag {
  position: absolute;
  bottom: 14px; left: 16px;
  z-index: 3;
  font-family: var(--font-sans-en);
  font-size: 10px;
  font-weight: var(--fw-700);
  letter-spacing: 0.22em;
  color: var(--color-sun);
  text-transform: uppercase;
  background: rgba(10,37,64,0.55);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
}
.hero__video-badges {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.hero__video-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: 13px;
  letter-spacing: -0.04em;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}

/* Mobile: hide iframe, rely on poster image only (저전력) */
@media (max-width: 1023px) {
  .hero__visual--video { max-width: 480px; }
  .hero__video-iframe { display: none; }
}
/* Desktop: ensure visual is shown (override base .hero__visual rule) */
@media (min-width: 1024px) {
  .hero__visual.hero__visual--video { display: block; }
}
/* prefers-reduced-motion: hide iframe (replace with poster) */
@media (prefers-reduced-motion: reduce) {
  .hero__video-iframe { display: none; }
}

/* ── Brand hero split ───────────────────────────────────────────────────── */
.brand-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .brand-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-16); }
}
.brand-hero__inner { max-width: 100%; width: 100%; }
.brand-hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
  display: none;
}
@media (min-width: 1024px) { .brand-hero__visual { display: block; } }

.brand-hero__monogram-xl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: clamp(8rem, 18vw, 14rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255,255,255,0.10);
  user-select: none;
}
.brand-hero__visual-ring {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
}
.brand-hero__visual-ring--2 { inset: 60px; opacity: 0.6; }
.brand-hero__visual-ring--3 { inset: 100px; opacity: 0.4; }
.brand-hero__visual-orbit-dot {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  animation: orbit 80s linear infinite;
}
.brand-hero__visual-orbit-dot::before {
  content: ""; position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-sun);
  box-shadow: 0 0 20px rgba(255,184,0,0.7);
  transform: translateX(-50%);
}
.brand-hero__badge {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans-en);
  font-size: 11px;
  font-weight: var(--fw-700);
  letter-spacing: 0.18em;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ── Section head split (title left + side-stat right) ──────────────────── */
.section-head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 100%;
  align-items: end;
}
@media (min-width: 768px) { .section-head--split { grid-template-columns: 1.6fr 1fr; gap: var(--space-12); } }

.section-head__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.section-head__stat {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.section-head__stat-num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-navy);
  line-height: 1;
  display: block;
}
.section-head__stat-label {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 6px;
  display: block;
}

/* ── Stats strip (full-width 4-column) ──────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-12) 0;
}
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }
.stats-strip__item {
  background: var(--bg-primary);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.stats-strip__icon {
  width: 28px; height: 28px;
  color: var(--color-sea);
  margin-bottom: var(--space-2);
}
.stats-strip__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: clamp(1.5rem, 1vw + 1rem, 2.25rem);
  letter-spacing: -0.025em;
  color: var(--color-navy);
  line-height: 1;
}
.stats-strip__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Enhanced product visuals (replace dashed placeholder) ──────────────── */
.sku-card__visual--enhanced {
  background: linear-gradient(135deg, var(--color-mist) 0%, #fff 100%);
  position: relative;
}
.sku-card__visual--enhanced::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(31,143,255,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,184,0,0.05), transparent 50%);
}

.sku-illustration {
  width: 75%;
  height: 75%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sku-illustration svg { width: 100%; height: auto; max-width: 280px; }

.sku-card__corner-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: rgba(10,37,64,0.92);
  color: var(--color-white);
  font-family: var(--font-sans-en);
  font-size: 10px;
  font-weight: var(--fw-700);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.sku-card__corner-tag--sun { background: var(--color-sun); color: var(--color-navy); }
.sku-card__corner-tag--sea { background: var(--color-sea); color: var(--color-white); }

/* ── Brand bands (gradient stripe, brand-themed) ────────────────────────── */
.brand-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-mist) 0%, transparent 100%);
  border-left: 3px solid var(--color-sea);
  margin-bottom: var(--space-6);
}
.brand-band__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-800);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--color-sea);
  text-transform: uppercase;
}
.brand-band__title {
  font-weight: var(--fw-700);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

/* ── Fix: Description Philosophy numerals ───────────────────────────────── */
.philo-num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-sea) 0%, var(--color-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-2);
  display: block;
}

/* ── Brand card visual augmentation ─────────────────────────────────────── */
.brand-card__visual::before {
  z-index: 2;
}
.brand-card__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}
.brand-card__decor svg { width: 100%; height: 100%; }

/* ── Wave divider (between sections) ────────────────────────────────────── */
.wave-divider {
  width: 100%;
  height: 60px;
  display: block;
  color: var(--color-mist);
  margin: 0;
}
.wave-divider svg { width: 100%; height: 100%; }
.wave-divider--inverse { color: var(--color-navy-deep); }

/* ── About / Brand stat cards ───────────────────────────────────────────── */
.value-card {
  padding: var(--space-8) var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-sea); }
.value-card__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-sea) 0%, var(--color-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

/* ── 4-column grid extension for stats ──────────────────────────────────── */
.grid-4-tight {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) { .grid-4-tight { grid-template-columns: repeat(4, 1fr); } }

/* ── Hero CTA enhancement ───────────────────────────────────────────────── */
.hero__quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.hero__quick-tag {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
  color: rgba(255,255,255,0.65);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
}

/* ── Sport tile (4-column instead of 5) ─────────────────────────────────── */
@media (min-width: 1024px) { .sport-grid--four { grid-template-columns: repeat(4, 1fr); } }

/* ── Spec/Compare table (brand pages) ───────────────────────────────────── */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  background: var(--color-mist);
  font-weight: var(--fw-700);
  color: var(--color-navy);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.compare-table tbody tr.is-recommended { background: rgba(255,184,0,0.06); }
.compare-table tbody td:first-child { font-weight: var(--fw-700); color: var(--color-navy); }

/* ── Inquiry CTA strip (less repetitive than full section) ──────────────── */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
}
.cta-strip__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
  color: var(--color-navy);
  letter-spacing: -0.01em;
}
.cta-strip__sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
  font-weight: var(--fw-400);
}

/* ── Mobile optimizations ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__title { font-size: clamp(2rem, 8vw + 0.5rem, 3rem); }
  .hero__lead { font-size: 1rem; }
  .section-head__side { grid-template-columns: 1fr 1fr; }
  .brand-card { min-height: 380px; }
}
.error-page__num {
  font-family: var(--font-sans-en);
  font-weight: var(--fw-900);
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-sea) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page__title {
  font-weight: var(--fw-700);
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  margin: var(--space-4) 0 var(--space-2);
}
.error-page__lead { color: var(--text-secondary); margin: 0 0 var(--space-8); }

/* ═════════════════════════════════════════════════════════════════════════
   v1.2 — 2026-05-05  Polish: Korean typography + narrow viewport hardening
   ═════════════════════════════════════════════════════════════════════════
   증상: 320-380px viewport에서 hero / brand-hero 카피가 글자 단위로 끊기거나
        가로 오버플로우. 한국어에 word-break: keep-all 부재 + letter-spacing
        과다 + clamp 최소값이 좁은 화면에 비해 큼.
   처치: word-break:keep-all (한글 어절 단위 break) + overflow-wrap:break-word
        (영문 긴 단어 fallback) + 좁은 viewport용 font-size·letter-spacing 완화.
   ═════════════════════════════════════════════════════════════════════════ */

/* 한글 텍스트 글로벌 — word-break 정책 */
.hero__title,
.hero__lead,
.hero__eyebrow,
.brand-hero__name,
.brand-hero__tagline,
.brand-hero__lead,
.section-head__title,
.section-head__lead,
.brand-card__title,
.brand-card__sub,
.value-card,
.sku-card__title,
.sku-card__sub,
.sku-card__lead,
.philo-num + p,
.cta-strip h2,
.cta-strip p,
.compare-table th,
.compare-table td {
  word-break: keep-all;       /* 한글 어절 단위로만 break */
  overflow-wrap: break-word;  /* 영문 긴 단어는 fallback */
}

/* 한글 본문 (description) 일괄 */
.section-head__lead,
.brand-hero__lead,
.hero__lead,
.sku-card__lead,
.value-card p,
.brand-card__sub,
.brand-card__lead {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Hero 카피: 좁은 viewport에서 줄바꿈 안정화 ───────────────────────────── */
@media (max-width: 480px) {
  .hero__title {
    /* 기존 clamp 최소 2.5rem → 1.875rem (30px) 로 축소, "4 brand, 한 라이더." 한 줄 */
    font-size: clamp(1.875rem, 7.5vw + 0.5rem, 2.5rem);
    letter-spacing: -0.025em;       /* -0.04em → 한글 가독성 위해 완화 */
    line-height: 1.15;
    max-width: 100%;
  }
  .hero__lead {
    font-size: 0.9375rem;           /* 15px — 모바일 밀도 적정 */
    line-height: 1.6;
    max-width: 100%;
  }
  .hero__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;          /* tracker 약간 완화 */
  }
}

@media (max-width: 360px) {
  /* iPhone SE 등 초협 viewport */
  .hero__title { font-size: 1.6875rem; line-height: 1.18; }
  .hero__lead { font-size: 0.875rem; }
}

/* ── Brand Hero 카피: 4 페이지 공통 헤딩 안정화 ──────────────────────────── */
@media (max-width: 480px) {
  .brand-hero__name {
    /* "LEVITAZ" 7자가 320px viewport에 들어가도록 최소값 축소 */
    font-size: clamp(2.5rem, 11vw, 4rem);
    letter-spacing: -0.035em;        /* -0.05em → 가독성 우선 */
    line-height: 1;
  }
  .brand-hero__tagline {
    font-size: clamp(1rem, 4vw + 0.25rem, 1.375rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    max-width: 100%;                 /* 24ch 제거 — 한글에서 부정확 */
  }
  .brand-hero__lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 100%;
  }
  .brand-hero__crumb {
    font-size: 0.75rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .brand-hero__name { font-size: 2.125rem; }
  .brand-hero__tagline { font-size: 1rem; }
}

/* ── Trust bar: 좁은 viewport에서 4개 항목 wrap 처리 ─────────────────────── */
@media (max-width: 640px) {
  .trust-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  .trust-bar__item svg { width: 12px; height: 12px; }
}

/* ── Section heads: 한글 keep-all + 모바일 폰트 ──────────────────────────── */
@media (max-width: 480px) {
  .section-head__title {
    font-size: clamp(1.5rem, 6vw + 0.5rem, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .section-head__lead {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .section-head__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
}

/* ── Value cards / brand cards: 좁은 viewport 텍스트 ─────────────────────── */
@media (max-width: 480px) {
  .value-card { padding: 1.5rem 1.25rem; }
  .value-card__num { font-size: 2.5rem; }
  .value-card h3 { font-size: 1.0625rem; line-height: 1.35; }
  .value-card p { font-size: 0.9375rem; line-height: 1.6; }

  .brand-card { min-height: auto; padding: 1.5rem 1.25rem; }
  .brand-card__title { font-size: 1.5rem; line-height: 1.2; }
  .brand-card__sub { font-size: 0.875rem; }
  .brand-card__lead { font-size: 0.9375rem; line-height: 1.55; }
}

/* ── 4-brand orbit hero visual: 모바일에서 깔끔히 hidden ────────────────── */
@media (max-width: 1023px) {
  .hero__visual,
  .brand-hero__visual {
    display: none;
  }
  /* 좌측 text 영역이 full width 차지 */
  .hero__inner--split,
  .brand-hero__layout {
    grid-template-columns: 1fr;
  }
}

/* ── SKU cards (product cards): 좁은 viewport 표 패딩 ───────────────────── */
@media (max-width: 480px) {
  .sku-card { padding: 1.25rem 1rem; }
  .sku-card__title { font-size: 1.125rem; line-height: 1.3; }
  .sku-card__sub { font-size: 0.8125rem; }
  .sku-card__lead { font-size: 0.9375rem; line-height: 1.6; }
  .sku-card__price { font-size: 1.125rem; }
  .sku-card__corner-tag { font-size: 0.625rem; padding: 0.25rem 0.5rem; }
}

/* ── Compare table: 모바일에서 가로 스크롤 + 폰트 축소 ──────────────────── */
/* §193 .compare-wrap 추가 — 브랜드 hub 4페이지 (levitaz/ppc/takoon/wip) 비교표 가로 스크롤 보장 */
@media (max-width: 640px) {
  .compare-table-wrap,
  .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    font-size: 0.8125rem;
    min-width: 540px;            /* 가로 스크롤 보장 */
  }
  .compare-table th,
  .compare-table td {
    padding: 0.625rem 0.5rem;
  }
}

/* ── Buttons: 모바일에서 적정 hit area + 줄바꿈 방지 ───────────────────── */
@media (max-width: 480px) {
  .btn--lg {
    font-size: 0.9375rem;
    padding: 0.875rem 1.25rem;
    width: 100%;
    justify-content: center;
  }
  .btn {
    white-space: normal;
    word-break: keep-all;
    line-height: 1.3;
  }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }
}

/* ── Container 패딩: 좁은 viewport에서 너무 좁지 않게 ────────────────────── */
@media (max-width: 480px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ── Tablet 구간 (640-1023px) 미세 조정 ─────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__title { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); }
  .brand-hero__name { font-size: clamp(3rem, 7vw, 5rem); }
  .brand-hero__tagline { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem); max-width: 100%; }
}

/* ── Wide desktop (1440+) — 텍스트 max-width 안정화 ─────────────────────── */
@media (min-width: 1440px) {
  .hero__lead { max-width: 56ch; }
  .brand-hero__lead { max-width: 60ch; }
  .section-head__lead { max-width: 70ch; }
}

/* ── 입력 필드 / form: 모바일 zoom 방지 (16px 미만이면 iOS zoom 발생) ────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-size: 16px;             /* iOS Safari focus zoom 방지 */
}

/* ── Print + reduced motion 안전망 ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__visual-orbit,
  .brand-hero__visual-ring,
  .hero__visual-marks .hero__visual-mark {
    animation: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   v1.3 — 2026-05-05  4-tier 캐릭터 카피 + 5축 mini-chart + Coming Soon
   ═════════════════════════════════════════════════════════════════════════
   PPC와 Takoon 모두 4-tier (입문/중급/고급/레이싱) 큐레이션.
   각 SKU 카드에 tier badge + 캐릭터 카피 (야생마, 나비 등) + 5축 mini-chart.
   레이싱 tier (Takoon Double Skin)는 Coming Soon 카드로 처리.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Tier badge — 4-tier 가시성 (입문/중급/고급/레이싱) ─────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans-en);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.05);
  margin-bottom: 0.625rem;
}
.tier-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tier-badge--entry  { color: #2A8C5C; }    /* 입문 — 안정적 그린 */
.tier-badge--mid    { color: #1670CC; }    /* 중급 — 시리어스 블루 */
.tier-badge--adv    { color: #B26B00; }    /* 고급 — 인텐스 앰버 */
.tier-badge--race   { color: #C03030; }    /* 레이싱 — 강렬한 레드 */

/* ── 캐릭터 nickname — "야생마, 나비" 등 시각적 임팩트 ───────────────────── */
.character-nick {
  display: block;
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.875rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid currentColor;
  background: rgba(31,143,255,0.04);
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.45;
}
.character-nick strong {
  font-style: normal;
  font-weight: 900;
  color: var(--color-sea);
  letter-spacing: -0.02em;
}

/* ── 5축 mini-chart (SKU 카드 안에 들어가는 작은 5각형 radar) ──────────── */
.perf-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0.875rem 0 0.5rem;
  padding: 0.625rem 0.5rem;
  background: linear-gradient(180deg, rgba(10,37,64,0.04) 0%, rgba(10,37,64,0.02) 100%);
  border-radius: 8px;
}
.perf-mini__axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.perf-mini__axis-bar {
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, rgba(10,37,64,0.06) 0%, rgba(10,37,64,0.10) 100%);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.perf-mini__axis-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, var(--color-sea) 0%, var(--color-navy) 100%);
  border-radius: 3px 3px 0 0;
  transition: height var(--dur-base) var(--ease);
}
.perf-mini__axis-label {
  font-family: var(--font-sans-en);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.perf-mini__axis-num {
  font-family: var(--font-sans-en);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
}
/* 캐릭터별 색상 변형 */
.perf-mini--m2 .perf-mini__axis-fill   { background: linear-gradient(180deg, #2A8C5C 0%, #145C3A 100%); }
.perf-mini--m1 .perf-mini__axis-fill   { background: linear-gradient(180deg, #1F8FFF 0%, #0A2540 100%); }
.perf-mini--m1x .perf-mini__axis-fill  { background: linear-gradient(180deg, #FFB800 0%, #B26B00 100%); }
.perf-mini--fds .perf-mini__axis-fill  { background: linear-gradient(180deg, #C03030 0%, #6A1A1A 100%); }
.perf-mini--takoon-entry .perf-mini__axis-fill  { background: linear-gradient(180deg, #5BB4FF 0%, #1670CC 100%); }
.perf-mini--takoon-mid .perf-mini__axis-fill    { background: linear-gradient(180deg, #FFB800 0%, #C8800A 100%); }
.perf-mini--takoon-adv .perf-mini__axis-fill    { background: linear-gradient(180deg, #FF7F2A 0%, #B24F0F 100%); }
/* P0 모바일 폴백 — 5열 강제가 좁은 화면에서 붕괴 → 3열 wrap (5축 모두 2행으로 보존) */
@media (max-width: 540px) {
  .perf-mini { grid-template-columns: repeat(3, 1fr); }
}

/* ── Coming Soon 카드 (Takoon Double Skin Wing) ─────────────────────────── */
.sku-card--coming-soon {
  position: relative;
  opacity: 0.78;
  background: linear-gradient(135deg, rgba(10,37,64,0.04) 0%, rgba(31,143,255,0.04) 100%);
  border: 2px dashed var(--border-strong) !important;
}
.sku-card--coming-soon .sku-card__visual {
  filter: grayscale(0.5);
  opacity: 0.7;
}
.sku-card--coming-soon::before {
  content: "곧 출시";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  background: var(--color-navy);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(10,37,64,0.20);
}
.sku-card--coming-soon .sku-card__price-num {
  color: var(--text-secondary);
}
.sku-card--coming-soon .character-nick {
  background: rgba(255,255,255,0.4);
  color: var(--text-secondary);
}
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.5rem;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── 4×4 Brand Differentiation Matrix ───────────────────────────────────── */
.brand-matrix {
  display: grid;
  grid-template-columns: 120px repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0;
}
.brand-matrix__head {
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.875rem 0.5rem;
  color: var(--text-secondary);
  background: var(--color-mist);
  border-radius: 8px;
}
.brand-matrix__head--brand {
  text-align: left;
  background: transparent;
  font-size: 0.875rem;
}
.brand-matrix__row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1.25rem 0.875rem;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-sea) 100%);
  border-radius: 12px;
  color: #fff;
}
.brand-matrix__row-label b {
  font-family: var(--font-sans-en);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.brand-matrix__row-label--takoon {
  background: linear-gradient(135deg, #2A3B4C 0%, #FFB800 100%);
  color: var(--color-navy);
}
.brand-matrix__row-label small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}
.brand-matrix__cell {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.brand-matrix__cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10,37,64,0.08);
}
.brand-matrix__cell--cs {
  border-style: dashed;
  background: rgba(31,143,255,0.04);
  color: var(--text-secondary);
}
.brand-matrix__model {
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}
.brand-matrix__nick {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-sea);
  font-style: italic;
  word-break: keep-all;
}
.brand-matrix__spec {
  margin-top: auto;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  word-break: keep-all;
}

/* 모바일에서는 4×4 그리드를 swipe-able 가로 카드로 ─────────────────────── */
@media (max-width: 767px) {
  .brand-matrix {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .brand-matrix__head { display: none; }
  .brand-matrix__head--brand { display: block; margin-top: 16px; }
  .brand-matrix__row-label {
    padding: 0.875rem 1rem;
    text-align: left;
  }
  .brand-matrix__cell {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.75rem 0.875rem;
  }
  .brand-matrix__cell::before {
    content: attr(data-tier);
    font-family: var(--font-sans-en);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex: 0 0 auto;
    width: 56px;
  }
  .brand-matrix__model { flex: 1; min-width: 0; }
  .brand-matrix__nick { display: none; }
  .brand-matrix__spec { flex: 0 0 auto; text-align: right; }
}

/* ==========================================================================
   v1.1 — Consultation Frame (Level / Style / Quiz)
   ========================================================================== */

/* Page hero — consultation pages */
.cons-hero {
  position: relative;
  background: linear-gradient(180deg, #061A2E 0%, #0A2540 80%);
  color: #fff;
  padding: clamp(80px, 12vw, 140px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.cons-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 80% 30%, rgba(31,143,255,0.18), transparent 60%),
              radial-gradient(50% 60% at 10% 100%, rgba(255,184,0,0.10), transparent 60%);
  pointer-events: none;
}
.cons-hero__inner { position: relative; max-width: 64ch; }
.cons-hero__crumb {
  font-family: var(--font-sans-en);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}
.cons-hero__crumb a { color: rgba(255,255,255,0.7); }
.cons-hero__crumb a:hover { color: #fff; }
.cons-hero__crumb span.sep { margin: 0 8px; color: rgba(255,255,255,0.3); }
.cons-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans-en);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-sun);
  padding: 6px 14px;
  border: 1px solid rgba(255,184,0,0.4);
  border-radius: 999px;
  margin-bottom: 24px;
}
.cons-hero__title {
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  line-height: 1.05; letter-spacing: -0.035em;
  margin: 0 0 24px;
}
.cons-hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--color-sun), #FFD64A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cons-hero__lead {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 32px;
}
.cons-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Problem section */
.cons-problem {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--color-mist);
}
.cons-problem__head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 56px;
}
.cons-problem__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  list-style: none; padding: 0; margin: 0;
}
.cons-problem__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 24px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.cons-problem__num {
  font-family: var(--font-sans-en);
  font-weight: 800; font-size: 1.5rem;
  color: var(--color-sea);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cons-problem__title {
  font-weight: 700; font-size: 1.125rem;
  color: var(--color-navy);
  line-height: 1.3;
}
.cons-problem__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-slate);
  margin: 0;
}

/* Why section */
.cons-why {
  padding: clamp(56px, 8vw, 96px) 0;
  background: #fff;
}
.cons-why__layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 800px) {
  .cons-why__layout { grid-template-columns: 1fr; gap: 32px; }
}
.cons-why__title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.cons-why__desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-slate);
}
.cons-why__points {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
}
.cons-why__point {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 18px 22px;
  background: var(--color-mist);
  border-left: 3px solid var(--color-sea);
  border-radius: 10px;
}
.cons-why__point strong {
  display: block;
  font-weight: 700; color: var(--color-navy);
  margin-bottom: 4px;
}
.cons-why__point-num {
  font-family: var(--font-sans-en);
  font-weight: 800; font-size: 1.25rem;
  color: var(--color-sea);
}
.cons-why__point-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-charcoal);
}

/* Session-separation USP section (단무지 입문 컨설팅 — 세션 분리) */
.cons-session {
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--color-mist) 100%);
}
.cons-session__head {
  text-align: center;
  max-width: 68ch;
  margin: 0 auto 48px;
}
.cons-session__title {
  font-weight: 700;
  font-size: clamp(1.625rem, 2.4vw + 0.85rem, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--color-navy);
  margin: 12px 0 16px;
}
.cons-session__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-slate);
  margin: 0;
}
.cons-session__list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  counter-reset: session-step;
}
@media (min-width: 1100px) {
  .cons-session__list { grid-template-columns: repeat(3, 1fr); }
}
.cons-session__item {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cons-session__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.08);
  border-color: var(--color-sea);
}
.cons-session__item--highlight {
  border-color: var(--color-sun);
  background: linear-gradient(180deg, #fff 0%, #FFFCF2 100%);
}
.cons-session__item--highlight:hover {
  border-color: var(--color-sun);
}
.cons-session__num {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.18);
}
.cons-session__item--highlight .cons-session__num {
  background: var(--color-sun);
  color: var(--color-navy);
}
.cons-session__phase {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans-en);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sea);
  background: rgba(31, 143, 255, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.cons-session__item--highlight .cons-session__phase {
  color: #B26B00;
  background: rgba(255, 184, 0, 0.16);
}
.cons-session__name {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 0;
}
.cons-session__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-charcoal);
  margin: 0;
  flex-grow: 1;
}
.cons-session__body strong {
  color: var(--color-navy);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 60%, rgba(255, 184, 0, 0.32) 60%);
  padding: 0 1px;
}
.cons-session__gear {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.cons-session__gear-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-slate);
  background: var(--color-mist);
  padding: 3px 8px;
  border-radius: 4px;
}
.cons-session__gear-value {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-charcoal);
  font-weight: 500;
}
.cons-session__close {
  background: var(--color-navy);
  color: #fff;
  padding: 22px 28px;
  border-radius: 14px;
  text-align: center;
  max-width: 72ch;
  margin: 0 auto;
}
.cons-session__close p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.cons-session__close strong {
  color: var(--color-sun);
  font-weight: 700;
}
@media (max-width: 700px) {
  .cons-session__close { padding: 20px 22px; font-size: 0.9375rem; }
}

/* Matrix section */
.cons-matrix {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--color-mist);
}
.cons-matrix__head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 48px;
}
.cons-matrix__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  line-height: 1.15; letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.cons-matrix__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-slate);
}

/* Weight group blocks */
.mtx-weight-group {
  margin-bottom: 56px;
}
.mtx-weight-group:last-child { margin-bottom: 0; }
.mtx-weight-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0 16px;
  border-bottom: 2px solid var(--color-navy);
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.mtx-weight-head__num {
  font-family: var(--font-sans-en);
  font-weight: 800; font-size: 1.875rem;
  color: var(--color-navy);
  letter-spacing: -0.025em;
  line-height: 1;
}
.mtx-weight-head__sub {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-slate);
}
.mtx-weight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Matrix card */
.mtx-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.mtx-card:hover {
  border-color: var(--color-sea);
  box-shadow: 0 8px 24px rgba(10,37,64,0.06);
}
.mtx-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: linear-gradient(180deg, #F5F7FA 0%, #ECEFF4 100%);
  border-bottom: 1px solid var(--border);
}
.mtx-card__weight {
  font-family: var(--font-sans-en);
  font-weight: 800; font-size: 1rem;
  color: var(--color-navy);
}
.mtx-card__style {
  font-size: 0.75rem; font-weight: 600;
  color: var(--color-sea);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.mtx-card__body {
  padding: 20px;
  display: grid; gap: 14px;
}
.mtx-demo-banner {
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(31,143,255,0.08), rgba(255,184,0,0.06));
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem; line-height: 1.45;
  color: var(--color-charcoal);
  font-weight: 500;
}
.mtx-warning {
  font-weight: 500;
}
.mtx-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
}
.mtx-row__label {
  font-family: var(--font-sans-en);
  font-weight: 700; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-slate);
  padding-top: 4px;
  /* §164 (Danny 2026-05-12) — find-my-gear 결과 카드 eyebrow single-line lock.
     "ACCESSORY"가 "ACCESSO_RY"로 wrap 되는 회귀 영구 금지. */
  white-space: nowrap;
}
.mtx-row__val { color: var(--color-charcoal); line-height: 1.45; }
.mtx-row__val--mini { font-size: 0.8125rem; color: var(--color-slate); }
.mtx-prod {
  color: var(--color-navy);
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.mtx-prod strong { font-weight: 700; }
.mtx-prod:hover { border-bottom-color: var(--color-sea); }
.mtx-prod-mini {
  color: var(--color-slate);
  font-size: 0.8125rem;
}
.mtx-prod-mini:hover { color: var(--color-navy); }
.mtx-or {
  display: inline-block;
  font-size: 0.6875rem;
  color: var(--color-slate);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 4px;
}
.mtx-plus {
  display: inline-block;
  margin: 0 4px;
  color: var(--color-stone);
}
.mtx-sub {
  font-size: 0.8125rem;
  color: var(--color-slate);
  margin-left: 8px;
}
/* ---- Board 1차/2차 시각 차이 (Danny 2026-05-07, DO_NOT_REVERT §73) ---- */
.mtx-row__val--board { display: flex; flex-direction: column; gap: 4px; }
.mtx-board-tier {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  line-height: 1.4;
}
.mtx-board-tier__label {
  display: inline-block;
  font-family: var(--font-sans-en);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
}
.mtx-board-tier--primary .mtx-board-tier__label {
  color: var(--color-navy);
  background: rgba(31,143,255,0.14);
}
.mtx-board-tier--secondary .mtx-board-tier__label {
  color: var(--color-slate);
  background: var(--color-fog);
  font-weight: 600;
}
.mtx-board-primary { color: var(--color-navy); font-weight: 700; }
.mtx-board-primary .mtx-prod { color: var(--color-navy); font-weight: 700; }
.mtx-board-primary .mtx-prod strong { font-weight: 800; }
.mtx-board-secondary { color: var(--color-slate); font-style: italic; font-size: 0.9375rem; }
.mtx-board-secondary .mtx-prod { color: var(--color-slate); font-weight: 500; }
.mtx-board-secondary .mtx-prod strong { font-weight: 600; }
.mtx-sizes {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 6px;
}
.mtx-size-pill {
  display: inline-block;
  font-family: var(--font-sans-en);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--color-fog);
  color: var(--color-navy);
  border-radius: 999px;
}
.mtx-reasoning {
  padding: 16px 20px 18px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-slate);
  background: var(--color-mist);
  border-top: 1px solid var(--border);
  margin: 0;
}
.mtx-tags {
  padding: 0 20px 18px;
  background: var(--color-mist);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mtx-tag {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31,143,255,0.10);
  color: var(--color-sea-dark);
  font-weight: 500;
}
.mtx-tag--warn {
  background: rgba(255,184,0,0.16);
  color: #B26B00;
}
.mtx-tag--review {
  background: rgba(192,48,48,0.10);
  color: #C03030;
}

/* Path / next-step section */
.cons-next {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--color-navy);
  color: #fff;
}
.cons-next__layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 800px) {
  .cons-next__layout { grid-template-columns: 1fr; gap: 32px; }
}
.cons-next__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  line-height: 1.15; letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.cons-next__desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}
.cons-next__path {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 32px;
}
.cons-next__path-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}
.cons-next__path-step:last-child { border-bottom: none; padding-bottom: 0; }
.cons-next__path-step:first-child { padding-top: 0; }
.cons-next__path-num {
  font-family: var(--font-sans-en);
  font-weight: 800; font-size: 1.125rem;
  color: var(--color-sun);
}
.cons-next__path-text strong {
  display: block;
  font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.cons-next__path-text p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}

/* FAQ */
.cons-faq {
  padding: clamp(56px, 8vw, 96px) 0;
  background: #fff;
}
.cons-faq__head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 48px;
}
.cons-faq__list {
  max-width: 64ch;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.cons-faq__item {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.cons-faq__item:last-child { border-bottom: 1px solid var(--border); }
.cons-faq__q {
  font-weight: 700; font-size: 1.0625rem;
  color: var(--color-navy);
  margin: 0 0 12px;
  display: flex; gap: 12px;
}
.cons-faq__q::before {
  content: 'Q';
  font-family: var(--font-sans-en);
  font-weight: 800;
  color: var(--color-sea);
  flex-shrink: 0;
}
.cons-faq__a {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-charcoal);
  margin: 0;
  padding-left: 28px;
}

/* CTA stripe */
.cons-cta {
  padding: clamp(56px, 8vw, 96px) 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-sea-dark) 100%);
  color: #fff;
  text-align: center;
}
.cons-cta__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  line-height: 1.15; letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.cons-cta__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  max-width: 60ch;
  margin: 0 auto 40px;
}
.cons-cta__buttons {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Style page hero accent variants */
/* Phase 10 — image-led hero overlay (style/level pages) */
.cons-hero--with-image .cons-hero__inner { position: relative; z-index: 3; }
.cons-hero--with-image::before { z-index: 2; }
.cons-hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  z-index: 1;
  pointer-events: none;
  filter: saturate(1.15) contrast(1.04);
}
.cons-hero--with-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,26,46,0.35) 0%, rgba(6,26,46,0.78) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Phase 10 — 3-image splitter strip */
.image-strip {
  padding: clamp(32px, 5vw, 64px) 0;
  background: linear-gradient(180deg, var(--color-mist) 0%, #fff 100%);
}
.image-strip__lead {
  text-align: center;
  font-size: var(--fs-sm);
  font-family: var(--font-sans-en);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sea);
  margin: 0 auto 20px;
}
.image-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 768px) {
  .image-strip__grid { padding: 0 var(--gutter-desktop); }
}
.image-strip__cell {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, #1670CC 0%, #061A2E 100%);
  box-shadow: 0 8px 22px rgba(10,37,64,0.10);
}
.image-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.image-strip__cell:hover img { transform: scale(1.05); }
.image-strip__cell::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--font-sans-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10,37,64,0.72);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
  .image-strip__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .image-strip__cell:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 7; }
  .image-strip__cell::after { font-size: 9px; padding: 4px 9px; }
  .image-strip__item:nth-child(3) { grid-column: span 2; }
  .image-strip__item:nth-child(3) .image-strip__cell { aspect-ratio: 16 / 7; }
}
/* P0 모바일 폴백 — 640px 2열에서 ≤540px 1열 전환 (3번째 셀 span 2 리셋) */
@media (max-width: 540px) {
  .image-strip__grid { grid-template-columns: 1fr; }
  .image-strip__cell:nth-child(3) { grid-column: auto; }
  .image-strip__item:nth-child(3) { grid-column: auto; }
}
/* DO_NOT_REVERT §153 — Danny 컨설팅 talking point 캡션 (flat-speed.html 적용). __item wrapper 도입 — image-strip__cell 직속 grid 사용처 (wave/hybrid/choppy-freeride) 와 backward compatible */
.image-strip__item { display: flex; flex-direction: column; gap: 10px; }
.image-strip__caption {
  margin: 2px 4px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-slate);
  word-break: keep-all;
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .image-strip__caption { font-size: 12.5px; line-height: 1.55; }
}

.cons-hero--flat-speed { background: linear-gradient(135deg, #061A2E 0%, #1670CC 100%); }
.cons-hero--choppy { background: linear-gradient(135deg, #061A2E 0%, #0A2540 100%); }
.cons-hero--wave { background: linear-gradient(135deg, #0A2540 0%, #2A8C5C 100%); }
.cons-hero--hybrid { background: linear-gradient(135deg, #061A2E 0%, #B26B00 100%); }

.cons-hero--beginner { background: linear-gradient(135deg, #061A2E 0%, #2A8C5C 100%); }
.cons-hero--intermediate { background: linear-gradient(135deg, #061A2E 0%, #1670CC 100%); }
.cons-hero--advanced { background: linear-gradient(135deg, #061A2E 0%, #0A2540 100%); }
.cons-hero--pro { background: linear-gradient(135deg, #0A2540 0%, #C03030 100%); }

/* Quiz funnel */
.quiz-frame {
  min-height: 100vh;
  background: linear-gradient(180deg, #061A2E 0%, #0A2540 100%);
  color: #fff;
  padding: 80px 0 120px;
}
.quiz-progress {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
.quiz-progress__bar {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-sea), var(--color-sun));
  transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 999px;
}
.quiz-progress__label {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-sans-en);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.quiz-step {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}
.quiz-step__head {
  text-align: center;
  margin-bottom: 40px;
}
.quiz-step__num {
  font-family: var(--font-sans-en);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-sun);
  margin-bottom: 12px;
}
.quiz-step__title {
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw + 1rem, 2.75rem);
  line-height: 1.15; letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.quiz-step__lead {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.7);
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
/* §155 v3 — 5-card level grid: 5-col on wide desktop, gracefully wraps to 3/2/1 */
.quiz-options--5col { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (min-width: 1080px) {
  .quiz-options--5col { grid-template-columns: repeat(5, 1fr); }
}
.quiz-option {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: all 180ms ease;
}
.quiz-option:hover, .quiz-option:focus {
  border-color: var(--color-sea);
  background: rgba(31,143,255,0.10);
  outline: none;
  transform: translateY(-2px);
}
.quiz-option--selected {
  border-color: var(--color-sun);
  background: rgba(255,184,0,0.12);
}
.quiz-option__title {
  font-weight: 700; font-size: 1.125rem;
  margin: 0 0 6px;
  color: #fff;
}
.quiz-option__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.5;
}
.quiz-actions {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.quiz-back {
  background: none; border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 8px 0;
}
.quiz-back:hover { color: #fff; }
.quiz-back[disabled] { opacity: 0.3; cursor: not-allowed; }

.quiz-result {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}
.quiz-result__head { text-align: center; margin-bottom: 32px; }
.quiz-result__eyebrow {
  display: inline-block;
  font-family: var(--font-sans-en);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-sun);
  margin-bottom: 12px;
}
.quiz-result__title {
  font-weight: 800;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  margin: 0;
}
.quiz-result .mtx-card {
  background: rgba(255,255,255,0.96);
  color: var(--color-charcoal);
}
.quiz-result__cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 32px;
}

/* btn--ghost (light theme) */
.btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}
.btn--ghost:hover {
  background: var(--color-navy);
  color: #fff;
}

/* ==========================================================
   Phase 9 — Nav restructure additions
   ========================================================== */
.nav__sub--wide { min-width: 340px; }
/* Danny 2026-06-03 — nav 항목 간격 여유 확보(②) + 장바구니 아이콘 항상 노출(①).
   이전: --space-5 미정의로 gap 무효 → 8px 잔존. index.html(항목 8개·라이딩분석 주입 포함)에서
   행이 컨테이너를 넘쳐 우측 cart/login 이 잘려 보이지 않던 원인. min-width:0 + cart flex-shrink:0
   로 다른 링크가 먼저 줄고 장바구니는 항상 표시되도록 보장. */
.nav__primary { gap: var(--space-5); min-width: 0; flex-wrap: nowrap; }
/* 작은 데스크탑(1024~1180px)에서 8개 항목 + 넓힌 gap 이 컨테이너를 넘칠 때,
   일반 링크는 패딩을 조금 줄여 한 줄에 들어오게 하고 장바구니는 절대 줄지/잘리지 않게 한다. */
.nav__primary .nav__has-sub,
.nav__primary > .nav__link { flex-shrink: 1; white-space: nowrap; }
.nav__primary .nav__cart { flex-shrink: 0; }
@media (min-width: 1024px) and (max-width: 1180px) {
  .nav__primary { gap: var(--space-3); }
  .nav__primary .nav__link { padding-left: 0.55rem; padding-right: 0.55rem; }
}

.mobile-menu__heading {
  padding: 18px 24px 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  pointer-events: none;
}
.mobile-menu__about {
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 16px;
}
.mobile-menu__about h4 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sun);
}

.footer-about ul li { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.7; }
.footer-about ul li strong { display: block; }

/* ==========================================================
   Phase 9 — SKU card image overlay
   ========================================================== */
.sku-illustration--has-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.sku-illustration--has-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(10,37,64,0.12));
  transition: transform var(--dur-base) var(--ease);
}
.sku-card:hover .sku-illustration--has-image img {
  transform: scale(1.04);
}

/* Brand grid hero on index */
.brand-card__visual--has-image {
  position: relative;
  overflow: hidden;
}
.brand-card__visual--has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* DO_NOT_REVERT §35-B (2026-05-11): Levitaz R6 product shot은 mast가 상단, front wing(글라이더)이 하단에 위치하는 종방향 구도. 4:3 카드 컨테이너에서 default center crop은 mast만 보이고 wing이 잘림. center bottom 으로 lock — 마스트 상단 잘림 OK, wing 노출이 brand 정체성. 출처: Danny 2026-05-11 직접 적발 (스크린샷 b531f60e). */
.brand-card__visual--levitaz.brand-card__visual--has-image img {
  object-position: center bottom;
}
.brand-card__visual--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
}

/* ── Click-to-play YouTube poster (error 153 fallback) ──────────────────── */
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
}
.video-embed__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 240ms ease, filter 240ms ease;
}
.video-embed__poster:hover .video-embed__thumb,
.video-embed__poster:focus-visible .video-embed__thumb {
  transform: scale(1.04);
  filter: brightness(0.92);
}
.video-embed__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
  transition: transform 240ms ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.video-embed__play svg { width: 100%; height: 100%; display: block; }
.video-embed__yt-link {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 4;
  font-family: var(--font-sans-en);
  font-size: 11px;
  font-weight: var(--fw-700);
  letter-spacing: 0.10em;
  color: var(--color-white);
  text-transform: uppercase;
  background: rgba(10,37,64,0.55);
  padding: 7px 12px;
  border-radius: var(--radius-full);
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 200ms ease;
}
.video-embed__yt-link:hover,
.video-embed__yt-link:focus-visible {
  background: rgba(10,37,64,0.85);
  color: var(--color-white);
}
.brand-video-wrap > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}

/* ── Hero video → static thumbnail fallback (error 153 free) ───────────── */
.hero__video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.hero__video-cta {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans-en);
  font-size: 11px;
  font-weight: var(--fw-700);
  letter-spacing: 0.10em;
  color: var(--color-white);
  text-transform: uppercase;
  background: rgba(10,37,64,0.55);
  padding: 7px 12px;
  border-radius: var(--radius-full);
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 200ms ease;
}
.hero__video-cta:hover,
.hero__video-cta:focus-visible {
  background: rgba(10,37,64,0.85);
  color: var(--color-white);
}
.hero__video-cta svg { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) {
  .video-embed__poster:hover .video-embed__thumb,
  .video-embed__poster:focus-visible .video-embed__thumb { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Contrast Audit Fix — 2026-05-05
   문제: dark hero/frame 안 텍스트가 일부 환경에서 navy on navy로 보이는
   케이스 보고. 명시적 color rule을 추가하여 cascade 의존도를 제거.
   원칙: WCAG AA (4.5:1) 보장. 본문 흰색, sub 텍스트 0.85 opacity.
   ────────────────────────────────────────────────────────────────────── */

/* Quiz frame (find-my-gear.html) — 모든 텍스트 명시적 흰색 */
.quiz-frame .quiz-step__title,
.quiz-frame .quiz-step__head,
.quiz-frame .quiz-result__title,
.quiz-frame .quiz-result__head,
.quiz-frame h2 {
  color: #fff;
}
.quiz-frame .quiz-step__lead,
.quiz-frame .quiz-result__sub {
  color: rgba(255, 255, 255, 0.85); /* was 0.7 — 4.7:1 → ~6.5:1 */
}

/* 기본 클래스에도 fallback 색상 추가 (defensive) */
.quiz-step__title { color: inherit; }
.quiz-result__title { color: inherit; }
.quiz-result__head { color: inherit; }

/* Dark hero 일반 — hero__title, cons-hero__title, demo-hero__title이
   .hero / .cons-hero / .demo-hero 안에서 항상 흰색이 되도록 보장 */
.hero .hero__title,
.hero .hero__lead,
.cons-hero .cons-hero__title,
.cons-hero .cons-hero__lead,
.demo-hero .demo-hero__title,
.demo-hero .demo-hero__lead {
  color: #fff;
}
.hero .hero__lead,
.cons-hero .cons-hero__lead,
.demo-hero .demo-hero__lead {
  color: rgba(255, 255, 255, 0.85);
}

/* Cons-hero · Hero crumb·tag — AA 4.5:1 보장 (was 0.6/0.65) */
.cons-hero .cons-hero__crumb { color: rgba(255, 255, 255, 0.82); }
.cons-hero .cons-hero__crumb a { color: rgba(255, 255, 255, 0.88); }
.cons-hero .cons-hero__crumb span.sep { color: rgba(255, 255, 255, 0.5); } /* sep: 장식적 — 3:1 정도면 충분 */

.hero .hero__quick-tag { color: rgba(255, 255, 255, 0.82); }
.hero .hero__lead { color: rgba(255, 255, 255, 0.88); }
.cons-hero .cons-hero__lead { color: rgba(255, 255, 255, 0.88); }

/* Demo-hero (junior/, women/, family/) — per-page inline styles override */
.demo-hero .demo-hero__crumb { color: rgba(255, 255, 255, 0.82); }
.demo-hero .demo-hero__crumb a { color: rgba(255, 255, 255, 0.88); }
.demo-hero .demo-hero__crumb a:hover { color: #fff; }
.demo-hero .demo-hero__lead { color: rgba(255, 255, 255, 0.88); }

/* Brand-hero (levitaz, takoon, ppc, wip) — color: var(--text-on-dark) 이미 있음, 보강만 */
.brand-hero .brand-hero__crumb { color: rgba(255, 255, 255, 0.82); }
.brand-hero .brand-hero__crumb a { color: rgba(255, 255, 255, 0.88); }

/* ─────────────────────────────────────────
   Lifestyle Gallery (Phase Overnight Final)
   ───────────────────────────────────────── */
.lifestyle-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.lifestyle-strip__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(135deg, #0A2540, #1670CC);
  box-shadow: 0 6px 18px rgba(10, 37, 64, 0.12);
}
.lifestyle-strip__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lifestyle-strip__item:hover img { transform: scale(1.04); }
.lifestyle-strip__cap {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 37, 64, 0.62);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  letter-spacing: -0.01em;
}
.lifestyle-strip--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .lifestyle-strip,
  .lifestyle-strip--wide { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 560px) {
  .lifestyle-strip,
  .lifestyle-strip--wide { grid-template-columns: 1fr; }
  .lifestyle-strip__item { aspect-ratio: 16 / 10; }
}

/* ──────────────────────────────────────────────────────────────────────
   Quiz frame final pass — 100% 흰색 강제 (Danny 2026-05-06 #2, #9)
   "WCAG AA 4.5:1 어중간하게 X, 100% 흰색" — rgba(.85/.88) 도 navy 위에서
   여전히 안 보인다는 보고. 이 블록은 모든 quiz-frame 텍스트를 #fff로 강제.
   예외: --color-sun (노란 highlight), badge, 카드 안 dark text (mtx-card는
   이미 light bg + charcoal text이므로 별도 처리).
   ────────────────────────────────────────────────────────────────────── */
.quiz-frame,
.quiz-frame *:not(.mtx-card):not(.mtx-card *):not(.btn):not(.btn *):not(.badge):not([data-keep-color]) {
  color: #fff !important;
}
.quiz-frame .quiz-result__eyebrow,
.quiz-frame .quiz-step__eyebrow,
.quiz-frame [data-tone="sun"] {
  color: var(--color-sun) !important;
}
/* mtx-card는 흰 배경이므로 dark text 보존 */
.quiz-frame .mtx-card,
.quiz-frame .mtx-card * {
  color: var(--color-charcoal);
}
/* 카드 안의 link / strong 강조도 navy 유지 */
.quiz-frame .mtx-card a { color: var(--color-sea); }
.quiz-frame .mtx-card strong { color: var(--color-navy); }
/* alert banner (yellow) 안 텍스트는 navy로 (yellow on white = bad) */
.quiz-frame .alert-banner,
.quiz-frame .alert-banner * { color: var(--color-navy) !important; }

/* ──────────────────────────────────────────────────────────────────────
   Typography quality (Danny 2026-05-06 #1, #4, #16) — widow/orphan 방지
   "한두 자만 다음 줄로 떨어지는" 케이스 방지. 한국어 word-break 규칙.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --balance: pretty;  /* fallback */
}
@supports (text-wrap: pretty) { :root { --balance: pretty; } }
@supports (text-wrap: balance) { :root { --balance: balance; } }

/* 헤드라인은 balance — 라인이 균등하게 */
h1, h2, h3,
.hero__title, .hero__lead,
.cons-hero__title, .cons-hero__lead,
.brand-hero__title, .brand-hero__lead,
.section-head, .pd-hero__title,
.quiz-result__title, .quiz-step__title {
  text-wrap: balance;
  word-break: keep-all;     /* 한국어: 어절 단위로 줄바꿈 */
  overflow-wrap: break-word;
}

/* 서브 텍스트·캡션은 pretty — 마지막 줄 한 글자 widow 방지 */
h4, h5, h6,
.section-sub, .pd-hero__tagline,
.sku-card__char, .feature-item__body,
.nav__sub-link span, .brand-card__char,
.hero__quick-tag, .quick-stat__sub,
p {
  text-wrap: pretty;
  word-break: keep-all;
}

/* 카드 char (4-card row) — 너무 짧은 줄 방지 */
.sku-card__char, .brand-card__char, .value-card p {
  text-wrap: pretty;
  word-break: keep-all;
  hyphens: manual;
}

/* nowrap utility — 브랜드/모델명을 한 줄에 묶기 위한 헬퍼 */
.nowrap { white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────────────
   Cinematic Hero (Danny 2026-05-06 #13) — 영상 full-width 16:9 이상
   "영상을 가로로 길게 한 면을 다 채우는 게 좋을 듯해. 자동 플레이도..."
   현재 MP4 파일이 없으므로 lifestyle 이미지를 cinematic backdrop으로 사용.
   MP4 파일이 도착하면 .hero__cine-bg 안에 <video autoplay muted loop playsinline>
   교체 가능 (markup에 TODO 주석 표기됨).
   ────────────────────────────────────────────────────────────────────── */
.hero--cinematic {
  /* 16:9 ~ 21:9 cinematic — 모바일에서는 컨텐츠 중심 */
  min-height: clamp(540px, 100vh, 920px);
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  /* Full-width breakout — viewport 가로 전체 사용 (Danny 2026-05-06 #15 보강) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
  max-width: 100vw;
  /* 가로 스크롤바 등장 방지 */
  overflow-x: hidden;
}
@media (min-width: 1280px) {
  .hero--cinematic {
    aspect-ratio: 21 / 9;  /* desktop = 시네마틱 */
  }
}
@media (max-width: 768px) {
  .hero--cinematic {
    aspect-ratio: auto;     /* mobile = 비율 무시, min-height 만 */
    min-height: 90vh;
  }
}
.hero--cinematic .hero__bg { display: none; }  /* 기존 gradient bg 숨김 */
.hero__cine-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__cine-bg picture { display: block; width: 100%; height: 100%; }
.hero__cine-image,
.hero__cine-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* §183 (Danny 2026-06-03): 옥대표 세로 라이딩샷 — 인물(머리·상체) 보존 크롭.
   가로 cinematic frame에 세로 사진을 cover 할 때 인물 우측·상단 치우침 보정 +
   채도·대비 약간 ↑ (역광 보정). 데스크탑/모바일 object-position 분리. */
.hero__cine-image--danny {
  /* 인물(헬멧 머리 + 팔 + 상체) = vertical 22~58%, head 우상단 ~60% 가로.
     데스크탑은 가로 cinematic → 세로 좁은 band 만 보이므로 인물 중심(약 32%)에 맞춤. */
  object-position: 60% 32%;
  filter: saturate(1.12) contrast(1.06) brightness(1.02);
}
@media (min-width: 1280px) {
  /* 21:9 = band 더 좁음 → 머리·어깨에 더 바짝 */
  .hero__cine-image--danny { object-position: 60% 30%; }
}
@media (max-width: 768px) {
  /* 모바일 90vh = 사진 비율(0.56)과 거의 동일 → 거의 전체 노출, 살짝 상단 */
  .hero__cine-image--danny { object-position: 58% 26%; }
}
/* §183 (Danny 2026-06-03): about.html 시상식 실적 banner — 모바일 stack. */
@media (max-width: 768px) {
  .about-achievement {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .about-achievement > div {
    padding: 24px 24px 28px !important;
  }
}
.hero__cine-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,26,46,0.30) 0%,
    rgba(6,26,46,0.55) 50%,
    rgba(6,26,46,0.85) 100%
  ),
  linear-gradient(
    90deg,
    rgba(10,37,64,0.70) 0%,
    rgba(10,37,64,0.40) 50%,
    rgba(10,37,64,0.20) 100%
  );
  pointer-events: none;
}
.hero--cinematic .container {
  position: relative;
  z-index: 2;
}
/* Cinematic mode: full-bleed text column instead of split */
.hero__inner--cine {
  position: relative;
  width: 100%;
  max-width: 760px;
  padding: var(--space-24) 0 var(--space-16);
  z-index: 2;
}
.hero__inner--cine .hero__text {
  /* 텍스트가 영상 위에 떠 있는 느낌 — drop-shadow 추가 */
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__inner--cine .hero__title em {
  /* 강조 부분은 sun yellow */
  color: var(--color-sun);
  font-style: normal;
}

/* Reduced motion: keep cinematic image static (no animation) */
@media (prefers-reduced-motion: reduce) {
  .hero__cine-video { display: none; }
}

/* ── Image background utility — Phase 2026-05-07 (Danny audit) ───────────────
   풀폭 배경 이미지 + 어두운 오버레이 + 가독성 확보 패턴.
   적용 섹션: #sports (SPORT-FIRST), 향후 #brands·#persona 검토.
   ──────────────────────────────────────────────────────────────────────── */
.section--bg-image {
  position: relative;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  isolation: isolate;
}
.section--bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,26,46,0.78) 0%, rgba(10,37,64,0.82) 100%);
  z-index: 0;
}
.section--bg-image > .container {
  position: relative;
  z-index: 1;
}
.section--bg-image .section-head__title,
.section--bg-image .section-head__lead,
.section--bg-image .section-head__eyebrow {
  color: #fff;
}
.section--bg-image .section-head__lead { color: rgba(255,255,255,0.88); }
.section--bg-image .section-head__eyebrow { color: rgba(255,255,255,0.70); }
/* SPORT-FIRST 카드 readability (Danny 적발 2026-05-11) ────────────────────────
   이전: rgba(255,255,255,0.08) glass + #fff text — hero overlay 0.78~0.82만
   덮어 bright image area (물·하늘) 가 새어 들어와 contrast 깨짐. 라벨·부제
   washed out. solid-ish white frost (0.96 alpha) + ink text로 전환,
   WCAG AAA (label 16:1 / subtitle ~12:1) 영구 lock. DO_NOT_REVERT §138.
   ────────────────────────────────────────────────────────────────────────── */
.section--bg-image .sport-tile {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.85);
  color: var(--color-ink);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 4px 14px rgba(6,26,46,0.18);
}
.section--bg-image .sport-tile:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--text-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(6,26,46,0.36);
}
.section--bg-image .sport-tile__icon { color: var(--color-sea-dark); }
.section--bg-image .sport-tile__name {
  color: var(--color-ink);
  font-weight: var(--fw-700);
}
.section--bg-image .sport-tile__count {
  color: rgba(10,37,64,0.78);
  font-weight: 500;
}
.section--bg-image .sport-tile:hover .sport-tile__icon { color: var(--color-sun); }
.section--bg-image .sport-tile:hover .sport-tile__name { color: #fff; }
.section--bg-image .sport-tile:hover .sport-tile__count { color: rgba(255,255,255,0.82); }

/* Mobile fallback — 정적 색 (성능) */
@media (max-width: 640px) {
  .section--bg-image {
    background-image: none !important;
    background: linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
  }
  .section--bg-image::before { background: none; }
}

/* ── Wind Baseline Pill / Note — 2026-05-07 (Danny 명시 풍속 분류 framework) ───
   모든 추천 카드 (persona-grid·cons-matrix·quiz result·level/style 카드)에 풍속
   기준 (중풍 11-16 kt) 명시 + ±1 사이즈 fallback 안내 표시. SoT는
   reference_dmj_wind_classification.md, 정책은 DO_NOT_REVERT §66~.
   ──────────────────────────────────────────────────────────────────────── */
.wind-baseline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(31,143,255,0.10);
  color: var(--color-sea-dark);
  border: 1px solid rgba(31,143,255,0.18);
  white-space: nowrap;
  line-height: 1.4;
}
.wind-baseline-pill::before {
  content: "💨";
  font-size: 0.875em;
  filter: grayscale(0.2);
}
.wind-baseline-pill__label {
  font-family: var(--font-sans-kr);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-right: 2px;
}

/* 카드 본문 안의 한 줄 fallback 안내 — 사이즈 ±1 분기 */
.wind-baseline-note {
  display: block;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(255,184,0,0.08);
  border-left: 2px solid rgba(255,184,0,0.45);
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-charcoal);
}
.wind-baseline-note strong {
  color: var(--color-navy);
  font-weight: 700;
}
.wind-baseline-note__row {
  display: block;
}
.wind-baseline-note__row + .wind-baseline-note__row {
  margin-top: 2px;
}

/* matrix card head — pill을 우측에 배치 (weight + style 옆) */
.mtx-card__head .wind-baseline-pill {
  font-size: 0.625rem;
}
.mtx-card .wind-baseline-strip {
  padding: 8px 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* persona-grid block (index.html 4-block) — pill을 num 아래 sub 위에 */
.persona .wind-baseline-pill {
  margin: 6px 0 12px;
}
.persona .wind-baseline-note {
  margin-top: 12px;
  margin-bottom: var(--space-4);
}

/* cons-matrix__head — 섹션 전체 baseline 안내 (모든 카드 공통 표기) */
.cons-matrix__wind-baseline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(31,143,255,0.08);
  border: 1px solid rgba(31,143,255,0.18);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-charcoal);
}
.cons-matrix__wind-baseline strong {
  color: var(--color-navy);
  font-weight: 700;
}
.cons-matrix__wind-baseline__sep {
  color: var(--color-stone);
}

/* 모바일 — pill을 카드 head에서 분리 (좁은 화면에서 wrap) */
@media (max-width: 640px) {
  .mtx-card__head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .cons-matrix__wind-baseline {
    flex-wrap: wrap;
    border-radius: 12px;
    padding: 8px 12px;
  }
}

/* ==========================================================================
   Premium Framework v1 (Phase 1 가시화 — DO_NOT_REVERT §100)
   - .premium-badge       : 잠금 콘텐츠 카드/섹션에 붙는 노란 배지
   - .premium-gate        : fade-out + lock + CTA 오버레이
   - .premium-teaser      : 잠금 콘텐츠의 1-2줄 요약 (보이는 상태)
   - .premium-cta         : 잠금 영역 내 "프리미엄으로 풀 콘텐츠 보기" 버튼
   - 결제 백엔드는 Phase 12 — 본 클래스는 시각 표시만 (DO_NOT_REVERT §101)
   ========================================================================== */

.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-sun);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
.premium-badge::before {
  content: "★";
  font-size: 0.875rem;
  line-height: 1;
}
.premium-badge--plus {
  background: var(--color-navy);
  color: var(--color-sun);
}
.premium-badge--plus::before {
  content: "✦";
}

.premium-teaser {
  position: relative;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,184,0,0.06) 0%, rgba(255,184,0,0.02) 100%);
  border: 1px dashed rgba(255,184,0,0.5);
  border-radius: 12px;
  margin-top: 12px;
}
.premium-teaser__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-charcoal);
}
.premium-teaser__lead strong {
  color: var(--color-navy);
}

.premium-gate {
  position: relative;
  margin-top: 16px;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(245,247,250,0.5) 0%, rgba(255,255,255,0.95) 60%, #fff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.premium-gate__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  background: var(--color-navy);
  color: var(--color-sun);
  border-radius: 999px;
  font-size: 1rem;
}
.premium-gate__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
}
.premium-gate__desc {
  margin: 0 auto 14px;
  max-width: 480px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-slate);
}
.premium-gate .premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-sun);
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.18s ease;
  border: 0;
  cursor: pointer;
}
.premium-gate .premium-cta:hover {
  background: var(--color-sun-dark);
}
.premium-gate .premium-cta::after {
  content: "→";
}

/* 잠긴 카드 = 본문 흐림 + lock 오버레이 */
.premium-locked {
  position: relative;
}
.premium-locked > .premium-locked__body {
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
/* Anchor offset for fragment navigation (sticky header ≈ 80px). DO_NOT_REVERT §120 */
.premium-locked__body[id] {
  scroll-margin-top: 80px;
}
.premium-locked > .premium-gate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 460px);
  margin-top: 0;
  background: var(--color-white);
  box-shadow: 0 16px 48px rgba(10, 37, 64, 0.18);
  border-color: var(--color-stone);
}

@media (max-width: 640px) {
  .premium-gate {
    padding: 20px 14px;
  }
  .premium-locked > .premium-gate {
    width: 92%;
  }
}

/* ==========================================================================
   Glossary Term Link (DO_NOT_REVERT §106)
   - .term-link : 본문 인라인에서 윙포일 용어를 glossary로 link 처리
   - 약어·전문용어의 첫 등장 시 풀이 또는 link 의무 (Danny 명시)
   ========================================================================== */

.term-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
  transition: border-bottom-style 0.15s, color 0.15s;
}
.term-link:hover,
.term-link:focus-visible {
  border-bottom-style: solid;
  color: var(--color-sea);
}
/* 다크 배경 위 (hero) */
.cons-hero .term-link,
.section--dark .term-link,
.glossary-hero .term-link {
  border-bottom-color: rgba(255,255,255,0.55);
}
.cons-hero .term-link:hover,
.section--dark .term-link:hover,
.glossary-hero .term-link:hover {
  color: var(--color-sun);
  border-bottom-color: var(--color-sun);
}

/* ==========================================================================
   v1.6 — find-my-gear 결과 카드 강화 (Danny 명시 2026-05-09, DO_NOT_REVERT §112)
   각 장비 row 우측에 가격, 보드는 사양(volume·dim·weight·권장체중) 노출,
   카드 하단 합계 row, 클릭 시 detail 페이지 사이즈별 anchor jump.
   ========================================================================== */

/* ---- Row items list (1+ items per row, vertical stack) ---- */
.mtx-row__items {
  display: flex; flex-direction: column;
  gap: 6px;
}
.mtx-row__items--accessory {
  display: grid;
  /* §171 v5 (Danny 2026-05-13): ACCESSORY row 영문 brand+model wrap 가독성 정정.
     min 220 → 260 으로 늘려 "Forward WIP WiFLEX Pro Helmet" 같은 긴 영문 한 줄 더 자연스럽게 수용.
     DO_NOT_REVERT §171 v5. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
}
/* §171 v5 — accessory row 내 brand+model 영문 자연스러운 줄바꿈 (단어 단위 wrap). */
.mtx-row__items--accessory .mtx-item__name {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* ---- Single item: name (grow) · spec (subtle) · price (right) ---- */
.mtx-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name price"
    "spec spec";
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.mtx-item:hover {
  background: rgba(31,143,255,0.06);
}
.mtx-item:hover .mtx-item__name {
  color: var(--color-sea);
}
.mtx-item:hover .mtx-item__name strong {
  text-decoration: underline;
}
.mtx-item--missing {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--color-slate); font-style: italic;
}
.mtx-item__name {
  grid-area: name;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 140ms ease;
}
.mtx-item__name strong {
  font-weight: 700;
}
.mtx-item__size {
  display: inline-block;
  font-family: var(--font-sans-en);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-sea-dark);
  margin-left: 4px;
}
.mtx-item__spec {
  grid-area: spec;
  font-size: 0.8125rem;
  color: var(--color-slate);
  line-height: 1.4;
}
.mtx-item__price {
  grid-area: price;
  font-family: var(--font-sans-en);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  white-space: nowrap;
  text-align: right;
}
.mtx-item__price--tbd {
  font-weight: 500;
  font-style: italic;
  color: var(--color-stone);
  font-size: 0.8125rem;
}
.mtx-item__price--est {
  color: var(--color-sea-dark);
  font-weight: 600;
}
.mtx-item__price--est::before {
  content: "≈ ";
  font-weight: 400;
  color: var(--color-stone);
}
/* 가격 잘림 fix (데이빗 2026-06-03): 카드 내부 grid/flex min-width:auto blowout 으로
   콘텐츠(332px)가 카드폭(287px)보다 넓어져 우측 가격(₩)이 잘리던 문제.
   shrink 가능하게 풀어 이름은 wrap, 가격은 nowrap 우측 고정 유지. */
.mtx-card__body { grid-template-columns: minmax(0, 1fr); }
.mtx-row { min-width: 0; }
.mtx-row > * { min-width: 0; }
.mtx-row__val, .mtx-row__items { min-width: 0; }
.mtx-item { min-width: 0; }
.mtx-item__name { min-width: 0; overflow-wrap: anywhere; }
/* 좁은 매트릭스 카드 안에서만 accessory 260px min 을 0 으로 완화 (§171 v5 기본 규칙 불변,
   .mtx-card 컨텍스트 한정 override). 이름 wrap 은 4937~4941 에서 이미 처리. */
.mtx-card .mtx-row__items--accessory { grid-template-columns: minmax(0, 1fr); }

/* ---- Foil alternative ("또는 …") ---- */
.mtx-row__alt {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.mtx-row__alt-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-slate);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* §171 v11 / v11-B — 포일 세트 추천 (세트 1개 / 세트 vs 개별 옵션) */
.mtx-row__set-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--color-slate);
  word-break: keep-all;
  line-height: 1.5;
}
.mtx-row__set-note b { color: var(--color-navy); font-weight: 700; }
.mtx-foil-options__lead {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--color-slate);
  word-break: keep-all;
  line-height: 1.5;
}
/* §186 (알렉스 2026-06-04) — 세트/개별 카드 좌우 2칼럼 → 세로 1칼럼 스택.
   2칼럼 폭에서 제품명이 "Levita / z Free / Series" 식으로 한두 글자씩 깨지는 가독성 회귀 fix.
   카드 순서는 matrix.js DOM 순서: 개별 구성(위) → 세트 구매(아래). 모바일/데스크탑 동일. */
.mtx-foil-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
/* §186 (알렉스 2026-06-04) — 좁은 컨텍스트 제품명 줄바꿈 보강 (글자 단위 break 방지). */
.mtx-foil-opt .mtx-row__items { word-break: keep-all; overflow-wrap: break-word; }
.mtx-foil-opt {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.mtx-foil-opt--set {
  border-color: rgba(255,184,0,0.5);
  background: rgba(255,184,0,0.05);
}
.mtx-foil-opt__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.mtx-foil-opt__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-sun);
  color: var(--color-navy);
}
.mtx-foil-opt__tag--alt {
  background: rgba(10,37,64,0.08);
  color: var(--color-navy);
}
.mtx-foil-opt__price {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-navy);
  white-space: nowrap;
}
.mtx-foil-opt__note {
  margin: 8px 0 0;
  font-size: 0.6875rem;
  color: var(--color-slate);
  word-break: keep-all;
  line-height: 1.5;
}

/* ---- Board tier (1차/2차) — wrap renderItem block ---- */
.mtx-row__val--board { display: flex; flex-direction: column; gap: 8px; }
.mtx-row__val--board .mtx-board-tier {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0;
}
.mtx-row__val--board .mtx-board-tier__label {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-sans-en);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 2px;
}
.mtx-row__val--board .mtx-board-tier--primary .mtx-board-tier__label {
  color: var(--color-navy);
  background: rgba(31,143,255,0.14);
}
.mtx-row__val--board .mtx-board-tier--secondary .mtx-board-tier__label {
  color: var(--color-slate);
  background: var(--color-fog);
  font-weight: 600;
}
.mtx-row__val--board .mtx-board-tier--secondary .mtx-item__name {
  color: var(--color-slate);
  font-weight: 500;
}

/* ---- Summary (합계) row ---- */
.mtx-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 12px;
  padding: 14px 0 4px;
  margin-top: 4px;
  border-top: 2px solid var(--color-navy);
}
.mtx-summary__label {
  font-family: var(--font-sans-kr);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-navy);
}
.mtx-summary__total {
  font-family: var(--font-sans-en);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  text-align: right;
}
.mtx-summary__note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--color-slate);
  text-align: right;
  margin-top: -2px;
}

/* ---- Mobile responsive — 1 col stack with ample tap targets ---- */
@media (max-width: 600px) {
  .mtx-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .mtx-row__label {
    font-size: 0.75rem;
    padding-top: 0;
  }
  .mtx-row__items--accessory {
    grid-template-columns: 1fr;
  }
  .mtx-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "spec"
      "price";
    padding: 10px;
    margin: 0 -10px;
    gap: 2px;
  }
  .mtx-item__price {
    text-align: left;
    font-size: 1rem;
  }
  .mtx-summary {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mtx-summary__total {
    text-align: center;
    font-size: 1.25rem;
  }
  .mtx-summary__note {
    text-align: center;
  }
}

/* ==========================================================================
   v1.7 — 단무지 한자 정체성 박스 (Danny 명시 2026-05-09, DO_NOT_REVERT §122)
   單(단순함) · 武(거침없음) · 智(지혜로움) — #philosophy 섹션 헤딩 위 시각 임팩트
   ========================================================================== */
.philosophy-hanja {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0 auto var(--space-8);
  flex-wrap: wrap;
}
.philosophy-hanja__char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.philosophy-hanja .hanja {
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 900;
  line-height: 1;
  /* DO_NOT_REVERT §131 — 한자 색상은 반드시 --color-ink(#0A2540) 또는 동등한 deep ink.
     절대 --color-sun(노랑)으로 회귀 금지. 노랑은 mist 배경에서 사라짐.
     Belt-and-suspenders: literal fallback + -webkit-text-fill-color override
     로 부모의 gradient/transparent text 효과를 방어. */
  color: #0A2540;
  color: var(--color-ink, #0A2540);
  -webkit-text-fill-color: var(--color-ink, #0A2540);
  background: none;
  opacity: 1;
  visibility: visible;
  letter-spacing: 0;
  /* "무게감 있는 검정" — ink stamp 느낌 강화 */
  text-shadow: 0 2px 14px rgba(10, 37, 64, 0.22);
}
.philosophy-hanja .hanja-meaning {
  font-family: var(--font-sans-kr, 'Pretendard Variable', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-slate, #5A6B7B);
  letter-spacing: 0.12em;
  text-transform: none;
}
@media (max-width: 768px) {
  .philosophy-hanja {
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .philosophy-hanja .hanja {
    font-size: clamp(56px, 12vw, 90px);
  }
  .philosophy-hanja .hanja-meaning {
    font-size: 0.8125rem;
  }
}

/* DO_NOT_REVERT §156 — login/signup shell. Phase 12 백엔드 연동 전 시각만 */
.nav__link--login { padding: 8px 12px; transition: opacity .15s; }
.nav__link--login:hover { opacity: 1; color: var(--color-sun) !important; }
.auth-shell { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: linear-gradient(180deg, #fff 0%, var(--color-mist) 100%); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid rgba(10,37,64,.08); border-radius: 16px; padding: 40px 32px; box-shadow: 0 8px 24px rgba(10,37,64,.06); }
.auth-card h1 { font-size: 26px; margin: 0 0 8px; color: var(--color-navy); font-weight: 800; letter-spacing: -.01em; }
.auth-card p.sub { color: var(--color-slate); font-size: 14px; margin: 0 0 28px; word-break: keep-all; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card input[type=email], .auth-card input[type=password] { width: 100%; padding: 13px 14px; border: 1px solid rgba(10,37,64,.16); border-radius: 10px; font-size: 15px; font-family: inherit; }
.auth-card input:focus { outline: none; border-color: var(--color-sea); }
.auth-card button[type=submit] { background: var(--color-sun); color: var(--color-navy); border: none; padding: 14px; border-radius: 10px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; margin-top: 6px; }
.auth-card button[type=submit]:hover { filter: brightness(1.04); }
.auth-card .auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.auth-card .auth-links a { color: var(--color-sea); text-decoration: none; }
.auth-card .auth-links a:hover { text-decoration: underline; }
.auth-card .auth-sso { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(10,37,64,.08); }
.auth-card .auth-sso button { width: 100%; padding: 11px; border: 1px solid rgba(10,37,64,.16); background: rgba(10,37,64,.03); color: var(--color-slate); border-radius: 8px; font-size: 13px; font-family: inherit; cursor: not-allowed; display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-card .auth-sso button .badge-soon { font-size: 10px; padding: 2px 7px; background: rgba(10,37,64,.1); border-radius: 999px; letter-spacing: 0.04em; }
.auth-card label.terms { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--color-slate); margin-top: 4px; line-height: 1.5; }
.auth-card label.terms input { margin-top: 3px; }
.auth-card label.terms a { color: var(--color-sea); }

/* ==========================================================================
   §162-A — Membership page (site/membership.html)
   10 등급 표 + 팀라이더 3 카드 + 랭킹 + 신청 방법
   ========================================================================== */
.membership-hero { background: linear-gradient(135deg, #061A2E 0%, #0A2540 60%, #112E55 100%); }
.membership-hero .cons-hero__bg-image { opacity: .14; mix-blend-mode: luminosity; }

.membership-section { padding: clamp(56px, 8vw, 96px) 0; }
.membership-section--mist { background: var(--color-mist); }
.membership-section__head { max-width: 64ch; margin: 0 auto var(--space-8); text-align: center; }
.membership-section__title { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); font-weight: 800; color: var(--color-navy); letter-spacing: -0.02em; margin: 0 0 var(--space-3); word-break: keep-all; }
.membership-section__lead { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.7; margin: 0; word-break: keep-all; }

.membership-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; box-shadow: 0 6px 20px rgba(10,37,64,.04); }
.membership-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; min-width: 720px; }
.membership-table th, .membership-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); word-break: keep-all; vertical-align: middle; }
.membership-table thead th { background: var(--color-navy); color: #fff; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; }
.membership-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.membership-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.membership-table tbody td:first-child { font-family: var(--font-sans-en); font-weight: 700; color: var(--color-navy); width: 56px; text-align: center; }
.membership-table tbody td:nth-child(2) { font-weight: 700; color: var(--color-navy); }
.membership-table tbody td.discount { font-family: var(--font-sans-en); font-weight: 800; color: var(--color-sea-dark); }
.membership-table tbody td.discount--zero { color: var(--color-slate); font-weight: 600; }
.membership-table tbody td.discount--mute { color: var(--color-stone); font-weight: 500; }
.membership-table tbody tr.is-team { background: rgba(255,184,0,0.08); }
.membership-table tbody tr.is-team:hover { background: rgba(255,184,0,0.13); }
.membership-table tbody tr.is-team td:nth-child(2)::after { content: "팀"; display: inline-block; margin-left: 8px; font-size: 0.625rem; font-family: var(--font-sans-en); font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--color-sun); color: var(--color-navy); vertical-align: middle; }
.membership-table tbody tr.is-admin { background: rgba(10,37,64,.04); color: var(--color-slate); }
.membership-table tbody tr:last-child td { border-bottom: none; }

.membership-policy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.membership-policy-list li { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; padding-left: 48px; position: relative; font-size: 0.9375rem; line-height: 1.65; color: var(--color-ink); word-break: keep-all; }
.membership-policy-list li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-sun); box-shadow: 0 0 0 4px rgba(255,184,0,.18); }

.team-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .team-cards { grid-template-columns: repeat(3, 1fr); } }
.team-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.team-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,37,64,.08); }
.team-card--core { border-top: 4px solid var(--color-sun); }
.team-card--senior { border-top: 4px solid var(--color-sea); }
.team-card--junior { border-top: 4px solid var(--color-slate); }
.team-card__eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans-en); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-slate); }
.team-card__rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: 0.6875rem; font-weight: 800; font-family: var(--font-sans-en); }
.team-card--core .team-card__rank { background: var(--color-sun); color: var(--color-navy); }
.team-card__title { font-size: 1.375rem; font-weight: 800; color: var(--color-navy); margin: 0; letter-spacing: -0.01em; }
.team-card__sub { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--color-slate); }
.team-card__pill { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--color-mist); font-family: var(--font-sans-en); font-weight: 700; font-size: 0.75rem; color: var(--color-navy); }
.team-card--core .team-card__pill--discount { background: var(--color-sun); color: var(--color-navy); }
.team-card__meta { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.55; }
.team-card__meta li { display: grid; grid-template-columns: 88px 1fr; gap: 8px; color: var(--color-ink); word-break: keep-all; }
.team-card__meta dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate); padding-top: 2px; }
.team-card__meta dd { margin: 0; color: var(--color-ink); }
/* DO_NOT_REVERT §162 v2 — 시니어 ranked 사이즈 sub-list (2위 6.5m / 3위 6.0m / 4위 5.5m). */
.team-card__ranks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.8125rem; }
.team-card__ranks li { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px; align-items: baseline; padding: 4px 8px; background: rgba(63,184,201,0.06); border-radius: 6px; }
.team-card__rank-label { font-family: var(--font-sans-en); font-weight: 800; color: var(--color-sea-dark); font-size: 0.75rem; }
.team-card__rank-price { font-family: var(--font-sans-en); font-weight: 700; color: var(--color-navy); font-size: 0.75rem; white-space: nowrap; }
.team-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 0.8125rem; color: var(--color-sea-dark); font-weight: 600; }
.team-card__foot a { color: inherit; text-decoration: none; }
.team-card__foot a:hover { text-decoration: underline; }

.rank-formula { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; max-width: 800px; margin: 0 auto; }
.rank-formula__code { background: var(--color-navy); color: #E8F1FB; font-family: var(--font-sans-en); font-size: 0.875rem; line-height: 1.7; padding: 18px 20px; border-radius: 10px; overflow-x: auto; margin: 14px 0; }
.rank-formula__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-size: 0.875rem; margin-top: 14px; }
@media (max-width: 600px) { .rank-formula__meta { grid-template-columns: 1fr; } }
.rank-formula__meta dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate); margin-top: 6px; }
.rank-formula__meta dd { margin: 0; color: var(--color-ink); word-break: keep-all; }

.signup-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 14px; max-width: 800px; margin: 0 auto; }
.signup-steps li { counter-increment: step; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px 18px 64px; position: relative; line-height: 1.65; word-break: keep-all; }
.signup-steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-sun); color: var(--color-navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans-en); font-weight: 800; font-size: 0.9375rem; }
.signup-steps li b { color: var(--color-navy); display: block; margin-bottom: 4px; font-size: 0.9375rem; }
.signup-steps li span { font-size: 0.875rem; color: var(--text-secondary); }

.membership-cta { text-align: center; }
.membership-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-6); }

/* DO_NOT_REVERT §163 — 4-card 한 줄 정책 (Danny 2026-05-12)
   4개 카드는 항상 한 줄에 들어가도록. auto-fit + minmax 으로 4번째 카드 외로 떨어지는 패턴 회귀 영구 금지. */
.brand-identity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.brand-identity-grid > div {
  padding: 22px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f5f7fa);
  border: 1px solid rgba(10, 37, 64, 0.08);
}
@media (max-width: 1024px) {
  .brand-identity-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
  .brand-identity-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* 4-card 일반 유틸리티 클래스 — 다른 페이지에서도 동일 패턴 사용 */
.grid-4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 1024px) {
  .grid-4cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid-4cols { grid-template-columns: 1fr; }
}
/* 3-card 유틸리티 — 한 줄 3 카드 */
.grid-3cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 768px) {
  .grid-3cols { grid-template-columns: 1fr; }
}

/* DO_NOT_REVERT §165 v2 — Phase B 10-axis skill assessment page (skill-assessment.html).
   5 skills (토우/힐 택킹·토/힐 자이빙·점핑) × Port/Starboard = 10 axes pentagon.
   5-level 한국어 등급 (매우 불안정 2 / 불안정 4 / 보통 6 / 안정적 8 / 매우 안정적 10) — 100점 만점.
   Speed 5 zones (입문 0-15 / 중급 16-22 / 상급 23-28 / 선수 29-32 / 선수 33+).
   Weakness 카드 = 육상·해상 분리.
   ⛔ Wave/Downwind 5-skill v1 set 영구 폐기.
   SoT: project_dmj_phase_b_skill_assessment.md / reference_dmj_10axis_skill_taxonomy.md / reference_dmj_skill_training_programs.md. */
.skill-page { background: linear-gradient(180deg, var(--color-mist) 0%, #fff 60%); padding: 40px 0 80px; }
.skill-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 900px) { .skill-layout { grid-template-columns: 1fr; gap: 28px; } }
.skill-pentagon-wrap { position: sticky; top: 24px; align-self: start; background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 8px 24px rgba(10,37,64,0.08); }
@media (max-width: 900px) { .skill-pentagon-wrap { position: static; } }
/* DO_NOT_REVERT §165 v6 — Danny 2026-05-13: viewBox 440×320 (좌우 +70px label 공간). aspect-ratio 1.375. */
.skill-pentagon { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1.375; display: block; margin: 0 auto; }
.skill-pentagon__ring { fill: none; stroke: rgba(10,37,64,0.08); stroke-width: 1; }
.skill-pentagon__axis { stroke: rgba(10,37,64,0.12); stroke-width: 1; }
.skill-pentagon__poly { fill: var(--color-sun); fill-opacity: 0.28; stroke: var(--color-sun); stroke-width: 2; stroke-linejoin: round; transition: points 0.25s ease; }
.skill-pentagon__label { font-size: 11px; font-weight: 700; fill: var(--color-navy); font-family: var(--font-sans-en, 'Inter', sans-serif); letter-spacing: 0.04em; }
@media (max-width: 540px) {
  .skill-pentagon__label { font-size: 10px; letter-spacing: 0.02em; }
}
.skill-pentagon__label--p { fill: var(--color-sea); }
.skill-pentagon__label--s { fill: var(--color-grass, #2A8C5C); }
.speed-gauge { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(10,37,64,0.08); }
/* DO_NOT_REVERT §165 v4-B (Danny 2026-05-12 v1) — Speed 5-zone canonical: ≤10 입문 / 11-18 초급 / 19-25 중급 / 26-30 상급 / 31+ 선수.
   gauge scale 0-40 kt (31+ = 75-100%, ~25% 선수 영역). 이전 (≤12/≤19/≤24/≤29/30+, ≤22 등) 영구 폐기. */
.speed-gauge__bar { position: relative; height: 10px; border-radius: 5px; margin: 16px 0 30px;
  background: linear-gradient(90deg,
    #4ade80 0%, #4ade80 25%,
    #67e8f9 25%, #67e8f9 45%,
    #3FB8C9 45%, #3FB8C9 62.5%,
    #FF8A3D 62.5%, #FF8A3D 75%,
    #FFB800 75%, #FFB800 100%);
}
.speed-gauge__pointer { position: absolute; top: -6px; width: 4px; height: 22px; background: var(--color-navy); border-radius: 2px; transform: translateX(-50%); transition: left 0.2s ease; }
/* Default flex distribution (backward compat) */
.speed-gauge__meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--color-slate); font-weight: 600; word-break: keep-all; }
/* §165 v4-B 절대 위치 라벨 — gradient stop 와 정확 정렬 (Danny "라벨 균등 정돈" 지시) */
.speed-gauge__meta--abs { display: block; position: relative; height: 22px; margin-top: 4px; }
.speed-gauge__meta--abs span { position: absolute; transform: translateX(-50%); font-size: 14px; font-weight: 700; color: var(--color-navy); white-space: nowrap; letter-spacing: -0.005em; }
.speed-gauge__meta--abs span:first-child { transform: translateX(0); }
.speed-gauge__meta--abs span:last-child { transform: translateX(-100%); }
@media (max-width: 540px) {
  .speed-gauge__meta--abs span { font-size: 12px; font-weight: 600; }
  .speed-gauge__meta--abs { height: 20px; }
}
.speed-gauge__current { font-size: 16px; font-weight: 800; color: var(--color-navy); }
.skill-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (max-width: 540px) { .skill-sliders { grid-template-columns: 1fr; } }
.skill-slider-row { background: #fff; border-radius: 12px; padding: 16px 18px; border: 1px solid rgba(10,37,64,0.08); }
.skill-slider-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 10px; }
.skill-slider-row__name { font-size: 14px; font-weight: 700; color: var(--color-navy); }
.skill-slider-row__tack { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; margin-left: 6px; }
.skill-slider-row__tack--p { background: rgba(31,143,255,0.12); color: var(--color-sea); }
.skill-slider-row__tack--s { background: rgba(42,140,92,0.12); color: #2A8C5C; }
.skill-slider-row__value { font-family: var(--font-sans-en, 'Inter', sans-serif); font-size: 20px; font-weight: 800; color: var(--color-sun); }
/* §169-D v3 패턴 — 슬라이더 빨강→초록 그라데이션 fill (만족도 척도).
   채움 = 현재 레벨 단색 (매우불만족 빨강 ~ 매우만족 초록), 나머지 회색 #E5E7EB.
   JS (paintSlider) 가 inline background 로 갱신. 아래는 fallback (보통=노랑). */
.skill-slider-row input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #FBBF24 0%, #FBBF24 60%, #E5E7EB 60%, #E5E7EB 100%);
  outline: none;
  margin: 8px 0 4px;
  transition: background 0.15s ease;
}
.skill-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 37, 64, 0.3);
  cursor: pointer;
}
.skill-slider-row input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 37, 64, 0.3);
  cursor: pointer;
}
.skill-slider-row__desc { font-size: 12px; color: var(--color-slate); margin-top: 6px; line-height: 1.5; min-height: 32px; word-break: keep-all; }
.speed-input-row { background: #fff; border-radius: 12px; padding: 16px 18px; border: 1px solid rgba(10,37,64,0.08); margin-top: 18px; }
.speed-input-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.speed-input-row input[type=number] { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(10,37,64,0.16); font-size: 16px; font-family: inherit; }
.skill-weakness { background: var(--color-navy); color: #fff; border-radius: 16px; padding: 32px; margin-top: 40px; }
.skill-weakness h2 { font-size: 22px; margin: 0 0 8px; color: #fff; }
.skill-weakness__lead { color: rgba(255,255,255,0.78); font-size: 14px; margin-bottom: 24px; line-height: 1.6; word-break: keep-all; }
.skill-weakness__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) { .skill-weakness__cards { grid-template-columns: 1fr; } }
.skill-weakness-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 18px 20px; }
.skill-weakness-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--color-sun); }
.skill-weakness-card__sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.skill-weakness-card__row { font-size: 13px; margin: 6px 0; line-height: 1.5; color: rgba(255,255,255,0.88); word-break: keep-all; }
.skill-weakness-card__row b { color: var(--color-sun); font-weight: 700; }
.skill-weakness-card a { color: #3FB8C9; text-decoration: none; }
.skill-weakness-card a:hover { color: var(--color-sun); }
.skill-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
/* §165 v2: 100점 만점 + 종합 레벨 prominent display */
.score-display { background: linear-gradient(135deg, var(--color-navy) 0%, #133961 100%); color: #fff; border-radius: 14px; padding: 18px 22px; margin: 0 0 22px; box-shadow: 0 6px 18px rgba(10,37,64,0.12); }
.score-display__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.score-display__label { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.score-display__value { font-family: var(--font-sans-en, 'Inter', sans-serif); font-size: 48px; font-weight: 900; color: var(--color-sun); line-height: 1; letter-spacing: -0.02em; }
.score-display__max { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.5); }
.score-display__tier { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.72); display: flex; align-items: center; gap: 10px; }
.tier-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; background: var(--color-slate); color: #fff; transition: background 0.2s ease; min-width: 64px; text-align: center; }
@media (max-width: 540px) { .score-display__value { font-size: 38px; } }
/* §165 v2: 약점 카드 육상·해상 분리 sub-section */
.training-block { background: rgba(255,255,255,0.05); border-left: 3px solid var(--color-sea); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.training-block--land { border-left-color: #4ade80; background: rgba(74,222,128,0.06); }
.training-block--water { border-left-color: #3FB8C9; background: rgba(63,184,201,0.08); }
.training-block__tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.training-block--land .training-block__tag { background: rgba(74,222,128,0.2); color: #86efac; }
.training-block--water .training-block__tag { background: rgba(63,184,201,0.22); color: #67E8F9; }
.training-block strong { display: block; font-size: 13px; color: #fff; font-weight: 700; margin: 2px 0 4px; line-height: 1.4; word-break: keep-all; }
.training-block p { font-size: 12px; color: rgba(255,255,255,0.78); line-height: 1.5; margin: 0 0 6px; word-break: keep-all; }
.training-block__meta { display: inline-block; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ==========================================================================
   DO_NOT_REVERT §169 — Day 1B profile + My Gear
   sprint shim localStorage auth + profile.html (10 sections) + gear card form
   ========================================================================== */
.auth-error { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); color: #b91c1c; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; word-break: keep-all; line-height: 1.5; }
/* §179 — 비밀번호 재설정 완료 메시지 (password-reset.html) */
.auth-success { background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.28); color: #15803d; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; word-break: keep-all; line-height: 1.55; text-align: center; font-weight: 600; }

.profile-page { padding: 40px 0 80px; background: linear-gradient(180deg, var(--color-mist) 0%, #fff 60%); }
.profile-page .container { max-width: 960px; }
.profile-section { background: #fff; border: 1px solid rgba(10,37,64,0.08); border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(10,37,64,0.04); }
.profile-section__title { font-size: 18px; font-weight: 800; color: var(--color-navy); margin: 0 0 16px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-section__title small { font-size: 12px; font-weight: 600; color: var(--color-slate); letter-spacing: 0; }
.profile-section__lead { font-size: 13px; color: var(--color-slate); margin: -8px 0 16px; line-height: 1.6; word-break: keep-all; }

.profile-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.profile-hero__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--color-mist); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--color-navy); overflow: hidden; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(10,37,64,0.08); position: relative; }
.profile-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* DO_NOT_REVERT §169-N v5-D — Danny 2026-05-13: hero photo 클릭하여 사진 수정.
   §B section 자동 hide (avatar 있을 때). hover 시 ✏️ overlay + opacity dim. */
.profile-hero__avatar--editable { padding: 0; cursor: pointer; font-family: inherit; }
.profile-hero__avatar--editable:hover { box-shadow: 0 6px 16px rgba(10,37,64,0.14); }
.profile-hero__avatar--editable:hover img,
.profile-hero__avatar--editable:hover > span:not(.profile-hero__avatar-edit) { opacity: 0.55; transition: opacity 0.15s; }
.profile-hero__avatar-edit { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-sun); color: var(--color-navy); display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.profile-hero__avatar--editable:hover .profile-hero__avatar-edit { opacity: 1; }
@media (hover: none) {
  /* On touch devices, show edit icon always (subtle) for discovery */
  .profile-hero__avatar-edit { opacity: 0.85; }
}
.profile-hero__body { flex: 1; min-width: 200px; }
.profile-hero__greeting { font-size: 20px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; letter-spacing: -0.01em; word-break: keep-all; }
.profile-hero__tier { display: inline-block; padding: 4px 12px; background: var(--color-mist); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--color-navy); letter-spacing: 0.02em; }
.profile-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-hero__btn { background: transparent; border: 1px solid rgba(10,37,64,0.16); color: var(--color-navy); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.profile-hero__btn:hover { background: var(--color-mist); }
.profile-hero__btn--logout { color: #b91c1c; border-color: rgba(185,28,28,0.25); }
.profile-hero__btn--logout:hover { background: rgba(185,28,28,0.06); }

.profile-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .profile-form { grid-template-columns: 1fr; } }
.profile-field { display: flex; flex-direction: column; gap: 4px; }
.profile-field--full { grid-column: 1 / -1; }
.profile-field__label { font-size: 12px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.02em; }
.profile-field input, .profile-field select, .profile-field textarea { padding: 10px 12px; border: 1px solid rgba(10,37,64,0.16); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.profile-field input:focus, .profile-field select:focus, .profile-field textarea:focus { outline: none; border-color: var(--color-sea); }
.profile-form__actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.profile-save-btn { background: var(--color-sun); color: var(--color-navy); border: none; padding: 10px 22px; border-radius: 8px; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; }
.profile-save-btn:hover { filter: brightness(1.04); }
.profile-save-status { font-size: 12px; color: var(--color-slate); font-weight: 600; }
.profile-save-status.is-ok { color: #2A8C5C; }

.avatar-upload { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-upload__preview { width: 96px; height: 96px; border-radius: 50%; background: var(--color-mist); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--color-navy); overflow: hidden; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(10,37,64,0.08); }
.avatar-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload__hint { font-size: 12px; color: var(--color-slate); line-height: 1.5; word-break: keep-all; }
.avatar-upload__file { font-size: 13px; }

.video-placeholder { background: var(--color-mist); border: 2px dashed rgba(10,37,64,0.18); border-radius: 12px; padding: 36px 20px; text-align: center; color: var(--color-slate); }
.video-placeholder__title { font-size: 14px; font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.video-placeholder__sub { font-size: 12px; margin: 0; }

/* DO_NOT_REVERT §169-H v3 — Danny 2026-05-12: My Gear 카드 fixed 2-col grid + "+ 장비 추가" 도 grid item.
   §169-H v2 (auto-fit + minmax 420px) 영구 폐기 — single entry 또는 좁은 viewport 에서 1-col fallback 회귀 발생.
   v3 = fixed 2-col on desktop (≥768px), 1-col on mobile. 1개 entry 도 desktop 에서 half-width 의무.
   `.gear-section-grid` 래퍼가 grid container. `#gear-list { display: contents }` 로 카드가 wrapper grid 에 참여.
   결과: 0 card + add btn = add btn col 1만 / 1 card + add btn = pair (col 1, col 2) / 2+ cards = 자연 grid. */
.gear-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .gear-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#gear-list { display: contents; }
#gear-list[hidden] { display: none; }
#gear-list .gear-card { margin-bottom: 0; }
.gear-section-grid .gear-add-btn { margin: 0; }
/* §169-N v3 — controls row spans full grid width (sits above gear cards). */
.gear-section-grid .gear-list-controls { grid-column: 1 / -1; margin-bottom: 0; }

.gear-card { border: 1px solid rgba(10,37,64,0.12); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; background: linear-gradient(135deg, #fff 0%, #fafbfc 100%); position: relative; }
.gear-card__remove { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: var(--color-slate); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; }
.gear-card__remove:hover { color: #dc2626; }
.gear-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 768px) { .gear-grid { grid-template-columns: 1fr; } }
.gear-field { display: flex; flex-direction: column; gap: 4px; }
.gear-field--full { grid-column: 1 / -1; }
.gear-field__label { font-size: 12px; font-weight: 700; color: var(--color-slate); }
.gear-field input, .gear-field select { padding: 8px 10px; border: 1px solid rgba(10,37,64,0.16); border-radius: 8px; font-size: 14px; font-family: inherit; }
.gear-slider-row { grid-column: span 2; padding-top: 6px; }
@media (max-width: 768px) { .gear-slider-row { grid-column: span 1; } }
.gear-slider-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.gear-slider-row__label { font-size: 12px; font-weight: 700; color: var(--color-slate); }
.gear-slider-row__value { font-size: 14px; font-weight: 700; color: var(--color-sun); margin-left: 6px; }
.gear-slider-row input[type=range] { width: 100%; accent-color: var(--color-sun); }
.gear-slider-row__ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-slate); margin-top: 4px; }
.gear-usage-badge { display: inline-block; padding: 4px 10px; background: var(--color-mist); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--color-navy); }

/* DO_NOT_REVERT §169-N v3 — Danny 2026-05-13: My Gear 대시보드 6 시각화 + 5 stats row.
   2×3 chart grid (donut + 5 bars + gauge) + 5-col stats row 분리.
   §169-N v2 (4 chart, stats inside chart card) 회귀 영구 X. gear ≥ 1 시 노출. vanilla SVG (외부 dep X). */
.gear-dashboard {
  background: linear-gradient(135deg, rgba(10,37,64,0.03) 0%, rgba(63,184,201,0.04) 100%);
  border: 1px solid rgba(10,37,64,0.08);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.gear-dashboard__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gear-dashboard__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--color-navy); letter-spacing: -0.01em; }
.gear-dashboard__sub { font-size: 13px; color: var(--color-slate); font-weight: 700; }
.gear-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .gear-dashboard__grid { grid-template-columns: 1fr; }
}
.gear-dash-card {
  background: #fff;
  border: 1px solid rgba(10,37,64,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.gear-dash-card__title { margin: 0; font-size: 12px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.04em; text-transform: uppercase; }
.gear-dash-card__viz { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; }
.gear-dash-card__viz svg { display: block; max-width: 100%; height: auto; }
.gear-dash-card--bar .gear-dash-card__viz { align-items: stretch; justify-content: flex-start; gap: 4px; }

/* Donut legend */
.gear-dash-card__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; }
.gear-dash-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-navy); }
.gear-dash-legend__item b { font-weight: 800; }
.gear-dash-legend__dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Bar rows (brand count / brand fn / sku fn / sku cond)
   DO_NOT_REVERT §169-N v5-A v3 (Danny 2026-05-13) — vertical spacing 조밀화.
   padding 4→2 + gap 12→8 + row gap 16→6. "✏️ 클릭하여 수정" 힌트 영구 제거. */
.gear-dash-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 38%) 1fr 38px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--color-navy);
  padding: 2px 0;
}
.gear-dash-bar-row__label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-dash-bar-row__track { background: rgba(10,37,64,0.06); border-radius: 999px; height: 8px; overflow: hidden; }
.gear-dash-bar-row__fill { background: linear-gradient(90deg, var(--color-sea) 0%, var(--color-sun) 100%); height: 100%; border-radius: 999px; transition: width 0.15s ease, background 0.15s ease; }
/* DO_NOT_REVERT §169-N v5-A v2 — Danny 2026-05-13: bar 자체가 click+drag slider.
   separate <input type="range"> 컴포넌트 (v5/v5-A) 영구 폐기 — 창 늘어남 + 가독성 깨짐 회귀 X.
   bar track 영역 자체에 mousedown/touchstart → drag → 5-step quantize → live fill → save. */
.gear-dash-bar-row--editable { cursor: pointer; touch-action: none; }
.gear-dash-bar-row--editable .gear-dash-bar-row__track { cursor: pointer; min-height: 14px; padding: 3px 0; background-clip: content-box; }
.gear-dash-bar-row--editable:hover .gear-dash-bar-row__fill { filter: brightness(1.08); }
.gear-dash-bar-row--editable:active .gear-dash-bar-row__fill { filter: brightness(1.12); }
/* §169-N v5-A v3: __edit icon class 영구 폐기. style 잔존 회귀 가드 — display:none 강제. */
.gear-dash-bar-row__edit { display: none !important; }
.gear-dash-bar-row.is-editing { background: rgba(255,184,0,0.06); border-radius: 6px; }
.gear-dash-bar-row.is-editing .gear-dash-bar-row__fill { transition: none; }
@media (max-width: 540px) {
  .gear-dash-bar-row--editable .gear-dash-bar-row__track { min-height: 18px; padding: 5px 0; }
}

/* DO_NOT_REVERT §169-N v5-B — Danny 2026-05-13: §A 기본 정보 compact dashboard.
   form 그대로 펼친 상태 default 회귀 영구 X. 첫 진입 (data 없음) 에만 form expanded. */
.info-compact {
  background: linear-gradient(135deg, rgba(10,37,64,0.03) 0%, rgba(63,184,201,0.05) 100%);
  border: 1px solid rgba(10,37,64,0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* DO_NOT_REVERT §169-N v5-E — Danny 2026-05-13: §A horizontal one-line flow.
   vertical stack 회귀 영구 X (데스크탑). 모바일 ≤540px = 자연 wrap (2-3줄 stack OK). */
.info-compact__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  color: var(--color-ink);
  line-height: 1.55;
  word-break: keep-all;
}
.info-compact__name-inline {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}
.info-compact__seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.info-compact__seg--chips { gap: 4px; }
.info-compact__sep {
  color: rgba(10,37,64,0.35);
  font-weight: 600;
  user-select: none;
}
@media (max-width: 540px) {
  .info-compact__flow { font-size: 13px; gap: 4px 8px; }
  .info-compact__name-inline { font-size: 15px; }
  /* 모바일에서 chip seg 는 줄바꿈 자연스럽게 — sep 숨김 X (UX 일관) */
}
.info-compact__head { display: flex; align-items: center; gap: 14px; }
/* §169-N v5-C: photo 중복 노출 제거 — §A compact 에서 avatar 빼고 name 단독 (큰 글자). DO_NOT_REVERT. */
.info-compact__head--noavatar { gap: 0; }
.info-compact__head--noavatar .info-compact__name { font-size: 22px; font-weight: 800; }
@media (max-width: 540px) {
  .info-compact__head--noavatar .info-compact__name { font-size: 19px; }
}
.info-compact__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-sun) 0%, #f59e0b 100%);
  color: var(--color-navy);
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.info-compact__avatar img { width: 100%; height: 100%; object-fit: cover; }
.info-compact__avatar--default { /* gradient default already applied */ }
.info-compact__name {
  font-size: 18px; font-weight: 800; color: var(--color-navy); letter-spacing: -0.01em;
}
.info-compact__row {
  font-size: 14px; color: var(--color-ink); line-height: 1.6; word-break: keep-all;
}
.info-compact__row--stats {
  font-weight: 600; color: var(--color-navy);
}
.info-compact__exp { font-size: 12px; color: var(--color-slate); margin-left: 4px; }
.info-compact__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-slate);
}
.info-compact__chips-label {
  font-weight: 700; color: var(--color-slate); font-size: 12px; margin-right: 4px;
}
.info-compact__chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,184,0,0.18);
  color: var(--color-navy);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.info-compact__chip--spot { background: rgba(63,184,201,0.18); }
@media (max-width: 540px) {
  .info-compact { padding: 14px 16px; }
  .info-compact__avatar { width: 40px; height: 40px; font-size: 16px; }
  .info-compact__name { font-size: 16px; }
}
.gear-dash-bar-row__count { font-weight: 800; font-family: 'Inter', sans-serif; text-align: right; font-size: 12px; }
.gear-dash-bar-row--more { color: var(--color-slate); font-size: 11px; font-style: italic; grid-template-columns: 1fr; text-align: center; }
/* §185 (데이빗 2026-06-04) — "+N 제품 더" 클릭 펼치기 버튼화 */
.gear-dash-bar-row--more-btn {
  display: block; width: 100%;
  background: none; border: 0; font: inherit; font-size: 11px; font-style: italic;
  color: var(--color-sea-dark); cursor: pointer; padding: 6px 0;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.gear-dash-bar-row--more-btn:hover { background: rgba(31, 143, 255, 0.07); color: var(--color-sea); text-decoration: underline; }

/* Gauge label below */
.gear-dash-gauge-label { margin: 6px 0 0; font-size: 13px; color: var(--color-navy); text-align: center; }
.gear-dash-gauge-label b { font-weight: 800; }

/* §169-N v3 — Stats row: 5 cards below the 6 chart grid (separate, full width). */
.gear-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .gear-dashboard__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .gear-dashboard__stats { grid-template-columns: 1fr 1fr; }
}
.gear-dash-stat {
  background: #fff;
  border: 1px solid rgba(10,37,64,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 70px;
  justify-content: center;
}
.gear-dash-stat__value { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 900; color: var(--color-navy); line-height: 1.1; }
.gear-dash-stat__value small { font-size: 12px; font-weight: 700; color: var(--color-slate); margin-left: 2px; }
.gear-dash-stat__label { font-size: 11px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.02em; word-break: keep-all; }
.gear-dash-stat--empty { background: rgba(63,184,201,0.06); }
.gear-dash-stat__cta { font-size: 12px; font-weight: 700; color: var(--color-sea); text-decoration: none; line-height: 1.3; word-break: keep-all; }
.gear-dash-stat__cta:hover { text-decoration: underline; }

.gear-dash-empty { margin: 0; color: var(--color-slate); font-size: 13px; text-align: center; }

/* §192 (알렉스 2026-06-04) — My Gear 대시보드 모바일(≤540px) 가독성 축소.
   옥대표님 지시: 모바일 차트 사이즈 대폭 축소 + 카드 패딩/폰트 축소 + 컴팩트 배치.
   데스크탑(>540px) 모양 불변 — 이 블록은 ≤540px 미디어쿼리 안에만 존재. §185 +N 버튼 보존. */
@media (max-width: 540px) {
  .gear-dashboard { padding: 12px 12px; margin-bottom: 16px; }
  .gear-dashboard__head { margin-bottom: 10px; }
  .gear-dashboard__title { font-size: 15px; }
  .gear-dashboard__sub { font-size: 11px; }
  .gear-dashboard__grid { gap: 8px; }
  .gear-dash-card { padding: 10px 12px; min-height: 0; gap: 6px; border-radius: 10px; }
  .gear-dash-card__title { font-size: 10px; }
  /* 차트 자체 축소 — donut 160→112px, gauge 160×100→120×75 (viewBox scale) */
  .gear-dash-card--donut .gear-dash-card__viz svg { width: 112px; height: 112px; }
  .gear-dash-card--gauge .gear-dash-card__viz svg { width: 120px; height: 75px; }
  .gear-dash-card__legend { gap: 4px 10px; }
  .gear-dash-legend__item { font-size: 11px; }
  .gear-dash-legend__dot { width: 8px; height: 8px; }
  .gear-dash-gauge-label { font-size: 11px; margin-top: 4px; }
  /* bar row — 라벨 잘림 없이 좁은 폭에서도 3열 유지 (라벨 비중 ↑ / count 폭 ↓) */
  .gear-dash-bar-row { grid-template-columns: minmax(72px, 42%) 1fr 30px; gap: 6px; font-size: 11px; padding: 1px 0; }
  .gear-dash-bar-row__track { height: 6px; }
  .gear-dash-bar-row__count { font-size: 11px; }
  .gear-dash-bar-row--more-btn { font-size: 10px; padding: 4px 0; }
  /* stats — 2열 유지(기존) + 카드 자체 컴팩트 */
  .gear-dashboard__stats { gap: 6px; margin-top: 10px; }
  .gear-dash-stat { padding: 8px 10px; min-height: 54px; gap: 2px; }
  .gear-dash-stat__value { font-size: 17px; }
  .gear-dash-stat__value small { font-size: 10px; }
  .gear-dash-stat__label { font-size: 10px; }
  .gear-dash-stat__cta { font-size: 11px; }
}

/* §169-N v3 — gear list collapsed by default on return visit. toggle button styling. */
.gear-list-controls { margin-bottom: 12px; }
.gear-list-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(10,37,64,0.16);
  color: var(--color-navy);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gear-list-toggle:hover { border-color: var(--color-sea); color: var(--color-sea); }
.gear-list-toggle__caret { font-size: 12px; transition: transform 0.2s ease; }
.gear-list-toggle.is-expanded { background: rgba(63,184,201,0.08); border-color: var(--color-sea); color: var(--color-sea); }
/* DO_NOT_REVERT §169-M — Danny 2026-05-13: <input type="month"> 폐기 → 2-dropdown (연도 + 월). 모바일 친화 native select. */
.month-year-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.month-year-picker select { padding: 8px 10px; border: 1px solid rgba(10,37,64,0.16); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.gear-add-btn { background: transparent; border: 1.5px dashed rgba(10,37,64,0.25); color: var(--color-navy); padding: 12px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; width: 100%; }
.gear-add-btn:hover { border-color: var(--color-sea); color: var(--color-sea); }
.gear-empty { text-align: center; padding: 24px; color: var(--color-slate); font-size: 14px; }

.progress-bar { background: var(--color-mist); height: 8px; border-radius: 999px; overflow: hidden; margin: 10px 0 14px; }
.progress-bar__fill { background: linear-gradient(90deg, var(--color-sea) 0%, var(--color-sun) 100%); height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-navy); font-weight: 600; }
.progress-row b { color: var(--color-navy); }

.tier-progress__lead { font-size: 13px; color: var(--color-slate); line-height: 1.6; margin: 0 0 6px; word-break: keep-all; }
.tier-progress__next { font-size: 13px; color: var(--color-navy); font-weight: 700; word-break: keep-all; }

.training-progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .training-progress-grid { grid-template-columns: 1fr; } }
.training-progress-card { background: var(--color-mist); border-radius: 10px; padding: 16px 18px; }
.training-progress-card h4 { font-size: 14px; font-weight: 800; color: var(--color-navy); margin: 0 0 8px; }
.training-progress-card select { width: 100%; padding: 8px 10px; border: 1px solid rgba(10,37,64,0.16); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.training-progress-card__sub { font-size: 11px; color: var(--color-slate); margin: 6px 0 0; line-height: 1.5; }

.empty-state { text-align: center; padding: 28px 20px; color: var(--color-slate); }
.empty-state__lead { font-size: 14px; margin: 0 0 12px; word-break: keep-all; }
.empty-state .btn { display: inline-block; }

.fmg-archive-list { display: flex; flex-direction: column; gap: 10px; }
.fmg-archive-item { background: var(--color-mist); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.fmg-archive-item__date { font-weight: 700; color: var(--color-navy); }
.fmg-archive-item__sum { color: var(--color-slate); font-size: 12px; }

/* DO_NOT_REVERT §169-N v3 — Danny 2026-05-13: §E/§F/§G 대시보드 + 자세히 보기 토글 패턴.
   §D 의 gear-dashboard 와 동일한 visual 모델 — compact mini-view → 토글 → expanded detail.
   3 sections share the same .dash-section wrapper + delegated click handler. */
.dash-section { display: flex; flex-direction: column; gap: 12px; }
.dash-section__compact {
  background: #fff;
  border: 1px solid rgba(10,37,64,0.08);
  border-radius: 12px;
  padding: 18px 20px;
}
.dash-section__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(10,37,64,0.16);
  color: var(--color-navy);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dash-section__toggle:hover { border-color: var(--color-sea); color: var(--color-sea); }
.dash-section.is-expanded .dash-section__toggle { background: rgba(63,184,201,0.08); border-color: var(--color-sea); color: var(--color-sea); }
.dash-section__expanded {
  background: var(--color-mist);
  border-radius: 12px;
  padding: 18px 20px;
}

/* §E — Mini pentagon + score + stats */
.mini-pentagon { width: 160px; height: 160px; }
.skill-compact-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 540px) {
  .skill-compact-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.skill-compact-grid__viz { display: flex; align-items: center; justify-content: center; }
.skill-compact-grid__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.skill-compact-grid__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 540px) { .skill-compact-grid__head { justify-content: center; } }
.skill-compact-grid__score {
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 900;
  color: var(--color-sun);
  line-height: 1;
}
.skill-compact-grid__score span {
  font-size: 14px;
  color: var(--color-slate);
  font-weight: 700;
  margin-left: 2px;
}
.tier-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.skill-compact-grid__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 640px) { .skill-compact-grid__stats { grid-template-columns: repeat(2, 1fr); } }
.skill-stat {
  background: var(--color-mist);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.skill-stat__label { font-size: 10px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.02em; word-break: keep-all; }
.skill-stat__value { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--color-navy); }

/* Skill empty-state row (greyed pentagon + body) */
.dash-empty-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 540px) { .dash-empty-row { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.dash-empty-row__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 540px) { .dash-empty-row__body { align-items: center; } }

/* §F — FMG compact stats + timeline */
.fmg-compact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { .fmg-compact-stats { grid-template-columns: 1fr; } }
.fmg-stat-card {
  background: var(--color-mist);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fmg-stat-card__value {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-navy);
  line-height: 1.2;
  word-break: keep-all;
}
.fmg-stat-card__value--sm { font-size: 14px; font-weight: 800; }
.fmg-stat-card__label { font-size: 11px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.02em; }

.fmg-timeline { display: flex; flex-direction: column; gap: 6px; }
.fmg-timeline-row {
  display: grid;
  grid-template-columns: 56px 1fr 80px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.fmg-timeline-row__date { color: var(--color-slate); font-weight: 700; font-size: 11px; }
.fmg-timeline-row__track { background: rgba(10,37,64,0.06); border-radius: 999px; height: 8px; overflow: hidden; }
.fmg-timeline-row__fill { background: linear-gradient(90deg, var(--color-sea) 0%, var(--color-sun) 100%); height: 100%; border-radius: 999px; }
.fmg-timeline-row__amt { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--color-navy); text-align: right; font-size: 12px; }
.fmg-timeline-row--empty .fmg-timeline-row__date,
.fmg-timeline-row--empty .fmg-timeline-row__amt { color: rgba(10,37,64,0.30); }
.fmg-timeline--placeholder .fmg-timeline-row__track { background: rgba(10,37,64,0.04); }

/* §171-C (Danny 2026-05-13) — FMG entry state badge.
   3 state: recommendation_only (📋 sun) / cart_added (🛒 sea) / quote_submitted (📦 navy).
   compact view = emoji-only inline badge · expanded list = emoji + label pill.
   DO_NOT_REVERT §171-C. */
.fmg-timeline-row__state-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
  margin-left: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fmg-timeline-row__state-icon--rec {
  background: rgba(255, 184, 0, 0.16);
  color: var(--color-navy);
  border: 1px solid rgba(255, 184, 0, 0.45);
}
.fmg-timeline-row__state-icon--cart {
  background: rgba(63, 184, 201, 0.16);
  color: var(--color-navy);
  border: 1px solid rgba(63, 184, 201, 0.50);
}
.fmg-timeline-row__state-icon--quote {
  background: rgba(10, 37, 64, 0.10);
  color: var(--color-navy);
  border: 1px solid rgba(10, 37, 64, 0.30);
}
.fmg-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fmg-empty .fmg-timeline { width: 100%; max-width: 360px; }

/* §G — Tier ladder horizontal viz */
.tier-compact { display: flex; flex-direction: column; gap: 12px; }
.tier-compact__current { font-size: 14px; color: var(--color-navy); }
.tier-compact__current b { font-weight: 800; }
.tier-compact__disc { color: var(--color-slate); font-size: 13px; font-weight: 700; }
.tier-compact__next { font-size: 13px; color: var(--color-navy); font-weight: 700; word-break: keep-all; }
.tier-compact__cta { margin: 0; }
.tier-compact__cta a { font-size: 13px; font-weight: 700; color: var(--color-sea); text-decoration: none; }
.tier-compact__cta a:hover { text-decoration: underline; }

.tier-ladder {
  position: relative;
  padding: 12px 6px 6px;
  overflow-x: auto;
}
.tier-ladder__line {
  position: absolute;
  left: 6px; right: 6px;
  top: 20px;
  height: 2px;
  background: rgba(10,37,64,0.10);
  border-radius: 999px;
}
.tier-ladder__markers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(56px, 1fr));
  gap: 4px;
  min-width: 540px;
}
.tier-ladder__marker { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.tier-ladder__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(10,37,64,0.18);
  z-index: 1;
  transition: all 0.2s ease;
}
.tier-ladder__marker.is-past .tier-ladder__dot {
  background: var(--color-sea);
  border-color: var(--color-sea);
}
.tier-ladder__marker.is-current .tier-ladder__dot {
  background: var(--color-sun);
  border-color: var(--color-sun);
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 4px rgba(255,184,0,0.20);
}
.tier-ladder__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-slate);
  text-align: center;
  word-break: keep-all;
  letter-spacing: -0.01em;
}
.tier-ladder__marker.is-current .tier-ladder__label { color: var(--color-navy); font-weight: 800; }
@media (max-width: 540px) {
  .tier-ladder__markers { min-width: 480px; }
  .tier-ladder__label { font-size: 9px; }
}

.profile-toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: var(--color-navy); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(10,37,64,0.22); z-index: 99; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.profile-toast.is-visible { opacity: 1; }

/* DO_NOT_REVERT §169-A — Danny 2026-05-12. 종목 선택 = checkbox 기반 multi-select.
   `<select multiple>` 또는 Cmd-required UI 회귀 영구 금지. 모바일·데스크탑 동일 UX. */
.multi-select {
  background: rgba(10, 37, 64, 0.02);
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
}
.multi-select__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(10, 37, 64, 0.12);
}
.multi-select__placeholder {
  font-size: 12px;
  color: var(--color-slate);
  font-style: italic;
}
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  background: var(--color-sun);
  color: var(--color-navy);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.ms-chip__x {
  background: transparent;
  border: none;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.ms-chip__x:hover {
  background: rgba(10, 37, 64, 0.15);
}
.multi-select__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 12px;
}
.multi-select__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 14px;
  color: var(--color-navy);
  word-break: keep-all;
}
.multi-select__opt:hover {
  background: rgba(255, 184, 0, 0.08);
}
.multi-select__opt input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-sun);
  cursor: pointer;
}
.multi-select__opt input[type=checkbox]:checked + span {
  font-weight: 700;
}
@media (max-width: 540px) {
  .multi-select__grid { grid-template-columns: repeat(2, 1fr); }
}

/* DO_NOT_REVERT §169-B v4 — Danny 2026-05-12. spot 선택 = flat checkbox grid + 가나다 순.
   §169-B v3 (4 지역 그룹 헤더 .multi-select__group + .multi-select__group-title) 영구 폐기.
   18 spot 단일 grid + chip pill 영역 유지. desktop auto-fit minmax(120px) / 모바일 ≤540px 2-col (§169-A 와 일관). */

/* DO_NOT_REVERT §169-C + §169-D — Danny 2026-05-12. My Gear 카테고리 축소 + 복사 버튼 + slider gradient.
   카테고리 = 윙/포일/보드 3개 lock. 브랜드 = 카테고리별 expanded list (§158-B 예외 — personal data input).
   복사 (Duplicate) 버튼 영구 lock. slider gradient red→green satisfaction scale. "매우" canonical. */

/* §169-D 복사 + 액션 영역 */
.gear-card__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.gear-card__copy {
  background: rgba(255, 184, 0, 0.16);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.gear-card__copy:hover {
  background: var(--color-sun);
  border-color: var(--color-sun);
  transform: translateY(-1px);
}
/* gear-card__remove already exists; reposition to align with copy button (override) */
.gear-card .gear-card__remove {
  position: static;
}
/* New-row highlight after copy — yellow flash, 2.4s fade */
@keyframes gearJustCopied {
  0%   { background: rgba(255, 184, 0, 0.18); box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.35); }
  70%  { background: rgba(255, 184, 0, 0.10); box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18); }
  100% { background: linear-gradient(135deg, #fff 0%, #fafbfc 100%); box-shadow: none; }
}
.gear-card--just-copied {
  animation: gearJustCopied 2.4s ease-out;
}

/* DO_NOT_REVERT §169-D v3 — Danny 2026-05-12: slider 동적 fill (handle 위치까지만 color).
   §169-D v2 의 full red→green gradient 고정 회귀 영구 X.
   채움 = level 별 solid color (1 #EF4444 / 2 #F97316 / 3 #FBBF24 / 4 #86EFAC / 5 #22C55E)
   unfilled = neutral gray (#E5E7EB). JS (paintSlider) 가 inline background 로 갱신. CSS 는 fallback (level 3 noir). */
.gear-slider-row input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #FBBF24 0%, #FBBF24 60%, #E5E7EB 60%, #E5E7EB 100%);
  outline: none;
  margin: 6px 0 4px;
  transition: background 0.15s ease;
}
.gear-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 37, 64, 0.3);
  cursor: pointer;
}
.gear-slider-row input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 37, 64, 0.3);
  cursor: pointer;
}
.gear-slider-row__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-slate);
  margin-top: 2px;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.gear-slider-row__ticks span {
  text-align: center;
  flex: 1;
}
.gear-slider-row__ticks span:first-child { text-align: left; }
.gear-slider-row__ticks span:last-child { text-align: right; }

/* DO_NOT_REVERT §169-G — Nav header 로그인 상태별 표시 (Danny 2026-05-12) */
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-sun) 0%, #f59e0b 100%);
  color: var(--color-navy);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* §173-C v3 — portrait 사진은 얼굴이 상단 ~25-30% 에 위치 (cap·머리 영역 위) → 얼굴 보이도록 anchor */
  object-position: center 25%;
  display: block;
}
.nav-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
.nav-auth {
  position: relative;
}
/* DO_NOT_REVERT §145-G v8 (Danny 2026-05-13) — 마이페이지 nav 버튼 가독성 fix.
   site-header bg = rgba(255,255,255,0.86) (white). 옛 color:#fff (white-on-white invisible) 회귀 영구 X.
   navy text + 미세한 navy-tint bg + WCAG AA contrast ≥ 4.5:1 (navy on white ~13:1). */
.nav-auth__trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px !important;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.05);
  border: 1px solid rgba(10, 37, 64, 0.14);
  color: var(--color-navy) !important;
  font-size: 13px !important;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-auth__trigger:hover {
  background: rgba(255, 184, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.45);
}
.nav-auth__chev { color: var(--color-navy); }
/* §145-G v8 — login link inline `color:rgba(255,255,255,...)` 회귀 가드.
   HTML inline style override (95+ 페이지 모두 동일 inline rgba white 사용 — CSS !important 로 일괄 정정). */
.nav__link--login {
  color: var(--color-navy) !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(10, 37, 64, 0.05) !important;
  border: 1px solid rgba(10, 37, 64, 0.14) !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.nav__link--login:hover {
  background: rgba(255, 184, 0, 0.14) !important;
  border-color: rgba(255, 184, 0, 0.45) !important;
}
.nav-auth__name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-auth__chev {
  opacity: 0.7;
  margin-left: 2px;
}
.nav-auth__menu {
  right: 0;
  left: auto !important;
  min-width: 240px;
  /* §169-G v2 — right-anchored, no X shift (default .nav__sub transform translateX(-50%) 회귀 영구 X) */
  transform: translateY(8px);
}
/* DO_NOT_REVERT §169-G v2 — Danny 2026-05-12: click-to-toggle (hover-gap 버그 fix).
   default .nav__has-sub hover/focus-within 의 dropdown auto-open 영구 X.
   open state 는 JS-controlled .is-open class 로만. trigger = <button>, 클릭 토글 + outside-click + Esc 닫힘. */
.nav-auth.nav__has-sub:hover .nav-auth__menu,
.nav-auth.nav__has-sub:focus-within .nav-auth__menu {
  /* Override the default hover/focus-within auto-open from .nav__has-sub rule */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.nav-auth.nav__has-sub.is-open .nav-auth__menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.nav-auth__trigger { cursor: pointer; font-family: inherit; }
.nav-auth__trigger.is-active {
  background: rgba(255, 184, 0, 0.18) !important;
  border-color: rgba(255, 184, 0, 0.45) !important;
}
.nav-auth__logout {
  border-top: 1px solid rgba(10, 37, 64, 0.08);
  margin-top: 4px;
  padding-top: 10px !important;
}
.nav-auth__logout b {
  color: #dc2626 !important;
}
@media (max-width: 768px) {
  .nav-auth__name { display: none; }
  .nav-auth__chev { display: none; }
  .nav-auth__trigger { padding: 4px !important; background: transparent; border: none; }
}

/* Mobile menu drawer — profile card */
.mobile-auth-card {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.16) 0%, rgba(63, 184, 201, 0.12) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 20px 20px;
}
.mobile-auth-card__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-auth-card__meta { flex: 1; min-width: 0; overflow: hidden; }
.mobile-auth-card__name {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-auth-card__email {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-auth-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.mobile-auth-card__actions a {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.mobile-auth-card__actions a:hover {
  background: rgba(255, 255, 255, 0.2);
}
.mobile-auth-card__actions a[data-nav-logout-mobile] {
  color: #fca5a5;
}

/* DO_NOT_REVERT §169-J v2 — Danny 2026-05-13: skill-assessment 총평 section.
   위치: 펜타곤 + 약점 카드 사이. stance + 약점 패턴 기반 personalized 인사이트. */
.skill-overall {
  background: linear-gradient(135deg, rgba(10,37,64,0.04) 0%, rgba(255,184,0,0.06) 100%);
  border: 1px solid rgba(255,184,0,0.25);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 24px 0;
  box-shadow: 0 4px 18px rgba(10,37,64,0.06);
}
.skill-overall__head { margin-bottom: 18px; }
.skill-overall__title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--color-navy); letter-spacing: -0.01em; }
.skill-overall__meta { margin: 0; font-size: 14px; color: var(--color-slate); font-weight: 600; }
.skill-overall__meta b { color: var(--color-navy); font-weight: 800; }
.skill-overall__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--color-navy); word-break: keep-all; }
.skill-overall__hint { margin: 14px 0 0; font-size: 13px; color: var(--color-slate); line-height: 1.55; word-break: keep-all; }
.skill-overall__hint code { font-family: 'Inter', monospace; font-size: 12px; background: rgba(10,37,64,0.05); padding: 1px 6px; border-radius: 4px; }
.skill-overall__insight {
  background: #fff;
  border-left: 3px solid var(--color-sun);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
}
.skill-overall__insight h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--color-navy); }
.skill-overall__insight p { margin: 6px 0; font-size: 14px; line-height: 1.6; color: var(--color-ink); word-break: keep-all; }
.skill-overall__insight p b { color: var(--color-navy); font-weight: 700; }
.skill-overall__sub-insight {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(63,184,201,0.06);
  border-radius: 6px;
  font-size: 13px !important;
  color: var(--color-sea-dark);
}
.skill-overall__insight ol { margin: 6px 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--color-ink); }
.skill-overall__insight ol li { margin-bottom: 4px; word-break: keep-all; }
.skill-overall__cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 540px) {
  .skill-overall { padding: 18px; }
  .skill-overall__title { font-size: 17px; }
  .skill-overall__cta { flex-direction: column; }
}

/* DO_NOT_REVERT §169-I — Danny 2026-05-12: Goofy/Regular stance picker + 편/약 tag pill.
   skill-assessment.html 상단 stance question, 펜타곤 라벨/슬라이더 카드 (편/약) tag pill 의무.
   매핑: Regular = S(우) 편 / P(좌) 약. Goofy = P(좌) 편 / S(우) 약. (Day 1A: 우=S / 좌=P) */
.stance-picker {
  background: linear-gradient(135deg, rgba(63,184,201,0.05) 0%, rgba(255,184,0,0.05) 100%);
  border: 1px solid rgba(10,37,64,0.10);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 28px;
}
.stance-picker__head { margin-bottom: 16px; }
.stance-picker__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}
.stance-picker__lead {
  margin: 0;
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.55;
  word-break: keep-all;
}
.stance-picker__opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 540px) {
  .stance-picker__opts { grid-template-columns: 1fr; }
}
.stance-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid rgba(10,37,64,0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.stance-opt:hover { border-color: var(--color-sea); }
.stance-opt:has(input:checked),
.stance-opt.is-checked {
  border-color: var(--color-sun);
  background: rgba(255,184,0,0.06);
  box-shadow: 0 4px 12px rgba(255,184,0,0.12);
}
.stance-opt input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stance-opt__viz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.stance-opt__foot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stance-opt__foot--front {
  background: var(--color-sea);
  color: #fff;
}
.stance-opt__foot--back {
  background: var(--color-navy);
  color: #fff;
  transform: translateY(2px);
}
.stance-opt__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stance-opt__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.005em;
}
.stance-opt__hint {
  font-size: 12px;
  color: var(--color-slate);
  word-break: keep-all;
}
.stance-opt__hint b { color: var(--color-navy); font-weight: 700; }

/* §169-I 편/약 tag pill — 펜타곤 라벨 + 슬라이더 카드 헤더 + 약점 분석 카드 */
.stance-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 4px;
}
.stance-pill--easy {
  background: rgba(74, 222, 128, 0.18);
  color: #166534;
}
.stance-pill--weak {
  background: rgba(249, 115, 22, 0.18);
  color: #9a3412;
}
.skill-pentagon__label .stance-pill {
  font-size: 8px;
  padding: 0 5px;
}

/* ==========================================================================
   DO_NOT_REVERT §171-B (Danny 2026-05-13) — Cart + Quote system styles.
   localStorage cart + quote request flow. 로그인 enforce + 운송비 카테고리별.
   변경 시 Danny 명시 승인 필수.
   ========================================================================== */

/* --- Nav cart icon + badge — Danny 2026-05-26 시인성 강화 (사이즈·기본 배경·SVG stroke) --- */
.nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.nav__cart:hover { background: var(--color-mist); border-color: var(--border); color: var(--color-navy); transform: translateY(-1px); }
.nav__cart--active { background: rgba(255, 184, 0, 0.28); color: var(--color-navy); }
.nav__cart svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.nav__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-sun);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  border: 2px solid var(--color-navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.nav__cart-badge[hidden] { display: none !important; }

/* --- Cart empty: recent orders banner (Danny 2026-05-26) --- */
.cart-empty-recent { margin: 18px 0 20px; }
.cart-empty-recent__card {
  border: 1px solid rgba(31, 143, 255, 0.28);
  background: linear-gradient(180deg, rgba(31, 143, 255, 0.06), rgba(31, 143, 255, 0.02));
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
}
.cart-empty-recent__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.cart-empty-recent__head strong { color: var(--color-navy); font-size: 15px; }
.cart-empty-recent__sub { color: #5C6F7E; font-size: 13px; }
.cart-empty-recent__lead {
  color: #324052;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.cart-empty-recent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Order detail: 현재 단계 강조 banner + 다시 담기 (Danny 2026-05-26) --- */
.order-stage-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31,143,255,0.12), rgba(31,143,255,0.04));
  border: 1px solid rgba(31,143,255,0.30);
}
.order-stage-banner__num {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-sea);
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.order-stage-banner__cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C6F7E;
  margin-bottom: 2px;
}
.order-stage-banner__label {
  font-size: 18px;
  color: var(--color-navy);
}
/* 견적 단계(1-2) 파랑, 입금·주문(3-4) 노랑, 통관·배송(5-7) 초록, 완료(8) 진녹 */
.order-stage-banner[data-stage="1"],
.order-stage-banner[data-stage="2"] {
  background: linear-gradient(180deg, rgba(31,143,255,0.14), rgba(31,143,255,0.04));
  border-color: rgba(31,143,255,0.32);
}
.order-stage-banner[data-stage="3"],
.order-stage-banner[data-stage="4"] {
  background: linear-gradient(180deg, rgba(255,184,0,0.18), rgba(255,184,0,0.04));
  border-color: rgba(255,184,0,0.4);
}
.order-stage-banner[data-stage="3"] .order-stage-banner__num,
.order-stage-banner[data-stage="4"] .order-stage-banner__num { color: #C97A00; }
.order-stage-banner[data-stage="5"],
.order-stage-banner[data-stage="6"],
.order-stage-banner[data-stage="7"] {
  background: linear-gradient(180deg, rgba(31,160,85,0.14), rgba(31,160,85,0.04));
  border-color: rgba(31,160,85,0.32);
}
.order-stage-banner[data-stage="5"] .order-stage-banner__num,
.order-stage-banner[data-stage="6"] .order-stage-banner__num,
.order-stage-banner[data-stage="7"] .order-stage-banner__num { color: #1FA055; }
.order-stage-banner[data-stage="8"] {
  background: linear-gradient(180deg, rgba(31,160,85,0.22), rgba(31,160,85,0.08));
  border-color: rgba(31,160,85,0.45);
}
.order-stage-banner[data-stage="8"] .order-stage-banner__num { color: #1FA055; }

.order-detail__edit {
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: #F7FAFC;
  border-radius: 10px;
  border: 1px solid rgba(10,37,64,0.08);
}
.order-detail__edit-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #5C6F7E;
  line-height: 1.55;
}
.order-restock-btn { font-weight: 700; }

/* --- Order cancel / delete buttons (§174-B Danny 2026-05-26) --- */
.order-detail__action { margin-top: 8px; }
.order-action-btn {
  appearance: none;
  border: 1px solid;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
}
.order-action-btn:hover { transform: translateY(-1px); }
.order-action-btn--cancel { color: #C2362F; border-color: #E0908B; }
.order-action-btn--cancel:hover { background: #FBECEA; }
.order-action-btn--delete { color: #5C6F7E; border-color: #C7CFD8; }
.order-action-btn--delete:hover { background: #F1F4F7; }

.order-cancel-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FBECEA;
  color: #C2362F;
  border: 1px solid #E0908B;
}

.order-detail--cancelled { opacity: 0.62; }
.order-detail--cancelled .order-stage-banner { opacity: 0.7; }
.order-detail--cancelled h3 b { text-decoration: line-through; text-decoration-color: #C2362F; }

/* Archived (hidden) orders section */
.orders-archived { margin-top: 14px; }
.orders-archived__toggle {
  appearance: none;
  background: transparent;
  border: 1px dashed #C7CFD8;
  border-radius: 8px;
  padding: 8px 14px;
  color: #5C6F7E;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.orders-archived__toggle:hover { background: #F1F4F7; }
.orders-archived__list { margin-top: 10px; }
.orders-archived--expanded { margin-top: 18px; }

/* --- Cart page --- */
.cart-page,
.quote-page {
  padding: 40px 0 80px;
  background: linear-gradient(180deg, var(--color-mist) 0%, #fff 60%);
  min-height: 60vh;
}
.cart-page .container,
.quote-page .container { max-width: 960px; }

.cart-page__header,
.quote-page__header { margin-bottom: 20px; }
.cart-page__title,
.quote-page__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.cart-page__sub,
.quote-page__sub {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0;
  line-height: 1.6;
  word-break: keep-all;
}

.cart-card,
.quote-card {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.04);
}
.cart-card__title,
.quote-card__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cart-card__title small,
.quote-card__title small {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-slate);
  letter-spacing: 0;
}

/* Logged-out banner */
.cart-auth-banner {
  background: linear-gradient(135deg, rgba(31, 143, 255, 0.06), rgba(255, 184, 0, 0.06));
  border-color: rgba(31, 143, 255, 0.18);
}
.cart-auth-banner__title { font-size: 18px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.cart-auth-banner__lead { font-size: 14px; color: var(--color-slate); margin: 0 0 16px; word-break: keep-all; line-height: 1.6; }
.cart-auth-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Empty state */
.cart-empty { text-align: center; padding: 48px 28px; color: var(--color-slate); }
.cart-empty svg { color: var(--color-navy); opacity: 0.4; margin-bottom: 12px; }
.cart-empty__title { font-size: 18px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.cart-empty__lead { font-size: 14px; color: var(--color-slate); margin: 0 0 20px; word-break: keep-all; }
.cart-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Cart item row */
.cart-item {
  display: grid;
  grid-template-columns: 140px 1fr auto auto 32px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-slate);
  background: var(--color-mist);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.02em;
}
.cart-item__main { min-width: 0; }
.cart-item__name {
  font-size: 14px;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: keep-all;
}
.cart-item__name strong { font-weight: 700; }
.cart-item__size {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-sea);
  background: rgba(31, 143, 255, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}
.cart-item__unit { font-size: 12px; color: var(--color-slate); }
.cart-item__price--tbd { color: var(--color-slate); font-style: italic; }

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(10, 37, 64, 0.16);
  border-radius: 8px;
  overflow: hidden;
}
.cart-qty-btn {
  background: #fff;
  border: none;
  width: 30px;
  height: 32px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.cart-qty-btn:hover { background: var(--color-mist); }
.cart-qty-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid rgba(10, 37, 64, 0.08);
  border-right: 1px solid rgba(10, 37, 64, 0.08);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: inherit;
  background: #fff;
  -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item__sub {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  text-align: right;
  white-space: nowrap;
  min-width: 100px;
}
.cart-item__remove {
  background: transparent;
  border: none;
  color: var(--color-slate);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-item__remove:hover { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }

/* Summary card */
.cart-summary { position: relative; }
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-navy);
  gap: 16px;
}
.cart-summary__row--head { font-weight: 700; }
.cart-summary__sub {
  background: var(--color-mist);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0;
}
.cart-summary__ship-list {
  list-style: none;
  padding: 6px 0 0;
  margin: 6px 0 0;
  border-top: 1px solid rgba(10, 37, 64, 0.06);
  font-size: 12px;
  color: var(--color-slate);
}
.cart-summary__ship-list li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  gap: 12px;
}
.cart-summary__amt { font-weight: 800; }

/* DO_NOT_REVERT §170 v9 — Danny 2026-05-13: R6 Race Set Bundle section (r6-race.html).
   3 variants 카드 + SOLO 비교 visual + ₩428K 절약 강조. recommended badge 1순위. */
.r6-bundle-section {
  margin: 24px 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255,184,0,0.06) 0%, rgba(10,37,64,0.04) 100%);
  border: 1px solid rgba(255,184,0,0.20);
  border-radius: 12px;
}
.r6-bundle-section__title {
  font-size: 18px; font-weight: 800; color: var(--color-navy);
  margin: 0 0 6px; word-break: keep-all;
}
.r6-bundle-section__lead {
  font-size: 14px; color: var(--color-ink); line-height: 1.6;
  margin: 0 0 16px; word-break: keep-all;
}
.r6-bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.r6-bundle-card {
  background: #fff;
  border: 1px solid rgba(10,37,64,0.10);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.r6-bundle-card:hover {
  border-color: var(--color-sun);
  box-shadow: 0 6px 16px rgba(10,37,64,0.10);
}
.r6-bundle-card--recommended {
  border-color: var(--color-sun);
  border-width: 2px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,184,0,0.04) 100%);
}
.r6-bundle-card__badge {
  position: absolute;
  top: -10px; right: 12px;
  padding: 3px 10px;
  background: var(--color-sun); color: var(--color-navy);
  font-size: 11px; font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.r6-bundle-card__name {
  font-size: 15px; font-weight: 800; color: var(--color-navy);
  margin: 0;
}
.r6-bundle-card__detail {
  font-size: 13px; color: var(--color-ink); line-height: 1.5;
  margin: 0; word-break: keep-all;
}
.r6-bundle-card__price {
  font-size: 15px; color: var(--color-navy);
  margin: 4px 0 0;
}
.r6-bundle-card__price strong {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 17px;
}
.r6-bundle-card .btn {
  margin-top: auto;
  align-self: stretch;
  font-size: 13px;
}
@media (max-width: 740px) {
  .r6-bundle-grid { grid-template-columns: 1fr; }
}

/* §170 v9 — Bundle 권장 toast (cart.js add() trigger). */
.dmj-r6-bundle-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  max-width: 380px;
  background: #fff;
  border: 2px solid var(--color-sun);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(10,37,64,0.18);
  z-index: 10001;
  font-family: inherit;
  animation: dmj-r6-toast-slide-in 0.25s ease-out;
}
@keyframes dmj-r6-toast-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.dmj-r6-bundle-toast__head {
  font-size: 14px; font-weight: 800; color: var(--color-navy);
  margin-bottom: 6px;
}
.dmj-r6-bundle-toast__body {
  font-size: 13px; color: var(--color-ink); line-height: 1.55;
  margin: 0 0 12px; word-break: keep-all;
}
.dmj-r6-bundle-toast__actions {
  display: flex; gap: 8px;
}
.dmj-r6-bundle-toast__actions .btn { flex: 1; text-align: center; }
@media (max-width: 540px) {
  .dmj-r6-bundle-toast { left: 12px; right: 12px; max-width: none; bottom: 16px; }
}
.cart-summary__note {
  font-size: 12px;
  color: var(--color-slate);
  padding: 10px 12px;
  background: rgba(31, 143, 255, 0.06);
  border-radius: 8px;
  line-height: 1.5;
  word-break: keep-all;
  margin: 8px 0;
}
.cart-summary__row--total {
  border-top: 1px solid rgba(10, 37, 64, 0.12);
  padding-top: 14px;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
}
.cart-summary__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cart-cta { flex: 1 1 220px; text-align: center; min-width: 200px; }
/* DO_NOT_REVERT §171 v7 — Danny 2026-05-13: 계속 쇼핑하기 button (상단 + 하단).
   상단 = 작은 ghost (discovery), 하단 = 3-button row (계속 쇼핑 / 견적 / 비우기). */
.cart-continue-shopping { margin: 0 0 16px; }
.cart-continue-shopping--top { display: flex; }
.cart-continue-shopping .btn--sm { padding: 6px 12px; font-size: 13px; }
.cart-summary__actions--with-continue { gap: 10px; }
.cart-summary__actions--with-continue #cart-continue-bottom { flex: 0 1 auto; }
.cart-summary__actions--with-continue #cart-clear-btn { flex: 0 1 auto; }
@media (max-width: 540px) {
  .cart-summary__actions--with-continue { flex-direction: column; }
  .cart-summary__actions--with-continue #cart-continue-bottom,
  .cart-summary__actions--with-continue #cart-clear-btn { width: 100%; }
}
.cart-summary__fineprint {
  font-size: 12px;
  color: var(--color-slate);
  margin: 12px 0 0;
  text-align: center;
  word-break: keep-all;
}

/* --- Quote page --- */
.quote-form { display: block; }
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quote-field { display: flex; flex-direction: column; gap: 4px; }
.quote-field--full { grid-column: 1 / -1; }
.quote-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-slate);
  letter-spacing: 0.02em;
}
.quote-field input,
.quote-field textarea {
  padding: 10px 12px;
  border: 1px solid rgba(10, 37, 64, 0.16);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--color-navy);
}
.quote-field input:focus,
.quote-field textarea:focus { outline: none; border-color: var(--color-sea); }
.quote-field textarea { resize: vertical; min-height: 96px; }

.quote-form__error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 12px 0 0;
  word-break: keep-all;
}

.quote-items { margin-bottom: 12px; }
.quote-item {
  display: grid;
  grid-template-columns: 1fr 50px 110px 110px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
  font-size: 13px;
  align-items: baseline;
}
.quote-item:last-child { border-bottom: none; }
.quote-item__name { color: var(--color-navy); word-break: keep-all; }
.quote-item__qty { color: var(--color-slate); font-weight: 700; }
.quote-item__unit { color: var(--color-slate); text-align: right; }
.quote-item__sub { color: var(--color-navy); font-weight: 800; text-align: right; }

.quote-totals { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(10, 37, 64, 0.12); }
.quote-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-navy);
}
.quote-totals__ship-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--color-slate);
}
.quote-totals__ship-list li {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 3px 14px;
  gap: 12px;
}
.quote-totals__row--total {
  border-top: 1px solid rgba(10, 37, 64, 0.12);
  padding-top: 12px;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
}
.quote-totals__note {
  font-size: 12px;
  color: var(--color-slate);
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(31, 143, 255, 0.06);
  border-radius: 8px;
  word-break: keep-all;
  line-height: 1.5;
}

.quote-bizinfo__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 0;
  font-size: 13px;
}
.quote-bizinfo__list > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid rgba(10, 37, 64, 0.06); }
.quote-bizinfo__list dt { font-size: 11px; font-weight: 700; color: var(--color-slate); letter-spacing: 0.02em; }
.quote-bizinfo__list dd { margin: 0; font-size: 13px; color: var(--color-navy); font-weight: 600; word-break: keep-all; }
.quote-bizinfo__list dd a { color: var(--color-sea); text-decoration: none; }
.quote-bizinfo__list dd a:hover { text-decoration: underline; }

.quote-payinfo {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.06), #fff);
  border-color: rgba(255, 184, 0, 0.2);
}
.quote-payinfo__lead {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0 0 12px;
  word-break: keep-all;
  line-height: 1.6;
}

.quote-form__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.quote-submit-btn { flex: 1 1 220px; min-width: 200px; }
.quote-form__fineprint {
  font-size: 12px;
  color: var(--color-slate);
  margin: 6px 0 0;
  text-align: center;
  word-break: keep-all;
}

/* Confirmation screen */
.quote-confirm { text-align: center; padding: 56px 28px; }
.quote-confirm__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(42, 140, 92, 0.12);
  color: #2A8C5C;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.quote-confirm__title { font-size: 22px; font-weight: 800; color: var(--color-navy); margin: 0 0 10px; }
.quote-confirm__lead { font-size: 14px; color: var(--color-slate); margin: 0 0 24px; word-break: keep-all; line-height: 1.6; }
.quote-confirm__lead strong { color: var(--color-navy); font-weight: 800; }
.quote-confirm__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* --- Find-my-gear: "+ 장바구니" button + wrapper --- */
.mtx-item-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mtx-item-wrap > .mtx-item { flex: 1 1 auto; min-width: 0; }
.mtx-item__addcart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 143, 255, 0.32);
  background: rgba(31, 143, 255, 0.08);
  color: var(--color-sea-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mtx-item__addcart:hover {
  background: rgba(31, 143, 255, 0.18);
  border-color: var(--color-sea);
  color: var(--color-sea-dark);
}
.mtx-item__addcart.is-added,
.mtx-item__addcart--in {
  background: rgba(42, 140, 92, 0.14);
  border-color: rgba(42, 140, 92, 0.32);
  color: #1f6e44;
}
.mtx-item__addcart--in:hover {
  background: rgba(42, 140, 92, 0.22);
  border-color: rgba(42, 140, 92, 0.48);
  color: #154e30;
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .cart-item {
    grid-template-columns: 1fr auto 32px;
    grid-template-areas:
      "cat cat remove"
      "main main main"
      "qty sub sub";
    gap: 8px 12px;
  }
  .cart-item__cat { grid-area: cat; justify-self: start; }
  .cart-item__main { grid-area: main; }
  .cart-item__qty { grid-area: qty; }
  .cart-item__sub { grid-area: sub; text-align: right; }
  .cart-item__remove { grid-area: remove; justify-self: end; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-bizinfo__list { grid-template-columns: 1fr; }
  .quote-item {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .quote-item__name { grid-column: 1 / -1; }
  .quote-item__qty { grid-column: 1; }
  .quote-item__unit { grid-column: 1; text-align: left; }
  .quote-item__sub { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}

@media (max-width: 540px) {
  .cart-page__title,
  .quote-page__title { font-size: 22px; }
  .cart-card,
  .quote-card { padding: 18px 16px; }
}

/* ==========================================================================
   DO_NOT_REVERT §169-J v3 — Skill assessment 약점 카드 tier-gated detail
   preview/toggle + expanded accordion + locked overlay
   ========================================================================== */

/* --- §169-J v3 — Weakness card preview (collapsed surface) --- */
.skill-weakness-card__preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 10px;
}
.skill-weakness-card__preview-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.skill-weakness-card__preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.skill-weakness-card__preview-list li {
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  word-break: keep-all;
}
.skill-weakness-card__preview-list li:last-child { border-bottom: none; }
.skill-weakness-card__preview-list b {
  color: var(--color-sun);
  font-weight: 800;
  margin-right: 4px;
}
.skill-weakness-card__preview-loc {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.7;
}

/* --- Toggle button --- */
.skill-weakness-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(63, 184, 201, 0.16);
  color: #67E8F9;
  border: 1px solid rgba(63, 184, 201, 0.32);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  letter-spacing: -0.005em;
}
.skill-weakness-card__toggle:hover {
  background: rgba(63, 184, 201, 0.26);
  color: #fff;
}
.skill-weakness-card__toggle-icon {
  font-size: 14px;
  font-weight: 900;
  display: inline-block;
  transition: transform 0.2s ease;
}
.skill-weakness-card.is-expanded .skill-weakness-card__toggle-icon {
  transform: rotate(0deg);
}
.skill-weakness-card.is-expanded .skill-weakness-card__toggle {
  background: rgba(63, 184, 201, 0.26);
  color: #fff;
}

/* --- Expanded detail container --- */
.skill-weakness-card__detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: skill-detail-fadein 0.25s ease;
}
@keyframes skill-detail-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skill-weakness-card__legacy { display: none; } /* §169-J v3: legacy training blocks hidden — content moved to detail */

/* --- Stage section (3 stages) --- */
.skill-detail__stage {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  position: relative;
}
.skill-detail__stage--land { border-left-color: #4ade80; background: rgba(74, 222, 128, 0.05); }
.skill-detail__stage--water { border-left-color: #3FB8C9; background: rgba(63, 184, 201, 0.05); }

.skill-detail__stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.skill-detail__stage-num {
  display: inline-block;
  background: var(--color-sun);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 999px;
}
.skill-detail__stage-weeks {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.skill-detail__stage-loc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 6px;
}
.skill-detail__stage-loc--land { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.skill-detail__stage-loc--water { background: rgba(63, 184, 201, 0.18); color: #67E8F9; }

.skill-detail__stage-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.45;
  word-break: keep-all;
}
.skill-detail__stage-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}
.skill-detail__drills {
  list-style: disc;
  padding-left: 20px;
  margin: 6px 0 10px;
}
.skill-detail__drills li {
  padding: 3px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  word-break: keep-all;
}
.skill-detail__body {
  margin: 6px 0 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  word-break: keep-all;
}
.skill-detail__gear {
  margin: 6px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  word-break: keep-all;
}
.skill-detail__gear b { color: var(--color-sun); }
.skill-detail__ref {
  margin: 4px 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* --- Locked overlay --- */
.skill-detail__locked {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
}
.skill-detail__locked-content {
  filter: blur(4px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  padding: 8px 0;
}
.skill-detail__locked-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.65) 0%, rgba(10, 37, 64, 0.88) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 184, 0, 0.25);
}
.skill-detail__locked-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.skill-detail__locked-msg {
  font-size: 13px;
  color: #fff;
  margin: 0;
  line-height: 1.55;
  word-break: keep-all;
  max-width: 320px;
}
.skill-detail__locked-msg b { color: var(--color-sun); font-weight: 800; }
.skill-detail__locked-msg small {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.skill-detail__locked .btn--sm {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}
.skill-detail__locked--video {
  min-height: 110px;
  background: rgba(10, 37, 64, 0.6);
  border: 1px dashed rgba(255, 184, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}
.skill-detail__locked--video .skill-detail__locked-overlay {
  position: static;
  background: transparent;
  border: none;
}

/* --- Stage 3 video block (when unlocked) --- */
.skill-detail__video {
  background: rgba(255, 184, 0, 0.06);
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}
.skill-detail__video-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-sun);
  margin-bottom: 6px;
}
.skill-detail__video p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 8px;
  line-height: 1.55;
  word-break: keep-all;
}
.skill-detail__video-thumb {
  height: 110px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

/* --- Detail bottom CTA row --- */
.skill-detail__cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.skill-detail__cta .btn--sm {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

@media (max-width: 540px) {
  .skill-weakness-card__toggle { width: 100%; }
  .skill-detail__cta { flex-direction: column; }
  .skill-detail__cta .btn--sm { width: 100%; text-align: center; }
  .skill-detail__stage { padding: 12px 14px; }
}

/* ============================================================
   §174 (Danny 2026-05-13) — Order progress timeline
   profile §H + admin/orders.html 공통 클래스.
   8 stage canonical: 견적요청중→최종견적수렴중→최종견적회신완료→
   입금완료→오더진행중→통관진행중→배송중→배송완료.
   DO_NOT_REVERT §174 — 스타일 톤·구조 영구 lock.
   ============================================================ */

/* --- Empty state --- */
.order-empty {
  background: var(--color-mist);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.order-empty__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 8px;
  word-break: keep-all;
}
.order-empty__sub {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0 0 16px;
  line-height: 1.6;
  word-break: keep-all;
}
.order-empty__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Order card (compact) --- */
.order-card {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.03);
}
.order-card:last-child { margin-bottom: 0; }
.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.order-card__id {
  font-size: 13px;
  color: var(--color-slate);
}
.order-card__id b {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--color-navy);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.order-card__total {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--color-navy);
  font-size: 15px;
}
.order-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-slate);
}
.order-card__meta b { color: var(--color-navy); }
.order-card__ts {
  font-size: 11px;
  color: rgba(10, 37, 64, 0.55);
}
.order-card__detail-btn {
  margin-top: 12px;
  width: 100%;
  background: rgba(31, 143, 255, 0.08);
  border: 1px solid rgba(31, 143, 255, 0.32);
  color: var(--color-sea-dark, #1d6b76);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.order-card__detail-btn:hover {
  background: rgba(31, 143, 255, 0.18);
  border-color: var(--color-sea);
  color: var(--color-sea-dark, #1d6b76);
}

/* --- Mini progress bar (8 dots horizontal) --- */
.order-progress-mini {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 8px 0;
}
.order-progress-mini__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(10, 37, 64, 0.08);
  color: rgba(10, 37, 64, 0.4);
  font-size: 10px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  z-index: 1;
}
.order-progress-mini__dot.is-past {
  background: var(--color-sea);
  color: #fff;
}
.order-progress-mini__dot.is-current {
  background: var(--color-sun);
  color: var(--color-navy);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.18);
  font-size: 11px;
}
.order-progress-mini__line {
  flex: 1 1 auto;
  height: 3px;
  background: rgba(10, 37, 64, 0.06);
  min-width: 8px;
}
.order-progress-mini__line.is-past {
  background: linear-gradient(90deg, var(--color-sea), var(--color-sea));
}

@media (max-width: 540px) {
  .order-progress-mini__dot { width: 18px; height: 18px; font-size: 9px; }
  .order-progress-mini__dot.is-current { font-size: 10px; }
}

/* --- Order detail (expanded) --- */
.order-detail {
  background: #fff;
  border: 1px solid rgba(10, 37, 64, 0.1);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.order-detail:last-child { margin-bottom: 0; }
.order-detail__head {
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.order-detail__head h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px;
}
.order-detail__head h3 b {
  font-family: 'Inter', sans-serif;
}
.order-detail__sub {
  font-size: 12px;
  color: var(--color-slate);
  margin: 0;
}
.order-detail__h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 18px 0 10px;
  letter-spacing: -0.005em;
}
.order-detail__totals {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--color-mist);
  border-radius: 10px;
}
.order-detail__totals > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.order-detail__totals span { color: var(--color-slate); font-weight: 700; }
.order-detail__totals strong {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--color-navy);
  font-size: 16px;
}
.order-detail__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
}
.order-fmg-link {
  font-size: 12px;
  color: var(--color-slate);
  margin: 8px 0;
}
.order-fmg-link a { color: var(--color-sea); text-decoration: none; font-weight: 700; }
.order-fmg-link a:hover { text-decoration: underline; }
.order-fmg-link small {
  font-family: 'Inter', sans-serif;
  color: rgba(10, 37, 64, 0.45);
  font-size: 10px;
  margin-left: 4px;
}

/* --- Vertical timeline (full) --- */
.order-timeline {
  position: relative;
  padding-left: 4px;
}
.order-timeline-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.order-timeline-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: -10px;
  width: 2px;
  background: rgba(10, 37, 64, 0.08);
}
.order-timeline-row--past:not(:last-child)::before { background: var(--color-sea); }
.order-timeline-row__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(10, 37, 64, 0.4);
  background: rgba(10, 37, 64, 0.06);
  border: 2px solid rgba(10, 37, 64, 0.08);
  flex-shrink: 0;
  z-index: 1;
}
.order-timeline-row--past .order-timeline-row__icon {
  background: var(--color-sea);
  color: #fff;
  border-color: var(--color-sea);
}
.order-timeline-row--current .order-timeline-row__icon {
  background: var(--color-sun);
  color: var(--color-navy);
  border-color: var(--color-sun);
  box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.18);
}
.order-timeline-row__body {
  padding-top: 2px;
  min-width: 0;
}
.order-timeline-row__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.order-timeline-row--future .order-timeline-row__label {
  color: rgba(10, 37, 64, 0.45);
  font-weight: 600;
}
.order-timeline-row__ts {
  font-size: 12px;
  color: var(--color-slate);
  font-family: 'Inter', sans-serif;
}
.order-timeline-row--future .order-timeline-row__ts {
  color: rgba(10, 37, 64, 0.3);
}
.order-timeline-row__note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-slate);
  background: rgba(63, 184, 201, 0.06);
  border-left: 3px solid var(--color-sea);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  line-height: 1.55;
  word-break: keep-all;
}

/* --- Item list (in detail view) --- */
.order-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--color-mist);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.order-item-row__name { color: var(--color-navy); flex: 1 1 auto; min-width: 0; word-break: keep-all; }
.order-item-row__name strong { font-weight: 700; }
.order-item-row__sub {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--color-navy);
  font-size: 13px;
  flex-shrink: 0;
}

/* --- Payment notice (stage < 4) --- */
.order-payment-notice {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.08), rgba(255, 184, 0, 0.02));
  border: 1px solid rgba(255, 184, 0, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}
.order-payment-notice__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 6px;
}
.order-payment-notice p {
  font-size: 12px;
  color: var(--color-slate);
  margin: 0;
  line-height: 1.6;
  word-break: keep-all;
}
.order-payment-notice b { color: var(--color-navy); }

/* --- Admin message chat bubbles --- */
.order-admin-msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-admin-msg {
  background: rgba(63, 184, 201, 0.06);
  border: 1px solid rgba(63, 184, 201, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
}
.order-admin-msg__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--color-slate);
  margin-bottom: 4px;
}
.order-admin-msg__head b {
  color: var(--color-sea-dark, #1d6b76);
  font-weight: 800;
}
.order-admin-msg__ts {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(10, 37, 64, 0.5);
}
.order-admin-msg__body {
  font-size: 13px;
  color: var(--color-navy);
  line-height: 1.55;
  word-break: keep-all;
}
.order-admin-empty {
  font-size: 12px;
  color: rgba(10, 37, 64, 0.5);
  font-style: italic;
  margin: 6px 0;
}
.order-empty-line {
  font-size: 12px;
  color: var(--color-slate);
  font-style: italic;
  margin: 6px 0;
}

@media (max-width: 540px) {
  .order-detail { padding: 16px 14px; }
  .order-card { padding: 14px 16px; }
  .order-detail__cta { flex-direction: column; }
  .order-detail__cta a { width: 100%; text-align: center; }
}

/* ==========================================================================
   §169 v3 (Danny 2026-05-14) — Find My Gear 카테고리 banner
   장비 dropdown → ?category=foil/board/wing/safety 진입 시 표시.
   DO_NOT_REVERT §169 v3.
   ========================================================================== */
.fmg-category-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.10) 0%, rgba(63, 184, 201, 0.06) 100%);
  border: 1px solid rgba(255, 184, 0, 0.30);
  border-radius: 10px;
  flex-wrap: wrap;
}
.fmg-category-banner__label {
  font-size: 14px;
  color: var(--color-navy);
  font-weight: 600;
}
.fmg-category-banner__label strong {
  font-weight: 800;
  color: var(--color-sun);
}
.fmg-category-banner__desc {
  font-size: 13px;
  color: var(--color-slate);
  flex: 1;
}
.fmg-category-banner__clear {
  background: transparent;
  border: 1px solid rgba(10, 37, 64, 0.20);
  color: var(--color-navy);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.fmg-category-banner__clear:hover {
  background: rgba(10, 37, 64, 0.06);
}
@media (max-width: 540px) {
  .fmg-category-banner { padding: 12px 14px; }
  .fmg-category-banner__desc { flex: 1 1 100%; }
}

/* ==========================================================================
   §I — 팀라이더 자격 신청 폼 (membership.html#apply-form, Danny 2026-05-17)
   localStorage stub Phase 1, Phase 12 = Supabase Function.
   ========================================================================== */
.apply-form,
.apply-form__loginwall,
.apply-form__success {
  max-width: 720px;
  margin: 0 auto;
}
.apply-form__loginwall {
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--color-mist);
  border-radius: 14px;
}
.apply-form {
  background: #fff;
  border: 1px solid var(--color-mist);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.apply-form__group {
  border: none;
  padding: 0;
  margin: 0;
}
.apply-form__group > legend {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 12px;
  padding: 0;
}
.apply-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.apply-form__full {
  grid-column: 1 / -1;
}
.apply-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-ink);
}
.apply-form label > span {
  font-weight: 600;
  color: var(--color-navy);
}
.apply-form label > span em {
  color: #d04a4a;
  font-style: normal;
  margin-left: 2px;
}
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="number"],
.apply-form select,
.apply-form textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.apply-form input[readonly] {
  background: #f5f7fa;
  color: var(--color-slate);
  cursor: not-allowed;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  outline: none;
  border-color: var(--color-sea);
  box-shadow: 0 0 0 3px rgba(63, 184, 201, 0.15);
}
.apply-form textarea {
  resize: vertical;
  min-height: 80px;
}
.apply-form__radio {
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 0;
}
.apply-form__radio > legend {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  padding: 0 6px;
}
.apply-form__radio > legend em {
  color: #d04a4a;
  font-style: normal;
  margin-left: 2px;
}
.apply-form__radio label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-size: 0.875rem;
  flex-direction: row;
}
.apply-form__radio input[type="radio"] {
  margin: 0;
}
.apply-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-mist);
}
.apply-form__note {
  font-size: 0.8125rem;
  color: var(--color-slate);
  margin: 0;
  text-align: center;
  word-break: keep-all;
}
.apply-form__success {
  text-align: center;
  padding: 40px 24px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 14px;
}
.apply-form__success h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: #166534;
}
.apply-form__success p {
  margin: 8px 0;
  color: var(--color-ink);
}
@media (max-width: 540px) {
  .apply-form { padding: 20px; }
  .apply-form__grid { grid-template-columns: 1fr; }
  .apply-form__radio label { display: flex; margin: 6px 0; }
}

/* === 변경 1: gear auto-fill 요약 === */
.apply-form__gear-summary {
  background: #f5f7fa;
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.apply-form__gear-empty {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-slate);
}
/* §175 (2026-05-18) — UA [hidden]{display:none} 보다 class 셀렉터가 우선되어
   gear 등록 시에도 empty state 가 노출되던 버그 정정. 회귀 영구 X. DO_NOT_REVERT §175. */
.apply-form__gear-empty[hidden],
.apply-form__gear-header[hidden],
.apply-form__gear-list[hidden] { display: none; }
.apply-form__gear-header {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.apply-form__gear-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-form__gear-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.875rem;
}
.apply-form__gear-cat {
  font-weight: 700;
  color: var(--color-navy);
  min-width: 48px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.apply-form__gear-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.apply-form__gear-chip {
  background: #fff;
  border: 1px solid var(--color-mist);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8125rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.btn--sm {
  padding: 4px 12px !important;
  font-size: 0.8125rem !important;
}

/* === 변경 2: racing-pick 연월 picker + elapsed === */
.apply-form__racing-pick {
  margin-bottom: 18px;
}
.apply-form__racing-label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.875rem;
  margin-bottom: 6px;
}
.apply-form__racing-row {
  display: flex;
  gap: 10px;
}
.apply-form__racing-row select {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
  flex: 1;
  min-width: 0;
}
.apply-form__racing-row select:focus {
  outline: none;
  border-color: var(--color-sea);
  box-shadow: 0 0 0 3px rgba(63, 184, 201, 0.15);
}
.apply-form__racing-elapsed {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--color-slate);
  padding: 6px 10px;
  background: #f5f7fa;
  border-radius: 6px;
}
.apply-form__racing-elapsed.is-ok {
  color: #166534;
  background: #f0fdf4;
}
.apply-form__racing-elapsed.is-error {
  color: #991b1b;
  background: #fef2f2;
}

/* === 변경 3: podium multi-entry === */
.apply-form__podium-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-form__podium-row {
  display: grid;
  grid-template-columns: 1fr 90px 110px auto;
  gap: 8px;
  align-items: center;
}
.apply-form__podium-row input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
  width: 100%;
  box-sizing: border-box;
}
.apply-form__podium-row input:focus {
  outline: none;
  border-color: var(--color-sea);
  box-shadow: 0 0 0 3px rgba(63, 184, 201, 0.15);
}
.apply-form__podium-remove {
  background: transparent;
  border: 1px solid var(--color-mist);
  color: var(--color-slate);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all .15s;
}
.apply-form__podium-remove:hover {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.apply-form__podium-add {
  margin-top: 4px;
}
@media (max-width: 540px) {
  .apply-form__racing-row { flex-direction: column; }
  .apply-form__podium-row {
    grid-template-columns: 1fr 80px auto;
    grid-template-areas:
      "name name remove"
      "year rank rank";
  }
  .apply-form__podium-row [data-podium-name] { grid-area: name; }
  .apply-form__podium-row [data-podium-year] { grid-area: year; }
  .apply-form__podium-row [data-podium-rank] { grid-area: rank; }
  .apply-form__podium-row [data-podium-remove] { grid-area: remove; }
}