/* 디자인 언어: 1안 「원장(元帳) The Ledger」 (design-review-r1.md §3, binding).
   공공 기록물의 물성(잉크·종이·날짜열·일련 기입)을 헤비 웨이트 한글 타이포와
   모노 숫자로 재해석. 무표백 종이 캔버스, 웜 헤어라인, 단일 바이올렛 CTA,
   숫자 tabular-nums. 시그니처: 시간순 근거 카드를 잇는 날짜 레일(스파인+틱).
   커밋 2 범위: 토큰·타이포·폰트 교체 (컴포넌트 재구성은 커밋 3). */

/* Pretendard Variable 셀프호스팅 (웹폰트 핫링크 없음, 라이선스 SIL OFL). */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
  font-style: normal;
}

:root {
  /* 표면 */
  --paper: #FBFAF8;          /* 페이지 캔버스, 무표백 종이 */
  --paper-raised: #FFFFFF;   /* 카드 */
  --rule: #E5E2DC;           /* 웜 헤어라인 */
  --rule-strong: #16181D;    /* 구조 룰(스파인, 헤더/푸터 보더) */
  /* 잉크 */
  --ink-900: #16181D;        /* 본문·제목 */
  --ink-700: #3C414D;        /* 보조 텍스트 */
  --ink-500: #656C7C;        /* 캡션·뮤트 */
  /* 인터랙션 전용 (데이터 의미에 사용 금지) */
  --accent: #4F3DE6;         /* 잉크 바이올렛: CTA, 링크, 포커스 */
  --accent-press: #3B2DB3;
  /* 방향축 중립쌍 (칩의 방향 단어에만) */
  --dir-warm: #6E4A38;       /* 확대·강화·신설 계열 */
  --dir-cool: #2F6B63;       /* 축소·완화·폐지 계열 */
  /* 형태 */
  --radius-tag: 4px;         /* 색인 태그(구 칩) */
  --radius-input: 8px;
  --radius-card: 10px;
  --radius-pill: 9999px;     /* CTA 단독 사용 */
  --focus-ring: 0 0 0 3px rgba(79, 61, 230, 0.30);
  /* 그림자: 원칙적으로 폐기하고 룰로 대체. 답변 헤더 카드에만 1종 허용. */
  --shadow-card: 0 1px 0 var(--rule), 0 8px 24px rgba(22, 24, 29, 0.05);
  /* 폰트 스택 */
  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
    "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* 모바일 더블탭 300ms 지연 제거 (web-interface-guidelines) */
a, button, input, summary { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* 원장 제본선 (스펙 3.2-1): 페이지 상단 4px 잉크 룰 — 푸터 상단 룰과 수미상관 */
  border-top: 4px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* tabular 숫자(집계·표결수). 순수 숫자열의 모노 조판은 .mono가 담당한다. */
.num { font-variant-numeric: tabular-nums; }
/* 모노 숫자(날짜 레일·타임스탬프·집계) — 커밋 3에서 컴포넌트에 적용. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.container { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* 공통 포커스 링(접근성): 키보드 사용자에게 항상 보이는 바이올렛 링 */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-input);
}

/* 헤더 */
.site-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
}
.site-header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
}
/* 브랜드: 마크(타일 9) + 워드마크 9k1 + 읽기 보조. 9k1 = 구·케이·원 → 국회의원. */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 26px; height: 26px; display: block; border-radius: 6px; }
.wordmark {
  font-weight: 700; font-size: 17px; letter-spacing: -0.2px; color: var(--ink-900);
  font-variant-numeric: lining-nums;
}
.brand-reading {
  color: var(--ink-500); font-size: 13px; letter-spacing: -0.2px;
  border-left: 1px solid var(--rule); padding-left: 9px;
}
@media (max-width: 480px) { .brand-reading { display: none; } }
.data-asof { color: var(--ink-500); font-size: 13px; letter-spacing: -0.2px; }

/* 히어로 — 논지 그 자체(“있는 그대로”) + 언어유희 고스트 숫자 */
/* overflow는 clip이어야 한다: hidden은 프로그램적 스크롤 컨테이너라서, 인풋 포커스
   시 브라우저가 hero.scrollLeft를 밀어 좌측이 잘리는 버그가 실측됐다(고스트 숫자가
   우측으로 삐져나가 scrollWidth > clientWidth인 상태). clip 미지원 브라우저 폴백으로
   hidden을 먼저 선언. */
.hero { position: relative; padding: 64px 0 28px; overflow: hidden; overflow: clip; }
.hero-body { position: relative; z-index: 1; }
/* 고스트 숫자 "9k1": aria-hidden, 순수 CSS 아웃라인. 정적 요소(애니메이션 없음). */
.hero-ghost {
  position: absolute; top: -12px; right: -8px; z-index: 0;
  font-size: 280px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums; pointer-events: none; user-select: none;
  color: rgba(22, 24, 29, 0.07);   /* 비지원 브라우저 폴백 */
}
@supports (-webkit-text-stroke: 1px black) {
  .hero-ghost { color: transparent; -webkit-text-stroke: 1px rgba(22, 24, 29, 0.07); }
}
.hero h1 {
  font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.14;
  margin: 0 0 10px; color: var(--ink-900);
}
.hero-reading {
  color: var(--ink-500); font-size: 13px; letter-spacing: -0.2px; margin: 0 0 18px;
}
.lede {
  color: var(--ink-700); font-size: 17px; line-height: 1.55;
  max-width: 60ch; margin: 0 0 24px;
}
/* 예시 질문 고스트 버튼 — 클릭 시 인풋 채움 */
.hero-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.example-q {
  font-family: inherit; font-size: 13px; color: var(--ink-700);
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius-input); padding: 8px 14px; min-height: 44px;
  cursor: pointer; transition: border-color .15s ease;
}
.example-q:hover { border-color: var(--ink-900); }

/* 질의 폼 — 유일한 filled 바이올렛 CTA */
.query-form { display: flex; gap: 10px; align-items: stretch; }
.query-form input {
  flex: 1; min-width: 0; padding: 14px; min-height: 52px; font-size: 16px;
  border: 1.5px solid var(--ink-900); border-radius: var(--radius-input);
  background: var(--paper-raised); color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.query-form input::placeholder { color: var(--ink-500); }
.query-form input:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.query-form button {
  padding: 10px 24px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-pill); cursor: pointer;
  min-height: 44px; white-space: nowrap;
  transition: background-color .15s ease;
}
.query-form button:hover { background: var(--accent-press); }
.query-form button:active { background: var(--accent-press); }
/* 중지 버튼(P2 유닛 B) — "단일 바이올렛 CTA" 원칙 유지를 위해 보조(secondary) 스타일로 */
.query-form .stop-button {
  background: var(--paper-raised); color: var(--ink-700);
  border: 1px solid var(--rule);
}
.query-form .stop-button:hover { background: var(--paper); }
.query-form .stop-button:active { background: var(--rule); }
.htmx-indicator { display: none; color: var(--ink-500); font-size: 14px; padding: 12px 2px; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

/* SSE 진행 단계 표시 — #results 안에서 최종 카드로 교체되기 전까지 보인다.
   .progress-phase는 서버가 보내는 단일 조각(하위호환), 실제 표시는 progress.js가
   .progress-log 패널로 누적한다. */
.progress-phase { color: var(--ink-500); font-size: 14px; padding: 12px 2px; margin: 0; }
/* 수신 로그 패널 (원장 커밋 3, 스펙 3.2-5) — 모노 타임스탬프 + 현재 단계 펄스 도트. */
.progress-log {
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: var(--paper-raised); padding: 14px 16px; margin: 16px 0;
}
.progress-line {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; color: var(--ink-500); padding: 3px 0; margin: 0;
}
.progress-line.is-current { color: var(--ink-900); }
.progress-line .dot {
  flex: none; width: 8px; height: 8px; background: var(--rule);
  align-self: center;
}
.progress-line.is-current .dot { background: var(--accent); animation: phase-pulse 1s ease-in-out infinite; }
.progress-line .ts {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
@keyframes phase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

#results { display: block; }

/* 카드 공통 */
.card {
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 22px; margin: 16px 0;
}

/* 답변 헤더 카드 — 이름 + 숫자 요약(‘머니 셀’ 신호) */
.answer { margin-top: 8px; }
.answer-header { box-shadow: var(--shadow-card); }
.answer-header h2 {
  margin: 0 0 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.party { color: var(--ink-700); font-size: 15px; font-weight: 400; letter-spacing: -0.2px; }
/* 숫자 요약(‘머니 셀’) — 디버그 박스 제거, 위아래 룰로 감싼 기입 라인.
   NOTE: 서버가 완성된 문자열(r.summary)만 넘겨 셀 단위 스탯 행은 불가(SKIPPED). */
.summary {
  font-size: 16px; font-weight: 500; color: var(--ink-900); line-height: 1.7;
  letter-spacing: -0.2px; margin: 12px 0; padding: 12px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.degraded {
  color: var(--ink-700); font-size: 13px; margin: 8px 0;
  padding-left: 10px; border-left: 2px solid var(--rule);
}
.scope-note { color: var(--ink-500); font-size: 13px; line-height: 1.5; margin: 3px 0; }
.scope-note.asof { margin-top: 8px; }
/* 검색 범위·주제어 — 회색 벽 대신 접힘(details) */
.scope-details { margin: 8px 0 2px; }
.scope-details > summary {
  cursor: pointer; color: var(--ink-500); font-size: 13px; list-style: none;
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
}
.scope-details > summary::-webkit-details-marker { display: none; }
.scope-details > summary::before { content: "▸"; font-size: 10px; }
.scope-details[open] > summary::before { content: "▾"; }

/* 태그 색인 범례 (1회성 캡션, 스펙 3.2-10) */
.tag-legend { color: var(--ink-500); font-size: 12px; margin: 20px 0 0; letter-spacing: -0.2px; }

/* 날짜 레일(signature, 스펙 3.2-7): 좌측 날짜 컬럼 + 2px 잉크 스파인 + 사각 틱 노드.
   "시간순 기록의 기입"이라는 제품의 계약 그 자체가 첫눈에 보이는 구조가 된다. */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 96px; top: 0; bottom: 0;
  width: 2px; background: var(--rule-strong);
}
/* bill-card는 흰 카드가 아니라 레일 위의 기입 행이다(.card 상속을 무력화). */
.bill-card {
  display: grid; grid-template-columns: 96px 1fr;
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; position: relative;
}
.bill-rail {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 22px 20px 8px 0; text-align: right;
}
.date { color: var(--ink-700); font-size: 13px; letter-spacing: 0.01em; }
.kind-label {
  color: var(--ink-500); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.bill-body {
  padding: 22px 0 24px 22px; border-bottom: 1px solid var(--rule); position: relative;
}
.timeline > .bill-card:last-child .bill-body { border-bottom: none; }
/* 사각 틱 노드: 스파인 위에 얹힌다. 데이터 공백 카드는 아웃라인 틱(경보색 없음). */
.bill-body::before {
  content: ""; position: absolute; left: 0; top: 28px; margin-left: -4px;
  width: 8px; height: 8px; background: var(--ink-900);
}
.bill-card:has(.data-gap) .bill-body::before {
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-500);
}

.bill-name {
  font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.4; letter-spacing: -0.2px;
}
.bill-name a { color: var(--ink-900); text-decoration: none; }
.bill-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* tier: 법안명 우측 사각 태그 (스펙 3.2-9). G5: 브랜드색 제거, 잉크 solid/dashed 이중 인코딩. */
.tier {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: -0.2px;
  padding: 1px 7px; margin-left: 8px; vertical-align: 2px;
  border: 1px solid var(--ink-900); border-radius: var(--radius-tag);
  color: var(--ink-900); background: var(--paper-raised); white-space: nowrap;
}
.tier[data-tier="관련 가능"] {
  border-style: dashed; /* 색상만이 아닌 선 스타일로도 구분(WCAG 1.4.1), 확정 아닌 폭넓은 매치임을 표현 */
}

/* 행동 표시 (스펙 3.2-8): 필 폐기, 잉크 사각 불릿 + 텍스트. 전 값 동일 처리(G5). */
.action {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--ink-900);
  margin: 8px 0; padding: 0; border: none; border-radius: 0;
}
.action-bullet { color: var(--ink-900); font-size: 12px; line-height: 1; flex: none; }
.data-gap { color: var(--ink-500); font-size: 14px; margin: 8px 0; line-height: 1.5; }

/* 표결 집계 (스펙 3.2-8): 배경 박스 제거, 위아래 1px 룰, tabular 숫자. */
.vote-counts {
  color: var(--ink-700); font-size: 13px; margin: 10px 0;
  padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  letter-spacing: -0.2px;
}
.status { color: var(--ink-500); font-size: 13px; margin: 6px 0; }

/* 주제 태그 칩 — 대상·영역·방향(L2, 스펙 7). direction은 평가가 아니라 방향축이므로
   확대/축소/범주형 3계열만 구분한다 (판정어 아님, G5).
   - 확대계열/축소계열: --dir-warm/--dir-cool — 기존 의미 계열과 겹치지 않는 중립색 2종.
     명도·채도를 맞춰 두 계열이 동등한 시각 무게를 갖는다.
   - 범주형(전환/이관/명확화/절차변경): 색이 아니라 모양(radius)으로만 구분한다. */
/* 색인 태그 (스펙 3.2-10): 사각 4px, 배경 없음, 1px 룰, 12px/500. 색은 태그 전체가
   아니라 .tag-dir(방향 단어)에만 — 확대계열 웜, 축소계열 쿨, 범주형은 무채(색 없음이
   곧 "제3유형" 신호, WCAG 1.4.1: 단어 자체가 1차 구분자, 색은 보조 인코딩). */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag-chip {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 3px 9px; border-radius: var(--radius-tag);
  border: 1px solid var(--rule); background: none; color: var(--ink-500);
}
.tag-dir[data-direction="연장"], .tag-dir[data-direction="확대"],
.tag-dir[data-direction="인상"], .tag-dir[data-direction="강화"],
.tag-dir[data-direction="신설"] { color: var(--dir-warm); font-weight: 600; }
.tag-dir[data-direction="단축"], .tag-dir[data-direction="축소"],
.tag-dir[data-direction="인하"], .tag-dir[data-direction="완화"],
.tag-dir[data-direction="폐지"] { color: var(--dir-cool); font-weight: 600; }
.tag-primary { font-size: 10px; font-weight: 700; color: var(--ink-900); margin-left: 3px; }
/* 초과 태그 접기 (+N) */
.tag-more { display: inline-block; }
.tag-more > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 500;
  padding: 3px 9px; border: 1px solid var(--rule); border-radius: var(--radius-tag);
  color: var(--ink-700); min-height: 24px; display: inline-flex; align-items: center;
}
.tag-more > summary::-webkit-details-marker { display: none; }
.tag-more[open] > summary { color: var(--ink-900); }
.tag-more .tag-chips { margin: 8px 0 0; }
.coverage-note { color: var(--ink-500); font-size: 13px; margin: 6px 0; }

/* 서술형 배지 → 각주 스타일 (스펙 3.2-11): 칩 폐기, "※ " 접두, 카드 하단. */
.badge {
  display: block; font-size: 13px; line-height: 1.5; color: var(--ink-500);
  margin: 8px 0 0; padding: 0; background: none; border: none; border-radius: 0;
}
.badge::before { content: "※ "; }
.source { font-size: 13px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.source a { color: var(--accent); text-decoration: none; font-weight: 500; }
.source a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 고정 안내 카드 */
.notice p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--ink-900); }
.notice .scope-note { color: var(--ink-500); }

/* 동명이인 선택 — 보조(secondary) 버튼, filled 바이올렛 아님 */
.disambiguation > p { margin: 0 0 4px; font-size: 15px; color: var(--ink-900); }
.candidates { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.candidates form { margin: 0; }
.candidates button {
  width: 100%; text-align: left; padding: 12px 16px; font-size: 15px; min-height: 44px;
  background: var(--paper-raised); color: var(--ink-900);
  border: 1px solid var(--rule); border-radius: var(--radius-input); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.candidates button:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }

/* 상시 커버리지 고지 (스펙 3.2-12): 카드 → 좌측 3px 구조룰 인용문 스타일 */
.coverage {
  margin: 32px 0 8px; background: none; border: none; border-radius: 0;
  border-left: 3px solid var(--rule-strong); padding: 4px 0 4px 16px;
}
.coverage p { color: var(--ink-700); font-size: 13px; line-height: 1.6; margin: 0; }

/* 푸터 → 판권면(colophon) (스펙 3.2-12): 상단 2px 구조룰, 스파인·제본선과 수미상관 */
.site-footer { background: var(--paper-raised); border-top: 2px solid var(--rule-strong); margin-top: 56px; }
.site-footer p { color: var(--ink-500); font-size: 13px; line-height: 1.6; margin: 6px 0; }
.site-footer .brand-story { color: var(--ink-700); font-size: 15px; }
.site-footer .brand-story strong { font-weight: 700; color: var(--ink-900); }
.site-footer .container { padding: 28px 20px; }

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .hero { padding: 40px 0 20px; }
  .hero h1 { font-size: 32px; letter-spacing: -0.02em; }
  .hero-ghost { font-size: 160px; top: -6px; right: -6px; }
  .lede { font-size: 16px; }
  .query-form { flex-direction: column; }
  .query-form button { width: 100%; }
  .site-header .container { padding: 12px 16px; }
  /* 날짜 레일: 좁은 화면에서 날짜 컬럼을 카드 상단 인라인으로 복귀 (스펙 3.2-7) */
  .timeline::before { display: none; }
  .bill-card { grid-template-columns: 1fr; }
  .bill-rail {
    flex-direction: row; align-items: baseline; gap: 8px;
    padding: 18px 0 0; text-align: left;
  }
  .bill-body { padding: 8px 0 20px; }
  .bill-body::before { display: none; }
  .timeline > .bill-card:last-child .bill-body { border-bottom: 1px solid var(--rule); }
}

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