/* =========================================
   인증 페이지 공용 스타일 (로그인/회원가입)
   ========================================= */

.auth-container {
    max-width: 420px;
    margin: 2.5rem auto;
    padding: 2.8rem 2.5rem 2.2rem;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ede8f5;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.10);
}

/* ── 헤더 영역 ── */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 2px 6px rgba(99,102,241,0.18));
}
.auth-logo img {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    object-fit: cover;
    display: inline-block;
}

.auth-container h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2b1f3c;
    margin: 0 0 0.3rem;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    font-size: 1.25rem;
    color: #9e8fb0;
    margin: 0;
}

/* ── 소셜 버튼 ── */
.auth-social-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.6rem;
}

.btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    font-size: 1.45rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.15s, box-shadow 0.15s;
    letter-spacing: -0.3px;
}

.btn-social:active { transform: scale(0.97); }

.btn-social img { height: 22px; }

.btn-kakao {
    background: #FEE500;
    color: #191919;
    box-shadow: 0 4px 14px rgba(254, 229, 0, 0.45);
}
.btn-kakao:hover { opacity: 0.93; box-shadow: 0 6px 18px rgba(254,229,0,0.55); }

.btn-google {
    background: #fff;
    color: #444;
    border: 1.5px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-google:hover { background: #f8f8f8; }

/* ── 구분선 ── */
.auth-social-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 0 1.6rem;
    color: #c5b8d6;
    font-size: 1.2rem;
}
.auth-social-separator::before,
.auth-social-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ede8f5;
}
.auth-social-separator span { padding: 0 0.9em; white-space: nowrap; }

/* ── 폼 그룹 ── */
.auth-form-group {
    margin-bottom: 1.3rem;
}

.auth-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4a3660;
    margin-bottom: 7px;
    letter-spacing: -0.2px;
}

/* 입력 아이콘 래퍼 */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1.7rem;
    color: #b09cc6;
    pointer-events: none;
    z-index: 1;
}

.auth-input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 42px;
    font-size: 1.4rem;
    color: #2b1f3c;
    background: #faf8fd;
    border: 1.5px solid #ddd5eb;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.auth-input:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.13);
}

.auth-input::placeholder {
    color: #c5b8d6;
    font-size: 1.3rem;
    font-weight: 400;
}

/* 읽기 전용 입력칸 (소셜 가입 시 이메일) */
.auth-input-readonly {
    background: #f0ecf7;
    color: #8a7aa0;
    cursor: default;
}
.auth-input-readonly:focus {
    border-color: #ddd5eb;
    box-shadow: none;
    background: #f0ecf7;
}

/* 비밀번호 토글 버튼 */
.auth-pw-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #b09cc6;
    font-size: 1.7rem;
    line-height: 1;
    transition: color 0.15s;
}
.auth-pw-toggle:hover { color: #6366f1; }

/* ── 아이디 저장 + 비밀번호 찾기 한 줄 ── */
.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.auth-checkbox-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.auth-checkbox-group input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #6366f1;
    cursor: pointer;
}

.auth-checkbox-group label {
    font-size: 1.25rem;
    color: #7a6a90;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.auth-forgot {
    font-size: 1.2rem;
    color: #9e8fb0;
    text-decoration: none;
    transition: color 0.15s;
}
.auth-forgot:hover { color: #6366f1; }

/* ── 제출 버튼 ── */
.auth-submit-btn {
    width: 100%;
    height: 52px;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #9b59b6 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: -0.3px;
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.30);
    transition: opacity 0.2s, transform 0.12s, box-shadow 0.2s;
}

.auth-submit-btn:hover {
    opacity: 0.93;
    box-shadow: 0 7px 20px rgba(99, 102, 241, 0.38);
}

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

/* ── 하단 서브 링크 ── */
.auth-sub-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.6rem;
}

.auth-sub-text {
    font-size: 1.25rem;
    color: #9e8fb0;
}

.auth-sub-highlight {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6366f1;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(99,102,241,0.3);
    transition: border-color 0.15s;
}
.auth-sub-highlight:hover { border-color: #6366f1; }

/* 이전 스타일 호환 (다른 페이지) */
.auth-divider { border: 0; border-top: 1px solid #f0f0f0; margin: 0 0 1.5rem; }

.auth-help-text { display: block; font-size: 1.15rem; color: #999; margin-top: 4px; line-height: 1.4; }
.auth-error { display: block; font-size: 1.15rem; color: #dc3545; margin-top: 4px; }
.text-danger { font-size: 1.2rem; color: #dc3545; margin-bottom: 0.8rem; padding: 10px 14px; background: #fff5f5; border-radius: 8px; border-left: 3px solid #dc3545; }

.btn-social.btn-naver { background: #03C75A; color: #fff; border-color: #03C75A; }
.btn-social.btn-naver:hover { opacity: 0.9; }

/* ── 모바일 ── */
@media (max-width: 768px) {
    .auth-container {
        margin: 1rem 0.8rem;
        padding: 2rem 1.4rem 1.8rem;
        border-radius: 16px;
    }

    .auth-logo { font-size: 2.8rem; }

    .auth-container h1 { font-size: 2rem; }

    .auth-input { height: 46px; font-size: 1.3rem; }

    .auth-submit-btn { height: 48px; font-size: 1.5rem; }
}