/**
 * questions-core / assets/qc-talk.css
 *
 * 뒷담화 목록.
 *
 * ★ 참고 화면은 구조만 참고했다. 파란 강조·이모지·줄무늬 배경은 없다.
 *   §1.3 — 흑백 + 레드, 선은 전부 1px 검정, 굵기가 아니라 길이로 구분한다.
 */

.qc-page--talk {
	--qc-talk-kind-w: 7rem;   /* 분류 칸 폭 */
	--qc-talk-meta: 0.8rem;   /* 글쓴이 · 날짜 */

	padding-top: 2.5rem;
}

.qc-talk__head {
	max-width: var(--qc-w);
	margin: 0 auto 1.6rem;
	font-family: var(--qc-sans);
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--qc-ink);
}

.qc-talk {
	max-width: var(--qc-w);
	margin: 0 auto;
}

.qc-talk__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--qc-ink);
	border-bottom: 1px solid var(--qc-ink);
}

/*
 * 줄 사이 선은 분류 칸 뒤에서 시작한다.
 * 위아래 경계선과 굵기가 같으므로 길이로 구분한다 — 이슈 페이지 질문 목록과 같다.
 */
.qc-talk__row {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.7rem 0;
}

.qc-talk__row:not(:last-child)::after {
	content: '';
	position: absolute;
	left: var(--qc-talk-kind-w);
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--qc-ink);
}

.qc-talk__kind {
	flex: none;
	width: var(--qc-talk-kind-w);
	font-family: var(--qc-sans);
	font-size: var(--qc-talk-meta);
	color: var(--qc-muted);
}

.qc-talk__title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--qc-sans);
	font-size: 1rem;
	color: var(--qc-ink);
	text-decoration: none;
}

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

.qc-talk__by,
.qc-talk__date {
	flex: none;
	font-family: var(--qc-sans);
	font-size: var(--qc-talk-meta);
	color: var(--qc-muted);
}

.qc-talk__empty {
	margin: 0;
	padding: 2rem 0;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	color: var(--qc-muted);
}

/* 좁은 화면 — 분류를 윗줄로 올린다. 한 줄에 넷은 안 들어간다. */
@media (max-width: 700px) {
	.qc-page--talk {
		--qc-talk-kind-w: 0rem;
	}

	.qc-talk__row {
		flex-wrap: wrap;
		gap: 0.3rem 0.7rem;
	}

	.qc-talk__kind {
		width: auto;
	}

	.qc-talk__title {
		flex: 1 0 100%;
		order: 1;
	}

	.qc-talk__by,
	.qc-talk__date {
		order: 2;
	}
}

/* ---------- 글쓰기 ---------- */

/*
 * ★ 서식 도구가 없다. <textarea> 하나다.
 *   그래서 <a> 가 들어올 자리가 없고, 링크 판정이 필요 없다 (inc/talk.php §링크).
 *   여기에 서식 버튼을 붙이면 그 전제가 깨진다.
 */

.qc-talkform {
	--qc-talk-gap: 1.1rem;    /* 칸 사이 */
	--qc-target-in: 1.2rem;   /* 논점이 이슈보다 들어가는 깊이 */

	max-width: var(--qc-w);
	margin: 0 auto 2.5rem;
}

.qc-talkform__toggle,
.qc-talkform__send {
	padding: 0.55rem 1.2rem;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-ink);
	border: 0;
	cursor: pointer;
}

.qc-talkform__toggle:hover,
.qc-talkform__send:hover {
	background: var(--qc-red);
}

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

.qc-talkform__box {
	margin-top: var(--qc-talk-gap);
	padding: 1.4rem 1.3rem 1.2rem;
	border: 1px solid var(--qc-ink);
}

.qc-talkform__box .qc-field {
	margin-bottom: var(--qc-talk-gap);
}

.qc-talkform__title,
.qc-talkform__body {
	display: block;
	width: 100%;
	padding: 0.5rem 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	color: var(--qc-ink);
	background: #fff;
	border: 1px solid var(--qc-ink);
	border-radius: 0;
}

/* 글자 수 상한이 없다. 긴 글도 그대로 흐른다. */
.qc-talkform__body {
	line-height: 1.7;
	resize: vertical;
}

.qc-talkform__title:focus,
.qc-talkform__body:focus {
	outline: none;
	border-color: var(--qc-red);
}

/* ---------- 태그 ---------- */

/*
 * 목록이 짧게 유지되므로 한 번에 다 펼친다. 검색을 붙이지 않는다 —
 * 붙이면 목록이 길어져도 괜찮다는 신호가 된다.
 */
.qc-targets {
	max-height: 18rem;
	overflow-y: auto;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--qc-line);
}

.qc-targets__group {
	margin-bottom: 0.9rem;
}

.qc-targets__issue,
.qc-targets__point,
.qc-targets__none {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.3rem;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--qc-ink);
	cursor: pointer;
}

/* 이슈가 위, 그 논점이 안으로 들어간다 — 어느 이슈의 논점인지 보여야 한다 */
.qc-targets__issue {
	font-weight: 700;
}

.qc-targets__point {
	padding-left: var(--qc-target-in);
	font-size: 0.86rem;
}

/* [운영 건의]에서만 나타난다. 목록 맨 아래에 선을 두고 떨어뜨린다. */
.qc-targets__none {
	padding-top: 0.6rem;
	border-top: 1px solid var(--qc-line);
	color: var(--qc-muted);
}



.qc-talkform__msg {
	margin: 0 0 var(--qc-talk-gap);
	font-family: var(--qc-sans);
	font-size: 0.88rem;
	color: var(--qc-muted);
}

.qc-talkform__msg.is-warn {
	color: var(--qc-red);
}

/* ---------- 폼 칸 ---------- */

/*
 * ★ .qc-field 는 qc-opinions.css 에도 있지만 그 파일은 뒷담화에 안 실린다.
 *   그 파일을 함께 싣지 않는다 — 안 쓰는 카드·반응 스타일까지 딸려 온다.
 *   여기서 자기 것을 갖는다.
 */
/*
 * ★ hidden 을 이 파일이 직접 지킨다. (v1.14.3)
 *
 *   questions.css 의 [hidden]{display:none !important} 가 뒷담화에도 실리므로
 *   지금은 이 한 줄이 없어도 된다. 그런데 **그 사실이 다른 파일의 로드 조건에
 *   달려 있다** — 조건이 바뀌면 여기가 조용히 새고, 검사 ⑨ 는 전역 규칙이
 *   파일에 있으니 「없음」이라 답한다 (§3.5b ②).
 *
 *   자기 요소는 자기 파일이 지킨다. v1.12.1에서 드롭다운 패널에 한 것과 같다.
 */
.qc-page--talk .qc-field[hidden] {
	display: none;
}

.qc-page--talk .qc-field {
	display: block;
	position: relative;
}

.qc-page--talk .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--talk-one {
	--qc-talkone-lead: 1.9;   /* 본문 행간 */
}

.qc-talkone {
	max-width: var(--qc-w);
	margin: 0 auto;
	padding-bottom: 3rem;
}

.qc-talkone__meta {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 0.6rem;
	font-family: var(--qc-sans);
	font-size: var(--qc-talk-meta);
	color: var(--qc-muted);
}

.qc-talkone__kind {
	font-weight: 700;
	color: var(--qc-ink);
}

.qc-talkone__title {
	margin: 0 0 1.2rem;
	font-family: var(--qc-sans);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: var(--qc-ink);
}

/*
 * ★ 태그한 곳으로 가는 문. 뒷담화는 이슈 밖이라 이 문이 북극성 통로다.
 *   본문 위에 둔다 — 다 읽고 나서가 아니라 읽기 전에 보여야 따라간다.
 */
.qc-talk__target {
	display: block;
	margin-bottom: 1.6rem;
	padding: 0.7rem 0.9rem;
	font-family: var(--qc-sans);
	font-size: 0.92rem;
	color: var(--qc-ink);
	text-decoration: none;
	border: 1px solid var(--qc-ink);
}

.qc-talk__target:hover {
	color: #fff;
	background: var(--qc-ink);
}

.qc-talk__target-label {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.76rem;
	color: var(--qc-muted);
}

.qc-talk__target:hover .qc-talk__target-label {
	color: #fff;
}

/* 상한이 없으므로 긴 글이 그대로 흐른다. 행간을 넓혀 읽을 만하게 둔다. */
.qc-talkone__body {
	font-size: 1rem;
	line-height: var(--qc-talkone-lead);
	color: var(--qc-ink);
	word-break: break-word;
}

.qc-talkone__body p {
	margin: 0 0 1.4em;
}

.qc-talkone__back {
	display: inline-block;
	margin-top: 2rem;
	padding-top: 1rem;
	font-family: var(--qc-sans);
	font-size: 0.88rem;
	color: var(--qc-ink);
	text-decoration: none;
	border-top: 1px solid var(--qc-ink);
}

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

/* ---------- 분류 라디오 ---------- */

/*
 * ★ 드롭다운에서 라디오로 바꿨다. (v1.14.2)
 *   둘뿐인데 접혀 있으면 무엇을 고르라는 것인지 안 보인다.
 *   설명 한 줄이 붙어야 하는데 드롭다운에는 그것을 담을 자리가 없다.
 *
 *   편집부에게는 다섯 줄이 된다. 그래도 한눈에 들어오는 수다.
 */
.qc-kinds {
	border: 1px solid var(--qc-line);
}

.qc-kinds__row {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.55rem 0.8rem;
	font-family: var(--qc-sans);
	cursor: pointer;
}

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

.qc-kinds__name {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--qc-ink);
}

.qc-kinds__note {
	font-size: 0.8rem;
	color: var(--qc-muted);
}

/* 좁은 화면에서는 설명이 아랫줄로 */
@media (max-width: 560px) {
	.qc-kinds__row {
		flex-wrap: wrap;
	}

	.qc-kinds__note {
		flex: 1 0 100%;
		padding-left: 1.35rem;
	}
}

/* ---------- 배지 ---------- */

/*
 * 모양은 questions.css 가 갖는다 — 논점·자료·뒷담화가 함께 쓴다.
 * 여기서는 자리만 잡는다.
 */
.qc-talk__row .qc-op__editorial,
.qc-talk__row .qc-op__pending,
.qc-talkone__meta .qc-op__editorial,
.qc-talkone__meta .qc-op__pending {
	flex: none;
}

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

/*
 * ★ 논점 페이지의 의견 카드를 베끼지 않는다.
 *   거기는 고급진/저렴한이 갈리고 근거 칸이 있다. 여기는 한 줄 글이다.
 *   테두리도 배경도 없다 — 줄 사이 선 하나로 나눈다.
 *
 * ★ 답글이 없다. 들여쓰기도 세로선도 필요 없다.
 */
.qc-tc {
	--qc-tc-gap: 1.1rem;

	max-width: var(--qc-w);
	margin: 3rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--qc-ink);
}

.qc-tc__head {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 var(--qc-tc-gap);
	font-family: var(--qc-sans);
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--qc-ink);
}

.qc-tc__n {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--qc-red);
}

.qc-tc__list {
	margin: 0 0 var(--qc-tc-gap);
	padding: 0;
	list-style: none;
}

.qc-tc__item {
	padding: 0.9rem 0;
	border-top: 1px solid var(--qc-line);
}

.qc-tc__item:first-child {
	border-top: 0;
}

.qc-tc__by {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.3rem;
	font-family: var(--qc-sans);
	font-size: 0.8rem;
	color: var(--qc-muted);
}

.qc-tc__author {
	font-weight: 700;
	color: var(--qc-ink);
}

.qc-tc__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--qc-ink);
}

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

.qc-tc__input {
	display: block;
	width: 100%;
	padding: 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--qc-ink);
	background: #fff;
	border: 1px solid var(--qc-ink);
	border-radius: 0;
	resize: vertical;
}

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

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

.qc-tc__msg.is-warn {
	color: var(--qc-red);
}

.qc-tc__send {
	padding: 0.5rem 1.1rem;
	font-family: var(--qc-sans);
	font-size: 0.9rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-ink);
	border: 0;
	cursor: pointer;
}

.qc-tc__send:hover {
	background: var(--qc-red);
}

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

/* 글에 붙는 좋아요. 아이콘 하나다. */
.qc-page--talk-one .qc-react {
	margin-top: 1.5rem;
}

/*
 * 공지 묶음이 끝나는 자리. (v1.17.0 · v1.17.1에서 고침)
 *
 * ★ 분류 이름이 이미 [공지사항]이라 무엇인지는 읽힌다.
 *   안 읽히는 것은 **어디까지가 묶음인가**라, 그 자리에만 선을 긋는다.
 *
 * ★★ v1.17.0에서 선이 둘이 됐다.
 *
 *   경계선을 border-top 으로 그렸는데, **앞 줄의 줄사이선(::after)이
 *   같은 자리에** 있었다. 겹친 왼쪽이 진해 보였다.
 *   그때 ::before 를 껐는데 줄사이선은 ::after 였다 — 엉뚱한 것을 껐다.
 *
 * ★ 남기는 것은 **경계선** 쪽이다.
 *
 *   줄사이선은 분류 칸 뒤(7rem)에서 시작한다. 그것은 줄과 줄을 나눌 뿐이다.
 *   「여기까지가 공지」를 말하는 것은 **왼쪽 끝까지 닿는 선**이다 —
 *   §1.3대로 굵기가 아니라 길이로 구분한다.
 *
 * ★ 앞 줄의 ::after 를 끄는 대신 **경계선을 그 자리에 겹쳐 덮는다.**
 *   앞 줄에 표시를 달려면 루프가 다음 글을 미리 알아야 한다.
 *   경계선을 -1px 위로 올려 같은 자리에 두면 CSS 만으로 끝난다.
 */
.qc-talk__row.is-after-notice {
	border-top: 1px solid var(--qc-ink);
	margin-top: -1px;
}

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

/*
 * ★ 「수정됨」 모양은 questions.css 가 갖는다 (v1.17.0에서 옮겼다).
 *   여기서는 자리와 버튼만 다룬다.
 */
.qc-talkone__edit {
	margin-top: 1.6rem;
}

/*
 * ★ 삭제 버튼도 같은 모양이다. (v1.33.0)
 *   수정 상자 밖에 서지만 나란히 보이므로 무게가 같아야 한다.
 *   쉼표로 묶어 **한 규칙**으로 둔다.
 */
.qc-talkone__del {
	margin-top: 0.6rem;
}

.qc-talkone__edit-btn,
.qc-talkone__del-btn,
.qc-talkone__edit-send {
	padding: 0.45rem 1rem;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--qc-ink);
	background: none;
	border: 1px solid var(--qc-ink);
	cursor: pointer;
}

.qc-talkone__edit-btn:hover,
.qc-talkone__del-btn:hover,
.qc-talkone__edit-send:hover {
	color: #fff;
	background: var(--qc-ink);
}

.qc-talkone__edit-form {
	margin-top: 1rem;
	padding: 1.2rem;
	border: 1px solid var(--qc-line);
}

.qc-talkone__edit-title,
.qc-talkone__edit-body {
	display: block;
	width: 100%;
	padding: 0.5rem 0.6rem;
	font-family: var(--qc-sans);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--qc-ink);
	background: #fff;
	border: 1px solid var(--qc-ink);
	border-radius: 0;
	resize: vertical;
}

.qc-talkone__edit-msg {
	margin: 0.7rem 0;
	font-family: var(--qc-sans);
	font-size: 0.85rem;
	color: var(--qc-red);
}

/* 댓글의 수정 버튼 — 글보다 작게. 한 줄 글에 붙는 것이다. */
.qc-tc__item .qc-op__edit-btn {
	margin-top: 0.4rem;
	padding: 0;
	font-family: var(--qc-sans);
	font-size: 0.78rem;
	color: var(--qc-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--qc-line);
	cursor: pointer;
}

.qc-tc__item .qc-op__edit-btn:hover {
	color: var(--qc-red);
	border-bottom-color: var(--qc-red);
}

/*
 * 댓글 아래 줄 — 좋아요와 [수정]이 나란히. (v1.25.3)
 *
 * ★ 글의 댓글(.qc-ac__foot)과 같은 짜임이다. 두 곳이 같은 모양이어야
 *   같은 것으로 읽힌다 — 이 판이 그 어긋남을 맞추는 일이다.
 */
.qc-tc__foot {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 0.4rem;
}