@font-face{ font-family:'Pretendard'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../../platform/fonts/Pretendard-400.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../../platform/fonts/Pretendard-500.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../../platform/fonts/Pretendard-600.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../../platform/fonts/Pretendard-700.woff2') format('woff2'); }

:root{
  --bg:#12151a;
  --bg-alt:#161a20;
  --panel:#1b2028;
  --card:#1f2530;
  --steel:#6f8ba3;
  --steel-bright:#9db6c9;
  --slate:#aab6c2;
  --slate-dim:#6e7885;
  --iron:#3a4552;
  --blood:#8a3a3a;
  --blood-bright:#c25a5a;
  --border:rgba(111,139,163,.22);
  --border-strong:rgba(111,139,163,.45);

  --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;
  --radius:4px;

  /* platform/ux 계약 변수 브릿지 — 값은 위 팔레트를 그대로 재사용 */
  --panel-2:var(--card);
  --line:var(--border);
  --accent:var(--steel-bright);
  --accent-dim:var(--steel);
  --warn:var(--blood-bright);
  --text:#e7ebee;
  --muted:var(--slate-dim);
  --gold:#c9a227;
  --gold-bright:#e0bd52;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
.doc-example{
  font-family:var(--font-mono); font-size:14px; line-height:1.7; color:var(--slate);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; margin:16px 0; overflow-x:auto; white-space:pre;
}
.example-card{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--accent-dim); border-radius:var(--radius);
  padding:14px 18px 12px 20px; margin:16px 0;
}
.example-tag{
  display:block; font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
}
.example-card p{ margin:0; font-size:15px; color:var(--slate); }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.shell{ display:flex; min-height:100vh; }
.main{ flex:1; min-width:0; padding:40px 44px 100px; max-width:900px; margin:0 auto; }
@media (max-width:920px){ .main{ padding:28px 18px 100px; } }

.page-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,4vw,34px); margin:0 0 6px; letter-spacing:-.01em; }
.page-sub{ color:var(--muted); font-size:14px; margin:0 0 20px; }

/* 문서 안 h1(장) — 페이지 타이틀과 구분되는 굵은 챕터 구분선 */
.main h2.chapter-title{
  font-size:26px; margin:56px 0 22px; padding:20px 0 0; border-top:3px solid var(--accent-dim);
  color:var(--accent-bright,var(--text));
}
.main h2.chapter-title:first-of-type{ margin-top:0; }

.main h2{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:44px 0 16px; padding-top:16px; border-top:1px solid var(--line); color:var(--text); scroll-margin-top:20px; }
.main h2:first-of-type{ border-top:none; padding-top:0; }
.main h3{ font-family:var(--font-display); font-weight:600; font-size:17.5px; margin:28px 0 10px; color:var(--accent); scroll-margin-top:20px; }
.main h4{ font-family:var(--font-display); font-weight:600; font-size:14px; margin:18px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* 부대(Regiments) 표를 등급(라이트/미디움/헤비)별로 묶어 보여줄 때의 소제목 */
.main h4.unit-subgroup{
  margin:34px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--accent-dim);
  color:var(--accent); font-size:15.5px; letter-spacing:.08em;
}
.main h4.unit-subgroup:first-child{ margin-top:0; }
.main p{ margin:0 0 15px; font-size:16px; color:#dbe0e4; }
.main strong{ color:var(--text); font-weight:700; }
.main em{ color:var(--muted); font-style:normal; }
.main ul{ margin:0 0 16px; padding-left:22px; }
.main li{ margin-bottom:7px; font-size:15.5px; color:#dbe0e4; }
.main hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }

/* ---------- 페이지 내 목차(details/summary) ---------- */
.chapter-toc{ margin:0 0 32px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.chapter-toc summary{ cursor:pointer; list-style:none; padding:13px 18px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--text); }
.chapter-toc summary::-webkit-details-marker{ display:none; }
.chapter-toc summary::before{ content:'▸'; color:var(--accent); font-size:11px; transition:transform .15s ease; }
.chapter-toc[open] summary::before{ transform:rotate(90deg); }
.chapter-toc-count{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-left:auto; }
.chapter-toc-list{ padding:0 18px 16px; }
.chapter-toc-list ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:24px; }
@media (max-width:640px){ .chapter-toc-list ul{ columns:1; } }
.chapter-toc-list li{ break-inside:avoid; margin:0; padding:5px 0; font-size:0; }
.chapter-toc-list li.lvl1{ margin-top:8px; }
.chapter-toc-list a{ display:inline-block; font-size:13.5px; color:var(--slate); text-decoration:none; border-bottom:1px dotted transparent; }
.chapter-toc-list li.lvl1 a{ font-weight:700; color:var(--accent); font-size:14.5px; }
.chapter-toc-list li.lvl2 a{ padding-left:14px; }
.chapter-toc-list li.lvl3 a{ padding-left:26px; font-size:12.5px; color:var(--muted); }
.chapter-toc-list li.lvl4 a{ padding-left:38px; font-size:12px; color:var(--muted); }
.chapter-toc-list a:hover{ color:var(--accent); border-bottom-color:var(--border-strong); }

/* ---------- 레일 하위 목차: 장(h1)/절(h2) 구분 ---------- */
.rail-subtoc-list li.lvl1{ margin-top:10px; }
.rail-subtoc-list li.lvl1 a{ font-weight:700; color:var(--slate); }
.rail-subtoc-list li.lvl2 a{ padding-left:12px; font-size:12.5px; }

.checklist{ list-style:none; padding-left:0; }
.checklist li{ display:flex; gap:8px; align-items:baseline; }
.chk{ font-family:var(--font-mono); font-size:10.5px; padding:2px 7px; border-radius:4px; flex:none; }
.chk-x{ background:#2c4a33; color:#8fd39f; }
.chk-progress{ background:#4a3d1f; color:#e0bf6f; }
.chk-todo{ background:#2a2f38; color:var(--muted); }

footer{ margin-top:60px; color:var(--muted); font-size:12px; line-height:1.7; border-top:1px solid var(--line); padding-top:18px; }
footer b{ color:var(--text); font-weight:600; }

/* ---------- 이전/다음 챕터 네비게이션 ---------- */
.page-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:48px 0 0; }
.page-nav-link{
  display:flex; flex-direction:column; gap:4px; padding:14px 18px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; min-width:0;
  transition:border-color .15s ease;
}
.page-nav-link:hover{ border-color:var(--accent-dim); text-decoration:none; }
.page-nav-next{ text-align:right; align-items:flex-end; }
.page-nav-dir{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.page-nav-title{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.page-nav-empty{ background:transparent; border:none; }
@media (max-width:640px){ .page-nav{ grid-template-columns:1fr; } .page-nav-next{ text-align:left; align-items:flex-start; } }

/* ---------- rail ---------- */
.rail-divider{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin:20px 0 6px 18px; }
.rail-brand{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text); }
.rail-sub{ font-size:11.5px; color:var(--muted); margin:2px 0 18px; padding-left:0; }

/* ---------- 로스터 인덱스: "캐릭터"/"레지먼트" 절 맨 위에서 앵커로 바로 점프하는 카드 그리드 ---------- */
.roster-grid{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.roster-card{
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--text);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 14px; text-decoration:none; transition:border-color .15s;
}
.roster-card:hover{ border-color:var(--accent-dim); color:var(--accent); text-decoration:none; }

/* ---------- datasheet / stat-row theming ---------- */
.datasheet{ background:var(--panel); }
.ds-header{ background:var(--panel-2); }
/* 이름은 왼쪽, 포인트·타입/클래스 배지는 이 안에 묶여서 전부 오른쪽으로 정렬 */
.ds-header-right{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.role-pts{ font-family:var(--font-mono); font-size:11px; color:var(--muted); border:1px solid var(--line); padding:3px 9px; border-radius:3px; }
.role-pts .cost-extra{ color:var(--accent); font-style:normal; }
.cmd-model-note{ margin:0 0 10px; font-size:12.5px; color:var(--muted); }
.role{ font-family:var(--font-mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--accent-dim); padding:3px 9px; border-radius:3px; display:inline-flex; }
/* 타입·클래스 배지 중 모달이 연결된(GLOSSARY 등록된) 것은 각진 배지 대신 밑줄 하이퍼링크로 —
   등록 안 된(모달 없는) 타입은 지금처럼 각진 배지 그대로 유지해 클릭 가능 여부를 구분한다. */
button.role.rule-ref{
  background:none; border:none; border-radius:0; padding:0; display:inline;
  font-family:inherit; font-size:inherit; text-transform:none; letter-spacing:normal;
  color:var(--accent); text-decoration:underline dotted var(--accent-dim); text-underline-offset:3px;
}
button.role.rule-ref:hover{ color:var(--text); text-decoration-color:var(--accent); }
.en{ font-family:var(--font-mono); font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; text-transform:none; letter-spacing:0; }

.kw-pill{
  display:inline-flex; align-items:baseline; gap:2px; vertical-align:baseline;
  margin:0 4px 3px 0; padding:2px 10px; font-family:var(--font-mono); font-size:12.5px;
  color:var(--slate); background:var(--panel-2); border:1px solid var(--line); border-radius:20px;
  line-height:1.6; white-space:nowrap;
}
.ds-cat-body .kw-pill{ padding:4px 12px; margin:0 6px 7px 0; font-size:13px; }

/* 연발 사격(N)(사거리, 특수 효과) — 샷 수/사거리/특수 효과를 라벨 붙여 보여주는 블록.
   키워드 줄 안에서도 통째로 다음 줄로 내려가도록 폭 전체를 차지하게 한다. */
.barrage-block{
  display:block; flex-basis:100%; width:100%; margin:2px 0 8px;
  padding:8px 12px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
}
.barrage-block > .kw-pill, .barrage-block > button.kw-pill{ margin:0 0 4px; }
.barrage-block .ability-fields{ margin-top:2px; }
.barrage-block .field-label{ width:64px; }
button.kw-pill{ font-family:var(--font-mono); cursor:pointer; }
button.kw-pill:hover, a.kw-pill:hover{ border-color:var(--accent); border-style:solid; color:var(--accent); }

/* 모달을 여는 pill(rule-ref)은 각진 사각형 배지 대신 밑줄 하이퍼링크로 표시한다 — "클릭하면
   더 볼 수 있다"는 것을 링크처럼 전달하기 위함. 클릭해도 아무 일도 없는 순수 장식용 태그(미등록
   대괄호 태그 등)만 지금처럼 각진 배지 모양을 유지해, 둘을 시각적으로 구분되게 남겨둔다. */
.kw-pill.rule-ref{
  display:inline; background:none; border:none; border-radius:0; padding:0;
  font-family:inherit; font-size:inherit; line-height:inherit; white-space:normal; vertical-align:baseline;
  color:var(--accent); text-decoration:underline dotted var(--accent-dim); text-underline-offset:3px;
}
button.kw-pill.rule-ref:hover, a.kw-pill.rule-ref:hover{
  border:none; color:var(--text); text-decoration-color:var(--accent);
}

/* 키워드/능력/옵션 배지류 버튼의 포커스 표시 — 브라우저 기본(노란 점선) 대신
   사이트 톤에 맞춘 은은한 링으로 통일. 접근성을 위해 완전히 없애지는 않음. */
button.kw-pill:focus-visible,
a.kw-pill:focus-visible,
.ability-name button.ability-ref:focus-visible,
.opt-badge:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;
}

/* 특수 규칙(부식/방패 등) 이름 pill과 구분되는, [캐릭터]/[올웨이즈 액티브] 같은
   대괄호 유닛·진영 키워드 전용 pill — 각진 사각형 + 골드 톤으로 시인성을 분리한다 */
.kw-pill.tag-pill{
  border-radius:4px; background:rgba(201,162,39,.10);
  border-color:rgba(201,162,39,.4); color:var(--gold-bright);
}
button.kw-pill.tag-pill:hover, a.kw-pill.tag-pill:hover{
  border-color:var(--gold-bright); border-style:solid; color:var(--gold-bright);
}
/* 모달이 딸린 태그(등록된 [챈트] 등)는 위 각진 배지 대신 골드 톤 밑줄 하이퍼링크로 */
.kw-pill.tag-pill.rule-ref{
  background:none; border:none; border-radius:0; padding:0;
  color:var(--gold-bright); text-decoration:underline dotted rgba(201,162,39,.5); text-underline-offset:3px;
}
button.kw-pill.tag-pill.rule-ref:hover, a.kw-pill.tag-pill.rule-ref:hover{
  border:none; color:var(--gold-bright); text-decoration-color:var(--gold-bright);
}

/* [올웨이즈 액티브]/[액티베이티드]/[배틀필드] — 위 타입·클래스·전장 역할 태그(gold)와는
   의미가 다른 "발동 조건" 표시이므로, 붉은 계열로 구분해 둘을 한눈에 구별할 수 있게 한다 */
.kw-pill.cond-pill{
  border-radius:4px; background:rgba(194,90,90,.12);
  border-color:rgba(194,90,90,.45); color:var(--blood-bright);
}
button.kw-pill.cond-pill:hover, a.kw-pill.cond-pill:hover{
  border-color:var(--blood-bright); border-style:solid; color:var(--blood-bright);
}
/* cond-pill은 항상 모달이 딸려 있으므로(발동 조건 설명) 붉은 톤 밑줄 하이퍼링크로 */
.kw-pill.cond-pill.rule-ref{
  background:none; border:none; border-radius:0; padding:0;
  color:var(--blood-bright); text-decoration:underline dotted rgba(194,90,90,.55); text-underline-offset:3px;
}
button.kw-pill.cond-pill.rule-ref:hover, a.kw-pill.cond-pill.rule-ref:hover{
  border:none; color:var(--blood-bright); text-decoration-color:var(--blood-bright);
}

/* ---------- 능력 항목(ability) — 아이템 하나마다 이름 굵게 + 설명 한 줄 ---------- */
.ability{ margin:0 0 12px; font-size:15px; line-height:1.65; color:#dbe0e4; }
.ability:last-child{ margin-bottom:0; }
.ability .ability-name{ display:block; color:var(--warn); font-weight:700; margin-bottom:2px; }
.ability-name button.ability-ref{
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
}
.ability-name button.ability-ref:hover{ text-decoration:underline; text-decoration-style:dashed; text-underline-offset:3px; }

/* 능력을 발동시점/대상/효과로 구조화해 보여주는 라벨 목록 — 자유서술 한 줄보다 각 항목이
   무엇을 뜻하는지 한눈에 구분되게, 라벨 칸을 고정폭으로 왼쪽에 두고 내용은 오른쪽에 배치 */
.ability-fields{ margin-top:4px; display:flex; flex-direction:column; gap:3px; }
.ability-field{ display:flex; align-items:baseline; gap:8px; }
.field-label{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--accent); flex:none; width:52px;
}
.field-text{ font-size:14px; color:#dbe0e4; line-height:1.6; word-break:keep-all; overflow-wrap:break-word; }
.supremacy-ability .field-text{ font-size:14px; }

/* 슈프리머시 어빌리티 — 이름과 [올웨이즈 액티브] 등 조건 태그를 한 줄에 욱여넣지 않고,
   이름은 굵게 왼쪽에 그대로 두고 태그들은 오른쪽에 살짝 떨어뜨려 줄바꿈 가능하게 배치.
   효과 요약도 카드처럼 옅은 배경을 줘서 여러 능력이 나열될 때 경계가 뚜렷하게 보이게 한다. */
.supremacy-ability{
  padding:12px 14px; background:var(--card); border:1px solid var(--border); border-radius:8px;
}
.supremacy-ability .ability-name-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:6px;
}
.supremacy-ability .ability-name{ display:inline; margin-bottom:0; }
.supremacy-ability .cond-tags{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.supremacy-ability .opt-desc{ font-size:14px; color:#dbe0e4; }
.supremacy-ability .opt-desc:first-of-type{ margin-top:0; }

/* 부대 구성 안의 "커맨드 모델"(교체) 소제목 + 배지/pill 묶음, 오피서(추가) 항목 한 줄 */
.composition-sub{ margin:10px 0 0; }
.composition-sub:first-child{ margin-top:0; }
.composition-sublabel{
  display:block; margin-bottom:6px; font-family:var(--font-display); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.composition-sub-body{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.officer-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:8px 0 0; font-size:14px; line-height:1.55;
}
.officer-item:first-child{ margin-top:0; }

/* 워밴드 구성(메인스테이/리스트릭티드) — 쉼표로 쭉 나열하는 대신 라벨별 태그 목록으로 구조화 */
.warband-comp{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.warband-comp:last-child{ margin-bottom:0; }
.warband-group{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; }
.warband-label{
  font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); flex:none; min-width:76px;
}
.warband-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.warband-tag{
  font-size:13px; padding:3px 10px; border-radius:12px; background:var(--card);
  border:1px solid var(--border); color:#dbe0e4;
}
/* 워밴드 내 특정 부대 개수 제한("썬더 라이더 최대 2개") — 부대 이름 태그와 헷갈리지 않게
   경고색 계열로 살짝 구분한다 */
.warband-tag.warband-limit{
  background:rgba(194,90,90,.10); border-color:rgba(194,90,90,.35); color:var(--blood-bright);
}

/* 참고표(슈프리머시 어빌리티/스펠/커맨드모델 등)는 옆으로 늘어놓지 않고 한 줄씩 쌓는다 */
.rule-grid{ display:flex; flex-direction:column; gap:12px; margin:0 0 24px; }
.rule-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; margin-bottom:0; transition:border-color .15s; }
.rule-card:hover{ border-color:var(--border-strong); }
/* 유닛 프로필과 달리 접기/펼치기 없이 항상 펼쳐진 카드 — 이름/배지 줄은 그냥 좌우 정렬만 한다 */
.rule-title{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.rule-card-body{ margin-top:10px; }
.rule-name{ font-weight:700; color:var(--accent); margin:0; font-size:16px; flex:1; }
.rule-effect{ margin:0 0 7px; font-size:14.5px; color:#dbe0e4; }
.rule-effect:last-child{ margin-bottom:0; }
.rule-effect strong{ color:var(--text); }
.rule-field-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:12px 0 4px; }
.rule-field-label:first-child{ margin-top:0; }

/* 참고표 셀 안 " / "로 이어붙인 병렬 항목(라운드별 굴림 값 등)을 한 줄 나열 대신 목록으로 */
.ref-slash-list{ list-style:none; margin:0; padding:0; }
.ref-slash-list li{
  position:relative; margin:0 0 6px; padding-left:14px; font-size:14.5px; line-height:1.55; color:#dbe0e4;
}
.ref-slash-list li:last-child{ margin-bottom:0; }
.ref-slash-list li::before{ content:'·'; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* 액션 목록 요약 카드에서 3장/4장 상세 절로 넘어가는 링크 */
.action-ref-link{
  display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:12.5px;
  color:var(--accent); white-space:nowrap;
}
.action-ref-link:hover{ text-decoration:underline; }

/* 본문 서술 중에 언급되는 코어 룰/진영 고유 메커닉 이름 — 그 정의가 있는 절로 바로 이동 */
.section-ref-link{
  color:var(--accent); text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px;
}
.section-ref-link:hover{ text-decoration-style:solid; }

/* ---------- 갑옷/무기/유물 등 "이름(비용, 효과) / 이름(비용, 효과)" 목록 — First Blood의
   option-block/option-row 구조를 그대로 재사용(팔레트만 TLAOK 변수로 브릿지) ---------- */
.option-block{ margin:0 0 20px; }
.option-heading{
  margin:0 0 8px; font-family:var(--font-display); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
/* 가로로 긴 직사각형 카드를 세로로 쌓는 형태 — 항목 하나하나가 눈에 띄는 개별 카드로 분리되게 */
.option-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.option-row{
  padding:14px 18px; background:var(--card); border:1px solid var(--border); border-radius:8px;
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.opt-main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.opt-name{
  font-family:var(--font-body); font-size:15px; color:var(--text); font-weight:700;
  flex:1 1 auto; min-width:0; word-break:keep-all; overflow-wrap:break-word;
}
.opt-cost{
  font-family:var(--font-mono); font-size:11.5px; color:var(--accent); flex:none; white-space:nowrap;
  background:var(--panel-2); padding:2px 9px; border-radius:10px;
}
.opt-desc{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.65; word-break:keep-all; overflow-wrap:break-word; }

/* 옵션이 새 능력을 "추가"하는지 기존 장비를 "교체"하는지 한눈에 구분하는 작은 뱃지 */
.opt-badge{
  font-family:inherit; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:0; border-radius:0; flex:none; background:none;
  border:none; cursor:pointer; text-decoration:underline dotted currentColor; text-underline-offset:3px;
}
.opt-badge-add{ color:#8fce8f; }
.opt-badge-upgrade{ color:var(--gold-bright); }
.opt-badge:hover{ filter:brightness(1.35); text-decoration-color:currentColor; }

/* ---------- home landing ---------- */
.doc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:40px; }
.doc-card{ display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 20px; transition:border-color .18s ease, transform .18s ease; }
.doc-card:hover{ border-color:var(--accent-dim); transform:translateY(-2px); text-decoration:none; }
.doc-card .kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; display:block; }
.doc-card h2{ font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 6px; color:var(--text); border:none; padding:0; }
.doc-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.6; }
.section-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px; }

/* ---------- 미션 트래커 ---------- */
.trk-setup{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin:18px 0; }
.trk-field{ display:flex; flex-direction:column; gap:5px; flex:1 1 150px; min-width:0; }
.trk-field-btn{ flex:0 0 auto; }
.trk-field label{ font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.trk-field select, .trk-field input{
  background:var(--bg-alt); color:var(--text); border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:8px 10px; font-family:var(--font-body); font-size:15px; width:100%; }
.trk-field select:focus-visible, .trk-field input:focus-visible,
.trk-table input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.trk-reset{ background:transparent; color:var(--blood-bright); border:1px solid var(--blood);
  border-radius:var(--radius); padding:8px 14px; font-family:var(--font-body); font-size:14px; cursor:pointer; }
.trk-reset:hover{ background:rgba(194,90,90,.12); }
.trk-note{ color:var(--muted); font-size:14px; margin:0 0 14px; }
.trk-warn{ color:var(--blood-bright); font-size:14px; margin:0 0 14px;
  border-left:3px solid var(--blood); padding-left:10px; }

.trk-score{ position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr;
  gap:10px; align-items:center; background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:20px; }
.trk-score-side{ text-align:center; border-radius:var(--radius); padding:6px 4px; }
.trk-score-side.trk-lead{ background:rgba(157,182,201,.12); }
.trk-score-name{ font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trk-score-vp{ font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--text); line-height:1.1; }
.trk-score-side.trk-lead .trk-score-vp{ color:var(--gold-bright); }
.trk-score-mid{ text-align:center; min-width:120px; }
.trk-round-label{ font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.trk-round-val{ font-family:var(--font-mono); font-size:18px; color:var(--slate); }
.trk-verdict{ font-size:13px; color:var(--muted); margin-top:2px; }
.trk-verdict.trk-win{ color:var(--gold-bright); font-weight:700; }

.trk-round{ border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; background:var(--panel); }
.trk-round > summary{ cursor:pointer; padding:10px 14px; display:flex; justify-content:space-between;
  align-items:center; gap:10px; list-style:none; }
.trk-round > summary::-webkit-details-marker{ display:none; }
.trk-round > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.trk-round-no{ font-weight:700; color:var(--text); }
.trk-round-sub{ font-family:var(--font-mono); font-size:14px; color:var(--muted); }
.trk-table{ width:100%; border-collapse:collapse; }
.trk-table th, .trk-table td{ border-top:1px solid var(--border); padding:7px 12px; text-align:left;
  font-size:14px; font-weight:400; }
.trk-table thead th{ color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.trk-table tbody th{ color:var(--slate); }
.trk-hint{ display:block; font-size:11px; color:var(--muted); }
.trk-once{ font-style:normal; font-size:10px; color:var(--gold); border:1px solid var(--gold);
  border-radius:2px; padding:0 4px; margin-left:4px; white-space:nowrap; }
.trk-pts{ width:56px; text-align:center !important; font-family:var(--font-mono); color:var(--muted); }
.trk-in{ width:74px; text-align:center !important; }
.trk-table input{ width:100%; background:var(--bg-alt); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:6px 4px;
  font-family:var(--font-mono); font-size:15px; text-align:center; }
@media (max-width:640px){
  .trk-score-vp{ font-size:27px; }
  .trk-table th, .trk-table td{ padding:6px 7px; font-size:13px; }
  .trk-in{ width:62px; }
}

/* 트래커 사용법 + 결과 저장 버튼 */
.trk-save{ background:transparent; color:var(--gold-bright); border:1px solid var(--gold);
  border-radius:var(--radius); padding:8px 14px; font-family:var(--font-body); font-size:14px;
  cursor:pointer; margin-right:8px; }
.trk-save:hover{ background:rgba(224,189,82,.12); }
.trk-guide{ border:1px solid var(--border); border-left:3px solid var(--accent-dim);
  border-radius:var(--radius); background:var(--panel); margin:18px 0; }
.trk-guide > summary{ cursor:pointer; padding:12px 16px; color:var(--accent); font-weight:700;
  list-style:none; }
.trk-guide > summary::-webkit-details-marker{ display:none; }
.trk-guide > summary::before{ content:'▸ '; }
.trk-guide[open] > summary::before{ content:'▾ '; }
.trk-guide > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.trk-guide-body{ padding:0 18px 14px; font-size:14px; line-height:1.85; color:var(--slate); }
.trk-guide-body h3{ font-size:14px; color:var(--text); margin:16px 0 6px; border:0; padding:0; }
.trk-guide-body ol, .trk-guide-body ul{ margin:0 0 8px; padding-left:20px; }
.trk-guide-body li{ margin:3px 0; }
.trk-guide-body b{ color:var(--text); }
.trk-guide-body code{ background:var(--bg-alt); border:1px solid var(--border);
  border-radius:2px; padding:0 5px; font-family:var(--font-mono); font-size:13px; color:var(--gold-bright); }

/* 전투 종료 확정 */
.trk-finish{ border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:var(--radius); background:var(--panel); padding:14px 16px; margin:16px 0 24px; }
.trk-finish.is-final{ border-left-color:var(--gold-bright); background:var(--card); }
.trk-finish-lead{ color:var(--muted); font-size:14px; line-height:1.8; margin:0 0 12px; }
.trk-finish-lead b{ color:var(--text); }
.trk-finish-grid{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.trk-finish-grid .trk-field{ flex:1 1 180px; }
.trk-finish-grid .trk-field-wide{ flex:2 1 260px; }
.trk-finish-btn{ background:transparent; color:var(--gold-bright); border:1px solid var(--gold);
  border-radius:var(--radius); padding:8px 16px; font-family:var(--font-body);
  font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.trk-finish-btn:hover{ background:rgba(201,162,39,.14); }
.trk-finish select:disabled, .trk-finish input:disabled{ opacity:.55; cursor:not-allowed; }
.trk-finish-state{ margin:12px 0 0; font-size:13px; color:var(--gold-bright); font-weight:700; }

/* ---------- 팩션 추천 진단 ---------- */
.quiz{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin:20px 0; }
.quiz-progress{ height:4px; background:var(--bg-alt); border-radius:2px; overflow:hidden; }
.quiz-bar{ height:100%; width:0; background:var(--accent); transition:width .2s ease; }
.quiz-count{ font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em;
  margin:10px 0 4px; }
.quiz-q{ font-size:21px; color:var(--text); margin:6px 0 16px; border:0; padding:0; }
.quiz-opts{ display:flex; flex-direction:column; gap:9px; }
.quiz-opt{ text-align:left; background:var(--bg-alt); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:13px 16px; font-family:var(--font-body); font-size:15px; line-height:1.6; cursor:pointer; }
.quiz-opt:hover{ border-color:var(--accent); background:var(--card); }
.quiz-opt.is-sel{ border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.quiz-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.quiz-nav{ display:flex; gap:10px; margin-top:16px; }
.quiz-back, .quiz-reset{ background:transparent; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:7px 14px; font-family:var(--font-body); font-size:14px; cursor:pointer; }
.quiz-back:hover:not(:disabled), .quiz-reset:hover{ color:var(--text); border-color:var(--accent); }
.quiz-back:disabled{ opacity:.4; cursor:not-allowed; }

.quiz-lead{ color:var(--muted); font-size:14px; margin:0 0 16px; }
.quiz-card{ display:flex; gap:16px; align-items:flex-start; text-decoration:none;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:10px; }
.quiz-card:hover{ border-color:var(--accent); background:var(--card); }
.quiz-card.is-top{ border-left:3px solid var(--gold); }
.quiz-rank{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--muted);
  min-width:34px; text-align:center; }
.quiz-card.is-top .quiz-rank{ color:var(--gold-bright); }
.quiz-card-main{ flex:1; min-width:0; }
.quiz-name{ font-size:19px; font-weight:700; color:var(--text); }
.quiz-tag{ font-size:13px; color:var(--accent); margin-top:2px; }
.quiz-why{ font-size:14px; color:var(--slate); line-height:1.75; margin:8px 0 10px; }
.quiz-meter{ height:5px; background:var(--bg-alt); border-radius:3px; overflow:hidden; }
.quiz-meter span{ display:block; height:100%; background:var(--accent-dim); }
.quiz-card.is-top .quiz-meter span{ background:var(--gold); }
.quiz-rest-h{ font-size:15px; color:var(--text); margin:24px 0 8px; }
.quiz-rest{ list-style:none; padding:0; margin:0; }
.quiz-rest li{ display:flex; justify-content:space-between; gap:12px; padding:7px 2px;
  border-top:1px solid var(--border); font-size:14px; }
.quiz-rest span{ color:var(--muted); font-size:13px; text-align:right; }
@media (max-width:640px){
  .quiz{ padding:16px; }
  .quiz-q{ font-size:18px; }
  .quiz-rest li{ flex-direction:column; gap:2px; }
  .quiz-rest span{ text-align:left; }
}

/* 레일 최상단: 여러 게임을 묶는 루트 아카이브(../../index.html)로 돌아가는 링크.
   브랜드 링크는 그 게임의 홈으로 가므로 둘은 목적지가 다르다. */
.rail-archive{
  display:inline-block; font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); text-decoration:none; margin-bottom:10px;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.rail-archive:hover, .rail-archive:focus-visible{ color:var(--accent); border-bottom-color:currentColor; }

/* 페이지별 "마지막 업데이트" — 빌드 날짜가 아니라 그 페이지 원문이 바뀐 날이다. */
.page-updated{
  margin:22px 0 0; text-align:center;
  font-size:11.5px; letter-spacing:.04em; color:var(--muted);
}
.page-updated time{ font-variant-numeric:tabular-nums; }