/* 결과 표. 칸 정의는 `js/columns.js` 에 있고 여기는 **모양만** 안다. */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

table.screen {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

table.screen th,
table.screen td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

table.screen thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  user-select: none;
}

th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink); }
th.sorted { color: var(--accent); }

table.screen tbody tr:hover { background: var(--panel); }
table.screen tbody tr:last-child td { border-bottom: 0; }

/* 숫자 칸은 오른쪽 정렬 — 자릿수가 세로로 맞아야 크기를 눈으로 비교할 수 있다. */
td.num, th.num { text-align: right; }

/* ── 기업명 칸 ────────────────────────────────────────────────────────── */
/* 이 화면은 종목코드를 보여 주지 않는다. 코드는 링크 주소에만 산다. */
td.name { max-width: 260px; white-space: normal; }

a.stock {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a.stock:hover { color: var(--accent); border-bottom-color: currentColor; }

.sector {
  display: block;
  overflow: hidden;
  max-width: 250px;
  color: var(--ink-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.tag { color: var(--ink-soft); font-size: 12px; }
td.period { color: var(--ink-soft); font-size: 12px; }

/* 잠정실적 표시. 확정 전 숫자라 뒤에 바뀌고, 금융업은 정의가 달라 성장률이 크게 튄다. */
.prov { color: var(--warn); font-size: 10px; vertical-align: super; }

/* ── 부호 색 ──────────────────────────────────────────────────────────── */
/* 한국 증시 관행: 상승 빨강 · 하락 파랑 (`styles.css` 머리말). */
td.up { color: var(--up); }
td.down { color: var(--down); }
td.flat { color: var(--flat); }

/* 성장률 칸은 살짝 구분해 둔다 — 시세 칸과 뜻이 다르다(분기 단위로 움직인다). */
td.growth { background: color-mix(in srgb, var(--panel) 45%, transparent); }
th.growth { background: var(--panel); }