*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080c18;--bg2:#0d1224;--surface:#ffffff08;--surface2:#ffffff0d;--border:#ffffff0f;--border2:#ffffff1a;--text:#e8e4df;--text-body:#c4bfb8;--text-dim:#ffffff59;--accent:#7b9aff;--accent-glow:#7b9aff1f;--warm:#ffd4a0;--warm-glow:#ffd4a014;--success:#7bffb0}:root[data-theme=light]{--bg:#fbfaf6;--bg2:#f5f2e8;--surface:#fff;--surface2:#faf8f3;--border:#1a1a1a1a;--border2:#1a1a1a29;--text:#1a1a1a;--text-body:#2e2e2e;--text-dim:#5a5a5a;--accent:#3a5fd4;--accent-glow:#3a5fd41f;--warm:#b8722c;--warm-glow:#b8722c1a;--success:#2d8a3e}html{scroll-behavior:smooth;background:var(--bg)}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Noto Sans KR,sans-serif;font-weight:300;line-height:1.8;overflow-x:hidden}.footer-legal{margin-top:8px;font-size:.75rem}.footer-legal a{color:var(--text-dim,#ffffff59);text-decoration:none}.footer-legal a:hover{color:var(--accent);text-decoration:underline}.cookie-banner{background:var(--bg2,#0d1224);z-index:9999;border-top:1px solid #ffffff1a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex;position:fixed;bottom:0;left:0;right:0}.cookie-banner p{color:var(--text-body,#c4bfb8);flex:1;margin:0;font-size:.82rem}.cookie-banner a{color:var(--accent);text-decoration:underline}.cookie-buttons{gap:.5rem;display:flex}.cookie-buttons button{cursor:pointer;border:none;border-radius:6px;padding:.45rem 1rem;font-family:inherit;font-size:.82rem}#cookieAccept{background:var(--accent);color:#fff}#cookieDecline{color:var(--text-dim);background:0 0;border:1px solid #fff3}.page-tabs{scrollbar-width:none;border-bottom:1px solid #ffffff1a;gap:.25rem;margin:1.25rem 0;display:flex;overflow-x:auto}.page-tabs::-webkit-scrollbar{display:none}.page-tab{color:var(--text-dim,#9a9288);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:.55rem .95rem;font-family:inherit;font-size:.92rem;text-decoration:none;transition:color .15s,border-color .15s}.page-tab:hover{color:var(--text,#e8e3d9)}.page-tab.active{color:var(--accent,#8fa8c7);border-bottom-color:var(--accent,#8fa8c7)}.page-tab-panel[hidden]{display:none}.nav-back,.nav-forward{z-index:100;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px;font-size:1.5rem;line-height:1;transition:background .15s,opacity .15s;display:flex;position:fixed;top:16px}.nav-back{left:16px}.nav-forward{left:60px}.nav-back:hover:not(:disabled),.nav-back:focus-visible:not(:disabled),.nav-forward:hover:not(:disabled),.nav-forward:focus-visible:not(:disabled){background:var(--border2);outline:none}.nav-back:disabled,.nav-forward:disabled{opacity:.25;cursor:default}.nav-hamburger{z-index:100;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px;font-size:1.5rem;transition:background .15s;display:flex;position:fixed;top:16px;right:16px}.nav-hamburger:hover,.nav-hamburger:focus-visible{background:var(--border2);outline:none}.nav-theme-toggle{z-index:100;border:1px solid var(--border);color:var(--text);cursor:pointer;letter-spacing:.02em;background:0 0;border-radius:6px;justify-content:center;align-items:center;min-width:36px;min-height:36px;padding:4px 8px;font-size:.9rem;font-weight:600;transition:background .15s;display:flex;position:fixed;top:16px;right:148px}.nav-theme-toggle:hover,.nav-theme-toggle:focus-visible{background:var(--surface2,#ffffff14);outline:none}.nav-theme-toggle #navThemeIcon{font-size:1rem;line-height:1}.nav-lang-compact{z-index:100;border:1px solid var(--border);color:var(--text);cursor:pointer;letter-spacing:.02em;background:0 0;border-radius:6px;justify-content:center;align-items:center;min-width:36px;min-height:36px;padding:4px 8px;font-size:.8rem;font-weight:600;transition:background .15s;display:flex;position:fixed;top:16px;right:104px}.nav-lang-compact:hover,.nav-lang-compact:focus-visible{background:var(--border2);outline:none}.nav-bell{z-index:100;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px;transition:background .15s;display:flex;position:fixed;top:16px;right:60px}.nav-bell:hover,.nav-bell:focus-visible{background:var(--border2);outline:none}.nav-bell[hidden]{display:none}.nav-bell-badge{color:#fff;background:#e74c3c;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:.7rem;font-weight:700;line-height:1;display:flex;position:absolute;top:4px;right:4px}.nav-bell-badge[hidden]{display:none}.nav-overlay{z-index:150;background:#00000080;transition:opacity .25s;position:fixed;inset:0}.nav-overlay[hidden]{display:none}.nav-drawer{background:var(--bg2,#10162a);border-left:1px solid var(--border2,#ffffff14);z-index:200;flex-direction:column;width:480px;max-width:95vw;height:100%;padding:16px 0 0;transition:transform .3s;display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.nav-drawer-body{flex-direction:row;flex:1;gap:0;min-height:0;display:flex}.nav-left-panel{border-right:1px solid #ffffff14;flex-direction:column;flex:0 0 200px;gap:10px;padding:12px 16px;display:flex;overflow-y:auto}.nav-right-panel{flex-direction:column;flex:1;min-width:0;padding:12px 16px;display:flex;overflow-y:auto}.nav-drawer-header{padding:0 16px 8px}@media (width<=640px){.nav-drawer{width:320px;max-width:90vw}.nav-drawer-body{flex-direction:column}.nav-left-panel{border-bottom:1px solid #ffffff14;border-right:none;flex:none}}.nav-drawer.open{transform:translate(0)}.nav-drawer[hidden]{display:none}.nav-drawer-header{align-items:center;gap:8px;margin-bottom:8px;display:flex}.nav-drawer-close{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;min-width:36px;min-height:36px;padding:6px 8px;font-size:1.2rem}.nav-drawer-close:hover,.nav-drawer-close:focus-visible{background:var(--border2);outline:none}.nav-auth-btn{background:var(--accent);color:#fff;cursor:pointer;text-align:center;border:none;border-radius:8px;flex:none;align-self:stretch;padding:.5rem 1rem;font-family:Noto Sans KR,sans-serif;font-size:.85rem;font-weight:600;transition:opacity .15s}.nav-auth-btn:hover{opacity:.85}.nav-profile-card{border-bottom:1px solid var(--border2,#ffffff14);margin-bottom:8px;padding:12px 0}.nav-profile-card[hidden]{display:none}.nav-profile-rank-row{align-items:center;gap:6px;margin-bottom:2px;display:flex;position:relative}.nav-profile-rank{color:var(--text);font-size:.95rem;font-weight:700}.nav-rank-help{border:1px solid var(--text-dim);width:18px;height:18px;color:var(--text-dim);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.65rem;font-weight:700;transition:border-color .15s,color .15s;display:flex}.nav-rank-help:hover{border-color:var(--text);color:var(--text)}.nav-rank-tooltip{z-index:200;background:var(--bg2);border:1px solid var(--border);border-radius:10px;min-width:240px;padding:12px 14px;display:none;position:absolute;top:28px;left:0;box-shadow:0 8px 24px #0006}.nav-rank-help:hover+.nav-rank-tooltip,.nav-rank-tooltip:hover{display:block}.nav-rank-tooltip-title{color:var(--text);margin-bottom:6px;font-size:.75rem;font-weight:700}.nav-rank-tooltip-table{border-collapse:collapse;width:100%;margin-bottom:4px}.nav-rank-tooltip-table td{color:var(--text-dim);white-space:nowrap;padding:2px 4px 2px 0;font-size:.7rem}.nav-rank-tooltip-table td:first-child{text-align:center;width:22px}.nav-rank-tooltip-table td:last-child{text-align:right;color:var(--accent,#7b9aff);font-weight:600}.nav-rank-tooltip-table tr.my-rank td{color:var(--accent);font-weight:700}.nav-rank-tooltip-divider{background:var(--border,#ffffff14);height:1px;margin:8px 0}.nav-profile-nickname{color:var(--text);margin-bottom:8px;font-size:.95rem;font-weight:700}.nav-profile-xpbar{background:var(--border,#ffffff1a);border-radius:3px;width:100%;height:6px;margin-bottom:4px;overflow:hidden}.nav-profile-xpbar-fill{background:linear-gradient(90deg, var(--accent,#7b9aff), var(--warm,#e8c46a));border-radius:3px;width:0%;height:100%;transition:width .4s}.nav-profile-xptext{color:var(--text-dim);text-align:right;font-size:.7rem}.nav-user{color:var(--text);opacity:.85;border-bottom:1px solid var(--border2,#ffffff14);white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px;padding:8px 0 16px;font-size:.85rem;overflow:hidden}.nav-menu{flex-direction:column;flex:1;gap:2px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.nav-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 14px;font-family:inherit;font-size:1rem;text-decoration:none;transition:background .15s;display:block}.nav-item:hover,.nav-item:focus-visible{background:var(--border2);outline:none}.nav-item--requires-auth[aria-disabled=true]{opacity:.35;pointer-events:none;cursor:default}.nav-stats{color:var(--text-dim,#fff6);border-top:1px solid #ffffff14;margin-top:auto;padding:1rem 1.5rem;font-size:.8rem}.nav-stats strong{color:var(--text,#e8e4df)}.nav-stats-dot{opacity:.4;margin:0 .4rem}.nav-ranking-btn{background:linear-gradient(135deg, var(--accent,#7b9aff), var(--warm,#e8a87c));color:#fff;cursor:pointer;text-align:center;border:none;border-radius:12px;width:100%;margin-bottom:.75rem;padding:.75rem 1rem;font-family:inherit;font-size:1rem;font-weight:600;transition:opacity .2s}.nav-ranking-btn:hover,.nav-ranking-btn:focus-visible{opacity:.9;outline:none}.ranking-modal-overlay{z-index:300;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ranking-modal-overlay[hidden]{display:none}.ranking-modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;flex-direction:column;width:90%;max-width:480px;max-height:80vh;padding:1.5rem;display:flex;position:relative;box-shadow:0 8px 40px #00000040}.ranking-modal-close{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:1.5rem;line-height:1;transition:background .15s;position:absolute;top:12px;right:12px}.ranking-modal-close:hover,.ranking-modal-close:focus-visible{background:var(--border2);outline:none}.ranking-modal h2{margin:0 0 1rem;padding-right:2rem;font-size:1.2rem}.ranking-tabs{scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex-shrink:0;gap:4px;margin-bottom:.75rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.ranking-tab{border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border-radius:8px;flex-shrink:0;min-width:36px;padding:6px 10px;font-family:inherit;font-size:.85rem;font-weight:500;line-height:1;transition:background .15s,border-color .15s}.ranking-tab:hover,.ranking-tab:focus-visible{background:var(--border2);outline:none}.ranking-tab--active{background:var(--accent);border-color:var(--accent);color:#fff}.ranking-tab--active:hover,.ranking-tab--active:focus-visible{background:var(--accent);opacity:.9}.ranking-top5{border-bottom:1px solid var(--border);flex-shrink:0;margin-bottom:.75rem;padding-bottom:.75rem}.ranking-list-scroll{flex:1;min-height:0;overflow-y:auto}.ranking-row{border-bottom:1px solid var(--border,#ffffff12);align-items:center;gap:.5rem;padding:.5rem 0;display:flex}.ranking-row--me{background:#ffd7001a;border-radius:8px;padding:.5rem}.ranking-row .rank-num{text-align:center;opacity:.7;flex-shrink:0;width:2rem;font-weight:700}.ranking-row .rank-badge{white-space:nowrap;flex-shrink:0}.ranking-row .rank-nickname{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ranking-row .rank-xp{color:var(--accent,#7b9aff);flex-shrink:0;font-size:.9rem;font-weight:600}.notifications-modal-overlay{z-index:300;opacity:0;background:#0000008c;justify-content:center;align-items:center;padding:1rem;transition:opacity .2s;display:flex;position:fixed;inset:0}.notifications-modal-overlay[hidden]{display:none}.notifications-modal-overlay.show{opacity:1}.notifications-modal{background:var(--bg2,#10162a);border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;width:100%;max-width:440px;max-height:80vh;display:flex;overflow:hidden}.notifications-modal-header{border-bottom:1px solid #ffffff14;align-items:center;gap:.5rem;padding:1rem 1.25rem;display:flex}.notifications-modal-header h2{color:var(--text);flex:1;margin:0;font-size:1.05rem}.notifications-modal-markall{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:999px;padding:.35rem .75rem;font-family:inherit;font-size:.78rem}.notifications-modal-markall:hover{color:var(--text);background:#ffffff0d}.notifications-modal-close{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;min-width:32px;padding:.25rem .5rem;font-size:1.1rem}.notifications-modal-close:hover{background:#ffffff14}.notifications-modal-list{flex:1;padding:.25rem 0;overflow-y:auto}.notifications-modal-list .notification-item{cursor:pointer;border-bottom:1px solid #ffffff0a;align-items:flex-start;gap:.75rem;padding:.75rem 1.25rem;display:flex}.notifications-modal-list .notification-item:hover{background:#ffffff0a}.notifications-modal-list .notification-item--unread{background:#8fa8c714}.notifications-modal-list .notification-item--unread:before{content:"";background:var(--accent);border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:.5rem}.notifications-modal-list .notification-icon{flex-shrink:0;font-size:1.2rem}.notifications-modal-list .notification-body{flex:1;min-width:0}.notifications-modal-list .notification-text{color:var(--text);margin:0 0 .2rem;font-size:.88rem}.notifications-modal-list .notification-time{color:var(--text-dim);font-size:.75rem}.notifications-modal-list .notifications-empty{text-align:center;color:var(--text-dim);padding:3rem 1rem;font-size:.9rem}