/* 첫 화면 (11.11 E안): 지옥문 대기 → 입장 컷 영상 → 키비주얼 + 로그인 · 개인정보 처리방침 페이지
   영상·그림은 assets/entry/ (시안 _시안/지옥문입장-영상-1111 E안). 소리 없음, muted playsinline.
   영상 끝 프레임 = kv.webp. 둘 다 화면 높이에 맞춰 가로 가운데를 잘라 쓰므로 영상이 끝나는 순간 그대로 이어진다 */

/* ---------- 지옥문 대기 · 입장 컷 (route-loading) ---------- */
.gate-entry{position:relative;overflow:hidden;background:#1a0505;isolation:isolate}
.gate-entry video,.gate-entry .ge-kv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gate-entry .ge-kv{background:#1a0505 url('assets/entry/kv.webp') 50% 0/cover}
.gate-entry .ge-clip{z-index:1;background:#1a0505}
/* 대기: 바탕은 멈춰 있고 불티·먼지만 떠오르는 4초 반복 영상 (첫 프레임 = 입장 컷 첫 프레임) */
.gate-entry .ge-idle{z-index:2;transition:opacity .25s ease}
.ge-logo{position:absolute;z-index:3;left:50%;top:calc(44px + env(safe-area-inset-top,0px));width:230px;height:auto;transform:translateX(-50%);filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(20,4,4,.9));transition:opacity .35s,transform .5s}
.ge-cta{position:absolute;z-index:3;left:20px;right:20px;bottom:calc(34px + var(--safe-b));transition:opacity .3s,transform .3s}
.ge-cta .img-btn{animation:geNudge 2.6s ease-in-out infinite}
@keyframes geNudge{50%{transform:translateY(-2px)}}
.ge-skip{position:absolute;z-index:4;right:14px;bottom:calc(18px + var(--safe-b));min-height:44px;padding:0 14px;border:1px solid rgba(243,224,180,.45);border-radius:999px;background:rgba(15,5,5,.55);color:#f3e0b4;font:var(--t-body-sm-strong);letter-spacing:var(--t-body-sm-strong-ls);opacity:0;transition:opacity .4s}
.ge-skip[hidden]{display:none}
.gate-entry.playing .ge-skip{opacity:1}
.gate-entry.playing .ge-idle{opacity:0;pointer-events:none}
/* 11.12 종이 타들어가기 (app.js paperBurn, C안): 버튼 그림 대신 같은 자리의 캔버스가 탄다 */
.ge-cta.burning .img-btn{visibility:hidden;animation:none}
.ge-burn{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 4px 0 #000)}
.gate-entry.playing .ge-cta{opacity:0;transform:translateY(16px);pointer-events:none}
.gate-entry.playing .ge-cta.burning{transform:none;transition:opacity .45s .15s}
.gate-entry.playing .ge-cta .img-btn{animation:none}
.gate-entry.playing .ge-logo{opacity:0;transform:translateX(-50%) translateY(-14px)}

/* ---------- 키비주얼 + 로그인 (route-welcome · route-login) ---------- */
.kv-main{position:relative;overflow:hidden;background:#1a0505 url('assets/entry/kv.webp') 50% 0/cover}
.kv-main:after{content:'';position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(12,3,3,.92) 62%);pointer-events:none}
.kvm-foot{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 20px calc(22px + var(--safe-b))}
.kvm-foot .login-btns{margin:0}
.kvm-foot .inapp-box{margin:0 0 12px}
.kvm-legal{margin:12px 0 0;text-align:center}
.kvm-legal button{min-height:36px;padding:0 6px;border:0;background:none;color:#cfc8b8;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls)}
/* 입장 컷에서 넘어왔을 때만: 버튼이 아래에서 올라온다 (키비주얼은 영상 끝 프레임과 같아서 그대로) */
.kv-main.arrive .kvm-foot>*{animation:kvmRise .55s cubic-bezier(.2,.7,.3,1) both}
.kv-main.arrive .kvm-foot>:nth-child(2){animation-delay:.08s}
.kv-main.arrive .kvm-foot>:nth-child(3){animation-delay:.16s}
.kv-main.arrive:after{animation:kvmFade .5s ease both}
@keyframes kvmRise{from{opacity:0;transform:translateY(14px)}}
@keyframes kvmFade{from{opacity:0}}

/* ---------- 개인정보 처리방침 (route-privacy, 별도 페이지) ---------- */
.pv-page{display:flex;flex-direction:column;background:var(--bg)}   /* 머리띠 고정 · 방침 본문(.pv-doc.scr-body)만 안쪽 스크롤 */
.pv-bar{flex:none;display:flex;align-items:center;gap:4px;height:56px;padding:0 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.pv-bar button{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--text)}
.pv-bar h2{margin:0;font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls)}
.pv-doc{padding:18px 20px calc(40px + var(--safe-b))}
.pv-doc .pv-draft{display:inline-block;margin:0 0 6px;padding:3px 8px;border:1px solid var(--line2);border-radius:2px;color:var(--tal);font:var(--t-caption);letter-spacing:var(--t-caption-ls)}
.pv-doc h3{margin:22px 0 6px;font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls)}
.pv-doc p{margin:0 0 8px;color:var(--muted);font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls)}

@media (prefers-reduced-motion:reduce){ .ge-cta .img-btn,.kv-main.arrive .kvm-foot>*,.kv-main.arrive:after{animation:none} }