<!-- 탭 라벨 행: 가로로 나열된 탭 버튼 형태 -->
<!--
  📋 tab-label-row
  ─────────────────
  용도: 카테고리 전환, 분류 표시, 선택된 항목 강조
  슬롯: tabs[] (각 탭에 label, active, color)
  Figma 원본: 2-3_02 상단 "건축과 인프라의 건설프로세스 특성" 탭, 2-2_01 탭
-->
<div class="block-tab-row">
  {% for tab in tabs %}
  <div class="tr-tab {% if tab.active %}tr-active{% endif %}" style="{% if tab.active %}background: {{ tab.color | default('#2563eb') }}{% endif %}">
    {{ tab.label }}
  </div>
  {% endfor %}
</div>

<style>
.block-tab-row {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
}
.tr-tab {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  border-radius: 6px;
  cursor: default;
}
.tr-active {
  color: #ffffff;
  font-weight: 700;
}
</style>
