/* 프로덕트 스토리 — generated from tokens.json */

:root, [data-theme="light"] {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-raised: #ffffff;
  --ink: #1d1d1f;
  --ink-copy: #56565b;
  --ink-secondary: #3a3a3d;
  --ink-tertiary: #5f5f64;
  --line: #d2d2d7;
  --track: #e8e8ed;
  --mark-neutral: #aeaeb2;
  --accent-orange: #c2410c;
  --accent-blue: #0071e3;
  --link: #0066cc;
  --positive: #1a7f37;
  --positive-soft: #e4f0e7;
  --caution: #9a5b00;
  --caution-soft: #f3ebe0;
  --negative: #c4312b;
  --negative-soft: #f8e6e6;
  --level-1: #dfdfe0;
  --inverse: #1d1d1f;
  --on-inverse: #ffffff;
  --nav-ring: #e6e6e8;
  --chip-ring: #86868b;
  --cta: #0071e3;
  --stage-light: #f5f5f7;
  --stage-dark: #000000;
  --on-stage-dark: #f5f5f7;
  --on-stage-dark-copy: #a1a1a6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #161617;
    --surface-raised: #1d1d1f;
    --ink: #f5f5f7;
    --ink-copy: #a1a1a6;
    --ink-secondary: #d1d1d6;
    --ink-tertiary: #aeaeb2;
    --line: #3a3a3c;
    --track: #2c2c2e;
    --mark-neutral: #636366;
    --accent-orange: #e8661a;
    --accent-blue: #2997ff;
    --link: #2997ff;
    --positive: #3fb950;
    --positive-soft: #213025;
    --caution: #f0a03c;
    --caution-soft: #362d22;
    --negative: #ff6b61;
    --negative-soft: #382627;
    --level-1: #3b3b3d;
    --inverse: #f5f5f7;
    --on-inverse: #000000;
    --nav-ring: #333336;
    --chip-ring: #6e6e73;
    --cta: #0071e3;
    --stage-light: #f5f5f7;
    --stage-dark: #000000;
    --on-stage-dark: #f5f5f7;
    --on-stage-dark-copy: #a1a1a6;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: #000000;
  --surface: #161617;
  --surface-raised: #1d1d1f;
  --ink: #f5f5f7;
  --ink-copy: #a1a1a6;
  --ink-secondary: #d1d1d6;
  --ink-tertiary: #aeaeb2;
  --line: #3a3a3c;
  --track: #2c2c2e;
  --mark-neutral: #636366;
  --accent-orange: #e8661a;
  --accent-blue: #2997ff;
  --link: #2997ff;
  --positive: #3fb950;
  --positive-soft: #213025;
  --caution: #f0a03c;
  --caution-soft: #362d22;
  --negative: #ff6b61;
  --negative-soft: #382627;
  --level-1: #3b3b3d;
  --inverse: #f5f5f7;
  --on-inverse: #000000;
  --nav-ring: #333336;
  --chip-ring: #6e6e73;
  --cta: #0071e3;
  --stage-light: #f5f5f7;
  --stage-dark: #000000;
  --on-stage-dark: #f5f5f7;
  --on-stage-dark-copy: #a1a1a6;
  color-scheme: dark;
}
:root {
  --space-eyebrow: 20px;
  --space-eyebrow-mobile: 10px;
  --space-lead: 26px;
  --space-lead-mobile: 18px;
  --space-block: 56px;
  --space-stat-row: 56px;
  --space-stat-col: 40px;
  --space-stat-row-mobile: 32px;
  --carousel-gap: 20px;
  --space-panel: 40px;
  --space-tile: 28px;
  --space-caption: 16px;
  --space-media: 64px;
  --section-pad: 128px;
  --section-pad-tablet: 96px;
  --section-pad-mobile: 80px;
  --gutter-min: 16px;
  --radius-panel: 28px;
  --radius-localnav: 18px;
  --radius-tile: 18px;
  --radius-cell: 12px;
  --radius-bar: 4px;
  --radius-swatch: 3px;
  --radius-pill: 980px;
  --content-width: 87.5vw;
  --content-max: 1260px;
  --content-max-mobile: 420px;
  --text-max: 840px;
  --bp-tablet: 1068px;
  --bp-mobile: 734px;
  --carousel-card: 82vw;
  --localnav-max: 1024px;
  --localnav-offset: 10px;
  --localnav-pad-x: 20px;
  --chip-pad-y: 6px;
  --chip-pad-x: 10px;
  --chip-gap: 10px;
  --ratio-hero: 16 / 10;
  --ratio-hero-mobile: 4 / 5;
  --ratio-tile: 4 / 5;
  --ratio-square: 1 / 1;
  --reveal-duration: 1s;
  --state-duration: 0.35s;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-numeric: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.headline-hero { font-family: var(--font-sans); font-size: 80px; line-height: 92px; font-weight: 700; letter-spacing: -0.015em; }
.headline-hero-mobile { font-family: var(--font-sans); font-size: 48px; line-height: 57px; font-weight: 700; letter-spacing: -0.015em; }
.headline-xxl { font-family: var(--font-sans); font-size: 80px; line-height: 92px; font-weight: 700; letter-spacing: -0.015em; }
.headline-xxl-tablet { font-family: var(--font-sans); font-size: 64px; line-height: 75px; font-weight: 700; letter-spacing: -0.015em; }
.headline-xxl-mobile { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.015em; }
.card-headline { font-family: var(--font-sans); font-size: 28px; line-height: 35px; font-weight: 600; letter-spacing: 0; }
.card-headline-tablet { font-family: var(--font-sans); font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: 0; }
.card-headline-mobile { font-family: var(--font-sans); font-size: 21px; line-height: 27px; font-weight: 600; letter-spacing: 0; }
.carousel-headline { font-family: var(--font-sans); font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.01em; }
.localnav-title { font-family: var(--font-sans); font-size: 19px; line-height: 25px; font-weight: 600; letter-spacing: 0; }
.chip { font-family: var(--font-sans); font-size: 12px; line-height: 17px; font-weight: 400; letter-spacing: -0.01em; }
.tile-headline { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
.subhead { font-family: var(--font-sans); font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: 0; }
.eyebrow { font-family: var(--font-sans); font-size: 21px; line-height: 21px; font-weight: 600; letter-spacing: 0; }
.eyebrow-mobile { font-family: var(--font-sans); font-size: 19px; line-height: 25px; font-weight: 600; letter-spacing: 0; }
.lead { font-family: var(--font-sans); font-size: 21px; line-height: 32px; font-weight: 400; letter-spacing: -0.011em; }
.lead-mobile { font-family: var(--font-sans); font-size: 19px; line-height: 29px; font-weight: 400; letter-spacing: -0.011em; }
.lead-emphasis { font-family: var(--font-sans); font-size: 21px; line-height: 32px; font-weight: 500; letter-spacing: -0.011em; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; letter-spacing: -0.02em; }
.body-strong { font-family: var(--font-sans); font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -0.01em; }
.body-reduced { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: -0.02em; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.02em; }
.micro { font-family: var(--font-sans); font-size: 12px; line-height: 17px; font-weight: 400; letter-spacing: -0.01em; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; }
.stat { font-family: var(--font-numeric); font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: 0; }
.stat-reduced { font-family: var(--font-numeric); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: 0; }
.figure { font-family: var(--font-numeric); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
.figure-small { font-family: var(--font-numeric); font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: 0; }