/* 디자인 토큰 (색·그림자·간격 변수). 가장 먼저 읽혀야 한다.
   원래 style.css 한 파일이었다. base.html 의 읽는 순서를 바꾸면
   나중 규칙이 앞 규칙을 덮어쓰는 순서가 깨진다. */

/* =====================================================
   라이트 대시보드 디자인 시스템 (v1.0)  — design.md 기준
   - 연그레이 캔버스 위에 떠 있는 화이트 카드
   - 딥네이비(누르는 액션) + 티얼(상태 강조) 투톤
   - 볼록/오목 그림자(뉴모피즘)는 걷어내고 헤어라인 보더로
   ===================================================== */

:root {
  /* --- 바탕 --- */
  --canvas: #eef0f4;         /* 페이지 배경 */
  --surface: #ffffff;        /* 카드 · 쉘 */
  --surface-soft: #f3f5f8;   /* 중첩 패널, input, 표 헤더 */

  /* --- 보더 --- */
  --border: #e7e9ee;         /* 기본 헤어라인 */
  --border-strong: #d7dbe3;  /* input / select */

  /* --- 글자 --- */
  --text: #20243a;
  --text-soft: #4b5566;
  --muted: #8b93a1;

  /* --- 포인트 (투톤) --- */
  --navy: #2b2a45;           /* 누르는 액션: primary 버튼, 선택된 답 */
  --navy-hover: #383754;
  --accent: #1f7d8c;         /* 상태 강조: 링크, 활성 탭, 진행률 */
  --accent-soft: #e6f1f1;

  /* --- 상태 --- */
  --good: #177f6d;    --good-bg: #e3f5f1;
  --warn: #b06a13;    --warn-bg: #fff2e0;
  --bad: #c1493c;     --bad-bg: #fdeceb;
  --neutral: #667085; --neutral-bg: #eef0f4;

  /* --- 옛 이름 별칭 (기존 CSS 2700줄이 그대로 동작하도록) --- */
  --bg: var(--canvas);
  --surface-2: var(--surface-soft);
  --line: var(--border);
  --choice-border: var(--border-strong);
  --green: var(--good);
  --orange: var(--warn);
  --danger: var(--bad);
  --light: #ffffff;
  --dark: rgba(32, 36, 58, 0.08);

  /* --- 모양 --- */
  --r-card: 16px;
  --r-container: 20px;
  --r-btn: 12px;

  /* --- 그림자: 캔버스 위에 살짝 떠 있는 정도만 --- */
  --raised: 0 1px 2px rgba(32, 36, 58, 0.04), 0 4px 14px rgba(32, 36, 58, 0.05);
  --raised-sm: 0 1px 2px rgba(32, 36, 58, 0.04), 0 2px 6px rgba(32, 36, 58, 0.04);
  /* 예전 '오목' 자리 = 이제 헤어라인 보더 */
  --inset: inset 0 0 0 1px var(--border);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 숫자·영문은 Plus Jakarta Sans, 한글은 Pretendard 로 자동 폴백 */
  font-family: "Plus Jakarta Sans", "Pretendard", "Pretendard Variable",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--canvas);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 숫자(통계·표·점수)는 자릿수 정렬 */
table, .stat, .stat strong, .result-stat-row, .dash-stat, .num,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}