/* 2026-11-12 특가 주문 (special.js, .sp-*) — 새 파일. 수협 주문(suhyup.css)과 같은 모양 · 기준표 --ds-* */
#panel-special.top-panel{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.sp-wrap{width:100%;max-width:1240px;margin:0 auto;padding:var(--ds-sp-4) var(--ds-sp-4) var(--ds-sp-6);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ds-sp-3);flex-shrink:0;}
.sp-head,.sp-bar,.sp-bulk{display:flex;align-items:center;gap:var(--ds-sp-2);flex-wrap:wrap;}
.sp-sp{flex:1;}
.sp-seg{display:inline-flex;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);overflow:hidden;background:#fff;}
.sp-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;}
.sp-seg-btn+.sp-seg-btn{border-left:var(--ds-line) solid var(--ds-gray-200);}
.sp-seg-btn.active{background:var(--ds-brand);color:#fff;}
.sp-view{display:flex;flex-direction:column;gap:var(--ds-sp-3);}
.sp-empty{padding:28px 12px;text-align:center;color:var(--ds-gray-400);font-size:var(--ds-fs-md);background:#fff;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);white-space:normal;}
.sp-tbl .sp-empty{border:none;border-radius:0;}
.sp-err{color:var(--ds-danger);}
.sp-dim{color:var(--ds-gray-400);font-size:var(--ds-fs-sm);font-weight:400;}
.sp-sel{width:auto;min-width:120px;height:34px;padding:0 8px;}
.sp-search{max-width:200px;height:34px;}
.sp-bulk{background:var(--ds-primary-soft);border:var(--ds-line) solid #c7dcf0;border-radius:var(--ds-radius-md);padding:8px 12px;font-size:var(--ds-fs-md);color:var(--ds-brand);}
.sp-changed{color:#be185d;font-weight:600;}
.sp-tbl-wrap{overflow-x:auto;background:#fff;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-lg);}
.sp-tbl{width:100%;border-collapse:collapse;font-size:var(--ds-fs-md);white-space:nowrap;}
.sp-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 10px;border-bottom:var(--ds-line) solid var(--ds-gray-200);}
.sp-tbl td{padding:7px 10px;border-bottom:var(--ds-line) solid #f1f5f9;vertical-align:middle;}
.sp-tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.sp-tbl tr.sp-off td{color:var(--ds-gray-400);}
.sp-name a{color:var(--ds-gray-900);font-weight:600;text-decoration:none;}
.sp-name a:hover{text-decoration:underline;}
.sp-off .sp-name a{color:var(--ds-gray-400);}
.sp-th{width:46px;height:34px;border-radius:5px;border:var(--ds-line) solid var(--ds-gray-200);background:var(--ds-gray-50);overflow:hidden;}
.sp-th img{width:100%;height:100%;object-fit:contain;background:#fff;}
.sp-chk{width:16px;height:16px;accent-color:var(--ds-primary);cursor:pointer;vertical-align:middle;}
.sp-pin{width:100px;height:30px;border:var(--ds-line) solid #cbd5e1;border-radius:6px;padding:0 8px;text-align:right;font-variant-numeric:tabular-nums;font-family:inherit;font-size:var(--ds-fs-md);}
.sp-pin.changed{border-color:#db2777;background:#fdf2f8;}
.sp-pct{color:#db2777;font-weight:700;}
.sp-sw{position:relative;display:inline-block;width:38px;height:22px;vertical-align:middle;}
.sp-sw input{opacity:0;width:0;height:0;position:absolute;}
.sp-sw span{position:absolute;inset:0;background:#cbd5e1;border-radius:11px;cursor:pointer;transition:background .15s;}
.sp-sw span::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;}
.sp-sw input:checked+span{background:var(--ds-success);}
.sp-sw input:checked+span::after{left:19px;}
.sp-sw-out input:checked+span{background:var(--ds-danger);}
.sp-sw input:focus-visible+span{outline:3px solid rgba(46,127,193,.45);outline-offset:2px;}
.sp-st{display:inline-block;padding:1px 8px;border-radius:var(--ds-radius-sm);font-size:var(--ds-fs-xs);font-weight:600;}
.sp-st-on{background:#ecfdf5;color:var(--ds-success);} .sp-st-out{background:#fef2f2;color:var(--ds-danger);} .sp-st-off{background:#f1f5f9;color:var(--ds-gray-600);}
.sp-help{margin:0;font-size:var(--ds-fs-sm);color:var(--ds-gray-600);line-height:1.6;}
.sp-btn-del{background:#fff;color:var(--ds-danger);border:1.5px solid #fecaca;}
.sp-btn-del:hover:not(:disabled){background:var(--ds-danger);color:#fff;border-color:var(--ds-danger);}
#panel-special .btn:disabled{opacity:.45;cursor:not-allowed;}

/* 등록 · 수정 창 */
.sp-ed-modal{width:760px;max-width:96vw;max-height:92vh;}
.sp-imp-modal{width:720px;max-width:96vw;max-height:90vh;}
.sp-foot{justify-content:flex-end;gap:var(--ds-sp-2);}
.sp-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-sp-3);padding:var(--ds-sp-1) 0;}
.sp-form label,.sp-f{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sp-full{grid-column:1/-1;}
.sp-form .num,.sp-f .num{text-align:right;font-variant-numeric:tabular-nums;}
.sp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--ds-fs-md);line-height:1.6;}
.sp-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.sp-img{position:relative;width:104px;height:78px;border:var(--ds-line) solid var(--ds-gray-200);border-radius:var(--ds-radius-md);overflow:hidden;background:var(--ds-gray-50);display:grid;place-items:center;}
.sp-img img{width:100%;height:100%;object-fit:contain;background:#fff;}
.sp-img-act{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;background:rgba(15,23,42,.55);}
.sp-img-act button{flex:1;border:none;background:none;color:#fff;font-size:13px;height:22px;cursor:pointer;}
.sp-img-act button:disabled{opacity:.35;cursor:default;}
.sp-img-add{border-style:dashed;color:var(--ds-primary);font-size:var(--ds-fs-md);font-weight:600;cursor:pointer;}
.sp-checks{display:flex;gap:var(--ds-sp-4);align-items:flex-end;padding-bottom:6px;}
.sp-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-fs-base);font-weight:600;color:var(--ds-gray-900);cursor:pointer;}
.sp-check input{width:17px;height:17px;margin:0;accent-color:var(--ds-primary);}
.sp-imp-list{display:flex;flex-direction:column;margin-top:var(--ds-sp-2);border-top:var(--ds-line) solid var(--ds-gray-200);max-height:56vh;overflow-y:auto;}
.sp-imp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;text-align:left;border:none;border-bottom:var(--ds-line) solid #f1f5f9;background:#fff;padding:9px 6px;cursor:pointer;font-family:inherit;font-size:var(--ds-fs-md);color:var(--ds-gray-900);}
.sp-imp-row:hover{background:var(--ds-primary-soft);}
.sp-imp-row .sp-imp-b{font-size:var(--ds-fs-xs);color:var(--ds-primary);font-weight:700;grid-column:1/-1;}
.sp-imp-row .sp-dim{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-imp-row .num{grid-column:2;grid-row:2 / span 2;align-self:center;font-variant-numeric:tabular-nums;}

/* 설정 */
.sp-set{display:flex;flex-direction:column;gap:var(--ds-sp-3);max-width:920px;}
.sp-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);}
.sp-card-h{font-size:var(--ds-fs-lg);font-weight:700;color:var(--ds-brand);}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-sp-3);}
.sp-big{font-size:var(--ds-fs-base);}
.sp-code{display:flex;align-items:flex-end;gap:var(--ds-sp-2);flex-wrap:wrap;}
.sp-code .sp-f{min-width:240px;}
.sp-sub{font-size:var(--ds-fs-sm);color:var(--ds-gray-600);}
.sp-sub-h{font-size:var(--ds-fs-md);font-weight:700;color:var(--ds-gray-900);margin-bottom:6px;}
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-sp-4);}
.sp-list{display:flex;flex-direction:column;gap:6px;}
.sp-li{display:flex;align-items:center;gap:6px;}
.sp-li .field-input{flex:1;min-width:0;height:32px;}
.sp-li-hidden .field-input{color:var(--ds-gray-400);text-decoration:line-through;}
.sp-li-add{display:flex;gap:6px;margin-top:8px;}
.sp-li-add .field-input{flex:1;height:32px;}
.sp-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%);z-index:2;}
.sp-save .sp-dim{margin-right:auto;}

@media screen and (max-width:760px){
  .sp-wrap{padding:var(--ds-sp-3);}
  .sp-form,.sp-grid,.sp-two{grid-template-columns:1fr;}
  .sp-search{max-width:none;flex:1 1 100%;}
  .sp-sel{flex:1;}
  .sp-seg{width:100%;}
  .sp-seg-btn{flex:1;padding:0 6px;}
}
/* 창 안의 일반 label 규칙(.sp-form label = 세로 칸)이 덮지 않게 */
.sp-form label.sp-img{display:grid;place-items:center;gap:0;}
.sp-form label.sp-check{display:inline-flex;flex-direction:row;align-items:center;gap:6px;}