/* =============================================================
   ILLID PARTNERS — WEB TOKENS
   대상: illidpartners.com, insights 카드뉴스, 공개 웹페이지
   정본: C:\Users\pyjmjx\OneDrive\문서\@Illid_Web\index.html 의 :root

   문서·덱용은 tokens-doc.css 를 쓴다. 두 세트를 섞지 않는다.
   ============================================================= */

:root {
  /* —— Brand —— */
  --forest:    #1f4a37;   /* 주 브랜드색. 링크, 강조, 규칙선 */
  --forest-2:  #2a5a43;   /* hover, 보조 강조 */
  --forest-3:  #11281e;   /* 다크 섹션 배경 */

  /* —— Ink —— */
  --graphite:  #1a1f1c;   /* body, h1~h4 의 실제 색. 순수 검정 아님 */
  --ink:       #2b322d;   /* 본문 보조, nav 링크 */
  --mute:      #8c8a83;   /* 캡션, 라벨, 비활성 */

  /* —— Surface —— */
  --parchment: #f4f1ec;   /* 페이지 기본 배경 */
  --cream:     #ebe6dc;   /* 카드, 인용 블록 */
  --paper:     #faf8f3;   /* 가장 밝은 면 */

  /* —— Rule —— */
  --rule:      #c9c4b8;   /* 표 구분선 */
  --rule-soft: #ddd7c9;   /* 섹션 구분선 */

  /* —— Type —— */
  --font-kr:   "Noto Serif KR", "EB Garamond", Georgia, serif;
  --font-en:   "EB Garamond", Georgia, serif;
  --font-ui:   "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* —— Structure —— */
  --radius: 2px;          /* 절대 상한 */
  --hairline:        1px solid var(--rule);
  --hairline-strong: 1px solid var(--graphite);
  --rule-double:     3px double var(--graphite);
}

/* =============================================================
   BASELINE
   ============================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--parchment);
  color: var(--graphite);
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-kr);
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -0.01em;
  margin: 0;
}

::selection { background: var(--forest); color: var(--parchment); }

/* =============================================================
   비협상 규칙 — 이탤릭 금지, 장식 금지
   브라우저 기본 이탤릭을 쓰는 요소를 전부 되돌린다.
   ============================================================= */
i, em, cite, var, address, dfn, q,
caption, figcaption, .caption, blockquote {
  font-style: normal;
}

/* 강조는 색과 굵기로만 한다 */
em, .emph {
  color: var(--forest);
  font-weight: 500;
}

* { box-shadow: none; }

/* =============================================================
   TYPE UTILITIES
   ============================================================= */
.en    { font-family: var(--font-en); font-feature-settings: "lnum"; }
.num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
}
.label.on-dark { color: rgba(244, 241, 236, 0.55); }

.caption {
  font-family: var(--font-kr);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
}

/* =============================================================
   TABLE — 기관 금융 표. tokens-doc.css 와 동일 규칙을 공유한다.
   ============================================================= */
table.illid {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-kr);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--graphite);
}
table.illid thead th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  text-align: right;
  padding: 10px 12px;
  border-bottom: var(--hairline-strong);
}
table.illid thead th:first-child { text-align: left; }

table.illid tbody td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: var(--hairline);
  color: var(--graphite);
}
table.illid tbody td:first-child {
  text-align: left;
  color: var(--ink);
}

table.illid tbody tr.subtotal td {
  border-top: var(--hairline);
  font-weight: 500;
}
table.illid tbody tr.total td {
  font-weight: 600;
  border-top: var(--hairline-strong);
  border-bottom: var(--rule-double);
}

/* =============================================================
   SURFACES
   ============================================================= */
.section-dark {
  background: var(--forest-3);
  color: var(--parchment);
}
.section-dark h1, .section-dark h2,
.section-dark h3, .section-dark h4 { color: var(--parchment); }

.callout {
  background: var(--cream);
  border-left: 2px solid var(--forest);
  padding: 20px 24px;
}

hr.rule      { border: 0; border-top: var(--hairline); margin: 32px 0; }
hr.rule-soft { border: 0; border-top: 1px solid var(--rule-soft); margin: 32px 0; }