:root{--cream: #f3e9d2;--paper: #fffaf0;--line: #ecd9b4;--ink-text: #3b2a22;--red: #a3262a;--red-deep: #8e1f22;--gold: #e2b565;--ink: #0b0706;--round: "Jua", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--b-ink: #14110f;--b-cream: #efe6d2;--b-gold: #c39a4b;--b-wine: #7a1e22;--b-gray: #8e8475;--b-rule: #3a332b;--brand: "Jost", Futura, "Century Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--b-ink);overflow:hidden;color:var(--cream);font-family:Georgia,Times New Roman,serif}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}button{font:inherit;cursor:pointer}kbd{font:11px ui-monospace,monospace;border:1.5px solid var(--line);border-radius:6px;padding:1px 5px;background:#fff;color:var(--ink-text)}#title{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 55%,#14110fb8,#14110ff5);padding:16px;overflow:auto}#title .card{text-align:center;width:min(460px,100%);font-family:var(--brand);color:var(--b-cream)}#title .disc{width:112px;height:112px;margin:0 auto 22px;border-radius:50%;background:repeating-radial-gradient(circle,#0a0908 0,#0a0908 3px,#1d1a17 3px,#1d1a17 4px);display:grid;place-items:center;animation:spin 7.5s linear infinite;box-shadow:0 0 0 1px #2a2622}#title .disc .label{width:58px;height:58px;border-radius:50%;background:var(--b-wine);box-shadow:inset 0 0 0 1.5px #efe6d2d9;display:flex;flex-direction:column;justify-content:center;gap:7px;padding-left:14px;transform:rotate(-7deg)}#title .disc .label i{display:block;height:6px;background:var(--b-cream);width:32px}#title .disc .label i+i{width:21px}#title small{letter-spacing:.34em;color:var(--b-gold);font-size:12px;font-weight:500}#title h1{font-weight:500;font-size:clamp(22px,5.2vw,34px);letter-spacing:.2em;margin:12px 0 18px;padding-left:.2em;color:var(--b-cream);white-space:nowrap}#title .np{border-top:1.5px solid var(--b-rule);border-bottom:1.5px solid var(--b-rule);padding:14px 4px 12px;display:grid;gap:10px;text-align:left}#title .np div{display:flex;align-items:center;gap:14px}#title .np span{width:78px;font-size:11px;letter-spacing:.3em;color:var(--b-gray);flex:none}#title .np i{display:block;height:15px;width:58%;background:var(--b-cream)}#title .np b{font-weight:500;font-size:19px;letter-spacing:.04em;color:var(--b-cream)}#title p{margin:16px 0 0;font-size:14px;color:var(--b-gray);letter-spacing:.02em}#title .name{display:block;margin-top:18px}#name{width:min(300px,82vw);text-align:center;font:16px var(--brand);color:var(--b-cream);background:#efe6d20f;border:1.5px solid rgba(239,230,210,.32);border-radius:999px;padding:11px 18px;outline:none}#name:focus{border-color:var(--b-gold)}#name::placeholder{color:var(--b-gray)}#go,#push{font:500 16px var(--brand);letter-spacing:.06em;color:var(--b-cream);background:var(--b-wine);border:1.5px solid rgba(239,230,210,.5);border-radius:999px}#go{margin-top:12px;padding:13px 34px}#go:hover,#push:hover{background:#8c2429}.again{display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}.again button{display:flex;align-items:center;gap:8px;font:14px var(--brand);color:var(--b-gray);background:#efe6d20d;border:1.5px solid rgba(239,230,210,.22);border-radius:999px;padding:5px 16px 5px 6px}.again button i{width:38px;height:38px;border-radius:50%;background:#efe6d214 center / cover no-repeat;display:grid;place-items:center;font-style:normal;font-size:18px;color:var(--b-gold)}.again button[aria-pressed=true]{color:var(--b-cream);border-color:var(--b-gold);background:#c39a4b24}.looks{display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}.looks button{width:54px;height:54px;padding:0;border-radius:50%;border:1.5px solid rgba(239,230,210,.22);background:#efe6d20d center / cover no-repeat}.looks button[aria-checked=true]{border-color:var(--b-gold);box-shadow:0 0 0 2px #c39a4b73;background-color:#c39a4b29}.looks:empty{display:none}#loading{position:fixed;left:50%;bottom:9vh;transform:translate(-50%);text-align:center;font:500 13px var(--brand);letter-spacing:.22em;color:var(--b-gold)}#loading .bar{width:200px;height:2px;background:var(--b-rule);margin:12px auto 0;overflow:hidden}#loading .bar i{display:block;height:100%;width:0;background:var(--b-cream)}#push{position:fixed;left:50%;bottom:10vh;transform:translate(-50%);padding:14px 32px;animation:nudge 1.6s ease-in-out infinite}@keyframes nudge{50%{transform:translate(-50%) scale(1.04)}}.hud{position:fixed;transition:opacity .4s;font-family:var(--round);color:var(--ink-text)}body.clean .hud,body.clean #push,body.clean #tags{opacity:0!important;pointer-events:none}.panel{background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:0 6px 18px #00000047}.panel button{font:14px var(--round);color:var(--ink-text);background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap}.panel button:hover{border-color:var(--gold)}.panel button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}#status{left:16px;top:16px;padding:12px 18px;max-width:min(300px,calc(100vw - 32px))}#status strong{display:block;font-weight:400;font-size:17px;color:var(--red)}#status small{display:block;margin-top:3px;font-size:13px;opacity:.8}#status small b{font-weight:400;color:var(--ink-text)}#status .track{margin-top:7px;padding-top:7px;border-top:2px dashed var(--line);font:italic 14px Georgia,serif;opacity:1;color:var(--ink-text)}#tools{right:16px;top:16px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:min(640px,calc(100vw - 32px))}#now{left:16px;bottom:16px;padding:10px;max-width:calc(100vw - 32px)}#now .row{display:flex;gap:12px;align-items:center;padding-right:8px}#tv{display:none;width:200px;height:200px;border-radius:15px;overflow:hidden;background:#000}#now.tv{padding:5px;border-radius:20px;border-width:2px}#now.tv .row{display:none}#now.tv #tv{display:block}#tv iframe{display:block;width:100%;height:100%;border:0}#yt-hint{display:block;margin:6px 4px 2px;max-width:192px;font-size:12px;color:var(--red)}body.clean #now.tv{opacity:1!important;pointer-events:auto}#now .lp{width:48px;height:48px;border-radius:50%;background:repeating-radial-gradient(circle,#0a0a0a 0,#0a0a0a 2px,#1b1b1b 2px,#1b1b1b 3px);display:grid;place-items:center;animation:spin 3.4s linear infinite;flex:none}#now .lp i{width:19px;height:19px;border-radius:50%;background:var(--red-deep);border:1.5px solid var(--cream)}@keyframes spin{to{transform:rotate(360deg)}}#now small{display:block;font:10px Georgia,serif;letter-spacing:.26em;color:var(--red)}#now strong{display:block;font:italic 500 17px Georgia,serif;margin:2px 0 4px;color:var(--ink-text)}#now .artist{font:10px Georgia,serif;letter-spacing:.2em;opacity:.75;display:flex;align-items:center;gap:8px}#now .artist i{display:inline-block;width:92px;height:9px;background:var(--ink-text);border-radius:2px}#primary{left:50%;bottom:16px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.pill{font:16px var(--round);color:var(--ink-text);background:var(--paper);border:3px solid var(--line);border-radius:999px;padding:9px 22px;box-shadow:0 6px 18px #0000004d;text-decoration:none;white-space:nowrap}.pill:hover{border-color:var(--gold)}#primary .row{display:flex;align-items:center;gap:10px}.round{flex:none;width:52px;height:52px;border-radius:50%;font-size:21px;background:var(--paper);border:3px solid var(--line);box-shadow:0 6px 18px #0000004d;display:grid;place-items:center;padding:0}.round:hover{border-color:var(--gold)}#drink{display:flex;gap:6px}#drink #drop{padding:9px 14px}#sip i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--red-deep);margin-left:3px;vertical-align:1px}#sip i.on{background:var(--red-deep)}#chat{left:16px;bottom:16px;display:flex;gap:6px}#chat-in{width:min(300px,62vw);font:15px var(--round);color:var(--ink-text);background:var(--paper);border:3px solid var(--line);border-radius:999px;padding:9px 16px;outline:none}#chat-in:focus{border-color:var(--gold)}#chat button{font:15px var(--round);color:#fff;background:var(--red);border:3px solid #f1c9b6;border-radius:999px;padding:8px 16px}#chat-log{left:16px;bottom:70px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;max-width:min(340px,70vw);pointer-events:none}#chat-log li{align-self:flex-start;font-size:13px;color:var(--cream);background:#14110f9e;border-radius:12px;padding:4px 10px;animation:logfade 14s forwards}#chat-log li b{font-weight:400;color:var(--gold);margin-right:6px}@keyframes logfade{0%,80%{opacity:1}to{opacity:0}}.bubble{position:absolute;left:0;top:0;max-width:220px;font:14px var(--round);color:var(--ink-text);background:#fff;border:2px solid var(--line);border-radius:14px;padding:5px 11px;box-shadow:0 3px 8px #0000004d;will-change:transform;white-space:normal;text-align:center}.bubble:after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:#fff;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translate(-50%) rotate(45deg)}#st-count,#st-tipsy{color:var(--red)!important;opacity:1!important}#menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;padding:14px;background:#0a08078c}#menu .sheet{position:relative;width:min(760px,100%);max-height:calc(100vh - 28px);overflow:auto;background:#f3ead6;color:#2a201a;border-radius:6px;padding:26px 28px 20px;box-shadow:0 18px 50px #0000008c;font-family:var(--brand)}#menu .x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1.5px solid #cdbf9f;background:transparent;color:#2a201a;font-size:15px}#menu header{text-align:center;border-bottom:1.5px solid #2a201a;padding-bottom:14px;margin-bottom:6px}#menu header small{font-size:11px;letter-spacing:.34em;color:#8a6a2a}#menu header h2{margin:6px 0 2px;font-weight:500;font-size:24px;letter-spacing:.22em;padding-left:.22em}#menu header p{margin:0;font-size:13px;letter-spacing:.08em;color:#6b5a48}#menu .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}#menu h3{margin:16px 0 4px;font-weight:500;font-size:12px;letter-spacing:.32em;color:#7a1e22}#menu ul{list-style:none;margin:0;padding:0}#menu li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dotted #b9aa8a}#menu li .ico{flex:none;display:grid;place-items:center}#menu li .txt{flex:1;min-width:0}#menu li b{display:block;font-weight:500;font-size:16px;letter-spacing:.01em}#menu li b em{font-style:normal;font-weight:400;font-size:12px;color:#8a6a2a;margin-left:8px;letter-spacing:.04em}#menu li small{display:block;margin-top:1px;font-size:12.5px;color:#6b5a48}#menu li button{flex:none;font:500 13px var(--brand);color:#f3ead6;background:#7a1e22;border:0;border-radius:999px;padding:7px 14px}#menu li button:hover{background:#8c2429}#menu li.now b:after{content:"  ♪ 지금 나오는 곡";font-size:11px;font-weight:400;color:#7a1e22;letter-spacing:0}#menu footer{margin-top:14px;text-align:center;font-size:12px;color:#6b5a48}@media (max-width: 640px){#menu .cols{grid-template-columns:1fr}#menu .sheet{padding:22px 18px 16px}}#shot{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:14px;background:#0a0807cc}#shot .box{width:min(860px,100%);display:grid;gap:12px;justify-items:center}#shot img,#shot video{max-width:100%;max-height:calc(100vh - 120px);border-radius:10px;box-shadow:0 14px 40px #0009;background:#000}#shot .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}#rec{position:fixed;left:50%;top:18px;transform:translate(-50%);z-index:20;font:500 14px var(--brand);letter-spacing:.14em;color:#fff;background:#a3262ae6;border-radius:999px;padding:7px 16px}#css3d{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.tv3d{position:absolute;left:0;top:0;transform-origin:0 0;background:#000;pointer-events:auto;will-change:transform}.tv3d iframe{display:block;width:100%;height:100%;border:0}#status .hint{margin-top:6px;color:var(--red);opacity:1}#t-focus{display:flex;align-items:center;gap:12px;padding:9px 26px 9px 10px;color:#fff;background:var(--red);border:3px solid #f1c9b6;border-radius:999px;box-shadow:0 6px 18px #0000004d;font-family:var(--round)}#t-focus .icon{width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:22px}#t-focus .label{text-align:left;white-space:nowrap}#t-focus{flex:none}#t-focus b{display:block;font-weight:400;font-size:19px}#t-focus small{display:block;font-size:12px;opacity:.85}#t-focus:hover{filter:brightness(1.08)}#help{right:16px;bottom:16px;padding:10px 16px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;font-size:13px}body{--tipsy: 0}.bubble,#chat-log li{filter:blur(calc(var(--tipsy) * 2.6px))}body.tipsy .bubble,body.tipsy #chat-log li{animation-name:logfade,sway;animation-duration:14s,2.4s;animation-iteration-count:1,infinite;animation-timing-function:linear,ease-in-out}body.tipsy .bubble{animation:sway 2.4s ease-in-out infinite}@keyframes sway{0%,to{margin-left:calc(var(--tipsy) * -7px)}50%{margin-left:calc(var(--tipsy) * 7px)}}.tag.tip{color:#fff;background:var(--red);border-color:#f1c9b6;font-size:14px;padding:4px 13px;animation:bob 1.5s ease-in-out infinite}@keyframes bob{50%{margin-top:-7px}}#tags{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.tag{position:absolute;left:0;top:0;font:13px var(--round);color:var(--ink-text);background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap;box-shadow:0 2px 6px #00000040;will-change:transform}body.focus #help,body.focus #tools,body.focus #primary,body.focus #status,body.focus #chat{display:none}body.clean #chat-log,body.clean #rec{opacity:0!important}#focus-exit{left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}#focus-exit button{color:#fff;background:var(--red);border:3px solid #f1c9b6;border-radius:999px;padding:12px 28px;font:17px var(--round);box-shadow:0 6px 18px #0000004d}#focus-exit small{font-size:12px;color:var(--cream);opacity:.85}@media (max-width: 820px){#help{display:none}#tools{padding:6px 8px;gap:4px;max-width:calc(100vw - 32px);top:auto;bottom:150px;right:12px;flex-direction:column;align-items:flex-end;background:transparent;border:0;box-shadow:none}#tools button{font-size:12px;padding:5px 10px}#status{left:12px;top:12px;padding:9px 14px}#now{left:12px;bottom:84px}#primary{bottom:12px}#chat{left:12px;bottom:150px}#chat-log{left:12px;bottom:200px}#t-focus small{display:none}#t-focus{padding:6px 16px 6px 7px;gap:8px}#t-focus b{font-size:16px}#t-focus .icon{width:38px;height:38px;font-size:19px}.round{width:46px;height:46px;font-size:19px}.pill{font-size:14px;padding:8px 16px}#focus-exit small{display:none}}[hidden]{display:none!important}
