/**
 * Cross FAQ - 프론트엔드 스타일.
 * 색상 · 폰트 · 여백은 모두 CSS 변수로 주입되며 관리자 > 설정에서 변경합니다.
 */

.cfaq {
	/* 색상 */
	--cfaq-item-bg: #fff;
	--cfaq-item-border: #e5e7eb;
	--cfaq-q-color: #000;
	--cfaq-q-label: #000;
	--cfaq-icon: #000;
	--cfaq-item-bg-active: #fff;
	--cfaq-item-border-active: #000;
	--cfaq-q-color-active: #000;
	--cfaq-q-label-active: #000;
	--cfaq-icon-active: #000;
	--cfaq-answer-bg: #fff;
	--cfaq-a-color: #000;
	--cfaq-a-label: #000;
	--cfaq-search-bg: #fff;
	--cfaq-search-color: #000;
	--cfaq-search-border: #e5e7eb;
	--cfaq-search-border-focus: #000;
	--cfaq-search-ph: #9ca3af;
	--cfaq-search-icon: #9ca3af;
	--cfaq-cat-bg: #fff;
	--cfaq-cat-color: #000;
	--cfaq-cat-border: #e5e7eb;
	--cfaq-cat-bg-active: #000;
	--cfaq-cat-color-active: #fff;
	--cfaq-sub-bg: #fff;
	--cfaq-sub-color: #000;
	--cfaq-sub-border: #e5e7eb;
	--cfaq-sub-bg-active: #000;
	--cfaq-sub-color-active: #fff;
	--cfaq-page-bg: #fff;
	--cfaq-page-color: #000;
	--cfaq-page-border: #e5e7eb;
	--cfaq-page-bg-active: #000;
	--cfaq-page-color-active: #fff;

	/* 레이아웃 */
	--cfaq-radius: 12px;
	--cfaq-gap: 10px;
	--cfaq-max-width: 1024px;
	--cfaq-pad-y: 20px;
	--cfaq-pad-x: 24px;
	--cfaq-a-pad-b: 24px;
	--cfaq-cat-gap: 8px;
	--cfaq-cat-mb: 28px;
	--cfaq-cat-justify: flex-start;
	--cfaq-search-radius: 999px;
	--cfaq-search-pad-y: 17px;

	/* 타이포그래피 */
	--cfaq-font-q: 21px;
	--cfaq-font-a: 18px;
	--cfaq-font-cat: 15px;
	--cfaq-font-sub: 14px;
	--cfaq-font-search: 15px;
	--cfaq-font-page: 14px;
	--cfaq-fw-q: 600;
	--cfaq-fw-a: 400;
	--cfaq-lh-q: 1.55;
	--cfaq-lh-a: 1.75;
	--cfaq-ls: -0.5px;

	box-sizing: border-box;
	width: 100%;
	max-width: var(--cfaq-max-width);
	margin: 0 auto;
	letter-spacing: var(--cfaq-ls);
}

.cfaq *,
.cfaq *::before,
.cfaq *::after {
	box-sizing: border-box;
}

.cfaq-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cfaq-title {
	margin: 0 0 28px;
	font-size: calc(var(--cfaq-font-q) + 10px);
	line-height: 1.35;
	text-align: center;
}

/* ---------- 검색바 ----------
   테마의 input 스타일이 우선하는 경우가 많아 선택자 특이도를 높이고
   핵심 속성에는 !important 를 사용합니다. */
.cfaq .cfaq-searchbar {
	position: relative;
	display: block;
	margin: 0 0 20px;
}

.cfaq .cfaq-searchbar input.cfaq-search-input,
.cfaq .cfaq-searchbar input[type="search"].cfaq-search-input {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: var(--cfaq-search-pad-y) 52px var(--cfaq-search-pad-y) 52px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: var(--cfaq-font-search) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: var(--cfaq-ls) !important;
	color: var(--cfaq-search-color) !important;
	text-indent: 0 !important;
	background: var(--cfaq-search-bg) !important;
	background-image: none !important;
	border: 1px solid var(--cfaq-search-border) !important;
	border-radius: var(--cfaq-search-radius) !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.18s ease;
}

.cfaq .cfaq-searchbar input.cfaq-search-input:focus {
	border-color: var(--cfaq-search-border-focus) !important;
	box-shadow: none !important;
}

.cfaq .cfaq-searchbar input.cfaq-search-input::placeholder {
	font-size: inherit;
	color: var(--cfaq-search-ph);
	opacity: 1;
}

.cfaq .cfaq-searchbar input.cfaq-search-input::-webkit-search-cancel-button,
.cfaq .cfaq-searchbar input.cfaq-search-input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

.cfaq-search-icon {
	position: absolute;
	top: 50%;
	left: 22px;
	z-index: 1;
	display: flex;
	color: var(--cfaq-search-icon);
	transform: translateY(-50%);
	pointer-events: none;
}

.cfaq-search-icon svg {
	display: block;
	width: calc(var(--cfaq-font-search) + 5px);
	height: calc(var(--cfaq-font-search) + 5px);
}

.cfaq .cfaq-search-clear {
	position: absolute;
	top: 50%;
	right: 18px;
	z-index: 1;
	width: 26px;
	height: 26px;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--cfaq-search-color);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
	transform: translateY(-50%);
	opacity: 0.4;
}

.cfaq .cfaq-search-clear:hover {
	opacity: 0.9;
}

.cfaq .cfaq-search-clear[hidden] {
	display: none;
}

/* ---------- 카테고리 ---------- */
.cfaq-cats,
.cfaq-sub-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfaq-cat-gap);
	justify-content: var(--cfaq-cat-justify);
	margin-bottom: 10px;
}

.cfaq button.cfaq-cat,
.cfaq button.cfaq-sub {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 6px 16px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: var(--cfaq-ls) !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer;
	border-style: solid !important;
	border-width: 1px !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cfaq button.cfaq-cat {
	font-size: var(--cfaq-font-cat) !important;
	color: var(--cfaq-cat-color) !important;
	background: var(--cfaq-cat-bg) !important;
	border-color: var(--cfaq-cat-border) !important;
}

.cfaq button.cfaq-cat.is-active {
	color: var(--cfaq-cat-color-active) !important;
	background: var(--cfaq-cat-bg-active) !important;
	border-color: var(--cfaq-cat-bg-active) !important;
}

.cfaq button.cfaq-sub {
	font-size: var(--cfaq-font-sub) !important;
	color: var(--cfaq-sub-color) !important;
	background: var(--cfaq-sub-bg) !important;
	border-color: var(--cfaq-sub-border) !important;
}

.cfaq button.cfaq-sub.is-active {
	color: var(--cfaq-sub-color-active) !important;
	background: var(--cfaq-sub-bg-active) !important;
	border-color: var(--cfaq-sub-bg-active) !important;
}

.cfaq-subs:not(:empty) {
	margin-bottom: 4px;
}

/* ---------- 카테고리 드롭다운 (모바일) ---------- */
.cfaq-cat-select-wrap {
	position: relative;
	display: none;
	margin-bottom: 10px;
}

.cfaq-cat-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--cfaq-cat-color);
	border-bottom: 2px solid var(--cfaq-cat-color);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	opacity: 0.6;
}

.cfaq select.cfaq-cat-select,
.cfaq select.cfaq-sub-select {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 12px 40px 12px 16px;
	margin: 0;
	font-family: inherit;
	font-size: var(--cfaq-font-cat);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--cfaq-ls);
	color: var(--cfaq-cat-color);
	background: var(--cfaq-cat-bg);
	border: 1px solid var(--cfaq-cat-border);
	border-radius: var(--cfaq-radius);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.cfaq select.cfaq-cat-select {
	display: block;
}

/* 중분류 드롭다운은 모바일 드롭다운 모드에서만 보입니다. */
.cfaq select.cfaq-sub-select {
	display: none;
	margin-top: 8px;
	font-size: var(--cfaq-font-sub);
}

.cfaq-sub-group[hidden] {
	display: none;
}

/* ---------- 리스트 ---------- */
.cfaq-list {
	display: flex;
	flex-direction: column;
	gap: var(--cfaq-gap);
	margin-top: var(--cfaq-cat-mb);
}

.cfaq-item {
	overflow: hidden;
	background: var(--cfaq-item-bg);
	border: 1px solid var(--cfaq-item-border);
	border-radius: var(--cfaq-radius);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cfaq-item[hidden] {
	display: none;
}

.cfaq-item.is-open {
	background: var(--cfaq-item-bg-active);
	border-color: var(--cfaq-item-border-active);
}

/* 테마가 h2~h5 에 margin 을 주는 경우가 많아 특이도를 높여 초기화합니다. */
.cfaq .cfaq-item > .cfaq-q-head,
.cfaq h2.cfaq-q-head,
.cfaq h3.cfaq-q-head,
.cfaq h4.cfaq-q-head,
.cfaq h5.cfaq-q-head {
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: none;
	border: 0;
}

.cfaq .cfaq-q-head::before,
.cfaq .cfaq-q-head::after {
	display: none;
}

.cfaq button.cfaq-q {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: var(--cfaq-pad-y) calc(var(--cfaq-pad-x) + 46px) var(--cfaq-pad-y) var(--cfaq-pad-x) !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: var(--cfaq-font-q) !important;
	font-weight: var(--cfaq-fw-q) !important;
	line-height: var(--cfaq-lh-q) !important;
	letter-spacing: var(--cfaq-ls) !important;
	color: var(--cfaq-q-color) !important;
	text-align: left !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.cfaq-item.is-open button.cfaq-q {
	color: var(--cfaq-q-color-active) !important;
}

.cfaq-q-label {
	flex: none;
	font-weight: 700;
	color: var(--cfaq-q-label);
}

.cfaq-item.is-open .cfaq-q-label {
	color: var(--cfaq-q-label-active);
}

/* ---------- +/- 아이콘 ---------- */
.cfaq-icon {
	position: absolute;
	top: 50%;
	right: var(--cfaq-pad-x);
	width: 28px;
	height: 28px;
	color: var(--cfaq-icon);
	border: 1px solid currentColor;
	border-radius: 50%;
	transform: translateY(-50%);
	opacity: 0.75;
}

.cfaq-icon::before,
.cfaq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cfaq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.cfaq-item.is-open .cfaq-icon {
	color: var(--cfaq-icon-active);
	opacity: 1;
}

.cfaq-item.is-open .cfaq-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* ---------- 답변 ---------- */
.cfaq-a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	background: var(--cfaq-answer-bg);
	transition: grid-template-rows 0.25s ease;
}

.cfaq-item.is-open .cfaq-a-wrap {
	grid-template-rows: 1fr;
}

/* 닫힌 상태에서 높이가 완전히 0이 되도록 자식은 반드시 하나만 둡니다. */
.cfaq-a-inner {
	min-height: 0;
	overflow: hidden;
}

/* 라벨(A.) 열 + 내용 열 2단 그리드 → "분류" 표시가 답변 첫 글자와 정확히 정렬됩니다. */
.cfaq-a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	padding: 2px var(--cfaq-pad-x) var(--cfaq-a-pad-b);
	font-size: var(--cfaq-font-a);
	font-weight: var(--cfaq-fw-a);
	line-height: var(--cfaq-lh-a);
	color: var(--cfaq-a-color);
}

.cfaq-a-label {
	grid-column: 1;
	grid-row: 1;
	font-weight: 700;
	color: var(--cfaq-a-label);
}

.cfaq-a-body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/* 테마가 p / ul 여백에 !important 를 쓰는 경우가 많아 동일하게 지정합니다. */
.cfaq .cfaq-a-body p {
	padding: 0 !important;
	margin: 0 0 0.8em !important;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.cfaq .cfaq-a-body p:last-child,
.cfaq .cfaq-a-body > *:last-child {
	margin-bottom: 0 !important;
}

.cfaq .cfaq-a-body ul,
.cfaq .cfaq-a-body ol {
	padding: 0 0 0 1.3em !important;
	margin: 0 0 0.8em !important;
}

.cfaq .cfaq-a-body ul {
	list-style: disc outside !important;
}

.cfaq .cfaq-a-body ol {
	list-style: decimal outside !important;
}

.cfaq .cfaq-a-body li {
	margin: 0 0 0.25em !important;
	font-size: inherit;
	line-height: inherit;
	list-style: inherit !important;
}

.cfaq .cfaq-a-body br {
	display: block;
}

.cfaq-a-body > *:first-child {
	margin-top: 0;
}

.cfaq-a-body > *:last-child {
	margin-bottom: 0;
}

.cfaq-a-body a {
	text-decoration: underline;
}

.cfaq-a-body img {
	max-width: 100%;
	height: auto;
}

.cfaq .cfaq-a .cfaq-a-meta {
	grid-column: 2;
	grid-row: 2;
	padding: 0 !important;
	margin: 12px 0 0 !important;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cfaq-a-color);
	opacity: 0.5;
}

/* ---------- 구분선형(list_style = line) ---------- */
.cfaq--line .cfaq-list {
	gap: 0;
}

.cfaq--line .cfaq-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cfaq-item-border);
	border-radius: 0;
}

.cfaq--line .cfaq-item.is-open {
	background: var(--cfaq-item-bg-active);
	border-bottom-color: var(--cfaq-item-border-active);
}

.cfaq--line button.cfaq-q {
	padding-left: 0 !important;
}

.cfaq--line .cfaq-a {
	padding-left: 0;
}

.cfaq--line .cfaq-icon {
	right: 4px;
}

/* ---------- 빈 결과 ---------- */
.cfaq-empty {
	padding: 48px 20px;
	margin: 18px 0 0;
	font-size: var(--cfaq-font-a);
	color: var(--cfaq-a-color);
	text-align: center;
	opacity: 0.6;
}

.cfaq-empty[hidden] {
	display: none;
}

/* ---------- 페이지네이션 ---------- */
.cfaq-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.cfaq-pagination[hidden] {
	display: none;
}

.cfaq button.cfaq-page {
	width: auto !important;
	min-width: 38px !important;
	height: 38px !important;
	min-height: 0 !important;
	padding: 0 10px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: var(--cfaq-font-page) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-shadow: none !important;
	color: var(--cfaq-page-color) !important;
	cursor: pointer;
	background: var(--cfaq-page-bg) !important;
	border: 1px solid var(--cfaq-page-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.cfaq button.cfaq-page:disabled {
	cursor: default;
	opacity: 0.4;
}

.cfaq button.cfaq-page.is-active {
	color: var(--cfaq-page-color-active) !important;
	background: var(--cfaq-page-bg-active) !important;
	border-color: var(--cfaq-page-bg-active) !important;
}

.cfaq-page-dots {
	padding: 0 4px;
	color: var(--cfaq-page-color);
	opacity: 0.5;
}

/* ---------- 반응형 ---------- */
/* 인라인 변수보다 우선하도록 값이 아닌 속성을 직접 조정합니다. */
@media (max-width: 782px) {
	/* 모바일: 폰트·여백을 더 촘촘하게. (오밀조밀) */
	.cfaq button.cfaq-q {
		gap: 6px;
		padding: calc(var(--cfaq-pad-y) * 0.62) calc(var(--cfaq-pad-x) * 0.6 + 30px) calc(var(--cfaq-pad-y) * 0.62) calc(var(--cfaq-pad-x) * 0.6) !important;
		font-size: calc(var(--cfaq-font-q) * 0.72) !important;
		font-weight: 500 !important;
		line-height: 1.42 !important;
	}

	.cfaq .cfaq-q-label {
		font-weight: 600;
	}

	.cfaq-a {
		padding-right: calc(var(--cfaq-pad-x) * 0.6);
		padding-bottom: calc(var(--cfaq-a-pad-b) * 0.6);
		padding-left: calc(var(--cfaq-pad-x) * 0.6);
		font-size: calc(var(--cfaq-font-a) * 0.78);
		line-height: 1.6;
	}

	.cfaq-item.is-open .cfaq-a {
		padding-top: 0;
	}

	.cfaq .cfaq-a-meta {
		margin-top: 8px;
	}

	.cfaq-list {
		gap: calc(var(--cfaq-gap) * 0.6);
		margin-top: calc(var(--cfaq-cat-mb) * 0.6);
	}

	.cfaq-item {
		border-radius: calc(var(--cfaq-radius) * 0.8);
	}

	/* 검색바 */
	.cfaq .cfaq-searchbar input.cfaq-search-input {
		padding-top: calc(var(--cfaq-search-pad-y) * 0.72) !important;
		padding-right: 42px !important;
		padding-bottom: calc(var(--cfaq-search-pad-y) * 0.72) !important;
		padding-left: 42px !important;
		font-size: calc(var(--cfaq-font-search) * 0.85) !important;
	}

	.cfaq-searchbar {
		margin-bottom: 12px;
	}

	.cfaq-search-icon {
		left: 15px;
	}

	.cfaq .cfaq-search-clear {
		right: 13px;
	}

	/* 카테고리 (드롭다운 / 알약 공통) */
	.cfaq select.cfaq-cat-select,
	.cfaq select.cfaq-sub-select {
		padding: 9px 34px 9px 13px;
		font-size: calc(var(--cfaq-font-cat) * 0.9);
	}

	.cfaq-cat,
	.cfaq-sub {
		padding: 5px 12px;
		font-size: calc(var(--cfaq-font-cat) * 0.92);
	}

	.cfaq-cats,
	.cfaq-sub-group {
		gap: calc(var(--cfaq-cat-gap) * 0.8);
	}

	/* 아이콘 */
	.cfaq-icon {
		right: calc(var(--cfaq-pad-x) * 0.6);
		width: 20px;
		height: 20px;
	}

	.cfaq--line button.cfaq-q {
		padding-left: 0 !important;
	}

	.cfaq--line .cfaq-a {
		padding-left: 0;
	}

	.cfaq--line .cfaq-icon {
		right: 0;
	}

	.cfaq-icon::before,
	.cfaq-icon::after {
		width: 9px;
	}

	/* 드롭다운 모드: 모바일에서 알약 탭을 감추고 드롭다운을 보여 줍니다. */
	.cfaq-catm-dropdown .cfaq-cats {
		display: none;
	}

	.cfaq-catm-dropdown .cfaq-cat-select-wrap {
		display: block;
	}

	.cfaq-catm-dropdown .cfaq-sub-group .cfaq-sub {
		display: none;
	}

	.cfaq-catm-dropdown .cfaq-sub-group .cfaq-sub-select {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cfaq * {
		transition: none !important;
	}
}