@charset "UTF-8";

/**
 * @Date : 2026. 9. 15.
 * @Author : monotime
 * @Description
 * 		회원가입 · 인증 메일 안내 · 인증 결과 화면
 *
 * 		⚠️ 이 파일만으로는 화면이 서지 않습니다. 색 변수(--bg-card · --accent …)와 카드·입력칸·버튼
 * 		기본형은 user.css 가 정의하므로, 회원가입 화면들은 user.css 를 먼저 읽고 이 파일을 덧입힙니다.
 * 		여기에는 <b>회원가입에만 있는 것</b>(약관 동의 상자, 결과 아이콘, 링크형 버튼)만 둡니다.
 */

/* ─── Card ───
   가입 폼은 입력칸이 다섯 줄에 약관 상자까지 붙어 로그인·찾기 화면보다 깁니다.
   폭을 조금 넓혀 한 줄에 들어가는 글자 수를 맞춥니다. */
.user-auth-form-wide {
	max-width: 520px;
}

/* ─── Terms ─── */
.terms-box {
	margin-top: 24px;
	/* 아래 안내 박스(.auth-notice)에는 margin-top 이 없어 그냥 두면 두 상자가 맞닿습니다. */
	margin-bottom: 24px;
	padding: 16px 18px;
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.terms-row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

/* 체크 상자는 브라우저 기본 모양(accent-color 만 준 흰 사각형)이 다크 카드 위에서 튀므로
   appearance 만 끄고 input 자체를 직접 그립니다. <span> 껍데기를 덧대지 않는 이유는,
   그러면 label 연결 · 키보드 포커스 · join.js 의 체크 상태 동기화를 모두 다시 맞춰야 하기 때문입니다.
   여기서는 네이티브 시맨틱을 그대로 두고 겉모습만 갈아 끼웁니다. */
.terms-row input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	background: var(--bg-input-focus);
	border: 1px solid var(--outline-color);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.terms-row input[type="checkbox"]:hover {
	border-color: var(--outline-hover);
}

.terms-row input[type="checkbox"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}

/* 체크 표시는 공용 아이콘(check.svg)을 mask 로 얹습니다 — 인라인 <svg> 를 쓰지 않는 관례를 따릅니다.
   url 은 이 파일(/css/join/) 기준 상대경로입니다. */
.terms-row input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #fff;
	-webkit-mask: url("../../images/icons/check.svg") no-repeat center / 12px 12px;
	        mask: url("../../images/icons/check.svg") no-repeat center / 12px 12px;
}

.terms-row input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.terms-row .terms-label {
	font-size: 13px;
	color: var(--text-primary);
	line-height: 1.4;
}

/* 전체 동의는 한 단계 굵게 두고, 개별 항목과 선으로 갈라 줍니다. */
.terms-row-all .terms-label {
	font-size: 14px;
	font-weight: 600;
}

.terms-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--border-color);
}

/* min-height 를 두는 이유 — '전문' 버튼이 있는 행만 버튼 높이(약 26px)만큼 커져서
   버튼 없는 마케팅 행이 혼자 낮아집니다. 바닥을 맞춰 세 행을 같은 높이로 둡니다. */
.terms-list > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 34px;
	padding: 2px 0;
}

.terms-label em {
	font-style: normal;
	font-weight: 600;
	color: var(--accent);
}

/* 선택 항목은 필수와 같은 강조를 주면 필수처럼 읽히므로 약하게 둡니다. */
.terms-label em.terms-optional {
	color: var(--text-secondary);
}

.terms-view {
	flex: 0 0 auto;
	padding: 4px 10px;
	font-size: 12px;
	color: var(--text-secondary);
	background: transparent;
	border: 1px solid var(--outline-color);
	border-radius: 8px;
	transition: all 0.2s ease;
}

.terms-view:hover {
	color: var(--text-primary);
	border-color: var(--outline-hover);
	background: var(--bg-input-focus);
}

/* ─── Guide ───
   안내 문단은 여러 줄이라 가운데 정렬(.input-helper 의 flex)로는 줄이 들쭉날쭉해집니다. */
.input-helper.join-guide {
	display: block;
	margin-top: 8px;
	line-height: 1.8;
}

/* ─── Result Icon ───
   결과 화면의 아이콘만 색을 갈아 끼웁니다(모양·크기는 user.css 의 .auth-icon 그대로). */
.auth-title .auth-icon-success {
	background: linear-gradient(135deg, #22c55e, #16a34a);
	box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}

.auth-title .auth-icon-error {
	background: linear-gradient(135deg, #f97316, #ea580c);
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

/* ─── Link Button ───
   결과 화면의 주 동작은 이동뿐이라 <a> 로 둡니다.
   .auth-btn 은 button 기준이라 링크에는 밑줄 제거와 색 고정이 더 필요합니다. */
.auth-btn-link {
	text-decoration: none;
	color: #fff;
}

.auth-btn-link:hover {
	color: #fff;
}