/* /css/product-image-uniform.css
   [product-image-uniform 20260722]
   Purpose:
   - 상품 이미지 출력 영역 비율/크롭 통일 레이어 (원본 이미지·DB 무변경, CSS만)
   - 목록/썸네일: 1:1 고정 박스 + object-fit 크롭 → 카드 높이 통일, 로딩 전 CLS 방지
   - 상세 대표 이미지: 비율만 고정, 상품 전체가 보이도록 contain

   Tuning (여기 변수만 바꾸면 전 화면 일괄 적용):
   - --prd-thumb-fit  : cover(가장자리 크롭) ↔ contain(전체 노출, 여백 발생)
   - --prd-thumb-ratio: 목록 썸네일 비율 (기본 1 / 1)
   - --prd-detail-fit : 상세 대표 이미지 (기본 contain — 상품이 잘리면 안 됨)

   Load order: product-list-ui.css 이후, 사이트 CSS 중 가장 마지막.
   적용 화면: 메인(index.jsp) 상품 캐러셀/랭킹, 카테고리·검색·브랜드 상품 목록
   (/shop/product/index.jsp 공용 렌더러), 목록 상단 BEST/MD/HOT 스와이퍼,
   최근 본 상품, 찜, 관련상품, 장바구니(shop_prd_img_box01), 브랜드관(prd_img),
   상품 상세 갤러리(shop_item_detail_slide). */

:root {
    --prd-thumb-ratio: 1 / 1;
    --prd-thumb-fit: cover;
    --prd-thumb-bg: #f5f5f5;
    --prd-detail-ratio: 1 / 1;
    --prd-detail-fit: contain;
    --prd-detail-bg: #fff;
}

/* ============================================================
   1. 공용 상품 카드 (.shop_list_item01 — 메인/목록/검색/찜/최근본/관련상품)
   - board.css의 3/4 및 main.css의 1/1.333333 비율을 1:1로 통일
   ============================================================ */
.shop_list_item01 .img,
.main_product .shop_list_item01 .img {
    aspect-ratio: var(--prd-thumb-ratio);
    overflow: hidden;
    background: var(--prd-thumb-bg);
}

.shop_list_item01 .img img {
    width: 100%;
    height: 100%;
    object-fit: var(--prd-thumb-fit);
    object-position: center;
    display: block;
    /* board.css가 img 자체에 걸어둔 aspect-ratio: 1/1.333333 무효화 */
    aspect-ratio: auto;
}

/* 특가 배너형 슬라이드는 상품 썸네일이 아님 — 기존 규칙(unset) 유지 대상.
   main.css의 `.img.teuk_img { aspect-ratio: unset !important }`가 이미
   위 규칙보다 우선하므로 별도 처리 불필요. */

/* 메인 카테고리 랭킹 썸네일 (80px, 기존 3/4) */
.main_product .rank_thumb {
    aspect-ratio: var(--prd-thumb-ratio);
    background: var(--prd-thumb-bg);
}

/* ============================================================
   2. 장바구니/주문 상품 썸네일 (.shop_prd_img_box01)
   - 기존: 1/1.25 박스 + img 100%/100%에 object-fit 없음 → 원본 비율에
     따라 이미지가 찌그러지던 버그. 1:1 + crop으로 교정.
   ============================================================ */
.shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 {
    aspect-ratio: var(--prd-thumb-ratio);
    background: var(--prd-thumb-bg);
}

.shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 img {
    width: 100%;
    height: 100%;
    object-fit: var(--prd-thumb-fit);
    object-position: center;
    display: block;
}

/* ============================================================
   3. 브랜드관 상품 썸네일 (.brand_wrap .prd_img — content.css는 width만 지정)
   ============================================================ */
.brand_wrap .prd_img {
    aspect-ratio: var(--prd-thumb-ratio);
    overflow: hidden;
    background: var(--prd-thumb-bg);
}

.brand_wrap .prd_img img {
    width: 100%;
    height: 100%;
    object-fit: var(--prd-thumb-fit);
    object-position: center;
    display: block;
}

/* ============================================================
   4. 상품 상세 갤러리
   - 대표 이미지: 비율만 고정하고 contain — 상품/패키지 전체 노출
   - 하단 썸네일 스트립: 목록과 동일하게 1:1 크롭
   ============================================================ */
.shop_item_detail_slide .item {
    aspect-ratio: var(--prd-detail-ratio);
    background: var(--prd-detail-bg);
}

.shop_item_detail_slide .item img {
    width: 100%;
    height: 100%;
    object-fit: var(--prd-detail-fit);
    object-position: center;
    display: block;
}

.shop_item_detail_slide_thumb .item {
    aspect-ratio: var(--prd-thumb-ratio);
    background: var(--prd-thumb-bg);
}

.shop_item_detail_slide_thumb .item img {
    width: 100%;
    height: 100%;
    object-fit: var(--prd-thumb-fit);
    object-position: center;
    display: block;
}