/*
 * app.css — 투자 규칙 점검 대시보드
 *
 * 색 토큰은 디자인 명세를 따르되, WCAG AA(4.5:1) 미달분만 색상(hue)을
 * 유지한 채 명도를 옮겼다. 변경분:
 *   --faint  light #918C82 → #706C63   (기존 2.89~3.35:1)
 *   --faint  dark  #7E796F → #8E897E   (기존 3.64~4.30:1)
 *   --muted  light #6E6A61 → #5C5952   (faint와 위계 유지)
 *   --inact  light #6B7280 → #666C7A   (기존 4.21:1)
 * tests/test_contrast.py 가 이 파일을 파싱해 대비를 검증한다.
 *
 * 외부 폰트·CDN을 로드하지 않는다. 시스템 한글 폰트 스택만 쓴다.
 */

:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --sunk: #F0EEE9;
  --line: #DFDBD2;
  --line2: #EAE7E0;

  --text: #1B1A17;
  --muted: #5C5952;
  --faint: #706C63;

  --crit: #B3261E;   --critbg: #FBECEA;
  --attn: #8A5A00;   --attnbg: #FAF1DF;
  --unk: #5B3FA8;    --unkbg: #F0ECFA;
  --inact: #666C7A;  --inactbg: #EFEFF1;
  --info: #2F6383;   --infobg: #E8F0F5;
  --ok: #2C6B4F;     --okbg: #E7F1EB;

  --focus: #2F6383;

  --pad: 16px;
  --maxw: 100%;
  --vfs: 21px;

  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
          "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131311;
    --surface: #1C1C19;
    --sunk: #232320;
    --line: #33332E;
    --line2: #2A2A26;

    --text: #EDEAE3;
    --muted: #A7A297;
    --faint: #8E897E;

    --crit: #FF8A80;   --critbg: #3A1D1A;
    --attn: #F0C061;   --attnbg: #372C12;
    --unk: #BCA6F5;    --unkbg: #251E3C;
    --inact: #A0A3AB;  --inactbg: #26272A;
    --info: #8FC2E0;   --infobg: #172B36;
    --ok: #7CC79C;     --okbg: #162C22;

    --focus: #8FC2E0;
  }
}

:root[data-theme="dark"] {
  --bg: #131311;
  --surface: #1C1C19;
  --sunk: #232320;
  --line: #33332E;
  --line2: #2A2A26;

  --text: #EDEAE3;
  --muted: #A7A297;
  --faint: #8E897E;

  --crit: #FF8A80;   --critbg: #3A1D1A;
  --attn: #F0C061;   --attnbg: #372C12;
  --unk: #BCA6F5;    --unkbg: #251E3C;
  --inact: #A0A3AB;  --inactbg: #26272A;
  --info: #8FC2E0;   --infobg: #172B36;
  --ok: #7CC79C;     --okbg: #162C22;

  --focus: #8FC2E0;
}

[data-tone="critical"]  { --tone: var(--crit);  --tonebg: var(--critbg); }
[data-tone="attention"] { --tone: var(--attn);  --tonebg: var(--attnbg); }
[data-tone="unknown"]   { --tone: var(--unk);   --tonebg: var(--unkbg); }
[data-tone="inactive"]  { --tone: var(--inact); --tonebg: var(--inactbg); }
[data-tone="info"]      { --tone: var(--info);  --tonebg: var(--infobg); }
[data-tone="compliant"] { --tone: var(--ok);    --tonebg: var(--okbg); }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: var(--pad);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

a { color: var(--info); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.masthead h1 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.masthead .meta { font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.masthead .tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.badge {
  font-size: 11px; color: var(--faint);
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 7px;
}
.badge[data-stale="true"] {
  color: var(--attn); border-color: var(--attn); font-weight: 700;
}

button.ctl {
  font-family: inherit; font-size: 11px; color: var(--muted);
  background: var(--sunk); border: 1px solid var(--line); border-radius: 2px;
  padding: 5px 9px; cursor: pointer; min-height: 32px;
}
button.ctl:hover { border-color: var(--text); color: var(--text); }

/* ── 경고 배너 ────────────────────────────────────────────────────── */
.banner {
  border: 1px solid var(--attn); border-left-width: 4px; border-radius: 3px;
  background: var(--attnbg); color: var(--text);
  padding: 12px 14px; font-size: 13px; line-height: 1.6;
}
.banner strong { color: var(--attn); }

/* ── 0층 판정 ─────────────────────────────────────────────────────── */
.verdict {
  background: var(--tonebg);
  border: 1px solid var(--tone); border-left-width: 4px; border-radius: 3px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.verdict .line { display: flex; align-items: baseline; gap: 10px; }
.verdict .sym { font-size: var(--vfs); line-height: 1; color: var(--tone); }
.verdict .txt {
  font-size: var(--vfs); line-height: 1.25; font-weight: 700;
  color: var(--text); text-wrap: pretty;
}
.verdict .sub { font-size: 12.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ── 상태 개수 칩 ─────────────────────────────────────────────────── */
.counts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.counts li {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px; padding: 6px 9px; min-height: 32px;
}
.counts .sym { font-size: 13px; line-height: 1; color: var(--tone); }
.counts .lbl { font-size: 11.5px; color: var(--muted); }
.counts .n { font-size: 13px; font-weight: 700; color: var(--text); }

/* ── 섹션 제목 ────────────────────────────────────────────────────── */
h2.eyebrow {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--faint);
}

.stack { display: flex; flex-direction: column; gap: 8px; }
.rows { display: flex; flex-direction: column; gap: 6px; }

/* ── 1층 대응 필요 ────────────────────────────────────────────────── */
.action {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--tone);
  border-radius: 3px; padding: 11px 13px;
  display: grid; grid-template-columns: 1fr; gap: 8px 14px; align-items: start;
}
.action .head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.action .sym { font-size: 15px; line-height: 1.2; color: var(--tone); }
.action .name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.action .slabel { font-size: 10.5px; letter-spacing: 0.06em; color: var(--tone); display: block; }
.action .field { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.action .k { font-size: 10.5px; color: var(--faint); min-width: 34px; flex: none; }
.action .v { font-size: 13.5px; font-weight: 700; }
.action .t { font-size: 13.5px; color: var(--muted); }
.action .a { font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }

.note {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 13px; font-size: 13px; line-height: 1.6; color: var(--muted);
  text-wrap: pretty;
}

/* ── 진입 합류 ────────────────────────────────────────────────────── */
.confluence {
  background: var(--sunk); border: 1px solid var(--line2); border-radius: 3px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--muted);
}
.confluence b { color: var(--text); }

/* ── 변경 블록 ────────────────────────────────────────────────────── */
.change {
  background: var(--sunk); border: 1px solid var(--line2); border-radius: 3px;
  padding: 9px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.change .name { font-size: 13px; font-weight: 600; }
.change .from, .change .to { font-size: 11.5px; color: var(--tone); }
.change .to { font-weight: 700; }
.change .arrow { font-size: 11.5px; color: var(--faint); }

/* ── 2층 전체 표 ──────────────────────────────────────────────────── */
details.full > summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 13px; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; list-style: none;
}
details.full > summary::-webkit-details-marker { display: none; }
details.full > summary:hover { border-color: var(--muted); }
details.full > summary .hint { font-size: 11.5px; color: var(--muted); font-weight: 400; }
details.full[open] > summary .hint::after { content: " ▲"; }
details.full:not([open]) > summary .hint::after { content: " ▼"; }
details.full > .body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 0 2px;
}
.sec-head h3 { margin: 0; font-size: 12px; font-weight: 700; }
.sec-head .sum { font-size: 11px; color: var(--faint); }

.tscroll { overflow-x: auto; border: 1px solid var(--line2); border-radius: 3px; }

table.grid {
  width: 100%; border-collapse: collapse;
  background: var(--surface); font-size: 12px;
}
table.grid caption { text-align: left; padding: 8px 11px; font-size: 11px; color: var(--faint); }
table.grid th, table.grid td {
  text-align: left; padding: 9px 11px; border-top: 1px solid var(--line2);
  vertical-align: baseline;
}
table.grid thead th {
  border-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--faint); background: var(--sunk); white-space: nowrap;
}
table.grid tbody th {
  font-weight: 400; font-size: 12.5px; color: var(--text); line-height: 1.4;
}
table.grid td.st { white-space: nowrap; }
table.grid .sym { color: var(--tone); margin-right: 6px; }
table.grid .slabel { font-size: 11px; color: var(--tone); }
table.grid td.val { font-weight: 600; }
table.grid td.dim { color: var(--muted); }
table.grid td.faint { color: var(--faint); font-size: 11px; }
table.grid td.unavail { color: var(--unk); font-weight: 700; }

.legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 10.5px; line-height: 1.6; color: var(--faint);
}

/* ── 무결성 상세 ──────────────────────────────────────────────────── */
details.binding > summary {
  font-size: 11.5px; color: var(--muted); cursor: pointer; padding: 6px 0;
}
dl.kv { margin: 6px 0 0; font-size: 11px; line-height: 1.7; }
dl.kv div { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 3px 0; }
dl.kv dt { color: var(--faint); min-width: 150px; flex: none; }
dl.kv dd { margin: 0; color: var(--text); word-break: break-all; }

/* ── 오류 화면 ────────────────────────────────────────────────────── */
.fatal {
  border: 1px solid var(--crit); border-left-width: 4px; border-radius: 3px;
  background: var(--critbg); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.fatal .sym { font-size: 24px; line-height: 1; color: var(--crit); }
.fatal h2 { margin: 0; font-size: 17px; line-height: 1.35; color: var(--text); }
.fatal p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.fatal .why {
  font-size: 11.5px; color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; padding: 9px 11px;
  word-break: break-word;
}

/* ── 푸터 ─────────────────────────────────────────────────────────── */
footer.disclaimer {
  border-top: 1px solid var(--line); padding-top: 10px;
  font-size: 10.5px; line-height: 1.7; color: var(--faint); text-wrap: pretty;
}

/* ── 데스크톱 ─────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  :root { --pad: 28px; --maxw: 1120px; --vfs: 28px; }
  .action { grid-template-columns: minmax(0, 1.1fr) 132px 132px minmax(0, 1.1fr); }
  table.grid { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}