/* =====================================================
   auth.css — 로그인 / 회원가입 공용 스타일
   - 좌/우 분할 레이아웃(.reg-wrap) · 좌측 비주얼 패널(.reg-visual, 작전판)
   - 공용 폼 요소(.form-*, .btn-social, .btn-submit) · 다크모드 오버라이드
   - register.php 에서 이전(2026-06-28). 두 화면이 함께 가도록 공유
   ===================================================== */
	/* ══════════════════════════════════════════════
	회원가입 전용 변수
	  - 공통 토큰(--bg/--surface/--blade/--dark 등)은 common.css·theme.css 사용 → 다크모드 호환.
	  - 여기선 공통에 없는 것만 .reg-wrap 에 스코프(전역 누수·다크모드 덮어쓰기 방지).
	══════════════════════════════════════════════ */
	.reg-wrap {
	--bladeD:  #0770AA;                       /* 가입 버튼 hover */
	--mono:    'IBM Plex Mono', monospace;
	--sans:    'IBM Plex Sans KR', sans-serif;
	--display: 'Bebas Neue', sans-serif;      /* 좌측 '13' 로고 */
	--r:       8px;
	font-family: var(--sans);                 /* 폼 영역만 IBM Plex(헤더/풋터는 사이트 기본폰트) */
	}

	/* ── 공통 레이아웃(.page-body) 안에 좌/우 분할을 풀폭으로 배치 ── */
	.page-body {
	padding: 0;                               /* common.css 1100px·여백 해제 → 분할 그대로 풀폭 */
	max-width: none;
	display: flex;                            /* 자식 .reg-wrap 이 본문 높이를 채우도록 */
	}
	@media (max-width: 768px) {
	/* 모바일 하단탭바(64px) 위 여백 확보 — iOS safe-area 포함 */
	.page-body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	}

	/* ══════════════════════════════════════════════
	스플릿 레이아웃 — 좌(비주얼) · 우(폼)
	══════════════════════════════════════════════ */
	.reg-wrap {
	display: flex;
	width: 100%;
	max-width: 1100px;   /* PC 최대폭 — 사이트 공통(common.css 1100px)과 일치 */
	margin: 0 auto;      /* flex 부모(.page-body) 안에서 좌우 여백 자동 = 초광폭서 가운데 */
	padding: 0 12px;     /* 좌우 최소 여백(좁은 화면서 가장자리 붙음 방지) */
	flex: 1;          /* .page-body(flex) 안에서 가로·세로 채움 */
	min-height: 0;    /* 구 100vh 제거 → 헤더/풋터와 겹침 방지, 페이지 스크롤 정상 */
	}

	/* ── 좌측 비주얼 패널 ── */
	.reg-visual {
	width: 50%;                         /* 좌(비주얼)·우(폼) 50:50 분할 — 1100 컨테이너 기준 각 550px */
	flex-shrink: 0;
	background: var(--dark);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(32px, 4vw, 48px) clamp(24px, 3.2vw, 44px);
	}

	/* 빙판 질감 배경 — 대각선 라인 */
	.reg-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
		-55deg,
		transparent,
		transparent 60px,
		rgba(10,132,200,.04) 60px,
		rgba(10,132,200,.04) 61px
		);
	pointer-events: none;
	}

	/* 블레이드 글로우 — 하단 */
	.reg-visual::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(10,132,200,.18) 0%, transparent 65%);
	pointer-events: none;
	}

	.visual-logo {
	position: relative;
	z-index: 1;
	}
	.visual-logo .num {
	font-family: var(--display);
	font-size: 72px;
	line-height: 1;
	color: var(--blade);
	letter-spacing: 2px;
	}
	.visual-logo .brand {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
	margin-top: 4px;
	}

	.visual-mid {
	position: relative;
	z-index: 1;
	}
	.visual-tagline {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
	letter-spacing: -.5px;
	}
	.visual-tagline em {
	font-style: normal;
	color: var(--blade);
	}
	.visual-desc {
	font-size: 13px;
	color: rgba(255,255,255,.38);
	margin-top: 14px;
	line-height: 1.7;
	}

	/* 아이스하키 링크장 SVG */
	.rink-svg {
	width: 100%;
	max-width: clamp(320px, 32vw, 420px);   /* 모바일 최대 320(width:100%가 화면 넘침 차단), PC 해상도 클수록 최대 420까지 확대 */
	height: auto;
	margin: 18px 0 14px;
	filter: drop-shadow(0 0 12px rgba(10,132,200,.22));
	}

	.visual-bottom {
	position: relative;
	z-index: 1;
	}
	.visual-login-link {
	font-size: 12.5px;
	color: rgba(255,255,255,.35);
	text-align: right;          /* PC: 로그인 안내 우측 정렬 */
	}
	.visual-login-link a {
	color: var(--blade);
	text-decoration: none;
	font-weight: 600;
	}
	.visual-login-link a:hover { text-decoration: underline; }

	/* 진행 단계 표시 */
	.visual-steps {
	display: flex;
	gap: 6px;
	margin-top: 28px;           /* PC: 설명문('…플랫폼으로.')과 간격 확보 — 너무 붙음 해소 */
	margin-bottom: 20px;
	}
	.vstep {
	height: 3px;
	border-radius: 2px;
	background: rgba(255,255,255,.12);
	flex: 1;
	transition: background .3s;
	}
	.vstep.on { background: var(--blade); }

	/* ── 우측 폼 패널 ── */
	.reg-form-wrap {
	flex: 1;
	min-width: 0;      /* flex 자식 최소폭 해제 → 좁은 데스크톱서 폼이 칸을 넘쳐 잘리지 않게 */
	background: var(--bg);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(32px, 4vw, 48px) clamp(20px, 2.6vw, 36px);
	min-height: 0;     /* 구 100vh + 내부 overflow 제거 → 페이지 전체가 스크롤되어 풋터 노출 */
	}

	.reg-form-inner {
	width: 100%;
	max-width: 420px;
	}

	/* ══════════════════════════════════════════════
	공통 폼 요소
	══════════════════════════════════════════════ */
	.form-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--steel);
	letter-spacing: -.4px;
	margin-bottom: 6px;
	}
	.form-sub {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 28px;
	line-height: 1.6;
	}

	.form-group {
	margin-bottom: 16px;
	}
	.form-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--steel);
	letter-spacing: .3px;
	margin-bottom: 6px;
	}
	.form-label .req {
	color: var(--blade);
	margin-left: 2px;
	}
	.form-label .opt {
	font-size: 10.5px;
	font-weight: 400;
	color: var(--light);
	margin-left: 4px;
	}

	.form-input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	}
	.form-input:focus {
	border-color: var(--blade);
	box-shadow: 0 0 0 3px rgba(10,132,200,.1);
	}
	.form-input::placeholder { color: var(--light); }
	.form-input.error { border-color: var(--red); }

	/* 인증번호 입력 행 */
	.input-with-btn {
	display: flex;
	gap: 8px;
	}
	.input-with-btn .form-input { flex: 1; }
	.btn-verify {
	padding: 0 16px;
	background: var(--steel);
	color: #fff;
	border: none;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
	}
	.btn-verify:hover { background: var(--blade); }
	.btn-verify:disabled { background: var(--light); cursor: not-allowed; }

	/* 셀렉트 */
	.form-select {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 14px;
	color: var(--text);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance: none;
	outline: none;
	cursor: pointer;
	transition: border-color .15s;
	}
	.form-select:focus { border-color: var(--blade); box-shadow: 0 0 0 3px rgba(10,132,200,.1); }

	/* 힌트 텍스트 */
	.form-hint {
	font-size: 11.5px;
	color: var(--light);
	margin-top: 5px;
	line-height: 1.5;
	}

	/* 구분선 */
	.form-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0;
	color: var(--light);
	font-size: 12px;
	}
	.form-divider::before, .form-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
	}

	/* ══════════════════════════════════════════════
	소셜 버튼
	══════════════════════════════════════════════ */
	.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px;
	border: none;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .15s, transform .1s;
	margin-bottom: 10px;
	}
	.btn-social:hover { opacity: .9; transform: translateY(-1px); }
	.btn-social:active { transform: translateY(0); }

	.btn-kakao {
	background: #FEE500;
	color: #191600;
	}
	.btn-naver {
	background: #03C75A;
	color: #fff;
	}

	/* 소셜 아이콘 SVG */
	.social-icon { width: 20px; height: 20px; flex-shrink: 0; }

	/* ══════════════════════════════════════════════
	일반가입 선택 버튼 (휴대폰 / 이메일)
	══════════════════════════════════════════════ */
	.choose-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 8px;
	}
	.btn-choose {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 16px;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
	color: var(--text);
	}
	.btn-choose:hover {
	border-color: var(--blade);
	box-shadow: 0 0 0 3px rgba(10,132,200,.08);
	}
	.btn-choose .choose-icon {
	width: 44px;
	height: 44px;
	background: var(--bladeL);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	}
	.btn-choose .choose-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--steel);
	}
	.btn-choose .choose-desc {
	font-size: 11.5px;
	color: var(--muted);
	text-align: center;
	line-height: 1.4;
	}

	/* ══════════════════════════════════════════════
	약관 동의 체크박스
	══════════════════════════════════════════════ */
	.terms-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	background: var(--bladeL);
	border-radius: var(--r);
	border: 1px solid rgba(10,132,200,.15);
	margin-bottom: 20px;
	}
	.terms-check {
	width: 18px;
	height: 18px;
	accent-color: var(--blade);
	flex-shrink: 0;
	margin-top: 1px;
	cursor: pointer;
	}
	.terms-text {
	font-size: 12.5px;
	color: var(--steel);
	line-height: 1.6;
	}
	.terms-text a {
	color: var(--blade);
	font-weight: 600;
	text-decoration: none;
	}
	.terms-text a:hover { text-decoration: underline; }

	/* ══════════════════════════════════════════════
	제출 버튼
	══════════════════════════════════════════════ */
	.btn-submit {
	display: block;
	width: 100%;
	padding: 14px;
	background: var(--blade);
	color: #fff;
	border: none;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .3px;
	transition: background .15s, transform .1s;
	}
	.btn-submit:hover { background: var(--bladeD); transform: translateY(-1px); }
	.btn-submit:active { transform: translateY(0); }

	/* ══════════════════════════════════════════════
	뒤로가기 링크
	══════════════════════════════════════════════ */
	.back-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--muted);
	text-decoration: none;
	margin-bottom: 22px;
	transition: color .15s;
	}
	.back-link:hover { color: var(--blade); }

	/* ══════════════════════════════════════════════
	알림 메시지
	══════════════════════════════════════════════ */
	.msg-error {
	background: #FEE2E2;
	border: 1px solid #FECACA;
	border-radius: var(--r);
	padding: 11px 14px;
	font-size: 13px;
	color: #DC2626;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	}
	.msg-success {
	background: #D1FAE5;
	border: 1px solid #A7F3D0;
	border-radius: var(--r);
	padding: 20px;
	font-size: 13.5px;
	color: #065F46;
	text-align: center;
	line-height: 1.7;
	}
	.msg-success strong { font-size: 16px; display: block; margin-bottom: 6px; }

	/* (구 register 비번 강도/눈/규칙 CSS = 공용 pw-field.js + common.css .pw-* 로 이관·제거됨) */

	/* ══════════════════════════════════════════════
	반응형 — 모바일: 좌측 패널 → 상단 컴팩트 배너
	══════════════════════════════════════════════ */
	@media (max-width: 768px) {
	.reg-wrap {
		flex-direction: column;
	}

	/* 좌측 비주얼 → 상단 배너로 변환 */
	.reg-visual {
		width: 100%;
		height: 160px;
		flex-shrink: 0;
		padding: 0 24px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba(10,132,200,.2);
	}

	/* 배너 하단 블레이드 글로우 라인 */
	.reg-visual::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg,
		transparent 0%,
		rgba(10,132,200,.6) 30%,
		var(--blade) 50%,
		rgba(10,132,200,.6) 70%,
		transparent 100%
		);
		width: 100%;
		border-radius: 0;
	}

	/* 로고 — 가로 배치 */
	.visual-logo {
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.visual-logo .num {
		font-size: 52px;
		line-height: 1;
	}
	.visual-logo .brand {
		font-size: 11px;
		letter-spacing: 3px;
		line-height: 1.6;
	}
	/* 모바일: 'SEOHYEON' / 'ICE HOCKEY' 두 줄로 깔끔하게(가운뎃점 숨김) */
	.visual-logo .brand-sep { display: none; }
	.visual-logo .brand-w { display: block; }

	/* 중앙 타글라인 — 모바일 배너에서 숨김 (높이 제한) */
	.visual-mid { display: none; }

	/* 우측 — 단계 표시 + 로그인 링크 세로 배치 */
	.visual-bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
		position: static;   /* 로그인 링크 absolute 가 .reg-visual(배너) 기준으로 잡히도록 */
	}
	.visual-steps {
		width: 80px;
		margin-bottom: 0;
	}
	.visual-login-link {
		font-size: 11.5px;
		white-space: nowrap;
		position: absolute;     /* 모바일: 배너 우측 하단으로 이동 */
		right: 24px;
		bottom: 12px;
		z-index: 2;
	}

	/* 폼 패널 */
	.reg-form-wrap {
		padding: 28px 20px 40px;
		min-height: auto;
		align-items: flex-start;
	}
	.reg-form-inner {
		max-width: 100%;
	}

	/* 선택 카드 — 모바일에서 세로 배치 */
	.choose-btns {
		grid-template-columns: 1fr;
	}
	}

	/* ══════════════════════════════════════════════
	인증 완료 배지 (인증 후 표시)
	══════════════════════════════════════════════ */
	.verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #D1FAE5;
	color: #059669;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 20px;
	margin-left: 8px;
	}

	/* 입력 필드 내부 인증 상태 표시 */
	.input-verified .form-input {
	border-color: var(--green);
	background: #F0FDF4;
	}

	/* ── 다크모드: 폼 제목/라벨이 var(--steel)(짙은 네이비)라 어두운 배경서 안 보이는 문제 → 밝은 본문색으로 ── */
	[data-theme="dark"] .form-title,
	[data-theme="dark"] .form-label,
	[data-theme="dark"] .btn-choose .choose-label,
	[data-theme="dark"] .terms-text { color: var(--text); }

	/* 인증 발송/코드 입력 — 마이페이지와 동일 레이아웃(발송=입력 아래 전체폭 / 코드=한 줄: 입력+타이머+확인) */
	.reg-form-wrap .auth-verify-send { margin: 2px 0 8px; }
	/* 발송 = 블레이드 틴트 전체폭(딥블루 배경서 var(--steel)이 묻히던 문제 해소) */
	.reg-form-wrap .auth-verify-send .btn-verify { width: 100%; padding: 11px; background: var(--bladeL); color: var(--blade); border: 1.5px solid var(--blade); }
	.reg-form-wrap .auth-verify-send .btn-verify:hover { background: var(--blade); color: #fff; }
	.reg-form-wrap .auth-verify-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
	.reg-form-wrap .auth-code-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 14px; letter-spacing: 2px; outline: none; }
	.reg-form-wrap .auth-code-input::placeholder { letter-spacing: normal; color: var(--light); }
	.reg-form-wrap .auth-code-input:focus { border-color: var(--blade); }
	/* 확인 = 블레이드 채움(또렷) */
	.reg-form-wrap .auth-verify-row .btn-verify { flex: 0 0 auto; background: var(--blade); color: #fff; border: 1.5px solid var(--blade); }
	.reg-form-wrap .auth-verify-row .btn-verify:hover { opacity: .9; }
	.reg-form-wrap .auth-code-timer { flex: 0 0 auto; align-self: center; font-size: 12px; color: var(--amber); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }

	/* ── auth 폼 pill 컴팩트(아이디/비밀번호 등) — PC·모바일 동일 크기로 통일 ── */
	.reg-form-wrap .pf-field { min-height: 42px; padding: 5px; margin-bottom: 8px; }
	/* 라벨 = PC 고정폭(모든 필드 시작점 정렬) / 모바일 auto(컴팩트). 112px = 최장 라벨('비밀번호 확인') 전부 표시 */
	.reg-form-wrap .pf-field > .pf-label { height: 28px; width: 112px; padding: 0 4px; }
	.reg-form-wrap .pf-field > .pf-label .pf-txt { overflow: visible; text-overflow: clip; }
	@media (max-width: 768px) { .reg-form-wrap .pf-field > .pf-label { width: auto; } }
	.reg-form-wrap .pf-txt { font-size: 11px; }
	.reg-form-wrap .pf-field > input:not([type="checkbox"]) { font-size: 13px; }
	/* 자동완성(autofill) 시 브라우저가 흰/노란 배경을 칠해 pill 안에 박스가 뜨던 문제 → pill 표면색으로 고정 */
	.reg-form-wrap .pf-field > input:-webkit-autofill,
	.reg-form-wrap .pf-field > input:-webkit-autofill:hover,
	.reg-form-wrap .pf-field > input:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0 100px var(--surface) inset !important;
		-webkit-text-fill-color: var(--text) !important;
		caret-color: var(--text);
	}

	/* ══════════════════════════════════════════════════════════════
	   라이트 모드: 좌측 비주얼 패널 = 실제 빙상장 바닥 느낌
	   (푸른빛 도는 회색 빙면 + 스케이트 스크래치/얼룩덜룩 + 작전판은 얼음 위 흰 보드)
	   · 다크 모드는 기존 var(--dark) 유지 → 본 블록은 [data-theme="light"] 한정
	   ══════════════════════════════════════════════════════════════ */
	[data-theme="light"] .reg-visual {
		background:
			linear-gradient(160deg, #eef6fc 0%, #e6f1f9 55%, #dfeaf3 100%);                      /* 밝은(거의 흰) 차가운 빙면 — 얼룩·스크래치는 ::before(ice-texture.svg) */
	}
	/* 얼룩덜룩·균열 — 불규칙 자연 텍스처(feTurbulence 노이즈 + 손그림 균열선) */
	[data-theme="light"] .reg-visual::before {
		background: url('/assets/img/ice-texture.svg?v=20260629b') center / cover no-repeat;   /* ?v= : CSS url() 은 filemtime 캐시버스팅이 안 걸려 SVG 교체 시 수동 버전업 */
		opacity: 1;
		mix-blend-mode: normal;   /* 얼룩·스크래치 SVG 를 빙면 위에 얹음 */
	}
	/* 패널 텍스트 — 흰색→짙은 빙판색(라이트 가독) */
	[data-theme="light"] .reg-visual .visual-tagline      { color: #16324f; }
	[data-theme="light"] .reg-visual .visual-desc         { color: rgba(28,54,86,0.70); }
	[data-theme="light"] .reg-visual .visual-logo .brand  { color: rgba(28,54,86,0.55); }
	[data-theme="light"] .reg-visual .visual-login-link   { color: rgba(28,54,86,0.62); }
	[data-theme="light"] .reg-visual .visual-steps .vstep      { background: rgba(28,54,86,0.16); }
	[data-theme="light"] .reg-visual .visual-steps .vstep.on   { background: var(--blade); }
	/* 작전판 보드 = 반투명(빙면 위에 그린 듯) → 얼음 텍스처가 비쳐 보임 */
	[data-theme="light"] .reg-visual .rink-svg > rect:first-of-type {
		fill: rgba(255,255,255,0.28);
		stroke: rgba(28,54,86,0.40);
	}

	/* ══════════════════════════════════════════════════════════════
	   다크 모드: 좌측(모바일=상단) 비주얼 패널 = 딥블루 빙상장 느낌
	   (깊은 파랑 그라데이션 + 블레이드 블루 글로우 → 라이트의 빙면 텍스처와 대응)
	   · 기본 var(--dark)(거의 검정) 대신 딥블루로 또렷하게
	   ══════════════════════════════════════════════════════════════ */
	[data-theme="dark"] .reg-visual {
		background:
			radial-gradient(130% 100% at 50% -12%, rgba(46,120,205,0.13), transparent 55%),     /* 상단 은은한 빛(입체) */
			radial-gradient(150% 130% at 50% 116%, rgba(0,0,0,0.52), transparent 62%),           /* 하단·모서리 어둠(비네팅=깊이) */
			linear-gradient(160deg, #0a2a54 0%, #05152e 52%, #01070f 100%);                      /* 깊은 딥블루 → 거의 검정 */
	}
	/* 빙판 텍스처 — 다크에선 screen 으로 옅게(어둡게 유지 위해 opacity 낮춤) */
	[data-theme="dark"] .reg-visual::before {
		background: url('/assets/img/ice-texture-dark.svg') center / cover no-repeat;
		opacity: .34;
		mix-blend-mode: screen;
	}
	/* 우측 폼 패널도 딥블루 계열로(좌측보다 살짝 가라앉은 톤 → 좌/우 구분 유지). 전역 --bg 는 불변, auth 폼만 스코프 */
	[data-theme="dark"] .reg-form-wrap {
		background: linear-gradient(160deg, #0b2138 0%, #081a2f 100%);
	}
	/* 다크: 가입 방법 선택 카드(휴대폰/이메일) = 딥블루 보드(좌측 패널 계열·패널보다 살짝 떠보이게). hover 글로우는 admin/mypage 카드와 동일 톤 */
	[data-theme="dark"] .reg-form-wrap .btn-choose {
		background: linear-gradient(160deg, rgba(20,58,104,0.55) 0%, rgba(12,36,66,0.50) 100%);
		border-color: rgba(52,140,225,0.28);
	}
	[data-theme="dark"] .reg-form-wrap .btn-choose:hover {
		border-color: var(--blade);
		box-shadow: 0 0 0 3px rgba(30,167,255,0.12), 0 8px 20px rgba(6,16,34,0.55);
	}

	/* ══════════════════════════════════════════════════════════════
	   인라인 검증 툴팁 + 제출 딤 (auth-form.js 연동)
	   ══════════════════════════════════════════════════════════════ */
	.auth-tip {
		position: absolute;
		left: 0;
		top: calc(100% + 6px);
		z-index: 30;
		background: var(--red, #EF4444);
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.45;
		padding: 7px 11px;
		border-radius: 8px;
		box-shadow: 0 6px 16px rgba(239,68,68,.28);
		max-width: 240px;
		animation: authTipIn .14s ease;
	}
	.auth-tip::before {
		content: '';
		position: absolute;
		left: 16px;
		top: -5px;
		border: 5px solid transparent;
		border-top: 0;
		border-bottom-color: var(--red, #EF4444);
	}
	@keyframes authTipIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

	/* 오류 필드 강조 */
	.pf-field.auth-invalid { border-color: var(--red, #EF4444) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.14) !important; }
	.form-group.auth-invalid .form-input,
	.form-group.auth-invalid .find-code-input { border-color: var(--red, #EF4444) !important; }

	/* 제출 버튼 딤(이중 제출 차단 중) */
	.is-loading { opacity: .6 !important; cursor: progress !important; pointer-events: none; }