/* ══════════════════════════════════════ Typography Tokens v1 ══════════════════════════════════════ 슬라이드 전체의 공통 글자 위계. 모든 블록은 이 토큰을 참조한다. 직접값(font-size: 11px) 금지 → var(--font-body) 사용. ══════════════════════════════════════ */ :root { /* ── 1층: Global Hierarchy ── */ /* 대목차: 슬라이드 상단 제목 */ --font-slide-title: 22px; --weight-slide-title: 700; --lh-slide-title: 1.4; /* 중목차: zone 제목 */ --font-zone-title: 13px; --weight-zone-title: 700; --lh-zone-title: 1.4; /* 소목차: 블록 내 소제목, 카드 제목 */ --font-sub-title: 12px; --weight-sub-title: 700; --lh-sub-title: 1.45; /* 본문: 블릿, 설명 텍스트 */ --font-body: 11px; --weight-body: 500; --lh-body: 1.55; /* 캡션: 각주, 출처, 보조 텍스트 */ --font-caption: 10px; --weight-caption: 400; --lh-caption: 1.4; /* footer: 핵심 인사이트 pill */ --font-footer: 20px; --weight-footer: 700; --lh-footer: 1.2; /* ── 2층: Component Semantic Tokens ── */ /* 가까운 위계에서 기본값, 필요시 override */ /* 본문 강조 (인라인 heading) */ --font-body-strong: var(--font-body); --weight-body-strong: 600; /* 자세히보기 링크 */ --font-detail-link: var(--font-caption); --weight-detail-link: 500; /* pill/badge 라벨 */ --font-pill-label: var(--font-sub-title); --weight-pill-label: 700; /* 표 헤더 */ --font-table-header: var(--font-sub-title); --weight-table-header: 700; /* 표 셀 */ --font-table-cell: var(--font-body); --weight-table-cell: 400; /* 비교 뱃지 */ --font-compare-badge: var(--font-sub-title); --weight-compare-badge: 700; /* 강조 인용 */ --font-callout: var(--font-sub-title); --weight-callout: 700; /* 상단 라벨 (overline) */ --font-overline: var(--font-caption); --weight-overline: 600; --ls-overline: 0.05em; }