:root{--bg: #fff7ec;--ink: #2d2440;--ink-2: #5d5470;--muted: #8d849e;--card: #ffffff;--line: rgb(45 36 64 / .08);--round: "Jua", "Pretendard Variable", Pretendard, sans-serif;--sans: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", sans-serif;--spring: cubic-bezier(.34, 1.56, .64, 1);--ease: cubic-bezier(.22, 1, .36, 1);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}body{min-height:100vh;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:#ffd76a;color:var(--ink)}:focus-visible{outline:3px solid #8b5cf6;outline-offset:4px;border-radius:12px}.backdrop{--px: 0;--py: 0;position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.blob{position:absolute;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in oklab,var(--c) 70%,white),transparent 68%);opacity:.38;filter:blur(40px);animation:float 26s ease-in-out infinite alternate;translate:calc(var(--px) * -24px) calc(var(--py) * -24px);transition:translate 1.2s var(--ease)}.blob-0{left:-12vmax;top:-16vmax}.blob-1{right:-14vmax;top:-10vmax;animation-delay:-6s;animation-duration:30s}.blob-2{left:18vmax;bottom:-24vmax;animation-delay:-12s;animation-duration:34s}.blob-3{right:-6vmax;bottom:-22vmax;animation-delay:-3s;animation-duration:28s}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.12)}to{transform:translate(-4vmax,7vmax) scale(.95)}}.dots{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgb(45 36 64 / .09) 1.5px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 85%)}.bit{position:absolute;bottom:-40px;opacity:0;animation:rise linear infinite;translate:calc(var(--px) * 10px) calc(var(--py) * 10px)}@keyframes rise{0%{transform:translate(0) rotate(0);opacity:0}10%{opacity:.45}90%{opacity:.45}to{transform:translate(var(--drift),-110vh) rotate(360deg);opacity:0}}.grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:0 auto;padding:20px 32px 0}.brand{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:999px;background:var(--card);box-shadow:0 3px #2d244014,0 12px 26px -16px #2d244073;transition:transform .4s var(--spring)}.brand:hover{transform:translateY(-2px) rotate(-1deg)}.brand-mark{width:52px;height:52px;margin:-4px 0;animation:wiggle 3.6s ease-in-out infinite;transform-origin:50% 80%}.brand:hover .brand-mark{animation:hop .6s var(--spring)}@keyframes wiggle{0%,to{transform:rotate(0)}10%{transform:rotate(-7deg)}20%{transform:rotate(5deg)}30%{transform:rotate(0)}}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-name{font-family:var(--round);font-size:1.3rem;letter-spacing:-.01em}.brand-name em{font-style:normal;background:linear-gradient(90deg,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}.music{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:var(--card);box-shadow:0 3px #2d244014,0 10px 24px -14px #2d244066;cursor:pointer;font-size:.86rem;font-weight:600;color:var(--ink-2);transition:transform .3s var(--spring)}.music:hover{transform:translateY(-2px) scale(1.03)}.music:active{transform:scale(.96)}.music-disc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#fde68a,#fca5a5);color:var(--ink);font-size:.95rem}.music.is-on .music-disc{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.music-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.music-bars i{width:3px;height:4px;border-radius:2px;background:#d6d0e0}.music.is-on .music-bars i{background:#8b5cf6;animation:eq .8s ease-in-out infinite alternate}@keyframes eq{to{height:14px}}.page{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:0 32px 28px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:36px 0 30px}.kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:#ffffffb3;box-shadow:0 2px #2d24400f;font-size:.88rem;font-weight:600;color:var(--ink-2)}.title{margin:14px 0 0;font-family:var(--round);font-weight:400;font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.1;letter-spacing:-.01em}.bouncy{display:inline-block;cursor:default}.title-pop .bouncy{background:linear-gradient(90deg,#8b5cf6,#ec4899 45%,#f97316 75%,#eab308);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 6s ease-in-out infinite alternate}@keyframes hue{to{background-position:100% 0}}.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:var(--card);box-shadow:0 3px #2d244012,0 8px 18px -12px #2d244066;font-size:.9rem;color:var(--ink-2);white-space:nowrap}.chip b{color:var(--ink);font-weight:800}.live{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33;animation:blink 1.6s ease-in-out infinite}@keyframes blink{50%{box-shadow:0 0 0 6px #22c55e00}}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;perspective:1200px}.card-wrap{display:flex}.card{position:relative;flex:1;display:flex;flex-direction:column;border-radius:30px;background:var(--card);box-shadow:0 6px color-mix(in oklab,var(--accent) 22%,rgb(45 36 64 / .1)),0 24px 40px -24px color-mix(in oklab,var(--accent) 55%,transparent);transform-style:preserve-3d;cursor:pointer;transition:box-shadow .4s var(--ease)}.card:hover{box-shadow:0 10px color-mix(in oklab,var(--accent) 30%,rgb(45 36 64 / .1)),0 40px 60px -26px color-mix(in oklab,var(--accent) 75%,transparent)}.card-art{position:relative;height:230px;margin:10px 10px 0;border-radius:22px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgb(255 255 255 / .55),transparent 45%),radial-gradient(circle at 80% 90%,color-mix(in oklab,var(--accent) 60%,#000 10%),transparent 60%),linear-gradient(150deg,color-mix(in oklab,var(--accent) 55%,white),var(--accent));transform:translateZ(20px)}.art-ring{position:absolute;width:210px;height:210px;border-radius:50%;border:2px dashed rgb(255 255 255 / .45);animation:spin 24s linear infinite}.art-ring-2{width:290px;height:290px;border-style:dotted;border-color:#ffffff4d;animation-direction:reverse;animation-duration:40s}.card-icon{position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;border-radius:36px;overflow:hidden;box-shadow:0 18px 30px -12px #00000059,0 0 0 4px #fff9;animation:bob 3.2s ease-in-out infinite;transition:transform .5s var(--spring);font-size:4rem}.card-wrap:nth-child(2) .card-icon{animation-delay:-.8s}.card-wrap:nth-child(3) .card-icon{animation-delay:-1.6s}.card-wrap:nth-child(4) .card-icon{animation-delay:-2.4s}@keyframes bob{0%,to{margin-top:0}50%{margin-top:-12px}}.card-icon img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}.card:hover .card-icon img{animation:hop .6s var(--spring)}@keyframes hop{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.12,.9) rotate(-6deg)}60%{transform:scale(.95,1.08) rotate(5deg)}to{transform:scale(1) rotate(0)}}.sparks{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none}.sparks i{position:absolute;left:0;top:0;color:#fff;font-style:normal;font-size:calc(14px * var(--s));text-shadow:0 0 8px rgb(255 255 255 / .8);animation:spark .8s var(--ease) forwards}@keyframes spark{0%{transform:translate(-50%,-50%) scale(0);opacity:1}60%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);opacity:0}}.status{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#ffffffe0;font-size:.76rem;font-weight:700;color:var(--ink-2)}.status i{width:7px;height:7px;border-radius:50%}.status.on i{background:#22c55e;box-shadow:0 0 0 3px #22c55e40}.status.off{color:#b45309}.status.off i{background:#f59e0b}.glare{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;background:radial-gradient(circle at var(--gx) var(--gy),rgb(255 255 255 / .45),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}.card:hover .glare{opacity:1}.card.down .card-art{filter:saturate(.45)}.card-body{position:relative;flex:1;display:flex;flex-direction:column;padding:18px 22px 22px;transform:translateZ(10px)}.card-no{position:absolute;top:18px;right:22px;font-family:var(--round);font-size:1.1rem;color:color-mix(in oklab,var(--accent) 50%,#d6d0e0)}.card-name{margin:0;font-family:var(--round);font-weight:400;font-size:1.85rem;line-height:1.15}.card-tagline{margin:4px 0 0;font-size:.92rem;font-weight:700;color:color-mix(in oklab,var(--accent) 80%,#000 15%)}.card-desc{margin:10px 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2)}.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}.card-tags span{padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--accent) 12%,white);font-size:.78rem;font-weight:600;color:color-mix(in oklab,var(--accent) 70%,var(--ink))}.card-play{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:16px;background:var(--accent);box-shadow:0 4px color-mix(in oklab,var(--accent) 70%,#000);color:#fff;font-family:var(--round);font-size:1.15rem;text-shadow:0 1px 0 rgb(0 0 0 / .15);transition:transform .2s,box-shadow .2s}.card:hover .card-play{transform:translateY(-1px)}.card:active .card-play{transform:translateY(3px);box-shadow:0 1px color-mix(in oklab,var(--accent) 70%,#000)}.card-play-arrow{display:inline-block;transition:transform .4s var(--spring)}.card:hover .card-play-arrow{transform:translate(6px)}.card.down .card-play{background:#e9e5ef;box-shadow:0 4px #d6d0e0;color:var(--muted);text-shadow:none}.card-skeleton{height:520px;border-radius:30px;background:linear-gradient(100deg,#fff 30%,#f5efe6,#fff 70%);background-size:200% 100%;animation:sk 1.3s linear infinite}@keyframes sk{to{background-position:-200% 0}}.load-error{padding:60px 0;color:var(--ink-2)}.foot{margin-top:26px;text-align:center;font-size:.82rem;color:var(--muted)}.launch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--accent) 45%,white),var(--accent) 70%);color:#fff}.launch-icon{width:170px;height:170px;border-radius:40px;overflow:hidden;display:grid;place-items:center;font-size:5rem;box-shadow:0 30px 50px -20px #0006,0 0 0 6px #fff9}.launch-icon img{width:100%;height:100%;object-fit:cover}.launch-name{margin-top:10px;font-family:var(--round);font-size:3rem;text-shadow:0 3px 0 rgb(0 0 0 / .15)}.launch-sub{font-weight:700;opacity:.9}.launch-dots i{display:inline-block;font-style:normal;animation:dot 1s ease-in-out infinite}.launch-dots i:nth-child(2){animation-delay:.15s}.launch-dots i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.blob,.bit,.art-ring,.card-icon,.title-pop .bouncy{animation:none}}
