kyeongmin
29f56187c0
포함 내용: - Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md) - 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py) - 블록 템플릿 추가 (cards, emphasis 변형) - 코드 수정: block_search, content_editor, design_director, slide_measurer - catalog.yaml 블록 목록 업데이트 - CLAUDE.md, PROGRESS.md, README.md 업데이트 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
2.3 KiB
HTML
98 lines
2.3 KiB
HTML
<!-- comparison-2col variant: cards-in-container -->
|
|
<!--
|
|
📋 comparison-2col--cards-in-container
|
|
─────────────────
|
|
용도: 포함 관계 시각화 (A 안에 B, C, D가 포함됨)
|
|
슬롯: container_label, container_desc, cards[] (각 카드에 letter, label, description)
|
|
기존 comparison-2col의 색상 계열 활용
|
|
-->
|
|
<div class="block-container-cards">
|
|
<div class="cc-outer">
|
|
<div class="cc-badge">{{ container_label }}</div>
|
|
{% if container_desc %}<div class="cc-desc">{{ container_desc }}</div>{% endif %}
|
|
<div class="cc-grid" style="--cc-count: {{ cards|length }}">
|
|
{% for card in cards %}
|
|
<div class="cc-card">
|
|
{% if card.letter %}
|
|
<div class="cc-icon">{{ card.letter }}</div>
|
|
{% endif %}
|
|
<div class="cc-label">{{ card.label }}</div>
|
|
{% if card.description %}<div class="cc-text">{{ card.description }}</div>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.block-container-cards {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
.cc-outer {
|
|
width: 100%;
|
|
border: 3px solid #2563eb;
|
|
border-radius: 14px;
|
|
padding: 16px 14px 12px;
|
|
background: linear-gradient(180deg, #eff6ff, #dbeafe);
|
|
position: relative;
|
|
}
|
|
.cc-badge {
|
|
position: absolute;
|
|
top: -11px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
padding: 3px 18px;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.cc-desc {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: #1e40af;
|
|
margin-bottom: 10px;
|
|
}
|
|
.cc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
|
|
gap: 10px;
|
|
}
|
|
.cc-card {
|
|
background: #ffffff;
|
|
border: 2px solid #93c5fd;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
.cc-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #93c5fd, #2563eb);
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 6px;
|
|
}
|
|
.cc-label {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 3px;
|
|
}
|
|
.cc-text {
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|