/* 보국안민 — 게임 스타일
   한 화면 게임: 위 상태줄 / 가운데 한지 지도 / 아래 임무줄 + 명령줄. 시트는 아래에서 올라온다.
   단일 룩(한지+먹). 안전영역은 --sa-* 변수로 통일(Capacitor css 모드 + 브라우저 env 둘 다 지원). */
@font-face{font-family:"Pretendard";src:url("../fonts/PretendardVariable.woff2") format("woff2-variations"),url("../fonts/PretendardVariable.woff2") format("woff2");font-weight:45 930;font-display:swap}
@font-face{font-family:"Hanja Sans";src:url("../fonts/NotoSansKR-Hanja.woff2") format("woff2-variations"),url("../fonts/NotoSansKR-Hanja.woff2") format("woff2");font-weight:400 800;font-display:swap}
/* Layout: 한 화면 게임. 위 상태줄 / 가운데 한지 지도(성-길 네트워크, 핀치줌) / 아래 임무줄 + 명령줄. 시트는 아래에서 올라온다.
   단일 룩(한지+먹) 고정: 다크 모드 없이 모든 색을 명시. */
:root{
  --paper:#efe5cb; --paper-2:#e4d7b5; --sea:#bccbc4; --sea-ink:#8fa39b;
  --ink:#221d17; --ink-2:#5a4f40; --line:#8a7a5e;
  --seal:#a8321f;            /* 인장 붉은색: 목표 표시 */
  --f-dh:#3c6a3c; --f-js:#33507a; --f-qg:#b8861c; --f-jp:#8e2a24; --f-no:#8a8270;
  --f-ib:#66652c; --f-mh:#9a5b2e; --f-ind:#2e7a56; --f-kpg:#2b6280; --f-ru:#5d6f86; --f-us:#2f60a6; --f-gb:#8a3346;
  --f-rok:#253a6c; --f-un:#4b90c2; --f-kpa:#7a3626; --f-cpv:#9c6f24;   /* 세력 색 (PLAN 2.4) */
  --display:"Pretendard","Hanja Sans",system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --body:"Pretendard","Hanja Sans",system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --sat:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
  --sab:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
  --sal:max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px));
  --sar:max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px));
  color-scheme:light;
}
html,body{height:100%;margin:0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{font-size:14px;overscroll-behavior:none;background:var(--ink);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-user-select:none;user-select:none}
#app{height:100%;padding-top:var(--sat);display:grid;grid-template-rows:auto 1fr auto auto;background:var(--ink)}
.band{padding-left:max(12px,var(--sal));padding-right:max(12px,var(--sar))}
@media (min-width:420px){.band{padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}}

/* 상단 */
#top{background:var(--ink);color:var(--paper);padding-block:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.date{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0;flex:1 1 0} /* 긴 날짜면 음력·연호 줄이 아래로 (턴 표시는 오른쪽 그대로) */
.date b{font-family:var(--display);font-size:clamp(15px,4.9vw,19px);font-weight:400;letter-spacing:.02em;white-space:nowrap}
.date small{font-size:11px;opacity:.7;white-space:nowrap}
.turn{font-size:11px;letter-spacing:.12em;border:1px solid rgba(239,229,203,.35);padding:2px 7px;border-radius:2px;white-space:nowrap}
#res{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.gauge{display:grid;gap:3px;font-size:11px}
.gauge span{display:flex;justify-content:space-between;opacity:.85;font-variant-numeric:tabular-nums}
.gauge i{display:block;height:4px;background:rgba(239,229,203,.18);position:relative}
.gauge i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--c);transition:width .5s}

/* 지도 */
#mapwrap{position:relative;min-height:0;overflow:hidden;background:var(--sea)}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}
.coast{fill:var(--paper);stroke:var(--ink-2);stroke-width:1.4}
.seaname{font-family:var(--display);fill:var(--sea-ink);font-size:34px;letter-spacing:.4em}
.road{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 4}
.road.far{stroke-dasharray:2 6;opacity:.7}
.node .base{stroke:var(--ink);stroke-width:2}
.node text{font-family:var(--body);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.node .glyph{fill:#f6efd9;stroke:none;font-family:var(--display);font-weight:400}
.node.sea .base{stroke-dasharray:3 2}
.target-ring{fill:none;stroke:var(--seal);stroke-width:3;animation:pulse 1.4s ease-in-out infinite}
.block-ring{fill:none;stroke:var(--f-jp);stroke-width:2.5;stroke-dasharray:5 4}
@keyframes pulse{0%,100%{opacity:1;r:20}50%{opacity:.35;r:26}}
.unit{pointer-events:none}
.unit text{font-family:var(--display);fill:#f6efd9;font-size:13px}
.unit .tag{font-family:var(--body);font-weight:700;font-size:10px;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.mapbtns{position:absolute;right:max(10px,var(--sar));top:10px;display:grid;gap:6px}
.mapbtns button.off{opacity:.45;text-decoration:line-through;background:var(--paper-2)}
.mapbtns button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);font-family:var(--display);font-size:16px;color:var(--ink)}
.legend{position:absolute;left:max(10px,var(--sal));top:10px;background:rgba(239,229,203,.9);border:1px solid var(--line);padding:6px 8px;font-size:11px;display:grid;gap:3px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;display:inline-block;border:1px solid var(--ink)}
.legend{cursor:pointer;-webkit-tap-highlight-color:transparent}
.legend.fold{padding:6px;gap:4px}.legend.fold span{font-size:0;gap:0} /* 접힌 범례: 색 칸만 */
#toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;font-size:13px;max-width:86%;text-align:center;border-radius:2px;transition:opacity .3s;pointer-events:none}

/* 임무줄 */
#mission{background:var(--paper-2);border-top:2px solid var(--ink);padding-block:9px;display:flex;align-items:center;gap:10px}
#mission .seal{flex:none;width:34px;height:34px;background:var(--seal);color:#f6efd9;font-family:var(--display);display:grid;place-items:center;font-size:15px;border-radius:3px}
#mission .txt{flex:1;min-width:0}
#mission .txt small{display:block;font-size:11px;color:var(--ink-2);letter-spacing:.05em}
#mission .txt b{display:block;font-size:14px;line-height:1.35}
#goBtn{flex:none;border:1.5px solid var(--ink);background:var(--paper);padding:7px 10px;font-family:var(--body);font-weight:700;font-size:12px;color:var(--ink);border-radius:2px}

/* 명령줄 */
#cmd{background:var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-block:0 var(--sab)}
#cmd button{background:var(--ink);color:var(--paper);border:0;padding:10px 0 9px;font-family:var(--body);font-size:12px;display:grid;justify-items:center;gap:2px}
#cmd button b{font-family:var(--display);font-weight:400;font-size:18px;line-height:1}
#cmd button:active{background:#3a3228}

button{cursor:pointer}
button:focus-visible{outline:3px solid var(--seal);outline-offset:2px}

/* 시트 */
#shade{position:fixed;inset:0;background:rgba(20,16,12,.45);z-index:20}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:86%;display:flex;justify-content:center;pointer-events:none}
#sheet .in{pointer-events:auto;width:100%;max-width:620px;max-height:100%;overflow:auto;background:var(--paper);border-top:3px solid var(--ink);box-shadow:0 -8px 30px rgba(0,0,0,.3);
  padding-top:18px;padding-bottom:calc(18px + var(--sab));padding-left:max(18px,var(--sal));padding-right:max(18px,var(--sar));animation:up .25s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#sheet .in{animation:none}.target-ring{animation:none}}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--seal);font-weight:700}
.sh-title{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2;margin:4px 0 2px;text-wrap:balance}
.sh-sub{font-size:12px;color:var(--ink-2)}
.prose{display:grid;gap:10px;margin:14px 0;font-size:14.5px;line-height:1.75;max-width:62ch}
.prose p{margin:0}
.quote{border-left:3px solid var(--seal);padding:4px 0 4px 12px;font-size:14px;line-height:1.7;background:rgba(168,50,31,.05)}
.src{font-size:11.5px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:8px;margin-top:4px;line-height:1.6}
.note{font-size:11px;color:var(--ink-2);margin-top:8px}
.btns{display:grid;gap:8px;margin-top:14px}
.btn{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 14px;font-family:var(--body);font-weight:700;font-size:14px;border-radius:2px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.seal{background:var(--seal);border-color:var(--seal)}
.btn small{font-weight:400;font-size:11px;opacity:.8}
.btn[disabled]{opacity:.4;cursor:default}
.opt{border:1.5px solid var(--ink);background:var(--paper);padding:12px 14px;text-align:left;font-family:var(--body);color:var(--ink);border-radius:2px;display:grid;gap:4px}
.opt b{font-size:14.5px}
.opt span{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.fx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fx span{font-size:12px;border:1px solid var(--line);padding:2px 8px;border-radius:20px;font-variant-numeric:tabular-nums}
.fx .up{color:var(--f-dh);border-color:var(--f-dh)} .fx .dn{color:var(--seal);border-color:var(--seal)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:10px 0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0;font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.chip i{width:10px;height:10px;border:1px solid var(--ink)}

/* 전투 */
.bt{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:14px 0 8px}
.side{display:grid;gap:5px;min-width:0}
.side b{font-size:13px}
.side.r{text-align:right}
.hp{height:12px;border:1.5px solid var(--ink);background:var(--paper-2);position:relative}
.hp i{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--c);transition:width .45s}
.side.r .hp i{inset:0 0 0 auto}
.vs{font-family:var(--display);font-size:22px;color:var(--seal)}
.round{font-size:12px;color:var(--ink-2);text-align:center}
.blog{font-size:13px;line-height:1.6;min-height:3.2em;background:rgba(34,29,23,.05);padding:8px 10px;margin:8px 0}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 연표 */
.tl{display:grid;gap:0;margin-top:12px}
.tl div{display:grid;grid-template-columns:7.2em 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.tl div.lock{opacity:.4}
.tl em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* 표지 */
#cover{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--paper);overflow-y:auto;padding-block:calc(var(--sat) + 28px) calc(var(--sab) + 24px);padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}
#cover .wrap{display:grid;gap:10px;justify-items:center;max-width:460px;margin:0 auto;text-align:center}
#cover .stamp{width:58px;height:58px;background:var(--seal);color:#f6efd9;display:grid;place-items:center;font-family:var(--display);font-size:22px;border-radius:4px;transform:rotate(-4deg);margin-bottom:6px}
#cover h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,11vw,58px);line-height:1;margin:0;letter-spacing:.04em}
#cover .sub{font-family:var(--display);font-size:24px;letter-spacing:.5em;margin-left:.5em;opacity:.9}
#cover p{font-size:13px;line-height:1.7;opacity:.75;margin:0}
#cover .fine{font-size:11px;opacity:.5;margin-top:6px}
.chlist{display:grid;gap:6px;width:100%;margin-top:14px;text-align:left}
.ch{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px 12px;background:rgba(239,229,203,.06);border:1px solid rgba(239,229,203,.22);border-radius:2px;color:var(--paper);font-family:var(--body);text-align:left}
.ch .no{font-family:var(--display);font-size:20px;color:#e9b8a8;text-align:center}
.ch .nm{display:grid;gap:2px;min-width:0}
.ch .nm b{font-size:15px}
.ch .nm small{font-size:11px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .st{font-size:11px;opacity:.8;white-space:nowrap}
.ch:not(.lock) .st{color:#e9d9a8}
.ch.lock{opacity:.38;cursor:default}
.refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.refs a{font-size:11px;color:var(--f-js);border:1px solid var(--line);padding:1px 7px;border-radius:20px;text-decoration:none}

/* 원거리 사건 (지도 밖 장소) · 일 단위 날짜 */
#farMark{position:absolute;z-index:22;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--paper);border:1.5px dashed var(--seal);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#farMark[hidden]{display:none}
#farMark b{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.05}
#farMark small{font-size:10px;line-height:1.2;color:var(--ink-2)}
#farMark .arw{position:absolute;left:50%;top:50%;width:0;height:0;margin:-7px 0 0 -5px;border-left:11px solid var(--seal);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(var(--a,0deg)) translateX(36px)}
#farMark.in .arw{display:none}
.farcard{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:8px 12px;border:1px dashed var(--seal);background:rgba(168,50,31,.05)}
.farcard b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1;color:var(--seal)}
.farcard span{display:grid;font-size:13px;font-weight:700;gap:1px}
.farcard small{font-size:11px;font-weight:400;color:var(--ink-2)}
.date.day b{color:#f0c987}

/* ── 가독성: 고딕(Pretendard)로 바꾸면서 크기·굵기 조정 ── */
body{font-size:15px;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.date b{font-weight:800}
.date small{font-size:12px}
.turn{font-size:12px;letter-spacing:.04em}
.gauge{font-size:12px}
.seaname{font-weight:700;letter-spacing:.3em}
.node text{font-weight:700}
.node .glyph{font-weight:800}
.unit text{font-weight:800}
.unit .tag{font-size:11px}
.mapbtns button{font-weight:800}
.legend{font-size:12px}
#toast{font-size:14px;font-weight:600}
#mission .seal{font-weight:800}
#mission .txt small{font-size:12px;letter-spacing:0}
#mission .txt b{font-size:15.5px;font-weight:800}
#mHint{display:block;font-size:13px;font-weight:700;color:var(--seal);line-height:1.35;margin-top:2px}
#goBtn{background:var(--seal);border-color:var(--seal);color:#fff;font-size:14px;font-weight:800;padding:10px 14px;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
#goBtn:active{transform:translateY(1px);box-shadow:none}
#cmd button{font-size:12.5px}
#cmd button b{font-weight:800;font-size:17px}
.eyebrow{font-size:12px;letter-spacing:.06em}
.sh-title{font-weight:800;font-size:24px;letter-spacing:-.02em}
.prose{font-size:16px;line-height:1.72}
.quote{font-size:15px}
.src{font-size:12.5px}
.note{font-size:12px}
.btn{font-size:15px;font-weight:700}
.btn small{font-size:12px}
.opt b{font-size:15.5px}
.opt span{font-size:13.5px}
.fx span{font-size:12.5px}
.kv{font-size:14px}
.chip{font-size:13px}
.side b{font-size:14px}
.vs{font-weight:800}
.round{font-size:13px}
.blog{font-size:14px}
.tl div{font-size:14px}
#cover .stamp{font-weight:800}
#cover h1{font-weight:800;letter-spacing:-.01em}
#cover .sub{font-weight:700;letter-spacing:.4em}
#cover p{font-size:14px}
#cover .fine{font-size:12px}
.ch .no{font-weight:800}
.ch .nm b{font-size:16px}
.ch .nm small{font-size:12px}
.ch .st{font-size:12px}
.refs a{font-size:12px}
#farMark b{font-weight:800}
#farMark small{font-size:11px}

/* ── 할 일 안내 ── */
.node .here{display:none;fill:var(--seal);font-weight:800;stroke:var(--paper);stroke-width:4px;paint-order:stroke}
.node.is-target .here{display:block;animation:bob 1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.todo{background:rgba(168,50,31,.08);border:1.5px solid var(--seal);border-radius:4px;padding:9px 12px;margin-bottom:12px;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.todo b{display:block;font-size:12px;color:var(--seal);margin-bottom:2px}
.todo.dim{border-color:var(--line);background:rgba(34,29,23,.04);font-weight:500;color:var(--ink-2)}
.howto{margin:14px 0 6px;padding-left:22px;display:grid;gap:10px;font-size:15.5px;line-height:1.6}
.howto b{color:var(--seal)}
@media (prefers-reduced-motion:reduce){.node.is-target .here{animation:none}}

/* ── 배경음악 버튼(표지) ── */
.cvbgm{position:absolute;top:calc(var(--sat) + 12px);right:max(12px,var(--sar));background:transparent;color:var(--paper);border:1px solid rgba(239,229,203,.4);border-radius:20px;padding:6px 12px;font-family:var(--body);font-size:13px;font-weight:700}
.cvbgm.off{opacity:.55;text-decoration:line-through}
/* ── 용어 사전 ── */
.gl{text-decoration:underline dotted var(--seal);text-decoration-thickness:2px;text-underline-offset:3px;cursor:help;color:inherit;font-weight:600}
.gl:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
#gloss{position:fixed;z-index:40;background:var(--ink);color:var(--paper);padding:12px 14px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-family:var(--body)}
#gloss b{display:block;font-size:15px;font-weight:800;color:#f2c6b8;margin-bottom:4px}
#gloss p{margin:0;font-size:14.5px;line-height:1.6}
#gloss small{display:block;margin-top:6px;font-size:11px;opacity:.55}
.glist{margin:12px 0;display:grid;gap:2px}
.glist dt{font-weight:800;font-size:15px;margin-top:10px}
.glist dt small{font-weight:500;color:var(--ink-2);font-size:12px}
.glist dd{margin:2px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ── 턴 목록 ── */
.tl .tlrow,.tl div{display:grid;grid-template-columns:7.4em 1fr auto;gap:10px;align-items:center;padding:10px 4px;border:0;border-bottom:1px dashed var(--line);background:transparent;text-align:left;font-family:var(--body);font-size:14px;color:var(--ink);width:100%}
.tl .tlrow{cursor:pointer}
.tl .tlrow:hover,.tl .tlrow:focus-visible{background:rgba(168,50,31,.06)}
.tl .tlrow span{font-weight:700}
.tl .tlrow i,.tl div i{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap}
.tl .tlrow.cur{background:rgba(168,50,31,.08)}
.tl .tlrow.cur i{color:var(--seal);font-weight:800}
.tl .tlrow::after{content:"›";grid-column:auto;display:none}
.rvrec{border-top:1.5px solid var(--ink);margin-top:6px;padding-top:10px}
.rvrec>b{font-size:12px;color:var(--seal);letter-spacing:.06em}

/* ── 인물 사전 ── */
.gy{font-weight:500;font-size:12px;opacity:.75;margin-left:4px}
#gloss .gy{color:var(--paper)}
#gloss .refs a{color:#f2c6b8;border-color:rgba(255,255,255,.3)} /* 사전 풀이 출처 */
.gtabs{display:flex;gap:6px;margin:12px 0 4px}
.gtabs button{flex:1;padding:9px 0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--body);font-weight:700;font-size:14px;border-radius:4px}
.gtabs button.on{background:var(--ink);color:var(--paper)}

/* ── 한자 표지 한글화 ── */
#mission .seal{font-size:12px;width:40px}
.mapbtns button.tb{width:auto;min-width:38px;height:30px;border-radius:15px;padding:0 9px;font-family:var(--body);font-size:12px;font-weight:800;justify-self:end}
.vs{font-family:var(--body)}

/* ── 표지 챕터 목록 (가독성) ── */
#cover .wrap{max-width:560px}
.chlist{gap:8px;margin-top:18px}
.ch{grid-template-columns:44px 1fr auto;gap:12px;padding:14px 14px;border-radius:8px;background:rgba(239,229,203,.07);border:1px solid rgba(239,229,203,.18);align-items:center}
.ch .no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:800;background:rgba(239,229,203,.1);color:#f2c6b8;font-family:var(--body)}
.ch .nm{gap:3px}
.ch .nm b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#f6efd9}
.ch .nm small{white-space:normal;overflow:visible;font-size:13px;line-height:1.45}
.ch .nm .pd{opacity:.9;color:#e9d9a8;font-weight:600}
.ch .nm .bl{opacity:.72}
.ch .nm .lk{opacity:.8;font-size:12px}
.ch .bar{display:block;height:5px;border-radius:3px;background:rgba(239,229,203,.15);margin-top:6px;overflow:hidden}
.ch .bar i{display:block;height:100%;background:#d9b26a;border-radius:3px}
.ch .st{font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:20px;opacity:1;border:1px solid rgba(239,229,203,.35);color:#f6efd9;white-space:nowrap}
.ch.done .st{background:#3c6a3c;border-color:#3c6a3c;color:#fff}
.ch.done .bar i{background:#6fae6f}
.ch.going{border-color:#c5543f;background:rgba(197,84,63,.14)}
.ch.going .st{background:var(--seal);border-color:var(--seal);color:#fff}
.ch.new .st{border-color:#e9d9a8;color:#e9d9a8}
.ch.lock,.ch.soon{opacity:.55}
.ch.lock .st,.ch.soon .st{border-style:dashed}
.ch:not([disabled]):hover{background:rgba(239,229,203,.13)}
.ch:focus-visible{outline:3px solid #e9b8a8;outline-offset:2px}
@media (max-width:420px){.ch{grid-template-columns:36px 1fr;padding:12px}.ch .no{width:34px;height:34px;font-size:16px}.ch .st{grid-column:2;justify-self:start;margin-top:4px}}

/* ── 상위로 가기 (턴 목록 → 챕터 목록, 턴 보기 → 턴 목록) ── */
.crumb{display:inline-flex;align-items:center;gap:2px;margin:-4px 0 10px;padding:6px 12px 6px 8px;border:1.5px solid var(--line);border-radius:20px;background:transparent;color:var(--ink);font-family:var(--body);font-size:13.5px;font-weight:800}
.crumb:hover,.crumb:focus-visible{background:rgba(34,29,23,.06);border-color:var(--ink)}

/* ── 전술 전투 ── */
#tac{position:fixed;inset:0;z-index:35;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:calc(var(--sat) + 8px);padding-bottom:calc(var(--sab) + 8px);padding-left:max(8px,var(--sal));padding-right:max(8px,var(--sar));font-family:var(--body)}
.tac-top{width:100%;max-width:560px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tac-top b{display:block;font-size:17px;font-weight:800}
.tac-top small{display:block;font-size:12px;opacity:.7}
.tac-turn{font-size:12.5px;font-weight:800;border:1px solid rgba(239,229,203,.4);padding:4px 10px;border-radius:20px;white-space:nowrap}
.tac-goal{width:100%;max-width:560px;font-size:13px;background:rgba(239,229,203,.08);padding:6px 10px;border-radius:6px}
.tac-goal b{color:#f2c6b8;margin-right:6px}
.tac-goal em.lost{color:#ff8a6b;font-style:normal;font-weight:800}
.tac-goal small{opacity:.75}
.tac-board{flex:1;min-height:0;display:grid;place-items:center}
.tac-board svg{display:block;border:2px solid #3a3228;border-radius:4px;touch-action:manipulation}
.tac-board svg [data-x]{cursor:pointer}
.tac-info,.tac-log{width:100%;max-width:560px;font-size:13px;line-height:1.5;min-height:1.5em}
.tac-info em{color:#f2c6b8;font-style:normal;font-weight:700}
.tac-info .tt{opacity:.7;margin-left:4px}
.tac-log{color:#e9d9a8}
.tac-btns{width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tbtn{padding:11px 0;border-radius:6px;border:1.5px solid rgba(239,229,203,.5);background:transparent;color:var(--paper);font-family:var(--body);font-weight:800;font-size:14px}
.tbtn.seal{background:var(--seal);border-color:var(--seal)}
.tbtn.ghost{font-weight:600;font-size:12.5px;opacity:.8}
.tbtn[disabled]{opacity:.35}
.tac-modal{position:absolute;inset:0;background:rgba(20,16,12,.6);display:grid;place-items:center;padding:16px}
.tac-card{background:var(--paper);color:var(--ink);border-radius:8px;padding:20px;max-width:340px;width:100%;display:grid;gap:8px;text-align:center}
.tac-card b{font-size:24px;font-weight:800}
.tac-card p{margin:0;font-size:15px;line-height:1.6}
.tac-card small{color:var(--ink-2)}

.tac-info{min-height:3em}.tac-log{min-height:3em}

/* ── 전술 전투: 힌트·부대 안내 ── */
.tac-btns{grid-template-columns:1fr 1fr 1fr 1fr}
.tbtn.hint{border-color:#f2c230;color:#f2c230}
.tac-card.tl{text-align:left;max-width:380px;max-height:86%;overflow:auto;gap:10px}
.tac-card.tl>b{font-size:20px}
.tac-card .live{background:rgba(242,194,48,.15);border-left:3px solid #c9971c;padding:8px 10px;font-weight:700;font-size:14.5px}
.tac-card .hints{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.55}
.tac-card .sub{font-size:12px;font-weight:800;color:var(--seal);letter-spacing:.05em;margin-top:4px}
.tac-card .roster{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tac-card .roster li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;font-size:13px;line-height:1.45}
.tac-card .roster small{display:block;color:var(--ink-2);font-size:12px}
.tac-card .tbtn{color:#fff}

.tac-card .roster b{font-size:14px;font-weight:800}
/* 전투 장면 효과 (warFx) */
#clash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;pointer-events:all;
  background:radial-gradient(circle at 50% 50%,rgba(176,52,28,.78),rgba(24,14,8,.92) 70%);animation:clashBg 1.3s ease forwards}
#clash .cw{animation:clashHit .16s linear infinite}
#clash .ct{font-family:var(--body);font-size:46px;font-weight:900;color:#f6efd9;letter-spacing:.04em;text-shadow:0 3px 0 #7a1d12,0 0 18px rgba(232,178,58,.8);animation:clashPop 1.3s ease forwards}
#clash i{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgba(226,206,160,.75),rgba(226,206,160,0) 70%);animation:clashDust 1s ease-out forwards;opacity:0}
#clash::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:clashFlash .45s steps(1) 3}
@keyframes clashBg{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes clashHit{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-5px,3px) rotate(-6deg)}50%{transform:translate(4px,-3px) rotate(5deg)}75%{transform:translate(-3px,-2px) rotate(-3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes clashPop{0%{transform:scale(.4);opacity:0}18%{transform:scale(1.18);opacity:1}30%{transform:scale(1)}85%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes clashDust{0%{transform:scale(.3);opacity:0}30%{opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes clashFlash{0%{opacity:0}10%{opacity:.18}20%{opacity:0}}
body.quake #sheet .in,body.quake #tac .tac-board{animation:quake .12s linear 10}
@keyframes quake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,-2px)}}
@media (prefers-reduced-motion:reduce){#clash .cw,#clash i,#clash::after,body.quake #sheet .in,body.quake #tac .tac-board{animation:none}#clash i{display:none}}

/* ───────── E2 지도 배경: 고지도 한지풍 (E1 채택, 그림 파일 없이 SVG만) ───────── */
#mapwrap{background:#b9c7b8}
/* 한지 섬유결 + 얼룩 + 가장자리 그을림. 지도 위·범례 아래에 깔린다(::before라서 뒤 형제 요소보다 아래) */
#mapwrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.9 .045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .2  0 0 0 -1.15 .7'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/256px 256px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.008' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .38  0 0 0 0 .2  0 0 0 -.9 .55'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/512px 512px;
  box-shadow:inset 0 0 60px rgba(90,60,25,.55)}
.seawave{pointer-events:none}
.wave{fill:none;stroke:#708a80;stroke-width:1.1;stroke-linecap:round;opacity:.5}
.wave.w2{stroke-width:.9;opacity:.3}
.coast{fill:#efe2c0;stroke:#3a2a1a;stroke-width:1.6;stroke-linejoin:round}
.coast-brush{fill:none;stroke:#3a2a1a;stroke-width:6;stroke-linejoin:round;opacity:.13}
.coast-brush.b2{stroke-width:3;opacity:.28;stroke-dasharray:22 3 9 2 31 4;stroke-linecap:round}
.seaname{fill:#6f877d}
.road{stroke:#5a3f26}
.node .base{stroke:#2b1d10;stroke-width:2.2}
.node text{fill:#2b1d10;stroke:#efe2c0}
.legend{background:rgba(239,226,192,.94);border:1.5px solid #3a2a1a;box-shadow:2px 2px 0 rgba(58,42,26,.22)}
.mapbtns button{background:#efe2c0;border-color:#3a2a1a;color:#2b1d10}

/* ───────── E3 산줄기·강 (Natural Earth 강·ETOPO 고도 기준, 그림 파일 없이 SVG) ───────── */
#land .river-bg{fill:none;stroke:#efe2c0;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#land .river{fill:none;stroke:#5f7f86;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85;pointer-events:none}
#land .rivername{fill:#4d6a70;font-size:13px;font-weight:700;letter-spacing:.15em;paint-order:stroke;stroke:#efe2c0;stroke-width:3px;pointer-events:none}
#land .ridge{fill:none;stroke:#6b5235;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.38;pointer-events:none}
#land .peak{fill:rgba(107,82,53,.12);stroke:#4a3520;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;pointer-events:none}
#land .peakname{fill:#4a3520;font-size:11px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#efe2c0;stroke-width:3px;opacity:.85;pointer-events:none}

/* E5 기록 사진: 브리핑·기록 카드 안 사진, 눌러 크게 보기 */
.photo{margin:4px 0 14px;max-width:62ch}
.photo .ph-img{display:block;width:100%;padding:5px;border:1px solid var(--line);background:#f6efdc;box-shadow:0 1px 3px rgba(34,29,23,.18);cursor:zoom-in}
.photo img{display:block;width:100%;max-height:240px;object-fit:contain;background:var(--paper-2);filter:sepia(.08)}
.photo figcaption{display:grid;gap:2px;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.photo .ph-cap{color:var(--ink)}
.photo .ph-cr{font-size:11px}
.photo a,#photoBox a{color:var(--f-js)}
#photoBox{position:fixed;inset:0;z-index:45;background:rgba(20,16,12,.94);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding-block:calc(var(--sat) + 16px) calc(var(--sab) + 16px);padding-left:max(12px,var(--sal));padding-right:max(12px,var(--sar));font-family:var(--body);cursor:zoom-out}
#photoBox img{max-width:100%;max-height:72vh;object-fit:contain;background:#000}
#photoBox figcaption{display:grid;gap:3px;max-width:620px;font-size:13.5px;line-height:1.6;text-align:center}
#photoBox .ph-cr{font-size:12px;opacity:.8}
#photoBox a{color:#f2c6b8}
#photoBox small{font-size:11px;opacity:.6}
@media (min-width:700px){.photo figcaption{font-size:13.5px}.photo .ph-cr{font-size:12px}.photo img{max-height:320px}}

/* E9 장 표지 사진 썸네일 */
.ch.hascv{grid-template-columns:64px 1fr auto}
.ch .no.cv{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;background:#3a332b;border:1px solid rgba(239,229,203,.28);box-shadow:0 1px 3px rgba(0,0,0,.35);align-self:start}
.ch .no.cv img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:sepia(.3) contrast(1.05)}
.ch .no.cv em{position:absolute;left:3px;bottom:3px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:rgba(28,22,18,.85);color:#f2c6b8;font-style:normal;font-size:12.5px;font-weight:800;line-height:22px;text-align:center;font-family:var(--body)}
.ch.lock .no.cv img,.ch.soon .no.cv img{filter:grayscale(1) brightness(.75)}
@media (max-width:420px){.ch.hascv{grid-template-columns:60px 1fr}.ch .no.cv{width:60px;height:60px;grid-row:span 2;font-size:inherit}}

/* ── E10. 상단 수치 아이콘+게이지, 하단 메뉴 그림 아이콘 ── */
#res{gap:6px}
.gauge{gap:4px}
.gauge span{align-items:center;gap:3px;opacity:1;justify-content:flex-start}
.gauge span em{font-style:normal;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0;flex:1 1 auto}
.gauge span b{font-weight:800;color:var(--paper)}
.gauge .ri{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gauge .ri .fill{fill:var(--c)}
.gauge .ri .thin{stroke-width:1.4;opacity:.8}
.gauge i{height:7px;border-radius:4px;background:rgba(239,229,203,.12);box-shadow:inset 0 0 0 1px rgba(239,229,203,.28);overflow:hidden}
.gauge i::after{border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--c)}
.gauge i::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent calc(25% - .5px),rgba(34,29,23,.55) calc(25% - .5px),rgba(34,29,23,.55) calc(25% + .5px),transparent calc(25% + .5px),transparent calc(50% - .5px),rgba(34,29,23,.55) calc(50% - .5px),rgba(34,29,23,.55) calc(50% + .5px),transparent calc(50% + .5px),transparent calc(75% - .5px),rgba(34,29,23,.55) calc(75% - .5px),rgba(34,29,23,.55) calc(75% + .5px),transparent calc(75% + .5px))}
.gauge.low b{color:#f08a74}
.gauge.low .ri{stroke:#f08a74}
.gauge.chg b{animation:resPop .7s ease-out}
.gauge.chg.up b{--pc:#bfe3a8}.gauge.chg.dn b{--pc:#f08a74}
@keyframes resPop{0%{transform:scale(1.35);color:var(--pc)}100%{transform:scale(1)}}
.gauge span b{display:inline-block;transform-origin:right center}
#cmd button{gap:3px;padding:9px 0 8px}
#cmd .ci{width:23px;height:23px;fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
#cmd .ci .fill{fill:var(--seal);stroke:var(--paper)}
#cmd button:active .ci{transform:translateY(1px)}
@media (max-width:360px){.gauge .ri{display:none}}
@media (prefers-reduced-motion:reduce){.gauge.chg b{animation:none}.gauge i::after{transition:none}}

/* ── E11. 창 전환 효과, 버튼·카드 통일(한지·먹·인주), 기록 카드 도장 ── */
#shade:not([hidden]){animation:fadeIn .2s ease-out}
#cover:not([hidden]){animation:fadeIn .35s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#sheet{perspective:900px}
#sheet .in{position:relative;border-top:0;border-radius:10px 10px 0 0;
  box-shadow:inset 0 3px 0 var(--ink),inset 0 6px 0 var(--paper),inset 0 7px 0 rgba(34,29,23,.45),0 -8px 30px rgba(0,0,0,.3);
  background:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.35),transparent 60%),
    repeating-linear-gradient(93deg,rgba(138,122,94,.035) 0 1px,transparent 1px 9px,rgba(138,122,94,.02) 9px 10px,transparent 10px 23px),
    repeating-linear-gradient(176deg,rgba(138,122,94,.025) 0 1px,transparent 1px 17px),var(--paper);
  transform-origin:50% 100%;animation:pageUp .3s cubic-bezier(.2,.8,.3,1)}
@keyframes pageUp{from{transform:translateY(40px) rotateX(10deg);opacity:0}to{transform:none;opacity:1}}
#sheet .in.swap>*:not(.recstamp){animation:pageTurn .28s ease-out both}
@keyframes pageTurn{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
/* 버튼: 먹 바탕 + 아래 그림자, 누르면 내려감 */
.btn{border-radius:5px;box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s}
.btn:active:not([disabled]){transform:translateY(2px);box-shadow:none}
.btn.seal{box-shadow:inset 0 0 0 2px var(--seal),inset 0 0 0 3px rgba(246,239,217,.4),0 2px 0 rgba(0,0,0,.25)}
.btn.seal:active:not([disabled]){box-shadow:inset 0 0 0 2px var(--seal),inset 0 0 0 3px rgba(246,239,217,.4)}
.btn.ghost{background:rgba(255,255,255,.25);box-shadow:0 2px 0 rgba(34,29,23,.18)}
/* 선택지 카드: 한지 카드 + 왼쪽 먹 띠 */
.opt{border-radius:5px;border-left-width:5px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0)),var(--paper-2);box-shadow:0 2px 0 rgba(34,29,23,.18);transition:transform .08s,box-shadow .08s,border-color .15s}
.opt:active{transform:translateY(2px);box-shadow:none;border-color:var(--seal)}
.quote{border-radius:0 4px 4px 0}
/* 기록 카드 도장 */
.sh-title.rec{padding-right:62px}
.recstamp{position:absolute;top:14px;right:max(16px,var(--sar));width:54px;height:54px;border:3px solid var(--seal);border-radius:6px;color:var(--seal);
  display:grid;place-items:center;transform:rotate(-9deg);opacity:.85;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px rgba(168,50,31,.7);animation:stampIn .45s .25s cubic-bezier(.3,1.6,.5,1) both}
.recstamp span{font-weight:900;font-size:17px;line-height:1;letter-spacing:.02em;writing-mode:vertical-rl;text-orientation:upright}
@keyframes stampIn{0%{transform:rotate(-9deg) scale(2.2);opacity:0}60%{opacity:.95}100%{transform:rotate(-9deg) scale(1);opacity:.85}}
@media (prefers-reduced-motion:reduce){#shade:not([hidden]),#cover:not([hidden]),#sheet .in,#sheet .in.swap>*:not(.recstamp),.recstamp{animation:none}.btn,.opt{transition:none}}

/* ── G 시안(전술 지도 style v2): 위 정보판·지도 액자·선택 부대 카드·피해 숫자 ── */
#tac.v2{background:radial-gradient(120% 80% at 50% 40%,#3a3024,#211a12);gap:6px}
#tac.v2 .tac-top{background:linear-gradient(#f1e7cb,#e2d3ab);color:#2a2118;border:2px solid #5a4426;border-radius:8px;padding:6px 8px 6px 12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.35)}
#tac.v2 .tac-top b{font-size:18px;letter-spacing:-.01em}
#tac.v2 .tac-top small{opacity:.7}
#tac.v2 .tac-turn{background:#2a2118;color:#f3e7c4;border:0;padding:6px 10px;border-radius:6px}
#tac.v2 .tac-goal{background:rgba(20,14,8,.45);border:1px solid rgba(239,229,203,.18);border-left:3px solid #c0442c;border-radius:6px;font-size:12.5px}
#tac.v2 .tac-board{position:relative;width:100%;max-width:600px;overflow:hidden}
#tac.v2 .tac-board svg{overflow:visible;border:3px solid #6a5232;border-radius:6px;box-shadow:0 0 0 1px #2a2118,0 4px 14px rgba(0,0,0,.55)}
#tac.v2 .tac-info{min-height:0}
#tac.v2 .tac-log{min-height:1.5em;font-size:12.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tac.v2 .tac-btns{grid-template-columns:1fr 1.5fr 1fr 1fr}
#tac.v2 .tbtn{padding:10px 0}
#tac.v2 #tEnd{font-size:15.5px;box-shadow:0 2px 0 #6e1d12}
.ucard{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;min-height:64px;background:linear-gradient(#f1e7cb,#e2d3ab);color:#2a2118;border:2px solid #5a4426;border-radius:8px;padding:6px 10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.ucard.none{grid-template-columns:1fr;font-size:13px;line-height:1.5;color:#4a3a28}
.ucard.none b{color:#2f5d9a}
.ucard .pic{width:48px;height:48px;background:#f8f1dc;border-radius:6px;border:1px solid #8a7350}
.ucard.me .pic{box-shadow:inset 0 -4px 0 #2f5d9a}.ucard.foe .pic{box-shadow:inset 0 -4px 0 #b03a2a}
.uc-n{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.uc-n b{font-size:15px;font-weight:800}
.uc-n .tag{font-size:11.5px;color:#6a5638}
.uc-hp{position:relative;height:12px;background:rgba(40,28,14,.25);border-radius:6px;overflow:hidden;margin:4px 0}
.uc-hp i{display:block;height:100%;border-radius:6px}
.uc-hp span{position:absolute;inset:0;font-size:10px;font-weight:800;line-height:12px;text-align:center;color:#fff;text-shadow:0 0 2px #000}
.uc-st{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:#4a3a28}
.uc-st b{font-weight:800;color:#2a2118}
.uc-st .tl{color:#6a5638;flex-basis:100%}
.uc-st em{font-style:normal;color:#b03a2a;font-weight:700}
.tac-dmg{position:absolute;pointer-events:none;z-index:2;font-weight:900;font-size:19px;line-height:1;color:#fff;background:#a8321f;border:2px solid #f6efd9;border-radius:7px;padding:3px 7px 4px;box-shadow:0 2px 0 #4a160c,0 3px 8px rgba(0,0,0,.4);transform:translate(-50%,-50%);animation:dmgUp 1.1s ease-out forwards;white-space:nowrap}
.tac-dmg.sm{font-size:14px;background:#4a3a28;padding:2px 6px 3px}
.tac-dmg.crit{font-size:20px;background:#c9971c;color:#2a1208;box-shadow:0 2px 0 #6a4a0c,0 0 0 3px rgba(242,194,48,.35),0 3px 10px rgba(0,0,0,.45)}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}14%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}24%{transform:translate(-50%,-85%) scale(1)}70%{opacity:1;transform:translate(-50%,-120%) scale(1)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
@media (prefers-reduced-motion:reduce){.tac-dmg{animation:none;display:none}}

/* ── G3: 작전 지시 창(3줄 요약·부대 카드 가로 스크롤)·승리/패배 창 v2 ── */
.tac-card.orders{max-width:400px;max-height:90%;padding:16px 14px 14px;gap:10px;background:linear-gradient(#f4ebd2,#e6d8b2);border:2px solid #5a4426;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 6px 20px rgba(0,0,0,.5)}
.orders .o-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1.5px solid #5a4426;padding-bottom:6px}
.orders .o-head b{font-size:20px;font-weight:800}
.orders .o-head small{font-size:12px;color:#6a5638;text-align:right}
.orders .sum{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.orders .sum li{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:start}
.orders .sum li>span{background:#2a2118;color:#f3e7c4;font-size:11.5px;font-weight:800;text-align:center;border-radius:4px;padding:3px 0;margin-top:2px}
.orders .sum li:nth-child(2)>span{background:var(--seal)}
.orders .sum p{margin:0;font-size:14px;line-height:1.55;text-align:left}
.orders .sum p b{font-size:14.5px;font-weight:800;color:#2a2118}
.orders .sum p.live{border-left:0;padding:4px 8px;font-size:14px}
.orders details.more{font-size:13.5px;background:rgba(90,68,38,.08);border-radius:6px;padding:6px 10px}
.orders details.more summary{cursor:pointer;font-weight:800;color:#5a4426;font-size:13px}
.orders details.more .hints{margin-top:6px;font-size:13.5px}
.orders .sub{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.orders .sub small{font-weight:600;color:#6a5638;letter-spacing:0}
.orders .roster{display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -14px;padding-left:14px;padding-right:14px;scroll-padding:0 14px;-webkit-overflow-scrolling:touch}
.orders .roster li{flex:0 0 136px;scroll-snap-align:start;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto 1fr;gap:4px 6px;align-content:start;background:#f8f1dc;border:1.5px solid #8a7350;border-radius:8px;padding:8px;font-size:12px;line-height:1.4;box-shadow:inset 0 -4px 0 #2f5d9a}
.orders .roster li.foe{box-shadow:inset 0 -4px 0 #b03a2a}
.orders .roster li>svg{grid-row:1;grid-column:1;background:#efe4c4;border-radius:6px}
.orders .roster .nm{grid-row:1;grid-column:2;align-self:center;min-width:0;margin:0;text-align:left}
.orders .roster .sd{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:#2f5d9a;border-radius:3px;padding:0 5px;line-height:16px}
.orders .roster li.foe .sd{background:#b03a2a}
.orders .roster .nm b{display:block;font-size:14px;font-weight:800;line-height:1.25;word-break:keep-all}
.orders .roster .st{grid-column:1/-1;margin:2px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;text-align:center}
.orders .roster .st span,.res .r-tiles span{display:block;background:rgba(90,68,38,.1);border-radius:4px;padding:2px 0}
.orders .roster .st i,.res .r-tiles i{display:block;font-style:normal;font-size:10px;color:#6a5638;line-height:1.3}
.orders .roster .st em{display:block;font-style:normal;font-size:14px;font-weight:800;color:#2a2118;line-height:1.2}
.orders .roster li small{grid-column:1/-1;font-size:11.5px;color:var(--ink-2);word-break:keep-all}
.orders .foot{font-size:11.5px;text-align:center}
.tac-card.res{position:relative;max-width:330px;padding:22px 18px 16px;gap:10px;background:linear-gradient(#f4ebd2,#e6d8b2);border:2px solid #5a4426;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 6px 20px rgba(0,0,0,.5)}
.res .r-t{font-size:12px;color:#6a5638}
.res>b{font-size:30px;font-weight:900;letter-spacing:.12em;margin-top:-4px}
.res.win>b{color:var(--seal)}.res.lose>b{color:#3a2f22}
.res p{font-size:14.5px;line-height:1.6;word-break:keep-all}
.res .r-stamp{position:absolute;top:-16px;right:12px;width:56px;height:56px;border:3px solid var(--seal);border-radius:6px;background:#f6efd9;color:var(--seal);display:grid;place-items:center;transform:rotate(-8deg);box-shadow:inset 0 0 0 2px #f6efd9,inset 0 0 0 3.5px rgba(168,50,31,.7),0 2px 6px rgba(0,0,0,.3);animation:stampIn .45s .2s cubic-bezier(.3,1.6,.5,1) both}
.res.lose .r-stamp{border-color:#3a2f22;color:#3a2f22;box-shadow:inset 0 0 0 2px #f6efd9,inset 0 0 0 3.5px rgba(58,47,34,.6),0 2px 6px rgba(0,0,0,.3);transform:rotate(6deg);animation-name:stampIn2}
.res .r-stamp span{font-weight:900;font-size:17px;line-height:1;writing-mode:vertical-rl;text-orientation:upright}
@keyframes stampIn2{0%{transform:rotate(6deg) scale(2.2);opacity:0}100%{transform:rotate(6deg) scale(1);opacity:1}}
.res .r-tiles{display:flex;gap:6px;justify-content:center;margin:0}
.res .r-tiles span{flex:1;border:1px solid rgba(90,68,38,.25);border-radius:6px;padding:4px 0}
.res .r-tiles i{font-size:11px}
.res .r-tiles em{display:block;font-style:normal;font-size:18px;font-weight:900;color:#2a2118;line-height:1.3}
.res .r-tiles em small{font-size:12px;font-weight:700;color:#6a5638}
@media (prefers-reduced-motion:reduce){.res .r-stamp{animation:none}}

/* ── F1: 장 끝 한국사 문제 ── */
.qhelp{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.qscore{margin:12px 0 4px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--ink);color:var(--paper);border-radius:6px;padding:10px 14px}
.qscore b{font-size:20px;font-weight:900}
.qscore small{font-size:13px;color:#f2c230;font-weight:800}
.quiz{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px}
.qq{border:1.5px solid rgba(42,33,24,.25);border-radius:8px;padding:12px;background:rgba(255,255,255,.35)}
.qq.ok{border-color:#2f7a4a}.qq.no{border-color:var(--seal)}
.qn{margin:0 0 8px;font-size:15px;line-height:1.6;font-weight:700;word-break:keep-all;white-space:pre-line}
.qn b{color:var(--seal);margin-right:2px}
.qopts{display:grid;gap:6px}
.qopt{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:start;text-align:left;width:100%;padding:9px 10px;border:1.5px solid rgba(42,33,24,.3);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;word-break:keep-all;cursor:pointer}
.qopt i{font-style:normal;font-weight:800;color:var(--ink-2)}
.qopt.on{border-color:var(--ink);background:#efe2bd;box-shadow:inset 3px 0 0 var(--ink);font-weight:700}
.qopt[disabled]{cursor:default;opacity:.75}
.qopt.ans{opacity:1;border-color:#2f7a4a;background:#dcebd6;box-shadow:inset 3px 0 0 #2f7a4a;font-weight:700}
.qopt.bad{opacity:1;border-color:var(--seal);background:#f3d6cc;box-shadow:inset 3px 0 0 var(--seal);text-decoration:line-through}
.qex{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink);word-break:keep-all}
.qex b{display:inline-block;margin-right:4px;color:#2f7a4a}
.qq.no .qex b{color:var(--seal)}
.qex small{display:block;margin-top:2px;font-size:12px;color:var(--ink-2)}
.qnote{display:block;margin-top:3px;font-style:normal;font-weight:400;font-size:12.5px;line-height:1.5;color:var(--ink-2);text-decoration:none}
.qopt.bad{text-decoration:none}.qopt.bad .qtx{text-decoration:line-through}
.qopt.ans .qnote{color:#24603a;font-weight:700}
.qjump{margin:8px 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.qjump span{flex:1 0 100%;font-weight:700}
.qj{min-width:40px;min-height:36px;border-radius:6px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:800;font-size:14px;cursor:pointer}
.qj.ok{border-color:#2f7a4a;color:#2f7a4a}.qj.no{border-color:var(--seal);color:var(--seal)}
.qq{scroll-margin-top:8px}
.ch .st .qz{display:block;font-style:normal;color:#f2c230;font-weight:800;margin-top:2px}