/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100..700&family=Lato:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap');

#content .gift-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
#content .gift-container * { box-sizing: border-box; }

/* 메인 비주얼 영역 */
#content .gift-container .main-visual { 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    background-color: #fff;
}
#content .gift-container .main-visual img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
#content .gift-container .main-visual img.fade-in {
    opacity: 1;
}

/* 중앙 텍스트 영역 */
#content .gift-container .text-content {
    text-align: center;
    padding: 100px 20px;
    margin: 0 auto;
    min-height: 240px; 
}

#content .gift-container .main-title { 
    font-family: 'Noto Serif KR', serif !important;
    letter-spacing: -0.01em; 
    font-size: 2.2rem; 
    font-weight: 600; 
    line-height: 1.2; 
    margin-bottom: 60px; 
    word-break: keep-all; 
}

#content .gift-container .sub-description {
    font-size: 1rem;    
    text-align: center;
    letter-spacing: initial;
    line-height: 1.8;
    word-break: keep-all;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#content .gift-container .sub-description.active {
    opacity: 1;
    transform: translateY(0);
}

/* 하단 썸네일 슬라이더 영역 */
#content .gift-container .thumbnail-wrapper {
    width: 100%;
    padding: 20px 0 0 0; 
    position: relative;
}

.sub_title { font-family: 'Josefin Sans', sans-serif; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.02em; word-break: keep-all; text-transform: uppercase; }

#content .gift-container .swiper {
    width: 100%;
    overflow: visible; 
    padding: 0 20px; 
}

#content .gift-container .thumb-item {
    width: 600px; 
    max-width: 100%;
    flex-shrink: 0;
    cursor: pointer; 
    opacity: 0.3; /* 비활성화 기본 상태 투명도 */
    transition: opacity 0.4s ease;
}

/* [중요] 사용자가 드래그하거나 수동으로 클릭한 대상만 정확하게 오파시티 1 부여 */
#content .gift-container .thumb-item.swiper-slide-active,
#content .gift-container .thumb-item.user-active {
    opacity: 1 !important;
}

#content .gift-container .thumb-item .img-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f7f7f7;
    pointer-events: none; 
}

#content .gift-container .thumb-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none; 
}

/* 감성 하단 컨트롤 조작 레이아웃 하드코어 정렬 */
.sweetyspoon-control-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    gap: 35px; 
}

/* 슬라이드 바 30% 커스텀 정밀 수치 구현 */
.sweetyspoon-control-axis .swiper-pagination-progressbar {
    position: relative !important;
    width: 30% !important;              
    height: 2px !important;              
    background: #f4f0ea !important;       /* 요청 기본색 */
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
}

/* 진행되는 트랙 컬러링 (블랙) */
.sweetyspoon-control-axis .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #000000 !important;       /* 전진 시 블랙 */
}

/* 럭셔리 슬림 화살표 인젝션 */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #111;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.3s;
    padding: 0 5px;
}
.swiper-button-prev-custom::before { content: '〈'; }
.swiper-button-next-custom::before { content: '〉'; }

.swiper-button-disabled {
    opacity: 0.15;
    cursor: default;
}

/* 모바일 대응 분기 기획 */
@media (max-width: 768px) {
    #content .gift-container .main-title { font-size: 20px; }
    #content .gift-container .sub-description { font-size: 13px; }
    #content .gift-container .thumb-item { width: 85vw; }
    #content .gift-container .text-content { min-height: 200px; }
    .sweetyspoon-control-axis { margin-top: 35px; gap: 20px; }
    .sweetyspooncontrol-axis .swiper-pagination-progressbar { width: 60% !important; }
}
/* BASIC css end */