/* 페이지 전체에 Flexbox 레이아웃 적용 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #23297a;
    /*background-color: #f4f4f4;*/
    flex-direction: column;
}

/* Form 스타일 설정 */
form {
    background-color: #fff;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #23297a;
}


/* Course Information 스타일 */
.course-info {
    text-align: center;
    color: #23297a;
    margin-bottom: 20px;
    font-weight: bold;
}


label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #23297a;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    color: black;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    /*background-color: #007bff;*/
    background-color: #23297a;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
}

input[type="submit"]:hover {
    background-color: #888;
    transform: translateY(-2px);

}

/* Copyright 섹션 스타일링 */
.notice-text {
    font-size: 12px;
    color: #23297a;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Copyright 섹션 스타일링 */
.copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: white;
}

/* 반응형 디자인: 작은 화면에서의 스타일 조정 */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    form {
        padding: 15px;
    }

    .copyright {
        font-size: 10px;
    }
}


.flash {
    display: flex;
    justify-content: center;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 2px;
    text-align: center;
    width: 100%; /* 부모 요소의 너비를 가득 채우도록 설정 */
}

.flash.info {
    color: #23297a;
}

.flash.error {
    color: red;
}

.flash-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}








/* 페이지 전체에 Flexbox 레이아웃 적용 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #23297a;
    flex-direction: column;
}

/* Form 스타일 설정 */
form {
    background-color: #fff;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px; /* Form 간 간격 추가 */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #23297a;
}

.h1_index {
    text-align: center;
    font-size: 85px;
    margin-bottom: 20px;
    color: white;
}

.h2_index {
    text-align: center;
    font-size: 15px;
    margin-top: -30px;
    margin-bottom: 35px;
    margin-left: 5px;
    color: white;
}

.notice_general {
    font-size: 12px;
    color: #23297a;
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 1.5;
    text-align: center;
}

.h1_manager {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: #23297a;
}

.h2_manager {
    font-size: 15px;
    text-align: center;
    /*margin-bottom: 20px;*/
    color: #23297a;
}


.h1_download {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    color: white;
}

.h2_download {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
    color: white;
}



label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #23297a;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    color: black;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #23297a;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 5px; /* 위쪽에 20px 마진 추가 */
    margin-bottom: 5px; /* 아래쪽에 20px 마진 추가 */
    transition: background-color 0.3s, transform 0.2s;
}

input[type="submit"]:hover {
    background-color: #888;
    transform: translateY(-2px);
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
}

/* Copyright 섹션 스타일링 */
.notice-text {
    font-size: 12px;
    color: #23297a;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Copyright 섹션 스타일링 */
.copyright {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: white;
}

/* 반응형 디자인: 작은 화면에서의 스타일 조정 */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    form {
        padding: 15px;
    }

    .copyright {
        font-size: 10px;
    }
}


.flash.info {
    /*background-color: blue;*/
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 2px;
    text-align: center;
}

.flash.error {
    /*background-color: red;*/
    color: red;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 2px;
    text-align: center;
}

.user-id {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: white;
}



/* 툴팁 기본 설정 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    position: fixed;
    background-color: #fff;
    color: #23297a;
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    pointer-events: none;  /* 마우스 이벤트 방지 */
    opacity: 0;
    transition: opacity 0.2s;
}

.password-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.password-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #23297a;
    text-align: center;
}

.password-form input[type="password"] {
    width: 300px;  /* 적당한 너비 설정 */
    padding: 10px;
    margin-bottom: 20px;
    color: black;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;  /* 입력 텍스트도 중앙 정렬 */
}

.password-form input[type="submit"] {
    width: 300px;
    padding: 10px;
    background-color: #23297a;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.password-form input[type="submit"]:hover {
    background-color: #888;
    transform: translateY(-2px);
}



/* Manager Page Layout */
/* 전체 레이아웃 설정 */
.container_manager {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px; /* 컬럼 간 간격 */
}

/* 각 컬럼 스타일 */
.column_manager {
    width: 30%;
    background-color: #fff;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 버튼 스타일 통일 */
button.button_manager,
input[type="submit"].input_manager {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #23297a;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
}

button.button_manager:hover,
input[type="submit"].input_manager:hover {
    background-color: #888;
    transform: translateY(-2px);

}

/* 기존 코스 목록 */
ul.ul_manager {
    list-style: none;
    padding: 0;
}

li.li_manager {
    margin-bottom: 15px;
}

/* 기존 코스 목록 - 버튼을 3등분하여 정렬 */
.course-item {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.course-item span {
    display: block;
    margin-bottom: 10px;
    /*font-weight: bold;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #23297a;
    font-size: 15px;
}

/* 버튼 컨테이너 */
.course-buttons {
    display: flex;
    justify-content: start;
    gap: 10px;  /* 버튼 사이의 간격 */
}


/* 버튼 스타일 수정 */
button.button_wide,
input[type="submit"].button_wide {
    flex: 1;  /* 버튼이 컨테이너 내에서 균등한 폭으로 확장됨 */
    padding: 10px 0;
    font-size: 14px;
    background-color: #23297a;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;  /* padding 포함한 폭 계산 */
    text-align: center;
    min-width: 80px;  /* 최소 폭 설정 */
    transition: background-color 0.3s, transform 0.2s;
}

button.button_wide:hover {
    background-color: #888;
    transform: translateY(-2px);
}
/* 비활성화된 버튼 스타일 */
button.button_wide:disabled {
    background-color: #ddd;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}


.truncate-text {
    display: inline-block;
    max-width: 250px; /* 텍스트 길이 제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


.li_download {
    color: white;
    font-size: 16px;
    padding: 10px 0;
    list-style: none;  /* 리스트 불릿 제거 */
}

.li_download a {
    text-decoration: none;  /* 밑줄 제거 */
    color: white;
    font-weight: bold;
    transition: color 0.3s;
}

.li_download a:hover {
    color: #888;  /* 호버시 밝은 회색으로 변화 */
}

.link_button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #23297a;
    color: white;
    text-decoration: none;
    font-size: 16px;
    border-radius: 2px;
    margin-top: 20px;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
}

.link_button:hover {
    background-color: #888;
    transform: translateY(-2px);  /* 호버 시 살짝 올라가는 효과 */
}

.link_button:active {
    background-color: #1a1f5c;
    transform: translateY(1px);  /* 클릭 시 약간 눌리는 효과 */
}


/* 전체 리스트 스타일 */
.course_list {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    max-width: 800px;
}

/* 각 코스 아이템 스타일 */
.course_item {
    margin-bottom: 20px;
    text-align: center;
}

/* 코스 버튼 스타일 */
.course_button {
    width: 100%;
    padding: 15px;
    background-color: #23297a;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s;
}

.course_button:hover {
    background-color: #888;
    transform: translateY(-2px);
}

.course_button:active {
    background-color: #1a1f5c;
    transform: translateY(1px);
}


/* 전체 컨테이너 스타일 */
.results_container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.results_container form {
    display: flex;
    justify-content: center;
    background-color: transparent;  /* 배경 제거 */
    box-shadow: none;               /* 그림자 제거 */
    padding: 0;                     /* 내부 여백 제거 */
    margin: 0;                      /* 외부 여백 제거 */
}

/* 플래시 메시지 스타일 */
.results {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 14px;
}

/* 성공 메시지 */
.results.success {
    /*background-color: #d4edda;*/
    color: #23297a;
    /*border: 1px solid #c3e6cb;*/
}

/* 에러 메시지 */
.results.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 정보 메시지 */
.results.info {
    background-color: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}

/* 안내 텍스트 스타일 */
.results_info_text {
    font-size: 14px;
    margin-bottom: 30px;
    color: #23297a;
}

/* 리턴 버튼 스타일 */
.results_return_button {
    display: block;
    margin: 0 auto;
    padding: 12px 25px;
    background-color: #23297a;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.results_return_button:hover {
    background-color: #888;
    transform: translateY(-2px);
}

/*.results_return_button:active {*/
/*    background-color: #1a1f5c;*/
/*    transform: translateY(1px);*/
/*}*/