토큰 기반 CSS 체계 구축 + slide-base 스타일 분리

- tokens: typography(35변수), spacing(28변수), colors(41변수) 정의
- slide-base.html: 인라인 style 제거, Jinja include로 토큰/CSS 조립
- slide-base.css: 모든 직접값을 토큰 변수 참조로 전환 (직접값 0)
- block_assembler.py: Template → Environment.from_string (include 지원)
- TOKENS-v1.md: 위계 기준표 초안 + component token 후보
- BLOCK-RULES.md: 블록 작성 규칙 (spacing 문구 실제 토큰과 일치)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-17 13:56:03 +09:00
parent 7a2615fb4b
commit 8e577b3163
8 changed files with 586 additions and 143 deletions

View File

@@ -0,0 +1,47 @@
/* ══════════════════════════════════════
Spacing Tokens v1
══════════════════════════════════════
여백/간격/들여쓰기 공통 기준.
══════════════════════════════════════ */
:root {
/* ── 기본 스케일 ── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
/* ── slide-base 레이아웃 ── */
--slide-padding-x: 40px; /* 본문 좌우 여백 */
--slide-title-left: 52px; /* 대목차 시작 */
--slide-title-top: 22px; /* 대목차 위치 */
--slide-divider-top: 58px; /* 구분선 위치 */
--slide-body-top: 65px; /* 본문 시작 */
--slide-body-height: 575px; /* 본문 높이 */
--slide-footer-bottom: 18px; /* footer 하단 여백 */
--slide-footer-height: 41px; /* footer 높이 */
/* ── zone ── */
--zone-gap: 8px; /* zone 간 간격 */
--zone-padding-left: 12px; /* zone 안쪽 좌측 여백 */
--zone-padding-right: 8px; /* zone 안쪽 우측 여백 */
--zone-title-mb: 8px; /* zone 제목 아래 여백 */
/* ── 블록 공통 ── */
--card-padding: 16px; /* 카드 내부 여백 */
--card-padding-sm: 8px; /* 작은 카드 내부 여백 */
--card-gap: 12px; /* 카드 간 간격 */
--card-radius: 6px; /* 카드 모서리 */
/* ── 블릿/텍스트 ── */
--bullet-indent: 14px; /* 불릿 hanging indent */
--bullet-gap: 2px; /* 불릿 항목 간 간격 */
--heading-gap: 4px; /* 소제목 아래 간격 */
--section-gap: 10px; /* 섹션 간 간격 */
/* ── flex/grid 기본 ── */
--flex-gap: 12px; /* 기본 flex gap */
--flex-gap-sm: 6px; /* 좁은 flex gap */
--grid-gap: 16px; /* 기본 grid gap */
}