/*
  에이지 오브 지그마 · 스피어헤드 — 게임 전용 테마

  platform/ux/tokens.css 계약의 변수 이름에 AoS 색을 채우고, components.css가 다루지 않는
  콘텐츠 전용 표현(워스크롤 카드, 스탯 다이아몬드, 무기표, 능력 블록)을 정의한다.
  상호작용(아코디언/모달/검색/레일)은 전부 components.js가 담당한다.

  색은 다른 세 사이트와 겹치지 않게 골랐다 —
  컨퀘스트=양피지/브론즈, 워해머 40K=다크 네이비/골드, 여기=심야 인디고/아주르 골드.
*/
:root{
  --bg:#141223; --panel:#1d1a30; --panel-2:#262138; --line:#3a3352;
  --accent:#e0b355; --accent-dim:#8a6d33; --warn:#c9425a;
  --text:#ece7dd; --muted:#9c93b0;
  --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;
  --aos-melee:#c9425a;   /* 근접 무기표 머리 */
  --aos-ranged:#4a8fb5;  /* 원거리 무기표 머리 */
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(224,179,85,.07), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(120,90,200,.10), transparent 48%);
  color:var(--text); font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------------------------------------------------------------- 머리말 */

.eyebrow{
  font-family:var(--font-mono); letter-spacing:.28em; font-size:11px;
  color:var(--accent); text-transform:uppercase; margin-bottom:14px;
}
main{ max-width:940px; margin:0 auto; padding:40px 20px 140px; }
main > h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:.02em;
  font-size:clamp(28px,5vw,46px); margin:0; text-transform:uppercase;
  text-shadow:0 0 34px rgba(224,179,85,.16);
}
main > .sub{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  color:var(--muted); text-transform:uppercase; margin-top:8px;
}

.section-head{ display:flex; align-items:baseline; gap:12px; margin:44px 0 16px; }
.section-head h2{
  font-family:var(--font-display); font-size:22px; letter-spacing:.03em; margin:0;
  border-bottom:1px solid var(--line); padding-bottom:9px; flex:1;
}
.section-head .count{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }

/* ---------------------------------------------------------------- 부대 구성 */

.comp{ display:grid; gap:8px; }
.comp .row{
  display:flex; gap:12px; align-items:baseline;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px;
}
.comp .role{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); min-width:52px;
}
.comp .row.general{ border-color:var(--accent-dim); background:var(--panel-2); }

/* ---------------------------------------------------------------- 워스크롤 */

.ws{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 18px 14px; margin-bottom:18px;
}
.ws-head{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline; margin-bottom:14px; }
.ws-head h3{ font-family:var(--font-display); font-size:19px; margin:0; letter-spacing:.02em; }
.ws-head .en{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }
.ws-head .subtitle{ font-size:12px; color:var(--muted); width:100%; margin-top:-4px; }

/* 스탯 — 표 대신 칩으로. 좁은 화면에서 가로 스크롤이 나지 않는다. */
.stats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.stat{
  display:flex; flex-direction:column; align-items:center; min-width:62px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
.stat .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.stat .v{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--text); }
.stat.ward{ border-color:var(--accent-dim); }
.stat.ward .v{ color:var(--accent); }

/* 무기표 — 좁은 화면에서는 표 자체가 가로로 스크롤된다(본문은 스크롤되지 않게). */
.wtable-wrap{ overflow-x:auto; margin-bottom:12px; }
table.w{ width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
table.w caption{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:0 0 6px; color:var(--muted);
}
table.w.melee caption{ color:var(--aos-melee); }
table.w.ranged caption{ color:var(--aos-ranged); }
table.w th{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); text-align:center; font-weight:500;
  border-bottom:1px solid var(--line); padding:5px 6px;
}
table.w th:first-child{ text-align:left; }
table.w td{ padding:7px 6px; text-align:center; border-bottom:1px solid rgba(58,51,82,.5); }
table.w td:first-child{ text-align:left; font-weight:500; }
table.w td.num{ font-family:var(--font-mono); }
table.w td.abil{ font-size:11px; color:var(--accent); }
table.w tr:last-child td{ border-bottom:none; }

/* 능력 */
.abil-list{ display:grid; gap:10px; }
.abil{ border-left:2px solid var(--accent-dim); padding:2px 0 2px 12px; }
.abil .nm{ font-weight:600; font-size:14px; }
.abil .when{
  display:inline-block; margin-left:8px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.06em; color:var(--bg); background:var(--accent); border-radius:4px;
  padding:1px 7px; vertical-align:middle;
}
.abil .when.passive{ background:var(--muted); }
.abil .body{ font-size:13px; color:#cfc9dd; margin-top:4px; }
.abil .body .lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-right:5px; }
/* 구조 정보 — 대상/판정/효과/지속을 라벨과 값으로 나란히 */
.abil .facet{ display:flex; gap:8px; align-items:baseline; margin-top:3px; }
.abil .facet .fk{
  flex:0 0 auto; width:34px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.06em; color:var(--muted); text-align:right;
}
.abil .facet .fv{ font-size:12.5px; color:#cfc9dd; }
/* 구조 정보가 잡히지 않은 능력. 원문을 싣지 않으므로 자리만 표시한다. */
.abil .body.nofacet::before{
  content:"구조 정보 없음 — 원본 PDF 참조"; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.08em; border:1px solid var(--line); border-radius:3px;
  padding:0 5px; color:var(--muted);
}

/* 키워드 */
.kws{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.kw{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  border:1px solid var(--accent-dim); color:var(--accent); border-radius:999px; padding:2px 9px;
}

/* ---------------------------------------------------------------- 꼬리말 */

.page-updated{ text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--muted); margin:40px 0 0; }
footer{ border-top:1px solid var(--line); margin-top:28px; padding:26px 20px 46px; }
.footer-note{
  max-width:66ch; margin:0 auto 8px; font-size:12px; line-height:1.8;
  color:var(--muted); letter-spacing:0; text-align:center;
}
.footer-note a{ color:var(--accent); }

/* ---------------------------------------------------------------- 원문 병행표기 */
/*
  용어는 한국어 완역과 원문을 함께 보여준다. 원문은 <i>로 감싸 작고 흐리게 두어
  한국어를 먼저 읽되 원본 대조가 필요할 때 바로 눈에 들어오게 한다.
*/
i{ font-style:normal; }

/* 스탯 칩·표 머리처럼 세로로 쌓는 자리 */
.stat .k i,
table.w th i,
table.w caption i{
  display:block; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.04em; color:var(--muted); text-transform:none; margin-top:1px;
}
table.w th i{ font-weight:400; }

/* 키워드 칩·시점 칩·무기 능력처럼 가로로 잇는 자리 */
.kw i{ margin-left:5px; opacity:.62; font-size:9px; font-family:var(--font-mono); }
.abil .when i{ margin-left:5px; opacity:.75; font-size:9px; }
table.w td.abil i{ display:block; font-size:9px; color:var(--muted);
  font-family:var(--font-mono); margin-top:1px; }

/* 구획 제목 — 원문을 옆에 나란히 */
.section-head h2 i{
  margin-left:9px; font-family:var(--font-mono); font-size:11px;
  font-weight:400; letter-spacing:.06em; color:var(--muted);
}

/* 사람이 직접 써 넣은 능력 설명(effects_ko.json). 구조 정보보다 위에 크게 놓는다. */
.abil .written{
  font-size:13.5px; line-height:1.75; color:var(--text);
  margin:4px 0 8px; padding-left:10px; border-left:2px solid var(--accent-dim);
  white-space:pre-wrap;
}

/* ---------- 규칙 쪽(코어 룰·스피어헤드 규칙·배틀플랜) ---------- */
.rules-page .rule-body{ line-height:1.75; font-size:15px; }
.rules-page .rule-body h2.rule-h{ margin:34px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); scroll-margin-top:70px; }
.rules-page .rule-body h3.rule-h{ margin:24px 0 8px; scroll-margin-top:70px; }
.rules-page .rule-body h4.rule-h{ margin:18px 0 6px; color:var(--accent); scroll-margin-top:70px; }
.rules-page .rule-body p{ margin:8px 0; }
.rules-page .rule-body ul, .rules-page .rule-body ol{ margin:6px 0 12px; padding-left:22px; }
.rules-page .rule-body li{ margin:3px 0; }
.rules-page p.rule-ability{ border-left:3px solid var(--accent-dim); background:var(--panel); padding:10px 14px; border-radius:0 8px 8px 0; }
.rules-page .rule-table{ border-collapse:collapse; width:100%; font-size:14px; margin:10px 0 14px; }
.rules-page .rule-table th, .rules-page .rule-table td{ border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top; }
.rules-page .rule-table th{ background:var(--panel-2); color:var(--accent); }
.rules-page .table-wrap{ overflow-x:auto; }
.rules-page .chapter-toc{ border:1px solid var(--line); border-radius:10px; padding:10px 16px; margin:14px 0 20px; background:var(--panel); }
.rules-page .chapter-toc summary{ cursor:pointer; color:var(--muted); font-size:13px; }
.rules-page .chapter-toc ul{ columns:2 240px; margin:8px 0 0; padding-left:18px; }
.rules-page .chapter-toc a{ color:var(--text); text-decoration:none; }
.rules-page .chapter-toc a:hover{ color:var(--accent); }
.rule-figs{ display:grid; grid-template-columns:1fr; gap:14px; margin:14px 0 20px; }
.rule-figs.multi{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.rule-fig{ margin:0; }
.rule-figs:not(.multi) .rule-fig{ max-width:600px; margin:0 auto; }
.rule-fig a{ display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#e9e4da; }
.rule-fig a:hover{ border-color:var(--accent); }
.rule-fig img{ display:block; width:100%; height:auto; }
.rule-fig figcaption{ font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:6px; }

/* 휴대폰: 무기 능력 칸 글자 */
@media (max-width:640px){ table.w td.abil{ font-size:12.5px; } }