<!-- 번호 카드: 순서 번호 + 제목 + 설명 (세로 나열) -->
<!--
  📋 card-numbered
  ─────────────────
  용도: 순서가 있는 항목 나열 (1. 2. 3.), 실행 조건, 요구사항
  슬롯: items[] (각 항목에 title, description)
  card-icon-desc와 다른 점: 아이콘 대신 순서 번호, 세로 나열
-->
<div class="block-card-num">
  {% for item in items %}
  <div class="cn-item">
    <div class="cn-number" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
    <div class="cn-body">
      <div class="cn-title">{{ item.title }}</div>
      {% if item.description %}<div class="cn-desc">{{ item.description }}</div>{% endif %}
    </div>
  </div>
  {% endfor %}
</div>

<style>
.block-card-num {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cn-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.cn-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.cn-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.cn-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  white-space: pre-line;
}
</style>
