<!-- card-numbered variant: horizontal -->
<!--
  📋 card-numbered--horizontal
  ─────────────────
  용도: 같은 구조의 항목 2-3개를 가로로 나란히 비교
  슬롯: items[] (기존과 동일 — title, description)
  기존 card-numbered의 색상/스타일 유지, 배치만 가로
-->
<div class="block-card-num-h" style="--cn-count: {{ items|length }}">
  {% for item in items %}
  <div class="cn-item-h">
    <div class="cn-number-h" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
    <div class="cn-body-h">
      <div class="cn-title-h">{{ item.title }}</div>
      <div class="cn-desc-h">{{ item.description }}</div>
    </div>
  </div>
  {% endfor %}
</div>

<style>
.block-card-num-h {
  display: grid;
  grid-template-columns: repeat(var(--cn-count, 2), 1fr);
  gap: 10px;
}
.cn-item-h {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.cn-number-h {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.cn-title-h {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.cn-desc-h {
  font-size: 11px;
  color: #475569;
  line-height: 1.6;
  white-space: pre-line;
}
</style>
