/* ============================================================
 * faq.css — FAQ 아코디언 (sub_ 전용 템플릿 · [archf_faq])
 * oneup_v01
 *
 * 색상: 로고 계열 오렌지 + 크림 (파란 계열 사용 안 함)
 * ============================================================ */

.faq-section {
	--faq-accent: #E4732A;
	--faq-accent-soft: #FBE8DA;
	--faq-answer-bg: #FBF7F1;
	--faq-border: #E6E2DC;
	--faq-border-active: #E4732A;
	--faq-text: #2B2B2B;
	--faq-text-muted: #6B6B6B;
	--faq-radius: 12px;

	background-color: var(--color-bg, #ffffff);
}

/* ── 헤더 ─────────────────────────────────────────────── */

.faq-section__head {
	text-align: center;
	margin-bottom: 2.5rem;
}

.faq-section__subtitle {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--faq-text-muted);
	letter-spacing: 0.02em;
}

.faq-section__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--faq-text);
	word-break: keep-all;
}

/* ── 목록 ─────────────────────────────────────────────── */

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	max-width: 1000px;
	margin: 0 auto;
}

.faq-item {
	border: 1.5px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background-color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: border-color var(--transition-fast, 0.2s ease),
	            box-shadow var(--transition-fast, 0.2s ease);
}

.faq-item:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.faq-item.is-open {
	border-color: var(--faq-border-active);
	box-shadow: 0 8px 24px rgba(228, 115, 42, 0.14);
}

.faq-item__heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* 질문 버튼 */
.faq-item__toggle {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	padding: 1.25rem 1.5rem;
	border: 0;
	background: transparent;
	color: var(--faq-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.faq-item__toggle:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: -2px;
	border-radius: var(--faq-radius);
}

.faq-item__q {
	flex-shrink: 0;
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--faq-accent);
}

.faq-item__question {
	flex: 1;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	word-break: keep-all;
}

.faq-item__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--faq-accent-soft);
	color: var(--faq-accent);
	font-size: 0.8rem;
	transition: transform 0.25s ease, background-color var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

.faq-item.is-open .faq-item__icon {
	background-color: var(--faq-accent);
	color: #ffffff;
	transform: rotate(180deg);
}

/* 답변 패널 (flow-root: 내부 margin 이 높이 계산에서 빠지지 않도록) */
.faq-item__panel {
	display: flow-root;
}

.faq-item__panel[hidden] {
	display: none;
}

.faq-item__answer {
	display: flex;
	gap: 0.875rem;
	margin: 0 1.5rem 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: 8px;
	background-color: var(--faq-answer-bg);
	border-top: 1px dashed var(--faq-border);
}

.faq-item__a {
	flex-shrink: 0;
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--faq-accent);
}

.faq-item__answer-body {
	flex: 1;
	font-size: 0.9875rem;
	line-height: 1.8;
	color: var(--faq-text-muted);
	word-break: keep-all;
}

.faq-item__answer-body p {
	margin: 0 0 0.75em;
}

.faq-item__answer-body p:last-child {
	margin-bottom: 0;
}

.faq-item__answer-body a {
	color: var(--faq-accent);
	text-decoration: underline;
}

/* 열림 애니메이션 (JS 가 is-animating 부여) */
.faq-item__panel.is-animating {
	overflow: hidden;
	transition: height 0.3s ease;
}

/* ── 반응형 ───────────────────────────────────────────── */

@media (max-width: 767px) {
	.faq-section__head {
		margin-bottom: 1.75rem;
	}

	.faq-list {
		gap: 0.625rem;
	}

	.faq-item__toggle {
		gap: 0.625rem;
		padding: 1rem 1.125rem;
	}

	.faq-item__question {
		font-size: 0.9875rem;
	}

	.faq-item__icon {
		width: 28px;
		height: 28px;
		font-size: 0.72rem;
	}

	.faq-item__answer {
		margin: 0 1.125rem 1.125rem;
		padding: 1rem 1.125rem;
		gap: 0.625rem;
	}

	.faq-item__answer-body {
		font-size: 0.9375rem;
		line-height: 1.7;
	}
}