/*
=========================================================================
board.php 게시판
=========================================================================
*/
.board-table td{padding: 1em; box-sizing: border-box;}
.bo_list_total{margin-bottom: 10px;}
.bo_list_total span {font-weight: bold; margin-right: 5px;}
.pg_wrap {margin-top: 20px; text-align: center;}
.pg_page, .pg_current{display: inline-block; padding: 0 8px; height: 28px;   line-height: 26px; min-width: 28px; box-sizing: border-box;  background: var(--bg); color: var(--gray); border: 1px solid var(--border2);  text-decoration: none; margin: 0 2px;  border-radius: 3px; vertical-align: middle; cursor: pointer; font-size: .9em;}
.pg_current{background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);}
.td_subject {text-align: left !important;}
.sound_only{display: none;}
.board_icon {display: inline-block; padding: 1px 8px 2px; color: var(--text-color); border-radius: 30px; border: 1px solid var(--color-primary); color: var(--color-primary); font-size: .79em;}
.td_num {width: 40px;}
.td_num2{width: 40px;}
.td_name{width: 50px;}
.td_datetime {width: 90px; font-size: .9em;}
.comment_count {color: var(--color-primary); font-weight: 600; margin-left: 5px;}
@media (max-width: 600px) {  
  .td_num, .td_num2{display: none;}
  .board-table td{padding: 1em .5em; box-sizing: border-box;}
}

/*
=========================================================================
board_detail.php 게시판 상세
=========================================================================
*/
#bo_v {margin-bottom:20px;;box-sizing:border-box}
#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}
#bo_v_title .bo_v_tit {display:block;font-size:1.5em;margin:5px 0;word-break:break-all}
#bo_v_info {margin:0; border-bottom:1px solid var(--border2); padding-bottom: 20px;  margin-bottom: 20px;}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 

#bo_v_info .profile_info {margin:20px 0 10px;display:inline-block;float:left}
#bo_v_info .profile_info .pf_img {float:left;margin-right:10px}
#bo_v_info .profile_info .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_v_info .profile_info .profile_info_ct {float:left;padding:5px 0;line-height:18px}
#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal}
#bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, #bo_v_info .guest {font-weight:bold}
#bo_v_info .profile_img {display:none}

#bo_v_top {zoom:1}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding:0;list-style:none;word-break:break-all;background:#fff}

.bo_v_com {margin:20px 0;float:right}
.bo_v_com > li {position:relative;float:left;margin-left:5px}

.bo_v_nb {position:relative;margin:20px 0;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid var(--border2); padding:13px; cursor: pointer;}
.bo_v_nb li:last-child {border-bottom:1px solid var(--border2);}
.bo_v_nb li i {font-size:13px;color:var(--gray);}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:var(--gray);}
.bo_v_nb li .nb_date {float:right;color:var(--gray);}

.bo_writer_info{display: flex; color: var(--gray); flex-wrap: wrap; opacity: .8;}
.bo_writer_info>li::after {content: ''; width: 1px; height: 12px; background: var(--border2);  display: inline-block; margin: 0 10px; transform: translateY(1px);}
.bo_writer_info>li:last-of-type:after{display: none;}

.btn_b01{background-color: var(--light-gray); color: #fff; border: none;}
.boardBtnWrap{display: flex; justify-content: right; gap:5px; margin-top: 20px; font-size: .9em;}
.boardBtnWrap>button{min-height: 30px; padding: .25em 1.2em .3em;}
.board_detail .commentWrap{border-top: none;}

/*
=========================================================================
board_write.php 게시판 작성
=========================================================================
*/
.bWriteCont textarea{width: 100%; height: 400px; resize: none;}
.bWriteCont .formInput.link input{padding-left: 40px; position: relative; background: var(--input-bg) url(../img/common/icon_link.png) no-repeat center left 10px / 18px 18px;}

/*
=========================================================================
Bootstrap 페이징 스타일 지원
=========================================================================
*/
nav.pagination {margin: 20px 0; text-align: center;}
.pagination {display: flex; justify-content: center; flex-wrap: wrap; padding: 0; margin: 20px 0; list-style: none;}
.page-item {list-style: none; display: inline-block; margin: 0 2px;}
.page-link {display: inline-block; padding: 0 8px; height: 28px; line-height: 26px; min-width: 28px; box-sizing: border-box; background: var(--bg); color: var(--gray); border: 1px solid var(--border2); text-decoration: none; border-radius: 3px; vertical-align: middle; cursor: pointer; font-size: .9em;}
.page-link:hover {background: var(--border2); color: var(--text-color);}
.page-item.active .page-link {background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);}

/*
=========================================================================
댓글 나루콘
=========================================================================
*/
.write_form_footer{position: relative;}
.commentBtn{display: flex; align-items: center; gap:10px;}
.naruconBtn::before{content: ''; width: 30px; height: 30px; background: url(../img/common/logo_naru.png) no-repeat center / contain; display: inline-block; margin-right: 5px;}
.naruCon{position: absolute; right: 0; padding: 1em; background: var(--light-gray); border: 1px solid var(--gray); border-radius: 10px; z-index: 100; box-shadow: 0 0 10px #00000022; display: none; overflow: visible;}
.naruCon.active{display: block;}
.narucon_layer_content{display: flex; flex-wrap: wrap; width: 300px; height: 300px; overflow-y: auto;}
.narucon_layer_content>img{width: 33%; cursor: pointer; padding: 5px; box-sizing: border-box;}
@media (max-width: 600px) {
  .naruconBtn::before{width: 20px; height: 20px;}
  .narucon_layer_content{width: 250px; height: 180px;}
}