@font-face{font-family:Pretendard;src:url(/fonts/Pretendard-Regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url(/fonts/Pretendard-SemiBold.otf) format('opentype');font-weight:700;font-display:swap}
:root{--gold:#FFD9A0;--navy:#14163A;--violet:#5B3DF5;--violet-soft:#EEEBFF;--bg:#F5F6FA;--card:#fff;--line:#E6E8F0;--ink:#14163A;--muted:#6B7085;--red:#F0263C}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

.ticker{background:var(--navy);color:#C9C4FF;text-align:center;font-size:13px;font-weight:700;padding:10px 16px;letter-spacing:-.2px}
.ticker.live{background:var(--red);color:#fff}
.header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px max(16px,calc((100% - 1200px)/2));background:#ffffffee;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header nav{display:flex;gap:22px;font-size:15px;font-weight:700}
.nav-right{justify-content:flex-end}
.header nav a{color:var(--muted)}.header nav a:hover,.header nav a.active{color:var(--violet)}
.logo{display:flex;align-items:center;gap:10px;line-height:1}
.logo img{border-radius:10px;box-shadow:0 4px 12px #14163A30}
.wordmark{display:flex;flex-direction:column}
.logo b{font-size:24px;letter-spacing:-1px;color:var(--navy)}
.logo small{font-size:8.5px;letter-spacing:2.4px;color:var(--muted);margin-top:4px;font-weight:700}

main{max-width:1200px;margin:0 auto;padding:0 16px}
.hero{position:relative;overflow:hidden;margin-top:24px;border-radius:28px;padding:64px 56px;min-height:420px;color:#fff;background:radial-gradient(circle at 78% 22%,#8A6CFFb0 0,transparent 42%),radial-gradient(circle at 10% 110%,#F0263C30 0,transparent 40%),linear-gradient(135deg,#0B0C26 0%,#1A1550 55%,#3B25B8 100%);display:flex;align-items:center;box-shadow:0 30px 60px -20px #14163A70,inset 0 0 0 1px #ffffff14}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{position:relative;z-index:1;max-width:520px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;color:#B9AEFF;margin-bottom:14px}
.hero h1{font-size:52px;line-height:1.15;letter-spacing:-2.4px}
.hero-copy>p:not(.eyebrow){margin-top:16px;color:#D9D5FF;line-height:1.7;font-size:15px}
.hero-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.hero-art{position:absolute;right:5%;top:50%;width:330px;transform:translateY(-50%);filter:drop-shadow(0 30px 40px #05061A90);animation:float 6s ease-in-out infinite;font-family:Pretendard,sans-serif}
.hero-art .sheen{animation:sheen 4.5s ease-in-out infinite}
.hero-art .spark{transform-origin:782px 274px;animation:twinkle 2.8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(calc(-50% - 12px))}}
@keyframes sheen{0%{transform:rotate(24deg) translateX(-260px)}60%,100%{transform:rotate(24deg) translateX(420px)}}
@keyframes twinkle{50%{transform:scale(.7);opacity:.6}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .15s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,#7B5CFF,#5B3DF5);color:#fff;box-shadow:0 8px 20px #5B3DF555,inset 0 1px 0 #ffffff40}
.btn.ghost{border:1.5px solid currentColor;opacity:.9}
.btn.light{background:#fff;color:var(--navy)}

.section{margin-top:56px}
.section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.section h2{font-size:26px;letter-spacing:-1px}
.section-head span{color:var(--muted);font-size:14px}

.streams{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.stream{background:var(--card);border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 1px 2px #14163A0a;transition:transform .2s,box-shadow .2s}
.stream:hover{transform:translateY(-4px);box-shadow:0 18px 36px -12px #14163A33}
.thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#1E2050,#3A2C9A);display:grid;place-items:center;color:#B9AEFF;font-size:13px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:700;background:#14163ACC;color:#fff}
.badge.live{background:var(--red)}.badge.scheduled{background:#fff;color:var(--violet)}
.stream-info{padding:14px 16px 16px}
.stream-info strong{display:block;font-size:16px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stream-info span{display:block;color:var(--muted);font-size:13px;margin-top:6px}

.pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.pills button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:120px;min-height:42px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--muted)}
.pills svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pills button[aria-pressed=true]{background:linear-gradient(135deg,#7B5CFF,#5B3DF5);border-color:transparent;color:#fff;box-shadow:0 8px 18px #5B3DF545}
.pills.small button{min-width:64px;min-height:32px;font-size:12px}
.pills.small button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.product{display:flex;flex-direction:column}
.product{padding:12px;background:#fff;border-radius:20px;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 36px -12px #14163A33}
.product-img{position:relative;aspect-ratio:1;border-radius:14px;background:radial-gradient(circle at 70% 20%,#EEEBFF,#F5F6FA 70%);overflow:hidden;display:grid;place-items:center}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-img .placeholder{width:44%;height:auto;aspect-ratio:1;opacity:.9;border-radius:18%;box-shadow:0 12px 24px #14163A30}
.type{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:5px;background:var(--violet-soft);color:var(--violet)}
.product h3{font-size:15px;line-height:1.4;margin-top:12px;letter-spacing:-.3px}
.price{font-size:22px;font-weight:700;color:var(--violet);margin-top:6px;letter-spacing:-.6px}
.stock{font-size:12px;color:var(--muted);margin-top:4px}
.product .btn{margin-top:12px;min-height:40px;font-size:14px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.product .btn:hover{border-color:var(--violet);color:var(--violet)}
.card-item .card-img{aspect-ratio:63/88;background:linear-gradient(160deg,#EEEBFF,#F5F6FA)}
.card-item .card-img img:not(.placeholder){object-fit:contain;padding:8px;filter:drop-shadow(0 8px 14px #14163A30)}
.card-item .price small{font-size:13px;font-weight:700;margin-left:4px}
.card-item .price small.up{color:var(--red)}.card-item .price small.down{color:#3E719A}
.grid.cards{grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:900px){.grid.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.grid.cards{grid-template-columns:repeat(2,1fr)}}
.empty{grid-column:1/-1;padding:56px 16px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:18px;line-height:1.7}

.steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.steps li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.step-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--violet-soft);margin-bottom:16px}
.step-icon svg{width:24px;height:24px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps li b{color:var(--violet);font-size:13px}
.steps li strong{display:block;font-size:18px;margin:10px 0 8px}
.steps li span{color:var(--muted);font-size:14px;line-height:1.6}

.notices{list-style:none;background:#fff;border:1px solid var(--line);border-radius:18px}
.notices li{padding:18px 20px;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.notices li:first-child{border-top:0}
.notices li strong{display:block;margin-bottom:4px}
.notices li span{color:var(--muted);white-space:pre-line}

.app{margin-top:56px;border-radius:28px;background:radial-gradient(circle at 90% 10%,#5B3DF570,transparent 45%),linear-gradient(135deg,#0B0C26,#1A1550);box-shadow:inset 0 0 0 1px #ffffff14;color:#fff;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.app h2{font-size:32px;letter-spacing:-1.2px;line-height:1.3}
.app p:not(.eyebrow){color:#C9C4FF;margin-top:12px;line-height:1.6}
.app img{border-radius:32px;box-shadow:0 20px 50px #0006}
.stores{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.soon{font-size:13px;color:#8E89C9}

.footer{margin-top:72px;padding:40px max(16px,calc((100% - 1200px)/2)) 120px;background:#0B0C26;color:#8E89C9;font-size:13px;line-height:1.8}
.footer b{color:#fff;font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.footer b img{border-radius:7px}

.fab{position:fixed;right:28px;bottom:28px;width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 10px 26px #F0263C66;z-index:20}
.fab.on::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}}

dialog{margin:auto;border:0;border-radius:20px;padding:28px;max-width:400px;width:calc(100% - 32px);color:var(--ink)}
dialog::backdrop{background:#14163A80}
dialog h3{font-size:19px;letter-spacing:-.5px}
dialog p{color:var(--muted);line-height:1.6;margin-top:10px;font-size:14px}
.dialog-actions{display:flex;gap:8px;margin-top:22px}
.dialog-actions .btn{flex:1}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .steps ol{grid-template-columns:repeat(2,1fr)}
  .hero-art{opacity:.35;right:-90px}
}
@media (max-width:640px){
  .header{grid-template-columns:auto 1fr;padding:12px 16px}
  .nav-left{display:none!important}
  .logo{align-items:flex-start}
  .nav-right{gap:14px!important;font-size:13px!important}
  .nav-right a:last-child{display:none}
  .hero{padding:36px 24px;min-height:300px}
  .hero h1{font-size:34px;letter-spacing:-1.4px}
  .hero-art{width:220px;right:-70px;opacity:.45}
  .product{padding:8px;border-radius:16px}
  .pills button{min-width:0;flex:1}
  .streams{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .stream{scroll-snap-align:start}
  .app{flex-direction:column;align-items:flex-start;padding:32px 24px}
  .app img{width:96px;height:96px;border-radius:22px}
  .fab{right:16px;bottom:16px;width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- premium layer ---- */
.eyebrow.dark{color:var(--violet);margin-bottom:6px;font-size:11px}
.section-head{align-items:flex-end;justify-content:space-between}
.section-head>div{display:flex;flex-direction:column}
.section-head>span{margin-bottom:4px}
.marquee{overflow:hidden;background:#0B0C26;border-bottom:1px solid #ffffff12;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:36px;width:max-content;padding:11px 0;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.tick{white-space:nowrap;font-size:13px;color:#C9C4FF;display:inline-flex;align-items:center;gap:4px}
.tick b{font-size:10px;letter-spacing:1px;color:#8E89C9;border:1px solid #ffffff24;border-radius:4px;padding:2px 5px}
.tick em{font-style:normal;font-weight:700;color:#fff}
.tick i{font-style:normal;font-size:12px}.tick i.up{color:#FF6B7A}.tick i.down{color:#7FB2FF}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero-fan{position:absolute;right:4%;top:50%;width:380px;height:330px;transform:translateY(-50%);display:none}
.hero.has-fan .hero-fan{display:block}
.hero.has-fan .hero-art{display:none}
.fan-card{position:absolute;top:30px;width:170px;margin:0;border-radius:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fan-card img{width:100%;display:block;border-radius:10px;box-shadow:0 24px 50px #05061Acc}
.fan-card figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:#fff;color:var(--navy);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;box-shadow:0 8px 20px #05061A55;white-space:nowrap}
.fan-0{left:0;transform:rotate(-14deg) translateY(18px)}
.fan-1{left:105px;transform:translateY(-8px);z-index:2}
.fan-2{left:210px;transform:rotate(14deg) translateY(18px)}
.hero.has-fan:hover .fan-0{transform:rotate(-18deg) translate(-14px,10px)}
.hero.has-fan:hover .fan-1{transform:translateY(-20px) scale(1.04)}
.hero.has-fan:hover .fan-2{transform:rotate(18deg) translate(14px,10px)}
.card-item{position:relative;overflow:hidden;transform-style:preserve-3d}
.card-item .card-img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card-item:hover .card-img{transform:perspective(700px) rotateX(4deg) rotateY(-6deg) translateY(-2px)}
.card-item .card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff8c 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.card-item:hover .card-img::after{transform:translateX(120%)}
.section h2{font-size:28px;letter-spacing:-1.1px}
@media (max-width:900px){.hero-fan{opacity:.5;right:-120px}}
@media (max-width:640px){.hero-fan{width:260px;right:-150px;opacity:.35}.fan-card{width:120px}.fan-1{left:70px}.fan-2{left:140px}.section h2{font-size:23px}}
@media (max-width:640px){.fan-card figcaption{display:none}}