/**
 * CKEditor5 Content Styles
 * 에디터로 작성된 컨텐츠가 프론트엔드에서 동일하게 보이도록 하는 스타일
 */

/* === CKEditor5 툴바 구분자 간격 === */
.ck.ck-toolbar .ck-toolbar__separator {
  margin-left: 8px;
}

/* 에디터 기본 높이 설정 */
.ck-editor__editable_inline,
.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 300px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* === CKEditor5 Font Size 클래스 === */
/* 에디터에서 "매우 작은/작은/기본/큰/매우 큰" 선택 시 적용되는 클래스 */
.ck-content .text-tiny,
.text-tiny {
  font-size: .7em;
}

.ck-content .text-small,
.text-small {
  font-size: .85em;
}

.ck-content .text-big,
.text-big {
  font-size: 1.4em;
}

.ck-content .text-huge,
.text-huge {
  font-size: 1.8em;
}

/* 이미지 기본 스타일 */
.ck-content .image,
.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
}

.ck-content .image img,
.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 50px;
}

/* 이미지 우측 정렬 */
.ck-content .image-style-side,
.ck-content .image-style-align-right,
.image-style-side,
.image-style-align-right {
  float: right;
  margin-left: 1.5em;
  margin-right: 0;
  max-width: 50%;
}

/* 이미지 좌측 정렬 */
.ck-content .image-style-align-left,
.image-style-align-left {
  float: left;
  margin-right: 1.5em;
  margin-left: 0;
  max-width: 50%;
}

/* 이미지 중앙 정렬 (블록) */
.ck-content .image-style-block-align-center,
.image-style-block-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* 이미지 좌측 정렬 (블록) */
.ck-content .image-style-block-align-left,
.image-style-block-align-left {
  margin-right: auto;
  margin-left: 0;
}

/* 이미지 우측 정렬 (블록) */
.ck-content .image-style-block-align-right,
.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}

/* 이미지 캡션 */
.ck-content .image > figcaption,
.image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: #333;
  background-color: #f7f7f7;
  padding: 0.6em;
  font-size: 0.75em;
  outline-offset: -1px;
}

/* 인라인 이미지 */
.ck-content .image-inline,
.image-inline {
  display: inline-flex;
  max-width: 100%;
  align-items: flex-start;
}

.ck-content .image-inline picture,
.image-inline picture {
  display: flex;
}

.ck-content .image-inline picture img,
.image-inline picture img {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
}

/* === CKEditor5 리스트 스타일 === */
.ck-content ul {
  list-style: disc;
  padding-left: 2em;
}

.ck-content ol {
  list-style: decimal;
  padding-left: 2em;
}

/* === CKEditor5 이탈릭 스타일 === */
.ck-content i,
.ck-content em {
  font-style: italic;
}

/* === CKEditor5 수평선 스타일 === */
.ck-content hr {
  position: static;
  left: auto;
  width: 100%;
  height: auto;
  font-size: inherit;
  overflow: visible;
  margin: 15px 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/* === CKEditor5 Heading 스타일 === */
.ck-content h2 {
  font-size: 1.5em;
  font-weight: bold;
}

.ck-content h3 {
  font-size: 1.17em;
  font-weight: bold;
}

.ck-content h4 {
  font-size: 1em;
  font-weight: bold;
}

/* float 해제용 clearfix */
.ck-content::after,
#mainContent::after,
.lh160::after {
  content: "";
  display: table;
  clear: both;
}