@charset "utf-8";
/*
 * 게시글 본문 공통 스타일 (화면 + CKEditor 편집창 공용)
 * - 화면: head.sub.php 에서 마지막에 로드. 게시판 스킨의 #bo_v_con 영역에 적용.
 * - 편집창: plugin/editor/ckeditor4/editor.lib.php 의 contentsCss 로 로드되고
 *           bodyId 가 bo_v_con 이므로 같은 규칙이 편집 중에도 그대로 적용된다.
 * - inc.css 의 전역 리셋(strong/em/li/hr/keep-all 등)을 본문 영역에서만 되돌린다.
 * - 규칙은 body #bo_v_con 으로 써서 스킨 CSS(#bo_v_con) 보다 우선한다.
 */

body #bo_v_con {
    font-family: var(--font-pretendard, 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif);
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    word-break: normal;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
/* inc.css 가 span/div/p 에 keep-all 을 걸어   로 이어진 문장이 줄바꿈되지 않는 것을 되돌림 */
body #bo_v_con * {
    word-break: normal !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    max-width: 100%;
}
body #bo_v_con p { margin: 0; padding: 0; }

/* 굵게 / 기울임 / 밑줄 / 취소선 */
body #bo_v_con strong, body #bo_v_con b { font-weight: 700 !important; }
body #bo_v_con em, body #bo_v_con i { font-style: italic !important; }
body #bo_v_con u { text-decoration: underline; }
body #bo_v_con s, body #bo_v_con strike, body #bo_v_con del { text-decoration: line-through; }
body #bo_v_con sup { vertical-align: super; font-size: .75em; }
body #bo_v_con sub { vertical-align: sub; font-size: .75em; }

/* 제목 (에디터 '문단 형식') */
body #bo_v_con h1, body #bo_v_con h2, body #bo_v_con h3,
body #bo_v_con h4, body #bo_v_con h5, body #bo_v_con h6 { font-weight: 700; line-height: 1.35; margin: .8em 0 .4em; color: #222; }
body #bo_v_con h1 { font-size: 2em; }
body #bo_v_con h2 { font-size: 1.6em; }
body #bo_v_con h3 { font-size: 1.35em; }
body #bo_v_con h4 { font-size: 1.15em; }
body #bo_v_con h5 { font-size: 1em; }
body #bo_v_con h6 { font-size: .9em; }

/* 구분선 (default.css 의 hr{display:none} 되돌림) */
body #bo_v_con hr { display: block; height: 0; border: 0; border-top: 1px solid #ddd; margin: 18px 0; }

/* 목록 */
body #bo_v_con ul, body #bo_v_con ol { display: block; margin: 6px 0 10px; padding-left: 28px; }
body #bo_v_con ul { list-style-type: disc; }
body #bo_v_con ol { list-style-type: decimal; }
body #bo_v_con ul ul { list-style-type: circle; }
body #bo_v_con ol ol { list-style-type: lower-alpha; }
body #bo_v_con li { display: list-item; list-style: inherit; margin: 2px 0; }

/* 인용 */
body #bo_v_con blockquote { margin: 12px 0; padding: 10px 16px; border-left: 4px solid #cfd6e4; background: #f6f8fb; color: #555; }

/* 링크 */
body #bo_v_con a { color: #1a56b4; text-decoration: underline; }

/* 이미지·동영상 */
body #bo_v_con img { max-width: 100% !important; height: auto !important; vertical-align: middle; }
body #bo_v_con iframe, body #bo_v_con video, body #bo_v_con embed, body #bo_v_con object { max-width: 100%; }

/* 표: 에디터 기본 표(border=1, cellpadding) 가 inc.css 의 td padding:0 때문에 붙어 보이는 것 보정 */
body #bo_v_con table { max-width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto; margin: 8px 0; }
body #bo_v_con table[border] td, body #bo_v_con table[border] th,
body #bo_v_con table td[style*="border"], body #bo_v_con table th[style*="border"] { border: 1px solid #ccc; }
body #bo_v_con td, body #bo_v_con th { padding: 6px 10px; vertical-align: top; }
body #bo_v_con th { font-weight: 700; background: #f5f6f8; text-align: center; }
/* 출력 시 extend/hg_content.extend.php 가 표를 감싸는 가로 스크롤 상자 */
.hg_tbl_scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.hg_tbl_scroll > table { margin: 0; }

/* 유튜브 / 링크 미리보기 카드 (editor.lib.php 붙여넣기 기능이 만드는 마크업) */
.video-wrapper { width: 100%; height: 0; padding-top: 56.25%; background: #000; margin: 15px 0; display: block; position: relative; overflow: hidden; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.og-card-container { display: flex; border: 1px solid #e2e2e2; border-radius: 4px; overflow: hidden; margin: 15px 0; background: #fff; height: 120px; max-width: 600px; text-decoration: none; }
.og-card-thumb-link { width: 120px; min-width: 120px; height: 120px; display: block; background-size: cover; background-position: center; background-color: #f8f9fa; border-right: 1px solid #eee; }
.og-card-info { padding: 15px; flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; text-align: left; min-width: 0; }
.og-card-title-link { font-weight: 700; font-size: 16px; color: #000; text-decoration: none; display: block; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-card-desc { font-size: 13px; color: #888; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 코드 스니펫 */
body #bo_v_con pre { white-space: pre-wrap; overflow-x: auto; }

/* 반응형: 본문 기본 크기만 줄이고, 큰 글자는 출력 보정(min(px, vw))으로 화면 폭에 맞춰 줄어든다 */
@media (max-width: 768px) {
    body #bo_v_con { font-size: 15px; }
    body #bo_v_con td, body #bo_v_con th { padding: 5px 7px; }
    .og-card-container { height: auto; min-height: 100px; }
    .og-card-thumb-link { width: 100px; min-width: 100px; height: 100px; }
}
@media (max-width: 480px) {
    body #bo_v_con { font-size: 14px; }
}