/* 오피스텔 로그인 화면 (B안 다크 무드) */
[hidden]		{ display:none !important; }

body			{ margin:0; background:#1E55B9; }
a				{ color:#E3F0FF; }
a:hover			{ color:#FFFFFF; }
input::placeholder	{ color:#6B7A99; }
input:focus		{ outline:none; border-color:#7F95FF; box-shadow:0 0 0 3px rgba(127,149,255,.25); }
button:focus-visible, a:focus-visible, input[type=checkbox]:focus-visible { outline:2px solid #A9B8FF; outline-offset:2px; }

.nroot			{ display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,40%); min-height:100vh; position:relative; overflow:hidden;
				  font-family:'IBM Plex Sans KR', 'Malgun Gothic', system-ui, sans-serif; color:#FFFFFF;
				  background:linear-gradient(180deg, #123A8C 0%, #1E55B9 40%, #2D6CD6 72%, #2D6CD6 100%); }
.nglow			{ position:absolute; right:-240px; top:-240px; width:720px; height:720px; border-radius:50%; pointer-events:none;
				  background:radial-gradient(closest-side, rgba(76,147,236,.22), rgba(76,147,236,0)); }

/* 왼쪽 : 그림 + 브랜드 + 문구 */
.nleft			{ position:relative; z-index:0; min-height:100vh; padding:44px 56px 64px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.nphoto			{ position:absolute; top:0; bottom:0; left:0; right:-25%; z-index:-2; background:url(../images/login/night_wide.svg) 47% 42% / cover no-repeat;
				  -webkit-mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,0) 100%); }
.nshade			{ position:absolute; left:0; right:-25%; bottom:0; height:38%; z-index:-1; background:linear-gradient(180deg,rgba(18,52,130,0),rgba(18,52,130,.55));
				  -webkit-mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,0) 100%); }
.nbrand			{ display:flex; align-items:center; gap:12px; }
.nbrand-text	{ display:flex; flex-direction:column; gap:2px; }
.nbrand-name	{ font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.nbrand-sub		{ font-size:10px; letter-spacing:0.3em; color:#D5D7EE; }
.ncopy			{ display:flex; flex-direction:column; gap:14px; max-width:560px; }
.nhead			{ margin:0; font-size:clamp(34px,3.8vw,56px); line-height:1.18; font-weight:700; letter-spacing:-0.03em; }
.nhead span		{ background:linear-gradient(90deg, #9FD2FF, #5FB0FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nsub			{ margin:0; font-size:16px; color:#D5D7EE; }

/* 오른쪽 : 입력 */
.nright			{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px clamp(24px, 5vw, 72px) 32px; box-sizing:border-box; gap:28px; }
.ninner			{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:28px; }
.nlogin			{ margin:0; font-family:'Poppins', 'IBM Plex Sans KR', 'Malgun Gothic', sans-serif; font-size:clamp(44px,4.4vw,64px); line-height:1; font-weight:800; letter-spacing:-0.01em; }
.nform			{ display:flex; flex-direction:column; gap:14px; }
.nsr			{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.nfield			{ position:relative; display:flex; }
.nfield-icon	{ position:absolute; left:16px; top:17px; stroke:#1E3A7B; stroke-width:2.4; }
input::-ms-reveal, input::-ms-clear	{ display:none; }		/* Edge 기본 눈 아이콘이 [비밀번호 보기] 버튼과 겹치지 않도록 */
.ninput			{ flex:1; min-width:0; height:52px; padding:0 16px 0 46px; font:inherit; font-size:15px; color:#1A2B4C; border:1px solid rgba(255,255,255,0.30); border-radius:12px; background:#FFFFFF; box-sizing:border-box; }
/* 브라우저 자동완성이 칸 색을 바꾸지 않도록 항상 흰색 */
.ninput:-webkit-autofill, .ninput:-webkit-autofill:hover, .ninput:-webkit-autofill:focus { -webkit-text-fill-color:#1A2B4C; box-shadow:0 0 0 1000px #FFFFFF inset; }
.ninput.pw		{ padding-right:52px; }
.ninput.err		{ border-color:#E5484D; }
.npwbtn			{ position:absolute; right:4px; top:4px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:#1E3A7B; cursor:pointer; border-radius:8px; }
.npwbtn svg		{ stroke-width:2.4; }
.nerror			{ margin:0; padding:12px 14px; font-size:14px; color:#FFC9C4; background:rgba(229,72,77,0.16); border:1px solid rgba(229,72,77,0.35); border-radius:12px; }
.nopts			{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.nremember		{ display:flex; align-items:center; gap:8px; font-size:14px; color:#E6EEFB; cursor:pointer; min-height:44px; }
.nremember input	{ width:18px; height:18px; margin:0; accent-color:#7F95FF; }
.nforgot		{ font-size:14px; text-decoration:none; font-weight:500; }
.nsubmit		{ height:54px; border:none; border-radius:12px; background:#FFFFFF; color:#1A4FC4; font:inherit; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 12px 30px rgba(8,30,90,.30); }
.nsubmit:disabled	{ background:#DCE8F7; cursor:default; }
.ndiv			{ height:1px; background:rgba(255,255,255,0.12); }
.nhelp			{ margin:0; font-size:13px; color:#D2E0F7; line-height:1.6; border-radius:6px; transition:background-color .3s; }
.nhelp.on		{ background:rgba(255,255,255,0.16); color:#FFFFFF; }
.nfoot			{ width:100%; max-width:400px; margin-top:8px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#D2E0F7; }
.nfoot a		{ color:#D2E0F7; text-decoration:none; }
.nfoot a:hover	{ color:#FFFFFF; }

@media (max-width: 960px) {
	.nroot		{ grid-template-columns:minmax(0,1fr); background:#2D6CD6; }
	.nleft		{ min-height:clamp(260px,38vh,400px); padding:24px 24px 28px; gap:24px; background:linear-gradient(180deg,#123A8C 0%,#2D6CD6 100%); }
	.nhead		{ font-size:clamp(28px,6vw,40px); }
	.nlogin		{ font-size:clamp(36px,8vw,48px); }
	.nphoto		{ right:0; background:url(../images/login/night_narrow.svg) right 4% top 60% / auto 62% no-repeat; -webkit-mask-image:none; mask-image:none; }
	.nglow		{ display:none; }
	.nshade		{ display:none; }
	.nright		{ padding:24px 24px 32px; justify-content:flex-start; }
}
@media (max-width: 600px) {
	.nroot		{ min-height:100svh; }
	.nleft		{ min-height:clamp(200px,32svh,280px); padding:16px 20px; gap:12px; }
	.nphoto		{ background-position:right 6px top 55%; background-size:auto 54%; }
	.nhead		{ font-size:26px; }
	.nsub		{ display:none; }
	.nright		{ padding:12px 20px 16px; }
	.ninner		{ gap:16px; }
	.nlogin		{ font-size:36px; }
	.nform		{ gap:10px; }
	.ninput		{ height:48px; }
	.nfield-icon	{ top:15px; }
	.npwbtn		{ top:2px; }
	.ndiv		{ display:none; }
	.nfoot		{ margin-top:0; }
}