<!-- card-icon-desc variant: compact -->
<!--
  📋 card-icon-desc--compact
  ─────────────────
  용도: 높이가 부족할 때 아이콘 카드를 축소 렌더링
  슬롯: cards[] (기존과 동일 — icon, title, description)
  기존 card-icon-desc의 색상/구조 유지, 패딩/아이콘 축소
-->
<div class="block-card-icon-compact" style="--ci-count: {{ column_override | default(cards|length) }}">
  {% for card in cards %}
  <div class="cid-card-c">
    {% if card.icon %}<div class="cid-icon-c">{{ card.icon }}</div>{% endif %}
    <div class="cid-title-c">{{ card.title }}</div>
    {% if card.description %}<div class="cid-desc-c">{{ card.description }}</div>{% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-card-icon-compact {
  display: grid;
  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
  gap: 8px;
}
.cid-card-c {
  text-align: center;
  padding: 8px 8px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.cid-icon-c {
  font-size: 1.4rem;
  margin-bottom: 3px;
}
.cid-title-c {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.cid-desc-c {
  font-size: 10px;
  color: #475569;
  line-height: 1.5;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
