/**
 * auth-popup.css — 로그인/회원가입 팝업 스타일 (모든 스킨 공용)
 *
 * _LoginPopup partial (.intro-popup)의 레이아웃/포지셔닝을 담당한다.
 *
 * 변수 우선순위:
 *   1차: 스킨 CSS에서 정의된 변수 (--bg-layer*, --color 등)
 *   2차: 스킨 CSS에서 정의된 대체 변수 (--second-bg, --black-color 등)
 *   3차: 하드코딩 fallback
 */

/* 팝업 오버레이 */
.intro-popup {display:none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; padding: 20px; width: 100%; height: 100%; background: var(--intro-overlay-bg, rgba(0,0,0,0.7)); overflow-y: auto;}
.intro-popup.active {display:block;}

/* 팝업 컨테이너 */
.intro-inner {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); padding:0; width: 600px; max-height: calc(100vh - 40px); display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: var(--body-bg, var(--second-bg, #1a1a2e)); border-radius: 10px; overflow-y: auto;}

/* 닫기 버튼 */
.intro-closeBtn {position: absolute; right:20px; top:20px; z-index: 1; cursor: pointer;}
.intro-closeBtn > svg {font-size:18px; font-weight: 400; cursor: pointer; color: var(--orange-color, #f56406);}

/* 로그인 버튼 대기(보안 확인 중) 표시는 전 스킨 공용 auth-floating.css 의 .intro-login.is-busy 참조 */


/* 폼 래퍼 */
.intro-wrap {position: relative; margin:0 auto; padding:0; width: 100%;}

/* 제목 */
.intro-tit {position: relative; margin:0 auto 20px auto; padding:15px 25px; width: 100%; text-align: left; font-size:18px; font-weight: 600; background: var(--bg-layer2, var(--third-bg, #252d37));}

/* 업체별 기본 추천인코드 안내 (Site:Brand:ReferralCode 설정 시에만 렌더링) */
.code-notice {margin:-8px auto 14px; padding:0 25px; width: 100%; font-size:13px; line-height:1.6; color: var(--secondary, var(--gray4-color, #aaa));}
.code-notice > p {margin:0;}
.code-notice strong {font-weight:700; color: var(--orange-color, #f56406);}

/* 입력 목록 */
ul.intro-list {position: relative; margin:0 auto; padding:0 25px; width: 100%; list-style: none;}
ul.intro-list > li {position: relative; margin:10px auto; padding:0; width: 100%;}
ul.intro-list > li > label {display: block; margin:0 auto; padding:5px 0; width: 100%; text-align: left; font-weight: 600; color: var(--secondary, var(--gray4-color, #aaa));}
ul.intro-list > li > input {display:block; margin: 0 auto; padding:10px 15px; width: 100%; line-height: 25px; text-align: left; font-size: 15px; font-weight:500; color: var(--color, var(--white-color, #eee)); background: var(--bg-layer1, var(--black-color, #000)); border: 1px var(--bg-layer4, var(--gray2-color, #404447)) solid; border-radius: 5px;}
ul.intro-list > li > input::placeholder {color: var(--placeholder-color, #898989); font-weight: 300;}
ul.intro-list > li > input:focus {border-color: var(--bg-layer6, var(--white-color, #888)); outline: none;}
ul.intro-list > li > select {display:block; margin: 0 auto; padding:10px 15px; width: 100%; height: 45px; line-height: 25px; text-align: left; font-size: 15px; font-weight:500; color: var(--color, var(--white-color, #eee)); background: var(--bg-layer1, var(--black-color, #000)); border: 1px var(--bg-layer4, var(--gray2-color, #404447)) solid; border-radius: 5px;}
ul.intro-list > li > select:invalid {color: var(--placeholder-color, #898989); font-weight: 300;}
ul.intro-list > li > select:focus {border-color: var(--bg-layer6, var(--white-color, #888)); outline: none;}
ul.intro-list > li > select > option {color: var(--color, var(--white-color, #eee)); background: var(--body-bg, var(--second-bg, #1f2630));}

/* 중복확인 */
ul.intro-list > li.check-list {display: flex; justify-content:space-between; align-items: center; gap:5px;}
ul.intro-list > li.check-list > input {width: 70%;}
ul.intro-list > li.check-list > button {margin:0; padding:0 15px; width: 30%; line-height: 40px; font-weight: 600; color:#fff; background: var(--blue-bg, #2168cc); border-radius: 5px;}

/* 버튼 영역 */
.intro-btns {position: relative; margin:15px auto; padding:0 25px 20px 25px; width: 100%;}
.intro-btns > button {display: block; margin: 5px auto; padding:12px 5px; width: 100%; text-align: center; font-size: 15px; font-weight: bold; color: #fff; border-radius: 5px; transition: 0.3s ease;}
.intro-login,
.go-join,
.ok-join {background: var(--blue-color, var(--orange-color, #f56406));}
.intro-join,
.go-login {background: var(--bg-layer7, var(--green-color, #27a17c));}

/* SNS 아이콘 */
.intro-sns {position: relative; padding:0 25px 35px 25px; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
.intro-sns > a {position: relative; width:40px; height:40px; display: flex; justify-content: center; align-items: center; background: var(--bg-layer3, var(--third-bg, #333)); border: 1px var(--board-1, var(--gray2-color, #444)) solid; border-radius: 5px;}
.intro-sns > a > i {font-size:20px; color: var(--secondary, var(--gray4-color, #aaa));}

/* 로그인/가입/코드 탭 전환 */
.login-wrap,
.join-wrap,
.code-wrap {display: none;}

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

/* 호버 */
@media (hover: hover) and (pointer: fine) {
    .intro-login:hover,
    .go-join:hover,
    .ok-join:hover,
    .intro-join:hover,
    .go-login:hover,
    ul.intro-list > li.check-list > button:hover {filter: brightness(120%);}

    .intro-sns > a:hover > i {color: var(--color, var(--white-color, #eee));}
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    .intro-inner {width: 95%;}
    .login-wrap.active,
    .join-wrap.active,
    .code-wrap.active {padding-bottom: 20px;}
}

/****************************************************************************************************************************************
확인창(SweetAlert2)은 이 팝업보다 위에 — 🔴 공용 기본값

.swal2-container 기본 z-index 는 1060 인데 위 .intro-popup 은 9999 다. 그대로 두면 확인창이
팝업 **뒤로 깔려 [확인] 을 누를 수 없다**. 메시지는 DOM 에 있어 "떴다" 고 착각하기 쉽지만,
가입 성공 콜백(location.reload)이 실행되지 않아 화면이 그대로 멈춘다.
→ diamond 업체가 "가입하기가 반응하지 않는다" 고 신고한 실제 원인(2026-09-28).
   가입은 200 으로 성공했는데 성공창의 확인을 못 눌러 실패로 보였다.

지금까지 스킨마다 각자 이 규칙을 넣어 왔고(st10·st11·hangang·w06·w15·w16·w18a·st88-cheongung),
**넣지 않은 스킨이 9개 남아 있었다**(Default·ST02·W01·W04·W05·W12·W17·gd01·st02a).
이식할 때마다 빠지는 자리라 공용 기본값으로 올린다. 스킨이 더 높은 값으로 덮는 것은 그대로 동작한다.
*****************************************************************************************************************************************/
/* !important — 일부 스킨은 vendor sweetalert2.css(기본 1060)를 자기 폴더에서 따로 로드한다.
   로드 순서에 따라 이 규칙이 밀릴 수 있어 못 박는다(기존 스킨들이 !important 를 쓰던 이유). */
.swal2-container,
.swal2-popup {z-index: 100000 !important;}

/****************************************************************************************************************************************
로그인 팝업 언어선택 국기 — 긴자·제니스·테라만 **우측 하단** (업체요청 2026-10-12)

🔴 .intro-lang-strip 은 공용 기본 스타일이 없다(st02·w08 만 자체 정의). 그래서 나머지 스킨에서는
   고정 오버레이(.intro-popup, inset:0)의 좌상단에 그냥 붙어 있다. 그 셋만 우측 하단으로 옮긴다.

🔴 **W08 사고 선례(2026-09-28)**: 이 띠를 하단 **가운데**로 보냈더니 가입 폼의 [가입하기] 버튼 위에
   떠서 클릭을 통째로 가로챘다(PC 에서만. 모바일은 폼이 좁아 안 겹쳤다).
   → 그래서 가운데가 아니라 **화면 코너**(right/bottom 18px)에 붙인다. 중앙 패널(600px)과 떨어져 있어
     데스크톱에서 폼과 겹치지 않는다.

🔴 **모바일은 기존(좌상단) 유지**. 모바일은 패널이 화면폭 95% 라 하단 코너가 폼·버튼과 겹칠 수 있다.
   업체 요청도 PC 로그인화면 기준이다.

적용 대상은 세 브랜드뿐 — 다른 업체 로그인 화면은 한 픽셀도 바뀌지 않는다.
*****************************************************************************************************************************************/
@media screen and (min-width: 769px) {
    body.brand-ginza .intro-popup .intro-lang-strip,
    body.brand-zenith .intro-popup .intro-lang-strip,
    body.brand-tera .intro-popup .intro-lang-strip {
        position: absolute;
        right: 18px; bottom: 18px;
        left: auto; top: auto;
        display: flex; gap: 10px; align-items: center;
    }
}