/* KEYSTONE — Editorial Light v2.0 · design tokens (web)
   값의 정본: tokens.json + keystone.design.md. PPTX가 주 매체(golden/ppt/) — 본 CSS는 웹 파생물.
   폰트: 한글 Pretendard / 영문·숫자 HalenoirExpanded-Regular. 3rd 폰트 금지.
   자간 0 또는 음수만(양수 금지). 카드 샤프(0), 칩만 999px. KEYSTONE Blue는 점·선·라벨에만 절제. */

/* >>> GENERATED by design-systems/tools/ds-tokens.py — 손으로 고치지 마세요. 값은 tokens.json <<< */
@font-face { font-family:"Pretendard"; font-weight:400; src:url("fonts/Pretendard-Regular.otf"); font-display:swap; }
@font-face { font-family:"Pretendard SemiBold"; font-weight:600; src:url("fonts/Pretendard-SemiBold.otf"); font-display:swap; }
@font-face { font-family:"Pretendard"; font-weight:700; src:url("fonts/Pretendard-Bold.otf"); font-display:swap; }
@font-face { font-family:"HalenoirExpanded-Regular"; font-weight:400; src:url("fonts/HalenoirExpanded-Regular.otf"); font-display:swap; }
@font-face { font-family:"HalenoirExpanded-DemiBold"; font-weight:600; src:url("fonts/HalenoirExpanded-DemiBold.otf"); font-display:swap; }

:root {
  /* palette — color + colorDerived + colorState (웹 화이트리스트의 정본) */
  --ks-black: #000000;
  --ks-canvas: #FFFFFF;
  --ks-hairline-strong: #1A1A1A;
  --ks-body: #4B4B4B;
  --ks-muted: #AFAFAF;
  --ks-border: #E2E2E2;
  --ks-chip: #EFEFEF;
  --ks-surface: #F7F7F7;
  --ks-accent: #3971D1;
  --ks-body-on-dark: #CFCFCF;
  --ks-border-on-dark: #333333;
  --ks-muted-soft: #7A7A7A;
  --ks-tint: #F3F6FC;
  --ks-tint-mid: #E7EEF9;
  --ks-tint-strong: #D7E3F6;
  --ks-line-soft: #C6C6C6;

  /* type family */
  --ks-font-kr: 'Pretendard', sans-serif;
  --ks-font-kr-sb: 'Pretendard SemiBold', sans-serif;
  --ks-font-en: 'HalenoirExpanded-Regular', Helvetica, Arial, sans-serif;

  /* type scale (web) */
  --ks-text-cover-display-en: 116px;
  --ks-text-cover-display-kr: 90px;
  --ks-text-chapter-number: 300px;
  --ks-text-slide-title-kr: 54px;
  --ks-text-subtitle-kr: 26px;
  --ks-text-section-label: 13.33px;
  --ks-text-body-kr: 16px;
  --ks-text-card-title-kr: 24px;
  --ks-text-card-body-kr: 16px;
  --ks-text-big-number-kpi: 180px;
  --ks-text-chrome: 13.33px;

  /* radius */
  --ks-radius-card: 0;
  --ks-radius-chip: 999px;

  /* motion — duration */
  --ks-dur-fast: 200ms;
  --ks-dur-base: 400ms;
  --ks-dur-slow: 700ms;

  /* motion — easing */
  --ks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ks-ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);

  /* etc */
  --ks-track: 0;
}
/* <<< END GENERATED >>> */

/* ── surfaces ───────────────────────────────────────── */
.ks-canvas { background:var(--ks-canvas); color:var(--ks-black); font-family:var(--ks-font-kr); }
.ks-dark   { background:var(--ks-black); color:var(--ks-canvas); }   /* 디바이더·강조·클로징 (다크 ≤ 30%) */

/* ── type ───────────────────────────────────────────── */
.ks-eyebrow  { font-family:var(--ks-font-en); text-transform:uppercase; letter-spacing:var(--ks-track);
               font-size:10pt; color:var(--ks-muted); }
.ks-title    { font-family:var(--ks-font-kr-sb); font-weight:600; color:var(--ks-black); letter-spacing:var(--ks-track); line-height:1.2; }
.ks-subtitle { font-family:var(--ks-font-kr); color:var(--ks-body); line-height:1.4; }
.ks-body     { font-family:var(--ks-font-kr); color:var(--ks-body); line-height:1.55; font-size:16px; }  /* floor 12pt */
.ks-num      { font-family:var(--ks-font-en); letter-spacing:var(--ks-track); }
.ks-accent   { color:var(--ks-accent); }

/* ── components ─────────────────────────────────────── */
.ks-card { background:var(--ks-canvas); border:1px solid var(--ks-border); border-radius:var(--ks-radius-card); box-shadow:none; padding:24px; }
.ks-card--dark { background:var(--ks-black); color:var(--ks-canvas); border:0; }
.ks-card--dark .ks-eyebrow { color:var(--ks-accent); }

/* Surface Callout — ⛔ 좌측 세로 막대기 금지(2026-07-24 대표 피드백). 서피스 + 블루 라벨만. */
.ks-callout { background:var(--ks-surface); padding:20px 28px; border-radius:0; }
.ks-callout > .ks-eyebrow { color:var(--ks-accent); }

.ks-hairline { border:0; border-top:1px solid var(--ks-border); }       /* 강조 시 --ks-hairline-strong */
.ks-chip { display:inline-flex; align-items:center; background:var(--ks-chip); color:var(--ks-black);
           border-radius:var(--ks-radius-chip); padding:6px 14px; font-family:var(--ks-font-en); text-transform:uppercase; letter-spacing:var(--ks-track); }
.ks-chip--inverted { background:var(--ks-black); color:var(--ks-canvas); }

/* footer */
.ks-footer { border-top:1px solid var(--ks-border); display:flex; justify-content:space-between; padding-top:12px; }
.ks-footer .wordmark { font-family:var(--ks-font-en); letter-spacing:var(--ks-track); color:var(--ks-black); }
.ks-footer .doc { font-family:var(--ks-font-en); color:var(--ks-muted); }