<!-- 아이콘 설명 카드: 아이콘 + 제목 + 설명 (2~4열) -->
<!--
  📋 card-icon-desc
  ─────────────────
  용도: 기능/특성/장점을 아이콘과 함께 나열. 시각적으로 분류.
  슬롯: cards[] (각 카드에 icon, title, description)
  Figma 원본: 2-3_01 아이콘 3열 설명
-->
<div class="block-card-icon" style="--ci-count: {{ cards|length }}">
  {% for card in cards %}
  <div class="cid-card">
    {% if card.icon %}<div class="cid-icon">{{ card.icon }}</div>{% endif %}
    <div class="cid-title">{{ card.title }}</div>
    {% if card.description %}<div class="cid-desc">{{ card.description }}</div>{% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-card-icon {
  display: grid;
  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
  gap: 16px;
}
.cid-card {
  text-align: center;
  padding: 20px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.cid-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.cid-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}
.cid-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  white-space: pre-line;
}
</style>
