/* 메인 페이지 스타일 */

/* ===== 배너 슬라이더 ===== */
.banner-slider-container {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto 40px;
    overflow: hidden;
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
}

.banner-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
    visibility: visible;
}

.banner-link {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC/모바일 배너 표시 제어 */
.pc-banner {
    display: block;
}

.mobile-banner {
    display: none;
}

/* 이전/다음 버튼 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.slider-btn svg {
    width: 24px;
    height: 24px;
    color: #333;
}

.slider-prev {
    left: 20px;
}

.slider-next {
    right: 20px;
}

/* 인디케이터 */
.slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.indicator.active {
    background: #fff;
    transform: scale(1.2);
}

/* 기존 고정 배너 (배너가 없을 때 표시) */
.main-banner {
    background-color: #D9D9D9;
	width: 1440px;
    height: 540px;
	margin: auto;
	overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

/* 모바일 버전 배너 */
.main-bannerm {
	display: none;
}

/* 배너 비율 유지하면서 채우기*/
.main-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-content {
    text-align: center;
    color: white;
}

.center {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 헤더 */
.section-header {
    margin: 60px 0 30px;
}

.section-subtitle {
    font-size: 12px;
    color: #648876;
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-link {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    text-decoration: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-link .arrow-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 기존 섹션 타이틀 (프리미엄관용) */
.recommend-product {
    font-size: 24px;
    margin: 40px 24px 24px;
    font-weight: 500;
    color: #333;
}

/* 상품 컨테이너 */
.product-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

/* 새로운 상품 카드 스타일 */
.product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.product-image {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1:1 비율 유지 */
    overflow: hidden;
    background-color: #D9D9D9;
    position: relative;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-image .placeholder-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E0E0E0;
}

/* 상품 뱃지 */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #ff6b6b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.product-info {
    padding: 16px;
}

.product-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    margin-bottom: 0;
}

.price-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-price {
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.original-price {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

.discount-rate {
    font-size: 12px;
    font-weight: 600;
    color: #FF6B6B;
}

/* 상품 리뷰 별점 */
.product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.product-rating .stars {
    display: flex;
    gap: 1px;
}

.product-rating .star {
    font-size: 12px;
    color: #ddd;
}

.product-rating .star.filled {
    color: #FFD700;
}

.product-rating .review-count {
    font-size: 11px;
    color: #999;
}

.product-rating .rating-score {
    font-size: 11px;
    color: #999;
}

.product-review {
    display: none;
}

.review-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.review-count {
    font-size: 12px;
    color: #999;
}

/* 기존 상품 스타일 (프리미엄관용) */
.products {
    flex: 0 0 calc(25% - 15px);
    max-width: 280px;
    background: #fff;
    text-align: center;
    transition: transform 0.3s;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}

.products:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.products p {
    margin: 0;
}

.description {
    display: block;
    height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
}

.description img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f5f5f5;
}

.pname {
    margin-bottom: 10px;
}

.pname p {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.price {
    font-size: 20px;
    font-weight: bold;
    color: #5dd6a3;
}

/* 수량 조절 버튼 */
.btn-pm {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-pm:hover {
    background-color: #f5f5f5;
}

.input-read {
    width: 50px;
    height: 30px;
    text-align: center;
    border: 1px solid #ddd;
    margin: 0 5px;
}

/* 장바구니 담기 버튼 */
.btn-cart {
    width: 100%;
    padding: 10px 20px;
    background-color: #5dd6a3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.btn-cart:hover {
    background-color: #4bc592;
}

/* textarea 숨김 (파일 이름 저장용) */
textarea[name="fileName"] {
    display: none;
}

/* 프리미엄관 섹션 */
.premium-section {
    background: #2E2E2E;
    width: 1440px;
    margin: 0 auto;
    padding: 60px 0;
    margin-bottom: 0;
}

.premium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 60px;
    align-items: center;
}

.premium-left {
    flex-shrink: 0;
    width: 280px;
}

.premium-subtitle {
    color: #648876;
    font-size: 14px;
    margin-bottom: 12px;
}

.premium-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
}

.premium-view-all {
    display: inline-block;
    color: #FFFFFF;
    font-size: 14px;
    border: 1px solid #FFFFFF;
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s;
}

.premium-view-all:hover {
    background-color: #FFFFFF;
    color: #2E2E2E;
}

.premium-products {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.premium-card {
    background: #3A3A3A;
}

.premium-card .product-name,
.premium-card .product-price {
    color: #FFFFFF;
}

.premium-card .review-count {
    color: #CCC;
}


.mainSubTile {
    font-weight: 700;
    color: #648876;

}

@media( max-width:1440px) {
	.main-banner {
		width: 100%;
	    height: auto;
	}

	.premium-section {
		width: 100%;
	}

	.banner-slider-container {
		width: 100%;
	}

	.banner-slider {
		height: auto;
		aspect-ratio: 1440 / 540;
	}
}


/* 반응형 디자인 */
@media (max-width: 1024px) {
    .product-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-container {
        flex-direction: column;
        gap: 40px;
    }

    .premium-left {
        width: 100%;
        text-align: center;
    }
}

@media(max-width:900px) {
	/* 배너 슬라이더 모바일 */
	.banner-slider-container {
		margin-bottom: 20px;
	}

	.banner-slider {
		height: auto;
		aspect-ratio: 900 / 600;
	}

	.pc-banner {
		display: none;
	}

	.mobile-banner {
		display: block;
	}

	.slider-btn {
		width: 36px;
		height: 36px;
	}

	.slider-prev {
		left: 10px;
	}

	.slider-next {
		right: 10px;
	}

	.slider-btn svg {
		width: 18px;
		height: 18px;
	}

	.slider-indicators {
		bottom: 12px;
		gap: 8px;
	}

	.indicator {
		width: 8px;
		height: 8px;
	}

	.main-bannerm {
	    background-color: #D9D9D9;
		width: 100%;
	    height: auto;
		margin: auto;
		overflow: hidden;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 20px;
	}

	.main-banner {
		display: none;
	}

	.main-bannerm img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    display: block;
	}

	/* 메인 컨텐츠 영역 조정 */
	.center {
		padding: 0 16px;
		padding-bottom: 80px; /* 하단 네비게이션 공간 확보 */
	}

	/* 섹션 헤더 조정 */
	.section-header {
		margin: 30px 0 16px;
	}

	.section-subtitle {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.section-title {
		font-size: 18px;
	}

	.section-link {
		font-size: 12px;
		gap: 3px;
	}

	.section-link .arrow-icon {
		width: 12px;
		height: 12px;
	}

	/* 상품 컨테이너 - 가로 스크롤 */
	.product-container {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		margin-bottom: 40px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.product-container::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}

	/* 상품 카드 */
	.product-card {
		flex: 0 0 140px;
		width: 140px;
	}

	.product-info {
		padding: 12px 8px;
	}

	.product-name {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 6px;
	}

	.product-price {
		margin-bottom: 0;
	}

	.price-row {
		gap: 4px;
	}

	.current-price {
		font-size: 14px;
		font-weight: 400;
	}

	.original-price {
		font-size: 11px;
	}

	.discount-rate {
		font-size: 11px;
	}

	.review-icon {
		width: 12px;
		height: 12px;
	}

	.review-count {
		font-size: 11px;
	}

	/* 프리미엄 섹션 */
	.premium-section {
		padding: 40px 0;
		margin-bottom: 80px; /* 하단 네비게이션 공간 확보 */
	}

	.premium-container {
		padding: 0 16px;
		flex-direction: column;
		gap: 20px;
	}

	.premium-left {
		width: 100%;
		text-align: left;
	}

	.premium-subtitle {
		font-size: 11px;
		margin-bottom: 8px;
	}

	.premium-title {
		font-size: 20px;
		margin-bottom: 16px;
	}

	.premium-view-all {
		font-size: 13px;
		padding: 8px 20px;
	}

	/* 프리미엄 상품 - 가로 스크롤 */
	.premium-products {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.premium-products::-webkit-scrollbar {
		display: none;
	}

	.premium-card {
		flex: 0 0 140px;
		width: 140px;
	}
}

@media (max-width: 900px) {
    .product-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-header {
        margin: 40px 0 20px;
    }

    .premium-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .product-card {
        flex: 0 0 130px;
        width: 130px;
    }

    .premium-card {
        flex: 0 0 130px;
        width: 130px;
    }

    .product-info {
        padding: 10px 6px;
    }

    .product-name {
        font-size: 13px;
        font-weight: 700;
    }

    .current-price {
        font-size: 13px;
        font-weight: 400;
    }

    .original-price {
        font-size: 10px;
    }

    .discount-rate {
        font-size: 10px;
    }
}

/* 중간 배너 이미지 */
.middle-banner-section {
    width: 1440px;
    margin: 80px auto 100px;
    overflow: hidden;
    position: relative;
}

.middle-banner-pc {
    width: 100%;
    height: auto;
    display: block;
}

.middle-banner-mobile {
    display: none;
}

.middle-banner-mobile img {
    width: 100%;
    height: auto;
    display: block;
}

/* 브랜드 소개 버튼 오버레이 */
.brand-banner-overlay {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.brand-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid #000;
    background: transparent;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s;
}

.brand-cta-btn:hover {
    background-color: #000;
    color: #FFF;
}

.brand-cta-btn .arrow {
    transition: transform 0.3s;
}

.brand-cta-btn:hover .arrow {
    transform: translateX(4px);
}

/* 반응형: 중간 배너 */
@media (max-width: 1440px) {
    .middle-banner-section {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .middle-banner-pc {
        display: none !important;
    }

    .middle-banner-mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .middle-banner-section {
        margin: 40px 0 80px;
    }

    .brand-banner-overlay {
        bottom: 40px;
    }

    .brand-cta-btn {
        font-size: 13px;
        padding: 10px 24px;
    }
}

@media (max-width: 380px) {
    .brand-banner-overlay {
        bottom: 30px;
    }

    .brand-cta-btn {
        font-size: 11px;
        padding: 8px 18px;
        gap: 6px;
    }
}