@charset "utf-8";

/**
 * 상품 목록 — Tailwind로 넣기 어려운 부분만 유지
 * - get_it_image() 가 출력하는 img 태그
 * - JS 토글 상태 (.is-wishlist)
 * - 페이지네이션 — 테두리/배경 없이 숫자 색만 구분
 */

/* 피그마 55:1633 — 이미지 영역 안쪽 ≈294×276 비율, 박스(1:1)를 채우지 않고 contain */
.shop-item-card__thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-item-card__wish.is-wishlist {
    color: #dd605b;
}

/* ----- 페이지네이션 (상품 목록 전용) ----- */
#sct .shop-list-paging .pg_wrap {
    margin: 40px 0 0;
    text-align: center;
}

#sct .shop-list-paging .pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

#sct .shop-list-paging .pg_page,
#sct .shop-list-paging .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    text-indent: 0;
    overflow: visible;
    vertical-align: middle;
}

/* 비활성 페이지 숫자 — #272f31 / 40% */
#sct .shop-list-paging .pg_page {
    color: rgba(39, 47, 49, 0.4);
}

/* 숫자 페이지만 — background 단축속성 사용 시 background-image 가 같이 지워짐 */
#sct .shop-list-paging .pg_page:not(.pg_start):not(.pg_prev):not(.pg_next):not(.pg_end):hover,
#sct .shop-list-paging .pg_page:not(.pg_start):not(.pg_prev):not(.pg_next):not(.pg_end):focus {
    background-color: transparent;
    border: 0;
    color: #272f31;
    text-decoration: none;
}

/* 현재 페이지 — #272f31 / 100% */
#sct .shop-list-paging .pg_current {
    background: transparent;
    border: 0;
    color: #272f31;
    font-weight: 400;
}

/* 처음/이전/다음/맨끝 — 기본 pg_wrap 이미지 아이콘 */
#sct .shop-list-paging .pg_start,
#sct .shop-list-paging .pg_prev,
#sct .shop-list-paging .pg_next,
#sct .shop-list-paging .pg_end {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    color: transparent;
    font-size: inherit;
    text-indent: -999px;
    overflow: hidden;
}

#sct .shop-list-paging .pg_start { background-image: url('../img/btn_first.gif'); }
#sct .shop-list-paging .pg_prev  { background-image: url('../img/btn_prev.gif'); }
#sct .shop-list-paging .pg_next  { background-image: url('../img/btn_next.gif'); }
#sct .shop-list-paging .pg_end   { background-image: url('../img/btn_end.gif'); }

#sct .shop-list-paging .pg_start:hover,
#sct .shop-list-paging .pg_prev:hover,
#sct .shop-list-paging .pg_next:hover,
#sct .shop-list-paging .pg_end:hover,
#sct .shop-list-paging .pg_start:focus,
#sct .shop-list-paging .pg_prev:focus,
#sct .shop-list-paging .pg_next:focus,
#sct .shop-list-paging .pg_end:focus {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 0;
    color: transparent;
}

#sct .shop-list-paging .pg_start:hover,
#sct .shop-list-paging .pg_start:focus { background-image: url('../img/btn_first.gif'); }
#sct .shop-list-paging .pg_prev:hover,
#sct .shop-list-paging .pg_prev:focus  { background-image: url('../img/btn_prev.gif'); }
#sct .shop-list-paging .pg_next:hover,
#sct .shop-list-paging .pg_next:focus  { background-image: url('../img/btn_next.gif'); }
#sct .shop-list-paging .pg_end:hover,
#sct .shop-list-paging .pg_end:focus   { background-image: url('../img/btn_end.gif'); }