/* 강세 섹터 탭(web/STRENGTH.md) — 시장 블록마다 세 표를 나란히. 상자 골격은 macro.css·styles.css(.data-table) 재사용. */

:root { --strength-table-h: 520px; }

/* 넓은 화면: 테마 표(칸 9개)가 맨 위 전체 폭, 그 아래 신고가·업종 둘이 나란히 — 순서는 테마 → 신고가 → 업종 그대로. */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.strength-grid > .strength-theme-col { grid-column: 1 / -1; }
@media (max-width: 1100px) { .strength-grid { grid-template-columns: minmax(0, 1fr); } }

.strength-h { margin: 4px 0 6px; font-size: 14px; }
.strength-box { max-height: var(--strength-table-h); }
.strength-table tbody tr { cursor: default; }
.strength-table:not(.strength-highs) td:nth-child(2) { white-space: normal; }   /* 업종·테마 이름은 줄바꿈 */
/* 신고가 표: 미장 회사·업종 이름이 길어 등락·거래대금이 밀려난다 — 잘라 쓰고 전체는 툴팁(title). */
.strength-highs { table-layout: fixed; }
.strength-highs th:nth-child(1) { width: 34%; }
.strength-highs th:nth-child(2) { width: 34%; }
.strength-highs th:nth-child(3) { width: 14%; }
.strength-sub { overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-size: 12px; }   /* 종목 아래 업종 */
.strength-toolbar { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.strength-table td.strength-clip { overflow: hidden; text-overflow: ellipsis; }
.strength-table td.strength-ind { color: var(--text-dim); }
.strength-empty { color: var(--text-dim); text-align: center; }

/* 테마·업종 줄은 누를 수 있다 — 구성 종목 순위(.strength-drill)를 연다. 이름은 키보드용 버튼. */
.strength-table tbody tr.strength-group { cursor: pointer; }
.strength-table tr.strength-group.is-selected { background: #eaf1fb; }
.strength-pick {
  all: unset; cursor: pointer; color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px;
}
.strength-pick:focus-visible { outline: 2px solid #1f4d8f; outline-offset: 2px; }
.strength-stock { color: inherit; }
.strength-stock:hover { text-decoration: underline; }

.strength-drill { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.strength-drill-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.strength-drill-head .strength-close { margin-left: auto; }
/* 순위 목록은 8칸 — 폭이 모자라면(휴대폰) 상자 안에서 가로로 민다. 긴 회사명은 잘라 쓰고 전체는 title. */
.strength-members { min-width: 600px; }
.strength-members th:nth-child(1) { width: 40px; }
.strength-members td.strength-clip { max-width: 240px; }
/* RS 1~99 등급 — 세 칸이 표 한 칸 폭(테마 표)에 들어가게 좁게, 머리글은 «RS / 1M» 두 줄. 수익률보다 한 단계 옅게. */
.strength-table .strength-rs { padding-left: 4px; padding-right: 4px; }
.strength-table th.strength-rs { white-space: normal; min-width: 26px; }
.strength-table td.strength-rs { color: var(--text-dim); font-size: 12px; }
/* 신고가 종목 셋째 줄(시총·RS·PEG) — 숫자라 잘리면 못 읽는다. 업종 줄과 달리 줄바꿈한다. */
.strength-table td.strength-clip .strength-extra { white-space: normal; overflow: visible; }
/* 정렬 머리글(테마·업종 표) — 칸 제목이 버튼. 고른 기간 칸은 굵게. */
.strength-sort { all: unset; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.strength-sort:focus-visible { outline: 2px solid #1f4d8f; outline-offset: 2px; }
.strength-groups th[aria-sort="ascending"] .strength-sort, .strength-groups th[aria-sort="descending"] .strength-sort { text-decoration: none; color: #1f4d8f; }
.strength-groups th.is-window { font-weight: 700; }
.strength-groups th.num { text-align: right; }
/* 지수 줄(D-052) — 머리글과 한 덩어리로 고정한다(`<thead>` 안). th 각각이 아니라 thead 째 붙여야 두 줄이 겹치지 않는다. */
.strength-groups thead { position: sticky; top: 0; z-index: 2; }
.strength-groups thead th { position: static; }
.strength-groups tr.strength-bench td { background: #f3f6fa; font-weight: 600; }
.strength-groups tr.strength-bench:last-child td { border-bottom: 2px solid var(--border); }

/* 표 제목의 «오늘 가격 포함 여부» — 포함(today)·미반영(stale)은 색+글자, 확정은 회색 글자만 */
.strength-basis { font-size: 12px; font-weight: 600; color: var(--muted, #888); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.strength-basis.today { color: var(--status-pressure); }
.strength-basis.stale { color: #c0392b; }