/* OptionDropdown — 네이티브 <select> 대신 쓰는 커스텀 드롭다운.
   원래 상품상세 구매 바텀시트(.purchase-sheet) 안에서만 스코프해 쓰던 걸
   이메일 도메인 선택 등 다른 곳에서도 재사용하도록 컴포넌트 소유 CSS로 승격.
   펼침 목록은 문서 흐름에 자리를 차지하지 않도록 트리거 기준 절대 위치로 띄우고
   (예전엔 목록이 실제 레이아웃 높이를 차지해 열 때마다 아래 콘텐츠가 밀려 내려갔음),
   opacity/transform으로 열고 닫히는 트랜지션을 준다 */
.option-dropdown {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.option-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.option-dropdown.is-disabled .option-dropdown__trigger {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 펼침 상태 — Figma Option/BottomSheet(6901:32152): 컨테이너 전체가 1px #202020
   보더로 바뀌고, 목록이 트리거에 붙어 한 박스처럼 이어진다(트리거 하단 라운드 제거,
   목록은 상단 라운드 제거 + 상단 보더 없이 트리거 보더를 그대로 이어받음) */
.option-dropdown.is-open .option-dropdown__trigger {
  border-color: #202020;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.option-dropdown.is-open .option-dropdown__list {
  border-color: #202020;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.option-dropdown__placeholder {
  color: #9b9b9b;
}

.option-dropdown__value {
  color: #404040;
}

.option-dropdown__chevron {
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.option-dropdown.is-open .option-dropdown__chevron {
  transform: rotate(-90deg);
}

/* 트리거 바로 아래 떠 있는 목록 — 기본값은 살짝 위(-4px)·투명 상태로 숨겨두고
   is-open일 때만 제자리로 내려오며 나타나게 해서 여닫는 트랜지션을 만든다.
   position:absolute라 문서 흐름(레이아웃 밀림)에는 영향을 안 주지만, opacity/visibility만으로
   숨기면 실제 박스 크기(240px)는 계속 차지하고 있어서 — 바텀시트처럼 본문이 스크롤 가능한
   컨테이너 안에 있으면 이 안 보이는 240px 박스까지 scrollHeight에 잡혀 바텀시트가 닫힌
   상태에서도 실제보다 크게(또는 스크롤 가능하게) 계산되는 문제가 있었음.
   닫혀 있을 때 max-height:0 + overflow:hidden으로 박스 자체를 접어서 어떤 조상의
   스크롤 영역에도 잡히지 않게 하고, 열릴 때만 실제 높이로 펼쳐지도록 트랜지션한다. */
.option-dropdown__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.2s ease, opacity 0.15s ease, transform 0.15s ease, visibility 0.2s;
  scrollbar-width: none;
}

.option-dropdown__list::-webkit-scrollbar {
  display: none;
}

.option-dropdown.is-open .option-dropdown__list {
  max-height: 240px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* 바텀시트 안에서는 오버레이로 띄우지 않고 실제 레이아웃 공간을 차지하게 한다 —
   펼쳐지는 만큼 시트 자체가 늘어나며(하단 고정이라 위쪽 가장자리가 위로 올라오며) 펼쳐진다.
   페이지에 그냥 놓였을 때(오버레이)와 달리, 바텀시트 스크롤 영역 안에서는 이렇게 실제로
   자리를 차지해야 트리거 아래 다른 내용과 겹치지 않고, 화면 아래로 잘리지도 않는다. */
.option-dropdown--in-sheet .option-dropdown__list {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  box-shadow: none;
}

/* (펼침 목록이 트리거에 붙는 한 박스 구조라 in-sheet에서도 별도 간격 없음) */

.option-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 12px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}

.option-dropdown__item.is-disabled {
  color: #ababab;
  cursor: not-allowed;
}

.option-dropdown__item-note {
  flex-shrink: 0;
  margin-left: 12px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
}

/* 품절 옵션의 재입고 알림 칩 — Figma NoticeButton(6901:32209) 실측: 배경 #f0f4fe,
   radius 4, 아이콘-텍스트 gap 4px, 텍스트 12px/400/#3c56d6 */
.option-dropdown__restock-chip {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background-color: #f0f4fe;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3c56d6;
  cursor: pointer;
}