/* ==========================================================================
   sections/faq.css — FAQ 목록 `/faq/` · 분류별 `/faq/cat/<슬러그>/` (10단계)
   --------------------------------------------------------------------------
   로드 조건: FAQ 아카이브 · FAQ 분류 아카이브에서만(inc/assets.php).

   ★★ 선택자는 전부 `.c4-faq` · `.c4-faq-item` 안으로 한정한다. 블로그 · 공지 화면에 닿지 않게 둔다(제1원칙).
   ★ 사이드 박스 · 3열 그리드 없음. 본문 폭은 FAQ 전용 800(`--c4-faq-inner-w`) — 블로그 본문 컬럼(720)이 아니다.
   ★ '결과 없음'은 블로그 것을 그대로 쓴다(no-results.css 는 전 화면 로드).
   ★★ 페이지네이션 없음(2026-10-07 시안 갱신) — 목록 아래는 바로 섹션 하단 여백이다. 공용 pagination.css 는 건드리지 않는다.
   ★ JS 0 — 열고 닫기는 `<details>`, 탭은 링크다. 열림 애니메이션 없음(시안에 없다).
   ========================================================================== */

/* ==========================================================================
   세로 리듬 (PC 80 / 60 / 48 / 60 · 모바일 60 / 40 / 40 / 40)
   상단 → 제목 → 탭 → 목록 → 하단   (2026-10-07: 다섯 값 → 네 값 — '목록 → 페이지네이션' 이 빠졌다)
   ========================================================================== */

.c4-faq {
	padding-top: var(--c4-page-pt);
	padding-bottom: var(--c4-page-pb-faq);   /* ★ PC 60 — 공지(100)와 다르다 */
}

/* 폭 — 좌우 여백 · 가운데 정렬은 `.c4-container`(base.css) 그대로, 최대 폭만 800 기준으로 바꾼다.
   ★ 폭 숫자를 여기에 적지 말 것. 모바일 327 은 컨테이너의 좌우 24 가 만든다. */
.c4-faq__container {
	max-width: calc(var(--c4-faq-inner-w) + var(--c4-gutter-mobile) * 2);
}

.c4-faq__header { margin-bottom: var(--c4-faq-gap-title); }

/* 제목 — 페이지 제목 계열(블로그 목록 · 공지와 같은 계열), 가운데 정렬. 새 토큰을 만들지 않는다.
   ★ 옵션이 빈 값이면 이 블록은 렌더되지 않고 sr-only `<h1>` 만 남는다(아래 간격도 함께 사라진다). */
.c4-faq__title {
	font-size: var(--c4-fs-page-title);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title);
	color: var(--c4-color-text);
	text-align: center;
}

/* ==========================================================================
   탭 — 시안 `tab`. 링크 목록 · 가로 한 줄 · 넘치면 **이 줄 안에서만** 가로 스크롤
   ========================================================================== */

/*
 * 스크롤 컨테이너.
 * ★★ `overflow-x: hidden` 으로 덮지 말 것 — 넘친 탭에 손이 닿지 않는다(확정값의 전역 금지 사항이기도 하다).
 * ★ 스크롤바는 숨긴다(시안에 없다). 스와이프 · 휠 · 키보드 Tab 이동으로 움직인다.
 * ★ 스크롤 컨테이너는 바깥으로 넘친 것을 잘라서 탭의 **포커스 링**(두께 + 간격, base.css)까지 잘린다.
 *   그래서 위아래에 링 자리만큼 안쪽 여백을 주고 같은 양을 바깥 여백에서 빼서 세로 리듬은 그대로 둔다.
 *   (위는 제목 블록의 아래 여백과 겹쳐 합쳐진다 — 60 + (−4) = 56 + 안쪽 4 = 60.)
 */
.c4-faq__tabs {
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
	margin-top: calc(-1 * (var(--c4-focus-ring-w) + var(--c4-focus-ring-offset)));
	margin-bottom: calc(var(--c4-faq-gap-tabs) - var(--c4-focus-ring-w) - var(--c4-focus-ring-offset));
}

.c4-faq__tabs::-webkit-scrollbar { display: none; }

/*
 * 탭 줄 — 내용 폭 그대로(`max-content`) 늘어나 줄바꿈하지 않는다.
 * ★ PC 는 가운데(시안 inner 800 안에서 459 가 가운데). `margin-inline: auto` 라서 줄이 컨테이너보다
 *   넓어지면 여백이 0 이 되어 **왼쪽부터** 스크롤된다(`justify-content: center` 로 가운데를 잡으면
 *   넘친 왼쪽 탭에 닿을 수 없다).
 * ★ 좌우 안쪽 여백 = 포커스 링 자리(PC). 모바일은 24(아래 미디어 쿼리).
 */
.c4-faq__tab-list {
	display: flex;
	gap: var(--c4-faq-tab-gap);
	width: max-content;
	margin-inline: auto;
	padding-inline: calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
	list-style: none;
}

.c4-faq__tab-item { display: flex; }

/*
 * 탭 — 비활성: 흰 바탕 + 1px `grey900` 테두리 + `grey900` 글자 / 활성: `grey900` 바탕 + 흰 글자.
 * ★★ 활성 색은 포인트 컬러가 **아니다**(시안 `grey900`). `--c4-color-accent` 를 쓰지 말 것.
 * ★★ 활성 탭에도 **같은 두께의 투명 테두리**를 둔다. 비활성에만 테두리가 있으면 활성 탭이 2px 작아지고 글자 기준선이 어긋난다.
 *    배경은 테두리 밑까지 칠해지므로(background-clip 기본값) 활성 탭이 1px 씩 비어 보이지 않는다.
 * 글자: 시안 `Body/body2_bold` 16 / 700 / 1.5 — 기존 토큰 그대로.
 */
.c4-faq__tab {
	display: block;
	padding: var(--c4-faq-tab-pad);
	border: var(--c4-border-w) solid var(--c4-color-text);
	border-radius: var(--c4-radius-tag);   /* 헤더 전화예약 버튼과 같은 둥글기(2026-10-14 사용자 지시 — 처음엔 알약) */
	background-color: var(--c4-color-page-bg);   /* 사이트 바탕과 같은 따뜻한 색(2026-10-14 사용자 지시 · 그 전 흰색) — 언론보도 탭도 이 부품 */
	color: var(--c4-color-text);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	white-space: nowrap;
	transition: background-color var(--c4-tab-dur) ease, border-color var(--c4-tab-dur) ease, color var(--c4-tab-dur) ease;   /* 탭을 바꿀 때 색이 부드럽게(2026-10-14 사용자 지시 '탭들 일괄 · 부드럽게 컬러 변경' — 누르면 tabs.js 가 먼저 바꾸고 옮겨 간다) */
}

.c4-faq__tab.c4-is-current {
	border-color: transparent;
	background-color: var(--c4-color-text);
	color: var(--c4-color-white);
}

/* ==========================================================================
   목록 — 아코디언
   ★★ 테두리 색은 `grey900`(`--c4-color-text`) — 공지의 연한 `divider`(`--c4-color-border`)가 아니다.
   ★ 위 테두리는 **첫 항목에만 한 번**, 아래 테두리는 **항목마다**(공지와 같은 구조 — 둘 다 주면 2px 로 겹친다).
     처음엔 목록(.c4-faq__list)에 걸었는데, 계단식 리빌(2026-10-12)에서 항목만 나타나고 목록의 위 선은 먼저 떠 있어서
     첫 항목으로 옮겼다 — 위치 · 높이는 같다(테두리가 첫 항목 상자 안으로 들어갈 뿐 · 아래 첫 항목 padding 계산 그대로).
   ========================================================================== */

/*
 * 항목 — 위아래 28 (PC · 모바일 같다), 좌우 0(질문이 목록 왼쪽 끝에서 시작).
 * ★★ 아래 여백에서 테두리 두께를 뺀다 — 시안 28 은 INSIDE 테두리를 **포함한** 값이고, 항목 높이가 내용만큼이라
 *    `box-sizing` 이 흡수하지 못해 그대로 쓰면 항목마다 1px 씩 쌓인다(9단계 공지와 같은 함정).
 */
.c4-faq-item {
	padding-top: var(--c4-faq-item-py);
	padding-bottom: calc(var(--c4-faq-item-py) - var(--c4-border-w));
	border-bottom: var(--c4-border-w) solid var(--c4-color-text);
}

/* 첫 항목은 위 여백을 1px 줄이고 그 자리에 목록 맨 위 테두리 — 바깥 높이는 다른 항목과 같다(80). */
.c4-faq-item:first-child {
	padding-top: calc(var(--c4-faq-item-py) - var(--c4-border-w));
	border-top: var(--c4-border-w) solid var(--c4-color-text);
}

/*
 * 질문 줄 — 질문(좌) · 아이콘(우) 양끝 정렬, 세로 가운데.
 * ★ 질문이 여러 줄이면 아이콘은 **질문 블록 전체의 가운데**에 온다(시안 `items-center` 그대로).
 * ★★ `<summary>` 기본 삼각형 표식을 지운다 — `list-style: none` 과 `::-webkit-details-marker` **둘 다** 필요하다.
 *    하나만 쓰면 브라우저에 따라 삼각형이 남는다.
 * 글자: 시안 `Body/body2_bold` 16 / 700 / 1.5 — PC · 모바일 같은 값(기존 토큰 그대로, 모바일 토큰 없음).
 */
.c4-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4-faq-question-icon-gap);   /* ★ 시안에 없는 최소 간격(10단계 결정) */
	list-style: none;
	cursor: pointer;
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
	word-break: keep-all;        /* 좁은 폰에서 낱말 가운데서 접히지 않게(2026-10-15) */
	overflow-wrap: break-word;
}

.c4-faq-item__question::-webkit-details-marker { display: none; }

/* ★ 말줄임을 넣지 않는다 — 공지 목록 제목(1줄 말줄임)과 다르다. 길면 여러 줄로 흐른다.
   `min-width: 0` 이 없으면 flex 자식이 내용보다 작아지지 않아 긴 낱말이 아이콘을 밀어낸다. */
.c4-faq-item__text {
	min-width: 0;
	overflow-wrap: break-word;
}

/* 아이콘 — 11×11. 둥근 선 끝이 상자 밖으로 1 씩 나오므로(시안과 같다) 잘리지 않게 둔다. 색은 질문 글자색(currentColor). */
.c4-faq-item__icon {
	flex-shrink: 0;
	width: var(--c4-faq-icon);
	height: var(--c4-faq-icon);
	overflow: visible;
}

/* 열림 = 세로획만 숨겨 `－`. JS 로 아이콘을 갈아끼우지 않는다. */
.c4-faq-item[open] .c4-faq-item__icon-v { opacity: 0; }

/*
 * 답변 — 시안 `Body/body2` 16 / 400 / 1.5, `grey900`. 질문 줄과 12 띄운다(닫혀 있으면 답변 자체가 그려지지 않아 간격도 없다).
 * ★ 아티클 본문(`.c4-entry-content`)과 다른 계열이다 — 그 규칙을 빌려 오지 않는다.
 */
.c4-faq-item__answer {
	margin-top: var(--c4-faq-answer-gap);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
	overflow-wrap: break-word;
}

/* 문단 ↔ 문단 8 (시안 answer 프레임 gap). 구매자가 넣는 목록 · 인용 등도 같은 간격으로 쌓인다. */
.c4-faq-item__answer > * + * { margin-top: var(--c4-faq-answer-para-gap); }

/* 구매자가 답변에 넣는 링크 · 목록 — 시안에 없다. 링크는 사이트 본문 링크와 같은 모양(포인트 컬러 + 밑줄),
   목록 기호는 글자 줄 안쪽에 둔다(바깥에 두면 왼쪽 여백 0 인 이 목록에서 기호가 목록 밖으로 나간다). */
.c4-faq-item__answer a {
	color: var(--c4-color-accent);
	text-decoration: underline;
}

.c4-faq-item__answer a:hover { text-decoration: none; }

.c4-faq-item__answer :is(ul, ol) { list-style-position: inside; }

/* 언론보도 목록 줄은 공지 목록과 같은 모양 — notice.css(.c4-notice__list · .c4-notice-item)가 맡는다(2026-10-15 사용자 지시 '목록 디자인을 공지사항이랑 동일하게' · template-parts/press-item.php). */

/* ==========================================================================
   모바일 — 기준선 768 (테마 공통 분기점 그대로)
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-faq {
		padding-top: var(--c4-page-pt-m);
		padding-bottom: var(--c4-page-pb-faq-m);
	}

	.c4-faq__header { margin-bottom: var(--c4-faq-gap-title-m); }

	.c4-faq__title { font-size: var(--c4-fs-page-title-m); }

	/*
	 * ★★ 탭 줄이 화면을 넘친다(시안 tabs 459 > 327 — 의도된 것). 줄바꿈하거나 글자를 줄이지 않는다.
	 *    스크롤 컨테이너를 **화면 끝까지** 늘리고(좌우 여백 24 만큼 바깥으로), 줄 안쪽 여백 24 로
	 *    첫 탭 · 마지막 탭이 24 선에 오게 한다. 이렇게 안 하면 마지막 탭이 화면 끝에 붙어 잘린 것처럼 보인다.
	 * ★ 안쪽 여백을 스크롤 컨테이너가 아니라 **줄(내용)** 에 준다 — 그래야 끝까지 밀었을 때 오른쪽 24 가 확실히 남는다.
	 * ★ 페이지 전체 가로 넘침은 0 이다(컨테이너 좌우 여백 안에서만 늘어난다).
	 */
	.c4-faq__tabs {
		margin-inline: calc(-1 * var(--c4-gutter-mobile));
		margin-bottom: calc(var(--c4-faq-gap-tabs-m) - var(--c4-focus-ring-w) - var(--c4-focus-ring-offset));
	}

	/* 모바일은 왼쪽부터(시안 tabs x 0). */
	.c4-faq__tab-list {
		margin-inline: 0;
		padding-inline: var(--c4-gutter-mobile);
	}

	/* 휴대폰 탭 — 높이 42 · 글자 15(2026-10-15 사용자 지시 '모든 탭 일괄' — 목록 탭 list.css 와 같은 값) */
	.c4-faq__tab {
		display: flex;
		align-items: center;
		height: var(--c4-tab-h-m);
		padding-block: 0;
		font-size: var(--c4-tab-fs-m);
	}
}