@charset "utf-8";

/* ==========================================================================
   GNUBOARD 5 BASIC BOARD - CLEAN MODERN DARK THEME
   - Notion / Linear / GitHub Discussions Hybrid Minimal Dark UI
   - 100% Web Standards & Absolute Zero-Break Responsive
   ========================================================================== */

/* 1. 디자인 시스템 토큰 & 리셋 */
.bo_modern_wrap {
  --mod-bg-card: #0f172a;
  --mod-bg-surface: #1e293b;
  --mod-bg-surface-hover: #27354f;
  --mod-bg-input: #0b1120;
  --mod-border: rgba(255, 255, 255, 0.08);
  --mod-border-hover: rgba(99, 102, 241, 0.4);
  --mod-border-subtle: rgba(255, 255, 255, 0.04);
  --mod-accent: #6366f1;
  --mod-accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --mod-text-title: #f8fafc;
  --mod-text-body: #e2e8f0;
  --mod-text-muted: #94a3b8;
  --mod-text-sub: #64748b;
  --mod-radius: 8px;
  --mod-radius-sm: 6px;
  --mod-radius-pill: 9999px;

  box-sizing: border-box;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--mod-text-body);
  margin-bottom: 40px;
}

.bo_modern_wrap *,
.bo_modern_wrap *:before,
.bo_modern_wrap *:after {
  box-sizing: border-box;
}

/* 2. 공통 버튼 시스템 (절대 깨지지 않는 고정 높이 & Flexbox 정렬) */
.bo_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 15px !important;
  border-radius: var(--mod-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  line-height: normal !important;
}

.bo_btn_default {
  background: var(--mod-bg-surface) !important;
  border-color: var(--mod-border) !important;
  color: var(--mod-text-muted) !important;
}
.bo_btn_default:hover {
  background: var(--mod-bg-surface-hover) !important;
  border-color: var(--mod-border-hover) !important;
  color: #fff !important;
}

.bo_btn_primary {
  background: var(--mod-accent-grad) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35) !important;
}
.bo_btn_primary:hover {
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.6) !important;
  transform: translateY(-1px);
}

.bo_btn_danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}
.bo_btn_danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
}

.bo_btn.btn_sm {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.bo_btn.btn_lg {
  height: 46px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.bo_btn_icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  color: var(--mod-text-muted);
  border-radius: var(--mod-radius-sm);
  cursor: pointer;
}
.bo_btn_icon:hover {
  color: #fff;
  border-color: var(--mod-border-hover);
}

/* 3. 체크박스 & 라벨 (표준 네이티브 + 깨짐 0%) */
.bo_mod_chklabel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  color: var(--mod-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bo_mod_chklabel span {
  display: inline-block;
  line-height: 1;
}
.bo_native_chk {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--mod-accent) !important;
  cursor: pointer !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* 4. 폼 인풋 공통 (인풋, 셀렉트, 텍스트에어리어) */
.bo_text_input,
.bo_select_input {
  height: 42px;
  background: var(--mod-bg-input) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  padding: 0 14px !important;
  color: var(--mod-text-title) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bo_text_input:focus,
.bo_select_input:focus,
.bo_textarea_input:focus {
  border-color: var(--mod-accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
.bo_textarea_input {
  width: 100%;
  background: var(--mod-bg-input) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  padding: 14px !important;
  color: var(--mod-text-title) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  line-height: 1.6;
}

/* 5. 드롭다운 팝업 레이어 */
.bo_more_dropdown_wrap {
  position: relative;
  display: inline-block;
}
.bo_dropdown_layer {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  min-width: 140px;
  background: #1e293b;
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius);
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  list-style: none;
  margin: 0;
}
.bo_dropdown_layer li {
  margin: 0; padding: 0; list-style: none;
}
.bo_dropdown_layer a, .bo_dropdown_layer button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mod-text-muted);
  border-radius: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}
.bo_dropdown_layer a:hover, .bo_dropdown_layer button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}


/* ==========================================================================
   A. BOARD LIST (게시판 목록)
   ========================================================================== */
.bo_mod_header {
  margin-bottom: 20px;
}
.bo_mod_title_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.bo_mod_title {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 800;
  color: var(--mod-text-title);
  margin: 0;
  letter-spacing: -0.5px;
}
.bo_mod_total {
  font-size: 13px;
  color: var(--mod-text-sub);
  background: var(--mod-bg-card);
  padding: 5px 12px;
  border-radius: var(--mod-radius-pill);
  border: 1px solid var(--mod-border);
}
.bo_mod_total strong { color: var(--mod-text-title); }

/* 카테고리 탭 */
.bo_mod_cate {
  overflow-x: auto;
  scrollbar-width: none;
}
.bo_mod_cate::-webkit-scrollbar { display: none; }
.bo_mod_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.bo_mod_cate ul {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}
.bo_mod_cate a {
  display: inline-block;
  line-height: 32px;
  padding: 0 16px;
  border-radius: var(--mod-radius-pill);
  background: var(--mod-bg-card);
  border: 1px solid var(--mod-border);
  color: var(--mod-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.bo_mod_cate a:hover {
  background: var(--mod-bg-surface);
  color: #fff;
  border-color: var(--mod-border-hover);
}
.bo_mod_cate #bo_cate_on {
  background: var(--mod-accent-grad);
  color: #fff;
  font-weight: 700;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* 툴바 */
.bo_mod_toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--mod-bg-card);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius) var(--mod-radius) 0 0;
  border-bottom: 0;
  flex-wrap: wrap;
  gap: 10px;
}
.bo_tb_left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bo_mod_sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.bo_mod_sort a {
  color: var(--mod-text-sub);
  text-decoration: none;
}
.bo_mod_sort a:hover { color: var(--mod-accent); }
.bo_mod_sort .sep { opacity: 0.3; color: var(--mod-text-sub); }
.bo_tb_right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 테이블 리스트 */
.bo_mod_table_wrap {
  background: var(--mod-bg-card);
  border: 1px solid var(--mod-border);
  border-radius: 0 0 var(--mod-radius) var(--mod-radius);
  overflow: hidden;
}
.bo_mod_table {
  width: 100%;
  border-collapse: collapse;
}
.bo_mod_table caption { display: none; }
.bo_mod_table thead th {
  background: #131d31;
  color: var(--mod-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 10px;
  border-bottom: 1px solid var(--mod-border);
  text-align: center;
}
.bo_mod_table thead th a {
  color: var(--mod-text-muted);
  text-decoration: none;
}
.bo_mod_table tbody tr {
  border-bottom: 1px solid var(--mod-border-subtle);
  transition: background 0.15s ease;
}
.bo_mod_table tbody tr:last-child {
  border-bottom: 0;
}
.bo_mod_table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.bo_mod_table tbody tr.tr_notice {
  background: rgba(99, 102, 241, 0.08);
}
.bo_mod_table tbody tr.tr_current {
  background: rgba(139, 92, 246, 0.1);
}
.bo_mod_table tbody td {
  padding: 14px 10px;
  font-size: 13.5px;
  text-align: center;
  color: var(--mod-text-body);
}

.bo_mod_table .th_chk, .bo_mod_table .td_chk { width: 44px; }
.bo_mod_table .th_num, .bo_mod_table .td_num { width: 60px; color: var(--mod-text-sub); }
.bo_mod_table .th_subject, .bo_mod_table .td_subject { text-align: left; }
.bo_mod_table .th_name, .bo_mod_table .td_name { width: 120px; white-space: nowrap; color: var(--mod-text-muted); }
.bo_mod_table .th_hit, .bo_mod_table .td_hit { width: 70px; color: var(--mod-text-sub); }
.bo_mod_table .th_good, .bo_mod_table .td_good { width: 70px; color: var(--mod-accent); }
.bo_mod_table .th_date, .bo_mod_table .td_date { width: 85px; color: var(--mod-text-sub); font-size: 12px; }

/* 제목 셀 내부 */
.td_subj_inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bo_subject_link {
  color: var(--mod-text-title);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}
.bo_subject_link:hover {
  color: var(--mod-accent);
}
.icon_reply { color: var(--mod-accent); margin-right: 4px; font-size: 12px; }
.icon_secret { color: #f59e0b; margin-right: 4px; }

.badge_notice {
  background: var(--mod-accent-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.badge_current {
  background: #8b5cf6;
  color: #fff;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
}
.badge_cate {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  color: var(--mod-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.badge_new {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}
.badge_hot {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}
.badge_file, .badge_link {
  color: var(--mod-text-sub);
  font-size: 12px;
}
.badge_comment {
  color: var(--mod-accent);
  font-weight: 700;
  font-size: 12px;
  margin-left: 2px;
}

/* 모바일 전용 인라인 메타 (기본 숨김) */
.td_mobile_meta {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mod-text-sub);
  margin-top: 4px;
}
.td_mobile_meta .m_sep { opacity: 0.4; }

/* 빈 목록 */
.td_empty {
  padding: 60px 20px !important;
}
.empty_content {
  text-align: center;
  color: var(--mod-text-sub);
}
.empty_content i {
  font-size: 38px;
  margin-bottom: 8px;
  opacity: 0.4;
  display: block;
}

/* 페이지네이션 & 하단 바 */
.bo_mod_page {
  margin: 30px 0 20px;
  text-align: center;
}
.bo_mod_bottom_bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}

/* 모달 검색창 */
.bo_modal_search {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1000;
}
.modal_backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.bo_modal_inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: #1e293b;
  border: 1px solid var(--mod-border-hover);
  border-radius: var(--mod-radius);
  padding: 24px;
  width: 90%;
  max-width: 460px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.bo_modal_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bo_modal_head h3 {
  font-size: 16px; font-weight: 700; color: #fff; margin: 0;
}
.modal_close_btn {
  background: transparent; border: 0; color: var(--mod-text-muted); font-size: 16px; cursor: pointer;
}
.bo_modal_body {
  display: flex; gap: 8px;
}
.bo_modal_body select { width: 110px; }
.bo_search_box { position: relative; flex: 1; }
.bo_search_box input { padding-right: 40px !important; }
.bo_search_submit {
  position: absolute; top: 0; right: 0; width: 42px; height: 42px;
  background: transparent; border: 0; color: var(--mod-accent); font-size: 14px; cursor: pointer;
}


/* ==========================================================================
   B. BOARD VIEW (게시글 상세 보기)
   ========================================================================== */
.bo_mod_view_wrap {
  background: var(--mod-bg-card);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius);
  padding: 35px 30px;
}
.bo_v_header {
  border-bottom: 1px solid var(--mod-border);
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.bo_v_cate {
  margin-bottom: 10px;
}
.bo_v_title {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  color: var(--mod-text-title);
  line-height: 1.4;
  margin: 0 0 16px;
  word-break: break-word;
}
.bo_v_info_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.bo_v_author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author_avatar img {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mod-border);
  display: block;
}
.author_name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.author_ip {
  font-size: 11px;
  color: var(--mod-text-sub);
}
.meta_stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mod-text-sub);
  margin-top: 3px;
}
.meta_stats .sep { opacity: 0.4; }
.bo_v_top_btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 본문 섹션 */
.bo_v_content_wrap {
  min-height: 200px;
}
.bo_v_img_area {
  margin-bottom: 25px;
  text-align: center;
}
.bo_v_img_area img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--mod-radius-sm);
}
.bo_v_con_body {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--mod-text-body);
  word-break: break-word;
  margin-bottom: 35px;
}
.bo_v_con_body img {
  max-width: 100% !important;
  height: auto !important;
}

.bo_v_signature {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--mod-text-muted);
  margin: 25px 0;
}
.bo_v_signature strong {
  display: block; color: var(--mod-accent); font-size: 12px; margin-bottom: 6px;
}

/* 추천 비추천 알약 */
.bo_v_vote_area {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 35px 0;
}
.bo_vote_pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--mod-radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.vote_good {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
}
.vote_good:hover:not(.disabled) {
  background: rgba(99, 102, 241, 0.25);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}
.vote_nogood {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.vote_nogood:hover:not(.disabled) {
  background: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}
.bo_vote_pill.disabled { opacity: 0.6; cursor: default; }

/* 첨부파일 / 링크 박스 */
.bo_v_file_box, .bo_v_link_box {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.bo_v_file_box h4, .bo_v_link_box h4 {
  font-size: 13.5px; font-weight: 700; color: #fff; margin: 0 0 10px;
}
.bo_v_file_box ul, .bo_v_link_box ul {
  list-style: none; padding: 0; margin: 0;
}
.bo_v_file_box li, .bo_v_link_box li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--mod-border-subtle);
}
.bo_v_file_box li:last-child, .bo_v_link_box li:last-child {
  border-bottom: 0;
}
.bo_v_file_box a, .bo_v_link_box a {
  color: var(--mod-text-title);
  text-decoration: none;
}
.bo_v_file_box a:hover, .bo_v_link_box a:hover {
  color: var(--mod-accent);
}
.file_size { color: var(--mod-text-sub); margin-left: 4px; font-size: 12px; }
.file_meta, .link_hit { color: var(--mod-text-sub); font-size: 11.5px; margin-left: auto; }

/* SNS 공유 */
.bo_v_share_box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
}
.btn_scrap { height: 34px !important; }

/* 이전글 다음글 */
.bo_v_nav {
  margin: 30px 0;
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  overflow: hidden;
}
.nav_row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mod-bg-surface);
  border-bottom: 1px solid var(--mod-border-subtle);
  font-size: 13px;
}
.nav_row:last-child { border-bottom: 0; }
.nav_tag { width: 65px; color: var(--mod-text-sub); font-weight: 600; }
.nav_title { flex: 1; color: var(--mod-text-title); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav_title:hover { color: var(--mod-accent); }
.nav_date { color: var(--mod-text-sub); font-size: 12px; }


/* ==========================================================================
   C. COMMENTS (댓글)
   ========================================================================== */
.bo_mod_comment_wrap {
  margin-top: 35px;
}
.bo_vc_title_bar {
  margin-bottom: 16px;
}
.bo_vc_title_bar h3 {
  font-size: 17px; font-weight: 700; color: #fff; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.cmt_count {
  background: var(--mod-accent-grad);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--mod-radius-pill);
}

.bo_vc_list {
  margin-bottom: 25px;
}
.bo_cmt_item {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  position: relative;
}
.bo_cmt_item.is_reply {
  background: rgba(30, 41, 59, 0.65);
}
.reply_line {
  position: absolute;
  left: -14px; top: 20px;
  width: 10px; height: 10px;
  border-left: 2px solid var(--mod-accent);
  border-bottom: 2px solid var(--mod-accent);
  border-radius: 0 0 0 3px;
}
.cmt_avatar img {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: block;
}
.cmt_content_area {
  flex: 1;
  min-width: 0;
}
.cmt_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cmt_writer_info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cmt_name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.cmt_ip { font-size: 11px; color: var(--mod-text-sub); }
.cmt_date { font-size: 12px; color: var(--mod-text-sub); }

.cmt_body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mod-text-body);
  word-break: break-word;
}
.badge_secret {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cmt_empty_box {
  padding: 35px 20px;
  text-align: center;
  color: var(--mod-text-sub);
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
}
.cmt_empty_box i { font-size: 30px; margin-bottom: 6px; display: block; opacity: 0.4; }

/* 댓글 작성 폼 */
.bo_cmt_form_box {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  padding: 20px;
}
.cmt_form_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cmt_form_head h4 {
  font-size: 14px; font-weight: 700; color: #fff; margin: 0;
}
.cmt_char_limit {
  font-size: 12px; color: var(--mod-text-sub);
}
.cmt_textarea {
  height: 85px;
}
.cmt_form_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.cmt_bottom_left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cmt_guest_fields {
  display: flex;
  gap: 6px;
}
.cmt_guest_input {
  width: 100px;
  height: 36px !important;
}
.cmt_submit_btn {
  height: 38px !important;
  padding: 0 18px !important;
}


/* ==========================================================================
   D. BOARD WRITE (글쓰기/수정)
   ========================================================================== */
.bo_mod_write_wrap {
  background: var(--mod-bg-card);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius);
  padding: 35px 30px;
}
.bo_w_header {
  border-bottom: 1px solid var(--mod-border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.bo_w_title {
  font-size: 22px;
  font-weight: 800;
  color: var(--mod-text-title);
  margin: 0 0 6px;
}
.bo_w_desc {
  font-size: 13px;
  color: var(--mod-text-sub);
  margin: 0;
}

.form_row {
  margin-bottom: 20px;
}
.form_label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mod-text-muted);
  margin-bottom: 8px;
}
.req_dot {
  color: #ef4444;
  margin-left: 2px;
}

/* 2열 작성자 정보 */
.form_row_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* 옵션 체크박스 바 (공지, HTML, 비밀글 등) */
.bo_options_bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
}

/* 제목 및 임시저장 */
.title_label_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.title_label_wrap .form_label {
  margin-bottom: 0;
}
.autosave_btn_box {
  position: relative;
}
.autosave_layer {
  width: 300px;
}
.autosave_layer strong {
  display: block; font-size: 13px; color: #fff; margin-bottom: 8px;
}
.autosave_layer ul {
  padding: 0; margin: 0 0 8px; list-style: none; max-height: 160px; overflow-y: auto;
}
.autosave_layer li {
  padding: 5px 0; border-bottom: 1px solid var(--mod-border-subtle); font-size: 12px;
}
.autosave_layer a { color: var(--mod-text-body); text-decoration: none; }
.pop_close_area { text-align: right; }

/* 에디터 */
.form_editor_wrap textarea {
  width: 100%;
  min-height: 280px;
  background: var(--mod-bg-input) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  padding: 14px !important;
  color: var(--mod-text-title) !important;
  font-size: 14.5px !important;
  line-height: 1.8;
  outline: none;
}
.char_notice {
  font-size: 12px; color: var(--mod-text-sub); margin-bottom: 6px;
}
.char_count_badge {
  font-size: 12px; color: var(--mod-text-sub); margin-top: 6px; text-align: right;
}

/* 파일 업로드 카드 */
.file_upload_card {
  background: var(--mod-bg-surface);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-sm);
  padding: 12px 14px;
}
.bo_file_input {
  color: var(--mod-text-muted);
  font-size: 13px;
  width: 100%;
}
.file_desc_input {
  margin-top: 8px;
  height: 36px !important;
}
.file_del_label {
  margin-top: 8px !important;
}
.file_limit {
  font-size: 11.5px; color: var(--mod-text-sub); font-weight: normal;
}

/* 하단 버튼 바 */
.form_submit_bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 35px;
}
.form_submit_bar .bo_btn {
  min-width: 120px;
}


/* ==========================================================================
   E. RESPONSIVE MEDIA QUERIES (반응형 최적화)
   ========================================================================== */

@media (max-width: 768px) {
  .bo_mod_view_wrap, .bo_mod_write_wrap {
    padding: 20px 16px;
  }
  
  /* 모바일 테이블 최적화: 불필요 컬럼 숨기고 메타 인라인 표시 */
  .bo_mod_table .th_num, .bo_mod_table .td_num,
  .bo_mod_table .th_name, .bo_mod_table .td_name,
  .bo_mod_table .th_hit, .bo_mod_table .td_hit,
  .bo_mod_table .th_good, .bo_mod_table .td_good,
  .bo_mod_table .th_date, .bo_mod_table .td_date {
    display: none !important;
  }
  
  .td_mobile_meta {
    display: flex !important;
  }
  
  .bo_mod_table tbody td {
    padding: 12px 10px;
  }
  
  .form_row_grid {
    grid-template-columns: 1fr;
  }
  
  .form_submit_bar {
    width: 100%;
  }
  .form_submit_bar .bo_btn {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .bo_mod_title {
    font-size: 18px;
  }
  .bo_v_title {
    font-size: 18px;
  }
  .bo_v_info_bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .bo_v_top_btns {
    width: 100%;
    justify-content: flex-end;
  }
  .bo_v_vote_area {
    flex-direction: column;
  }
  .bo_vote_pill {
    width: 100%;
    justify-content: center;
  }
  
  .cmt_form_bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .cmt_guest_fields {
    width: 100%;
  }
  .cmt_guest_input {
    flex: 1;
    width: auto;
  }
  .cmt_submit_btn {
    width: 100%;
  }
}