.social-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, #e9f2ff, #f5f1ff 50%, #eaf8ff);
}

.social-login-card {
    width: min(720px, 100%);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 22px;
    padding: clamp(22px, 4vw, 38px);
    background: rgba(255,255,255,.82);
    box-shadow: 0 20px 55px rgba(37,99,235,.15);
}

.social-login-eyebrow { margin: 0 0 6px; color: #7c3aed; font-size: 13px; font-weight: var(--sc-font-heavy); }
.social-login-card h1 { margin: 0 0 8px; color: #172033; font-weight: var(--sc-font-black); }
.social-login-card > p:not(.social-login-eyebrow) { margin: 0 0 22px; color: #64748b; }
.social-login-form { display: grid; gap: 10px; }
.social-login-form label { color: #334155; font-size: 14px; font-weight: var(--sc-font-heavy); }
.social-login-form input { min-width: 0; height: 48px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 13px; background: #fff; color: #172033; font-size: 15px; }
.social-login-form input:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.social-login-submit { min-height: 50px; margin-top: 8px; border: 0; border-radius: 11px; background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff; font-weight: var(--sc-font-black); cursor: pointer; }
.admin-login-submit { min-height: 48px; border: 0; border-radius: 11px; background: #e2e8f0; color: #334155; font-weight: var(--sc-font-heavy); cursor: pointer; }
.social-login-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.social-login-error { margin-bottom: 14px; border-radius: 10px; padding: 12px 14px; background: #fee2e2; color: #991b1b; font-weight: 800; }
.social-login-home { display: inline-block; margin-top: 16px; color: #475569; font-weight: 800; text-decoration: none; }
.social-login-cancel { min-height: 46px; display: flex; align-items: center; justify-content: center; margin-top: 10px; border-radius: 10px; background: #e2e8f0; color: #334155; font-weight: var(--sc-font-heavy); text-decoration: none; }
.social-login-choice { display: grid; gap: 10px; }
.social-login-choice .social-login-submit { margin-top: 0; }
.social-login-disabled { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #f1f5f9; color: #94a3b8; font-weight: var(--sc-font-heavy); }
.social-login-soop { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; background: #e0ecff; color: #2563eb; font-weight: var(--sc-font-black); text-decoration: none; cursor: pointer; }
.social-login-kakao { min-height: 50px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; background: #fee500; color: #191919; font-weight: var(--sc-font-black); text-decoration: none; cursor: pointer; }
.social-login-cancel-button { min-height: 46px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: #e2e8f0; color: #334155; font-weight: var(--sc-font-heavy); text-decoration: none; cursor: pointer; }

.social-login-success-backdrop {
    z-index: 2000;
    padding: 20px;
}

.social-login-success-modal {
    width: min(380px, 100%);
    border-radius: 18px;
    padding: 28px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
    text-align: center;
}

.social-login-success-modal h2 { margin: 0 0 8px; color: #172033; font-weight: var(--sc-font-black); }
.social-login-success-modal p { margin: 0 0 20px; color: #64748b; }
.social-login-success-modal button { width: 100%; min-height: 48px; border: 0; border-radius: 11px; background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff; font-weight: var(--sc-font-black); }
.social-login-success-modal .social-login-cancel-button { background: #e2e8f0; color: #334155; }

.login-notice-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(4px);
}

.login-notice-modal {
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.login-notice-header { padding: 26px 28px 18px; border-bottom: 1px solid #e2e8f0; }
.login-notice-badge { display: inline-block; margin-bottom: 8px; color: #2563eb; font-size: 12px; font-weight: var(--sc-font-black); letter-spacing: .08em; }
.login-notice-header h2 { margin: 0; color: #172033; font-size: 25px; font-weight: var(--sc-font-black); }
.login-notice-content { padding: 22px 28px; color: #475569; font-size: 15px; line-height: 1.72; }
.login-notice-content p { margin: 0 0 15px; }
.login-notice-content p:last-child { margin-bottom: 0; }
.login-notice-content strong { color: #172033; }
.login-notice-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 28px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.login-notice-footer button { min-width: 88px; min-height: 42px; border: 0; border-radius: 10px; padding: 0 20px; background: #2563eb; color: #fff; font-weight: var(--sc-font-black); cursor: pointer; }
.login-notice-footer .login-notice-never { background: #e2e8f0; color: #334155; }
.login-notice-footer button:disabled { opacity: .65; cursor: wait; }

@media (max-width: 600px) {
    .login-notice-header { padding: 22px 20px 16px; }
    .login-notice-header h2 { font-size: 21px; }
    .login-notice-content { padding: 18px 20px; font-size: 14px; }
    .login-notice-footer { padding: 14px 20px; }
}