@charset "utf-8";
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
  칼럼 본문 꾸밈 (2026-08-07)
   · 편집기 안(#ck_wrap .ck-editor__editable)과 실제 글 화면(.view2 .article-body)에
     **같은 모양**으로 보이게 두 선택자를 한 줄에 같이 적는다. 한쪽만 고치면 화면이 어긋난다.
   · 편집기 툴바의 [스타일] 목록에서 고르면 이 class 가 붙는다 (board/form.php 의 style.definitions).
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/* 강조 박스 — 안내·주의사항을 묶어 보여줄 때 */
.view2 .article-body p.cl-box,
#ck_wrap .ck-editor__editable p.cl-box{
	background:#f6f9fc; border:1px solid #e2e8f2; border-left:4px solid #3e63be;
	border-radius:8px; padding:16px 18px; margin:24px 0; color:#374151;
}

/* 포인트 문장 — 한 줄짜리 결론을 굵고 크게 */
.view2 .article-body p.cl-point,
#ck_wrap .ck-editor__editable p.cl-point{
	font-weight:700; color:#1f3566; font-size:19px !important; line-height:1.7;
	margin:26px 0; padding-left:14px; border-left:4px solid #ffd964;
}
.view2 .article-body p.cl-point span,
.view2 .article-body p.cl-point strong{font-size:19px !important;}

/* 요약 카드 — 글 맨 앞/뒤의 '핵심만 3줄' 용도 */
.view2 .article-body blockquote.cl-summary,
#ck_wrap .ck-editor__editable blockquote.cl-summary{
	background:#fffdf3; border:1px solid #f2e2b0; border-left:4px solid #e0b52c;
	border-radius:10px; padding:18px 20px; margin:28px 0; color:#4b4321;
}

/* 노란 형광펜 */
.view2 .article-body span.cl-mark,
#ck_wrap .ck-editor__editable span.cl-mark{
	background:linear-gradient(transparent 55%, #ffe888 55%); padding:0 2px; font-weight:600;
}

/* 줄무늬 표 — 행이 많은 표를 읽기 쉽게 */
.view2 .article-body table.cl-striped tr:nth-child(even) td,
#ck_wrap .ck-editor__editable table.cl-striped tr:nth-child(even) td{background:#f7f9fd;}
.view2 .article-body table.cl-striped th,
#ck_wrap .ck-editor__editable table.cl-striped th{background:#eef2f9;}

/* 편집기 안에서도 완성본과 비슷하게 보이도록 기본 요소 맞추기
   ⚠ 사이트 공통 CSS 가 이 영역을 가운데정렬로 만들어 제목·표가 가운데로 몰린다 → 왼쪽정렬로 되돌린다 */
#ck_wrap .ck-editor__editable{text-align:left;}
/* 사이트 공통 CSS 가 목록의 점·번호를 지워버려 글머리표가 안 보였다 → 되살린다 (2026-08-07) */
.view2 .article-body ul,
#ck_wrap .ck-editor__editable ul{list-style:disc outside; padding-left:26px;}
.view2 .article-body ol,
#ck_wrap .ck-editor__editable ol{list-style:decimal outside; padding-left:28px;}
/* ⚠ 점·번호는 ul/ol 이 아니라 **li 자신**의 list-style-type 으로 그려진다.
      사이트 공통 CSS 가 li 에 list-style:none 을 걸어둬서 ul 만 고쳐서는 안 보인다. */
.view2 .article-body li,
#ck_wrap .ck-editor__editable li{display:list-item; margin:6px 0;}
.view2 .article-body ul > li,
#ck_wrap .ck-editor__editable ul > li{list-style-type:disc;}
.view2 .article-body ol > li,
#ck_wrap .ck-editor__editable ol > li{list-style-type:decimal;}
.view2 .article-body ul ul > li,
#ck_wrap .ck-editor__editable ul ul > li{list-style-type:circle;}
.view2 .article-body ul ul,
#ck_wrap .ck-editor__editable ul ul{list-style:circle outside;}

/* 사이트 공통 CSS 가 h2·h3 를 가운데정렬로 잡고 있어 제목만 가운데로 몰렸다 (2026-08-07) */
#ck_wrap .ck-editor__editable h2,
#ck_wrap .ck-editor__editable h3,
#ck_wrap .ck-editor__editable h4{text-align:left;}
#ck_wrap .ck-editor__editable figure.table{width:100%; margin:22px 0;}
#ck_wrap .ck-editor__editable figure.table table{width:100%;}
#ck_wrap .ck-editor__editable td,
#ck_wrap .ck-editor__editable th{padding:10px 12px;}
#ck_wrap .ck-editor__editable blockquote{
	margin:26px 0; padding:16px 20px; background:#f6f9fc; border-left:4px solid #4a7fd4; color:#333;
}
#ck_wrap .ck-editor__editable table th{background:#f2f5f9; font-weight:700;}
#ck_wrap .ck-editor__editable hr{border:none; border-top:1px solid #e6e9ee; margin:34px 0;}
#ck_wrap .ck-editor__editable figure.image figcaption{font-size:14px; color:#7a828c; text-align:center;}

@media all and (max-width:768px){
	.view2 .article-body p.cl-point,
	#ck_wrap .ck-editor__editable p.cl-point{font-size:17px !important;}
	.view2 .article-body p.cl-point span,
	.view2 .article-body p.cl-point strong{font-size:17px !important;}
}

/*〓 [2026-08-07] 줄·문단 간격과 굵기 대비 — 편집 화면도 글 화면과 같게 〓〓〓〓〓〓〓〓〓〓〓〓*/
#ck_wrap .ck-editor__editable{line-height:1.75; color:#3a4048; font-weight:400;}
#ck_wrap .ck-editor__editable p{margin:0 0 13px;}
#ck_wrap .ck-editor__editable h2{margin:38px 0 14px; font-weight:800;}
#ck_wrap .ck-editor__editable h3{margin:28px 0 10px; font-weight:800;}
#ck_wrap .ck-editor__editable strong,
#ck_wrap .ck-editor__editable b{font-weight:800; color:#111827;}
#ck_wrap .ck-editor__editable ul,
#ck_wrap .ck-editor__editable ol{margin:0 0 14px;}
#ck_wrap .ck-editor__editable li{margin:4px 0;}#ck_wrap .ck-editor__editable hr{margin:20px 0;}
#ck_wrap .ck-editor__editable hr + h2{margin-top:16px;}
#ck_wrap .ck-editor__editable hr + h3{margin-top:12px;}
/*〓 [2026-08-07] 편집기 안 제목·구분선 여백 정리 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   사이트 공통 CSS 가 h2 에 위아래 padding 50px 을 주고 있어(섹션 제목용) 편집기 안에서
   제목 한 줄이 147px 를 차지했다 — 제목 위아래가 텅 비어 보이던 진짜 원인.
   구분선도 위젯 상자(.ck-horizontal-line) 안의 hr 여백 때문에 44px 를 먹는다.            */
#ck_wrap .ck-editor__editable h2,
#ck_wrap .ck-editor__editable h3,
#ck_wrap .ck-editor__editable h4{padding:0 !important; line-height:1.35 !important;}
#ck_wrap .ck-editor__editable h2{margin:26px 0 10px !important;}
#ck_wrap .ck-editor__editable h3{margin:20px 0 8px !important;}
#ck_wrap .ck-editor__editable .ck-horizontal-line{margin:12px 0;}
#ck_wrap .ck-editor__editable .ck-horizontal-line hr{margin:0;}