@font-face {
  font-family: Pretendard;
  src: url('/assets/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-synthesis: none;
  color: #202421;
  background: #f4f4ef;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 36px 24px;
  line-height: 1.5;
  letter-spacing: -.015em;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible {
  outline: 3px solid #8aa895;
  outline-offset: 4px;
}

.login { width: min(100%, 352px); }
.login-heading { text-align: center; margin-bottom: 38px; }
.login-mascot { display: block; margin: 0 auto 16px; object-fit: contain; image-rendering: pixelated; }
h1 { margin: 0; font-size: 30px; font-weight: 750; line-height: 1.3; letter-spacing: -.045em; }
.password-label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 650; }
.password-field { position: relative; }
.password-field input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  border: 1px solid #cdd3ca;
  border-radius: 11px;
  padding: 14px 74px 14px 16px;
  background: #fffefb;
  color: #202421;
  font-size: 17px;
}
.password-field input:focus { border-color: #52735f; }
.password-field input[aria-invalid='true'] { border-color: #a33c33; }
.password-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 56px;
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  color: #546159;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 44px;
  margin: 10px 0 20px;
  color: #546159;
  font-size: 14px;
  cursor: pointer;
}
.remember-label input { width: 18px; height: 18px; margin: 0; accent-color: #3f6d54; flex: 0 0 18px; }
.submit-button {
  display: block;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 11px;
  padding: 14px 20px;
  background: #3f6d54;
  color: #fffefb;
  font-size: 16px;
  font-weight: 650;
}
.submit-button:disabled { cursor: wait; opacity: .7; }
.login-error, .noscript-message { margin: 12px 0 0; color: #a33c33; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.login-error { min-height: 42px; }
@media (hover: hover) {
  .password-toggle:hover { background: #edf0e9; }
  .submit-button:not(:disabled):hover { background: #335d46; }
}
@media (max-height: 580px) {
  body { padding-block: 24px; }
  .login-heading { margin-bottom: 24px; }
  .login-mascot { width: 88px; height: 88px; margin-bottom: 10px; }
}