<!-- 태그 카드: 상단 태그 라벨 + 이미지 + 설명 -->
<!--
  📋 card-tag-image
  ─────────────────
  용도: 카테고리별 분류 (제조/건축/토목 등), 태그로 구분되는 항목
  슬롯: cards[] (각 카드에 tag, tag_color, image, title, description)
  Figma 원본: 2-3_01 "산업별 특성과 현장의 모습" (제조, 건축, 인프라/토목)
-->
<div class="block-card-tag" style="--ct-count: {{ cards|length }}">
  {% for card in cards %}
  <div class="ct-card">
    <div class="ct-tag" style="background: {{ card.tag_color | default('#2563eb') }}">{{ card.tag }}</div>
    {% if card.image %}
    <img class="ct-img" src="{{ card.image }}" alt="{{ card.title | default('') }}">
    {% endif %}
    {% if card.title %}<div class="ct-title">{{ card.title }}</div>{% endif %}
    {% if card.description %}<div class="ct-desc">{{ card.description }}</div>{% endif %}
  </div>
  {% endfor %}
</div>

<style>
.block-card-tag {
  display: grid;
  grid-template-columns: repeat(var(--ct-count, 3), 1fr);
  gap: 16px;
}
.ct-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ct-tag {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 0 0 8px 0;
  align-self: flex-start;
}
.ct-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.ct-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  padding: 10px 14px 4px;
}
.ct-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  padding: 0 14px 14px;
  white-space: pre-line;
}
</style>
