/* 장비 HTML 본문(상세·속성·특징) 표시 — 에디터 편집 영역과 표시 화면이 같은 규칙을 쓴다.
 *
 * 작성 기준 폭은 1280px 다(공개 상세 coolschool.co.kr/edu-tech/detail 의 본문 폭).
 * 사이트 공통 CSS 가 목록 기호·문단 여백·기울임·hr·표 테두리를 지우는 곳이 있어
 * (coolschool common.css) 본문 안에서만 되돌린다. 전부 .product-html-content 아래로 가둔다.
 * 지시서: dev_doc/specs/partner/products/changes/0002-product-html-editor §4.8
 */
.product-html-content {
  max-width: 1280px;
  font-size: 15px;
  line-height: 1.7;
  color: #1f2937;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.product-html-content > :first-child { margin-top: 0; }
.product-html-content > :last-child { margin-bottom: 0; }
.product-html-content p,
.product-html-content div { margin: 0 0 .6em; }
.product-html-content h1,
.product-html-content h2,
.product-html-content h3,
.product-html-content h4,
.product-html-content h5,
.product-html-content h6 { margin: 1.1em 0 .5em; font-weight: 700; line-height: 1.35; color: #111827; }
.product-html-content h1 { font-size: 1.8em; }
.product-html-content h2 { font-size: 1.5em; }
.product-html-content h3 { font-size: 1.25em; }
.product-html-content h4 { font-size: 1.1em; }
.product-html-content h5,
.product-html-content h6 { font-size: 1em; }
.product-html-content ul,
.product-html-content ol { margin: 0 0 .8em; padding-left: 1.6em; }
.product-html-content ul { list-style: disc; }
.product-html-content ol { list-style: decimal; }
.product-html-content li { margin: .2em 0; list-style: inherit; }
.product-html-content em,
.product-html-content i { font-style: italic; }
.product-html-content strong,
.product-html-content b { font-weight: 700; }
.product-html-content u { text-decoration: underline; }
.product-html-content s,
.product-html-content strike,
.product-html-content del { text-decoration: line-through; }
.product-html-content a { color: #2563eb; text-decoration: underline; }
.product-html-content hr { border: 0; border-top: 1px solid #d1d5db; margin: 1.2em 0; }
.product-html-content blockquote { margin: 0 0 .8em; padding: .4em 1em; border-left: 4px solid #d1d5db; color: #4b5563; }
.product-html-content pre,
.product-html-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.product-html-content pre { background: #f3f4f6; padding: .8em 1em; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; }
/* 그림은 글자처럼(inline-block) 둔다 — 에디터(Summernote)의 가운데·오른쪽 정렬은 문단의 text-align 이라
   사이트 공통 CSS 가 img 를 block 으로 만들면(Coolspace2 layout.css 의 img{display:block}) 정렬이 먹지 않는다.
   Jodit 의 가운데 정렬은 그림 자체에 display:block · margin:auto 를 인라인 style 로 달아 이 규칙보다 우선한다. */
.product-html-content img,
.product-html-content video { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
/* 표는 원래 폭을 존중하되 넘치면 줄인다. 셀 테두리는 기본으로 보이게 한다(작성자가 style 로 바꿀 수 있다). */
.product-html-content table { border-collapse: collapse; max-width: 100%; margin: 0 0 1em; }
.product-html-content th,
.product-html-content td { border: 1px solid #d1d5db; padding: 6px 10px; vertical-align: top; text-align: left; }
.product-html-content th { background: #f9fafb; font-weight: 700; }
.product-html-content caption { caption-side: top; padding: 0 0 .4em; font-weight: 700; text-align: left; }

@media (max-width: 768px) {
  .product-html-content { font-size: 14px; }
  .product-html-content table { display: block; overflow-x: auto; }
}

/* ── 공개 상세(coolschool-web-master) 전용 ──────────────────────────────────
 * 사이트 공통 CSS(common.css · coolspace-web-publish)가 상세 탭의 그림을 모두 가운데 블록으로 만들고
 * (.product_detail_wrap .detail_content section img { margin:auto; display:block })
 * 표를 폭 100% 로 늘린다(table { width:100% }). 본문은 작성한 정렬·폭을 따른다.
 */
.product_detail_wrap .detail_content section .product-html-content img { display: inline-block; margin: 0; }
.product-html-content table { width: auto; }