/* 에디터(Quill) 저장본 보기화면 스타일 — 버킷 무관 공용본 */ /* rich-content:start */ /* (메일 클라이언트는 <style> 블록을 제거하므로 인라인이 아니면 서식이 죽는다) */ .rich-content { box-sizing: border-box; line-height: 1.42; text-align: left; white-space: normal; word-wrap: break-word; tab-size: 4; -moz-tab-size: 4; /* 본문 14px = 에디터 .ql-container 기준값 */ font-size: 14px; font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; } /* 블록 여백/카운터 초기화 (snow .ql-editor 와 동일) */ .rich-content p, .rich-content ol, .rich-content ul, .rich-content pre, .rich-content blockquote, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } /* 위 블록들과 달리 margin:0 대상이 아니다(선에 글자가 달라붙으면 안 됨) */ .rich-content hr { margin: 1.25rem 0; } .rich-content p, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6, .rich-content li, .rich-content blockquote { white-space: pre-wrap; } /* 본문 줄간격 = 에디터(.ql-editor 1.42 단위없는 배수)와 동일 */ .rich-content p, .rich-content li, .rich-content blockquote { line-height: 1.8; } /* 헤딩 글자크기 = 에디터 initialize.css 와 동일(px 못박음) ── */ .rich-content h1 { font-size: 32px; } .rich-content h2 { font-size: 27px; } .rich-content h3 { font-size: 21px; } .rich-content h4 { font-size: 17px; } .rich-content h5 { font-size: 16px; } .rich-content h6 { font-size: 14px; } .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { font-weight: 500; line-height: 1.2; margin: 0.5em 0; } /* 내용 글자크기(size 피커) = 에디터 initialize.css 와 동일 ── */ .rich-content .ql-size-small { font-size: 12px; } .rich-content .ql-size-large { font-size: 18px; } .rich-content .ql-size-huge { font-size: 24px; } /* 리스트(ordered/bullet) + 중첩 카운터 (snow 원본 그대로) ── */ .rich-content ol, .rich-content ul { padding-left: 1.5em; list-style-type: none; } .rich-content ol > li, .rich-content ul > li { list-style-type: none; } .rich-content ul > li::before { content: '\2022'; } .rich-content li::before { display: inline-block; white-space: nowrap; width: 1.2em; } .rich-content li:not(.ql-direction-rtl)::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; } .rich-content ol li:not(.ql-direction-rtl), .rich-content ul li:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .rich-content ol li:before { content: counter(list-0, decimal) '. '; } .rich-content ol li.ql-indent-1 { counter-increment: list-1; } .rich-content ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .rich-content ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-2 { counter-increment: list-2; } .rich-content ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .rich-content ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-3 { counter-increment: list-3; } .rich-content ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .rich-content ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-4 { counter-increment: list-4; } .rich-content ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .rich-content ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-5 { counter-increment: list-5; } .rich-content ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .rich-content ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-6 { counter-increment: list-6; } .rich-content ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .rich-content ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .rich-content ol li.ql-indent-7 { counter-increment: list-7; } .rich-content ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .rich-content ol li.ql-indent-7 { counter-reset: list-8 list-9; } .rich-content ol li.ql-indent-8 { counter-increment: list-8; } .rich-content ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .rich-content ol li.ql-indent-8 { counter-reset: list-9; } .rich-content ol li.ql-indent-9 { counter-increment: list-9; } .rich-content ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } /* 인덴트로만 표현하는데, 순서 카운터가 그룹을 넘어 이어져 부정확(예: 1,a,b,2,c) */ .rich-content ol li.ql-indent-1:before, .rich-content ol li.ql-indent-2:before, .rich-content ol li.ql-indent-3:before, .rich-content ol li.ql-indent-4:before, .rich-content ol li.ql-indent-5:before, .rich-content ol li.ql-indent-6:before, .rich-content ol li.ql-indent-7:before, .rich-content ol li.ql-indent-8:before, .rich-content ol li.ql-indent-9:before { content: '\2022'; } .rich-content .ql-indent-1:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content .ql-indent-2:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content .ql-indent-3:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content .ql-indent-4:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content .ql-indent-5:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content .ql-indent-6:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content .ql-indent-7:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content .ql-indent-8:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content .ql-indent-9:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 15em; } /* 정렬 ── */ .rich-content .ql-align-center { text-align: center; } .rich-content .ql-align-justify { text-align: justify; } .rich-content .ql-align-right { text-align: right; } .rich-content .ql-direction-rtl { direction: rtl; text-align: inherit; } /* 글자색/배경색 (팔레트) ── */ .rich-content .ql-color-white { color: #fff; } .rich-content .ql-color-red { color: #e60000; } .rich-content .ql-color-orange { color: #f90; } .rich-content .ql-color-yellow { color: #ff0; } .rich-content .ql-color-green { color: #008a00; } .rich-content .ql-color-blue { color: #06c; } .rich-content .ql-color-purple { color: #93f; } .rich-content .ql-bg-black { background-color: #000; } .rich-content .ql-bg-red { background-color: #e60000; } .rich-content .ql-bg-orange { background-color: #f90; } .rich-content .ql-bg-yellow { background-color: #ff0; } .rich-content .ql-bg-green { background-color: #008a00; } .rich-content .ql-bg-blue { background-color: #06c; } .rich-content .ql-bg-purple { background-color: #93f; } /* 서체(font 피커) ── */ .rich-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; } .rich-content .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; } /* 링크/인용/코드/이미지/비디오 ── */ .rich-content a { text-decoration: underline; color: #06c; } .rich-content blockquote { border-left: 4px solid #ccc; margin-top: 5px; margin-bottom: 5px; padding-left: 16px; } .rich-content code, .rich-content pre { background-color: #f0f0f0; border-radius: 3px; } .rich-content pre { white-space: pre-wrap; margin-top: 5px; margin-bottom: 5px; padding: 5px 10px; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px; } .rich-content code { font-size: 85%; padding: 2px 4px; } .rich-content pre.ql-syntax { background-color: #23241f; color: #f8f8f2; overflow: visible; } .rich-content img { max-width: 100%; } .rich-content video, .rich-content iframe { max-width: 100%; height: auto; } .rich-content .ql-video { display: block; max-width: 100%; } .rich-content .ql-video.ql-align-center { margin: 0 auto; } .rich-content .ql-video.ql-align-right { margin: 0 0 0 auto; } .rich-content table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0.5em 0; } .rich-content td, .rich-content th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; } .rich-content th { background: #f6f7f9; font-weight: 600; text-align: center; } /* Quill 2.0 목록 2.0 은 기호/순서를 태그(ul/ol)가 아니라 li 의 data-list 로… */ .rich-content li[data-list] { list-style-type: none; } .rich-content ol li[data-list="bullet"][data-list] { counter-increment: none; } .rich-content ol li[data-list="bullet"][data-list]::before { content: '\2022'; } /* 에디터가 마커를 그리려고 넣는 빈 span — 보기 화면에서는 li::before 가 그린다 */ .rich-content .ql-ui { display: none; } /* rich-content:end */