/* ============================================================
   Pretendard — 로컬 self-host
   CDN dynamic-subset(유니코드 범위별 woff2 분할)은 글자 단위로
   순차 교체돼 텍스트가 튀어 보인다. 단일 variable woff2 로 대체.
   폴백은 size-adjust 90.4% 로 Pretendard 와 폭을 맞춰(실측)
   폰트 교체 순간의 레이아웃 이동을 없앤다.
   서브셋: KS X 1001 상용 한글 2,350자 + 라틴·기호 = 419KB (원본 1.96MB).
   원본은 fonts/PretendardVariable.woff2 로 남겨둔다 — 문구에 KS X 1001
   밖 글자를 쓰게 되면 아래 명령으로 서브셋을 다시 만든다.
   python -m fontTools.subset fonts/PretendardVariable.woff2      --text-file=_subset_chars.txt --layout-features='kern,liga,calt,tnum'      --flavor=woff2 --output-file=fonts/Pretendard-subset.woff2
   ============================================================ */
@font-face {
  font-family: "Pretendard Variable";
  src: url("./fonts/Pretendard-subset.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard Fallback";
  src:
    local("Malgun Gothic"), local("맑은 고딕"), local("Apple SD Gothic Neo"),
    local("Noto Sans KR"), local("Arial");
  size-adjust: 90.4%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ============================================================
   R&D빌더스 디자인 토큰 v1.0 — DESIGN.md §1~§6 확정값
   와이어프레임·퍼블리싱은 이 블록을 그대로 붙여넣고 시작한다.
   ============================================================ */
:root {
  /* ---- 컬러: 네이비 ---- */
  --navy-50: #f2f5fa;
  --navy-100: #e4eaf3;
  --navy-200: #c7d2e6;
  --navy-300: #9fb1cf;
  --navy-400: #6e86b0;
  --navy-500: #46618f;
  --navy-600: #2e4770;
  --navy-700: #1e355c;
  --navy-800: #12294d;
  --navy-900: #0b1b36;
  /* ---- 컬러: 오렌지 ---- */
  --orange-50: #fef3ec;
  --orange-100: #fde3d3;
  --orange-200: #fac6a6;
  --orange-300: #f7a272;
  --orange-400: #f48443;
  --orange-500: #f26722;
  --orange-600: #d9530f;
  --orange-700: #b4430c;
  --orange-800: #8c340a;
  --orange-900: #6b2807;
  /* ---- 컬러: 슬레이트 ---- */
  --slate-50: #f7f8fa;
  --slate-100: #eef0f4;
  --slate-200: #e2e6ec;
  --slate-300: #c9cfd9;
  --slate-400: #a5adbc;
  --slate-500: #7b8496;
  --slate-550: #6b7488;
  --slate-600: #586274;
  --slate-700: #434c5c;
  --slate-800: #2e3542;
  --slate-900: #141821;
  /* ---- 컬러: 시안 (로고 계승) ---- */
  --cyan-50: #edf7fb;
  --cyan-100: #d6eef6;
  --cyan-200: #abddec;
  --cyan-300: #74c6de;
  --cyan-400: #3fb2d2;
  --cyan-500: #21a7cc;
  --cyan-600: #1b89a8;
  --cyan-700: #166c85;
  --cyan-800: #115163;
  --cyan-900: #0c3a47;
  /* ---- 시맨틱: 서피스·보더 ---- */
  --surface: #ffffff;
  --surface-alt: #f7f8fa;
  --surface-paper: #fbf9f4;
  --surface-inverse: #12294d;
  --surface-footer: #0b1b36;
  --border: #e2e6ec;
  --border-strong: #c9cfd9;
  /* ---- 시맨틱: 텍스트 ---- */
  --text-primary: #141821;
  --text-secondary: #434c5c;
  --text-tertiary: #687186; /* 4.60:1 on --surface-alt (#f7f8fa) — 흰 배경만 보고 잡으면 회색 밴드에서 4.41:1 로 떨어진다 */
  --text-heading: #12294d;
  --text-inverse: #ffffff;
  --text-inverse-muted: #b9c6de;
  --text-inverse-faint: #8da2c4;
  /* ---- 시맨틱: 액센트·상태 ---- */
  --accent: #f26722; /* 그래픽 액센트 전용 — 텍스트 금지 */
  --accent-cta: #d9530f; /* 전환 CTA 버튼 bg — 백색 19px/700 전용 */
  --accent-text: #b4430c; /* 오렌지 텍스트 강조 (5.60:1) */
  --link: #166c85;
  --success: #1f7a4d;
  --success-bg: #eaf3ee;
  --warning: #8a5a00;
  --warning-bg: #fbf3e0;
  --danger: #b4432e;
  --danger-bg: #faedea;
  --focus-ring: #1b89a8;
  --focus-ring-inverse: #74c6de;
  /* ---- 데이터 시각화 ---- */
  --dv-cat-1: #12294d;
  --dv-cat-2: #1b89a8;
  --dv-cat-3: #6e86b0;
  --dv-cat-4: #1f7a4d;
  --dv-cat-5: #7b8496;
  --dv-highlight: #f26722;
  --dv-active: #1f7a4d;
  --dv-seq-1: #e4eaf3;
  --dv-seq-2: #c7d2e6;
  --dv-seq-3: #9fb1cf;
  --dv-seq-4: #46618f;
  --dv-seq-5: #12294d;
  --dv-grid: #eef0f4;
  --dv-axis: #c9cfd9;
  --dv-label: #434c5c;
  --dv-tick: #6b7488;
  /* ---- 타이포그래피 (PC 기본값, 모바일은 하단 미디어쿼리) ---- */
  --font-sans:
    "Pretendard Variable", "Pretendard Fallback", "Pretendard", "Noto Sans KR",
    -apple-system, "Malgun Gothic", sans-serif;
  --fs-display: 52px;
  --lh-display: 1.16;
  --ls-display: -0.03em;
  --fw-display: 800;
  --fs-h1: 40px;
  --lh-h1: 1.25;
  --ls-h1: -0.03em;
  --fw-h1: 700;
  --fs-h2: 32px;
  --lh-h2: 1.3;
  --ls-h2: -0.02em;
  --fw-h2: 700;
  --fs-h3: 22px;
  --lh-h3: 1.4;
  --ls-h3: -0.02em;
  --fw-h3: 700;
  --fs-h4: 17px;
  --lh-h4: 1.45;
  --ls-h4: -0.01em;
  --fw-h4: 700;
  --fs-stat: 32px;
  --lh-stat: 1.2;
  --ls-stat: -0.02em;
  --fw-stat: 800;
  --fs-body-lg: 18px;
  --lh-body-lg: 1.6;
  --ls-body-lg: -0.01em;
  --fs-body: 16px;
  --lh-body: 1.65;
  --ls-body: -0.01em;
  --fs-caption: 13px;
  --lh-caption: 1.5;
  --ls-caption: 0;
  --fs-label: 13px;
  --lh-label: 1.4;
  --ls-label: 0.04em;
  --fw-label: 700;
  /* ---- 스페이싱 (4px 베이스) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;
  --sect-pad-y: 96px;
  --sect-header-mb: 40px;
  --hero-pad-y: 72px;
  /* ---- 그리드 ---- */
  --container-max: 1200px;
  --grid-gutter: 24px;
  --page-margin: 32px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  /* ---- 라운드·보더·섀도우 ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --bw-1: 1px;
  --bw-2: 2px;
  --shadow-1:
    0 1px 2px rgba(20, 24, 33, 0.06), 0 1px 3px rgba(20, 24, 33, 0.04);
  --shadow-2:
    0 4px 16px rgba(18, 41, 77, 0.1), 0 2px 4px rgba(18, 41, 77, 0.05);
  /* ---- 모션 ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 480ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.15, 1);
  /* ---- 히어로 ---- */
  --hero-min-h: 520px;
  --hero-scrim: linear-gradient(
    180deg,
    rgba(11, 27, 54, 0) 45%,
    rgba(11, 27, 54, 0.62) 100%
  );
  /* ---- 컴포넌트 치수 ---- */
  --nav-h: 76px;
  --nav-h-condensed: 60px;
  --btn-h-lg: 52px;
  --btn-h-md: 44px;
  --btn-h-sm: 36px;
  --field-h: 52px;
  --chip-h: 36px;
  --tag-h: 24px;
  --touch-min: 44px;
}

/* ---- 모바일 토큰 오버라이드 (≤767px) ---- */
@media (max-width: 767px) {
  :root {
    --fs-display: 34px;
    --lh-display: 1.22;
    --fs-h1: 30px;
    --lh-h1: 1.28;
    --fs-h2: 24px;
    --lh-h2: 1.35;
    --fs-h3: 19px;
    --fs-h4: 16px;
    --fs-stat: 28px;
    --fs-body-lg: 16px;
    --lh-body-lg: 1.65;
    --fs-body: 15px;
    --lh-body: 1.7;
    --fs-caption: 12px;
    --fs-label: 12px;
    --sect-pad-y: 64px;
    --sect-header-mb: 32px;
    --hero-pad-y: 48px;
    --grid-gutter: 16px;
    --page-margin: 20px;
    --nav-h: 60px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --grid-gutter: 20px;
    --page-margin: 32px;
  }
}

/* ---- 베이스 규칙 (토큰과 함께 필수 적용) ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
.num,
.stat-value,
td.num,
.kpi-value {
  font-variant-numeric: tabular-nums;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.on-dark :focus-visible {
  outline-color: var(--focus-ring-inverse);
}
.logo-lockup svg {
  display: block;
  height: 100%;
  width: auto;
} /* 심볼:워드마크 = 2:1 */

/* ---- reduced-motion (전역 필수) ---- */
@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;
  }
}