/**
 * questions-core / assets/qc-issue.css
 *
 * 이슈 페이지 — 제목 · 질문 목록 · 본문 · POLL.
 *
 * 확정 시안 기준. 배경은 **흰색**이다. 흑백 + 레드만 쓴다.
 *
 * ★ 폭이 세 겹이다
 *     ① 질문 목록  — 화면 폭을 거의 다 쓴다 (--qc-wide)
 *     ② 본문       — 가운데, 좁게 (--qc-w)
 *     ③ POLL       — 본문 오른쪽 여백. 본문과 **같은 높이에서 시작**한다
 *   목록만 넓은 이유는 그것이 이 페이지의 본체이기 때문이다.
 *   브리핑은 읽을 사람만 읽으면 되고, 질문은 모두가 봐야 한다.
 */

/* 폭 토큰(--qc-w · --qc-side · --qc-gap · --qc-wide)은 questions.css 가 갖는다. */

/* ---------- 제목 ---------- */

.qc-page .qc-ihead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 1rem 2rem;
	max-width: var(--qc-wide);
	margin: 2.2rem auto 2.6rem;
}

/*
 * 테두리 박스 없이 큰 글씨만.
 *
 * ★ 롱블랙 노트 제목이 기준이다 (32~36px에 굵기가 강하다).
 *   이보다 작으면 페이지 첫인상이 약해진다. 행간도 여유를 준다.
 */
.qc-page .qc-ihead__title {
	display: block;
	margin: 0;
	font-family: var(--qc-sans);
	font-size: 2.05rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.035em;
	color: var(--qc-ink);
	text-decoration: none;
}

@media (min-width: 700px) {
	.qc-page .qc-ihead__title {
		font-size: 2.6rem;
	}
}

/* 요소 선택자로 특정도를 올리지 않는다. h1 에는 hover 가 걸릴 일이 없다. */
.qc-page .qc-ihead__title:hover {
	color: var(--qc-red);
}

.qc-page .qc-ihead__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7rem;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
	color: var(--qc-ink);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.qc-page .qc-ihead {
		grid-template-columns: 1fr;
		margin-top: 1.4rem;
	}

	.qc-page .qc-ihead__title {
		font-size: 1.75rem;
	}

	.qc-page .qc-ihead__meta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------- 공유 ---------- */

.qc-page .qc-share {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.qc-page .qc-share__btn {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	color: var(--qc-ink);
	text-decoration: none;
}

.qc-page .qc-share__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

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

.qc-page .qc-share__msg {
	font-size: 0.75rem;
	color: var(--qc-red);
}

/* ---------- 질문 목록 ---------- */

/*
 * ★ 위아래 선은 POLL 오른쪽 끝까지 닿는다.
 *   --qc-wide 가 본문 + 양쪽 (여백+POLL) 이므로 목록에 그대로 주면 된다.
 *   참고 사이트에서 제목 아래 가로선이 화면을 가로지르는 것과 같은 방식이다.
 *
 * ★ 선은 전부 1px 검정이다.
 *   위아래와 줄 사이를 굵기로 구분하지 않는다 — **길이로 구분한다.**
 *   줄 사이 선은 글이 시작하는 자리에서 본문 오른쪽 끝까지만 긋는다.
 *   길이가 다르므로 같은 굵기·같은 색이어도 경계가 읽힌다.
 */
/*
 * ★ 배율 변수 하나로 줄인다. (v1.8)
 *
 *   좁은 화면에서 이 블록이 무거워 보인다. 각 값에 0.77을 곱해 적으면
 *   나중에 "조금 더 줄여줘" 할 때 열 군데를 고쳐야 하고,
 *   그것이 §3의 "같은 것을 여러 곳이 정한다"가 된다.
 *
 *   **안쪽 값은 전부 자기 기준값 × --qc-plist-scale 이다.**
 *   다음 조절은 숫자 하나다.
 *
 *     document.querySelector('.qc-page')
 *       .style.setProperty('--qc-plist-scale', '0.8');
 */
.qc-page .qc-plist {
	--qc-plist-scale: 1;
	--qc-plist-q: 1rem;        /* 질문 */
	--qc-plist-n: 0.85rem;     /* 의견 수 */
	--qc-plist-go: 0.78rem;    /* [참여하기] */
	--qc-plist-row: 0.5rem;    /* 줄 위아래 여백 */
	--qc-plist-in: 7rem;       /* 왼쪽 들여쓰기 */

	max-width: var(--qc-wide);
	margin: 0 auto 3rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--qc-ink);
	border-bottom: 1px solid var(--qc-ink);
}

.qc-page .qc-plist__row {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(0.6rem * var(--qc-plist-scale));
	padding:
		calc(var(--qc-plist-row) * var(--qc-plist-scale)) 0
		calc(var(--qc-plist-row) * var(--qc-plist-scale))
		calc(var(--qc-plist-in) * var(--qc-plist-scale));
}

.qc-page .qc-plist__row:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(var(--qc-plist-in) * var(--qc-plist-scale));
	right: calc(var(--qc-gap) + var(--qc-side));
	bottom: 0;
	height: 1px;
	background: var(--qc-ink);
}

/*
 * ★ 좁은 화면에서만 줄인다. 넓은 화면은 건드리지 않는다.
 *   값은 편집장이 브라우저에서 맞춘 것이다.
 */
@media (max-width: 900px) {
	.qc-page .qc-plist {
		--qc-plist-scale: 0.77;
		--qc-plist-in: 0rem;
	}

	.qc-page .qc-plist__row:not(:last-child)::after {
		left: 0;
		right: 0;
	}
}

/*
 * ★ 제목 · [23] · [참여하기]가 왼쪽에서 한 덩어리로 붙는다.
 *   오른쪽 끝으로 밀어 놓으면 제목과 멀어져서, 그 숫자가 무엇의
 *   숫자인지 눈으로 이어지지 않는다.
 */
.qc-page .qc-plist__q {
	font-family: var(--qc-sans);
	font-size: calc(var(--qc-plist-q) * var(--qc-plist-scale));
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--qc-ink);
	text-decoration: none;
}

.qc-page .qc-plist__q:hover {
	color: var(--qc-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 0이면 아무것도 표시하지 않는다.
   "0"이 붙어 있으면 아무도 안 왔다는 사실이 먼저 보인다. */
.qc-page .qc-plist__n {
	font-family: var(--qc-sans);
	font-size: calc(var(--qc-plist-n) * var(--qc-plist-scale));
	font-weight: 700;
	color: var(--qc-red);
	font-variant-numeric: tabular-nums;
}

.qc-page .qc-plist__n:not(:empty)::before { content: '['; }
.qc-page .qc-plist__n:not(:empty)::after  { content: ']'; }

.qc-page .qc-plist__go {
	flex: none;
	padding: calc(0.3rem * var(--qc-plist-scale)) calc(0.8rem * var(--qc-plist-scale));
	font-family: var(--qc-sans);
	font-size: calc(var(--qc-plist-go) * var(--qc-plist-scale));
	font-weight: 700;
	color: #fff;
	background: var(--qc-ink);
	text-decoration: none;
	white-space: nowrap;
}

.qc-page .qc-plist__go:hover {
	background: var(--qc-red);
	color: #fff;
}

/* ---------- 본문 + POLL ---------- */

/*
 * 가운데 열에 본문, 오른쪽 여백에 POLL.
 * 왼쪽은 비운다 — 시안 그대로다.
 *
 * position:fixed 를 쓰지 않는다. 시안에서 POLL은 본문과 같은 높이에서
 * 시작하고 함께 흐른다. 화면 좌표에 붙이면 그 관계가 끊긴다.
 */
.qc-page .qc-issue__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: var(--qc-w);
	margin: 0 auto;
}

/*
 * ★ 분기점 1400px (v1.3.4)
 *   84rem = 1344px 에 좌우 여백이 필요하다. 1100px 에서 3단을 만들면
 *   좌우 칸이 POLL 보다 좁아져 가로로 넘친다. 논점 페이지와 같은 값을 쓴다.
 */
@media (min-width: 1400px) {
	.qc-page .qc-issue__main {
		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);
		align-items: start;
	}

	.qc-page .qc-issue__main > .qc-body {
		grid-column: 2;
	}

	.qc-page .qc-issue__main > .qc-polls {
		grid-column: 3;
		width: var(--qc-side);
		margin-left: var(--qc-gap);
	}
}

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

.qc-page .qc-polls {
	max-width: var(--qc-w);
	margin: 0 auto;
	border-top: 1px solid var(--qc-ink);
	border-bottom: 1px solid var(--qc-ink);
}

.qc-page .qc-polls__item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0;
}

.qc-page .qc-polls__item + .qc-polls__item {
	border-top: 1px solid var(--qc-line);
}

/* 막대그래프 아이콘. 이미지 없이 네 줄로 그린다. */
.qc-page .qc-polls__icon {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
}

.qc-page .qc-polls__icon i {
	display: block;
	width: 4px;
	background: var(--qc-ink);
}

.qc-page .qc-polls__icon i:nth-child(1) { height: 6px; }
.qc-page .qc-polls__icon i:nth-child(2) { height: 11px; }
.qc-page .qc-polls__icon i:nth-child(3) { height: 15px; }
.qc-page .qc-polls__icon i:nth-child(4) { height: 18px; }

.qc-page .qc-polls__item--quadrant .qc-polls__icon i:nth-child(1) { height: 18px; }
.qc-page .qc-polls__item--quadrant .qc-polls__icon i:nth-child(2) { height: 7px; }
.qc-page .qc-polls__item--quadrant .qc-polls__icon i:nth-child(3) { height: 14px; }
.qc-page .qc-polls__item--quadrant .qc-polls__icon i:nth-child(4) { height: 9px; }

.qc-page .qc-polls__title {
	font-family: var(--qc-sans);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--qc-ink);
}

.qc-page .qc-polls__title b {
	font-weight: 700;
}

/* ---------- 없어도 아는 것 ---------- */

.qc-page--issue .qc-sec__head,
.qc-page--issue .qc-sec__note {
	display: none;
}

/*
 * 메인 카드용 — [참여하기] 가 없다.
 * 이슈 페이지의 .qc-plist 는 그대로 두고 변형만 더한다.
 *
 * ★ flex 를 쓰지 않는다. (v1.7.3)
 *
 *   flex 에서는 질문 전체가 한 덩어리라, 두 줄로 감기면 그 덩어리가
 *   폭을 다 먹고 [N] 이 다음 줄로 떨어진다.
 *   글자 흐름에 맡기면 [N] 이 마지막 낱말 뒤에 그대로 붙는다.
 */
.qc-page .qc-plist--bare .qc-plist__row {
	display: block;
	grid-template-columns: none;
}

.qc-page .qc-plist--bare .qc-plist__q {
	display: inline;
}

.qc-page .qc-plist--bare .qc-plist__n {
	display: inline;
	margin-left: 0.35rem;
	/* 숫자와 앞 낱말이 갈라지지 않게 */
	white-space: nowrap;
}