<!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
<!--
  📋 card-dark-overlay
  ─────────────────
  용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
  슬롯: cards[] (각 카드에 image, title, description)
  Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
-->
<div class="block-card-dark" style="--cd-count: {{ cards|length }}">
  {% for card in cards %}
  <div class="cd-card">
    {% if card.image %}
    <img class="cd-bg" src="{{ card.image }}" alt="">
    {% else %}
    <div class="cd-bg cd-bg-default"></div>
    {% endif %}
    <div class="cd-overlay">
      <div class="cd-title">{{ card.title }}</div>
      {% if card.description %}<div class="cd-desc">{{ card.description }}</div>{% endif %}
    </div>
  </div>
  {% endfor %}
</div>

<style>
.block-card-dark {
  display: grid;
  grid-template-columns: repeat(var(--cd-count, 3), 1fr);
  gap: 12px;
}
.cd-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 200px;
}
.cd-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.cd-bg-default {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
}
.cd-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #ffffff;
}
.cd-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.cd-desc {
  white-space: pre-line;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  white-space: pre-line;
}
</style>
