/* ===== 페이지 시스템 (js/pages.js) ===== */
.vr-page { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: linear-gradient(#1c0a0e, #0b0305); color: #f4f4f5; }
.vr-page.hidden { display: none; }
.vr-page-head { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid rgba(245, 201, 106, .3); background: rgba(0, 0, 0, .35); }
.vr-page-back { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(245, 201, 106, .5); color: #f5c96a; font: 900 20px/1 sans-serif; background: rgba(0, 0, 0, .4); flex: none; }
.vr-page-title { flex: 1; min-width: 0; font-weight: 900; font-size: 17px; color: #f5c96a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-page-cur { display: flex; align-items: center; gap: 6px; flex: none; font-size: 12px; }
.vr-page-body { flex: 1; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.vr-page-err { padding: 40px 0; text-align: center; color: #a1a1aa; }
@keyframes vrInR { from { translate: 28% 0; opacity: .4; } to { translate: none; opacity: 1; } }
@keyframes vrInL { from { translate: -18% 0; opacity: .5; } to { translate: none; opacity: 1; } }
.vr-in-r { animation: vrInR .24s cubic-bezier(.2, .8, .3, 1); }
.vr-in-l { animation: vrInL .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .vr-in-r, .vr-in-l { animation: none !important; } }
/* 예전 팝업을 페이지 안에 담을 때 (VRPages.host / 랭킹): 바탕·닫기 버튼 숨기고 판은 페이지 폭에 맞춤 */
.vr-in-page { position: static !important; inset: auto !important; background: none !important; display: block !important; padding: 0 !important; z-index: auto !important; }
.vr-in-page > .gem-panel { width: 100% !important; max-width: 560px; max-height: none !important; margin: 0 auto; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.vr-in-page .gem-x, #vr-page #rank-box .rh { display: none !important; }
#vr-page #rank-box { width: 100% !important; max-width: 560px; max-height: none !important; margin: 0 auto; border: 0 !important; background: none !important; box-shadow: none !important; position: static !important; }
/* 레이어: 페이지(#vr-page)=9000 · 상단바(#vr-tnb)=9050 · 하단GNB(#vr-gnb)=9100 · 진짜 팝업(body 직속)=9600+
   마이/PvP/조직 등에서 연 팝업이 상단바 뒤로 깔리던 문제 — 페이지 안(vr-in-page)이 아닌 떠 있는 창은 항상 크롬 위 */
.gd-pop:not(.vr-in-page):not([data-vr-under]),
.pvp-modal:not(.vr-in-page),
.gear-pop-bg:not(.vr-in-page):not([data-vr-under]),
.gem-pop:not(.vr-in-page),
.main-pop,
.tr-bg:not(.vr-in-page),
.mp-modal:not(.hidden),
.gal-modal:not(.hidden),
.gal-detail:not(.hidden),
#detail:not(.hidden),
#story-pop:not(.hidden):not(.story-pop-page),
#camp-ov:not(.vr-in-page),
#main-settings-pop:not(.hidden),
#arcade-opts:not(.hidden),
#merc:not(.hidden),
#help:not(.hidden),
#endturn-confirm:not(.hidden),
#howto.open,
.drink-ask { z-index: 9600 !important; }
.pvp-modal.pvp-top:not(.vr-in-page), .pvp-vsx, .gal-zoom, .pvp-modal.pvp-sub:not(.vr-in-page) { z-index: 9650 !important; }
/* Card details must sit above their invoking deck dialog; zoom is above the detail. */
#detail:not(.hidden) { z-index: 9660 !important; }
#zoom-view.open { z-index: 9680 !important; }
#vr-confirm { z-index: 9700 !important; }
.gem-toast, .story-toast, .gd-toast, .pvp-toast { z-index: 9800 !important; }
/* 3단계: 마이페이지 · 갤러리 판을 페이지 안에 */
#vr-page .mp-panel, #vr-page .gal-panel { width: 100% !important; max-width: 640px; max-height: none !important; margin: 0 auto; border: 0 !important; background: none !important; box-shadow: none !important; position: static !important; overflow: visible !important; }
#vr-page .mp-title, #vr-page .mp-x, #vr-page .gal-title, #vr-page .gal-x:not(.gal-detail .gal-x) { display: none !important; }
/* 4단계: 파견 · 장비(가방·우편함·PvP 상점) */
#vr-page #dsp-box, #vr-page .gear-pop { width: 100% !important; max-width: 640px; max-height: none !important; margin: 0 auto; border: 0 !important; background: none !important; box-shadow: none !important; position: static !important; overflow: visible !important; }
#vr-page #dsp-box .dx { display: none !important; }
/* 5단계: 탑 — #story-screen 을 페이지 안에 담음 (스크롤은 예전처럼 story-screen 이 맡음). 전투 중(화면 숨김)엔 페이지도 숨김 */
#vr-page .vr-quest-body { position: relative; padding: 0; overflow: hidden; }
#vr-page .vr-quest-body > #story-screen { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); }   /* 탑 고정 배경(::before)이 머리줄까지 덮지 않게 잘라냄 */
#vr-page:has(.vr-quest-body > #story-screen.hidden) { display: none; }
/* 6단계: 토벌·구역 전쟁 (조직 창 위에서도 열림) */
#vr-page .gd-pop.vr-in-page { position: static !important; inset: auto !important; background: none !important; padding: 0 !important; display: block !important; }
#vr-page .gd-pop.vr-in-page > .gd-pop-panel { width: 100% !important; max-width: 640px; max-height: none !important; margin: 0 auto; box-shadow: none !important; overflow: visible !important; }
#vr-page .gd-pop.vr-in-page > .gd-pop-panel > .gd-x { display: none !important; }
/* 전투 중엔 페이지 숨김 (전투 화면 = #game, 또는 페이지 안 창을 숨겼을 때) */
body.vr-page-on:has(#game:not(.hidden)) #vr-page, #vr-page:has(.vr-in-page[style*="display: none"]) { display: none !important; }
/* 7단계: 조직 (페이지) + 안쪽 큰 창 = 하위 페이지 */
#vr-page .gd-ov.vr-in-page { position: static !important; inset: auto !important; z-index: auto !important; background: none !important; padding: 0 !important; overflow: visible !important; display: flex; }
#vr-page .gd-ov.vr-in-page > .gd-page { margin: 0 auto; }
#vr-page .gd-ov.vr-in-page .gd-page > .gd-x[data-close] { display: none !important; }
/* 8단계: PvP 로비 + 하위 페이지(덱 편집·랭킹·시즌 보상). 작은 창·재생·VS 화면은 페이지 위 */
#vr-page .pvp-modal.vr-in-page { position: static !important; inset: auto !important; z-index: auto !important; background: none !important; padding: 0 !important; display: block !important; }
#vr-page .pvp-modal.vr-in-page > .pvp-panel { width: 100% !important; max-width: 640px; max-height: none !important; margin: 0 auto; overflow: visible !important; }
#vr-page .pvp-modal.vr-in-page > .pvp-panel > .pvp-x { display: none !important; }
/* 9단계: 스토리 큰 팝업(#story-pop) = 페이지 */
#vr-page .story-pop-body { position: relative; padding: 0; overflow: hidden; }
#vr-page .story-pop-body > #story-pop.story-pop-page { position: absolute !important; inset: 0 !important; z-index: 0 !important; background: none !important; padding: 8px !important; display: block !important; overflow: hidden; }
#vr-page .story-pop-body > #story-pop.story-pop-page > .story-pop-panel { max-width: 640px; width: 100%; margin: 0 auto; height: 100%; max-height: 100% !important; }   /* 스크롤은 예전처럼 판(panel)이 맡음 → close(true) 스크롤 유지 그대로 */
/* ===== 시안: 전역 하단 탭 (js/gnb.js) ===== */
#vr-gnb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9100; display: flex; align-items: flex-end; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
  background: url(../img/ui/gnb/nav_bar_bg_v1.webp) center top / 100% 100% no-repeat, #170f0c; transition: transform .2s ease; }
#vr-gnb.gnb-hide { transform: translateY(calc(100% + 48px)); pointer-events: none; visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }   /* 떠 있는 소환 원까지 완전히 내려감 */
.gnb-t { position: relative; flex: 1 1 0; min-width: 0; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: #c9b38a; cursor: pointer;
  font-size: .68rem; font-weight: 700; white-space: nowrap; letter-spacing: -.02em; -webkit-tap-highlight-color: transparent; }
.gnb-t i { position: relative; width: 30px; height: 30px; display: block; }
.gnb-t i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gnb-t .gnb-on, .gnb-t.on .gnb-off { opacity: 0; } .gnb-t.on .gnb-on { opacity: 1; }
.gnb-t.on { color: #f5c96a; }
/* 소환: 바 위로 떠 있는 원형 버튼 (디자인 PNG, 빛 포함) */
.gnb-summon i { width: 76px; height: 76px; margin: -38px 0 -6px; }
.gnb-summon i img.gnb-off, .gnb-summon i img.gnb-on { inset: 22px; width: 32px; height: 32px; }
.gnb-summon i .gnb-sb, .gnb-summon i .gnb-sb-p { filter: none; }
.gnb-summon .gnb-sb-p { opacity: 0; } .gnb-summon:active .gnb-sb-p { opacity: 1; } .gnb-summon:active .gnb-sb { opacity: 0; }
.gnb-summon span { color: #f5c96a; }
.gnb-dot { position: absolute; top: -30px; left: calc(50% + 16px); width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid #170f0c; box-shadow: 0 0 6px rgba(239,68,68,.8); }
.gnb-dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #vr-gnb { transition: none; } }
@media (min-width: 768px) { #vr-gnb { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 100%); border-radius: 18px 18px 0 0;
  background: url(../img/ui/gnb/nav_bar_bg_9slice_v1.webp) left top / auto 100% no-repeat, url(../img/ui/gnb/nav_bar_bg_9slice_v1.webp) right top / auto 100% no-repeat, url(../img/ui/gnb/nav_bar_bg_v1.webp) center top / 100% 100% no-repeat, #170f0c; }
  #vr-gnb.gnb-hide { transform: translate(-50%, calc(100% + 48px)); } }
body.gnb-on .main-tabs { display: none !important; }
/* 바닥 여백: 탭 64px + 떠 있는 소환 원(22px) 만큼 더 → 맨 아래 버튼이 가려지지 않게 */
body.gnb-on { --gnb-safe: calc(86px + env(safe-area-inset-bottom)); }
body.gnb-on:not(.gnb-hidden) .vr-page, body.gnb-on:not(.gnb-hidden) #story-screen { padding-bottom: var(--gnb-safe); }
body.gnb-on .gr-actions { padding-bottom: 30px; }   /* 소환 화면 뽑기 버튼을 위로 */
body.gnb-on #start-screen .main-body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
body.gnb-on .hub-menu, body.gnb-on .hub-gacha { display: none !important; }   /* 스토리 허브 하단 메뉴 → GNB·상단 칩으로 이동 */
.hub-chip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(245,201,106,.45); background: rgba(18,8,10,.75); color: #fde7b0; font-size: .72rem; font-weight: 700; position: relative; white-space: nowrap; }
.hub-chip .story-badge { position: absolute; top: -6px; right: -6px; }
.tile-trade { grid-column: 1 / -1; aspect-ratio: 3 / 1; max-height: 110px; width: 100%; }
.tile-trade .main-tile-img { object-position: right center; }
body.gnb-on:not(.gnb-hidden) { --gnb-pad: var(--gnb-safe); }
/* toast: always fit inside pill */
.gem-toast, .story-toast, .gd-toast, .pvp-toast { box-sizing: border-box; width: max-content; max-width: calc(100vw - 24px); white-space: normal !important; overflow-wrap: anywhere; text-align: center; line-height: 1.35; padding-left: 18px; padding-right: 18px; }
@media (max-width: 520px) { .gem-toast, .story-toast, .gd-toast, .pvp-toast { font-size: 13px; border-radius: 18px; } }