/* ============================================================
   Questions — 프런트엔드 스타일

   설계 의도 (v1.3에서 개정)
   · 제목은 굵은 고딕, 본문은 명조. 행간을 넓혀 읽는 리듬을 늦춘다
   · 상단 레일이 시그니처. 하나의 질문을 읽는 동안
     나머지 질문이 항상 시야에 있어야 한다
     ("사건은 하나지만, 질문은 하나가 아닙니다")
   · 색은 흑백 + 레드 하나. 탐구가 없어져 청자/남색 구분이 필요 없어졌다
   · 장식을 줄이고 여백과 활자로 위계를 만든다

   ★ 색·서체 토큰은 이 파일이 유일한 출처다.
     assets/qc-type.css 는 그 토큰을 쓰는 규칙만 둔다.
     (wp-login.php 와 헤더 바는 .qc-page 바깥이라 qc-login.css /
      qc-account.css 가 값을 따로 갖는다 — 상속이 닿지 않는다)
   ============================================================ */

.qc-page {
	/* ── 색 : 흑백 + 레드 ── */
	--qc-ink:      #111111;
	--qc-ink-soft: #333333;
	--qc-muted:    #666666;
	--qc-faint:    #999999;

	--qc-paper:    #f5f5f5;
	--qc-surface:  #ffffff;
	--qc-line:     #dddddd;
	--qc-line-2:   #ececec;

	--qc-red:      #d81f26;
	--qc-red-soft: #fdeced;

	/* 옛 이름은 무채색으로 흡수한다. 기존 마크업이 그대로 따라온다. */
	--qc-point:        #111111;
	--qc-point-soft:   #f0f0f0;
	--qc-inquiry:      #111111;
	--qc-inquiry-soft: #f0f0f0;

	/* ── 서체 ──
	   바꾸려면 여기 두 줄만 고친다.
	   웹폰트는 inc/templates.php 의 wp_enqueue_style 이 부른다.

	   ★ 명조는 쓰지 않는다. (v1.3.2)
	     참고 사이트의 세리프는 영문이고, 한글 본문은 고딕이다.
	     --qc-serif 라는 이름은 남기되 값은 고딕이다 —
	     이 이름을 쓰는 규칙이 다섯 군데 있어 한 번에 바꾸려면 이 편이 안전하다. */
	--qc-sans:  'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--qc-serif: var(--qc-sans);
	--qc-mono:  'Nanum Gothic Coding', 'D2Coding', ui-monospace, monospace;

	/* ── 폭 ──
	   ★ .qc-page 자체는 더 이상 폭을 제한하지 않는다.
	     이슈 페이지의 질문 목록이 본문보다 넓어야 하는데,
	     여기서 40rem으로 잠그면 안쪽에서 75rem을 줘도 잘린다.
	     폭은 블록마다 스스로 정한다 — 본문은 --qc-w, 목록은 --qc-wide. */
	--qc-w:    52rem;   /* 본문 */
	--qc-side: 13rem;   /* POLL */
	--qc-gap:   3rem;   /* 본문과 POLL 사이 */

	/* ★ 넓은 폭 = 본문 + 양쪽에 (사이 여백 + POLL).
	     이렇게 잡아야 질문 목록의 굵은 선이 POLL 오른쪽 끝까지 닿고,
	     왼쪽으로도 같은 만큼 나간다. 52 + 2×(3+13) = 84rem. */
	--qc-wide: calc(var(--qc-w) + 2 * (var(--qc-gap) + var(--qc-side)));

	max-width: var(--qc-wide);
	margin: 0 auto;
	padding: 3rem 1.25rem 5rem;
	font-family: var(--qc-sans);
	color: var(--qc-ink);
	background: #fff;
	font-size: 1.0625rem;
	line-height: 1.85;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/*
 * ★ 폭은 두 가지뿐이다 — 본문 폭(--qc-w)과 넓은 폭(--qc-wide).
 *
 *   기본은 본문 폭이다. .qc-page 가 넓어졌으므로 이 기본값이 없으면
 *   팩트카드 목록 같은 것이 84rem으로 퍼진다.
 *
 *   넓은 폭을 쓰는 것만 아래에 **이름으로 적는다.**
 *   전에는 :not() 을 이어 붙여 제외했는데, 그러면 특정도가 계속 높아져
 *   나중에 추가한 규칙이 밀린다. 실제로 .qc-question 이 그렇게 밀려
 *   qc-point.css 에서 84rem을 줘도 52rem으로 잡혔다.
 *   ★ 새로 넓은 블록이 생기면 아래 목록에 한 줄 추가하면 된다.
 */
.qc-page > * {
	max-width: var(--qc-w);
	margin-left: auto;
	margin-right: auto;
}

.qc-page > .qc-ihead,
.qc-page > .qc-plist,
.qc-page > .qc-question,
.qc-page > .qc-issue__main,
.qc-page > .qc-point__main,
.qc-page > .qc-nav,
.qc-page > .qc-rail {
	max-width: var(--qc-wide);
}

@media (min-width: 48rem) {
	.qc-page { padding: 4.5rem 2rem 7rem; }
}

/*
 * ★ 바깥 여백도 흰색.
 *
 *   .qc-page 밖은 테마(Blocksy)가 칠한다. 옅은 회색/청자 기운이 남는 것은
 *   우리 토큰이 아니라 테마 배경이다. q_* 페이지에서만 덮는다 —
 *   사이트 전체를 건드리면 다른 화면까지 바뀐다.
 */
/* qc-check: dom-verified
 *
 *   v1.3.2 — 논점·이슈 페이지에서 좌우 여백이 흰색이 되는 것을 확인.
 *   v1.7.1 — 메인 실측 (편집장 브라우저)
 *
 *     html                    rgba(0,0,0,0)
 *     body                    rgb(250,251,252)   ← Blocksy 가 칠한다
 *       #main-container       rgba(0,0,0,0)
 *         #main.site-main     rgba(0,0,0,0)
 *           .qc-page--main    rgb(255,255,255)   ← 우리 것은 흰색
 *
 *     body class: home blog logged-in wp-embed-responsive wp-theme-blocksy
 *
 *   ★ single-q_* 만 잡고 있어 메인(home blog)이 빠져 있었다.
 *     .home 은 정적 페이지든 최신 글이든 붙고, .blog 는 최신 글일 때 붙는다.
 *     둘 다 적어 어느 설정이든 걸리게 한다.
 *
 *   배경색만 바꾼다. display 도 position 도 건드리지 않으므로
 *   레이아웃이 무너질 수 없다 — [data-header] 때와 다른 종류다.
 */
body.home,
body.blog,
body.single-q_issue,
body.single-q_point,
body.single-q_inquiry,
body.single-q_fact {
	background: #fff;
}

/* qc-check: dom-verified — 같은 배포에서 확인. 역시 배경색만 바꾼다.
   실측에서 이 래퍼들은 이미 투명이었지만, 테마 설정이 바뀌면 색이 들어올 수 있어 남긴다. */
body.home #main-container,
body.blog #main-container,
body.single-q_issue #main-container,
body.single-q_point #main-container,
body.single-q_inquiry #main-container,
body.single-q_fact #main-container,
body.single-q_issue .site-main,
body.single-q_point .site-main,
body.single-q_inquiry .site-main,
body.single-q_fact .site-main,
body.single-q_issue [class*='ct-container'],
body.single-q_point [class*='ct-container'],
body.single-q_inquiry [class*='ct-container'],
body.single-q_fact [class*='ct-container'] {
	background: #fff;
}

/* ── 머리말 ───────────────────────────── */

.qc-head { margin-bottom: 2.75rem; }

.qc-head__issue {
	display: inline-block;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--qc-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--qc-line);
	padding-bottom: 0.15rem;
	margin-bottom: 1.75rem;
	transition: color .15s, border-color .15s;
}
.qc-head__issue:hover {
	color: var(--qc-ink);
	border-color: var(--qc-ink);
}

/* ── 위치 레일 (시그니처) ─────────────── */

.qc-rail {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-bottom: 2rem;
	padding-bottom: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.qc-rail::-webkit-scrollbar { display: none; }

.qc-rail__item {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	min-width: 3.75rem;
	text-decoration: none;
	color: var(--qc-faint);
}

/* 연결선 — 이것들이 한 묶음이라는 표시 */
.qc-rail__item::before {
	content: '';
	position: absolute;
	top: 0.9375rem;
	left: -50%;
	width: 100%;
	height: 1px;
	background: var(--qc-line);
	z-index: 0;
}
.qc-rail__item:first-child::before { display: none; }


.qc-rail__label {
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}


.qc-rail__item--point.is-current .qc-rail__label { color: var(--qc-point); font-weight: 600; }

.qc-rail__item--inquiry.is-current .qc-rail__label { color: var(--qc-inquiry); font-weight: 600; }


/* ── 종류·위치 ────────────────────────── */

.qc-head__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.qc-kind {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.625rem;
	border-radius: 2px;
}
.qc-kind--inquiry { background: var(--qc-inquiry-soft); color: var(--qc-inquiry); }
.qc-kind--archived {
	background: transparent;
	color: var(--qc-muted);
	border: 1px solid var(--qc-line);
}

.qc-pos {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--qc-faint);
	letter-spacing: 0.04em;
}
.qc-pos span { margin: 0 0.15rem; }

/* ── 질문 ─────────────────────────────── */

/*
 * ★ 질문 제목 — **타이포그래피만** 여기서 정한다.
 *
 *   ① 선택자에서 h1 을 뺐다.
 *      h1.qc-question 은 (0,2,1) 이라 뒤에 오는 파일의
 *      .qc-page--point .qc-question (0,2,0) 이 이길 수 없었다.
 *      기본 규칙이 페이지별 규칙을 이기면, 제목을 손댈 때마다
 *      같은 함정에 빠진다. 이길 쪽에 h1 을 붙여 올리는 것은
 *      함정을 하나 더 만드는 것이다 — **기본을 낮춘다.**
 *
 *   ② margin·padding 을 뺐다.
 *      그것은 타이포그래피가 아니라 배치다. 배치는 페이지마다 다르고,
 *      기본 규칙이 0으로 못 박고 있으면 페이지 쪽에서 준 값이
 *      특정도가 같을 때 순서에 따라 뒤집힌다.
 *      **여기서 아예 정하지 않으면 특정도와 무관하게 해결된다.**
 *
 *   페이지별 배치는 qc-point.css · qc-issue.css 가 갖는다.
 */
.qc-page .qc-question {
	font-family: var(--qc-sans);
	font-size: 1.5rem;
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--qc-ink);
	text-wrap: pretty;
	margin: 2rem 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.qc-page .qc-question { font-size: 1.75rem; }
}

/*
 * 배치를 따로 정하지 않는 화면(팩트카드 등)을 위한 기본값.
 * margin 을 아예 비워두면 브라우저 기본 h1 여백(0.67em)이 들어와
 * 화면마다 제각각이 된다. 낮은 특정도로 하나만 깔아둔다.
 */

/* ── 축약 브리핑 ──────────────────────── */

.qc-brief {
	background: var(--qc-paper);
	border-left: 1px solid var(--qc-line);
	padding: 1.25rem 1.375rem;
	margin-bottom: 2.75rem;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--qc-ink-soft);
}
.qc-brief__body p { margin: 0 0 0.75rem; }
.qc-brief__body p:last-child { margin-bottom: 0; }

.qc-brief__more {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--qc-muted);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.qc-brief__more:hover { color: var(--qc-ink); }

/* ── 본문 ─────────────────────────────── */

.qc-body { margin-bottom: 3.5rem; }

.qc-body p {
	margin: 0 0 1.35rem;
	text-wrap: pretty;
}
.qc-body p:last-child { margin-bottom: 0; }

.qc-body strong { font-weight: 600; }

.qc-body h2, .qc-body h3 {
	font-family: var(--qc-serif);
	font-size: 1.1875rem;
	line-height: 1.6;
	margin: 2.5rem 0 1rem;
	font-weight: 700;
}

.qc-body ul, .qc-body ol { margin: 0 0 1.35rem; padding-left: 1.25rem; }
.qc-body li { margin-bottom: 0.5rem; }

.qc-body a { color: var(--qc-point); text-underline-offset: 3px; }

/* ── 섹션 공통 ────────────────────────── */

.qc-page .qc-sec__head {
	font-family: var(--qc-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--qc-muted);
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--qc-line);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
}

.qc-sec__note {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--qc-faint);
}

/* ── 편집부 시드 논거 ─────────────────── */


/* ── 관점 묶음 ────────────────────────── */

.qc-cluster { margin-bottom: 3.5rem; }
.qc-cluster__body { font-size: 1rem; color: var(--qc-ink-soft); }
.qc-cluster__body p { margin: 0 0 1rem; }

/* ── 의견 (자리 표시) ─────────────────── */

.qc-opinions { margin-bottom: 4rem; }


/* ── 같은 이슈의 다른 질문 ────────────── */
/* 북극성 지표를 움직이는 곳. 하나만 읽고 나간 방문은 실패다 */

.qc-siblings {
	border-top: 1px solid var(--qc-ink);
	padding-top: 1.5rem;
}

.qc-page .qc-siblings__head {
	font-family: var(--qc-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--qc-ink);
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

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

.qc-sib { border-bottom: 1px solid var(--qc-line-2); }
.qc-sib:last-child { border-bottom: 0; }

.qc-sib__link {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 0;
	color: var(--qc-ink);
	text-decoration: none;
	transition: opacity .15s;
}
.qc-sib__link:hover { opacity: 0.6; }

/* 준비 중 표시 — 읽는 것은 막지 않는다 */
.qc-sib__soon {
	display: inline-block;
	margin-left: 0.4rem;
	font-family: var(--qc-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--qc-faint);
	vertical-align: 0.15em;
	white-space: nowrap;
}

.qc-sib__badge {
	flex: 0 0 auto;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.1875rem 0.4375rem;
	border-radius: 2px;
}
.qc-sib__badge--point   { background: var(--qc-point-soft);   color: var(--qc-point); }
.qc-sib__badge--inquiry { background: var(--qc-inquiry-soft); color: var(--qc-inquiry); }

.qc-sib__q {
	font-family: var(--qc-serif);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-wrap: pretty;
}

/* ── 접근성 ───────────────────────────── */

.qc-page a:focus-visible,
.qc-page button:focus-visible {
	outline: 2px solid var(--qc-point);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.qc-page * { transition: none !important; }
}

/* ============================================================
   탐구 — 논점과 뼈대는 같고 색만 다르다
   ============================================================ */

.qc-page--inquiry .qc-body a {
	color: var(--qc-inquiry);
}
.qc-page--inquiry a:focus-visible,
.qc-page--inquiry button:focus-visible {
	outline-color: var(--qc-inquiry);
}

/* ── 현재까지의 잠정 정리 ─────────────── */
/* 탐구의 생명줄. 없으면 링크 무덤이 된다 */

.qc-summary { margin-bottom: 3.5rem; }

.qc-summary__body {
	background: var(--qc-inquiry-soft);
	border-left: 1px solid var(--qc-inquiry);
	padding: 1.25rem 1.375rem;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--qc-ink-soft);
}
.qc-summary__body p { margin: 0 0 0.9rem; }
.qc-summary__body p:last-child { margin-bottom: 0; }

/* ── 조건 지도 ────────────────────────── */

.qc-condmap { margin-bottom: 3.5rem; }
.qc-condmap__body { font-size: 1rem; color: var(--qc-ink-soft); }
.qc-condmap__body p { margin: 0 0 1rem; }
.qc-condmap__body ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.qc-condmap__body li { margin-bottom: 0.5rem; }

/* ── 자료 ─────────────────────────────── */

.qc-evidence { margin-bottom: 4rem; }

/* ============================================================
   팩트카드
   ============================================================ */

.qc-kind--fact  { background: var(--qc-paper); color: var(--qc-ink-soft); }

.qc-page .qc-question--fact {
	font-size: 1.5rem;
	line-height: 1.5;
}
@media (min-width: 48rem) {
	.qc-page .qc-question--fact { font-size: 1.875rem; }
}

.qc-contributor {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--qc-muted);
}
.qc-contributor strong { font-weight: 600; color: var(--qc-ink); }

/* 팩트카드 본문은 표와 목록이 많다 */

.qc-body--fact { margin-top: 2.5rem; }

.qc-body--fact table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
}
.qc-body--fact th,
.qc-body--fact td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--qc-line);
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}
.qc-body--fact th {
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--qc-muted);
	border-bottom-width: 1px;
	border-bottom-color: var(--qc-ink);
	white-space: nowrap;
}

.qc-body--fact blockquote {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.125rem;
	background: var(--qc-paper);
	border-left: 1px solid var(--qc-line);
	font-size: 0.9375rem;
	color: var(--qc-ink-soft);
}
.qc-body--fact blockquote p:last-child { margin-bottom: 0; }

.qc-body--fact pre {
	background: var(--qc-paper);
	padding: 1rem 1.125rem;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
}

/* ── 말해주지 않는 것 ─────────────────── */

.qc-notshow { margin-bottom: 3rem; }

.qc-notshow__body {
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	padding: 1.125rem 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--qc-ink-soft);
}
.qc-notshow__body p { margin: 0 0 0.75rem; }
.qc-notshow__body p:last-child { margin-bottom: 0; }

/* ── 출처 ─────────────────────────────── */

.qc-sources { margin-bottom: 3.5rem; }

.qc-sources__list {
	list-style: none;
	counter-reset: qcsrc;
	margin: 0;
	padding: 0;
}
.qc-source {
	counter-increment: qcsrc;
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}
.qc-source::before {
	content: counter(qcsrc);
	position: absolute;
	left: 0;
	top: 0.5rem;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--qc-faint);
}
.qc-source a {
	color: var(--qc-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--qc-line);
	word-break: break-all;
}
.qc-source a:hover { color: var(--qc-ink); border-color: var(--qc-ink); }

.qc-sib__badge--issue { background: var(--qc-ink); color: #fff; }

/* ============================================================
   이슈 허브
   ============================================================ */

@media (min-width: 48rem) {
}

.qc-issue-thumb { margin: 0 0 2.5rem; }
.qc-issue-thumb img { width: 100%; height: auto; display: block; }


/* ── 이 이슈의 질문들 ─────────────────── */


/* ── 사실 관계 ────────────────────────── */


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

.qc-fact { border-bottom: 1px solid var(--qc-line-2); }
.qc-fact:last-child { border-bottom: 0; }

.qc-fact__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
	padding: 0.875rem 0;
	text-decoration: none;
	color: var(--qc-ink-soft);
	transition: color .15s;
}
.qc-fact__link:hover { color: var(--qc-ink); }

.qc-fact__title { font-size: 0.9375rem; line-height: 1.6; }

.qc-fact__asof {
	font-size: 0.75rem;
	color: var(--qc-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}