/* =========================================================================
   로그인 화면 — 리뉴얼 (모던 / 프리미엄)
   구성: 좌측 브랜드 블록 / 우측 글래스 카드. PC(>=1025px) 2단, 그 이하 1단 센터.
   배경: 기본은 네이비(클래스 없음). 아래 변형 4종을 <body> 클래스로 전환하며,
         선택은 [차트 → 설정 → 로그인 화면 배경] 에서 localStorage('login_bg') 에
         저장된다 (로그인 전 화면이라 서버 설정을 읽을 수 없어 PC 단위 저장).
           (클래스 없음) 네이비 / bg-slate 차콜 / bg-light 화이트 / bg-photo 병원 사진
   색/폰트는 theme.tokens.css 변수 사용 (reset.css 가 @import 해 옴).
   ========================================================================= */

/* ---- 레이아웃 셸 ---------------------------------------------------- */
.contents {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 100%;
	overflow-y: auto;              /* body 가 position:fixed 라 여기서 스크롤 */
	-webkit-overflow-scrolling: touch;
	padding: 32px 20px;
	box-sizing: border-box;
	background-color: #080c14;     /* 배경 레이어 로드 전 플래시 방지 */
}

/* 배경 레이어 — 스크롤과 무관하게 고정 */
.contents::before,
.contents::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}

/* 1층: 네이비 모노톤 — 브랜드 블루 계열 하나만 써서 색이 섞여 탁해지지 않게 한다 */
.contents::before {
	background-color: #0a1322;
	background-image:
		radial-gradient(58% 62% at 12% 8%, rgba(56,124,224,0.42) 0%, rgba(56,124,224,0) 68%),
		radial-gradient(46% 52% at 92% 92%, rgba(20,58,112,0.55) 0%, rgba(20,58,112,0) 70%),
		linear-gradient(162deg, #0d1a2e 0%, #0a1322 52%, #070e19 100%);
	transform: scale(1.08);
	animation:
		login-bg-in 1.6s cubic-bezier(.16,.84,.44,1) both,
		login-bg-drift 42s 1.6s ease-in-out infinite alternate;
}
/* 2층: 그레인 + 비네트 — 그라디언트 밴딩을 없애고 깊이를 준다 */
.contents::after {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.26'/></svg>"),
		radial-gradient(130% 110% at 50% 42%, rgba(4,8,15,0) 46%, rgba(4,8,15,0.52) 100%);
	background-size: 140px 140px, cover;
	background-repeat: repeat, no-repeat;
	opacity: .66;
}

/* ---- 배경 변형 (선택) — <body class="..."> 로 전환 --------------------
   bg-slate : 무채색 차콜 (가장 차분)
   bg-light : 오프화이트 (밝은 톤 / 텍스트 색도 함께 전환)
   bg-photo : 기존 로비 사진 + 딤
   ---------------------------------------------------------------------- */
.bg-slate .contents::before {
	background-color: #14181e;
	background-image:
		radial-gradient(60% 64% at 14% 10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 66%),
		linear-gradient(162deg, #1b212a 0%, #14181e 54%, #0f1216 100%);
}
.bg-slate .contents::after {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.26'/></svg>"),
		radial-gradient(130% 110% at 50% 42%, rgba(6,8,11,0) 48%, rgba(6,8,11,0.5) 100%);
}

.bg-light .contents { background-color: #eef1f6; }
.bg-light .contents::before {
	background-color: #eef1f6;
	background-image:
		radial-gradient(56% 60% at 12% 6%, rgba(49,130,246,0.20) 0%, rgba(49,130,246,0) 66%),
		radial-gradient(50% 54% at 94% 94%, rgba(49,130,246,0.12) 0%, rgba(49,130,246,0) 68%),
		linear-gradient(162deg, #f7f9fc 0%, #eaeff7 55%, #e2e8f2 100%);
}
.bg-light .contents::after {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.18'/></svg>"),
		radial-gradient(130% 110% at 50% 45%, rgba(120,140,175,0) 50%, rgba(120,140,175,0.22) 100%);
	opacity: .5;
}
/* 밝은 배경에서는 브랜드 텍스트·로고를 어두운 톤으로 */
.bg-light .brand-mark {
	filter: none;
	opacity: 1;
	background-image: url(/img/logo2.svg);
}
.bg-light .brand-wordmark {
	color: var(--c-text);
	text-shadow: none;
}
.bg-light .brand-sub {
	color: var(--c-text-sub);
	text-shadow: none;
}
.bg-light .brand-rule {
	background: linear-gradient(90deg, rgba(160,140,100,0) 0%, rgba(160,140,100,.6) 50%, rgba(160,140,100,0) 100%);
}
.bg-light .login-card {
	background: #fff;
	border-color: rgba(20,26,34,.06);
	box-shadow:
		0 24px 60px rgba(23,35,60,.14),
		0 2px 8px rgba(23,35,60,.06);
}
@keyframes login-bg-in {
	from { opacity: 0; transform: scale(1.14); }
	to   { opacity: 1; transform: scale(1.08); }
}
@keyframes login-bg-drift {
	from { transform: scale(1.08) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(-2.2%, -1.6%, 0); }
}

/* ---- 로비 사진 배경 (선택) — <body class="bg-photo"> 일 때만 --------- */
.bg-photo .contents::before {
	background-color: #0d1016;
	background-image: url(/img/IMG_5392.jpg);
	background-size: cover;
	background-position: center;
	animation: login-bg-in 1.8s cubic-bezier(.16,.84,.44,1) both;
}
.bg-photo .contents::after {
	background-image:
		radial-gradient(120% 90% at 78% 50%, rgba(10,12,18,0.14) 0%, rgba(10,12,18,0.62) 100%),
		linear-gradient(102deg,
			rgba(10,12,18,0.86) 0%,
			rgba(10,12,18,0.60) 34%,
			rgba(10,12,18,0.44) 56%,
			rgba(10,12,18,0.72) 100%);
	background-size: cover, cover;
	opacity: 1;
}

.login-shell {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	width: 100%;
	max-width: 440px;
	margin: auto;
}

/* ---- 브랜드 블록 ---------------------------------------------------- */
.brand {
	text-align: center;
	color: #fff;
	animation: login-rise .7s cubic-bezier(.16,.84,.44,1) both;
}
.brand-mark {
	width: 46px;
	height: 46px;
	margin: 0 auto 18px;
	background-image: url(/img/logo_white.svg);
	background-size: contain;
	background-position: center;
	opacity: .95;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,.4));
}
.brand-wordmark {
	margin: 0;
	font-size: 25px;
	font-weight: 300;
	letter-spacing: .30em;
	text-indent: .30em;             /* letter-spacing 로 밀린 중심 보정 */
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.brand-sub {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.6;
	color: rgba(255,255,255,.76);
	text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
/* 샴페인골드 헤어라인 — 로비 사진의 웜톤에 맞춘 액센트 */
.brand-rule {
	width: 56px;
	height: 1px;
	margin: 18px auto;
	border: 0;
	background: linear-gradient(90deg, rgba(226,199,146,0) 0%, rgba(226,199,146,.85) 50%, rgba(226,199,146,0) 100%);
}

/* ---- 카드 ------------------------------------------------------------ */
.login-card {
	width: 100%;
	box-sizing: border-box;
	padding: 38px 34px 30px;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,.55);
	background: rgba(253,253,255,.96);
	backdrop-filter: blur(26px) saturate(1.35);
	-webkit-backdrop-filter: blur(26px) saturate(1.35);
	box-shadow:
		0 38px 90px rgba(6,9,16,.48),
		0 4px 14px rgba(6,9,16,.22),
		inset 0 1px 0 rgba(255,255,255,.7);
	animation: login-rise .7s .08s cubic-bezier(.16,.84,.44,1) both;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.login-card { background: rgba(255,255,255,.98); }
}
.card-head {
	margin-bottom: 26px;
}
.card-head h2 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.card-head p {
	margin: 0;
	font-size: 13.5px;
	color: var(--c-text-muted);
}

@keyframes login-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---- 알림 (로그인 실패 등) ------------------------------------------ */
.login-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 11px 14px;
	border-radius: var(--radius-md);
	background: var(--c-danger-bg);
	border: 1px solid rgba(240,68,82,.24);
	color: #c0293a;
	font-size: 13px;
	line-height: 1.45;
}
.login-alert[hidden] { display: none; }
.login-alert::before {
	content: "!";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--c-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* ---- 입력 필드 (플로팅 라벨) ---------------------------------------- */
.field {
	position: relative;
	margin-bottom: 12px;
}
.field input {
	width: 100%;
	height: 58px;
	box-sizing: border-box;
	padding: 23px 16px 7px;
	border: 1px solid rgba(20,26,34,.12);
	border-radius: 14px;
	background: rgba(255,255,255,.72);
	font-family: inherit;
	font-size: 15px;
	color: var(--c-text);
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field-pw input { padding-right: 52px; }
.field label {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--c-text-muted);
	pointer-events: none;
	transition: top .16s ease, font-size .16s ease, color .16s ease, transform .16s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field.has-value label {
	top: 11px;
	transform: none;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--c-text-sub);
}
/* 저장된 계정 자동완성 — 크롬은 :placeholder-shown 을 갱신하지 않아 라벨이
   겹쳐 보였다. 별도 규칙으로 분리 (다른 브라우저에서 규칙 전체가 무효화되지 않도록). */
.field input:-webkit-autofill + label {
	top: 11px;
	transform: none;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--c-text-sub);
}
.field input:focus {
	background: #fff;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 4px rgba(49,130,246,.16);
}
.field input:focus + label { color: var(--c-primary); }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--c-text);
	transition: background-color 9999s ease-out;
	/* JS 가 자동완성 시점을 감지하기 위한 훅 (animationstart) */
	animation-name: login-autofill;
	animation-duration: .01s;
}
@keyframes login-autofill { from { opacity: 1; } to { opacity: 1; } }
/* 브라우저 기본 비밀번호 아이콘(Edge) 은 자체 토글과 중복 */
.field input::-ms-reveal,
.field input::-ms-clear { display: none; }

/* 비밀번호 표시 토글 */
.pw-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: var(--c-text-muted);
	transition: color .15s ease, background-color .15s ease;
}
.pw-toggle:hover { color: var(--c-text-sub); background: rgba(20,26,34,.05); }
.pw-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(49,130,246,.28); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .icon-off { display: none; }
.pw-toggle.is-on .icon-on  { display: none; }
.pw-toggle.is-on .icon-off { display: block; }

/* ---- 로그인 유지 체크박스 --------------------------------------------
   reset.css 는 실제 checkbox 를 display:none 하고 label>span 의 SVG 로 그린다.
   여기선 키보드 접근을 위해 input 을 "보이지 않지만 포커스 가능" 상태로 두고,
   체크 표식은 카드 톤에 맞춰 CSS 로 직접 그린다. ---------------------- */
.login-keep {
	position: relative;
	margin: 4px 0 22px;
	padding-left: 2px;
}
.login-keep input[type="checkbox"] {
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	display: block;                 /* reset 의 display:none 해제 (포커스 유지) */
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
}
.login-keep label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--c-text-sub);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
/* reset.css 의 `input[type=checkbox] + label span` (1.2em / margin 5px) 보다
   특정성이 높아야 크기·간격이 먹는다. */
.login-keep input[type="checkbox"] + label > span {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-right: 12px;
}
.login-keep input[type="checkbox"] + label > span::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	background-image: none;         /* reset 의 원형 SVG 대체 */
	background-color: #fff;
	border: 1.5px solid rgba(20,26,34,.22);
	border-radius: 6px;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.login-keep input[type="checkbox"] + label > span::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3.5px;
	width: 5px;
	height: 9.5px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: transform .15s ease, opacity .15s ease;
}
.login-keep input[type="checkbox"]:checked + label > span::before {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
}
.login-keep input[type="checkbox"]:checked + label > span::after {
	transform: rotate(45deg) scale(1);
	opacity: 1;
}
.login-keep input[type="checkbox"]:focus-visible + label > span::before {
	box-shadow: 0 0 0 4px rgba(49,130,246,.22);
}

/* ---- 로그인 버튼 ------------------------------------------------------ */
.btn-login {
	position: relative;
	width: 100%;
	height: 54px;
	border-radius: 14px;
	background: linear-gradient(180deg, #3b86f7 0%, #1b64da 100%);
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .02em;
	box-shadow: 0 10px 24px rgba(27,100,218,.30);
	transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-login:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(27,100,218,.38);
	filter: brightness(1.04);
}
.btn-login:active {
	transform: translateY(0);
	box-shadow: 0 6px 16px rgba(27,100,218,.28);
	filter: brightness(.96);
}
.btn-login:focus-visible {
	box-shadow: 0 0 0 4px rgba(49,130,246,.35), 0 10px 24px rgba(27,100,218,.30);
}
.btn-login.is-loading {
	pointer-events: none;
	filter: saturate(.85);
}
.btn-login.is-loading .btn-label { opacity: 0; }
.btn-login .btn-spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 19px;
	height: 19px;
	margin: -9.5px 0 0 -9.5px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	opacity: 0;
	animation: login-spin .7s linear infinite;
}
.btn-login.is-loading .btn-spinner { opacity: 1; }
@keyframes login-spin { to { transform: rotate(360deg); } }

.card-foot {
	margin: 22px 0 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: .10em;
	color: var(--c-text-muted);
}

/* ---- PC (>=1025px) — 2단 구성 ---------------------------------------- */
@media (min-width: 1025px) {
	.contents { padding: 40px 56px; }
	.login-shell {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 72px;
		max-width: 1120px;
	}
	.brand {
		flex: 1 1 auto;
		text-align: left;
		max-width: 520px;
	}
	.brand-mark { margin: 0 0 24px; width: 54px; height: 54px; }
	.brand-wordmark { font-size: 34px; text-indent: 0; }
	.brand-sub { font-size: 15px; }
	.brand-rule { margin: 24px 0; width: 72px; }
	.login-card { flex: 0 0 428px; width: 428px; }
}

/* ---- 태블릿·모바일 (<=1024px) --------------------------------------- */
@media (max-width: 1024px) {
	.contents {
		padding: calc(28px + var(--safe-top, 0px)) 18px calc(28px + var(--safe-bottom, 0px));
	}
	.login-shell { gap: 26px; max-width: 420px; }
	.brand-mark { width: 40px; height: 40px; margin-bottom: 14px; }
	.brand-wordmark { font-size: 21px; }
	.brand-sub { font-size: 12.5px; }
	.brand-rule { margin: 14px auto; }
	.login-card { padding: 30px 22px 24px; border-radius: 22px; }
	/* iOS 입력 시 자동 확대 방지 + 터치 타깃 확보 */
	.field input { font-size: 16px; height: 60px; }
	.field label { font-size: 15.5px; }
	.field input:focus + label,
	.field input:not(:placeholder-shown) + label { font-size: 11.5px; }
	.pw-toggle { width: var(--touch-min, 44px); height: var(--touch-min, 44px); }
	.login-keep {
		display: flex;
		align-items: center;
		min-height: var(--touch-min, 44px);
		margin: 6px 0 20px;
	}
	.login-keep label { font-size: 14.5px; }
	.login-keep input[type="checkbox"] + label > span { margin-right: 14px; }
	.btn-login { min-height: 54px; font-size: 16px; }
}

@media (max-width: 360px) {
	.login-card { padding: 26px 18px 22px; }
	.brand-wordmark { font-size: 19px; letter-spacing: .22em; text-indent: .22em; }
}

/* ---- 모션 최소화 ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.contents::before { animation: none; transform: scale(1.08); }
	.brand, .login-card { animation: none; }
	.btn-login:hover { transform: none; }
}