input,
textarea,
select {width: 100%; height: var(--input-height); padding: 0 2.6rem 0 1.6rem; color: inherit; background-color: #fff; border-width: 1px; border-style: solid; border-color: transparent; border-radius: 0; font-size: 1.5rem; font-weight: 400; transition: var(--trans-25);}

.ant-picker-range {padding: 0.8rem 1rem;}

/* placeholder */
input::placeholder,
.content-container .ant-picker .ant-picker-input >input::placeholder,
textarea::placeholder,
.react-select .react-select__placeholder,
.ant-select .ant-select-placeholder,
select.disabled,
.ant-picker .ant-picker-input >input::placeholder {font-family: var(--font-family-base); color: var(--col-gray); font-size: 1.4rem; font-weight: 400;}

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

/* disabled */
select:disabled {background: #f5f5f5; cursor: default;}

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

/* 크롬 자동완성 필드 */
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-bk) !important;}

/* antd */
.css-var-root.ant-picker-css-var {--ant-date-picker-active-border-color: var(--col-theme); --ant-date-picker-hover-border-color: var(--col-theme);}




/* ============================================================
* 라디오
* ============================================================ */
.radio-wrap {display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;}
.radio {display: flex; align-items: center; gap: .4em; cursor: pointer;}
.radio [type="radio"] {flex-shrink: 0; display: inline-block; width: 1.3em; height: 1.3em; padding: 0; border: 0; background: #FFF; border-radius: 50%; box-shadow: inset 0 0 0 .1em var(--col-bd-gray); vertical-align: middle; appearance: none; transition: all .3s ease; cursor: pointer;}
.radio [type="radio"]:checked {box-shadow: inset 0 0 0 .34em var(--col-theme);}

.radio [type="radio"]:focus-visible {background: #fff; outline: 1px solid var(--col-theme); outline-offset: 2px;}

@media (hover: hover) and (pointer: fine) {
    .radio label:hover [type="radio"]:not(:checked) {box-shadow: inset 0 0 0 .2em var(--col-theme);}
}



/* ============================================================
* 체크박스
* ============================================================ */
.chk-area {display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;}
.chk-wrap {position: relative; padding-left: calc(var(--checkbox-wd) + 0.6rem); cursor: pointer;}

.chk-wrap input[type="checkbox"] {position: absolute; opacity: 0; inset: 0; cursor: pointer;}
.chk-wrap .chk-box {position: absolute; top: 0; left: 0; width: var(--checkbox-wd); aspect-ratio: 1; background: #fff; border-width: 1px; border-style: solid; border-color: var(--col-bd-gray); border-radius: 0; transition: var(--trans-25);}
.chk-wrap .chk-box::after {content: ""; position: absolute; top: calc(50% - 2px); left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 0.7rem; height: 1rem; border-style: solid; border-color: #fff; border-width: 0 2px 2px 0;}
.chk-wrap .chk-label {font-size: 1.5rem; line-height: 1;}

.chk-wrap input[type="checkbox"]:checked + .chk-box::after {border-color: var(--col-bk);}

.chk-wrap input[type="checkbox"]:focus-visible + .chk-box {border-color: var(--col-theme);}
@media (hover: hover) and (pointer: fine) {
    .chk-wrap:hover .chk-box {border-color: var(--col-theme);}
}



/* ============================================================
* 셀렉트
* ============================================================ */
.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:has(~ select:disabled) {cursor: default;}
.select::after {content: ''; position: absolute; top: 0; bottom: 0; right: 0; padding: 0 1em; background: url("/img/icon/select_bk.svg") center/2rem 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: 0 33px 0 1.4rem; border: 1px solid var(--col-bd-gray); border-radius: 0; backdrop-filter: none;}


/* react-select */
.react-select {width: 100%;}
.react-select input {height: var(--input-height);}
.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: var(--border-radius-sm); 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;}


/* antd select */
.ant-select {height: var(--input-height); border: 0;}
.ant-select.ant-select-outlined:not(.ant-select-disabled).ant-select-focused {box-shadow: none;}



/* ============================================================
* input + button
* ============================================================ */
.input-btn {display: flex; align-items: center;}
.input-btn button {flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; text-align: center; height: 3.2rem; padding: 0 1rem; border-radius: 0; font-size: 14px; line-height: 1; overflow: hidden;}

.input-btn .right {flex-shrink: 0; display: flex; align-items: center; gap: 1rem;}
.input-btn .timer {display: flex; align-items: center; gap: 0.4rem; color: var(--col-gray); font-size: 14px; line-height: 1;}
.input-btn .timer img {display: block;}


/* ============================================================
* 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: 18rem;}
.icon-date input[type="date"] {padding: 0 2.4em 0 2rem; cursor: pointer;}
.icon-date .icon {position: absolute; top: 50%; right: 0; transform: translateY(-50%); height: var(--bdTop-height); aspect-ratio: 1; background: url("/t_admin/img/icon/calendar_gray.svg") center/2rem no-repeat;}

/* range */
.search-date-box {display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 2rem 3.5rem; background: #F4F4F4; border: 1px solid var(--col-bd-gray);}
.search-date-box button {min-width: 8rem; height: 4rem; padding: 0 1rem; border: 1px solid var(--col-bd-gray); background: #fff; color: var(--col-darkgray);}
.search-date-box button:hover,
.search-date-box button.active {border-color: var(--col-bk); color: var(--col-bk);}

.range-date,
.range-time {position: relative; display: flex; align-items: center; gap: 0.7rem;}
.range-date > span {color: var(--col-bd-gray);}
.range-date .ant-picker,
.range-date input {height: var(--bdTop-height); padding: 0 2rem; border-color: var(--col-bd-gray); border-radius: 0;}
.range-date .btn-clear {height: var(--bdTop-height); aspect-ratio: 1; border: 1px solid var(--col-bd-gray); border-radius: 0.8rem; background-color: transparent; background-image: url("/img/icon/clear_gray.svg"); background-position: center; background-size: auto; background-repeat: no-repeat;}
.range-date .btn-date {display: flex; align-items: center; height: var(--bdTop-height); padding: 0 1.2rem; border-width: 1px; border-style: solid; border-color: var(--col-bd-gray); border-radius: 0.8rem;}
.range-date .btn-date.active {border-color: var(--col-theme); background: var(--col-theme); color: #fff;}

.range-time input {padding: 0 2rem !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;}

@media (max-width: 768px) {
    .icon-date {min-width: auto; width: 15.3rem;}
}



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

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

.board-top .total {font-weight: 500; letter-spacing: 0;}
.board-top .select select {height: var(--bdTop-height);}

/* 정렬 드롭다운 */
.sort-wrap {position: relative; display: inline-block; font-size: 14px;}
.sort-wrap .btn-sort {position: relative; display: flex; align-items: center; gap: 4px; font-size: 1.5rem;}
.sort-wrap .btn-sort::after {content: ""; width: 1.6rem; aspect-ratio: 1; background: url("/img/icon/sort_arrow_gray.svg") center/contain no-repeat;}

.sort-wrap .dropdown {display: none; position: absolute; top: 2.6rem; right: 0; width: 15rem; background: #fff; border: 1px solid var(--col-bd-gray); z-index: 10;}
.sort-wrap.open .dropdown {display: block;}

.sort-wrap .dropdown button {display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.2rem 1.6rem; text-align: left; font-size: 14px;}
.sort-wrap .dropdown li.active button::after {content: "✓";}
@media (hover: hover) and (pointer: fine) {
    .sort-wrap .dropdown button:hover {background: #f5f5f5;}
}


/* 필터 체크박스 */
.board-top .filter-check {width: 100%;}

@media (max-width: 576px) {
    .board-top {flex-direction: column; align-items: flex-start;}
    .board-top .btn-area {width: 100%; text-align: right;}
}



/* ============================================================
* 검색
* ============================================================ */
/* 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;}

/* 검색창 */
.search-line {display: flex; align-items: center; gap: .7rem;}
.search-line .select {flex-shrink: 0;}
.search-line .search {flex: 1 0 0;}

.search-line .ant-select,
.search-line .select select {flex-shrink: 0; height: var(--bdTop-height); border: 1px solid var(--col-bd-gray); border-radius: 0;}

.search-line .search {position: relative; transition: var(--trans-25); overflow: hidden;}
.search-line .search input {width: 100%; height: var(--bdTop-height); padding: 0 5em 0 2rem; border-color: var(--col-bd-gray); border-radius: 0;}

.search-line .search .btn-search,
.search-line .search .btn-clear {position: absolute; top: 0;}
.search-line .search .btn-search {right: 0;}
.search-line .search .btn-clear {right: var(--bdTop-height);}
.search-line .search .btn-search {height: var(--bdTop-height); aspect-ratio: 1; background-color: transparent; background-image: url("/img/icon/search_gray.svg"); background-position: center; background-size: auto; background-repeat: no-repeat;}
.search-line .search .btn-clear {width: 1.5em; height: var(--bdTop-height); background-color: transparent; background-image: url("/img/icon/clear_gray.svg"); background-position: center; background-size: auto; background-repeat: no-repeat;}

.search-line .search button {position: absolute; top: 0; right: 0; bottom: 0; border: 0; background-color: transparent;}

.search-line .search input:focus-visible {border-color: var(--col-theme);}
.search-line .search button:focus-visible {box-shadow: var(--focus-shadow);}
@media (hover: hover) and (pointer: fine) {
    .search-line .search input:hover {border-color: var(--col-theme);}
}



/* ============================================================
* 목록 - 테이블
* ============================================================ */
.tb-fixed {table-layout: fixed;}
.tb-auto {table-layout: auto;}

table .empty td {height: 30rem; color: var(--col-gray);}

table {width: calc(100% + 1px); border-top: 1px solid #5B5B5B;}
table th,
table td {border-bottom: 1px solid var(--col-bd-gray); text-align: center; font-size: 1.5rem; word-break: break-all;}
table th {padding: 1.4rem; font-weight: 600;}
table td {padding: 2rem 1.4rem;}

table.sm th,
table.sm td {padding: 1rem;}

table .btn-area {display: flex; flex-direction: column; gap: 0.2rem;} /*목록*/

@media (hover: hover) and (pointer: fine) {
    table tr:hover td {background-color: #F8F9FA;}
}



/* ============================================================
* 페이지네이션
* ============================================================ */
.pagination {display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 7.6rem; overflow: hidden;}
.pagination a,
.pagination span {display: flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-bottom-width: 2px; border-style: solid; border-color: transparent; color: #868686;}
@media (max-width: 576px) {
    .pagination {gap: 0;}
}

/* 현재 페이지 */
.page-num {transition: var(--trans-25);}
.page-num.active {border-color: var(--col-theme); color: var(--col-theme); font-weight: 700;}
@media (hover: hover) and (pointer: fine) {
    .page-num:hover {border-color: var(--col-theme); color: var(--col-theme);}
}

/* 이전/다음 */
.page-btn {font-size: 2.4rem;}
.page-btn.disabled {opacity: 0.3; pointer-events: none;}
.dots {pointer-events: none;}



/* ============================================================
* 페이지네이션 - Ant Design
* ============================================================ */
.content-wrap .ant-pagination {margin-top: 4.6rem; font-size: 1.5rem;}
.content-wrap .ant-pagination .ant-pagination-item {margin-inline-end: 10px; border-radius: 0; border-width: 0 0 2px 0; font-family: var(--font-family-base);}

/* 호버 */
.content-wrap .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover,
.content-wrap .ant-pagination .ant-pagination-prev:hover .ant-pagination-item-link,
.content-wrap .ant-pagination .ant-pagination-next:hover .ant-pagination-item-link {background: transparent}

/* 점프 화살표 */
.content-wrap .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
.content-wrap .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {color: var(--col-bk);}

/* 현재 페이지 */
.content-wrap .ant-pagination .ant-pagination-item-active {border-color: #333;}
.content-wrap .ant-pagination .ant-pagination-item-active a {color: #333;}




/* ============================================================
* 작성 - 테이블
* ============================================================ */
.boardPage.notice textarea {min-height: 30rem;}
.boardPage.faq textarea {min-height: 32rem;}
.boardPage.qna .question textarea {min-height: 28.5rem;}
.boardPage.qna .answer textarea {min-height: 40rem;}



/* ============================================================
* 작성 - 파일 업로드 : 여러 개 + 미리보기 O
* ============================================================ */
#thumbImg {display: none;}
.preview-container {width: 100%; height: 13rem; padding: 1rem; background: #fafafa; border: 1px dashed var(--col-bd-gray); border-radius: .8rem; text-align: center;}
.preview-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; height: 100%;}
.preview-empty {display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; color: var(--col-gray); font-size: 14px;}
.preview-empty.hidden {display: none;}

.preview-item {position: relative; width: 10rem; aspect-ratio: 1; background: #fafafa; border: 1px solid var(--col-bd-gray); overflow: hidden;}
.preview-item img { width: 100%; height: 100%; object-fit: cover;}
.preview-item .btn-remove {position: absolute; top: 0.6rem; right: 0.6rem; display: flex; justify-content: center; align-items: center; width: 2.2rem; aspect-ratio: 1; border-radius: 50%; background-color: rgba(0,0,0,0.6); background-image: url("/img/icon/close_wt.svg"); background-position: center; background-size: 54%; background-repeat: no-repeat;}
.preview-item .btn-remove:hover {background-color: rgba(0,0,0,0.8);}



/* ============================================================
* 작성 - 파일 업로드 : 1개 + 미리보기 X
* ============================================================ */
.detailImg-list {display: flex; flex-direction: column; gap: 0.6rem;}
.detailImg-list li {display: flex; align-items: center; gap: 0.6rem;}
.detailImg-list input[type='file'] {display: none;}
.detailImg-list .btn-xs {flex-shrink: 0; min-width: 12.8rem;}
.detailImg-list .file-name {color: var(--col-darkgray); font-size: 13px;}
.detailImg-list .btn-delete {display: none; flex-shrink: 0; justify-content: center; align-items: center; width: 2.2rem; aspect-ratio: 1; border-radius: 50%; background-color: rgba(0,0,0,0.6); background-image: url("/img/icon/close_wt.svg"); background-position: center; background-size: 47%; background-repeat: no-repeat;}
.detailImg-list .btn-delete:hover {background-color: rgba(0,0,0,0.8);}




/* ============================================================
* 공지사항
* ============================================================ */
/* 목록 */
.basic-list {border-top: 1px solid var(--col-bd-gray);}
.basic-list li {border-bottom: 1px solid var(--col-bd-gray);}
.basic-list li.empty {padding: 8rem 2rem; text-align: center; color: var(--col-gray); font-size: 1.5rem;}
.basic-list li button,
.basic-list li a {display: flex; align-items: center; gap: 5rem; width: 100%; padding: 3.1rem 4.2rem; text-align: left; transition: var(--tran-24);}

.basic-list .num {flex: 0 0 auto; padding: 0 1rem; font-size: 2rem; font-weight: 500;}
.basic-list .txt {flex: 1 0 0;}
.basic-list .title,
.basic-list .content {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.5;}
.basic-list .title {font-size: 2rem; font-weight: 500;}
.basic-list .content {margin-top: 0.4rem; font-weight: 300;}

.basic-list .date,
.basic-list .new,
.basic-list .pill {flex: 0 0 auto;}

.basic-list .new {color: #E60000; font-size: 12px; font-weight: 500;}

.icon-pin {display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1;}
.notice-content {min-height: 30rem;}
@media (hover: hover) and (pointer: fine) {
    .basic-list li button:hover,
    .basic-list li a:hover {color: var(--col-theme);}
}
@media (max-width: 1200px) {
    .basic-list li button,
    .basic-list li a {padding: 3rem 1rem;}
}
@media (max-width: 992px) {
    .basic-list li button,
    .basic-list li a {flex-direction: column; align-items: flex-start; gap: 2rem;}
    .basic-list .num {padding: 0;}
}
@media (max-width: 576px) {
    .basic-list li button,
    .basic-list li a  {gap: 1rem; padding: 2rem 0;}

    .basic-list .title {font-size: 1.8rem;}
    .basic-list .date {font-size: 14px;;}
}


/* 상세 */
.basic-view .view-header,
.basic-view .view-footer {padding: 3rem 4.2rem;}
.basic-view .view-header {border-top: 1px solid var(--col-bd-gray); border-bottom: 1px solid var(--col-bd-gray);}

.basic-view .view-header .category {margin-bottom: .6rem; color: var(--col-theme); font-weight: 600;}
.basic-view .view-header .title {font-size: 3.2rem; font-weight: 500; line-height: 1.4; word-break: break-all;}

.basic-view .info {display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-top: 1.8rem; color: var(--col-gray); font-size: 1.4rem;}
.basic-view .info dl {display: flex; align-items: center;}
.basic-view .info dt {margin-right: 1rem;}
.basic-view .info dt::after {content: "";}

.basic-view .view-body {min-height: 400px; padding: 4rem 4.2rem; border-bottom: 1px solid var(--col-bd-gray); line-height: 1.75; word-break: break-all;}

@media (max-width: 992px) {
    .basic-view .view-header,
    .basic-view .view-footer {padding: 3.2rem 2rem;}

    .basic-view .view-header .title {font-size: 2.4rem;}

    .basic-view .view-body {padding: 4rem 2rem;}
}
@media (max-width: 576px) {
    .basic-view .view-header,
    .basic-view .view-footer {padding: 3.2rem 0;}

    .basic-view .view-header .title {font-size: 2rem;}

    .basic-view .view-body {padding: 4rem 0;}
}



/* ============================================================
* 1:1 문의
* ============================================================ */
.qnaWritePage textarea {min-height: 20rem; padding: 0;}
#attachImg {display: none;}

.qnaViewPage textarea {min-height: 28rem; padding: 0;}
.qnaViewPage .file-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 12px;}
.qnaViewPage .file-wrap .img {position: relative; width: 10rem; aspect-ratio: 1; background: #fafafa; border: 1px solid var(--col-bd-gray); overflow: hidden;}
.qnaViewPage .file-wrap .img img {width: 100%; height: 100%; object-fit: cover;}
.qnaViewPage .img-viewer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 9999;}
.qnaViewPage .img-viewer.active {display: flex;}
.qnaViewPage .img-viewer .overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
.qnaViewPage .viewer-content {position: relative; z-index: 1;}
.qnaViewPage .viewer-content img {max-width: 90vw; max-height: 90vh;}