.login-body{display:flex;flex-direction:column;min-height:100vh}
.login-wrap{width:100%;padding:24px 18px;display:grid;place-items:center;flex:1}
.login-card{width:min(440px,100%);padding:38px 34px 30px;animation:pop .8s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}}
.login-logo{display:block;margin:0 auto 22px;max-width:340px}
.login-logo img{width:100%;height:auto;margin:0 auto}
.login-card h1{text-align:center;font-size:1.45rem;letter-spacing:-.01em}
.sub{text-align:center;color:var(--text-2);margin:2px 0 26px;font-weight:500}
.pw{position:relative;display:block}
.pw input{padding-right:48px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:12px;
  background:transparent;color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.eye:hover{background:rgba(120,140,175,.14)}
.eye .slash{opacity:0}
.eye[aria-pressed=true] .slash{opacity:1}
.note{text-align:center;color:var(--text-3);font-size:.76rem;margin-top:18px}
.login-card.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media (max-width:480px){.login-card{padding:28px 20px 24px}}