/* ══════════════════════════════════════════════════════════
   features-cs-work.css — CS 업무 (접수 / 상품 현황 / 폐기·재판매)
   네임스페이스: .csw-  (cs-work.js · cs-groups.js · cs-disposals.js)
   ══════════════════════════════════════════════════════════ */

/* ── 페이지 헤더 (접수 / 상품 현황 / 폐기·재판매 공용) ──
   .page-header 는 현재 CS 업무 3페이지에서만 사용 → 이 파일 정의로 전역 오염 없음.
   .page-header .btn* (0,2,0) 특이도로 auth.css .btn-primary{width:100%} 누수 차단
   (so.css:36 과 동일한 대응 패턴). 값은 so.css .btn 계열 + .pl-page-header 관례 준용. */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin-bottom:14px;}
.page-header h2{font-size:18px;font-weight:700;line-height:1.3;}  /* PL 타이틀(18px/700)과 통일 */

/* 버튼 베이스 — so.css .so-scope .btn(8px 16px/13.5px) 동일값. width:auto 가 누수 차단 핵심.
   투명 테두리 1px = 채움/outline 버튼의 박스 높이를 픽셀 단위로 동일하게 */
.page-header .btn{display:inline-flex;align-items:center;width:auto;padding:8px 16px;
  border:1px solid transparent;border-radius:var(--radius-sm);background:none;
  font-size:13.5px;font-weight:500;font-family:inherit;line-height:1.5;
  white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
/* sm: 행 버튼이 아닌 페이지 CTA — 탭(.csw-tab 6px 12px)과 패딩 일치 → 세로 리듬 정렬 */
.page-header .btn-sm{padding:6px 12px;font-size:12.5px;}
.page-header .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.page-header .btn-primary:hover{background:var(--accent-text);border-color:var(--accent-text);}
.page-header .btn-outline{background:var(--surface);border-color:var(--border);color:var(--text2);}
.page-header .btn-outline:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);}
.page-header .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 모달 내 outline 버튼 (그룹 상세 '수정' 등) — 모달은 .page-header 스코프 밖이라 별도 정의 */
.csw-mbtn{width:auto;padding:8px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;font-family:inherit;color:var(--text2);cursor:pointer;white-space:nowrap;}
.csw-mbtn:hover{background:var(--surface2);color:var(--text);}

/* ── 탭 ── */
.csw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap;}
.csw-tab{padding:6px 12px;border:none;background:none;border-radius:8px 8px 0 0;color:var(--text2);cursor:pointer;font-size:13px;white-space:nowrap;font-family:inherit;}
.csw-tab:hover{background:var(--surface2);}
.csw-tab.on{background:var(--surface);border:1px solid var(--border);border-bottom:1px solid var(--surface);margin-bottom:-1px;font-weight:700;color:var(--accent-text);}
.csw-tab-cnt{font-size:11px;color:var(--text3);margin-left:4px;}

/* ── 필터바 ── */
.csw-fbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
.csw-search{max-width:280px;}
.csw-fsel{width:auto;min-width:130px;}
.csw-count{font-size:12px;color:var(--text3);margin-left:auto;white-space:nowrap;}

/* ── 테이블 ── */
.csw-tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.csw-table{border-collapse:collapse;width:100%;font-size:12.5px;}
.csw-table th{background:var(--surface2);padding:8px 10px;text-align:left;font-weight:700;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;}
.csw-table td{padding:7px 10px;border-bottom:1px solid var(--surface2);vertical-align:middle;font-variant-numeric:tabular-nums;}
.csw-table tbody tr{cursor:pointer;}
.csw-table tbody tr:hover{background:var(--accent-light);}
.csw-table tbody tr:last-child td{border-bottom:none;}
.csw-nowrap{white-space:nowrap;}
.csw-prod{min-width:180px;max-width:320px;}
.csw-sym{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);}
.csw-logi{font-size:13px;letter-spacing:2px;}
.csw-dim{opacity:.25;filter:grayscale(1);}

/* ── 상태 pill / SKU 뱃지 ── */
.csw-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;line-height:1.6;}
.csw-st-open{background:#dbeafe;color:#2563eb;}
.csw-st-hold{background:var(--red-light);color:#e11d48;}
.csw-st-done{background:var(--green-light);color:var(--green);}
.csw-st-warn{background:var(--amber-light);color:var(--amber);}
.csw-st-ok{background:var(--green-light);color:var(--green);}
.csw-sku{display:inline-block;font-size:11px;background:var(--accent-light);color:var(--accent-text);border-radius:6px;padding:1px 7px;white-space:nowrap;}
.csw-sku.none{background:var(--surface2);color:var(--text3);}

/* ── 모달 폼 ── */
.csw-modal{max-height:min(66vh,640px);overflow-y:auto;padding-right:4px;}
.csw-msec{font-size:11.5px;font-weight:800;color:var(--accent-text);letter-spacing:.06em;border-bottom:1px solid var(--border);padding-bottom:4px;margin:14px 0 10px;}
.csw-msec:first-child{margin-top:0;}
.csw-mrow{display:flex;gap:10px;flex-wrap:wrap;}
.csw-mrow .form-group{flex:1;min-width:140px;}
.csw-details{border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:10px;}
.csw-details summary{font-weight:700;font-size:12.5px;color:var(--text2);cursor:pointer;}
.csw-hint{font-size:11.5px;color:var(--text3);margin-top:4px;}

/* ── SKU 색상 칩 ── */
.csw-chips{display:flex;gap:6px;flex-wrap:wrap;}
.csw-chip{border:1px solid var(--border);border-radius:99px;padding:3px 12px;background:var(--surface);color:var(--text2);font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.csw-chip:hover{border-color:var(--accent);color:var(--accent-text);}
.csw-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.csw-chip.ghost{border-style:dashed;color:var(--text3);}
.csw-chip.ghost.on{background:var(--surface2);color:var(--text2);border-color:var(--border2);border-style:solid;font-weight:700;}

/* ── 그룹 자동완성 ── */
.csw-ac{position:relative;}
.csw-ac-drop{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-top:3px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:260px;overflow-y:auto;}
.csw-ac-op{padding:7px 12px;font-size:13px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--surface2);}
.csw-ac-op:last-child{border-bottom:none;}
.csw-ac-op:hover{background:var(--accent-light);color:var(--accent-text);}
.csw-ac-op small{color:var(--text3);font-size:11px;margin-left:6px;}