/* ================================== 
   Pre-Select 화면 반응형 스타일 시작
   ================================== */

.pre-select {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
}

.pre-select .overlap-wrapper-3 {
  overflow: hidden;
  width: 100%;
  /* 동적 뷰포트 높이 사용 */
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

.pre-select .overlap-7 {
  position: relative;
  /* 동적 뷰포트 높이 사용 */
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  background-image: url(../img/title-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  margin: 0 auto; /* 가운데 정렬 */
}

.pre-select .pre-select-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.pre-select .overlap-group-4 {
  position: absolute;
  width: 100vw;
  /* 동적 뷰포트 높이 사용 */
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  left: 50%;
  top: 0;
  transform: translateX(-50%); /* 가운데 정렬 */
  max-width: none;
}

/* 제품명 이미지 - 화면 중앙 기준으로 배치 */
.pre-select .select-product-name-2 {
  position: absolute;
  width: clamp(130px, 44vw, 300px);
  height: clamp(115px, 18vh, 270px);
  top: clamp(40px, 6.5vh, 100px);
  left: 50%;
  margin-left: clamp(-110px, -22vw, -150px); /* 106px - 196.5px = -90.5px, 확장 */
  z-index: 10;
}

/* 제품명 텍스트 - 화면 중앙 기준으로 배치 */
.pre-select .product-name-6 {
  position: absolute;
  height: clamp(28px, 4.5vh, 65px);
  top: clamp(85px, 14vh, 200px);
  left: 50%;
  margin-left: clamp(-95px, -16.9vw, -125px); /* 133px - 196.5px = -63.5px, 확장 */
  text-shadow: 1px 2px 4px #9a000040;
  -webkit-text-stroke: 1px transparent;
  background-image: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.77) 0%,
      rgba(153, 153, 153, 0) 50%,
      rgba(255, 255, 255, 0.77) 100%
    );
  -webkit-background-clip: text;
  font-family: "Gotham Medium-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(14px, 4.6vw, 32px);
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1.1;
  z-index: 10;
  white-space: nowrap;
}

/* 선택 버튼 - 화면 중앙 기준으로 배치 */
.pre-select .select-button-2 {
  position: absolute;
  width: clamp(120px, 41.7vw, 280px);
  height: clamp(120px, 19vh, 280px);
  top: clamp(520px, 73.1vh, 950px);
  left: 50%;
  margin-left: clamp(-82px, -20.8vw, -140px); /* 115px - 196.5px = -81.5px, 확장 */
  object-fit: cover;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* .pre-select .select-button-2:hover {
  transform: scale(1.05);
} */

/* 배경 오버레이 */
.pre-select .background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #00000099;
  z-index: 1;
}

/* 컨텐츠 영역 - store-content와 유사하게 flexbox 사용 */
.pre-select .pre-select-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 동적 뷰포트 높이 사용 */
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  gap: clamp(60px, 12vw, 120px);
  padding: 20px 0;
  z-index: 5;
}

/* 쉐이드 선택 영역 - 이제 pre-select-content 내부에서 상대적으로 배치 */
.pre-select .element-shades {
  position: relative; /* absolute에서 relative로 변경 */
  width: clamp(280px, 88.3vw, 600px);
  height: clamp(400px, 59.4vh, 800px);
  z-index: 5;
}

/* 타이틀 영역 - element-shades 내부 상대 위치 */
.pre-select .title-wrapper {
  position: absolute;
  width: 100%; /* overlap-group-5와 동일하게 100% */
  height: clamp(60px, 9vh, 78.1px);
  top: 0;
  left: 0;
  border-radius: clamp(18px, 6.9vw, 45px);
  box-shadow: 0px 1px 0px #ffffffc4, inset 0px 0px 20px #ffffff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}

/* 타이틀 텍스트 */
.pre-select .title-2 {
  position: absolute;
  height: clamp(28px, 4.5vh, 65px);
  top: 35%;
  left: 50%; /* 가운데 정렬 */
  transform: translateX(-50%); /* 가운데 정렬 */
  text-shadow: 0px 4px 10px #9a000040;
  font-family: "Gotham Bold-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(24px, 12.2vw, 65px);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

/* 색상 박스 영역 */
.pre-select .colors-box {
  position: absolute;
  width: 100%; /* element-shades 너비에 맞춤 */
  height: clamp(320px, 48vh, 650px); /* 최대값 확장: 450px → 650px */
  top: clamp(75px, 11.3vh, 160px); /* 최대값 확장: 110px → 160px */
  left: 0;
}

/* 색상 그리드 배경 - 이미지 원본 비율 유지 */
.pre-select .overlap-group-5 {
  position: relative;
  width: 100%;
  /* height: 100%; 제거 - aspect-ratio가 높이를 자동 결정 */
  border-radius: clamp(15px, 4vw, 25px);
  overflow: hidden;
  
  /* 이미지 원본 비율 유지 (필요시 비율 조정) */
  aspect-ratio: 355/409; /* 가로 355px, 세로 409px 기준 - 실제 이미지 비율에 맞게 조정 */
  
  /* 이미지가 컨테이너를 완전히 채우도록 설정 */
  background-image: url(./img/rectangle-23.svg);
  background-size: 100% 100%; /* 비율 유지된 컨테이너를 완전히 채우기 */
  background-repeat: no-repeat;
  background-position: center center;
  
  box-sizing: border-box;
}

/* 색상 그리드 - 반응형 */
.pre-select .colors {
  position: relative; /* absolute에서 relative로 변경 */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(4px, 1.5vw, 10px); /* 간격 줄임 */
  padding: clamp(12px, 5vw, 30px); /* 패딩 늘림 */
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
}

/* 개별 쉐이드 아이템 - 정사각형 유지 (디스플레이 전용) */
.pre-select .shade-item {
  position: relative;
  width: clamp(32px, 12vw, 75px); /* 정사각형을 위해 크기 조정 */
  height: clamp(32px, 12vw, 75px); /* width와 동일하게 설정 */
  aspect-ratio: 1 / 1; /* 정사각형 강제 */
  background-color: #ffffff;
  border-radius: clamp(13px, 2.8vw, 18px); /* 피그마 기준 13px을 최소값으로 설정 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* cursor: pointer; */ /* 디스플레이 전용으로 비활성화 */
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* .pre-select .shade-item:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} */

.pre-select .shade-item.selected {
  /* transform: scale(1.15); */
  box-shadow: 0 0 0 2px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* 쉐이드 컨테이너 이미지 */
.pre-select .shade-container {
  width: 102%;
  height: 102%;
  border-radius: inherit;
  object-fit: cover;
}

/* 쉐이드 라벨 - 정 가운데 배치 */
.pre-select .shade-label {
  position: absolute;
  top: 40%; /* 정 가운데 */
  left: 50%; /* 정 가운데 */
  transform: translate(-50%, -50%); /* 정 가운데 정렬 */
  font-family: "Gotham Medium-Regular", Helvetica;
  font-weight: 550; /* 폰트 두껍게 변경 */
  color: #000000;
  font-size: clamp(8px, 3vw, 18px); /* 크기 조정 */
  text-align: center;
  letter-spacing: -0.01em;
  line-height: normal;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none; /* 클릭 방해 방지 */
}

/* 어두운 쉐이드 라벨들 - 흰색 텍스트 */
.pre-select .shade-label-5,
.pre-select .shade-label-6,
.pre-select .shade-label-10,
.pre-select .shade-label-11,
.pre-select .shade-label-15,
.pre-select .shade-label-16,
.pre-select .shade-label-20,
.pre-select .shade-label-21,
.pre-select .shade-label-25,
.pre-select .shade-label-26 {
  color: #ffffff;
}

/* 닫기 버튼 - 화면 중앙 기준으로 배치 */
.pre-select .close-button {
  position: relative; /* absolute에서 relative로 변경 */
  width: clamp(35px, 11.2vw, 70px);
  height: clamp(35px, 11.2vw, 70px); /* width와 동일한 단위로 정사각형 유지 */
  aspect-ratio: 1 / 1; /* 정사각형 비율 강제 */
  margin-top: 20px; /* 상단 여백 추가 */
  background-color: #c6515170;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: inset 8px 8px 12px #ffffff8c;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* flexbox에서 크기 유지 */
}

/* .pre-select .close-button:hover {
  background-color: #c65151aa;
  transform: scale(1.1);
} */

.pre-select .close-button:active {
  transform: scale(0.95);
}

/* X 아이콘 */
.pre-select .x {
  width: clamp(20px, 4vw, 42px); /* 최대값 확장: 30px → 42px */
  height: clamp(20px, 4vw, 42px); /* width와 동일한 단위로 정사각형 유지 */
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1/1;
  max-width: 100%;
  max-height: 100%;
}

/* ================================== 
   Pre-Select 화면 미디어 쿼리 시작
   ================================== */

/* 작은 높이 화면 (최대 700px) */
@media (max-height: 700px) {
  .pre-select .element-shades {
    width: clamp(260px, 85vw, 320px);
    height: clamp(360px, 55vh, 420px);
  }
  
  .pre-select .title-2 {
    font-size: clamp(20px, 8vw, 28px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pre-select .shade-item {
    width: clamp(25px, 13vw, 75px);
    height: clamp(25px, 13vw, 75px);
    aspect-ratio: 1 / 1;
  }
  
  .pre-select .shade-label {
    font-size: clamp(7px, 5vw, 15px);
  }
  
  .pre-select .close-button {
    width: clamp(30px, 13vw, 50px);
    height: clamp(30px, 13vw, 50px);
  }

  .pre-select .pre-select-content {
    gap: clamp(70px, 12vw, 160px);
  }
}

/* 중간 높이 화면 (701px ~ 1000px) */
@media (min-height: 701px) and (max-height: 1000px) {
  .pre-select .element-shades {
    width: clamp(320px, 88vw, 360px);
    height: clamp(460px, 58vh, 500px);
  }
  
  .pre-select .title-2 {
    font-size: clamp(28px, 9.5vw, 36px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pre-select .shade-item {
    width: clamp(35px, 13.5vw, 90px);
    height: clamp(35px, 13.5vw, 90px);
    aspect-ratio: 1 / 1;
  }
  
  .pre-select .shade-label {
    font-size: clamp(9px, 5vw, 15px);
  }
  
  .pre-select .close-button {
    width: clamp(40px, 13vw, 60px);
    height: clamp(40px, 13vw, 60px);
  }

  .pre-select .pre-select-content {
    gap: clamp(10px, 6vw, 120px);
  }
}

/* 큰 높이 화면 (1001px 이상) */
@media (min-height: 1001px) {
  .pre-select .element-shades {
    width: clamp(347px, 50vw, 600px);
    height: clamp(506px, 59vh, 800px);
  }
  
  .pre-select .title-2 {
    font-size: clamp(40px, 6vw, 65px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pre-select .colors {
    gap: clamp(6px, 1vw, 12px);
    padding: clamp(15px, 2vw, 25px);
  }
  
  .pre-select .shade-item {
    width: clamp(45px, 6.5vw, 75px);
    height: clamp(45px, 6.5vw, 75px);
    aspect-ratio: 1 / 1;
    border-radius: clamp(11px, 1.6vw, 18px);
  }
  
  .pre-select .shade-label {
    font-size: clamp(12px, 1.8vw, 18px);
  }
  
  .pre-select .close-button {
    width: clamp(44px, 13vw, 70px);
    height: clamp(44px, 13vw, 70px);
  }
}

/* 가로 모드 (높이가 낮은 화면) */
@media (max-height: 500px) and (orientation: landscape) {
  .pre-select .select-product-name-2 {
    width: clamp(100px, 25vw, 140px);
    height: clamp(90px, 20vh, 130px);
    top: clamp(20px, 4vh, 40px);
    left: 50%;
    margin-left: clamp(-70px, -12.5vw, -70px);
  }
  
  .pre-select .product-name-6 {
    top: clamp(60px, 12vh, 90px);
    left: 50%;
    margin-left: clamp(-60px, -10vw, -55px);
    font-size: clamp(12px, 3vh, 16px);
  }
  
  .pre-select .element-shades {
    width: clamp(200px, 50vw, 280px);
    height: clamp(280px, 60vh, 400px);
  }
  
  .pre-select .title-2 {
    font-size: clamp(16px, 4vh, 24px);
    top: clamp(8px, 2vh, 15px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pre-select .colors {
    gap: clamp(2px, 0.8vw, 5px);
    padding: clamp(8px, 2vw, 12px);
  }
  
  .pre-select .shade-item {
    width: clamp(20px, 5vw, 30px);
    height: clamp(20px, 5vw, 30px); /* width와 동일 */
    aspect-ratio: 1 / 1;
  }
  
  .pre-select .shade-label {
    font-size: clamp(6px, 1.2vh, 8px);
  }
  
  .pre-select .select-button-2 {
    width: clamp(80px, 20vw, 120px);
    height: clamp(80px, 18vh, 120px);
    top: clamp(300px, 65vh, 400px);
    left: 50%;
    margin-left: clamp(-50px, -10vw, -60px);
  }
  
  .pre-select .close-button {
    width: clamp(25px, 13vw, 70px);
    height: clamp(25px, 13vw, 70px); /* width와 동일한 단위로 정사각형 유지 */
  }
}

/* ================================== 
   Pre-Select 화면 반응형 스타일 끝
   ================================== */