/* style-c3.css */

/* ===== SECTION 03 : 영상 / 구강스캐너 ===== */

.c3{
  background-color:#ffffff;
  padding:80px 0 100px;
  word-break: keep-all;
}

.c3__inner{
  width:min(1360px, 94%);      /* 헤더 / 다른 섹션과 동일한 폭 규칙 */
  margin:0 auto;
}

/* 상단 3D 영상 두 장 */
.c3__top-images{
  display:flex;
  justify-content:center;
  gap:32px;
  margin-bottom:56px;
}

.c3__img-box{
  flex:0 0 40%;           /* 두 개가 40%씩 (원하면 35~45%로 조정 가능) */
  max-width:540px;        /* 최대로는 380px 정도까지만 */
  aspect-ratio:16 / 9;    /* 가로세로 비율 고정 (필요하면 4/3 등으로 변경) */
  overflow:hidden;        /* 박스 밖으로 나가는 영상 부분은 잘라냄 */
  border-radius:4px;
}

.c3__img-box img{
  display:block;
  width:100%;
  height:auto;
}

/* 중앙 텍스트 영역 */
.c3__text-block{
  text-align:center;
  margin-bottom:56px;
  margin-top:100px;

}

.c3__divider{
  display:block;
  width:32px;
  height:3px;
  margin:0 auto 18px;
  background-color:#1c425f;    /* 포인트 컬러 */
}

.c3__text{
  font-size:35px;
  line-height:1.5;
  letter-spacing:-0.6px;
  color:#111;
  font-weight:400;
}

.c3__text strong{
  font-weight:700;
}

/* 겹치는 컨테이너 */
.c3__bottom-images{
  position: relative;          /* 자식 absolute 기준 */
  width: 720px;                /* 전체 겹치는 영역 폭 (필요시 조절) */
  max-width: 100%;
  height: 450px;               /* 이미지 높이에 맞춰 조절 */
  margin: 0 auto;              /* 가운데 정렬 */
}

/* 각 이미지 공통 */
.c3__bottom-img{
  position: absolute;
  bottom: 0;
}

/* 왼쪽(장비) 이미지 */
.c3__bottom-img--left{
  left: -70px;                     /* 왼쪽 기준 */
  z-index: 2;                  /* 앞쪽에 보이게 하고 싶으면 2로 */
}
.c3__bottom-img--left img{
  max-width: 480px;            /* 장비 이미지 크기 조절 */
  height: auto;
}

/* 오른쪽(파노라마) 이미지 */
.c3__bottom-img--right{
  left: 270px;                 /* 얼마나 겹칠지에 따라 조절 (예: 180~260px 사이) */
  z-index: 1;                  /* 뒤쪽 */
}
.c3__bottom-img--right img{
  max-width: 460px;            /* 파노라마 크기 조절 */
  height: auto;
}


/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .c3{
    padding:64px 0 80px;
  }
  .c3__text{
    font-size:18px;
  }
  .c3__bottom-img--left img{
    max-width:320px;
  }
  .c3__bottom-img--right img{
    max-width:440px;
  }
}


@media (max-width:900px){
  .c3-inner {
    width: 100%;}
}




@media (max-width:768px){
  .c3__top-images{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .c3__img-box{
    max-width:420px;
    width:100%;
  }
  .c3__bottom-images{
    flex-direction:column;
    align-items:center;
    gap:18px;
    height: 222px;
  }
  .c3__bottom-img--left img,
  .c3__bottom-img--right img{
    max-width:235px;
  }
  .c3__text{
    font-size:17px;
  }
}

@media (max-width:480px){
  .c3{
    padding:48px 0 64px;
  }
  .c3__text{
    font-size:16px;
  }


  .c3__bottom-img--left {
    left: -12%;
  }

  .c3__bottom-img--right{
    left: 20%;
  }
}





/* 박스 안에 들어가는 이미지/영상 공통 처리 */
.c3__img-box img,
.c3__img-box video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;      /* 박스를 꽉 채우고 넘치는 부분은 크롭 */
}

/* 영상만 조금 더 확대하고 싶다면 (선택사항) */
.c3__img-box video{
  transform-origin:center;
}






/* === C3: 하단 겹치는 이미지 가로 오버플로우 방지 === */
.c3__bottom-images{
  position: relative;
  width: 100%;            /* ✅ 부모 너비에 맞춤 */
  max-width: 720px;       /* 기존 디자인 최대폭은 그대로 유지 */
  margin: 0 auto;
  overflow: hidden;       /* 컨테이너 밖으로는 잘라냄 (안전장치) */
}

/* 왼쪽 장비 이미지: 컨테이너 왼쪽에 딱 붙이기 */
.c3__bottom-img--left{
  left: 0;                /* ✅ -70px → 0 으로 */
}

/* 오른쪽 파노라마 이미지: 컨테이너 오른쪽에 딱 붙이기 */
.c3__bottom-img--right{
  left: auto;             /* ✅ 기존 left:270px 무시 */
  right: 0;               /* 오른쪽 끝에 붙임 */
}



@media (max-width: 480px){

  .c3__bottom-images{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;         /* ✅ 작은 화면에서는 특히 강하게 잘라줌 */
  }

  .c3__bottom-img--left{
    left: 0;                  /* ✅ -12% 대신 0으로 처리 */
  }

  .c3__bottom-img--right{
    left: auto;
    right: 0;                 /* ✅ 20% 대신 오른쪽 끝에 붙이기 */
  }

}