/**
 * 피킹 작업 페이지 스타일
 */

/* 메인 탭 */
.main-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.main-tab {
    flex: 1;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: #f7fafc;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s;
}
.main-tab.active {
    background: #3182ce;
    color: #fff;
}.main-tab.active{
    background: #FFC21A;
    color:#2B1D00;
}
.main-tab:not(.active):hover {
    background: #edf2f7;
}.main-tab:not(.active):hover{
    background: #FFF4D1;
}

/* 탭 컨텐츠 */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* 스캔 섹션 */
.scan-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.scan-input-wrap {
    display: flex;
    gap: 8px;
}
.scan-input {
    flex: 1;
    padding: 12px 14px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    font-family: 'Courier New', monospace;
}
.scan-input:focus {
    outline: none;
    border-color: #3182ce;
}.scan-input:focus{
    outline: none;
    border-color: #FFC21A;
}
/* 스캔 모드 버튼 그룹 (.mode-btn 패턴) — 컴팩트 */
.scan-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.mode-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #4a5568;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
}
.mode-btn:hover { border-color: #cbd5e0; color: #2d3748; }
.mode-btn:active { transform: scale(0.97); }
.mode-btn.on {
    background: linear-gradient(135deg, #3182ce, #2b6cb0);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(49, 130, 206, 0.3);
}.mode-btn.on{
    background: linear-gradient(135deg, #FFC21A, #FFC21A);
    color:#2B1D00;
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(255,194,26,0.3);
}
.mode-btn.on:hover { color: #fff; }

/* 진행률 — 한 줄 컴팩트 */
.scan-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 2px;
    font-size: 12px;
    color: #718096;
    line-height: 1;
}
.scan-progress-label {
    font-weight: 600;
    color: #4a5568;
    flex-shrink: 0;
}
.scan-progress-value {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.scan-progress-value strong {
    color: #2b6cb0;
    font-size: 13px;
    font-weight: 700;
}.scan-progress-value strong{
    color: #946200;
    font-size: 13px;
    font-weight: 700;
}
.scan-progress-bar {
    flex: 1 1 auto;
    min-width: 60px;
    height: 4px;
    background: #edf2f7;
    border-radius: 999px;
    overflow: hidden;
}.scan-progress-bar{
    flex: 1 1 auto;
    min-width: 60px;
    height: 4px;
    background: #FFF4D1;
    border-radius: 999px;
    overflow: hidden;
}
.scan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #38a169, #3182ce);
    border-radius: 999px;
    transition: width 0.3s ease;
}.scan-progress-fill{
    height: 100%;
    background: linear-gradient(90deg, #38a169, #FFC21A);
    border-radius: 999px;
    transition: width 0.3s ease;
;color:#2B1D00}
.scan-progress.complete .scan-progress-fill { background: #38a169; }
.scan-progress.complete .scan-progress-value strong { color: #38a169; }

/* 진행률 직접입력 (직전 스캔 상품이 있을 때만 터치 가능) */
.scan-progress.editable { cursor: pointer; }
.scan-progress.editable:active { opacity: 0.65; }
.scan-progress-edit-hint {
    display: none;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #3182ce;
    white-space: nowrap;
}.scan-progress-edit-hint{
    display: none;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #946200;
    white-space: nowrap;
}
.scan-progress.editable .scan-progress-edit-hint { display: inline; }

/* 서브 탭 (요청/완료) */
.sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.sub-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: #f7fafc;
    color: #718096;
    cursor: pointer;
}
.sub-tab.active {
    background: #4a5568;
    color: #fff;
}

/* 리스트 테이블 */
.list-section {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.list-header {
    padding: 12px 16px;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 14px;
    color: #4a5568;
}
.list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.list-table th {
    padding: 10px 12px;
    background: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    /* 스크롤 시 헤더 고정 — border-collapse 에서 경계선이 사라지지 않게 box-shadow 사용 */
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}
.list-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}.list-table td{
    padding: 10px 12px;
    border-bottom: 1px solid #FFD24D;
    vertical-align: middle;
}
.list-table tr:last-child td {
    border-bottom: none;
}
.list-table .col-product {
    width: auto;
}
.list-table .col-qty {
    text-align: center;
    width: 50px;
}
/* 피킹리스트 수치 컬럼 색상: 주문=빨강 입고=주황 창고=노랑 가용재고=초록 현재고=파랑 */
.list-table td.q-incoming  { color: #dd6b20; font-weight: 700; }
.list-table td.q-warehouse { color: #d69e2e; font-weight: 700; }
.list-table td.q-avail     { color: #2f855a; font-weight: 700; }
.list-table td.q-real      { color: #2b6cb0; font-weight: 700; }.list-table td.q-real{ color: #946200; font-weight: 700; }
.list-table td.q-order .qty-badge { color: #e53e3e; font-weight: 700; }
.list-table td.q-order .qty-badge.complete { color: #e53e3e; }
.list-table .col-location {
    text-align: center;
    width: 70px;
    font-weight: 600;
    color: #2c5282;
    font-size: 12px;
}.list-table .col-location{
    text-align: center;
    width: 70px;
    font-weight: 600;
    color: #946200;
    font-size: 12px;
}
.list-table .col-zone {
    text-align: center;
    width: 44px;
    font-weight: 600;
    color: #285e61;
    font-size: 12px;
}
.list-table .col-status {
    text-align: center;
    width: 60px;
    white-space: nowrap;
}
/* 브랜드 컬럼 */
.list-table .col-brand {
    max-width: 60px;
    width: 60px;
    cursor: pointer;
}
.brand-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #5a67d8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}.brand-name{
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #946200;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.product-name {
    font-weight: 500;
    color: #2d3748;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-all;
}
.product-option {
    font-size: 11px;
    color: #718096;
    display: block;
    margin-top: 2px;
}

/* 상태 뱃지 */
.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.status-badge.waiting {
    background: #fefcbf;
    color: #744210;
}
.status-badge.picking {
    background: #bee3f8;
    color: #2a4365;
}.status-badge.picking{
    background: #FFF4D1;
    color: #946200;
}
.status-badge.picked {
    background: #c6f6d5;
    color: #22543d;
}

/* 수량 뱃지 */
.qty-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #edf2f7;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}.qty-badge{
    display: inline-block;
    padding: 2px 6px;
    background: #FFF4D1;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.qty-badge:hover {
    background: #e2e8f0;
}
.qty-badge.complete {
    background: #c6f6d5;
    color: #22543d;
}

/* 보류 칩 — 피킹작업 수량 옆. 미확인 보류=주황, 확인완료만=초록 */
.hold-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.hold-chip.has-hold {
    background: #feebc8;
    color: #9c4221;
    border: 1px solid #f6ad55;
}
.hold-chip.hold-confirmed {
    background: #c6f6d5;
    color: #22543d;
    border: 1px solid #9ae6b4;
}

/* 앵글 뱃지 */
.slot-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #3182ce;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}.slot-badge{
    display: inline-block;
    padding: 3px 8px;
    background: #FFC21A;
    color:#2B1D00;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* 앵글 컬럼 폭 제한 */
.list-table .col-slot {
    width: 70px;
    text-align: center;
}
.slot-badge.large {
    padding: 8px 16px;
    font-size: 18px;
}

/* 피킹작업 - 결과 패널 */
.result-panel {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* 작업탭의 위치 안내는 테이블 스크롤시에도 상단 바 아래에 고정 */
#workTab > #locationGuide {
    position: sticky;
    top: 90px; /* main-tabs-bar(42) + worker-back-bar(48) */
    z-index: 50;
}
.result-message {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 12px;
}
.location-display {
    text-align: center;
    padding: 16px;
    background: #f7fafc;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}
.result-panel.active .location-display {
    background: #ebf8ff;
    border-color: #90cdf4;
}.result-panel.active .location-display{
    background: #FFF4D1;
    border-color: #FFC21A;
}
.location-display .slot-no {
    font-size: 32px;
    font-weight: 700;
    color: #a0aec0;
}
.result-panel.active .location-display .slot-no {
    color: #2c5282;
}.result-panel.active .location-display .slot-no{
    color: #946200;
}
.location-display .basket-info {
    font-size: 13px;
    color: #a0aec0;
    margin-top: 8px;
}
.result-panel.active .location-display .basket-info {
    color: #4a5568;
}
.result-panel.error .location-display {
    background: #fff5f5;
    border-color: #feb2b2;
}
.result-panel.error .location-display .slot-no {
    color: #e53e3e;
}
.result-panel.error .location-display .basket-info {
    color: #742a2a;
}
/* 구역 미선택(전체) 경고 — 작업 차단 시 */
.result-panel.zone-warn .location-display {
    background: #fffaf0;
    border-color: #f6ad55;
}
.result-panel.zone-warn .location-display .slot-no {
    color: #dd6b20;
}
.result-panel.zone-warn .location-display .basket-info {
    color: #9c4221;
    font-weight: 700;
}

/* 포장처리 버튼 (피킹완료된 바구니용) */
.pack-complete-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25);
    transition: filter 0.15s, transform 0.05s, box-shadow 0.15s;
}
.pack-complete-btn:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 10px rgba(22,163,74,0.35);
}
.pack-complete-btn:active {
    transform: translateY(1px);
}

/* 바구니 스캔 섹션 */
.basket-scan-section {
    background: #fffbeb;
    border: 2px solid #f6e05e;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}
.basket-scan-hint {
    font-size: 12px;
    color: #744210;
    margin-top: 8px;
    text-align: center;
}

/* 앵글별 리스트 */
.slot-list-section {
    margin-top: 16px;
}
.slot-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.slot-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
}

/* 빈 상태 */
.empty-state {
    padding: 40px 20px;
    text-align: center !important;
    color: #a0aec0;
    font-size: 14px;
}

/* 수정 모달 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;  /* 모바일 브라우저 하단 툴바 제외한 실제 높이 */
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);  /* 하단 네비게이션 안전영역 */
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
}
.modal-header {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #a0aec0;
}
.modal-body {
    padding: 16px;
}
.modal-footer {
    padding: 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* 수량 입력 */
.qty-input-group {
    margin-bottom: 16px;
}
.qty-input-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 6px;
}
.qty-input-group input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
}
.qty-input-group input:focus {
    outline: none;
    border-color: #3182ce;
}.qty-input-group input:focus{
    outline: none;
    border-color: #FFC21A;
}

/* 버튼 */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.btn-primary {
    background: #3182ce;
    color: #fff;
}.btn-primary{
    background: #FFC21A;
    color:#2B1D00;
}
.btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}
.btn-danger {
    background: #e53e3e;
    color: #fff;
}
.btn-success {
    background: #38a169;
    color: #fff;
}

/* 필터 바 */
.filter-bar {
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.range-filter {
    display: flex;
    align-items: center;
    gap: 5px;
}
.range-input {
    width: 52px;
    padding: 6px 4px;
    font-size: 14px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    text-align: center;
}
.range-input:focus { outline: none; border-color: #3182ce; }.range-input:focus{ outline: none; border-color: #FFC21A; }
.range-sep {
    font-size: 13px;
    color: #4a5568;
    white-space: nowrap;
}
.filter-btn {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.filter-btn.apply { background: #3182ce; color: #fff; }.filter-btn.apply{ background: #FFC21A; color:#2B1D00; }
.filter-btn.apply:hover { background: #2c5aa0; }.filter-btn.apply:hover{ background: #FFC21A; ;color:#2B1D00}
.filter-btn.reset { background: #edf2f7; color: #4a5568; }.filter-btn.reset{ background: #FFF4D1; color: #4a5568; }
.filter-btn.reset:hover { background: #e2e8f0; }
/* 입고/창고 양수값 토글 필터 — off: 회색 / on: 강조색 */
.filter-btn.qty-filter { background: #edf2f7; color: #4a5568; }.filter-btn.qty-filter{ background: #FFF4D1; color: #4a5568; }
.filter-btn.qty-filter.active#incomingFilterBtn { background: #dd6b20; color: #fff; }
.filter-btn.qty-filter.active#warehouseFilterBtn { background: #d69e2e; color: #fff; }

/* 상품 스캔 시 해당 앵글 행 강조 */
.list-table tbody tr.slot-row-active > td {
    background: #fefcbf;
    box-shadow: inset 3px 0 0 #d69e2e;
}

/* 구역 필터 셀렉트박스 */
.zone-filter-select {
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    background: #fff;
    color: #2d3748;
    min-width: 90px;
    cursor: pointer;
}
.zone-filter-select:focus { outline: none; border-color: #3182ce; }.zone-filter-select:focus{ outline: none; border-color: #FFC21A; }

/* 적재위치 필터 표시 */
.location-filter-display {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #ebf8ff;
    border-radius: 12px;
    font-size: 12px;
}.location-filter-display{
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #FFF4D1;
    border-radius: 12px;
    font-size: 12px;
}
.location-filter-label { color: #4a5568; }
.location-filter-value { font-weight: 600; color: #2c5282; }.location-filter-value{ font-weight: 600; color: #946200; }
.location-filter-clear {
    background: none;
    border: none;
    font-size: 16px;
    color: #a0aec0;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.location-filter-clear:hover { color: #e53e3e; }

/* 순번 컬럼 */
.list-table .col-no {
    width: 32px;
    text-align: center;
    color: #a0aec0;
    font-size: 11px;
}

/* 정렬 가능 헤더 */
.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-header:hover { background: #edf2f7; }.sortable-header:hover{ background: #FFF4D1; }
.sortable-header .sort-icon {
    font-size: 11px;
    color: #a0aec0;
    margin-left: 2px;
}
.sortable-header.sort-active .sort-icon { color: #3182ce; }.sortable-header.sort-active .sort-icon{ color: #946200; }

/* 적재위치 클릭 필터 */
.location-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.location-clickable:hover {
    color: #3182ce;
    text-decoration-style: solid;
}.location-clickable:hover{
    color: #946200;
    text-decoration-style: solid;
}

/* 접기/펼치기 드로어 */
.picking-drawer {
    margin-bottom: 8px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.picking-drawer.collapsed {
    max-height: 32px;
}
.picking-drawer-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    touch-action: pan-y;
}
.handle-bar {
    width: 40px;
    height: 4px;
    background: #cbd5e0;
    border-radius: 2px;
    transition: background 0.2s;
}

/* 필터바 드로어만 작게 */
#filterDrawer.collapsed {
    max-height: 14px;
}
#filterDrawer .picking-drawer-handle {
    padding: 4px;
}
#filterDrawer .handle-bar {
    width: 28px;
    height: 3px;
}
.picking-drawer.collapsed .handle-bar {
    background: #3182ce;
}.picking-drawer.collapsed .handle-bar{
    background: #FFC21A;
;color:#2B1D00}
.picking-drawer-content {
    transition: opacity 0.3s ease;
}
.picking-drawer.collapsed .picking-drawer-content {
    opacity: 0;
    pointer-events: none;
}


/* ============== 필터바 v2 (피킹 리스트) ============== */
.filter-bar-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
}
.filter-bar-v2 .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.filter-bar-v2 .filter-row-actions {
    justify-content: space-between;
    gap: 16px;
}
.filter-bar-v2 .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}
.filter-bar-v2 .filter-group-grow { flex: 1; }
.filter-bar-v2 .filter-group-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.filter-bar-v2 .filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    letter-spacing: 0.3px;
}
.filter-bar-v2 .filter-input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: #fff;
    color: #2d3748;
    box-sizing: border-box;
    width: 100%;
}
.filter-bar-v2 .filter-input:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49,130,206,0.15);
}.filter-bar-v2 .filter-input:focus{
    outline: none;
    border-color: #FFC21A;
    box-shadow: 0 0 0 2px rgba(255,194,26,0.15);
}
.filter-bar-v2 .filter-select { cursor: pointer; }
.filter-bar-v2 .filter-toggle-group { display: flex; gap: 6px; }
.filter-bar-v2 .filter-toggle {
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: #fff;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s;
}
.filter-bar-v2 .filter-toggle:hover { background: #f7fafc; }
.filter-bar-v2 .filter-toggle.active#incomingFilterBtn {
    background: #dd6b20; border-color: #dd6b20; color: #fff;
}
.filter-bar-v2 .filter-toggle.active#warehouseFilterBtn {
    background: #d69e2e; border-color: #d69e2e; color: #fff;
}
.filter-bar-v2 .filter-actions { display: flex; gap: 6px; }
.filter-bar-v2 .filter-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 12px;
}

/* ============== 정렬 바 ============== */
.list-sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 8px;
}
.sort-bar-label {
    font-size: 11px;
    color: #718096;
    font-weight: 600;
    margin-right: 2px;
}
.sort-bar-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sort-bar-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}
.sort-bar-btn.active {
    background: #ebf8ff;
    border-color: #90cdf4;
    color: #2c5282;
}.sort-bar-btn.active{
    background: #FFF4D1;
    border-color: #FFC21A;
    color: #946200;
}
.sort-bar-btn .sort-icon { font-size: 11px; opacity: 0.7; }

/* ============== 피킹 카드 ============== */
.picking-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 2px 8px;
}
.picking-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
    scroll-snap-align: start;
}
.picking-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border-color: #cbd5e0;
}
.picking-card.slot-row-active {
    background: #fefcbf;
    border-color: #d69e2e;
    box-shadow: inset 3px 0 0 #d69e2e, 0 2px 6px rgba(214,158,46,0.2);
}
/* 스캔 시 해당 카드 깜빡임(피킹작업과 유사한 시각 피드백) — 3회 점멸 후 원복 */
@keyframes pickCardFlash {
    0%, 100% { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    50%      { background: #faf089; box-shadow: inset 3px 0 0 #d69e2e, 0 2px 10px rgba(214,158,46,0.45); }
}
.picking-card.scan-flash {
    animation: pickCardFlash 0.45s ease-in-out 3;
    border-color: #d69e2e;
}
.picking-card .card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #edf2f7;
    flex-wrap: nowrap;
}.picking-card .card-top{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #FFD24D;
    flex-wrap: nowrap;
}
.picking-card .card-location {
    font-size: 11px;
    font-weight: 700;
    color: #2c5282;
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}.picking-card .card-location{
    font-size: 11px;
    font-weight: 700;
    color: #946200;
    background: #FFF4D1;
    border: 1px solid #FFD24D;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}
.picking-card .card-location:hover { background: #bee3f8; }.picking-card .card-location:hover{ background: #FFF4D1; }
/* 보류 탭 — 적재위치 앞 배정 바구니 수 칩 (클릭시 송장/고객 정보) */
.picking-card .card-basket-count {
    font-size: 11px;
    font-weight: 700;
    color: #744210;
    background: #fefcbf;
    border: 1px solid #f6e05e;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    cursor: pointer;
}
.picking-card .card-basket-count:hover { background: #faf089; }
/* 보류 바구니 정보 모달 — 바구니 구분 행 */
#holdBasketsTable tr.basket-group-row td {
    background: #f7fafc;
    border-top: 2px solid #e2e8f0;
    padding: 6px 8px;
    font-size: 13px;
}
.picking-card .card-zones { display: flex; gap: 3px; flex-shrink: 0; }
.picking-card .card-zone-chip {
    font-size: 11px;
    font-weight: 600;
    color: #285e61;
    background: #e6fffa;
    border: 1px solid #b2f5ea;
    padding: 2px 7px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.picking-card .card-zone-chip:hover {
    background: #b2f5ea;
    border-color: #81e6d9;
}
.picking-card .card-zone-chip.empty {
    color: #cbd5e0;
    cursor: default;
    background: transparent;
    border-color: transparent;
}
/* 구역별 배지 색상 — 쿠팡=새빨강, 주문=새파랑 (대표님 요청 2026-07-14). 피킹리스트 칩 + 피킹작업 앵글배지 공통 */
.picking-card .card-zone-chip.zone-coupang,
.slot-badge.zone-coupang { background: #EF1B1B; border-color: #C81212; color: #fff; }
.picking-card .card-zone-chip.zone-coupang:hover { background: #D91616; border-color: #B01010; }
.picking-card .card-zone-chip.zone-order,
.slot-badge.zone-order { background: #1668FF; border-color: #0E4FCC; color: #fff; }.picking-card .card-zone-chip.zone-order,
.slot-badge.zone-order{ background: #FFC21A; border-color: #FFC21A; color:#2B1D00; }
.picking-card .card-zone-chip.zone-order:hover { background: #0F58E6; border-color: #0A43B3; }.picking-card .card-zone-chip.zone-order:hover{ background: #FFC21A; border-color: #FFC21A; ;color:#2B1D00}

/* 앵글(바구니) 숫자 배지 색 진/연 교대 — 인접 앵글 구분용 (대표님 2026-08-31).
   기본(zone-coupang/order)=진한색, .ztb=연한색 */
.slot-badge.zone-coupang.ztb { background: #F87171; border-color: #DC2626; }
.slot-badge.zone-order.ztb   { background: #60A5FA; border-color: #2563EB; }.slot-badge.zone-order.ztb{ background: #FFC21A; border-color: #FFC21A; ;color:#2B1D00}
.picking-card .card-product {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
}
.picking-card .card-product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.3;
    word-break: break-word;
}
.picking-card .card-product-option {
    display: block;
    font-size: 11px;
    color: #718096;
    margin-top: 1px;
    word-break: break-word;
}
.picking-card .card-qtys {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #f7fafc;
}
.picking-card .qty-item {
    background: #fff;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid #edf2f7;
}.picking-card .qty-item{
    background: #fff;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid #FFD24D;
}
.picking-card .qty-item:last-child { border-right: none; }
.picking-card .qty-item-clickable { cursor: pointer; transition: background 0.1s; }
.picking-card .qty-item-clickable:hover { background: #ebf8ff; }.picking-card .qty-item-clickable:hover{ background: #FFF4D1; }
.picking-card .qty-item .qty-label {
    font-size: 10px;
    color: #718096;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.picking-card .qty-item .qty-value {
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
}
/* 컬럼별 컬러 (숫자에만): 주문=빨강 입고=주황 창고=노랑 가용=초록 현재=파랑 */
.picking-card .qty-item.qty-order     .qty-value { color: #e53e3e; }
.picking-card .qty-item.qty-advance   .qty-value { color: #805ad5; }
.picking-card .qty-item.qty-incoming  .qty-value { color: #dd6b20; }
.picking-card .qty-item.qty-warehouse .qty-value { color: #d69e2e; }
.picking-card .qty-item.qty-avail     .qty-value { color: #2f855a; }
.picking-card .qty-item.qty-real      .qty-value { color: #2b6cb0; }.picking-card .qty-item.qty-real      .qty-value{ color: #946200; }
.picking-card .qty-item .qty-value.complete { color: #2f855a !important; }
.card-empty {
    text-align: center;
    color: #a0aec0;
    padding: 40px 20px;
    font-size: 13px;
}

/* 카드 보류 버튼 */
.picking-card .card-hold-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #c05621;
    border: 1px solid #fbd38d;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.picking-card .card-hold-btn:hover {
    background: #fffaf0;
    border-color: #ed8936;
}
.picking-card .card-hold-btn.has-hold {
    background: #ed8936;
    color: #fff;
    border-color: #ed8936;
}
.picking-card .card-hold-btn.has-hold:hover {
    background: #dd6b20;
    border-color: #dd6b20;
}
.picking-card .card-hold-btn.hold-confirmed {
    background: #38a169;
    color: #fff;
    border-color: #38a169;
}
.picking-card .card-hold-btn.hold-confirmed:hover {
    background: #2f855a;
    border-color: #2f855a;
}
/* 보류 확인완료된 카드 — 초록 강조 */
.picking-card.card-hold-confirmed {
    background: #f0fff4;
    border-color: #9ae6b4;
}
/* '확인' 버튼 (보류 왼쪽) + 확인된 카드 연한 초록 */
.picking-card .card-confirm-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    padding: 0 10px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s;
}.picking-card .card-confirm-btn{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    padding: 0 10px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #946200;
    border: 1px solid #FFD24D;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s;
}
.picking-card .card-confirm-btn:hover {
    background: #EFF6FF;
    border-color: #2563EB;
}.picking-card .card-confirm-btn:hover{
    background: #FFF4D1;
    border-color: #FFC21A;
}
.picking-card .card-confirm-btn.on {
    background: #2563EB;
    color: #fff;
    border-color: #2563EB;
}.picking-card .card-confirm-btn.on{
    background: #FFC21A;
    color:#2B1D00;
    border-color: #FFC21A;
}
.picking-card.card-confirmed {
    background: #EFF6FF;
    border-color: #BFDBFE;
}.picking-card.card-confirmed{
    background: #FFF4D1;
    border-color: #FFD24D;
}
/* OK 확인자 이름 — 상품명 아래 작은 캡션 (버튼이 길어지지 않게) */
.picking-card .card-confirm-by {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #2563EB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.picking-card .card-confirm-by{
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #946200;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 상품 옵션 아래 보류 사유/메모 라인 */
.picking-card .card-hold-reason {
    margin-top: 4px;
    font-size: 11px;
    color: #7b341e;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.picking-card.card-hold-confirmed .card-hold-reason {
    color: #22543d;
}
.picking-card .hold-reason-chip {
    background: #fff5e6;
    border: 1px solid #fbd38d;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
    line-height: 1.4;
}
.picking-card.card-hold-confirmed .hold-reason-chip {
    background: #f0fff4;
    border-color: #9ae6b4;
}
.picking-card .hold-memo-text {
    color: inherit;
    opacity: 0.85;
    word-break: break-word;
}
/* 보류 지시자 / 확인 작업자 이름 칩 */
.picking-card .hold-by-name {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #2c5282;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
    line-height: 1.4;
}.picking-card .hold-by-name{
    background: #FFF4D1;
    border: 1px solid #FFD24D;
    color: #946200;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
    line-height: 1.4;
}
.picking-card .hold-by-name.confirmed {
    background: #f0fff4;
    border-color: #9ae6b4;
    color: #22543d;
}

/* 보류 모달 — 사유 선택 버튼 그룹 */
.hold-reason-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hold-reason-btn {
    flex: 1;
    min-width: 80px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #4a5568;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.hold-reason-btn:hover { background: #f7fafc; }
.hold-reason-btn.active {
    background: #ed8936;
    color: #fff;
    border-color: #ed8936;
}


/* 상품명 터치 툴팁 */
.product-tooltip {
    position: absolute;
    z-index: 9999;
    background: #2d3748;
    color: #fff;
    border-radius: 8px;
    padding: 10px 32px 10px 14px;
    max-width: 90vw;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    word-break: break-word;
}
.product-tooltip.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.tooltip-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.tooltip-close:hover {
    color: #fff;
}
.tooltip-brand {
    font-size: 11px;
    color: #90cdf4;
    font-weight: 600;
    margin-bottom: 3px;
}.tooltip-brand{
    font-size: 11px;
    color: #946200;
    font-weight: 600;
    margin-bottom: 3px;
}
.tooltip-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.tooltip-option {
    font-size: 11px;
    color: #cbd5e0;
    margin-top: 3px;
}

/* 반응형 */
@media (max-width: 767px) {
    /* 메인 탭 축소 */
    .main-tabs { margin-bottom: 8px; }
    .main-tab {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* 스캔 섹션 축소 */
    .scan-section {
        padding: 8px;
        margin-bottom: 6px;
    }
    .scan-input {
        padding: 8px 10px;
        font-size: 14px;
    }

    /* 결과 패널 축소 */
    .result-panel {
        padding: 6px;
        margin-bottom: 6px;
    }
    .location-display {
        padding: 8px;
        margin-bottom: 0;
    }
    .location-display .slot-no {
        font-size: 22px;
    }
    .location-display .basket-info {
        font-size: 12px;
        margin-top: 4px;
    }

    /* 서브 탭 축소 */
    .sub-tabs { margin-bottom: 6px; margin-top: 8px !important; }
    .sub-tab {
        padding: 7px 10px;
        font-size: 13px;
    }

    /* 필터 바 축소 */
    .filter-bar {
        padding: 6px 8px;
        margin-bottom: 6px;
    }

    /* 바구니 스캔 섹션 축소 */
    .basket-scan-section {
        padding: 8px;
        margin-top: 6px;
    }

    /* 리스트 탭: 카드형 — picking-card-list가 스크롤+스냅 */
    .list-section:has(.picking-card-list) {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .picking-card-list {
        overflow-y: auto;
        max-height: 65vh;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
        scroll-padding-top: 4px;
        scroll-behavior: smooth;
        padding-bottom: 12px;
    }
    /* 작업 탭: 슬롯 리스트 테이블 — list-section이 스크롤+스냅 */
    .list-section:has(.list-table) {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 55vh;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
        scroll-padding-top: 28px;
    }
    .list-section .list-table { min-width: 100%; }
    .list-section .list-table tbody tr { scroll-snap-align: start; }
    .list-section .list-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f7fafc;
    }
    .list-table {
        font-size: 11px;
    }
    .list-table th {
        padding: 6px 4px;
        font-size: 10px;
        white-space: nowrap;
    }
    .list-table td {
        padding: 6px 4px;
    }
    .list-table .col-no { width: 24px; font-size: 10px; }
    .list-table .col-qty { width: 36px; font-size: 11px; }
    .list-table .col-location { width: 52px; font-size: 10px; }
    .list-table .col-zone { width: 32px; font-size: 10px; }
    .list-table .col-brand { width: 40px; max-width: 40px; }
    .brand-name { font-size: 10px; max-width: 40px; }
    .list-table .col-slot { width: 50px; }
    .list-table .col-status { width: 40px; white-space: nowrap; }
    .list-table .col-product { max-width: 80px; }
    .product-name {
        max-width: 120px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 11px;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    .product-option {
        font-size: 10px;
    }
    .status-badge {
        padding: 2px 5px;
        font-size: 10px;
    }
    .qty-badge {
        font-size: 11px;
        padding: 1px 4px;
    }
}

/* ============================================================
   적재위치 구간 입력 + 필터 내 정렬 행
   ============================================================ */
.loc-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.loc-range .filter-input { flex: 1; min-width: 0; }
.loc-range-sep { color: #a0aec0; font-weight: 700; flex-shrink: 0; }

/* 적재위치 프리셋: 입력칸 클릭 → 모달에서 선택/추가/수정/삭제 */
.loc-preset-trigger { cursor: pointer; background: #fff; }
.loc-preset-add { display: flex; gap: 8px; margin-bottom: 12px; }
.loc-preset-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; outline: none; }
.loc-preset-add input:focus { border-color: #3182ce; }.loc-preset-add input:focus{ border-color: #FFC21A; }
.loc-preset-add-btn { padding: 8px 16px; background: #3182ce; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; flex-shrink: 0; }.loc-preset-add-btn{ padding: 8px 16px; background: #FFC21A; color:#2B1D00; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.loc-preset-add-btn:hover { background: #2b6cb0; }.loc-preset-add-btn:hover{ background: #FFC21A; ;color:#2B1D00}
.loc-preset-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 50vh; overflow-y: auto; }
.loc-preset-chip { display: inline-flex; align-items: center; border: 1px solid #cbd5e0; border-radius: 16px; overflow: hidden; background: #f7fafc; }
.loc-preset-val { padding: 7px 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: #2d3748; }
.loc-preset-val:hover { background: #ebf8ff; color: #2b6cb0; }.loc-preset-val:hover{ background: #FFF4D1; color: #946200; }
.loc-preset-chip button { border: none; background: transparent; cursor: pointer; padding: 7px 7px; font-size: 13px; color: #a0aec0; border-left: 1px solid #e2e8f0; }
.loc-preset-chip button:hover { color: #e53e3e; background: #fff5f5; }
.loc-preset-empty { color: #a0aec0; font-size: 13px; padding: 14px; text-align: center; width: 100%; }
/* 필터 박스 안으로 옮긴 정렬 행 */
.filter-row.filter-row-sort { margin-top: 6px; }
.filter-row-sort .filter-toggle-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   선출 / 댓글 / 요청처리 (추가 기능)
   ============================================================ */

/* 보류 탭 카드의 요청처리 버튼 행 */
.picking-card .card-hold-actions {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px 0;
}
.picking-card .card-request-btn {
    border: 1px solid #ed8936;
    background: #fffaf0;
    color: #c05621;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.picking-card .card-request-btn:hover { background: #feebc8; }

/* 요청처리 버튼 (모달 footer) */
.btn.btn-warning {
    background: #ed8936;
    color: #fff;
}
.btn.btn-warning:hover { background: #dd6b20; }

/* 공용 댓글 위젯 */
.comment-box {
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}
.comment-box-title {
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 6px;
}
.comment-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.comment-empty {
    font-size: 12px;
    color: #a0aec0;
    text-align: center;
    padding: 10px 0;
}
.comment-item {
    background: #f7fafc;
    border: 1px solid #edf2f7;
    border-radius: 6px;
    padding: 6px 8px;
}.comment-item{
    background: #f7fafc;
    border: 1px solid #FFD24D;
    border-radius: 6px;
    padding: 6px 8px;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #718096;
    margin-bottom: 2px;
}
.comment-author { font-weight: 700; color: #4a5568; }
.comment-time { color: #a0aec0; }
.comment-del {
    margin-left: auto;
    border: none;
    background: none;
    color: #cbd5e0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.comment-del:hover { color: #e53e3e; }
.comment-body { font-size: 13px; color: #2d3748; white-space: pre-wrap; word-break: break-word; }
.comment-input-row { display: flex; gap: 6px; }
.comment-input {
    flex: 1;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
}
.comment-send-btn {
    border: none;
    background: #3182ce;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
}.comment-send-btn{
    border: none;
    background: #FFC21A;
    color:#2B1D00;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.comment-send-btn:hover { background: #2b6cb0; }.comment-send-btn:hover{ background: #FFC21A; ;color:#2B1D00}

/* 피킹작업 [선출] 서브탭 */
/* ===== 선출 [선출] 서브탭 — 모바일 최적화 ===== */
.advance-section { padding: 12px 10px 28px; }

/* 등록 카드 */
.adv-add-card {
    background: linear-gradient(135deg, #faf5ff, #f3ebff);
    border: 1px solid #e9d8fd;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(128, 90, 213, 0.08);
}
.adv-add-title { font-size: 13px; font-weight: 800; color: #6b46c1; margin-bottom: 10px; letter-spacing: .3px; }
.adv-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d6bcfa;
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 16px; /* iOS 자동확대 방지 */
    background: #fff;
    margin-bottom: 10px;
}
.adv-input:focus { outline: none; border-color: #805ad5; box-shadow: 0 0 0 3px rgba(128, 90, 213, .15); }
.adv-search-wrap { position: relative; }
.adv-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% - 6px);
    max-height: 46vh; overflow-y: auto;
    background: #fff; border: 1.5px solid #d6bcfa; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(128, 90, 213, 0.22); z-index: 30;
}
.adv-search-item { padding: 11px 13px; border-bottom: 1px solid #f1ebfa; cursor: pointer; }
.adv-search-item:last-child { border-bottom: 0; }
.adv-search-item:active { background: #f3ebff; }
.adv-search-name { font-size: 14px; font-weight: 600; color: #2d3748; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-search-sub { font-size: 12px; color: #805ad5; margin-top: 2px; }
.adv-search-empty { padding: 13px; text-align: center; color: #a0aec0; font-size: 13px; }
.adv-add-row { display: flex; gap: 10px; align-items: stretch; }
.adv-stepper { display: flex; align-items: stretch; border: 1.5px solid #d6bcfa; border-radius: 10px; overflow: hidden; background: #fff; flex-shrink: 0; }
.adv-step-btn { width: 46px; border: none; background: #f3ebff; color: #6b46c1; font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; }
.adv-step-btn:active { background: #e9d8fd; }
.adv-qty-input {
    width: 58px; border: none; text-align: center; font-size: 18px; font-weight: 800;
    color: #2d3748; background: #fff; -moz-appearance: textfield;
}
.adv-qty-input::-webkit-outer-spin-button,
.adv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.adv-submit-btn {
    flex: 1; border: none; background: #805ad5; color: #fff;
    font-size: 16px; font-weight: 800; border-radius: 10px; cursor: pointer;
}
.adv-submit-btn:active { background: #6b46c1; }

/* 선출 카드 */
/* 피킹리스트: 바코드 입력칸 위 구역 필터 바 (대표님 요청 2026-07-15) */
.list-zone-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.list-zone-bar .list-zone-label {
    font-size: 13px;
    font-weight: 700;
    color: #4a5568;
    flex-shrink: 0;
}
.list-zone-bar #zoneFilter {
    flex: 1;
    min-width: 0;
    max-width: 200px;
}

/* 선출 묶음 그룹 — 묶음마다 색상 차별 + 대제목 + 접기/펴기 */
.adv-group {
    border-left: 5px solid #2563EB;
    border-radius: 10px;
    padding: 4px 8px 6px;
    margin-bottom: 14px;
}.adv-group{
    border-left: 5px solid #FFC21A;
    border-radius: 10px;
    padding: 4px 8px 6px;
    margin-bottom: 14px;
}
.adv-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    user-select: none;
}
.adv-group-toggle { font-size: 16px; color: #64748b; width: 16px; flex-shrink: 0; }
.adv-group-title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.adv-group-count {
    font-size: 15px; font-weight: 700; color: #475569;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(0, 0, 0, .06);
    padding: 3px 11px; border-radius: 20px; flex-shrink: 0;
}
.adv-group-memo { font-size: 14px; color: #64748b; margin-left: auto; }
.adv-group-body { padding-top: 8px; }

.adv-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.adv-card.adv-st-pending { border-left-color: #a0aec0; }
.adv-card.adv-st-request { border-left-color: #ed8936; }
.adv-card.adv-st-done    { border-left-color: #38a169; background: #f7fafc; }
.adv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.adv-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.adv-badge-pending { background: #edf2f7; color: #4a5568; }.adv-badge-pending{ background: #FFF4D1; color: #4a5568; }
.adv-badge-request { background: #feebc8; color: #c05621; }
.adv-badge-done    { background: #c6f6d5; color: #276749; }
.adv-card-qty { margin-left: auto; font-size: 20px; font-weight: 800; color: #805ad5; }
.adv-card-qty small { font-size: 12px; font-weight: 700; color: #a0aec0; margin-left: 1px; }
.adv-card-name { font-size: 15px; font-weight: 700; color: #2d3748; line-height: 1.35; word-break: break-word; }
.adv-card-opt { display: inline-block; font-size: 12px; font-weight: 500; color: #718096; margin-left: 4px; }
.adv-card-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: #a0aec0; }
.adv-loc-chip { background: #edf2f7; color: #4a5568; font-weight: 700; padding: 2px 7px; border-radius: 6px; }.adv-loc-chip{ background: #FFF4D1; color: #4a5568; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.adv-card-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.adv-act {
    flex: 1 1 auto; min-height: 42px; min-width: 72px;
    border: 1.5px solid #e2e8f0; background: #fff; color: #4a5568;
    font-size: 13px; font-weight: 700; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.adv-act:active { transform: translateY(1px); }
.adv-act-primary  { border-color: #805ad5; color: #fff; background: #805ad5; }
.adv-act-complete { border-color: #38a169; color: #fff; background: #38a169; }
.adv-act-revert { flex: 0 0 auto; min-width: 60px; }
.adv-act-memo { border-color: #bee3f8; color: #2b6cb0; background: #ebf8ff; flex: 0 0 auto; min-width: 78px; }.adv-act-memo{ border-color: #FFD24D; color: #946200; background: #FFF4D1; flex: 0 0 auto; min-width: 78px; }
.adv-act-del { border-color: #fed7d7; color: #c53030; background: #fff5f5; flex: 0 0 auto; min-width: 58px; }
.adv-card .comment-box { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }

/* 선출 줄줄이 플랫 리스트 (한 줄=한 항목) — 대표님 요청 2026-07-20 */
.adv-list-head { display: flex; align-items: center; gap: 6px; margin: 2px 2px 8px; font-size: 13px; font-weight: 800; color: #4a5568; }
.adv-list-count { font-size: 12px; font-weight: 600; color: #718096; }
.adv-row-wrap {
    background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e0;
    border-radius: 8px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.adv-row-wrap.adv-st-pending { border-left-color: #a0aec0; }
.adv-row-wrap.adv-st-request { border-left-color: #ed8936; }
.adv-row-wrap.adv-st-done { border-left-color: #38a169; background: #f7fafc; }
.adv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; padding: 8px 10px; }
.adv-row-qty { flex-shrink: 0; min-width: 42px; font-size: 17px; font-weight: 800; color: #805ad5; cursor: pointer; }
.adv-row-qty small { font-size: 11px; font-weight: 700; color: #a0aec0; margin-left: 1px; }
.adv-row-name { flex: 1 1 130px; min-width: 110px; font-size: 14px; font-weight: 700; color: #2d3748; line-height: 1.3; word-break: break-word; }
.adv-row-opt { font-weight: 500; color: #718096; font-size: 12px; }
.adv-row-invoice { flex-shrink: 0; font-size: 11px; color: #4a5568; background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 5px; padding: 2px 6px; }
.adv-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
/* 플랫 행에서는 액션 버튼을 작게 (세로 카드용 .adv-act 크기 오버라이드) */
.adv-row-actions .adv-act { flex: 0 0 auto; min-height: 34px; min-width: 0; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.adv-row-actions .adv-act-revert { min-width: 0; }
.adv-row-actions .adv-act-memo { min-width: 0; padding: 0 9px; }
.adv-row-actions .adv-act-del { min-width: 0; padding: 0 9px; }
.adv-row-wrap .comment-box { margin: 0 10px 10px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }

/* 선출 모드 토글 (등록 / 복구) — 2026-07-20 */
.adv-mode-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.adv-mode-btn { flex: 1; min-height: 40px; border: 1.5px solid #e2e8f0; background: #fff; color: #4a5568; font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; }
.adv-mode-btn:active { transform: translateY(1px); }
.adv-mode-btn.on { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }.adv-mode-btn.on{ border-color: #FFC21A; background: #FFC21A; color:#2B1D00; }
.adv-restore-card .adv-add-title small { font-size: 12px; margin-left: 4px; }
.adv-restore-result { margin-top: 8px; }
.adv-restore-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.adv-restore-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 8px; }