.modal-overlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

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

        backdrop-filter: blur(5px);

        display: flex;

        justify-content: center;

        align-items: center;

        z-index: 1000;

    }



    .modal-container {

        background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);

        border-radius: 20px;

        width: 90%;

        max-width: 500px;

        max-height: 90vh;

        overflow-y: auto;

        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

        border: 1px solid rgba(255, 255, 255, 0.1);

    }



    .modal-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 17px 30px 20px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }



    .logo-section {

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .logo {

        width: 215px;

        height: 65px;

        border-radius: 10px;

    }



    .close-btn {

        width: 40px;

        height: 40px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.1);

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: all 0.3s ease;

        color: #fff;

    }



    .close-btn:hover {

        background: rgba(255, 255, 255, 0.2);

        transform: rotate(90deg);

    }



    .modal-body {

        padding: 30px;

    }



    .join-form {

        display: flex;

        flex-direction: column;

        gap: 25px;

    }



    .form-group {

        display: flex;

        flex-direction: column;

        gap: 8px;

    }



    .form-label {

        color: #fff;

        font-size: 14px;

        font-weight: 600;

        margin-bottom: 5px;

    }



    .input-wrapper {

        position: relative;

    }



    .form-input {

        width: 100%;

        padding: 15px 50px 15px 20px;

        background: rgba(255, 255, 255, 0.05);

        border: 2px solid rgba(255, 255, 255, 0.1);

        border-radius: 12px;

        color: #fff;

        font-size: 14px;

        transition: all 0.3s ease;

        box-sizing: border-box;

    }



    .form-input:focus {

        outline: none;

        border-color: #667eea;

        background: rgba(255, 255, 255, 0.1);

        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);

    }



    .form-input::placeholder {

        color: rgba(255, 255, 255, 0.5);

    }



    .input-icon {

        position: absolute;

        right: 15px;

        top: 50%;

        transform: translateY(-50%);

        color: rgba(255, 255, 255, 0.4);

        font-size: 16px;

    }



    .currency-display {

        margin-bottom: 10px;

    }



    .currency-badge {

        background: linear-gradient(45deg, #667eea, #764ba2);

        color: white;

        padding: 15px 20px;

        border-radius: 12px;

        display: flex;

        align-items: center;

        gap: 10px;

        font-weight: 600;

        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);

    }



    .currency-badge i {

        font-size: 20px;

    }



    .help-text {

        color: rgba(255, 255, 255, 0.6);

        font-size: 12px;

        line-height: 1.4;

        margin-top: 5px;

    }



    .submit-btn {

        background: linear-gradient(45deg, #667eea, #764ba2);

        color: white;

        border: none;

        padding: 18px 30px;

        border-radius: 12px;

        font-size: 16px;

        font-weight: 700;

        cursor: pointer;

        transition: all 0.3s ease;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        margin-top: 20px;

        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);

    }



    .submit-btn:hover {

        transform: translateY(-2px);

        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);

    }



    .submit-btn:active {

        transform: translateY(0);

    }



    .btn-text {

        font-size: 16px;

    }



    .warning-notice {

        background: rgba(255, 193, 7, 0.1);

        border: 1px solid rgba(255, 193, 7, 0.3);

        border-radius: 10px;

        padding: 15px;

        display: flex;

        align-items: center;

        gap: 10px;

        color: #ffc107;

        font-size: 13px;

        margin-top: 20px;

    }



    .warning-notice i {

        font-size: 16px;

    }



    /* 스크롤바 스타일링 */

    .modal-container::-webkit-scrollbar {

        width: 6px;

    }



    .modal-container::-webkit-scrollbar-track {

        background: rgba(255, 255, 255, 0.1);

        border-radius: 3px;

    }



    .modal-container::-webkit-scrollbar-thumb {

        background: rgba(255, 255, 255, 0.3);

        border-radius: 3px;

    }



    .modal-container::-webkit-scrollbar-thumb:hover {

        background: rgba(255, 255, 255, 0.5);

    }



    .modal-container::-webkit-scrollbar {

        display: none;

    }



    /* 반응형 */

    @media (max-width: 768px) {

        .modal-container {

            width: 95%;

            margin: 20px;

        }



        .modal-header {

            padding: 20px;

        }



        .modal-body {

            padding: 20px;

        }

    }

    /* 인증 버튼 */

    .phone-verify-btn {

        position: absolute;

        right: 45px;

        top: 50%;

        transform: translateY(-50%);

        width: 60px;

        height: 35px;

        background: linear-gradient(45deg, #667eea, #764ba2);

        color: white;

        border: none;

        border-radius: 8px;

        font-size: 14px;

        cursor: pointer;

        z-index: 2;

        transition: all 0.3s ease;

    }

    .phone-verify-btn:hover {

        background: linear-gradient(45deg, #764ba2, #667eea);

        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

    }

    .phone-verify-btn:disabled {

        background: #cccccc;

        cursor: not-allowed;

    }

    .modal-popup {

        position: fixed;

        top: 0; left: 0;

        width: 100%; height: 100%;

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

        z-index: 2000;

        display: none;

    }

    .modal-popup.active {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .popup-content {

        background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);

        border-radius: 15px;

        padding: 30px;

        width: 90%;

        max-width: 400px;

        box-shadow: 0 25px 50px rgba(0,0,0,0.5);

        border: 1px solid rgba(255,255,255,0.1);

    }

    .popup-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 30px;

    }

    .popup-header h3 { color: #fff; margin: 0; font-size: 24px; }

    .popup-close {

        background: none; border: none; color: #fff;

        font-size: 28px; cursor: pointer;

        width: 30px; height: 30px;

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

        border-radius: 50%;

        transition: all 0.3s ease;

    }

    .popup-close:hover { background: rgba(255,255,255,0.1); }

    .phone-verify-content { text-align: center; }

    .timer { color: #667eea; font-size: 20px; margin-bottom: 20px; font-weight: 600; }

    .verify-input-wrap { display: flex; gap: 10px; margin-bottom: 15px; }

    .verify-code { flex: 1; }

    .verify-confirm-btn {

        width: 80px;

        background: linear-gradient(45deg, #667eea, #764ba2);

        color: white; border: none;

        border-radius: 8px; font-size: 14px;

        cursor: pointer; padding: 12px;

        transition: all 0.3s ease;

    }

    .verify-confirm-btn:hover {

        transform: translateY(-2px);

        box-shadow: 0 5px 15px rgba(102,126,234,0.4);

    }

    .verify-message { font-size: 14px; margin-top: 15px; padding: 10px; border-radius: 8px; }

    .verify-message.error {

        color: #ff4444;

        background: rgba(255,68,68,0.1);

        border: 1px solid rgba(255,68,68,0.3);

    }

    .verify-message.success {

        color: #00ff88;

        background: rgba(0,255,136,0.1);

        border: 1px solid rgba(0,255,136,0.3);

    }

    /* 다중코인 : 유효성체크 버튼(.verify-btn) — mario 미보유 클래스, 지갑행 검증버튼용 S */

    .verify-btn {

        position: absolute;

        right: 10px;

        top: 50%;

        transform: translateY(-50%);

        background: linear-gradient(45deg, #667eea, #764ba2);

        color: white;

        border: none;

        padding: 8px 15px;

        border-radius: 6px;

        font-size: 12px;

        cursor: pointer;

        transition: all 0.3s ease;

        z-index: 2;

    }

    .verify-btn:hover {

        opacity: 0.9;

    }

    .verify-btn:disabled {

        opacity: 0.6;

        cursor: not-allowed;

    }

    /* 다중코인 : 코인 지갑 등록 UI */

    .wallet-row {

        border: 1px solid rgba(255, 255, 255, 0.12);

        border-radius: 12px;

        padding: 14px;

        margin-bottom: 12px;

        display: flex;

        flex-direction: column;

        gap: 10px;

        background: rgba(255, 255, 255, 0.03);

    }

    .wallet-row-head {

        display: flex;

        align-items: center;

        gap: 8px;

    }

    .wallet-coin, .wallet-network {

        flex: 1;

        min-width: 0;

        padding-right: 20px; /* 다중코인 : 셀렉트는 아이콘 없음 → 우측 패딩 축소 */

    }

    /* 다중코인 : 드롭다운 항목 가독성(흰 배경에 흰 글씨로 안 보이던 문제) — 모달 다크테마 맞춤 */

    .wallet-coin option, .wallet-network option {

        background: #1a1a2e;

        color: #fff;

    }

    .remove-wallet-btn {

        flex: 0 0 auto;

        width: 38px;

        height: 38px;

        border-radius: 8px;

        border: none;

        background: rgba(255, 71, 87, 0.15);

        color: #ff6b6b;

        cursor: pointer;

        font-size: 14px;

    }

    .remove-wallet-btn:hover { background: rgba(255, 71, 87, 0.3); }

    .add-wallet-btn {

        width: 100%;

        padding: 12px;

        border-radius: 10px;

        border: 1px dashed rgba(255, 255, 255, 0.3);

        background: rgba(255, 255, 255, 0.04);

        color: #fff;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.2s ease;

    }

    .add-wallet-btn:hover {

        background: rgba(102, 126, 234, 0.2);

        border-color: #667eea;

    }

    /* 다중코인 ; */