/* 게시판 본문 표시 규칙
 *
 * 그누보드는 viewimageresize.js 로 원본 이미지를 게시판 폭(bo_image_width=835px)에 맞춰
 * 클라이언트에서 줄여 보여줬다. 자체 게시판에서는 같은 일을 CSS 로 처리한다.
 * 실제 원본이 4000x1848 같은 크기라 이 처리가 없으면 가로 스크롤이 생긴다.
 */

.board-content img,
.board-images img,
#board-editor img {
    max-width: 100%;   /* width 속성·인라인 style 보다 우선한다 */
    height: auto;      /* 비율 유지 */
}

/* 본문에 붙어 오는 표·동영상도 화면 밖으로 나가지 않게 */
.board-content iframe,
.board-content video,
.board-content embed {
    max-width: 100%;
}

/* 한글에서 붙여넣은 표가 고정 폭을 가진 경우가 있어, 표만 따로 가로 스크롤을 허용한다 */
.board-content table {
    max-width: 100%;
}

/* 첨부된 이미지들 (본문 위에 표시) */
.board-images {
    margin-bottom: 1.5rem;
}

.board-images img {
    display: block;
    margin: 0 auto 1.5rem auto;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.board-images img:last-child,
.board-images a:last-child img {
    padding-bottom: 0;
    border-bottom: none;
}

/* 사진이 여러 장 이어지는 글(갤러리)에서 사진끼리 붙어 보이지 않게 띄우고 구분선을 넣는다.
 *
 * 본문이 <p><img><br style="clear:both;"><img>...</p> 형태라 여백이 하나도 없다.
 * 사진을 block 으로 바꾸면 사이의 <br> 이 빈 줄이 되어 간격이 들쭉날쭉해지므로,
 * 그누보드 에디터가 넣어 둔 그 <br> 만 감춘다. (사진 사이 float 해제용이라 없어도 무방)
 *
 * 갤러리에만 적용한다. 공지사항 본문에는 한글에서 붙여넣은 작은 그림이 글줄 안에 섞여 있어서
 * 전체에 걸면 문단이 깨진다.
 */
.board-content.board-photos img {
    display: block;
    margin: 0 auto 1.5rem auto;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.board-content.board-photos img:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.board-content.board-photos br[style*="clear"] {
    display: none;
}

/* 편집기 안에서도 큰 이미지가 넘치지 않게 */
#board-editor {
    line-height: 1.6;
}

#board-editor img {
    /* 드래그&드롭으로 넣은 이미지가 편집 중에도 제 영역을 차지하도록 */
    display: inline-block;
    vertical-align: middle;
}

#board-editor.dragover {
    outline: 2px dashed #0d6efd;
    outline-offset: -4px;
    background-color: #f0f7ff;
}