body {
	background-color: var(--bg-brand-color);
}


@font-face {
	font-family: 'Tenada';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
	font-weight: normal;
	font-display: swap;
}

/* ================================
   Q&A 컨테이너
================================ */

/* 공통: 가운데 정렬, 좌우 패딩은 안 주고 안쪽 요소에서 처리 */
.qna-container.common-width {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
	box-sizing: border-box;
}

/* ================================
   검색 영역
================================ */

/* 검색폼 전체 – 가운데 정렬 */
.searchform {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

/* [ 인풋+검색 ] + [ 질문하기 ] */
.search-box {
	width: 100%;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	box-sizing: border-box;
	padding: 0 16px;       /* 좌우 여백은 여기서만 */
	margin: 0 auto;
}

/* 인풋 랩 : 테두리 + 배경 */
.search-input-wrap {
	flex: 1;
	height: 50px;
	border: 2px var(--brand-line-color) solid;
	border-radius: 30px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: #fff;
}

/* 입력창 */
.qna-container .search-input-wrap input[type="text"] {
	flex: 1;
	border: 0;
	box-sizing: border-box;
	height: 100%;
	padding: 0 18px;
	background-color: transparent;
	text-align: center;
	font-size: 1rem;
}
.qna-container .search-input-wrap input[type="text"]:focus {
	outline: none;
}

/* 버튼 공통 */
.search-box .btn-search,
.search-box .btn-qs {
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-size: 0.95rem;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* 인풋 안의 검색 버튼 */
.search-input-wrap .btn-search {
	height: 100%;
	padding: 0 20px;
	min-width: 80px;
	box-sizing: border-box;
	background-color: var(--brand-line-color);
	color: #fff;
	border-radius: 0 28px 28px 0;
}

/* 질문하기 버튼 (메인 액션) */
.search-box .btn-qs {
	padding: 0 22px;
	border-radius: 30px;
	background-color: var(--brand-color);
	border: none;
	color: #fff;
	gap: 6px;
}
.search-box .btn-qs i {
	font-size: 0.9rem;
}

/* hover 효과 */
.search-box .btn-qs:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ================================
   리스트 영역
================================ */

.qna-list-box {
	margin-top: 40px;
	padding: 0 50px;
	box-sizing: border-box;
}

.qna-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qna-list li {
	padding: 20px;
	/*background-color: #fff;*/
	box-sizing: border-box;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--brand-line-color);
}

.qs-box {
	position: relative;
	cursor: pointer;
}

/* 작성자/날짜 */
.qs-box .writer {
	font-size: 14px;
	margin-bottom: 5px;
}
.qs-box .writer label {
	font-weight: 600;
}
.qs-box .writer .data {
	color: #777;
	margin-left: 10px;
}

.qs-box .badge-status {
	display: inline-block;
	padding: 4px 15px;
	font-size: 13px;
	line-height: 1;
	border-radius: 20px;
	border: 1px solid var(--brand-line-color);
	color: #777;
}
.qs-box .badge-status.answered {
	border-color: #ff8500;
	color: #ff5500;
}

/* 질문 제목 */
.qs-box .question {
	font-size: 1.1rem;
	color: var(--text-emp-color);
	font-weight: 600;
	padding-right: 40px; /* 화살표와 겹치지 않게 */
}
.qs-box .question .q-mark {
	font-family: Tenada;
	font-size: 1.6rem;
	color: var(--brand-orange);
	font-weight: 400;
	margin-right: 6px;
}

.qs-box .question-content {
	padding-right: 40px;
}

/* 오른쪽 접기/펼치기 화살표 */
.qs-box .arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #929292;
}

/* 답변 영역 (슬라이드 효과) */
.qna-list .answer {
	margin-top: 15px;
	padding: 15px 10px 0 10px;
	border-top: 1px #d7d7d7 solid;
	white-space: pre-wrap;
	font-size: 1rem;
	line-height: 150%;
	color: #000;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.6s ease-in-out, opacity 0.5s ease-in-out;
}

.qna-list a {
	text-decoration: underline;
	color: #4b9896;
}


/* JS에서 .opened 붙여줄 때 */
.qna-list .answer.opened {
	max-height: 500px;
	opacity: 1;
}

/* 검색 결과 없음 */
.no-result {
	margin-top: 30px;
	text-align: center;
	color: #777;
	font-size: .95rem;
}

/* ================================
   반응형
================================ */

/* 태블릿 이하 (패딩, 폭 조정) */
@media (max-width: 1024px) {

	.qna-container.common-width {
		padding: 40px 0;
	}

	.search-box {
		max-width: 100%;
	}

	.qna-list-box {
		margin-top: 30px;
		padding: 0 20px;
	}
}

/* 모바일 (<= 768px) */
@media (max-width: 768px) {

	.qna-container.common-width {
		padding: 30px 0 40px;
	}

	.searchform {
		display: block;
		box-sizing: border-box;
		width: unset;
		margin: 0;
		border: 0;
		padding: 0;
	}

	/* 검색 영역 세로 배치 */
	.search-box {
		width: calc(100% - 40px);
		display: block;
		flex-direction: unset;
		padding: unset;
		box-sizing: border-box;
	}

	.search-input-wrap {
		/*width: 100%;*/
		height: 40px;
		border-radius: 12px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	.qna-container .search-input-wrap input[type="text"] {
		text-align: left;
		padding: 0 12px;
		height: 100%;
	}

	.search-input-wrap .btn-search {
		border-radius: 0 10px 10px 0;
		padding: 0 15px;
		min-width: unset;
	}

	.search-box .btn-qs {
		width: 100%;
		height: 40px;
		border-radius: 12px;
		font-size: 1rem;
		justify-content: center;
	}

	.search-box .btn-qs i {
		font-size: 1rem;
	}

	.qna-list-box {
		margin-top: 25px;
		padding: 0 10px;
	}

	.qna-list li {
		padding: 16px 12px;
	}

	.qs-box .writer {
		font-size: 13px;
	}

	.qs-box .question {
		font-size: 1rem;
		padding-right: 32px;
	}

	.qs-box .question .q-mark {
		font-size: 1.4rem;
	}

	.qs-box .arrow {
		right: 4px;
	}
}