@charset "UTF-8";

/* ==========================================================================
   OUTERPLANE 사전예약 - 프론트 공통 스타일

   구성: 원페이지(one-page). 섹션 하나가 화면 하나를 채우고 스크롤 스냅으로 넘어간다.
   모바일 우선(mobile first). 브레이크포인트는 640 / 1024 두 개만 쓴다.
   ========================================================================== */

:root {
    --color-bg: #000;
    --color-surface: #161a2b;
    --color-line: #2a3048;
    --color-text: #f2f4f8;
    --color-muted: #94a0d2;
    --color-accent: #5b7cfa;
    --color-accent-hover: #7590ff;

    --font-base: 'Pretendard Variable', 'Pretendard', "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --container: 100%;
    --header-h: 60px;
    /* 모바일 하단 섹션 네비 높이. calc() 안에서 쓰이므로 0 이어도 단위를 붙여야 한다
       (단위 없는 0 이면 calc(0 + 24px) 가 무효가 되어 .page 의 padding 이 통째로 죽는다) */
    --nav-h: 0px;

    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 40px;

    --radius: 10px;

    /* 모바일에서 햄버거/닫기 버튼을 화면 우측에서 얼마나 띄울지 */
    --edge-gap: 20px;
}

/*
   사이트 전체 폰트는 Pretendard 로 통일한다.
   다만 Pretendard 에는 가나/주음부호/번체자 전용 글자가 없어서,
   일본어·번체중문 페이지는 해당 글자만 자국 폰트로 떨어지도록 뒤에 넣어둔다.
*/
.lang-kr { --font-base: 'Pretendard Variable', 'Pretendard', "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.lang-en { --font-base: 'Pretendard Variable', 'Pretendard', "Helvetica Neue", Arial, sans-serif; }
.lang-jp { --font-base: 'Pretendard Variable', 'Pretendard', "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; }
.lang-tw { --font-base: 'Pretendard Variable', 'Pretendard', "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; }

/* --------------------------------------------------------- reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /*
       PC 는 자석 스크롤을 쓰지 않는다.
       모바일만 아래 (max-width: 1023px) 블록에서 proximity 로 켠다.
    */
    scroll-snap-type: none;
}

body {
    margin: 0;
    /*background: var(--color-bg);*/
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.7;
    word-break: keep-all;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* input/select/textarea 는 폰트를 상속받지 않아 따로 지정한다 */
input,
select,
textarea {
    font-family: inherit;
}
h1, h2, h3, p { margin: 0; }

/*
   포커스 링: 마우스/터치로 눌렀을 때는 감추고 키보드로 이동했을 때만 보여준다.
   (햄버거를 누르면 닫기 버튼에 포커스를 옮기는데, 그때 기본 링이 크게 드러나 보인다)
*/
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.event-none{pointer-events: none;}
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* --------------------------------------------------------- 원페이지 스크롤

   .page 하나가 한 화면. 100dvh 를 쓰면 모바일 브라우저 주소창이 접히고 펼쳐질 때
   화면이 튀지 않는다(미지원 브라우저는 위의 100vh 로 떨어진다).
   ------------------------------------------------------------------------ */

.page {
    position: relative;
    /*
       배경 아트와 내용을 같은 그리드 칸에 겹친다.

       칸 높이는 둘 중 큰 쪽이 정한다. 배경 이미지를 흐름 안에 원본 비율로 두므로
       보통은 이미지가 섹션 높이를 정하고, 내용이 이미지보다 길어지는 섹션에서는
       섹션이 내용에 맞춰 늘어난다(내용이 잘리지 않는다).

       정렬과 헤더 여백은 .page-inner 로 옮겼다.
    */
    display: grid;
    grid-template-areas: "stack";
    /*
       칸 폭을 화면 폭으로 못 박는다.
       기본값(auto)이면 칸이 가장 넓은 자식에 맞춰 늘어나, 원본 폭을 유지시킨 배경
       이미지가 섹션을 화면보다 넓게 벌려 버린다(내용도 같이 밀린다).
    */
    grid-template-columns: minmax(0, 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

.page-inner {
    grid-area: stack;
    position: relative;
    z-index: 1;
    width: 100%;

    /*
       칸 높이를 그대로 받는다(stretch).
       안쪽 박스들이 height/max-height 를 % 로 쓰므로 기준 높이가 확정되어 있어야 한다.
    */
    align-self: stretch;

    /*
       .page 가 하던 세로 가운데 정렬을 여기서 한다.
       safe center: 내용이 칸보다 길어지면 가운데 정렬을 포기하고 위쪽부터 보여준다.
       (그냥 center 면 넘친 만큼 위로 밀려나 고정 헤더에 가려진다)
    */
    display: flex;
    flex-direction: column;
    justify-content: safe center;

    /* 헤더는 화면 위에 겹치므로 그만큼 안쪽 여백을 준다 */
    padding: var(--header-h) 0 var(--space-md);

    text-align: center;
}

.page-head {
    margin-bottom: var(--space-lg);
}

.page-title {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.page-lead {
    margin-top: var(--space-sm);
    color: var(--color-muted);
    font-size: 14px;
}

/* 섹션별 배경 톤 - 스크롤할 때 화면이 바뀌는 게 보이도록 */
/* --------------------------------------------------------- 섹션 1 메인 오브젝트

   배경 위에 얹는 레이어. 아래에서 올라오며(translateY) 서서히 나타난다(opacity).
   글자·버튼보다는 아래에 두고, 클릭을 가로채지 않게 한다.
   ------------------------------------------------------------------------ */

.main-ob {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 시작 상태: 살짝 아래 + 투명 */
    opacity: 0;
    transform: translateY(6%);
    animation: main-ob-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
}

.main-ob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@keyframes main-ob-in {
    from {
        opacity: 0;
        transform: translateY(6%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
   메인 등장 순서 (오브젝트 → 타이틀 → 버튼)
     오브젝트 0.2s 뒤 1.2s  : 아래에서 올라오며 나타남
     타이틀   0.7s 뒤 0.9s  : 살짝 작게 시작해 커지며 나타남 (로고가 앞으로 나오는 느낌)
     버튼     1.3s 뒤 0.7s  : 아래에서 올라오며 나타난 뒤, 천천히 숨쉬듯 반복 (클릭 유도)
*/

#main .main_title {
    opacity: 0;
    animation: main-title-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}

@keyframes main-title-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#main .main_btn {
    opacity: 0;
    animation: main-btn-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.3s forwards;
}

@keyframes main-btn-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
   등장이 끝난 뒤의 반복 동작은 안쪽 이미지에 건다.
   (바깥 <a> 의 등장 애니메이션과 transform 이 겹치지 않게)
*/
#main .main_btn img {
    animation: main-btn-pulse 2.6s ease-in-out 2.2s infinite;
}

@keyframes main-btn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@media (hover: hover) {
    #main .main_btn:hover img {
        /* 마우스를 올리면 반복을 멈추고 살짝 커진 상태로 고정 */
        animation-play-state: paused;
        transform: scale(1.06);
        transition: transform 0.2s ease;
    }
}

/*
   등장 애니메이션 되감기용.
   다른 섹션에 갔다 돌아오면 스크립트가 이 클래스를 한 프레임 붙였다 뗀다.
   animation 이 끊겼다 되돌아오면 브라우저가 처음부터 다시 돌린다.
   (#main 과 붙여 써야 위쪽 #main .main_title 규칙보다 우선한다)
*/
#main.is-rewind .main-ob,
#main.is-rewind .main_title,
#main.is-rewind .main_btn,
#main.is-rewind .main_btn img {
    animation: none;
}

/*
   움직임을 줄이는 설정에서는 애니메이션이 꺼진다.
   시작 상태가 투명이라 그대로 두면 영영 안 보이므로 보이는 상태로 고정한다.
*/
@media (prefers-reduced-motion: reduce) {
    .main-ob,
    #main .main_title,
    #main .main_btn {
        opacity: 1;
        transform: none;
    }

    #main .main_btn img {
        transform: none;
    }
}

/* --------------------------------------------------------- 섹션 2 사전예약

   구조: 모바일은 세로 1단, PC 는 2단. DOM 은 하나이고 Grid 영역만 바꾼다.
     모바일          PC
     [head  ]        [head   head]
     [visual]        [visual form]
     [form  ]
   ------------------------------------------------------------------------ */

.page-register {
    background: var(--color-bg);
}

/*
   섹션의 배경 아트.

   흐름 안에 두고 원본 비율(height:auto)로 펼친다. 이 이미지가 섹션 높이를 정하고,
   내용은 같은 그리드 칸에 겹쳐 올라간다. object-fit:cover 로 잘라내지 않으므로
   이미지 전체가 보인다.
*/
.page-bg-img {
    grid-area: stack;
    z-index: 0;
    display: block;

    /*
       칸 높이를 그대로 받는다.
       그리드 행 높이는 이 이미지의 원본 비율 높이와 내용 높이 중 큰 쪽으로 정해지므로,
       stretch 를 줘도 "이미지가 섹션 높이를 정한다"는 성질은 유지된다.
       내용이 이미지보다 길어지는 섹션에서만 이미지가 늘어나 빈 띠를 막는다.
    */
    align-self: stretch;
}

.page-bg-img img {
    display: block;
    width: 100%;

    /*
       height:auto 가 원본 비율 높이를 만들어 행 높이의 기준이 된다.
       min-height:100% 는 내용이 더 길어 행이 커진 경우에만 작동해서,
       그때만 object-fit:cover 로 채운다. (평소에는 잘리지 않는다)
    */
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.reg-head {
    text-align: center;
    display:flex;
    align-items: center;
    justify-content: center;

}

.reg-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.reg-subtitle {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 7px 22px;
    background: rgba(91, 124, 250, 0.22);
    border-radius: 999px;
    font-size: 14px;
}

/* 패널 - 박스 이미지가 크기·비율을 정하고, 내용은 그 위에 % 로 얹는다

   박스 이미지에서 잰 실제 경계 (이미지 높이 기준)
     PC     1138x688  : 상단 띠 끝 31.3% / 본문 바닥 93.5%
     모바일  657x1154  : 상단 띠 끝 20.2% / 본문 바닥 97.2%
   값이 안 맞으면 아래 --box-* 변수만 조정하면 된다.
   ------------------------------------------------------------------------ */

.reg-panel {
    position: relative;
    width: 100%;
    max-width: 657px;
    margin: 0 auto;
    /* 안쪽 요소 크기를 패널 폭 기준(cqw)으로 잡기 위해 컨테이너로 선언 */
    container-type: inline-size;
}

.reg-head img {
    margin: 0 auto;
}

.reg-panel-box img {
    display: block;
    width: 100%;
    height: auto;
}

.reg-panel-body {
    --box-top: 20.2%;
    --box-bottom: 2.8%;
    --box-side: 6%;

    position: absolute;
    top: var(--box-top);
    right: var(--box-side);
    bottom: var(--box-bottom);
    left: var(--box-side);

    display: grid;
    grid-template-areas:
        "visual"
        "form";
    grid-template-rows: 1fr 1.3fr;
    gap: 0cqw;
}

.reg-visual {
    grid-area: visual;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.reg-visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 폼 */

.reg-form {
    grid-area: form;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    padding: 0 7cqw;
}

.reg-field input {
    width: 100%;
    padding: 2cqw 3cqw;
    background: #fff;
    border: 0;
    border-radius: 999px;
    color: #1d2129;
    /* 비율로 줄이되 16px 밑으로는 내리지 않는다 (iOS 입력 시 화면 확대 방지) */
    font-size: max(16px, 3.4cqw);
    text-align: center;
}

.reg-field input::placeholder {
    color: #ccc;
}

.reg-agree {
    margin: 3cqw 0;
    display: flex;
    flex-direction: column;
    gap: 1cqw;
    padding: 0 1.5cqw;
}

.reg-agree li {
    display: flex;
    align-items: center;
    gap: 2cqw;
}

.reg-agree label {
    display: flex;
    align-items: center;
    gap: 2cqw;
    color: #b1a8d6;
    font-size: max(10px, 3cqw);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

/*
   체크박스 - 기본 모양을 지우고 이미지 두 장으로 그린다.
   꺼짐: check_box.png(26x26) / 켜짐: 그 위에 check.png(18x13) 을 겹친다.
   배경 레이어를 쓰면 가상요소 없이 처리되고 지원 범위도 넓다.
*/
.reg-agree input {
    appearance: none;
    -webkit-appearance: none;
    width: max(16px, 4cqw);
    height: max(16px, 4cqw);
    flex: none;
    margin: 0;
    background-image: url("/images/year1/check_box.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
}

.reg-agree input:checked {
    background-image: url("/images/year1/check.png"), url("/images/year1/check_box.png");
    background-size: 69% auto, contain;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.reg-agree input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 전체 동의는 한 단계 강조 */
.reg-agree-all label {
    color: #fff;
    font-size: max(14px, 3.6cqw);
}

.reg-terms {
    margin-left: auto;
    padding: 0.1cqw 2.4cqw;
    background: none;
    border: 1px solid #b1a8d6;
    border-radius: 999px;
    color: #b1a8d6;
    font-size: max(10px, 2.4cqw);
    white-space: nowrap;
}

@media (hover: hover) {
    .reg-terms:hover {
        border-color: #fff;
        color: #5624c2;
        background-color: #fff;
    }
}

.reg-submit {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
}

.reg-submit img {
    width: 100%;
    max-width: 532px;
    height: auto;
    margin: 0 auto;
}

@media (hover: hover) {
    .reg-submit:hover img {
        filter: brightness(1.08);
    }
}

.reg-notice {
    margin-top: 0cqw;
    background: none;
    border: 0;
    color: #fff;
    font-size: max(11px, 2.8cqw);
    font-weight: 700;
}

.reg-notice::after {
    content: " ▶";
    font-size: 0.8em;
}

/* --------------------------------------------------------- 섹션 3 사전예약 달성 EVENT

   event_content.png 한 장을 깔고 그 위에 게이지(bar_N)와 CLEAR 카드(clear_N)를 얹는다.
   좌표는 이미지를 계측해 % 로 넣었고, PC/모바일 배치가 달라 값을 각각 받는다.
     [PC 1179x581]   게이지 가로 : left 2.120% / width 96.947% / top 5.508% / height 5.508%
     [모바일 597x840] 게이지 세로 : left 17.085% / width 4.020% / top 0.238% / height 98.095%
   ------------------------------------------------------------------------ */

.page-event {
    background: var(--color-bg);
}

.event-head {
    text-align: center;
    /*margin-bottom: var(--space-sm);*/
}

.event-head img {
    margin: 0 auto;
}

/* 본문 - 이미지가 크기·비율을 정하고 나머지는 그 위에 얹힌다 */
.event-content {
    position: relative;

    /*
       좌우 여백을 padding 으로 주면, 위에 얹는 요소(.event-gauge / .event-clear)의
       % 좌표가 패딩 박스(= 이미지보다 넓은 박스)를 기준으로 계산되어 어긋난다.
       padding 대신 그만큼 폭을 줄여, 이 요소의 박스가 곧 배경 이미지 박스가 되게 한다.
       (배경 이미지는 width:100% 라 화면에 그려지는 크기는 그대로다)
    */
    width: calc(100% - 16cqw);
    max-width: 597px;
    margin: 0 auto;
}

.event-content-base img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- 달성 게이지 --- */

.event-gauge {
    position: absolute;
    /* 모바일: 세로 막대. 아래(3만)에서 위(30만)로 채운다 */
    left: 17.07%;
    top: 0.7%;
    width: 4.020%;
    height: 97.5%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.event-gauge-step {
    display: block;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.event-gauge-step picture,
.event-gauge-step img {
    display: block;
    width: 100%;
    height: 100%;
}

/*
   채운 만큼만 남기고 잘라낸다. 세로는 아래에서 위로.
   (이미지를 늘이지 않고 잘라야 끝부분 모양이 뭉개지지 않는다)
*/
.event-gauge-step img {
    object-fit: fill;
    clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
}

/* --- 달성 카드 --- */

.event-clear {
    position: absolute;
    left: var(--mo-left);
    top: var(--mo-top);
    width: var(--mo-w);
    display: block;
}

.event-clear img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------- 섹션 6 이관 1주년 PV

   pv_box.png 을 깔고 안쪽(키비주얼 자리)에 재생 버튼/유튜브를 얹는다.
   안쪽 영역은 박스 이미지를 계측한 값이며 16:9 다.
     [PC 954x576]    left 4.403% top 7.292% width 91.30% height 85.59%
     [모바일 672x410] left 4.762% top 7.561% width 90.77% height 85.12%
   ------------------------------------------------------------------------ */

.page-pv {
    background: var(--color-bg);
}

.pv-head {
    text-align: center;
    /*margin-bottom: var(--space-md);*/
}

.pv-head img {
    margin: 0 auto;
}

/* 박스 - 이미지가 크기·비율을 정한다 */
.pv-box {
    position: relative;
    width: 100%;
    max-width: 672px;
    margin: 0 auto;
}

.pv-box-base img {
    display: block;
    width: 100%;
    height: auto;
}

/* 박스 안쪽 화면 */
.pv-screen {
    position: absolute;
    left: 4.762%;
    top: 7.561%;
    width: 90.77%;
    height: 85.12%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-screen iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 재생 버튼 */
.pv-play {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    width: 16%;
    max-width: 105px;
    transition: transform 0.2s ease;
}

.pv-play img {
    display: block;
    width: 100%;
    height: auto;
}

@media (hover: hover) {
    .pv-play:hover {
        transform: scale(1.08);
    }
}

/* --------------------------------------------------------- 약관 레이어 팝업

   팝업 내용은 통째로 이미지다. 이미지 안에 그려진 X 와 확인 버튼 위치에
   투명한 클릭 영역을 얹는다. 좌표는 이미지에서 직접 계측한 값이며,
   PC(719px)·모바일(658px) 모두 가로폭 대비 같은 비율이라 cqw 로 처리한다.
     X     : 가로 93~96%, 세로는 폭의 14~27% 지점
     확인  : 가로 중앙, 바닥에서 폭의 10~20% 지점
   ------------------------------------------------------------------------ */

.pop-layer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 16px;
    overflow-y: auto;
}

.pop-layer[hidden] {
    display: none;
}

/* 열 때 컨테이너로 포커스를 옮기므로 여기 링은 표시하지 않는다 */
.pop-layer:focus,
.pop-layer:focus-visible {
    outline: none;
}

/* 팝업이 열린 동안 뒤쪽 스크롤 잠금 */
html.is-pop-open {
    overflow: hidden;
}

.pop-dim {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 16, 0.78);
    border: 0;
}

.pop-frame {
    position: relative;
    /* 팝업마다 이미지 원본 폭이 달라 인라인 스타일(--pop-w-*)로 받는다.
       원본보다 크게 늘리면 흐려지므로 상한으로만 쓴다. */
    width: min(var(--pop-w-mo, 658px), 100%);
    margin: auto;
    container-type: inline-size;
}

.pop-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.pop-close,
.pop-ok {
    position: absolute;
    background: none;
    border: 0;
    cursor: pointer;
}

/* 이미지에 그려진 X 자리 */
.pop-close {
    top: 14cqw;
    right: 9cqw;
    width: 17cqw;
    height: 18cqw;
}

/* 이미지에 그려진 확인 버튼 자리 */
.pop-ok {
    left: 50%;
    bottom: 10cqw;
    width: 36cqw;
    height: 18cqw;
    transform: translateX(-50%);
}

.pop-close:focus-visible,
.pop-ok:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.page-characters { background: #12162400; }
.page-wallpaper { background: var(--color-surface); }

/* --------------------------------------------------------- 첫 진입 로딩 화면

   이미지를 다 받을 때까지 화면 전체를 덮는다.
   스크립트가 .is-done 을 붙이면 사라지고, 전환이 끝나면 DOM 에서도 제거된다.
   ------------------------------------------------------------------------ */

.site-loading {
    position: fixed;
    inset: 0;
    /* 헤더(100) · 전체메뉴(200) · 팝업(300) 보다 위 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    opacity: 1;
    transition: opacity 0.45s ease;
}

/* 로딩 중에는 뒤쪽이 스크롤되지 않게 잠근다 */
html.is-loading,
html.is-loading body {
    overflow: hidden;
}

.site-loading.is-done {
    opacity: 0;
    /* 사라지는 동안 클릭을 막지 않는다 */
    pointer-events: none;
}

.site-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
}

.site-loading-logo {
    width: 200px;
    max-width: 62vw;
    height: auto;
    /* 로고가 숨을 쉬듯 천천히 밝아졌다 어두워진다 */
    animation: site-loading-pulse 1.8s ease-in-out infinite;
}

@keyframes site-loading-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.site-loading-bar {
    position: relative;
    width: 200px;
    max-width: 62vw;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.site-loading-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7f6bff, #c9a6ff);
    transition: width 0.25s ease;
}

.site-loading-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/*
   움직임을 줄이는 설정에서는 로고 맥동을 멈춘다.
   (전역 규칙이 animation 을 끄지만, 꺼지면 opacity 가 0.45 로 굳으므로 값을 되돌린다)
*/
@media (prefers-reduced-motion: reduce) {
    .site-loading-logo {
        opacity: 1;
    }
}

/* --------------------------------------------------------- header */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    /*
       스크롤 중에도 헤더가 사라지지 않게 별도 합성 레이어로 올려 둔다.
       html 에 scroll-snap-type 이 걸려 있으면 모바일 사파리가 스냅/관성 스크롤 동안
       position:fixed 요소를 스크롤 컨테이너와 같이 다시 그리다가 놓치는 경우가 있다.
       레이어를 분리하면 스크롤과 무관하게 화면에 남는다.
       (헤더 안에는 position:fixed 자식이 없어 transform 을 걸어도 안전하다.
        전체화면 메뉴 .full-menu 와 점 네비 .page-nav 는 헤더 밖 형제 요소다)
    */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*background: rgba(13, 15, 26, 0.9);
    backdrop-filter: blur(8px);*/
    border-bottom : 1px solid #000;
    background-size: auto 100%;   /* 가로 auto(비율 유지), 세로 100% */
    background-repeat: repeat-x;  /* 가로로만 반복 */
    background-position: left center;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 40px;
}


/* 햄버거 버튼 - 모바일 전용 (1024px 이상에서는 숨김) */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 50px;
    height: 50px;
    padding: 0 9px;
    background: none;
    border: 0;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
}

/* 전체화면 레이어 메뉴 */

.full-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    /* 노치/홈바 영역 침범 방지 */
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    overflow-y: auto;
    /*background-color: #fff;*/
    background-image: url(/images/year1/mobile/full_bg.png);
    background-size: cover;
}

.full-menu.is-open {
    display: flex;
}

/* 메뉴를 열 때 컨테이너로 포커스를 옮기므로 여기 링은 표시하지 않는다 */
.full-menu:focus,
.full-menu:focus-visible {
    outline: none;
}

/* 메뉴가 열려 있는 동안 뒤 페이지 스크롤 잠금 */
html.is-menu-open {
    overflow: hidden;
}

.full-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    flex: none;
    border-bottom : 1px solid #000;
    background-size: auto 100%;   /* 가로 auto(비율 유지), 세로 100% */
    background-repeat: repeat-x;  /* 가로로만 반복 */
    background-position: left center;
}

.menu-close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 50px;
    height: 50px;
    padding: 0 11px;
    background: none;
    border: 0;
}

.full-menu-nav {
    flex: 1;
    display: flex;
    align-items: center;
}

.full-menu-nav ul {
    width: 100%;
}

.full-menu-nav a {
    display: block;
    padding: 5% 0;
    text-align: center;
}

.full-menu-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.full-menu-foot nav{width: 100%;}

/* PC 메뉴 - 이미지 2장(off/on)을 겹쳐 두고 상태에 따라 바꿔 보여준다 */

.pc-menu {
    /* 모바일에서는 햄버거 메뉴를 쓰므로 감춘다 */
    display: none;
}

.pc-menu ul {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pc-menu a {
    display: block;
}

/*
   off/on 전환 규칙 (PC 메뉴 / 모바일 전체메뉴 공통)
   - 기본: off 만 표시
   - 마우스 오버 또는 현재 보고 있는 섹션(.on): on 만 표시
*/
.pc-menu .menu-on,
.full-menu-nav .menu-on {
    display: none;
}

.pc-menu a.on .menu-off,
.full-menu-nav a.on .menu-off {
    display: none;
}

.pc-menu a.on .menu-on,
.full-menu-nav a.on .menu-on {
    display: block;
}

@media (hover: hover) {
    .pc-menu a:hover .menu-off,
    .full-menu-nav a:hover .menu-off {
        display: none;
    }

    .pc-menu a:hover .menu-on,
    .full-menu-nav a:hover .menu-on {
        display: block;
    }
}

/* 가운데 정렬된 모바일 메뉴에서 이미지가 가운데 오도록 */
.full-menu-nav img {
    margin: 0 auto;
    max-width: 100%;
    height: 30px;
}

/* 언어 선택 (PC) - 현재 언어는 텍스트, 마우스를 올리면 목록 레이어 */

.lang-select-wrap{display: none;}

.lang-dropdown {
    position: relative;
}

.lang-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 0;
    background: none;
    border: 0;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

/* 아래를 향한 채워진 삼각형. 목록이 열리면 180도 돌아 위를 향한다. */
.lang-current::after {
    content: "";
    /* 테두리로 만든 삼각형이라 폭/높이는 0 이고 border 가 크기를 정한다 */
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
    transition: transform 0.2s ease;
}

.lang-dropdown:focus-within .lang-current::after {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .lang-dropdown:hover .lang-current::after {
        transform: rotate(180deg);
    }
}

.lang-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
    /* 라벨과 레이어 사이 빈 틈에서 hover 가 끊기지 않도록 투명 여백을 둔다 */
    padding-top: 10px;
    display: none;
    z-index: 10;
}

.lang-dropdown:focus-within .lang-menu {
    display: block;
}

@media (hover: hover) {
    .lang-dropdown:hover .lang-menu {
        display: block;
    }
}

.lang-menu ul {
    padding: 6px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    
}

.lang-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--color-muted);
    font-size: 14px;
    white-space: nowrap;
}

.lang-menu a.on {
    /*background: rgba(91, 124, 250, 0.14);*/
    color: #000;
}

@media (hover: hover) {
    .lang-menu a:hover {
        color: #000;
    }
}

/* 언어 선택 (모바일) - 전체화면 메뉴 안에 가로로 나열 */

.lang-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.lang-inline a {
    display: block;
    padding: 8px 14px;
    color: var(--color-muted);
    font-size: 13px;
    white-space: nowrap;
    position: relative;
}

.lang-inline li a:after{
    content: '|';
    color: #4c5279;
    font-size: 15px;
    position: absolute;
    right: -2px;
    top: 6px;
}
.lang-inline li:last-child a:after{
    content: '';
}

.lang-inline a.on {
    color: #fff;
}

.full-menu-sns ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.full-menu-sns img{height: 45px;}

/*
   모바일에서는 헤더의 언어 선택을 숨기고 전체화면 메뉴 안의 것을 쓴다.
   (헤더에도 계속 두고 싶으면 아래 블록만 지우면 된다) mstart
*/
@media (max-width: 1023px) {
    .header-inner > .lang-select-wrap {
        display: none;
    }

    /*
       사전예약 섹션은 모바일에서 내용이 한 화면보다 길다.
       섹션 안쪽에서 스크롤시키면 타이틀이 잘려 보이므로,
       섹션 자체가 늘어나고 페이지가 스크롤되게 둔다.
    */
    .page-register {
        height: auto;
        overflow: visible;

        /*
           이 섹션만 자석 스크롤에서 뺀다.
           내용(타이틀 + 박스 + 폼)이 한 화면보다 길어 스냅이 걸리면
           폼을 읽거나 입력하는 중에 위/아래로 끌려간다.
        */
        scroll-snap-align: none;
    }

    /*
       위의 scroll-snap-align: none 과 짝을 이루는 설정.

       mandatory 는 "스크롤이 끝나면 반드시 스냅 위치에 붙어야 한다"는 뜻이라,
       스냅 대상이 아닌 구간에서 손을 떼도 가장 가까운 스냅 위치로 끌려간다.
       그래서 align 만 빼면 사전예약 섹션 중간에 머물 수 없다.

       proximity 는 스냅 위치에 가까울 때만 붙는다. 사전예약 섹션 안에서는
       자유롭게 멈추고, 다른 섹션은 높이가 100dvh 라 손을 떼는 지점이 항상
       섹션 시작점 근처여서 그대로 붙는다.

       스크립트로 mandatory 를 껐다 켜는 방식은 쓰지 않는다. 스냅 위치가 아닌
       지점에서 mandatory 를 되켜면 브라우저가 어느 섹션으로 붙일지 스스로 정하고,
       사전예약 쪽으로 되돌아가 버리는 경우가 있다.
    */
    html {
        scroll-snap-type: y proximity;
    }

    .page-register .page-inner {
        max-height: none;
        overflow: visible;
    }

    /*
       모바일 헤더: 로고는 화면 정가운데, 햄버거는 우측 --edge-gap 위치에 고정.
       둘 다 absolute 로 빼내야 로고가 버튼 폭에 밀리지 않고 정확히 중앙에 온다.
    */
    .header-inner {
        position: relative;
        justify-content: center;
    }

    /*
       로고는 헤더(화면 전체 폭) 기준으로 중앙에 놓는다.
       absolute 라 햄버거 버튼의 폭이나 유무에 영향을 받지 않는다.
    */
    .header-inner > .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .logo img {
        /* 헤더 높이를 넘지 않게 */
        max-height: calc(var(--header-h) - 16px);
        width: 90%;
    }

    .nav-toggle {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /*
           터치 영역은 40x40 으로 두고, 버튼 안쪽 여백(9px)만큼 당겨서
           눈에 보이는 막대의 오른쪽 끝이 정확히 --edge-gap 에 오게 한다.
        */
        right: calc(var(--edge-gap) - 9px);
    }

    /* SNS 는 로고/햄버거와 겹치므로 모바일 헤더에서는 감춘다 */
    .header-inner > .pc-sns-wrap {
        display: none;
    }

    /* 전체화면 메뉴 상단도 같은 규칙 - 로고는 닫기 버튼과 무관하게 화면 정중앙 */
    .full-menu-head {
        position: relative;
        justify-content: center;
    }

    .full-menu-head > .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }


    .menu-close {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* 햄버거와 같은 선에 맞춘다 (× 글리프가 버튼 안에서 차지하는 여백 보정) */
        right: calc(var(--edge-gap) - 9px);
    }

    .mobile-nav-open{margin-top:-8px;}
    
}

/* PC 헤더의 SNS 목록 - 가로 배열 (모바일에서는 위 미디어쿼리에서 숨긴다) */

.pc-sns-wrap ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-sns-wrap a {
    display: block;
}

/* --------------------------------------------------------- 섹션 네비게이션

   모바일: 화면 하단 가로 점 / PC: 우측 세로 점 + 라벨
   ------------------------------------------------------------------------ */

.page-nav {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--nav-h);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(13, 15, 26, 0.9);
    border-top: 1px solid var(--color-line);
    backdrop-filter: blur(8px);
}

/*
   off 는 48x48 원형, on 은 라벨이 붙어 왼쪽으로 길어진 이미지(130~207x48).
   슬롯 폭을 48px 로 고정하고 이미지를 오른쪽 기준으로 겹쳐 두면,
   on 으로 바뀔 때 오른쪽 원 위치는 그대로인 채 라벨만 왼쪽으로 펼쳐진다.
*/

.page-nav ul {
    display: flex;
}

.page-nav a {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
}

.page-nav img {
    position: absolute;
    top: 0;
    right: 0;
    /* 슬롯(48px)보다 넓은 on 이미지가 줄어들지 않고 왼쪽으로 넘치도록 */
    max-width: none;
}

.page-nav .nav-on {
    display: none;
}

.page-nav a.on .nav-off {
    display: none;
}

.page-nav a.on .nav-on {
    display: block;
}

@media (hover: hover) {
    .page-nav a:hover .nav-off {
        display: none;
    }

    .page-nav a:hover .nav-on {
        display: block;
    }
}

/* --------------------------------------------------------- 섹션 1 메인 */

.main-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.main-subtitle {
    margin-top: var(--space-sm);
    color: var(--color-muted);
    font-size: 0;
}

.main-cta {
    margin-top: var(--space-lg);
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: calc(var(--nav-h) + 16px);
    transform: translateX(-50%);
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.05em;
}

.scroll-hint::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 6px auto 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    animation: scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-bounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
    50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* --------------------------------------------------------- 섹션 2 사전예약 */

.register-box {
    max-width: 460px;
    margin: 0 auto;
    padding: var(--space-md);
    background: rgba(13, 15, 26, 0.6);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.register-count {
    margin-bottom: var(--space-md);
    color: var(--color-muted);
    font-size: 14px;
}

.register-count strong {
    color: var(--color-accent);
    font-size: 22px;
    margin: 0 4px;
}

.register-note {
    margin-top: var(--space-sm);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.6;
}

.field {
    margin-bottom: 16px;
    text-align: left;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-muted);
}

.field input[type="email"],
.field input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    color: var(--color-text);
    /* iOS 에서 폼 확대되는 것 방지: 16px 이상 유지 */
    font-size: 16px;
}

.field input::placeholder { color: #6b7391; }

.field input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.check input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--color-accent);
}

.form-message {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 14px;
}

.form-message.is-error { background: rgba(214, 69, 69, 0.14); color: #ff9f9f; }
.form-message.is-success { background: rgba(46, 160, 92, 0.14); color: #86e0ab; }

/* --------------------------------------------------------- 섹션 3 보상 */

.reward-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.reward-card {
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.reward-thumb,
.character-thumb,
.wallpaper-thumb {
    /* 이미지가 들어오기 전까지 비율만 잡아두는 자리 */
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.reward-thumb { aspect-ratio: 1 / 1; }

.reward-goal {
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-muted);
}

.reward-goal strong {
    color: var(--color-text);
    font-size: 17px;
    margin-right: 3px;
}

.reward-name {
    font-size: 13px;
    min-height: 1.7em;
}

/* 달성한 목표 인원 */
.reward-card.is-achieved {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.reward-card.is-achieved .reward-goal strong {
    color: var(--color-accent);
}

/* --------------------------------------------------------- 섹션 4 캐릭터 소개

   배경 위에 캐릭터 이미지를 겹쳐 두고 opacity 로 교차한다(fade in/out).
   페이지네이션은 슬라이드 위에 올라가며, 캐릭터 이미지 일부를 가리는 구성이다.
     모바일: 위쪽에 가로로 아치 배열
     PC    : 왼쪽에 세로로 아치 배열
   ------------------------------------------------------------------------ */

.page-characters {
    background: var(--color-bg);
}

/*
   슬라이드가 모두 absolute 라 부모 높이가 0 이 된다.
   섹션 높이를 그대로 쓰도록 page-inner 를 늘려 준다.
*/
.page-characters .page-inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* 페이지네이션이 좌우 끝까지 갈 수 있도록 컨테이너 여백을 없앤다 */
    padding: 0;
    max-width: none;
}

.ch-slider {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* --- 슬라이드 --- */

.ch-stage {
    position: relative;
    width: 100%;
    height: 100%;
    /*
       세로 스크롤은 브라우저에 맡기고 가로 제스처만 스크립트가 받는다.
       (브라우저 기본 가로 스와이프 - 뒤로가기 등 - 와 충돌하지 않게 한다)
    */
    touch-action: pan-y;
}

.ch-slide {
    position: absolute;
    inset: 0;
    display: flex;
    /* 모바일 배경 위쪽에 타이틀이 있어 캐릭터는 아래에 붙인다 */
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}

.ch-slide.is-on {
    opacity: 1;
    visibility: visible;
}

/*
   <picture> 는 기본적으로 높이가 auto 라, 안쪽 img 의 max-height:100% 가 기준을 잃는다.
   (가로 화면처럼 세로가 짧을 때 이미지가 안 줄어들고 넘친다)
   picture 를 슬라이드 크기만큼 펼쳐서 기준 높이를 만들어 준다.
*/
.ch-slide picture {
    display: flex;
    align-items: inherit;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ch-slide img {
    /* 캐릭터마다 이미지 비율이 달라 가운데 정렬 + 비율 유지로 맞춘다 */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --- 페이지네이션 --- */

.ch-nav {
    position: absolute;
    z-index: 2;
    /* 모바일: 배경 타이틀 아래쪽에 가로 아치로 배치 */
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 4%;
}

.ch-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5%;
}

.ch-dot {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
}

.ch-nav li {
    width: 17%;
    max-width: 149px;
}

/* 가운데가 위로 솟는 아치 배열 */
.ch-nav li:nth-child(1),
.ch-nav li:nth-child(5) { transform: translateY(68%); }
.ch-nav li:nth-child(2),
.ch-nav li:nth-child(4) { transform: translateY(19%); }

.ch-dot img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.2);
}

/* off/on 을 같은 자리에 겹쳐 두고 바꿔 보여준다 */
.ch-dot {
    position: relative;
}

.ch-dot-on {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}


.ch-dot.is-on .ch-dot-on {
    opacity: 1;
}

@media (hover: hover) {
    .ch-dot:hover .ch-dot-on {
        opacity: 1;
    }
}

/* --------------------------------------------------------- 섹션 5 디지털 굿즈

   wallpaper_box.png 를 깔고 그 위에 탭(wallpaper_on_N)과 썸네일을 얹는다.
   좌표는 박스 이미지를 계측한 값이다.
     [PC 1138x738]   탭 중심 22.19 / 50.00 / 77.90%, 세로 중심 18.36% · 본문 21.1~97.3%
     [모바일 657x938] 탭 중심 20.70 / 49.77 / 79.00%, 세로 중심 15.14% · 본문 18.9~97.9%
   ------------------------------------------------------------------------ */

.page-goods {
    /* 배경 이미지가 가로로 잘리지 않게 폭 기준으로 맞추고, 남는 아래쪽은 이미지 하단 색으로 채운다
       (모바일 배경 720x1280 은 9:16 이라 세로가 긴 화면에서 cover 를 쓰면 타이틀 양끝이 잘린다) */
    background: #101c4e;
}

.goods-head {
    text-align: center;
    /*margin-bottom: var(--space-md);*/
}

.goods-head img {
    margin: 0 auto;
}

/* 모바일에서만 폭 기준으로 맞춘다. PC(1920x1080)는 화면 비율이 가까워 cover 로 충분하다 */
@media (max-width: 1023px) {
    .page-goods .page-bg-img img {
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center top;
    }
}

/* 박스 - 이미지가 크기·비율을 정하고 나머지는 그 위에 얹힌다 */
.wp-box {
    position: relative;
    width: 100%;
    max-width: 657px;
    margin: 0 auto;
    container-type: inline-size;
    padding: 0px 5cqw;
}

.wp-box-base img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- 탭 --- */

.wp-tab {
    position: absolute;
    /* 모바일: wallpaper_on 182x91 (박스 657x938 기준) */
    top: 10.5%;
    width: 23.70%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transform: translateX(-50%);
}

.wp-tab:nth-child(1) { left: 23.90%; }
.wp-tab:nth-child(2) { left: 50.10%; }
.wp-tab:nth-child(3) { left: 76.10%; }

.wp-tab img {
    display: block;
    width: 100%;
    height: auto;
}

/* 비선택 탭의 이름은 박스 이미지에 이미 있으므로 on 이미지만 감춘다 */
.wp-tab-on {
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wp-tab.is-on .wp-tab-on {
    opacity: 1;
}

/* --- 본문 --- */

.wp-body {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 21%;
    bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    padding: 0 4cqw;
}


/*
   목록은 본문 영역 안에 반드시 들어가야 한다.
   행 높이를 균등(1fr)하게 나누고 이미지를 가로·세로 양쪽으로 제한해,
   탭마다 장수와 비율이 달라도 박스를 넘치지 않게 한다.
*/
.wp-list {
    display: grid;
    grid-auto-rows: 1fr;
    justify-items: center;
    align-content: stretch;
    gap: 1.5cqw;
    width: 100%;
    /*flex: 1;*/
    min-height: 0;
}



.wp-list[hidden] {
    display: none;
}

.wp-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

/*
   썸네일을 감싼 링크에도 칸 크기를 그대로 물려준다.
   (높이가 auto 인 요소가 중간에 끼면 안쪽 img 의 max-height:100% 가 기준을 잃는다)
*/
.wp-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

@media (hover: hover) {
    .wp-list a:hover img {
        filter: brightness(1.1);
    }
}

.wp-list img {
    display: block;
    /* 칸 안에서 가로·세로 모두 넘지 않게 (비율 유지) */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 2px;
}

/* 탭별 열 수 (모바일) */
.wp-list-pc { grid-template-columns: repeat(2, 1fr); }
.wp-list-m { grid-template-columns: repeat(3, 1fr); }
.wp-list-sns { grid-template-columns: repeat(3, 1fr); }

/* SNS 는 5장이라 마지막 줄 2장을 반 칸씩 밀어 가운데로 맞춘다 */
.wp-list-sns li:nth-child(4),
.wp-list-sns li:nth-child(5) {
    transform: translateX(50%);
}

.wp-download {
    display: none;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    width: 50%;
    max-width: 326px;
}

.wp-download[hidden] {
    display: none;
}

.wp-download img {
    display: block;
    width: 100%;
    height: auto;
}

@media (hover: hover) {
    .wp-download:hover img {
        filter: brightness(1.08);
    }
}

/* --------------------------------------------------------- 공용 버튼 */

.btn {
    display: inline-block;
    padding: 14px 34px;
    background: var(--color-accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .btn:hover { background: var(--color-accent-hover); }
}
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 9px 20px; font-size: 13px; }

/* --------------------------------------------------------- footer

   푸터는 스냅 대상이 아니라 마지막 섹션 뒤에 붙는다.
   ------------------------------------------------------------------------ */

.site-footer {
    padding: 0 0 30px;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 13px;
    scroll-snap-align: start;
    background-color: #000;
}

.footer-inner {
    display: block;
    text-align: center;
    gap: var(--space-sm);
    text-align: center;
    padding-top: 40px;
}

.footer-links { display: flex; gap: 30px; align-items: center; justify-content: center;}
.footer-links a {display: flex;align-items: center; }
.footer-links li.vagames a{justify-content: right;}
.footer-links li.major9 a{justify-content: center;}
.footer-links img{width: 50%;}

.copyright{ color: rgba(255, 255, 255, 0.8); text-align: center;font-size:0.8em;padding: 20px 0 10px;}

/* --------------------------------------------------------- 640px 이상 */

@media (min-width: 640px) {
    body { font-size: 16px; }

    .page-title { font-size: 34px; }
    .page-lead { font-size: 15px; }
    .main-title { font-size: 64px; }
    .main-subtitle { font-size: 17px; }

    .reward-list { grid-template-columns: repeat(4, 1fr); }
    .character-list { grid-template-columns: repeat(4, 1fr); }
    .wallpaper-list { grid-template-columns: repeat(3, 1fr); }

    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* --------------------------------------------------------- 1024px 이상 (PC) pcstart*/

@media (min-width: 1024px) {
    :root {
        --header-h: 86px;
        --nav-h: 0px; /* PC 는 하단 네비가 없다 */
        --space-lg: 56px;
    }

    /*
       헤더 여백은 .page-inner 가 이미 갖고 있다(기본 규칙).
       .page 에 주면 그리드 칸이 밀려 배경 이미지가 헤더 높이만큼 내려간다.
    */

    .page-title { font-size: 42px; }
    .main-title { font-size: 84px; }

    /*
       PC 헤더: 로고 + 메뉴 + 언어 + SNS 를 모두 담아야 해서 폭이 빠듯하다.
       본문(1120px)과 달리 헤더만 화면 폭을 다 쓰고, 그룹 사이 간격을 준다.
    */
    .site-header .header-inner {
        max-width: none;
        /* 간격은 아래에서 요소별로 직접 준다 (언어를 SNS 쪽에 붙이기 위해) */
        gap: 0;
    }

    /* 남는 공간을 언어 앞쪽에 모두 몰아 언어+SNS 를 오른쪽 끝으로 붙인다 */
    .lang-select-wrap {
        margin-left: auto;
    }

    .pc-sns-wrap {
        margin-left: 40px;
    }

    /* 사전예약 패널 - PC 박스(1138x688) 안쪽에 보상 | 폼 2단 */

    .page-register .page-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /*gap: 2vh;*/
    }

    .reg-head img {
        /* 타이틀이 커지면 박스가 화면 밖으로 밀리므로 높이를 묶어둔다 */
        /*max-height: 20vh;*/
        width: auto;
    }

    /*
       한 화면에 들어가도록 박스 높이를 58vh 정도로 묶는다.
       박스 비율이 1138:688 = 1.654 이므로 높이 제한을 폭으로 환산해 max-width 로 건다.
       (container-type: inline-size 를 쓰는 요소에 width:fit-content 를 주면
        내용으로 폭을 정할 수 없어 0 이 되므로 반드시 폭 기준으로 제한한다)
    */
    .reg-panel {
        max-width: min(1138px, 96vh);
    }

    .reg-panel-body {
        --box-top: 31.3%;
        --box-bottom: 6.5%;
        --box-side: 4.5%;

        grid-template-areas: "visual form";
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 1fr;
        gap: 0cqw;
    }

    .reg-form {
        justify-content: center;
        padding: 0 2cqw 0;
    }

    /* PC 는 패널이 넓어 같은 cqw 값이면 글자가 커진다. 비율을 낮춘다. */
    .reg-field input {
        padding: 1.4cqw 2cqw;
        font-size: max(15px, 1.7cqw);
    }

    .reg-agree {
        margin: 1.2cqw 0;
        gap: 0.4cqw;
        padding: 0 2cqw;
    }

    .reg-agree li { gap: 1cqw; }
    .reg-agree label { gap: 1cqw; font-size: max(12px, 1.5cqw); }
    .reg-agree input { width: max(16px, 1.9cqw); height: max(16px, 1.9cqw); }

    .pop-frame { width: min(var(--pop-w-pc, 719px), 100%); }

    /* --- 이관 1주년 PV : PC 배치 --- */

    .pv-head img {
        /* 타이틀이 크면 박스가 화면 밖으로 밀린다 */
        /*max-height: 20vh;*/
        width: auto;
    }

    /*
       한 화면에 들어가도록 박스 높이를 60vh 정도로 묶는다.
       박스 비율이 954:576 = 1.656 이라 높이 제한을 폭으로 환산해 max-width 로 건다.
    */
    .pv-box {
        max-width: min(954px, 99vh);
    }

    .pv-screen {
        left: 4.403%;
        top: 7.292%;
        width: 91.30%;
        height: 85.59%;
    }

    .pv-play { width: 11%; }

    /* --- 디지털 굿즈 : PC 배치 --- */

    /*
       박스 비율 1138:738 = 1.542. 한 화면에 들어가도록 높이를 65vh 정도로 묶고
       그 값을 폭으로 환산해 max-width 로 건다.
    */
    .wp-box {
        max-width: min(1138px, 100vh);
        padding: 0;
    }

    .wp-tab {
        /* wallpaper_on 296x62 (박스 1138x738 기준) */
        top: 14.16%;
        width: 26.01%;
    }

    .wp-tab:nth-child(1) { left: 22.19%; }
    .wp-tab:nth-child(2) { left: 50.00%; }
    .wp-tab:nth-child(3) { left: 77.90%; }

    .wp-body {
        left: 5%;
        right: 5%;
        top: 24%;
        bottom: 4%;
        gap: 2cqw;
        padding: 0;
    }

    .wp-list { gap: 0.5cqw; }

    /* 탭별 열 수 (PC) */
    .wp-list-pc { grid-template-columns: repeat(3, 1fr); }
    .wp-list-m { grid-template-columns: repeat(6, 1fr); }
    .wp-list-sns { grid-template-columns: repeat(5, 1fr); }

    /* PC 에서는 SNS 5장이 한 줄이라 가운데 모으기가 필요 없다 */
    .wp-list-sns li:nth-child(4),
    .wp-list-sns li:nth-child(5) {
        transform: none;
    }

    .wp-download { width: 24%; display:block;}

    /* --- 캐릭터 소개 : PC 배치 --- */

    /*
       시안 기준 위치: 원의 중심이 화면 폭의 약 30% 지점.
       원 지름은 원본 149px(1920 기준)에 맞춰 화면 폭에 비례시키되 원본보다 키우지 않는다.
    */
    .ch-slide {
        align-items: center;
    }

    .ch-nav {
        top: 52.5%;
        left: 26%;
        transform: translate(-50%, -50%);
        width: auto;
    }

    .ch-nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .ch-nav li {
        width: clamp(70px, 6.4vw, 149px);
        max-width: none;
    }

    /* 가운데가 왼쪽으로 튀어나오는 아치 배열 */
    .ch-nav li:nth-child(1),
    .ch-nav li:nth-child(5) { transform: translateX(70%); }
    .ch-nav li:nth-child(2),
    .ch-nav li:nth-child(4) { transform: translateX(18%); }
    .ch-nav li:nth-child(3) { transform: translateX(0); }

    /* --- 사전예약 달성 EVENT : PC 배치 --- */

    .event-head img {
        /* 타이틀이 크면 본문이 화면 밖으로 밀린다 */
        /*max-height: 18vh;*/
        width: auto;
    }

    /*
       한 화면에 들어가도록 본문 높이를 55vh 정도로 묶는다.
       이미지 비율이 1179:581 = 2.03 이라 높이 제한을 폭으로 환산해 max-width 로 건다.
       (우측 사이드 네비와 겹치지 않게 하는 효과도 있다)
    */
    /*
       배경 아트는 섹션을 넘어 하나의 그림으로 이어진다.
       그래서 모든 섹션이 같은 배율·같은 가로 위치여야 경계가 맞물린다.

       기본 규칙은 width:100% 라 화면을 줄이면 그림도 같이 줄어든다(1024px 에서 원본의 53%).
       배율이 섹션마다 달라지면 이어지는 그림의 경계가 어긋난다.

       min-width 로 원본 폭(1920)을 바닥값으로 잡아, 화면이 그보다 좁아지면 그림은
       원본 크기를 유지하고 좌우만 잘린다. 자르는 건 .page 의 overflow: hidden 이 해준다.
       화면이 원본보다 넓을 때는 width:100% 가 이겨 그대로 채운다.

       한 섹션만 빼면 그 경계에서 어긋나므로 반드시 전체에 같이 적용해야 한다.
       (PC 배경 page1~6_bg.jpg 은 모두 폭이 1920 이라 값을 공유한다)
    */
    .page-bg-img img {
        min-width: 1920px;   /* PC 배경 원본 폭 */

        /* 좁아진 만큼 좌우가 고르게 잘리도록 가로 가운데에 맞춘다 */
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .event-content {
        /* PC 는 좌우 여백이 없다 (기본 규칙의 폭 축소를 되돌린다) */
        width: 100%;
        max-width: min(1179px, 111vh);
    }

    /* 게이지가 가로 막대로 바뀐다 */
    .event-gauge {
        left: 2.120%;
        top: 5.608%;
        width: 96.947%;
        height: 5.308%;
        flex-direction: row;
        gap: 5px;
    }

    /* 가로는 왼쪽에서 오른쪽으로 채운다 */
    .event-gauge-step img {
        clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
    }

    .event-clear {
        left: var(--pc-left);
        top: var(--pc-top);
        width: var(--pc-w);
    }
    .pop-frame { width: min(var(--pop-w-pc, 719px), 100%); }


    .reg-agree-all label { font-size: max(14px, 2cqw); }
    .reg-terms { padding: 0.2cqw 1.2cqw; font-size: max(11px, 1.2cqw); }
    .lang-jp .reg-terms { padding: 0.05cqw 1.2cqw;}
    .reg-notice {  font-size: max(11px, 1.4cqw); }

    .pop-close {
        top: 14cqw;
        right: 7cqw;
        width: 15cqw;
        height: 13cqw;
    }

    /* 이미지에 그려진 확인 버튼 자리 */
    .pop-ok {
        left: 50%;
        bottom: 8cqw;
        width: 26cqw;
        height: 17cqw;
        transform: translateX(-50%);
    }

    .pc-menu {
        display: block;
        /* 로고와 40px, 언어 선택과는 최소 40px 을 띄운다.
           남는 공간이 없으면 메뉴 이미지가 조금 줄어들며 이 간격을 확보한다. */
        /*margin-left: clamp(10px, 7vw, 200px);*/
        margin-left: auto;
        margin-right: 20px;
        min-width: 0;
    }

    .pc-menu ul {
        gap: clamp(10px, 2.5vw, 100px);
    }

    .pc-menu li {
        min-width: 0;
    }

    .pc-menu img {
        max-width: 100%;
        height: auto;
    }

    /* 언어/SNS 는 줄어들지 않게 고정 */
    .lang-select-wrap,
    .pc-sns-wrap {
        flex: none;
    }

    /* 햄버거와 전체화면 메뉴는 모바일 전용 */
    .nav-toggle,
    .full-menu {
        display: none !important;
    }

     
    /* 섹션 네비를 화면 오른쪽 세로 목록으로 */
    .page-nav {
        display: flex;
        left: auto;
        right: 24px;
        top: 50%;
        bottom: auto;
        height: auto;
        transform: translateY(-50%);
        background: none;
        border: 0;
        backdrop-filter: none;
    }

    .page-nav ul {
        flex-direction: column;
        align-items: flex-end;
        gap: 13px;
        /* 원형 아이콘 뒤에 깔리는 반투명 트랙 */
        padding: 8px;
        border-radius: 999px;
        background: rgba(13, 15, 26, 0.45);
        backdrop-filter: blur(4px);
    }

    .scroll-hint { bottom: 28px; }

    .logo img{    width: auto;    }
    .lang-select-wrap{display: block;}

    .footer-inner{padding-top: 60px;}

    .footer-links { gap: 60px;}
    .footer-links img{width: auto;}
    .copyright{ color: rgba(255, 255, 255, 0.8); font-size:1.2em;padding: 40px 0 20px;}

}

/* --------------------------------------------------------- 접근성 / 예외

   화면이 낮은 가로 모드에서는 스냅을 풀어 내용이 잘리지 않게 한다.
   ------------------------------------------------------------------------ */

@media (max-height: 520px) {
    html { scroll-snap-type: none; }

    .page {
        min-height: auto;
    }

    /* 여백은 내용 층에 준다. .page 에 주면 배경 이미지가 밀려난다. */
    .page-inner {
        padding: calc(var(--header-h) + var(--space-md)) 0 var(--space-md);
    }

    /*
       캐릭터 섹션은 슬라이드가 전부 absolute 라 내용으로 높이를 만들 수 없다.
       min-height 를 풀면 높이가 0 으로 접혀 아무것도 안 보이므로 여기서는 화면 높이를 유지한다.
       (이미지는 max-height 로 알아서 줄어든다)
    */
    .page-characters {
        min-height: 100vh;
        min-height: 100dvh;
    }

    /*
       가로 화면은 세로 여유가 없다. 페이지네이션을 PC 처럼 왼쪽 세로 아치로 옮겨
       캐릭터 얼굴·말풍선을 가리지 않게 한다. 원 크기도 화면 높이 기준으로 제한한다.
    */
    .ch-nav {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        width: auto;
        padding: 0;
    }

    .ch-nav ul {
        flex-direction: column;
        gap: 2px;
    }

    .ch-nav li {
        width: min(16vh, 74px);
    }

    .ch-nav li:nth-child(1),
    .ch-nav li:nth-child(5) { transform: translateX(22%); }
    .ch-nav li:nth-child(2),
    .ch-nav li:nth-child(4) { transform: translateX(6%); }
    .ch-nav li:nth-child(3) { transform: translateX(0); }

    /* 세로가 짧아 아래 정렬할 여백이 없다 */
    .ch-slide {
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    * {
        transition: none !important;
        animation: none !important;
    }
}



.pc.flex{display:none;}
.mobile.flex{display:flex;}
.pc.block{display:none;}
.mobile.block{display:block;}


/* 배경 이미지가 섹션 높이를 정하므로 내용 층도 그 높이를 따라간다 */
#main .page-inner{height: 100%;}
#main .main_title{position: absolute;width: 100%;bottom: 10%;justify-content: center;align-items: center;}
#main .main_title img{width: 100%;margin:auto;}
#main .main_btn{font-size: 0;position: absolute;width: 100%;bottom: 11%;justify-content: center;align-items: center;}
#main .main_btn img{width: 75%;margin:auto;}
#characters{
        padding-bottom: 0;
    }
.character-head{
    position: absolute;top: 5%;left: 50%;transform: translateX(-50%);}


@media (max-width: 1023px) {
    #main {    padding:0;}
    #pv .page-inner{margin-bottom:30%;}
    #goods .page-inner{margin-top:1%;}
    .character-head{width: 100%;top:8%;}
    .wp-body.is-m .wp-list {width: 75%;}

    .lang-en .full-menu-nav img{height: 26px;}
    .lang-jp .full-menu-nav img{height: 27px;}
    .lang-en #main .main_title {bottom:2%;}
    .lang-en .reg-field input::placeholder {
        font-size: max(12px, 2cqw);
    }
    .lang-jp .reg-field input::placeholder {
        font-size: max(12px, 2cqw);
    }
    .lang-tw .reg-field input::placeholder {
        font-size: max(12px, 2cqw);
    }
    .lang-en .reg-agree label{font-size: max(9px, 2cqw);}
    .lang-en .reg-agree-all span{font-size: max(14px, 3.5cqw);}
    .lang-jp .reg-agree label{font-size: max(10px, 2.1cqw);}
    .lang-jp .reg-agree-all span{font-size: max(14px, 3.5cqw);}
    .lang-tw .wp-box{margin-top: -4%;}
    
}



@media (min-width: 1024px) {
    .pc.flex{display:flex;}
    .mobile.flex{display:none;}
    .pc.block{display:flex;}
    .mobile.block{display:none;}
    
    #main .page-inner{position: absolute;height: 100%;top:0;overflow: hidden;}
    #main .main_title{text-align: center;position: absolute;bottom: auto;bottom: 10%;}
    .lang-tw #main .main_title{bottom:8%;}
    .lang-en #main .main_title{bottom:12%;}
    /*#main .main_title img{width: auto;min-width: 1409px;}*/
    #main .main_title img{width: 60%;max-width: 100%;}
    #main .main_title img{min-width: 1150px;}
    #main .main_btn{position: absolute;bottom: auto;bottom: 18.5%;}
    #main .main_btn img{width: auto;}


    .ch-slide img{margin-left:5%;margin-top:3%;}
    .wp-list {width: 95%;}

    .wp-download.is-m{margin-top: 1.1cqw;}
    .wp-list-m{margin-top: 2cqw;}

    .wp-download.is-sns{margin-top: 7.95cqw;}
    .wp-list-sns{margin-top: 7.95cqw;}

    .lang-en .reg-agree label{font-size: max(11px, 1.3cqw);}
    .lang-en .reg-agree-all span{font-size: max(14px, 1.8cqw);}

    .lang-jp .reg-agree label{font-size: max(11px, 1.2cqw);}
    .lang-jp .reg-agree-all span{font-size: max(14px, 1.8cqw);}
    .lang-jp .reg-agree li{gap :0;}

    
}