/* 차량 상세 페이지 (간편견적 02 단계) */

.vehicle-view-main {
	padding-bottom: 0 !important; 
}

#vehicle-view-main-content {
	padding-top: 60px; 
	padding-bottom: 140px; 
	background: linear-gradient(#F7F8F9, #FFFFFF 515px,#FFFFFF 515px);; 
}

.vehicle-detail-title {
	line-height: 1; 
	color: #242424; 
	font-size: 24px;
	font-weight: 500; 
}

.vehicle-detail-layout {
	display: flex; 
	gap: 24px; 
}
.vehicle-detail-layout .vehicle-layout-left {
	flex: 5;
}
.vehicle-detail-layout .vehicle-layout-right {
	flex: 3;
}

/* #vehicleInfoLayout {
	align-items: center; 
} */
#vehicleInfoLayout {
	align-items: center;
	/* gap: 60px; */
}
/* .vehicle-img-wrap {
	flex: 5;
	position: relative;
	aspect-ratio: 760 / 426;
} */
.vehicle-layout-left.vehicle-img-wrap {
	flex: 5;
	position: relative;
	aspect-ratio: 1280/600;
}
.vehicle-img-wrap img {
	display: block; 
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
}
.vehicle-detail-info {
	flex: 3; 
}
.vehicle-detail-brand {
	width: 40px; height: 40px; 
}
.vehicle-detail-brand img {
	display: block; 
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
}

.vehicle-detail-model {
	color: #121212; 
	font-size: 24px;
	font-weight: 600; 
}
.vehicle-detail-spec {
	display: flex; 
	align-items: center; 
	gap: 12px; 
	color: #8B8B8B; 
	font-size: 15px;
	font-weight: 500;
}
.vehicle-detail-spec hr {
	width: 1px;
	height: 12px;
	margin: 0; 
	border: none;
	background: #DBDBDB; 
}

.vehicle-detail-color {
	margin-top: 36px;
	padding-top: 36px; 
	border-top: 1px solid #DBDBDB;	
}

.vehicle-detail-color h3 {
	line-height: 1; 
	color: #121212; 
	font-size: 18px;
	font-weight: 500; 
}

.vehicle-detail-color .color-name {
	margin-top: 24px; 
	color: #666; 
	
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
	margin-top: 24px; 
}
.color-swatch {
	display: flex; justify-content: center; align-items: center; 
	position: relative;
	width: 66px;
	height: 66px;
	border: 1px solid #EDEDED;
	border-radius: 16px;
	cursor: pointer; 
	
	transition: border-color 0.2s;
}

.color-swatch.active {
	border-width: 2px; 
    border-color: var(--primary-color);
}
.color-swatch.active:before {
	display: block; clear: both; content: '';
	width: 24px; aspect-ratio: 4 / 3;
	background: url('/include/img/icon_color_check.svg') no-repeat center /contain;
}



/* 색상 없음 스워치 (X 표시, 클릭 불가) */
.color-swatch.no-color {
	cursor: default;
	pointer-events: none;
	background: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	border-width: 1px !important;
	position: relative;
	overflow: hidden;
}
.color-swatch.no-color::before {
	display: none !important;
}
.color-swatch.no-color::after {
	content: '✕';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 300;
	color: #94a3b8;
	line-height: 1;
}

#vehicleOptionsLayout {
	margin-top: 50px; 
}

.vehicle-detail-card {
	padding: 56px 30px; 
	border-top: 1px solid #DBDBDB;
}

.card-heading {
	margin-bottom: 36px; 
	line-height: 1;
	color: #242424; 
	font-size: 18px; 
	font-weight: 600; 
}

.card-body {
	display: flex; 
	flex-direction: column; 
	gap: 32px; 
}

.usage-row {
	display: flex; 
	flex-direction: column; 
	gap: 14px; 
}
.usage-label {
	min-width: 0; 
	line-height: 1; 
	color: #242424; 
	font-size: 12px;
	font-weight: 500; 
}
.usage-tabs {
	display: flex; 
}
.usage-tab {
	flex: 1; 
	position: relative; 
	margin-left: -1px; 
	border: 1px solid #DCDEE4; 
	background: #F8F9F9; 
    color: #64748B;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
	z-index: 1; 
}
.usage-tab:nth-of-type(1) {
	margin-left: 0; 
	border-radius: 12px 0 0 12px;
}
.usage-tab:last-of-type {
	border-radius: 0 12px 12px 0;
}

.usage-tab.active {
    border-color: var(--primary-color);
	background: #FFF; 
    color: var(--primary-color);
	font-weight: 600; 
    z-index: 2;
}

select.form-select-grade {
    width: 100%;
	min-height: auto;
	height: 62px;
    padding: 0 25px;
    border: 1px solid #DCDEE4;
    border-radius: 12px;
	background: url('/include/img/icon_select_arrow.svg') no-repeat right 25px center/ 16px auto, #FFF; 
    font-size: 16px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}



/* 우측 요약 카드 */
.vehicle-detail-summary {
	display: flex;
	flex-direction: column; 
	gap: 20px; 
}

.vehicle-summary-card {
	padding: 36px 24px; 
	border: 1px solid #DCDEE4;
	border-radius: 16px; 
	background: #FFF; 
}

.vehicle-summary-card .card-body {
	gap: 0; 
}

.summary-brand-model {
	display: flex; 
	align-items: center; 
	gap: 5px; 
}

.summary-brand {
	width: 30px;
	height: 30px; 
}
.summary-brand img {
	display: block; width: 100%; height: 100%; object-fit: contain; 
}
.summary-model {
	color: #242424; 
	font-size: 20px;
	font-weight: 600; 
}

.summary-desc {
	margin-top: 30px;
}
.summary-desc .label {
	line-height: 1; 
	margin-bottom: 20px; 
	color: #3D3D3D; 
	font-size: 16px;
}
.summary-vehicle-detail {
	margin-bottom: 30px; 
	padding-bottom: 30px;
	border-bottom: 1px solid #DBDBDB;	
}

#summaryDetail {
	color: #121212; 
	font-size: 18px;
	font-weight: 500; 
}

.vehicle-summary-price dl {
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
}

.vehicle-summary-price dt {
	line-height: 1; 
	color: #3D3D3D; 
	font-size: 16px;
}
.vehicle-summary-price dd {}

.vehicle-summary-price dl:nth-of-type(1) {
	margin-bottom: 22px; 
	padding-bottom: 22px;
	border-bottom: 1px dashed #DBDBDB; 
}

.vehicle-summary-price dl:nth-of-type(2) {
	margin-bottom: 36px; 
	padding-bottom: 36px;
	border-bottom: 1px solid #8B8B8B; 
}

.vehicle-summary-price dl:nth-of-type(3) {
	padding-bottom: 36px; 
}

#summaryPriceValue {
	color: var(--primary-color);
	font-size: 24px; 
	font-weight: 600; 
}


.trim-radios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: specFadeIn 0.4s ease forwards;
}

@keyframes specFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trim-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

.trim-radio-label:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.trim-radio-label.is-selected,
.trim-radio-label:has(input:checked) {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.02) 100%);
    border-color: rgba(37, 99, 235, 0.25);
    color: #1e293b;
}

.trim-radio-label input {
    accent-color: var(--primary-color);
}

.trim-radio-label .trim-price {
    margin-left: auto;
    font-weight: 700;
    color: #1e293b;
    transition: color 0.2s ease;
}

.option-list-wrap {
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
    animation: specFadeIn 0.35s ease 0.05s both;
}

.option-list-wrap .option-list-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
}

.option-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

.option-check-label.is-selected,
.option-check-label:has(input:checked) {
    background: rgba(37, 99, 235, 0.04);
    border-color: rgba(37, 99, 235, 0.12);
}

.option-check-label input {
    accent-color: var(--primary-color);
}

.option-check-label .option-price {
    margin-left: auto;
    font-weight: 600;
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.option-check-label:hover .option-price {
    transform: translateX(-2px);
}

#summaryOptions {
	display: flex; 
	flex-direction: column; 
	gap: 10px; 
}
.summary-options {
    margin-bottom: 16px;
}

.summary-opt-line {
	line-height: normal; 
    color: #121212;
    font-size: 18px;
	font-weight: 500; 
}

.summary-price-wrap {
    padding: 16px 0;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.summary-price-label {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.summary-price-value {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px;
}

.summary-price-breakdown {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.btn-lowest-price {
    width: 100%;
	height: 50px; 
	padding: 0; 
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
	font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.btn-lowest-price:hover:not(.disabled) {
    background: #1d4ed8;
}

.btn-lowest-price.disabled,
.btn-lowest-price:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}


@media (hover: hover) {
	.color-swatch:hover {
		border-width: 2px; 
		border-color: var(--primary-color);
	}
	
	.usage-tab:hover {
		border-color: var(--primary-color);
		background: #FFF; 
		color: var(--primary-color);
		z-index: 2;
	}
	
	.option-check-label:hover {
		background: #f8fafc;
		border-color: #f1f5f9;
	}

}



@media (max-width: 768px) {
	.vehicle-view-main {
		padding-top: 0; 
	}
	#vehicle-view-main-content {
		padding-bottom: 100px; 
	}
	.vehicle-detail-brand {
		width: 32px;
		height: 32px; 
	}
	.vehicle-detail-model {
		font-size: 22px; 
	}
	.vehicle-detail-spec {
		font-size: 14px;
	}
	.vehicle-detail-color {
		margin-top: 24px; 
		padding-top: 24px; 
	}
	.vehicle-detail-color h3 {
		font-size: 16px; 
	}
	.color-swatches {
		margin-top: 16px; 
	}
	.color-swatch {
		width: 50px; 
		height: 50px; 
	}
	.color-swatch.active:before{
		width: 20px; 
	}
	.vehicle-detail-color .color-name {
		margin-top: 12px; 
	}
	
	.vehicle-detail-layout {
		flex-direction: column; 
		gap: 20px; 
	}
	#vehicleInfoLayout {
		align-items: stretch; 
	}
	#vehicleOptionsLayout {
		margin-top: 30px; 
	}
	
	.vehicle-detail-card {padding: 28px 0; }
	.vehicle-detail-card:last-of-type {
		padding-bottom: 0; 
	}
	.card-heading {
		margin-bottom: 28px;
		font-size: 16px; 
	
	}
	select.form-select-grade {
		height: 44px; 
		color: inherit;
	}
	
	.vehicle-summary-card {
		padding: 24px 20px; 
	}
	.summary-model {
		font-size: 18px; 	
	}
	.summary-desc {
		margin-top: 20px; 
	}
	.summary-desc .label {
		margin-bottom: 12px; 
	}
	#summaryDetail {
		font-size: 16px; 
	}
	.summary-vehicle-detail {
		margin-bottom: 24px;
		padding-bottom: 24px; 
	}
	.summary-opt-line {
		font-size: 16px; 
	}
	
	.vehicle-summary-price dl:nth-of-type(1) {
		margin-bottom: 14px;
		padding-bottom: 14px; 
	}
	.vehicle-summary-price dl:nth-of-type(2) {
		margin-bottom: 20px; 
		padding-bottom: 20px;
	}
	
	#summaryPriceValue {
		font-size: 20px; 
	}
}








/* 모바일 우선: 360~430px */

.summary-price-value { font-size: 1.25rem; }

@media (min-width: 768px) {
    .summary-price-value { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
    .summary-price-value { font-size: 1.5rem; }
}