/*
 * 공고문 본문의 모양. 설계: §41.1 2단계
 *
 * 관리자 편집기(Summernote)와 지원자 화면이 **같은 파일**을 쓴다.
 * 따로 두면 "편집기에서는 멀쩡한데 올리면 깨진다" 가 생긴다.
 */
.rich-text,
.note-editable {
    line-height: 1.75;
    word-break: break-word;
}

.rich-text > :first-child,
.note-editable > :first-child { margin-top: 0; }

.rich-text > :last-child,
.note-editable > :last-child { margin-bottom: 0; }

.rich-text h2, .note-editable h2 { font-size: 1.35rem; margin: 1.8em 0 .6em; }
.rich-text h3, .note-editable h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.rich-text h4, .note-editable h4 { font-size: 1.02rem; margin: 1.4em 0 .4em; }

.rich-text p, .note-editable p { margin: 0 0 .9em; }

.rich-text ul, .rich-text ol,
.note-editable ul, .note-editable ol { margin: 0 0 .9em; padding-left: 1.4em; }

.rich-text blockquote,
.note-editable blockquote {
    margin: 1.2em 0;
    padding: .2em 0 .2em 1em;
    border-left: 3px solid currentColor;
    opacity: .85;
}

.rich-text hr, .note-editable hr { margin: 1.6em 0; border: 0; border-top: 1px solid currentColor; opacity: .2; }

/* 올린 그림이 칸을 넘지 않게 한다. 휴대폰에서 가로 스크롤이 생기는 제일 흔한 원인이다. */
.rich-text img, .note-editable img { max-width: 100%; height: auto; }

/* 표는 좁은 화면에서 가로로만 밀리게 한다. 글자를 줄이면 못 읽는다. */
.rich-text table, .note-editable table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.rich-text th, .rich-text td,
.note-editable th, .note-editable td {
    padding: .5em .7em;
    border: 1px solid rgba(128, 128, 128, .35);
    vertical-align: top;
}

.rich-text th, .note-editable th { background: rgba(128, 128, 128, .12); text-align: left; }

.rich-text-scroll { overflow-x: auto; }