/*
 * CKEditor 5 content style (front view)
 * - 상품 상세설명 detailHtml 이 CKEditor 5 로 저장된 형태(figure.table / figure.image / blockquote 등)를
 *   view 페이지에서 정상 렌더링 하기 위한 최소 스타일.
 * - admin productDetail.js 에서 사용하는 CKEditor 5 default content style 과 호환.
 */

/* ===== 기본 컨테이너 ===== */
.ck-content {
	color: #333;
	font-size: 14px;
	line-height: 1.7;
	word-break: break-all;
}

.ck-content p {
	margin: 0 0 .8em;
}

/* ===== 표 ===== */
/*
 * 지원 형태:
 *   1) TinyMCE 6: <table style="border-collapse:collapse; width:100%" border="1">...</table>
 *   2) CKEditor 5: <figure class="table"><table>...</table></figure>
 * 두 형태 모두 ck-content 컨테이너 안에서 정상 렌더되도록 통합 셀렉터로 처리.
 */

/* figure.table wrapper (CKEditor) — block 으로 처리해 가로 100% 확보 */
.ck-content figure.table,
figure.table {
	margin: 1.2em 0;
	display: block;
	width: 100%;
	overflow-x: auto;          /* 모바일 가로 스크롤 */
}

/* 표 본체 (두 에디터 공통) — direct table 도 같이 커버 */
.ck-content table,
.ck-content figure.table table,
figure.table table {
	border-collapse: collapse !important;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	background: #fff;
	table-layout: auto;        /* 콘텐츠 폭에 맞춤 (균등이 필요하면 fixed) */
}

/* 셀 공통 — Bootstrap 의 td{padding:0} reset 을 덮기 위해 !important */
.ck-content table td,
.ck-content table th,
.ck-content figure.table table td,
.ck-content figure.table table th,
figure.table table td,
figure.table table th {
	min-width: 2em !important;
	padding: 12px 16px !important;
	border: 1px solid #d9d9d9 !important;
	vertical-align: middle !important;
	background: transparent;
	line-height: 1.6 !important;
	font-size: 14px !important;
	color: #333 !important;
	word-break: break-word;
}

/* [2026-06-30] 좌측 타이틀(각 행 첫 셀) 단어 중간 강제 줄바꿈 금지.
   - 컨테이너 .ck-content 의 break-all + 셀 break-word 가 좁은 좌측 컬럼에서
     "Volu/me", "Materia/l" 처럼 글자 단위로 쪼개던 것을 방지.
   - keep-all: 단어는 통째 유지(글자 단위 강제 분리 X). 여러 단어면 공백에서만 줄바꿈.
   - 값(오른쪽) 컬럼은 기존 break-word 유지(긴 값 줄바꿈 필요). */
.ck-content table tr > th:first-child,
.ck-content table tr > td:first-child,
.ck-content figure.table table tr > th:first-child,
.ck-content figure.table table tr > td:first-child,
figure.table table tr > th:first-child,
figure.table table tr > td:first-child {
	word-break: keep-all !important;
	overflow-wrap: normal !important;
}

/* [2026-06-26] 첫 컬럼 자동 굵게/배경(td:first-child) 규칙 제거.
   병합셀(rowspan) 표에서는 라벨이 병합된 아래 행의 데이터 셀이 "첫 번째 td"가 되어
   엉뚱하게 굵게/배경 처리되는 오작동이 있었음. 라벨 강조는 헤더셀(th)로만 처리한다.
   → 에디터에서 라벨 셀/열을 '헤더 셀(column/row header)' 로 지정하면 아래 th 스타일이 적용됨. */

/* th (사용자가 헤더 셀/행/열로 지정한 라벨) — 굵게 + 옅은 배경 */
.ck-content table th,
.ck-content figure.table table th,
figure.table table th {
	font-weight: 700 !important;
	background: #f3f4f6 !important;
	color: #222 !important;
}

/* 정렬 — inline style (TinyMCE: "text-align: right" 공백 있음 / CKEditor: 공백 없음) 둘 다 커버 */
.ck-content td[style*="text-align: right"], .ck-content th[style*="text-align: right"],
.ck-content td[style*="text-align:right"],  .ck-content th[style*="text-align:right"]  { text-align: right !important; }
.ck-content td[style*="text-align: center"], .ck-content th[style*="text-align: center"],
.ck-content td[style*="text-align:center"], .ck-content th[style*="text-align:center"] { text-align: center !important; }
.ck-content td[style*="text-align: left"], .ck-content th[style*="text-align: left"],
.ck-content td[style*="text-align:left"],  .ck-content th[style*="text-align:left"]    { text-align: left !important; }
.ck-content td[style*="text-align: justify"], .ck-content th[style*="text-align: justify"],
.ck-content td[style*="text-align:justify"], .ck-content th[style*="text-align:justify"] { text-align: justify !important; }

/* 수직정렬 — 두 표현 모두 커버 */
.ck-content td[style*="vertical-align: top"], .ck-content th[style*="vertical-align: top"],
.ck-content td[style*="vertical-align:top"],  .ck-content th[style*="vertical-align:top"]   { vertical-align: top !important; }
.ck-content td[style*="vertical-align: bottom"], .ck-content th[style*="vertical-align: bottom"],
.ck-content td[style*="vertical-align:bottom"], .ck-content th[style*="vertical-align:bottom"] { vertical-align: bottom !important; }
.ck-content td[style*="vertical-align: middle"], .ck-content th[style*="vertical-align: middle"],
.ck-content td[style*="vertical-align:middle"], .ck-content th[style*="vertical-align:middle"] { vertical-align: middle !important; }

/* 셀 배경색 inline style 우선순위 보장 — 우리가 default 로 transparent 깔지만 사용자가 색 칠한 셀은 그대로 살림 */
.ck-content td[style*="background-color"],
.ck-content th[style*="background-color"] { background-color: inherit; /* inline style 이 자동 우선 — 명시 보장용 */ }

/* ===== 이미지 (figure.image) ===== */
.ck-content .image {
	display: table;
	clear: both;
	text-align: center;
	margin: .9em auto;
	min-width: 50px;
}

.ck-content .image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	min-width: 100%;
	height: auto;
}

.ck-content .image-style-side {
	float: right;
	margin-left: 1.5em;
	max-width: 50%;
}

/* ===== alignment (블록 정렬 — Alignment 플러그인) ===== */
.ck-content .text-tiny      { font-size: .7em; }
.ck-content .text-small     { font-size: .85em; }
.ck-content .text-big       { font-size: 1.4em; }
.ck-content .text-huge      { font-size: 1.8em; }

.ck-content[dir="rtl"] { text-align: right; }
.ck-content blockquote {
	overflow: hidden;
	padding-right: 1.5em;
	padding-left: 1.5em;
	margin-left: 0;
	margin-right: 0;
	font-style: italic;
	border-left: 5px solid #ccc;
}

/* ===== 목록 ===== */
.ck-content ul,
.ck-content ol {
	padding-left: 1.5em;
	margin: 0 0 .8em;
}
.ck-content ul li { list-style: disc; }
.ck-content ol li { list-style: decimal; }

/* ===== 글자 색/배경 (FontColor / FontBackgroundColor 는 인라인 style 사용 → 별도 CSS 불필요) ===== */

/* ===== 가로선 ===== */
.ck-content hr {
	margin: 1.2em 0;
	height: 4px;
	background: #dedede;
	border: 0;
}

/* ===== 코드 ===== */
.ck-content code {
	background: rgba(0,0,0,.04);
	padding: .15em .3em;
	border-radius: 2px;
	font-family: Consolas, monospace;
	font-size: .9em;
}
.ck-content pre {
	padding: 1em 1.2em;
	color: #353535;
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 2px;
	overflow-x: auto;
}

/* ===== 2026-06-04: 표 첫 셀에 이미지가 들어간 경우 — '라벨 컬럼' 스타일 해제 ===== */
/*  첫 td:first-child 라벨 규칙(width:1%, nowrap, 회색배경, 굵게)이 이미지 셀을 찌그러뜨리는 문제 수정 */
.ck-content table tr > td:first-child:has(img),
.ck-content figure.table table tr > td:first-child:has(img),
figure.table table tr > td:first-child:has(img) {
	width: auto !important;
	white-space: normal !important;
	background: transparent !important;
	font-weight: 400 !important;
	color: #333 !important;
}
/* 표 안 이미지: 셀 폭에 맞춰 자연스럽게 (가로 이미지 찌그러짐 방지) */
.ck-content table td img,
.ck-content table th img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}