:root{color-scheme:dark;--ink:#16131b;--paper:#f8f3f7;--mint:#f4a8c8;--muted:#aaa0ad;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Inter,"Apple SD Gothic Neo","Noto Sans KR",Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.fan-featured-copy h3,.fan-moment-card strong,.video-card h2,.admin-media-item strong{font-family:"Apple SD Gothic Neo","Noto Sans KR","Noto Sans Canadian Aboriginal","STIX Two Math","Segoe UI Symbol",system-ui,sans-serif;letter-spacing:normal}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
.skip-link{position:absolute;z-index:100;top:-5rem;left:1rem;padding:.8rem 1rem;background:var(--mint);color:var(--ink)}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.site-header{height:76px;padding:0 clamp(22px,5vw,90px);position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09)}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:1.2rem;font-weight:800;letter-spacing:-.06em}
.wordmark-spark{color:var(--mint);font-size:1.45rem;font-weight:400}
a.brand-image{display:flex;align-items:center;flex:none;width:146px;height:74px;background:transparent}
a.brand-image picture{display:block;width:100%;height:100%}
.brand-image img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
@media(max-width:600px){a.brand-image{width:110px;height:56px}}
.header-actions{display:flex;align-items:center;gap:22px}
.member-label{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mint);font-size:.82rem}
.header-login{display:inline-flex;align-items:center;gap:20px;padding:10px 0;border:0;background:none;color:var(--paper);font-size:.83rem;font-weight:700;letter-spacing:-.02em}
.header-login span,.primary-link span{font-size:1.12em;transition:transform .2s ease}
.header-login:hover span,.primary-link:hover span{transform:translate(3px,-3px)}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px clamp(22px,9vw,150px) 100px;isolation:isolate;overflow:hidden}
.hero-grid,.art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 5%,black 70%);pointer-events:none}
.hero-halo{position:absolute;z-index:-1;right:-22vw;top:6vh;width:85vw;height:85vw;max-width:1300px;max-height:1300px;border-radius:50%;background:radial-gradient(circle,rgba(143,120,255,.2),rgba(103,80,168,.09) 30%,transparent 64%);filter:blur(12px)}
.hero-content{position:relative;z-index:3;max-width:780px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 32px;color:var(--mint);font-size:.7rem;font-weight:800;letter-spacing:.22em}
.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}
h1,h2,p{margin-top:0}
.hero h1{font-size:clamp(4.7rem,10.8vw,10rem);line-height:.99;letter-spacing:-.09em;font-weight:800;margin:0 0 34px}
.hero h1 em,.story h2 em,.invitation h2 em{font-style:normal;color:var(--mint)}
.hero-description{color:#d1d5d1;font-size:clamp(1rem,1.45vw,1.28rem);line-height:1.8;letter-spacing:-.035em;margin-bottom:36px}
.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-width:218px;border-radius:999px;padding:16px 24px;background:var(--mint);color:#101711;font-weight:800;font-size:.87rem;box-shadow:0 8px 40px rgba(182,255,156,.12);transition:transform .2s,box-shadow .2s}
.primary-link:hover{transform:translateY(-3px);box-shadow:0 14px 46px rgba(182,255,156,.22)}
.hero-object{position:absolute;right:-6vw;top:50%;width:min(62vw,820px);aspect-ratio:1;transform:translateY(-45%);filter:drop-shadow(0 0 70px rgba(172,139,255,.1))}
.object-ring{position:absolute;inset:0;border:1px solid rgba(221,208,255,.24);border-radius:50%;box-shadow:inset 0 0 50px rgba(134,117,215,.07),0 0 55px rgba(134,117,215,.04)}
.ring-outer{transform:rotate(-22deg) scaleX(.76)}
.ring-middle{inset:10%;transform:rotate(36deg) scaleX(.72);border-color:rgba(182,255,156,.22)}
.ring-inner{inset:23%;background:radial-gradient(circle at 39% 34%,#5b577f,#222337 43%,#10111d 70%);border-color:rgba(255,255,255,.28);box-shadow:inset -30px -30px 70px #08090f,inset 18px 18px 40px rgba(192,185,255,.14),0 0 75px rgba(126,99,219,.24)}
.object-center{position:absolute;inset:35%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.86);font-size:clamp(1rem,3vw,2.8rem);font-weight:900;line-height:.91;letter-spacing:-.08em;text-align:center;transform:rotate(-10deg)}
.object-center span:nth-child(2){color:var(--mint)}
.orbit-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 22px var(--mint)}
.dot-one{top:16%;left:32%}.dot-two{right:14%;bottom:25%;width:5px;height:5px;background:#c8b7ff}
.scroll-cue{position:absolute;bottom:34px;left:clamp(22px,9vw,150px);display:flex;align-items:center;gap:18px;color:#92989a;font-size:.65rem;font-weight:700;letter-spacing:.2em}
.scroll-line{width:48px;height:1px;background:linear-gradient(90deg,var(--mint),transparent)}
.story{height:360vh;background:#101319;position:relative}
.story-sticky{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}
.story-topline{position:absolute;z-index:5;top:54px;left:clamp(22px,5vw,90px);right:clamp(22px,5vw,90px);display:flex;justify-content:space-between;color:#9da4a4;font-size:.69rem;font-weight:750;letter-spacing:.22em}
.story-art{position:absolute;inset:0 0 0 45%;display:grid;place-items:center;--turn:0deg;--scale:1;--hue:0deg}
.art-grid{opacity:.7;mask-image:linear-gradient(90deg,transparent,black 25%)}
.art-orbit{position:absolute;width:min(68vw,760px);aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:50%;transform:rotate(var(--turn)) scaleX(.68);transition:border-color .3s}
.art-orbit-b{width:min(53vw,590px);border-color:rgba(182,255,156,.27);transform:rotate(calc(var(--turn) * -1.2)) scaleX(.7)}
.art-core{width:min(35vw,375px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#7f80a4,#45405c 34%,#1b1b2e 70%,#0d1015);box-shadow:inset -18px -30px 45px rgba(0,0,0,.68),0 0 100px rgba(136,109,252,.2);transform:scale(var(--scale)) rotate(var(--turn));filter:hue-rotate(var(--hue));will-change:transform}
.art-core-label{font-size:.62rem;letter-spacing:.34em;color:rgba(255,255,255,.5);margin-bottom:6px}
.art-core-mark{font-size:clamp(7rem,19vw,17rem);line-height:1;color:var(--mint);font-weight:200;text-shadow:0 0 60px rgba(182,255,156,.18)}
.art-caption{position:absolute;color:#8b9296;font-size:.62rem;letter-spacing:.22em;font-weight:700}.art-caption-a{left:15%;top:24%}.art-caption-b{right:12%;top:37%}.art-caption-c{left:21%;bottom:17%}
.story-copies{position:absolute;z-index:4;inset:0 42% 0 0;pointer-events:none}
.story-copy{position:absolute;left:clamp(22px,9vw,150px);top:50%;width:min(620px,85%);transform:translateY(calc(-50% + 36px));opacity:0;transition:opacity .25s ease,transform .25s ease;will-change:transform,opacity}
.story-copy:first-child{opacity:1;transform:translateY(-50%)}
.chapter-number{display:block;color:var(--mint);font-size:.76rem;font-weight:800;letter-spacing:.12em;margin-bottom:24px}
.story h2{font-size:clamp(3rem,5.8vw,6.4rem);line-height:1.13;letter-spacing:-.075em;margin:0 0 25px}
.story-copy p{max-width:400px;color:#b3babb;font-size:1.02rem;line-height:1.8;letter-spacing:-.035em}
.story-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
.story-progress span{display:block;height:100%;width:var(--progress,0%);background:var(--mint)}
.invitation{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px;background:#f4eaf3;color:#29212a;overflow:hidden;isolation:isolate}
.invite-glow{position:absolute;z-index:-1;width:min(80vw,900px);height:min(80vw,900px);border-radius:50%;background:radial-gradient(circle,rgba(240,177,211,.75),rgba(204,182,239,.23) 45%,transparent 72%);top:-54%;right:-12%}
.invitation .eyebrow{color:#9a3c70}
.invitation h2{font-size:clamp(3.4rem,8vw,8rem);line-height:1.13;letter-spacing:-.08em;margin:0 0 26px}
.invitation h2 em{color:#a83b72}
.invitation>p:not(.eyebrow):not(.login-feedback){color:#4c554b;font-size:1.03rem;line-height:1.7;margin-bottom:34px}
.primary-link-light{background:#29212a;color:#fff5fa;box-shadow:none}
.login-feedback{margin:26px 0 0;font-size:.85rem;color:#91563a}
.site-footer{min-height:100px;padding:32px clamp(22px,5vw,90px);display:flex;justify-content:space-between;align-items:center;gap:20px;color:#929b9c;font-size:.78rem;border-top:1px solid var(--line)}
.site-footer span:first-child{color:var(--paper);font-weight:800;font-size:1rem}
@media(max-width:900px){.hero{align-items:flex-start;padding-top:170px;min-height:930px}.hero-content{max-width:650px}.hero-object{width:75vw;right:-18vw;top:66%;opacity:.6}.story-art{inset:0 0 0 20%;opacity:.55}.story-copies{inset:0 15% 0 0}.story-copy{top:46%}}
@media(max-width:600px){.site-header{height:66px}.wordmark{font-size:1.02rem}.header-login{font-size:.74rem;gap:7px}.member-label{display:none}.hero{min-height:100svh;padding-top:142px;padding-bottom:120px}.hero h1{font-size:clamp(2.9rem,13vw,4.7rem)}.hero-description{font-size:.95rem}.hero-object{width:96vw;right:-35vw;top:70%;opacity:.42}.scroll-cue{bottom:30px}.story{height:330vh}.story-topline{top:32px}.story-art{inset:0;opacity:.38}.story-copies{inset:0}.story-copy{top:48%;width:calc(100% - 44px)}.story h2{font-size:clamp(3.1rem,11vw,5rem)}.story-copy p{max-width:270px;font-size:.88rem}.art-orbit{width:95vw}.art-orbit-b{width:75vw}.art-core{width:57vw}.invitation{min-height:75vh}.invitation h2{font-size:clamp(3.2rem,11vw,5rem)}.site-footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary-link,.primary-link span,.header-login span{transition:none}.story{height:auto}.story-sticky{height:auto;position:relative;padding:110px 22px 70px}.story-topline{top:30px}.story-art{position:relative;inset:auto;height:260px;opacity:.7}.art-orbit{width:240px}.art-orbit-b{width:190px}.art-core{width:155px}.art-core-mark{font-size:7rem}.art-caption{display:none}.story-copies{position:relative;inset:auto;pointer-events:auto}.story-copy,.story-copy:first-child{position:relative;left:auto;top:auto;width:auto;opacity:1!important;transform:none!important;padding:40px 0;border-top:1px solid var(--line)}.story h2{font-size:clamp(2.8rem,8vw,4.5rem)}.story-progress{display:none}}