/*
 * related.css — 같은 카테고리 글
 *
 * 색 규칙은 '박스 안 목록' 그대로: 일반 항목 보조 텍스트 / 현재 글 기본 텍스트 + 700.
 * 호버는 이 컴포넌트만의 규칙(시안 실측) — 배경 accent-soft + 글자 기본 텍스트. 목차와 통일하지 말 것.
 */

.c4-related {
	margin-top: var(--c4-single-gap-banner);
	border: var(--c4-border-w) solid var(--c4-color-border);
	border-radius: var(--c4-radius-box);
	background: var(--c4-color-white);
}

/* 높이 53(구분선 포함)을 고정하고 글자는 위 16 에 둔다 — 시안 텍스트 y=16 과 일치. */
.c4-related__head {
	height: var(--c4-related-head-h);
	padding: var(--c4-related-head-pad-y) var(--c4-related-head-pad-x) 0;
	border-bottom: var(--c4-border-w) solid var(--c4-color-border);
	font-size: var(--c4-fz-body4);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-accent);
}

/*
 * 리스트 영역 = 스크롤 컨테이너. 최대치이지 고정 높이가 아니다 — 글이 적으면 줄어든다.
 * 좌우 padding 0 이라 항목 호버 배경이 컨테이너 콘텐츠 폭 전체에 닿는다.
 * 스크롤바가 생기면 그 폭만큼 짧아지는 것이 정상이다(음수 마진·오버레이로 없애지 말 것).
 */
.c4-related__list {
	display: flex;
	flex-direction: column;
	max-height: var(--c4-related-max-h);
	padding: var(--c4-related-list-pad-y) 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

/* 항목 사이 간격은 0 — 간격은 항목 padding 으로만 만든다. */
.c4-related__link {
	display: block;
	padding: var(--c4-related-item-pad-y) var(--c4-related-item-pad-x);
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	color: var(--c4-color-text-sub);
	text-decoration: none;
	/* 1줄 말줄임 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.c4-related__link:hover {
	background-color: var(--c4-color-accent-soft);
	color: var(--c4-color-text);
}

/* 현재 글 — 링크가 아니므로 호버 배경이 없다. */
.c4-related__item.c4-is-current > .c4-related__link {
	color: var(--c4-color-text);
	font-weight: var(--c4-fw-bold);
}

/*
 * 커스텀 스크롤바 — 폭 4 · radius pill · grey300 · 위/오른쪽 안쪽 여백(PC 8 / 모바일 6).
 * 오른쪽 여백은 투명 테두리로 만들고 배경을 padding-box 로 잘라 막대 폭 4 를 남긴다.
 *
 * ★ Chromium 121+ 는 scrollbar-width / scrollbar-color 가 선언되면 ::-webkit-scrollbar 를 무시한다.
 *   그래서 표준 속성은 ::-webkit-scrollbar 를 모르는 브라우저(Firefox)에만 준다.
 *   Firefox 는 thin 폭이라 정확히 4 가 되지 않는 것이 정상이다.
 */
.c4-related__list::-webkit-scrollbar {
	width: calc(var(--c4-related-scrollbar-w) + var(--c4-related-scrollbar-inset));
}

.c4-related__list::-webkit-scrollbar-track {
	margin-block: var(--c4-related-scrollbar-inset);
	background: transparent;
}

.c4-related__list::-webkit-scrollbar-thumb {
	border-right: var(--c4-related-scrollbar-inset) solid transparent;
	border-radius: var(--c4-radius-pill);
	background-color: var(--c4-color-scrollbar);
	background-clip: padding-box;
}

@supports not selector(::-webkit-scrollbar) {
	.c4-related__list {
		scrollbar-width: thin;
		scrollbar-color: var(--c4-color-scrollbar) transparent;
	}
}

/* ─────────────────────────────────────────────────────────
   768 미만 — 항목 글자가 한 단계 작다(Body/body3). 나머지 차이는 토큰이 미디어 쿼리에서 바뀐다.
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-related__link {
		font-size: var(--c4-fz-body3);
	}
}