/* ============================================
   AEO/GEO 이식용 브릿지 CSS
   - layout.css 중 섹션에 필요한 공통만 (헤더/푸터/Lenis 제외)
   - HTML 클래스는 ago- prefix
   ============================================ */

/* 페이지 셸: 호스트 <main> 안에서 검정 배경·폰트 격리 */
.ago-page {
	background-color: #000;
	color: #fff;
	font-family: "GmarketSans", sans-serif;
	word-break: keep-all;
	overflow-wrap: break-word;
	line-break: strict;
	line-height: 1.5;
	width: 100%;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.ago-page.is-ready {
	opacity: 1;
}

.ago-page *,
.ago-page *::before,
.ago-page *::after {
	box-sizing: border-box;
}

.ago-page p,
.ago-page li,
.ago-page h1,
.ago-page h2,
.ago-page h3,
.ago-page h4,
.ago-page h5,
.ago-page h6,
.ago-page dd,
.ago-page dt {
	line-height: 1.5;
}

/* 호스트 main margin 충돌 방지 */
.ago-page.ago-main,
main .ago-page {
	margin-top: 0 !important;
	min-height: 0 !important;
}

/* ---------- layout.css: 공통 대제목 ---------- */
.ago-page .ago-comm-title,
.ago-comm-title {
	width: 100%;
	font-family: "GmarketSans", sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 1.4;
	color: #fff;
	margin: 0;
}

.ago-page .ago-comm-title .ago-highlight,
.ago-comm-title .ago-highlight {
	color: #e5ff48;
}

@media screen and (max-width: 1024px) {
	.ago-page .ago-comm-title,
	.ago-comm-title {
		font-size: 48px;
	}
}

@media screen and (max-width: 768px) {
	.ago-page .ago-comm-title,
	.ago-comm-title {
		font-size: 36px;
		white-space: normal;
		word-break: keep-all;
	}
}

@media screen and (max-width: 500px) {
	.ago-page .ago-comm-title,
	.ago-comm-title {
		font-size: 26px;
	}
}

/* ---------- layout.css: txtBx 텍스트 채움 ---------- */
.ago-page .ago-txtBx,
.ago-txtBx {
	display: inline-block;
	background-image: linear-gradient(
		120deg,
		#fff 0%,
		#fff 48%,
		transparent 48%,
		transparent 100%
	);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
}

.ago-page .ago-txtBx .ago-highlight,
.ago-txtBx .ago-highlight {
	position: relative;
	display: inline-block;
	-webkit-text-fill-color: rgba(255, 255, 255, 1);
}

.ago-page .ago-txtBx .ago-highlight .ago-highlight-yellow,
.ago-txtBx .ago-highlight .ago-highlight-yellow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	white-space: nowrap;
	background-image: linear-gradient(
		120deg,
		#e5ff48 0%,
		#e5ff48 48%,
		transparent 48%,
		transparent 100%
	);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- layout.css: textUsing / flipInXSoft (쓸 경우) ---------- */
.ago-page .ago-textUsing,
.ago-page .ago-textUsing * {
	transition: none !important;
}

.ago-page .ago-textUsing {
	visibility: visible;
	position: relative;
}

.ago-page .ago-textUsing.ago-tlt-hide {
	visibility: hidden;
}

.ago-page .ago-textUsing .ago-highlight {
	display: inline !important;
}

@keyframes ago-flipInXSoft {
	from {
		transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
		opacity: 0;
	}
	60% {
		transform: perspective(1000px) rotate3d(1, 0, 0, -6deg);
		opacity: 1;
	}
	80% {
		transform: perspective(1000px) rotate3d(1, 0, 0, 2deg);
	}
	to {
		transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
	}
}

.ago-page .ago-flipInXSoft {
	backface-visibility: visible !important;
	animation-name: ago-flipInXSoft !important;
}

/* ---------- 앵커 스크롤 여유 (호스트 헤더 높이 맞춰 조정) ---------- */
.ago-page {
	scroll-margin-top: 100px;
}

.ago-page [id] {
	scroll-margin-top: 100px;
}

@media screen and (max-width: 1600px) {
	.ago-page [id] {
		scroll-margin-top: 80px;
	}
}

@media screen and (max-width: 768px) {
	.ago-page [id] {
		scroll-margin-top: 70px;
	}
}