/* ============================================================
   CKEditor Content Style Restoration
   CKEditor로 작성된 게시글 콘텐츠의 스타일을 복원합니다.
   common.css의 reset 규칙으로 인해 제거된 스타일을 재적용합니다.
   ============================================================ */

/* 기본 텍스트 스타일 */
.ckeditor-content {
  font-size: 18rem;
  line-height: 1.6;
  color: #333;
  word-break: keep-all;
  word-wrap: break-word;
}

/* ============================================================
   텍스트 서식 (Formatting)
   ============================================================ */

/* 이탤릭 스타일 복원 */
.ckeditor-content em,
.ckeditor-content i {
  font-style: italic !important;
}

/* 볼드 스타일 복원 */
.ckeditor-content strong,
.ckeditor-content b {
  font-weight: bold !important;
}

/* 밑줄 */
.ckeditor-content u {
  text-decoration: underline !important;
}

/* 취소선 */
.ckeditor-content s,
.ckeditor-content strike {
  text-decoration: line-through !important;
}

/* 아래 첨자 */
.ckeditor-content sub {
  vertical-align: sub;
  font-size: smaller;
}

/* 위 첨자 */
.ckeditor-content sup {
  vertical-align: super;
  font-size: smaller;
}

/* ============================================================
   리스트 (Lists)
   ============================================================ */

/* 순서 없는 리스트 (글머리 기호) */
.ckeditor-content ul {
  list-style: disc !important;
  padding-left: 40rem;
  margin: 10rem 0;
}

/* 중첩된 ul - 동그라미 */
.ckeditor-content ul ul {
  list-style: circle !important;
  margin: 5rem 0;
}

/* 3단계 중첩 ul - 네모 */
.ckeditor-content ul ul ul {
  list-style: square !important;
}

/* 순서 있는 리스트 (번호 매기기) */
.ckeditor-content ol {
  list-style: decimal !important;
  padding-left: 40rem;
  margin: 10rem 0;
}

/* 중첩된 ol - 알파벳 소문자 */
.ckeditor-content ol ol {
  list-style: lower-alpha !important;
  margin: 5rem 0;
}

/* 3단계 중첩 ol - 로마 숫자 소문자 */
.ckeditor-content ol ol ol {
  list-style: lower-roman !important;
}

/* 리스트 아이템 */
.ckeditor-content li {
  margin: 5rem 0;
  line-height: 1.6;
}

/* ============================================================
   제목 (Headings)
   ============================================================ */

.ckeditor-content h1,
.ckeditor-content h2,
.ckeditor-content h3,
.ckeditor-content h4,
.ckeditor-content h5,
.ckeditor-content h6 {
  font-weight: bold !important;
  margin: 20rem 0 10rem 0;
  line-height: 1.3;
  color: #222;
}

.ckeditor-content h1 {
  font-size: 32rem;
}

.ckeditor-content h2 {
  font-size: 28rem;
}

.ckeditor-content h3 {
  font-size: 24rem;
}

.ckeditor-content h4 {
  font-size: 20rem;
}

.ckeditor-content h5 {
  font-size: 18rem;
}

.ckeditor-content h6 {
  font-size: 16rem;
}

/* ============================================================
   링크 (Links)
   ============================================================ */

.ckeditor-content a {
  color: #0c5c32;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ckeditor-content a:hover {
  color: #074827;
  text-decoration: underline;
}

.ckeditor-content a:visited {
  color: #0a4a28;
}

/* ============================================================
   인용구 (Blockquote)
   ============================================================ */

.ckeditor-content blockquote {
  font-style: italic !important;
  border-left: 5rem solid #ccc;
  padding-left: 20rem;
  margin: 20rem 0;
  color: #666;
  background-color: #f9f9f9;
  padding: 15rem 20rem;
  border-radius: 5rem;
}

/* ============================================================
   코드 (Code)
   ============================================================ */

.ckeditor-content code {
  background-color: #f5f5f5;
  padding: 2rem 6rem;
  border-radius: 3rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  color: #d63384;
}

.ckeditor-content pre {
  background-color: #f5f5f5;
  padding: 15rem;
  border-radius: 5rem;
  overflow-x: auto;
  margin: 20rem 0;
  border: 1rem solid #ddd;
}

.ckeditor-content pre code {
  background-color: transparent;
  padding: 0;
  color: #333;
}

/* ============================================================
   단락 (Paragraph)
   ============================================================ */

.ckeditor-content p {
  margin: 10rem 0;
  line-height: 1.6;
  font-size: 0;  /* inline-block 이미지 사이 공백 제거 */
}

/* 빈 p 태그도 간격 유지 */
.ckeditor-content p:empty {
  min-height: 1.6em;
}

/* 텍스트 노드 및 인라인 요소 폰트 크기 복원 */
.ckeditor-content p > *:not(img) {
  font-size: 18rem;  /* 기본 폰트 크기 */
}

/* 직접 텍스트 노드는 상속 불가하므로 span으로 감싸지 않은 텍스트를 위한 fallback */
.ckeditor-content p:not(:has(img)) {
  font-size: 18rem;  /* 이미지가 없는 p 태그는 정상 크기 */
}

/* ============================================================
   이미지 (Images)
   ============================================================ */

.ckeditor-content img {
  max-width: 100%;
  height: auto;
  display: inline-block;     /* 가로 배치 지원 */
  vertical-align: top;       /* 이미지 정렬 보정 */
  /* border-radius: 10rem;
  margin: 20rem 5rem; */
  font-size: 16px;           /* 폰트 크기 복원 (alt 텍스트용) */
}

/* 이미지가 링크로 감싸진 경우 */
.ckeditor-content a img {
  transition: opacity 0.2s ease;
}

.ckeditor-content a:hover img {
  opacity: 0.9;
}

/* ============================================================
   테이블 (Tables)
   ============================================================ */

.ckeditor-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 20rem 0;
  border: 1rem solid #ddd;
}

.ckeditor-content table td,
.ckeditor-content table th {
  border: 1rem solid #ddd;
  padding: 12rem;
  text-align: left;
}

.ckeditor-content table th {
  background-color: #f5f5f5;
  font-weight: bold !important;
  color: #333;
}

.ckeditor-content table tr:nth-child(even) {
  background-color: #fafafa;
}

.ckeditor-content table tr:hover {
  background-color: #f0f0f0;
}

/* ============================================================
   기타 요소 (Miscellaneous)
   ============================================================ */

/* 수평선 */
.ckeditor-content hr {
  border: none;
  border-top: 1rem solid #ddd;
  margin: 30rem 0;
}

/* 구분선 (div) */
.ckeditor-content div {
  margin: 0;
}

/* 유튜브 사이즈 */
.ckeditor-content iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 315;
}

/* ============================================================
   반응형 (Responsive)
   ============================================================ */

@media screen and (max-width: 1280px) {
  .ckeditor-content {
    font-size: 16rem;
  }

  .ckeditor-content ul,
  .ckeditor-content ol {
    padding-left: 30rem;
  }

  .ckeditor-content h1 {
    font-size: 26rem;
  }

  .ckeditor-content h2 {
    font-size: 24rem;
  }

  .ckeditor-content h3 {
    font-size: 20rem;
  }

  .ckeditor-content h4 {
    font-size: 18rem;
  }

  .ckeditor-content h5 {
    font-size: 16rem;
  }

  .ckeditor-content h6 {
    font-size: 14rem;
  }

  .ckeditor-content blockquote {
    padding: 10rem 15rem;
    margin: 15rem 0;
  }

  .ckeditor-content table td,
  .ckeditor-content table th {
    padding: 8rem;
  }
}

@media screen and (max-width: 640px) {
  .ckeditor-content {
    font-size: 14rem;
  }

  .ckeditor-content ul,
  .ckeditor-content ol {
    padding-left: 20rem;
  }

  .ckeditor-content h1 {
    font-size: 22rem;
  }

  .ckeditor-content h2 {
    font-size: 20rem;
  }

  .ckeditor-content h3 {
    font-size: 18rem;
  }

  .ckeditor-content h4 {
    font-size: 16rem;
  }

  .ckeditor-content h5 {
    font-size: 14rem;
  }

  .ckeditor-content h6 {
    font-size: 13rem;
  }

  /* 모바일에서 테이블 가로 스크롤 */
  .ckeditor-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}