/* 온빛 삼국지 — play.html에서 분리(OPT-02). 수정 시 템플릿의 ?v= 올릴 것 */
:root{--ground:#080c16;--sea:#0b1120;--ink:#ece2cc;--mute:#8695ad;--gold:#e0b03e;--edge:rgba(150,170,200,.16);
--card:rgba(20,28,46,.72);--go:#d5573b;--baek:#3f86b4;--sin:#e0b03e;--vil:#c9a86a;}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(130% 90% at 50% -10%,#111b32,var(--sea) 55%,var(--ground) 100%);
color:var(--ink);font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;min-height:100vh;
-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding:20px 16px 60px}
h1{font-family:Georgia,'Nanum Myeongjo',serif;font-size:22px;letter-spacing:.04em;text-align:center;margin-bottom:2px}
.hanja{text-align:center;color:var(--gold);opacity:.75;letter-spacing:.4em;font-size:12px;font-family:Georgia,serif}
.bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0;font-size:13px;color:var(--mute)}
.bar b{color:var(--ink)}
.pill{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:5px 13px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px 16px;margin:12px 0;backdrop-filter:blur(6px)}
.card h2{font-family:Georgia,serif;font-size:15px;color:var(--gold);margin-bottom:10px;font-weight:600;letter-spacing:.02em}
.me{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stats{display:flex;gap:10px;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.stats b{color:var(--ink)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
button{font-family:inherit;cursor:pointer;border:1px solid var(--edge);background:rgba(255,255,255,.05);
color:var(--ink);border-radius:10px;padding:9px 14px;font-size:13.5px;transition:.15s}
button:hover{background:rgba(255,255,255,.11);border-color:var(--gold)}
button:disabled{opacity:.35;cursor:not-allowed}
.ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.oc{border:1px solid var(--edge);border-radius:11px;padding:10px 12px;background:rgba(0,0,0,.18);cursor:pointer;transition:.15s}
.oc:hover{border-color:var(--gold);background:rgba(224,176,62,.06)}
.oc .n{font-family:Georgia,serif;font-size:15px;font-weight:700}
.oc .r{font-size:11px;color:var(--gold)}
.oc .m{font-size:11px;color:var(--mute);margin-top:3px}
.tag{font-size:10px;padding:1px 6px;border-radius:8px;border:1px solid var(--edge);color:var(--mute);margin-left:4px}
.travel{display:flex;gap:8px;flex-wrap:wrap}
.travel button{font-size:12.5px;padding:7px 11px}
.scene{position:relative;width:100%;aspect-ratio:1344/768;max-height:236px;border-radius:12px;overflow:hidden;
background-size:cover;background-position:center 42%;margin-bottom:11px;border:1px solid var(--edge);display:none}
.scene.on{display:block}
.scene .ov{position:absolute;left:0;right:0;bottom:0;padding:26px 15px 11px;
background:linear-gradient(transparent,rgba(9,7,4,.78))}
.scene .pn{font-size:21px;font-weight:700;font-family:Georgia,'Nanum Myeongjo',serif;color:#fff;letter-spacing:.02em;text-shadow:0 2px 7px rgba(0,0,0,.7)}
.scene .ps{font-size:12px;color:#e8dcc2;opacity:.9;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
#worldmap{position:fixed;inset:0;z-index:21;background:radial-gradient(120% 90% at 50% 0%,#10233a,#0a1626 55%,#070d16 100%);display:none;flex-direction:column}
#worldmap.on{display:flex}
#worldmap .mhd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--edge);flex:0 0 auto}
#worldmap .mhd .t{font-size:16px;font-weight:700;color:var(--gold);font-family:Georgia,'Nanum Myeongjo',serif}
#worldmap .mwrap{flex:1;overflow:hidden;position:relative;background:#070d16;
-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
#mapSvg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;
-webkit-user-select:none;-moz-user-select:none;user-select:none}
#mapSvg:active{cursor:grabbing}
/* 라벨 글씨 드래그 선택 방지 — 맵 패닝이 글씨 선택으로 먹히지 않게 */
#mapSvg text,#mapSvg tspan{user-select:none;-webkit-user-select:none;-moz-user-select:none}
#mapSvg .mlabel,#mapSvg .mvlabel,#mapSvg .mtlabel,#mapSvg .mpklabel,#mapSvg .mlmlabel,
#mapSvg .mme,#mapSvg .mhome,#mapSvg .mfac,#mapSvg .mmark,#mapSvg .mq{pointer-events:none}
#worldmap .zb{font-size:16px;font-weight:700;padding:3px 10px;line-height:1.1;border-color:var(--edge);color:#ddd;min-width:34px}
#worldmap .mleg{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:9px;padding:9px 14px;border-top:1px solid var(--edge);font-size:11px;color:var(--mute);justify-content:center}
#worldmap .mleg b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px;vertical-align:middle}
/* 맵 위 도시목록 패널 */
#mapCityPanel{position:absolute;top:10px;left:10px;bottom:10px;width:min(340px,88vw);z-index:8;display:none;flex-direction:column;
background:rgba(10,12,18,.94);border:1px solid rgba(224,176,62,.35);border-radius:12px;padding:10px 12px;
box-shadow:0 8px 28px rgba(0,0,0,.45);backdrop-filter:blur(6px);overflow:hidden}
#mapCityPanel .cityRow:hover{background:rgba(224,176,62,.07);border-radius:8px}
@media(max-width:520px){
#mapCityPanel{left:0;right:0;top:auto;bottom:0;width:100%;height:48%;border-radius:14px 14px 0 0}
}
.scene{max-height:340px}
.hotspot{position:absolute;transform:translate(-50%,-50%);cursor:pointer;text-align:center;z-index:3;transition:transform .12s}
.hotspot:active{transform:translate(-50%,-50%) scale(.9)}
.hotspot .hi{position:relative;font-size:23px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
.hotspot .hn{font-size:10px;color:#fff;background:rgba(10,8,4,.72);border-radius:4px;padding:1px 5px;margin-top:2px;white-space:nowrap;text-shadow:0 1px 2px #000;display:inline-block}
.hotspot.fog{opacity:.85}.hotspot.fog .hi{filter:grayscale(1) brightness(.7) drop-shadow(0 1px 3px #000)}
.hotspot .badge{position:absolute;top:-5px;right:-9px;background:var(--gold);color:#1a1206;font-size:9px;font-weight:800;border-radius:8px;padding:0 4px;box-shadow:0 1px 2px rgba(0,0,0,.5)}
#locModal{position:fixed;inset:0;background:rgba(5,8,15,.82);display:none;align-items:flex-end;justify-content:center;z-index:22}
#locModal.on{display:flex}
#locModal .lbox{width:100%;max-width:640px;background:var(--card);border:1px solid var(--edge);border-radius:16px 16px 0 0;padding:16px 16px 24px;max-height:82vh;overflow-y:auto}
#locModal .lh{display:flex;align-items:center;gap:9px;margin-bottom:6px}
#locModal .lh .li{font-size:30px}.lh .lt{font-size:19px;font-weight:700;font-family:Georgia,'Nanum Myeongjo',serif;color:var(--gold)}
#locModal .lb{font-size:13px;color:var(--mute);margin-bottom:12px;line-height:1.5}
#locModal .lacts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.log{font-size:13px;line-height:1.7;color:var(--mute);max-height:180px;overflow-y:auto}
.log .hi{color:var(--ink)}
/* 접견 모달 */
#aud{position:fixed;inset:0;background:rgba(5,8,15,.82);display:none;align-items:flex-end;justify-content:center;z-index:25;padding:0}
#aud.on{display:flex}
.audbox{width:100%;max-width:640px;background:linear-gradient(180deg,#0e1626,#0a1120);border:1px solid var(--edge);
border-radius:16px 16px 0 0;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;box-shadow:0 -20px 60px -20px #000}
.audhd{padding:14px 16px;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center}
.audhd .nm{font-family:Georgia,serif;font-size:17px;font-weight:700}
.audhd .cl{cursor:pointer;color:var(--mute);font-size:20px;background:none;border:none}
.chat{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:9px 13px;border-radius:13px;font-size:14px;line-height:1.55}
.msg.them{align-self:flex-start;background:rgba(224,176,62,.10);border:1px solid rgba(224,176,62,.22)}
.msg.me{align-self:flex-end;background:rgba(63,134,180,.16);border:1px solid rgba(63,134,180,.3)}
.msg.sys{align-self:center;font-size:11.5px;color:var(--mute);background:none}
.audin{display:flex;gap:8px;padding:12px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--edge);flex:0 0 auto}
.audin input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--edge);border-radius:10px;color:var(--ink);
padding:11px 13px;font-size:14px;font-family:inherit}
.audin input:focus{outline:none;border-color:var(--gold)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--mute);border-top-color:var(--gold);
border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(10,15,26,.95);
border:1px solid var(--edge);border-radius:10px;padding:9px 15px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:9999}
.toast.on{opacity:1}
/* 전투 */
#battle{position:fixed;inset:0;z-index:22;background:radial-gradient(130% 90% at 50% -10%,#241a12,#120d0a 60%,#0a0706 100%);display:none;overflow-y:auto;padding:16px}
#battle.on{display:flex;flex-direction:column;align-items:center}
.btitle{font-family:Georgia,serif;font-size:17px;color:var(--gold);margin:4px 0 10px;text-align:center}
.bgrid{display:grid;gap:3px;width:100%;max-width:620px;margin:0 auto}
.cell{aspect-ratio:1;background:rgba(120,150,90,.13);border:1px solid rgba(150,170,200,.22);border-radius:5px;position:relative;cursor:pointer;transition:.1s}
.cell.숲{background:rgba(84,173,124,.26)}
.cell.산{background:rgba(146,120,90,.36)}
.cell.강{background:rgba(63,134,180,.38);cursor:not-allowed}
.cell .ter{position:absolute;bottom:1px;right:2px;font-size:8px;opacity:.5;pointer-events:none}
.cell.mv{outline:2px solid rgba(63,134,180,.55);outline-offset:-2px}
.cell.atk{outline:2px solid rgba(213,87,59,.8);outline-offset:-2px}
.tok{position:absolute;inset:8%;border-radius:50%;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center top;border:2.5px solid #888;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.tok.sub{filter:saturate(.6) brightness(.9)}
.tok.sel{box-shadow:0 0 0 3px var(--gold),0 1px 4px rgba(0,0,0,.6)}
.tok.routed{opacity:.28;filter:grayscale(1)}
@keyframes clashShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(2px,2px)}}
@keyframes clashBurst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.tok.hit{animation:clashShake .4s}
#windpanel{position:absolute;top:3px;right:3px;z-index:8;background:rgba(9,11,16,.62);border:1px solid rgba(224,176,62,.28);border-radius:9px;padding:4px 6px;text-align:center;min-width:52px;max-width:64px;backdrop-filter:blur(2px);opacity:.9}
#windpanel .wx{font-size:14px;line-height:1}
#windpanel .compass{position:relative;width:30px;height:30px;margin:2px auto 1px;border-radius:50%;border:1.5px solid rgba(224,176,62,.4)}
#windpanel .compass .n{position:absolute;top:-1px;left:50%;transform:translateX(-50%);font-size:6px;color:var(--mute)}
#windpanel .compass .arrow{position:absolute;left:50%;top:50%;font-size:15px;transform-origin:center;transition:transform .4s;filter:drop-shadow(0 0 2px #000)}
#windpanel .lab{font-size:8px;color:#cfc4ae;line-height:1.3;margin-top:1px}
.clashfx{position:absolute;left:50%;top:50%;font-size:26px;z-index:9;pointer-events:none;animation:clashBurst .55s ease-out forwards;filter:drop-shadow(0 0 3px #ffcf6a)}
.dmgpop{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-size:12px;font-weight:800;color:#ff6a4a;z-index:9;pointer-events:none;text-shadow:0 1px 2px #000;animation:dmgUp .8s ease-out forwards}
@keyframes dmgUp{0%{opacity:0;top:40%}25%{opacity:1}100%{opacity:0;top:-6%}}
.tok .nm{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:#fff;background:rgba(10,8,4,.82);border-radius:5px;padding:0 4px;white-space:nowrap;text-shadow:0 1px 1px #000;z-index:2}
.tok .tr{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:#fff;background:rgba(10,8,4,.85);border-radius:5px;padding:0 4px;line-height:1.3;z-index:2}
.tok .arm{position:absolute;bottom:6%;left:-4px;font-size:13px;filter:drop-shadow(0 1px 1px #000)}
.tok .face{position:absolute;font-size:13px;font-weight:900;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.tok .hpwrap{position:absolute;bottom:-9px;left:5%;width:90%}
.tok .hp{height:3px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.tok .hpf{height:100%}
.bctl{display:flex;gap:8px;margin:12px 0;justify-content:center;flex-wrap:wrap}
.blog{max-width:620px;width:100%;font-size:12.5px;line-height:1.6;color:var(--mute);max-height:110px;overflow-y:auto;margin:0 auto;background:rgba(0,0,0,.2);border:1px solid var(--edge);border-radius:10px;padding:9px 13px}
.blog .last{color:var(--ink)}
.bresult{font-family:Georgia,serif;font-size:22px;margin:10px;text-align:center}
#start{position:fixed;inset:0;overflow-y:auto;z-index:15;background:radial-gradient(130% 90% at 50% -10%,#111b32,var(--sea) 55%,var(--ground) 100%);padding:34px 16px 60px;display:none}
#start.on{display:block}
#succ{position:fixed;inset:0;overflow-y:auto;z-index:18;background:radial-gradient(130% 90% at 50% -10%,#1a1220,#0b0a12 55%,#080608 100%);padding:40px 16px 60px;display:none}
#succ.on{display:block}
#ending{position:fixed;inset:0;overflow-y:auto;z-index:24;background:radial-gradient(130% 90% at 50% 0%,#2a2212,#140f0a 55%,#0a0806 100%);display:none;padding:20px}
#ending.on{display:block}
#debate{position:fixed;inset:0;background:rgba(5,8,15,.86);display:none;align-items:flex-end;justify-content:center;z-index:23}
#corps,#diplo{position:fixed;inset:0;background:rgba(5,8,15,.84);display:none;align-items:flex-end;justify-content:center;z-index:21}
#corps.on,#diplo.on{display:flex}
#duelM{position:fixed;inset:0;background:rgba(5,8,15,.9);display:none;align-items:center;justify-content:center;z-index:24;padding:10px}
#duelM.on{display:flex}
#duelM .dbox{width:100%;max-width:520px;background:radial-gradient(120% 100% at 50% 0%,#241a12,#120d0a 70%);border:1px solid rgba(224,176,62,.35);border-radius:16px;padding:15px;max-height:94vh;overflow-y:auto}
.dl-board{position:relative;margin:8px auto}
.dl-cell{position:absolute;width:56px;height:52px;border:1.5px dashed rgba(224,176,62,.35);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;background:rgba(0,0,0,.25)}
.dl-cell.filled{border-style:solid;cursor:default;font-weight:700}
.dl-cell.hot{border-color:var(--gold);box-shadow:0 0 8px rgba(224,176,62,.4)}
.dl-card{display:inline-flex;flex-direction:column;align-items:center;padding:7px 11px;border:1.5px solid var(--edge);border-radius:10px;cursor:pointer;background:#1a140d;margin:3px}
.dl-card.sel{border-color:var(--gold);box-shadow:0 0 9px rgba(224,176,62,.5);transform:translateY(-3px)}
.dl-hp{height:9px;border-radius:5px;background:#2a2018;overflow:hidden;flex:1}
.dl-hp>div{height:100%;background:linear-gradient(90deg,#d5573b,#e0b03e);transition:width .3s}
/* 🗣 채팅형 설전 */
.deb-topic{background:rgba(224,176,62,.08);border:1px solid rgba(224,176,62,.35);border-radius:10px;padding:8px 11px;margin:4px 0 8px;font-size:13px;color:#f0e6cf;line-height:1.45}
.deb-chat{max-height:min(42vh,280px);overflow-y:auto;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:8px 2px;margin:2px 0;display:flex;flex-direction:column;gap:7px}
.deb-row{display:flex}
.deb-row.me{justify-content:flex-end}
.deb-row.foe{justify-content:flex-start}
.deb-bubble{max-width:88%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.55;color:#ece2cc}
.deb-bubble.me{background:rgba(224,176,62,.14);border:1px solid rgba(224,176,62,.4);border-bottom-right-radius:4px}
.deb-bubble.foe{background:rgba(213,87,59,.12);border:1px solid rgba(213,87,59,.35);border-bottom-left-radius:4px}
.deb-who{display:block;font-size:10px;color:#e79a86;margin-bottom:2px;font-weight:700}
.deb-dmg{font-size:10.5px;margin-top:4px;color:#8fd3a0;font-weight:700}
.deb-dmg.foe{color:#e79a86}
.deb-sys{text-align:center;font-size:11px;color:var(--mute);padding:2px 8px;line-height:1.4}
.deb-sys.end{color:var(--gold);font-weight:700;font-size:12.5px;padding:6px}
#debate.on{display:flex}
.dcard{cursor:pointer;border-radius:8px;padding:8px 4px;width:46px;text-align:center;font-family:Georgia,serif;transition:.12s;border:1.5px solid}
.dcard:hover{transform:translateY(-3px)}
.dcard .dn{font-size:19px;font-weight:700}.dcard .dc{font-size:10px;opacity:.85}
.dcard.도리{background:rgba(84,173,124,.18);border-color:#54ad7c;color:#8fd1a8}
.dcard.이해{background:rgba(63,134,180,.18);border-color:#3f86b4;color:#9fc0e0}
.dcard.인정{background:rgba(213,87,59,.18);border-color:#d5573b;color:#e79a86}
#ending .hanja{font-size:16px}#ending h1{color:var(--gold)}
#title{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 90% at 50% 15%,#241a10,#0d0a07 75%)}
#title.on{display:flex}
.titlein{width:100%;max-width:440px;text-align:center}
.thanja{font-family:Georgia,'Nanum Myeongjo',serif;color:#c9a86a;letter-spacing:.5em;font-size:14px;margin-bottom:6px;opacity:.85;padding-left:.5em}
.ttl{font-family:Georgia,'Nanum Myeongjo',serif;font-size:44px;font-weight:800;color:#f0e6cf;letter-spacing:.04em;margin:2px 0 14px;text-shadow:0 2px 12px rgba(224,176,62,.25)}
.tdesc{color:#a89f8a;font-size:13.5px;line-height:1.8;margin-bottom:30px}
.tbtns{display:flex;flex-direction:column;gap:13px}
.tbig{display:flex;flex-direction:column;align-items:center;gap:3px;padding:17px;font-size:18px;font-weight:700;border:1.5px solid var(--edge);border-radius:14px;background:rgba(20,15,9,.6);color:#e8dcc2;cursor:pointer;transition:.12s}
.tbig:active{transform:scale(.98)}
.tbig.gold{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(224,176,62,.2)}
.tbig .tsub{font-size:11.5px;font-weight:400;color:var(--mute)}
.tfoot{color:#6b6252;font-size:11.5px;margin-top:26px;letter-spacing:.02em}
.startin{max-width:860px;margin:0 auto}
.pick{cursor:pointer}
.pick .st{display:flex;gap:8px;font-size:11px;color:var(--mute);margin-top:6px;font-variant-numeric:tabular-nums}
.pick .st b{color:var(--ink)}
.pick .ps{font-size:11.5px;color:var(--mute);margin-top:6px;line-height:1.5}
.gsel{padding:9px 14px;font-size:13px}
.gsel.on{border-color:var(--gold);color:var(--gold);background:rgba(224,176,62,.08)}
.bgb{padding:8px 11px;font-size:12.5px;text-align:left;line-height:1.3}
.bgb.on{border-color:var(--gold);color:var(--ink);background:rgba(224,176,62,.08)}
.srow{display:grid;grid-template-columns:32px 1fr 30px auto;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.srow input[type=range]{width:100%;accent-color:var(--gold)}
.srow .sv{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
/* 🧭 지도 안 메뉴 — 강인규 패널 아래 세로 스택 */
/* 🌙 하루가 지나가는 연출 — 어두워졌다 밝아짐 */
#dayfx{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 50% 34%,rgba(28,36,66,.5),rgba(3,5,11,.97) 78%)}
#dayfx.play{animation:daypass 1.5s ease-in-out forwards}
#dayfx #dayfxIcon{font-size:46px;opacity:0;transform:scale(.6);filter:drop-shadow(0 0 16px rgba(224,176,62,.55))}
#dayfx.play #dayfxIcon{animation:dayicon 1.5s ease-in-out forwards}
@keyframes daypass{0%{opacity:0}26%{opacity:.96}70%{opacity:.96}100%{opacity:0}}
@keyframes dayicon{0%{opacity:0;transform:scale(.6) translateY(6px)}30%{opacity:.95;transform:scale(1) translateY(0)}
62%{opacity:.9;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.1) translateY(-8px)}}
.achip{border:1px solid var(--edge);background:rgba(255,255,255,.03);color:var(--mute);border-radius:14px}
.achip.on{border-color:#c9a0e0;color:#c9a0e0;background:rgba(201,160,224,.1)}
.scenemenu{position:absolute;left:9px;top:82px;z-index:5;display:flex;flex-direction:column;gap:4px;pointer-events:auto}
.scenemenu button{display:flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;font-size:11.5px;font-weight:600;
border:1px solid rgba(224,176,62,.28);border-radius:9px;background:rgba(9,7,4,.66);color:#ece2cc;
text-shadow:0 1px 2px rgba(0,0,0,.8);line-height:1.1;backdrop-filter:blur(2px)}
.scenemenu button:hover{border-color:var(--gold);background:rgba(28,20,10,.85);color:var(--gold)}
.scenemenu button span{font-size:11.5px}
/* 📱↔ 가로(PC형) 최적화 — 폰을 눕히면 씬이 화면을 꽉 채운다 */
#rothint{display:none}
@media (orientation:portrait) and (max-width:820px){
#rothint{display:flex;align-items:center;justify-content:center;gap:7px;position:sticky;top:0;z-index:15;
background:linear-gradient(90deg,rgba(224,176,62,.16),rgba(224,176,62,.06));border:1px solid rgba(224,176,62,.3);
border-radius:10px;padding:7px 12px;margin:6px 0 2px;font-size:12px;color:var(--gold)}
}
@media (orientation:landscape) and (max-width:1000px){
.wrap{max-width:100%;padding:8px 14px 24px}
h1,.hanja{display:none} /* 가로에선 타이틀 접어 화면 확보 */
.bar{margin:6px 0}
.scene{max-height:none;height:auto} /* 씬이 가로폭 가득(PC형 큰 화면) */
.scenemenu{top:76px;gap:5px}
.scenemenu button{font-size:12.5px;padding:6px 12px 6px 9px}
}
/* 🎴 컴팩트 게임 헤더 */
.ghd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px;margin-bottom:2px}
.ghd .gtitle{font-family:Georgia,'Nanum Myeongjo',serif;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.ghd .gtitle .gh{color:var(--gold);opacity:.75;font-size:12px;letter-spacing:.15em;margin-right:4px}
.ghd .ghbtns{display:flex;gap:5px;flex-shrink:0}
.ghd .ghbtns button{font-size:11.5px;padding:5px 9px;border-radius:8px;border-color:rgba(224,176,62,.35);color:#d9cdb0}
.ghd .ghbtns button:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:400px){ .ghd .gtitle .gh{display:none} .ghd .ghbtns button{padding:5px 7px} }
.vmenu{display:flex;flex-direction:column;gap:7px}
.vmenu>button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:11px 14px;font-size:14px;font-weight:600;border:1px solid var(--edge);border-radius:11px;background:rgba(255,255,255,.02);color:var(--ink)}
.vmenu>button:hover{border-color:rgba(224,176,62,.5);background:rgba(224,176,62,.05)}
.vmenu>button small{font-size:11px;font-weight:400;color:var(--mute)}
.ctbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ctbl th{text-align:left;color:var(--mute);font-weight:500;font-size:11px;padding:4px 6px;border-bottom:1px solid var(--edge)}
.ctbl td{padding:7px 6px;border-bottom:1px dashed rgba(255,255,255,.06)}
.ctbl tr[data-id]{cursor:pointer}
.ctbl tr[data-id]:hover{background:rgba(224,176,62,.06)}
.stg{font-size:10.5px;padding:1px 7px;border-radius:9px;border:1px solid}
.stg.신뢰{color:#8fd3a0;border-color:#8fd3a066}.stg.친밀{color:#e0c06a;border-color:#e0c06a66}.stg.면식{color:#9aa;border-color:#99aa9944}
/* 📱 0725 오빠 1일차: 모바일에서 텍스트 드래그(선택)돼 조작 방해 — 게임 UI 전면 선택 금지, 입력창만 허용 */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text}
/* ── 📱 접견 키보드 잠식 대응 (0725 그록 스펙 §13, L1~L3) ── */
/* L1: 키보드 열림(kb-open) — 시트를 visualViewport에 맞추고 입력줄 고정 */
#aud.kb-open .audbox{max-height:100%;border-radius:12px}
#aud.kb-open .audin{position:sticky;bottom:0;background:rgba(10,8,4,.97);z-index:2;padding-bottom:max(8px,env(safe-area-inset-bottom))}
#aud.kb-open .chat{min-height:0;flex:1 1 auto}
/* L2: 가로+낮은 높이 or 키보드 중 — compact(초상 축소·부가행 숨김) */
@media (orientation:landscape) and (max-height:500px){
#aud .audhd #audportrait img,#aud .audhd #audportrait video,#aud .audhd #audportrait>div{width:36px!important;height:36px!important}
#aud.kb-open #learnRow,#aud.kb-open #audChoices{display:none}
#aud.kb-open .audhd button{padding:4px 8px!important;font-size:11px!important}
}
/* L3: 가로 접견 split — 좌 인물 / 우 대화 (시스템 가로 철학 정합) */
@media (orientation:landscape) and (max-width:1000px){
#aud{align-items:center;padding:6px}
#aud .audbox{max-width:min(960px,100%);max-height:96vh;flex-direction:row;flex-wrap:wrap;border-radius:14px}
#aud .audhd{width:30%;border-bottom:none;border-right:1px solid var(--edge);flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
#aud .chat{width:70%;max-height:calc(100% - 96px)}
#aud .audin,#aud #audChoices{width:70%;margin-left:auto}
#aud.kb-open .audhd{width:22%;padding:8px}
#aud.kb-open .chat{width:78%}
}
/* ── 🧺 좌판 UI (0725 그록 spec-shop-stall-ui S1·S2) ── */
.shop-sec{border-top:1px solid rgba(224,176,62,.28);margin-top:13px;padding-top:10px;font-size:13px;font-weight:700}
.stall-hero{display:flex;gap:12px;align-items:center;margin-top:8px;padding:10px 12px;border:1px solid rgba(224,176,62,.35);border-radius:12px;background:linear-gradient(160deg,rgba(58,42,20,.55),rgba(26,19,10,.75))}
.stall-ph{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(224,176,62,.25);background:linear-gradient(150deg,#3a2c16,#241a0d);color:rgba(224,176,62,.6)}
.stall-row{border-bottom:1px solid rgba(255,255,255,.10)!important}
@media (orientation:landscape) and (min-width:700px){
.stall-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
}
/* ===== 중간지도 단계 화면(겹침 없는 독립 화면) ===== */
#zoomstage{position:fixed;inset:0;z-index:60;display:none;background:#0a0d0a;overflow:hidden;-webkit-user-select:none;user-select:none}
#zoomstage.on{display:block;animation:zfade .18s ease}
@keyframes zfade{from{opacity:0}to{opacity:1}}
#zoomstage .zmid{position:absolute;inset:0}
#zoomstage .zbg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#zoomstage .zov{position:absolute;inset:0;width:100%;height:100%}
#zoomstage .zdot{cursor:pointer}
#zoomstage .zlabel{fill:#fff;font-weight:700;paint-order:stroke;stroke:#000;stroke-width:.5px;text-anchor:middle;pointer-events:none}
/* 상단 얇은 반투명 바 — 지도 핀·가도를 가리지 않게(하단 비움) */
.zmid-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:7px 11px;z-index:6;background:linear-gradient(rgba(12,10,6,.72),rgba(12,10,6,0))}
.zmid-bar #zMidTitle{color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;text-shadow:0 1px 7px #000,0 0 4px #000;pointer-events:none}
.zmid-bar button{background:rgba(28,24,18,.72);border:1px solid rgba(201,162,75,.6);color:#e8ddc7;border-radius:16px;
padding:5px 13px;font-size:13px;cursor:pointer;min-width:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.zmid-bar button:active{background:rgba(201,162,75,.85);color:#241f18}