@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: 0.35em 0 !important;
}

/* 문단 첫/마지막 과한 여백 정리 */
.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 글보기 폭 */
}



/* =========================================================
   최상위 CKEditor 영역 오버플로우 방어 (읽기 모드 전용)
   ========================================================= */
#qna_view_modal .ck-editor__editable, #notice_view_modal .ck-editor__editable,
	#diary_view_modal .ck-editor__editable, .ck-editor_read-only {
	overflow-x: hidden !important;
	overflow-y: visible !important;
	max-width: 100% !important;
}

/* =========================================================
   읽기 전용 표(Table) 좌우 스크롤 허용 & 입력 포맷(테두리 등) 강제 유지
   ========================================================= */
.ck-content figure.table {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	/* ⚠️ overflow-x:auto 설정 시 CSS 스펙상 overflow-y가 auto로 변경되어
	   세로 스크롤바가 발생하므로, hidden으로 명시하여 방지 */
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	margin: 0 0 1em 0 !important;
}

.ck-content figure.table>table:not([style*="border"]), .ck-content table:not([style*="border"])
	{
	max-width: none !important;
	min-width: 100% !important;
	width: 100% !important;
	border-collapse: collapse;
	border: 1px double #b3b3b3;
}

.ck-content figure.table>table {
	max-width: none !important;
	min-width: 100% !important;
	width: 100% !important;
	border-collapse: collapse;
}

.ck-content figure.table table td:not([style*="border"]), .ck-content figure.table table th:not([style*="border"]),
	.ck-content table td:not([style*="border"]), .ck-content table th:not([style*="border"])
	{
	padding: 0.4em 0.8em;
	border: 1px solid #bfbfbf;
}

.ck-content figure.table table td, .ck-content figure.table table th {
	word-break: keep-all !important;
	padding: 0.4em 0.8em;
}

@media ( max-width : 767px) {
	.ck-read-only figure.table table td, .ck-read-only figure.table table th,
		#qna_view_modal figure.table table td, #qna_view_modal figure.table table th,
		#notice_view_modal figure.table table td, #notice_view_modal figure.table table th,
		#diary_view_modal figure.table table td, #diary_view_modal figure.table table th,
		#detail figure.table table td, #detail figure.table table th, #policy figure.table table td,
		#policy figure.table table th, #bdcom_view_page figure.table table td,
		#bdcom_view_page figure.table table th {
		white-space: nowrap !important;
		min-width: max-content !important;
	}
}

/* 부모 외곽선 UI 강제 숨김 (읽기 모드) */
#qna_view_modal .ck-widget, #notice_view_modal .ck-widget,
	#diary_view_modal .ck-widget, .ck-editor_read-only .ck-widget {
	outline: none !important;
	box-shadow: none !important;
}

#qna_view_modal .ck-widget__selection-handle, #notice_view_modal .ck-widget__selection-handle,
	#diary_view_modal .ck-widget__selection-handle, .ck-read-only .ck-widget__selection-handle
	{
	display: none !important;
}

/* =========================================================
   부트스트랩 .table 클래스 충돌 방지
   - CKEditor5 <figure class="table"> 내부 테이블에
     부트스트랩 .table CSS의 tr/td 효과가 적용되지 않도록 합니다.
   ========================================================= */
.ck-content figure.table>table>tbody>tr, .ck-content figure.table>table>thead>tr,
	.ck-content figure.table>table>tfoot>tr, .ck-content figure.table>table>tr
	{
	/* 부트스트랩에서 tr에 적용된 하단선 및 그림자 초기화 */
	border-bottom-width: 0 !important;
	box-shadow: none !important;
	background-color: transparent;
}

/* 부트스트랩과 무관하게 td/th 속성 명확히 (인라인 스타일 우선) */
.ck-content figure.table table td, .ck-content figure.table table th,
	.ck-content table td, .ck-content table th {
	border-bottom-width: 1px; /* 부트스트랩 초기화 회피 */
}

/* =========================================================
   읽기 모드(readonly) 위젯 UI 관련 완전 처리 숨김
   ========================================================= */
.ck-read-only .ck-widget__selection-handle, .ck-read-only .ck-widget__type-around,
	.ck-read-only .ck-widget__resizer, #qna_view_modal .ck-widget__selection-handle,
	#qna_view_modal .ck-widget__type-around, #qna_view_modal .ck-widget__resizer
	{
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   위젯 UI(외곽 사각형 테두리) 근본적 완전 제거
   - 읽기 전용 상황에서만 위젯 선택 보호용 가상요소가 의도하지 않는
     의사 클래스(::before/::after)를 매칭해 테두리 등 UI 잔상을 파괴합니다.
   ========================================================= */
#qna_view_modal .ck-widget::before, #qna_view_modal .ck-widget::after,
	.ck-read-only .ck-widget::before, .ck-read-only .ck-widget::after {
	display: none !important;
	content: none !important;
}

#qna_view_modal [class*="ck-widget__"], .ck-read-only [class*="ck-widget__"]
	{
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#qna_view_modal [class*="ck-table-column-resizer"], .ck-read-only [class*="ck-table-column-resizer"],
	#qna_view_modal [class*="ck-table-row-resizer"], .ck-read-only [class*="ck-table-row-resizer"]
	{
	display: none !important;
}

/* 사용자 요청: 테이블 테두리는 유지하되 모바일 스와이프/가로스크롤바 숨김 완벽 적용 */
.ck-read-only figure.table {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
	padding: 0 !important;
}

.ck-read-only figure.table::-webkit-scrollbar {
	display: none !important;
}

/* =========================================================
   모달 내부 CKEditor 읽기전용 표(Table) - 반응형 가로 스크롤
   대상: #qna_view_modal, #notice_view_modal, #diary_view_modal
   - 표가 화면에 들어오면 그냥 100%로 표시
   - 표가 모달보다 넓으면 figure.table 안에서만 좌우 스크롤
   - 모달/화면 전체가 좌우로 밀리지 않도록 overflow-x:hidden
   ========================================================= */

/* 모달 본문의 가로 스크롤 방지 (표만 움직이게) */
#qna_view_modal .modal-body, #notice_view_modal .modal-body,
	#diary_view_modal .modal-body {
	overflow-x: hidden !important;
}

/* figure.table = 스크롤 컨테이너 */
#qna_view_modal figure.table, #notice_view_modal figure.table,
	#diary_view_modal figure.table {
	display: block !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

/* 스크롤바 시각적으로 숨김 */
#qna_view_modal figure.table::-webkit-scrollbar, #notice_view_modal figure.table::-webkit-scrollbar,
	#diary_view_modal figure.table::-webkit-scrollbar {
	display: none !important;
}

/* 표: 내용이 넓으면 컨테이너를 넘어가도록 허용 */
#qna_view_modal figure.table>table, #notice_view_modal figure.table>table,
	#diary_view_modal figure.table>table {
	min-width: max-content !important;
	max-width: none !important;
	table-layout: auto;
	border: 0 !important;
}

#qna_view_modal figure.table table td, #qna_view_modal figure.table table th,
	#notice_view_modal figure.table table td, #notice_view_modal figure.table table th,
	#diary_view_modal figure.table table td, #diary_view_modal figure.table table th
	{
	word-break: keep-all;
}

/* =========================================================
   [v2] QnA Modal: Raw HTML display with table scroll
   - PC: table fills container, cells wrap normally
   - Mobile: cells nowrap, table scrolls horizontally
   ========================================================= */
#qna_view_modal .qna-view-content {
	padding: 0.5em 0;
	line-height: 1.7;
	font-size: 17px;
	font-family: "Nanum Gothic", "Malgun Gothic", Arial, sans-serif;
	overflow-y: visible !important;
	overflow-x: hidden !important;
	background: transparent !important;
}

#qna_view_modal .qna-view-content img {
	max-width: 100%;
	height: auto;
}

#qna_view_modal .qna-view-content figure.table {
	display: block !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
	margin: 0 0 1em 0;
}

#qna_view_modal .qna-view-content figure.table::-webkit-scrollbar {
	display: none !important;
}
/* PC: min-width prevents squeezing, table can fill container */
#qna_view_modal .qna-view-content figure.table>table {
	min-width: max-content !important;
	max-width: none !important;
	table-layout: auto;
}

#qna_view_modal .qna-view-content figure.table table td, #qna_view_modal .qna-view-content figure.table table th
	{
	word-break: keep-all;
}

#qna_view_modal .qna-view-content figure.table table td:not([style*="border"]),
	#qna_view_modal .qna-view-content figure.table table th:not([style*="border"])
	{
	border: 1px solid #bfbfbf;
}
/* Mobile: force nowrap so table scrolls horizontally */
@media ( max-width : 767px) {
	#qna_view_modal .qna-view-content figure.table table td, #qna_view_modal .qna-view-content figure.table table th
		{
		white-space: nowrap !important;
	}
}

/* PC: figure.table padding -> 0 for read-only mode */
.ck-read-only figure.table, .qna-view-content figure.table,
	#qna_view_modal figure.table, #notice_view_modal figure.table,
	#diary_view_modal figure.table, #bdcom_view_page figure.table, #detail figure.table,
	#policy figure.table {
	padding: 0 !important;
}