.login-container {
    /* 화면 높이가 남을 경우 영역을 확장하여 푸터를 아래로 밀어냄 */
    flex-grow: 1;
    /* 로그인 박스 제거를 위해 Flex 모드 켜기 */
    display: flex;
    /* 가로축 중앙 정렬 */
    justify-content: center;
    /* 세로축 중앙 정렬 */
    align-items: center;
    /* 배경색: 연한 회색 */
    background-color: #f4f4f4;
    padding: 20px;
}

/* 배경에 그림자 추가 */
.login-box {
    background: #fff;
    /* 모서리 둥글게 */
    border-radius: 8px;
    /* 그림자 효과: X축0, Y축4px, 흐림12px, 투명도 0.1 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 내부 여백 */
    padding: 30px;
    /* 반응형: 기본적으로 100%지만, 최대 400px까지만 커짐 */
    width: 100%;
    max-width: 400px;
    /* 내부 텍스트 가운데 정렬 */
    text-align: center;
}

/* 로고 */
.login-logo h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

/* 입력 폼 */
.login-form .input-group {
    margin-bottom: 15px;
    /* 입력 필드 글자 왼쪽 정렬 */
    text-align: left;
}

/* 라벨 스타일 */
.login-form .input-group label {
    /* 블록 요소로 만들어 줄바꿈 처리 */
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* 입력 필드 스타일 */
.login-form .input-group input {
    /* 부모 너비에 꽉 차게 */
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

/* 로그인 버튼 스타일 */
.btn-login {
    width: 100%;
    padding: 12px;
    background: #007bff;
    /* 파란색 */
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    /* 마우스를 올렸을 때 클릭 가능한 손가락 모양으로 변경 */
    cursor: pointer;
    margin-top: 10px;
}

/* 소셜 로그인 구분선 */
.social-login .divider {
    margin: 20px 0;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 10px;
    /* 글자와 선 사이 간격 */
}

/* 글자 양옆의 선 그리기 */
.social-login .divider::before,
.social-login .divider::after {
    content: '';
    /* 가상 요소 필수 속성 */
    flex-grow: 1;
    /* 남은 공간을 선이 채움 */
    height: 1px;
    /* 선 두께 */
    background: #ddd;
    /* 선 색상 */
}

/* 카카오 로그인 버튼 */
.btn-kakao {
    width: 100%;
    padding: 12px;
    background: #FEE500;
    /* 카카오 공식 노란색 */
    color: #3C1E1E;
    /* 카카오 공식 갈색 폰트 */
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    /* 아이콘과 텍스트 정렬을 위한 Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* 아이콘과 글자 사이 간격 */
}

/* 카카오 로고 이미지 크기 조절 */
.btn-kakao img {
    height: 20px;
}

/* 회원가입 & 비밀번호 찾기 */
.login-links {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #777;
}

.login-links a {
    color: #555;
    text-decoration: none;
    /* 기본 밑줄 제거 */
    font-weight: bold;
}

/* 링크 위에 마우스 올렸을 때 */
.login-links a:hover {
    text-decoration: underline;
    /* 밑줄 생김 */
}

/* 링크 사이의 구분자 (|) 간격 */
.login-links span {
    margin: 0 10px;
}