@charset "utf-8";

/****************************************************************************************************************************************
W15 전용 인증 팝업 구조 CSS (W17 auth-w17.css 기반, W15 다크골드 색상 #ffb100 / #1a1510)
— 공용 _LoginPopup.cshtml + auth-ui.js 계약 유지
— .intro-popup / .login-wrap / .join-wrap / .code-wrap / .intro-closeBtn 구조
*****************************************************************************************************************************************/

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

/* 공용 auth-floating.css(가입/로그인/추천인 floating 폼)가 요구하는 토큰을 팝업 스코프에 W15 골드-다크 값으로 공급.
   W06 은 이 변수를 정의하는 스포츠 CSS 를 싣지 않으므로 팝업 스코프에서 직접 공급한다.
   .intro-popup 스코프라 팝업 안에서만 적용된다. */
.intro-popup {
    --bg-layer1: rgba(0, 0, 0, 0.5);             /* 입력 배경 */
    --color: #ffffff;                            /* 입력 텍스트 */
    --secondary: #ffb100;                        /* 플로팅(올라간) 라벨 = W06 골드 강조 */
    --border2-color: rgba(255, 177, 0, 0.25);  /* 입력 테두리 */
    --border2-font: #8b8b8b;                     /* resting 라벨 (가운데, 가독 가능한 중간톤) */
}

/* 배경 + 중앙정렬 */
.intro-popup .intro-inner {
    position: relative;
    padding: 30px 0;
    width: 100%; height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
}

/* 닫기 버튼 */
.intro-popup .intro-closeBtn {
    position: absolute;
    top: 10px; right: 15px;
    z-index: 9;
    width: 40px; height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 20, 16, 0.92);
    border: 1px solid rgba(255, 177, 0, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}
.intro-popup .intro-closeBtn > i,
.intro-popup .intro-closeBtn > svg {
    font-size: 18px;
    color: #cccccc;
}
@media (hover: hover) and (pointer: fine) {
    .intro-popup .intro-closeBtn:hover {
        background: rgba(255, 177, 0, 0.18);
        border-color: #ffb100;
    }
    .intro-popup .intro-closeBtn:hover > i,
    .intro-popup .intro-closeBtn:hover > svg { color: #ffb100; }
}

/* 탭 전환 — auth-ui.js 가 .active 로 토글 */
.intro-popup .login-wrap,
.intro-popup .join-wrap,
.intro-popup .code-wrap { display: none; }

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

/* intro-wrap — 패널 컨테이너 (W06 다크 + 골드 보더) */
.intro-popup .intro-wrap {
    position: relative;
    margin: auto;
    display: block;
    height: auto;
    padding: 30px;
    width: 420px;
    max-width: calc(100% - 30px);
    background: linear-gradient(180deg, #1a1510 0%, #000000 100%);
    border: 1px solid rgba(255, 177, 0, 0.35);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 177, 0, 0.12);
}

/* 제목 */
.intro-popup .intro-tit {
    position: relative;
    margin: 0 auto 20px auto;
    padding: 0 0 12px 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #ffb100;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 177, 0, 0.3);
}

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

/* 입력 리스트 */
.intro-popup ul.intro-list {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    list-style: none;
}
.intro-popup ul.intro-list > li {
    position: relative;
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
}
.intro-popup ul.intro-list > li > label {
    display: block;
    margin: 0 auto;
    padding: 5px 2px;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #cccccc;
}
.intro-popup ul.intro-list > li > input,
.intro-popup ul.intro-list > li > select {
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 177, 0, 0.25);
    border-radius: 8px;
    transition: 0.2s;
}
.intro-popup ul.intro-list > li > input:focus,
.intro-popup ul.intro-list > li > select:focus {
    outline: none;
    border-color: #ffb100;
    box-shadow: 0 0 0 3px rgba(255, 177, 0, 0.2);
}
.intro-popup ul.intro-list > li > input::placeholder { color: #777777; }
.intro-popup ul.intro-list > li > select:invalid { color: #777777; }
.intro-popup ul.intro-list > li > select > option {
    color: #ffffff;
    background: #1a1510;
}

/* 중복확인 버튼 포함 행 */
.intro-popup .check-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.intro-popup .check-list > input {
    box-sizing: border-box;
    padding: 0 15px;
    width: calc(100% - 110px);
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 177, 0, 0.25);
    border-radius: 8px;
    transition: 0.2s;
}
.intro-popup .check-list > input:focus {
    outline: none;
    border-color: #ffb100;
    box-shadow: 0 0 0 3px rgba(255, 177, 0, 0.2);
}
.intro-popup .check-list > input::placeholder { color: #777777; }
.intro-popup .check-list > .btn-check {
    /* 글씨 가로·세로 중앙 정렬. (높이 47px·padding 은 intro.css 의 .check-list>button 규칙에서 옴 —
       기존 height/line-height:44px 가 그 padding 과 충돌해 글씨가 위로 밀렸던 것을 제거) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1510;
    background: #ffb100;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

/* 버튼 영역 */
.intro-popup .intro-btns {
    position: relative;
    margin: 20px auto 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}
.intro-popup .intro-btns > button {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 46px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    letter-spacing: 0.02em;
}

/* 주요 액션 — 골드 */
.intro-popup .intro-login,
.intro-popup .ok-join,
.intro-popup .go-join {
    color: #1a1510;
    background: linear-gradient(135deg, #ffb100 0%, #bb773b 100%);
    box-shadow: 0 4px 15px rgba(255, 177, 0, 0.32);
}

/* 보조 액션 — 다크 */
.intro-popup .intro-join,
.intro-popup .go-login {
    color: #ffb100;
    background: rgba(255, 177, 0, 0.12);
    border: 1px solid rgba(255, 177, 0, 0.45);
}

@media (hover: hover) and (pointer: fine) {
    .intro-popup .intro-btns > button:hover {
        filter: brightness(110%);
        transform: translateY(-1px);
    }
    .intro-popup .check-list > .btn-check:hover { filter: brightness(110%); }
}



/* 모바일 반응형 */
@media (max-width: 470px) {
    .intro-popup .intro-wrap {
        padding: 25px 20px;
        width: calc(100% - 30px);
    }
    .intro-popup .intro-tit { font-size: 17px; }
    .intro-popup ul.intro-list > li > input,
    .intro-popup ul.intro-list > li > select,
    .intro-popup .check-list > input {
        height: 42px;
        line-height: 42px;
    }
    .intro-popup .intro-btns > button { height: 44px; }
    .intro-popup .intro-closeBtn {
        width: 35px; height: 35px;
        top: 5px; right: 25px;
    }
    .intro-popup .intro-closeBtn > i,
    .intro-popup .intro-closeBtn > svg { font-size: 16px; }
}


/****************************************************************************************************************************************
W06 고유 — 원본 layer_pop/{login,join,code}.php + popup.css 재현
  원본의 .intro-wrap/.join-wrap/ul.intro-list 는 공용 _LoginPopup 과 클래스명이 겹치면서 의미가 달라
  popup.css 로 옮기지 않고 여기서 .intro-popup 스코프로 다시 쓴다(공용 auth-floating.css 를 이기려면 접두 필요).
*****************************************************************************************************************************************/

/* 입력칸 — 원본 ul.intro-list > li (#2c2c2c 배경 + 검정 테두리) */
.intro-popup {
    --bg-layer1: #2c2c2c;
    --border2-color: #000000;
    --border2-font: #8b8b8b;
}

/* 로그인/추천인 패널 좌측 이미지 — 원본 .intro-left > img(login_item01.png).
   공용 파셜 마크업을 건드리지 않으려고 ::before 로 재현. 좁은 화면에서는 숨김. */
@media (min-width: 900px) {
    .intro-popup:not(:has(.join-wrap.active)) .intro-wrap {
        width: 760px;
        padding: 0;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }
    .intro-popup:not(:has(.join-wrap.active)) .intro-wrap::before {
        content: "";
        flex: 0 0 50%;
        background: #000 url('../img/login/login_item01.png') center top no-repeat;
        background-size: cover;
    }
    .intro-popup:not(:has(.join-wrap.active)) .login-wrap,
    .intro-popup:not(:has(.join-wrap.active)) .code-wrap {
        flex: 1 1 50%;
        padding: 40px;
    }
}

/* 버튼 — 원본 popup.css 의 메탈/골드 그라디언트 */
.intro-popup .intro-login,
.intro-popup .go-login {
    background: linear-gradient(90deg, #383838 0%, #b6b6b6 20%, #eeeeee 35%, #ffffff 50%, #eeeeee 65%, #b6b6b6 80%, #383838 100%);
    color: #000000;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
    border: none;
}
.intro-popup .intro-join,
.intro-popup .go-join,
.intro-popup .ok-join {
    background: linear-gradient(90deg, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);
    color: #000000;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
    border: none;
}
@media (hover: hover) and (pointer: fine) {
    .intro-popup .intro-login:hover,
    .intro-popup .go-login:hover,
    .intro-popup .intro-join:hover,
    .intro-popup .go-join:hover,
    .intro-popup .ok-join:hover { filter: brightness(1.12); }
}