kyeongmin
360cd8e44c
수정: - 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>
75 lines
1.7 KiB
HTML
75 lines
1.7 KiB
HTML
<!-- 체크리스트 다크: 체크 아이콘 + 제목:설명 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>
|