:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1d2430;
  --muted: #657386;
  --line: #dce1e8;
  --blue: #1f5f99;
  --blue-dark: #174a79;
  --green: #16785d;
  --red: #c93d3d;
  --shadow: 0 8px 24px rgba(27, 39, 51, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Malgun Gothic", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.sidebar {
  background: #17202b;
  color: #f6f8fb;
  height: 100vh;
  overflow: auto;
  padding: 18px 14px;
}

.brand {
  display: grid;
  gap: 5px;
  padding: 6px 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
}

.brand-logo {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #ffffff;
  object-fit: contain;
}

.brand strong {
  font-size: 20px;
}

.brand-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.system-menu-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f6f8fb;
  font-size: 15px;
}

.system-menu-button:hover,
.system-menu-button.active {
  border-color: rgba(255, 255, 255, 0.44);
  background: #243242;
}

.system-menu {
  position: absolute;
  top: 142px;
  right: 8px;
  z-index: 12;
  display: grid;
  gap: 4px;
  width: 176px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #202c3a;
  box-shadow: var(--shadow);
}

.system-menu[hidden] {
  display: none;
}

.system-menu-item {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #dfe6ef;
  text-align: left;
  font-size: 13px;
}

.system-menu-item:hover,
.system-menu-item.active {
  background: #304154;
  color: #ffffff;
}

.brand span {
  color: #b8c3cf;
  font-size: 12px;
}

nav {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.nav-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #dfe6ef;
  padding: 10px 12px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.nav-button:hover,
.nav-button.active {
  background: #243242;
  color: #ffffff;
}

.nav-button[data-sheet="업무_대시보드"] {
  color: #e9f7ff;
}

.nav-button[data-sheet="업무_대시보드"].active {
  background: #1f5f99;
}

.nav-button.simulation-nav {
  margin-top: 8px;
  border: 1px solid rgba(73, 197, 163, 0.32);
  background: rgba(22, 120, 93, 0.16);
  color: #d8fff1;
}

.nav-button.simulation-nav:hover,
.nav-button.simulation-nav.active {
  border-color: rgba(73, 197, 163, 0.72);
  background: #16785d;
  color: #ffffff;
}

.workspace {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
}

.topbar {
  flex: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -10px -14px 14px;
  padding: 10px 14px;
  background: rgba(246, 248, 251, 0.96);
  border-bottom: 1px solid rgba(214, 222, 231, 0.78);
  backdrop-filter: blur(8px);
}

.work-dashboard {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.dashboard-hero,
.dashboard-panel,
.dashboard-quick-actions {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.dashboard-hero h2 {
  font-size: 20px;
}

.dashboard-hero p,
.dashboard-date {
  color: var(--muted);
  font-size: 13px;
}

.dashboard-date {
  padding: 8px 10px;
  border: 1px solid #d9e4ef;
  border-radius: 6px;
  background: #f8fbfd;
  color: #164a76;
  font-weight: 800;
}

.dashboard-metrics {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.dashboard-task-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.dashboard-task {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(27, 39, 51, 0.06);
  position: relative;
  overflow: visible;
}

.dashboard-task span,
.dashboard-task small {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-task strong {
  color: #0f2742;
  font-size: 22px;
}

.dashboard-task.warning {
  border-color: #f2d08c;
  background: #fffaf0;
}

.dashboard-task.danger {
  border-color: #efb6b6;
  background: #fff5f5;
}

.dashboard-task-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(520px, 92vw);
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: #ffffff;
  color: #0f2742;
  box-shadow: 0 18px 36px rgba(15, 39, 66, 0.18);
}

.dashboard-task:hover .dashboard-task-popover,
.dashboard-task:focus-visible .dashboard-task-popover {
  display: grid;
  gap: 7px;
}

.dashboard-task-popover-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid #e5edf5;
  border-radius: 7px;
  background: #f8fbfd;
}

.dashboard-task-popover-row span {
  min-width: 0;
}

.dashboard-task-popover-row em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  margin-bottom: 2px;
}

.dashboard-task-popover-row b {
  display: block;
  overflow: hidden;
  color: #0f2742;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-empty,
.dashboard-task-more {
  display: block;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-task-more {
  color: #1f6097;
  font-weight: 800;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}

.dashboard-panel {
  min-width: 0;
  overflow: hidden;
}

.dashboard-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.dashboard-panel h2 {
  font-size: 15px;
}

.dashboard-link {
  min-height: 30px;
  padding: 5px 9px;
  color: var(--blue);
}

.dashboard-mini-table {
  overflow: auto;
  max-height: 260px;
}

.dashboard-mini-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dashboard-mini-table th,
.dashboard-mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #edf1f5;
  white-space: nowrap;
  text-align: left;
}

.dashboard-mini-table th {
  position: sticky;
  top: 0;
  background: #eef4f9;
  color: #27435c;
  z-index: 1;
}

.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.dashboard-quick-actions button {
  min-height: 34px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
}

#viewMeta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.actions,
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover {
  border-color: #aab5c3;
}

.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.primary:hover {
  background: var(--blue-dark);
}

.danger {
  border-color: #e2a4a4;
  background: #fff5f5;
  color: #9b1c1c;
}

.danger:hover {
  border-color: #c94b4b;
  background: #ffe8e8;
}

.ghost {
  background: transparent;
}

.danger {
  border-color: var(--red);
  color: var(--red);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.icon-button.active {
  background: #e8f0f8;
  border-color: #8eb4d8;
  color: var(--blue-dark);
}

.filters {
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.filters input {
  width: min(520px, 60vw);
}

body.inventory-view-active .workspace {
  padding-top: 16px;
  padding-bottom: 16px;
  overflow-y: auto;
}

body.inventory-view-active .topbar {
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.inventory-view-active h1 {
  font-size: 22px;
}

body.inventory-view-active #viewMeta {
  margin-top: 2px;
}

body.inventory-view-active .filters {
  margin-bottom: 10px;
}

body.inventory-view-active .filters input,
body.inventory-view-active .filters select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body.inventory-view-active #content {
  flex: 0 0 auto;
  min-height: 360px;
  overflow: visible;
}

body.inventory-view-active #content .table-wrap {
  height: min(56vh, 620px);
  min-height: 340px;
}

.stock-summary-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.stock-summary-bar[hidden] {
  display: none;
}

.stock-summary-bar.inbound-scroll {
  display: block;
  max-height: min(230px, 28vh);
  margin-bottom: 10px;
  overflow: auto;
}

.stock-summary-bar.inbound-scroll .inbound-purchase-dashboard {
  min-width: 980px;
}

.stock-summary-bar.inbound-scroll .summary-band {
  gap: 8px;
}

.stock-summary-bar.inbound-scroll .metric {
  min-height: 62px;
  padding: 10px 12px;
}

.stock-summary-bar.inbound-scroll .stock-summary-table-wrap {
  margin-top: 8px;
}

.stock-summary-bar.inbound-scroll .stock-summary-cards {
  gap: 8px;
}

.stock-summary-bar.inbound-scroll .stock-size-card {
  padding: 9px 10px;
}

.stock-summary-bar.warehouse-stock-scroll {
  display: block;
  max-height: min(320px, 36vh);
  margin-bottom: 10px;
  overflow: auto;
}

.warehouse-stock-dashboard {
  display: grid;
  gap: 10px;
  min-width: 860px;
}

.warehouse-stock-dashboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.warehouse-stock-dashboard-title strong {
  color: #0f2742;
  font-size: 14px;
}

.warehouse-stock-dashboard-title span {
  color: var(--muted);
  font-size: 12px;
}

.warehouse-stock-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(312px, 340px);
  gap: 8px;
}

.warehouse-stock-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe7f1;
  border-radius: 8px;
  background: #fbfdff;
}

.warehouse-stock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.warehouse-stock-head div {
  display: grid;
  gap: 2px;
}

.warehouse-stock-head b {
  color: #0f3658;
  font-size: 15px;
}

.warehouse-stock-head span {
  color: var(--muted);
  font-size: 11px;
}

.warehouse-stock-head strong {
  color: #006b57;
  font-size: 19px;
}

.warehouse-stock-total {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.warehouse-stock-total span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 25px;
  padding: 4px 6px;
  border: 1px solid #e2ebf3;
  border-radius: 6px;
  background: #ffffff;
  color: #607187;
  font-size: 10px;
}

.warehouse-stock-total b {
  color: #0f2742;
  font-size: 12px;
}

.warehouse-size-list {
  display: grid;
  gap: 4px;
}

.warehouse-size-row {
  display: grid;
  grid-template-columns: 44px 48px 56px 62px 62px;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid #e6edf4;
  border-radius: 6px;
  background: #ffffff;
}

.warehouse-size-row-head {
  min-height: 22px;
  background: #eef5fb;
  border-color: #d8e6f2;
}

.warehouse-size-row b {
  color: #0f3658;
  font-size: 11px;
}

.warehouse-size-row span {
  color: #657386;
  font-size: 10.5px;
  white-space: nowrap;
  text-align: right;
}

.warehouse-size-row-head b,
.warehouse-size-row-head span {
  color: #52657a;
  font-size: 10px;
  font-weight: 800;
}

.warehouse-size-row-head b {
  text-align: left;
}

.warehouse-stock-empty {
  padding: 14px;
  color: var(--muted);
}

.stock-summary-bar.inventory-compact {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  margin: -8px 0 10px;
  padding: 8px 10px;
  overflow: visible;
}

.stock-summary-bar.inventory-compact .inventory-dashboard {
  gap: 7px;
}

.stock-summary-bar.inventory-compact .inventory-tabs {
  padding: 3px;
}

.stock-summary-bar.inventory-compact .inventory-tab {
  min-height: 30px;
  padding: 5px 12px;
}

.stock-summary-bar.inventory-compact .summary-band {
  gap: 7px;
}

.stock-summary-bar.inventory-compact .inventory-money-band {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.stock-summary-bar.inventory-compact .inventory-quantity-band {
  grid-template-columns: 1fr;
}

.stock-summary-bar.inventory-compact .metric {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 7px;
}

.stock-summary-bar.inventory-compact .metric span {
  margin-bottom: 3px;
  font-size: 11px;
}

.stock-summary-bar.inventory-compact .metric strong {
  font-size: 17px;
}

.stock-summary-bar.inventory-compact .wide-metric {
  gap: 6px;
}

.stock-summary-bar.inventory-compact .outbound-card-grid,
.stock-summary-bar.inventory-compact .inbound-card-grid {
  gap: 6px;
}

.stock-summary-bar.inventory-compact .compact-year-grid {
  grid-template-columns: 1fr;
  margin-top: 7px;
}

.stock-summary-bar.inventory-compact .compact-outbound-grid {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  margin-top: 7px;
}

.stock-summary-bar.inventory-compact .outbound-mini-card,
.stock-summary-bar.inventory-compact .inbound-mini-card {
  min-height: auto;
  padding: 6px 8px;
}

.stock-summary-bar.inventory-compact .inbound-mini-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.stock-summary-bar.inventory-compact .inbound-mini-card span,
.stock-summary-bar.inventory-compact .outbound-mini-card header span,
.stock-summary-bar.inventory-compact .outbound-split span {
  font-size: 11px;
}

.stock-summary-bar.inventory-compact .inbound-mini-card strong {
  font-size: 15px;
}

.stock-summary-bar.inventory-compact .outbound-mini-card {
  gap: 5px;
}

.stock-summary-bar.inventory-compact .outbound-mini-card header {
  gap: 6px;
}

.stock-summary-bar.inventory-compact .outbound-mini-card header strong {
  font-size: 15px;
}

.stock-summary-bar.inventory-compact .vertical-quantity-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}

.stock-summary-bar.inventory-compact .outbound-split div {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
}

.stock-summary-bar.inventory-compact .outbound-split b {
  font-size: 13px;
}

.stock-summary-bar.inventory-compact .outbound-split em {
  font-size: 10px;
}

.stock-summary-bar.inventory-compact .stock-error-panel {
  gap: 7px;
  margin-top: 0;
  padding: 9px;
  max-height: 126px;
  overflow: auto;
}

.stock-summary-bar.inventory-compact .stock-error-list {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
}

.stock-summary-bar.inventory-compact .stock-error-item {
  gap: 3px;
  padding: 7px 9px;
}

.stock-summary-bar.inventory-compact .stock-error-item strong {
  font-size: 15px;
}

.stock-summary-bar.inventory-compact .stock-error-item span {
  font-size: 11px;
  line-height: 1.32;
}

.stock-summary-bar.inventory-compact .stock-summary-table-wrap {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.stock-summary-bar.inventory-compact .stock-summary-table-wrap + .stock-summary-table-wrap {
  margin-top: 4px;
}

.stock-summary-bar.inventory-compact .stock-summary-title {
  min-height: 66px;
}

.stock-summary-bar.inventory-compact .stock-summary-cards {
  grid-auto-columns: minmax(112px, 1fr);
  gap: 6px;
}

.stock-summary-bar.inventory-compact .stock-size-card {
  min-height: 66px;
  padding: 8px 10px;
}

.stock-summary-bar.inventory-compact .stock-size-head strong {
  font-size: 16px;
}

.stock-summary-bar.inventory-compact .stock-size-detail {
  gap: 2px;
  margin-top: 7px;
  font-size: 10px;
}

.stock-summary-bar.inventory-compact .yield-size-card {
  min-height: 68px;
}

.stock-summary-bar.inventory-compact .product-size-cost-panel {
  gap: 7px;
  padding: 9px;
}

.stock-summary-bar.inventory-compact .product-size-cost-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}

.stock-summary-bar.inventory-compact .product-size-cost-card {
  gap: 6px;
  padding: 8px 9px;
}

.stock-summary-bar.inventory-compact .product-size-cost-card dl {
  gap: 4px;
}

.stock-summary-bar.inventory-compact .product-size-cost-card dl div {
  min-height: 20px;
}

.inventory-dashboard {
  display: grid;
  gap: 10px;
  width: 100%;
}

.inventory-tabs {
  display: inline-flex;
  gap: 6px;
  width: 100%;
  padding: 4px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #f8fafc;
}

.inventory-tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #617084;
  font-weight: 700;
}

.inventory-tab:hover {
  background: #edf4fb;
  color: #1f5f99;
}

.inventory-tab.active {
  border-color: #b8d0e7;
  background: #ffffff;
  color: #164f82;
  box-shadow: 0 6px 14px rgba(31, 95, 153, 0.08);
}

.inventory-money-band {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.inventory-quantity-band {
  grid-template-columns: 1fr;
}

.inventory-dashboard .metric {
  min-height: 86px;
}

.product-size-cost-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
  box-shadow: var(--shadow);
}

.product-size-cost-panel header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.product-size-cost-panel header strong {
  color: #17324a;
  font-size: 15px;
}

.product-size-cost-panel header span {
  color: var(--muted);
  font-size: 12px;
}

.product-size-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.product-size-cost-card {
  display: grid;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #d9e6ef;
  border-radius: 8px;
  background: #ffffff;
}

.product-size-cost-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-size-cost-card-title strong {
  color: #0f3d61;
  font-size: 16px;
}

.product-size-cost-card-title span {
  color: #5e7083;
  font-size: 12px;
  font-weight: 700;
}

.product-size-cost-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.product-size-cost-card dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.product-size-cost-card dt {
  color: #6a7888;
  font-size: 12px;
}

.product-size-cost-card dd {
  margin: 0;
  color: #102b45;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stock-error-panel {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #f0b8b8;
  border-radius: 8px;
  background: #fff6f6;
}

.stock-error-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-error-title strong {
  color: #9f2f2f;
  font-size: 14px;
}

.stock-error-title span {
  color: #b34848;
  font-size: 12px;
}

.stock-error-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.stock-error-item {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #f2cdcd;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.stock-error-item:hover,
.stock-error-item:focus-visible {
  border-color: #dc6f6f;
  box-shadow: 0 8px 18px rgba(194, 58, 58, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.stock-error-item b {
  color: #202936;
  font-size: 13px;
}

.stock-error-item strong {
  color: #c23a3a;
  font-size: 17px;
}

.stock-error-item span {
  color: #6d4b4b;
  font-size: 12px;
  line-height: 1.45;
}

.inbound-purchase-dashboard {
  gap: 12px;
}

.inbound-purchase-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inbound-purchase-wrap {
  margin-top: 0;
}

.inbound-purchase-card {
  min-width: 168px;
  border-color: #d5e4f0;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.inbound-purchase-card .stock-size-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.inbound-purchase-card .stock-size-head strong {
  color: #155c96;
  font-size: 17px;
}

.yield-size-card {
  border-color: #c7e2d8;
  background: linear-gradient(180deg, #ffffff 0%, #f2faf6 100%);
}

.yield-size-card .stock-size-head strong {
  color: #16785d;
}

.production-size-analysis-cards {
  align-items: stretch;
}

.production-analysis-card {
  min-width: 260px;
  gap: 10px;
}

.production-analysis-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.raw-mix-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #dbece4;
}

.raw-mix-row {
  display: grid;
  gap: 5px;
}

.raw-mix-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

.raw-mix-meta b {
  color: #0f3658;
  font-size: 12px;
}

.raw-mix-meta span {
  color: #607386;
  text-align: right;
}

.raw-mix-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eef5;
}

.raw-mix-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d7dd2 0%, #16a085 100%);
}

.year-breakdown {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e4ebf2;
}

.year-breakdown div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.year-breakdown span {
  margin: 0;
  color: #738293;
  font-size: 11px;
}

.year-breakdown b {
  color: #243447;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ratio-breakdown b {
  font-size: 11px;
}

.metric.wide-metric {
  min-width: 0;
}

.outbound-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.inbound-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.inbound-mini-card {
  display: grid;
  gap: 8px;
  min-height: 78px;
  padding: 11px 10px;
  border: 1px solid #dbe7f1;
  border-radius: 8px;
  background: #f8fbfd;
}

.inbound-mini-card span {
  margin: 0;
  color: #536577;
  font-size: 12px;
  font-weight: 700;
}

.inbound-mini-card strong {
  align-self: end;
  color: #0f2742;
  font-size: 19px;
  line-height: 1;
  text-align: right;
}

.inbound-mini-card:last-child {
  background: #f1f7ef;
  border-color: #cfe3c9;
}

.inbound-mini-card:last-child strong {
  color: #16785d;
}

.inventory-flow-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid #d9e6ef;
  border-radius: 8px;
  background: #ffffff;
}

.inventory-flow-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.inventory-flow-panel > header strong {
  display: block;
  color: #12324f;
  font-size: 17px;
}

.inventory-flow-panel > header span {
  display: block;
  margin-top: 3px;
  color: #6b7b8d;
  font-size: 13px;
}

.inventory-flow-panel > header > b {
  color: #0b5f4b;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventory-flow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: 14px;
}

.inventory-flow-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dbe7f1;
  border-radius: 8px;
  background: #f8fbfd;
}

.inventory-flow-card:last-child {
  background: #f1f7ef;
  border-color: #cfe3c9;
}

.inventory-flow-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inventory-flow-card header span {
  color: #40566c;
  font-size: 15px;
  font-weight: 800;
}

.inventory-flow-card header strong {
  color: #0b5f4b;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventory-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.inventory-flow-grid div {
  display: grid;
  gap: 5px;
  min-height: 68px;
  padding: 10px 11px;
  border: 1px solid #e1ebf3;
  border-radius: 7px;
  background: #ffffff;
}

.inventory-flow-grid .inventory-flow-outbound-total {
  grid-column: auto;
  min-height: 68px;
  background: #f4f9ff;
}

.inventory-flow-grid span {
  color: #718294;
  font-size: 12px;
  font-weight: 700;
}

.inventory-flow-grid b {
  color: #0f2742;
  font-size: 21px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inventory-flow-grid em {
  color: #0b7a5b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.inventory-flow-card p {
  margin: 0;
  color: #5e7083;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .inventory-flow-list {
    grid-template-columns: 1fr;
  }
}

.inbound-cost-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e4ee;
  border-radius: 8px;
  background: #f7fbfc;
}

.inbound-cost-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.inbound-cost-card header strong {
  color: #12324f;
  font-size: 15px;
}

.inbound-cost-card header span {
  color: var(--muted);
  font-size: 12px;
}

.inbound-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.inbound-cost-grid .field {
  margin: 0;
  min-width: 0;
}

.inbound-cost-grid input,
.inbound-cost-grid select {
  width: 100%;
  min-width: 0;
}

.production-product-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #b9d9cf;
  border-radius: 8px;
  background: linear-gradient(180deg, #f3fbf8 0%, #eaf6f2 100%);
  box-shadow: 0 8px 18px rgba(18, 92, 75, 0.08);
  overflow: hidden;
}

.production-product-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.production-product-card header strong {
  color: #0f4f43;
  font-size: 16px;
}

.production-product-card header span {
  color: #5d756f;
  font-size: 12px;
}

.production-product-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 12px;
  align-items: end;
}

.production-product-grid .field {
  margin: 0;
  min-width: 0;
}

.production-product-grid input,
.production-product-grid select {
  width: 100%;
  min-width: 0;
}

.production-product-grid .date-control {
  min-width: 0;
}

.production-product-grid .field[data-production-field="생산일자"] .date-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.production-product-grid .field[data-production-field="원물 투입중량"] input,
.production-product-grid .field[data-production-field="생산 제품 총중량"] input,
.production-product-grid .field[data-production-field="생산수율"] input,
.production-product-grid .field[data-production-field="부자재비용합계"] input {
  color: #0f4f43;
  font-weight: 800;
  text-align: right;
  background: #eef8f4;
  border-color: #c2ddd3;
}

.single-production-product-card .field[data-production-field="생산일자"] {
  grid-column: span 3;
}

.single-production-product-card .field[data-production-field="생산 신규 LOT_ID"] {
  grid-column: span 2;
}

.single-production-product-card .field[data-production-field="제품명"] {
  grid-column: span 3;
}

.single-production-product-card .field[data-production-field="생산제품사이즈"],
.single-production-product-card .field[data-production-field="생산수율"],
.single-production-product-card .field[data-production-field="생산 제품 수량"],
.single-production-product-card .field[data-production-field="생산 제품 박스당 중량"],
.single-production-product-card .field[data-production-field="제품 원가"] {
  grid-column: span 2;
}

.single-production-product-card .field[data-production-field="원물 투입중량"],
.single-production-product-card .field[data-production-field="생산 제품 총중량"] {
  grid-column: span 3;
}

.single-production-product-card .field[data-production-field="부자재1"],
.single-production-product-card .field[data-production-field="부자재2"] {
  grid-column: span 4;
}

.single-production-product-card .field[data-production-field="부자재1수량"],
.single-production-product-card .field[data-production-field="부자재2수량"] {
  grid-column: span 2;
}

.single-production-product-card .field[data-production-field="부자재비용합계"] {
  grid-column: 9 / span 4;
}

.bulk-production-product-card .field[data-production-field="생산 신규 LOT_ID"],
.bulk-production-product-card .field[data-production-field="제품명"] {
  grid-column: span 3;
}

.bulk-production-product-card .field[data-production-field="생산제품사이즈"],
.bulk-production-product-card .field[data-production-field="생산 제품 수량"],
.bulk-production-product-card .field[data-production-field="생산 제품 박스당 중량"],
.bulk-production-product-card .field[data-production-field="부자재1수량"],
.bulk-production-product-card .field[data-production-field="부자재2수량"] {
  grid-column: span 2;
}

.bulk-production-product-card .field[data-production-field="부자재1"],
.bulk-production-product-card .field[data-production-field="부자재2"] {
  grid-column: span 4;
}

.production-material-field {
  padding-top: 12px;
  border-top: 1px solid rgba(15, 79, 67, 0.14);
}

.production-material-second {
  margin-left: 0;
}

@media (max-width: 980px) {
  .production-product-grid .field[data-production-field] {
    grid-column: span 6;
  }

  .production-product-grid .field[data-production-field="부자재비용합계"] {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .production-product-grid .field[data-production-field] {
    grid-column: 1 / -1;
  }
}

.outbound-mini-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #dbe7f1;
  border-radius: 8px;
  background: #f8fbfd;
}

.outbound-mini-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.outbound-mini-card header span {
  margin: 0;
  color: #536577;
  font-size: 12px;
  font-weight: 700;
}

.outbound-mini-card header strong {
  color: #0f2742;
  font-size: 18px;
  line-height: 1;
}

.outbound-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.outbound-split div {
  display: grid;
  gap: 3px;
  padding: 8px 7px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #e2ebf3;
  text-align: right;
}

.outbound-split span {
  margin: 0;
  color: #6c7b8b;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.outbound-split b {
  color: #17395d;
  font-size: 16px;
  line-height: 1.05;
}

.outbound-split em {
  color: #17805f;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.stock-summary-bar > strong {
  margin-right: 4px;
  font-size: 13px;
  color: var(--muted);
}

.stock-summary-table-wrap {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
  overflow-x: auto;
}

.stock-summary-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 72px;
  padding: 4px 0 4px 2px;
}

.stock-summary-title strong {
  color: #0f2742;
  font-size: 13px;
  white-space: nowrap;
}

.stock-summary-title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.stock-summary-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 8px;
  min-width: max-content;
}

.raw-inventory-size-summary {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
}

.raw-inventory-size-summary .stock-summary-title {
  min-height: 0;
}

.inventory-size-summary-list {
  display: grid;
  gap: 6px;
  min-width: 1060px;
}

.inventory-size-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #dce7f0;
  border-radius: 8px;
  background: #fff;
}

.inventory-size-main {
  display: grid;
  align-content: center;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid #e4edf4;
}

.inventory-size-main b {
  color: #0f3658;
  font-size: 14px;
}

.inventory-size-main strong {
  color: #0b3155;
  font-size: 18px;
  line-height: 1;
  text-align: right;
}

.inventory-size-main span {
  color: #607386;
  font-size: 11px;
  line-height: 1.25;
}

.inventory-size-main-flow {
  display: grid;
  gap: 1px;
}

.inventory-size-main-flow em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  font-style: normal;
  white-space: nowrap;
}

.inventory-size-main-flow b {
  color: #0f3658;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.inventory-size-years {
  display: grid;
  gap: 4px;
}

.inventory-size-year {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(78px, 1fr));
  align-items: center;
  gap: 6px;
  min-height: 25px;
  color: #334960;
  font-size: 11px;
}

.inventory-size-year.previous-year {
  padding: 3px 6px;
  border-radius: 5px;
  background: #f4f7fa;
  color: #6f7f91;
}

.inventory-size-year.current-year {
  padding: 3px 6px;
  border-radius: 5px;
  background: #eef7ff;
  color: #155c96;
}

.inventory-size-year b {
  color: #0f3658;
}

.inventory-size-year span {
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.inventory-size-year .stock-quantity {
  color: #0b3155;
  font-weight: 700;
}

.stock-size-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: 0 6px 16px rgba(15, 39, 66, 0.06);
}

.stock-size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.stock-size-head b {
  color: #17395d;
  font-size: 13px;
}

.stock-size-head strong {
  color: #0f2742;
  font-size: 18px;
  line-height: 1;
}

.stock-size-detail {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  color: #6c7a89;
  font-size: 11px;
}

.stock-size-detail span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 5px;
}

.stock-size-detail .previous-year {
  border-radius: 5px;
  background: #f4f7fa;
  color: #6f7f91;
}

.stock-size-detail .current-year {
  border-radius: 5px;
  background: #eef7ff;
  color: #155c96;
}

.stock-size-detail b {
  color: #33475b;
  font-weight: 700;
}

.stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef4fb;
  color: #17395d;
  font-size: 13px;
  white-space: nowrap;
}

.stock-chip b {
  color: #0f2742;
}

.stock-chip.muted {
  color: var(--muted);
  background: #f3f5f7;
}

input,
select {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 6px;
  padding: 9px 10px;
  min-height: 38px;
}

#content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

#content.content-scroll {
  overflow: auto;
  padding-right: 4px;
}

#content.content-scroll .analysis-layout {
  padding-bottom: 18px;
}

.table-wrap {
  width: 100%;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow);
  max-height: none;
}

table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
  text-align: left;
}

th.production-value-cell,
td.production-value-cell {
  text-align: center;
}

th.numeric-value-cell,
td.numeric-value-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

th.numeric-value-cell .sort-header {
  justify-content: flex-end;
  text-align: right;
}

th.numeric-value-cell .sort-header b {
  margin-left: 4px;
}

th.compact-number-cell,
td.compact-number-cell {
  min-width: 118px;
  max-width: 158px;
  padding-left: 8px;
  padding-right: 8px;
}

th {
  position: sticky;
  top: 0;
  background: #eef3f8;
  z-index: 1;
  color: #243242;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sort-header b {
  margin-left: auto;
  color: #718196;
  font-size: 10px;
  font-weight: 800;
}

.sort-header.active {
  color: #164f82;
}

.sort-header.active b {
  color: #1f5f99;
}

.select-col {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.select-col input {
  min-height: auto;
}

tr:hover td {
  background: #f7fbff;
}

tr.outbound-sale td {
  background: #f2fbf6;
}

tr.outbound-sale:hover td {
  background: #e6f7ee;
}

tr.outbound-production td {
  background: #f1f7ff;
}

tr.outbound-production:hover td {
  background: #e4f0ff;
}

tr.outbound-transfer td {
  background: #f7f3fb;
}

tr.outbound-transfer:hover td {
  background: #eee7f7;
}

tr.transfer-raw-lot td {
  background: #fff8e7;
}

tr.transfer-raw-lot:hover td {
  background: #fff1cc;
}

tr.transfer-product-lot td {
  background: #eef8f7;
}

tr.transfer-product-lot:hover td {
  background: #dcf1ee;
}

tr.lot-raw-row td {
  background: #fff8e7;
}

tr.lot-raw-row:hover td {
  background: #fff1cc;
}

tr.lot-product-row td {
  background: #eef8f7;
}

tr.lot-product-row:hover td {
  background: #dcf1ee;
}

.data-management-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
  padding: 18px;
}

.data-management-card {
  background: #fff;
  border: 1px solid #dbe5ee;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
}

.data-management-card h2 {
  color: #102033;
  font-size: 20px;
  margin: 0;
}

.data-management-card p {
  color: #5f7188;
  line-height: 1.55;
  margin: 0;
}

.data-management-card.danger-zone {
  border-color: #ffd2d2;
  background: #fffafa;
}

.data-file-picker {
  display: grid;
  gap: 8px;
}

.data-file-picker span {
  color: #60748b;
  font-size: 13px;
}

.data-management-result {
  background: #f7fbff;
  border: 1px solid #dce9f6;
  border-radius: 8px;
  color: #17324d;
  line-height: 1.6;
  min-height: 48px;
  padding: 12px;
  word-break: break-all;
}

.data-management-result code {
  color: #0f5f9d;
  white-space: normal;
}

.data-folder-open {
  margin-top: 10px;
}

.data-folder-opened {
  color: #16795b;
  display: inline-block;
  margin-top: 6px;
}

@media (max-width: 960px) {
  .data-management-layout {
    grid-template-columns: 1fr;
  }
}

tr.lot-raw-row td {
  background: #fff8e7;
}

tr.lot-raw-row:hover td {
  background: #fff1cc;
}

tr.lot-product-row td {
  background: #eef8f7;
}

tr.lot-product-row:hover td {
  background: #dcf1ee;
}

.outbound-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.multi-warehouse-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 3px 9px;
  border: 1px solid #b9d6ef;
  border-radius: 999px;
  background: #eef7ff;
  color: #1f5f99;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: help;
  white-space: nowrap;
  position: relative;
}

.multi-warehouse-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 170px;
  padding: 9px 10px;
  border: 1px solid #b9d6ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 39, 66, 0.16);
  color: #243447;
}

.multi-warehouse-badge:hover .multi-warehouse-tooltip,
.multi-warehouse-badge:focus .multi-warehouse-tooltip,
.multi-warehouse-badge:focus-within .multi-warehouse-tooltip {
  display: grid;
  gap: 7px;
}

.multi-warehouse-tooltip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.multi-warehouse-tooltip b {
  color: #1f5f99;
  font-weight: 700;
}

.multi-warehouse-tooltip strong {
  color: #0f2742;
  font-weight: 800;
}

.outbound-kind-badge.outbound-sale {
  border: 1px solid #b9dfc7;
  background: #dff4e8;
  color: #147344;
}

.outbound-kind-badge.outbound-production {
  border: 1px solid #bad3f5;
  background: #e1edff;
  color: #1b5ba8;
}

.outbound-kind-badge.outbound-transfer {
  border: 1px solid #d7c6ea;
  background: #eee5f7;
  color: #6b3b96;
}

.muted-duplicate-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 2px 7px;
  border: 0;
  border-radius: 999px;
  color: #6b7787;
  background: #eef2f6;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.duplicate-production-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 35;
  min-width: 220px;
  padding: 9px 10px;
  border: 1px solid #c8d6e4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 39, 66, 0.16);
  color: #243447;
}

.muted-duplicate-value:hover .duplicate-production-tooltip,
.muted-duplicate-value:focus .duplicate-production-tooltip,
.muted-duplicate-value:focus-within .duplicate-production-tooltip {
  display: grid;
  gap: 7px;
}

.duplicate-production-tooltip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.duplicate-production-tooltip b {
  color: #627084;
  font-weight: 700;
}

.duplicate-production-tooltip strong {
  color: #0f2742;
  font-weight: 800;
}

@keyframes productionRepresentativeFlash {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(211, 47, 47, 0);
    background: inherit;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    box-shadow: inset 0 0 0 3px #d32f2f;
    background: #fff1f1;
  }
}

td.production-representative-flash {
  animation: productionRepresentativeFlash 2.5s ease-in-out 1;
}

tr.date-age-1 td,
.card.date-age-1 {
  background: #fff3f0;
}

tr.date-age-2 td,
.card.date-age-2 {
  background: #ffe4de;
}

tr.date-age-3 td,
.card.date-age-3 {
  background: #ffd1c8;
}

tr.date-age-1:hover td {
  background: #ffebe6;
}

tr.date-age-2:hover td {
  background: #ffd8cf;
}

tr.date-age-3:hover td {
  background: #ffc2b5;
}

tr.outbound-sale td {
  background: #f2fbf6;
}

tr.outbound-sale:hover td {
  background: #e6f7ee;
}

tr.outbound-production td {
  background: #f1f7ff;
}

tr.outbound-production:hover td {
  background: #e4f0ff;
}

tr.outbound-transfer td {
  background: #f7f3fb;
}

tr.outbound-transfer:hover td {
  background: #eee7f7;
}

tr.transfer-raw-lot td {
  background: #fff8e7;
}

tr.transfer-raw-lot:hover td {
  background: #fff1cc;
}

tr.transfer-product-lot td {
  background: #eef8f7;
}

tr.transfer-product-lot:hover td {
  background: #dcf1ee;
}

.board {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 12px;
  overflow: auto;
  padding-bottom: 8px;
}

.lane {
  border: 1px solid var(--line);
  background: #edf1f5;
  border-radius: 8px;
  max-height: 100%;
  overflow: auto;
}

.lane header {
  position: sticky;
  top: 0;
  background: #e1e8ef;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lane-title {
  font-weight: 700;
}

.lane-count {
  color: var(--muted);
}

.card {
  margin: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(27, 39, 51, 0.06);
  cursor: pointer;
}

.card:hover {
  border-color: #9fb1c4;
}

.card.transfer-raw-lot {
  border-color: #eed9a9;
  background: #fff8e7;
}

.card.transfer-product-lot {
  border-color: #b8ded9;
  background: #eef8f7;
}

.card.lot-raw-row {
  border-color: #eed9a9;
  background: #fff8e7;
}

.card.lot-product-row {
  border-color: #b8ded9;
  background: #eef8f7;
}

.card-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.card-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
}

.card-grid span:nth-child(odd) {
  color: var(--muted);
}

dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  width: min(880px, calc(100vw - 28px));
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(12, 18, 26, 0.38);
}

#editorForm header,
#editorForm footer,
#batchForm header,
#batchForm footer,
#bulkForm header,
#bulkForm footer,
#newWarehouseForm header,
#newWarehouseForm footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

#editorForm header,
#batchForm header,
#bulkForm header {
  cursor: move;
  user-select: none;
}

#editorForm header button,
#batchForm header button,
#bulkForm header button {
  cursor: pointer;
}

#editorForm footer,
#batchForm footer,
#bulkForm footer,
#newWarehouseForm footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  max-height: 65vh;
  overflow: auto;
}

.field {
  display: grid;
  gap: 5px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
}

.field small {
  margin-left: 6px;
  color: var(--green);
  font-size: 11px;
}

.field input[readonly] {
  background: #f0f3f6;
  color: #677487;
}

.small-dialog {
  width: min(460px, calc(100vw - 28px));
}

.new-warehouse-fields {
  grid-template-columns: 1fr;
  max-height: none;
}

.warehouse-select-with-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.warehouse-add-button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #b8d4ec;
  border-radius: 7px;
  background: #eef6ff;
  color: #155f99;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-add-button:hover {
  background: #e2f0ff;
}

.dialog-error {
  min-height: 18px;
  margin: 0;
  color: #d33b37;
  font-size: 12px;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 28, 43, 0.72);
}

.auth-overlay[hidden] {
  display: none;
}

.auth-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.26);
}

.auth-card h2 {
  margin: 0;
  color: #0f2742;
  font-size: 26px;
}

.auth-card p {
  margin: 0;
  color: var(--muted);
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: #415267;
  font-size: 13px;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
}

.warehouse-editor-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e4ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.warehouse-editor-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dce8f0;
}

.warehouse-editor-section header strong {
  color: #0f3658;
  font-size: 15px;
}

.warehouse-editor-section header span {
  color: var(--muted);
  font-size: 12px;
}

.warehouse-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
}

.warehouse-editor-section .field {
  min-width: 0;
}

.warehouse-editor-section .field[data-setting-field="냉동창고명"] {
  grid-column: span 2;
}

.warehouse-editor-section .field[data-setting-field="냉동창고비용합계"],
.warehouse-editor-section .field[data-setting-field="노조비용합계"] {
  border-left: 3px solid #8eb4d8;
  padding-left: 10px;
}

.union-editor-section {
  background: #fffaf0;
  border-color: #ead9ac;
}

.union-editor-section header {
  border-bottom-color: #ead9ac;
}

.memo-editor-section {
  background: #ffffff;
}

.memo-grid {
  grid-template-columns: 1fr;
}

.field-disabled {
  opacity: 0.55;
}

.field-disabled select,
.field-disabled input {
  background: #f0f3f6;
  cursor: not-allowed;
}

.date-control {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.date-control input {
  min-width: 0;
}

.date-open {
  padding: 8px 10px;
}

.date-popover {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.date-popover[hidden] {
  display: none;
}

.date-popover.date-native-popover {
  min-width: 120px;
  width: auto;
  padding: 8px;
}

.date-popover.date-native-popover .date-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.date-today {
  border-color: #b6c4d2;
  background: #eef3f8;
}

.dialog-note {
  padding: 12px 16px 0;
  color: var(--muted);
  font-size: 13px;
}

.batch-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.batch-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
}

.batch-field label input {
  min-height: auto;
}

.batch-related-rows {
  padding: 0 16px 16px;
}

.inbound-line-editor {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid #d5e3ee;
  border-radius: 8px;
  background: #ffffff;
}

.inbound-line-editor header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inbound-line-editor h3 {
  margin: 0;
  color: #12324f;
  font-size: 15px;
}

.inbound-line-editor p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.inbound-line-editor header span {
  color: #0b6b58;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.inbound-line-table-wrap {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inbound-line-table-wrap table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.inbound-line-table-wrap th,
.inbound-line-table-wrap td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.inbound-line-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef5f8;
  color: #153653;
  font-size: 12px;
}

.inbound-line-table-wrap input,
.inbound-line-table-wrap select {
  width: 132px;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.inbound-line-table-wrap input[readonly] {
  background: #f1f5f8;
  color: #627386;
}

.inbound-line-table-wrap td:first-child input {
  width: 118px;
}

.inbound-line-table-wrap td:nth-child(8) input,
.inbound-line-table-wrap td:nth-child(9) input,
.inbound-line-table-wrap td:nth-child(10) input,
.inbound-line-table-wrap td:nth-child(11) input {
  width: 108px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.inbound-line-date {
  min-width: 190px;
}

.inbound-line-date input {
  width: 118px;
}

.production-related-panel {
  border: 1px solid #d7e4ef;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fbfd;
}

.production-related-panel header {
  display: block;
  padding: 11px 12px;
  border-bottom: 1px solid #d7e4ef;
  background: #eef5fb;
}

.production-related-panel h3 {
  margin: 0;
  font-size: 14px;
}

.production-related-panel p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.production-related-table {
  max-height: 210px;
  overflow: auto;
}

.production-related-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.production-related-table th,
.production-related-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #e4ebf2;
  white-space: nowrap;
  text-align: left;
}

.production-related-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e8f0f7;
  color: #29445f;
}

.production-related-table tr.representative-row td {
  background: #fff8df;
  font-weight: 800;
}

.production-related-table tr.related-production-row {
  cursor: pointer;
}

.production-related-table tr.related-production-row:hover td,
.production-related-table tr.related-production-row:focus td {
  background: #eaf4ff;
}

#bulkDialog {
  width: min(1180px, calc(100vw - 28px));
}

.bulk-section {
  border-top: 1px solid var(--line);
}

.bulk-section h3 {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 14px;
}

.bulk-common-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: none;
}

.bulk-row-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 16px;
}

.bulk-table-wrap {
  margin: 12px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  max-height: 40vh;
}

.bulk-table {
  min-width: 1040px;
  width: max-content;
}

.bulk-table th,
.bulk-table td {
  padding: 7px 8px;
}

.bulk-table input,
.bulk-table select {
  min-height: 32px;
  padding: 6px 8px;
  min-width: 96px;
}

.bulk-table input[readonly] {
  background: #f0f3f6;
  color: #677487;
}

.bulk-delete-cell {
  text-align: center;
}

.bulk-remove-line {
  padding: 6px 8px;
}

.empty {
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.settings-layout {
  display: grid;
  gap: 18px;
}

.settings-section {
  background: transparent;
}

.settings-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.settings-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-small {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.settings-small:hover:not(:disabled) {
  border-color: #9fc2e7;
  color: #164f82;
  background: #f6fbff;
}

.settings-small.danger {
  border-color: #f0b9b9;
  color: #b53636;
}

.settings-small.danger:hover:not(:disabled) {
  background: #fff6f6;
  border-color: #e58b8b;
}

.settings-small:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.settings-section h2 {
  font-size: 18px;
}

.settings-section p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.settings-table {
  max-height: 320px;
}

.settings-table th,
.settings-table td {
  text-align: center;
  vertical-align: middle;
}

.settings-table .sort-header {
  justify-content: center;
  text-align: center;
}

.settings-table .sort-header b {
  margin-left: 4px;
}

.warehouse-cost-list {
  display: grid;
  gap: 10px;
}

.warehouse-cost-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(27, 39, 51, 0.06);
  cursor: pointer;
}

.warehouse-cost-row:hover {
  border-color: #9fc2df;
  background: #fbfdff;
}

.warehouse-cost-row > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.warehouse-cost-row > header strong {
  color: #0f3658;
  font-size: 16px;
}

.warehouse-cost-row > header span {
  color: var(--muted);
  font-size: 12px;
}

.warehouse-cost-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
}

.warehouse-cost-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce8f0;
  border-radius: 8px;
  background: #f8fbfd;
}

.warehouse-cost-card h3 {
  margin: 0;
  color: #17395d;
  font-size: 14px;
}

.warehouse-cost-card div,
.warehouse-cost-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  font-size: 12px;
}

.warehouse-cost-card span {
  color: #667789;
}

.warehouse-cost-card b,
.warehouse-cost-card strong {
  color: #0b3155;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.warehouse-cost-card footer {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid #d7e4ef;
}

.warehouse-cost-card footer strong {
  font-size: 16px;
}

.freezer-cost-card {
  background: #f5fbff;
}

.union-cost-card {
  background: #fffaf0;
}

.warehouse-cost-note {
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.analysis-layout {
  display: grid;
  gap: 16px;
}

.analysis-layout h2 {
  font-size: 17px;
  margin-bottom: 8px;
}

.summary-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  position: relative;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.metric strong {
  font-size: 20px;
}

.metric-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.metric.positive strong {
  color: var(--green);
}

.metric.negative strong {
  color: var(--red);
}

.status-graph-layout {
  gap: 14px;
}

.status-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}

.graph-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.graph-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.graph-panel header h2 {
  margin: 0;
}

.graph-panel header strong {
  color: var(--navy);
  font-size: 20px;
}

.daily-chart {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.daily-bar-row {
  display: grid;
  grid-template-columns: 64px minmax(120px, 1fr) 76px;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-size: 12px;
}

.daily-date {
  color: var(--muted);
  font-weight: 700;
}

.daily-track {
  height: 16px;
  overflow: hidden;
  background: #edf2f7;
  border-radius: 999px;
}

.daily-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.daily-bar.sale-bar {
  background: linear-gradient(90deg, #39b779, #0f7a5f);
}

.daily-bar.production-bar {
  background: linear-gradient(90deg, #62a3ef, #1f5f9f);
}

.daily-bar-row b {
  color: var(--navy);
  text-align: right;
}

.quantity-candle-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 2px;
}

.quantity-candle-chart {
  display: block;
  min-width: 720px;
  height: 320px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
  border: 1px solid #dbe5ef;
  border-radius: 8px;
}

.candle-grid line {
  stroke: #e4ebf2;
  stroke-width: 1;
}

.candle-grid text {
  fill: #6b7b8c;
  font-size: 11px;
  text-anchor: end;
}

.candle-axis {
  stroke: #9fb0c0;
  stroke-width: 1.2;
}

.quantity-candle .candle-wick {
  stroke-width: 2;
  stroke-linecap: round;
}

.quantity-candle .candle-body {
  stroke-width: 1.2;
}

.quantity-candle.candle-up .candle-wick,
.quantity-candle.candle-up .candle-body {
  fill: #1f9d72;
  stroke: #137a58;
}

.quantity-candle.candle-down .candle-wick,
.quantity-candle.candle-down .candle-body {
  fill: #d95858;
  stroke: #b13d3d;
}

.quantity-candle.candle-flat .candle-wick,
.quantity-candle.candle-flat .candle-body {
  fill: #8a9aaa;
  stroke: #6f8091;
}

.production-candle.candle-up .candle-wick,
.production-candle.candle-up .candle-body {
  fill: #2f83d8;
  stroke: #1f5f9f;
}

.production-candle.candle-down .candle-wick,
.production-candle.candle-down .candle-body {
  fill: #d86b5c;
  stroke: #ad4a3e;
}

.candle-x-label {
  fill: #5f6f80;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.quantity-wave-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 2px;
}

.quantity-wave-chart {
  display: block;
  min-width: 720px;
  height: 320px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
  border: 1px solid #dbe5ef;
  border-radius: 8px;
}

.wave-grid line {
  stroke: #e4ebf2;
  stroke-width: 1;
}

.wave-grid text {
  fill: #6b7b8c;
  font-size: 11px;
  text-anchor: end;
}

.wave-axis {
  stroke: #9fb0c0;
  stroke-width: 1.2;
}

.wave-line {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quantity-wave-point circle {
  stroke-width: 2;
  fill: #ffffff;
}

.sale-wave .wave-line {
  stroke: #0f8b6a;
}

.sale-wave.quantity-wave-point circle {
  stroke: #0f8b6a;
}

.production-wave .wave-line {
  stroke: #246fbd;
}

.production-wave.quantity-wave-point circle {
  stroke: #246fbd;
}

.wave-x-label {
  fill: #5f6f80;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.negative-value {
  color: var(--red);
  font-weight: 700;
}

.metric-popover {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid #b8c5d3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.metric.has-popover:hover .metric-popover,
.metric.has-popover:focus-within .metric-popover {
  display: grid;
  gap: 8px;
}

.metric-popover b {
  font-size: 13px;
  color: var(--text);
}

.metric-popover div {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.metric-popover div:first-of-type {
  border-top: 0;
}

.metric-popover span {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.metric-popover strong {
  font-size: 13px;
  color: var(--blue-dark);
}

.metric-popover em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.analysis-table {
  max-height: 360px;
}

.analysis-yield-summary {
  display: grid;
  gap: 8px;
}

.analysis-yield-summary .stock-summary-table-wrap {
  margin-top: 0;
}

.margin-size-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.margin-size-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid #d7e4ee;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  box-shadow: var(--shadow);
}

.margin-size-card header {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3edf4;
}

.margin-size-card-title {
  display: grid;
  grid-template-columns: minmax(42px, 0.8fr) minmax(74px, 1fr) minmax(62px, 0.8fr);
  align-items: end;
  gap: 6px;
}

.margin-size-card-title strong {
  color: #103554;
  font-size: 18px;
  line-height: 1;
}

.margin-size-card-title div {
  display: grid;
  gap: 2px;
  text-align: right;
  min-width: 0;
}

.margin-size-card-title span {
  color: #657589;
  font-size: 10px;
  line-height: 1;
}

.margin-size-card-title b {
  color: #132f48;
  font-size: 12px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.margin-size-card-title .positive b {
  color: #168262;
}

.margin-size-card-title .negative b {
  color: #c43d3d;
}

.margin-quantity-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.margin-quantity-matrix-head,
.margin-quantity-matrix-row {
  display: grid;
  grid-template-columns: 54px repeat(4, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  text-align: right;
}

.margin-quantity-matrix-head span {
  color: #7a8798;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.margin-quantity-matrix-row b {
  color: #224762;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
}

.margin-quantity-matrix-row span {
  color: #263e55;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.margin-quantity-matrix-row .stock-quantity {
  font-weight: 800;
}

.margin-quantity-row {
  display: grid;
  grid-template-columns: 54px repeat(4, minmax(34px, 1fr));
  gap: 3px;
  align-items: center;
  color: #66778b;
  font-size: 10px;
  line-height: 1.08;
  text-align: center;
}

.margin-quantity-row:nth-child(n + 2) {
  grid-template-columns: 54px repeat(3, minmax(34px, 1fr));
}

.margin-quantity-row b {
  color: #224762;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
}

.margin-quantity-row span {
  display: grid;
  gap: 0;
  text-align: center;
}

.margin-quantity-row em {
  font-style: normal;
  color: #7a8798;
}

.margin-quantity-row strong {
  color: #17324b;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.margin-size-card header .margin-quantity-row strong {
  font-size: 10.5px;
  font-weight: 500;
}

.margin-quantity-row .stock-quantity strong {
  font-weight: 800;
}

.margin-size-card header .margin-quantity-row .stock-quantity strong {
  font-weight: 800;
}

.margin-size-lines {
  display: grid;
  gap: 6px;
}

.margin-size-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #e1e9f0;
  border-radius: 8px;
  background: #ffffff;
}

.margin-size-line > span {
  display: grid;
  gap: 1px;
  color: #1d4568;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
}

.margin-size-line > span em {
  color: #7a8898;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.margin-size-line dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.margin-size-line dl div,
.margin-size-card footer div {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.margin-size-line dt,
.margin-size-card footer span {
  color: #718095;
  font-size: 10px;
  white-space: nowrap;
}

.margin-size-line dd,
.margin-size-card footer strong {
  margin: 0;
  color: #142b41;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.margin-size-line .positive dd,
.margin-size-card footer .positive strong {
  color: #168262;
}

.margin-size-line .negative dd,
.margin-size-card footer .negative strong {
  color: #c43d3d;
}

.margin-size-card footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3edf4;
}

.margin-size-card footer div {
  padding: 10px 12px;
  border: 1px solid #dfe9f1;
  border-radius: 8px;
  background: #f9fcfe;
}

.margin-zero-stock-row td {
  background: #f4f6f8;
  color: #7b8794;
}

.margin-zero-stock-row td:first-child {
  border-left: 3px solid #a6b0ba;
}

.margin-production-cell {
  background: #eef7ff;
  color: #155c96;
  font-weight: 800;
}

.margin-zero-stock-row .margin-production-cell {
  background: #e8eef4;
}

.empty-card {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #ffffff;
}

.compact-table th,
.compact-table td,
.production-table th,
.production-table td {
  padding: 5px 8px;
  font-size: 12px;
}

.production-analysis {
  gap: 22px;
  align-content: start;
}

.production-line {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.actual-production-line {
  padding: 12px;
  border: 1px solid #b8ddd4;
  border-radius: 8px;
  background: #f0faf7;
}

.actual-production-line h2 {
  color: #0f6b57;
}

.actual-production-line .production-table {
  border-color: #c8e8df;
}

.actual-production-line .production-table th {
  background: #e3f4ef;
}

.actual-production-line .actual-basic-cut-row td {
  background: #f3fbf7;
}

.actual-production-line .actual-end-cut-row td {
  background: #fff8e8;
}

.actual-production-line .actual-basic-cut-row:hover td {
  background: #e7f6ef;
}

.actual-production-line .actual-end-cut-row:hover td {
  background: #ffefc8;
}

.negative-value {
  color: #d33b3b !important;
  font-weight: 700;
}

.production-table,
.sales-table {
  max-height: 330px;
}

.production-table {
  max-height: min(330px, 38vh);
}

.production-table th {
  text-align: center;
}

.production-table td {
  text-align: center;
  vertical-align: middle;
}

.production-table .production-number-cell {
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  padding-left: 12px;
  padding-right: 12px;
}

.production-table .production-center-cell {
  text-align: center;
}

.production-table .narrow-col {
  min-width: 58px;
  max-width: 76px;
  width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.sales-analysis {
  gap: 12px;
}

.sales-table th,
.sales-table td {
  padding: 4px 6px;
  font-size: 11.5px;
  line-height: 1.25;
}

.usage-layout {
  display: grid;
  gap: 18px;
  padding-bottom: 28px;
}

.usage-section {
  display: grid;
  gap: 10px;
}

.usage-section h2 {
  font-size: 18px;
}

.usage-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.usage-card {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.usage-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-dark);
  font-size: 15px;
}

.usage-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.usage-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #516171;
  font-size: 13px;
  line-height: 1.5;
}

.usage-card li::marker {
  color: var(--blue);
}

.user-management-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  gap: 14px;
  padding-bottom: 24px;
}

.user-register-card,
.user-list-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.user-register-card h2,
.user-list-card h2 {
  margin: 0;
  color: #0f2742;
  font-size: 20px;
}

.user-register-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.user-register-form {
  display: grid;
  gap: 10px;
}

.user-register-form label {
  display: grid;
  gap: 6px;
  color: #415267;
  font-size: 13px;
  font-weight: 800;
}

.user-table-wrap {
  max-height: 420px;
}

.user-role-select {
  width: 120px;
  min-height: 32px;
  padding: 6px 8px;
}

.user-role-select:disabled {
  color: #64748b;
  background: #f1f5f9;
}

.user-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.audit-log-card {
  grid-column: 1 / -1;
}

.audit-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.audit-log-filters {
  display: grid;
  grid-template-columns: 180px minmax(240px, 360px);
  gap: 8px;
}

.audit-log-filters select,
.audit-log-filters input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 0 11px;
  color: var(--ink);
  font: inherit;
}

.audit-filter-message {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.audit-log-card .user-table-wrap {
  max-height: 360px;
}

.permission-dialog,
.audit-detail-dialog {
  width: min(920px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.permission-dialog .dialog-head,
.audit-detail-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.permission-dialog h2,
.audit-detail-dialog h2 {
  margin: 0;
  font-size: 21px;
}

.permission-help {
  margin: 0;
  padding: 14px 18px 0;
  color: var(--muted);
  font-size: 13px;
}

.permission-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 18px;
}

.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid #dbe5ee;
  border-radius: 7px;
  background: #f8fbfe;
}

.permission-item input {
  min-height: auto;
  margin-top: 3px;
}

.permission-item span {
  display: grid;
  gap: 4px;
}

.permission-item b {
  color: #17324d;
  font-size: 14px;
}

.permission-item small {
  color: #6b7b8d;
  line-height: 1.4;
}

.permission-dialog .dialog-actions,
.audit-detail-dialog .dialog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.audit-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding: 16px 18px;
  background: #f6f9fc;
}

.audit-summary b {
  grid-row: span 3;
  color: #164f82;
  font-size: 18px;
}

.audit-undone {
  color: #b42318;
  font-weight: 700;
}

.audit-change-table {
  max-height: 470px;
  overflow: auto;
  padding: 0 18px 18px;
}

.audit-change-table table {
  width: 100%;
  table-layout: fixed;
}

.audit-change-table th:first-child {
  width: 170px;
}

.audit-change-table td {
  white-space: normal;
  word-break: break-word;
}

@keyframes auditTargetFlash {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(220, 38, 38, 0); }
  15%, 45%, 75% { box-shadow: inset 0 0 0 3px #dc2626; }
  30%, 60%, 90% { box-shadow: inset 0 0 0 1px #fecaca; }
}

tr.audit-target-flash td {
  animation: auditTargetFlash 3s ease-in-out 1;
  background: #fff1f1 !important;
}

@media (max-width: 760px) {
  .permission-checklist {
    grid-template-columns: 1fr;
  }
}

.simulation-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.simulation-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.simulation-panel h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.simulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.simulation-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.simulation-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 11px;
  color: var(--text);
  font-size: 14px;
}

.simulation-results {
  display: grid;
  gap: 8px;
}

.simulation-result-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.simulation-result-row:last-child {
  border-bottom: 0;
}

.simulation-result-row span {
  color: var(--muted);
}

.simulation-result-row strong {
  color: var(--blue-dark);
  font-size: 16px;
  text-align: right;
}

.empty-cell {
  color: var(--muted);
  text-align: center;
  padding: 22px;
}

@media (max-width: 860px) {
  body {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .sidebar {
    height: auto;
    min-height: auto;
    position: static;
  }

  .workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  #content {
    overflow: visible;
  }

  .table-wrap {
    max-height: calc(100vh - 180px);
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar,
  .filters {
    align-items: stretch;
    flex-direction: column;
  }

  .filters input,
  .filters select {
    width: 100%;
  }

  .simulation-layout,
  .simulation-grid,
  .status-graph-grid {
    grid-template-columns: 1fr;
  }

  .daily-bar-row {
    grid-template-columns: 52px minmax(80px, 1fr) 62px;
  }

  .fields {
    grid-template-columns: 1fr;
  }

  .summary-band {
    grid-template-columns: 1fr;
  }

  .inventory-quantity-band,
  .outbound-card-grid,
  .inbound-card-grid {
    grid-template-columns: 1fr;
  }
}

tr.lot-raw-row td {
  background: #fff8e7;
}

tr.lot-raw-row:hover td {
  background: #fff1cc;
}

tr.lot-product-row td {
  background: #eef8f7;
}

tr.lot-product-row:hover td {
  background: #dcf1ee;
}