/* 게임 소개 페이지 — 카리오스: 스피릿 오브 더 라이트 (2026-10-10) */
:root{--bg:#05060d;--bg2:#0a0c18;--ink:#eef0f8;--soft:rgba(238,240,248,.72);--dim:rgba(238,240,248,.5);
--gold:#f6cf6a;--gold2:#e0a030;--line:rgba(246,207,106,.22);--violet:#8f6bff;--maxw:1240px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.page-game{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR','Noto Serif KR',sans-serif;overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.serif{font-family:'Noto Serif KR',serif}
.cinzel{font-family:'Cinzel',serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gold-text{background:linear-gradient(180deg,#fff6d0 0%,#ffd866 42%,#e09a22 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffd866}

/* ── 위 메뉴 */
.g-nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:28px;padding:18px 34px;transition:background .35s,padding .35s,border-color .35s;border-bottom:1px solid transparent}
.g-nav.solid{background:rgba(5,6,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:11px 34px;border-color:var(--line)}
.g-nav-logo{font-family:'Cinzel',serif;font-weight:900;font-size:1.45rem;letter-spacing:.14em;text-decoration:none}
.g-nav-links{display:flex;gap:26px;margin-left:auto;font-size:.93rem;letter-spacing:.04em}
.g-nav-links a{text-decoration:none;color:var(--soft);position:relative;padding:6px 0;transition:color .25s}
.g-nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.g-nav-links a:hover{color:#fff}.g-nav-links a:hover::after{transform:scaleX(1)}
.g-nav-cta{font-size:.86rem;font-weight:700;text-decoration:none;color:#241503;background:linear-gradient(180deg,#ffe9a6,#f0b53c);padding:9px 20px;border-radius:999px;box-shadow:0 4px 18px rgba(240,181,60,.35);white-space:nowrap}
.g-burger{display:none;margin-left:auto;background:none;border:0;width:40px;height:40px;cursor:pointer}
.g-burger span{display:block;height:2px;background:#fff;margin:7px 6px;border-radius:2px}

/* ── 첫 화면 */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:-3%;translate:var(--mx,0) var(--my,0);transition:translate .5s ease-out;background:url('images/game/key-hero2.jpg') 40% center/cover no-repeat;animation:kb 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.6%,-1%,0)}}
.hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,6,13,.50) 0%,rgba(5,6,13,.34) 32%,rgba(5,6,13,.06) 58%,rgba(5,6,13,0) 100%),linear-gradient(180deg,rgba(5,6,13,.42) 0%,rgba(5,6,13,0) 20%)}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(180deg,rgba(5,6,13,0),var(--bg))}
#motes{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px 28px 110px}
.hero-kicker{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.42em;color:var(--gold);opacity:.9;margin-bottom:18px}
.hero-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(4rem,10.5vw,9.2rem);line-height:.92;letter-spacing:.08em;filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))}
.hero-sub{font-family:'Cinzel',serif;font-size:clamp(1rem,2.3vw,1.75rem);letter-spacing:.46em;color:#fff;margin-top:14px;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hero-kr{font-family:'Noto Serif KR',serif;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--soft);margin-top:10px;letter-spacing:.14em}
.hero-rule{width:120px;height:2px;margin:30px 0 26px;background:linear-gradient(90deg,var(--gold),rgba(246,207,106,0))}
.hero-tag{font-family:'Noto Serif KR',serif;font-weight:700;font-size:clamp(1.35rem,2.7vw,2.25rem);line-height:1.45;max-width:640px;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.hero-tag em{font-style:normal;color:var(--gold)}
.hero-desc{margin-top:16px;max-width:520px;color:var(--soft);font-size:1.02rem;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:12px;text-decoration:none;font-weight:700;font-size:1rem;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-store{background:#0b0d16;border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 26px 11px 20px;cursor:default}
.btn-store svg{width:30px;height:30px;flex:none}
.btn-store small{display:block;font-size:.68rem;font-weight:500;color:var(--gold);letter-spacing:.14em;line-height:1.2}
.btn-store b{display:block;font-size:1.12rem;line-height:1.25}
.btn-gold{background:linear-gradient(180deg,#ffe9a6,#f0b53c);color:#241503;box-shadow:0 8px 30px rgba(240,181,60,.38)}
.btn-gold::after{content:'';position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-70%}100%{left:130%}}
.btn-line{border:1px solid rgba(246,207,106,.55);color:var(--gold);background:rgba(5,6,13,.35);backdrop-filter:blur(6px)}
.btn-line:hover{background:rgba(246,207,106,.12)}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.4em;color:var(--dim);text-align:center}
.scroll-cue i{display:block;width:1px;height:42px;margin:10px auto 0;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── 숫자 띠 */
.stats{position:relative;z-index:4;margin-top:-1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b0d1a,#070812)}
.stats-in{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--maxw);margin:0 auto}
.stat{padding:34px 12px;text-align:center;border-left:1px solid rgba(255,255,255,.06)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:'Cinzel',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:900;line-height:1.1}
.stat span{display:block;margin-top:6px;color:var(--soft);font-size:.93rem;letter-spacing:.06em}

/* ── 구역 공통 */
section{position:relative}
.sec{padding:130px 0}
.sec-head{text-align:center;margin-bottom:64px}
.eyebrow{font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.5em;color:var(--gold);display:inline-flex;align-items:center;gap:16px}
.eyebrow::before,.eyebrow::after{content:'';width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{transform:scaleX(-1)}
.sec-title{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.3;margin-top:16px;letter-spacing:-.01em}
.sec-lead{max-width:680px;margin:18px auto 0;color:var(--soft);font-size:1.06rem}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* ── 이야기 */
.story{min-height:92vh;display:flex;align-items:center;overflow:hidden}
.story-bg{position:absolute;inset:0;background:url('images/game/orel-wide.jpg') center/cover no-repeat;background-attachment:fixed}
.story::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,13,.55) 26%,rgba(5,6,13,.62) 70%,var(--bg) 100%)}
.story-in{position:relative;z-index:2;text-align:center;max-width:860px;margin:0 auto;padding:120px 28px}
.story-spirit{width:150px;height:150px;border-radius:50%;margin:0 auto 34px;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 0 8px rgba(246,207,106,.10),0 0 70px rgba(255,214,110,.55);animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.story h2{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(2rem,5vw,3.8rem);line-height:1.3;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.story p{font-family:'Noto Serif KR',serif;font-size:clamp(1.02rem,1.7vw,1.26rem);line-height:2.1;color:rgba(255,255,255,.88);margin-top:28px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.story p b{color:var(--gold);font-weight:700}

/* ── 특징 */
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center;margin-bottom:130px}
.feat:last-child{margin-bottom:0}
.feat.flip .feat-art{order:2}
.feat-art{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.feat-art img{width:100%;height:112%;margin-top:-6%;object-fit:cover;translate:0 var(--py,0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.feat-art:hover img{transform:scale(1.06)}
.feat-art::after{content:'';position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -90px 90px -50px rgba(5,6,13,.75);pointer-events:none}
.feat-no{font-family:'Cinzel',serif;font-size:4.6rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(246,207,106,.5)}
.feat h3{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.32;margin:8px 0 18px}
.feat p{color:var(--soft);font-size:1.05rem}
.feat ul{list-style:none;margin-top:24px;display:grid;gap:12px}
.feat li{position:relative;padding-left:26px;color:rgba(238,240,248,.88)}
.feat li::before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe9a6,#e09a22);box-shadow:0 0 12px rgba(246,207,106,.6)}
.elems{display:flex;gap:14px;margin-top:28px}
.elem{flex:1;text-align:center;font-size:.86rem;color:var(--soft)}
.elem img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;margin-bottom:8px;border:1px solid rgba(255,255,255,.14);transition:transform .3s,box-shadow .3s}
.elem:hover img{transform:translateY(-6px)}
.elem.fire:hover img{box-shadow:0 14px 34px rgba(255,110,60,.45)}.elem.water:hover img{box-shadow:0 14px 34px rgba(80,160,255,.45)}
.elem.wind:hover img{box-shadow:0 14px 34px rgba(110,230,170,.45)}.elem.earth:hover img{box-shadow:0 14px 34px rgba(230,180,90,.45)}
.grades{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.grade{padding:7px 15px;border-radius:999px;font-size:.86rem;font-weight:700;border:1px solid currentColor;background:rgba(255,255,255,.03)}
.grade.myth{border-color:transparent;color:#fff;background:linear-gradient(90deg,#ff7a7a,#ffc35a,#f6f06a,#6fe89a,#6ac0ff,#b88cff);animation:hue 6s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

/* ── 정복 여정 */
.journey{background:radial-gradient(ellipse at 50% 0%,#141a36 0%,var(--bg) 62%)}
.jr-stage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/8.2;box-shadow:0 40px 110px rgba(0,0,0,.65),0 0 0 1px var(--line);background:#000}
.jr-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.07);transition:opacity 1.1s ease,transform 7s ease}
.jr-img.on{opacity:1;transform:scale(1)}
.jr-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,13,.05) 30%,rgba(5,6,13,.9) 100%),linear-gradient(90deg,rgba(5,6,13,.55),transparent 55%);pointer-events:none}
.jr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 54px 44px;display:flex;align-items:flex-end;gap:26px}
.jr-no{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(4rem,9vw,8rem);line-height:.82}
.jr-txt{padding-bottom:6px;min-width:0}
.jr-txt small{font-family:'Cinzel',serif;letter-spacing:.34em;font-size:.76rem;color:var(--gold)}
.jr-txt h3{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:1.25}
.jr-txt p{color:rgba(255,255,255,.84);max-width:640px;margin-top:6px;font-family:'Noto Serif KR',serif}
.jr-arrow{position:absolute;top:50%;z-index:3;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid rgba(246,207,106,.5);background:rgba(5,6,13,.5);backdrop-filter:blur(6px);color:var(--gold);font-size:1.3rem;cursor:pointer;transition:background .25s,transform .25s}
.jr-arrow:hover{background:rgba(246,207,106,.2);transform:scale(1.08)}
.jr-prev{left:18px}.jr-next{right:18px}
.jr-bar{position:absolute;left:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--gold2),#fff3c2);width:0}
.jr-dots{display:grid;grid-template-columns:repeat(23,1fr);gap:8px;margin-top:22px}
.jr-dot{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);cursor:pointer;background:#111 center/cover;opacity:.5;transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s;padding:0}
.jr-dot span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:700;font-size:.82rem;color:#fff;background:rgba(5,6,13,.5);text-shadow:0 1px 4px #000}
.jr-dot:hover{opacity:.9;transform:translateY(-3px)}
.jr-dot.on{opacity:1;border-color:var(--gold);box-shadow:0 0 0 2px rgba(246,207,106,.35),0 8px 24px rgba(246,207,106,.3);transform:translateY(-4px)}
.jr-dot.on span{background:rgba(5,6,13,.12);color:var(--gold)}
.jr-tower{margin-top:20px;text-align:center;color:var(--soft);font-family:'Noto Serif KR',serif}
.jr-tower b{color:#c9b3ff}

/* ── 기사단 */
.knights{background:linear-gradient(180deg,var(--bg),#0c0a14 50%,var(--bg))}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 28px 30px;margin:0 -28px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.kcard{position:relative;flex:0 0 250px;aspect-ratio:2/3;border-radius:18px;overflow:hidden;scroll-snap-align:center;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;user-select:none}
.kcard:hover{transform:translateY(-12px);box-shadow:0 34px 70px rgba(0,0,0,.7),0 0 0 1px var(--gold),0 0 50px rgba(246,207,106,.22)}
.kcard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,6,13,.95) 100%)}
.kcard-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px}
.kcard-cap small{color:var(--gold);font-size:.8rem;letter-spacing:.06em}
.kcard-cap b{display:block;font-family:'Noto Serif KR',serif;font-size:1.4rem;font-weight:900;line-height:1.25}
.kcard-cap span{color:var(--soft);font-size:.84rem}
.tier{position:absolute;top:14px;left:14px;z-index:2;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:1.15rem;color:#241503;background:linear-gradient(180deg,#ffe9a6,#f0b53c);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.tier.S{background:linear-gradient(180deg,#ffb199,#f0503c);color:#fff}

/* ── 보스 */
.bosses{overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#2a0f1c 0%,var(--bg) 60%)}
.marq{display:flex;gap:18px;width:max-content;animation:marq 80s linear infinite;padding:9px 0}
.marq.rev{animation-direction:reverse;animation-duration:95s}
.marq:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.bcard{position:relative;width:210px;aspect-ratio:1;border-radius:16px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.1);transition:transform .35s,box-shadow .35s}
.bcard:hover{transform:scale(1.06);box-shadow:0 0 0 1px #ff8a6a,0 16px 44px rgba(255,90,60,.3);z-index:2}
.bcard img{width:100%;height:100%;object-fit:cover}
.bcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,13,.94))}
.bcard div{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;line-height:1.3}
.bcard b{display:block;font-family:'Noto Serif KR',serif;font-size:1.02rem}
.bcard small{color:var(--dim);font-size:.76rem}

/* ── 플레이 영상 */
.vid-wrap{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:stretch}
.vid-main{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 0 1px var(--line)}
.vid-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000;color:#fff;font:inherit;text-align:left}
.vid-poster img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vid-poster:hover img{transform:scale(1.04)}
.vid-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,13,.05) 45%,rgba(5,6,13,.88) 100%)}
.vid-play{position:absolute;left:50%;top:50%;z-index:2;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:linear-gradient(180deg,#ffe9a6,#f0b53c);box-shadow:0 10px 40px rgba(240,181,60,.55),0 0 0 10px rgba(246,207,106,.16);transition:transform .3s}
.vid-play::after{content:'';position:absolute;left:38px;top:29px;border-style:solid;border-width:17px 0 17px 28px;border-color:transparent transparent transparent #241503}
.vid-poster:hover .vid-play,.scard:hover .vid-play{transform:scale(1.1)}
.vid-cap{position:absolute;left:30px;right:30px;bottom:24px;z-index:2}
.vid-cap small{display:block;color:var(--gold);font-size:.82rem;letter-spacing:.14em;margin-bottom:4px}
.vid-cap b{font-family:'Noto Serif KR',serif;font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.35;text-shadow:0 2px 14px #000}
.vid-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:100%;min-height:0;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(246,207,106,.4) transparent}
.vid-wrap{grid-template-rows:minmax(0,1fr)}
.vid-list{height:0;min-height:100%}
.vid-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;text-align:left;font:inherit;transition:background .25s,border-color .25s,transform .25s}
.vid-item:hover{background:rgba(246,207,106,.08);transform:translateX(3px)}
.vid-item.on{border-color:var(--gold);background:rgba(246,207,106,.12)}
.vid-item img{width:118px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.vid-item small{display:block;color:var(--gold);font-size:.72rem;letter-spacing:.08em}
.vid-item b{display:block;font-size:.88rem;line-height:1.4;font-weight:500}
.vid-sub{margin:54px 0 14px;font-family:'Cinzel',serif;letter-spacing:.4em;font-size:.82rem;color:var(--gold)}
.short-rail{gap:16px}
.scard{position:relative;flex:0 0 210px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:0;padding:0;cursor:pointer;background:#111;color:#fff;font:inherit;scroll-snap-align:center;box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;user-select:none}
.scard:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(0,0,0,.7),0 0 0 1px var(--gold)}
.scard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.scard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,13,.92))}
.scard .vid-play{width:58px;height:58px;margin:-29px 0 0 -29px}
.scard .vid-play::after{left:24px;top:18px;border-width:11px 0 11px 18px}
.scard b{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;text-align:left;font-family:'Noto Serif KR',serif;font-size:.95rem;line-height:1.4}
.vid-more{text-align:center;margin-top:26px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(3,3,8,.94);display:none;align-items:center;justify-content:center;padding:24px}
.lb.on{display:flex}
.lb-frame{position:relative;height:min(86vh,calc((100vw - 48px)*16/9));aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 100px #000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-x{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,207,106,.5);background:rgba(5,6,13,.6);color:var(--gold);font-size:1.7rem;line-height:1;cursor:pointer}

/* ── 마지막 */
.final{min-height:86vh;display:flex;align-items:center;text-align:center;overflow:hidden}
.final-bg{position:absolute;inset:0;background:url('images/game/sky-wide.jpg') center/cover no-repeat}
.final::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,13,.25) 30%,rgba(5,6,13,.35) 60%,#04040a 100%)}
.final-in{position:relative;z-index:2;width:100%;padding:120px 28px}
.final h2{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.3;text-shadow:0 4px 34px rgba(0,0,0,.75)}
.final p{margin:18px auto 0;max-width:600px;font-size:1.1rem;color:rgba(255,255,255,.9);text-shadow:0 2px 14px rgba(0,0,0,.85)}
.final .hero-btns{justify-content:center}
.final-logo{width:150px;margin:54px auto 0;opacity:.95;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}

/* ── 작은 화면 */
@media(max-width:1000px){
 .g-nav-links{position:fixed;inset:0;background:rgba(5,6,13,.97);flex-direction:column;justify-content:center;align-items:center;gap:30px;font-size:1.25rem;margin:0;opacity:0;pointer-events:none;transition:opacity .3s}
 .g-nav.open .g-nav-links{opacity:1;pointer-events:auto}
 .g-burger{display:block;position:relative;z-index:2}.g-nav-cta{display:none}
 .feat,.feat.flip{grid-template-columns:1fr;gap:30px;margin-bottom:90px}.feat.flip .feat-art{order:0}
 .jr-dots{grid-template-columns:repeat(12,1fr)}
 .vid-wrap{grid-template-columns:1fr;grid-template-rows:auto}.vid-list{height:auto;min-height:0;max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 0 8px}.vid-item{flex:0 0 250px}
 .story-bg{background-attachment:scroll}
}
@media(max-width:640px){
 .wrap{padding:0 18px}.sec{padding:84px 0}.sec-head{margin-bottom:40px}
 .g-nav{padding:14px 18px}.g-nav.solid{padding:9px 18px}
 .hero{align-items:flex-end}
 .hero-bg{inset:0 0 auto 0;height:min(125vw,66vh);background-image:url('images/game/key-hero3-m.jpg');background-position:center top;animation:none}
 .hero::before{background:linear-gradient(180deg,rgba(5,6,13,.3) 0%,rgba(5,6,13,0) 16%,rgba(5,6,13,0) 40%,rgba(5,6,13,.78) 56%,var(--bg) 68%)}
 .hero-in{padding:110px 20px 44px}
 .hero-kicker,.hero-desc,.hero-kr,.scroll-cue{display:none}
 .hero-rule{margin:18px 0 16px}.hero-btns{margin-top:24px}
 .hero-title{font-size:3.6rem}
 .hero-kicker{letter-spacing:.3em;font-size:.7rem}.hero-sub{letter-spacing:.3em}
 .hero-btns{gap:10px}.btn{padding:14px 22px;font-size:.95rem}.btn-store{padding:9px 20px 9px 16px}
 .stats-in{grid-template-columns:repeat(2,1fr)}.stat{padding:22px 8px;border-top:1px solid rgba(255,255,255,.06)}.stat:last-child{grid-column:span 2}
 .jr-stage{aspect-ratio:4/5;border-radius:18px}.jr-cap{padding:0 20px 22px;gap:14px;flex-direction:column;align-items:flex-start}
 .jr-arrow{width:42px;height:42px;top:34%}.jr-dots{grid-template-columns:repeat(8,1fr);gap:6px}
 .kcard{flex-basis:200px}.bcard{width:150px}
 .elems{gap:8px}.feat-no{font-size:3.4rem}
 .scard{flex-basis:160px}.vid-play{width:68px;height:68px;margin:-34px 0 0 -34px}.vid-play::after{left:28px;top:21px;border-width:13px 0 13px 21px}.vid-cap{left:16px;right:16px;bottom:12px}.vid-main{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.hero-bg,.marq,.btn-gold::after,.story-spirit{animation:none}.reveal{opacity:1;transform:none}}

/* ══════════ 화면 효과 (fx.js) ══════════ */
/* 들어오는 막 */
#loader{position:fixed;inset:0;z-index:999;background:radial-gradient(ellipse at 50% 45%,#12152c 0%,#04050b 70%);display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s}
#loader.off{opacity:0;visibility:hidden}
.ld-mark{text-align:center;animation:ldmark 1.1s cubic-bezier(.2,.7,.2,1) both}
.ld-mark img{width:120px;margin:0 auto 14px;filter:drop-shadow(0 0 30px rgba(255,214,110,.5))}
.ld-mark b{display:block;font-family:'Cinzel',serif;font-weight:900;font-size:2.2rem;letter-spacing:.34em;padding-left:.34em}
.ld-mark i{display:block;width:150px;height:2px;margin:18px auto 0;background:rgba(255,255,255,.12);overflow:hidden;position:relative;border-radius:2px}
.ld-mark i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#f6cf6a,transparent);animation:ldbar 1.1s ease-in-out infinite}
@keyframes ldmark{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ldbar{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 진행 막대 */
.g-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#e09a22,#fff3c2);box-shadow:0 0 14px rgba(246,207,106,.8)}

/* 옆 점 길잡이 */
.g-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.g-dots a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse;text-decoration:none;color:#fff;font-size:.78rem}
.g-dots i{width:9px;height:9px;transform:rotate(45deg);border:1px solid rgba(246,207,106,.7);background:transparent;transition:background .3s,transform .3s,box-shadow .3s}
.g-dots span{opacity:0;transform:translateX(8px);transition:.3s;white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(5,6,13,.8);border:1px solid var(--line);pointer-events:none}
.g-dots a:hover span{opacity:1;transform:none}
.g-dots a.on i{background:linear-gradient(135deg,#fff3c2,#e09a22);transform:rotate(45deg) scale(1.45);box-shadow:0 0 14px rgba(246,207,106,.9)}
.g-nav-links a.on{color:#fff}.g-nav-links a.on::after{transform:scaleX(1)}

/* 맨 위로 (빛의 정령) */
.to-top{position:fixed;right:22px;bottom:24px;z-index:85;width:62px;height:62px;border-radius:50%;padding:0;border:2px solid var(--gold);background:#000;cursor:pointer;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .4s,transform .4s;box-shadow:0 0 0 6px rgba(246,207,106,.12),0 0 34px rgba(255,214,110,.5)}
.to-top.on{opacity:1;transform:none;pointer-events:auto;animation:float 4.5s ease-in-out infinite}
.to-top img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.to-top span{position:absolute;right:74px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.78rem;color:#fff;padding:4px 12px;border-radius:999px;background:rgba(5,6,13,.85);border:1px solid var(--line);opacity:0;transition:.3s;pointer-events:none}
.to-top:hover span{opacity:1}

/* 마우스를 따라다니는 빛 */
.g-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;z-index:70;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,220,130,.13) 0%,rgba(255,200,90,.05) 38%,rgba(255,200,90,0) 68%);will-change:transform}
.g-glow.on{opacity:1}

/* 제목 글자 */
.split span{display:inline-block;opacity:0;animation:letter 1s cubic-bezier(.2,.75,.2,1) both;animation-play-state:paused}
body.ready .split span{animation-play-state:running}
@keyframes letter{from{opacity:0;transform:translateY(.45em) scale(1.18);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero-title{letter-spacing:0}.hero-title.split span{margin-right:.08em}
.hero-kicker,.hero-sub,.hero-kr,.hero-rule,.hero-tag,.hero-desc,.hero-btns{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.75,.2,1)}
body.ready .hero-kicker{opacity:.9;transform:none;transition-delay:.1s}
body.ready .hero-sub{opacity:1;transform:none;transition-delay:.95s}
body.ready .hero-kr{opacity:1;transform:none;transition-delay:1.1s}
body.ready .hero-rule{opacity:1;transform:none;transition-delay:1.25s}
body.ready .hero-tag{opacity:1;transform:none;transition-delay:1.4s}
body.ready .hero-desc{opacity:1;transform:none;transition-delay:1.55s}
body.ready .hero-btns{opacity:1;transform:none;transition-delay:1.75s}
/* 첫 화면 위를 가로지르는 빛줄기 */
.hero-in::before{content:'';position:absolute;left:-10%;top:-30%;width:46%;height:160%;pointer-events:none;z-index:-1;
 background:linear-gradient(100deg,transparent 30%,rgba(255,236,170,.10) 50%,transparent 70%);transform:skewX(-14deg);animation:beam 9s ease-in-out infinite}
@keyframes beam{0%,100%{translate:-20% 0;opacity:0}40%,60%{opacity:1}50%{translate:170% 0}}

/* 구역 장식선 + 제목 밑줄 */
.sec-orn{display:flex;align-items:center;justify-content:center;margin:0 auto 34px;max-width:420px}
.sec-orn::before,.sec-orn::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(246,207,106,.6));transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.2s cubic-bezier(.2,.75,.2,1) .2s}
.sec-orn::after{background:linear-gradient(270deg,transparent,rgba(246,207,106,.6));transform-origin:0 50%}
.sec-orn.in::before,.sec-orn.in::after{transform:scaleX(1)}
.sec-orn i{width:11px;height:11px;margin:0 16px;transform:rotate(45deg);background:linear-gradient(135deg,#fff3c2,#e09a22);box-shadow:0 0 18px rgba(246,207,106,.85)}
.sec-title{background:linear-gradient(100deg,#fff 0%,#fff 42%,#ffe9a6 50%,#fff 58%,#fff 100%);background-size:260% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-title.in{animation:tshine 2.2s ease-out .5s both}
@keyframes tshine{from{background-position:120% 0}to{background-position:-60% 0}}

/* 기울기 + 빛 반사 */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt-glare{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
 background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,244,205,.34) 0%,rgba(255,236,170,.10) 30%,transparent 58%)}
.tilt:hover .tilt-glare{opacity:1}
.kcard.tilt:hover,.scard.tilt:hover,.bcard.tilt:hover{transform:none}

/* 흐르는 줄의 양끝이 어둠 속으로 */
.marq-wrap,.bosses .marq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.bosses{position:relative}
.bosses::before,.knights::before,.journey::before{content:'';position:absolute;left:50%;top:0;width:min(900px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(246,207,106,.35),transparent)}

/* 숫자 띠 */
.stat{position:relative;transition:background .4s}
.stat:hover{background:rgba(246,207,106,.06)}
.stat::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--gold);transition:width .5s,left .5s;box-shadow:0 0 12px rgba(246,207,106,.8)}
.stat:hover::after{width:60%;left:20%}

/* 등급 칩·원소가 차례로 */
.grades .grade,.elems .elem{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.feat-txt.in .grade,.feat-txt.in .elem{opacity:1;transform:none}
.feat-txt.in .grade:nth-child(1),.feat-txt.in .elem:nth-child(1){transition-delay:.5s}.feat-txt.in .grade:nth-child(2),.feat-txt.in .elem:nth-child(2){transition-delay:.6s}
.feat-txt.in .grade:nth-child(3),.feat-txt.in .elem:nth-child(3){transition-delay:.7s}.feat-txt.in .grade:nth-child(4),.feat-txt.in .elem:nth-child(4){transition-delay:.8s}
.feat-txt.in .grade:nth-child(5){transition-delay:.9s}.feat-txt.in .grade:nth-child(6){transition-delay:1s}.feat-txt.in .grade:nth-child(7){transition-delay:1.1s}.feat-txt.in .grade:nth-child(8){transition-delay:1.2s}
.feat li{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s}
.feat-txt.in li{opacity:1;transform:none}
.feat-txt.in li:nth-child(1){transition-delay:.25s}.feat-txt.in li:nth-child(2){transition-delay:.38s}.feat-txt.in li:nth-child(3){transition-delay:.51s}
.feat-no{background:linear-gradient(180deg,rgba(246,207,106,.9),rgba(246,207,106,0));-webkit-background-clip:text;background-clip:text}

@media(max-width:1000px){.g-dots{display:none}.to-top{right:14px;bottom:16px;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.hero-kicker,.hero-sub,.hero-kr,.hero-rule,.hero-tag,.hero-desc,.hero-btns,.grades .grade,.elems .elem,.feat li{opacity:1;transform:none;transition:none}.split span{opacity:1;animation:none}.sec-title{animation:none;background-position:-60% 0}.hero-in::before{display:none}}

/* ══════════ 휴대폰 화면 다듬기 (2026-10-10) ══════════ */
body.page-game{word-break:keep-all;overflow-wrap:break-word}
.sec-title,.feat h3,.story h2,.final-title,.hero-tag,.vid-cap b,.jr-name{text-wrap:balance}
.sec-desc,.sec-lead,.feat p,.story p,.final p,.hero-desc{text-wrap:pretty}
@media(max-width:640px){
 .sec-title{font-size:1.72rem;line-height:1.32}
 .feat h3{font-size:1.42rem;line-height:1.38}
 .final-title{font-size:1.9rem;line-height:1.3}
 .sec-orn{margin-bottom:22px;max-width:260px}
 .to-top{width:46px;height:46px;right:12px;bottom:14px;border-width:1.5px;box-shadow:0 0 0 4px rgba(246,207,106,.10),0 0 20px rgba(255,214,110,.4)}
 .to-top span{display:none}
 body:has(.g-nav.open) .to-top{opacity:0;pointer-events:none}
 .page-game .site-footer{padding-bottom:78px}
 .hero-bg{height:min(122vw,64vh);background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
 .hero::before{background:linear-gradient(180deg,rgba(5,6,13,.58) 0%,rgba(5,6,13,0) 15%,rgba(5,6,13,0) 40%,rgba(5,6,13,.72) 58%,var(--bg) 70%)}
 .hero-title.split span{margin-right:.04em}
 .ld-mark b{font-size:1.7rem}
}