:root {
	--ContentWidth: 1200px;
	--MainColor: #fed201;
	--MoneyColor: #eb135b;
}
body, h1, h2, h3, h4, input, select, option, button, div, span, p {
	font-family: 'S-Core';
	line-height: 1.3;
}
body {
	background-color: #f7f7f7;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 30px;
	font-family: 'Arial', sans-serif;
}

/* 페이지 버튼 공통 스타일 */
.pagination a {
	color: #333;
	text-decoration: none;
	padding: 8px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	transition: all 0.3s;
	background: white;
}

/* 활성 페이지 */
.pagination a.active {
	background: #2980B9;
	color: white;
	border-color:#2980B9;
	font-weight: bold;
}

/* 호버 효과 */
.pagination a:hover:not(.active) {
	background: #f1f1f1;
	transform: translateY(-2px);
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 처음/마지막 버튼 스타일 */
.pagination-first, .pagination-last {
	background: #f8f9fa !important;
	font-weight: bold;
}

/* 이전/다음 버튼 스타일 */
.pagination-prev, .pagination-next {
	background: #e9ecef !important;
}
/* 페이징 버튼에 미묘한 애니메이션 */
.pagination a {
	transform: scale(1);
	transition: transform 0.2s, background 0.3s;
}

.pagination a:hover {
	transform: scale(1.05);
}

/* 활성 페이지는 약간 튀어나오게 */
.pagination a.active {
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* PC 차량상세 */
/* 갤러리 컨테이너 */
.gallery-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	background: #000;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	_height: 746px;
	position: relative;
}
/* 메인 이미지 영역 */
.main-view {
	flex: 1;
	position: relative;
}
.main-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}



/* 네비게이션 버튼 */
.nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 100px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	z-index: 10;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bg-dark);
	opacity: .3;
}

.nav-btn:hover {
	opacity: .5;
	background: var(--MainColor);
	transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: 5px; }
.next-btn { right: 5px; }

/* 썸네일 영역 */
.thumbnail-section {
	background: #000;
	overflow-y: auto;
	width: 205px;
	scrollbar-width: 5px;
	scrollbar-color: var(--MainColor);
}

.thumbnail-section::-webkit-scrollbar {
	width: 5px;
}

.thumbnail-section::-webkit-scrollbar-thumb {
	background: var(--MainColor);
	border-radius: 5px;
}

.thumbnails {
	display: flex;
	flex-wrap: wrap;
}

.thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 99.4px;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.65);
	_transition: all 0.3s;
}

.thumb:hover, .thumb.active {
	_border: 2px solid var(--MainColor);
}

.thumb:hover img, .thumb.active img {
	filter: brightness(1);
}

.thumb.active::after {

}

/* 인디케이터 */
.image-counter {
	position: absolute;
	bottom: 5px;
	right: 5px;
	background: rgba(0, 0, 0, 0.6);
	color: var(--MainColor);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	backdrop-filter: blur(5px);
	z-index: 10;
}

.CarDetailInfo {
	margin-top: 20px;
	background-color: #fff;
	padding: 40px;
}
.InfoWarp {
	margin-bottom: 0px;
}
.InfoWarp > li {
	position: relative;
	margin-bottom: 80px;
}
.InfoWarp > li .skip {
	display: hidden;
	position: absolute;
	top: -180px;
	text-indent: -9999px;
}
.InfoWarp > li > em {
	display: block;
	margin-bottom: 30px;
	padding-bottom: 20px;
	font-size: 14px;
	color: #222222;
	border-bottom: 1px solid #a3a3a3;
	font-style: normal;
}
.InfoWarp > li > em > strong {
	display: block;
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 24px;
	color: #000;
}
.data-form {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 30px;
	background-color: #f9f9f9;
}
.data-form > li {
	width: 25%;
}
.data-form > li dl {
	padding: 10px;
}
.data-form > li dt {
	margin-bottom: 5px;
	font-size: 12px;
	color: #888;
}
.data-form > li dd {
	font-size: 14px;
	color: #000;
	line-height: 1.2;
}
.none-file {
	display: block;
	padding-top: 20px;
	font-size: 16px;
	color: #333;
	text-align: center;
}
.option-full {
	margin-top: -20px;
}
.option-full ol {
	display: flex;
	flex-wrap: nowrap;
	padding: 15px 0 30px;
	border-bottom: 1px solid #eaeaea;
}
.option-full ol li {
	position: relative;
	padding-top: 50px;
	width: 100%;
	font-size: 13px;
	color: #bbb;
	text-align: center;
}
.option-full dl {
	display: flex;
	flex-wrap: nowrap;
	padding: 20px 0;
	border-bottom: 1px solid #eaeaea;
}
.option-full dl dt {
	width: 20%;
	padding-top: 5px;
	font-size: 15px;
	color: #2980B9;
	text-indent: 15px;
}
.option-full dl dd {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	font-size: 13px;
}
.option-full dl dd span {
	position: relative;
	display: inline-block;
	padding: 5px 0;
	width: 25%;
	color: #999999;
	text-indent: 17px; /* 아이콘 공간 확보 */
}

/* 기본 상태 (체크 안됨) */
.option-full dl dd span:before {
	content: "\f0c8";
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	position: absolute;
	left: -24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #999999;
}

/* 체크된 상태 */
.option-full dl dd span.on:before {
	content: "\f14a"; /* FA6 체크된 사각형 */
	font-weight: 900; /* Solid */
	color: #2980B9; /* 텍스트 색상과 통일 */
}

.option-full dl dd span.on {
	color: #2980B9; /* 체크 시 텍스트 색상 변경 유지 */
}
.option-full ol li:nth-child(1):before {

}
.option-full ol li:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transform: translateX(-50%);
}
.responsibility {
	width: 100%;
	margin: 0 auto;
}
.responsibility img {
	max-width: none;
	width: 100%;
}
.inner {
	width: var(--ContentWidth);
	margin: 0 auto;
	text-align: left;
}
/* 메인 탑 영역 */
.MainTop {
	width: var(--ContentWidth);
	margin:0 auto;
	text-align: left;
}
#leftbanner, #rightbanner {
	position: fixed;
	z-index: 1000;
}
/* 메뉴바 */
.gnb {
	width: 100%;
	background-color: var(--MainColor);
}
.gnb ul {
	width: var(--ContentWidth);
	margin: 0 auto;
	font-family: 'S-Core';
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	padding: 20px 0;
	align-items: center;
}
.gnb ul > li {
	flex: 1 1 0;
	text-align: center;
	position: relative;
}
.gnb ul a {
	color: #000;
	font-size: 22px;
	display: inline-block;
	white-space: nowrap;
	word-break: keep-all;
}

/* PC 2단 드롭다운 */
.gnb ul.nav-sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	width: max-content;
	min-width: 220px;
	max-width: min(92vw, 420px);
	display: none;
	flex-direction: column;
	gap: 0;
	padding: 10px 0;
	margin: 0;
	background: #fff;
	border: 1px solid rgba(0,0,0,.10);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0,0,0,.14);
	z-index: 50;
}
.gnb ul.nav-sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;     /* hover-bridge */
	height: 10px;
}
.gnb li.has-submenu:hover > ul.nav-sub,
.gnb li.has-submenu:focus-within > ul.nav-sub {
	display: flex;
}
.gnb ul.nav-sub li {
	flex: none;
	text-align: left;
}
.gnb ul.nav-sub a {
	display: block;
	padding: 10px 14px;
	font-size: 16px;
	color: #111;
	white-space: normal;
}
.gnb ul.nav-sub a:hover {
	background: rgba(254,210,1,.22);
}
.gnb ul a .on, .gnb ul a:hover {
	color: #000;
	transition: all 0.2s;
}
#header {
	background-color: #fff;
}

/* 반응형 햄버거 메뉴 (kcha1) */
.kchaNavBtn {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.kchaNavBtn__bars {
	width: 18px;
	height: 12px;
	position: relative;
	display: inline-block;
}
.kchaNavBtn__bars::before,
.kchaNavBtn__bars::after,
.kchaNavBtn__bars {
	background: transparent;
}
.kchaNavBtn__bars::before,
.kchaNavBtn__bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #111;
	border-radius: 2px;
}
.kchaNavBtn__bars::before { top: 0; box-shadow: 0 5px 0 #111; }
.kchaNavBtn__bars::after { bottom: 0; }

.kchaNavBackdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 9998;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}
.kchaNavDrawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100dvh;
	width: min(92vw, 360px);
	background: #fff;
	z-index: 9999;
	box-shadow: -10px 0 30px rgba(0,0,0,.18);
	transform: translateX(12px);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}
body.kchaNavOpen .kchaNavDrawer {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}
body.kchaNavOpen .kchaNavBackdrop {
	opacity: 1;
	pointer-events: auto;
}
body.kchaNavOpen { overflow: hidden; }

.kchaNavBackdrop[hidden],
.kchaNavDrawer[hidden] {
	display: none !important;
}

.kchaNavDrawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 14px 10px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.kchaNavDrawer__title { font-size: 16px; }
.kchaNavDrawer__close {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	font-size: 22px;
	line-height: 1;
}
.kchaNavDrawer__nav {
	padding: 10px 10px 18px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.kchaNavDrawer__nav ul {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: block !important;
}
.kchaNavDrawer__nav li { border-bottom: 1px solid rgba(0,0,0,.06); }
.kchaNavDrawer__nav a {
	display: block;
	padding: 14px 10px;
	font-size: 16px;
	color: #111;
}
.kchaNavDrawer__nav .nav-sub a {
	padding-left: 22px;
	font-size: 14px;
	color: rgba(0,0,0,.75);
}

@media (max-width: 960px) {
	:root { --ContentWidth: 100%; }
	.MainTop {
		width: 100%;
		padding: 10px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: relative;
		z-index: 10;
	}
	.inner { width: 100%; padding-left: 12px; padding-right: 12px; }
	.gnb { display: none; }
	.kchaNavBtn {
		display: inline-flex;
		position: relative;
		z-index: 10000; /* ensure clickable above any overlays */
	}
}
/* 차량리스트 */
.HomeCarList, .CarList {

}
.CarList > ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
	padding: 0;
	list-style: none;
}

.CarList > ul > li {
	position: relative;
	background: #f9f9f9;
	border-radius: 0px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid #fff;
	cursor: pointer;
}

.CarList > ul > li:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	border-color: var(--MainColor);
}

.CarListImage {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.CarListImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.CarList > ul > li:hover .CarListImage img {
	transform: scale(1.05);
}
.CarList > ul > li:hover .CarLabel {
	transform: translateY(-150%);
	opacity: 0;
}
.CarList > ul > li:hover .CarListText {
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
}
.CarLabel {
	position: absolute;
	top: 0px;
	left: 10px;
	width: 30%;
	max-width: 100px;
	z-index: 10;
	transition: all 0.5s ease-in-out;
}

.CarListText {
	padding: 15px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	transition: all 0.2s ease-in-out;
	background-color: #fff;
}

.CarListTitle {
	font-size: 16px;
	color: #333;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.MoneyTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0px;
}

.MoneyTable td {
	padding: 2px 0;
}

.MoneyTable .l {
	text-align: left;
	font-size: 14px;
	color: #666;
}

.MoneyTable .r {
	text-align: right;
	font-size: 17px;
	font-weight: 700;
	color: var(--MoneyColor);
}

.MoneyTable .b {
	font-weight: 700;
}

.MoneyTable .f {
	color: #666;
	font-size: 13px;
	font-weight: normal;
}

.CarListInfo {
	padding: 10px 15px;
	font-size: 15px;
	color: #555;
	border-top: 1px solid #eee;
}
.CarListInfo .item::before {
	content: "•";
	color: #aaa;         /* 흐리게 */
	opacity: 0.5;        /* 더 흐리게 */
	margin: 0.2px;       /* 좌우 여백 */
}

.CarListInfo .item:first-child::before {
	content: "";         /* 첫 번째 항목은 기호 생략 */
}

.Brand {
	font-weight: 700;
}

/* 태블릿 대응 */
@media (max-width: 768px) {
	.CarList > ul {
		gap: 12px;
	}
	
	.CarListTitle {
		font-size: 15px;
	}
	
	.MoneyTable .r {
		font-size: 16px;
	}
}

/* 모바일 대응 (항상 2개 유지) */
@media (max-width: 480px) {
	.CarList > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2열 고정 */
		gap: 10px;
	}
	
	.CarListText {
		padding: 10px;
	}
	
	.MoneyTable .l {
		font-size: 12px;
	}
	
	.MoneyTable .r {
		font-size: 14px;
	}
	
	.MoneyTable .f {
		font-size: 11px;
	}
	
}

/* 매우 작은 모바일 화면에서도 2개 유지 */
@media (max-width: 544px) {
	.CarList > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	
	.CarListTitle {
		font-size: 13px;
	}
	
	.MoneyTable .l {
		font-size: 11px;
	}
	
	.MoneyTable .r {
		font-size: 13px;
	}
	
	.CarListInfo {
		font-size: 11px;
		padding: 6px 8px;
	}
}
.HomeCarList .CarListInfo .b, .CarList .CarListInfo .b {

}
.HomeTitle {
	margin-top: 20px;
	text-align: center;
	font-size: 30px;
	letter-spacing: -0.08rem;
	color: #000;
}
.HomeTitle span {
	font-size: 30px;
	letter-spacing: -0.08rem;
	color: var(--MainColor);
}
.HomeSubTitle {
	text-align: center;
	font-size: 18px;
	letter-spacing: -0.08rem;
	margin: 10px 0;
}
.HomeMoreBtn {
	text-align: center;
}
.HomeMoreBtn button {
	font-size: 20px;
	font-family: 'S-Core';
	font-weight: 400;
	width: 260px;
	line-height: 44px;
	height: 50px;
	color: #fff;
	background-color: #fed201;
	margin: 40px auto 50px;
	cursor: pointer;
	border-radius: 50px;
}
/* 차량상세페이지 */
.CarTopInfoBox {
	background-color: #fff;
	width: var(--MainWidth);
	padding: 40px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: flex-end;
}
.CarTopInfoBox .CarInfoTitle {
	font-family: 'NanumSquare';
	font-size: 24px;
	font-weight: 700;
	width: 80%;
}
.CarTopInfoBox .CarInfoEtc {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	gap: 30px;
	width: 80%;
}
.CarTopInfoBox .CarInfoEtc span {
	position: relative;
	font-family: 'NanumSquare';
	font-size: 18px;
	font-weight: 400;
}
.CarTopInfoBox .CarInfoEtc span:after {
	right: -18px;
	position: absolute;
}
.CarTopInfoBox .CarInfoEtc span:not(:last-child)::after {
	content: "|";
	margin-left: 10px;
	color: #cdcdcd;
}

/* 계산기 */
#SelDownPay {
	width: 100px;
	font-size: 20px;
	border: none;
	background-color: transparent;
	border-bottom: 1px solid #c8c8c8;
	height: 36px;
}
/* 테이블 스타일링 */
.PriceWrap {
	margin-top: 20px;
	padding: 40px;
	background-color: #fff;
}
.price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.price-table thead tr {
	background-color: #2c3e50;
	color: #ffffff;
	text-align: left;
	font-weight: bold;
}
.price-table th,
.price-table td {
	padding: 15px 20px;
	text-align: center;
}
.price-table tbody tr {
	border-bottom: 1px solid #dddddd;
	transition: all 0.3s;
}
.price-table tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
}
.price-table tbody tr:last-of-type {
	border-bottom: 2px solid #2c3e50;
}
.price-table .PriceDownTitle, .price-table #DownMoney {
	font-size: 22px;
	font-weight: 600;
}
/* 강조 스타일 */
.highlight {
	font-weight: 700;
	color: #e74c3c;
	font-size: 24px;
}

/* 푸터 노트 스타일 */
.footer-note {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 5px;
	margin-top: 20px;
	font-size: 14px;
	border-left: 4px solid #3498db;
}

/* 금액 강조 */
.price-amount {
	font-weight: bold;
	color: #2980B9;
}

/* 상세페이지 딜러 정보 */
.DealerInfo .data-form {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 30px;
	background-color: #f9f9f9;
	align-items: flex-start;
}

.DealerInfo .DealerImage {
	width: 20%;
	padding: 10px;
}

.DealerInfo .DealerImage img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.DealerInfo .info-container {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
}

.DealerInfo .data-form > .info-container > li {
	width: 50%;
}

.DealerInfo .data-form > .info-container > li dl {
	padding: 10px;
}

.DealerInfo .data-form > .info-container > li dt {
	margin-bottom: 5px;
	font-size: 12px;
	color: #888;
}

.DealerInfo .data-form > .info-container > li dd {
	font-size: 14px;
	color: #000;
	line-height: 1.2;
}

.DealerInfo .footer-note {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 5px;
	margin-top: 20px;
	font-size: 14px;
	border-left: 4px solid #3498db;
}
.ConsultBtnWarp {
	float: right;
	width: 20%;
}
.ConsultPopupBtn, .inspection-btn {
	float: right;
	width: 160px;
	height: 54px;
	font-size: 19px;
	color: #fff;
	background-color: #2980B9;
}
.inspection-btn {
	width: 100% !important;
	float: left;
	margin: 10px 0 30px;
}
/* 최근본상품 */
.recent-viewed {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 120px;
	background: white;
	box-shadow: -2px 0 10px rgba(0,0,0,0.1);
	z-index: 1000;
	padding: 10px 0;
	border-radius: 8px 0 0 8px;
	overflow: hidden;
}

.recent-title {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid #eee;
	color: #333;
}

.recent-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 5px;
	max-height: 400px;
	overflow-y: auto;
}

.recent-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: transform 0.2s;
}

.recent-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0px;
	margin-bottom: 5px;
	box-shadow: rgba(12, 12, 12, .1) 4px 4px 4px;
	border: 1px solid #fff;
}

.recent-name {
	font-size: 12px;
	text-align: center;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.2;
	word-break: keep-all;
	font-family: malgun gothic;
}

/* 스크롤바 스타일 */
.recent-items::-webkit-scrollbar {
	width: 3px;
}

.recent-items::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 3px;
}

.recent-items::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}
.bbsList, .bbsView {
	width: var(--ContentWidth);
	margin: 20px auto 20px;
}
.bbsList ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
@media (max-width: 1200px) {
	.bbsList ul {
		width: 96%;
	}
}
@media (max-width: 428px) {
	.bbsList ul {
		grid-template-columns: repeat(2, 1fr);
	}
}
.bbsList > ul > li {
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid #fff;
	cursor: pointer;
	background-color: #fff;
}

.bbsList > ul > li:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	border-color: var(--MainColor);
}

.bbsList li .img {
	aspect-ratio: 1 / 1;
	background-color: #000;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.bbsList li .img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.2s ease-in-out;
}
.bbsList li .img img:hover {
	transform: scale( 1.1 );
}
.bbsList .subject {
	font-size: 16px;
	line-height: 1.5; /* 필수 추가 */
	padding: 5px 9px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	max-height: calc(1.5em * 3 + 8px); /* (line-height × 줄 수) + padding */
	text-overflow: ellipsis;
	word-break: break-word; /* 단어 단위 줄바꿈 */
	min-width: 0; /* 부모가 flex일 경우 추가 */
}
.bbsView {
	background-color: #fff;
}
.bbsView .title {
	text-align: center;
	font-family: 'GmarketSans' !important;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -1.75px;
	padding-bottom: 20px;
}
.bbsView .viewBox {
	padding: 4%;
}
.bbsView .viewBox img {
	margin: 0 auto;
}
.bbsView .bottom {
	padding: 20px;
	text-align: center;
}

/* ======== 반응형 스타일 추가 ======== */
/* 반응형 미디어 쿼리 */
@media (max-width: 1200px) {
	:root {
		--ContentWidth: 100%;
	}
	
	.gallery-container {
		_height: 600px;
	}
	
	.thumbnail-section {
		width: 180px;
	}
	
	.thumb {
		width: 90px;
	}
	
	.CarTopInfoBox .CarInfoTitle,
	.CarTopInfoBox .CarInfoEtc {
		width: 100%;
	}
	
	.option-full dl dd span {
		width: 33.333%;
	}
	
	.recent-viewed {
		width: 100px;
	}
	
	.bbsList li {
		_width: 23%;
	}
}

@media (max-width: 992px) {
	.gallery-container {
		_height: 500px;
		flex-direction: column;
	}
	
	.thumbnail-section {
		width: 100%;
		height: 100px;
		overflow-x: auto;
		overflow-y: hidden;
	}
	
	.thumbnails {
		flex-wrap: nowrap;
		height: 100%;
	}
	
	.thumb {
		width: 120px;
		height: 100%;
	}
	
	.data-form > li {
		width: 33.333%;
	}
	
	.option-full dl dt {
		width: 25%;
	}
	
	.option-full dl dd {
		width: 75%;
	}
	
	.option-full dl dd span {
		width: 50%;
	}
	
	.bbsList li {
		_width: 31%;
	}
	
	.recent-viewed {
		display: none;
	}
}

@media (max-width: 768px) {
	.gallery-container {
		_height: 400px;
	}
	
	.nav-btn {
		width: 40px;
		height: 60px;
	}
	
	.option-full dl {
		flex-direction: column;
	}
	
	.option-full dl dt {
		width: 100%;
		margin-bottom: 10px;
	}
	
	.option-full dl dd span {
		width: 50%;
	}
	
	.ConsultBtnWarp {
		float: none;
		width: 100%;
		margin-top: 20px;
	}
	
	.ConsultPopupBtn {
		float: none;
		width: 100%;
	}
	
	.bbsList li {
		_width: 48%;
	}
	
	.bbsView .title {
		font-size: 24px;
	}
	
	.HomeTitle {
		font-size: 24px;
	}
	
	.HomeSubTitle {
		font-size: 16px;
	}
	
	.pagination a {
		padding: 6px 10px;
		font-size: 14px;
	}
}

@media (max-width: 576px) {
	.gallery-container {
		_height: 300px;
	}
	
	.image-counter {
		padding: 5px 10px;
		font-size: 12px;
	}

	.data-form > li {
		width: 50%;
	}
	
	.option-full dl dd {
		width: 100%;
		margin-left: 12px;
	}

	.option-full dl dd span:before {
		
	}

	.option-full dl dd span {
		_width: 100%;
		font-size: 12px;
	}
	
	.CarTopInfoBox {
		padding: 3%;
	}

	.CarDetailInfo {
		padding: 3%;
	}
	
	.PriceWrap {
		padding: 3%;
	}
	.price-table th, 
	.price-table td {
		padding: 10px 5px;
		font-size: 14px;
	}
	
	.bbsList li {
		_width: 100%;
	}
	
	.bbsView .title {
		font-size: 20px;
	}
	
	.gnb ul {
		flex-wrap: wrap;
		padding: 10px 0;
	}
	
	.gnb ul a {
		width: 50%;
		padding: 10px;
		font-size: 16px;
		text-align: center;
	}
	
	.HomeMoreBtn button {
		width: 100%;
		max-width: 260px;
	}
	
	.pagination {
		flex-wrap: wrap;
	}
	
	.DealerInfo .DealerImage {
		width: 100%;
	}
	.DealerInfo .info-container {
		width: 100%;
		
	}
	.DealerInfo .data-form > .info-container > li {
		width: 100%;
	}
	#CarSearchForm #ListCarType,
	#CarSearchForm #CarListGroup,
	#CarSearchForm #CarSelectBox,
	#CarSearchForm #CarListOrder,
	.pagination-first,
	.pagination-last
	{
		_display: none;
	}
	.HomeCarList, .CarList {
		padding: 0 3%;
	}
	.HomeCarList .MoneyTable .l, .CarList .MoneyTable .l {
		font-size: 12px;
	}
	.HomeCarList .MoneyTable .r, .CarList .MoneyTable .r {
		font-size: 14px;
	}
	.thumb {
		width: 20%;
	}
	.responsibility img {
		width: 100vw; /* 뷰포트 너비의 100% */
		position: relative;
		left: 50%;
		margin-left: -50vw; /* 뷰포트 너비의 절반만큼 왼쪽으로 이동 */
		max-width: none; /* 기존 최대 너비 제한 해제 */
		border-radius: 0; /* 둥근 모서리 제거 */
	}
	.bbsView .viewBox img {
		width: 100vw; /* 뷰포트 너비의 100% */
		position: relative;
		margin-left: -50vw; /* 뷰포트 너비의 절반만큼 왼쪽으로 이동 */
		margin-right: -50vw;
		max-width: none; /* 기존 최대 너비 제한 해제 */
		border-radius: 0; /* 둥근 모서리 제거 */
	}
	.bbsView .viewBox div * {
		line-height: 1.3 !important;
	}
}

/* 모바일 메뉴 토글 버튼 */
.menu-toggle {
	display: none;
	background: var(--MainColor);
	border: none;
	padding: 10px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	width: 100%;
}

@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}
}

/* 반응형 테이블 */
.responsive-table {
	overflow-x: auto;
}

/* 공통 반응형 조정 */
.inner, .MainTop, .bbsList, .bbsView {
	width: 100%;
	max-width: var(--ContentWidth);
}
@media (max-width: 1200px) {
	.inner .title {
		text-indent: 2%;
	}
}
.CarTopInfoBox {
	padding: 20px;
}

.CarInfoTitle {
	font-size: 20px !important;
}

.CarInfoEtc {
	font-size: 16px !important;
	flex-wrap: wrap;
	gap: 10px !important;
}

.CarInfoEtc span {
	font-size: 14px !important;
}

.CarInfoEtc span:not(:last-child)::after {
	content: "" !important;
}