/* 딱박스 — 🧺 제품 카탈로그 패널 정리 (2026-10-04) — 모양만 바꾸고 동작·id 는 그대로(스위트 13 · packwise-actions · packwise-discovery)
   머리줄 한 줄(제목 · 검색 · 수량 · 크기 · 저장 · 닫기) → 분류 칩 → 안내 한 줄 → 사이트 규격 한 줄 → 제품 카드 · [선택한 제품 계산하기]는 아래에 붙어 따라옴 */
/* catToggle 가 style="display:block" 을 직접 넣으므로 닫힌 상태(display:none)만 빼고 flex 로 */
#catPanel.catPanel:not([style*="display: none"]):not([style*="display:none"]){display:flex!important}
#catPanel.catPanel{flex-direction:column;gap:10px;border:1px solid #dfe5ee;background:#fff;border-radius:14px;padding:14px 16px;margin-top:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}

/* 머리줄 */
#catPanel .catHead{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:#475569}
#catPanel .catHead>b{font-size:15.5px;color:#0f172a;margin-right:4px;white-space:nowrap}
#catPanel .catHead #catQ{flex:1 1 200px;min-width:160px;height:38px;padding:0 12px 0 34px;border:1px solid #d5dde8;border-radius:10px;font-size:14px;
  background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center}
#catPanel .catHead #catQ:focus{outline:2px solid #bcd0f5;background-color:#fff;border-color:#246bfd}
#catPanel .catHead label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;color:#64748b}
#catPanel .catHead #catQty{width:64px;height:38px;padding:0 8px;border:1px solid #d5dde8;border-radius:10px;font-size:14px;text-align:center}
#catPanel .catHead #catSize{height:38px;padding:0 8px;border:1px solid #d5dde8;border-radius:10px;font-size:13.5px;background:#fff;max-width:150px}
#catPanel .catHead .vb{height:38px;padding:0 12px;border:1px solid #d5dde8;background:#fff;border-radius:10px;font-size:13px;color:#334155;cursor:pointer;white-space:nowrap}
#catPanel .catHead .vb:hover{border-color:#246bfd;color:#246bfd;background:#f3f7ff}
#catPanel .catHead .vb:last-child{margin-left:auto;color:#64748b}

/* 분류 칩 */
#catPanel #catGroups{order:2;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:10px 0 0;border-top:1px solid #eef2f7}
#catPanel #catGroups .vb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid #dfe5ee;border-radius:999px;background:#f8fafc;color:#334155;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
#catPanel #catGroups .vb small{font-size:11px;font-weight:700;color:#64748b;background:#e8edf5;border-radius:999px;padding:1px 7px;line-height:1.5}
#catPanel #catGroups .vb:hover{border-color:#246bfd;background:#f3f7ff;color:#246bfd}
#catPanel #catGroups .vb.on{background:#246bfd;border-color:#246bfd;color:#fff;font-weight:700}
#catPanel #catGroups .vb.on small{background:rgba(255,255,255,.25);color:#fff}

/* 분류 안내 한 줄 */
#catPanel #catHint{order:3;font-size:13px;line-height:1.55;color:#475569;margin:0}
#catPanel #catHint:empty{display:none}

/* 사이트 규격 가져오기 — 한 줄 */
#catPanel #pwDiscovery.pw-discovery{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:10px 12px;border:1px dashed #cfd8e3;border-radius:12px;background:#f8fafc;font-size:13px}
#catPanel #pwDiscovery>p{margin:0;font-size:13px;color:#475569;flex:1 1 220px}
#catPanel #pwDiscovery>div{display:flex;flex-wrap:wrap;gap:4px 6px;flex:2 1 320px}
#catPanel #pwDiscovery a{display:inline-flex;align-items:center;height:26px;margin:0;padding:0 9px;border:1px solid #dfe5ee;border-radius:999px;background:#fff;color:#24588a;font-size:12.5px;text-decoration:none}
#catPanel #pwDiscovery a:hover{border-color:#246bfd;color:#246bfd}
#catPanel #pwDiscovery>button{height:34px;margin:0;padding:0 12px;border:1px solid #246bfd;border-radius:10px;background:#fff;color:#246bfd;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#catPanel #pwDiscovery>button:hover{background:#f3f7ff}

/* 제품 카드 목록 */
#catPanel #catBody{order:5}
#catPanel #catBody .catGrp>h4{margin:14px 0 8px;font-size:14.5px;color:#0f172a}
#catPanel #catBody .catGrp>h4 small{font-weight:500;color:#64748b;margin-left:6px}

/* [선택한 제품 계산하기] — 맨 아래에 붙어 따라옴(가운데 큰 막대 대신) */
#catPanel>.pw-catalog-calc{order:9;position:sticky;bottom:10px;align-self:flex-end;width:auto;min-width:200px;height:44px;margin:4px 0 0!important;padding:0 20px!important;border-radius:12px;font-weight:700;box-shadow:0 8px 20px rgba(36,107,253,.28);z-index:3}

@media (max-width:700px){
  #catPanel.catPanel{padding:12px}
  #catPanel .catHead #catQ{flex-basis:100%}
  #catPanel .catHead .vb:last-child{margin-left:0}
  #catPanel #catGroups{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
  #catPanel>.pw-catalog-calc{align-self:stretch;width:100%}
}

/* 2026-10-04 (2) 간추림 — 분류 안내 글과 사이트 이름 줄은 숨기고 [사이트 규격 가져오기] 단추만 남김(기능·요소는 그대로) */
#catPanel #catHint{display:none!important}
#catPanel #pwDiscovery.pw-discovery{border:0;background:none;padding:0;justify-content:flex-end}
#catPanel #pwDiscovery>p,#catPanel #pwDiscovery>div{display:none!important}
#catPanel #pwDiscovery>button{height:32px;font-size:12.5px;border-color:#d5dde8;color:#475569;font-weight:500}
#catPanel #pwDiscovery>button:hover{border-color:#246bfd;color:#246bfd}

/* 2026-10-04 (3) 카드 간추림 — 사진·이름·크기만 · 주의는 칩 · 참고 규격 안내는 목록 위 한 줄 */
#catPanel .catCard .tg,#catPanel .catCard .pw-risk-tags,#catPanel .catCard .catalog-reference{display:none!important}
#catPanel .catCard .nm{margin-top:6px}
#catPanel .catCard .sz{color:#64748b;font-size:12px;margin-top:2px}
#catPanel .catCard .pwc-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:5px}
#catPanel .catCard .pwc-tags span{font-size:11px;line-height:1.5;padding:0 7px;border-radius:999px;background:#fff1dc;color:#b45309;white-space:nowrap}
#catPanel .catCard .pwc-tags .pwc-own{background:#e6efff;color:#246bfd}
#catPanel #catBody .pwc-note{margin:2px 0 0;font-size:12px;color:#64748b}