@charset "UTF-8";
/*
 * 에디터(TinyMCE 6) 본문을 입력한 그대로 보여 주는 공용 스타일 — .editor-content 안에서만 적용된다.
 * 1) 사이트 CSS(site/main.css 맨 앞 리셋)가 제목·목록·문단 서식을 지우므로 글자 요소는 브라우저 기본 서식으로 되돌린다.
 *    class가 붙은 요소와 그 안의 요소는 되돌리지 않는다 — 콘텐츠 본문에 퍼블리싱 컴포넌트(.mod-intro, .mod-data-table 등)를 그대로 넣어 사이트 CSS로 그리기 때문이다.
 *    이미지·표는 HTML 속성(width·border 등)으로 크기를 받는데 되돌리면 그 속성까지 무시되므로 제외한다.
 * 2) 그 위에 TinyMCE 편집 화면의 본문 CSS(libs/tinymce/skins/content/default/content.min.css)를 본문 범위로 한정해 적용한다.
 * 글꼴·글자색·줄간격은 감싸는 영역(게시글 본문, 팝업 등)의 값을 물려받고, 본문에 직접 넣은 인라인 스타일이 항상 우선한다.
 */
/* 되돌리기는 에디터로 쓴 글자에만 — class가 붙은 퍼블리싱 컴포넌트 안의 요소(표 안 강조 strong, 아이콘 svg의 path 등)는 사이트 CSS 그대로 둔다.
   all: revert는 CSS로 정하는 SVG 도형 속성(path의 d)까지 지워 아이콘이 사라지고, 이 선택자가 컴포넌트 규칙보다 우선순위가 높아 컴포넌트 서식을 덮는다 */
.editor-content :not(img, table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td, br, [class], .editor-content [class] *) { all: revert; }
.editor-content > :last-child { margin-bottom: 0; }
.editor-content img:not([class], .editor-content [class] *) { display: inline; vertical-align: baseline; max-width: 100%; height: auto; }
/* 이미지·표·그림 기본 서식은 에디터로 만든(class 없고 퍼블리싱 컴포넌트 밖의) 요소에만 — 퍼블리싱 표(.mod-data-table)·그림(.el-figure)·카드 아이콘 등은 사이트 CSS가 그린다 */
.editor-content table:not([class], .editor-content [class] *) { border-collapse: collapse; }
.editor-content table:not([class], .editor-content [class] *) td,
.editor-content table:not([class], .editor-content [class] *) th { border: 1px solid #ccc; padding: .4rem; }
.editor-content figure:not([class], .editor-content [class] *) { display: table; margin: 1rem auto; }
.editor-content figure:not([class], .editor-content [class] *) figcaption { color: #999; display: block; margin-top: .25rem; text-align: center; }
.editor-content hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; }
.editor-content code { background-color: #e8e8e8; border-radius: 3px; padding: .1rem .2rem; }
.editor-content blockquote { border-left: 2px solid #ccc; margin-left: 1.5rem; padding-left: 1rem; }