/* 방송용 화면: 1920x1080 기준으로 vmin/vw 단위 사용 */
html,body { margin:0; height:100%; background:#000; overflow:hidden; cursor:none; font-family:Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:#fff; }
body.show-cursor { cursor:default; }
#stage { position:fixed; inset:0; overflow:hidden; background:radial-gradient(120% 120% at 20% 10%,#312e81 0%,#0f172a 55%,#020617 100%); }
#bgvid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dim { position:absolute; inset:0; background:rgba(0,0,0,.5); }                 /* 검정 50% 레이어 */
.brand { position:absolute; top:3.2vmin; left:4vmin; font-weight:800; font-size:3vmin; letter-spacing:-.03em; opacity:.92; display:flex; align-items:center; gap:1.2vmin; text-shadow:0 .2vmin 1vmin rgba(0,0,0,.5); }
.brand .b { background:#4f46e5; padding:.3vmin 1.2vmin; border-radius:1vmin; font-size:2.2vmin; }
.brand .host { font-weight:500; font-size:2.1vmin; opacity:.75; margin-left:1vmin; }
#meter { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64vw; height:24vw; max-height:40vh; }   /* 정중앙 레벨미터 */
.info { position:absolute; left:4vmin; bottom:5vmin; max-width:56vw; padding:2.6vmin 3.4vmin; border-radius:2.4vmin; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(1.6vmin); -webkit-backdrop-filter:blur(1.6vmin); box-shadow:0 1vmin 4vmin rgba(0,0,0,.35); transition:opacity .6s, transform .6s; }
.info.swap { opacity:0; transform:translateY(1.4vmin); }
.info .label { font-size:1.7vmin; letter-spacing:.22em; opacity:.7; font-weight:700; }
.info .t { font-size:5.2vmin; font-weight:800; letter-spacing:-.03em; line-height:1.2; margin:.6vmin 0 1.2vmin; overflow-wrap:anywhere; }
.info .chips { display:flex; gap:1vmin; flex-wrap:wrap; }
.info .chips span { font-size:2.1vmin; font-weight:600; padding:.5vmin 1.5vmin; border-radius:99px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); }
.info .next { margin-top:1.4vmin; font-size:1.9vmin; opacity:.72; }
.bar { position:absolute; left:0; right:0; bottom:0; height:.7vmin; background:rgba(255,255,255,.14); } .bar i { display:block; height:100%; width:0; background:#818cf8; }
.start { position:absolute; inset:0; margin:auto; width:min(60vmin,80vw); height:20vmin; border:0; border-radius:3vmin; background:#4f46e5; color:#fff; font:800 4vmin/1.2 Pretendard,sans-serif; cursor:pointer; box-shadow:0 2vmin 8vmin rgba(79,70,229,.5); z-index:5; }
.start span { display:block; font-size:2vmin; font-weight:500; opacity:.85; margin-top:1vmin; }
.start[hidden], .info[hidden] { display:none; }
.hint { position:absolute; right:3vmin; bottom:2.2vmin; font-size:1.6vmin; opacity:0; transition:opacity .4s; } body.show-cursor .hint { opacity:.6; }