/* ============================================================
   board-common.css — 게시판 공통 디자인
   기준: mfarm_css_design_guide.md §13
   폰트 기준: 1rem = 16px (브라우저 표준 기준)
   적용: 공지사항 / 1:1문의 / 인증현황 / 고객리뷰 / 농장갤러리 / 기타
   ============================================================ */

/* ── 그누보드 default.css #container 고정폭 제거 ──────────── */
div#container {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.shop-content {
  width: 100%;
  box-sizing: border-box;
}

/* ── 게시판 전용 CSS 변수 ────────────────────────────────── */
:root {
  --bd-primary:      var(--color-primary,      #6b4a2b);
  --bd-primary-dk:   var(--color-primary-dark, #5a3d23);
  --bd-text:         var(--color-text,         #2b2b2b);
  --bd-meta:         #888;
  --bd-header-bg:    #f6f4ef;
  --bd-border:       #e8e0d8;
  --bd-border-lt:    #efefef;
  --bd-row-hover:    #faf8f5;
  --bd-input-h:      52px;
  --bd-radius:       8px;
  --bd-shadow-sm:    0 2px 8px rgba(0,0,0,0.07);
  --bd-font-base:    1.125rem; /* 18px — 게시판 기본 폰트 */
  --bd-font-sm:      1rem;    /* 16px — 보조 텍스트 최솟값 */
  --bd-font-badge:   0.875rem;/* 14px — 뱃지/인라인 작은 레이블 */
  --bd-lh:           1.6;      /* 기본 line-height */
}

/* ============================================================
   1. .board-container — 게시판 레이아웃 컨테이너
   ============================================================ */

.board-container,
#bo_list,
#bo_gall,
#bo_v,
#bo_w {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  padding-left:  var(--content-padding, 200px);
  padding-right: var(--content-padding, 200px);
  padding-bottom: 80px;
  float: none !important;
  font-size: var(--bd-font-base);
  line-height: var(--bd-lh);
}

/* 그누보드 인라인 style="width:..." 무력화 */
#bo_list[style],
#bo_gall[style],
#bo_v[style],
#bo_w[style] {
  width: 100% !important;
}

/* #fwrite 폼 인라인 width 제거 */
#fwrite {
  width: 100% !important;
  max-width: 100%;
}

/* shop-content 내 bo_v margin-top 초기화 */
.shop-content #bo_v { margin-top: 0; }

/* ============================================================
   2. .board-header — 페이지 제목 영역
   ============================================================ */

.board-header,
.board-page-header {
  text-align: center;
  padding: 56px 0 40px;
}

/* [예외] H1 제목 — 기존 디자인 유지 */
.board-title,
.board-page-title {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-text-dark, #111);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.board-desc,
.board-page-desc {
  margin-top: 10px;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--color-text-gray, #4a4a4a);
  line-height: var(--bd-lh);
}

/* ============================================================
   3. #bo_btn_top — 상단 버튼 / 총 건수 영역
   ============================================================ */

#bo_btn_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#bo_list_total {
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-meta);
  line-height: var(--bd-lh);
}

/* ── .btn_bo_user 버튼 리스트 ── */
.btn_bo_user {
  display: flex !important;
  align-items: center;
  gap: 8px;
  float: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn_bo_user li {
  float: none !important;
  width: auto !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* [버튼: 16~18px 허용] 상단 작은 버튼 → 16px */
.btn_bo_user .btn,
.btn_bo_user button.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: var(--bd-font-sm);     /* 16px */
  font-weight: 500;
  font-family: var(--font-base, sans-serif);
  border: 1.5px solid #ddd;
  background: #fff;
  color: #444;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  line-height: 1;
  box-sizing: border-box;
}

.btn_bo_user .btn:hover,
.btn_bo_user button.btn:hover {
  background: var(--bd-header-bg);
  border-color: var(--bd-primary);
  color: var(--bd-primary);
}

/* 글쓰기 · 문의등록 버튼 — Primary */
.btn_bo_user a[title="글쓰기"],
.btn_bo_user a[title="문의등록"] {
  background: var(--bd-primary) !important;
  border-color: var(--bd-primary) !important;
  color: #fff !important;
}

.btn_bo_user a[title="글쓰기"]:hover,
.btn_bo_user a[title="문의등록"]:hover {
  background: var(--bd-primary-dk) !important;
  border-color: var(--bd-primary-dk) !important;
}

/* 검색 토글 버튼 숨김 (검색창 항상 노출) */
.btn_bo_sch { display: none !important; }

/* 관리자 더보기 드롭다운 */
.more_opt {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 6px 0;
  min-width: 140px;
  z-index: 200;
  list-style: none;
}

.more_opt li a,
.more_opt li button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: var(--bd-lh);
}

.more_opt li a:hover,
.more_opt li button:hover { background: var(--bd-header-bg); }

.btn_more_opt { position: relative; }

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

/* ============================================================
   4. .board-table — 게시판 목록 테이블
   ============================================================ */

.tbl_head01.tbl_wrap { overflow: visible; }

.board-table table,
.tbl_head01 table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #c8b9ab;
  border-bottom: 1px solid var(--bd-border);
  table-layout: fixed;
}

/* [테이블 헤더: 18~20px 허용] */
.board-table thead tr,
.tbl_head01 thead tr {
  background: var(--bd-header-bg);
  border-bottom: 1px solid var(--bd-border);
}

.board-table thead th,
.tbl_head01 thead th {
  padding: 16px 16px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  color: #555;
  text-align: center;
  letter-spacing: 0.01em;
  border: none;
  line-height: var(--bd-lh);
}

.tbl_head01 thead th:nth-child(2),
.tbl_head01 thead th.td_subject { text-align: left; }

/* 바디 행 */
.board-table tbody tr,
.tbl_head01 tbody tr {
  border-bottom: 1px solid var(--bd-border-lt);
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.tbl_head01 tbody tr.even { background: #fff; }

.board-table tbody tr:hover,
.tbl_head01 tbody tr:hover {
  background: var(--bd-row-hover) !important;
  border-left-color: var(--bd-primary) !important;
}

/* [테이블 본문: 18px] */
.board-table tbody td,
.tbl_head01 tbody td {
  padding: 16px 16px;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-text);
  vertical-align: middle;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--bd-lh);
}

/* [보조: 16px] 번호 / 상태 */
.tbl_head01 .td_num2,
.tbl_head01 .td_num,
.tbl_head01 .td_stat {
  text-align: center;
  color: var(--bd-meta);
  font-size: var(--bd-font-sm);     /* 16px */
  width: 80px;
}

/* 제목 셀 */
.tbl_head01 .td_subject {
  padding-left: 14px !important;
  overflow: visible;
  white-space: normal;
  width: auto;
}

.tbl_head01 .bo_tit,
.tbl_head01 .td_subject a.bo_tit {
  display: block;
  font-weight: 600;
  color: var(--bd-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbl_head01 .bo_tit a { color: var(--bd-text); text-decoration: none; }
.tbl_head01 .bo_tit a:hover { color: var(--bd-primary); }
.tbl_head01 td.td_subject a.bo_tit:hover { color: var(--bd-primary); }

/* [예외 - 뱃지] 카테고리 링크 */
.bo_cate_link {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 10px;
  background: #f0e9e2;
  border-radius: 3px;
  font-size: var(--bd-font-badge);  /* 14px — 인라인 뱃지 */
  color: var(--bd-primary);
  text-decoration: none;
  font-weight: 500;
}

/* [보조: 16px] 작성자 / 날짜 */
.tbl_head01 .td_name,
.tbl_head01 .td_datetime,
.tbl_head01 .td_date {
  text-align: center;
  color: var(--bd-meta);
  font-size: var(--bd-font-sm);     /* 16px */
  white-space: nowrap;
  width: 120px;
}

/* [예외 - 뱃지] 공지 뱃지 */
.notice_icon {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bd-primary);
  color: #fff;
  border-radius: 20px;
  font-size: var(--bd-font-badge);  /* 14px */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bo_notice td { background: #fdf8f4 !important; }
.bo_notice:hover td { background: var(--bd-row-hover) !important; }

/* [예외 - 뱃지] 새글 뱃지 */
.new_icon {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  background: #27ae60;
  color: #fff;
  border-radius: 3px;
  font-size: 0.75rem;               /* 12px — 작은 N 뱃지 */
  vertical-align: middle;
  font-weight: 600;
}

/* [예외 - 뱃지] 댓글 수 */
.cnt_cmt {
  margin-left: 4px;
  color: var(--bd-primary);
  font-size: var(--bd-font-badge);  /* 14px */
  font-weight: 700;
}

/* [예외 - 뱃지] QA 상태 뱃지 */
.txt_done {
  display: inline-block;
  padding: 4px 12px;
  background: #e8f5e9;
  color: #27ae60;
  border-radius: 20px;
  font-size: var(--bd-font-badge);  /* 14px */
  font-weight: 600;
}

.txt_rdy {
  display: inline-block;
  padding: 4px 12px;
  background: #fef3f2;
  color: #e53935;
  border-radius: 20px;
  font-size: var(--bd-font-badge);  /* 14px */
  font-weight: 600;
}

/* 빈 목록 */
.empty_table {
  text-align: center !important;
  padding: 60px 16px !important;
  color: var(--bd-meta);
  font-size: var(--bd-font-base);   /* 18px */
  line-height: var(--bd-lh);
}

/* ============================================================
   5. .board-search — 검색 영역 (항상 노출)
   ============================================================ */

.board-search,
.bo_sch_wrap {
  display: block !important;
  position: static !important;
  margin-top: 24px;
}

.bo_sch_bg,
.bo_sch_cls { display: none !important; }

.board-search fieldset,
.bo_sch {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
}

.bo_sch h3,
.bo_sch legend { display: none; }

/* [검색 영역: 18px] */
.bo_sch select {
  height: 50px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  font-family: var(--font-base, sans-serif);
  background: #fff;
  color: var(--bd-text);
  cursor: pointer;
}

.bo_sch .sch_bar {
  display: flex !important;
  align-items: stretch;
  flex: 1;
  max-width: 500px;
}

.bo_sch .sch_input {
  flex: 1;
  height: 50px;
  padding: 0 16px !important;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: var(--bd-font-base);   /* 18px */
  font-family: var(--font-base, sans-serif);
  box-sizing: border-box;
  color: var(--bd-text);
}

.bo_sch .sch_input:focus {
  outline: none;
  border-color: var(--bd-primary);
}

.bo_sch .sch_btn {
  height: 50px;
  padding: 0 26px;
  background: var(--bd-primary);
  color: #fff;
  border: none;
  border-radius: 0 6px 6px 0;
  font-size: var(--bd-font-base);   /* 18px */
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
}

.bo_sch .sch_btn:hover { background: var(--bd-primary-dk); }

/* ============================================================
   6. .board-pagination — 페이지네이션
   ============================================================ */

/* [페이지네이션: 18px] */
.board-pagination,
.pg_wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 36px 0 16px;
  padding: 0;
  list-style: none;
}

.pg_wrap a,
.pg_wrap strong,
.pg_wrap span.pg_start,
.pg_wrap span.pg_end {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid var(--bd-border);
  border-radius: 4px;
  font-size: var(--bd-font-base);   /* 18px */
  color: #555;
  text-decoration: none;
  font-weight: 400;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-sizing: border-box;
}

.pg_wrap a:hover {
  background: var(--bd-header-bg);
  border-color: var(--bd-primary);
  color: var(--bd-primary);
}

.pg_wrap strong {
  background: var(--bd-primary);
  border-color: var(--bd-primary);
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   7. .board-form / .bw-table — 작성/수정 폼
   ============================================================ */

.bw-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #c8b9ab;
}

.bw-table col.bw-col-th { width: 170px; }

/* [테이블 헤더: 18px] */
.bw-table th {
  background: var(--bd-header-bg);
  padding: 20px 24px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  color: #444;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bd-border);
  border-right: 1px solid var(--bd-border);
  white-space: nowrap;
  line-height: var(--bd-lh);
}

.bw-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--bd-border);
  vertical-align: top;
  line-height: var(--bd-lh);
}

.bw-required {
  color: #e53935;
  margin-left: 2px;
  font-weight: 700;
}

/* [입력폼: 18px] */
.bw-table input[type="text"],
.bw-table input[type="password"],
.bw-table input[type="email"],
.bw-table select {
  height: var(--bd-input-h);
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: var(--bd-radius);
  font-size: var(--bd-font-base);   /* 18px */
  font-family: var(--font-base, sans-serif);
  color: var(--bd-text);
  background: #fff;
  box-sizing: border-box;
  max-width: 480px;
  width: 100%;
  transition: border-color 0.18s;
}

.bw-table input:focus,
.bw-table select:focus,
.bw-table textarea:focus {
  outline: none;
  border-color: var(--bd-primary);
}

/* 제목 인풋 전체 폭 */
.bw-table input.full_input,
.bw-table input[name="wr_subject"],
.bw-table input[name="qa_subject"] {
  max-width: 100%;
}

/* 파일 인풋 */
.bw-table input[type="file"] {
  height: auto;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: var(--bd-font-base);   /* 18px */
}

/* [체크박스 레이블: 18px] */
.bw-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-text);
  margin-left: 12px;
  cursor: pointer;
  line-height: var(--bd-lh);
}

/* 옵션 체크박스 리스트 */
.bw-table .bo_v_option {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

.bw-table .bo_v_option li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-text);
  line-height: var(--bd-lh);
}

/* [보조 버튼] 임시저장 */
#autosave_wrapper {
  display: flex;
  gap: 8px;
  align-items:center;
}

#btn_autosave {
  font-size:0px !important;
  display:none !important;
  align-self: flex-start;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: var(--bd-font-sm);     /* 16px — 보조 버튼 */
  background: #fff;
  color: var(--bd-meta);
  cursor: pointer;
  font-family: var(--font-base, sans-serif);
}

/* textarea */
.wr_content,
.qa_content_wrap { width: 100%; }

/* [첨부파일 삭제: 18px] */
.file_del {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--bd-font-base);   /* 18px */
  color: #e53935;
  line-height: var(--bd-lh);
}

/* 보안문자 */
.bw-table #captcha_wrap,
.bw-table .captcha_area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bw-table #captcha_wrap input[type="text"],
.bw-table .captcha_area input[type="text"] {
  width: 180px !important;
  max-width: 180px !important;
}

/* ── 폼 버튼 바 ── */
.bw-btn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 8px;
}

.bw-btn-group {
  display: flex;
  gap: 10px;
}

/* ── [버튼: 18px] .board-btn / .bw-btn / .bv-btn ── */
.board-btn,
.bw-btn,
.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: var(--bd-input-h);
  padding: 0 30px;
  border-radius: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  font-family: var(--font-base, sans-serif);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #555;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  box-sizing: border-box;
  line-height: 1;
}

.board-btn:hover,
.bw-btn:hover,
.bv-btn:hover {
  background: var(--bd-header-bg);
  border-color: var(--bd-primary);
  color: var(--bd-primary);
}

.board-btn--primary,
.bw-btn--primary,
.bv-btn--primary {
  background: var(--bd-primary);
  border-color: var(--bd-primary);
  color: #fff;
}

.board-btn--primary:hover,
.bw-btn--primary:hover,
.bv-btn--primary:hover {
  background: var(--bd-primary-dk);
  border-color: var(--bd-primary-dk);
  color: #fff;
}

/* ── 기존 btn_confirm (fallback) ── */
.btn_confirm.write_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
}

.btn_confirm .btn_cancel.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: var(--bd-input-h);
  padding: 0 30px;
  border-radius: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  font-family: var(--font-base, sans-serif);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #555;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  line-height: 1;
}

.btn_confirm .btn_cancel.btn:hover {
  background: var(--bd-header-bg);
  border-color: var(--bd-primary);
  color: var(--bd-primary);
}

.btn_confirm .btn_submit.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: var(--bd-input-h);
  padding: 0 30px;
  border-radius: 6px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  font-family: var(--font-base, sans-serif);
  text-decoration: none;
  cursor: pointer;
  background: var(--bd-primary);
  border: 1.5px solid var(--bd-primary);
  color: #fff;
  transition: background 0.18s, border-color 0.18s;
  line-height: 1;
}

.btn_confirm .btn_submit.btn:hover {
  background: var(--bd-primary-dk);
  border-color: var(--bd-primary-dk);
}

/* ============================================================
   8. .board-view — 게시글 보기
   ============================================================ */

#bo_v { padding-bottom: 100px; }

#bo_v header { padding-bottom: 0; margin: 0; }

#bo_v_title {
  padding: 18px 0 20px;
  border-bottom: 2px solid var(--bd-border);
  margin: 0;
}

.bo_v_tit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bd-text);
  line-height: 1.45;
}

/* [16px] 카테고리 스팬 */
.bo_v_cate {
  display: inline-block;
  margin-right: 10px;
  padding: 4px 12px;
  background: var(--bd-header-bg);
  border-radius: 4px;
  font-size: var(--bd-font-sm);     /* 16px */
  color: var(--bd-primary);
  font-weight: 600;
}

/* [메타 정보: 18px] */
#bo_v_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bd-border-lt);
  font-size: var(--bd-font-base);   /* 18px */
  line-height: var(--bd-lh);
}

.pf_img { display: none !important; }

.profile_info {
  display: flex;
  align-items: center;
  gap: 0;
}

.profile_info_ct {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-meta);
  line-height: var(--bd-lh);
}

.profile_info_ct strong {
  font-weight: 600;
  color: #444;
}

.profile_info_ct a {
  color: var(--bd-meta);
  text-decoration: none;
}

.profile_info_ct .if_date { white-space: nowrap; }

/* QA view 메타 */
#bo_v_info > strong {
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  color: #444;
}

#bo_v_info .bo_date {
  font-size: var(--bd-font-base);   /* 18px */
  color: var(--bd-meta);
}

#bo_v_share { display: none !important; }
#bo_v_img { margin-bottom: 16px; }

/* [본문 내용: 18px / line-height 1.9] */
#bo_v_con {
  padding: 36px 0;
  font-size: var(--bd-font-base);   /* 18px */
  line-height: 1.9;
  color: var(--bd-text);
  border-bottom: 1px solid var(--bd-border-lt);
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 120px;
}

#bo_v_con img { max-width: 100%; height: auto; }

/* 추천/비추천 */
#bo_v_act {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 24px 0;
}

a.bo_v_good,
a.bo_v_nogood,
span.bo_v_good,
span.bo_v_nogood {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  border: 1.5px solid var(--bd-border);
  color: #555;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

a.bo_v_good:hover  { background: #eaf5ea; border-color: #27ae60; color: #27ae60; }
a.bo_v_nogood:hover { background: #fdecea; border-color: #e53935; color: #e53935; }

/* ── 보기 버튼 바 ── */
.bv-btn-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bv-btn-group {
  display: flex;
  gap: 8px;
}

/* ── [첨부파일: 18px] ── */
#bo_v_file {
  padding: 24px 0;
  border-bottom: 1px solid var(--bd-border-lt);
}

#bo_v_file h2 {
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 700;
  color: #444;
  margin-bottom: 14px;
  line-height: var(--bd-lh);
}

#bo_v_file ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#bo_v_file li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--bd-header-bg);
  border: 1px solid var(--bd-border);
  border-radius: 6px;
}

#bo_v_file .view_file_download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--bd-text);
  font-size: var(--bd-font-base);   /* 18px */
  line-height: var(--bd-lh);
}

#bo_v_file .view_file_download:hover { color: var(--bd-primary); }
#bo_v_file .view_file_download strong { font-weight: 600; }

/* [예외 - 뱃지] 파일 건수 */
.bo_v_file_cnt {
  font-size: var(--bd-font-badge);  /* 14px */
  color: #aaa;
}

/* ── 관련 링크: 18px ── */
#bo_v_link {
  padding: 24px 0;
  border-bottom: 1px solid var(--bd-border-lt);
}

#bo_v_link h2 {
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 700;
  color: #444;
  margin-bottom: 14px;
  line-height: var(--bd-lh);
}

#bo_v_link ul { list-style: none; padding: 0; margin: 0; }

#bo_v_link li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd-border-lt);
  font-size: var(--bd-font-base);   /* 18px */
  line-height: var(--bd-lh);
}

#bo_v_link a { color: var(--bd-primary); text-decoration: none; }
#bo_v_link a:hover { text-decoration: underline; }

/* ── [이전글/다음글: 18px] ── */
.bo_v_nb {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--bd-border);
}

.bo_v_nb li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bd-border-lt);
  font-size: var(--bd-font-base);   /* 18px */
  line-height: var(--bd-lh);
}

/* [보조: 16px] 이전/다음 레이블 */
.bo_v_nb .nb_tit {
  min-width: 76px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-meta);
  font-size: var(--bd-font-sm);     /* 16px */
  flex-shrink: 0;
}

.bo_v_nb a {
  flex: 1;
  color: var(--bd-text);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--bd-font-base);   /* 18px */
}

.bo_v_nb a:hover { color: var(--bd-primary); }

/* [보조: 16px] 날짜 */
.bo_v_nb .nb_date {
  font-size: var(--bd-font-sm);     /* 16px */
  color: #bbb;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── QA 답변 영역: 18px ── */
#qa_v_answer {
  border-top: 2px solid var(--bd-border);
  margin-top: 28px;
  padding-top: 28px;
}

#qa_v_answer .qa_a_title {
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 700;
  color: var(--bd-primary);
  margin-bottom: 18px;
  line-height: var(--bd-lh);
}

#qa_v_answer .bo_v_con {
  font-size: var(--bd-font-base);   /* 18px */
  line-height: 1.9;
  color: var(--bd-text);
}

/* ============================================================
   9. .board-gallery — 갤러리형 게시판
   ============================================================ */

.board-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

#bo_gall .bo_gall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.board-gallery .gall_item,
#bo_gall .bo_gall li,
#bo_gall .bo_gall .gall_item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bd-shadow-sm);
  transition: transform 0.22s var(--easing, ease), box-shadow 0.22s var(--easing, ease);
}

.board-gallery .gall_item:hover,
#bo_gall .bo_gall li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(107, 74, 43, 0.14);
}

.board-gallery .gall_item img,
#bo_gall .bo_gall .gall_tit img,
#bo_gall .gall_thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.board-gallery .gall_txt,
#bo_gall .gall_txt {
  padding: 16px 18px 20px;
}

/* [갤러리 카드 제목: 18px] */
#bo_gall .gall_tit a {
  font-size: var(--bd-font-base);   /* 18px */
  font-weight: 600;
  color: var(--bd-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: var(--bd-lh);
}

#bo_gall .gall_tit a:hover { color: var(--bd-primary); }

/* [보조: 16px] 갤러리 날짜/작성자 */
#bo_gall .gall_date,
#bo_gall .td_datetime,
#bo_gall .td_name {
  font-size: var(--bd-font-sm);     /* 16px */
  color: var(--bd-meta);
  margin-top: 6px;
  line-height: var(--bd-lh);
}

/* ============================================================
   10. 그누보드 기본 스타일 충돌 정리
   ============================================================ */

.bo_tit a { color: var(--bd-text); }
#bo_list .bo_tit a:hover,
#bo_gall .bo_tit a:hover { color: var(--bd-primary); }

.tbl_head01 {
  border: none !important;
  background: none !important;
}

#bo_list tbody tr td { border: none; }
#bo_list .tbl_head01.tbl_wrap { overflow: visible; }

/* FontAwesome 아이콘 크기 */
.btn_bo_user .fa { font-size: var(--bd-font-badge); }

#text_size { display: none !important; }


/* 파일 업로드 영역 */
.hk-file-field { display: flex; flex-direction: column; gap: 8px; }
.hk-file-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-on-surface-var);
    display: flex;
    align-items: center;
    gap: 5px;
}
.hk-file-label .hk-icon { font-size: 14px; color: var(--hk-secondary); }

.hk-file-existing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background-color: var(--hk-surface-low);
    border-radius: var(--hk-radius);
}
.hk-file-existing img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--hk-radius-sm); flex-shrink: 0; }
.hk-file-existing__icon { font-size: 30px; color: var(--hk-secondary); }
.hk-file-existing__info { flex: 1; min-width: 0; }
.hk-file-existing__name { font-size: 13px; color: var(--hk-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-file-existing__size { font-size: 11px; color: var(--hk-outline); margin-top: 2px; }
.hk-file-del-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hk-error); cursor: pointer; flex-shrink: 0; }
.hk-file-del-label input { accent-color: var(--hk-error); }

.hk-file-drop {
    position: relative;
    border: 2px dashed rgba(68, 42, 34, 0.2);
    border-radius: var(--hk-radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.hk-file-drop:hover {
    border-color: var(--hk-primary);
    background-color: rgba(68, 42, 34, 0.02);
}
.hk-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.hk-file-drop .hk-icon { color: var(--hk-secondary); font-size: 22px; flex-shrink: 0; }
.hk-file-drop__text { font-size: 14px; color: var(--hk-on-surface-var); }

/* ============================================================
   11. 반응형
   ============================================================ */

@media (max-width: 1280px) {
  /* [예외] H1 — 기존 디자인 유지 범위 내 축소 */
  .board-title,
  .board-page-title { font-size: 2.25rem; }
  .bw-table col.bw-col-th { width: 140px; }
  .bw-table th { padding: 16px 18px; }
}

@media (max-width: 1024px) {
  .board-gallery,
  #bo_gall .bo_gall {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }
  .board-title,
  .board-page-title { font-size: 1.875rem; }
}

@media (max-width: 768px) {
  /* [예외] H1 제목 */
  .board-header,
  .board-page-header { padding: 36px 0 28px; }
  .board-title,
  .board-page-title { font-size: 1.5rem; }

  /* 부제목: 최소 16px */
  .board-desc,
  .board-page-desc { font-size: var(--bd-font-sm); }

  /* 작성자/날짜 열 숨김 */
  .tbl_head01 tbody .td_name,
  .tbl_head01 tbody .td_num:last-of-type { display: none; }
  .tbl_head01 thead th.sv_use { display: none; }

  /* [모바일 최소 16px] 테이블 셀 */
  .tbl_head01 tbody td { padding: 12px 10px; font-size: var(--bd-font-sm); }
  .tbl_head01 thead th { font-size: var(--bd-font-sm); padding: 12px 10px; }
  .tbl_head01 .td_subject { padding-left: 8px !important; }

  #bo_btn_top { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 검색 */
  .bo_sch { flex-wrap: wrap; }
  .bo_sch .sch_bar { max-width: 100%; flex: 1 1 100%; margin-top: 6px; }
  .bo_sch select,
  .bo_sch .sch_input,
  .bo_sch .sch_btn { font-size: var(--bd-font-sm); }

  /* [모바일 페이지네이션: 16px] */
  .pg_wrap a,
  .pg_wrap strong {
    min-width: 36px;
    height: 36px;
    font-size: var(--bd-font-sm);
  }

  /* 작성폼 세로 레이아웃 */
  .bw-table,
  .bw-table thead,
  .bw-table tbody,
  .bw-table tr { display: block; width: 100%; }

  .bw-table tr { border-bottom: 1px solid var(--bd-border); }

  .bw-table th,
  .bw-table td {
    display: block;
    width: 100%;
    border-bottom: none;
    border-right: none;
    box-sizing: border-box;
  }

  .bw-table th {
    padding: 14px 16px 6px;
    font-size: var(--bd-font-sm);   /* 16px 모바일 폼 th */
    background: transparent;
    border-top: 1px solid var(--bd-border);
  }

  .bw-table td { padding: 6px 16px 16px; }

  .bw-table input[type="text"],
  .bw-table input[type="password"],
  .bw-table input[type="email"],
  .bw-table select { max-width: 100%; font-size: var(--bd-font-sm); }

  .bw-btn-bar { flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
  .bw-btn-group { width: 100%; justify-content: flex-end; }

  /* [모바일 버튼: 16px] */
  .bw-btn, .board-btn, .bv-btn {
    min-width: 84px;
    padding: 0 20px;
    font-size: var(--bd-font-sm);
  }

  /* 보기 */
  .bo_v_tit { font-size: 1.25rem; }
  #bo_v_info { flex-direction: column; align-items: flex-start; gap: 8px; }

  .bv-btn-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bv-btn-group { flex-wrap: wrap; }

  .bo_v_nb .nb_tit { min-width: 64px; }
  /* [모바일 이전/다음: 16px] */
  .bo_v_nb li { font-size: var(--bd-font-sm); }
  .bo_v_nb a { font-size: var(--bd-font-sm); }

  .board-gallery,
  #bo_gall .bo_gall {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  #bo_btn_top .btn_bo_user { flex-wrap: wrap; }
}