:root{color-scheme:dark;--bg:#10191c;--panel:#152125;--line:#ffffff16;--muted:#a5b1af;--ink:#e9e8df;--gold:#d0ad6d;--green:#88c6af;--red:#dc8c7e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Malgun Gothic','맑은 고딕',sans-serif;font-size:16px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer;color:var(--ink);background:#ffffff06;border:1px solid var(--line);padding:9px 13px;border-radius:5px;transition:background .15s,border-color .15s}button:hover{background:#ffffff12;border-color:#d0ad6d70}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Batang,'바탕',serif}h1{font-size:24px;letter-spacing:3px}h2{font-size:25px}h3{font-size:19px}.top{min-height:88px;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:16px;flex-shrink:0}.seal{background:#924b3c;color:#f7e5c5;font-family:Batang,serif;writing-mode:vertical-rl;border:3px double #d88d6f;font-size:22px;letter-spacing:2px;padding:4px;line-height:1.2}.eyebrow{font-size:12px;color:var(--gold);letter-spacing:2px}.filebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.filebar button{font-size:14px}.filebar #saveStatus{font-size:12px;color:var(--muted);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px}.layout{display:grid;grid-template-columns:210px minmax(400px,1fr) 310px;min-height:calc(100vh - 89px)}.realm{padding:28px 18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#111c20}.realm h2{font-size:24px;margin-top:6px}.realm>p{color:var(--muted);font-size:14px}.turn{margin:26px 0 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.turn strong{font-size:19px;color:var(--gold)}.primary{background:var(--gold);color:#182125;font-weight:700;border-color:var(--gold)}.primary:hover{background:#e2c18a}.primary span{float:right}.hint{font-size:12px;color:var(--muted);margin-top:8px}.sectionTitle{font-size:14px;color:var(--ink);display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin:24px 0 10px}.sectionTitle span{font-size:12px;color:var(--muted)}#cityList{max-height:400px;overflow:auto}.cityRow{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;text-align:left;font-size:14px;padding:10px 8px}.cityRow small{color:var(--muted)}.cityRow.active{background:#d0ad6d13;color:var(--gold);border-left:2px solid var(--gold);border-radius:0}.realmBottom{margin-top:auto;padding-top:25px}.realmBottom button{width:100%;font-size:14px}.center{padding:20px;min-width:0}.resources{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:20px;gap:10px}.resource{padding:10px 14px;border-right:1px solid var(--line)}.resource:last-child{border:0}.resource span{color:var(--muted);font-size:13px;display:block}.resource strong{font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.resource small{font-size:12px;color:var(--gold);margin-left:5px}.mapFrame{border:1px solid #d0ad6d38;border-radius:7px;overflow:hidden;position:relative;background:#0b1519}.mapHeading{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#101c20}.mapHeading h2{font-size:26px;letter-spacing:4px;margin-top:2px}.legend{display:flex;gap:12px;color:var(--muted);font-size:12px}.legend span:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#a4a8a0;margin-right:5px}.legend .own:before{background:var(--green)}.legend .enemy:before{background:var(--red)}.mapScroll{overflow:auto}.map{position:relative;aspect-ratio:820/1080;width:100%;max-width:820px;min-width:620px;margin:0 auto;isolation:isolate;overflow:hidden}.mapArt{position:absolute;width:100%;height:100%;object-fit:contain;opacity:1;z-index:-2}.map:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 100px 20px #07131699;pointer-events:none;z-index:-1}#roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#roads line{stroke:#e2c38b42;stroke-width:1.4;stroke-dasharray:4 5}#roads line.highlight{stroke:#ebcb8eaa;stroke-width:2}.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;padding:4px 8px;border:none;min-width:52px;background:#101b20ba;box-shadow:0 2px 8px #0005;border-radius:3px;line-height:1.3;z-index:2}.node b{font-size:13px;white-space:nowrap;font-weight:500}.node small{font-size:11px;color:#c2c5bc}.node:before{display:none;content:'';width:6px;height:6px;background:#a4a8a0;border:1px solid #fff9;border-radius:50%;position:absolute;top:-8px}.node.owner0{color:#b1e8d4;border-bottom:2px solid #8fc9b3}.node.owner0:before{background:var(--green)}.node.owner1,.node.owner2{color:#f0b1a4;border-bottom:2px solid #b97a6d}.node.owner1:before,.node.owner2:before{background:var(--red)}.node.selected{outline:1px solid var(--gold);background:#322f24;box-shadow:0 0 25px #d0ad6d35;z-index:3}.mapWatermark{position:absolute;top:30%;left:8%;writing-mode:vertical-rl;font:32px Batang,serif;letter-spacing:16px;color:#dfc89465}.mapFoot{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:10px 15px;border-top:1px solid var(--line)}.chronicle .sectionTitle{margin-top:18px}#log{max-height:150px;overflow:auto;font-size:13px}#log p{padding:6px 0;border-bottom:1px solid #ffffff08;display:flex;gap:16px}#log time{color:var(--gold);min-width:40px}.details{background:var(--panel);padding:24px 20px;border-left:1px solid var(--line);min-width:0}.ownerLabel{font-size:13px;color:var(--green);margin:5px 0 18px}.cityTitle{display:flex;justify-content:space-between;align-items:center}.cityTitle span{font-size:12px;color:var(--gold)}.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.statGrid label{font-size:12px;color:var(--muted);display:block}.statGrid strong{font-size:19px;font-weight:500}.loyalty{margin:20px 0;font-size:13px}.loyalty div{display:flex;justify-content:space-between}.meter{height:4px;background:#ffffff12;margin-top:8px}.meter i{display:block;height:100%;background:var(--gold)}.tabs{display:flex;border-bottom:1px solid var(--line);margin-top:22px}.tabs button{flex:1;border:0;border-radius:0;font-size:14px;padding:10px 0}.tabs .active{border-bottom:2px solid var(--gold);color:var(--gold)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.action{padding:13px 9px;text-align:left;font-size:14px}.action small{display:block;color:var(--muted);font-size:12px;margin-top:5px}.general{border-bottom:1px solid var(--line);padding:14px 0}.general header{display:flex;justify-content:space-between;align-items:center;font-size:14px}.general header small{color:var(--gold);font-size:12px}.general p{font-size:12px;color:var(--muted);margin-top:6px}.general button{font-size:12px;padding:4px 8px}.empty{color:var(--muted);font-size:14px;padding:20px 0}.income{font-size:12px;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.income strong{color:var(--gold);font-weight:400}.bad{color:#eba493!important}.adjacent{margin-top:20px}.adjacent button{font-size:12px;margin:3px;padding:5px 8px}dialog{color:var(--ink);background:#172329;border:1px solid #d0ad6d60;border-radius:10px;padding:25px;width:min(680px,92vw);max-height:88vh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#050e13cc;backdrop-filter:blur(5px)}.dialogHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialogHead h2{font-size:25px}.dialogHead button{border:0}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.kingdom{text-align:left;padding:17px}.kingdom strong{display:block;font-family:Batang,serif;font-size:21px;color:var(--gold)}.kingdom span{font-size:13px;color:var(--muted)}.formGrid{display:grid;gap:15px}.formGrid label{font-size:14px}.formGrid input,.formGrid select{width:100%;padding:11px;margin-top:7px;background:#0e1b20;border:1px solid #ffffff25;color:var(--ink);border-radius:4px}.formGrid p{font-size:14px;color:var(--muted)}.formGrid button{margin-top:6px}.helpText{font-size:14px;line-height:1.9}.helpText h3{margin-top:20px;color:var(--gold)}.helpText ul{padding-left:22px}.helpText p{margin-bottom:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:min(700px,90vw);background:#dfc391;color:#122026;border:1px solid #f5ddae;padding:12px 20px;border-radius:6px;box-shadow:0 10px 30px #0006;z-index:10;font-size:14px;opacity:0;pointer-events:none;transition:opacity .15s}#toast.show{opacity:1}.resultBanner{padding:15px;background:#d0ad6d18;color:var(--gold);border:1px solid #d0ad6d50;margin-bottom:15px} @media(min-width:1600px){.layout{grid-template-columns:230px minmax(400px,1fr) 340px}.node b{font-size:14px}}@media(max-width:1120px){.layout{grid-template-columns:180px minmax(340px,1fr)}.details{grid-column:1/-1;border-top:1px solid var(--line)}.details .statGrid{grid-template-columns:repeat(4,1fr)}.actions{grid-template-columns:repeat(4,1fr)}.top{padding:15px}.filebar #saveStatus{display:none}.center{padding:14px}.resource{padding:8px}.resource strong{font-size:19px}}@media(max-width:650px){.top{align-items:flex-start;flex-direction:column;gap:14px}.filebar{width:100%}.filebar button{flex:1;padding:8px 6px;font-size:12px}.layout{display:flex;flex-direction:column}.realm{padding:16px;border-bottom:1px solid var(--line);display:block}.realm h2{display:inline-block;margin-right:15px}.realm>p{display:inline}.realm>.eyebrow,.realm>.hint,.realm>.sectionTitle,#cityList,.realmBottom .hint{display:none}.turn{margin:10px 0;display:inline-flex;gap:20px;width:58%}#endTurn{width:40%;padding:8px}.realmBottom{padding-top:8px}.realmBottom button{font-size:12px;padding:5px}.resources{gap:0}.resource strong{font-size:17px}.resource{padding:5px}.resource small{display:none}.resource span{font-size:12px}.mapHeading{padding:12px}.mapHeading h2{font-size:22px}.legend{gap:6px;font-size:11px}.mapFoot{display:block}.mapFoot span{display:block}.details{padding:20px}.actions{grid-template-columns:repeat(2,1fr)}.choices{grid-template-columns:1fr 1fr}.kingdom{padding:12px}.kingdom strong{font-size:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Geographic anchors stay on the shared coastline projection. Labels may offset. */
#roads .labelLeader{stroke:#c8b77a;stroke-width:.8;stroke-dasharray:none;opacity:.7}#roads .geoPin{fill:#b7bbaa;stroke:#142129;stroke-width:1;pointer-events:all;cursor:pointer}#roads .geoPin.owner0{fill:#9fe1c1}#roads .geoPin.owner1,#roads .geoPin.owner2{fill:#e5a28e}#roads .geoPin.selected{stroke:#efcd81;stroke-width:2}.geoNote{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--muted)}.geoNote strong{color:var(--gold);font-weight:500}.geoNote p{margin:7px 0}.geoNote a,.helpText a{color:#b9dacd}.mapScroll{background:#10232c}.map:after{box-shadow:inset 0 0 50px 8px #07131644}

/* Interactive camera: the full artwork fills the viewport at every size. */
.mapScroll{position:relative;overflow:hidden;height:clamp(480px,72vh,900px);width:100%;touch-action:none;cursor:grab;user-select:none;background:#101c20}.mapScroll.dragging{cursor:grabbing}.mapScroll:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.map{position:absolute;left:0;top:0;width:1536px;height:1024px;min-width:0;max-width:none;max-height:none;aspect-ratio:auto;margin:0;transform-origin:0 0;will-change:transform}.mapArt{pointer-events:none}.node{transform:translate(-50%,-50%) scale(var(--label-scale,1))}.mapTools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;background:#101c20;border-top:1px solid var(--line)}.mapTools button{font-size:13px;padding:6px 10px}.mapTools output{font-size:13px;color:var(--gold);min-width:44px;text-align:center}.mapTools span{margin-left:auto;color:var(--muted);font-size:12px}@media(max-width:650px){.mapScroll{height:65vh;min-height:400px}.mapTools span{width:100%;margin:0}}
/* 전역 상단 크롬(로고·메뉴·로그인 정보)이 게임 화면 위에 얹힌다. sticky 는 site-chrome.css 기본값 유지 */
.filebar .fileOnly{display:inline-block}.filebar.hideFile .fileOnly{display:none}
.slotHint{font-size:13px;color:var(--muted);margin:0 0 14px}
.slotRow{display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:8px;background:#ffffff05}
.slotRow.empty{opacity:.7}
.slotRow b{font-family:Batang,'바탕',serif;color:var(--gold);font-size:15px}
.slotRow>span{font-size:13px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.slotRow>span small{color:#7f8b89}
.slotRow .slotBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.slotRow .slotBtns button{font-size:13px;padding:6px 10px}
.loginCta{display:inline-block;background:var(--gold);color:#2a2114;font-weight:700;border-radius:5px;padding:10px 16px;text-decoration:none}
.loginCta:hover{filter:brightness(1.06)}
@media(max-width:520px){.slotRow{grid-template-columns:1fr;}.slotRow .slotBtns{justify-content:flex-start}}

/* 영토 목록 — 세로 한 줄 대신 칩 격자. 오른쪽 숫자는 남은 명령 수 (0 이면 흐리게) */
@media(min-width:651px){#cityList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:none}}
@media(max-width:650px){.resource em{display:none}}
.cityRow{gap:4px;padding:5px 6px 5px 9px;font-size:13px;border:1px solid var(--line);border-radius:4px;line-height:1.4}
.cityRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cityRow small{flex-shrink:0;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;font-size:11px;background:#88c6af24;color:var(--green)}
.cityRow.spent small{background:#ffffff0d;color:#7f8b89}
.cityRow.active{border:1px solid #d0ad6d90;border-radius:4px;background:#d0ad6d18}
.resource em{font-style:normal}

/* PC — 게임 전체를 한 화면에 고정해 페이지 스크롤을 없앤다.
   지도 위 휠은 확대/축소로 쓰이므로, 페이지가 스크롤되면 둘이 부딪힌다.
   지도는 남는 높이를 모두 차지하고, 좌·우 패널만 필요할 때 자기 안에서 스크롤한다. */
@media(min-width:1121px) and (min-height:620px){
 body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .top{min-height:0;padding:6px 24px;flex-shrink:0}
 .brand{gap:12px}
 .seal{font-size:15px;padding:2px;letter-spacing:1px}
 .brand h1{font-size:19px;letter-spacing:2px;line-height:1.25}
 .brand .eyebrow{font-size:11px}
 .filebar button{padding:6px 11px;font-size:13px}
 .layout{flex:1;min-height:0;grid-template-columns:236px minmax(400px,1fr) 320px}
 .realm,.details,#log{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d0ad6d40 transparent}
 .realm{min-height:0;overflow-y:auto;padding:16px 14px}
 .realm h2{font-size:21px;margin-top:2px}
 .turn{margin:12px 0 10px}
 .sectionTitle{padding-bottom:7px;margin:16px 0 8px}
 #cityList{grid-template-columns:repeat(3,minmax(0,1fr))}
 .realmBottom{padding-top:14px}
 .center{min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 14px;overflow:hidden}
 .resources{flex-shrink:0;margin:0;gap:0;border:1px solid var(--line);border-radius:6px;background:#ffffff04}
 .resource{padding:6px 14px;line-height:1.3;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
 .resource span{font-size:12px}
 .resource em{display:none}
 .resource strong{font-size:18px}
 .resource small{margin-left:-4px}
 .mapFrame{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto minmax(0,1fr)}
 .mapHeading{grid-column:1;grid-row:1;padding:7px 16px;gap:16px;border-bottom:1px solid var(--line)}
 .mapHeading .eyebrow{display:none}
 .mapHeading h2{font-size:18px;letter-spacing:3px;margin:0;white-space:nowrap}
 .mapTools{grid-column:2;grid-row:1;justify-content:flex-end;border-top:0;border-bottom:1px solid var(--line);padding:7px 14px}
 .mapTools span{order:-1;margin:0 auto 0 0}
 .mapScroll{grid-column:1/-1;grid-row:2;height:auto;min-height:0}
 .mapFoot{display:none}
 .chronicle{flex-shrink:0}
 .chronicle .sectionTitle{margin:0 0 4px;padding-bottom:5px}
 #log{height:clamp(56px,11vh,150px);max-height:none}
 #log p{padding:3px 0}
 .details{min-height:0;overflow-y:auto;padding:16px 18px}
 .cityTitle h2{font-size:22px}
 .ownerLabel{margin:2px 0 10px}
 .statGrid{gap:6px 14px}
 .statGrid strong{font-size:17px}
 .loyalty{margin:12px 0}
 .tabs{margin-top:12px}
 .tabs button{padding:8px 0}
 .actions{margin-top:10px;gap:6px}
 .action{padding:8px 9px;font-size:13px;line-height:1.35}
 .action small{margin-top:2px}
 .details .hint{margin-top:6px}
 .general{padding:9px 0}
 .income{margin-top:12px;padding-top:10px;line-height:1.55}
 .adjacent{margin-top:12px}
 .geoNote{margin-top:12px;padding-top:10px;line-height:1.5}
}
/* 가운데 열이 좁은 폭에선 지도 제목·조작 안내를 빼서 도구줄을 한 줄로 유지 */
@media(min-width:1121px) and (min-height:620px) and (max-width:1399px){.mapHeading h2{display:none}.mapTools span{display:none}}
@media(min-width:1400px) and (min-height:620px) and (max-width:1699px){.mapTools span{display:none}}
@media(min-width:1600px) and (min-height:620px){.layout{grid-template-columns:250px minmax(400px,1fr) 350px}}

/* ════ v2 — 세력색 · 숫자패드 · 명령 연출 ════ */
:root{--f0:#3f8f73;--f1:#b0453a;--f2:#5a5aa8;--f3:#8a8a80}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:4px;background:#0b1316;border:1px solid #d0ad6d70;border-bottom-width:2px;color:var(--gold);font:600 11px/1 ui-monospace,Consolas,monospace}
.legend span:before{background:var(--fc)!important}
.node.owner2{color:#c3c3f3;border-bottom:2px solid #7d7dc9}
#roads .geoPin.owner2{fill:#9c9ce0}
#roads .terr{opacity:.16;stroke:none;mix-blend-mode:screen;animation:terr 4s ease-in-out infinite}
@keyframes terr{50%{opacity:.26}}
#roads line.front{stroke:#ff7a5c88;stroke-width:2;stroke-dasharray:3 4;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-14}}
.node .ready{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9fe1c1;box-shadow:0 0 6px #9fe1c1;margin-right:4px;vertical-align:middle;animation:pulse 1.6s ease-in-out infinite}
.node.selected{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 34px #d0ad6d70}}
.node.guarding:after{content:'🛡';position:absolute;top:-14px;right:-8px;font-size:12px}
#mapFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#mapFx .trail path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1s ease-out forwards,fade 2.6s ease-in forwards;filter:drop-shadow(0 0 6px currentColor)}
#mapFx .trail.war{color:#ff6a4a}#mapFx .trail.war path{stroke:#ff6a4a}
#mapFx .trail.march path{stroke:#9fe1c1}#mapFx .trail.scheme path{stroke:#c49cf0;stroke-dasharray:4 6}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{0%,70%{opacity:1}100%{opacity:0}}
#mapFx .strike circle{fill:#ff6a4a55;stroke:#ffd27a;stroke-width:2;animation:boom 1.2s ease-out 3}
#mapFx .strike .ring{fill:none;animation-delay:.3s}#mapFx .strike text{fill:#ffe9b0;font:700 22px Batang,serif;paint-order:stroke;stroke:#000;stroke-width:4px;animation:fade 2.6s forwards}
#mapFx .strike.won text{fill:#ffd27a}
@keyframes boom{from{transform:scale(.3);opacity:1}to{transform:scale(2.2);opacity:0}}
.map.gliding{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body[data-season=winter] .map:before{content:'';position:absolute;inset:0;background:#cfe3ff1c;z-index:1;pointer-events:none}
body[data-season=autumn] .map:before{content:'';position:absolute;inset:0;background:#ffa04a14;z-index:1;pointer-events:none}
body[data-season=summer] .map:before{content:'';position:absolute;inset:0;background:#7fe0a00d;z-index:1;pointer-events:none}
#log p.win span{color:#9fe1c1}#log p.lose span{color:#f0a493}#log p.great span{color:var(--gold)}#log p.event span{color:#c9c3f0}
.ownerLabel{color:var(--fc)!important}
.adjacent button{border-left:3px solid var(--fc)}

/* 도시 개발 현황 */
.devGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px;margin:4px 0 6px}
.devGrid div{display:grid;grid-template-columns:32px 1fr 22px;align-items:center;gap:6px;font-size:12px}
.devGrid label{color:var(--muted)}.devGrid b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.pips{height:6px;border-radius:3px;background:#ffffff10;overflow:hidden;position:relative}
.pips:after{content:'';position:absolute;inset:0;width:var(--p);background:linear-gradient(90deg,#8a6a2a,var(--gold),#ffe3a0);border-radius:3px;transition:width .5s}

/* 명령 버튼 */
.actions{grid-template-columns:repeat(3,1fr)!important}
.action{position:relative;padding:22px 6px 8px!important;text-align:center!important;font-size:13px!important;overflow:hidden}
.action kbd{position:absolute;top:4px;left:4px;min-width:17px;height:17px;font-size:10px}
.action small{font-size:11px!important;line-height:1.3}
.action:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 18px #0006,inset 0 0 0 1px #d0ad6d50}
.action .ico{display:block;margin:0 auto 2px;font-size:20px;line-height:1;filter:drop-shadow(0 2px 3px #0008)}
.ico-farm:before{content:'🌾'}.ico-trade:before{content:'🏮'}.ico-fort:before{content:'🏯'}.ico-tech:before{content:'⚒️'}.ico-levee:before{content:'🌊'}.ico-relief:before{content:'🍚'}.ico-buy:before{content:'🛒'}.ico-sell:before{content:'💰'}.ico-search:before{content:'🔍'}
.ico-draft:before{content:'🪖'}.ico-drill:before{content:'🥋'}.ico-attack:before{content:'⚔️'}.ico-move:before{content:'🐎'}.ico-supply:before{content:'🛞'}.ico-rumor:before{content:'🗣️'}.ico-fire:before{content:'🔥'}.ico-guard:before{content:'🛡️'}.ico-hone:before{content:'🗡️'}
.ico-recruit:before{content:'🤝'}.ico-reward:before{content:'🎁'}.ico-transfer:before{content:'🧭'}.ico-study:before{content:'📜'}.ico-feast:before{content:'🍶'}
@media(max-width:1120px){.actions{grid-template-columns:repeat(5,1fr)!important}}
@media(max-width:650px){.actions{grid-template-columns:repeat(3,1fr)!important}}

/* 장수 카드 */
.portrait{width:48px;height:58px;border-radius:5px;flex-shrink:0;border:1px solid #d0ad6d55;box-shadow:0 3px 8px #0007;background:#0d1518}
.portrait.noGen{display:grid;place-items:center;font:700 24px Batang,serif;color:var(--gold)}
.genList{margin-top:10px}
.general{display:flex;gap:10px;align-items:flex-start}
.general>div{flex:1;min-width:0}
.general.free .portrait{filter:grayscale(.6);border-style:dashed}
.gstats{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin-top:5px}
.gstats span{display:grid;grid-template-columns:14px 1fr 26px;align-items:center;gap:4px;font-size:11px}
.gstats em{font-style:normal;color:var(--muted)}.gstats b{font-weight:500;text-align:right}
.gstats i{height:4px;border-radius:2px;background:#ffffff12;position:relative;overflow:hidden}
.gstats i:after{content:'';position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,#5a8a7a,#9fe1c1)}
.expBar{height:3px;background:#ffffff10;margin-top:5px;border-radius:2px}.expBar i{display:block;height:100%;background:var(--gold);border-radius:2px}

/* 새 게임 */
.difficulty{display:flex;gap:16px;margin-bottom:14px;font-size:14px}.difficulty input{accent-color:var(--gold)}
.kingdom{display:flex;gap:12px;align-items:center}.kingdom .portrait{width:52px;height:62px}

/* 명령 마법사 */
.wizArt{margin:-6px -6px 12px;border-radius:8px;overflow:hidden;height:130px;border:1px solid #d0ad6d40}
.wizArt .sceneArt{width:100%;height:100%;display:block}
.wizSteps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:12px}
.wizSteps span{padding:3px 9px;border-radius:12px;background:#ffffff08;color:var(--muted)}
.wizSteps .on{background:#d0ad6d30;color:var(--gold)}.wizSteps .done{color:var(--green)}
.pickList{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px}
.pick span{display:flex;flex-direction:column;min-width:0}.pick b{font-weight:600}.pick small{color:var(--muted);font-size:12px}
.pick .portrait{width:36px;height:44px}
.pick.own0{border-left:3px solid var(--f0)}.pick.own1{border-left:3px solid var(--f1)}.pick.own2{border-left:3px solid var(--f2)}.pick.own-1{border-left:3px solid var(--f3)}
.amountBox{text-align:center}
.amountBox output{display:block;font:600 40px/1.2 Batang,serif;color:var(--gold);font-variant-numeric:tabular-nums}
.amountBox input[type=range]{width:100%;accent-color:var(--gold);margin:8px 0}
.amtKeys{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.amtKeys button{padding:5px 0;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px}
.keyHint{font-size:12px;color:var(--muted);margin:10px 0}.keyHint kbd{margin:0 1px}
.amountBox .primary{width:100%;padding:12px}
@media(max-width:520px){.pickList{grid-template-columns:1fr}.amtKeys{grid-template-columns:repeat(5,1fr)}}

/* 장면 오버레이 */
#sceneOverlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(#050e13aa,#050e13ee);opacity:0;pointer-events:none;transition:opacity .25s}
#sceneOverlay.show{opacity:1;pointer-events:auto;cursor:pointer}
.sceneCard{width:min(760px,94vw);border-radius:14px;overflow:hidden;background:#141f24;border:1px solid #d0ad6d70;box-shadow:0 30px 120px #000c,0 0 0 6px #d0ad6d10;transform:scale(.92) translateY(14px);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
#sceneOverlay.show .sceneCard{transform:none}
.sceneCard.good{border-color:#88c6afaa;box-shadow:0 30px 120px #000c,0 0 60px #88c6af30}
.sceneCard.bad{border-color:#dc8c7eaa;box-shadow:0 30px 120px #000c,0 0 60px #dc8c7e30}
.sceneCard.great{border-color:#ffd27a;box-shadow:0 30px 120px #000c,0 0 80px #ffd27a50}
.sceneStage{position:relative;aspect-ratio:640/300;overflow:hidden}
.sceneStage .sceneArt{width:100%;height:100%;display:block;animation:kenburns 6s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.sceneText{padding:16px 22px 14px;background:linear-gradient(#141f24,#0f181c)}
.sceneText h3{font-size:24px;color:var(--gold);letter-spacing:2px;animation:rise .5s ease-out both}
.sceneCard.bad .sceneText h3{color:#f0a493}.sceneCard.good .sceneText h3{color:#9fe1c1}
.sceneText p{margin-top:6px;font-size:15px;animation:rise .5s .12s ease-out both}
.sceneText .note{color:var(--gold);font-size:13px}
.sceneText small{display:block;margin-top:10px;color:#7f8b89;font-size:11px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.critBadge,.tacticBadge{position:absolute;top:14px;right:16px;font:700 30px Batang,serif;color:#fff2c0;text-shadow:0 0 18px #ff9a3a,0 2px 0 #7a3a1a;animation:stamp .6s .3s cubic-bezier(.2,1.6,.4,1) both}
.tacticBadge{font-size:22px;top:auto;bottom:86px;right:auto;left:50%;transform:translateX(-50%)}
@keyframes stamp{from{opacity:0;transform:scale(2.4) rotate(-12deg)}}
.battleHud{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(transparent,#000c 40%)}
.bSide{display:flex;gap:10px;align-items:center;color:#f2ead8}.bSide.def{flex-direction:row-reverse;text-align:right}
.bSide>div{flex:1;min-width:0}.bSide b{display:block;font-size:14px;color:var(--fc);filter:brightness(1.5)}.bSide small{font-size:12px;color:#d8d0bc}
.bSide .portrait{width:46px;height:56px;border-color:var(--fc)}
.bBar{height:9px;background:#ffffff18;border-radius:5px;margin-top:4px;overflow:hidden}.bSide.def .bBar{direction:rtl}
.bBar i{display:block;height:100%;background:linear-gradient(90deg,var(--fc),#fff8);transition:width .55s cubic-bezier(.3,.7,.3,1);border-radius:5px}
.bSide output{font:600 18px Batang,serif;font-variant-numeric:tabular-nums}
.vs{font:900 28px Batang,serif;color:#ffd27a;text-shadow:0 0 14px #ff6a2a}
.sceneCard.hit .sceneStage{animation:shake .35s}
@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,0)}}
.sceneCard.hit .sceneStage:after{content:'';position:absolute;inset:0;background:#fff;animation:flash .25s forwards;pointer-events:none}
@keyframes flash{from{opacity:.35}to{opacity:0}}

/* 장면 속 움직임 */
.fx-drift{animation:drift 24s linear infinite}@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.fx-pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes pulse{50%{opacity:.6;transform:scale(1.08)}}
.fx-sway{animation:sway 2.2s ease-in-out infinite alternate}@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.fx-bob{animation:bob 1.1s ease-in-out infinite alternate}@keyframes bob{to{transform:translateY(-5px)}}
.fx-march{animation:bob .45s ease-in-out infinite alternate}
.fx-walk{animation:walk 3s ease-out forwards}@keyframes walk{from{transform:translateX(-60px)}}
.fx-walk-in{animation:walkin 1.4s ease-out both}@keyframes walkin{from{transform:translateX(-120px);opacity:0}}
.fx-leave{animation:leave 3s ease-in forwards}@keyframes leave{to{transform:translateX(-260px);opacity:0}}
.fx-ride{animation:ride 3.2s ease-in-out forwards}@keyframes ride{from{transform:translateX(-120px)}to{transform:translateX(330px)}}
.fx-charge{animation:charge 2.6s cubic-bezier(.5,0,.7,1) forwards}@keyframes charge{to{transform:translateX(260px)}}
.fx-sneak{animation:sneak 3s ease-in-out forwards}@keyframes sneak{to{transform:translateX(120px)}}
.fx-thrust{animation:thrust .6s ease-in-out infinite alternate}.fx-delay{animation-delay:.3s}@keyframes thrust{to{transform:translate(6px,-3px)}}
.fx-clash{animation:clash .5s ease-in-out infinite alternate}.fx-rev{animation-direction:alternate-reverse}@keyframes clash{to{transform:translateX(18px)}}
.fx-hammer{animation:hammer .5s ease-in infinite alternate}@keyframes hammer{from{transform:rotate(-40deg)}to{transform:rotate(10deg)}}
.fx-flicker{animation:flicker .18s steps(2) infinite alternate;transform-box:fill-box;transform-origin:bottom center}@keyframes flicker{to{transform:scale(1.08,.92)}}
.fx-fall{animation:fall 4s linear infinite}@keyframes fall{to{transform:translate(-40px,330px) rotate(240deg)}}
.fx-rise{animation:riseup 3s ease-out infinite}@keyframes riseup{to{transform:translate(20px,-300px);opacity:0}}
.fx-drop{animation:drop .7s cubic-bezier(.3,1.6,.5,1) both}@keyframes drop{from{transform:translateY(-120px);opacity:0}}
.fx-pop{animation:pop .7s .4s cubic-bezier(.2,1.6,.4,1) both;transform-box:fill-box;transform-origin:center}@keyframes pop{from{transform:scale(0);opacity:0}}
.fx-rise-once{animation:wallup 1.4s ease-out both}@keyframes wallup{from{transform:translateY(60px)}}
.fx-wave{animation:wave 1.6s ease-in-out infinite alternate}@keyframes wave{to{transform:skewX(-8deg) translateX(4px)}}
.fx-flood{animation:flood 3s ease-out forwards}@keyframes flood{from{transform:translateY(60px)}to{transform:translateY(-30px)}}
.fx-swarm{animation:swarm 1.2s ease-in-out infinite alternate}@keyframes swarm{to{transform:translate(14px,-8px)}}
.fx-arrow{stroke-dasharray:260;stroke-dashoffset:260;animation:draw .8s ease-in forwards}

/* 화면 숫자패드 */
#numpad{position:fixed;right:14px;bottom:14px;z-index:40;font-size:12px;user-select:none}
#numpad .padHead{display:flex;align-items:center;gap:8px;justify-content:flex-end}
#numpad .padTitle{color:var(--gold);font-size:12px;background:#0d1518e6;padding:3px 8px;border-radius:10px;border:1px solid #d0ad6d40;display:none;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#padToggle{border-radius:50%;width:44px;height:44px;padding:0;font-size:20px;background:#1a2a30;border-color:#d0ad6d70;box-shadow:0 6px 18px #0008}
#numpad .padKeys{display:none}
#numpad.open .padTitle{display:block}
#numpad.open .padKeys{display:grid;grid-template-columns:repeat(4,62px);grid-auto-rows:46px;gap:5px;margin-top:6px;padding:9px;background:linear-gradient(#1b2a30f2,#0f191df2);border:1px solid #d0ad6d50;border-radius:12px;box-shadow:0 20px 50px #000a;backdrop-filter:blur(6px)}
.pk{padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:7px;background:linear-gradient(#2a3a40,#1a262b);border:1px solid #ffffff1a;border-bottom:3px solid #0a1012;line-height:1.1}
.pk b{font:700 16px ui-monospace,Consolas,monospace;color:#f2ead8}
.pk small{font-size:10px;color:var(--gold);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk.dim{opacity:.4}.pk:disabled{opacity:.25}
.pk.flash{animation:keyflash .25s}@keyframes keyflash{from{background:#d0ad6d;transform:translateY(2px)}}
.pk-plus{grid-row:span 2}.pk-enter{grid-row:span 2;background:linear-gradient(#5a4a2a,#3a2e1a)}.pk-zero{grid-column:span 2}
.pk-n7{grid-column:1}.pk-n4{grid-column:1}.pk-n1{grid-column:1}.pk-zero{grid-column:1/span 2}
.pk.armed{background:linear-gradient(#b0453a,#7a2a22);animation:pulse .8s infinite}
@media(max-width:650px){#numpad.open .padKeys{grid-template-columns:repeat(4,52px);grid-auto-rows:40px}.pk small{font-size:9px;max-width:48px}}
@media(prefers-reduced-motion:reduce){[class*=fx-],.sceneStage .sceneArt,#roads .terr,#roads line.front{animation:none!important}}
.resources{grid-template-columns:repeat(5,1fr)!important}
@media(max-width:650px){.resources{grid-template-columns:repeat(3,1fr)!important}}
#numpad.open .padKeys{grid-template-columns:repeat(4,54px);grid-auto-rows:42px;gap:4px;padding:7px}
.pk small{max-width:52px}
.bSide>.portrait{flex:0 0 46px;width:46px;height:56px}
/* 하단 키 안내 HUD — 지금 누를 수 있는 키 */
#keyHud{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;justify-content:center;padding:5px 70px 5px 14px;font-size:12px;color:var(--muted);background:#0b1417;border-top:1px solid var(--line);flex-shrink:0;min-height:30px}
#keyHud span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#keyHud kbd{min-width:auto}
@media(max-width:650px){#keyHud{display:none}}
.action.cursor{outline:2px solid var(--gold);outline-offset:-2px;background:#d0ad6d1f;box-shadow:0 0 18px #d0ad6d40}
.pick.cursor{outline:2px solid var(--gold);background:#d0ad6d1a}
@media(min-width:1121px) and (min-height:620px){#numpad{bottom:40px}}

/* ════ 격자 전장 ════ */
#battle{position:fixed;inset:0;z-index:45;display:none;background:radial-gradient(ellipse at 50% 30%,#2a2216,#0a0f12 75%);color:var(--ink)}
#battle.show{display:block;animation:bfIn .35s ease-out}
@keyframes bfIn{from{opacity:0;transform:scale(1.03)}}
body:has(#battle.show) #numpad{z-index:46}
body:has(#battle.show) #keyHud{position:fixed;left:0;right:0;bottom:0;z-index:46}
.bfWrap{--ts:min(66px,calc((100vw - 400px) / 11),calc((100vh - 210px) / 7));height:100%;display:flex;flex-direction:column;align-items:center;padding:14px 14px 40px;gap:10px}
.bfHead{width:min(1180px,100%);display:flex;justify-content:space-between;align-items:center;gap:20px}
.bfHead b{font:600 22px Batang,serif;color:var(--gold);letter-spacing:2px;display:block}.bfHead small{color:var(--muted)}
.bfTotals{display:flex;align-items:center;gap:10px;font-size:13px;flex:1;max-width:520px}
.bfTotals .a{color:#9fe1c1}.bfTotals .d{color:#f0a493}
.tug{flex:1;height:10px;border-radius:5px;background:#b0453a;overflow:hidden;box-shadow:inset 0 1px 3px #000}.tug i{display:block;height:100%;background:linear-gradient(90deg,#2f7a5f,#6fcfa5);transition:width .6s}
.bfMain{display:flex;gap:14px;align-items:flex-start}
.bfBoard{position:relative;width:calc(var(--ts) * 11);height:calc(var(--ts) * 7);border:3px solid #6a5232;border-radius:6px;box-shadow:0 20px 60px #000c,0 0 0 1px #d0ad6d40;overflow:hidden}
.bfBoard .tiles{display:grid;grid-template-columns:repeat(11,var(--ts));grid-auto-rows:var(--ts)}
.tile{position:relative;border:1px solid #00000022;cursor:pointer}
.tile:after{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--ts) * .5);opacity:.85;pointer-events:none}
.t-P{background:radial-gradient(circle at 30% 30%,#7d9a58,#5f7f42)}
.t-F{background:radial-gradient(circle at 40% 40%,#4f7a3a,#2e5326)}.t-F:after{content:'🌲';filter:drop-shadow(0 2px 2px #0006)}
.t-M{background:radial-gradient(circle at 50% 30%,#9a8a6a,#6a5a42)}.t-M:after{content:'⛰️'}
.t-R{background:repeating-linear-gradient(170deg,#3f7fa8 0 7px,#4f92bb 7px 12px);animation:river 3s linear infinite;background-size:100% 200%}
@keyframes river{to{background-position:0 48px}}
.t-B{background:repeating-linear-gradient(90deg,#8a6a42 0 6px,#6a4f30 6px 8px),#3f7fa8}
.t-C{background:radial-gradient(circle,#8a7a62,#5a4a3a)}.t-C:after{content:'🏯';font-size:calc(var(--ts) * .62)}
.tile.reach:before,.tile.target:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.tile.reach:before{box-shadow:inset 0 0 0 999px #4aa8ff40,inset 0 0 0 2px #8fd0ff99}
.tile.target:before{box-shadow:inset 0 0 0 999px #ff4a3a45,inset 0 0 0 2px #ff9a8a;animation:tgt 1s ease-in-out infinite}
@keyframes tgt{50%{box-shadow:inset 0 0 0 999px #ff4a3a20,inset 0 0 0 2px #ff9a8a}}
.tile.cur{outline:3px solid #ffd27a;outline-offset:-3px;z-index:1;animation:curp .9s ease-in-out infinite}
@keyframes curp{50%{outline-color:#fff6d0}}
.tileArt{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.tile:has(.tileArt):after{content:none}.tileArt .tw{animation:tw 2.4s linear infinite}@keyframes tw{to{stroke-dashoffset:-40}}@media(prefers-reduced-motion:reduce){.tileArt .tw{animation:none}}
.bfBoard .units,.bfBoard .floaters{position:absolute;inset:0;pointer-events:none}
.unit{position:absolute;left:calc(var(--x) * var(--ts));top:calc(var(--y) * var(--ts));width:var(--ts);height:var(--ts);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:left .45s cubic-bezier(.3,.7,.3,1),top .45s cubic-bezier(.3,.7,.3,1),opacity .4s;pointer-events:auto;cursor:pointer;z-index:2}
.unit i{width:calc(var(--ts) * .6);height:calc(var(--ts) * .6);border-radius:50%;display:grid;place-items:center;font:700 calc(var(--ts) * .3) Batang,serif;font-style:normal;color:#fff6dd;box-shadow:0 4px 10px #000a,inset 0 -3px 6px #0006;border:2px solid #fff6dd99}
.unit.side0 i{background:radial-gradient(circle at 35% 30%,#5fbf95,#2b6e55)}.unit.side1 i{background:radial-gradient(circle at 35% 30%,#d8675a,#7a2a22)}
.unit b{font-size:calc(var(--ts) * .17);line-height:1;margin-top:1px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;max-width:100%;overflow:hidden}
.unit em{font-style:normal;font-size:calc(var(--ts) * .15);color:#ffe9b0;text-shadow:0 1px 2px #000}
.unit .hp{position:absolute;bottom:2px;left:10%;right:10%;height:3px;background:#0008;border-radius:2px}
.unit .hp:after{content:'';position:absolute;inset:0;width:var(--hp);background:#9fe1c1;border-radius:2px}.unit.side1 .hp:after{background:#ff9a8a}
.unit.sel i{box-shadow:0 0 0 3px #ffd27a,0 0 22px #ffd27a}
.unit.done{filter:grayscale(.7) brightness(.75)}
.unit.dead{opacity:0;transform:scale(.4) rotate(30deg);transition:opacity .8s,transform .8s}
.unit.hidden{opacity:.55}.unit.hidden i:after{content:'🍃';position:absolute;transform:translate(14px,-14px);font-size:12px}
.unit.stun i{animation:stun .8s linear infinite}@keyframes stun{to{transform:rotate(360deg)}}
.unit.stun:before{content:'💫';position:absolute;top:-4px;font-size:14px}
.unit.struck i{animation:struck .45s}@keyframes struck{20%{transform:translateX(-6px);filter:brightness(2)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}}
.unit.u-cav i{border-radius:30% 50% 50% 30%}.unit.u-archer i{border-style:dashed}
.fl{position:absolute;left:calc((var(--x) + .5) * var(--ts));top:calc(var(--y) * var(--ts));transform:translateX(-50%);font:800 calc(var(--ts) * .26) Batang,serif;color:#ffdf8a;text-shadow:0 2px 0 #7a2a10,0 0 8px #000;white-space:nowrap;animation:flUp 1.3s ease-out forwards;z-index:5}
.fl.counter{color:#cfe3ff;text-shadow:0 2px 0 #1a3a6a,0 0 8px #000}.fl.kill{color:#ff6a4a;font-size:calc(var(--ts) * .32)}.fl.skill{color:#d8b0ff}
@keyframes flUp{from{transform:translate(-50%,10px) scale(.6);opacity:0}20%{transform:translate(-50%,-6px) scale(1.15);opacity:1}to{transform:translate(-50%,-40px);opacity:0}}
.bfSide{width:300px;max-height:calc(var(--ts) * 7);overflow:auto;background:#121c20e6;border:1px solid #d0ad6d40;border-radius:8px;padding:12px;font-size:13px}
.bfTerrain{color:var(--muted);font-size:12px;margin-bottom:8px}
.bfUnit{border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:8px}
.bfUnit.side0{border-left:3px solid #5fbf95}.bfUnit.side1{border-left:3px solid #d8675a}
.bfUnit header{display:flex;gap:8px;align-items:center}.bfUnit header i{font:700 18px Batang,serif;font-style:normal;color:var(--gold)}
.bfUnit header small,.bfUnit>small{display:block;color:var(--muted);font-size:11px}.bfUnit .adv{color:#c9c3f0}
.hpbar{height:6px;background:#ffffff12;border-radius:3px;margin:6px 0 4px}.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#d0ad6d,#ffe3a0);border-radius:3px}
.bfSelLabel{font-size:11px;color:var(--gold);margin:4px 0}
.bfMenu{display:grid;gap:5px;margin:8px 0}.bfMenu b{color:var(--gold)}
.bfMenu button{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;padding:7px 8px;font-size:13px}.bfMenu button small{width:100%;color:var(--muted);font-size:11px}
.bfTip{font-size:12px;color:var(--muted);margin:8px 0;line-height:1.9}
.bfBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.bfBtns button{font-size:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bfLog{width:min(1180px,100%);font-size:12px;color:#d8d0bc;min-height:60px}.bfLog p{margin:1px 0}
.bfFlash{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font:800 44px Batang,serif;color:#ffe9b0;text-shadow:0 0 30px #ff8a3a,0 3px 0 #5a2a10;pointer-events:none;opacity:0;white-space:nowrap}
.bfFlash.show{animation:bfFlash 1.6s ease-out}
@keyframes bfFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0}}
.bfResult{position:absolute;inset:0;display:none;place-items:center;background:#000a;z-index:6}
.bfResult.show{display:grid}
.bfResult>div{background:#141f24;border:1px solid #d0ad6d;border-radius:12px;padding:26px 34px;text-align:center;box-shadow:0 30px 100px #000;animation:stamp .6s cubic-bezier(.2,1.6,.4,1)}
.bfResult h3{font:800 48px Batang,serif;letter-spacing:12px}.bfResult .win h3{color:#ffd27a;text-shadow:0 0 30px #ff9a3a}.bfResult .lose h3{color:#f0a493}
.bfResult p{margin:8px 0;color:#d8d0bc}.bfResult button{margin-top:10px;padding:12px 24px}
@media(max-width:900px){.bfWrap{--ts:min(56px,calc((100vw - 24px) / 11))}.bfMain{flex-direction:column;align-items:center}.bfSide{width:calc(var(--ts) * 11);max-height:none}}
.bfResult button span{margin-left:12px;opacity:.7;font-weight:400}
.mixBar{display:flex;height:16px;border-radius:4px;overflow:hidden;margin:10px 0 0;font:600 10px/16px Batang,serif;color:#fff;box-shadow:inset 0 0 0 1px #ffffff14}
.mixBar i{font-style:normal;text-align:center;white-space:nowrap;overflow:hidden;transition:width .5s}
.mixBar .m0{background:linear-gradient(#6a7a8a,#4a5a6a)}.mixBar .m1{background:linear-gradient(#a8743a,#7a5022)}.mixBar .m2{background:linear-gradient(#5a8a4a,#3a6a2a)}
.tabs button{font-size:13px!important}
.ico-envoy:before{content:'📜'}.ico-truce:before{content:'🕊️'}.ico-tribute:before{content:'👑'}.ico-discord:before{content:'🐍'}
.diploList{margin-top:12px;display:grid;gap:8px}
.diplo{border:1px solid var(--line);border-left:3px solid var(--fc);border-radius:6px;padding:8px 10px}
.diplo header{display:flex;justify-content:space-between;align-items:baseline}.diplo header b{color:var(--fc);filter:brightness(1.4)}.diplo small{color:var(--muted);font-size:11px}
.favor{height:6px;border-radius:3px;margin:6px 0 3px;background:linear-gradient(90deg,#b0453a,#d0ad6d 50%,#5fbf95);position:relative}
.favor i{position:absolute;top:-3px;width:3px!important;height:12px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff;left:0}
.feud{color:#f0a493;font-size:12px}
#numpad.open .padKeys{opacity:.62;transition:opacity .2s}#numpad.open:hover .padKeys,#numpad.open:focus-within .padKeys,body:has(#battle.show) #numpad .padKeys{opacity:1}
.skill{display:inline-block;font:600 10px/1 "Malgun Gothic",sans-serif;padding:3px 5px;border-radius:3px;background:#d0ad6d26;color:var(--gold);border:1px solid #d0ad6d50;vertical-align:2px;cursor:help}
#mapFx .trail.ai1 path{stroke:#e0705f;stroke-dasharray:6 5}#mapFx .trail.ai2 path{stroke:#8f8fe6;stroke-dasharray:6 5}
.recGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.recGrid label{display:block;font-size:12px;color:var(--muted)}.recGrid strong{font-size:18px;font-weight:500}
.achGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ach{border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;opacity:.5;filter:grayscale(1)}
.ach i{font-style:normal;font-size:24px;display:block}.ach b{display:block;font-family:Batang,serif}.ach small{font-size:11px;color:var(--muted)}
.ach.on{opacity:1;filter:none;border-color:#d0ad6d90;background:radial-gradient(#d0ad6d22,transparent 70%);box-shadow:0 0 18px #d0ad6d25}
@media(max-width:520px){.recGrid{grid-template-columns:1fr 1fr}.achGrid{grid-template-columns:1fr 1fr}}
.mapScroll canvas.weather{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
/* 시작 화면 */
#titleScreen{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#0a1013;overflow:hidden;cursor:pointer;transition:opacity .6s,transform .6s}
#titleScreen.out{opacity:0;transform:scale(1.06);pointer-events:none}
.tsArt{position:absolute;inset:0;opacity:.5;filter:saturate(.8) brightness(.7)}.tsArt svg{width:100%;height:100%;animation:kenburns 14s ease-out forwards}
#titleScreen:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,#0a1013 85%)}
.tsBody{position:relative;z-index:1;text-align:center;padding:20px}
.tsSeal{display:inline-block;background:#924b3c;color:#f7e5c5;font:700 28px Batang,serif;writing-mode:vertical-rl;border:4px double #d88d6f;padding:6px;letter-spacing:4px;animation:stamp .7s .2s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 8px 30px #000a}
.tsTitle{font:900 clamp(44px,9vw,104px)/1.1 Batang,'바탕',serif;letter-spacing:.12em;margin:18px 0 6px;color:#f2e2bb;text-shadow:0 4px 0 #5a3a1a,0 0 40px #d0ad6d70}
.tsTitle span{display:inline-block;animation:ink .8s cubic-bezier(.2,.9,.3,1) both}
.tsTitle span:nth-child(1){animation-delay:.5s}.tsTitle span:nth-child(2){animation-delay:.65s}.tsTitle span:nth-child(3){animation-delay:.8s}.tsTitle span:nth-child(4){animation-delay:1s}.tsTitle span:nth-child(5){animation-delay:1.15s}
@keyframes ink{from{opacity:0;transform:translateY(-30px) scale(1.4);filter:blur(10px)}}
.tsSub{color:var(--gold);letter-spacing:4px;animation:rise .6s 1.4s both}
.tsResume{color:#d8d0bc;margin-top:12px;min-height:1.6em;animation:rise .6s 1.6s both}
.tsMeta{margin-top:4px;font-size:.85em;color:#b8a77e;min-height:0}
.tsMenu{display:flex;gap:10px;justify-content:center;margin-top:22px;animation:rise .6s 1.8s both}
.tsMenu button{padding:12px 20px;font-size:16px;background:#141f24d0;border-color:#d0ad6d70;display:flex;gap:8px;align-items:center}
.tsMenu button:first-child{background:var(--gold);color:#182125;font-weight:700}
.tsHint{margin-top:22px;font-size:13px;color:var(--muted);animation:rise .6s 2s both,pulse 2.4s 2.6s infinite}
@media(max-width:650px){
 .bfFlash{font-size:24px;white-space:normal;width:90vw;text-align:center}
 #battle{overflow-y:auto}.bfWrap{height:auto;min-height:100%;padding-bottom:90px}
 .bfHead{flex-direction:column;align-items:flex-start;gap:6px}.bfTotals{width:100%;max-width:none}
 #numpad.open .padKeys{grid-template-columns:repeat(4,46px);grid-auto-rows:36px;gap:3px;padding:5px}
 .pk b{font-size:14px}.pk small{font-size:8px;max-width:44px}
 #numpad{right:8px;bottom:8px}#padToggle{width:40px;height:40px}
 .tsMenu{flex-direction:column;align-items:stretch}
}
.coach{position:fixed;z-index:70;width:min(330px,90vw);background:#f2e2bb;color:#1a2226;border-radius:10px;padding:12px 14px;box-shadow:0 18px 50px #000b;animation:rise .35s ease-out;font-size:14px;line-height:1.6}
.coach b{color:#7a3a1a;font-family:Batang,serif}.coach p{margin:4px 0}.coach small{color:#6a5a4a;font-size:11px}
.coach kbd{background:#1a2226;color:#f2e2bb}
.coach:before{content:'';position:absolute;left:50%;margin-left:-8px;border:8px solid transparent}
.coach.down:before{top:-16px;border-bottom-color:#f2e2bb}.coach.up:before{bottom:-16px;border-top-color:#f2e2bb}
.coachHi{position:relative;z-index:69;box-shadow:0 0 0 4px #ffd27a,0 0 0 9999px #050e13b0!important;border-radius:6px}
.cityView{margin:-6px -6px 10px;height:96px;border-radius:8px;overflow:hidden;border:1px solid #d0ad6d40;box-shadow:inset 0 -20px 30px #0005}
.cityView .cityArt{width:100%;height:100%;display:block}
@media(min-width:1121px) and (min-height:620px){.cityView{height:84px;margin:-4px 0 8px}}
.unit.lunge{animation:lunge .42s cubic-bezier(.3,.6,.4,1)}
@keyframes lunge{45%{transform:translate(calc(var(--lx) * var(--ts)),calc(var(--ly) * var(--ts))) scale(1.12)}}
.bfBoard .arrow{position:absolute;left:calc((var(--x) + .5) * var(--ts));top:calc((var(--y) + .5) * var(--ts));width:calc(var(--ts) * .5);height:3px;margin-top:-1px;background:linear-gradient(90deg,#8a6a3a 70%,#e8e8e8 70%);transform-origin:0 50%;transform:rotate(var(--ang));animation:arrowFly .55s cubic-bezier(.4,.1,.6,1) forwards;z-index:4;filter:drop-shadow(0 0 3px #ffcf6a)}
@keyframes arrowFly{to{transform:translate(calc(var(--dx) * var(--ts)),calc(var(--dy) * var(--ts))) rotate(var(--ang))}}
.speech{position:absolute;left:14px;bottom:12px;display:flex;align-items:flex-end;gap:8px;max-width:70%;animation:rise .5s .5s both}
.speech .portrait{width:58px;height:70px;border:2px solid #d0ad6d}
.speech p{position:relative;background:#f2e2bb;color:#1a2226;border-radius:10px;padding:8px 12px;font:15px/1.4 Batang,'바탕',serif;box-shadow:0 6px 20px #0008;margin-bottom:14px}
.speech p:before{content:'';position:absolute;left:-12px;bottom:10px;border:7px solid transparent;border-right:9px solid #f2e2bb}
.speech b{display:block;font:700 11px 'Malgun Gothic',sans-serif;color:#7a3a1a;margin-bottom:2px}
@media(max-width:650px){.speech .portrait{width:40px;height:48px}.speech p{font-size:12px}}
.bfDuel{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(#3a1a10cc,#000e);z-index:7}
.bfDuel.show{display:grid;animation:bfIn .3s}
.dCard{text-align:center;padding:20px 30px;border:1px solid #d0ad6d;border-radius:12px;background:#141f24;box-shadow:0 30px 100px #000}
.dCard.hit{animation:shake .3s}
.dCard h3{font:800 34px Batang,serif;color:#ffd27a;letter-spacing:6px;text-shadow:0 0 24px #ff6a2a}
.dRow{display:flex;align-items:center;gap:26px;margin:14px 0}
.dSide{width:150px;display:flex;flex-direction:column;align-items:center;gap:4px}.dSide .portrait{width:96px;height:116px;border:3px solid #d0ad6d}
.dSide.a{animation:dIn .6s cubic-bezier(.2,1.4,.4,1) both}.dSide.d{animation:dIn2 .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes dIn{from{transform:translateX(-120px);opacity:0}}@keyframes dIn2{from{transform:translateX(120px);opacity:0}}
.dSide b{font:700 18px Batang,serif}.dSide small{color:var(--muted)}
.dBar{width:100%;height:10px;border-radius:5px;background:#ffffff18;overflow:hidden}.dBar i{display:block;height:100%;background:linear-gradient(90deg,#ff6a4a,#ffd27a);transition:width .35s}
.dVs{font-size:44px;animation:pulse .8s infinite}
#dMsg{min-height:1.5em;font-size:16px}#dMsg.win{color:#9fe1c1}#dMsg.lose{color:#f0a493}
.bfHead .wx{color:#cfe3ff;cursor:help}
.bfBoard[data-wx=summer]:after,.bfBoard[data-wx=winter]:after{content:'';position:absolute;inset:-40px;pointer-events:none;z-index:3;opacity:.55}
.bfBoard[data-wx=summer]:after{background:repeating-linear-gradient(105deg,transparent 0 14px,#cfe3ff55 14px 15px);animation:rainfall .5s linear infinite}
.bfBoard[data-wx=winter]:after{background:radial-gradient(#fff 1.4px,transparent 2px) 0 0/34px 34px,radial-gradient(#fff 1px,transparent 1.6px) 17px 11px/26px 26px;animation:snowfall 4s linear infinite}
.bfBoard[data-wx=winter] .tiles{filter:brightness(1.08) saturate(.6)}
@keyframes rainfall{to{transform:translate(-8px,30px)}}@keyframes snowfall{to{transform:translate(-20px,34px)}}
#cityTip{position:fixed;z-index:44;width:236px;background:#0e181ce8;border:1px solid #d0ad6d60;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.6;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 10px 30px #0009;backdrop-filter:blur(4px)}
#cityTip.show{opacity:1}#cityTip b{font:700 15px Batang,serif;filter:brightness(1.4)}#cityTip small{color:var(--muted)}#cityTip strong{color:var(--gold);font-weight:500}
#bgmToggle.off{opacity:.45;text-decoration:line-through}
.node .keep{display:inline-block;height:8px;margin-right:3px;vertical-align:0;background:linear-gradient(#d8c8a0,#9a8a6a);clip-path:polygon(0 30%,15% 30%,15% 0,30% 0,30% 30%,45% 30%,45% 0,60% 0,60% 30%,75% 30%,75% 0,90% 0,90% 30%,100% 30%,100% 100%,0 100%)}
.node .keep.k1{width:9px}.node .keep.k2{width:14px}.node .keep.k3{width:19px;background:linear-gradient(#ffe3a0,#c9a24a)}
.propText{font:16px/1.8 Batang,serif;margin:0 0 14px}.propText b{color:var(--gold)}
.ico-delegate:before{content:'🏛️'}
.node .auto{font:700 10px Batang,serif;font-style:normal;color:#182125;background:var(--gold);border-radius:3px;padding:0 2px;margin-right:3px}
.cityRow.auto span:after{content:' 委';color:var(--gold);font-size:10px}
.region{margin-top:12px;font-size:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.region b{color:var(--muted);font-weight:500;margin-right:4px}
.region i{width:10px;height:10px;border-radius:2px;background:var(--fc);display:inline-block}.region small{color:var(--muted);margin-left:6px}
.region.ruled b,.region.ruled small{color:var(--gold)}.region.ruled{text-shadow:0 0 10px #d0ad6d60}
.ovWrap{overflow:auto;max-height:60vh}.ovTable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.ovTable th{position:sticky;top:0;background:#172329;color:var(--muted);font-weight:500;text-align:right;padding:6px;border-bottom:1px solid var(--line)}.ovTable th:first-child,.ovTable td:first-child{text-align:left}
.ovTable td{text-align:right;padding:5px 6px;border-bottom:1px solid #ffffff08}.ovTable td small{color:var(--muted);font-size:11px}.ovTable td.bad{color:#eba493}
.ovTable button{padding:3px 8px;font-size:13px}
.node.captured{animation:captured 2.4s ease-out}
.node.captured:before{display:block!important;content:'🚩';background:none;border:0;width:auto;height:auto;top:-26px;font-size:18px;animation:flagUp 2.4s ease-out forwards}
@keyframes captured{0%,30%{box-shadow:0 0 0 3px var(--fc),0 0 40px var(--fc);transform:translate(-50%,-50%) scale(calc(var(--label-scale,1) * 1.25))}}
@keyframes flagUp{from{transform:translateY(16px);opacity:0}25%{transform:none;opacity:1}85%{opacity:1}to{opacity:0}}
.powBars{display:grid;gap:6px;margin-top:10px}.powBars div{display:grid;grid-template-columns:110px 1fr 130px;align-items:center;gap:10px;font-size:13px}
.powBars b{color:var(--fc);filter:brightness(1.4);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.powBars small{color:var(--muted);text-align:right}
.powBars span{height:12px;background:#ffffff10;border-radius:6px;overflow:hidden}.powBars i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--fc),#fff6);border-radius:6px;animation:growW 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes growW{from{width:0}}
.general[data-gen]{cursor:pointer;border-radius:6px;transition:background .15s}.general[data-gen]:hover{background:#ffffff08}
.genCard{display:grid;grid-template-columns:130px 180px 1fr;gap:16px;align-items:center}
.gcPortrait .portrait{width:130px;height:156px;border:3px solid #d0ad6d}
.radar{width:180px;height:180px}.radarFill{animation:radarIn .8s cubic-bezier(.2,1.2,.4,1) both;transform-origin:90px 90px}
@keyframes radarIn{from{transform:scale(0)}}
.gcInfo p{margin:6px 0;font-size:14px}.gcInfo b{color:var(--gold);font-weight:600}.gcInfo .king{font:700 16px Batang,serif;color:var(--gold)}
@media(max-width:640px){.genCard{grid-template-columns:1fr 1fr}.gcInfo{grid-column:1/-1}}
.genPickHint{font-size:13px;color:var(--gold);margin:12px 0 4px}.genList.picking .general{position:relative;cursor:pointer;outline:1px dashed #d0ad6d55;outline-offset:-1px}.genNo{position:absolute;left:4px;top:8px;z-index:1;background:var(--gold);color:#182125;font-weight:700;border-radius:3px;padding:0 6px;font-size:13px}.bioNav{text-align:center;margin-top:12px}
/* ── 한 화면 배치 v2 (2026-10-05): 지도 옆 천하 형세·국사 기록 열, 숫자패드는 왼쪽 열에 고정 ── */
.power{margin-bottom:6px}
.pwRow{display:grid;grid-template-columns:22px 1fr;gap:4px 8px;align-items:start;padding:6px 6px 6px 4px;border-left:3px solid var(--fc);background:linear-gradient(90deg,color-mix(in srgb,var(--fc) 16%,transparent),transparent 70%);border-radius:0 4px 4px 0;margin-bottom:5px}
.pwRow.me{box-shadow:inset 0 0 0 1px #d0ad6d40}
.pwRow.gone{opacity:.4;filter:grayscale(1)}
.pwFlag{width:22px;height:28px}
.pwBody{min-width:0;line-height:1.25}
.pwBody b{font-size:13px;font-family:Batang,'바탕',serif}
.pwBody small{float:right;font-size:11px;color:var(--muted)}
.pwBar{position:relative;height:13px;margin-top:3px;background:#ffffff0c;border-radius:2px;overflow:hidden}
.pwBar i{position:absolute;inset:0 auto 0 0;background:var(--fc);opacity:.75;transition:width .6s}
.pwBar.gold i{background:linear-gradient(90deg,#8a6a2a,#d0ad6d)}
.pwBar span{position:relative;font-size:10px;padding-left:4px;color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.pwCastles{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px;min-height:0}
.pwCastles i{width:8px;height:8px;background:var(--fc);clip-path:polygon(0 30%,20% 30%,20% 0,40% 0,40% 30%,60% 30%,60% 0,80% 0,80% 30%,100% 30%,100% 100%,0 100%)}
.pwRegions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pwReg{font-size:11px;padding:2px 6px;border-radius:3px;border:1px solid color-mix(in srgb,var(--fc) 60%,transparent);color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.pwReg.ruled{color:#fff;background:color-mix(in srgb,var(--fc) 35%,transparent)}
.pwReg em{display:inline-flex;gap:1px}.pwReg em i{width:5px;height:5px;border-radius:50%}
.statGrid label i{font-style:normal;margin-right:3px;font-size:11px}
.devGrid label{display:flex;align-items:center;gap:2px;white-space:nowrap}
.devGrid .ico{display:inline-block;margin:0;font-size:11px;filter:none}
.pips.max:after{background:linear-gradient(90deg,#d0ad6d,#fff2c8,#d0ad6d);background-size:200% 100%;animation:pipShine 2s linear infinite}
@keyframes pipShine{to{background-position:-200% 0}}
.geoNote summary{cursor:pointer;font-size:12px;color:var(--muted)}
.geoNote[open] summary{color:var(--gold);margin-bottom:4px}
#numpad.docked{position:static;margin:10px 0 0;z-index:auto}
#numpad.docked .padHead{justify-content:space-between}
#numpad.docked .padTitle{display:block;max-width:none;flex:1;text-align:center}
#numpad.docked.open .padKeys{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:34px;gap:3px;padding:5px;opacity:1;box-shadow:none;backdrop-filter:none}
#numpad.docked .pk small{font-size:9px}
@media(min-width:1121px) and (min-height:620px){
 .center{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,19vw,290px);grid-template-rows:auto minmax(0,1fr);gap:10px}
 .resources{grid-column:1/-1}
 .mapFrame{grid-column:1;grid-row:2}
 .chronicle{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .chronicle>.sectionTitle{flex-shrink:0;margin:6px 0 4px}
 .chronicle .power .sectionTitle{margin:0 0 6px}
 #log{flex:1;height:auto;min-height:0;overflow-y:auto}
 .realmBottom{margin-top:10px}
 .realm>.hint{display:none}
 .details{padding:12px 16px}
 .cityView{margin-bottom:6px}
 .statGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px}
 .statGrid strong{font-size:15px}
 .statGrid label{font-size:11px;white-space:nowrap}
 .loyalty{margin:8px 0}
 .devGrid{grid-template-columns:repeat(2,1fr);gap:4px 12px}
 .devGrid div{grid-template-columns:48px 1fr 22px}
 .income,.adjacent,.geoNote,.region{margin-top:8px;padding-top:6px}
}
.resIco{font-style:normal;margin-right:4px;font-size:13px}
.mkGauge{display:inline-block;position:relative;width:46px;height:6px;border-radius:3px;background:linear-gradient(90deg,#5fae6a,#d0ad6d,#c0543a);margin-left:6px;vertical-align:middle;align-self:center}
.mkGauge i{position:absolute;top:-3px;width:3px;height:12px;background:#fff;border-radius:1px;box-shadow:0 0 4px #000;transform:translateX(-50%)}
.pwBar{line-height:13px}.pwBar span{display:block;white-space:nowrap}
.pwBody small{float:none;display:block;margin-top:1px}
#numpad.docked.open .padKeys{grid-auto-rows:38px}
#numpad.docked .pk{padding:2px 1px}
#numpad.docked .pk b{font-size:14px}
#numpad.docked .pk small{font-size:10px;max-width:100%;line-height:1.1}
@media(min-width:1121px) and (min-height:620px){
 .mapFrame{grid-template-columns:minmax(0,1fr) auto}
 .mapHeading{padding:5px 10px;min-width:0;overflow:hidden}
 .mapHeading h2{display:none}
 .mapHeading .legend{flex-wrap:wrap;gap:4px 10px}
 .mapTools{padding:5px 8px;gap:4px;flex-wrap:nowrap}
 .mapTools button{padding:3px 8px;font-size:12px}
 .cityView{height:72px}
 .cityTitle h2{font-size:20px}
 .ownerLabel{margin:0 0 6px}
 .actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .action{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:5px;align-items:center;padding:5px 6px;font-size:12.5px;line-height:1.25;position:relative}
 .action kbd{position:absolute;top:2px;right:3px;font-size:9px;padding:0 3px;min-width:0}
 .action .ico{grid-row:1/3;font-size:17px;margin:0}
 .action small{grid-column:2;font-size:10.5px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .tabs{margin-top:8px}.tabs button{padding:6px 0;font-size:13px}
 .resource{gap:6px}
}
@media(min-width:1121px) and (min-height:620px){
 .action{display:block;padding:5px 4px 5px 27px;min-height:44px}
 .action kbd{left:auto;top:2px;right:2px;height:14px;line-height:12px}
 .action .ico{position:absolute;left:5px;top:50%;transform:translateY(-50%);font-size:16px}
 .action small{font-size:10px;letter-spacing:-.2px}
}
@media(min-width:1121px) and (min-height:620px){
 .action{text-align:left}
}
/* 낮은 화면(노트북 720~820px): 덜 중요한 것부터 접는다 */
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){
 .top{padding:3px 18px}
 .brand .eyebrow,.filebar #saveStatus{display:none}
 .filebar button{padding:4px 9px;font-size:12px}
 .cityView{height:52px}
 .details{padding:8px 12px}
 .cityTitle h2{font-size:18px}
 .statGrid strong{font-size:14px}
 .loyalty{margin:5px 0;font-size:12px}.loyalty .meter{margin-top:3px}
 .mixBar{margin:4px 0}
 .devGrid{margin:2px 0}.devGrid div{font-size:11px}
 .action{min-height:38px;padding-top:3px;padding-bottom:3px;font-size:12px}
 .adjacent,.geoNote{display:none}
 .income br{display:none}.income{font-size:11px}
 .pwCastles{display:none}
 .pwBar.gold{display:none}
 .pwRow{padding:4px 6px 4px 4px;margin-bottom:4px}
 .realm{padding:10px 12px}
 .realm h2{font-size:18px}
 .turn{margin:6px 0}
 .sectionTitle{margin:10px 0 6px}
 #numpad.docked.open .padKeys{grid-auto-rows:32px}
 .realmBottom .hint{display:none}
}
@media(min-width:1121px) and (min-height:620px){
 .action{padding:5px 4px 5px 26px!important;text-align:left!important;font-size:12.5px!important}
 .mapHeading{display:none}
 .mapTools{grid-column:1/-1;justify-content:flex-end}
}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){
 .action{padding:3px 3px 3px 25px!important;font-size:12px!important;min-height:36px}
 #numpad.docked.open .padKeys{grid-auto-rows:35px}
 #numpad.docked .pk b{font-size:13px}
 #numpad.docked .pk small{font-size:9px}
}
.pips{overflow:visible}
.pips .tick{position:absolute;top:-2px;width:2px;height:10px;margin-left:-1px;background:#ffffff30;z-index:1;border-radius:1px}
.pips .tick.on{background:#ffe7a8;box-shadow:0 0 4px #ffd27a}
.facRow{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-height:20px;margin:2px 0 4px;font-size:14px}
.facRow .fac{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;background:#d0ad6d1c;border:1px solid #d0ad6d50;font-size:13px;cursor:help}
.facRow small{font-size:11px;color:var(--muted)}
.facRow .facNext{margin-left:auto;color:var(--gold);white-space:nowrap}
.builtBadge{position:absolute;left:50%;top:12%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;animation:builtIn .6s cubic-bezier(.2,1.6,.4,1) both}
.builtBadge span{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;background:linear-gradient(#3a2a12f0,#1e160bf0);border:2px solid #e8c47a;border-radius:8px;padding:6px 14px;box-shadow:0 0 30px #ffcf6a80;color:#ffe9b8}
.builtBadge i{grid-row:1/3;font-style:normal;font-size:28px}
.builtBadge b{font-family:Batang,serif;font-size:18px;letter-spacing:2px}
.builtBadge small{font-size:12px;color:#e8d3a0}
@keyframes builtIn{from{opacity:0;transform:translate(-50%,-20px) scale(.6)}}
@media(prefers-reduced-motion:reduce){.builtBadge{animation:none}}
@media(min-width:1121px) and (min-height:620px){
 .details{overflow-x:hidden}
 .devGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .devGrid div{grid-template-columns:auto minmax(0,1fr) 20px;gap:5px;min-width:0}
}
.advisor:empty{display:none}
.advisor{margin-top:10px}
.advisor .sectionTitle{margin:6px 0 6px}
.advBody{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:start;width:100%;text-align:left;padding:6px;background:linear-gradient(135deg,#d0ad6d14,transparent);border:1px solid #d0ad6d38;border-radius:6px;font-size:12px;line-height:1.45;color:var(--ink)}
.advBody:disabled{opacity:1;cursor:default}
.advBody .portrait{width:44px;height:53px;border-radius:4px;border:1px solid #d0ad6d60}
.advBody p{position:relative;background:#f3ead6;color:#2a2116;padding:6px 8px;border-radius:6px}
.advBody p:before{content:'';position:absolute;left:-6px;top:10px;border:6px solid transparent;border-right-color:#f3ead6;border-left:0}
.advBody i{font-style:normal}
@media(max-width:1120px){.advisor{display:none}}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){.advisor{display:none}}
.unit i{position:relative;color:#fff6dd}
.unit i .unitArt{width:78%;height:78%;filter:drop-shadow(0 1px 1px #0009)}
.unit i s{position:absolute;right:-3px;bottom:-3px;text-decoration:none;font:700 calc(var(--ts) * .14) Batang,serif;background:#1b1410;color:#ffe2a0;border:1px solid #d0ad6d;border-radius:3px;padding:0 2px;line-height:1.15}
.unit.side1 i s{color:#ffc9be;border-color:#d8675a}
.unit.gen i{outline:2px solid #e8c47a;outline-offset:1px}
.unit.gen i:before{content:'★';position:absolute;left:-4px;top:-5px;font-size:calc(var(--ts) * .16);color:#ffd96a;text-shadow:0 0 3px #000}
.resource .flow{font-size:11px;font-weight:500;color:#9fe1c1;margin-left:5px;vertical-align:middle}
.resource .flow.neg{color:#ff9a8a}
.trs{font-size:12px;margin-left:2px;cursor:help;filter:drop-shadow(0 0 3px #ffd56a90)}
.trList{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.trList p{display:grid;grid-template-columns:26px 1fr;column-gap:6px;font-size:13px;margin:3px 0}
.trList i{grid-row:1/3;font-style:normal;font-size:22px;filter:drop-shadow(0 0 5px #ffd56a90)}
.trList b{color:#ffe2a0;margin-right:4px}
.trList small{grid-column:2;color:var(--muted);font-size:11px}
.trHead{margin:16px 0 8px;font-size:17px;color:var(--gold)}.trHead small{font-size:12px;color:var(--muted);margin-left:8px;font-family:inherit}
.trGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.trCard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:6px;background:#ffffff05;opacity:.55}
.trCard.on{opacity:1;border-color:#d0ad6d70;background:radial-gradient(circle at 50% 20%,#ffd56a22,transparent 70%)}
.trCard i{font-style:normal;font-size:24px}.trCard b{font-size:12px}.trCard small{font-size:10px;color:var(--muted);line-height:1.3}
.evGrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:4px}.evGrid .trCard{padding:5px 3px}.evGrid .trCard i{font-size:16px}.evGrid .trCard b{font-size:11px;line-height:1.25}
.evGrid .trCard.past{opacity:.85;border-style:dashed;border-color:#d0ad6d45}
.evGrid button.trCard{color:inherit;font:inherit;cursor:pointer}.evGrid button.trCard:hover,.evGrid button.trCard:focus-visible{border-color:#e8c040;outline:none;transform:translateY(-1px)}
@media(max-width:640px){.trGrid{grid-template-columns:repeat(3,1fr)}}
dialog:has(.trGrid){width:min(860px,94vw)}
.achGrid:has(+ .trHead){grid-template-columns:repeat(5,1fr);gap:6px}
.achGrid:has(+ .trHead) .ach{padding:7px 5px}
.achGrid:has(+ .trHead) .ach i{font-size:18px}
.achGrid:has(+ .trHead) .ach b{font-size:13px}
.achGrid:has(+ .trHead) .ach small{font-size:10px}
@media(max-width:640px){.achGrid:has(+ .trHead){grid-template-columns:repeat(2,1fr)}}
.node .tbar{display:block;align-self:stretch;height:3px;margin-top:2px;background:#0007;border-radius:2px;position:relative;overflow:hidden}
.node .tbar:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--fc);box-shadow:0 0 4px var(--fc)}
.ico-bestow:before{content:'💎'}
.advBody.urgent{border-color:#e8a06a;background:linear-gradient(135deg,#e8a06a26,transparent);animation:urg 1.6s ease-in-out infinite}
.advBody.urgent u{display:block;margin-top:3px;color:#8a3a1a;font-weight:700;text-decoration:none}
@keyframes urg{50%{box-shadow:0 0 14px #e8a06a60}}
@media(prefers-reduced-motion:reduce){.advBody.urgent{animation:none}}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){.advisor:has(.urgent){display:block}.advisor:has(.urgent) .portrait{display:none}.advisor:has(.urgent) .advBody{grid-template-columns:1fr}}
.quest{margin:0 0 8px;padding:7px 9px;border:1px solid #d0ad6d60;border-radius:6px;background:linear-gradient(135deg,#d0ad6d1f,#ffffff03)}
.quest.hurry{border-color:#e8a06a;box-shadow:0 0 10px #e8a06a40}
.qHead{display:flex;align-items:center;gap:6px;font-size:12px}.qHead b{color:var(--gold);font-family:Batang,'바탕',serif;font-size:13px}.qHead small{margin-left:auto;color:var(--muted)}
.quest.hurry .qHead small{color:#ffb98a}
.quest p{font-size:13px;margin:3px 0 5px;line-height:1.35}
.qBar{position:relative;height:14px;border-radius:7px;background:#ffffff10;overflow:hidden}
.qBar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8a6a2a,#d0ad6d,#ffe3a0);transition:width .6s}
.qBar span{position:relative;display:block;text-align:center;font-size:10px;line-height:14px;color:#fff;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.quest .streak{font-style:normal;font-size:11px;color:#ffb98a}
.pwTrend{margin:2px 0 4px;padding:3px;border:1px solid var(--line);border-radius:4px;background:#00000025}
.spark{display:block;width:100%;height:40px}
.yearCharts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.yearCharts figure{margin:0;padding:4px 6px;background:#00000040;border:1px solid #ffffff18;border-radius:6px}
.yearCharts figcaption{font-size:11px;color:var(--gold)}
.yChart{display:block;width:100%;height:56px}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){.pwTrend{display:none}}
.node .facN{font-style:normal;color:#ffd96a;font-size:10px;margin-left:3px}
#roads line.hegemon{stroke-width:7;stroke-opacity:.35;stroke-dasharray:none;stroke-linecap:round;filter:drop-shadow(0 0 6px currentColor)}
#roads .hegemonRing{fill:none;stroke-width:3;stroke-opacity:.8;stroke-dasharray:6 5;animation:hegSpin 12s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes hegSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#roads .hegemonRing{animation:none}}
.archWrap{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:18px;align-items:center}
.archTarget{width:100%;aspect-ratio:1;cursor:crosshair;filter:drop-shadow(0 8px 20px #000a);border-radius:50%}
.archSide p{font-size:13px;color:var(--muted);line-height:1.6}
.archScore{font-size:15px;margin:10px 0;padding-left:22px}.archScore b{color:var(--gold);font-size:20px}
.archTotal{font-size:16px}.archTotal b{font-size:30px;color:#ffe2a0}
@media(max-width:560px){.archWrap{grid-template-columns:1fr}}
.recap{display:grid;grid-template-columns:auto auto;gap:14px;align-items:center;justify-content:center;margin:10px 0}
.recap figure{margin:0;padding:6px;background:#0007;border:1px solid #ffffff20;border-radius:6px}
.recapChart{display:block;width:260px;height:70px}
.recap figcaption{font-size:11px;color:#cfc6b0;text-align:center}.recap .a{color:#5fbf95}.recap .d{color:#d8675a}
.mvps{display:flex;flex-direction:column;gap:6px}
.mvp{display:grid;grid-template-columns:40px auto;gap:8px;align-items:center;text-align:left;padding:4px 8px;border-radius:6px;background:#0006;border:1px solid #d0ad6d50}
.mvp .portrait{width:40px;height:48px;border-radius:4px}
.mvp i{font:700 22px Batang,serif;font-style:normal;color:#ffe2a0;text-align:center}
.mvp small{display:block;font-size:10px;color:var(--gold)}.mvp b{display:block;font-size:14px}.mvp em{font-style:normal;font-size:11px;color:#cfc6b0}
.mvp.side1{border-color:#d8675a60}
@media(max-width:560px){.recap{grid-template-columns:1fr}}
body:has(#battle.show) #numpad.docked{position:fixed;right:8px;bottom:40px;left:auto;z-index:46;margin:0}body:has(#battle.show) #numpad.docked .padKeys{width:240px}
.helpTabs{display:flex;gap:4px;margin:-6px 0 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.helpTabs button{border:0;border-radius:6px 6px 0 0;padding:6px 12px;font-size:14px;background:transparent;display:flex;align-items:center;gap:5px}
.helpTabs button.active{background:#d0ad6d22;color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.helpTabs kbd{font-size:10px}
.fx-rain{animation:rainDrop .9s linear infinite}@keyframes rainDrop{from{transform:translate(0,-20px)}to{transform:translate(-8px,40px)}}@media(prefers-reduced-motion:reduce){.fx-rain{animation:none}}
.chron{list-style:none;margin:0;padding:0 0 0 14px;max-height:220px;overflow:auto;border-left:2px solid #d0ad6d60}
.chron li{position:relative;display:grid;grid-template-columns:76px 1fr;gap:8px;font-size:12.5px;padding:4px 0}
.chron li:before{content:'';position:absolute;left:-20px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.chron li.win:before{background:#5fbf95;box-shadow:0 0 6px #5fbf95}.chron li.lose:before{background:#d8675a;box-shadow:0 0 6px #d8675a}
.chron time{color:var(--gold);font-variant-numeric:tabular-nums}
.scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.scenarios label{display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px}
.scenarios label:has(input:checked){border-color:var(--gold);background:#d0ad6d18}
.scenarios small{color:var(--muted);font-size:11px;line-height:1.4}
.scenarios input{accent-color:var(--gold)}
@media(max-width:560px){.scenarios{grid-template-columns:1fr}}
.node .fest{position:absolute;top:-21px;left:50%;margin-left:-8px;font-size:15px;font-style:normal;pointer-events:none;animation:festFloat 2.6s ease-in-out infinite;filter:drop-shadow(0 0 6px #ffb050)}
@keyframes festFloat{50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.node .fest{animation:none}}
.chatBox{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.chatLine{display:flex;gap:10px;align-items:flex-end}
.chatLine.r{flex-direction:row-reverse}
.chatLine .portrait{width:46px;height:55px;border-radius:5px;border:1px solid #d0ad6d60;flex-shrink:0}
.chatLine p{position:relative;background:#f3ead6;color:#2a2116;padding:7px 11px;border-radius:10px;font-size:14px;max-width:70%}
.chatLine p b{display:block;font-size:11px;color:#8a3a1a}
.chatLine.l p:before{content:'';position:absolute;left:-7px;bottom:10px;border:7px solid transparent;border-right-color:#f3ead6;border-left:0}
.chatLine.r p:before{content:'';position:absolute;right:-7px;bottom:10px;border:7px solid transparent;border-left-color:#f3ead6;border-right:0}
.kingdom{position:relative}.kingdom .kNo{position:absolute;top:6px;right:6px;font-size:11px}
.unit .uTag{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);text-decoration:none;font-size:calc(var(--ts) * .13);background:#1b1410e0;color:#ffe2a0;border:1px solid #d0ad6d80;border-radius:3px;padding:0 3px;white-space:nowrap;line-height:1.3}
.ico-route:before{content:'🐫'}
#roads line.route{stroke:#f2c94c;stroke-width:6;stroke-dasharray:10 8;stroke-opacity:.9;filter:drop-shadow(0 0 4px #f2c94c);animation:routeFlow 1.4s linear infinite}
@keyframes routeFlow{to{stroke-dashoffset:-36}}
@media(prefers-reduced-motion:reduce){#roads line.route{animation:none}}
.feud.pact{color:#ff9a8a;border-color:#d8675a80}
.ico-alliance:before{content:'🤝'}
.temper{font-size:11px;font-weight:400;padding:0 5px;border-radius:3px;background:#ffffff10;margin-left:4px}
.intel{font-size:11px;color:var(--muted);margin:2px 0 0}
.ico-spy:before{content:'🕵️'}
/* 색각 보조 — 세력을 모양으로도 구분 */
.node .fsym{font-style:normal;font-size:9px;margin-right:3px;color:var(--fc,currentColor);opacity:.9}
.node.owner0 .fsym{color:#8fc9b3}.node.owner1 .fsym{color:#f0b1a4}.node.owner2 .fsym{color:#b9b9ff}
.unit.side1 i{border-radius:22%!important}
.scoreBox{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:4px 12px;padding:10px 14px;margin-bottom:10px;border:1px solid #d0ad6d70;border-radius:8px;background:radial-gradient(circle at 15% 50%,#d0ad6d26,transparent 60%)}
.scoreBox span{font-size:12px;color:var(--muted)}.scoreBox b{font-size:30px;color:#ffe2a0;font-variant-numeric:tabular-nums}.scoreBox em{font-style:normal;font-family:Batang,'바탕',serif;font-size:18px;color:var(--gold)}
.scoreBox small{grid-column:1/-1;font-size:11px;color:var(--muted)}
.hall{list-style:none;margin:0 0 10px;padding:0;font-size:12.5px}
.hall li{display:grid;grid-template-columns:22px auto 1fr auto;gap:8px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line)}
.hall li b{color:var(--gold)}.hall li span{color:var(--muted)}.hall li em{font-style:normal;color:#ffe2a0;font-variant-numeric:tabular-nums}
.scenarios{grid-template-columns:repeat(2,1fr)}@media(max-width:560px){.scenarios{grid-template-columns:1fr}}
.node .keepSvg{display:inline-block;vertical-align:-1px;margin-right:3px;filter:drop-shadow(0 1px 1px #000a)}
#roads .frontFlag{filter:drop-shadow(0 1px 2px #000c)}
.cityLog{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.cityLog p{font-size:11.5px;line-height:1.4;margin:3px 0;color:var(--ink);display:grid;grid-template-columns:34px 1fr;gap:4px}
.cityLog time{color:var(--gold)}.cityLog p.great{color:#ffe2a0}.cityLog p.lose{color:#ff9a8a}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){.cityLog{display:none}}
@media(min-width:1121px) and (min-height:620px){.cityLog{margin-top:5px;padding-top:4px}.cityLog p{margin:1px 0;line-height:1.3}.details .geoNote{margin-top:4px;padding-top:4px}}
#mapFx .trailTag{font:700 18px Batang,serif;fill:#fff4d6;stroke:#1a120a;stroke-width:3px;paint-order:stroke}
/* 계절에 따라 지도 그림 색조가 서서히 바뀐다 */
.mapArt{transition:filter 1.6s ease}
.map[data-season=winter] .mapArt{filter:saturate(.55) brightness(1.08) hue-rotate(-12deg) contrast(.95)}
.map[data-season=autumn] .mapArt{filter:sepia(.28) saturate(1.15) brightness(1.02)}
.map[data-season=summer] .mapArt{filter:saturate(1.2) hue-rotate(6deg)}
.feats{font-size:12.5px;color:#ffe2a0}
.dCard.faceoff{animation:faceIn .5s cubic-bezier(.2,1.4,.4,1)}@keyframes faceIn{from{transform:scale(.7);opacity:0}}
.retire button{font-size:12px;padding:4px 8px;border-color:#d0ad6d70}
.featRank{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.featRank div{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.featRank label{color:var(--gold);font-size:11px}.featRank b{color:#ffe2a0}
.retire button{font-size:12px;padding:4px 8px;border-color:#d0ad6d70}
.featRank{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.featRank div{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.featRank label{color:var(--gold);font-size:11px}.featRank b{color:#ffe2a0}
.ssWrap{display:flex;flex-direction:column;gap:10px;align-items:center}
.ssRing{width:min(420px,100%);cursor:pointer;background:radial-gradient(ellipse at 50% 90%,#3a2a18,transparent 70%);border-radius:8px}
#ssPair{transition:transform .08s linear}
.ssBar{position:relative;width:min(420px,100%);height:22px;border-radius:11px;background:linear-gradient(90deg,#c0392b,#c0392b 50%,#3d7bbf 50%);overflow:hidden;border:1px solid #d0ad6d70}
.ssBar i{position:absolute;inset:0 auto 0 0;background:#3d7bbf;box-shadow:inset -3px 0 0 #fff}
.ssBar span{position:relative;display:block;text-align:center;font-size:12px;line-height:22px;color:#fff;text-shadow:0 1px 2px #000}
.ssHelp{font-size:13px;color:var(--muted)}.ssHelp b{color:var(--gold);font-size:16px}.ssHelp .win{color:#9fe1c1}.ssHelp .lose{color:#ff9a8a}
.contWrap{margin:0 0 10px}.contWrap button{width:100%}
.node .riot{position:absolute;top:-8px;right:-8px;font-style:normal;font-size:13px;animation:festFloat 1.2s ease-in-out infinite;filter:drop-shadow(0 0 5px #ff6a20)}
.fortune{font-size:12px;margin:0 0 8px;padding:4px 8px;border-radius:5px;background:#ffffff08;border:1px dashed #d0ad6d50;color:var(--muted)}.fortune b{color:var(--gold)}
.nextEv .lack{color:#ff7a6a}
.gcBanner{position:relative;height:70px;margin:-8px 0 12px;border-radius:8px;overflow:hidden;border:1px solid #d0ad6d40}
.gcBanner .cityArt{width:100%;height:100%;display:block}
.gcBanner span{position:absolute;right:8px;bottom:4px;font-family:Batang,'바탕',serif;color:#fff;text-shadow:0 1px 3px #000;font-size:14px}
@media(min-width:1121px) and (min-height:620px) and (max-height:860px){.fortune{display:none}}
.gcBanner{height:92px}
/* 지도를 2배 이상 확대하면 이름표 아래 장수 초상 줄 */
.node .nodeGens{display:none}
.map[data-near="1"] .node .nodeGens{display:flex;gap:2px;justify-content:center;margin-top:2px}
.node .nodeGens .portrait{width:18px;height:22px;border-radius:2px;border:1px solid #0008}
.logFilter{display:inline-flex;gap:2px}.logFilter button{font-size:10.5px;padding:1px 6px;border-radius:3px}.logFilter button.on{background:#d0ad6d30;color:var(--gold);border-color:#d0ad6d80}
.ico-raidblock:before{content:'⛓️'}.ico-pestilence:before{content:'☣️'}
.schemeDuel{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;background:#0d1518d8;border:1px solid #d0ad6d60;z-index:3}
.sdSide{display:flex;flex-direction:column;align-items:center;font-size:11px}.sdSide .portrait{width:38px;height:46px;border-radius:4px}.sdSide b{font-size:12px}.sdSide small{color:var(--muted)}
.sdMid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:110px}.sdMid span{font-size:11px;color:#ffe2a0}
.sdBar{width:110px;height:8px;border-radius:4px;background:#ffffff18;overflow:hidden}.sdBar i{display:block;height:100%;background:linear-gradient(90deg,#d0ad6d,#ffe3a0)}
.schemeDuel.ng .sdMid span{color:#ff9a8a}
.ico-gift:before{content:'🎁'}
.chronYear{margin:2px 0}.chronYear summary{cursor:pointer;font-size:13px;color:var(--gold);padding:2px 0}.chronYear summary small{color:var(--muted);margin-left:6px}
.chronYear .chron{max-height:none}
.dailyBtn{display:block;width:100%;margin-top:8px;font-size:13px;border-color:#d0ad6d80;background:#d0ad6d18}.dailyTag{color:var(--gold);font-size:10px}
@media(max-width:1120px){.devGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.devGrid div{grid-template-columns:auto minmax(0,1fr) 22px;min-width:0}}
@media(min-width:651px) and (max-width:1120px){#numpad.docked.open .padKeys{grid-auto-rows:32px;gap:2px;padding:3px}#numpad.docked .pk small{font-size:8.5px}.realm{overflow:visible}}
.ico-grain:before{content:'⚖️'}.ico-tax:before{content:'📜'}
.taxCell{padding:0 6px;font-size:12px;font-family:Batang,serif}.taxCell.t0{color:#9fe1c1}.taxCell.t2{color:#ff9a8a}
.taxAll{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:6px;align-items:center}.taxAll button{font-size:12px;padding:3px 8px}
.ownerLabel .spec{display:inline-block;padding:0 6px;border-radius:3px;background:#ffffff0e;color:var(--gold);margin-right:4px;font-size:12px;cursor:help}
.ico-incite:before{content:'📣'}
.loyD{font-style:normal;font-size:11px}.loyD.up{color:#9fe1c1}.loyD.dn{color:#ff9a8a}
.gstats .grow{color:#9fe1c1;font-size:9px;margin-left:1px}
.bfUnit .skillDesc{display:block;color:var(--gold);font-size:11px}

/* 태학 학문 — 천하 형세 위 한 줄 */
.study { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; margin: 2px 0 4px; }
.study b { margin-right: 2px; }
.study span { padding: 0 4px; border-radius: 8px; background: #0001; white-space: nowrap; }
.study span.on { background: #e8c04066; outline: 1px solid #b8901a; }
.study i { flex: 1 1 40px; min-width: 40px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #b8901a var(--p), #0002 var(--p)); }
.ico-research:before{content:'📜'}

/* 가을 사냥 — 숫자패드 모양 3×3 숲 */
.huntWrap { display: grid; gap: 10px; justify-items: center; }
.huntGrid { display: grid; grid-template-columns: repeat(3, 96px); gap: 8px; padding: 12px; border-radius: 12px; background: radial-gradient(circle at 30% 20%, #c8762a55, transparent 60%), linear-gradient(#3d5a2a, #24361a); }
.huntCell { position: relative; height: 84px; border: 2px solid #0004; border-radius: 10px; background: #5b7a3a radial-gradient(circle at 50% 80%, #2e4a1e 0 30%, transparent 32%); cursor: crosshair; font-size: 42px; }
.huntCell kbd { position: absolute; top: 4px; left: 6px; font-size: 11px; opacity: .8; }
.huntCell span { display: inline-block; }
.huntCell.up span { animation: huntUp .18s ease-out; }
.huntCell.hit { animation: huntHit .45s ease-out; }
.huntCell.miss { animation: huntMiss .45s ease-out; }
@keyframes huntHit { from { background-color: #e8c040; } }
@keyframes huntMiss { from { background-color: #8a3a2a; } }
.huntCell.flee span { opacity: 0; }
@keyframes huntUp { from { transform: translateY(18px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.huntHelp { margin: 0; text-align: center; font-size: 13px; }
@media (max-width: 420px) { .huntGrid { grid-template-columns: repeat(3, 76px); } .huntCell { height: 70px; font-size: 34px; } }

/* 도움말 — 지역 × 계절 일람 */
.seasonTable { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.seasonTable th, .seasonTable td { border: 1px solid #8884; padding: 4px 6px; vertical-align: top; text-align: left; }
.seasonTable thead th { background: #b8901a22; white-space: nowrap; }
.seasonTable tbody th { white-space: nowrap; background: #0001; }
@media (max-width: 600px) { .seasonTable { font-size: 11px; } .seasonTable th, .seasonTable td { padding: 3px; } }

/* 천하 무술 대회 대진 */
.tourney { display: grid; gap: 6px; margin-top: 8px; }
.tBout { display: grid; grid-template-columns: 34px 40px 1fr 54px 1fr 40px 74px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: #0002; opacity: 0; animation: tBoutIn .45s ease-out forwards; animation-delay: var(--d); }
.tBout .portrait { width: 40px; height: 40px; }
.tBout em { font-style: normal; font-size: 12px; opacity: .8; }
.tBout b:last-of-type { text-align: right; }
.tBout i { font-style: normal; text-align: center; font-weight: 700; }
.tBout.win i { color: #e8c040; } .tBout.lose i { color: #d0604a; }
.tBout small { font-size: 11px; opacity: .75; text-align: right; }
@keyframes tBoutIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .tBout { grid-template-columns: 30px 32px 1fr 40px 1fr 32px; } .tBout small { display: none; } .tBout .portrait { width: 32px; height: 32px; } }
.ovMarks { white-space: nowrap; font-size: 13px; }
/* 휴대폰 영토 일람 — 표 대신 도시마다 카드 한 장 (칸 이름은 순서로 붙인다) */
@media (max-width: 600px) {
  .ovWrap { overflow-x: visible; }
  .ovTable, .ovTable tbody { display: block; width: 100%; }
  .ovTable thead { display: none; }
  .ovTable tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; padding: 8px; margin-bottom: 8px; border: 1px solid #8884; border-radius: 10px; background: #0001; }
  .ovTable td { display: block; border: 0; padding: 1px 0; font-size: 12px; text-align: left; }
  .ovTable td:first-child { grid-column: 1 / -1; font-size: 15px; font-weight: 700; }
  .ovTable td:nth-child(8), .ovTable td:last-child { grid-column: 1 / -1; }
  .ovTable td:not(:first-child)::before { display: block; font-size: 10px; opacity: .65; }
  .ovTable td:nth-child(2)::before { content: '명령'; } .ovTable td:nth-child(3)::before { content: '병력'; }
  .ovTable td:nth-child(4)::before { content: '금'; } .ovTable td:nth-child(5)::before { content: '곡식'; }
  .ovTable td:nth-child(6)::before { content: '민심'; } .ovTable td:nth-child(7)::before { content: '세율'; }
  .ovTable td:nth-child(8)::before { content: '농/상/성/기/치'; } .ovTable td:nth-child(9)::before { content: '훈련'; }
  .ovTable td:nth-child(10)::before { content: '장수'; } .ovTable td:nth-child(11)::before { content: '표식'; }
}
.news time { display: inline-block; min-width: 3.2em; font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
#help.hasNew { position: relative; }
#help.hasNew::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e0453a; box-shadow: 0 0 0 2px var(--bg, #1a1a1a); }
.propAdvice { margin: 6px 0; padding: 6px 10px; border-left: 3px solid #b8901a; background: #b8901a1a; font-size: 13px; }
/* 이번 판 돌아보기 */
.recapGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.recapCard { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 6px 8px; border-radius: 8px; background: #b8901a14; border: 1px solid #b8901a33; }
.recapCard i { grid-row: 1 / 3; font-style: normal; font-size: 20px; align-self: center; }
.recapCard small { font-size: 11px; opacity: .7; }
.recapCard b { font-size: 13px; overflow-wrap: anywhere; }
.recapCard.wide { grid-column: span 2; } @media (max-width: 420px) { .recapCard.wide { grid-column: 1 / -1; } }
#log p.goCity { cursor: pointer; } #log p.goCity:hover span { text-decoration: underline dotted; }
/* 내기 바둑 수읽기 — 숫자패드 모양 3×3 판 조각 */
.bdWrap { display: grid; gap: 10px; justify-items: center; }
.bdGrid { display: grid; grid-template-columns: repeat(3, 84px); padding: 10px; background: #d9b06a; border-radius: 6px; box-shadow: inset 0 0 0 2px #8a6a34; }
.bdGrid.edge-tl { box-shadow: inset 4px 4px 0 0 #3a2a10; } .bdGrid.edge-tr { box-shadow: inset -4px 4px 0 0 #3a2a10; }
.bdCell { position: relative; height: 84px; border: 0; background: linear-gradient(#5a4520, #5a4520) center / 2px 100% no-repeat, linear-gradient(#5a4520, #5a4520) center / 100% 2px no-repeat; cursor: pointer; }
.bdCell kbd { position: absolute; top: 2px; left: 4px; font-size: 10px; opacity: .7; }
.bdCell .st { position: absolute; inset: 14px; border-radius: 50%; box-shadow: 1px 2px 3px #0006; transition: opacity .4s, transform .4s; }
.bdCell .st.b { background: radial-gradient(circle at 35% 30%, #666, #111 60%); }
.bdCell .st.w { background: radial-gradient(circle at 35% 30%, #fff, #ccc 70%); }
.bdCell .st.w.taken { opacity: 0; transform: scale(.4); }
.bdCell.ans { outline: 3px solid #e8c040; outline-offset: -3px; } .bdCell.miss { outline: 3px solid #c0392b; outline-offset: -3px; }
.bdHelp { margin: 0; text-align: center; font-size: 13px; }
@media (max-width: 420px) { .bdGrid { grid-template-columns: repeat(3, 70px); } .bdCell { height: 70px; } }
/* 귀 문제 — 바둑판 끝 쪽으로는 선이 뻗지 않는다 (L=선 색) */
.bdGrid.edge-tl .bdCell:nth-child(-n+3), .bdGrid.edge-tr .bdCell:nth-child(-n+3) { background: linear-gradient(#5a4520, #5a4520) center bottom / 2px 50% no-repeat, linear-gradient(#5a4520, #5a4520) center / 100% 2px no-repeat; }
.bdGrid.edge-tl .bdCell:nth-child(3n+1) { background: linear-gradient(#5a4520, #5a4520) center / 2px 100% no-repeat, linear-gradient(#5a4520, #5a4520) right center / 50% 2px no-repeat; }
.bdGrid.edge-tr .bdCell:nth-child(3n) { background: linear-gradient(#5a4520, #5a4520) center / 2px 100% no-repeat, linear-gradient(#5a4520, #5a4520) left center / 50% 2px no-repeat; }
.bdGrid.edge-tl .bdCell:nth-child(1) { background: linear-gradient(#5a4520, #5a4520) center bottom / 2px 50% no-repeat, linear-gradient(#5a4520, #5a4520) right center / 50% 2px no-repeat; }
.bdGrid.edge-tr .bdCell:nth-child(3) { background: linear-gradient(#5a4520, #5a4520) center bottom / 2px 50% no-repeat, linear-gradient(#5a4520, #5a4520) left center / 50% 2px no-repeat; }
.skill.second { background: #3d7bbf33; outline: 1px dashed #3d7bbf; margin-left: 3px; }
#logFilter button { min-height: 24px; min-width: 32px; } /* 누름 영역 24px 이상(WCAG 2.2) */
.hallTabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; } .hallTabs button { min-height: 24px; padding: 2px 8px; border-radius: 12px; font-size: 12px; } .hallTabs button.on { background: #b8901a; color: #fff; }
.hall li { position: relative; } .hallDel { margin-left: 6px; min-width: 24px; min-height: 24px; border: 0; background: transparent; opacity: .45; cursor: pointer; } .hallDel:hover, .hallDel:focus-visible { opacity: 1; color: #c0392b; }
.cardBtn { margin-left: 8px; min-height: 24px; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.odds { padding: 0 6px; border-radius: 8px; } .odds.good { background: #2e7d3233; color: #6fcf73; } .odds.mid { background: #b8901a33; color: #e8c040; } .odds.bad { background: #c0392b33; color: #f07a6a; }
.lifeLine { margin-top: 6px; font-size: 12px; } .lifeLine ol { margin: 4px 0 0; padding-left: 0; list-style: none; max-height: 180px; overflow: auto; } .lifeLine li { padding: 2px 0; border-bottom: 1px dotted #8884; } .lifeLine time { display: inline-block; min-width: 5.5em; opacity: .7; } .lifeLine li.great { color: #e8c040; } .lifeLine li.lose { color: #f07a6a; }
.starCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 6px 0 10px; } .starCard { display: grid; grid-template-columns: 22px 48px 1fr; grid-template-rows: auto auto auto; column-gap: 6px; text-align: left; padding: 8px; border-radius: 10px; background: #b8901a14; border: 1px solid #b8901a44; cursor: pointer; } .starCard i { grid-row: 1 / 4; font-style: normal; font-size: 18px; align-self: center; } .starCard .portrait { grid-row: 1 / 4; width: 48px; height: 48px; } .starCard small { opacity: .75; font-size: 11px; } .starCard em { font-style: normal; font-size: 11px; opacity: .8; }
.achLocked { margin: 6px 0 10px; } .achLocked summary { cursor: pointer; font-size: 13px; opacity: .8; min-height: 24px; }
.achProg { display: block; font-style: normal; font-size: 11px; color: #e8c040; opacity: .85; }
.achScene { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 8px; } .achScene b { font-size: 20px; color: #e8c040; } .achScene small { opacity: .7; }
.pick.short{opacity:.5;cursor:not-allowed}.lackTag{font-style:normal;font-size:11px;color:#ff7a6a;border:1px solid #ff7a6a66;border-radius:4px;padding:0 4px;margin-left:4px}
.nick{font-style:normal;font-size:10px;color:#1a1208;background:#d0ad6d;border-radius:3px;padding:0 3px;margin-right:3px;vertical-align:1px}
.nemScene{display:flex;gap:28px;justify-content:center;align-items:center;margin-top:10px}.nemScene figure{margin:0;text-align:center}.nemScene svg{width:88px;height:88px}.nemScene figcaption{font-size:13px;color:#f4ead2}.nemScene b{font-size:30px;color:#e8c040}.nemScene .fallen{filter:grayscale(.7);opacity:.75;transform:rotate(-8deg)}
.achGrp{margin:10px 0 4px;font-size:13px;color:var(--gold)}.achGrp small{color:var(--muted);font-weight:400}
.elders{display:flex;flex-wrap:wrap;gap:6px}.elder{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#ffffff06;color:inherit;font:inherit;cursor:pointer}.elder svg{grid-row:1/3;width:40px;height:40px}.elder b{font-size:13px}.elder small{font-size:11px;color:var(--muted)}.elder:hover,.elder:focus-visible{border-color:#e8c040;outline:none}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;margin:6px 0;font-size:13px}.legend b{display:inline-block;width:22px;text-align:center}
.dipStory{display:block;margin-top:3px;color:#e8c040}
.recapHi{list-style:none;padding:0;margin:4px 0;font-size:13px}.recapHi li{margin:3px 0}.recapHi b{display:inline-block;width:24px}
.defeatTip{margin:8px 0;padding:6px 10px;border-left:3px solid #d8584a;background:#d8584a14;font-size:13px}.defeatTip b{margin-right:6px;color:#ff9a8a}
/* 지도 가독성(2026-10-06) — 길은 확대 배율과 상관없이 같은 굵기(밑선+본선), 도시 이름표는 작은 알약 한 줄, 선택 도시와 이어진 도시는 금빛 */
#roads line.roadCase{stroke:#0b1214;stroke-opacity:.85;stroke-width:6;stroke-dasharray:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
#roads line.road{stroke:#ead9ae;stroke-opacity:.82;stroke-width:2.5;stroke-dasharray:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
#roads line.roadCase.highlight{stroke-width:9}
#roads line.road.highlight{stroke:#ffd76a;stroke-opacity:1;stroke-width:4.5;filter:drop-shadow(0 0 4px #ffcf5a)}
#roads line.road.front{stroke:#ff8a6a;stroke-opacity:.95;stroke-dasharray:7 5}
#roads line.road.front.highlight{stroke:#ffb08a}
#roads .labelLeader{vector-effect:non-scaling-stroke;stroke-width:1;stroke-dasharray:2 2;opacity:.8}
#roads .geoPin{transform-box:fill-box;transform-origin:center;transform:scale(calc(var(--label-scale,1) * 1.4));stroke-width:1.5;vector-effect:non-scaling-stroke}
.node{padding:1px 7px 3px;min-width:0;border-radius:9px;background:#0b1417e6;box-shadow:0 1px 4px #000c;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:4px;line-height:1.25}
.node[class]{border-bottom:0}
.node b{font-size:12px;font-weight:700}
.node small{font-size:10px;line-height:1.2;opacity:.85}
.node .tbar{position:absolute;left:7px;right:7px;bottom:1px;height:2px;margin:0}
.map[data-near="1"] .node .nodeGens{flex-basis:100%}
.node.linked{outline:1.5px solid #ffd76a;box-shadow:0 0 10px #ffd76a66;z-index:3}
.node.selected{outline:2px solid var(--gold)}
/* 명령 창 — 여러 명 고르기 */
.pick{position:relative}
.pick.on{outline:2px solid var(--gold);background:#d0ad6d22}
.pick .pickNo{position:absolute;top:4px;right:6px;font-style:normal;font-size:11px;font-weight:700;color:#182125;background:var(--gold);border-radius:8px;padding:0 6px;line-height:16px}
.multiNote{margin:8px 0 6px}
.multiNote+.primary{width:100%;padding:12px}
.victoryTip{border-left-color:var(--gold);background:#d0ad6d18}.victoryTip b{color:var(--gold)}
.node.crowd:not(:hover) small,.node.crowd:not(:hover) .tbar,.node.crowd:not(:hover) .nodeGens{display:none}.node.crowd{opacity:.85;z-index:1}
.corpsRecap{list-style:none;margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--gold);background:#d0ad6d12;font-size:13px;text-align:left}.corpsRecap li{margin:2px 0}
#roads line.road.peek{stroke:#fff1c2;stroke-opacity:1;stroke-width:4;filter:drop-shadow(0 0 3px #fff1c2)}
#roads line.roadCase.peek{stroke-width:8}
.node.peekLinked{outline:1.5px dashed #fff1c2;z-index:3}
.node .genN{font-style:normal;font-size:10px;margin-left:3px;color:#e8dcc0;opacity:.9}
.pick.on{background:#d0ad6d3d!important;outline:2px solid var(--gold)}.pick.on b::before{content:"✔ ";color:var(--gold)}
.pickList:has(.on) .pick.cursor:not(.on){outline-style:dashed;background:none}
.bSide .bTeam{display:flex;flex-direction:column;gap:2px;margin-left:-6px}.bSide .bTeam .portrait{width:22px;height:27px;border-radius:3px;border:1px solid #0009}
#roads line.road.danger{stroke:#ff4d3a;stroke-width:4;stroke-dasharray:8 4;animation:dangerPulse 1.4s ease-in-out infinite}
@keyframes dangerPulse{50%{stroke-opacity:.45}}
@media(prefers-reduced-motion:reduce){#roads line.road.danger{animation:none}}
#roads line.road.chance{stroke:#7fe0a8;stroke-width:3.5;stroke-dasharray:2 5;stroke-opacity:1}
.roadKey .rk{display:inline-block;width:18px;height:0;vertical-align:middle;margin:0 4px 0 8px;border-top:3px solid #ffd76a}
.roadKey .rk.war{border-top:2px dashed #ff8a6a}.roadKey .rk.danger{border-top:4px dashed #ff4d3a}.roadKey .rk.chance{border-top:3px dotted #7fe0a8}.roadKey .rk.route{border-top:3px dashed #f2c94c}
.roadKeyPop{position:relative;margin-left:auto}
.roadKeyPop summary{cursor:pointer;list-style:none;padding:2px 10px;border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--muted)}
.roadKeyPop summary::-webkit-details-marker{display:none}
.roadKeyPop[open] summary{color:var(--gold);border-color:var(--gold)}
.roadKeyPop .roadKey{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:320px;padding:10px 12px;background:#0d1619f2;border:1px solid var(--gold);border-radius:6px;font-size:12px;line-height:2;color:var(--ink);box-shadow:0 6px 18px #000a}
.roadKeyPop{margin-left:6px}
.speech .bTeam{display:flex;flex-direction:column;gap:2px;margin-left:-6px}.speech .bTeam .portrait{width:22px;height:27px;border-radius:3px;border:1px solid #0009}
.adjacent button.danger{box-shadow:inset 0 0 0 1.5px #ff4d3a;color:#ffb3a8}.adjacent button.chance{box-shadow:inset 0 0 0 1.5px #7fe0a8;color:#bff3d4}
.ico-retrain:before{content:'🔄'}.ico-assassinate:before{content:'🗡️'}.ico-sow:before{content:'✉️'}
.ico-assassinate:before{content:'🌙'}
.tile.castleEmpty{box-shadow:inset 0 0 0 3px #ff4d3a;animation:dangerPulse 1.2s ease-in-out infinite}
.tile.castleEmpty::after{content:'성이 비었다!';position:absolute;left:50%;top:2px;transform:translateX(-50%);font-size:10px;color:#fff;background:#b3261e;padding:0 4px;border-radius:3px;white-space:nowrap;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tile.castleEmpty{animation:none}}
.tile.castleEmpty{animation:castlePulse 1.2s ease-in-out infinite}@keyframes castlePulse{50%{box-shadow:inset 0 0 0 3px #ff4d3a44}}
.tile.castleEmpty::after{content:'빈 성!'}
#siegeToggle.off{opacity:.45}#siegeToggle:not(.off){background:#d0ad6d33;outline:1px solid var(--gold)}
.ico-joint:before{content:'🤝'}
.ico-joint:before{content:'🎌'}
.wizHead{margin:4px 0 8px;padding:6px 10px;border-left:3px solid var(--gold);background:#d0ad6d12}
.duelBadge{top:auto;bottom:86px;background:#7a1f1f}
.duelBadge{top:54px!important;bottom:auto!important;background:none!important;font-size:22px!important}
.map:not([data-near="1"]) #roads .frontFlag{display:none}