@charset "utf-8";
/* ============================================================================
   에디터 본문 스타일 (게시판 상세 / 공지사항)
   ----------------------------------------------------------------------------
   목적 : 관리자 CKEditor 편집화면(/board/editor/ckeditor42/contents.css)에서
          보이던 모양 그대로 프론트에서도 출력되게 한다.

   적용 스코프
     #p_wrap            → /board/view.php  (게시판 상세)
     .boardViewTable    → /customer/notice_view.html 등 직접 출력하는 페이지

   프론트에서 본문이 깨지던 원인
     1) .galleryWrap ul {display:grid; grid-template-columns:repeat(4,1fr)}
        (customer.css) → board/top.html 의 galleryWrap 이 상세페이지까지 감싸서
        본문 <ul> 이 4칸 그리드로 깔림.  ⇒ 목록이 가로로 퍼짐
     2) .board_ebi ul {list-style:none !important; padding:0 !important}
        (board_responsive_web_V02_01.css) ⇒ 불릿·들여쓰기 사라짐
     3) .d-page table/th/td {border:0} (common.css)
        ⇒ <table border="1"> 테두리 사라짐
     4) p {margin:0 !important} / .board_ebi .view_normal_con * {margin-bottom:20px}
        ⇒ 문단 간격이 편집기와 달라짐

   원칙 : !important 는 위 !important 규칙을 되돌리는 최소한만 사용.
          에디터가 넣은 인라인 스타일(width·배경·정렬·글자크기)은 항상 우선.
   ============================================================================ */

:root{
	--editor-table-border:gray;   /* <table border="1"> 이 편집기에서 보이는 색 */
	--editor-cell-padding:1px;    /* cellpadding="1" 과 동일. 넉넉하게 하려면 6px 8px */
	--editor-link:#0782C1;
}

/* ---------------------------------------------------------------- 본문 기준 */
#p_wrap,
.boardViewTable{
	font-size:15px;      /* CKEditor .cke_editable 과 동일 */
	line-height:1.6;
	color:#333;
	word-wrap:break-word;
}

/* .board_ebi .view_normal_con * {margin-bottom:20px} 무력화
   (모든 요소에 20px 이 붙어 편집기와 간격이 달라짐) */
#p_wrap *{margin-bottom:0;}

/* .galleryWrap li:hover 효과가 본문으로 새는 것 차단 */
#p_wrap li:hover img{transform:none;}

/* ------------------------------------------------------------ 문단 / 제목 */
/* p {margin:0 !important} 전역 규칙을 본문에서만 되돌림 */
#p_wrap p,
.boardViewTable p{margin:1em 0 !important;}
#p_wrap table p,
.boardViewTable table p{margin:0 !important;}

#p_wrap h1, #p_wrap h2, #p_wrap h3, #p_wrap h4, #p_wrap h5, #p_wrap h6,
.boardViewTable h1, .boardViewTable h2, .boardViewTable h3,
.boardViewTable h4, .boardViewTable h5, .boardViewTable h6{
	font-weight:normal;  /* contents.css 와 동일. 굵게 쓰려면 이 줄 삭제 */
	line-height:1.2;
}
#p_wrap h1, .boardViewTable h1{font-size:2em;    margin:.67em 0;}
#p_wrap h2, .boardViewTable h2{font-size:1.5em;  margin:.83em 0;}
#p_wrap h3, .boardViewTable h3{font-size:1.17em; margin:1em 0;}
#p_wrap h4, .boardViewTable h4{font-size:1em;    margin:1.33em 0;}
#p_wrap h5, .boardViewTable h5{font-size:.83em;  margin:1.67em 0;}
#p_wrap h6, .boardViewTable h6{font-size:.67em;  margin:2.33em 0;}

/* --------------------------------------------------------------- 목록(불릿) */
/* display:block → galleryWrap 의 grid 해제 / !important → .board_ebi ul 해제 */
#p_wrap ul, #p_wrap ol,
.boardViewTable ul, .boardViewTable ol{
	display:block;
	margin:1em 0;
	padding:0 40px !important;   /* contents.css 와 동일 */
	gap:normal;
}
/* 에디터에서 불릿 모양을 직접 지정한 경우(인라인 style)는 건드리지 않음 */
#p_wrap ul:not([style*="list-style"]),
.boardViewTable ul:not([style*="list-style"]){list-style:disc outside !important;}
#p_wrap ol:not([style*="list-style"]),
.boardViewTable ol:not([style*="list-style"]){list-style:decimal outside !important;}
#p_wrap li, .boardViewTable li{
	display:list-item;
	list-style:inherit;
	margin:0;
	padding:0;
	width:auto;
	float:none;
}
#p_wrap ul ul, .boardViewTable ul ul{list-style-type:circle !important;}
#p_wrap ul ul ul, .boardViewTable ul ul ul{list-style-type:square !important;}
#p_wrap ol ol, .boardViewTable ol ol{list-style-type:lower-alpha !important;}
#p_wrap li>ul, #p_wrap li>ol,
.boardViewTable li>ul, .boardViewTable li>ol{margin:0;}

#p_wrap dl, .boardViewTable dl{margin:1em 0;}
#p_wrap dd, .boardViewTable dd{margin-left:40px;}

/* ------------------------------------------------------------------- 표 */
#p_wrap table, .boardViewTable table{
	border-collapse:collapse;
	border-spacing:0;
}
/* border="1" 등 테두리 있는 표 : .d-page td{border:0} 에 지워진 선 복원 */
#p_wrap table[border]:not([border="0"]),
.boardViewTable table[border]:not([border="0"]){
	border:1px solid var(--editor-table-border);
}
#p_wrap table[border]:not([border="0"]) th,
#p_wrap table[border]:not([border="0"]) td,
.boardViewTable table[border]:not([border="0"]) th,
.boardViewTable table[border]:not([border="0"]) td{
	border:1px solid var(--editor-table-border);
}
#p_wrap th, #p_wrap td,
.boardViewTable th, .boardViewTable td{
	padding:var(--editor-cell-padding);   /* cellpadding 기본값과 동일 */
	vertical-align:middle;
}
#p_wrap th, .boardViewTable th{font-weight:bold; text-align:center;}
#p_wrap caption, .boardViewTable caption{display:table-caption; text-align:center;}

/* ------------------------------------------------------------ 인용 / 구분선 */
#p_wrap blockquote, .boardViewTable blockquote{
	font-style:italic;
	font-family:Georgia, Times, "Times New Roman", serif;
	margin:1em 40px;
	padding:2px 8px 2px 20px;
	border-left:5px solid #ccc;
}
#p_wrap pre, .boardViewTable pre{
	margin:1em 0;
	white-space:pre-wrap;
	word-wrap:break-word;
	-moz-tab-size:4; tab-size:4;
}
#p_wrap hr, .boardViewTable hr{
	border:0;
	border-top:1px solid #ccc;
	margin:1em auto;
}
#p_wrap a, .boardViewTable a{color:var(--editor-link);}
#p_wrap .marker, .boardViewTable .marker{background-color:Yellow;}

/* ------------------------------------------------------------------ 이미지 */
#p_wrap img, .boardViewTable img{max-width:100%; height:auto;}
#p_wrap figure, .boardViewTable figure{margin:10px 0; text-align:center;}
#p_wrap figure>figcaption, .boardViewTable figure>figcaption{display:block; text-align:center;}

/* ---------------------------------------------------------------- 모바일 */
@media screen and (max-width:767px){
	/* 표는 기존 규칙(.view_normal_con * {max-width:100%})으로 이미 축소되므로
	   overflow 처리는 하지 않는다. 목록 들여쓰기만 좁힘 */
	#p_wrap ul, #p_wrap ol,
	.boardViewTable ul, .boardViewTable ol{padding:0 20px !important;}
}