@charset "utf-8";

/* ============================================
   레인보우포레스트 게시판 스킨 CSS
   목업 디자인 시스템 기반
   ============================================ */

:root {
  --r: #FF6B8A;
  --o: #FF9F6B;
  --y: #FFD166;
  --g: #6BCB77;
  --b: #4DABF7;
  --p: #B197FC;
  --forest: #2D6A4F;
  --forest-light: #40916C;
  --forest-pale: #D8F3DC;
  --forest-mist: #F0FAF4;
  --text: #1B2D23;
  --text-soft: #4A6558;
  --shadow: 0 4px 24px rgba(45,106,79,0.10);
  --shadow-sm: 0 2px 8px rgba(45,106,79,0.07);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
}

/* ============================================
   ## 게시판 목록
   ============================================ */
#bo_list {
  position: relative;
  margin-bottom: 20px;
}
#bo_list:after { display:block;visibility:hidden;clear:both;content:"" }

/* 컬럼 너비 */
#bo_list .td_board    { width:120px; text-align:center }
#bo_list .td_chk      { width:30px;  text-align:center }
#bo_list .td_date     { width:60px;  text-align:center }
#bo_list .td_datetime { width:70px;  text-align:center }
#bo_list .td_group    { width:100px; text-align:center }
#bo_list .td_mb_id    { width:100px; text-align:center }
#bo_list .td_mng      { width:80px;  text-align:center }
#bo_list .td_name     { width:90px;  text-align:left; padding:10px 0 }
#bo_list .td_nick     { width:100px; text-align:center }
#bo_list .td_num      { width:50px;  text-align:center }
#bo_list .td_num2     { width:50px;  text-align:center }
#bo_list .td_numbig   { width:80px;  text-align:center }

/* 테이블 래퍼 - 심플 라인 */
#bo_list .tbl_head01 {
  background: #fff;
  border-top: 2px solid #333;
  border-bottom: 1px solid #d0d0d0;
}
#bo_list .tbl_head01 table {
  border-collapse: collapse;
  width: 100%;
}

/* 테이블 헤더 */
#bo_list thead th {
  background: #fff;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}

/* 행 */
#bo_list tbody tr {
  border-left: 3px solid transparent;
  transition: background 0.13s, border-color 0.13s;
}
#bo_list tbody tr:hover {
  background: var(--forest-mist) !important;
  border-left: 3px solid var(--forest-light);
}
#bo_list tbody td {
  padding: 13px 8px;
  font-size: 0.85rem;
  color: var(--text);
  border-bottom: 1px solid #ececec;
}
#bo_list tbody .even td { background: #fff }

/* 빈 테이블 */
#bo_list .empty_table {
  padding: 60px 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.88rem;
}

/* 공지글 */
.bo_notice td {
  background: #fff6fa !important;
  border-bottom: 1px solid #f2e0ea !important;
}
.bo_notice td a { font-weight: 700 }
.bo_notice .notice_icon {
  display: inline-block;
  font-weight: 700;
  color: var(--r);
  font-size: 0.82rem;
}

/* 상태 */
#bo_list .txt_active  { color: var(--forest-light); font-weight:600 }
#bo_list .txt_expired { color: #ccc }

/* 분류 배지 */
.bo_cate_link {
  float: left;
  display: inline-block;
  margin-right: 7px;
  background: var(--forest-pale);
  color: var(--forest);
  font-weight: 600 !important;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 0.73rem;
  transition: background 0.13s, color 0.13s;
}
.bo_cate_link:hover { text-decoration:none; background: var(--forest-light); color:#fff }

/* 글 제목 */
.bo_tit {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
}
.bo_tit a { color: var(--text) }
.bo_tit a:hover { color: var(--forest-light); text-decoration: none }
.bo_current { color: var(--r); font-weight:700 }

/* 댓글 수 배지 */
#bo_list .cnt_cmt {
  background: var(--forest-pale);
  color: var(--forest);
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  vertical-align: middle;
}

/* 아이콘 */
#bo_list .profile_img img { border-radius:50% }
#bo_list .bo_tit .title_icon { margin-right:2px }
#bo_list .bo_tit .fa-heart { color: var(--r) }
#bo_list .bo_tit .fa-lock {
  display:inline-block; line-height:14px; width:16px; font-size:12px;
  color: var(--text-soft); background: var(--forest-mist);
  text-align:center; border-radius:2px; border:1px solid var(--forest-pale); vertical-align:middle
}
#bo_list .bo_tit .new_icon {
  display:inline-block; width:16px; line-height:16px; font-size:0.72rem;
  color:#23db79; background:#b9ffda; text-align:center;
  border-radius:2px; margin-left:2px; font-weight:700; vertical-align:middle
}
#bo_list .bo_tit .hot_icon {
  display:inline-block; width:16px; line-height:16px; font-size:0.72rem;
  color: var(--r); background:#ffb9b9; text-align:center; border-radius:2px; vertical-align:middle
}
#bo_list .bo_tit .fa-caret-right { color:#bbb }
#bo_list .bo_tit .fa-download {
  display:inline-block; width:16px; line-height:16px; font-size:0.72rem;
  color:#daae37; background:#ffefb9; text-align:center; border-radius:2px; margin-left:5px; vertical-align:middle
}
#bo_list .bo_tit .fa-link {
  display:inline-block; width:16px; line-height:16px; font-size:0.72rem;
  color: var(--p); background:#edd3fd; text-align:center; border-radius:2px; margin-left:5px; vertical-align:middle
}
.td_num strong { color: var(--text) }


/* ============================================
   ## 카테고리 필터
   ============================================ */
#bo_cate { margin: 16px 0 }
#bo_cate h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_cate ul { zoom:1 }
#bo_cate ul:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_cate li { display:inline-block; padding:3px }
#bo_cate a {
  display: block;
  line-height: 26px;
  padding: 3px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--forest-pale);
  color: var(--text-soft);
  font-size: 0.82rem;
  transition: all 0.13s;
  background: #fff;
}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {
  text-decoration: none;
  background: var(--forest-light);
  color: #fff;
  border-color: var(--forest-light);
}
#bo_cate #bo_cate_on {
  background: var(--forest);
  color: #fff;
  font-weight: 700;
  border-color: var(--forest);
  box-shadow: 0 2px 8px rgba(45,106,79,0.18);
}
.td_subject img { margin-left:5px }


/* ============================================
   ## 상단 버튼 / 페이지 정보
   ============================================ */
#bo_btn_top { margin: 10px 0 }
#bo_btn_top:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_fx { margin-bottom: 5px; float: right; zoom: 1 }
.bo_fx:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_fx ul { margin:0; padding:0; list-style:none }

#bo_list_total {
  float: left;
  line-height: 34px;
  font-size: 0.82rem;
  color: var(--text-soft);
}

.btn_bo_user { float:right; margin:0; padding:0; list-style:none }
.btn_bo_user li { float:left; width:40px; text-align:center; margin-left:5px }
.btn_bo_user > li { position:relative }
.btn_bo_adm { float:left }
.btn_bo_adm li { float:left; margin-right:5px }
.btn_bo_adm input {
  padding: 0 8px; border:0;
  background: var(--forest-mist);
  color: var(--text-soft);
  vertical-align: middle;
  border-radius: var(--radius-xs);
}

/* 게시판 아이콘 버튼 (목록 상단 우측) */
a.btn_b01, .btn_b01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--forest-pale);
  background: #fff;
  color: var(--text-soft);
  font-size: 15px;
  transition: all 0.15s;
  text-decoration: none;
  cursor: pointer;
}
a.btn_b01:hover, .btn_b01:hover {
  background: var(--forest-mist);
  border-color: var(--forest-light);
  color: var(--forest);
  text-decoration: none;
}
a.btn_admin, .btn_admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #ffd6de;
  background: #fff6f8;
  color: var(--r);
  font-size: 15px;
  transition: all 0.15s;
  text-decoration: none;
}
a.btn_admin:hover, .btn_admin:hover {
  background: #ffe8ec;
  color: var(--r);
  text-decoration: none;
}

/* 더보기 드롭다운 */
.more_opt {
  display: none; position: absolute; top: 45px; right: 0;
  background: #fff;
  border: 1px solid rgba(45,106,79,0.14);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 999;
}
.more_opt:before {
  content:""; position:absolute; top:-8px; right:13px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent rgba(45,106,79,0.14) transparent
}
.more_opt:after {
  content:""; position:absolute; top:-6px; right:13px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent #fff transparent
}
.more_opt li {
  border-bottom: 1px solid var(--forest-pale); padding: 9px 14px;
  float: inherit; width: 90px; margin: 0;
  color: var(--text-soft); text-align: left; font-size: 0.82rem;
}
.more_opt li:last-child { border-bottom:0 }
.more_opt li button, .more_opt li a {
  width:100%; border:0; background:#fff; color: var(--text-soft); font-size:0.82rem;
}
.more_opt li:hover { background: var(--forest-mist) }
.more_opt li:hover a, .more_opt li:hover button { color: var(--forest) }
.more_opt li i { float:right; line-height:20px }


/* ============================================
   ## 검색 팝업
   ============================================ */
.bo_sch_wrap {
  display:none; width:100%; height:100%;
  position:fixed; top:0; left:0; z-index:999
}
.bo_sch {
  position:absolute; top:50%; left:50%;
  background:#fff; text-align:left;
  width:340px; max-height:300px;
  margin-left:-170px; margin-top:-180px;
  overflow-y:auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--forest-pale);
}
.bo_sch:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_sch h3 {
  padding: 14px 18px;
  border-bottom: 1px solid var(--forest-pale);
  font-size: 0.9rem; color: var(--forest); font-weight: 700;
}
.bo_sch form { padding: 15px; display: block }
.bo_sch select {
  border: 1px solid var(--forest-pale);
  width: 100%; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--forest-mist);
  color: var(--text); font-size: 0.85rem; padding: 0 8px;
}
.bo_sch .sch_bar {
  display:inline-block; width:100%; clear:both; margin-top:12px;
  border: 1px solid var(--forest-pale);
  border-radius: var(--radius-sm);
  overflow: hidden; background: var(--forest-mist);
}
.bo_sch .sch_input {
  width:250px; height:38px; border:0; padding:0 12px;
  background:transparent; float:left;
  font-size:0.85rem; color: var(--text);
}
.bo_sch .sch_btn {
  height:38px; float:right; color: var(--forest);
  background: var(--forest-pale); border:0; width:40px; font-size:15px;
  transition: background 0.13s;
}
.bo_sch .sch_btn:hover { background: var(--forest-light); color:#fff }
.bo_sch .bo_sch_cls {
  position:absolute; right:0; top:0;
  color: var(--text-soft); border:0; padding:12px 15px;
  font-size:16px; background:#fff; transition: color 0.13s;
}
.bo_sch .bo_sch_cls:hover { color: var(--r) }
.bo_sch_bg { background:rgba(0,0,0,0.08); width:100%; height:100% }


/* ============================================
   ## 공통 체크박스
   ============================================ */
.selec_chk { position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden }
.chk_box { position: relative }
.chk_box input[type="checkbox"] + label { position:relative; color: var(--text-soft) }
.chk_box input[type="checkbox"] + label:hover { color: var(--forest) }
.chk_box input[type="checkbox"] + label span {
  float:left; width:15px; height:15px; display:block;
  background:#fff; border:1.5px solid #C5D8CF; border-radius:4px;
  transition: background 0.13s, border-color 0.13s;
}
.write_div .chk_box input[type="checkbox"] + label,
.bo_vc_w .chk_box input[type="checkbox"] + label { padding-left: 20px }
.write_div .chk_box input[type="checkbox"] + label span,
.bo_vc_w .chk_box input[type="checkbox"] + label span {
  position:absolute; top:2px; left:0; width:15px; height:15px;
  display:block; margin:0; background:#fff; border:1.5px solid #C5D8CF; border-radius:4px;
}
.chk_box input[type="checkbox"]:checked + label { color: var(--text) }
.chk_box input[type="checkbox"]:checked + label span {
  background: var(--forest-light) url(./img/chk.png) no-repeat 50% 50%;
  border-color: var(--forest-light); border-radius:4px;
}


/* ============================================
   ## 글쓰기 폼 (write.skin.php)
   ============================================ */
#char_count_desc {
  display:block; margin:0 0 5px; padding:0;
  font-size:0.82rem; color: var(--text-soft);
}
#char_count_wrap { margin:5px 0 0; text-align:right; font-size:0.82rem; color: var(--text-soft) }
#char_count { font-weight:700; color: var(--forest) }

/* 자동저장 팝업 */
#autosave_wrapper { position: relative }
#autosave_pop {
  display:none; z-index:10; position:absolute !important;
  top:34px; right:0; width:350px;
  height:auto !important; max-height:180px;
  border: 1px solid var(--forest-pale);
  background:#fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
#autosave_pop:before {
  content:""; position:absolute; top:-8px; right:45px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent var(--forest-pale) transparent
}
#autosave_pop:after {
  content:""; position:absolute; top:-7px; right:45px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent #fff transparent
}
html.no-overflowscrolling #autosave_pop { height:auto; max-height:10000px !important }
#autosave_pop strong { position:absolute; font-size:0; line-height:0; overflow:hidden }
#autosave_pop div { text-align:center; margin:0 !important }
#autosave_pop button { margin:0; padding:0; border:0 }
#autosave_pop ul {
  padding:10px; border-top:1px solid var(--forest-pale);
  list-style:none; overflow-y:scroll; height:130px;
  border-bottom:1px solid var(--forest-pale);
}
#autosave_pop li {
  padding:7px 8px; border-bottom:2px solid #fff;
  background: var(--forest-mist); border-radius: var(--radius-xs);
  margin-bottom:3px; zoom:1;
}
#autosave_pop li:after { display:block;visibility:hidden;clear:both;content:"" }
#autosave_pop a { display:block; float:left; font-size:0.82rem; color: var(--text) }
#autosave_pop span { display:block; float:right; font-size:0.75rem; color: var(--text-soft) }
.autosave_close {
  cursor:pointer; width:100%; height:30px; background:none;
  color: var(--text-soft); font-weight:600; font-size:0.82rem;
  transition: background 0.13s;
}
.autosave_close:hover { background: var(--forest-mist); color: var(--forest) }
.autosave_content { display:none }
.autosave_del {
  background:url(./img/close_btn.png) no-repeat 50% 50%;
  text-indent:-999px; overflow:hidden; height:20px; width:20px;
}

/* 글쓰기 섹션 */
#bo_w .bo_v_option li { display:inline-block; float:left; text-align:left; margin:0 5px 0 0 }
#bo_w .bo_v_option li label { vertical-align:baseline }
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span { margin-left:0; margin-right:5px }
#bo_w .write_div { margin:10px 0; position:relative }
#bo_w .write_div:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_w .bo_w_info:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_w .bo_w_info .frm_input { float:left; margin-bottom:1% }
#bo_w #wr_password, #bo_w #wr_homepage { margin-left:1% }
#bo_w .wr_content.smarteditor2 iframe { background:#fff }
#bo_w .bo_w_tit { position:relative }
#bo_w .bo_w_tit .frm_input { padding-right:130px }
#bo_w .bo_w_tit #btn_autosave { position:absolute; top:5px; right:5px; line-height:30px; height:30px }

/* 링크 입력줄 */
#bo_w .bo_w_link { position:relative }
#bo_w .bo_w_link label {
  position:absolute; top:1px; left:1px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  height:38px; line-height:38px; width:40px;
  font-size:1.1em; text-align:center;
  color: var(--text-soft); background: var(--forest-mist);
}
#bo_w .bo_w_link .frm_input { padding-left:50px }

/* 파일 첨부줄 */
#bo_w .bo_w_flie { position:relative }
#bo_w .bo_w_flie .lb_icon {
  flex-shrink: 0;
  width:40px; height:40px; line-height:40px;
  text-align:center; font-size:1.1em;
  color: var(--text-soft); background: var(--forest-mist);
  border-right: 1px solid #d0d0d0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
#bo_w .bo_w_flie .frm_file { padding-left:20px; margin-top:3px }
#bo_w .bo_w_flie .file_wr {
  border:1px solid #d0d0d0;
  background: var(--forest-mist); color: var(--text);
  vertical-align:middle; border-radius: var(--radius-sm);
  height:40px; margin:0; padding:0;
  display:flex; align-items:center; overflow:hidden;
  position:relative;
}
#bo_w .bo_w_flie .frm_input { margin:10px 0 0 }
#bo_w .bo_w_flie .file_del { position:absolute; top:10px; right:10px; font-size:0.82rem; color: var(--text-soft) }
#bo_w .bo_w_select select {
  border:1px solid #d0d0d0;
  background: var(--forest-mist);
  width:100%; height:40px;
  border-radius: var(--radius-sm);
  color: var(--text); font-size:0.85rem; padding:0 10px;
}

/* 취소 / 작성완료 버튼 */
#bo_w .btn_confirm {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
#bo_w .btn_confirm .btn_cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 1.5px solid #d0d0d0;
  background: #fff;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
#bo_w .btn_confirm .btn_cancel:hover {
  background: #f5f5f5;
  color: var(--text);
  text-decoration: none;
}
#bo_w .btn_confirm .btn_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border: none;
  background: linear-gradient(135deg, var(--forest-light), var(--forest));
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
#bo_w .btn_confirm .btn_submit:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}


/* ============================================
   ## 게시물 읽기 (view.skin.php)
   ============================================ */
#bo_v {
  margin-bottom: 20px;
  background: #fff;
  box-sizing: border-box;
}

#bo_v_table {
  position:absolute; top:0; right:16px; margin:0; padding:0 10px; height:25px;
  background: var(--r); color:#fff; font-weight:700; line-height:2.2em;
  border-radius:0 0 var(--radius-xs) var(--radius-xs); font-size:0.82rem;
}

#bo_v_title {}
#bo_v_title .bo_v_cate {
  display:inline-block; line-height:22px;
  background: var(--forest-pale); color: var(--forest);
  padding:0 10px; border-radius: var(--radius-xs);
  font-size:0.75rem; font-weight:700;
}
#bo_v_title .bo_v_tit {
  display:block; font-size:1.5rem;
  margin:8px 0 0; word-break:break-all;
  color: var(--text); font-weight:700; line-height:1.4;
}

#bo_v_info {
  margin:0; border-bottom:1px solid var(--forest-pale);
  color: var(--text-soft);
}
#bo_v_info:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_v_info h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_v_info .profile_info { margin:14px 0 12px; 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:44px; height:44px; object-fit:cover }
#bo_v_info .profile_info .profile_info_ct { float:left; padding:4px 0; line-height:20px }
#bo_v_info strong { display:inline-block; margin:0 8px 0 0; font-weight:normal; font-size:0.85rem }
#bo_v_info .sv_member, #bo_v_info .sv_guest,
#bo_v_info .member, #bo_v_info .guest { font-weight:700; color: var(--text) }
#bo_v_info .profile_img { display:none }
#bo_v_info .sv_member { color: var(--text) }
#bo_v_info .if_date { margin:0; color: var(--text-soft); font-size:0.8rem }

#bo_v_file h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_v_file ul { margin:0; list-style:none }
#bo_v_file li {
  padding:11px 16px; position:relative; margin:7px 0;
  border:1px solid var(--forest-pale); border-radius: var(--radius-sm);
  background: var(--forest-mist); transition: border-color 0.13s, background 0.13s;
}
#bo_v_file li i { float:left; color: var(--text-soft); font-size:1.9em; margin-right:14px }
#bo_v_file a { float:left; display:block; text-decoration:none; word-wrap:break-word; color: var(--text); font-size:0.85rem }
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active { text-decoration:underline; color: var(--forest) }
#bo_v_file img { float:left; margin:0 10px 0 0 }
#bo_v_file .bo_v_file_cnt { color: var(--text-soft); font-size:0.75rem }
#bo_v_file li:hover { border-color: var(--forest-light); background:#fff }
#bo_v_file li:hover i { color: var(--forest-light) }
#bo_v_file li:hover .bo_v_file_cnt { color: var(--forest) }

#bo_v_link h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_v_link ul { margin:0; list-style:none }
#bo_v_link li {
  padding:11px 16px; position:relative; margin:7px 0;
  border:1px solid var(--forest-pale); border-radius: var(--radius-sm);
  background: var(--forest-mist); transition: all 0.13s;
}
#bo_v_link li i { float:left; color: var(--text-soft); font-size:1.9em; margin-right:14px }
#bo_v_link a { float:left; display:block; text-decoration:none; word-wrap:break-word; color: var(--text); font-size:0.85rem }
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active { text-decoration:underline; color: var(--forest) }
#bo_v_link .bo_v_link_cnt { color: var(--text-soft); font-size:0.75rem }
#bo_v_link li:hover { border-color: var(--forest-light); background:#fff }
#bo_v_link li:hover i { color: var(--forest-light) }
#bo_v_link li:hover .bo_v_link_cnt { color: var(--forest) }

#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_bot { zoom:1 }
#bo_v_bot:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_v_bot h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_v_bot ul { padding:0; list-style:none }

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

.bo_v_nb {
  position:relative; margin:18px 0; clear:both; text-align:left;
  background:#fff; border-radius: var(--radius-sm);
  border:1px solid var(--forest-pale); overflow:hidden;
}
.bo_v_nb:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_v_nb li {
  border-top:1px solid var(--forest-pale); padding:11px 16px;
  transition: background 0.13s;
}
.bo_v_nb li:first-child { border-top:0 }
.bo_v_nb li:hover { background: var(--forest-mist) }
.bo_v_nb li i { font-size:12px; color: var(--text-soft) }
.bo_v_nb li .nb_tit { display:inline-block; padding-right:16px; color: var(--text-soft); font-size:0.82rem }
.bo_v_nb li .nb_date { float:right; color: var(--text-soft); font-size:0.78rem }
.bo_v_nb li a { color: var(--text); font-size:0.87rem }
.bo_v_nb li a:hover { color: var(--forest-light); text-decoration:none }

#bo_v_atc { min-height:200px; height:auto !important }
#bo_v_atc_title { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_v_img { width:100%; overflow:hidden; zoom:1 }
#bo_v_img:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_v_img a.view_image { display:block }
#bo_v_img img { margin-bottom:20px; max-width:100%; height:auto }

#bo_v_con {
  margin:14px 0 26px; width:100%; line-height:1.85em;
  min-height:200px; word-break:break-all; overflow:hidden;
  font-size:0.92rem; color: var(--text);
}
#bo_v_con a { color: var(--forest); text-decoration:underline }
#bo_v_con img { max-width:100%; height:auto }

#bo_v_act { margin-bottom:24px; text-align:center }
#bo_v_act .bo_v_act_gng { position:relative }
#bo_v_act a { margin-right:5px; vertical-align:middle; color: var(--text-soft) }
#bo_v_act a:hover { background:#fff; color: var(--r); border-color: var(--r) }
#bo_v_act i { font-size:1.3em; margin-right:5px }
#bo_v_act_good, #bo_v_act_nogood {
  display:none; position:absolute; top:30px; left:0;
  z-index:9999; padding:8px 12px; width:160px;
  background: var(--forest); color:#fff; text-align:center;
  border-radius: var(--radius-sm); font-size:0.82rem;
}
#bo_v_act .bo_v_good {
  display:inline-block; border:1.5px solid var(--forest-pale);
  width:72px; line-height:46px; border-radius:30px; transition: all 0.13s;
}
#bo_v_act .bo_v_nogood {
  display:inline-block; border:1.5px solid var(--forest-pale);
  width:72px; line-height:46px; border-radius:30px; transition: all 0.13s;
}

#bo_v_share { position:relative; padding:14px 0 }
#bo_v_share:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_v_share .btn {
  padding:0 10px; color: var(--text-soft); font-weight:normal;
  font-size:0.88rem; width:80px; line-height:35px; height:35px;
  border-color: var(--forest-pale); border-radius: var(--radius-sm);
}
#bo_v_share .btn:hover { background: var(--forest-mist) }
#bo_v_share .btn i { margin-right:5px; color: var(--text-soft); vertical-align:middle }

#bo_v_sns { padding:0; list-style:none; zoom:1; float:left; display:inline-block }
#bo_v_sns:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_v_sns li { float:left; width:130px; margin-right:5px; text-align:left }
#bo_v_sns li a { height:34px; line-height:34px; text-align:center; border-radius: var(--radius-xs); color:#fff; font-size:0.88rem }
#bo_v_sns li img { vertical-align:middle; margin-right:5px }
#bo_v_sns li .sns_f { display:block; background:#3b5997 }
#bo_v_sns li .sns_t { display:block; background:#09aeee }
#bo_v_sns li .sns_g { display:block; background:#ea4026 }
#bo_v_sns li .sns_k { display:block; background:#fbe300; color: var(--text) }


/* ============================================
   ## 댓글 (view_comment.skin.php)
   ============================================ */
.cmt_btn {
  width:100%; text-align:left; border:0;
  border-bottom:2px solid var(--forest-pale);
  background:#fff; font-weight:700; margin:26px 0 0; padding:0 0 13px;
  color: var(--text); cursor:pointer;
}
.cmt_btn span.total {
  position:relative; display:inline-block;
  margin-right:5px; font-size:0.95rem; color: var(--forest);
}
.cmt_btn span.cmt_more {
  float:right; display:inline-block; width:15px; height:10px;
  background:url(./img/btn_cmt.png) no-repeat right 2px; margin-top:5px;
}
.cmt_btn_op span.cmt_more { background-position:right -8px }
.cmt_btn b { font-size:1.1em; color: var(--text) }
.cmt_btn span.total:after {
  position:absolute; bottom:-15px; left:0;
  display:inline-block; background: var(--forest);
  content:""; width:100%; height:2px;
}

#bo_vc {}
#bo_vc h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_vc article {
  margin:14px 0; position:relative;
  border-bottom:1px solid var(--forest-pale); padding-bottom:2px;
}
#bo_vc article:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_vc article .profile_img img { border-radius:50% }
#bo_vc article .pf_img { float:left; margin-right:11px }
#bo_vc article .pf_img img { border-radius:50%; width:42px; height:42px; object-fit:cover }
#bo_vc article .cm_wrap { float:left; max-width:870px; width:90% }
#bo_vc header { position:relative; width:100% }
#bo_vc header:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_vc header .profile_img { display:none }
#bo_vc header .icon_reply { position:absolute; top:15px; left:-20px }
#bo_vc .member, #bo_vc .guest,
#bo_vc .sv_member, #bo_vc .sv_guest { font-weight:700; color: var(--text) }
.bo_vc_hdinfo { color: var(--text-soft); font-size:0.8rem }
#bo_vc h1 { position:absolute;font-size:0;line-height:0;overflow:hidden }
#bo_vc .cmt_contents { line-height:1.8em; padding:4px 0 16px; font-size:0.88rem }
#bo_vc p a { text-decoration:underline; color: var(--forest) }
#bo_vc p a.s_cmt { text-decoration:underline; color: var(--r) }
#bo_vc_empty { margin:0; padding:50px 0 !important; color: var(--text-soft); text-align:center; font-size:0.88rem }
#bo_vc #bo_vc_winfo { float:left }
#bo_vc .bo_vl_opt { position:absolute; top:0; right:0 }

.bo_vc_act {
  display:none; position:absolute; right:0; top:40px;
  min-width:70px; text-align:right;
  border:1px solid var(--forest-pale); border-radius: var(--radius-sm);
  margin:0; list-style:none; background:#fff;
  box-shadow: var(--shadow-sm); z-index:9999;
}
.bo_vc_act:before {
  content:""; position:absolute; top:-8px; right:5px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent var(--forest-pale) transparent
}
.bo_vc_act:after {
  content:""; position:absolute; top:-6px; right:5px;
  width:0; height:0; border-style:solid; border-width:0 6px 8px 6px;
  border-color:transparent transparent #fff transparent
}
.bo_vc_act li { border-bottom:1px solid var(--forest-pale) }
.bo_vc_act li:last-child { border-bottom:0 }
.bo_vc_act li a {
  display:inline-block; padding:9px 14px;
  font-size:0.82rem; color: var(--text-soft); transition: color 0.13s;
}
.bo_vc_act li a:hover { color: var(--forest) }

.bo_vc_w { position:relative; margin:10px 0; display:block }
.bo_vc_w:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_vc_w h2 { position:absolute;font-size:0;line-height:0;overflow:hidden }
.bo_vc_w #char_cnt { display:block; margin:0 0 5px; font-size:0.78rem; color: var(--text-soft) }
.bo_vc_w textarea {
  border:1px solid var(--forest-pale);
  background: var(--forest-mist);
  color: var(--text);
  vertical-align:middle;
  border-radius: var(--radius-sm);
  padding:10px 14px; width:100%; height:110px;
  font-family:'Gowun Dodum','Noto Sans KR',sans-serif;
  font-size:0.88rem; line-height:1.7; resize:vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing:border-box;
}
.bo_vc_w textarea:focus {
  border-color: var(--forest-light);
  box-shadow:0 0 0 3px rgba(64,145,108,0.13);
  background:#fff; outline:none;
}
#wr_secret {}
.bo_vc_w_info { margin:10px 0; float:left }
.bo_vc_w_info:after { display:block;visibility:hidden;clear:both;content:"" }
.bo_vc_w_info .frm_input { float:left; margin-right:5px }
.bo_vc_w_info #captcha { padding-top:10px; display:block; clear:both }
.bo_vc_w .btn_confirm { clear:both; margin-top:10px }
.bo_vc_w .btn_confirm label {
  display:inline-block; margin-right:10px;
  border-radius: var(--radius-xs); font-size:1.3em;
  text-align:center; color: var(--forest);
}
.bo_vc_w .btn_submit {
  height:42px; padding:0 20px;
  border-radius: var(--radius-sm);
  font-weight:700; font-size:0.9rem;
  background:linear-gradient(135deg, var(--forest-light), var(--forest));
  color:#fff; border:none; cursor:pointer;
  transition: opacity 0.18s, transform 0.1s;
}
.bo_vc_w .btn_submit:hover { opacity:0.88; transform:translateY(-1px) }
.bo_vc_w .btn_confirm .secret_cm label { font-size:0.88rem !important }
.bo_vc_w_wr:after { display:block;visibility:hidden;clear:both;content:"" }
.secret_cm { display:inline-block; float:left }

#bo_vc_send_sns { display:inline-block; float:left }
#bo_vc_sns { display:inline-block; margin:0; padding:0; list-style:none; zoom:1 }
#bo_vc_sns:after { display:block;visibility:hidden;clear:both;content:"" }
#bo_vc_sns li { float:left; margin:0 5px 0 0 }
#bo_vc_sns .sns_li_f { border-radius: var(--radius-xs); background:#3a589b; height:38px; line-height:38px; padding:0 0 0 10px }
#bo_vc_sns .sns_li_t { border-radius: var(--radius-xs); background:#00aced; height:38px; line-height:38px; padding:0 0 0 10px }
#bo_vc_sns .sns_li_off { background:#bbb }
#bo_vc_sns a { display:inline-block; padding:0 12px 0 5px }
#bo_vc_sns input { margin:0 5px 0 0 }
