/* 첫 화면 — 세계관 / 게임 두 갈래 문 (2026-10-10) */
body.page-landing{margin:0;background:#04050b;color:#eef0f8;font-family:'Noto Sans KR','Noto Serif KR',sans-serif;overflow-x:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.ld{position:relative;flex:1;min-height:640px;height:calc(100vh - 0px);height:100svh;display:flex;overflow:hidden;background:#04050b}

/* ── 두 갈래 */
.ld-half{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;text-decoration:none;color:#fff;
    transition:flex .8s cubic-bezier(.2,.75,.2,1);isolation:isolate}
.ld-half .bg{position:absolute;inset:-4%;translate:var(--mx,0) var(--my,0);background-size:cover;background-position:center;z-index:-2;
    transform:scale(1.04);filter:saturate(.95) brightness(.84);transition:transform 1.4s cubic-bezier(.2,.75,.2,1),filter .8s}
.ld-world .bg{background-image:url('images/game/land-world.jpg')}
.ld-game .bg{background-image:url('images/game/land-game2.jpg')}
.ld-half::before{content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(4,5,11,.80) 0%,rgba(4,5,11,.18) 34%,rgba(4,5,11,.04) 52%,rgba(4,5,11,.88) 100%)}
.ld-world::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 62%,rgba(4,5,11,.72) 100%)}
.ld-game::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,transparent 62%,rgba(4,5,11,.72) 100%)}
.ld:hover .ld-half{flex:.82}
.ld .ld-half:hover{flex:1.3}
.ld-half:hover .bg,.ld-half:focus-visible .bg{transform:scale(1.1);filter:saturate(1.1) brightness(1.04)}

.ld-body{position:relative;width:min(520px,84%);padding:0 0 clamp(96px,15vh,170px);text-align:center;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.ld-half:hover .ld-body{transform:translateY(-10px)}
.ld-en{font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.56em;padding-left:.56em;color:#f6cf6a;opacity:.92}
.ld-kr{font-family:'Noto Serif KR',serif;font-weight:900;font-size:clamp(2.8rem,6.2vw,5.4rem);line-height:1.12;margin:10px 0 14px;letter-spacing:.06em;text-shadow:0 6px 34px rgba(0,0,0,.75)}
.ld-desc{font-family:'Noto Serif KR',serif;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.85;color:rgba(255,255,255,.86);text-shadow:0 2px 14px rgba(0,0,0,.85);
    max-height:0;opacity:0;overflow:hidden;transition:max-height .7s ease,opacity .6s ease}
.ld-half:hover .ld-desc,.ld-half:focus-visible .ld-desc{max-height:120px;opacity:1}
.ld-go{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:17px 44px;border-radius:999px;font-weight:700;font-size:1.08rem;letter-spacing:.08em;overflow:hidden;
    border:1px solid rgba(246,207,106,.7);color:#f6cf6a;background:rgba(4,5,11,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .4s,color .4s,box-shadow .4s,border-color .4s}
.ld-go i{font-style:normal;transition:transform .4s}
.ld-half:hover .ld-go{background:linear-gradient(180deg,#ffe9a6,#f0b53c);color:#241503;border-color:#ffe9a6;box-shadow:0 12px 44px rgba(240,181,60,.5)}
.ld-half:hover .ld-go i{transform:translateX(6px)}
.ld-go::after{content:'';position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:ldsweep 3.8s ease-in-out infinite}
@keyframes ldsweep{0%,55%{left:-70%}100%{left:130%}}

/* ── 가운데 금빛 이음줄 */
.ld-seam{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:3;pointer-events:none;transform:translateX(-.5px);
    background:linear-gradient(180deg,transparent 0%,rgba(246,207,106,.0) 26%,rgba(246,207,106,.75) 50%,rgba(246,207,106,.0) 86%,transparent 100%);transition:left .8s cubic-bezier(.2,.75,.2,1),opacity .4s}
.ld-seam::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px;transform:rotate(45deg);background:linear-gradient(135deg,#fff3c2,#e09a22);box-shadow:0 0 22px rgba(246,207,106,.9)}
.ld:hover .ld-seam{opacity:0}

/* ── 위쪽 제목 */
.ld-head{position:absolute;left:0;right:0;top:clamp(34px,7.5vh,84px);z-index:4;text-align:center;pointer-events:none}
.ld-kicker{font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.5em;padding-left:.5em;color:rgba(246,207,106,.9)}
.ld-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(3.4rem,9.4vw,8.4rem);line-height:1;letter-spacing:.2em;padding-left:.2em;margin:10px 0 6px;
    background:linear-gradient(180deg,#fff7d6 0%,#ffd866 42%,#d98f1c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffd866;
    filter:drop-shadow(0 8px 34px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(255,205,90,.22))}
.ld-sub{font-family:'Noto Serif KR',serif;font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:.34em;padding-left:.34em;color:rgba(255,255,255,.92);text-shadow:0 2px 16px rgba(0,0,0,.85)}
.ld-sub::before,.ld-sub::after{content:'';display:inline-block;vertical-align:middle;width:clamp(26px,5vw,70px);height:1px;margin:0 18px;background:linear-gradient(90deg,transparent,#f6cf6a)}
.ld-sub::after{transform:scaleX(-1)}
#ldMotes{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ── 들어올 때 */
.ld-head,.ld-body{animation:ldin 1.3s cubic-bezier(.2,.75,.2,1) both}
.ld-body{animation-delay:.25s}
@keyframes ldin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ── 아래 사업자 정보 (화면을 덮지 않는 얇은 띠) */
.page-landing .site-footer{position:static;padding:14px 18px 16px;font-size:.74rem;line-height:1.75;background:#04050b;border-top:1px solid rgba(246,207,106,.16)}
.page-landing .site-footer-brand{font-size:.8rem;margin-bottom:2px}
.page-landing .site-footer-copy{margin-top:3px;font-size:.68rem}

/* ── 작은 화면: 위아래로 */
@media(max-width:760px){
 .ld{flex-direction:column;height:auto;min-height:100svh}
 .ld-half{flex:1 1 50%;min-height:46svh;align-items:flex-end}
 .ld:hover .ld-half,.ld .ld-half:hover{flex:1 1 50%}
 .ld-half .bg{filter:saturate(1) brightness(.82)}
 .ld-world::after,.ld-game::after{display:none}
 .ld-world::before{background:linear-gradient(180deg,rgba(4,5,11,.9) 0%,rgba(4,5,11,.25) 46%,rgba(4,5,11,.86) 100%)}
 .ld-game::before{background:linear-gradient(180deg,rgba(4,5,11,.55) 0%,rgba(4,5,11,.12) 40%,rgba(4,5,11,.9) 100%)}
 .ld-body{padding-bottom:30px}
 .ld-kr{font-size:2.5rem;margin:6px 0 8px}
 .ld-desc{max-height:none;opacity:1;font-size:.9rem;line-height:1.7}
 .ld-go{margin-top:16px;padding:13px 34px;font-size:1rem;background:linear-gradient(180deg,#ffe9a6,#f0b53c);color:#241503;border-color:#ffe9a6}
 .ld-seam{display:none}
 .ld-head{top:22px}
 .ld-title{font-size:3rem;letter-spacing:.16em}
 .ld-sub{font-size:.86rem;letter-spacing:.22em}.ld-sub::before,.ld-sub::after{width:20px;margin:0 10px}
 .ld-kicker{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){.ld-head,.ld-body,.ld-go::after{animation:none}}

/* ══════════ 화면 효과 (fx.js) ══════════ */
.ld-title{background:none;-webkit-text-fill-color:currentColor;letter-spacing:0;padding-left:0}
.ld-title .ld-ch,.ld-title:not(.split){background:linear-gradient(180deg,#fff7d6 0%,#ffd866 42%,#d98f1c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffd866}
.ld-title .ld-ch{display:inline-block;margin:0 .1em;opacity:0;animation:ldletter 1.1s cubic-bezier(.2,.75,.2,1) both}
@keyframes ldletter{from{opacity:0;transform:translateY(.5em) scale(1.2);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
.ld-head{animation:none}
.ld-kicker,.ld-sub{animation:ldin 1.2s cubic-bezier(.2,.75,.2,1) both}.ld-sub{animation-delay:.9s}
.ld-body{animation-delay:1.1s}
/* 가운데 빛줄기가 화면을 한 번씩 가로지른다 */
.ld::after{content:'';position:absolute;top:-20%;left:-30%;width:34%;height:140%;z-index:2;pointer-events:none;transform:skewX(-16deg);
 background:linear-gradient(100deg,transparent 25%,rgba(255,236,170,.09) 50%,transparent 75%);animation:ldbeam 10s ease-in-out infinite}
@keyframes ldbeam{0%,100%{translate:0 0;opacity:0}45%,55%{opacity:1}50%{translate:420% 0}}
.ld-half .bg{animation:ldkb 24s ease-in-out infinite alternate}
.ld-game .bg{animation-delay:-12s}
@keyframes ldkb{from{scale:1}to{scale:1.07}}
.ld-en{position:relative;display:inline-block}
.ld-en::after{content:'';display:block;height:1px;margin:10px auto 0;width:0;background:#f6cf6a;transition:width .6s}
.ld-half:hover .ld-en::after{width:100%}
.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,.16) 0%,rgba(255,200,90,.06) 38%,rgba(255,200,90,0) 68%);will-change:transform}
.g-glow.on{opacity:1}
@media(prefers-reduced-motion:reduce){.ld-title .ld-ch{opacity:1;animation:none}.ld::after{display:none}.ld-half .bg{animation:none}}

body.page-landing{word-break:keep-all}
.ld-desc{text-wrap:balance}
/* ══════════ 휴대폰 화면 다듬기 (2026-10-10) ══════════ */
@media(max-width:760px){
 .ld-world{flex:1 1 54%;min-height:52svh}
 .ld-game{flex:1 1 46%;min-height:44svh}
 .ld-game .bg{inset:0;background-size:auto 138%;background-position:90% 100%;animation:none;transform:none}
 .ld-half:hover .bg{transform:none}
 .ld-head{top:18px}
 .ld-title{font-size:2.7rem;margin:6px 0 4px}
 .ld-sub{font-size:.8rem}
 .ld-en{font-size:.7rem}
 .ld-kr{font-size:2.2rem;margin:4px 0 6px}
 .ld-desc{font-size:.84rem;line-height:1.65}
 .ld-go{margin-top:12px;padding:12px 30px;font-size:.96rem}
 .ld-body{padding-bottom:22px}
 .ld-game .ld-body{text-align:left;width:88%}
 .ld-game .ld-desc{max-width:15.5em}
 .ld::after{display:none}
}