블록 템플릿 업데이트: 수정 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/compare-vs-rows.html

@@ -0,0 +1,122 @@
+<!-- VS 비교 행: CSS gradient pills + 좌/우 텍스트 비교 -->
+<!--
+  📋 compare-vs-rows
+  ─────────────────
+  용도: A vs B를 카테고리별로 좌/우 비교. CSS gradient pill, 하단 결론 박스.
+  슬롯:
+    header (icon, title) — 선택
+    main_labels (left, center, right)
+    rows[] (category, left_text, right_text)
+    conclusion (arrow_img, text — HTML with <em>)
+  Figma 원본: Frame 1171281195 (node 45:20, 1868×1908)
+  수학적 계산:
+    scale = 1280 / 1868 = 0.685225
+    main pill: 1803×75, radius=50px, grid 748|242|813
+    cat pill: 242px, radius=10px
+    left: #5c3714 Bold, right: #285b4a Bold (MCP 확인)
+    conclusion: SVG 분석 bg=#FAEDCB mix-blend-mode:multiply
+  CSS 요소: main pill gradient, cat pill gradient, conclusion bg, header gradient text
+  이미지 요소: header icon, conclusion arrow
+-->
+<div class="block-cvr">
+  {% if header %}
+  <div class="cvr-header">
+    {% if header.icon %}<div class="cvr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
+    <div class="cvr-header-title">{{ header.title }}</div>
+  </div>
+  {% endif %}
+
+  {% if main_labels %}
+  <div class="cvr-main-pill">
+    <div>{{ main_labels.left }}</div>
+    <div>{{ main_labels.center|default('vs.') }}</div>
+    <div>{{ main_labels.right }}</div>
+  </div>
+  {% endif %}
+
+  <div class="cvr-rows">
+    {% for row in rows %}
+    <div class="cvr-row">
+      <div class="cvr-left">{{ row.left_text|safe }}</div>
+      <div class="cvr-cat">{{ row.category }}</div>
+      <div class="cvr-right">{{ row.right_text|safe }}</div>
+    </div>
+    {% endfor %}
+  </div>
+
+  {% if conclusion %}
+  <div class="cvr-conclusion">
+    {% if conclusion.arrow_img %}<img src="{{ conclusion.arrow_img | default('svg/arrow_conclusion.svg') }}" class="cvr-conclusion-arrow" alt="">{% endif %}
+    <div class="cvr-conclusion-bg"></div>
+    <div class="cvr-conclusion-text">{{ conclusion.text|safe }}</div>
+  </div>
+  {% endif %}
+</div>
+
+<style>
+.block-cvr {
+  display: flex; flex-direction: column;
+  width: 100%; word-break: keep-all;
+}
+
+.cvr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.cvr-header-icon { width: 24px; height: 24px; flex: none; }
+.cvr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
+.cvr-header-title {
+  font-weight: 700; font-size: 28px;
+  background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  text-shadow: 0 0 4px #322c1e;
+}
+
+/* main pill: CSS gradient (MCP 확인) */
+.cvr-main-pill {
+  display: grid; grid-template-columns: 40fr 13fr 47fr;
+  align-items: center; height: 36px; border-radius: 24px;
+  background: linear-gradient(270deg, #285b4a 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, #4a4026 100%);
+  margin-bottom: 4px;
+}
+.cvr-main-pill > div { font-weight: 700; font-size: 22px; color: #fff; text-align: center; white-space: nowrap; }
+
+.cvr-rows { display: flex; flex-direction: column; flex: 1; }
+.cvr-row {
+  display: grid; grid-template-columns: 40fr 13fr 47fr;
+  align-items: center; min-height: 36px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cvr-left {
+  font-weight: 700; font-size: 16px; color: #5c3714;
+  text-align: right; padding: 6px 12px; line-height: 1.3;
+}
+.cvr-right {
+  font-weight: 700; font-size: 16px; color: #285b4a;
+  text-align: left; padding: 6px 12px; line-height: 1.3;
+}
+.cvr-left .sub, .cvr-right .sub { font-size: 14px; }
+
+/* cat pill: CSS gradient */
+.cvr-cat {
+  font-weight: 700; font-size: 16px; color: #fff;
+  text-align: center; white-space: nowrap; padding: 6px 8px; border-radius: 6px;
+  background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
+}
+
+/* conclusion: CSS bg (SVG 분석 #FAEDCB + multiply) */
+.cvr-conclusion {
+  position: relative; display: flex; align-items: center;
+  gap: 12px; margin-top: 8px; padding: 8px 16px; min-height: 60px;
+}
+.cvr-conclusion-arrow {
+  flex: none; width: 80px; height: 60px;
+  object-fit: contain; transform: rotate(180deg);
+}
+.cvr-conclusion-bg {
+  position: absolute; inset: 0;
+  background: #FAEDCB; mix-blend-mode: multiply; z-index: 0;
+}
+.cvr-conclusion-text {
+  position: relative; z-index: 1;
+  font-weight: 700; font-size: 18px; color: #000; line-height: 1.5;
+}
+.cvr-conclusion-text em { font-style: normal; color: #ae3607; font-size: 20px; }
+</style>