블록 템플릿 업데이트: 수정 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/visuals/cycle-orbit.html

@@ -0,0 +1,94 @@
+<!-- 순환 궤도 다이어그램: 3D 원 Z축 기울임 → 2D 투영, N개 노드 순환 -->
+<!--
+  📋 cycle-orbit
+  ─────────────────
+  용도: N개 요소가 순환 관계를 이루는 다이어그램. 3D 원 투영 궤도 + 노드 + 화살표.
+  슬롯: title, nodes[] (각 노드에 icon, label, sub_label, desc_title, bullets[])
+         + 파이프라인이 계산해서 전달하는 값: ellipse, node_positions[], arrow_positions[]
+  Figma 원본: Page 4 / Frame 1 (DX 시행을 위한 필수 요건, 1076x292)
+
+  핵심 수학 (파이프라인에서 계산):
+    3D 원: R=400, Z축 기울임 θ=80°
+    투영: project(α) = (cx + R×cos(α), cy + R×sin(α)×cos(80°))
+    타원: cx=500, cy=200, rx=400, ry=69
+    N개 노드: 하단 중심(90°) 기준 ±(360/N × 1/3)으로 배치, 사람(270°) 고정
+    사이각 축소: 기본 간격의 2/3 → 앞쪽 노드들이 가까워짐
+    화살표: 호 위 1/3, 2/3 지점에 » 마커, 접선 방향으로 회전
+
+  텍스트 배치 규칙 (Figma 원본 분석):
+    좌측 노드 (node_x < cx): 설명이 이름 좌측에 (text-anchor: end)
+    우측/상단 노드 (node_x >= cx): 설명이 이름 우측에 (text-anchor: start)
+    설명 제목은 노드 라벨과 같은 Y 높이, 불릿은 제목 아래 들여쓰기
+-->
+<div class="block-co">
+  {% if title %}
+  <div class="co-title">{{ title }}</div>
+  {% endif %}
+
+  <svg class="co-svg" viewBox="0 0 {{ viewbox_w | default(1000) }} {{ viewbox_h | default(380) }}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <marker id="co-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+        <path d="M0,1 L9,5 L0,9" fill="none" stroke="#aaa" stroke-width="1.5"/>
+      </marker>
+    </defs>
+
+    <!-- 타원 궤도 (3D원 투영) -->
+    <ellipse cx="{{ ellipse.cx }}" cy="{{ ellipse.cy }}" rx="{{ ellipse.rx }}" ry="{{ ellipse.ry }}"
+      fill="none" stroke="#c0c0c0" stroke-width="1.5"/>
+
+    <!-- 화살표 >> (접선 방향 회전) -->
+    {% for arrow in arrows %}
+    <text x="{{ arrow.x }}" y="{{ arrow.y + 4 }}" text-anchor="middle" font-size="14" fill="#999"
+      transform="rotate({{ arrow.rotation }},{{ arrow.x }},{{ arrow.y }})">»</text>
+    {% endfor %}
+
+    <!-- 노드들 -->
+    {% for node in nodes %}
+    <!-- 노드: {{ node.label }} ({{ node.angle }}°) ({{ node.x }}, {{ node.y }}) -->
+    <circle cx="{{ node.x }}" cy="{{ node.y }}" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
+    {% if node.icon %}<text x="{{ node.x }}" y="{{ node.y + 6 }}" text-anchor="middle" font-size="18">{{ node.icon }}</text>{% endif %}
+    <text x="{{ node.x }}" y="{{ node.y + 44 }}" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">{{ node.label }}</text>
+    {% if node.sub_label %}<text x="{{ node.x }}" y="{{ node.y + 58 }}" text-anchor="middle" font-size="9" fill="#64748b">({{ node.sub_label }})</text>{% endif %}
+
+    <!-- 설명 텍스트 (좌측 노드→좌측에, 우측/상단 노드→우측에) -->
+    {% if node.desc_title %}
+    <text x="{{ node.desc_x }}" y="{{ node.desc_y }}" text-anchor="{{ node.desc_anchor }}" font-size="12" font-weight="700" fill="#1e293b">{{ node.desc_title }}</text>
+    {% endif %}
+    {% if node.bullets is defined %}
+    {% for b in node.bullets %}
+    <text x="{{ node.bullet_x }}" y="{{ node.desc_y + 15 * (loop.index) }}" text-anchor="{{ node.desc_anchor }}" font-size="10" fill="#64748b">• {{ b }}</text>
+    {% endfor %}
+    {% endif %}
+    {% endfor %}
+  </svg>
+</div>
+
+<style>
+/*
+  3D 원 투영 순환 궤도
+  파이프라인에서 모든 좌표를 계산하여 전달
+  이 템플릿은 좌표를 받아 SVG로 렌더링만 함
+*/
+.block-co {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.co-title {
+  font-size: 18px;
+  font-weight: var(--weight-black, 900);
+  color: var(--color-primary, #1e293b);
+  text-align: center;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--color-accent, #2563eb);
+}
+
+.co-svg {
+  width: 100%;
+  max-width: 900px;
+  font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
+}
+</style>