/* 로그인 페이지 전체 스타일 */
.login-page {margin: 0;height: 100vh;display: flex;justify-content: center; /* 수평 정렬 */align-items: center;    /* 수직 정렬 */background-color: #f5f5f5; /* 배경 색상 */}
/* 로그인 대시보드 컨테이너 */
.login-dashboard {display: flex;width: 80%;max-width: 1200px;background-color: #fff;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 추가 */border-radius: 10px; /* 모서리 둥글게 */}
/* 로그인 섹션 스타일 */
.login-section {width: 50%;padding: 100px;display: flex;flex-direction: column;justify-content: center;text-align: center;}
.message-section {width: 50%;padding: 0; display: flex; flex-direction: column;justify-content: center;text-align: center;}
/* 로그인 섹션 안의 요소 스타일 */
.login-section h2 {color: #333;font-size: 30px;margin-bottom: 20px;text-align: left; /* 왼쪽 정렬 */}
.login-section form label {display: block;margin-bottom: 5px;color: #9fa0a0;text-align: left; /* 왼쪽 정렬 */font-size: 16px;}
.login-section form input {width: 100%;padding: 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;}
.login-section button {width: 100%;max-width: 300px;padding: 10px;background-color: #a4243b;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer; font-weight: bold;}
.login-section button:hover {background-color: #7d1c2e;}
/* 추가 링크 스타일 */.extra-links {text-align: center;font-size: 14px;margin-top: 10px;}
.extra-links a {color: #000;text-decoration: none;}
.extra-links a:hover {text-decoration: underline;}
/* 메시지 섹션 안의 요소 스타일 */
.message-content {max-width: 600px; background-color: #f4f4f4;}
.message-content .logo {width: 100%;}

/* ---- 미디어 쿼리 ---- */
@media (max-width: 768px) {
    .login-dashboard {flex-direction: column; /* 세로 정렬 */width: 90%; /* 더 좁게 */}
    .login-section {width: 100%; /* 로그인 섹션만 표시 */padding: 20px; /* 모바일에서는 더 작은 여백 */}
    .message-section {display: none; /* 메시지 섹션 숨기기 */}
    .login-section h2 {color: #333;font-size: 20px;margin-bottom: 10px;text-align: left; /* 왼쪽 정렬 */}
}
/* 로그인 페이지 끝 */




.flash-messages {
    margin: 10px 0;
}

.flash-message {
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.flash-message.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.flash-message.danger {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.flash-message.warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
}











/* 공통 스타일 */

h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* 등록 페이지 레이아웃 */
.register-dashboard {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e9ecef;
}

.register-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 30%;
    max-width: 90%;
    box-sizing: border-box;
}

label {
    font-weight: bold;
    margin-top: 10px;
    display: block;
    color: #555;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
input[type="file"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

button:hover {
    background-color: #0056b3;
}

/* 오류 메시지 */
#error {
    color: #007bff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

/* 비밀번호 확인 메시지 */
#password_message {
    font-size: 12px;
    color: #007bff;
    display: block;
    margin-top: -15px;
    margin-bottom: 10px;
}

/* 이메일 도메인 선택 */
div[style*="display: flex; align-items: center;"] {
    display: flex;
    align-items: center;
    gap: 5px;
}

#custom_email_domain {
    margin-left: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 50%;
}

/* 반응형 */
@media screen and (max-width: 600px) {
    .register-section {
        width: 100%;
        padding: 20px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    input[type="file"] {
        font-size: 14px;
    }

    button {
        font-size: 14px;
    }
}







/* 이용자 등록 완료 페이지 시작 */
.completed-page {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #f5f5f5;}
/* 컨테이너 스타일 */
.completed-dashboard {display: flex;flex-direction: column;width: 100%;max-width: 600px;background-color: #fff;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;padding: 30px;text-align: center;}
/* 제목 스타일 */
.completed-section h2 {font-size: 24px;color: #333;margin-bottom: 20px;}
/* 본문 텍스트 스타일 */
.completed-section p {font-size: 16px;color: #555;margin-bottom: 15px;line-height: 1.5;}
/* 버튼 스타일 */
.completed-section button {width: 100%;max-width: 200px;padding: 10px;background-color: #a4243b;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;}
.completed-section button:hover {background-color: #7d1c2e;}

/* 반응형 디자인 */
@media (max-width: 480px) {
    .completed-dashboard {padding: 15px 20px; /* 더 작은 패딩 */max-width: 90%; /* 화면 너비에 맞게 조정 */}
    .completed-section h2 {font-size: 18px; /* 제목 폰트 크기 줄임 */}
    .completed-section p {font-size: 13px; /* 본문 폰트 크기 줄임 */}
    .completed-section button {font-size: 14px; /* 버튼 폰트 크기 줄임 */padding: 8px; /* 버튼 패딩 줄임 */}
}
/* 이용자 등록 완료 페이지 끝 */