/* SAP Fiori (Quartz Light) 스타일 테마 */
:root {
  --sapShellColor: #354a5f;
  --sapBackgroundColor: #edeff0;
  --sapTileBackground: #ffffff;
  --sapTextColor: #32363a;
  --sapContentLabelColor: #6a6d70;
  --sapBrandColor: #0a6ed1;
  --sapButtonBorderColor: #0854a0;
  --sapPositiveColor: #107e3e;
  --sapNegativeColor: #bb0000;
  --sapCriticalColor: #e9730c;
  --sapNeutralColor: #6a6d70;
  --sapFieldBorderColor: #89919a;
  --sapListBorderColor: #e4e4e4;
  --sapShadow: 0 0 0.125rem 0 rgba(0,0,0,0.16), 0 0.125rem 0.25rem 0 rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "72", "72full", "Segoe UI", "Malgun Gothic", Arial, sans-serif;
  background: var(--sapBackgroundColor);
  color: var(--sapTextColor);
  font-size: 14px;
}

/* ---------------- 왼쪽 사이드바 (z-projectFlow 형태) ---------------- */
.sider {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
  width: 200px; background: var(--sapShellColor);
  display: flex; flex-direction: column;
  box-shadow: 2px 0 6px rgba(0,0,0,0.15);
  transition: width 0.2s;
}
.sider-logo {
  height: 48px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; flex-shrink: 0;
}
.logo-mini { display: none; }
.sider-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px 8px; flex: 1;
  overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.sider-nav::-webkit-scrollbar { width: 6px; }
.sider-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
.sider-nav::-webkit-scrollbar-track { background: transparent; }
.sider-nav a {
  display: flex; align-items: center; gap: 10px;
  color: #d5dde4; text-decoration: none;
  padding: 5px 12px; border-radius: 4px; font-size: 12.5px;
  white-space: nowrap; overflow: hidden;
}
.sider-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.sider-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }
.sider-nav a.active {
  background: var(--sapBrandColor); color: #fff; font-weight: 600;
}
.sider-group {
  padding: 7px 14px 2px; font-size: 10px; font-weight: 700;
  color: #8ea0af; letter-spacing: 2px; user-select: none;
}
.sider-group:first-child { padding-top: 4px; }
body.sider-collapsed .sider-group { padding: 8px 0 2px; text-align: center; letter-spacing: 0; font-size: 9px; }
.sider-nav a.sub { padding-left: 34px; font-size: 12.5px; color: #b6c2cc; }
.sider-nav a.sub svg { width: 13px; height: 13px; }
.sider-nav a.sub.active { color: #fff; }
body.sider-collapsed .sider-nav a.sub { padding-left: 0; }
.sider-collapse {
  height: 34px; border: none; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 -10px 14px -6px rgba(0,0,0,0.45);  /* 위쪽 그림자 — 가려진 메뉴가 더 있음을 암시 */
  background: rgba(0,0,0,0.18); color: #d5dde4;
  display: flex; align-items: center; justify-content: center;
}
.sider-collapse:hover { color: #fff; background: rgba(0,0,0,0.3); }
.sider-collapse svg { width: 16px; height: 16px; transition: transform 0.2s; }

/* 접힘 상태 */
body.sider-collapsed .sider { width: 64px; }
body.sider-collapsed .sider-nav a span { display: none; }
body.sider-collapsed .sider-nav a { justify-content: center; padding: 8px 0; }
body.sider-collapsed .logo-full { display: none; }
body.sider-collapsed .logo-mini { display: inline; }
body.sider-collapsed .sider-collapse svg { transform: rotate(180deg); }
body.sider-collapsed .layout-right { margin-left: 64px; }

/* ---------------- 사이드바 커스터마이즈 (순서·고정·숨김·접기·편집 드로어) ---------------- */
/* 상단 고정(★) 영역 */
.sb-pinned { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px;
  margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sb-pin-head { display: flex; align-items: center; gap: 6px; padding: 4px 14px 2px;
  font-size: 10px; font-weight: 700; color: #d9a441; letter-spacing: 1.5px; user-select: none; }
.sb-pin-head svg { width: 11px; height: 11px; }
.sider-nav a.sb-pinned-item.sub { padding-left: 12px; }   /* 고정되면 하위 들여쓰기 해제 */
.sider-nav a.sb-pinned-item.sub svg { width: 16px; height: 16px; }
/* 그룹 헤더 접기 */
.sider-group { cursor: pointer; display: flex; align-items: center; gap: 5px; }
.sider-group::before { content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s; opacity: 0.7; margin-top: -2px; }
.sider-group.sb-collapsed::before { transform: rotate(-45deg); }
body.sider-collapsed .sider-group::before { display: none; }
/* 더보기(숨긴 메뉴) */
.sb-more { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 4px; }
.sb-more-head { display: flex; align-items: center; gap: 10px; padding: 5px 12px; cursor: pointer;
  color: #97a6b3; font-size: 12.5px; border-radius: 4px; }
.sb-more-head:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-more-head svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.sb-more-list { display: none; flex-direction: column; gap: 1px; }
.sb-more.open .sb-more-list { display: flex; }
.sb-more.open .sb-more-head { color: #fff; }
body.sider-collapsed .sb-pin-head span, body.sider-collapsed .sb-more-head span { display: none; }
/* 아이콘 축소 모드 hover 플라이아웃 — 접힘 시 라벨을 우측에 툴팁으로 */
body.sider-collapsed .sider-nav a { position: relative; }
body.sider-collapsed .sider-nav a:hover span { display: block; position: absolute; left: 100%;
  top: 50%; transform: translateY(-50%); margin-left: 8px; z-index: 200;
  background: var(--sapShellColor, #2b3640); color: #fff; padding: 5px 10px; border-radius: 4px;
  font-size: 12.5px; white-space: nowrap; box-shadow: 2px 2px 8px rgba(0,0,0,0.35); pointer-events: none; }
/* 메뉴 편집 버튼 */
.sb-edit-btn { gap: 8px; }
.sb-edit-btn svg { width: 15px; height: 15px; }
body.sider-collapsed .sb-edit-btn span { display: none; }
/* 편집 드로어 */
.sb-ed-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.35);
  display: flex; justify-content: flex-end; }
.sb-ed { width: 360px; max-width: 92vw; background: #fff; height: 100%; display: flex;
  flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,0.2); animation: sbEdIn 0.18s ease; }
@keyframes sbEdIn { from { transform: translateX(30px); opacity: 0.5; } to { transform: none; opacity: 1; } }
.sb-ed-head { height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--sapGroupTitleBorderColor, #e5e5e5); font-weight: 600; }
.sb-ed-x { border: none; background: none; font-size: 18px; cursor: pointer; color: #888; line-height: 1; }
.sb-ed-x:hover { color: #222; }
.sb-ed-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
.sb-ed-grp-t { font-size: 11px; font-weight: 700; color: #8a99a6; letter-spacing: 1px;
  padding: 10px 4px 4px; }
.sb-ed-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px;
  background: #f6f8fa; margin-bottom: 3px; cursor: default; }
.sb-ed-row.dragging { opacity: 0.45; }
.sb-ed-drag { cursor: grab; color: #b0b8c0; font-size: 13px; letter-spacing: -3px; user-select: none; }
.sb-ed-lbl { flex: 1; font-size: 13px; color: #2b3640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ed-pin, .sb-ed-eye { border: none; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px;
  border-radius: 4px; opacity: 0.35; line-height: 1; }
.sb-ed-pin.on { opacity: 1; color: #e6a817; }
.sb-ed-eye { opacity: 0.75; }
.sb-ed-eye.off { opacity: 1; }
.sb-ed-pin:hover, .sb-ed-eye:hover { background: #e6ebf0; opacity: 1; }
.sb-ed-foot { flex-shrink: 0; border-top: 1px solid var(--sapGroupTitleBorderColor, #e5e5e5);
  padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-ed-hint { font-size: 11px; color: #97a3ad; line-height: 1.35; }
.sb-ed-reset { flex-shrink: 0; border: 1px solid #d0d7de; background: #fff; color: #57606a;
  padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.sb-ed-reset:hover { background: #f3f4f6; color: #cf222e; border-color: #cf222e; }

/* ---------------- 우측 레이아웃 (헤더 + 콘텐츠) ---------------- */
.layout-right { margin-left: 200px; transition: margin-left 0.2s; min-height: 100vh; }
.content-header {
  height: 48px; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--sapListBorderColor);
  position: sticky; top: 0; z-index: 90;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.content-header .page-title { font-weight: 600; font-size: 15px; color: var(--sapTextColor); }
.content-header .header-sub { font-size: 12px; color: var(--sapContentLabelColor); }

main { max-width: 1180px; margin: 0; padding: 20px 24px 60px; }  /* 왼쪽 정렬 — 우측 드로어와 겹침 방지 */

/* ---------------- 페이지/오브젝트 헤더 ---------------- */
h1 {
  font-size: 20px; font-weight: 400; margin: 4px 0 2px;
  color: var(--sapTextColor);
}
h1 .badge { vertical-align: middle; margin-left: 8px; }
.meta { color: var(--sapContentLabelColor); margin: 2px 0 16px; font-size: 13px; }
.meta b { color: var(--sapTextColor); font-weight: 600; }

h2 {
  font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--sapTextColor);
}
h2 .muted { font-weight: 400; }
.muted { color: var(--sapContentLabelColor); font-size: 12.5px; }

/* ---------------- 카드 (Fiori 패널) ---------------- */
.card {
  background: var(--sapTileBackground);
  border-radius: 4px; border: none;
  padding: 14px 16px 16px; margin-bottom: 16px;
  box-shadow: var(--sapShadow);
}
.card > h2 {
  padding-bottom: 8px; border-bottom: 1px solid var(--sapListBorderColor);
  margin-bottom: 0;
}
.card > h2 + * { margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------------- KPI 타일 (Fiori Launchpad Tile) ---------------- */
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tile {
  width: 176px; min-height: 108px; padding: 12px 14px;
  background: var(--sapTileBackground); border-radius: 4px;
  box-shadow: var(--sapShadow); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow 0.15s;
}
.tile:hover { box-shadow: 0 0 0 1px var(--sapBrandColor), var(--sapShadow); }
.tile .t-title { font-size: 13px; color: var(--sapTextColor); font-weight: 400; }
.tile .t-sub { font-size: 11.5px; color: var(--sapContentLabelColor); margin-top: 2px; }
.tile .t-num {
  font-size: 28px; font-weight: 300; color: var(--sapTextColor);
  margin-top: 8px; line-height: 1;
}
.tile .t-num.good { color: var(--sapPositiveColor); }
.tile .t-num.bad { color: var(--sapNegativeColor); }
.tile .t-num.crit { color: var(--sapCriticalColor); }

/* ---------------- 테이블 (Fiori Responsive Table) ---------------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--sapListBorderColor); text-align: left; }
th {
  color: var(--sapContentLabelColor); font-weight: 400; font-size: 12.5px;
  background: #fff; border-bottom: 2px solid var(--sapListBorderColor);
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: #f5f5f5; }
a { color: var(--sapBrandColor); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 오브젝트 상태 (Fiori Object Status) ---------------- */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
  background: #f4f4f4; color: var(--sapNeutralColor);
  border: 1px solid #d9d9d9;
}
.badge.ok   { background: #f1fdf6; color: var(--sapPositiveColor); border-color: #a9d9b7; }
.badge.warn { background: #fef7f1; color: var(--sapCriticalColor); border-color: #f5c497; }
.badge.fail { background: #ffebeb; color: var(--sapNegativeColor); border-color: #f1a3a3; }

/* ---------------- 버튼 (Fiori Button) ---------------- */
.btn {
  border: 1px solid var(--sapButtonBorderColor); background: #fff;
  color: var(--sapButtonBorderColor);
  padding: 6px 14px; border-radius: 4px; font-size: 13px; cursor: pointer;
  font-family: inherit; height: 32px; line-height: 1;
}
.btn:hover { background: #ebf5fe; }
.btn.primary { background: var(--sapBrandColor); border-color: var(--sapBrandColor); color: #fff; }
.btn.primary:hover { background: #085caf; }
.btn.small { height: 24px; padding: 2px 10px; font-size: 12px; }
a.btn { display: inline-flex; align-items: center; }
a.btn:hover { text-decoration: none; }
.actions { margin-top: 14px; display: flex; gap: 8px; }
.inline-form { display: flex; gap: 8px; align-items: center; }

/* ---------------- 입력 필드 (Fiori Input) ---------------- */
input[type="text"], input[type="number"], input[type="file"] {
  font-family: inherit; font-size: 13px; color: var(--sapTextColor);
  border: 1px solid var(--sapFieldBorderColor); border-radius: 2px;
  padding: 6px 10px; background: #fff; height: 32px;
}
input[type="text"]:focus, input[type="number"]:focus {
  outline: 2px solid var(--sapBrandColor); outline-offset: -2px; border-color: var(--sapBrandColor);
}

/* ---------------- 메시지 스트립 (Fiori Message Strip) ---------------- */
.alert {
  padding: 9px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 13px;
  border: 1px solid;
}
.alert.ok { background: #f1fdf6; color: var(--sapPositiveColor); border-color: #107e3e; }
.alert.fail { background: #ffebeb; color: var(--sapNegativeColor); border-color: #bb0000; }
/* 저장 토스트 — 상단 고정 알림 (?msg=/?err= 공통 렌더, base.html · 클릭 시 닫힘, 자동 소멸) */
.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 320;
  margin: 0; min-width: 280px; max-width: 72vw; text-align: center; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22); transition: opacity .5s;
}
.toast.hide { opacity: 0; }

/* ---------------- 진행률 바 ---------------- */
.bar { width: 96px; height: 6px; background: #dedede; border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--sapBrandColor); }

/* ---------------- 스캔 스테이션 ---------------- */
.scan-station { border-top: 4px solid var(--sapBrandColor); }
#scan-input, #label-input {
  width: 100%; font-size: 18px; padding: 12px 14px; height: auto;
  border: 1px dashed var(--sapFieldBorderColor); border-radius: 4px; outline: none;
}
#scan-input:focus, #label-input:focus {
  border: 1px solid var(--sapBrandColor);
  outline: 2px solid var(--sapBrandColor); outline-offset: -2px;
  background: #f5faff;
}
.scan-result {
  margin-top: 10px; padding: 11px 14px; border-radius: 4px;
  font-size: 15px; font-weight: 600; border: 1px solid;
}
.scan-result.ok { background: #f1fdf6; color: var(--sapPositiveColor); border-color: #107e3e; }
.scan-result.fail {
  background: #ffebeb; color: var(--sapNegativeColor); border-color: #bb0000;
  animation: flash 0.4s ease 3;
}
.scan-result.warn { background: #fef7f1; color: var(--sapCriticalColor); border-color: #e9730c; }
@keyframes flash { 50% { background: #ffd6d6; } }
.qty-confirm {
  margin-top: 10px; padding: 12px 14px; background: #fef7f1;
  border: 1px solid #e9730c; border-radius: 4px;
}
#qty-input, #label-qty-input { width: 150px; }
tr.row-flash td { background: #f1fdf6 !important; transition: background 0.3s; }
td.shortage { color: var(--sapNegativeColor); font-weight: 700; }

/* ---------------- 출고 유형 전환 (Fiori Segmented) + 라벨 스테이션 ---------------- */
.mode-toggle { display: flex; gap: 10px; margin-bottom: 14px; }
.mode-option {
  flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--sapButtonBorderColor); border-radius: 4px;
  padding: 9px 14px; font-size: 13px; color: var(--sapButtonBorderColor);
  box-shadow: var(--sapShadow);
}
.mode-option:has(input:checked) {
  background: var(--sapBrandColor); color: #fff; border-color: var(--sapBrandColor);
}
.mode-option input { accent-color: #fff; }
.label-phase {
  padding: 8px 12px; border-radius: 4px; margin-bottom: 10px;
  background: #f5faff; border: 1px solid var(--sapBrandColor);
  color: #085caf; font-weight: 600; font-size: 13px;
}
.label-phase.verify { background: #fef7f1; border-color: var(--sapCriticalColor); color: var(--sapCriticalColor); }

/* ---------------- 콘텐츠 헤더 사용자 영역 / 차트 ---------------- */
.content-header .header-user { font-size: 12.5px; color: var(--sapContentLabelColor); }
.content-header .header-user a { margin-left: 4px; }

.chart { width: 100%; height: auto; margin-top: 8px; }
.chart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--sapContentLabelColor); margin-top: 8px; }
.chart-legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}
.axis-label { font-size: 10.5px; fill: #6a6d70; font-family: inherit; }
.hbar {
  height: 10px; min-width: 2px; background: #0a6ed1; border-radius: 3px;
}
select { font-family: inherit; font-size: 13px; padding: 0 8px; background: #fff; }
input[type="date"], input[type="password"] {
  font-family: inherit; font-size: 13px; color: var(--sapTextColor);
  border: 1px solid var(--sapFieldBorderColor); border-radius: 2px;
  padding: 6px 10px; background: #fff; height: 32px;
}
code { background: #f4f4f4; padding: 1px 5px; border-radius: 3px; }

/* ---------------- 문서 팝업창 (MDI: 이동·크기조절·다중) ---------------- */
.popup-win {
  position: fixed; width: 1000px; height: 660px;
  min-width: 420px; min-height: 280px;
  max-width: 98vw; max-height: 94vh;
  background: #fff; border: 1px solid #9aa5b1; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.35);
  display: flex; flex-direction: column;
  resize: both; overflow: hidden;
}
.popup-head {
  height: 38px; flex-shrink: 0; cursor: move; user-select: none;
  background: var(--sapShellColor); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 14px;
}
.popup-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-actions { display: flex; align-items: center; gap: 2px; }
.popup-actions a, .popup-actions button {
  background: none; border: none; color: #cbd5e1; cursor: pointer;
  font-size: 16px; width: 30px; height: 30px; line-height: 30px;
  text-align: center; border-radius: 4px; text-decoration: none;
}
.popup-actions a:hover, .popup-actions button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.popup-close { font-size: 20px !important; }
.popup-body { flex: 1; width: 100%; border: none; background: var(--sapBackgroundColor); }
body.popup-dragging iframe { pointer-events: none; }
body.popup-dragging { user-select: none; }

/* 팝업(iframe) 내부 레이아웃: 사이드바·헤더 숨김 */
body.popup-mode .sider { display: none; }
body.popup-mode .layout-right { margin-left: 0; }
body.popup-mode .content-header { display: none; }
body.popup-mode main { padding: 14px 16px 40px; max-width: none; }

/* ---------------- 품목 매핑: 우측 드로어(Drawer) 패널 ---------------- */
.map-drawer-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15, 23, 42, 0.28);
}
.map-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 901;
  width: 600px; min-width: 420px; max-width: 94vw;
  background: #fff; box-shadow: -10px 0 30px rgba(15, 23, 42, 0.28);
  display: flex; flex-direction: column;
  animation: drawer-in 0.18s ease-out;
}
.map-drawer-resizer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  cursor: ew-resize; z-index: 902;
}
.map-drawer-resizer:hover, .map-drawer-resizer.dragging { background: var(--sapBrandColor); opacity: 0.5; }
body.drawer-resizing { user-select: none; cursor: ew-resize; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.map-drawer-head {
  height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 20px; border-bottom: 1px solid var(--sapListBorderColor);
  background: #fff;
}
.map-drawer-title { font-size: 15px; font-weight: 700; color: var(--sapTextColor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-drawer-title .badge { margin-left: 8px; }
.map-drawer-close {
  width: 36px; height: 36px; line-height: 36px; text-align: center;
  font-size: 22px; color: var(--sapContentLabelColor); border-radius: 4px;
  text-decoration: none;
}
.map-drawer-close:hover { background: #f1f5f9; color: var(--sapTextColor); text-decoration: none; }
.map-drawer-notice {
  flex-shrink: 0; padding: 8px 20px; font-size: 13px; border-bottom: 1px solid;
}
.map-drawer-notice.ok { background: #f1fdf6; color: var(--sapPositiveColor); border-color: #a9d9b7; }
.map-drawer-notice.fail { background: #ffebeb; color: var(--sapNegativeColor); border-color: #f1a3a3; }
.map-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.map-drawer-body h2 { margin-top: 16px; }
.map-drawer-body h2:first-child { margin-top: 0; }
/* 드로어 폭에 맞춘 반응형 폼·표 (버튼 세로쓰기/넘침 방지) */
.map-drawer-body .btn, .map-drawer-body button { white-space: nowrap; flex-shrink: 0; }
.map-drawer-body .inline-form { flex-wrap: wrap; }
.map-drawer-body .inline-form input[type="text"],
.map-drawer-body .inline-form input[type="number"] {
  flex: 1 1 150px; min-width: 130px; max-width: 100%; width: auto !important;
}
.map-drawer-body table { width: 100%; table-layout: auto; }
.map-drawer-body td, .map-drawer-body th { word-break: break-all; }
.map-drawer-body td form { display: inline-flex; }

/* 매핑 섹션 박스: 명확한 경계 + 등록 폼은 항상 하단(foot) + 버튼 우측 정렬 통일 */
.map-sec {
  border: 1px solid var(--sapListBorderColor); border-radius: 8px;
  margin-top: 14px; overflow: hidden; background: #fff;
}
.map-sec:first-child { margin-top: 0; }
.map-sec-head {
  background: #f1f5f9; padding: 9px 14px;
  font-weight: 700; font-size: 13.5px; color: var(--sapTextColor);
  border-bottom: 1px solid var(--sapListBorderColor);
}
.map-sec-head .cnt {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--sapBrandColor); color: #fff; border-radius: 999px;
  font-size: 11.5px; padding: 1px 7px; margin-left: 4px;
}
.map-sec-head .muted { font-weight: 400; }
.map-sec-body { padding: 4px 14px; }
.map-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--sapListBorderColor);
}
.map-row:last-child { border-bottom: none; }
.map-row-main { min-width: 0; flex: 1; }
.map-row-title { font-size: 13.5px; word-break: break-all; }
.map-row-title .muted { margin-left: 6px; font-size: 12px; }
.map-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.chip {
  background: #eef2f7; border: 1px solid #d7dee6; border-radius: 999px;
  padding: 2px 4px 2px 9px; font-size: 12px;
  display: inline-flex; gap: 2px; align-items: center; word-break: break-all;
}
.chip form { display: inline-flex; }
.chip button {
  border: none; background: none; color: #b91c1c; cursor: pointer;
  font-size: 14px; padding: 0 4px; line-height: 1;
}
.map-row-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0;
}
.map-mini-add { display: flex; gap: 6px; }
.map-mini-add input[type="text"] { width: 150px !important; min-width: 0 !important; flex: none !important; height: 28px; }
.map-sec-foot {
  background: #fbfcfd; border-top: 1px solid var(--sapListBorderColor);
  padding: 10px 14px;
}
.map-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.map-add input[type="text"] { flex: 1 1 140px; min-width: 120px; }
.map-add .btn { margin-left: auto; min-width: 72px; }
.btn.danger { color: #b91c1c; border-color: #e3a3a3; }
.btn.danger:hover { background: #fee2e2; }

/* 별칭 학습 제안 */
.alias-suggest {
  margin-top: 10px; padding: 12px 14px; background: #f5faff;
  border: 1px dashed var(--sapBrandColor); border-radius: 4px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}

/* ---------------- 오늘의 작업 보드 ---------------- */
.workboard { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.wb-col { flex: 1; min-width: 240px; border: 1px solid var(--sapListBorderColor); border-radius: 4px; overflow: hidden; }
.wb-head { padding: 8px 12px; font-weight: 700; font-size: 13px; background: #f5f6f7; border-bottom: 1px solid var(--sapListBorderColor); }
.wb-head.bad { background: #ffebeb; color: #b00; }
.wb-head.warn { background: #fef7f1; color: #e9730c; }
.wb-row { display: block; padding: 7px 12px; font-size: 12.5px; border-bottom: 1px solid #f0f0f0; color: var(--sapTextColor); text-decoration: none; }
.wb-row:hover { background: #f5faff; }
.wb-row .muted { display: block; font-size: 11.5px; }

/* ---------------- 모바일 스캔 모드 ---------------- */
body.mobile-page { display: block; background: #f2f4f6; min-height: 100vh; }
.m-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  background: #354a5f; color: #fff; padding: 14px 16px; font-size: 17px; }
.m-header .m-exit { margin-left: auto; color: #cfe3f5; font-size: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 5px 10px; }
.m-main { padding: 14px; max-width: 560px; margin: 0 auto; }
.m-title { font-size: 14px; color: #556; margin: 4px 0 8px; }
.m-empty { color: #889; font-size: 14px; }
.m-doc { display: block; background: #fff; border: 1px solid #d5dbe0; border-left: 5px solid #0a6ed1;
  border-radius: 6px; padding: 13px 14px; margin-bottom: 8px; text-decoration: none; color: #223; }
.m-doc.out { border-left-color: #e9730c; }
.m-doc-no { font-size: 17px; font-weight: 700; }
.m-doc-sub { font-size: 13px; color: #667; margin-top: 2px; }
.m-partner { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.m-loc { width: 100%; height: 44px; font-size: 15px; margin-bottom: 10px; border: 1px solid #c8cdd2; border-radius: 6px; }
.m-scan-input { width: 100%; height: 58px; font-size: 19px; padding: 0 14px; border: 2px solid #0a6ed1;
  border-radius: 8px; box-sizing: border-box; }
.m-result { font-size: 16px; padding: 14px; }
.m-qty p { font-size: 15px; }
.m-qty-input { height: 48px; font-size: 18px; width: 130px; }
.m-btn { height: 48px; font-size: 16px; padding: 0 18px; }
.m-lines { background: #fff; border: 1px solid #d5dbe0; border-radius: 6px; overflow: hidden; }
.m-line { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px;
  border-bottom: 1px solid #eef1f3; font-size: 14px; }
.m-line.done { background: #f1fbf4; color: #107e3e; }
.m-line.part { background: #fef7f1; }
.m-line-name { word-break: break-all; }
.m-line-qty { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------- 공용 우측 작업 드로어 (전 모듈 공통 행동 원리) ---------------- */
.layout-right { transition: margin-left 0.2s, margin-right 0.25s; }
body.sd-open .layout-right { margin-right: var(--sd-w, 560px); }
.side-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; background: #fff;
  border-left: 2px solid var(--sapBrandColor); box-shadow: -8px 0 22px rgba(0,0,0,.14);
  display: none; flex-direction: column; z-index: 60; }
body.sd-open .side-drawer { display: flex; }
body.popup-mode .side-drawer { display: none !important; }
body.popup-mode.sd-open .layout-right { margin-right: 0; }
.sd-resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 61; }
.sd-resizer:hover, .sd-resizer.dragging { background: var(--sapBrandColor); opacity: 0.5; }
.sd-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-bottom: 1px solid var(--sapListBorderColor); background: #f7f8fa; flex-shrink: 0; }
.sd-title { font-size: 15px; font-weight: 700; color: var(--sapTextColor); }
.sd-close { margin-left: auto; border: none; background: none; font-size: 17px; cursor: pointer;
  color: #667; padding: 4px 9px; border-radius: 4px; }
.sd-close:hover { background: #eef1f4; }
.sd-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.sd-body h2 { margin-top: 14px; }
.sd-body h2:first-child, .sd-body .sd-src > h2:first-child { margin-top: 0; }
.sd-body .inline-form { flex-wrap: wrap; }
.sd-body .inline-form input[type="text"], .sd-body .inline-form input[type="number"] {
  flex: 1 1 150px; min-width: 130px; max-width: 100%; width: auto !important; }
.sd-body .btn, .sd-body button { white-space: nowrap; flex-shrink: 0; }
.sd-body table { width: 100%; table-layout: auto; }
.sd-src[hidden] { display: none !important; }
.sd-field { margin-bottom: 10px; }
.sd-field label { display: block; font-size: 12px; color: #556; margin-bottom: 3px; }

/* ---------------- 규모 대응: 표 가독성 (sticky 헤더 + 줄무늬) ---------------- */
.card table thead th { position: sticky; top: 48px; z-index: 5; }
tbody tr:nth-child(even) td { background: #fafbfd; }
tbody tr:hover td { background: #eef4fa; }
body.popup-mode .card table thead th { top: 0; }
/* 드로어 입력 그리드(주문/발주 멀티라인 등록 등) — 헤더 상단 고정: 세로 스크롤에도 라벨 유지, 가로 동기 */
.sd-body table thead th { position: sticky; top: 0; z-index: 5;
  background: var(--sapList_HeaderBackground, #f2f4f7); }

/* 전역 검색 */
.global-search { margin-left: auto; margin-right: 14px; }
.global-search input {
  width: 280px; height: 30px; padding: 0 12px; font-size: 12.5px;
  border: 1px solid var(--sapFieldBorderColor); border-radius: 15px; outline: none;
}
.global-search input:focus { border-color: var(--sapBrandColor); width: 340px; transition: width .15s; }
.header-user { margin-left: 0 !important; }

/* ---------------- 액션 컬럼 표준 (전 목록 공통: 우측 정렬·한 컬럼·순서 고정) ---------------- */
th.col-actions, td.col-actions { text-align: right; white-space: nowrap; width: 1%; }
td.col-actions form { display: inline-block; margin: 0; }
td.col-actions .btn { margin-left: 4px; }
td.col-actions .btn:first-child { margin-left: 0; }

/* ---------------- 전역: 오른쪽 스크롤바 미노출 (스크롤 기능은 유지 — 휠/키보드/터치) ----------------
   사용자 지침: 모든 페이지에서 세로 스크롤바를 표시하지 않는다. 새 화면·내부 스크롤 영역도 동일 적용. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sider-nav { scrollbar-width: none; }
.sider-nav::-webkit-scrollbar { width: 0; display: none; }
.sd-body { scrollbar-width: none; -ms-overflow-style: none; }
.sd-body::-webkit-scrollbar { width: 0; display: none; }
.doc-window iframe { scrollbar-width: none; }

/* ---------------- 연속 스캔 보조 ---------------- */
.scan-session { margin-top: 6px; font-size: 13px; color: #556; }
.scan-livelog { margin-top: 4px; font-family: Consolas, monospace; font-size: 11.5px; line-height: 1.7;
  max-height: 180px; overflow-y: auto; scrollbar-width: none; }
.scan-livelog::-webkit-scrollbar { display: none; }
.scan-livelog .ok { color: #107e3e; }
.scan-livelog .fail { color: #b00; font-weight: 700; }
.scan-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; animation: scanflash 0.5s ease-out; }
.scan-flash.ok { background: rgba(16, 126, 62, 0.18); }
.scan-flash.fail { background: rgba(187, 0, 0, 0.28); }
@keyframes scanflash { from { opacity: 1; } to { opacity: 0; } }

/* ---------------- 검증 보드 진행률 바 ---------------- */
.vbar { position: relative; height: 18px; background: #eef1f4; border-radius: 9px; overflow: hidden; min-width: 120px; }
.vbar-fill { height: 100%; background: #7db4e6; border-radius: 9px; transition: width 0.3s; }
.vbar-fill.done { background: #107e3e; }
.vbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #223; }

/* ---------------- Quick-Create 모달 ---------------- */
.qc-overlay { position: fixed; inset: 0; background: rgba(20, 30, 40, 0.45); z-index: 10000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.qc-box { background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  width: 520px; max-width: 94vw; max-height: 84vh; overflow-y: auto; padding: 18px 20px;
  scrollbar-width: none; }
.qc-box::-webkit-scrollbar { display: none; }
.qc-plus { margin-left: 4px; padding: 4px 9px !important; font-weight: 700; }

/* ---------------- UI 시스템 표준 토큰 (§3.2 — 화면에서 원시 색상 지정 금지) ---------------- */
:root {
  --btn-primary: var(--sapButton_Emphasized_Background, #0a6ed1);
  --btn-danger: #bb0000;
  --status-ok: #107e3e;
  --status-info: #0a6ed1;
  --status-warn: #e9730c;
  --status-fail: #bb0000;
  --status-lock: #32363a;
}
.action-bar { display: flex; gap: 6px; align-items: center; margin: 8px 0 12px; flex-wrap: wrap; }
.action-bar .spacer { flex: 1; }
.badge.info { background: var(--status-info); color: #fff; }
.badge.lock { background: var(--status-lock); color: #fff; }

/* ---------------- 필터·정렬·검색 표준 툴바 (FILTER_SORT_SEARCH_STANDARD §5) ----------------
   3행 고정 슬롯 — 없는 컨트롤도 min-width로 자리 유지(§5-5), 전 화면 동일 위치·순서. */
.fg-toolbar { margin: 8px 0 10px; }
.fg-row { display: flex; align-items: center; gap: 8px; }
.fg-row1 { justify-content: space-between; margin-bottom: 6px; }
.fg-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fg-searchbox { flex: 0 0 auto; margin-left: auto; }
.fg-searchbox input { width: 250px; height: 32px; border: 1px solid var(--sapFieldBorderColor);
  border-radius: 2px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
.fg-row2 { margin-bottom: 6px; min-height: 32px; }
.fg-colfilters { min-width: 100px; }
.fg-period { min-width: 320px; display: flex; align-items: center; gap: 4px; }
.fg-period input { height: 30px; border: 1px solid var(--sapFieldBorderColor); border-radius: 2px; }
.fg-statusf { min-width: 130px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fg-statusbtn.fg-on { color: var(--sapBrandColor); border-color: var(--sapBrandColor); font-weight: 600; }
.fg-applyslot { min-width: 56px; }
.fg-hint { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.fg-slot-label { font-size: 12px; color: var(--sapContentLabelColor); white-space: nowrap; }
.fg-row3 { min-height: 30px; }
.fg-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; min-height: 24px; }
.fg-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 8px;
  border: 1px solid var(--sapBrandColor); border-radius: 12px; color: var(--sapBrandColor);
  background: var(--sapTileBackground); font-size: 12px; }
.fg-chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 2px; }
.fg-empty { color: var(--sapCriticalColor); font-size: 12px; }
.fg-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fg-preset { display: flex; align-items: center; gap: 4px; }
.fg-preset select { height: 28px; max-width: 160px; border: 1px solid var(--sapFieldBorderColor);
  border-radius: 2px; font-size: 12px; }

/* 컬럼 헤더 깔때기·정렬 (표준 §3-1·§3-3 — 정렬은 항상 헤더에서) */
th .fg-head { display: inline-flex; align-items: center; gap: 3px; }
th.fg-sortable { cursor: pointer; user-select: none; }
.fg-sort { font-size: 9px; color: var(--sapBrandColor); min-width: 10px; }
.fg-sort sup { font-size: 8px; }
.fg-funnel { border: 0; background: none; padding: 1px 2px; cursor: pointer;
  color: var(--sapNeutralColor); line-height: 1; }
.fg-funnel.fg-on, .fg-funnel:hover { color: var(--sapBrandColor); }

/* 깔때기 드롭다운 패널 */
.fg-panel { position: absolute; z-index: 300; background: var(--sapTileBackground);
  border: 1px solid var(--sapFieldBorderColor); border-radius: 4px; box-shadow: var(--sapShadow);
  min-width: 200px; max-width: 300px; padding: 8px; font-size: 12.5px; }
.fg-panel-title { font-weight: 700; margin-bottom: 6px; }
.fg-opt-list { max-height: 220px; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2px; }
.fg-opt-list::-webkit-scrollbar { width: 0; display: none; }
.fg-opt { display: flex; gap: 4px; align-items: center; cursor: pointer; }
.fg-opt-filter, .fg-text { width: 100%; height: 28px; border: 1px solid var(--sapFieldBorderColor);
  border-radius: 2px; padding: 0 6px; margin-bottom: 6px; box-sizing: border-box; }
.fg-range { display: flex; align-items: center; gap: 4px; }
.fg-range input { height: 28px; border: 1px solid var(--sapFieldBorderColor); border-radius: 2px;
  width: 45%; padding: 0 6px; box-sizing: border-box; }
.fg-rule { color: var(--sapContentLabelColor); font-size: 11px; margin: 6px 0 0; }
.fg-panel-foot { display: flex; gap: 6px; margin-top: 8px; }
/* 엑셀식 드롭다운 — 정렬·조건부 필터·값 체크박스(모두 선택) */
.fg-sortrow { display: flex; gap: 6px; margin-bottom: 6px; }
.fg-sortrow .btn { flex: 1; }
.fg-clearcol { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.fg-cond { margin-bottom: 8px; }
.fg-cond-label { display: block; font-size: 11px; color: var(--sapContentLabelColor); margin-bottom: 3px; }
.fg-cond-op { width: 100%; height: 28px; border: 1px solid var(--sapFieldBorderColor);
  border-radius: 2px; margin-bottom: 6px; box-sizing: border-box; }
.fg-num { height: 28px; border: 1px solid var(--sapFieldBorderColor); border-radius: 2px;
  width: 45%; padding: 0 6px; box-sizing: border-box; }
.fg-opt-all { border-bottom: 1px solid var(--sapListBorderColor); padding-bottom: 3px;
  margin-bottom: 3px; font-weight: 600; }
.fg-colmenu { display: flex; flex-direction: column; gap: 2px; }
.fg-colmenu-item { display: flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 4px 6px; cursor: pointer; text-align: left; font-size: 12.5px;
  color: var(--sapTextColor); border-radius: 2px; }
.fg-colmenu-item:hover { background: var(--sapBackgroundColor); }
.fg-colmenu-item.fg-on { color: var(--sapBrandColor); font-weight: 600; }

/* ---------------- 목록 화면 공용 클라이언트 목록 (LIST_PAGE_STANDARD · list-grid.js) ----------------
   z-projectFlow "프로젝트 현황"(Ant Design Table)의 겉모습·감도를 재현: 컴팩트 BulkBar(선택 0=회색,
   ≥1=파랑), thead 고정+본문 스크롤(antd scroll={{y}}), 하단 페이지네이션+크기선택, 행 액션 아이콘. */

/* BulkBar — 항상 표시(컴팩트). 선택 0=회색·흐림, ≥1=파랑 강조. */
.lg-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 8px; padding: 5px 10px; border: 1px solid #e4e6eb; border-radius: 4px;
  background: #fafafa; color: #8a9099; font-size: 12.5px; transition: background .12s, border-color .12s; }
.lg-bulkbar.lg-bulk-on { background: #e6f4ff; border-color: #91caff; color: #1677ff; }
.lg-bulk-left { font-weight: 600; min-width: 64px; }
.lg-bulk-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-bulk-right { display: flex; gap: 6px; margin-left: auto; }
.lg-bulk-btn { display: inline-flex; align-items: center; gap: 4px; }
.lg-bulkbar.lg-bulk-on .lg-bulk-btn:not(:disabled) { border-color: #91caff; color: #1677ff; }
.lg-bulkbar .btn:disabled { opacity: .5; cursor: default; }
.lg-bulkbar .btn.lg-danger:not(:disabled) { color: var(--btn-danger); border-color: #e6b3b3; }
.lg-bulkbar svg { vertical-align: -2px; }

/* 본문 스크롤 컨테이너 — thead 고정, tbody만 스크롤(높이는 JS가 계산·리사이즈 재계산). 스크롤바 미노출(전역 지침). */
.lg-scroll { overflow-y: auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  border-bottom: 1px solid var(--sapListBorderColor); }
.lg-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lg-scroll table thead th { position: sticky; top: 0; z-index: 6;
  background: #fff; box-shadow: inset 0 -2px 0 var(--sapListBorderColor); }
body.popup-mode .lg-scroll table thead th { top: 0; }
.lg-check { width: 28px; text-align: center; }

/* 목록 전체폭 + 표 내부 세로 스크롤 (주문·발주 = body.list-fullpage). 사이드바 고정·헤더 sticky 유지,
   표 영역만 세로 스크롤(페이지 전체가 밀리지 않음). 드로어 열면 body.sd-open .layout-right margin-right로
   폭이 목록↔등록으로 분할(등록 폭=drawer data-w 확보, 나머지 목록). 드로어 닫으면 다시 전체 폭. */
body.list-fullpage main { max-width: none; }
body.list-fullpage .lg-scroll { max-height: calc(100vh - 210px); }
@media (max-width: 1100px) { body.list-fullpage .lg-scroll { max-height: calc(100vh - 250px); } }

/* 행 액션 아이콘 버튼 (우측 col-actions — 순서: 기능→복제→삭제, 호버 툴팁) */
.lg-rowact { white-space: nowrap; }
.lg-iconbtn { border: 0; background: none; padding: 3px; margin-left: 2px; cursor: pointer;
  color: var(--sapNeutralColor); border-radius: 3px; line-height: 0; vertical-align: middle; }
.lg-iconbtn:hover { background: #e6f4ff; color: #1677ff; }
.lg-iconbtn.lg-danger:hover { background: #ffece8; color: var(--btn-danger); }
.lg-iconbtn.lg-dis { opacity: .28; cursor: default; }
.lg-iconbtn.lg-dis:hover { background: none; color: var(--sapNeutralColor); }

/* 하단 푸터 — 총건수·크기선택(50/100/200/500)·페이지 번호·이전/다음 */
.lg-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; }
.lg-total { font-weight: 600; color: var(--sapTextColor); }
.lg-size { display: flex; align-items: center; gap: 4px; color: var(--sapContentLabelColor); }
.lg-size-sel { height: 26px; border: 1px solid var(--sapFieldBorderColor); border-radius: 2px; font-size: 12px; }
.lg-pager { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.lg-pnum { min-width: 28px; }
.lg-pnum.lg-cur { background: var(--sapBrandColor); border-color: var(--sapBrandColor); color: #fff; font-weight: 600; }
.lg-gap { padding: 0 2px; color: var(--sapContentLabelColor); }

/* ---------------- 목록 셸 (LIST_SHELL — z-projectFlow 표준: 탭 바 + ①요약 카드 + ③도구) ---------------- */
.ls-shell { display: flex; flex-direction: column; gap: 12px; }
.ls-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sapListBorderColor); }
.ls-tab { padding: 7px 16px; font-size: 13px; color: var(--sapContentLabelColor); text-decoration: none;
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.ls-tab:hover { background: #f2f6fb; }
.ls-tab-on { color: var(--sapBrandColor); font-weight: 700; background: #fff;
  border-color: var(--sapListBorderColor); box-shadow: inset 0 -2px 0 var(--sapBrandColor); }
.ls-tab-badge { font-size: 11px; background: #eef1f5; color: #556; border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.ls-tab-on .ls-tab-badge { background: var(--sapBrandColor); color: #fff; }
.ls-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ls-summary:empty { display: none; }
.ls-card { border: 1px solid var(--sapListBorderColor); border-radius: 8px; padding: 8px 12px; text-align: center; background: #fff; }
.ls-card-v { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ls-card-l { font-size: 12px; color: var(--sapContentLabelColor); margin-top: 2px; }
.ls-tool { }
.ls-colpop { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--sapListBorderColor);
  border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12); padding: 8px; min-width: 180px; max-height: 340px; overflow: auto; }
.ls-colpop-h { font-size: 11px; color: var(--sapContentLabelColor); font-weight: 700; margin: 0 4px 4px; text-transform: uppercase; letter-spacing: .04em; }
.ls-colpop label { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 12.5px; cursor: pointer; }
.ls-colpop label:hover { background: #f2f6fb; }
/* 컬럼 너비 고정(table-layout:fixed) + 컴팩트 행높이 — 셸 관리 표 전용. 실제 컬럼 px는 list-shell.js가
   규칙 배분해 inline width로 설정(고정폭=내용맞춤, 유동폭=min 보장 후 비례 분배 → 컨테이너 꽉 채움). */
.ls-grid { table-layout: fixed; }
.ls-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; }
.ls-grid th { white-space: nowrap; }
/* 숫자·날짜·통화·상태 = 잘림 금지(값이 온전히 보여야 의미가 있음). 유동폭(텍스트)만 말줄임 유지. */
.ls-grid td.num,
.ls-grid td[data-type="date"],
.ls-grid td[data-type="currency"],
.ls-grid td[data-type="status"] { overflow: visible; text-overflow: clip; }
/* 자연 너비 측정 모드(줄바꿈 없이 내용맞춤 폭 계산) — 순간 적용 후 즉시 해제 */
.ls-measuring { table-layout: auto !important; width: auto !important; }
.ls-measuring td, .ls-measuring th { white-space: nowrap !important; overflow: visible !important; max-width: none !important; }
/* 가로 스크롤 컨테이너 — 좁을 때 목록 영역 안에서만 스크롤(세로 스크롤바 미노출·가로만 표시) */
.ls-scroll { overflow: auto; }
.ls-scroll::-webkit-scrollbar { height: 10px; width: 0; }
.ls-scroll::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 6px; }
.ls-scroll table.ls-grid thead th { position: sticky; top: 0; z-index: 6; }
/* 작업(액션) 컬럼 우측 고정 — 가로 스크롤 시에도 항상 보이게 */
.ls-grid th.col-actions, .ls-grid td.col-actions { position: sticky; right: 0; z-index: 4; background: #fff; }
.ls-grid thead th.col-actions { z-index: 8; }
/* 헤더 경계 리사이즈 핸들 (th는 sticky=positioned라 절대배치 기준이 됨) */
.ls-colgrip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 6; }
.ls-colgrip:hover { background: rgba(10, 110, 209, .28); }