@charset "utf-8";

/*-------------------------------------------------------------------
    CKEditor 로 쓴 본문을 프론트에서 보여줄 때 쓰는 규칙.

    여기서는 CKEditor 5 의 기본 표시 규칙 중 프론트에 필요한 것만 옮겨 적는다.
    퍼블 파일(app.css)은 건드리지 않는다.

    적용 대상
      .smr-board-detail__desc  : 재단소식 · 공지사항 · 재정보고 상세
      .smr-accordion__panel    : FAQ 답변
      .SMR_FP01_003__desc      : 연혁 내용
-------------------------------------------------------------------*/

/* ===== 이미지 ===== */

/*
    CKEditor 의 블록 이미지는 <figure class="image"> 로 저장된다.
*/
.smr-board-detail__desc figure.image,
.smr-accordion__panel figure.image,
.SMR_FP01_003__desc figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    max-width: 100%;
}

.smr-board-detail__desc figure.image img,
.smr-accordion__panel figure.image img,
.SMR_FP01_003__desc figure.image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* 에디터에서 크기를 조절한 이미지 - figure 에 width 가 인라인으로 붙는다 */
.smr-board-detail__desc figure.image_resized,
.smr-accordion__panel figure.image_resized,
.SMR_FP01_003__desc figure.image_resized {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
}

.smr-board-detail__desc figure.image_resized img,
.smr-accordion__panel figure.image_resized img,
.SMR_FP01_003__desc figure.image_resized img {
    width: 100%;
}

/* 정렬을 직접 고른 경우 */
.smr-board-detail__desc figure.image-style-align-center,
.smr-accordion__panel figure.image-style-align-center,
.SMR_FP01_003__desc figure.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

.smr-board-detail__desc figure.image-style-align-left,
.smr-accordion__panel figure.image-style-align-left,
.SMR_FP01_003__desc figure.image-style-align-left {
    float: left;
    margin: 0.9em 1.5em 0.9em 0;
    max-width: 50%;
}

.smr-board-detail__desc figure.image-style-align-right,
.smr-accordion__panel figure.image-style-align-right,
.SMR_FP01_003__desc figure.image-style-align-right,
.smr-board-detail__desc figure.image-style-side,
.smr-accordion__panel figure.image-style-side,
.SMR_FP01_003__desc figure.image-style-side {
    float: right;
    margin: 0.9em 0 0.9em 1.5em;
    max-width: 50%;
}

/* 글 사이에 끼워 넣은 이미지 */
.smr-board-detail__desc .image-inline,
.smr-accordion__panel .image-inline,
.SMR_FP01_003__desc .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

.smr-board-detail__desc .image-inline img,
.smr-accordion__panel .image-inline img,
.SMR_FP01_003__desc .image-inline img {
    max-width: 100%;
    height: auto;
}

/* 이미지 설명 */
.smr-board-detail__desc figure.image > figcaption,
.smr-accordion__panel figure.image > figcaption,
.SMR_FP01_003__desc figure.image > figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0.6em;
    font-size: 0.85em;
    color: #666;
    text-align: center;
    background-color: #f7f7f7;
}

/* 좌우 정렬 이미지가 다음 문단을 침범하지 않게 */
.smr-board-detail__desc::after,
.smr-accordion__panel::after,
.SMR_FP01_003__desc::after {
    content: "";
    display: block;
    clear: both;
}

/* ===== 동영상 삽입 ===== */

.smr-board-detail__desc figure.media,
.smr-accordion__panel figure.media,
.SMR_FP01_003__desc figure.media {
    clear: both;
    display: block;
    margin: 0.9em 0;
}

.smr-board-detail__desc figure.media .ck-media__wrapper,
.smr-accordion__panel figure.media .ck-media__wrapper,
.SMR_FP01_003__desc figure.media .ck-media__wrapper {
    position: relative;
}

.smr-board-detail__desc iframe,
.smr-accordion__panel iframe,
.SMR_FP01_003__desc iframe {
    max-width: 100%;
}