/* 합성 패널 시험 대시보드 — 디자인 토큰
 *
 * 근거: persona/dashboard/TOKENS.md (실측표)
 * 값의 출처는 Vercel Geist 실화면 실측 + Observable Plot 실렌더 실측 + Pretendard 글꼴 지표 실측임.
 * 감으로 고친 값은 없음. 참조와 다른 값에는 전부 근거 주석이 붙어 있음.
 *
 * 라이브러리 0 · 외부 CDN 0 · 다크 모드 없음.
 * 이 파일은 변수와 기본 규칙만 담음. 화면별 배치는 style.css가 담당함.
 */

/* ══════════════════════════════════════════════════════════════════
   1. 타이포  — TOKENS.md §1
   행간은 전부 정수 px. 무단위 비율 금지(소수 행간이 배치를 흔듦).
   자간은 Geist 실측의 절반(한글 side bearing이 라틴의 절반이므로).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --font-sans: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 장 제목 — Geist heading-32 (32/40/-1.28/600), 자간만 절반(-0.02em = -0.64px)
     REF-CAREW 4.3-14 · V2: 24px은 1200폭에서 장 위계가 약함 */
  --t-chapter-size: 32px;
  --t-chapter-line: 40px;
  --t-chapter-track: -0.64px;
  --t-chapter-weight: 600;

  /* 제목 — Geist heading-24 (24/32/-0.96/600), 자간만 절반 */
  --t-title-size: 24px;
  --t-title-line: 32px;
  --t-title-track: -0.48px;
  --t-title-weight: 600;

  /* 부제 — Geist heading-16 (16/24/-0.32/600) 그대로 */
  --t-subtitle-size: 16px;
  --t-subtitle-line: 24px;
  --t-subtitle-track: -0.32px;
  --t-subtitle-weight: 600;

  /* 본문(여러 줄) — Geist copy-14 (14/20/0/400)에서 행간만 22
     한글 잉크 높이가 14px에서 라틴보다 1px 큼 → 라틴과 같은 6px 줄간격 확보 */
  --t-body-size: 14px;
  --t-body-line: 22px;
  --t-body-weight: 400;

  /* 본문(한 줄) — Geist label-14 / copy-14 그대로. 붙을 줄이 없으므로 20 유지 */
  --t-body-tight-line: 20px;

  /* 라벨 — Geist label-13 크기 + 표 머리 실측 굵기 500, 행간만 16→20
     (36px 머리 행에서 위아래 8px 정수) */
  --t-label-size: 13px;
  --t-label-line: 20px;
  --t-label-weight: 500;

  /* 각주 — Geist label-12 (12/16/0/400) 그대로. 기존 11px은 참조에 없어 폐기 */
  --t-caption-size: 12px;
  --t-caption-line: 16px;
  --t-caption-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════
   2. 간격  — TOKENS.md §2
   Geist 실측 사다리: 2·4·5·6·8·10·12·14·16·24·32·40·48
   우리는 8px 배수를 뼈대로, 4와 12만 사이를 메움.
   6·7·10·11·14·20px 은 쓰지 않음(사다리 밖).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* 격자 — DESIGN.md §2 계약 유지 (78×12 + 24×11 = 1200, 정수 검산 통과) */
  --grid-cols: 12;
  --grid-col: 78px;
  --grid-gap: var(--s-6);
  --grid-width: 1200px;
  --page-pad: var(--s-8);
  --section-gap: var(--s-12);

  /* 조작 요소 높이 사다리 — Geist button/menu 실측 */
  --ctl-h-sm: 32px;   /* 좌우 6, 모서리 6 */
  --ctl-h-md: 36px;   /* 좌우 10, 모서리 6 — 기본 */
  --ctl-h-lg: 40px;   /* 좌우 14, 모서리 8 */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   3. 색  — TOKENS.md §3
   중립은 Geist 라이트 테마 변수 원문 그대로.
   범주형·순차형·경고색은 DESIGN.md §4 프로젝트 계약 유지.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* 면 — Geist background-100/200, gray-100 */
  --surface-canvas: #fafafa;
  --surface-card: #ffffff;
  --surface-sunken: #f2f2f2;

  /* 글자 — 2단 위계. Geist는 표 머리·본문 모두 gray-900을 쓰고 굵기로만 가름 */
  --text-strong: #171717;   /* gray-1000 · 흰 바탕 대비 17.93 */
  --text-default: #4d4d4d;  /* gray-900  · 대비 8.45 */
  --text-faint: #8f8f8f;    /* gray-700  · 대비 3.23 — 비활성·플레이스홀더 전용, 본문 금지 */

  /* 다크 면 — REF-CAREW 2.2-5 해석 가드레일 · 3.4 규격 선언 띠 전용 */
  --surface-dark: #1a1a1a;
  --text-on-dark: #f2f2f2;          /* #1a1a1a 위 대비 15.3 */
  --text-on-dark-faint: #c9c9c9;    /* 〃 대비 9.6 */

  /* 읽는 법 콜아웃 면 — REF-CAREW 2.2-7 · 4.4(d) */
  --surface-info: #eef3f7;

  /* 선 — 알파. 흰 카드와 #fafafa 캔버스에서 같은 무게를 내려면 불투명 회색으로는 안 됨 */
  --line-weak: rgba(0, 0, 0, 0.08);   /* Geist gray-alpha-400 */
  --line-strong: #c9c9c9;             /* Geist gray-500 */
  --line-axis: rgba(60, 60, 67, 0.35);
  --line-grid: rgba(60, 60, 67, 0.1); /* Observable Plot 격자선 실측 */

  /* 범주형 6색 — DESIGN.md §4.2 배정 고정. 흑백·색각 이상 대비 확보 */
  --cat-1: #1f3352; /* 핵심 타깃군 · 콘셉트 A · 대비 12.70 */
  --cat-2: #2f6f86; /* 서브 타깃군 · 콘셉트 B · 대비 5.62 */
  --cat-3: #1f5f3f; /* 콘셉트 C · 대비 7.59 */
  --cat-4: #7a4b00; /* 성향 패널 · 대비 7.41 */
  --cat-5: #6b4f8a; /* 예비 · 대비 6.75 */
  --cat-6: #9a9aa5; /* 대조군 · 콘셉트 D(위약) · 대비 2.79 — 면·선 전용, 글자색 금지 */

  /* 순차형 5단 — DESIGN.md §4.3 */
  --seq-1: #eaeef4;
  --seq-2: #c3cede;
  --seq-3: #93a6c0;
  --seq-4: #5f7797;
  --seq-5: #33496b;

  /* 경고 1색 — DESIGN.md §4.4. 대비 9.28 (Geist red-800 #e70022는 4.75로 더 밝음) */
  --alert: #8a1c1c;

  /* 강조·링크 — Geist blue-700 #0070f7은 대비 3.6으로 본문 크기에서 AA 미달 */
  --accent: var(--cat-1);
  --focus-ring: var(--cat-1);
}

/* ══════════════════════════════════════════════════════════════════
   4. 기본 규칙
   ══════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-line);
  letter-spacing: 0;
  /* 서브셋 woff2의 GSUB tnum 피처 동작 확인함: 1111 과 8888 이 같은 폭 */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, h1, h2, h3, h4, figure { margin: 0; }

/* ── 4.1 타이포 5단계 ── */
.t-title {
  font-size: var(--t-title-size);
  line-height: var(--t-title-line);
  letter-spacing: var(--t-title-track);
  font-weight: var(--t-title-weight);
  color: var(--text-strong);
}
.t-subtitle {
  font-size: var(--t-subtitle-size);
  line-height: var(--t-subtitle-line);
  letter-spacing: var(--t-subtitle-track);
  font-weight: var(--t-subtitle-weight);
  color: var(--text-strong);
}
.t-body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  color: var(--text-default);
}
/* 한 줄짜리 값·표 셀·배지. Geist의 Label ↔ Copy 분리 */
.t-body-1 {
  font-size: var(--t-body-size);
  line-height: var(--t-body-tight-line);
  font-weight: var(--t-body-weight);
  color: var(--text-default);
}
.t-label {
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  color: var(--text-default);
}
.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  font-weight: var(--t-caption-weight);
  color: var(--text-default);
}
.t-strong { color: var(--text-strong); }
.t-faint { color: var(--text-faint); }

/* ── 4.2 격자 ── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }
.section + .section { margin-top: var(--section-gap); }

/* ── 4.3 카드 — Geist 예제 상자 실측 (테두리 1px 검정 8% · 그림자 없음)
   모서리는 0. REF-CAREW 4.3-4 · V1: 표·격자·매트릭스가 주력 화면이라
   8px 라운드가 셀 격자와 어긋남(참조 전 요소 0, 예외 0) ── */
.card {
  padding: var(--s-6);
  background: var(--surface-card);
  border: 1px solid var(--line-weak);
  border-radius: 0;
  box-shadow: none;
}
.card > .card-title {
  font-size: var(--t-subtitle-size);
  line-height: var(--t-subtitle-line);
  letter-spacing: var(--t-subtitle-track);
  font-weight: var(--t-subtitle-weight);
  color: var(--text-strong);
}
.card > .card-sub {
  margin-top: var(--s-1);
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  color: var(--text-default);
}
.card > .card-title + .card-body,
.card > .card-sub + .card-body { margin-top: var(--s-4); }
/* 표를 담는 카드는 안여백 0, 머리만 따로 */
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: var(--s-6) var(--s-6) var(--s-4); }

/* ── 4.4 수치 카드 3줄 — Geist Description 실측(라벨→값 8px 고정) ──
   높이 산수: 20 + 8 + 32 + 8 + 16 = 84, + 안여백 24×2 + 테두리 2 = 134
   최소 높이만 걸고 고정하지 않음. 내용이 넘치면 늘어나야 함. */
.metric {
  display: flex;
  flex-direction: column;
  min-height: 134px;
  padding: var(--s-6);
  background: var(--surface-card);
  border: 1px solid var(--line-weak);
  border-radius: 0;   /* V1 */
}
.metric > .metric-label {
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  color: var(--text-default);
}
.metric > .metric-value {
  margin-top: var(--s-2);
  /* 높이를 못박음. 단위 글자(.unit)가 인라인으로 들어가면 line-box가 32→35px로
     늘어나 카드 높이가 3px 흔들림 — 실측으로 확인함 */
  height: var(--t-title-line);
  font-size: var(--t-title-size);
  line-height: var(--t-title-line);
  letter-spacing: var(--t-title-track);
  font-weight: var(--t-title-weight);
  color: var(--text-strong);
}
.metric > .metric-value .unit {
  font-size: var(--t-body-size);
  line-height: 1;
  font-weight: var(--t-label-weight);
  letter-spacing: 0;
  color: var(--text-default);
}
.metric > .metric-foot {
  margin-top: var(--s-2);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  font-weight: var(--t-caption-weight);
  color: var(--text-default);
}
/* 한 줄에 놓인 수치 카드는 값의 높이를 서로 맞춤 */
.metric-row { display: grid; gap: var(--grid-gap); align-items: stretch; }

/* ── 4.5 표 — Geist table 실측 ──
   머리 36 · 본문 40 · 선은 머리 아래 1줄만 · 셀에 세로 여백이 있어야 두 줄이 늘어남 */
/* border-collapse: collapse 는 머리 아래 1px 선을 th와 td가 0.5px씩 나눠 가져
   첫 행 높이가 40.5px이 됨 — 실측으로 확인함. separate 로 두고 선은 th에만 그림 */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--surface-card);
  border-bottom: 1px solid var(--line-weak);
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  color: var(--text-default);
  text-align: left;
  white-space: nowrap;
}
.tbl tbody td {
  height: 40px;              /* 최소 높이로만 작동 — padding이 있어 내용이 늘면 행도 늘어남 */
  padding: 10px var(--s-3);
  border: 0;                 /* 행마다 선을 긋지 않음 */
  font-size: var(--t-body-size);
  line-height: var(--t-body-tight-line);
  font-weight: var(--t-body-weight);
  color: var(--text-default);
  vertical-align: middle;
}
.tbl tbody tr:nth-child(even) td { background: var(--surface-canvas); }
.tbl tbody tr:hover td,
.tbl tbody tr.is-hot td { background: var(--surface-sunken); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl td.name { color: var(--text-strong); }
/* 이름·군 같은 짧은 열은 꺾이면 안 됨. 긴 열만 접어서 행이 늘어나게 함 */
.tbl td.nowrap, .tbl th.nowrap { white-space: nowrap; }
.tbl tbody tr.is-dropped td { color: var(--text-faint); }
.tbl-foot {
  padding: var(--s-3) var(--s-3) var(--s-4);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  color: var(--text-default);
}

/* ── 4.6 배지 — Geist badge 실측(높이 24 · 글자 12/500). 모서리 0(V1) ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 24px;
  padding: 2px 10px;
  border-radius: 0;
  font-size: var(--t-caption-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  white-space: nowrap;
}
.badge-pass { background: var(--surface-sunken); color: var(--text-strong); border: 1px solid var(--line-weak); }
.badge-fail { background: var(--surface-card); color: var(--alert); border: 1px solid var(--alert); }
.badge-assume { background: var(--surface-sunken); color: var(--text-default); border: 1px solid transparent; }
.badge-drop { background: var(--surface-card); color: var(--text-default); border: 1px solid var(--line-strong); }

/* ── 4.7 조작 요소 ── */
.ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--ctl-h-md);
  padding: 0 10px;
  border: 1px solid var(--line-weak);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--t-body-size);
  line-height: var(--t-body-tight-line);
  font-weight: var(--t-label-weight);
  color: var(--text-strong);
  cursor: pointer;
}
.ctl:hover { background: var(--surface-sunken); }
.ctl-sm { height: var(--ctl-h-sm); padding: 0 6px; }
.ctl-lg { height: var(--ctl-h-lg); padding: 0 14px; border-radius: var(--radius-lg); font-size: var(--t-subtitle-size); }

/* ── 4.8 내비 — Geist menu 항목 실측(높이 36 · 좌우 10 · 모서리 6 · 14/500) ── */
:root { --nav-w: 200px; }   /* 240 → 200. 1440에서 12열 격자에 내주는 폭을 40px 늘림 */
.nav {
  position: sticky;
  top: 0;
  flex: 0 0 var(--nav-w);
  width: var(--nav-w);
  height: 100vh;
  overflow-y: auto;
  padding: var(--s-6) var(--s-3);
  background: var(--surface-card);
  border-right: 1px solid var(--line-weak);
}
.nav-title {
  padding: 0 10px;
  font-size: var(--t-subtitle-size);
  line-height: var(--t-subtitle-line);
  letter-spacing: var(--t-subtitle-track);
  font-weight: var(--t-subtitle-weight);
  color: var(--text-strong);
}
.nav-sub {
  margin-top: var(--s-1);
  padding: 0 10px;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  color: var(--text-default);
}
.nav-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--ctl-h-md);
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: var(--t-body-size);
  line-height: var(--t-body-tight-line);
  font-weight: var(--t-body-weight);
  color: var(--text-default);
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-sunken); }
.nav-item[aria-current="page"] {
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-weight: var(--t-label-weight);
}
.nav-item .idx {
  flex: 0 0 16px;
  font-size: var(--t-caption-size);
  line-height: var(--t-label-line);
  font-weight: var(--t-label-weight);
  color: var(--text-default);
}
.nav-item[aria-current="page"] .idx { color: var(--text-strong); }

/* ── 4.9 차트 — Observable Plot 실렌더 실측. 한 차트 안 글자 단계는 2개까지 ── */
.chart text { font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .tick-label {
  font-size: var(--t-caption-size);   /* Plot 실측 10px → 한글 판독 위해 12px */
  font-weight: 400;
  fill: var(--text-default);
}
.chart .axis-title {
  font-size: var(--t-caption-size);
  font-weight: var(--t-label-weight);
  fill: var(--text-default);
}
.chart .axis-line { stroke: var(--line-axis); stroke-width: 1; }
.chart .grid-line { stroke: var(--line-grid); stroke-width: 1; }
.chart-foot {
  margin-top: var(--s-3);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  color: var(--text-default);
}

/* ── 4.10 링크·초점 ── */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a.plain { color: inherit; text-decoration: none; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

/* ── 4.11 접힘 폭 — DESIGN.md §2: 1200 미만에서 4열 ── */
@media (max-width: 1263px) {
  :root { --page-pad: var(--s-4); }
}
@media (max-width: 1199px) {
  :root { --grid-cols: 4; }
  .c6, .c8, .c12 { grid-column: span 4; }
  .c3 { grid-column: span 2; }
}