/* ==========================================================================
   sections/related.css — '같은 카테고리 글' 박스
   --------------------------------------------------------------------------
   색 규칙은 §4-10 '박스 안 목록' 한 벌 — 카테고리 드롭다운 · 목차와 같다.
   일반 항목 = 보조 텍스트 / 현재 글 = 기본 텍스트 + 700.
   ★ 아티클 **안**에 있는 박스라 사이드 박스와 위치가 달라도 색 규칙은 같다.
     위치가 다르다는 이유로 본문 기본색을 쓰지 말 것.

   ★★ 호버 방식은 사이드 박스·목차와 **다르다** — 여기는 **배경**만 바뀌고
      글자색은 그대로다. 목차는 반대로 글자색이 포인트 컬러가 된다.
      둘이 다른 것이 정상이며 통일하지 말 것.
   ========================================================================== */

.c4-related {
	border: var(--c4-border-w) solid var(--c4-color-border);
	border-radius: var(--c4-radius-box);
	/* ★ 고정 height 금지(§4-7). 항목이 적으면 박스도 짧아야 한다. */
}

/* ---------- 헤더 ---------- */

.c4-related__head {
	display: flex;
	align-items: center;
	height: var(--c4-related-head-h);
	padding: var(--c4-related-pad);
	border-bottom: var(--c4-border-w) solid var(--c4-color-border);
}

.c4-related__cat {
	font-size: var(--c4-fs-body4);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-accent);
}

/* ---------- 리스트 영역 ----------
   ★★ 좌우 패딩은 **0** 이다. 좌우 여백은 항목 링크가 갖는다.
      여기에 좌우 패딩을 주면 호버 배경이 박스 안쪽까지 못 닿아 양옆에 흰 띠가 남는다.
   ★ height 는 auto, max-height 만 상한이다. 넘칠 때만 스크롤한다. */

.c4-related__scroll {
	max-height: var(--c4-related-max-h);
	overflow-y: auto;
	padding: var(--c4-related-list-pad-y) 0;

	/* 스크롤바 쪽 안쪽 여백 — 위·오른쪽 동일. ★ PC 8 / 모바일 6 으로 값이 달라 통일하지 말 것. */
	scroll-padding-top: var(--c4-related-gutter);

	/* ★ Firefox 는 ::-webkit-scrollbar 계열을 모른다. 두 계열을 함께 선언한다. */
	scrollbar-width: thin;
	scrollbar-color: var(--c4-color-text-faint) transparent;
}

.c4-related__scroll::-webkit-scrollbar {
	width: var(--c4-scrollbar-w);
}

.c4-related__scroll::-webkit-scrollbar-thumb {
	background: var(--c4-color-text-faint);
	border-radius: var(--c4-radius-pill);
	/* 위·오른쪽 여백을 투명 테두리로 만든다(padding 은 스크롤바에 안 먹는다). */
	border-top: var(--c4-related-gutter) solid transparent;
	background-clip: padding-box;
}

.c4-related__scroll::-webkit-scrollbar-track {
	background: transparent;
	margin-right: var(--c4-related-gutter);
}

/* ---------- 항목 ----------
   ★★ 항목 사이 gap 은 **0** 이다. 간격은 링크의 padding 으로만 만든다.
      gap 을 주면 호버 배경이 항목 사이에서 끊겨 줄무늬처럼 보인다.
      결과 높이 PC 40 (8+24+8) / 모바일 38.5 (8+22.5+8). */

.c4-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * ★ 호버 배경이 **리스트 컨테이너 전체 폭**에 닿게 하려고 링크를 block 으로 편다.
 *   배경을 안쪽 span 이나 텍스트 요소에 걸면 글자 폭만큼만 칠해진다.
 *
 * ★ "전체 폭"은 **스크롤 컨테이너의 콘텐츠 폭**을 뜻한다. 스크롤바가 있으면 그 폭만큼
 *   짧아지는 것이 정상이며, 이를 없애려고 음수 마진을 주거나 스크롤바를 오버레이로
 *   만들지 말 것. 시안에서 호버 바가 스크롤바 위까지 덮여 보이는 것은
 *   macOS 오버레이 스크롤바 때문이지 요구사항이 아니다.
 */
.c4-related__link {
	display: block;
	padding: var(--c4-related-item-pad);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);

	/* 제목 1줄 말줄임 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	transition: background-color .15s ease;
}

/*
 * ★ 호버는 **배경만** 바꾼다. 글자색은 기본색(보조 텍스트) 그대로 —
 *   호버 전용 color 선언을 새로 만들지 말 것. 연한 포인트 컬러 배경 위에서
 *   보조 텍스트는 충분히 읽힌다.
 * ★ 현재 글 항목은 <a> 가 아니라 <span> 이라 이 규칙에 아예 걸리지 않는다.
 */
a.c4-related__link:hover {
	background-color: var(--c4-color-accent-soft);
}

/*
 * 현재 보고 있는 글 — 굵기 700 + 기본 텍스트. 목차 현재 항목과 정확히 같은 규칙이다.
 * ★ 배경·크기 변화는 없다. 링크가 아니므로 커서도 기본이다.
 */
.c4-related__item.c4-is-current > .c4-related__link {
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.c4-related__link { transition-duration: 0s; }
}

/* ==========================================================================
   모바일 — 기준선 768
   ★ 항목 폰트가 PC 보다 한 단계 작다(16 → 15). 그래서 항목 높이가 40 → 38.5 가 된다.
     높이를 직접 지정해 맞추지 말 것 — 글자 크기에서 저절로 나오는 값이다.
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-related__scroll {
		max-height: var(--c4-related-max-h-m);
		padding: var(--c4-related-list-pad-y-m) 0;
		scroll-padding-top: var(--c4-related-gutter-m);
	}

	.c4-related__scroll::-webkit-scrollbar-thumb {
		border-top-width: var(--c4-related-gutter-m);
	}

	.c4-related__scroll::-webkit-scrollbar-track {
		margin-right: var(--c4-related-gutter-m);
	}

	.c4-related__link {
		font-size: var(--c4-fs-body3);
	}
}