.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.60);

    /* 스크린샷의 뒤쪽 화면 흐림 효과 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 20px;
    box-sizing: border-box;
}


.login-modal {
    position: relative;

    width: 890px;
    height: 760px;
    max-width: 90vw;
    max-height: 90vh;

    display: flex;
    overflow: hidden;

    background: #2e303d;

    border-radius: 16px;

    box-sizing: border-box;
}


.login-image {
    position: relative;

    width: 430px;
    height: 100%;

    flex: 0 0 430px;

    overflow: hidden;
}

.login-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 모바일 이미지 (표시 여부는 미디어쿼리, 높이는 --h220/--h160 modifier) */
.login-image-mobile {
    display: none;
}

.login-image-mobile img {
    display: block;

    width: 100%;
    height: 100%;

    /*object-fit: cover;*/
}


.login-content {
    position: relative;

    width: 460px;
    height: 100%;

    flex: 1;

    background: #2e303d;

    box-sizing: border-box;
}


.login-close {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 10;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: #505267;
    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.15s ease;
}

.login-close:hover {
    background: #606278;
}

.login-close span {
    position: relative;

    width: 14px;
    height: 14px;

    display: block;
}

.login-close span::before,
.login-close span::after {
    content: "";

    position: absolute;

    top: 6px;
    left: 0;

    width: 16px;
    height: 2px;

    background: #ffffff;
    border-radius: 2px;
}

.login-close span::before {
    transform: rotate(45deg);
}

.login-close span::after {
    transform: rotate(-45deg);
}


.login-form-wrap {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
}


.login-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}


.login-title {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}


.login-input-group {
    position: relative;

    width: 100%;

    margin-bottom: 12px;
}


.login-input {
    display: block;

    width: 100%;
    height: 40px;

    padding: 0 10px;

    border: 1px solid #4c4e5d;
    border-radius: 6px;

    outline: none;

    background: #292b37;
    color: #ffffff;

    font-size: 14px;

    box-sizing: border-box;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.login-input::placeholder {
    color: #777985;
}

.login-input:focus {
    border-color: #686b7d;
    background: #292b37;
}


.login-password {
    position: relative;
}

.login-password .login-input {
    padding-right: 42px;
}

/* 비밀번호 보기 버튼 */
.password-toggle {
    position: absolute;

    top: 0;
    right: 0;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;
    color: #ffffff;

    cursor: pointer;
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}


.login-buttons {
    display: flex;

    gap: 12px;
}


.login-button {
    width: 50%;
    height: 40px;

    padding: 0 16px;

    border: 0;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        filter 0.15s ease,
        background 0.15s ease;
}

.login-button-primary {
    background: #ff2fa3;
    color: #000000;
}

.login-button-primary:hover {
    filter: brightness(0.92);
}

.login-button-secondary {
    background: #505267;
    color: #ffffff;
}

.login-button-secondary:hover {
    background: #5b5d71;
}


/* =========================================
   2. 변형(modifier) 클래스 — 파일별로 다른 부분
========================================= */

/* --- .login-form-wrap : 안쪽 여백 / 스크롤 방식 --- */

/* login_new.html / code_new.html : 필드가 적어 고정 높이, 스크롤 없음 */
.login-form-wrap--pad56 {
    padding: 56px;
}

/* join_a_new.html / join_n_new.html : 필드가 많아 내부 스크롤 필요 */
.login-form-wrap--scroll {
    padding: 40px 56px;
    overflow-y: auto;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Chrome / Edge / Safari */
.login-form-wrap--scroll::-webkit-scrollbar {
    width: 6px;
}

.login-form-wrap--scroll::-webkit-scrollbar-track {
    background: transparent;
}

.login-form-wrap--scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.login-form-wrap--scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}


/* --- .login-form : 높이 방식 --- */

/* login_new.html / code_new.html : 버튼을 바닥에 고정(login-buttons--auto-top와 짝) */
.login-form--fill {
    height: 100%;
}

/* join_a_new.html / join_n_new.html : 내용 높이만큼만(스크롤 영역 안에서 자연스럽게 자람) */
.login-form--auto {
    height: auto;
}


/* --- .login-buttons : 상단 여백 방식 --- */

/* login_new.html / code_new.html : login-form--fill 과 짝 — 버튼을 바닥으로 밀어냄 */
.login-buttons--auto-top {
    margin-top: auto;
}

/* join_a_new.html / join_n_new.html : 고정 간격 */
.login-buttons--gap-top {
    margin-top: 16px;
}


/* --- .login-button : 모서리 모양 --- */

/* login_new.html / code_new.html */
.login-button--radius {
    border-radius: 6px;
}

/* join_a_new.html / join_n_new.html (원본 Tailwind의 rounded-full) */
.login-button--pill {
    border-radius: 100px;
}


/* --- .login-image-mobile : 모바일 이미지 높이 --- */

/* login_new.html / code_new.html */
.login-image-mobile--h220 {
    height: 220px;
}

/* join_a_new.html / join_n_new.html */
.login-image-mobile--h160 {
    height: 160px;
}


/* =========================================
   3. join 전용 컴포넌트
========================================= */

/* 가입유형 탭 (회원가입 / 무기명가입) */
.join-tabs {
    display: flex;

    gap: 4px;

    margin-bottom: 16px;
    padding: 4px;

    border-radius: 8px;

    background: #292b37;
}

.join-tab {
    flex: 1;

    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    color: #a3a5b3;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;
}

.join-tab.active {
    background: #ff2fa3;
    color: #000000;
}


/* 에러 상태 (필요할 때 .login-input-group 에 .error 클래스 추가) */
.login-input-group.error .login-input {
    border-color: #ff5b5b;
    border-width: 2px;
}

.login-input-error-text {
    display: none;

    margin-top: 4px;

    color: #ff5b5b;
    font-size: 12px;
}

.login-input-group.error .login-input-error-text {
    display: block;
}


/* 아이디 + 중복확인 버튼 줄 */
.login-input-row {
    display: flex;

    gap: 8px;

    margin-bottom: 10px;
}

.login-input-row .login-input-group {
    flex: 1;
    margin-bottom: 0;
}

.check-button {
    flex: 0 0 auto;

    height: 40px;

    padding: 0 16px;

    border: 0;
    border-radius: 6px;

    background: #505267;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;

    cursor: pointer;

    transition: background 0.15s ease;
}

.check-button:hover {
    background: #5b5d71;
}


/* 셀렉트 박스 (통신사 / 은행선택) */
.login-select {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 40px;

    padding: 0 10px 0 12px;

    border: 1px solid #4c4e5d;
    border-radius: 6px;

    background: #292b37;
    color: #777985;

    font-size: 14px;

    box-sizing: border-box;

    cursor: pointer;

    transition: border-color 0.15s ease;
}

.login-select:hover {
    border-color: #686b7d;
}

.login-select svg {
    width: 12px;
    height: 9px;
    flex: 0 0 auto;
    color: #686b7d;
}


/* =========================================
   4. Mobile
========================================= */

@media (max-width: 767px) {

    .login-modal-overlay {
        padding: 15px;
    }

    .login-modal {
        width: 100%;
        height: auto;
        max-width: 430px;
        max-height: 90vh;

        display: block;

        border-radius: 16px;
    }

    .login-image {
        display: none;
    }

    .login-image-mobile {
        display: block;

        width: 100%;

        overflow: hidden;
    }

    .login-content {
        width: 100%;
        height: auto;

        min-height: 360px;
    }

    .login-title {
        margin-bottom: 20px;
    }

    .login-buttons {
        gap: 10px;
    }

    .login-button {
        height: 40px;
        font-size: 13px;
    }

    .login-form-wrap--pad56 {
        padding: 32px 24px;
    }

    .login-form-wrap--scroll {
        max-height: calc(90vh - 160px);
        padding: 28px 20px;
    }
}


/* 작은 모바일 */
@media (max-width: 400px) {

    .login-modal-overlay {
        padding: 10px;
    }

    .login-buttons {
        flex-direction: column;
    }

    .login-button {
        width: 100%;
    }

    .login-form-wrap--pad56 {
        padding: 28px 20px;
    }

    .login-form-wrap--scroll {
        padding: 24px 16px;
    }
}


/* =========================================
   alert.css — 경고창(알림) 모달 스타일
   (alert_new.html 전용)

   원본 참조: 경고창.html (Vue 컴포넌트, Tailwind + scoped CSS)
   → 순수 HTML + CSS 로 정리, login.css 와 동일한 색상/톤 사용
========================================= */

.alert-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.60);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 20px;
    box-sizing: border-box;
}


.alert-dialog {
    width: 380px;
    max-width: 100%;

    background: #2e303d;

    border-radius: 12px;

    box-sizing: border-box;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}


.alert-dialog-header {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 24px 48px 0 24px;

    box-sizing: border-box;
}

.alert-dialog-icon {
    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    color: #ff4d4d;
}

.alert-dialog-title {
    flex: 1;

    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.alert-dialog-close {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: #a3a5b3;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;
}

.alert-dialog-close:hover {
    background: #3a3c4a;
    color: #ffffff;
}


.alert-dialog-content {
    padding: 20px 24px 24px;

    color: #c7c9d6;

    font-size: 14px;
    line-height: 1.6;
    text-align: center;

    box-sizing: border-box;
}


.alert-dialog-actions {
    display: flex;

    padding: 0 24px 24px;

    box-sizing: border-box;
}

.alert-dialog-button {
    width: 100%;
    height: 40px;

    border: 0;
    border-radius: 6px;

    background: #ff2fa3;
    color: #000000;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;

    transition: filter 0.15s ease;
}

.alert-dialog-button:hover {
    filter: brightness(0.92);
}


@media (max-width: 400px) {

    .alert-dialog-overlay {
        padding: 15px;
    }

    .alert-dialog {
        width: 100%;
    }

    .alert-dialog-header {
        padding: 20px 44px 0 20px;
    }

    .alert-dialog-content {
        padding: 16px 20px 20px;
    }

    .alert-dialog-actions {
        padding: 0 20px 20px;
    }
}


/* =========================================
   회원가입 모달(sign.html) 통합 오버라이드

   join_a_new.html / join_n_new.html 디자인을 실제 formWrap
   (필드 16개, .colWrap .col x2 구조 — 화면에는 join 목업처럼
   한 줄에 하나씩, 세로 스크롤로 전부 나열됨)에 적용하기 위한
   추가 규칙. .colWrap은 전역 CSS(app.min.css)가 이미
   grid-template-columns:repeat(1,1fr)로 1열 스택이라 별도
   오버라이드 불필요 — .col 두 개가 위아래로 이어서 쌓임.
   .msg / .red / .tel / .bir / .btnCont 등은 사이트 전역에서
   재사용되는 범용 클래스라서, 전역 규칙을 건드리지 않고
   .login-content 안에서만 적용되도록 전부 스코프 처리함.
========================================= */

/* 가입/취소 버튼 줄 — 전역 .btnCont 규칙이 페이지마다 달라
   충돌하므로 .login-content 안에서 명시적으로 재정의 */
.login-content .btnCont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0;
    background: none;
}

/* 안내/검증 메시지 (.msg, .msg_id, .msg_nick, .msg_recommender) */
.login-content .msg {
    margin: 6px 0 12px;
    padding: 0;

    color: #9a9cad;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.login-content .msg.ok {
    color: #2ecc71;
}

.login-content .msg.err {
    color: #ff5b5b;
}

/* 경고 문구 (.red) — 코인 지갑주소 안내 등 */
.login-content .red {
    margin: 6px 0 12px;
    padding: 0;

    background: none;
    border: 0;
    color: #ff5b5b;
    font-size: 12px;
    font-weight: 500;
}

/* 아이디+중복확인 / 연락처(전화번호) 등 행 사이 "-" 구분자 */
.login-input-sep {
    align-self: center;
    color: #686b7d;
    font-size: 14px;
}