/* ==========================================
   [MAIN RESPONSIVE] 통합 모바일 대응 시스템
   ========================================== */

/* 1. 태블릿 (1200px 이하) */
@media (max-width: 1200px) {
  .main-about-slide,
  .main-bffs-container,
  .main-biz-container {
    padding-left: 60px;
    padding-right: 60px;
  }
  .main-about-controls {
    display: none !important;
  } /* 데스크탑 버튼 제거 */

  .main-home-title {
    font-size: 70px;
    letter-spacing: -1.75px;
  }

  .main-home-buyfuture-text img {
    height: 86.331px;
  }
}

/* 2. 모바일 (768px 이하) - 버튼 제거 및 투명 배경 최적화 */
@media (max-width: 768px) {
  /* --- 공통 섹션 규격 --- */
  .slide {
    height: 100vh;
  }
  .main-section {
    /* padding: 100px 0 !important; */
    /* height: auto; */
    /* height: 100vh; */
    display: flex !important;
    background: transparent !important;
  }
  .main-home-title {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  .main-home-store-btn {
    gap: 6.4px;
  }

  .main-home-store-btn a img {
    height: 44.536px;
  }

  .main-home-buyfuture-text img {
    height: 32.844px;
  }
  #main-intro {
    /* 초기 상태: 배경은 보이되 내용은 숨김 */
    background: url("../img/mainIntroBg.png") no-repeat center center !important;
    background-size: cover !important;
    min-height: 200px !important; /* 높이가 없으면 이미지가 안 보입니다 */
    opacity: 1 !important; /* 섹션 자체는 보여야 배경이 나옵니다 */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
  }

  /* JS가 fadeUp 클래스를 붙였을 때 실행될 애니메이션 */
  #main-intro.fadeUp {
    /* 필요한 경우 섹션 전체가 스윽 나타나는 효과 */
    animation: fadeIn 1.2s ease-out forwards;
  }
  .main-intro-subtitle {
    font-size: 24px;
    letter-spacing: -0.6px;
  }

  .main-intro-title {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  /* --- 3. ABOUT (이미지 강조 & 화살표 완전 제거) --- */
  #main-about {
    overflow: visible !important;
    display: block !important;
    background: #fff;
  }

  .main-about-container {
    position: sticky !important;
    top: 80 !important;
    height: calc(-80px + 100vh) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* 1. 상단 여백을 완전히 제거하거나 최소화(10px~20px) 합니다. */
    padding-top: 0 !important;

    /* 2. 내부 요소들을 화면 정중앙에 모아줍니다. (중요) */
    justify-content: center !important;

    overflow: hidden !important;
    background: transparent !important;
  }

  .main-about-track {
    width: 100%;
    height: 100%;
    position: relative;
    /* 3. 트랙 내부에서도 여백이 생기지 않도록 초기화 합니다. */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 텍스트 영역 */
  /* .main-about-txt {
    position: relative !important;
    z-index: 50 !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
  } */

  .main-about-slide.active .main-about-txt {
    opacity: 1;
    transform: translateY(0);
  }
  .main-about-txt {
    width: 100%;
    padding-top: 0px;
    text-align: center;
  }
  .main-about-txt h2 {
    font-size: 16px !important;
    color: #f00 !important;
    margin-bottom: 5px !important;
    text-align: center;
  }
  .main-about-txt h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    color: #111 !important;
    text-align: center;
  }
  .main-about-txt p {
    font-size: 14px !important;
    color: #666 !important;
    margin-top: 8px !important;
    /* padding: 0 20px; */
    text-align: center;
  }

  /* 이미지 영역: 배경색 없이 투명하게 */
  .main-about-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
    margin: 0 !important;
    background: transparent !important; /* 배경 제거 */
    border: none !important;
  }

  .main-about-img img {
    width: 270px !important;
    height: auto !important;
    background: transparent !important;
    filter: drop-shadow(
      0 15px 30px rgba(0, 0, 0, 0.15)
    ); /* 피사체에만 그림자 */
  }

  .main-about-slide {
    /* height: auto; */
    /* top: 0px; */
    padding: 0px 16px;
    flex-direction: column;
    align-items: center;
  }

  /* 슬라이드 상태 제어 */
  .main-about-slide.active .main-about-img {
    opacity: 1;
    top: 65%;
    transform: translate(-50%, -50%) translateY(20px) scale(1.1) !important;
    z-index: 30;
  }

  .main-about-slide.prev .main-about-img {
    opacity: 0.35;
    transform: translate(-95%, -45%) scale(0.85) !important;
    filter: blur(2px);
    z-index: 10;
    display: flex !important;
  }

  .main-about-slide.next .main-about-img {
    opacity: 0.35;
    transform: translate(-5%, -45%) scale(0.85) !important;
    filter: blur(2px);
    z-index: 10;
    display: flex !important;
  }

  /* ✅ 버튼 완전 제거 (데스크탑/모바일 공통) */
  #btnPrev,
  #btnNext,
  .main-about-controls,
  .main-about-controls-mobile {
    display: none !important;
  }

  /* --- 4, 5, 6 섹션 간격 --- */
  .main-bffs-container,
  .main-biz-container-mobile,
  .main-contact-container {
    padding: 50px 20px !important;
    text-align: center;
  }

  .main-bffs-text {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .main-bffs-text h2 {
    font-size: 18px;
    letter-spacing: -0.18px;
  }
  .main-bffs-text h3 {
    margin-top: 2px;
    font-size: 24px;
    letter-spacing: -0.24px;
  }
  .main-bffs-text p {
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: -0.14px;
  }
  .main-bffs-img img {
    display: none;
  }
  .main-bffs-img-mobile img {
    display: flex;
    width: 240px;
    margin: 56px 0;
  }

  .main-biz-container {
    display: none;
  }

  .main-biz-container-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 16px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .main-biz-container-mobile img {
    height: 681px;
    width: auto;
    max-width: none;
    position: relative;
  }

  .main-biz-text {
    margin-bottom: 24px;
    text-align: center;
  }

  .main-biz-text h2 {
    font-size: 18px;
    letter-spacing: -0.18px;
  }

  .main-biz-text h3,
  .main-biz-text-second h3 {
    font-size: 24px;
    letter-spacing: -0.24px;
  }

  .main-biz-text p,
  .main-biz-text-second p {
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  .main-biz-text-second {
    padding: 100px 0 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main-biz-view-detail {
    width: fit-content;
    margin-top: 24px;
    padding: 6px 20px 6px 28px;
    border-radius: 9999px;
    background: #e60000;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.4px;
  }

  .main-biz-view-detail a {
    color: #fff;
  }

  .main-contact-container {
    padding: 40px 0;
  }

  .main-contact-container img {
    width: 150px;
  }

  .main-contact-title {
    font-size: 24px;
    letter-spacing: -0.24px;
  }

  .main-contact-subtitle {
    font-size: 14px;
    letter-spacing: -0.14px;
  }
}

/* 3. 초소형 기기 */
@media (max-width: 480px) {
  .main-about-img img {
    width: 240px !important;
  }
}