:root{
  --ink:#1c1a17; --ink-2:#4a453e; --paper:#f4efe4; --paper-2:#e9e1d0; --line:#c9bda4;
  --goryeo:#1f7a6b; --hubaekje:#a63a2b; --silla:#a8862b; --taebong:#3b3550; --hojok:#8a8175; --none:#cfc7b6;
  --fact:#1d4f8c; --if:#6b3fa0; --game:#6b6259;
  --gold:#b8860b; --bad:#a6382b; --good:#1f7a55;
  --tap:44px; --r:10px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
button{font-family:inherit;font-size:1rem;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:var(--r);min-height:var(--tap);padding:10px 14px}
button:hover:not(:disabled){background:var(--paper-2)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:3px solid var(--fact);outline-offset:2px}
h1,h2,h3{margin:0 0 .4em;line-height:1.25;font-weight:700}
#app{height:100%;display:flex;flex-direction:column}

/* ── 화면 전환 */
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.center{align-items:center;justify-content:center;text-align:center;gap:18px;padding:24px}
.stack{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:560px;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.muted{color:var(--ink-2);font-size:.92rem}
.title{font-size:clamp(2rem,6vw,3.2rem);letter-spacing:.06em}
.sub{font-size:1.05rem;color:var(--ink-2)}

/* ── HUD */
.hud{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--paper-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.hud .pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.95rem;white-space:nowrap}
.hud .pill b{font-variant-numeric:tabular-nums}
.hud .spacer{flex:1}
.ryeong{font-weight:700;color:var(--gold)}

/* ── 본판 */
.board{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0}
@media (max-width:900px){.board{grid-template-columns:1fr;grid-template-rows:1fr auto}}
.mapwrap{position:relative;overflow:hidden;background:#efe7d6}
#map{width:100%;height:100%;display:block;touch-action:manipulation}
.side{border-left:1px solid var(--line);background:#fbf8f1;display:flex;flex-direction:column;min-height:0}
@media (max-width:900px){.side{border-left:none;border-top:1px solid var(--line);max-height:44vh}}
.side h3{padding:10px 12px 0;font-size:.95rem;color:var(--ink-2)}
.log{flex:1;overflow-y:auto;padding:4px 12px 12px;font-size:.9rem;-webkit-overflow-scrolling:touch}
.log div{padding:4px 0;border-bottom:1px dashed var(--line)}
.log .battle{color:var(--bad)} .log .submit{color:var(--good);font-weight:600}
.log .event{color:var(--fact)} .log .revolt{color:#8a5a00}

/* ── 카드 트레이 */
.tray{display:flex;gap:8px;padding:10px;background:var(--paper-2);border-top:1px solid var(--line);overflow-x:auto}
.card{flex:0 0 150px;min-height:120px;display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;position:relative}
.card .gate{font-size:.72rem;color:#fff;background:var(--ink-2);border-radius:4px;padding:1px 6px;align-self:flex-start}
.card .gate.내정{background:#5a7a3a}.card .gate.인재{background:#2f6b8a}.card .gate.외교{background:#8a6a2f}.card .gate.군사{background:#8a3a2f}
.card .nm{font-weight:700}
.card .ds{font-size:.82rem;color:var(--ink-2);line-height:1.35}
.card .cost{position:absolute;top:8px;right:8px;font-weight:700;color:var(--gold)}
.card[aria-disabled="true"]{opacity:.45}
.card.sel{outline:3px solid var(--fact);outline-offset:1px}

/* ── 모달 */
.modal{position:fixed;inset:0;background:rgba(28,26,23,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:14px;max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.sheet.wide{max-width:820px}
.quizstem{font-size:1.12rem;white-space:pre-wrap;margin:10px 0 16px;line-height:1.6}
.choices{display:grid;gap:10px}
.choices button{text-align:left;min-height:52px;font-size:1.02rem}
.choices button.ok{border-color:var(--good);background:#eaf6f0}
.choices button.no{border-color:var(--bad);background:#fbeceb}
.timer{height:8px;background:var(--paper-2);border-radius:999px;overflow:hidden;margin:6px 0 2px}
.timer i{display:block;height:100%;background:var(--gold);transition:width .25s linear}
.tag{font-size:.75rem;padding:2px 8px;border-radius:999px;color:#fff;margin-right:6px;white-space:nowrap}
.tag.fact{background:var(--fact)}.tag.if{background:var(--if)}.tag.game{background:var(--game)}
.src{font-size:.8rem;color:var(--ink-2);margin-top:10px}
.evbody{white-space:pre-wrap;line-height:1.7;margin:8px 0 14px}

/* ── 지도 요소 */
.node{cursor:pointer}
.node .hit{fill:transparent}
.node .dot{stroke:#fff;stroke-width:2}
.node text{font-size:13px;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none;font-family:var(--font)}
.node.sel .dot{stroke:#111;stroke-width:3}
.node.tgt .dot{stroke:#b8860b;stroke-width:4}
.edge{stroke:#b9ad93;stroke-width:1.5;fill:none}
.edge.sea{stroke-dasharray:5 5;stroke:#7fa6b8}
.march{stroke:#a63a2b;stroke-width:3;fill:none;stroke-dasharray:6 6}
.legend{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.8rem}
.legend span{display:inline-flex;align-items:center;gap:5px;margin-right:10px}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.toast{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;background:rgba(28,26,23,.92);color:#fff;padding:10px 16px;border-radius:999px;font-size:.95rem;z-index:20;max-width:92%}
.hint{padding:8px 12px;background:#fffbe9;border-bottom:1px solid var(--line);font-size:.92rem}
table.stat{width:100%;border-collapse:collapse;font-size:.92rem}
table.stat th,table.stat td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
table.stat td.n{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:10px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--goryeo)}

.zoomctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoomctl button{width:44px;height:44px;min-height:44px;padding:0;font-size:1.1rem;background:rgba(255,255,255,.94)}
.node.unrest .dot{stroke:#b8860b;stroke-dasharray:3 3}

/* 군의 모달은 «옆»에 선다 — 문항을 푸는 동안 지도에서 다른 나라가 움직이는 것이 보여야 한다 */
.modal.side-sheet{justify-content:flex-end;align-items:center;background:rgba(28,26,23,.28);padding-right:20px}
.modal.side-sheet .sheet{max-width:440px}
@media (max-width:900px){
  .modal.side-sheet{align-items:flex-end;justify-content:center;padding:0 0 8px}
  .modal.side-sheet .sheet{max-width:none;width:100%;border-radius:14px 14px 0 0;max-height:62vh}
}

/* ── 그림 에셋 (있을 때만 붙는다 — 없으면 이 규칙은 아무것도 안 한다) */
.titleart { width: min(560px, 82vw); border-radius: 14px; margin-bottom: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.card .art { position: absolute; inset: 0; background-size: cover; background-position: center 38%; opacity: .26; border-radius: inherit; pointer-events: none; }
.card { position: relative; overflow: hidden; }
.card .gate, .card .cost, .card .nm, .card .ds { position: relative; }
.face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: 0 0 auto; margin-right: 10px; background: #e9e3d8; }
.face.sm { width: 26px; height: 26px; margin-right: 6px; vertical-align: middle; }
.personrow { display: flex; align-items: center; text-align: left; }