@charset "utf-8";
/* =====================================================
   그누보드5 회계 게시판 스킨 스타일시트
   Design: Clean Ledger — 정갈한 회계장부 컨셉
   v2 — 사이트 레이아웃 보호, 렌더링 버그 수정
   ===================================================== */

/* ── 디자인 토큰 ───────────────────────────────────── */
:root {
  --color-primary:     #1a4a8a;
  --color-primary-lt:  #2563b8;
  --color-primary-bg:  #eef4fb;

  --color-income:      #1a5cb8;
  --color-income-bg:   #e8f0fb;
  --color-expense:     #c0392b;
  --color-expense-bg:  #fbeaea;

  --color-success:     #1e7e4a;
  --color-warning:     #b45309;

  --color-text:        #1c2533;
  --color-text-muted:  #64748b;
  --color-text-light:  #94a3b8;

  --color-border:      #dde3ec;
  --color-border-lt:   #edf0f5;
  --color-bg:          #f7f9fc;
  --color-bg-white:    #ffffff;
  --color-bg-header:   #1a4a8a;

  --color-notice-bg:   #fdf8ee;
  --color-notice-bd:   #e8d5a0;
  --color-hover-row:   #f0f5fb;

  --font-base: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'D2Coding', 'Consolas', monospace;

  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.875rem;
  --text-md:   0.95rem;
  --text-lg:   1.05rem;
  --text-xl:   1.2rem;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;

  --shadow-xs: 0 1px 3px rgba(26,74,138,.07);
  --shadow-sm: 0 2px 8px rgba(26,74,138,.10);
  --shadow-md: 0 4px 16px rgba(26,74,138,.13);

  --transition: 0.18s ease;
}

/* ──────────────────────────────────────────────────────
   ★ 주의: box-sizing 전역 리셋은 사이트 전체 레이아웃을
   파괴하므로 #bo_list, #bo_v, #bo_w, #bo_vc 스코프 내에만 적용
   ────────────────────────────────────────────────────── */
#bo_list *, #bo_list *::before, #bo_list *::after,
#bo_v *,    #bo_v *::before,    #bo_v *::after,
#bo_w *,    #bo_w *::before,    #bo_w *::after,
#bo_vc *,   #bo_vc *::before,   #bo_vc *::after {
  box-sizing: border-box;
}

/* ============================================================
   게시판 목록 (#bo_list)
   ============================================================ */

#bo_list {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: var(--color-text);
}

/* ── 검색 폼 ──────────────────────────────────────── */
/*
   ★ 수정: float:left 제거
   float을 유지하면 뒤따르는 .tbl_head01.tbl_wrap(테이블)이
   float 옆으로 끌려 올라가 검색창·건수 표시 사이에 목록이 끼어들어 보입니다.
   display:inline-block으로 교체해도 동일 문제가 발생하므로
   검색행 전체를 block(flex)으로 처리합니다.
*/
#bo_sch {
  display: inline-block;   /* float 대신 inline-block */
  vertical-align: top;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
#bo_sch legend {
  position: absolute;
  margin: 0; padding: 0;
  font-size: 0; line-height: 0;
  text-indent: -9999em; overflow: hidden;
}
#bo_sch select,
#bo_sch input[type="text"] {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  vertical-align: middle;
}
#bo_sch select:focus,
#bo_sch input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 3px rgba(37,99,184,.13);
}
#bo_sch input.btn_submit {
  height: 32px;
  padding: 0 var(--sp-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  vertical-align: middle;
}
#bo_sch input.btn_submit:hover { background: var(--color-primary-lt); }

/* ── 검색행 clearfix ─────────────────────────────────
   .bo_right(float:right)가 해소되지 않아 이후 테이블이
   float 옆으로 끌려 올라가는 현상을 방지합니다.
   ────────────────────────────────────────────────────── */
#bo_list::after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
  height: 0;
}

/* ── 상단 우측 총건수 ────────────────────────────── */
.bo_right { float: right; }

#bo_list_total {
  display: inline-block;
  vertical-align: middle;
  padding-top: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 2.2;
}
#bo_list_total span {
  font-weight: 700;
  color: var(--color-primary);
}

/* ── 테이블 래퍼 ─────────────────────────────────────
   ★ tbl_head01과 tbl_wrap은 별도 클래스로 붙어 있음
      → .tbl_head01.tbl_wrap (붙여쓰기)로 정확히 매칭
   ────────────────────────────────────────────────────── */
#bo_list .tbl_head01.tbl_wrap {
  /* 테이블에 border-radius 직접 적용시 깨지므로
     div 래퍼에만 적용하고 overflow:hidden으로 클리핑 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4);
}

#bo_list .tbl_head01 table {
  width: 100%;
  border-collapse: collapse;
  /* border-radius는 table 요소에 직접 주지 않음 */
}

#bo_list .tbl_head01 caption {
  position: absolute;
  font-size: 0; line-height: 0;
  overflow: hidden;
}

/* 헤더 */
#bo_list .tbl_head01 thead th {
  padding: 10px var(--sp-3);
  background: var(--color-bg-header);
  color: rgba(255,255,255,.92);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255,255,255,.12);
  text-align: center;
}
#bo_list .tbl_head01 thead a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
#bo_list .tbl_head01 thead a:hover { color: #fff; }

/* 수입 금액 헤더 강조 */
#bo_list .tbl_head01 thead th font[color="blue"],
#bo_list .tbl_head01 thead th span[style*="blue"] {
  color: #93c5fd !important;
}
/* 지출 금액 헤더 강조 */
#bo_list .tbl_head01 thead th font[color="red"],
#bo_list .tbl_head01 thead th span[style*="red"] {
  color: #fca5a5 !important;
}

/* 데이터 행 */
#bo_list .tbl_head01 tbody tr {
  border-bottom: 1px solid var(--color-border-lt);
  transition: background var(--transition);
}
#bo_list .tbl_head01 tbody tr:last-child { border-bottom: none; }
#bo_list .tbl_head01 tbody tr:hover { background: var(--color-hover-row); }

#bo_list .tbl_head01 td {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  vertical-align: middle;
  line-height: 1.5;
}

/* 공지 행 */
#bo_list .tbl_head01 .bo_notice td {
  background: var(--color-notice-bg);
  border-left: 3px solid var(--color-warning);
}
#bo_list .tbl_head01 .bo_notice td a { font-weight: 700; }

/* 번호 열 */
#bo_list .td_num {
  width: 48px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
#bo_list .td_num strong { color: var(--color-text); }

/* 날짜 링크 */
#bo_list .tbl_head01 td a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
#bo_list .tbl_head01 td a:hover { color: var(--color-primary-lt); text-decoration: underline; }

/* ★ font 태그 기반 색상 (그누보드 출력 그대로) */
/* 수입 금액 */
#bo_list .tbl_head01 td font[color="blue"],
#bo_list .tbl_head01 td span[style*="color:blue"],
#bo_list .tbl_head01 td span[style*="color: blue"] {
  color: var(--color-income) !important;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
/* 지출 금액 */
#bo_list .tbl_head01 td font[color="red"],
#bo_list .tbl_head01 td span[style*="color:red"],
#bo_list .tbl_head01 td span[style*="color: red"] {
  color: var(--color-expense) !important;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
/* 0(회색) */
#bo_list .tbl_head01 td font[color="#CCCCCC"],
#bo_list .tbl_head01 td span[style*="#ccc"],
#bo_list .tbl_head01 td span[style*="CCCCCC"] {
  color: #cbd5e1 !important;
  font-family: var(--font-mono);
}
/* 기록일 날짜 */
#bo_list .tbl_head01 td font[color="green"],
#bo_list .tbl_head01 td span[style*="color:green"] {
  color: var(--color-success) !important;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

/* 빈 테이블 */
#bo_list td.empty_table {
  padding: var(--sp-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  background: var(--color-bg-white);
}

/* 카테고리 분류 링크 */
#bo_list .tbl_head01 td a[href*="sca="] {
  display: inline-block;
  padding: 2px var(--sp-2);
  background: var(--color-border-lt);
  border-radius: 20px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* 열람중 */
.bo_current {
  color: var(--color-expense);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* ── 합계 테이블 ─────────────────────────────────────
   ★ border-radius를 table에 직접 주면 깨짐
      → wrapper div 방식으로 감싸거나 outline으로 처리
      현재 스킨은 table이 직접 출력되므로
      border-radius 없이 border + box-shadow만 사용
   ────────────────────────────────────────────────────── */

/* 합계 영역 전체 감싸는 테이블 (width=100%) */
#bo_list > table {
  /* 사이트 전체 table에 영향 안 주도록 직계 자식만 */
  margin: var(--sp-3) 0;
  font-size: var(--text-sm);
  width: 100%;
}

/* 합계 내부 테이블 (bgcolor="#0F2E51" 속성 기반) */
#bo_list table[bgcolor="#0F2E51"] {
  border: 1px solid var(--color-border);
  /* border-radius는 제거 — table에 직접 적용 불가 */
  overflow: visible;
  box-shadow: var(--shadow-xs);
  border-collapse: separate;  /* separate여야 border 보임 */
  border-spacing: 0;
  width: 100%;
}

/* 합계 헤더 행 */
#bo_list table[bgcolor="#0F2E51"] tr:first-child td {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  padding: var(--sp-2) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
#bo_list table[bgcolor="#0F2E51"] tr:first-child td font[color="green"],
#bo_list table[bgcolor="#0F2E51"] tr:first-child td span[style*="green"] {
  color: #93c5fd !important;
}

/* 합계 데이터 행 */
#bo_list table[bgcolor="#0F2E51"] tr[bgcolor="#EFEFEF"] td {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--color-border-lt);
  background: var(--color-bg-white) !important;
}
#bo_list table[bgcolor="#0F2E51"] tr:last-child td {
  border-bottom: none;
}

/* 합계 금액 */
#bo_list table[bgcolor="#0F2E51"] td font[color="blue"],
#bo_list table[bgcolor="#0F2E51"] td span[style*="blue"] {
  color: var(--color-income) !important;
  font-weight: 700;
  font-family: var(--font-mono);
}
#bo_list table[bgcolor="#0F2E51"] td font[color="red"],
#bo_list table[bgcolor="#0F2E51"] td span[style*="red"] {
  color: var(--color-expense) !important;
  font-weight: 700;
  font-family: var(--font-mono);
}
#bo_list table[bgcolor="#0F2E51"] td strong {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-primary);
}

/* ∽ 구분 셀 */
#bo_list > table > tbody > tr > td[width="2%"],
#bo_list > table > tbody > tr > td[align="center"][width="2%"] {
  color: var(--color-text-muted);
  font-size: 1.3em;
  vertical-align: middle;
  text-align: center;
}

/* ── 버튼 공통 ───────────────────────────────────── */
.bo_fx { margin-bottom: var(--sp-3); overflow: hidden; }
.bo_fx::after { display: block; visibility: hidden; clear: both; content: ""; }
.bo_fx ul { margin: 0; padding: 0; list-style: none; }

.btn_bo_user { float: left; margin: 0; padding: 0; list-style: none; }
.btn_bo_user li { float: left; margin-left: var(--sp-2); }
.btn_bo_adm { float: left; }
.btn_bo_adm li { float: left; margin-right: var(--sp-2); }
.btn_bo_adm input {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-expense);
  color: #fff;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn_bo_adm input:hover { background: #a93226; }

/* 목록/글쓰기 버튼 */
#bo_list a.btn_b01,
#bo_list a.btn_b02,
#bo_list a.btn_admin {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
#bo_list a.btn_b01 {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
#bo_list a.btn_b01:hover, #bo_list a.btn_b01:focus {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-lt);
}
#bo_list a.btn_b02 {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid transparent;
}
#bo_list a.btn_b02:hover { background: var(--color-primary-lt); }
#bo_list a.btn_admin {
  background: #475569;
  color: #fff;
  border: 1px solid transparent;
}
#bo_list a.btn_admin:hover { background: #334155; }

/* 카테고리 탭 */
#bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_cate ul { margin-bottom: var(--sp-3); padding-left: 1px; overflow: hidden; }
#bo_cate ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_cate li { float: left; margin-bottom: -1px; }
#bo_cate a {
  display: block;
  position: relative;
  margin-left: -1px;
  padding: 6px 0 5px;
  width: 90px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1.4;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
#bo_cate a:hover { background: var(--color-primary-bg); color: var(--color-primary); }
#bo_cate a:focus, #bo_cate a:active { text-decoration: none; }
#bo_cate #bo_cate_on {
  z-index: 2;
  border-color: var(--color-primary);
  background: var(--color-bg-white);
  color: var(--color-primary);
  font-weight: 700;
}

/* 공지 행 */
.bo_notice td { background: var(--color-notice-bg); }
.bo_notice td a { font-weight: 700; }
.td_num strong { color: var(--color-text); font-weight: 700; }

/* 카테고리 인라인 링크 */
.bo_cate_link {
  display: inline-block;
  margin: 0 var(--sp-1) 0 0;
  padding: 0 var(--sp-2) 0 0;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted) !important;
  font-weight: 600;
  font-size: var(--text-xs);
  text-decoration: none;
}
#bo_list .cnt_cmt {
  display: inline-block;
  margin: 0 0 0 var(--sp-1);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-primary-lt);
}

/* ============================================================
   게시판 쓰기 (#bo_w)
   ============================================================ */
#bo_w {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: var(--color-text);
}
#bo_w #container_title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-primary);
}

/* ★ tbl_wrap은 div이므로 border-radius 안전하게 적용 가능 */
.tbl_frm01.tbl_wrap {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.tbl_frm01 table {
  width: 100%;
  border-collapse: collapse;
}
.tbl_frm01 th {
  width: 130px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-lt);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.tbl_frm01 td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--color-border-lt);
  vertical-align: middle;
}
.tbl_frm01 tr:last-child th,
.tbl_frm01 tr:last-child td { border-bottom: none; }

.tbl_frm01 .frm_input,
.tbl_frm01 textarea {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tbl_frm01 .frm_input:focus,
.tbl_frm01 textarea:focus {
  outline: none;
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 3px rgba(37,99,184,.12);
}
.tbl_frm01 textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  line-height: 1.7;
}
.tbl_frm01 select {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg-white);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tbl_frm01 select:focus {
  outline: none;
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 3px rgba(37,99,184,.12);
}

#bo_w .required,
#bo_w textarea.required { border-color: var(--color-primary); }
#bo_w .sound_only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}

/* 쓰기 버튼 영역 */
#bo_w .btn_confirm {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
}
#bo_w .btn_submit {
  padding: var(--sp-2) var(--sp-6);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  box-shadow: var(--shadow-xs);
}
#bo_w .btn_submit:hover { background: var(--color-primary-lt); }
#bo_w .btn_submit:disabled { background: #94a3b8; cursor: not-allowed; }

#bo_w .btn_cancel {
  display: inline-block;
  padding: var(--sp-2) var(--sp-5);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
#bo_w .btn_cancel:hover { background: var(--color-bg); border-color: #94a3b8; }

/* 글자 수 */
#char_count_desc {
  display: block;
  margin: 0 0 var(--sp-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
#char_count_wrap {
  margin: var(--sp-2) 0 0;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
#char_count { font-weight: 700; color: var(--color-primary); }

/* 자동저장 팝업 */
#autosave_wrapper { position: relative; }
#autosave_pop {
  display: none;
  z-index: 10;
  position: absolute;
  top: 28px; right: 120px;
  padding: var(--sp-3);
  width: 360px;
  max-height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}
#autosave_pop strong { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#autosave_pop div { text-align: right; }
#autosave_pop button { margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
#autosave_pop ul { margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--color-border-lt); list-style: none; }
#autosave_pop li { padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--color-border-lt); overflow: hidden; }
#autosave_pop li::after { display: block; visibility: hidden; clear: both; content: ""; }
#autosave_pop a { display: block; float: left; font-size: var(--text-sm); color: var(--color-primary); }
#autosave_pop span { display: block; float: right; font-size: var(--text-xs); color: var(--color-text-muted); }
.autosave_close { cursor: pointer; }
.autosave_content { display: none; }

/* ============================================================
   게시판 읽기 (#bo_v)
   ============================================================ */
#bo_v {
  font-family: var(--font-base);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
}

#bo_v_table {
  position: absolute;
  top: 0; right: 16px;
  margin: 0;
  padding: 0 var(--sp-4);
  height: 28px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  line-height: 28px;
  box-shadow: var(--shadow-xs);
}

#bo_v_title {
  padding: var(--sp-4) 0 var(--sp-3);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1.4;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 0;
}

#bo_v_info {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border-lt);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
#bo_v_info h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_v_info strong {
  display: inline-block;
  margin: 0 var(--sp-3) 0 2px;
  font-weight: 600;
  color: var(--color-text);
}
#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest { font-weight: 700; color: var(--color-primary); }

/* 첨부파일 */
#bo_v_file {}
#bo_v_file h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_v_file ul { margin: var(--sp-3) 0; padding: 0; list-style: none; }
#bo_v_file li {
  padding: 0;
  border-bottom: 1px solid var(--color-border-lt);
  background: var(--color-bg);
  margin-bottom: var(--sp-1);
}
#bo_v_file a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  word-wrap: break-word;
  transition: color var(--transition);
}
#bo_v_file a:hover { color: var(--color-primary); }
#bo_v_file img { float: left; margin: 0 var(--sp-2) 0 0; }
.bo_v_file_cnt { display: inline-block; margin-left: var(--sp-3); font-size: var(--text-xs); color: var(--color-text-light); }

/* 관련링크 */
#bo_v_link {}
#bo_v_link h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_v_link ul { margin: var(--sp-3) 0; padding: 0; list-style: none; }
#bo_v_link li { padding: 0; border-bottom: 1px solid var(--color-border-lt); background: var(--color-bg); margin-bottom: var(--sp-1); }
#bo_v_link a { display: inline-block; padding: var(--sp-2) var(--sp-3); width: 100%; color: var(--color-primary); text-decoration: none; font-size: var(--text-sm); word-wrap: break-word; }
#bo_v_link a:hover { text-decoration: underline; }
.bo_v_link_cnt { display: inline-block; margin-left: var(--sp-3); font-size: var(--text-xs); color: var(--color-text-light); }

/* 상단/하단 버튼 영역 */
#bo_v_top, #bo_v_bot {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) 0;
  overflow: hidden;
}
#bo_v_top::after, #bo_v_bot::after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_v_top h2, #bo_v_bot h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_v_top ul, #bo_v_bot ul { margin: 0; padding: 0; list-style: none; }

.bo_v_nb { float: left; }
.bo_v_nb li { float: left; margin-right: var(--sp-2); }
.bo_v_com { float: right; }
.bo_v_com li { float: left; margin-left: var(--sp-2); }

/* 읽기 버튼 */
#bo_v a.btn_b01,
#bo_v a.btn_b02,
#bo_v a.btn_admin {
  display: inline-block;
  padding: 6px var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
#bo_v a.btn_b01 {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
#bo_v a.btn_b01:hover { background: var(--color-primary-bg); border-color: var(--color-primary-lt); }
#bo_v a.btn_b02 { background: var(--color-primary); color: #fff; border: 1px solid transparent; }
#bo_v a.btn_b02:hover { background: var(--color-primary-lt); }
#bo_v a.btn_admin { background: #475569; color: #fff; border: 1px solid transparent; }
#bo_v a.btn_admin:hover { background: #334155; }

/* 본문 영역 */
#bo_v_atc { min-height: 200px; padding: var(--sp-5) 0; }
#bo_v_atc_title { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* 본문 내 회계 정보 테이블 */
#bo_v_atc > table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-4);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-lt);
  /* ★ table에 border-radius 직접 금지 */
}
#bo_v_atc > table td {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-lt);
  vertical-align: middle;
}
#bo_v_atc > table tr:last-child td { border-bottom: none; }
#bo_v_atc > table td font[color="green"],
#bo_v_atc > table td span[style*="green"] {
  color: var(--color-primary) !important;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}
#bo_v_atc > table td font[color="blue"],
#bo_v_atc > table td span[style*="blue"] {
  color: var(--color-income) !important;
  font-weight: 700;
  font-family: var(--font-mono);
}
#bo_v_atc > table td font[color="red"],
#bo_v_atc > table td span[style*="red"] {
  color: var(--color-expense) !important;
  font-weight: 700;
  font-family: var(--font-mono);
}

#bo_v_img {
  margin: 0 0 var(--sp-5);
  width: 100%;
  overflow: hidden;
}
#bo_v_img::after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_v_img img { margin-bottom: var(--sp-5); max-width: 100%; height: auto; }

#bo_v_con {
  margin-bottom: var(--sp-8);
  width: 100%;
  line-height: 1.8;
  word-break: break-word;
  overflow: hidden;
  font-size: var(--text-md);
  color: var(--color-text);
}
#bo_v_con a { color: var(--color-primary); text-decoration: underline; }
#bo_v_con a:hover { color: var(--color-primary-lt); }
#bo_v_con img { max-width: 100%; height: auto; }

/* 추천/비추천 */
#bo_v_act {
  margin-bottom: var(--sp-8);
  text-align: center;
}
#bo_v_act .bo_v_act_gng { position: relative; display: inline-block; }
#bo_v_act a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-5);
  margin-right: var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition);
  vertical-align: middle;
}
#bo_v_act a:hover { background: var(--color-primary-bg); border-color: var(--color-primary-lt); color: var(--color-primary); }
#bo_v_act strong { color: var(--color-primary); font-weight: 700; }
#bo_v_act_good, #bo_v_act_nogood {
  display: none;
  position: absolute;
  top: 38px; left: 0;
  padding: var(--sp-2) 0;
  width: 170px;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 10;
}

#bo_v_sns { margin: 0 0 var(--sp-5); padding: 0; list-style: none; overflow: hidden; }
#bo_v_sns::after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_v_sns li { float: left; margin: 0 var(--sp-2) 0 0; }

/* ============================================================
   댓글 (#bo_vc)
   ============================================================ */
#bo_vc {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-xs);
}
#bo_vc h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border-lt);
}
#bo_vc article {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--color-border-lt);
}
#bo_vc article:first-of-type { border-top: none; }
#bo_vc header {
  position: relative;
  padding: 0 0 var(--sp-2);
  font-size: var(--text-sm);
}
#bo_vc header .icon_reply { position: absolute; top: 0; left: -18px; }
#bo_vc .sv_wrap { margin-right: var(--sp-4); }
#bo_vc .member,
#bo_vc .guest,
#bo_vc .sv_member,
#bo_vc .sv_guest { font-weight: 700; color: var(--color-primary); }
.bo_vc_hdinfo { display: inline-block; margin: 0 var(--sp-3) 0 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
#bo_vc h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc a { color: var(--color-text); text-decoration: none; transition: color var(--transition); }
#bo_vc a:hover { color: var(--color-primary); }
#bo_vc p { margin: 0; padding: var(--sp-1) 0 var(--sp-2); line-height: 1.8; font-size: var(--text-sm); }
#bo_vc p a { text-decoration: underline; color: var(--color-primary); }
#bo_vc p a.s_cmt { text-decoration: none; }
#bo_vc_empty { margin: 0; padding: var(--sp-8) !important; text-align: center; color: var(--color-text-muted); font-size: var(--text-md); }
#bo_vc footer { overflow: hidden; margin-top: var(--sp-1); }
#bo_vc footer::after { display: block; visibility: hidden; clear: both; content: ""; }

.bo_vc_act { float: right; margin: 0; list-style: none; overflow: hidden; }
.bo_vc_act::after { display: block; visibility: hidden; clear: both; content: ""; }
.bo_vc_act li { float: left; margin-left: var(--sp-2); }
.bo_vc_act a {
  display: inline-block;
  padding: 3px var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  transition: all var(--transition);
  text-decoration: none !important;
}
.bo_vc_act a:hover { background: var(--color-primary-bg); border-color: var(--color-primary-lt); color: var(--color-primary) !important; }

/* 댓글 쓰기 */
#bo_vc_w {
  position: relative;
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-xs);
}
#bo_vc_w h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
}
#bo_vc_w #char_cnt { display: block; margin: 0 0 var(--sp-2); font-size: var(--text-xs); color: var(--color-text-muted); }

#bo_vc_w textarea#wr_content {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#bo_vc_w textarea#wr_content:focus {
  outline: none;
  border-color: var(--color-primary-lt);
  box-shadow: 0 0 0 3px rgba(37,99,184,.12);
}

#bo_vc_w .btn_confirm { padding: var(--sp-3) 0 0; }
#bo_vc_w .btn_submit {
  padding: var(--sp-2) var(--sp-6);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
#bo_vc_w .btn_submit:hover { background: var(--color-primary-lt); }
#bo_vc_w .btn_submit:disabled { background: #94a3b8; cursor: not-allowed; }

#bo_vc_sns { margin: 0; padding: 0; list-style: none; overflow: hidden; }
#bo_vc_sns::after { display: block; visibility: hidden; clear: both; content: ""; }
#bo_vc_sns li { float: left; margin: 0 var(--sp-5) 0 0; }
#bo_vc_sns input { margin: 0 0 0 var(--sp-2); }

/* ============================================================
   페이징
   ============================================================ */
.pg_wrap {
  margin: var(--sp-4) 0;
  text-align: center;
  font-family: var(--font-base);
}
.pg_wrap a, .pg_wrap strong {
  display: inline-block;
  min-width: 30px;
  padding: 5px var(--sp-2);
  margin: 0 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
  text-align: center;
  line-height: 1.4;
}
.pg_wrap a:hover { background: var(--color-primary-bg); border-color: var(--color-primary-lt); color: var(--color-primary); }
.pg_wrap strong { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 768px) {
  #bo_sch { float: none; width: 100%; margin-bottom: var(--sp-3); }
  .bo_right { float: none; }
  #bo_list_total { float: none; padding-top: 0; margin-bottom: var(--sp-2); }

  #bo_list .tbl_head01 thead th,
  #bo_list .tbl_head01 td { font-size: var(--text-xs); padding: var(--sp-2); }

  .tbl_frm01 th { width: 80px; padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }
  .tbl_frm01 td { padding: var(--sp-2) var(--sp-3); }

  #bo_v_info { line-height: 2; }
  .bo_v_nb, .bo_v_com { float: none; }
  .bo_v_com { margin-top: var(--sp-2); }
  #bo_vc { padding: var(--sp-3); }
  #bo_vc_w { padding: var(--sp-3); }
  .btn_bo_user, .btn_bo_adm { float: none; }
  .btn_bo_user li, .btn_bo_adm li { margin: 0 var(--sp-2) var(--sp-2) 0; }
}

@media (max-width: 480px) {
  #bo_list .tbl_head01 table { font-size: 11px; }
  #bo_list .tbl_head01 thead th,
  #bo_list .tbl_head01 td { padding: 5px var(--sp-1); }
}

/* ============================================================
   인쇄
   ============================================================ */
@media print {
  #noPrint1, .bo_fx, #bo_v_top, #bo_v_bot,
  #bo_v_act, #bo_vc, #bo_vc_w, .pg_wrap { display: none !important; }
  #bo_list .tbl_head01.tbl_wrap { border: none; box-shadow: none; }
  #bo_list .tbl_head01 thead th {
    background: #1a4a8a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}