<!-- 레이어 다이어그램: 겹쳐진 레이어 표현 (SVG) -->
<!--
  📋 layer-diagram
  ─────────────────
  용도: GIS/BIM/DT 레이어 구조, 기술 스택, 계층 구조 시각화
  슬롯: layers[] (각 레이어에 label, color), title (선택)
  Figma 원본: 1장_1-1_미래 "GIS+BIM+DT 레이어 시각화"
-->
<div class="block-layer-diag">
  {% if title %}<div class="ld-title">{{ title }}</div>{% endif %}
  <svg viewBox="0 0 400 {{ layers|length * 60 + 40 }}" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
    <defs>
      {% for layer in layers %}
      <linearGradient id="layerGrad{{ loop.index }}" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="{{ layer.color | default('#2563eb') }}" stop-opacity="0.85" />
        <stop offset="100%" stop-color="{{ layer.color | default('#2563eb') }}" stop-opacity="0.6" />
      </linearGradient>
      {% endfor %}
      <filter id="layerShadow">
        <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.15" />
      </filter>
    </defs>
    {% for layer in layers %}
    {% set y = (layers|length - loop.index) * 55 + 20 %}
    {% set offset = loop.index0 * 15 %}
    <!-- 3D 효과: 사다리꼴 레이어 -->
    <path d="M {{ 40 + offset }},{{ y }} L {{ 360 - offset }},{{ y }} L {{ 340 - offset }},{{ y + 40 }} L {{ 60 + offset }},{{ y + 40 }} Z"
          fill="url(#layerGrad{{ loop.index }})" filter="url(#layerShadow)" />
    <text x="200" y="{{ y + 25 }}" text-anchor="middle" fill="white" font-size="14" font-weight="700">{{ layer.label }}</text>
    {% endfor %}
  </svg>
</div>

<style>
.block-layer-diag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.ld-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.block-layer-diag svg {
  max-width: 400px;
}
</style>
