/* 스크리너 **표**만. `styles.css` 에서 갈라져 나왔다 — 표는 상세 페이지(`stock.html`)에
   없는데 그쪽까지 따라가고 있었고, 한 파일이 200줄 한도를 넘었다.

   여기 있는 것: 표 뼈대 · 칸별 표기 · 정렬 버튼 · 페이지 이동.
   여기 **없는** 것: 장중 덧칠(`live.css`) · 돌파 칸(`breakout.css`) · 컨트롤(`controls.css`).
   좁은 화면 규칙도 표에 관한 것만 이리로 왔다.

   ⚠️ `.table-wrap`·`.pager` 를 **숨기는** 규칙은 `styles.css` 에 남아 있다
   (`#app:not([data-state="ok"])`). 일부러 그랬다 — "어느 상태에서 무엇이 보이는가"는 화면
   전체의 상태기계이고, 그것만 두 파일로 갈리면 0건과 실패가 구별되지 않는 회귀가 조용히
   들어온다. 이 파일은 **보일 때의 모습**만 정한다. */

/* ── 표 ───────────────────────────────────────────────────────────── */
/* 가로 스크롤은 **이 컨테이너 안에서만** 일어난다. 페이지가 통째로 밀리면 모바일에서
   본문 좌우가 흔들려 읽을 수 없다. */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
}
/* min-width 는 컬럼 수를 따라간다. 830(신고가 한 칸) → 940(두 칸) → 860(종목명 삭제)
   → **660**: `최근거래일` 칸을 지우고(표 위 캡션으로 옮겼다) 신고가를 다시 한 칸으로
   줄였다(고른 기준의 칸만 그린다 — 감춘 값은 그 칸의 `title` 에 있다). 표가 한 화면에
   들어가는 것이 이 두 변경의 목적이라, 여기 숫자가 다시 커지면 목적이 사라진 것이다. */
.screen-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14px; }
.screen-table th,
.screen-table td {
  padding: 7px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.screen-table thead th { background: var(--head-bg); font-weight: 600; font-size: 13px; }
.screen-table tbody tr:last-child td { border-bottom: 0; }
.screen-table tbody tr:hover { background: var(--row-hover); }
.screen-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.screen-table td.col-sym { font-weight: 700; }
/* 심볼은 상세 페이지로 가는 링크다. **브라우저 기본 파랑 밑줄을 쓰지 않는다** — 표에서
   유일하게 파란 글씨가 되어 다른 뜻(선택됨·강조)으로 읽히고, 바로 아래 `is-off-date` 의
   점선 밑줄과 겹쳐 두 줄이 그어진다. 색은 본문색 그대로 두고 **hover 에서만** 밑줄을
   보여 준다 — 표의 모든 행이 링크라 링크임을 상시 광고할 필요가 없다.
   `cursor: pointer` 는 남긴다: 그것이 눌린다는 유일한 신호다. */
.screen-table td.col-sym .sym-link {
  color: inherit; text-decoration: none; cursor: pointer;
}
.screen-table td.col-sym .sym-link:hover,
.screen-table td.col-sym .sym-link:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}
/* `is-off-date` 는 `td` 에 점선을 긋는다. 그 안의 링크가 hover 밑줄을 또 그으면 두 줄이
   되므로, 그 행에서는 링크 쪽 밑줄을 넘기고 td 의 점선만 남긴다. */
.screen-table td.col-sym.is-off-date .sym-link:hover { text-decoration: none; }
/* 표 기준일과 **다른 날짜**에 마지막으로 거래된 행. 지운 `최근거래일` 칸의 남은 몫이라
   눈에 띄되 경보는 아니다 — 점선 밑줄과 작은 표식만 붙이고 값은 `title` 에 있다.
   장중 표시(`is-live`·`is-live-high`)와 **다른 칸·다른 모양**이다: 저쪽은 아직 안 끝난
   오늘의 이야기고 이쪽은 이 행이 며칠째 안 움직였다는 이야기다. */
.screen-table td.col-sym.is-off-date {
  text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: help;
}
.screen-table td.col-sym.is-off-date::after {
  content: " *"; color: var(--muted); font-weight: 400;
}
/* 산업명은 `Semiconductor Equipment & Materials` 처럼 길다. 줄바꿈을 허용하되 폭을 묶어
   표가 통째로 밀리지 않게 한다(섹터는 이 칸의 `title` 에 있다). */
.screen-table td.col-industry { white-space: normal; max-width: 22ch; }
.screen-table td.col-pct { font-weight: 700; color: var(--ok); }

.sort-btn {
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer;
}
.sort-btn:hover { color: var(--accent); text-decoration: underline; }
th.is-sorted .sort-btn { color: var(--accent); }
th.is-sorted[aria-sort="descending"] .sort-btn::after { content: " ▼"; font-size: 10px; }
th.is-sorted[aria-sort="ascending"] .sort-btn::after { content: " ▲"; font-size: 10px; }

/* ── 페이지 이동 ──────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; }
.pager.is-single { display: none; }
.pager-btn {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font: inherit; cursor: pointer;
}
.pager-btn:disabled { color: var(--muted); cursor: default; opacity: .6; }
.pager-label { color: var(--muted); font-variant-numeric: tabular-nums; }


@media (max-width: 720px) {
  .col-optional { display: none; }
  .screen-table { min-width: 520px; }   /* col-optional(거래소)이 숨은 상태 + 신고가 한 칸 */
}