/* 품목 통합 목록 (shop/hb_items.php) — 브랜드샵 칩·페이징과 같은 톤 */
.hb-ig{ max-width:1320px; margin:0 auto; padding:24px 16px 60px; }

/* 품목 탭 */
.hb-ig-grps{ display:flex; justify-content:center; gap:28px; border-bottom:1px solid #eee; margin-bottom:28px; }
.hb-ig-grps a{ padding:10px 2px 12px; font-size:15px; color:#888; text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.hb-ig-grps a.on{ color:#212121; font-weight:700; border-bottom-color:#212121; }

.hb-ig-hd{ text-align:center; margin-bottom:18px; }
.hb-ig-hd h1{ font-size:26px; font-weight:800; margin:0 0 4px; color:var(--ink,#262626); }
.hb-ig-hd p{ font-size:13px; color:#888; margin:0; }
.hb-ig-hd b{ color:#212121; }

/* 칩 공통 */
.hb-ig-subs a, .hb-ig-filter dd a, .hb-ig-more{
    display:inline-flex; align-items:center; gap:4px; border:1px solid #e5e5e5; border-radius:16px;
    padding:6px 13px; font-size:13px; color:#555; text-decoration:none; background:#fff; white-space:nowrap; cursor:pointer; }
.hb-ig-subs a span, .hb-ig-filter dd a span{ color:#aaa; font-size:11.5px; }
.hb-ig-subs a.on, .hb-ig-filter dd a.on{ background:#212121; color:#fff; border-color:#212121; }
.hb-ig-subs a.on span, .hb-ig-filter dd a.on span{ color:#bbb; }
.hb-ig-subs a:hover, .hb-ig-filter dd a:hover{ border-color:#212121; }

/* 종류 칩 */
.hb-ig-subs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:18px; }

/* 필터 */
.hb-ig-filter{ border-top:1px solid #212121; border-bottom:1px solid #eee; margin-bottom:14px; }
.hb-ig-filter summary{ display:none; }
.hb-ig-filter dl{ display:flex; align-items:flex-start; margin:0; padding:12px 4px; border-bottom:1px solid #f2f2f2; }
.hb-ig-filter dl:last-child{ border-bottom:0; }
.hb-ig-filter dt{ flex:0 0 70px; font-size:13px; font-weight:700; padding-top:6px; color:#212121; }
.hb-ig-filter dd{ flex:1; display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.hb-ig-brands a.more{ display:none; }
.hb-ig-brands.open a.more{ display:inline-flex; }
.hb-ig-more{ border-style:dashed; color:#888; }

/* 선택 조건 + 정렬 */
.hb-ig-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; min-height:36px; }
.hb-ig-sel{ display:flex; flex-wrap:wrap; gap:6px; }
.hb-ig-sel a{ font-size:12.5px; padding:4px 10px; border-radius:14px; background:#f3f3f3; color:#333; text-decoration:none; }
.hb-ig-sel a.reset{ background:none; color:#888; text-decoration:underline; }
.hb-ig-sort{ border:1px solid #ddd; border-radius:4px; padding:7px 28px 7px 10px; font-size:13px; background:#fff; }

/* 목록: list.10 스킨이 자체 제목 박스를 출력 → 이 페이지에서는 위 제목을 쓰므로 숨김 */
.hb-ig-grid > .container:first-child{ display:none; }
.hb-ig-grid .list10-wrap{ max-width:none; padding:0; }
.hb-ig-grid .list10-wrap > .bg-white{ border:0 !important; padding:8px 0 !important; }
.hb-ig-empty{ text-align:center; padding:80px 0; color:#888; font-size:14px; }
.hb-ig-empty a{ margin-left:8px; color:#212121; }

.hb-ig-paging{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:36px; }
.hb-ig-paging a, .hb-ig-paging strong{ min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e5e5; border-radius:4px; font-size:13px; color:#555; text-decoration:none; }
.hb-ig-paging strong{ background:#212121; color:#fff; border-color:#212121; }

@media (max-width:768px){
    .hb-ig{ padding:14px 16px 40px; }
    .hb-ig-grps{ justify-content:flex-start; gap:20px; overflow-x:auto; margin:0 -16px 18px; padding:0 16px; }
    .hb-ig-grps a{ flex:0 0 auto; font-size:14px; }
    .hb-ig-hd h1{ font-size:21px; }
    .hb-ig-subs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin:0 -16px 12px; padding:0 16px 2px; }
    .hb-ig-subs a{ flex:0 0 auto; }
    .hb-ig-filter summary{ display:flex; align-items:center; gap:6px; list-style:none; padding:11px 4px; font-size:14px; font-weight:700; cursor:pointer; }
    .hb-ig-filter summary::-webkit-details-marker{ display:none; }
    .hb-ig-filter summary::after{ content:'+'; margin-left:auto; font-size:18px; font-weight:400; }
    .hb-ig-filter[open] summary::after{ content:'−'; }
    .hb-ig-filter summary b{ background:#212121; color:#fff; border-radius:10px; font-size:11px; padding:1px 7px; }
    .hb-ig-filter dl{ flex-direction:column; gap:8px; }
    .hb-ig-filter dt{ flex:none; padding-top:0; }
    .hb-ig-bar{ flex-wrap:wrap; }
    .hb-ig-sort{ margin-left:auto; }
    .hb-ig-paging{ gap:5px; }
    .hb-ig-paging a, .hb-ig-paging strong{ min-width:31px; height:31px; font-size:12.5px; }
}