@charset "UTF-8";
/* ================================================================
   AiSAC 로그인 페이지 - 신규 디자인 (좌우 2단 오버레이)
   대상 : theme/kobaco/member/loginForm.jsp
   작성 : 2026-07-29

   기존 css_2023/sub4.css 의 .login-* 규칙(79%/20% float 2단)과
   충돌하므로, #loginOverlay 범위 안에서만 무력화한다.
   sub4.css 는 storyboard/member/loginForm.jsp 등에서도 공유하므로
   직접 수정하지 않는다.
   ================================================================ */

/* ===== 로그인 오버레이 (제안 디자인 적용) ===== */
:root{
	--lg-red:#E2231A; --lg-ink:#0E1525; --lg-ink2:#33415C;
	--lg-muted:#6B7889; --lg-line:#E6EAF1; --lg-nav:#0E1B30;
}
/* 화면 전체를 덮는 오버레이 */
#loginOverlay{
	position:fixed; inset:0; z-index:9999;
	display:grid; grid-template-columns:1.05fr .95fr;
	background:#fff;
	font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
	color:var(--lg-ink);
	overflow-y:auto;
}
#loginOverlay *{box-sizing:border-box;}
#loginOverlay a{text-decoration:none;}

/* 왼쪽 히어로 */
#loginOverlay .lhero{position:relative; overflow:hidden; background:var(--lg-nav);}
#loginOverlay .lhero img.lherobg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
#loginOverlay .lhero video.lherovid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
#loginOverlay .lhero .ov{
	position:absolute; inset:0; z-index:2;
	background:rgba(12,22,42,.64);
	padding:52px 48px; display:flex; flex-direction:column; color:#fff;
}
/* 좌측 상단 로고 - 메인페이지 링크 (어두운 배경이라 흰색으로 반전) */
#loginOverlay .lhero .lb{display:inline-block; align-self:flex-start;}
#loginOverlay .lhero .lb img{
	height:32px; width:auto; display:block;
	filter:brightness(0) invert(1);
}
#loginOverlay .lhero h2{font-size:32px; font-weight:900; line-height:1.25; margin-top:auto; letter-spacing:-.02em; color:#fff;}
#loginOverlay .lhero p{opacity:.85; margin-top:12px; font-size:15px;}
#loginOverlay .lhero ul{list-style:none; margin:22px 0 8px; padding:0; display:flex; flex-direction:column; gap:11px;}
#loginOverlay .lhero li{display:flex; align-items:center; gap:10px; font-size:14px;}
#loginOverlay .lhero li::before{
	content:"\2713"; width:20px; height:20px; border-radius:50%;
	background:var(--lg-red); display:grid; place-items:center; font-size:11px; flex:none;
}

/* 오른쪽 폼 */
#loginOverlay .lform{display:flex; align-items:center; justify-content:center; padding:40px;}

/* 기존 sub4.css의 .login-box-s(width:500px, margin:150px auto, border) 무력화 */
#loginOverlay .lcard.login-box-s{
	width:100%; max-width:340px;
	margin:0; padding:0; border:0; background:transparent;
}
#loginOverlay .lcard h2.login-title{
	width:auto; font-size:24px; font-weight:900; letter-spacing:-.02em;
	margin:0; padding:0; border:0; color:var(--lg-ink);
}
#loginOverlay .lcard .sub{color:var(--lg-muted); font-size:14px; margin:6px 0 24px;}

/* 기존 79%/20% float 2단 분할 해제 -> 세로 배치 */
#loginOverlay .login-i-left,
#loginOverlay .login-i-right{
	float:none; width:100%; margin:0; border:0;
}
#loginOverlay .login-box-s > form:after{content:none; display:none;}

/* 입력 라벨 */
#loginOverlay .lcard label.f{
	display:block; font-size:12px; font-weight:700;
	color:var(--lg-muted); margin:12px 0 6px;
}

/* 입력창 - 기존 .login-box-input 클래스에 스킨 적용 */
#loginOverlay .lcard .login-box-input,
#loginOverlay .lcard .login-box-input.first{
	width:100%; height:auto; text-indent:0;
	border:1px solid var(--lg-line); border-radius:10px;
	padding:12px 13px; font-size:14px; color:var(--lg-ink);
	background:#fff; font-family:inherit; margin-bottom:10px;
}
#loginOverlay .lcard .login-box-input:focus{outline:2px solid rgba(226,35,26,.25); border-color:var(--lg-red);}

/* 로그인 버튼 */
#loginOverlay .login-i-right{margin-top:8px;}
#loginOverlay .login-i-right a{display:block;}
#loginOverlay .lcard .btn-login{
	width:100%; height:auto; line-height:1.2;
	background:var(--lg-red); color:#fff; font-weight:800; font-size:15px;
	padding:13px; border-radius:10px; text-align:center; cursor:pointer;
}
#loginOverlay .lcard .btn-login:hover{background:#C31A12;}

/* 에러 메시지 */
#loginOverlay .text-danger{color:var(--lg-red); font-size:13px; margin:6px 0 0; display:block;}

/* 하단 링크 - 기존 width:80% / :after 구분자(|) 제거 */
#loginOverlay .login-find{
	clear:both; width:100%;
	display:flex; align-items:center; justify-content:center; gap:14px;
	margin:18px auto 0; font-size:13px; color:var(--lg-muted); line-height:1.4;
	white-space:nowrap;
}
#loginOverlay .login-find a{color:var(--lg-muted); text-align:center;}
#loginOverlay .login-find a:hover{color:var(--lg-red);}
#loginOverlay .login-find a:not(:last-child):after{content:none; display:none; padding:0; width:0;}

/* SNS 영역 */
#loginOverlay .sns-con{margin-top:22px;}
#loginOverlay .sns-con > div:first-child{
	display:flex; align-items:center; gap:10px;
	color:var(--lg-muted); font-size:12px; margin-bottom:14px;
}
#loginOverlay .sns-con > div:first-child::before,
#loginOverlay .sns-con > div:first-child::after{content:""; flex:1; height:1px; background:var(--lg-line);}
#loginOverlay .sns-img-con{display:flex; justify-content:center; gap:14px;}
#loginOverlay .sns-img-con img{cursor:pointer; width:44px; height:44px; border-radius:50%;}

/* 캡차 */
#loginOverlay #captcha_box canvas{max-width:100%;}

/* 반응형 */
@media(max-width:820px){
	#loginOverlay{grid-template-columns:1fr;}
	#loginOverlay .lhero{display:none;}
}