/* 벤더 aurora.css가 화면마다 다른 조상 클래스(.order-confirm__btn-group .btn,
   .cash-receipt__btn-wrap .btn 등)에 height/border-radius/color를 이미 정의해둔 경우가
   많아(명시도 0,2,0), 전역 단일 클래스(.btn--dark/.btn--caution, 명시도 0,1,0)로는
   화면마다 우연히 그 조상 클래스명과 겹칠 때마다 계속 밀렸다(주문완료/결제실패/
   현금영수증 모달에서 실제로 발생, 매번 화면별로 재정의해야 했음) — 이 컴포넌트
   자신의 클래스를 두 번 걸어(.eoshin-btn.eoshin-btn) 명시도를 0,2,0으로 맞춰서
   어떤 화면의 어떤 wrapper 클래스에서도 더 이상 안 깨지게 한다(로드 순서상 이
   파일이 벤더 CSS보다 항상 나중에 로드되므로 동률이면 이 파일이 이긴다) */
.eoshin-btn.eoshin-btn {
  height: 52px;
  border: 0;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
}

.eoshin-btn.eoshin-btn--dark {
  background-color: #f0f4fe;
  color: #3c56d6;
  font-weight: 500;
}

.eoshin-btn.eoshin-btn--caution {
  background-color: #4a69ea;
  color: #ffffff;
  font-weight: 600;
}

.eoshin-btn.eoshin-btn:disabled {
  background-color: #e6e6e6;
  color: #ababab;
  cursor: default;
}

/* 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;
}