@charset "utf-8";
/* =========================================================
 * 소소도담 상품목록 주변 요소 (분류 칩, 현재 위치, 페이지 이동)
 * SOSODODAM_SHOP_CHROME_V1 (2026-11-04)
 *
 * 적용 화면: 상품 목록(shop/list.php), 검색 결과(shop/search.php)
 * 색과 둥글기는 list.40 카드(sosododam.list40.grid.css)와 같은 값을 씁니다.
 * 기존 theme 규칙(style.shop.css 등)이 !important 를 많이 쓰므로
 * 이 파일은 항상 마지막에 로드되고(listcategory.skin.php, search.skin.php 에서 로드),
 * #sct, #ssch 아래로 범위를 좁혀 다른 화면에는 영향을 주지 않습니다.
 * ========================================================= */

#sct,
#ssch {
    --ssd-ink:        #3a3336;
    --ssd-ink-soft:   #5f5559;
    --ssd-muted:      #a39a9e;
    --ssd-line:       #f1e8eb;
    --ssd-cream:      #fbf7f4;
    --ssd-white:      #ffffff;
    --ssd-pink:       #f7afc4;
    --ssd-pink-soft:  #fff1f5;
    --ssd-pink-deep:  #c95f82;
}

/* ---------------------------------------------------------
 * 1. 분류 칩 (목록: #sct_ct_1 / 검색: #ssch_cate)
 *    가로로 밀어 넘기는 알약 모양. 현재 분류는 분홍색으로 표시
 * --------------------------------------------------------- */
#sct #sct_ct_1.sct_ct,
#ssch #ssch_cate {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#sct #sct_ct_1.sct_ct > ul,
#ssch #ssch_cate .swiper-container-ss {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sct #sct_ct_1 .swiper-container-ss,
#ssch #ssch_cate .swiper-container-ss {
    overflow: hidden;
    padding: 2px 0;
}
#sct #sct_ct_1 .swiper-wrapper-ss,
#ssch #ssch_cate .swiper-wrapper-ss {
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 600px 이상(PC, 태블릿, 좁은 PC 창): 칩이 잘리지 않도록 줄바꿈해서 전부 보여 줍니다.
   슬라이드 스크립트가 붙이는 이동값(transform)과 간격(margin)은 무시합니다. */
@media (min-width: 600px) {
    #sct #sct_ct_1 .swiper-wrapper-ss,
    #ssch #ssch_cate .swiper-wrapper-ss {
        flex-wrap: wrap !important;
        gap: 8px;
        width: auto !important;
        transform: none !important;
        transition: none !important;
    }
    #sct #sct_ct_1 li.swiper-slide-ss,
    #ssch #ssch_cate li.swiper-slide-ss {
        flex-shrink: 1;
        margin: 0 !important;
    }
}

#sct #sct_ct_1 li.swiper-slide-ss,
#ssch #ssch_cate li.swiper-slide-ss {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0 !important;
    list-style: none;
}

#sct #sct_ct_1 li a,
#ssch #ssch_cate li a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 38px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--ssd-line) !important;
    border-radius: 999px !important;
    background: var(--ssd-white) !important;
    color: var(--ssd-ink-soft) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
#sct #sct_ct_1 li a:hover,
#ssch #ssch_cate li a:hover {
    border-color: var(--ssd-pink) !important;
    background: var(--ssd-pink-soft) !important;
    color: var(--ssd-pink-deep) !important;
}
#sct #sct_ct_1 li a[aria-current="page"],
#sct #sct_ct_1 li a.sct_ct_parent,
#sct #sct_ct_1 li a.main_color {
    border-color: var(--ssd-pink) !important;
    background: var(--ssd-pink-soft) !important;
    color: var(--ssd-pink-deep) !important;
    font-weight: 700 !important;
}
#sct #sct_ct_1 li a.ss_back,
#ssch #ssch_cate li:last-child a[style] {
    border-style: dashed !important;
    background: transparent !important;
    color: var(--ssd-muted) !important;
}
#sct #sct_ct_1 li a:focus-visible,
#ssch #ssch_cate li a:focus-visible {
    outline: 2px solid var(--ssd-pink-deep);
    outline-offset: 2px;
}

/* 분류 옆 상품 수 */
#sct .ssd-chip-cnt,
#ssch .ssd-chip-cnt {
    color: var(--ssd-muted);
    font-size: 12px;
    font-weight: 400;
}
#sct #sct_ct_1 li a[aria-current="page"] .ssd-chip-cnt,
#sct #sct_ct_1 li a.sct_ct_parent .ssd-chip-cnt,
#sct #sct_ct_1 li a:hover .ssd-chip-cnt,
#ssch #ssch_cate li a:hover .ssd-chip-cnt {
    color: var(--ssd-pink-deep);
}

/* ---------------------------------------------------------
 * 2. 현재 위치 (위치와 크기는 기존 테마 값을 그대로 두고 모양만 정리)
 * --------------------------------------------------------- */
#sct #sct_location.is_list {
    color: var(--ssd-muted);
    font-size: 13px;
}
#sct #sct_location .go_home,
#sct #sct_location i.dividing-line {
    color: var(--ssd-muted) !important;
}
#sct #sct_location .shop_select_to_html .category_title {
    color: var(--ssd-ink-soft);
    font-size: 13px;
}
#sct #sct_location .shop_select_to_html .category_title i {
    color: var(--ssd-muted);
}
#sct #sct_location .shop_select_to_html:hover .category_title,
#sct #sct_location .shop_select_to_html:hover .category_title i {
    color: var(--ssd-pink-deep);
}
#sct #sct_location .shop_select_to_html .menulist {
    border: 1px solid var(--ssd-line);
    border-radius: 14px;
    background: var(--ssd-white);
    box-shadow: 0 8px 24px rgba(58, 51, 54, .08);
}
#sct #sct_location .shop_select_to_html .option {
    color: var(--ssd-ink-soft);
    font-size: 14px;
}
#sct #sct_location .shop_select_to_html .option:hover,
#sct #sct_location .shop_select_to_html .option.focus,
#sct #sct_location .shop_select_to_html .option.selected.focus {
    background-color: var(--ssd-pink-soft);
}
#sct #sct_location .shop_select_to_html .option.selected,
#sct #sct_location .shop_select_to_html .option.selected a {
    color: var(--ssd-pink-deep);
}

/* ---------------------------------------------------------
 * 3. 정렬 줄을 감싸는 회색 박스 제거 (정렬 알약 자체는 기존 그대로)
 * --------------------------------------------------------- */
#sct #sct_sortlst {
    border: 0 !important;
    background: transparent !important;
}

/* ---------------------------------------------------------
 * 4. 페이지 이동
 *    보라색 현재 페이지를 브랜드 분홍으로. 숫자는 둥근 버튼
 * --------------------------------------------------------- */
#sct .pg_wrap,
#ssch .pg_wrap {
    float: none !important;
    width: 100%;
    margin: 44px 0 8px !important;
    text-align: center;
}
#sct .pg_wrap .pg,
#ssch .pg_wrap .pg {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#sct .pg_wrap .pg_page,
#sct .pg_wrap .pg_current,
#ssch .pg_wrap .pg_page,
#ssch .pg_wrap .pg_current {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 8px;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--ssd-ink-soft) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1 !important;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
#sct .pg_wrap .pg_page:hover,
#ssch .pg_wrap .pg_page:hover {
    background: var(--ssd-pink-soft) !important;
    color: var(--ssd-pink-deep) !important;
}
#sct .pg_wrap .pg_current,
#ssch .pg_wrap .pg_current {
    border-color: var(--ssd-pink) !important;
    background: var(--ssd-pink) !important;
    color: var(--ssd-ink) !important;
    font-weight: 700;
}
#sct .pg_wrap .pg_start,
#sct .pg_wrap .pg_prev,
#sct .pg_wrap .pg_next,
#sct .pg_wrap .pg_end,
#ssch .pg_wrap .pg_start,
#ssch .pg_wrap .pg_prev,
#ssch .pg_wrap .pg_next,
#ssch .pg_wrap .pg_end {
    padding: 0 14px;
    color: var(--ssd-muted) !important;
    font-size: 13px;
}
#sct .pg_wrap .pg_page:focus-visible,
#ssch .pg_wrap .pg_page:focus-visible {
    outline: 2px solid var(--ssd-pink-deep);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
 * 5. 옛 스킨(list.10~30)의 빈 목록 문구. list.40 의 빈 목록은 기존 디자인 유지
 * --------------------------------------------------------- */
#sct .sct_noitem:not(.ssd-plist__empty) {
    margin: 40px 0;
    padding: 56px 16px;
    border: 1px dashed var(--ssd-line);
    border-radius: 16px;
    background: var(--ssd-cream);
    color: var(--ssd-muted);
    font-size: 15px;
    text-align: center;
}

/* ---------------------------------------------------------
 * 6. 모바일: 칩을 조금 작게, 페이지 이동은 가운데 숫자 위주로
 * --------------------------------------------------------- */
@media (max-width: 767px) {
    #sct #sct_ct_1.sct_ct {
        margin-top: 14px !important;
    }
    #sct #sct_ct_1 li a,
    #ssch #ssch_cate li a {
        height: 36px;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    #sct .pg_wrap,
    #ssch .pg_wrap {
        margin-top: 32px !important;
    }
    #sct .pg_wrap .pg,
    #ssch .pg_wrap .pg {
        gap: 4px;
    }
    #sct .pg_wrap .pg_page,
    #sct .pg_wrap .pg_current,
    #ssch .pg_wrap .pg_page,
    #ssch .pg_wrap .pg_current {
        min-width: 36px;
        height: 36px;
    }
    #sct .pg_wrap .pg_start,
    #sct .pg_wrap .pg_end,
    #ssch .pg_wrap .pg_start,
    #ssch .pg_wrap .pg_end {
        display: none !important;
    }
}

/* 480px 이하: 이전/다음은 화살표로 (글자는 스크린리더용으로 남겨 둡니다) */
@media (max-width: 480px) {
    #sct .pg_wrap .pg_prev,
    #sct .pg_wrap .pg_next,
    #ssch .pg_wrap .pg_prev,
    #ssch .pg_wrap .pg_next {
        padding: 0 !important;
        min-width: 34px !important;
        font-size: 0 !important;
    }
    #sct .pg_wrap .pg_prev::before,
    #ssch .pg_wrap .pg_prev::before {
        content: "\2039";
        font-size: 22px;
        line-height: 1;
    }
    #sct .pg_wrap .pg_next::before,
    #ssch .pg_wrap .pg_next::before {
        content: "\203A";
        font-size: 22px;
        line-height: 1;
    }
    #sct .pg_wrap .pg_page,
    #sct .pg_wrap .pg_current,
    #ssch .pg_wrap .pg_page,
    #ssch .pg_wrap .pg_current {
        min-width: 34px;
        height: 34px;
        padding: 0 6px;
    }
}

/* 360px 이하(작은 폰): 간격을 조금 더 좁혀 한 줄 유지 */
@media (max-width: 360px) {
    #sct .pg_wrap .pg,
    #ssch .pg_wrap .pg {
        gap: 2px;
    }
    #sct .pg_wrap .pg_prev,
    #sct .pg_wrap .pg_next,
    #sct .pg_wrap .pg_page,
    #sct .pg_wrap .pg_current,
    #ssch .pg_wrap .pg_prev,
    #ssch .pg_wrap .pg_next,
    #ssch .pg_wrap .pg_page,
    #ssch .pg_wrap .pg_current {
        min-width: 32px !important;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sct #sct_ct_1 li a,
    #ssch #ssch_cate li a,
    #sct .pg_wrap .pg_page,
    #ssch .pg_wrap .pg_page {
        transition: none;
    }
}