@import "./base/font.css";
@import "./base/reset.css";
@import "./base/layout.css";
@import "./base/footer.css";
@import "./base/common-ui.css";

/* ================ 기타 ============== */
.apiDocsMain-wrap {
	/* 참고) iframe 으로 넣을 경우 배경을 부모에서 적용하기위해 빼야함.
	background-color: #0A0A0A;
	*/
	background: url("../img/api-docs-main-img-spot-bg.webp") center top / 1920px 794px no-repeat;
	overflow-wrap: break-word;
	word-break: keep-all;
}

.apiDocsMain-wrap__layout {
	box-sizing: border-box;
	display: grid;
	padding-bottom: 60px;
}

.apiDocsMain-wrap__layout-start,
.apiDocsMain-wrap__layout-reference,
.apiDocsMain-wrap__layout-notice,
.apiDocsMain-wrap__layout-faq {
	box-sizing: border-box;
	padding: 0 24px;
}

.apiDocsMain-wrap__layout-reference {
	margin-top: 96px;
}

.apiDocsMain-wrap__layout-notice {
	margin-top: 80px;
	overflow: hidden;
}

.apiDocsMain-wrap__layout-faq {
	margin-top: 112px;
}

/* ================ 기타 ============== */

/* ================ apiDocsMain-spot ============= */
.apiDocsMain-spot {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1200px;
	padding: 60px 24px 80px;
}

.apiDocsMain-spot__title {
	color: #FFF;
	font-size: 40px;
	font-weight: 800;
	line-height: 44px;
	text-align: center;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.apiDocsMain-spot__title-emphasis {
	color: #FF6C00;
	display: block;
}

.apiDocsMain-spot__description {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	margin-top: 12px;
	text-align: center;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ================ apiDocsMain-spot ============= */

/* =============== apiDocsMain-start =============== */
.apiDocsMain-start__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 32px;
}

.apiDocsMain-start__info-item {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	transition: background-color 0.1s ease-out;
}

.apiDocsMain-start__info-item:hover {
	background-color: #FF6C00;
}

.apiDocsMain-start__info-item:hover .apiDocsMain-start__info-description {
	color: #FFF;
}

.apiDocsMain-start__info-action {
	box-sizing: border-box;
	display: block;
	height: 100%;
	padding: 24px 28px;
	width: 100%;
}

.apiDocsMain-start__info-title {
	color: #FFF;
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
}

.apiDocsMain-start__info-description {
	color: rgba(255, 255, 255, 0.7);
	display: block;
	font-size: 16px;
	line-height: 26px;
	margin-top: 8px;
	transition: color 0.1s ease-out;
}

/* =============== apiDocsMain-start =============== */

/* =============== apiDocsMain-reference =============== */
.apiDocsMain-reference__info {
	display: flex;
	flex-direction: column;
	gap: 16px 12px;
	margin-top: 32px;
}

.apiDocsMain-reference__info-item {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	transition: background-color, border-color 0.1s ease-out;
}

.apiDocsMain-reference__info-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #FF6C00;
}

.apiDocsMain-reference__info-item:hover .apiDocsMain-reference__info-description {
	color: #FFF;
}

.apiDocsMain-reference__info-action {
	box-sizing: border-box;
	display: block;
	height: 100%;
	padding: 23px 23px 27px;
	width: 100%;
}

.apiDocsMain-reference__info-title {
	color: #FFF;
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
}

.apiDocsMain-reference__info-description {
	color: #9F9FA4;
	display: block;
	font-size: 16px;
	line-height: 24px;
	margin-top: 8px;
	transition: color 0.1s ease-out;
}

/* =============== apiDocsMain-reference =============== */

/* =============== apiDocsMain-notice ================ */
.apiDocsMain-notice__info {
	margin-top: 8px;
}

.apiDocsMain-notice__info-item {
	overflow: hidden;
	position: relative;
}

.apiDocsMain-notice__info-item::before {
	/* 하단 보더 선. */
	background-color: rgba(255, 255, 255, 0.15);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 10;
}

.apiDocsMain-notice__info-item::after {
	/* 하단 보더 선 - 활성화 */
	background-color: #FF6C00;
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transform: translateX(-100%);
	transition: transform 0.2s ease-out;
	width: 100%;
	z-index: 20;
}

.apiDocsMain-notice__info-item:hover::after {
	transform: translateX(0);
}

.apiDocsMain-notice__info-item:hover .apiDocsMain-notice__info-text {
	color: #FFF;
}

.apiDocsMain-notice__info-action {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	height: 80px;
	overflow: hidden;
	padding: 20px 40px 21px 0;
	position: relative;
	width: 100%;
}

.apiDocsMain-notice__info-action::after {
	/* 꺽쇠 */
	background: url("../img/api-docs-main-img-arrow-right-20.svg") center / 100% auto no-repeat;
	content: "";
	height: 20px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
}

.apiDocsMain-notice__info-text {
	color: rgba(255, 255, 255, 0.7);
	display: block;
	font-size: 16px;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease-out;
	white-space: nowrap;
}

/* =============== apiDocsMain-notice ================ */

/* =============== apiDocsMain-faq ============= */
.apiDocsMain-faq__info {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
	margin-top: 32px;
}

.apiDocsMain-faq__info-item {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	min-height: 134px;
	transition: background-color, border-color 0.1s ease-out;
}

.apiDocsMain-faq__info-item:hover {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: #FF6C00;
}

.apiDocsMain-faq__info-item:hover .apiDocsMain-faq__description {
	color: #FFF;
}

.apiDocsMain-faq__info-action {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 15px 11px;
	width: 100%;
}

.apiDocsMain-faq__title {
	color: #FFF;
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
}

.apiDocsMain-faq__description {
	color: rgba(255, 255, 255, 0.5);
	display: block;
	font-size: 16px;
	line-height: 24px;
	margin-top: 8px;
	text-align: center;
	transition: color 0.1s ease-out;
}

/* =============== apiDocsMain-faq ============= */

/* ================ 이하 미디어쿼리 모음 ================= */
/* 0 ~ 619px ===>>> 모바일 퍼스트(=== 디폴트값) */

/* 620 ~ 799px */
@media (min-width: 620px) and (max-width: 799px) {

	/* ============================= apiDocsMain-spot */
	.apiDocsMain-spot__title {
		font-size: 56px;
		line-height: 62px;
	}

	.apiDocsMain-spot__description {
		font-size: 18px;
		line-height: 28px;
	}

	/* ============================= apiDocsMain-start */
	.apiDocsMain-start__info {
		flex-direction: row;
	}

	.apiDocsMain-start__info-item {
		flex: 1 1 100%;
	}

	/* ============================= apiDocsMain-reference */
	.apiDocsMain-reference__info {
		flex-direction: row;
	}

	.apiDocsMain-reference__info-item {
		flex: 1 1 100%;
		min-height: 174px;
	}

	.apiDocsMain-reference__info-action {
		padding: 27px 23px 23px;
	}

	.apiDocsMain-reference__info-description {
		margin-top: 20px;
	}

	/* ============================= apiDocsMain-notice */
	/* ============================= apiDocsMain-faq */
	.apiDocsMain-faq__line-break {
		display: none;
	}
}

/* 800px 이상 */
@media (min-width: 800px) {

	/* ============================= apiDocsMain-wrap__layout */
	.apiDocsMain-wrap__layout {
		column-gap: 48px;
		grid-template-columns: minmax(400px, 1fr) minmax(0, 1fr);
		margin: 0 auto;
		max-width: 1200px;
		padding-bottom: 120px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.apiDocsMain-wrap__layout-start,
	.apiDocsMain-wrap__layout-reference,
	.apiDocsMain-wrap__layout-notice,
	.apiDocsMain-wrap__layout-faq {
		padding: 0;
	}

	.apiDocsMain-wrap__layout-reference {
		grid-column: 1 / 3;
		margin-top: 144px;
		order: 1;
	}

	.apiDocsMain-wrap__layout-faq {
		grid-column: 1 / 3;
		margin-top: 160px;
		order: 2;
	}

	.apiDocsMain-wrap__layout-notice {
		margin-top: 0;
	}

	/* ============================= apiDocsMain-spot */
	.apiDocsMain-spot {
		padding: 84px 24px 160px;
	}

	.apiDocsMain-spot__title {
		font-size: 72px;
		line-height: 79px;
	}

	.apiDocsMain-spot__description {
		font-size: 20px;
		line-height: 28px;
	}

	/* ============================= apiDocsMain-start */
	.apiDocsMain-start__info-title {
		font-size: 24px;
		line-height: 32px;
	}

	.apiDocsMain-notice__info-action {
		padding-left: 12px;
	}

	/* 우측 꺽쇠 */
	.apiDocsMain-notice__info-action::after {
		right: 12px;
	}

	/* ============================= apiDocsMain-reference */
	.apiDocsMain-reference__info {
		column-gap: 24px;
		flex-direction: row;
		margin-top: 40px;
	}

	.apiDocsMain-reference__info-item {
		background-color: rgba(255, 255, 255, 0.05);
		border: 1px solid transparent;
		flex: 1 1 100%;
		min-height: 186px;
	}

	.apiDocsMain-reference__info-action {
		padding: 27px 27px 23px;
	}

	.apiDocsMain-reference__info-title {
		font-size: 24px;
		line-height: 32px;
	}

	.apiDocsMain-reference__info-description {
		margin-top: 32px;
	}

	/* ============================= apiDocsMain-notice */
	.apiDocsMain-notice__info {
		margin-top: 32px;
	}

	/* ============================= apiDocsMain-faq */
	.apiDocsMain-faq__info {
		gap: 16px;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		margin-top: 40px;
	}

	.apiDocsMain-faq__title {
		font-size: 20px;
		line-height: 32px;
	}

	.apiDocsMain-faq__description {
		margin-top: 12px;
	}

	.apiDocsMain-faq__line-break {
		display: none;
	}
}

/* ================ 이하 미디어쿼리 모음 ================= */