/* 로그인 화면 — 계정 카드 뼈대는 공용(account.css)이고 여기에는 이 화면에만 있는 것만 둡니다. */
@import "account.css";

/* 소셜 공급자 아이콘·브랜드색. 연결된 서비스 화면(mypage/info.css)과 같은 표를 씁니다.
   소셜 단추(_SocialButtonsPartial)를 내는 화면은 여기뿐이라 공용이 아니라 이 파일에서 부릅니다. */
@import "../provider.css";

/* 로그인 실패 안내 안에 놓이는 링크들. 상자(.lg-summary)는 공용이고 그 안의 두 링크만 이 화면 것입니다. */
.lg-summary .lg-resend { display: block; margin-top: 8px; color: #f5c542; font-weight: 700; text-decoration: none; }
.lg-summary .lg-resend:hover { color: #ffe48f; }
/* 계정을 지우는 길은 되돌릴 수 없으므로 주 동작(골드)과 색을 나눕니다. */
.lg-summary .lg-danger { color: #e2a09a; font-weight: 600; font-size: 12.5px; }
.lg-summary .lg-danger:hover { color: #f0bdb8; }

/* 옵션 줄 */
.lg-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
/* 체크박스 둘(아이디 저장·로그인 상태 유지)과 링크가 한 줄에 들어갑니다.
   좁아지면 줄을 바꿔 글자가 잘리지 않게 둡니다. */
.lg-options { flex-wrap: wrap; gap: 10px 16px; }
.lg-options .lg-forgot { margin-left: auto; }
.lg-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #c3cdec; cursor: pointer; margin: 0; user-select: none; }
.lg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-check-box { width: 18px; height: 18px; border-radius: 5px; background: #0c1230; border: 1px solid #2c3c7e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, border-color .15s; }
.lg-check-box svg { opacity: 0; transition: opacity .15s; }
.lg-check input:checked ~ .lg-check-box { background: #f5c542; border-color: #f5c542; }
.lg-check input:checked ~ .lg-check-box svg { opacity: 1; }
.lg-forgot { text-decoration: none; font-size: 14px; color: #8da0d6; transition: color .15s; }
.lg-forgot:hover { color: #f5c542; }

/* 소셜 로그인 */
.lg-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 15px; color: #6f7ea8; font-size: 12px; }
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: #23306a; }

.lg-social { display: flex; gap: 10px; }
/* 단추마다 폼이 하나씩 붙습니다(CSRF 토큰) — 폼이 자리를 나눠 가지게 합니다. */
.lg-social form { flex: 1; margin: 0; }
.lg-social-btn { width: 100%; height: 46px; padding: 0; border: 1px solid #2c3c7e; border-radius: 10px; background: #0c1230; color: #8da0d6; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
/* 글자로 그린 우리 표식(.pv-mark)은 기본값이 배지(32px) 기준이라, 46px 단추에서는
   옆 단추의 18px 아이콘보다 작아 보입니다 — 이 그릇에 맞게만 키웁니다. */
.lg-social-btn .pv-mark { font-size: 10px; }
.lg-social-btn:focus-visible { outline: 2px solid #f5c542; outline-offset: 2px; }
/* 가리킬 때에만 브랜드색을 올립니다. 색은 단추에 붙은 pv-* 클래스가 정합니다(css/provider.css) —
   공급자마다 규칙을 따로 두면 새 공급자가 회색으로 남습니다.
   X·깃허브처럼 브랜드색이 검정인 곳은 그 표에서 이미 흰색으로 바꿔 두었습니다(다크 배경). */
.lg-social-btn:hover { background: #111938; border-color: var(--pv-brand, #e8ecf7); color: var(--pv-brand, #e8ecf7); }

/* 여러 화면을 오가는 보조 링크(아이디 찾기·비밀번호 찾기) */
.lg-links { margin-top: 12px; display: flex; justify-content: center; gap: 18px; font-size: 13px; }
.lg-links a { text-decoration: none; color: #8da0d6; }
.lg-links a:hover { color: #f5c542; }