/* ===== 전역 공통 ===== */
html,
body { overflow-x: auto; overflow-y: hidden; overscroll-behavior: none; }

/* PC 높이 750 이하 / 태블릿: 안내 이미지로 화면을 가림 */
.viewport-caution { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; z-index: 2147483646; width: 100%; height: 100%; width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; transform: none; background: #000; overflow: hidden; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; background-color: #000;}
.viewport-caution img { position: absolute; inset: 50%; transform: translate(-50%, -50%); display: block; width: 100%; max-width: none; pointer-events: none; }
.viewport-caution,
.viewport-caution * { cursor: default !important; }

@media (max-height: 750px) {
    .viewport-caution--short { display: block; }
}

html.is-tablet .viewport-caution--short { display: none !important; }
html.is-tablet .viewport-caution--tablet { display: block; }

/* DevTools 디바이스 모드: UA는 PC로 남는 경우가 많아, 터치+태블릿 크기면 안내를 띄움 */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 600px) {
    .viewport-caution--short { display: none !important; }
    .viewport-caution--tablet { display: block; }
}

html.is-caution-lock,
html.is-caution-lock body { overflow: hidden !important; overscroll-behavior: none !important; touch-action: none !important; height: 100% !important; max-height: 100% !important; }
html.is-caution-lock,
html.is-caution-lock * { cursor: default !important; }
html.is-caution-lock .custom-cursor { display: none !important; opacity: 0 !important; }
html.is-caution-lock body > *:not(.viewport-caution) { pointer-events: none !important; } 

* { cursor: none !important; } 

/* hotspot: cursor.png tip (28,45) */
.custom-cursor { position: fixed; top: 0; left: 0; width: 48rem; height: auto; transform: translate(-17.18%, -21.74%); pointer-events: none; z-index: 9999; opacity: 0; will-change: transform; } 
.custom-cursor.is-visible { opacity: 1; } 

.ink-splash { position: fixed; width: 58rem; height: 58rem; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); overflow: visible; } 

/* 두루마리(12)·캐릭터(13)·GNB(14)보다 아래 */
.paper-transition-canvas { position: fixed; z-index: 11; pointer-events: none; display: none; } 
.paper-transition-canvas.is-active { display: block; } 

.story-stage { position: relative; width: 100%; opacity: 1; transition: opacity 0.5s ease; } 

.wrap { width: 100%; height: 1080rem; background: url(../img/bg.jpg) no-repeat center center; background-size: cover; overflow: hidden; } 

/* 로딩 (영상 인트로 대체) */
.loading-overlay { position: fixed; inset: 0; z-index: 500; display: none; background: url(../img/bg.jpg) no-repeat center center; background-size: cover; overflow: hidden; opacity: 1; transition: opacity 0.5s ease; }
.loading-overlay.is-active { display: flex; align-items: center; justify-content: center; }
.loading-overlay.is-leaving { opacity: 0; pointer-events: none; }
.loading-overlay__inner { display: flex; flex-direction: column; align-items: center; gap: 20rem; }
.loading-overlay__logo { position: relative; width: 381rem; }
.loading-overlay__logo-base { display: block; width: 100%; }
/* 채워진(먹색) 로고를 베이스 위에 겹치고 clip-path로 진행률만큼 아래→위 리빌 */
.loading-overlay__logo-fill { position: absolute; inset: 0; width: 100%; clip-path: inset(100% 0 0 0); }
/* 로딩 중에는 상단 사운드 버튼을 오버레이 위로 올려 바로 조작 가능하게 */
body.is-loading .hand-scroll__topnav { z-index: 510; }
body.is-loading .hand-scroll__topnav-btn--sound { opacity: 1; filter: blur(0); pointer-events: auto; }
/* 문구는 시스템 폰트 적용 */
.loading-overlay__sound-hint { display: flex; align-items: center; gap: 10rem; margin: 0; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 22rem; line-height: 1.4; color: #333; letter-spacing: -0.02em; }
.loading-overlay__sound-hint svg { width: 24rem; height: 24rem; }


/* ===== 손 두루마리 공용 (topnav/GNB/스크롤 힌트) ===== */
.hand-scroll { position: relative; width: 100%; height: 100%; } 
.hand-scroll__topnav { position: fixed; top: 20rem; right: 20rem; display: flex; align-items: center; gap: 12rem; z-index: 20; } 
.scroll-icon-wrap { position: absolute; bottom: 30rem; right: 40rem; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; }
.scroll-icon-wrap img { display: block; width: 80rem; height: auto; }
/* 실제로 휠 스크롤/페이지 전환이 가능해지는 시점(pageIntroReady)에만 노출 — 대문 진입 연출 중엔 스크롤이 막혀 있어 미리 보여주면 안 됨 */
body.is-main-page.is-page-nav-ready:not(.is-footer-page) .scroll-icon-wrap { opacity: 1; visibility: visible; }
.hand-scroll__topnav-btn { display: block; width: 52rem; height: 52rem; padding: 0; border: 0; background: none; cursor: pointer; } 
.hand-scroll__topnav-btn img { display: block; width: 100%; height: 100%; transition: filter 0.2s ease; } 
.hand-scroll__topnav-btn:hover img { filter: brightness(1.2); } 
.hand-scroll__topnav-btn--youtube,
.hand-scroll__topnav-btn--channel,
.hand-scroll__topnav-btn--instagram,
.hand-scroll__topnav-btn--community { opacity: 0; pointer-events: none; will-change: transform, opacity, filter; } 
.hand-scroll__topnav-btn--sound { opacity: 0; filter: blur(8rem); transition: opacity 0.8s ease, filter 0.8s ease; } 
.hand-scroll__topnav-btn--sound img.on { display: none; } 
.hand-scroll__topnav-btn--sound.is-playing img.on { display: block; } 
.hand-scroll__topnav-btn--sound.is-playing img.off { display: none; } 
body.is-roll-started .hand-scroll__topnav-btn--sound { opacity: 0; filter: blur(0); } 
/* 재방문자 인트로 스킵: 사운드 버튼 왼쪽. story-intro(z:50) 위에서도 클릭 가능해야 함 */
.hand-scroll__topnav-btn--skip {
 display: none;
 width: auto;
 height: 52rem;
 padding: 0 4rem;
 align-items: center;
 justify-content: center;
 color: #333333;
 font-family: 'Ynam News', sans-serif;
 font-size: 18rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 line-height: 1;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.35s ease, filter 0.35s ease;
}
body.is-intro-skippable .hand-scroll__topnav { z-index: 60; }
body.is-intro-skippable .hand-scroll__topnav-btn--skip {
 display: flex;
 opacity: 1;
 pointer-events: auto;
}
body.is-intro-skippable .hand-scroll__topnav-btn--sound {
 opacity: 1;
 filter: none;
 pointer-events: auto;
}
/* SNS/GNB/타이틀은 playHomeEntrance 타임라인에서 등장 */
body.is-home-revealed .hand-scroll__topnav-btn--sound,
body.is-home-revealed .hand-scroll__topnav-btn--youtube,
body.is-home-revealed .hand-scroll__topnav-btn--channel,
body.is-home-revealed .hand-scroll__topnav-btn--instagram,
body.is-home-revealed .hand-scroll__topnav-btn--community { pointer-events: auto; } 

@keyframes snsIconReveal { 
 0% { opacity: 0; transform: translateY(20rem); filter: blur(10rem); } 
 100% { opacity: 1; transform: translateY(0); filter: blur(0); } 
 }
/* scroll-roll(z:12) 캔버스 위에 메뉴가 보여야 함 */
.hand-scroll > .gnb { position: absolute; top:50%; transform: translateY(-50%); left: 0; left: -65rem; width: 359rem; height: 1057rem; z-index: 14; } 
.hand-scroll > .gnb > ul { position: absolute; top: 220rem; left: 140rem; color: #fff; font-family: 'Ynam News', sans-serif; opacity: 0; pointer-events: none; will-change: transform, opacity, filter; } 

@keyframes gnbReveal { 
 0% { opacity: 0; transform: translateY(60rem) scale(1.02); filter: blur(15rem) brightness(0.3); } 
 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); } 
 }
.hand-scroll > .gnb > ul > li { margin-bottom: 50rem; } 
.hand-scroll > .gnb > ul > li > a { font-weight: 500; font-size: 18rem; position: relative; color: #fff; transition: color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease; } 
.hand-scroll > .gnb > ul > li > a::after { content: ''; position: absolute; left: -32rem; top:-2rem; width: 13rem; height: 18rem; background: url(../img/gnb_ico.png) no-repeat center center; background-size: contain; transition: filter 0.25s ease; } 
.hand-scroll > .gnb > ul > li > ul { margin-top: 20rem; } 
.hand-scroll > .gnb > ul > li > ul > li { margin-bottom: 15rem; } 
.hand-scroll > .gnb > ul > li > ul > li > a { font-size: 16rem; font-weight: 400; color: #e0e0e0; position: relative; transition: color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease; } 
.hand-scroll > .gnb > ul > li > ul > li > a::after { content: ''; position: absolute; left: -27rem; top:6rem; width: 4px; height: 4px; background: url(../img/gnb_sub_ico.png) no-repeat center center; background-size: contain; transition: filter 0.25s ease; } 
.hand-scroll > .gnb a:hover,
.hand-scroll > .gnb a.is-active { color: #fff; filter: brightness(1.35); text-shadow: 0 0 8rem rgba(255, 255, 255, 0.9), 0 0 18rem rgba(255, 230, 180, 0.55); } 
.hand-scroll > .gnb a:hover::after,
.hand-scroll > .gnb a.is-active::after { filter: brightness(1.45); } 
/* 세로는 margin으로 중앙 정렬
   rem(=window.innerHeight 기반)로 높이가 줄어드는 경우가 있어, 최소 물리 높이를 보장합니다. */
.hand-scroll__unfurl { position: absolute; top: 50%; left: 200rem; width: 1785rem; height: 908rem; min-height: 720px; margin-top: -454rem; will-change: transform, clip-path; }

/* 인트로 스토리 — 펼쳐진 두루마리 위에 겹쳐 페이지들을 가리고, 끝나면 페이드아웃 */
/* site-page와 동일하게 종이 배경 위에 컷을 위아래 31.5rem 안쪽으로 배치해 종이 가장자리가 보이게 */
.story-intro { display: none; position: absolute; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; background: url(../img/intro/paper_bg.webp) repeat left top; background-size: 100%; }
.story-intro.is-active { display: block; }
/* 인트로(펼침·스토리) 중 클릭으로 넘기기 — 사운드 버튼 등 UI는 기본 커서 유지 */
body.is-intro-playing { cursor: pointer; }
body.is-intro-playing .hand-scroll__topnav-btn { cursor: pointer; }
.story-intro__track { display: flex; width: 300%; position: absolute; top: 31.5rem; bottom: 31.5rem; left: 0; height: auto; will-change: transform; }
.story-intro__slide { position: relative; width: calc(100% / 3); height: 100%; flex: 0 0 auto; }
.story-intro__bg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 대사 텍스트: 슬라이드 하단 중앙, JS 타임라인에서 순차 페이드 인 */
.story-intro__text { position: absolute; left: 50%; bottom: 96rem; transform: translateX(-50%); height: 71rem; width: auto; max-width: 80%; opacity: 0; visibility: hidden; }
/* 대문 등장 핸드오프: 스토리를 페이지 아래로 내리고(z 해제) 홈 종이 배경을 투명하게 —
   먹 리빌이 안 덮은 영역에는 3컷이 계속 비쳐 보여 그 위에 대문이 생겨나는 것처럼 보인다 */
.story-intro.is-under { z-index: auto; }
body.is-story-handoff .site-page[data-page-id="home"] { background: transparent; }
.hand-scroll__unfurl > .page { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } 
.hand-scroll__shadow { position: fixed; top: 0; left: 0; width: 180rem; height: 908rem; min-height: 720px; transform: translateY(-50%); pointer-events: none; opacity: 0; z-index: 4; background: linear-gradient(
 90deg,
 rgba(30, 20, 12, 0.80) 0%,
 rgba(30, 20, 12, 0.35) 30%,
 rgba(30, 20, 12, 0.15) 48%,
 rgba(30, 20, 12, 0) 100%
 ); } 
.page-track { display: none; height: 100%; position: relative; will-change: transform; } 

body.is-main-page .page-track { display: flex; } 
/* 100vw 기준: site-page에서 100%를 쓰면 부모(unfurl) 대비로 줄어 다음 장이 비침 */
body.is-main-page { --page-left: 200rem; --page-width: max(1785rem, calc(100vw - var(--page-left))); } 

body.is-main-page .hand-scroll__unfurl { left: var(--page-left); width: var(--page-width); overflow: hidden; } 

body.is-main-page .hand-scroll__unfurl > .page { overflow: hidden; } 
.site-page { flex: 0 0 100%; width: 100%; height: 100%; position: relative; background: url(../img/intro/paper_bg.webp) repeat left top; background-size: 100%; } 
.site-page:last-child { width: 100% !important; flex: 0 0 100% !important; } 
.site-page .site-page__content { width: 100%; } 

body.is-main-page .site-page { flex: 0 0 var(--page-width); width: var(--page-width); min-width: 1785rem; } 
body.is-main-page .site-page:last-child { flex: 0 0 var(--page-width) !important; width: var(--page-width) !important; min-width: 1785rem; } 
.site-page__content { position: absolute; top: 31.5rem; right: 0; bottom: 31.5rem; left: 0; overflow: hidden; } 

.site-page__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: 'Gmarket Sans', sans-serif; font-size: 48rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.05em; } 

.site-page[data-page-id="worldview"] .site-page__placeholder { background: linear-gradient(135deg, #1a4e3a 0%, #2d7a5a 100%); } 
.site-page[data-page-id="characters"] .site-page__placeholder { background: linear-gradient(135deg, #4e1a2a 0%, #7a2d4a 100%); } 
.site-page[data-page-id="dokkaebi"] .site-page__placeholder { background: linear-gradient(135deg, #4e3a1a 0%, #7a5a2d 100%); } 
.site-page[data-page-id="webtoon"] .site-page__placeholder { background: linear-gradient(135deg, #1a2a4e 0%, #2d4a7a 100%); } 
.site-page[data-page-id="media"] .site-page__placeholder { background: linear-gradient(135deg, #2a4e1a 0%, #4a7a2d 100%); } 



/* ===== 사전예약 ===== */
.p2-page { position: absolute; inset: 0; overflow: hidden; } 
.p2-page__layer { position: absolute; pointer-events: none; } 
.p2-page__layer--1 { inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } 
.p2-page__layer--2 { left: 0; bottom: 0; width: 380rem; height: auto;  z-index: 3; } 
.p2-page__layer--3 { left: calc(54%); bottom: 0; width: 1200rem; height: auto; transform: translateX(-50%); z-index: 5; } 
.p2-page__layer--4 { right: 0; bottom: 0; width: 500rem; height: auto; z-index: 3; } 

.p2-page__layer--5 { left: 0; bottom: -30rem; width: 100%; height: auto; animation: p2-cloud-float-5 5.3s ease-in-out infinite; z-index: 2; } 
.p2-page__layer--6 { left: 0; bottom: -150rem; width: 100%; height: auto; animation: p2-cloud-float-6 6s ease-in-out infinite; z-index: 6; } 
.p2-page__layer--7 { left: 0; bottom: 0rem; width: 100%; height: auto; animation: p2-cloud-float-7 6.7s ease-in-out infinite; z-index: 6; } 

.p2-page__layer--8 { left: 36%; top: 29%; width: 150rem; height: auto; animation: p2-cloud-float-left 8s ease-in-out infinite; z-index: 6; } 
.p2-page__layer--9 { left: 55%; top: 12%; width: 120rem; height: auto; animation: p2-cloud-float-right 7.3s ease-in-out infinite; z-index: 4; } 
.p2-page__layer--10 { left: 25%; top: 64%; width: 164rem; height: auto; animation: p2-cloud-float-left 6.7s ease-in-out infinite; z-index: 4; } 
.p2-page__layer--11 { left: 71%; top: 72%; width: 182rem; height: auto; animation: p2-cloud-float-right 6s ease-in-out infinite; z-index: 4; } 
.p2-page__layer--12 { left: 41%; top: 4%; width: 100rem; height: auto; animation: p2-cloud-float-left 8s ease-in-out infinite; z-index: 4; } 
.p2-page__layer--13 { left: 78%; top: 9%; width: 120rem; height: auto; animation: p2-cloud-float-right 7.3s ease-in-out infinite; z-index: 4; } 
.p2-page__layer--14 { left: 28%; top: 52%; width: 120rem; height: auto; animation: p2-cloud-float-left 6s ease-in-out infinite; z-index: 4; } 



@keyframes p2-cloud-float-5 { 0%, 100% { transform: translate(0, 0); } 
 33% { transform: translate(-14rem, 30rem); } 
 66% { transform: translate(14rem, 40rem); } 
}
@keyframes p2-cloud-float-6 { 0%, 100% { transform: translate(0, 0); } 
 33% { transform: translate(30rem, -14rem); } 
 66% { transform: translate(30rem, -14rem); } 
} 
@keyframes p2-cloud-float-7 { 0%, 100% { transform: translate(0, 0); } 
50% { transform: translate(7rem, 16rem); } 
}

@keyframes p2-cloud-float-left { 0%, 100% { transform: translate(0, 0); } 
50% { transform: translate(17rem, 0); } 
}
@keyframes p2-cloud-float-right { 0%, 100% { transform: translate(0, 0); } 
50% { transform: translate(-17rem, 0); } 
}



/* 3D 두루마리 오버레이 — 캐릭터는 대문 전경보다 위 */
.scroll-roll { position: fixed; inset: 0; z-index: 12; pointer-events: none; } 
.scroll-roll canvas { display: block; width: 100%; height: 100%; } 
.scroll-roll__actor { position: fixed; left: 0; top: 0; z-index: 13; width: 160rem; height: 150rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) translate(-50%, -100%); will-change: transform, opacity; } 
.scroll-roll__actor.is-visible { opacity: 1; visibility: visible; }
/* 대문 등장 주술 시전 시 좌우 반전 (스크롤 전환 때의 시전은 정방향 유지) */
.scroll-roll__actor.is-flipped { transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) translate(-50%, -100%) scaleX(-1); }
.scroll-roll__character { position: absolute; left: 50%; bottom: 0; z-index: 0; display: block; height: 150rem; width: auto; max-width: none; transform: translateX(-50%); opacity: 0; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; } 
.scroll-roll__character.is-front { z-index: 1; opacity: 1; } 
body.is-main-page { overflow-y: hidden; overflow-x: auto; } 
body.is-main-page.has-horizontal-scroll { overflow-x: scroll; } 
body.is-main-page .story-stage { height: 1080rem; } 


.p2-page__object { position: absolute; z-index: 10; } 
.p2-page__object--obje { width: 150rem; left: 58rem; } 

.p2-page__object--wrap { position: absolute; left: 49%; bottom: 50rem; transform: translateX(-50%); width: 380rem;; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; } 
.p2-page__object--wrap img { width: 100%; } 
.p2-page__object--wrap .p2-page__object--date { } 
.p2-page__object--wrap .p2-page__object--button { cursor: pointer; } 
.p2-page__object--wrap > a { margin: 20rem 0 0; display: block; width: 100%; transition: filter 0.2s ease; }
.p2-page__object--wrap > a:hover { filter: brightness(1.08); }

/* ===== 대문 ===== */
.main-page { display: none; position: absolute; inset: 0; z-index: 5; overflow: hidden; } 
body.is-main-page .site-page[data-page-id="home"] .main-page { display: block; } 

.main-page__ink { position: absolute; inset: 0; overflow: hidden; z-index: 1; left: 10px; isolation: isolate; } 
.main-page__ink-drop { position: absolute; inset: 0; -webkit-mask-image: url(../img/ink_mask.webp); mask-image: url(../img/ink_mask.webp); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 52% 48%; mask-position: 52% 48%; -webkit-mask-size: 0% auto; mask-size: 0% auto; mask-mode: alpha; will-change: -webkit-mask-size, mask-size; } 
.main-page.is-ink-complete .main-page__ink-drop { -webkit-mask-image: none; mask-image: none; } 

.main-page__layer { position: absolute; inset: 0; } 
.main-page__layer--1 { width: 100%; height: 100%; object-fit: cover; }
.main-page__layer--1-light {
 width: 100%;
 height: 100%;
 object-fit: cover;
 pointer-events: none;
 mix-blend-mode: lighten;
 -webkit-mix-blend-mode: lighten;
}
/*
 라이팅 — JS 랜덤 제어 (startMainLighting)
 opacity만 사용, 켜짐/꺼짐 속도는 JS에서 통일
*/
.main-page__layer--1-light-01,
.main-page__layer--1-light-02,
.main-page__layer--1-light-03 {
 opacity: 0;
}
.main-page__layer--2 { width: 100%; top: 60%; left: 48%; transform: translate(-50%, -50%); animation: main-cloud-sway 20s ease-in-out infinite; } 
.main-page__layer--3 { width: 100%; height: 100%; object-fit: cover; } 
.main-page__layer--4,
.main-page__layer--5 { width: 100%; height: auto; left: 50%; pointer-events: none; mix-blend-mode: screen; } 
.main-page__layer--4 { top: 30%; transform: translate(-50%, -50%); animation: main-star-twinkle-a 4.8s ease-in-out infinite; } 
.main-page__layer--5 { top: 40%; transform: translate(-50%, -50%); animation: main-star-twinkle-b 6.4s ease-in-out infinite; animation-delay: -2.4s; } 

/* 타이틀 주변에 떠다니는 반짝이는 입자 (유성우 대체) */
.title-particle-box { position: absolute; top: -10rem; left: 50%; width: 80%; height: clamp(200rem, 15.63vw, 300rem); transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible; --particle-white: #ffffff; --particle-blue: rgba(178, 168, 255, 0.9); }
.title-particle { position: absolute; border-radius: 50%; background: var(--particle-white); box-shadow: 0 0 6rem rgba(255, 255, 255, 0.95), 0 0 10rem var(--particle-blue); animation: titleParticleFloat var(--p-duration) ease-in-out var(--p-delay) infinite; }

@keyframes titleParticleFloat {
 0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
 20% { opacity: var(--p-opacity); transform: translate(calc(var(--drift-x) * 0.2), calc(var(--drift-y) * 0.2)) scale(1.2); }
 80% { opacity: var(--p-opacity); transform: translate(calc(var(--drift-x) * 0.8), calc(var(--drift-y) * 0.8)) scale(1); }
 100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) scale(0.5); }
 }

.main-page__inner { position: absolute; inset: 0; left: 20px; z-index: 5; text-align: center; display: flex; flex-direction: column; align-items: center; } 

.main-page__title-top { opacity: 0; pointer-events: none; will-change: transform, opacity, filter; } 
.main-page__play,
.main-page__title-bottom-link { opacity: 0; pointer-events: none; will-change: opacity; } 

body.is-home-revealed .main-page__title-top,
body.is-home-revealed .main-page__play,
body.is-home-revealed .main-page__title-bottom-link { pointer-events: auto; } 

@keyframes main-cloud-sway { 0%, 100% { transform: translate(-50%, -50%) translateX(0); }
 50% { transform: translate(-50%, -50%) translateX(2%); } 
 }
@keyframes main-star-twinkle-a { 0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); } 
 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } 
 65% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.01); } 
 }
@keyframes main-star-twinkle-b { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.01); } 
 25% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 
 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } 
 75% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.01); } 
 }
@keyframes titleReveal {
 0% { opacity: 0; transform: scale(0.97); filter: blur(20rem) brightness(1.5); } 
 50% { opacity: 0.8; transform: scale(0.985); filter: blur(5rem) brightness(1.2); } 
 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } 
 }

@keyframes fadeReveal { 
 0% { opacity: 0; } 
 100% { opacity: 1; } 
 }

.main-page__title-top { width: 435rem; height: auto; margin-top: 30rem; } 

.main-page__play { width: 200rem; height: auto; margin-top: -30rem; } 
.main-page__play > a { position: relative; display: block; } 
.main-page__play > a > img:nth-child(1) { width: 100%; } 
/* Safari: translate(%)+rotate 키프레임이 깨져 구름이 이탈함 → 정렬은 inset, 애니는 rotate만 */
.main-page__play > a > img:nth-child(2) {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: contain;
 transform-origin: center center;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 animation: play-ring-spin 10s linear infinite;
}

@keyframes play-ring-spin { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(-360deg); } 
 }

@media (prefers-reduced-motion: reduce){
 .main-page__play > a > img:nth-child(2) { animation: none; } 

 .main-page__layer--1-light { animation: none; filter: none; }
 .main-page__layer--1-light-01,
 .main-page__layer--1-light-02 { opacity: 0; }
 .main-page__layer--1-light-03 { opacity: 0.55; }

 .main-page__layer--2,
 .main-page__layer--4,
 .main-page__layer--5,
 .title-particle { animation: none; opacity: 0; }

 .p5-page__dot,
 .p5-page__dot::after { animation: none; }

 /* .p2-page__layer--3,
 .p2-page__layer--5 { animation: none; }  */

 .hand-scroll > .gnb > ul,
 .hand-scroll__topnav-btn--youtube,
 .hand-scroll__topnav-btn--channel,
 .hand-scroll__topnav-btn--instagram,
 .hand-scroll__topnav-btn--community,
 .hand-scroll__topnav-btn--sound,
 .main-page__title-top,
 .main-page__play,
 .main-page__title-bottom-link { animation: none; opacity: 1; filter: none; transform: none; } 
}

.main-page__title-bottom-link { display: block; width: 668rem; cursor: pointer; margin: 125rem 0 0; } 
.main-page__title-bottom { width: 100%; height: auto; } 


/* ===== 이벤트 ===== */
.p3-page { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } 
.p3-page__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; pointer-events: none; } 
.p3-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 10; pointer-events: none; } 
/*
  레이아웃: 왼쪽 큰 카드(1135) + 오른쪽 상·하(406 ×2, 갭 7)
  — 원본 1/2(1013.5 / 362.5) 대비 약 12% 확대하여 FHD 텍스트 번짐 완화
  중앙 정렬은 transform 대신 flex (서브픽셀 블러 완화)
*/
.p3-page__body { position: relative; z-index: 5; display: flex; align-items: flex-start; justify-content: center; gap: 14rem; } 
.p3-page__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28rem; margin: 0 auto; width: 243rem; height: 13rem; background: url(../img/p3/text.png) no-repeat center / contain; pointer-events: none; } 
.p3-page__card { position: relative; flex: 0 0 auto; } 
.p3-page__card--main { width: 1135rem; } 
.p3-page__side { display: flex; flex-direction: column; gap: 7rem; width: 408rem; flex: 0 0 408rem; } 
.p3-page__card--side { width: 100%; } 
.p3-page__card-img {
 display: block;
 width: 100%;
 height: auto;
} 
/* 1번 카드 — 기본 보상(좌측 칼럼) 갓 4종: 1·2 / 3·4 번갈아 표시 */
.p3-page__chars { position: absolute; left: 2.5%; top: 19%; width: 17.5%; height: 49%; z-index: 2; pointer-events: none; } 
.p3-page__chars-pair { position: absolute; inset: 0; opacity: 0; } 
.p3-page__chars-pair--a { animation: p3-char-pair-a 5.6s ease-in-out infinite; } 
.p3-page__chars-pair--b { animation: p3-char-pair-b 5.6s ease-in-out infinite; } 
@keyframes p3-char-pair-a {
 0%, 42% { opacity: 1; }
 50%, 92% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes p3-char-pair-b {
 0%, 42% { opacity: 0; }
 50%, 92% { opacity: 1; }
 100% { opacity: 0; }
}
.p3-page__char { position: absolute; display: block; width: auto; height: auto; transform: translateX(-50%); image-rendering: pixelated; image-rendering: crisp-edges; } 
/* 이미지처럼 대각선 배치 — 뒤(위·왼쪽) / 앞(아래·오른쪽) */
.p3-page__char--back { left: 31%; bottom: 37%; width: 100rem; z-index: 1; } 
.p3-page__char--front { left: 65%; bottom: 10%; width: 105rem; z-index: 2; } 
/* 초대 보상 — 남(c5)·여(c6) + 표창(dagger) */
.p3-page__chars-2 { position: absolute; left: 20.5%; top: 19%; width: 17.5%; height: 59%; z-index: 2; pointer-events: none; } 
.p3-page__chars-2 .p3-page__char--back { left: 40%; bottom: 48%; width: 165rem; z-index: 2; } 
.p3-page__chars-2 .p3-page__char--front { left: 69%; bottom: 16%; width: 180rem; z-index: 3; } 
.p3-page__chars-2-fx { position: absolute; display: block; width: 110rem; height: auto; pointer-events: none; z-index: 1; transform: translate(-50%, -50%); } 
.p3-page__chars-2-fx--1 { left: 42%; top: 34%; } 
.p3-page__chars-2-fx--2 { left: 72%; top: 60%; } 
@media (prefers-reduced-motion: reduce) {
 .p3-page__chars-pair--a { animation: none; opacity: 1; }
 .p3-page__chars-pair--b { animation: none; opacity: 0; }
} 

/* 기본 보상 스티커 — 캐릭터 앞 */
.p3-page__sticker { position: absolute; left: 42%; bottom: 7%; width: 56rem; height: auto; transform: translateX(-50%); z-index: 5; pointer-events: none; } 
/* 1번: 참여 버튼 — 카드 하단 중앙에 걸침 */
.p3-page__btn { position: absolute; left: 50%; bottom: 30rem; transform: translateX(-50%); width: 260rem; display: block; cursor: pointer; transition: filter 0.2s ease; z-index: 3; } 
.p3-page__btn img { display: block; width: 100%; height: auto; } 
.p3-page__btn:hover { filter: brightness(1.08); } 
.p3-page__btn-group { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 100%; z-index: 3; } 
.p3-page__btn-group--store { bottom: 20rem; gap: 6rem; } 
.p3-page__btn-group--sns { bottom: 0rem; gap: 0; } 
.p3-page__btn--sm { position: relative; left: auto; bottom: auto; transform: none; width: 100%;} 
.p3-page__btn--sm:nth-child(1) {transform: translateX(10rem);}
.p3-page__btn--sm:nth-child(2) {transform: translateX(-10rem);}
.p3-page__btn--sm img {width: 104%;}
.p3-page__btn--store { position: relative; left: auto; bottom: auto; transform: none; width: 160rem; } 
.p3-page__desc { position: absolute; left: calc(50% + 30rem); bottom: 55rem; transform: translateX(-50%); width: 1314rem; height: auto; z-index: 6; pointer-events: none; } 

/* ===== 2.5D 그래픽 ===== */
.p4-page { position: absolute; inset: 0; overflow: hidden; background: #f3f0ea; isolation: isolate; -webkit-transform-style: flat; transform-style: flat; } 

.p4-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 10; pointer-events: none; } 

.p4-page__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 2; pointer-events: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 

.p4-page__viewport { position: absolute; left: 0; top: 0rem; width: 100%; height: 100%; overflow: hidden; z-index: 1; cursor: grab; touch-action: none; user-select: none; -webkit-transform: none; transform: none; } 

.p4-page__viewport.is-dragging { cursor: grabbing; } 

.p4-page__content-track { position: absolute; inset: 0; } 
.p4-page__viewport.is-dragging .p4-page__content-track { will-change: transform; } 

.p4-page__content { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; } 

/* 프레임(p4-page__bg z:2) 위 · 타이틀(z:10) 아래 — viewport 밖에 둬야 스택이 뚫림 */
.p4-page__ui {
 position: absolute;
 top: 50%;
 left: 38%;
 transform: translate(-50%, -50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 18rem;
 width: 520rem;
 pointer-events: none;
 z-index: 3;
 transition: opacity 0.35s ease, visibility 0.35s ease;
}

.p4-page__ui img { display: block; width: 72rem; height: auto; }
.p4-page__ui p {
   margin: 0;
   color: #efefef;
   font-family: 'Noto Sans KR', sans-serif;
   font-size: 22rem;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: -0.02em;
   text-align: center;
   word-break: keep-all;
   text-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.55);
}
.p4-page__viewport.has-interacted ~ .p4-page__ui { opacity: 0; visibility: hidden; } 

/* ===== 세계관 ===== */
.p5-page { position: absolute; inset: 0; overflow: hidden; background: #f3f0ea; } 

.p5-page__visual { position: absolute; inset: 0; width: 60%; z-index: 1; } 

.p5-page__slides { position: absolute; inset: 0; } 

.p5-page__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } 

.p5-page__slide.is-active { opacity: 1; visibility: visible; } 

.p5-page__slide figure { width: 100%; height: 100%; } 
.p5-page__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.p5-page__slide video { transform: translateX(-30%); width: 140%; height: 100%; object-fit: cover; object-position: center; background: transparent; } 
/* Firefox only: 알파 미지원/미합성 시 검정 매트를 배경에 녹여 영상이 보이게 */
@supports (-moz-appearance: none) {
 .p5-page__slide video { mix-blend-mode: screen; }
} 

.p5-page__title { position: absolute; z-index: 10; width: 150rem; left: 60rem; height: auto; pointer-events: none; } 

.p5-page__pagination { position: absolute; left: 50%; transform: translateX(-50%); bottom: 52rem; z-index: 3; } 

.p5-page__dots { display: flex; align-items: center; gap: 0; } 

.p5-page__dot-sep { display: flex; align-items: center; flex-shrink: 0; } 

.p5-page__dot-sep img { display: block; width: 32rem; height: auto; } 

.p5-page__dot { width: 22rem; height: 22rem; padding: 0; border: 0; background: url(../img/p5/dot.png) no-repeat center center; background-size: contain; cursor: pointer; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 6rem rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.3); transition: background-color 0.2s ease, box-shadow 0.2s ease; } 

.p5-page__dot:hover { background-color: rgba(0, 0, 0, 0.45); }

.p5-page__dot.is-active { width: 35rem; height: 35rem; background-image: url(../img/p5/dot_on.png); background-color: transparent; box-shadow: 0 0 8rem rgba(255, 255, 255, 0.6); }

/* 클릭을 유도하는 반짝임 — 현재 선택된 점 제외. 점 자체가 커졌다 작아지고,
   바깥으로 링이 퍼지며 사라지는 두 겹 효과로 눈에 확 띄게 한다 */
.p5-page__dots li:nth-child(3) { --dot-delay: 0.25s; }
.p5-page__dots li:nth-child(5) { --dot-delay: 0.5s; }
.p5-page__dots li:nth-child(7) { --dot-delay: 0.75s; }
.p5-page__dots li:nth-child(9) { --dot-delay: 1s; }
.p5-page__dots li:nth-child(11) { --dot-delay: 1.25s; }
.p5-page__dots li:nth-child(13) { --dot-delay: 1.5s; }

.p5-page__dot:not(.is-active) { position: relative; animation: p5DotInvite 1.7s ease-in-out var(--dot-delay, 0s) infinite; }
.p5-page__dot:not(.is-active)::after {
 content: '';
 position: absolute;
 inset: -2rem;
 border-radius: 50%;
 border: 2rem solid rgba(255, 255, 255, 0.9);
 opacity: 0;
 pointer-events: none;
 animation: p5DotRing 1.7s ease-out var(--dot-delay, 0s) infinite;
 }
.p5-page__dot:not(.is-active):hover,
.p5-page__dot:not(.is-active):hover::after { animation-play-state: paused; }

@keyframes p5DotInvite {
 0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 6rem rgba(0, 0, 0, 0.5); opacity: 0.85; }
 35% { transform: scale(1.32); box-shadow: 0 0 0 1px rgba(255, 255, 255, 1), 0 0 18rem rgba(255, 255, 255, 0.9); opacity: 1; }
 70% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 8rem rgba(255, 255, 255, 0.4); opacity: 0.9; }
 }

@keyframes p5DotRing {
 0% { transform: scale(0.8); opacity: 0; }
 30% { opacity: 0.85; }
 100% { transform: scale(2.1); opacity: 0; }
 }

.p5-page__content { position: absolute; top: 0; right: 0; width: 48%; height: 100%; z-index: 2; display: flex; justify-content: center; padding: 8% 40rem 60rem 40rem; box-sizing: border-box; } 

.p5-page__content-slides { position: relative; width: 100%; } 

.p5-page__content-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } 

.p5-page__content-slide.is-active { opacity: 1; visibility: visible; } 

.p5-page__num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 85rem; height: 85rem; min-width: 85rem; min-height: 85rem; background: url(../img/p5/muck.png) no-repeat center -3px / contain; color: #fff; font-family: 'Cheongdo', sans-serif; font-size: 47rem; line-height: 1.2; font-weight: 700; margin-bottom: 28rem; } 

.p5-page__heading { font-family: 'General Kim Jwajin', serif; font-size: 50rem; font-weight: 700; line-height: 1.35; color: #1a1a1a; margin-bottom: 36rem; letter-spacing: -0.02em; } 

.p5-page__text { font-family: 'Ynam News', sans-serif; font-size: 22rem; font-weight: 300; line-height: 1.85; color: #333; letter-spacing: -0.01em; } 


/* ===== 인물도감 ===== */
.p6-page { position: absolute; inset: 0; overflow: hidden; } 

.p6-page__scene { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; } 

.p6-page__scene-core { position: absolute; inset: 0; z-index: 1; } 

.p6-page__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } 

.p6-page__radial-blur { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; } 

.p6-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 10; pointer-events: none; } 

.p6-page__stage { position: absolute; inset: 0; z-index: 2; } 

.p6-page__characters { position: absolute; inset: 0; } 

.p6-page.is-character-animating .p6-page__character,
.p6-page.is-character-animating .p6-page__light,
.p6-page.is-character-animating .p6-page__desc,
.p6-page.is-character-animating .p6-page__char-desc { transition: none !important; } 

/* 버튼 크기는 기본 이미지(p6-page__char)가 담당. 선택 시에는 _active를 같은 자리에 겹쳐 보여 줌 */
.p6-page__character { position: absolute; left: var(--x); bottom: var(--b); height: var(--h); z-index: var(--z); padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(-50%); transition: filter 0.5s ease, opacity 0.5s ease; transform-origin: center bottom; } 
.p6-page__character.is-flipped { transform: translateX(-50%) scaleX(-1); } 

.p6-page__character img { display: block; height: 100%; width: auto; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; } 

/* 호버 글로우는 미선택 기본 스프라이트에만 — 선택(_active) 상태/전환 중 필터가 겹치면 깜빡임 */
.p6-page__character:not(.is-selected):hover .p6-page__char { filter: drop-shadow(0 0 6rem rgba(255, 244, 214, 0.85)); } 

/* 선택 강조는 _active 스프라이트로 담당. 버튼 brightness는 쓰지 않아 교체 순간 이중 강조/깜빡임 방지 */
.p6-page.has-selection .p6-page__character:not(.is-selected) { filter: brightness(0.6) saturate(0.75); } 

/* 기본/액티브 두 장을 미리 올려두고 opacity만 즉시 토글(transition 없음) → src 교체 로딩 깜빡임 없음.
   기본 이미지는 레이아웃용으로 자리에 남기고 투명만 처리해 버튼 크기·발밑 위치 고정.
   액티브는 절반 해상도 별도 포즈라 bottom-center로 겹치고 --ah(2x 픽셀 밀도 보정 높이)로 시각 크기 유지 */
.p6-page__character .p6-page__char { position: relative; z-index: 0; } 
.p6-page__character .p6-page__char-active { position: absolute; left: 50%; bottom: 0; z-index: 1; height: var(--ah, 100%); width: auto; max-width: none; transform: translateX(-50%); opacity: 0; visibility: hidden; } 
.p6-page__character.is-selected .p6-page__char-active { opacity: 1; visibility: visible; } 
.p6-page__character.is-selected .p6-page__char { opacity: 0; } 

.p6-page__light { position: absolute; bottom: 18%; left: 50%; width: 520rem; height: auto; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; pointer-events: none; z-index: 1; mix-blend-mode: screen; } 

.p6-page.has-selection .p6-page__light { opacity: 0.85; visibility: visible; } 

.p6-page__desc { position: absolute; left: calc(50% + 28rem); bottom: 250rem; transform: translateX(-50%); width: 318rem; height: auto; display: block; z-index: 15; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; } 

.p6-page.has-selection .p6-page__desc { opacity: 0; visibility: hidden; } 

.p6-page__char-desc { position: absolute; left: 50%; bottom: 72rem; transform: translateX(-50%); z-index: 16; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; display: flex; align-items: flex-end; justify-content: center; } 

.p6-page__char-desc img { display: block; width: 620rem; height: auto; vertical-align: bottom; } 

.p6-page.has-selection .p6-page__char-desc { opacity: 1; visibility: visible; } 

.p6-page__zoomfx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 45%), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.78) 100%); } 


/* ===== 도깨비 도감 ===== */
.p7-page { position: absolute; inset: 0; overflow: hidden; } 

.p7-page__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.p7-page__ground {position: absolute; bottom: -140px; left: 50%; transform: translateX(-50%); z-index: 2; width: 100%; height: 290px; background-image: url(../img/p7/test/p7_ground.webp);}

/* 손전등 조명 — 어두운 오버레이에 구멍 3개를 뚫고 JS로 좌표를 떠돌게 한다
   (좌표 변수는 .p7-page에 두어 spotlight/glow가 함께 상속받는다) */
.p7-page {
 --sx1: 18%;
 --sy1: 28%;
 --sr1: 240rem;
 --sx2: 82%;
 --sy2: 32%;
 --sr2: 220rem;
 --sx3: 50%;
 --sy3: 78%;
 --sr3: 200rem;
}
.p7-page__spotlight {
 position: absolute;
 inset: 0;
 z-index: 6;
 pointer-events: none;
 background: rgba(6, 2, 14, 0.28);
 contain: paint;
 transform: translateZ(0);
 -webkit-mask-image:
  radial-gradient(circle var(--sr1) at var(--sx1) var(--sy1), transparent 0%, transparent 55%, #000 88%),
  radial-gradient(circle var(--sr2) at var(--sx2) var(--sy2), transparent 0%, transparent 55%, #000 88%),
  radial-gradient(circle var(--sr3) at var(--sx3) var(--sy3), transparent 0%, transparent 55%, #000 88%);
 mask-image:
  radial-gradient(circle var(--sr1) at var(--sx1) var(--sy1), transparent 0%, transparent 55%, #000 88%),
  radial-gradient(circle var(--sr2) at var(--sx2) var(--sy2), transparent 0%, transparent 55%, #000 88%),
  radial-gradient(circle var(--sr3) at var(--sx3) var(--sy3), transparent 0%, transparent 55%, #000 88%);
 -webkit-mask-composite: source-in;
 mask-composite: intersect;
}
/* 빛 발광: 스포트라이트 구멍 위에 따뜻한 글로우를 겹쳐 빛 자체가 밝게 빛나 보이게 */
.p7-page__spotlight-glow {
 position: absolute;
 inset: 0;
 z-index: 6;
 pointer-events: none;
 mix-blend-mode: screen;
 contain: paint;
 transform: translateZ(0);
 background:
  radial-gradient(circle var(--sr1) at var(--sx1) var(--sy1), rgba(255, 238, 190, 0.4) 0%, rgba(255, 238, 190, 0.14) 45%, transparent 70%),
  radial-gradient(circle var(--sr2) at var(--sx2) var(--sy2), rgba(255, 238, 190, 0.4) 0%, rgba(255, 238, 190, 0.14) 45%, transparent 70%),
  radial-gradient(circle var(--sr3) at var(--sx3) var(--sy3), rgba(255, 238, 190, 0.4) 0%, rgba(255, 238, 190, 0.14) 45%, transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
 .p7-page__spotlight { opacity: 0.55; }
}

/* 가운데 고정 조명 — 검정+흰 이미지를 screen으로 합성 (검정은 사라지고 빛만 남음) */
.p7-page__center-light {
 position: absolute;
 left: 50%;
 top: 1%;
 width: 1000rem;
 height: auto;
 transform: translate(-50%, -50%);
 z-index: 7;
 pointer-events: none;
 mix-blend-mode: screen;
 -webkit-mix-blend-mode: screen;
}

.p7-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 15; pointer-events: none; }

.p7-page__object-left {position: absolute; bottom: -100px; left: -130px; width: 630rem; height: auto; z-index: 10;}
.p7-page__object-right  {position: absolute; bottom: -80px; right: -10px; width: 430rem; height: auto; z-index: 10;}

.p7-page__poster-area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1050rem; z-index: 5; display: flex; align-items: center; justify-content: center; overflow: hidden; } 

.p7-page__poster-swiper { overflow: hidden; } 

.p7-page__poster-swiper .swiper-slide { position: relative; z-index: 1; } 
.p7-page__poster-swiper .swiper-slide.swiper-slide-active {z-index: 10;} 

/* 이미지와 더보기 아이콘이 항상 같이 움직이도록 트랜스폼을 래퍼(.p7-page__poster-visual)에 건다 */
.p7-page__poster-visual { position: relative; transform: scale(0.8); transition: transform 0.35s ease; }
.p7-page__poster-visual img { pointer-events: none; }
.p7-page__poster-swiper .swiper-slide .p7-page__poster-visual img:first-child { transition: filter 0.35s ease; filter: brightness(0.5); }

.p7-page__poster-swiper .swiper-slide-prev .p7-page__poster-visual { transform: scale(0.8) translateX(22%); }

.p7-page__poster-swiper .swiper-slide-next .p7-page__poster-visual { transform: scale(0.8) translateX(-22%); }

.p7-page__poster-swiper .swiper-slide.swiper-slide-active { z-index: 3; }

.p7-page__poster-swiper .swiper-slide.swiper-slide-active .p7-page__poster-visual { transform: scale(1); }
.p7-page__poster-swiper .swiper-slide.swiper-slide-active .p7-page__poster-visual img:first-child { filter: brightness(1); }

.p7-page__poster-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: filter 0.2s ease; }

.p7-page__poster-btn img { width: 100%; pointer-events: none; }

/* 상세보기 클릭 유도 아이콘 — 벽보(활성/양옆 모두)마다 표시, 커졌다 작아짐 + 바깥으로 퍼지는 링으로 클릭을 유도한다 */
.p7-page__poster-more { position: absolute; top: 20%; right: 6%; width: 15%; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; }
.p7-page__poster-swiper .swiper-slide.swiper-slide-active .p7-page__poster-more { opacity: 1; visibility: visible; }
.p7-page__poster-more img { display: block; width: 100%; height: auto; pointer-events: none; animation: p7MoreInvite 1.7s ease-in-out infinite; }
.p7-page__poster-more::after {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 2rem solid rgba(255, 255, 255, 0.9);
 opacity: 0;
 pointer-events: none;
 animation: p7MoreRing 1.7s ease-out infinite;
 }
.p7-page__poster-btn:hover .p7-page__poster-more img,
.p7-page__poster-btn:hover .p7-page__poster-more::after { animation-play-state: paused; }

@keyframes p7MoreInvite {
 0%, 100% { transform: scale(1); opacity: 0.85; }
 35% { transform: scale(1.22); opacity: 1; }
 70% { transform: scale(1); opacity: 0.9; }
 }

@keyframes p7MoreRing {
 0% { transform: scale(0.8); opacity: 0; }
 30% { opacity: 0.8; }
 100% { transform: scale(1.9); opacity: 0; }
 }

@media (prefers-reduced-motion: reduce) {
 .p7-page__poster-more img,
 .p7-page__poster-more::after { animation: none; }
 }

.p7-page__arrow { position: absolute; top: 50%; z-index: 6; width: 100rem; height: 100rem; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(-50%); transition: filter 0.2s ease, opacity 0.2s ease; } 

.p7-page__arrow img { display: block; width: 100%; height: auto; } 

.p7-page__arrow--prev { left: 30rem; transform: translateY(-50%) scaleX(-1); } 

.p7-page__arrow--next { right: 30rem; transform: translateY(-50%); } 

.p7-page__arrow:hover { filter: brightness(1.08); } 

.p7-page__arrow:disabled { opacity: 0.35; cursor: default; } 

.p7-page.is-popup-open .p7-page__arrow { opacity: 0; visibility: hidden; pointer-events: none; } 

.p7-page__guard { position: absolute; height: auto; z-index: 10; pointer-events: none; } 
.p7-page__guard .guard { position: relative; z-index: 2; width: 100%; display: block; } 
.p7-page__guard--left { left: 40%; bottom: 93px; width: 180rem; transform: translateX(-50%); z-index: 101;} 
.p7-page__guard--right { left: 60%; bottom: 95px; width: 120rem; transform: translateX(-50%); z-index: 101;} 
.p7-page__guard.p7-page__guard--right .light { position: absolute; top: -33%; left: -64%; z-index: 1; width: 140%; max-width: none; background: transparent; border: 0; transform-origin: 55% 60%; mix-blend-mode: screen; -webkit-mix-blend-mode: screen; animation: p7-torch-flicker 2.8s ease-in-out infinite; } 
@keyframes p7-torch-flicker {
 0% { opacity: 0.78; transform: scale(0.97) translate(-1.8%, 0.2%); }
 14% { opacity: 0.96; transform: scale(1.03) translate(2.2%, -0.5%); }
 29% { opacity: 0.74; transform: scale(0.96) translate(-2.3%, 0.4%); }
 46% { opacity: 1; transform: scale(1.04) translate(2%, -0.3%); }
 63% { opacity: 0.8; transform: scale(0.98) translate(-1.6%, 0.4%); }
 80% { opacity: 0.92; transform: scale(1.02) translate(2.1%, -0.4%); }
 100% { opacity: 0.78; transform: scale(0.97) translate(-1.8%, 0.2%); }
 }
@media (prefers-reduced-motion: reduce){
 .p7-page__guard.p7-page__guard--right .light { animation: none; opacity: 0.85; } 
 }
.p7-page__popup { position: absolute; inset: 0; z-index: 102; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, visibility 0.28s ease; } 

.p7-page__popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; } 

.p7-page__popup-dim { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.45); cursor: pointer; display: none; } 

.p7-page__popup-panel { position: relative; width: 920rem; z-index: 1; } 

.p7-page__popup-swiper { width: 100%; overflow: hidden; } 

.p7-page__popup-swiper .swiper-slide img { display: block; width: 100%; height: auto; } 

.p7-page__popup-close { position: absolute; top: 18rem; right: 18rem; z-index: 3; width: 64rem; height: 64rem; padding: 0; border: 0; background: none; cursor: pointer; transition: filter 0.2s ease; } 

.p7-page__popup-close img { display: block; width: 100%; height: auto; } 

.p7-page__popup-close:hover { filter: brightness(1.08); } 

.p7-page__popup-arrow { position: absolute; top: 50%; z-index: 3; width: 100rem; height: 100rem; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(-50%); transition: filter 0.2s ease, opacity 0.2s ease; } 

.p7-page__popup-arrow img { display: block; width: 100%; height: auto; } 

.p7-page__popup-arrow--prev { left: -24rem; transform: translateY(-50%) scaleX(-1); } 
.p7-page__popup-arrow--next { right: -24rem; transform: translateY(-50%); } 

.p7-page__popup-arrow:hover { filter: brightness(1.08); } 

.p7-page__popup-arrow:disabled { opacity: 0.35; cursor: default; } 

.p7-page__popup-counter { position: absolute; left: 50%; bottom: 34rem; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6rem; font-family: 'Cheongdo', sans-serif; font-size: 24rem; font-weight: 700; color: #2f2418; letter-spacing: 0.04em; pointer-events: none; display: none; } 

.p7-page__popup-sep { opacity: 0.7; } 


/* ===== 웹툰 & 웹소설 ===== */
.p8-page { position: absolute; inset: 0; overflow: hidden; background: #ebe8e2 url(../img/p8/p8_bg.jpg) no-repeat center center; background-size: cover; } 

.p8-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 10; pointer-events: none; } 

.p8-page__desc { position: absolute; top: 68rem; left: 50%; transform: translateX(-50%); width: 640rem; height: auto; z-index: 10; pointer-events: none; } 

.p8-page__body { position: absolute; inset: 0; display: flex; align-items: end; justify-content: center; gap: 24rem; z-index: 2; } 

.p8-page__card { position: relative; flex: 0 0 796rem; width: 796rem; } 

.p8-page__card-img { display: block; width: 100%; height: auto; } 

.p8-page__btn { position: absolute; left: calc(50% + 30rem); bottom: 75rem; transform: translateX(-50%); width: 290rem; display: block; cursor: pointer; transition: filter 0.2s ease; } 

.p8-page__btn img { display: block; width: 100%; height: auto; } 

.p8-page__btn:hover { filter: brightness(1.06); } 

.p8-page__bi { position: absolute; left: calc(50% + 25rem); bottom: 72rem; transform: translateX(-50%); width: 189rem; height: auto; z-index: 5; pointer-events: none; } 


/* ===== 미디어 ===== */
/* 모바일처럼 위(메인 슬라이드)/아래(썸네일) 세로 스택 — .p9-page 자체는 다른 페이지들과 동일하게
   absolute로 site-page__content를 채우되, 내부는 flex-column으로 두 영역을 위아래로 나눈다 */
.p9-page { position: absolute; inset: 0; overflow: hidden; background: transparent; display: flex; flex-direction: column; }

.p9-page__title { position: absolute; top: 0; left: 58rem; width: 150rem; height: auto; z-index: 10; pointer-events: none; }

.p9-page__main { position: relative; flex: 1; min-height: 0; z-index: 1; background-color: #000;}

.p9-page__slides { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; user-select: none; }
.p9-page__slides:active { cursor: grabbing; }

.p9-page__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s ease; }

.p9-page__slide.is-active { opacity: 1; visibility: visible; }

.p9-page__slide img,
.p9-page__slide video { width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; -webkit-user-drag: none; }

/* 영상 슬라이드 — 배경 블러 꽉채우기 + 중앙 16:9 썸네일 */
.p9-page__slide[data-video] { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p9-page__slide[data-video] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(16px) brightness(0.4); transform: scale(1.1); pointer-events: none; -webkit-user-drag: none; }
.p9-page__slide[data-video] > .p9-video-inner { position: relative; z-index: 1; aspect-ratio: 16 / 9; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.p9-page__slide[data-video] > .p9-video-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; -webkit-user-drag: none; }
.p9-page__slide[data-video] > .p9-video-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.p9-page__slide .p9-page__play { pointer-events: auto; }

.p9-page__nav { position: absolute; left: 50%; bottom: 24rem; transform: translateX(-50%); display: flex; align-items: center; gap: 18rem; z-index: 3; }

.p9-page__arrow { width: 40rem; height: 40rem; padding: 0; border: 0; background: none; cursor: pointer; flex-shrink: 0; transition: filter 0.2s ease, transform 0.2s ease; } 

.p9-page__arrow img { display: block; width: 100%; height: 100%; } 

.p9-page__arrow--prev img { transform: scaleX(-1); } 

.p9-page__arrow:hover { filter: brightness(1.08); } 

.p9-page__arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; } 

.p9-page__counter { display: flex; align-items: center; gap: 6rem; margin: 0; font-family: 'Ynam News', sans-serif; font-size: 22rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.45); } 

.p9-page__sep { font-weight: 500; opacity: 0.85; } 

.p9-page__thumbs { position: relative; flex: 0 0 120rem; height: 120rem; z-index: 4; }

.p9-page__thumbs-track { display: flex; gap: 0; height: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; font-size: 0; } 

.p9-page__thumbs-track::-webkit-scrollbar { display: none; } 

.p9-page__thumb { position: relative; flex: 0 0 calc(100% / 9); width: calc(100% / 9); height: 100%; padding: 0; border: 0; box-sizing: border-box; background: none; cursor: pointer; overflow: hidden; transition: filter 0.25s ease; margin: 0; } 

.p9-page__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } 

.p9-page__thumb.is-active { z-index: 1; } 

.p9-page__thumb.is-active::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2rem #8b5fd6; pointer-events: none; z-index: 2; } 

.p9-page__thumb:not(.is-active)::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); pointer-events: none; z-index: 1; transition: background 0.25s ease; } 

.p9-page__thumb:not(.is-active):hover::after { background: rgba(0, 0, 0, 0.28); } 

.p9-page__play { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(20, 12, 36, 0.28); pointer-events: none; z-index: 2; }

.p9-page__play::before { content: ''; width: 42rem; height: 42rem; background: url(../img/p9/btn_video_play.png) no-repeat center center; background-size: contain; }

.p9-page__thumb.is-video .p9-page__play { display: flex; }

/* 메인 슬라이드 위 재생 버튼 — 썸네일용보다 크고, 실제 클릭 가능(팝업 오픈) */
.p9-page__slide .p9-page__play { display: flex; cursor: pointer; pointer-events: auto; transition: background 0.2s ease; }
.p9-page__slide .p9-page__play:hover { background: rgba(20, 12, 36, 0.42); }
.p9-page__slide .p9-page__play::before { width: 54rem; height: 54rem; }

/* 유튜브 팝업 — fixed 풀스크린 오버레이라 story-stage의 rem 스케일이 아니라 실제 뷰포트 px/vw 기준으로 둔다
   (video-controls 등 기존 fixed 오버레이들과 동일한 관례) */
.youtube-popup { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: clamp(48rem, 6vw, 80rem) clamp(16rem, 3vw, 40rem); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.youtube-popup.is-active { opacity: 1; visibility: visible; }
.youtube-popup__backdrop { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.75); cursor: pointer; }
.youtube-popup__dialog { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: clamp(16rem, 1.25vw, 24rem); width: min(calc(1280rem + 56rem), 100%); max-width: 100%; }
.youtube-popup__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32rem; height: 32rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.youtube-popup__close-icon { display: block; width: 28rem; height: 28rem; object-fit: contain; opacity: 0.882; transition: opacity 0.2s ease; }
.youtube-popup__close:hover .youtube-popup__close-icon { opacity: 1; }
.youtube-popup__player { flex: 1; min-width: 0; max-width: 1280px; aspect-ratio: 16 / 9; background: #000; }
.youtube-popup__player iframe { display: block; width: 100%; height: 100%; border: 0; }


/* ===== 푸터 ===== */
.p10-page { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; background: #0f0819; } 

.p10-page__banner { flex: 0 0 68%; width: 100%; overflow: hidden; } 

.p10-page__banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } 

.p10-page__footer { position: relative; flex: 1; min-height: 0; padding: 34rem 88rem 30rem; color: rgba(255, 255, 255, 0.72); font-family: 'Noto Sans KR', sans-serif; font-size: 14rem; font-weight: 300; line-height: 1.7; } 

.p10-page__brands { display: flex; align-items: center; gap: 28rem; margin-bottom: 22rem; font-size: 0; } 

.p10-page__brands img { } 


.p10-page__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10rem 0; margin-bottom: 18rem; font-size: 15rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); } 

.p10-page__links a { color: inherit; transition: color 0.2s ease; } 

.p10-page__links a:hover { color: #fff; } 

.p10-page__links a.is-emphasis { font-weight: 700; color: #fff; } 

.p10-page__link-sep { margin: 0 12rem; color: rgba(255, 255, 255, 0.35); font-weight: 300; } 

.p10-page__info { margin-bottom: 14rem; } 

.p10-page__info p { margin: 0; } 

.p10-page__info a { color: inherit; text-decoration: underline; text-underline-offset: 2rem; }
.p10-page__info a[x-apple-data-detectors],
.p10-page__footer a[x-apple-data-detectors] {
 color: inherit !important;
 text-decoration: none !important;
 background-color: transparent !important;
 border: 0 !important;
} 

.p10-page__copyright { margin: 0; font-size: 13rem; color: rgba(255, 255, 255, 0.45); } 

.p10-page__scroll-hint { position: absolute; right: 58rem; bottom: 24rem; display: flex; flex-direction: column; align-items: center; gap: 8rem; margin: 0; font-size: 12rem; font-weight: 500; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55); pointer-events: none; } 

.p10-page__scroll-arrow { display: block; width: 10rem; height: 10rem; border-right: 2rem solid currentColor; border-bottom: 2rem solid currentColor; transform: rotate(45deg); animation: p10-scroll-bounce 1.6s ease-in-out infinite; } 

@keyframes p10-scroll-bounce { 0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.55; } 
 50% { transform: rotate(45deg) translateY(6rem); opacity: 1; } 
 }

@media (prefers-reduced-motion: reduce){
 .p10-page__scroll-arrow { animation: none; }
 }

/* 비활성 페이지 무한 애니 정지 — 가로 트랙에 남아 있어도 GPU 부하 차단 */
body:not([data-page="home"]) .main-page__layer--1-light,
body:not([data-page="home"]) .main-page__layer--2,
body:not([data-page="home"]) .main-page__layer--4,
body:not([data-page="home"]) .main-page__layer--5,
body:not([data-page="home"]) .title-particle,
body:not([data-page="home"]) .main-page__play > a > img:nth-child(2) {
 animation-play-state: paused;
}
body:not([data-page="preregister"]) .p2-page__layer--5,
body:not([data-page="preregister"]) .p2-page__layer--6,
body:not([data-page="preregister"]) .p2-page__layer--7,
body:not([data-page="preregister"]) .p2-page__layer--8,
body:not([data-page="preregister"]) .p2-page__layer--9,
body:not([data-page="preregister"]) .p2-page__layer--10,
body:not([data-page="preregister"]) .p2-page__layer--11,
body:not([data-page="preregister"]) .p2-page__layer--12,
body:not([data-page="preregister"]) .p2-page__layer--13,
body:not([data-page="preregister"]) .p2-page__layer--14 {
 animation-play-state: paused;
}
body:not([data-page="worldview"]) .p5-page__dot:not(.is-active),
body:not([data-page="worldview"]) .p5-page__dot:not(.is-active)::after {
 animation-play-state: paused;
}
body:not([data-page="dokkaebi"]) .p7-page__guard.p7-page__guard--right .light,
body:not([data-page="dokkaebi"]) .p7-page__poster-more img,
body:not([data-page="dokkaebi"]) .p7-page__poster-more::after {
 animation-play-state: paused;
}
body:not([data-page="event"]) .p3-page__chars-pair {
 animation-play-state: paused;
}