/* User Domain Responsive CSS */
/* 태블릿 및 모바일 환경 대응 (최대 1024px) */

/* 태블릿 (768px ~ 1024px) */
@media (max-width: 1024px) {
    /* 로그인 페이지 */
    .login-wrap {
        width: 60% !important;
    }

    .login-form {
        padding: 2rem !important;
    }

    /* 회원가입 페이지 */
    section.w-50 {
        width: 70% !important;
    }

    section.md-w-80 {
        width: 80% !important;
    }

    /* 사이드바 + 콘텐츠 레이아웃 */
    section.d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem !important;
    }

    section article.w-20,
    section article.w-80 {
        width: 100% !important;
        height: auto !important;
    }
}

/* 모바일 (최대 768px) */
@media (max-width: 768px) {
    /* 로그인 페이지 */
    .login-wrap {
        width: 90% !important;
        padding: 1rem;
    }

    .login-form {
        padding: 1.5rem !important;
    }

    .login-logo {
        width: 150px !important;
        margin-bottom: 1.5rem;
    }

    .login-input {
        font-size: 0.9rem;
        padding: 0.75rem !important;
    }

    .login-btn {
        font-size: 0.9rem;
        padding: 0.75rem !important;
    }

    .login-footer {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .login-footer a {
        font-size: 0.85rem;
    }

    /* 회원가입 페이지 */
    section.w-50,
    section.md-w-80 {
        width: 95% !important;
    }

    .join-checkline {
        padding: 1rem !important;
    }

    .custom-checkbox p {
        font-size: 0.85rem;
    }

    .join-agree-content {
        font-size: 0.8rem;
        padding: 1rem !important;
    }

    /* 회원가입 폼 */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        font-size: 0.9rem;
    }

    .form-control,
    .form-select {
        font-size: 0.9rem;
    }

    /* 주소 검색 버튼 */
    .address-search-btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* 버튼 그룹 */
    .d-flex.gap-3 .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }

    /* 회원가입 완료 페이지 */
    .complete-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .complete-message h3 {
        font-size: 1.3rem;
    }

    .complete-message p {
        font-size: 0.9rem;
    }

    /* 사이드바 축소 */
    section article.blur-white-bg-color {
        padding: 1rem !important;
    }

    section article.blur-white-bg-color h3 {
        font-size: 1.2rem;
    }

    section article.blur-white-bg-color .menu-btn {
        padding: 0.75rem !important;
        font-size: 0.9rem;
    }

    /* 콘텐츠 영역 */
    section article.white-bg-color {
        padding: 1.5rem !important;
    }

    /* 내 정보 관리 */
    .user-info-header-area {
        flex-direction: column;
        padding: 1.5rem !important;
    }

    .user-info-header-area .d-flex {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .user-info-header-area img, .user-img-area {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    /* 프로필 이미지 */
    .profile-image-upload {
        width: 100%;
        justify-content: center;
    }

    /* 정보 표시 영역 */
    .info-display-area {
        flex-direction: column;
    }

    .info-item {
        width: 100% !important;
        padding: 1rem !important;
    }

    .info-label {
        font-size: 0.85rem;
    }

    .info-value {
        font-size: 0.9rem;
    }

    /* 비밀번호 변경 */
    .password-change-form {
        width: 100%;
    }

    .password-input-group {
        margin-bottom: 1rem;
    }

    .password-strength-indicator {
        font-size: 0.8rem;
    }

    /* 가맹점 계정 생성 */
    .franchise-form {
        width: 100%;
    }

    .franchise-input-group {
        flex-direction: column;
    }

    .franchise-input-group .form-control {
        width: 100%;
    }

    /* 회원 탈퇴 */
    .secession-warning {
        padding: 1rem !important;
        font-size: 0.85rem;
    }

    .secession-confirm-area {
        flex-direction: column;
    }

    .secession-btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* 탈퇴 완료 페이지 */
    .secession-complete {
        padding: 2rem 1rem;
    }

    .secession-complete h3 {
        font-size: 1.3rem;
    }

    /* 아이디/비밀번호 찾기 */
    .user-find-tabs {
        flex-direction: column;
    }

    .user-find-tab {
        width: 100%;
    }

    .user-find-content {
        padding: 1.5rem 1rem;
    }

    /* 인증번호 입력 */
    .verification-group {
        flex-direction: column;
    }

    .verification-group input {
        width: 100%;
    }

    .verification-group button {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* 타이머 */
    .timer {
        font-size: 0.85rem;
    }
}

/* 폼 입력 반응형 */
@media (max-width: 768px) {
    /* Input 그룹 */
    .input-group {
        flex-direction: column;
    }

    .input-group-prepend,
    .input-group-append {
        width: 100%;
    }

    /* 체크박스 */
    .custom-checkbox {
        padding: 0.5rem !important;
    }

    .custom-box {
        width: 18px !important;
        height: 18px !important;
    }

    /* 라디오 버튼 */
    .custom-radio-group {
        flex-direction: column;
    }

    /* 선택 박스 */
    .select-group {
        flex-direction: column;
    }

    .select-group .form-select {
        width: 100%;
    }
}

/* 이미지 아이콘 */
@media (max-width: 768px) {
    article img[style*="width: 45px"] {
        width: 35px !important;
        height: 35px !important;
    }

    article img.me-2,
    article img.me-3 {
        width: 24px !important;
        height: 24px !important;
    }
}

/* 모달 반응형 */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-title {
        font-size: 1.2rem;
    }
}

/* SweetAlert2 반응형 */
@media (max-width: 768px) {
    .swal2-popup {
        width: 90% !important;
        padding: 1.5rem !important;
    }

    .swal2-title {
        font-size: 1.3rem !important;
    }

    .swal2-html-container {
        font-size: 0.9rem !important;
    }

    .swal2-confirm,
    .swal2-cancel {
        font-size: 0.85rem !important;
        padding: 0.5rem 1.5rem !important;
    }
}