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

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

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 {
+  /* PROMOTED background gradients — figma origin lines 84-98 (header-bg--left/right).
-    position: absolute; inset: 0;
+     원본 SVG 3 개 → CSS gradient 로 재현 (R8/R9 준수). border-radius 9999px = 자동 pill. */
-    width: 100%; height: 100%;
+  .f29b__banner--left {
-    object-fit: fill;
+    background: linear-gradient(to right,
-    z-index: 0;
+      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;
-  }
+    background:
-  .f29b__body-bg {
+      linear-gradient(to bottom, rgba(57,50,30,0.3) 0%, rgba(255,255,255,0.3) 100%) 0% 0% / 50% 100% no-repeat,
-    position: absolute;
+      linear-gradient(to bottom, rgba(41,107,85,0.3) 0%, rgba(255,255,255,0.3) 100%) 100% 0% / 50% 100% no-repeat;
-    left: 0; top: 0;
-    width: 100%; height: 100%;
-    object-fit: fill;
-    z-index: 0;
-    opacity: 0.85;
-    pointer-events: none;
   }
 
   /* 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">
 

templates/phase_z2/families/three_parallel_requirements.html

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

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;
+      left: 50px; top: 76px;
-      width: calc(100% - 80px);   /* 1200 */
+      width: calc(100% - 100px);  /* 1180 */
-      height: 590px;
+      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;
+      left: 50px; bottom: 8px;
-      width: calc(100% - 120px);
+      width: calc(100% - 100px);             /* front 기준 (body 와 정렬) */
-      height: 32px;                          /* was 41px */
+      height: 41px;                          /* front 기준 */
       border-radius: 999px;
       overflow: hidden;
       z-index: 2;

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-divider-top: 58px;     /* 구분선 위치 (slide_base.html 와 일치 2026-05-07) */
-  --slide-body-top: 65px;        /* 본문 시작 */
+  --slide-body-top: 76px;        /* 본문 시작 (사용자 직설: divider-body 16px) */
-  --slide-body-height: 575px;    /* 본문 높이 */
+  --slide-body-height: 585px;    /* 본문 높이 (사용자 직설: body-footer 10px) */
-  --slide-footer-bottom: 18px;   /* footer 하단 여백 */
+  --slide-footer-bottom: 8px;    /* footer 하단 여백 (slide_base.html 와 일치) */
   --slide-footer-height: 41px;   /* footer 높이 */
 
   /* ── zone ── */

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;