/*
  스타크래프트: 테이블탑 미니어처 게임 — 게임 전용 테마

  platform/ux/tokens.css 계약의 변수 이름에 색을 채우고, 룰북 본문(장 제목·도식·노트 상자·표)을 정의한다.
  상호작용(레일/검색/퀵네비)은 components.js가 담당한다.

  색은 다른 사이트와 겹치지 않게 — 컨퀘스트=양피지/브론즈, 40K=다크 네이비/골드, AoS=인디고/아주르 골드,
  여기=우주 흑청색 + 프로토스 사이오닉 청록(강조)과 젤나가 보라(보조, 원본 룰북의 보라색 제목에서).
*/
:root{
  --bg:#0a0f1a; --panel:#111a2a; --panel-2:#16233a; --line:#25385a;
  --accent:#4fd1e8; --accent-dim:#2b7f91; --warn:#e0566b;
  --text:#e4ecf6; --muted:#8fa3bd;
  --sc-purple:#a678e0;
  --font-display:'Pretendard',-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Pretendard',-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg);
  background-image:
    radial-gradient(circle at 10% 0%, rgba(79,209,232,.08), transparent 40%),
    radial-gradient(circle at 92% 14%, rgba(166,120,224,.10), transparent 46%);
  color:var(--text); font-family:var(--font-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

main{ max-width:900px; margin:0 auto; padding:36px 20px 140px; }

.chapter .ctitle{
  font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
  font-size:clamp(26px,4.6vw,40px); margin:0 0 22px;
  text-shadow:0 0 30px rgba(79,209,232,.18);
}
.chapter h2{
  font-size:22px; margin:42px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);
  color:var(--sc-purple); letter-spacing:.02em;
}
.chapter h3{ font-size:18px; margin:30px 0 8px; color:var(--accent); }
.chapter h4{ font-size:15px; margin:22px 0 6px; color:var(--text); letter-spacing:.04em; }
.chapter p{ margin:8px 0; }
.chapter b{ color:#fff; font-weight:700; }
.chapter ul, .chapter ol{ margin:8px 0; padding-left:22px; }
.chapter li{ margin:4px 0; }
.chapter li::marker{ color:var(--accent); }

/* 원본 PDF에서 잘라낸 도식·예시 그림 */
.sc-figs{ margin:16px 0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.sc-figs.multi .sc-fig{ flex:1 1 280px; max-width:calc(50% - 6px); }
.sc-fig{ display:block; border-radius:10px; overflow:hidden; background:#0d1524;
  border:1px solid var(--line); line-height:0; }
.sc-fig img{ display:block; width:100%; height:auto; max-height:640px; object-fit:contain; }
.sc-fig:hover{ border-color:var(--accent-dim); }
@media (max-width:640px){ .sc-figs.multi .sc-fig{ max-width:100%; } }

/* 노트·디자이너 노트·아바투르의 팁 */
.sc-note{
  margin:14px 0; padding:10px 16px; border-left:3px solid var(--sc-purple);
  background:rgba(166,120,224,.08); border-radius:0 8px 8px 0; font-size:.95em;
}
.sc-note p{ margin:4px 0; }
.sc-note.warn{ border-left-color:var(--warn); background:rgba(224,86,107,.08); }

/* 표 */
.table-wrap{ overflow-x:auto; margin:14px 0; }
table.plain{ border-collapse:collapse; width:100%; font-size:.92em; }
table.plain th, table.plain td{ border:1px solid var(--line); padding:6px 9px; vertical-align:top; text-align:left; }
table.plain th{ background:var(--panel-2); color:var(--accent); font-weight:700; }
table.plain tr:nth-child(even) td{ background:rgba(255,255,255,.02); }

/* 장 목차 */
.chapter-toc{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 16px; margin:0 0 26px; }
.chapter-toc summary{ cursor:pointer; color:var(--muted); font-size:13px; letter-spacing:.06em; }
.chapter-toc-count{ margin-left:8px; color:var(--accent); font-family:var(--font-mono); }
.chapter-toc-list ul{ columns:2; column-gap:24px; margin:10px 0 0; padding-left:18px; }
.chapter-toc-list li{ margin:3px 0; break-inside:avoid; }
.chapter-toc-list a{ text-decoration:none; color:var(--text); }
.chapter-toc-list a:hover{ color:var(--accent); }
@media (max-width:640px){ .chapter-toc-list ul{ columns:1; } }

footer{ max-width:900px; margin:0 auto; padding:24px 20px 60px; color:var(--muted); font-size:12.5px; }
.page-updated{ max-width:900px; margin:0 auto; padding:0 20px; color:var(--muted); font-size:12px; }

/* 고정 상단바(.topbar-site, sticky) 아래로 제목이 숨지 않게 — 목차·검색에서 앵커로 이동할 때 */
.chapter, .chapter [id], .chapter .ctitle{ scroll-margin-top:72px; }

/* ---------- 로스터 빌더(builder.js) ---------- */
.scb{ --ok:#4fc28a; --bad:#e0566b; --warn:#e0b355; }
.scb-top{ position:sticky; top:52px; z-index:6; background:var(--bg); padding:8px 0 10px; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; }
.scb-scale, .scb-totals, .scb-tabs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.scb button, .scb select, .scb input{ font:inherit; }
.scb-scale button, .scb-tabs button, .scb-act{ font-size:13px; padding:6px 12px; border-radius:18px; cursor:pointer;
  border:1px solid var(--accent-dim); background:var(--panel); color:var(--text); }
.scb-scale button[aria-pressed="true"], .scb-tabs button[aria-pressed="true"]{ background:var(--accent-dim); color:#fff; }
.scb-min{ width:90px; padding:5px 8px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.scb-totals span{ font-size:13.5px; color:var(--muted); } .scb-totals b{ color:var(--text); font-size:15px; }
.scb-totals .over b, .scb-slottab td.over{ color:var(--bad); }
.scb-msg{ color:var(--accent); font-size:13px; }
.scb-cols{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap:18px; margin-top:12px; }
@media (max-width:860px){ .scb-cols{ grid-template-columns:1fr; } }
.scb-roster{ border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:var(--panel); align-self:start; }
.scb-roster h3{ margin:4px 0 8px; }
.scb-q{ flex:1 1 160px; min-width:0; padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.scb-gh{ margin:16px 0 6px; color:var(--sc-purple); font-size:14px; letter-spacing:.04em; }
.scb-item{ border:1px solid var(--line); border-radius:10px; margin:6px 0; background:rgba(255,255,255,.02); }
.scb-item > summary{ list-style:none; cursor:pointer; padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.scb-item > summary::-webkit-details-marker{ display:none; }
.scb-item > summary::before{ content:'▸'; color:var(--accent); } .scb-item[open] > summary::before{ content:'▾'; }
.scb-item[open]{ border-color:var(--accent-dim); }
.scb-item > :not(summary){ padding:0 12px 8px; }
.scb-name{ font-weight:700; }
.scb-cost{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent); }
.scb-slots, .scb-tag{ font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:1px 7px; }
.scb-flag{ font-size:12px; color:var(--warn); }
.scb-add, .scb-del{ font-size:12.5px; padding:4px 10px; border-radius:14px; cursor:pointer; border:1px solid var(--accent-dim);
  background:transparent; color:var(--accent); }
.scb-add:hover{ background:var(--accent-dim); color:#fff; }
.scb-del{ border-color:var(--line); color:var(--muted); margin-left:auto; }
.scb-checks{ margin:0 0 8px; } .scb-chk{ margin:4px 0; padding:6px 10px; border-radius:8px; font-size:13.5px; border-left:3px solid var(--line); }
.scb-chk.bad{ border-color:var(--bad); background:rgba(224,86,107,.08); } .scb-chk.warn{ border-color:var(--warn); background:rgba(224,179,85,.08); }
.scb-chk.ok{ border-color:var(--ok); background:rgba(79,194,138,.08); } .scb-chk.info{ color:var(--muted); }
.scb-entry{ border-top:1px solid var(--line); padding:8px 0; }
.scb-entry-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.scb-entry select{ padding:4px 6px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.scb-ups{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 2px; font-size:13.5px; }
.scb-inline{ border:0; background:transparent; } .scb-inline > summary{ padding:4px 0; font-size:13px; color:var(--muted); }
.scb-phase{ margin:10px 0 4px; font-weight:700; color:var(--accent); font-size:13.5px; }
.scb-uphead{ margin:14px 0 2px; font-weight:800; color:var(--sc-purple); }
.scb-ab{ margin:4px 0; font-size:14px; } .scb-meta{ margin:6px 0; font-size:13px; color:var(--muted); }
.scb table.plain{ font-size:12.5px; } .scb-empty{ color:var(--muted); }

/* ---------- 유닛·전술 카드 데이터시트 (공통 .datasheet 틀 + 원본 카드 그림) ---------- */
.sc-unit{ scroll-margin-top:70px; }
.sc-unit .ds-header h3{ text-transform:none; }
.sc-unit .ds-header h3 .en{ margin-left:10px; font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
.sc-unit .ds-header-right{ display:flex; gap:6px; flex-wrap:wrap; }
.sc-top{ display:flex; gap:18px; align-items:flex-start; padding:0 0 4px; border-bottom:1px solid var(--line); }
.sc-top-main{ flex:1 1 auto; min-width:0; }
.sc-tac .sc-top{ padding:16px 22px; border-bottom:0; }
.sc-tac .sc-top-main .ds-block{ padding:6px 0 0; }
.sc-facts{ display:grid; grid-template-columns:max-content 1fr; gap:8px 14px; margin:0; padding:14px 22px; font-size:14px; }
.sc-tac .sc-facts{ padding:0 0 6px; }
.sc-facts dt{ color:var(--muted); font-size:12.5px; padding-top:3px; }
.sc-facts dd{ margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sc-chip{ display:inline-flex; align-items:baseline; gap:3px; padding:2px 9px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); font-size:13px; white-space:nowrap; }
.sc-chip b{ color:var(--text); font-family:var(--font-mono); }
.sc-cardimg{ flex:0 0 300px; margin:14px 18px 10px 0; display:grid; grid-template-columns:1fr; gap:6px; }
.sc-cardimg.tall{ flex-basis:250px; grid-template-columns:1fr 1fr; margin:0; }
.sc-cardimg a{ display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#0d1524; }
.sc-cardimg a:hover{ border-color:var(--accent); }
.sc-cardimg img{ display:block; width:100%; height:auto; }
.sc-cardimg figcaption{ grid-column:1/-1; font-size:11.5px; color:var(--muted); text-align:center; }
.sc-ab{ margin:6px 0 10px; line-height:1.65; }
.sc-ab-name{ margin-right:6px; }
.sc-badge{ display:inline-block; font-size:11px; font-weight:700; line-height:1; padding:3px 7px; border-radius:4px; margin-right:4px; vertical-align:1px; color:#fff; }
.sc-badge.active{ background:#3a9fd8; }
.sc-badge.passive{ background:#c9374a; }
.sc-badge.reaction{ background:#d88a1f; }
.sc-badge.res{ background:#3f9a4b; }
.sc-cost{ display:inline-block; margin-left:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--accent); border:1px dashed var(--accent-dim); border-radius:4px; padding:1px 6px; white-space:nowrap; }
.sc-cost small{ color:var(--muted); font-size:10.5px; }
.sc-for{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px; }
table.sc-wt{ font-size:13px; }
table.sc-wt th, table.sc-wt td{ text-align:center; padding:5px 7px; }
table.sc-wt th:first-child, table.sc-wt td:first-child, table.sc-wt th:last-child, table.sc-wt td:last-child{ text-align:left; }
table.sc-wt td:first-child{ min-width:130px; }
.sc-up-note{ font-family:var(--font-body, inherit); font-size:11px; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:8px; }
@media (max-width: 760px){
  .sc-top{ flex-direction:column; }
  .sc-cardimg{ flex-basis:auto; width:auto; margin:0 16px 12px; grid-template-columns:1fr 1fr; }
  .sc-cardimg.tall{ margin:0; width:100%; }
  .sc-facts{ padding:12px 16px; }
}
.sc-unit .ds-cat{ margin-top:14px; }
.sc-unit .ds-cat-head{ color:var(--accent); }
.sc-unit .ds-cat-body{ border-left:3px solid var(--accent-dim); padding:2px 0 2px 14px; background:rgba(80,160,255,.03); border-radius:0 6px 6px 0; }
.sc-unit .ds-cat-body h4{ color:var(--text); opacity:.85; }
/* 능력치 5~6개는 휴대폰에서도 한 줄이 읽기 쉽다(공통 3열 접힘은 머리·값이 떨어져 보임) */
@media (max-width:640px){
  .sc-unit .stat-row{ grid-template-columns:repeat(var(--stat-cols,5),1fr); gap:0; border-bottom:1px solid var(--line); }
  .sc-unit .stat-row .stat-cell{ padding-left:2px; padding-right:2px; }
  .sc-unit .stat-row.head .stat-cell{ font-size:10.5px; letter-spacing:0; }
}
table.sc-wt th, table.sc-wt td{ white-space:nowrap; }
table.sc-wt td:last-child{ white-space:normal; min-width:120px; }
table.sc-wt td:first-child{ white-space:normal; }
/* 키워드 팝업 */
.modal-box .modal-body{ font-size:14px; line-height:1.7; max-height:60vh; overflow:auto; }
.modal-box .modal-body p{ margin:0 0 8px; }
.modal-box .modal-body ul, .modal-box .modal-body ol{ margin:4px 0 8px; padding-left:20px; }
.modal-box .modal-body .table-wrap{ overflow-x:auto; }
.modal-box .modal-more{ margin:12px 0 0; font-size:12.5px; text-align:right; }
.modal-box .modal-more a{ color:var(--accent); }