/**
 * questions-core / assets/qc-v1.css
 *
 * v1.0 디자인 토대 — 흑백 + 레드, 넓은 본문, 가벼운 제목.
 *
 * ★ 이 파일은 questions.css(qc-front)의 토큰을 덮어쓴다.
 *   청자색·남색을 폐기하고 무채색으로 간다. 탐구가 없어졌으므로
 *   논점/탐구를 색으로 구분할 이유가 사라졌고, 색이 사라지면
 *   남는 것은 글자와 위계뿐이다. 그것이 이 사이트에 맞다.
 *
 *   레드는 강조 하나에만 쓴다. 이슈마다 다른 색을 넣으면
 *   --qc-red 만 바뀌고 나머지는 그대로다. (shortcodes.php가 주입)
 */

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

   ★ 유일한 출처는 assets/questions.css 다.

     v1.0~v1.3.0 동안 이 파일이 토큰을 다시 정의하고 있었고,
     값이 원본과 미묘하게 달랐다 (#3a3a3a vs #333, #f6f6f6 vs #f5f5f5).
     같은 것을 두 곳에 두면 반드시 어긋난다 —
     이 프로젝트에서 다섯 번 겪은 그 문제다.
   ========================================================================= */

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

/* 질문 제목은 questions.css 가 전담한다.
   여기서 다시 잡으면 특정도 다툼이 생긴다 — 실제로 max-width 가
   그렇게 남아 제목을 본문 폭에 가두고 있었다. */

.qc-page .qc-body,
.qc-page .qc-brief {
	max-width: var(--qc-w);
}

.qc-page .qc-sec__head {
	font-family: var(--qc-sans);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--qc-ink);
}

/* 종류 배지는 더 이상 쓰지 않는다 (논점뿐이다). */
.qc-page .qc-kind {
	display: none;
}

/* ---------- 캐릭터 ---------- */

/* 선 위로 올라오는 구도다. 박스의 위쪽 테두리를 그 "선"으로 쓴다.
   아래 절반이 박스에 가려져 안을 들여다보는 것처럼 보인다. */
.qc-page .qc-char {
	display: block;
	pointer-events: none;
	user-select: none;
}

/* ★ 의견 박스의 캐릭터는 옆으로 빼꼼 내다보는 구도다.
   박스 오른쪽 가장자리에 몸 절반이 가려진 채 걸친다.
   프로토타입 HTML의 좌표를 그대로 옮겼다. */
.qc-page .qc-form__char {
	position: absolute;
	z-index: 2;
	width: 150px;
	left: calc(100% - 14px);
	top: 24px;
}

.qc-page .qc-oplist__char {
	width: 96px;
	margin: 0 auto -1px;
}

.qc-page .qc-after__char {
	width: 76px;
	margin-bottom: 0.4rem;
}

.qc-page .qc-verify__char {
	width: 84px;
	margin: 0 0 -1px;
}

/* 모바일에서는 캐릭터가 박스 밖 오른쪽에 서 있으므로
   그 자리(150px)를 비워두지 않으면 화면 밖으로 잘린다. */
@media (max-width: 760px) {
	.qc-page .qc-form__char {
		width: 122px;
		left: calc(100% - 8px);
		top: 52px;
	}
}

/* ---------- 없어도 아는 것은 쓰지 않는다 ---------- */

/* 의견 카드가 늘어서 있고 아래 [의견 쓰기]가 있으면
   거기가 의견 란이라는 것을 모를 사람이 없다.
   (템플릿에서 지우는 것이 정석이지만, 안 지워도 화면에서는 사라진다) */
.qc-page .qc-opinions > .qc-sec__head,
.qc-page .qc-opinions > .qc-sec__note {
	display: none;
}

/* ---------- 배경 ---------- */

/*
 * ★ 흰색이다.
 *   시안의 옅은 크림은 참고 사이트에서 온 색이고 우리 것이 아니다.
 *   흑백 + 레드만 쓴다.
 */
.qc-page {
	background: #fff;
}