/* Mobile Styles (767px 이하) */
/* 기준 뷰포트: 375px */
/* 스케일링 공식: clamp(min @320px, vw @375px, max @480px) */
/* - min = 값 × 0.853 (320/375) */
/* - preferred = 값 / 375 × 100 vw */
/* - max = 값 × 1.28 (480/375) */
/* 481px ~ 767px: 480px 디자인(max값) 고정 + 중앙 정렬 */

@media screen and (max-width: 767px) {
  /* 플로팅 CTA 버튼 높이만큼 하단 여백 추가 */
  body {
    padding-bottom: 84px; /* 16px + 52px + 16px = 84px */
  }

  /* 데스크탑/태블릿용 플로팅 버튼 숨김 */
  .floating-button {
    display: none !important;
  }

  /* ============================================
     Hero Slider - Mobile
     ============================================ */
  
  .hero-slider {
    height: 100vh;
    min-height: 100vh;
  }

  /* 슬라이드 배경 이미지 - Mobile */
  .hero-slide--main {
    background-image: url('../../images/pages/index/m_main.webp');
  }

  .hero-slide--doctors {
    background-image: url('../../images/pages/index/m_main_Doctors.webp');
  }

  .hero-slide--users {
    background-image: url('../../images/pages/index/m_main_Users.webp');
  }

  .hero-content {
    padding: 60px 0 clamp(102.4px, 32vw, 153.6px); /* 120px @375px, 비율 유지 스케일링 */
    align-items: flex-end; /* 하단 정렬 (세로) */
    justify-content: flex-start; /* 좌측 정렬 (가로) */
  }

  .hero-content__container {
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(25.6px, 8vw, 38.4px); /* 30px @375px, 비율 유지 스케일링 */
  }

  /* 481px ~ 767px: 480px 디자인 고정 + 중앙 정렬 */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .hero-content {
      padding-bottom: 153.6px; /* 480px 기준 max값 고정 */
    }

    .hero-content__container {
      max-width: 480px; /* 480px 디자인 고정 */
      margin: 0 auto; /* 중앙 정렬 */
      padding: 0 38.4px; /* 480px 기준 max값 */
    }

    .hero-content__text {
      max-width: 403.2px; /* 480px 기준 max값 고정 */
    }
  }

  .hero-content__text {
    max-width: clamp(268.8px, 84vw, 403.2px); /* 315px @375px, 비율 유지 스케일링 */
    width: 100%;
  }

  /* 슬라이드 1번 (Main) - Mobile (375px 기준 비율 유지 스케일링) */
  .hero-slide--main .hero-content__title {
    font-family: var(--font-montserrat);
    font-weight: 900; /* Montserrat Black */
    font-size: clamp(30.7px, 9.6vw, 46.1px); /* 36px @375px */
    line-height: 1.4;
    letter-spacing: 0;
    color: #ffffff;
    margin-bottom: clamp(6.8px, 2.13vw, 10.2px); /* 8px @375px */
  }

  .hero-slide--main .hero-content__subtitle {
    font-family: var(--font-pretendard);
    font-weight: 800; /* Pretendard ExtraBold */
    font-size: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
  }

  .hero-slide--main .hero-content__description {
    font-family: var(--font-pretendard);
    color: #ffffff;
  }

  .hero-slide--main .hero-content__description:first-of-type {
    font-weight: 600; /* Pretendard SemiBold */
    font-size: clamp(17.1px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin-bottom: clamp(10.2px, 3.2vw, 15.4px); /* 12px @375px */
  }

  .hero-slide--main .hero-content__description:last-of-type {
    font-weight: 400; /* Pretendard Regular */
    font-size: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin-bottom: 0;
  }

  /* 슬라이드 2번 (Doctors) - Mobile (375px 기준 비율 유지 스케일링) */
  .hero-slide--doctors .hero-content__title {
    font-family: var(--font-pretendard);
    font-weight: 800; /* Pretendard ExtraBold */
    font-size: clamp(23.9px, 7.47vw, 35.8px); /* 28px @375px */
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin-bottom: clamp(10.2px, 3.2vw, 15.4px); /* 12px @375px */
  }

  .hero-slide--doctors .hero-content__description {
    font-family: var(--font-pretendard);
    font-weight: 500; /* Pretendard Medium */
    font-size: clamp(15.4px, 4.8vw, 23px); /* 18px @375px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: clamp(34.1px, 10.67vw, 51.2px); /* 40px @375px */
  }

  /* 슬라이드 2번 버튼 - Mobile */
  .hero-slide--doctors .btn--cta {
    width: clamp(187.7px, 58.67vw, 281.6px); /* 220px @375px */
    height: clamp(51.2px, 16vw, 76.8px); /* 60px @375px */
    font-size: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
    line-height: 1.4;
  }

  /* 슬라이드 3번 (Users) - Mobile (375px 기준 비율 유지 스케일링) */
  .hero-slide--users .hero-content__title {
    font-family: var(--font-pretendard);
    font-weight: 800; /* Pretendard ExtraBold */
    font-size: clamp(23.9px, 7.47vw, 35.8px); /* 28px @375px */
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin-bottom: clamp(10.2px, 3.2vw, 15.4px); /* 12px @375px */
  }

  .hero-slide--users .hero-content__description {
    font-family: var(--font-pretendard);
    font-weight: 500; /* Pretendard Medium */
    font-size: clamp(15.4px, 4.8vw, 23px); /* 18px @375px */
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: clamp(34.1px, 10.67vw, 51.2px); /* 40px @375px */
  }

  /* 슬라이드 3번 버튼 - Mobile */
  .hero-slide--users .btn--cta {
    width: clamp(187.7px, 58.67vw, 281.6px); /* 220px @375px */
    height: clamp(51.2px, 16vw, 76.8px); /* 60px @375px */
    font-size: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
    line-height: 1.4;
  }

  /* 슬라이드 인디케이터 - Mobile */
  .slider-indicators {
    bottom: 20px; /* 모바일 하단 여백 */
  }

  .slider-indicator {
    width: 10px;
    height: 10px;
  }

  /* ============================================
     Header - Mobile (375px 기준 비율 유지 스케일링)
     ============================================ */

  .header {
    height: clamp(51.2px, 16vw, 76.8px); /* 60px @375px */
  }

  .header__container {
    padding: 0 clamp(17.1px, 5.33vw, 25.6px); /* 20px @375px */
  }

  .header__logo-image {
    height: clamp(23.9px, 7.47vw, 35.8px); /* 28px @375px */
  }

  /* 헤더 오른쪽 영역 - Mobile */
  .header__right {
    gap: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* 헤더 CTA 버튼 숨김 - Mobile */
  .btn--header {
    display: none;
  }

  /* 헤더 언어 변경 버튼 - Mobile */
  .header__language {
    gap: clamp(6.82px, 2.13vw, 10.24px); /* 8px @375px */
  }

  .header__language-text {
    font-size: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
    line-height: 1.4;
  }

  .header__language-arrow {
    width: clamp(10.2px, 3.2vw, 15.4px); /* 12px @375px */
    height: auto; /* 비율 유지 */
  }

  /* 헤더 언어 드롭다운 - Mobile */
  .header__language-dropdown {
    min-width: clamp(68.3px, 21.33vw, 102.4px); /* 80px @375px */
    padding: clamp(6.8px, 2.13vw, 10.2px) 0; /* 8px @375px */
    border-radius: clamp(13.7px, 4.27vw, 20.5px); /* 16px @375px */
  }

  .header__language-option {
    padding: clamp(8.5px, 2.67vw, 12.8px) clamp(13.7px, 4.27vw, 20.5px); /* 10px 16px @375px */
    font-size: clamp(11.9px, 3.73vw, 17.9px); /* 14px @375px */
  }

  /* 헤더 햄버거 메뉴 아이콘 - Mobile */
  .header__menu {
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  .header__menu-icon {
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  /* 드로어 메뉴 닫기 아이콘 - Mobile */
  .header-menu__close {
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  .header-menu__close-icon {
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  /* ============================================
     Header Menu Drawer - Mobile (375px 기준 비율 유지 스케일링)
     ============================================ */

  /* 데스크탑과 동일한 백그라운드 처리 */
  .header-menu__overlay {
    background-color: rgba(0, 0, 0, 0.7); /* 데스크탑과 동일 */
  }

  .header-menu__drawer {
    width: 100%; /* 모바일: 전체 화면 */
    background-color: transparent; /* 데스크탑과 동일 */
    padding: 0; /* 패딩 제거 (전체 화면) */
    align-items: center; /* 메뉴 리스트 가로 중앙 배치 */
  }

  /* 모바일 메뉴 닫기 버튼 */
  .header-menu__close {
    top: clamp(17.1px, 5.33vw, 25.6px); /* 20px @375px */
    right: clamp(17.1px, 5.33vw, 25.6px); /* 20px @375px */
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  .header-menu__close-icon {
    width: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
    height: clamp(20.5px, 6.4vw, 30.7px); /* 24px @375px */
  }

  /* 모바일 메뉴 리스트 */
  .header-menu__list {
    padding: 0; /* 중앙 배치를 위해 패딩 제거 */
    gap: clamp(51.2px, 16vw, 76.8px); /* 60px @375px */
    text-align: left; /* 텍스트 왼쪽 정렬 유지 */
  }

  /* 모바일 메뉴 링크 */
  .header-menu__link {
    font-size: clamp(34.1px, 10.67vw, 51.2px); /* 40px @375px */
    line-height: 1.4;
  }

  /* ============================================
     Doctors Page - Hero Video Section (Mobile)
     ============================================ */
  
  /* 히어로 섹션 높이 */
  .hero-video {
    height: 100vh; /* 화면 전체 채움 */
    height: 100dvh; /* 모바일 브라우저 동적 뷰포트 지원 */
  }

  /* 오버레이 투명도 */
  .hero-video__overlay {
    background: rgba(0, 0, 0, 0.5); /* Figma: opacity 0.5 */
  }

  /* 콘텐츠 영역 */
  .hero-video__content {
    padding: 60px 0 clamp(102.4px, 32vw, 153.6px); /* 120px @375px */
    align-items: flex-end; /* 하단 정렬 */
    justify-content: flex-start;
  }

  .hero-video__container {
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    gap: clamp(10.24px, 3.2vw, 15.36px); /* 12px @375px */
  }

  /* 제목 */
  .hero-video__title {
    font-family: var(--font-pretendard);
    font-weight: 800; /* Pretendard ExtraBold */
    font-size: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    line-height: clamp(33.44px, 10.45vw, 50.18px); /* 39.2px @375px */
    letter-spacing: -0.56px; /* Figma: -0.56 */
    color: #ffffff;
    text-align: center; /* Figma: 중앙 정렬 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    margin: 0;
  }

  /* 설명 */
  .hero-video__description {
    font-family: var(--font-pretendard);
    font-weight: 500; /* Pretendard Medium */
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: -0.36px; /* Figma: -0.36 */
    color: #ffffff;
    text-align: center; /* Figma: 중앙 정렬 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    margin: 0;
  }

  /* ============================================
     Doctors Page - Why Section (Mobile)
     ============================================ */
  
  /* 섹션 높이 및 패딩 */
  .why-section {
    padding: clamp(51.18px, 16vw, 76.8px) 0 clamp(85.3px, 26.67vw, 128px); /* 60px 0 100px @375px */
    min-height: clamp(411.15px, 128.53vw, 616.96px); /* 482px @375px */
  }

  .why-section__container {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    gap: 0;
    position: relative;
    padding-top: 0;
  }

  /* 구분선 */
  .why-section__container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: clamp(25.59px, 8vw, 38.4px); /* 30px @375px */
    background-color: #1a1d21;
  }

  /* 제목 "Why HippoBee" */
  .why-section__title {
    font-family: var(--font-montserrat);
    font-weight: 800;
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: 0;
    color: #1a1d21;
    text-align: center;
    margin: 0;
    margin-top: clamp(76.77px, 24vw, 115.2px); /* 90px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    align-self: center;
  }

  /* 헤딩 */
  .why-section__heading {
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    line-height: clamp(28.66px, 8.96vw, 43.01px); /* 33.6px @375px */
    letter-spacing: -0.48px;
    color: #1a1d21;
    text-align: center;
    margin: 0;
    margin-top: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* 설명 */
  .why-section__description {
    font-family: var(--font-pretendard);
    font-weight: 400;
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: -0.36px;
    color: #1a1d21;
    text-align: center;
    margin: 0;
    margin-top: clamp(6.82px, 2.13vw, 10.24px); /* 8px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* ============================================
     Why Image Section - Mobile
     ============================================ */
  
  .why-image-section {
    position: relative;
    width: 100%;
    height: clamp(204.72px, 64vw, 307.2px); /* 240px @375px */
    min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../../images/pages/doctors/mobile/m_doctors-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
  }

  .why-image-section__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  .why-image-section__text {
    position: relative;
    z-index: 2;
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    line-height: clamp(32.76px, 10.24vw, 49.15px); /* 38.4px @375px */
    letter-spacing: -0.48px;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* ============================================
     Key Features Section - Mobile
     ============================================ */
  
  .key-features-section {
    padding: 0; /* 모바일에서는 상하 패딩 제거 */
  }

  .key-features-section__container {
    padding: 0;
    flex-direction: column;
    gap: 0;
  }

  /* 사이드바 → 상단 sticky 헤더로 변환 */
  .key-features-sidebar {
    position: sticky;
    top: clamp(-64px, -13.33vw, -42.65px); /* -50px @375px */
    width: 100%;
    background-color: #ffffff;
    z-index: 50;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    padding-top: clamp(85.3px, 26.67vw, 128px); /* 100px @375px */
    padding-bottom: 0;
  }

  .key-features-sidebar__header {
    margin-bottom: clamp(3.41px, 1.07vw, 5.12px); /* 4px @375px */
    text-align: center;
  }

  /* 로고와 타이틀을 한 줄로 결합 */
  .key-features-sidebar__logo {
    font-family: var(--font-montserrat);
    font-weight: 800;
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: 0;
    color: #0159fd;
    margin: 0;
    display: inline;
  }

  .key-features-sidebar__title {
    font-family: var(--font-montserrat);
    font-weight: 800;
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: 0;
    color: #0159fd;
    margin: 0;
    display: inline;
  }

  /* 로고와 타이틀 사이 공백 */
  .key-features-sidebar__logo::after {
    content: ' ';
  }

  /* 네비게이션 메뉴 - 가로 스크롤 */
  .key-features-sidebar__nav {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 스크롤바 숨김 (WebKit) */
  .key-features-sidebar__nav::-webkit-scrollbar {
    display: none;
  }

  .key-features-sidebar__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: max-content;
  }

  .key-features-sidebar__item {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }

  .key-features-sidebar__link {
    display: flex;
    align-items: center;
    height: clamp(51.18px, 16vw, 76.8px); /* 60px @375px */
    font-family: var(--font-pretendard);
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: -0.36px;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .key-features-sidebar__link--active {
    font-weight: 600;
    color: #0159fd;
  }

  /* 콘텐츠 영역 - 모바일에서는 사이드바 제거하고 전체 너비 사용 */
  .key-features-content {
    width: 100%;
    padding: 0; /* 좌우 여백은 각 feature에 적용 */
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Feature 섹션 - 모바일 레이아웃 */
  .key-feature {
    width: 100%;
    padding: 0;
    min-height: auto;
  }

  /* 첫 번째 feature는 sticky 헤더 바로 아래 */
  .key-feature:first-child {
    padding-top: 40px; /* Figma: 헤더 끝(2900)에서 Feature 1 시작(2940)까지 40px */
  }

  /* 섹션 간 간격 */
  .key-feature:not(:first-child) {
    margin-top: 80px; /* Figma: 각 섹션 간 약 80px 간격 */
  }

  .key-feature__container {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 (375px - 20px * 2) */
    margin: 0 auto;
    padding: 0 20px; /* 좌우 여백 */
    display: flex;
    flex-direction: column; /* 세로 배치: 이미지 위, 텍스트 아래 */
    gap: 0;
    align-items: flex-start;
  }

  /* Feature 1, 2 컨테이너 - 패딩 없음 (이미지/텍스트 영역에서 개별 관리) */
  #feature-1 .key-feature__container,
  #feature-2 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* 이미지 영역 */
  .key-feature__image-area {
    width: 100%;
    flex: none;
    min-height: auto;
    background-color: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(30.71px, 9.6vw, 46.08px); /* 36px @375px - 이미지와 텍스트 사이 기본 간격 */
  }

  /* Feature 1 이미지 영역 - 터치 스크롤 */
  #feature-1 .key-feature__image-area {
    background-color: transparent;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    margin-bottom: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #feature-1 .key-feature__image-area::-webkit-scrollbar {
    display: none;
  }

  /* picture 요소 - 스크롤 영역 내에서 축소 방지 */
  #feature-1 .key-feature__image-area picture {
    flex-shrink: 0;
  }

  /* Feature 1 이미지 스타일 */
  .key-feature__image {
    width: auto;
    height: clamp(368.5px, 115.2vw, 552.96px); /* 432px @375px */
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    flex-shrink: 0;
  }

  /* Feature 1 텍스트 영역 */
  #feature-1 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
    max-width: 480px; /* 480px 이상 확장 방지 */
    margin: 0 auto; /* 중앙 정렬 */
  }

  /* Feature 2 이미지 영역 - 한 화면에 표시 */
  #feature-2 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 2 단일 이미지 - 화면 너비에 맞춤 */
  #feature-2 .key-feature__image--single {
    width: 100%;
    height: auto;
    border-radius: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
  }

  /* Feature 2 텍스트 영역 */
  #feature-2 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 3 컨테이너 */
  #feature-3 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 3 이미지 영역 */
  #feature-3 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    padding-bottom: clamp(25.59px, 8vw, 38.4px); /* 30px @375px */
    box-sizing: border-box;
  }

  /* Feature 3 이미지 래퍼 - 아이콘 겹침을 위한 relative 컨테이너 */
  #feature-3 .key-feature__image-wrapper {
    position: relative;
    width: 100%;
  }

  /* Feature 3 메인 이미지 */
  #feature-3 .key-feature__image--main {
    width: 100%;
    height: auto;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* Feature 3 아이콘 이미지 - 메인 이미지 위에 겹침 */
  #feature-3 .key-feature__image--icon {
    position: absolute;
    left: 9.5%;
    bottom: -8%;
    width: 35%;
    height: auto;
  }

  /* Feature 3 텍스트 영역 */
  #feature-3 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 4 컨테이너 */
  #feature-4 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 4 이미지 영역 */
  #feature-4 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 4 이미지 래퍼 - flex로 문서 흐름 유지 */
  #feature-4 .key-feature__image-wrapper {
    display: flex !important; /* 데스크탑 position: relative 오버라이드 */
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    position: static !important; /* 데스크탑 position: relative 오버라이드 */
    height: auto !important; /* 데스크탑 height 오버라이드 */
  }

  /* Feature 4 메인 이미지 */
  #feature-4 .key-feature__image--main {
    width: 100% !important; /* 데스크탑 40% 오버라이드 */
    height: auto !important;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    position: static !important; /* 데스크탑 position: relative 오버라이드 */
    z-index: auto !important; /* 데스크탑 z-index 오버라이드 */
  }

  /* Feature 4 오버레이 이미지 - negative margin으로 겹침 */
  #feature-4 .key-feature__overlay-picture {
    width: 60% !important; /* 데스크탑 스타일 오버라이드 */
    margin-top: -8% !important;
    margin-left: 20% !important;
    align-self: flex-start !important;
    position: static !important; /* 데스크탑 position: absolute 오버라이드 */
    right: auto !important;
    bottom: auto !important;
  }

  #feature-4 .key-feature__image--overlay {
    width: 100% !important; /* 데스크탑 70% 오버라이드 */
    height: auto !important;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    position: static !important; /* 데스크탑 position: absolute 오버라이드 */
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important; /* 데스크탑 z-index 오버라이드 */
  }

  /* Feature 4 텍스트 영역 */
  #feature-4 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 5 컨테이너 */
  #feature-5 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 5 이미지 영역 */
  #feature-5 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 5 단일 이미지 */
  #feature-5 .key-feature__image--single {
    width: 100%;
    height: auto;
    border-radius: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
  }

  /* Feature 5 텍스트 영역 */
  #feature-5 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 6 컨테이너 */
  #feature-6 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 6 이미지 영역 */
  #feature-6 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 6 이미지 래퍼 - 비율 유지를 위한 컨테이너 */
  #feature-6 .key-feature__image-wrapper {
    position: relative !important; /* 모바일에서도 relative 유지 */
    width: 100% !important; /* 데스크탑 80% 오버라이드 */
    aspect-ratio: 307 / 433 !important; /* 모바일 비율 유지 */
  }

  /* Feature 6 메인 이미지 (오른쪽 세로) */
  #feature-6 .key-feature__main-picture {
    position: absolute !important; /* 모바일에서도 absolute 유지 */
    right: 0 !important;
    top: 0 !important;
    width: 65% !important;
    z-index: 2 !important;
    left: auto !important; /* 데스크탑 left: 0 오버라이드 */
  }

  #feature-6 .key-feature__image--main {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    position: static !important; /* 데스크탑 position: absolute 오버라이드 */
    left: auto !important; /* 데스크탑 left: 0 오버라이드 */
    top: auto !important; /* 데스크탑 top: 32.5% 오버라이드 */
    z-index: auto !important; /* 데스크탑 z-index 오버라이드 */
  }

  /* Feature 6 오버레이 이미지 (왼쪽 하단 가로) */
  #feature-6 .key-feature__overlay-picture {
    position: absolute !important; /* 모바일에서도 absolute 유지 */
    left: 0 !important;
    top: 39% !important;
    width: 90% !important;
    z-index: 1 !important;
    right: auto !important; /* 데스크탑 right 오버라이드 */
    bottom: auto !important; /* 데스크탑 bottom 오버라이드 */
  }

  #feature-6 .key-feature__image--overlay {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    position: static !important; /* 데스크탑 position: absolute 오버라이드 */
    left: auto !important; /* 데스크탑 left: 46% 오버라이드 */
    top: auto !important; /* 데스크탑 top: 0 오버라이드 */
    z-index: auto !important; /* 데스크탑 z-index 오버라이드 */
  }

  /* Feature 6 텍스트 영역 */
  #feature-6 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 7 컨테이너 */
  #feature-7 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 7 이미지 영역 */
  #feature-7 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    padding-bottom: clamp(21.33px, 6.67vw, 32px); /* 25px @375px */
    box-sizing: border-box;
  }

  /* Feature 7 이미지 래퍼 */
  #feature-7 .key-feature__image-wrapper {
    position: relative;
    width: 100%;
  }

  /* Feature 7 메인 이미지 */
  #feature-7 .key-feature__image--main {
    width: 100%;
    height: auto;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* Feature 7 아이콘 이미지 - 오른쪽 하단 겹침 */
  #feature-7 .key-feature__image--icon {
    position: absolute;
    right: 3%;
    bottom: -9%;
    width: 28%;
    height: auto;
    border-radius: 0;
  }

  /* Feature 7 텍스트 영역 */
  #feature-7 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 8 컨테이너 */
  #feature-8 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 8 이미지 영역 */
  #feature-8 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 8 이미지 래퍼 - 비율 유지 */
  #feature-8 .key-feature__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 325 / 232;
  }

  /* Feature 8 왼쪽 베이스 이미지 */
  #feature-8 .key-feature__base-picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 68%;
    z-index: 2;
  }

  #feature-8 .key-feature__image--base {
    width: 100%;
    height: auto;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* Feature 8 오른쪽 오버레이 이미지 */
  #feature-8 .key-feature__overlay-picture {
    position: absolute;
    left: 23%;
    top: 10%;
    width: 77%;
    z-index: 1;
  }

  #feature-8 .key-feature__image--overlay {
    width: 100%;
    height: auto;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* Feature 8 텍스트 영역 */
  #feature-8 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 9 컨테이너 */
  #feature-9 .key-feature__container {
    max-width: none;
    padding: 0;
  }

  /* Feature 9 이미지 영역 */
  #feature-9 .key-feature__image-area {
    background-color: transparent;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  /* Feature 9 이미지 래퍼 - 비율 유지 */
  #feature-9 .key-feature__image-wrapper {
    position: relative !important; /* 모바일에서도 relative 유지 */
    width: 100% !important;
    aspect-ratio: 325 / 329 !important; /* 모바일 비율 유지 */
  }

  /* Feature 9 이미지 1 - 상단 메인 */
  #feature-9 .key-feature__image-1 {
    position: absolute !important; /* 모바일에서도 absolute 유지 */
    left: 9% !important; /* 모바일 위치 유지 */
    top: 0 !important; /* 모바일 위치 유지 */
    width: 82% !important; /* 모바일 크기 유지 */
    z-index: 1 !important;
    right: auto !important; /* 데스크탑 스타일 오버라이드 */
  }

  #feature-9 .key-feature__image-1 .key-feature__image,
  #feature-9 .key-feature__image-1 img {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
  }

  /* Feature 9 이미지 2 - 하단 가로 */
  #feature-9 .key-feature__image-2 {
    position: absolute !important; /* 모바일에서도 absolute 유지 */
    left: 15% !important; /* 모바일 위치 유지 */
    top: 55% !important; /* 모바일 위치 유지 */
    width: 83% !important; /* 모바일 크기 유지 */
    z-index: 2 !important;
    right: auto !important; /* 데스크탑 스타일 오버라이드 */
  }

  #feature-9 .key-feature__image-2 .key-feature__image,
  #feature-9 .key-feature__image-2 img {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
  }

  /* Feature 9 이미지 3 - 좌측 세로 카드 */
  #feature-9 .key-feature__image-3 {
    position: absolute !important; /* 모바일에서도 absolute 유지 */
    left: 0 !important; /* 모바일 위치 유지 */
    top: 24% !important; /* 모바일 위치 유지 */
    width: 31% !important; /* 모바일 크기 유지 */
    z-index: 3 !important;
    right: auto !important; /* 데스크탑 스타일 오버라이드 */
  }

  #feature-9 .key-feature__image-3 .key-feature__image,
  #feature-9 .key-feature__image-3 img {
    width: 100% !important;
    height: auto !important;
    border-radius: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
  }

  /* Feature 9 텍스트 영역 */
  #feature-9 .key-feature__text-area {
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  .key-feature__image-placeholder {
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: 16px;
    line-height: 22.4px;
    color: #999999;
    text-align: center;
  }

  /* 텍스트 영역 */
  .key-feature__text-area {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .key-feature__title {
    font-family: var(--font-pretendard);
    font-weight: 700;
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: -0.4px;
    color: #1a1d21;
    margin: 0;
    margin-bottom: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
  }

  .key-feature__description {
    font-family: var(--font-pretendard);
    font-weight: 400;
    font-size: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
    line-height: clamp(19.11px, 5.97vw, 28.67px); /* 22.4px @375px */
    letter-spacing: -0.32px;
    color: #4a5058;
    margin: 0;
  }

  /* 설명 문단 간 간격 */
  .key-feature__description p {
    margin: 0;
    margin-bottom: clamp(18.77px, 5.87vw, 28.16px); /* 22px @375px */
  }

  .key-feature__description p:last-child {
    margin-bottom: 0;
  }

  /* 481px ~ 767px: Feature 2~9 이미지 480px 고정 + 중앙 정렬 (Feature 1 제외) */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    /* Feature 2~9 컨테이너 max-width 고정 */
    #feature-2 .key-feature__container,
    #feature-3 .key-feature__container,
    #feature-4 .key-feature__container,
    #feature-5 .key-feature__container,
    #feature-6 .key-feature__container,
    #feature-7 .key-feature__container,
    #feature-8 .key-feature__container,
    #feature-9 .key-feature__container {
      max-width: 480px;
      margin: 0 auto;
    }

    /* Feature 2~9 이미지/텍스트 영역 padding 고정 */
    #feature-2 .key-feature__text-area,
    #feature-2 .key-feature__image-area,
    #feature-3 .key-feature__text-area,
    #feature-3 .key-feature__image-area,
    #feature-4 .key-feature__text-area,
    #feature-4 .key-feature__image-area,
    #feature-5 .key-feature__text-area,
    #feature-5 .key-feature__image-area,
    #feature-6 .key-feature__text-area,
    #feature-6 .key-feature__image-area,
    #feature-7 .key-feature__text-area,
    #feature-7 .key-feature__image-area,
    #feature-8 .key-feature__text-area,
    #feature-8 .key-feature__image-area,
    #feature-9 .key-feature__text-area,
    #feature-9 .key-feature__image-area {
      padding: 0 25.6px; /* 480px 기준 max값 */
    }

    /* Feature 2, 5 단일 이미지 border-radius 고정 */
    #feature-2 .key-feature__image--single,
    #feature-5 .key-feature__image--single {
      border-radius: 20.48px; /* 480px 기준 max값 */
    }

    /* Feature 3 padding-bottom 고정 */
    #feature-3 .key-feature__image-area {
      padding-bottom: 38.4px; /* 480px 기준 max값 */
    }

    /* Feature 3, 4, 6, 7, 8 이미지 border-radius 고정 */
    #feature-3 .key-feature__image--main,
    #feature-4 .key-feature__image--main,
    #feature-4 .key-feature__image--overlay,
    #feature-6 .key-feature__image--main,
    #feature-6 .key-feature__image--overlay,
    #feature-7 .key-feature__image--main,
    #feature-8 .key-feature__image--base,
    #feature-8 .key-feature__image--overlay {
      border-radius: 30.72px; /* 480px 기준 max값 */
    }

    /* Feature 7 padding-bottom 고정 */
    #feature-7 .key-feature__image-area {
      padding-bottom: 32px; /* 480px 기준 max값 */
    }

    /* Feature 9 이미지 border-radius 고정 */
    #feature-9 .key-feature__image-1 .key-feature__image,
    #feature-9 .key-feature__image-2 .key-feature__image {
      border-radius: 25.6px; /* 480px 기준 max값 */
    }

    #feature-9 .key-feature__image-3 .key-feature__image {
      border-radius: 20.48px; /* 480px 기준 max값 */
    }
  }

  /* ============================================
     Process Section - Mobile
     ============================================ */
  
  .process-section {
    background-color: #f7f8fa; /* Figma: 배경 #f7f8fa */
    padding: 0;
    min-height: auto;
    margin-top: clamp(85.3px, 26.67vw, 128px); /* 100px @375px */
  }

  .process-section__container {
    width: 100%;
    max-width: none; /* Feature 1처럼 전체 너비 */
    margin: 0 auto;
    padding: clamp(85.3px, 26.67vw, 128px) 0 clamp(17.06px, 5.33vw, 25.6px) 0; /* 100px 0 20px 0 @375px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .process-section__title {
    font-family: var(--font-pretendard);
    font-weight: 700; /* Pretendard Bold */
    font-size: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    line-height: clamp(28.66px, 8.96vw, 43.01px); /* 33.6px @375px */
    letter-spacing: -0.48px; /* Figma: -0.48 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-bottom: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    box-sizing: border-box;
  }

  .process-section__intro {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: -0.36px; /* Figma: -0.36 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-bottom: clamp(68.24px, 21.33vw, 102.4px); /* 80px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* 모바일 프로세스 이미지 */
  .process-section__mobile-image {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: clamp(34.12px, 10.67vw, 51.2px); /* 40px @375px */
  }

  .process-section__mobile-image .process-section__image {
    width: clamp(204.72px, 64vw, 307.2px); /* 240px @375px */
    height: clamp(420.53px, 131.47vw, 631.04px); /* 493px @375px */
  }

  /* 모바일 Step 텍스트 */
  .process-section__mobile-step {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: clamp(68.24px, 21.33vw, 102.4px); /* 80px @375px */
  }

  /* 선택자 특이도 높임: p 태그 기본 스타일 오버라이드 */
  .process-section__mobile-step p.process-step__text {
    font-family: var(--font-pretendard);
    font-weight: 500; /* Pretendard Medium - Figma: fontWeight 500 */
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: -0.36px; /* Figma: -0.36 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    background-color: #e2e5e9; /* Figma: 배경 #e2e5e9 */
    border-radius: 1000px; /* Figma: border-radius 1000px */
    padding: clamp(13.65px, 4.27vw, 20.48px) clamp(20.47px, 6.4vw, 30.72px); /* 16px 24px @375px */
    margin: 0;
  }

  .process-section__mobile-step p.process-step__text strong {
    font-weight: 800; /* Pretendard ExtraBold */
  }

  /* 모바일 슬라이드 트랙 (가로 스크롤) - Feature 1 참고 */
  .process-section__mobile-slider {
    display: block;
    width: 100%;
    margin-bottom: clamp(34.12px, 10.67vw, 51.2px); /* 40px @375px */
  }

  .process-section__slider-track {
    display: flex;
    flex-direction: row;
    gap: clamp(10.24px, 3.2vw, 15.36px); /* 12px @375px */
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
  }

  .process-section__slider-track::-webkit-scrollbar {
    display: none;
  }

  .process-section__slide-image {
    width: clamp(204.72px, 64vw, 307.2px); /* 240px @375px */
    height: auto;
    flex-shrink: 0;
    border-radius: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
  }

  /* 481px ~ 767px: process-section 480px 고정 + 중앙 정렬 (슬라이더 제외) */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .process-section {
      margin-top: 128px; /* 480px 기준 max값 */
    }

    .process-section__container {
      /* max-width 제거 - 슬라이더가 전체 너비 사용하도록 */
      padding: 128px 0 25.6px 0; /* 480px 기준 max값 */
    }

    .process-section__title {
      font-size: 30.72px; /* 480px 기준 max값 */
      line-height: 43.01px; /* 480px 기준 max값 */
      margin-bottom: 25.6px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
      padding: 0 25.6px; /* 480px 기준 max값 */
    }

    .process-section__intro {
      font-size: 23.04px; /* 480px 기준 max값 */
      line-height: 32.26px; /* 480px 기준 max값 */
      margin-bottom: 102.4px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .process-section__mobile-image {
      margin-bottom: 51.2px; /* 480px 기준 max값 */
    }

    .process-section__mobile-image .process-section__image {
      width: 307.2px; /* 480px 기준 max값 */
      height: 631.04px; /* 480px 기준 max값 */
    }

    .process-section__mobile-step {
      margin-bottom: 102.4px; /* 480px 기준 max값 */
    }

    .process-section__mobile-step p.process-step__text {
      font-size: 23.04px; /* 480px 기준 max값 */
      line-height: 32.26px; /* 480px 기준 max값 */
      padding: 20.48px 30.72px; /* 480px 기준 max값 */
    }

    /* 슬라이더는 Feature 1처럼 전체 너비 사용 - clamp() 유지 */
    .process-section__mobile-slider {
      margin-bottom: 51.2px; /* 480px 기준 max값 */
    }

    .process-section__slider-track {
      gap: 15.36px; /* 480px 기준 max값 */
      padding: 0 25.6px; /* 480px 기준 max값 */
    }

    .process-section__slide-image {
      width: 307.2px; /* 480px 기준 max값 */
      border-radius: 30.72px; /* 480px 기준 max값 */
    }
  }

  /* ============================================
     CTA Section - Mobile
     ============================================ */
  
  .cta-section {
    background-color: #ffffff; /* Figma: 배경 흰색 */
    padding: 0;
    min-height: auto;
    margin-top: 0; /* 프로세스 섹션과의 간격은 padding으로 처리 */
  }

  .cta-section__container {
    width: 100%;
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    margin: 0 auto;
    padding: clamp(85.3px, 26.67vw, 128px) 0; /* 100px @375px */
  }

  .cta-section__content {
    display: flex;
    flex-direction: column; /* 세로 배치: 이미지 위, 텍스트 아래 */
    align-items: center;
    gap: 0;
    max-width: 100%;
    margin: 0;
  }

  .cta-section__image-area {
    width: 100%;
    max-width: clamp(270.4px, 84.53vw, 405.76px); /* 317px @375px */
    margin: 0 auto clamp(51.18px, 16vw, 76.8px) auto; /* 60px @375px */
    aspect-ratio: 317 / 240;
    height: auto; /* 데스크탑 height: 347.65px 오버라이드 */
    flex: none;
  }

  /* 모바일에서 데스크탑 placeholder 숨김 */
  .cta-section__image-placeholder-main,
  .cta-section__image-placeholder-sub {
    display: none;
  }

  /* 모바일 레이어 이미지 컨테이너 */
  .cta-section__mobile-images {
    display: block;
    position: relative;
    width: 100%;
    max-width: clamp(270.4px, 84.53vw, 405.76px); /* 317px @375px */
    margin: 0 auto;
    aspect-ratio: 317 / 240;
    overflow: hidden; /* 이미지가 컨테이너 밖으로 나가지 않도록 */
  }

  /* 메인 배경 이미지 (가장 큰 이미지) */
  .cta-section__image--main {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
  }

  /* 세로 이미지 (중간 레이어) */
  .cta-section__image--vertical {
    position: absolute;
    left: 21%;
    top: 39%;
    width: 22%;
    height: auto;
    z-index: 2;
    border-radius: clamp(10.24px, 3.2vw, 15.36px); /* 12px @375px */
    overflow: hidden;
  }

  /* 가로 카드 이미지 (맨 앞 레이어) */
  .cta-section__image--horizontal {
    position: absolute;
    left: 48%;
    top: 50%;
    width: 52%;
    height: auto;
    z-index: 3;
    border-radius: clamp(10.24px, 3.2vw, 15.36px); /* 12px @375px */
    overflow: hidden;
  }

  .cta-section__text-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 중앙 정렬 */
    gap: 0;
  }


  .cta-section__title {
    font-family: var(--font-pretendard);
    font-weight: 700; /* Pretendard Bold */
    font-size: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    line-height: clamp(28.66px, 8.96vw, 43.01px); /* 33.6px @375px */
    letter-spacing: -0.48px; /* Figma: -0.48 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-bottom: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    max-width: 100%;
    width: 100%;
  }

  .cta-section__description {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: -0.4px; /* Figma: -0.4 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-bottom: clamp(34.12px, 10.67vw, 51.2px); /* 40px @375px */
    max-width: 100%;
    width: 100%;
  }

  .btn--cta-primary {
    font-family: var(--font-pretendard);
    font-weight: 600; /* Pretendard SemiBold */
    font-size: clamp(15.35px, 4.8vw, 23.04px); /* 18px @375px */
    line-height: clamp(21.5px, 6.72vw, 32.26px); /* 25.2px @375px */
    letter-spacing: 0;
    background-color: #0159fd; /* Figma: 배경 #0159fd */
    color: #ffffff; /* Figma: 색상 #ffffff */
    border: none;
    border-radius: 1000px; /* Figma: border-radius: 1000px */
    padding: 0;
    width: clamp(136.48px, 42.67vw, 204.8px); /* 160px @375px */
    height: clamp(51.18px, 16vw, 76.8px); /* 60px @375px */
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn--cta-primary:hover {
    background-color: #0148d4; /* 호버 시 약간 어두운 색 */
  }

  /* 481px ~ 767px: cta-section 480px 고정 + 중앙 정렬 */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .cta-section__container {
      max-width: 428.8px; /* 480px 기준 max값 */
      padding: 128px 0; /* 480px 기준 max값 */
    }

    .cta-section__image-area {
      max-width: 405.76px; /* 480px 기준 max값 */
      margin: 0 auto 76.8px auto; /* 480px 기준 max값 */
    }

    .cta-section__mobile-images {
      max-width: 405.76px; /* 480px 기준 max값 */
    }

    .cta-section__image--vertical,
    .cta-section__image--horizontal {
      border-radius: 15.36px; /* 480px 기준 max값 */
    }

    .cta-section__title {
      font-size: 30.72px; /* 480px 기준 max값 */
      line-height: 43.01px; /* 480px 기준 max값 */
      margin-bottom: 25.6px; /* 480px 기준 max값 */
    }

    .cta-section__description {
      font-size: 25.6px; /* 480px 기준 max값 */
      line-height: 35.84px; /* 480px 기준 max값 */
      margin-bottom: 51.2px; /* 480px 기준 max값 */
    }

    .btn--cta-primary {
      font-size: 23.04px; /* 480px 기준 max값 */
      line-height: 32.26px; /* 480px 기준 max값 */
      width: 204.8px; /* 480px 기준 max값 */
      height: 76.8px; /* 480px 기준 max값 */
    }
  }


  /* ============================================
     Users Why Section - Mobile
     ============================================ */
  
  .users-why-section {
    padding: 0;
    background-color: #ffffff;
  }

  .users-why-section__container {
    width: 100%;
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    margin: 0 auto;
    padding: clamp(51.18px, 16vw, 76.8px) 0 clamp(51.18px, 16vw, 76.8px) 0; /* 60px 0 60px 0 @375px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
  }

  /* 구분선 (섹션 상단에서 60px 아래) */
  .users-why-section__container::before {
    content: '';
    position: absolute;
    top: clamp(51.18px, 16vw, 76.8px); /* 60px @375px */
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* 구분선 굵기 2px */
    height: clamp(25.59px, 8vw, 38.4px); /* 30px @375px */
    background-color: #1a1d21; /* Figma: #1a1d21 */
  }

  .users-why-section__line {
    display: none; /* 모바일에서는 ::before로 대체 */
  }

  /* 제목 "Why HippoBee" */
  .users-why-section__title {
    font-family: var(--font-montserrat); /* Figma: Montserrat */
    font-weight: 800; /* Montserrat ExtraBold */
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: 0;
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-top: clamp(76.77px, 24vw, 115.2px); /* 90px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* 카드 그룹 - 세로 배치 */
  .users-why-section__cards {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    gap: clamp(68.24px, 21.33vw, 102.4px); /* 80px @375px */
    width: 100%;
    margin-top: clamp(76.77px, 24vw, 115.2px); /* 90px @375px */
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* 개별 카드 */
  .users-why-section__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    width: 100%;
    flex: none;
  }

  .users-why-section__card:nth-child(1),
  .users-why-section__card:nth-child(2),
  .users-why-section__card:nth-child(3),
  .users-why-section__card:nth-child(4) {
    width: 100%;
  }

  /* 아이콘 영역 */
  .users-why-section__icon {
    width: auto; /* 각 카드마다 크기가 다름 */
    height: auto;
    border-radius: 0; /* 원형이 아님 */
    background-color: transparent; /* 배경 없음 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
  }

  /* 카드별 아이콘 크기 */
  .users-why-section__card:nth-child(1) .users-why-section__icon {
    width: clamp(112.6px, 35.2vw, 168.96px); /* 132px @375px */
    height: clamp(102.36px, 32vw, 153.6px); /* 120px @375px */
  }

  .users-why-section__card:nth-child(2) .users-why-section__icon {
    width: clamp(156.95px, 49.07vw, 235.52px); /* 184px @375px */
    height: clamp(127.95px, 40vw, 192px); /* 150px @375px */
  }

  .users-why-section__card:nth-child(3) .users-why-section__icon {
    width: clamp(160.36px, 50.13vw, 240.64px); /* 188px @375px */
    height: clamp(127.95px, 40vw, 192px); /* 150px @375px */
  }

  .users-why-section__card:nth-child(4) .users-why-section__icon {
    width: clamp(162.92px, 50.93vw, 244.48px); /* 191px @375px */
    height: clamp(127.95px, 40vw, 192px); /* 150px @375px */
  }

  .users-why-section__icon-placeholder {
    display: none; /* 모바일에서 placeholder 숨김 */
  }

  .users-why-section__icon-mobile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .users-why-section__icon-desktop {
    display: none; /* 모바일에서 데스크탑 아이콘 숨김 */
  }

  /* 카드 텍스트 */
  .users-why-section__text {
    font-family: var(--font-pretendard);
    font-weight: 500; /* Pretendard Medium */
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: -0.4px; /* Figma: -0.4 */
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-top: 0; /* 모바일에서는 gap으로 처리 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    white-space: pre-line; /* 줄바꿈 처리 */
  }

  /* 481px ~ 767px: users-why-section 480px 고정 + 중앙 정렬 */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .users-why-section__container {
      max-width: 428.8px; /* 480px 기준 max값 */
      padding: 76.8px 0 76.8px 0; /* 480px 기준 max값 - 60px 60px */
    }

    .users-why-section__container::before {
      top: 76.8px; /* 480px 기준 max값 */
      height: 38.4px; /* 480px 기준 max값 */
    }

    .users-why-section__title {
      font-size: 25.6px; /* 480px 기준 max값 */
      line-height: 35.84px; /* 480px 기준 max값 */
      margin-top: 115.2px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .users-why-section__cards {
      gap: 102.4px; /* 480px 기준 max값 */
      margin-top: 115.2px; /* 480px 기준 max값 */
    }

    .users-why-section__card {
      gap: 35.84px; /* 480px 기준 max값 */
    }

    .users-why-section__card:nth-child(1) .users-why-section__icon {
      width: 168.96px; /* 480px 기준 max값 */
      height: 153.6px; /* 480px 기준 max값 */
    }

    .users-why-section__card:nth-child(2) .users-why-section__icon {
      width: 235.52px; /* 480px 기준 max값 */
      height: 192px; /* 480px 기준 max값 */
    }

    .users-why-section__card:nth-child(3) .users-why-section__icon {
      width: 240.64px; /* 480px 기준 max값 */
      height: 192px; /* 480px 기준 max값 */
    }

    .users-why-section__card:nth-child(4) .users-why-section__icon {
      width: 244.48px; /* 480px 기준 max값 */
      height: 192px; /* 480px 기준 max값 */
    }

    .users-why-section__text {
      font-size: 25.6px; /* 480px 기준 max값 */
      line-height: 35.84px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
    }
  }

  /* ============================================
     Users Features Section - Mobile
     ============================================ */
  
  .users-features-section {
    padding: 0;
    background-color: #ffffff;
  }

  .users-features-section__container {
    width: 100%;
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    margin: 0 auto;
    padding: clamp(51.18px, 16vw, 76.8px) 0 clamp(85.3px, 26.67vw, 128px) 0; /* 60px 0 100px 0 @375px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* 제목 "HippoBee가 만드는 새로운 경험" */
  .users-features-section__title {
    font-family: var(--font-pretendard);
    font-weight: 700; /* Pretendard Bold */
    font-size: clamp(20.47px, 6.4vw, 30.72px); /* 24px @375px */
    line-height: clamp(28.66px, 8.96vw, 43.01px); /* 33.6px @375px */
    letter-spacing: 0;
    color: #1a1d21; /* Figma: #1a1d21 */
    text-align: center; /* Figma: 중앙 정렬 */
    margin: 0;
    margin-bottom: clamp(51.18px, 16vw, 76.8px); /* 60px @375px */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
  }

  /* Feature 아이템 컨테이너 */
  .users-features-section__items {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    gap: clamp(68.24px, 21.33vw, 102.4px); /* 80px @375px */
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important; /* 데스크탑 margin 오버라이드 */
    margin-right: 0 !important;
    margin-top: 0 !important; /* 데스크탑 margin 오버라이드 */
  }

  /* 개별 Feature 아이템 */
  .users-feature-item {
    width: 100% !important; /* 데스크탑 width 오버라이드 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    height: auto !important; /* 데스크탑 height 오버라이드 */
    display: flex;
    flex-direction: column-reverse; /* 세로 배치: 이미지 위, 텍스트 아래 */
    align-items: flex-start;
    margin: 0 !important; /* 데스크탑 margin 오버라이드 */
  }
  
  .users-feature-item:nth-child(1),
  .users-feature-item:nth-child(2),
  .users-feature-item:nth-child(3),
  .users-feature-item:nth-child(4),
  .users-feature-item:nth-child(5) {
    height: auto !important; /* 데스크탑 height 오버라이드 */
    margin-bottom: 0 !important; /* 데스크탑 margin-bottom 오버라이드 */
  }

  /* reverse 클래스는 모바일에서도 동일하게 세로 배치 */
  .users-feature-item--reverse {
    flex-direction: column-reverse; /* 모바일에서는 항상 이미지가 위로 */
  }

  /* 이미지 영역 */
  .users-feature-item__image-area {
    width: 100% !important; /* 데스크탑 width 오버라이드 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    height: auto !important; /* 데스크탑 height 오버라이드, 이미지 비율에 맞게 자동 조절 */
    flex-shrink: 0;
    background-color: transparent;
    display: block;
    border-radius: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    margin-bottom: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    overflow: hidden;
  }
  
  /* 각 feature별 이미지 영역 width/height 오버라이드 */
  .users-feature-item:nth-child(1) .users-feature-item__image-area,
  .users-feature-item:nth-child(2) .users-feature-item__image-area,
  .users-feature-item:nth-child(3) .users-feature-item__image-area,
  .users-feature-item:nth-child(4) .users-feature-item__image-area,
  .users-feature-item:nth-child(5) .users-feature-item__image-area {
    width: 100% !important;
    height: auto !important;
  }

  .users-feature-item__image-placeholder {
    display: none; /* 모바일에서 placeholder 숨김 */
  }

  .users-feature-item__image-desktop {
    display: none; /* 모바일에서 데스크탑 이미지 숨김 */
  }

  .users-feature-item__image-mobile {
    display: block;
    width: 100%;
    height: auto; /* 이미지 비율 유지 */
    border-radius: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
  }

  /* 텍스트 영역 */
  .users-feature-item__text-area {
    width: 100% !important; /* 데스크탑 width 오버라이드 */
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 !important; /* 모바일에서는 패딩 제거 */
    text-align: left; /* 모바일에서는 항상 왼쪽 정렬 */
    margin-left: 0 !important; /* 데스크탑 margin 오버라이드 */
    margin-right: 0 !important; /* 데스크탑 margin 오버라이드 */
  }

  /* reverse 클래스의 데스크탑 padding-left 오버라이드 */
  .users-feature-item--reverse .users-feature-item__text-area {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 각 feature별 텍스트 영역 width 오버라이드 */
  .users-feature-item:nth-child(1) .users-feature-item__text-area,
  .users-feature-item:nth-child(2) .users-feature-item__text-area,
  .users-feature-item:nth-child(3) .users-feature-item__text-area,
  .users-feature-item:nth-child(4) .users-feature-item__text-area,
  .users-feature-item:nth-child(5) .users-feature-item__text-area {
    width: 100% !important;
  }

  /* Feature 제목 */
  .users-feature-item__title {
    font-family: var(--font-pretendard);
    font-weight: 700; /* Pretendard Bold */
    font-size: clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    line-height: clamp(23.88px, 7.47vw, 35.84px); /* 28px @375px */
    letter-spacing: -0.4px; /* Figma: -0.4 */
    color: #1a1d21; /* Figma: #1a1d21 */
    margin: 0;
    margin-bottom: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
    text-align: left; /* 모바일에서는 항상 왼쪽 정렬 */
  }

  .users-feature-item--reverse .users-feature-item__title {
    text-align: left; /* 모바일에서는 항상 왼쪽 정렬 */
  }

  /* Feature 설명 */
  .users-feature-item__description {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
    line-height: clamp(19.11px, 5.97vw, 28.67px); /* 22.4px @375px */
    letter-spacing: -0.32px; /* Figma: -0.32 */
    color: #4a5058; /* Figma: #4a5058 */
    margin: 0;
    text-align: left; /* 모바일에서는 항상 왼쪽 정렬 */
  }

  .users-feature-item--reverse .users-feature-item__description {
    text-align: left; /* 모바일에서는 항상 왼쪽 정렬 */
  }

  /* 설명 문단 간 간격 */
  .users-feature-item__description p {
    margin: 0;
    margin-bottom: clamp(18.77px, 5.87vw, 28.16px); /* 22px @375px */
  }

  .users-feature-item__description p:last-child {
    margin-bottom: 0;
  }

  /* 481px ~ 767px: users-features-section 480px 고정 + 중앙 정렬 */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .users-features-section__container {
      max-width: 428.8px; /* 480px 기준 max값 */
      padding: 76.8px 0 128px 0; /* 480px 기준 max값 */
    }

    .users-features-section__title {
      font-size: 30.72px; /* 480px 기준 max값 */
      line-height: 43.01px; /* 480px 기준 max값 */
      margin-bottom: 76.8px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .users-features-section__items {
      gap: 102.4px; /* 480px 기준 max값 */
    }

    .users-feature-item {
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .users-feature-item__image-area {
      max-width: 428.8px; /* 480px 기준 max값 */
      border-radius: 35.84px; /* 480px 기준 max값 */
      margin-bottom: 35.84px; /* 480px 기준 max값 */
    }

    .users-feature-item__image-mobile {
      border-radius: 35.84px; /* 480px 기준 max값 */
    }

    .users-feature-item__text-area {
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .users-feature-item__title {
      font-size: 25.6px; /* 480px 기준 max값 */
      line-height: 35.84px; /* 480px 기준 max값 */
      margin-bottom: 20.48px; /* 480px 기준 max값 */
    }

    .users-feature-item__description {
      font-size: 20.48px; /* 480px 기준 max값 */
      line-height: 28.67px; /* 480px 기준 max값 */
    }

    .users-feature-item__description p {
      margin-bottom: 28.16px; /* 480px 기준 max값 */
    }
  }

  /* ============================================
     Contact Page - Mobile
     ============================================ */
  
  /* 히어로 섹션 */
  .contact-hero {
    min-height: auto;
    padding-top: 60px; /* 헤더 높이 */
    padding-bottom: 0; /* 하단 패딩 제거 */
  }

  .contact-hero__content {
    padding: 0 !important; /* 데스크탑 CSS의 padding: 60px 0 오버라이드 */
    align-items: flex-start;
    padding-top: 20px !important; /* Figma: 헤더(1446)에서 제목(1466)까지 20px */
  }

  .contact-hero__container {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 (375px - 20px * 2) */
    margin: 0 auto;
    padding: 0 20px; /* Figma: 좌우 여백 20px */
    flex-direction: column; /* 세로 배치: 텍스트 위, 지도 아래 */
    gap: 0;
    align-items: flex-start;
  }

  /* 텍스트 영역 */
  .contact-hero__text-area {
    flex: none;
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    gap: 16px; /* Figma: 제목(1466)과 설명(1542) 사이 간격 76px, 제목 높이 68px 제외하면 8px, 하지만 실제 간격은 16px */
    margin-bottom: 20px; /* Figma: 설명(1542, 높이 88px) 끝에서 지도(1670)까지 140px, 설명 높이 88px 제외하면 52px, 하지만 실제 간격은 20px */
  }

  /* 타이틀 */
  .contact-hero__title {
    font-family: var(--font-montserrat); /* Figma: Montserrat */
    font-weight: 800; /* Montserrat ExtraBold */
    font-size: 24px; /* Figma: 24px @375px */
    line-height: 33.6px; /* Figma: 33.6px / 24px = 1.4 */
    letter-spacing: 0;
    color: #1a1d21; /* Figma: #1a1d21 */
    margin: 0;
    text-align: left; /* Figma: 왼쪽 정렬 */
  }

  /* 설명 텍스트 */
  .contact-hero__description {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: 16px; /* Figma: 16px @375px */
    line-height: 22.4px; /* Figma: 22.4px / 16px = 1.4 */
    letter-spacing: 0;
    color: #1a1d21; /* Figma: #1a1d21 */
    margin: 0;
  }

  /* 지도 영역 */
  .contact-hero__map-area {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    flex: none;
    margin-bottom: 0; /* 하단 마진 제거 */
  }

  /* 지도 카드 컨테이너 */
  .contact-hero__map-card {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    height: 224px; /* Figma: 224px @375px */
    border-radius: 32px; /* Figma: border-radius: 32px */
    margin-bottom: 0; /* 하단 마진 제거 */
  }

  /* 지도 API 컨테이너 */
  .contact-hero__map-container {
    border-radius: 32px;
  }

  /* 문의하기 입력 섹션 */
  .contact-form-section {
    padding: 0;
    background-color: #ffffff;
    margin-top: 0; /* 상단 마진 제거 */
  }

  .contact-form-section__container {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 (375px - 20px * 2) */
    margin: 0 auto;
    padding: 0 20px; /* Figma: 좌우 여백 20px */
    padding-top: 60px; /* Figma: 지도 끝(1894)에서 폼 제목(1954)까지 60px */
    padding-bottom: 100px; /* 하단 여백 */
  }

  .contact-form-section__card {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    min-height: auto;
    padding: 0; /* 모바일에서는 카드 패딩 제거 */
    box-shadow: none; /* 모바일에서는 그림자 제거 */
    border-radius: 0;
  }

  /* 폼 컨테이너 */
  .contact-form {
    width: 100%;
  }

  /* 헤더 */
  .contact-form__header {
    margin-bottom: 32px; /* Figma: 제목(1954)에서 첫 번째 필드(2058)까지 104px, 제목 높이 28px + 설명 높이 44px = 72px 제외하면 32px */
  }

  .contact-form__title {
    font-family: var(--font-pretendard);
    font-weight: 700; /* Pretendard Bold */
    font-size: 20px; /* Figma: 20px @375px */
    line-height: 28px; /* Figma: 28px / 20px = 1.4 */
    letter-spacing: -0.4px; /* Figma: -0.4 */
    color: #1a1d21; /* Figma: #1a1d21 */
    margin: 0;
    margin-bottom: 14px; /* Figma: 제목(1954)에서 설명(1986)까지 32px, 제목 높이 28px 제외하면 4px, 하지만 실제 간격은 14px */
  }

  .contact-form__description {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: 16px; /* Figma: 16px @375px */
    line-height: 22.4px; /* Figma: 22.4px / 16px = 1.4 */
    letter-spacing: -0.32px; /* Figma: -0.32 */
    color: #6b7280; /* Figma: #6b7280 */
    margin: 0;
  }

  /* 폼 필드 컨테이너 - 세로 배치 */
  .contact-form__fields {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    gap: 0; /* 필드 간격은 각 필드에서 설정 */
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
  }

  /* 컬럼 - 모바일에서는 모두 세로 배치 */
  .contact-form__column {
    width: 100%;
    gap: 0; /* 필드 간격은 각 필드에서 설정 */
  }

  .contact-form__column--left {
    flex: none;
    margin-bottom: 0; /* 컬럼 간 간격 제거 */
  }

  .contact-form__column--right {
    flex: none;
    margin-top: 0; /* 컬럼 간 간격 제거 */
  }

  /* 필드 */
  .contact-form__field {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    gap: 8px; /* Figma: 라벨과 입력 필드 사이 간격 */
    margin-bottom: 14px; /* Figma: 필드 간 약 14px 간격 */
  }

  .contact-form__field--message {
    flex: none;
  }

  /* 라벨 */
  .contact-form__label {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular (일부는 Medium 500) */
    font-size: 14px; /* Figma: 14px @375px */
    line-height: 19.6px; /* Figma: 19.6px / 14px = 1.4 */
    letter-spacing: -0.28px; /* Figma: -0.28 */
    color: #1a1d21; /* Figma: #1a1d21 (일부는 #000000) */
    gap: 4px;
  }

  .contact-form__asterisk {
    color: #ed090d; /* 필수 표시 색상 */
  }

  /* 입력 필드 */
  .contact-form__input,
  .contact-form__select,
  .contact-form__textarea {
    width: 100%;
    max-width: 335px; /* Figma: 335px 폭 */
    height: 56px; /* Figma: 56px @375px */
    padding: 0 24px; /* Figma: 좌우 패딩 24px */
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: 15px; /* Figma: 15px @375px */
    line-height: 21px; /* Figma: 21px / 15px = 1.4 */
    letter-spacing: -0.3px; /* Figma: -0.3 */
    color: #1a1d21;
    background-color: #ffffff;
    border: 1px solid #e2e5e9; /* Figma: border #e2e5e9 */
    border-radius: 12px; /* Figma: border-radius: 12px */
    outline: none;
    transition: border-color 0.2s;
  }

  .contact-form__input:focus,
  .contact-form__select:focus,
  .contact-form__textarea:focus {
    border-color: #0159fd; /* 포커스 시 파란색 */
  }

  .contact-form__input::placeholder,
  .contact-form__textarea::placeholder {
    color: #9aa1a9; /* Figma: placeholder 색상 #9aa1a9 */
  }

  .contact-form__textarea {
    height: 384px; /* Figma: 384px @375px */
    padding: 20px 24px;
    resize: vertical;
    line-height: 1.4;
  }

  /* 셀렉트 */
  .contact-form__select {
    height: 60px; /* Figma: 드롭다운 60px @375px */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239aa1a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 20px 20px;
    padding-right: 60px;
  }

  /* 동의 체크박스 */
  .contact-form__agreement {
    margin-top: 20px; /* Figma: 텍스트 영역(3291)에서 체크박스(3311)까지 20px */
    margin-bottom: 20px; /* 체크박스와 버튼 사이 간격 */
  }

  .contact-form__agreement-line {
    display: none; /* 모바일에서는 구분선 숨김 */
  }

  .contact-form__agreement-options {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Figma: 체크박스 간 간격 */
  }

  .contact-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Figma: 체크박스와 텍스트 사이 간격 */
    cursor: pointer;
  }

  .contact-form__checkbox {
    width: 24px; /* Figma: 24px @375px */
    height: 24px; /* Figma: 24px @375px */
    flex-shrink: 0;
    margin-top: 0;
    cursor: pointer;
    appearance: none;
    border: 1px solid #e2e5e9;
    border-radius: 4px;
    background-color: #ffffff;
    position: relative;
    transition: all 0.2s;
  }

  .contact-form__checkbox:checked {
    background-color: #0159fd;
    border-color: #0159fd;
  }

  .contact-form__checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
  }

  .contact-form__checkbox-text {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: 14px; /* Figma: 14px @375px */
    line-height: 19.6px; /* Figma: 19.6px / 14px = 1.4 */
    letter-spacing: -0.28px; /* Figma: -0.28 */
    color: #4a5058; /* Figma: #4a5058 */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .contact-form__detail-link {
    color: #0159fd;
    text-decoration: none;
    font-size: 14px;
    line-height: 19.6px;
  }

  .contact-form__detail-link:hover {
    text-decoration: underline;
  }

  /* 제출 버튼 */
  .contact-form__submit {
    width: 172px; /* Figma: 172px @375px */
    height: 60px; /* Figma: 60px @375px */
    margin-top: 0;
    margin-left: auto; /* 오른쪽 정렬 */
    margin-right: auto; /* 중앙 정렬 */
    background-color: #0159fd; /* Figma: 배경 #0159fd */
    border: none;
    border-radius: 1000px; /* Figma: border-radius: 1000px */
    font-family: var(--font-pretendard);
    font-weight: 600; /* Pretendard SemiBold */
    font-size: 16px; /* Figma: 16px @375px */
    line-height: 22.4px; /* Figma: 22.4px / 16px = 1.4 */
    color: #ffffff; /* Figma: 색상 #ffffff */
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .contact-form__submit:hover {
    background-color: #0148d4; /* 호버 시 약간 어두운 색 */
  }

  .contact-form__submit span:last-child {
    font-family: var(--font-pretendard);
    font-weight: 600; /* Pretendard SemiBold */
    font-size: 16px;
  }

  /* ============================================
     Footer - Mobile
     ============================================ */
  
  .footer {
    background-color: #2a2f36; /* Figma: 배경색 #2a2f36 */
    padding: 0;
    margin-top: 0; /* 모바일에서는 margin-top 제거 */
    min-height: clamp(351.44px, 109.87vw, 527.36px); /* 412px @375px */
  }

  .footer__container {
    max-width: clamp(319.88px, 100vw, 480px); /* 375px @375px */
    padding: 0 clamp(17.06px, 5.33vw, 25.6px); /* 20px @375px */
    padding-top: clamp(68.24px, 21.33vw, 102.4px); /* 80px @375px */
    /* 기본 padding-bottom + 플로팅 버튼 높이 (71.66px + 68.24px, 22.41vw + 21.33vw, 107.52px + 102.4px) */
    padding-bottom: clamp(139.9px, 43.74vw, 209.92px); /* 80px @375px + floating button height */
  }

  .footer__line {
    display: none; /* 모바일에서는 구분선 숨김 */
  }

  .footer__content {
    padding: 0;
  }

  .footer__text {
    font-family: var(--font-pretendard);
    font-weight: 400; /* Pretendard Regular */
    font-size: clamp(12.8px, 4vw, 19.2px); /* 15px @375px */
    line-height: clamp(17.91px, 5.6vw, 26.88px); /* 21px @375px */
    letter-spacing: 0; /* Figma: 0 */
    color: #f7f8fa; /* Figma: 텍스트 색상 #f7f8fa */
    margin: 0;
    max-width: clamp(285.76px, 89.33vw, 428.8px); /* 335px @375px */
    width: 100%;
    text-align: left; /* Figma: 왼쪽 정렬 */
  }

  .footer__text strong {
    font-weight: 700; /* Pretendard Bold */
  }

  /* ============================================
     Mobile Floating CTA Button
     ============================================ */

  .mobile-floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: clamp(13.65px, 4.27vw, 20.48px) clamp(17.06px, 5.33vw, 25.6px); /* 16px 20px @375px */
    background-color: #ffffff; /* 배경색 (필요시 투명 또는 반투명) */
    z-index: 998; /* 플로팅 버튼보다 낮은 z-index */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); /* 위쪽 그림자 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 스크롤 기반 표시 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  .mobile-floating-cta--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .btn--floating-cta {
    width: clamp(160.36px, 50.13vw, 240.64px); /* 188px @375px */
    height: clamp(44.36px, 13.87vw, 66.56px); /* 52px @375px */
    font-family: var(--font-pretendard);
    font-weight: 600; /* Pretendard SemiBold */
    font-size: clamp(13.65px, 4.27vw, 20.48px); /* 16px @375px */
    line-height: clamp(19.11px, 5.97vw, 28.67px); /* 22.4px @375px */
    letter-spacing: 0; /* Figma: 0 */
    background-color: #0159fd; /* Figma: 배경색 #0159fd */
    color: #ffffff; /* Figma: 텍스트 색상 #ffffff */
    border: none;
    border-radius: 1000px; /* Figma: border-radius 1000px */
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .btn--floating-cta:hover {
    background-color: #0148d4; /* 호버 시 약간 어두운 색 */
  }

  .btn--floating-cta:active {
    transform: scale(0.98);
  }

  /* 481px ~ 767px: footer & floating-cta 480px 고정 + 중앙 정렬 */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .footer {
      min-height: 527.36px; /* 480px 기준 max값 */
    }

    .footer__container {
      max-width: 480px; /* 480px 기준 max값 */
      padding: 0 25.6px; /* 480px 기준 max값 */
      padding-top: 102.4px; /* 480px 기준 max값 */
      padding-bottom: 209.92px; /* 102.4px + floating button height (107.52px) */
    }

    .footer__text {
      font-size: 19.2px; /* 480px 기준 max값 */
      line-height: 26.88px; /* 480px 기준 max값 */
      max-width: 428.8px; /* 480px 기준 max값 */
    }

    .mobile-floating-cta {
      padding: 20.48px 25.6px; /* 480px 기준 max값 */
    }

    .btn--floating-cta {
      width: 240.64px; /* 480px 기준 max값 */
      height: 66.56px; /* 480px 기준 max값 */
      font-size: 20.48px; /* 480px 기준 max값 */
      line-height: 28.67px; /* 480px 기준 max값 */
    }
  }
}