:root{color-scheme:dark;background:#020207;--art-ratio:1.5}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#020207;font-family:Arial,"Noto Sans KR",sans-serif}
body{overflow:hidden}
.stage{position:fixed;inset:0;display:grid;place-items:center;background:#020207;isolation:isolate;overflow:hidden}
.art{display:block;width:100vw;height:100vh;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;filter:saturate(1.02) contrast(1.015)}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 42%,rgba(0,0,0,.1) 74%,rgba(0,0,0,.42) 118%);mix-blend-mode:multiply}
.crystal-glow{position:absolute;pointer-events:none;width:9.2vmin;height:14.5vmin;left:50%;top:38.1%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(220,179,255,.78) 0%,rgba(145,58,255,.33) 33%,rgba(105,31,221,.08) 61%,transparent 74%);filter:blur(9px);mix-blend-mode:screen;animation:crystalPulse 4.2s ease-in-out infinite}
@keyframes crystalPulse{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.09)}}
.hotspots{position:absolute;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%)}
.hotspot{position:absolute;display:block;pointer-events:auto;text-decoration:none;outline:none;background:transparent;border-radius:10px;overflow:hidden}
.hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hotspot::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-42%;width:24%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(223,181,255,.7),rgba(255,255,255,.12),transparent);filter:blur(1px);opacity:0}
.hotspot:hover::before,.hotspot:focus-visible::before{opacity:1;animation:sweep .72s ease-out forwards}
.hotspot::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;transition:border-color .18s ease,box-shadow .18s ease}
.hotspot:hover::after,.hotspot:focus-visible::after{border-color:rgba(208,159,255,.34);box-shadow:0 0 18px rgba(119,34,255,.24),inset 0 0 18px rgba(137,54,255,.08)}
.hotspot:active{transform:translateY(1px)}
@keyframes sweep{from{left:-42%}to{left:118%}}
.hs-voice{left:19.7%;top:1.45%;width:9.6%;height:6.3%}
.hs-schedule{left:30.1%;top:1.45%;width:10.5%;height:6.3%}
.hs-info{left:41.1%;top:1.45%;width:9.8%;height:6.3%}
.hs-discord-top{left:77.5%;top:1.35%;width:18.2%;height:6.75%;border-radius:13px}
.hs-discord-main{left:23.1%;top:74.9%;width:53.8%;height:13.4%;border-radius:18px;clip-path:polygon(5% 0,95% 0,100% 19%,100% 81%,95% 100%,5% 100%,0 81%,0 19%)}
.status{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);font-size:12px;letter-spacing:.08em;color:rgba(238,223,255,.72);opacity:0;transition:.25s;pointer-events:none;text-shadow:0 1px 8px #000}
.status.show{opacity:1}
@media (min-aspect-ratio:3/2){.hotspots{width:150vh;height:100vh}.crystal-glow{left:50%;top:38.1%}}
@media (max-aspect-ratio:3/2){.hotspots{width:100vw;height:66.6667vw}.crystal-glow{width:6.2vw;height:9.7vw}}
@media (max-width:760px){body{overflow:auto}.stage{position:relative;min-height:100svh}.art{width:auto;height:100svh;max-width:none;object-fit:cover;object-position:50% center}.hotspots{width:150svh;height:100svh}.hs-voice,.hs-schedule,.hs-info,.hs-discord-top{display:none}.hs-discord-main{left:23.1%;top:74.9%;width:53.8%;height:13.4%}.crystal-glow{width:10svh;height:16svh}}
@media (prefers-reduced-motion:reduce){.crystal-glow{animation:none}.hotspot:hover::before,.hotspot:focus-visible::before{animation:none;opacity:.25}}