/* Stable, accessible staff login surface. */
body.staff-login {
  min-height: 100dvh;
  overflow: auto;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
}

body.staff-login .bg { position: fixed; z-index: -1; }

body.staff-login .wrap {
  width: min(100%, 420px);
  margin: auto;
  padding: clamp(24px, 5vw, 40px);
}

body.staff-login .logo { margin-bottom: 26px; }
body.staff-login .lang-switch { margin: -10px 0 22px; }
body.staff-login input,
body.staff-login .btn { min-height: 48px; }
body.staff-login .pw-wrap input { padding-inline-start: 54px; }
body.staff-login .pw-eye { width: 44px; height: 44px; left: 3px; }
html[dir="ltr"] body.staff-login .pw-wrap input { padding-left: 15px; padding-right: 54px; }
html[dir="ltr"] body.staff-login .pw-eye { left: auto; right: 3px; }
body.staff-login .login-help-toggle { min-height: 44px; padding: 0 4px; }

@media (max-height: 680px) {
  body.staff-login { align-items: flex-start; }
  body.staff-login .wrap { margin-block: 20px; }
  body.staff-login .logo { margin-bottom: 20px; }
  body.staff-login .logo-img { width: 60px; height: 60px; margin-bottom: 10px; }
}

@media (max-width: 390px) {
  body.staff-login { padding-inline: 12px; }
  body.staff-login .wrap { border-radius: 18px; padding: 24px 18px; }
}