/*
 * 상품 상세 2차 범위 보정 (FP-QA-05 문의 쓰기 / FP-PD-12 함께 본 상품)
 *
 * 목업에 없는 마크업만 최소로 덮는다 — 목업 CSS(page/product.css)를 고치지 않는다.
 *  1) 문의 팝업의 커스텀 드롭다운(button + ul)을 select 로 구현해 대응 스타일이 없다
 *  2) 함께 본 상품을 스와이퍼 대신 공용 ProductGrid 로 렌더한다(PC 우측·모바일 좌측 두 위치)
 *  3) 상품상세의 PC 구매 박스·탭 구매 박스·모바일 CTA 장바구니 버튼은 흰 배경·파란 글자와 테두리다
 *  4) PC 우측 구매 영역의 sticky 범위를 헤더 높이와 맞춘다
 *
 * ⚠ 공용 reset(_reset.css)은 Meyer reset 이라 button·select·input 을 초기화하지 않는다.
 *   목업이 쓴 태그를 다른 태그로 바꾸면 UA 기본 스타일이 그대로 남으므로, 문의 목록처럼
 *   목업 CSS 가 이미 있는 자리는 여기서 덮지 말고 마크업을 목업에 맞춘다(ProductAskTab.tsx).
 */

/* 1) 문의 등록·수정 팝업 --------------------------------------------------- */

.product_detail02 .inquiry_pop .option-select select {
  width: 100%;
  height: 44px;
  padding: 11px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 145%;
  color: var(--color-text);
}

.product_detail02 .inquiry_pop .ui-popup-content [role='alert'] {
  margin-top: 8px;
  color: #d64545;
}

/* 개인정보 안내 — 줄바꿈된 문장도 도트 아래가 아니라 본문 시작선에 맞춘다. */
.page-product main .inquiry_pop .ui-popup-content .caution li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  padding-left: 0;
}

.page-product main .inquiry_pop .ui-popup-content .caution li::before {
  position: static;
  align-self: start;
  margin: 8px 0 0 2px;
}

/* 1-2) 후기 사진 확대 보기 (목업에 없는 화면) ------------------------------- */

/* 썸네일 — 목업 `.photo > div`(80x80 크롭)·`> div img` 규칙을 유지하려고 래퍼 div 안에
   버튼을 넣었다. reset 이 button 을 초기화하지 않으므로 기본 상자를 여기서 지운다. */
.product_detail02 .review_list .photo > div > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.review-photo-viewer figure {
  margin: 0;
  text-align: center;
}

/* _reset.css 가 `img { display:block; width:100% }` 라 원본이 작아도 늘어난다 — 되돌린다 */
.review-photo-viewer figure img {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

.review-photo-viewer nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.review-photo-viewer nav button {
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}

.review-photo-viewer nav p {
  color: var(--color-text-medium);
}

/* 2) 다른 고객이 함께 본 상품 ---------------------------------------------- */

.product_detail .product-recommend .product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}

.product_detail .right_area .product-recommend {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .product_detail .not_pc .product-recommend {
    margin: 32px 0;
  }
}

/* 3) 상품상세 장바구니 담기 버튼 --------------------------------------- */

.page-product main .product_detail .right_area .product-button-wrap button.product-cart-submit {
  border-color: var(--color-action-blue, #597FD0);
  background: #fff;
  color: var(--color-action-blue, #597FD0);
}

.page-product main .product_detail02 .right_area .product-button-wrap button.product-cart-submit {
  border-color: var(--color-action-blue, #597FD0);
  background: #fff;
  color: var(--color-action-blue, #597FD0);
}

/* product.css 의 button.line 과 특정도가 같으므로 layout.tsx 에서 이 파일을 뒤에 로드해 덮는다. */
.page-product main .product_detail .mo_float_btn button.product-cart-submit {
  border-color: var(--color-action-blue, #597FD0);
  background: #fff;
  color: var(--color-action-blue, #597FD0);
}

/* 담기 완료 팝업은 닫기 헤더를 유지하므로, 헤더 없는 목업의 66px 상단 여백을 중복 적용하지 않는다. */
.add_cart_complete .ui-popup-panel,
.page-product main .add_cart_complete .ui-popup-panel {
  width: min(320px, 100%);
}

.add_cart_complete .ui-popup-head,
.page-product main .add_cart_complete .ui-popup-head {
  padding: 0;
  height: 48px;
}

.add_cart_complete .ui-popup-close,
.page-product main .add_cart_complete .ui-popup-close {
  top: 16px;
  right: 16px;
}

.add_cart_complete .ui-popup-content,
.page-product main .add_cart_complete .ui-popup-content {
  padding: 16px 20px 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
}

.add_cart_complete .ui-popup-foot,
.page-product main .add_cart_complete .ui-popup-foot {
  padding: 24px 20px;
}

.add_cart_complete .bottom-actions,
.page-product main .add_cart_complete .bottom-actions {
  width: 100%;
  padding-top: 0;
}

.add_cart_complete .bottom-actions > .ui-btn,
.page-product main .add_cart_complete .bottom-actions > .ui-btn {
  display: inline-flex;
  flex: 1 1 0;
  width: auto;
  height: 48px;
  margin: 0;
}

@media (max-width: 768px) {
  .add_cart_complete .ui-popup-panel,
  .page-product main .add_cart_complete .ui-popup-panel {
    width: 100%;
    min-height: 0;
  }

  .add_cart_complete .ui-popup-head,
  .page-product main .add_cart_complete .ui-popup-head {
    display: none;
  }

  .add_cart_complete .ui-popup-content,
  .page-product main .add_cart_complete .ui-popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100px;
    margin: 0;
    padding: 16px 20px;
  }

  .add_cart_complete .ui-popup-foot,
  .page-product main .add_cart_complete .ui-popup-foot {
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  }
}

/* 4) 우측 구매영역 sticky 정책 (PC) --------------------------------------- */

/*
 * 목업 `page/product.css` 는 두 구매영역 모두에 `position: sticky; top: 112px` 를 둔다
 * (1649행 `.product_detail > .right_area` · 2952행 `.product_detail02 > .right_area`).
 *
 * 요구사항:
 *  - **상단**(갤러리 옆, `.product_detail`) 구매영역은 스크롤 중에도 **고정**한다.
 *  - **하단**(탭 옆, `.product_detail02`) 구매영역은 상세 탭 본문(상품설명/상세정보/후기/문의)과
 *    **함께 스크롤**한다(고정하지 않는다).
 *
 * 목업 원본은 고치지 않고 여기서 덮는다(RULES 3.9). 두 영역을 **명시적으로** 지정해
 * 이전 상태와 무관하게 결과가 확정되게 한다.
 *
 * ⚠ PC 에서만 적용한다 — 1024px 이하는 목업이 두 `.right_area` 를 `display: none` 으로
 *   감추고 `mo_float_btn`(모바일 고정 CTA)을 쓴다.
 *
 * ⚠ 특이도 — 목업 규칙 `.page-product main .product_detail(02) .right_area` (0,3,1) 을
 *   이기려고 루트 두 클래스 + `main` 으로 (0,4,1) 로 올린다.
 *
 * 상세 탭 바(`.product_detail02 .tab_wrap .tab`)도 여기서 sticky 오프셋을 맞춘다 — 아래 참고.
 */
@media (min-width: 1025px) {
  /* 갤러리 옆(첫 블록) — 탭 본문과 함께 스크롤(고정 안 함) */
  .page-product.page-product-detail main .product_detail > .right_area {
    position: static;
    top: auto;
  }

  /* 탭 옆(둘째 블록) — 고정 유지. 오프셋은 헤더 높이(80px, app/header-top-menu.css)에 맞춘다 */
  .page-product.page-product-detail main .product_detail02 > .right_area {
    position: sticky;
    top: 80px;
  }
}

/*
 * 상세 탭 바 sticky 오프셋 — 헤더 높이에 맞춘다.
 *
 * 목업은 탭을 `top: 88px`(전역) / `top: 98px`(≤768px) 로 붙인다. 이 앱의 `.site-header` 는
 * `position: sticky; top: 0` 으로 화면 상단을 차지한다. 상품상세는 모바일 GNB를 노출하지
 * 않으므로 전 폭에서 app/header-top-menu.css의 헤더 높이 80px을 사용한다. **≥769px 는 목업
 * 88px 가 헤더 80px 보다 8px 커** 탭 상단과 헤더 사이에 8px 틈이 생겨 본문 이미지가 비친다.
 *
 * 그래서 **≥769px 전 구간**에서 탭을 80px 로 올려 헤더에 딱 붙인다(우측 구매영역 오프셋과
 * 동일). 구매영역 오버라이드는 1024px 이하에서 영역이 숨겨져 1025px+ 로 좁혔지만, 탭은 모든
 * 폭에서 보이므로 헤더가 80px 인 769px+ 를 모두 덮어야 한다.
 *
 * 특이도 — 목업의 ≤768px 규칙 `.page-product.page-product-detail main .product_detail02
 *   .left_area .tab_wrap .tab` 가 `.left_area` 를 포함해 (0,6,1) 이다. 오버라이드도
 *   `.left_area` 를 넣어 (0,6,1) 로 맞추고 로드 순서(product.css 뒤)로 이긴다.
 *   (`.left_area` 를 빠뜨리면 (0,5,1) 이라 모바일 98px 규칙에 져 18px 틈이 다시 생긴다.)
 */
@media (min-width: 769px) {
  .page-product.page-product-detail main .product_detail02 .left_area .tab_wrap .tab {
    top: 80px;
    z-index: 5; /* 스크롤 시 상세 이미지·스티키 형제 위로 (헤더 z-index:8 미만) */
  }
}

/*
 * 모바일 상품상세는 GNB 없는 헤더(80px)에 탭을 붙인다.
 * GNB 노출 화면의 98px을 쓰면 18px 틈으로 상세 이미지가 비친다.
 */
@media (max-width: 768px) {
  .page-product.page-product-detail main .product_detail02 .left_area .tab_wrap .tab {
    top: 80px;
    z-index: 5;
  }
}