/**
 * questions-core / assets/qc-opinions.css
 *
 * 의견 영역은 논점 색(청자)을 쓴다. 모든 클래스는 qc- 접두사이고
 * 토큰은 .qc-page에 정의된 --qc-* 를 그대로 쓴다.
 */

/* ---------- 폼 (기본은 접혀 있다) ---------- */

.qc-page .qc-form {
	position: relative;
	max-width: var(--qc-w);
	margin: 1.75rem 0 2.5rem;
}

.qc-page .qc-form__box {
	display: none;
	position: relative;
	width: 650px;
	max-width: 100%;
	margin-top: 1.6rem;
	padding: 1.6rem 1.4rem 1.3rem;
	background: var(--qc-paper);
	border: 1px solid var(--qc-ink);
}

/* 캐릭터가 설 자리를 남긴다. 안 그러면 화면 밖으로 잘린다. */
@media (max-width: 760px) {
	.qc-page .qc-form__box {
		width: calc(100vw - 150px);
	}

	.qc-page .qc-stage__title {
		font-size: 1.35rem;
	}
}

.qc-page .qc-form.is-open .qc-form__box {
	display: block;
}

/* 단계 — 고르기 / 고급진 / 저렴한 */
.qc-page .qc-stage {
	display: none;
}

.qc-page .qc-stage.is-active {
	display: block;
}

.qc-page .qc-stage__title {
	margin: 0 0 0.4rem;
	font-family: var(--qc-sans);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--qc-ink);
}

.qc-page .qc-stage__desc {
	margin: 0 0 1.5rem;
	font-family: var(--qc-sans);
	font-size: 1rem;
	color: var(--qc-muted);
}

.qc-page .qc-back {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--qc-sans);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--qc-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.qc-page .qc-back:hover {
	color: var(--qc-ink);
}

/* 두 갈래 */
.qc-page .qc-picks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
}

@media (max-width: 560px) {
	.qc-page .qc-picks {
		grid-template-columns: 1fr;
	}
}

.qc-page .qc-pick {
	padding: 1.1rem 1rem 0.95rem;
	text-align: left;
	background: var(--qc-surface);
	border: 1px solid var(--qc-ink);
	cursor: pointer;
	transition: background 0.12s, transform 0.12s;
}

.qc-page .qc-pick:hover {
	background: var(--qc-ink);
	transform: translateY(-1px);
}

.qc-page .qc-pick strong {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--qc-sans);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--qc-ink);
}

.qc-page .qc-pick span {
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	color: var(--qc-muted);
}

.qc-page .qc-pick:hover strong,
.qc-page .qc-pick:hover span {
	color: #fff;
}

/* 입력 */
.qc-page .qc-field {
	display: block;
	margin-bottom: 1rem;
}

.qc-page .qc-field__label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--qc-ink);
}

.qc-page .qc-form textarea {
	display: block;
	width: 100%;
	padding: 0.7rem 0.75rem;
	font-family: var(--qc-sans);
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--qc-ink);
	background: var(--qc-surface);
	border: 1px solid var(--qc-ink);
	border-radius: 0;
	resize: vertical;
}

.qc-page .qc-form textarea:focus {
	outline: none;
	border-color: var(--qc-red);
}

.qc-page .qc-form textarea::placeholder {
	color: var(--qc-faint);
}

/* 한 문장짜리 입력이다. 칸이 크면 문단을 쓰게 된다. */
.qc-page .qc-field__one {
	min-height: 3rem;
	height: 3rem;
	overflow-y: hidden;
}

/* 저렴한 의견의 확인 절차 */
.qc-page .qc-rules {
	margin-bottom: 1.2rem;
	padding: 0.3rem 1rem;
	background: var(--qc-surface);
	border: 1px solid var(--qc-ink);
}

.qc-page .qc-rule {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--qc-line-2);
}

.qc-page .qc-rule:last-child {
	border-bottom: 0;
}

.qc-page .qc-rule p {
	margin: 0;
	font-family: var(--qc-sans);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--qc-ink-soft);
}

/* 세 번째 줄은 규칙이 아니라 부탁이다. 버튼이 없다. */
.qc-page .qc-rule.is-note p {
	font-weight: 700;
	color: var(--qc-red);
}

.qc-page .qc-rule__yes {
	min-width: 58px;
	padding: 0.45rem 0.9rem;
	font-family: var(--qc-sans);
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--qc-ink);
	background: var(--qc-surface);
	border: 1px solid var(--qc-ink);
	cursor: pointer;
}

.qc-page .qc-rule__yes:hover {
	background: var(--qc-line-2);
}

.qc-page .qc-rule__yes.is-on {
	color: #fff;
	background: var(--qc-ink);
}

/* 둘 다 누르기 전까지는 잠겨 있다 */
.qc-page .qc-form__inner--locked {
	opacity: 0.35;
	pointer-events: none;
}

.qc-page .qc-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
}

.qc-page .qc-form__msg {
	margin: 0;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	color: var(--qc-muted);
}
.qc-page .qc-form__msg.is-warn {
	color: var(--qc-red);
	background: var(--qc-red-soft);
}


.qc-page .qc-form__msg a {
	color: var(--qc-ink);
	text-decoration: underline;
}

.qc-page .qc-form__closed {
	margin: 0;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	color: var(--qc-muted);
}

/* ---------- 버튼 ---------- */

.qc-page .qc-btn {
	flex: none;
	padding: 0.6rem 1.3rem;
	font-family: var(--qc-sans);
	font-size: 0.92rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-ink);
	border: 1px solid var(--qc-ink);
	border-radius: 0;
	cursor: pointer;
}

.qc-page .qc-btn:hover {
	background: var(--qc-red);
	border-color: var(--qc-red);
}

.qc-page .qc-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

/* 글자 크기는 줄이지 않는다. 작아지면 누르기 어렵고 접근성도 나빠진다.
   커 보이는 것은 좌우 여백 탓이므로 padding만 줄인다. */
.qc-page .qc-form__toggle {
	font-size: 0.95rem;
	padding: 0.5rem 0.85rem;
}

/* [더 보기]는 부차적이다. [의견 쓰기]보다 커 보이면 안 된다. */
.qc-page .qc-btn--ghost {
	padding: 0.4rem 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--qc-muted);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--qc-line);
}

.qc-page .qc-btn--ghost:hover {
	color: var(--qc-ink);
	background: transparent;
	border-color: var(--qc-ink);
}

.qc-page .qc-btn--sm {
	padding: 0.4rem 0.9rem;
	font-size: 0.82rem;
}

/* ---------- 작성 직후 화면 ---------- */

.qc-page .qc-after {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--qc-line);
}
.qc-page .qc-after__lead {
	margin: 0 0 0.6rem;
	font-family: var(--qc-sans);
	font-size: 1.2rem;
	color: var(--qc-ink);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.qc-page .qc-after__note {
	margin: 0 0 0.5rem;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	color: var(--qc-ink-soft);
}


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

.qc-page .qc-after__list li {
	margin-bottom: 0.4rem;
}
.qc-page .qc-after__list a {
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	color: var(--qc-ink);
	text-decoration: none;
	font-weight: 600;
}

.qc-page .qc-after__list a:hover {
	text-decoration: underline;
	color: var(--qc-red);
}

.qc-page .qc-oplist {
	max-width: var(--qc-w);
}


.qc-page .qc-oplist__state {
	font-family: var(--qc-sans);
	font-size: 0.88rem;
	color: var(--qc-faint);
}

.qc-page .qc-oplist__more {
	display: block;
	width: 100%;
	margin-top: 1rem;
}


.qc-page .qc-op.is-mine {
	border-left: 1px solid var(--qc-point);
	padding-left: 0.9rem;
}

.qc-page .qc-op__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-family: var(--qc-sans);
	font-size: 0.78rem;
	color: var(--qc-muted);
}


.qc-page .qc-op__pending {
	padding: 0.1rem 0.45rem;
	font-size: 0.72rem;
	color: var(--qc-point);
	background: var(--qc-point-soft);
	border-radius: 2px;
}

/* 블라인드 — 본인에게만 보인다. 지워진 것이 아니라 가려진 것임을 보여준다. */
.qc-page .qc-op__pending.is-blinded {
	color: #a4453a;
	background: #fbecea;
}

.qc-page .qc-op.is-blinded .qc-op__text,
.qc-page .qc-op.is-blinded .qc-op__arg {
	color: var(--qc-faint);
}

.qc-page .qc-op.is-blinded .qc-op__foot {
	display: none;
}

/* 텔레그램 [사이트에서 보기]로 들어왔을 때 그 글이 화면 맨 위에 붙지 않게 */


.qc-page .qc-op__foot {
	margin-top: 0.6rem;
}

.qc-page .qc-op__reply-btn {
	padding: 0;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
	color: var(--qc-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.qc-page .qc-op__reply-btn:hover {
	color: var(--qc-point);
}

/* ---------- 대댓글 ---------- */

.qc-page .qc-op__replies {
	margin-top: 0.8rem;
	padding-left: 0.9rem;
	border-left: 1px solid var(--qc-line);
}

.qc-page .qc-reply {
	padding: 0.6rem 0;
}

.qc-page .qc-reply__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.3rem;
	font-family: var(--qc-sans);
	font-size: 0.76rem;
	color: var(--qc-muted);
}

.qc-page .qc-reply__type {
	padding: 0.1rem 0.45rem;
	font-size: 0.72rem;
	color: var(--qc-ink-soft);
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: 2px;
}

.qc-page .qc-reply__text {
	margin: 0;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--qc-ink-soft);
}

/* ---------- 답글 폼 ---------- */

.qc-page .qc-replyform {
	margin-top: 0.8rem;
	padding: 0.9rem;
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: 3px;
}

.qc-page .qc-replyform__types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin-bottom: 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
	color: var(--qc-ink-soft);
}

/* 네 항목이 한 줄에 안 들어가면 줄바꿈되게 하되,
   라디오와 라벨 글자는 절대 갈라지지 않게 한다. */
.qc-page .qc-replyform__types label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	cursor: pointer;
}

.qc-page .qc-replyform__types input[type='radio'] {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
}

.qc-page .qc-replyform textarea {
	display: block;
	width: 100%;
	padding: 0.5rem 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--qc-ink);
	background: var(--qc-surface);
	border: 1px solid var(--qc-line);
	border-radius: 2px;
	resize: vertical;
}

.qc-page .qc-replyform textarea:focus {
	outline: none;
	border-color: var(--qc-point);
}

.qc-page .qc-replyform .qc-form__foot {
	margin-top: 0.6rem;
}
.qc-page .qc-op.is-editorial {
	padding-left: 1rem;
	border-left: 1px solid var(--qc-ink);
	background: none;
}

.qc-page .qc-op__editorial {
	padding: 0.1rem 0.45rem;
	font-size: 0.7rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-ink);
	border-radius: 0;
}


.qc-page .qc-op__edited {
	font-size: 0.72rem;
	color: var(--qc-faint);
}
.qc-page .qc-react {
	margin-top: 0.7rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}


.qc-page .qc-react__btn {
	padding: 0.22rem 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--qc-muted);
	background: transparent;
	border: 1px solid var(--qc-line);
	border-radius: 0;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.qc-page .qc-react__btn:hover {
	color: var(--qc-ink);
	border-color: var(--qc-ink);
}

.qc-page .qc-react__btn.is-on {
	color: #fff;
	background: var(--qc-ink);
	border-color: var(--qc-ink);
	font-weight: 600;
}


.qc-page .qc-react__btn--agree {
	color: var(--qc-ink-soft);
}

.qc-page .qc-react__n {
	margin-left: 0.3rem;
	font-variant-numeric: tabular-nums;
	color: var(--qc-faint);
}
.qc-page .qc-react__btn.is-on .qc-react__n {
	color: #fff;
}


/* ---------- 수정 폼 ---------- */

.qc-page .qc-op__edit-btn {
	margin-left: 0.8rem;
	padding: 0;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
	color: var(--qc-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.qc-page .qc-op__edit-btn:hover {
	color: var(--qc-point);
}

.qc-page .qc-editform {
	margin-top: 0.8rem;
	padding: 0.9rem;
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: 3px;
}

.qc-page .qc-editform__note {
	margin: 0 0 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.78rem;
	color: var(--qc-muted);
}

.qc-page .qc-editform textarea {
	display: block;
	width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.5rem 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--qc-ink);
	background: var(--qc-surface);
	border: 1px solid var(--qc-line);
	border-radius: 2px;
	resize: vertical;
}

.qc-page .qc-editform textarea:focus {
	outline: none;
	border-color: var(--qc-point);
}

/* ---------- 자료 (탐구) ---------- */

/* 자료 영역은 탐구 색(남색)을 쓴다. */
.qc-page--inquiry .qc-form__inner {
	background: var(--qc-inquiry-soft);
}

.qc-page--inquiry .qc-field__label,
.qc-page--inquiry .qc-react__btn.is-on,
.qc-page--inquiry .qc-op__edit-btn:hover,
.qc-page--inquiry .qc-react__btn:hover {
	color: var(--qc-inquiry);
}

.qc-page--inquiry .qc-btn {
	background: var(--qc-inquiry);
	border-color: var(--qc-inquiry);
}

.qc-page--inquiry .qc-react__btn.is-on {
	background: var(--qc-inquiry-soft);
	border-color: var(--qc-inquiry);
}

.qc-page--inquiry .qc-op.is-editorial {
	border-left-color: var(--qc-inquiry);
	background: linear-gradient(90deg, var(--qc-inquiry-soft), transparent 60%);
}

.qc-page--inquiry .qc-op__editorial {
	background: var(--qc-inquiry);
}

.qc-page .qc-evlist {
	max-width: var(--qc-w);
}

.qc-page .qc-evlist__state {
	font-family: var(--qc-sans);
	font-size: 0.88rem;
	color: var(--qc-faint);
}

/* 종류별 묶음. 비어 있는 묶음은 서버가 아예 내보내지 않는다. */
.qc-page .qc-evgroup {
	margin-bottom: 1.6rem;
}

.qc-page .qc-evgroup__head {
	margin: 0 0 0.2rem;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--qc-inquiry);
}

.qc-page .qc-evgroup__n {
	margin-left: 0.2rem;
	font-weight: 400;
	color: var(--qc-faint);
}

.qc-page .qc-ev__verified {
	padding: 0.1rem 0.45rem;
	font-size: 0.72rem;
	color: var(--qc-inquiry);
	background: var(--qc-inquiry-soft);
	border-radius: 2px;
}

.qc-page .qc-ev__link {
	margin: 0.5rem 0 0;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
}

.qc-page .qc-ev__link a {
	color: var(--qc-inquiry);
	text-decoration: none;
	border-bottom: 1px solid var(--qc-line);
}

.qc-page .qc-ev__link a:hover {
	border-bottom-color: var(--qc-inquiry);
}

/* 종류 선택 — 판단이 아니라 사실이므로 부담 없이 보이게 한다. */
.qc-page .qc-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	color: var(--qc-ink-soft);
}

.qc-page .qc-slots label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	cursor: pointer;
}

.qc-page .qc-slots input[type='radio'] {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
}


.qc-page .qc-oplist__empty {
	padding: 1.6rem 1rem 1.4rem;
	text-align: center;
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
}

.qc-page .qc-oplist__empty p {
	margin: 0.6rem 0 0;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	color: var(--qc-muted);
}

/* ---------- 카드 ---------- */


/* 저렴한 의견은 한 줄뿐이다. 가볍게 보여야 그 이름값을 한다. */

.qc-page .qc-op__kind {
	padding: 0.1rem 0.45rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--qc-muted);
	background: var(--qc-line-2);
}

/* 편집장이 고른 글. 반응 수로 뽑은 순위표가 아니다. */
.qc-page .qc-op.is-featured {
	padding-left: 1rem;
	border-left: 1px solid var(--qc-red);
	background: var(--qc-red-soft);
	padding-right: 1rem;
}

.qc-page .qc-op__pin {
	padding: 0.1rem 0.45rem;
	font-size: 0.7rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-red);
}


/* 저렴한 쪽의 최상급은 붉게. 농담이지만 진짜 칭찬이다. */
.qc-page .qc-react__btn[data-reaction='not_cheap'].is-on {
	background: var(--qc-red);
	border-color: var(--qc-red);
}


.qc-page .qc-verify {
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: 0;
}

.qc-page .qc-verify__lead {
	color: var(--qc-ink);
}

/* ---------- v1.0.1 ---------- */

/* 인증 전 내 글: 배지 옆에 바로 해결책을 둔다.
   안내 박스를 매번 다시 그릴 필요가 없다. */
.qc-page .qc-op__resend {
	padding: 0;
	font-family: var(--qc-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--qc-red);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--qc-red);
	cursor: pointer;
}

.qc-page .qc-op__resend:hover {
	color: var(--qc-ink);
	border-color: var(--qc-ink);
}

/* 인증 안내는 이제 목록 안, 방금 쓴 글 바로 아래에 붙는다. */
.qc-page .qc-oplist .qc-verify {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem 0.9rem;
}

.qc-page .qc-oplist .qc-verify__char {
	width: 72px;
}

/* 작성 직후 화면은 축하와 다음 질문만 남는다. */
.qc-page .qc-form__after:empty {
	display: none;
}

/* =========================================================================
   .qc-op — 이 요소의 정체는 **이 한 블록**에서만 정한다
   =========================================================================

   ★ v1.7.1까지 네 곳에 흩어져 있었다.
     378행 padding·border · 424행 scroll-margin · 814행 padding·border
     968행 display:flex

     v1.3.13에서 display:grid 가 흩어진 블록에 있다가 사라져 세 판을 헤맸다.
     같은 형태다. 한 요소의 정체를 정하는 속성은 흩어놓지 않는다.

   ★ 굵기·색 규칙이 §4.1과 반대다 — 아래 §의견 두 형태 참조
   ========================================================================= */

/*
 * ★ display 를 정하지 않는다. (v1.7.5)
 *
 *   v1.7.0에서 저렴한 의견의 순서를 CSS order 로 뒤집으려고 flex 를 넣었다.
 *   v1.7.2에서 마크업이 순서를 맡으면서 order 는 없앴는데 flex 만 남았고,
 *   v1.7.4에서 다단 안 카드가 잘리는 원인이 됐다.
 *
 *   v1.7.4에서는 .qc-card__right .qc-op 에 display: block 을 얹어 이겼는데,
 *   **그건 v1.7.3에서 스스로 버린 방식**이다 (특정도로 이기지 말고
 *   문제의 규칙을 없앤다). 그래서 여기서 지운다.
 *
 *   블록 요소의 기본값이면 충분하다. 이 블록에 gap 도 align 도 없었다.
 */
/*
 * ★ display: block 을 **적는다**. (v1.7.6)
 *
 *   v1.7.5에서 flex 를 지우면서 "블록 기본값이면 충분하다"고 했는데,
 *   **`<a>` 는 블록 요소가 아니다.** 메인의 의견은 링크라
 *   기본값인 inline 으로 돌아갔고 두 가지가 한꺼번에 깨졌다.
 *
 *     ① inline 에는 위아래 테두리가 안 그려진다 → 카드 위아래가 뚫렸다
 *     ③ inline 에는 세로 마진이 안 먹는다      → 저렴한 의견끼리 붙었다
 *
 *   flex 를 지운 것은 맞았고, **지운 자리를 비워둔 것이 잘못**이었다.
 *   "기본값이면 된다"고 할 때는 그 요소가 무엇인지 먼저 봐야 한다.
 */
.qc-page .qc-op {
	display: block;
	scroll-margin-top: 1.5rem;
}

/*
 * ★ 목록에서의 여백과 구분선은 **목록 문맥**에 둔다. (v1.7.3)
 *
 *   전에는 .qc-op 자체가 border-top 을 갖고 있었고, 메인에서 그것을
 *   지우려고 .qc-card__right .qc-op { border-top: 0 } 을 썼다.
 *   그 규칙이 (0,3,0) 이라 .qc-op--rich 의 (0,2,0) 을 이겨
 *   **고급진 카드의 위 테두리까지 지웠다.**
 *
 *   지우는 규칙을 두지 않으면 이길 것도 없다.
 */
.qc-page .qc-oplist .qc-op {
	padding: 1.3rem 0;
	border-top: 1px solid var(--qc-line-2);
}

/* =========================================================================
   v1.7 — 의견 두 형태 (Group 3)
   =========================================================================

   ★★ 굵기·색이 §4.1과 반대다. 여기만 예외다.

      §4.1  "크기 대신 굵기로 무게를 준다" · "강조는 레드 하나"
      여기  **의견이 속한 질문만 볼드. 나머지 전부 regular.**
            **의견 수만 빨강. 나머지 전부 검정.**

      이유 — 카드 안에서 굵은 것이 여럿이면 무엇을 먼저 읽을지 알 수 없다.
      질문 하나만 굵게 두면 "무엇에 대한 말인가"가 먼저 잡히고,
      그다음 큰 글씨(의견 본문)로 눈이 간다. 굵기가 아니라 **크기**가
      본문의 무게를 맡는다.

      handoff-assembly.md §4.1 에도 같은 예외를 적어두었다.
      파일에만 적으면 이 파일을 다시 쓸 때 함께 사라진다.

   ★ 조절할 값은 .qc-page--main 에 변수로 모여 있다 (qc-main.css).
     여기서 숫자를 직접 적지 않는다.
   ========================================================================= */

/* ---------- 공통 ---------- */

/* 속한 질문 — 유일하게 볼드다 */
.qc-page .qc-op__from {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--qc-sans);
	font-size: var(--qc-q-size);
	line-height: var(--qc-q-lead);
	font-weight: 700;
	color: var(--qc-ink);
}

/* 의견 수만 빨강 */
.qc-page .qc-op__count {
	flex: none;
	color: var(--qc-red);
}

/* 의견 본문 — 큰 글씨. 굵기는 보통 */
.qc-page .qc-op__text {
	font-size: var(--qc-op-size);
	font-weight: 400;
	line-height: var(--qc-op-lead);
	letter-spacing: -0.02em;
	color: var(--qc-ink);
}

.qc-page .qc-op__by {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--qc-ink);
}

/*
 * 이유 칸. 저렴한 의견과 **크기는 같고 행간은 따로**다.
 * 이유는 여러 줄이라 넉넉해야 하고, 저렴한 의견은 한두 줄이라 조밀해야 한다.
 */
.qc-page .qc-op__arg {
	font-size: var(--qc-cheap-size);
	font-weight: 400;
	line-height: var(--qc-arg-lead);
	color: var(--qc-ink);
}

/* ---------- 고급진 의견 — 카드 세 칸 ---------- */

/*
 * [질문] / [의견 + 글:닉네임] / [이유]
 * 칸마다 카드 폭을 가로지르는 1px 검정 선으로 나뉜다.
 */
/*
 * ★ 카드 모양은 **메인에서만** 그린다. (v1.7.6)
 *
 *   논점 페이지는 의견 사이 가로선 하나로 나뉘는 것이 원래 모양이다.
 *   네모로 둘러싸면 한 페이지에 사각형이 스무 개가 된다.
 *   메인은 여러 이슈가 섞여 흐르므로 경계가 필요하고,
 *   논점 페이지는 이미 한 질문 안이라 경계가 필요 없다.
 */
.qc-page .qc-card__right .qc-op--rich {
	padding: 0;
	border: 1px solid var(--qc-ink);
	background: var(--qc-surface);
}

/* 칸 셋. 각각 자기 블록 하나에서만 정한다. */
.qc-page .qc-card__right .qc-op--rich .qc-op__from {
	display: flex;
	padding: var(--qc-op-pad);
	border-bottom: 1px solid var(--qc-ink);
}

.qc-page .qc-card__right .qc-op--rich .qc-op__main {
	display: block;
	padding: var(--qc-op-pad);
	border-bottom: 1px solid var(--qc-ink);
}

/* 이유 칸만 아래를 따로 준다. 본문이 길어지면 아래가 빠듯하다. */
.qc-page .qc-card__right .qc-op--rich .qc-op__arg {
	display: block;
	padding: var(--qc-op-pad);
	padding-bottom: var(--qc-op-pad-b);
}

.qc-page .qc-card__right .qc-op--rich .qc-op__by {
	margin-top: var(--qc-op-by-gap);
}

/* ---------- 저렴한 의견 — 카드가 아니다 ---------- */

/*
 * 테두리도 배경도 없다. 질문 아래에 말풍선과 닉네임,
 * 그 아래 세로선을 두고 의견이 들여쓰기로 붙는다.
 */
.qc-page .qc-op--cheap {
	padding: 0;
	border: 0;
	background: none;
}

.qc-page .qc-op--cheap .qc-op__main {
	display: block;
	margin-top: 0.55rem;
}

.qc-page .qc-op--cheap .qc-op__by {
	font-weight: 700;
}

/* 말풍선 — 이미지가 아니라 1px 직선으로 그린다 */
.qc-page .qc-op__bubble {
	position: relative;
	flex: none;
	width: 0.95rem;
	height: 0.8rem;
	border: 1px solid var(--qc-ink);
}

/* 꼬리 — 왼쪽 아래로 내려가는 삼각형. 두 겹으로 테두리만 남긴다 */
.qc-page .qc-op__bubble::before,
.qc-page .qc-op__bubble::after {
	content: '';
	position: absolute;
	top: calc(100% - 1px);
	left: 0.1rem;
	border-style: solid;
	border-width: 0.28rem 0 0 0.22rem;
	border-color: var(--qc-surface) transparent transparent transparent;
}

.qc-page .qc-op__bubble::before {
	border-width: 0.32rem 0 0 0.26rem;
	border-color: var(--qc-ink) transparent transparent transparent;
}


/* 의견 앞 세로선 */
/*
 * 저렴한 의견은 가벼워야 그 이름값을 한다.
 * 고급진 의견의 '이유' 칸 정도 크기다 — 제목 크기가 아니다.
 */
.qc-page .qc-op--cheap .qc-op__text {
	display: block;
	margin-top: 0.4rem;
	padding-left: 0.7rem;
	border-left: 1px solid var(--qc-ink);
	font-size: var(--qc-cheap-size);
	line-height: var(--qc-cheap-lead);
}

/* ---------- 메인에서의 흐름 ---------- */

/*
 * ★ 2열은 grid 가 아니라 columns 로 흘린다.
 *   grid 는 줄마다 높이를 맞추려 해서 짧은 의견 옆에 빈칸이 생긴다.
 *   columns 는 벽돌 쌓듯 이어져 시안의 흐르는 모양이 된다.
 *
 *   의견이 둘 이하면 한 열이다 — 하나뿐인데 2열이면 반쪽만 차지한다.
 *   그 판정은 PHP 가 한다 (.qc-card__right--multi).
 */
/*
 * ★ display: block 이어야 한다. (v1.7.4)
 *
 *   .qc-op 의 기본은 flex 인데, **다단(columns) 안의 flex 컨테이너는
 *   break-inside: avoid 를 지키지 않는다.** 브라우저가 flex 줄을
 *   쪼개면서 카드가 열 경계에서 그냥 잘렸다.
 *
 *   여기서 flex 가 필요하지도 않다 — 저렴한 의견의 순서(닉네임이 위)는
 *   qc_render_main_opinion() 이 마크업으로 이미 정한다.
 *   CSS order 를 쓰던 v1.7.0 방식은 이미 없앴다.
 *
 *   break-inside 는 두 이름을 다 적는다. 구형 브라우저가 page-break 만 안다.
 */
.qc-page .qc-card__right .qc-op {
	margin: 0 0 var(--qc-op-gap);
	page-break-inside: avoid;
	break-inside: avoid;
	/* 넘친 부분이 숨겨지지 않게. 어디서도 걸지 않지만 못 박아 둔다. */
	overflow: visible;
}

@media (min-width: 1280px) {
	.qc-page .qc-card__right--multi {
		columns: 2;
		column-gap: var(--qc-op-col-gap);
	}
}