/* 1. 부모 div 설정 (화면 전체를 채우고 정중앙 정렬) */
.search-container {
	/* position:fixed;
	top:0;
	left:0; */
	display: flex;
	justify-content: center; /* 가로 정중앙 */
	align-items: center;     /* 세로 정중앙 */
	width: 100%;
	/* height: 320px; */           /* 부모 높이를 화면 전체로 설정 */
	/*z-index:1000;*/
	padding-bottom:30px;
}

/* 2. 검색창 감싸는 박스 (Input과 Button을 하나로 묶음) */
.searchbox {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 400px;        /* 검색창 최대 너비 제한 */
	padding: 6px 6px 6px 20px; /* 왼쪽은 여백을 주고, 오른쪽은 버튼 공간 확보 */
	border: 1px solid #e0e0e0;
	border-radius: 30px;     /* 둥근 타원형 디자인 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
	transition: all 0.3s ease;
	background:#fff;
}

/* 검색 박스에 마우스를 올리거나 포커스 되었을 때 효과 */
.searchbox:focus-within,
.searchbox:hover {
	border-color: #072943;    /* 포인트 컬러 (블루) */
	box-shadow: 0 4px 20px rgba(74, 144, 226, 0.15);
}

/* [신규] 선택 박스(Select) 스타일 */
.search-select {
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	color: #333333;
	padding: 8px;
	cursor: pointer;
	font-family: inherit;
	/* 브라우저 기본 화살표 디자인 스타일링 (원치 않으면 삭제 가능) */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat right center;
	padding-right: 20px; /* 화살표 공간 확보 */
}

/* [신규] Select와 Input 사이의 세로 구분선 */
.divider {
	width: 1px;
	height: 18px;
	background-color: #e5e5e5;
	margin: 0 12px;
}


/* 3. 검색 입력창 스타일 */
.search-input {
	width:165px;
	flex: 1;                 /* 남은 공간을 input이 모두 차지 */
	border: none;            /* 기본 테두리 제거 */
	outline: none;           /* 포커스 시 파란 테두리 제거 */
	font-size: 16px;
	color: #333333;
	background: none;
}

/* Placeholder(안내 문구) 스타일 변경 */
.search-input::placeholder {
	color: #aaa;
}

/* 4. 검색 버튼 스타일 */
.search-btn {
	background-color: #072943; /* 포인트 컬러 */
	color: #ffffff;
	border: none;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 24px;     /* 버튼도 둥글게 */
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* 버튼 마우스 오버 효과 */
.search-btn:hover {
	background-color: #031726; /* 조금 더 어두운 블루 */
}




/* 전체 목록을 감싸는 컨테이너 (5열 그리드) */
.product-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	max-width: 1200px;
	width: 100%;
	padding: 20px 0;
}

/* 개별 상품 카드 */
.product-card {
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* 이미지 영역 (배경 회색) */
.image-area {
	background-color: #fff;
	/* height: 260px; */
	position: relative;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	cursor:pointer;
}

/* 상단 브랜드 로고 */
.brand-logo {
	align-self: flex-start;
	max-height: 25px;
	object-fit: contain;
}

/* 메인 상품 이미지 */
.product-image {
	/* max-height: 160px; */
	max-width: 100%;
	object-fit: contain;
	/* margin-bottom: 10px; */
}

/* 텍스트 상세 정보 영역 */
.info-area {
	padding: 15px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* 상품 타이틀 및 호환 번호 */
.product-title {
	font-size: 14px;
	color: #333333;
	line-height: 1.4;
	font-weight: 500;
	margin-bottom: 4px;
	word-break: keep-all;
}

.product-code {
	font-size: 12px;
	color: #888888;
	margin-bottom: 8px;
}

/* 가격 및 배송비 */
.price-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.price {
	font-size: 18px;
	font-weight: 800;
	color: #111111;
}

.delivery-fee {
	font-size: 12px;
	color: #888888;
	display: flex;
	align-items: center;
	gap: 2px;
}

/* 배송 뱃지 (오늘출발 등) */
.badge-row {
	display: flex;
	gap: 4px;
	margin-bottom: 10px;
}

.badge {
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 3px;
	font-weight: bold;
}

.badge.today {
	background-color: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #c8e6c9;
}

.badge.time {
	background-color: #ffffff;
	color: #666666;
	border: 1px solid #dddddd;
}

/* 별점 및 리뷰, 찜 아이콘 행 */
.meta-row {
	margin-top: auto; /* 하단 밀착 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #f0f0f0;
	padding-top: 10px;
}

.rating-review {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #555555;
}

.rating-review .fa-star {
	color: #ff9800;
	margin-right: 3px;
}

.review-count {
	color: #888888;
	margin-left: 4px;
}

/* 찜(하트) 버튼 */
.wish-btn {
	background: none;
	border: none;
	color: #cccccc;
	cursor: pointer;
	font-size: 16px;
	transition: color 0.2s;
}

.wish-btn:hover {
	color: #ff5252;
}

/* 장바구니에 담긴 후 바뀔 스타일 */
.wish-btn.active {
    color: #ff5252;
}

/* 반응형 레이아웃 조정 (화면이 작아질 때) */
/*
@media (max-width: 1024px) {
	.product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.product-grid { grid-template-columns: 1fr; }
}
*/


/* 임시 이미지 플레이스홀더 스타일 */
.card-img-wrap .prod-placeholder {
	width: 80%; height: 80%; background: #f9f9f9; 
	border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #aaa;
}
.brand-logo { position: absolute; top: 0; left: 0; font-weight: bold; color: #d32f2f; font-style: italic; font-size: 16px; }
.brand-logo span { color: #222; font-size: 10px; display: block; font-style: normal; margin-top: -4px; }

.product-info h3 { font-size: 14px; color: #333; line-height: 1.4; margin-bottom: 8px; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.part-num { font-size: 11px; color: #999; margin-bottom: 8px; }
.tag { display: inline-block; background: #edf7ed; color: #2e7d32; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: bold; margin-bottom: 15px; }

.card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid #f5f5f5; }
.price { font-size: 18px; font-weight: bold; color: #111; }
.cart-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 18px; }
.cart-btn:hover { color: #666; }

/* 3. 모달창 전체 스크린 (배경) */
.modal-overlay {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; z-index: 1000;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 모달 활성화 클래스 */
.modal-overlay.active { opacity: 1; visibility: visible;}

/* 4. 모달 윈도우 콘텐츠 */
.modal-content {
	background: #fff; width: 90%; max-width: 1000px;
	/* 변경된 부분 */
    height: auto;/* 1. 높이를 내용물에 맞게 자동으로 설정 */
    max-height: 90vh;/* 2. 화면 높이의 90%까지만 커지도록 제한 (선택사항) */
	/* height:800px; */
	border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); position: relative; overflow-y:auto; transform: translateY(20px); transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content { transform: translateY(0);}

/* 모달 헤더 */
.modal-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.modal-header h2 { font-size: 18px; font-weight: bold; width: 100%; text-align: center; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; position: absolute; right: 20px; }

/* 모달 바디 (상세 내용 공간) */
.modal-body { padding: 15px; display: flex; gap: 30px; }
.modal-left { flex: 1.2; display:grid; align-items: center; justify-content: center; border: 1px solid #eaeaea; border-radius: 8px; padding: 10px; aspect-ratio: 1/1;}
.modal-left .modal-img-placeholder { width: 100%; height: 100%; display: flex; align-items:center; justify-content:center; align-content:flex-start; /* border: 1px dashed #ddd; */}

.modal-right { flex: 1.2; display: flex; flex-direction: column; }
.modal-prod-title { font-size: 20px; font-weight: bold; color: #111; line-height: 1.4; margin-bottom: 10px; }
.modal-part-num { font-family:'Malgun Gothic'; font-size: 14px; color: #666; margin-bottom: 5px; word-break: break-all;}
.modal-right .tag { margin-bottom: 15px; align-self: flex-start; }

/* 맨 하단으로 내려온 상세 설명 영역 */
.detail-desc {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    /* border-top: 1px solid #eee; */ /* 선택사항: 상단과 구분하는 구분선 */
}
/* 값이 존재할 때 자바스크립트로 추가할 클래스 */
.detail-desc.has-content {
    padding: 0 15px 15px 15px;
}
.detail-desc p { font-size: 14px; margin-bottom: 5px; }

/* 수량 조절 및 가격 */
.qty-price-zone { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 15px 0; border-top: 1px solid #eee;}
.qty-selector { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.qty-selector button { width: 32px; height: 32px; background: #f5f5f5; border: none; cursor: pointer; font-size: 16px; }
.qty-selector button:hover { background: #e0e0e0; }
.qty-selector input { width: 45px; text-align: center; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 14px; }
.modal-price { font-size: 24px; font-weight: bold; color: #111; }

/* 버튼 영역 */
.modal-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.btn-cart { background: #1e6bce; color: #fff; border: none; padding: 14px; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-cart:hover { background: #1554a7; }
.btn-buy { background: #c61a20; color: #fff; border: none; padding: 14px; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer; }
.btn-buy:hover { background: #9e1217; }
.btn-del { background: #e5e7eb; color: #999; border: none; padding: 14px; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer; }
.btn-del:hover { background: #ddd; }

/* 모바일 대응 반응형 */
/*
@media (max-width: 768px) {
	.modal-body { flex-direction: column; padding: 20px; }
	.modal-content { width: 95%; max-height: 90vh; overflow-y: auto; }
	.modal-left { aspect-ratio: auto; height: 200px; }
}
*/