/**
 * ============================================================================
 *  CKEditor 5 본문 출력용 CSS (ck4compat-content.css)
 * ============================================================================
 *  작성 : 2026-11-13 클로드
 *
 *  [왜 필요한가]
 *   CKEditor 5 공식 콘텐츠 CSS(ckeditor5-content.css)는 모든 규칙이 `.ck-content` 아래로
 *   한정되어 있어, 프론트(게시판 보기 등)에서 본문을 감싸는 요소에 class="ck-content" 가
 *   없으면 이미지 정렬·크기, 표 테두리 등이 적용되지 않는다.
 *   → 기존 스킨을 고치지 않도록 CK5 가 저장하는 class 기준으로 범위 제한 없이 재작성했다.
 *     (figure.image, figure.table, .image-style-*, .ed-* 등 CK5/프리셋 전용 class 만 대상으로 함)
 *
 *  [불러오는 곳]
 *   - 프론트 : www/html/_skin/layout/inc_head.html, www/html/_skin/inc_head.html 의 <link>
 *   - 관리자 : ckeditor4-compat.js 가 자동 로드 (에디터 안에서도 프리셋이 같게 보이도록)
 *
 *  [섹션]
 *   1. 이미지 (figure.image, 캡션, 크기조절, 정렬)
 *   2. 표 (figure.table)
 *   3. 미디어 (figure.media)
 *   4. 본문 스타일 프리셋 (.ed-*)  ← 에디터 툴바 '스타일' 드롭다운과 1:1 대응
 *      프리셋 추가/변경 시 ckeditor4-compat.js 의 STYLE_DEFINITIONS 와 함께 수정할 것
 * ============================================================================
 */

/* ---------- 1. 이미지 ---------- */
figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}
figure.image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
    height: auto;
}
figure.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;
}
/* 크기 조절된 이미지 (style="width:…" 가 figure 또는 img 에 붙음) */
figure.image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}
figure.image.image_resized img {
    width: 100%;
}
figure.image.image_resized > figcaption {
    display: block;
}
img.image_resized {
    height: auto;
}
/* 글 중간(인라인) 이미지 */
span.image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}
span.image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}
/* 정렬: 옆으로(오른쪽 띄움) / 왼쪽·오른쪽 블록 정렬 */
.image-style-side {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
}
.image-style-align-left {
    float: left;
    margin-right: 1.5em;
}
.image-style-align-right {
    float: right;
    margin-left: 1.5em;
}
.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}
.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}
.image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}
p + .image-style-align-left,
p + .image-style-align-right,
p + .image-style-side {
    margin-top: 0;
}

/* ---------- 2. 표 ---------- */
figure.table {
    display: table;
    margin: 0.9em auto;
}
figure.table > table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double #b3b3b3;
}
figure.table > table td,
figure.table > table th {
    min-width: 2em;
    padding: 0.4em;
    border: 1px solid #bfbfbf;
}
figure.table > table th {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.05);
}
figure.table > figcaption {
    display: table-caption;
    caption-side: top;
    word-break: break-word;
    text-align: center;
    color: #333;
    background-color: #f7f7f7;
    padding: 0.6em;
    font-size: 0.75em;
}

/* ---------- 3. 미디어 (유튜브 등) ---------- */
figure.media {
    clear: both;
    margin: 0.9em 0;
    display: block;
    min-width: 15em;
}

/* ---------- 4. 본문 스타일 프리셋 (에디터 '스타일' 드롭다운) ---------- */
/* 안내 박스 (파랑) */
.ed-box-info {
    background: #eef5ff;
    border-left: 4px solid #3b82f6;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 1em 0;
}
/* 주의 박스 (주황) */
.ed-box-warn {
    background: #fff6e8;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 1em 0;
}
/* 강조 박스 (초록) */
.ed-box-success {
    background: #ecf9f0;
    border-left: 4px solid #22a55a;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 1em 0;
}
/* 회색 박스 */
.ed-box-gray {
    background: #f4f5f7;
    border: 1px solid #dfe1e6;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 1em 0;
}
/* 밑줄 제목 / 밑줄 소제목 */
.ed-title-line {
    padding-bottom: 8px;
    border-bottom: 2px solid #222;
    margin: 1.2em 0 0.8em;
}
h3.ed-title-line {
    border-bottom-width: 1px;
}
/* 형광펜 (글자 아래쪽 절반 노랑) */
.ed-mark {
    background: linear-gradient(transparent 55%, #fff176 55%);
}
/* 포인트 (빨강 굵게) */
.ed-point {
    color: #e53935;
    font-weight: bold;
}