@charset "utf-8";

/* ========================================================================
   1. 에디터 편집창 및 출력 영역(.ck-content) 공통 레이아웃
   ======================================================================== */
.ck-content {
    line-height: 1.6;
    word-break: break-all;
}

/* ========================================================================
   2. 테이블(Table) 서식 및 테두리선 복구 CSS
   ======================================================================== */
.ck-content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: auto;
    margin: 1.5em auto;
}

.ck-content table th,
.ck-content table td {
    border: 1px solid #bfbfbf;
    padding: .5em .7em;
    min-width: 2em;
    vertical-align: middle;
}

/* 테이블 헤더(제목 행) 배경색 고정 */
.ck-content table th {
    background: rgba(0, 0, 0, 0.04);
    font-weight: bold;
}

/* 테이블 정렬 및 드래그 가이드라인 지원 */
.ck-content .table-style-align-left {
    float: left;
    margin-right: 1.5em;
}
.ck-content .table-style-align-right {
    float: right;
    margin-left: 1.5em;
}
.ck-content .table-style-align-center {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* ========================================================================
   3. 이미지(Image) 배치 및 정렬 스타일 CSS
   ======================================================================== */
.ck-content .image {
    display: block;
    clear: both;
    text-align: center;
    margin: 1em auto;
}

/* 인라인 이미지 (텍스트와 줄바꿈 없이 섞이는 모드) */
.ck-content .image-inline {
    display: inline-block;
    max-width: 100%;
}

/* 블록 이미지 왼쪽/오른쪽/가운데 정렬 */
.ck-content .image-style-block-align-left,
.ck-content .image-style-align-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.ck-content .image-style-block-align-right,
.ck-content .image-style-align-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.ck-content .image-style-block-align-center,
.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* 사이드 이미지 배치 (텍스트가 옆으로 흐름) */
.ck-content .image-style-side {
    float: right;
    max-width: 50%;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* 이미지 아래 캡션(설명글) 스타일 */
.ck-content .image > figcaption {
    display: block;
    caption-side: bottom;
    padding-top: .4em;
    font-size: .9em;
    color: #555;
    text-align: center;
    word-break: break-word;
}

/* ========================================================================
   4. Float 해제 (Layout 깨짐 방지 필수 처리)
   ======================================================================== */
.ck-content::after,
.ck-content p::after,
.ck-content div::after {
    content: "";
    display: table;
    clear: both;
}