블록 템플릿 업데이트: 수정 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>
This commit is contained in:
2026-04-13 10:58:09 +09:00
parent c42e01f060
commit 360cd8e44c
59 changed files with 2906 additions and 1391 deletions

View File

@@ -0,0 +1,74 @@
<!-- 체크리스트 다크: 체크 아이콘 + 제목:설명 N행, 다크 배경 -->
<!--
📋 checklist-dark
─────────────────
용도: 핵심 요건/원칙을 체크박스 스타일로 나열. 제목:설명 구조.
슬롯: items[] (각 항목에 title, description)
Figma 원본: Page 3 / f5 (개발 패러다임 체크리스트, 1770x553)
수학적 계산:
scale = 1200/1770 = 0.6780
icon: 31x24px, 행 간격: 64px
font: 42px → 16px
-->
<div class="block-cld">
{% for item in items %}
<div class="cld-row">
<div class="cld-check"></div>
<div class="cld-text">
<span class="cld-title">{{ item.title }}</span>
{% if item.description %}<span class="cld-sep"> : </span><span class="cld-desc">{{ item.description }}</span>{% endif %}
</div>
</div>
{% endfor %}
</div>
<style>
/*
수학적 계산 (Figma 원본):
frame 1770x553, scale = 1200/1770 = 0.6780
icon 45x36 → 31x24, row gap 94 → 64px
font 42px → 16px
*/
.block-cld {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
background: #1a1a1a;
border-radius: 10px;
padding: 20px 24px;
}
.cld-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* ── Check Icon ── */
.cld-check {
font-size: 18px;
color: #d4722a;
flex-shrink: 0;
line-height: 1.6;
}
/* ── Text (title : description) ── */
.cld-text {
font-size: 16px;
line-height: 1.6;
color: #ffffff;
word-break: keep-all;
}
.cld-title {
font-weight: var(--weight-bold, 700);
color: #ffffff;
}
.cld-sep {
color: rgba(255,255,255,0.5);
}
.cld-desc {
font-weight: var(--weight-medium, 500);
color: rgba(255,255,255,0.8);
}
</style>