@charset "utf-8";

.qna-content-card {
	background: #fff;
}

.qna-portal {
	--qna-primary: #286b38;
	--qna-dark: #173f26;
	--qna-gold: #b59440;
	--qna-line: #e3dac8;
	--qna-soft: #fbf7ee;
	--qna-ink: #17221a;
	--qna-muted: #667066;
}

.qna-portal .board h1,
.qna-portal .wTableFrm > h2 {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
}

.qna-portal .qna-search-box {
	background: #fff;
}

.qna-portal .qna-search-box ul {
	justify-content: flex-end;
}

.qna-portal .qna-search-box .s_input {
	width: min(360px, 100%);
}

.qna-portal .s_btn,
.qna-portal .s_submit,
.qna-portal .qna-btn,
.qna-portal .btn_b a,
.qna-portal .btn_s a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 15px;
	border: 1px solid var(--qna-line);
	border-radius: 6px;
	background: #fff;
	color: var(--qna-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
}

.qna-portal .s_btn,
.qna-portal .qna-btn-primary,
.qna-portal .btn_b a {
	border-color: var(--qna-primary);
	background: var(--qna-primary);
	color: #fff;
}

.qna-portal .qna-btn-danger {
	border-color: #b4232d;
	background: #b4232d;
	color: #fff;
}

.qna-portal .qna-btn-list,
.qna-portal .btn_s a.qna-btn-list {
	border-color: var(--qna-line);
	background: #fff;
	color: var(--qna-ink);
}

.qna-portal .s_btn:hover,
.qna-portal .s_btn:focus,
.qna-portal .s_submit:hover,
.qna-portal .s_submit:focus,
.qna-portal .qna-btn:hover,
.qna-portal .qna-btn:focus,
.qna-portal .btn_b a:hover,
.qna-portal .btn_b a:focus,
.qna-portal .btn_s a:hover,
.qna-portal .btn_s a:focus {
	border-color: var(--qna-gold);
	background: #f4ecd8;
	color: var(--qna-dark);
	text-decoration: none;
}

.qna-portal .qna-btn-primary:hover,
.qna-portal .qna-btn-primary:focus,
.qna-portal .s_btn:hover,
.qna-portal .s_btn:focus,
.qna-portal .btn_b a:hover,
.qna-portal .btn_b a:focus {
	background: var(--qna-gold);
	color: #fff;
}

.qna-portal .qna-btn-danger:hover,
.qna-portal .qna-btn-danger:focus {
	border-color: #7f1d1d;
	background: #7f1d1d;
	color: #fff;
}

.qna-title-btn,
.qna-answer-title-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--qna-ink);
	font-weight: 900;
	line-height: 1.45;
	text-align: left;
}

.qna-portal .qna-board-list .qna-subject,
.qna-portal .qna-answer-board-list .qna-answer-subject {
	text-align: left !important;
}

.qna-portal .qna-board-list .qna-title-btn,
.qna-portal .qna-answer-board-list .qna-answer-title-btn {
	justify-content: flex-start;
	width: 100%;
}

.qna-title-btn::before,
.qna-answer-title-btn::before,
.qna-detail-subject::before {
	content: "Q";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #eaf3eb;
	color: var(--qna-primary);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
}

.qna-title-btn:hover,
.qna-title-btn:focus,
.qna-answer-title-btn:hover,
.qna-answer-title-btn:focus {
	color: var(--qna-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.qna-status,
.qna-detail-status,
.qna-answer-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eaf3eb;
	color: var(--qna-primary);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.2;
}

.qna-status.is-wait,
.qna-detail-status.is-wait,
.qna-answer-status.is-wait,
.qna-answer-detail-status.is-wait,
.qna-answer-status-badge.is-wait {
	background: #fff4d8;
	color: #8a5a00;
}

.qna-status.is-received,
.qna-detail-status.is-received,
.qna-answer-status.is-received,
.qna-answer-detail-status.is-received,
.qna-answer-status-badge.is-received {
	background: #eef2f6;
	color: #46586b;
}

.qna-status.is-done,
.qna-detail-status.is-done,
.qna-answer-status.is-done,
.qna-answer-detail-status.is-done,
.qna-answer-status-badge.is-done {
	background: #eaf3eb;
	color: var(--qna-primary);
}

.qna-empty,
.qna-answer-empty {
	padding: 40px 16px !important;
	color: var(--qna-muted);
	font-weight: 800;
	text-align: center !important;
}

.qna-portal .qna-input,
.qna-portal .qna-select,
.qna-portal .qna-textarea {
	border: 1px solid #d8cdb8;
	border-radius: 6px;
	background: #fff;
	color: var(--qna-ink);
	font-size: 15px;
	box-shadow: none;
}

.qna-portal .qna-input,
.qna-portal .qna-select {
	min-height: 40px;
	padding: 7px 10px;
}

.qna-portal .qna-input-wide {
	width: min(520px, 100%);
}

.qna-portal .qna-input-password {
	width: min(240px, 100%);
}

.qna-tel-group {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 360px;
}

.qna-input-tel {
	width: 88px;
	min-width: 0;
}

.qna-textarea-cell {
	padding: 12px !important;
}

.qna-textarea {
	width: 100%;
	min-height: 260px;
	padding: 14px;
	line-height: 1.7;
	resize: vertical;
}

.qna-check-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-weight: 800;
}

.qna-check-label input {
	margin: 0;
	accent-color: var(--qna-primary);
}

.qna-detail-subject {
	color: var(--qna-dark);
	font-size: 18px;
	font-weight: 900;
}

.qna-detail-subject::before {
	margin-right: 8px;
	vertical-align: middle;
}

.qna-detail-content {
	min-height: 150px;
	line-height: 1.8;
}

.qna-answer-content {
	background: var(--qna-soft) !important;
}

.qna-answer-content::before {
	content: "A";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	border-radius: 50%;
	background: #f4ecd8;
	color: #8b6415;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	vertical-align: middle;
}

.qna-detail-btns,
.qna-regist-btns,
.qna-updt-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.qna-detail-btns form,
.qna-regist-btns .btn_s,
.qna-updt-btns .btn_s {
	margin: 0;
}

.qna-alert {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #e2b4b4;
	border-radius: 8px;
	background: #fff4f4;
	color: #b4232d;
	font-weight: 800;
}

.qna-delete-form {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.qna-delete-label,
.qna-delete-note {
	color: var(--qna-muted);
	font-size: 14px;
	font-weight: 800;
}

.qna-delete-password {
	width: 150px;
}

.qna-portal .error {
	display: block;
	margin-top: 6px;
	color: #b4232d;
	font-size: 13px;
	font-weight: 800;
}

.qna-portal .qna-mobile-page-state,
.qna-portal .board-mobile-page-state {
	display: none;
}

.qna-portal .pagination {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 24px;
}

.qna-portal .pagination ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qna-portal .pagination li a,
.qna-portal .pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	border: 1px solid var(--qna-line);
	border-radius: 6px;
	background: #fff;
	color: var(--qna-dark);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.qna-portal .pagination li.current a {
	border-color: var(--qna-primary);
	background: var(--qna-primary);
	color: #fff;
}

.qna-portal .pagination li.disabled span {
	cursor: default;
	opacity: .45;
}

.qna-portal .pagination li.first a,
.qna-portal .pagination li.first span,
.qna-portal .pagination li.prev a,
.qna-portal .pagination li.prev span,
.qna-portal .pagination li.next a,
.qna-portal .pagination li.next span,
.qna-portal .pagination li.last a,
.qna-portal .pagination li.last span {
	width: 34px;
	min-width: 34px;
	padding: 0;
	font-size: 0;
}

.qna-portal .pagination li.first a::before,
.qna-portal .pagination li.first span::before,
.qna-portal .pagination li.prev a::before,
.qna-portal .pagination li.prev span::before,
.qna-portal .pagination li.next a::before,
.qna-portal .pagination li.next span::before,
.qna-portal .pagination li.last a::before,
.qna-portal .pagination li.last span::before {
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
}

.qna-portal .pagination li.first a::before,
.qna-portal .pagination li.first span::before { content: "<<"; }
.qna-portal .pagination li.prev a::before,
.qna-portal .pagination li.prev span::before { content: "<"; }
.qna-portal .pagination li.next a::before,
.qna-portal .pagination li.next span::before { content: ">"; }
.qna-portal .pagination li.last a::before,
.qna-portal .pagination li.last span::before { content: ">>"; }

@media (max-width: 900px) {
	.qna-portal .qna-search-box ul {
		grid-template-columns: 76px minmax(0, 1fr) 48px 48px;
	}

	.qna-portal .qna-search-box .btn_b {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.qna-portal .qna-search-box .btn_b a,
	.qna-portal .qna-search-box .s_btn {
		width: 100%;
		min-width: 0;
		padding-right: 6px;
		padding-left: 6px;
		font-size: 12px;
		white-space: nowrap;
	}

	.qna-portal .qna-board-list td:nth-child(4)::before,
	.qna-portal .qna-answer-board-list td:nth-child(4)::before {
		content: "상태";
	}

	.qna-portal .qna-board-list td:nth-child(5)::before,
	.qna-portal .qna-answer-board-list td:nth-child(5)::before {
		content: "조회";
	}

	.qna-portal .qna-board-list td:nth-child(6)::before,
	.qna-portal .qna-answer-board-list td:nth-child(6)::before {
		content: "등록일";
		color: #9a8a70;
		font-weight: 800;
	}

	.qna-tel-group {
		max-width: 100%;
	}

	.qna-input-tel {
		width: 100%;
	}

	.qna-detail-btns,
	.qna-regist-btns,
	.qna-updt-btns {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
		justify-content: stretch;
	}

	.qna-detail-btns .qna-btn,
	.qna-regist-btns .qna-btn,
	.qna-updt-btns .qna-btn,
	.qna-detail-btns .s_submit,
	.qna-regist-btns .s_submit,
	.qna-updt-btns .s_submit,
	.qna-detail-btns form,
	.qna-regist-btns .btn_s,
	.qna-updt-btns .btn_s,
	.qna-regist-btns .btn_s a,
	.qna-updt-btns .btn_s a {
		width: 100%;
	}

	.qna-delete-form {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.qna-portal .pagination ul {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 7px;
	}

	.qna-portal .pagination li:not(.first):not(.prev):not(.next):not(.last):not(.qna-mobile-page-state):not(.board-mobile-page-state) {
		display: none;
	}

	.qna-portal .pagination .qna-mobile-page-state,
	.qna-portal .pagination .board-mobile-page-state {
		display: flex !important;
		order: 3;
	}

	.qna-portal .pagination li.first { order: 1; }
	.qna-portal .pagination li.prev { order: 2; }
	.qna-portal .pagination li.next { order: 4; }
	.qna-portal .pagination li.last { order: 5; }

	.qna-portal .pagination .qna-mobile-page-state span,
	.qna-portal .pagination .board-mobile-page-state span {
		min-width: 68px;
		height: 38px;
		border-color: var(--qna-primary);
		border-radius: 999px;
		background: var(--qna-primary);
		color: #fff;
		font-size: 14px;
		font-weight: 900;
		line-height: 38px;
	}

	.qna-portal .pagination li.first a,
	.qna-portal .pagination li.first span,
	.qna-portal .pagination li.prev a,
	.qna-portal .pagination li.prev span,
	.qna-portal .pagination li.next a,
	.qna-portal .pagination li.next span,
	.qna-portal .pagination li.last a,
	.qna-portal .pagination li.last span {
		position: relative;
		width: 38px;
		min-width: 38px;
		height: 38px;
		padding: 0;
		border-color: #d8cdb8;
		border-radius: 999px;
		background: #fff;
		color: var(--qna-dark);
		font-size: 0;
		line-height: 1;
	}

	.qna-portal .pagination li.first a::before,
	.qna-portal .pagination li.first span::before,
	.qna-portal .pagination li.prev a::before,
	.qna-portal .pagination li.prev span::before,
	.qna-portal .pagination li.next a::before,
	.qna-portal .pagination li.next span::before,
	.qna-portal .pagination li.last a::before,
	.qna-portal .pagination li.last span::before {
		font-size: 15px;
		font-weight: 900;
		line-height: 1;
	}

	.qna-portal .pagination li.first a::before { content: "\00AB"; }
	.qna-portal .pagination li.first span::before { content: "\00AB"; }
	.qna-portal .pagination li.prev a::before { content: "\2039"; }
	.qna-portal .pagination li.prev span::before { content: "\2039"; }
	.qna-portal .pagination li.next a::before { content: "\203A"; }
	.qna-portal .pagination li.next span::before { content: "\203A"; }
	.qna-portal .pagination li.last a::before { content: "\00BB"; }
	.qna-portal .pagination li.last span::before { content: "\00BB"; }

	.qna-delete-form {
		grid-template-columns: 1fr;
	}
}