/**
 * 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;}
}