/* ✅ 가로 스크롤바 제거 */

.event-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #183e7e;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}


html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
}

.event_poster img {
    width: 100%;
    display: block;
    margin: 0 auto;
    filter: grayscale(100%); /* 처음엔 흑백 */
    animation: fadeToColor 2s ease-in-out forwards; /* 자동 컬러 변환 */
}

/* 애니메이션: 2초 동안 흑백 → 컬러 */
@keyframes fadeToColor {
    from {
        filter: grayscale(100%);
    }
    to {
        filter: grayscale(0%);
    }
}



/* ✅ 전체 콘텐츠 1300px 중앙 정렬 */
.event-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 90px;
}

/* ✅ "금강안경 2월의 행사" 중앙 정렬 */
.event-container {
    text-align: center;
    margin-bottom: 30px;
}

.event-container h2{
    font-size: 36px;
    font-weight: 700;
}

.event-text h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ✅ 팝업행사 & 행사 일정 제목 앞에 2px 세로선 추가 */
.event-text h3,
.text2 h3 {
    border-left: 5px solid #333;
    padding-left: 10px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.event-text, .text2 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.event-text.show, .text2.show {
    opacity: 1;
    transform: translateY(0);
}


/* ✅ 팝업 행사 & 행사 일정 가로 정렬 */
.event-details {
    display: flex;
        gap: 40px;
        flex-wrap: wrap;
        margin-bottom: 7%;
        margin-left: 10%;
          margin-bottom: 90px;
          transform: translate(10%);
}

.event-text, .text2 {
    flex: 1;
    min-width: 45%;
    margin-top: 30px;
        line-height: 1.7;
}
/* ✅ 베스트셀러 제품 */
.bestseller-section {
    background-color: #696F85;
    color: #EAEAEA;
    padding: 30px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.bestseller-section h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
}

/* ✅ 행사 제품 리스트 */
.bestseller-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
}

/* ✅ 각 제품 박스 */
.product {
    text-align: left;
    overflow: hidden; /* 이미지가 넘치지 않도록 설정 */
    
}

.product strong{
    font-size: 24px;
    font-weight: 700;
}

/* ✅ 이미지 기본 스타일 */
.product img {
    display: block;
    width: 90%; 
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    height: 500px;
}

/* ✅ 짝수 번째 제품은 오른쪽에서 등장 */
.product:nth-child(even) img {
    transform: translateX(50px);
}

/* ✅ 스크롤 시 활성화 */
.product img.show {
    opacity: 1;
    transform: translateX(0);
    cursor: pointer;
    margin-bottom: 25px;
}

/* ✅ 호버 시 확대 (박스 안에서만) */
.product:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}
/* ✅ 고객 후기 섹션 */
.review-section {
    background: #F5F5F5;
    padding: 50px 20px;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box; /* 패딩 포함 */
    margin: 90px 0;
}

/* ✅ 제목 스타일 */
.review-section h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

/* ✅ 후기 목록 */
.review-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    cursor: pointer;
}

/* ✅ 개별 후기 */
.review {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* ✅ 후기 호버 효과 */
.review:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ✅ 후기 내용 */
.review p {
    font-size: 24px;
    font-weight: 500;
    color: #181b1e;
    line-height: 1.6;
}

/* ✅ 사용자 정보 스타일 */
.review .author {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

/* ✅ 반응형 스타일 */
@media (max-width: 768px) {
    .review-section {
        padding: 40px 15px;
    }

    .review {
        padding: 20px;
    }

    .review p {
        font-size: 14px;
    }
}

/* ✅ 버튼 가운데 정렬 */
.btn-con {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.event-button, .event-button2 {
    border: 1px solid #1D1D1B;
    border-radius: 50%;
    /* padding: 35px 45px; */
    background: none;
    cursor: pointer;
    margin-bottom: 3%;
    width: 140px;
    height: 140px;
    margin-bottom: 90px;
}


/* ✅ 반응형 (모바일에서는 세로 정렬) */
@media (max-width: 768px) {
    .event-details, .bestseller-list {
        flex-direction: column;
        gap: 20px;
        margin-left: -5px;
    }

    .event-text, .text2, .product {
        min-width: 100%;
    }

    .bestseller-section h2 {
        transform: translate(-15px);
}
}