/* 회원가입 마법사(Register/RegisterType/RegisterChurch/RegisterInfo) + SNS 콜백 랜딩 전용 스타일
   (data-page="join"). login.css(--teal-2/--ink/--page/--card/--line, main.css :root)와 동일한
   디자인 토큰을 재사용해 로그인 화면과 톤을 맞춘다. 720px 캔버스 기준 스케일. */

.jn-wrap {
	--jn-input-bg: #F1F5F9;
	--jn-muted: #64748B;
	--jn-placeholder: #94A3B8;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page);
}

/* 헤더 — 공용 .ui-header/.ui-header-back/.center-mr(common.css) 재사용.
   back.svg 등 back 계열 아이콘은 stroke 기본값이 white(테두리 있는 어두운 헤더 전용)라
   .jn-wrap처럼 흰 배경 위에서는 .ui-header-back.inv(filter:brightness(0))로 검게 반전해야
   보인다 — MyPageTermsAgree.jsx 등 기존 화면과 동일한 관례. */

/* 본문 */
.jn-body { flex: 1 1 auto; padding: 32px 40px 56px; }
.jn-h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.32; }
.jn-sub { margin-top: 14px; font-size: 22px; color: var(--jn-muted); }

/* 체크박스 (login.css .lg-save 패턴 재사용) */
.jn-check {
	flex: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: 10px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.jn-check img { display: block; width: 24px; height: 24px; opacity: 0; }
input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
input[type="checkbox"]:checked + .jn-check { background: var(--teal-2); border-color: var(--teal-2); }
input[type="checkbox"]:checked + .jn-check img { opacity: 1; }
input[type="checkbox"]:focus-visible + .jn-check { outline: 3px solid var(--teal-3); outline-offset: 2px; }

/* 약관 동의 목록 */
.jn-agree-list { margin-top: 44px; display: flex; flex-direction: column; gap: 4px; }
.jn-agree-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 4px;
	border-bottom: 1.6px solid var(--line);
}
.jn-agree-all { border-bottom: 2px solid var(--ink); font-weight: 700; }
.jn-agree-item-label { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; cursor: pointer; position: relative; }
.jn-agree-text { font-size: 24px; color: var(--ink); }
.jn-agree-view {
	flex: none;
	padding: 8px 18px;
	font-size: 19px;
	color: var(--jn-muted);
	background: var(--jn-input-bg);
	border: none;
	border-radius: 20px;
	cursor: pointer;
}
.jn-agree-view:disabled { opacity: 0.5; cursor: default; }

/* 출석교회가 없어요 (RegisterChurch) */
.jn-nochurch {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	font-size: 23px;
	color: var(--ink);
	cursor: pointer;
	position: relative;
}

/* 회원 유형 카드 (RegisterType) */
.jn-type-cards { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.jn-type-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 30px;
	background: var(--jn-input-bg);
	border: 2px solid transparent;
	border-radius: 20px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.jn-type-card:hover { border-color: var(--teal-3); background: var(--card); }
.jn-type-card.soon { opacity: 0.72; }
.jn-type-icon {
	flex: none;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border-radius: 16px;
}
.jn-type-icon img { width: 34px; height: 34px; }
.jn-type-text { display: flex; flex-direction: column; gap: 6px; }
.jn-type-title { font-size: 25px; font-weight: 700; color: var(--ink); }
.jn-type-desc { font-size: 19px; color: var(--jn-muted); }
.jn-type-badge {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 4px 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--jn-muted);
	background: var(--card);
	border-radius: 20px;
}

/* 교회 검색 (RegisterChurch) — 시/도·시/군/구 필터 */
.jn-location-select { display: flex; gap: 14px; margin-top: 28px; }
.jn-select {
	flex: 1 1 0;
	padding: 20px 18px;
	font-size: 21px;
	color: var(--ink);
	background: var(--jn-input-bg);
	border: 1.8px solid transparent;
	outline: none;
	box-shadow: none;
	border-radius: 16px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("/asset/images/common/chevron.svg");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 20px;
}
.jn-select:disabled { opacity: 0.55; }
.jn-select:focus { outline: none; box-shadow: none; border-color: var(--teal-2); background-color: var(--card); }
.jn-select::-ms-expand { display: none; }
/* 단독 배치용(교회 등록의 교단/역할/목회자분류 등) — .jn-location-select의 flex:1 1 0 대신 전체 폭 */
.jn-select-block { flex: none; width: 100%; padding: 24px; font-size: 23px; }

.jn-search-box {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 20px 26px;
	background: var(--jn-input-bg);
	border: 1.8px solid transparent;
	border-radius: 18px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.jn-search-box:focus-within { border-color: var(--teal-2); background: var(--card); }
.jn-search-box img { width: 26px; height: 26px; opacity: 0.5; flex: none; }
.jn-search-input { flex: 1 1 auto; background: none; border: none; outline: none; box-shadow: none; font-size: 23px; color: var(--ink); }
.jn-search-input::placeholder { color: var(--jn-placeholder); }
.jn-search-btn {
	flex: none;
	padding: 12px 22px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	background: var(--teal-2);
	border: none;
	border-radius: 12px;
	cursor: pointer;
}
.jn-church-list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.jn-list-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
}
.jn-list-title img { width: 18px; height: 18px; }
.jn-church-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 24px 56px 24px 26px;
	background: var(--jn-input-bg);
	border: 2px solid transparent;
	border-radius: 16px;
	text-align: left;
	cursor: pointer;
}
.jn-church-item.on { border-color: var(--teal-2); background: var(--card); }
.jn-church-name { font-size: 23px; font-weight: 700; color: var(--ink); }
.jn-church-addr { font-size: 18px; color: var(--jn-muted); }
.jn-church-distance { color: var(--teal-2); }
.jn-church-check { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; }
.jn-empty { padding: 40px 0; text-align: center; font-size: 20px; color: var(--jn-placeholder); }
.jn-result-count { margin-bottom: 4px; font-size: 18px; color: var(--jn-muted); }
.jn-result-count b { color: var(--teal-2); font-weight: 700; }

/* 페이지네이션 (교회 등록 검색 결과 — NoticeList.jsx의 .nt-page/.pg와 동일 패턴) */
.jn-page { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.jn-page .pg {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: none;
	border-radius: 10px;
	background: none;
	font-size: 19px;
	font-weight: 500;
	color: var(--jn-muted);
	cursor: pointer;
}
.jn-page .pg.on { background: var(--teal-2); color: #fff; font-weight: 700; }
.jn-page .dots { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 44px; color: var(--jn-placeholder); font-size: 19px; }

/* 정보 입력 폼 (RegisterInfo) */
.jn-info-box {
	margin-top: 8px;
	margin-bottom: 28px;
	padding: 20px 24px;
	background: var(--jn-input-bg);
	border-radius: 14px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--jn-muted);
}
.jn-form { display: flex; flex-direction: column; gap: 26px; }
.jn-field { display: flex; flex-direction: column; gap: 12px; }
.jn-field label { font-size: 21px; font-weight: 600; color: var(--ink); }
.jn-req { color: #EF4444; }
.jn-input {
	width: 100%;
	padding: 24px;
	font-size: 23px;
	color: var(--ink);
	background: var(--jn-input-bg);
	border: 1.8px solid transparent;
	border-radius: 16px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.jn-input::placeholder { color: var(--jn-placeholder); }
.jn-input:focus { outline: none; border-color: var(--teal-2); background: var(--card); }
.jn-input:disabled { color: var(--jn-muted); }
.jn-textarea {
	width: 100%;
	padding: 24px;
	font-size: 21px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--jn-input-bg);
	border: 1.8px solid transparent;
	border-radius: 16px;
	resize: vertical;
	font-family: inherit;
}
.jn-textarea::placeholder { color: var(--jn-placeholder); }
.jn-textarea:focus { outline: none; border-color: var(--teal-2); background: var(--card); }

/* 교회 등록 — 섹션 구분 라벨 (교회 정보 / 관리자 정보) */
.jn-section-title { margin-top: 8px; font-size: 19px; font-weight: 700; color: var(--teal-2); }

/* 교회 등록 — 주소 검색 */
.jn-addr-row { display: flex; gap: 12px; }
.jn-addr-row .jn-input { flex: 1 1 auto; cursor: pointer; }
.jn-addr-btn {
	flex: none;
	padding: 0 24px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	background: var(--teal-2);
	border: none;
	border-radius: 16px;
	cursor: pointer;
}

/* 교회 등록 — 전화번호(지역번호 select + 4자리 x2), 휴대폰 4자리 x2 구간 입력 공용 */
.jn-tel-group { display: flex; align-items: center; gap: 8px; }
.jn-tel-select { flex: none; width: 92px; padding: 24px 30px 24px 16px; background-position: right 10px center; }
.jn-tel-input { flex: 1 1 0; min-width: 0; text-align: center; }
.jn-tel-sep { flex: none; color: var(--jn-muted); font-size: 20px; }
.jn-phone-group .jn-tel-sep { margin: 0 -2px; }

/* 교회 등록 — 증빙 서류 첨부 */
.jn-file-list { display: flex; flex-direction: column; gap: 10px; }
.jn-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	background: var(--jn-input-bg);
	border-radius: 14px;
}
.jn-file-name { font-size: 19px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-file-remove { flex: none; padding: 0; background: none; border: none; cursor: pointer; }
.jn-file-remove img { width: 22px; height: 22px; filter: brightness(0); opacity: 0.55; }
.jn-file-add {
	display: block;
	padding: 16px 18px;
	font-size: 19px;
	font-weight: 600;
	color: var(--teal-2);
	background: var(--card);
	border: 1.8px dashed var(--teal-3);
	border-radius: 14px;
	text-align: center;
	cursor: pointer;
}

/* 비밀번호 표시 토글 (login.css .lg-inwrap/.lg-eye 패턴 재사용) */
.jn-inwrap { position: relative; }
.jn-inwrap .jn-input { padding-right: 68px; }
.jn-eye {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
/* eye-w.svg는 stroke 기본값이 white라(back.svg와 동일한 함정) 흰 입력창 위에서 filter로 검게
   반전시켜야 보인다 — eye.svg(currentColor, 이미 검정)도 함께 걸어도 무해하므로 공통 적용. */
.jn-eye img { width: 30px; height: 30px; opacity: 0.55; filter: brightness(0); }
.jn-help { font-size: 17px; color: var(--jn-placeholder); }

/* 휴대폰 010 고정 접두어 — 다른 통신사 번호는 처리하지 않아 select box 대신 고정 표시로 대체 */
.jn-phone-group { display: flex; align-items: center; gap: 12px; }
.jn-phone-prefix {
	flex: none;
	padding: 24px 20px;
	font-size: 23px;
	font-weight: 700;
	color: var(--ink);
	background: var(--jn-input-bg);
	border-radius: 16px;
}
.jn-phone-group .jn-input { flex: 1 1 auto; }
.jn-genders { display: flex; gap: 12px; }
.jn-gender-btn {
	flex: 1 1 0;
	padding: 18px;
	font-size: 20px;
	font-weight: 600;
	color: var(--jn-muted);
	background: var(--jn-input-bg);
	border: 1.8px solid transparent;
	border-radius: 14px;
	cursor: pointer;
}
.jn-gender-btn.on { color: #fff; background: var(--teal-2); border-color: var(--teal-2); }

/* 하단 제출 버튼 */
.jn-footer { margin-top: 44px; }
.jn-submit {
	width: 100%;
	padding: 28px;
	font-size: 25px;
	font-weight: 700;
	color: #fff;
	background: var(--line);
	border: none;
	border-radius: 18px;
	cursor: not-allowed;
	transition: background 0.15s ease;
}
.jn-submit.on, .jn-submit:not(:disabled) { background: var(--teal-2); cursor: pointer; }
.jn-submit.on:hover, .jn-submit:not(:disabled):hover { background: var(--teal); }

/* 버튼 2개를 세로로 쌓는 하단(교회 검색 — 관리자 신청 / 신규 등록) */
.jn-footer-stack { display: flex; flex-direction: column; gap: 14px; }
.jn-submit-outline {
	width: 100%;
	padding: 26px;
	font-size: 23px;
	font-weight: 700;
	color: var(--teal-2);
	background: none;
	border: 1.8px solid var(--teal-2);
	border-radius: 18px;
	cursor: pointer;
}
.jn-submit-outline:hover { background: var(--jn-input-bg); }

/* 약관 상세 모달 */
.jn-modal-ov {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: rgba(15, 23, 42, 0.55);
	z-index: 1200;
}
.jn-modal-box {
	width: 100%;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border-radius: 28px 28px 0 0;
	overflow: hidden;
}
.jn-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 32px;
	border-bottom: 1.6px solid var(--line);
}
.jn-modal-head h3 { font-size: 24px; font-weight: 700; color: var(--ink); }
.jn-modal-close { padding: 0; background: none; border: none; cursor: pointer; }
.jn-modal-close img { width: 30px; height: 30px; }
.jn-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 30px 32px; font-size: 19px; line-height: 1.7; color: var(--ink); }
.jn-modal-foot { padding: 24px 32px 36px; }

/* SNS 콜백 대기 화면 */
.jn-wait { align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 40px; }
.jn-wait h3 { font-size: 26px; font-weight: 700; color: var(--ink); }
.jn-wait p { font-size: 20px; color: var(--jn-muted); }
.jn-spinner {
	width: 56px;
	height: 56px;
	border: 5px solid var(--line);
	border-top-color: var(--teal-2);
	border-radius: 50%;
	animation: jn-spin 0.8s linear infinite;
}
@keyframes jn-spin { to { transform: rotate(360deg); } }

/* 다크모드 보정 */
.dark-mode .jn-wrap { --jn-input-bg: rgba(255, 255, 255, 0.06); --jn-muted: #94A3B8; }