@charset "utf-8";

/* UI / UX */
.calender-wrap{display:flex;align-items:center;justify-content:space-around}
.calender-wrap .input-text{width:calc(50% - 10px);background:url('../img/comm/ico-calender.png') calc(100% - 5px) center no-repeat}

.btn-right-flex{display:flex;gap:5px;justify-content:flex-end;margin:20px 0;flex-wrap:wrap}
.btn-center-flex{display:flex;gap:5px;justify-content:center;margin:20px 0;align-items:center}

/* TOP */
.board-info{display:flex;justify-content:space-between;align-items:center;margin:20px 0}
.board-info .page-total{display:flex;flex-shrink:0;align-items:center}
.board-info .page-total .page-total-item{line-height:1}
.board-info .page-total .page-total-item:first-child{border-right:1px solid var(--color-border);padding-right:10px;margin-right:10px}
.board-info .page-total .page-total-item strong{color:var(--color-m)}

.board-search .inner{display:flex;justify-content:center}
.board-search .search-item{display:flex;gap:5px}
.board-search .btn-search{text-indent:-999%;overflow:hidden;flex-shrink:0;background:url('../img/comm/ico-search.png') var(--color-m) center/24px no-repeat;width:var(--btn-height);aspect-ratio:1/1;border-top-right-radius:10px}

/* PAGE */
.board-page{display:flex;gap:5px;align-items:center;margin:20px 0;justify-content:center}
.board-page .btn-page{border:1px solid var(--color-border);width:var(--btn-height);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.board-page .btn-page.btn-current{border:0}
.board-page .btn-page:hover,
.board-page .btn-prev,
.board-page .btn-next,
.board-page .btn-first,
.board-page .btn-last{background-color:var(--color-m);color:#fff;border-color:var(--color-m)}

/* LIST */
.none-data{justify-content:center;text-align:center}

.td-num{width:80px}
.td-hit{width:100px}
.td-date{width:140px}
.td-addfile{width:100px}
.td-name{width:100px}
.td-subject{display:flex;text-align:left;gap:10px;align-items:center;font-weight:600}
.td-item-category{background-color:var(--color-m);color:#fff;padding:5px 10px;flex-shrink:0;font-size:.875rem;border-radius:5px}

.board-list{text-align:center}
.board-list > table{border-top:2px solid var(--color-m);width:100%}
.board-list thead th{background-color:var(--color-h);padding:20px 10px;font-weight:500}
.board-list tbody td{padding:20px 10px;border-bottom:1px solid #efefef}
.board-list tbody tr:hover{background-color:var(--color-h)}

.board-list-gallery ul{display:flex;gap:20px;flex-wrap:wrap}
.board-list-gallery li{width:calc((100% / 3) - 13.333px)}
.board-list-gallery .item{display:block}
.board-list-gallery .item .txt{padding:20px;background-color:var(--color-light)}
.board-list-gallery .item .board-con{font-weight:500;height:3.5rem}
.board-list-gallery .item .board-date{display:flex;justify-content:flex-end;margin-top:10px;opacity:.8;font-size:.935rem;align-items:center;gap:5px}
.board-list-gallery .board-img{height:300px}
.board-list-gallery .category{position:absolute;right:0;top:0;background-color:var(--color-m);color:#fff;padding:10px 20px;font-size:.935rem;z-index:10;text-align:center;;display:flex;align-items:center;justify-content:center}

.board-list-faq{border-top:2px solid var(--color-d)}
.board-list-faq .q-item{display:flex;align-items:baseline;gap:10px;padding:20px 40px;position:relative;border-bottom:1px solid var(--color-border);font-weight:500}
.board-list-faq .q-item::after{content:"\e941";font-family:'xeicon';display:flex;align-items:center;justify-content:center;text-align:center;position:absolute;width:40px;aspect-ratio:1/1;right:0;top:.8em;z-index:10}
.board-list-faq .q-item::before{content:"Q.";font-family:var(--font-point);display:flex;align-items:center;justify-content:center;text-align:center;position:absolute;width:40px;aspect-ratio:1/1;left:0;top:.8em;z-index:10;font-weight:bold;color:var(--color-m)}
.board-list-faq .q-item.on{background-color:#f9f9f9}
.board-list-faq .q-item.on::after{transform:rotate(-180deg)}
.board-list-faq .a-item{background-color:#f9f9f9;padding:20px 20px 20px 40px;display:none;border-bottom: 1px solid var(--color-border)}
.board-list-faq .answer::before{content:"A";display:flex;color:var(--color-red);width:40px;aspect-ratio:1/1;align-items:center;justify-content:content;text-align:center;left:0;top:20px}
.board-list-faq .category{background-color:var(--color-m);color:#fff;padding:5px 10px;flex-shrink:0;font-size:.875rem;border-radius:5px}

.board-view .board-vheader{border-left:5px solid var(--color-m);padding:0 0 0 20px;margin-bottom:20px}
.board-view .board-vheader .subject{font-size:1.5rem;font-weight:600;border-bottom:1px solid #e7ecf5;padding-bottom:10px;margin-bottom:10px}
.board-view .board-vheader .info{display:flex;align-items:center}
.board-view .board-vheader .info > *:not(:last-child){margin-right:10px;padding-right:10px;line-height:1;border-right:1px solid #e7ecf5}
.board-view .board-vfile{display:flex;flex-direction:column;gap:10px;background-color:#f8f8fa;padding:20px;margin:20px 0}
.board-view .board-vfile .item{display:flex;gap:10px}
.board-view .board-vfile .tit{display:flex;align-items:center;gap:5px;font-weight:500;color:var(--color-m)}
.board-view .board-vfile .tit::after{font-family:'xeicon';content:"\ea89"}
.board-view .board-vfile .btn-file{text-decoration:underline}
.board-view .board-vheader-info{display:flex;gap:20px;flex-wrap:wrap}
.board-view .board-vheader-info .nm::before{font-weight:bold;content:"작성자 : "}
.board-view .board-vheader-info .hit::before{font-weight:bold;content:"조회수 : "}
.board-view .board-vheader-info .dt::before{font-weight:bold;content:"작성일 : "}
.board-view .board-vcon{border-bottom:1px solid #d6deed;padding:10px}
.board-nav{background-color:#f8f8fa;margin:20px 0;padding:20px;display:flex;gap:20px;flex-direction:column}
.board-nav .item{display:flex;align-items:center;gap:20px}
.board-nav .info{font-weight:500;flex-shrink:0;color:var(--color-m)}
:where(.board-vcon) p{margin:revert}
:where(.board-vcon) ul, :where(.board-vcon) ol{list-style:revert;margin:revert;padding:revert}

/* WRITE */
.board-write{border-top:2px solid var(--color-m);margin:20px 0}
.board-write > table{width:100%}
.board-write tbody th{background-color:var(--color-light);padding:10px;text-align:center;border-bottom:1px solid var(--color-b);width:200px}
.board-write tbody td{padding:10px;border-bottom:1px solid var(--color-b)}
.board-write-file{display:flex;gap:5px;flex-direction:column}
.board-write-file .break-all{color:rgba(0,0,0,.8);font-size:.875rem;word-break:break-all}s
.board-write-file .file-wrap{display:flex;gap:5px}
.board-write-file .btn-file-hidden{position:absolute;right:0;top:0}
.board-write-file .img-preview img{display:none}

.join-wrap{max-width:800px;margin:0 auto}
.join-wrap .write-frm-wrap{border:1px solid var(--color-border);margin-bottom:10px}
.join-wrap .subject{font-size:1.125rem;background-color:#f3f9f6;padding:20px}
.join-wrap .write-frm-con{padding:20px}

.board-write-flex{border-top:2px solid var(--color-m);margin:20px auto}
.board-write-flex .inner{display:flex;flex-direction:column;gap:var(--gap)}
.board-write-flex .frm-li{display:flex;gap:var(--gap)}
.board-write-flex .frm-li > *{flex:1}
.board-write-flex .frm-li.half{max-width:calc(50% - 2.5px)}
.board-write-flex .frm-item{display:flex;gap:var(--gap);align-items:center;min-height:var(--btn-height)}
.board-write-flex .label-txt{min-width:110px;flex-shrink:0;display:flex;gap:5px;align-items:flex-start}
.board-write-flex .label-txt + *{flex-grow:1}
.board-write-flex .frm-item:has([required]) .label-txt::after{content:"*";color:var(--color-red)}
.board-write-flex .flex-wrap{display:flex;gap:var(--gap);align-items:center}
.board-write-flex .flex-shrink{flex-shrink:0}
.board-write-flex .address-flex-wrap{display:flex;gap:var(--gap);flex-direction:column}
.board-write-flex .address-flex-wrap .zip{gap:var(--gap);display:flex;align-items:center}
.board-write-flex .address-flex-wrap .detail{display:flex;gap:var(--gap);flex-direction:column}

/* paging */
@media (max-width:1400px){
	.board-list-gallery .board-img{height:20vw}
}

@media (max-width:1024px){
	.board-list-gallery .item .board-con{height:3rem}
	.board-list-gallery .board-img{height:30vw}
	.board-list-gallery li{width:calc((100% / 2) - 10px)}
}

@media (max-width:720px){
	.input-text{height:40px}
	.input-select{padding: 0 20px 0 13px;height: 40px;background-size: 10px;}

	.board-info{flex-wrap:wrap;gap:5px}

	.mb-list thead{display:none}
	.mb-list tr{display:block}
	.mb-list tbody td{display:flex;width:100%;padding:5px 0}
	.mb-list tbody td:not(:last-child){border-bottom:0}
	.mb-list .td-mb-none{display:none}
	.mb-list td::before{min-width:100px;font-weight:600;text-align:left}

	.td-subject{flex-wrap:wrap;gap:5px}
	.td-addfile::before{content:"첨부파일"}
	.td-date::before{content:"작성일"}
	.td-name::before{content:"작성자"}
	.td-hit::before{content:"조회수"}

	.board-view .board-vheader{padding-left:20px;background-size:30px;border-left-width:2px;background-position-x:5px}
	.board-view .board-vheader-info{gap:10px}
	.board-view .board-vheader .info > *:not(:last-child){margin-right:5px;padding-right:5px}

	.board-write tbody th{display:block;width:100%;text-align:left}
	.board-write tbody td{display:block}

	.board-list-gallery li{width:100%}
	.board-list-gallery .board-img{height:60vw}
	.board-list-gallery .category{width:120px;height:40px;border-bottom-left-radius:15px}

	.board-write-flex .frm-item{flex-direction:column}
	.board-write-flex .label-txt{min-width:100%}
	.board-write-flex .frm-li.half{max-width:100%}
}