/*══════════════════════════════════════════════════════════════════════════
  score.css — 자동 재측정 성적표 공통 스타일 (2026-08-03 신설)

  ⚠️ 🔴 여기에 `:root` 를 선언하지 말 것.
     색은 shell.css 의 :root 가 SSoT 다. 여기서 다시 선언하면 인라인/후순위가 이겨서
     shell.css 를 고쳐도 이 컴포넌트만 안 바뀐다 (2026-08-02 에 24h/futures 가 겪은 사고).
     쓰는 토큰: --card2 --line --tx --tx2 --tx3 --accent --anchor --err

  구조 (모든 페이지 동일 — 페이지가 고를 수 있는 형태는 없다)
     <div class="sc">
       <div class="sc-sum">          ← 요약 한 줄
         [상태점] 제목  적중 86.0% · 109일 · 08-02 18:40
       <div class="sc-body">         ← 상세 (항상 보인다)
         표 · 부가통계 · 설명 · 재측정 안내

  🔴 접지 않는다 (2026-08-03 진석님 지시). <details>/<summary> 를 쓰지 말 것 —
     접히면 성적을 안 보게 되고, 이 컴포넌트의 존재 이유가 사라진다.

  상태점 3색은 score.js 가 판정한다 (표본부족 ⚪ / 갱신멈춤 🟠 / 정상 🟢).
══════════════════════════════════════════════════════════════════════════*/

.sc{
  border:1px solid var(--line); border-radius:8px; background:var(--card2);
  margin:8px 0; overflow:hidden;
  max-width:var(--wrap-max); margin-left:auto; margin-right:auto;
}

/* ── 요약 줄 ── */
.sc-sum{
  padding:9px 11px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--tx2); line-height:1.5;
}

.sc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sc-dot.ok{   background:#3fb950; }
.sc-dot.low{  background:var(--tx3); }
.sc-dot.stale{ background:var(--anchor); }
.sc-dot.err{  background:var(--err); }

.sc-title{ color:var(--tx); font-weight:600; }
.sc-hit{ color:var(--tx); font-weight:700; }
.sc-meta{ color:var(--tx3); }

/* 상태 배지 — 표본 부족·갱신 멈춤일 때만 나온다. 숫자를 그냥 믿게 두지 않는다. */
.sc-badge{
  font-size:11px; padding:1px 6px; border-radius:4px; white-space:nowrap;
  border:1px solid var(--line); color:var(--tx3);
}
.sc-badge.low{  color:var(--tx2); }
.sc-badge.stale{ color:var(--anchor); border-color:var(--anchor); }

/* ── 상세 ── */
.sc-body{
  padding:0 11px 11px; font-size:12px; color:var(--tx2); line-height:1.65;
  border-top:1px solid var(--line); padding-top:9px;
}
.sc-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0; }
.sc-tbl th{ color:var(--tx3); font-weight:500; text-align:right; padding:3px 0; }
.sc-tbl th:first-child{ text-align:left; }
.sc-tbl td{ padding:3px 0; text-align:right; color:var(--tx2); }
.sc-tbl td:first-child{ text-align:left; color:var(--tx); }
.sc-tbl b{ color:var(--tx); }

.sc-stats{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0; }
.sc-stats span{ color:var(--tx3); }
.sc-stats b{ color:var(--tx2); font-weight:600; }

.sc-note{ margin-top:7px; color:var(--tx3); font-size:11.5px; }
.sc-note b{ color:var(--tx2); }
.sc-warn{ margin-top:7px; color:var(--anchor); font-size:11.5px; }

/* 표가 넓어져도 페이지 가로 스크롤을 만들지 않는다 */
.sc-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:420px){
  .sc-sum{ font-size:12px; padding:8px 9px; gap:6px; }
  .sc-body{ padding:9px 9px 10px; }
}