* { font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 12px; box-sizing: border-box; margin: 0; padding: 0; }
body { background: #1a1f2e; min-width: 900px; 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, .submenu a.active { 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(0,0,0,.45); z-index: 9998; align-items: center; justify-content: center; }
#loader.show { display: flex; }
#loader::after { content: ''; width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2); border-top-color: #4fdfd0; 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: 10px 24px; border-radius: 8px; font-size: 12px; z-index: 9999; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
#toast.show { opacity: 1; }
#toast.err  { background: #c0392b; }

/* ══════════════════════════════════════════════
   페이지 레이아웃
══════════════════════════════════════════════ */
.ivs-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 36px);
  background: #1a1f2e;
  overflow: hidden;
}

/* ── 툴바 ── */
.ivs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e2840 0%, #243050 100%);
  border-bottom: 2px solid #2d4a8a;
  padding: 7px 16px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.ivs-title {
  font-size: 15px;
  font-weight: 700;
  color: #7eb8ff;
  margin-right: 4px;
  letter-spacing: 0.5px;
}

/* ── 년/월 셀렉트 ── */
#ivs-year, #ivs-month {
  height: 30px;
  border: 1px solid #3a5a9a;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: #c0d8ff;
  background: #1a2a4a;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
#ivs-year:focus, #ivs-month:focus { border-color: #4fdfd0; }
#ivs-year  { width: 82px; }
#ivs-month { width: 66px; }

/* ── 네비 버튼 ── */
.ivs-nav-btn {
  width: 30px; height: 30px;
  border: 1px solid #3a5a9a;
  border-radius: 4px;
  background: #1a2a4a;
  color: #7eb8ff;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.ivs-nav-btn:hover { background: #2a4a8a; border-color: #4fdfd0; color: #4fdfd0; }

.ivs-today-btn {
  height: 30px;
  border: 1px solid #4fdfd0;
  border-radius: 4px;
  background: transparent;
  color: #4fdfd0;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all .2s;
}
.ivs-today-btn:hover { background: #4fdfd0; color: #1a1f2e; }

/* ── 뷰 버튼 그룹 ── */
.ivs-view-group {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
  border: 1px solid #3a5a9a;
  border-radius: 4px;
  overflow: hidden;
}
.ivs-view-btn {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid #3a5a9a;
  background: #1a2a4a;
  color: #8aa8d8;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .2s;
}
.ivs-view-btn:last-child { border-right: none; }
.ivs-view-btn:hover { background: #2a3a6a; color: #c0d8ff; }
.ivs-view-btn.active {
  background: linear-gradient(135deg, #2563a8, #1a4a8a);
  color: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.ivs-view-btn.active-weekly {
  background: linear-gradient(135deg, #5a2a8a, #3a1a6a);
  color: #fff;
}
.ivs-view-btn.active-monthly {
  background: linear-gradient(135deg, #7a2a2a, #5a1a1a);
  color: #fff;
}

/* ── 툴바 우측 정보 ── */
.ivs-toolbar-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5a7aaa;
  border-left: 1px solid #2d4a6a;
  padding-left: 12px;
  white-space: nowrap;
}
.ivs-toolbar-info i { color: #3a6aaa; margin-right: 2px; }
.ivs-view-badge {
  background: rgba(79,223,208,0.15);
  border: 1px solid rgba(79,223,208,0.3);
  color: #4fdfd0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
}

/* ══════════════════════════════════════════════
   테이블 영역
══════════════════════════════════════════════ */
.ivs-table-wrap {
  flex: 1;
  overflow: auto;
  background: #1e2438;
  margin: 8px;
  border: 1px solid #2d3d6a;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* 스크롤바 스타일 */
.ivs-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.ivs-table-wrap::-webkit-scrollbar-track { background: #1a1f2e; }
.ivs-table-wrap::-webkit-scrollbar-thumb { background: #3a5a8a; border-radius: 4px; }
.ivs-table-wrap::-webkit-scrollbar-thumb:hover { background: #4a7aaa; }

.ivs-empty {
  text-align: center;
  padding: 60px 24px;
  color: #4a6a9a;
  font-size: 13px;
  line-height: 2.2;
}
.ivs-empty i { font-size: 32px; display: block; margin-bottom: 12px; opacity: 0.5; }

/* ── 테이블 ── */
.ivs-table {
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}
.ivs-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}
.ivs-table th {
  background: #1a3060;
  color: #a0c0ff;
  padding: 6px 7px;
  border: 1px solid #0e2050;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  line-height: 1.4;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ivs-table td {
  padding: 4px 7px;
  border: 1px solid #263050;
  text-align: center;
  white-space: nowrap;
  color: #c0d0f0;
}

/* ══════════════════════════════════════════════
   고정 컬럼 6개 — sticky
   구분(58) / No(38) / 제조사(80) / 모델명(140) / 이월수량(62) / 당월입고(62)
══════════════════════════════════════════════ */
.ivs-th-fix, .ivs-td-fix { position: sticky; z-index: 5; }
.ivs-table thead .ivs-th-fix { z-index: 21; }

.ivs-th-category, .ivs-td-category { left: 0;    min-width: 58px;  max-width: 58px;  width: 58px; }
.ivs-th-no,       .ivs-td-no       { left: 58px; min-width: 38px;  max-width: 38px;  width: 38px; }
.ivs-th-manu,     .ivs-td-manu     { left: 96px; min-width: 80px;  max-width: 80px;  width: 80px; }
.ivs-th-model,    .ivs-td-model    { left: 176px; min-width: 140px; max-width: 140px; width: 140px; }
.ivs-th-carry,    .ivs-td-carry    { left: 316px; min-width: 62px; max-width: 62px;  width: 62px; }
.ivs-th-inbound,  .ivs-td-inbound  { left: 378px; min-width: 62px; max-width: 62px;  width: 62px; }

/* 고정 컬럼 헤더 배경 */
.ivs-th-category { background: #1a3060 !important; }
.ivs-th-no       { background: #1a3060 !important; }
.ivs-th-manu     { background: #1a3060 !important; }
.ivs-th-model    { background: #1a3060 !important; }

/* 고정 컬럼 데이터 배경 */
.ivs-td-fix { background: #1e2438; }

/* 이월수량 */
.ivs-th-carry  { background: #0d3d25 !important; border-color: #0a2e1c !important; }
.ivs-td-carry  { background: #0d2e1e !important; font-weight: bold; color: #4ade80; }

/* 당월입고 */
.ivs-th-inbound { background: #0d2260 !important; border-color: #091850 !important; }
.ivs-td-inbound { background: #0d1e4a !important; font-weight: bold; color: #60a0ff; }

/* 고정 컬럼 우측 그림자 */
.ivs-td-inbound { box-shadow: 3px 0 8px rgba(0,0,0,0.4); }
.ivs-th-inbound { box-shadow: 3px 0 8px rgba(0,0,0,0.4); }

/* ══════════════════════════════════════════════
   날짜/주차 가변 컬럼
══════════════════════════════════════════════ */

/* 날짜별 그룹 헤더 */
.ivs-th-week-grp {
  background: #252a45 !important;
  border-color: #1a1f35 !important;
  font-size: 11px;
  color: #8090c0 !important;
}
.ivs-fold-hint {
  font-size: 9px;
  font-weight: normal;
  opacity: 0.6;
  display: inline;
}

/* 날짜 헤더 */
.ivs-th-day {
  background: #1e2840 !important;
  border-color: #182030 !important;
  min-width: 34px;
  width: 34px;
  color: #8090c0 !important;
}
.ivs-th-sun { background: #3a1a1a !important; border-color: #2a1010 !important; color: #ff7070 !important; }
.ivs-th-sat { background: #0d2040 !important; border-color: #091830 !important; color: #60a0ff !important; }

/* 접힌 주차 헤더 */
.ivs-th-week-folded {
  background: #2a1a40 !important;
  border-color: #1e1030 !important;
  min-width: 52px;
  width: 52px;
  color: #b090ff !important;
}
.ivs-week-sum-label {
  font-size: 9px;
  opacity: 0.75;
  display: block;
  line-height: 1.2;
}

/* 더블클릭 가능 요소 */
.ivs-th-dblclick { cursor: pointer; }
.ivs-th-dblclick:hover { filter: brightness(1.3); }
.ivs-td-dblclick { cursor: pointer; }

/* 날짜 데이터 셀 */
.ivs-td-day  { min-width: 34px; width: 34px; color: #4a5a8a; background: #1a1f30 !important; }
.ivs-td-sun  { background: #1e1218 !important; color: #a05050 !important; }
.ivs-td-sat  { background: #121828 !important; color: #4a70b0 !important; }
.ivs-td-has-out { background: #2a2000 !important; color: #ffd060 !important; font-weight: bold; }

/* 접힌 주차 데이터 셀 */
.ivs-td-week-folded {
  background: #1e1230 !important;
  min-width: 52px;
  width: 52px;
}
.ivs-td-weeksum { color: #c090ff !important; font-weight: bold; }

/* ══════════════════════════════════════════════
   당월출고 / 현재수량 컬럼
══════════════════════════════════════════════ */
.ivs-th-out {
  background: #3a0e0e !important;
  border-color: #2a0808 !important;
  min-width: 62px;
  width: 62px;
  color: #ff9090 !important;
}
.ivs-td-out {
  background: #1e0a0a !important;
  min-width: 62px;
  width: 62px;
  font-weight: bold;
  color: #ff6060 !important;
}
.ivs-td-has-out-val { color: #ff4040 !important; }

.ivs-th-cur {
  background: #0d3020 !important;
  border-color: #082018 !important;
  min-width: 62px;
  width: 62px;
  color: #60ff90 !important;
}
.ivs-td-cur {
  background: #0a1e14 !important;
  min-width: 62px;
  width: 62px;
  font-weight: bold;
  color: #4ade80 !important;
}
.ivs-td-zero { color: #ff4040 !important; }

/* ── 행 스타일 ── */
.ivs-row td { transition: background .1s; }
.ivs-row:nth-child(even) td { background: #1c2235 !important; }
.ivs-row:nth-child(even) .ivs-td-carry   { background: #0a2418 !important; }
.ivs-row:nth-child(even) .ivs-td-inbound { background: #0a1838 !important; }
.ivs-row:nth-child(even) .ivs-td-out     { background: #180808 !important; }
.ivs-row:nth-child(even) .ivs-td-cur     { background: #081810 !important; }
.ivs-row:nth-child(even) .ivs-td-fix     { background: #1c2235 !important; }
.ivs-row:nth-child(even) .ivs-td-day     { background: #181c30 !important; }
.ivs-row:nth-child(even) .ivs-td-week-folded { background: #180e28 !important; }

.ivs-row:hover td                  { background: #243060 !important; }
.ivs-row:hover .ivs-td-carry       { background: #1a4a30 !important; }
.ivs-row:hover .ivs-td-inbound     { background: #1a3060 !important; }
.ivs-row:hover .ivs-td-fix         { background: #243060 !important; }

/* 구분/No/제조사/모델명 셀 */
.ivs-td-category { font-size: 11px; color: #607090; border-right: 2px solid #2a3a6a !important; padding: 4px 8px; }
.ivs-td-no       { color: #506080; font-size: 11px; }
.ivs-td-manu     { text-align: left; color: #80a8e0; padding-left: 8px; font-size: 11px; }
.ivs-td-model    { text-align: left; font-weight: bold; color: #90b8ff; padding-left: 8px; border-right: 2px solid #2a3a6a !important; }

/* ── 요약 정보 ── */
.ivs-summary {
  padding: 6px 16px;
  background: linear-gradient(135deg, #1a2040 0%, #1e2848 100%);
  border-top: 1px solid #2d3d6a;
  color: #8090c0;
  font-size: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
.ivs-sum-period { font-weight: bold; color: #7eb8ff; }
.ivs-sum-n      { color: #60a0ff; }
.ivs-sum-out    { color: #ff6060; }
.ivs-sum-cur    { color: #4ade80; }
.ivs-sum-mode   { color: #4a6a9a; font-size: 10px; margin-left: 8px; }
.ivs-sum-sep    { color: #2d3d5a; margin: 0 2px; }

/* ── 주간 구분선 ── */
.ivs-week-divider { border-left: 2px solid #2a3a6a !important; }

/* ══════════════════════════════════════════════
   재고 산출 기준 안내 패널 (툴바 ↔ 테이블 사이)
══════════════════════════════════════════════ */
.ivs-legend {
  flex-shrink: 0;
  background: linear-gradient(135deg, #131828 0%, #181f30 100%);
  border-bottom: 1px solid #1e2d50;
  padding: 7px 16px 8px;
  overflow: hidden;
}

.ivs-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: #4a6a9a;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.3px;
}
.ivs-legend-title i { color: #2d5a9a; font-size: 11px; }

.ivs-legend-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.ivs-legend-body::-webkit-scrollbar { height: 3px; }
.ivs-legend-body::-webkit-scrollbar-track { background: transparent; }
.ivs-legend-body::-webkit-scrollbar-thumb { background: #2a3a5a; border-radius: 2px; }

/* 그룹 */
.ivs-legend-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  padding: 0 14px 0 0;
}
.ivs-legend-group-label {
  font-size: 9px;
  font-weight: 700;
  color: #3a5a7a;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid #1e2d40;
}

/* 아이템 한 줄 */
.ivs-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ivs-legend-desc {
  font-size: 10px;
  color: #4a5a7a;
  line-height: 1.4;
}
.ivs-legend-desc em {
  font-style: normal;
  color: #3a6a5a;
}
.ivs-legend-desc b { font-weight: 700; }

/* 수직 구분선 */
.ivs-legend-divider {
  width: 1px;
  align-self: stretch;
  background: #1e2d45;
  margin: 0 14px;
  flex-shrink: 0;
}

/* 공식 행 */
.ivs-legend-formula { padding-right: 0; }
.ivs-legend-formula-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}
.ivs-formula-box {
  font-size: 11px;
  font-weight: 700;
  color: #8090c0;
  background: rgba(79,223,208,0.07);
  border: 1px solid rgba(79,223,208,0.2);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ivs-formula-eq {
  font-size: 13px;
  font-weight: 700;
  color: #3a5a7a;
  margin: 0 2px;
}
.ivs-formula-op {
  font-size: 13px;
  font-weight: 700;
  color: #3a5a7a;
  margin: 0 1px;
}
.ivs-formula-note {
  font-size: 10px;
  color: #3a4a6a;
  font-style: italic;
}
.ivs-formula-sub {
  font-size: 10px;
  color: #3a5060;
  line-height: 1.6;
  padding-left: 2px;
}
.ivs-formula-sub b { color: #4a7a9a; }

/* 배지 종류 */
.ivs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 36px;
  line-height: 1.5;
}
/* 출고 — 붉은 계열 */
.badge-outbound  { background: rgba(255,60,60,0.15);  border: 1px solid rgba(255,60,60,0.35);  color: #ff7070; }
/* 재고 — 초록 계열 */
.badge-instock   { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3);  color: #4ade80; }
/* 가출고 — 주황 계열 */
.badge-preout    { background: rgba(255,160,40,0.13); border: 1px solid rgba(255,160,40,0.35); color: #ffa040; }
/* 분실 — 노랑 계열 */
.badge-lost      { background: rgba(255,220,50,0.12); border: 1px solid rgba(255,220,50,0.3);  color: #ffd030; }
/* 반품 — 보라 계열 */
.badge-return    { background: rgba(180,100,255,0.13);border: 1px solid rgba(180,100,255,0.3); color: #c070ff; }
/* 폐기 — 회색 계열 */
.badge-discard   { background: rgba(120,130,150,0.15);border: 1px solid rgba(120,130,150,0.3); color: #8090a8; }
/* 자동 처리 — 청록 계열 */
.badge-auto      { background: rgba(79,223,208,0.12); border: 1px solid rgba(79,223,208,0.3);  color: #4fdfd0; min-width: 44px; }
/* 개통취소 */
.badge-cancel    { background: rgba(96,160,255,0.12); border: 1px solid rgba(96,160,255,0.3);  color: #60a0ff; min-width: 56px; }
/* 개통취소(中) */
.badge-canceling { background: rgba(255,140,60,0.13); border: 1px solid rgba(255,140,60,0.35); color: #ff9040; min-width: 76px; }
/* 회수완료 */
.badge-recovered { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3);  color: #4ade80; min-width: 56px; }

/* 인라인 색상 강조 */
.col-out    { color: #ff7070; }
.col-in     { color: #4ade80; }
.col-preout { color: #ffa040; }