/* EcM 로그인 — 인트로(남색 격자·흰 판·파랑 단추)와 같은 결, 이카운트식 입력칸 */
:root{
	--lg-navy:#0b1f3a; --lg-navy2:#12305a; --lg-blue:#1a56db; --lg-blue-d:#1646b3; --lg-sky:#d6e4ff;
	--lg-ink:#1f2d3d; --lg-sub:#5b6b7f; --lg-line:#d9e0e8; --lg-bg:#f5f7fa; --lg-ok:#22c55e;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body.lg26{
	min-height:100vh;
	font-family:var(--font-base, 'Pretendard'), '맑은 고딕', sans-serif;
	color:var(--lg-ink);
	background-color:#f7f9fc;
	background-image:
		radial-gradient(900px 520px at 88% 8%, rgba(59,130,246,.10), transparent 62%),
		radial-gradient(700px 420px at 6% 96%, rgba(99,102,241,.06), transparent 60%),
		linear-gradient(rgba(15,40,80,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,40,80,.035) 1px, transparent 1px);
	background-size:auto, auto, 48px 48px, 48px 48px;
	background-attachment:fixed;
}
.lg26 .login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 16px; }

/* 판 — 모서리만 살짝 둥근 사각 */
.lg-shell{
	/* 황금비 — 판 가로:세로 = 1.618:1 (1100×680), 테마 판:로그인 판 = 1.618:1 (680:420) */
	width:100%; max-width:min(1100px, calc((100vh - 56px) * 1.618)); aspect-ratio:1.618 / 1;
	display:grid; grid-template-columns:1.618fr 1fr;
	background:#fff; border-radius:12px; overflow:hidden;
	border:1px solid #dbe3ee;
	box-shadow:0 2px 6px rgba(15,40,80,.05), 0 24px 60px rgba(15,40,80,.14);
}

/* ── 왼쪽 테마 판 ── */
.lg-visual{
	position:relative; overflow:hidden; color:#fff; padding:34px 0 0 55px;
	display:flex; flex-direction:column;
	background:
		linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0/32px 32px,
		linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/32px 32px,
		radial-gradient(520px 360px at 85% 12%, rgba(255,255,255,.18), transparent 65%),
		/* [2026-09-27 대표] 로봇이 선 아래쪽을 더 진한 파랑으로 — 바닥이 가장 진하고 위로 45% 까지 옅어져 사라진다 */
		linear-gradient(0deg, rgba(20,44,140,.62) 0%, rgba(20,44,140,.34) 20%, rgba(20,44,140,.12) 34%, rgba(20,44,140,0) 45%),
		linear-gradient(155deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
}
.lg-badge{
	align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
	padding:5px 11px; border:1px solid rgba(255,255,255,.28); border-radius:6px;
	font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.86);
}
.lg-badge i{ width:7px; height:7px; border-radius:50%; background:var(--lg-ok); box-shadow:0 0 0 3px rgba(34,197,94,.22); }

.lg-seg{ display:inline-flex; margin-top:34px; align-self:flex-start; border:1px solid rgba(255,255,255,.28); border-radius:6px; overflow:hidden; }
.lg-seg button{
	appearance:none; border:0; margin:0; padding:7px 16px; cursor:pointer;
	background:transparent; color:rgba(255,255,255,.78); font:inherit; font-size:13px; font-weight:700;
}
.lg-seg button + button{ border-left:1px solid rgba(255,255,255,.28); }
.lg-seg button[aria-pressed="true"]{ background:#fff; color:var(--lg-navy); }
.lg-seg button:focus-visible{ outline:2px solid var(--lg-sky); outline-offset:-2px; }

/* 글은 왼쪽 54% 안에서만 — 오른쪽 46% 는 그림(로봇·차량) 자리 */
.lg-badge, .lg-seg, .lg-copy, .lg-chips{ position:relative; z-index:2; }
.lg-copy{ margin-top:21px; max-width:54%; }
.lg-eyebrow{ font-size:12px; font-weight:700; color:var(--lg-sky); letter-spacing:.02em; }
.lg-head, .lg-title{ text-transform:none; }
.lg-head{ margin:8px 0 0; font-size:34px; line-height:1.3; font-weight:800; letter-spacing:-.02em; color:#fff; }
.lg-head em{ font-style:normal; color:var(--lg-sky); }
.lg-sub{ margin:13px 0 0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); }

/* 왼쪽 아래 — 핵심 세 가지 (빈 자리를 채우고 그림과 아래 선을 맞춘다) */
.lg-chips{ margin-top:auto; padding-bottom:34px; display:flex; flex-wrap:wrap; gap:8px; max-width:54%; }
.lg-chips span{
	display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
	font-size:12.5px; font-weight:700; color:#fff;
	background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.34); border-radius:6px;
}
.lg-chips span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.9; }
body[data-lg-theme="daycare"] .lg-chips.lg-daycare{ display:flex; }

/* 그림 — 오른쪽 46%, 판 높이 가득. 뒤에 은은한 빛, 발밑에 그림자 */
.lg-fig{ position:absolute; top:0; right:0; bottom:0; width:46%; z-index:1; pointer-events:none; }
.lg-fig::before{
	content:''; position:absolute; left:50%; top:56%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
	border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 45%, transparent 70%);
}
.lg-fig .lg-floor{
	position:absolute; left:50%; bottom:22px; width:62%; height:26px; transform:translateX(-50%);
	border-radius:50%; background:radial-gradient(ellipse at center, rgba(10,30,80,.38), transparent 70%);
}
.lg-fig img.lg-robot{
	position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
	height:84%; max-height:560px; width:auto; filter:drop-shadow(0 20px 26px rgba(10,30,80,.35));
}
/* [2026-09-27 #1780] 로봇 화면의 눈 — 그림(robot-noface.png)과 같은 크기의 상자에 눈을 얹는다. 자리는 그림(360×753) 기준 % */
.lg-fig .lg-robot-wrap{
	position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
	height:84%; max-height:560px; aspect-ratio:360/753; filter:drop-shadow(0 20px 26px rgba(10,30,80,.35));
}
.lg-fig .lg-robot-wrap img.lg-robot{ position:absolute; inset:0; left:0; bottom:auto; transform:none; width:100%; height:100%; max-height:none; filter:none; }
.lg-eyes{ position:absolute; left:34.2%; top:8.6%; width:35%; height:8.2%; }
/* [2026-09-27 대표 «지금 눈은 무서워 — 기존 눈으로, 깜빡이게, 눈썹은 유지»] 원래 그림(robot.png)의 눈 모양으로:
   하늘색 두꺼운 테두리 · 청회색 눈 · 안쪽 밝은 하늘색 타원. 빛나는 흰 눈동자·반짝이는 없앰 */
.lge-eye{
	position:absolute; top:4%; width:31%; aspect-ratio:1/1.14; border-radius:50%; overflow:hidden;
	background:linear-gradient(180deg, #a8edff 0%, #93dcf8 100%);
	box-shadow:0 0 3px rgba(120,210,255,.35);
	transform-origin:50% 55%; transition:transform .09s ease-in;
}
.lge-eye.l{ left:8.1%; }
.lge-eye.r{ left:57.2%; }
.lge-eye.blink{ transform:scaleY(.08); }
.lge-iris{
	position:absolute; left:15%; top:13%; width:70%; height:74%; border-radius:50%;
	background:linear-gradient(180deg, #5a7aa2 0%, #4b6589 100%);
	transition:transform .22s cubic-bezier(.2,.8,.25,1);
}
.lge-pupil{ position:absolute; left:20%; top:12%; width:56%; height:60%; border-radius:50%; background:radial-gradient(ellipse at 45% 40%, #c9f3ff 0%, #9be4ff 55%, #84d4f4 100%); }
.lge-glint{ display:none; }
.lge-cheek{
	position:absolute; left:-10%; right:-10%; bottom:0; height:74%; background:#4c4f54;
	border-radius:50% 50% 0 0 / 46% 46% 0 0; transform:translateY(102%);
	transition:transform .26s cubic-bezier(.3,1.4,.5,1); box-shadow:0 -1px 0 rgba(127,214,255,.6);
}
/* [09-28] 비밀번호 칸 — 회색 볼이 눈 아래 반을 덮던 모양은 «눈이 반쯤 가려진» 것처럼 이상해 보여,
   눈을 비우고 ^ ^ 모양(웃으며 감은 눈) 곡선만 그린다. 볼은 쓰지 않음 */
.lge-cheek{ display:none; }
.lge-eye::after{
	content:""; position:absolute; left:8%; right:8%; top:34%; height:70%;
	border:3px solid #a8edff; border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent;
	border-radius:50%; box-sizing:border-box; filter:drop-shadow(0 0 2px rgba(96,196,255,.75));
	opacity:0; transition:opacity .18s ease;
}
.lge-iris{ transition:transform .22s cubic-bezier(.2,.8,.25,1), opacity .18s ease; }
.lg-eyes.shy .lge-eye{ background:transparent; box-shadow:none; }
.lg-eyes.shy .lge-iris{ opacity:0; }
.lg-eyes.shy .lge-eye::after{ opacity:1; }
.lge-mouth{
	position:absolute; left:44%; top:84%; width:12%; height:12%;
	border-bottom:2px solid #7fd6ff; border-radius:0 0 50% 50% / 0 0 100% 100%;
	filter:drop-shadow(0 0 2px rgba(96,196,255,.7)); transition:width .25s ease, left .25s ease;
}
.lg-eyes.shy .lge-mouth{ left:41%; width:18%; }
/* 동그란 스마일 눈썹 — 눈 위 둥근 반원 곡선, 눈 감고 웃을 땐 조금 올라간다 */
.lge-brow{
	position:absolute; top:-24%; width:25%; height:30%;
	border:2.5px solid #7fd6ff; border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent;
	border-radius:50%; box-sizing:border-box;
	filter:drop-shadow(0 0 2px rgba(96,196,255,.75)); opacity:.95;
	transition:transform .26s cubic-bezier(.3,1.4,.5,1);
}
.lge-brow.l{ left:11.1%; transform:rotate(-5deg); }
.lge-brow.r{ left:60.2%; transform:rotate(5deg); }
.lg-eyes.shy .lge-brow.l{ transform:translateY(-16%) rotate(-8deg); }
.lg-eyes.shy .lge-brow.r{ transform:translateY(-16%) rotate(8deg); }
body[data-lg-theme="daycare"] .lg-fig{ width:52%; }
.lg-fig svg.lg-van{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:96%; max-width:440px; height:auto; }

/* 테마 — 시설(순찰 로봇) / 주간보호(송영) */
.lg-daycare{ display:none; }
body[data-lg-theme="daycare"] .lg-facility{ display:none; }
body[data-lg-theme="daycare"] .lg-daycare{ display:block; }
body[data-lg-theme="daycare"] svg.lg-daycare{ display:block; }

/* ── 오른쪽 로그인 판 ── */
.lg26 .login-container{ padding:34px 34px 21px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.lg26 .logo-section{ text-align:left; margin:0 0 21px; }
.lg-title{ display:flex; align-items:center; gap:8px; margin:0; font-size:21px; font-weight:800; color:var(--lg-ink); }
.lg-title i{ width:9px; height:9px; border-radius:50%; background:var(--lg-ok); box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.lg-desc{ margin:8px 0 21px; font-size:13px; color:var(--lg-sub); }

.lg26 .form-group{ margin:0 0 13px; }
.lg26 .form-group label{ display:block; margin:0 0 6px; font-size:12px; font-weight:700; color:var(--lg-sub); }
.lg26 .login-container .form-control{
	width:100%; height:46px; padding:0 14px; font-size:15px; color:var(--lg-ink);
	background:#fff; border:1px solid var(--lg-line); border-radius:6px; box-shadow:none;
	transition:border-color .12s, box-shadow .12s;
}
.lg26 .login-container .form-control::placeholder{ color:#9aa7b6; }
/* 브라우저 자동완성의 하늘색 칠 → 흰 바탕 그대로 */
.lg26 .login-container .form-control:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #fff inset; -webkit-text-fill-color:var(--lg-ink); caret-color:var(--lg-ink); }
.lg26 .login-container .form-control:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #fff inset, 0 0 0 3px rgba(26,86,219,.14); }
.lg26 .login-container .form-control:focus{ outline:none; border-color:var(--lg-blue); box-shadow:0 0 0 3px rgba(26,86,219,.14); }

.lg26 #capCheck{ display:none; margin:0 0 12px; padding:9px 12px; font-size:12.5px; color:#b42318; background:#fef3f2; border:1px solid #fecdca; border-radius:6px; }
.lg26 #alert_div{ margin:0 0 12px; }
.lg26 #alert_div .alert{ margin:0; padding:11px 14px; border-radius:6px; font-size:13px; }
.lg26 #alert_div .alert-danger{ color:#b42318; background:#fef3f2; border:1px solid #fecdca; }
.lg26 #alert_div .alert-danger strong{ display:block; margin-bottom:3px; font-size:13.5px; }
.lg26 #alert_div .close{ color:#b42318; opacity:.7; }

.lg26 .login-btn{
	width:100%; height:48px; margin:6px 0 14px; cursor:pointer;
	display:flex; align-items:center; justify-content:center; gap:8px;
	background:var(--lg-blue); color:#fff; border:1px solid var(--lg-blue); border-radius:6px;
	font-size:16px; font-weight:800; letter-spacing:.02em;
	box-shadow:0 6px 16px rgba(26,86,219,.28); transition:background .12s, box-shadow .12s;
}
.lg26 .login-btn:hover{ background:var(--lg-blue-d); border-color:var(--lg-blue-d); box-shadow:0 8px 20px rgba(26,86,219,.34); }
.lg26 .login-btn:focus-visible{ outline:3px solid rgba(26,86,219,.35); outline-offset:2px; }

.lg26 .login-options{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.lg26 ul.help{ margin:0; padding:0; list-style:none; }
.lg26 ul.help a{ color:var(--lg-sub); text-decoration:none; }
.lg26 ul.help a:hover{ color:var(--lg-blue); text-decoration:underline; }
.lg26 .remember-me{ display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:500; color:var(--lg-sub); cursor:pointer; }
.lg26 .remember-me input{ width:16px; height:16px; margin:0; accent-color:var(--lg-blue); cursor:pointer; }

.lg-contact{ margin-top:21px; padding-top:16px; border-top:1px solid var(--lg-line); font-size:12.5px; color:var(--lg-sub); }
.lg26 #loginForm{ margin-bottom:26px; }
.lg-contact .t{ font-weight:800; color:var(--lg-ink); margin-bottom:6px; }
.lg-contact .lg-row{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.lg-contact b{ color:var(--lg-ink); font-weight:700; margin-right:4px; }
.lg-contact a{ color:inherit; text-decoration:none; }
.lg26 .footer{ margin-top:14px; font-size:11.5px; color:#9aa7b6; }

/* 계정정지 해제 모달 */
.lg26 #userEnabledModal .modal-content{ border:0; border-radius:10px; overflow:hidden; box-shadow:0 20px 50px rgba(2,8,23,.35); }
.lg26 #userEnabledModal .modal-header{ background:var(--lg-navy); border:0; padding:16px 20px; }
.lg26 #userEnabledModal .modal-body{ padding:24px; }
.lg26 #userEnabledModal .modal-footer{ padding:14px 20px; border-top:1px solid var(--lg-line); }
.lg26 #userEnabledModal .form-control,
.lg26 #userEnabledModal .input-sm{ height:40px; border:1px solid var(--lg-line); border-radius:6px; box-shadow:none; }
.lg26 #userEnabledModal .form-control:focus,
.lg26 #userEnabledModal .input-sm:focus{ outline:none; border-color:var(--lg-blue); box-shadow:0 0 0 3px rgba(26,86,219,.14); }
.lg26 #userEnabledModal .btn{ border-radius:6px; font-weight:700; }
.lg26 #userEnabledModal .btn-primary{ background:var(--lg-blue); border-color:var(--lg-blue); }

/* 좁은 화면 — 테마 판은 윗부분 띠로 줄인다 */
@media (max-width: 860px){
	/* 스마트폰 — 첫 화면에 「업무 시작」까지 보이게 (iPhone SE 320×568 기준) */
	.lg26 .login-wrapper{ padding:12px; align-items:flex-start; }
	.lg-shell{ grid-template-columns:1fr; max-width:460px; aspect-ratio:auto; min-height:0 !important; border-radius:10px; }
	.lg-visual{ padding:13px 21px; }
	.lg-badge, .lg-seg, .lg-sub, .lg-fig, .lg-chips, .lg-eyebrow{ display:none !important; }
	.lg-copy{ margin-top:0; max-width:none; }
	.lg-head{ font-size:16px; line-height:1.45; }
	.lg-head br{ display:none; }
	.lg-head em{ margin-left:4px; }
	.lg26 .login-container{ padding:21px 21px 16px; justify-content:flex-start; }
	.lg26 .logo-section{ margin-bottom:13px; }
	.lg26 .logo-section > span{ width:124px !important; }
	.lg-title{ font-size:18px; }
	.lg-desc{ margin:4px 0 13px; font-size:12.5px; }
	.lg26 .form-group{ margin-bottom:10px; }
	/* 16px 미만이면 아이폰이 입력칸을 누를 때 화면을 확대한다 */
	.lg26 .login-container .form-control{ font-size:16px; height:46px; }
	.lg26 .login-btn{ height:48px; margin:4px 0 12px; }
	.lg-contact{ margin-top:16px; }
	.lg26 .login-options{ font-size:12.5px; }
	.lg26 .login-options a, .lg26 .remember-me{ white-space:nowrap; }
	.lg-hint{ display:none; }
}

/* 한글은 낱말 단위로 줄바꿈 */
.lg-visual, .lg26 .login-container{ word-break:keep-all; }
/* 판은 내용보다 작아지지 않게 (넘치면 잘리지 않고 비율이 살짝 늘어난다) */
.lg-shell{ min-height:560px; }
/* 주간보호 — 빛은 차량 뒤 낮게, 은은하게 */
body[data-lg-theme="daycare"] .lg-fig::before{ top:auto; bottom:-18%; width:100%; transform:translateX(-50%); opacity:.7; }

/* 세로가 낮은 화면(노트북) — 간격·글자를 한 단계 줄인다 */
@media (max-height: 760px) and (min-width: 861px){
	.lg-visual{ padding-top:21px; }
	.lg-seg{ margin-top:21px; }
	.lg-copy{ margin-top:13px; }
	.lg-head{ font-size:28px; }
	.lg-sub{ font-size:13px; margin-top:8px; }
	.lg-chips{ padding-bottom:21px; }
	.lg26 .login-container{ padding:21px 30px 13px; }
	.lg26 .logo-section{ margin-bottom:13px; }
	.lg26 .logo-section > span{ width:140px !important; }
	.lg-desc{ margin:5px 0 13px; }
	.lg26 .form-group{ margin-bottom:8px; }
	.lg26 .form-group label{ margin-bottom:4px; }
	.lg26 .login-container .form-control{ height:40px; }
	.lg26 .login-btn{ height:42px; margin:5px 0 10px; }
	.lg-contact{ margin-top:13px; padding-top:10px; }
	.lg-contact .t{ margin-bottom:3px; }
	.lg26 .footer{ margin-top:8px; }
}