/* =============================================================================
   공개 게시판 — 리치 HTML 본문(.bv-body--html) 전용 스타일   2026-09-04
   =============================================================================
   왜 별도 파일인가:
     이 사이트는 전역 리셋이 세다 — styles.css 의 *{margin:0;padding:0},
     img{display:block}, ul,ol{list-style:none}. 그래서 워드형 편집기(CKEditor)가 내는
     h2·table·blockquote·hr·ul/ol 은 **규칙이 하나도 없어** 민짜로 렌더된다.
     저장된 HTML 은 구조만 담고(인라인 style 은 정화기가 지운다) 표현은 전부 여기 있다.

   ⚠️ 여기 수치는 관리자 편집기(cniadmin/admin.css 의 #noticeEditor 절)와 **같은 값**이어야
      한다. 어긋나면 "편집기와 게시판이 다르게 보인다"가 된다 — 한쪽을 고치면 양쪽을 고칠 것.

   ⚠️ 이미지 폭·정렬은 인라인 style 이 아니라 rt-w{25..100}·rt-ac/rt-ar **클래스**로 온다.
      저장 시 cni_html_style_to_classes() 가 환산한다. 공개 CSP 가 style-src 'self' 라
      인라인 style 은 브라우저가 조용히 무시하기 때문이다(.htaccess 참조).
      → 새 스타일은 반드시 이 파일에, 클래스로. 인라인 style 속성으로 넣으면 먹지 않는다.
   ============================================================================= */

.bv-body--html{font-size:16.5px;line-height:1.85;color:var(--gray-700, #334155)}
.bv-body--html > *:first-child{margin-top:0}
.bv-body--html > *:last-child{margin-bottom:0}

/* 문단 — ★white-space 를 normal 로 못 박는다.
   .bv-body--rich(마크다운 경로)는 pre-wrap 이라 편집기와 1:1 을 만드는데, HTML 저장물은
   태그 사이 개행·들여쓰기가 있어 그 규칙에 걸리면 전부 빈 줄로 벌어진다.
   지금은 클래스가 갈려 있어 안전하지만, 누가 셀렉터를 합칠 때를 대비한 방어다. */
.bv-body--html p{margin:0 0 1.05em;white-space:normal}

.bv-body--html h2{font-size:clamp(20px, 2vw, 25px);font-weight:800;letter-spacing:-.02em;
  color:var(--ink, #101725);margin:1.7em 0 .55em}
.bv-body--html h3{font-size:21px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink, #101725);margin:1.6em 0 .5em}
.bv-body--html h4{font-size:18px;font-weight:700;color:var(--ink, #101725);margin:1.5em 0 .45em}

.bv-body--html a{color:var(--brand-600, #0e5273);text-decoration:underline;text-underline-offset:3px}
.bv-body--html a:hover{text-decoration-thickness:2px}
.bv-body--html strong,.bv-body--html b{font-weight:700;color:var(--ink, #101725)}
.bv-body--html u{text-decoration:underline;text-underline-offset:2px}
.bv-body--html s{text-decoration:line-through}
.bv-body--html sub{vertical-align:sub;font-size:.82em}
.bv-body--html sup{vertical-align:super;font-size:.82em}
.bv-body--html small{font-size:.86em;color:var(--gray-500, #64748b)}
.bv-body--html mark{background:#fdf2c8;padding:0 3px;border-radius:3px}

/* 목록 — ★전역 리셋이 마커를 지운다. 되살리지 않으면 번호·점 없는 밋밋한 줄이 된다. */
.bv-body--html ul{list-style:disc;padding-left:1.5em;margin:0 0 1.05em}
.bv-body--html ol{list-style:decimal;padding-left:1.5em;margin:0 0 1.05em}
.bv-body--html li{margin:.3em 0}
.bv-body--html li > ul,.bv-body--html li > ol{margin:.3em 0}

.bv-body--html blockquote{border-left:2px solid var(--brand, #12678F);padding-left:20px;
  margin:1.3em 0;color:var(--gray-600, #48566b)}
.bv-body--html code{background:var(--gray-100, #eef1f6);border-radius:5px;padding:1px 6px;font-size:.9em}
.bv-body--html pre{background:var(--gray-100, #eef1f6);border-radius:10px;padding:14px 16px;
  margin:1.3em 0;overflow-x:auto}
.bv-body--html pre code{background:none;padding:0}
.bv-body--html hr{border:0;border-top:1px solid var(--line, #e6ebf3);margin:1.6em 0}

/* 표 — 폰에서 가로로 넘치면 figure 가 스크롤을 받는다(페이지 전체가 밀리지 않게) */
.bv-body--html table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}
.bv-body--html th,.bv-body--html td{border:1px solid var(--line, #e6ebf3);padding:9px 12px;text-align:left}
.bv-body--html th{background:var(--gray-50, #f7f9fc);font-weight:700;color:var(--ink, #101725)}
.bv-body--html figure.table{margin:1.3em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bv-body--html figure.table table{margin:0}

/* 이미지 */
.bv-body--html img{max-width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line, #e6ebf3);margin:1.3em 0}
.bv-body--html figure.image{margin:1.3em auto;display:block}
.bv-body--html figure.image img{width:100%;margin:0}
.bv-body--html figure.image > figcaption{margin-top:10px;font-size:.86em;line-height:1.6;
  color:var(--gray-500, #64748b);text-align:center}
.bv-body--html .image-style-align-left{float:left;margin:.4em 1.4em 1em 0;max-width:50%}
.bv-body--html .image-style-align-right{float:right;margin:.4em 0 1em 1.4em;max-width:50%}
.bv-body--html .image-style-block{margin-left:auto;margin-right:auto}
/* 문단 속 인라인 이미지 — 전역 img{display:block} 을 이겨야 줄이 안 깨진다 */
.bv-body--html p img,.bv-body--html .image-inline img{display:inline-block;vertical-align:middle}

/* ★float 뒷정리 — 빠뜨리면 좌우 배치한 사진이 다음 블록과 겹친다 */
.bv-body--html h2,.bv-body--html h3,.bv-body--html h4,
.bv-body--html hr,.bv-body--html table,.bv-body--html figure.table,
.bv-body--html blockquote{clear:both}
.bv-body--html::after{content:"";display:block;clear:both}

/* 저장 시 인라인 style 에서 환산된 폭·정렬 클래스 (마크다운 경로의 rt-w* 와 같은 이름·같은 값) */
.bv-body--html .rt-w25{width:25%}
.bv-body--html .rt-w33{width:33%}
.bv-body--html .rt-w50{width:50%}
.bv-body--html .rt-w66{width:66%}
.bv-body--html .rt-w75{width:75%}
.bv-body--html .rt-w100{width:100%}
.bv-body--html .rt-ac{text-align:center}
.bv-body--html .rt-ar{text-align:right}

@media (max-width: 640px){
  .bv-body--html{font-size:15.5px}
  /* 폰에서는 좌우 배치를 풀어 한 줄 전체로 — 50% 이미지 옆 글자는 서너 자밖에 안 들어간다 */
  .bv-body--html .image-style-align-left,
  .bv-body--html .image-style-align-right{float:none;max-width:100%;margin:1.3em 0}
  .bv-body--html .rt-w25,.bv-body--html .rt-w33,
  .bv-body--html .rt-w50,.bv-body--html .rt-w66,.bv-body--html .rt-w75{width:100%}
}