@charset "UTF-8";

/* =========================
   bdckeditor.css
   - CKEditor 공통 스타일 (bdcom/bdhealth/bdcost/bddiary 공용)
   - 기존 common.css에 있던 CKEditor 스타일을 이 파일로 분리
   ========================= */

.ck.ck-editor__main>.ck-editor__editable {
	border-radius: var(--radius2);
	border-color: rgba(0, 0, 0, .12);
	min-height: 360px;
}

.ck.ck-editor__top {
	display: block !important;
}

.ck.ck-toolbar {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	min-height: 38px !important;
}

.ck.ck-toolbar * {
	visibility: visible !important;
}

.ck-sticky-panel {
	z-index: 10;
}

/* 상단에 가려질 때 */

.ck.ck-toolbar {
	border: 1px solid rgba(0, 0, 0, .12);
}

/* 에디터 내부의 인라인 이미지 스타일 */
.ck-content .image-inline {
	display: inline-block;
	margin-right: 10px;
	/* 이미지 사이 간격 */
	vertical-align: middle;
	/* 텍스트와의 수직 정렬 */
}

/* 이미지가 너무 커서 레이아웃을 깨뜨리지 않도록 제한 */
.ck-content .image-inline img {
	max-width: 100%;
	height: auto;
}

/* CKEditor 기본 side 스타일이 약할 때 보강 */
.ck-content .image-style-side {
	float: right;
	margin-left: 1rem;
	max-width: 50%;
}

/* =========================================================
   CKEditor 본문 폰트 자동 분기
   - PC(기본): 나눔고딕
   - 모바일:  맑은 고딕
   ========================================================= */

/* PC 기본: 나눔고딕 */
.ck-editor__editable_inline,
.ck-content {
	font-family: "Nanum Gothic", "나눔고딕", "Malgun Gothic", "맑은 고딕", Arial, sans-serif;
}

/* 모바일(예: 768px 이하): 맑은 고딕 우선 */
@media (max-width: 768px) {

	.ck-editor__editable_inline,
	.ck-content {
		font-family: "Malgun Gothic", "맑은 고딕", "Nanum Gothic", "나눔고딕", Arial, sans-serif;
	}
}

.ck-content h1 {
	font-size: 2.0rem;
	font-weight: 700;
	margin: .8rem 0 .5rem;
}

.ck-content h2 {
	font-size: 1.6rem;
	font-weight: 700;
	margin: .8rem 0 .5rem;
}

.ck-content h3 {
	font-size: 1.3rem;
	font-weight: 700;
	margin: .8rem 0 .5rem;
}

.ck-content h4 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: .7rem 0 .4rem;
}

.ck-content h5 {
	font-size: 1.0rem;
	font-weight: 700;
	margin: .6rem 0 .3rem;
}

.ck-content h6 {
	font-size: .95rem;
	font-weight: 700;
	margin: .6rem 0 .3rem;
}

/* CKEditor 편집영역 기본 글자 크기 */
.ck-content,
.ck-editor__editable,
.ck-editor__editable_inline {
	font-size: 17px !important;
	line-height: 1.65;
	/* 선택 */
}

/* =========================================================
   네이버 느낌 줄간격 핵심 보정
   ========================================================= */

/* 에디터 본문 기본 줄간격(전체) */
.ck-editor__editable,
.ck-editor__editable_inline,
.ck-content {
	line-height: 1.70 !important;
	/* 네이버 느낌: 1.65~1.80 */
}

/* 문단 간격(핵심): 한국형 게시판의 "엔터=줄바꿈" 느낌을 위해 p 마진을 조절 (원하는 간격 픽셀 입력) */
.ck-content p {
	margin: 10px 0 !important; /* 위아래로 10px 간격 (늘리거나 줄이세요) */
}

/* 문단 첫/마지막 과한 여백도 정리 */
.ck-content>p:first-child {
	margin-top: 0 !important;
}

.ck-content>p:last-child {
	margin-bottom: 0 !important;
}

/* 목록 안정화 */
.ck-content ul,
.ck-content ol {
	margin: 0.40em 0 0.40em 1.2em !important;
}

.ck-content li {
	margin: 0.15em 0 !important;
}

/* 표 주변 여백 */
.ck-editor__editable figure.table,
.ck-content figure.table {
	margin: 0;
	padding: 0.3rem 0.8rem 0.1rem;
	background: transparent;
}

/* 표 + 텍스트 윗줄 맞춤 */
.ck-editor__editable figure.table.ck-widget,
.ck-content figure.table.ck-widget {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* CKEditor 본문 줄 간격 */
.ck-editor__editable {
	line-height: 1.7;
}

/* PC */
@media (min-width: 768px) {
	.ck-editor__editable {
		line-height: 1.65;
	}
}

/* 모바일 */
@media (max-width: 767px) {
	.ck-editor__editable {
		line-height: 1.6;
	}
}

/* =========================================================
   표 전용 미니툴바 스타일
   ========================================================= */

.bdck-tablebar {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 6px 8px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(17, 24, 39, .10);
}

.bdck-tablebar .bdck-thint {
	font-size: 12px;
	color: rgba(0, 0, 0, .55);
	margin-right: 4px;
	white-space: nowrap;
}

.bdck-tablebar .bdck-tbtn {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, .14);
	background: #fff;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.2;
	cursor: pointer;
}

.bdck-tablebar .bdck-tbtn:hover {
	background: rgba(0, 0, 0, .03);
}

.bdck-tablebar .bdck-tbtn.is-active {
	border-color: rgba(0, 0, 0, .28);
	background: rgba(0, 0, 0, .06);
	font-weight: 700;
}

/* 표 크기 조절 팁 강조 버튼 */
.bdck-tablebar .bdck-tbtn.bdck-tbtn-guide {
	color: #0d6efd;
	border-color: #0d6efd;
	background-color: #f8f9fa;
	font-weight: 700;
	padding: 5px 12px;
	box-shadow: 0 2px 4px rgba(13, 110, 253, 0.15);
	transition: all 0.2s ease-in-out;
}

.bdck-tablebar .bdck-tbtn.bdck-tbtn-guide:hover {
	background-color: #0d6efd;
	color: #fff;
	box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
}

/* CKEditor 최소 가시성 보정 */

/* =========================================================
   본문편집기 글쓰기/글보기 공통 패딩 — 여기만 수정
   ========================================================= */
.ck.ck-editor__main>.ck-editor__editable {
	border-radius: var(--radius2);
	border-color: rgba(0, 0, 0, .12);
	padding: 20px 52px !important;
	/* 🔥 변경: PC 글쓰기 폭 축소 */
}

/* =========================================================
   글보기(view) padding 재확정 — 여기만 수정
   ========================================================= */
#editor_wrap .ck.ck-editor__main>.ck-editor__editable {
	padding: 20px 62px !important;
	/* 🔥 변경: PC 글보기 폭 동일하게 */
}

/* 모바일은 조금 줄이기 — 여기만 수정 */
@media (max-width: 767px) {
	.ck.ck-editor__main>.ck-editor__editable {
		padding: 14px 18px !important;
		/* 🔥 변경: 모바일 글쓰기 */
	}

	#editor_wrap .ck.ck-editor__main>.ck-editor__editable {
		padding: 14px 18px !important;
		/* 🔥 변경: 모바일 글보기 */
	}
}

/* =========================================================
   ✅ (추가) 좌우 여백 불균형(스크롤바) 보정
   - 우측 스크롤바가 생기면 가시 폭이 줄어 우측 여백이 좁아 보일 수 있음
   - scrollbar-gutter로 스크롤바 공간을 "항상 예약"하여 좌우 균형 유지
   ========================================================= */
.ck.ck-editor__main>.ck-editor__editable,
#editor_wrap .ck.ck-editor__main>.ck-editor__editable {
	overflow-y: auto;
	scrollbar-gutter: stable;
	/* ✅ 스크롤바 공간 고정 */
}