:root{--bg: #0e1116;--panel: rgba(16, 20, 28, .86);--border: #3a4252;--text: #e6e9ef;--muted: #9aa3b2;--accent: #d4a84a;--hp: #c0392b;--mp: #2e86de;--exp: #d4a84a}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;overflow:hidden}#game{position:fixed;top:0;right:0;bottom:0;left:0}#game canvas{display:block}button{font:inherit;color:inherit;cursor:pointer}.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1f2a3a,#07090c);z-index:10;padding:16px}.login-panel{width:min(420px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:14px}.login-panel h1{margin:0;text-align:center;color:var(--accent);letter-spacing:2px}.login-panel .sub{margin:-8px 0 4px;text-align:center;color:var(--muted);font-size:13px}.login-panel form,#chars{display:flex;flex-direction:column;gap:12px}.login-panel label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.login-panel input:not([type=radio]){padding:10px;border-radius:6px;border:1px solid var(--border);background:#0b0e13;color:var(--text);font-size:15px}.login-panel button{padding:10px;border:1px solid var(--border);border-radius:6px;background:#1b212c}.login-panel button:disabled{opacity:.5;cursor:default}.login-panel button.primary{padding:12px;border:0;background:var(--accent);color:#1a1406;font-weight:700;font-size:16px}.login-panel button.link{padding:0;border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12px}.login-panel button.danger{border-color:#8e2a2a;color:#ff8a80}.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:6px;overflow:hidden}.tabs button{border:0!important;border-radius:0!important;background:transparent!important;color:var(--muted)}.tabs button.active{background:#d4a84a26!important;color:var(--text);font-weight:700}.chars-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}.chars-head small{color:var(--muted)}#char-list{display:flex;flex-direction:column;gap:6px}.char-card{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;cursor:pointer}.char-card.sel{border-color:var(--accent);background:#d4a84a1a}.char-card i{width:12px;height:12px;border-radius:50%}.char-card small{color:var(--muted);margin-left:6px}.char-card .on{color:#69f0ae;font-size:11px;margin-left:6px}.char-card .del{padding:2px 8px!important;font-size:12px;color:var(--muted)}.char-card .confirm{grid-column:1 / -1;display:flex;gap:6px}.char-card .confirm input{flex:1;min-width:0;padding:6px 8px!important;font-size:13px!important}.char-card .confirm button{padding:6px 10px;font-size:12px}.empty{color:var(--muted);font-size:13px;text-align:center;padding:12px;border:1px dashed var(--border);border-radius:6px}details{border:1px solid var(--border);border-radius:6px;padding:10px}details[open] summary{margin-bottom:10px}summary{cursor:pointer;font-size:13px}.class-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.class-pick label{cursor:pointer}.class-pick input{display:none}.class-pick span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:1px solid var(--border);border-radius:6px;color:var(--text)}.class-pick small{color:var(--muted);font-size:11px}.class-pick input:checked+span{border-color:var(--accent);background:#d4a84a1f}.error{color:#ff6b6b;min-height:1em;margin:0;font-size:13px;text-align:center}.error:empty{display:none}.error.ok{color:#69f0ae}.hint{color:var(--muted);font-size:12px;margin:0}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:13px}#hud>*{pointer-events:auto}#status{position:absolute;top:12px;left:12px;width:240px;padding:10px;display:flex;flex-direction:column;gap:6px}#st-name{font-weight:700}#st-name small{color:var(--muted);font-weight:400;margin-left:6px}#st-stats{color:var(--muted);font-size:12px}.bar{position:relative;height:16px;background:#000a;border:1px solid #000;border-radius:3px;overflow:hidden}.bar>div{height:100%;width:0;transition:width .15s}.bar>span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:11px;text-shadow:0 1px 2px #000}.bar.hp>div{background:linear-gradient(#e74c3c,var(--hp))}.bar.mp>div{background:linear-gradient(#54a0ff,var(--mp))}.bar.exp>div{background:linear-gradient(#f5d17a,var(--exp))}#exp{position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:0;border-left:0;border-right:0}#exp>span{font-size:10px}#minimap{position:absolute;top:12px;right:12px;width:160px;height:160px;border:1px solid var(--border);border-radius:8px;background:#000;image-rendering:pixelated}#zone-indicator{position:absolute;top:151px;right:13px;width:158px;padding:2px 6px;border-radius:0 0 7px 7px;background:#000000b3;font-size:11px;font-weight:700;text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#chat{position:absolute;left:12px;bottom:24px;width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column}#chat-log{height:160px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}#chat-log .sys{color:var(--accent)}#chat-log b{color:#9ad0ff;margin-right:4px}#chat-log .party,#chat-log .party.sys{color:#8bd8a0}#chat-log .party b{color:#b9f6ca}#chat-input{margin:0;padding:8px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--text);outline:none;border-radius:0 0 8px 8px}#hotbar{position:absolute;right:12px;bottom:24px;display:flex;gap:6px}.slot{position:relative;width:56px;height:56px;border:1px solid var(--border);border-radius:8px;background:var(--panel);display:grid;place-items:center;overflow:hidden}.slot:hover{border-color:var(--accent)}.slot .key{position:absolute;top:2px;left:5px;font-size:10px;color:var(--muted)}.slot .qty{position:absolute;bottom:2px;right:5px;font-size:11px}.slot .label{font-size:12px;font-weight:700}.slot .cd{position:absolute;left:0;right:0;bottom:0;background:#000b;height:0}#inventory{position:absolute;top:184px;right:12px;width:300px;max-height:calc(100vh - 290px);padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}.inv-head{display:flex;align-items:center;gap:8px;font-weight:700}.inv-head #inv-gold{color:#f0c419;font-weight:400;margin-left:auto}.inv-head button{background:none;border:0;color:var(--muted)}#inv-equip{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px}#inv-equip div{padding:6px;border:1px dashed var(--border);border-radius:6px;color:var(--muted)}#inv-equip div b{display:block;color:var(--text);font-weight:500}#inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.item{position:relative;aspect-ratio:1;border:1px solid var(--border);border-radius:5px;background:#0b0e13;display:grid;place-items:center}.item.sel{border-color:var(--accent)}.item.eq:after{content:"E";position:absolute;top:1px;left:3px;font-size:9px;color:var(--accent)}.item i{width:60%;height:60%;border-radius:4px;display:block}.item .q{position:absolute;bottom:1px;right:3px;font-size:10px}.item .e{position:absolute;top:1px;right:3px;font-size:9px;color:#b39ddb}#party{position:absolute;top:var(--left-stack-top, 132px);left:12px;width:240px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}.party-head{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}.party-head small{color:var(--muted);font-weight:400}.party-head button,.pm-kick{margin-left:auto;padding:2px 8px;border:1px solid var(--border);border-radius:4px;background:#1b212c;font-size:11px;color:var(--muted)}#party-list{display:flex;flex-direction:column;gap:6px}.pm-name{display:flex;align-items:center;gap:4px;font-size:12.5px}.pm-name small{color:var(--muted)}.party-member .bar{height:6px}#st-pvp{font-size:12px;display:flex;flex-direction:column;gap:2px}#st-pvp .hostile{color:#ffab40;font-weight:700}#st-pvp .shield{color:#80d8ff}#st-pvp .bounty{color:#ff5252;font-weight:700}#shop-warning{margin:0;padding:6px 8px;border-radius:5px;background:#b71c1c40;color:#ff8a80;font-size:12.5px}#atone{display:flex;flex-direction:column;gap:8px;font-size:13px}#atone .row{display:flex;gap:6px;align-items:center}#atone input{width:70px;padding:5px;border:1px solid var(--border);border-radius:4px;background:#0b0e13;color:var(--text)}#atone button{padding:6px 12px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#atone button:disabled{opacity:.4}#player-menu button.danger{border-color:#8e2a2a;color:#ff8a80}#zone-banner{position:absolute;top:76px;left:50%;transform:translate(-50%);padding:8px 18px;border-radius:8px;background:#0a0c10cc;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;animation:zone-in .3s ease-out}#zone-banner b{font-size:17px}#zone-banner span{font-size:12px;color:var(--muted)}@keyframes zone-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}#duel-invite{position:absolute;top:200px;left:50%;transform:translate(-50%);padding:12px 16px;display:flex;flex-direction:column;gap:8px;align-items:center;border-color:#ef9a9a}#duel-invite p{margin:0;font-weight:700}#duel-invite .actions{display:flex;gap:6px}#duel-invite button{padding:6px 14px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#duel-invite button.primary{background:#ef9a9a;color:#2a0d0d;border:0;font-weight:700}#duel-banner{position:absolute;top:140px;left:50%;transform:translate(-50%);padding:6px 16px;border-radius:8px;background:#3c0a0ad9;border:1px solid #ef5350;color:#ffcdd2;font-weight:700;pointer-events:none;text-align:center}#duel-banner .count{display:block;font-size:34px;color:#fff}#party-invite{position:absolute;top:72px;left:50%;transform:translate(-50%);padding:12px 16px;display:flex;flex-direction:column;gap:8px;align-items:center;border-color:var(--accent)}#party-invite p{margin:0;font-weight:700}#party-invite .actions,#player-menu{display:flex;gap:6px}#party-invite button,#player-menu button{padding:6px 14px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#party-invite button.primary{background:var(--accent);color:#1a1406;border:0;font-weight:700}#player-menu{position:absolute;flex-direction:column;padding:8px;min-width:140px;z-index:5}#player-menu b{font-size:13px;padding:0 2px 4px}#guild{position:absolute;top:184px;right:12px;width:340px;max-height:calc(100vh - 290px);padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}#guild-title small{color:var(--accent);font-weight:400;font-size:12px}#guild-count{color:var(--muted);font-weight:400;font-size:11.5px;margin-left:auto}#guild-close{background:none;border:0;color:var(--muted)}#guild-create,#guild-notice-form{display:flex;flex-direction:column;gap:6px}#guild input,#guild textarea{padding:8px;border:1px solid var(--border);border-radius:5px;background:#0b0e13;color:var(--text);font:inherit;resize:vertical}#guild button{padding:6px 10px;border:1px solid var(--border);border-radius:5px;background:#1b212c;font-size:12px}#guild button.danger{border-color:#8e2a2a;color:#ff8a80}#guild-notice{padding:8px;border:1px dashed var(--border);border-radius:6px;font-size:12.5px;white-space:pre-wrap;color:#d7ccc8}#guild-notice.editable{cursor:pointer}#guild-members{display:flex;flex-direction:column;gap:3px}.guild-member{display:grid;grid-template-columns:8px 44px 1fr auto;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;font-size:12.5px;color:var(--muted)}.guild-member.on{color:var(--text);background:#ffffff08}.guild-member i{width:7px;height:7px;border-radius:50%;background:#555}.guild-member.on i{background:#69f0ae}.gm-rank{font-size:11px;color:var(--muted)}.gm-rank.master{color:var(--accent)}.gm-rank.officer{color:#90caf9}.gm-name small{margin-left:5px;color:var(--muted);font-size:11px}.gm-act{display:flex;gap:3px}.gm-act button{padding:2px 6px!important;font-size:11px!important}.guild-foot{display:flex;gap:6px;justify-content:flex-end}#mail{position:absolute;top:184px;right:12px;width:340px;max-height:calc(100vh - 290px);padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}#mail-close{background:none;border:0;color:var(--muted);margin-left:auto}#mail .shop-tabs button{padding:6px;border:0;background:transparent;color:var(--muted)}#mail .shop-tabs button.active{background:#d4a84a26;color:var(--text);font-weight:700}#mail-list{display:flex;flex-direction:column;gap:3px}.mail-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--muted)}.mail-row.unread{color:var(--text);border-color:#6d5a2d}.mail-row.unread .subj{font-weight:700}.mail-row .att{color:#f0c419}.mail-row small{font-size:11px}.mail-empty{color:var(--muted);font-size:13px;text-align:center;padding:16px}#mail-detail{display:flex;flex-direction:column;gap:8px;font-size:13px}.md-head small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}#md-body{white-space:pre-wrap;padding:8px;border:1px dashed var(--border);border-radius:6px;min-height:2em}#md-attach{color:#f0c419;font-size:12.5px}.md-actions{display:flex;gap:6px}.md-actions button,#mail-compose button{padding:6px 10px;border:1px solid var(--border);border-radius:5px;background:#1b212c;font-size:12px}.md-actions button:disabled{opacity:.4}.md-actions button.primary{background:var(--accent);color:#1a1406;border-color:var(--accent);font-weight:700}#mail-compose{display:flex;flex-direction:column;gap:6px}#mail-compose input,#mail-compose textarea{padding:8px;border:1px solid var(--border);border-radius:5px;background:#0b0e13;color:var(--text);font:inherit;resize:vertical}.slot .badge{position:absolute;top:2px;right:3px;min-width:16px;padding:0 4px;border-radius:8px;background:#e53935;color:#fff;font-size:10px;font-weight:700;line-height:16px}#guild-wars{display:flex;flex-direction:column;gap:4px}.war-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid #8e4a1a;border-radius:6px;background:#e651001f;font-size:12.5px}.war-row b{color:#ffab40}.war-row .score{font-weight:700}.war-row small{color:var(--muted)}#war-propose{display:flex;gap:6px}#war-propose input{flex:1;min-width:0}#war-proposal{position:absolute;top:200px;left:50%;transform:translate(-50%);padding:12px 16px;display:flex;flex-direction:column;gap:6px;align-items:center;border-color:#ffab40;max-width:calc(100vw - 24px);text-align:center}#war-proposal p{margin:0;font-weight:700}#war-proposal small{color:var(--muted)}#war-proposal .actions{display:flex;gap:6px}#war-proposal button{padding:6px 14px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#war-proposal button.primary{background:#ffab40;color:#2a1606;border:0;font-weight:700}#guild-invite{position:absolute;top:140px;left:50%;transform:translate(-50%);padding:12px 16px;display:flex;flex-direction:column;gap:8px;align-items:center;border-color:#90caf9}#guild-invite p{margin:0;font-weight:700}#guild-invite .actions{display:flex;gap:6px}#guild-invite button{padding:6px 14px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#guild-invite button.primary{background:#90caf9;color:#0d1b2a;border:0;font-weight:700}#chat-log .guild,#chat-log .guild.sys{color:#90caf9}#chat-log .guild b{color:#bbdefb}#shop{position:absolute;top:var(--left-stack-top, 132px);left:12px;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - var(--left-stack-top, 132px) - 240px);padding:12px;display:flex;flex-direction:column;gap:8px}.shop-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.shop-head small{color:var(--accent);font-weight:400;font-size:12px}#shop-gold{margin-left:auto;color:#f0c419;font-weight:400;font-size:13px}#shop-close{background:none;border:0;color:var(--muted)}#shop-greeting{margin:0;color:var(--muted);font-size:12.5px}.shop-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:6px;overflow:hidden}.shop-tabs button{padding:7px;border:0;background:transparent;color:var(--muted)}.shop-tabs button.active{background:#d4a84a26;color:var(--text);font-weight:700}#shop-list{overflow-y:auto;display:flex;flex-direction:column;gap:4px}.shop-row{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px}.shop-row i{width:18px;height:18px;border-radius:4px}.shop-row .name small{display:block;color:var(--muted);font-size:11px}.shop-row .price{color:#f0c419;font-size:12px;white-space:nowrap}.shop-row .act{display:flex;gap:4px}.shop-row input{width:52px;padding:4px;border:1px solid var(--border);border-radius:4px;background:#0b0e13;color:var(--text)}.shop-row button{padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:#1b212c}.shop-row button:disabled{opacity:.4;cursor:default}.shop-empty{color:var(--muted);font-size:13px;text-align:center;padding:16px}#inv-detail{font-size:12px;color:var(--muted);min-height:3em}#inv-detail b{color:var(--text)}#inv-detail .actions{display:flex;gap:6px;margin-top:6px}#inv-detail .actions button{flex:1;padding:6px;border:1px solid var(--border);border-radius:5px;background:#1b212c}#help{position:absolute;top:12px;left:50%;transform:translate(-50%);padding:6px 12px;font-size:11.5px;color:var(--muted);max-width:calc(100vw - 540px);text-align:center}#death{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);padding:16px 28px;background:#300a;border:1px solid #c0392b;border-radius:8px;font-size:18px;font-weight:700;pointer-events:none}@media(max-width:800px){#help{display:none}#status{width:180px}#minimap{width:110px;height:110px}#zone-indicator{top:101px;width:108px;font-size:10px}#chat-log{height:100px}#chat{bottom:92px}#inventory,#guild,#mail{top:136px;width:calc(100vw - 24px)}#shop{top:100px;max-height:calc(100vh - 290px)}}