/* 상상 보드 — G 게임 화면 배치를 웹에(주당 11-12 '스크롤 없이 한 화면에서 다 끝내는 G 의 게임 UI 방식'):
   왼쪽 위 캐릭터·체력바(늘 보임) · 가운데 = G 에서 보이는 것(묘사 글, 창은 그 위에 겹쳐 뜸) · 오른쪽 위 지도, 그 아래 이야기 기록·채팅 · 아래 단축칸.
   색·글꼴은 홈페이지(portal.css) 변수만. 화면 높이 = 창 높이 − 홈페이지 머리줄(--imtop, JS 가 잼). */
html.imon,body.imon{overflow:hidden;height:100%}
body.imon{padding-bottom:0!important}
.imdoll #dollbox{position:static!important;width:auto!important;height:auto!important}
body.imon #main,body.imon .wgbar,body.imon #ygf,body.imon .yg-ad,body.imon #dollw:not(.imdoll #dollw){display:none!important}
.imb{max-width:1440px;margin:0 auto;padding:6px 10px;box-sizing:border-box;display:grid;grid-template-columns:230px minmax(0,1fr) 340px;gap:10px;position:relative;font-size:16px;height:calc(100vh - var(--imtop,56px))}
.imb[hidden]{display:none}
.imhud{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
.imcenter{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.imright{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.imtop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line,#ddd);padding-bottom:4px}
.imtop h2{margin:0;font-size:1.4em}
.imtop .env{margin:0;color:var(--dim,#666);font-size:.92em}
.imscene{flex:1;min-height:0;overflow:auto;background:#fffdf8;border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);padding:18px 22px;line-height:1.9;font-size:1.12em}
.imscene p{margin:0 0 .8em}
.imscene .rgd{color:#3a3a3a;font-style:italic;font-size:1.04em}
.imscene .near .nr{display:block;margin-bottom:.45em}
.imscene .far{color:#444;font-size:.94em}
.imscene .hpm{font-size:.78em;color:#a33}
a.ew{cursor:pointer;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding:0 1px}
a.ew:hover{background:#fff3c4}
a.ew.k-m,b.k-m{color:#b0281a}a.ew.k-n,b.k-n{color:#946c00}a.ew.k-p,b.k-p{color:#1f7a49}a.ew.k-i,b.k-i{color:#7d3c98}a.ew.k-h,b.k-h,a.ew.k-d,b.k-d{color:#b44a00}
.impanel{max-height:45%;overflow:auto;flex:none}
.impanel[hidden]{display:none}
.impanel .card{margin:0 0 6px}
.imwin{position:absolute;z-index:20;left:3%;right:3%;top:44px;bottom:74px;background:#fffdf8;border:1px solid #b9ae92;border-radius:12px;box-shadow:0 10px 34px #0004;display:flex;flex-direction:column}
.imwin[hidden]{display:none}
.imwin .wh{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e3dccb}
.imwin .wh b{flex:1;font-size:1.1em}
.imwinb{overflow:auto;padding:8px 10px;flex:1}
.imwinb .card{margin:0 0 8px}
.imhotw{flex:none}
.imhotw .imhot{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.imhot .hs{position:relative;height:56px;border:1px solid #bbb;border-radius:8px;background:#f4f1ea;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.imhot .hs img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.imhot .hk{position:absolute;left:4px;top:1px;font-size:.7em;color:#777}
.imhot .hn{position:absolute;right:4px;bottom:1px;font-size:.75em;font-weight:700}
.imhot .tx{font-size:.8em;font-weight:700;color:#555}.imhot .tx.sk{color:#1f4e79}
.imdoll{display:flex;justify-content:center;background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);padding:4px;height:170px;flex:none;overflow:hidden}
.imdoll #dollw{margin:0!important;border:0!important;padding:0!important;min-height:0!important;background:none!important;box-shadow:none!important}
.imdoll canvas,.imdoll img{max-height:162px;width:auto!important;height:auto}
.imme{background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);padding:8px}
.imme .nm{display:block;margin-bottom:2px}
.imme .bar{margin:3px 0}
.imst{background:#fff7dd;border:1px solid #e8d48a;border-radius:8px;padding:6px 8px;font-size:.9em}
.imst.err{background:#fde8e6;border-color:#e3a39b}
.immenu{display:flex;flex-direction:column;gap:2px}
.immenu .pa{text-align:left;margin:0}
.immenu .pa.on{background:#ffe6a6;border-color:#d4a73a}
.pa{display:inline-block;border:1px solid #c9c2b2;background:#fffdf7;border-radius:7px;padding:5px 9px;margin:2px;cursor:pointer;font:inherit;font-size:.9em;color:inherit;text-decoration:none}
.pa:hover{background:#fff1c9}
.pa small{color:#999;float:right;margin-left:6px}
.immapw{position:relative;line-height:0;flex:none}
#immap{border-radius:8px;border:1px solid #444;touch-action:none;cursor:crosshair}
.imzoom{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;gap:4px}
.imzoom button{width:28px;height:28px;border-radius:6px;border:1px solid #fff8;background:#0006;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.imjoy{position:absolute;left:10px;bottom:10px;width:100px;height:100px;border-radius:50%;background:#0003;border:2px solid #fff8;touch-action:none}
.imjoy[hidden]{display:none}
.imjoy i{position:absolute;left:30px;top:30px;width:40px;height:40px;border-radius:50%;background:#fffc;transition:transform .05s}
.imjoy.run{border-color:#f5c542}
.imlog{list-style:none;margin:0;padding:8px 10px;background:#faf8f3;border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);flex:1;min-height:60px;overflow-y:auto;font-size:.9em;line-height:1.55}
.imlog li{margin:1px 0}
.imlog li.kill{color:#7a1d10;font-weight:600}.imlog li.hurt{color:#a33}.imlog li.hurt0{color:#666}.imlog li.ppl{color:#1f6a40}.imlog li.say{color:#1f4e79}.imlog li.sys{color:#6b5a1e}.imlog li.err{color:#a33}.imlog li.env{color:#557;font-style:italic}.imlog li.move{color:#333;font-weight:600}
.imlog b.num,.imscene b.num{font-size:1.1em;color:#000}
.imchatslot{flex:none}
.imchatslot #chatw{position:static!important;width:auto!important;max-width:none!important;margin:0!important;inset:auto!important;box-shadow:none!important;padding:6px!important}
.imchatslot #chatw .clog{height:72px!important;max-height:72px;min-height:0!important}
.imhint{line-height:1.35;font-size:.72em;color:var(--dim,#777);flex:none}
.impop{position:absolute;z-index:30;width:290px;background:#fffdf8;border:1px solid #b9ae92;border-radius:10px;box-shadow:0 6px 24px #0003;padding:9px 10px;font-size:.93em}
.impop[hidden]{display:none}
.impop .ph{display:flex;align-items:baseline;gap:6px}
.impop .ph b{font-size:1.08em}
.impop .pk{color:#888;font-size:.85em;flex:1}
.impop .px,.imwin .px{border:0;background:none;font-size:1.3em;cursor:pointer;color:#888}
.impop .pd{margin:6px 0;line-height:1.6;color:#333}
.impop .pacts{display:flex;flex-wrap:wrap}
.impop .hotpick .pa{display:flex;align-items:center;gap:4px}
.impop .hotpick img{width:22px;height:22px;image-rendering:pixelated}
.imwm{position:absolute;z-index:40;left:250px;right:360px;top:44px;background:#fffdf8;border:1px solid #b9ae92;border-radius:10px;box-shadow:0 8px 30px #0004;padding:8px 10px}
.imwm[hidden]{display:none}
.imwm .wmh{display:flex;align-items:center;gap:8px;margin-bottom:6px}.imwm .wmh b{flex:1}
.imwm .wmz button{width:28px;height:28px;margin-left:3px}
.imwm canvas{display:block;max-width:100%;border-radius:6px;cursor:crosshair}
.imwm .px{border:0;background:none;font-size:1.3em;cursor:pointer}
/* 휴대폰: 한 화면 — 체력바 한 줄 → 지역 → 지도(+조이스틱) → 단축칸 → 묘사 글(남은 높이) → 기록 → 채팅 입력. 홈페이지 머리줄은 게임 중 숨김 */
@media (max-width:900px){
 body.imon #ygh{display:none}
 .imb{display:flex;flex-direction:column;gap:5px;padding:4px 6px;height:100dvh;font-size:15px}
 .imcenter,.imright,.imhud{display:contents}
 .imdoll,.immenu .pa[data-w=here],.imhint{display:none}
 #imsdyn{display:contents}
 .imme{order:0;padding:3px 6px;display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:5px;align-items:center}
 .imme .small,.imme .bar .lb{display:none}
 .imme .bar{margin:0;display:flex;align-items:center;gap:3px;min-width:0}.imme .bar .track{flex:1;min-width:20px}.imme .bar .nv{font-size:.66em;white-space:nowrap;min-width:0}.imme .nm{font-size:.8em;margin:0;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .immenu{order:1;flex-direction:row;flex-wrap:nowrap;overflow-x:auto}
 .immenu .pa{padding:3px 7px;font-size:.82em;white-space:nowrap}.immenu .pa small{display:none}
 .imtop{order:2;padding-bottom:2px}.imtop h2{font-size:1.1em}.imtop .env{font-size:.78em}
 .immapw{order:3}.imst{order:4;padding:3px 6px}.imhotw{order:4}
 .imhot .hs{height:38px}.imhot .hs img{width:28px;height:28px}.imhotw .imhot{gap:3px}.imhot .hk{font-size:.6em}
 .imscene{order:5;flex:1;padding:10px 12px;font-size:1em;line-height:1.75}
 .impanel{order:6;max-height:35%}
 .imlog{order:7;flex:none;height:62px;min-height:0;padding:4px 8px;font-size:.84em}
 .imchatslot{order:8}
 .imchatslot #chatw .clog,.imchatslot #chatw .ctabs{display:none!important}
 .imwin{position:fixed;left:6px;right:6px;top:44px;bottom:50px}
 .imwm{position:fixed;left:6px;right:6px;top:44px}
}
.imscene .sense{color:#2c3e50;border-left:3px solid #c9b98a;padding-left:10px}
.imlog li.sense{color:#4a4a6a}
.impop .pic{width:32px;height:32px;image-rendering:pixelated;margin-right:4px;align-self:center}
#imwin .items li,#impanel .items li{cursor:pointer}
.cdxhud{display:block;text-align:left;background:#fff6e0;border-color:#d9b25a;margin:0}
.cdxhud b{float:right}
.cdxbar{display:block;height:6px;background:#eee;border-radius:3px;margin-top:4px;overflow:hidden}.cdxbar i{display:block;height:100%;background:#c8962e}
.bar.cdx .track i{background:#c8962e}
.cdxh{cursor:pointer}
.cdxs .cp{font-size:.85em;color:#999;margin-right:6px}.cdxs .cp.got{color:#2e7d32;font-weight:600}
.cdxs .cd{color:#555}
.impop .cdxl{margin:4px 0;color:#9a6a00;font-size:.88em}
.imlog li.cdx{color:#8a5a00;font-size:1.05em}
.roads{margin-top:.6em;display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:.85em}.roads .rl{color:#888;margin-right:4px}.roads .pa small{float:none;color:#999}
.friends{background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);padding:6px 8px;font-size:.88em;line-height:1.6}.friends .fl{color:#888;font-size:.85em}
.impop .samecmd{margin-top:6px;font-size:.8em;color:#999}
@media (max-width:900px){.friends{display:none}}
.imhot .hs.off{opacity:.45;filter:grayscale(1)}
.wslots{background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:var(--radius,10px);padding:6px 8px}.wslots>div{display:flex;gap:4px;margin-top:3px}.wslots .ws{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;margin:0}.wslots .ws img{width:32px;height:32px;image-rendering:pixelated}.wslots .ws.on{background:#ffe6a6;border-color:#d4a73a}
@media (max-width:900px){.wslots{display:none}}
.imhot .hs.mgon{background:#ffe6a6;border-color:#d4a73a;box-shadow:0 0 0 2px #f2c14e inset}.imhot .mgb{position:absolute;left:0;right:0;top:-2px;font-size:.62em;font-weight:700;color:#8a5a00}
.imhot .hs.mglock{background:#e6e6e6;filter:grayscale(1);opacity:.55}.imhot .mgl{position:absolute;right:2px;top:0;font-size:.7em}
.imkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:none}
.imkeys .kk{position:relative;height:46px;border:1px solid #b9b2a2;border-bottom-width:4px;border-radius:9px;background:#fbf8f1;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;user-select:none;touch-action:none;transition:transform .05s,border-bottom-width .05s,background .05s}
.imkeys .kk b{font-size:1.05em}.imkeys .kk small{font-size:.66em;color:#888}
.imkeys .kk[data-k=ShiftLeft]{grid-column:2/-1}
.imkeys .kk.on{background:#ffe08a;border-color:#c99a2e;border-bottom-width:1px;transform:translateY(3px)}
@media (max-width:900px){.imkeys{order:3}.imkeys .kk{height:40px}}
.skd li{line-height:1.6;margin:4px 0}
@media (min-width:1600px){.imb{font-size:18px;grid-template-columns:260px minmax(0,1fr) 400px}.imscene{font-size:1.18em}}
.imwinb .card,.impanel .card{height:auto!important;min-height:0!important;max-height:none!important}
.imwinb .cdxr{padding:8px 12px}
.imlog b.wpn{color:#6b4a1e}.imlog b.skn{color:#1f4e79}
.imdoll canvas,.imdoll img{max-height:162px!important;max-width:100%!important;width:auto!important;height:auto!important;object-fit:contain}.imdoll #dollw *{position:static!important}
.imdoll div.doll{zoom:.56;flex:none}.imdoll #dollbox{height:162px!important;display:flex!important;justify-content:center;overflow:hidden}
.sndtop{margin-left:auto}.sndtop .pa{margin:0;padding:3px 10px}