@charset "UTF-8";

/* ============================================================
   홈 (회사 Weup AI 사이트. 회사소개 통합, 제품은 카드로 간략히)
   ============================================================ */

/* ---------- 1. 히어로 ----------
   좌우 끝까지 채우는 사진 슬라이드 + 아래 제품 바로가기 띠.
   둘을 합쳐 헤더 아래 첫 화면 높이가 되게 한다 (--h-strip).
   사진 왼쪽은 밝게 덮어 글을 읽히게 한다 */

.hero {
	--h-strip: 220px;
	padding-top: var(--h-header);
	background: var(--c-white);
	border-bottom: 1px solid var(--c-line);
}

.hero-banner {
	position: relative;
	height: calc(100svh - var(--h-header) - var(--h-strip));
	min-height: 440px;
	max-height: 720px;
	display: flex;
	align-items: center;
	background: var(--c-fill);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* 가로로 끄는 동작은 슬라이드 넘김에 쓰고, 세로 스크롤만 브라우저에 맡긴다 */
	touch-action: pan-y;
}

/* 사진들을 가로로 늘어놓고 통째로 민다 (main.js 가 --i 를 바꾼다) */
.hero-track {
	display: flex;
	height: 100%;
	transform: translateX(calc(var(--i, 0) * -100%));
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-slide {
	flex: 0 0 100%;
	background: center / cover no-repeat;
}

/* 글 쪽(왼쪽)을 배너 색으로 덮고 오른쪽으로 갈수록 사진이 드러난다 */
.hero-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(244, 244, 245, 0.97) 0%, rgba(244, 244, 245, 0.88) 30%, rgba(244, 244, 245, 0.2) 60%, rgba(244, 244, 245, 0) 75%);
}

/* 이전/다음: 화면 양 끝 세로 가운데 */
.hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border-radius: 50%;
	background: rgba(17, 18, 20, 0.3);
	backdrop-filter: blur(6px);
	color: #fff;
	transition: background-color 0.2s;
}

.hero-arrow--prev {
	left: 20px;
}

.hero-arrow--next {
	right: 20px;
}

.hero-arrow:hover {
	background: rgba(17, 18, 20, 0.6);
}

.hero-arrow::before {
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-arrow--next::before {
	transform: scaleX(-1);
}

/* 점: 아래 가운데. 현재 사진은 길쭉한 막대로 */
.hero-dots {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 2;
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(17, 18, 20, 0.3);
	backdrop-filter: blur(6px);
	transform: translateX(-50%);
}

.hero-dots button {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	transition: width 0.3s, background-color 0.3s;
}

.hero-dots button[aria-current='true'] {
	width: 24px;
	background: #fff;
}

/* 제품 바로가기 띠: 세 칸, 칸마다 번호·이름·한 줄 소개 */
.hero-strip-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: var(--h-strip);
}

.hero-strip-list li + li {
	border-left: 1px solid var(--c-line);
}

.hero-strip-list a {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	/* 설명 줄 수가 달라도 제품명 높이가 맞도록 위에서부터 */
	align-content: start;
	column-gap: 16px;
	row-gap: 4px;
	height: 100%;
	padding: 52px 64px 36px 32px;
	transition: background-color 0.2s;
}

.hero-strip-list li:first-child a {
	padding-left: 0;
}

.hero-strip-list a::after {
	content: '→';
	position: absolute;
	right: 28px;
	top: 50%;
	margin-top: -0.7em;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--c-text-sub);
	transition: transform 0.2s, color 0.2s;
}

.hero-strip-list a:hover strong,
.hero-strip-list a:hover::after {
	color: var(--c-brand);
}

.hero-strip-list a:hover::after {
	transform: translateX(4px);
}

.hero-strip-no {
	grid-row: span 2;
	padding-top: 4px;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--c-brand);
}

.hero-strip-list strong {
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.3;
	transition: color 0.2s;
}

.hero-strip-desc {
	margin-top: 6px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-text-sub);
}

/* 글은 본문 폭에 맞추되, 양 끝 화살표와 겹치지 않게 안쪽으로 */
.hero-inner {
	position: relative;
	z-index: 1;
	padding-left: max(var(--pad-x), 96px);
	padding-right: max(var(--pad-x), 96px);
}

.hero-title {
	font-size: clamp(2.25rem, 5.5vw, 5.5rem);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.035em;
	margin-bottom: 32px;
}

.hero-sub {
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-text-sub);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 48px;
}

/* ---------- 배경 사진 + 덧씌우는 레이어 (회사 소개, 비전) ----------
   .section-bg 안에 사진(.section-bg-img)과 밝은 레이어(.section-bg-veil)를 겹친다.
   사진은 조금 크게 깔고 --px/--py(main.js [data-pointer])만큼 반대로 움직인다 */

.has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.has-bg > .container {
	position: relative;
	z-index: 1;
}

.section-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.section-bg-img {
	position: absolute;
	inset: -32px;
	background: center / cover no-repeat;
	transform: translate(calc(var(--px, 0) * -32px), calc(var(--py, 0) * -24px));
	transition: transform 0.6s ease-out;
}

.section-bg-veil {
	position: absolute;
	inset: 0;
}

/* 회사 소개: AICon 소개 영상의 관제실 장면을 흰 레이어로 옅게. 글이 놓인 위쪽은 더 진하게 */
.company .section-bg-veil {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0.72) 100%);
}

/* 비전: AICon 소개 영상의 레미콘 차량 대열 장면. 글이 놓인 왼쪽은 회색 레이어로 덮고 오른쪽으로 갈수록 사진이 드러난다 (히어로와 같은 방식) */
.vision .section-bg-veil {
	background: linear-gradient(90deg, rgba(244, 244, 245, 0.97) 0%, rgba(244, 244, 245, 0.92) 40%, rgba(244, 244, 245, 0.55) 75%, rgba(244, 244, 245, 0.3) 100%);
}

/* ---------- 2. 회사 소개 ---------- */

.company-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(48px, 7vw, 120px);
	align-items: start;
}

.company-lead {
	font-size: clamp(1.5rem, 2.8vw, 2.75rem);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.company-body .text-lg + .text-lg {
	margin-top: 16px;
}

/* ---------- 3. 비전 ---------- */

/* 슬로건을 화면 가득 크게 */
.vision-slogan {
	margin: 0 0 clamp(40px, 5vw, 64px);
	font-size: clamp(1.875rem, 5.3vw, 5.5rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.vision-slogan .hl {
	color: var(--c-brand);
}

/* 슬로건 단어별 등장: main.js 가 단어를 .word > i 로 감싼다. 아래에서 밀려 올라온다 */
.vision-slogan .word {
	display: inline-block;
	overflow: hidden;
	/* 글자 아래쪽이 잘리지 않게 */
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
	vertical-align: top;
}

.vision-slogan .word > i {
	display: inline-block;
	font-style: normal;
	transform: translateY(105%);
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--w, 0) * 70ms + 120ms);
}

.vision-slogan.is-in .word > i {
	transform: none;
}

.vision-body {
	max-width: 900px;
	padding-top: 28px;
	border-top: 1px solid var(--c-line);
}

/* ---------- 4. 제품 카드 ----------
   위에 제품 사진, 아래에 이름·한 줄 소개. 카드 전체가 상세 페이지 링크 */

.product-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.product-cards > li {
	display: flex;
}

.product-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 36px;
	/* 회색 섹션(.section--fill) 위에 놓이므로 카드는 흰색 */
	background: var(--c-white);
	border-radius: var(--r);
	transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(17, 18, 20, 0.1);
}

/* 상세 링크를 숨긴 동안의 카드: 떠오르는 효과 없음, 아래 여백만 */
.product-card--static:hover {
	transform: none;
	box-shadow: none;
}

.product-card-img {
	display: block;
	/* 제품 사진(static/img/product/*.jpg)이 모두 16:9 라 같은 비율로 맞춰 잘림 없이 채운다 */
	aspect-ratio: 16 / 9;
	margin-bottom: 32px;
	border-radius: var(--r-sm);
	background-size: cover;
	background-position: center;
	transition: transform 0.5s;
}

.product-card-name {
	padding: 0 20px;
	font-size: clamp(1.625rem, 2.7vw, 2.625rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin-bottom: 16px;
}

.product-card-desc {
	padding: 0 20px;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.7;
	color: var(--c-text-sub);
}

.product-card-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 28px 20px 0;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--c-brand);
}

.product-card-more::after {
	content: '→';
	transition: transform 0.2s;
}

.product-card:hover .product-card-more::after {
	transform: translateX(5px);
}

/* 상세 페이지 준비 중: 회색으로 눌리지 않게 + 아래 안내 문구 */
.product-card-more.is-disabled {
	color: var(--c-gray);
	cursor: not-allowed;
}

.product-card-more.is-disabled::after {
	transform: none !important;
}

.product-card-note {
	margin-top: 8px;
	padding: 0 20px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-gray);
}

/* ---------- 반응형 ---------- */

@media (max-width: 1024px) {
	.company-grid {
		grid-template-columns: 1fr;
	}

	.product-cards {
		grid-template-columns: 1fr;
	}

	.product-card {
		padding-bottom: 28px;
	}

	.hero-strip-list a {
		padding: 24px 44px 24px 20px;
	}

	.hero-strip-list a::after {
		right: 16px;
	}

}

@media (max-width: 768px) {
	.hero-banner {
		height: auto;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
	}

	/* 좁은 화면: 사진을 글 아래로 */
	.hero-bg {
		position: relative;
		order: 2;
		width: 100%;
		height: 240px;
	}

	.hero-bg::before {
		background: linear-gradient(180deg, var(--c-fill) 0%, rgba(244, 244, 245, 0) 45%);
	}

	.hero-arrow {
		display: none;
	}

	/* 좁은 화면: 띠는 세로로 쌓는다 */
	.hero-strip-list {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.hero-strip-list li + li {
		border-left: 0;
		border-top: 1px solid var(--c-line);
	}

	.hero-strip-list a,
	.hero-strip-list li:first-child a {
		padding: 20px 48px 20px 0;
	}

	.hero-strip-list a::after {
		right: 4px;
	}

	.hero-strip-list strong {
		font-size: 1.25rem;
	}

	.hero-dots {
		bottom: 14px;
	}

	.hero-inner {
		padding: 40px var(--pad-x) 32px;
	}

	.hero-title {
		margin-bottom: 24px;
	}

	.hero-actions {
		margin-top: 40px;
	}

	.hero-actions .btn {
		flex: 1 1 100%;
		justify-content: space-between;
	}


}

/* ---------- 풀페이지 스크롤 (데스크톱) ----------
   섹션마다 화면 한 장 높이로 두고, 휠·키보드 한 번에 한 섹션씩 넘긴다 (main.js [data-fullpage]).
   html[data-page] 는 layout/default.html 이 붙인다. 좁은 화면에서는 일반 스크롤 */
@media (min-width: 1025px) {
	html[data-page='index'] {
		/* 섹션이 헤더 높이만큼 스스로 위 여백을 갖고 있으므로 */
		scroll-padding-top: 0;
	}

	/* 내용은 줄어든 헤더 아래 남는 공간의 세로 가운데 */
	html[data-page='index'] main > .section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100svh;
		padding: calc(var(--h-header-sm) + 32px) 0 48px;
	}

	html[data-page='index'] .section-head {
		margin-bottom: clamp(32px, 4vw, 56px);
	}

	/* 마지막 장: 문의 띠 + 푸터를 딱 한 화면으로.
	   --h-footer 는 main.js 가 푸터 높이를 재서 넣는다 */
	html[data-page='index'] main > .cta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: calc(100svh - var(--h-footer, 320px));
		padding: calc(var(--h-header-sm) + 24px) 0 32px;
	}

	html[data-page='index'] .cta-inner {
		padding: clamp(40px, 7vh, 96px) clamp(32px, 6vw, 96px);
	}

	html[data-page='index'] .site-footer {
		padding: 40px 0 32px;
	}

	html[data-page='index'] .footer-top {
		padding-bottom: 24px;
		margin-bottom: 24px;
	}

	html[data-page='index'] .footer-bottom {
		margin-top: 16px;
	}
}

/* 오른쪽 섹션 점 (main.js 가 만든다). 첫 화면(사진 슬라이드)에서는 숨긴다 */
.fp-dots {
	position: fixed;
	right: 28px;
	top: 50%;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transform: translateY(-50%);
	transition: opacity 0.3s;
}

.fp-dots.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.fp-dots button {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(17, 18, 20, 0.2);
	transition: height 0.3s, background-color 0.3s;
}

.fp-dots button[aria-current='true'] {
	height: 28px;
	background: var(--c-brand);
}

/* 움직임 줄이기 설정이면 단어 등장을 끈다 */
@media (prefers-reduced-motion: reduce) {
	.vision-slogan .word > i {
		transform: none;
		transition: none;
	}
}