Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase z slide_base + token CSS + families 갱신 (5-layer + F29 fix)

Browse Source 
- 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>
This commit is contained in:
이경민
2026-05-08 09:41:40 +09:00
parent 2b56a4c979
commit f66497cf8d
5 changed files with 50 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/phase_z2/families/process_product_two_way.html
View File

@@ -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 과 동일 위계) #}
<div class="f29b__title">{{ slot_payload.title }}</div>
{# 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 재현). #}
<div class="f29b__banners">
<div class="f29b__banner f29b__banner--left">
<img class="f29b__banner-bg" src="assets/process_product_two_way/header_left_bg.svg" alt="">
<div class="f29b__banner-text">{{ slot_payload.banner_left }}</div>
</div>
<div class="f29b__banner f29b__banner--right">
<img class="f29b__banner-bg" src="assets/process_product_two_way/header_right_bg.svg" alt="">
<div class="f29b__banner-text">{{ slot_payload.banner_right }}</div>
</div>
</div>
{# 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 재현). #}
<div class="f29b__body">
<img class="f29b__body-bg" src="assets/process_product_two_way/body_bg.svg" alt="">
<div class="f29b__grid">

9
templates/phase_z2/families/three_parallel_requirements.html
View File

@@ -1,6 +1,5 @@
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt.
Legacy templates/blocks/structures/prerequisites-3col.html 의 token-fixed font 접근 학습. -->
§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) */

14
templates/phase_z2/slide_base.html
View File

@@ -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;

8
templates/styles/tokens/spacing.css
View File

@@ -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 ── */

4
templates/styles/tokens/typography.css
View File

@@ -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;