/* BASIC css start */


body { overflow-x: hidden; }

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

.gift-main-group {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    left: 0;
    transform: none;
    padding: 0;
}

#content .gift-container * { box-sizing: border-box; }

/* 메인 비주얼 영역   .main-visual은 실제 HTML상 #content/.gift-container 바깥(헤더 바로 다음)에
   있으므로, 이 접두사가 붙은 선택자는 매칭되지 않아 width:100% 등이 전혀 적용되지 않던 버그였음.
   boutique/brand/personalization과 동일하게 접두사 없이 직접 선택 */
.main-visual { position: relative; width: 100%; overflow: hidden; }
.main-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.main-visual img.fade-in {
    opacity: 1;
}

.signaturegift-hero-info-box { position: absolute; top: 45%; left: 65%; transform: translateX(-50%); text-align: left; color: #fff; width: 90%; max-width: 100%; padding: 0; z-index: 10; line-height: 1.6; }
.brand-title-en { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.08em; font-size: 2.0rem; font-weight: 500; color: #fff; } /* h1 전환 후 공통CSS의 h1,h2...{color:#1c1c1c}에 덮어쓰이지 않도록 명시 */
.signaturegift-hero-desc { font-size: 1rem; text-align: left; line-height: 1.8rem; letter-spacing: initial; padding: 25px 0px 0px 0px; }

/* 중앙 텍스트 영역 */
#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: '\2039'; } /* < 모양의 싱글 꺾쇠 기호 */
.swiper-button-next-custom::before { content: '\203A'; } /* > 모양의 싱글 꺾쇠 기호 */

.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; }
    .sweetyspoon-control-axis .swiper-pagination-progressbar { width: 60% !important; }
}
/* BASIC css end */