/* product-filter.css — 필터 UI, 레이아웃, 필터 아이콘, 플로팅 필터 */
/* 원본 product.css 분리 리팩토링 2026-06-10 */

/* =========================================================
   파일명: /assets/css/product.css
   역할: 제품 분류 페이지 / 필터 / 보기 방식 / 목록 / 상세
   기준: 현재 PHP 템플릿 구조, category.txt 태그 기반
========================================================= */
.product-control-panel{margin-bottom:28px;padding:28px;border:1px solid #d7e8f8;border-radius:0;background:linear-gradient(180deg,#f8fbff 0%,#f2f8ff 100%);box-shadow:0 14px 34px rgba(15,35,67,.06)}
.filter-mode-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}.filter-mode-tabs button{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border:1px solid #cfe1f4;border-radius:0;background:#fff;color:#102d4c;font-size:17px;font-weight:900;letter-spacing:-.55px;cursor:pointer;box-shadow:0 8px 18px rgba(15,65,120,.06);transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.filter-mode-tabs button:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb}.filter-mode-tabs button.active{background:#0f66bb;color:#fff;border-color:#0f66bb;box-shadow:0 14px 26px rgba(15,102,187,.22)}
.filter-groups{display:grid;gap:18px}.filter-group{padding:22px 24px;border:1px solid #dcebf8;border-radius:0;background:#fff;box-shadow:0 10px 24px rgba(15,35,67,.045)}.filter-group h3{display:flex;align-items:center;gap:8px;margin:0 0 15px;color:#102d4c;font-size:19px;font-weight:900;letter-spacing:-.65px}.filter-group h3::before{content:"";display:inline-block;width:7px;height:20px;border-radius:0;background:#0f66bb}.filter-chip-row{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border:1px solid #dbe5ef;border-radius:0;background:#f6f8fb;color:#344255;font-size:13px;font-weight:900;line-height:1;cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}.filter-chip:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb;background:#eef7ff}.filter-chip.active{background:#0f66bb;color:#fff;border-color:#0f66bb}.filter-result-count{margin-top:18px;padding:16px 20px;border-radius:0;background:#eaf5ff;color:#0f3f72;font-size:15px;font-weight:900}
.product-detail h2{font-size:38px}.detail-main-image{margin-top:26px;border:1px solid #dce7f3;background:#fff;padding:18px;border-radius:0}.detail-main-image img{width:100%;max-height:620px;object-fit:contain}.detail-html{margin-top:26px;line-height:1.8}.detail-html table{width:100%;border-collapse:collapse}.detail-html th,.detail-html td{border:1px solid #d9e2ee;padding:12px;text-align:left}.detail-html th{background:#f3f7fb;color:#102d4c}
/* =========================================================
   [제품 분류] 반자동 설비 / 날인기 필터 디자인
   - 반자동 설비와 날인기는 상단 메뉴에서 분리
   - 반자동 설비: 원물 기준 / 공정 기준
   - 날인기: 자동날인기 / TTO / 잉크젯
========================================================= */
.filter-primary-tabs{margin-bottom:14px}.filter-sub-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 16px;padding:12px;border:1px solid #dbeaf8;border-radius:0;background:#eef7ff}.filter-sub-tabs button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #cfe1f4;border-radius:0;background:#fff;color:#102d4c;font-size:15px;font-weight:900;letter-spacing:-.45px;cursor:pointer;box-shadow:0 6px 14px rgba(15,65,120,.05);transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}.filter-sub-tabs button:hover{transform:translateY(-1px);border-color:#9fcaf2;color:#0f66bb}.filter-sub-tabs button.active{background:#0f66bb;color:#fff;border-color:#0f66bb;box-shadow:0 10px 20px rgba(15,102,187,.18)}.semi-filter-section[hidden]{display:none}.printer-filter-groups{margin-top:4px}

/* =========================================================
   [제품 필터 UI 고도화]
   - 버튼은 HTML/CSS 유지
   - 배경 오브젝트만 /images/ui/*.svg 사용
   - 모바일에서는 배경 오브젝트를 약화하여 가독성 유지
========================================================= */
.filter-mode-tabs button,
.filter-sub-tabs button{
  position:relative;
  overflow:hidden;
}
.filter-mode-tabs button::after,
.filter-sub-tabs button::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-36px;
  width:120px;
  height:120px;
  border-radius:0;
  background:radial-gradient(circle,rgba(15,102,187,.12) 0%,rgba(15,102,187,0) 68%);
  pointer-events:none;
}
.filter-mode-tabs button.active::after,
.filter-sub-tabs button.active::after{
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 70%);
}
.filter-group::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:0;
  background:linear-gradient(90deg,rgba(15,102,187,.035),rgba(15,102,187,0) 45%);
  pointer-events:none;
}
.filter-group--material .filter-group-bg{background-image:url('/images/ui/filter-bg-material.svg')}
.filter-group--process .filter-group-bg{background-image:url('/images/ui/filter-bg-process.svg')}
.filter-group--package .filter-group-bg{background-image:url('/images/ui/filter-bg-package.svg')}
.filter-group--printer_type .filter-group-bg{background-image:url('/images/ui/filter-bg-printer.svg')}
.filter-group--consumable_ink .filter-group-bg,
.filter-group--consumable_sensor .filter-group-bg,
.filter-group--consumable_part .filter-group-bg{background-image:url('/images/ui/filter-bg-consumable.svg')}
.filter-group h3,
.filter-group h3{
  font-size:22px;
  letter-spacing:-.75px;
}
.filter-group h3::before{
  display:none;
  content:none;
}
.filter-chip-icon::before,
.filter-chip-icon::after{
  content:"";
  position:absolute;
  display:block;
  border-color:currentColor;
}
.filter-chip--all .filter-chip-icon{
  border:0;
  display:grid;
  grid-template-columns:repeat(2,8px);
  grid-template-rows:repeat(2,8px);
  gap:4px;
}
.filter-chip--all .filter-chip-icon::before,
.filter-chip--all .filter-chip-icon::after{
  position:static;
  width:8px;
  height:8px;
  border:2px solid currentColor;
  border-radius:0;
  box-sizing:border-box;
  box-shadow:12px 0 0 -2px transparent,0 12px 0 -2px transparent;
}
.filter-chip--liquid .filter-chip-icon{
  border-radius:0;
  transform:rotate(45deg);
}
.filter-chip--liquid .filter-chip-icon::before{
  left:7px;
  top:4px;
  width:6px;
  height:12px;
  border-left:2px solid currentColor;
  transform:rotate(-45deg);
}
.filter-chip--powder .filter-chip-icon{
  border:0;
}
.filter-chip--powder .filter-chip-icon::before{
  inset:4px;
  border-radius:0;
  background:currentColor;
  box-shadow:-8px 5px 0 -1px currentColor,8px 5px 0 -1px currentColor,0 -8px 0 -1px currentColor,0 8px 0 -1px currentColor;
}
.filter-chip--granule .filter-chip-icon{
  border-radius:0;
}
.filter-chip--granule .filter-chip-icon::before{
  inset:6px;
  border:2px dotted currentColor;
  border-radius:0;
}
.filter-chip--teabag .filter-chip-icon,
.filter-chip--stick .filter-chip-icon,
.filter-chip--three_side .filter-chip-icon,
.filter-chip--four_side .filter-chip-icon{
  border-radius:0;
}
.filter-chip--teabag .filter-chip-icon::before,
.filter-chip--stick .filter-chip-icon::before{
  left:5px;
  top:-5px;
  width:12px;
  height:8px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(-22deg);
}
.filter-chip--bakery .filter-chip-icon{
  border-radius:0;
}
.filter-chip--bakery .filter-chip-icon::before{
  right:-4px;
  bottom:-4px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:0;
}
.filter-chip--vegetable .filter-chip-icon{
  border-radius:0;
  transform:rotate(-18deg);
}
.filter-chip--tray .filter-chip-icon{
  border-radius:0;
}
.filter-chip--tray .filter-chip-icon::before{
  left:3px;
  right:3px;
  bottom:4px;
  height:6px;
  border-top:2px solid currentColor;
}
.filter-chip--side_dish .filter-chip-icon{
  border-radius:0;
}
.filter-chip--industrial .filter-chip-icon{
  border-radius:0;
  transform:rotate(0deg);
}
.filter-chip--industrial .filter-chip-icon::before{
  left:3px;
  top:3px;
  width:14px;
  height:14px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(45deg);
}
.filter-chip--bottle_supply .filter-chip-icon,
.filter-chip--filling .filter-chip-icon,
.filter-chip--cap_supply .filter-chip-icon,
.filter-chip--capping .filter-chip-icon{
  border-radius:0;
}
.filter-chip--bottle_supply .filter-chip-icon::before,
.filter-chip--filling .filter-chip-icon::before,
.filter-chip--cap_supply .filter-chip-icon::before,
.filter-chip--capping .filter-chip-icon::before{
  left:6px;
  top:-7px;
  width:8px;
  height:7px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:0;
}
.filter-chip--weighing .filter-chip-icon{
  border-radius:0;
}
.filter-chip--weighing .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:5px;
  border-top:2px solid currentColor;
  transform:rotate(-18deg);
}
.filter-chip--sealing .filter-chip-icon,
.filter-chip--horizontal_packing .filter-chip-icon{
  border-radius:0;
}
.filter-chip--sealing .filter-chip-icon::before,
.filter-chip--horizontal_packing .filter-chip-icon::before{
  left:4px;
  top:10px;
  width:14px;
  border-top:2px solid currentColor;
}
.filter-chip--printing .filter-chip-icon,
.filter-chip--labeling .filter-chip-icon{
  border-radius:0;
}
.filter-chip--printing .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:2px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor;
}
.filter-chip--labeling .filter-chip-icon::before{
  left:5px;
  top:5px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:0;
}
.filter-chip--collecting .filter-chip-icon,
.filter-chip--custom_line .filter-chip-icon{
  border-radius:0;
}
.filter-chip--collecting .filter-chip-icon::before,
.filter-chip--custom_line .filter-chip-icon::before{
  left:4px;
  top:10px;
  width:14px;
  border-top:2px solid currentColor;
}
.filter-chip--etc .filter-chip-icon{
  border-radius:0;
}
.filter-chip--etc .filter-chip-icon::before{
  left:5px;
  top:9px;
  width:3px;
  height:3px;
  border-radius:0;
  background:currentColor;
  box-shadow:6px 0 0 currentColor,12px 0 0 currentColor;
}
.filter-result-count::before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:0;
  background:#0f66bb;
  color:#fff;
  font-size:13px;
  font-weight:900;
  font-style:normal;
}

@media (max-width:900px){
  .product-control-panel{padding:20px;border-radius:0}
  .filter-group{padding:22px 20px;min-height:auto}
  .filter-group-bg{width:260px;height:140px;opacity:.06;right:-48px;bottom:-34px}
  .filter-chip-row{gap:9px}
  .filter-chip{min-height:44px;min-width:auto;padding:9px 12px;border-radius:0;font-size:13px}
  .filter-chip-icon{width:18px;height:18px;border-width:2px}
  .filter-group h3{font-size:19px}
}
@media (max-width:640px){
  .filter-mode-tabs,.filter-sub-tabs{grid-template-columns:1fr;gap:9px}
  .filter-mode-tabs button,.filter-sub-tabs button{min-height:48px;font-size:15px}
  .filter-group{border-radius:0}
  .filter-group-bg{display:none}
  .filter-chip{width:auto;min-height:40px;padding:8px 11px;font-size:12px}
  .filter-chip-icon{display:none}
  .filter-result-count{font-size:13px;padding:13px 14px}
}

/* =========================================================
   [제품 필터 레이아웃 정리]
   - 카테고리 배경: /images/category-background/한글파일명.*
   - 버튼 동일 사이즈
   - PC: 첫 줄 5칸, 이후 줄은 왼쪽 1칸 비우고 4칸 배치
   - 모바일/태블릿은 자동 2~4칸으로 재정렬
========================================================= */
.product-control-panel{
  position:relative;
}
.product-control-panel > :not(.product-control-bg){
  position:relative;
  z-index:1;
}
.product-control-bg{
  position:absolute;
  right:-40px;
  top:24px;
  width:420px;
  height:260px;
  background-repeat:no-repeat;
  background-position:right top;
  background-size:contain;
  opacity:.045;
  pointer-events:none;
  z-index:0;
}
.filter-group-bg{
  right:-24px;
  bottom:-22px;
  width:390px;
  height:210px;
  opacity:.055;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
}
.filter-chip-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.filter-chip-row .filter-chip{
  width:100%;
  min-width:0;
  min-height:68px;
  height:68px;
  padding:0 14px;
  text-align:center;
}
.filter-chip-row .filter-chip:nth-child(4n+6){
  grid-column:2;
}
.filter-chip-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  line-height:1.25;
}
.filter-chip-icon{
  width:21px;
  height:21px;
}

@media (max-width:1200px){
  .filter-chip-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .filter-chip-row .filter-chip:nth-child(4n+6){
    grid-column:auto;
  }
  .product-control-bg{
    width:340px;
    height:220px;
  }
}

@media (max-width:768px){
  .product-control-bg,
  .filter-group-bg{
    opacity:.03;
  }
  .filter-chip-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .filter-chip-row .filter-chip{
    height:58px;
    min-height:58px;
    border-radius:0;
    font-size:14px;
  }
  .filter-chip-icon{
    display:none;
  }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 전체 보기 상단 분리 + 세부 필터 4칸 정렬
   파일명: /assets/css/product.css
   목적:
   - "원물 전체 / 공정 전체 / 백 형태 전체" 버튼을 세부 필터 위로 분리
   - 세부 필터 버튼은 PC 기준 4칸 그리드로 정렬
   - 버튼 높이/폭/간격을 통일하여 카테고리 박스 정돈감 개선
========================================================= */

.filter-group {
    position: relative;
    padding: 28px;
    overflow: hidden;
}

.filter-group h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.filter-chip-all-row {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    margin-bottom: 16px;
}

.filter-chip-all-row .filter-chip {
    min-width: 180px;
    min-height: 58px;

    padding: 0 24px;

    border-radius:0;

    font-size: 16px;
    font-weight: 900;

    box-shadow: 0 10px 22px rgba(15, 102, 187, 0.12);
}

.filter-chip-row--details {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.filter-chip-row--details .filter-chip {
    width: 100%;
    min-width: 0;
    min-height: 58px;

    padding: 0 14px;


    font-size: 15px;
    line-height: 1.25;
    text-align: center;
}

.filter-chip-row--details .filter-chip-label {
    display: block;
    word-break: keep-all;
}

.filter-group-bg {
    opacity: 0.035;
}

/* =========================================================
   [FILTER LAYOUT PATCH] 넓은 PC 화면 보정
========================================================= */

@media (min-width: 1201px) {
    .filter-group {
        padding: 30px 32px;
    }

    .filter-chip-all-row .filter-chip {
        min-width: 190px;
    }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 태블릿
========================================================= */

@media (max-width: 1024px) {
    .filter-chip-row--details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   [FILTER LAYOUT PATCH] 모바일
========================================================= */

@media (max-width: 768px) {
    .filter-group {
        padding: 22px;
    }

    .filter-chip-all-row {
        margin-bottom: 12px;
    }

    .filter-chip-all-row .filter-chip {
        width: 100%;
        min-width: 0;
        min-height: 54px;
    }

    .filter-chip-row--details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .filter-chip-row--details .filter-chip {
        min-height: 52px;
        font-size: 14px;
        border-radius:0;
    }

    .filter-group-bg {
        opacity: 0.025;
    }
}


/* =========================================================
   [103] 반자동 설비 2차 탭 디자인 정리
   - 원물 기준 / 공정 기준 계층 강조 완화
   - 메인탭보다 작고 가벼운 세그먼트 느낌
========================================================= */

.semi-filter-mode-tabs,
.filter-mode-tabs.filter-mode-tabs--sub{
  gap:10px;
  margin-top:14px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.semi-filter-mode-tabs .filter-mode-tab,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab{
  flex:0 0 auto;
  min-width:180px;
  height:48px;
  padding:0 24px;
  border:1px solid #cddff1;
  border-radius:0;
  background:#f8fbff;
  color:#48627e;
  font-size:15px;
  font-weight:800;
  box-shadow:none;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.semi-filter-mode-tabs .filter-mode-tab.active,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab.active{
  border-color:#8dbdea;
  background:#eef6ff;
  color:#0f66bb;
}

.semi-filter-mode-tabs .filter-mode-tab:hover,
.filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab:hover{
  transform:translateY(-1px);
  border-color:#9fc7ec;
  background:#f3f9ff;
}

@media(max-width:768px){

  .semi-filter-mode-tabs .filter-mode-tab,
  .filter-mode-tabs.filter-mode-tabs--sub .filter-mode-tab{
    min-width:0;
    flex:1 1 0;
    height:44px;
    padding:0 14px;
    font-size:14px;
  }

}



   [2026-05-09] 제품 필터/보기/문의 UI 최종 정리 PATCH
   - 필터 버튼 이모티콘 제거
   - 1차/2차 필터 라벨 줄바꿈
   - 보기 방식 모바일 깨짐 보정
   - 크게 보기 카드 가독성 보정
   - 상세/목록 버튼 정리
========================================================= */
.filter-chip-icon,
.product-inquiry-card-icon,
.product-info-icon{
  display:none;
}

.filter-group h3{
  display:block;
  line-height:1.35;
}
.filter-step-label{
  display:block;
  width:max-content;
  margin-top:6px;
  padding:3px 9px;
  border-radius:0;
  background:#eaf5ff;
  color:#0f66bb;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.2px;
}

.filter-chip{
  gap:0;
}
.filter-chip--all .filter-chip-icon::before,
.filter-chip--all .filter-chip-icon::after{
  display:none;
  content:none;
}

.product-view-panel{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}
.product-view-panel h3{
  margin:0 0 5px;
  white-space:nowrap;
}
.product-view-panel p{
  word-break:keep-all;
}
.view-switch{
  width:300px;
  max-width:100%;
}

.product-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.list-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:34px;
  padding:0 13px;
  border-radius:0;
  border:1px solid #cfe1f4;
  background:#fff;
  color:#1d3d5f;
  font-size:13px;
  font-weight:900;
}
.product-grid.view-large .product-card{
  display:grid;
  grid-template-columns:42% minmax(0,1fr);
  min-height:300px;
}
.product-grid.view-large .product-thumb{
  height:100%;
  aspect-ratio:auto;
}
.product-grid.view-large .product-body{
  min-height:0;
}
.product-grid.view-large .product-body h3{
  font-size:24px;
}

.product-inquiry-card-clean{
  align-items:center;
}
.product-inquiry-card-text{
  min-width:0;
}
.product-inquiry-card-btn{
  white-space:nowrap;
}
.product-detail-bottom-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid #e1ebf5;
}
.product-info-row{
  display:block;
}

.product-inquiry-box,
.product-inquiry-meta,
.product-inquiry-meta div,
#product-url-view,
#productUrlField{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.product-inquiry-box{
  overflow:hidden;
}
.product-inquiry-meta{
  display:grid;
  gap:8px;
}

@media(max-width:768px){
  .product-view-panel{
    gap:12px;
    padding:18px;
  }
  .product-view-panel h3{
    white-space:normal;
  }
  .view-switch{
    width:100%;
    min-width:0;
  }
  .view-switch button{
    min-height:42px;
    padding:0 10px;
    font-size:14px;
  }
  .product-grid.view-large,
  .product-grid.view-many{
  }
  .product-grid.view-large .product-card{
    display:flex;
    min-height:0;
  }
  .product-grid.view-large .product-thumb{
    aspect-ratio:4/3;
    height:auto;
  }
  .product-grid.view-large .product-body h3{
    font-size:23px;
  }
  .product-inquiry-card-clean{
    display:block;
  }
  .product-detail-bottom-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .product-grid.view-large,
  .product-grid.view-many{
    grid-template-columns:1fr 1fr;
    gap:26px;
  }
  .product-body{padding:18px 14px;}
  .product-body h3{font-size:20px;}
  .product-body p{font-size:14px;}
  .tags span{font-size:10.5px;}
}

/* =========================================================
   [2026-05-10] 보기 방식 컴팩트 + 버튼 전체폭 + 필터 아이콘 통합
   파일명: /assets/css/product.css
   목적:
   - 이전 보기 방식 카드 스타일 유지: 카드 높이는 작게, 버튼 영역만 가로 전체 사용
   - 원물/공정 필터 버튼에 CSS 기반 SVG 아이콘 적용
   - PNG 파일 추가 없이 data-basis / data-type 속성만 활용
========================================================= */

/* ===== 보기 방식: 모바일 컴팩트 카드 + 버튼 전체폭 ===== */
@media(max-width:768px){
  .product-view-panel{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:0 0 18px;
    padding:16px 18px;
    border:1px solid #cfe5fb;
    border-radius:0;
    background:#f8fbff;
    box-shadow:none;
  }

  .product-view-panel h3{
    display:block;
    margin:0 0 3px;
    color:#102d4c;
    font-size:18px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.45px;
  }

  .product-view-panel p{
    display:block;
    margin:0;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
  }

  .product-view-panel .view-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
    min-width:0;
    max-width:none;
    justify-self:stretch;
    padding:6px;
    border:1px solid #cfe1f4;
    border-radius:0;
    background:#edf6ff;
  }

  .product-view-panel .view-switch button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 8px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#1d3d5f;
    font-size:13.5px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.35px;
    box-shadow:none;
  }

  .product-view-panel .view-switch button.active{
    background:#0f66bb;
    color:#fff;
    box-shadow:0 8px 18px rgba(15,102,187,.2);
  }
}

/* ===== 필터 버튼 아이콘 공통 ===== */
.filter-chip{
  position:relative;
  overflow:hidden;
}

.filter-chip::before{
  content:"";
  display:none;
  flex:0 0 20px;
  width:20px;
  height:20px;
  opacity:.72;
  background-color:#0f66bb;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.filter-chip.active::before{
  background-color:#fff;
  opacity:.95;
}

.filter-chip[data-basis="material"],
.filter-chip[data-basis="process"]{
  gap:9px;
}

.filter-chip[data-basis="material"]::before,
.filter-chip[data-basis="process"]::before{
  display:block;
}

.filter-chip[data-type="all"]::before{
  opacity:.85;
}

/* 원물 전체 */
.filter-chip[data-basis="material"][data-type="all"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 20.5c-1.7 0-3.1-1.4-3.1-3.1c0-1.3.8-2.4 1.9-2.9c-.1-.4-.2-.8-.2-1.2c0-2 1.6-3.7 3.6-3.7c.6 0 1.1.1 1.6.4c.9-1.8 2.7-3 4.8-3c3.1 0 5.6 2.5 5.6 5.6c0 .5-.1 1-.2 1.5c1 .6 1.7 1.6 1.7 2.9c0 1.9-1.5 3.4-3.4 3.4H6.4Zm5.6-2.1c1.9-2.1 2.5-4.1 1.9-6.1c-1.6.8-2.6 2.1-3 3.9c-.7-.9-1.5-1.5-2.6-1.9c-.2 1.6.5 3 2.1 4.1H12Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 20.5c-1.7 0-3.1-1.4-3.1-3.1c0-1.3.8-2.4 1.9-2.9c-.1-.4-.2-.8-.2-1.2c0-2 1.6-3.7 3.6-3.7c.6 0 1.1.1 1.6.4c.9-1.8 2.7-3 4.8-3c3.1 0 5.6 2.5 5.6 5.6c0 .5-.1 1-.2 1.5c1 .6 1.7 1.6 1.7 2.9c0 1.9-1.5 3.4-3.4 3.4H6.4Zm5.6-2.1c1.9-2.1 2.5-4.1 1.9-6.1c-1.6.8-2.6 2.1-3 3.9c-.7-.9-1.5-1.5-2.6-1.9c-.2 1.6.5 3 2.1 4.1H12Z'/%3E%3C/svg%3E");
}

/* 액상 */
.filter-chip[data-basis="material"][data-type="liquid"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c-3.9 0-7-3.1-7-7c0-4.5 5.5-10.7 6.2-11.4c.4-.5 1.2-.5 1.6 0C13.5 4.3 19 10.5 19 15c0 3.9-3.1 7-7 7Zm0-15.8C10.1 8.6 7.2 12.7 7.2 15c0 2.6 2.2 4.8 4.8 4.8s4.8-2.2 4.8-4.8c0-2.3-2.9-6.4-4.8-8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c-3.9 0-7-3.1-7-7c0-4.5 5.5-10.7 6.2-11.4c.4-.5 1.2-.5 1.6 0C13.5 4.3 19 10.5 19 15c0 3.9-3.1 7-7 7Zm0-15.8C10.1 8.6 7.2 12.7 7.2 15c0 2.6 2.2 4.8 4.8 4.8s4.8-2.2 4.8-4.8c0-2.3-2.9-6.4-4.8-8.8Z'/%3E%3C/svg%3E");
}

/* 분말 */
.filter-chip[data-basis="material"][data-type="powder"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20c-1.1 0-2-.9-2-2.1c0-.7.4-1.4 1-1.8L10.3 4c.7-1.3 2.6-1.3 3.3 0L20 16.1c.6.4 1 1 1 1.8c0 1.2-.9 2.1-2 2.1H5Zm2.4-2.2h9.2L12 8.6l-4.6 9.2ZM8 4.5a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 0 0 0-2.6Zm8 1.2a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 20c-1.1 0-2-.9-2-2.1c0-.7.4-1.4 1-1.8L10.3 4c.7-1.3 2.6-1.3 3.3 0L20 16.1c.6.4 1 1 1 1.8c0 1.2-.9 2.1-2 2.1H5Zm2.4-2.2h9.2L12 8.6l-4.6 9.2ZM8 4.5a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 0 0 0-2.6Zm8 1.2a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E");
}

/* 과립 */
.filter-chip[data-basis="material"][data-type="granule"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 8.5a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm10 2a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM8.5 21a3.5 3.5 0 1 1 0-7a3.5 3.5 0 0 1 0 7Zm8.5-1.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 8.5a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm10 2a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM8.5 21a3.5 3.5 0 1 1 0-7a3.5 3.5 0 0 1 0 7Zm8.5-1.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* 티백·커피 */
.filter-chip[data-basis="material"][data-type="teabag"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 3h8l3 5v11c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8l3-5Zm1.2 2L7.4 8H16.6l-1.8-3H9.2ZM7 10v9h10v-9H7Zm3 3h4v2h-4v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 3h8l3 5v11c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8l3-5Zm1.2 2L7.4 8H16.6l-1.8-3H9.2ZM7 10v9h10v-9H7Zm3 3h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

/* 빵·과자 */
.filter-chip[data-basis="material"][data-type="bakery"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 12c0-4.4 3.6-8 8-8s8 3.6 8 8v5c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3v-5Zm3 1v4h10v-4c0-2.8-2.2-5-5-5s-5 2.2-5 5Zm2.5-1.5h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 12c0-4.4 3.6-8 8-8s8 3.6 8 8v5c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3v-5Zm3 1v4h10v-4c0-2.8-2.2-5-5-5s-5 2.2-5 5Zm2.5-1.5h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* 야채·농산물 */
.filter-chip[data-basis="material"][data-type="vegetable"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21c-4.1-2.1-6.5-5.2-6.5-8.7c0-2.8 1.9-5 4.5-5c1.1 0 2.1.4 3 1.1c.9-.7 1.9-1.1 3-1.1c2.6 0 4.5 2.2 4.5 5c0 3.5-2.4 6.6-6.5 8.7h-2ZM12.5 3c2.5.2 4.7 1.4 6.2 3.4c-2.3.2-4.4-.5-6.2-2V3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21c-4.1-2.1-6.5-5.2-6.5-8.7c0-2.8 1.9-5 4.5-5c1.1 0 2.1.4 3 1.1c.9-.7 1.9-1.1 3-1.1c2.6 0 4.5 2.2 4.5 5c0 3.5-2.4 6.6-6.5 8.7h-2ZM12.5 3c2.5.2 4.7 1.4 6.2 3.4c-2.3.2-4.4-.5-6.2-2V3Z'/%3E%3C/svg%3E");
}

/* 트레이·용기 */
.filter-chip[data-basis="material"][data-type="tray"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm0 3v8h14V8H5Zm2 2h4v4H7v-4Zm6 0h4v4h-4v-4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 5h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2Zm0 3v8h14V8H5Zm2 2h4v4H7v-4Zm6 0h4v4h-4v-4Z'/%3E%3C/svg%3E");
}

/* 반찬·즉석식품 */
.filter-chip[data-basis="material"][data-type="side_dish"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 8h16v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V8Zm2 2v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8H6Zm1-6h10c1.7 0 3 1.3 3 3H4c0-1.7 1.3-3 3-3Zm2 9h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 8h16v10c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V8Zm2 2v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-8H6Zm1-6h10c1.7 0 3 1.3 3 3H4c0-1.7 1.3-3 3-3Zm2 9h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 공산품 */
.filter-chip[data-basis="material"][data-type="industrial"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9l5-3v3l5-3v4h6v10H4V9Zm2 3v6h12v-6h-6V9.7l-5 3V9.7l-1 .6V12Zm2 2h2v2H8v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9l5-3v3l5-3v4h6v10H4V9Zm2 3v6h12v-6h-6V9.7l-5 3V9.7l-1 .6V12Zm2 2h2v2H8v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

/* 공정 전체 */
.filter-chip[data-basis="process"][data-type="all"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 15h18v3H3v-3Zm2-7h4v5H5V8Zm6-4h4v9h-4V4Zm6 6h4v3h-4v-3ZM7 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm10 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 15h18v3H3v-3Zm2-7h4v5H5V8Zm6-4h4v9h-4V4Zm6 6h4v3h-4v-3ZM7 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm10 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

/* 공정별 공통 아이콘: 자동화/컨베이어 느낌 */
.filter-chip[data-basis="process"]:not([data-type="all"])::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 15h16v3H4v-3Zm2-6h4v4H6V9Zm6-4h4v8h-4V5Zm6 5h3v3h-3v-3ZM8 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 15h16v3H4v-3Zm2-6h4v4H6V9Zm6-4h4v8h-4V5Zm6 5h3v3h-3v-3ZM8 20a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Zm8 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

@media(max-width:768px){
  .filter-chip[data-basis="material"],
  .filter-chip[data-basis="process"]{
    gap:8px;
  }

  .filter-chip[data-basis="material"]::before,
  .filter-chip[data-basis="process"]::before{
    width:18px;
    height:18px;
    flex-basis:18px;
  }

  .filter-chip[data-type="all"]::before{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

@media(max-width:380px){
  .filter-chip[data-basis="material"],
  .filter-chip[data-basis="process"]{
    gap:6px;
  }

  .filter-chip[data-basis="material"]::before,
  .filter-chip[data-basis="process"]::before{
    width:16px;
    height:16px;
    flex-basis:16px;
  }
}

/* =========================================================
   [백 형태 기준 필터 아이콘 추가]
   - 원물/공정 기준과 동일하게 CSS SVG mask 방식 사용
   - PNG 이미지 추가 없이 백 형태 필터 버튼에 아이콘 표시
========================================================= */
.filter-chip[data-basis="package"]{
  gap:9px;
}

.filter-chip[data-basis="package"]::before{
  display:block;
}

/* 백 형태 전체 */
.filter-chip[data-basis="package"][data-type=""]::before{
  flex-basis:22px;
  width:22px;
  height:22px;
  opacity:.85;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4.5C4 3.7 4.7 3 5.5 3h13c.8 0 1.5.7 1.5 1.5v15c0 .8-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5v-15Zm3 1.8v11.4h10V6.3H7Zm2 2h6v2H9v-2Zm0 3.1h6v2H9v-2Zm0 3.1h4v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4.5C4 3.7 4.7 3 5.5 3h13c.8 0 1.5.7 1.5 1.5v15c0 .8-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5v-15Zm3 1.8v11.4h10V6.3H7Zm2 2h6v2H9v-2Zm0 3.1h6v2H9v-2Zm0 3.1h4v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 스틱포장기 */
.filter-chip[data-basis="package"][data-type="stick"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2.8h6c1.1 0 2 .9 2 2v14.4c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V4.8c0-1.1.9-2 2-2Zm.2 2.3v13.8h5.6V5.1H9.2Zm1.2 2.1h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2.8h6c1.1 0 2 .9 2 2v14.4c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V4.8c0-1.1.9-2 2-2Zm.2 2.3v13.8h5.6V5.1H9.2Zm1.2 2.1h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Zm0 3.3h3.2v2h-3.2v-2Z'/%3E%3C/svg%3E");
}

/* 삼면포장기 */
.filter-chip[data-basis="package"][data-type="three_side"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14v16H5V4Zm2.2 2.2v11.6h9.6V6.2H7.2ZM9 8h6v2H9V8Zm0 3h6v2H9v-2Zm0 3h4v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14v16H5V4Zm2.2 2.2v11.6h9.6V6.2H7.2ZM9 8h6v2H9V8Zm0 3h6v2H9v-2Zm0 3h4v2H9v-2Z'/%3E%3C/svg%3E");
}

/* 사면포장기 */
.filter-chip[data-basis="package"][data-type="four_side"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v16H4V4Zm3 3v10h10V7H7Zm1.5-1.8v13.6h-2V5.2h2Zm9 0v13.6h-2V5.2h2ZM8.2 8.2h7.6v1.8H8.2V8.2Zm0 3h7.6V13H8.2v-1.8Zm0 3h5.3V16H8.2v-1.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v16H4V4Zm3 3v10h10V7H7Zm1.5-1.8v13.6h-2V5.2h2Zm9 0v13.6h-2V5.2h2ZM8.2 8.2h7.6v1.8H8.2V8.2Zm0 3h7.6V13H8.2v-1.8Zm0 3h5.3V16H8.2v-1.8Z'/%3E%3C/svg%3E");
}

/* 커스터마이징팩 */
.filter-chip[data-basis="package"][data-type="custom_line"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2l.5 2.2c.6.2 1.1.4 1.6.7L17 3.7l1.4 1.4l-1.2 1.9c.3.5.6 1 .7 1.6L20 9v2l-2.1.5c-.2.6-.4 1.1-.7 1.6l1.2 1.9L17 16.4l-1.9-1.2c-.5.3-1 .6-1.6.7L13 18h-2l-.5-2.1c-.6-.2-1.1-.4-1.6-.7L7 16.4L5.6 15l1.2-1.9c-.3-.5-.6-1-.7-1.6L4 11V9l2.1-.5c.2-.6.4-1.1.7-1.6L5.6 5L7 3.6l1.9 1.2c.5-.3 1-.6 1.6-.7L11 2Zm1 5.2A2.8 2.8 0 1 0 12 12.8A2.8 2.8 0 0 0 12 7.2ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2l.5 2.2c.6.2 1.1.4 1.6.7L17 3.7l1.4 1.4l-1.2 1.9c.3.5.6 1 .7 1.6L20 9v2l-2.1.5c-.2.6-.4 1.1-.7 1.6l1.2 1.9L17 16.4l-1.9-1.2c-.5.3-1 .6-1.6.7L13 18h-2l-.5-2.1c-.6-.2-1.1-.4-1.6-.7L7 16.4L5.6 15l1.2-1.9c-.3-.5-.6-1-.7-1.6L4 11V9l2.1-.5c.2-.6.4-1.1.7-1.6L5.6 5L7 3.6l1.9 1.2c.5-.3 1-.6 1.6-.7L11 2Zm1 5.2A2.8 2.8 0 1 0 12 12.8A2.8 2.8 0 0 0 12 7.2ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E");
}

/* 기타 */
.filter-chip[data-basis="package"][data-type="etc"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 14a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 14a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Zm6 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
}


/* =========================================================
   [2026-05-11] LINE FILTER PRIMARY/SECONDARY RESTORE PATCH
   파일명: /assets/css/product.css
   목적:
   - 포장자동화라인의 '원물 기준 / 공정 기준' 2단 필터 구조 복구
   - 선택한 기준은 1차 필터, 선택하지 않은 기준은 2차 필터로 항상 표시
   - 버튼 디자인을 흰색/블루 기반으로 정돈하고 가독성 강화
========================================================= */
:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]){
  border:1px solid #d6e3f1;
  background:#fff;
  box-shadow:0 18px 46px rgba(15,45,80,.07);
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-bottom:1px solid #d6e3f1;
  background:#f4f8fc;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button{
  position:relative;
  flex:none;
  min-height:64px;
  padding:12px 22px 12px 58px;
  border:0;
  border-right:1px solid #d6e3f1;
  background:#f4f8fc;
  color:#26384d;
  text-align:left;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.55px;
  box-shadow:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button:last-child{
  border-right:0;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button::before{
  content:"2차";
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid #c5d6e8;
  background:#fff;
  color:#66788c;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.2px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button::after{
  display:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button:hover{
  transform:none;
  background:#eaf4ff;
  color:#0f66bb;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button.active{
  background:#0f66bb;
  color:#fff;
  box-shadow:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button.active::before{
  content:"1차";
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);
  color:#fff;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-groups{
  display:grid;
  gap:18px;
  padding:24px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group{
  display:block;
  padding:22px 24px 24px;
  border:1px solid #d8e5f2;
  background:#fff;
  box-shadow:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group--primary{
  order:1;
  border-color:#0f66bb;
  background:linear-gradient(180deg,#ffffff 0%,#f4f9ff 100%);
  box-shadow:0 12px 28px rgba(15,102,187,.09);
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group--secondary{
  order:2;
  border-color:#d8e5f2;
  background:#fbfdff;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:0 0 14px;
  border-bottom:1px solid #d8e5f2;
  color:#0b2545;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.7px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  height:30px;
  padding:0 10px;
  background:#eef5fc;
  color:#0f66bb;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.2px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group--primary .filter-step-badge{
  background:#0f66bb;
  color:#fff;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-all-row{
  margin-bottom:12px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row,
:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row--details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip{
  min-width:0;
  min-height:48px;
  padding:0 14px;
  border:1px solid #cfdbe8;
  background:#fff;
  color:#25364c;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.35px;
  box-shadow:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip:hover{
  transform:none;
  border-color:#0f66bb;
  background:#f3f8fd;
  color:#0f66bb;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip.active{
  border-color:#0f66bb;
  background:#0f66bb;
  color:#fff;
  box-shadow:none;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-all-row .filter-chip{
  width:auto;
  min-width:190px;
  min-height:50px;
  background:#f6f9fc;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-all-row .filter-chip.active{
  background:#0f66bb;
}

:is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-result-count{
  border-top:1px solid #d8e5f2;
  background:#f6f9fc;
}

@media (max-width:900px){
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs{
    grid-template-columns:1fr;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button{
    border-right:0;
    border-bottom:1px solid #d6e3f1;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-mode-tabs button:last-child{
    border-bottom:0;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row,
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row--details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-groups{
    padding:16px;
    gap:14px;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group{
    padding:18px 16px;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-group h3{
    align-items:flex-start;
    flex-direction:column;
    font-size:18px;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row,
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-row--details{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip{
    min-height:44px;
    font-size:13px;
  }
  :is(.product-control-panel[data-category="line"],.product-control-panel[data-category="semi_printer"],.product-control-panel[data-category="semi"]) .filter-chip-all-row .filter-chip{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   파일명: /assets/css/product-filter-separator.css
   역할: 제품 필터 대분류/중분류 구분선
   기준: 기존 product.css 덮어쓰기 없이 추가 로드
========================================================= */

/* 대분류 전체 버튼과 중분류 버튼 사이 구분선 */
.filter-group .filter-chip-row--details{
  position:relative;
  margin-top:22px;
  padding-top:24px;
}

.filter-group .filter-chip-row--details::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(15,102,187,.12) 0%,
    rgba(15,102,187,.38) 50%,
    rgba(15,102,187,.12) 100%
  );
}

.filter-group .filter-chip-row--details::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:86px;
  height:2px;
  border-radius:0;
  background:#0f66bb;
}

/* 전체 버튼과 구분선 사이 여백 정리 */
.filter-chip-all-row{
  margin-bottom:0;
}

@media(max-width:768px){
  .filter-group .filter-chip-row--details{
    margin-top:18px;
    padding-top:20px;
  }

  .filter-group .filter-chip-row--details::after{
    width:58px;
  }
}

/* ---- merged from /assets/css/product-responsive.css ---- */
/* =========================================================
   필터 패널 디자인 복구 + 레이아웃 안정화 (2026-06-10)
================================================================ */
.product-control-panel{
  padding:22px 24px;
  background:linear-gradient(180deg,#f8fbff 0%,#f2f8ff 100%);
  border:1px solid #d0e4f5;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(15,35,67,.06);
  box-sizing:border-box;
  overflow:hidden;
}
.filter-mode-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.filter-mode-tabs button{
  flex:1 1 auto;
  min-height:44px;
  padding:0 18px;
  border:1px solid #c4d8ef;
  border-radius:7px;
  background:#fff;
  color:#1a3a5c;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.03em;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,65,120,.06);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.filter-mode-tabs button:hover{
  background:#eef7ff;
  border-color:#7bbce8;
  color:#0f66bb;
}
.filter-mode-tabs button.active{
  background:#0f66bb;
  border-color:#0f66bb;
  color:#fff;
  box-shadow:0 4px 14px rgba(15,102,187,.22);
}
.filter-groups{
  flex-direction:column;
}
.filter-group{
  box-sizing:border-box;
  width:100%;
  padding:16px 0;
}
.filter-group + .filter-group{
  border-top:1px solid #d8eaf7;
}
.filter-group h3{
  margin:0 0 12px;
  font-size:13px;
  color:#4a6580;
  letter-spacing:.05em;
}
.filter-group h3::before{
  width:4px;
  height:14px;
}
/* 전체 + 상세 칩을 하나의 flex 줄로 */
.filter-chip-all-row{
  float:none;
}
.filter-chip-row--details{
  gap:8px;
  max-width:100%;
}
.filter-chip-all-row .filter-chip,
.filter-chip-row--details .filter-chip,
.filter-chip{
  box-sizing:border-box;
  min-width:0;
  min-height:40px;
  height:40px;
  padding:0 16px;
  border:1px solid #bfd7f0;
  border-radius:7px;
  background:#fff;
  color:#1a3a5c;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.02em;
  transition:background .14s,border-color .14s,color .14s,box-shadow .14s;
  box-shadow:0 1px 4px rgba(15,65,120,.05);
}
.filter-chip:hover{
  background:#eef7ff;
  color:#0f66bb;
}
.filter-chip.active{
  box-shadow:0 3px 10px rgba(15,102,187,.2);
}
.filter-chip-label{
  display:block;
  word-break:keep-all;
}
.filter-result-count{
  margin-top:14px;
  padding:10px 16px;
  border-radius:7px;
  background:#e8f4ff;
  color:#0b3d72;
  font-size:14px;
  font-weight:800;
}

@media(max-width:767px){
  .product-control-panel{padding:16px;}
  .filter-chip-row--details{flex-wrap:wrap;}
  .filter-chip,
  .filter-chip-all-row .filter-chip,
  .filter-chip-row--details .filter-chip{
    min-height:38px;
    height:38px;
    font-size:12px;
    padding:0 12px;
  }
}

/* ── 개별 장비 섹션 헤더 좌우 패딩 복구 (2026-06-10) ── */
.product-list-head{
  padding-left:4px;
  padding-right:4px;
}
@media(max-width:767px){
  .product-list-head{
    padding-left:2px;
    padding-right:2px;
  }
}

/* ── 개별 장비 헤더 텍스트 정렬 통일 (2026-06-10) ── */
.product-list-head{
  padding-left:0;
  padding-right:0;
}
.product-list-eyebrow,
.product-list-title p{
  padding-left:16px;
  box-sizing:border-box;
}

/* ── 필터 숨김 우선순위 수정: display:flex → display:none 우선 (2026-06-10) ── */
/* JS의 card.style.display='none' 이  CSS에 막히는 문제 수정 */
.product-card[style*="display: none"],
.product-card[style*="display:none"]{
  display:none;
}
/* series-large-item도 동일 처리 */
.series-large-item[style*="display: none"],
.series-large-item[style*="display:none"]{
  display:none;
}

/* ── product-list-head 내부 전체 패딩 통일 (2026-06-10) ── */
.product-list-head{
}
.product-list-eyebrow,
.product-list-title h2,
.product-list-title p,
.product-list-count{
}
.product-list-head h2{
}
.product-list-head h2::before{
  left:0;
}

/* ================================================================
   필터 UX 재설계: Compact Inline Filter Bar (2026-06-10)
   - 탭 제거 (DOM 유지, 숨김만)
   - 두 그룹 가로 병렬 배치
   - chip pill 스타일
   - 산업장비 카탈로그 느낌
================================================================ */

/* 패널 전체 */
.product-control-panel{
  padding:16px 20px 14px;
  background:#fff;
  border:1px solid #d8e8f5;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(15,35,67,.05);
  margin-bottom:24px;
}

/* 탭 버튼 숨김 (DOM은 유지해 JS 동작 보존) */
.filter-mode-tabs{
  display:none;
}

/* 두 그룹 가로 배치 */
.filter-groups{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:0;
  align-items:flex-start;
  width:100%;
}
.filter-group{
  flex:1 1 240px;
  min-width:0;
  padding:10px 16px 10px 0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.filter-group + .filter-group{
  padding-left:16px;
  border-top:none;
  border-left:1px solid #deeaf6;
}

/* 그룹 타이틀 */
.filter-group h3{
  display:flex;
  align-items:center;
  margin:0 0 8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b85a0;
}
.filter-group h3::before{
  width:3px;
  height:12px;
  border-radius:2px;
  background:#0f66bb;
  flex-shrink:0;
}

/* 칩 영역 */
.filter-chip-all-row{
  display:contents;
}
.filter-chip-row--details{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
  grid-template-columns:unset;
}

/* 칩 pill 스타일 */
.filter-chip-all-row .filter-chip,
.filter-chip-row--details .filter-chip,
.filter-chip{
  flex:0 0 auto;
  height:30px;
  min-height:30px;
  padding:0 12px;
  border:1px solid #c8daf0;
  border-radius:15px;
  background:#f5f9fe;
  color:#2a4a6b;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
  box-shadow:none;
  width:auto;
}
.filter-chip:hover{
  background:#e4f0fb;
  border-color:#7bbce8;
  color:#0a52a0;
  transform:none;
}
.filter-chip.active{
  background:#0f66bb;
  border-color:#0f66bb;
  color:#fff;
  font-weight:800;
}

/* 결과 카운트 */
.filter-result-count{
  margin-top:10px;
  padding:0;
  background:transparent;
  color:#5a7a96;
  font-size:12px;
  font-weight:700;
  border-top:1px solid #e8f0f8;
  padding-top:8px;
}

/* 배경 이미지 제거 */
.filter-group-bg{
  display:none;
}

@media(max-width:767px){
  .filter-group{
    flex:1 1 100%;
    padding:10px 0;
    border-left:none;
  }
  .filter-group + .filter-group{
    border-left:none;
    border-top:1px solid #deeaf6;
    padding-left:0;
  }
}

/* ── product-list-head wrapper 패딩 통일 (2026-06-10) ── */
.product-list-head{
}
.product-list-title{
  padding-left:0;
}
.product-list-eyebrow,
.product-list-title p,
.product-list-count{
}
.product-list-head h2{
}

/* ── product-list-head 좌우 패딩 확정 수정 (2026-06-10) ── */
.product-list-head{
  padding:28px 0 20px;
}
/* eyebrow, p, count — 개별 padding 완전 초기화 */
.product-list-eyebrow,
.product-list-title p,
.product-list-count,
.product-list-title h2{
  padding-left:0;
  margin-left:0;
}
/* h2 마커 공간은 유지 (::before 위치용) */
.product-list-head h2{
  padding-left:16px;
}

/* ── product-list-head 좌우 여백 최종 수정 (2026-06-10) ── */
.product-list-head{
  padding:28px 32px 20px;
  box-sizing:border-box;
}
.product-list-eyebrow,
.product-list-title h2,
.product-list-title p,
.product-list-count{
  padding-left:0;
  margin-left:0;
}
.product-list-title h2{
  padding-left:16px;
}
@media(max-width:767px){
  .product-list-head{
    padding:20px 16px 16px;
  }
}

/* ================================================================
   플로팅 필터 패널 — 좌측 패널형 + 모바일 바텀시트 (2026-06-10 개선)
================================================================ */

/* ── Attention 애니메이션 (PC 버튼 튕김) ── */
@keyframes nb-filter-btn-entrance{
  0%  {transform:translateY(-50%) translateX(-70px);opacity:0;}
  65% {transform:translateY(-50%) translateX(6px); opacity:1;}
  82% {transform:translateY(-50%) translateX(-3px);opacity:1;}
  100%{transform:translateY(-50%) translateX(0);  opacity:1;}
}
@keyframes nb-filter-btn-pulse{
  0%,100%{transform:translateY(-50%) scale(1);}
  50%    {transform:translateY(-50%) scale(1.08);}
}

/* ── 플로팅 트리거 버튼 (공통 기본) ── */
.nb-filter-float-btn{
  position:fixed;
  left:20px;
  right:auto;
  top:50%;
  transform:translateY(-50%);
  z-index:24000;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:58px;
  min-height:76px;
  padding:14px 0;
  gap:5px;
  border:1.5px solid #b8d5f0;
  border-left:3px solid #0f66bb;
  border-radius:10px;
  background:#fff;
  color:#0f66bb;
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(15,35,67,.14);
  transition:box-shadow .18s,background .14s;
  line-height:1.3;
}
.nb-filter-float-btn::before{
  content:"\29C6";
  font-size:20px;
  display:block;
}
.nb-filter-float-btn:hover{
  background:#eef7ff;
  box-shadow:0 8px 24px rgba(15,35,67,.20);
}
.nb-filter-float-btn.nb-filter-open{
  background:#0f66bb;
  color:#fff;
  border-color:#0f66bb;
}
.nb-filter-float-btn.has-active{
  border-color:#0f66bb;
}
.nb-filter-float-btn__badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:#e53;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:18px;
  text-align:center;
  display:none;
}
.nb-filter-float-btn.has-active .nb-filter-float-btn__badge{
  display:block;
}
.nb-filter-float-btn.nb-filter-btn--intro{
  animation:
    nb-filter-btn-entrance .45s cubic-bezier(.22,.72,.18,1) .4s both,
    nb-filter-btn-pulse    .4s ease-in-out .95s 2;
}

/* ── PC 전용: 좌측 슬라이드인 패널 ── */
@media(min-width:1025px){
  .nb-filter-float-btn{
    display:flex;
  }
  .product-control-panel[data-float-panel]{
    position:fixed;
    left:86px;
    right:auto;
    top:50%;
    transform:translateY(-50%) translateX(calc(-100% - 90px));
    width:300px;
    max-height:80vh;
    overflow-y:auto;
    z-index:23999;
    padding:22px 20px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 32px rgba(15,35,67,.16);
    border:1px solid #c8dff5;
    opacity:0;
    pointer-events:none;
    transition:transform .24s cubic-bezier(.22,.72,.18,1),opacity .18s;
    margin-bottom:0;
  }
  .product-control-panel[data-float-panel].nb-filter-open{
    transform:translateY(-50%) translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-groups{
    flex-direction:column;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-group{
    border-left:none;
    border-top:1px solid #deeaf6;
    padding-left:0;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-group:first-child{
    border-top:none;
  }
}

/* ── 모바일: 하단 고정 바 ── */
.nb-filter-mobile-bar{
  display:none;
}
.nb-filter-overlay{
  display:none;
}

@media(max-width:1024px){
  /* 하단 고정 바 */
  .nb-filter-mobile-bar{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:24000;
    height:54px;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#0f66bb;
    color:#fff;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 -2px 14px rgba(15,35,67,.18);
    border-top:1px solid rgba(255,255,255,.12);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .nb-filter-mobile-bar::before{
    content:"\29C6";
    font-size:18px;
  }
  .nb-filter-mobile-bar.nb-filter-open{
    background:#0a4d96;
  }
  /* 하단 바 공간 확보 */
  body.has-filter-mobile-bar{
    padding-bottom:54px;
  }
  /* 딤 오버레이 */
  .nb-filter-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,18,35,.45);
    z-index:23998;
  }
  .nb-filter-overlay.active{
    display:block;
  }
  /* PC 버튼 숨김 */
  .nb-filter-float-btn{
    display:none;
  }
  /* 바텀 시트 */
  .product-control-panel[data-float-panel]{
    position:fixed;
    left:0;
    right:0;
    bottom:54px;
    top:auto;
    transform:translateY(100%);
    width:100%;
    max-height:72vh;
    overflow-y:auto;
    z-index:23999;
    padding:20px 16px 28px;
    border-radius:16px 16px 0 0;
    background:#fff;
    box-shadow:0 -4px 24px rgba(15,35,67,.18);
    border:none;
    border-top:1px solid #dde8f5;
    opacity:0;
    pointer-events:none;
    transition:transform .28s cubic-bezier(.22,.72,.18,1),opacity .2s;
    margin-bottom:0;
  }
  .product-control-panel[data-float-panel].nb-filter-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-groups{
    flex-direction:column;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-group{
    border-left:none;
    border-top:1px solid #deeaf6;
    padding-left:0;
  }
  .product-control-panel[data-float-panel].nb-filter-open .filter-group:first-child{
    border-top:none;
  }
}

/* ================================================================
   PRODUCT LIST 헤더 레이아웃 개선 (2026-06-11)
   - 좌우 패딩 48px (대표 시리즈와 동일)
   - 좌: eyebrow + 제목 + 설명 / 우: 제품 수 뱃지
   - product-series-intro 구조 참조
================================================================ */
.product-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:28px;
  padding-bottom:28px;
  box-sizing:border-box;
}
.product-list-title{
  flex:1 1 auto;
  min-width:0;
  padding-left:0;
}
.product-list-count{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:88px;
  padding:16px 20px;
  border:1px solid #c8dff4;
  background:#fff;
  border-radius:4px;
  text-align:center;
  margin-left:0;
}
.product-list-count strong[data-product-total]{
  display:block;
  color:#0f66bb;
  font-size:30px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1px;
}
.product-list-count small{
  display:block;
  margin-top:7px;
  color:#52677d;
  font-size:13px;
  font-weight:700;
}
@media(max-width:767px){
  .product-list-head{
    flex-direction:column;
    align-items:flex-start;
    padding:20px 18px;
    gap:16px;
  }
  .product-list-count{
    width:100%;
    flex-direction:row;
    gap:10px;
    min-height:auto;
    padding:12px 16px;
    justify-content:flex-start;
  }
  .product-list-count strong[data-product-total]{
    font-size:22px;
  }
  .product-list-count small{
    margin-top:0;
    font-size:13px;
  }
}


/* ================================================================
   Sticky nav 보상: scroll-margin-top + float-panel 보상 (2026-06-11)
   - 헤더(86px) + 서브내비(82px) + 여유(24px) = 192px
   - PC float-panel 모드: product-control-panel이 position:fixed로
     flow에서 제거 → 이후 섹션 상단 여백 보상
================================================================ */
.product-series-collapsible,
.product-series-intro,
.product-list-head,
.product-grid[data-product-grid]{
  scroll-margin-top:calc(var(--nb-header-main-h,86px) + var(--nb-subnav-height,58px) + 48px);
}

@media(min-width:1025px){
  /* float-panel 모드: 패널이 flow에서 빠지면 이후 첫 섹션에 상단 여백 보상 */
  .product-control-panel[data-float-panel] ~ .product-series-collapsible{
    margin-top:40px;
  }
  .product-control-panel[data-float-panel] ~ .product-list-head{
    margin-top:40px;
  }
}

/* ================================================================
   [WIDE SIDEBAR v113] 1600px 이상: 고정 사이드바

   구조:
   - body.nb-wide-sidebar (JS가 1600px+에서 추가)
   - product-control-panel: position:fixed 좌측 16px
   - 콘텐츠 섹션: padding-left 보상 (필터 overlap 상쇄)

   계산:
   - 필터 right edge = 16 + 260 = 276px
   - 컨테이너 max-width = 1520px
   - 컨테이너 margin = max(48px, (vw-1520)/2)
   - padding 보상 = max(0, 284 - max(48, (vw-1520)/2))

   1280-1599px: 기존 float 버튼 유지 (변경 없음)
   1024px 이하: 기존 모바일 유지 (변경 없음)
================================================================ */
@media (min-width:1700px){

  /* 오버레이·모바일바 숨김 */
  body.nb-wide-sidebar .nb-filter-overlay{ display:none; }
  body.nb-wide-sidebar .nb-filter-mobile-bar{ display:none; }

  /* ===== 접기/펼치기 탭 버튼 =====
     열림: 패널 오른쪽 끝에 ◀ 탭
     닫힘: 뷰포트 왼쪽 끝에 ▶ 탭
  ================================================================ */
  body.nb-wide-sidebar .nb-filter-float-btn{
    display:flex;
    position:fixed;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    left:0;
    top:calc(var(--nb-header-main-h, 86px) + var(--nb-subnav-height, 58px) + 50px);
    width:30px;
    height:64px;
    padding:0;
    border:none;
    border-radius:0 7px 7px 0;
    background:#0f66bb;
    color:#fff;
    font-size:0;
    z-index:1302;
    box-shadow:3px 2px 10px rgba(15,35,67,.22);
    cursor:pointer;
    transition:background .15s, left .24s cubic-bezier(.22,.72,.18,1);
  }
  body.nb-wide-sidebar .nb-filter-float-btn:hover{ background:#0d5aa3; }
  body.nb-wide-sidebar .nb-filter-float-btn::before{
    content:'▶'; font-size:15px; color:#fff;
    display:block; line-height:1;
  }
  body.nb-wide-sidebar .nb-filter-float-btn.nb-filter-open{
    left:calc(16px + 500px);
  }
  body.nb-wide-sidebar .nb-filter-float-btn.nb-filter-open::before{ content:'◀'; }
  body.nb-wide-sidebar .nb-filter-float-btn__badge{ display:none; }
  body.nb-wide-sidebar .nb-filter-float-btn.nb-filter-btn--intro{ animation:none; }

  /* ===== 필터 패널: 좌측 고정 =====
     width: 360px (기존 260px → 360px)
     접기 시: translateX 슬라이드 아웃
  ================================================================ */
  body.nb-wide-sidebar .product-control-panel[data-float-panel]{
    position:fixed;
    left:16px;
    width:500px;
    top:calc(var(--nb-header-main-h, 86px) + var(--nb-subnav-height, 58px));
    height:calc(100vh - var(--nb-header-main-h, 86px) - var(--nb-subnav-height, 58px));
    max-height:calc(100vh - var(--nb-header-main-h, 86px) - var(--nb-subnav-height, 58px));
    transform:none;
    opacity:1;
    pointer-events:auto;
    overflow:auto;
    overflow-x:hidden;
    overflow-y:auto;
    z-index:1300;
    background:#fff;
    border:1px solid #d5e8f6;
    border-radius:6px;
    box-shadow:0 2px 20px rgba(15,35,67,.14);
    padding:18px 16px 40px;
    scrollbar-width:thin;
    scrollbar-color:#9fcaf2 #e8f3fc;
    transition:transform .24s cubic-bezier(.22,.72,.18,1), opacity .18s;
  }
  /* 패널 닫힘 → 슬라이드 아웃 */
  body.nb-wide-sidebar .product-control-panel[data-float-panel]:not(.nb-filter-open){
    transform:translateX(calc(-100% - 40px));
    opacity:0;
    pointer-events:none;
  }
  body.nb-wide-sidebar .product-control-panel[data-float-panel]::-webkit-scrollbar{ width:5px; }
  body.nb-wide-sidebar .product-control-panel[data-float-panel]::-webkit-scrollbar-track{ background:#e8f3fc; border-radius:3px; }
  body.nb-wide-sidebar .product-control-panel[data-float-panel]::-webkit-scrollbar-thumb{ background:#9fcaf2; border-radius:3px; }

  /* ===== 콘텐츠: 필터 오버랩 보상 padding-left =====
     filter right = 16 + 500 = 516px, gap 32px → const = 548px
     1700px: 548-90=458px / 1920px: 548-200=348px / 2560px: 548-520=28px
  ================================================================ */
  body.nb-wide-sidebar .product-series-collapsible,
  body.nb-wide-sidebar .product-series-intro,
  body.nb-wide-sidebar .product-list-head,
  body.nb-wide-sidebar .product-grid[data-product-grid]{
    padding-left:max(0px, calc(548px - max(48px, (100vw - 1520px) / 2)));
    transition:padding-left .24s cubic-bezier(.22,.72,.18,1);
  }
  /* 패널 닫힘 → padding 제거 */
  body.nb-wide-sidebar:has(.product-control-panel[data-float-panel]:not(.nb-filter-open)) .product-series-collapsible,
  body.nb-wide-sidebar:has(.product-control-panel[data-float-panel]:not(.nb-filter-open)) .product-series-intro,
  body.nb-wide-sidebar:has(.product-control-panel[data-float-panel]:not(.nb-filter-open)) .product-list-head,
  body.nb-wide-sidebar:has(.product-control-panel[data-float-panel]:not(.nb-filter-open)) .product-grid[data-product-grid]{
    padding-left:0;
  }

  /* ===== 필터 UI: 폰트·레이아웃 개선 ===== */
  body.nb-wide-sidebar .filter-mode-tabs{
    grid-template-columns:repeat(2,1fr);
    gap:6px; margin-bottom:10px;
  }
  body.nb-wide-sidebar .filter-mode-tabs button{
    min-height:36px; padding:0 10px;
    font-size:13px; box-shadow:none;
    border-radius:5px; justify-content:center;
  }
  body.nb-wide-sidebar .filter-sub-tabs{
    gap:6px; margin-bottom:8px;
    border-radius:5px; padding:8px;
    grid-template-columns:repeat(2,1fr);
  }
  body.nb-wide-sidebar .filter-sub-tabs button{
    min-height:32px; padding:0 10px;
    font-size:12px; border-radius:5px;
  }
  body.nb-wide-sidebar .filter-groups{ gap:6px; padding:0; }
  body.nb-wide-sidebar .filter-group{
    padding:10px 12px; border-radius:5px;
    box-shadow:0 1px 4px rgba(15,35,67,.04);
  }
  body.nb-wide-sidebar .filter-group h3{
    font-size:12px; font-weight:900;
    margin:0 0 7px; letter-spacing:.02em; gap:5px;
  }
  body.nb-wide-sidebar .filter-chip-all-row{ display:block; margin-bottom:6px; }
  body.nb-wide-sidebar .filter-chip-all-row .filter-chip{
    width:100%; justify-content:center;
    min-height:28px; font-size:13px; padding:0 8px;
    border-radius:5px; grid-column:1/-1;
  }
  /* chip 2열 배치 — 텍스트 줄바꿈 없이 표시 */
  body.nb-wide-sidebar .filter-chip-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  }
  body.nb-wide-sidebar .filter-chip-row .filter-chip{
    min-height:30px; padding:0 4px; font-size:13px;
    line-height:1.3; justify-content:center;
    text-align:center; white-space:normal; word-break:keep-all;
    border-radius:5px;
  }
  body.nb-wide-sidebar .filter-result-count{
    margin-top:8px; padding:8px 12px;
    font-size:12px; border-radius:5px;
  }
}

/* ================================================================
   [안전장치] 플로팅 필터 패널 폭 강제 고정 (2026-06-16)
   - 다른 어떤 규칙(전체폭 강제 등)이 남아 있어도 필터가 화면을 덮지 않도록
     좁은 드로어 폭으로 !important 고정.
   - position:fixed 는 위쪽 @media(min-width:1025px)에서 이미 적용됨.
================================================================ */
@media (min-width:1025px){
  .product-control-panel[data-float-panel]{
    width:320px !important;
    max-width:90vw !important;
    margin-bottom:0 !important;
  }
  body.nb-wide-sidebar .product-control-panel[data-float-panel]{
    width:500px !important;
    max-width:46vw !important;
  }
  .product-control-panel[data-float-panel] .filter-groups{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ================================================================
   메인 입구 카드(?series=N) 연결 — 추천 시리즈 묶음 섹션
================================================================ */
body[data-sidebar-type="products"] .nb-series-group{width:var(--nb-content-width);max-width:var(--nb-content-width);margin:30px auto 10px;}
.nb-series-group__head{margin:0 0 20px;}
.nb-series-group__head span{display:block;color:#0f66bb;font-size:13px;font-weight:800;letter-spacing:.14em;margin-bottom:8px;}
.nb-series-group__head h2{margin:0 0 8px;color:#0b2545;font-size:28px;font-weight:800;letter-spacing:-.6px;}
.nb-series-group__head p{margin:0;color:#5c6c7d;font-size:15px;line-height:1.6;}
.nb-series-group__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:stretch;}
.nb-series-group__card{display:flex;flex-direction:column;background:#fff;border:1px solid #d8e5f2;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.nb-series-group__card:hover{border-color:#0f66bb;box-shadow:0 20px 44px rgba(15,45,80,.14);transform:translateY(-4px);}
.nb-series-group__img{display:block;aspect-ratio:16/9;background:#f4f8fc;overflow:hidden;}
.nb-series-group__img img{width:100%;height:100%;object-fit:cover;display:block;}
.nb-series-group__body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;flex:1 1 auto;}
.nb-series-group__title{color:#0b2545;font-size:21px;font-weight:800;line-height:1.32;letter-spacing:-.3px;}
.nb-series-group__desc{color:#5c6c7d;font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nb-series-group__more{margin-top:auto;padding-top:4px;color:#0f66bb;font-size:14px;font-weight:800;}
@media(max-width:760px){.nb-series-group__grid{grid-template-columns:1fr;gap:16px;}.nb-series-group__head h2{font-size:22px;}.nb-series-group__title{font-size:19px;}}

/* ================================================================
   시리즈 전용 상세페이지 (series.php)
================================================================ */
.series-detail{width:var(--nb-content-width);max-width:var(--nb-content-width);margin:32px auto 60px;}
.series-detail__eyebrow{display:block;color:#0f66bb;font-size:13px;font-weight:800;letter-spacing:.14em;margin-bottom:8px;}
.series-detail__hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:36px;}
.series-detail__img{margin:0;border:1px solid #e0e9f4;border-radius:16px;overflow:hidden;background:#f4f8fc;aspect-ratio:4/3;}
.series-detail__img img{width:100%;height:100%;object-fit:cover;display:block;}
.series-detail__copy h1{margin:0 0 14px;color:#0b2545;font-size:32px;font-weight:800;line-height:1.25;letter-spacing:-.8px;}
.series-detail__lead{margin:0 0 22px;color:#516074;font-size:16px;line-height:1.75;}
.series-detail__actions{display:flex;gap:10px;flex-wrap:wrap;}
.series-detail__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid #cfdbe8;border-radius:8px;color:#0f66bb;font-weight:800;font-size:14.5px;text-decoration:none;}
.series-detail__btn--primary{background:#0f66bb;border-color:#0f66bb;color:#fff;}
.series-detail__btn:hover{border-color:#0f66bb;}
.series-detail__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:0 0 36px;}
.series-detail__info-card{background:#f7fafd;border:1px solid #e2edf7;border-radius:12px;padding:20px 22px;}
.series-detail__info-card h3{margin:0 0 12px;color:#0b2545;font-size:16px;font-weight:800;}
.series-detail__info-card ul{margin:0;padding:0;list-style:none;}
.series-detail__info-card li{position:relative;padding-left:16px;margin-bottom:7px;color:#516074;font-size:14.5px;line-height:1.6;}
.series-detail__info-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#0f66bb;}
.series-detail__video{margin:0 0 40px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;}
.series-detail__video iframe{width:100%;height:100%;border:0;display:block;}
.series-detail__models-head{border-top:2px solid #0f66bb;padding-top:22px;margin:8px 0 22px;}
.series-detail__models-head h2{margin:0 0 6px;color:#0b2545;font-size:26px;font-weight:800;letter-spacing:-.5px;}
.series-detail__models-head h2 em{color:#0f66bb;font-style:normal;}
.series-detail__models-head p{margin:0;color:#5c6c7d;font-size:14.5px;}
.series-detail__model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.series-detail__model-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e9f4;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.series-detail__model-card:hover{border-color:#0f66bb;box-shadow:0 14px 30px rgba(15,45,80,.12);transform:translateY(-3px);}
.series-detail__model-img{display:block;aspect-ratio:1/1;background:#f7fafd;overflow:hidden;}
.series-detail__model-img img{width:100%;height:100%;object-fit:contain;display:block;}
.series-detail__model-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;}
.series-detail__model-body strong{color:#0b2545;font-size:15.5px;font-weight:800;line-height:1.35;}
.series-detail__model-body i{margin-top:auto;color:#0f66bb;font-size:13px;font-weight:800;font-style:normal;}
.series-detail__empty{padding:30px;text-align:center;color:#5c6c7d;background:#f7fafd;border-radius:12px;}
@media(max-width:900px){.series-detail__hero{grid-template-columns:1fr;gap:20px;}.series-detail__copy h1{font-size:26px;}.series-detail__model-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.series-detail__model-grid{grid-template-columns:1fr;}}