/**
 * questions-core / assets/qc-header.css
 *
 * 헤더(2행) · 햄버거 메뉴 · 뉴스레터.
 *
 * ★ 높이가 이 화면의 전부다
 *   66px + 23px + 1px = 90px. 참조 사이트의 3:1 비율이다.
 *   헤더가 좁을수록 질문이 화면에 더 들어오고, 그것이 북극성에 걸린다.
 *   **손댈 때 높이를 키우지 않는다.**
 *
 * ★ 폭 — 헤더는 화면 끝에서 끝까지다 (v1.4.5)
 *
 *   v1.4.0에서는 --qc-wide(84rem)에 맞췄다. 헤더 아래 선과 질문 목록의 선이
 *   같은 폭이라야 세로가 맞는다는 이유였다.
 *
 *   그런데 1344px보다 넓은 화면에서 헤더 좌우에 여백이 남아,
 *   "띠는 화면 끝에서 끝에 닿게"라는 원래 요구와 어긋났다.
 *   두 안을 화면에서 비교해 **헤더 전체를 끝까지** 쓰기로 정했다.
 *
 *   ★ 그 대가로 헤더 선과 질문 목록 선의 세로 정렬을 포기한다.
 *     의도한 맞바꿈이다 — 나중에 "왜 안 맞지?" 하고 되돌리지 않도록 적어둔다.
 *
 *   본문 폭(--qc-wide)은 그대로다. 메인 이슈 카드는 계속 그것을 기준으로 잡는다.
 */

.qc-hd {
	--qc-hd-1: 66px;
	--qc-hd-2: 23px;

	position: relative;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--qc-ink, #111);
	font-family: var(--qc-sans, sans-serif);
}

/* ---------- 1행 ---------- */

.qc-hd__row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--qc-hd-1);
	padding: 0 1.25rem;
}

.qc-hd__logo {
	display: block;
	line-height: 0;
}

/*
 * 66px 행 안에서 위아래 5px 여백.
 * 원본이 1057×253 이라 4.5배가 확보돼 이 크기에서 선명하다.
 * 편집장이 브라우저에서 맞춘 값이다. 계산식으로 바꾸지 않는다.
 */
.qc-hd__logo img {
	display: block;
	height: 56px;
	width: auto;
}

/* 햄버거 — 선 세 줄. 이미지를 부르지 않는다 */
.qc-hd__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.qc-hd__burger span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: var(--qc-ink, #111);
	transition: transform 0.18s, opacity 0.18s;
}

.qc-hd__burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.qc-hd__burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.qc-hd__burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- 2행 ---------- */

/*
 * 얇은 띠다. 23px 안에 글자가 들어가야 하므로 크기를 키우지 않는다.
 * 위아래 테두리로 띠를 만든다.
 */
.qc-hd__row2 {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	height: var(--qc-hd-2);
	padding: 0 1.25rem;
	/* §4.1 — 선은 전부 1px 검정 */
	border-top: 1px solid var(--qc-ink, #111);

	/*
	 * §4.1 — 전부 고딕. 고정폭은 날짜·숫자에만 쓴다.
	 * 참조 사이트가 이 자리에 고정폭을 쓰지만 우리 규칙이 다르다.
	 */
	font-family: var(--qc-sans, sans-serif);
	font-size: 12px;
	line-height: var(--qc-hd-2);
	letter-spacing: 0.02em;
}

/*
 * ★ 어느 페이지에서든 같은 고정 메뉴다. 이슈 제목을 넣지 않는다.
 *
 *   23px 안에 여덟 항목이 들어가야 하므로 글자를 키우지 않는다.
 *   좁아지면 줄바꿈 대신 **가로 스크롤**로 흘린다 — 한 줄을 넘기면
 *   헤더가 두꺼워지고, 헤더를 좁게 둔 이유가 사라진다.
 */
.qc-hd__side {
	display: flex;
	align-items: stretch;
	min-width: 0;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.qc-hd__side::-webkit-scrollbar {
	display: none;
}

.qc-hd__side--right {
	flex: none;
	margin-left: 1rem;
}

.qc-hd__link {
	flex: none;
	padding: 0 0.7rem;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--qc-ink, #111);
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

.qc-hd__side--left .qc-hd__link:first-child {
	padding-left: 0;
}

.qc-hd__side--right .qc-hd__link:last-child,
.qc-hd__side--right .qc-hd__acct:last-child {
	padding-right: 0;
}

.qc-hd__link:hover {
	color: var(--qc-red, #d81f26);
}

/*
 * 아직 없는 것. 자리는 보이되 눌리지 않는다.
 * 숨기면 "안 만든다"로, 회색이면 "만들고 있다"로 읽힌다.
 */
.qc-hd__link.is-off {
	color: var(--qc-faint, #999);
	cursor: default;
}

.qc-hd__link.is-off:hover {
	color: var(--qc-faint, #999);
}

/* 로그인/가입 — qc-account.js 가 채우는 유일한 컨테이너 */
.qc-hd__acct {
	display: flex;
	align-items: center;
	flex: none;
	padding: 0 0.7rem;
}

.qc-hd__acct .qc-acct__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.qc-hd__acct .qc-acct__name {
	/* 이름과 로그아웃이 붙어 보이던 자리 */
	margin-right: 0.15rem;
	font-family: inherit;
	font-size: inherit;
	color: var(--qc-ink, #111);
	text-decoration: none;
}

.qc-hd__acct .qc-acct__link,

.qc-hd__acct .qc-acct__link:hover {
	color: var(--qc-red, #d81f26);
}

.qc-hd__acct .qc-acct__warn {
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: var(--qc-red, #d81f26);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

/* ---------- 햄버거 메뉴 ---------- */

.qc-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid var(--qc-ink, #111);
}

/*
 * ★ 메뉴는 왼쪽 정렬만 헤더에 맞춘다. 폭은 늘리지 않는다.
 *
 *   "토론하자"가 로고 아래에 정확히 오는 것이 중요하므로 왼쪽 여백은 같다.
 *   그런데 폭까지 끝으로 늘리면 2000px 화면에서 이슈 제목 한 줄이
 *   900px를 넘는다. **읽을 글은 길어지면 안 된다.**
 *
 *   그래서 칸에 상한을 두고 왼쪽으로 몰아 둔다.
 *   헤더는 구조물이라 끝까지 가고, 메뉴는 읽을거리라 안 간다.
 */
.qc-menu__inner {
	padding: 1.6rem 1.25rem 2rem;
}

.qc-menu__group {
	margin-bottom: 1.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--qc-line, #ddd);
}

.qc-menu__label {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--qc-ink, #111);
}

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

.qc-menu__issues li {
	margin-bottom: 0.45rem;
}

.qc-menu__issues a {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--qc-ink, #111);
	text-decoration: none;
}

.qc-menu__issues a:hover {
	color: var(--qc-red, #d81f26);
}

.qc-menu__empty {
	margin: 0;
	font-size: 0.9rem;
	color: var(--qc-muted, #666);
}

/* 항목 */
.qc-menu__item {
	display: block;
	padding: 0.45rem 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--qc-ink, #111);
	text-decoration: none;
}

.qc-menu__item:hover {
	color: var(--qc-red, #d81f26);
}

/*
 * 아직 없는 것. 자리는 보이되 눌리지 않는다.
 * 없는 것처럼 숨기지 않는 이유는 "만들고 있다"가 보여야 하기 때문이다.
 * 살릴 때는 PHP 에서 url 만 채우면 이 클래스가 사라진다.
 */
.qc-menu__item.is-off {
	color: var(--qc-faint, #999);
	cursor: default;
}

/* 항목 옆 한 줄 설명 */
.qc-menu__note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--qc-muted, #666);
}

/*
 * 계정 — 띠에 있는 것의 거울이다. 채우는 것은 qc-header.js.
 *
 * ★ 아이디는 여기 없다. 띠에 이미 있고, 같은 화면에 두 번 나올 이유가 없다.
 *   대신 로그인/로그아웃은 남긴다 — 띠가 좁은 화면에서 가로로 밀리면
 *   그 칸이 화면 밖으로 나갈 수 있는데, 로그아웃은 그때도 닿아야 한다.
 *   (아이디를 빼는 일은 qc-header.js 가 복사하면서 한다)
 */
.qc-menu__acct {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--qc-line, #ddd);
}

.qc-menu__acct .qc-acct__link {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--qc-ink, #111);
	text-decoration: none;
}

.qc-menu__acct .qc-acct__link:hover {
	color: var(--qc-red, #d81f26);
}

.qc-menu__acct .qc-acct__warn {
	padding: 0;
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--qc-red, #d81f26);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

.qc-menu__social {
	display: flex;
	gap: 1rem;
	margin-top: 1.4rem;
}

.qc-menu__social a {
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--qc-ink, #111);
}

.qc-menu__social svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.qc-menu__social a:hover {
	color: var(--qc-red, #d81f26);
}

/* 넓은 화면에서는 두 단으로. 세로로 길어지지 않게 */
@media (min-width: 700px) {
	.qc-menu__inner {
		display: grid;
		grid-template-columns: minmax(0, 34rem) minmax(0, 26rem);
		justify-content: start;
		gap: 0 3rem;
		align-items: start;
	}

	.qc-menu__group {
		grid-column: 1;
		grid-row: 1 / span 9;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}
}

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

.qc-news {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--qc-line, #ddd);
}

.qc-news__lead {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--qc-ink, #111);
}

.qc-news__row {
	display: flex;
	gap: 0.4rem;
}

.qc-news__mail {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.45rem 0.6rem;
	font-family: var(--qc-sans, sans-serif);
	font-size: 0.9rem;
	color: var(--qc-ink, #111);
	background: #fff;
	border: 1px solid var(--qc-ink, #111);
	border-radius: 0;
}

.qc-news__mail:focus {
	outline: none;
	border-color: var(--qc-red, #d81f26);
}

.qc-news__btn {
	flex: none;
	padding: 0.45rem 1rem;
	font-family: var(--qc-sans, sans-serif);
	font-size: 0.9rem;
	font-weight: 800;
	color: #fff;
	background: var(--qc-ink, #111);
	border: 1px solid var(--qc-ink, #111);
	cursor: pointer;
}

.qc-news__btn:hover {
	background: var(--qc-red, #d81f26);
	border-color: var(--qc-red, #d81f26);
}

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

.qc-news__msg {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: var(--qc-muted, #666);
}

.qc-news__msg.is-warn {
	color: var(--qc-red, #d81f26);
}

/* 메뉴 안에서는 두 번째 칸에 */
@media (min-width: 700px) {
	.qc-news[data-place='menu'] {
		grid-column: 2;
	}
}

/* ---------- 좁은 화면 ---------- */

/* ---------- 모바일 ---------- */

/*
 * ★ 띠에는 왼쪽 넷만 남긴다.
 *
 *   여덟 항목이 좁은 화면에서 겹친다. 가로 스크롤로 흘리게 해두었지만,
 *   가로로 미는 줄이 있다는 것을 사람들이 잘 알아채지 못한다.
 *
 * ★ 계정도 함께 감춘다 — 근거가 바뀐 것이 아니라 이미 충족돼 있다
 *
 *   v1.4.5에서 "좁은 화면에서 로그아웃이 닿아야 한다"는 이유로
 *   계정 줄을 띠에 남겼다. 그 이유를 채우는 것은 **햄버거 안의 거울**이고,
 *   거울은 지금 이미 있다. 로그아웃까지 두 번 누르면 닿는다.
 *
 *   띠에 계정만 남기는 안도 검토했는데, 그러면 오른쪽 끝에 항목 하나가
 *   덩그러니 남아 왼쪽 넷과 짝이 안 맞는다. 넷과 하나는 균형이 아니다.
 *
 *   ★ 감춰도 거울은 작동한다. qc-account.js 는 DOM 에 있는 첫
 *     .qc-acct__inner 를 채우고, display:none 은 그것을 막지 않는다.
 *     qc-header.js 가 그 내용을 복사한다. 원본이 안 보일 뿐이다.
 */
@media (max-width: 700px) {
	.qc-hd__side--right {
		display: none;
	}

	/* 왼쪽 넷이 폭을 다 쓴다 */
	.qc-hd__side--left {
		flex: 1 1 auto;
	}
}

@media (max-width: 560px) {
	.qc-hd {
		--qc-hd-1: 56px;
	}

	.qc-hd__logo img {
		height: 34px;
	}

}

/* ---------- 테마 헤더 ---------- */

/*
 * qc-check: dom-verified — 편집장 브라우저 실측 (2026-08-23)
 *
 *   HEADER#header.ct-header   y 126  h  70  자식 2   ← 이것
 *   DIV#main-container        y 126  h 2528 자식 3   ← 본문 전체. 건드리지 않는다
 *   MAIN#main.site-main       y 196  h 2409          ← 본문은 아래에서 따로 시작
 *
 *   #header 를 지워도 본문은 무너지지 않는다. y 가 같아 헷갈리기 쉬운 자리인데,
 *   자식 수와 높이로 구분된다.
 *
 * ★ v1.4.2에서 화면을 무너뜨린 것은 [data-header] 였다.
 *   그것은 <html> 에 붙는 속성이라 문서 전체를 숨겼다.
 *   #header 는 무죄였는데 같은 목록에 있어 함께 지워졌다.
 *   **한 줄에 여러 선택자를 몰아 쓰면 무엇이 범인인지 알 수 없다.**
 *   그래서 여기는 하나만 적는다.
 *
 * ★ display:none 말고 다른 길이 없었나
 *   ① 테마 필터 — 이름을 지어냈던 것이고 실제로는 없다. 지웠다
 *   ② 훅 제거   — Blocksy 헤더는 header.php 안에서 그려진다. 뗄 훅이 없다
 *   ③ 자식 테마에서 header.php 를 비우기 — 이것이 정답이지만
 *      **플러그인이 할 수 없는 일**이다. 적용방법 문서에 적었다
 *   그래서 ④ CSS 한 줄. 자식 테마를 만들면 이 규칙을 지운다.
 *
 *   숨기는 것이 처리가 아니라는 원칙은 유효하다. 이건 임시다.
 */
#header.ct-header {
	display: none;
}