/**
 * questions-core / assets/qc-point.css
 *
 * 논점 페이지.
 *
 * ★ 이슈 페이지와 같은 구조다. 다른 것은 하나뿐이다 —
 *   질문 목록이 있던 자리에 **논점 제목**이 온다.
 *
 *     [헤더]
 *     이슈 제목                         날짜 · 공유    ← [q_issue_head] 그대로
 *     ────────────────────────────────────────────  ← 1px 검정, 84rem
 *     3. 비싼 집을 부자들만 살 수 있는…               ← 논점 제목
 *     [레일]        [본문]                  [POLL]
 *
 *   폭 토큰(--qc-w · --qc-side · --qc-gap · --qc-wide)은 questions.css 가 갖는다.
 */

/* ---------- 이슈 제목 아래 선 ---------- */

/*
 * 이슈 페이지에서는 질문 목록의 위쪽 테두리가 이 역할을 한다.
 * 논점 페이지에는 목록이 없으므로 직접 긋는다. 같은 1px 검정, 같은 폭.
 */
.qc-page--point .qc-ihead {
	margin-bottom: 0;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--qc-ink);
}

/* ---------- 논점 제목 ---------- */

/*
 * ★ 크기와 서체는 questions.css 가 정한다. 여기서는 자리만 잡는다.
 *   폭도 questions.css 의 "넓은 폭" 목록에 들어 있다 (84rem).
 *
 * ★ 제목 아래 짧은 선은 여기 없다. 격자가 긋는다. (v1.3.8)
 *
 *   전에는 제목의 padding-bottom 자리에 ::after 로 그렸다. 그러면 그 선이
 *   **제목 블록에 속하고**, POLL 위 선은 격자가 자기 여백을 따로 가지므로
 *   둘의 높이가 어긋난다. 시안에서는 셋이 한 줄로 이어져 보여야 한다.
 *
 *   → 선을 격자 칸의 **위쪽 테두리**로 옮겼다.
 *     레일 칸과 POLL 칸이 같은 줄(grid-row 1)에서 시작하므로
 *     테두리가 정확히 같은 높이에 놓인다. 어긋날 수가 없다.
 */
.qc-page--point .qc-question {
	margin-top: 4rem;
	margin-bottom: 2.4rem;   /* ② 제목 → 선 */
}

@media (max-width: 899px) {
	.qc-page--point .qc-question {
		margin-top: 2.6rem;
		margin-bottom: 1.6rem;
	}
}

/* ---------- 이제 안 쓰는 머리말 ---------- */

/*
 * 이슈 제목이 위에 크게 붙었으므로 둘 다 같은 정보의 반복이다.
 * 템플릿에서 지우는 것이 정석이고, 못 지워도 화면에서는 사라진다.
 */
.qc-page--point .qc-head__issue,

/* ---------- 3단 ---------- */

/*
 * 왼쪽 레일 · 가운데 본문 · 오른쪽 POLL.
 *
 * ★ 레일을 격자 안으로 들여왔다 (v1.3.4)
 *   전에는 position:fixed 로 화면 좌표에 붙어 있었다. 그래서 헤더가 그보다
 *   높거나 항목이 많으면 **위쪽이 잘려 1번 항목이 안 보였다.**
 *   이제 칸 전체 높이를 차지하고 그 안에서 sticky 로 따라온다.
 *   본문과 함께 흐르다가 화면 위에 닿을 때만 멈추므로 잘리지 않는다.
 *
 * ★ 분기점이 1400px 인 이유
 *   84rem = 1344px 에 좌우 여백이 필요하다. 1100px 에서 3단을 만들면
 *   좌우 칸이 레일·POLL 보다 좁아져 넘친다.
 */
/* ---------- 격자: 선과 여백을 한 주체가 갖는다 ---------- */

/*
 * ★ 선을 긋는 것도, 그 아래 여백을 주는 것도 **격자 하나**다.
 *
 *   전에는 선은 격자(::before)가 긋고 여백은 각 칸(padding-top)이 줬다.
 *   주체가 둘이면 한쪽을 고칠 때 다른 쪽이 따라오지 않는다 —
 *   선을 좌표에 고정했더니 padding 은 내용만 아래로 미는 역할이 되어
 *   본문과 POLL이 선에서 한참 떨어졌다.
 *
 *   이제 격자가 위쪽에 padding 을 갖고, 선은 그 padding **위**
 *   (top: 0) 에 그린다. 칸들은 아무 여백도 갖지 않는다.
 *   여백을 바꾸려면 padding-top 한 줄만 고치면 되고, 선은 안 움직인다.
 *
 *       ──────        ────────   ← ::before / ::after,  y = 0
 *              ↕ padding-top     ← 격자가 준다. 셋에 똑같이 걸린다
 *       [레일] [본문] [POLL]      ← 나란히 시작
 */
/*
 * ★ 이 요소의 선언은 **이 한 블록**에 전부 있다.
 *
 *   v1.3.11~13 동안 display:grid 는 위쪽 블록에,
 *   position·padding 은 아래쪽 블록에 26줄 떨어져 있었다.
 *   그러다 한쪽이 통째로 사라져 3단 격자가 아예 안 켜졌고,
 *   격자 속성(align-items 포함)이 전부 무시됐다.
 *
 *   한 요소의 정체를 정하는 속성은 흩어놓지 않는다.
 */
.qc-page .qc-point__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: var(--qc-w);
	margin: 0 auto;

	position: relative;
	padding-top: 2.8rem;
}

.qc-page .qc-point__main::before,
.qc-page .qc-point__main::after {
	content: '';
	position: absolute;
	top: 0;
	height: 1px;
	background: var(--qc-ink);
	display: none;
}

/* 왼쪽 — 좁은 화면에서는 레일 칸이 없으므로 눈에 보이는 길이로만 */
.qc-page .qc-point__main::before {
	left: 0;
	width: 6rem;
}

/* 오른쪽 — POLL 칸이 있을 때만 */

@media (max-width: 899px) {
	.qc-page .qc-point__main {
		padding-top: 1.9rem;
	}
}

@media (min-width: 1400px) {
	.qc-page .qc-point__main {
		/* 한 번 더 적는다. 위 블록이 어떤 이유로 빠져도 격자는 켜진다.
		   이 한 줄이 없으면 align-items 도 gap 도 전부 무시된다. */
		display: grid;
		grid-template-columns:
			minmax(0, calc(var(--qc-gap) + var(--qc-side)))
			minmax(0, var(--qc-w))
			minmax(0, calc(var(--qc-gap) + var(--qc-side)));
		gap: 0;
		max-width: var(--qc-wide);

		/*
		 * ★ 여백은 여기서 주지 않는다. (v1.3.15)
		 *
		 *   맞춰야 할 것은 세 **글자**가 아니라 세 **덩어리**의 윗변이다.
		 *
		 *     왼쪽    선 + 앵커바      한 덩어리. 선이 윗변
		 *     가운데  본문            글자 윗변이 곧 윗변
		 *     오른쪽  선 + POLL 목록   한 덩어리. 선이 윗변
		 *
		 *   덩어리 안쪽의 선↔글자 간격은 셋이 서로 다른 값이어야 한다.
		 *   격자 padding 하나가 그 셋을 겸하면 "다른 것을 한 곳이 정하는" 것이
		 *   되어, 0으로 내리면 본문만 맞고 나머지는 선에 달라붙는다.
		 *
		 *   → 격자는 0. 안쪽 간격은 각 덩어리가 자기 값으로 갖는다.
		 */
		padding-top: 0;

		/*
		 * ★ 겹 ① — 상자를 같은 높이에 놓는다.
		 *
		 *   baseline 정렬은 **기준선**을 맞춘다. 실측에서 레일 72.5 /
		 *   본문 72.8 로 정확히 맞았다 — 정렬은 성공했고 목표가 달랐다.
		 *   시안이 요구하는 것은 기준선이 아니라 **글자 윗변**이다.
		 *   baseline 으로는 원리상 도달할 수 없다.
		 */
		align-items: start;
	}

	/*
	 * 왼쪽 선 — 레일 칸 폭의 88%.
	 *
	 * ★ % 를 그대로 쓰면 안 된다. ::before 는 격자 전체(84rem)를 기준으로
	 *   삼는 절대 위치라, 88% 는 74rem 이 된다.
	 *   칸 폭에 대한 비율이 되려면 칸 폭에 곱해야 한다.
	 *   화면에 따라 칸이 좁아져도 앵커바 글자 폭과의 관계가 유지된다.
	 */
	.qc-page .qc-point__main::before {
		width: calc(0.88 * (var(--qc-gap) + var(--qc-side)));
	}

	/* 오른쪽 선은 POLL 폭 */
	.qc-page .qc-point__main::after {
		display: block;
		right: 0;
		width: var(--qc-side);
	}

	/* 칸은 여백을 갖지 않는다. 격자가 이미 줬다. */
	.qc-page .qc-point__main > * {
		grid-column: 2;
	}

	/*
	 * 레일 — 왼쪽 칸.
	 *
	 * align-self: stretch 를 버렸다. 늘어난 항목은 baseline 정렬에 참여하지
	 * 못한다. 대신 **격자 항목 자신을 sticky** 로 만든다 —
	 * 격자 항목의 sticky 는 자기 **grid area** 를 기준으로 움직이므로,
	 * 높이가 내용만큼이어도 1행부터 끝행까지의 영역 안에서 따라온다.
	 */
	.qc-page .qc-point__main > .qc-nav {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		position: sticky;
		top: 2rem;
		padding-right: var(--qc-gap);
	}

	/* 안쪽 레일은 이제 그냥 흐른다. sticky 는 바깥이 갖는다. */
	.qc-page .qc-point__main > .qc-nav .qc-nav__rail {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* POLL — 오른쪽 칸 맨 윗줄 */
	.qc-page .qc-point__main > .qc-polls {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		margin-left: var(--qc-gap);
	}

	/*
	 * POLL 상자는 격자 안에서 자기 위 여백을 갖지 않는다.
	 * 여백은 격자의 padding-top 하나가 준다.
	 *
	 * ★ 격자 padding 값이 얼마든(0이어도) 이 규칙은 그대로 성립한다.
	 *   전 판에서 이것이 격자 padding 의 존재를 전제하는 것처럼 보였던 것은
	 *   여백의 출처가 둘이어서였다. 지금은 상자 쪽을 아예 0으로 두었다.
	 */
	/*
	 * POLL 항목의 글자 metric 을 명시한다.
	 *
	 * 상속하면 .qc-page 의 17px / 1.85 가 들어와, 아래 보정의 1em·1lh 가
	 * 제목이 아니라 상자 기준으로 잡힌다. 실측에서 POLL 만 기준선이
	 * 7px 위였던 것도 이 항목이 그 자체로 `24px 1fr` 격자이고
	 * 기준선이 아이콘 칸에서 잡혔기 때문이다. start 로 바꿔 함께 푼다.
	 */
	.qc-page .qc-point__main > .qc-polls .qc-polls__item {
		align-items: start;
		font-size: 0.82rem;
		line-height: 1.5;
	}

	/* ---- 겹 ② : 반쪽 행간 되돌리기 ----
	 *
	 * ★ 값을 제가 계산해서 빼는 것이 아니다. **브라우저가 넣는다.**
	 *
	 *     1em  = 그 요소의 계산된 font-size
	 *     1lh  = 그 요소의 계산된 line-height
	 *     반쪽 행간 = (1lh − 1em) / 2
	 *
	 *   그만큼 위로 당기면 글자 윗변이 상자 윗변에 붙는다.
	 *   실측 3.0 / 8.4 / 7.2 px 가 각각 자기 값으로 상쇄된다.
	 *
	 *   행간을 바꾸든 크기를 바꾸든 다시 계산할 것이 없다 —
	 *   지난번 손으로 뺀 값이 세 번 어긋난 것과 다른 점이 여기다.
	 *
	 *   ※ 각 칸에서 **첫 줄을 만드는 요소**에 건다.
	 *     .qc-nav 나 .qc-body 같은 껍데기에 걸면 1em·1lh 가
	 *     껍데기의 값으로 잡혀 어긋난다.
	 */
	@supports (margin-top: 1lh) {

		/*
		 * 본문 — 덩어리 위에 선이 없다. 글자 윗변이 곧 윗변이므로
		 * 반쪽 행간만 되돌리고 끝이다.
		 */
		.qc-page .qc-point__main > .qc-body > *:first-child {
			margin-top: calc((1em - 1lh) / 2);
		}

		/*
		 * 앵커바 — 선에서 1.5rem 떨어진다. **마진**으로 건다.
		 * 위에 테두리가 없으므로 마진이 글자만 민다.
		 */
		.qc-page .qc-point__main > .qc-nav .qc-nav__issue {
			margin-top: calc((1em - 1lh) / 2 + 1.5rem);
		}

		/*
		 * POLL — 선에서 1rem 떨어진다. **패딩**이어야 한다.
		 *
		 *   마진으로 걸면 선까지 함께 밀린다. 상자 위에 테두리가 있는
		 *   좁은 화면에서는 테두리가 밀리고, 넓은 화면에서는 상자에
		 *   위쪽 테두리·패딩이 없어 자식 마진이 **상자 밖으로 새어나가**
		 *   상자 자체를 내린다. 어느 쪽이든 선과 글자가 함께 움직인다.
		 *   안쪽만 벌리려면 패딩이다.
		 *
		 *   패딩은 음수가 될 수 없으므로 보정을 부호 그대로 더한다 —
		 *   글자 윗변 = 패딩 + 반쪽 행간 이고,
		 *   패딩 = 1rem − 반쪽 행간 = (1em − 1lh)/2 + 1rem 이다.
		 *   1rem(16px) 이 반쪽 행간(3.3px)보다 크므로 항상 양수다.
		 */
		.qc-page .qc-point__main > .qc-polls .qc-polls__item:first-child {
			padding-top: calc((1em - 1lh) / 2 + 1rem);
		}
	}
}

/* ---------- POLL ---------- */

/*
 * ★ 논점 페이지에서는 상자의 **위** 테두리를 쓰지 않는다.
 *
 *   격자 칸이 그 자리에 선을 긋고 있어서 둘이 겹친다.
 *   칸 선은 격자 맨 위에, 상자 선은 그 아래 padding 만큼 내려간 곳에 —
 *   그 사이가 비어 보이던 공간이다.
 *
 *   아래 테두리는 남긴다. 상자를 닫는 역할이라 겹치지 않는다.
 *
 *   후손 선택자를 쓴다 (`>` 가 아니다). 템플릿에서 [q_polls] 를
 *   무엇으로 감싸든 상자를 찾아낸다.
 */
/*
 * ★ 넓은 화면에서만 없앤다. (v1.3.15)
 *
 *   1400px 아래에서는 격자의 ::after 가 꺼지므로 상자의 테두리가
 *   유일한 선이다. 그것까지 없애면 POLL 위에 선이 아예 사라진다.
 *   전 판에서 좁은 화면 윗선이 없어진 원인이 이것이다.
 */
@media (min-width: 1400px) {
	.qc-page--point .qc-polls {
		border-top: 0;
	}
}

/* ---------- 브리핑 ---------- */

/* v1.3에서 출력 자체를 그만뒀다. 남아 있어도 보이지 않게 둔다. */
.qc-page--point .qc-brief {
	display: none;
}

/* ---------- 하단 "다른 질문" ---------- */

/*
 * 북극성 지표를 움직이는 블록이다. 회색 목록에 선 하나로는 너무 조용해서
 * 아무도 안 눌렀다. 굵기 대신 **글자의 무게**로 올린다.
 */
.qc-page--point .qc-siblings {
	margin-top: 3rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--qc-ink);
}

.qc-page--point .qc-siblings__head {
	margin: 0 0 0.9rem;
	font-family: var(--qc-sans);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--qc-ink);
}

.qc-page--point .qc-siblings__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qc-page--point .qc-sib {
	border-bottom: 1px solid var(--qc-line);
}

.qc-page--point .qc-sib__link {
	display: block;
	padding: 0.8rem 0;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--qc-ink);
	text-decoration: none;
}

.qc-page--point .qc-sib__link:hover {
	color: var(--qc-red);
}

/* 종류 배지는 쓰지 않는다. 탐구가 없어져 구분할 것이 없다. */
.qc-page--point .qc-sib__badge {
	display: none;
}

.qc-page--point .qc-sib__soon {
	margin-left: 0.4rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--qc-faint);
}

/* ---------- 모바일 상단 레일 ---------- */

/*
 * page_order 를 뺐으므로 남는 것은 종류 라벨뿐이다.
 * 탐구가 사라진 지금은 전부 '논점'이라, 현재 위치만 진하게 하는
 * 위치 표시로만 쓴다.
 */
.qc-page .qc-rail__label {
	font-size: 0.72rem;
}