/* ============================================================================
 * blockEditor-content.css  —  blockEditor(editor.js) 본문 공용 스타일 (Single Source of Style)
 *
 *  목적: editor.js 블럭 → HTML 출력 스타일을 한 곳에서 정의.
 *        **admin '미리보기' 와 front '실제 노출 화면' 이 동일하게 보이도록** 양쪽이 같이 로드.
 *
 *  ⚠️ admin / front 양쪽 static 에 "동일 내용"으로 유지(별도 배포라 물리 공유 불가).
 *      - Front: EduDeskAcademyFront_2.5/.../static/common/blockEditor/blockEditor-content.css
 *      - Admin: EduDeskAcademyAdmin_2.5/.../static/common/blockEditor/blockEditor-content.css
 *
 *  적용 대상 = class="blockEditor-content" 컨테이너
 *      (front 출력 div / admin 미리보기 #blogEditorPreview 등 신규 기능 공통)
 *
 *  ── 하드닝 전략 (host 레거시 테마 침투 차단) ─────────────────────────────────
 *  각 화면의 전역 테마가 p/td/footer 등 "요소 단위" 규칙(때로 ID·!important)
 *  으로 폰트/크기/줄높이를 덮어쓴다. 이를 막기 위해:
 *   1) 콘텐츠 요소 전체에 타이포그래피 "풀세트"(font-family·size·line-height·letter-spacing·
 *      color·weight·align)를 **명시 선언**한다. (선언 안 한 속성은 !important 여도 안 막힌다)
 *   2) 침투가 잦은 속성은 **!important** 로 고정한다.
 *  → 새 요소(블럭) 추가 시: 이 파일에 해당 요소의 타이포 풀세트를 같이 추가할 것.
 * ==========================================================================*/

/* 컨테이너 */
.blockEditor-content {
	max-width:820px; margin-left:auto !important; margin-right:auto !important;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-size:16.5px !important; line-height:1.8 !important; letter-spacing:0 !important;
	color:#333 !important; word-break:break-word;
}

/* (1) 공통 baseline — 모든 콘텐츠 요소의 폰트/줄높이 고정 (host 침투 차단)
 *     자간(letter-spacing)은 정책상 요소별로 다름 → baseline 은 본문 기준 0,
 *     제목(h2~h6)은 각 규칙에서 개별 override. (정책 v1.01) */
.blockEditor-content h2, .blockEditor-content h3, .blockEditor-content h4,
.blockEditor-content h5, .blockEditor-content h6,
.blockEditor-content p, .blockEditor-content ul, .blockEditor-content ol, .blockEditor-content li,
.blockEditor-content blockquote, .blockEditor-content blockquote footer,
.blockEditor-content table, .blockEditor-content tr, .blockEditor-content th, .blockEditor-content td,
.blockEditor-content figure, .blockEditor-content figcaption, .blockEditor-content a, .blockEditor-content mark {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	letter-spacing:0 !important;
	line-height:1.8 !important;
}

/* 제목 — 정책 v1.01 (대제목40 / 제목1 32 / 제목2 24 / 제목3 20 / 제목4 18, 굵기 700)
 *   대제목=h2, 제목1=h3, 제목2=h4, 제목3=h5, 제목4=h6 */
.blockEditor-content h2 { font-size:40px !important; font-weight:700 !important; letter-spacing:-0.5px !important; color:#191919 !important; margin:40px 0 16px !important; }
.blockEditor-content h3 { font-size:32px !important; font-weight:700 !important; letter-spacing:-0.4px !important; color:#191919 !important; margin:34px 0 14px !important; }
.blockEditor-content h4 { font-size:24px !important; font-weight:700 !important; letter-spacing:-0.4px !important; color:#191919 !important; margin:28px 0 12px !important; }
.blockEditor-content h5 { font-size:20px !important; font-weight:700 !important; letter-spacing:-0.3px !important; color:#191919 !important; margin:24px 0 10px !important; }
.blockEditor-content h6 { font-size:18px !important; font-weight:700 !important; letter-spacing:-0.3px !important; color:#191919 !important; margin:22px 0 8px !important; }

/* 본문 단락 — 정책 16.5px / 자간 0 / 400 */
.blockEditor-content p { font-size:16.5px !important; font-weight:400 !important; letter-spacing:0 !important; color:#333 !important; margin:0 0 16px !important; }

/* 링크 / 형광펜 */
.blockEditor-content a { color:#2a6fdb !important; text-decoration:underline !important; }
/* 마커 — 정책 v1.01 (dev-feedback #13): 배경 #F1F1EF / 글자 #EB5757 / radius 4px / padding 2px 6px / monospace.
 *   기능은 하이라이트 그대로, 시각만 코드칩 형태로 교체. */
.blockEditor-content mark { background:#F1F1EF !important; color:#EB5757 !important; border-radius:4px !important; padding:2px 6px !important; font-family:monospace !important; }

/* 글자색 / 배경색 (정책 v1.01, class 매핑) — 출력(.blockEditor-content) + 편집(.codex-editor) 동시 적용.
 *   .codex-editor 는 admin 편집화면에만 존재 → front 전역 누수 없음. */
.blockEditor-content .be-c-gray,   .codex-editor .be-c-gray   { color:#787774 !important; }
.blockEditor-content .be-c-brown,  .codex-editor .be-c-brown  { color:#976D57 !important; }
.blockEditor-content .be-c-orange, .codex-editor .be-c-orange { color:#CC7B29 !important; }
.blockEditor-content .be-c-yellow, .codex-editor .be-c-yellow { color:#C49000 !important; }
.blockEditor-content .be-c-green,  .codex-editor .be-c-green  { color:#2B7D50 !important; }
.blockEditor-content .be-c-blue,   .codex-editor .be-c-blue   { color:#186B9A !important; }
.blockEditor-content .be-c-purple, .codex-editor .be-c-purple { color:#6940A5 !important; }
.blockEditor-content .be-c-pink,   .codex-editor .be-c-pink   { color:#AD1A72 !important; }
.blockEditor-content .be-c-red,    .codex-editor .be-c-red    { color:#E03E3E !important; }
.blockEditor-content .be-bg-gray,   .codex-editor .be-bg-gray   { background-color:#F1F1EF !important; }
.blockEditor-content .be-bg-brown,  .codex-editor .be-bg-brown  { background-color:#F3EEEE !important; }
.blockEditor-content .be-bg-orange, .codex-editor .be-bg-orange { background-color:#F8ECDF !important; }
.blockEditor-content .be-bg-yellow, .codex-editor .be-bg-yellow { background-color:#FAF3E0 !important; }
.blockEditor-content .be-bg-green,  .codex-editor .be-bg-green  { background-color:#EDF3EC !important; }
.blockEditor-content .be-bg-blue,   .codex-editor .be-bg-blue   { background-color:#E8F4F8 !important; }
.blockEditor-content .be-bg-purple, .codex-editor .be-bg-purple { background-color:#F3EDF7 !important; }
.blockEditor-content .be-bg-pink,   .codex-editor .be-bg-pink   { background-color:#FBF0F5 !important; }
.blockEditor-content .be-bg-red,    .codex-editor .be-bg-red    { background-color:#FBEFEE !important; }

/* 목록 */
.blockEditor-content ul, .blockEditor-content ol { margin:0 0 16px !important; padding-left:24px !important; }
.blockEditor-content ul { list-style: disc outside !important; }
.blockEditor-content ol { list-style: decimal outside !important; }
.blockEditor-content ul ul { list-style: circle outside !important; }
.blockEditor-content ol ol { list-style: lower-alpha outside !important; }
.blockEditor-content li { font-size:16.5px !important; font-weight:400 !important; color:#333 !important; margin:4px 0 !important; }
/* display:list-item 복원은 일반 목록 li 에만 (체크리스트 li 의 flex 를 깨지 않도록) */
.blockEditor-content ul:not(.blockEditor-checklist) > li,
.blockEditor-content ol > li { list-style: inherit !important; display: list-item !important; }

/* 체크리스트 */
.blockEditor-content ul.blockEditor-checklist { list-style:none !important; padding-left:0 !important; }
.blockEditor-content ul.blockEditor-checklist li { list-style:none !important; display:flex !important; align-items:flex-start; margin:6px 0 !important; }
.blockEditor-content ul.blockEditor-checklist .cl-box { flex:0 0 18px; width:18px; height:18px; box-sizing:border-box; border:2px solid #c4c4c4; border-radius:4px; margin:3px 8px 0 0; position:relative; }
.blockEditor-content ul.blockEditor-checklist li.checked .cl-box { background:#3d7eff; border-color:#3d7eff; }
.blockEditor-content ul.blockEditor-checklist li.checked .cl-box:after { content:""; position:absolute; left:4px; top:0; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.blockEditor-content ul.blockEditor-checklist li.checked .cl-text { color:#888 !important; text-decoration:line-through; }
.blockEditor-content ul.blockEditor-checklist ul.blockEditor-checklist { padding-left:26px !important; }

/* 콜아웃(강조 박스) — 정책 v1.02: 배경 #F1F1EF / 글자 #333 / radius 8px / padding 20px 24px / 16.5px·400 (디폴트 볼드 제거, 부분 볼드는 선택 적용) */
.blockEditor-content .blockEditor-callout {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-size:16.5px !important; font-weight:400 !important; letter-spacing:0 !important; line-height:1.8 !important;
	background:#F1F1EF !important; color:#333333 !important;
	border-radius:8px !important; padding:20px 24px !important; margin:0 0 16px !important;
}

/* 인용 */
.blockEditor-content blockquote { margin:0 0 16px !important; padding:12px 18px !important; border-left:4px solid #3d7eff !important; background:#f6f9ff !important; color:#444 !important; }
.blockEditor-content blockquote footer { margin-top:6px !important; font-size:13px !important; color:#888 !important; }

/* 이미지 */
.blockEditor-content figure { margin:0 0 20px !important; text-align:center !important; }
.blockEditor-content figure img { max-width:100% !important; border-radius:6px; }
.blockEditor-content figcaption { font-size:13px !important; color:#999 !important; margin-top:6px !important; }
/* 모바일: PC에서 조정한 폭%(inline style)을 무시하고 원본 크기(최대 100%)로 노출 — dev-feedback #3.
   PC는 inline width:X% 유지(조정 사이즈 그대로), 모바일만 작게 나오던 문제 해소. */
@media (max-width: 768px) {
	.blockEditor-content figure img { width:auto !important; max-width:100% !important; }
}

/* 임베드(유튜브) — 16:9 반응형 */
.blockEditor-content figure.blockEditor-embed { margin:0 0 20px !important; }
.blockEditor-content .blockEditor-embed-frame { position:relative !important; width:100% !important; height:0 !important; padding-top:56.25% !important; }
.blockEditor-content .blockEditor-embed-frame iframe { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* 표 */
.blockEditor-content table.blockEditor-table { width:100% !important; border-collapse:collapse !important; margin:0 0 20px !important; }
.blockEditor-content table.blockEditor-table th,
.blockEditor-content table.blockEditor-table td {
	border:1px solid #ddd !important; padding:8px 12px !important; text-align:left !important;
	color:#333 !important; font-size:16.5px !important; font-weight:400 !important; background:transparent !important;
}
.blockEditor-content table.blockEditor-table th { background:#f5f5f5 !important; font-weight:700 !important; }

/* 구분선 — 정책 v1.01: 선색 #E1E1DF, 위아래 24px / 좌우 0 */
.blockEditor-content hr.blockEditor-delimiter { border:0 !important; border-top:1px solid #E1E1DF !important; margin:24px 0 !important; height:0 !important; }

/* 본문 자간 -0.3px (블로그 시안) — 제목(h2~h6)은 각자 자간 유지 */
.blockEditor-content p,
.blockEditor-content li,
.blockEditor-content blockquote { letter-spacing:-0.3px !important; }