/* 2026-11-11 수협 주문 (suhyup.js, .sh-*) — 새 파일. 기준표 --ds-* 사용, 태그 색은 알림함(.nt-tag) 과 같은 연한 바탕 + 진한 글자 */
#sh-sub-btn .sh-badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--ds-danger);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:1px;}

.sh-wrap{max-width:1200px;margin:0 auto;padding:var(--ds-sp-4);display:flex;flex-direction:column;gap:var(--ds-sp-3);}
.sh-head{display:flex;align-items:center;gap:var(--ds-sp-2);flex-wrap:wrap;}
.sh-sp{flex:1;}
.sh-seg{display:inline-flex;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);overflow:hidden;background:#fff;}
.sh-seg-btn{height:34px;padding:0 16px;border:none;background:#fff;font-size:var(--ds-fs-md);font-weight:600;color:var(--ds-gray-600);cursor:pointer;font-family:inherit;}
.sh-seg-btn+.sh-seg-btn{border-left:var(--ds-line) solid var(--ds-gray-200);}
.sh-seg-btn.active{background:var(--ds-brand);color:#fff;}

.sh-tools{display:flex;align-items:center;gap:var(--ds-sp-2);flex-wrap:wrap;justify-content:space-between;}
.sh-chips{display:flex;gap:6px;flex-wrap:wrap;}
.sh-chip{height:30px;padding:0 12px;border:var(--ds-line) solid var(--ds-gray-200);border-radius:15px;background:#fff;font-size:var(--ds-fs-sm);color:var(--ds-gray-600);cursor:pointer;font-family:inherit;}
.sh-chip b{font-weight:700;color:var(--ds-gray-900);margin-left:2px;font-variant-numeric:tabular-nums;}
.sh-chip.active{border-color:var(--ds-primary);background:var(--ds-primary-soft);color:var(--ds-brand);}
.sh-search{max-width:260px;}

.sh-tbl-wrap{overflow-x:auto;background:#fff;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);}
.sh-tbl{width:100%;border-collapse:collapse;font-size:var(--ds-fs-md);white-space:nowrap;}
.sh-tbl th{background:var(--ds-gray-50);color:var(--ds-gray-600);font-weight:600;font-size:var(--ds-fs-sm);text-align:left;padding:9px 12px;border-bottom:var(--ds-line) solid var(--ds-gray-200);}
.sh-tbl td{padding:10px 12px;border-bottom:var(--ds-line) solid #f1f5f9;color:var(--ds-gray-900);}
.sh-tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.sh-tr{cursor:pointer;}
.sh-tr:hover td{background:#f8fafc;}
.sh-tr.sh-new td{font-weight:600;}
.sh-tr.sh-new td.sh-no::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ds-danger);margin-right:6px;vertical-align:2px;}
.sh-no{font-variant-numeric:tabular-nums;color:var(--ds-brand);}
.sh-branch{max-width:220px;overflow:hidden;text-overflow:ellipsis;}
.sh-amt{font-weight:600;}
.sh-empty{padding:28px 12px;text-align:center;color:var(--ds-gray-400);font-size:var(--ds-fs-md);white-space:normal;}
.sh-err{color:var(--ds-danger);}
.sh-dim{color:var(--ds-gray-400);font-size:var(--ds-fs-sm);font-weight:400;}
.sh-ok{color:var(--ds-success);font-weight:600;font-size:var(--ds-fs-sm);}
.sh-warn{color:var(--ds-danger);font-weight:600;font-size:var(--ds-fs-sm);}

.sh-tag{display:inline-block;padding:1px 8px;border-radius:var(--ds-radius-sm);font-size:var(--ds-fs-xs);font-weight:600;line-height:1.7;white-space:nowrap;vertical-align:middle;}
.sh-tag--blue{background:#eff6ff;color:#1d4ed8;}
.sh-tag--yellow{background:#fef9c3;color:#a16207;}
.sh-tag--orange{background:#fff7ed;color:var(--ds-warn);}
.sh-tag--green{background:#ecfdf5;color:var(--ds-success);}
.sh-tag--gray{background:#f1f5f9;color:var(--ds-gray-600);}

/* 상세 창 */
.sh-modal{width:720px;max-width:96vw;max-height:90vh;}
.sh-modal .modal-header h2{display:flex;align-items:center;gap:var(--ds-sp-2);flex-wrap:wrap;}
.sh-mbody{display:flex;flex-direction:column;gap:var(--ds-sp-4);padding:var(--ds-sp-4);}
.sh-sec-h{font-size:var(--ds-fs-base);font-weight:700;color:var(--ds-brand);margin-bottom:var(--ds-sp-2);}
.sh-sub{margin-top:6px;font-size:var(--ds-fs-sm);color:var(--ds-gray-600);}
.sh-stbtns{display:flex;gap:6px;flex-wrap:wrap;}
.sh-stbtn{height:32px;padding:0 14px;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);background:#fff;font-size:var(--ds-fs-md);font-weight:600;color:var(--ds-gray-600);cursor:pointer;font-family:inherit;}
.sh-stbtn:hover:not(:disabled){border-color:var(--ds-primary);color:var(--ds-brand);}
.sh-stbtn.active{cursor:default;color:#fff;border-color:transparent;}
.sh-stbtn.active.sh-stbtn--blue{background:#2563eb;}
.sh-stbtn.active.sh-stbtn--yellow{background:#ca8a04;}
.sh-stbtn.active.sh-stbtn--orange{background:var(--ds-warn);}
.sh-stbtn.active.sh-stbtn--green{background:var(--ds-success);}
.sh-stbtn.active.sh-stbtn--gray{background:var(--ds-gray-600);}
.sh-row{display:flex;align-items:center;gap:var(--ds-sp-2);flex-wrap:wrap;min-height:34px;}
.sh-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--ds-fs-base);font-weight:600;color:var(--ds-gray-900);cursor:pointer;}
.sh-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-primary);}
.sh-check.sh-big{font-size:var(--ds-fs-base);}
.sh-items{width:100%;border-collapse:collapse;font-size:var(--ds-fs-md);}
.sh-items th,.sh-items td{padding:8px 10px;border-bottom:var(--ds-line) solid var(--ds-gray-200);}
.sh-items th{background:var(--ds-gray-50);color:var(--ds-gray-600);font-weight:600;font-size:var(--ds-fs-sm);text-align:left;}
.sh-items .num{text-align:right;font-variant-numeric:tabular-nums;}
.sh-items td small{color:var(--ds-gray-600);}
.sh-items tfoot td{font-weight:600;}
.sh-items .sh-grand td{color:var(--ds-brand);font-size:var(--ds-fs-base);font-weight:700;border-bottom:var(--ds-line-strong) solid var(--ds-brand);}
.sh-dl{display:grid;grid-template-columns:100px minmax(0,1fr);margin:0;border-top:var(--ds-line) solid var(--ds-gray-200);}
.sh-dl dt,.sh-dl dd{padding:8px 0;border-bottom:var(--ds-line) solid var(--ds-gray-200);font-size:var(--ds-fs-md);}
.sh-dl dt{color:var(--ds-gray-600);}
.sh-dl dd{margin:0;color:var(--ds-gray-900);word-break:break-all;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sh-pre{white-space:pre-line;}
.sh-copy{height:24px;padding:0 8px;font-size:11px;}
.sh-memo{width:100%;}
.sh-note{padding:8px 12px;border-radius:var(--ds-radius-md);font-size:var(--ds-fs-md);}
.sh-note--warn{background:#fff7ed;color:var(--ds-warn);}
.sh-foot{justify-content:flex-end;gap:var(--ds-sp-2);}

/* 설정 */
.sh-set{display:flex;flex-direction:column;gap:var(--ds-sp-3);max-width:880px;}
.sh-card{background:#fff;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);padding:var(--ds-sp-4);display:flex;flex-direction:column;gap:var(--ds-sp-3);}
.sh-card-h{font-size:var(--ds-fs-lg);font-weight:700;color:var(--ds-brand);}
.sh-imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-sp-3);}
.sh-img{display:flex;flex-direction:column;gap:6px;min-width:0;}
.sh-img-l{font-size:var(--ds-fs-md);font-weight:600;color:var(--ds-gray-900);}
.sh-img-box{aspect-ratio:4/3;border:var(--ds-line) dashed var(--ds-gray-200);border-radius:var(--ds-radius-md);display:grid;place-items:center;overflow:hidden;background:var(--ds-gray-50);}
.sh-img-box img{width:100%;height:100%;object-fit:contain;background:#fff;}
.sh-img-act{display:flex;gap:6px;}
.sh-img-act label.btn{cursor:pointer;}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-sp-3);}
.sh-f{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sh-full{grid-column:1/-1;}
.sh-f .num{text-align:right;font-variant-numeric:tabular-nums;}
.sh-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--ds-fs-md);line-height:1.6;}
.sh-code{display:flex;align-items:flex-end;gap:var(--ds-sp-2);flex-wrap:wrap;}
.sh-code .sh-f{flex:1;min-width:220px;}
.sh-save{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-sp-2);flex-wrap:wrap;padding:var(--ds-sp-3) 0;background:linear-gradient(transparent,var(--ds-gray-50) 30%);}
.sh-save .sh-dim{margin-right:auto;}

@media screen and (max-width:600px){
  .sh-wrap{padding:var(--ds-sp-3);}
  .sh-search{max-width:none;width:100%;}
  .sh-imgs,.sh-grid{grid-template-columns:1fr;}
  .sh-dl{grid-template-columns:84px minmax(0,1fr);}
}

/* 2026-11-11 (2) 목록 [미리보기] [메일] · 휴대폰 목록 = 줄마다 카드 */
.sh-tbl td.sh-act{white-space:nowrap;}
.sh-tbl td.sh-act .btn+.btn{margin-left:4px;}
.sh-tbl td.sh-m{display:none;}
.sh-mini{height:26px;padding:0 9px;font-size:11px;}
@media screen and (max-width:760px){
  .sh-tbl-wrap{background:none;border:none;overflow:visible;}
  .sh-tbl,.sh-tbl tbody{display:block;white-space:normal;}
  .sh-tbl thead{display:none;}
  .sh-tbl tr.sh-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no st" "br amt" "m m" "biz biz" "act act";
    gap:4px 10px;margin-bottom:10px;padding:12px 14px;background:#fff;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);}
  .sh-tbl td{display:block;padding:0;border:none;background:none!important;}
  .sh-tbl td[colspan]{display:block;}
  .sh-tbl td:nth-child(1){grid-area:no;font-size:var(--ds-fs-sm);}
  .sh-tbl td:nth-child(2){display:none;}
  .sh-tbl td:nth-child(3){grid-area:br;font-size:var(--ds-fs-lg);font-weight:700;max-width:none;}
  .sh-tbl td:nth-child(4){display:none;}
  .sh-tbl td:nth-child(5),.sh-tbl td:nth-child(6){display:none;}
  .sh-tbl td:nth-child(7){grid-area:amt;align-self:center;font-size:var(--ds-fs-lg);}
  .sh-tbl td:nth-child(8){grid-area:st;justify-self:end;}
  .sh-tbl td:nth-child(9){grid-area:biz;font-size:var(--ds-fs-sm);}
  .sh-tbl td:nth-child(9):not(:has(.sh-warn,.sh-ok)){display:none;}
  .sh-tbl td:nth-child(9) .sh-warn::before,.sh-tbl td:nth-child(9) .sh-ok::before{content:'사업자등록증 ';font-weight:400;color:var(--ds-gray-600);}
  .sh-tbl td:nth-child(10){display:none;}
  .sh-tbl td.sh-act{display:flex;gap:6px;grid-area:act;margin-top:6px;padding-top:8px;border-top:var(--ds-line) solid #f1f5f9;}
  .sh-tbl td.sh-act .btn+.btn{margin-left:0;}
  .sh-tbl td.sh-act .sh-mini{flex:1;height:34px;font-size:var(--ds-fs-md);justify-content:center;}
  .sh-tbl td.sh-m{display:block;grid-area:m;color:var(--ds-gray-600);font-size:var(--ds-fs-md);line-height:1.5;}
  .sh-tools{flex-direction:column;align-items:stretch;}
}

/* 2026-11-11 (3) 택배 엑셀 · 전체 내역 엑셀 · 줄 선택 */
.sh-tools-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sh-pick{width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;accent-color:var(--ds-primary);cursor:pointer;}
@media screen and (max-width:760px){
  .sh-tools-r{width:100%;}
  .sh-tools-r .sh-search{flex:1 1 100%;}
  .sh-tools-r .btn{flex:1;justify-content:center;height:36px;}
}

/* 2026-11-12 화면 칸 스크롤: .top-panel 은 overflow:hidden (core.css) → 수협 주문 칸이 직접 세로 스크롤 (목록 · 설정 모두) */
#panel-suhyup.top-panel{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#panel-suhyup .sh-wrap{width:100%;box-sizing:border-box;flex-shrink:0;padding-bottom:var(--ds-sp-6);}

/* 2026-11-12 (2) 목록 안: 필터 · 검색 줄과 표 사이 간격 */
#sh-list{display:flex;flex-direction:column;gap:var(--ds-sp-3);}

/* 2026-11-12 (3) 목록 도구 줄 정리: 택배 엑셀 = 위 줄(새로고침 옆), 주문을 체크하면 켜짐 · 전체 내역 엑셀 뺌 (사용자 결정) */
.sh-tools{flex-wrap:nowrap;}
.sh-tools .sh-search{flex:0 1 260px;min-width:160px;}
#panel-suhyup .btn:disabled{opacity:.45;cursor:not-allowed;}
@media screen and (max-width:760px){
  .sh-tools{flex-wrap:wrap;}
  .sh-tools .sh-search{flex:1 1 100%;max-width:none;}
}

/* 2026-11-12 (4) 삭제 버튼 (시스템 관리자만) */
.sh-btn-del{background:#fff;color:var(--ds-danger);border:1.5px solid #fecaca;}
.sh-btn-del:hover:not(:disabled){background:var(--ds-danger);color:#fff;border-color:var(--ds-danger);}