:root{--bg:#0d0a26;--bg2:#171244;--card:#1c1655;--card2:#251d6e;--line:rgba(255,255,255,.09);--tx:#f4f2ff;--tx2:#a9a4d6;--pu:#8b3dff;--pu2:#b06bff;--gold:#ffc83a;--bl:#2f8cff;--rd:#ff453a;--nav:64px;--r:20px;
 --ft:Pretendard Variable,Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--tx);font-family:var(--ft);overscroll-behavior-y:none}
body{min-height:100dvh;padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 12px);background:radial-gradient(120% 60% at 50% -10%,#3a1f9a 0%,transparent 60%),var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 18px 10px;background:linear-gradient(#0d0a26ee,#0d0a26b0);backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo i{width:30px;height:30px;border-radius:10px;background:linear-gradient(160deg,var(--pu2),var(--pu));display:grid;place-items:center;font-style:normal;font-size:17px;box-shadow:0 4px 12px #8b3dff66}
.login{height:36px;padding:0 15px;border-radius:18px;background:var(--card2);font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1px var(--line)}
main{padding:4px 18px 8px;max-width:760px;margin:0 auto}
.sec{margin:22px 0 10px;display:flex;align-items:baseline;justify-content:space-between}
.sec h2{font-size:19px;font-weight:800;letter-spacing:-.02em}.sec a{color:var(--tx2);font-size:13px;font-weight:600;text-decoration:none}
.hero{position:relative;overflow:hidden;border-radius:26px;padding:20px 18px;min-height:178px;background:linear-gradient(135deg,#6a2cf0,#2a1a8a 60%,#14104a);box-shadow:0 14px 34px #5a1fd855,inset 0 0 0 1px #ffffff1f;display:flex;flex-direction:column;justify-content:flex-end}
.hero img{position:absolute;right:16px;top:14px;width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 10px 18px #0008)}
.hero small{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.06em}.hero h1{font-size:28px;font-weight:800;margin:4px 0 2px;letter-spacing:-.03em}
.hero p{color:#d8d2ff;font-size:14px;margin-bottom:14px}
.btn{height:44px;padding:0 22px;border-radius:22px;font-weight:800;font-size:15px;background:linear-gradient(180deg,#ffd75e,#ffb300);color:#3a2300;box-shadow:0 4px 0 #b97800,0 10px 20px #ffb30040;align-self:flex-start}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b97800}
.rail{display:flex;gap:12px;scroll-padding:0 18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:2px 18px 8px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail::after{content:"";flex:none;width:6px}
.gc{position:relative;flex:none;width:152px;scroll-snap-align:start;text-align:left;border-radius:var(--r);padding:12px;background:linear-gradient(170deg,var(--card2),var(--card));box-shadow:inset 0 0 0 1px var(--line),0 8px 18px #0006;transition:transform .2s}
.gc:active{transform:scale(.96)}
.gc .ic{height:92px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 40%,#ffffff22,transparent 70%)}
.gc .ic img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 8px #0007)}
.gc b{display:block;margin-top:8px;font-size:15px;font-weight:800;letter-spacing:-.02em}.gc span{display:block;color:var(--tx2);font-size:12px;margin-top:2px;line-height:1.3;min-height:31px}
.tag{position:absolute;z-index:2;top:10px;left:10px;font-style:normal;font-size:10px;font-weight:800;padding:3px 7px;border-radius:7px;background:var(--rd);color:#fff}.tag.h{background:var(--gold);color:#3a2300}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid .gc{width:auto}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:38px;padding:0 15px;border-radius:19px;background:var(--card);font-weight:700;font-size:14px;color:var(--tx2);box-shadow:inset 0 0 0 1px var(--line)}
.chip.on{background:linear-gradient(180deg,var(--pu2),var(--pu));color:#fff;box-shadow:0 4px 12px #8b3dff55}
.search{width:100%;height:46px;border-radius:23px;border:0;padding:0 18px;margin:4px 0 12px;background:var(--card);color:var(--tx);font:inherit;font-size:15px;box-shadow:inset 0 0 0 1px var(--line);outline:none}
.search:focus{box-shadow:inset 0 0 0 2px var(--pu2)}
.panel{border-radius:var(--r);padding:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.panel h3{font-size:16px;font-weight:800}.panel p{color:var(--tx2);font-size:13.5px;line-height:1.55;margin-top:6px}
.soon{display:grid;gap:10px}.soon .panel{display:flex;gap:14px;align-items:center}.soon .e{font-size:34px}
.ranks{display:grid;gap:8px;margin-top:12px}.rk{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:var(--card2)}.rk em{font-style:normal;font-size:22px}.rk b{font-weight:800}.rk span{margin-left:auto;color:var(--tx2);font-size:12.5px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#120d38ee;backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--tx2);min-height:44px}
.nav svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:#fff}.nav button.on svg{stroke:var(--pu2);filter:drop-shadow(0 0 8px #b06bff99)}
.player{position:fixed;inset:0;z-index:50;background:#0d0a26;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.player.open{transform:none}
.pbar{display:flex;align-items:center;gap:10px;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0}
.pbar button{width:44px;height:44px;border-radius:22px;font-size:22px;background:var(--card2)}.pbar b{font-size:16px;font-weight:800}
.player iframe{flex:1;border:0;width:100%;background:#f2f2f7}
.view{display:none}.view.on{display:block;animation:in .25s}@keyframes in{from{opacity:0;transform:translateY(8px)}}
.note{color:var(--tx2);font-size:12px;text-align:center;margin:26px 0 6px;line-height:1.5}

.modal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;background:#000a}.modal.open{display:flex}
.sheet{position:relative;width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#241c70,#171244);box-shadow:inset 0 1px 0 #ffffff22;animation:up .28s cubic-bezier(.2,.8,.2,1)}@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet .x{position:absolute;right:12px;top:12px;width:44px;height:44px;font-size:18px;color:var(--tx2)}
.tabs2{display:flex;gap:6px;margin:0 0 16px;width:max-content;padding:4px;border-radius:16px;background:#0d0a2677}.tabs2 button{height:38px;padding:0 20px;border-radius:12px;font-weight:800;font-size:15px;color:var(--tx2)}.tabs2 button.on{background:var(--pu);color:#fff}
#af{display:grid;gap:10px}#af input{height:50px;border-radius:14px;border:0;padding:0 16px;background:#0d0a26aa;color:var(--tx);font:inherit;font-size:16px;box-shadow:inset 0 0 0 1px var(--line);outline:none}#af input:focus{box-shadow:inset 0 0 0 2px var(--pu2)}
.err{color:#ff8a80;font-size:13px;min-height:18px}.soc{display:grid;gap:8px;margin-top:14px}.sb{height:48px;border-radius:14px;font-weight:800;font-size:14px;opacity:.55}.sb.k{background:#fee500;color:#222}.sb.n{background:#03c75a;color:#fff}
.prof{display:flex;gap:14px;align-items:center}.av{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:30px;background:linear-gradient(160deg,var(--pu2),var(--pu))}
.bar{height:12px;border-radius:6px;background:#0d0a26aa;margin:12px 0 4px;overflow:hidden}.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),#ff9f0a)}
#rkList .rk{margin-top:8px}

.tgrid{display:grid;gap:12px}.tc{display:flex;gap:14px;align-items:center;text-align:left;border-radius:var(--r);padding:14px;background:linear-gradient(170deg,var(--card2),var(--card));box-shadow:inset 0 0 0 1px var(--line),0 8px 18px #0006;transition:transform .2s}.tc:active{transform:scale(.97)}
.rail .tc{flex:none;width:280px;scroll-snap-align:start}.tci{flex:none;width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle at 50% 40%,#ffffff2a,#ffffff0d)}.tci img{width:60px;height:60px;object-fit:contain}
.tc b{display:block;font-size:16px;font-weight:800;margin:3px 0 2px;letter-spacing:-.02em}.tc small{display:block;color:var(--tx2);font-size:12.5px;line-height:1.4}
.ttag{display:inline-block;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;background:#8b3dff55;color:#d9c2ff}
#tview .tbody{flex:1;overflow-y:auto;padding:8px 18px calc(28px + env(safe-area-inset-bottom));max-width:560px;width:100%;margin:0 auto}
.tintro{text-align:center;padding-top:18px}.tcover{width:150px;height:150px;margin:0 auto 14px;border-radius:40px;display:grid;place-items:center;font-size:80px;background:radial-gradient(circle at 50% 40%,#ffffff33,#ffffff0d);box-shadow:inset 0 0 0 1px var(--line)}.tcover img{width:128px;height:128px;object-fit:contain}
.tintro h1{font-size:28px;font-weight:800;margin:10px 0 6px;letter-spacing:-.03em;line-height:1.25}.tintro p{color:var(--tx2);font-size:15px}.tmeta{margin:14px 0 22px;color:var(--tx2);font-size:13px}.btn.big{height:54px;font-size:17px;border-radius:27px;width:100%;align-self:auto}
.tfun{color:var(--tx2);font-size:12px;text-align:center;margin-top:18px;opacity:.8}
.tq{padding-top:8px}.tprog{height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden}.tprog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pu2),var(--gold));transition:width .3s}.tcnt{margin:10px 0 4px;color:var(--tx2);font-size:13px;font-weight:700}
.tq h2{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.03em;margin:10px 0 22px;min-height:66px}.topts{display:grid;gap:10px}
.topt{min-height:60px;padding:14px 18px;border-radius:18px;text-align:left;font-size:16px;font-weight:600;line-height:1.4;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s,background .15s}.topt:active{transform:scale(.97);background:var(--pu)}
.tprev{margin-top:18px;color:var(--tx2);font-weight:700;font-size:14px;min-height:44px}
.tload{text-align:center;padding-top:30vh;color:var(--tx2)}.spin{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--pu2);animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.tres{display:grid;gap:12px}.tcard{text-align:center;padding:26px 16px 22px;border-radius:26px;background:linear-gradient(160deg,#6a2cf0,#2a1a8a 70%);box-shadow:0 14px 34px #5a1fd855,inset 0 0 0 1px #ffffff1f}
.tcard h1{font-size:28px;font-weight:900;margin:10px 0 6px;letter-spacing:-.03em}.tcard .one{color:#e6e0ff;font-size:15.5px;line-height:1.45}
.tr-img.big{width:180px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 14px #0007)}.tr-emo.big{font-size:96px;line-height:1.1}.tr-img{width:44px;height:44px;object-fit:contain}.tr-emo{font-size:30px}
.mrow{display:flex;align-items:center;gap:12px;margin-top:8px}.mrow b{font-size:16px}
.tact{display:grid;gap:8px;margin-top:6px}.tact .login{height:48px;border-radius:24px;font-size:14px}
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:99;padding:12px 18px;border-radius:22px;background:#000c;color:#fff;font-weight:700;font-size:14px;transition:.25s;pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}
.tcard .ttag{display:block;width:max-content;margin:12px auto 0}.tcard>img,.tcard>.tr-emo{display:block;margin:0 auto}

/* 컴팩트 밀도: 아이콘 축소 → 한 화면에 더 많이 */
.hero{min-height:132px;padding:16px;border-radius:22px}.hero img{width:92px;height:92px;top:12px;right:14px}.hero h1{font-size:23px}.hero p{font-size:13px;margin-bottom:10px}.hero .btn{height:38px;padding:0 18px;font-size:14px}
.sec{margin:16px 0 8px}.sec h2{font-size:17px}
.gc{width:112px;padding:8px 8px 10px;border-radius:16px}.gc .ic{height:60px;border-radius:12px}.gc .ic img{width:54px;height:54px}.gc b{font-size:13px;margin-top:6px}.gc span{font-size:11px;min-height:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tag{top:6px;left:6px;font-size:9px;padding:2px 6px;border-radius:6px}
.grid{grid-template-columns:repeat(3,1fr);gap:8px}.grid .gc{width:auto}
.rail{gap:8px}.chip{height:34px;font-size:13px;padding:0 13px}.search{height:42px;margin:2px 0 10px}
.tc{padding:10px;gap:12px;border-radius:16px}.tci{width:52px;height:52px;border-radius:14px;font-size:28px}.tci img{width:44px;height:44px}.tc b{font-size:15px}.rail .tc{width:250px}
.tgrid{gap:8px}.panel{padding:14px}
.tcover{width:112px;height:112px;border-radius:30px;font-size:60px}.tcover img{width:94px;height:94px}.tr-img.big{width:130px;height:110px}.tr-emo.big{font-size:72px}
.logo i{width:26px;height:26px;font-size:15px;border-radius:9px}.logo{font-size:20px}.top{padding-bottom:6px}
@media(min-width:560px){.grid{grid-template-columns:repeat(4,1fr)}}
.logo img{border-radius:9px;box-shadow:0 4px 12px #8b3dff66}
/* 아이콘 크기 절반 + 가로형 컴팩트 카드 */
.hero img{width:46px;height:46px;top:16px;right:16px}.hero{min-height:112px}
.grid{grid-template-columns:1fr 1fr;gap:8px}
.gc{display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:center;width:auto;padding:10px 10px;text-align:left}
.gc .ic{grid-row:1/3;height:28px;width:28px;border-radius:8px;background:none}.gc .ic img{width:27px;height:27px;filter:drop-shadow(0 2px 3px #0006)}
.gc b{margin:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gc span{margin:1px 0 0;font-size:11px}
.rail .gc{width:150px;flex:none}
.tag{top:-5px;left:auto;right:8px}
.tci{width:28px;height:28px;border-radius:8px;font-size:18px;background:none;box-shadow:none}.tci img{width:26px;height:26px}
.tcover{width:56px;height:56px;border-radius:16px;font-size:30px}.tcover img{width:47px;height:47px}.tr-img.big{width:65px;height:55px}.tr-emo.big{font-size:40px}
.tr-img{width:22px;height:22px}.tr-emo{font-size:15px}
.logo img{width:15px;height:15px;border-radius:5px}.logo i{width:15px;height:15px;font-size:9px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}