@charset "utf-8";

/* ==========================================================================
 * CKEditor 5 커스터마이징 — CKEditor 4 config.js 설정 이식
 *
 * v4 대응표
 *   config.height = 450                → .ck-editor__editable 최소 높이
 *   CKEDITOR.addCss('.cke_editable{margin:10px}') → .ck-content 안쪽 여백
 *   config.resize_enabled = false      → v5 는 기본적으로 리사이즈 그립이 없음
 *   config.contentsCss = [포탈 CSS]    → v5 는 iframe 이 아니라 페이지 안에서 편집하므로
 *                                        포탈 CSS 를 그대로 넣으면 관리자 화면이 깨진다.
 *                                        본문 미리보기가 필요하면 .ck-content 로 한정해
 *                                        따로 옮겨야 한다. (파일럿에서는 적용하지 않음)
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 편집 영역 높이 고정 — v4 의 config.height = 450 과 동일하게 맞춘다.
 *
 * v4 의 config.height 는 "고정 높이 + 내부 스크롤" 이었다.
 * v5 는 기본이 내용에 따라 늘어나는 방식이므로 height 로 못 박고
 * overflow-y:auto 를 줘야 v4 와 같은 동작이 된다.
 * (min-height 로 두면 긴 글에서 에디터가 계속 길어져 저장 버튼이 밀려난다)
 *
 * 높이를 바꾸려면 아래 --cms-ck-height 값만 수정하면 된다.
 * ------------------------------------------------------------------------ */
:root {
	--cms-ck-height: 450px;
}

.ck.ck-editor__editable_inline {
	height: var(--cms-ck-height);
	max-height: var(--cms-ck-height);
	overflow-y: auto;
	box-sizing: border-box;
	resize: none;
}

/* 툴바는 스크롤과 무관하게 항상 위에 고정 */
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
	position: relative;
}

/* 관리자 화면(html{font-size:20px})에서 에디터 UI 가 과대하게 잡히는 것을 막는다.
   CKEditor 5 는 rem 기반이라 그대로 두면 툴바가 2배로 커진다. */
.ck.ck-editor {
	font-size: 16px;
}
.ck.ck-editor .ck-content {
	font-size: 16px;
	line-height: 1.6;
}

/* v4 의 .cke_editable {margin:10px} 대응 */
.ck.ck-editor__editable_inline > :first-child {
	margin-top: 10px;
}
.ck.ck-editor__editable_inline {
	padding: 0 10px 10px 10px;
}

/* 소스 편집 모드도 같은 높이로 고정 (모드 전환 시 화면이 튀지 않도록)
 *
 * [주의] 소스편집 영역에는 'ck' 클래스가 붙지 않는다. 실제 DOM 은
 *        <div class="ck-source-editing-area"> 하나뿐이라
 *        .ck.ck-source-editing-area 로 쓰면 아무것도 매칭되지 않는다.
 *
 * CKEditor 는 ::after 에 content:attr(data-value) 를 넣어 내용만큼 영역을 늘린다.
 * 그래서 높이를 못 박고, 넘치는 유령 텍스트는 overflow:hidden 으로 숨긴 뒤
 * textarea 자체에 스크롤을 준다. (textarea 는 position:absolute; height:100%) */
.ck-source-editing-area {
	height: var(--cms-ck-height);
	max-height: var(--cms-ck-height);
	overflow: hidden;
	box-sizing: border-box;
}
.ck-source-editing-area textarea {
	height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	resize: none;
}

/* 관리자 테이블(.tblWrite td) 안에 들어가므로 폭이 잘리지 않도록 */
.tblWrite td .ck.ck-editor {
	width: 100%;
	max-width: 100%;
}

/* 팝업 레이어(.pop_wrap, z-index:100) 위에서도 툴바 드롭다운이 가려지지 않게.
   [주의] body 래퍼에는 'ck' 클래스가 없다. 실제 DOM 은 class="ck-body-wrapper" 라서
          .ck.ck-body-wrapper 로 쓰면 매칭되지 않는다. (소스편집 영역도 마찬가지) */
.ck.ck-balloon-panel,
.ck-body-wrapper {
	z-index: 10000;
}