/*
 * single.css — 상세 화면의 세로 리듬 · 제목 블록 · 대표 이미지
 *
 * 3열 그리드 자체는 base/layout.css 소관이다(여기서 다시 정의하지 않는다).
 * 본문 타이포는 article.css(.c4-entry-content), 목차는 toc.css + sidebox.css,
 * 배너는 banner.css, 같은 카테고리 글은 related.css.
 *
 * 화면 내부 간격 (PC / 모바일) — 4단계 프롬프트의 표가 출처
 *   제목 블록 → 다음 블록    40 / 28   (모바일은 제목 블록 → 목차 → 대표 이미지가 각각 28)
 *   대표 이미지 → 본문 첫 블록 40 / 20
 *   본문 블록 사이           40 / 20   (article.css)
 *   배너 위아래             40 / 28   (banner.css · related.css)
 */

/* 페이지 위아래 여백 — 확정값의 '페이지 세로 여백' 표(상세 줄). */
.c4-single {
	padding-top: var(--c4-page-top);
	padding-bottom: var(--c4-page-bottom-single);
}

/* ─────────────────────────────────────────────────────────
   제목 블록
   세로로 쌓는 묶음은 flex column — 블록 안 인라인 텍스트의 strut 때문에 간격이 몇 px 커지는 것을 막는다.
   ───────────────────────────────────────────────────────── */

.c4-single__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 카드 라벨(Body/body2_bold, 줄간격 1.5)과 줄간격이 다르다 — 상세 전용 토큰. 합치지 말 것. */
.c4-single__cat {
	font-size: var(--c4-fz-single-cat);
	line-height: var(--c4-lh-single-cat);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-accent);
	text-decoration: none;
}

/* 상세 글 제목 계열 — 페이지 제목·메뉴 계열과 값이 겹쳐 보여도 재사용하지 않는다. */
.c4-single__title {
	align-self: stretch;
	font-size: var(--c4-fz-single-title);
	line-height: var(--c4-lh-single-title);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

.c4-single__cat + .c4-single__title {
	margin-top: var(--c4-single-cat-gap);
}

/* Text style 이 없는 예외 — 굵기 500 · grey500. 카드 날짜(grey300)와 다른 값이 맞다. */
.c4-single__date {
	margin-top: var(--c4-single-date-gap);
	font-size: var(--c4-fz-single-date);
	line-height: var(--c4-lh-single-date);
	font-weight: var(--c4-fw-medium);
	color: var(--c4-color-text-meta);
}

/* 제목 블록 → 다음 블록(목차 또는 대표 이미지). 고정 페이지·약관과 같은 토큰이다. */
.c4-single__layout {
	margin-top: var(--c4-title-gap);
}

/*
 * 1열 구간(<1360) — 목차가 본문 위 인라인이다. 목차 → 대표 이미지도 같은 간격(40 / 28).
 * layout.css 의 1열 간격(--c4-grid-gap)을 상세에서만 덮는다. ≥1360 은 layout.css 가 0 으로 되돌린다.
 * ★ 기준선은 1360 — 768 이 아니다(sidebox.css 의 sticky 기준선과 같은 값).
 */
@media (max-width: 1359.98px) {
	.c4-single__side {
		margin-bottom: var(--c4-title-gap);
	}
}

/* ─────────────────────────────────────────────────────────
   대표 이미지 — 원본 비율 그대로 폭 100%. aspect-ratio·object-fit 으로 자르지 않는다.
   ───────────────────────────────────────────────────────── */

.c4-single__img {
	width: 100%;
	height: auto;
	border-radius: var(--c4-radius-img);
}

.c4-single__media + .c4-single__content {
	margin-top: var(--c4-single-gap-media);
}