/* ══ 표 규격 — 공용 정본 ═══════════════════════════════════════════════════════
   설계서: `dashboard/docs/design/20260908_stockhub_design_system.md` §7.
   HANDOFF_DESIGN §4.3 · §5-2. 게이트 [3] 이 이 규약을 강제한다.

   **규약 넷.**
     ① **세로선 0.** 셀에 border-left/right 를 주지 않는다. 열은 정렬과 여백이 가른다.
     ② **밴드 헤더 0.** th 에 회색 배경을 깔지 않는다. 헤더는 **아래 1px 검은 선**이다.
     ③ **숫자는 우측·tabular.** 자릿수가 흔들리면 눈이 자리를 못 잡는다.
     ④ **셀 전체 테두리 0.** 엑셀 룩 금지.

   **정렬 정책은 두 가지고, 이름이 있다.**
     · `table.dt`        기본 = **좌측**. 글자 표(이벤트·공시 목록)가 이쪽이다.
     · `table.dt.tnum`   **첫 열 좌 · 나머지 우**. 집계표(허브 브리핑·타일 표)가 이쪽이다.
     · 셀 단위 예외는 `.l`(좌) / `.r`(우) / `.num`(수치 우측·굵게).
   ⚠ 정책을 화면마다 다시 정하지 않는다 — 두 이름 중 하나를 고른다. 그래야 다음
     사람이 「이 표는 왜 오른쪽인가」를 안 묻는다(§16-4). */

/* 🔴 09-13 CIO 「스크롤이 여러개 있으면 안되고 하나만 있어야 한다 스크롤 내 스크롤 금지」
   ⚠ **`overflow-x:auto` 만 쓰면 세로 스크롤이 딸려 온다.** CSS 규칙상 한 축이 visible 이
     아니면 다른 축의 visible 은 **auto 로 승격**된다 — 그래서 가로만 굴리려던 상자가
     전부 세로 스크롤 컨테이너가 됐다(09-13 헤드리스 실측: `.card` 안에 249px 짜리
     둘째 스크롤). 가로만 필요한 상자는 세로를 **clip 으로 못 박는다.** */
/* 🔴 09-13 00:1x CIO 「쓸거면 티안나게 하거나 apple.com은 잘 되잖아」 — 가로 스크롤은
   **남기되 보이지 않게** 한다. apple.com 의 넓은 표·칩 줄이 그 꼴이다: 막대는 없고,
   가장자리가 **흐려지며** 「더 있다」를 말하고, 손가락·트랙패드로 굴러간다.
     · `scrollbar-width:none` + `::-webkit-scrollbar{display:none}` — 막대 자체를 없앤다.
     · `overscroll-behavior-x:contain` — 끝에서 페이지가 같이 밀려 가는 것을 막는다
       (안 막으면 표를 굴리다 브라우저 뒤로가기가 걸린다).
     · `-webkit-overflow-scrolling:touch` — iOS 관성.
     · 가장자리 페이드는 `data-fade` 로 켠다(`core/ui/table.js` 가 스크롤 위치를 보고
       `l`/`r`/`lr` 를 찍는다) — **더 있을 때만** 흐려야 정보가 된다. 늘 흐리면 장식이다.
   ⚠ 세로는 여전히 `clip` 이다. CSS 규칙상 한 축이 visible 이 아니면 다른 축의 visible 은
     **auto 로 승격**돼(09-13 실측 `.card` 안 249px 둘째 스크롤), 가로만 굴리려던 상자가
     전부 세로 스크롤 컨테이너가 된다. 세로 내부 스크롤은 0 이다. */
.twrap, .tbl, .id-twrap, .segwrap, .chiprow, .seg, .card, .pane, .tapewrap, .panel {
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.twrap, .tbl, .id-twrap { overflow-x:auto; overflow-y:clip; }
.twrap::-webkit-scrollbar, .tbl::-webkit-scrollbar, .id-twrap::-webkit-scrollbar,
.segwrap::-webkit-scrollbar, .chiprow::-webkit-scrollbar, .seg::-webkit-scrollbar,
.card::-webkit-scrollbar, .pane::-webkit-scrollbar,
.tapewrap::-webkit-scrollbar, .panel::-webkit-scrollbar { display:none; width:0; height:0; }
/* ⚠ `.card`·`.pane` 은 **overflow 를 여기서 정하지 않는다** — 그 상자의 넘침 정책은 각 화면이
   진다. 여기서 주는 것은 「막대를 보이지 않게」 하나뿐이다(실측: `earnings_week` 의
   `.card` 하나가 가로 막대를 드러내고 있었다). 정책과 외양을 한 규칙에 섞지 않는다. */
.twrap[data-fade="r"], .tbl[data-fade="r"], .id-twrap[data-fade="r"] {
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); }
.twrap[data-fade="l"], .tbl[data-fade="l"], .id-twrap[data-fade="l"] {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%); }
.twrap[data-fade="lr"], .tbl[data-fade="lr"], .id-twrap[data-fade="lr"] {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); }
table.dt { border-collapse:collapse; width:100%; font-size:12.5px; }

/* ② 헤더 = 아래 1px 검은 선 하나. 배경 없음. */
table.dt th {
  font-size:11.5px; font-weight:600; color:var(--ink3);
  padding:7px 10px; white-space:nowrap; text-align:left;
  border-bottom:1px solid var(--ink);
}
/* ③ 본문 — 가로선만(--hair), tabular 숫자. */
table.dt td {
  padding:6.5px 10px; text-align:left;
  border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums;
}
table.dt tr:last-child td { border-bottom:0; }
table.dt tbody tr:hover td { background:#f7f7f9; }

/* 집계표 정책 — 첫 열이 이름, 나머지가 수 */
table.dt.tnum th, table.dt.tnum td { text-align:right; }
table.dt.tnum th:first-child, table.dt.tnum td:first-child { text-align:left; }

/* 셀 단위 예외 */
table.dt th.l, table.dt td.l { text-align:left; }
table.dt th.r, table.dt td.r { text-align:right; }
table.dt td.num { text-align:right; font-weight:700; color:var(--ink); }
table.dt td.pct { text-align:right; color:var(--ink3); }

/* 결손 셀 — 「0」과 「없음」은 다른 말이다(§3.2).
   코드 글자(`no_source` 등)는 title 로 내리고 화면엔 회색 `—` 만. `0` 은 **값**이라 검정. */
table.dt td.gap { color:var(--ink4); cursor:help; }
table.dt td.zero { color:var(--ink); }

/* 위반 행 — 의미색을 **방향**이 아니라 「고쳐야 할 것」에 쓰는 유일한 예외.
   §1.3 의 적/청(등락·순매수)과 자리가 겹치지 않게 **행 배경**으로만 쓴다. */
table.dt tr.violrow td { background:var(--red-bg); }
table.dt tr.violrow:hover td { background:var(--red-bg2); }
table.dt td.viol { color:var(--red); font-weight:700; }

/* 폰 — 글자 표는 셀에 nowrap 을 쓰지 않는다. 넓은 것은 `.twrap` 안에서만 넓어진다. */
@media (max-width: 680px) {
  table.dt { font-size:12px; }
  table.dt th, table.dt td { padding:6px 8px; }
}