/**
 * 리뉴얼 로그인 (/login — views/login/cm_login.php) — 2026-10-20 사용자 지시 '리뉴얼에 맞게, 요즘 방식으로'
 *
 * 배치(넓은 화면): 왼쪽 로그인 판(로고 없음) · 오른쪽 브랜드 카드(창 안쪽으로 16px 띄운 24px 둥근 주황 판 — 소개 · 기능 칩 · 화면 미리보기 카드).
 *   1023px 이하는 브랜드 카드를 빼고 로그인만 한 단. 데이터 이관 임베드(?modal=1, .rn-login--embed)도 로그인만.
 * 색 · 글꼴 · 입력칸 · 버튼 · 체크는 리뉴얼 공통(variables · forms · buttons · modal.css) 그대로 — 여기서는 자리와 크기만.
 *   로그인은 화면의 주인공이라 입력칸 · 버튼을 한 단계 큰 48px · 15~16px · 8px 라운드로 쓴다(모양은 공통 입력칸 · 주 버튼과 같다).
 * 레이아웃(sidebar.css)을 싣지 않는 단독 화면이라 body 기본값도 여기서 준다.
 */

body.rn-login {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	font-family: var(--rn-font-family);
	font-size: var(--rn-font-size-sm);
	line-height: var(--rn-line-height-base);
	-webkit-font-smoothing: antialiased;
}

.rn-login *,
.rn-login *::before,
.rn-login *::after {
	box-sizing: border-box;
}

.rn-login__shell {
	display: grid;
	grid-template-columns: minmax(30rem, 1fr) minmax(0, 1.15fr);
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- 왼쪽 — 로그인 ---------- */
.rn-login__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 2rem 3rem;
}

.rn-login__panel {
	width: min(100%, 23.75rem); /* 380 */
	margin: auto; /* 남은 높이 가운데 */
	padding: 2.5rem 0;
}

.rn-login__title {
	margin: 0;
	color: var(--rn-color-text-title);
	font-size: 1.75rem; /* 28 */
	font-weight: var(--rn-font-weight-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.rn-login__lead {
	margin: var(--rn-space-2) 0 var(--rn-space-8, 2rem);
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-sm);
}

/* 서버 안내(검증 오류 · 메시지) */
.rn-login__alert {
	margin: 0 0 var(--rn-space-4);
	padding: 0.625rem 0.875rem;
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand-hover);
	font-size: var(--rn-font-size-xs);
}

.rn-login__alert--warn {
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
}

.rn-login__alert p {
	margin: 0;
}

.rn-login__field {
	margin-bottom: var(--rn-space-4);
}

.rn-login__label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--rn-color-text);
	font-size: var(--rn-font-size-xs);
	font-weight: var(--rn-font-weight-semibold);
}

.rn-login .rn-login__input {
	min-height: 3rem; /* 48 */
	padding: 0 0.875rem;
	border-radius: var(--rn-radius-lg);
	font-size: 0.9375rem; /* 15 */
}

/* 비밀번호 보기 — 칸 오른쪽 안 */
.rn-login__pw {
	position: relative;
}

.rn-login__pw .rn-login__input {
	padding-right: 3rem;
}

.rn-login__pw-toggle {
	position: absolute;
	top: 50%;
	right: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--rn-radius-md);
	background: transparent;
	color: var(--rn-color-text-subtle);
	cursor: pointer;
	transform: translateY(-50%);
}

.rn-login__pw-toggle:hover {
	color: var(--rn-color-text-muted);
}

.rn-login__pw-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.rn-login__pw-toggle .rn-login__eye-off,
.rn-login__pw-toggle[aria-pressed="true"] .rn-login__eye {
	display: none;
}

.rn-login__pw-toggle[aria-pressed="true"] .rn-login__eye-off {
	display: block;
}

.rn-login__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-space-2) var(--rn-space-5);
	margin: var(--rn-space-1) 0 var(--rn-space-6);
	font-size: var(--rn-font-size-xs);
}

.rn-login .rn-login__submit,
.rn-login .rn-login__preview {
	width: 100%;
	min-height: 3rem;
	border-radius: var(--rn-radius-lg);
	font-size: 1rem;
	font-weight: var(--rn-font-weight-semibold);
}

/* 또는 — 양옆 선 */
.rn-login__or {
	display: flex;
	align-items: center;
	gap: var(--rn-space-3);
	margin: var(--rn-space-5) 0;
	color: var(--rn-color-text-subtle);
	font-size: var(--rn-font-size-xs);
}

.rn-login__or::before,
.rn-login__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--rn-color-border);
}

.rn-login__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-space-3);
	margin: var(--rn-space-6) 0 0;
	font-size: var(--rn-font-size-xs);
}

.rn-login__links a {
	color: var(--rn-color-text-muted);
	text-decoration: none;
}

.rn-login__links a:hover {
	color: var(--rn-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rn-login__links-sep {
	width: 1px;
	height: 0.75rem;
	background: var(--rn-color-border);
}

/* ---------- 오른쪽 — 브랜드 카드 ---------- */
.rn-login__brand {
	min-width: 0;
	padding: 1rem 1rem 1rem 0;
}

/* 내용은 가운데 정렬 · 배경은 어두운 그라데이션 + 선으로 된 물결(2026-10-20 사용자 지시 — 참고 이미지처럼).
 * 겹: ① .rn-login__wave — 홈페이지 리뉴얼 시안 첫 화면과 같은 선 물결(login_wave.js 캔버스 — 왼쪽 보라 → 오른쪽 주황 가는 선 두 묶음이 비틀리며 흐른다,
 *        시안보다 연하게 · 제목 둘레는 선을 지운다 + 작은 별). 2026-10-20 사용자 지시 '홈페이지 선이랑 똑같이, 좀 더 연하게'
 *     ② 오른쪽 아래 주황 빛 · 왼쪽 보라 빛(radial) — 선 색과 같은 결로 은은하게
 *     ③ 바탕 — 거의 검은 남보라에서 아래쪽 따뜻한 검정으로
 *     ④ ::before — PC 미리보기 뒤 주황 빛(blur). 팝업의 주황 외부광과 이어진다
 * 종전: 주황 → 호박색 그라데이션 + 흰 빛 줄기(같은 날 '너무 쨍하다' 뒤 어두운 배경으로 바꿨다) */
.rn-login__brand-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* 글 + 화면 미리보기를 한 묶음으로 세로 가운데 — 글이 위에 붙지 않고 내려온다(사용자 지시) */
	height: 100%;
	min-height: 0;
	padding: 3rem 3.5rem;
	overflow: hidden;
	border-radius: 1.5rem; /* 24 */
	background:
		radial-gradient(60% 45% at 100% 100%, rgba(255, 90, 20, 0.32) 0%, rgba(255, 90, 20, 0) 70%),
		radial-gradient(55% 45% at 0% 35%, rgba(110, 90, 230, 0.16) 0%, rgba(110, 90, 230, 0) 70%),
		linear-gradient(165deg, #17151d 0%, #0e0d12 50%, #150e0b 100%);
	color: #fff;
	text-align: center;
}

.rn-login__brand-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 48%;
	left: 50%;
	width: 70%;
	height: 42%;
	border-radius: 50%;
	background: rgba(255, 90, 20, 0.16); /* '외부광 너무 진하다' 와 함께 옅게(종전 0.28) */
	filter: blur(70px);
	transform: translate(-50%, -20%);
	pointer-events: none;
}

/* 흐르는 물결 — login_wave.js 가 카드 맨 앞에 넣는 캔버스(홈페이지 시안과 같은 선 물결 · 작은 별). 글 · 미리보기 뒤에 깔린다 */
.rn-login__wave {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.rn-login__eyebrow {
	position: relative;
	margin: 0 0 var(--rn-space-3);
	color: #fff; /* 2026-10-20 사용자 지시 '흰색으로'(종전 옅은 주황 #FF9A62) */
	font-size: 1.0625rem; /* 17 — 2026-10-20 '글자 조금 더 크게' (종전 15) */
	font-weight: var(--rn-font-weight-medium);
}

.rn-login__headline {
	position: relative;
	margin: 0 0 var(--rn-space-6);
	font-size: 2.875rem; /* 46 (종전 40) */
	font-weight: var(--rn-font-weight-bold);
	line-height: 1.25;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

/* ---------- 화면 미리보기 — PC 화면 + 그 위에 떠 있는 팝업 (2026-10-20 사용자 지시 'PC 에서 뜨는 느낌, 밀도 있게') ----------
 * PC 창(창 머리 · 왼쪽 메뉴 · 통계 4칸 · 이달 달력)을 HTML 로 그리고, 오늘 방문 일정(왼쪽 아래) · 서비스 제공 현황(오른쪽) 팝업을 창 밖으로 걸쳐 띄운다.
 * 크기는 묶음 폭을 따라 함께 줄고 는다 — 묶음(.rn-login__mock)이 크기 컨테이너이고, 안쪽은 em(바탕 글자 = 묶음 폭의 2.1%).
 * 색은 화면과 같은 토큰(메뉴 남색 --rn-sidebar-bg · 바탕 --rn-color-bg-page · 주황 --rn-color-brand). 그림 파일이 아니라 선명하다.
 * 종전: 기능 칩 줄 + 떠 있는 카드 세 장(같은 날 칩은 뺐다 — 사용자 지시) */
.rn-login__mock {
	position: relative;
	container-type: inline-size;
	width: min(100%, 36rem);
	margin: 2.5rem auto 3rem; /* 아래 팝업이 창 밖으로 걸친 만큼 */
	color: var(--rn-color-text);
	text-align: left;
}

.rn-login__mock > * {
	font-size: 2.1cqi; /* 576px 묶음에서 12px */
}

/* PC 창 · 팝업 둘레의 주황 외부광(2026-10-20 사용자 지시) — 넓게 번지는 옅은 주황 빛 + 아래 검은 그림자.
 * 같은 날 '외부광 너무 진하다' · '왼쪽에 선처럼 진하게 보인다' — 1px 주황 테와 가장자리에 붙는 가까운 빛을 빼고, 멀리 번지는 빛만 남겼다 */
.rn-login__mock {
	--rn-login-glow:
		0 0 4em rgba(255, 90, 20, 0.14),
		0 1.6em 3.2em rgba(0, 0, 0, 0.4);
}

/* PC 창 */
.rn-login__pc {
	overflow: hidden;
	border-radius: 0.9em;
	background: var(--rn-color-bg);
	box-shadow: var(--rn-login-glow);
}

.rn-login__pc-bar {
	display: flex;
	align-items: center;
	gap: 0.45em;
	height: 2.4em;
	padding: 0 1em;
	border-bottom: 1px solid var(--rn-color-border);
	background: #f6f6f7;
}

.rn-login__pc-bar i {
	width: 0.72em;
	height: 0.72em;
	border-radius: 50%;
	background: #ff5f57;
}

.rn-login__pc-bar i:nth-child(2) {
	background: #febc2e;
}

.rn-login__pc-bar i:nth-child(3) {
	background: #28c840;
}

.rn-login__pc-tab {
	margin-left: 0.9em;
	padding: 0.3em 1em;
	border: 1px solid var(--rn-color-border);
	border-radius: 999px;
	background: var(--rn-color-bg);
	color: var(--rn-color-text-muted);
	font-size: 0.78em;
	white-space: nowrap;
}

.rn-login__pc-body {
	display: grid;
	grid-template-columns: 8.4em minmax(0, 1fr);
	height: 25em;
}

/* 왼쪽 메뉴 — 실제 화면 사이드바처럼 남색 · 고른 메뉴는 옅은 칸 + 주황 아이콘 */
.rn-login__pc-side {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 1em 0.6em;
	background: var(--rn-sidebar-bg);
	color: rgba(255, 255, 255, 0.72);
}

.rn-login__pc-side b {
	margin: 0 0 0.8em 0.45em;
	color: #fff;
	font-size: 0.96em;
	font-weight: var(--rn-font-weight-bold);
}

.rn-login__pc-side span {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.55em 0.5em;
	border-radius: 0.45em;
	font-size: 0.76em;
	white-space: nowrap;
}

.rn-login__pc-side span::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border-radius: 0.3em;
	background: rgba(255, 255, 255, 0.28);
}

.rn-login__pc-side span.is-on {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-weight: var(--rn-font-weight-semibold);
}

/* 고른 메뉴 아이콘은 흰색 — 주황은 뺐다(2026-10-20 사용자 지시) */
.rn-login__pc-side span.is-on::before {
	background: rgba(255, 255, 255, 0.85);
}

/* 본문 — 제목 줄 · 통계 4칸 · 달력 */
.rn-login__pc-main {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	min-width: 0;
	padding: 1em 1.1em 1.1em;
	background: var(--rn-color-bg-page);
}

.rn-login__pc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.rn-login__pc-head strong {
	font-size: 1.12em;
	font-weight: var(--rn-font-weight-bold);
}

.rn-login__pc-head span {
	color: var(--rn-color-text-muted);
	font-size: 0.78em;
}

.rn-login__pc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.55em;
}

.rn-login__pc-stats div {
	padding: 0.6em 0.75em;
	border-radius: 0.6em;
	background: var(--rn-color-bg);
}

.rn-login__pc-stats small {
	display: block;
	color: var(--rn-color-text-muted);
	font-size: 0.72em;
}

.rn-login__pc-stats b {
	display: block;
	margin-top: 0.1em;
	font-size: 1.3em;
	font-weight: var(--rn-font-weight-bold);
	line-height: 1.2;
}

.rn-login__pc-stats b i {
	margin-left: 0.12em;
	color: var(--rn-color-text-muted);
	font-size: 0.5em;
	font-style: normal;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-login__pc-stats .is-ok b {
	color: var(--rn-color-success-text, #008a1e);
}

.rn-login__pc-cal {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 0.6em 0.7em 0.7em;
	border-radius: 0.6em;
	background: var(--rn-color-bg);
}

.rn-login__pc-week,
.rn-login__pc-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rn-login__pc-week span {
	padding-bottom: 0.4em;
	color: var(--rn-color-text-subtle);
	font-size: 0.66em;
	text-align: center;
}

.rn-login__pc-days {
	flex: 1 1 auto;
	grid-auto-rows: minmax(0, 1fr);
	min-height: 0;
	border-top: 1px solid var(--rn-color-border);
}

.rn-login__pc-days span {
	display: flex;
	flex-direction: column;
	gap: 0.16em;
	min-height: 0;
	padding: 0.22em 0.28em;
	overflow: hidden;
	border-right: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}

.rn-login__pc-days span:nth-child(7n) {
	border-right: 0;
}

.rn-login__pc-days em {
	align-self: flex-start;
	color: var(--rn-color-text-muted);
	font-size: 0.62em;
	font-style: normal;
	line-height: 1.5;
}

.rn-login__pc-days .is-today em {
	padding: 0 0.5em;
	border-radius: 999px;
	background: var(--rn-color-brand);
	color: #fff;
	font-weight: var(--rn-font-weight-bold);
}

/* 일정 칩 — 실제 달력 칩 색(주황 · 파랑 · 초록)을 옅게 */
.rn-login__pc-days i {
	flex: 0 0 auto;
	height: 0.42em;
	border-radius: 0.15em;
}

.rn-login__pc-days i.c1 {
	background: rgba(255, 69, 0, 0.24);
}

.rn-login__pc-days i.c2 {
	background: rgba(37, 99, 235, 0.22);
}

.rn-login__pc-days i.c3 {
	background: rgba(0, 138, 30, 0.22);
}

/* 떠 있는 팝업 — 창 밖으로 걸쳐 앞에 뜬다 */
.rn-login__mock-card {
	position: absolute;
	border-radius: 0.9em;
	background: var(--rn-color-bg);
	box-shadow: var(--rn-login-glow);
}

.rn-login__mock-card--main {
	left: -6%;
	bottom: -12%;
	width: 46%;
	padding: 0.9em 1em 0.45em;
}

.rn-login__mock-card--chart {
	top: 42%; /* 통계 4칸 줄은 가리지 않게 달력 위에 */
	right: -6%;
	width: 31%;
	padding: 0.9em 1em 1em;
}

.rn-login__mock-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	padding-bottom: 0.55em;
	border-bottom: 1px solid var(--rn-color-border);
}

.rn-login__mock-head strong {
	font-size: 0.98em;
	font-weight: var(--rn-font-weight-bold);
}

.rn-login__mock-head span {
	color: var(--rn-color-text-subtle);
	font-size: 0.72em;
	white-space: nowrap;
}

.rn-login__mock-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-login__mock-list li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 0;
	font-size: 0.84em;
}

.rn-login__mock-list li + li {
	border-top: 1px solid #f2f2f2;
}

.rn-login__mock-time {
	flex: 0 0 auto;
	color: var(--rn-color-text-muted);
	font-variant-numeric: tabular-nums;
}

.rn-login__mock-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-weight: var(--rn-font-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rn-login__mock-chip {
	flex: 0 0 auto;
	padding: 0.15em 0.55em;
	border-radius: 0.3em;
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
	font-size: 0.82em;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-login__mock-chip--bath {
	background: var(--rn-color-info-soft);
	color: var(--rn-color-info);
}

.rn-login__mock-label {
	display: block;
	color: var(--rn-color-text-muted);
	font-size: 0.78em;
	font-weight: var(--rn-font-weight-medium);
}

.rn-login__mock-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.35em;
	height: 4.4em;
	margin-top: 0.7em;
}

.rn-login__mock-bars i {
	flex: 1 1 0;
	height: var(--h);
	border-radius: 0.2em 0.2em 0 0;
	background: var(--rn-color-brand-soft);
}

.rn-login__mock-bars i.is-now {
	background: var(--rn-color-brand);
}

/* ---------- 아이디 · 비밀번호 찾기 (/find · /find/id · /find/password — views/find/*.php, body.rn-find) ----------
 * 로그인 판과 같은 칸 · 버튼을 쓰고, 여기서는 찾기에만 있는 것만: 아이디 ↔ 비밀번호 알약 탭 · 고르기 두 줄 · 칸 + 버튼 한 줄 ·
 * 칸 아래 안내 한 줄 · 결과(아이디 / 없음 / 변경 완료) · 버튼 묶음. 2026-10-20 사용자 지시 '아이디 비밀번호 찾기도 디자인 리뉴얼' */
.rn-find [hidden] {
	display: none !important;
}

/* 칸 아래 안내 한 줄 — 오류 빨강 · 안내(전송 · 인증됨) 초록. 비어 있으면 자리를 차지하지 않는다 */
.rn-login__hint {
	margin: 0.375rem 0 0;
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	line-height: 1.45;
}

.rn-login__hint:empty {
	display: none;
}

.rn-login__hint.is-error {
	color: var(--rn-color-danger-text);
}

.rn-login__hint.is-ok {
	color: var(--rn-color-success-text, #008a1e);
}

/* 아이디 ↔ 비밀번호 — 공통 알약 탭(segment.css) 을 판 폭으로 펴고 두 칸을 반씩(모양은 그대로, 자리만) */
.rn-find__tabs.rn-home-tabs--pill {
	width: 100%;
	margin: var(--rn-space-5) 0 var(--rn-space-6);
}

.rn-find__tabs .rn-home-tabs__item {
	flex: 1 1 0;
	justify-content: center;
	min-height: 2.25rem; /* 36 — 판의 48px 칸 · 버튼과 어울리게 한 단계 */
	font-size: var(--rn-font-size-sm);
}

/* 단계 안내 — 판 제목 아래 lead 보다 아래 간격만 좁게 */
.rn-find__step .rn-login__lead {
	margin: 0 0 var(--rn-space-5);
}

/* 고르기 두 줄(/find) — 아이콘 · 이름과 한 줄 설명 · 오른쪽 화살표. 누르면 그 찾기 화면 */
.rn-find__choices {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-3);
}

.rn-find__choice {
	display: flex;
	align-items: center;
	gap: var(--rn-space-4);
	padding: 1.125rem 1rem 1.125rem 1.125rem;
	border: 1px solid var(--rn-color-border);
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-bg);
	color: var(--rn-color-text);
	text-decoration: none;
	transition: border-color var(--rn-transition-fast), background var(--rn-transition-fast);
}

.rn-find__choice:hover,
.rn-find__choice:focus-visible {
	border-color: var(--rn-color-brand);
	background: var(--rn-color-brand-soft);
}

.rn-find__choice-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--rn-radius-lg);
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-find__choice:hover .rn-find__choice-icon {
	background: var(--rn-color-bg);
}

/* 아이콘은 사람 · 자물쇠 선 하나씩만(2026-10-20 '아이콘 뭉쳐 보인다 — 심플하게', 종전 신분증 · 열쇠 구멍 자물쇠) */
.rn-find__choice-icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.rn-find__choice-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.rn-find__choice-text strong {
	font-size: 1rem;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-find__choice-text small {
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	word-break: keep-all;
}

.rn-find__choice-arrow {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--rn-color-text-subtle);
}

/* 칸 + 버튼 한 줄(휴대폰 번호 · 인증번호) */
.rn-find__inline {
	display: flex;
	gap: var(--rn-space-2);
}

.rn-find__inline .rn-login__input {
	flex: 1 1 auto;
	min-width: 0;
}

.rn-login .rn-find__inline-btn {
	flex: 0 0 auto;
	min-width: 7.5rem;
	min-height: 3rem;
	border-radius: var(--rn-radius-lg);
	font-size: var(--rn-font-size-sm);
	white-space: nowrap;
}

/* 버튼 위 안내(서버 응답 · 일치 정보 없음) — 로그인 판 알림과 같은 모양, 자리만 버튼 바로 위 */
.rn-find .rn-login__alert {
	margin: var(--rn-space-1) 0 var(--rn-space-4);
}

/* 결과 — 아이콘 · 한 줄 · 큰 아이디(또는 설명). 판 바탕보다 한 단계 옅은 회색 면 */
.rn-find__result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rn-space-2);
	margin: var(--rn-space-2) 0 var(--rn-space-6);
	padding: 2rem 1.25rem;
	border-radius: var(--rn-radius-lg);
	background: var(--rn-gray-5); /* #F8F8F8 */
	text-align: center;
}

.rn-find__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--rn-space-1);
	border-radius: 50%;
	background: var(--rn-color-danger-soft);
	color: var(--rn-color-danger-text);
}

.rn-find__result-icon.is-ok {
	background: var(--rn-color-brand-soft);
	color: var(--rn-color-brand);
}

.rn-find__result-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.rn-find__result-text {
	margin: 0;
	color: var(--rn-color-text);
	font-size: 1rem;
	font-weight: var(--rn-font-weight-semibold);
}

.rn-find__result-sub {
	margin: 0;
	color: var(--rn-color-text-muted);
	font-size: var(--rn-font-size-xs);
	word-break: keep-all;
}

.rn-find__result-value {
	margin-top: var(--rn-space-1);
	color: var(--rn-color-brand);
	font-size: 1.5rem;
	font-weight: var(--rn-font-weight-bold);
	letter-spacing: 0.01em;
	word-break: break-all;
}

/* 버튼 묶음 — 위아래로 쌓고 사이 8px */
.rn-find__actions {
	display: flex;
	flex-direction: column;
	gap: var(--rn-space-2);
}

.rn-login a.rn-login__submit {
	text-decoration: none;
}

/* ---------- 공지 배너 팝업 — 리뉴얼 홈(home.css .rn-notice-banner)과 같다 ---------- */
.rn-notice-banner .modal_body {
	width: min(37.5rem, calc(100vw - 2rem));
	height: auto;
	max-height: min(90dvh, 40rem);
}

.rn-notice-banner .modal-section {
	padding: 0;
}

.rn-notice-banner .modal-section a,
.rn-notice-banner .modal-section img {
	display: block;
	width: 100%;
	height: auto;
}

.rn-notice-banner .rn-notice-banner__hide {
	margin-right: auto;
}

/* ---------- 큰 화면(1920 등) — PC 미리보기를 조금 더 크게(안쪽 크기는 묶음 폭을 따라 함께 는다) ---------- */
@media (min-width: 1600px) and (min-height: 860px) {
	.rn-login__mock {
		width: min(100%, 42rem);
	}
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1279px) {
	.rn-login__brand-card {
		padding: 3rem 2.5rem;
	}

	.rn-login__headline {
		font-size: 2.375rem; /* 38 (종전 34) */
	}
}

/* 1023 이하 — 로그인만 한 단 */
@media (max-width: 1023px) {
	.rn-login__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.rn-login__brand {
		display: none;
	}

	.rn-login__main {
		padding: 1.5rem 2rem;
	}

	.rn-login__panel {
		padding: 1.5rem 0;
	}
}

/* 키 낮은 창(1366×768 노트북은 브라우저 안 높이가 650px 안팎) — 간격만 줄여 스크롤 없이 한 화면에 */
@media (min-width: 768px) and (max-height: 760px) {
	.rn-login__main {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.rn-login__panel {
		padding: 0.75rem 0;
	}

	.rn-login__title {
		font-size: 1.5rem;
	}

	.rn-login__lead {
		margin-bottom: var(--rn-space-5);
	}

	.rn-login__field {
		margin-bottom: var(--rn-space-3);
	}

	.rn-login__options {
		margin-bottom: var(--rn-space-4);
	}

	.rn-login__or {
		margin: var(--rn-space-3) 0;
	}

	.rn-login__links {
		margin-top: var(--rn-space-4);
	}

	.rn-login__brand-card {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	/* 카드가 낮으면 PC 미리보기를 조금 작게(안쪽 크기는 묶음 폭을 따라 함께 준다) */
	.rn-login__mock {
		width: min(100%, 29rem);
		margin: 1.5rem auto 2.25rem;
	}
}

/* 폰 — 위에서부터(가운데로 띄우면 키보드가 올라올 때 칸이 가려진다) */
@media (max-width: 767px) {
	.rn-login__main {
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.rn-login__panel {
		margin: 0 auto;
		padding: 2.5rem 0 0;
	}

	.rn-login__title {
		font-size: 1.5rem; /* 24 */
	}

	.rn-login__lead {
		margin-bottom: var(--rn-space-6);
	}
}

/* 데이터 이관 화면 임베드(?modal=1 — 460px 팝업 안 iframe): 위에서부터 */
.rn-login--embed .rn-login__shell {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.rn-login--embed .rn-login__main {
	padding: 1.5rem;
}

.rn-login--embed .rn-login__panel {
	width: 100%;
	margin: 0;
	padding: 0;
}