@charset "utf-8";
.board .btn_box{margin: 50px auto;}
.board .btn_box .btn_big{font-size: 14px;}
.pg_title{margin-bottom: 0;}

/* =========================================================================================================== */
/* ===== 리스트 페이지 ===== */
.list_wrap{text-align: center; font-size: 14px; border-top: 1px solid #eee;}
.list_wrap thead{background-color: #fbfbfb; font-weight: 500;}
.list_wrap tr{border-bottom: 1px solid #eee;}
.list_wrap th, .list_wrap td{padding: 10px 5px; vertical-align: middle;}
.list_wrap .t_chk{width: 30px;}
.list_wrap .t_num{width: 40px;}
.list_wrap .t_cate{width: 60px;}
.list_wrap .t_subject{}
.list_wrap .t_name{width: 80px;}
.list_wrap .t_date{width: 60px;}
.list_wrap .t_good{width: 50px;}
.list_wrap .t_nogood{width: 50px;}
.list_wrap td.t_subject{text-align: left;}

.board_btn_wrap{margin: 15px 0;}
.board_btn{display: flex; gap: 5px; align-items: center;}

.board_search{width: fit-content; display: flex; gap: 10px; align-items: center; background-color: #fbfbfb; border: 1px solid #eee; border-radius: 20px; padding: 10px 15px; margin: 20px auto;}
.board_search select, .board_search input[type="text"]{border: none; background-color: transparent; min-height: initial; padding: 0;}
.board_search button{background-color: transparent;}


/* ===== 뷰 페이지 ===== */
.view_title, .write_title{position: relative; padding-bottom: 15px; margin-bottom: 30px; margin-top: 10px;}
.view_title > * + *, .write_title > * + *{margin-top: 10px;}
.view_title .tit, .write_title .tit{position: relative; font-size: 28px; line-height: 1.2; font-weight: 600; }
.view_title::before, .write_title::before{ position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background-color: #eee; content: ""; display: block; clear: both; z-index: 1; }

.btn_wrap{display: flex; align-items: center; justify-content: space-between;}
.view_info{font-size: 13px; color: #666;}
ul.bar_list{display: flex; align-items: center; gap: 10px;}
ul.bar_list > li{position: relative;}
ul.bar_list > li + li{padding-left: 10px;}
ul.bar_list > li + li::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 80%; background-color: #ddd; content:""; display: block; clear: both;}

.reply_wrap > h2{font-size: 20px; font-weight: 600; margin-bottom: 10px;}
.reply_wrap > h2 > b{font-size: 15px; margin-left: 5px; color: #666; font-weight: 400;}
.reply_form{margin-bottom: 10px;}
.reply_btn{display: flex; align-items: center; justify-content: flex-end; border: 1px solid #eee; border-top: none; border-radius: 0 0 5px 5px; gap: 15px;}
.reply_btn label{display: flex; align-items: center; white-space: nowrap; font-size: 13px; gap: 5px;}
#commentPane .reply_btn input[type="checkbox"]{position: initial; padding: 0; width: 1.2em; height: 1.2em;}
.reply_btn .btn{padding: 10px 15px;}
.reply_text{margin-bottom: 0;}
.reply_text textarea{border-radius: 5px 5px 0 0;}

.reply_list{font-size: 14px;}
.reply_list > li{position: relative; border-bottom: 1px solid #eee; padding: 5px 0;}
.reply_content{word-break: break-all; margin-bottom: 15px; line-height: 1.4; text-align: justify; letter-spacing: -0.02em;}
.reply_content .more, .reply_content .close{text-decoration: underline; color: #161616; font-weight: 600; cursor: pointer;}

.reply_top {display: flex; align-items: center; justify-content: space-between; padding: 10px 0;}
.reply_top_tit{display: flex; align-items: center; gap: 10px;}
.reply_top_tit h5{font-size: 15px; font-weight: 600;}
.reply_top_tit time{font-size: 13px; color: #999;}
.reply_top .ffd{font-size: 12px;}

.reply_bot {margin: 10px 0;}
.reply_bot i + span{color: var(--color-basic); font-weight: 600;}
.re_reply_box .reply_list > li{border-top: 1px solid #eee; border-bottom: none; padding-bottom: 10px;}

.reply_guest{display: flex; align-items: center; gap: 10px;}
.reply_guest .captcha{display: flex; align-items: center;}
.reply_guest .captcha > div{display: flex; align-items: center;}
.reply_guest .captcha span > img{height: 40px !important; vertical-align: middle;}

.evaluation_wrap{margin-top: 50px;}
.evaluation{display: flex; gap: 10px; align-items: center; justify-content: center;}
.evaluation > li{flex: 1; max-width: 100px; aspect-ratio: 1/1; text-align: center; transition-duration: 200ms;}
.evaluation > li:hover{opacity: 0.5;}
.evaluation > li > a{display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: center; width: 100%; height: 100%;border: 2px solid #eee; border-radius: 50%; gap: 10px;}
.evaluation #good_button{border-color: #f75747; color: #f75747;}
.evaluation #bad_button{border-color: #1374f2; color: #1374f2;}
.evaluation > li > a > i{ font-size: 2em; }
.evaluation > li > a > span{font-weight: 600; line-height: 0.9;}


/* ===== 작성 페이지 ===== */
.write_title {margin-bottom: 0;}
.write_form {font-size: 15px;}
.write_form > *{margin-top: 5px;}
.row{display: flex; align-items: center; gap: 10px; min-height: 40px;}
.row dt{width: 20%; max-width: 140px; font-weight: 600;}
.row dd{flex: 1;}


/* ===== 카테고리 ===== */
#bo_cate{margin-bottom: 15px;}
#bo_cate_ul{display: flex; flex-wrap: wrap; gap: 5px; font-size: 13px; font-weight: 600;}
#bo_cate_ul a{display: block; padding: 0.6em 1em;background-color: #ddd; color: #999;}
#bo_cate_ul a#bo_cate_on{background-color: var(--color-basic); color: #fff;}

.list_wrap .empty_table{padding: 50px 0; color: #999;}
.view_content{padding-bottom: 50px; min-height: 400px;}
#commentPane{padding-top: 20px; border-top: 1px solid #eee;}

.btn_box{margin: 50px auto; max-width: 480px;}
.btn_box > .btn_big{max-width: 235px;}

.gallery_list{gap: 10px;}
.gallery_list li{position: relative;}
.gallery_list .gall_check{position: absolute; left: 10px; top: 10px;}
.gallery_list .img{aspect-ratio: 4/3;}
.gallery_list .img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_list .text{padding: 1em 0;}
.gallery_list .line2{margin-bottom: 5px; font-weight: 500;}
.gallery_list .date{font-size: 0.8rem; color: #999;}
.all_check{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee;}
