/* Auth specific styles */
.auth-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--gray-50);
}

.auth-box {
    background-color: var(--white);
    border-radius: 1.5rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: var(--shadow-xl);
}

.social-btn {
    width: 100%;
    padding: 0.875rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: 0.3s;
    font-weight: 700;
}
.social-google {
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-700);
}
.social-kakao {
    background-color: #FEE500;
    color: #391B1B;
}

.divider {
    position: relative;
    padding: 1rem 0;
    margin: 0.5rem 0;
}
.divider-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}
.divider-line hr {
    width: 100%;
    border-top: 1px solid var(--gray-100);
    border-bottom: none;
}
.divider-text {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
}
.divider-text span {
    padding: 0 0.5rem;
    background: white;
    color: var(--gray-400);
}

.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    font-size: 0.875rem;
    transition: 0.2s;
}
.input-field:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
}

/* auth.css - 일관성 있는 블루 테마 적용 */

/* 1. 모든 주요 버튼 (로그인, 비밀번호 변경 등) 색상 통일 */
#btn-submit, #btn-send, #btn-update {
    background-color: #3b82f6 !important; /* 모달 버튼과 동일한 블루 */
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3) !important;
    transition: all 0.2s ease;
}

#btn-submit:hover, #btn-send:hover, #btn-update:hover {
    background-color: #2563eb !important; /* 호버 시 약간 진하게 */
    transform: translateY(-1px);
}

/* 2. 입력창 포커스(클릭) 테두리 색상 통일 */
#form-auth input:focus, 
#forgot-form input:focus, 
#reset-form input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none;
}

/* 3. '회원가입' 링크나 '뒤로가기' 아이콘 호버 색상 */
#btn-switch-mode:hover, 
.auth-box a:hover,
.absolute.top-6.left-6:hover {
    color: #3b82f6 !important;
}

/* 4. (선택) 모달창 확인 버튼도 이 클래스를 따르게 하거나 직접 수정 */