@charset "utf-8";

/* ======================================================================== */
.board_wrap{padding-top: 30px; padding-bottom: 60px;}
.board_wrap .box { padding-left: 15px; padding-right: 15px; }
.board_wrap .btn_box{margin: 30px auto;}


#bo_cate{overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; margin: 15px auto;}
#bo_cate::-webkit-scrollbar { display: none; }

#bo_cate_ul{display: flex; gap: 5px; font-size: 12px;}
#bo_cate_ul a{display: block; padding: 0 1em; line-height: 2.2; border: 1px solid #eee; border-radius: 2em; white-space: nowrap; color: #999;}
#bo_cate_ul a#bo_cate_on{background-color: #222; border-color: #222; color: #fff; font-weight: 600;}

.bo_fx{justify-content: space-between;}
.bo_fx > ul{display: flex; align-items: center; font-size: 12px; font-weight: 500;}
.bo_fx > ul > li + li { border-left: 1px solid #ddd; }
.bo_fx > ul > li > a, .bo_fx > ul > li > input {display: block; padding: 0 10px; transition-duration: 100ms;}
.bo_fx > ul > li > input:hover{cursor: pointer;}
.bo_fx .bold{font-weight: 700; color: #000;}
.bo_fx .red{font-weight: 700; color: var(--red);}
.bo_fx .btn_admin{font-weight: 700; color: var(--blue);}

#bo_list_total{font-weight: 500;} 
#bo_list_total > strong{display: inline-block; margin: 0 2px;}
#bo_list_total > small{display: inline-block; padding-left: 5px; margin-left: 5px; border-left: 1px solid #ddd; color: #666;}

.list_table{width: 100%; margin: 15px auto; border-top: 2px solid #222; font-size: 13px;}
.list_table thead{font-weight: 600; background-color: #fbfbfb; line-height: 1.4;}
.list_table thead input[type=checkbox]:before{background-color: #fff;}
.list_table th, .list_table td{padding: 10px 5px; text-align: center; vertical-align: middle;}
.t_chk{width: 1.5em;}
.t_date{width: 5em;}

.list_table tr{border-bottom: 1px solid #eee;}
.list_table tr.bo_notice{background-color: #f0f0f0; border-bottom-color: #e3e3e3; font-weight: 600;} 

.list_table td.t_subject{text-align: left;}
.bo_cate_link{display: block; padding: 0 0.8em; line-height: 2.2; border: 1px solid #222; border-radius: 2em; white-space: nowrap; font-size: 0.75em; background-color: #222; color: #fff; font-weight: 600; margin-right: 5px;}
.subject_row{display: flex; align-items: center; gap: 5px;}
.subject_row .bo_subject{display: -webkit-inline-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1; word-break: break-all;}
.subject_row .bo_icon{white-space: nowrap; color: #999; font-size: 0.85em;}
.subject_row .bo_icon > * + *{margin-left: 2px;}
.subject_row .bo_icon .cnt_cmt{font-weight: 900; color: var(--point-color); font-size: 0.8em; vertical-align: top; margin-right: 2px;}


#bo_sch{max-width: 400px; padding: 2px 1em; border: 2px solid #222; background-color: #fff; margin: 30px auto; border-radius: 2em; font-size: 13px;}
#bo_sch > form{display: flex; align-items: center;}
#bo_sch > form > select{width: 30%; max-width: 180px; border: none; background-color: transparent;}
#bo_sch > form > input[name="stx"]{flex: 1; border: none; background-color: transparent;}
#bo_sch > form > button{color: var(--main-color); font-size: 1.2em;}


/* 뷰페이지 */
#bo_v_atc{line-height: 1.6;}
#bo_v_atc img{max-width: 100%;}
#bo_v_file, #bo_v_link{padding: 30px 15px;}

.view_skin > .bo_fx{padding: 15px 0; background-color: #fbfbfb; border-top: 1px solid #eee;}
.bo_v_nb{margin: 15px 0; justify-content: space-between; color: #ddd;}
.bo_v_nb a > span{display: inline-block; font-size: 0.8em; margin: 0 0.5em; vertical-align: text-bottom; line-height: 1.6; font-weight: 600; color: #999;}


/* 추천 비추천 */
.good_wrap{margin: 30px auto;}
.good_wrap > ul{display: flex; justify-content: center; gap: 15px;}
.good_wrap > ul > li{width: 100px; aspect-ratio: 1/1; border: 1px solid #eee; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .05); border-radius: 50%;}
.good_wrap a{display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 10px;}
.good_wrap .icon{font-size: 1.4em;}
.btn_good{color: var(--red);}
.btn_nogood{color: var(--blue);}