/**
 * 로그인 카드 · 로그인 창 (2026-10-18) — 마크업 inc/login-card.php · 움직임 js/login-card.js
 *
 * 로그인 화면(/login/ — 흰 바탕 가운데 카드)과 손님 화면 바닥글의 로그인 창(<dialog id="lgn-dlg">)이 같은 카드를 쓴다.
 * 카드 = 왼쪽 회원 혜택 판(380 · 이 카드의 강조 구역) + 오른쪽 로그인 · 창 모서리 12px(v3). 760px 아래는 혜택 판이 위쪽 띠(칩 셋)로 접힌다.
 * 왼쪽 판 — 같은 날 운영자 「이렇게 팝업으로 나오고, 좌측에는 백그라운드 이미지 + 모션으로 생동감 있게」(axacademy.ai 로그인 창):
 *   줄마다 배경 그림(서식 벽 · 공부하는 손 · 챌린지 책상) 위에 짙은 덮개 한 겹(한 색 — 그라디언트 아님).
 *   지금 줄 밑 진행 막대(초록 — 진행 막대 자리)가 4초 동안 차면 다음 줄이 밝아지고 배경이 그 줄 그림으로 0.9초 동안 겹쳐 바뀐다.
 *   새 그림은 7초 동안 조금씩 물러난다(크게 → 제 크기). 마우스를 올리면 막대가 멈춘다 · 움직임 줄이기면 돌지 않는다(첫 줄 · 첫 그림 그대로).
 *   ⚠️ 움직임 규칙(기능적인 것만)의 예외 — .claude/rules/css.md. 창이 열릴 때 0.22초 떠오름도 같은 예외(움직임 줄이기면 끈다).
 * 창 안은 테마 모양(button 바탕 · a 파랑 마우스 올림 · ul 들여쓰기 · p·h2 여백 · input 회색 테두리 · img 높이 auto)이 그대로 들어오므로
 * .lgn 을 앞에 붙여 직접 지운다. ⛔ .lg- 는 css/legal.css(약관 화면)가 쓴다 — 이 카드는 .lgn- 만 쓴다.
 */

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

.lgn p,
.lgn ul,
.lgn li,
.lgn h1,
.lgn h2,
.lgn form {
	margin: 0;
	padding: 0;
}

/* ── 카드 ── */
.lgn-card {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	overflow: hidden;
	border-radius: 12px;
	background: var(--surface-white, #ffffff);
	color: var(--gray-900, #181818);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.08);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
}

/* ── 왼쪽 혜택 판 — 제목은 위, 줄 셋은 아래 · 사이로 배경 그림이 보인다 ── */
.lgn-side {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 480px;
	overflow: hidden;
	padding: 40px 28px 28px;
	background: var(--gray-900, #181818);
	color: var(--text-white, #ffffff);
}

.lgn-bgs {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/* 덮개 — 한 색 한 겹(그라디언트 금지) · 흰 글자가 어느 그림 위에서도 읽히게 */
.lgn-bgs::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.62);
}

/* 배경 그림 — 칸에 꽉 맞춰 깐다 · 지금 줄 그림만 보인다. 사라질 땐 다 사라진 뒤(0.9초) 제 크기로 돌아간다 */
.lgn .lgn-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity 0.9s ease, transform 0s linear 0.9s;
}

.lgn .lgn-bg.is-on {
	opacity: 1;
	transform: scale(1.02);
	transition: opacity 0.9s ease, transform 7s cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* 칸에서 보일 자리 — 서식 벽은 서식 칸이 몰린 오른쪽, 손은 자판, 책상은 노트북 */
.lgn .lgn-bg[data-k="forms"] {
	object-position: 64% 50%;
}

.lgn .lgn-bg[data-k="class"] {
	object-position: 28% 70%;
}

.lgn .lgn-bg[data-k="chall"] {
	object-position: 62% 60%;
}

.lgn .lgn-eye {
	margin-bottom: 10px;
	color: color-mix(in srgb, var(--brand-bright, #2ED47A) 60%, var(--surface-white, #ffffff));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.lgn .lgn-side-t {
	color: var(--text-white, #ffffff);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.02em;
}

/* 줄 셋 — 지금 줄만 흰 면(0.12) + 흰 아이콘 칸 · 나머지는 글자를 조금 낮춘다 */
.lgn .lgn-ben {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
}

.lgn .lgn-ben-i {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 14px 14px 12px;
	border-radius: 8px;
	list-style: none;
	transition: background-color 0.3s ease;
}

.lgn .lgn-ben-i.is-on {
	background: rgba(255, 255, 255, 0.12);
}

.lgn-ben-ic {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-white, #ffffff);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.lgn-ben-i.is-on .lgn-ben-ic {
	background: var(--surface-white, #ffffff);
	color: var(--gray-900, #181818);
}

.lgn-ben-tx {
	flex: 1 1 auto;
	min-width: 0;
}

.lgn-ben-tx b {
	display: block;
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.3s ease;
}

.lgn-ben-tx > span {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.5;
	transition: color 0.3s ease;
}

.lgn-ben-i.is-on .lgn-ben-tx b {
	color: var(--text-white, #ffffff);
}

.lgn-ben-i.is-on .lgn-ben-tx > span {
	color: rgba(255, 255, 255, 0.82);
}

/* 진행 막대 — 지금 줄 글 밑(줄 아래 여백 안) 2px. 돌 때만(.is-run) 보이고 4초 동안 찬다 → 다 차면 js 가 다음 줄로 넘긴다 */
.lgn-bar {
	position: absolute;
	left: 62px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	overflow: hidden;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.16);
	opacity: 0;
	pointer-events: none;
}

.lgn-bar > span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--brand-bright, #2ED47A);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.lgn-side.is-run .is-on > .lgn-bar {
	opacity: 1;
}

.lgn-side.is-run .is-on > .lgn-bar > span {
	animation: lgn-bar 4s linear forwards;
}

@keyframes lgn-bar {
	from {
		transform: scaleX(0);
	}

	to {
		transform: none;
	}
}

/* 마우스를 올리면 멈춘다(읽는 중) — 손가락 기기는 칩을 누르면 그 줄로 */
@media (hover: hover) {
	.lgn-side.is-run:hover .is-on > .lgn-bar > span {
		animation-play-state: paused;
	}

	.lgn .lgn-ben-i:not(.is-on),
	.lgn .lgn-chip:not(.is-on) {
		cursor: pointer;
	}
}

.lgn .lgn-chips {
	display: none;
	list-style: none;
}

/* ── 오른쪽 로그인 ── */
.lgn-main {
	position: relative;
	padding: 44px 44px 30px;
}

.lgn .lgn-logo {
	display: inline-block;
}

.lgn .lgn-logo img {
	display: block;
	width: 112px;
	max-width: none;
	height: auto;
}

.lgn .lgn-t {
	margin: 28px 0 6px;
	padding: 0;
	border: 0;
	color: var(--gray-900, #181818);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.lgn .lgn-new {
	margin-bottom: 24px;
	color: var(--gray-600, #545454);
	font-size: 14px;
	line-height: 1.5;
}

.lgn .lgn-sns,
.lgn .lgn-sns:hover,
.lgn .lgn-sns:focus,
.lgn .lgn-sns:active {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 52px;
	margin: 0 0 10px;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.lgn .lgn-sns--kakao,
.lgn .lgn-sns--kakao:hover,
.lgn .lgn-sns--kakao:focus,
.lgn .lgn-sns--kakao:active {
	background-color: #FEE500;
	color: rgba(0, 0, 0, 0.85);
}

.lgn .lgn-sns--naver,
.lgn .lgn-sns--naver:hover,
.lgn .lgn-sns--naver:focus,
.lgn .lgn-sns--naver:active {
	background-color: #03C75A;
	color: #ffffff;
}

@media (hover: hover) {
	.lgn .lgn-sns:hover {
		filter: brightness(0.96);
	}
}

.lgn .lgn-sns svg {
	flex: none;
	width: 22px;
	height: 22px;
}

.lgn .lgn-sns--naver svg {
	width: 18px;
	height: 18px;
}

.lgn .lgn-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 14px;
	color: var(--gray-500, #727272);
	font-size: 13px;
	line-height: 1.5;
}

.lgn-or::before,
.lgn-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gray-200, #e7e7e7);
}

.lgn-email {
	text-align: center;
}

.lgn-opts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.lgn-sep {
	color: var(--gray-300, #d5d5d5);
}

.lgn .lgn-opt,
.lgn .lgn-opt:hover,
.lgn .lgn-opt:focus,
.lgn .lgn-opt:active {
	display: inline-block;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: var(--gray-600, #545454);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

@media (hover: hover) {
	.lgn .lgn-opt:hover {
		background: var(--gray-100, #f4f4f4);
		color: var(--gray-900, #181818);
	}
}

.lgn .lgn-opt.is-on {
	color: var(--gray-900, #181818);
	font-weight: 600;
}

.lgn-form {
	display: none;
	text-align: left;
}

.lgn-form.is-on {
	display: block;
}

.lgn .lgn-in {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0 0 10px;
	padding: 0 14px;
	border: 1px solid var(--gray-300, #d5d5d5);
	border-radius: 6px;
	background: var(--surface-white, #ffffff);
	box-shadow: none;
	color: var(--gray-900, #181818);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
}

/* 포커스는 한 겹(테두리 색)만 — 테마 input[type=…]:focus(0,2,1)보다 세게 .lgn 을 붙였다 */
.lgn .lgn-in:focus {
	outline: none;
	border-color: var(--brand-action, #059669);
	background: var(--surface-white, #ffffff);
	box-shadow: none;
	color: var(--gray-900, #181818);
}

.lgn .lgn-in::placeholder {
	color: var(--gray-500, #727272);
	opacity: 1;
}

.lgn-pw {
	position: relative;
	margin-bottom: 10px;
}

.lgn .lgn-pw .lgn-in {
	margin-bottom: 0;
	padding-right: 48px;
}

.lgn .lgn-pw-tg,
.lgn .lgn-pw-tg:hover,
.lgn .lgn-pw-tg:focus,
.lgn .lgn-pw-tg:active {
	position: absolute;
	top: 50%;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: var(--gray-500, #727272);
	transform: translateY(-50%);
	cursor: pointer;
}

@media (hover: hover) {
	.lgn .lgn-pw-tg:hover {
		color: var(--gray-700, #404040);
	}
}

.lgn-pw-tg svg {
	width: 20px;
	height: 20px;
}

.lgn-pw-c,
.lgn-pw.is-shown .lgn-pw-o {
	display: none;
}

.lgn-pw.is-shown .lgn-pw-c {
	display: block;
}

/* Caps Lock 알림 — 비밀번호 칸 바로 아래에 떠 있는 띠 */
.lgn .lgn-caps {
	position: absolute;
	right: 0;
	bottom: -34px;
	left: 0;
	z-index: 1;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--color-warning, #C5870F);
	color: #ffffff;
	font-size: 13px;
	line-height: 1.5;
}

.lgn .lgn-caps.is-on {
	display: flex;
}

.lgn-caps svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.lgn .lgn-submit,
.lgn .lgn-submit:focus,
.lgn .lgn-submit:active {
	display: block;
	width: 100%;
	height: 48px;
	margin: 6px 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--brand-action, #059669);
	box-shadow: none;
	color: var(--text-white, #ffffff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

@media (hover: hover) {
	.lgn .lgn-submit:not(:disabled):hover {
		background: var(--brand-hover, #037450);
		color: var(--text-white, #ffffff);
	}
}

.lgn .lgn-submit:disabled,
.lgn .lgn-submit:disabled:hover {
	background: var(--gray-200, #e7e7e7);
	color: var(--gray-500, #727272);
	cursor: not-allowed;
}

.lgn .lgn-signup {
	margin-top: 14px;
	color: var(--gray-500, #727272);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.lgn .lgn-err {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 6px;
	background: var(--color-danger-bg, #FBE6E6);
	color: var(--color-danger-text, #A82F2F);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* 소셜 로그인 안내 — 오류가 아니라 안내 색 */
.lgn .lgn-err.is-social {
	background: var(--color-info-bg, #EAF1F8);
	color: var(--color-info-text, #2564D7);
}

.lgn .lgn-foot {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--gray-200, #e7e7e7);
	color: var(--gray-500, #727272);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.lgn .lgn-foot a,
.lgn .lgn-foot a:hover,
.lgn .lgn-foot a:focus {
	color: var(--gray-500, #727272);
	text-decoration: none;
}

@media (hover: hover) {
	.lgn .lgn-foot a:hover {
		color: var(--gray-900, #181818);
	}
}

.lgn :focus-visible {
	outline: 2px solid var(--brand-focus, #037450);
	outline-offset: 2px;
}

/* 입력 칸은 테두리 색 한 겹만(위 .lgn-in:focus) */
.lgn .lgn-in:focus-visible {
	outline: none;
}

/* ── 로그인 화면 — 흰 바탕 가운데(바탕 · 가운데 맞춤은 page-login.php 의 body) ── */
.lgn-page {
	width: 100%;
	max-width: 880px;
}

/* ── 로그인 창 — 화면 가운데 · 닫기 단추는 창 오른쪽 위 ── */
.lgn-dlg {
	width: min(880px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 12px;
	background: var(--surface-white, #ffffff);
	color: var(--gray-900, #181818);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.lgn-dlg::backdrop {
	background: rgba(10, 10, 10, 0.5);
}

.lgn-dlg .lgn-card {
	border-radius: 0;
	box-shadow: none;
}

/* 창에는 로고가 없다 — 제목이 맨 위 */
.lgn-dlg .lgn-t {
	margin-top: 0;
}

.lgn-dlg .lgn-main {
	padding: 48px 44px 30px;
}

.lgn .lgn-x,
.lgn .lgn-x:focus,
.lgn .lgn-x:active {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--gray-700, #404040);
	cursor: pointer;
}

@media (hover: hover) {
	.lgn .lgn-x:hover {
		background: var(--gray-100, #f4f4f4);
		color: var(--gray-900, #181818);
	}
}

.lgn-x svg {
	width: 22px;
	height: 22px;
}

/* 열릴 때 한 번 — 0.22초 떠오름(되풀이 없음) */
@keyframes lgn-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lgn-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.lgn-dlg[open] {
	animation: lgn-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lgn-dlg[open]::backdrop {
	animation: lgn-fade 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
	.lgn .lgn-bg,
	.lgn .lgn-bg.is-on {
		transform: none;
		transition: none;
	}

	.lgn-dlg[open],
	.lgn-dlg[open]::backdrop {
		animation: none;
	}
}

/* ── 폰 · 좁은 창: 혜택 판 → 위쪽 띠(칩 셋 — 지금 칩만 흰 면, 밑에 진행 막대) ── */
@media (max-width: 760px) {
	.lgn-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.lgn-side {
		justify-content: flex-start;
		gap: 14px;
		min-height: 0;
		padding: 20px 20px 18px;
	}

	.lgn .lgn-eye {
		margin-bottom: 6px;
	}

	.lgn .lgn-side-t {
		font-size: 20px;
	}

	.lgn .lgn-ben {
		display: none;
	}

	.lgn .lgn-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.lgn .lgn-chip {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		max-width: 100%;
		height: 30px;
		overflow: hidden;
		padding: 0 10px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.12);
		color: var(--text-white, #ffffff);
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		list-style: none;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.lgn .lgn-chip.is-on {
		background: var(--surface-white, #ffffff);
		color: var(--gray-900, #181818);
	}

	.lgn-chip svg {
		flex: none;
	}

	.lgn-chip-t {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 칩 막대 — 칩 아래 끝 전체 폭 */
	.lgn-chip .lgn-bar {
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 0;
		background: transparent;
	}

	.lgn-main,
	.lgn-dlg .lgn-main {
		padding: 26px 20px 22px;
	}

	.lgn .lgn-t {
		margin-top: 20px;
		font-size: 22px;
	}

	.lgn-dlg .lgn-t {
		margin-top: 0;
	}

	.lgn-dlg {
		width: calc(100% - 24px);
		max-height: calc(100% - 24px);
	}

	/* 닫기 단추는 짙은 띠 위 — 흰 글자 */
	.lgn .lgn-x,
	.lgn .lgn-x:focus,
	.lgn .lgn-x:active {
		top: 10px;
		right: 10px;
		background: rgba(0, 0, 0, 0.28);
		color: var(--surface-white, #ffffff);
	}
}

@media (max-width: 760px) and (hover: hover) {
	.lgn .lgn-x:hover {
		background: rgba(0, 0, 0, 0.4);
		color: var(--surface-white, #ffffff);
	}
}