블록 템플릿 업데이트: 수정 3개 + 신규 17개 + catalog.yaml 재정비

수정:
- compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선

신규 블록:
- cards: category-strip-table, system-2col-center, hero-icon-cards_1
- emphasis: checklist-dark
- visuals: cycle-orbit
- new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개
- redesign/: card_hero-icon-cards_1
- svg/: arc_left, arrow_conclusion, arrow_down, line_divider
- BEPs: process-product-2col SVG + 테스트

catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리)

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

templates/blocks/new/cards-3col-persona.html

@@ -0,0 +1,117 @@
+<!-- 3열 페르소나 카드: CSS overlay + 이미지(bg, badge, icon, photo) -->
+<!--
+  📋 cards-3col-persona
+  ─────────────────
+  용도: 3개 역할/관점별 목표를 나란히 비교. 뱃지+불릿+사진 3단 구성.
+  슬롯:
+    personas[3]:
+      bg_img — 컬럼 배경 텍스처 (이미지, 실사)
+      overlay_color — 오버레이 색상 (CSS, 기본값 제공)
+      badge_outer_img, badge_inner_img — 원형 뱃지 (이미지, 일러스트)
+      label_line1, label_line2, label_color
+      bullet_icon — 체크 아이콘 (이미지)
+      bullets[] (text, compact: bool)
+      photo_img — 하단 사진 (이미지, 실사)
+  Figma 원본: Frame 1171281191 (node 45:16, 2601×1927)
+  수학적 계산:
+    scale = 1280 / 2601 = 0.49213
+    badge: 396×397 → 195×195, inner offset (12%,14%), size 76%
+    overlay: 단색 opacity 0.8, radius ~30px (MCP opacity-80 확인)
+      left=#d6e7c4, mid=#e1efe1, right=#d0c0ad (픽셀 분석)
+    label: 65px/50px Bold (MCP 확인)
+    bullet icon: 32.4×32.5 → 16×16 (이미지, 아이콘)
+    bullet text: 40px/85px Medium #000 (MCP 확인)
+    photo: radius=50px→25px, opacity=0.7 (MCP opacity-70 확인)
+  CSS 요소: overlay 단색+opacity+radius
+  이미지 요소: bg(텍스처), badge(일러스트), icon(아이콘), photo(실사)
+  인사이트: I-2(컬럼 동일 top/bottom, space-between), R13(marker+text flex pair)
+-->
+<div class="block-c3p">
+  {% for p in personas %}
+  <div class="c3p-col">
+    {% if p.bg_img %}<img src="{{ p.bg_img }}" class="c3p-bg" alt="">{% endif %}
+    <div class="c3p-overlay" style="background: {{ p.overlay_color|default('#d6e7c4') }};"></div>
+
+    <div class="c3p-badge">
+      {% if p.badge_outer_img %}<img src="{{ p.badge_outer_img }}" class="c3p-badge-outer" alt="">{% endif %}
+      {% if p.badge_inner_img %}<img src="{{ p.badge_inner_img }}" class="c3p-badge-inner" alt="">{% endif %}
+      <div class="c3p-badge-label" style="color: {{ p.label_color|default('#285b4a') }};">
+        {% if p.label_line1 %}<span class="c3p-ln1">{{ p.label_line1 }}</span>{% endif %}
+        {% if p.label_line2 %}<span class="c3p-ln2">{{ p.label_line2 }}</span>{% endif %}
+      </div>
+    </div>
+
+    <div class="c3p-bullets">
+      {% for b in p.bullets %}
+      <div class="c3p-bullet {{ 'c3p-bullet--compact' if b.compact }}">
+        {% if p.bullet_icon %}<span class="c3p-bullet-icon"><img src="{{ p.bullet_icon }}" alt=""></span>{% endif %}
+        <span class="c3p-bullet-text">{{ b.text|safe }}</span>
+      </div>
+      {% endfor %}
+    </div>
+
+    {% if p.photo_img %}
+    <div class="c3p-photo"><img src="{{ p.photo_img }}" alt=""></div>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+
+<style>
+.block-c3p {
+  display: flex; gap: 4px;
+  width: 100%; height: 100%; word-break: keep-all;
+}
+
+.c3p-col {
+  flex: 1; position: relative;
+  display: flex; flex-direction: column; align-items: center;
+  overflow: hidden;
+}
+
+.c3p-bg {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%; object-fit: cover; z-index: 0;
+}
+
+/* overlay: CSS 단색 (MCP opacity-80, 픽셀 분석 색상) */
+.c3p-overlay {
+  position: absolute; top: 10%; left: 5%;
+  width: 90%; height: 70%;
+  opacity: 0.8; border-radius: 30px; z-index: 1;
+}
+
+.c3p-badge {
+  position: relative; z-index: 2;
+  width: 120px; height: 120px; flex: none; margin-bottom: 8px;
+}
+.c3p-badge-outer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.c3p-badge-inner { position: absolute; left: 12%; top: 14%; width: 76%; height: 76%; object-fit: contain; }
+.c3p-badge-label {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  font-weight: 700; text-align: center; letter-spacing: -0.02em; z-index: 3;
+}
+.c3p-ln1 { font-size: 20px; line-height: 1.1; }
+.c3p-ln2 { font-size: 16px; line-height: 1.2; }
+
+/* bullets: I-2 space-between, R13 flex pair */
+.c3p-bullets {
+  position: relative; z-index: 2;
+  flex: 1; display: flex; flex-direction: column;
+  justify-content: space-between; width: 90%; padding: 4px 0;
+}
+.c3p-bullet { display: flex; align-items: flex-start; }
+.c3p-bullet--compact .c3p-bullet-text { line-height: 1.3; }
+.c3p-bullet-icon { flex: none; width: 16px; height: 16px; margin-top: 0.35em; margin-right: 6px; }
+.c3p-bullet-icon img { width: 100%; height: 100%; object-fit: contain; }
+.c3p-bullet-text { flex: 1; font-size: 15px; font-weight: 500; color: #000; line-height: 1.6; }
+
+/* photo: MCP opacity-70, radius=50px→25px */
+.c3p-photo {
+  position: relative; z-index: 2;
+  width: 95%; border-radius: 16px;
+  overflow: hidden; opacity: 0.7; margin-top: auto;
+}
+.c3p-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
+</style>