/* ========== 기본 스타일 ========== */
.form-box {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 1rem;
}

.check-duplicate-btn {
    height: 100%;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.check_box_inline {
    float: unset !important;
    margin-left: 0 !important;
}

/* ========== 회원가입 정보 섹션 ========== */
.join_info {
    margin: 10px 0 20px;
}

.join_info > div {
    font-size: 0.9rem;
    color: #363636;
}

/* ========== 입력 필드 공통 레이아웃 ========== */
.info_input .col-12 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.info_input .form-label {
    flex: 0 1 20%;
    min-width: 6em;
    text-align: left;
}

.info_input .form-control {
    flex: 1 1 60%;
    min-width: 150px;
    box-sizing: border-box;
}

.info_input .col-12 .btn {
    flex: 0 1 17%;
    min-width: 95px;
    max-width: 100px;
    text-align: center;
    padding: 4px 8px;
}

/* 버튼이 없는 행에 빈 공간 추가 */
.info_input .col-12:not(:has(.btn))::after {
    content: "";
    flex: 0 1 20%;
}

/* ========== 이메일 입력 ========== */
.info_email .email-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.info_email .email-prefix {
    flex: 1 1 30%;
    max-width: 132px;
    margin-right: 2px;
}

.info_email .email-select-wrapper {
    flex: 1 1 30%;
    max-width: 150px;
    margin-left: 2px;
}

.info_email .direct-input-checkbox-wrapper {
    margin-left: 1vw;
    display: flex;
    align-items: center;
    gap: 1px;
}

.info_email .form-check-label {
    margin-left: 5px;
    margin-top: 5px;
}

.info_email .form-label {
    flex: 0 1 20%;
    min-width: 6em;
    text-align: left;
}

/* 이메일 선택/직접입력 토글 */
.info_email #vwEmailDirect {
    display: none;
}

.info_email #vwEmailSelect {
    display: block;
}

/* ========== 성별 입력 ========== */
.info_gender .col-12 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: -4px;
}

.info_gender .form-label {
    flex: 0 1 16%;
    text-align: left;
    margin-right: 12px;
    margin-top: 13px;
}

.info_gender .form-check-input {
    margin-right: 5px;
}

.info_gender .form-check-label {
    margin-right: 15px;
    margin-top: 5px;
}

/* ========== 생년월일 입력 ========== */
.info_birth .col-12 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.info_birth select {
    flex: 1 1 auto;
    min-width: 90px;
    width: 100%;
}

.info_birth .form-label {
    flex: 0 1 16%;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    align-self: center;
}

/* ========== 반응형 디자인 ========== */

/* 태블릿 크기 (768px 이하) */
@media (max-width: 768px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .modal-dialog {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .gender-group {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* 노트북/태블릿 크기 (991px 이하) */
@media (max-width: 991px) {
    .info_input .col-12 .btn {
        margin-top: 0 !important;
    }

    /* 이메일 직접입력 토글 */
    #member_email_direct:checked ~ #vwEmailSelect {
        display: none;
    }

    #member_email_direct:checked ~ #vwEmailDirect {
        display: block;
    }
}

/* 모바일 크기 (425px 이하) */
@media (max-width: 425px) {
    .info_input .col-12 {
        flex-wrap: wrap;
        gap: 4px;
    }

    .info_input .form-label,
    .info_email .form-label {
        flex: 0 1 30%;
        min-width: 3.125em;
        max-width: 7em;
    }

    .info_input #member_id {
        flex: 1 1 60%;
        max-width: 10em;
        min-width: 9.375em;
    }

    .info_input .form-control {
        flex: 1 1 70%;
        max-width: 15em;
        min-width: 11.25em;
    }

    .info_input .col-12 .btn {
        transform: scale(0.8);
        min-width: 5em;
        max-width: 5.625em;
    }

    .info_gender .col-12 {
        margin-top: -15px;
    }

    .info_email .direct-input-checkbox-wrapper {
        justify-content: flex-end;
        width: 100%;
        margin-right: 20px;
    }

    .info_email .email-prefix {
        max-width: 115px;
    }
}

/* 소형 모바일 (375px 이하) */
@media (max-width: 375px) {
    .info_birth .col-12 {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .info_birth select {
        min-width: 60px;
        max-width: 80px;
        flex-grow: 1;
        flex-shrink: 0;
    }

    .info_gender .col-12 {
        gap: 3px;
    }
}