/* 로그인 — 독립 페이지(base.html 미사용). gdi.css 와 동일 토큰을 최소로 복제한다. */
:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --border: #e2e5ea; --border-strong: #c9ced6;
  --text: #1b2130; --text-2: #46505f; --text-3: #6b7280; --text-4: #98a0ad;
  --accent: #5b63c7; --accent-hover: #4a52b0; --accent-bg: #eef0f9;
  --crit: #b5484f; --crit-bg: #f8eef0; --high: #a8782a; --high-bg: #f8f2e7;
  --radius: 6px; --radius-lg: 8px;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-xl: 20px;
  --font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: var(--fs); line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
.login-page { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 28px 24px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-brand img { height: 28px; width: auto; display: block; }
.login-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.login-brand-text b { font-size: var(--fs); font-weight: 700; }
.login-brand-text span { font-size: var(--fs-xs); color: var(--text-3); }
.login-title { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 2px; }
.login-sub { margin: 0 0 18px; font-size: var(--fs-sm); color: var(--text-3); }
.login-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); margin-bottom: 14px; }
.login-note i { margin-top: 2px; color: var(--text-3); }
.login-note.is-danger { background: var(--crit-bg); border-color: transparent; } .login-note.is-danger i { color: var(--crit); }
.login-note.is-danger i { color: var(--crit); }
.login-note.is-warn { background: var(--high-bg); border-color: transparent; } .login-note.is-warn i { color: var(--high); }
.login-note.is-warn i { color: var(--high); }
.login-note b { color: var(--text); }
.login-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.login-field label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.login-field input { height: 36px; padding: 0 10px; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); width: 100%; }
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; }
.login-field input::placeholder { color: var(--text-4); }
.login-pw { position: relative; }
.login-pw input { padding-right: 38px; }
.login-pw-toggle { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-3); border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.login-pw-toggle:hover { background: var(--surface-2); color: var(--text); }
.login-btn { width: 100%; height: 38px; margin-top: 6px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: #fff; font: inherit; font-size: var(--fs); font-weight: 600; cursor: pointer; }
.login-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.login-btn:focus-visible, .login-pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-foot { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-4); text-align: center; }