:root{
  --bg:#070a12;--bg2:#0b101b;--panel:#101725;--ink:#f4f7fb;--muted:#9ba7ba;
  --cyan:#44e7ff;--cyan2:#0fa6c7;--magenta:#ff3e9f;--red:#ff5268;--gold:#ffc95f;
  --line:rgba(255,255,255,.12);--max:1240px;--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.scroll-progress{position:fixed;z-index:120;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 18px var(--cyan)}
.topbar{height:76px;position:fixed;z-index:90;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid transparent;transition:.25s;background:linear-gradient(to bottom,rgba(6,8,14,.78),transparent)}.topbar.scrolled{background:rgba(7,10,18,.88);backdrop-filter:blur(18px);border-color:var(--line)}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:34px;height:34px;border:1px solid rgba(68,231,255,.55);display:grid;place-items:center;font-weight:900;color:var(--cyan);font-family:ui-monospace,monospace;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%)}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand-copy b{font-size:11px;letter-spacing:.18em}.brand-copy small{font-size:9px;color:var(--muted);letter-spacing:.12em}.nav{display:flex;gap:28px;font-size:12px;letter-spacing:.08em;color:#c8d1df}.nav a{position:relative}.nav a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--cyan);transition:.2s}.nav a:hover:after{width:100%}.menu-btn{display:none;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;padding:8px 10px;font-size:11px;letter-spacing:.12em}
.hero{min-height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;background:#05070c}.hero-panel{position:absolute;top:0;bottom:0;width:58%;background-size:cover;background-position:center}.hero-panel--left{left:0;background-image:url('assets/cover-lumiere.webp');background-position:48% 30%}.hero-panel--right{right:0;background-image:url('assets/cover-iblis.webp');background-position:51% 35%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,12,.32),rgba(5,7,12,.94) 45%,rgba(5,7,12,.9) 55%,rgba(5,7,12,.3)),linear-gradient(0deg,#070a12 0,transparent 25%,rgba(0,0,0,.2) 100%)}.hero-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent 5%,black 40%,transparent 95%)}.hero-content{position:relative;z-index:4;width:min(900px,86vw);text-align:center;padding-top:64px}.eyebrow,.section-index{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.22em;color:var(--cyan);font-weight:800}.hero h1{margin:18px 0 22px;line-height:.92;letter-spacing:-.055em;text-shadow:0 10px 60px rgba(0,0,0,.65)}.hero h1 span,.hero h1 strong{display:block}.hero h1 span{font-size:clamp(42px,6vw,78px);font-weight:700}.hero h1 strong{font-size:clamp(52px,8vw,110px);font-weight:900;background:linear-gradient(90deg,#fff 15%,#d9fbff 45%,#ffd2e8 82%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{margin:0 auto 30px;max-width:680px;font-size:clamp(15px,1.6vw,20px);line-height:1.8;color:#d6dce6}.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--line);font-weight:800;font-size:12px;letter-spacing:.04em;transition:.2s}.btn--primary{color:#041017;background:linear-gradient(90deg,var(--cyan),#b5f7ff);border-color:transparent;box-shadow:0 8px 30px rgba(68,231,255,.18)}.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(68,231,255,.28)}.btn--ghost{background:rgba(3,7,14,.5);backdrop-filter:blur(10px)}.btn--ghost:hover{border-color:rgba(255,255,255,.32)}.hero-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}.hero-tags span{font-size:10px;letter-spacing:.08em;color:#cbd4e0;border:1px solid rgba(255,255,255,.14);background:rgba(5,9,16,.45);padding:7px 10px;backdrop-filter:blur(8px)}.hero-side{position:absolute;z-index:5;bottom:66px;display:flex;flex-direction:column;font-family:ui-monospace,monospace;letter-spacing:.16em}.hero-side span{font-size:9px;color:var(--muted)}.hero-side b{font-size:12px}.hero-side--left{left:32px;color:#dffbff}.hero-side--right{right:32px;text-align:right;color:#ffd8e9}.scroll-cue{position:absolute;z-index:7;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;align-items:center;color:#9aa6b6;font:9px ui-monospace,monospace;letter-spacing:.2em}.scroll-cue i{height:26px;width:1px;background:linear-gradient(var(--cyan),transparent);animation:pulse 1.8s infinite}@keyframes pulse{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
.section{position:relative;padding:110px 28px}.section-shell{width:min(var(--max),100%);margin:0 auto}.two-col{display:grid;grid-template-columns:.84fr 1.16fr;gap:70px;align-items:center}.section-copy h2,.section-heading h2,.final-inner h2{margin:12px 0 22px;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.055em}.section-desc{color:var(--muted);line-height:1.9;font-size:15px;max-width:600px}.section-copy blockquote{margin:34px 0 0;padding:18px 20px;border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(68,231,255,.08),transparent);color:#d8e1ed;font-size:14px;line-height:1.8}.system-section{background:radial-gradient(circle at 80% 25%,rgba(68,231,255,.08),transparent 28%),linear-gradient(#070a12,#090e18)}.system-terminal{border:1px solid rgba(68,231,255,.24);background:rgba(5,12,20,.74);box-shadow:0 30px 90px rgba(0,0,0,.36),inset 0 0 60px rgba(68,231,255,.025);backdrop-filter:blur(10px);clip-path:polygon(0 0,96% 0,100% 7%,100% 100%,4% 100%,0 93%)}.terminal-head,.terminal-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(68,231,255,.18);font:10px ui-monospace,monospace;letter-spacing:.15em;color:var(--cyan)}.terminal-head small{color:#76ffbf}.terminal-status{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.08)}.terminal-status>div{padding:18px;border-right:1px solid rgba(255,255,255,.08)}.terminal-status>div:last-child{border:0}.terminal-status small{display:block;color:#748196;font:9px ui-monospace,monospace;letter-spacing:.12em}.terminal-status b{display:block;margin-top:7px;color:#eefaff;font:700 15px ui-monospace,monospace}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);padding:12px}.feature-grid article{padding:18px;border:1px solid rgba(255,255,255,.075);margin:-.5px;min-height:118px;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent)}.feature-grid article>b{font:9px ui-monospace,monospace;color:var(--cyan)}.feature-grid h3{margin:8px 0 5px;font-size:16px}.feature-grid p{margin:0;color:#8f9aad;font-size:12px;line-height:1.6}.terminal-foot{border-top:1px solid rgba(68,231,255,.15);border-bottom:0;color:#77869a}.terminal-foot b{color:#ff6f8d}
.world-section{min-height:780px;display:flex;align-items:center;overflow:hidden}.world-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,14,.95) 0%,rgba(4,8,14,.78) 40%,rgba(4,8,14,.48) 70%,rgba(4,8,14,.8) 100%),linear-gradient(0deg,#070a12 0%,transparent 20%,transparent 80%,#070a12 100%),url('assets/bg-seoul.webp') center/cover no-repeat;transform:scale(1.02)}.world-shell{position:relative;z-index:2}.section-copy--light{max-width:660px}.world-cards{margin-top:55px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.world-cards article{min-height:210px;padding:24px;background:rgba(6,11,18,.66);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(11px)}.world-num{font:10px ui-monospace,monospace;color:var(--cyan);letter-spacing:.14em}.world-cards h3{margin:26px 0 10px;font-size:20px}.world-cards p{margin:0;color:#aeb8c7;font-size:12px;line-height:1.75}
.start-section{background:linear-gradient(180deg,#070a12,#0b0c13)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:44px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:430px;color:var(--muted);font-size:13px;line-height:1.8;margin:0}.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.start-card{position:relative;min-height:520px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#11151f}.start-photo{position:absolute;inset:0;background-image:var(--start-image);background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.start-card--arachne .start-photo{background-position:49% center}.start-card--lumiere .start-photo{background-position:54% 26%}.start-card--free .start-photo{background-position:center}.start-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,12,.05) 15%,rgba(3,6,12,.45) 52%,rgba(3,6,12,.97) 100%)}.start-content{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2}.start-content>span{font:9px ui-monospace,monospace;letter-spacing:.18em;color:var(--cyan)}.start-card--arachne .start-content>span{color:#ff76b1}.start-content h3{font-size:27px;margin:10px 0 9px;letter-spacing:-.04em}.start-content p{font-size:12px;line-height:1.75;color:#c0c8d5;min-height:64px}.start-content ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:18px 0 0}.start-content li{font-size:9px;border:1px solid rgba(255,255,255,.15);padding:6px 8px;color:#b9c3d2;background:rgba(0,0,0,.25)}.start-card:hover .start-photo{transform:scale(1.045)}
.character-section{background:radial-gradient(circle at 20% 20%,rgba(255,62,159,.045),transparent 24%),radial-gradient(circle at 80% 50%,rgba(68,231,255,.055),transparent 26%),#080b12}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}.filter-btn{border:1px solid rgba(255,255,255,.12);background:#0c111b;color:#9eabba;padding:10px 14px;cursor:pointer;font-size:11px}.filter-btn b{margin-left:8px;color:#5f6c80}.filter-btn.active,.filter-btn:hover{color:#fff;border-color:rgba(68,231,255,.4);background:rgba(68,231,255,.07)}.filter-btn.active b{color:var(--cyan)}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.character-card{position:relative;min-height:370px;overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#111722;cursor:pointer;transition:border-color .25s,transform .25s;isolation:isolate}.character-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}.character-card.hidden{display:none}.char-photo{position:absolute;inset:0;background-size:cover;background-position:center 30%;transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:-2}.character-card:hover .char-photo{transform:scale(1.035)}.char-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 20%,rgba(5,7,12,.18) 45%,rgba(5,7,12,.95) 92%),linear-gradient(90deg,rgba(4,7,12,.16),transparent)}.char-badge{position:absolute;top:15px;left:15px;font:9px ui-monospace,monospace;letter-spacing:.12em;padding:6px 8px;background:rgba(5,8,14,.68);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px)}.character-card[data-faction="villain"] .char-badge{color:#ff83b9;border-color:rgba(255,62,159,.32)}.character-card[data-faction="hero"] .char-badge{color:#75efff;border-color:rgba(68,231,255,.32)}.character-card[data-faction="association"] .char-badge{color:#ffd17b;border-color:rgba(255,201,95,.32)}.char-rank{position:absolute;right:14px;top:13px;font:800 26px ui-monospace,monospace;text-shadow:0 2px 15px #000}.char-copy{position:absolute;bottom:0;left:0;right:0;padding:22px}.char-copy small{font:9px ui-monospace,monospace;letter-spacing:.14em;color:#8d99ac}.char-copy h3{margin:6px 0 0;font-size:27px;letter-spacing:-.04em}.char-copy h3 span{display:block;font-size:13px;font-weight:500;color:#c4cbd6;margin-top:3px}.char-copy p{margin:12px 0 0;font-size:11px;color:#aab5c5;line-height:1.6;max-width:94%}
.final-section{min-height:650px;display:grid;place-items:center;text-align:center;overflow:hidden}.final-bg{position:absolute;inset:0;background:linear-gradient(rgba(5,8,14,.74),rgba(5,8,14,.91)),url('assets/bg-alley.webp') center/cover no-repeat;filter:saturate(.85)}.final-inner{position:relative;z-index:2;max-width:780px}.final-inner p:not(.section-index){color:#aab5c5;line-height:1.9;margin:0 auto 30px;max-width:660px}.footer{display:flex;justify-content:space-between;gap:20px;padding:24px 30px;border-top:1px solid var(--line);color:#738095;font:9px ui-monospace,monospace;letter-spacing:.12em}.footer strong{color:#adb8c8}
.character-modal{padding:0;border:1px solid rgba(255,255,255,.16);background:#0a0f18;color:#fff;width:min(980px,92vw);max-height:88vh;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.75)}.character-modal::backdrop{background:rgba(2,4,8,.82);backdrop-filter:blur(8px)}.character-modal[open]{display:grid;grid-template-columns:.95fr 1.05fr}.modal-close{position:absolute;z-index:4;right:14px;top:12px;width:36px;height:36px;border:1px solid rgba(255,255,255,.18);background:rgba(3,6,10,.7);color:#fff;font-size:24px;cursor:pointer}.modal-media{min-height:650px;background:#080b12}.modal-media img{width:100%;height:100%;object-fit:cover;object-position:center}.modal-copy{padding:46px 42px;overflow:auto}.modal-faction{font:10px ui-monospace,monospace;letter-spacing:.18em;color:var(--cyan);margin:0 0 8px}.modal-copy h2{font-size:42px;margin:0;letter-spacing:-.05em}.modal-copy h3{font-size:17px;font-weight:500;color:#acb8c9;margin:4px 0 16px}.modal-meta{display:flex;gap:8px;flex-wrap:wrap}.modal-meta span{font:10px ui-monospace,monospace;border:1px solid var(--line);padding:6px 8px;color:#a9b4c4}.modal-concept{font-size:14px;line-height:1.8;color:#d6dde7;padding:18px 0;margin:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.modal-block{margin:20px 0}.modal-block>span{display:block;color:#657387;font:9px ui-monospace,monospace;letter-spacing:.16em;margin-bottom:7px}.modal-block>b{display:block;color:#fff;font-size:15px;margin-bottom:5px}.modal-block p{margin:0;color:#9ca8b9;font-size:12px;line-height:1.75}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){.two-col{grid-template-columns:1fr;gap:42px}.world-cards{grid-template-columns:repeat(2,1fr)}.start-grid{grid-template-columns:1fr}.start-card{min-height:440px}.character-grid{grid-template-columns:repeat(2,1fr)}.nav{display:none}.menu-btn{display:block}.topbar.open .nav{position:absolute;display:flex;flex-direction:column;right:20px;top:66px;background:#090d15;border:1px solid var(--line);padding:18px 22px;gap:18px;box-shadow:0 18px 50px #000}.hero-side{display:none}.section-heading{align-items:flex-start;flex-direction:column}.section-heading>p{max-width:620px}.character-modal[open]{grid-template-columns:1fr;overflow:auto}.modal-media{height:45vh;min-height:360px}.modal-copy{overflow:visible}.character-modal{max-height:92vh;overflow:auto}}
@media(max-width:640px){.topbar{height:64px;padding:0 16px}.brand-copy small{display:none}.section{padding:80px 16px}.hero-content{width:90vw;padding-top:30px}.hero-panel{width:76%}.hero-panel--left{left:-17%;background-position:50% 28%}.hero-panel--right{right:-20%;background-position:50% 32%}.hero-shade{background:linear-gradient(90deg,rgba(5,7,12,.58),rgba(5,7,12,.92) 48%,rgba(5,7,12,.62)),linear-gradient(0deg,#070a12 0,transparent 30%)}.hero-lead br{display:none}.hero-tags{margin-top:26px}.world-cards{grid-template-columns:1fr}.world-cards article{min-height:auto}.terminal-status{grid-template-columns:1fr}.terminal-status>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.feature-grid{grid-template-columns:1fr}.character-grid{grid-template-columns:1fr}.character-card{min-height:420px}.footer{flex-direction:column}.modal-copy{padding:32px 22px}.modal-copy h2{font-size:34px}.start-content p{min-height:0}}