/*
 * 로그인 계열 화면 — theme.css 위에 얹는다.
 *
 * 색과 그림자는 전부 theme.css 의 토큰(--color-*, --shadow-*, --hero-glow-*)만
 * 쓴다. 값을 여기에 직접 적어 두면 테마를 손볼 때 이 파일만 옛 색으로 남아,
 * 라이트에서만 맞고 다크에서 깨지는 자리가 생긴다.
 *
 * 둥글기만 예외로 아래 --auth-r-* 를 따로 둔다 (이유는 그 자리 주석 참고).
 *
 * 클래스 이름은 예전(wp-login 계열) 것을 그대로 둔다. index.php · register.php ·
 * profile.php 가 이미 그 이름으로 마크업을 뱉고 있어서, 이름을 바꾸면 화면마다
 * 손봐야 하고 한 군데만 빠뜨려도 그 화면만 무늬 없이 나온다.
 *
 * 폭·로고는 config.php 값에 따라 달라지므로 view_auth_head() 가 인라인으로
 * 넘겨 준다: --auth-width / --auth-logo / --auth-logo-w / --auth-logo-h
 */

/* 경고·성공색. theme.css 의 팔레트에는 없어서 여기서 정한다.
   다크에서는 같은 빨강·초록이 배경에 묻히므로 한 단계 밝은 값을 쓴다. */
html[data-theme="kilho"] {
	--auth-danger: #d63638;
	--auth-ok: #00a32a;
}

html[data-theme="kilho-dark"] {
	--auth-danger: #ff7b7d;
	--auth-ok: #4ade80;
}

/*
 * 모서리 둥글기.
 *
 * theme.css 의 --radius-md(1rem)는 넓은 소개 화면의 카드용이라 여기서는 너무
 * 굴곡이 진다. 로그인 화면은 작은 상자 안에 입력칸·단추가 촘촘히 겹쳐 있어서,
 * 같은 값을 쓰면 둥근 것이 여러 겹으로 보인다. 그래서 한 단계씩 낮춰 쓴다.
 *
 * 새 값을 그때그때 적지 말고 이 셋 중에서 고를 것 — 하나만 다르게 두면
 * 그 요소만 튀어 보인다.
 */
:root {
	--auth-r-box: 0.65rem; /* 상자 — 폼·카드·본문 알림 */
	--auth-r-ctl: 0.4rem;  /* 조작하는 것 — 입력칸·단추·탭 바깥 */
	--auth-r-sm: 0.25rem;  /* 작은 것 — 체크박스·탭 하나·작은 단추 */
}

body.login {
	min-height: 100vh;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-body);
}

.login .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 화면 틀 ─────────────────────────────────────────────── */

/*
 * 세로 가운데 정렬은 쓰지 않는다.
 *
 * 가운데로 맞추면 화면마다 내용 높이가 달라서 로고와 상자가 위아래로 튄다.
 * 로그인 → 실패 알림 → 비밀번호 찾기로 옮겨 다니는 동안 같은 자리에 있어야 할
 * 로고가 계속 움직이는 것이 그 때문이다. 위에서 같은 만큼 띄우면 어느 화면을
 * 열어도 로고가 늘 같은 높이에 있다.
 */
.auth-shell {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100vh;
	padding: clamp(2.5rem, 8vh, 5.5rem) 1rem 3rem;
}

/*
 * 카드 뒤에서 천천히 도는 빛 — theme.css 의 hero 와 같은 색, 같은 움직임
 * (hero-drift-a 도 theme.css 것을 그대로 쓴다). 카드 뒤라 진하면 글씨를
 * 읽기 어려워지므로 opacity 로 눌러 둔다.
 */
.auth-shell::before {
	content: "";
	position: absolute;
	inset: -35%;
	z-index: -1;
	background-image:
		radial-gradient(circle closest-side at 30% 32%, var(--hero-glow-a), transparent),
		radial-gradient(circle closest-side at 74% 30%, var(--hero-glow-b), transparent),
		radial-gradient(circle closest-side at 52% 76%, var(--hero-glow-c), transparent);
	background-size: 54% 62%, 46% 56%, 58% 60%;
	background-repeat: no-repeat;
	opacity: 0.22;
	animation: hero-drift-a 24s linear infinite;
	will-change: transform;
}

html[data-theme="kilho-dark"] .auth-shell::before {
	opacity: 0.4;
}

/* theme.css 는 이 단추를 알약 모양(999px)으로 둔다. 이 화면의 다른 것들과
   같은 결이 되도록 여기서만 낮춘다. */
.auth-theme-toggle {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	height: 2.4rem;
	padding: 0 0.75rem;
	border-radius: var(--auth-r-ctl);
}

#login {
	width: 100%;
	max-width: var(--auth-width, 400px);
}

/*
 * 여백은 각 요소가 아래쪽으로만 가진다. 위아래 양쪽에 주면 화면마다 붙는
 * 요소가 달라(알림이 있을 때/없을 때) 간격이 들쭉날쭉해진다.
 *
 * 여기에 #login 을 붙이지 말 것. 아이디가 하나 끼면 아래의 .forgetmenot ·
 * #nav 처럼 여백을 따로 정한 규칙보다 이 초기화가 세져서, 그 규칙들이
 * 전부 무시되고 요소가 서로 달라붙는다.
 */
.login p,
.login h1,
.login h2,
.login dd {
	margin: 0;
	padding: 0;
}

.login ul {
	margin: 0.5rem 0 0;
	padding-left: 1.15rem;
}

.login li {
	margin-bottom: 0.35rem;
}

/*
 * 로고 — 상자 위에 가운데로 놓는다.
 *
 * 아래 여백은 로고 높이(기본 60px)에 견줘 잡는다. 바짝 붙이면 로고가 뒤따르는
 * 탭·상자에 얹힌 것처럼 보여, 화면의 머리가 어디까지인지 흐려진다.
 */
.login .auth-logo {
	display: block;
	width: var(--auth-logo-w, 210px);
	height: var(--auth-logo-h, 60px);
	max-width: 100%;
	margin: 0 auto 1.85rem;
	background-image: var(--auth-logo);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	text-indent: -9999px;
	transition: transform 0.16s ease;
}

.login .auth-logo:hover {
	transform: translateY(-2px);
}


/* ── 흰 상자 ─────────────────────────────────────────────── */

/*
 * #login 의 바로 아래 자식만 상자로 만든다. profile.php 의 SNS 연결 목록은
 * 줄마다 <form>(해제 버튼)을 품고 있어서, 자손까지 잡으면 그 작은 폼들이
 * 전부 카드가 되어 버린다.
 */
.login #login > form,
.login #login > .card {
	height: auto;
	margin: 0 0 1.25rem;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--auth-r-box);
	background: color-mix(in srgb, var(--color-base-100) 94%, transparent);
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(10px);
}

/* theme.css 의 .card 는 마우스를 올리면 살짝 떠오른다. 그건 목록에 여러 장이
   늘어선 카드용이고, 화면에 하나뿐인 이 상자가 들썩이면 산만하기만 하다. */
.login #login > .card:hover {
	transform: none;
	border-color: var(--color-base-300);
	box-shadow: var(--shadow-card);
}

/* ── 입력칸 ─────────────────────────────────────────────── */

.login label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--color-base-content);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

/*
 * 글자 크기 16px 밑으로는 내리지 말 것 — iOS 사파리가 15px 이하 입력칸에
 * 포커스가 가면 화면을 확대해 버려서, 입력 도중 레이아웃이 튄다.
 */
.login .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input[type="tel"],
.login input[type="url"],
.login textarea,
.login select {
	width: 100%;
	min-height: 2.9rem;
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--color-input-line);
	border-radius: var(--auth-r-ctl);
	background: var(--color-base-100);
	color: var(--color-input);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.login textarea {
	min-height: 5.5rem;
	line-height: 1.6;
	resize: vertical;
}

.login .input:focus,
.login input:focus,
.login textarea:focus,
.login select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
	outline: 2px solid transparent;
}

.login input::placeholder,
.login textarea::placeholder {
	color: color-mix(in srgb, var(--color-body) 70%, transparent);
}

.login input[type="file"] {
	max-width: 100%;
	font-size: 0.85rem;
}

.login .required {
	color: var(--auth-danger);
}

/* 비밀번호 표시 토글 */
.login .wp-pwd {
	position: relative;
}

.login .wp-pwd .input {
	padding-right: 3rem;
}

.login .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	width: 2.9rem;
	min-width: 2.9rem;
	height: 2.9rem;
	min-height: 2.9rem;
	margin: 0;
	padding: 0;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--color-body);
}

.login .button.wp-hide-pw:hover {
	transform: none;
	background: transparent;
	color: var(--color-primary);
}

.login .button.wp-hide-pw:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.login .button.wp-hide-pw svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* 체크박스 */
.login input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.15rem;
	min-width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	padding: 0 !important;
	border: 1px solid var(--color-input-line);
	border-radius: var(--auth-r-sm);
	background-color: var(--color-base-100);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.05rem;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.login input[type="checkbox"]:checked {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}

.login input[type="checkbox"]:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
	outline: 2px solid transparent;
}

/* 체크박스 한 줄 (로그인 상태 유지 · 수신 동의 · 탈퇴 동의) */
.login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
	float: none;
	font-weight: 400;
}

.login .forgetmenot label {
	margin: 0;
	color: var(--color-body);
	font-size: 0.9rem;
	font-weight: 500;
}

/* ── 버튼 ───────────────────────────────────────────────── */

.login .button,
.login .button-primary,
.login .button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.9rem;
	margin: 0;
	padding: 0.7rem 1.15rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--auth-r-ctl);
	background: var(--color-base-200);
	color: var(--color-base-content);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.login .button:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-300));
}

.login .button-primary {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-primary-content);
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--color-primary) 90%, transparent);
}

.login .button-primary:hover,
.login .button-primary:focus {
	border-color: color-mix(in srgb, var(--color-primary) 82%, #000);
	background: color-mix(in srgb, var(--color-primary) 82%, #000);
	color: var(--color-primary-content);
}

.login .button-secondary {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--color-secondary-content);
}

.login .button-secondary:hover {
	border-color: color-mix(in srgb, var(--color-secondary) 82%, #000);
	background: color-mix(in srgb, var(--color-secondary) 82%, #000);
	color: var(--color-secondary-content);
}

.login .button-large {
	min-height: 3.1rem;
	font-size: 1rem;
}

.login .button:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
	outline: 2px solid transparent;
}

/* 폼 맨 아래 제출 버튼은 상자 폭을 다 쓴다 */
.login form p.submit {
	clear: both;
	margin: 0;
}

.login form p.submit .button {
	width: 100%;
}

/* ── 알림 ───────────────────────────────────────────────── */

.login .notice,
.login .message,
.login .success,
.login .msg {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-base-300);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--auth-r-ctl);
	background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
	box-shadow: var(--shadow-card);
	color: var(--color-base-content);
	font-size: 0.92rem;
	line-height: 1.65;
	word-wrap: break-word;
}

.login .notice p,
.login .message p,
.login .success p,
.login .msg p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.login .notice-error,
.login .msg.err {
	border-left-color: var(--auth-danger);
	background: color-mix(in srgb, var(--auth-danger) 9%, var(--color-base-100));
}

.login .notice-success,
.login .msg.ok {
	border-left-color: var(--auth-ok);
	background: color-mix(in srgb, var(--auth-ok) 9%, var(--color-base-100));
}

/*
 * 알림 하나가 곧 본문인 화면 — 로그인 완료, 메일 확인, 재설정 링크 보냄 등.
 *
 * 폼 위에 얹히던 얇은 띠 그대로 두면, 화면 한가운데 경고 딱지 한 장만 떠
 * 있는 꼴이 된다. 할 말이 그것뿐인 화면에서는 알림이 상자 노릇을 해야 하므로
 * 폼 상자와 같은 몸집·같은 여백을 준다.
 *
 * :has() 를 모르는 브라우저는 이 규칙을 통째로 건너뛰고 예전 띠 모양으로
 * 보여 준다 — 읽는 데는 지장이 없다.
 */
#login:not(:has(> form)):not(:has(> .card)) > .notice,
#login:not(:has(> form)):not(:has(> .card)) > .msg {
	margin: 0 0 0.75rem;
	padding: 1.5rem;
	border: 1px solid var(--color-base-300);
	border-left-width: 4px;
	border-radius: var(--auth-r-box);
	font-size: 1rem;
	text-align: center;
}

#login:not(:has(> form)):not(:has(> .card)) > .notice:last-of-type,
#login:not(:has(> form)):not(:has(> .card)) > .msg:last-of-type {
	margin-bottom: 0;
}

/* ── 안내문 ─────────────────────────────────────────────── */

.login .hint,
.login .description,
.login .indicator-hint,
.login p.intro {
	margin: 0 0 1rem;
	color: var(--color-body);
	font-size: 0.85rem;
	line-height: 1.65;
}

.login p.intro {
	font-size: 0.9rem;
}

.login .hint a,
.login p.intro a,
.login .done-tip a {
	color: var(--color-primary);
	font-weight: 600;
}

.login .hint a:hover,
.login p.intro a:hover,
.login .done-tip a:hover {
	text-decoration: underline;
}

/* 라벨 안에 끼워 넣는 (선택) 같은 꼬리말 */
.login label .hint {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* ── 탭 (내 정보) ───────────────────────────────────────── */

.login .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.25rem;
	padding: 0.3rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--auth-r-ctl);
	background: var(--surface-tint);
}

.login .tabs a {
	flex: 1 1 auto;
	padding: 0.5rem 0.75rem;
	border-radius: var(--auth-r-sm);
	color: var(--color-menu);
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.login .tabs a:hover {
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	color: var(--color-primary);
}

.login .tabs a.on {
	background: var(--color-primary);
	color: var(--color-primary-content);
	box-shadow: 0 8px 16px -10px var(--color-primary);
}

/* ── 정보 목록 ─────────────────────────────────────────── */

.login dl {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 0.45rem 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
}

.login dt {
	color: var(--color-body);
}

.login dd {
	margin: 0;
	color: var(--color-base-content);
	word-break: break-all;
}

/* 연결된 SNS 한 줄 */
.login .linked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.6rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--auth-r-ctl);
	background: var(--color-base-100);
	color: var(--color-base-content);
	font-size: 0.9rem;
}

.login .linked form {
	margin: 0;
}

.login .linked .button {
	min-height: 2.2rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--auth-r-sm);
	font-size: 0.82rem;
}

/* ── 가입 완료 화면 ─────────────────────────────────────── */

.login .done-mark {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--auth-ok) 16%, var(--color-base-100));
}

.login .done-mark svg {
	width: 1.85rem;
	height: 1.85rem;
	fill: none;
	stroke: var(--auth-ok);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 막혔다는 표시 (권한 없음) */
.login .done-mark.no {
	background: color-mix(in srgb, var(--auth-danger) 15%, var(--color-base-100));
}

.login .done-mark.no svg {
	stroke: var(--auth-danger);
}

.login .done-title {
	margin: 0 0 0.35rem;
	color: var(--color-base-content);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.login .done-lead {
	margin: 0 0 1.25rem;
	color: var(--color-body);
	font-size: 0.95rem;
	text-align: center;
}

.login .done-info {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--auth-r-ctl);
	background: var(--surface-tint);
}

.login .done-info dl {
	grid-template-columns: 4.5rem 1fr;
	margin: 0;
}

.login .done-info dd {
	font-weight: 700;
}

.login .done-tip {
	margin: 0 0 1rem;
	color: var(--color-body);
	font-size: 0.85rem;
	line-height: 1.65;
}

.login .card .button-primary,
.login .card .button-secondary {
	display: flex;
	width: 100%;
}

/*
 * 글 바로 밑에 단추가 붙는 경우 — 완료 화면이 여기 해당한다.
 * 읽는 줄과 누르는 것 사이는 문단 사이보다 넉넉해야 실수로 누르지 않는다.
 */
.login .card .done-lead + .button,
.login .card .done-title + .button {
	margin-top: 2rem;
}

.login .card .button-secondary {
	margin-top: 0.5rem;
}

/* ── 캡차 ──────────────────────────────────────────────── */

/*
 * 캡차는 남의 화면(iframe)이라 안쪽을 손댈 수 없다. 그래서 바깥 여백과 자리로
 * 녹인다 — 입력칸들과 같은 간격으로 한 줄을 통째로 차지하게 두고 가운데 세운다.
 * 위아래가 붙어 있으면 폼에 얹힌 남의 물건처럼 보인다.
 */
.login .cf-turnstile {
	display: flex;
	justify-content: center;
	margin: 0.5rem 0 1.5rem;
	min-height: 65px;
}

/* 상자 바로 아래 한 줄 — "아직 계정이 없으신가요? 회원가입" */
.login .auth-alt {
	margin: 0.25rem 0 0;
	color: var(--color-body);
	font-size: 0.92rem;
	text-align: center;
}

.login .auth-alt a {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
}

.login .auth-alt a:hover {
	text-decoration: underline;
}

/* ── 아래 링크 ─────────────────────────────────────────── */

.login #nav,
.login #backtoblog {
	padding: 0;
	font-size: 0.9rem;
	text-align: center;
}

.login #nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.25rem;
	margin: 1.5rem 0 0;
}

.login #backtoblog {
	margin: 0.85rem 0 0;
}

.login #nav a,
.login #backtoblog a {
	color: var(--color-body);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.16s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--color-primary);
}

/* ── 입력 한 덩어리 (라벨 + 칸) ─────────────────────────── */

.login .field {
	margin: 0 0 0.15rem;
}

.login .field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.login .field-link {
	color: var(--color-primary);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.login .field-link:hover {
	text-decoration: underline;
}

/*
 * 칸 왼쪽의 작은 아이콘.
 *
 * 아이콘은 mask 로 찍는다 — 색을 background-color 로 주게 되어 테마 토큰을
 * 그대로 쓸 수 있다. 이미지로 넣으면 색이 파일 안에 굳어, 다크 모드에서
 * 어두운 아이콘이 어두운 칸 위에 얹힌다.
 */
.login .field-box {
	position: relative;
}

.login .field-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0.95rem;
	width: 1.1rem;
	height: 2.9rem;
	background-color: var(--color-body);
	opacity: 0.7;
	pointer-events: none;
	transition: background-color 0.16s ease, opacity 0.16s ease;
	-webkit-mask: var(--field-icon) center / 1.1rem 1.1rem no-repeat;
	mask: var(--field-icon) center / 1.1rem 1.1rem no-repeat;
}

.login .field-box:focus-within::before {
	background-color: var(--color-primary);
	opacity: 1;
}

.login .field-box .input {
	padding-left: 2.85rem;
}

.login .field-box--user {
	--field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.login .field-box--lock {
	--field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ── 좁은 화면 ─────────────────────────────────────────── */

@media (max-width: 640px) {
	.auth-shell {
		padding: 3.5rem 0.75rem 2.5rem;
	}

	.auth-theme-toggle {
		top: 0.75rem;
		right: 0.75rem;
	}

	.login #login > form,
	.login #login > .card {
		padding: 1.35rem 1.25rem;
	}

	.login dl,
	.login .done-info dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.login dt {
		margin-top: 0.5rem;
	}
}

/*
 * 캡차 위젯은 폭이 300px 로 고정이고 안쪽은 남의 화면(iframe)이라 손댈 수 없다.
 * 상자 안쪽이 300px 보다 좁아지면 위젯이 상자를 뚫고 나가므로 그때만 줄인다.
 *
 * 줄이기 전에 상자 여백부터 깎는다. 그래야 요즘 쓰는 폭(360px 이상)에서는
 * 아예 줄일 일이 없어진다.
 */
@media (max-width: 380px) {
	.login #login > form,
	.login #login > .card {
		padding: 1.25rem 1rem;
	}
}

/*
 * 그래도 모자라는 아주 작은 화면(320px 등)에서만 줄인다.
 *
 * transform-origin 은 반드시 가운데로 둘 것. 왼쪽 위(0 0)로 두면 줄어드는
 * 방향이 왼쪽이라, .cf-turnstile 에 걸어 둔 가운데 정렬이 소용없어지고
 * 오른쪽에만 빈자리가 남아 왼쪽으로 쏠린 것처럼 보인다.
 */
@media (max-width: 355px) {
	.login .cf-turnstile {
		min-height: 58px;
	}

	.login .cf-turnstile > * {
		transform: scale(0.86);
		transform-origin: center top;
	}
}