* { font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 12px; box-sizing: border-box; margin: 0; padding: 0; }
body { background: #f0f0f0; min-width: 1400px; overflow-x: auto; }

/* ── GNB ── */
#hd { background: #1a4a8a; position: sticky; top: 0; z-index: 1000; }
.gnb-inner { padding: 0 20px; }
.menubar { display: flex; flex-wrap: nowrap; align-items: center; background: #2563a8; padding: 0; min-height: 36px; position: relative; z-index: 200; overflow: visible; }
.menu-item { position: relative; flex-shrink: 0; }
.menu-item > a { color: #cce0ff; padding: 8px 14px; border-radius: 3px; text-decoration: none; white-space: nowrap; font-weight: bold; display: flex; align-items: center; gap: 4px; line-height: 36px; }
.menu-item > a:hover, .menu-item > a.active { background: #4fdfd0; color: #000; }
.menu-item > a.has-sub::after { content: " ▾"; font-size: 9px; opacity: 0.8; }
.submenu { display: none; position: absolute; top: 100%; left: 0; background: #1a3a6a; min-width: 140px; border-radius: 0 0 4px 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); z-index: 1001; }
.menu-item:hover .submenu { display: block; }
.submenu a { display: block; color: #cce0ff; padding: 8px 16px; text-decoration: none; white-space: nowrap; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.submenu a:last-child { border-bottom: none; }
.submenu a:hover { background: #4fdfd0; color: #000; }
.menubar-login { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #cce0ff; padding: 0 14px; white-space: nowrap; }
.menubar-login a { color: #cce0ff; text-decoration: none; font-size: 12px; font-weight: bold; padding: 4px 8px; border-radius: 3px; }
.menubar-login a:hover { background: #4fdfd0; color: #000; }

/* ── 로더 ── */
#loader { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.5); z-index: 9998; align-items: center; justify-content: center; }
#loader.show { display: flex; }
#loader::after { content: ''; width: 36px; height: 36px; border: 4px solid #ccc; border-top-color: #3366cc; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 토스트 ── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 20px; border-radius: 6px; font-size: 12px; z-index: 9999; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; }
#toast.err  { background: #cc3333; }

/* ══════════════════════════════════════════════
   전체 레이아웃 : 좌(40%) | 우(60%)
══════════════════════════════════════════════ */
.inv-wrap {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 36px);
  overflow: hidden;
  background: #f0f0f0;
}

.inv-left {
  width: 40%;
  flex-shrink: 0;
  border-right: 2px solid #c8c8c8;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inv-right {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 패널 헤더 ── */
.inv-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
  min-height: 28px;   /* 양쪽 헤더 높이 고정 → 같은 수직 위치 */
}
.inv-header-green { background: #1d6f42; color: #fff; }
.inv-header-blue  { background: #3366cc; color: #fff; }

/* 헤더 우측 배지 (대기n건 / 총n건) */
.inv-header-badge {
  font-size: 11px;
  font-weight: normal;
  opacity: 0.88;
  white-space: nowrap;
}

/* ── 툴바 ── */
.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #f4f8ff;
  border-bottom: 1px solid #dde8ff;
  flex-shrink: 0;
  gap: 4px;
  flex-wrap: wrap;
}
.inv-toolbar-left  { display: flex; align-items: center; gap: 4px; }
.inv-toolbar-right { display: flex; align-items: center; gap: 4px; }
.inv-toolbar-sep   { width: 1px; height: 18px; background: #ccc; margin: 0 2px; }

/* ── 버튼 공통 ── */
.btn { padding: 4px 10px; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: bold; color: #fff; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-green      { background: #1d6f42; } .btn-green:hover:not(:disabled)      { background: #155e36; }
.btn-blue       { background: #3366cc; } .btn-blue:hover:not(:disabled)       { background: #2255bb; }
.btn-gray       { background: #888; }    .btn-gray:hover:not(:disabled)       { background: #666; }
.btn-sm         { padding: 3px 8px; font-size: 11px; }
.inv-btn-orange   { background: #d97706; color: #fff; } .inv-btn-orange:hover   { background: #b45309; }
.inv-btn-red      { background: #a00;    color: #fff; } .inv-btn-red:hover      { background: #800; }
.inv-btn-darkgreen { background: #1d6f42; color: #fff; } .inv-btn-darkgreen:hover { background: #155e36; }
.inv-btn-navy     { background: #2563a8; color: #fff; } .inv-btn-navy:hover     { background: #1a4a8a; }
.inv-btn-gray2    { background: #6b7280; color: #fff; } .inv-btn-gray2:hover    { background: #4b5563; }

/* ══════════════════════════════════════════════
   좌측 : 입력행 + 복사행 테이블
══════════════════════════════════════════════ */
.inv-left-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* ── 인라인 테이블 공통 ── */
table.inv-inline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
  min-width: 700px;
}
table.inv-inline-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
table.inv-inline-table th {
  background: #3366cc;
  color: #fff;
  padding: 5px 4px;
  border: 1px solid #2255aa;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
table.inv-inline-table td {
  padding: 3px 4px;
  border: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* 입력행 tbody — 노란 배경 */
#inv-input-body tr { background: #fffde7; }
#inv-input-body td { border-color: #f0e060; }

/* 복사/대기행 tbody — 연초록 배경 */
#inv-copy-body tr { background: #f0fff4; }
#inv-copy-body tr:hover td { background: #d4f5e5 !important; }

/* ══════════════════════════════════════════════
   우측 : 리스트 테이블
══════════════════════════════════════════════ */
/* DB 데이터행 tbody */
#inv-list-body tr:nth-child(even) { background: #f8f8ff; }
#inv-list-body tr:hover td { background: #e8f4ff !important; }
#inv-list-body tr.inv-selected td { background: #fff9e0 !important; }

/* 우측 리스트 테이블 헤더 색상 (파란 계열) */
table.inv-list-table th {
  background: #1a50a0;
  border-color: #1040a0;
}

/* 인라인 편집 input/select 공통 */
.inv-inline-table td input[type=text],
.inv-inline-table td input[type=date],
.inv-inline-table td select {
  width: 100%;
  height: 24px;
  border: 1px solid #bbb;
  border-radius: 2px;
  padding: 0 4px;
  font-size: 11px;
  background: #fff;
  box-sizing: border-box;
}
.inv-inline-table td input:focus,
.inv-inline-table td select:focus { border-color: #1d6f42; outline: none; }

/* 입력행 전용 필드 */
#inv-input-body td input[type=text],
#inv-input-body td input[type=date],
#inv-input-body td select { background: #fffff0; border-color: #c8b400; }

/* 복사행 전용 필드 */
#inv-copy-body td input[type=text],
#inv-copy-body td input[type=date],
#inv-copy-body td select { background: #f0fff4; border-color: #80c080; }

/* 입력행 리셋 버튼 */
.inv-row-reset-btn {
  width: 22px; height: 22px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #f5f5f5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #666;
  padding: 0;
}
.inv-row-reset-btn:hover { background: #e0e0e0; color: #333; }

/* 빈 상태 */
.inv-empty { text-align: center; padding: 24px; color: #bbb; }
.inv-empty i { font-size: 20px; display: block; margin-bottom: 6px; }

/* ── 우측 : 검색바 ── */
.inv-search-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #e8f0ff;
  border-bottom: 1px solid #b0c8ef;
  flex-shrink: 0;
  flex-wrap: nowrap;   /* 한 줄 고정 */
  overflow-x: auto;
}
.inv-search-label { font-size: 11px; font-weight: bold; color: #3366cc; white-space: nowrap; }
.inv-search-tilde { color: #666; font-weight: bold; }
.inv-search-divider { width: 1px; height: 20px; background: #b0c8ef; margin: 0 2px; }
.inv-search-row input[type=text],
.inv-search-row input[type=date],
.inv-search-row select {
  height: 24px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 0 6px;
  font-size: 12px;
  background: #fff;
}
.inv-search-row input:focus,
.inv-search-row select:focus { border-color: #3366cc; outline: none; }

/* ── 우측 : 리스트 본문 ── */
.inv-right-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* ── 페이지네이션 ── */
.inv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
  background: #fff;
}
.inv-page-btn { padding: 3px 9px; border: 1px solid #aaa; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; }
.inv-page-btn.active { background: #3366cc; color: #fff; border-color: #3366cc; }
.inv-page-btn:hover:not(.active):not(:disabled) { background: #e8f4ff; }
.inv-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-page-info { font-size: 11px; color: #666; padding: 0 6px; }

/* ══════════════════════════════════════════════
   모델명 커스텀 드롭다운 (_ModelPicker)
══════════════════════════════════════════════ */

/* TD 내 래퍼 */
.mp-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* 표시용 readonly input */
.mp-display {
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 1px solid #bbb;
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 0 4px;
  font-size: 11px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-display:focus { outline: none; border-color: #3366cc; }

/* 토글 버튼 (▼) */
.mp-btn {
  flex-shrink: 0;
  width: 22px;
  height: 24px;
  border: 1px solid #bbb;
  border-radius: 0 2px 2px 0;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 9px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.mp-btn:hover { background: #dde8ff; border-color: #3366cc; color: #3366cc; }

/* 입력행 컨텍스트 색상 */
#inv-input-body td .mp-display { background: #fffff0; border-color: #c8b400; }
#inv-input-body td .mp-btn     { background: #f5f0c0; border-color: #c8b400; }

/* 복사행 컨텍스트 색상 */
#inv-copy-body td .mp-display  { background: #f0fff4; border-color: #80c080; }
#inv-copy-body td .mp-btn      { background: #d0f0d8; border-color: #80c080; }

/* 패널 (position:fixed 오버레이) */
.mp-panel {
  display: none;
  position: fixed;
  z-index: 9990;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  overflow: hidden;
  min-width: 160px;
}

/* 패널 내 검색창 */
.mp-search-wrap {
  padding: 5px 6px 4px;
  border-bottom: 1px solid #e0e0e0;
  background: #f5f8ff;
}
.mp-search {
  width: 100%;
  height: 24px;
  border: 1px solid #aac;
  border-radius: 3px;
  padding: 0 7px;
  font-size: 11px;
  box-sizing: border-box;
  outline: none;
}
.mp-search:focus { border-color: #3366cc; }

/* 패널 내 리스트 */
.mp-list {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  overflow-y: auto;
  max-height: 200px;
}
.mp-list li {
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #f0f0f0;
}
.mp-list li:last-child { border-bottom: none; }
.mp-list li:hover     { background: #e8f4ff; color: #1a3a8a; }
.mp-list li.mp-active { background: #dde8ff; font-weight: bold; color: #1a3a8a; }
.mp-list li.mp-empty  { color: #aaa; cursor: default; text-align: center; padding: 10px; }

/* ══════════════════════════════════════════════
   검색바 ModelPicker 전용 스타일
══════════════════════════════════════════════ */

/* 검색바 내 mp-wrap */
.inv-search-row .mp-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
/* 검색바 모델 표시 input */
.mp-search-display {
  width: 80px;
  height: 24px;
  border: 1px solid #aaa;
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 0 5px;
  font-size: 12px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-search-display:focus { outline: none; border-color: #3366cc; }
/* 검색바 ▼ 버튼 — 높이를 검색행 input과 동일하게 */
.inv-search-row .mp-btn {
  height: 24px;
  width: 20px;
  border: 1px solid #aaa;
  border-radius: 0 2px 2px 0;
  background: #f0f0f0;
  font-size: 9px;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.inv-search-row .mp-btn:hover { background: #dde8ff; border-color: #3366cc; color: #3366cc; }

/* ══════════════════════════════════════════════
   컬럼 리사이즈 핸들
══════════════════════════════════════════════ */

/* th 내부에 relative 위치 기반으로 핸들 표시 */
th.inv-resizable {
  position: relative;
  overflow: visible;
}
/* 드래그 핸들 — th 우측 2px 세로 바 */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  display: block;
}
.col-resizer:hover,
.col-resizer:active {
  background: rgba(255,255,255,0.45);
}

/* ══════════════════════════════════════════════
   입고리스트 읽기모드 / 편집모드 행 스타일
══════════════════════════════════════════════ */

/* 읽기모드 행 — 텍스트 셀 */
#inv-list-body tr.inv-list-read td.inv-rd {
  padding: 4px 6px;
  font-size: 11px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 읽기모드 행 hover */
#inv-list-body tr.inv-list-read:hover td { background: #e8f4ff !important; }

/* 편집모드 행 — 연노란 배경으로 강조 */
#inv-list-body tr.inv-list-edit td { background: #fffde7 !important; }
#inv-list-body tr.inv-list-edit:hover td { background: #fff9c4 !important; }

/* 관리 컬럼 버튼 간격 */
#inv-list-body td .inv-btn-navy,
#inv-list-body td .inv-btn-red,
#inv-list-body td .btn-green,
#inv-list-body td .inv-btn-gray2 {
  padding: 2px 6px;
  font-size: 10px;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════
   일괄업로드 확인 모달
══════════════════════════════════════════════ */

/* 오버레이 */
.inv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 모달 박스 */
.inv-modal-box {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  width: 860px;
  max-width: 96vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 헤더 */
.inv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dde;
  font-size: 14px;
  font-weight: 700;
  color: #1d3a1d;
  background: #f4faf4;
  flex-shrink: 0;
}
.inv-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0 4px;
}
.inv-modal-close:hover { color: #333; }

/* 바디 */
.inv-modal-body {
  padding: 14px 16px 8px;
  overflow-y: auto;
  flex: 1;
}

/* 요약 뱃지 */
.inv-bulk-summary {
  margin-bottom: 10px;
  font-size: 13px;
  color: #1d6f42;
  font-weight: 600;
}
.inv-bulk-summary .inv-bulk-warn {
  color: #b94a00;
  margin-left: 10px;
  font-weight: 500;
}

/* 미리보기 테이블 */
.inv-bulk-preview-wrap {
  overflow-x: auto;
  border: 1px solid #c8e6c9;
  border-radius: 4px;
  max-height: 360px;
  overflow-y: auto;
}
.inv-bulk-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}
.inv-bulk-preview-table thead th {
  background: #e8f5e9;
  color: #1b5e20;
  padding: 5px 8px;
  border-bottom: 1px solid #a5d6a7;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.inv-bulk-preview-table tbody tr:nth-child(even) td { background: #f9fdf9; }
.inv-bulk-preview-table tbody tr:hover td { background: #e8f5e9 !important; }
.inv-bulk-preview-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #e0f0e0;
  color: #222;
}

/* 미리보기 "외 N건" 안내 */
.inv-bulk-more {
  margin-top: 7px;
  font-size: 11px;
  color: #888;
  text-align: right;
}

/* 푸터 */
.inv-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #dde;
  background: #fafafa;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   정렬 가능 헤더
══════════════════════════════════════════════ */
#inv-list-table thead th.inv-sortable {
  cursor: pointer;
  user-select: none;
}
#inv-list-table thead th.inv-sortable:hover {
  background: #d0d8f0;
}
.sort-icon {
  font-size: 10px;
  margin-left: 2px;
  color: #3366cc;
}

/* ══════════════════════════════════════════════
   status_date (상태변경일) 컬럼
══════════════════════════════════════════════ */
.inv-th-status-date {
  color: #4a7aaa;
  white-space: nowrap;
}
/* 읽기모드 — 자동 기록된 날짜는 청록빛 */
.inv-td-status-date {
  color: #5a9aaa;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
/* 편집모드 date input */
.inv-f-status-date {
  width: 96px;
  font-size: 11px;
  color: #3a7a9a;
}