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

/* 배경 딤 — 모든 바텀시트 공통 톤. 열림/닫힘 시 페이드.
   닫히는 동안(opacity가 1→0으로 트랜지션 되는 250ms) pointer-events가 계속 auto라
   화면 전체를 덮은 채 클릭을 가로채고 있었음 — 닫기를 누른 직후 같은 트리거를 다시
   누르거나 다른 요소를 탭하면 그 클릭이 이 보이지도 않는 딤에 먹혀 아무 반응이
   없어 보이는 문제(바텀시트 인터랙션이 간헐적으로 안 먹히는 원인)였음.
   is-visible일 때만 클릭을 받도록 해서 닫히기 시작하는 즉시 아래 요소가 클릭을 받게 함 */
.bottom-sheet__dim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.bottom-sheet__dim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 바텀시트 본체 — Figma BottomSheet/Variation 공통.
   닫힌 상태(translateY(100%))에서 열린 상태(translateY(0))로 슬라이드업 —
   드래그로 닫을 때는 BottomSheet.tsx가 인라인 style로 transition을 끄고
   손가락을 그대로 따라가게 함. 딤과 동일한 이유로 닫히는 중(슬라이드다운 애니메이션
   0.3s)에도 화면에 걸쳐 있는 동안은 클릭을 가로챌 수 있어 pointer-events를 맞춤 */
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: 100%;
  background-color: #ffffff;
  /* Figma BottomSheet/Variation — 상단 radius 12 */
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom-sheet.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* PC 레이아웃에서 .portal 등 다른 모달과 동일하게 뷰포트 중앙(501~1000px)/.site
   우측 정렬(1001px~) 규칙을 따름 — 안 맞추면 실제 콘텐츠 열과 어긋나 보임.
   딤(.bottom-sheet__dim)은 시트 패널과 별개의 형제 엘리먼트라 패널만 좁혀서는
   안 되고 딤도 똑같이 좁혀야 PC에서 배너 영역까지 화면 전체를 덮지 않음.
   가로 중앙정렬(translateX)과 슬라이드업(translateY)을 한 transform에 같이 명시 */
@media (min-width: 501px) {
  .bottom-sheet {
    left: 50%;
    max-width: 500px;
    transform: translateX(-50%) translateY(100%);
  }

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

  .bottom-sheet__dim {
    left: 50%;
    right: auto;
    width: 500px;
    transform: translateX(-50%);
  }
}

@media (min-width: 1001px) {
  .bottom-sheet {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    max-width: var(--pc-content-width);
    transform: translateY(100%);
  }

  .bottom-sheet.is-visible {
    transform: translateY(0);
  }

  .bottom-sheet__dim {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    width: var(--pc-content-width);
    transform: none;
  }
}

/* 헤더/드래그핸들/타이틀 — Figma BottomSheetHeader(CT-003/CL-006 공통 실측):
   패딩 16/24/16, 핸들 #D3D3D3 + 핸들-타이틀 간격 20, 타이틀 18px/600/lh24/-0.01em.
   (기존엔 ShareBottomSheet만 로컬로 이 값을 맞추고 있었음 — 공용 셸로 승격) */
.bottom-sheet__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 16px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.bottom-sheet__drag-handle {
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background-color: #d3d3d3;
  margin-bottom: 20px;
}

.bottom-sheet__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* 선택 트리거 — Figma Bar/FilterBar > SortButton (라벨 #404040/500) */
.select-bottom-sheet__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  background-color: #fafafa;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  white-space: nowrap;
}

.select-bottom-sheet__trigger-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

/* 폼 필드형 트리거 variant — 주문서 배송요청사항/1:1문의·상품문의 유형/클레임 사유처럼
   페이지 CSS가 트리거를 40px+ 필드로 다시 그리는 곳은 Figma 쉐브런이 24px(정렬용 32px
   pill 트리거는 16px 유지). SVG 속성(16)은 CSS width/height가 이겨서 크기만 커진다 */
.select-bottom-sheet__trigger.board-form__type-selector .select-bottom-sheet__trigger-chevron,
.select-bottom-sheet__trigger.product-inquiry-form__type .select-bottom-sheet__trigger-chevron,
.select-bottom-sheet__trigger.order-sheet__delivery-memo-trigger .select-bottom-sheet__trigger-chevron,
.claim__reason .select-bottom-sheet__trigger .select-bottom-sheet__trigger-chevron {
  width: 24px;
  height: 24px;
}

/* 딤/시트 본체/헤더(드래그핸들+타이틀)/PC 반응형은 @shared/BottomSheet 공통 스타일 사용 */

/* 옵션 목록 — Figma RadioOptionSection pad 12/24/20/24, 옵션 간 gap 16 */
.select-bottom-sheet__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 24px 20px;
  margin: 0;
  list-style: none;
}

/* 선택 안 된 옵션은 회색, 선택된 옵션만 검정 — Figma General/RadioOption 스펙
   (라디오-라벨 gap 8, 라벨 14px/500) */
.select-bottom-sheet__option {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.select-bottom-sheet__option.is-selected {
  color: #1a1a1a;
}

/* note(우측 보조 문구)를 오른쪽 끝으로 밀려면 버튼이 li 폭을 다 차지해야 한다. note가
   없는 기존 호출부(정렬/클레임 사유)는 내용이 왼쪽 정렬 그대로여서 보이는 건 그대로고
   탭 영역만 행 전체로 넓어진다 */
.select-bottom-sheet__option {
  width: 100%;
  text-align: left;
}

.select-bottom-sheet__option-note {
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9b9b9b;
}

/* 품절/재고부족처럼 고를 수 없는 항목 — 선택된 것과 구분되게 더 흐리게 */
.select-bottom-sheet__option.is-disabled,
.select-bottom-sheet__option.is-disabled .select-bottom-sheet__option-note {
  color: #c4c4c4;
}

.select-bottom-sheet__option.is-disabled .select-bottom-sheet__radio {
  background-color: #f5f5f5;
}

.select-bottom-sheet__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}

/* Figma General/RadioButton(Selected=True) — 테두리가 아니라 원 전체를 채우고
   가운데 흰 원(10px)을 얹어 굵은 링처럼 보이게 하는 스타일 */
.select-bottom-sheet__radio.is-selected {
  background-color: #111111;
  border-color: #111111;
}

.select-bottom-sheet__radio.is-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fbfbfb;
  transform: translate(-50%, -50%);
}

/* CTA 영역 — Figma Button/CTAArea pad 12/16/12/16.
   (버튼 라벨 굵기는 Figma 프레임마다 표기가 달라 애매 — 현행 600 유지) */
.select-bottom-sheet__cta {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}

.select-bottom-sheet__cancel-btn,
.select-bottom-sheet__apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.select-bottom-sheet__cancel-btn {
  border: none;
  background-color: #f0f4fe;
  color: #3c56d6;
}

.select-bottom-sheet__apply-btn {
  border: none;
  background-color: #4a69ea;
  color: #ffffff;
}

/* 관리자가 1뎁스 카테고리에 등록한 상단 콘텐츠 영역.
   _category.css의 .category-content(CategoryBrowse 우측 콘텐츠 레이아웃 컨테이너,
   flex:1)와 이름이 같아 두 화면이 동시에 로드되면 로드 순서에 따라 서로 새어들 수
   있었음 — 이 위젯 전용 고유 클래스로 분리 */
.category-menu__content {
  background-color: #ffffff;
}

/* 에디터가 저장하는 배너 마크업은 <p><img ...><br></p> 형태 — 문단 기본 마진과 이미지
   원본 크기 그대로 렌더돼, 이미지가 화면 폭보다 작으면 옆·아래 여백이 남았다(벵에돔
   1277989 배너에서 실확인, 2026-08-14). 배너 이미지는 항상 화면 폭에 맞춰 채운다 */
.category-menu__content p {
  margin: 0;
}

.category-menu__content img {
  display: block;
  width: 100%;
  height: auto;
}

/* 상품타입 필터탭 — Figma Tab/FilterSection(5356:44226), 섹션 패딩 12/16/20 */
.category-filter-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 20px;
  overflow-x: auto;
  /* 가로 스크롤은 그대로 동작하되 스크롤바만 숨김 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-filter-tabs::-webkit-scrollbar {
  display: none;
}

.category-filter-tabs__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 32px;
  /* Figma pill 좌우 패딩 12 */
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #9b9b9b;
  text-decoration: none;
  white-space: nowrap;
}

.category-filter-tabs__item.is-active {
  border-color: transparent;
  background-color: #202020;
  color: #ffffff;
}

/* ── 카테고리 상세 페이지(/products?categoryNo=..) 상단 — Figma SA-000(5356:44213) ──
   /category 전체 그리드(3열, 사각 아이콘 — CategoryBrowse/_category.css)와는 다른
   스펙(5열, 원형 아이콘)이라 별도 클래스.
   Figma 상단에 "인기 어종" 같은 섹션 제목이 있는데, 이건 카테고리명을 그대로 반복하는 게
   아니라 카테고리별로 다른 마케팅 문구(브랜드관 등에서 뭐라고 쓸지 정의된 게 없음)라
   지어내지 않고 비워둠 — 문구가 정해지면 여기에 추가 */
/* Figma SeasonFishCategorySection — 섹션 패딩 상16/하20, 아이템 56px 고정폭 +
   가로 gap 12(행 중앙 정렬), 행 간 gap 4 */
.category-detail-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: 4px 12px;
  justify-content: center;
  padding: 16px 16px 20px;
}

.category-detail-icon-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.category-detail-icon-grid__img-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* 현재(또는 depth=1일 때 기본값으로) 보고 있는 항목 표시 — Figma 예시 아이콘에 있던 링 */
.category-detail-icon-grid__item.is-active .category-detail-icon-grid__img-wrap {
  border: 1px solid #202020;
}

.category-detail-icon-grid__img {
  width: 44px;
  height: 44px;
  object-fit: fill;
}

.category-detail-icon-grid__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #404040;
  text-align: center;
  word-break: keep-all;
  line-height: 1.3;
}

/* Figma는 활성 항목도 라벨 12px/400/#404040 그대로(아이콘 링만 다름) —
   활성 라벨 강조(700/#1a1a1a)는 Figma에 없는 값이라 제거함 */

/* 아이콘 그리드 ↔ 상품 목록 사이 구분 블록 — Figma General/Divider(5356:44225) */
.category-detail-divider {
  height: 8px;
  background-color: #fafafa;
}