/* 사용자 로그인 페이지 스타일 — 네이비/블루 톤앤매너, 브랜드마크·폼·보안문구 (WF-8) */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('/assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}
:root{
  --navy:#16305C; --navy-d:#0F2344; --navy-l:#24457E;
  --blue:#2E5AA8; --blue-bg:#EEF3FB; --blue-bd:#C9D8EE;
  --ink:#1C2432; --sub:#5B6472; --line:#DDE2EA; --line-d:#C4CBD6;
  --bg:#F2F4F8; --card:#FFFFFF; --red:#C8393B; --red-bg:#FBEDED;
  --shadow:0 1px 3px rgba(22,48,92,.08),0 14px 44px rgba(22,48,92,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink); letter-spacing:-.01em; min-height:100vh;
}

.login-shell{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:36px 16px;
}
/* 상단 네이비→블루 그라데이션 배경 밴드 */
.login-shell::before{
  content:''; position:fixed; left:0; right:0; top:0; height:232px; z-index:-1;
  background:linear-gradient(160deg,var(--navy) 0%,var(--blue) 100%);
}

.login-card{
  width:100%; max-width:420px; background:var(--card);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:34px 32px 26px;
}

.brand{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.brand-mark{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 70%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:23px; position:relative; overflow:hidden;
}
.brand-mark::after{
  content:''; position:absolute; right:-9px; bottom:-9px;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18);
}
.brand-txt small{display:block; font-size:11.5px; color:var(--sub); font-weight:600; letter-spacing:.02em}
.brand-txt strong{display:block; font-size:20px; color:var(--navy); font-weight:800; line-height:1.3}
.brand-txt .brand-sub{display:block; font-size:12.5px; color:var(--sub); font-weight:600; margin-top:1px}

.net-badge{
  display:inline-block; background:var(--navy); color:#fff;
  font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:20px;
  letter-spacing:.03em; margin-bottom:22px;
}

.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12.5px; font-weight:700; color:var(--ink)}
.field input{
  height:44px; padding:0 13px; border:1px solid var(--line-d); border-radius:9px;
  font-size:14px; color:var(--ink); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,90,168,.14)}
::placeholder{color:#9AA3B0}

.btn-p{
  height:46px; border:none; border-radius:9px; background:var(--navy); color:#fff;
  font-size:15px; font-weight:700; margin-top:4px; transition:background .15s;
}
.btn-p:hover{background:var(--navy-l)}
.btn-p:disabled{background:#98A3B6; cursor:not-allowed}

.msg{
  font-size:12.5px; font-weight:600; color:var(--red);
  background:var(--red-bg); border:1px solid #F1C9CA; border-radius:8px; padding:9px 12px; line-height:1.5;
}
.hint{font-size:11.5px; color:var(--sub); margin-top:-4px}
.change-guide{
  font-size:12.5px; color:var(--navy); line-height:1.6;
  background:var(--blue-bg); border:1px solid var(--blue-bd); border-radius:8px; padding:11px 13px;
}

.security-note{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--sub); line-height:1.6; text-align:center;
}

.login-foot{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; color:#8A93A2; text-align:center; line-height:1.6;
}

@media(max-width:480px){
  .login-card{padding:28px 22px}
  .brand-txt strong{font-size:18px}
}