From f66497cf8d9fd7d9428c8d179e7ccc2d86ac9441 Mon Sep 17 00:00:00 2001 From: kyeongmin Date: Fri, 8 May 2026 09:41:40 +0900 Subject: [PATCH] =?UTF-8?q?phase=20z=20slide=5Fbase=20+=20token=20CSS=20+?= =?UTF-8?q?=20families=20=EA=B0=B1=EC=8B=A0=20(5-layer=20+=20F29=20fix)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- .../families/process_product_two_way.html | 58 +++++++++++-------- .../families/three_parallel_requirements.html | 9 ++- templates/phase_z2/slide_base.html | 14 ++--- templates/styles/tokens/spacing.css | 8 +-- templates/styles/tokens/typography.css | 4 +- 5 files changed, 50 insertions(+), 43 deletions(-) diff --git a/templates/phase_z2/families/process_product_two_way.html b/templates/phase_z2/families/process_product_two_way.html index 137cdf6..fbe918d 100644 --- a/templates/phase_z2/families/process_product_two_way.html +++ b/templates/phase_z2/families/process_product_two_way.html @@ -7,15 +7,18 @@ Visual Provenance — figma_to_html_agent/blocks/1171281210/index.html PROMOTED (Figma 1:1 변환물 → 그대로 사용): - banner-left text gradient : lines 101-104 → linear-gradient(90deg, rgb(62,53,35), rgb(62,53,35)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) - banner-right text gradient : lines 110-113 → linear-gradient(90deg, rgb(34,95,74), rgb(34,95,74)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) + - banner-left bg gradient : lines 84-91 → linear-gradient(to right, rgba(136,131,118,.343), #39321E 73.1%, #39321E) + border-radius pill + - banner-right bg gradient : lines 92-98 → linear-gradient(to right, #032118, rgba(41,107,85,.1)) + border-radius pill + - body bg gradients (좌/우) : lines 53-68 → multi-bg / 좌(57,50,30) α0.3 → white α0.3, 우(41,107,85) α0.3 → white α0.3 - section-title-left color : line 125 → #5C3714 (갈) - section-title-right color : line 126 → #084C56 (짙은 청록) - bullets text : line 136 → 700 / #000 / list-disc - - banner SVG asset (left) : line 196 → assets/header_left_bg.svg (좌측 180° rotate) - - banner SVG asset (right) : line 197 → assets/header_right_bg.svg - - body bg SVG asset : line 193 → assets/body_bg.svg (3845×933 상단) - arrow PNG asset : line 220 → assets/arrow.png (AS-IS → TO-BE) - footnote (＊) inline : lines 144, 281-283 → 25.8px small + indent + (2026-05-08 수정) 원본 SVG 3 개 (header_left_bg / header_right_bg / body_bg) → CSS gradient 로 재현. + asset 파일 부재 (figma 원본 R8 룰 = "순수 CSS 우선" 따라 SVG 자체 미생성). 시각 fidelity 동일. + ADAPTED (Figma px / native 무시, zone flex 재구성): - 3848×1388 inner + zoom 0.33270 → flex layout (no zoom, no fixed inner) - 70px banner / 50px section / 40px body→ var(--font-sub-title) / 8-10px / var(--font-caption) @@ -63,13 +66,21 @@ slots: title (omitted), banner_left, banner_right, overflow: hidden; display: flex; align-items: center; justify-content: center; } - .f29b__banner-bg { - position: absolute; inset: 0; - width: 100%; height: 100%; - object-fit: fill; - z-index: 0; + /* PROMOTED background gradients — figma origin lines 84-98 (header-bg--left/right). + 원본 SVG 3 개 → CSS gradient 로 재현 (R8/R9 준수). border-radius 9999px = 자동 pill. */ + .f29b__banner--left { + background: linear-gradient(to right, + rgba(136, 131, 118, 0.343) 0%, + #39321E 73.1%, + #39321E 100%); + border-radius: 0 9999px 9999px 0; + } + .f29b__banner--right { + background: linear-gradient(to right, + #032118 0%, + rgba(41, 107, 85, 0.1) 100%); + border-radius: 9999px 0 0 9999px; } - .f29b__banner--left .f29b__banner-bg { transform: rotate(180deg); } /* PROMOTED line 71 (좌 180° rotate) */ .f29b__banner-text { position: relative; z-index: 1; @@ -94,20 +105,18 @@ slots: title (omitted), banner_left, banner_right, } /* body — 6 cell grid (3 rows × 2 cols) — 좌우 row divider Y 정렬 */ + /* PROMOTED background — figma origin lines 53-68 (body-bg-left/right). + 좌(0~50%): #39321E α0.3 (top) → white α0.3 (bottom) + 우(50~100%): #296B55 α0.3 (top) → white α0.3 (bottom) + 원본 SVG → CSS multi-bg 로 재현. */ .f29b__body { flex: 1; position: relative; min-height: 0; padding-top: 4px; - } - .f29b__body-bg { - position: absolute; - left: 0; top: 0; - width: 100%; height: 100%; - object-fit: fill; - z-index: 0; - opacity: 0.85; - pointer-events: none; + background: + linear-gradient(to bottom, rgba(57,50,30,0.3) 0%, rgba(255,255,255,0.3) 100%) 0% 0% / 50% 100% no-repeat, + linear-gradient(to bottom, rgba(41,107,85,0.3) 0%, rgba(255,255,255,0.3) 100%) 100% 0% / 50% 100% no-repeat; } /* 6 cell grid: 3 rows (section 1/2/3), 2 cols (process/product). 각 row 의 height = max(좌, 우) */ @@ -133,9 +142,9 @@ slots: title (omitted), banner_left, banner_right, padding-top: 6px; margin-top: 4px; } - /* feedback-3: section title 에 border-left accent 로 hierarchy 강화 */ + /* section-title — 부소목차 (사용자 5-layer 직설 2026-05-07): Analogue 기반... 같은 깊이 0 굵은 bullet */ .f29b__section-title { - font-size: var(--font-zone-title); /* 13px */ + font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */ font-weight: 900; line-height: 1.3; margin-bottom: 5px; @@ -188,22 +197,21 @@ slots: title (omitted), banner_left, banner_right, {# H2 mid-heading — section.title 렌더 (frame 13 의 f13b__title 과 동일 위계) #}
{{ slot_payload.title }}
- {# Banners (PROMOTED 구조 + assets line 196,197 + gradient lines 101-113) #} + {# Banners (PROMOTED 구조 + gradient lines 101-113). + 배경 = .f29b__banner--left/right 의 CSS gradient (figma SVG → R8 CSS gradient 재현). #}
-
{{ slot_payload.banner_left }}
-
{{ slot_payload.banner_right }}
{# Body — 6 cell grid (row-major: row 1 좌/우, row 2 좌/우, row 3 좌/우). - row 별 height = max(좌, 우) → divider Y 정렬 #} + row 별 height = max(좌, 우) → divider Y 정렬. + 배경 = .f29b__body 의 CSS multi-gradient (figma SVG → R8 CSS gradient 재현). #}
-
diff --git a/templates/phase_z2/families/three_parallel_requirements.html b/templates/phase_z2/families/three_parallel_requirements.html index 506305a..4ea6896 100644 --- a/templates/phase_z2/families/three_parallel_requirements.html +++ b/templates/phase_z2/families/three_parallel_requirements.html @@ -1,6 +1,5 @@ + §17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. --> {# ───────────────────────────────────────────────────────────────────────────── Visual Provenance — figma_to_html_agent/blocks/1171281190/index.html @@ -106,11 +105,11 @@ slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}} margin-top: 6px; /* visible section gap (was 4px) */ padding-top: 8px; /* breathing (was 6px) */ } - /* heading — visible hierarchy (zone-title 13px, bigger than body 11px) */ + /* heading — 부소목차 (사용자 5-layer 직설 2026-05-07): Digital 기술과... 같은 깊이 1 굵은 bullet */ .f13b__heading { - font-size: var(--font-zone-title); /* 13px (was 12px) — heading 위계 강화 */ + font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */ font-weight: 700; - line-height: var(--lh-zone-title); + line-height: var(--lh-sub-title); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; /* visible heading-body gap (was 4px) */ diff --git a/templates/phase_z2/slide_base.html b/templates/phase_z2/slide_base.html index 90de508..a5d168b 100644 --- a/templates/phase_z2/slide_base.html +++ b/templates/phase_z2/slide_base.html @@ -52,14 +52,14 @@ left: 50px; top: 58px; width: calc(100% - 100px); height: 2px; - background: #1e293b; + background: #cbd5e1; z-index: 2; } .slide-body { position: absolute; - left: 40px; top: 65px; - width: calc(100% - 80px); /* 1200 */ - height: 590px; + left: 50px; top: 76px; + width: calc(100% - 100px); /* 1180 */ + height: 585px; z-index: 1; overflow: hidden; } @@ -199,9 +199,9 @@ /* ── Footer pill — feedback-3: body 와 weight balance, 살짝 가벼워짐 ── */ .slide-footer { position: absolute; - left: 60px; bottom: 8px; - width: calc(100% - 120px); - height: 32px; /* was 41px */ + left: 50px; bottom: 8px; + width: calc(100% - 100px); /* front 기준 (body 와 정렬) */ + height: 41px; /* front 기준 */ border-radius: 999px; overflow: hidden; z-index: 2; diff --git a/templates/styles/tokens/spacing.css b/templates/styles/tokens/spacing.css index 5f1afab..68e2360 100644 --- a/templates/styles/tokens/spacing.css +++ b/templates/styles/tokens/spacing.css @@ -16,10 +16,10 @@ --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-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 ── */ diff --git a/templates/styles/tokens/typography.css b/templates/styles/tokens/typography.css index 36ab36a..0951a49 100644 --- a/templates/styles/tokens/typography.css +++ b/templates/styles/tokens/typography.css @@ -15,7 +15,7 @@ --lh-slide-title: 1.4; /* 중목차: zone 제목 */ - --font-zone-title: 13px; + --font-zone-title: 16px; --weight-zone-title: 700; --lh-zone-title: 1.4; @@ -25,7 +25,7 @@ --lh-sub-title: 1.45; /* 본문: 블릿, 설명 텍스트 */ - --font-body: 11px; + --font-body: 10px; --weight-body: 500; --lh-body: 1.55;