블록 템플릿 업데이트: 수정 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/cards/system-2col-center.html

@@ -0,0 +1,176 @@
+<!-- 중앙 라벨 2열 시스템 구성: 좌(H/W) / 중앙 원형 라벨 / 우(S/W) -->
+<!--
+  📋 system-2col-center
+  ─────────────────
+  용도: 시스템 구성요소를 좌/우 카테고리로 나열. 중앙에 원형 라벨.
+  슬롯: center_title, center_sub, left_label, right_label, left_items[], right_items[]
+  Figma 원본: Page 3 / f8 (System 구성 BIG Room, 2446x1943)
+  수학적 계산:
+    scale = 1200/2446 = 0.4906
+    H/W 영역: 561px, S/W 영역: 549px
+    중앙 원: 329px → 실사용 120px
+    tab: 164x43px, tab font: 22px
+    item font: 15px, item title: 16px bold
+-->
+<div class="block-s2c">
+  <!-- 좌측 헤더 탭 -->
+  <div class="s2c-tab s2c-tab-left" style="background: {{ left_color | default('#838486') }}">
+    {{ left_label }}
+  </div>
+  <!-- 우측 헤더 탭 -->
+  <div class="s2c-tab s2c-tab-right" style="background: {{ right_color | default('#d16013') }}">
+    {{ right_label }}
+  </div>
+
+  <!-- 좌측 항목 -->
+  <div class="s2c-col s2c-left">
+    {% for item in left_items %}
+    <div class="s2c-item">
+      {% if item.icon %}<span class="s2c-icon">{{ item.icon }}</span>{% endif %}
+      <div class="s2c-item-content">
+        <div class="s2c-item-title">{{ item.title }}</div>
+        {% if item.body %}<div class="s2c-item-body">{{ item.body }}</div>{% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  <!-- 중앙 원형 라벨 -->
+  <div class="s2c-center">
+    <div class="s2c-circle">
+      <div class="s2c-center-title">{{ center_title }}</div>
+      {% if center_sub %}<div class="s2c-center-sub">{{ center_sub }}</div>{% endif %}
+    </div>
+  </div>
+
+  <!-- 우측 항목 -->
+  <div class="s2c-col s2c-right">
+    {% for item in right_items %}
+    <div class="s2c-item">
+      {% if item.icon %}<span class="s2c-icon">{{ item.icon }}</span>{% endif %}
+      <div class="s2c-item-content">
+        <div class="s2c-item-title">{{ item.title }}</div>
+        {% if item.body %}<div class="s2c-item-body">{{ item.body }}</div>{% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+/*
+  수학적 계산 (Figma 원본):
+  frame 2446x1943, scale = 1200/2446 = 0.4906
+  H/W: 1144 → 561px, S/W: 1119 → 549px
+  center circle: 671 → 329px → 실사용 120px
+  tab: 335x88 → 164x43px
+*/
+.block-s2c {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto 1fr;
+  width: 100%;
+  gap: 0;
+}
+
+/* ── Header Tabs ── */
+.s2c-tab {
+  padding: 8px 20px;
+  font-size: 20px;
+  font-weight: var(--weight-bold, 700);
+  color: #ffffff;
+  border-radius: 6px;
+}
+.s2c-tab-left {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: start;
+}
+.s2c-tab-right {
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
+}
+
+/* ── Columns ── */
+.s2c-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 12px;
+}
+.s2c-left {
+  grid-column: 1;
+  grid-row: 2;
+}
+.s2c-right {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+/* ── Center Circle ── */
+.s2c-center {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+}
+.s2c-circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #2a8a8a, #1a6060);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-shrink: 0;
+}
+.s2c-center-title {
+  font-size: 18px;
+  font-weight: var(--weight-black, 900);
+  color: #ffffff;
+  line-height: 1.3;
+}
+.s2c-center-sub {
+  font-size: 13px;
+  font-weight: var(--weight-medium, 500);
+  color: rgba(255,255,255,0.7);
+  line-height: 1.3;
+}
+
+/* ── Items ── */
+.s2c-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.s2c-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+.s2c-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.s2c-item-title {
+  font-size: 16px;
+  font-weight: var(--weight-bold, 700);
+  color: var(--color-primary, #1e293b);
+  line-height: 1.4;
+  word-break: keep-all;
+}
+.s2c-item-body {
+  font-size: 14px;
+  font-weight: var(--weight-medium, 500);
+  color: var(--color-text-secondary, #64748b);
+  line-height: 1.6;
+  word-break: keep-all;
+  white-space: pre-line;
+}
+</style>