66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
<!-- dark-bullet-list variant: before-after -->
|
|
<!--
|
|
📋 dark-bullet-list--before-after
|
|
─────────────────
|
|
용도: 기존 방식 → 새 방식 전환/변화를 보여줄 때
|
|
슬롯: title (선택), changes[] (각 항목에 label, before, after)
|
|
기존 dark-bullet-list의 색상/배경/radius 그대로 사용
|
|
-->
|
|
<div class="block-dark-bullets">
|
|
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
|
|
<div class="db-changes">
|
|
{% for item in changes %}
|
|
<div class="db-change">
|
|
<div class="db-change-label">{{ item.label }}</div>
|
|
<div class="db-change-before">{{ item.before }}</div>
|
|
<div class="db-change-after">→ {{ item.after }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* 기존 dark-bullet-list CSS 재사용 */
|
|
.block-dark-bullets {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
border-radius: 8px;
|
|
padding: 14px 20px;
|
|
color: #ffffff;
|
|
}
|
|
.db-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: #93c5fd;
|
|
}
|
|
/* variant: before-after 2열 구조 */
|
|
.db-changes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 6px;
|
|
}
|
|
.db-change {
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
border-left: 3px solid #60a5fa;
|
|
}
|
|
.db-change-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #93c5fd;
|
|
margin-bottom: 3px;
|
|
}
|
|
.db-change-before {
|
|
font-size: 10px;
|
|
color: #94a3b8;
|
|
text-decoration: line-through;
|
|
}
|
|
.db-change-after {
|
|
font-size: 11px;
|
|
color: #e2e8f0;
|
|
font-weight: 500;
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|