@charset "utf-8";

/* 쇼핑몰 — 캐러셀과 분류 칩 줄 (Swiper)

   gnu_theme4 의 쇼핑몰 작업에서 옮겨 왔다. 저쪽은 shop.css 한 파일에
   이어 붙였는데 여기는 800줄에서 잘라 조각으로 나눠 두었으므로 새
   파일로 받는다. 저쪽에서 이 내용은 파일 맨 끝에 있었다 — 앞의 규칙을
   덮어 쓰는 자리다. 그래서 head.sub.php 의 목록에서도 shop-responsive
   다음에 싣는다. 순서를 바꾸면 덮어 쓰던 것이 덮이지 않는다.

   Swiper 는 theme_functions.php 의 clarity_swiper_assets() 가 싣고,
   저작권 고지는 THIRD-PARTY-NOTICES.md 에 있다. */


/* --- 다크에 남은 밝은 바탕 ---

   영카트 스킨(skin/shop/basic/style.css)은 상자마다 background:#fff 를
   박아 둔다. 라이트에서는 테마 표면색과 같아 티가 안 나지만, 다크에서는
   흰 바탕이 그대로 남고 그 위에 밝은 글자가 얹혀 대비가 1.1:1 까지
   떨어진다 — 글자가 사라진다. 글자색만 토큰으로 바꾸고 배경은 스킨에
   맡겨 둔 자리들이라, 배경도 토큰으로 돌린다.

   새 화면에서 글자가 안 보이면 여기부터 본다. 색을 토큰으로 바꿀 때는
   글자와 배경을 늘 같이 옮긴다. */
.clarity-shop-page :is(#sps > ol > li, #sqa > ol > li,
                       #sps_sch .sch_wr, #sqa_sch .sch_wr,
                       #ssch_frm, #ssch_cate,
                       #sit_ov_from, #sit_siblings, #sit_rel, #sit_tab .tab_con,
                       .btn_wish_num, .review_detail) {
    background: var(--clarity-surface);
}

/* 아래 둘은 코어가 id 로 잡아 둔 자리라 무게를 맞춰 준다
   (#sit_pvi_big #popup_item_image · #sit_tab .item_use_count). */
.clarity-shop-page #sit_pvi_big #popup_item_image {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
    color: var(--clarity-muted);
}

.clarity-shop-page #sit_tab :is(.item_use_count, .item_qa_count) {
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
}

/* 쿠폰존의 구역 제목은 위 테두리 한 줄만 쓰는 자리라 바탕이 없어야 한다. */
.clarity-shop-page .couponzone_list h2 { background: transparent; }

/* --- 캐러셀 (Swiper) ---

   메인 배너 · 상품 상세 이미지 · 관련상품 세 곳에 쓴다. Swiper 기본 CSS 는
   CDN 에서 오고 여기서는 온담 결에 맞추는 것만 얹는다.

   Swiper 는 --swiper-* 라는 제 변수로 색과 크기를 받는다. 클래스를 덮어쓰기
   보다 그 변수를 우리 토큰으로 채우는 쪽이 업그레이드에 강하다. */
.clarity-shop-page .swiper {
    --swiper-theme-color: var(--clarity-primary);
    --swiper-pagination-color: var(--clarity-primary);
    --swiper-pagination-bullet-inactive-color: var(--clarity-text);
    --swiper-pagination-bullet-inactive-opacity: .25;
    --swiper-pagination-bullet-size: .5rem;
    --swiper-pagination-bullet-horizontal-gap: .25rem;
}

/* 메인 배너 */
.clarity-shop-page #main_bn { position: relative; margin: 0; border: 0; }
.clarity-shop-page .clarity-banner-swiper { overflow: hidden; background: var(--clarity-surface-soft); }
.clarity-shop-page .clarity-banner-img { display: block; width: 100%; height: auto; }

/* 좌우 단추. Swiper 기본 화살표 대신 우리 아이콘 단추를 쓴다.
   과녁은 44px 를 지킨다 — 화면 위에 떠 있어 잘못 누르기 쉬운 자리다. */
.clarity-shop-page .clarity-banner-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--clarity-text) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--clarity-surface) 88%, transparent);
    color: var(--clarity-text);
    cursor: pointer;
    font-size: 1.1rem;
    transform: translateY(-50%);
    transition: background .16s, color .16s;
}

.clarity-shop-page .clarity-banner-prev { left: 1rem; }
.clarity-shop-page .clarity-banner-next { right: 1rem; }

.clarity-shop-page .clarity-banner-nav:hover {
    background: var(--clarity-surface);
    color: var(--clarity-primary);
}

.clarity-shop-page .clarity-banner-pagination { bottom: 1rem !important; }

/* 슬라이드가 하나뿐이면 Swiper 가 스스로 단추를 잠근다. 잠긴 것은 감춘다. */
.clarity-shop-page .swiper-button-lock,
.clarity-shop-page .swiper-pagination-lock { display: none; }

/* 상품 상세 이미지 갤러리.
   #sit_pvi_big 은 aspect-ratio:1 인 정사각 상자다. 그 안을 Swiper 가 꽉
   채우게 하고, 사진은 잘리지 않게 contain 으로 둔다. */
.clarity-shop-page #sit_pvi_big .clarity-sit-gallery { width: 100%; height: 100%; }
.clarity-shop-page #sit_pvi_big .swiper-slide { display: block; }
.clarity-shop-page #sit_pvi_big .swiper-slide > a { display: block; width: 100%; height: 100%; }
.clarity-shop-page #sit_pvi_big .swiper-slide img { width: 100%; height: 100%; object-fit: contain; }

/* 좌우 단추는 배너와 같은 모양이되 상자가 작으니 조금 줄인다. */
.clarity-shop-page :is(.clarity-sit-prev, .clarity-sit-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.clarity-shop-page .clarity-sit-prev { left: .5rem; }
.clarity-shop-page .clarity-sit-next { right: .5rem; }

/* 썸네일 줄. ul 이 그대로 swiper-wrapper 라 flex 는 Swiper 가 만든다. */
.clarity-shop-page .clarity-sit-thumbs { width: 100%; margin-top: .75rem; }
.clarity-shop-page #sit_pvi_thumb { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page #sit_pvi_thumb > li { width: auto; margin: 0; }
.clarity-shop-page #sit_pvi_thumb .img_thumb {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.clarity-shop-page #sit_pvi_thumb img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--clarity-border);
    border-radius: 0;
    object-fit: cover;
    transition: border-color .16s;
}
/* 지금 보고 있는 썸네일. Swiper 가 thumbs 짝에 이 클래스를 붙여 준다. */
.clarity-shop-page #sit_pvi_thumb .swiper-slide-thumb-active img { border-color: var(--clarity-text); }
.clarity-shop-page #sit_pvi_thumb .img_thumb:focus-visible img { border-color: var(--clarity-primary); }

/* 관련상품. 한 칸 마크업은 목록과 같으므로 폭만 Swiper 에 맡긴다. */
.clarity-shop-page .clarity-relation-swiper { position: relative; overflow: hidden; }
.clarity-shop-page .clarity-relation-swiper .sct_li { width: auto; height: auto; margin: 0; }
.clarity-shop-page :is(.clarity-relation-prev, .clarity-relation-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.clarity-shop-page .clarity-relation-prev { left: .25rem; }
.clarity-shop-page .clarity-relation-next { right: .25rem; }

/* 배너 위의 점은 사진 위에 얹히므로 흰색으로 둔다. */
.clarity-shop-page .clarity-banner-swiper {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .45;
}

/* --- 분류 칩 줄의 넘김 표시 ---
   화살표 두 개와 막대를 칩 아래 한 덩어리로 모은다. */
.clarity-shop-page .clarity-catrow-pager {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 1rem;
    margin-top: 18px;
}

.clarity-shop-page .clarity-catrow-nav {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: 999px;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    cursor: pointer;
    font-size: .95rem;
    transition: border-color .16s, background .16s, color .16s;
}

.clarity-shop-page .clarity-catrow-nav:hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* 끝에 닿으면 Swiper 가 disabled 클래스를 붙인다. 눌러도 아무 일이
   없다는 것을 눈으로 알 수 있게 흐리게 둔다. */
.clarity-shop-page .clarity-catrow-nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.clarity-shop-page .clarity-catrow-nav.swiper-button-disabled:hover {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
}

/* 어디쯤 보고 있는지 알려 주는 막대. Swiper 의 scrollbar 를 쓰되 기본
   회색 대신 우리 토큰으로 칠한다. */
.clarity-shop-page .clarity-catrow-scrollbar {
    position: relative;
    width: 100%;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: var(--clarity-border);
    cursor: grab;
}

.clarity-shop-page .clarity-catrow-scrollbar:active { cursor: grabbing; }

.clarity-shop-page .clarity-catrow-scrollbar .swiper-scrollbar-drag {
    border-radius: 999px;
    background: var(--clarity-primary);
}

/* 분류가 한 줄에 다 들어가면 Swiper 가 단추와 막대를 잠근다. 통째로 감춘다. */
.clarity-shop-page .clarity-catrow-pager:has(.swiper-scrollbar-lock) { display: none; }

@media (max-width: 639px) {
    .ondam-catrow {
        margin-top: 24px;
    }

    .ondam-catrow a {
        min-height: 128px;
        padding: 14px 6px;
    }

    .ondam-catrow .ondam-catrow-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ondam-catrow a,
    .ondam-catrow a::after,
    .ondam-catrow .ondam-catrow-icon {
        transition: none;
    }
}

/* 포토리뷰의 좌우 단추. */
.clarity-shop-page :is(.clarity-review-prev, .clarity-review-next) { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.clarity-shop-page .clarity-review-prev { left: .25rem; }
.clarity-shop-page .clarity-review-next { right: .25rem; }

/* 아주 좁은 화면(320px 대). 상품 카드를 두 열로 두면 한 칸이 100px 남짓이라
   별점 · 리뷰수 · 담기가 접혀도 자리가 모자라 카드 밖으로 밀린다. 한 열로
   내린다. 실제 휴대폰은 UA 로 모바일 스킨을 받지만, PC 스킨을 좁게 보는
   경우(창 줄이기 · 분할 화면)에도 가로로 밀리지 않아야 한다. */
@media (max-width: 380px) {
    .clarity-shop-page .sct,
    .ondam-timesale-items .sct { grid-template-columns: minmax(0, 1fr); }

    /* 헤더 아이콘 셋도 이 폭에서는 간격을 줄여야 들어간다. */
    .clarity-shop-actions { gap: .25rem; }
}