/* =========================================================
   Support Common
========================================================= */

.support-content {
	padding: 150px 0 220px;


}

.support-narrow {
	width: 1180px;

	margin: auto;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list {
	border-top: 1px solid var(--line);
}

.faq-list details {
	border-bottom: 1px solid var(--line);
}

.faq-list summary {
	display: flex;
	align-items: center;
	gap: 14px;

	height: 98px;
	padding: 0 18px;

	font-size: 20px;
	font-weight: 600;

	cursor: pointer;
}

.faq-list summary::after {
	content: '';

	width: 12px;
	height: 24px;

	margin-left: auto;

	background:
		url('../../images/assets/faq-img-weui-arrow-outlined1.svg')
		center / 12px 24px
		no-repeat;

	transform: rotate(90deg);

	transition: transform .2s;
}

.faq-list details[open] summary {
	color: var(--cyan);
}

.faq-list details[open] summary::after {
	transform: rotate(-90deg);
}

.faq-list details p {
	padding: 35px 18px;

	background: #fafafa;

	color: #666;

	font-size: 18px;
	line-height: 1.5;
}

.faq-label,
.notice-label {
	padding: 10px;

	border-radius: 999px;

	background: #e8edf2;

	color: #000;

	font-size: 14px;
}

.faq-filters {
	display: flex;
	gap: 12px;

	margin-bottom: 42px;
}


/* =========================================================
   List Toolbar
========================================================= */

.list-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	margin: 85px 0 40px;
}


/* =========================================================
   Downloads
========================================================= */

.download-list {
	border-top: 1px solid var(--line);
}

.download-row {
	display: flex;
	align-items: center;

	height: 100px;

	border-bottom: 1px solid var(--line);

	font-size: 18px;
	font-weight: 600;
}

.download-row .download-icon {
	display: grid;
	place-items: center;

	width: 38px;
	height: 38px;

	margin-left: 18px;

	border-radius: 50%;

	background: #edf1f4;
}

.download-row .download-icon img {
	width: 18px;
	height: 18px;
}

.download-row time {
	margin-left: auto;

	color: #888;

	font-weight: 400;
}


/* =========================================================
   Contact
========================================================= */

.contact-form {
	margin-top: 70px;
	padding-top: 5px;

	border-top: 1px solid #222;
}


/* ---------------------------------------------------------
   Form Row
--------------------------------------------------------- */

.contact-form .form-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 0;

	min-height: 64px;
}

.contact-form .form-row > label {
	display: flex;
	align-items: center;

	font-size: 15px;
	font-weight: 600;
}

.contact-form .field {
	width: 100%;
	min-width: 0;
	height: 48px;

	border: 1px solid #ddd;
	border-radius: 0;

	background: #fff;

	font-size: 15px;
}

.contact-form select.field {
	padding: 0 45px 0 16px;
}


/* ---------------------------------------------------------
   Textarea
--------------------------------------------------------- */

.contact-form .form-row.text-row {
	align-items: start;

	padding: 8px 0;
}

.contact-form .text-row label {
	padding-top: 12px;
}

.contact-form .textarea {
	height: 280px;

	padding: 16px;

	resize: vertical;
}


/* =========================================================
   Attachment
========================================================= */

.attachment-area {
	margin-top: 7px;
}

.attachment-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);

	min-height: 64px;
}

.attachment-label {
	display: flex;
	align-items: center;

	font-size: 15px;
	font-weight: 600;
}


/* ---------------------------------------------------------
   File Control
--------------------------------------------------------- */

.file-control {
	display: flex;
	align-items: center;
	gap: 14px;

	min-width: 0;
}


/*
 * 실제 파일 input 숨김
 */

.file-control input[type="file"] {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;

	pointer-events: none;
}


/*
 * 파일선택
 */

.file-select {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 100px;

	height: 46px;

	border: 1px solid var(--cyan);

	background: #fff;

	color: var(--cyan);

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;

	transition:
		background .2s ease,
		color .2s ease;
}

.file-select:hover {
	background: var(--cyan);

	color: #fff;
}


/*
 * File name
 */

.file-name {
	min-width: 0;

	color: #888;

	font-size: 14px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.file-name.has-file {
	position: relative;

	padding-left: 20px;

	color: #444;
}

.file-name.has-file::before {
	content: '';

	position: absolute;

	left: 2px;
	top: 50%;

	width: 8px;
	height: 13px;

	border: 1.5px solid #777;
	border-radius: 5px;

	transform:
		translateY(-50%)
		rotate(40deg);
}


/* ---------------------------------------------------------
   Remove
--------------------------------------------------------- */

.file-remove {
	position: relative;

	flex: 0 0 28px;

	width: 28px;
	height: 28px;

	border: 0;

	background: transparent;

	cursor: pointer;
}

.file-remove i::before,
.file-remove i::after {
	content: '';

	position: absolute;

	left: 50%;
	top: 50%;

	width: 12px;
	height: 1px;

	background: #555;
}

.file-remove i::before {
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}

.file-remove i::after {
	transform:
		translate(-50%, -50%)
		rotate(-45deg);
}


/* ---------------------------------------------------------
   Add
--------------------------------------------------------- */

.file-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	flex: 0 0 92px;

	height: 46px;

	border: 1px solid #ddd;

	background: #fff;

	color: #222;

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;
}

.file-add span {
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
}

.attachment-notice {
	margin: 2px 0 0 220px;

	color: #888;

	font-size: 13px;
}


/* =========================================================
   Privacy
========================================================= */

.privacy-title {
	margin: 30px 0 20px;

	font-size: 15px;
	font-weight: 600;
}

.privacy-box {
	min-height: 90px;

	padding: 20px 24px;

	border: 1px solid #ddd;

	background: #fff;

	color: #777;

	font-size: 13px;
	line-height: 1.8;
}


/* =========================================================
   Agreement
========================================================= */

.agreement {
	position: relative;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin-top: 15px;

	color: #444;

	font-size: 13px;

	cursor: pointer;
}


/*
 * 실제 checkbox 숨김
 */

.agreement input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


/*
 * Custom checkbox
 */

.agreement-check {
	position: relative;

	width: 15px;
	height: 15px;

	flex: 0 0 15px;

	border: 1px solid #9ca3a8;

	background: #fff;
}


/*
 * Checked
 */

.agreement input:checked + .agreement-check {
	border-color: var(--cyan);
}

.agreement input:checked + .agreement-check::after {
	content: '';

	position: absolute;

	left: 4px;
	top: 1px;

	width: 4px;
	height: 8px;

	border-right: 2px solid var(--cyan);
	border-bottom: 2px solid var(--cyan);

	transform: rotate(45deg);
}


/*
 * Focus
 */

.agreement input:focus-visible + .agreement-check {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}


/* =========================================================
   Contact Actions
========================================================= */

.contact-actions {
	display: flex;
	justify-content: center;
	gap: 15px;

	margin-top: 45px;
}

.contact-actions .btn {
	min-width: 120px;
	height: 48px;

	padding: 0 26px;

	font-size: 15px;
}

.contact-back {
	border-color: #ddd;

	background: #fff;
}

.contact-submit {
	border-color: var(--cyan);

	background: var(--cyan);

	color: #fff;
}

.contact-submit:disabled {
	opacity: .45;

	cursor: not-allowed;
}


/* =========================================================
   Messages
========================================================= */

.contact-error,
.policy-warning {
	margin: 20px 0;

	color: #d64242;

	font-size: 14px;
}

.contact-complete {
	margin-top: 70px;

	text-align: center;
}


/* =========================================================
   Etc
========================================================= */

.search-line button img {
	margin: auto;
}


/* =========================================================
   Page Height
========================================================= */

.page-faq .support-content {

}

.page-downloads .support-content {

}

.page-contact .support-content {


}

.page-contact .support-narrow {
	max-width: calc(100% - 80px);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 700px) {

	.page-contact .support-narrow {
		width: auto;

		max-width: calc(100% - 32px);
	}


	.contact-form .form-row,
	.attachment-row {
		grid-template-columns: minmax(0, 1fr);

		padding: 10px 0;
	}


	.contact-form .form-row > label,
	.attachment-label {
		display: block;

		margin-bottom: 8px;
	}


	.contact-form .text-row label {
		padding-top: 0;
	}


	.file-control {
		flex-wrap: wrap;
	}


	.file-name {
		flex: 1;
	}


	.attachment-notice {
		margin-left: 0;
	}


	.privacy-box {
		padding: 18px;
	}


	.contact-actions .btn {
		flex: 1;

		min-width: 0;
	}

}
/* Inquiry verification */
.inquiry-bot-trap { display: none !important; }
.inquiry-captcha { margin: 24px 0; padding: 20px; border: 1px solid #d5dce5; border-radius: 12px; min-width: 0; }
.inquiry-captcha legend { font-weight: 600; padding: 0 6px; }
.inquiry-captcha-image { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.inquiry-captcha-image img { max-width: 100%; object-fit: contain; }
.inquiry-captcha button { padding: 10px 16px; border: 1px solid #bcc9d9; border-radius: 6px; background: #fff; cursor: pointer; }
.inquiry-captcha .field { display: block; width: min(100%, 260px); margin-top: 8px; }
.inquiry-captcha [role=status] { margin-top: 8px; color: #b3261e; }

/* Consent rich text follows the policy editor formatting. */
.privacy-box p + p { margin-top: 12px; }
.privacy-box ul, .privacy-box ol { margin: 12px 0; padding-left: 24px; }
.privacy-box ul { list-style: disc; }
.privacy-box ol { list-style: decimal; }
.privacy-box img { max-width: 100%; height: auto; }
.privacy-box table { max-width: 100%; }
.privacy-box { overflow-wrap: anywhere; overflow-x: auto; }