/* BASIC css start */
#content { padding: 0 32%; overflow-x: hidden; }


.areserve { font-family: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",'Noto Sans KR',sans-serif; word-break: keep-all; text-align: center; }
.areserve img { width: 100%; }

#areserve_choice { background: #16070a url('https://mothersall.img6.kr/event_notice/winter25/areserve_back.jpg') top center/100% no-repeat; padding: 10% 0; text-align: center; } 
#areserve_choice > img:nth-child(1) { width: 80%; margin: 5% 10%; }
#areserve_choice > p { color: #fff; font-size: 1.25em; line-height: 1.5em; margin: 0 auto 5%; font-weight: 600; }

/* 체크박스 숨김 */ input[type="radio"] { display: none; }

.form-wrap { margin-bottom: 17%; }

.areserve_btn { }
.areserve_btn > img { width: 42%; }


/* 슬라이드가 밖으로 튀어나와도 보이게 */
.swiper-container {
    overflow: visible;
}

/* 수직 가운데 정렬 */
.swiper-wrapper {
    align-items: center;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

/* 라디오 숨기기 */
.addinfo_inputs {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 카드 기본 스타일 (label 안에 img 있음) */
.swiper-slide label {
    display: block;
    position: relative;
    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease;
}

.swiper-slide img {
    display: block;
    width: 100%;
    max-width: 420px;     /* 카드 실제 너비   디자인에 맞게 조절 */
}

/* 가운데 메인 카드 */
.swiper-slide-active label {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    z-index: 3;
}

/* 양 옆에 겹쳐 보이는 카드 */
.swiper-slide-prev label,
.swiper-slide-next label {
    transform: scale(0.86);
    opacity: 0.7;
    filter: blur(1.5px);
    z-index: 2;
}

/* 그 뒤에 있는 카드들은 더 작고 흐리게 (필요 없으면 삭제해도 됨) */
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) label {
    transform: scale(0.8);
    opacity: 0;
    filter: blur(3px);
    z-index: 1;
}

/* 기본적으로 모든 카드의 <p> 숨기기 */
.swiper-slide p { color: #fff;  font-size: 1.15em; line-height: 1.5em; margin-top: -5%;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}

/* 가운데 카드(active)일 때만 <p> 보이기 */
.swiper-slide-active p {
    opacity: 1;
    max-height: 150px; /* 콘텐츠에 맞춰 충분히 큰 값 넣기 */
}

/* 모바일에서 겹침 강도 조금 줄이기 (선택사항) */
@media (max-width: 767px) {
    .swiper-slide img {
        max-width: 320px;
    }
}

/* BASIC css end */