.camera {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.camera .div-3 {
  overflow: hidden;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-height: 400px) {

.camera .overlap-2 {
  position: absolute;
  width: clamp(300px, 97.2vw, 382px); /* 382px → 화면 폭의 97.2% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
}

@media (min-height: 700px) {

.camera .overlap-2 {
  position: absolute;
  width: clamp(300px, 97.2vw, 382px); /* 382px → 화면 폭의 97.2% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
}

@media (min-height: 800px) {

.camera .overlap-2 {
  position: absolute;
  width: clamp(300px, 97.2vw, 382px); /* 382px → 화면 폭의 97.2% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
}

.camera .overlap-group-wrapper {
  position: absolute;
  width: clamp(300px, 97.2vw, 382px); /* 382px → 화면 폭의 97.2% */
  height: clamp(160px, 56vw, 220px); /* 220px → 화면 대비 비례 */
  top: 0;
  left: 0;
}

.camera .product-name-wrapper {
  position: relative;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(160px, 56vw, 220px); /* 220px → 화면 대비 비례 */
  background-image: url(./img/camera-product-name-1.png);
  background-size: 100% 100%;
}

.camera .product-name-2 {
  position: absolute;
  width: clamp(150px, 56.5vw, 222px); /* 222px → 화면 폭의 56.5% */
  height: clamp(30px, 12.7vw, 50px); /* 50px → 화면 대비 비례 */
  top: clamp(70px, 24.7vw, 97px); /* 97px → 화면 대비 비례 */
  left: clamp(50px, 18.6vw, 73px); /* 73px → 화면 대비 비례 */
  text-shadow: 1px 2px 4px #9a000040;
  font-family: "Gotham Medium-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(16px, 6.1vw, 24px); /* 24px → 화면 대비 비례 */
  text-align: center;
  letter-spacing: clamp(-0.9px, -0.31vw, -1.20px); /* -1.20px → 화면 대비 비례 */
  line-height: clamp(18px, 6.6vw, 26px); /* 26.0px → 화면 대비 비례 */
}

.camera .buttons-container {
  position: absolute;
  top: clamp(130px, 43.5vw, 171px); /* 171px → 화면 대비 비례 */
  left: 60%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(15px, 5.1vw, 20px); /* 20px → 화면 대비 비례 */
  align-items: center;
  justify-content: center;
}

.camera .camera-button {
  position: relative;
  width: clamp(80px, 27vw, 106px); /* 106px → 화면 폭의 27% */
  height: clamp(80px, 27vw, 106px); /* 106px → 화면 대비 비례 */
  background-color: #f4f4f4;
  border-radius: clamp(40px, 13.5vw, 52.96px); /* 52.96px → 화면 대비 비례 */
}

.camera .video-button {
  position: relative;
  width: clamp(50px, 16.5vw, 65px); /* 65px → 화면 폭의 16.5% */
  height: clamp(50px, 16.5vw, 65px); /* 65px → 화면 대비 비례 */
  background-color: #f4f4f4;
  border-radius: clamp(25px, 8.3vw, 32.46px); /* 32.46px → 화면 대비 비례 */
}

.camera .button-background {
  position: absolute;
  width: clamp(20px, 7.1vw, 28px); /* 28px → 화면 폭의 7.1% */
  height: clamp(15px, 5.1vw, 20px); /* 20px → 화면 대비 비례 */
  top: clamp(17px, 5.6vw, 22px); /* 22px → 화면 대비 비례 */
  left: clamp(11px, 3.8vw, 15px); /* 15px → 화면 대비 비례 */
  background-color: #ffceca;
  border-radius: clamp(2px, 0.8vw, 3px); /* 3px → 화면 대비 비례 */
  box-shadow: inset 0px 2px 2.3px #0000000d;
}

.camera .vector {
  position: absolute;
  width: clamp(5px, 1.8vw, 7px); /* 7px → 화면 폭의 1.8% */
  height: clamp(15px, 5.1vw, 20px); /* 20px → 화면 대비 비례 */
  top: clamp(17px, 5.6vw, 22px); /* 22px → 화면 대비 비례 */
  left: clamp(34px, 11.5vw, 45px); /* 45px → 화면 대비 비례 */
}

.camera .vertical-logo-2 {
  position: absolute;
  width: clamp(180px, 58.3vw, 229px); /* 229px → 화면 폭의 58.3% */
  height: clamp(25px, 7.9vw, 31px); /* 31px → 화면 대비 비례 */
  top: clamp(50px, 16vw, 63px); /* 63px → 화면 대비 비례 */
  left: clamp(60px, 20.9vw, 82px); /* 82px → 화면 대비 비례 */
  background-image: url(./img/logo-1.png);
  background-size: cover;
  background-position: 50% 50%;
}