/**
 * questions-core / assets/qc-nav.css
 *
 * 세로 레일(PC) · 가로 바(모바일).
 *
 * ★ 분기점 1400px
 *   84rem = 1344px 에 좌우 여백이 필요하다. 그보다 좁으면 레일 자리가
 *   본문을 침범하므로 가로 바로 바꾼다. qc-point.css 의 3단 분기점과 같다 —
 *   레일과 POLL이 동시에 나타나고 동시에 사라져야 한 쪽만 뜨는 구간이 없다.
 *
 * ★ position: sticky 다 (v1.3.4)
 *   전에는 fixed 로 화면 좌표에 붙여두었는데, 헤더가 top 값보다 높거나
 *   항목이 많으면 **위쪽이 잘려 1번 항목이 안 보였다.**
 *   이제 격자의 왼쪽 칸 안에서 sticky 로 따라온다.
 *   레일이 화면보다 길면 자기 안에서 스크롤된다.
 */

.qc-nav {
	font-family: var(--qc-sans);
}

/* 기본(좁은 화면) — 레일은 없고 바만 보인다 */
.qc-nav__rail {
	display: none;
}

/* =========================================================================
   가로 바 — 모바일·태블릿
   ========================================================================= */

.qc-page .qc-nav__bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	max-width: var(--qc-w);
	margin: 0.9rem 0 1.4rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--qc-line-2);
	font-size: 0.85rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.qc-page .qc-nav__bar::-webkit-scrollbar {
	display: none;
}


/* 왼쪽은 이 페이지 안, 오른쪽은 다른 페이지. 성격이 다르다는 표시다. */
.qc-page .qc-nav__sep {
	flex: none;
	color: var(--qc-line);
}

.qc-page .qc-nav__issue-link,
.qc-page .qc-nav__sheet-btn {
	flex: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: var(--qc-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.qc-page .qc-nav__issue-link:hover,
.qc-page .qc-nav__sheet-btn:hover,
.qc-page .qc-nav__sheet-btn[aria-expanded='true'] {
	color: var(--qc-point);
	border-bottom-color: var(--qc-point);
}

.qc-page--inquiry .qc-nav__issue-link:hover,
.qc-page--inquiry .qc-nav__sheet-btn:hover,
.qc-page--inquiry .qc-nav__sheet-btn[aria-expanded='true'] {
	color: var(--qc-inquiry);
	border-bottom-color: var(--qc-inquiry);
}

/*
 * 바 아래 질문 리스트.
 *
 * ★ 팝업이 아니라 화면에 그대로 둔다. 북극성에 직접 걸린다 —
 *   눌러야만 보이는 것은 보이지 않는 것에 가깝다.
 *
 * 크기는 .qc-plist 의 --qc-plist-scale 이 정한다 (qc-issue.css).
 * 여기서 숫자를 다시 적지 않는다.
 */
.qc-page .qc-nav .qc-plist {
	margin: 0 0 1.6rem;
}

/* 펼침 */
.qc-page .qc-nav__sheet {
	max-width: var(--qc-w);
	margin: -0.8rem 0 1.4rem;
	padding: 0.6rem 0.8rem;
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: 3px;
}

.qc-page .qc-nav__sheet-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/* =========================================================================
   세로 레일 — PC
   ========================================================================= */

@media (min-width: 1400px) {

	/* 가로 바와 기존 상단 위치 레일은 물러난다.
	   상단이 깨끗해지는 것이 이 개편의 부수 효과다. */
	.qc-nav__bar,
	.qc-nav__sheet,
	.qc-page .qc-nav .qc-plist,
	.qc-page .qc-rail {
		display: none !important;
	}

	.qc-nav__rail {
		display: block;
		position: sticky;
		top: 2rem;
		width: var(--qc-side);
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.qc-nav__issue {
		display: block;
		padding-bottom: 0.6rem;
		margin-bottom: 0.8rem;
		border-bottom: 1px solid var(--qc-line);
		font-size: 0.82rem;
		/* 명시한다. 상속(1.85)에 기대면 qc-point.css 의 첫 줄 보정이 거짓이 된다. */
		line-height: 1.45;
		color: var(--qc-muted);
		text-decoration: none;
	}

	.qc-nav__issue:hover {
		color: var(--qc-point);
	}

	.qc-nav__head {
		margin: 0 0 0.5rem;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		color: var(--qc-faint);
	}

	.qc-nav__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.qc-nav__item {
		margin-bottom: 0.55rem;
	}

	/* v1.0: 하위 메뉴와 "논점과 탐구" 제목을 없앴다.
	   v1.1: page_order 배지도 없앴다 — 번호는 제목 안에 하나만 있다.
	   이슈 브리핑 · 질문들 · 팩트카드, 딱 이것만 남는다. */
	.qc-nav__link {
		display: block;
		text-decoration: none;
		line-height: 1.45;
	}

	.qc-nav__kind {
		grid-area: kind;
		font-size: 0.7rem;
		letter-spacing: 0.02em;
	}

	.qc-nav__kind--point {
		color: var(--qc-point);
	}

	.qc-nav__kind--inquiry {
		color: var(--qc-inquiry);
	}

	.qc-nav__q {
		font-size: 0.82rem;
		color: var(--qc-faint);

		/* 질문 전문은 레일에 들어가지 않는다. 두 줄까지만. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.qc-nav__link:hover .qc-nav__q {
		color: var(--qc-ink-soft);
	}

	/* 현재 위치만 진하게. 나머지는 옅게.
	   본문에서 눈을 뺏지 않는 무게를 유지하는 것이 이 규칙의 전부다. */
	.qc-nav__item.is-current .qc-nav__q {
		color: var(--qc-ink);
		font-weight: 600;
	}

	.qc-nav__item.is-current {
		margin-bottom: 0.8rem;
	}

	.qc-nav__item.is-upcoming .qc-nav__q {
		opacity: 0.55;
	}

	/* 하위 메뉴 — 현재 질문 아래에만 */
	.qc-nav__sub {
		margin: 0.35rem 0 0;
		padding: 0 0 0 1.45rem;
		list-style: none;
		border-left: 1px solid var(--qc-line-2);
		margin-left: 0.5rem;
	}

	.qc-nav__sub li {
		margin-bottom: 0.15rem;
	}

	.qc-nav__anchor {
		font-size: 0.78rem;
		color: var(--qc-muted);
		text-decoration: none;
	}

	.qc-nav__anchor:hover {
		color: var(--qc-point);
	}

	.qc-page--inquiry .qc-nav__anchor:hover,
	.qc-page--inquiry .qc-nav__issue:hover {
		color: var(--qc-inquiry);
	}

	.qc-nav__n {
		color: var(--qc-faint);
		font-variant-numeric: tabular-nums;
	}

	/* 팩트카드 — 기본 접힘 */
	.qc-nav__facts {
		margin-top: 0.9rem;
		padding-top: 0.7rem;
		border-top: 1px solid var(--qc-line);
	}

	.qc-nav__facts-btn {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		padding: 0;
		font-family: inherit;
		font-size: 0.78rem;
		color: var(--qc-muted);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.qc-nav__facts-btn:hover {
		color: var(--qc-point);
	}

	.qc-nav__caret {
		font-size: 0.65rem;
		transition: transform 0.15s;
	}

	.qc-nav__facts-btn[aria-expanded='true'] .qc-nav__caret {
		transform: rotate(180deg);
	}

	.qc-nav__facts-list {
		margin: 0.5rem 0 0;
		padding: 0;
		list-style: none;
	}

	.qc-nav__facts-list li {
		margin-bottom: 0.35rem;
	}

	.qc-nav__facts-list a {
		font-size: 0.76rem;
		line-height: 1.5;
		color: var(--qc-faint);
		text-decoration: none;
	}

	.qc-nav__facts-list a:hover {
		color: var(--qc-ink-soft);
	}
}

/* 아주 넓은 화면에서 레일이 너무 멀어지지 않게 붙잡는다 */
/* 폭은 --qc-side 를 따른다. 별도 조정이 필요 없다. */