/* ==========================================================================
   main-mobile.css
   메인 페이지 모바일 반응형 — Figma "00_Main" 402px 기준 (node 330:2801)
   main.css 의 기존 768px 블록을 Figma 스펙으로 정밀 보정한다.
   반드시 main.css / main-fullpage.css 뒤에 로드 (동일 명시도, 나중 규칙 우선).
   ========================================================================== */
@media (max-width: 768px) {
  /* ----- 공통: 배지 12px ----- */
  .regen-hero__badge-text,
  .sec1-badge-text,
  .sec2-badge-text,
  .sec3-badge-text,
  .sec4-badge-text {
    font-size: 0.75rem; /* 12px */
  }

  /* Navbar 모바일 스타일은 css/common.css 로 통일 이동 (전 페이지 공통) */

  /* ======================================================================
     Section 1 — Hero  (세로 민들레 배경 / 카피 하단 좌측 정렬 / 52px)
     ====================================================================== */
  /* 모바일: 풀페이지 대신 고정 높이 슬라이더 — 두 슬라이드 크로스 모션을 그대로 유지
     (데스크탑 base 의 .hero-slider/.hero-slide 절대배치·등장 애니메이션을 모바일에서도 사용) */
  .hero-section {
    height: 100vh;
    height: 100svh;
    min-height: 34rem;
  }
  /* 슬라이드별 모바일 배경 (가독성 그라데이션 + 이미지) */
  .hero-section__bg--1 {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 100%),
      url("../assets/images/main/hero-bg-mobile.jpg");
    background-position: center top;
  }
  .hero-section__bg--2 {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 100%),
      url("../assets/images/main/hero3-bg-mobile.jpg");
    background-position: center top;
  }
  /* 카피를 화면 하단에 앵커 (슬라이드 높이를 꽉 채움) */
  .hero-section__inner {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero-content {
    position: static;
    width: 100%;
    max-width: none;
    padding: 0 0.9375rem 3rem; /* 좌우 15px, 하단 48px */
    text-align: left;
  }
  .hero-content__headline {
    max-width: none;
    font-size: clamp(2.5rem, 13vw, 3.25rem); /* 52px @402 */
    line-height: 1.3;
  }
  .hero-content__desc {
    max-width: none;
    font-size: 1.125rem; /* 18px */
    font-weight: 400; /* Figma 모바일: 본문은 볼드 아님 */
    line-height: 1.4;
    margin-top: 0.75rem; /* 12px */
  }
  /* Scroll Down 버튼: Figma 모바일에는 없음 → 숨김 */
  .hero-scroll {
    display: none;
  }

  /* 슬라이드 모션의 translateX(±)가 가로 스크롤을 만들지 않도록 클립
     (요소는 화면 밖에서 슬라이드-인 되는 효과로 유지됨).
     → 가로 오버플로로 고정 navbar 토글이 밀리던 현상 해결. */
  .page-main {
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* ======================================================================
     메인 섹션 시간차 등장 모션 (모바일 — 풀페이지 대체)
     데스크탑은 body.fp-on 으로 .v-section.active 시 재생하지만, 모바일은
     풀페이지가 없으므로 main-fullpage.js 가 body.main-aos 부착 + 스크롤 진입
     요소에 .in-view 부착 → 아래 규칙으로 서브페이지처럼 시간차 등장.
     body.main-aos 는 JS 동작(비 reduced-motion) 시에만 붙으므로
     no-JS / reduced-motion 환경에서는 콘텐츠가 그대로 노출된다. */
  body.main-aos .motion-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: var(--d, 0ms);
  }
  body.main-aos .motion-scale-up {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: var(--d, 0ms);
  }
  body.main-aos .motion-slide-right {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: var(--d, 0ms);
  }
  body.main-aos .motion-slide-left {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: var(--d, 0ms);
  }
  body.main-aos .motion-fade-up.in-view,
  body.main-aos .motion-scale-up.in-view,
  body.main-aos .motion-slide-right.in-view,
  body.main-aos .motion-slide-left.in-view {
    opacity: 1;
    transform: none;
  }

  /* ======================================================================
     Section 2 — Regen Hero  (title 56px / 3줄 유지 / 그린 알약 버튼)
     ====================================================================== */
  .regen-hero {
    min-height: 0; /* 100vh 강제 해제 → Figma 콘텐츠 높이(≈825px) */
    padding-block: 5rem; /* 80px */
  }
  .regen-hero__container {
    padding: 5.625rem 0.9375rem; /* 90px 15px */
    gap: 1.5rem; /* 24px */
  }
  .regen-hero__title {
    font-size: clamp(2.5rem, 13.5vw, 3.5rem); /* 56px @402 */
    line-height: 1.2;
  }
  .regen-hero__title br {
    display: inline; /* Figma 모바일은 3줄 줄바꿈 유지 */
  }
  .regen-hero__desc {
    font-size: 1.125rem; /* 18px */
  }
  .regen-hero__button {
    width: auto;       /* Figma: 컴팩트 알약 (full-width 아님) */
    max-width: none;
    min-height: 44px;
  }

  /* ======================================================================
     Section 3 — Tech / EV  (title 42px / step title 38px)
     ====================================================================== */
  .sec1-content {
    padding: 5rem 0.9375rem; /* 80px 15px */
  }
  .sec1-inner {
    gap: 2.375rem; /* 38px */
  }
  .sec1-heading {
    gap: 1.875rem; /* 30px */
  }
  .sec1-title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px @402 */
    line-height: 1.19;
  }
  .sec1-subtitle {
    font-size: 1.125rem; /* 18px */
  }
  .sec1-steps {
    gap: 0; /* Figma: 스텝 카드가 맞붙음 */
  }
  .sec1-step {
    padding: 1.5625rem 0.5625rem; /* 25px 9px */
  }
  .sec1-step-icon {
    width: 4.5rem;  /* 72px */
    height: 4.5rem;
  }
  .sec1-step-title {
    font-size: 2.375rem; /* 38px */
  }
  .sec1-step-desc {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
  }

  /* ======================================================================
     Section 4 — Business  (title 42px / row title 32px / 정사각 이미지)
     ====================================================================== */
  .sec2-content {
    padding: 5rem 0; /* 80px top/bottom, 좌우 0 (이미지 풀블리드) */
    gap: 2.5rem; /* 40px */
  }
  .sec2-heading {
    padding-inline: 0.9375rem; /* 15px */
    box-sizing: border-box;
  }
  .sec2-title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px */
  }
  .sec2-subtitle {
    font-size: 1.125rem; /* 18px */
  }
  .sec2-rows {
    gap: 0;
  }
  .sec2-row,
  .sec2-row--right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* 이미지: 풀블리드(402x400). order 초기화 → DOM 순서대로 배치되어
     Figma 지그재그(1행 이미지↑, 2행 이미지↓) 재현. */
  .sec2-media,
  .sec2-media--left,
  .sec2-media--right {
    order: 0;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 402 / 400;
    box-shadow: none;
  }
  /* Figma D자 라운드: 1행 오른쪽 반원, 2행 왼쪽 반원 (큰 반경 → 항상 반원) */
  .sec2-media--left {
    border-radius: 0 37.5rem 37.5rem 0;
  }
  .sec2-media--right {
    border-radius: 37.5rem 0 0 37.5rem;
  }
  /* 텍스트: 1행 좌측 / 2행 우측 정렬 (Figma), 패딩 48/15 */
  .sec2-text--left {
    padding: 3rem 0.9375rem; /* 48px 15px */
    align-items: flex-start;
    text-align: left;
    gap: 0.9375rem; /* 15px */
  }
  .sec2-text--right {
    padding: 3rem 0.9375rem;
    align-items: flex-end;
    text-align: right;
    gap: 0.9375rem;
  }
  /* row 타이틀: accent(빨강) 작게 + main(회색) 크고 굵게 — 색/굵기는 데스크탑 유지 */
  .sec2-row-title-accent {
    font-size: 1.5rem; /* 24px */
  }
  .sec2-row-title-main {
    font-size: 2rem; /* 32px */
  }
  .sec2-row-desc {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
  }

  /* ======================================================================
     Section 5 — News  (title 42px / card title 24px / 카드 세로 스택)
     ====================================================================== */
  .sec3-content {
    padding: 5rem 0.9375rem; /* 80px 15px */
    align-items: stretch;
  }
  .sec3-heading {
    margin-bottom: 3rem; /* 48px */
  }
  .sec3-title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px */
  }
  .sec3-subtitle {
    font-size: 1.125rem; /* 18px */
  }
  /* Figma 모바일: 가로 스크롤 캐러셀 (300px 테두리 카드, gap 24) */
  .sec3-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem; /* 24px */
    max-width: none;
    border-top: none;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .sec3-card {
    flex: 0 0 18.75rem; /* 300px 고정 */
    width: 18.75rem;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
    scroll-snap-align: start;
  }
  .sec3-card-media {
    flex: none;
    width: 100%;
    aspect-ratio: 298 / 240; /* ≈ 5/4 */
  }
  .sec3-card-media--logo {
    aspect-ratio: 298 / 240;
  }
  .sec3-card-body {
    padding: 2rem 1.5rem; /* 32px 24px */
    gap: 0.75rem; /* 12px */
  }
  .sec3-card-title {
    font-size: 1.5rem; /* 24px */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .sec3-card-desc {
    font-size: 1.125rem; /* 18px */
  }
  .sec3-card-time {
    padding: 1.25rem 0 0; /* 20px top */
  }
  /* more 버튼: Figma 모바일에는 없음 (프레임 밖 데스크탑 잔재) → 숨김 */
  .sec3-more {
    display: none;
  }

  /* ======================================================================
     Section 6 — Exosome  (원형 → 가로 알약 / caption 38px)
     ====================================================================== */
  .sec4-content {
    min-height: 0; /* 50rem 강제 해제 → Figma 콘텐츠 높이 */
    padding: 0;
  }
  .sec4-container {
    gap: 3rem; /* 48px */
    padding: 5rem 0.9375rem; /* 80px 15px */
  }
  .sec4-title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px */
  }
  .sec4-subtitle {
    font-size: 1.125rem; /* 18px */
  }
  /* 아이템 리스트: 세로 스택, gap 32 */
  .sec4-card-area {
    gap: 1.875rem; /* 30px */
  }
  .sec4-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem; /* 32px */
    padding: 0;
  }
  /* 아이템: 가로 알약 (아이콘 좌 + 텍스트) */
  .sec4-item {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem; /* 24px */
    width: 100%;
    height: auto;
    min-height: 9.4375rem; /* 151px */
    padding: 2rem 1.5rem 2rem 2.5rem; /* 32 / 24 / 32 / 40 */
    border-radius: 9999px; /* pill */
  }
  .sec4-item-icon {
    flex: 0 0 auto;
    width: 4rem; /* 64px */
    height: 4rem;
  }
  .sec4-item-text {
    text-align: left;
    font-size: 1.5rem; /* 24px */
    line-height: 1.2;
  }
  .sec4-caption {
    text-align: center;
    font-size: 2.375rem; /* 38px */
    line-height: 1.18;
  }

  /* ======================================================================
     Section 7 — CTA  (title 42px / 흰 알약 버튼)
     ====================================================================== */
  .cta-section {
    padding: 5rem 0.9375rem; /* 80px 15px */
  }
  .cta-section__title {
    font-size: clamp(2rem, 10.5vw, 2.625rem); /* 42px */
  }
  .cta-section__subtitle {
    font-size: 1.125rem; /* 18px */
  }
  .cta-section__button {
    min-height: 44px;
    padding: 1.25rem 3rem; /* 20px 48px */
  }
}