/*
 * article.css — 아티클 본문 (.c4-entry-content)
 *
 * ★ 상세 전용이 아니다. page.php(약관 2종·문의 폼·그 밖의 고정 페이지)도 같은 컨테이너를 쓰므로
 *   선택자를 .c4-single … 로 한정하지 말 것. 로드 조건도 is_singular() 다(inc/enqueue.php).
 *
 * ★ 에디터 출력을 그대로 받는다. 개별 요소에 스타일을 박지 않고 이 컨테이너 하나에 몰아 둔다.
 *
 * 시안에 실물이 있는 것은 문단 · h2 · h3 뿐이다. 나머지(h4 · figcaption · blockquote · ul/ol · hr · a ·
 * table · code)는 4단계 도출 규칙으로 정했다 — 새 색·새 크기를 만들지 않고 기존 토큰만 조합한다.
 * 시안 대조 대상이 아니다(DESIGN-TOKENS §4).
 */

.c4-entry-content {
	/* 문단 — PC·모바일 공용 */
	font-size: var(--c4-fz-paragraph);
	line-height: var(--c4-lh-paragraph);
	font-weight: var(--c4-fw-medium);
	color: var(--c4-color-text);
	overflow-wrap: break-word;
}

/* ─────────────────────────────────────────────────────────
   세로 리듬 — 본문 블록 사이 40 / 20, 헤딩 → 바로 아래 블록 8.
   ★ 모바일 20 은 약관·고정 페이지에도 그대로 간다(시안 약관 Mobile 의 28 이 아니다).
     화면별 분기를 만들지 말 것.
   블록 편집기 스타일(.wp-block-*)이 주는 바깥 여백을 먼저 0 으로 되돌린 뒤 간격을 한 곳에서 준다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content > * {
	margin-block: 0;
}

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

.c4-entry-content > :is(h2, h3, h4) + * {
	margin-top: var(--c4-article-gap-heading);
}

/* 앵커로 이동했을 때 sticky 헤더 아래에 여유를 두고 멈춘다(html 의 scroll-padding-top 에 더해진다). */
.c4-entry-content :is(h2, h3, h4)[id] {
	scroll-margin-top: var(--c4-anchor-gap);
}

/* ─────────────────────────────────────────────────────────
   헤딩 — 아티클 헤딩 계열. h2 · h3 · h4 가 각자 토큰을 갖는다(값이 가까워도 대체하지 않는다).
   ───────────────────────────────────────────────────────── */

.c4-entry-content h2 {
	font-size: var(--c4-fz-article-h2);
	line-height: var(--c4-lh-article-h2);
	font-weight: var(--c4-fw-bold);
}

.c4-entry-content h3 {
	font-size: var(--c4-fz-article-h3);
	line-height: var(--c4-lh-article-h3);
	font-weight: var(--c4-fw-bold);
}

/* h3 에서 한 단계 작게, 굵기는 h3 와 같다. */
.c4-entry-content h4 {
	font-size: var(--c4-fz-article-h4);
	line-height: var(--c4-lh-article-h4);
	font-weight: var(--c4-fw-bold);
}

/* ─────────────────────────────────────────────────────────
   링크 — 포인트 컬러 + 밑줄. 호버는 포인트 컬러를 유지한 채 밑줄만 걷는다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content a {
	color: var(--c4-color-accent);
	text-decoration: underline;
}

.c4-entry-content a:hover {
	color: var(--c4-color-accent);
	text-decoration: none;
}

/* ─────────────────────────────────────────────────────────
   목록 — 마커 모양은 브라우저 기본. 들여쓰기 20, 마커 ↔ 글자 8, 항목 사이 8.
   base.css 가 ul/ol 의 padding 을 0 으로 지웠으므로 본문 안에서만 되살린다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content :is(ul, ol) {
	padding-inline-start: var(--c4-article-space-m);
}

.c4-entry-content li {
	padding-inline-start: var(--c4-article-space-s);
}

.c4-entry-content li + li,
.c4-entry-content li > :is(ul, ol) {
	margin-top: var(--c4-article-space-s);
}

/* ─────────────────────────────────────────────────────────
   인용 — 좌측 세로선(divider) + 들여쓰기. 배경·인용부호 그림을 만들지 않는다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content blockquote {
	margin-inline: 0;
	padding: 0 0 0 var(--c4-article-space-m);
	border: 0;
	border-left: var(--c4-border-w) solid var(--c4-color-border);
}

.c4-entry-content blockquote > * + * {
	margin-top: var(--c4-article-space-s);
}

.c4-entry-content blockquote cite {
	display: block;
	font-style: normal;
	color: var(--c4-color-text-sub);
}

/* ─────────────────────────────────────────────────────────
   구분선 — divider 1px 한 줄.
   ───────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────
   이미지 · 캡션 · 미디어 — 폭을 넘지 않게. 이미지 radius 는 --c4-radius-img.
   ───────────────────────────────────────────────────────── */

.c4-entry-content figure {
	margin-inline: 0;
}

.c4-entry-content img {
	max-width: 100%;
	height: auto;
}

.c4-entry-content :is(.wp-block-image, figure) img:not(.emoji):not(.wp-smiley) {
	border-radius: var(--c4-radius-img);
}

.c4-entry-content :is(iframe, video, embed, object) {
	max-width: 100%;
}

.c4-entry-content video {
	height: auto;
}

/* 줄바꿈이 많은 캡션만 한 단계 작게(Body/body2). 보조 설명이라 보조 텍스트색. */
.c4-entry-content figcaption {
	margin-top: var(--c4-article-space-s);
	margin-bottom: 0;
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	color: var(--c4-color-text-sub);
}

/* ─────────────────────────────────────────────────────────
   표 — 시안 실측이 없어 기존 토큰만으로 만든다. 표 전용 색·크기 토큰을 만들지 말 것.
   셀 테두리 divider · 헤더 행은 굵기로만 구분 · 폰트는 문단과 동일.
   좌우 넘침은 래퍼가 스크롤한다 — 블록 편집기 표는 figure.wp-block-table, 그 밖의 표는
   본문 파싱이 감싼 .c4-scroll-x(inc/single.php).
   ───────────────────────────────────────────────────────── */

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

.c4-entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: inherit;
	line-height: inherit;
}

.c4-entry-content :is(th, td) {
	padding: var(--c4-article-space-s) var(--c4-article-space-m);
	border: var(--c4-border-w) solid var(--c4-color-border);
	text-align: left;
	vertical-align: top;
}

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

/* 블록 편집기 표의 thead/tfoot 굵은 선을 셀 테두리와 같게 되돌린다. */
.c4-entry-content :is(thead, tfoot) {
	border: 0;
}

/* ─────────────────────────────────────────────────────────
   코드 — 배경은 코드류에만 grey100.
   ───────────────────────────────────────────────────────── */

.c4-entry-content :is(code, kbd, samp, pre) {
	font-family: var(--c4-font-mono);
	letter-spacing: var(--c4-ls-code);
}

.c4-entry-content :not(pre) > code {
	padding: 0 var(--c4-code-inline-pad-x);
	border-radius: var(--c4-radius-code);
	background: var(--c4-color-code-bg);
	font-size: inherit;
}

.c4-entry-content pre {
	overflow-x: auto;
	padding: var(--c4-article-space-m);
	border: 0;
	border-radius: var(--c4-radius-code);
	background: var(--c4-color-code-bg);
	color: var(--c4-color-text);
	font-size: inherit;
	line-height: inherit;
	white-space: pre;
}

.c4-entry-content pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}