/* ==========================================================================
   sections/article.css — 아티클 본문 (.c4-entry-content)

   ★★ 이 CSS 는 상세뿐 아니라 **고정 페이지(page.php)에도 그대로 적용된다** —
      약관 2종이 이 스타일로 렌더된다.
      그래서 상세 전용 선택자(.c4-single …)로 한정하지 않는다.
      enqueue 조건도 is_single() 이 아니라 **is_singular()** 다(inc/enqueue.php).
      선택자만 넓히고 조건부 로드를 상세로 묶으면 약관에 스타일이 아예 안 붙는다.

   ★★ 아티클 **안쪽** 블록 간격은 모바일 20 이다. 약관 Mobile 시안이 28 로 그려져 있어도
      20 을 쓴다 — 두 화면이 같은 규칙을 공유하므로 값은 하나뿐이고,
      8px 때문에 화면별 분기를 만들면 문의 폼·그 밖의 고정 페이지까지 끌려간다.

   ★ 개별 요소에 스타일을 박지 않고 이 컨테이너에 몰아서 건다.
   ★ 시안에 실물이 없는 요소(h4·figcaption·인용·목록·hr·링크·표·코드)는
     **새 색·새 크기를 만들지 않고** 기존 토큰과 시안 리듬(8 / 20 / 40)에서 도출했다.
     따라서 시안 대조 대상이 아니다.
   ========================================================================== */

.c4-entry-content {
  font-size: var(--c4-type-article-body-size);
  font-weight: var(--c4-type-article-body-weight);
  line-height: var(--c4-type-article-body-lh);
  color: var(--c4-color-text);
}

/* --------------------------------------------------------------------------
   블록 사이 리듬

   기본 40(모바일 20), 헤딩 바로 다음만 8.
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   헤딩 — 아티클 헤딩 계열. h2·h3 는 PC·모바일 값이 따로 있다.
   ★ PC h3 와 모바일 h2 처럼 값이 가까워도 **서로 다른 토큰**이다. 대체하지 말 것.
   -------------------------------------------------------------------------- */

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

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

/* h4 — h3 보다 한 단계 작게(이 디자인의 헤딩 단차는 2), 굵기·줄간격은 h3 와 동일 */
.c4-entry-content h4 {
  font-size: var(--c4-type-article-h4-size);
  font-weight: var(--c4-type-article-h4-weight);
  line-height: var(--c4-type-article-h4-lh);
}

/* --------------------------------------------------------------------------
   링크 — 포인트 컬러 + 밑줄
   -------------------------------------------------------------------------- */

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

.c4-entry-content a:hover,
.c4-entry-content a:focus-visible {
  text-decoration-thickness: var(--c4-border-w);
}

/* --------------------------------------------------------------------------
   목록 — 들여쓰기와 항목 간격만 정한다(마커 모양은 브라우저 기본).
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   이미지 · 임베드 — 반응형

   ★ 본문 이미지에는 radius 를 주지 않는다. --c4-radius-img 는 카드 썸네일과
     상세 대표 이미지 전용이며, 확정값에 본문 이미지는 없다.
   -------------------------------------------------------------------------- */

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

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

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

.c4-entry-content figcaption {
  margin-top: var(--c4-article-space-sm);
  font-size: var(--c4-type-body3-size);
  line-height: var(--c4-type-body-lh);
  color: var(--c4-color-text-sub);
}

/* --------------------------------------------------------------------------
   코드 — 코드류만 배경을 갖는다(그 외 배경 없음).
   -------------------------------------------------------------------------- */

.c4-entry-content code {
  padding: 0 calc(var(--c4-article-space-sm) / 2);
  background: var(--c4-color-grey100);
  border-radius: var(--c4-radius-page);
}

.c4-entry-content pre {
  overflow-x: auto;
  padding: var(--c4-article-space-md);
  background: var(--c4-color-grey100);
  border-radius: var(--c4-radius-box);
}

.c4-entry-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   표

   시안에 표가 없어 문서의 기존 토큰만으로 만들었다 — 셀 테두리 divider,
   헤더 행은 **굵기로만** 구분(배경색 없음), 폰트는 본문 문단과 동일.
   ★ 표 전용 색·크기 토큰을 만들지 않는다. 시안 대조 대상도 아니다.
   -------------------------------------------------------------------------- */

/* 블록 에디터가 붙이는 래퍼가 가로 스크롤을 맡는다. */
.c4-entry-content .wp-block-table {
  overflow-x: auto;
}

.c4-entry-content table {
  width: 100%;
  border-collapse: collapse;
}

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

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

/*
 * 래퍼 없이 붙여넣은 표를 위한 안전망.
 * 블록 에디터는 항상 <figure class="wp-block-table"> 로 감싸므로 보통은 쓰이지 않는다.
 * 좁은 화면에서 표가 화면을 밀어내는 것보다는 이쪽이 낫다.
 */
.c4-entry-content > table {
  display: block;
  overflow-x: auto;
}