/* ==========================================================================
   sections/single.css — 상세 화면의 뼈대 · 제목 블록 · 대표 이미지 · 세로 리듬
   --------------------------------------------------------------------------
   본문 요소(.c4-entry-content)는 sections/article.css 소관 — 상세 전용이 아니라
   고정 페이지·약관과 공유하므로 이 파일에 넣지 않는다.
   3열 그리드 자체는 base/layout.css 소관 — 여기에 복사하지 말 것.
   ========================================================================== */

.c4-single {
	padding-top: var(--c4-page-pt);
	padding-bottom: var(--c4-page-pb-single);   /* ★ 목록(40)과 다른 값이다. 공통 토큰으로 묶지 말 것 */
}

/* ==========================================================================
   그리드 — 상세만 **두 행**을 쓴다
   --------------------------------------------------------------------------
   ★★ 목차가 대표 이미지보다 마크업상 앞이면서, 데스크톱에서는 대표 이미지와 같은 행에
      있어야 한다. 그래서 제목 블록을 1행에 따로 떼고 목차·본문을 2행에 나란히 둔다.

        1행:            [ 제목 블록(2열) ]
        2행: [ 목차(3열) ] [ 본문(2열) ]

      DOM 순서는 제목 블록 → 목차 → 본문이라 모바일(1열)에서 그대로 원하는 순서가 되고,
      `order` 로 뒤집지 않으므로 탭 순서도 화면 순서와 같다.

   ★ 이 방식이라 목차의 세로 시작선에 top 좌표를 박거나 JS 로 보정할 필요가 없다 —
     제목이 한 줄이든 세 줄이든 2행이 저절로 대표 이미지 상단에서 시작한다.

   ★ layout.css 의 `.c4-layout__main { grid-row: 1 }` 을 여기서 덮어쓴다.
     layout.css 를 고치면 목록이 함께 흔들리므로 **상세 변형 클래스로만** 건드린다.
   ========================================================================== */

.c4-layout--single > .c4-single__head {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.c4-layout--single > .c4-layout__main,
.c4-layout--single > .c4-layout__side {
	grid-row: 2;
}

/*
 * 제목 블록 → 다음 요소 간격.
 * ★ row-gap 이 아니라 margin-bottom 으로 만든다 — 1360 미만에서 그리드가 block 으로
 *   바뀌어도 같은 선언 하나가 그대로 동작한다. row-gap 은 block 에서 무시된다.
 */
.c4-single__head {
	margin-bottom: var(--c4-single-head-gap);

	/*
	 * ★★ flex 로 펴는 이유는 배치가 아니라 **간격 정확도** 때문이다.
	 *    블록 컨테이너 안의 인라인 요소는 컨테이너의 font-size · line-height 로 만들어지는
	 *    **strut**(보이지 않는 기준 글자)이 만든 줄 상자 안에 놓인다.
	 *    카테고리 라벨(16/1.2 = 19.2)이 body strut(16/1.5 = 24)보다 낮아서
	 *    위아래로 약 2.4px 씩 빈 공간이 생기고, 그만큼 **상단 여백 80 → 84**,
	 *    **카테고리 → 제목 8 → 11** 로 벌어진다. CSS 에러는 나지 않고 값만 조용히 어긋난다.
	 *    flex 항목은 blockify 되어 strut 이 사라지므로 선언한 값이 그대로 나온다.
	 *
	 * ★ 여기서 align-items:flex-start 는 **의도한 것**이다 — 카테고리 라벨이 글자 폭만
	 *   차지해야 클릭 영역과 hover 밑줄이 720 전체로 번지지 않는다.
	 *   (같은 속성이 카드에서는 반대로 사고를 냈다. 거기는 세로 배치라 폭을 지배했기 때문이고,
	 *    여기는 폭이 줄어드는 것이 원하는 동작이다. 값이 같아도 상황이 다르다.)
	 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 목차가 없는 글은 본문이 3열 그리드에서 가운데 열을 그대로 쓴다 — 별도 처리 불필요.
   (사이드 슬롯 자체가 렌더되지 않으므로 빈 landmark 도 남지 않는다.) */

/* ==========================================================================
   제목 블록
   ========================================================================== */

/* 카테고리 라벨 — ★ 카드(목록)의 라벨과 **줄간격이 다르다**. 같은 크기·굵기여도 다른 값이며
   통일하지 말 것(DESIGN-TOKENS §2-5). */
.c4-single__cat {
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-cat-label-single);
	color: var(--c4-color-accent);
}

.c4-single__cat:hover { text-decoration: underline; }

/* 배지 모양 — [블로그 > 목록] '카드 모양' 세로일 때(single.php · 2026-10-13 사용자 지시 "상세에서는 카테고리를 배지 디자인으로 통일").
   카드 배지(card.css .c4-card__badge)와 같은 토큰 — 포인트 컬러 바탕 · 흰 글자 14 굵게 · 알약. 링크라 누르면 그 카테고리 목록. */
.c4-single__cat--badge {
	display: inline-block;
	padding: var(--c4-card-badge-pad);
	border-radius: var(--c4-radius-tag);   /* 헤더 전화예약 버튼과 같은 둥글기(2026-10-14 사용자 지시 — 처음엔 알약) */
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
	font-size: var(--c4-fs-body4);
	line-height: var(--c4-lh-body);
}

.c4-single__cat--badge:hover { text-decoration: none; opacity: .85; }

.c4-single__title {
	margin-top: var(--c4-single-cat-gap);
	font-size: var(--c4-fs-single-title);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-single-title);
	color: var(--c4-color-text);
}

/* 부제목 — <h1> 안 윗줄(글 편집 화면 '부제목' · inc/subtitle.php · 2026-10-13 사용자 지시 "카드처럼 두 줄로").
   제목과 한 <h1> 이라 읽기 프로그램은 '부제목 제목'으로 한 번에 읽는다. 비면 요소가 없다. */
.c4-single__subtitle {
	display: block;
	margin-bottom: var(--c4-single-subtitle-gap);
	font-size: var(--c4-single-subtitle-fs);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
}

/* 제목 · 날짜 아래 검은 선 한 줄(2026-10-15 사용자 지시 '상세페이지 제목 · 날짜 밑에 검은색 선' · '상세는 전부 동일하게') — 블로그 글 · 진료과목 상세.
   공지 상세는 이 파일이 실리지 않아 notice.css 에 같은 규칙이 있다(값 · 토큰 같음).
   ★ 테두리가 아니라 제목 묶음(flex 세로)의 마지막 줄 — 1360 미만에서 묶음에 좌우 여백(24)이 있어 테두리는 글 폭보다 넓게 그어졌다. 줄은 글 폭과 같다. */
.c4-single__head::after {
	content: "";
	align-self: stretch;
	height: var(--c4-border-w);
	margin-top: var(--c4-single-head-line-gap);
	background: var(--c4-color-text);
}

/* 날짜 — ★ 카드 날짜와 크기·굵기·색이 **모두** 다르다. 같은 토큰을 쓰지 말 것.
   Text style 이 없어 렌더 값으로 확정한 예외다(DESIGN-TOKENS §2-4). */
.c4-single__date {
	margin-top: var(--c4-single-date-gap);
	font-size: var(--c4-fs-single-date);
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-muted);
}

/* ==========================================================================
   대표 이미지
   ★ **원본 비율 그대로 폭 100%.** aspect-ratio 로 자르지 말 것 —
     고정 크롭(5:3)은 카드 썸네일에만 해당한다(DESIGN-TOKENS §3-6).
   ★ 없는 글은 PHP 가 요소째 렌더하지 않는다. 카드와 달리 기본 썸네일로 대체하지 않는다.
   ========================================================================== */

.c4-single__thumb {
	margin: 0;
}

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

/* 대표 이미지 → 본문 : 아티클 블록 간격과 같다. */
.c4-single__thumb + .c4-entry-content {
	margin-top: var(--c4-gap-block);
}

/* ==========================================================================
   본문 ↔ 중간 배너 ↔ 관련글
   ★ 값이 --c4-gap-block(40/28) 과 우연히 같아 보여도 의미가 달라 토큰을 분리한다.
   ========================================================================== */

.c4-banner,
.c4-related {
	margin-top: var(--c4-single-banner-gap);
}

/* 목록으로 — 관련 글 아래 가운데 · 앞에 왼쪽 화살표(2026-10-14 사용자 지시 · 처음엔 본문 바로 아래 · 모양은 헤더 전화예약 버튼 .c4-cta 그대로 — 글자 나눔명조 · 둘레 선은 base.css · header.css) */
.c4-single__back {
	margin: var(--c4-single-back-gap) 0 0;
	text-align: center;
}

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

@media (max-width: 767.98px) {
	.c4-single {
		padding-top: var(--c4-page-pt-m);
		/* 하단은 PC · 모바일이 같아 다시 선언하지 않는다. */
	}

	.c4-single__head    { margin-bottom: var(--c4-single-head-gap-m); }
	.c4-single__head::after { margin-top: var(--c4-single-head-line-gap-m); }
	.c4-single__title   { font-size: var(--c4-fs-single-title-m); }
	.c4-single__subtitle { font-size: var(--c4-single-subtitle-fs-m); }
	.c4-single__date    { margin-top: var(--c4-single-date-gap-m); }

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

	.c4-banner,
	.c4-related { margin-top: var(--c4-single-banner-gap-m); }
	.c4-single__back { margin-top: var(--c4-single-back-gap-m); }
}