/* ============================================================
   숨트레이너 랜딩 — 디자인 토큰
   단일 진실원천:
     · src/constants/colors.ts (STEEL palette + METHOD_PALETTE)
     · DESIGN_SYSTEM.md (프로젝트 루트)
     · docs/DESIGN_SYSTEM_HANDOFF.md §8.1 (Web 전용 토큰)
   ============================================================ */

:root {
  /* STEEL (Silver Grain) — Primitives ----------------------- */
  --steel-hi:    #F0F1F3;
  --steel-base:  #C5C8CD;
  --steel-lo:    #878A92;
  --steel-deep:  #43464D;
  --steel-abyss: #1C1E22;
  --steel-ink:   #131418;

  /* 모드 컬러 — METHOD_PALETTE 매핑 --------------------------
     Step 1 purge: .modes / .mode__* dead block 제거 시 연쇄 dead 가 된
     pearl-base/lo/deep, plum/ember/midnight 전 시리즈 제거.
     --mode-pearl-hi 는 코어 톤 reserved (사용처 0 이지만 향후 사용 가능).
     --mode-celadon / --mode-celadon-bg 는 .lock-report 에서 사용 중. */
  --mode-pearl-hi:   #EEF1F8;   /* 숨트레이닝 (코어) — reserved */
  --mode-celadon:    #7FB59C;   /* 맑아진 머리 */
  --mode-celadon-bg: #0E2620;

  /* Accent — 한국 쇼핑 별점/❝ glyph 톤 (ember 채도 down).
     §4.2 coach card edge wipe + §4.3 evidence num + §4.4 ❝ glyph 에 *제한적으로* 사용.
     STEEL 단일 톤 유지 원칙은 그대로 — 1px 라인/3-4글자 숫자/glyph 만 허용. */
  --accent-gold:     #F5A623;
  --accent-gold-dim: rgba(245, 166, 35, 0.35);

  /* Semantic --------------------------------------------------- */
  --text-1: var(--steel-hi);
  --text-2: var(--steel-base);
  --text-3: var(--steel-lo);
  --text-4: var(--steel-deep);   /* ⚠ 본문 사용 금지 (contrast 1.9:1). 보더/장식만. */

  --bg-page: var(--steel-abyss);
  --bg-card: var(--steel-ink);
  --bg-tinted: rgba(197, 200, 205, 0.05);
  --bg-elevated: #1E2025;        /* card-on-card / nav surface */

  --border-subtle: rgba(197, 200, 205, 0.14);
  --border-strong: rgba(240, 241, 243, 0.28);
  --hairline:      rgba(255, 255, 255, 0.06);
  --hairline-2:    rgba(255, 255, 255, 0.10);

  /* Spacing — 4pt grid ---------------------------------------- */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   12px;
  --sp-lg:   16px;
  --sp-xl:   20px;
  --sp-xxl:  24px;
  --sp-xxxl: 32px;
  --sp-jumbo: 48px;
  --sp-card:    14px;         /* 카드/dense pair 내부 — 16(--sp-lg)도 12(--sp-md)도 아닌 명확한 톤 */
  --sp-chapter: 64px;         /* chapter 분리 — 48(--sp-jumbo)과 80(--sp-mega) 사이 */
  --sp-mega: 80px;            /* web 전용 — section break */
  --sp-section: 96px;         /* web 전용 — 데스크탑 section padding */

  /* Radius ---------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow — intent-based
     · device : phone mockup (강한 floor + ambient)
     · card : stats-card 일반 elevation
     · card-elevated : calendar/coach inset highlight + 2-layer 패턴
     한 번만 쓰는 unique shadow (sticky-cta gold ring, lock-noti, lock-report)
     는 raw 유지 — 토큰화 시 의미 희석. */
  --sh-device: 0 32px 64px -16px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.45);
  --sh-card: 0 24px 48px -16px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.35);
  --sh-card-elevated: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px -8px rgba(0,0,0,0.5), 0 20px 40px -16px rgba(0,0,0,0.4);

  /* Type — DESIGN_SYSTEM 4-size active scale ------------------ */
  --t-hero:    32px;
  --t-title:   20px;
  --t-body:    16px;
  --t-caption: 13px;

  /* Sub-scale — body↔caption 사이 보강
     · --t-sub    : body(16) ↔ detail(14) 사이 — hero h2, lede, body desktop shrink
     · --t-detail : sub(15) ↔ caption(13) 사이 — sublede, panel, figcaption mobile
     · --t-mini   : caption(13) 미만 — disclaimer, source, copyright, meta(desktop)
     · 한국어 노안 정책: 본문 ≥ 14px 유지, 12px 은 보조 라벨/meta 전용. */
  --t-sub:     15px;
  --t-detail:  14px;
  --t-mini:    12px;

  /* Web 전용 — 한국어 hero +6 보정 (HANDOFF §8.1.3) */
  --t-hero-web-m: 38px;   /* 모바일 H1 — 360 width에서 2줄 정착 */
  --t-hero-web-d: 88px;   /* 데스크탑 H1 — 1440 width에서 압도적 위계 */

  /* Sub-heading — section__h(32) ↔ trust__head(16) 중간 단계 */
  --t-subh-m:    22px;
  --t-subh-d:    28px;

  /* Letter-spacing — eyebrow 단일 정책 (한국어 자모 분리감 회피, 0.22em 같은 wide-track 금지).
     적용처: .eyebrow / .mechanism__subh-tag / 그 외 small-caps 라벨. */
  --ls-eyebrow: 0.12em;

  /* Easing ---------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Korean font stack — Pretendard primary -------------------- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ============================================================
   Base reset & root scoping (.suumt)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font);
  font-feature-settings: "ss06", "tnum";
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ============================================================
   A11y — :focus-visible global + reduced-motion 가드
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--steel-base);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--steel-hi);
  color: var(--steel-ink);
  font-weight: 600;
  border-radius: var(--r-md);
}
.skip-link:focus { top: 8px; }

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

/* ============================================================
   Type primitives — 한국어 dense rendering 보정
   ============================================================ */
.t-hero    { font-size: var(--t-hero);    font-weight: 800; line-height: 1.18; letter-spacing: -0.025em; color: var(--text-1); }
.t-title   { font-size: var(--t-title);   font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--text-1); }
.t-body    { font-size: var(--t-body);    font-weight: 400; line-height: 1.55; color: var(--text-2); }
.t-caption { font-size: var(--t-caption); font-weight: 600; line-height: 1.45; letter-spacing: 0.04em; color: var(--text-2); }

/* Eyebrow — 섹션 분류 라벨. 한국어 자모 분리감 회피 letter-spacing 정책 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--border-strong);
}

/* ============================================================
   .cta — modern self-designed download button.
   Google/Apple official store badges 의 outdated 톤 폐기.
   STEEL 다크 + accent-gold hover, inline SVG store logo, 2-line text.

   ── Component canon ─────────────────────────────────────────
   .cta 는 다크 톤 download button (hero / §3 / final-cta primary).
   .sticky-cta__btn 은 흰색 그라데이션 pill (모바일 sticky).
   시각 의도가 다른 별개 컴포넌트 → 공통 base 추출 X.
   단, accent-gold :focus-visible 정책은 둘 다 공유 — main.css cross-file
   selector group 회피 위해 각자 rule 안에서 동일한 값 유지로 sync 보장.
   ============================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: rgba(28, 30, 34, 0.7);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  color: var(--text-1);
  text-decoration: none;
  transition:
    border-color 220ms var(--ease),
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 220ms var(--ease);
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  /* flex column parent 의 stretch 무시, 컨텐츠 폭에 맞춤 (trust-pill 과 동일 패턴) */
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}
.cta--lg { height: 56px; padding: 0 24px; gap: 16px; }
.cta--md { height: 48px; padding: 0 20px; gap: 13px; }

.cta__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta--lg .cta__icon { width: 30px; height: 30px; }
.cta__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cta__body {
  display: flex;
  align-items: center;
  line-height: 1;
}
.cta__primary {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-1);
}
.cta--lg .cta__primary { font-size: 16px; }

.cta:hover {
  border-color: var(--accent-gold);
  transform: translateY(-1px);
  background: rgba(38, 40, 44, 0.78);
  box-shadow: 0 8px 20px -6px rgba(245, 166, 35, 0.18);
}
.cta:focus-visible {
  /* Component canon: .sticky-cta__btn:focus-visible (main.css) 와 동일 정책.
     accent-gold ring 2px / offset 3px 으로 두 download CTA 의 a11y 통일. */
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}
.cta:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta:hover { transform: none; }
  .cta:active { transform: none; }
}

/* ============================================================
   Trust pill — Hero eyebrow (ghost 톤).
   .cta 와 시각 충돌 회피 위해 background/border/blur 제거, H1 위 단순 label.
   ============================================================ */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  /* padding/background/border/blur 제거 — pure inline text + dot */
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
  text-transform: none;
  /* flex column parent stretch 무시 */
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}
.trust-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mode-celadon);
  box-shadow: 0 0 8px rgba(127,181,156,0.5);
}
</content>
</invoke>