@charset "UTF-8";

/* ============================================================
 * 에디터 본문 공통 스타일
 *
 * 이 파일 하나를 두 곳에서 같이 쓴다.
 *   1) 관리자 미리보기   → <div class="editor-content">
 *   2) 프론트 팝업 노출  → <div class="editor-content">
 *
 * CKEditor 편집 영역에는 적용하지 않는다.
 * contentsCss 를 건드리면 같은 에디터를 쓰는 다른 화면까지 영향을 받기 때문이다.
 * 따라서 편집 중 모습과는 다소 차이가 있을 수 있고,
 * 미리보기가 실제 노출과 일치하는 쪽을 기준으로 삼는다.
 *
 * 사이트 공통 CSS 의 리셋(* { margin:0 }, li { list-style:none } 등)에
 * 덮이지 않도록 태그별 기본값을 다시 지정한다.
 * 미리보기와 노출 화면이 밋밋하게 보이던 원인이 이 리셋이다.
 *
 * 위치 : /resources/css/editorContent.css
 * ============================================================ */

.editor-content {
	font-family: "맑은 고딕", "Malgun Gothic", "돋움", Dotum, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
	word-break: break-all;
}

/* 제목 */
.editor-content h1 { font-size: 26px; font-weight: 700; line-height: 1.4; margin: 0 0 14px; }
.editor-content h2 { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 0 0 13px; }
.editor-content h3 { font-size: 19px; font-weight: 700; line-height: 1.45; margin: 0 0 12px; }
.editor-content h4 { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; }
.editor-content h5,
.editor-content h6 { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }

/* 문단 */
.editor-content p { margin: 0 0 12px; }
.editor-content br { line-height: inherit; }

/* 목록 : list-style 을 되살리는 게 핵심 */
.editor-content ul { list-style: disc outside; padding-left: 22px; margin: 0 0 12px; }
.editor-content ol { list-style: decimal outside; padding-left: 26px; margin: 0 0 12px; }
.editor-content ul ul { list-style: circle outside; margin: 4px 0 0; }
.editor-content ol ol { list-style: lower-alpha outside; margin: 4px 0 0; }
.editor-content li { list-style: inherit; margin: 0 0 4px; }

/* 강조 */
.editor-content strong,
.editor-content b { font-weight: 700; }
.editor-content em,
.editor-content i { font-style: italic; }
.editor-content u { text-decoration: underline; }
.editor-content s,
.editor-content strike { text-decoration: line-through; }
.editor-content sub { vertical-align: sub; font-size: smaller; }
.editor-content sup { vertical-align: super; font-size: smaller; }

/* 링크 */
.editor-content a { color: #1f4bd8; text-decoration: underline; }
.editor-content a:hover { text-decoration: none; }

/* 인용 / 구분선 */
.editor-content blockquote {
	margin: 0 0 12px;
	padding: 8px 14px;
	border-left: 3px solid #ddd;
	color: #666;
}
.editor-content hr { border: 0; border-top: 1px solid #e0e0e0; margin: 16px 0; }

/* 표 : CKEditor 가 넣는 border 속성이 리셋에 지워지는 경우가 많다 */
.editor-content table { border-collapse: collapse; max-width: 100%; margin: 0 0 12px; }
.editor-content table td,
.editor-content table th { border: 1px solid #ddd; padding: 6px 8px; }
.editor-content table th { background: #f6f7f9; font-weight: 700; }
.editor-content table caption { padding: 4px 0; font-size: 13px; color: #777; }

/* 미디어 : 원본 크기가 팝업 폭을 넘지 않도록 */
.editor-content img,
.editor-content video,
.editor-content iframe { max-width: 100%; height: auto; }
.editor-content figure { margin: 0 0 12px; }
.editor-content figcaption { font-size: 13px; color: #777; text-align: center; padding-top: 6px; }

/* 마지막 요소의 아래 여백은 없앤다 (박스 하단이 뜨는 것 방지) */
.editor-content > :last-child { margin-bottom: 0; }