/* BASIC css start */
/* [1] 기본 레이아웃 및 공통 요소 */
.full-wrapper { max-width: 1200px; }
.shopbrand-header { padding-top: var(--cw-size-60); background-color: var(--cw-color-white); }
.shopbrand-header__title { display: flex; align-items: center; gap: var(--cw-size-10); font-size: var(--cw-size-24); line-height: var(--cw-size-32); font-weight: 700; color: var(--cw-heading-color); }


/* [2] 내비게이션 (데스크톱 기반) */
.shopbrand-header__nav-wrapper 
:where(.shopbrand-header__nav, .shopbrand-header__nav__s){

  display:flex;
    flex-wrap:nowrap;

    overflow-x:auto;
    overflow-y:hidden;

    gap:20px;
    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;

    cursor:grab;
}

.shopbrand-header__nav-wrapper 
:where(.shopbrand-header__nav, .shopbrand-header__nav__s):active{
    cursor:grabbing;
}

.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s).dragging { cursor: grabbing; }

/* 스크롤바 숨김 (Chrome, Safari, Edge, Firefox) */
.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s)::-webkit-scrollbar { display: none; }


/* 내비게이션 아이템 공통 */
.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s) li {flex:0 0 auto;}
.shopbrand-header__nav-wrapper :where(:has(li)) a { font-size: var(--cw-size-16); line-height: var(--cw-size-24); color: var(--cw-heading-color); }

/* 아이템 줄바꿈 방지 */
.shopbrand-header__nav-wrapper li{
    flex:0 0 auto;
}
.shopbrand-header__nav-wrapper{
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;

    -webkit-touch-callout:none;
}

/* 이미지 드래그 방지 */
.shopbrand-header__nav-wrapper img{
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

    pointer-events:none; /* 이미지 위에서도 스와이프 가능 */
}

/* 이미지 메뉴 (2차 내비게이션) 스타일 */
.shopbrand-header__nav-wrapper li a img {
    height:36px;
    object-fit:contain;
    display:block;

    padding:4px 18px;

    border:1px solid #e5e5e5;
    border-radius:10px;

    -webkit-user-drag:none;
    user-drag:none;
}

.shopbrand-header__nav-wrapper 
:where(.shopbrand-header__nav, .shopbrand-header__nav__s) li a{

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

    -webkit-touch-callout:none; /* iOS 롱탭 방지 */
}

.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s) li:has(a img) { margin-right: 0px; }
.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s) li a:has(img) {
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:0;      /* 텍스트 숨김 */
    line-height:0;

    padding:0;

    -webkit-user-select:none;
    user-select:none;
}


/* 마우스 오버 시 이미지만 검은 테두리 적용 */
.shopbrand-header__nav-wrapper :where(.shopbrand-header__nav, .shopbrand-header__nav__s) li a:hover img {
    outline: 1px solid #000; 
    outline-offset: -2px; 
}


.shopbrand-header__nav {
    margin-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
    gap: 30px;
}


.shopbrand-header__nav__s {
    margin-top: 16px;          /* 1차와의 간격 통일 */
    padding: 0 10px;
    gap: 30px;                 /* 내부 아이템 간격 */
}


/* 활성 상태 표시 */
.shopbrand-header__nav .active { position: relative; border-bottom: none; }
.shopbrand-header__nav .active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 1px; background: var(--cw-heading-color);
}
.shopbrand-header__nav .active a {
    font-weight: 700;
    color: var(--cw-heading-color);
}
.shopbrand-header__nav__s .active a {
    font-weight: 600;
    color: var(--cw-heading-color);
    border-bottom: 1px solid var(--cw-heading-color);
}


.shopbrand-header__nav + .shopbrand-header__nav__s li a { display: inline-block; padding: 8px 0; font-size: var(--cw-size-14); line-height: 1.2; color: var(--cw-color-80); }
.shopbrand-header__nav + .shopbrand-header__nav__s .active a { color: var(--cw-heading-color); font-weight: bold; }

/* [3] 상품 리스트 및 섹션 스타일 */
.category-title { padding: var(--cw-size-48) 0; text-align: center; }
.category-title img { max-width: 100%; }

.best-wrapper, .recmd-wrapper, .promotion-wrapper { margin-top: var(--cw-size-48); margin-bottom: ;}
.title-btns { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--cw-size-16); }
.title-btns span { font-size: var(--cw-size-18); font-weight: 700; line-height: var(--cw-size-26); }
.title-btns a { display: inline-block; width: var(--cw-size-28); height: var(--cw-size-28); }
.title-btns a.disable { opacity: .3; }

.products-wrapper { padding-top: var(--cw-size-60); }
.products-wrapper .prds-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: var(--cw-size-16); }
.products-wrapper .prds-title h2 { font-weight: 400; font-size: var(--cw-size-14); line-height: var(--cw-size-20); color: var(--cw-heading-color); }
.products-wrapper .prds-title strong { font-weight: 700; }

/* 상품 목록 그리드 */
.products-wrapper .prds-list.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cw-size-40) var(--cw-size-20); margin-top: var(--cw-size-40); }
.products-wrapper .prds-list.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cw-size-50) var(--cw-size-8); margin-top: var(--cw-size-60); }
.products-wrapper :where(.prds-list.list, .prds-list.gallery):first-of-type { margin-top: 0 !important; }
/* 썸네일 이미지 디자인 */
.products-wrapper .prds--image > img {
    display: block; width: 100%; height: auto; border: 1px solid var(--cw-color-30); border-radius: 16px; transition: border-color 0.2s ease; }
.products-wrapper .prds-list--item:hover .prds--image > img { border-color: #000; }


.products-wrapper .prds-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: var(--cw-size-16); }
.products-wrapper .prds-title h2 { font-weight: 400; font-size: var(--cw-size-14); line-height: var(--cw-size-20); color: var(--cw-heading-color); }
.products-wrapper .prds-title strong { font-weight: 700; }
.products-wrapper .prds-title .cw-select-box { min-width: var(--cw-size-100); }
.products-wrapper .prds-title .thumbnail-type { display: flex; flex-wrap: wrap; align-items: center; }
.products-wrapper .prds-title .thumbnail-type .type::before { content: ""; display: inline-block; width: 1px; height: var(--cw-size-14); margin: 0 var(--cw-size-16); background-color: var(--cw-color-30); vertical-align: middle; }


.prds-btn {
    display: flex;
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;      /* 세로 중앙 정렬 (필요시) */
    margin-top: 30px;         /* 상단 상품 목록과의 간격 */
    width: 100%;              /* 전체 너비 확보 */
}

/* 버튼 내부 텍스트와 아이콘 정렬 */
.prds-btn .btn {
    display: inline-flex;     /* 텍스트와 아이콘을 가로로 나열 */
    align-items: center;
    justify-content: center;
    gap: 8px;                 /* 텍스트와 화살표 사이 간격 */
    padding: 5px 18px;       /* 버튼 크기 조절 */
    min-width: 150px;         /* 버튼 최소 너비 설정 */
}
.best-wrapper,
.recmd-wrapper {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;   /* 가격과 실선 사이 간격 */
    margin-bottom: 30px;    /* 다음 섹션과 간격 */
}

.best-wrapper .prds--image,
.recmd-wrapper .prds--image > img {
    border-radius: 16px;
    overflow: hidden;   /* 핵심 */
    border: 1px solid #ddd;
}

.best-wrapper .prds-list--item:hover .prds--image,
.recmd-wrapper .prds-list--item:hover .prds--image > img {
    border-color: #000;
}

/* 가격 아래 여백 */
.best-wrapper .prds--price-wrap, 
.recmd-wrapper .prds--price-wrap {
    margin-bottom: 10px;
}


/* [4] 미디어 쿼리 - 태블릿 (Max 1200px) */
@media (max-width: 1200px) {
    .full-wrapper { --bs-gutter-x: var(--cw-size-50); }
    .shopbrand-header { 
        position: relative; 
        min-height: 100px; /* 아이콘이 내려갈 최소 공간 확보 */
    }
    .shopbrand-header__title { 
        display: block !important; 
        position: static; /* 부모 흐름을 방해하지 않도록 */
    }

    .shopbrand-header__nav .active::after { bottom: -12px !important; }
    .shopbrand-header__nav-wrapper { user-select:none;
-webkit-user-select:none; }
    

    /* 이미지 크기나 여백 미세 조정 (이미지만 부각되도록) */
.shopbrand-header__nav-wrapper li a img {
    height:36px;
    object-fit:contain;
    display:block;

    padding:4px 20px;

    border:1px solid #e5e5e5;
    border-radius:10px;

    -webkit-user-drag:none;
    user-drag:none;
}


    /* 그리드 조정 */
    .products-wrapper .prds-list.list { grid-template-columns: 1fr; }
    .products-wrapper .prds-list.gallery { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    
    
.shopbrand-header__title .category-count { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        
        /* 절대 위치를 화면 혹은 헤더 끝으로 고정 */
        position: fixed;   /* 스크롤을 내려도 항상 우측 하단에 떠 있게 함 */
        right: 20px;       /* 오른쪽에서 20px */
        bottom: 80px;      /* 바닥에서 20px */
        
        z-index: 9999;     /* 다른 어떤 요소보다 위에 오도록 최댓값 부여 */
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 하단에 떠 있는 효과 */
        height: 40px;      /* 모바일에서 누르기 편한 크기 */
        padding: 0 15px 0 35px !important;
        border: 1px solid #eee;
    }

    
}


/* [5] 미디어 쿼리 - 모바일 (Max 767.98px) */
@media (max-width: 767.98px) {

  .shopbrand-header__nav-wrapper 
  .shopbrand-header__nav li a:has(img),
  .shopbrand-header__nav-wrapper 
  .shopbrand-header__nav__s li a:has(img){
      font-size: 0 !important;
      line-height: 0 !important;
      padding: 0 !important;
  }
      /* 그리드 조정 */
    .products-wrapper .prds-list.list { grid-template-columns: 1fr; }
    .products-wrapper .prds-list.gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }

}
/* BASIC css end */