블록 템플릿 업데이트: 수정 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/quadrant-2x2-issues.html

@@ -0,0 +1,119 @@
+<!-- 2×2 사분면 이슈: CSS gradient ribbon + CSS card-bg + 중앙 인용구(이미지) -->
+<!--
+  📋 quadrant-2x2-issues
+  ─────────────────
+  용도: 4개 카테고리 이슈를 2×2 사분면으로 배치, 중앙에 인용구 원형 배지
+  슬롯:
+    quadrants[4] (ribbon_title, sections[{headline, bullets[]}])
+    center_quote (bg_img — 원형 일러스트 이미지 유지, text — HTML)
+  Figma 원본: Frame 1171281193 (node 45:18, 2226×1766)
+  수학적 계산:
+    scale = 1280 / 2226 = 0.575022
+    ribbon: 1080×119, radius=50px (SVG path r=50)
+    SVG gradient_math.py:
+      TL/BL: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%)
+      TR/BR: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%)
+    card-bg: 픽셀 분석 gradient(180deg, #f2f2f2→#ffffff)
+    headline: #ff0000 Bold, body: #000 Regular (MCP 확인)
+  CSS 요소: ribbon gradient, card-bg gradient, headline/body text
+  이미지 요소: center_quote bg (원형 일러스트, 복잡한 radial gradient)
+-->
+<div class="block-q2i">
+  <div class="q2i-grid">
+    {% for q in quadrants %}
+    <div class="q2i-quad q2i-quad--{{ loop.index }}">
+      <div class="q2i-card-bg {{ 'q2i-card-bg--bottom' if loop.index > 2 }}"></div>
+
+      <div class="q2i-ribbon {{ 'q2i-ribbon--warm' if loop.index in [1,3] else 'q2i-ribbon--teal' }} {{ 'q2i-ribbon--bottom' if loop.index > 2 }}">
+        <div class="q2i-ribbon-text">{{ q.ribbon_title }}</div>
+      </div>
+
+      <div class="q2i-content">
+        {% for sec in q.sections %}
+        <div class="q2i-section">
+          {% if sec.headline %}<div class="q2i-headline">{{ sec.headline }}</div>{% endif %}
+          {% if sec.bullets %}
+          <ul class="q2i-bullets">
+            {% for b in sec.bullets %}<li>{{ b }}</li>{% endfor %}
+          </ul>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  {% if center_quote %}
+  <div class="q2i-center">
+    {% if center_quote.bg_img %}<img src="{{ center_quote.bg_img | default('svg/circle_quote.png') }}" class="q2i-center-bg" alt="">{% endif %}
+    <div class="q2i-center-text">{{ center_quote.text|safe }}</div>
+  </div>
+  {% endif %}
+</div>
+
+<style>
+.block-q2i { position: relative; width: 100%; word-break: keep-all; }
+
+.q2i-grid { display: grid; grid-template-columns: 1fr 1fr; }
+
+.q2i-quad {
+  position: relative; display: flex; flex-direction: column;
+  padding: 4px 8px; min-height: 200px;
+}
+
+/* 우측 사분면: 우정렬 */
+.q2i-quad--2 .q2i-headline, .q2i-quad--4 .q2i-headline { text-align: right; }
+.q2i-quad--2 .q2i-bullets, .q2i-quad--4 .q2i-bullets { text-align: right; list-style-position: inside; padding-left: 0; }
+
+/* card-bg: CSS gradient (픽셀 분석) */
+.q2i-card-bg {
+  width: 100%; height: 80px;
+  border-radius: 18px 18px 0 0;
+  background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
+}
+.q2i-card-bg--bottom {
+  border-radius: 0 0 18px 18px; order: 10;
+  background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
+}
+
+/* ribbon: CSS gradient (SVG gradient_math.py 계산) */
+.q2i-ribbon {
+  width: 100%; height: 44px; border-radius: 18px;
+  display: flex; align-items: center; justify-content: center;
+}
+.q2i-ribbon--bottom { order: 10; }
+.q2i-ribbon--warm { background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%); }
+.q2i-ribbon--teal { background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%); }
+
+.q2i-ribbon-text {
+  font-weight: 900; font-size: 22px; color: #fff;
+  text-shadow: 0 0 4px #322c1e; white-space: nowrap;
+}
+
+.q2i-content { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
+
+/* headline: MCP 확인 #ff0000 Bold */
+.q2i-headline { font-weight: 700; font-size: 18px; color: #ff0000; line-height: 1.3; }
+
+/* body: MCP 확인 #000 Regular */
+.q2i-bullets {
+  list-style: disc; margin: 0; padding-left: 28px;
+  font-weight: 400; font-size: 15px; color: #000; line-height: 1.5;
+}
+.q2i-bullets li { word-break: keep-all; }
+
+/* center quote: 이미지 유지 (원형 일러스트) */
+.q2i-center {
+  position: absolute; top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px; height: 180px;
+  display: flex; align-items: center; justify-content: center; z-index: 5;
+}
+.q2i-center-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.q2i-center-text {
+  position: relative; z-index: 1;
+  font-weight: 700; font-size: 20px; color: #fff;
+  text-align: center; line-height: 1.3;
+}
+</style>