:root{
  --bg-base:#0E0B1A; --bg-surface:#1A1630; --bg-elevated:#241F3D; --border:#2E2A4D;
  --accent:#7C5CFF; --accent-soft:#2A2150; --live:#FF3D71; --gold:#FFC44D;
  --text-primary:#FFFFFF; --text-secondary:#ADA7CC; --text-muted:#6E688C; --on-accent:#FFFFFF;
  --nav-shadow:0 -2px 24px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --bg-base:#F7F6FB; --bg-surface:#FFFFFF; --bg-elevated:#ECEAF4; --border:#E7E4F0;
  --accent:#6A40FF; --accent-soft:#ECE7FF; --live:#FF3D71; --gold:#E59A00;
  --text-primary:#16121F; --text-secondary:#5F596F; --text-muted:#9A93A8; --on-accent:#FFFFFF;
  --nav-shadow:0 -2px 24px rgba(80,60,140,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;background:#000;color:var(--text-primary);display:flex;justify-content:center;}
a{text-decoration:none;color:inherit;}
.app{width:100%;max-width:430px;background:var(--bg-base);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;position:relative;transition:background .25s;overflow:hidden;}
/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;}
.topbar.bd{border-bottom:1px solid var(--border);padding-bottom:12px;}
.logo{display:flex;align-items:center;gap:6px;}
.logo .spark{color:var(--accent);display:flex;}
.logo .wm{font-size:24px;font-weight:800;letter-spacing:-.5px;}
.tt{font-size:19px;font-weight:800;}
.topicons{display:flex;align-items:center;gap:15px;}
.topicons i{color:var(--text-primary);cursor:pointer;}
.tg{cursor:pointer;color:var(--text-secondary);display:flex;}
/* content */
.content{flex:1;overflow-y:auto;padding:2px 0 96px;display:flex;flex-direction:column;gap:22px;}
.content::-webkit-scrollbar{width:0;}
.px{padding-left:16px;padding-right:16px;}
/* chips */
.chips{display:flex;flex-shrink:0;gap:8px;overflow-x:auto;padding:2px 16px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:flex;align-items:center;gap:5px;padding:8px 15px;border-radius:18px;background:var(--bg-surface);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--accent);color:var(--on-accent);font-weight:700;}
.chip.hap{background:var(--accent-soft);color:var(--gold);font-weight:700;}
.chip.hap i{width:14px;height:14px;}
/* badges */
.badge-live{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;background:var(--live);color:#fff;font-size:11px;font-weight:800;}
.badge-live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill-view{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:8px;background:rgba(14,11,26,.55);color:#fff;font-size:12px;font-weight:700;}
.pill-view i{width:13px;height:13px;}
.badge-hap{display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:var(--gold);color:#0E0B1A;font-size:9px;font-weight:800;}
.badge-hap i{width:11px;height:11px;}
.tag{padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;}
.av{width:24px;height:24px;border-radius:50%;background:var(--accent);flex:none;background-size:cover;background-position:center;}
.av.gold{background:var(--gold);}
.av.sm{width:18px;height:18px;}
.av.lg{width:56px;height:56px;}
.av.xl{width:72px;height:72px;}
/* featured */
.feat{position:relative;height:216px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background-size:cover;background-position:center;}
.feat-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:12px;}
.feat-info{position:relative;z-index:2;padding:26px 12px 13px;background:linear-gradient(180deg,transparent,rgba(10,8,20,.88) 60%);}
.feat-title{font-size:15px;font-weight:700;color:#fff;}
.feat-bj{display:flex;align-items:center;gap:8px;margin-top:7px;}
.feat-bj .nm{font-size:13px;font-weight:600;color:#E4E0F0;}
/* sections */
.sec-head{display:flex;justify-content:space-between;align-items:center;}
.sec-head .t{font-size:16px;font-weight:700;}
.sec-head .more{font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:2px;}
.sec-head .more i{width:14px;height:14px;}
.sec{display:flex;flex-direction:column;gap:12px;}
.hrow{display:flex;flex-shrink:0;gap:12px;overflow-x:auto;padding:0 16px 2px;}
.hrow::-webkit-scrollbar{display:none;}
.hcard{flex:none;width:154px;display:flex;flex-direction:column;gap:8px;cursor:pointer;}
.hcard.wide{width:230px;}
.thumb{position:relative;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-elevated);}
.thumb.h100{height:100px;}.thumb.h130{height:130px;}.thumb.h116{height:116px;}
.thumb .ov{position:absolute;inset:0;display:flex;gap:5px;align-items:flex-start;padding:8px;}
.thumb .badge-live{padding:3px 7px;font-size:9px;gap:4px;}
.thumb .badge-live .dot{width:5px;height:5px;}
.thumb .vc{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;background:rgba(10,8,20,.6);color:#fff;font-size:10px;font-weight:700;}
.thumb .vc i{width:11px;height:11px;}
.card-info{display:flex;flex-direction:column;gap:4px;}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-bj{display:flex;align-items:center;gap:6px;}
.card-bj .nm{font-size:11px;font-weight:500;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;}
.card{display:flex;flex-direction:column;gap:8px;cursor:pointer;}
/* bottom nav */
.nav{position:absolute;left:0;right:0;bottom:0;padding:10px 18px 20px;z-index:20;}
.pill{display:flex;align-items:center;gap:4px;height:62px;padding:4px 10px;border-radius:36px;background:var(--bg-surface);border:1px solid var(--border);box-shadow:var(--nav-shadow);}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text-muted);}
.tab i{width:21px;height:21px;}
.tab span{font-size:10px;font-weight:600;}
.tab.active{color:var(--accent);}.tab.active span{font-weight:700;}
.fab{width:56px;height:46px;border-radius:23px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;box-shadow:0 6px 18px rgba(124,92,255,.5);color:#fff;}
.fab i{width:26px;height:26px;color:#fff;}

/* ===== ROOM (live detail) ===== */
.room{position:fixed;inset:0;max-width:430px;margin:0 auto;background:#000;display:flex;flex-direction:column;overflow:hidden;}
.room-video{position:absolute;inset:0;background-size:cover;background-position:center;}
.room-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,16,.72) 0%,transparent 22% 58%,rgba(8,6,16,.86) 100%);}
.room-l{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:14px 12px 14px;}
.room-top{display:flex;align-items:center;gap:10px;}
.r-back{color:#fff;display:flex;cursor:pointer;}
.bj-chip{display:flex;align-items:center;gap:8px;background:rgba(14,11,26,.5);padding:5px 12px 5px 5px;border-radius:30px;}
.bj-chip .nm{font-size:13px;font-weight:700;color:#fff;}
.bj-chip .fo{font-size:11px;color:var(--gold);font-weight:600;}
.btn-follow{margin-left:2px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;cursor:pointer;}
.room-top .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.r-close{color:#fff;display:flex;cursor:pointer;opacity:.85;}
/* podium */
.podium{display:flex;align-items:center;gap:8px;margin-top:12px;background:rgba(14,11,26,.42);padding:7px 11px;border-radius:14px;width:fit-content;}
.podium .lbl{font-size:11px;color:#E4E0F0;font-weight:600;display:flex;align-items:center;gap:4px;}
.podium .lbl i{width:13px;height:13px;color:var(--gold);}
.sup{display:flex;align-items:center;}
.sup .a{width:26px;height:26px;border-radius:50%;background-size:cover;border:2px solid;margin-left:-7px;background-position:center;}
.sup .a:first-child{margin-left:0;}
.sup .a.r1{border-color:#FFC44D;}.sup .a.r2{border-color:#CBD5E1;}.sup .a.r3{border-color:#E58E5A;}
.room-spacer{flex:1;}
/* chat */
.chat{display:flex;flex-direction:column;gap:7px;max-height:34vh;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%);}
.msg{font-size:13px;line-height:1.32;max-width:80%;}
.msg .u{font-weight:700;color:#C9B8FF;margin-right:5px;}
.msg .x{color:#EDEAF6;}
.msg.dono{background:linear-gradient(90deg,rgba(124,92,255,.95),rgba(255,61,113,.92));padding:7px 11px;border-radius:12px;max-width:92%;}
.msg.dono .u{color:#fff;}.msg.dono .x{color:#fff;font-weight:600;}
.msg.dono .amt{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:#FFE9A8;margin-left:4px;}
.msg.sys{font-size:11px;color:#B9B4CC;background:rgba(14,11,26,.4);padding:5px 10px;border-radius:10px;align-self:flex-start;}
/* room bottom bar */
.room-bar{display:flex;align-items:center;gap:8px;margin-top:11px;}
.chat-in{flex:1;display:flex;align-items:center;gap:8px;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:11px 16px;color:#9D97B8;font-size:13px;}
.r-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.12);color:#fff;}
.r-ic i{width:22px;height:22px;}
.r-gift{background:linear-gradient(135deg,#7C5CFF,#FF3D71);border:none;box-shadow:0 6px 18px rgba(255,61,113,.45);}
.r-gift i{color:#fff;}
/* gift sheet */
.sheet-mask{position:fixed;inset:0;max-width:430px;margin:0 auto;background:rgba(0,0,0,.5);z-index:40;opacity:0;pointer-events:none;transition:.2s;}
.sheet-mask.on{opacity:1;pointer-events:auto;}
.gift-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg-surface);border-radius:22px 22px 0 0;padding:16px 16px 22px;transform:translateY(100%);transition:.26s cubic-bezier(.2,.7,.3,1);}
.sheet-mask.on .gift-sheet{transform:translateY(0);}
.gs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.gs-head .t{font-size:16px;font-weight:700;}
.gs-bal{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--gold);}
.gs-bal i{width:15px;height:15px;}
.gs-bal .chg{margin-left:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;padding:4px 9px;border-radius:12px;}
.gs-tabs{display:flex;gap:16px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:2px;overflow-x:auto;}
.gs-tabs::-webkit-scrollbar{display:none;}
.gs-tab{font-size:13px;font-weight:600;color:var(--text-muted);padding-bottom:8px;white-space:nowrap;cursor:pointer;}
.gs-tab.active{color:var(--text-primary);font-weight:700;border-bottom:2px solid var(--accent);}
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gift{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:14px;background:var(--bg-elevated);cursor:pointer;}
.gift.sel{outline:2px solid var(--accent);}
.gift .em{font-size:26px;}
.gift .nm{font-size:11px;font-weight:600;color:var(--text-secondary);}
.gift .pr{font-size:11px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:2px;}
.gift .pr i{width:11px;height:11px;}
.gs-foot{display:flex;align-items:center;gap:10px;margin-top:16px;}
.secret{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;}
.secret i{width:18px;height:18px;}
.btn-send{flex:1;background:linear-gradient(135deg,#7C5CFF,#FF3D71);color:#fff;font-size:15px;font-weight:800;text-align:center;padding:14px;border-radius:16px;cursor:pointer;}

/* ===== COMMUNITY ===== */
.story{display:flex;flex-shrink:0;gap:14px;overflow-x:auto;padding:4px 16px 2px;}
.story::-webkit-scrollbar{display:none;}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:62px;cursor:pointer;}
.st .ring{padding:2px;border-radius:50%;background:var(--border);}
.st.live .ring{background:linear-gradient(135deg,#7C5CFF,#FF3D71);}
.st .ring .a{width:54px;height:54px;border-radius:50%;background-size:cover;border:2px solid var(--bg-base);background-position:center;}
.st .nm{font-size:11px;color:var(--text-secondary);font-weight:600;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.post{border-top:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:11px;}
.post-h{display:flex;align-items:center;gap:10px;}
.post-h .meta{display:flex;flex-direction:column;gap:1px;}
.post-h .nm{font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px;}
.mbadge{font-size:9px;font-weight:800;color:#0E0B1A;background:var(--gold);padding:2px 6px;border-radius:5px;}
.post-h .tm{font-size:11px;color:var(--text-muted);}
.post-h .fo{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;}
.post-tx{font-size:14px;line-height:1.5;color:var(--text-primary);}
.post-img{width:100%;height:200px;border-radius:14px;background-size:cover;background-position:center;}
.post-img.locked{position:relative;display:flex;align-items:center;justify-content:center;}
.post-img.locked::after{content:"";position:absolute;inset:0;background:rgba(14,11,26,.66);border-radius:14px;}
[data-theme="light"] .post-img.locked::after{background:rgba(247,246,251,.85);}
.lock{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-primary);}
.lock i{width:24px;height:24px;}.lock span{font-size:12px;font-weight:700;}
.post-act{display:flex;gap:20px;color:var(--text-muted);}
.post-act .a{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;cursor:pointer;}
.post-act .a i{width:17px;height:17px;}

/* ===== MY ===== */
.prof{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px 18px;}
.prof .nm{font-size:20px;font-weight:800;margin-top:10px;}
.prof .hd{font-size:13px;color:var(--text-muted);}
.lvl{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:20px;margin-top:6px;}
.lvl i{width:13px;height:13px;}
.stats{display:flex;justify-content:center;gap:30px;padding:14px 0;margin:0 16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px;}
.stat .n{font-size:18px;font-weight:800;}
.stat .l{font-size:12px;color:var(--text-muted);}
.wallet{margin:0 16px;background:linear-gradient(135deg,#2A2150,#3A2566);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;}
[data-theme="light"] .wallet{background:linear-gradient(135deg,#7C5CFF,#9B6BFF);}
.wallet .lab{font-size:12px;color:#CFC7EC;font-weight:600;}
.wallet .bal{font-size:24px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;margin-top:3px;}
.wallet .bal i{width:22px;height:22px;color:var(--gold);}
.wallet .chg{background:#fff;color:#6A40FF;font-size:13px;font-weight:800;padding:11px 18px;border-radius:14px;cursor:pointer;}
.mlist{margin:4px 0;display:flex;flex-direction:column;}
.mi{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;}
.mi i.l{width:22px;height:22px;color:var(--text-secondary);}
.mi .t{font-size:15px;font-weight:600;flex:1;}
.mi .badge{font-size:10px;font-weight:800;color:#0E0B1A;background:var(--gold);padding:2px 7px;border-radius:6px;}
.mi i.c{width:18px;height:18px;color:var(--text-muted);}
.sec-label{font-size:12px;font-weight:700;color:var(--text-muted);padding:14px 18px 4px;}

/* ===== 합방 (multi-frame) ===== */
.hap-room{position:fixed;inset:0;max-width:430px;margin:0 auto;background:#0E0B1A;display:flex;flex-direction:column;padding:14px 12px 14px;gap:11px;}
.hap-top{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.hap-top .ti{font-size:15px;font-weight:800;color:#fff;}
.hap-top .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.versus{flex-shrink:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:9px;}
.versus .vh{display:flex;align-items:center;justify-content:space-between;}
.versus .vh .l{font-size:13px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:5px;}
.versus .vh .l i{width:15px;height:15px;color:var(--live);}
.versus .vh .win{font-size:12px;font-weight:800;color:var(--gold);}
.vbar{display:flex;height:13px;border-radius:7px;overflow:hidden;gap:2px;}
.vseg{height:100%;}
.vlegend{display:flex;gap:13px;flex-wrap:wrap;}
.vlg{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text-secondary);}
.vlg .d{width:9px;height:9px;border-radius:3px;}
.vlg b{color:var(--text-primary);}
.hap-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:0;}
.hap-cell{position:relative;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:space-between;padding:8px;}
.hap-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,16,.32),transparent 38%,rgba(8,6,16,.8));}
.hap-cell.lead{outline:2px solid var(--gold);outline-offset:-2px;}
.hc-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;}
.hc-rank{display:flex;align-items:center;gap:3px;background:rgba(10,8,20,.6);padding:3px 7px;border-radius:7px;font-size:10px;font-weight:800;color:#fff;}
.hc-rank.g{background:var(--gold);color:#0E0B1A;}
.hc-rank i{width:11px;height:11px;}
.hc-live{font-size:8px;font-weight:800;color:#fff;background:var(--live);padding:2px 5px;border-radius:5px;}
.hc-bot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;}
.hc-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hc-nm{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hc-amt{font-size:11px;font-weight:800;color:#FFE0A0;display:flex;align-items:center;gap:3px;}
.hc-amt i{width:11px;height:11px;}
.hc-cheer{flex:none;background:linear-gradient(135deg,#7C5CFF,#FF3D71);color:#fff;font-size:11px;font-weight:800;padding:6px 9px;border-radius:13px;display:flex;align-items:center;gap:3px;cursor:pointer;}
.hc-cheer i{width:12px;height:12px;}
.hap-chat{flex-shrink:0;max-height:18vh;overflow:hidden;display:flex;flex-direction:column;gap:6px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%);}
/* gift target picker */
.gt-row{display:flex;gap:10px;margin-bottom:13px;}
.gt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:.5;}
.gt.sel{opacity:1;}
.gt .a{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;border:2px solid transparent;}
.gt.sel .a{border-color:var(--accent);}
.gt .n{font-size:10px;font-weight:600;color:var(--text-secondary);}