@charset "utf-8";
/* =====================================================================
 * LandEditor 저장 콘텐츠 프론트 표출 스타일 (에디터 편집화면과 최대한 동일하게)
 *  - 대상: 이용자 화면에서 에디터 본문이 렌더되는 영역 (.sub_content / .cms-content)
 *  - 근거: 저장 HTML은 편집화면 프레임(.editor-image-frame) 없이
 *          <img class="editor-image" data-landeditor-align="..."> + inline style 형태로 직렬화됨
 *  - kaia_common.css(레이아웃/컴포넌트)와 분리된 "에디터 서식 전용" 프론트 CSS
 * ===================================================================== */

/* 콘텐츠 영역 기본 타이포 */
.sub_content, .cms-content { font-size: 1.6rem; line-height: 1.75; color: var(--kaia-text, #1e2124); word-break: break-word; }
.sub_content > * + *, .cms-content > * + * { margin-top: 10px; }

/* 문단 / 제목 / 목록 / 링크 (에디터가 inline text-align 로 정렬 저장 → 그대로 표출) */
.sub_content p, .cms-content p { line-height: 1.75; }
.sub_content h1, .cms-content h1 { font-size: 2.8rem; font-weight: 700; margin: 24px 0 12px; line-height: 1.3; }
.sub_content h2, .cms-content h2 { font-size: 2.4rem; font-weight: 700; margin: 22px 0 12px; line-height: 1.3; }
.sub_content h3, .cms-content h3 { font-size: 2rem; font-weight: 700; margin: 20px 0 10px; line-height: 1.35; }
.sub_content h4, .cms-content h4 { font-size: 1.7rem; font-weight: 700; margin: 16px 0 8px; }
.sub_content ul, .cms-content ul { list-style: disc; padding-left: 22px; }
.sub_content ol, .cms-content ol { list-style: decimal; padding-left: 22px; }
.sub_content li, .cms-content li { line-height: 1.7; }
.sub_content a, .cms-content a { color: var(--kaia-primary-60, #0b50d0); text-decoration: underline; }
.sub_content strong, .cms-content strong { font-weight: 700; }
.sub_content hr, .cms-content hr { border: 0; border-top: 1px solid var(--kaia-line, #e6e8ea); margin: 20px 0; }
.sub_content blockquote, .cms-content blockquote { margin: 12px 0; padding: 12px 18px; border-left: 4px solid var(--kaia-primary-40, #4c87f6); background: var(--kaia-bg-subtle, #f4f5f6); color: var(--kaia-text-subtle, #464c53); }

/* 이미지 (.editor-image) — 저장 속성 data-landeditor-align 로 정렬 */
.sub_content img, .cms-content img, .editor-image { max-width: 100%; height: auto; }
.editor-image { display: block; }
.editor-image[data-landeditor-align="center"] { margin-left: auto !important; margin-right: auto !important; }
.editor-image[data-landeditor-align="right"]  { margin-left: auto !important; margin-right: 0 !important; }
.editor-image[data-landeditor-align="left"]   { margin-left: 0 !important; margin-right: auto !important; }

/* 표 (에디터는 plain <table> 로 저장 → 기본 테두리/헤더 스타일 부여) */
.sub_content table, .cms-content table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 1.5rem; }
.sub_content table th, .sub_content table td,
.cms-content table th, .cms-content table td { border: 1px solid var(--kaia-line-strong, #cdd1d5); padding: 10px 12px; vertical-align: middle; }
.sub_content table th, .cms-content table th { background: var(--kaia-bg-subtle, #f4f5f6); font-weight: 700; color: var(--kaia-gray-90, #1e2124); }
.sub_content table caption, .cms-content table caption { caption-side: top; text-align: left; padding: 6px 2px; font-weight: 700; }

/* =====================================================================
 * 고급 요소 (표시 전용 / 향후 대비)
 *  - 편집화면 전용 UI(리사이즈 핸들·선택 아웃라인 등)는 프론트에서 숨김
 *  - 이미지 프레임(.editor-image-frame)이 직렬화된 경우의 정렬 지원
 *  - 도형/텍스트박스/수식/페이지나눔은 표시용 기본값만 (편집상태 스타일 제외)
 *  ※ 현재 저장 콘텐츠엔 고급요소 미사용. 완전 일치가 필요하면 LandEditor의
 *    "뷰어(read-only) 콘텐츠 CSS"를 별도 제공받아 이 파일에서 @import 권장.
 * ===================================================================== */
/* 편집 전용 UI 아티팩트 숨김 (혹시 마크업에 섞여 들어와도 프론트엔 미표시) */
.sub_content .object-resize-handles, .cms-content .object-resize-handles,
.sub_content .image-resize-handles, .cms-content .image-resize-handles,
.sub_content .editor-chrome, .cms-content .editor-chrome,
.sub_content .editor-status-bar, .cms-content .editor-status-bar { display: none !important; }
.sub_content .ProseMirror-selectednode, .cms-content .ProseMirror-selectednode { outline: none !important; }

/* 이미지 프레임(직렬화 케이스) 정렬
 *  - 정렬은 프레임 인라인 style(margin:12px auto; width:fit-content)로 저장되나,
 *    프론트 XSS/필터 등으로 인라인 style이 유실돼도 클래스만으로 정렬되도록 보강.
 *  - width:fit-content 로 프레임을 콘텐츠(이미지) 폭에 맞춰야 margin:auto 가 동작.
 *  - 인라인 width(px)가 살아있으면 그 값이 우선(인라인 > 클래스) → 지정 크기 유지. */
.editor-image-frame { box-sizing: border-box; max-width: 100%; display: block; position: relative; line-height: 0; }
.editor-image-frame.is-center { width: -moz-fit-content; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
.editor-image-frame.is-right { width: -moz-fit-content; width: fit-content; margin-left: auto !important; margin-right: 0 !important; }
.editor-image-frame .editor-image { width: 100%; height: auto; margin: 0; }

/* 텍스트박스 / 도형 / 수식 / 페이지나눔 (표시용 기본값) */
.editor-text-box { max-width: 100%; }
.editor-text-box-content { box-sizing: border-box; }
.editor-shape { max-width: 100%; }
.editor-shape-svg { max-width: 100%; height: auto; }
.editor-formula { display: inline-block; vertical-align: middle; }
.editor-formula-inline { display: inline-block; }
.editor-formula-block { display: block; text-align: center; margin: 12px 0; }
.editor-page-break { display: block; height: 0; border-top: 1px dashed var(--kaia-line-strong, #cdd1d5); margin: 24px 0; }
.editor-embedded-object { max-width: 100%; }

/* 표 가로 스크롤 (모바일 대비) */
@media (max-width: 640px) {
  .sub_content table, .cms-content table { display: block; overflow-x: auto; white-space: nowrap; }
}