<!-- 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>
