/* 모델 페이지 전용 보조 스타일 — 공통 styles.css 위에 얹는다(덮어쓰지 않음). CSP: style-src 'self' 라 외부 파일로만 둔다. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.75rem 0; }
.table-scroll .result-table { margin: 0; min-width: 20rem; }
.result-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.result-table td { overflow-wrap: anywhere; }
.result-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.result-table tr.hl th, .result-table tr.hl td { background: rgba(26, 109, 216, 0.10); font-weight: 700; }
.top h1 { overflow-wrap: anywhere; }
.note { color: var(--muted); font-size: 0.85rem; }
.badge { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--muted); }
.disclaimer { border-left: 4px solid var(--accent); padding-left: 0.75rem; }
.model-list { list-style: none; padding: 0; margin: 0; columns: 1; }
.model-list li { break-inside: avoid; padding: 0.15rem 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.model-list .meta { color: var(--muted); font-size: 0.8rem; }
.grade-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.source-list { margin: 0.5rem 0; padding-left: 1.1rem; }
.cta { display: inline-block; padding: 0.6rem 1rem; background: var(--accent); color: var(--accent-ink); border-radius: 8px; font-weight: 700; text-decoration: none; }
@media (min-width: 720px) { .model-list { columns: 2; column-gap: 1.5rem; } }
@media (min-width: 1000px) {
  .hub main { max-width: 960px; }
  .hub .top { max-width: 960px; }
  .model-list { columns: 3; }
}

/* 좁은 화면(오너 폴드 접힘 ~360px 포함, max-width:1279px): 표는 가로로 넘치지 않고 줄바꿈으로 다 보이게.
   그래도 넘치는 경우(긴 모델명 등) 오른쪽 그림자로 스와이프 단서를 준다(background-attachment:local 기법, JS 없음). */
@media (max-width: 1279px) {
  .table-scroll .result-table { min-width: 0; }
  .result-table th, .result-table td { word-break: keep-all; overflow-wrap: anywhere; }
  .result-table th[scope="row"] { white-space: normal; }
  .result-table .num, .result-table td:nth-child(2):not(:last-child) { white-space: nowrap; }
  .table-scroll {
    background:
      linear-gradient(to right, var(--card) 30%, transparent) left center / 1.5rem 100% no-repeat local,
      linear-gradient(to left, var(--card) 30%, transparent) right center / 1.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent) left center / 0.6rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent) right center / 0.6rem 100% no-repeat scroll;
  }
}
@media (max-width: 400px) {
  .result-table th, .result-table td { padding: 0.45rem 0.3rem; font-size: 0.9rem; }
}