/* 메인 컨테이너 */
.history-container {
	max-width: 1200px; /* 4개 배치를 위해 전체 폭을 넓혔습니다 */
	margin:5px auto;
	width: 100%;
	border-radius: 6px;
	/* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); */
	/* padding: 30px; */
}

/* 상단 헤더 영역 */
.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* margin-bottom: 24px; */
	padding-bottom: 15px;
	/* border-bottom: 1px solid #ddd; */
}

.history-header h2 {
	font-size: 20px;
	font-weight: 700;
	color: #111111;
	display: flex;
	align-items: center;
	gap: 8px;
}

.history-header h2 i {
	color: #4f46e5;
}

/* 전체 삭제 버튼 */
.clear-all-btn {
	background: none;
	border: none;
	color: #888888;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
}

.clear-all-btn:hover {
	color: #ff4d4f;
}

/* 1개 라인에 4개씩 배치하는 그리드 컨테이너 */
.history-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4열 고정 */
	gap: 16px; /* 카드 사이의 간격 */
}

/* 개별 카드 스타일 */
.history-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	border: 1px solid #eef0f3;
	border-radius: 6px;
	background-color: #ffffff;
	/* min-height: 160px; */ /* 카드의 최소 높이 지정 */
	position: relative;
	transition: all 0.2s ease;
}

.history-item:hover {
	border-color: #4f46e5;
	background-color: #f9fafb;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.05);
}

/* 상단 정보 (모델명, 뱃지, 삭제버튼) */
.item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 12px;
}

.vehicle-model {
	font-size: 14px;
	font-weight: 600;
	color: #222222;
	line-height: 1.4;
	word-break: keep-all;
}

/* 개별 삭제 버튼 */
.delete-btn {
	background: none;
	border: none;
	color: #cccccc;
	cursor: pointer;
	font-size: 14px;
	padding: 2px;
	transition: color 0.2s;
	flex-shrink: 0; /* 버튼 형태 유지 */
}

.delete-btn:hover {
	color: #666666;
}

/* 중앙 정보 (뱃지 및 차대번호) */
.item-body {
	display: flex;
	/* flex-direction: column; */
	gap: 8px;
	/* margin-bottom: 16px; */
}

/* 국산/수입 구분을 위한 미니 뱃지 */
.badge {
	align-self: flex-start; /* 텍스트 길이에 맞춤 */
	font-size: 11px;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 4px;
	background-color: #e0e7ff;
	color: #4338ca;
}
.badge.import {
	background-color: #fef3c7;
	color: #d97706;
}

.vin-number {
	font-size: 11px;
	color: #555555;
	/* font-family: 'Courier New', Courier, monospace; */
	letter-spacing: 0.2px;
	word-break: break-all; /* 차대번호가 카드를 벗어나지 않도록 줄바꿈 */
	background-color: #f8fafc;
	padding: 6px 8px;
	border-radius: 4px;
	width:61%;
}

/* 하단 정보 (검색 시간) */
.item-footer {
	border-top: 1px solid #f1f5f9;
	padding-top: 10px;
	display: flex;
	justify-content: flex-end;
}

.search-date {
	font-size: 11px;
	color: #999999;
	margin-top:6px;
}

/* 반응형 레이아웃 (화면이 좁아질 때 자연스럽게 줄어들도록 설정) */
@media (max-width: 1024px) {
	.history-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.history-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.history-grid { grid-template-columns: 1fr; }
}