/* static/css/login.css */

#login_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 화면 높이 전체 사용 */
    background-color: #141414;
    padding: 20px;
    box-sizing: border-box; /* padding이 너비/높이에 포함되도록 */
}

.login_container {
    background-color: #222;
    border-radius: 10px;
    padding: 30px 40px; /* 패딩 조정 */
    width: 100%;
    max-width: 420px; /* 최대 너비 약간 늘림 */
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */
}

.login_logo {
    display: block;
    margin-bottom: 25px; /* 간격 조정 */
}

.login_logo img {
    height: 35px; /* 로고 크기 유지 */
}

.login_container h2 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.8em; /* 기존 20px에서 크기 조정 */
    font-weight: 500; /* 폰트 굵기 */
}

.input_group {
    margin-bottom: 18px; /* 입력 필드 간 간격 조정 */
    text-align: left; /* 라벨과 입력 필드 왼쪽 정렬 */
}

.input_group label {
    display: block;
    color: #b0b0b0; /* 라벨 색상 약간 밝게 */
    margin-bottom: 8px;
    font-size: 0.85em; /* 라벨 폰트 크기 */
    font-weight: 500;
}

.input_text {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #444; /* 테두리 추가 */
    border-radius: 5px;
    background-color: #2d2d2d; /* 입력 필드 배경색 약간 밝게 */
    color: #fff;
    box-sizing: border-box;
    font-size: 0.95em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input_text:focus {
    border-color: #ff2859; /* 포커스 시 테두리 색상 변경 */
    box-shadow: 0 0 0 2px rgba(255, 40, 89, 0.3); /* 포커스 시 그림자 효과 */
    outline: none;
}


.btn_login { /* 기본 로그인 버튼 */
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    background-color: #ff2859;
    color: #fff;
    font-weight: bold;
    font-size: 1em; /* 폰트 크기 조정 */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 10px; /* 위 요소와의 간격 */
}

.btn_login:hover {
    background-color: #e0224e; /* 호버 시 색상 약간 어둡게 */
    transform: translateY(-1px);
}

.btn_login:active {
    transform: translateY(0px);
    background-color: #c91e45;
}


/* '아이디/비밀번호 함께 입력' 또는 '아이디 먼저 입력' 링크 스타일 */
.login_alternative {
    margin-top: 20px; /* 버튼과의 간격 */
    margin-bottom: 25px; /* 소셜 로그인 섹션과의 간격 */
    font-size: 0.85em; /* 폰트 크기 조정 */
    text-align: center;
}

.login_alternative a {
    color: #999; /* 기본 링크 색상 */
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.login_alternative a:hover {
    color: #fff;
    background-color: #333; /* 호버 시 배경색 */
    text-decoration: none;
}

/* 소셜 로그인 섹션 구분선 및 제목 스타일 */
.social_login_section {
    margin-top: 25px; /* 위 요소와의 간격 */
    padding-top: 25px;
    border-top: 1px solid #444; /* 구분선 색상 */
    text-align: center;
}

.social_login_section h3 {
    color: #bbb; /* 소제목 색상 */
    margin-bottom: 18px; /* 버튼과의 간격 */
    font-size: 0.8em; /* 크기 조정 */
    font-weight: 500; /* 폰트 굵기 */
    text-transform: uppercase;
    letter-spacing: 0.8px; /* 자간 */
}

/* 소셜 로그인 버튼 공통 스타일 */
.btn_social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 15px; /* 패딩 조정 */
    margin-bottom: 10px; /* 버튼 간 간격 */
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    font-size: 0.9em;
    color: #fff;
    box-sizing: border-box;
    text-decoration: none;
}

.btn_social:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn_social:active {
    transform: translateY(0px);
    opacity: 1;
}

.btn_social i {
    margin-right: 10px;
    font-size: 1.1em; /* 아이콘 크기 */
    width: 18px; /* 아이콘 너비 고정 */
    text-align: center;
}

.btn_social_google {
    background-color: #DB4437;
}

.btn_social_meta {
    background-color: #1877F2;
}

/* 하단 유틸리티 링크 (회원가입, 비밀번호 찾기) */
.login_utils {
    margin-top: 25px;
    display: flex;
    justify-content: space-around; /* 링크들을 균등하게 분배 */
    color: #999; /* 기본 링크 색상 */
    font-size: 0.85em; /* 폰트 크기 조정 */
}

.login_utils a {
    color: #999;
    text-decoration: none;
    padding: 5px;
    transition: color 0.2s ease;
}

.login_utils a:hover {
    color: #fff;
    text-decoration: underline;
}


/* 비밀번호 입력 페이지에서 아이디 표시용 */
.username_display_text {
    color: #ccc;
    margin-bottom: 15px;
    text-align: left;
    font-size: 0.95em;
    padding: 8px 0; /* 위아래 패딩 추가 */
    border-bottom: 1px solid #333; /* 하단 구분선 */
}

.username_display_text strong {
    color: #fff;
    font-weight: 600;
}

/* 비밀번호 입력 페이지에서 '아이디 다시 입력' 링크용 */
.back_link {
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.85em;
    text-align: center;
}

.back_link a {
    color: #999;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.back_link a:hover {
    color: #fff;
    background-color: #333;
    text-decoration: none;
}

/* 에러 메시지 스타일 */
.error-message {
    color: #ff4d4d; /* 좀 더 부드러운 빨간색 */
    background-color: rgba(255, 77, 77, 0.1); /* 은은한 배경색 */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 0.9em;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

/* 로그인 페이지 전용 푸터 (필요시 사용) */
.login_footer {
    background-color: #222;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 15px 0; /* 패딩 조정 */
    z-index: 10;
}

.login_footer #footer p { /* 이미 #footer p 스타일이 있지만, 로그인 전용으로 더 작게 할 수 있음 */
    color: #888; /* 더 연한 회색 */
    font-size: 0.75em;
}