@charset "UTF-8";
/* =============================================================================
   회원 인증 — 로그인 · 회원가입 · 아이디/비밀번호 찾기
   ========================================================================== */

.auth-section { padding-top: var(--sp-48); }
@media (min-width: 768px) { .auth-section { padding-top: var(--sp-80); } }

.auth-box { max-width: 460px; margin: 0 auto; }

.auth-head { text-align: center; margin-bottom: var(--sp-32); }
.auth-title { font-size: 30px; margin-bottom: var(--sp-12); }
@media (min-width: 768px) { .auth-title { font-size: 40px; } }
.auth-head .lead { font-size: 15px; }

.auth-alert {
    padding: var(--sp-16);
    border-radius: var(--r-inner);
    background: rgba(220, 38, 38, 0.06);
    margin-bottom: var(--sp-24);
    text-align: center;
}

.auth-card { padding: var(--sp-24); }
@media (min-width: 768px) { .auth-card { padding: var(--sp-32); } }

.auth-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8) var(--sp-16);
    margin-top: var(--sp-24); padding-top: var(--sp-24);
    border-top: 1px solid var(--hairline);
    font-size: 14px; color: var(--carbon);
}
.auth-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-links a:hover { color: var(--violet); }

.auth-note { margin-top: var(--sp-24); font-size: 13px; line-height: var(--lh-body); color: var(--ash); text-align: center; }
.auth-note strong { color: var(--carbon); font-weight: var(--fw-medium); }

/* ── 약관 동의 묶음 ───────────────────────────────────────────────────── */
.agree-block { margin-top: var(--sp-24); padding-top: var(--sp-20); border-top: 1px solid var(--hairline); }
.agree-block legend { padding: 0; margin-bottom: var(--sp-4); }
.agree-block .check { display: flex; width: 100%; }

/* ── 아이디 찾기 결과 ─────────────────────────────────────────────────── */
.auth-result {
    margin-top: var(--sp-24); padding: var(--sp-24);
    border-radius: var(--r-inner); background: var(--mist);
    text-align: center;
}
.found-id { font-size: 20px; font-weight: var(--fw-medium); color: var(--ink); letter-spacing: 0.01em; }
.summary-label { font-size: 12px; font-weight: var(--fw-medium); letter-spacing: var(--tk-eyebrow-ko); color: var(--ash); margin-bottom: var(--sp-12); }

/* ── 소셜 로그인 ──────────────────────────────────────────────────────── */
.sns-block { margin-top: var(--sp-32); }
.sns-label {
    position: relative; text-align: center;
    font-size: 13px; color: var(--ash);
    margin-bottom: var(--sp-16);
}
.sns-label::before, .sns-label::after {
    content: ''; position: absolute; top: 50%; width: calc(50% - 48px); height: 1px; background: var(--hairline);
}
.sns-label::before { left: 0; }
.sns-label::after { right: 0; }

.sns-buttons { display: grid; gap: var(--sp-8); }

/* 카카오·네이버 브랜드 색은 각 사 로그인 버튼 가이드 — 채색 블록 예산(§2) 대상에서 예외.
   /member/login 은 헤더 CTA·간편로그인 2개·푸터만으로 4 (기준 3 초과) — 로그인 버튼을
   btn-ghost 로 낮춰도 여기서 더 줄일 채색 요소가 없다. 알려진 예외로 남긴다. */
.btn-sns { width: 100%; justify-content: center; box-shadow: none; }
.btn-sns svg { width: 18px; height: 18px; flex: none; }
.btn-kakao { background: #fee500; color: #191600; }
.btn-kakao:hover { background: #f2da00; }
.btn-naver { background: #03c75a; color: var(--white); }
.btn-naver:hover { background: #02b351; }