/* css/responsive.css
   ─────────────────────────────────────────────
   [역할] 화면 폭에 따라 레이아웃을 바꾼다(반응형).
   기준점: 모바일 < 768px, 태블릿 768~1024px, 데스크톱 > 1024px. */

/* 태블릿: KPI 4칸 → 2칸 */
@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .view { padding: var(--space-3); }
}

/* 모바일: 탭바를 햄버거로 접고, KPI는 1칸, 표는 가로 스크롤 */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-tabs {
    display: none; flex-direction: column; width: 100%;
  }
  .main-tabs.open { display: flex; } /* 햄버거 누르면 펼침 */
  .main-tabs .tab { width: 100%; border-bottom: 1px solid rgba(255,255,255,.15); }
  .kpi-row { grid-template-columns: 1fr; }
  .sub-tabs { overflow-x: auto; flex-wrap: nowrap; }
}