:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #dfe3e8;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-light: #eaf1ff;
  --danger: #dc2626;
  --positive: #111827;
  --negative: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
header {
  background: #111827;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header span { color: #9ca3af; font-size: 12px; }

.tabs { display: flex; gap: 4px; padding: 12px 24px 0; }
.tab-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: #eceef1;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.tab-btn.active { background: var(--panel); color: var(--text); font-weight: 600; }

/* 하위 메뉴 (nav.js) */
.submenu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
.submenu-btn { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--text); }
.submenu-btn:hover { border-color: var(--accent); }
.submenu-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }
.submenu-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.submenu-soon { font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-left: 4px; font-weight: 400; }

.tab-panel { display: none; padding: 20px 24px 40px; }
.tab-panel.active { display: block; }

.layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.card + .card { margin-top: 16px; }
.card h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }

.field-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.field-row label { width: 60px; color: var(--muted); font-size: 12px; }
select, input[type=text], input[type=number] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}

.checklist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.checklist label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* 데이터 업로드 탭의 특성/값필드 선택 - 좁은 field-row 대신 카드 전체 너비를 쓰고,
   항목 수가 많아도(18개 특성 등) 여러 열로 자연스럽게 흘러가도록 grid로 배치한다. */
.upload-group { margin-bottom: 14px; }
.upload-group .group-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfc;
}
.checklist-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .checklist-grid { grid-template-columns: 1fr; }
}

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip button { border: none; background: none; color: var(--accent); cursor: pointer; font-weight: bold; }

.btn {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.btn.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { background: #fff; color: var(--danger); border: 1px solid var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }

.actions-row { display: flex; gap: 8px; margin-top: 14px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
th, td { border: 1px solid var(--border); padding: 8px 10px; text-align: right; white-space: nowrap; }
th { background: #f3f4f6; color: var(--muted); font-weight: 600; text-align: center; }
td.dim { text-align: left; }
td.neg { color: var(--negative); }
tfoot td { font-weight: 700; background: #f9fafb; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }

/* 원가요소 그룹 트리 (12차 신규, SAP 스타일 계층구조) */
.tree-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.tree-node { margin: 2px 0; }
.tree-node-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.tree-node-row:hover { background: #f3f4f6; }
.tree-node-label { font-weight: 600; }
.tree-node-code { color: var(--muted); font-size: 11px; }
.tree-children { margin-left: 20px; border-left: 1px dashed var(--border); padding-left: 10px; }
.tree-leaf-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px; color: var(--muted); }
.tree-leaf-row .tree-node-code { color: var(--muted); }
.tree-node-actions { margin-left: auto; display: flex; gap: 6px; }
.tree-node-actions button { font-size: 11px; padding: 2px 8px; }

.hint { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.status-msg { font-size: 12px; margin-top: 8px; }
.status-msg.error { color: var(--danger); }
.status-msg.ok { color: #059669; }

form.mgmt-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
form.mgmt-form label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
form.mgmt-form .full { grid-column: 1 / -1; }

/* 제조원가 입력 탭 - 그리드 셀 안의 인라인 숫자 입력(td 안에 꽉 채워 타이핑 편하게). */
input.grid-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 6px;
  font-size: 13px;
  text-align: right;
}
input.grid-input:focus { outline: none; border-color: var(--accent); background: var(--accent-light); }

/* ===== 원가센터회계(CCA) 탭 (15차 신규) ===== */
.cca-steps { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; background: #fff; }
.cca-steps button { border: none; background: #fff; padding: 9px 18px; font-size: 13px; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
.cca-steps button:last-child { border-right: none; }
.cca-steps button.active { background: var(--accent); color: #fff; font-weight: 600; }
.cca-subnav { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.cca-subnav button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--text); }
.cca-subnav button.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }
.cca-count { font-size: 11px; color: var(--muted); margin-left: 2px; }
.cca-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.cca-layout .card + .card { margin-top: 16px; }
@media (max-width: 900px) { .cca-layout { grid-template-columns: 1fr; } }
.cca-field { margin-bottom: 10px; }
.cca-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cca-field input, .cca-field select { width: 100%; }
.cca-field input[readonly] { background: #f3f4f6; color: var(--muted); }
.cca-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cca-toolbar h3 { margin: 0; margin-right: auto; }
.cca-check { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.cca-table td.dim { text-align: left; }
.cca-table tbody tr { cursor: pointer; }
.cca-table tbody tr:hover { background: #f9fafb; }
.cca-selected, .cca-table tbody tr.cca-selected { background: var(--accent-light) !important; }
.cca-inactive { color: #9ca3af; }
.cca-muted { color: var(--muted); font-size: 12px; }
.cca-warn { color: #b45309; font-size: 12px; }
.cca-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-bottom: 8px; }
td .cca-badge, .tree-node-row .cca-badge, .tree-leaf-row .cca-badge { margin-bottom: 0; }
.cca-badge.on { background: #dcfce7; color: #166534; }
.cca-badge.off { background: #f3f4f6; color: #6b7280; }
.cca-cat { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 4px; }
.cca-cat.pri { background: #eaf1ff; color: #1d4ed8; }
.cca-cat.sec { background: #fef3c7; color: #92400e; }
.tree-node-row { cursor: pointer; }
.cca-sep { width: 1px; background: var(--border); margin: 4px 4px; }

/* ===== CCTR간 step-down 배부 (16차, cc_step.js) ===== */
.cs-tabs { display: flex; gap: 2px; align-items: flex-end; border-bottom: 2px solid #111827; margin-bottom: 12px; flex-wrap: wrap; }
.cs-tab { border: 1px solid #111827; border-bottom: none; background: #fff; padding: 7px 18px 6px 14px; font-size: 14px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%); padding-right: 26px; color: var(--text); }
.cs-tab.active { background: #111827; color: #fff; font-weight: 600; }
.cs-tab-name { font-weight: 400; font-size: 12px; opacity: .85; }
.cs-tab-done { display: inline-block; margin-left: 6px; color: #059669; font-weight: 700; }
.cs-tab.active .cs-tab-done { color: #6ee7b7; }
.cs-tab-add { min-width: 60px; text-align: center; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cs-body { grid-template-columns: 1fr; } }
.cs-right .card + .card { margin-top: 16px; }
.cs-head-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.cs-stepno { font-weight: 700; font-size: 15px; }
.cs-dirty { color: #b45309; font-size: 12px; white-space: nowrap; }
.cs-flow { position: relative; display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 700px) { .cs-flow { grid-template-columns: 1fr; gap: 16px; } .cs-arrows { display: none; } }
.cs-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cs-arrows path { fill: none; stroke: #1f5f7a; stroke-width: 1.6; }
.cs-arrows marker path { fill: #1f5f7a; stroke: none; }
.cs-card { border: 1.5px solid #1f2937; border-radius: 12px; padding: 12px; background: #fff; position: relative; z-index: 1; }
.cs-card-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.cs-senders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cs-chip { display: inline-flex; align-items: center; gap: 4px; background: #f3f4f6; border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; }
.cs-chip.grp { background: #e0f2fe; border-color: #7dd3fc; }
.cs-x { border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--muted); padding: 0 4px; }
.cs-x:hover { color: var(--danger); }
.cs-add-row { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.cs-add-row select { max-width: 160px; }
.cs-field { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.cs-field label { font-size: 11px; color: var(--muted); }
.cs-field select { background: #1f5f7a; color: #fff; border-color: #1f5f7a; }
.cs-legend { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.cs-legend b { color: var(--text); font-weight: 600; }
.cs-recv { border: 1.5px solid #1f2937; border-radius: 12px; padding: 8px 10px 10px; background: #fff; margin-bottom: 10px; position: relative; z-index: 1; }
.cs-recv-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.cs-recv-btns button { border: 1px solid var(--border); background: #fff; border-radius: 4px; width: 22px; height: 22px; cursor: pointer; font-size: 11px; padding: 0; }
.cs-recv-btns button:disabled { opacity: .3; cursor: default; }
.cs-top { font-size: 10px; border: 1px solid #f59e0b; color: #b45309; border-radius: 4px; padding: 0 4px; }
.cs-skf { width: 100%; border-collapse: collapse; font-size: 12px; }
.cs-skf th, .cs-skf td { border: 1px solid #9ca3af; padding: 2px 6px; text-align: left; }
.cs-skf th { background: #f9fafb; font-weight: 500; }
.cs-skf tr.sel td { background: #eaf1ff; font-weight: 600; }
.cs-skf input { width: 100%; min-width: 60px; border: none; padding: 3px 2px; text-align: right; font-size: 12px; background: transparent; }
.cs-skf input.src-prev, .cs-skf input.src-none { background: #fef9c3; }
.cs-skf input.src-edit { background: #dcfce7; }
.cs-skf input.src-auto { background: #dbeafe; }   /* 31차: 자동계산 SKF 값 */
.cs-pct { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cs-pct input { width: 90px; text-align: right; }
.cs-pct-sum { font-size: 12px; margin-top: 4px; }
.cs-pct-sum b.ok { color: #059669; } .cs-pct-sum b.bad { color: var(--danger); }
.cs-skf-bar { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.cs-skf-bar .btn { white-space: nowrap; }
.cs-skf-hint { font-size: 11px; color: #92400e; }
.cs-empty { padding: 20px; border: 1.5px dashed var(--border); border-radius: 12px; text-align: center; }
.cs-run-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-run-row #cs_run { margin-left: auto; background: #1f5f7a; border-color: #1f5f7a; }
.cs-month-status { font-size: 12px; margin-top: 8px; color: var(--muted); }
.cs-mstat { display: inline-block; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); margin-right: 2px; }
.cs-mstat.done { background: #dcfce7; border-color: #86efac; color: #166534; }
.cs-mstat.next { background: #eaf1ff; border-color: #93c5fd; color: #1d4ed8; }
.cs-res-head { font-size: 12px; font-weight: 600; margin: 6px 0; }
.cs-errlist { color: var(--danger); font-size: 12px; margin: 4px 0; padding-left: 18px; }
.cs-warn { font-size: 12px; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; white-space: pre-line; }
.cs-lines { max-height: 360px; overflow: auto; }
.cs-lines table, .cs-runs { font-size: 12px; }
.cs-lines td.num, .cs-lines th.num, .cs-runs td.num, .cs-runs th.num { text-align: right; }
.cs-lines tfoot td { font-weight: 600; background: #f9fafb; }
.cs-runs tbody tr[data-run] { cursor: pointer; }
.cs-runs tbody tr[data-run]:hover { background: #f9fafb; }
.cs-ok { color: #059669; font-weight: 600; }
.cs-err { color: var(--danger); font-weight: 600; }
/* SKF 실적입력: 전월값 기본 채움 표시 */
#skfGridTable input.skf-prev { background: #fef9c3; }
.cs-runs td, .cs-lines td { text-align: left; }
/* 17차: 시스템 특성 표시 */
.sys-badge { white-space: nowrap; display: inline-block; font-size: 10px; padding: 0 6px; border-radius: 4px; background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; vertical-align: middle; }
.sys-badge.req { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
select.ver-select { min-width: 110px; }

/* ---------- 1. 레포트 > 코스트센터 레포트 (2026-09-29, cc_report.js) ---------- */
.cr-query-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.cr-q { display: flex; gap: 6px; align-items: center; }
.cr-q > label { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cr-q-btns { margin-left: auto; }
.cr-tilde { color: var(--muted); padding: 0 2px; }
.cr-cc-name { font-size: 12px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 18px 0 12px; }
.cr-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cr-t-code { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-t-name { font-size: 18px; font-weight: 600; }
.cr-t-meta { font-size: 12px; color: var(--muted); }
.cr-kpis { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.cr-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; border-top: 3px solid var(--border); }
.cr-kpi-primary { border-top-color: #64748b; }
.cr-kpi-received { border-top-color: #2563eb; }
.cr-kpi-sent { border-top-color: #d97706; }
.cr-kpi-pa { border-top-color: #7c3aed; }
.cr-kpi-balance { border-top-color: #111827; }
.cr-kpi-label { font-size: 11px; color: var(--muted); }
.cr-kpi-val { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cr-kpi-val.neg { color: var(--negative); }
@media (max-width: 700px) { .cr-kpis { grid-template-columns: repeat(2, 1fr); } }
.cr-card { margin-top: 14px; }
.cr-card + .cr-card { margin-top: 14px; }
.cr-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cr-card-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-levels { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.cr-table td.cr-num, .cr-dt td.cr-num { font-variant-numeric: tabular-nums; }
.cr-table th { position: sticky; top: 0; }
.cr-table td.neg, .cr-dt td.neg { color: var(--negative); }
.cr-name-h { text-align: left !important; min-width: 320px; }
.cr-row.cr-group td { background: #f8fafc; font-weight: 600; }
.cr-row.cr-group.cr-d0 td { background: #eef2f7; }
.cr-row.cr-ce td { font-weight: 400; }
.cr-code { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.cr-link { color: inherit; text-decoration: none; }
.cr-link:hover { color: var(--accent); text-decoration: underline; }
.cr-tog { border: none; background: none; cursor: pointer; width: 18px; padding: 0; color: var(--muted); font-size: 11px; }
.cr-tog-sp { display: inline-block; width: 18px; }
.cr-click { cursor: pointer; }
.cr-click:hover { background: var(--accent-light) !important; color: var(--accent); }
.cr-sel td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
td.cr-sel-cell { background: var(--accent-light) !important; color: var(--accent); font-weight: 700; }
.cr-bal { font-weight: 600; }
.cr-zero { color: #c0c6cf; }
.cr-empty { text-align: center !important; color: var(--muted); padding: 18px; }
.cr-tag { font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.cr-open { border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; font-size: 11px; padding: 0 4px; color: var(--accent); }
.cr-detail-title { color: var(--text); font-weight: 600; }
.cr-dtabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cr-dtab { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--muted); }
.cr-dtab.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }
#cr_detail_body { max-height: 560px; overflow: auto; }
.cr-dt { font-size: 12px; }
.cr-dt th { position: sticky; top: 0; z-index: 1; }
.cr-dt td { padding: 6px 8px; }
.cr-reason { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.cr-muted { color: var(--muted); font-size: 11px; }
.cr-side { font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.cr-side-R { background: #eaf1ff; color: #2563eb; }
.cr-side-S { background: #fff4e5; color: #b45309; }

/* ---------- 3. 배부실행 > CCTR to PA 배부 (2026-09-29 19차, pa_alloc.js) ---------- */
.pa-flow { display: grid; grid-template-columns: minmax(230px, 1fr) 28px minmax(260px, 1.25fr); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .pa-flow { grid-template-columns: 1fr; } .pa-arrow { transform: rotate(90deg); } }
.pa-arrow { font-size: 22px; color: #1f5f7a; text-align: center; padding-top: 70px; }
.pa-field-plain select { background: #fff; color: var(--text); border-color: var(--border); }
.pa-recv { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fafbfc; }
.pa-recv-head { display: flex; gap: 6px; align-items: center; }
.pa-recv-head select { flex: 1; min-width: 0; }
.pa-recv-no { width: 20px; height: 20px; border-radius: 50%; background: #1f5f7a; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pa-recv-vals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pa-all { font-size: 11px; color: var(--muted); }
.pa-status { font-size: 12px; margin-top: 10px; line-height: 1.7; }
.pa-badge { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 6px; border: 1px solid var(--border); color: var(--muted); }
.pa-badge.ok { background: #dcfce7; border-color: #86efac; color: #166534; }
.pa-badge.err { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.pa-stale { color: #92400e; background: #fef3c7; border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.pa-msgs { font-size: 12px; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; line-height: 1.6; }
.pa-msgs.error { background: #fee2e2; color: #991b1b; }
.pa-msgs.warn { background: #fef3c7; color: #92400e; }
.pa-res-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.pa-t { font-size: 12px; margin-bottom: 10px; }
.pa-t td, .pa-t th { padding: 5px 8px; }
.pa-t td { text-align: right; font-variant-numeric: tabular-nums; }
.pa-t td.dim { text-align: left; }
.pa-t td.neg { color: var(--negative); }
.pa-t tfoot td { font-weight: 700; background: #f9fafb; }
.pa-left { color: #b45309; font-weight: 600; }
.pa-seg-head { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 8px 0 6px; }
.pa-seg-wrap { max-height: 420px; overflow: auto; }
.pa-seg-wrap th { position: sticky; top: 0; }
.pa-senders summary { cursor: pointer; font-size: 12px; font-weight: 600; margin: 6px 0; }
.pa-run-msg { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pa-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .pa-body { grid-template-columns: 1fr; } }
.pa-t td.pa-seg { white-space: normal; min-width: 220px; line-height: 1.4; }

/* ---------- 1. 레포트 > CCTR 잔액 현황 / 배부 흐름도 (2026-09-29 20차, cc_overview.js) ---------- */
.ov-kpis { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.ov-kpi-left { border-top-color: #b45309; }
.ov-left { color: #b45309 !important; }
.ov-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov-chk { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.ov-wrap { max-height: 640px; overflow: auto; }
.ov-wrap th { cursor: pointer; }
.ov-wrap th:hover { color: var(--accent); }
#ob_table td.dim:nth-child(3) { white-space: normal; min-width: 180px; }
.ov-row-left td { background: #fffbeb; }
.ov-sub td { background: #f1f5f9; font-weight: 600; }
.ov-st { font-size: 11px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.ov-st.done { background: #dcfce7; color: #166534; }
.ov-st.left { background: #fef3c7; color: #92400e; }
.of-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text); margin-bottom: 10px; }
.of-lg { display: inline-flex; align-items: center; gap: 5px; }
.of-lg i { width: 14px; height: 6px; border-radius: 3px; display: inline-block; }
.of-lg i.of-lg-own { width: 6px; height: 12px; background: #52514e; border-radius: 2px; }
.of-scroll { overflow-x: auto; }
.of-inner { position: relative; }
.of-heads { position: relative; height: 38px; }
.of-head { position: absolute; top: 0; font-size: 11px; color: var(--muted); line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 2px solid var(--border); padding-left: 6px; }
.of-head b { color: var(--text); font-weight: 600; }
.of-head span { display: block; font-size: 10px; }
.of-svg { display: block; }
.of-link { fill: none; stroke-opacity: .38; transition: stroke-opacity .12s; }
.of-link:hover { stroke-opacity: .75; }
.of-svg.of-dim .of-link { stroke-opacity: .08; }
.of-svg.of-dim .of-link.on { stroke-opacity: .75; }
.of-svg.of-dim .of-node:not(.on) text { opacity: .45; }
.of-node-cc { fill: #cfd4da; }
.of-node-own { fill: #52514e; }
.of-click { cursor: pointer; }
.of-label { font-size: 11px; fill: #52514e; }
.of-label .of-code { fill: #0b0b0b; font-weight: 600; }
.of-label .of-val { fill: #6b7280; font-variant-numeric: tabular-nums; }
.of-label .of-left { fill: #b45309; font-weight: 600; }
.of-label-sink .of-code { fill: #0b0b0b; }
.of-node.on text .of-code { text-decoration: underline; }
.of-tip { position: fixed; z-index: 50; display: none; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 8px 10px; font-size: 12px; pointer-events: none; max-width: 320px; line-height: 1.5; }
.of-tip table { border-collapse: collapse; width: auto; margin-top: 4px; background: transparent; }
.of-tip td { border: none; padding: 1px 8px 1px 0; font-size: 12px; }
.of-tip td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.of-tip td:first-child { text-align: left; color: var(--muted); }

/* ---- 21차: 자재마스터 조회/변경 (material.js) ---- */
.mt-toolbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.mt-toolbar h3 { margin: 0; }
.mt-filters, .mt-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.mt-filters input[type=text] { min-width: 240px; }
.mt-spacer { flex: 1; }
.mt-bulk { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.mt-table-wrap { margin-top: 10px; max-height: 62vh; overflow: auto; }
.mt-table th { position: sticky; top: 0; z-index: 1; }
.mt-table td { text-align: left; padding: 3px 6px; }
.mt-table td.mt-c { text-align: center; }
.mt-table input[type=text], .mt-table select { border: 1px solid transparent; background: transparent; padding: 4px 6px; font-size: 12px; border-radius: 4px; width: 100%; box-sizing: border-box; }
.mt-table input[type=text]:hover, .mt-table select:hover { border-color: var(--border); }
.mt-table input[type=text]:focus, .mt-table select:focus { border-color: var(--accent); background: #fff; outline: none; }
.mt-table .mt-name { min-width: 260px; }
.mt-table .mt-mid { min-width: 110px; }
.mt-table .mt-unit { min-width: 56px; }
.mt-table select { min-width: 84px; }
.mt-code-cell { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.mt-table input.mt-code { min-width: 90px; border-color: var(--accent); background: #fff; }
.mt-row-dirty td { background: #fffbeb; }
.mt-table td.mt-cell-dirty { background: #fef3c7; }
.mt-row-new td { background: #eff6ff; }
.mt-row-off td { color: var(--muted); }
.mt-row-off input[type=text] { color: var(--muted); }
.mt-empty { text-align: center !important; color: var(--muted); padding: 20px !important; }
.mt-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---- 21차: PA 특성 도출 규칙 (deriv.js) ---- */
.dv-intro { margin: 0 0 12px; }
.dv-layout { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.dv-layout .card + .card { margin-top: 16px; }
@media (max-width: 900px) { .dv-layout { grid-template-columns: 1fr; } }
#dv_steps { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dv-step { display: flex; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; background: #fff; }
.dv-step:hover { border-color: var(--accent); }
.dv-step.active { border-color: var(--accent); background: var(--accent-light); }
.dv-step.off { opacity: .55; }
.dv-step-no { font-weight: 600; color: var(--accent); min-width: 28px; font-variant-numeric: tabular-nums; }
.dv-step-name { font-weight: 600; font-size: 13px; }
.dv-step-how { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dv-tgt { color: var(--text); font-weight: 600; }
.dv-tag { font-size: 10px; font-weight: 400; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.dv-form { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; align-items: center; font-size: 13px; }
.dv-form > label { color: var(--muted); font-size: 12px; }
.dv-form select, .dv-form input[type=text] { max-width: 420px; }
.dv-radio, .dv-checks { display: flex; gap: 16px; }
.dv-radio label, .dv-checks label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.dv-map-wrap { max-height: 50vh; overflow: auto; margin: 8px 0; }
.dv-map th { position: sticky; top: 0; }
.dv-map td { padding: 2px 4px; text-align: left; }
.dv-map input[type=text] { width: 100%; box-sizing: border-box; border: 1px solid transparent; padding: 4px 6px; font-size: 12px; border-radius: 4px; }
.dv-map input[type=text]:focus { border-color: var(--accent); outline: none; }
.dv-map .dv-res-h { background: var(--accent-light); color: var(--accent); }
.dv-test { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-test-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.dv-test-result { margin-top: 10px; }
.dv-test-result td { text-align: left; }
.dv-test-result tr.dv-skip td { color: var(--muted); }
.dv-rd { flex-wrap: wrap; gap: 8px; }
.dv-rd label { width: auto; }

/* ---- 21차: 값필드 수식 편집기 ---- */
.fb-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.fb-row { display: flex; gap: 6px; align-items: center; }
.fb-row select:first-child { width: 110px; }
.fb-row select:nth-child(2) { min-width: 260px; }
.fb-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fb-preview { font-size: 13px; color: var(--text); font-weight: 600; }
.fb-direct { margin-top: 8px; font-size: 12px; color: var(--muted); }
.fb-direct summary { cursor: pointer; margin-bottom: 6px; }

/* ---------- 1. 레포트 > 손익계산서 (2026-10-10 28차, pl_report.js) ---------- */
.pl-q2 { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pl-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-arrow { color: var(--muted); font-size: 12px; }
.pl-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pl-chk.pl-dis { color: var(--muted); cursor: not-allowed; }
.pl-filter-q { flex-wrap: wrap; }
.pl-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-light); color: var(--accent); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; cursor: pointer; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-chip b { font-weight: 600; }
.pl-chip-x { border: none; background: transparent; cursor: pointer; color: var(--accent); font-weight: 700; padding: 0 5px; font-size: 14px; }
.pl-chip-x:hover { color: var(--danger); }
.pl-muted { color: var(--muted); font-size: 12px; }
.pl-pick { margin-top: 10px; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; background: #fbfcff; }
.pl-pick-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pl-pick-head input { width: 220px; }
.pl-pick-list { max-height: 260px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; }
.pl-pick-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.pl-pick-foot .pl-muted { margin-right: auto; }
.pl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pl-t-main { font-size: 18px; font-weight: 700; }
.pl-t-meta { font-size: 12px; color: var(--muted); }
.pl-colbtns { display: inline-flex; gap: 4px; align-items: center; margin-left: 10px; }
.pl-warn { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; line-height: 1.6; }
.pl-wrap { max-height: 72vh; overflow: auto; background: var(--panel); }
.pl-table { width: auto; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pl-table th, .pl-table td { border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 10px; }
.pl-table thead th { position: sticky; z-index: 2; background: #f3f4f6; color: var(--text); font-weight: 600; }
.pl-table thead tr:nth-child(1) th { top: 0; }
.pl-table thead tr:nth-child(2) th { top: 33px; }
.pl-table thead tr:nth-child(3) th { top: 66px; }
.pl-table th.pl-name-h, .pl-table td.pl-name { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 220px; background: var(--panel); }
.pl-table th.pl-name-h { z-index: 3; background: #f3f4f6; }
.pl-table th.pl-col-total { background: #e4e9f2; min-width: 110px; }
.pl-table th.pl-l0 { background: #e9edf4; }
.pl-table th.pl-l1 { background: #f0f3f8; font-weight: 600; }
.pl-table th.pl-l2 { background: #f7f8fa; font-weight: 500; }
.pl-table th.pl-col-sub { color: var(--muted); font-weight: 600; }
.pl-table th.pl-col-h { min-width: 100px; white-space: normal; max-width: 180px; }
.pl-ctog { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 0 4px 0 0; }
.pl-ctog:hover { color: var(--accent); }
.pl-num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-table td.neg { color: var(--negative); }
.pl-c-total { background: #f5f7fb; font-weight: 600; }
.pl-c-sub { background: #fafbfd; }
.pl-c-l0 { background: #f7f9fc; }
.pl-row.pl-main td { font-weight: 600; }
.pl-row.pl-main td.pl-name { background: #f8fafc; }
.pl-row.pl-subtotal td { background: #eef2f7; border-top: 1px solid #c7cfdb; }
.pl-row.pl-subtotal td.pl-name { background: #eef2f7; }
.pl-row.pl-subtotal td.pl-c-total { background: #e4e9f2; }
.pl-row.pl-child td { font-weight: 400; color: #374151; }
.pl-row.pl-memo td { font-weight: 400; color: var(--muted); font-style: italic; }
.pl-tog { border: none; background: none; cursor: pointer; width: 18px; padding: 0; color: var(--muted); font-size: 11px; }
.pl-tog:hover { color: var(--accent); }
.pl-tog-sp { display: inline-block; width: 18px; }
.pl-line-link { cursor: pointer; }
.pl-line-link:hover { color: var(--accent); text-decoration: underline; }
.pl-indent { display: inline-block; width: 30px; }
.pl-code { color: var(--muted); font-size: 11px; font-weight: 400; }
.pl-zero { color: #c0c6cf; }
.pl-pct { font-size: 11px; color: var(--muted); font-weight: 400; }

/* 영업사원마스터 (2026-10-13, salesrep.js) - 표는 자재마스터(.mt-*) 스타일 재사용 */
.mt-table .sr-sub { display: block; font-size: 11px; color: var(--muted); padding: 0 6px 2px; white-space: nowrap; }
#sr_import.sr-attn { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mt-table .cu-addr { min-width: 240px; }

/* 31차: SKF 자동계산(user exit) - skf_exit.js / SKF 실적입력 자동값 */
#skfGridTable input.skf-auto { background: #dbeafe; }
.skf-auto-tag { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 500; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 0 6px; }
.sx-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .sx-layout { grid-template-columns: 1fr; } }
.sx-list tbody tr { cursor: pointer; }
.sx-list tbody tr:hover { background: #f9fafb; }
.sx-list tbody tr.sel { background: #eef2ff; }
.sx-badge { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid; white-space: nowrap; }
.sx-badge.sx-PA_VALUE { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.sx-badge.sx-CC_COST { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.sx-calc { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 14px; }
.sx-calc label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.sx-rules td { vertical-align: top; }
.sx-cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.sx-and { font-size: 11px; font-weight: 700; color: var(--muted); }
.sx-eq { color: var(--muted); }
.sx-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sx-preview { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* 31차: CCTR 재대체 (cc_report.js 상세 > 직접발생) */
.rp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.rp-bar .rp-count { font-weight: 600; }
.rp-amt { width: 120px; text-align: right; }
.rp-tag { display: inline-block; font-size: 11px; border-radius: 999px; padding: 0 6px; margin-right: 4px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.rp-tag.rp-done { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
tr.rp-cancelled td { color: #9ca3af; text-decoration: line-through; }

/* 32차: 구분손익 조회 결과 그리드 (pa_grid.js, Tabulator) */
.pg-col { min-width: 0; }
.pg-empty { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 14px; text-align: center; color: var(--muted); }
.pg-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; font-size: 13px; }
.pg-toolbar label { color: var(--muted); font-size: 12px; }
.pg-toolbar select, .pg-toolbar input { font-size: 13px; padding: 4px 6px; }
.pg-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.pg-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.pg-note { color: #047857; font-size: 12px; }
#pg_grid { border: 1px solid var(--border); border-radius: 0 0 8px 8px; background: #fff; font-size: 13px; }
#pg_grid .tabulator-header { background: #f3f4f6; }
#pg_grid .tabulator-col { background: #f3f4f6; }
#pg_grid .tabulator-col .tabulator-col-title { white-space: normal; font-weight: 600; }
#pg_grid .tabulator-cell { font-variant-numeric: tabular-nums; }
#pg_grid .tabulator-cell.pg-neg { color: var(--negative); }
#pg_grid .pg-zero { color: #c0c4cc; }
#pg_grid .tabulator-cell.pg-diff { background: #fafafa; }
#pg_grid .pg-rownum, #pg_grid .tabulator-row-header { color: #9ca3af; background: #f9fafb; font-size: 11px; }
#pg_grid .tabulator-row.tabulator-group { background: #eef2ff; font-weight: 600; border-top: 1px solid #c7d2fe; }
#pg_grid .tabulator-row.tabulator-group.tabulator-group-level-1 { background: #f5f7ff; }
#pg_grid .tabulator-row.tabulator-group.tabulator-group-level-2 { background: #fafbff; }
#pg_grid .pg-gcount { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; }
#pg_grid .tabulator-row.tabulator-calcs { background: #f8fafc; font-weight: 600; }
#pg_grid .tabulator-footer .tabulator-calcs-holder { background: #eef2ff; border-top: 2px solid #111827; }
#pg_grid .tabulator-footer .tabulator-row.tabulator-calcs { background: #eef2ff; font-weight: 700; }
#pg_grid .tabulator-header-filter input { font-size: 12px; padding: 2px 4px; }

/* 33차: PA 데이터 다운로드 (pa_extract.js, Jspreadsheet CE 워크시트) */
.px-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .px-layout { grid-template-columns: 1fr; } }
.px-col { min-width: 0; }
.px-list { max-height: 300px; overflow: auto; }
.px-item { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 13px; cursor: pointer; }
.px-code { color: var(--muted); font-size: 11px; }
.px-n { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.px-all { float: right; font-weight: 400; font-size: 12px; }
.px-info { background: #fff; border: 1px solid var(--border); border-radius: 8px 8px 0 0; border-bottom: none; padding: 8px 12px; font-size: 13px; color: var(--text); }
.px-warn { color: #b45309; }
.px-sheet { background: #fff; border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 6px; min-height: 120px; overflow: hidden; }
.px-empty { padding: 30px; text-align: center; color: var(--muted); }
.px-sheet .jexcel_content { max-width: 100%; }
.px-sheet .jexcel { font-size: 12px; }
.px-sheet .jexcel > thead > tr > td { font-weight: 600; background: #f3f4f6; }
.px-plain table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.px-plain table td.neg { color: var(--negative); }
/* 머리글 2줄(제목 + 필터)이 둘 다 top:0으로 겹쳐 제목이 가려지던 것 - 필터 줄을 제목 줄 아래로 */
.px-sheet .jexcel > thead > tr:nth-child(1) > td { z-index: 3; }
.px-sheet .jexcel > thead > tr:nth-child(2) > td { top: 24px; z-index: 2; background: #fff; }

/* ===== 34차: 제품별 손익(브릿지 차트) + 제품손익 구성 (product_pl.js) ===== */
.btn.tiny { padding: 2px 7px; font-size: 11px; }
.pp-inline { display: inline-flex; gap: 4px; align-items: center; color: var(--text) !important; font-weight: 400 !important; }
.pp-muted { color: var(--muted); font-size: 12px; }
.pp-code { color: var(--muted); font-size: 11px; font-family: ui-monospace, Consolas, monospace; }
.pp-zero { color: #c3c8cf; }
.pp-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0; }
.pp-levels { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.pp-lv { border: 0; border-right: 1px solid var(--border); background: #fff; padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--text); }
.pp-lv:last-child { border-right: 0; }
.pp-lv.active { background: var(--accent); color: #fff; font-weight: 600; }
.pp-lv:disabled { color: #b8bec6; cursor: not-allowed; }
.pp-crumbs { font-size: 13px; }
.pp-crumbs a { color: var(--accent); text-decoration: none; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-crumb-k { color: var(--muted); font-size: 11px; }
.pp-sep { color: var(--muted); margin: 0 6px; }
.pp-info { margin-left: auto; color: var(--muted); font-size: 12px; }
.pp-warn { background: #fff7e6; border: 1px solid #f5d38a; color: #7a5200; border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; }
.pp-warn summary { cursor: pointer; margin-top: 4px; }
.pp-warn table { border-collapse: collapse; margin-top: 4px; }
.pp-warn td { padding: 2px 10px 2px 0; }
.pp-chart-card { position: relative; }
.pp-chart-title { font-size: 14px; margin-bottom: 4px; }
.pp-chart { position: relative; width: 100%; overflow-x: auto; }
.pp-chart svg { display: block; }
.pp-grid { stroke: #eceff3; stroke-width: 1; }
.pp-grid.zero { stroke: #9aa3ad; }
.pp-tick { fill: var(--muted); font-size: 11px; }
.pp-val { fill: var(--text); font-size: 12px; font-weight: 600; }
.pp-pct { fill: var(--muted); font-size: 10.5px; }
.pp-lab { fill: var(--text); font-size: 12px; }
.pp-conn { stroke: #9aa3ad; stroke-width: 1; stroke-dasharray: 3 3; }
.pp-bar:hover rect:first-child { filter: brightness(1.12); }
.pp-tip { position: absolute; z-index: 5; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 8px 10px; font-size: 12px; pointer-events: none; max-width: 420px; }
.pp-tip table { border-collapse: collapse; margin-top: 4px; }
.pp-tip td { padding: 1px 8px 1px 0; white-space: nowrap; }
.pp-tip td.num { text-align: right; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-top: 4px; }
.pp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.pp-tbl-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.pp-tbl-head input[type=search] { width: 200px; }
.pp-table { max-height: 560px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.pp-tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.pp-tbl th { position: sticky; top: 0; z-index: 2; background: #f3f5f8; border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap; cursor: pointer; font-weight: 600; }
.pp-tbl th.sorted { color: var(--accent); }
.pp-tbl td { border-bottom: 1px solid #eef0f3; padding: 5px 8px; white-space: nowrap; }
.pp-tbl td.num, .pp-tbl th.num { text-align: right; }
.pp-tbl .pp-name { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.pp-tbl th.pp-name { background: #f3f5f8; z-index: 3; }
.pp-tbl td.sub { background: #f6f7f9; }
.pp-tbl td.margin { font-weight: 600; }
.pp-tbl td.neg { color: var(--negative); }
.pp-tbl tbody tr { cursor: pointer; }
.pp-tbl tbody tr:hover td { background: #f3f7ff; }
.pp-tbl tr.pp-total td { font-weight: 700; background: #f9fafb; }
.pp-tbl tr.pp-sel td { background: var(--accent-light) !important; }
.pp-drill { border: 1px solid var(--border); background: #fff; border-radius: 4px; width: 20px; height: 20px; line-height: 16px; font-size: 11px; cursor: pointer; margin-right: 6px; padding: 0; color: var(--accent); }
.pp-drill:hover { background: var(--accent); color: #fff; }
.pp-drill-sp { display: inline-block; width: 26px; }
.ppc-lines { border-collapse: collapse; font-size: 13px; }
.ppc-lines th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.ppc-lines td { padding: 4px 8px; border-bottom: 1px solid #eef0f3; }
.ppc-lines th.num, .ppc-lines td.num { text-align: right; }
.ppc-lines input:not([type=checkbox]) { padding: 4px 6px; }
.ppc-lines input.ppc-code { width: 90px; text-transform: uppercase; }
.ppc-lines tr.ppc-off td { color: #9aa3ad; }
.ppc-ord { white-space: nowrap; }
.ppc-ord .btn { margin-right: 2px; }
.ppc-chk { display: inline-flex; align-items: center; margin-right: 4px; }
.ppc-good { color: #2f7a4f; font-size: 12px; }
.ppc-bad { color: var(--danger); font-weight: 600; font-size: 12px; }
.ppc-map-wrap { overflow: auto; max-height: 620px; border: 1px solid var(--border); border-radius: 6px; margin-top: 6px; }
.ppc-map { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.ppc-map th { position: sticky; top: 0; z-index: 2; background: #f3f5f8; border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; font-weight: 600; white-space: nowrap; }
.ppc-map td { border-bottom: 1px solid #eef0f3; padding: 4px 6px; vertical-align: top; }
.ppc-map .ppc-vf { position: sticky; left: 0; background: #fff; z-index: 1; white-space: nowrap; }
.ppc-map th.ppc-vf { background: #f3f5f8; z-index: 3; }
.ppc-map .ppc-def { background: #f8fafc; }
.ppc-map select { font-size: 12px; padding: 2px 4px; max-width: 130px; }
.ppc-map td.ppc-own select { border-color: var(--accent); background: var(--accent-light); }
.ppc-map td.ppc-bad-cell { background: #fdecec; }
.ppc-amt { color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; }
.ppc-lines, .ppc-map { width: auto; }
.ppc-lines td, .ppc-map td, .ppc-map th { text-align: left; }
.ppc-lines td.num, .ppc-lines th.num { text-align: right; }

/* ===== 35차: M2M 자재 등록 (m2m.js) + 제조원가 그리드 M2M 표시 ===== */
.m2m-bar { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.m2m-bar input[type=search] { width: 220px; }
.m2m-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.m2m-tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.m2m-tbl th { position: sticky; top: 0; background: #f3f5f8; border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; font-weight: 600; white-space: nowrap; }
.m2m-tbl td { border-bottom: 1px solid #eef0f3; padding: 4px 8px; text-align: left; }
.m2m-tbl input:not([type=checkbox]) { padding: 4px 6px; width: 150px; }
.m2m-tbl input.m2m-note { width: 220px; }
.m2m-tbl .m2m-name { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2m-tbl .m2m-arrow { color: var(--accent); font-weight: 700; }
.m2m-tbl tr.m2m-off td { color: #a0a7b0; }
.m2m-tbl tr.m2m-dirty td { background: #fffbea; }
.m2m-sep { display: inline-block; width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.mc-m2m { display: block; font-size: 11px; color: #1f5f7a; font-weight: 400; }
.mc-m2m.warn { color: #9a6b00; }

/* ===== 36차: 제품별 손익 단위당 보기 ===== */
.pp-view { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pp-view button { border: 0; background: #fff; padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.pp-view button + button { border-left: 1px solid var(--border); }
.pp-view button.active { background: var(--accent); color: #fff; font-weight: 600; }
.pp-note { font-size: 11.5px; color: #9a6b00; margin-left: 6px; }
.pp-empty { padding: 60px 0; text-align: center; color: var(--muted); }
.pp-tbl td.pp-qty, .pp-tbl th.pp-qty { color: #4b5563; background: #fafbfc; }
/* 37차: M2M 우선순위 */
.m2m-tbl input.m2m-pr { width: 60px; }
.m2m-tbl input.m2m-multi { border-color: #d29c00; background: #fff8e1; }

/* 2026-10-21: 배부결과 검증창 */
.cs-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-verify-grid .cs-lines { max-height: 260px; }
@media (max-width: 1100px) { .cs-verify-grid { grid-template-columns: 1fr; } }

/* 39차: 3. 배부실행 > 직접비 배부 (위 CCTR 잔액 표 + 아래 고른 CCTR 레포트/재대체) */
#scr-dc-repost .dc-embed-query .cr-query-row { display: none; }
#scr-dc-repost .dc-embed-query { padding: 0; border: 0; background: transparent; box-shadow: none; margin: 0; }
#scr-dc-repost .dc-embed-query .status-msg:empty { display: none; }
#scr-dc-repost .ov-wrap { max-height: 360px; }
#scr-dc-repost tr.ov-pick { cursor: pointer; }
#scr-dc-repost tr.ov-pick:hover td { background: var(--accent-light); }
#scr-dc-repost tr.ov-picked td { background: var(--accent-light); font-weight: 600; }
.dc-pick-hint { margin: 14px 0; padding: 18px; text-align: center; color: var(--muted, #64748b); border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; }
.dc-report { margin-top: 6px; padding-top: 4px; border-top: 2px solid var(--accent); }