@charset "utf-8";

/****************************************************************************************************************************************
ST02 전용 인증 팝업 구조 CSS
— auth-popup.css(공용) 대신 사용
— popup.css의 원본 스타일과 auth-ui.js의 구조적 요구사항을 연결
*****************************************************************************************************************************************/

/* 팝업 오버레이 — auth-ui.js가 .intro-popup.active로 제어 */
.intro-popup {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: var(--z-popup);
    width: 100%; height: 100%;
}
.intro-popup.active { display: block; }

/* 오버레이 배경 + 센터링 — 원본 .layer-bg 역할 */
.intro-inner {
    position: relative;
    padding: 30px 0;
    width: 100%; height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    overflow-y: auto;
}

/* 닫기 버튼 — 원본 .layer-close 스타일 */
.intro-closeBtn {
    position: absolute;
    top: 10px; right: 15px;
    z-index: 9;
    width: 40px; height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-layer1);
    border-radius: 50%;
    cursor: pointer;
}
.intro-closeBtn > i,
.intro-closeBtn > svg {
    font-size: 20px;
    color: var(--gray-color);
}
@media (hover: hover) and (pointer: fine) {
    .intro-closeBtn:hover > i,
    .intro-closeBtn:hover > svg { color: var(--color); }
}

/* 언어 전환 플래그 스트립 — close 버튼 대칭 위치 (top-left) */
.intro-lang-strip {
    position: absolute;
    top: 15px; left: 15px;
    z-index: 9;
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-layer1);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.intro-lang-strip > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, transform 0.15s;
}
.intro-lang-strip > a > .flags {
    display: inline-block;
    line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
    .intro-lang-strip > a:hover {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* 로그인/가입/코드 탭 전환 — auth-ui.js가 .active로 토글 */
.login-wrap,
.join-wrap,
.code-wrap { display: none; }

.login-wrap.active,
.join-wrap.active,
.code-wrap.active { display: block; }

/* Turnstile 인증 게이트 */
.turnstile-gate {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background: var(--bg-layer1);
    border-radius: 15px;
}

/* Turnstile 게이트 표시 중 폼 chrome 축소 */
.intro-popup:has(.login-wrap.active.has-gate) .intro-wrap,
.intro-popup:has(.join-wrap.active.has-gate) .intro-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    padding: 0;
    box-shadow: none;
}

/* 배너 이미지 영역 — 원본 추가 요소 */
.intro-banner {
    position: relative;
    overflow: hidden;
}

/* 가입하기/추천코드 버튼 (auth-ui.js 셀렉터 호환) */
.go-join { color: var(--white-color); background: var(--red-bg); }
.go-login { color: var(--white-color); background: var(--blue-bg); }
.ok-join { color: var(--white-color); background: var(--red-bg); }

@media (hover: hover) and (pointer: fine) {
    .go-join:hover,
    .go-login:hover,
    .ok-join:hover { filter: brightness(120%); }
}

/* 모바일 반응형 */
@media (max-width: 470px) {
    .intro-closeBtn {
        width: 35px; height: 35px;
        top: 5px; right: 25px;
    }
    .intro-closeBtn > i,
    .intro-closeBtn > svg { font-size: 18px; }

    /* 플래그 스트립: 모바일에서는 크기 축소 + 위치 조정 */
    .intro-lang-strip {
        top: 10px; left: 10px;
        gap: 4px;
        padding: 4px 8px;
    }
    .intro-lang-strip > a {
        width: 22px; height: 22px;
        font-size: 16px;
    }
}