/* =========================================================
   member_info_modal.css
   마이도란 모달 전용 스타일
   ─────────────────────────────────────────────────────────
   🐾 2026-05-23 신규 생성
   ========================================================= */

/* ─── 모달 기본 ─── */
#memberInfoModal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

#memberInfoModal .modal-header {
    padding: 18px 22px 8px;
}

#memberInfoModal .modal-title {
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

#memberInfoModal .modal-body {
    padding: 8px 22px 22px;
}

#memberInfoModal .btn-close {
    opacity: 0.4;
    transition: opacity 0.15s;
}
#memberInfoModal .btn-close:hover {
    opacity: 0.8;
}

/* ─── 입력 필드: 흰 배경 + 깔끔한 테두리 ─── */
#memberInfoModal .form-control,
#memberInfoModal .form-select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #333;
    transition: border-color 0.15s;
}
#memberInfoModal .form-control:focus,
#memberInfoModal .form-select:focus {
    border-color: #aaa;
    box-shadow: none;
}
#memberInfoModal .form-control:disabled,
#memberInfoModal .form-control[readonly] {
    background: #f8f8f8;
    color: #666;
    border-color: #e8e8e8;
}

/* textarea */
#memberInfoModal textarea.form-control {
    min-height: 60px;
    line-height: 1.6;
}

/* 라벨 */
#memberInfoModal .form-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #888;
    margin-bottom: 4px;
}

/* 안내 텍스트 */
#memberInfoModal .form-text {
    font-size: 0.72rem;
    color: #aaa;
}

/* ─── 섹션 구분: hr → 깔끔한 라인 ─── */
#memberInfoModal hr {
    border: none;
    height: 1px;
    background: #f0f0f0;
    margin: 20px 0;
    opacity: 1;
}

/* 섹션 타이틀 */
#memberInfoModal h6.fw-bold {
    font-size: 0.92rem;
    color: #333;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── 프로필 아이콘 영역 ─── */
#memberInfoModal #profileIconContainer {
    width: 72px !important;
    height: 72px !important;
    border: 2px solid #e8e8e8 !important;
    background: #f5f5f5 !important;
    transition: border-color 0.15s;
}
#memberInfoModal #profileIconContainer:hover {
    border-color: #ccc !important;
}

/* 파일 업로드 */
#memberInfoModal .form-control-sm[type="file"] {
    font-size: 0.78rem;
    border-radius: 6px;
    padding: 4px 8px;
}

/* ─── 버튼 통일 ─── */

/* 프로필 적용 버튼 */
#memberInfoModal #btnUpdateProfile {
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 20px;
    border: none;
    background: #555;
    color: #fff;
    transition: background 0.15s;
}
#memberInfoModal #btnUpdateProfile:hover {
    background: #333;
}

/* 추가 정보 저장 */
#memberInfoModal #btnUpdateProfileExtra {
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    transition: all 0.15s;
}
#memberInfoModal #btnUpdateProfileExtra:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* 미리 보기 */
#memberInfoModal #btnPreviewProfile {
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    transition: all 0.15s;
}
#memberInfoModal #btnPreviewProfile:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* ─── 토글 스위치: 사이트 톤에 맞게 ─── */
#memberInfoModal .form-check-input:checked {
    background-color: #5B9BD5;
    border-color: #5B9BD5;
}
#memberInfoModal .form-check-input:focus {
    box-shadow: none;
    border-color: #ccc;
}

/* 토글 섹션 */
#memberInfoModal .form-switch .form-check-input {
    cursor: pointer;
}

/* 프로필 공개 / 이메일 알림 영역 */
#memberInfoModal .fw-semibold {
    font-size: 0.9rem !important;
}

/* ─── 레벨 뱃지 ─── */
#memberInfoModal #myDoranLevelBadge {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}

/* 레벨 안내 팝오버 */
#memberInfoModal #myDoranLevelInfo {
    border-radius: 10px !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    font-size: 0.76rem !important;
}
#memberInfoModal #myDoranLevelInfo table th {
    font-size: 0.7rem;
    color: #999;
}
#memberInfoModal #myDoranLevelInfo table td {
    font-size: 0.76rem;
}

/* ─── 반려동물 미니 카드 ─── */
#memberInfoModal #myPetMiniCards {
    gap: 6px !important;
}

/* ─── 비밀번호 변경 아코디언 ─── */
#memberInfoModal .accordion-item {
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    overflow: hidden;
}

#memberInfoModal .accordion-button {
    background: #fff !important;
    font-size: 0.88rem;
    font-weight: 600;
    color: #333 !important;
    padding: 12px 16px;
    border-radius: 10px !important;
}
#memberInfoModal .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
}
#memberInfoModal .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
#memberInfoModal .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

#memberInfoModal .accordion-body {
    padding: 16px;
    background: #fff;
}

#memberInfoModal .accordion-body .form-label {
    font-size: 0.76rem;
    color: #888;
}

/* 변경하기 버튼 */
#memberInfoModal #btnUpdatePw {
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 16px;
}

/* ─── 회원 탈퇴 ─── */
#memberInfoModal #btnInitWithdraw {
    font-size: 0.82rem;
    color: #999 !important;
    font-weight: 500;
    transition: color 0.15s;
}
#memberInfoModal #btnInitWithdraw:hover {
    color: #555 !important;
}

/* ─── 반응형 ─── */
@media (max-width: 576px) {
    #memberInfoModal .modal-content {
        border-radius: 14px;
    }
    #memberInfoModal .modal-header {
        padding: 16px 18px 6px;
    }
    #memberInfoModal .modal-body {
        padding: 6px 18px 18px;
    }
    #memberInfoModal .modal-title {
        font-size: 1.02rem;
    }
    #memberInfoModal #profileIconContainer {
        width: 64px !important;
        height: 64px !important;
    }
    #memberInfoModal .form-control,
    #memberInfoModal .form-select {
        font-size: 0.84rem;
    }
    #memberInfoModal h6.fw-bold {
        font-size: 0.88rem;
    }
}

@media (max-width: 360px) {
    #memberInfoModal .modal-body {
        padding: 4px 14px 16px;
    }
    #memberInfoModal .form-control,
    #memberInfoModal .form-select {
        font-size: 0.82rem;
        border-radius: 6px;
    }
}

/* =========================================================
   탈퇴 확인 모달 (#withdrawConfirmModal)
   ========================================================= */

#withdrawConfirmModal .modal-content {
    border: none !important;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 헤더: 빨간 배경 → 흰 배경 + 경고 아이콘 포인트 */
#withdrawConfirmModal .modal-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0;
    padding: 18px 20px 14px;
}

#withdrawConfirmModal .modal-title {
    color: #333 !important;
    font-size: 0.95rem;
    font-weight: 700;
}
#withdrawConfirmModal .modal-title i {
    color: #f0a040;
    font-size: 1rem;
}

#withdrawConfirmModal .modal-header .btn-close {
    filter: none !important;
    opacity: 0.4;
    transition: opacity 0.15s;
}
#withdrawConfirmModal .modal-header .btn-close:hover {
    opacity: 0.8;
}

/* 본문 */
#withdrawConfirmModal .modal-body {
    padding: 18px 20px 10px;
}

#withdrawConfirmModal .modal-body p.text-danger {
    color: #666 !important;
    font-weight: 500;
    font-size: 0.82rem;
    line-height: 1.65;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

#withdrawConfirmModal .modal-body p.text-muted {
    font-size: 0.8rem;
    color: #999 !important;
    margin-bottom: 10px;
}

/* 비밀번호 입력 */
#withdrawConfirmModal .form-control {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.84rem;
    transition: border-color 0.15s;
}
#withdrawConfirmModal .form-control:focus {
    border-color: #aaa;
    box-shadow: none;
}

/* 푸터 */
#withdrawConfirmModal .modal-footer {
    padding: 6px 20px 18px;
    gap: 8px;
    flex-direction: column;
}

/* 취소 버튼 */
#withdrawConfirmModal .modal-footer .btn-light {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #555;
    padding: 10px;
    order: 2;
    transition: all 0.15s;
}
#withdrawConfirmModal .modal-footer .btn-light:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* 탈퇴 실행 버튼 */
#withdrawConfirmModal #btnFinalWithdraw {
    background: #fff;
    border: 1px solid #999;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #666;
    padding: 10px;
    order: 3;
    transition: all 0.15s;
}
#withdrawConfirmModal #btnFinalWithdraw:hover {
    background: #555;
    border-color: #555;
    color: #fff;
}