:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #05070a;
  color: #eef3f7;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(19, 88, 146, .20), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(244, 130, 41, .10), transparent 28%),
    linear-gradient(135deg, #04070a 0%, #0c1219 52%, #06090d 100%);
}

.login-wrap {
  display: grid;
  place-items: center;
  width: min(430px, calc(100vw - 48px));
  margin: 24px auto;
}

.login-card { position: relative; width: 100%; max-width: 350px; padding: 42px 38px 38px; border: 1px solid rgba(222, 235, 243, .13); background: linear-gradient(145deg, rgba(231, 240, 246, .075), rgba(231, 240, 246, .025)); box-shadow: 0 24px 58px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045); }
.crop { position: absolute; width: 13px; height: 13px; border-color: rgba(166, 205, 229, .46); }
.crop-tl { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.crop-tr { right: -1px; top: -1px; border-right: 1px solid; border-top: 1px solid; }
.crop-bl { left: -1px; bottom: -1px; border-left: 1px solid; border-bottom: 1px solid; }
.crop-br { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.login-brand { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: -14px 0 12px; padding: 7px 14px; border-radius: 4px; background: rgba(255, 255, 255, .96); }
.login-brand img { display: block; width: 158px; height: auto; }
.login-organization { margin: 0 0 28px; color: rgba(231, 239, 244, .66); text-align: center; font-size: .78rem; font-weight: 650; letter-spacing: -.01em; }
.login-eyebrow { margin: 0 0 12px; color: #f48229; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.login-card h2 { margin: 0; color: #f2f6f9; font-size: 1.38rem; font-weight: 650; letter-spacing: -.025em; }
.login-helper { margin: 8px 0 28px; color: rgba(222, 232, 239, .46); font-size: .78rem; }
.login-card form { display: grid; }
.login-card label { margin: 0 0 8px; color: rgba(226, 235, 241, .58); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login-card input { width: 100%; height: 45px; margin: 0 0 18px; padding: 0 13px; outline: 0; border: 1px solid rgba(218, 232, 241, .13); border-radius: 3px; background: rgba(2, 6, 10, .34); color: #f3f7fa; font: inherit; transition: border-color .2s, box-shadow .2s; }
.login-card input:focus { border-color: rgba(72, 150, 204, .72); box-shadow: 0 0 0 3px rgba(34, 107, 158, .13); }
.login-card button { height: 47px; margin-top: 4px; border: 0; border-radius: 3px; background: linear-gradient(95deg, #0d4c83, #176aa4); color: #fff; font: inherit; font-size: .78rem; font-weight: 720; letter-spacing: .05em; cursor: pointer; box-shadow: 0 12px 30px rgba(8, 67, 113, .27); }
.login-card button:hover { filter: brightness(1.08); }
.alert { margin: -10px 0 18px; padding: 10px 12px; border: 1px solid rgba(244, 130, 41, .24); background: rgba(244, 130, 41, .08); color: #f5c39b; font-size: .75rem; }

@media (max-width: 900px) {
  .login-wrap { width: min(430px, calc(100vw - 32px)); margin: 16px; }
}

@media (max-width: 520px) {
  .login-card { padding: 34px 26px 30px; }
}