@charset "utf-8";
/*
 * ECHO Microwave — Board Skin (news)
 * 실제 렌더링 HTML 기준 전면 재작성
 * 로드 순서: default.css → font-awesome → style.css(본 파일) → theme/style.css → page.css
 * → 테마 CSS가 뒤에 오므로 레이아웃 핵심값은 !important 사용
 */

/* ═══════════════════════════════════════════════════
   0. CSS 변수 (모든 보드 컨테이너에 공통 적용)
═══════════════════════════════════════════════════ */
#bo_list, #bo_v, #bo_w, #bo_vc, .bo_vc_w {
  --accent:        #0b2e8d;
  --accent-hover:  #081f5e;
  --accent-light:  #1e4bc9;
  --accent-sub:    rgba(11,46,141,.06);
  --accent-sub2:   rgba(11,46,141,.13);
  --gray-50:       #f8f9fb;
  --gray-100:      #eef0f4;
  --gray-150:      #e1e4eb;
  --gray-200:      #c8ccd8;
  --gray-300:      #a8aec0;
  --gray-400:      #8d93a5;
  --gray-500:      #6b7182;
  --gray-600:      #4a4f5e;
  --gray-700:      #343842;
  --gray-800:      #1f232c;
  --gray-900:      #0e1119;
  --radius-sm:     6px;
  --radius:        8px;
  --radius-lg:     12px;
  --font:          'Noto Sans KR', 'DM Sans', -apple-system, sans-serif;
  --shadow:        0 4px 12px rgba(15,23,42,.07);
  --shadow-lg:     0 12px 32px rgba(15,23,42,.10);
  --nav-h:         72px; /* navbar 높이 — common.js/style.css 확인 후 맞게 조정 */
}

/* ═══════════════════════════════════════════════════
   1. RESET — default.css + 테마 CSS 간섭 제거
      box 모델, 링크색, 테이블, 폼 등
═══════════════════════════════════════════════════ */
#bo_list *, #bo_v *, #bo_w *, #bo_vc *, .bo_vc_w * {
  box-sizing: border-box;
  /* gnuboard default.css의 a 색상/underline 초기화 */
}
#bo_list a, #bo_v a, #bo_w a, #bo_vc a, .bo_vc_w a {
  color: inherit;
  text-decoration: none;
}
/* gnuboard default.css: table에 border 강제로 넣는 경우 초기화 */
#bo_list table,
#bo_list th,
#bo_list td {
  border: 0 !important;    /* default.css border 초기화 */
  padding: 0;              /* 아래 개별 td에서 재정의 */
}
#bo_list caption {
  position: absolute !important;
  font-size: 0 !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
}
/* gnuboard default.css 폼 초기화 */
#bo_w input, #bo_w select, #bo_w textarea,
#bo_vc input, #bo_vc textarea, .bo_vc_w input, .bo_vc_w textarea {
  font-family: var(--font);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════
   2. 컨테이너 레이아웃
      — 인라인 width:100% 무력화 + max-width 1200px + nav 여백
      — !important 필수: 테마 CSS + 인라인 style 동시 대응
═══════════════════════════════════════════════════ */
#bo_list,
#bo_v,
#bo_w {
  max-width: 1200px !important;
  width: auto !important;          /* 인라인 width:100% 덮어쓰기 */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: calc(var(--nav-h) + 40px) !important;
  padding-bottom: 80px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  font-family: var(--font);
  color: var(--gray-800);
  letter-spacing: -0.01em;
}
/* clearfix */
#bo_list::after { display:block; visibility:hidden; clear:both; content:""; }

/* ═══════════════════════════════════════════════════
   3. 게시판 목록 (list.skin.php)
═══════════════════════════════════════════════════ */

/* 카테고리 */
#bo_cate { margin: 0 0 24px; }
#bo_cate h2 { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }
#bo_cate ul, #bo_cate #bo_cate_ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#bo_cate a {
  display: block;
  padding: 7px 18px;
  border-radius: 100px;
  border: 1px solid var(--gray-150);
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
#bo_cate a:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-sub); }
#bo_cate #bo_cate_on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* 상단 버튼 행 */
#bo_btn_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
#bo_list_total { font-size:13px; color:var(--gray-500); }
#bo_list_total span { color:var(--gray-800); font-weight:600; margin-right:8px; }

/* 공통 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--gray-150);
  background: #fff;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none !important; /* default.css underline 제거 */
}
.btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-sub); text-decoration:none !important; }
.btn_b01 { border-color:var(--gray-150); }
.btn_submit {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
}
.btn_submit:hover { background:var(--accent-hover) !important; border-color:var(--accent-hover) !important; }
.btn_cancel { color:var(--gray-600); }
.btn_admin { background:var(--gray-800); border-color:var(--gray-800); color:#fff !important; }
.btn_admin:hover { background:var(--gray-900); border-color:var(--gray-900); }

.btn_bo_user { margin:0; padding:0; list-style:none; display:flex; gap:8px; }
.btn_bo_user li { position:relative; }

/* 드롭다운 옵션 */
.more_opt {
  display: none;
  position: absolute;
  top: 44px; right: 0;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  min-width: 140px;
  padding: 4px;
  list-style: none;
  margin: 0;
}
.more_opt li { padding:0; margin:0; border:0 !important; }
.more_opt li a,
.more_opt li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--gray-700) !important;
  background: #fff;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font);
  text-decoration: none !important;
}
.more_opt li a:hover,
.more_opt li button:hover { background:var(--accent-sub); color:var(--accent) !important; }
.more_opt i { margin-left:8px; font-size:12px; }

/* 체크박스 커스텀 */
.selec_chk { position:absolute; top:0; left:0; width:0; height:0; opacity:0; z-index:-1; }
.chk_box { position:relative; }
.chk_box input[type="checkbox"] + label {
  position: relative;
  color: var(--gray-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chk_box input[type="checkbox"] + label span {
  display: inline-block;
  width: 17px; height: 17px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 4px;
  transition: all .15s;
  position: relative;
  flex-shrink: 0;
}
.chk_box input[type="checkbox"]:checked + label span { background:var(--accent); border-color:var(--accent); }
.chk_box input[type="checkbox"]:checked + label span::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.all_chk label { display:inline-flex; align-items:center; justify-content:center; }

/* 테이블 */
.tbl_head01 {
  overflow: hidden;
  border-top: 2px solid var(--gray-900);
  border-bottom: 1px solid var(--gray-150);
  background: #fff;
}
.tbl_head01 table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: 14px;
  border: 0 !important;
}
.tbl_head01 thead tr { border-bottom: 1px solid var(--gray-150); }
.tbl_head01 thead th {
  padding: 15px 10px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gray-50);
  border: 0 !important;
  text-align: center;
}
.tbl_head01 thead th a { color:var(--gray-500); text-decoration:none !important; }
.tbl_head01 thead th a:hover { color:var(--accent); }

.tbl_head01 tbody tr { border-bottom: 1px solid var(--gray-100); transition:background .12s; }
.tbl_head01 tbody tr:hover { background:var(--accent-sub); }
.tbl_head01 tbody td {
  padding: 15px 10px !important;
  color: var(--gray-700);
  vertical-align: middle;
  border: 0 !important;
}
.tbl_head01 .empty_table {
  padding: 80px 0 !important;
  color: var(--gray-400);
  text-align: center;
  font-size: 14px;
}

/* 공지 행 */
.bo_notice td { background: linear-gradient(90deg, rgba(11,46,141,.03), transparent) !important; }
.notice_icon {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.bo_current {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--accent-sub2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* 제목 셀 */
.td_subject { text-align:left !important; }
.bo_tit { display:block; }
.bo_tit a {
  color: var(--gray-800) !important;
  font-weight: 500;
  font-size: 14px;
  transition: color .15s;
  text-decoration: none !important;
}
.bo_tit a:hover { color:var(--accent) !important; }
.bo_cate_link {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-sub);
  color: var(--accent) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
}
.cnt_cmt {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--accent-sub);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.new_icon {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: .02em;
}

/* 숫자/이름/날짜 셀 */
.td_num, .td_num2 {
  width: 72px;
  text-align: center !important;
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.td_name {
  width: 110px;
  text-align: center !important;
  color: var(--gray-600);
  font-size: 13px;
}
.td_datetime {
  width: 90px;
  text-align: center !important;
  color: var(--gray-400);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.td_chk { width:40px; text-align:center !important; }

/* 페이지네이션 */
.pg_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 28px 0 0;
}
.pg_wrap a,
.pg_wrap strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--gray-150);
  color: var(--gray-600) !important;
  background: #fff;
  transition: all .15s;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
}
.pg_wrap a:hover { border-color:var(--accent); color:var(--accent) !important; background:var(--accent-sub); }
.pg_wrap strong { background:var(--accent); border-color:var(--accent); color:#fff !important; font-weight:700; }

/* 검색창 오버레이 */
.bo_sch_wrap {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 99999;
}
.bo_sch {
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 420px;
  max-width: 90%;
}
.bo_sch h3 {
  padding: 20px 24px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-100);
  margin: 0;
}
.bo_sch form { padding: 20px 24px 24px; }
.bo_sch select {
  width: 100%; height: 44px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  color: var(--gray-800);
  margin-bottom: 10px;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.bo_sch select:focus { border-color:var(--accent); }
.bo_sch .sch_bar {
  display: flex;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s;
}
.bo_sch .sch_bar:focus-within { border-color:var(--accent); }
.bo_sch .sch_input { flex:1; height:44px; border:0; padding:0 14px; font-size:14px; outline:none; font-family:var(--font); }
.bo_sch .sch_btn { width:48px; height:44px; border:0; background:var(--accent); color:#fff; cursor:pointer; font-size:14px; }
.bo_sch .sch_btn:hover { background:var(--accent-hover); }
.bo_sch .bo_sch_cls {
  position: absolute; right:8px; top:8px;
  width:36px; height:36px;
  border:0; background:none;
  color:var(--gray-400); font-size:16px; cursor:pointer;
  border-radius: var(--radius);
}
.bo_sch .bo_sch_cls:hover { background:var(--gray-50); color:var(--gray-700); }
.bo_sch_bg { background:rgba(14,17,25,.4); width:100%; height:100%; }

/* 하단 버튼 행 */
.bo_fx { margin-top:16px; display:flex; justify-content:flex-end; }

/* ═══════════════════════════════════════════════════
   4. 게시물 읽기 (view.skin.php)
   실제 구조: #bo_v > header > #bo_v_title
                         > section#bo_v_info
                         > section#bo_v_atc
                         > section#bo_v_file
                         > ul.bo_v_nb
                         > button.cmt_btn
                         > section#bo_vc
                         > aside#bo_vc_w
═══════════════════════════════════════════════════ */

/* header / 제목 */
#bo_v > header { border-top: 2px solid var(--gray-900); }
#bo_v_title {
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--gray-150);
  color: var(--gray-900) !important;
  margin: 0;
}
.bo_v_cate {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-sub2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.bo_v_tit { vertical-align: middle; }

/* 글 정보 행 */
#bo_v_info {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 16px;
  flex-wrap: wrap;
}
#bo_v_info h2 { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }

.profile_info { display:flex; align-items:center; gap:12px; }
.pf_img img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.profile_info_ct { font-size:13px; color:var(--gray-500); line-height:1.6; }
.profile_info_ct strong {
  color: var(--gray-800) !important;
  font-weight: 600;
  margin-right: 12px;
}
.profile_info_ct strong a { color:var(--gray-800) !important; text-decoration:none !important; }
.profile_info_ct strong a:hover { color:var(--accent) !important; }
.profile_info_ct .if_date { color:var(--gray-400); font-size:12px; font-variant-numeric:tabular-nums; }
.profile_info_ct i { margin-right:4px; color:var(--gray-400); }

#bo_v_top { margin-left:auto; }
.bo_v_com { display:flex; gap:6px; margin:0; padding:0; list-style:none; }
.bo_v_com li { position:relative; }

/* 본문 영역 */
#bo_v_atc { padding: 36px 0 44px; }
#bo_v_atc h2#bo_v_atc_title { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }

#bo_v_share { padding:0 0 18px; display:flex; justify-content:flex-end; gap:8px; }
#bo_v_share .btn { height:34px; font-size:12px; padding:0 14px; }

#bo_v_img { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
#bo_v_img img { max-width:100%; border-radius:var(--radius); }

#bo_v_con {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--gray-800) !important;
  min-height: 120px;
  word-break: break-word;
}
#bo_v_con p { margin: 0 0 1em; }
#bo_v_con img { max-width:100%; height:auto; border-radius:var(--radius); }

/* 추천/비추천 */
#bo_v_act {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 32px 0;
}
.bo_v_act_gng { position:relative; }
#bo_v_act .bo_v_good,
#bo_v_act .bo_v_nogood {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  border: 1px solid var(--gray-150);
  border-radius: 100px;
  font-size: 14px;
  color: var(--gray-700) !important;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all .15s;
  text-decoration: none !important;
}
#bo_v_act .bo_v_good:hover { border-color:var(--accent); color:var(--accent) !important; background:var(--accent-sub); }
#bo_v_act .bo_v_nogood:hover { border-color:#dc2626; color:#dc2626 !important; background:#fef2f2; }
#bo_v_act strong { font-weight:700; font-variant-numeric:tabular-nums; }
#bo_v_act_good, #bo_v_act_nogood {
  display: none;
  position: absolute;
  top: 54px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 12px;
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius);
  font-size: 12px;
  white-space: nowrap;
}

/* 첨부파일 */
#bo_v_file {
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}
#bo_v_file h2 {
  font-size: 11px !important;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
#bo_v_file ul { list-style:none; padding:0; margin:0; }
#bo_v_file li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
#bo_v_file li:last-child { border-bottom:0; }
#bo_v_file li i { color:var(--accent); margin-right:6px; }
#bo_v_file a { color:var(--gray-800) !important; font-weight:500; text-decoration:none !important; }
#bo_v_file a strong { color:var(--accent) !important; font-weight:600; }
#bo_v_file a:hover strong { text-decoration:underline; }
.bo_v_file_cnt { display:block; margin-top:3px; font-size:12px; color:var(--gray-400); font-variant-numeric:tabular-nums; }

/* 관련링크 */
#bo_v_link {
  margin: 20px 0 0;
  padding: 20px 24px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}
#bo_v_link h2 { font-size:11px !important; font-weight:700; color:var(--gray-500); letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
#bo_v_link ul { list-style:none; padding:0; margin:0; }
#bo_v_link li { padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:14px; border-top:0 !important; border-left:0 !important; border-right:0 !important; }
#bo_v_link li:last-child { border-bottom:0; }
#bo_v_link li i { color:var(--accent); margin-right:6px; }
#bo_v_link a { color:var(--gray-800) !important; text-decoration:none !important; }
#bo_v_link a strong { color:var(--accent) !important; font-weight:500; }
#bo_v_link a:hover strong { text-decoration:underline; }
.bo_v_link_cnt { display:block; margin-top:3px; font-size:12px; color:var(--gray-400); }

/* 이전/다음 */
.bo_v_nb {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--gray-150);
  border-bottom: 1px solid var(--gray-150);
}
.bo_v_nb li {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-100);
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.bo_v_nb li:last-child { border-bottom:0; }
.bo_v_nb .nb_tit { flex-shrink:0; width:72px; color:var(--gray-500); font-size:12px; font-weight:600; }
.bo_v_nb .nb_tit i { margin-right:4px; color:var(--gray-400); }
.bo_v_nb a { color:var(--gray-800) !important; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; text-decoration:none !important; transition:color .15s; }
.bo_v_nb a:hover { color:var(--accent) !important; }
.bo_v_nb .nb_date { flex-shrink:0; color:var(--gray-400); font-size:12px; font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════════════
   5. 댓글 (view_comment.skin.php)
   실제 구조: button.cmt_btn → section#bo_vc → aside#bo_vc_w
   모두 #bo_v 직속 자식
═══════════════════════════════════════════════════ */

.cmt_btn {
  width: 100%;
  text-align: left;
  border: 0 !important;
  border-top: 1px solid var(--gray-150) !important;
  border-bottom: 1px solid var(--gray-150) !important;
  background: #fff !important;
  font-weight: 600;
  margin: 36px 0 0;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  color: var(--gray-800) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .15s;
}
.cmt_btn:hover { color:var(--accent) !important; }
.cmt_btn .total { font-size:14px; color:var(--gray-800); }
.cmt_btn .total b { color:var(--accent); margin-right:5px; font-weight:700; }
.cmt_btn .cmt_more {
  width: 9px; height: 9px;
  border-right: 2px solid var(--gray-400);
  border-bottom: 2px solid var(--gray-400);
  transform: rotate(45deg);
  transition: transform .2s;
  margin-right: 4px;
}
.cmt_btn_op .cmt_more { transform:rotate(-135deg); margin-top:4px; }

/* 댓글 섹션 */
#bo_vc { padding:6px 0 0; }
#bo_vc h2 { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }

#bo_vc article {
  padding: 18px 0;
  position: relative;
  border-bottom: 1px solid var(--gray-100);
  display: flex !important;
  gap: 12px;
}
#bo_vc article:last-of-type { border-bottom:0; }
#bo_vc .pf_img { flex-shrink:0; }
#bo_vc .pf_img img { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--gray-100); display:block; }
#bo_vc .cm_wrap { flex:1; min-width:0; }

#bo_vc header {
  position: relative;
  margin-bottom: 7px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#bo_vc header h2 { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }
#bo_vc .sv_member,
#bo_vc .member { font-weight:600; font-size:14px; color:var(--gray-800) !important; }
.bo_vc_hdinfo { color:var(--gray-400); font-size:12px; font-variant-numeric:tabular-nums; }
.bo_vc_hdinfo i { margin-right:3px; }

#bo_vc .cmt_contents { font-size:14px; line-height:1.75; color:var(--gray-700) !important; word-break:break-word; }
#bo_vc .cmt_contents p { margin:0; }

#bo_vc_empty {
  padding: 52px 0 !important;
  color: var(--gray-400) !important;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-100);
  margin: 0 !important;
}

/* 댓글 옵션 버튼 */
.bo_vl_opt { position:absolute; top:16px; right:0; }
.btn_cm_opt {
  border:0; background:none;
  color:var(--gray-400); cursor:pointer;
  padding:5px 8px; font-size:14px;
  border-radius:var(--radius-sm);
  transition:all .15s;
}
.btn_cm_opt:hover { background:var(--gray-50); color:var(--gray-700); }
.bo_vc_act {
  display: none;
  position: absolute; right:0; top:32px;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 4px; margin:0;
  z-index: 9999; min-width:100px;
}
.bo_vc_act li { border:0 !important; }
.bo_vc_act li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--gray-700) !important;
  border-radius: var(--radius-sm);
  transition: all .15s;
  text-decoration: none !important;
}
.bo_vc_act li a:hover { background:var(--accent-sub); color:var(--accent) !important; }

/* 댓글 쓰기 */
#bo_vc_w,
.bo_vc_w {
  display: block;
  margin: 16px 0 0;
  padding: 20px;
  background: var(--gray-50) !important;
  border-radius: var(--radius-lg);
}
#bo_vc_w h2, .bo_vc_w h2 { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }

#char_cnt {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
#char_cnt #char_count { color:var(--accent); font-weight:600; }

.bo_vc_w textarea,
#bo_vc_w textarea {
  width: 100% !important;
  min-height: 110px;
  padding: 13px 15px;
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
  font-family: var(--font);
  color: var(--gray-800);
  transition: border-color .15s;
  background: #fff !important;
  box-sizing: border-box;
}
.bo_vc_w textarea:focus,
#bo_vc_w textarea:focus { border-color:var(--accent) !important; }

.bo_vc_w_wr {
  margin-top: 10px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.bo_vc_w_info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bo_vc_w_info .frm_input { height:40px; width:170px; font-size:13px; }

.bo_vc_w .btn_confirm {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0; padding: 0; border: 0;
}
.secret_cm { display:inline-flex; align-items:center; }
.secret_cm.chk_box input[type="checkbox"] + label { padding-left:22px; font-size:13px; color:var(--gray-600); position:relative; }
.secret_cm.chk_box input[type="checkbox"] + label span { position:absolute; top:50%; left:0; transform:translateY(-50%); margin:0; }

.bo_vc_w .btn_submit,
#bo_vc_w .btn_submit {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: var(--radius);
  color: #fff !important;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--font);
}
.bo_vc_w .btn_submit:hover,
#bo_vc_w .btn_submit:hover { background:var(--accent-hover) !important; }

/* ═══════════════════════════════════════════════════
   6. 글쓰기 (write.skin.php)
   실제 구조: section#bo_w > form > .write_div들
═══════════════════════════════════════════════════ */

#bo_w form { max-width:100%; }
#bo_w h2.sound_only { position:absolute; font-size:0; overflow:hidden; width:1px; height:1px; }

.write_div { margin:12px 0; position:relative; }
.write_div::after { display:block; visibility:hidden; clear:both; content:""; }

/* 분류 select */
#bo_w .bo_w_select select {
  width: 240px;
  height: 46px;
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: 14px;
  color: var(--gray-800);
  outline: none;
  font-family: var(--font);
  background: #fff;
  transition: border-color .15s;
  appearance: auto;
}
#bo_w .bo_w_select select:focus { border-color:var(--accent) !important; }

/* 공통 입력 */
.frm_input {
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--gray-800) !important;
  outline: none;
  transition: border-color .15s;
  font-family: var(--font);
  background: #fff !important;
}
.frm_input:focus { border-color:var(--accent) !important; }
.full_input { width:100% !important; }
.half_input { width:calc(50% - 4px); }

.bo_w_info { display:flex; gap:8px; flex-wrap:wrap; }
.bo_w_info .frm_input { flex:1; min-width:200px; }

/* 제목 */
#autosave_wrapper { position:relative; }
.bo_w_tit .frm_input,
#bo_w .bo_w_tit input[type="text"] {
  font-size: 15px !important;
  padding-right: 160px;
  font-weight: 500;
}
#btn_autosave {
  position: absolute; top:50%; right:8px;
  transform: translateY(-50%);
  height: 32px; padding: 0 13px;
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius-sm);
  font-size: 12px; color:var(--gray-600);
  background: #fff; cursor:pointer;
  font-family: var(--font);
  transition: all .15s;
}
#btn_autosave:hover { border-color:var(--accent) !important; color:var(--accent); background:var(--accent-sub); }
#autosave_pop {
  display: none;
  position: absolute; top:52px; right:0;
  width: 320px;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 99; padding:16px;
}
#autosave_pop strong { display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--gray-800); }
#autosave_pop ul { list-style:none; padding:0; margin:0; max-height:220px; overflow-y:auto; }
#autosave_pop .autosave_close { width:100%; padding:7px; border:1px solid var(--gray-150); border-radius:var(--radius-sm); background:#fff; cursor:pointer; font-size:12px; margin-top:8px; color:var(--gray-600); }

/* 옵션 체크박스 행 */
.bo_v_option {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 11px 15px;
  margin: 0;
  background: var(--gray-50);
  border-radius: var(--radius);
}
.bo_v_option .chk_box { padding:0; border:0 !important; }
.bo_v_option .chk_box input[type="checkbox"] + label { padding-left:22px; font-size:13px; color:var(--gray-700); }
.bo_v_option .chk_box input[type="checkbox"] + label span { position:absolute; top:50%; left:0; transform:translateY(-50%); margin:0; }

/* 링크 */
.bo_w_link { position:relative; }
.bo_w_link label {
  position: absolute; top:50%; left:1px;
  transform: translateY(-50%);
  width: 46px; height: 44px;
  display: flex; align-items:center; justify-content:center;
  color: var(--gray-400); z-index:1; pointer-events:none;
}
.bo_w_link .frm_input { padding-left:52px !important; }

/* 파일 */
.bo_w_flie { position:relative; }
.bo_w_flie .file_wr {
  position: relative;
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius);
  padding: 0 12px 0 54px;
  height: 46px;
  display: flex; align-items:center;
  background: #fff;
  transition: border-color .15s;
}
.bo_w_flie .file_wr:hover { border-color:var(--accent) !important; }
.bo_w_flie .lb_icon {
  position: absolute; top:50%; left:0;
  transform: translateY(-50%);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-400); cursor:pointer;
}
.frm_file { border:0 !important; background:none !important; font-size:13px; flex:1; outline:none; font-family:var(--font); color:var(--gray-600); }
.bo_w_flie .frm_input { margin-top:8px; padding-left:16px !important; }
.bo_w_flie .file_del { font-size:12px; color:var(--gray-500); margin-top:6px; display:block; }

/* 에디터/textarea 영역 */
.wr_content {
  border: 1px solid var(--gray-150) !important;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s;
}
.wr_content:focus-within { border-color:var(--accent) !important; }
.wr_content textarea {
  width: 100% !important;
  min-height: 320px;
  padding: 16px 18px;
  border: 0 !important;
  font-size: 14px;
  line-height: 1.9;
  resize: vertical;
  outline: none;
  font-family: var(--font);
  color: var(--gray-800);
  background: #fff;
  display: block;
}
#char_count_desc {
  font-size: 12px; color:var(--gray-500);
  margin:0 0 8px; padding:9px 13px;
  background:var(--accent-sub); border-radius:var(--radius-sm);
}
#char_count_desc strong { color:var(--accent); font-weight:700; }
#char_count_wrap {
  padding: 9px 16px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-150);
  font-size: 12px; color:var(--gray-500);
  text-align: right; font-variant-numeric:tabular-nums;
}
#char_count_wrap #char_count { color:var(--accent); font-weight:600; }

/* 확인 버튼 */
#bo_w .btn_confirm {
  display: flex !important;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
}
#bo_w .btn_submit {
  height: 48px; padding: 0 34px;
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: var(--radius);
  color: #fff !important;
  font-size: 14px; font-weight:600;
  cursor:pointer; transition:background .15s;
  font-family:var(--font);
}
#bo_w .btn_submit:hover { background:var(--accent-hover) !important; }
#bo_w .btn_cancel.btn { height:48px; padding:0 26px; font-size:14px; }

/* ═══════════════════════════════════════════════════
   7. 유틸리티
═══════════════════════════════════════════════════ */
.sound_only {
  position: absolute !important;
  overflow: hidden;
  width: 1px; height: 1px;
  clip: rect(0,0,0,0);
}