@import url('fonts/pretendard.css');

:root {
  --sl-navy: #161d29;
  --sl-navy-2: #202938;
  --sl-accent: #3b82f6;
  --sl-accent-dark: #2563eb;
  --sl-border: #334155;
  --sl-border-strong: #475569;
  --sl-card-border: rgba(255, 255, 255, 0.08);
  --sl-text: #e2e8f0;
  --sl-text-soft: #94a3b8;
  --sl-radius: 10px;
  --sl-radius-sm: 6px;
  --sl-surface: #1e293b;
  --sl-surface-2: #263447;
  --sl-bg: #0f172a;
}
* { box-sizing: border-box; }
body {
  font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  color: var(--sl-text);
  background: var(--sl-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--sl-accent); }
.topbar {
  background: var(--sl-navy);
  color: white;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.topbar .brand { color: white; font-weight: bold; font-size: 22px; text-decoration: none; white-space: nowrap; flex: 0 0 auto; letter-spacing: 0.2px; }
.topbar nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  height: 100%;
}
.topbar nav a {
  color: #9aa4b2;
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: var(--sl-radius-sm);
  transition: background .12s, color .12s;
}
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.topbar nav a.active { color: #fff; background: rgba(255,255,255,0.1); font-weight: 600; }
.container { max-width: 1400px; margin: 0 auto; padding: 28px 24px; }
.container.wide { max-width: 98vw; }
h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: #f1f5f9; }
h2 { font-size: 19px; font-weight: 700; color: #f1f5f9; }
.hint { color: var(--sl-text-soft); margin-bottom: 16px; }
.back-link { display:inline-block; margin-bottom: 12px; color: var(--sl-accent); text-decoration:none; }
.back-link:hover { text-decoration: underline; }

.flash { background:#3a2f0a; border:1px solid #7a5f14; color:#fde68a; padding:10px 14px; margin-bottom:16px; border-radius:var(--sl-radius-sm); }

/* 공통 입력요소 기본 다크 스타일 - 개별 폼 클래스가 배경/글자색을 따로 안 정해둔 곳들을
   한번에 커버한다. 아래에서 클래스별로 더 구체적인 규칙이 나오면 그게 우선 적용된다. */
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], textarea, select {
  background: var(--sl-bg);
  color: var(--sl-text);
  border-color: var(--sl-border-strong);
}
input::placeholder, textarea::placeholder { color: #64748b; }

.rack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.rack-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  color: var(--sl-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.rack-card:hover { box-shadow: 0 6px 16px rgba(20,30,45,0.1); transform: translateY(-2px); border-color: var(--sl-border-strong); }
.rack-name { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.rack-meta { color: var(--sl-text-soft); font-size: 14px; }
.rack-stat { margin-top: 10px; font-size: 15px; }
.rack-amount { font-size: 18px; font-weight: 700; color: var(--sl-accent); margin-top: 4px; }

.close-month-form { display:flex; align-items:center; gap:12px; margin-top: 20px; }
.close-month-form input { padding:8px; font-size:16px; }

.btn {
  display: inline-block;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border-strong);
  padding: 9px 16px;
  border-radius: var(--sl-radius-sm);
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: var(--sl-text);
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--sl-surface-2); border-color: #64748b; }
.btn-primary { background: var(--sl-accent); color: white; border-color: var(--sl-accent); }
.btn-primary:hover { background: var(--sl-accent-dark); border-color: var(--sl-accent-dark); }
.btn-small { padding: 6px 10px; font-size: 13px; }

.rack-info-form { display:flex; gap: 16px; align-items:center; margin-bottom: 16px; flex-wrap: wrap; }
.rack-info-form input, .rack-info-form select {
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 38px;
  border: 1px solid var(--sl-border-strong);
  border-radius: 6px;
  box-sizing: border-box;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.rack-info-form select {
  background: var(--sl-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><polygon points='0,0 10,0 5,6' fill='%2394a3b8'/></svg>") no-repeat right 10px center;
  padding-right: 26px;
}
.rack-info-form label { display: flex; align-items: center; gap: 6px; height: 40px; }

.table-scroll { overflow-x: auto; }

.table-scroll {
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius);
  overflow: hidden;
}
.table-scroll .grid-table { border: none; }
.grid-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sl-surface);
  font-size: 16px;
}
.grid-table { table-layout: fixed; }
.grid-table th, .grid-table td { word-break: break-word; }
.grid-table td.cell-left, .grid-table th.cell-left { text-align: left; }
.grid-table td.cell-nowrap { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.grid-table.small { font-size: 14px; }
.grid-table th, .grid-table td {
  border: none;
  border-bottom: 1px solid var(--sl-border);
  padding: 9px 10px;
  text-align: center;
}
.grid-table th {
  background: var(--sl-surface-2); color: #cbd5e1; font-weight: 700; font-size: 0.88em;
  border-bottom: 1px solid var(--sl-border-strong);
}
.grid-table tbody tr:hover { background: var(--sl-surface-2); }
.grid-table input {
  width: 100%;
  height: 34px;
  padding: 0 6px;
  font-size: 16px;
  border: 1px solid var(--sl-border-strong);
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--sl-bg);
  color: var(--sl-text);
}
.grid-table th, .grid-table td { height: 44px; }
.grid-table tfoot td { font-weight: bold; background: var(--sl-surface-2); border-bottom: none; }

.toolbar { margin-top: 16px; display:flex; gap:12px; align-items:center; }
#save-status { color: #1f8f4f; font-weight: bold; }

.agg-filter { display:flex; align-items:center; gap:12px; margin-bottom: 12px; }
.agg-filter label { display:flex; align-items:center; gap:8px; font-size:15px; }
.agg-filter input { padding:8px 10px; font-size:15px; border:1px solid var(--sl-border-strong); border-radius:6px; width:260px; }

.search-form { display:flex; gap:12px; margin-bottom: 16px; }
.search-form input, .search-form select { padding:10px; font-size:16px; flex:1; max-width:320px; }

.master-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.master-card form { display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.master-card .subhead { font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0 0 6px; }
.master-split { display:flex; gap:20px; flex-wrap:wrap; }
.master-split > div { flex:1; min-width:280px; }
.master-step-label { font-weight: 700; color: var(--sl-accent); }

.btn-del { background:#3a1f1f; border:1px solid #7f3b3b; color:#fca5a5; border-radius:6px; padding:6px 10px; cursor:pointer; white-space: nowrap; }
.btn-del:hover { background:#4a2424; }

/* 렉 시각화 */
.page-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-title-row h1 { margin: 0; }
.visual-wrap { margin-bottom: 24px; overflow-x: auto; }
.visual-tier-row { margin-bottom: 18px; }
.visual-tier-label {
  font-weight: bold; font-size: 14px; color: #cbd5e1; margin-bottom: 8px;
}
.visual-tier-cells { display: grid; gap: 6px; }
.cell {
  position: relative;
  width: 100%; height: 84px; min-width: 0;
  border-radius: 8px; border: 2px solid var(--sl-border-strong);
  background: var(--sl-surface); color: #cbd5e1; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; padding: 18px 4px 4px; overflow: hidden; box-sizing: border-box;
  transition: transform .1s, box-shadow .1s;
}
.cell.filled { background: #1e3a5f; border-color: #3b7dd8; }
.cell.empty { color: #64748b; }
.cell:hover { box-shadow: 0 0 0 3px rgba(59,130,246,0.35); transform: translateY(-1px); }
.cell-loc { position: absolute; top: 4px; left: 6px; font-size: 10.5px; font-weight: 800; color: #94a3b8; line-height: 1; }
.cell.filled .cell-loc { color: #60a5fa; }
.cell-empty-mark { font-size: 14px; color: #475569; }
.cell-part {
  font-weight: bold; font-size: 12.5px; line-height: 1.15;
  word-break: break-all; max-width: 100%; text-align: center;
}
.cell-qty { font-size: 12px; color: #60a5fa; margin-top: 1px; font-weight: 700; }
.cell-lot-mini {
  font-size: 10px; color: #93c5fd; line-height: 1.1; margin-top: 1px;
  white-space: nowrap;
}

/* 전체 렉 한번에 보기 */
.rack-all-jump {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px;
  position: sticky; top: 0; background: var(--sl-surface); padding: 10px; border-radius: 8px;
  border: 1px solid var(--sl-border); z-index: 5;
}
.rack-all-jump-item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px; background: var(--sl-bg);
  border: 1px solid var(--sl-border-strong); color: #60a5fa; font-weight: bold; font-size: 13px;
  text-decoration: none;
}
.rack-all-jump-item:hover { background: var(--sl-surface-2); }
.rack-all-section {
  padding: 18px 0 26px; border-bottom: 1px dashed var(--sl-border); margin-bottom: 10px;
  scroll-margin-top: 60px;
}
.rack-all-section:last-child { border-bottom: none; }
.cell-detail {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 10px;
  padding: 18px; max-width: 420px;
}
.cell-detail.hidden { display: none; }

.badge {
  display: inline-block; background: #d9534f; color: white; border-radius: 10px;
  font-size: 12px; padding: 2px 8px; margin-left: 6px;
}
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { padding: 5px; font-size: 14px; }
.pending-form select[name="rack_code"] { width: 4.2em; }
.pending-form { row-gap: 4px; display: inline-flex; flex-wrap: nowrap; }
.pending-form > * { flex-shrink: 0; }
.shortage-cell { color: #fca5a5; font-weight: bold; background: #3a1f1f; }
.recommend-details { position: relative; display: inline-block; }
.recommend-details summary {
  cursor: pointer; list-style: none; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--sl-border-strong); border-radius: 4px; background: var(--sl-surface); color: var(--sl-text);
  white-space: nowrap; flex-shrink: 0;
}
.recommend-details summary::-webkit-details-marker { display: none; }
.recommend-details[open] summary { border-color: #3b82f6; }
.recommend-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  background: var(--sl-surface); border: 1px solid var(--sl-border-strong); border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); min-width: 240px; max-height: 240px;
  overflow-y: auto; padding: 4px; color: var(--sl-text);
}
.recommend-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px; margin: 0;
  border: none; background: none; cursor: pointer; font-size: 13px; border-radius: 4px;
  white-space: nowrap; color: var(--sl-text);
}
.recommend-menu button:hover { background: var(--sl-surface-2); }

/* .master-card form 은 원래 (버튼 하나짜리 업로드 폼처럼) 짧은 한 줄짜리 폼을 위해
   display:flex 로 되어있는데, 그러면 #ship-rows(여러 줄 쌓인 덩어리) 전체가 그냥
   "가로로 나열되는 아이템 하나"로 취급돼서, 뒤에 오는 "+행 추가"/"조회하기" 버튼이
   줄 밑으로 안 내려가고 마지막 입력줄 옆으로 붙어버렸다 (원본 파일에도 있던 문제).
   #ship-form 만 세로로 쌓이게 되돌려서 줄-버튼 순서가 항상 위->아래로 나오게 한다. */
#ship-form { display: block; }
/* #ship-form 을 block으로 바꾸면서(줄 정렬 버그 수정) #ship-rows가 카드 전체 폭까지
   늘어나버려서, flex:3인 품번 칸이 같이 늘어나 너무 길어 보이는 부작용이 생겼다.
   원래 느낌(품번/수량이 나란히 적당한 폭)으로 되돌리기 위해 폭 자체를 제한한다. */
#ship-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-width: 560px; }
.ship-row { display: flex; gap: 8px; align-items: center; }
.ship-row .ship-part { flex: 3; padding: 8px 10px; font-size: 15px; border: 1px solid var(--sl-border-strong); border-radius: 4px; min-width: 0; }
.ship-row .ship-qty { flex: 1; padding: 8px 10px; font-size: 15px; border: 1px solid var(--sl-border-strong); border-radius: 4px; min-width: 0; }
.ship-row .ship-row-remove { flex: 0 0 auto; }
.ship-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* 출하관리 출고지 선택 - 자유입력 datalist가 아니라 진짜 select라서 브라우저 기본
   크기 그대로 두면 너무 작았다(1차 수정). 그런데 이번엔 반대로 밑에 품번/수량 칸
   (.ship-part/.ship-qty, 15px/8px 10px)보다 눈에 띄게 커서 줄이 안 맞아 보였다.
   그래서 같은 크기로 맞춘다. */
.ship-destination-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #f1f5f9; }
.ship-destination-select {
  font-size: 15px;
  padding: 8px 10px;
  min-width: 280px;
  max-width: 100%;
  border: 1px solid var(--sl-border-strong);
  border-radius: 4px;
  background: var(--sl-bg);
  color: var(--sl-text);
}

/* 라벨(labels_pending) 페이지 상단 시작일/종료일 필터 - 브라우저 기본 크기(input[type=date])가
   너무 작다는 피드백. transactions.html에도 type="date" 입력칸이 따로 있어서 전체
   input[type="date"]에 적용하면 그쪽까지 영향이 가므로, 이 페이지 전용 클래스로만 크기를 키운다. */
.label-filter-label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; color: #f1f5f9; }
.label-filter-input {
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--sl-border-strong);
  border-radius: 4px;
  background: var(--sl-bg);
  color: var(--sl-text);
}

.tx-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; background: var(--sl-surface); padding: 20px; border-radius: 10px; border: 1px solid var(--sl-border); }
.tx-form label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.tx-form input, .tx-form select { padding: 10px; font-size: 16px; border: 1px solid var(--sl-border-strong); border-radius: 6px; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .topbar { flex-direction: column; align-items: flex-start; }
}

/* 전체 창고 시각화 */
.wh-summary {
  display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.wh-stat {
  background: var(--sl-surface); border: 1px solid var(--sl-border); color: var(--sl-text);
  border-radius: 12px; padding: 16px 22px; min-width: 160px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.wh-stat-label { font-size: 13px; color: var(--sl-text-soft); }
.wh-stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; color: #f1f5f9; }
.wh-stat-sub { font-size: 12px; color: #64748b; margin-top: 2px; }

.wh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.wh-tile {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 12px;
  padding: 16px; text-decoration: none; color: var(--sl-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.wh-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.4); }
.wh-tile-top { display: flex; align-items: center; gap: 8px; }
.wh-tile-icon { font-size: 20px; }
.wh-tile-name { font-weight: bold; font-size: 17px; }
.wh-gauge {
  position: relative; height: 70px; border-radius: 8px;
  background: var(--sl-bg); overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sl-border);
}
.wh-gauge-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #6fa4e8, #1f5fbf);
  transition: height .3s;
}
.wh-gauge-pct {
  position: relative; z-index: 1; font-weight: bold; font-size: 18px; color: #dbeafe;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.wh-tile-stats { font-size: 13px; color: #94a3b8; display: flex; justify-content: space-between; }
.wh-tile-amount { font-weight: bold; color: #60a5fa; }

/* 실제 창고 평면도 뷰 (종합 현황판) */
.fp-legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; color: #94a3b8; flex-wrap: wrap; }
.fp-legend-item { display: flex; align-items: center; gap: 6px; }
.fp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); }

/* 예전엔 이 박스가 오른쪽 사이드바랑 height:100%로 억지로 같은 높이가 되고, 안에서는
   justify-content:center로 가운데 정렬만 하고 있었다. 렉 타일은 크기가 고정이라 늘어난
   만큼이 전부 위아래 빈 여백으로 남아서 "비율이 안 맞아 보인다"는 문제가 있었다 - 이제는
   내용 크기에 맞게(auto) 자연스럽게 줄어들도록 둔다 (아래 .dash-main-grid의
   align-items:start와 짝을 이룬다).*/
.fp-outer { display: flex; justify-content: flex-start; }
.fp-wrap {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 16px;
  padding: 24px 18px; margin-bottom: 0;
  width: 100%; box-sizing: border-box;
}
.dash-floor-col { display: flex; }
.dash-floor-col .fp-outer { width: 100%; }
/* max-width로 한계를 둬서, 오른쪽 사이드바가 넓어져도 렉 타일들이 화면 끝까지 넓게
   퍼지지 않고 가운데로 모여있게(더 좌우로 짧아 보이게) 한다. */
.fp-diagram {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: 100%; max-width: 900px; margin: 0 auto; padding: 6px 6px 20px; box-sizing: border-box;
}
/* 클러스터 3묶음(6개 렉 + PET/Resin/이동/불량 존)을 한 줄에 다 펼치면, 타일 폭이 고정(px)이라
   .fp-diagram 폭이 좁아지는 화면(오른쪽 사이드바 430px를 뺀 나머지)에서는 다 안 들어가고
   오른쪽 "주요 품목별 재고 현황" 패널 위로 넘쳐서 겹쳐 보이는 문제가 있었다. 타일/간격을
   약간 줄여서 원래 의도했던 "한 줄에 3묶음" 레이아웃이 웬만한 화면 폭(1280px대 노트북
   포함)에서는 그대로 유지되게 하고, flex-wrap도 같이 남겨둬서 그래도 자리가 부족한
   더 좁은 화면에서는 세 번째 묶음이 다음 줄로 자연스럽게 내려가고 절대 옆 칸을
   침범하지 않게 한다(이중 안전장치). */
.fp-clusters { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; gap: 10px; row-gap: 20px; margin-bottom: 20px; }
.fp-cluster-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fp-cluster { display: flex; gap: 8px; padding: 10px; border: 1px dashed var(--sl-border-strong); border-radius: 12px; }
.fp-cluster-zones { display: flex; gap: 8px; }
.fp-col { display: flex; flex-direction: column; gap: 24px; }

/* 타일 폭은 그대로 두고 높이만 키워서, 가로로는 안 넓어지면서 세로로는 오른쪽
   사이드바(더 커진 글자/차트)와 바닥이 비슷하게 맞도록 한다. */
.fp-rack {
  width: 102px; height: 130px; border-radius: 10px; border: none;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform .12s, box-shadow .12s;
}
.fp-rack-code { font-weight: 800; font-size: 22px; line-height: 1.25; }
.fp-rack-pct { font-size: 16px; font-weight: 700; opacity: 0.9; }
.fp-rack-sub { font-size: 12px; font-weight: 600; opacity: 0.85; }

.fp-zone {
  width: 138px; height: 150px; border-radius: 12px; border: none;
  text-decoration: none; padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; box-sizing: border-box;
  transition: transform .12s, box-shadow .12s;
}
.fp-zone-icon { font-size: 24px; }
.fp-zone-label { font-weight: 800; font-size: 17px; }
.fp-zone-sub { font-size: 13px; font-weight: 700; opacity: 0.9; }
.fp-zone-sub2 { font-size: 11.5px; font-weight: 600; opacity: 0.8; }

.fp-front-row {
  text-align: center; font-size: 13px; color: #64748b; letter-spacing: 1px;
  border-top: 1px dashed var(--sl-border); padding-top: 14px;
}

/* 적재율 기준 색상 */
.fill-high { background: #EAF3DE; color: #173404; }
.fill-mid { background: #E6F1FB; color: #042C53; }
.fill-low { background: #FAEEDA; color: #412402; }
.fill-empty { background: #eceef0; color: #5f5e5a; }
.fp-dot.fill-high { background: #10b981; }
.fp-dot.fill-mid { background: #1d4ed8; }
.fp-dot.fill-low { background: #f59e0b; }
.fp-dot.fill-empty { background: #475569; }

/* 렉 상세화면 - 선입선출(FIFO) 우선 위치 하이라이트 (다크 테마 네온 프리미엄 디자인) */
.cell.fifo-priority,
.crate.fifo-priority {
  background: rgba(45, 30, 10, 0.9) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.65), inset 0 0 12px rgba(245, 158, 11, 0.25) !important;
}
.cell.fifo-priority .cell-loc { color: #fbbf24 !important; font-weight: 800 !important; }
.cell.fifo-priority .cell-part { color: #fef08a !important; font-weight: 900 !important; font-size: 13.5px !important; text-shadow: 0 0 8px rgba(254, 240, 138, 0.4) !important; }
.cell.fifo-priority .cell-box-calc { color: #fde047 !important; font-weight: 900 !important; }
.cell.fifo-priority .cell-qty { color: #ffffff !important; font-weight: 900 !important; }
.cell-fifo-badge {
  position: absolute; top: 4px; right: 5px; z-index: 2;
  display: inline-block; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff; font-size: 9.5px; font-weight: 900; border-radius: 3.5px;
  padding: 1.5px 5px; line-height: 1; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.6);
}

/* 바닥 적재 (위치 미지정) */
.floor-title { margin-top: 24px; font-size: 19px; }
.floor-area {
  display: flex; flex-wrap: wrap; gap: 12px;
  background: repeating-linear-gradient(45deg, #26313f, #26313f 10px, #202938 10px, #202938 20px);
  border: 2px dashed #4b5a6b; border-radius: 10px; padding: 18px;
}
.crate {
  width: 130px; min-height: 80px;
  background: linear-gradient(180deg, #e8c98a, #d9ad5f);
  border: 2px solid #a97e35; border-radius: 6px;
  color: #4a3313; padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  font-size: 12px;
}
.crate:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.crate-part { font-weight: bold; word-break: break-all; text-align: center; }
.crate-name { font-size: 11px; text-align: center; opacity: 0.85; }
.crate-qty { font-size: 13px; font-weight: bold; }

/* 작업자 입력 */
.editor-box { margin-left: 0; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
.editor-box label { color: #d8e0ea; font-size: 14px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.editor-box input, .editor-box select { padding: 5px 8px; border-radius: 6px; border: 1px solid #445; font-size: 14px; }
.editor-box input { width: 100px; margin-left: 4px; }
.editor-box select { width: 108px; }
.company-logo { height: 36px; width: auto; display: block; background: #fff; padding: 3px 7px; border-radius: 6px; }

/* 푸터 */
.page-footer {
  text-align: right;
  color: #9aa3ab;
  font-size: 12px;
  padding: 12px 4px 4px;
}

/* LOT# 표시 */
.cell-lot { font-size: 10px; color: #93c5fd; background: #1e3a5f; border-radius: 3px; padding: 0 3px; }
.crate-lot { font-size: 10px; color: #4a3313; font-weight: bold; }
.cell-box-calc { font-size: 11px; font-weight: 800; color: #38bdf8; margin: 1px 0; }

/* 금액 추이
   차트는 app.py의 build_line_chart_svg()가 라이트 테마 색으로 고정 출력하므로(건드리지 않음),
   카드 자체는 의도적으로 밝은 "받침판"으로 남겨서 그 위에서 잘 보이게 하고,
   테두리/그림자만 다크 페이지 위에서 도드라지도록 조정한다. */
.chart-card {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 16px;
  padding: 16px; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

/* 재고금액 추이: 일/주/월별 탭 */
.period-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.period-tab {
  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--sl-border-strong);
  background: var(--sl-surface-2); color: var(--sl-text); text-decoration: none; font-size: 14px; font-weight: 600;
}
.period-tab:hover { background: var(--sl-surface-2); }
.period-tab.active {
  background: var(--sl-accent); border-color: var(--sl-accent); color: #fff;
}

/* 목적지별 출고 현황: 두 개 미니 차트 나란히 */
.chart-row { display: flex; gap: 16px; flex-wrap: wrap; }
.chart-row .chart-card { flex: 1; min-width: 280px; margin-bottom: 0; }
.chart-card-title { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }

.period-tabs-sm { margin-top: 4px; margin-bottom: 10px; }
.period-tabs-sm .period-tab { padding: 5px 14px; font-size: 13px; }

/* 금액추이: 한 화면에 여러 차트를 같이 보이도록 2열 그리드로 배치 (예전엔 위→아래로
   길게 이어져서 스크롤이 많았음). 화면이 좁아지면 자동으로 1열로 접힌다. */
.trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.trends-grid .chart-card { margin-bottom: 0; }
.trends-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.trends-card-head h2 { margin: 0; font-size: 17px; }
@media (max-width: 1100px) {
  .trends-grid { grid-template-columns: 1fr; }
}

/* 대기목록 자동처리 */
.auto-process-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.auto-process-bar #bulk-auto-btn {
  background: #f0c96b; border-color: #d9ae3f; color: #4a3313; font-weight: 600;
}
.auto-process-bar #bulk-auto-btn:hover { background: #e6bb4d; }

/* ERP 대비 비교 */
.erp-compare-form label { display: block; margin-bottom: 14px; font-weight: 600; }
.erp-compare-form input[type="file"] { display: block; margin-top: 6px; font-weight: normal; }
.erp-compare-buttons { display: flex; gap: 10px; margin-top: 4px; }

/* ===== 종합 현황판 리디자인 ===== */
.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.dash-stat-card {
  position: relative; overflow: hidden;
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 14px;
  padding: 10px 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  display: flex; align-items: center; gap: 14px;
}
.dash-stat-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(145deg, #334155, #1e293b);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.dash-stat-body { min-width: 0; }
.dash-stat-label { font-size: 13px; color: var(--sl-text-soft); font-weight: 700; }
.dash-stat-value { font-size: 25px; font-weight: 800; color: #f1f5f9; margin-top: 1px; line-height: 1.2; }
.dash-stat-sub { font-size: 12px; color: #64748b; margin-top: 1px; }
.dash-stat-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #6fa4e8, #1f5fbf);
}

/* align-items:start - 왼쪽 창고 그림판과 오른쪽 사이드바가 서로 다른 높이를 억지로 맞추지
   않고, 각자 내용 크기만큼만 차지하게 한다 (위 .fp-wrap/.fp-diagram 주석 참고). */
.dash-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 10px; }
.dash-panel {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 16px;
  padding: 14px 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.dash-panel-title {
  font-size: 16px; font-weight: 800; color: #f1f5f9; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.dash-panel-empty { color: #64748b; font-size: 13.5px; }
.dash-panel-empty a { color: #60a5fa; }

/* 서버에서 만드는 재고금액 추이 SVG는 라이트 테마 색으로 고정돼있어서(app.py 안 건드림),
   다크 패널 위에서도 잘 보이게 흰 카드 위에 얹어준다. */
.dash-panel svg { border-radius: 10px; box-sizing: border-box; width: 100%; height: auto; }

/* 주요 품목별 재고 현황 - 재고 많은 TOP5 / 입출고 많은 TOP5를 세로로 쌓지 않고 좌우 2단
   구성으로 배치해서, 항목이 10개(5+5)라도 패널 세로 높이가 늘어나지 않고 한눈에 다 보이게 한다. */
.top-item-groups { display: flex; gap: 16px; align-items: flex-start; }
.top-item-group { flex: 1 1 0; min-width: 0; }
.top-item-group-low { padding-left: 16px; border-left: 1px dashed var(--sl-border); }

.top-item-group-label {
  font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase;
  letter-spacing: .3px; margin: 0 0 4px; line-height: 1.3;
}

.top-item-row { margin-bottom: 5px; }
.top-item-row:last-child { margin-bottom: 0; }
.top-item-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.top-item-name-wrap { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.top-item-rank {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #334155; color: #93c5fd;
  font-size: 10.5px; font-weight: 800;
}
.top-item-name { font-weight: 700; font-size: 14px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-item-sub { font-size: 11px; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-item-name-wrap > div { min-width: 0; }
.top-item-amount { flex: 0 0 auto; font-weight: 800; font-size: 13.5px; color: #60a5fa; white-space: nowrap; margin-left: 24px; }
.top-item-bar-track { height: 6px; border-radius: 6px; background: #334155; overflow: hidden; }
.top-item-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8fbcf0, #1f5fbf); }
/* 입출고 많은 TOP5는 금액이 아니라 수량 기준이라, 위 재고 TOP5(파란색)와 헷갈리지 않게
   주황/황색 계열로 구분한다. */
.top-item-amount.move { color: #f0b94d; }
.top-item-bar-fill.move { background: linear-gradient(90deg, #f6d38a, #d9911f); }

.dash-trend-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dash-trend-value { font-size: 27px; font-weight: 800; color: #f1f5f9; }
.dash-trend-diff-up { color: #1f8f4f; font-size: 13.5px; font-weight: 700; }
.dash-trend-diff-down { color: #c0392b; font-size: 13.5px; font-weight: 700; }
.dash-trend-diff-flat { color: #8a93a0; font-size: 13.5px; }

/* 렉/구역 타일 - "두툼한 레고 블록" pseudo-3D: 기울이지 않고 정면을 그대로 유지한 채,
   위쪽이 밝은 그라데이션 "윗면" + 아래쪽 무광 색상 "옆면"(box-shadow, blur 없음)으로
   두께감을 낸다. 격자/링크/호버 클릭 동작은 전혀 건드리지 않았다. */
.fp-rack, .fp-zone {
  position: relative;
  overflow: hidden;
  color: #fff;
  --block-a: #8b96a5;
  --block-b: #626d7d;
  --block-edge: #333a44;
  background: linear-gradient(180deg, var(--block-a) 0%, var(--block-b) 100%);
  box-shadow: 0 6px 0 var(--block-edge), 0 10px 16px rgba(15,23,42,0.35);
}
.fp-rack::before, .fp-zone::before {
  content: "";
  position: absolute;
  left: -30%; right: -30%; top: -55%; bottom: 30%;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
  transform: rotate(-25deg);
  pointer-events: none;
}
.fp-rack-code, .fp-rack-pct, .fp-rack-sub,
.fp-zone-icon, .fp-zone-label, .fp-zone-sub, .fp-zone-sub2 {
  position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.fp-rack:hover, .fp-zone:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--block-edge), 0 15px 20px rgba(15,23,42,0.4);
}
.fp-rack:active, .fp-zone:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--block-edge), 0 4px 8px rgba(15,23,42,0.3);
}
.fp-rack.fill-high, .fp-zone.fill-high { --block-a: #10b981; --block-b: #059669; --block-edge: #065f46; }
.fp-rack.fill-mid, .fp-zone.fill-mid { --block-a: #2563eb; --block-b: #1d4ed8; --block-edge: #1e3a8a; }
.fp-rack.fill-low, .fp-zone.fill-low { --block-a: #f59e0b; --block-b: #d97706; --block-edge: #78350f; }
.fp-rack.fill-empty, .fp-zone.fill-empty { --block-a: #475569; --block-b: #334155; --block-edge: #1e293b; }

.fp-rack-missing { background: var(--sl-surface); color: #475569; }

@media (max-width: 980px) {
  .dash-main-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   🧊 Real WebGL 3D Three.js Smart Warehouse Engine
   ========================================================================== */
.three-container-3d {
  width: 100%;
  background: #090d16;
  border: 1.5px solid rgba(96, 165, 250, 0.25);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

#three-canvas-holder {
  width: 100%;
  height: 540px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
}

#three-canvas-holder:active {
  cursor: grabbing;
}

.three-tooltip-popup {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid #60a5fa;
  border-radius: 12px;
  padding: 10px 16px;
  color: #ffffff;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(96, 165, 250, 0.4);
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.three-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 12.5px;
}

/* ==========================================================================
   🖨️ Professional A4 Landscape 1-Page Printing Styles
   ========================================================================== */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #ffffff !important; color: #000000 !important; font-family: sans-serif !important; }
  .navbar, .back-link, .rack-all-jump, .btn, .page-footer, .three-container-3d, .dash-floor-col { display: none !important; }
  .rack-all-section { page-break-after: always; page-break-inside: avoid; margin-bottom: 0; padding: 10px 0; }
  .visual-wrap { background: #ffffff !important; border: 1.5px solid #000000 !important; border-radius: 0 !important; padding: 8px !important; }
  .cell { border: 1px solid #333333 !important; color: #000000 !important; background: #ffffff !important; box-shadow: none !important; }
  .cell-part { color: #000000 !important; font-size: 10.5px !important; font-weight: bold !important; line-height: 1.25 !important; }
  .cell-box-calc { color: #000000 !important; font-size: 10px !important; font-weight: bold !important; margin: 1px 0 !important; }
  .cell-qty { color: #000000 !important; font-size: 11px !important; font-weight: 900 !important; }
  .cell-loc { color: #444444 !important; font-size: 9px !important; }
}