/* board.css — 공개 게시판 8종 (/board/*)
   site.css 토큰만 쓴다. 새 색·새 서체를 만들지 않는다. 자체 클래스는 m-bd-, 옛 본문은 m-legacy-. */

.m-bd { max-width: 980px; margin: 0 auto; }

.m-bd__count { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-3); }

/* 목록 */
.m-bd__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--brand-ink); }
.m-bd__list > li { border-bottom: 1px solid var(--line); }
.m-bd__list > li > a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px;
  flex-wrap: wrap; padding: 16px 4px; text-decoration: none; color: var(--ink);
}
.m-bd__list > li > a:hover .m-bd__t,
.m-bd__list > li > a:focus-visible .m-bd__t { color: var(--brand-ink); text-decoration: underline; }
.m-bd__list > li > a:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: -3px; }
.m-bd__row { display: flex; align-items: center; gap: 8px; flex: 1 1 62%; min-width: 0; }
.m-bd__t { font-size: 16.5px; line-height: 1.55; font-weight: 600; word-break: break-word; }
.m-bd__clip { flex: none; color: var(--ink-3); }
.m-bd__clip svg { width: 15px; height: 15px; display: block; }
.m-bd__meta { display: flex; gap: 14px; flex: none; font-size: 14px; color: var(--ink-3); }
.m-bd__by { display: none; }
.m-bd__none { padding: 40px 4px; text-align: center; color: var(--ink-3); }

.m-bd__tag {
  flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand-ink);
}
.m-bd__tag--fix { background: var(--brand-ink); color: #fff; }

/* 쪽 넘기기 */
.m-bd__pager { margin: 30px 0 0; }
.m-bd__pager ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.m-bd__pager a, .m-bd__cur, .m-bd__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius); font-size: 15.5px; text-decoration: none;
}
.m-bd__pager a { border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); }
.m-bd__pager a:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.m-bd__pager a:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 1px; }
.m-bd__cur { border: 1px solid var(--brand-ink); background: var(--brand-ink); color: #fff; font-weight: 700; }
.m-bd__gap { color: var(--ink-3); }

/* 본문 */
.m-bd__vmeta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3); }
.m-bd__view { max-width: 980px; margin: 0 auto; border-top: 2px solid var(--brand-ink); padding-top: clamp(22px, 2.6vw, 32px); }
.m-bd__empty { margin: 0; padding: 36px 0; text-align: center; color: var(--ink-3); }

.m-bd__files, .m-bd__emb { margin: 30px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2, #f7f9f8); }
.m-bd__files h2, .m-bd__emb h2 { margin: 0 0 10px; font-size: 15.5px; color: var(--ink); }
.m-bd__files ul, .m-bd__emb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-bd__files a, .m-bd__emb a { color: var(--brand-ink); font-size: 15.5px; word-break: break-all; }

.m-bd__sibs { max-width: 980px; margin: 34px auto 0; display: grid; gap: 10px; }
.m-bd__sib {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.m-bd__sib:hover { border-color: var(--brand-ink); }
.m-bd__sib:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 1px; }
.m-bd__siblab { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.m-bd__siblab svg { width: 15px; height: 15px; }
.m-bd__sib[rel="prev"] .m-bd__siblab svg { transform: rotate(180deg); }
.m-bd__sibt { font-size: 15.5px; }
.m-bd__back { max-width: 980px; margin: 26px auto 0; }

/* ───── 옛 본문 (m-legacy) ─────
   옛 게시판 HTML 을 그대로 둔 구역이다. 인라인 style·폰트 지정이 섞여 있으므로
   깨지지 않을 만큼만 붙잡아 준다. 새 디자인 체계를 여기에 들이지 않는다. */
.m-legacy { font-size: 16.5px; line-height: 1.8; color: var(--ink-2); word-break: break-word; overflow-wrap: anywhere; }
.m-legacy * { max-width: 100%; }
.m-legacy p, .m-legacy div, .m-legacy span, .m-legacy li, .m-legacy td, .m-legacy th {
  font-family: inherit !important; font-size: inherit !important;
  line-height: inherit !important; color: inherit !important;
  letter-spacing: normal !important;
}
.m-legacy b, .m-legacy strong { font-weight: 700; color: var(--ink); }
.m-legacy img { height: auto !important; display: block; margin: 10px auto; border-radius: var(--radius); }
.m-legacy a { color: var(--brand-ink); }
.m-legacy hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.m-legacy table { border-collapse: collapse; width: auto !important; margin: 14px 0; }
.m-legacy td, .m-legacy th { border: 1px solid var(--line); padding: 8px 10px; }
/* 넓은 표·긴 줄은 구역 안에서만 옆으로 흐르게 한다(본문이 가로로 밀리지 않게) */
.m-legacy > div, .m-legacy > table { overflow-x: auto; }

@media (min-width: 720px) {
  .m-bd__by { display: inline; }
  .m-bd__sibs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .m-bd__meta { font-size: 13.5px; }
  .m-bd__t { font-size: 16px; }
}