kyeongmin
f66497cf8d
- templates/phase_z2/slide_base.html — geometry 재정상화:
divider top 58 / height 2 / #cbd5e1
body top 76 / height 585 / left 50 / width calc(100%-100px)
footer left 50 / bottom 8 / height 41 / width calc(100%-100px)
(사용자 lock 2026-05-07 — front 정합)
- templates/styles/tokens/{spacing,typography}.css — 5-layer 위계 lock 반영:
spacing : --slide-divider-top 58 / --slide-body-top 76 / --slide-body-height 585 /
--slide-footer-bottom 8 (slide_base.html 와 1:1)
typography : --font-zone-title 16px (대) / --font-sub-title 12px (소) /
--font-body 10px (콘텐츠) — 5-layer (대/중/소/부소/콘텐츠)
- templates/phase_z2/families/three_parallel_requirements.html — F13 partial:
cleanup-1 (2026-05-08) stale 주석 정정 (Legacy templates/blocks/structures/
prerequisites-3col.html reference 제거 — 해당 legacy 폴더 삭제 후 broken).
- templates/phase_z2/families/process_product_two_way.html — F29 partial:
visual fidelity bug fix (2026-05-08).
missing SVG asset 3 개 (header_left_bg, header_right_bg, body_bg) 참조 제거 →
figma origin (figma_to_html_agent/blocks/1171281210/index.html) 의 R8 룰
("순수 CSS 우선") 따라 linear-gradient + border-radius pill 로 재현.
PROMOTED 줄도 갱신 (banner-left/right bg gradient + body bg 2-half gradient).
regression 0 (MDX03 fresh run 검증 — final.html PASS, missing image 0).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
78 lines
2.2 KiB
CSS
78 lines
2.2 KiB
CSS
/* ══════════════════════════════════════
|
|
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: 16px;
|
|
--weight-zone-title: 700;
|
|
--lh-zone-title: 1.4;
|
|
|
|
/* 소목차: 블록 내 소제목, 카드 제목 */
|
|
--font-sub-title: 12px;
|
|
--weight-sub-title: 700;
|
|
--lh-sub-title: 1.45;
|
|
|
|
/* 본문: 블릿, 설명 텍스트 */
|
|
--font-body: 10px;
|
|
--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;
|
|
}
|