@charset "UTF-8";

/* ==========================================================================
   Email verification gate (Figma node 902:68)
   - index.php 잠금 상태(html.is-vault-locked)에서만 로드
   - 인트로(.hero_wrap) 위에 dim + 카드. 인증 성공 시 .is-unlocking 으로 dim/카드 fade-out
   ========================================================================== */

/* 잠금 상태 — 인트로 한 화면만, 스크롤 없음 */
html.is-vault-locked,
html.is-vault-locked body {
    overflow: hidden;
    background: #1e1e1e;
}
html.is-vault-locked .fullpage_wrap > .section_intro {
    background: #1e1e1e;
}
@media screen and (max-width: 768px) {
    /* 모바일 480lvh 스크롤존 해제 — 스티키 스테이지(100lvh)만 */
    html.is-vault-locked .fullpage_wrap > .section_intro {
        height: 100lvh;
    }
}

.vgate {
    --vgate-error: #ff6b6b;
    --vgate-sand-glow: 0 0 4px rgba(166, 154, 132, 0.8);
    --vgate-error-glow: 0 0 4px rgba(255, 107, 107, 0.8);
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.vgate *,
.vgate *::before,
.vgate *::after {
    box-sizing: border-box;
}

/* 배경 dim — Figma Rectangle 48 (타원 radial) */
.vgate_dim {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse farthest-side at 50% 50%,
        rgba(0, 0, 0, 0.4) 41.346%,
        rgba(16, 16, 16, 0.55) 70.673%,
        rgba(32, 32, 32, 0.7) 100%
    );
    transition: opacity 0.9s ease;
}

/* 카드 */
.vgate_dialog {
    position: relative;
    width: 429px;
    max-width: 100%;
    opacity: 0;
    transform: translateY(16px);
    animation: vgate-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.vgate_card {
    padding: 6px;
    border-radius: 20px;
    background: linear-gradient(143.47deg, #282828 9.17%, #161616 71.97%);
    box-shadow:
        0 2px 30px rgba(255, 255, 255, 0.6),
        0 2px 2px rgba(255, 255, 255, 0.3);
}
.vgate_card_inner {
    display: grid;
    min-height: 246px;
    padding: 32px 15px;
    border: 1px solid var(--color-brand-sand);
    border-radius: 16px;
}

/* 스텝 — 같은 grid 셀에 겹쳐 두고 crossfade (카드 크기 고정) */
.vgate_step {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-width: 0;
    margin: 0;
    transition:
        opacity 0.45s ease,
        visibility 0.45s;
}
.vgate_step:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.vgate_step-code {
    gap: 16px;
}

.vgate_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.vgate_logo {
    display: block;
    width: 28.59px;
    height: 30px;
}
.vgate_title {
    margin: 0;
    font-family: var(--font-marcellus);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.13px;
    color: var(--color-brand-sand);
}

/* ── Step 1: 이메일 입력 ───────────────────────────────── */
.vgate_field {
    position: relative;
    width: 100%;
    height: 62px;
}
.vgate_input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 60px 0 20px;
    border: 1px solid var(--color-gray-600);
    border-radius: 8px;
    background: transparent;
    font-family: "Marcellus", var(--font-pretendard);
    font-size: 18px;
    letter-spacing: -0.09px;
    color: var(--color-brand-white);
    caret-color: var(--color-brand-sand);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
.vgate_input::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
}
/* 크롬 자동완성 배경 제거 */
.vgate_input:-webkit-autofill {
    -webkit-text-fill-color: var(--color-brand-white);
    transition: background-color 9999s ease-out 0s;
}
/* 이메일 입력 시 — 테두리 + 쉐도우 */
.vgate_input:focus,
.vgate_field.is-filled .vgate_input {
    border-color: var(--color-brand-sand);
    box-shadow: var(--vgate-sand-glow);
}
/* 이메일 틀렸을 때 — 입력값 자리에 에러 문구 */
.vgate_field.is-error .vgate_input {
    border-color: var(--vgate-error);
    box-shadow: var(--vgate-error-glow);
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.vgate_field.is-error .vgate_input::placeholder {
    color: transparent;
}
.vgate_field_msg {
    position: absolute;
    top: 50%;
    left: 21px;
    right: 60px;
    overflow: hidden;
    font-family: "Marcellus", var(--font-pretendard);
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.09px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-brand-white);
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.vgate_field.is-error .vgate_field_msg {
    opacity: 1;
}
.vgate_submit {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}
.vgate_submit img {
    display: block;
    width: 100%;
    height: 100%;
}
.vgate_submit:hover {
    transform: translateX(2px);
}

/* 언어 선택 — 국기 버튼 3개 (26px, 간격 12px, Figma 943:294). 현재 언어만 선명 + 샌드 링 */
.vgate_lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: -8px;
}
.vgate_lang_item {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    opacity: 0.45;
    box-shadow: 0 0 0 1px transparent;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.vgate_lang_item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.vgate_lang_item:hover,
.vgate_lang_item:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}
.vgate_lang_item.is-active {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--color-brand-sand);
}
.vgate.is-busy .vgate_lang {
    pointer-events: none;
}

/* ── Step 2: 보안 코드 ─────────────────────────────────── */
.vgate_code {
    display: flex;
    gap: 6px;
    width: 100%;
}
.vgate_digit {
    flex: 1 1 0;
    min-width: 0;
    height: 62px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-gray-600);
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-marcellus);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.15px;
    text-align: center;
    color: var(--color-white);
    caret-color: var(--color-brand-sand);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
/* 숫자 입력된 칸 / 현재 칸 — 테두리 + 쉐도우 */
.vgate_digit:focus,
.vgate_digit.is-filled {
    border-color: var(--color-brand-sand);
    box-shadow: var(--vgate-sand-glow);
}
.vgate_code.is-error .vgate_digit {
    border-color: var(--vgate-error);
    box-shadow: var(--vgate-error-glow);
}
.vgate_code.is-error {
    animation: vgate-shake 0.4s ease;
}

.vgate_meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
    font-family: var(--font-pretendard);
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.075px;
    color: var(--color-brand-white);
}
.vgate_meta > span {
    font: inherit;
    font-weight: 300;
}
.vgate_timer {
    font-variant-numeric: tabular-nums;
}
.vgate_meta.is-error .vgate_meta_text {
    color: var(--vgate-error);
}
.vgate_resend {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}
.vgate_resend:disabled {
    opacity: 0.4;
    cursor: default;
}

/* 요청 중 */
.vgate.is-busy .vgate_submit,
.vgate.is-busy .vgate_resend {
    opacity: 0.4;
    pointer-events: none;
}

/* dev_mode 코드 표시 (auth/config.php) */
.vgate_dev {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 20px 0 0;
    font-family: var(--font-pretendard);
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

/* ── 인증 성공 — 금고 밝아짐 ─────────────────────────────── */
.vgate.is-unlocking .vgate_dim {
    opacity: 0;
}
.vgate.is-unlocking .vgate_dialog {
    animation: vgate-card-out 0.5s ease forwards;
}

@keyframes vgate-card-in {
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes vgate-card-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}
@keyframes vgate-shake {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@media screen and (max-width: 768px) {
    .vgate_card_inner {
        min-height: 220px;
        padding: 28px 13px;
    }
    .vgate_step {
        gap: 24px;
    }
    .vgate_step-code {
        gap: 14px;
    }
    .vgate_head {
        gap: 12px;
    }
    .vgate_title {
        font-size: 22px;
    }
    .vgate_field {
        height: 54px;
    }
    /* iOS 입력 시 자동 확대 방지 — 16px 이상 */
    .vgate_input,
    .vgate_field_msg {
        font-size: 16px;
    }
    .vgate_input {
        padding: 0 52px 0 16px;
    }
    .vgate_field_msg {
        left: 17px;
        right: 52px;
    }
    .vgate_submit {
        right: 14px;
    }
    .vgate_digit {
        height: 50px;
        font-size: 24px;
    }
    .vgate_code {
        gap: 5px;
    }
    .vgate_meta {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vgate_dialog {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .vgate_code.is-error {
        animation: none;
    }
}

/* 인증된 탭의 재방문(새로고침·언어 전환) — 탭 토큰 확인 중에는 팝업을 숨긴다 (js/verify.js) */
html.vgate-resuming .vgate {
    visibility: hidden;
}