/* 계정 화면 공용 — 리뉴얼 2B 시안(8-bit 딥네이비·골드 다크 테마) */
/* body 다크 배경/선택색은 공용 dark.css 가 맡습니다. */
/* 폴더명과 같은 파일 = 그 서비스의 공용입니다. 계정 카드를 쓰는 여덟 화면(로그인·아이디 찾기·
   비밀번호 찾기·재설정·변경·메일 주소 변경·소셜 선택·소셜 연결)이 같은 뼈대를 씁니다.
   각 화면 css 가 이 파일을 @import 하고, 전용 스타일이 없는 화면은 이 파일을 바로 링크합니다.

   한 화면에서만 쓰는 것은 여기 두지 마십시오 — 소셜 단추·아이디 저장(login.css),
   찾은 아이디 목록·전화번호 칸(findid.css), 연동 선택 설명(external-choice.css). */

/* 중앙 정렬 영역 (상단 nav·하단 footer 높이 제외) */
.lg-main { min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; padding: 56px 24px; position: relative; overflow: hidden; color: #e8ecf7; font-family: 'Pretendard', system-ui, sans-serif; }
.lg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245,197,66,0.06) 1.5px, transparent 1.5px); background-size: 30px 30px; }

/* 카드 */
/* 폭은 회원가입(.rg-card 520px)과 맞춥니다 — 로그인에서 가입으로 넘어갈 때 카드가 벌어지면
   같은 자리에서 화면이 갈아 끼워진 것처럼 보입니다. */
.lg-card { position: relative; width: 520px; max-width: 100%; border: 1px solid #23306a; border-radius: 18px; overflow: hidden; background: #0a0e1f; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }

/* 픽셀 커버 */
.lg-cover { position: relative; height: 150px; background: linear-gradient(180deg, #1a2a6e 0%, #10193f 70%, #0a1028 100%); overflow: hidden; }
.lg-cover-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245,197,66,0.18) 1.5px, transparent 1.5px); background-size: 24px 24px; }
.lg-cover-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.10) 2px 4px); }
.lg-cover-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.lg-logo { width: 54px; height: 54px; border-radius: 12px; background: #0a1130; border: 2px solid #2c3c7e; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', monospace; font-size: 16px; color: #f5c542; box-shadow: 0 4px 0 rgba(0,0,0,0.4); }
.lg-press { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #f5c542; text-shadow: 0 2px 0 #070b1f; }

/* 본문 */
/* 좌우 여백도 회원가입(.rg-body 36px)과 맞춥니다 — 카드 폭이 같아도 안쪽이 다르면
   입력칸 폭이 어긋나 보입니다. */
.lg-body { padding: 30px 36px 34px; }
.lg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.lg-title { font-size: 24px; font-weight: 800; color: #e8ecf7; letter-spacing: -0.4px; margin: 0; }
/* 화면 설명(소셜 가입·연결) */
.lg-lead { margin: -14px 0 22px; font-size: 13.5px; line-height: 1.75; color: #8da0d6; word-break: keep-all; }
.lg-lead strong { color: #c3cdec; font-weight: 700; }

/* 입력 */
.lg-fields { display: flex; flex-direction: column; gap: 12px; }
.lg-input { width: 100%; padding: 14px 15px; background: #0c1230; border: 1px solid #23306a; border-radius: 10px; color: #e8ecf7; font-size: 15px; outline: none; font-family: 'Pretendard', system-ui, sans-serif; transition: border-color .15s; }
.lg-input:focus { border-color: #f5c542; }
.lg-input::placeholder { color: #5f6f9f; }
/* 항목 이름을 내는 라벨입니다. 로그인처럼 칸이 둘뿐인 화면은 placeholder 로 충분하지만,
   아이디 찾기처럼 생년월일·전화번호가 섞인 화면은 무슨 칸인지 한눈에 들어와야 합니다
   (게다가 type="date" 는 placeholder 를 무시하고 브라우저의 형식 힌트만 냅니다).
   쓰면 그 화면의 칸에 모두 답니다 — 한 칸만 달면 그 칸이 어긋나 보입니다.
   작고 흐리게 두어 카드의 여백을 흐트러뜨리지 않습니다. */
.lg-label { display: block; margin-bottom: 6px; font-size: 12.5px; color: #8da0d6; }
/* 날짜 칸은 color-scheme 을 어둡게 둡니다(가입 폼의 rg-input 과 같습니다).
   없으면 브라우저가 라이트용 위젯을 그려 달력 아이콘이 검은색으로 나오고, 배경이 어두워
   그 자리가 비어 보입니다 — 달력이 없는 것처럼 읽힙니다. 펼친 달력도 함께 어두워집니다. */
input.lg-input[type="date"] { color: #c3cdec; color-scheme: dark; }
/* select 도 같은 입력칸 모양을 쓰되 두 가지를 달리합니다.
   ① 세로 여백을 뺍니다 — select 는 높이가 정해지면 글자를 스스로 가운데 놓는데,
      공통 padding(14px) 이 그대로 먹으면 글자가 아래로 밀려 잘립니다.
   ② color-scheme 을 어둡게 둡니다 — 없으면 펼친 목록이 흰 바탕에 흰 글씨가 됩니다. */
select.lg-input { padding-top: 0; padding-bottom: 0; min-height: 48px; color: #c3cdec; color-scheme: dark; cursor: pointer; }
.lg-pass-wrap { position: relative; }
.lg-pass-wrap .lg-input { padding-right: 46px; }
.lg-eye { position: absolute; right: 13px; top: 15px; color: #6f7ea8; cursor: pointer; display: flex; transition: color .15s; }
.lg-eye:hover { color: #f5c542; }

/* 유효성 메시지 */
.lg-error { display: block; margin-top: 4px; font-size: 13px; color: #e2705f; }

/* 항목에 매이지 않는 오류(로그인 실패 사유 등) */
.lg-summary { margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(226,112,95,0.42); border-radius: 10px; background: rgba(226,112,95,0.10); font-size: 13.5px; line-height: 1.7; color: #e8ecf7; word-break: keep-all; }
.lg-summary ul { margin: 0; padding: 0; list-style: none; }

/* 주 동작 단추 */
.lg-submit { width: 100%; margin-top: 18px; padding: 15px; background: #f5c542; border: 0; border-radius: 10px; color: #0a1130; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s; }
.lg-submit:hover { background: #ffe48f; }
/* 같은 모양을 링크에도 씁니다 — 값을 바꾸지 않고 옮겨 가기만 하는 자리(돌아가기 등)입니다.
   단추와 달리 링크는 폭 계산과 글자 정렬을 물려받지 않아 세 가지를 다시 적습니다. */
a.lg-submit { box-sizing: border-box; display: block; text-align: center; text-decoration: none; }

/* 하단 곁가지 링크(가입하기·로그인으로 등) */
.lg-signup { margin-top: 26px; padding-top: 22px; border-top: 1px solid #1b2a4e; text-align: center; font-size: 14px; color: #8da0d6; }
.lg-signup a { text-decoration: none; color: #f5c542; font-weight: 700; margin-left: 6px; }
.lg-signup a:hover { color: #ffe48f; }
/* 링크처럼 보이지만 폼을 보내는 단추입니다(누르면 값이 바뀌므로 링크로 두지 않습니다). */
.lg-textlink { padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; text-decoration: none; color: #f5c542; font-weight: 700; cursor: pointer; }
.lg-textlink:hover { color: #ffe48f; }

/* 곁들이는 설명(소셜 가입자도 쓸 수 있다는 안내 등) */
.lg-hint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: #6f7ea8; word-break: keep-all; }