/* ── 상품상세 탭 공통 하단 아코디언 — Figma Accordion/Group(7128:32766). 상품정보/
   리뷰/Q&A 세 탭 모두에서 탭 콘텐츠 아래·푸터 위에 동일하게 노출됨(상품판매 제공고시/
   반품·교환 기준/구매 시 주의사항). 이전엔 이 셋 다 열린 상태 목업이 없다고 보고
   구분선 없는 톤으로 만들었었는데, 이 노드를 보면 실제로는 각 항목(행/문단)마다
   아래쪽에 옅은 구분선(#e6e6e6)이 있고 아코디언 섹션 사이(제공고시↔반품교환기준 등)엔
   반대로 선이 없다 — 정확히 거꾸로였다 */
.product-content-policy-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 20px;
}

.product-content-policy-accordion .accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #404040;
  list-style: none;
  cursor: pointer;
  border-bottom: none;
}

/* details 기본 삼각형 마커 대신 Figma의 ChevronDown 아이콘만 노출 */
.product-content-policy-accordion .accordion__title::-webkit-details-marker,
.product-content-policy-accordion .accordion__title::marker {
  display: none;
  content: none;
}

/* 베이스 스킨(component.css)의 .accordion__title::after가 angle-r.png 배경이미지
   화살표를 별도로 그려서 직접 넣은 ChevronRightIcon과 겹쳐 보였음 — 제거 */
.product-content-policy-accordion .accordion__title::after {
  content: none;
  background: none;
}

.product-content-policy-accordion__chevron {
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.product-content-policy-accordion .accordion[open] .product-content-policy-accordion__chevron {
  transform: rotate(-90deg);
}

/* Accordion/Content 실측: 위 8px/아래 16px 패딩, 항목(행/문단) 사이 12px 간격.
   항목 자체는 아래쪽에 12px 패딩 + 1px #e6e6e6 구분선을 갖고, 마지막 항목만 선이 없다 */
.product-content-policy-accordion .accordion__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 16px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #1a1a1a;
  word-break: keep-all;
}

/* 가이드류(배송안내/반품·교환 기준/AS 안내) 본문 — 어드민 자유서식 HTML(한 줄짜리
   <p> 다수)이라, 제공고시처럼 행마다 구분선을 그으면 줄마다 선이 그어져 심하게
   난잡해진다(QA 지적, 2026-08-14). Figma의 해당 펼침 변형(7128:32921)도 제공고시
   InfoRow 컴포넌트에 기본 라벨이 방치된 미완성 상태라 따를 수 없음 — 구분선 없는
   본문 블록(13/400/#404040, 줄 간 6px)으로 정리한다. 제공고시(.product-content-policy-info)
   행 구분선 구조는 그대로 유지 */
.product-content-policy-accordion .accordion__items .editor {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #404040;
}

/* 이 가이드 문구(반품·교환 기준/구매 시 주의사항)는 병합업체가 워드프로세서에서
   붙여넣은 자유서식 HTML이라 <p style="line-height:150%">·<span style="font-size:12px;
   font-family:'맑은 고딕'">처럼 인라인 스타일이 그대로 박혀있다 — 인라인 스타일은
   외부 스타일시트보다 항상 우선하므로 !important 없이는 절대 못 이긴다(Purchase.css의
   .purchase-sheet .selected-values도 동일 이유로 !important 사용 중) */
.product-content-policy-accordion .accordion__items .editor p,
.product-content-policy-accordion .accordion__items .editor p * {
  font-family: Pretendard, sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

.product-content-policy-accordion .accordion__items .editor p {
  margin: 0;
}

.product-content-policy-accordion .accordion__items .editor p + p {
  margin-top: 6px;
}

/* 내용 없는 문단(어드민이 줄 띄우기용으로 넣은 빈 <p>)이 행처럼 자리를 차지하지 않게 —
   &nbsp;만 든 문단은 TSX(stripEmptyParagraphs)에서 제거한다 */
.product-content-policy-accordion .accordion__items .editor p:empty {
  display: none;
}

/* 상품판매 제공고시 — Figma(Accordion/Content, 385:1056)는 한 행 안에서 라벨(14px/500)이
   위, 값(13px/400)이 그 아래 줄에 쌓이는 구조다(좌우로 나란히 배치되는 표가 아님).
   행 사이엔 위와 동일하게 12px 패딩 + 구분선, 마지막 행만 선 없음 */
.product-content-policy-info {
  display: contents;
}

.product-content-policy-info__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e6e6;
}

.product-content-policy-info__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.product-content-policy-info__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #404040;
  word-break: keep-all;
}

.product-content-policy-info__value {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  margin-left: 0;
  color: #1a1a1a;
  word-break: keep-all;
}

/**
 * Swiper 8.4.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 30, 2023
 */

@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}
.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
/* 상단 메인 이미지 슬라이더 — 전역 .thumb-item__media(_layout.css, Figma
   Card/ProductCard용 8px 라운드+#fafafa 배경)가 상품 카드가 아닌 이 풀블리드
   히어로 이미지에도 그대로 적용되고 있었음. 여기서만 취소 */
.thumb-DETAIL .thumb-item__media {
  border-radius: 0;
  background-color: transparent;
}

/* 배경 딤 — 모든 바텀시트 공통 톤. 열림/닫힘 시 페이드.
   닫히는 동안(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;
}

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

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

.form-button-group {
  display: flex;
  gap: 8px;
}

.form-button-group .btn {
  flex: 1;
  width: auto;
  height: 52px;
  border-radius: 8px;
}

/* 상품 재입고 알림 신청 — Figma PD-015(6901:32404).
   벤더 aurora.css가 하필 이 기능이 쓰는 클래스명 전부(.restock-notification,
   .restock-notification__modal, .restock-notification-form__* 등)에 대해 자체 구 스킨
   기본 구현을 통째로 갖고 있어서, 이 파일이 생기기 전까지는 그 구 스킨이 그대로
   노출되고 있었음(체크박스/입력창/칩뿐 아니라 모달 자체 padding/여백까지). 아래에서
   발견되는 대로 하나씩 무력화하며 Figma 실측값으로 다시 그린다 */

/* 벤더 .restock-notification{padding:20px}이 각 섹션이 이미 갖는 16px 패딩 위에
   추가로 20px를 더 얹어서 전부 이중 여백이 생기고 있었음 */
.restock-notification {
  padding: 0;
}

/* 벤더 .restock-notification__modal{padding:20px;margin-bottom:74px}가 모달을 감싼
   컨테이너 자체에 20px 패딩을 줘서, 그 안의 .title-modal__content(폭 100%/최소 375px)가
   실제 뷰포트보다 40px 더 넓어져 오른쪽으로 밀려나고 가로 스크롤이 생기던 원인.
   푸터 여백(margin-bottom:74px)도 이 화면엔 별도 고정 하단바가 없어 불필요한 빈
   공간만 만듦 — 둘 다 제거 */
.restock-notification__modal {
  padding: 0;
  margin-bottom: 0;
}

.restock-notification-form {
  display: flex;
  flex-direction: column;
}

/* ── 섹션 타이틀 공통(상품명/옵션/품절 옵션 리스트/신청자명/휴대폰번호) —
   Figma SectionTitleContatiner: 16px SemiBold, 좌우 16px, 위 16px ── */
.restock-notification-form__sold-out-option__section-title,
.restock-notification-form__label {
  display: block;
  padding: 16px 16px 0;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 벤더 CSS가 이 정확한 클래스명(.restock-notification-form__label)에 구 스킨 가로배치
   흔적(width:70px, flex-shrink:0, display:flex)을 이미 갖고 있어서, 위에서 display만
   block으로 되돌려도 width가 그대로 남아 "신청자명" 라벨이 70px 폭에 끼여 줄바꿈되고
   있었음 — 명시적으로 리셋 */
.restock-notification-form__label {
  width: auto;
  flex-shrink: initial;
}

/* 벤더 .restock-notification-form__sold-out-option{width/height:100%;padding:20px 0}가
   위/아래 20px 패딩을 추가로 얹어서 "상품명" 타이틀 위쪽이 16+20=36px로 이중 여백 */
.restock-notification-form__sold-out-option {
  width: auto;
  height: auto;
  padding: 0;
}

/* ── 상품명/단일 옵션 칩 — Figma ProductNameChip(bg #fafafa, radius 8, 가운데 정렬) ──
   벤더가 같은 클래스명에 width/height:100%를 줘서 부모 높이만큼 늘어나 있었음 */
.restock-notification-form__sold-out-option__product-name {
  width: auto;
  height: auto;
  margin: 8px 16px 16px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 8px;
  text-align: center;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #404040;
}

/* ── 품절 옵션이 여러 개일 때의 체크박스 리스트 — Figma OptionList(padding 16, gap 8) ── */
.restock-notification-form__sold-out-option__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 16px;
}

/* ── 신청자 정보 입력 — Figma InputSection ──
   벤더 .restock-notification-form__applicant-info{gap:12px;padding:20px 0}과
   .restock-notification-form__item{gap:20px}이 각 입력 필드 자체 여백 위에
   추가로 여백을 얹고 있어서 전부 0으로 리셋하고 각 요소 자신의 패딩만 남긴다 */
.restock-notification-form__applicant-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.restock-notification-form__item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.restock-notification-form__input-wrap {
  flex: none;
  padding: 4px 16px 16px;
}

.restock-notification-form__input-wrap .text-field {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background-color: #ffffff;
}

.restock-notification-form__input-wrap .text-field input {
  width: 100%;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
}

.restock-notification-form__input-wrap .text-field input::placeholder {
  color: #c2c2c2;
}

/* ── 체크박스(품절 옵션 선택 / 개인정보 동의 공통) — Figma General/CheckBox(20x20 원형).
   원형/기본 색상은 _sharedComponents.css로 이전. 벤더 <Checkbox>가 label/children을 안
   받으면 .check-radio__label이 아니라 바깥 .form-check__label을 형제로 렌더링하므로
   (회원정보수정 등과 다른 구조) :has()로 체크 여부에 따라 바깥 라벨 색을 바꾼다 —
   _layout.css .text-field:has(input:disabled)와 동일한 패턴 */
.restock-notification-form .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* sold-out 옵션 리스트는 flex 행 안에서 아이콘이 찌그러지지 않게 flex-shrink만 별도 지정 */
.restock-notification-form .check-radio__ico {
  flex-shrink: 0;
}

/* 벤더가 품절 옵션 체크박스에만 별도로 더 구체적인(클래스 3~4개) 규칙을 갖고 있어서,
   체크 시 배경이 검정(_sharedComponents.css와 통일된 색)이 아니라 브랜드 포인트컬러
   (파란색)로 새어나오고 있었음 — 명시도를 맞춰 다시 이김 */
.restock-notification-form__sold-out-option__list .form-check .check-radio__ico {
  background-color: #ffffff;
}

.restock-notification-form__sold-out-option__list .form-check input:checked ~ .check-radio__ico {
  background-color: #111111;
}

.restock-notification-form .form-check__label {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.restock-notification-form .form-check:has(input:checked) .form-check__label {
  color: #1a1a1a;
}

/* ── 개인정보 수집 동의 — Figma QnACautionSection(padding 16/20) ── */
.restock-notification-form__agreement {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

/* 벤더 CSS가 이 클래스명에 이미 background/max-height/overflow-y/margin-top을
   심어놨음(Figma ListContainer 실측 높이 162px와 벤더 기본 max-height:160px가 거의
   일치 — 내용이 넘치면 스크롤되는 원래 설계로 보임, 그대로 유지). margin-top만
   부모(.restock-notification-form__agreement)의 gap:8px과 이중으로 겹쳐서 0으로 리셋 */
.restock-notification-form__agreement-content {
  margin-top: 0;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #404040;
  line-height: 18px;
}

.restock-notification-form__agreement-content p + p {
  margin-top: 4px;
}

/* ── 하단 CTA — 색상/radius는 style.css 전역 .btn--dark/.btn--caution을 따르고,
   버튼 배치(가로배치·간격·높이)는 @shared/FormButtonGroup을 그대로 쓰고
   여기선 이 모달 전용 여백만 지정 ── */
.restock-notification__btn-wrap {
  /* Figma Button/CTAArea padding: 12px 16px(상하 12/좌우 16) — 상하/좌우가 뒤바뀌어 있었음 */
  padding: 12px 16px;
}

/* 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에 이 입력 필드의 실제 목업이
   없어, 이 구매 바텀시트의 다른 입력 요소(QuantityChanger/OptionDropdown)와 같은 톤
   (14px/500, 보더 #e6e6e6/radius 8)으로 맞춘다. vertical=false(구버전 OptionQuantity)는
   라벨+입력을 한 줄로, vertical=true(OptionQuantityV2/사은품형 추가옵션)는 라벨을
   입력 위에 쌓는다 */
.text-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.text-option--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.text-option__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
}

.text-option__label em {
  font-style: normal;
  font-size: 13px;
  color: #ff272b;
}

.text-option__input {
  flex: 1;
}

.text-option__input input {
  height: 40px;
  padding: 0 12px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
}

.text-option__input ~ .character-counter__status {
  margin-top: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
}

/* 벤더가 현재 글자수 숫자에만 --point-color(몰 관리자가 바꿀 수 있는 색상)를 강제로
   입혀놔서, 어신샵 포인트컬러(파란색)가 그대로 새어나오고 있었음 — 위 부모 색을 그대로
   물려받게 리셋 */
.text-option__input ~ .character-counter__status .character-counter__count {
  color: inherit;
  font-weight: 400;
}

/* 구매 동의 아코디언 — Figma AgreementAccordion(7298:49638).
   벤더 aurora.css의 .order-sheet__terms{padding:20px} 기본값을 Figma 실측
   (pad 16/16/28, 상단 1px #E6E6E6 보더)으로 교체한다 */
.order-sheet__terms {
  display: block;
  padding: 16px 16px 28px;
  border-top: 1px solid #e6e6e6;
  background-color: #fff;
}

/* AgreementHeader — 좌측 마스터 체크 블록 + 우측 쉐브론 토글, gap 20 */
.order-sheet__terms-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* RadioHeadWrapper — 체크 행과 설명문이 gap 4인 세로 스택 */
.order-sheet__terms-master {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.order-sheet__terms-master-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #404040;
  text-align: left;
}

/* 설명문 — 체크박스(20px)+간격(8px)만큼 들여쓰기(Figma EmptySpace 28px) */
.order-sheet__terms-description {
  margin: 0;
  padding-left: 28px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #9b9b9b;
}

/* ChevronDown 24px — 공용 ChevronRightIcon을 90도 회전해 사용, 펼치면 위로 뒤집힘 */
.order-sheet__terms-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.order-sheet__terms-toggle svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.order-sheet__terms-toggle.is-open svg {
  transform: rotate(-90deg);
}

/* 원형 체크박스(20px) — 미체크: 흰 배경 + #E6E6E6 보더 / 체크: #111 배경 + 흰 체크 */
.order-sheet__terms-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  box-sizing: border-box;
}

.order-sheet__terms-checkbox.is-checked {
  border: none;
  background-color: #111111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cpath d=%27M3 8.5L6.5 12L13 4.5%27 stroke=%27%23ffffff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* AgreementList — 펼친 상태의 개별 약관 행, 행 간 gap 8, 헤더와 간격(Figma paddingTop 상당) */
.order-sheet__terms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.order-sheet__term-checker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-sheet__term-check-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #9b9b9b;
  text-align: left;
}

/* 약관 상세 — Figma는 밑줄 버튼이 아니라 우측 회색 텍스트 "상세보기"(12/400/#9B9B9B) */
.order-sheet__term-detail-btn {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #9b9b9b;
}

/* ── 상품상세 구매 영역 — Figma Button/CTAArea(5236:30980) + 구매 옵션 선택
   바텀시트(5236:31195) — 인라인으로 펼쳐지던 방식을 실제 바텀시트 모달로 교체 ── */

/* Figma Button/CTAArea는 fill #FFFFFF만 있고 상단 보더가 없음 — 벤더
   .purchase{border-top:1px solid var(--default-color)}가 남아있었음 */
.purchase {
  border-top: none;
}

.purchase__cart-trigger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Figma IconArea gap: 4px */
  gap: 4px;
  width: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.0015em;
  color: #404040;
  white-space: nowrap;
}

/* 찜하기 버튼 — Figma WishButton(5236:30980;366:4092)과 동일하게 장바구니 버튼과
   같은 세로(아이콘+라벨) 레이아웃/타이포로 맞춤. 베이스 스킨이 기본으로 두는 회색
   테두리 박스는 Figma에 없어서 제거 */
.purchase__like-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Figma IconArea gap: 4px */
  gap: 4px;
  width: 56px;
  flex-shrink: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.0015em;
  color: #404040;
  white-space: nowrap;
  border: none !important;
  padding: 4px 0 !important;
}

/* 베이스 스킨이 span 태그 자체에 border/padding/border-radius를 전역으로 걸어놔서
   (aurora.css: span{padding:12px;border-radius:4px;border:1px solid #dadada}),
   찜하기/장바구니 라벨 텍스트에도 회색 테두리 박스가 그대로 씌워지고 있었음 — 리셋 */
.purchase__like-btn span,
.purchase__cart-trigger-btn span {
  padding: 0;
  border: none;
  border-radius: 0;
}

/* "구매하기" 버튼 — 배경/radius/글자 굵기는 style.css의 전역 .btn--caution 공용 스타일을
   따르고, 여기선 이 화면 레이아웃만 지정. Figma 렌더 이미지를 픽셀 단위로 스캔해서 확인한
   결과 찜하기/장바구니 묶음과 구매하기 버튼 사이에 28px 정도의 고정 간격이 있고, 그 뒤로
   버튼이 남은 폭을 넓게 채우는 형태였음 — 베이스 스킨의 기본 gap(6px)만으로는 간격이
   부족해서 margin-left로 보정 */
.purchase__buy-btn {
  flex: 1;
  margin-left: 22px;
  padding: 12px 20px;
}

/* 재입고 알림 받기 — Figma PD-001_상품상세(품절, 6901:32404 "상품재입고신청" 섹션)
   실측: 흰 배경 + 진한 테두리(#202020) + radius 8, 텍스트 16px/#404040.
   재입고 알림이 가능하면 이 버튼 하나만 찜하기 옆 남은 폭을 전부 채우고("구매불가"는
   같이 안 보임 — Purchase.tsx에서 서로 배타적으로 렌더링) */
.purchase__restock-btn {
  flex: 1;
  height: auto;
  /* 베이스 스킨 .purchase__button-wrap의 flex gap(6px)에 6px를 더해 Figma 실측
     찜하기↔재입고알림받기 간격(12px)을 맞춤 */
  margin: 0 0 0 6px;
  padding: 12px 20px;
  background-color: #ffffff;
  border: 1px solid #202020;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  /* Figma "재입고 알림 받기" 16px/500/#404040 */
  font-weight: 500;
  color: #404040;
}

/* 재입고 알림 신청 완료 상태 — Figma 6901:34282: #E6E6E6 배경 + #ABABAB 라벨의
   비활성 버튼("재입고 알림 받기 완료")으로 전환 */
.purchase__restock-btn--applied,
.purchase__restock-btn--applied:disabled {
  background-color: #e6e6e6;
  border: none;
  color: #ababab;
  cursor: default;
  opacity: 1;
}

/* .product-detail로 조상 스코프를 더해 명시도를 올림 — style.css의 .btn--dark(단일
   클래스, _productDetail.css import보다 뒤에 로드됨)가 이 규칙과 명시도가 같아서
   실제로는 그게 이겨 배경/글자색이 연한 하늘색+파란 글자로 새어나가고 있었음 */
.product-detail .purchase__buy-btn--unpurchasable {
  flex: 1;
  margin-left: 12px;
  padding: 12px 20px;
  background-color: #9b9b9b;
  color: #ffffff;
  opacity: 1;
  /* 품절이 아닌 사유(판매종료 등)로 구매불가일 땐 disabled 속성이 안 붙어 클릭은
     막히지만(onClick 없음) 마우스 커서가 평범한 포인터로 남아 눌러도 되는 버튼처럼
     보였음 — 항상 금지 커서로 표시 */
  cursor: not-allowed;
}

/* 옵션 선택 바텀시트는 공용 @shared/BottomSheet(.bottom-sheet)를 그대로 쓰고,
   .purchase-sheet는 그 위에 옵션 개수가 많을 때를 위한 최대 높이/스크롤만 얹는
   보조 클래스로 남김. 딤/포지셔닝/PC 반응형/헤더/드래그핸들/타이틀은 전부
   BottomSheet.css가 이미 처리하므로 여기서 따로 정의하지 않음 */
.bottom-sheet.purchase-sheet {
  max-height: 80vh;
  overflow-y: auto;
}

.purchase-sheet__body {
  /* Figma OptionSection/StepperSection/TotalPriceSection 모두 좌우 24px */
  padding: 0 24px;
}

.purchase-sheet__cta {
  display: flex;
  gap: 8px;
  /* Figma Button/CTAArea padding: 12px 16px — 하단도 12px */
  padding: 12px 16px;
}

.purchase-sheet__cart-btn,
.purchase-sheet__buy-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;
}

.purchase-sheet__cart-btn {
  border: none;
  background-color: #f0f4fe;
  color: #3c56d6;
  /* Figma "장바구니 담기" 16px/500/#3C56D6 — 구매하기(600)와 굵기가 다름 */
  font-weight: 500;
}

.purchase-sheet__buy-btn {
  border: none;
  background-color: #4a69ea;
  color: #ffffff;
}

/* ── 옵션 선택 바텀시트 내부 — Figma Option/BottomSheet(5236:31195;964:6856) ──
   베이스 스킨 select-box/quantity/counter 기본 스타일이 Figma와 전혀 달라서
   바텀시트 안(.purchase-sheet)에서만 스코프해서 다시 그림. 실제 렌더링은
   OptionQuantityV2/ExtraProductOptionSelector 등 여러 자식이 나눠 맡지만, 전부 이
   컴포넌트가 여는 .purchase-sheet 스코프 안에서만 쓰여서 여기 한 곳에 모아둔다.
   "상품 옵션" 커스텀 드롭다운(OptionDropdown) 스타일은 @shared/OptionDropdown로
   컴포넌트와 함께 승격 이전 — 이메일 도메인 선택 등 다른 곳에서도 재사용하기 위함 */

/* 선택된 옵션 카드(StepperBox) — 옅은 회색 배경, 테두리 없음, radius 8 */
.purchase-sheet .quantity {
  margin: 0 0 12px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 8px;
  position: relative;
}

/* 상품명이 옵션 라벨 위에 중복으로 한번 더 나와서(선택된 옵션명만 있으면 충분) 숨김.
   선택된 옵션값(.selected-values)도 Sanitized가 .editor를 함께 붙여 렌더하므로 예외로 둔다 —
   빼지 않으면 추가상품 선택 카드에서 "옵션 : …" 줄까지 사라진다(USIN-37 확인 중 발견) */
.purchase-sheet .quantity__label .editor:not(.selected-values) {
  display: none;
}

.purchase-sheet .quantity__label .selected-values {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #404040 !important;
}

.purchase-sheet .quantity__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* 벤더 Quantity 컴포넌트는 convertToKoreanCurrency로 숫자만 포맷하고 통화 단위는
   붙여주지 않아서(컴포넌트 자체에 슬롯이 없음) "원"이 빠져 보였음 — 총 상품 금액
   줄(purchase__total)은 우리 코드가 직접 그려서 이미 "원"이 붙어있는데 이 옵션별
   가격만 비어있던 것 */
.purchase-sheet .quantity__content em {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  font-style: normal;
}

.purchase-sheet .quantity__content em::after {
  content: '원';
}

/* 수량 스텝퍼 — 36px씩 3칸, 전체를 하나의 radius 8 테두리로 감쌈 */
.purchase-sheet .counter {
  display: flex;
  max-width: none;
  background-color: transparent;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}

.purchase-sheet .counter__btn {
  width: 36px;
  height: 36px;
  border: none;
  border-right: 1px solid #e6e6e6;
  background-color: #ffffff;
  font-size: 16px;
  color: #1a1a1a;
}

.purchase-sheet .counter__btn:last-child {
  border-right: none;
  border-left: 1px solid #e6e6e6;
}

.purchase-sheet .counter__input {
  width: 36px;
  height: 36px;
  border: none;
  flex: none;
}

.purchase-sheet .counter__input input {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 옵션 삭제(X) 버튼 — 우측 상단 작은 아이콘 */
.purchase-sheet .quantity__del {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: none;
}

.purchase-sheet .quantity__del svg {
  width: 100%;
  height: 100%;
}

.purchase-sheet .quantity__del svg path {
  fill: none;
  stroke: #9b9b9b;
}

/* 총 상품금액 — Figma TotalPriceSection(1037:8457) padding: 12px 24px 20px.
   좌우 24px는 .purchase-sheet__body가 이미 담당하므로 여기선 상하만 지정 */
.purchase-sheet .purchase__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 0 20px;
  border-top: none;
}

.purchase-sheet .purchase__total > span {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #9b9b9b;
}

.purchase-sheet .purchase__total em {
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  font-style: normal;
}

/* 금액 숫자를 감싸는 공용 .highlight.bold 유틸리티가 --blue-gray-color로
   색을 덮어써서, em에 지정한 Figma 색(#1a1a1a)이 적용되지 않던 문제 수정 */
.purchase-sheet .purchase__total em span {
  color: #1a1a1a;
}

/* ── 추가 상품(같이사면 좋은 채비) 3단계 펼침 — USIN-37, Figma 10365-6121/10364-6014 ──
   ① 진입 시 접힘 → ② 섹션 타이틀 클릭: 상품명 줄만 → ③ 상품명 줄 클릭: 옵션 드롭다운.
   마크업이 <details> 2중첩으로 바뀌면서 벤더 기본값이 새어 나오는 부분을 여기서 눌러준다. */

/* 벤더 .accordion__items{padding:20px} — 시안은 섹션 안쪽 여백이 따로 없다 */
.extra-product-purchase__info .accordion__items {
  padding: 0;
}

/* 화살표는 옵션 드롭다운과 같은 24px SVG(ChevronRightIcon)를 summary 안에 직접 넣는다 —
   벤더의 8×16 PNG(::after)는 모양·크기·회전이 드롭다운과 달라 숨긴다 */
.extra-product-purchase__info .accordion__title::after {
  display: none;
}

.extra-product-purchase__info .accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 섹션 타이틀 — Figma BundleHeader(16px Bold #1a1a1a, 높이 24, 위아래 16/12) */
.extra-product-purchase__info > div > .accordion > .accordion__title {
  padding: 16px 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

/* 상품명 줄 — Figma DropdownField(312×40, 보더 #e6e6e6, radius 8, 좌우 12, 14px/500 #9b9b9b).
   상품명이 두 줄까지 내려오므로 높이는 고정하지 않고 min-height로 둔다 */
.extra-product-purchase__options-item .accordion__title {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: #9b9b9b;
}

/* 여닫이 화살표 — 옵션 드롭다운(.option-dropdown__chevron)과 같은 회전·전환.
   details[open]은 높이 애니메이션이 끝난 뒤에야 바뀌어서 화살표가 한 박자 늦게 돌기 때문에,
   useAccordionAnimation이 여닫는 동안 붙여주는 data-accordion-open을 먼저 본다 */
.extra-product-purchase__info .extra-product-purchase__chevron {
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform 0.2s ease-out;
}

.extra-product-purchase__info .accordion[open] > .accordion__title .extra-product-purchase__chevron,
.extra-product-purchase__info .accordion[data-accordion-open='true'] > .accordion__title .extra-product-purchase__chevron {
  transform: rotate(-90deg);
}

.extra-product-purchase__info .accordion[data-accordion-open='false'] > .accordion__title .extra-product-purchase__chevron {
  transform: rotate(90deg);
}

/* 시안 간격 — 섹션 안 요소들 사이 12px(상품명 줄 ↔ 옵션 드롭다운, 추가 상품끼리) */
.extra-product-purchase__options-item .purchase__option-options-box {
  margin-top: 12px;
}

.extra-product-purchase__options-item + .extra-product-purchase__options-item {
  margin-top: 12px;
}

/* 배송정보 — Figma DeliveryInfo(5236:30949)는 좌측 "배송정보" 라벨 + 우측에
   "오늘 주문 시 내일 출발"/"OO원 이상 무료배송" 두 줄이 나란히(가로) 배치되는데,
   벤더 CSS에 이 dl/dt/dd의 레이아웃 규칙이 전혀 없어서(네이티브 dl 기본값) 라벨과
   내용이 세로로 쌓이고 dd 기본 들여쓰기(margin-left)까지 남아있었음 */
.product-summary__freight {
  display: flex;
  align-items: flex-start;
  /* Figma 실측: Label(width 49, x 1488~1537) ↔ _DeliveryDetail(x 1577) 간격 40px.
     12px로 붙여놨던 걸 정확한 값으로 수정 */
  gap: 40px;
}

.product-summary__freight dt {
  flex-shrink: 0;
}

.product-summary__freight dd {
  margin: 0;
  /* 베이스 스킨 dd 기본 padding-left(5px)가 남아있어 내용이 라벨과의 40px 간격보다
     5px 더 밀려나 있었음 */
  padding-left: 0;
}

.product-summary__freight dd p {
  margin: 0;
}

.product-summary__freight-label {
  color: #9b9b9b;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  /* 라벨과 옆 내용(.product-summary__display-label)의 line-height를 반드시 동일하게
     맞춰야 상단이 정확히 일치함 — 하나라도 브라우저 기본값("normal")에 맡기면
     폰트 메트릭에 따라 줄간격이 달라져 미묘하게 어긋나 보임 */
  line-height: 18px;
}

.product-summary__delivery-date {
  margin-bottom: 2px;
}

/* "내일 출발" 등 날짜 부분만 강조 — Figma characterStyleOverrides가 이 부분만
   #3c56d6로 지정 */
.product-summary__delivery-date-highlight {
  color: #3c56d6;
}

/* 배송정보(무료배송 등) — Figma DeliveryInfo(5236:30949)는 14px/500/#404040,
   line-height 18px인데, 벤더 CSS에 이거 말고 ".product-summary dd"라는 더 명시도
   높은 범용 규칙이 따로 있어서(font-size 12px, line-height 16px, padding-left 5.7px,
   display:inline-block) 실제로는 그게 이기고 있었음 — 라벨("배송정보", 14px/줄간격14px)과
   내용(12px/줄간격16px)의 폰트크기·줄간격이 서로 달라서 상단이 안 맞아 보였던 원인.
   .product-summary__display-label 한 클래스(명시도 1)로는 ".product-summary dd"
   (명시도 class 1 + 태그 1)를 못 이겨서 조상 클래스를 더해 명시도를 올림.
   WeightInformation.tsx도 동일 규칙을 복제해서 씀(값이 같아 로드 순서 무관) */
.product-summary .product-summary__display-label {
  display: block;
  padding-left: 0;
  color: #404040;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.product-summary__original-price {
  color: #9b9b9b;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  line-height: 18px;
  margin: 0;
}

.product-detail .product-summary__off-percent {
  color: #ff272b;
  font-family: Pretendard, sans-serif;
  font-size: 24px;
  line-height: 34px;
}

/* Figma DiscountRate("24%")는 문자별 스타일 override가 전혀 없음(24와 %가 완전히
   동일한 24px/600) — 벤더 기본값(.off-percent span{font-size:1.1428571429rem})이
   "%"만 16px로 작게 만들고 있어서 숫자와 다르게 보였음 */
.product-detail .product-summary__off-percent span {
  font-size: inherit;
  font-weight: inherit;
  margin-left: 0;
}

.product-summary__price-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-summary__price-detail-left {
  display: flex;
  align-items: center;
}

/* PriceInformation.tsx에서 원가(.original-price)를 판매가 줄 "위"로 옮기면서
   그 둘을 같이 묶어 폰트를 지정하던 .product-summary__discounted-price 래퍼가
   없어짐 — 그 래퍼가 담당하던 판매가 폰트 스펙을 .price에 직접 옮김 */
.product-summary__price {
  display: inline-block;
  color: #1a1a1a;
  font-family: Pretendard, sans-serif;
  font-size: 24px;
  font-weight: 600;
  /* Figma SalePrice 24px/600/lh34 — 같은 줄의 할인율(__off-percent, lh34)과 라인박스를
     통일해야 두 텍스트의 베이스라인/세로 위치가 정확히 맞는다(기존 26px로 어긋나 있었음) */
  line-height: 34px;
}

/* Figma SalePrice("189,000원")도 문자별 override 없음 — "원"이 숫자와 완전히
   동일한 24px/600. 벤더 기본값(.discounted-price span{font-size:1.2857142857rem})이
   "원"만 18px/400으로 작고 얇게 만들고 있어서 숫자와 다르게 보였음 */
.product-summary__price span {
  font-size: inherit;
  font-weight: inherit;
  margin-left: 0;
}

/* 쿠폰 받기 버튼 — Figma Button/Buttons(5236:30949 PriceRow) 실측: 배경 #fafafa,
   radius 4px, 좌우 20px/상하 12px 패딩, 아이콘-텍스트 gap 4px, 텍스트 14px/500/#404040.
   벤더 기본값(.product-summary__coupon-download-btn)은 어두운 배경+흰 텍스트의
   pill 버튼(radius 18px)이었고, 아이콘도 position:absolute로 우측 상단에 고정된
   흰색 스프라이트라 DOM 순서/flex-direction을 바꿔도 위치가 전혀 안 바뀌었음 —
   DownloadCouponButton 컴포넌트(@features/coupon-download)로 교체하면서 레이아웃도
   전부 다시 그림. 이 화면에서만 쓰는 기능이라 그 컴포넌트가 렌더링하는 벤더 클래스를
   여기서 오버라이드한다 */
.product-summary__coupon-download-btn {
  display: flex;
  align-items: center;
  position: static;
  top: auto;
  gap: 4px;
  padding: 12px 20px;
  /* Figma Button/Buttons stroke — 배경(#fafafa)과 거의 같은 톤이지만 실측상 1px #F5F5F5 보더가 있음 */
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  background-color: #fafafa;
  color: #404040;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 18px;
}

/* ── 쿠폰 받기 바텀시트(@features/coupon-download) — Figma PD-013_쿠폰버텀시트(5218:34176) ──
   전체화면 모달 + 벤더 Coupon 컴포넌트(개별 다운로드 아이콘) 조합이었던 걸,
   BottomSheet + 체크박스 선택형 카드 목록 + 하단 고정 CTA로 전면 재설계.
   이 기능은 이 화면(PriceInformation)에서만 쓰여서 여기 같이 둔다 */
.coupon-sheet .bottom-sheet__title {
  font-size: 17px;
}

.coupon-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 24px 20px;
  list-style: none;
}

/* CardButton(5236:32433 계열) 실측: 312x128, radius 8, padding 20, itemSpacing 8.
   선택 시 fill #f0f4fe + border 2px #4a69ea, 미선택 시 fill #fafafa + border 1px #d3d3d3.
   높이가 min-height(고정 height 아님)라 border-box여도 border-width 자체를 1→2px로
   바꾸면 카드 높이가 그만큼 실제로 늘어나 선택할 때마다 카드가 커졌다 작아졌다 했음 —
   border-width는 항상 1px로 고정하고, 선택 시 안쪽에 box-shadow(inset)로 1px를 더
   겹쳐 그려서 두께만 2px처럼 보이게 하고 레이아웃 크기는 그대로 유지한다 */
.coupon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 128px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  background-color: #fafafa;
  text-align: left;
  cursor: pointer;
}

.coupon-card.is-selected {
  border-color: #4a69ea;
  box-shadow: inset 0 0 0 1px #4a69ea;
  background-color: #f0f4fe;
}

.coupon-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.coupon-card__title {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #9b9b9b;
}

.coupon-card.is-selected .coupon-card__title {
  color: #1a1f29;
}

.coupon-card__valid-date {
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #9b9b9b;
}

/* Figma DiscountRate(counterAxisAlignItems=MAX) — 금액(24px/lh34)과 괄호 노트를 행
   아래끝 기준으로 정렬(gap 4, 노트 텍스트는 하단에서 4px 위 — 쿠폰 선택 모달과 동일 규칙) */
.coupon-card__value {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  color: #9b9b9b;
}

.coupon-card.is-selected .coupon-card__value {
  color: #3c56d6;
}

.coupon-card__note {
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

/* General/CheckBox(20x20, radius 9999) — 선택 시 진한 원(#111111) + 흰 체크,
   미선택 시 흰 배경 + 1px #e6e6e6 테두리 */
.coupon-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 9999px;
  background-color: #ffffff;
}

.coupon-card__check.is-selected {
  border: none;
  /* Figma General/CheckBox fill #111111 */
  background-color: #111111;
}

/* Button/CTAArea(360폭, 좌우 16px/상하 12px 패딩, 흰 배경) — 시트 하단 고정 CTA */
.coupon-sheet__footer {
  padding: 12px 16px;
  background-color: #ffffff;
}

.coupon-sheet__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 15px 0;
  border: none;
  border-radius: 8px;
  background-color: #4a69ea;
  color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.coupon-sheet__submit:disabled {
  background-color: #d3d3d3;
  cursor: default;
}

/* 공유 링크 복사 완료 토스트 — @shared/Toast 공용 컴포넌트를 씀. 위치/스타일은
   Toast.css에서 전역으로 관리 */

/* 공유하기 바텀시트 — Figma 공유하기 바텀시트 모달 SECTION(5218:34182).
   딤/시트 위치/헤더(패딩·드래그핸들·타이틀)는 @shared/BottomSheet 공통 스타일이 이미
   같은 값(16/24/16, #D3D3D3, 18px/600/lh24/-0.01em)이라 로컬 오버라이드 없이 그대로 씀 */
.share-bottom-sheet__options {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 0;
  padding: 0 24px 20px;
  list-style: none;
}

.share-bottom-sheet__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 42px;
  border: none;
  background: none;
  padding: 0;
}

.share-bottom-sheet__option:disabled {
  opacity: 0.4;
}

.share-bottom-sheet__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.share-bottom-sheet__option-icon--kakao {
  background-color: #fee500;
}

.share-bottom-sheet__option-icon--link {
  background-color: #fafafa;
}

/* "URL" 아이콘 글자 — Figma 14px/400 (600은 감사에서 확인된 불일치) */
.share-bottom-sheet__option-icon-text {
  color: #404040;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
}

.share-bottom-sheet__option-label {
  color: #404040;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 18px;
  white-space: nowrap;
}

/* FreightInformation.tsx와 동일 규칙을 복제(값이 같아 로드 순서 무관) — 상세 이유는
   FreightInformation.css 참고 */
.product-summary .product-summary__display-label {
  display: block;
  padding-left: 0;
  color: #404040;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

/* 브랜드명/상품명 — Figma InfoArea/PriceArea(5236:30949)의 Fills/폰트 스펙을 실측해
   정확한 값으로 맞춤. 전부 커스텀 CSS가 없어 벤더 기본값(html 14px 기준 rem 환산값,
   색상도 --point-color 등 다른 값)을 그대로 쓰고 있었음.
   font-family도 명시 — 벤더 body{font:14px/1 "Montserrat","Noto Sans KR",sans-serif}가
   전체에 깔려있어서 개별 지정 안 하면 전부 Montserrat로 새어나감(Figma는 Pretendard) */
.product-summary__brand-name {
  color: #9b9b9b;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.product-summary__title {
  color: #1a1a1a;
  font-family: Pretendard, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin-top: 4px;
}

/* price-info는 이제 원가(위 줄) + price-detail(아래 줄)만 세로로 쌓으면 됨 —
   쿠폰 버튼을 price-detail 안으로 옮겼는데 벤더 기본값(space-between)이 여전히
   원가/price-detail 두 줄을 양쪽 끝으로 벌려버려서 block으로 리셋.
   실제 좌우 배치(할인율+가격 ↔ 쿠폰 버튼)는 price-detail 쪽(PriceInformation.tsx)에서 담당 */
.product-summary__price-info {
  display: block;
}

/* Summary(브랜드명/상품명/가격/배송정보) 로딩 스켈레톤 — 데이터 도착 전 "0원"이
   실제 값처럼 잠깐 노출되는 문제를 막기 위한 자리표시용 라인. 실제 레이아웃의
   대략적인 폭/간격만 맞추고 벤더 .skeleton__line의 shimmer 애니메이션은 그대로 사용 */
.product-summary-skeleton__brand {
  width: 30%;
  margin-bottom: 8px;
}

.product-summary-skeleton__title {
  width: 70%;
  margin-bottom: 16px;
}

.product-summary-skeleton__price {
  width: 45%;
  height: 28px;
  margin-bottom: 16px;
}

.product-summary-skeleton__freight {
  width: 55%;
}

/* ProductDetail.tsx가 직접 렌더링하는(서브컴포넌트가 아닌) 페이지 루트(.product-detail)
   전용 스타일. 탭 바 sticky 오프셋 — _layout.css의 전역 `.tabs { top: var(--header-height) }`로
   대부분 해결되지만, 벤더 CSS에 `.product-detail .tabs { top: 90px }`라는 더 구체적인
   (클래스 2개) 규칙이 따로 있어서 전역 규칙(클래스 1개)보다 우선해 90px로 되돌아감 —
   똑같이 페이지 스코프로 덮어써야 이김 */
.product-detail .tabs {
  top: var(--header-height);
}

/* 상품상세 탭(상품정보/리뷰/Q&A) 위·아래 여백 — 베이스 스킨
   .product-detail .tabs{margin:10px auto}가 탭 바 위·아래 10px 여백을 만드는데,
   Figma는 ProductInfo와 탭 바, 탭 바와 콘텐츠가 전부 여백 없이 바로 붙어있음 */
.product-detail .tabs {
  margin-top: 0;
  margin-bottom: 0;
}