/* Mobile First - 375px 기준 */

/* High DPI optimization */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

body {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Section Base Styles */
.section {
  width: 375px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 375px auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
  -webkit-filter: contrast(1.02);
  filter: contrast(1.02);
}

/* JS-driven responsive classes for image switching */
body.tablet .section,
body.desktop .section {
  width: 100% !important;
}

/* Hero Section */
.hero {
  background-color: #fff;
  background-image: url("../images/mobile/hero_section.jpg");
  width: 375px;
  height: 668px;
  position: relative;
}

/* Mobile hero button */
.hero-cta-button {
  display: block;
  position: absolute;
  left: 104px;
  top: 321px;
  width: 169px;
  height: 50px;
  cursor: pointer;
  z-index: 10;
}

.hero-cta-button:hover {
  opacity: 0.8;
}

/* Partner Strip */
.partner-strip {
  background-color: #f2f6f9;
  background-image: url("../images/mobile/partner_strip.jpg");
  width: 375px;
  height: 176px;
  display: flex;
  padding: 24px 16px;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Intro Section */
.intro {
  background-color: #fff;
  background-image: url("../images/mobile/intro_section.jpg");
  width: 375px;
  height: 362px;
  display: flex;
  padding: 64px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
}

/* KPI Section */
.kpi {
  background-color: #171923;
  background-image: url("../images/mobile/KPI_section.jpg");
  width: 375px;
  height: 388px;
  display: flex;
  padding: 64px 24px 100px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
}

/* Feature Section 01 */
.feature-01 {
  background-color: #fff;
  background-image: url("../images/mobile/feature_section_01.jpg");
  width: 375px;
  height: 1352px;
  display: flex;
  padding: 80px 24px;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  box-sizing: border-box;
}

/* Feature Section 02 */
.feature-02 {
  background-color: #171923;
  background-image: url("../images/mobile/feature_section_02.jpg");
  width: 375px;
  height: 1636px;
  display: flex;
  padding: 80px 24px;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  box-sizing: border-box;
}

/* Final CTA Section */
.final-cta {
  background: url("../images/mobile/final_CTA_section.jpg"),
    linear-gradient(90deg, #f5f5f5 34.67%, #e8e8e5 65%);
  background-size: 375px auto, 100% 100%;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  width: 375px;
  height: 567px;
  position: relative;
}

/* Mobile final-cta button */
.final-cta-button {
  display: block;
  position: absolute;
  left: 104px;
  top: 478px;
  width: 169px;
  height: 49px;
  cursor: pointer;
  z-index: 10;
}

.final-cta-button:hover {
  opacity: 0.8;
}

/* Footer */
.footer {
  background-color: #fff;
  background-image: url("../images/mobile/footer.jpg");
  background-size: 375px auto, 100% 100%;
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  width: 375px;
  height: 324px;
  margin: 0 auto;
}

/* Tablet: 376px ~ 1279px */
@media (min-width: 376px) and (max-width: 1279px) {
  /* Hero Section - tablet 이미지 사용 */
  .hero {
    width: 100%;
    height: 41.75rem;
    margin: 0 auto;
    background-image: url("../images/tablet/t_contents.png"),
      url("../images/tablet/t_image_hero_01.jpg");
    background-size: 23.4375rem 28rem, 79.9375rem 24.375rem;
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    position: relative;
  }

  /* Adjust button positions for centered t_contents.png in tablet view */
  .hero-cta-button {
    display: block;
    position: absolute;
    left: calc(
      50% - 156.5px + 103px
    ); /* Center of 375px t_contents.png, then offset */
    top: 200px;
    width: 107px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
  }

  .hero-cta-button:hover {
    opacity: 0.8;
  }

  .final-cta-button {
    display: block;
    left: calc(50% - 187.5px + 104px); /* Center, then offset for 375px image */
  }

  /* Partner Strip - tablet 이미지 사용, 375px 고정 */
  .partner-strip {
    width: 100%;
    background-image: url("../images/tablet/partner_strip.jpg");
    background-size: 375px auto;
    background-position: center top;
    justify-content: center;
  }

  /* Intro Section - tablet 이미지 사용, 375px 고정 */
  .intro {
    width: 100%;
    background-image: url("../images/tablet/intro_section.jpg");
    background-size: 375px auto;
    background-position: center top;
    align-items: center;
  }

  /* KPI Section - tablet 이미지 사용, 375px 고정 */
  .kpi {
    width: 100%;
    background-image: url("../images/tablet/KPI_section.jpg");
    background-size: 375px auto;
    background-position: center top;
  }

  /* Feature Section 01 - tablet 이미지 사용, 375px 고정 */
  .feature-01 {
    width: 100%;
    background-image: url("../images/tablet/feature_section_01.jpg");
    background-size: 375px auto;
    background-position: center top;
  }

  /* Feature Section 02 - tablet 이미지 사용, 375px 고정 */
  .feature-02 {
    width: 100%;
    background-image: url("../images/tablet/feature_section_02.jpg");
    background-size: 375px auto;
    background-position: center top;
  }

  /* Final CTA Section - tablet 이미지 사용, 375px 고정 */
  .final-cta {
    width: 100%;
    height: 567px;
    background: url("../images/tablet/final_CTA_section.jpg"),
      linear-gradient(90deg, #f5f5f5 34.67%, #e8e8e5 65%);
    background-size: 375px auto, 100% 100%;
    background-position: center top, center center;
    background-repeat: no-repeat, no-repeat;
    position: relative;
  }

  /* Footer - tablet 이미지 사용, 375px 고정 */
  .footer {
    width: 100%;
    background-image: url("../images/tablet/footer.jpg");
    background-size: 375px auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* Desktop: min-width 1280px */
@media (min-width: 1280px) {
  /* Body background for wider screens */
  body {
    background-color: #fff;
  }

  /* Section wrapper styles for full-width backgrounds */
  #hero {
    background-color: #fff;
  }

  #partner {
    background-color: #fff;
  }

  #intro {
    background-color: #fff;
  }

  #kpi {
    background-color: #171923;
  }

  #feature-01 {
    background-color: #fff;
  }

  #feature-02 {
    background-color: #171923;
  }

  /* Section Base Styles for Desktop */
  .section {
    width: 100%;
    margin: 0 auto;
    background-size: 1280px auto;
  }

  /* Hero Section - desktop 이미지 사용 */
  .hero {
    width: 100%;
    height: 1259px;
    background-image: url("../images/desktop/hero_section.jpg");
    background-size: 1280px 1259px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
  }

  /* Hero CTA Button for desktop - 이미지맵 좌표 기반 */
  .hero-cta-button {
    display: block;
    position: absolute;
    left: calc(
      50% - 640px + 544px
    ); /* Center, then offset to match image coordinate */
    top: 506px;
    width: 190px;
    height: 57px;
    cursor: pointer;
    z-index: 10;
  }

  .hero-cta-button:hover {
    opacity: 0.8;
  }

  /* Partner Strip - desktop 이미지 사용 */
  .partner-strip {
    width: 100%;
    height: 200px;
    background-image: url("../images/desktop/partner_strip.jpg");
    background-size: 1280px 200px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* Intro Section - desktop 이미지 사용 */
  .intro {
    width: 100%;
    height: 744px;
    background-image: url("../images/desktop/intro_section.jpg");
    background-size: 1280px 744px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* KPI Section - desktop 이미지 사용 */
  .kpi {
    width: 100%;
    height: 355px;
    background-image: url("../images/desktop/KPI_section.jpg");
    background-size: 1280px 355px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* Feature Section 01 - desktop 이미지 사용 */
  .feature-01 {
    width: 100%;
    height: 1868px;
    background-image: url("../images/desktop/feature_section_01.jpg");
    background-size: 1280px 1868px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* Feature Section 02 - desktop 이미지 사용 */
  .feature-02 {
    width: 100%;
    height: 2168px;
    background-image: url("../images/desktop/feature_section_02.jpg");
    background-size: 1280px 2168px;
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* Final CTA Section - desktop 이미지 사용 */
  .final-cta {
    width: 100%;
    height: 400px;
    background: linear-gradient(90deg, #f5f5f5 34.67%, #e8e8e5 65%);
    position: relative;
  }

  .final-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1280px;
    height: 400px;
    background-image: url("../images/desktop/final_CTA_section.jpg");
    background-size: 1280px 400px;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
  }

  /* Final CTA Button for desktop - 이미지맵 좌표 기반 */
  .final-cta-button {
    display: block;
    position: absolute;
    left: calc(
      50% - 640px + 98px
    ); /* Center, then offset to match image coordinate */
    top: 228px;
    width: 190px;
    height: 59px;
    cursor: pointer;
    z-index: 20;
  }

  .final-cta-button:hover {
    opacity: 0.8;
  }

  /* Footer - desktop 이미지 사용 */
  .footer {
    width: 100%;
    height: 308px;
    margin: 0 auto;
    background-color: #fff;
    background-image: url("../images/desktop/footer.jpg");
    background-size: 1280px 308px;
    background-position: center top;
    background-repeat: no-repeat;
  }
}