@charset "utf-8";

.required {position: relative;}
.required::after {content: "*"; position: absolute; display: inline-block; margin-top: -6px; margin-left: 3px; color: var(--col-red); font-size: inherit;}

/* 테이블 */
.tb-fixed {table-layout: fixed;}
.tb-verti td {text-align: left;}

table tr th,
table tr td {padding: .8rem 1.6rem; border: 1px solid var(--col-bd-gray); text-align: center; word-break: break-all;}
table tr th {background: #EEE; font-family: 'NanumSquareRoundBold';}
table.sm tr th,
table.sm tr td {padding: 1rem;}

table .no-data,
.empty {padding: 8rem 1.6rem;}
.empty {text-align: center; color: var(--col-gray); border: 0 !important;}


/* ============================================================
* 공통
* ============================================================ */
input,
textarea,
select {width: 100%; height: 5rem; padding: 1.6rem 0; color: inherit; background: #fff; border-bottom: 1px solid var(--col-bd-gray); border-radius: 0; font-size: 1.6rem; font-family: 'NanumSquareRoundBold'; font-weight: 500; transition: var(--trans-25);}

/* focus */
input:focus,
textarea:focus {border-color: var(--col-theme);}

/* placeholder */
input::placeholder,
textarea::placeholder {color: var(--col-gray); font-size: 1.4rem; font-weight: 400;}

/* read-only */
input:read-only,
textarea:read-only {background: #F9F9F9; cursor: default;}

/* textarea */
textarea {min-height: 10rem; padding: 1rem;}

@media (hover: hover) and (pointer: fine) {
    input:hover,
    textarea:hover,
    .select:hover select {border-color: var(--col-theme);}

    input:read-only:hover,
    textarea:read-only:hover {border-color: inherit;}
}


/* ============================================================
* input + button(right)
* ============================================================ */
.input-btn {position: relative;}
.input-btn input {padding: 1.6rem 7.4rem 1.6rem 0;}
.input-btn button {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}


/* ============================================================
* input + label(right)
* ============================================================ */
.input-txt {position: relative;}
.input-txt input {padding: 0 3.3rem 0 1rem;}
.input-txt .label {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);}



/* ============================================================
* 체크박스
* ============================================================ */
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {position: absolute; left: -9999px;}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label {position: relative; display: inline-block; padding-left: 30px; font-family: 'NanumSquareRoundExtraBold'; font-weight: 700; font-size: 1.4rem; letter-spacing: 0; line-height: 1.55; user-select: none; cursor: pointer;}

[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {content: ""; position: absolute; top: .1rem; left: 0; width: 2rem; aspect-ratio: 1; border-radius: 50%; transition: var(--trans-25);}


[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {background: #fff; border: 1px solid var(--col-bd-gray);}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {background: var(--col-theme) url("../img/check_wt.svg") center/60% no-repeat;}

[type="checkbox"]:checked + label:before {background: #fff;}
[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
[type="checkbox"]:checked + label:after {opacity: 1;}



/* ============================================================
* 라디오
* ============================================================ */
.radio-wrap {display: flex; justify-content: center; gap: .6rem 3.6rem;}
.radio {display: inline-flex; align-items: center;}
.radio label {font-size: 1.4rem; font-weight: 400; line-height: 1.5rem; padding: 0.2em 0.4em; cursor: pointer;}
.radio [type="radio"], .radio span {vertical-align: middle;}
.radio [type="radio"] {appearance: none; width: 1.5rem; aspect-ratio: 1; background: #fff; border: 3px solid var(--col-gray); border-radius: 50%; transition: var(--trans-25); cursor: pointer;}
.radio [type="radio"]:checked {border-color: var(--col-red);}

.radio span {display: inline-flex; align-items: center; gap: 1rem; font-weight: 500; transition: var(--trans-25);}
.radio [type="radio"]:hover + span {cursor: pointer;}

.radio [type="radio"]:disabled {background-color: var(--col-gray); box-shadow: none; opacity: 0.7; cursor: not-allowed;}
.radio [type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}

@media (hover: hover) and (pointer: fine) {
    .radio:hover [type="radio"] {box-shadow: 0 0 5px 2px rgba(255,51,51,0.5);}
}



/* ============================================================
* 첨부파일
* ============================================================ */
/* 1개 */
.input-file + .input-file {margin-top: .5rem;}
.input-file input[type="file"] {display: none;}
.input-file span {cursor: pointer;}
.input-file .preview-image {max-width: 200px;}

.btn-several-file button {display: inline-flex; justify-content: center; align-items: center; width: 2.6rem; aspect-ratio: 1; border-radius: 50%;}



/* ============================================================
* 토글
* ============================================================ */
.switch input[type=checkbox] {height: 0; width: 0; visibility: hidden;}
.switch [type="checkbox"]:not(:checked) + label:before,
.switch [type="checkbox"]:checked + label:before {display: none;}

.switch [type="checkbox"]:not(:checked) + label,
.switch [type="checkbox"]:checked + label {cursor: pointer; text-indent: -9999px; width: 50px; height: 24px; padding: 0; background: var(--col-bd-gray); border: 1px solid var(--col-bd-gray); display: block; border-radius: 100px;position: relative;}
.switch [type="checkbox"]:not(:checked) + label:after {content: ''; opacity: 1;  position: absolute; top: 3px; left: 5px; width: 16px; aspect-ratio: 1; background: #fff; border: 1px solid var(--col-bd-gray); border-radius: 50%; transition: 0.3s;}

.switch [type="checkbox"]:checked + label {background: var(--col-theme);}
.switch [type="checkbox"]:checked + label:after {top: 3px; left: calc(100% - 5px); width: 16px; aspect-ratio: 1; background: #fff; transform: translateX(-100%);}
.switch label:active:after {width: 130px;}


/* ============================================================
* 검색
* ============================================================ */
.select {position: relative; display: inline-block;}
.select select {width: auto; min-width: 8rem;}

select {display: flex; width: 12rem; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--col-bk); cursor: pointer;}
select::-ms-expand {display: none;}
.select::after {content: ''; position: absolute; top: 0; bottom: 0; right: 0; padding: 0 1em; background: url("../img/select_bk.svg") center/100% no-repeat; cursor: pointer; pointer-events: none;}
select option {background: #fff;}
/*select option[value=""][disabled] {display: none;}*/


/* 검색창 */
.search-area select {height: 5rem; padding: 0 3rem 0 2.4rem;}
.search-area .search {position: relative; display: flex; justify-content: center; align-items: center; gap: 1rem;}
.search-area .search input[type="text"] {height: 38px; padding: 0 62px 0 12px; border-radius: .35rem; background: #161A31; border: 1px solid #081E5B; transition: var(--trans-25);}
.search-area .search button {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 28px; height: 100%; border: 0;}
.search-area .search button .svg_fill {fill: var(--foreground);}
.search-area .search button.btn-reset {right: 3rem; background: url(../public/img/icon_close.png) center/1.6rem no-repeat;}

.search-area .search input[type="text"]:focus {box-shadow: 0 0 1px 1px rgba(255,255,255,0.5);}



/* ============================================================
* input type="date"
* ============================================================ */
input[type="date"] {position: relative; transition: none;}
input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; cursor: pointer;}
input[type="date"]::after {content: ""; position: absolute; top: 50%; right: 1.4rem; transform: translateY(-50%); width: 1.6rem; aspect-ratio: 1; background: url("/img/icon_calendar.svg") center/contain no-repeat; pointer-events: none;}

.date {display: flex; gap: .6rem;}
.btn-reset {height: 4.2rem; aspect-ratio: 1; border: 1px solid var(--col-bd-gray); background: url("/img/rotate_gray.svg") center/1.6rem no-repeat;}



/* ============================================================
* 필터
* ============================================================ */
.filter-item {display: flex; align-items: center; gap: 2rem;}
.filter-item dt {font-weight: 700;}


/* ============================================================
* datepicker
* ============================================================ */
.period {display: flex; align-items: center; gap: 0.4rem;}
.period input {width: 220px; padding: 0 3.5rem 0 6.4rem; cursor: pointer;}

.input-txt-btn {position: relative;}
.input-txt-btn label {position: absolute; top: 50%; left: 1rem; transform: translateY(-50%);}
.input-txt-btn .btn-calender {content: ""; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); cursor: pointer;}


/* ============================================================
* 페이지네이션
* ============================================================ */
.pagination {margin-top: 5rem;}
.pagination ul {display: flex; justify-content: center; align-items: center; gap: .5rem;}
.pagination ul li a {display: flex; justify-content: center; align-items: center; height: 3rem; aspect-ratio: 1; border: 1px solid #eee; background: #eee; font-family: 'NanumSquareRoundBold'; color: var(--col-darkgray); line-height: 1;}
.pagination ul li a.on {border-color: var(--col-theme); background: var(--col-theme); color: var(--col-wt); font-family: 'NanumSquareRoundExtraBold';}

.pagination ul li a.btn_prev,.pagination ul li a.btn_pprev,
.pagination ul li a.btn_next,.pagination ul li a.btn_nnext {margin:0 1px;}
.pagination ul li a.btn_prev {}
.pagination ul li a.btn_prev img {transform: rotate(180deg);}
.pagination ul li a.btn_pprev {}
.pagination ul li a.btn_pprev img {transform: rotate(180deg);}
.pagination ul li a.btn_next {}
.pagination ul li a.btn_next img {}
.pagination ul li a.btn_nnext {}
.pagination ul li a.btn_nnext img {}


/* ============================================================
* 베이직(공지사항) - 목록
* ============================================================ */
.total {margin-bottom: 1rem; font-size: 1.4rem; font-family: 'NanumSquareRoundBold'; font-weight: 500}
.total strong {color: var(--col-theme); font-weight: 700;}

.bd-list li:first-child {border-top: 1px solid var(--col-bd-gray);}
.bd-list li {padding: 2rem 0; border-bottom: 1px solid var(--col-bd-gray);}
.bd-list li .title {display: flex; gap: 1rem; font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.bd-list li .title span {transition: var(--trans-25);}
.bd-list li .title p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; transition: var(--trans-25); line-height: 1.35;}
.bd-list li .content,
.bd-list li .date {color: var(--col-darkgray); font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}

.bd-list li .btm {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}
.bd-list li .state {display: flex; justify-content: center; align-items: center; text-align: center; min-width: 6.6rem; height: 2.6rem; border-radius: 5rem; font-size: 1.2rem;}
.bd-list li .state.ready {background: #ECECEC;}
.bd-list li .state.done {background: var(--col-theme); color: var(--col-wt);}

@media (hover: hover) and (pointer: fine) {
    .bd-list li a:hover .title span,
    .bd-list li a:hover .title p {color: var(--col-theme);}
}


/* ============================================================
* 베이직(공지사항) - 상세
* ============================================================ */
.view-info {margin-bottom: 1.6rem; padding: .8rem 0; border-bottom: 1px solid var(--col-bd-gray);}
.view-info .title {font-family: 'NanumSquareRoundBold'; font-weight: 500;}
.view-info .date {margin-top: .8rem; color: var(--col-darkgray); font-size: 1.4rem;}

.view-content {padding-bottom: 2.4rem; font-size: 1.4rem; line-height: 1.5;}

.view-content .answer {margin-top: 2rem; background: #EFEFEF; padding: 1.4rem; 1.6rem;}
.view-content .answer .label {display: flex; justify-content: center; align-items: center; text-align: center; width: 6.6rem; height: 2.6rem; margin-bottom: 1.4rem; border-radius: 5rem; background: var(--col-theme); color: var(--col-wt); font-size: 1.2rem;}
.view-content .answer .date {margin-top: 1.4rem; color: var(--col-darkgray); font-size: 1.4rem;}

.attached {margin-top: 1.6rem;}
.attached .btn-download + .btn-download {margin-top: 0.5rem;}