/* 회원가입 페이지 스타일 — 리뉴얼 2B 시안(8-bit 딥네이비·골드 다크 테마) */
/* body 다크 배경/선택색은 공용 _DarkLayout(css/dark.css)로 통합됨 */

/* 중앙 정렬 영역 (상단에 정렬, 하단 여백 확보) */
.rg-main { min-height: calc(100vh - 160px); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px 80px; position: relative; color: #e8ecf7; font-family: 'Pretendard', system-ui, sans-serif; }
.rg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245,197,66,0.05) 1.5px, transparent 1.5px); background-size: 30px 30px; }

/* 카드 */
.rg-card { position: relative; width: 520px; max-width: 100%; border: 1px solid #23306a; border-radius: 18px; background: #0a0e1f; box-shadow: 0 30px 80px rgba(0,0,0,0.5); overflow: hidden; }

/* 카드를 여럿 세로로 놓는 자리(마이페이지). 카드와 같은 폭을 여기서 정합니다.
   .rg-main 이 flex 라 이 칸은 <b>내용 크기로 잡힙니다</b> — 폭을 적어 두지 않으면 안쪽
   카드의 520px 이 그대로 칸의 폭이 되고, 카드의 max-width:100% 는 그 520px 을 기준으로
   재므로 아무것도 막지 못합니다. 좁은 화면에서 오른쪽이 잘리는 것이 그 때문입니다. */
.rg-col { position: relative; width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; }
.rg-col .rg-card { width: 100%; }

/* 헤더 */
.rg-header { padding: 30px 36px 20px; border-bottom: 1px solid #1b2a4e; }
.rg-eyebrow { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #f5c542; }
.rg-title { font-size: 26px; font-weight: 800; color: #e8ecf7; margin: 12px 0 0; letter-spacing: -0.4px; }
.rg-sub { font-size: 14px; color: #8da0d6; margin-top: 8px; }

/* 본문 */
/* 다른 화면에서 넘어오며 남긴 안내(예: 확인하지 않은 계정을 지운 뒤) */
.rg-result { margin: 20px 36px 0; padding: 13px 15px; border: 1px solid rgba(76,174,122,0.42); border-radius: 10px; background: rgba(76,174,122,0.10); font-size: 13.5px; line-height: 1.7; color: #c3cdec; word-break: keep-all; }

/* 항목에 매이지 않는 오류(소셜 가입 마무리에서 연결 실패 등) */
.rg-summary { margin: 20px 36px 0; 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; }
.rg-summary ul { margin: 0; padding: 0; list-style: none; }

.rg-body { padding: 26px 36px 30px; display: flex; flex-direction: column; gap: 20px; }
.rg-field { margin: 0; }
.rg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rg-label { display: block; font-size: 13px; font-weight: 700; color: #8da0d6; margin-bottom: 9px; }
.rg-req { color: #e2533f; }

/* 입력 공통 */
.rg-input, .rg-textarea { width: 100%; padding: 13px 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; }
.rg-input:focus, .rg-textarea:focus { border-color: #f5c542; }
.rg-input::placeholder, .rg-textarea::placeholder { color: #5f6f9f; }
.rg-textarea { min-height: 80px; line-height: 1.6; resize: vertical; }
input.rg-input[type="date"] { color: #c3cdec; color-scheme: dark; }
/* select 도 같은 입력칸 모양을 쓰되 두 가지를 달리합니다.
   ① 세로 여백을 뺍니다 — select 는 높이가 정해지면 글자를 스스로 가운데 놓는데,
      공통 padding(13px) 이 그대로 먹으면 글자가 아래로 밀려 잘립니다.
   ② color-scheme 을 어둡게 둡니다 — 없으면 펼친 목록이 흰 바탕에 흰 글씨가 됩니다. */
select.rg-input { padding-top: 0; padding-bottom: 0; min-height: 46px; color: #c3cdec; color-scheme: dark; cursor: pointer; }

/* 비밀번호 칸의 눈 아이콘(계정 화면의 .lg-pass-wrap·.lg-eye 와 같은 자리입니다).
   아이콘이 글자 위에 겹치지 않도록 칸의 오른쪽 여백을 넓혀 두고, 그 자리에 아이콘을 얹습니다.
   세로는 값으로 박지 않고 가운데로 맞춥니다 — 칸 높이는 글꼴이 무엇으로 잡히느냐에 따라
   한두 픽셀씩 달라지는데, 그때마다 아이콘만 위아래로 어긋나 보입니다. */
.rg-pass-wrap { position: relative; }
.rg-pass-wrap .rg-input { padding-right: 46px; }
.rg-eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #6f7ea8; cursor: pointer; display: flex; transition: color .15s; }
.rg-eye:hover { color: #f5c542; }

/* 유효성 메시지 */
.rg-error { display: block; margin-top: 6px; font-size: 13px; color: #e2705f; }
/* 입력 밑에 붙는 설명(확인 메일을 보낸다는 안내 등) */
.rg-help { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: #6f7ea8; word-break: keep-all; }
/* 미리 확인해 준 결과 — 오류(.rg-error)와 색을 나눕니다. 아직 틀린 것이 아니라 알려 주는 것입니다. */
.rg-ok { color: #4cae7a; }
.rg-warn { color: #e2a05f; }

/* 성별 세그먼트 */
.rg-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rg-gender-opt { position: relative; margin: 0; }
.rg-gender-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rg-gender-opt span { display: block; text-align: center; padding: 12px; border-radius: 10px; border: 1px solid #23306a; background: #0c1230; color: #8da0d6; font-size: 14px; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.rg-gender-opt span:hover { border-color: #8da0d6; }
.rg-gender-opt input:checked + span { border-color: #f5c542; background: rgba(245,197,66,0.12); color: #f5c542; font-weight: 700; }

/* 전화번호 — 국가번호와 번호를 갈라 둡니다.
   번호만 받으면 모두 한국 번호로 새겨집니다. 국내 번호와 해외 번호는 생김새로 갈라낼 수 없어서
   (앞의 0 은 나라마다 뜻이 다릅니다) 나라를 고르게 합니다. 저장은 여전히 E.164 하나입니다. */
.rg-phone { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 8px; align-items: stretch; }
/* 세로 여백·목록 색은 select 공통 규칙(select.rg-input)이 이미 맞춰 둡니다. */
.rg-phone-country { padding-left: 12px; }
/* 좁은 화면에서는 두 줄로 쌓습니다 — 나란히 두면 긴 나라 이름(남아프리카공화국)이 잘리거나
   번호 칸이 눌립니다. 둘 다 전체 폭을 쓰면 어느 쪽도 잘리지 않습니다. */
@media (max-width: 560px) {
	.rg-phone { grid-template-columns: 1fr; }
}

/* 프로필 사진 */
.rg-photo-row { display: flex; align-items: center; gap: 16px; }
.rg-photo-preview { width: 72px; height: 72px; border-radius: 12px; border: 1px solid #23306a; background: #0c1230; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.rg-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.rg-file-input { display: none; }
.rg-photo-pick { flex: 1; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px dashed #2c3c7e; border-radius: 10px; color: #8da0d6; font-size: 14px; cursor: pointer; margin: 0; transition: border-color .15s, color .15s; }
.rg-photo-pick:hover { border-color: #f5c542; color: #c3cdec; }

/* 약관 동의 체크박스 */
.rg-terms { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #c3cdec; cursor: pointer; padding: 4px 0; margin: 0; user-select: none; }
.rg-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.rg-check-box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #2c3c7e; background: #0c1230; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, border-color .15s; }
.rg-check-box svg { opacity: 0; transition: opacity .15s; }
.rg-terms input:checked ~ .rg-check-box { background: #f5c542; border-color: #f5c542; }
.rg-terms input:checked ~ .rg-check-box svg { opacity: 1; }
.rg-terms a { text-decoration: none; color: #f5c542; }
.rg-terms a:hover { color: #ffe48f; }
/* 선택 동의 — 필수와 눈으로 구분되게 한 단계 낮춥니다(묶여 보이면 강요가 됩니다). */
.rg-optional { margin-top: 10px; padding-top: 12px; border-top: 1px solid #1b2a4e; align-items: flex-start; font-size: 13px; color: #8da0d6; line-height: 1.6; word-break: keep-all; }
.rg-optional .rg-check-box { margin-top: 1px; flex: 0 0 auto; }

/* 액션 버튼 */
.rg-actions { display: flex; gap: 10px; margin-top: 4px; }
.rg-submit { flex: 1; padding: 15px; background: #f5c542; border: 0; border-radius: 10px; color: #0a1130; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s; }
.rg-submit:hover { background: #ffe48f; }
.rg-cancel { padding: 15px 26px; background: transparent; border: 1px solid #2c3c7e; border-radius: 10px; color: #c3cdec; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; transition: border-color .15s; }
.rg-cancel:hover { border-color: #8da0d6; }

/* 모바일: 좌우 여백·카드 패딩·상단 여백 축소(가입·마이페이지 등 rg-* 폼 공용) */
@media (max-width: 768px) {
	.rg-main { padding-top: 20px; padding-left: 10px; padding-right: 10px; }
	.rg-header { padding-left: 18px; padding-right: 18px; }
	.rg-body { padding-left: 18px; padding-right: 18px; }
}

/* 서버가 그린 초기 안내는 처음 채운 이름에 대한 것입니다. 검증 오류가 나면 감춥니다 —
   "쓸 수 있는 이름입니다" 와 "사용할 수 없는 닉네임입니다" 가 나란히 서면 안 됩니다.
   (이름을 고쳤을 때 지우는 것은 account/external-register.js 가 맡습니다.) */
.rg-error.field-validation-error ~ .rg-initial-help { display: none; }