/*
 * 표준 콘텐츠 스타일시트 — CKEditor로 작성한 콘텐츠의 표현 스타일.
 *
 * !! 이 파일은 https://static.chabyulhwa.com/market/assets/css/editor/ck-editor-style.css에도 복사되어 있다.
 *    수정 시 반드시 양쪽 파일을 함께 동기화할 것. !!
 *
 * 구성:
  0) 프로젝트 커스텀 헤딩/본문 스펙 - 0번, 3번 규칙은 변경하지 마세요.
  1) CKEditor 콘텐츠 스타일 (CKEditor 38.1.1에서 추출) — 이미지/표/리스트/하이라이트 등
 * CKEditor가 있는 페이지로 이동 -> devtools 콘솔에 아래를 붙여넣고 실행 -> .ck-content 규칙과 --ck- 변수가 클립보드로 복사
  const rules = [];
  for (const sheet of document.styleSheets) {
    let cssRules;
    try { cssRules = sheet.cssRules; } catch { continue; }
    for (const rule of cssRules) {
      const t = rule.cssText;
      if (t.includes('.ck-content') ||
          (rule.selectorText === ':root' && t.includes('--ck-'))) {
        rules.push(t);
      }
    }
  }
  copy(rules.join('\n'));
 */

 /* ===== 0) 프로젝트 커스텀 헤딩/본문 스펙 - 해당 규칙은 변경하지 마세요.===== */

 /* 차별화상회 - shadow DOM은 호스트 리셋을 못 받으므로 자체 리셋 필요 */
.ck-content :where(h1,h2,h3,h4,h5,h6,p,blockquote,figure,ul,ol,pre) {
  margin: 0;
}
/* 에디터(백오피스)와 동일하게 맞춤 */
.ck-content p { margin-block-end: 1rem; }
/* CK→CK 복붙 등으로 figure 래퍼 없이 bare <img>가 들어오는 케이스 방어.
   자연 폭이 큰 이미지가 컨테이너를 넘어 가로 오버플로우/레이아웃 깨짐을 막음 */
.ck-content img {
  max-width: 100%;
  height: auto;
}
/* 블록 요소 단독 자식으로 들어온 bare <img>는 자연 크기 유지, 컨테이너 넘으면 100%까지만, 가운데 정렬 */
.ck-content:not(.ck-editor__editable) > img,
.ck-content:not(.ck-editor__editable) :where(h1,h2,h3,h4,h5,h6,p,div) > img:only-child {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* 차별화상회 미리보기 - .ck-content는 풀 컨테이너 폭, 좌우 여백은 텍스트 element에만 부여하여 이미지 풀폭 보존 */
.ck-content:not(.ck-editor__editable) {
  width: 100%;
}
/* 텍스트 element만 좌우 20px indent (단독 img 가진 블록은 제외하여 풀폭 유지) */
.ck-content:not(.ck-editor__editable) :where(h1,h2,h3,h4,h5,h6,p,ul,ol,pre):not(:has(> img:only-child)) {
  margin-left: 20px;
  margin-right: 20px;
}


/* ===== 1) CKEditor content styles (CKEditor 38.1.1) .ck-content 규칙 복사 ===== */

/* CSS 변수 — 아래 콘텐츠 규칙이 참조하는 것만 (에디터 UI 변수는 제외) */
:host, :root{
  --ck-highlight-marker-yellow: #fdfd77;
  --ck-highlight-marker-green: #62f962;
  --ck-highlight-marker-pink: #fc7899;
  --ck-highlight-marker-blue: #72ccfd;
  --ck-highlight-pen-red: #e71313;
  --ck-highlight-pen-green: #128a00;
  --ck-color-image-caption-background: #f7f7f7;
  --ck-color-image-caption-text: #333;
  --ck-image-style-spacing: 1.5em;
  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing)/2);
  --ck-color-table-caption-background: #f7f7f7;
  --ck-color-table-caption-text: #333;
}

/* blockquote */
.ck-content blockquote { border-left: 5px solid rgb(204, 204, 204); font-style: italic; margin: 0px; overflow: hidden; padding-left: 1.5em; padding-right: 1.5em; }
.ck-content[dir="rtl"] blockquote { border-left: 0px; border-right: 5px solid rgb(204, 204, 204); }

/* 폰트 크기 (FontSize 명명 옵션) */
.ck-content .text-tiny { font-size: 0.7em; }
.ck-content .text-small { font-size: 0.85em; }
.ck-content .text-big { font-size: 1.4em; }
.ck-content .text-huge { font-size: 1.8em; }

/* 하이라이트 (Highlight) */
.ck-content .marker-yellow { background-color: var(--ck-highlight-marker-yellow); }
.ck-content .marker-green { background-color: var(--ck-highlight-marker-green); }
.ck-content .marker-pink { background-color: var(--ck-highlight-marker-pink); }
.ck-content .marker-blue { background-color: var(--ck-highlight-marker-blue); }
.ck-content .pen-red { background-color: transparent; color: var(--ck-highlight-pen-red); }
.ck-content .pen-green { background-color: transparent; color: var(--ck-highlight-pen-green); }

/* 이미지 */
.ck-content .image { clear: both; display: table; margin: 0.9em auto; min-width: 50px; text-align: center; }
.ck-content .image img { display: block; margin: 0px auto; max-width: 100%; min-width: 100%; }
.ck-content .image-inline { align-items: flex-start; display: inline-flex; max-width: 100%; }
.ck-content .image-inline picture { display: flex; }
.ck-content .image-inline img, .ck-content .image-inline picture { flex-grow: 1; flex-shrink: 1; max-width: 100%; }
.ck-content .image > figcaption { background-color: var(--ck-color-image-caption-background); caption-side: bottom; color: var(--ck-color-image-caption-text); display: table-caption; font-size: 0.75em; outline-offset: -1px; padding: 0.6em; word-break: break-word; }

/* 이미지 리사이즈 */
.ck-content .image.image_resized { box-sizing: border-box; display: block; max-width: 100%; }
.ck-content .image.image_resized img { width: 100%; }
.ck-content .image.image_resized > figcaption { display: block; }

/* 이미지 정렬 (ImageStyle) */
.ck-content .image-style-block-align-left, .ck-content .image-style-block-align-right { max-width: calc(100% - var(--ck-image-style-spacing)); }
.ck-content .image-style-align-left, .ck-content .image-style-align-right { clear: none; }
.ck-content .image-style-side { float: right; margin-left: var(--ck-image-style-spacing); max-width: 50%; }
.ck-content .image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); }
.ck-content .image-style-align-center { margin-left: auto; margin-right: auto; }
.ck-content .image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); }
.ck-content .image-style-block-align-right { margin-left: auto; margin-right: 0px; }
.ck-content .image-style-block-align-left { margin-left: 0px; margin-right: auto; }
.ck-content p + .image-style-align-left, .ck-content p + .image-style-align-right, .ck-content p + .image-style-side { margin-top: 0px; }
.ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right { margin-bottom: var(--ck-inline-image-style-spacing); margin-top: var(--ck-inline-image-style-spacing); }
.ck-content .image-inline.image-style-align-left { margin-right: var(--ck-inline-image-style-spacing); }
.ck-content .image-inline.image-style-align-right { margin-left: var(--ck-inline-image-style-spacing); }

/* 리스트 */
.ck-content ol { list-style-type: decimal; }
.ck-content ol ol { list-style-type: lower-latin; }
.ck-content ol ol ol { list-style-type: lower-roman; }
.ck-content ol ol ol ol { list-style-type: upper-latin; }
.ck-content ol ol ol ol ol { list-style-type: upper-roman; }
.ck-content ul { list-style-type: disc; }
.ck-content ul ul { list-style-type: circle; }
.ck-content ul ul ul, .ck-content ul ul ul ul { list-style-type: square; }

/* 미디어 임베드 */
.ck-content .media { clear: both; display: block; margin: 0.9em 0px; min-width: 15em; }

/* 표 */
.ck-content .table { display: table; margin: 0.9em auto; }
.ck-content .table table { border: 1px double rgb(179, 179, 179); border-collapse: collapse; border-spacing: 0px; height: 100%; width: 100%; overflow: hidden; }
.ck-content .table table td, .ck-content .table table th { border: 1px solid rgb(191, 191, 191); min-width: 2em; padding: 0.4em; }
.ck-content .table table th { background: rgba(0, 0, 0, 0.05); font-weight: 700; }
.ck-content[dir="rtl"] .table th { text-align: right; }
.ck-content[dir="ltr"] .table th { text-align: left; }
.ck-content .table .ck-table-resized { table-layout: fixed; }
.ck-content .table td, .ck-content .table th { overflow-wrap: break-word; position: relative; }
.ck-content .table > figcaption { background-color: var(--ck-color-table-caption-background); caption-side: top; color: var(--ck-color-table-caption-text); display: table-caption; font-size: 0.75em; outline-offset: -1px; padding: 0.6em; text-align: center; word-break: break-word; }

/* ===== 2) 프로젝트 커스텀 헤딩/본문 스펙 (PC 기준) ===== */
.ck-content {
  font-family: 'Pretendard', sans-serif;
}

.ck-content h2 {
  font-size: 34px;
  line-height: 44px;
  font-weight: 700;
}

.ck-content h3 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}

.ck-content h4 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.ck-content p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* MO(모바일): 화면 너비 768px 이하 */
@media (max-width: 768px) {
  .ck-content h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
  }

  .ck-content h3 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
  }

  .ck-content h4 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
  }

  .ck-content p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
  }
}

/* ===== 3) 이미지 처리 (위 .image 규칙들보다 뒤에 두어 cascade 우선순위 확보, 에디터 편집영역에는 적용하지 않음) - 해당 규칙은 변경하지 마세요.
   단, 사용자가 명시적으로 리사이즈하거나 정렬(좌/우/중앙/블록 정렬, side)한 케이스는 의도를 보존하기 위해 제외 ===== */
.ck-content:not(.ck-editor__editable) .image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right):not(.image-style-block-align-left):not(.image-style-block-align-right):not(.image-style-side):not(.image_resized) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}