/* ============================================================
   AUTOGEARED — 제안서 디자인 시스템 토큰
   톤: 라이트 엔터프라이즈 (컨설팅) · 딥 블루 포인트 · 한국어 전용
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- 컬러: 지면 ---------- */
  --paper:        oklch(0.985 0.002 250);  /* 기본 배경 — 아주 옅은 쿨 화이트 */
  --surface:      oklch(0.962 0.003 250);  /* 카드/패널 배경 */
  --surface-2:    oklch(0.935 0.005 250);  /* 표 헤더, 깊은 패널 */

  /* ---------- 컬러: 잉크 ---------- */
  --ink:          oklch(0.235 0.025 255);  /* 본문/헤드라인 — 딥 네이비 블랙 */
  --ink-2:        oklch(0.45 0.02 255);    /* 보조 텍스트 */
  --ink-3:        oklch(0.62 0.015 255);   /* 캡션, 라벨 */
  --line:         oklch(0.90 0.005 250);   /* 헤어라인 */
  --line-strong:  oklch(0.78 0.01 250);    /* 강조 괘선 */

  /* ---------- 컬러: 포인트 (딥 블루 단일 계열) ---------- */
  --accent:        oklch(0.52 0.14 255);   /* 핵심 강조 — 차트 주인공, 키워드 */
  --accent-strong: oklch(0.38 0.10 255);   /* 네이비 — 다크 섹션 배경 */
  --accent-deep:   oklch(0.28 0.06 255);   /* 가장 깊은 네이비 */
  --accent-tint:   oklch(0.94 0.025 255);  /* 옅은 블루 배경 */
  --accent-line:   oklch(0.80 0.06 255);   /* 블루 괘선 */
  --card: white;                            /* 카드 배경 — 다크 테마에서 교체 */

  /* ---------- 컬러: 다크 섹션 위 ---------- */
  --on-dark:       oklch(0.97 0.005 250);
  --on-dark-2:     oklch(0.78 0.02 255);
  --on-dark-line:  oklch(0.45 0.05 255);
  --on-dark-accent:oklch(0.78 0.10 255);   /* 다크 위 밝은 블루 */

  /* ---------- 컬러: 데이터 시그널 (동일 명도/채도, 색상만 변화) ---------- */
  --data-1: oklch(0.52 0.14 255);  /* 주인공 = accent */
  --data-2: oklch(0.66 0.09 255);  /* 옅은 블루 */
  --data-3: oklch(0.80 0.05 255);  /* 가장 옅은 블루 */
  --data-neutral: oklch(0.80 0.01 250); /* 비교군 — 회색 */
  --pos:    oklch(0.55 0.12 165);  /* 개선/상승 */
  --neg:    oklch(0.55 0.14 25);   /* 악화/리스크 */

  /* ---------- 타이포 ---------- */
  --font-body:    "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --font-display: "Noto Serif KR", serif;          /* 헤드라인 전용 — 절제해서 사용 */
  --font-mono:    "IBM Plex Mono", monospace;      /* 숫자, 라벨, 단위 */

  /* 슬라이드 스케일 (1920×1080 기준) */
  --fs-display: 104px;  /* 표지 헤드라인 (Serif 700) */
  --fs-h1:      64px;   /* 슬라이드 제목 (Serif 600) */
  --fs-h2:      42px;   /* 소제목 (Sans 700) */
  --fs-lead:    34px;   /* 리드 문장 (Sans 400) */
  --fs-body:    28px;   /* 본문 (Sans 400) */
  --fs-caption: 24px;   /* 캡션/라벨 — 최소 크기 (Sans 500) */
  --fs-stat:    120px;  /* KPI 빅넘버 (Mono 600) */

  /* ---------- 간격 · 형태 ---------- */
  --slide-pad: 120px;       /* 슬라이드 좌우 여백 */
  --slide-pad-v: 96px;      /* 슬라이드 상하 여백 */
  --gap-1: 12px; --gap-2: 20px; --gap-3: 32px; --gap-4: 56px; --gap-5: 88px;
  --radius: 4px;            /* 각진 형태 — 신뢰감. 큰 라운드 금지 */
  --shadow: 0 1px 2px oklch(0.2 0.02 255 / 0.06), 0 8px 28px oklch(0.2 0.02 255 / 0.07);
}

/* ---------- 공용 베이스 ---------- */
.ag-base {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum"; /* 표 안 숫자 정렬 */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* 라벨 — 모노 소형 대문자 스타일 (한국어는 letter-spacing으로) */
.ag-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.ag-label--accent { color: var(--accent); }

/* 키 숫자 */
.ag-stat {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-stat);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ag-stat small { font-size: 0.45em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

/* 헤드라인 */
.ag-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.22; letter-spacing: -0.01em; }
.ag-h1      { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.3; letter-spacing: -0.005em; }
.ag-h2      { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); line-height: 1.35; }
.ag-lead    { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ag-body    { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

/* 강조 — 본문 속 키워드는 굵기+잉크색으로만 (색 남발 금지) */
.ag-em { font-weight: 700; color: var(--ink); }
.ag-em--accent { font-weight: 700; color: var(--accent); }