*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05060a;color:#e9dfc8;font-family:'Noto Serif KR',serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.bar{font-family:inherit;color:#eadfc6;background:rgba(14,12,10,.72);border:1px solid rgba(200,165,90,.45);border-radius:999px;padding:9px 16px;font-size:14px;letter-spacing:.02em;backdrop-filter:blur(6px);cursor:pointer;touch-action:manipulation}
.bar b{color:#e4be6a}
#topbar{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;max-width:calc(100% - 110px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#snd{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px}
#pts{position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 46px);left:10px;cursor:default}
#floorbtn{position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 46px);right:10px;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 16px;font-size:18px;font-weight:700;color:#f6e7b8;background:rgba(58,42,16,.9);border:2px solid #e4be6a;box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,220,140,.15) inset;z-index:13}
#floorbtn .ficon{display:inline-flex;width:28px;height:28px}
#floorbtn .ficon svg{width:28px;height:28px;fill:none;stroke:#f1d27c;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#floorbtn:active{transform:scale(.97)}
.small{font-size:12.5px;padding:9px 12px}
.panel{word-break:keep-all;position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 88px);left:10px;width:min(360px,calc(100% - 20px));background:rgba(12,10,9,.9);border:1px solid rgba(200,165,90,.4);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.55;backdrop-filter:blur(8px)}
.panel[hidden]{display:none}
.panel .row{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid rgba(200,165,90,.15)}
.panel .row:last-child{border:0}
.panel .no{color:#b99a55;min-width:1.4em}
.panel .done{color:#8d8574;text-decoration:line-through}
.panel .tag{margin-left:auto;color:#e4be6a;font-size:12px;white-space:nowrap}
.toast{word-break:keep-all;position:fixed;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 92px);z-index:25;transform:translateX(-50%);max-width:calc(100% - 28px);text-align:center;font-size:13.5px;line-height:1.5;padding:9px 14px;border-radius:12px;background:rgba(10,9,8,.75);color:#d9ceb4;opacity:0;transition:opacity .6s;pointer-events:none}
.toast.on{opacity:1}
#fps{position:fixed;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 88px);font:11px/1.3 monospace;color:#9f9;background:rgba(0,0,0,.55);padding:2px 6px;z-index:50;pointer-events:none;border-radius:4px}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05060a;color:#cbbd9a;font-size:16px;z-index:100;transition:opacity .6s}
#boot.gone{opacity:0;pointer-events:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .25s}

#reticle{position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid rgba(255,214,140,.8);border-radius:50%;pointer-events:none;box-shadow:0 0 8px rgba(255,190,100,.5);z-index:5}
#reticle::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:rgba(255,214,140,.9);border-radius:50%}
#card{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);width:min(560px,calc(100% - 20px));max-height:52vh;overflow:auto;background:rgba(12,10,8,.94);border:1px solid #c9a65b;border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.65;color:#eadfc6;word-break:keep-all;z-index:20;touch-action:pan-y}
#card[hidden]{display:none}
#card h3{margin:0 0 2px;font-size:20px;color:#f1d27c}
#card .ttl{font-size:12.5px;color:#a89c82;margin-bottom:8px}
#card p{margin:0 0 7px}
#card .plate{margin-top:8px;padding-top:8px;border-top:1px solid rgba(200,165,90,.3);font-size:13px;color:#cdbb8e}
#card .x{position:absolute;right:10px;top:10px;padding:6px 12px;font-size:13px}
.panel .row small{display:block;color:#8d8574;font-size:12px}

.fpanel{left:auto;right:10px;top:calc(max(10px,env(safe-area-inset-top)) + 46px + 56px + 8px);width:min(300px,calc(100% - 20px));display:flex;flex-direction:column;gap:8px;z-index:13}
.fpanel .ftitle{font-size:15px;font-weight:700;color:#f1d27c;padding:0 4px 2px}
.fpanel[hidden]{display:none}
.fl{font-family:inherit;text-align:left;color:#f4ecd6;background:rgba(40,30,16,.92);border:1.5px solid rgba(228,190,106,.6);border-radius:14px;padding:10px 14px;min-height:56px;font-size:19px;font-weight:700;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:space-between;gap:8px}
.fl:active{transform:scale(.98)}
.fl.cur{border-color:#f1d27c;color:#f1d27c;background:rgba(90,66,24,.92)}.fl small{color:#cdbb8e;font-size:13px;font-weight:600}
.fl.wd{margin-top:2px;min-height:48px;font-size:16px;font-weight:600;background:rgba(14,12,10,.85)}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
#fade.on{opacity:1;pointer-events:auto}
body.entering #hud,body.entering #reticle{display:none}
#entry{position:fixed;z-index:30;display:flex;color:#eadfc6;font-family:inherit;word-break:keep-all;touch-action:manipulation}
#entry .ebox{background:rgba(12,10,9,.9);border:1px solid rgba(200,165,90,.45);border-radius:16px;padding:16px 18px;backdrop-filter:blur(8px);width:100%}
#entry h2{margin:0 0 2px;font-size:20px;color:#f1d27c}
#entry .sub{margin:0 0 10px;font-size:13px;color:#a89c82}
#entry .grp{display:block;margin:10px 0 5px;font-size:13px;color:#cdbb8e}
#entry .nrow{display:flex;gap:8px}
#entry input{flex:1;min-width:0;font-family:inherit;font-size:16px;padding:9px 12px;border-radius:10px;border:1px solid rgba(200,165,90,.5);background:rgba(0,0,0,.45);color:#f3e8cc;user-select:text;-webkit-user-select:text}
#entry .msg{min-height:18px;margin-top:4px;font-size:12.5px;color:#e08a7a}
#entry .chips{display:flex;gap:6px;flex-wrap:wrap}
#entry .chip{font-family:inherit;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid rgba(200,165,90,.4);background:rgba(30,22,14,.8);color:#eadfc6;cursor:pointer}
#entry .chip.on{border-color:#e4be6a;background:rgba(80,56,18,.9);color:#fff0c4}
#entry .sw{display:flex;gap:8px;flex-wrap:wrap}
#entry .swb{width:34px;height:34px;border-radius:50%;border:2px solid rgba(200,165,90,.35);cursor:pointer;font-family:inherit;font-size:11px;color:#cdbb8e;background:#1b1712;padding:0}
#entry .swb.on{border-color:#f5d778;box-shadow:0 0 0 2px rgba(245,215,120,.35)}
#entry .go{margin-top:14px;width:100%;font-family:inherit;font-size:17px;padding:12px;border-radius:12px;border:1px solid #d6b160;background:rgba(70,48,14,.95);color:#f8e7b8;cursor:pointer}
@media (orientation:portrait),(max-width:700px){#entry{left:0;right:0;bottom:0;padding:0 10px calc(env(safe-area-inset-bottom) + 10px)}}
@media (orientation:landscape) and (min-width:701px){#entry{right:24px;top:50%;transform:translateY(-50%);width:380px}}

.toast.bottom{top:auto;bottom:calc(env(safe-area-inset-bottom) + 72px)}
#pts .sess{display:block;font-size:11px;font-weight:400;opacity:.78;margin-top:1px;white-space:nowrap}
/* G1: HTML 이름표 알약 (밤도서관 .tag 스타일, 파묘 톤) */
.tags{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.tagpill{position:absolute;left:0;top:0;transform-origin:50% 100%;padding:2px 9px;border-radius:999px;background:rgba(24,18,12,.74);border:1px solid rgba(201,166,91,.62);color:#f0e3c0;font:700 12.5px/1.35 'Noto Serif KR',serif;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 1px 6px rgba(0,0,0,.35);word-break:keep-all}
.tagpill.me{border-color:#e8c46e;color:#fff2c8}
/* v5: 이름표 칭호(금색 테두리 + 작은 칭호 줄) */
.tagpill{display:flex;flex-direction:column;align-items:center;gap:0}
.tagpill .tt{display:block;font:700 10.5px/1.25 'Noto Serif KR',serif;color:#ffe3a0;letter-spacing:-.2px}
.tagpill.gold{border:2px solid #f0c451;background:rgba(40,28,8,.82);box-shadow:0 0 8px rgba(240,196,81,.55)}
.tagpill.gold .nm{color:#fff2c8 !important}
/* v5: 하단 큰 버튼 줄(손가락으로 누르기 쉬운 56px 이상) */
#actions{position:fixed;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 4px);transform:translateX(-50%);z-index:12;display:flex;gap:8px;max-width:calc(100% - 16px);justify-content:center;pointer-events:auto}
#actions[hidden]{display:none}
#actions .act{position:relative;min-width:68px;min-height:58px;padding:6px 10px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:16px;border:1px solid rgba(201,166,91,.55);background:rgba(24,18,12,.84);color:#f0e3c0;font:700 12.5px/1.15 'Noto Serif KR',serif;cursor:pointer;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(4px);word-break:keep-all;white-space:nowrap}
#actions .act svg{width:26px;height:26px;fill:none;stroke:#f1d27c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#actions .act.on{background:rgba(90,66,24,.92);border-color:#f1d27c}
#actions .act.off{opacity:.45}
#actions .act:active{transform:scale(.96)}
#actions .bd{position:absolute;top:-6px;right:-4px;min-width:18px;padding:0 5px;border-radius:9px;background:#c43c3c;color:#fff;font:700 11px/18px sans-serif;font-style:normal;text-align:center}
body.card-open #actions,body.entering #actions{display:none}
body.has-actions .toast.bottom{bottom:calc(env(safe-area-inset-bottom) + 92px)}
body.has-actions #f4pg{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px) !important}
.collgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:6px 0}
.coll .th{aspect-ratio:3/4;background:#1a130c;border:1px solid #4a3a20;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#6a5a3a;font-size:26px}
.coll.own .th{border-color:#f0c451;box-shadow:0 0 6px rgba(240,196,81,.4)}.coll .th img{width:100%;height:100%;object-fit:cover}
.coll small{display:block;text-align:center;font-size:11px;color:#a89c82;margin-top:3px;line-height:1.25;word-break:keep-all}.coll.own small{color:#f0e3c0}
.collnt{font-size:12.5px;color:#b9ae92}