/* 공통 패키지 히어로 레이아웃 */
  .package-hero {
    width: 100%;
    /* 겹침 공간만큼 높이 추가하여 첫 화면에서 두 번째 섹션이 보이지 않도록 처리 */
    height: calc(100vh + 40px); 
    height: calc(100dvh + 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 14vh; /* 헤더 공간 및 여백 고려 */
    padding-bottom: 100px; /* 하단 화살표 여백(60px) + 겹침 공간(40px) */
    position: relative;
    overflow: hidden;
  }

  .package-hero-content .title-main{margin-bottom: 20px;}
  .shop .title-main{font-size: clamp(26px, 6vw, 30px);}
  
  /* 원데이 패키지 전용 테마 컬러 */
  .package-hero.theme-oneday {
    background-color: #EAF8FB;
  }
  
  /* 구독형 패키지 전용 테마 컬러 */
  .package-hero.theme-subscribe {
    background-color: #FFF6ED;
  }

  /* 스토어 테마 컬러 */
  .package-hero.theme-store{
    background-color: #FFFADA;
  }

  /* 쇼핑몰 테마 컬러 */
  .package-hero.theme-shop{
    background-color: #F2FBE2;
  }

  /* 텍스트 컨텐츠 래퍼 */
  .package-hero-content {
    text-align: center;
    z-index: 2;
  }
  
  /* 일러스트 래퍼 */
  .package-hero-illust {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    z-index: 1;
  }
  .package-hero-illust img {
    width: 72%;
    max-width: 320px; /* 시안 기준 적정 비율 */
    object-fit: contain;
  }

  /* 스크롤 유도 화살표 애니메이션 컴포넌트 */
  .scroll-down-indicator {
    position: absolute;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bounceUpDown 2s infinite ease-in-out;
  }
  
  /* CSS로 그린 화살표 3개 겹침 처리 */
  .scroll-down-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-down-indicator span {
  position: relative;
  width: 52px;
  height: 16px;
  margin-top: -2px;
}

.scroll-down-indicator span::before,
.scroll-down-indicator span::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 30px;
  height: 4px;
  background: #5DD0EE;
  border-radius: 999px;
}

.theme-subscribe .scroll-down-indicator span::before,
.theme-subscribe .scroll-down-indicator span::after {
  background: #FF6B35;
}

.theme-store .scroll-down-indicator span::before,
.theme-store .scroll-down-indicator span::after {
  background: #FFBC2B;
}

.theme-shop .scroll-down-indicator span::before,
.theme-shop .scroll-down-indicator span::after {
  background: #3FDA3F;
}

/* 왼쪽 선 */
.scroll-down-indicator span::before {
  left: -1px;
  transform: rotate(20deg);
  transform-origin: left center;
}

/* 오른쪽 선 */
.scroll-down-indicator span::after {
  right: -1px;
  transform: rotate(-20deg);
  transform-origin: right center;
}

/* 투명도 차이 */
.scroll-down-indicator span:nth-child(1) {
  opacity: 0.3;
}

.scroll-down-indicator span:nth-child(2) {
  opacity: 0.6;
}

.scroll-down-indicator span:nth-child(3) {
  opacity: 1;
}
  
  /* 투명도로 계층감 표현 */
  .scroll-down-indicator span:nth-child(1) { opacity: 0.3; }
  .scroll-down-indicator span:nth-child(2) { opacity: 0.6; }
  .scroll-down-indicator span:nth-child(3) { opacity: 1; }

  @keyframes bounceUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
  }

  /* * ==========================================
   * 7. Package Details (2~5번째 섹션)
   * ==========================================
   */
  
  /* 2번째 섹션 (패키지 정보 및 요금) */
  .package-detail-section {
    position: relative;
    z-index: 10;
    margin-top: -40px; 
    background-color: #ffffff;
    border-radius: 40px 40px 0 0; 
    padding-top: 60px;
    padding-bottom: 100px;
  }

  /* 탭 버튼 스타일 (가로 스크롤 추가) */
  .package-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 calc(var(--margin-sub) * -1);
    padding: 0 var(--margin-sub);
  }
  .package-tabs-wrap::-webkit-scrollbar {
    display: none;
  }
  .package-tabs {
    display: inline-flex; /* 내용물만큼 너비 차지 */
    gap: 12px;
    white-space: nowrap; /* 줄바꿈 방지 */
    margin-bottom: 50px;
  }
  .package-tab {
    padding: 12px 20px;
    border: 1px solid #EAECEF;
    border-radius: 30px;
    background-color: #ffffff;
    color: #8B95A1;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .package-tab.active {
    border-color: var(--color-main);
    color: var(--color-main);
    background-color: rgba(25, 132, 255, 0.05);
  }

  /* 설명 박스 */
  .package-desc-box {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 70px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  }
  .package-desc-box .desc-tit {
    font-size: clamp(26px, 6vw, 32px);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 20px;
  }
  .package-desc-box .desc-txt {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    white-space: pre-wrap; 
    word-break: keep-all;
  }

  /* 요금 안내 영역 */
  .price-title {
    font-size: clamp(26px, 6vw, 32px);
    font-weight: 700;
    margin-bottom: 20px; /* 타이틀 밖으로 빼면서 여백 조정 */
  }
  
  /* 내부 세차 옵션 배너 (G2, G4 전용) */
  .notice-banner {
    background-color: #FFF2E8; /* 서브컬러 연한 톤 */
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .notice-banner .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    background-color: var(--color-sub);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    font-family: sans-serif;
  }
  .notice-banner .txt {
    color: var(--color-sub);
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
  }

  /* 요금표 테두리 박스 */
  .package-price-wrap {
    border: 1px solid #EAECEF;
    border-radius: 24px;
    padding: 30px 24px;
    margin-bottom: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  }
  .price-group-tit {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    margin-bottom: 20px;
    color: #50A5F5;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 20px;
    text-align: left;
  }
  .price-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 15px;
  }
  .price-list:last-child{
    padding-bottom: 0;
  }
  .price-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .price-list .car-type {
    font-size: clamp(18px, 4.5vw, 22px);
    color: var(--color-text-sub);
    font-weight: 500;
  }
  .price-list .car-price {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    color: var(--color-text-main);
  }

  /* 3, 4번째 섹션 공통 스타일 */
  .process-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #F5F6F8; 
    text-align: center;
    overflow: hidden;
  }
  .section-divider-white {
    width: 100%;
    height: 12px;
    background-color: #ffffff;
  }
  .process-header .title-main {
    font-size: clamp(24px, 5.5vw, 28px);
  }

  /* 가로 스크롤 슬라이더 공통 */
  .scroll-slider-wrap {
    margin: 0 calc(var(--margin-sub) * -1);
    padding: 0 var(--margin-sub);
  }
  .scroll-slider {
    display: flex;
    padding: 0 17px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
  }
  .scroll-slider::-webkit-scrollbar {
    display: none;
  }

  /* 3번째 섹션: 신청 과정 카드 */
  .apply-card {
    width: 270px;
    height: 288px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 40px 24px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 텍스트 왼쪽 정렬 */
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);

    /* 비활성 카드 시각적 효과 (작고 흐리게) */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.9);
    opacity: 0.5;
    transform-origin: center center;
  }
  
  /* 활성 상태 카드 시각적 효과 (크고 선명하게) */
  .apply-card.active {
    transform: scale(1);
    opacity: 1;
  }
  .apply-card .img-wrap {
    width: 120px;
    height: 100px;
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end; /* 이미지 컨테이너 내 우측 정렬 */
    align-self: flex-end; /* 전체 영역에서 우측에 배치 */
  }
  .apply-card .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .apply-card .tit {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-main);
  }
  .apply-card .desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.5;
    word-break: keep-all;
  }

  /* 4번째 섹션: 내부/외부 서브 탭 스타일 */
  .process-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
  }
  .process-sub-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }
  .process-sub-tab.active {
    opacity: 1;
  }
  .process-sub-tab .icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .process-sub-tab .icon-wrap img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  .process-sub-tab span {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: #4F4F4F;
  }

  /* 4번째 섹션: 진행 과정 카드 (탭에 따라 변경됨) */
  .process-card {
    width: 280px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: left;
    display: flex;
    flex-direction: column;

    /* 비활성 카드 시각적 효과 (작고 흐리게) */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.9);
    opacity: 0.5;
    transform-origin: center center;
  }
  
  /* 활성 상태 카드 시각적 효과 (크고 선명하게) */
  .process-card.active {
    transform: scale(1);
    opacity: 1;
  }

  .process-card .process-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #f0f0f0;
  }
  .process-card .process-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .process-card .process-txt {
    padding: 24px;
    flex: 1;
  }
  .process-card .process-txt .tit {
    display: block;
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-main);
  }
  .process-card .process-txt .desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.5;
    word-break: keep-all;
  }

  /* 페이지네이션 (점) */
  .slider-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  .slider-pagination .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #D1D6DB;
    transition: background-color 0.3s ease;
  }
  .slider-pagination .dot.active {
    background-color: var(--color-main);
  }

  /* 5번째 섹션: FAQ 아코디언 */
  .faq-section {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
  }
  .faq-section-header {
    text-align: center;
    margin-bottom: 40px;
  }
  .faq-section-header .title-main {
    font-size: clamp(26px, 6vw, 32px);
    margin-bottom: 12px;
  }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    border: 1px solid #EAECEF;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.3s ease;
  }
  .faq-item.active {
    border-color: #D1D6DB;
  }
  .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background-color: #ffffff;
  }
  .faq-q {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    padding-right: 16px;
    word-break: keep-all;
  }
  .faq-icon-arrow {
    flex-shrink: 0;
    width: 8px; 
    height: 8px;
    border-bottom: 2px solid #111;
    border-right: 2px solid #111;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-bottom: 4px;
  }
  .faq-item.active .faq-icon-arrow {
    transform: rotate(-135deg);
    margin-bottom: -4px;
  }
  .faq-body {
    display: none;
    padding: 0 20px 24px;
    background-color: #F9FAFB;
  }
  .faq-item.active .faq-body {
    display: block;
  }
  .faq-item.active .faq-header {
    background-color: #F9FAFB;
  }
  .faq-body p {
    color: #8B95A1;
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.6;
    word-break: keep-all;
  }

  /* * ==========================================
   * 7. Store Details (2~3번째 섹션)
   * ==========================================
   */
  
  /* 2번째 섹션 (매장 소개 Intro) */
  .store-intro-section {
    position: relative;
    z-index: 10;
    margin-top: -40px; 
    background-color: #ffffff;
    border-radius: 40px 40px 0 0; 
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
  }

  .intro-title {
    font-size: clamp(26px, 6vw, 30px);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 40px;
  }
  /* 밑줄 강조 효과 */
  .highlight-underline {
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  .highlight-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 185, 0, 0.4); /* 노란색 형광펜 느낌 */
    z-index: -1;
  }

  .intro-illust {
    margin-bottom: 40px;
  }
  .intro-illust img {
    width: 160px;
    object-fit: contain;
  }

  .intro-desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    word-break: keep-all;
    margin-bottom: 24px;
  }
  .intro-desc:last-child {
    margin-bottom: 0;
  }
  .intro-desc strong {
    color: var(--color-text-main);
    font-weight: 800;
  }

  /* 구분선 (F9FAFC) */
  .section-divider-f9 {
    width: 100%;
    height: 12px;
    background-color: #F9FAFC;
  }

  /* 3번째 섹션 (직접 방문해 보세요 - 매장 위치) */
  .store-location-section {
    padding-top: 80px;
    padding-bottom: 100px;
    background-color: #ffffff;
  }
  .location-header {
    text-align: center;
    margin-bottom: 40px;
  }
  .location-header .title-main {
    font-size: 22px;
  }

  /* 매장 카드 (서울, 부산) */
  .store-card {
    border-radius: 27px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
    margin-bottom: 40px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
  .store-card-img-wrap {
    position: relative;
    width: 100%;
  }
  .store-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 텍스트 가독성을 위한 그라데이션 오버레이 */
  .store-card-img-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
  }
  .store-card-title {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
  }

  /* 액션 버튼 그룹 (전화하기, 위치보기) */
  .store-card-actions {
    display: flex;
    width: 100%;
    height: 64px;
    border-top: 1px solid #F0F2F5;
  }
  .action-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    color: var(--color-text-main);
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .action-btn:active {
    background-color: #F8F9FA;
  }
  /* 첫 번째 버튼에만 우측 실선 */
  .action-btn:first-child {
    border-right: 1px solid #F0F2F5;
  }
  .action-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }

  /* 인증된 디테일러 카드 */
  .cert-card {
    border-radius: 20px;
    border: 1px solid #EAECEF;
    padding: 40px 24px;
    text-align: center;
    background-color: #ffffff;
    margin-top: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  }
  .cert-header {
    font-size: clamp(26px, 6vw, 30px);
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 30px;
  }
  .cert-img-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
    margin-left: 10px;
  }
  .cert-img-wrap img {
    width: 100%;
    max-width: 280px;
    object-fit: contain;
  }
  .cert-tit {
    display: block;
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
  }
  .cert-desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    word-break: keep-all;
  }

  /* 4번째 섹션 (코스별 서비스 진행 과정 및 요금 안내) */
  .course-process-section {
    padding-top: 80px;
    padding-bottom: 100px;
    background-color: #F8F9FA; 
    text-align: center;
    overflow: hidden;
  }
  .process-header {
    margin-bottom: 50px;
  }
  .process-header h2 {
    font-size: clamp(28px, 6.5vw, 32px);
    margin-bottom: 10px;
    font-weight: 800;
  }
  .process-header p {
    font-size: clamp(18px, 4.5vw, 22px);
    color: #4F4F4F;
  }

  /* 코스 탭 영역 */
  .course-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 17px;
    margin-bottom: 40px;
  }
  .course-tabs-wrap::-webkit-scrollbar {
    display: none;
  }
  .course-tabs {
    display: inline-flex;
    justify-content: center;
    gap: 16px;
  }
  .course-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }
  .course-tab * {
    pointer-events: none; /* 클릭 이벤트 방어 */
  }
  .course-tab.active {
    opacity: 1;
  }
  .course-tab-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .course-tab-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  .course-tab-txt {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: var(--color-text-main);
  }

  /* 페이지네이션 (점) */
  .slider-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .slider-pagination .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #D1D6DB;
    transition: background-color 0.3s ease;
  }
  .slider-pagination .dot.active {
    background-color: var(--color-main);
  }

  /* 소요 시간 박스 */
  .est-time-box {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 50px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    text-align: center;
  }
  .est-time-box .time-tit {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
  }
  .est-time-box .time-val {
    font-size: clamp(24px, 5.5vw, 28px);
    font-weight: 800;
    color: var(--color-main);
    margin-bottom: 12px;
  }
  .est-time-box .time-notice {
    font-size: 15px;
    color: var(--color-text-sub);
    word-break: keep-all;
  }

  /* 갤럭시스 하단 배너 */
  .galaxy-banner, .discount-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FF8235;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 40px;
  }
  .galaxy-banner-txt, .discount-banner .txt {
    color: #ffffff;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    word-break: keep-all;
  }
  .galaxy-banner-img, .discount-banner .icon-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
  }
  /* * ==========================================
   * 7. Mall Details (2~3번째 섹션)
   * ==========================================
   */
  
  /* 2번째 섹션 (쇼핑몰 판매상품 선별과정) */
  .mall-intro-section {
    position: relative;
    z-index: 10;
    margin-top: -40px; 
    background-color: #ffffff;
    border-radius: 40px 40px 0 0; 
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .selection-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 50px;
  }
  .selection-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .selection-item img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }
  .selection-text .tit {
    display: block;
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
  }
  .selection-text .desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    word-break: keep-all;
  }

  /* 구분선 (F9FAFC) */
  .section-divider-f9 {
    width: 100%;
    height: 12px;
    background-color: #F9FAFC;
  }

  /* 3번째 섹션 (제품 리뷰 스태킹 효과) */
  .mall-review-section {
    padding-top: 80px;
    background-color: #ffffff;
  }
  
  .review-list {
    position: relative;
    margin-top: 50px;
    /* 하단 스크롤 여백은 자바스크립트로 동적 계산되어 추가됩니다 */
  }

  /* 스크롤 시 카드가 겹쳐지는 스태킹 효과 */
  .review-wrapper {
    position: sticky;
    top: 80px; /* 헤더 60px + 여백 20px */
    /* 인덱스에 따라 위쪽 패딩이 추가되어 겹침 간격(계단효과) 형성 */
    padding-top: calc(var(--index) * var(--card-top-offset));
  }
  .review-card {
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: 65vh; /* 화면 비례 높이 고정 */
    min-height: 400px;
    max-height: 600px;
    overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.08); /* 뒷 카드 위에 쌓일 때 진한 그림자 부여 */
    transform-origin: top center;
    animation: scaleDown linear forwards;
    transform: scale(1);
  }

  /* (선택사항) 최신 브라우저 지원 시 뒷 카드가 미세하게 작아지는 스케일 축소 효과 */
  @supports (animation-timeline: view()) {
    .review-card {
      animation: scaleDown linear forwards;
      animation-timeline: view();
      /* 카드가 화면 상단으로 올라가서 고정된 이후부터 애니메이션 시작 */
      animation-range: exit-bottom calc(var(--card-top-offset) * 2) exit-bottom calc(100% + var(--card-top-offset) * 2);
    }
    @keyframes scaleDown {
      to {
        transform: scale(0.8);
      }
    }
  }

  /* 카드 헤더 (텍스트 영역) */
  .review-card-head {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .review-card-head .tit {
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
  }
  .review-card-head .link {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
  }
  
  /* 카드 바디 (이미지 영역) */
  .review-card-img {
    flex: 1;
    width: 55vw;
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    padding: 0 30px;
  }
  .review-card-img img {
    width: 100%;
    max-width: 280px;
    object-fit: contain;
    margin-bottom: -10%; 
  }

  /* 카드별 개별 색상 테마 */
  .card-theme-1 { background-color: #5D9CF3; }
  .card-theme-1 .tit, .card-theme-1 .link { color: #ffffff; }
  
  .card-theme-2 { background-color: #EBF4FC; }
  .card-theme-2 .tit, .card-theme-2 .link { color: #111111; }
  
  .card-theme-3 { background-color: #E2FBA1; }
  .card-theme-3 .tit, .card-theme-3 .link { color: #111111; }
  
  .card-theme-4 { background-color: #0075FF; }
  .card-theme-4 .tit, .card-theme-4 .link { color: #ffffff; }

  /* 3.5번째 섹션 (브랜드 로고 스크롤 마키) */
  .mall-brand-marquee {
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
    padding: 40px 0 80px;
  }
  .mall-marquee-track {
    display: flex;
    width: max-content;
    /* 2개의 이미지가 50% 이동하며 자연스럽게 무한 반복됩니다 */
    animation: mall-scroll 30s linear infinite;
  }
  .marquee-logo-img {
    height: 48px; /* 시안에 맞춘 로고 적정 높이 */
    padding-right: 40px; /* 로고 이미지의 끝과 시작 사이의 간격 */
    object-fit: contain;
  }
  
  @keyframes mall-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* 4번째 섹션 (추천 상품 및 링크) */
  .mall-recommend-section {
    padding-top: 100px;
    padding-bottom: 0; /* 하단 목업 이미지가 바닥에 닿도록 설정 */
    background-color: #F9FAFC;
    text-align: left;
  }
  .recommend-title {
    font-size: clamp(26px, 6vw, 30px);
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 16px;
    word-break: keep-all;
  }
  .recommend-desc {
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-text-sub);
    line-height: 1.6;
    margin-bottom: 40px;
    word-break: keep-all;
  }
  .recommend-btns {
    margin-bottom: 60px;
  }
  .btn-outline-dark {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border: 1px solid #111111;
    border-radius: 30px;
    color: #111111;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .btn-outline-dark:first-child {
    margin-bottom: 12px;
  }
  .btn-outline-dark:active {
    background-color: #f0f0f0;
  }
  .btn-outline-dark .icon-arrow {
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #111;
    border-right: 1.5px solid #111;
    transform: rotate(45deg);
  }
  .recommend-mockup {
    width: 70vw;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  .recommend-mockup img {
    width: 100%;
    max-width: 300px;
    display: block;
  }

  .discount-banner {
    background: #4896FB;
  }
  .discount-banner .icon-img{
    padding-bottom: 10px;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
  }