/* 소셜 로그인 단추 — **두 화면이 나눠 쓰는 한 벌** (2026-10-01, I-2)

   ⚠️ 쓰는 곳이 둘이다: `wp-login.php`(`gdt-login-page.php` 가 **이 파일을 읽어**
   인라인으로 심는다 — 그 화면은 테마도 추가 CSS 도 안 부른다)와 **앞 화면의
   로그인 창**(`gdt-login-dlg.php`, 보통 스타일시트로 싣는다).
   베껴 두면 한쪽만 고쳐져 두 로그인 화면의 단추가 갈린다 — 그래서 한 파일이다.

   ⚠️ `!important` 가 붙은 자리는 **플러그인 숏코드가 제 모양을 들고 오기** 때문
   이다(카카오·네이버·구글). 빼면 그쪽이 이긴다. */

.tl-login-social { display: flex !important; flex-direction: column; gap: 10px; margin: 0 0 24px !important; }
.kakaoLogin, .naverLogin, .googleLogin { width: 100%; margin: 0 !important; }

/* 카카오·네이버·구글 세 버튼은 높이(45px)·둥근모서리·아이콘 배치를 동일한
   규격으로 맞춘다 — 셋 다 이미지가 아니라 텍스트+인라인 SVG라 어떤 화면
   배율에서도 흐려지지 않는다(2026-09-18, 카카오 쪽 흐림 문제 해결).
   ⚠️ 예전에 여기 ".kakaoLogin a { display:block }" 규칙이 있었는데
   (a 태그를 img 크기에 맞추려던 것) 이게 .tl-kakao-btn 의 display:flex 보다
   명시도가 높아 이겨버려서 가운데정렬이 깨지고 텍스트가 왼쪽 위로 몰렸다
   (2026-09-18 실측). 이미지를 버린 지금은 필요 없어 삭제했다 — 다시
   추가하지 말 것. */
.tl-kakao-btn, .tl-naver-btn, .tl-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; height: 45px;
  text-decoration: none !important; font-weight: 700; font-size: 15px;
  border-radius: 12px;
}
.tl-kakao-btn { background: #fee500; color: #191600 !important; }
.tl-kakao-btn:hover { background: #f4da00; }
.tl-kakao-mark { display: inline-flex; align-items: center; justify-content: center; color: #191600; }
.tl-kakao-mark svg { display: block; fill: currentColor; }

.tl-naver-btn { background: #03c75a; color: #fff !important; }
.tl-naver-btn:hover { background: #02a94c; }
.tl-naver-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: #fff; color: #03c75a;
  font-weight: 800; font-size: 12px; border-radius: 3px;
}

.tl-google-btn { background: #fff; color: var(--tl-ink) !important; border: 1px solid var(--tl-s3); }
.tl-google-btn:hover { background: var(--tl-s1); }
.tl-google-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: #4285f4; color: #fff;
  font-weight: 800; font-size: 12px; border-radius: 3px;
}

.tl-login-divider { position: relative; text-align: center; margin: 0 0 24px !important; }
.tl-login-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--tl-s2);
}
.tl-login-divider span { position: relative; padding-inline: 12px; background: #fff; color: var(--tl-ink-3); font-size: 12px; }