:root{--bg:#1C1C1C;--card:rgba(245,244,240,.06);--line:rgba(245,244,240,.12);--fg:#F5F4F0;--dim:#C9C9C6;--pink:#E0457C;--mint:#C3E2D3;--warn:#F3E3A3;color-scheme:dark}   /* 무드 컬러 키트 Y2K 4 + 보조(Navy·Baby Pink·Mint·Butter) */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--bg);color:var(--fg)}
body:not(.fan)::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 50vmax at 90% -10%,rgba(224,69,124,.25),transparent 60%),radial-gradient(55vmax 45vmax at -10% 40%,rgba(29,42,71,.9),transparent 60%)}
body{display:flex;flex-direction:column;align-items:center;font-size:15px}
button{font:inherit;font-weight:700;border:0;border-radius:14px;padding:12px 16px;background:var(--card);color:var(--fg);cursor:pointer;border:1px solid var(--line)}
button.on{background:var(--pink);border-color:var(--pink);color:#1C1C1C}
button.main{background:linear-gradient(180deg,#ea5c8f,var(--pink));color:#1C1C1C;border:0;font-size:17px;padding:17px 20px;border-radius:999px;box-shadow:0 10px 40px -8px rgba(224,69,124,.7)}
button.end{background:#3a1a24;border-color:#6b2a3c;color:#ffb3c8}
.wrap{width:100%;max-width:520px;padding:16px;display:flex;flex-direction:column;gap:12px}
h1{font-size:22px;display:flex;align-items:center;gap:8px}
h1 i{font-style:normal;font-size:12px;font-weight:700;color:var(--bg);background:var(--mint);border-radius:8px;padding:3px 7px}
.stage{position:relative;width:100%;aspect-ratio:3/4;max-height:62vh;background:#000;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(224,69,124,.5)}
.stage canvas,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:10px;top:10px;font-size:13px;font-weight:700;padding:5px 9px;border-radius:10px;background:#000a}
.badge.live{background:var(--pink);color:#1C1C1C}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button{flex:1 1 0;min-width:0;padding:11px 4px;font-size:14px;white-space:nowrap}
.strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 auto;padding:10px 13px;font-size:14px;white-space:nowrap;scroll-snap-align:start}
.lbl{font-size:13px;color:var(--dim);font-weight:700}
.link{display:flex;gap:8px}
.link input{flex:1;min-width:0;font:inherit;font-size:13px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:10px}
.log{font-size:13px;color:var(--dim);min-height:18px}
.log b{color:var(--warn)}
.hide{display:none!important}
/* 팬 화면 */
body.fan{background:#000;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fanstage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.fanstage video{width:100%;height:100%;object-fit:contain;pointer-events:none}
#wm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cover{position:fixed;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#000;z-index:5;font-weight:700;font-size:18px;text-align:center;padding:24px}
.cover small{color:var(--dim);font-size:14px;font-weight:400}
#pwForm{width:100%;max-width:360px}
#pwRow input{font-size:15px}
.account{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--dim)}
.account b{color:var(--fg)}.account .plan{background:var(--mint);color:#0f2a22;font-weight:700;border-radius:8px;padding:3px 8px;font-size:12px}
a.kakao{display:flex;align-items:center;justify-content:center;width:100%;background:#FEE500;color:#191600;font-weight:700;border-radius:14px;padding:16px;text-decoration:none;font-size:17px}
button.mini{padding:5px 10px;font-size:12px;border-radius:9px;margin-left:auto}
.strip button.lock{opacity:.45}.strip button.lock::after{content:' 🔒';font-size:11px}
.log a{color:var(--pink)}
.billp{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pc{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer}
.pc input{display:none}.pc:has(input:checked){border-color:var(--pink);background:#E0457C1f}.pc span{font-weight:700}.pc small{color:var(--dim)}
.consent{font-size:13px;color:var(--dim);display:block;line-height:1.6}.consent input{vertical-align:-2px;margin-right:6px}.consent a{white-space:nowrap}.consent a{color:var(--pink)}
button.main:disabled{opacity:.5}
.agree{position:fixed;inset:0;z-index:20;background:#0009;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.agree-box{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:auto}
.agree-box h2{font-size:20px}.agree-box label{display:flex;gap:10px;align-items:center;font-size:15px}.agree-box label.all{padding:12px;border:1px solid var(--line);border-radius:12px}
.agree-box a{color:var(--pink);font-size:13px;margin-left:auto;white-space:nowrap}.agree-box input{width:20px;height:20px;accent-color:var(--pink)}
@media (min-width:600px){.agree{align-items:center}}
a.mini.fb{margin-left:auto;padding:5px 10px;font-size:12px;border-radius:9px;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:700}
a.mini.fb+button.mini{margin-left:0}
.peer{display:grid;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:13px}
.peer div{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:baseline}.peer b{font-weight:700;line-height:1.45}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);margin-right:6px;vertical-align:1px}.dot.ok{background:#7ee8c2}.dot.mid{background:var(--warn)}.dot.bad{background:#ff5a7a}
.hud{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:4;max-width:calc(100vw - 24px)}
.hud button{display:inline-flex;align-items:center;font-size:14px;font-weight:700;padding:8px 12px;border-radius:999px;background:#0009;border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hud-more{margin-top:8px;background:#000c;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:13px;display:grid;gap:6px;backdrop-filter:blur(8px)}
.hud-more small{display:block;color:var(--dim);font-size:11px}
.invite{width:100%;font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin:6px 0;resize:vertical}
#linkBox .row{margin-top:8px}