/* BannerDot
 * Figma 노드: 5356:44479 (비활성), 5356:44480 (활성)
 * 배너 슬라이더 인디케이터 도트 버튼
 */

/* ── 기본 비활성 도트 — Figma #000000 a0.25 ── */
.banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    width 0.2s ease-in-out,
    border-radius 0.2s ease-in-out,
    background 0.2s ease-in-out,
    opacity 0.15s ease-in-out;
  flex-shrink: 0;
}

/* ── hover: 약간 어둡게 ── */
.banner-dot:hover {
  background: rgba(0, 0, 0, 0.45);
}

/* ── focus-visible: 키보드 포커스 링 ── */
.banner-dot:focus-visible {
  outline: 2px solid #101F3B;
  outline-offset: 2px;
}

/* ── active(눌림): 더 어둡게 ── */
.banner-dot:active {
  opacity: 0.7;
}

/* ── 활성 도트 (현재 슬라이드) — Figma General/Pagination: 비활성과 같은
   8×8 원형, fill #202020 (알약형 아님) ── */
.banner-dot--active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #202020;
  cursor: default;
}

/* 활성 도트는 hover 효과 제거 (이미 선택된 슬라이드) */
.banner-dot--active:hover {
  background: #202020;
  opacity: 1;
}

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

/* 인기 검색어 — Figma Bar/SectionHeaderBar(5236:30518) + RankSection(5236:30519).
   "OO시 업데이트" 캡션은 실제 API에 갱신 시각 데이터가 없어 뺐다(PopularSearchKeyword.tsx 참고) */
.popular-search-keyword {
  padding: 12px 16px 20px;
}

.popular-search-keyword__title {
  margin: 0 0 16px;
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #1a1a1a;
}

/* Figma RankContainer — 2열, 열 사이 28px. 5개씩 세로로 채운 뒤 다음 열로 넘어가야
   해서(1~5열/6~10열) grid-auto-flow:column + 행 5개 고정으로 배열한다 */
.popular-search-keyword__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 28px;
  row-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.popular-search-keyword__item button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.popular-search-keyword__rank {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
}

/* Figma 실측 — 1~3위 숫자만 브랜드 포인트 컬러로 강조 */
.popular-search-keyword__item:nth-child(-n + 3) .popular-search-keyword__rank {
  color: #3c56d6;
}

.popular-search-keyword__label {
  overflow: hidden;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #404040;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* PcOceanBackdrop — Figma "웹앱"(9553:43993, 1440×1080 시안). PC(1001px~) 전용.
   .pc-ocean__scene 이 시안 좌표계(1440×1080) 그대로이고, 컴포넌트가 뷰포트에 맞는
   cover 배율을 계산해 transform: scale 로 통째로 확대/축소한다(바닥 중앙 앵커).
   배경은 장식이므로 pointer-events 차단, 콘텐츠(.page__content.site)는 z-index로 위. */

.pc-ocean {
  display: none;
}

@media (min-width: 1001px) {
  .pc-ocean {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* 시안 하늘색 — export들이 이 색을 배경으로 굽고 나오므로 플랫 단색이어야 이음선이 없다 */
    background: #f3f3f6;
  }

  /* 새 배경이 콘텐츠를 덮지 않도록 앱 카드 컬럼을 위로 — Layout 마크업은 그대로 두고
     스택 순서만 정리한다 */
  .page .page__content.site {
    position: relative;
    z-index: 1;
  }

  /* 구 PC 좌측 패널(그라디언트+로고, Figma 5236:41112)은 이 배경으로 대체 —
     마크업/스타일은 남겨두고 표시만 끈다(롤백 시 이 줄만 제거) */
  .page .banner--left {
    visibility: hidden;
  }

  /* ── 시안 좌표계 장면 — left/scale은 컴포넌트가 앱 컬럼 기준으로 계산해 인라인 주입 ── */
  .pc-ocean__scene {
    position: absolute;
    bottom: 0;
    width: 1440px;
    height: 1080px;
    transform-origin: bottom left;
  }

  .pc-ocean__scene > img {
    position: absolute;
  }

  .pc-ocean__sun {
    left: 42px;
    top: 3px;
    width: 256px;
    height: 256px;
  }

  .pc-ocean__bird--1 {
    left: 254px;
    top: 53px;
    width: 21px;
    height: 47px;
  }

  .pc-ocean__bird--2 {
    left: 1350px;
    top: 200px;
    width: 45px;
    height: 46px;
  }

  /* 바다 물결 밴드 — 시안 벡터가 1920px로 프레임(1440)을 오른쪽으로 넘게 그려져 있다
     (넘치는 부분은 .pc-ocean overflow에서 잘림) */
  .pc-ocean__waves {
    left: 0;
    top: 741px;
    width: 1920px;
    height: 339px;
  }

  /* 왼쪽 물결·낚시꾼 크롭 — 시안 (0,560)~(788,1080) */
  .pc-ocean__ocean-left {
    left: 0;
    top: 560px;
    width: 788px;
    height: 520px;
  }

  /* ── 좌측 패널 — 앱 컬럼 왼쪽 67px(시안 갭)·세로 중앙. translateY/scale은 컴포넌트가
     인라인으로 주입(화면이 낮으면 sideScale < 1로 축소, 우측 끝·세로 중앙 고정) ── */
  .pc-ocean__side {
    position: absolute;
    right: calc(50% - 13px); /* = .site 왼쪽(50% + 80px)에서 67px 왼쪽 */
    top: 43.3%; /* 시안 패널 세로 중심(468/1080) — 1440×1080에서 시안과 동일 위치 */
    width: 493px;
    transform-origin: center right;
  }

  /* 슬로건 + 로고 — Figma Frame 48095973(패널 위, 우측 정렬, gap 24, 오른쪽 여백 67) */
  .pc-ocean__brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin: 0 67px 40px 0;
    height: 78px;
  }

  .pc-ocean__slogan {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    text-align: right;
    color: #000;
  }

  .pc-ocean__logo {
    display: block;
    width: 206px;
    height: auto;
  }

  /* 좌측 카드 2장 — 디자이너 export를 그대로 배치(투명 라운드 코너 포함).
     시안: QR 카드 150×478, 등급 안내 카드 343×478이 나란히 붙는다 */
  .pc-ocean__panel {
    display: flex;
    filter: drop-shadow(0 12px 40px rgba(31, 53, 87, 0.08));
  }

  .pc-ocean__qr-frame {
    width: 150px;
    height: 478px;
    flex-shrink: 0;
  }

  /* 카드 사이 세로 점선 — 시안 실측: #bcbcbc, 대시 4px/간격 2px, 위 18px·아래 8px 여백.
     두 카드가 150+343=493을 채우므로 폭을 차지하지 않게 겹쳐 그린다 */
  .pc-ocean__divider {
    width: 1px;
    margin: 18px 0 8px -1px;
    flex-shrink: 0;
    background: repeating-linear-gradient(180deg, #bcbcbc 0 4px, transparent 4px 6px);
  }

  .pc-ocean__grade-section {
    width: 343px;
    height: 478px;
    flex-shrink: 0;
  }
}

/* Figma CL-007 Toast/Type — 다크 배경(#202020) + radius 12, 하단 고정.
   position:fixed는 뷰포트 기준이라 PC에서 .page__content.site(우측 --pc-content-width
   컬럼)가 아니라 화면 정중앙에 뜨는 문제가 있었음 — _productDetail.css의 .share-toast와
   동일한 3단 브레이크포인트로 콘텐츠 컬럼 폭/위치를 그대로 따라가게 함 */
/* 페이드+슬라이드업 인/아웃 — ToastProvider가 BottomSheet와 동일한 mount-hold 패턴으로
   is-visible 클래스를 붙였다 뗀다. 브레이크포인트마다 가로 정렬용 transform(translateX)이
   달라서, 닫힌 상태의 translateY(8px)를 각 브레이크포인트의 기존 transform에 이어붙이고
   is-visible에서 그 오프셋만 0으로 되돌린다(BottomSheet.css와 동일한 방식) */
.app-toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 90px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Figma Toast/Type — 높이 48 고정(좌우 16, 상하 0), fill #202020 a0.88 */
  padding: 0 16px;
  min-height: 48px;
  border-radius: 12px;
  background-color: rgba(32, 32, 32, 0.88);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 501px) {
  .app-toast {
    left: 50%;
    right: auto;
    width: calc(500px - 40px);
    transform: translateX(-50%) translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1001px) {
  .app-toast {
    left: auto;
    right: calc((100vw - 1000px) / 2 + 20px);
    width: calc(var(--pc-content-width) - 40px);
    transform: translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateY(0);
  }
}

.app-toast__content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Figma CL-007 — 찜(WishList) 변형만 아이콘-텍스트 gap 4(카트 변형은 8) */
.app-toast__content--like {
  gap: 4px;
}

.app-toast__message {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 액션("보러가기") — Figma 13px/400(메시지와 동일 굵기) */
.app-toast__action {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
}