/* 로그인 화면 세로 중앙 정렬
   elastic 기본값은 #logo 와 #login-form 각각에 vh 기반 top 오프셋을 주고
   컨테이너는 일반 블록이라 내용이 화면 위쪽으로 쏠린다.
   컨테이너를 flex 로 바꾸고 두 오프셋을 모두 해제해 수직·수평 중앙에 놓는다. */
.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.task-login #logo {
    top: 0;                  /* elastic 의 16vh 해제 */
    margin-bottom: 1.75rem;
    flex: 0 0 auto;
}

.task-login #login-form {
    top: 0;                  /* elastic 의 vh 오프셋 해제 */
    flex: 0 0 auto;
}

/* 화면이 짧으면 위에서부터 흐르게 해 내용이 잘리지 않도록 */
@media (max-height: 560px) {
    .task-login #layout-content {
        justify-content: flex-start;
        padding-top: 2rem;
    }
    .task-login #logo { margin-bottom: 1rem; }
}