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

@@ -9,7 +9,7 @@
     - 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
     - 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
     - CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
-    - 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
+    - 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능
   수학적 계산:
     좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
 -->
@@ -31,7 +31,7 @@
       <div class="cdg-asis">
         {% for b in row.left.asis %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
       </div>
-      <img src="{{ arrow_image | default('../../../static/figma-assets/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
+      <img src="{{ arrow_image | default('svg/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
       <div class="cdg-tobe">
         {% for b in row.left.tobe %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
       </div>
@@ -64,16 +64,27 @@
   행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
   Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
 */
+/*
+  B안: Grid 배경에 좌/우 절반씩 연속 그라디언트
+  → 셀 경계가 안 보이고 Figma처럼 자연스러운 배경
+  → Grid 행 공유로 Y선 정렬도 유지
+*/
 .block-cdg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   overflow: hidden;
+  background: linear-gradient(90deg,
+    rgba(255,255,255,0.4) 0%,
+    rgba(57,50,30,0.12) 50%,
+    rgba(41,107,85,0.06) 50%,
+    rgba(255,255,255,0.4) 100%
+  );
 }
 
-/* ── Headers (비대칭 라운드) ── */
-.cdg-header { padding: 8px 20px; display: flex; min-height: 36px; align-items: center; }
-.cdg-header-text { font-size: 15px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
+/* ── Headers (비대칭 라운드 — 자체 배경 유지) ── */
+.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
+.cdg-header-text { font-size: 26px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
 .cdg-header-warm {
   background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
   border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
@@ -83,17 +94,18 @@
   border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
 }
 
-/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
+/* ── Grid Cells (배경 제거 → Grid 배경이 투과) ── */
 .cdg-cell {
-  padding: 8px 14px;
-  display: flex; flex-direction: column; gap: 4px;
+  padding: 14px 20px;
+  display: flex; flex-direction: column; gap: 6px;
   align-self: start;
+  background: none;
 }
-.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
-.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
+.cdg-cell-warm { background: none; }
+.cdg-cell-teal { background: none; }
 
 /* ── Section Title & Body ── */
-.cdg-sec-title { font-size: 12px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 2px; }
+.cdg-sec-title { font-size: 18px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
 .cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
 .cdg-title-teal { color: var(--color-dark-teal, #084C56); }
 .cdg-sec-body { padding-left: 8px; }
@@ -101,7 +113,7 @@
 /* ── Bullets ── */
 .cdg-bullet {
   position: relative; padding-left: 14px;
-  font-size: 11px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
+  font-size: 14px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
   line-height: 1.7; word-break: keep-all;
 }
 .cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }