/* 폰트 */
@import url('../fonts/Pretendard-1.3.9/pretendard.css');

@font-face {
    font-family: 'Jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 대표색 지정 */
:root {
    --rprsn-color: #00A2E8;
    --secondary-color: #D3E5EF;
    --warn-color: #ff735b;
    --orange-color: #f5aa07;
    --title-bgc: #EFEFEF;
}

/* 공통적용 */
body { font-size: 16px; }
body * {
    font-family: 'Pretendard', sans-serif;
    color: #333;
}

p, h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
a { text-decoration-line: none; color: #333; }
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus {
    border-color: var(--rprsn-color);
    outline: 0;
    box-shadow: 0 0 0 3px var(--secondary-color);
}
select:focus { outline: 0; }
.form-control:focus, .form-select:focus {box-shadow: none !important;}

/* 대표색 */
.rprsn-color { color: var(--rprsn-color); }
.rprsn-bg-color { background-color: var(--rprsn-color); }
.rprsn-border-color { border-color: var(--rprsn-color); }
.secondary-bg-color { background-color: var(--secondary-color); }
.warn-color { color: var(--warn-color); }
.orange-color { color: var(--orange-color); }

/* 폰트 색 */
.color-000 { color: #000; }
.color-333 { color: #333; }
.color-666 { color: #666; }
.color-999 { color: #999; }

/* 배경 색 */
.gbc-EF { background-color: var(--title-bgc);}

/* 버튼 스타일 */
button {
    transition: .2s ease;
}
[class*="btn-square"] {
    color: #333;
    font-weight: 500;
    line-height: 1;
    border-radius: 5px;
    border: none;
}
.btn-square-base {
    height: 37px;
    padding: 0 15px;
}
.btn-square-sm {
    height: 29px;
    padding: 0 8px;
}
.btn-square-base:hover, .btn-square-sm:hover {
    background-color: #e0e0e0;
}
.btn-border-base {
    color: #666;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid #999;
}
.btn-radius-base {
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid ;
    background-color: #fff;
}
.btn-radius-sm {
    padding: 3px 15px;
    border-radius: 50px;
    border: 1px solid ;
    background-color: #fff;
}
.del-btn {
    background-color: #FFE2DD;
    border: none;
}

.orange-btn {
    color: #fff;
    background-color: #f5aa07;
    border: none;
}

.btn-radius-base.rprsn-color:hover, .btn-radius-sm.rprsn-color:hover {
    color: #fff;
    background-color: var(--rprsn-color);
}

.btn-radius-base.color-666:hover, .btn-radius-sm.color-666:hover {
    color: #fff;
    background-color: #666;
}

.btn-radius-base.warn-color:hover, .btn-radius-sm.warn-color:hover {
    color: #fff;
    background-color: var(--warn-color);
}
.btn-radius-base.orange-color:hover, .btn-radius-sm.orange-color:hover {
    color: #fff;
    background-color: var(--orange-color);
}
.rprsn-color-btn {
    color: #fff;
    background-color: var(--rprsn-color);
}
.rprsn-color-btn:hover {
    color: #333;
    background-color: var(--secondary-color);
}
.orange-btn:hover {
    background-color: #e29b00;
}

/* 공통 레이아웃 */
.common-layout {
    padding: 50px;
}

.common-nav-layout {
    position: relative;
    padding: 25px 245px 100px 245px;
}

/* flex */
.flex {
    display: flex;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-x-right {
    display: flex;
    justify-content: right;
}
.flex-x-between {
    display: flex;
    justify-content: space-between;
}
.flex-y-center {
    display: flex;
    align-items: center;
}
.flex-y-end {
    display: flex;
    align-items: end;
}
.flex-y-start {
    display: flex;
    align-items: start;
}
.flex-center-end {
    display: flex;
    justify-content: center;
    align-items: end;
}
.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

/* grid */
.gridCol_1_3 {
    grid-column: 1 / 3;
}
.gridCol_1_4 {
    grid-column: 1 / 4;
}
.gridCol_1_5 {
    grid-column: 1 / 5;
}
.gridCol_2_5 {
    grid-column: 2 / 5;
}

/* position */
.relative {
    position: relative;
}

/* 공통 리스트 */
.square-border{
    font-size: 18px;
    border: 2px solid black;
}
.title-header {
    text-align: center;
    margin-bottom: 30px;
}
.subtitle-header {
    gap: 10px;
    margin: 20px;
}
.category-header {
    gap: 10px;
    margin-top: 20px;
}
.title-font {
    font-weight: 700;
    font-size: 24px;
}
.subheading-font {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px;
}
.subtitle-font {
    font-weight: 700;
    font-size: 22px;
}
.body-font{
    margin-left: 2%;
    font-weight: 500;
    font-size: auto;
}
.th-font{
    font-weight: 600;
    font-size: auto;
}
.list-header {
    gap: 10px;
    margin-bottom: 15px;
}
.common-table-box {
    width: 100%;
    min-height: 711px;
    /* border-bottom: 1px solid #d9d9d9; */
    overflow-x: auto;
    overflow-y: visible;
}
.common-table {
    width: 100%;
    min-width: 1800px;
}
.common-table * {
    text-align: center;
}
.common-table input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 6px;
    cursor: pointer;
}
.common-table thead th {
    font-weight: 500;
    background-color: var(--title-bgc);
    height: 74px;
}
.common-table thead th:first-child {
    border-radius: 10px 0 0 10px;
}
.common-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}
.common-table tbody td {
    font-weight: 500;
    word-break: keep-all;
    padding: 15px 0;
    border-bottom: 1px solid #D9D9D9;
    cursor: pointer;
}
.common-table tbody td:last-child {
    border-right: 0;
}
.common-table .attendanc-status {
    height: 100%;
    margin-bottom: 10px;
    gap: 4px
}
.common-table .attendanc-status p {
    padding: 2px 5px;
    border-radius: 5px
}
.attendanc-status-val {
    line-height: 1;
}
.common-table .attendanc-status .att1,
.common-table .attendanc-status .att3,
.m-student-list .att1,
.m-student-list .att3 {
    background-color: #DBEDDB;
}
.common-table .attendanc-status .att2,
.common-table .attendanc-status .att6,
.m-student-list .att2,
.m-student-list .att6 {
    background-color: #666666;
    color: #fff;
}
.common-table .attendanc-status .att4,
.m-student-list .att4 {
    background-color: #FFE2DD;
    color: #F81F1F;
}
.common-table .attendanc-status .att5,
.m-student-list .att5 {
    background-color: #FDECC8;
}
.width-2 { width: 2%; }
.width-3 { width: 3%; }
.width-4 { width: 4%; }
.width-5 { width: 5%; }
.width-6 { width: 6%; }
.width-8 { width: 8%; }
.width-10 { width: 10%; }
.width-11 { width: 11%; }
.width-12 { width: 12%; }
.width-15 { width: 15%; }
.width-14 { width: 14%; }
.width-16 { width: 16%; }
.width-18 { width: 18%; }
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-55 { width: 55%; }
.width-60 { width: 60%; }
.width-65 { width: 65%; }
.width-70 { width: 70%; }
.width-75 { width: 75%; }

/* 페이징 */
.paging-box {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.paging-box > div,
#pageNumbers > div {
    color: #999;
    font-weight: 500;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.paging-box .pagin-num {
    border-radius: 50%;
    transition: .2s ease;
}
.paging-box .pagin-num:hover,
#pageNumbers > div:hover {
    background-color: var(--secondary-color);
}
.paging-box .pagin-num.action,
#pageNumbers > div.action {
    color: #fff;
    background-color: var(--rprsn-color);
}
#pageNumbers {
    width: max-content;
    display: flex;
    gap: 5px;
}

/* 공통 사이드메뉴 */
.fix_sideMenu {
    background-color: #fff;
    position: fixed;
    left: 40px;
}
.fix_sideMenu > div {
    color: #999;
    padding: 13px 58px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #999;
    transition: .2s ease;
    cursor: pointer;
}
.fix_sideMenu > div:hover, .fix_sideMenu > div.action {
    color: #fff;
    background-color: var(--rprsn-color);
    border-color: var(--rprsn-color);
}

/* 공통 모달 */
.modal-dialog-scrollable .modal-content {
    overflow: auto;
}

/* 공통 input 타이틀 */
.input_title {
    font-weight: 600;
}

/* 공통 input 체크박스 */
.modal input[type="checkbox"] {
    width: 17px;
    height: 17px !important;
    vertical-align: middle;
    cursor: pointer;
}

.form-check-input {
    width: 17px;
    height: 17px;
    border: 1px solid #d9d9d9 !important;
}

.form-check-input:checked {
    background-color: var(--rprsn-color);
    border-color: var(--rprsn-color) !important;
}

.form-check-input:focus {
    box-shadow: none;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.text-left {
    text-align: left !important;
}

.loading-spinner {
    background: #00000019;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.none-data {
    padding: 15px 0;
    text-align: center;
}

.show-480-block {
    display: none;
}

/* 메시지 alret */
#msgAlert {
    font-weight: 600;
    max-width: 300px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 12px -2px #999;
    /* -webkit-box-shadow: 5px 5px 10px 2px #999;
    -moz-box-shadow: 5px 5px 10px 2px #999; */
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

#msgAlertHeader {
    color: #fff;
    text-align: center;
    width: 100%;
    height: 40px;
    border-radius: 10px 10px 0 0;
}
#msgAlertHeader.success {
    background-color: var(--rprsn-color);
}

#msgAlertHeader.error {
    background-color: var(--warn-color);
}
#msgAlertHeader.alarm {
    background-color: #999;
}

#msgAlertBody {
    color: #333;
    padding: 20px 30px;
}

/*-----------------------미디어쿼리-----------------------*/
@media screen and (max-width: 1900px) {
    .common-nav-layout {
        padding-right: 50px;
    }
    
}

@media screen and (max-width: 480px) {
    .common-layout {
        padding: 20px;
    }

    .hide-480 {
        display: none;
    }

    .show-480-block {
        display: block;
    }
    
}