/* ewms_pro 오버라이드 — 레거시 WMS CSS 의 누락된 reset / 외부 자원 의존 보정 */

/* ===== Reset ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ===== Cross-document View Transitions — 페이지 이동 시 깜빡임 방지 ===== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.12s;
  animation-timing-function: ease-out;
}
/* fixed 헤더/사이드바는 별도 트랜지션 그룹 — 자체 매칭 → 변경 없으면 시각적으로 정지 */
#header   { view-transition-name: header-shell; }
#sidebar  { view-transition-name: sidebar-shell; }
::view-transition-group(header-shell),
::view-transition-group(sidebar-shell) { animation-duration: 0s !important; }
/* 깜빡임 더 완화 — 새 페이지 fade-in 만, old 는 즉시 사라짐 */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-fade-in 0.12s ease-out; }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
body {
  font-family: dotum, '돋움', 'Nanum Gothic', 'Malgun Gothic', AppleSDGothicNeo, sans-serif;
  font-size: 12px;
  color: #383838;
  background: #fff;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: #2660a0; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
img { border: 0; vertical-align: middle; }
hr.layout { display: none; }

/* ===== Layout ===== */
html, body { height: auto !important; min-height: 100%; width: 100% !important; overflow: auto !important; }
#wrap {
  position: relative;
  min-height: 100vh;
  width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0;
  height: auto !important;
}
#wrap.openSnb { background: transparent; }
/* 레거시 .autoHeight 영향 무력화 — flex 는 유지(stretch), 스크롤만 허용 */
.autoHeight #wrap, .autoHeight #container, .autoHeight #content {
  flex: 1 1 auto !important;       /* flex:none 으로 가면 stretch 안 됨 → 1 유지 */
  overflow: visible !important;
  height: auto !important;
}
.autoHeight #content { min-height: 0 !important; }
.autoHeight #container { width: 100% !important; }

#header {
  position: fixed !important; top: 0; left: 0; right: 0;
  /* 본문 드롭다운(멀티셀렉트 .result=100 / .mOpen .open=100 / 그리드 컬럼패널=120) 위로,
     모바일 nav 드로어(백드롭=150·사이드바=200)·모달(9000+) 아래로. 100 이면 .result 와
     동률이라 DOM 뒤인 드롭다운이 스크롤 시 fixed header 를 침범 → 140 으로 분리.
     GNB 플라이아웃(.gScroll=200)·유저 드롭다운(.mDropLayer=250)은 #header 자식이라
     이 stacking context 안에 갇혀 무관. */
  z-index: 140;
  padding: 0 !important;
  margin: 0;
  background: #28303f;
  color: #fff;
  border-bottom: 1px solid #1e2533;
  min-width: 0 !important;
}
/* #header fixed 보정 — #wrap 상단 padding 으로 컨텐츠 영역 밀어내림 */
#wrap { padding-top: 86px !important; }                              /* utility 30 + globalNav 56 */
@media (max-width: 768px) { #wrap { padding-top: 74px !important; } } /* mobile: 30 + 44 */
#header:before, #header:after { content: none !important; }
#skipNavigation { display: none; }

/* globalNav: 메인 헤더 (로고 + GNB) — 레거시 flex 컬럼 안에서 명시 높이 고정 */
#header .globalNav {
  display: flex !important;
  align-items: stretch;
  background: #28303f !important;
  width: 100%;
  height: 56px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* h1.logo (좌측) — 로고 + 햄버거 우측 정렬 */
h1.logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 56px;
  padding: 0 8px 0 16px;
  margin: 0;
  background: #1e2533;
}
h1.logo a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}
h1.logo .inner { padding: 0; margin: 0; }
h1.logo .icoSFIX { display: none; }

/* 햄버거 — 로고 영역 우측 끝 */
h1.logo .btnFold {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid #4c6187;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
h1.logo .btnFold span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  margin: -1px 0 0 -7px;
  background: #cadcf3;
  text-indent: -9999px;
}
h1.logo .btnFold span:before,
h1.logo .btnFold span:after {
  content: '';
  position: absolute;
  left: 0;
  width: 14px; height: 2px;
  background: #cadcf3;
  transition: transform .25s, top .25s;
}
h1.logo .btnFold span:before { top: -5px; }
h1.logo .btnFold span:after  { top: 5px; }
#wrap.openSnb h1.logo .btnFold span { background: transparent !important; }
#wrap.openSnb h1.logo .btnFold span:before { top: 0; transform: rotate(45deg); }
#wrap.openSnb h1.logo .btnFold span:after  { top: 0; transform: rotate(-45deg); }

/* navigation 영역 (가운데, 가변 너비) */
#header .globalNav .navigation { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.gnb {
  display: flex;
  align-items: stretch;
  height: 56px;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;
}
.gnb > li {
  display: flex;            /* 자식이 stretch */
  align-items: stretch;
  position: relative;       /* .gScroll absolute 의 기준 */
  list-style: none;
  cursor: pointer;
}
.gnb > li .btnCover {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 56px;
  background: transparent;
  border: 0;
  z-index: 2;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
}
.gnb .title {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  color: #cadcf3;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-size: 13px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
strong.title { font-weight: 500; }   /* <strong> 기본 bold 무력화 */

/* .blind — 스크린리더 전용 텍스트 시각적 숨김 */
.blind {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.gnb > li:hover .title,
.gnb > li.is-active .title,
.gnb > li.is-open .title { color: #fff; background: #0c1119; }

/* gScroll 드롭다운 — globalNav 기준 풀폭 펼침 (레거시 WMS 레이어 동작 1:1) */
#header .globalNav { position: relative; }
#header .gnb > li { position: static !important; }   /* li 기준 위치 해제 */
.gnb .gScroll {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important; right: 0 !important;
  z-index: 200;
  background: #fff;
  border-top: 0;
  box-shadow: 0 8px 20px rgba(20,25,40,.15);
  padding: 0 !important;
  min-width: 0 !important;
}
/* 사이드바 열린 상태일 때 메가메뉴는 사이드바 우측에서 시작 (사이드바 가리지 않음) */
#wrap.openSnb .gnb .gScroll { left: 220px !important; top: 57px !important; }
.gnb > li.is-open .gScroll { display: block !important; }
.gnb .gScroll .inner {
  margin: 0;
  padding: 0 32px 20px 32px;       /* 상단 여백 제거 — 카테고리 헤더 자체가 patch 가짐 */
}

/* mNavigation.typeLayer — 레거시 WMS 메가메뉴 컬럼 컨테이너 */
.gnb .gScroll .mNavigation.typeLayer {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
}
.gnb .gScroll .category {
  flex: 0 0 240px;
  padding: 0 24px;
  border-left: 1px solid #eef0f3;
  margin: 10px 0 34px !important;  /* legacy .mNavigation.typeLayer .category margin:39px 0 34px → top 10 */
}
.gnb .gScroll .category:first-child {
  border-left: 0;
  padding-left: 0;
}
.gnb .gScroll .category > .link {
  display: block;
  padding: 4px 0 10px;
  font-size: 14px; font-weight: 700;
  color: #1a2640;
  letter-spacing: -0.03em;
  border-bottom: 2px solid #2660a0;
  margin-bottom: 8px;
}
.gnb .gScroll .category .depth3 {
  list-style: none; padding: 0; margin: 0;
}
.gnb .gScroll .category .depth3 > li {
  list-style: none;
}
.mNavigation.typeLayer .depth3 > li { width: 130px; }   /* legacy 115px override */
.gnb .gScroll .category .menu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
}
.gnb .gScroll .category .menu > a {
  display: block;
  padding: 6px 0;
  color: #2c344b; font-size: 13px;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: 1;
}
.gnb .gScroll .category .menu > a:hover { color: #2660a0; text-decoration: none; }
.gnb .gScroll .category .menu > a.selected { color: #2660a0; font-weight: 700; }
.gnb .gScroll .category .btnBlank { display: none; } /* "새창 열림" 보조 링크 숨김 */
.gnb .edge { display: none; }

/* ===== 상단 유틸리티 바 (.utility) — 레거시 position:absolute + float 무력화, 38px 통일 ===== */
#header .utility {
  display: flex !important;
  align-items: stretch !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background: #f4f6fa !important;
  border-bottom: 1px solid #dde2ea;
  font-size: 12px;
  color: #5b6473;
  overflow: visible;
}
#header .utility .gLeft,
#header .utility .gRight {
  display: flex !important;
  align-items: stretch !important;
  height: 30px !important;
}
#header .utility .gLeft > .blind,
#header .utility .gRight .blind { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
#header .utility:after { content: none !important; }
#header .utility .gLeft, #header .utility .gRight { float: none !important; }
#header .utility .shortcut { overflow: visible !important; }
#header .utility .shortcut > li { float: none !important; width: auto !important; height: auto !important; border-right: 0 !important; }
#header .utility .gLeft,
#header .utility .gRight { display: flex; align-items: stretch; }
#header .utility .gRight { margin-left: auto; }

/* .shortcut 좌측 바로가기 (홈/메뉴토글) — 레거시 47x38 + padding18 무력화 */
#header .utility .shortcut {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important; margin: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  height: 30px !important;
}
#header .utility .shortcut > li {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: auto !important; height: 30px !important;
  margin: 0 !important; padding: 0 !important;
  border-right: 0 !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}
#header .utility .shortcut > li::marker { content: none !important; }
#header .utility .shortcut .btnFold,
#header .utility .shortcut .btnHome {
  vertical-align: middle !important;
}
#header .utility .shortcut .btnFold,
#header .utility .shortcut .btnHome {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important;
  padding: 0 !important;
  line-height: 1 !important;
  background: #fff !important;
  border: 0 !important; border-right: 1px solid #dde2ea !important;
  cursor: pointer; text-decoration: none;
  position: relative;
  overflow: hidden;
  color: #5b6473;
  vertical-align: middle;
}
#header .utility .shortcut .btnHome svg {
  display: block !important;
  width: 16px !important; height: 16px !important;
  margin: auto !important;
}
#header .utility .shortcut .btnHome:hover { color: #2660a0; background: #eef2f7 !important; }
#header .utility .shortcut .btnFold span,
#header .utility .shortcut .btnHome span { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* btnFold — 햄버거(≡) 기본 (32px 박스 정중앙: y 9/15/21) — 레거시 `background: #fff` 단축이 image 리셋하는 것 차단 */
#header .utility .shortcut .btnFold {
  background-color: #fff !important;
  background-image:
    linear-gradient(#5b6473, #5b6473),
    linear-gradient(#5b6473, #5b6473),
    linear-gradient(#5b6473, #5b6473) !important;
  background-size: 11px 2px, 11px 2px, 11px 2px !important;
  background-position: 50% 9px, 50% 14px, 50% 19px !important;
  background-repeat: no-repeat !important;
}
#wrap.openSnb #header .utility .shortcut .btnFold {
  background-image: none !important;
  position: relative;
}
#wrap.openSnb #header .utility .shortcut .btnFold:before,
#wrap.openSnb #header .utility .shortcut .btnFold:after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #5b6473;
  transform-origin: center;
}
#wrap.openSnb #header .utility .shortcut .btnFold:before { transform: translate(-50%, -50%) rotate(45deg); }
#wrap.openSnb #header .utility .shortcut .btnFold:after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* 이전 :before '⌂' (Unicode) 제거 — 이제 인라인 SVG 사용 */
#header .utility .shortcut .btnHome:before,
#header .utility .shortcut .btnHome:after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* span "홈" 텍스트 강제 시각 숨김 (보조 텍스트 leak 방지) */
#header .utility .shortcut .btnFold span,
#header .utility .shortcut .btnHome span,
#header .utility .shortcut .btnHome .icoSFIX {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  font-size: 0 !important;
}
#header .utility .shortcut .btnFold:hover,
#header .utility .shortcut .btnHome:hover { background: #eef2f7; }

/* .manualBtn 매뉴얼 링크 — 유틸바 30px 안에 정확히 들어가게 */
#header .utility .manualArea { display: flex !important; align-items: stretch !important; height: 30px; }
#header .utility .manualBtn {
  display: inline-flex !important; align-items: center !important; justify-content: center;
  height: 30px !important; line-height: 30px !important;
  padding: 0 12px !important;
  border-left: 1px solid #dde2ea !important;
  border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
  color: #5b6473; text-decoration: none;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}
#header .utility .manualBtn:hover { background: #eef2f7; color: #2660a0; text-decoration: none; }

/* .langSwitch 언어 전환 — 유틸바 결(30px·좌측 구분선·뮤트 톤)에 맞춰 평평하게.
   지구본 아이콘 + select 는 박스가 아니라 매뉴얼 링크와 같은 플랫 컨트롤로 통일. */
#header .utility .langSwitch {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px 0 12px;
  border-left: 1px solid #dde2ea;
}
#header .utility .langSwitch .lang-icon {
  font-size: 13px;
  line-height: 1;
  opacity: .8;
  transition: opacity .15s ease;
}
#header .utility .langSwitch:hover .lang-icon { opacity: 1; }
#header .utility .langSwitch .eLangSwitch {
  height: 24px !important;
  padding: 0 22px 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 5px;
  background-color: transparent !important;
  background-position: right 7px center !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%235b6473'/></svg>") !important;
  color: #5b6473 !important;
  font-size: 11px !important;
  line-height: 22px !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#header .utility .langSwitch .eLangSwitch:hover,
#header .utility .langSwitch .eLangSwitch:focus,
#header .utility .langSwitch .eLangSwitch:focus-visible {
  background-color: #eef2f7 !important;
  color: #2660a0 !important;
  border-color: #d7dee8 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%232660a0'/></svg>") !important;
}

/* .setLogin .mDropdown / .mDropLayer — 우측 사용자 드롭다운 */
#header .setLogin { position: relative; border-left: 1px solid #dde2ea; display: flex; align-items: stretch; }
#header .setLogin .mDropdown {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px !important;
  padding: 0 26px 0 12px !important;       /* 우측 26px = ▾ 위치(right:10) + 화살표(8px) + 여백 */
  background: #fff;
  color: #2c344b; font-size: 11px; cursor: pointer;
  position: relative;
}
#header .setLogin .mDropdown .profile {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #4a8de0, #2660a0);
  display: inline-block; position: relative;
  flex-shrink: 0;
}
#header .setLogin .mDropdown .profile:after {
  content: ''; position: absolute; left: 50%; top: 4px;
  width: 7px; height: 7px; background: #fff; border-radius: 50%;
  transform: translateX(-50%);
}
#header .setLogin .mDropdown .name { font-weight: 700; color: #1a2640; position: relative; z-index: 1; white-space: nowrap; flex-shrink: 0; }
#header .setLogin .mDropdown .department { color: #888; font-weight: 400; position: relative; z-index: 1; white-space: nowrap; flex-shrink: 0; }
#header .setLogin .mDropdown .profile { position: relative; z-index: 1; flex-shrink: 0; }
#header .setLogin .mDropdown { flex-shrink: 0; min-width: 0; }
#header .setLogin .mDropdown .btnCover {
  position: absolute !important; inset: 0 !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  cursor: pointer;
  text-indent: -9999px !important; overflow: hidden !important;
  font-size: 0 !important; line-height: 1 !important;
}
/* 레거시 .mDropdown .btnCover:after (▾) — 박스 밖으로 삐져나오지 않게 정렬 */
#header .setLogin .mDropdown .btnCover:after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; right: 10px !important; left: auto !important; bottom: auto !important;
  width: 0 !important; height: 0 !important;
  margin: 0 !important;
  border-style: solid !important;
  border-width: 4px 4px 0 4px !important;
  border-color: #5b6473 transparent transparent transparent !important;
  transform: translateY(-50%) !important;
  background: none !important;
}
#header .setLogin .mDropdown.selected .btnCover:after {
  border-width: 0 4px 4px 4px !important;
  border-color: transparent transparent #5b6473 transparent !important;
}
/* 내가 추가했던 .mDropdown:after (▾) 는 .btnCover:after 와 중복되므로 제거 */
#header .setLogin .mDropdown:after { content: none !important; }
#header .setLogin .mDropdown:hover { background: #eef2f7; }
#header .setLogin .mDropdown:after {
  content: '▾'; color: #888; font-size: 10px; margin-left: 2px;
}

#header .setLogin .mDropLayer {
  display: none;
  position: absolute; top: 100%; right: 0;
  background: #fff; border: 1px solid #c4cad3;
  box-shadow: 0 4px 12px rgba(20,25,40,.12);
  min-width: 170px;
  z-index: 250;
}
#header .setLogin .mDropdown.selected + .mDropLayer { display: block; }
#header .setLogin .mDropLayer .blind { position: absolute; left: -9999px; width: 0; height: 0; }
#header .setLogin .mDropLayer ul { padding: 4px 0; margin: 0; list-style: none; }
#header .setLogin .mDropLayer li { list-style: none; }
#header .setLogin .mDropLayer a,
#header .setLogin .mDropLayer button {
  display: block; width: 100%;
  padding: 9px 14px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  color: #2c344b; font-size: 12px; text-decoration: none;
  font-family: inherit;
}
#header .setLogin .mDropLayer a:hover,
#header .setLogin .mDropLayer button:hover { background: #f0f5fa; color: #1d5fa8; }
#header .setLogin .mDropLayer .logoutForm { margin: 0; padding: 0; border-top: 1px solid #eef0f3; }
#header .setLogin .mDropLayer .logoutForm button { color: #b62a2a; }
#header .setLogin .mDropLayer .logoutForm button:hover { background: #fff0f0; color: #8a1f1f; }

/* (이전 .gnbMega 룰 — 새 .mNavigation.typeLayer 로 대체됨, 제거됨) */

/* GNB 단일 메뉴 (메인화면) — 클릭만 가능, 호버 효과만 */
.gnb > li:not([data-gnb-idx]) .title { cursor: default; }

/* ===== container — 좌측 사이드바 + 우측 컨텐츠 (openSnb 토글로 사이드바 표시) ===== */
#container { display: flex !important; flex-direction: row !important; min-height: calc(100vh - 86px - 30px); width: 100%; }
#wrap.openSnb #sidebar {
  display: block !important;
  position: static !important;
  width: 220px !important; flex-shrink: 0;
  height: auto !important; min-height: 100% !important;
  background: #fff !important;
  border-right: 1px solid #e2e6ec;
  padding: 14px 12px;
  color: #2c344b;
}
#wrap:not(.openSnb) #sidebar { display: none !important; width: 0 !important; padding: 0 !important; border: 0 !important; }
#wrap #content, #content { flex: 1; min-width: 0; }

/* 사이드바 메뉴 sticky — 본문이 길어 페이지가 스크롤되면 메뉴(.snb/.myInfo)가 함께 밀려
   사라지던 불편 해소. #sidebar 컬럼은 전체 높이(흰 배경/우측 구분선) 유지하고, 내부 메뉴만
   고정 헤더(86px) 바로 아래에 sticky 로 붙여 스크롤해도 항상 보이게 한다.
   메뉴가 뷰포트보다 길 때만 메뉴 자체가 내부 스크롤(fallback) — 평소엔 스크롤 없음. */
#wrap.openSnb #sidebar { overflow: visible !important; }   /* .autoHeight #sidebar overflow-y:auto 무효화 (sticky 스크롤 컨테이너 충돌 방지) */
/* body(.autoHeight)의 overflow:auto 가 중간 스크롤 컨테이너가 되어 sticky 를 무력화 →
   본문 스크롤을 viewport(html)에서만 일어나게 풀어준다(헤더는 fixed 라 무관). */
body.autoHeight { overflow: visible !important; }
#wrap.openSnb #sidebar .snb,
#wrap.openSnb #sidebar .myInfo {
  position: sticky;
  /* 고정 헤더(86px) + #sidebar 상단 패딩(14px) = 메뉴의 자연 시작 위치.
     이 위치로 고정해야 스크롤 시 위로 안 튀어(상단 여백 유지) 메뉴가 제자리에 머문다. */
  top: 100px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  #wrap.openSnb #sidebar .snb,
  #wrap.openSnb #sidebar .myInfo { top: 88px; max-height: calc(100vh - 88px); }   /* 모바일 헤더 74 + 패딩 14 */
}

/* ── 사이드바 프로필 (.myInfo) — 레거시 WMS 클래스 1:1 ── */
#sidebar .myInfo { text-align: center; padding: 8px 4px 14px; }
#sidebar .myInfo .thumb {
  display: block;
  width: 76px; height: 76px; border-radius: 50%;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #4a8de0, #2660a0);
  position: relative;
  box-shadow: 0 2px 10px rgba(38, 96, 160, .25);
}
#sidebar .myInfo .thumb:before {
  content: ''; position: absolute; left: 50%; top: 20px;
  width: 22px; height: 22px; background: #fff;
  border-radius: 50%; transform: translateX(-50%);
}
#sidebar .myInfo .thumb:after {
  content: ''; position: absolute; left: 50%; bottom: 10px;
  width: 40px; height: 22px; background: #fff;
  border-radius: 20px 20px 0 0; transform: translateX(-50%);
}
#sidebar .myInfo .info { padding: 0 6px; }
#sidebar .myInfo .name {
  display: block; font-size: 14px; font-weight: 700;
  color: #1a2640; letter-spacing: -0.03em;
  margin-bottom: 12px;
}
#sidebar .myInfo .btnDashboard {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  margin: 0 0 6px 0 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important; border-radius: 3px !important;
  color: #383d4d !important; font-size: 12px; text-align: center;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  box-shadow: none !important;
}
#sidebar .myInfo .btnDashboard:hover { background: #f5f7fa; border-color: #b4bbc3; color: #1d5fa8; text-decoration: none; }
#sidebar .myInfo .logoutForm { margin: 0; padding: 0; }
#sidebar .myInfo .logoutForm .btnDashboard { color: #b62a2a; border-color: #e8c2c2; }
#sidebar .myInfo .logoutForm .btnDashboard:hover { background: #fff0f0; color: #8a1f1f; border-color: #d68d8d; }

/* ── 섹션 메뉴 트리 (snb) ── */
.snb { padding: 4px 0; }
.snb .snbTitle {
  display: block; padding: 0 6px 11px;
  margin-bottom: 6px;
  border-bottom: 2px solid #2660a0;
  font-size: 14px; font-weight: 700; color: #1a2640;
  letter-spacing: -0.03em;
}
.snbGroup { padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.snbGroup:last-child { border-bottom: 0; }
.snbGroupTitle {
  display: block; padding: 6px 8px;
  font-size: 11px; font-weight: 700; color: #2660a0;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.snbList { padding: 0; margin: 0; list-style: none; }
.snbList li { list-style: none; }
.snbList .snbLink {
  display: block;
  padding: 7px 10px 7px 18px;
  position: relative;
  color: #2c344b; font-size: 12px;
  text-decoration: none; border-radius: 3px;
  margin: 1px 0;
}
.snbList .snbLink:before {
  content: '·';
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  color: #b7cae0; font-size: 14px;
}
.snbList .snbLink:hover { background: #f0f5fa; color: #1d5fa8; text-decoration: none; }
.snbList .snbLink.selected {
  background: #2660a0; color: #fff;
  font-weight: 600;
}
.snbList .snbLink.selected:before { color: #fff; }

/* ===== 레거시 레거시 WMS.css/wms.css 폭/이미지 의존 무력화 ===== */
.WMS.mDashboard {
  width: auto !important;
  padding: 16px 18px !important;
  margin: 0 0 12px 0 !important;
  border: 1px solid #e2e6ec !important;
  background: #fff;
  border-radius: 4px;
}
.WMS.mDashboard h2 { background: none !important; text-indent: 0 !important; height: auto !important; font-size: inherit !important; }
.WMS.mDashboard h3 {
  font-size: 14px; font-weight: 700;
  color: #1a2640; letter-spacing: -0.03em;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid #eef0f3;
  display: flex; align-items: center; gap: 6px;
}
.WMS.mDashboard.gHalf {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;      /* 양 column 자기 콘텐츠 높이로 */
  gap: 12px;
  border: 0 !important;
  background: transparent;
  padding: 0 !important;
  width: auto !important;
}
.WMS.mDashboard.gHalf > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  align-self: flex-start !important;       /* 추가 보장 */
  display: block !important; width: auto !important;
  padding: 16px 18px !important;
  border: 1px solid #e2e6ec !important;
  border-radius: 4px;
  background: #fff !important;
}

/* ── 도움말 ? 툴팁 ── */
.mTooltip.gLarge { position: relative; display: inline-flex; align-items: center; }
.mTooltip .icon.eTip {
  width: 16px; height: 16px; padding: 0;
  border: 1px solid #b7cae0; background: #f0f5fa;
  color: #2660a0; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  cursor: help; line-height: 1;
}
.mTooltip .tooltip {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 320px; padding: 10px 12px;
  background: #fff; border: 1px solid #b7cae0;
  box-shadow: 0 4px 12px rgba(20,25,40,.12);
  z-index: 200; border-radius: 4px;
  font-size: 11px; color: #555; font-weight: 400;
  letter-spacing: -0.02em;
}
.mTooltip:hover .tooltip { display: block; }
.mTooltip .tooltip ul { padding: 0; margin: 6px 0 0; list-style: none; }
.mTooltip .tooltip ul li { padding: 4px 0 4px 10px; position: relative; line-height: 1.45; }
.mTooltip .tooltip ul li:before { content: '·'; position: absolute; left: 0; color: #b7cae0; }
.mTooltip .titleEm { font-weight: 700; color: #2660a0; font-size: 12px; }

/* ── mProcess.typeIcon (4단계 아이콘 파이프라인) — SVG 인라인 ── */
.WMS.today-status .mProcess.typeIcon {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  list-style: none; padding: 6px 4px 0; margin: 0;
}
.WMS.today-status .mProcess.typeIcon li {
  position: relative; list-style: none; text-align: center;
  padding: 18px 8px 16px;
  background: #f7fafd;
  border: 1px solid #e2e6ec; border-radius: 4px;
  transition: background .12s, border-color .12s, transform .12s;
}
.WMS.today-status .mProcess.typeIcon li:hover { background: #fff; border-color: #b7cae0; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20,40,80,.08); }
.WMS.today-status .mProcess.typeIcon li:before,
.WMS.today-status .mProcess.typeIcon li:after { background: none !important; }
/* 화살표 — 인접한 li 의 좌측 갭 정중앙 (grid gap 8px) */
.WMS.today-status .mProcess.typeIcon li + li:before {
  content: '›';
  position: absolute;
  left: -4px; top: 50%;
  transform: translate(-50%, -50%);
  color: #b7cae0;
  font-size: 22px; font-weight: 700; line-height: 1;
  z-index: 1;
  background: none !important;
}
.WMS.today-status .mProcess.typeIcon li:first-child:before { content: none !important; }
.WMS.today-status .mProcess.typeIcon .ico { display: block; width: 44px; height: 44px; margin: 0 auto 6px; }
.WMS.today-status .mProcess.typeIcon .ico svg { width: 100%; height: 100%; display: block; }
.WMS.today-status .mProcess.typeIcon .title {
  display: block; font-size: 12px; color: #5b6473; font-weight: 600;
  margin-bottom: 6px; letter-spacing: -0.03em;
}
.WMS.today-status .mProcess.typeIcon .link {
  display: inline-block;
  font-size: 22px; font-weight: 800; color: #1a2640;
  text-decoration: none; letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
}
.WMS.today-status .mProcess.typeIcon .link:hover { color: #2660a0; text-decoration: none; }
.WMS.today-status .mProcess.typeIcon li.total .link { color: #2c344b; }
.WMS.today-status .mProcess.typeIcon li.plan  .link { color: #c47c00; }
.WMS.today-status .mProcess.typeIcon li.ing   .link { color: #2660a0; }
.WMS.today-status .mProcess.typeIcon li.done  .link { color: #2a7a3a; }

/* ── pagination (◁ ▷) ── */
.WMS.mDashboard .pagination { position: absolute; top: 14px; right: 18px; display: flex; gap: 0; }
.WMS.mDashboard.gHalf > .column { position: relative; }
.WMS.mDashboard .pagination button {
  width: 22px; height: 20px; padding: 0;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0;
  color: #5b6473; cursor: pointer;
  text-indent: -9999px; overflow: hidden;
  position: relative;
}
.WMS.mDashboard .pagination button + button { margin-left: -1px; }
.WMS.mDashboard .pagination button:before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-top: 1.5px solid #5b6473;
  border-right: 1.5px solid #5b6473;
  text-indent: 0;
}
.WMS.mDashboard .pagination .prev:before { transform: translate(-30%, -50%) rotate(-135deg); }
.WMS.mDashboard .pagination .next:before { transform: translate(-70%, -50%) rotate(45deg); }
.WMS.mDashboard .pagination button:hover { background: #f5f7fa !important; }
.WMS.mDashboard .pagination button:disabled { opacity: 0.4; cursor: default; }

/* ── .mallname — 상점명 헤더 (점 마커 + 위젯 제목보다 작게) ── */
.WMS.mDashboard .mallname { all: unset !important; }
.WMS.daily-status .mallname,
.WMS.etc-status .mallname {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5b6473 !important;
  margin: 0 0 8px !important;
  padding: 2px 0 4px 12px !important;
  position: relative !important;
}
.WMS.daily-status .mallname:before,
.WMS.etc-status .mallname:before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 50% !important;
  width: 5px !important; height: 5px !important;
  background: #2660a0 !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* ── inout-status .rate-value / .rate — 레거시 WMS 한 줄 progress (rateFill 흐름 + rateText 절대 오버레이) ── */
.WMS.inout-status .mTable .rate-value {
  display: block;
  width: 100%;
  position: relative;
}
.WMS.inout-status .mTable .rate-value .rate {
  position: relative;
  display: block;
  height: 22px;
  background: #eef0f3;
  border-radius: 4px;
  overflow: hidden;
}
.WMS.inout-status .mTable .rate-value .rate > .rateFill {
  display: block;
  height: 22px;
  background: #34ff33;          /* 입고: 레거시 WMS 원본 형광 초록 */
  transition: width .3s;
}
.WMS.inout-status .out .mTable .rate-value .rate > .rateFill {
  background: #65fffd;          /* 출고: 레거시 WMS 원본 시안 */
}
.WMS.inout-status .mTable .rate-value .rate > .rateText {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #000;                   /* 레거시 WMS 원본: color:black */
  font-feature-settings: 'tnum';
  z-index: 1;
  white-space: nowrap;
}

/* ── etc-status .btnView (자세히보기) — 상점명(.mallname) 라인 우측 정렬 ── */
.WMS.etc-status > .column { position: relative; }
.WMS.etc-status .cont { position: relative; padding-top: 2px; }
.WMS.etc-status .cont .mallname { display: inline-block !important; margin-right: 12px !important; }
.WMS.etc-status .btnView {
  position: absolute !important;
  top: 2px !important; right: 0 !important;
  font-size: 11px;
  color: #5b6473;
  text-decoration: none;
  padding-left: 14px;
  line-height: 18px;
  z-index: 2;
}
.WMS.etc-status .btnView:before {
  content: '+';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  font-weight: 700; color: #2660a0; font-size: 13px;
  line-height: 1;
}
.WMS.etc-status .btnView:hover { color: #2660a0; text-decoration: underline; }
.WMS.etc-status .icoMore { display: none !important; }

/* ── etc-status .mTable (TOP5 표) ── */
.WMS.etc-status .mTable { margin-top: 4px; }
.WMS.etc-status .mTable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.WMS.etc-status .mTable caption { display: none; }
.WMS.etc-status .mTable th, .WMS.etc-status .mTable td {
  padding: 8px 8px; border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.WMS.etc-status .mTable thead th {
  background: #f7fafd; font-weight: 700; color: #2c344b;
  font-size: 11px; text-align: center;
}
.WMS.etc-status .mTable tbody tr:hover td { background: #fafcfe; }
.WMS.etc-status .mTable td.center { text-align: center; }
.WMS.etc-status .mTable td.left   { text-align: left; }
.WMS.etc-status .mTable td a { color: #2660a0; text-decoration: none; }
.WMS.etc-status .mTable td a:hover { text-decoration: underline; }
.txtEllipsis {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}

/* ── pagination disabled 상태 ── */
.WMS.mDashboard .pagination button:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ── 이전 .storeName/.rateBar/.rateFill/.rateLabel 룰 — 새 .rate-value/.rate 구조로 대체됨 ── */
.WMS.inout-status .mTable { margin: 0; }
.WMS.inout-status .mTable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.WMS.inout-status .mTable caption { display: none; }
/* 레거시 .in .mTable td { height:25 } / .out .mTable td { height:73 } 무력화 */
.WMS.inout-status .in .mTable td,
.WMS.inout-status .out .mTable td,
.WMS.inout-status .mTable th,
.WMS.inout-status .mTable td {
  padding: 8px 10px !important;
  border-bottom: 1px solid #eef0f3 !important;
  vertical-align: middle !important;
  height: 38px !important;
}
.WMS.inout-status .mTable thead th {
  background: #f7fafd !important;
  font-weight: 700 !important; color: #2c344b !important;
  font-size: 11px !important; text-align: center !important;
  height: 32px !important;
}
.WMS.inout-status .mTable td.center { text-align: center !important; font-weight: 500; }
.WMS.inout-status .mTable tbody tr:hover td { background: #fafcfe; }
.WMS.inout-status .mTable tbody tr { height: 38px !important; }
/* 레거시 .mTable table { border-collapse: separate; border-spacing: -1px } 무력화 */
.WMS.inout-status .mTable table { border-collapse: collapse !important; border-spacing: 0 !important; }
.WMS.inout-status .mTable { margin: 0; }
.WMS.inout-status .mTable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.WMS.inout-status .mTable caption { display: none; }
.WMS.inout-status .mTable th, .WMS.inout-status .mTable td {
  padding: 8px 10px; border-bottom: 1px solid #eef0f3;
  text-align: left; vertical-align: middle;
}
.WMS.inout-status .mTable thead th { background: #f7fafd; font-weight: 700; color: #2c344b; font-size: 11px; }
.WMS.inout-status .mTable tbody tr:hover td { background: #fafcfe; }
.WMS.inout-status .mTable td.empty { text-align: center; padding: 30px 10px; color: #95a5be; }
.WMS.inout-status .mTable .storeName { font-weight: 500; color: #2c344b; padding-left: 14px; position: relative; }
.WMS.inout-status .mTable .storeName:before {
  content: ''; position: absolute;
  top: 50%; left: 6px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #2660a0; transform: translateY(-50%);
}
.WMS.inout-status .out .mTable .storeName:before { background: #2a7a3a; }

.WMS.inout-status .mTable .rateCell {
  display: flex !important; align-items: center; gap: 10px;
  padding: 8px 10px !important;
  background: transparent !important;
}
.WMS.inout-status .mTable .rateBar {
  flex: 1; height: 10px;
  background: #eef0f3; border-radius: 5px; overflow: hidden;
  min-width: 80px;
}
.WMS.inout-status .mTable .rateFill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4a8de0, #2660a0);
  border-radius: 5px;
  transition: width .3s;
}
.WMS.inout-status .out .mTable .rateFill { background: linear-gradient(90deg, #6cb777, #2a7a3a); }
.WMS.inout-status .mTable .rateLabel {
  font-size: 11px; color: #5b6473;
  font-feature-settings: 'tnum';
  min-width: 90px; text-align: right;
  white-space: nowrap;
}
.WMS.inout-status .mTable .rateLabel strong { color: #1a2640; font-weight: 800; }
.WMS.inout-status .mTable .rateLabel em { color: #8c95a4; font-style: normal; font-weight: 500; }

/* daily-status / etc-status .wrap */
.WMS.daily-status .wrap, .WMS.etc-status .wrap { min-height: 200px; padding-top: 6px; }
.WMS.daily-status .wrap .empty,
.WMS.etc-status  .wrap .empty { text-align: center; padding: 70px 0; color: #95a5be; margin: 0; }

/* 레거시 .chart { width:415px; height:220px } 무력화 — column 폭 가득 사용 */
.WMS.mDashboard .chart {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.WMS.daily-status .cont,
.WMS.etc-status .cont {
  width: 100% !important;
  /* display 는 inline style 로 토글 (prev/next pagination) — !important 로 덮지 않음 */
}

.mNavigation.typeSnb { width: 220px !important; padding: 0; margin: 0; list-style: none; }
.mNavigation.typeSnb > li { list-style: none; }
.mNavigation.typeSnb .category > .link {
  display: block !important;
  position: relative;
  padding: 11px 18px !important;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: -0.04em;
  border-bottom: 1px solid #25304a;
}
.mNavigation.typeSnb .category > .link strong { font-weight: 500; }
.mNavigation.typeSnb .category > .link:before { content: none !important; }
.mNavigation.typeSnb .category > .link.collapsible:before { content: none !important; }
.mNavigation.typeSnb .category > .link:hover { background: #25304a; }
.mNavigation.typeSnb .category > .link.selected,
.mNavigation.typeSnb .category > .link.collapsible.selected { background: #1e2533; color: #fff; font-weight: 700; }
/* 3뎁스 그룹 (운영관리/기본관리/마스터/연동설정) — 섹션과 페이지 사이 중간 레벨 */
.mNavigation.typeSnb .depth2 { background: #283449; padding: 2px 0; list-style: none; }
.mNavigation.typeSnb .depth2 > li.subcategory { list-style: none; border-bottom: 1px solid #232c40; }
.mNavigation.typeSnb .depth2 > li.subcategory:last-child { border-bottom: 0; }
.mNavigation.typeSnb .depth2 > li > .link.sub-collapsible {
  display: block;
  padding: 8px 18px;
  font-size: 12px;
  color: #d5dde9;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.03em;
}
.mNavigation.typeSnb .depth2 > li > .link.sub-collapsible:hover { background: #2e3b53; color: #fff; }
.mNavigation.typeSnb .depth2 > li > .link.sub-collapsible.selected { color: #fff; background: #232c40; }
.mNavigation.typeSnb .depth2 .depth3 { background: #1a2233; padding: 4px 0; }
.mNavigation.typeSnb .depth2 .depth3 > li > .link { padding-left: 36px; }
.mNavigation.typeSnb .depth2 .depth3 > li > .link:before { left: 24px; }
.mNavigation.typeSnb .depth2 .depth3 > li > .link.selected { padding-left: 33px; }

.mNavigation.typeSnb .depth3 { background: #1e2533; padding: 4px 0 8px; list-style: none; }
.mNavigation.typeSnb .depth3 > li { list-style: none; }
.mNavigation.typeSnb .depth3 > li > .link {
  display: block;
  padding: 6px 12px 6px 30px;
  color: #cadcf3;
  font-size: 12px;
  text-decoration: none;
  position: relative;
}
.mNavigation.typeSnb .depth3 > li > .link strong { font-weight: 400; }
.mNavigation.typeSnb .depth3 > li > .link:before {
  content: '•';
  position: absolute;
  top: 50%; left: 18px;
  transform: translateY(-50%);
  color: #60728b;
  font-size: 10px;
}
.mNavigation.typeSnb .depth3 > li > .link:hover { color: #fff; background: #25304a; }
.mNavigation.typeSnb .depth3 > li > .link.selected {
  color: #fff; background: #0c1119;
  border-left: 3px solid #3793e6;
  padding-left: 27px;
}

/* ===== content ===== */
#content { flex: 1; padding: 16px 20px; background: #fff; min-width: 0; }

/* titleArea — 컨텐츠 영역 좌우 끝까지 배경 채움 (negative margin 으로 #content padding 상쇄) */
.titleArea {
  background: #f7fafd;
  border-bottom: 1px solid #e2e6ec;
  margin: -16px -20px 16px !important;
  padding: 12px 20px 10px !important;    /* snbTitle border-bottom 과 정렬 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.titleArea .title h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #1a2640; margin: 0 0 4px; }
.titleArea .mPath { margin-left: auto; }
.titleArea .mPath ol { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0; margin: 0; list-style: none; font-size: 12px; color: #888; }
.titleArea .mPath ol li { list-style: none; position: relative; padding-right: 12px; }
.titleArea .mPath ol li:after { content: '›'; position: absolute; right: 0; top: 0; color: #bbb; }
.titleArea .mPath ol li:last-child:after { content: none; }
.titleArea .mPath ol li.now { color: #2660a0; font-weight: 600; }
.titleArea .mPath ol li a { color: #888; }

/* mState */
.mState {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 8px;
  font-size: 12px;
}
.mState .gLeft, .mState .gRight { display: flex; gap: 6px; align-items: center; }
.mState p.total { margin: 0; color: #555; }
.mState p.total strong,
.mState p.total .stateNum {
  color: #e85a00;
  font-weight: 700;
  font-size: 13px;
  margin: 0 2px;
  letter-spacing: -0.01em;
}

/* mSearchEngine */
.mSearchEngine { background: #fafbfc; border: 1px solid #e2e6ec; border-radius: 4px; margin-bottom: 12px; }
.mSearchEngine .search { padding: 10px; }
.mSearchEngine .search > table { width: 100%; border: 0; border-collapse: collapse; }
.mSearchEngine .search > table caption { display: none; }
.mSearchEngine .search > table th {
  text-align: left;
  background: #eef2f7;
  padding: 6px 9px 4px 18px;
  line-height: 1.8;
  font-weight: 600;
  font-size: 12px;
  color: #383d4d;
  vertical-align: middle;
  border-bottom: 1px solid #ebebeb;
}
.mSearchEngine .search > table td {
  padding: 6px 9px 4px 18px;
  line-height: 1.8;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
}
.mSearchEngine .button.gSolid.mini,
.mSearchEngine .button.mini { text-align: center; padding: 8px 0; background: #f5f7fa; }
.mSearchEngine .btnExpand, .mSearchEngine .btnFold { display: none; }

/* mCtrl typeHeader — gridTableArea 안의 통합 박스 정의 (line ~1819) 가 우선 */
.mCtrl.typeHeader .gLeft .txtLess { color: #8a8e95; }
.mCtrl.typeHeader .gSetting { display: flex; align-items: center; padding-left: 8px; border-left: 1px solid #e2e6ec; }

/* ====================================================================
 * 버튼 디자인 시스템 — 4단계 위계 + 명확한 색상/크기 규칙
 *
 *   .btnNormal  - 일반/취소/삭제/행 액션      (흰색,    28px) ← 가장 약함
 *   .btnCtrl    - 보조 액션 (등록/추가)         (네이비,  24px)
 *   .btnEm      - 강조 보조 (비번 수정 등)      (네이비g, 28px)
 *   .btnSubmit  - 주 액션 (저장/확정/실행)     (네이비 채움, 44px) ← 가장 강함
 *   .btnEngine  - 검색 실행 (검색폼 사이드)     (파랑g,   stretch)
 *   .btnDanger  - 위험 액션 (삭제 강조)        (빨강,    28px)
 *   .btnReset   - 초기화                       (회색,    28px)
 *
 * 공통: border-radius:3px, font-size:12px, line-height:1, gap:4px (icon)
 * 크기 컨텍스트 (나란한 버튼 높이 불일치 금지 — 2026-06-05):
 *   기본(필터/그리드/타이틀) = 등급 기본 크기 / 액션 바(.mButton.gCenter) = 모두 44px / 모달 푸터 = 모두 34px
 * ==================================================================== */
.btnNormal, .btnCtrl, .btnReset, .btnSetMenu, .btnDanger, .btnEm, .btnSubmit, .btnEngine, .btnIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .12s, border-color .12s, color .12s;
}
.btnNormal span, .btnCtrl span, .btnReset span, .btnSetMenu span,
.btnDanger span, .btnEm span, .btnSubmit span, .btnEngine span {
  color: inherit; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
  white-space: nowrap;
}
/* span 안의 icon (em) 옆 공백 텍스트 — em 다음 텍스트가 한 줄로 가운데 정렬되도록 */
.btnNormal span > em, .btnCtrl span > em, .btnDanger span > em,
.btnEm span > em, .btnSubmit span > em {
  flex-shrink: 0;
}

/* 1) Normal — 일반/취소/삭제/행 액션 (24px 흰색) */
.btnNormal, .btnReset, .btnSetMenu {
  height: 24px; padding: 0 10px;
  border: 1px solid #c5cad3; background: #fff; color: #4a5566;
}
.btnNormal:hover, .btnReset:hover, .btnSetMenu:hover {
  border-color: #4a5a7d; color: #1d2640; background: #f5f7fa;
}

/* 2) Ctrl — 보조 액션 (24px 네이비 솔리드) */
.btnCtrl {
  height: 24px; padding: 0 14px;
  border: 1px solid #2c3a5a; background: #4a5a7d; color: #fff;
  font-weight: 600;
}
.btnCtrl:hover { background: #354466; }

/* 3) Em — 강조 보조 (28px 네이비 그라데이션) */
.btnEm {
  height: 28px; padding: 0 16px;
  border: 1px solid #2c3a5a;
  background: linear-gradient(180deg, #4a5a7d 0%, #2c3a5a 100%);
  color: #fff; font-weight: 600;
}
.btnEm:hover { background: linear-gradient(180deg, #56678c 0%, #354466 100%); }

/* 4) Submit — 주 액션 (44px 채움 네이비) — 폼 [저장]/중앙 실행 (버튼 일관성 2026-06-05) */
.btnSubmit {
  height: 44px; padding: 0 24px;
  min-width: 140px;
  border: 1px solid #1f4d8a;
  background: #1f4d8a;
  color: #fff; font-size: 13px; font-weight: 600;
}
.btnSubmit:hover { background: #173d6e; border-color: #173d6e; }
.btnSubmit:active { background: #12325c; border-color: #12325c; }

/* 5) Engine — 검색 실행 전용 (24px 파랑 그라데이션) */
.btnEngine {
  height: 24px; min-width: 70px; padding: 0 14px;
  border: 1px solid #2c5fa0;
  background: linear-gradient(180deg, #4a8acf 0%, #2c5fa0 100%);
  color: #fff; font-size: 12px; font-weight: 600;
}
.btnEngine:hover { background: linear-gradient(180deg, #5a9ad9 0%, #3670b0 100%); }

/* 6) Danger — 위험 액션 (24px 빨강) */
.btnDanger {
  height: 24px; padding: 0 14px;
  border: 1px solid #c0392b; background: #e74c3c; color: #fff;
  font-weight: 600;
}
.btnDanger:hover { background: #c0392b; }

/* 아이콘 정렬 보정 — 모든 버튼에서 일관 */
.btnNormal em, .btnCtrl em, .btnEm em, .btnSubmit em, .btnDanger em { display: inline-block; vertical-align: middle; }
/* icoXls — 대응 아이콘 에셋/스타일이 없어 항상 빈 요소. 버튼 span(inline-flex, gap:4px)에서
   문구 앞 빈 칸만 차지함. 엑셀 다운로드 버튼에 한해 숨김 — eExcelDownload(목록 inline),
   eExcelGo(다운로드 모달 xlsx/CSV), data-action="excelDown"(m-ctrl-header partial: 이력/로케이션).
   일괄수정·세팅파일·샘플받기 버튼은 대상 아님. 향후 실제 아이콘을 추가하면 이 규칙을 제거. */
.eExcelDownload em.icoXls,
.eExcelGo em.icoXls,
[data-action="excelDown"] em.icoXls { display: none; }
/* icoDel — pseudo-element 로 X 그리기 (currentColor 자동 적용) */
.icoDel {
  position: relative;
  width: 11px; height: 11px;
  display: inline-block;
  vertical-align: middle;
}
.icoDel::before,
.icoDel::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.icoDel::before { transform: translate(-50%, -50%) rotate(45deg); }
.icoDel::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* form fields */
.fSelect, .fText {
  height: 26px; padding: 2px 10px;
  border: 1px solid #d1d5db; background: #fff;
  font-family: inherit; font-size: 12px;
  border-radius: 2px;
  box-sizing: border-box;
}
/* select 의 native 화살표 우측 여백 — 화살표가 우측 끝에 너무 붙지 않도록 */
.fSelect {
  padding-right: 28px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%236b7d99'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  cursor: pointer;
}
.fText:focus, .fSelect:focus { outline: none; border-color: #3793e6; box-shadow: 0 0 0 2px rgba(55,147,230,.15); }
input[type="date"].fText { padding: 2px 10px; }
.fChk { vertical-align: middle; margin-right: 4px; }
.gLabel { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin-right: 8px; }

/* mBoard */
.gridTableArea { display: flex; flex-direction: column; }
.mGridTable { flex: 1; overflow: auto; }
.mBoard { width: 100%; overflow: auto; max-height: 70vh; border: 1px solid #e2e6ec; }
.mBoard > table { width: 100%; border-collapse: collapse; font-size: 12px; }
/* list 화면 (mGridTable) 에서만 가로 최소 너비 강제. 폼 mBoard.gSmall 은 popup 에서 줄어들어야 함 */
.mGridTable.mBoard > table { min-width: 1200px; }
.mBoard.gSmall { max-height: none; overflow: visible; }
.mBoard.gSmall > table { min-width: 0; }
.mBoard > table caption { display: none; }
.mBoard thead th {
  background: #eef2f7; border: 1px solid #d8dde6;
  padding: 6px 8px; text-align: left;
  font-weight: 600; font-size: 11px; color: #2c344b;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.mBoard tbody td { border: 1px solid #e2e6ec; padding: 5px 8px; vertical-align: middle; }
.mBoard tbody tr:hover td { background: #f7fafd; }
.mBoard tbody td.empty { padding: 60px 20px; text-align: center; color: #999; }

/* paging */
.mNav { margin-top: 12px; text-align: center; }
.mNav .paging { display: inline-flex; gap: 2px; }
.mNav .paging a {
  min-width: 28px; padding: 4px 8px;
  border: 1px solid #d1d5db; background: #fff;
  color: #383d4d; text-decoration: none; font-size: 12px;
  display: inline-block; text-align: center; border-radius: 2px;
}
.mNav .paging a.this { background: #3a486a; color: #fff; border-color: #2f3b59; font-weight: 600; }
.mNav .paging a:hover { background: #f5f7fa; }
.mNav .paging a.this:hover { background: #3a486a; }

/* footer */
#footer { position: static; padding: 8px 12px; text-align: center; font-size: 11px; color: #95a5be; background: #1e2533; }
#footer p { background: transparent !important; text-indent: 0 !important; width: auto !important; height: auto !important; color: #95a5be; }

/* badges */
.badge {
  display: inline-block; padding: 1px 6px; border-radius: 10px;
  font-size: 11px; background: #eee; color: #555;
  letter-spacing: -0.04em; font-weight: 500;
}
.badge-success { background: #dff5dd; color: #207520; }
.badge-warn    { background: #fff0c2; color: #8a6a00; }
.badge-danger  { background: #ffdcdc; color: #b62a2a; }
.badge-info    { background: #d6e7ff; color: #2660a0; }
.badge-muted   { background: #eee;    color: #777;    }
/* 레거시 WMS 사용자그룹 컬럼 — 파란 톤의 작은 라벨 (목록에서 좌측 정렬) */
.badge-tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 2px;
  border: 1px solid #b8d4ec;
  border-radius: 3px;
  background: #e8f1f9;
  color: #2461a0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* misc */
.tnum { font-feature-settings: 'tnum'; }

/* ===== Forms — 운영관리/기본관리 공통 ===== */
.alert {
  display: block; padding: 10px 14px; margin: 0 0 12px;
  border-radius: 3px; font-size: 12px;
}
.alert.alert-ok    { background: #e7f4e6; border: 1px solid #b6dab2; color: #2a7a3a; }
.alert.alert-error { background: #ffe5e5; border: 1px solid #ffb8b8; color: #a22020; }
.errMsg { display: inline-block; margin-left: 10px; color: #b62a2a; font-size: 11px; }
em.req  { font-style: normal; color: #b62a2a; margin-left: 2px; }
small   { color: #8c95a4; font-size: 11px; margin-left: 6px; }

.mBoard table th[scope="row"] {
  background: #f7fafd; padding: 10px 14px;
  font-weight: 600; color: #2c344b;
  text-align: left; vertical-align: middle;
  border-right: 1px solid #e2e6ec;
  border-bottom: 1px solid #eef0f3;
}
.mBoard table tbody td { padding: 8px 12px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }

/* ===== 메뉴 권한 트리 (staff-group-menu) ===== */
.menuAuthTree {
  border: 1px solid #e2e6ec; border-radius: 4px;
  padding: 12px 14px;
  background: #fff;
  margin: 0 0 12px;
}
.menuAuthSection { padding: 8px 0; border-bottom: 1px dashed #eef0f3; }
.menuAuthSection:last-child { border-bottom: 0; }
.menuAuthRow {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.menuAuthRow input[type="checkbox"] { margin: 0; }
.menuAuthRow.level-1 { font-size: 13px; color: #1a2640; }
.menuAuthRow.level-1 strong { font-weight: 700; color: #2660a0; }
.menuAuthRow.level-2 { padding-left: 22px; font-size: 12px; color: #2c344b; }
.menuAuthRow.level-2 .groupTitle { font-weight: 600; color: #2660a0; }
.menuAuthRow.level-3 { padding-left: 44px; font-size: 12px; color: #5b6473; }
.menuAuthRow code { font-size: 11px; color: #95a5be; background: transparent; padding: 0; }
.menuAuthChildren { padding-left: 4px; }
.menuAuthPages { padding-left: 0; }
.menuAuthSubGroup { padding: 4px 0; border-top: 1px dotted #f0f3f6; margin-top: 4px; }
.menuAuthSubGroup:first-child { border-top: 0; margin-top: 0; }

/* error / auth */
/* ===== 로그인 화면 — split-screen 리디자인 ===== */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(140% 120% at 100% 0%, #eef2fb 0%, #e6ebf4 46%, #dce2ee 100%);
}
.auth-grid {
  display: grid; grid-template-columns: 1.02fr 1fr;
  width: min(960px, 100%); min-height: 580px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(22,30,55,.32), 0 6px 16px rgba(22,30,55,.06);
}

/* 좌측 브랜드 패널 */
.auth-brand {
  position: relative; overflow: hidden; color: #fff;
  padding: 48px 46px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(18,24,44,.90) 0%, rgba(30,40,70,.50) 32%, rgba(30,40,70,.44) 60%, rgba(15,21,38,.93) 100%),
    url("/img/login-warehouse.jpg") center / cover no-repeat,
    #1c2540;
}
.auth-brand__logo { position: relative; z-index: 1; font-size: 32px; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 2px 16px rgba(0,0,0,.42); }
.auth-brand__logo span { font-weight: 400; opacity: .68; margin-left: 5px; }
.auth-brand__bottom { position: relative; z-index: 1; }
.auth-brand__tag { margin: 0; max-width: 20ch; font-size: 19px; line-height: 1.6; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.96); text-shadow: 0 1px 14px rgba(0,0,0,.46); }

/* 우측 폼 패널 */
.auth-form { display: flex; flex-direction: column; padding: 32px 46px 46px; }
.auth-form__top { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; margin-bottom: 6px; }
.auth-form__body { margin: auto 0; }
.auth-form__title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: #1d2333; }
.auth-form__lead { margin: 0 0 26px; color: #8a92a4; font-size: 13.5px; }

/* 폼 필드 */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12.5px; color: #3f4658; font-weight: 700; letter-spacing: -.01em; }
.field input {
  padding: 11px 13px; border: 1px solid #d4d9e3; border-radius: 9px; font-size: 14px; font-family: inherit;
  background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus { outline: none; border-color: #3a486a; background: #fff; box-shadow: 0 0 0 3px rgba(58,72,106,.13); }
.alert-error { padding: 9px 13px; background: #ffe9e9; border: 1px solid #f5c2c2; color: #b3261e; border-radius: 9px; font-size: 12.5px; margin-bottom: 16px; }
.btn.btn-primary {
  display: block; width: 100%; height: 46px; margin-top: 4px; background: #2c3a60; color: #fff; border: 0;
  border-radius: 10px; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
}
.btn.btn-primary:hover { background: #233052; }
.btn.btn-primary:active { transform: translateY(1px); }

/* 언어 전환 select — 국기(옵션 텍스트) + 언어명. 컴팩트 pill (입력창과 다른 결). */
.auth-lang__select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #46506a;
  background-color: #f2f4f9; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 30px 7px 12px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2346506a' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth-lang__select:hover { background-color: #e9edf5; }
.auth-lang__select:focus,
.auth-lang__select:focus-visible { outline: none; border-color: #3a486a; box-shadow: 0 0 0 3px rgba(58,72,106,.13); }

/* 반응형 — 좁은 화면: 브랜드 패널 숨김, 단일 컬럼 카드 */
@media (max-width: 760px) {
  .auth-grid { grid-template-columns: 1fr; width: min(440px, 100%); min-height: 0; }
  .auth-brand { display: none; }
  .auth-form { padding: 30px 28px 34px; }
}

/* ===== Dashboard Widgets ===== */
.mDashboard.widget {
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 4px;
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.mDashboard.widget .widgetHead {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef0f3;
}
.mDashboard.widget .widgetHead h3 {
  font-size: 13px; font-weight: 700;
  color: #1a2640;
  letter-spacing: -0.03em;
}
.mDashboard.widget.gHalf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; border: 0; background: transparent; }
.mDashboard.widget.gHalf > .column {
  background: #fff; border: 1px solid #e2e6ec; border-radius: 4px;
  padding: 14px 16px 16px;
}

/* mProcess — 4단계 파이프라인 */
.mProcess {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.mProcess .step {
  position: relative;
  list-style: none;
  text-align: center;
  padding: 16px 8px 14px;
  background: #f7fafd;
  border: 1px solid #e2e6ec;
  border-radius: 4px;
  transition: background .12s, border-color .12s, transform .12s;
}
.mProcess .step:hover { background: #fff; border-color: #b7cae0; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(20,40,80,.06); }
.mProcess .step + .step:before {
  content: '›';
  position: absolute;
  left: -12px; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px; color: #b7cae0; font-weight: 700;
  line-height: 1;
}
.mProcess .ico { font-size: 22px; line-height: 1; display: block; margin-bottom: 6px; }
.mProcess .title {
  display: block;
  font-size: 12px; color: #5b6473; font-weight: 600;
  margin-bottom: 6px; letter-spacing: -0.03em;
}
.mProcess .link {
  display: inline-block;
  font-size: 22px; font-weight: 800; color: #1a2640;
  text-decoration: none; letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
}
.mProcess .link:hover { color: #2660a0; text-decoration: none; }
.mProcess .step.total .link { color: #2c344b; }
.mProcess .step.plan  .link { color: #c47c00; }
.mProcess .step.ing   .link { color: #2660a0; }
.mProcess .step.done  .link { color: #2a7a3a; }

/* widget mTable */
.mDashboard.widget .mTable { margin: 0; }
.mDashboard.widget .mTable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mDashboard.widget .mTable caption { display: none; }
.mDashboard.widget .mTable th, .mDashboard.widget .mTable td { padding: 8px 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
.mDashboard.widget .mTable thead th { background: #f7fafd; font-weight: 700; color: #2c344b; font-size: 11px; letter-spacing: 0.02em; }
.mDashboard.widget .mTable tbody tr:hover td { background: #fafcfe; }
.mDashboard.widget .mTable td.empty { text-align: center; padding: 30px 10px; color: #95a5be; }

/* progressRow */
.progressRow { display: flex; align-items: center; gap: 8px; }
.progressBar {
  flex: 1; height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden;
  min-width: 80px;
}
.progressBar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4a8de0, #2660a0);
  border-radius: 4px;
  transition: width .3s;
}
.progressLabel { font-size: 11px; color: #5b6473; min-width: 80px; text-align: right; font-feature-settings: 'tnum'; }

/* barChart — 일별 입출고 (column 안 좌우 24px 여백, 폭 자연 stretch) */
.barChart {
  padding: 6px 24px 4px;
  margin: 0;
  max-width: 100%;
}
.barChart .bars {
  display: flex; align-items: flex-end; gap: 14px;
  height: 160px;
}
.barChart .bar {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: relative;
  min-width: 30px;
}
.barChart .labels {
  display: flex; gap: 12px;
  padding: 8px 0 4px;
}
.barChart .labels > span {
  flex: 1; text-align: center;
  font-size: 12px; color: #5b6473;
  font-feature-settings: 'tnum';
  min-width: 30px;
  white-space: nowrap;
}
.barChart .bar .count {
  font-size: 11px; color: #2660a0; font-weight: 700;
  margin-bottom: 2px;
  font-feature-settings: 'tnum';
}
.barChart .bar .fill {
  width: 100%;
  background: linear-gradient(180deg, #4a8de0, #2660a0);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .3s;
}
.barChart .bar .fill.out { background: linear-gradient(180deg, #6cb777, #2a7a3a); }
.barChart .empty { width: 100%; text-align: center; color: #95a5be; align-self: center; padding: 60px 0; }

/* topList */
.topList ol { list-style: none; padding: 0; margin: 0; }
.topList li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #eef0f3;
  font-size: 12px;
}
.topList li:last-child { border-bottom: 0; }
.topList .rank {
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important;
  min-width: 24px !important; max-width: 24px !important;
  min-height: 24px !important; max-height: 24px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important; flex-grow: 0 !important;
  background: #eef2f7; color: #5b6473;
  font-weight: 700; font-size: 11px;
  line-height: 1 !important;
  padding: 0 !important; margin: 0 !important;
  box-sizing: border-box;
}
.topList .rank-1 { background: #ffd75c !important; color: #6b4500 !important; }
.topList .rank-2 { background: #c6cdd6 !important; color: #2c344b !important; }
.topList .rank-3 { background: #e7b48d !important; color: #5a2e0a !important; }
.topList .name { flex: 1; color: #2c344b; font-weight: 500; }
.topList .value { color: #1a2640; font-weight: 700; }
.topList .empty { text-align: center; padding: 40px 0; color: #95a5be; }

/* card-grid (대시보드) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.card { background: #fff; border: 1px solid #e2e6ec; border-radius: 4px; padding: 14px; }
.stat-card .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.stat-card .value { font-size: 22px; font-weight: 700; color: #2c344b; letter-spacing: -0.02em; }
.dl { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; margin: 0; font-size: 12px; }
.dl dt { color: #777; font-weight: 500; }
.dl dd { margin: 0; }

/* page header (대시보드 외) */
.page-header { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #e2e6ec; }
.page-header h2 { font-size: 18px; font-weight: 700; margin: 0; color: #1a2640; letter-spacing: -0.03em; }
.page-header .subtitle { font-size: 12px; color: #888; margin-top: 2px; }
.page-header .subtitle strong { color: #2660a0; }

/* data-table (호환) */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th { background: #eef2f7; border: 1px solid #d8dde6; padding: 6px 8px; text-align: left; font-weight: 600; font-size: 11px; color: #2c344b; white-space: nowrap; }
.data-table tbody td { border: 1px solid #e2e6ec; padding: 5px 8px; vertical-align: middle; }
.data-table tbody tr:hover td { background: #f7fafd; }

/* 레거시 WMS 외부 이미지 의존 무력화 */
.icoSFIX, .icoMore, .icoColorChip, .icoDelayColor, .btnSFIX,
.icoUpdate, .icoLink, .icoDel, .icoResize, .icoSetLayout,
.btnHome .icoSFIX, .btnFavorite .icoSFIX {
  background-image: none !important;
}

/* ===== 레거시 .btnCover line-height:15 무력화 — 텍스트 영역이 본 박스 밖으로 늘어나는 원인 ===== */
.btnCover {
  line-height: 1 !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* ===== 레거시 .btnDashboard 외부 sprite + height:20 무력화 → 사이드바 풀폭 버튼 ===== */
#sidebar .myInfo .btnDashboard,
#sidebar .myInfo .btnDashboard span {
  display: block !important;
  height: auto !important;
  line-height: 1.3 !important;
  background: transparent !important;
  background-image: none !important;
  text-align: center !important;
  white-space: normal !important;
  left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
  font-size: 12px !important;
  color: inherit !important;
}
#sidebar .myInfo .btnDashboard {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  margin: 0 0 6px 0 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  color: #383d4d !important;
  cursor: pointer;
  font-family: inherit;
}
#sidebar .myInfo .btnDashboard:hover { background: #f5f7fa !important; border-color: #b4bbc3 !important; color: #1d5fa8 !important; text-decoration: none !important; }
#sidebar .myInfo .logoutForm { margin: 0 !important; padding: 0 !important; }
#sidebar .myInfo .logoutForm .btnDashboard { color: #b62a2a !important; border-color: #e8c2c2 !important; }
#sidebar .myInfo .logoutForm .btnDashboard:hover { background: #fff0f0 !important; color: #8a1f1f !important; border-color: #d68d8d !important; }

/* ===== 레거시 .mProcess li:before(74x68 박스) / li:after(arrow sprite) 무력화 ===== */
.WMS.mDashboard .mProcess li:before,
.WMS.mDashboard .mProcess li:after,
.WMS.mDashboard .mProcess.typeIcon li:before,
.WMS.mDashboard .mProcess.typeIcon li:after {
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  content: none !important;
  position: static !important;
}
/* 본 화살표 — 인접 li 갭 정중앙 (border-arrow 3px 굵기 유지 + 시각 중심 좌측 보정) */
.WMS.today-status .mProcess.typeIcon li + li:before {
  content: '' !important;
  position: absolute !important;
  left: -14px !important; top: 50% !important;
  width: 10px !important; height: 10px !important;
  border-top: 3px solid #95a5be !important;
  border-right: 3px solid #95a5be !important;
  border-left: 0 !important; border-bottom: 0 !important;
  transform: translate(calc(-50% - 3px), -50%) rotate(45deg) !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
  color: transparent !important;
}

/* ===== 섹션(위젯) 간 공백 확대 ===== */
.WMS.mDashboard { margin: 0 0 20px 0 !important; }
.WMS.mDashboard.gHalf { margin: 0 0 20px 0 !important; }

/* legacy btn-ghost / btn-sm */
.btn-ghost {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px;
  border: 1px solid #d1d5db; background: #fff;
  color: #383d4d; border-radius: 2px;
  font-size: 12px; cursor: pointer; text-decoration: none;
}
.btn-ghost:hover { background: #f5f7fa; text-decoration: none; }
.btn-sm, .btn-ghost.btn-sm { height: 22px; padding: 0 8px; font-size: 11px; }
.btn { background: #3a486a; color: #fff; border: 1px solid #2f3b59; height: 26px; padding: 0 12px; cursor: pointer; border-radius: 2px; font-size: 12px; }
.btn-danger { background: #d62a2a; color: #fff; border: 1px solid #b62a2a; }

/* code 인라인 */
code { font-family: ui-monospace, 'SF Mono', monospace; background: #f5f7fa; padding: 1px 6px; border-radius: 3px; font-size: 11px; color: #2c344b; }

/* ============================================================
   반응형 — 헤더 GNB / 사이드바 / 메가메뉴
   ============================================================ */

/* ≤ 1280px (laptop, small desktop) — GNB 항목 padding 축소 */
@media (max-width: 1280px) {
  .gnb .title { padding: 0 14px !important; font-size: 12px !important; }
  #header .utility .manualBtn { padding: 0 10px !important; }
}

/* ≤ 1024px (tablet landscape) — 사이드바 자동 접힘 + 메가메뉴 풀폭 */
@media (max-width: 1024px) {
  /* GNB padding 더 축소 */
  .gnb .title { padding: 0 10px !important; font-size: 12px !important; }

  /* 메가메뉴는 viewport 좌측부터 시작 (사이드바 우측 offset 해제) */
  #wrap.openSnb .gnb .gScroll { left: 0 !important; }
  /* 메가메뉴 컬럼 줄바꿈 */
  .gnb .gScroll .mNavigation.typeLayer { flex-wrap: wrap !important; }
  .gnb .gScroll .category { flex: 0 0 200px !important; }
}

/* 대시보드 위젯 — 모바일에서 1단 stack */
@media (max-width: 768px) {
  /* gHalf (입출고 진행 / 일별 차트 / 미출고+오피킹 TOP5) — 가로 2컬럼 → 세로 1단 */
  .WMS.mDashboard.gHalf {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .WMS.mDashboard.gHalf > div {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* mProcess.typeIcon 4단계 — 4컬럼 → 2x2 */
  .WMS.today-status .mProcess.typeIcon {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .WMS.today-status .mProcess.typeIcon li + li:before { content: none !important; } /* 2x2 에서 화살표 어색 → 숨김 */
  /* barChart gap 축소 */
  .barChart .bars { gap: 8px !important; }
  .barChart .labels { gap: 8px !important; }
  .barChart { padding: 6px 12px 4px !important; }
}

/* ≤ 768px (tablet portrait & mobile) — GNB 햄버거 드로어 모드 */
@media (max-width: 768px) {
  /* utility 매뉴얼 영역 숨김 */
  #header .utility .manualArea { display: none !important; }

  /* setLogin 우측 끝까지 밀착 — .utility/.gRight/.setLogin 우측 여백 모두 제거 (.mDropdown 만 ▾ 화살표 위해 우측 padding 유지) */
  #header .utility { padding: 0 !important; }
  #header .utility .gRight { margin-right: 0 !important; padding-right: 0 !important; }
  #header .utility .setLogin { margin-right: 0 !important; padding-right: 0 !important; border-right: 0 !important; }

  /* 헤더 메인 GNB 영역 자체 숨김 (햄버거 드로어로 대체) */
  #header .globalNav .navigation { display: none !important; }
  #header .globalNav { height: 44px !important; }
  .autoHeight #container { min-height: calc(100vh - 30px - 44px - 30px) !important; }

  /* 로고 폭 축소 */
  h1.logo { width: auto !important; min-width: 120px !important; padding: 0 12px !important; height: 44px !important; }
  h1.logo a .inner { font-size: 14px !important; }

  /* 사이드바 = 모바일 드로어 (햄버거 클릭으로 toggle) */
  #wrap.openSnb #sidebar {
    position: fixed !important;
    top: 30px !important; left: 0 !important; bottom: 0 !important;
    width: min(85vw, 320px) !important;
    z-index: 200;
    box-shadow: 4px 0 12px rgba(0,0,0,.2);
    overflow-y: auto !important;
    padding: 0 0 40px 0 !important;       /* 좌우 padding 제거 → mobileMenu 풀폭 */
  }
  #wrap:not(.openSnb) #sidebar { display: none !important; }

  /* 컨텍스트 영역(프로필/섹션 트리) 숨김 — 모바일은 mobileMenu 만 */
  #sidebar .myInfo, #sidebar .snb { display: none !important; }
  /* mobileMenu 좌우 풀폭 (원본 디자인은 그대로) */
  .mobileMenu { margin: 0 !important; border-top: 0 !important; padding: 0 !important; }

  /* 사이드바 열림 시 본문 어둡게 (백드롭) */
  #wrap.openSnb #container:before {
    content: '';
    position: fixed; top: 30px; left: 280px; right: 0; bottom: 0;
    background: rgba(20,25,40,.4);
    z-index: 150;
  }

  /* 컨텐츠 좌우 패딩 축소 */
  #content { padding: 12px 10px !important; }
  .titleArea { margin: -12px -10px 12px !important; padding: 12px 12px 10px !important; }

  /* 모바일 메뉴 표시 (.mobileMenu) */
  .mobileMenu { display: block !important; }
}

/* .mobileMenu — 사이드바 안 펼치는 전체 메뉴 (기본 숨김, 모바일에서만 표시) */
.mobileMenu { display: none; padding: 8px 0 16px; border-top: 1px solid #eef0f3; margin: 12px -12px 0; width: 100%; box-sizing: border-box; }
.mobileMenu > ul { list-style: none; padding: 0; margin: 0; width: 100%; box-sizing: border-box; }
.mobileMenu > ul > li { list-style: none; border-bottom: 1px solid #eef0f3; width: 100%; box-sizing: border-box; }
.mobileMenu > ul > li.single > a,
.mobileMenu .mmToggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  padding: 12px 16px; color: #1a2640;
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  user-select: none;
}
.mobileMenu > ul > li.single.is-current > a { background: #f0f5fa; color: #2660a0; }
.mobileMenu .mmArrow {
  font-style: normal; color: #95a5be; font-size: 11px;
  transition: transform .15s;
}
.mobileMenu .hasChildren.open .mmArrow { transform: rotate(180deg); }
.mobileMenu .mmSub { display: none; background: #f7fafd; padding: 6px 0 10px; }
.mobileMenu .hasChildren.open .mmSub { display: block; }
.mobileMenu .mmGroup {
  display: block; padding: 8px 18px 4px;
  font-size: 11px; font-weight: 700; color: #2660a0;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.mobileMenu .mmLink {
  display: block; padding: 8px 24px;
  color: #2c344b; font-size: 12px;
  text-decoration: none;
}
.mobileMenu .mmLink:hover { background: #eef2f7; color: #1d5fa8; text-decoration: none; }
.mobileMenu .mmLink.selected { background: #2660a0; color: #fff; font-weight: 600; }

/* ≤ 480px (phone) — 추가 압축 */
@media (max-width: 480px) {
  h1.logo { width: 56px !important; padding: 0 4px 0 10px !important; }
  h1.logo a .inner { font-size: 12px !important; letter-spacing: -0.06em !important; }
  #header .setLogin .mDropdown .department { display: none !important; }
  #header .setLogin .mDropdown { padding: 0 22px 0 8px !important; }
  .gnb .title { padding: 0 8px !important; font-size: 11px !important; }
}

/* ===== icoRequired — 레거시 WMS 의 "필수" 라벨 → 빨간 별표 (미디어쿼리 외부) ===== */
.icoRequired {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  vertical-align: middle;
  margin-left: 4px;
}
.icoRequired::before {
  content: '*';
  font-size: 14px;
  color: #e54040;
  font-weight: 700;
  line-height: 1;
}

/* ===== mSearchEngine — 레거시 WMS 검색폼 1:1 (모든 list 화면 공통) ===== */
.mSearchEngine {
  position: relative;
  margin: 0 0 10px;
  border: 1px solid #d8dde6;
  border-radius: 3px;
  background: #fafbfd;
}
.mSearchEngine.gHidden .search { display: none; }
.mSearchEngine.gHidden .eExpand::after { content: '검색 열기'; }
.mSearchEngine .search {
  display: flex;
  align-items: stretch;
  padding: 0;
}
/* form 으로 한 단계 감싼 경우도 같은 레이아웃 */
.mSearchEngine .search > form {
  display: flex;
  align-items: stretch;
  flex: 1;
  width: 100%;
}
.mSearchEngine .search > table,
.mSearchEngine .search > form > table {
  flex: 1;
  border-collapse: collapse;
  border: 0;
  background: #fff;
}
.mSearchEngine .search > form > .btnEngine,
.mSearchEngine .search > .btnEngine,
.mSearchEngine .search > .button.mini {
  align-self: center;
  margin: 8px 12px;
}
.mSearchEngine .search > form > .btnEngine,
.mSearchEngine .search > .btnEngine,
.mSearchEngine .search > .button.mini > .btnEngine {
  min-width: 80px;
  height: 28px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
}
/* form 이 mSearchEngine 자체인 경우 (재고관리/상품관리 inline fb 양식) */
form.mSearchEngine > .search { display: flex; align-items: stretch; }
form.mSearchEngine > .search > table { flex: 1; }
form.mSearchEngine > .search > .button.mini { align-self: center; margin: 8px 12px; }
.mSearchEngine .search table caption { display: none; }
.mSearchEngine .search table th,
.mSearchEngine .search table td {
  padding: 8px 12px;
  border: 1px solid #e2e6ec;
  font-size: 12px;
  vertical-align: middle;
}
.mSearchEngine .search table th {
  width: 130px;
  min-width: 130px;
  font-weight: 600;
  background: #f5f7fa;
  color: #1d2640;
  text-align: left;
  white-space: nowrap;
}
.mSearchEngine .search table td .fSelect,
.mSearchEngine .search table td .fText {
  vertical-align: middle;
}
.mSearchEngine .searchSide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-left: 1px solid #d8dde6;
  background: #f5f7fa;
  min-width: 120px;
}
/* .btnEngine — 디자인 시스템에 통합됨 (line ~1066) */
.mSearchEngine .btnExpand {
  position: absolute;
  right: 12px;
  top: -12px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid #d8dde6;
  border-radius: 11px;
  background: #fff;
  color: #6b7d99;
  font-size: 11px;
  cursor: pointer;
  z-index: 2;
}

/* ===== gridTableArea — 검색폼과 여백 + mCtrl.typeHeader 와 그리드 헤더 연결 ===== */
.mSearchEngine + .gridTableArea,
.mSearchEngine ~ .gridTableArea { margin-top: 24px; }
.gridTableArea .mState {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0 0 6px;
  font-size: 12px;
  color: #4a5566;
}
.gridTableArea .mState .gLeft .total strong { color: #e54040; font-weight: 700; }
.gridTableArea .mCtrl.typeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  margin: 0;
  border: 1px solid #b9c2d0;
  border-radius: 3px 3px 0 0;
  background: #f0f3f8;
}
/* mCtrl 의 border-bottom 1줄 = 그리드와의 얇은 구분 라인. 그리드 table 의 자체 top border 는 제거해 겹침 방지 */
.gridTableArea .mCtrl.typeHeader + .mGridTable.gridFixed > table,
.gridTableArea .mCtrl.typeHeader + .mGridTable > table {
  border-top: 0;
  border-radius: 0 0 3px 3px;
}
.gridTableArea .mCtrl.typeHeader {
  flex-wrap: wrap;
  row-gap: 6px;
}
.gridTableArea .mCtrl.typeHeader .gLeft,
.gridTableArea .mCtrl.typeHeader .gRight {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.gridTableArea .mCtrl.typeHeader .gLeft {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px;
}
/* 우측 (전체/신규 작업) — 좌측과 시각적 구분 */
.gridTableArea .mCtrl.typeHeader .gRight {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px dashed #c5cad3;
}
/* wrap 으로 우측이 별도 줄로 떨어진 경우 — 우측 정렬 + 좌측 border 제거 (필요 시) */
.gridTableArea .mCtrl.typeHeader .gRight:only-child { border-left: 0; padding-left: 0; }
.gridTableArea .mCtrl.typeHeader .eSelectedCount {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  margin-right: 4px;
  letter-spacing: -0.01em;
}
.gridTableArea .mCtrl.typeHeader .eSelectedCount.has-selection {
  color: #2a3a5d;
  font-weight: 700;
}
.gridTableArea .mCtrl.typeHeader + .mGridTable.gridFixed,
.gridTableArea .mCtrl.typeHeader + .mGridTable {
  border-radius: 0 0 3px 3px;
  border-top: 0;
}
.gridTableArea .mCtrl.typeHeader + .mGridTable.gridFixed > table thead th {
  border-top: 0;
}

/* ===== mGridTable.gridFixed — sticky thead + 외곽 1px border 통일 ===== */
.mGridTable.gridFixed {
  max-height: 70vh;
  overflow: auto;
  position: relative;
  border: 1px solid #b9c2d0;
  border-radius: 0 0 3px 3px;
  background: #fff;
}
/* legacy .autoHeight 의 flex:1 / height:100% 무효화 — 행이 적을 때 빈 공간 제거 */
body.autoHeight .gridTableArea .mGridTable.gridFixed,
.autoHeight .gridTableArea .mGridTable.gridFixed {
  flex: 0 0 auto;
  height: auto;
  display: block;
}
.mGridTable.gridFixed > table {
  table-layout: fixed;
  min-width: 1200px;
  border: 0;  /* 외곽은 컨테이너가 담당, 안쪽 셀 border 만 표시 */
}
.mGridTable.gridFixed > table caption { display: none; }
/* mCtrl 위쪽과 연결 시: 컨테이너 자체의 border-top 도 mCtrl border-bottom 과 겹치지 않도록 제거 */
.gridTableArea .mCtrl.typeHeader + .mGridTable.gridFixed { border-top: 0; }
.mGridTable.gridFixed > table thead th {
  position: sticky; top: 0; z-index: 5;
  background: #f0f3f8;
  font-weight: 700;
  color: #1d2640;
  /* sticky 시 cell border 가 스크롤로 가려지는 문제 — box-shadow 로 대체 */
  box-shadow: inset 0 -1px 0 #b9c2d0;
  border-bottom: 0;
  padding: 6px 6px;
  font-size: 12px;
  letter-spacing: -0.02em;
}
/* 2행 thead — JS 가 측정한 1행 높이만큼 top offset (default 30px 으로 fallback) */
.mGridTable.gridFixed > table thead tr:nth-child(2) th {
  top: var(--thead-row1-h, 30px);
  z-index: 4;
  box-shadow: inset 0 -2px 0 #b9c2d0;
}

/* ===== 컬럼 리사이저 (m-grid-resize.js 가 부착) ===== */
.mGridTable.gridFixed > table thead th { position: sticky; }
.mGridTable.gridFixed > table thead th > .resizer {
  position: absolute;
  top: 0;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  z-index: 6;
  display: block;
}
.mGridTable.gridFixed > table thead th > .resizer.right { right: 0; }
.mGridTable.gridFixed > table thead th > .resizer.left  { left: 0; }
.mGridTable.gridFixed > table thead th > .resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: #c5cad3;
  border-radius: 0;
  transition: background 120ms ease, height 120ms ease;
}
.mGridTable.gridFixed > table thead th > .resizer.right::after { right: 0; }
.mGridTable.gridFixed > table thead th > .resizer.left::after  { left: 0; }
.mGridTable.gridFixed > table thead th > .resizer:hover::after,
.mGridTable.gridFixed > table thead th > .resizer:active::after {
  background: #4a5a7d;
  width: 2px;
  height: 16px;
  margin-top: -8px;
}
body.isColResizing,
body.isColResizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.mGridTable.gridFixed > table tbody td {
  padding: 6px 8px;
  font-size: 12px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #e6eaf0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 체크박스/번호 등 컴팩트 셀 — 가운데 정렬 보장 */
.mGridTable.gridFixed > table thead th { text-align: center; }
.mGridTable.gridFixed > table tbody td input[type="checkbox"] {
  margin: 0 auto;
  display: block;
}
.mGridTable.gridFixed > table tbody td.tagCell {
  white-space: normal;
  line-height: 1.8;
}
.mGridTable.gridFixed > table tbody td.tagCell .badge-tag { margin: 1px 1px; }
.mGridTable.gridFixed > table tbody tr:hover td { background: #f7fafd; }

/* 빈 결과 td.empty — legacy wms.css 의 .autoHeight .gridTableArea .empty 는 div 자리표시자용
   display:flex 라서 td 에 적용되면 table-cell 이 깨져 colspan 이 무력화됨 (print-single 등 커스텀 테이블). */
.autoHeight .gridTableArea td.empty {
  display: table-cell;
  height: auto;
  text-align: center;
}

/* 빈 결과 — table 외부 div 로 표시 (table-layout:fixed + colspan 한계 회피) */
.mGridTable.gridFixed > .gridEmpty {
  padding: 60px 20px;
  text-align: center;
  color: #8a93a3;
  font-size: 12px;
  background: #fafbfc;
  border-top: 1px solid #e6eaf0;
  position: sticky;
  left: 0;
}

/* ===== mPaginate — 레거시 WMS 페이지네이션 (화살표 아이콘만) ===== */
.mPaginate.typeTotal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 0;
  font-size: 12px;
}
.mPaginate.typeTotal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #d8dde6;
  border-radius: 3px;
  background: #fff;
  color: #6b7280;
  text-decoration: none;
  font-size: 0;
  position: relative;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.mPaginate.typeTotal a > span { display: none; }

/* 모든 화살표 — 작은 chevron (CSS border) */
.mPaginate.typeTotal .btnFirst,
.mPaginate.typeTotal .btnPrev,
.mPaginate.typeTotal .btnNext,
.mPaginate.typeTotal .btnLast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.mPaginate.typeTotal .btnPrev::before,
.mPaginate.typeTotal .btnNext::before,
.mPaginate.typeTotal .btnFirst::before,
.mPaginate.typeTotal .btnFirst::after,
.mPaginate.typeTotal .btnLast::before,
.mPaginate.typeTotal .btnLast::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

/* 단일 chevron */
.mPaginate.typeTotal .btnPrev::before { transform: rotate(-135deg); margin-left: 2px; }
.mPaginate.typeTotal .btnNext::before { transform: rotate(45deg);   margin-right: 2px; }

/* 이중 chevron (살짝 겹쳐서 ‹‹ ›› 처럼) */
.mPaginate.typeTotal .btnFirst::before,
.mPaginate.typeTotal .btnFirst::after { transform: rotate(-135deg); }
.mPaginate.typeTotal .btnFirst::before { margin-right: -2px; margin-left: 2px; }
.mPaginate.typeTotal .btnLast::before,
.mPaginate.typeTotal .btnLast::after  { transform: rotate(45deg); }
.mPaginate.typeTotal .btnLast::after   { margin-left: -2px; margin-right: 2px; }

.mPaginate.typeTotal a:hover {
  border-color: #4a5a7d;
  color: #1d2640;
  background: #f4f6fa;
}
.mPaginate.typeTotal a[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 숫자 페이지 버튼 — btnPage */
.mPaginate.typeTotal a.btnPage {
  width: auto;
  min-width: 24px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  color: #4a5566;
}
.mPaginate.typeTotal a.btnPage::before { content: none; }
.mPaginate.typeTotal a.btnPage > span { display: inline; }
.mPaginate.typeTotal a.btnPage.on {
  border-color: #2a3a5d;
  background: #2a3a5d;
  color: #fff;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}
.mPaginate.typeTotal a.btnPage.on:hover {
  background: #2a3a5d;
  color: #fff;
}

/* ===== .section — 레거시 WMS 의 폼 섹션 (mTitle + mBoard) 간격 ===== */
.section { margin: 0 0 20px; }
.section + .section { margin-top: 0; }
/* 모든 .mTitle (h2 양식) 일관 적용 — gRight 유무와 section 자식 여부 무관 */
.mTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid #d8dde6;
}
.headingArea .mTitle { border-bottom: 0; padding: 0; margin: 0; }
.section > .mTitle:first-child { margin-top: 0; }
.section .mBoard.gSmall + .mTitle { margin-top: 18px; }
.mTitle .gRight { margin-left: auto; font-size: 12px; color: #6c7a93; }
.mTitle .gRight .btnNormal { font-size: 12px; }
.mTitle .gRight .column.w150 { display: inline-flex; }
.mTitle h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: #1a2640;
  letter-spacing: -0.02em;
}

/* mBoard.gSmall — 레거시 WMS 폼 섹션 (border 없음) */
.mBoard.gSmall { border: 0; }

/* btnSubmit — 주 액션 공통 (44px 채움 네이비 — 버튼 일관성 통일 2026-06-05).
   기존: 레거시 WMS 양식 흰 배경 아웃라인 ↔ 화면별 채움 네이비 덧칠 혼재 → 채움 네이비를 베이스로 승격. */
.mButton a.btnSubmit, .mButton button.btnSubmit,
a.btnSubmit, button.btnSubmit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 140px !important;
  height: 44px !important;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
  background: #1f4d8a;
  border: 1px solid #1f4d8a;
  color: #fff;
}
a.btnSubmit:hover, button.btnSubmit:hover { background: #173d6e; border-color: #173d6e; color: #fff; }
a.btnSubmit:active, button.btnSubmit:active { background: #12325c; border-color: #12325c; }
a.btnSubmit > span, button.btnSubmit > span { color: inherit; }
/* 비활성 (예: 바코드출고 저장 대기) — 회색 무채움 */
a.btnSubmit.disabled, button.btnSubmit.disabled, .btnSubmit[disabled] {
  background: #eef0f4; border-color: #c5cad3; color: #9aa4b5;
  pointer-events: none; cursor: default;
}

/* a#eSave 페어 — 설정 페이지 폼 저장 버튼만 한정. (2026-06-08).
   .btnSubmit 글로벌 140×44 유지 + a#eSave 만 110×41 + 좌측 .btnCancel(반전) 페어.
   .eSaveBtn — 같은 사양을 id 없이 쓰는 유틸 클래스 (탭 내부 등 #eSave 중복 불가 컨텍스트, 2026-07-07). */
a.btnSubmit#eSave,
.mButton a.btnSubmit.eSaveBtn {
  min-width: 110px !important;
  height: 41px !important;
  padding: 0 20px;
}
/* btnCancel — a#eSave 반전 (흰 배경 + 네이비 보더/텍스트). a#eSave 좌측 페어 전용.
   동작: 저장 없이 종료 (popup → window.close, 비-popup → 목록 href 로 이동). */
.mButton a.btnCancel, .mButton button.btnCancel,
a.btnCancel, button.btnCancel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 110px !important;
  height: 41px !important;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #1f4d8a;
  color: #1f4d8a;
}
a.btnCancel:hover, button.btnCancel:hover { background: #eaf1fb; border-color: #173d6e; color: #173d6e; }
a.btnCancel:active, button.btnCancel:active { background: #d8e6f5; border-color: #12325c; color: #12325c; }
a.btnCancel > span, button.btnCancel > span { color: inherit; }
/* 페어 사이 gap — .btnCancel + a#eSave 인접 시 8px */
.mButton.gCenter .btnCancel + a.btnSubmit#eSave,
.mButton.gCenter a.btnSubmit#eSave + .btnCancel { margin-left: 8px; }

/* mButton.gCenter — 폼 하단 액션 영역 (검색 + 등록 등) */
.mButton.gCenter {
  text-align: center;
  padding: 16px 0;
}
.mButton.gCenter > * { margin: 0 4px; }
/* 액션 바 내 동거 버튼 높이 정렬 — btnSubmit(44px) 와 나란한 보조 버튼(닫기/취소 등)도 44px.
   (모달 푸터는 .prdModalDlg/dialog.modal 규칙이 34px 로 별도 정렬) */
.mButton.gCenter .btnNormal, .mButton.gCenter .btnReset, .mButton.gCenter .btnEm,
.mButton.gCenter .btnCtrl, .mButton.gCenter .btnDanger {
  height: 44px; min-width: 110px; padding: 0 24px; font-size: 13px;
}

/* ===== mBoard 테이블 — 레거시 WMS 의 표 디자인 1:1 (table border="1" 기본 outset 제거) ===== */
.mBoard table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid #b9c2d0;
  border-bottom: 1px solid #b9c2d0;
  background: #fff;
}
.mBoard table caption { display: none; }
.mBoard table th,
.mBoard table td {
  padding: 6px 12px;
  border: 1px solid #dfe3eb;
  vertical-align: middle;
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
  color: #1d1d1d;
}
.mBoard table tbody th {
  width: 200px;
  min-width: 180px;
  font-weight: 600;
  color: #1d2640;
  background: #f5f7fa;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mBoard.gSmall table th,
.mBoard.gSmall table td { padding: 5px 12px; }

/* 정보 수정 폼의 input 정렬 — th 옆 td 에 여백 일관 */
.mBoard table td .fText,
.mBoard table td .fSelect,
.mBoard table td .fFile {
  vertical-align: middle;
}

/* fFile (input[type=file]) — 브라우저 기본 파일 선택 버튼을 .btnNormal 과 동일한
   사이즈/폰트/색상으로 맞춤. 파일명 텍스트 부분은 동일 폰트 사이즈로 정렬.
   font-family: inherit → 페이지 폰트(dotum/돋움) 상속 (브라우저 기본 폰트 회귀 방지). */
.fFile {
  font-family: inherit;
  font-size: 12px; font-weight: 500; color: #4a5566; line-height: 1;
}
.fFile::file-selector-button {
  height: 24px; padding: 0 10px; margin-right: 8px;
  border: 1px solid #c5cad3; background: #fff; color: #4a5566;
  font-family: inherit;
  font-size: 12px; font-weight: 500; line-height: 1;
  border-radius: 3px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.fFile::file-selector-button:hover {
  border-color: #4a5a7d; color: #1d2640; background: #f5f7fa;
}
.mBoard table td .txtInfo {
  margin: 4px 0 0;
  font-size: 11px;
  color: #6b7d99;
  line-height: 1.5;
}
.mBoard table td p.txtInfo:first-child { margin-top: 0; }

/* 2컬럼 mBoard (나의 정보 등) — th 두 개일 때 width 일관 */
.mBoard table tbody tr > th:nth-child(3) { width: 160px; }

/* ===== Popup 모드 — window.open 으로 띄운 폼 화면 (사이드바/GNB 없이) ===== */
body#popup { background: #fff; margin: 0; padding: 0; }
#wrap.is-popup { padding-top: 0 !important; }
#wrap.is-popup #container { padding: 0 !important; min-height: 100vh !important; display: block !important; }
#wrap.is-popup #content { padding: 16px 20px !important; flex: 1 1 auto !important; }
#wrap.is-popup #footer { display: none !important; }
/* popup 내부 form / 그리드 영역에 안쪽 여백 */
#wrap.is-popup .section,
#wrap.is-popup .gridTableArea,
#wrap.is-popup form { margin-left: 0; margin-right: 0; }

/* 레거시 WMS popup — headingArea (큰 단일 제목, breadcrumb 없음) */
/* #content 의 좌우 padding 을 negative margin 으로 상쇄해서 viewport 가로 전체 차지 */
#wrap.is-popup .headingArea {
  margin: -16px -20px 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e2e2e2;
  background: #f8f8f8;
}
/* popup 의 첫 .section 의 mTitle 은 headingArea h1 과 중복 — 자동 숨김 */
#wrap.is-popup .section:first-of-type > .mTitle { display: none; }
#wrap.is-popup form + .section:first-of-type > .mTitle { display: none; }

/* popup 내부 폼 — viewport 전체 폭을 안 채우고 적당한 폭으로 가운데 정렬 */
#wrap.is-popup form,
#wrap.is-popup .section {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#wrap.is-popup .mBoard.gSmall { max-width: 100%; }
#wrap.is-popup .mBoard.gSmall table { width: 100%; table-layout: fixed; }
#wrap.is-popup .mBoard.gSmall td { word-break: break-word; }

/* 리스트형 팝업 (라벨인쇄 등 .mSearchEngine + 그리드) — 단순 폼 팝업의 800px 중앙정렬 제외.
   검색 폼/그리드를 일반 list 페이지처럼 전체 폭으로. */
#wrap.is-popup form.mSearchEngine { max-width: none; margin-left: 0; margin-right: 0; }
#wrap.is-popup .gridTableArea { max-width: none; margin-left: 0; margin-right: 0; }
/* 팝업은 창이 짧아 컬럼/필터 드롭다운이 gridTableArea overflow 에 잘림 →
   gridTableArea 만 overflow 해제(드롭다운 노출). .mGridTable 은 overflow:auto 유지해야
   sticky thead(헤더 고정)가 정상 동작하므로 건드리지 않는다. */
#wrap.is-popup .gridTableArea { overflow: visible; }
/* 팝업 그리드(gridFixed) 헤더 색상을 일반 list 페이지와 통일.
   legacy 의 #popup .mBoard thead th (background:#f5f4f4) 가 ID 셀렉터라 일반 규칙을 덮으므로,
   더 높은 특이도로 일반 헤더 색상(#f0f3f8/#1d2640/700)으로 되돌린다. */
#wrap.is-popup .mGridTable.gridFixed > table thead th {
  background: #f0f3f8;
  color: #1d2640;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* popup 의 폼 입력 — 페이지가 강제한 inline px 폭이라도 부모 td 를 넘지 않도록 cap */
#wrap.is-popup input.fText,
#wrap.is-popup textarea.fText,
#wrap.is-popup select.fSelect,
#wrap.is-popup .mSearchInputForm {
  max-width: 100%;
  box-sizing: border-box;
}
#wrap.is-popup .mButton.gCenter { max-width: 800px; margin-left: auto; margin-right: auto; }
#wrap.is-popup .headingArea .mTitle h1 {
  margin: 0;
  font-size: 15px; /* 페이지 타이틀(.titleArea h2=14px)과 균형 — 기존 18px 가 과하다는 사용자 피드백(2026-06-16) */
  font-weight: 700;
  color: #1d1d1d;
  letter-spacing: -0.04em;
  line-height: 1.3;
}
#wrap.is-popup .section { margin: 16px 20px; }
/* 팝업 모드 폼 그리드 — 모든 행 높이 36.67px 통일 (2026-06-08).
   tr.height 는 min-height 처럼 동작 → 단일 라인 행은 정확히 36.67px,
   줄바꿈 있는 행(textarea / 다중선택 mSearchInputForm / txtInfo 동반)은 콘텐츠 크기로 자연 확장. */
#wrap.is-popup .mBoard.gSmall table tr { height: 36.67px; }
#wrap.is-popup .mButton.gCenter { margin: 16px 20px 24px; text-align: center; }
/* 팝업 공통 푸터(partials/popup-footer.ejs) — 항상 뷰포트 중앙 정렬.
   위 .mButton.gCenter 의 max-width:800 + margin-left:20px 조합이 버튼을 좌측으로 쏠리게 함 → 무효화. */
#wrap.is-popup .mButton.gCenter.popupFooter { max-width: none; margin: 16px 0 24px; text-align: center; }

/* .btnSubmit / .btnEm — 위쪽 디자인 시스템에 통합됨 (line ~1066) */

/* .mButton.gCenter 안의 .gRight — 우측 정렬 */
.mButton.gCenter { position: relative; text-align: center; padding: 16px 0; }
.mButton.gCenter .gRight {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* mButton 안 모든 버튼 높이 통일 — btnSubmit 기준 36px */
.mButton a.btnNormal,
.mButton a.btnEm,
.mButton a.btnSubmit,
.mButton a.btnCtrl,
.mButton a.btnDanger,
.mButton button.btnNormal,
.mButton button.btnEm,
.mButton button.btnSubmit,
.mButton button.btnCtrl,
.mButton button.btnDanger {
  height: 36px;
  min-height: 36px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.mButton a > span,
.mButton button > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* 레거시 WMS 의 icoLink — 부서설정/직급설정 우측 화살표 */
.icoLink {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent currentColor;
  vertical-align: middle;
}

/* 레거시 WMS 의 txtWarn / txtEm */
.txtWarn { color: #e54040; }
.txtEm   { color: #1d8338; }

/* ===== mOpen 드롭다운 (레거시 WMS 1:1) — mCtrl 안의 메뉴 펼침 ===== */
.mOpen { position: relative; display: inline-block; }
/* icoLayer 공통 — 모달/레이어를 띄우는 버튼 표식 (▼ 화살표) */
em.icoLayer {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #5b6b85;
  vertical-align: middle;
}
.mOpen.isOpen .eOpenClick em.icoLayer {
  border-top: 0;
  border-bottom: 4px solid #5b6b85;
}
.mOpen .open {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 100;
  min-width: 160px;
  background: #fff;
  border: 1px solid #b9c2d0;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(20, 30, 60, .12);
  padding: 4px 0;
}
.mOpen .open .wrap { overflow: hidden; }
.mOpen .open ul.default { margin: 0; padding: 0; list-style: none; }
.mOpen .open ul.default > li { margin: 0; padding: 0; }
.mOpen .open ul.default > li > a {
  display: block;
  padding: 6px 14px;
  color: #1d2640;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease;
}
.mOpen .open ul.default > li > a:hover { background: #f0f3f8; }

/* mCtrl 안의 mOpen 은 inline 정렬 */
.mCtrl.typeHeader .gLeft .mOpen,
.mCtrl.typeHeader .gRight .mOpen { vertical-align: middle; }

/* 선택 타입 select */
.mCtrl.typeHeader .gLeft .eSelectType {
  height: 24px;
  font-size: 12px;
  margin-right: 4px;
  min-width: 140px;
}

/* ctrl-header 나란한 버튼 높이 통일 (24px baseline) — 나란한 버튼 높이 불일치 금지(2026-06-05).
   이 컨텍스트의 기준은 eSelectType/btnNormal 24px. primary(.btnEm)의 전역 28px 이 여기서만 튀어
   [판매처 등록](btnNormal 24px) 과 [연동 계정 등록](btnEm 28px) 이 어긋나므로 24px 로 정렬.
   가로 padding(.btnEm 16px)은 유지 — 강조 버튼의 폭감은 그대로. */
.mCtrl.typeHeader .gLeft .btnEm,
.mCtrl.typeHeader .gRight .btnEm { height: 24px; }

/* ===== 컬럼 클릭 정렬 (m-grid sortable) ===== */
.mGridTable.gridFixed > table thead th.sortable {
  cursor: pointer;
  user-select: none;
  position: sticky; top: 0;
}
.mGridTable.gridFixed > table thead th.sortable:hover { background: #e8eef8; }
.mGridTable.gridFixed > table thead th.sortable a.thSort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.mGridTable.gridFixed > table thead th.sortable em.sortIco {
  display: inline-block;
  width: 8px;
  height: 10px;
  position: relative;
  opacity: 0.35;
}
.mGridTable.gridFixed > table thead th.sortable em.sortIco::before,
.mGridTable.gridFixed > table thead th.sortable em.sortIco::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.mGridTable.gridFixed > table thead th.sortable em.sortIco::before {
  top: 0;
  margin-left: -3px;
  border-bottom: 4px solid currentColor;
}
.mGridTable.gridFixed > table thead th.sortable em.sortIco::after {
  bottom: 0;
  margin-left: -3px;
  border-top: 4px solid currentColor;
}
.mGridTable.gridFixed > table thead th.sort-asc em.sortIco { opacity: 1; }
.mGridTable.gridFixed > table thead th.sort-asc em.sortIco::after { display: none; }
.mGridTable.gridFixed > table thead th.sort-desc em.sortIco { opacity: 1; }
.mGridTable.gridFixed > table thead th.sort-desc em.sortIco::before { display: none; }

/* ===== confirmDialog (core/modal.js) — <dialog class="modal"> 공통 스타일 =====
   원래 components.css 에 있었으나 어느 페이지도 로드하지 않아 무스타일(버튼 "취소확인" 붙음)이었음.
   실제 로드되는 app-override 로 이식(구체값). 팝업 포함 전 페이지 confirmDialog 일관 적용. */
dialog.modal {
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  color: #1d2640;
  width: min(460px, 92vw);
  max-height: 90vh;
  box-shadow: 0 16px 48px rgba(20, 33, 61, 0.28);
}
dialog.modal::backdrop { background: rgba(18, 26, 45, 0.45); }
dialog.modal .modal-header { padding: 14px 20px; border-bottom: 1px solid #e6eaf0; }
dialog.modal .modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
dialog.modal .modal-body { padding: 20px; font-size: 13px; line-height: 1.6; color: #2a3344; }
dialog.modal .modal-body p { white-space: pre-line; }
dialog.modal .modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #e6eaf0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
dialog.modal .modal-footer button {
  min-width: 76px; height: 34px; padding: 0 16px;
  border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
dialog.modal .modal-footer .btn-ghost { width: auto; background: #fff; border: 1px solid #c2ccdb; color: #41506b; }
dialog.modal .modal-footer .btn-ghost:hover { background: #f1f4f9; }
dialog.modal .modal-footer .btn.btn-primary { width: auto; height: 34px; background: #1f4d8a; border: 1px solid #1f4d8a; color: #fff; }
dialog.modal .modal-footer .btn.btn-primary:hover { background: #173d6e; }
dialog.modal .modal-footer .btn-danger { width: auto; background: #d62a2a; border: 1px solid #b62a2a; color: #fff; }
dialog.modal .modal-footer .btn-danger:hover { background: #c01f1f; }

/* ===== 공통 modal (.modalBackdrop / .modalCard) ===== */
.modalBackdrop {
  position: fixed; inset: 0;
  background: rgba(20, 30, 60, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.modalBackdrop.isOpen { display: flex; }
.modalBackdrop .modalCard {
  background: #fff;
  border-radius: 6px;
  width: min(680px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(20, 30, 60, .35);
}
.modalBackdrop .modalHead {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e6ec;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modalBackdrop .modalHead h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1d2640;
}
.modalBackdrop .modalClose {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}
.modalBackdrop .modalClose:hover { color: #1d2640; }
.modalBackdrop .modalBody {
  padding: 18px 20px;
  overflow: auto;
  flex: 1 1 auto;
}

/* ===== 로케이션 관계도 트리 ===== */
.famTree { font-size: 13px; line-height: 1.6; }
.famTree .famNode {
  background: #f5f7fa;
  border: 1px solid #dfe3eb;
  border-radius: 4px;
  padding: 10px 14px;
}
.famTree .famSelf {
  background: #fff4e6;
  border-color: #f5b870;
}
.famTree .famLabel {
  display: inline-block;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  margin-right: 8px;
  background: #fff;
  border: 1px solid #d8dde6;
  padding: 1px 6px;
  border-radius: 3px;
}
.famTree .meta { color: #6b7280; margin: 0 4px; }
.famTree .famArrow {
  text-align: center;
  color: #b9c2d0;
  margin: 6px 0;
}
.famTree .famChildren ul {
  margin: 8px 0 0; padding: 0 0 0 16px;
}
.famTree .famChildren li {
  list-style: '• ';
  padding: 2px 0;
}
.famTree .famEmpty {
  text-align: center;
  color: #888;
  padding: 24px 0;
}

/* ===== 상품정보 셀 (prd-info cell kind) ===== */
.prdInfoItem {
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prdInfoList { padding-left: 24px; margin: 0; }
.prdInfoList > li {
  padding: 4px 0;
  border-bottom: 1px dashed #eef0f3;
  font-size: 12.5px;
}
.prdInfoList > li:last-child { border-bottom: 0; }
.prdInfoList .prdInfoIdx { color: #6b7280; margin-right: 4px; }

/* ===== eArrayDelete X 버튼 (레거시 WMS 양식 1:1) ===== */
.eArrayDelete.btnNormal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px !important;
  min-width: 18px;
  height: 18px !important;
  min-height: 18px !important;
  vertical-align: middle;
  margin-left: 4px;
}
.eArrayDelete.btnNormal em.icoDel {
  width: 8px;
  height: 8px;
  position: relative;
  display: inline-block;
}
.eArrayDelete.btnNormal em.icoDel::before,
.eArrayDelete.btnNormal em.icoDel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background: #e85a00;
  transform-origin: center;
}
.eArrayDelete.btnNormal em.icoDel::before { transform: translate(-50%, -50%) rotate(45deg); }
.eArrayDelete.btnNormal em.icoDel::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.eArrayDelete.btnNormal:hover em.icoDel::before,
.eArrayDelete.btnNormal:hover em.icoDel::after { background: #d33; }

/* ============ loc 일괄 액션 모달 (loc-list-actions.js) — 레거시 WMS LocCodeDefineLayer 양식 ============ */
.mActionModal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.42);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.mActionModalBox {
  background: #fff; padding: 22px 22px 18px; border-radius: 6px;
  width: 400px; box-shadow: 0 12px 44px rgba(0,0,0,0.18);
  border: 1px solid #d8d8d8;
}
.mActionModalTitle {
  margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #333;
  padding-bottom: 10px; border-bottom: 1px solid #ececec;
}
.mActionModalBody #mInput { width: 100%; }
.mActionModalBody select.fSelect,
.mActionModalBody input.fText  { width: 100%; box-sizing: border-box; }
/* 액션 모달 푸터 — [취소][적용/추가] 페어. 중앙 정렬 + 동일 사이즈/페어 색상.
   취소(.btnNormal) = 반전(흰 배경 + 네이비 보더/텍스트), 적용/추가(.btnEm) = 채움 네이비.
   사이즈는 80×30 — 폼 하단 저장(110×41)보다 작고, .btnNormal 24px / .btnEm 28px 의 불일치도 해소. */
.mActionModalFoot {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.mActionModalFoot .btnNormal,
.mActionModalFoot .btnEm {
  min-width: 80px;
  height: 30px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  margin: 0;
}
/* 취소(.btnNormal) — 페어 반전: 흰 배경 + 네이비 보더/텍스트 */
.mActionModalFoot .btnNormal {
  background: #fff;
  border-color: #1f4d8a;
  color: #1f4d8a;
}
.mActionModalFoot .btnNormal:hover {
  background: #eaf1fb;
  border-color: #173d6e;
  color: #173d6e;
}
/* 적용/추가(.btnEm) — 채움 네이비 (그라데이션 → 단색으로 페어 시각 통일) */
.mActionModalFoot .btnEm {
  background: #1f4d8a;
  border-color: #1f4d8a;
  color: #fff;
}
.mActionModalFoot .btnEm:hover {
  background: #173d6e;
  border-color: #173d6e;
}
.mActionModalTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mActionModalTable th {
  text-align: left; padding: 6px 8px; width: 36%;
  font-weight: 600; color: #444; vertical-align: middle;
}
.mActionModalTable td { padding: 6px 4px; }
.mActionModalTable td .fText  { width: 62%; box-sizing: border-box; }
.mActionModalTable td .fSelect { width: 34%; box-sizing: border-box; }

/* ============ 폼 에러 박스 (loc-new / loc-detail UNIQUE 친절화) ============ */
.formErrorBox {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 4px;
  color: #991b1b;
  font-size: 13px;
}
.formErrorBox ul { margin: 0; padding-left: 18px; list-style: disc; }
.formErrorBox li { line-height: 1.6; }

/* ===== datePreset 버튼 — 동일 사이즈 + active 시각 ===== */
.mSearchEngine a.btnNormal.datePreset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 24px;
  margin: 0 2px;
  padding: 0 8px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
}
.mSearchEngine a.btnNormal.datePreset.on {
  background: #1f4d8a;
  color: #fff;
  border-color: #1f4d8a;
}
.mSearchEngine a.btnNormal.datePreset.on > span {
  color: #fff;
}

/* ===== 빈 메시지 — 표 안/밖 모두 중앙 정렬 ===== */
.mGridTable td.empty,
.mGridTable tbody tr td.empty {
  text-align: center !important;
  padding: 40px 16px !important;
  background: #fafbfd;
  color: #6c7a93;
  font-size: 13px;
}
.mGridTable p.empty {
  text-align: center;
  padding: 24px 16px;
  margin: 0;
  background: #fafbfd;
  color: #6c7a93;
  font-size: 13px;
}

/* 팝업/새창으로 열리는 메뉴 마커 (sidebar/GNB 공용, 2026-06-13) */
.menuOpenMark {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  font-size: 10px; font-style: normal; line-height: 14px;
  color: #6b7d99; background: #eef1f6; border: 1px solid #d5dbe6; border-radius: 2px;
  vertical-align: 1px;
}
.snbLink.selected .menuOpenMark { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }

/* popup 안의 공통 list 모듈(m-filter) — 폼 800px 제한 해제 (이력 등 list popup, 2026-06-13) */
#wrap.is-popup .mSearchEngine form { max-width: none; }