/* 2wr.dev palette and type, adapted for the assistant's controls. */
:root {
  --font-sans: Arial, Helvetica, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bg: #f4f8fd;
  --surface: #ffffff;
  --subtle: #edf3fa;
  --muted: #e2edf8;
  --fg: #10243a;
  --fg-muted: #45607d;
  --fg-subtle: #506b87;
  --border: #cedceb;
  --border-strong: #8ba8c6;
  --accent: #0967c5;
  --accent-fg: #ffffff;
  --accent-soft: #dceeff;
  --color-brand-200: #b8e1ff;
  --color-brand-400: #66c5ff;
  --color-brand-500: #25b8ff;
  --color-brand-700: #0967c5;
}
.dark {
  --bg: #060e16;
  --surface: #101e2b;
  --subtle: #0b1620;
  --muted: #162a3d;
  --fg: #f3f6ff;
  --fg-muted: #9fbadd;
  --fg-subtle: #8da9c9;
  --border: #263e56;
  --border-strong: #516f8e;
  --accent: #66c5ff;
  --accent-fg: #061321;
  --accent-soft: #102f4b;
}
body { font-family: var(--font-sans); }
html[lang="ko"] { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ko"] input, html[lang="ko"] textarea { word-break: normal; }
::selection { color: #f3f6ff; background: #145b96; }
input, textarea { caret-color: var(--accent); }
* { scrollbar-color: #3e607f transparent; scrollbar-width: thin; }
.login-shell {
  --bg: #060e16;
  --surface: #0b1826;
  --fg: #f3f6ff;
  --fg-muted: #9fbadd;
  --fg-subtle: #8da9c9;
  --border: #385570;
  --accent: #66c5ff;
  --danger: #ff9eab;
  color-scheme: dark;
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding: 48px 24px;
  color: var(--fg);
  background: radial-gradient(ellipse at 78% 35%, #0b2443 0%, #071523 38%, #060e16 74%);
}
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #060e1680, transparent 65%);
}
.login-panel {
  width: 100%;
  max-width: 400px;
  animation: none;
}
.login-brand { margin-bottom: 42px; }
.login-brand img { width: 64px; height: 64px; border-radius: 16px; }
.login-brand h1 {
  margin-top: 24px;
  color: #f3f6ff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.login-brand p {
  max-width: 100%;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #9fbadd;
  text-wrap: balance;
}
.login-form { display: grid; gap: 14px; }
.login-form > * { margin-block: 0; }
.login-form > label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  clip: auto;
  white-space: normal;
  margin-bottom: -4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #b4cce7;
}
.login-form input {
  height: 54px;
  padding-left: 44px;
  border: 1px solid #516f8e;
  border-radius: 12px;
  background: #0b1826;
  color: #f3f6ff;
  font-size: 15px;
  box-shadow: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.login-form input::placeholder { color: #8da9c9; }
.login-form input:focus-visible {
  border-color: #66c5ff;
  outline: 2px solid #66c5ff;
  outline-offset: 3px;
  box-shadow: none;
}
.login-form input[aria-invalid="true"] { border-color: #ff9eab; }
.login-form .relative > svg { left: 16px; color: #8da9c9; }
.login-form button[type="button"] { color: #9fbadd; }
.login-form button[type="button"]:hover { color: #f3f6ff; background: #19314a; }
.login-form button[type="submit"] {
  height: 54px;
  margin-top: 4px;
  border: 1px solid #2a98f6;
  border-radius: 12px;
  background: linear-gradient(135deg, #0875db, #0059c6);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
  transition: border-color 150ms ease, filter 150ms ease;
}
.login-form button[type="submit"]:hover:not(:disabled) { background: linear-gradient(135deg, #096bcb, #0059c6); border-color: #66c5ff; }
.login-form button[type="submit"]:disabled { opacity: 1; background: linear-gradient(135deg, #104e86, #0a3f77); border-color: #306796; color: #b8d8f6; }
.login-form button:focus-visible { outline: 2px solid #66c5ff; outline-offset: 4px; }
.login-form [role="alert"] { color: #ff9eab; line-height: 1.65; }
@media (max-width: 480px) {
  .login-shell { padding: 36px 28px; background: radial-gradient(ellipse at 85% 20%, #0b2443, #060e16 75%); }
  .login-brand { margin-bottom: 36px; }
  .login-brand h1 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-form input, .login-form button { transition: none; }
}