/* ==========================================================
   components/table.css — 데이터 표
   .tbl-wrap(가로 스크롤 영역) > .tbl
   · 숫자 칸 .n(오른쪽 정렬, 고정폭 숫자) · 정렬 머리 button[data-sort]
   · 행렬 표 .tbl-matrix(지역 × 품목) — 첫 열 고정, 최저/최고 강조
   ========================================================== */

.tbl-wrap { overflow-x: auto; margin: 0 -2px; padding: 0 2px; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 100%; font-size: 14px; }
.tbl th, .tbl td { padding: 11px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tbl tbody tr:hover td { background: #FAFBFD; }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.n { font-weight: 700; }
.tbl .strong { font-weight: 800; color: var(--ink); }
.tbl .sub { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.tbl a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tbl tr.is-focus td { background: var(--navy-soft); }
.tbl tr.is-focus td:first-child { box-shadow: inset 3px 0 0 var(--navy); }

/* 정렬 머리 */
.tbl th button {
  display: inline-flex; align-items: center; gap: 3px; margin: -4px -6px; padding: 4px 6px; border-radius: 8px;
  font: inherit; color: inherit; white-space: nowrap;
}
.tbl th.n button { flex-direction: row-reverse; }
.tbl th button:hover { background: var(--surface-2); color: var(--ink); }
.tbl th button .ico { width: 13px; height: 13px; opacity: .35; }
.tbl th[aria-sort] button { color: var(--ink); }
.tbl th[aria-sort] button .ico { opacity: 1; color: var(--navy); }

/* 지수 칸: 숫자 + 방향 점 */
.ix { display: inline-flex; align-items: center; gap: 6px; }
.ix::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--flat); }
.ix.exp::before { background: var(--exp); }
.ix.aff::before { background: var(--aff); }

/* ---------- 행렬 표 ---------- */
.tbl-matrix th:first-child, .tbl-matrix td:first-child {
  position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line-2);
}
.tbl-matrix thead th:first-child { z-index: 3; }
.tbl-matrix tbody tr:hover td:first-child { background: #FAFBFD; }
.tbl-matrix .hi, .tbl-matrix .lo { position: relative; }
.tbl-matrix .hi b, .tbl-matrix .lo b { padding: 2px 6px; border-radius: 6px; }
.tbl-matrix .hi b { background: var(--exp-soft); color: var(--exp-deep); }
.tbl-matrix .lo b { background: var(--aff-soft); color: var(--aff-deep); }
.tbl-matrix tfoot td { font-weight: 800; background: var(--surface-2); border-bottom: 0; }
.tbl-matrix tfoot td:first-child { background: var(--surface-2); }
.tbl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.tbl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tbl-legend i { width: 22px; height: 14px; border-radius: 4px; }
.tbl-legend .hi i { background: var(--exp-soft); box-shadow: inset 0 0 0 1px var(--exp-line); }
.tbl-legend .lo i { background: var(--aff-soft); box-shadow: inset 0 0 0 1px var(--aff-line); }