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/blocks/cards/compare-detail-gradient.html

@@ -0,0 +1,113 @@
+<!-- 그라디언트 상세 2열 비교: 비대칭 라운드 헤더 + 행 공유 + As-Is/To-Be -->
+<!--
+  📋 compare-detail-gradient
+  ─────────────────
+  용도: 두 카테고리의 상세 비교 (각각 N개 하위 섹션, 행 공유 정렬)
+  슬롯: left_header, right_header, sections[] (각 row에 left + right)
+  Figma 원본: Frame 4 (과정의 혁신 vs 결과의 혁신)
+  디자인:
+    - 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
+    - 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
+    - CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
+    - 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
+  수학적 계산:
+    좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
+-->
+<div class="block-cdg">
+  <!-- Row 0: Headers -->
+  <div class="cdg-header cdg-header-warm">
+    <span class="cdg-header-text">{{ left_header }}</span>
+  </div>
+  <div class="cdg-header cdg-header-teal">
+    <span class="cdg-header-text">{{ right_header }}</span>
+  </div>
+
+  <!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
+  {% for row in sections %}
+  <div class="cdg-cell cdg-cell-warm">
+    <div class="cdg-sec-title cdg-title-warm">{{ row.left.title }}</div>
+    {% if row.left.asis is defined %}
+    <div class="cdg-asis-tobe">
+      <div class="cdg-asis">
+        {% for b in row.left.asis %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
+      </div>
+      <img src="{{ arrow_image | default('../../../static/figma-assets/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
+      <div class="cdg-tobe">
+        {% for b in row.left.tobe %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
+      </div>
+    </div>
+    {% elif row.left.bullets is defined %}
+    <div class="cdg-sec-body">
+      {% for b in row.left.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
+    </div>
+    {% else %}
+    <div class="cdg-sec-body">{{ row.left.body }}</div>
+    {% endif %}
+  </div>
+
+  <div class="cdg-cell cdg-cell-teal">
+    <div class="cdg-sec-title cdg-title-teal">{{ row.right.title }}</div>
+    {% if row.right.bullets is defined %}
+    <div class="cdg-sec-body">
+      {% for b in row.right.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
+    </div>
+    {% else %}
+    <div class="cdg-sec-body">{{ row.right.body }}</div>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+
+<style>
+/*
+  CSS Grid: 2열 × (1+N)행
+  행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
+  Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
+*/
+.block-cdg {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* ── Headers (비대칭 라운드) ── */
+.cdg-header { padding: 8px 20px; display: flex; min-height: 36px; align-items: center; }
+.cdg-header-text { font-size: 15px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
+.cdg-header-warm {
+  background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
+  border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
+}
+.cdg-header-teal {
+  background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
+  border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
+}
+
+/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
+.cdg-cell {
+  padding: 8px 14px;
+  display: flex; flex-direction: column; gap: 4px;
+  align-self: start;
+}
+.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
+.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
+
+/* ── Section Title & Body ── */
+.cdg-sec-title { font-size: 12px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 2px; }
+.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
+.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
+.cdg-sec-body { padding-left: 8px; }
+
+/* ── Bullets ── */
+.cdg-bullet {
+  position: relative; padding-left: 14px;
+  font-size: 11px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
+  line-height: 1.7; word-break: keep-all;
+}
+.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
+
+/* ── As-Is → To-Be 수평 레이아웃 ── */
+.cdg-asis-tobe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
+.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
+.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
+</style>