/* ────────────────────────────────────────────────────────────
   에디터로 작성한 본문의 공통 스타일.

   편집화면(SunEditor)과 상세페이지가 "같은 모양"으로 보이게 하는 것이 목적이다.
   그래서 편집화면과 상세페이지 양쪽에서 이 파일을 함께 읽는다.

   읽는 순서 (뒤에 오는 것이 이김):
     1) suneditor-contents.css  — h2/p 여백 등 기본 문서 스타일
     2) 이 파일                 — 사이트 폰트·크기로 맞추고, 사이트 CSS 간섭을 막는다

   ⚠ 상세페이지에서는 beau.css / peak.css 가 먼저 로드된다.
      `.detail-text` 같은 사이트 규칙이 본문 안쪽까지 건드리므로
      여기서 되돌려 준다.
   ──────────────────────────────────────────────────────────── */

.sun-editor-editable {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #1c1c1c;
	word-break: break-word;
}

/* 사이트 CSS 가 .detail-text 를 flex 로 만들어 문단 흐름이 깨졌다.
   본문은 일반 문서 흐름(block)이어야 여백·줄바꿈이 정상으로 보인다. */
.detail-text.sun-editor-editable {
	display: block;
}

/* ── 제목 ──
   suneditor-contents.css 는 em 단위(h2 = 1.5em)라 위에서 정한 16px 기준으로 계산된다.
   여백은 기본값(0.83em 등)을 그대로 두되, 너무 붙어 보이지 않게 위쪽만 조금 넉넉히. */
.sun-editor-editable h1,
.sun-editor-editable h2,
.sun-editor-editable h3,
.sun-editor-editable h4,
.sun-editor-editable h5,
.sun-editor-editable h6 {
	font-weight: 700;
	line-height: 1.4;
	color: #1c1c1c;
}
.sun-editor-editable h1 { font-size: 30px; margin: 32px 0 14px; }
.sun-editor-editable h2 { font-size: 24px; margin: 28px 0 12px; }
.sun-editor-editable h3 { font-size: 20px; margin: 24px 0 10px; }
.sun-editor-editable h4 { font-size: 18px; margin: 20px 0 10px; }
.sun-editor-editable h5,
.sun-editor-editable h6 { font-size: 16px; margin: 18px 0 8px; }
/* 본문 맨 앞 제목은 위 여백을 두지 않는다(카드/상세 상단이 벌어져 보인다) */
.sun-editor-editable > h1:first-child,
.sun-editor-editable > h2:first-child,
.sun-editor-editable > h3:first-child { margin-top: 0; }

/* ── 문단 ──
   suneditor 기본값은 margin:0 이라 문단이 다 붙는다. 읽을 수 있게 간격을 준다.
   단, 빈 문단(<p><br></p>)은 사용자가 의도한 여백이므로 건드리지 않는다. */
/* Enter 로 내린 줄은 일반 줄 간격으로 붙인다.
   문단마다 아래 여백을 주면 Enter 한 번에 한 줄이 통째로 비어 보인다.
   (띄우고 싶으면 사용자가 빈 줄을 직접 넣는다) */
.sun-editor-editable p { margin: 0; }

/* ── 목록 ──
   suneditor.css 가 list-style:none !important 로 지워 버려서
   상세페이지에서 글머리 기호가 사라졌다. 되살린다. */
.sun-editor-editable ul,
.sun-editor-editable ol { margin: 0 0 12px; padding-left: 24px; }
.sun-editor-editable ul { list-style: disc outside !important; }
.sun-editor-editable ol { list-style: decimal outside !important; }
.sun-editor-editable li { list-style: inherit !important; margin: 4px 0; }

/* ── 인용구 ── */
.sun-editor-editable blockquote {
	margin: 16px 0;
	padding: 8px 0 8px 16px;
	border-left: 4px solid #CBD5E1;
	color: #475569;
}

/* ── 표 ── */
.sun-editor-editable table { margin: 16px 0; border-collapse: collapse; }
.sun-editor-editable table td,
.sun-editor-editable table th { border: 1px solid #E2E8F0; padding: 8px; }

/* ── 이미지·영상 ──
   본문 이미지는 최대 720px. (peak.css 의 상세페이지 규칙과 같은 값)
   편집화면과 상세/미리보기의 크기가 달라 보이지 않도록 여기서 함께 맞춘다. */
.sun-editor-editable img,
.sun-editor-editable video { max-width: 100%; height: auto; }
.sun-editor-editable .se-image-container img,
.sun-editor-editable .se-video-container video { max-width: 720px !important; height: auto !important; }

/* 에디터가 비율용으로 넣어 둔 padding 은 iframe 이 직접 비율을 갖게 하면
   이중으로 잡혀 영상 아래 큰 빈 공간이 된다. 상자를 원래대로 되돌린다.
   (아래 @supports 폴백에서 다시 지정하므로 순서가 중요하다) */
.sun-editor-editable .se-video-container figure {
	/* 저장된 본문에 인라인 padding-bottom 이 박혀 있어 !important 가 필요하다 */
	height: auto !important;
	padding-bottom: 0 !important;
}

/* iframe(유튜브 등)은 원본 비율을 알 수 없어 height:auto 를 주면 납작해진다.
   16:9 상자를 만들어 그 안을 꽉 채운다. (aspect-ratio 를 못 쓰는 브라우저를 위해
   padding-top 방식도 함께 둔다 — :has() 없이 동작해야 한다) */
.sun-editor-editable .se-video-container iframe {
	max-width: 720px !important;
	width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	border: 0;
}
@supports not (aspect-ratio: 16 / 9) {
	.sun-editor-editable .se-video-container figure {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
	}
	.sun-editor-editable .se-video-container figure iframe {
		position: absolute; top: 0; left: 0;
		width: 100% !important; height: 100% !important;
	}
}
/* 컨테이너도 같이 묶어야 가운데 정렬·여백이 어긋나지 않는다 */
.sun-editor-editable .se-image-container,
.sun-editor-editable .se-video-container { max-width: 720px; }
.sun-editor-editable figure { margin: 0; }

/* ── 구분선 ── */
.sun-editor-editable hr { margin: 20px 0; }

@media (max-width: 720px) {
	.sun-editor-editable { font-size: 15px; }
	.sun-editor-editable h1 { font-size: 24px; }
	.sun-editor-editable h2 { font-size: 20px; }
	.sun-editor-editable h3 { font-size: 18px; }
}

/* ── 이미지 연속 배치 ──
   suneditor 기본값(.se-component{padding:1px; margin:0 0 10px})이 이미지마다 여백을 만든다.
   여러 장을 이어 붙이면 사이가 벌어지므로 이미지 컴포넌트의 여백을 없앤다.
   (본문 문단과는 아래 규칙으로 다시 간격을 준다) */
.sun-editor-editable .se-component{
	margin: 0 !important;
	padding: 0 !important;
}
/* 이미지 다음에 글이 오면 그때만 간격을 준다 */
.sun-editor-editable .se-component + p,
.sun-editor-editable .se-component + h1,
.sun-editor-editable .se-component + h2,
.sun-editor-editable .se-component + h3,
.sun-editor-editable .se-component + ul,
.sun-editor-editable .se-component + ol,
.sun-editor-editable .se-component + blockquote{ margin-top: 12px; }

/* 이미지 바로 뒤에 '빈 문단'(<p><br></p>)이 오면 그만큼 사이가 벌어진다.
   에디터가 커서 자리를 만들려고 넣는 것이라 지울 수는 없고, 높이만 0 으로 접는다.
   :has() 를 쓰면 <br> 하나뿐인 문단을 정확히 골라낼 수 있다. */
.sun-editor-editable .se-component + p:empty,
.sun-editor-editable .se-component + p:has(> br:only-child){
	margin: 0 !important;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}