:root {
  --primary: #0077C0;
  --strong: #005B96;
  --line: #cfe7f5;
  --text: #17324D;
  --muted: #59758d;
  --danger: #d93025;
  --shadow: 0 18px 50px rgba(23, 50, 77, .14);
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); }
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 24px;
  padding-top: clamp(118px, 16vh, 160px);
  background: linear-gradient(135deg, #EAF5FC 0%, #f8fbfd 100%);
}
.login-wrap { position: relative; width: min(420px, 100%); }
.login-logo {
  position: absolute;
  left: 0;
  top: -84px;
  width: 210px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
}
.login-card {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.hidden { display: none; }
.login-card h1 { margin: 0 0 12px; color: var(--strong); font-size: 22px; }
.login-card label { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.login-card input { height: 42px; padding: 0 12px; border: 1px solid #C9DCEB; border-radius: 8px; font: inherit; }
.login-card input:focus { outline: 2px solid rgba(0,119,192,.2); border-color: var(--primary); }
.login-card .remember-id { width: fit-content; display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.login-card .remember-id input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.system-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -2px 0 4px;
  padding: 0;
  border: 0;
}
.login-card .system-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  border: 1px solid #c9dceb;
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.login-card .system-choice:has(input:checked) {
  border-color: var(--primary);
  background: #eaf6fd;
  color: var(--strong);
}
.login-card .system-choice input {
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}
.login-card button { height: 44px; margin-top: 14px; border: 0; border-radius: 8px; color: #fff; background: var(--primary); font-weight: 700; cursor: pointer; }
.login-card button:hover { background: var(--strong); }
.login-card button:disabled { opacity: .6; cursor: wait; }
.login-card .secondary-button {
  margin-top: 0;
  border: 1px solid #b9d4e6;
  color: var(--strong);
  background: #fff;
}
.login-card .secondary-button:hover { background: #f1f8fc; }
.register-card { gap: 7px; }
.register-guide, .password-guide {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.required-mark { color: var(--danger); font-size: 11px; }
.login-error { min-height: 20px; margin: 6px 0 0; color: var(--danger); font-size: 13px; }