.tc-faq {
	background: var(--wp--preset--color--surface-soft-green);
}

.tc-faq-grid {
	display: grid;
	gap: var(--wp--preset--spacing--6xl);
}

.tc-faq-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2xl);
}

.tc-faq-intro > p:not(.tc-eyebrow) {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: var(--wp--custom--line-height--loose);
}

.tc-faq-cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs);
	width: 100%;
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface-card);
}

.tc-faq-cta strong {
	font-size: var(--wp--preset--font-size--subheading);
}

.tc-accordion {
	border-top: var(--wp--custom--border-width--hairline) solid var(--wp--preset--color--primary-content);
}

.tc-faq-item {
	border-bottom: var(--wp--custom--border-width--hairline) solid var(--wp--preset--color--border);
}

.tc-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg);
	min-height: calc(var(--wp--custom--layout--touch-target) + var(--wp--preset--spacing--2xl));
	cursor: pointer;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: var(--wp--custom--font-weight--bold);
	list-style: none;
}

.tc-faq-item summary::-webkit-details-marker {
	display: none;
}

.tc-faq-icon {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--brand);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--single);
	transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

/* TODO: Figma에 없음 — 임의값: 열린 FAQ를 식별하도록 더하기 아이콘을 45도 회전한다. */
.tc-faq-item[open] .tc-faq-icon {
	transform: rotate(45deg);
}

.tc-faq-answer {
	padding: 0 var(--wp--preset--spacing--5xl) var(--wp--preset--spacing--lg) 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--body);
}

/* TODO: Figma에 없음 — 임의값: 1024px부터 FAQ를 소개/질문 두 열로 배치한다. */
@media (min-width: 1024px) {
	.tc-faq-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--custom--layout--faq-column));
	}
}