/*
 * magogo_editor 로 쓴 글의 본문 모양 (글 보기 화면 + 에디터 안 공통)
 * 글 보기 화면에서는 extend/magogo_editor.extend.php 가 이 파일을 불러온다.
 */
.board-view-con figure.image, #bo_v_con figure.image, .ck-content figure.image {
    display: table; clear: both;
    margin: 1em auto; max-width: 100%;
    text-align: center;
}
.board-view-con figure.image img, #bo_v_con figure.image img, .ck-content figure.image img {
    display: block; margin: 0 auto;
    max-width: 100%; height: auto;
}
.board-view-con figure.image figcaption, #bo_v_con figure.image figcaption {
    display: table-caption; caption-side: bottom;
    padding: .6em; color: #777; font-size: .875em; text-align: center;
}
.board-view-con figure.table, #bo_v_con figure.table { display: table; margin: 1em auto; max-width: 100%; overflow-x: auto; }
.board-view-con figure.table table, #bo_v_con figure.table table { border-collapse: collapse; border: 1px solid #bfbfbf; }
.board-view-con figure.table td, .board-view-con figure.table th,
#bo_v_con figure.table td, #bo_v_con figure.table th { border: 1px solid #bfbfbf; padding: .4em .6em; min-width: 2em; }
.board-view-con figure.media, #bo_v_con figure.media { display: block; margin: 1em 0; clear: both; }
.board-view-con figure.media iframe, #bo_v_con figure.media iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
/* 글 보기 필터(HTMLPurifier)가 position 스타일을 지워서, 에디터가 넣은 16:9 상자(padding-bottom + height:0)와 iframe 의 height:100% 가 0 높이가 됨 → 상자는 풀고 iframe 비율로 크기를 정함 (유튜브·회원 동영상 공통) */
.board-view-con figure.media div[style], #bo_v_con figure.media div[style] { padding-bottom: 0 !important; height: auto !important; }
.board-view-con figure.media iframe, #bo_v_con figure.media iframe { height: auto !important; }
.board-view-con blockquote, #bo_v_con blockquote, .ck-content blockquote {
    margin: 1.2em 0; padding: .3em 1.2em;
    border-left: 4px solid #d0d5dc;
    color: #555; font-style: normal;
}
.board-view-con hr, #bo_v_con hr, .ck-content hr {
    height: 0; border: 0; border-top: 1px solid #ddd;
    margin: 1.6em 0; background: none;
}

/* 스티커(이모지/토끼/양파 등): 64x64 상자 안에서 비율 유지. 새로 넣은 스티커는 width/height 속성으로 이미 맞춰져 있고,
   속성이 없는 예전 글의 스티커는 src 경로(/stickers/, /emoticon/)를 기준으로 64x64 상자(contain)에 맞춘다. */
.board-view-con img[src*="/magogo_editor/stickers/"], #bo_v_con img[src*="/magogo_editor/stickers/"], .ck-content img[src*="/magogo_editor/stickers/"],
.board-view-con img[src*="/emoticon/"], #bo_v_con img[src*="/emoticon/"], .ck-content img[src*="/emoticon/"] {
    max-width: 64px; max-height: 64px; vertical-align: middle;
}
.board-view-con img[src*="/magogo_editor/stickers/"]:not([width]), #bo_v_con img[src*="/magogo_editor/stickers/"]:not([width]), .ck-content img[src*="/magogo_editor/stickers/"]:not([width]),
.board-view-con img[src*="/emoticon/"]:not([width]), #bo_v_con img[src*="/emoticon/"]:not([width]), .ck-content img[src*="/emoticon/"]:not([width]) {
    width: 64px; height: 64px; object-fit: contain;   /* 속성이 없으면 64x64 상자에 비율 유지 */
}

/* ===== 다크모드 (body.dark-mode): 글 보기/에디터 본문의 인용구·구분선·표 색. 글자색 자체는 사이트(body)를 따른다 ===== */
body.dark-mode .board-view-con blockquote, body.dark-mode #bo_v_con blockquote, body.dark-mode .ck-content blockquote { border-left-color: #30363d; color: #9a9a9a; }
body.dark-mode .board-view-con hr, body.dark-mode #bo_v_con hr, body.dark-mode .ck-content hr { border-top-color: #30363d; }
body.dark-mode .board-view-con figure.table table, body.dark-mode #bo_v_con figure.table table,
body.dark-mode .board-view-con figure.table td, body.dark-mode .board-view-con figure.table th,
body.dark-mode #bo_v_con figure.table td, body.dark-mode #bo_v_con figure.table th,
body.dark-mode .ck-content table, body.dark-mode .ck-content table td, body.dark-mode .ck-content table th { border-color: #30363d; }
body.dark-mode .board-view-con figure.image figcaption, body.dark-mode #bo_v_con figure.image figcaption { color: #6e7681; }
/* 동영상 설명 줄: 에디터 [설명] 버튼이 영상 바로 아래에 넣는 <p class="mge-vcap"> (사진 설명과 같은 모양) */
.board-view-con p.mge-vcap, #bo_v_con p.mge-vcap, .ck-content p.mge-vcap {
    margin: -.4em 0 1em; padding: .2em .6em; color: #777; font-size: .875em; text-align: center;
}
body.dark-mode .board-view-con p.mge-vcap, body.dark-mode #bo_v_con p.mge-vcap, body.dark-mode .ck-content p.mge-vcap { color: #6e7681; }

/* 다크모드: 배경이 불투명한 GIF 스티커(양파/토끼, src 에 /emoticon/ 포함)를 "스티커 카드"로. 이미지 파일은 그대로, 크기는 기존 64x64 상자 안(border-box)에서 유지.
   이모지 PNG(/magogo_editor/stickers/)는 이미 투명 배경이라 카드 없이 그대로 */
body.dark-mode .board-view-con img[src*="/emoticon/"], body.dark-mode #bo_v_con img[src*="/emoticon/"], body.dark-mode .ck-content img[src*="/emoticon/"] {
    box-sizing: border-box; padding: 2px; object-fit: contain;
    background: #f2f2f2; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px;
}
/* 회원 동영상(Cloudflare Stream): extend/magogo_editor.extend.php 가 iframe 을 감싼 상자를 .mg-stream 으로 바꿔 줌 → 16:9 로 고정 */
.mg-stream, .board-view-con figure.media div.mg-stream, #bo_v_con figure.media div.mg-stream {
    position: relative !important; display: block; width: 100%; max-width: 100%;
    height: auto !important; padding-bottom: 0 !important; aspect-ratio: 16 / 9; margin: 1em 0;
}
.mg-stream iframe, .board-view-con figure.media .mg-stream iframe, #bo_v_con figure.media .mg-stream iframe {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
    aspect-ratio: auto; border: 0; display: block;
}
/* 감싸는 상자 없이 iframe 만 있는 경우 */
.board-view-con iframe[src*="videodelivery.net"], .board-view-con iframe[src*="cloudflarestream.com"] { max-width: 100%; }