/* ==========================================================================
   sections/article.css — 아티클 본문 (`.c4-entry-content`)
   --------------------------------------------------------------------------
   ★★ 이 파일은 **상세 전용이 아니다.**
      `the_content()` 출력이 나오는 곳이면 어디든 같은 스타일이 걸린다 —
      블로그 글(single) · 고정 페이지(page) · **약관 2종**이 이 한 벌을 공유한다.

      그래서 선택자를 `.c4-single …` 로 한정하지 않는다. 한정하면 약관·고정 페이지에
      스타일이 아예 안 붙고, CSS 에러는 나지 않아 8단계 약관 대조에서야 드러난다.

   ★★ enqueue 조건도 같은 이유로 `is_single()` 이 아니라 **`is_singular()`** 다
      (inc/assets.php). 선택자만 넓히고 로드 조건을 상세로 묶으면 결과는 똑같이 실패한다.

   ★ 개별 요소에 스타일을 박지 않는다 — 에디터가 만드는 마크업은 클래스가 계속 바뀐다.
     전부 이 컨테이너 아래 요소 선택자로 건다.
   ========================================================================== */

.c4-entry-content {
	font-size: var(--c4-fs-article-body);
	font-weight: var(--c4-fw-medium);   /* ★ 500 이다. 본문 계열(Body/*)의 400 과 다르다 */
	line-height: var(--c4-lh-article);
	color: var(--c4-color-text);
}

/* ---------- 블록 리듬 ----------
   ★ 블록 사이 40(모바일 28)을 **인접 형제 선택자 하나**로 만든다.
     요소마다 margin-top/bottom 을 따로 주면 이웃한 두 값이 겹쳐(또는 상쇄돼)
     자리마다 간격이 달라진다. 첫 블록의 위 여백이 0 인 것도 이 방식이라 저절로 된다. */
.c4-entry-content > * {
	margin: 0;
}

.c4-entry-content > * + * {
	margin-top: var(--c4-gap-block);
}

/* 헤딩 바로 다음 요소만 8 — 위 규칙을 덮어쓴다. */
.c4-entry-content > :is(h2, h3, h4) + * {
	margin-top: var(--c4-gap-heading);
}

/* ---------- 헤딩 ---------- */

.c4-entry-content h2,
.c4-entry-content h3,
.c4-entry-content h4 {
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-article);
	color: var(--c4-color-text);
}

.c4-entry-content h2 { font-size: var(--c4-fs-article-h2); }
.c4-entry-content h3 { font-size: var(--c4-fs-article-h3); }
.c4-entry-content h4 { font-size: var(--c4-fs-article-h4); }

/* ★ 앵커로 이동했을 때의 sticky 헤더 보정은 base.css 의 `html { scroll-padding-top }` 이
   이미 전역으로 처리한다(관리자 바 높이 포함). 여기서 scroll-margin-top 을 또 주면
   두 값이 더해져 헤딩이 화면 중간까지 내려온다. JS 스크롤 보정도 필요 없다. */

/* ---------- 링크 ---------- */

.c4-entry-content a {
	color: var(--c4-color-accent);
	text-decoration: underline;
	overflow-wrap: anywhere;   /* 긴 주소(출처 URL 등)가 칸 밖으로 넘쳐 잘리지 않게 — 끊을 데가 없을 때만 아무 데서나 줄바꿈(2026-10-15 언론보도 상세에서 발견 · 모바일 375 에서 756px 까지 넘침) */
}

.c4-entry-content a:hover { text-decoration: none; }

/* ★ 포커스 링은 base.css 의 전역 `:focus-visible` 이 이미 준다. 여기서 다시 선언하지 않는다 —
   두 곳에 적으면 한쪽만 고쳐질 때 본문 링크만 다른 링이 뜬다. */

/* ---------- 목록 ----------
   ★ 마커 모양은 브라우저 기본을 그대로 쓴다. 들여쓰기와 항목 간격만 정한다. */

.c4-entry-content :is(ul, ol) {
	padding-left: var(--c4-article-list-indent);
}

.c4-entry-content li + li {
	margin-top: var(--c4-article-list-gap);
}

/* 중첩 목록은 바깥 항목과 8 만 띄운다(블록 간 40 이 아니다). */
.c4-entry-content li > :is(ul, ol) {
	margin-top: var(--c4-article-list-gap);
}

/* ---------- 인용 ----------
   ★ 좌측 세로선 + 들여쓰기로만 표현한다. 배경도, 인용부호 그림도 만들지 않는다. */

.c4-entry-content blockquote {
	padding-left: var(--c4-quote-indent);
	border-left: var(--c4-border-w) solid var(--c4-color-border);
	color: var(--c4-color-text-sub);
}

/* 인용 안의 문단은 서로 8 (블록 간 40 이 아니다). */
.c4-entry-content blockquote > * + * {
	margin-top: var(--c4-gap-heading);
}

/* ---------- 이미지 · 캡션 ----------
   ★ 상세 대표 이미지와 같은 규칙 — **원본 비율 그대로 폭 100%.**
     고정 크롭(aspect-ratio)은 카드 썸네일에만 해당한다. */

.c4-entry-content :is(img, video, iframe) {
	display: block;
	max-width: 100%;
	height: auto;
}

.c4-entry-content :is(img, video) {
	border-radius: var(--c4-radius-img);
}

.c4-entry-content figure > :is(img, video, iframe) {
	margin-inline: auto;
}

.c4-entry-content figcaption {
	margin-top: var(--c4-figcaption-gap);
	font-size: var(--c4-fs-body4);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	/* ★ 보조 설명이므로 **보조 텍스트**다(4단계 도출 규칙: 기본 / 보조 / 연한 세 단계).
	   `--c4-color-text-muted`(grey500)는 상세 날짜·푸터 카피라이트 전용이라 여기 쓰지 않는다. */
	color: var(--c4-color-text-sub);
	text-align: center;
}

/* ---------- 구분선 ---------- */

.c4-entry-content hr {
	height: 0;
	border: 0;
	border-top: var(--c4-border-w) solid var(--c4-color-border);
}

/* ---------- 표 ----------
   시안에 표가 없다. 구매자가 편집기로 넣을 수 있어서 필요한 스타일이며
   기존 토큰만 조합해 만든다(표 전용 색·크기 토큰 없음).

   ★ 헤더 행은 **굵기로만** 구분한다 — 배경색을 깔지 않는다.
   ★★ 좌우 넘침은 래퍼가 아니라 표 자신이 스크롤한다:
      코어(`wp-block-table`)는 <figure> 로 감싸 주지만 클래식 에디터로 넣은
      맨 <table> 은 감싸는 요소가 없다. `display:block; overflow-x:auto` 를 표에 직접
      걸어야 두 경우 모두 375 뷰포트에서 화면을 밀어내지 않는다.
   ★ 단 블록 편집기 표(<figure class="wp-block-table">)는 figure 가 스크롤을 맡으므로 표를 본래 표(display: table)로
     되돌린다 — display: block 이면 칸이 내용 폭에서 멈춰 본문 폭을 채우지 못한다(2026-10-12 리뷰).
   ★ 머리 칸(th)은 한글을 낱말 단위로만 줄바꿈 — 좁은 칸에서 한 글자씩 끊기지 않게(td 에는 걸지 않는다: 320 에서 넘친다). */

.c4-entry-content :is(figure.wp-block-table, .wp-block-table) {
	overflow-x: auto;
}

.c4-entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--c4-fs-article-body);
	line-height: var(--c4-lh-article);
}

.c4-entry-content :is(th, td) {
	padding: var(--c4-table-cell-pad);
	border: var(--c4-border-w) solid var(--c4-color-border);
	text-align: left;
	vertical-align: top;
}

.c4-entry-content .wp-block-table table {
	display: table;
}

.c4-entry-content th {
	font-weight: var(--c4-fw-bold);
	word-break: keep-all;
}

/* ---------- 코드 ---------- */

.c4-entry-content :is(code, pre) {
	font-family: var(--c4-font-mono);
	background: var(--c4-color-surface-code);
}

.c4-entry-content code {
	padding: var(--c4-code-pad-inline);
	border-radius: var(--c4-radius-chip);
}

.c4-entry-content pre {
	padding: var(--c4-code-pad);
	border-radius: var(--c4-radius-box);
	overflow-x: auto;
}

/* <pre><code> 중첩 — 안쪽 code 의 배경·패딩을 지운다(이중으로 보인다). */
.c4-entry-content pre code {
	padding: 0;
	background: none;
	border-radius: 0;
}

/* ==========================================================================
   모바일
   ★ 이 화면의 값 전환 기준선은 768 이다(헤더 드로어 1024 · 사이드 박스 1360 과 별개).
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-entry-content > * + * {
		margin-top: var(--c4-gap-block-m);
	}

	/* 헤딩 → 문단 8 은 PC · 모바일이 같아 다시 선언하지 않는다. */

	.c4-entry-content h2 { font-size: var(--c4-fs-article-h2-m); }
	.c4-entry-content h3 { font-size: var(--c4-fs-article-h3-m); }
	.c4-entry-content h4 { font-size: var(--c4-fs-article-h4-m); }

	/* ★ 문단 크기(17)는 PC · 모바일 공용이다 — 여기서 줄이지 말 것. */
}