/**
 * CKEDITOR에서 Editor 내의 CSS 처리
 * 출력 문서에도 적용 처리.
 */
 html:has( > body.cke_editable) {
	scrollbar-width: thin;
	scrollbar-color: #ccc #eaeaea;
	font-size: 17px;
	line-height: 1.7;
	padding-inline: 1.5em;
	@media screen and (aspect-ratio > 1) {
		font-size: 14px;
	}
 }
/* html 코드 자동 줄바꿈 처리*/
/* code[class="language-html hljs "] {
	white-space: normal;
} */
code.piececode {
	display: inline-block;
    background-color: hwb(0 100% 5%);
    border-radius: 5px;
    border: 1px solid #FFF;
    padding: 0 3px;
    line-height: 1.4;
}


.editorItemSubject {
	font-size: 15px !important; display: table; background-color: #666; color: #000; padding: 1px 5px; border-radius: 5px;
}

.editorBlockquote {
	font-weight: bold; font-size: 1.4em; padding-left: 20px; margin-top: 40px; margin-bottom: 40px; font-style: italic;
}
.editorBlockquote::before {
	content: "\201c"; font-size: 2em; color: #00C9FF; display: inline-block;
}
.editorBlockquote::after {
	content: "\201d"; font-size: 2em; color: #00C9FF; display: inline-block;
}
.editorDataType {
	color: #428e04; font-style: italic;
}
.editorDataType::before {
	content: "\003C";
}
.editorDataType::after {
	content: "\003E";
}

.editorNote {
	background: hwb(43.26deg 94.14% 0%); padding: 10px 10px 10px 50px; position: relative; margin: 30px 0;
}
.editorNote::before {
	content: "\2712"; color: #F6B73C; display: inline-block; transform: rotate(45deg);
	position: absolute; left: 5px; top: -5px; font-size: 40px;
}

.editorWarning {
	background: #FFE7E7; padding: 10px 10px 10px 50px; position: relative; margin: 30px 0;
}
.editorWarning::before {
	content: "\2757"; color: #e66465; display: inline-block;
	position: absolute; left: 5px; top: -5px; font-size: 40px;
}

.compact-table {
	border-collapse: collapse;
}
.compact-table th, .compact-table td {
	border: 1px solid #CCC; padding: 5px 10px;
}
.compact-table > thead {
	background-color: #939393; border: 1px solid #939393; color: #FFF; text-align: center;
	border-right-color: #FFF;
}
.compact-table > thead > tr > th,
.compact-table > thead > tr > td {
	border-right-color: #FFF;
	font-weight: lighter;
}
.compact-table > thead > tr > th:last-child,
.compact-table > thead > tr > td:last-child {
	border-right-color: #939393;
}
.compact-table > tbody > tr > td:first-child {
	white-space: nowrap;
}


/******************
 * New Version
 */
.editorTitle1,
.cke-h1 {
	font-size: 1.7rem !important; 
	font-weight: bold; 
	margin-block-end: 20px;
	&:not(:first-of-type) {
		margin-block-start: 60px;
	}
	body.mobile & {
		font-size: 1.5rem !important;
	}
}
/* .cke-h1::before {
	content: "\258D"; display: inline-block; color: #999;
} */
.editorTitle2,
.cke-h2 {
	font-size: 1.6rem !important; 
	font-weight: bold; 
	margin-block: 50px 20px;
	body.mobile & {
		font-size: 1.5rem !important;
	}	
}
/* .cke-h2::before {
	content: "\2759"; display: inline-block; color: #999; margin-right: 10px;
} */
.editorTitle3,
.cke-h3 {
	font-size: 1.5rem !important; 
	font-weight: bold; 
	margin-block: 50px 10px !important;
	body.mobile & {
		font-size: 1.4rem !important;
	}		
	/* &::before {
		content: "\0025FE"; display: inline-block;
	} */
}
.editorTitle4,
.cke-h4 {
	font-size: 1.4rem !important; 
	font-weight: bold; 
	margin-block: 50px 10px;
	body.mobile & {
		font-size: 1.3rem !important;
	}		
	/* &::before {
		content: "\00258E"; display: inline-block;
	} */
}
.editorTitle5,
.cke-h5 {
	font-size: 1.2rem !important; 
	font-weight: bold;
	margin-block: 20px 0;
	body.mobile & {
		font-size: 1.1rem !important;
	}		
	/* &::before,
	&::after {
		display: inline-block;
	}
	&::before {
		content: "\003010"; 
	}
	&::after {
		content: "\003011";
	} */
}
.editorTitle6,
.cke-h6 {
	font-size: 1rem !important;
	font-weight: bold;
	margin-block: 10px 0;
	&:first-of-type {
		margin-top: 0;
	}
}
.cke-h1:first-child,
.cke-h2:first-child,
.cke-h3:first-child,
.cke-h4:first-child,
.cke-h5:first-child,
.cke-h6:first-child {
	margin-top: 0 !important;
}


.cke-datatype {
	color: #428e04; font-style: italic;
}
.cke-datatype::before {
	content: "\003C";
}
.cke-datatype::after {
	content: "\003E";
}


.cke-note {
	--svg_icon_note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30px' viewBox='0 -960 960 960' width='30px' fill='%23F6B73C'%3E%3Cpath d='M200-200h360v-200h200v-360H200v560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v400L600-120H200Zm80-280v-80h200v80H280Zm0-160v-80h400v80H280Zm-80 360v-560 560Z'/%3E%3C/svg%3E");
	background: #FFF3D4; 
	margin: 30px 0;
	display: flex; align-items: center;
	column-gap: 7px;	
	padding: 2px 7px;
	&::before {
		content: var(--svg_icon_note);
		position: relative;
		inset-block-start: 4px;
		display: block;
		transform: rotate(-15deg);
	}	
	&:is(:last-child) {
		margin-block-end: 0 !important;
	}
}
/* .cke-note::before {
	content: "\2712"; color: #F6B73C; display: inline-block; transform: rotate(45deg);
	position: absolute; left: 5px; top: -5px; font-size: 40px;
} */
/* .cke-note:last-child {
	margin-block-end: 0 !important;
} */

.cke-warning {
	--svg_icon_warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30px' viewBox='0 -960 960 960' width='30px' fill='%23e66465'%3E%3Cpath d='m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z'/%3E%3C/svg%3E");
	background: #FFE7E7;
	margin: 30px 0;
	display: flex; align-items: center;
	column-gap: 7px;
	padding: 2px 7px;
	&::before {
		content: var(--svg_icon_warning);
		position: relative;
		inset-block-start: 4px;
	}
}
/* .cke-warning::before {
	content: "\2757"; color: #e66465; display: inline-block;
	position: absolute; left: 5px; top: -5px; font-size: 40px;
} */


.cke-blockquote {
	/* font-weight: bold; font-size: 1.4em; padding-left: 20px; margin-top: 40px; margin-bottom: 40px; font-style: italic; */
	display: block; background-color: initial;
	margin-inline-start: 0; padding-inline-start: 20px; border-inline-start: 7px solid hwb(0 100% 10%);
	padding-block: 0.5em; border-radius: initial;
}
.cke-blockquote::before {
	content: initial !important;
}
/* .cke-blockquote > *:is(h1, h2, h3, h4, h5, h6) {
	
} */
/* .cke-blockquote::before {
	content: "\201c"; font-size: 2em; color: #00C9FF; display: inline-block;
}
.cke-blockquote::after {
	content: "\201d"; font-size: 2em; color: #00C9FF; display: inline-block;
} */
.cke-blockquote > p {
	color: hwb(0 100% 80%);
}


.cke-table-compact {
	border-collapse: collapse;
}
.cke-table-compact th, .cke-table-compact td {
	border: 1px solid #CCC; padding: 5px 10px;
}
.cke-table-compact > thead {
	background-color: #939393; border: 1px solid #939393; color: #FFF; text-align: center;
	border-right-color: #FFF;
}
.cke-table-compact > thead > tr > th,
.cke-table-compact > thead > tr > td {
	border-right-color: #FFF;
	font-weight: lighter;
}
.cke-table-compact > thead > tr > th:last-child,
.cke-table-compact > thead > tr > td:last-child {
	border-right-color: #939393;
}
.cke-table-compact > tbody > tr > td:first-child {
	white-space: nowrap;
}

.cke-definition,
.cke-definition dl {
	display: flex; flex-direction: column; row-gap: 7px;
}
.cke-definition {
	margin-top: 20px;
	margin-bottom: 20px !important;
}
.cke-definition:not(:first-child) {
	margin-top: 0;
}
.cke-definition > dt {
	font-weight: bold; font-size: 1.1em; color: black !important;
}
.cke-definition > dt:not(:first-of-type) {
	margin-top: 15px;
}
.cke-definition > dt::before {
	content: "\0025AA";
	margin-right: 5px;
	position: relative;
	left: -6px;
}
.cke-definition > dd dl > dt {
	font-weight: bold;
}
.cke-definition dt:nth-of-type(odd) + dt,
.cke-definition dd + dt + dt {
	font-weight: normal !important;
}
.cke-definition > dd {
	margin-left: 0; margin-top: 7px;
}
.cke-definition > dd:has( > dl) {
	border-inline-start: 1px solid #dddddd; padding-inline-start: 20px;
}
.cke-definition > dd dl {
	border-inline-start: 1px solid #b6ebf5; padding-inline-start: 20px;
}


.cke-insidemarklist {
	list-style-type: square;
	list-style-position: inside;
	padding-inline-start: 7px;
}

.cke-txtcolor-emphasis {
	color: #d53f25; font-weight: bold;
}
.cke-txtcolor-important {
	color: #d53f25; font-weight: bold;
}
.cke-hotkeyword {
	font-weight: bold;
}

.cke-2multicolumns {
	column-count: 2; column-gap: 20px; column-fill: balance;
	column-rule: 1px solid #CCC;
}

.cke-example {
	position: relative;
	background-color: hwb(0 100% 2%);
	padding: 5px;
	padding-block-start: 2em !important;
	margin-block-start: 2.5em !important;
}
.cke-example::before {
	content: "Example";
	display: block;
	position: absolute;
	top: -1em;
	background-color: hwb(0 10% 90%);
	color: #FFF;
	padding: 3px 7px;
	font-style: italic;
}
.cke-example > dt ~ dt {
	margin-block-start: 1.5em;
}
.cke-example > dd {
	margin-inline-start: 0;
	padding: 3px;
}
.cke-example > dd > pre > code {
	background-color: #f2f2f2 !important;
}


.cke-optionalitem::after {
	content: "optional";
	margin-left: 7px;
	padding-inline: 7px;
	background-color: #f7f7f7;
	border: 1px solid #CCC;
	border-radius: 10px;
	font-size: 0.7em;
	color: #666;
	font-weight: normal;
}


.cke-content-before-revision {
	background-color: #f1f9ff;
	border: 1px solid #03a9f4;
	padding-inline: 15px;
	border-radius: 5px;
	& > summary {
		font-size: 1.4rem;
		font-weight: bold;
		body.mobile & {
			font-size: 1.2rem;
		}
	}
	&:open {
		padding-block-end: 20px;
	}
}