<!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
<!--
  📋 comparison-table
  ─────────────────
  용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
  슬롯: headers[] (3개), rows[][] (각 행 3칸)
  Figma 원본: 2-1_02 > BIM VS D/X 테이블
  특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
-->
<div class="block-table-figma">
  <table>
    <thead>
      <tr>
        {% for header in headers %}
        <th class="{% if loop.index == 1 %}th-left{% elif loop.index == 2 %}th-center{% else %}th-right{% endif %}">
          {% if loop.index == 2 %}<span class="th-badge">{{ header }}</span>{% else %}{{ header }}{% endif %}
        </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        {% for cell in row %}
        <td class="{% if loop.index == 1 %}td-left{% elif loop.index == 2 %}td-center{% else %}td-right{% endif %}">{{ cell }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>
.block-table-figma {
  overflow: auto;
}
.block-table-figma table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.7;
}

/* 헤더 */
.block-table-figma thead th {
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid #e8edf2;
}
.th-left {
  text-align: center;
  color: #6bcdff;
}
.th-center {
  text-align: center;
  width: 120px;
}
.th-badge {
  display: inline-block;
  background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 28px;
  border-radius: 25px;
}
.th-right {
  text-align: center;
  color: #006eff;
}

/* 본문 */
.block-table-figma tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}
.td-left {
  text-align: center;
  color: #444;
}
.td-center {
  text-align: center;
  font-weight: 700;
  color: #333;
  background: #f6f8fb;
  font-size: 13px;
}
.td-right {
  text-align: center;
  color: #444;
}
.block-table-figma tbody tr:hover {
  background: #fafbfd;
}
</style>
