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>
48 lines
2.2 KiB
CSS
48 lines
2.2 KiB
CSS
/* ══════════════════════════════════════
|
|
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_base.html 와 일치 2026-05-07) */
|
|
--slide-body-top: 76px; /* 본문 시작 (사용자 직설: divider-body 16px) */
|
|
--slide-body-height: 585px; /* 본문 높이 (사용자 직설: body-footer 10px) */
|
|
--slide-footer-bottom: 8px; /* footer 하단 여백 (slide_base.html 와 일치) */
|
|
--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 */
|
|
}
|