/* /css/product-visual-scale.css
   [product-visual-scale v=20260722-5 — content bbox 정렬]
   Purpose:
   - 상품 목록 카드에서 실물 규격 차이를 시각적으로 표현
     (1.8L는 크게, 300ml는 작게 — 동일한 1:1 캔버스 + 하단 기준선 정렬)
   - /js/product-visual-scale.js 가 product_no 별 배율을
     --product-scale CSS 변수로 주입하고 .img 에 .pvs-scale 클래스를 붙인다.
   - JS가 실행되지 않으면 이 파일은 아무것도 바꾸지 않는다(클래스 게이트).

   동작 원리:
   - 캔버스: 기존 product-image-uniform.css 의 1:1 비율 유지 (외형 크기 불변)
   - 이미지: contain + 하단 정렬 + padding 7% (드로잉 영역 86%)
   - 배율: transform: scale(var(--product-scale)) / origin: center bottom
     → 하단 기준선이 유지되고 레이아웃 리플로우가 없다.

   Load order: product-image-uniform.css 이후.
   적용 제외: 상품 상세 대표 이미지(스코프가 .shop_list_item01 카드로 한정됨).

   주의: 현재 상품 이미지들은 원본 내 여백이 제각각(표본 31%가 여백 과다)이라
   배율 정확도가 제한된다. 공식 이미지 수집 + content_bounding_box 정규화
   완료 후 정확해진다. */

.shop_list_item01 .img.pvs-scale {
    background: var(--pvs-bg, #fff);
}

.shop_list_item01 .img.pvs-scale img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 7%;
    box-sizing: border-box;
    /* scale 후에도 하단 기준선을 캔버스 하단 7%로 고정:
       origin bottom 스케일 시 내부 padding 도 s배로 줄므로
       (1 - s) * 7% 만큼 위로 이동시켜 보정한다 */
    transform: translateY(calc((1 - var(--product-scale, 0.75)) * -7%))
               scale(var(--product-scale, 0.75));
    transform-origin: center bottom;
    display: block;
}

/* immart-motion.css 의 hover 확대(scale 1.06)와 합성 —
   transform 은 단일 속성이라 배율을 곱해 다시 선언해야 한다 */
.shop_list_item01:hover .img.pvs-scale > img {
    transform: translateY(calc((1 - var(--product-scale, 0.75) * 1.06) * -7%))
               scale(calc(var(--product-scale, 0.75) * 1.06));
}

/* 품절 카드는 hover 확대 없음 (immart-motion 규칙과 동일한 의도) */
.shop_list_item01.soldOut:hover .img.pvs-scale > img {
    transform: translateY(calc((1 - var(--product-scale, 0.75)) * -7%))
               scale(var(--product-scale, 0.75));
}

/* no-image 플레이스홀더는 배율 대상에서 제외 — JS가 클래스를 붙이지 않지만
   만약의 경우를 위한 안전핀 */
.shop_list_item01 .img.pvs-scale img[src*="no_image"] {
    transform: none;
    object-position: center;
    padding: 0;
}

/* ============================================================
   v2: content bbox 정렬 스테이지 (.pvs-stage)
   - .pvs-pos 가 실제 상품 bbox 기준으로 계산된 이미지 표시영역(% 단위)
     → 카드 크기가 변해도 자동 대응 (1:1 정사각 스테이지)
   - 정렬 transform(외부 .pvs-pos 위치)과 hover 확대(내부 img)를 분리.
     hover 기준점은 JS가 실제 상품 밑면 중앙으로 지정 → 기준선·중심 불변
   - z-index: .pvs-pos(1) < 찜/장바구니 .plv-actions(3) < 뱃지(4)
   ============================================================ */
.shop_list_item01 .img.pvs-stage {
    position: relative;
    background: var(--pvs-bg, #fff);
}

.shop_list_item01 .img.pvs-stage .pvs-pos {
    position: absolute;
    z-index: 1;
    pointer-events: none; /* 카드 링크/버튼 클릭 방해 금지 */
}

/* 품절 오버레이(::after)가 상품(.pvs-pos, z:1)보다 위에 오도록 보정 —
   보정 없으면 상품이 품절 딤 레이어를 뚫고 나온다 */
.shop_list_item01.soldOut .img.pvs-stage::after {
    z-index: 2;
}

.shop_list_item01 .img.pvs-stage .pvs-pos > img {
    /* plv view-list 의 96px 고정 등 하위 레이어 강제값 무력화 */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: fill; /* 표시영역이 원본 비율 그대로라 왜곡 없음 */
    display: block;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.shop_list_item01:hover .img.pvs-stage .pvs-pos > img {
    transform: scale(1.06);
}

.shop_list_item01.soldOut:hover .img.pvs-stage .pvs-pos > img {
    transform: none;
}

/* 스테이지 예약 단계(이미지 미로드)에서 원본이 통째로 보이는 것 방지 —
   .pvs-pos 로 감싸이기 전까지는 contain 으로 유지 */
.shop_list_item01 .img.pvs-stage > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 7%;
    box-sizing: border-box;
    display: block;
}