WIP: hero-icon-cards_1 블록 + 오답노트 + figma 관련 파일

- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층)
- compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반)
- 오답노트.md: 절대 하지 말아야 하는 실수 목록
- figma_to_html.py: Figma→HTML 변환 스크립트
- static/figma-assets/: Figma export 이미지 (배지, 화살표)
- 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

templates/catalog.yaml

@@ -751,6 +751,227 @@ blocks:
       note: 항목 수
   padding_overhead_px: 22
   padding_h_px: 32
+- 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 메시지(28px bold, 중앙, 흰 텍스트, 빨간 강조).
+    3D 빨간 리본 배지가 빨간 테두리 흰 박스(r:20) 위에 걸침.
+    박스 안에 N열 아이콘 카드(구분선). 각 카드: 아이콘 + 영문 제목(20px/900) + 한국어 부제(15px/500).
+  visual_diff: >
+    - card-icon-desc: 밝은 배경, 이모지+제목+설명. 리본/테두리 없음.
+    - card-dark-overlay: 다크 배경 이미지+흰 텍스트. 카드 개별 배경.
+    - 이 블록: 다크 배경 + 빨간 리본 배지 + 빨간 테두리 흰 박스 안 N열 카드.
+    적합: 핵심 목표/가치를 N개 키워드로 선언하며 시각적 임팩트 필요할 때.
+    부적합: 상세 설명 → card-icon-desc, 비교 → compare-2col-badge.
+  when: >
+    핵심 목표나 가치를 N개 키워드로 선언할 때.
+    각 키워드에 아이콘이나 이미지가 있을 때.
+    프레젠테이션형 임팩트가 필요할 때.
+  not_for: >
+    비교/대조 → compare-2col-badge.
+    상세 설명 → card-icon-desc.
+    순서/단계 → process-horizontal.
+  purpose_fit:
+  - 핵심전달
+  zone: full-width-only
+  slots:
+    required:
+    - statement
+    - cards[]
+    optional:
+    - badge_title
+    - ribbon_image
+    - cards[].icon
+    - cards[].subtitle
+  schema:
+    statement:
+      max_lines: 2
+      font_size: 28
+      ref_chars:
+        body: 60
+      note: "28px bold white, 중앙, em=빨간 강조"
+    badge_title:
+      max_lines: 1
+      font_size: 20
+      ref_chars:
+        body: 15
+      note: "20px bold white, 3D 리본 위"
+    card_title:
+      max_lines: 2
+      font_size: 20
+      ref_chars:
+        body: 15
+      note: "20px black/900, 중앙정렬"
+    card_subtitle:
+      max_lines: 1
+      font_size: 15
+      ref_chars:
+        body: 10
+      note: "15px medium, 한국어 부제"
+  padding_overhead_px: 80
+  padding_h_px: 32
+- 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
+  max_items: 10
+  visual: >
+    좌우 그라디언트 배경(워 브라운 vs 다크틸)으로 나뉜 2열 비교.
+    비대칭 라운드 헤더(좌: 우라운드+우정렬, 우: 좌라운드+좌정렬).
+    N개 섹션(소제목 18px/900 + 불릿 14px/700) 반복.
+    CSS Grid 행 공유로 좌/우 섹션 제목이 같은 Y선에 정렬.
+    첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능.
+  visual_diff: >
+    - compare-2col-badge: 배지+2열, 단순 비교. 섹션 반복 없음.
+    - comparison-2col: 좌우 텍스트 블록 비교. 그라디언트 없음.
+    - 이 블록: 그라디언트+비대칭 헤더+N섹션 행 정렬. 가장 상세한 비교.
+    적합: 두 카테고리에 각각 3개+ 하위 항목이 있는 상세 비교.
+    부적합: 간단 비교 → compare-2col-badge, 표 형식 → compare-2col-split.
+  when: >
+    두 카테고리를 상세하게 비교할 때. 각 카테고리에 여러 하위 항목.
+    과정 vs 결과, As-Is vs To-Be, 문제 vs 해결 구조.
+  not_for: >
+    간단 비교(본문 짧을 때) → compare-2col-badge.
+    항목별 행 비교(표 형식) → compare-2col-split.
+    3열 비교 → compare-3col-badge.
+  purpose_fit:
+  - 비교대조
+  - 구조시각화
+  - 근거사례
+  zone: full-width-only
+  slots:
+    required:
+    - left_header
+    - right_header
+    - sections[]
+    optional:
+    - arrow_image
+    - sections[].left.asis
+    - sections[].left.tobe
+  schema:
+    left_header:
+      max_lines: 1
+      font_size: 26
+      ref_chars:
+        body: 20
+      note: "26px black/900, 비대칭 라운드 바"
+    right_header:
+      max_lines: 1
+      font_size: 26
+      ref_chars:
+        body: 20
+      note: "26px black/900, 비대칭 라운드 바"
+    section_title:
+      max_lines: 2
+      font_size: 18
+      ref_chars:
+        body: 30
+      note: "18px/900, 좌=브라운 우=틸"
+    section_body:
+      max_lines: 4
+      font_size: 14
+      ref_chars:
+        body: 120
+      note: "14px/700, 불릿 구조"
+  padding_overhead_px: 52
+  padding_h_px: 0
+- 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: >
+    상단 배지 바(틸 그라디언트 + 흰색 텍스트, r:12) 아래
+    2열 비교 레이아웃. 좌/우 각각 대제목(22px/900) + 본문(15px/500).
+    중앙 세로 구분선. 흰색 컨테이너(r:16). 선택적 하단 Hero 메시지.
+  visual_diff: >
+    - compare-2col-split: 중앙 '기준 라벨' 열이 있는 3열 표. 행별 상세 비교.
+    - comparison-2col: 좌우 텍스트 블록 비교. 표 없이 자유 형식.
+    - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만.
+    - 이 블록: 배지 헤더로 상위 주제 선언 + 2열 비교 + 선택적 결론 문구.
+    적합: 두 개념/전략의 정의를 비교하며 상위 주제를 배지로 명시할 때.
+    부적합: 항목별 행 비교 → compare-2col-split, 시각적 대비만 → compare-pill-pair.
+  when: >
+    두 개념/방법/전략을 나란히 비교할 때. 배지 헤더로 상위 주제를 명시.
+    예: "정책 달성 — Engn. Solution vs DfMA", "현재 vs 미래"
+  not_for: >
+    항목별 행 비교(5행+) → compare-2col-split.
+    3개 비교 → compare-3col-badge.
+    간단 텍스트만 → comparison-2col.
+  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: 22
+      ref_chars:
+        body: 15
+      note: 22px black/900
+    left_body:
+      max_lines: 6
+      font_size: 15
+      ref_chars:
+        body: 200
+      note: 15px/500, 틸 색상
+    right_title:
+      max_lines: 1
+      font_size: 22
+      ref_chars:
+        body: 15
+      note: 22px black/900
+    right_body:
+      max_lines: 6
+      font_size: 15
+      ref_chars:
+        body: 200
+      note: 15px/500, 틸 색상
+    statement:
+      max_lines: 2
+      font_size: 18
+      ref_chars:
+        body: 50
+      note: 18px bold, 중앙정렬
+  padding_overhead_px: 56
+  padding_h_px: 32
 - id: compare-3col-badge
   name: VS 배지 비교표
   category: tables