@charset "utf-8";

input,
textarea,
select {width: 100%; height: 3.6rem; padding: 2.4rem 2.6rem 2.4rem 2rem; color: inherit; background: none; border: 1px solid #FFFFFF; border-radius: 10rem; font-size: 1.6rem; font-weight: 400; transition: var(--trans-25); position: relative;}

/* placeholder */
input::placeholder,
textarea::placeholder,
.react-select .react-select__placeholder,
select.disabled {color: var(--col-gray); font-size: 1.4rem; font-weight: 300;}

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

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

input:focus,
textarea:focus {background: rgb(15 120 187 / 7%); background: transparent;}


/* 크롬 자동완성 필드 */
input:-webkit-autofill {background-color: #fff !important; transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; color: var(--col-black) !important;}


/* ============================================================
* input + button
* ============================================================ */
.input-btn {position: relative; width: 100%;}
.input-btn button {position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);}



/* ============================================================
* input + text
* ============================================================ */
.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%);}



/* ============================================================
* input[type=number] + 좌우버튼
* ============================================================ */
.input-number {display: flex; align-items: center; gap: 8px;}
.input-number input {width: 5rem; text-align: center;}
.input-number > button {width: 2.2rem; aspect-ratio: 1; border: 1px solid var(--col-bd-gray); color: var(--col-bd-gray); transition: var(--trans-25);}

@media (hover: hover) and (pointer: fine) {
    .input-number > button:hover {border-color: var(--col-theme); color: var(--col-theme);}
}



/* ============================================================
* .number-button : 버튼 제공
* ============================================================ */
.number-button .btn-wrap {display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem;}
.number-button .btn-wrap button {padding: 6px; border: 1px solid var(--col-bd-gray); border-radius: .6rem; transition: var(--trans-25)}

@media (hover: hover) and (pointer: fine) {
    .number-button .btn-wrap button:hover {border-color: var(--col-theme);}
}



/* ============================================================
* 라디오
* ============================================================ */
.radio-align {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 2rem;}
.radio {position: relative;}
.radio [type=radio] {position: absolute; opacity: 0; visibility: hidden; height: 0;}
.radio label {display: inline-block; position: relative; padding-left: 1.9em; line-height: 1; z-index: 9; cursor: pointer; transition: var(--trans-25);}
.radio .radio-check {display: block; position: absolute; border: 0.15em solid var(--col-gray); border-radius: 100%; width: 1.4em; aspect-ratio: 1; top: 50%; left: 0; transform: translateY(-50%); z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear;}
.radio .radio-check::before {display: block; position: absolute; content: ''; border-radius: 100%; width: 100%; aspect-ratio: 1; border: 0.2em solid #fff; background: #fff; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear;}
.radio [type=radio]:checked ~ .radio-check {border-color: var(--col-theme);}
.radio [type=radio]:checked ~ .radio-check::before {background: var(--col-theme);}

.basic-list .content .radio label {padding-left: 1.5em;}
.basic-list .content .radio .radio-check {width: 2rem;}
.basic-list .content input:checked + label {color: var(--col-theme); font-weight: 700;}

.radio.disabled {opacity: 0.5;}
.radio.disabled [type=radio] + label {color: var(--col-gray); cursor: default;}



/* pill */
.pill-align {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: .5rem;}
.pill-align .radio {position: relative;}
.pill-align .radio [type=radio] {position: absolute; opacity: 0; visibility: hidden; height: 0;}
.pill-align .radio label {display: inline-block; position: relative; padding: .8rem 1.4rem 0.7rem; color: #888888; line-height: 1; z-index: 9; cursor: pointer; transition: var(--trans-25);}
.pill-align .radio .radio-check {position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: none; width: auto; aspect-ratio: auto; background: rgba(192,192,192,0.3); border: 1px solid transparent; border-radius: 3.3rem; transition: var(--trans-25);}
.pill-align .radio .radio-check::before {display: none; aspect-ratio: auto; border-color: transparent;}

.pill-align .radio [type=radio]:checked ~ label {color: #fff;}
.pill-align .radio [type=radio]:checked ~ .radio-check {background: #5577FF; border-color: transparent;}



/* ============================================================
* 체크박스
* ============================================================ */
.checkbox-wrap {display: flex; flex-wrap: wrap; gap: 1.2rem;}

.checkbox {position: relative; display: inline-block;}
.checkbox input:checked,
.checkbox input:not(:checked) {position: absolute; left: -9999px;}
.checkbox input:checked + label,
.checkbox input:not(:checked) + label {position: relative; display: inline-block; padding-left: 2.4rem; font-weight: 400; letter-spacing: 0; user-select: none; cursor: pointer;}

.checkbox input:checked + label:before,
.checkbox input:not(:checked) + label:before,
.checkbox input:checked + label:after,
.checkbox input:not(:checked) + label:after {content: ""; position: absolute; top: 0.05rem; left: 0; width: 1.8rem; aspect-ratio: 1; border-radius: .4rem; transition: var(--trans-25);}

.checkbox input:checked + label:before,
.checkbox input:not(:checked) + label:before {border: 1px solid var(--col-bd-gray);}
.checkbox input:checked + label:after,
.checkbox input:not(:checked) + label:after {background-image: url("/img/check_wt.svg"); background-position: 47% 60%; background-size: 60%; background-repeat: no-repeat;}

.checkbox input:checked + label:before {background: var(--col-theme); border-color: var(--col-theme);}
.checkbox input:not(:checked) + label:after {opacity: 0;}
.checkbox input:checked + label:after {opacity: 1;}

.checkbox input:disabled + label {opacity: 0.4; cursor: not-allowed;}


.checkbox.login {font-size: 1.4rem;}
.checkbox.login input:checked + label:after,
.checkbox.login input:not(:checked) + label:after {background-position: 47%;}


/* ============================================================
* 셀렉트
* ============================================================ */
.select-wrap {display: flex; align-items: center; gap: .4rem;}

.select {position: relative; display: inline-flex; line-height: 1; transition: var(--trans-25); overflow: hidden; cursor: pointer;}
.select::after {content: ''; position: absolute; top: 0; bottom: 0; right: 0; padding: 0 1em; background: url("/img/select_gray.svg") center no-repeat; cursor: pointer; pointer-events:none; transition: .25s all ease;}
select {outline:0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
select::-ms-expand {display: none;}
.select select {padding: 6px 33px 6px 12px; border: 1px solid var(--col-bd-gray); border-radius: .6rem; backdrop-filter: none;}
.select option {color: var(--col-black);}


/* react-select */
.react-select {width: 100%;}
.react-select input {height: 3rem;}
.react-select .react-select__indicator-separator {display: none;}
.react-select .react-select__value-container {padding: 0;}

.react-select .react-select__control {min-height: auto; border: 0; text-align: left; cursor: pointer;}
.react-select .react-select__control--is-focused {box-shadow: none;}

.react-select .react-select__menu {left: 0; background: #fff; border: 1px solid #fff; border-radius: 0.4rem; text-align: left; cursor: pointer; z-index: 10;}
.react-select .react-select__option {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.8rem 1.2rem; font-size: 1.2rem; cursor: pointer;}
.react-select .react-select__option--is-focused {background-color: var(--col-theme); color: #fff; cursor: pointer;}



/* ============================================================
* 공통 - 목록화면 상단
* ============================================================ */
.board-top {display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2rem;}
.board-top.right {justify-content: flex-end;}

.board-top .left,
.board-top .right {display: flex; align-items: center;}
.board-top .left {justify-content: flex-start; gap: 3rem;}
.board-top .right {justify-content: flex-end; gap: 1rem;}

.board-top .select select {height: 4rem; font-size: 1.4rem;}

.board-top .icon-date input[type="date"] {height: 4rem; border: 1px solid var(--col-bd-gray);}
.board-top .ant-picker {width: 13rem; height: 4rem;}

/* + 필터 */
.board-filter-top {margin-bottom: 2rem;}
.board-filter-top .top {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}




/* ============================================================
* 검색
* ============================================================ */
/* search 초기화 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {opacity: 0; position: absolute; right: 0;}

/* 검색창 */
.sch_box {display: flex; justify-content: space-between; align-items: center; gap: 2.6rem;}
.search-line {display: flex; align-items: center; gap: .6rem;}
.search-line .select select {height: 4rem;}
.search-line {position: relative;}
.search-line input {width: 20rem; height: 4rem; padding: 0 1rem; border: 1px solid var(--col-bd-gray);}
.search-line input:focus {background: #fff;}

.search-line .btn-search {height: 4rem; aspect-ratio: 1; border-radius: .6rem; border: 1px solid var(--col-bd-gray); background-color: #fff; background-image: url("/img/search_gray.svg"); background-position: center; background-size: 40%; background-repeat: no-repeat;}
.search-line .btn-clear {height: 4rem; aspect-ratio: 1; border-radius: .6rem; border: 1px solid var(--col-bd-gray); background: #fff; color: #c9cbd5; font-size: 1.3rem; transition: var(--trans-25);}

.search-line .search {position: relative;}
.search-line .search input {width: 22rem; padding: 0 2.4em 0 1.4rem;}
.search-line .search button {position: absolute; top: 0; right: 0; bottom: 0; border: 0; background-color: transparent;}

@media (hover: hover) and (pointer: fine) {
    .search-line input:focus,
    .search-line input:hover,
    .search-line .btn-search:hover,
    .search-line .btn-clear:hover {border-color: var(--col-theme);}
}



/* ============================================================
/* 필터
* ============================================================ */
/* 토글 버튼 */
.btn-filter {position: relative; display: inline-block;}
.btn-filter input:checked,
.btn-filter input:not(:checked) {position: absolute; left: -9999px;}
.btn-filter input + label::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; padding: 0 1em; background-image: url("/img/filter_gray.svg"); background-position: center; background-repeat: no-repeat;}
.btn-filter input:checked + label,
.btn-filter input:not(:checked) + label {position: relative; display: inline-flex; justify-content: center; align-items: center; height: 4rem; padding: 0 1rem 0 3rem; border: 1px solid var(--col-bd-gray); border-radius: .6rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; transition: var(--trans-25); user-select: none; cursor: pointer;}

.btn-filter input:checked + label {border-color: var(--col-theme); color: var(--col-theme); font-weight: 700;}
.btn-filter input:checked + label::before {background-image: url("/img/filter_blue.svg"); transform: rotate(180deg);}

/* 필터 아이템 */
.filter-area .filter-item + .filter-item {margin-top: 1.6rem;}
.filter-area .filter-item {display: flex; align-items: center; gap: 2rem;}
.filter-area .filter-item .title {min-width: 6rem; font-weight: 500;}



/* ============================================================
* input type="date" range
* ============================================================ */
/* reset */
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;}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {z-index: -10;}
input[type="date"]::-webkit-input-placeholder {z-index: 99;}
input[type="date"]:placeholder {z-index: 99;}

/* custom */
.icon-date {position: relative; min-width: 19.2rem;}
.icon-date input[type="date"] {padding: 0 2.4em 0 2rem; cursor: pointer;}
.icon-date .icon {position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); width: 3rem; aspect-ratio: 1; background: url("/img/calendar_gray.svg") center/1.4rem no-repeat;}

/* range */
.range-date,
.range-time {position: relative; display: flex; align-items: center; gap: .8rem;}
.ant-picker {height: 3.6rem;}
.ant-picker .ant-picker-input >input::placeholder {color: var(--col-gray); font-size: 1.4rem; font-weight: 300;}
.range-time input {padding: 0 1rem !important; border: 1px solid var(--col-bd-gray); text-align: center;}
.range-time button {flex: 0 0 auto;}

/* date + time */
.range-date-time {position: relative; display: flex; align-items: center; gap: .8rem;}
.range-date-time > div {display: flex; gap: .8rem;}
.range-date-time .timepicker {width: 10rem;}

.toggle-switch {display: flex; gap: .4rem; cursor: pointer;}
.toggle-switch span {user-select: none;}


/* ============================================================
* 목록 - 테이블
* ============================================================ */
table {border-top: 1px solid #fff; border-left: 1px solid #fff;}
table tr {border-bottom: 1px solid #fff;}
table th,
table td {padding: 2.2rem 1rem; border-right: 1px solid #fff; word-break: break-all;}
table th {background: #2A48A9; text-align: center; font-size: 2.4rem; font-weight: 700;}
table td {text-align: center; font-size: 2rem;}

table.sm th,
table.sm td {padding: .8rem 1rem;}
table.sm th {font-size: 2rem;}
table.sm td {font-size: 1.5rem;}

.tb-fixed {table-layout: fixed;}

@media (max-width: 768px) {
    table th,
    table td {padding: .8rem 1rem;}
    table th {font-size: 2rem;}
    table td {font-size: 1.5rem;}
}



/* ============================================================
* 목록 - 리스트
* ============================================================ */
.col-2 {display: flex; flex-wrap: wrap; gap: 1.6rem;}
.col-2 > * {flex: 0 0 calc(50% - 0.8rem);}

.col-2 .basic-list .label {width: 20%}

.basic-list > li {display: flex; background: #fff; border-radius: .4rem;}
.basic-list > li + li {margin-top: 1rem;}

.basic-list .label,
.basic-list .content {padding: 0.7rem 1.4rem;}

.basic-list .label {flex: 0 0 auto; position: relative; display: inline-flex; justify-content: flex-start; align-items: center; gap: .4rem; min-width: 3.3rem; width: 10%; min-height: 5rem;}
.basic-list .label::after {content: ""; position: absolute; top: 2rem; right: 0; width: 1px; height: calc(100% - 4rem); background: var(--col-bd-gray);}
.basic-list.h-color .label {background: #D9F0FF;}
.basic-list.h-color .label::after {display: none;}

.basic-list .label .file {display: inline-block; width: 1.8rem; aspect-ratio: 1; background: url(/img/file.png) center/contain no-repeat;}

.basic-list .content {flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 5rem;}
.boardPage.view .basic-list .content-field {justify-content: flex-start; min-height: 312px; white-space: pre-line;}
.basic-list .content input {padding: 0;}
.basic-list .content textarea {padding: 1.2rem 0;}
.basic-list .content input[type="date"] {padding: 0 3rem 0 0;}



/* ============================================================
* 목록 - 카드
* ============================================================ */
.card-list {display: flex; flex-wrap: wrap; gap: 1.6rem;}
.card-list > li {position: relative; width: calc(25% - 1.2rem); padding: 2rem; border-radius: .4rem; background: #fff; box-shadow: 1.5px 2.89px 3.6px rgba(218,227,233,25%);}
.card-list.btn > li {padding: 0;}
.card-list.btn > li > button {width: 100%; height: 100%; padding: 2rem 1.6rem; border: 1px solid transparent; overflow: hidden; transition: var(--trans-25);}

.card-list > li.empty {display: flex; justify-content: center; align-items: center; text-align: center; width: 100% !important; min-height: 18rem;}

.card-list .cate {text-align: left; font-size: 1.4rem; font-weight: 300;}

.card-list .img {position: relative; width: 100%; aspect-ratio: 328/163; margin-bottom: 1.6rem; /* background: gray; */ border-radius: 0.4rem; overflow: hidden; cursor: pointer;}
.card-list .img img {position: absolute; top: 0; left: 0; right: 0; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .card-list .img:hover img {transform: scale(1.05);}
}

.card-list .title {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem;}
.card-list .title .name {width: 100%; text-align: left; font-size: 2rem; font-weight: 700;}
.card-list .title .name button {width: 100%; text-align: left; transition: var(--trans-25);}

/* 프로젝트 */
.projectPage .card-list .title {margin-bottom: 0;}
.card-list .state-wrap .name {width: calc(100% - 7.6rem - 1rem);}
.projectPage .state,
.FoundationPage .state {display: inline-flex; justify-content: center; align-items: center; text-align: center; min-width: 6.4rem; height: 3rem; padding: 0 .8rem; border-radius: 0.2rem; background: var(--col-theme); border: 1px solid var(--col-theme); color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1;}
.state.bg-purple {background: #261B8E; border-color: #261B8E;} /* 진행중 */
.state.bd-purple {background: #E8E5FF; border-color: #261B8E; color: #261B8E;} /* 관리중 */
.state.bd-red {background: #FFDAD9; border-color: #FF0000; color: #FF0000;} /* 종료 */
.gray .state {background: #C9BBBB;}
@media (hover: hover) and (pointer: fine) {
    .card-list.btn .blue button:hover {border-color: #3480F1;}
    .card-list.btn .orange button:hover {border-color: #FAB04A;}
    .card-list.btn .green button:hover {border-color: #52D6B7;}
    .card-list.btn .gray button:hover {border-color: #C9BBBB;}
}

/* 직원 현황, 문의 내역 */
.card-list .label-wrap .name {width: calc(100% - 7.6rem - 1rem);}
.card-list .label {display: inline-flex; justify-content: center; align-items: center; text-align: center; min-width: 5.6rem; height: 2.6rem; padding: 0 .8rem; border-radius: 0; background: #FFEBEB; border: 1px solid #FF4141; color: #FF4141; font-size: 1.2rem; font-weight: 400; line-height: 1;}
.card-list .label.active {background: #E9F7FF; border: 1px solid var(--col-blue); color: var(--col-blue);}
.card-list .label.done {background: var(--col-theme); border: 1px solid var(--col-theme); color: #fff;}

/* 첨부파일 */
.card-list .file .name {width: calc(100% - 2.5rem - 2rem);}
.card-list .file .icon {flex: 0 0 auto; width: 2.4rem; aspect-ratio: 1; background: url(/img/file.png) center/contain no-repeat;}

/* 내용 */
.card-list .content {text-align: left; font-size: 1.5rem; font-weight: 300; line-height: 1.5;}
.card-list .content-2 {min-height: 4.5rem; text-align: left; font-size: 1.5rem; font-weight: 300; line-height: 1.5;}
.card-list .content dl {display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; font-weight: 600;}
.card-list .content dt {flex: 0 0 auto; margin-top: 0.1rem;}
.card-list .content dd {flex: 1 0 0; max-width: 80%; text-align: right; word-break: break-all;}

.card-list .content + .info,
.card-list .content-2 + .info {border-top: 1px solid var(--col-bd-gray); margin-top: 1rem; padding-top: 1rem;}
.card-list .info dl {display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;}
.card-list .info dl + dl {margin-top: .4rem;}
.card-list .info dt {flex: 0 0 auto; margin-top: 0.1rem; font-size: 1.4rem; font-weight: 300;}
.card-list .info dd {flex: 1 0 0; max-width: 80%; text-align: right; font-size: 1.5rem; font-weight: 500; word-break: break-all;}

.card-list .btn-area {display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin-top: 1.6rem;}
.card-list .btn-area button {display: flex; justify-content: center; align-items: center; text-align: center; min-width: 7rem; height: 3rem; border-radius: .4rem; font-size: 1.4rem; font-weight: 400;}

.card-list .link .name {width: calc(100% - 3.5rem - 1rem);}

@media (hover: hover) and (pointer: fine) {
    .card-list.btn > li > button:hover {border-color: var(--col-theme);}
    .card-list .title .name button:hover {color: var(--col-theme);}
}



/* ============================================================
* 작성
* ============================================================ */
/* 에디터 */
.quill .ql-toolbar.ql-snow {padding: 0.8rem 0; border: 0;}
.quill .ql-container.ql-snow {height: calc(100% - 6.4rem); border: 0;}
.quill .ql-container.ql-snow .ql-editor {padding: 0.7rem 0 0; border-radius: .6rem;}
.quill .ql-editor.ql-blank::before {left: 0; color: var(--col-gray); font-family: 'Pretendard'; font-style: normal; font-size: 1.4rem; font-weight: 300;}
.quill .ql-editor:focus {background: rgb(15 120 187 / 7%);}


/* 첨부파일 - 1개 */
.file-upload {display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;}
.file-upload [type="file"] {display: none;}
.upload-button {padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 5px;}
.upload-button:hover {background-color: #0056b3;}
.file-name {width: 510px; color: var(--col-gray); font-size: 1.4rem; font-weight: 300;}
.file-name.attach {color: var(--col-black);}


/* 첨부파일 - 여러 개 리스트 */
.btn-file + .upload-list {margin-top: 1rem;}
.upload-list > li {display: flex; justify-content: flex-start; align-items: center;}
.upload-list > li + li {margin-top: .6rem;}
.upload-list > li .name {max-width: 70rem;}
.upload-list > li .btn-delete {margin-left: 0.8rem;}



/* ============================================================
* 페이지네이션 - Ant Design
* ============================================================ */
.ant-pagination {justify-content: center; margin-top: 4rem; text-align: center; transition: var(--trans-25);}
.ant-pagination .ant-pagination-item {background: transparent; border-radius: 0; border-width: 0 0 2px 0; font-family: 'Pretendard', sans-serif;}
.ant-pagination .ant-pagination-item a {display: inline-block; min-width: 1.8rem; padding: 0;}

.ant-pagination .ant-pagination-item-active {background-color: transparent; border-color: transparent;}
.ant-pagination .ant-pagination-item-active a {color: inherit; border-bottom: 2px solid var(--col-black);}

.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-next .ant-pagination-item-link {border-radius: 0;}

@media (hover: hover) and (pointer: fine) {
    .ant-pagination .ant-pagination-item-active:hover {border-color: transparent; background-color: rgba(0, 0, 0, 0.06);}
    .ant-pagination .ant-pagination-item-active:hover a {color: var(--col-black);}
}


/* ============================================================
* 페이지네이션
* ============================================================ */
.pagination {margin-top: 6rem;}
.pagination ul {display: flex; justify-content: center; align-items: center; gap: 4px;}
.pagination ul li a {display: flex; justify-content: center; align-items: center; width: 3.6rem; height: 3.6rem; background: #fff; border: 1px solid var(--col-gray); border-radius: 0; color: #666; font-size: 1.6rem; font-weight: 500; transition: var(--trans-25);}
.pagination ul li a.on {background: var(--col-subtheme); border-color: var(--col-subtheme); color: #fff;}