/**
 * 피그마 mo/main (360) 토큰 — 홈 .page-home 전용
 * 배너(.main-visual)는 layout·responsive 기본 유지
 */

/* ----- top_btn: 모바일 2×2 (180×98 톤), sm+ 가로 4칸 ----- */
.home-mo-top-btn-wrap {
	padding-top: 0;
	padding-bottom: 0;
}
.home-mo-top-btn-wrap .contain {
	box-sizing: border-box;
}
.home-mo-top-btn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(168, 168, 168, 0.2);
	box-sizing: border-box;
}
.home-mo-top-btn__cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 12px;
	min-height: 98px;
	padding: 24px 16px;
	box-sizing: border-box;
	background: #ffffff;
	color: #242424;
	text-decoration: none;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	transition: background 0.15s ease;
	border: 0;
	border-right: 1px solid rgba(168, 168, 168, 0.2);
	border-bottom: 1px solid rgba(168, 168, 168, 0.2);
}
.home-mo-top-btn__cell:nth-child(2n) {
	border-right: 0;
}
.home-mo-top-btn__cell:nth-child(n + 3) {
	border-bottom: 0;
}
.home-mo-top-btn__cell:hover {
	background: #f8fafc;
}
.home-mo-top-btn__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 18px;
	color: #0033a0;
}
.home-mo-top-btn__label {
	flex: 1;
	display: flex;
	align-items: flex-end;
	min-height: 14px;
}
.home-mo-top-btn__chev {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	font-size: 10px;
	color: #242424;
	opacity: 0.85;
}
@media (min-width: 640px) {
	.home-mo-top-btn {
		display: flex;
		flex-direction: row;
		grid-template-columns: none;
	}
	.home-mo-top-btn__cell {
		flex: 1 1 0;
		min-width: 0;
		min-height: 98px;
		border-right: 1px solid rgba(168, 168, 168, 0.2);
		border-bottom: 0;
	}
	.home-mo-top-btn__cell:last-child {
		border-right: 0;
	}
}

@media (max-width: 640px) {
	.page-home {
		position: relative;
		background: #ffffff;
	}

	/* 피그마 좌우 20px — 메인 히어로 슬릭(.main-visual) 제외 */
	.home-mo-top-btn-wrap .contain,
	.page-home .main-banner2 .contain,
	.page-home .main-product .contain,
	.page-home .home-fleet-carousel .contain {
		padding-left: max(20px, env(safe-area-inset-left, 0px));
		padding-right: max(20px, env(safe-area-inset-right, 0px));
	}

	/* ----- 신차·중고 섹션 헤더 ----- */
	.page-home .home-fleet-carousel .mb-8.flex {
		margin-bottom: 24px;
		align-items: center;
	}
	.page-home .home-fleet-carousel h2 {
		font-size: 24px !important;
		line-height: 1 !important;
		font-weight: 700 !important;
		color: #242424 !important;
	}
	.page-home .home-fleet-carousel .mb-8 a {
		font-size: 14px;
		font-weight: 400;
		color: #242424;
	}

	/* ----- 플릿 카드 (그림자: article overflow로 box-shadow가 잘리지 않게 슬라이드 래퍼에 적용) ----- */
	.page-home .home-fleet-carousel .fleet-home-slider .fleet-home-slide {
		border-radius: 8px;
		box-shadow:
			0 1px 2px rgba(15, 23, 42, 0.05),
			0 4px 16px rgba(0, 25, 78, 0.07),
			0 12px 36px rgba(0, 25, 78, 0.06);
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card {
		border-radius: 8px;
		border-color: rgba(168, 168, 168, 0.25);
		box-shadow: none !important;
		filter: none;
		overflow: hidden;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card > a {
		border-radius: 8px;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card .relative.h-44 {
		height: 146px !important;
		min-height: 146px;
		border-radius: 8px 8px 0 0;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card .relative.h-44 img {
		border-radius: 8px 8px 0 0;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card .px-4 {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card h3 {
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		color: #242424 !important;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card .text-xl.font-bold {
		font-size: 18px !important;
		font-weight: 700 !important;
		color: #0033a0 !important;
	}
	.page-home .home-fleet-carousel .fleet-vehicle-card .text-sm.font-semibold {
		color: rgba(0, 51, 160, 0.85) !important;
	}

	/* 슬릭 도트 — 피그마 포인트 컬러 */
	.page-home .home-fleet-carousel .fleet-home-slider .slick-dots li.slick-active button {
		background: #0033a0;
	}

	/* ----- 홈 신차장기·중고장기 (.main-product / x-product-section) 슬릭 카드 264px ----- */
	/* Slick은 .product-wrap이 아니라 ul.slick-slider 에 slick-initialized 를 붙임 — 잘못된 부모 선택자면 variableWidth 폭이 콘텐츠 길이마다 달라짐 */
	.page-home .main-product .product-wrap.ver2 {
		overflow: visible;
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized.slick-slider {
		overflow: visible;
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized .slick-list {
		overflow: visible !important;
		margin-left: 0;
		margin-right: 0;
		/* 좌·우·하단: 그림자(drop-shadow ~40px)가 잘리지 않도록 clip 영역 확장 */
		-webkit-clip-path: inset(0 -36px -56px -36px);
		clip-path: inset(0 -36px -56px -36px);
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized .slick-track {
		display: flex !important;
		align-items: stretch;
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized .slick-slide {
		height: auto;
		width: 264px !important;
		max-width: 264px;
		min-width: 264px;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 16px;
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized .slick-slide:last-child {
		margin-right: 0;
	}
	.page-home .main-product .product-wrap.ver2 ul.slick-initialized .slick-slide > div {
		height: 100%;
		min-width: 0;
	}
	.page-home .main-product .product-wrap.ver2 .slick-dots li.slick-active button {
		background: #0033a0;
	}

	/* ----- START DRIVE 블록 (sec03~ 톤만 가볍게) ----- */
	.page-home .start-drive-section {
		font-family: "Pretendard", sans-serif;
	}
}

/* 홈: START DRIVE 캐러셀 하단 도트(640px 초과~768px 태블릿 좁은 폭까지 포함) */
@media (max-width: 768px) {
	.page-home #sdStoriesDots,
	.page-home .start-drive-section .sd-nav-dots,
	.page-home .start-drive-section .sd-nav-dots .slick-dots,
	.page-home .start-drive-section .sd-stories-nav-footer .slick-dots {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
		border: 0 !important;
	}
}