/**
 * questions-core / assets/qc-type.css
 *
 * 색 토큰 + 타이포그래피.
 *
 * ★ 이 파일 하나가 인상의 절반이다.
 *
 *   지금까지 색·폭·배치는 정했지만 **서체와 행간은 한 번도 정하지 않았다.**
 *   그래서 v0.4.0에서 고른 것이 그대로 남아 배치를 다 맞춰도 다른 사이트로 보였다.
 *
 * ★ 참조 대상이 둘이고 역할이 다르다
 *     worksinprogress — 구조와 배치 (헤더 비율, 여백, 목록, 공유 아이콘)
 *     롱블랙          — 타이포그래피 (본문 크기, 특히 행간, 문단 간격)
 *   둘을 섞지 않는다.
 *
 * ★ 롱블랙이 하는 일은 읽는 리듬을 늦추는 것이다
 *   행간이 넓고, 문장마다 줄을 바꾸고, 문단 사이가 시원하다.
 *   Questions의 "무엇이건 한 번 더 생각하자"와 방향이 같다.
 *   1.85에 문단 간격이 좁으면 웹사이트처럼 읽히고,
 *   2.0에 문단이 시원하면 읽을거리처럼 읽힌다. 그 차이다.
 */

/* =========================================================================
   1. 색·서체 토큰은 여기 없다
   =========================================================================

   ★ 유일한 출처는 assets/questions.css 다.
     v1.3.0에서는 여기서 토큰을 다시 정의해 덮어썼는데,
     그러면 같은 값이 두 파일에 남아 언젠가 또 어긋난다.
     원본을 고쳤으므로 사본을 지운다.

     --qc-ink · --qc-paper · --qc-line · --qc-red
     --qc-sans · --qc-serif · --qc-mono · --qc-w · --qc-wide

   서체를 바꾸려면 questions.css 의 세 줄만 고치면 된다.
   웹폰트는 inc/templates.php 의 wp_enqueue_style 세 개가 부른다.

   (wp-login.php 와 헤더 바는 .qc-page 바깥이라 토큰이 상속되지 않는다.
    qc-login.css · qc-account.css 가 값을 따로 갖는 것은 그 때문이고,
    이것만은 어쩔 수 없는 사본이다)
   ========================================================================= */

/* =========================================================================
   2. 타이포그래피
   ========================================================================= */

/* ---------- 본문 ---------- */

/*
 * ★ 고딕 + 넓은 행간.
 *
 *   롱블랙에서 가져올 것은 **행간과 문단 간격**이지 서체가 아니다.
 *   참고 사이트의 세리프는 영문이고 한글 본문은 고딕이다.
 *   행간 2.0과 문단 1.6em이 리듬을 늦추는 역할을 한다.
 */
.qc-page .qc-body {
	font-family: var(--qc-sans);
	font-size: 1.05rem;
	line-height: 2;
	letter-spacing: -0.01em;
	color: var(--qc-ink);
}

.qc-page .qc-body p {
	margin: 0 0 1.6em;
}

.qc-page .qc-body p:last-child {
	margin-bottom: 0;
}

.qc-page .qc-body h2,
.qc-page .qc-body h3 {
	margin: 2.4em 0 0.8em;
	font-family: var(--qc-sans);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.03em;
	font-size: 1.05rem;
}

.qc-page .qc-body h2 { font-size: 1.25rem; }

.qc-page .qc-body a {
	color: var(--qc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

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

.qc-page .qc-body blockquote {
	margin: 2em 0;
	padding: 0 0 0 1.2rem;
	border-left: 1px solid var(--qc-ink);
	font-style: normal;
	color: var(--qc-ink-soft);
}

.qc-page .qc-body ul,
.qc-page .qc-body ol {
	margin: 0 0 1.6em;
	padding-left: 1.3em;
}

.qc-page .qc-body li {
	margin-bottom: 0.6em;
}

/* ---------- 라벨 · 날짜 · 숫자 ---------- */

/*
 * 고정폭. 시안에서 Newsletter · Subscribe · Siam · 날짜가 전부 이것이다.
 * 숫자가 자리를 지키므로 목록에서 흔들리지 않는다.
 */
.qc-page .qc-ihead__meta,
.qc-page .qc-plist__n,
.qc-page .qc-plist__go,
.qc-page .qc-polls__title,
.qc-page .qc-op__date,
.qc-page .qc-react__n {
	font-family: var(--qc-mono);
}

.qc-page .qc-ihead__meta time {
	letter-spacing: 0.02em;
}