 }}){kind=icon}
-```
-
-### 6.4 계산된 CSS → CSS 변수
-
-```html
-
-
- 
-
-```
-```css
-.asis-tobe { display: flex; align-items: center; gap: 8px; }
-.asis, .tobe { flex: 1; }
-.arrow { width: 60px; height: auto; flex-shrink: 0; }
-```
-
-**Figma 좌표로 검증**:
-```
-As-Is: x=2737, w=539
-Arrow: x=3375, w=252
-To-Be: x=3687, w=672
-→ 세 요소가 같은 Y(1269)에 수평 배치됨을 좌표로 확인
-```
-
-### 9.3 3D 리본/두루마리 배지 정렬 공식
-
-리본 이미지의 접힘선(fold-back)이 박스 테두리와 정확히 일치해야 할 때:
-
-```
-┌── 리본 이미지 ──────────────┐
-│ 접힘 삼각형 (fold) │ ← fold_offset (이미지 top에서)
-│ 리본 본체 │
-│ │
-└──────────────────────────────┘
-════════════════════════════════ ← 박스 top border (여기에 fold가 일치해야 함)
-┌── 박스 ──────────────────────┐
-│ padding-top = ribbon_below │
-│ 콘텐츠 시작 │
-
-계산:
- fold_offset = (box_y - badge_y) × scale → CSS: top 값
- ribbon_below = ribbon_height - fold_offset → 박스 안 침입 높이
- box_padding_top = ribbon_below + 여유(6px) → 콘텐츠 겹침 방지
-```
-
-**핵심**: 리본을 올리거나 내리는 게 아니라, **박스의 위치를 계산**하는 것.
-- `top: -fold_offset` → 리본 접힘선 = 박스 top border
-- 리본은 그대로, 박스와의 관계만 수학적으로 결정
-
----
-
-## 10. 실수 방지 (Anti-patterns)
-
-### 10.1 절대 하면 안 되는 것
-
-| Anti-pattern | 왜 안 되는지 | 올바른 방법 |
-|-------------|------------|-----------|
-| px 시행착오 조정 ("좀 더 올려볼게") | 3번 이상 실패, 시간 낭비 | Figma 좌표에서 수학적 계산 |
-| 3D 효과를 CSS로 재현 | 평면적이라 품질 차이 심각 | Figma에서 PNG 추출 |
-| 비교 리뷰를 좌/우 배치 | 크기 차이로 비교 불가 | 위/아래 같은 폭으로 배치 |
-| Jinja2 템플릿을 브라우저에서 직접 열기 | 변수 미렌더, 이미지 경로 깨짐 | comparison.html 또는 FastAPI로 확인 |
-| 독립 flex-column으로 2열 비교 | 행 정렬 안 됨 | CSS Grid 행 공유 |
-| 느낌으로 폰트/색상 설정 | Figma와 다른 결과물 | Figma API에서 정확한 값 추출 |
-
-### 10.2 반드시 해야 하는 것
-
-| 원칙 | 이유 |
-|------|------|
-| CSS 주석에 계산 근거 기록 | 나중에 왜 이 값인지 추적 가능 |
-| 비교 리뷰 후 진행 | 디자인 차이를 사전에 발견 |
-| 이미지 자산은 `static/figma-assets/`에 저장 | FastAPI가 서빙, 경로 일관성 |
-| `comparison.html`에 모든 프레임 포함 | 한 페이지에서 전체 리뷰 가능 |
-| Figma 노드 ID 기록 | 나중에 업데이트된 디자인 재추출 가능 |
-
----
-
-## 11. Figma 소스 정보
-
-### 현재 등록된 Figma 파일
-
-| 항목 | 값 |
-|------|---|
-| File Key | `9S6LsQyO6zlRxtiqZccOUM` |
-| Page | Page 1 (0:1) |
-| Frame 2 (hero-icon-cards) | Node `1:5` |
-| Frame 3 (compare-2col-badge) | Node `1:35` |
-| Frame 4 (compare-detail-gradient) | Node `1:49` |
-| Badge (빨간 리본) | Node `1:33` (image 4019) |
-| Badge (틸 리본) | Node `1:43` (image 2197) |
-| Arrow (As-Is→To-Be) | Node `1:67` (image 2645) |
-| Box (빨간 테두리) | Node `1:12` (Rectangle 42894) |
-| Box (틸 테두리) | Node `1:37` (Rectangle 42598) |
-
----
-
-## 12. 체크리스트
-
-새 Figma 프레임을 블록으로 변환할 때:
-
-- [ ] Figma API로 노드 데이터 추출 (좌표, 크기, 색상, 폰트)
-- [ ] PNG 렌더링 다운로드 (scale=2)
-- [ ] 복잡한 비주얼 요소 식별 → 이미지로 추출 (CSS로 만들지 않음)
-- [ ] 스케일 팩터 계산 (1200 / frame_width)
-- [ ] 핵심 정렬 포인트 수학적 계산 (좌표 차이 × 스케일)
-- [ ] CSS 값 도출 (계산 근거를 주석으로 기록)
-- [ ] 비교 리뷰 페이지에 추가 (위/아래 같은 폭)
-- [ ] 사용자 피드백 확인
-- [ ] Jinja2 템플릿 변환 (고정값→변수, 반복→루프)
-- [ ] catalog.yaml 등록
diff --git a/PHASE-FIGMA-BLOCKS.md b/PHASE-FIGMA-BLOCKS.md
deleted file mode 100644
index 01503a3..0000000
--- a/PHASE-FIGMA-BLOCKS.md
+++ /dev/null
@@ -1,463 +0,0 @@
-# Phase 2: Figma Block Design Specification
-
-> 3개 블록 + 2개 서브 컴포넌트 상세 설계
-> 기준: FIGMA-DESIGN-LANGUAGE.md 분석 결과
-
----
-
-## Block 1: `hero-icon-cards`
-
-### 1.1 시각적 구조
-
-```
-┌──────────────────────────────────────────────┐
-│ [Hero Statement - 큰 텍스트, 중앙] │ ← zone: header or full-width
-│ │
-│ ┌─[Badge Title]─┐ │
-│──────────┤ ├───────────────────│
-│ ┌─────┐ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
-│ │icon │ │ │icon │ │icon │ │icon │ │icon │ │ ← N개 카드 (2~6)
-│ │ │ │ │ │ │ │ │ │ │ │ │
-│ │Title│ ╎ │Title│ │Title│ │Title│ │Title│ │ ← 세로 구분선
-│ │(sub)│ │ │(sub)│ │(sub)│ │(sub)│ │(sub)│ │
-│ └─────┘ │ └─────┘ └─────┘ └─────┘ └─────┘ │
-│ └───────────────────────────────────│
-└──────────────────────────────────────────────┘
-```
-
-### 1.2 슬롯 정의
-
-| 슬롯 | 필수 | 타입 | 설명 |
-|------|------|------|------|
-| `statement` | O | string | Hero 메시지 (1-2줄) |
-| `badge_title` | X | string | 배지 바 텍스트 |
-| `cards[]` | O | array | 카드 배열 |
-| `cards[].icon` | X | string | 아이콘 이미지 URL 또는 이모지 |
-| `cards[].title` | O | string | 영문 또는 주제목 |
-| `cards[].subtitle` | X | string | 한국어 부제 |
-| `cards[].color` | X | string | 개별 카드 강조색 |
-
-### 1.3 동적 재구성 규칙
-
-#### 그리드 계산
-```
-입력: N = cards.length, W = container_width_px
-
-N ≤ 5: 1행 N열
- col_count = N
- card_width = (W - padding*2 - gap*(N-1)) / N
-
-N = 6: 1행 6열 (gap 축소)
- col_count = 6
- gap = 8px (기본 16px에서 축소)
-
-N > 6: 2행
- col_count = ceil(N / 2)
- row_count = 2
-```
-
-#### 폰트 스케일링
-```
-card_width ≥ 200px → title: 20px, subtitle: 14px
-card_width ≥ 150px → title: 16px, subtitle: 12px
-card_width < 150px → title: 14px, subtitle: 11px
-```
-
-#### 높이 계산
-```
-hero_height = statement_lines * line_height + padding
-badge_height = 44px (고정)
-card_area_height = icon_height + title_lines * title_lh + subtitle_lh + padding
- - 1행: card_area_height
- - 2행: card_area_height * 2 + gap
-
-total_min_height = hero_height + badge_height + card_area_height + gaps
-```
-
-### 1.4 catalog.yaml schema
-
-```yaml
-- id: hero-icon-cards
- name: 히어로 문구 + 아이콘 카드
- category: cards
- template: blocks/cards/hero-icon-cards.html
- height_cost: xlarge
- min_height_px: 280
- relation_types: [definition, flow]
- min_items: 2
- max_items: 6
- visual: >
- 상단에 큰 Hero 메시지(24px bold, 중앙) + 배지 바 +
- 하단에 N열 아이콘 카드(둥근 흰색 컨테이너, 세로 구분선).
- 각 카드는 아이콘 이미지 + 영문 제목(20px/900) + 한국어 부제(14px/500).
- when: >
- 핵심 목표나 가치를 N개 키워드로 선언할 때.
- 각 키워드에 아이콘이나 이미지가 있을 때.
- "우리가 추구하는 5가지 가치" 같은 구조.
- not_for: >
- 비교/대조 구조 → compare-2col-badge.
- 상세 설명이 길 때 → card-icon-desc.
- 순서/단계 → card-step-vertical 또는 process-horizontal.
- purpose_fit: [핵심전달, 가치선언]
- zone: full-width-only
- slots:
- required: [statement, cards[]]
- optional: [badge_title, cards[].icon, cards[].subtitle, cards[].color]
- schema:
- statement:
- max_lines: 2
- font_size: 24
- ref_chars:
- body: 60
- note: "24px bold, 중앙정렬, 흰색 스트로크"
- badge_title:
- max_lines: 1
- font_size: 18
- ref_chars:
- body: 20
- note: "18px bold white, 배지 바 위"
- card_title:
- max_lines: 2
- font_size: 20
- ref_chars:
- body: 15
- note: "20px black/900, 중앙정렬"
- card_subtitle:
- max_lines: 1
- font_size: 14
- ref_chars:
- body: 10
- note: "14px medium, 한국어 부제"
- padding_overhead_px: 60
- padding_h_px: 32
-```
-
----
-
-## Block 2: `compare-2col-badge`
-
-### 2.1 시각적 구조
-
-```
-┌──────────────────────────────────────────────┐
-│ ┌─[Badge Title]─┐ │
-│────────────┤ ├─────────────────│
-│ │
-│ ┌── Left Column ──┐ ╎ ┌── Right Column ──┐ │
-│ │ │ ╎ │ │ │
-│ │ [Big Title] │ ╎ │ [Big Title] │ │
-│ │ │ ╎ │ │ │
-│ │ body text... │ ╎ │ body text... │ │
-│ │ body text... │ ╎ │ body text... │ │
-│ │ │ ╎ │ │ │
-│ └──────────────────┘ ╎ └──────────────────┘ │
-│ │
-│ [Optional: Hero Statement] │
-└──────────────────────────────────────────────┘
-```
-
-### 2.2 슬롯 정의
-
-| 슬롯 | 필수 | 타입 | 설명 |
-|------|------|------|------|
-| `badge_title` | O | string | 배지 바 텍스트 |
-| `left_title` | O | string | 좌측 열 대제목 |
-| `left_body` | O | string | 좌측 열 본문 |
-| `right_title` | O | string | 우측 열 대제목 |
-| `right_body` | O | string | 우측 열 본문 |
-| `statement` | X | string | 하단 Hero 메시지 |
-| `left_color` | X | string | 좌측 강조색 (기본: --color-teal) |
-| `right_color` | X | string | 우측 강조색 (기본: --color-teal) |
-
-### 2.3 동적 재구성 규칙
-
-#### 레이아웃 계산
-```
-container_width = 컨테이너 전체 폭
-padding_h = 32px * 2
-
-2열 모드 (기본):
- col_width = (container_width - padding_h - divider_gap) / 2
- divider_gap = 32px
-
-1열 모드 (sidebar zone, 폭 < 500px):
- 좌/우가 세로 스택
- col_width = container_width - padding_h
-```
-
-#### 높이 계산
-```
-badge_height = 44px
-left_height = title_height + body_lines * line_height + padding
-right_height = title_height + body_lines * line_height + padding
-content_height = max(left_height, right_height)
-statement_height = statement ? (statement_lines * 28 + 16) : 0
-
-total = badge_height + content_height + statement_height + gaps
-```
-
-#### 텍스트 피팅
-```
-col_width에 따른 body 글자수 제한:
- col_width ≥ 500px → ~40자/줄, font: 16px
- col_width ≥ 350px → ~28자/줄, font: 14px
- col_width < 350px → ~20자/줄, font: 13px
-```
-
-### 2.4 catalog.yaml schema
-
-```yaml
-- id: compare-2col-badge
- name: 배지 헤더 2열 비교
- category: cards
- template: blocks/cards/compare-2col-badge.html
- height_cost: large
- min_height_px: 200
- relation_types: [comparison, contrast]
- visual: >
- 상단 배지 바(이미지/그라디언트 배경 + 흰색 텍스트) 아래
- 2열 비교 레이아웃. 좌/우 각각 대제목(24px/900) + 본문(16px/700).
- 중앙 세로 구분선. 둥근 흰색 컨테이너(r:20).
- 선택적 하단 Hero 메시지.
- when: >
- 두 개념/방법/전략을 나란히 비교할 때.
- 배지 헤더로 상위 주제를 명시.
- 예: "Engn. Solution vs DfMA", "현재 vs 미래"
- not_for: >
- 3개 이상 항목 비교 → compare-3col-badge.
- 장/단점 목록 → comparison-2col.
- 상세 내용이 길고 섹션이 많을 때 → compare-detail-gradient.
- purpose_fit: [비교대조, 개념정의]
- zone: full-width-only
- slots:
- required: [badge_title, left_title, left_body, right_title, right_body]
- optional: [statement, left_color, right_color]
- schema:
- badge_title:
- max_lines: 1
- font_size: 18
- ref_chars:
- body: 15
- note: "18px bold white, 배지 바"
- left_title:
- max_lines: 1
- font_size: 24
- ref_chars:
- body: 15
- note: "24px black/900, 흰색 스트로크"
- left_body:
- max_lines: 6
- font_size: 16
- ref_chars:
- body: 200
- note: "16px/700, 틸 색상"
- right_title:
- max_lines: 1
- font_size: 24
- ref_chars:
- body: 15
- note: "24px black/900, 흰색 스트로크"
- right_body:
- max_lines: 6
- font_size: 16
- ref_chars:
- body: 200
- note: "16px/700, 틸 색상"
- statement:
- max_lines: 2
- font_size: 20
- ref_chars:
- body: 50
- note: "20px bold, 중앙정렬"
- padding_overhead_px: 56
- padding_h_px: 32
-```
-
----
-
-## Block 3: `compare-detail-gradient`
-
-### 3.1 시각적 구조
-
-```
-┌──────────────────────────────────────────────────────────┐
-│ ┌───── Left Header Bar (gradient) ─────┐┌── Right ─────┐│
-│ │ [Left Column Title] ││ [Right Title] ││
-│ └──────────────────────────────────────┘└───────────────┘│
-│ ┌─────── Left BG (warm) ──────┐┌──── Right BG (teal) ──┐│
-│ │ ││ ││
-│ │ [Section 1 Title] ││ [Section 1 Title] ││
-│ │ • body text ││ • body text ││
-│ │ • body text ││ • body text ││
-│ │ ││ ││
-│ │ [Section 2 Title] ││ [Section 2 Title] ││
-│ │ • body text ││ • body text ││
-│ │ • body text ││ • body text ││
-│ │ ││ ││
-│ │ [Section N Title] ││ [Section M Title] ││
-│ │ • body text ││ • body text ││
-│ └──────────────────────────────┘└───────────────────────┘│
-└──────────────────────────────────────────────────────────┘
-```
-
-### 3.2 슬롯 정의
-
-| 슬롯 | 필수 | 타입 | 설명 |
-|------|------|------|------|
-| `left_header` | O | string | 좌측 열 헤더 타이틀 |
-| `right_header` | O | string | 우측 열 헤더 타이틀 |
-| `left_sections[]` | O | array | 좌측 섹션 배열 |
-| `left_sections[].title` | O | string | 섹션 소제목 |
-| `left_sections[].body` | O | string | 섹션 본문 (줄바꿈 허용) |
-| `right_sections[]` | O | array | 우측 섹션 배열 |
-| `right_sections[].title` | O | string | 섹션 소제목 |
-| `right_sections[].body` | O | string | 섹션 본문 |
-| `left_color_theme` | X | string | 좌측 테마 (기본: warm) |
-| `right_color_theme` | X | string | 우측 테마 (기본: teal) |
-
-### 3.3 동적 재구성 규칙 (★ 가장 수학적으로 복잡)
-
-#### 그리드 계산
-```
-container_width에서 2열 분할:
- col_width = (container_width - gap) / 2
- gap = 0px (그라디언트가 맞닿음)
-```
-
-#### 섹션 높이 계산 (핵심)
-```
-header_bar_height = 48px (고정)
-
-각 섹션의 높이:
- section_height(s) =
- title_height(s.title, title_font_size, col_width) +
- body_height(s.body, body_font_size, col_width) +
- section_padding
-
- title_height = ceil(char_count / chars_per_line) * title_line_height
- body_height = line_count * body_line_height
-
- chars_per_line = floor(col_width / (font_size * 0.55)) // 한글 평균 0.55em
-
-좌측 전체:
- left_total = header_bar + sum(section_height for s in left_sections) + gaps
-
-우측 전체:
- right_total = header_bar + sum(section_height for s in right_sections) + gaps
-
-content_height = max(left_total, right_total)
-```
-
-#### 오버플로 방지 — Fit 검증
-```
-if content_height > container_available_height:
-
- 전략 1: 폰트 축소
- body_font_size -= 1px (최소 12px)
- 재계산
-
- 전략 2: 섹션 본문 줄 수 제한
- max_body_lines = floor(
- (available_per_section - title_height) / body_line_height
- )
- available_per_section = (container_height - header*2 - gaps) / max(N_left, N_right)
-
- 전략 3: Kei 에스컬레이션 (기존 파이프라인)
- content 요약 요청
-```
-
-#### 색상 테마 매핑
-```
-warm (좌측 기본):
- header_gradient: rgba(165,161,150,0.10) → rgba(57,50,30,1.00)
- section_title_color: var(--color-warm-brown)
- bg: rgba(255,255,255,0.30) → rgba(57,50,30,0.30)
-
-teal (우측 기본):
- header_gradient: rgba(41,107,85,0.10) → rgba(3,33,24,1.00)
- section_title_color: var(--color-dark-teal)
- bg: rgba(41,107,85,0.30) → rgba(255,255,255,0.30)
-```
-
-### 3.4 catalog.yaml schema
-
-```yaml
-- id: compare-detail-gradient
- name: 그라디언트 상세 2열 비교
- category: cards
- template: blocks/cards/compare-detail-gradient.html
- height_cost: xlarge
- min_height_px: 300
- relation_types: [comparison, contrast, process]
- min_items: 2 # 좌/우 최소 1섹션씩
- max_items: 10 # 좌+우 합계
- visual: >
- 좌우 그라디언트 배경(워 브라운 vs 다크틸)으로 나뉜 2열 비교.
- 각 열 상단에 그라디언트 헤더 바 + 큰 제목(28px/900).
- 하단에 N개 섹션(소제목 22px/900 + 본문 16px/700) 반복.
- 좌측은 따뜻한 톤(과정/As-Is), 우측은 차가운 톤(결과/To-Be).
- when: >
- 두 카테고리를 상세하게 비교할 때.
- 각 카테고리에 여러 하위 항목이 있을 때.
- 과정 vs 결과, As-Is vs To-Be, 문제 vs 해결 구조.
- not_for: >
- 간단한 2항목 비교(본문 짧을 때) → compare-2col-badge.
- 3열 비교 → compare-3col-badge.
- 비교가 아닌 단독 리스트 → dark-bullet-list.
- purpose_fit: [비교대조, 구조시각화, 근거사례]
- zone: full-width-only
- slots:
- required: [left_header, right_header, left_sections[], right_sections[]]
- optional: [left_color_theme, right_color_theme]
- schema:
- left_header:
- max_lines: 1
- font_size: 28
- ref_chars:
- body: 20
- note: "28px black/900, 그라디언트 바 위"
- right_header:
- max_lines: 1
- font_size: 28
- ref_chars:
- body: 20
- note: "28px black/900, 그라디언트 바 위"
- section_title:
- max_lines: 2
- font_size: 22
- ref_chars:
- body: 30
- note: "22px/900, 색상 테마별 (브라운 or 틸)"
- section_body:
- max_lines: 4
- font_size: 16
- ref_chars:
- body: 120
- note: "16px/700, black"
- padding_overhead_px: 48
- padding_h_px: 0
-```
-
----
-
-## 서브 컴포넌트
-
-### S1. 장식 이미지 (3D 화살표 등)
-- 블록이 아닌 **콘텐츠 이미지**로 처리
-- `cards[].icon` 또는 별도 `decoration_image` 슬롯으로 전달
-- 블록은 `
-
- 이전 상태 1
- 이전 상태 2
-
-
-
-변환 후 1
- 변환 후 2
- /`) |
-
----
-
-## 작업 계획
-
-### Phase A: Figma 분석 + 패턴 추출
-
-#### A-1: Figma 전체 섹션 이미지 렌더링
-- **작업:** 각 섹션/프레임을 이미지로 렌더링하여 시각적으로 패턴 식별
-- **방법:**
- - **1차:** Framelink MCP `get_figma_data` — CSS-ready 데이터로 노드 구조 + 스타일 동시 추출
- - **2차:** Figma 공식 MCP `get_screenshot` — 시각 참고용 스크린샷
- - **fallback:** Figma REST API `/v1/images/{file_key}?ids={node_ids}` (MCP 미설치 시)
-- **산출물:** `docs/figma-screenshots/` 폴더에 PNG 저장
-- **완료 기준:** 모든 자세히보기 프레임(8개)의 스크린샷 확보
-
-#### A-2: Figma 노드 구조 심층 분석
-- **작업:** 각 프레임의 상세 스타일 + 레이아웃 정보 추출
-- **방법:**
- - **1차:** Framelink MCP `get_figma_data` (nodeId 지정, depth 조절)
- - 자동 CSS 변환: 색상→hex/rgba, 레이아웃→flex 용어, 그림자→box-shadow, 그라데이션→linear-gradient()
- - 스타일 중복 제거 (글로벌 변수로 추출)
- - 토큰 효율적 (raw API 대비 1/5 크기)
- - **2차:** Figma 공식 MCP `get_variable_defs` — 디자인 토큰/변수 추출
- - **fallback:** Figma REST API `/v1/files/{key}/nodes?ids={ids}&depth=5` (MCP 미설치 시)
-- **추출 정보:**
- - TEXT 노드: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, 텍스트 내용
- - FRAME/GROUP: auto-layout (direction, gap, padding, alignItems, justifyContent), constraints
- - RECTANGLE: fills (solid/gradient/image), strokes, cornerRadius, effects
- - INSTANCE: componentId (재사용 컴포넌트 식별)
-- **Figma → CSS 매핑 (Framelink MCP가 자동 처리, REST API 시 수동):**
- - `layoutMode: "VERTICAL"` → `flex-direction: column`
- - `primaryAxisAlignItems: "CENTER"` → `justify-content: center`
- - `itemSpacing: 20` → `gap: 20px`
- - `paddingLeft/Right/Top/Bottom` → `padding`
- - `fills[].color {r,g,b,a}` → `rgba()` 또는 `#hex`
- - `fills[].type: "GRADIENT_LINEAR"` → `linear-gradient(...)`
- - `cornerRadius` → `border-radius`
- - `strokes + strokeWeight` → `border`
- - `effects[].type: "DROP_SHADOW"` → `box-shadow`
- - `fontSize` → `font-size` (px 단위)
- - `lineHeightPercentFontSize: 170` → `line-height: 1.7`
-- **산출물:** `docs/figma-analysis/` 폴더에 구조 문서
-- **주의:** Figma API rate limit 심함 — depth 깊은 요청은 30분 차단 가능. 얕게 요청 후 필요한 노드만 상세 조회
-
-#### A-3: 디자인 패턴 분류 + 명명
-- **작업:** 추출된 시각 요소를 재사용 가능한 블록 단위로 분류
-- **기준:**
- - 2회 이상 반복되는 패턴 → 블록 후보
- - 슬롯(교체 가능한 위치)이 명확한 것 → 우선 순위 높음
- - 콘텐츠 유형과 매칭되는 것 → 우선 순위 높음
-- **산출물:** 패턴 목록 + 각 패턴의 Figma 원본 노드 ID
-
-### Phase B: HTML/CSS 컴포넌트 제작
-
-#### B-1: 신규 블록 템플릿 제작 (8~10종)
-- **파일:** `templates/blocks/{name}/` 폴더별 정리 (변형별 파일 + preview.png)
-- **제작 순서 (우선순위):**
- 1. `section-title/default.html` — 공통 헤더 (모든 슬라이드에서 사용)
- 2. `example-card/2col.html` — 사례 카드 (출처+불릿, 정책 문서 인용)
- 3. `image-block/full.html`, `side.html`, `thumb.html` — 이미지 블록 3변형
- - full: 전체 너비 (핵심 도표, 가로형)
- - side: 텍스트 옆 (보조 이미지, 세로형)
- - thumb: 썸네일 (참고 문서 표지)
- - CSS: `object-fit: contain` (비율 유지, 잘리지 않음)
- - 원본 이미지 그대로 사용, 크기만 조절 (crop 안 함)
- 4. `image-gallery/2col.html`, `3col.html`, `2x2.html` — 이미지 갤러리
- 5. `timeline/vertical.html`, `horizontal.html` — 타임라인 (연혁/로드맵)
- 6. `big-number/3col.html`, `4col.html` — 핵심 지표 (큰 숫자 + 보조 텍스트)
- 7. `icon-list/vertical.html`, `grid.html` — 아이콘 리스트 (기능 나열)
- 8. `details-block/default.html` — 자세히보기 (`