/* 게시판 공통: 목록 위 도구줄(글 수 · 검색), 분류 칩, 아래 쪽 번호, 빈 목록.
   디자인: 캔버스 "동광보일러 게시판 페이징 · 검색" 제안 A. 공지사항 · 인증서 · 이전 온라인문의 게시판이 같이 쓴다.
   색 역할은 문의 폼(inquiry.css)과 같다: 파랑=행동 · 고른 것, 회색=읽는 위계, 진한 남색=글 · 보조 단추.
   옛 공통 스타일(common/css/default.css)의 a:hover · a:focus{color:#000} 을 이기려고 링크 상태를 같이 적는다. */
.btool, .bcat, .bfoot, .bempty {
  --b-blue:#006dbb; --b-blue-dark:#00578f; --b-tint:#eaf3fa;
  --b-ink:#1c2025; --b-text:#333a42; --b-muted:#4a525c; --b-faint:#5b6470; --b-gap:#8a929c;
  --b-line:#e3e6ea; --b-ctl:#b8c0c9; --b-ctl-soft:#d5dae0; --b-soft:#f4f5f6;
  letter-spacing:-.02em;
}
.btool *, .bcat *, .bfoot *, .bempty * { box-sizing:border-box; }

/* ── 도구줄 ── */
.btool { display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; margin:0 0 20px; }
.btool__info { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; min-width:0; }
.btool__count { margin:0; font-size:16px; line-height:1.5; color:var(--b-text); }
.btool__count b { font-weight:700; color:var(--b-ink); }
.btool__count em { font-style:normal; font-weight:700; color:var(--b-blue); }
.btool__page { margin-left:12px; padding-left:12px; border-left:1px solid var(--b-ctl-soft); color:var(--b-faint); font-variant-numeric:tabular-nums; }
.btool .btool__clear, .btool .btool__clear:focus { height:36px; padding:0 12px 0 14px; border:1px solid var(--b-ctl-soft); border-radius:18px; display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--b-muted); text-decoration:none; }
.btool .btool__clear:hover { border-color:var(--b-faint); color:var(--b-ink); }
.btool__clear svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

/* 검색: 항목 · 검색어 · 단추를 한 칸으로 */
.bsrch { display:flex; width:480px; max-width:100%; height:52px; margin:0; border:1px solid var(--b-ctl); border-radius:8px; background:#fff; overflow:hidden; }
.bsrch:hover { border-color:var(--b-faint); }
.bsrch:focus-within { border-color:var(--b-blue); box-shadow:inset 0 0 0 1px var(--b-blue); }
.bsrch__type { position:relative; display:flex; flex:none; border-right:1px solid var(--b-line); }
.bsrch__type select { height:100%; margin:0; padding:0 40px 0 18px; border:0; border-radius:0; background:transparent; -webkit-appearance:none; appearance:none; font-family:inherit; font-size:15px; font-weight:500; color:var(--b-ink); cursor:pointer; }
.bsrch__type svg { position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px; fill:none; stroke:var(--b-faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.bsrch input[type=search] { flex:1; min-width:0; height:100%; margin:0; padding:0 16px; border:0; border-radius:0; background:transparent; -webkit-appearance:none; appearance:none; font-family:inherit; font-size:16px; color:var(--b-ink); }
.bsrch input::placeholder { color:#6b7280; opacity:1; }
.bsrch select:focus, .bsrch input:focus { outline:0; box-shadow:none; }
.bsrch button { flex:none; width:56px; margin:0; padding:0; border:0; border-radius:0; background:var(--b-blue); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.bsrch button:hover { background:var(--b-blue-dark); }
.bsrch button:focus-visible { outline:2px solid #fff; outline-offset:-6px; }
.bsrch button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* 카드형(인증서)은 도구줄 아래에 줄을 긋고 목록과 띄운다. 표형은 표가 자기 윗줄을 갖는다. */
.bbs-list.gallery .btool { padding-bottom:20px; border-bottom:2px solid #1c2025; margin-bottom:36px; }

/* ── 분류 칩(인증서) ── */
.bcat { margin:0 0 32px; }
.bcat ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.bcat a, .bcat a:focus { height:44px; padding:0 20px; border:1px solid var(--b-ctl); border-radius:22px; background:#fff; display:inline-flex; align-items:center; font-size:15px; color:var(--b-text); text-decoration:none; }
.bcat a:hover { border-color:var(--b-faint); color:var(--b-ink); }
.bcat a[aria-current=page], .bcat a[aria-current=page]:hover, .bcat a[aria-current=page]:focus { padding:0 19px; border:2px solid var(--b-blue); background:var(--b-tint); color:var(--b-blue); font-weight:700; }
.bcat a:focus-visible { outline:2px solid var(--b-blue); outline-offset:2px; }

/* ── 쪽 번호 ── */
.bfoot { margin-top:48px; display:flex; justify-content:center; }
.bfoot--write { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.bfoot--write .bpg { grid-column:2; }
.bfoot .bfoot__write, .bfoot .bfoot__write:focus { grid-column:3; justify-self:end; height:48px; padding:0 24px; border-radius:24px; background:var(--b-ink); color:#fff; display:inline-flex; align-items:center; font-size:15px; font-weight:700; text-decoration:none; }
.bfoot .bfoot__write:hover { background:var(--b-blue); color:#fff; }

.bpg__list { display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.bpg__list > li:first-child { margin-right:6px; }
.bpg__list > li:last-child { margin-left:6px; }
.bpg .bpg__num, .bpg .bpg__num:focus { width:40px; height:40px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--b-text); text-decoration:none; font-variant-numeric:tabular-nums; }
.bpg a.bpg__num:hover { background:var(--b-soft); color:var(--b-ink); }
.bpg .bpg__num.is-cur { background:var(--b-blue); color:#fff; font-weight:700; }
.bpg .bpg__arw, .bpg .bpg__arw:focus { width:40px; height:40px; border:1px solid var(--b-ctl-soft); border-radius:20px; display:flex; align-items:center; justify-content:center; color:var(--b-ink); }
.bpg a.bpg__arw:hover { border-color:var(--b-faint); color:var(--b-ink); }
.bpg .is-off { border-color:var(--b-line); color:var(--b-ctl); cursor:default; }
.bpg__gap { width:24px; text-align:center; font-size:15px; color:var(--b-gap); }
.bpg svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bpg a:focus-visible, .bempty a:focus-visible, .bfoot__write:focus-visible, .btool__clear:focus-visible { outline:2px solid var(--b-blue); outline-offset:2px; }

/* 좁은 화면용: 이전 · 6 / 25 · 다음 */
.bpg__m { display:none; }
.bpg .bpg__step, .bpg .bpg__step:focus { height:44px; padding:0 18px 0 12px; border:1px solid var(--b-ctl-soft); border-radius:22px; display:inline-flex; align-items:center; gap:4px; font-size:15px; color:var(--b-ink); text-decoration:none; }
.bpg .bpg__step:last-child { padding:0 12px 0 18px; }
.bpg a.bpg__step:hover { border-color:var(--b-faint); color:var(--b-ink); }
.bpg .bpg__step.is-off { border-color:var(--b-line); color:var(--b-ctl); cursor:default; }
.bpg__now { margin:0; font-size:15px; color:var(--b-faint); font-variant-numeric:tabular-nums; }
.bpg__now b { font-size:17px; color:var(--b-blue); }

/* ── 빈 목록 ── */
.bbs-list-body tr.bempty td, div.bempty { padding:56px 16px; text-align:center; }
div.bempty { border-bottom:1px solid var(--b-line); }
.bempty p { margin:0; font-size:15px; line-height:1.6; color:var(--b-muted); }
.bempty .bempty__t { margin-bottom:6px; font-size:18px; font-weight:700; color:var(--b-ink); }
.bempty .bempty__all, .bempty .bempty__all:focus { margin-top:18px; height:48px; padding:0 24px; border-radius:24px; background:var(--b-ink); color:#fff; display:inline-flex; align-items:center; font-size:15px; font-weight:700; text-decoration:none; }
.bempty .bempty__all:hover { background:var(--b-blue); color:#fff; }

@media (max-width:767px) {
  .btool { flex-direction:column-reverse; align-items:stretch; gap:14px; }
  .bsrch { width:100%; }
  .bsrch__type select { padding:0 32px 0 14px; }
  .bsrch__type svg { right:10px; }
  .bsrch input[type=search] { padding:0 12px; }
  .bsrch button { width:52px; }
  .btool__count { font-size:15px; }
}
@media (max-width:600px) {
  .bfoot { margin-top:32px; }
  .bfoot .bpg { width:100%; }
  .bpg__list { display:none; }
  .bpg__m { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .bfoot--write { grid-template-columns:1fr; }
  .bfoot--write > span { display:none; }
  .bfoot--write .bpg, .bfoot .bfoot__write { grid-column:1; }
  .bfoot .bfoot__write, .bfoot .bfoot__write:focus { justify-self:stretch; justify-content:center; height:52px; border-radius:26px; font-size:16px; }
  .bcat { margin-bottom:24px; }
  .bcat a, .bcat a:focus { padding:0 16px; }
  .bcat a[aria-current=page], .bcat a[aria-current=page]:hover, .bcat a[aria-current=page]:focus { padding:0 15px; }
}