/**
 * @license Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
 * This file is licensed under the terms of the MIT License (see LICENSE.md).
 */
@charset "UTF-8";
:root {
	--ck-sample-base-spacing: 2em;
	--ck-sample-color-white: #fff;
	--ck-sample-color-green: #279863;
	--ck-sample-color-blue: #1a9aef;
	--ck-sample-container-width: 1285px;
	--ck-sample-sidebar-width: 350px;
	--ck-sample-editor-min-height: 400px;
	--ck-sample-editor-z-index: 10;
}

/* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */

.editor__editable,
/* Classic build. */
main .ck-editor[role='application'] .ck.ck-content,
/* Decoupled document build. */
.ck.editor__editable[role='textbox'],
.ck.ck-editor__editable[role='textbox'],
/* Inline & Balloon build. */
.ck.editor[role='textbox'] {
	width: 100%;
	background: #fff;
	font-size: 1em;
	line-height: 1.6em;
	min-height: var(--ck-sample-editor-min-height);
	padding: 1.5em 2em;
}

.ck.ck-editor__editable {
	background: #fff;
	/*border: 1px solid hsl(0, 0%, 70%);*/
	width: 100%;
}

/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
.ck.ck-editor__editable {
	position: relative;
	z-index: var(--ck-sample-editor-z-index);
}

.editor-container {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
	width: 100%;
	justify-content: center;
}

/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
	width: 100%;
}

body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
body[data-editor='DecoupledDocumentEditor'] .row-editor .editor {
	/* A pixel is added for each of the border. */
	width: calc(21cm + 2px);
	min-height: calc(29.7cm + 2px);
	/* To avoid having extra scrolls inside the editor container. */
	height: fit-content;
	padding: 2cm 1.2cm;
	margin: 2.5rem;
	border: 1px hsl( 0, 0%, 82.7% ) solid;
	background-color: var(--ck-sample-color-white);
	box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
	box-sizing: border-box;
}

body[data-editor='DecoupledDocumentEditor'] .row-editor {
	display: flex;
	position: relative;
	justify-content: center;
	overflow-y: auto;
	background-color: #f2f2f2;
	border: 1px solid hsl(0, 0%, 77%);
	/* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */
	max-height: 700px;
}

body[data-editor='DecoupledDocumentEditor'] .sidebar {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
.sidebar {
	padding: 0 15px;
	position: relative;
	min-width: var(--ck-sample-sidebar-width);
	max-width: var(--ck-sample-sidebar-width);
	font-size: 20px;
	border: 1px solid hsl(0, 0%, 77%);
	background: hsl(0, 0%, 98%);
	border-left: 0;
	overflow: hidden;
	min-height: 100%;
	flex-grow: 1;
}

/* Do not inherit styles related to the editable editor content. See line 25.*/
.sidebar .ck-content[role='textbox'],
.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
	min-height: unset;
	width: unset;
	padding: 0;
	background: transparent;
}

.sidebar.narrow {
	min-width: 60px;
	flex-grow: 0;
}

.sidebar.hidden {
	display: none !important;
}

#sidebar-display-toggle {
	position: absolute;
	z-index: 1;
	width: 30px;
	height: 30px;
	text-align: center;
	left: 15px;
	top: 30px;
	border: 0;
	padding: 0;
	color: hsl( 0, 0%, 50% );
	transition: 250ms ease color;
	background-color: transparent;
}

#sidebar-display-toggle:hover {
	color: hsl( 0, 0%, 30% );
	cursor: pointer;
}

#sidebar-display-toggle:focus,
#sidebar-display-toggle:active {
	outline: none;
	border: 1px solid #a9d29d;
}

#sidebar-display-toggle svg {
	fill: currentColor;
}

/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
.row-presence {
	width: 100%;
	border: 1px solid hsl(0, 0%, 77%);
	border-bottom: 0;
	background: hsl(0, 0%, 98%);
	padding: var(--ck-spacing-small);

	/* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
	box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);

	/* Make `z-index` bigger than `.editor` to properly display tooltips. */
	z-index: 20;
}

.ck.ck-presence-list {
    flex: 1;
    padding: 1.25rem .75rem;
}

.presence .ck.ck-presence-list__counter {
	order: 2;
	margin-left: var(--ck-spacing-large)
}

/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
.collaboration-demo__row {
	display: flex;
	position: relative;
	justify-content: center;
	overflow-y: auto;
	background-color: #f2f2f2;
	border: 1px solid hsl(0, 0%, 77%);
}

body[data-editor='InlineEditor'] .collaboration-demo__row {
	border: 0;
}

.collaboration-demo__container {
	max-width: var(--ck-sample-container-width);
	margin: 0 auto;
	padding: 1.25rem;
}

.presence, .collaboration-demo__row {
	transition: .2s opacity;
}

.collaboration-demo__topbar {
	background: #fff;
	border: 1px solid var(--ck-color-toolbar-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.collaboration-demo__topbar .btn {
	margin-right: 1em;
	outline-offset: 2px;
	outline-width: 2px;
	background-color: var( --ck-sample-color-blue );
}

.collaboration-demo__topbar .btn:focus,
.collaboration-demo__topbar .btn:hover {
	border-color: var( --ck-sample-color-blue );
}

.collaboration-demo__share {
	display: flex;
	align-items: center;
	padding: 1.25rem .75rem
}

.collaboration-demo__share-description p {
	margin: 0;
	font-weight: bold;
	font-size: 0.9em;
}

.collaboration-demo__share input {
	height: auto;
	font-size: 0.9em;
	min-width: 220px;
	margin: 0 10px;
	border-radius: 4px;
	border: 1px solid var(--ck-color-toolbar-border)
}

.collaboration-demo__share button,
.collaboration-demo__share input {
	height: 40px;
	padding: 5px 10px;
}

.collaboration-demo__share button {
	position: relative;
}

.collaboration-demo__share button:focus {
	outline: none;
}

.collaboration-demo__share button[data-tooltip]::before,
.collaboration-demo__share button[data-tooltip]::after {
	position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .15s cubic-bezier(.5,1,.25,1);
	z-index: 1;
}

.collaboration-demo__share button[data-tooltip]::before {
	content: attr(data-tooltip);
    padding: 5px 15px;
    border-radius: 3px;
    background: #111;
    color: #fff;
    text-align: center;
    font-size: 11px;
	top: 100%;
    left: 50%;
    margin-top: 5px;
    transform: translateX(-50%);
}

.collaboration-demo__share button[data-tooltip]::after {
    content: '';
	border: 5px solid transparent;
    width: 0;
    font-size: 0;
    line-height: 0;
	top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 5px solid #111;
	border-top: none;
}

.collaboration-demo__share button[data-tooltip]:hover:before,
.collaboration-demo__share button[data-tooltip]:hover:after {
	visibility: visible;
    opacity: 1;
}

.collaboration-demo--ready {
	overflow: visible;
	height: auto;
}

.collaboration-demo--ready .presence,
.collaboration-demo--ready .collaboration-demo__row {
	opacity: 1;
}

/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */

/* Pagination view line must be stacked at least at the same level as the editor,
   otherwise it will be hidden underneath. */
.ck.ck-pagination-view-line {
	z-index: var(--ck-sample-editor-z-index);
}

/* --------- REVISION HISTORY FEATURE ------------------------------------------------------------------------------ */

.revision-viewer-container {
    display: none;
}

.revision-viewer-sidebar {
    position: relative;
    min-width: 310px;
    overflow: hidden;
    background: var(--ck-color-toolbar-background);
    border: 1px solid var(--ck-color-toolbar-border);
    margin-left: -1px;
}

/* A case when Pagination and Revision History features are enabled in the editor. */
/* Move the square with page number from the Pagination plugin to the left side, so that it does not cover the RH sidebar. */
body[data-revision-history='true'] .ck.ck-pagination-view-line::after {
	transform: translateX(-100%) !important;
	left: -1px !important;
	right: unset !important;
}


/* --------- CUSTOM CSS ------------------------------------------------------------------------------------ */
/*.ck ul, li {
	list-style: inherit;
}*/
@media (max-width: 768px) {
	/* 여기에 모바일용 스타일 작성 */
	/* 모바일에 li 때문에 width 튀어나가는 현상 방지*/
	.ck li {
		list-style: inherit;
	}

	.ck > ul, ol {
		padding: 10px;
	}
}

/*
.ck div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	font-family: inherit;
}
*/
.ck .table {
	width: 100%;
	max-width: 100%;
}

.ck p {
	margin: 0 0 10px;
	font-size: 1.2rem;
	letter-spacing: -0.03em;
	line-height: 160%;
	word-break : break-all;
}

.ck i {
	font-style: italic;
}

.ck html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abb
r, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, st
rong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-family: 'Noto Sans', 'Source Han Sans', "Noto Sans CJK KR",  'Nanum Gothic', 'NanumGothic', 'Malgun Gothic', 'dotum', 'serif';
}

.ck h1,
.h1 {
	font-size: 36px;
}

.ck h2,
.h2 {
	font-size: 30px;
}

.ck h3,
.h3 {
	font-size: 24px;
}

.ck h4,
.h4 {
	font-size: 20px;
}

.ck h5,
.h5 {
	font-size: 14px;
}

.ck h6,
.h6 {
	font-size: 12px;
}

.ck h1, .h1, h2, .h2, h3, .h3 {
/*	margin-top: 20px;
	margin-bottom: 10px;*/
	margin: 0;
}

.ck h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: inherit;
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
}

.ck a {
	word-break: break-all;
}

.ck-widget__type-around {
	display: none;
}

.ck .ck-widget__selection-handle {
	display: none;
}

.ck .ck-widget:hover, .ck .ck-widget.ck-widget_selected:hover, .ck .ck-widget.ck-widget_selected {
	outline-color: var(--ck-color-widget-blurred-border);
}