/* auth.css */

/* 기본 배경 */
.auth-bg {
    background-color: #f4f7fe;
    min-height: 100vh;
}

/* 카드 기본 스타일 */
.auth-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

/* --- 모바일 최적화 (핵심) --- */
@media (max-width: 576px) {
    .auth-bg {
        background-color: #ffffff; /* 모바일은 배경을 흰색으로 하여 앱 느낌 강조 */
    }

    .auth-card {
        box-shadow: none !important; /* 그림자 제거 */
        border-radius: 0; /* 모서리 곡률 제거 (취향에 따라 유지 가능) */
        padding: 0 !important;
    }

    .card-body {
        padding: 2rem 1rem !important; /* 내부 여백 조정 */
    }

    /* 입력창 및 버튼 크기 확대 (터치 편의성) */
    .form-control-lg, .btn-lg, .input-group-text {
        height: 55px !important;
        font-size: 16px !important; /* 아이폰 자동 줌 방지 */
    }

    /* 제목 크기 조정 */
    .logo-text {
        font-size: 1.8rem !important;
    }
}

/* 입력창 포커스 효과 */
.form-control:focus {
    border-color: #0d6efd;
    box-shadow: none;
    background-color: #fff !important;
}

/* 버튼 스타일 고도화 */
.btn-primary {
    background-color: #0d6efd;
    border: none;
    transition: transform 0.1s ease;
}

.btn-primary:active {
    transform: scale(0.98);
}

/* 1. input 내부 자체의 기본 focus 효과 제거 */
.input-group .form-control:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* 2. input에 focus가 들어갔을 때, 전체 그룹(.input-group)에 테두리 및 그림자 적용 */
.input-group:focus-within {
    border-color: #86b7fe; /* 부트스트랩 기본 focus 테두리 색상 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 포커스 아웃라인 그림자 */
    border-radius: 0.5rem; /* 라운드 스타일 (필요시 조절) */
}

/* 3. input-group 자식 요소들의 테두리 깔끔하게 정리 */
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: #86b7fe;
}