/* =========================================================================
   통합 소셜 로그인 버튼 + 연결 선택 화면
   브랜드 가이드(네이버 #03C75A / 카카오 #FEE500 / 구글 / 애플) 준수
   ========================================================================= */

.social-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 16px 0;
}

/* 로그인 페이지 소셜 구분 헤딩 */
.social-login-heading {
    position: relative;
    text-align: center;
    margin: 22px 0 4px;
    color: #9aa0a6;
    font-size: 12px;
}
.social-login-heading::before,
.social-login-heading::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 24%;
    height: 1px;
    background: #e6e8eb;
}
.social-login-heading::before { left: 0; }
.social-login-heading::after { right: 0; }

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    transition: filter .15s ease, box-shadow .15s ease;
}
.social-btn:hover { filter: brightness(0.97); }
.social-btn:active { filter: brightness(0.94); }
.social-btn__mark { display: inline-flex; align-items: center; }
.social-btn__label { display: inline-block; }

/* 네이버 */
.social-btn--naver { background: #03C75A; color: #fff; }
/* 카카오 */
.social-btn--kakao { background: #FEE500; color: #191600; }
/* 구글 (흰 배경 + 회색 보더) */
.social-btn--google { background: #fff; color: #1f1f1f; border-color: #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
/* 애플 (검정) */
.social-btn--apple { background: #000; color: #fff; }

/* =========================================================================
   연결 선택 화면 (link.php)
   ========================================================================= */
.social-link-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    color: #222;
    padding: 20px;
}
.social-link-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    padding: 32px 28px;
    box-sizing: border-box;
}
.social-link-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; text-align: center; }
.social-link-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: #555; text-align: center; }
.social-link-desc strong { color: #222; }
.social-link-error {
    margin: 0 0 16px; padding: 10px 12px; border-radius: 8px;
    background: #fdecea; color: #c0392b; font-size: 13px; text-align: center;
}
.social-link-form { margin: 0; }
.social-link-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #444; }
.social-link-input {
    width: 100%; height: 46px; padding: 0 14px; margin-bottom: 12px;
    border: 1px solid #d8dbe0; border-radius: 8px; font-size: 15px; box-sizing: border-box;
}
.social-link-input:focus { outline: none; border-color: #2196F3; }
.social-link-btn {
    width: 100%; height: 48px; border: 1px solid transparent; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer; box-sizing: border-box;
}
.social-link-btn--primary { background: #2196F3; color: #fff; }
.social-link-btn--primary:hover { background: #1b86e0; }
.social-link-btn--ghost { background: #fff; color: #333; border-color: #d8dbe0; }
.social-link-btn--ghost:hover { background: #f5f6f8; }
.social-link-divider { position: relative; text-align: center; margin: 18px 0; }
.social-link-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e6e8eb;
}
.social-link-divider span { position: relative; background: #fff; padding: 0 12px; color: #999; font-size: 12px; }
.social-link-foot { margin: 18px 0 0; font-size: 12px; color: #999; text-align: center; }
.social-link-foot a { color: #2196F3; text-decoration: none; }