/*
 * CKEditor 5 (v34.2.0) content styles.
 * Generated on Wed, 20 Jul 2022 14:17:10 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

/*@import url('/_lib/css/pretendard/pretendard.css');*/

:root {
    --ck-color-base-active: hsl(208, 88%, 52%);
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-table-caption-background: hsl(0, 0%, 97%);
    --ck-color-table-caption-text: hsl(0, 0%, 20%);
    --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
    --ck-table-column-resizer-width: 7px;
    --ck-todo-list-checkmark-size: 16px;
    --ck-z-default: 1;
}


/* :root,
html{font-size: 10px; color: red;} */
/* .ck-content{color: #666; font-size: 1rem !important; } */
/* .ck-content>*{padding: revert; list-style: revert; line-height:1.4; color: revert; text-decoration: revert;} */

.ck-content table,
.ck-content th,
.ck-content td{margin:revert; padding:revert; font-size:1.6rem; line-height:1.4;}


/*
.ck-content input,
.ck-content select,
.ck-content textarea,
.ck-content strong,
.ck-content em,
.ck-content p,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content span,
.ck-content td,
.ck-content button,
.ck-content th,
.ck-content li,
.ck-content a,
.ck-content i,
.ck-content b{font-style: revert; margin: revert; font-family: 'Pretendard', sans-serif;}
.ck-content ul,
.ck-content ol{margin: revert; padding: revert; list-style: revert;}
.ck-content a{text-decoration: revert; color:revert} */


.ck-content ul,
.ck-content li,
.ck-content ol{margin: revert; padding: revert; list-style: revert; font-size:1.6rem;}

.ck-content p{margin:0; font-size: 16px; line-height: 1.4;;}


.ck-content h2{font-size:2.5em; line-height:1.4;}
.ck-content h3{font-size:2em; line-height:1.4;}
.ck-content h4{font-size:1.5em; line-height:1.4;}
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4{margin-bottom:0;}

/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: .15em;
    border-radius: 2px;
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
    border-left: 0;
    border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
    font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
    font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
    font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
    font-size: 1.8em;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
    background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
    background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
    background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
    color: var(--ck-highlight-pen-red);
    background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
    color: var(--ck-highlight-pen-green);
    background-color: transparent;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline {
    /*
     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
     * This strange behavior does not happen with inline-flex.
     */
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
    display: flex;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: var(--ck-color-image-caption-text);
    background-color: var(--ck-color-image-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
.ck-content .image > figcaption .text-huge {
    font-size: 2.4em;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
    width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
    display: block;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
    max-width: calc(100% - var(--ck-image-style-spacing));
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
    clear: none;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
    margin-top: 0;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
    margin-top: var(--ck-inline-image-style-spacing);
    margin-bottom: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
    margin-right: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
    margin-left: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
    list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
    margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
    margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid hsl(0, 0%, 20%);
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: '';
    left: calc( var(--ck-todo-list-checkmark-size) / 3 );
    top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
    transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
    background: hsl(126, 64%, 41%);
    border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
    border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
    vertical-align: middle;
}
/* ckeditor5-language/theme/language.css */
.ck-content span[lang] {
    font-style: italic;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
    clear: both;
    margin: 0.9em 0;
    display: block;
    min-width: 15em;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
    content: '';
    position: absolute;
    border-bottom: 2px dashed hsl(0, 0%, 77%);
    width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 0.75em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    background: hsl(0, 0%, 100%);
    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
    overflow: hidden;
    table-layout: fixed;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
    position: relative;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .table-column-resizer {
    position: absolute;
    top: -999999px;
    bottom: -999999px;
    right: var(--ck-table-column-resizer-position-offset);
    width: var(--ck-table-column-resizer-width);
    cursor: col-resize;
    user-select: none;
    z-index: var(--ck-z-default);
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table[draggable] .table-column-resizer {
    display: none;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .table-column-resizer:hover,
.ck-content .table .table-column-resizer__active {
    background-color: var(--ck-color-table-column-resizer-hover);
    opacity: 0.25;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content[dir=rtl] .table .table-column-resizer {
    left: var(--ck-table-column-resizer-position-offset);
    right: unset;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content.ck-read-only .table .table-column-resizer {
    display: none;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
    margin: 0.9em auto;
    display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100% !important;
    height: 100%;
    border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
    font-weight: bold;
    background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
    text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
    text-align: left;
}
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: var(--ck-color-table-caption-text);
    background-color: var(--ck-color-table-caption-background);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
    padding: 1em;
    color: hsl(0, 0%, 20.8%);
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: hsl(0, 0%, 87%);
    border: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text);
}
@media print {
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break {
        padding: 0;
    }
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break::after {
        display: none;
    }
}

.loading img { position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -25px; width: 50px; height: 50px; }
.disNone {display:none !important;}


@media only screen and (max-width : 840px){
	figure.image img{width:100% !important; max-width:100% !important;}
}


/* ============================================================================
 *  비교담 본문 공통 스타일  ―  글쓰기 화면과 게시글 보기 화면을 똑같이 만든다.
 *
 *  선택자를 .ck-content 로 쓰는 이유
 *    편집영역(.ck.ck-content)과 게시글 본문(<div class="ck-content">)이 둘 다 걸린다.
 *    한 군데서만 정의해야 "쓸 때랑 볼 때가 다른" 일이 안 생긴다.
 *    (예전에는 편집화면은 content.css, 보기화면은 이 파일 위쪽에 따로 있어서
 *     제목이 편집 26px/굵게 → 보기 40px/안굵게 로 달라졌다)
 *
 *  선택자 앞에 html 을 붙인 이유
 *    글쓰기 화면에서는 ckeditor.js 가 자기 기본 본문 스타일(.ck-content hr 등)을
 *    실행 시점에 <style> 로 head 맨 뒤에 꽂는다. 그래서 이 파일이 아무리 뒤에 있어도
 *    우선순위가 같으면 CKEditor 쪽이 이겨, 편집화면만 다르게 보였다.
 *    html 하나만 앞에 붙여도 우선순위가 한 단계 높아져 양쪽이 항상 같아진다.
 *
 *  이 블록은 파일 맨 끝에 둔다.
 *
 *  또 하나 - layout.css 에 강한 전역 리셋이 걸려 있어 본문 안에서는 되돌려야 한다.
 *    ol,ul{list-style:none}   em{font-style:normal}   a{text-decoration:none}
 *    h1~h6{font-size:100%; font-weight:normal}
 *    hr,legend,caption{visibility:hidden; position:absolute; width:0; height:0}
 * ========================================================================== */

html .ck-content{color:#333; font-size:16px; line-height:1.7; word-break:break-word;}

html .ck-content p{margin:0 0 6px; font-size:16px; line-height:1.7;}

html .ck-content h2,
html .ck-content h3,
html .ck-content h4{font-weight:700; color:#1f2328; line-height:1.4; margin:22px 0 8px;}
html .ck-content h2{font-size:26px;}
html .ck-content h3{font-size:21px;}
html .ck-content h4{font-size:18px;}
html .ck-content>:first-child{margin-top:0;}

html .ck-content strong,
html .ck-content b{font-weight:700;}
html .ck-content em,
html .ck-content i{font-style:italic;}
html .ck-content u{text-decoration:underline;}
html .ck-content s,
html .ck-content del{text-decoration:line-through;}

html .ck-content a{color:#1971c2; text-decoration:underline;}

/* 목록 : 전역 리셋으로 사라진 글머리표·들여쓰기를 되살린다.
   크기는 rem 이 아닌 px 로 잡는다. 사이트가 모바일에서 루트를 6.5px 로 내리기 때문에
   1.6rem 으로 두면 모바일 게시글의 목록 글자만 10px 로 쪼그라든다. */
html .ck-content ul,
html .ck-content ol,
html .ck-content li{margin:revert; padding:revert; list-style:revert; font-size:16px; line-height:1.7;}

html .ck-content blockquote{margin:14px 0; padding:4px 0 4px 16px; border-left:3px solid #ff6600; color:#555; font-style:normal;}

html .ck-content hr{visibility:visible; overflow:visible; position:static; width:100%; height:1px; margin:24px 0; padding:0; border:0; background:#e3e7ec; text-indent:0;}

html .ck-content pre,
html .ck-content code{font-family:Consolas, Monaco, "D2Coding", monospace;}
html .ck-content pre{padding:14px 16px; font-size:14px; line-height:1.6;}

/* 사진 기본 크기 : 크기를 직접 조절하지 않은 사진(=image_resized 없음)만 480px 로 묶는다.
   figure 가 display:table 이라 원래 작은 사진은 늘어나지 않고 제 크기로 나온다. */
/* 위아래 여백만 손댄다. margin 을 한꺼번에 쓰면 좌우가 0 으로 덮여서
   가운데/오른쪽 정렬(margin-left:auto)이 먹지 않는다. */
html .ck-content figure.image{margin-top:14px; margin-bottom:14px;}
html .ck-content figure.image>figcaption{font-size:14px; color:#868e96;}
html .ck-content .image:not(.image_resized){max-width:480px;}
html .ck-content .image img{height:auto;}

html .ck-content table,
html .ck-content th,
html .ck-content td{margin:revert; padding:revert; font-size:15px; line-height:1.5;}

@media only screen and (max-width:767px){
	html .ck-content,
	html .ck-content p,
	html .ck-content li{font-size:15px;}
	html .ck-content h2{font-size:22px;}
	html .ck-content h3{font-size:19px;}
	html .ck-content h4{font-size:17px;}
}