/**
 * SHESLAB — shared/auth.css
 * 로그인 모달 매거진 톤 스타일.
 * Bodoni Moda 헤드라인 + Pretendard 본문 + 핑크 톤 오버레이.
 */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.auth-modal-card {
    position: relative;
    background: var(--bg, #fff);
    color: var(--text, #1A1A1A);
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 380px;
    width: 92vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: auth-modal-in 200ms ease-out;
}

@keyframes auth-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--text-muted, var(--muted, #888));
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 120ms ease;
}
.auth-close:hover { background: rgba(0, 0, 0, 0.06); }

.auth-modal-title {
    font-family: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 28px 0 0;
    color: var(--text, #1A1A1A);
}

.auth-modal-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: var(--text-muted, var(--muted, #777));
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 6px 0 18px;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 999px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 10px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.auth-btn:focus-visible { outline: 2px solid var(--primary, #B5739E); outline-offset: 2px; }

.auth-btn--kakao {
    background: #fee500;
    color: #181600;
}

.auth-btn--google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.auth-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    text-align: center;
    font-weight: 700;
}

.auth-modal-foot {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.74rem;
    color: var(--text-muted, var(--muted, #888));
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .auth-modal-title { font-size: 1.25rem; }
    .auth-modal-card  { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-modal-card { animation: none; }
    .auth-btn:hover  { transform: none; }
}

/* 이메일 인증코드 가입/로그인 */
.auth-email-wrap { margin-top: 6px; }
.auth-divider {
    text-align: center;
    color: #9ca3af;
    font-size: 0.78rem;
    margin: 14px 0 10px;
}
.auth-email-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.auth-email-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.12); }
.auth-email-input:disabled { background: #f3f4f6; color: #9ca3af; }
.auth-btn--email {
    justify-content: center;
    background: #8b5cf6;
    color: #fff;
}
.auth-btn--email:hover { background: #7c3aed; }
.auth-email-msg { font-size: 0.82rem; margin-top: 6px; min-height: 1em; text-align: center; }

/* 알림 벨 (로그인 사용자) */
/* 벨/프로필 — 테마 토글(sl-theme-toggle)과 동일 스타일로 통일 */
.sl-noti-bell, .sl-prof-btn {
    position: fixed; top: 18px; z-index: 1101;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(232, 164, 184, 0.30);
    background: rgba(254, 252, 250, 0.85);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--primary-dark, #8E5878);
    box-shadow: 0 6px 20px rgba(232, 164, 184, 0.18);
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
.sl-noti-bell { right: 152px; }   /* theme(110) 왼쪽 */
.sl-prof-btn  { right: 194px; }   /* 벨 왼쪽 */
.sl-noti-bell:hover, .sl-prof-btn:hover { transform: scale(1.08); background: rgba(254,252,250,0.95); }
@media (max-width: 480px) {
    .sl-noti-bell, .sl-prof-btn { width: 28px; height: 28px; top: 14px; font-size: 0.92rem; }
    .sl-noti-bell { right: 124px; }   /* 모바일 theme(90) 왼쪽 */
    .sl-prof-btn  { right: 158px; }
}
.sl-prof-menu {
    position: fixed; top: 60px; right: 70px; z-index: 9000;
    background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 6px; min-width: 140px;
}
.sl-prof-item {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 10px 14px; border: none; background: none; cursor: pointer;
    font-size: 0.9rem; color: #1f2937; text-decoration: none; border-radius: 8px;
}
.sl-prof-item:hover { background: #f5f3ff; }
.sl-noti-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    background: #ec4899; color: #fff; border-radius: 9px;
    font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.sl-noti-panel {
    position: fixed; top: 60px; right: 16px; z-index: 9000;
    width: 320px; max-width: 90vw; max-height: 70vh; overflow-y: auto;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 6px;
}
.sl-noti-empty { padding: 24px 12px; text-align: center; color: #9ca3af; font-size: 0.88rem; }
.sl-noti-item {
    display: block; padding: 11px 12px; border-radius: 9px;
    text-decoration: none; color: #1f2937; font-size: 0.88rem; line-height: 1.45;
}
.sl-noti-item:hover { background: #f5f3ff; }
.sl-noti-item.unread { background: #faf5ff; }
.sl-noti-item strong { color: #7c3aed; }
.sl-noti-snip { color: #6b7280; font-size: 0.82rem; margin-top: 3px; }
.sl-noti-time { color: #9ca3af; font-size: 0.74rem; margin-top: 3px; }