@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root{--ink:#0c1528;--panel:#111e34;--line:#ffffff25;--text:#f7f9fd;--muted:#becada;--accent:#e0c398;--max:1280px;color-scheme:dark;font-family:'DM Sans','Noto Sans KR','Noto Sans JP',sans-serif;background:var(--ink);color:var(--text);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0}
a{color:inherit;text-decoration:none}
button,select{font:inherit}
a,button,select{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
img{display:block;max-width:100%}
p{line-height:1.85;margin:0 0 1.2em}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.3}
.wrap{width:min(calc(100% - 96px),var(--max));margin:auto}
.eyebrow{font-size:.77rem;font-weight:600;letter-spacing:.16em;color:var(--accent);margin:0 0 22px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:-100px;left:16px;z-index:30;padding:12px;background:var(--ink)}
.skip:focus{top:12px}
.anchor-alias{position:absolute;top:0;pointer-events:none}

.topbar{position:absolute;top:0;left:0;width:100%;z-index:10;border-bottom:1px solid var(--line);background:linear-gradient(#07162955,transparent)}
.topbar-inner{min-height:90px;display:flex;align-items:center;gap:32px}
.studio img{width:144px;height:auto}
.nav{display:flex;gap:34px;margin-left:auto;font-size:.9rem}
.nav a{padding:12px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--accent)}
.locale{background:#07162b38;border:1px solid var(--line);border-radius:24px;color:white;font-size:.85rem;padding:10px 15px;max-width:130px}
.locale option{background:var(--ink)}

.hero{height:100svh;min-height:760px;max-height:1000px;position:relative;isolation:isolate;overflow:hidden;background:#062244}
.hero-keyart{position:absolute;inset:0 0 0 24%;z-index:-3;mask-image:linear-gradient(90deg,transparent,#000 26%)}
.hero-keyart img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#05152eef 0%,#071b34e8 24%,#08213a95 42%,transparent 68%),linear-gradient(0deg,var(--ink) 0%,transparent 25%)}
.hero-inner{height:100%;display:flex;align-items:center;padding:120px 0 100px}
.hero-copy{width:47%;max-width:590px}
.status{display:inline-flex;align-items:center;gap:10px;color:#e8d1ae;font-size:.8rem;letter-spacing:.14em;font-weight:600;line-height:1.5;margin-bottom:35px}
.status>span{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 15px #ffd69788}
.wordmark{width:100%;height:auto;margin:0 0 28px}
.hero h2{font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.55;margin-bottom:15px;text-wrap:balance}
.hero-description{font-size:1rem;color:#d1deee;max-width:430px;margin-bottom:32px}
.store-links{display:flex;gap:12px;flex-wrap:wrap}
.store-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 19px;min-width:198px;min-height:70px;background:#071323df;border:1px solid #b8c9df8a;border-radius:7px;transition:border-color .2s,background .2s,transform .2s}
.store-link small{display:block;font-size:.67rem;letter-spacing:.03em;color:#c3cbd7;line-height:1.4;margin-bottom:3px}
.store-link strong{display:block;font-size:1.2rem;letter-spacing:-.015em;font-weight:600;line-height:1.25;white-space:nowrap}
.store-arrow{font-size:1.2rem;color:var(--accent)}
.store-link:hover{background:#182c48;border-color:var(--accent);transform:translateY(-2px)}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;font-size:.63rem;letter-spacing:.19em;color:#d8e0eb;white-space:nowrap}
.hero-scroll span:last-child{font-size:1.4rem}

.world-section{position:relative;padding:120px 0 130px;background:radial-gradient(ellipse at left,#18314c66,transparent 68%)}
.world-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center}
.world-art{margin:0;min-width:0;border:1px solid #e0c39840;overflow:hidden;border-radius:3px;background:#101c2c;box-shadow:0 20px 60px #0003}
.world-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.world-art figcaption{padding:15px 20px;font-size:.6rem;letter-spacing:.24em;color:var(--accent);border-top:1px solid #e0c39830}
.world-copy h2{font-size:clamp(1.7rem,2.65vw,2.75rem);line-height:1.45;margin-bottom:30px}
.world-copy>p:not(.eyebrow){font-size:.95rem;color:var(--muted)}
.world-copy>p:last-child{margin-bottom:0}
.world-copy strong{color:var(--text);font-weight:600}
.world-copy h2{text-wrap:balance}
:lang(ko) .world-copy{word-break:keep-all;overflow-wrap:break-word}
.world-copy>p.world-hook{color:var(--accent);border-top:1px solid var(--line);padding-top:20px;margin-top:25px}

.cast-section{position:relative;background:var(--panel);border-block:1px solid var(--line);overflow:hidden;padding-top:86px}
.cast-intro{display:flex;justify-content:space-between;gap:70px;align-items:end;margin-bottom:42px}
.cast-intro h2{font-size:clamp(2rem,3.3vw,3.3rem)}
.cast-intro>p{width:390px;color:var(--muted);font-size:.95rem;margin:0 0 4px}
.cast-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.cast-tab{display:flex;align-items:center;text-align:left;gap:18px;min-width:0;cursor:pointer;border:1px solid transparent;border-radius:7px;padding:12px 18px;color:#c2cfe1;background:#ffffff03;transition:background .2s,border-color .2s}
.cast-tab:hover{background:#ffffff0b}
.cast-tab[aria-pressed='true']{border-color:#e0c39899;background:#e0c39812;color:#fff}
.cast-thumb{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#293c56;border:1px solid #ffffff30}
.cast-thumb img{width:100%;height:100%;object-fit:contain}
.cast-tab-copy strong{font-size:1rem;font-weight:600;display:block;line-height:1.5}
.cast-tab-copy small{font-size:.76rem;display:flex;align-items:center;gap:6px;line-height:1.5;color:#afc0d5;margin-top:3px}
.cast-tab-type{width:24px;height:24px;flex:0 0 24px;object-fit:contain;border-radius:50%}
.cast-stage{--role-color:#f0b6ae;--role-glow:#b3383f30;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:85px;min-height:680px}
.cast-stage[data-type='blast']{--role-color:#efd293;--role-glow:#bb8c3430}
.cast-stage[data-type='assist']{--role-color:#c5e7af;--role-glow:#6a976b30}
.cast-stage[data-type='defense']{--role-color:#a6d1fb;--role-glow:#397dc530}
.cast-art{height:680px;position:relative;overflow:hidden;isolation:isolate;container-type:size}
.cast-art:before{content:'';position:absolute;inset:13% 4% 0;border:1px solid #ffffff15;border-radius:48% 48% 0 0;background:radial-gradient(ellipse at bottom,var(--role-glow),transparent 80%);z-index:-2}
.cast-type-art{position:absolute;font-size:clamp(3rem,6vw,6rem);font-weight:700;letter-spacing:.08em;bottom:7%;left:4%;color:var(--role-color);opacity:.06;writing-mode:vertical-rl;transform:rotate(180deg);z-index:-1}
/* Normalize visible alpha bounds, not PNG canvas size. Keep all four silhouettes at one height and baseline. */
.cast-art>img{--figure-height:min(calc(100cqh - 48px),calc((100cqw - 32px) * 1.536243822));position:absolute;height:calc(var(--figure-height) * var(--art-height));width:auto;max-width:none;top:auto;bottom:calc(24px - var(--figure-height) * var(--art-bottom));left:calc(50% - var(--figure-height) * var(--art-center));filter:drop-shadow(0 12px 18px #0005)}
/* sula: 1536x1920, alpha bounds (239, 30) to (1453, 1895). */
.cast-art>img[src="/assets/sula.png"]{--art-height:1.029490617;--art-center:0.453619303;--art-bottom:0.013404826}
/* yuki: 1536x1920, alpha bounds (404, 134) to (1153, 1873). */
.cast-art>img[src="/assets/yuki.png"]{--art-height:1.104082806;--art-center:0.447671075;--art-bottom:0.027027027}
/* midori: 1264x1568, alpha bounds (175, 80) to (1015, 1474). */
.cast-art>img[src="/assets/midori.png"]{--art-height:1.124820660;--art-center:0.426829268;--art-bottom:0.067431851}
/* mio: 1280x1920, alpha bounds (104, 17) to (1131, 1897). */
.cast-art>img[src="/assets/mio.png"]{--art-height:1.021276596;--art-center:0.328457447;--art-bottom:0.012234043}
.cast-details{padding:42px 0 58px}
.cast-species{color:var(--role-color);font-size:.79rem;letter-spacing:.14em;font-weight:600;margin:0 0 13px}
.cast-name{font-size:clamp(3.6rem,5vw,5rem);line-height:1.1;margin:0 0 23px}
.cast-bio{color:var(--muted);font-size:.95rem;max-width:440px;min-height:58px;margin-bottom:28px}
.combat-role{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.72rem;padding:20px 0;border-block:1px solid var(--line)}
.combat-role strong{color:#f8fafc;font-size:.98rem;font-weight:500}
.combat-type{display:inline-flex;align-items:center;gap:7px;margin-left:auto;border:1px solid var(--role-color);color:var(--role-color);border-radius:20px;padding:3px 10px 3px 4px;font-size:.72rem}
.combat-type img{width:28px;height:28px;object-fit:contain;border-radius:50%}
.signature-skill{padding-top:25px}
.signature-skill .eyebrow{color:var(--role-color);font-size:.65rem;margin-bottom:10px}
.signature-skill h4{font-size:1.4rem;margin-bottom:13px}
.signature-skill>p:last-child{color:var(--muted);font-size:.92rem;max-width:470px;margin-bottom:0;min-height:82px}

.closing{text-align:center;isolation:isolate;position:relative;padding:100px 0 80px;background:radial-gradient(ellipse at center,#21426844,transparent 72%);border-bottom:1px solid var(--line)}
.closing .status{margin-bottom:27px}
.closing h2{font-size:clamp(2rem,3.3vw,3.2rem);line-height:1.4;margin-bottom:24px}
.closing>.wrap>p:not(.status){color:var(--muted);font-size:.95rem}
.closing .store-links{justify-content:center;margin-top:30px;text-align:left}
.social-link{display:inline-flex;gap:25px;font-size:.8rem;color:#b7c6da;margin-top:34px;border-bottom:1px solid #ffffff30;padding-bottom:7px}
.social-link:hover{color:var(--accent)}
.footer{padding:35px 0;display:flex;align-items:center;flex-wrap:wrap;gap:24px;justify-content:space-between;color:#acbad0;font-size:.75rem}
.footer img{width:126px;height:auto}
.footer a:hover{color:var(--accent)}
.adventure{padding:100px 0}
.button{display:inline-flex;padding:14px 24px;border:1px solid var(--accent);color:var(--accent)}

@media(max-width:1100px){
 .wrap{width:calc(100% - 64px)}.nav{gap:24px}.hero-copy{width:48%}.hero{min-height:750px}
 .hero-keyart{left:20%;right:-14%}.hero h2{font-size:1.25rem}.store-link{min-width:178px;padding:12px 15px}
 .world-grid{gap:40px;grid-template-columns:1.2fr 1fr}.world-copy h2{font-size:1.8rem}
 .cast-stage{gap:38px}.cast-tab{gap:12px;padding:10px}.cast-thumb{flex-basis:48px;width:48px;height:48px}.cast-tab-copy small{font-size:.7rem}
}
@media(max-width:900px){
 .topbar-inner{min-height:80px}.nav{margin-left:auto;font-size:.8rem;gap:20px}.studio img{width:125px}.locale{font-size:.78rem;padding:9px 12px}.topbar-inner{gap:22px}
 .hero{display:flex;flex-direction:column;max-height:none;height:auto;min-height:0;background:#071a36}
 .hero-inner{order:0;display:block;height:auto;padding:130px 0 0;z-index:2}
 .hero-copy{width:100%;max-width:560px;text-align:center;margin:auto}.hero-description{max-width:430px;margin:0 auto 26px}.hero h2{font-size:1.3rem}
 .hero .store-links{justify-content:center}.hero-copy .status{margin-bottom:25px}.hero-copy .wordmark{max-width:500px;margin:0 auto 24px}
 .hero-keyart{order:1;position:relative;inset:auto;z-index:-3;width:100%;margin-top:-17%;aspect-ratio:1/1;display:block;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 95%,transparent)}
 .hero-keyart img{width:100%;height:100%;object-fit:cover;object-position:center}
 .hero:before{z-index:-2;background:linear-gradient(0deg,var(--ink),transparent 12%)}
 .hero-scroll{bottom:20px}.world-section{padding:85px 0}.world-grid{display:flex;flex-direction:column;gap:36px}.world-art{width:100%}.world-copy{max-width:680px}
 .world-copy h2{font-size:1.65rem;margin-bottom:20px}.world-copy>p:not(.eyebrow){font-size:.9rem}
 .cast-intro{gap:40px}.cast-intro>p{width:290px}.cast-section{padding-top:70px}.cast-stage{gap:32px;min-height:670px}.cast-art{height:min(670px,65vw)}
 .cast-tab-copy small{font-size:.65rem;gap:4px}.cast-tab-type{width:20px;height:20px;flex-basis:20px}.cast-tab{gap:9px;padding:9px 6px}.cast-thumb{flex-basis:42px;width:42px;height:42px}.cast-tab-copy strong{font-size:.9rem}
 .combat-role{gap:9px}.combat-type{margin-left:0}.cast-bio{min-height:90px}.signature-skill>p:last-child{min-height:115px}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 40px)}.topbar-inner{min-height:70px;gap:14px}.studio img{width:118px}.nav{display:none}.locale{margin-left:auto}
 .hero-inner{padding-top:113px}.hero-copy{max-width:460px}.hero-copy .wordmark{max-width:400px;margin-bottom:22px}.hero-copy .status{font-size:.69rem;letter-spacing:.1em;margin-bottom:22px}.hero h2{font-size:1.02rem;margin-bottom:12px}.hero-description{font-size:.86rem;max-width:315px;line-height:1.7;margin-bottom:25px}
 .store-links{gap:10px}.store-link{min-width:0;flex:1;max-width:200px;min-height:62px;padding:11px 13px;gap:8px}.store-link strong{font-size:1.03rem}.store-link small{font-size:.6rem}.store-arrow{font-size:1rem}
 .hero-keyart{margin-top:-10%;aspect-ratio:9/16}
 .hero-scroll{font-size:.56rem;gap:16px;bottom:20px}
 .world-section{padding:65px 0 72px}.world-grid{display:flex;flex-direction:column;gap:32px}.world-art{width:100%}.world-art figcaption{font-size:.55rem;padding:12px 15px}.world-copy h2{font-size:1.85rem;line-height:1.45}.world-copy>p:not(.eyebrow){font-size:.93rem}.eyebrow{font-size:.68rem;margin-bottom:17px}
 .cast-section{padding-top:64px}.cast-intro{display:block;margin-bottom:28px}.cast-intro h2{font-size:2rem}.cast-intro>p{width:auto;max-width:360px;font-size:.9rem;margin-top:24px}
 .cast-buttons{gap:6px;padding-bottom:18px}.cast-tab{flex-direction:column;text-align:center;gap:8px;padding:12px 4px}.cast-thumb{width:44px;height:44px;flex-basis:44px}.cast-tab-copy strong{font-size:.8rem}.cast-tab-copy small{font-size:.6rem;line-height:1.4;flex-direction:column;justify-content:center;gap:5px}.cast-tab-type{width:24px;height:24px;flex-basis:24px}
 .cast-stage{display:flex;flex-direction:column;gap:0;min-height:0}.cast-art{height:clamp(400px,120vw,520px);width:100%}.cast-type-art{font-size:3.4rem;left:0;bottom:5%}.cast-art:before{inset:15% 5% 0}
 .cast-details{width:100%;padding:28px 0 55px;border-top:1px solid var(--line)}.cast-name{font-size:3.3rem;margin-bottom:18px}.cast-species{font-size:.75rem}.cast-bio{min-height:0;font-size:.91rem;max-width:none;margin-bottom:24px}.combat-role{padding:17px 0;gap:11px}.combat-type{margin-left:auto}.combat-role strong{font-size:.94rem}.signature-skill{padding-top:24px}.signature-skill h4{font-size:1.25rem}.signature-skill>p:last-child{min-height:0;font-size:.9rem}
 .closing{padding:66px 0 60px}.closing h2{font-size:1.9rem}.closing .status{font-size:.7rem;letter-spacing:.09em}.closing>.wrap>p:not(.status){font-size:.88rem}.social-link{font-size:.76rem}.footer{padding:28px 0;font-size:.7rem;gap:20px}.footer img{width:116px}.footer .copyright{width:100%;order:3}
}
@media(max-width:360px){.store-link{padding:11px 10px}.store-arrow{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}