/**
 * questions-core / assets/qc-main.css
 *
 * 메인 — 이슈 카드.
 *
 * ★ 왼쪽이 sticky, 오른쪽이 흐른다
 *   JS도 자동 스크롤도 없다. 왼쪽이 멈춰 있는 동안 오른쪽이 지나가므로
 *   오른쪽만 흐르는 것처럼 보인다. 논점 페이지 레일과 같은 기법이다.
 *
 *   오른쪽이 왼쪽보다 길어야 흐르는 것이 보인다. 의견이 적은 이슈에서는
 *   왼쪽이 더 길어 아무것도 안 흐른다 — 지금은 그대로 둔다.
 *
 * ★ 색은 카드 안쪽에만
 *   페이지 배경은 흰색 그대로다. --qc-card-bg / --qc-card-ink 는
 *   qc_issue_card_style() 이 카드에만 인라인으로 건다.
 */

/* =========================================================================
   ★ 브라우저에서 조절할 값 다섯 — 여기 한 곳에만 있다
   =========================================================================

   ★ 전부 편집장이 화면에서 맞춘 값이다. (v1.7.6에서 확정)
     바꿀 일이 생기면 콘솔에서 한 줄로 보고 그 값을 여기 옮긴다.

     var p = document.querySelector('.qc-page--main');
     p.style.setProperty('--qc-op-pad-b', '2rem');

     ※ --qc-op-pad-b 는 카드 테두리가 없던 상태에서 잰 값이다.
       테두리가 돌아왔으니 한 번 더 볼 만하다.

   ★ .qc-page--main 에 둔 이유
     의견 카드도 이 안에 있으므로 상속이 닿는다.
     .qc-card 에 두면 오른쪽 흐름 영역까지는 닿지만, 나중에 의견을
     카드 밖으로 옮기면 그때 끊긴다. 위에 두는 편이 안전하다.
   ========================================================================= */

.qc-page--main {
	/* ── 편집장이 화면에서 맞춘 값 (v1.7.3) ── */
	--qc-card-w: 33.5rem;      /* 왼쪽 카드 폭 */
	--qc-card-pad: 1.5rem;     /* 카드 안쪽 여백 */
	--qc-q-size: 0.84rem;      /* 질문 리스트 폰트 (의견 카드의 질문도 같은 값) */
	--qc-q-lead: 1.2;          /* 질문 리스트 행간 */
	--qc-op-size: 1.25rem;     /* 의견 본문 폰트 */
	--qc-op-pad: 1.3rem;       /* 의견 카드 칸 여백 */
	--qc-op-gap: 2.8rem;       /* 의견 사이 간격 */

	--qc-op-lead: 1.3;         /* 의견 본문 행간 */
	--qc-op-by-gap: 0.2rem;    /* 의견 한 줄 ↔ '글: 닉네임' 간격 */
	--qc-col-gap: 2rem;        /* 왼쪽 카드 ↔ 오른쪽 의견 영역 */
	--qc-op-col-gap: 1.6rem;   /* 2열 사이 간격 */
	--qc-cheap-size: 0.95rem;  /* 저렴한 의견 · 이유 칸 폰트 (같이 쓴다) */
	--qc-cheap-lead: 1.45;     /* 저렴한 의견 행간 */
	--qc-arg-lead: 1.5;        /* 이유 칸 행간 */
	--qc-op-pad-b: 1.7rem;     /* 의견 카드 '이유' 칸의 아래 여백만 */

	padding-top: 2.5rem;
}

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

/*
 * ★ 카드 전체에 색을 걸지 않는다.
 *   색이 들어가는 곳은 .qc-card__body 하나 — 왼쪽 카드의 이미지 아래다.
 *   오른쪽 의견 영역은 흰 배경이다.
 */
.qc-page .qc-card {
	/* 색 기본값. 인라인 style 이 이것을 덮는다. 격자 선언과 한 블록에 둔다 —
	   흩어두면 한쪽이 사라져도 모른다 (v1.3.13). */
	--qc-card-bg: transparent;
	--qc-card-ink: var(--qc-ink);

	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: var(--qc-wide);
	margin: 0 auto;
	padding: 2.5rem 0;
	border-top: 1px solid var(--qc-ink);
}

/* 첫 카드 위에는 선이 없다. 헤더 아래 선과 겹친다. */
.qc-page--main > .qc-card:first-child {
	border-top: 0;
	padding-top: 0;
}

/* 뉴스레터가 끼어든 다음 카드도 선을 갖는다 — 위 규칙이 첫 장에만 걸리므로. */

@media (min-width: 1000px) {
	.qc-page .qc-card {
		/*
		 * 좌우 약 1 : 1.6. 30 : 50rem 이다.
		 * 오른쪽이 넓어야 의견이 지나가는 것이 보인다.
		 */
		grid-template-columns: minmax(0, var(--qc-card-w)) minmax(0, 1fr);
		gap: var(--qc-col-gap);
		align-items: start;
	}

	/* ★ 여기가 전부다. 왼쪽만 멈춘다. */
	.qc-page .qc-card__left {
		position: sticky;
		top: 2rem;
	}

	/*
	 * 의견이 없으면 오른쪽 칸이 화면 절반을 비운 채 남는다.
	 * 그때는 한 단으로 접고 왼쪽을 넓게 쓴다.
	 */
	.qc-page .qc-card--solo {
		grid-template-columns: minmax(0, 34rem);
		justify-content: center;
	}

	.qc-page .qc-card--solo .qc-card__left {
		position: static;
	}
}

/* ---------- 이미지와 도장 ---------- */

/*
 * 이미지는 카드 위쪽 폭을 꽉 채운다. 사방 여백이 없다.
 * 도장은 그 위에 얹혀 왼쪽 위 모서리에 붙는다.
 */
.qc-page .qc-card__media {
	position: relative;
	line-height: 0;
}

.qc-page .qc-card__img,
.qc-page .qc-card__img img {
	display: block;
	width: 100%;
	height: auto;
}

.qc-page .qc-stamp {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--qc-ink);
	font-family: var(--qc-sans);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* 이미지가 없으면 얹힐 곳이 없다. 흐름 안으로 돌아온다. */
.qc-page .qc-card__media.is-empty .qc-stamp {
	position: static;
	margin-bottom: 0.9rem;
}

/* 네모 하나가 두 칸으로 나뉜다 */
.qc-page .qc-stamp__live {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.35rem 0.5rem;
	color: #fff;
	background: var(--qc-ink);
}

/* ● 만 빨강 */
.qc-page .qc-stamp__dot {
	color: var(--qc-red);
	font-size: 0.62rem;
}

/*
 * 오른쪽 칸은 카드 본체와 같은 색 조합이다.
 * 배지와 카드가 한 덩어리로 읽히게 하는 것이 의도다.
 */
.qc-page .qc-stamp__now {
	display: flex;
	align-items: center;
	padding: 0.35rem 0.5rem;
	color: var(--qc-card-ink);
	background: var(--qc-card-bg);
}

/* ---------- 색이 깔리는 영역 ---------- */

.qc-page .qc-card__body {
	background: var(--qc-card-bg);
	color: var(--qc-card-ink);
	padding: 1.4rem 0 0;
}

/* 색을 넣은 카드만 안쪽 여백을 갖는다. 색이 글자에 바짝 붙으면 답답하다. */
.qc-page .qc-card.has-color .qc-card__body {
	padding: var(--qc-card-pad);
}

/*
 * ★ 카드 안은 전부 regular 다. §4.1의 "굵기로 무게를 준다"와 반대다.
 *   흰 글씨가 색 위에 올라가면 굵기가 더 두꺼워 보이고, 전부 굵으면
 *   무엇을 먼저 읽을지 알 수 없다. 여기서는 **크기**가 위계를 맡는다.
 */
.qc-page .qc-card__title {
	margin: 0 0 1rem;
	font-family: var(--qc-sans);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.03em;
}

/*
 * ★ color: inherit 로는 부족했다.
 *   .qc-page .qc-card__title a 는 (0,2,1) 인데 질문 목록의
 *   .qc-page .qc-card .qc-plist__q 는 (0,3,0) 이라, 목록만 색이 먹고
 *   제목은 다른 규칙에 밀렸다. 같은 무게로 올리고 값을 명시한다.
 */
.qc-page .qc-card__body .qc-card__title,
.qc-page .qc-card__body .qc-card__title a {
	color: var(--qc-card-ink);
	text-decoration: none;
}

.qc-page .qc-card__body .qc-card__title a:hover {
	opacity: 0.65;
}

/*
 * 질문 목록은 이슈 페이지의 .qc-plist 를 그대로 쓴다.
 * 메인용은 --bare — [참여하기] 가 없다. 선과 글자는 카드 글자색을 따른다.
 */
/*
 * ★ 아래 테두리를 없앤다.
 *   .qc-card__foot 이 자기 선을 갖는데, 목록의 아래 테두리와 겹쳐
 *   선이 두 줄로 보였다. foot 쪽을 남기는 이유는 질문이 없는 이슈에서도
 *   그 선이 있어야 하기 때문이다.
 */
.qc-page .qc-card .qc-plist {
	max-width: none;
	margin: 0;
	border-color: currentColor;
	border-bottom: 0;
}

.qc-page .qc-card .qc-plist__row {
	padding: 0.45rem 0;
}

/* 선은 전부 1px. 흐리게 하지 않는다 — 굵기와 색이 섞이면 정리가 안 된다. */
.qc-page .qc-card .qc-plist__row:not(:last-child)::after {
	left: 0;
	right: 0;
	background: currentColor;
}

/* 질문 리스트 — 폰트와 행간을 변수로. 행간이 특히 중요하다. */
.qc-page .qc-card .qc-plist__q {
	font-size: var(--qc-q-size);
	line-height: var(--qc-q-lead);
	font-weight: 400;
	color: inherit;
}

/* 의견 수만 빨강. 카드 글자색을 따르지 않는다. */
.qc-page .qc-card .qc-plist__n {
	color: var(--qc-red);
	opacity: 1;
}

.qc-page .qc-card .qc-plist__q:hover {
	color: inherit;
	opacity: 0.65;
}

/*
 * '상태 역량' 태그가 있던 자리.
 * 목록 끝에 붙지 않는다 — 선 하나를 사이에 두고 따로 놓인다.
 * 오른쪽 정렬이다.
 */
.qc-page .qc-card__foot {
	padding-top: 0.9rem;
	border-top: 1px solid currentColor;
	text-align: right;
}

.qc-page .qc-card__more {
	display: inline-block;
	font-family: var(--qc-sans);
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: inherit;
	text-decoration: none;
}

.qc-page .qc-card__more:hover {
	opacity: 0.65;
}

/* ---------- 오른쪽 ---------- */

.qc-page .qc-card__right {
	min-width: 0;
}

/*
 * 의견은 모양만 .qc-op 를 빌린다. 조작(반응·답글·수정)은 없다 —
 * 메인에는 그 스크립트가 없어서 눌러도 아무 일이 없는 버튼이 된다.
 */
/*
 * ★ 의견 카드의 모양은 qc-opinions.css 가 전담한다. (v1.7.5)
 *
 *   v1.6.0에서 여기에 여섯 규칙을 두었는데, 그때는 의견이 한 덩어리였다.
 *   v1.7.2에서 세 칸 구조로 바뀌면서 **전제가 사라졌는데 규칙만 남았다.**
 *
 *     -webkit-line-clamp: 3   이유를 세 줄에서 자르고 '…' 을 붙였다
 *                             → 전문을 다 보이는 것으로 확정. 지웠다
 *     :hover color red        의견 한 줄이 붉게 변했다
 *                             → §4.1 예외에서 "의견 수만 빨강"이다. 지웠다
 *     display / margin        세 칸 구조가 자기 값을 갖는다. 지웠다
 *
 *   남긴 것은 링크의 성질 둘뿐이다.
 */
.qc-page .qc-op--link {
	text-decoration: none;
	color: inherit;
}

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

/* ---------- 뉴스레터 ---------- */

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

.qc-page .qc-main__news .qc-news {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}