/* ============================================================================
   S-Report 디자인 토큰 — lawsection 정본 CSS vendoring (phase4-plan §5.4, D-023 ⑤ · D-025 ③ · 세션 6 재동기화)
   출처(정본): docs/참조/lawsection 구조 참조/globals.css (사용자 제공 2026-08-18 — www.lawsection.ai.kr `app/globals.css`, "괘선과 잉크" 리프레시 2026-07-06~08-08 반영본)
         이전: docs/참조/디자인 스켈레톤.html(2026-08-17) — 정본 제공으로 스켈레톤 고유 요소(코발트 #2160c4·Barlow Condensed·블루프린트 격자·사각 카드)는 폐기
   동기화: 2026-08-18 (세션 6). 정본이 바뀌면 이 파일만 갱신하고 출처·일자를 고친다. 컴포넌트(sreport.css)는 여기 토큰만 참조한다.
   유연 적용(D-025 ③): 정본은 뉴스·리포트 사이트라 본문 20px·표 17px 이지만, 데이터 브라우저의 표·수치 밀도를 위해 크기 단계만 한 단계 낮춘다(본문 15·표 14·캡션 12.5).
   페이지 배경은 정본 토큰 `--color-paper`(#f5f7fa) 를 쓴다(정본 body 는 화이트 — 카드 구분을 헤어라인+그림자로 함; 카드가 많은 브라우저는 페이퍼가 유리. `--color-bg` 한 줄로 전환 가능).
   ============================================================================ */
:root {
  /* ---- 색: 바탕·텍스트 (globals.css :root) */
  --color-bg: #f5f7fa;             /* 페이지 배경 = --color-paper (정본 body 는 #ffffff) */
  --color-surface: #ffffff;        /* 카드·표·헤더 (--background) */
  --color-text: #2d3748;           /* --color-text / --foreground */
  --color-text-sub: #4a5568;       /* 서브카피 (정본 text 와 text-light 사이 — Tailwind slate-600 계열) */
  --color-text-cap: #718096;       /* 캡션 = --color-text-light */
  --color-ink-900: #16233a;        /* 표제·괘선 잉크 */
  --color-ink-700: #253d56;        /* 테이블 헤더 텍스트·보조 표제 */
  --color-ink-500: #51617a;        /* eyebrow·저강조 라벨 */
  --color-link: #1058a3;           /* 링크 = primary (정본 .ls-title-link) */
  --color-link-hover: #0c4278;     /* = primary-dark */
  --color-link-on-dark: #dbe7f3;   /* 다크 바탕 위 링크 = primary-light */

  /* ---- 색: 브랜드 (primary 블루 · accent 코랄 · navy) */
  --color-primary: #1058a3;        /* 강조 텍스트·버튼·큰 숫자·활성 내비 (정본 --color-primary) */
  --color-primary-light: #dbe7f3;  /* 활성 메뉴 배경·태그 배경 */
  --color-primary-muted: #3a7cb8;  /* 보조 강조(막대 옅은 단계) */
  --color-primary-dark: #0c4278;   /* hover·강한 강조 */
  --color-accent: #eb684b;         /* 코랄 포인트(★ 중대·경고 라인) */
  --color-accent-light: #fdf0ed;   /* 코랄 태그 배경 */
  --color-accent-muted: #d45a3f;   /* 코랄 텍스트 */
  --color-navy: #1b2d45;           /* 브랜드 네이비 — 푸터·활성 칩 채움 */
  --color-sky: #eef3fb;            /* 호버·강조 배경 (표 행 hover) */
  --color-sky-2: #dbe7f3;          /* 한 단계 진한 스카이(직접 매핑 셀 등) = primary-light */
  /* 호환 별칭(4b~4c 컴포넌트가 참조하던 이름 — 값만 정본으로): */
  --color-cobalt: var(--color-primary);
  --color-cobalt-light: var(--color-primary-muted);
  --color-cobalt-tint: var(--color-sky);
  --color-cobalt-tint-2: var(--color-sky-2);
  --color-cobalt-tint-3: #c9daf0;  /* 행 hover 위 존재 셀(스카이보다 한 단계 진함) */
  --color-coral: var(--color-accent);
  --color-coral-deep: var(--color-accent-muted);
  --color-coral-tint: var(--color-accent-light);
  --color-navy-deep: var(--color-navy);
  --color-steel: var(--color-ink-700);

  /* ---- 선 (정본: 폼 보더 / 매우 옅은 라인 / 카드·표 헤어라인 / 잉크 룰) */
  --color-border: #cbd5e0;         /* 폼 컨트롤 보더·표 머리글 아래 2px 룰 */
  --color-border-soft: #e2e8f0;    /* 표 셀 하단 1px */
  --color-hairline: #e5e7eb;       /* 카드·표 헤어라인 */
  --color-hairline-2: var(--color-border-soft);
  --rule-ink: 2px solid var(--color-ink-900);      /* 페이지 표제·섹션 헤드 룰 (.ls-page-rule / .ls-sec-head) */
  --rule-th: 2px solid var(--color-border);        /* 표 컬럼명 아래 룰 (.ls-table th) */
  --rule-top: var(--rule-ink);     /* (호환) 카드 상단 룰 → 정본은 카드 상단 액센트 라인을 폐지 — 사용처 없음 */

  /* ---- 데이터 밀도용 보조 */
  --color-table-header: var(--color-ink-700);
  --color-bg-subtle: #edf2f7;      /* 호버 배경·비활성 (정본 --color-bg-subtle) */
  --color-bg-zebra: #fafbfc;       /* 정본 토큰(미사용 표기) — 매트릭스 등 초밀도 표에서만 선택 사용 */

  /* ---- 상태(라벨과 함께 쓴다 — 색만으로 뜻을 전하지 않는다) */
  --color-ok: #1f7a4d;   --color-ok-tint: #e6f4ec;
  --color-warn: #a86400; --color-warn-tint: #fdf3df;
  --color-bad: #b42318;  --color-bad-tint: #fdecea;

  /* ---- 그림자·포커스 (정본) */
  --shadow-card: 0 1px 3px rgba(22, 35, 58, 0.08), 0 2px 8px rgba(22, 35, 58, 0.04);
  --shadow-card-hover: 0 3px 10px rgba(22, 35, 58, 0.10);
  --focus-ring: 0 0 0 3px rgba(16, 88, 163, 0.15);

  /* ---- 폰트 (정본: Pretendard 단일 서체 — 컨덴스드·라벨 전용 서체 없음) */
  --font-body: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-label: var(--font-body);  /* (호환) 아이브로우·숫자도 본문 서체 + tabular-nums + 자간으로 표현 */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;   /* sha256·코드 */
  --fs-body: 15px;  --lh-body: 1.65;      /* 정본 20/1.7 → 데이터 밀도용 한 단계 아래 */
  --fs-table: 14px; --fs-th: 13px;        /* 정본 17/15 */
  --fs-caption: 12.5px;
  --fs-h1: 27px;    --fs-h2: 19px;   --fs-h3: 15px;   /* 정본 .ls-page-title 27/800 · .ls-sec-title 19/800 · .detail-card-title 14.5/800 */
  --fs-eyebrow: 12.5px;                     /* 정본 .ls-page-eyebrow 12.5/700/.12em */
  --ls-tight: -0.02em;  --ls-label: 0.12em;  --ls-card-title: 0.05em;
  --fw-title: 800; --fw-bold: 700;

  /* ---- 레이아웃 (정본 --site-width 1420px · 카드 라운드 10px · 버튼 6px · 칩 999px) */
  --site-width: 1420px;
  --gutter: 2rem;
  --radius: 10px;                  /* 카드 (정본 .ls-card) — 액센트 라인 박스만 직각(.ls-card-square) */
  --radius-sm: 6px;                /* 버튼·입력 (정본 .detail-cta·.detail-back-link) */
  --radius-pill: 999px;            /* 칩 (정본 .ls-chip) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
}