.html.editor {display:none;}
/* 편집창 높이 기본 500px */
.ql-container { height: var(--zen-editor-height, 500px); }
.ql-editor { height: 100%; }
.is-fullscreen.ql-container, .is-fullscreen .ql-editor { height: 100%; }
/* 편집창 하단 리사이저(길고 얇은 손잡이) 드래그로 높이 조절, 더블클릭으로 기본 높이 복원 */
.zen-editor-resizer {
height: 11px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e6e7e9;
border-top: 0;
border-radius: 0 0 3px 3px;
background: #fafbfc;
cursor: ns-resize;
touch-action: none;
user-select: none;
-webkit-user-select: none;
transition: background-color .12s linear;
}
.zen-editor-resizer::before {
content: '';
display: block;
width: 44px;
height: 3px;
border-top: 1px solid #c4c8cd;
border-bottom: 1px solid #c4c8cd;
}
.zen-editor-resizer:hover { background: #f1f3f5; }
.zen-editor-resizer.is-dragging { background: #e9edf1; }
.zen-editor-resizer.is-dragging::before { border-color: #8b9299; }
/* 손잡이가 붙은 컨테이너는 아래쪽 라운드를 없앤다 — 손잡이가 그 자리를 이어받는다 */
.ql-container.has-zen-resizer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 드래그 중에는 문서 전체에서 선택·커서 변화를 막는다(포인터가 에디터 위를 지나도 흔들리지 않게) */
body.zen-editor-resizing, body.zen-editor-resizing * { cursor: ns-resize !important; user-select: none !important; }
/* 에디터 크롬 테두리 = #e6e7e9 툴바(하단 포함)와 에디터를 감싸는 컨테이너 border 를 통일 */
.ql-toolbar.ql-snow { border-color: #e6e7e9; }
.ql-container.ql-snow { border-color: #e6e7e9; }
/* 표(table) 렌더 = 보기화면(.rich-content)과 1:1 table-better 는 셀에 인라인… */
.ql-snow .ql-editor table { border-collapse: collapse; table-layout: fixed; max-width: 100%; margin: 0.5em 0; }
.ql-snow .ql-editor td, .ql-snow .ql-editor th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; }
.ql-snow .ql-editor th { background: #f6f7f9; font-weight: 600; text-align: center; }
/* 에디터 타이포그래피 = 사이트(테마 initialize + Fomantic) 실제 렌더에 일치 */
.ql-container { font-size: 14px; }
.ql-editor { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; }
.ql-snow .ql-editor h1 { font-size: 32px; }
.ql-snow .ql-editor h2 { font-size: 27px; }
.ql-snow .ql-editor h3 { font-size: 21px; }
.ql-snow .ql-editor h4 { font-size: 17px; }
.ql-snow .ql-editor h5 { font-size: 16px; }
.ql-snow .ql-editor h6 { font-size: 14px; }
.ql-snow .ql-editor h1, .ql-snow .ql-editor h2, .ql-snow .ql-editor h3,
.ql-snow .ql-editor h4, .ql-snow .ql-editor h5, .ql-snow .ql-editor h6 {
font-weight: 500;
line-height: 1.2;
margin: 0.5em 0;
}
/* 본문 줄간격 넉넉하게(1.8) = 보기화면(.rich-content)과 1:1 */
.ql-snow .ql-editor p, .ql-snow .ql-editor li, .ql-snow .ql-editor blockquote {
line-height: 1.8;
}
/* 인덴트로만 표현하는데, 그 결과 순서 카운터가 그룹을 넘어 이어져 부정확해진다(예: 1,a,b,2,c → c… */
.ql-snow .ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before,
.ql-snow .ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before { content: '\2022'; }
.ql-editor .ql-size-small { font-size: 12px; }
.ql-editor .ql-size-large { font-size: 18px; }
.ql-editor .ql-size-huge { font-size: 24px; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { font-size: 1.7em; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { font-size: 1.45em; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { font-size: 1.28em; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { font-size: 1.14em; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { font-size: 1.06em; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { font-size: 1em; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { font-size: 0.85em; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { font-size: 1.3em; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { font-size: 1.7em; }
/* 툴바 드롭다운 라벨(내용 글자크기 / 헤딩 글자크기)은 다국어(__())로 처리한다 CSS content… */
.ql-snow .ql-picker.ql-size, .ql-snow .ql-picker.ql-header { width: 110px; }
/* snow.css 뒤에 로드되어 오버라이드(.ql-snow 프리픽스로 우선순위 확보) */
.ql-snow .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 1.5em; }
.ql-snow .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.ql-snow .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 3em; }
.ql-snow .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 4.5em; }
.ql-snow .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 4.5em; }
.ql-snow .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 6em; }
.ql-snow .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 6em; }
.ql-snow .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 7.5em; }
.ql-snow .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 7.5em; }
.ql-snow .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 9em; }
.ql-snow .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 9em; }
.ql-snow .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 10.5em; }
.ql-snow .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 10.5em; }
.ql-snow .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 12em; }
.ql-snow .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 12em; }
.ql-snow .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 13.5em; }
.ql-snow .ql-editor .ql-indent-9:not(.ql-direction-rtl) { padding-left: 13.5em; }
.ql-snow .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 15em; }
/* 링크: 패널(Fomantic/Tabler) 기본 a색이 패널마다 달라 #06c 로 못박아 작성=보기 일치 */
.ql-snow .ql-editor a { color: #06c; }
.ql-snow .ql-editor pre.ql-syntax,
.ql-snow .ql-editor pre { font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px; }
textarea.code {
width: 100%;
height: 500px;
box-sizing: border-box;
line-height: 1.42;
outline: none;
overflow-y: auto;
padding: 12px 15px;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
border: 1px solid #ccc;
background: #f9f9f9;
}
*[quill_custom_html] {
display: none;
width: 100%;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
margin: 0;
background: rgb(29, 29, 29) !important;
box-sizing: border-box;
color: rgb(204, 204, 204) !important;
outline: none;
padding: 12px 15px;
line-height: 24px;
font-size: 14px !important;
font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
position: absolute;
top: 0;
bottom: 0;
border: none !important;
}
*[quill_custom_html *= 'active']{
display: initial;
}