/* static/css/login_styles.css */

body {
    display: flex; /* Flexbox를 사용하여 전체 페이지 내용을 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    height: 100vh; /* 뷰포트 높이 전체를 사용 */
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f2f5; /* 배경색 */
}

.login-container {
    background-color: #ffffff; /* 컨테이너 배경색 */
    padding: 40px;
    border-radius: 8px; /* 모서리 둥글게 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    width: 350px;
    max-width: 90%;
}

.login-form {
    display: grid; /* Grid 레이아웃을 사용하여 요소들을 정렬 */
    gap: 15px; /* 요소들 간의 간격 */
}

.form-field {
    display: grid; /* Grid 레이아웃 */
    grid-template-columns: 1fr 2fr; /* 왼쪽과 오른쪽 열의 비율을 1:2로 설정 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px; /* 라벨과 입력 필드 간의 간격 */
}

.form-field label {
    text-align: right; /* 라벨 텍스트를 오른쪽으로 정렬 */
}

.login-button {
    text-align: right; /* 버튼을 오른쪽으로 정렬 */
}

.btn-primary {
    width: 100px; /* 버튼의 너비 설정 */
}