/* ===== 소셜 로그인 버튼 (카카오·네이버·Google 브랜드 규칙) ===== */
.social-auth { margin-bottom: var(--s-6); }
.social-list { display: grid; gap: var(--s-2); }
.social-form { margin: 0; }

/* 아이콘은 왼쪽 고정, 글자는 가운데 */
.btn-social { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--s-12); border: 0; border-radius: var(--r-btn); font-family: var(--f-body); font-weight: 600; font-size: var(--t-md); line-height: 1.3; text-align: center; cursor: pointer; transition: transform var(--m-base) var(--ease-press), background var(--m-fast), filter var(--m-fast); }
.btn-social:active { transform: scale(.98); transition-duration: var(--m-fast); }
.btn-social:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-btn); }
.btn-social-mark { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.btn-social-mark svg { display: block; }
.btn-social-text { min-width: 0; overflow-wrap: anywhere; }

/* 카카오 — 노란 면 + 85% 검정 글자·심볼 */
.btn-social-kakao { background: #FEE500; color: rgba(0, 0, 0, .85); }
.btn-social-kakao:hover { background: #F2DA00; }
/* 네이버 — 흰 면 + 초록 N 로고(네이버 가이드의 흰 버튼). 초록 면에 흰 글자는 명도 대비가 2.3:1이라 쓰지 않는다 */
.btn-social-naver { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
.btn-social-naver:hover { background: #F2F2F2; }
/* Google — 흰 면 + 회색 테두리 + 4색 G */
.btn-social-google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
.btn-social-google:hover { background: #F2F2F2; }

/* '또는 이메일로' — 가운데 글자, 양쪽 선 */
.social-divider { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--t-sm); color: var(--c-muted); white-space: nowrap; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* 가입 ① 소셜 모드 안내 */
.social-notice { margin-bottom: var(--s-4); }

/* 설정 — 연결된 계정 */
.linked-list .list-item { min-height: 56px; }

@media (max-width: 380px) {
  .btn-social { padding: 0 var(--s-10); font-size: var(--t-sm); }
  .btn-social-mark { left: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-social { transition: none; }
  .btn-social:active { transform: none; }
}