/* ==========================================================================
   Team Jangwon 디자인 토큰
   근거 문서: DESIGN.md
   이 파일의 값을 바꾸면 사이트 전체에 반영됩니다.
   개별 컴포넌트에서 값을 직접 적지 말고 반드시 여기 토큰을 참조하십시오.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     서체
     국문 본문은 Pretendard로 확정되었습니다. 다른 서체로 교체하지 마십시오.
     한자 대체 서체(Noto Sans KR)를 제거하지 마십시오.
     제시문에 등장하는 한자가 시스템 기본 서체로 떨어집니다.
     ------------------------------------------------------------------ */
  --font-body: "Pretendard Variable", Pretendard, "Noto Sans KR",
               system-ui, -apple-system, sans-serif;
  --font-label: "Gowun Batang", "Noto Serif KR", serif;
  --font-numeric: "Pretendard Variable", Pretendard, system-ui, sans-serif;

  /* ------------------------------------------------------------------
     타입 스케일
     자간은 글자 크기에 반비례합니다. 이 관계를 깨지 마십시오.
     ------------------------------------------------------------------ */
  --type-hero-size: 44px;      --type-hero-weight: 700;
  --type-hero-tracking: -0.03em;  --type-hero-leading: 1.22;

  --type-h1-size: 32px;        --type-h1-weight: 700;
  --type-h1-tracking: -0.025em;   --type-h1-leading: 1.30;

  --type-h2-size: 24px;        --type-h2-weight: 600;
  --type-h2-tracking: -0.02em;    --type-h2-leading: 1.35;

  --type-h3-size: 20px;        --type-h3-weight: 600;
  --type-h3-tracking: -0.015em;   --type-h3-leading: 1.40;

  --type-passage-size: 17px;   --type-passage-weight: 400;
  --type-passage-tracking: -0.01em;  --type-passage-leading: 1.85;

  --type-body-size: 16px;      --type-body-weight: 400;
  --type-body-tracking: -0.01em;  --type-body-leading: 1.75;

  --type-body-sm-size: 15px;   --type-body-sm-weight: 400;
  --type-body-sm-tracking: -0.005em; --type-body-sm-leading: 1.70;

  --type-ui-size: 14px;        --type-ui-weight: 500;
  --type-ui-tracking: 0;          --type-ui-leading: 1.50;

  --type-caption-size: 13px;   --type-caption-weight: 400;
  --type-caption-tracking: 0;     --type-caption-leading: 1.45;

  --type-micro-size: 12px;     --type-micro-weight: 500;
  --type-micro-tracking: 0.01em;  --type-micro-leading: 1.40;

  /* 읽기 영역의 최대 폭. ch 단위는 숫자 0 기준이므로 한글은 약 절반입니다. */
  --measure-reading: 68ch;

  /* ------------------------------------------------------------------
     구조색
     steel-500은 마케팅 자산 전용입니다. 학습 화면에서 navy와 병용 금지.
     ------------------------------------------------------------------ */
  --navy-900: #12294A;
  --navy-700: #1A3B68;
  --navy-500: #2E5A96;
  --navy-100: #D8DAE7;
  --navy-050: #F5F6F9;
  --steel-500: #3B76A2;

  /* 회색 계단. ink-disabled는 대비 3.06이므로 본문 사용 금지. */
  --ink-primary:  #1A3B68;
  --ink-body:     #4A5568;
  --ink-muted:    #6B7280;
  --ink-disabled: #8A94A6;

  --surface:        #FFFFFF;
  --surface-page:   #F7F8FA;
  --surface-subtle: #F5F6F9;

  --line-hairline: #D5D8E0;
  --line-strong:   #1A3B68;

  /* 상태색. 채도를 낮게 유지합니다. */
  --state-success: #1E7A5A;
  --state-warning: #8A6100;
  --state-danger:  #B23A2E;
  --state-danger-bg: #FFF5F4;

  /* ------------------------------------------------------------------
     첨삭 표시색 — 상태색과 절대 섞지 마십시오.

     색은 "무엇에 대한 지적인가"가 아니라 **평가 방향**을 나타냅니다.
     파랑은 잘한 곳, 빨강은 아쉬운 곳. 둘뿐입니다.
     부족한 답안에서 그래도 핵심을 잡은 대목은 파랑,
     잘 쓴 답안에서 더 밀고 갈 수 있는 대목은 빨강으로 잡습니다.

     "무엇에 대한 지적인가"는 색이 아니라 **선 모양**이 말합니다.
     실선=핵심, 물결=논리·근거, 점선=표현 다듬기, 취소선=빼기, 밑점=맞춤법.
     ------------------------------------------------------------------ */
  --mark-good: #2E5A96;      /* 잘한 곳 */
  --mark-work: #B23A2E;      /* 아쉬운 곳 */
  --mark-good-bg: #EDF1F8;   /* 코멘트 카드 바탕 */
  --mark-work-bg: #FDF0EE;

  --mark-thickness: 1.5px;   /* 17px 본문에서 물결과 점선이 구분되는 최소 굵기 */
  --mark-offset: 5px;        /* 받침에 닿지 않는 거리 */

  /* 진척도. 모든 진행 표현이 이 두 값만 씁니다. 순검정, 주황 사용 금지. */
  --progress-fill:  var(--navy-700);
  --progress-track: var(--navy-100);

  /* ------------------------------------------------------------------
     형태
     반경은 아래 두 값과 50%뿐입니다. 다른 값을 추가하지 마십시오.
     ------------------------------------------------------------------ */
  --radius-surface: 0;
  --radius-control: 2px;

  --border-hairline: 1px solid var(--line-hairline);
  --border-strong:   1px solid var(--line-strong);
  --border-focus:    2px solid var(--navy-700);
  --rule-thick: 4px;

  /* 그림자는 떠 있는 요소에만 허용합니다. 색을 순검정이 아니라 네이비로 잡습니다. */
  --shadow-none: none;
  --shadow-overlay: 0 2px 8px rgba(18, 41, 74, 0.12);

  /* 아이콘 */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  /* 빈 상태·단계 결과처럼 화면 가운데 홀로 놓이는 표식. 본문 아이콘이 아니다. */
  --icon-display: 32px;
  --icon-stroke: 1.5px;

  /* ------------------------------------------------------------------
     간격
     ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  --row-height-compact: 40px;

  /* ------------------------------------------------------------------
     모션. 사용자 동작에 응답하는 경우에만 사용합니다.
     ------------------------------------------------------------------ */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ==========================================================================
   다크 모드
   브랜드 네이비를 강조색으로 그대로 쓰면 배경에 묻힙니다.
   표면색으로 강등시키고 명도를 올린 값을 강조색으로 승격시킵니다.
   ========================================================================== */

[data-theme="dark"] {
  --surface-page:   #0E1A2B;
  --surface:        #16263D;
  --surface-subtle: #1B2E48;

  --navy-700: #A8C4E8;   /* 강조색. 어두운 표면 대비 9.76 */
  --navy-500: #8FB3E0;
  --navy-100: #2A3E5C;

  --ink-primary:  #E4E9F2;
  --ink-body:     #C3CCDA;
  --ink-muted:    #94A2B8;
  --ink-disabled: #5C6A80;

  --line-hairline: #2A3E5C;
  --line-strong:   #A8C4E8;

  --state-danger-bg: #35201E;
}

/* ==========================================================================
   한국어 조판 전역 규칙
   word-break: keep-all이 없으면 한국어 문장이 어절 중간에서 잘립니다.
   ========================================================================== */

html {
  background: var(--surface-page);
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  line-height: var(--type-body-leading);
  color: var(--ink-body);

  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;

  /* antialiased는 글자를 얇게 만들어 장시간 읽기에 불리하므로 쓰지 않습니다. */
  -webkit-font-smoothing: auto;
}

h1, h2, h3, h4 {
  color: var(--ink-primary);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* 읽기 전용 영역에만 폭 제한을 겁니다. 목록과 표에는 적용하지 마십시오. */
.reading {
  max-width: var(--measure-reading);
}

/* ==========================================================================
   타입 유틸리티
   ========================================================================== */

.t-hero {
  font-size: var(--type-hero-size); font-weight: var(--type-hero-weight);
  letter-spacing: var(--type-hero-tracking); line-height: var(--type-hero-leading);
}
.t-h1 {
  font-size: var(--type-h1-size); font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking); line-height: var(--type-h1-leading);
}
.t-h2 {
  font-size: var(--type-h2-size); font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking); line-height: var(--type-h2-leading);
}
.t-h3 {
  font-size: var(--type-h3-size); font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking); line-height: var(--type-h3-leading);
}
.t-passage {
  font-size: var(--type-passage-size); font-weight: var(--type-passage-weight);
  letter-spacing: var(--type-passage-tracking); line-height: var(--type-passage-leading);
}
.t-body {
  font-size: var(--type-body-size); font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking); line-height: var(--type-body-leading);
}
.t-body-sm {
  font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight);
  letter-spacing: var(--type-body-sm-tracking); line-height: var(--type-body-sm-leading);
}
.t-ui {
  font-size: var(--type-ui-size); font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking); line-height: var(--type-ui-leading);
}
.t-caption {
  font-size: var(--type-caption-size); font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking); line-height: var(--type-caption-leading);
  color: var(--ink-muted);
}
.t-micro {
  font-size: var(--type-micro-size); font-weight: var(--type-micro-weight);
  letter-spacing: var(--type-micro-tracking); line-height: var(--type-micro-leading);
}

/* 영문 섹션 라벨 전용. 교재와의 연속성을 담당합니다. */
.t-label {
  font-family: var(--font-label);
  color: var(--navy-700);
}

/* 비율 표기. 슬래시 간격을 명시해서 화면 전체에서 통일합니다. */
.ratio__separator {
  margin-inline: 0.2em;
  color: var(--ink-muted);
}

/* ==========================================================================
   초점 표시
   키보드로 과제를 작성하는 경우가 있으므로 절대 제거하지 마십시오.
   ========================================================================== */

:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* ==========================================================================
   모션 축소 설정 존중
   ========================================================================== */

@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;
  }
}