ANTOOZA-FRONTEND/app/(main)/support/faq/style.scss

// FAQ
#faq {
	padding: 24px 32px 32px 32px;
	min-width: 410px;
	max-width: 1920px;
	margin: 0 auto;

	> p {
		font-weight: 500;
		font-size: 1.375rem;
		margin-bottom: 1.25rem;
	}

	> form {
		> dl {
			> dt {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				gap: 0.625rem;

				> input {
					flex-grow: 0.08;
					flex-basis: auto;
				}

				> button {
					flex-grow: auto;
				}
			}

			> dd {
				margin-top: 14px;

				> ul {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					column-gap: 14px;
					row-gap: 8px;
					list-style: none;

					> li {
						font-size: 16px;

						&.active > button {
							color: var(--text-link);
							font-weight: 600;
						}

						> button {
							cursor: pointer;

							&:hover {
								color: var(--text-link);
								background-color: var(--color-primary-100);
								text-decoration: underline;
							}
						}

						// 수직선 구분
						&::after {
							content: '';
							display: inline-block;
							width: 1px;
							height: 14px;
							background-color: #858585;
							margin-left: 15px;
							position: relative;
							top: 2px;
						}

						&:last-child::after {
							display: none;
						}
					}
				}
			}
		}
	}

	// 검색 결과 안내
	> .search-result {
		font-size: 14px;
		margin: 16px 0 8px;
		font-weight: 400;
	}

	// FAQ 목록
	> #questions {
		margin-top: 16px;

		> .faq-item {
			border-bottom: 1px solid var(--color-border, #e5e5e5);

			> summary {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 16px 4px;
				cursor: pointer;
				list-style: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				transition: background-color 0.15s;

				&::-webkit-details-marker {
					display: none;
				}

				&::before {
					content: 'Q.';
					font-weight: 700;
					color: var(--faq-q-color);
					flex-shrink: 0;
				}

				&::after {
					content: '';
					display: inline-block;
					width: 8px;
					height: 8px;
					border-right: 2px solid var(--text-muted);
					border-bottom: 2px solid var(--text-muted);
					transform: rotate(45deg);
					transition: transform 0.2s ease;
					flex-shrink: 0;
					margin-left: auto;
				}

				&:hover {
					background-color: var(--bg-elevated);
				}

				> .faq-category {
					font-size: 13px;
					color: var(--text-secondary);
					background-color: var(--bg-subtle);
					padding: 2px 8px;
					border-radius: 4px;
					flex-shrink: 0;
					white-space: nowrap;
				}

				> .faq-question {
					font-size: 15px;
					font-weight: 500;
					flex-grow: 1;
				}
			}

			&[open] > summary {
				&::after {
					transform: rotate(-135deg);
				}
			}

			> .faq-answer {
				padding: 12px 4px 20px 32px;
				font-size: 14px;
				line-height: 1.7;
				color: #444;

				&::before {
					content: 'A.';
					font-weight: 700;
					color: var(--faq-a-color);
					margin-right: 8px;
				}

				> .no-answer {
					color: var(--text-muted);
					font-style: italic;
				}

				> div {
					display: inline-block;
				}
			}
		}

		// 결과 없음
		> .no-results {
			padding: 48px 0;
			text-align: center;
			color: var(--text-muted);
			font-size: 15px;
		}
	}

	// highlight
	mark {
		background-color: #fef08a;
		color: inherit;
		padding: 1px 2px;
		border-radius: 2px;
	}
}

// 반응형
@media (max-width: 768px) {
	#faq {
		padding: 0 16px 24px 16px;
		min-width: unset;

		> p {
			font-size: 18px;
			margin-bottom: 16px;
		}

		> form > dl {
			> dt {
				flex-wrap: wrap;

				> input {
					flex-grow: 1;
					width: 100%;
				}

				> button {
					flex-shrink: 0;
				}
			}

			> dd > ul {
				column-gap: 10px;

				> li {
					font-size: 14px;

					&::after {
						margin-left: 10px;
					}
				}
			}
		}

		> #questions > .faq-item {
			> summary {
				flex-wrap: wrap;
				gap: 8px;
				padding: 12px 4px;

				> .faq-category {
					font-size: 12px;
				}

				> .faq-question {
					font-size: 14px;
					width: 100%;
					order: 1;
				}

				&::after {
					order: 0;
				}
			}

			> .faq-answer {
				padding: 10px 4px 16px 16px;
				font-size: 13px;
			}
		}
	}
}