블록 템플릿 업데이트: 수정 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/stacked-arrow-list.html

@@ -0,0 +1,133 @@
+<!-- 적층 화살표 리스트: CSS title bar + 좌측 아크(이미지) + 다이아몬드형 행 -->
+<!--
+  📋 stacked-arrow-list
+  ─────────────────
+  용도: 핵심 항목 N개를 다이아몬드(원호) 형태로 적층 표시
+  슬롯:
+    title (HTML — <em>으로 강조)
+    left_label (HTML — <br>로 줄바꿈)
+    left_arc_img — 좌측 곡선 장식 (이미지, CSS 곡선 불가)
+    arrow_img — 화살표 아이콘 (이미지)
+    items[] (text, border_color)
+  Figma 원본: Frame 1171281180 (node 45:5, 1153×592)
+  수학적 계산:
+    scale = 1280 / 1153 = 1.11014 (확대)
+    title bar: Figma bg=#fbd5b9, radius=5px, shadow=0 4px 4px rgba(0,0,0,0.25) (MCP 확인)
+    title: 43px Bold #144838, highlight: 50px gradient(#cc5200) (MCP 확인)
+    row: bg=rgba(255,255,255,0.5), radius=30px, shadow=2px 4px 5px rgba(0,0,0,0.5) (MCP 확인)
+    border 색상: #fb5915, #e79000, #e9a804, #919f00, #0d6361 (MCP 확인)
+    행 다이아몬드 indent: [0%, 6%, 9%, 6%, 0%]
+  CSS 요소: title bar, row bg/border/shadow
+  이미지 요소: arc(곡선), arrow(아이콘)
+-->
+<div class="block-sal">
+  {% if title %}
+  <div class="sal-header">
+    <div class="sal-title-bar"></div>
+    <div class="sal-title">{{ title|safe }}</div>
+  </div>
+  {% endif %}
+
+  <div class="sal-body">
+    {% if left_arc_img or left_label %}
+    <div class="sal-deco">
+      {% if left_arc_img %}<img src="{{ left_arc_img | default('svg/arc_left.svg') }}" class="sal-arc" alt="">{% endif %}
+      {% if left_label %}<div class="sal-label">{{ left_label|safe }}</div>{% endif %}
+    </div>
+    {% endif %}
+
+    <div class="sal-rows">
+      {% for item in items %}
+      <div class="sal-row" style="--bc: {{ item.border_color|default('#fb5915') }};">
+        {% if arrow_img %}
+        <div class="sal-arrow"><img src="{{ arrow_img | default('svg/arrow_down.svg') }}" alt=""></div>
+        {% endif %}
+        <div class="sal-text">{{ item.text }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<style>
+.block-sal {
+  display: flex; flex-direction: column;
+  width: 100%;
+  word-break: keep-all;
+}
+
+/* ── 헤더 ── */
+.sal-header { position: relative; margin-bottom: 12px; }
+
+/* title bar: MCP 확인 bg=#fbd5b9, radius=5px, shadow */
+.sal-title-bar {
+  position: absolute;
+  left: 1%; top: 50%;
+  width: 98%; height: 32px;
+  background: #fbd5b9;
+  border-radius: 5px;
+  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
+  transform: translateY(-30%);
+}
+
+/* title: MCP 확인 #144838, highlight gradient(#cc5200) */
+.sal-title {
+  position: relative; z-index: 1;
+  font-size: 26px; font-weight: 700;
+  color: #144838;
+  text-align: center;
+  line-height: 1.4;
+  letter-spacing: -0.04em;
+}
+.sal-title em {
+  font-style: normal; font-weight: 900; font-size: 30px;
+  background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+
+.sal-body { display: flex; align-items: stretch; flex: 1; }
+
+/* 좌측: arc 이미지 + 세로 라벨 */
+.sal-deco {
+  position: relative; flex: none; width: 14%;
+  display: flex; align-items: center; justify-content: center;
+}
+.sal-arc {
+  position: absolute; right: 0; top: 0;
+  width: 100%; height: 100%;
+  object-fit: contain; object-position: right center;
+}
+.sal-label {
+  position: relative; z-index: 1;
+  font-size: 26px; font-weight: 700; color: #144838;
+  text-align: center; line-height: 1.5;
+  text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+}
+
+/* 행: MCP 확인 bg, radius, shadow, border-bottom */
+.sal-rows {
+  flex: 1; display: flex; flex-direction: column;
+  justify-content: space-between; gap: 8px; padding: 8px 0;
+}
+.sal-row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 20px;
+  background: rgba(255,255,255,0.5);
+  border-radius: 30px;
+  box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
+  border-bottom: 3px solid var(--bc, #fb5915);
+}
+.sal-row:nth-child(1) { margin-left: 0; }
+.sal-row:nth-child(2) { margin-left: 6%; }
+.sal-row:nth-child(3) { margin-left: 9%; }
+.sal-row:nth-child(4) { margin-left: 6%; }
+.sal-row:nth-child(5) { margin-left: 0; }
+
+.sal-arrow { flex: none; width: 19px; height: 25px; transform: rotate(-90deg); }
+.sal-arrow img { width: 100%; height: 100%; }
+
+.sal-text {
+  flex: 1; font-size: 22px; font-weight: 500;
+  color: #000; line-height: 1.5; letter-spacing: -0.03em;
+}
+</style>