#panel-erp { --erp-blue:#1d4ed8; --erp-red:#be123c; --erp-line:#cbd5e1; }
.erp-intro { display:flex;justify-content:space-between;align-items:start;gap:16px;margin:18px 0; }
.erp-intro h2 { margin:0 0 7px;font-size:22px;color:#0f172a; }
.erp-note { color:#475569;font-size:13px;line-height:1.7;margin:6px 0; }
.erp-filters { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px;background:#f1f5f9;border:1px solid var(--erp-line);border-radius:10px; }
.erp-filters label { display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#334155; }
.erp-filters input,.erp-filters select { width:100%;min-height:44px;border:1px solid #94a3b8;border-radius:6px;padding:9px;background:white;color:#0f172a;font:inherit; }
.erp-actions { display:flex;align-items:end;gap:8px;flex-wrap:wrap; }
.erp-actions button { min-height:44px; }
.erp-status { min-height:24px;margin:14px 0;font-size:13px;line-height:1.6;color:#334155; }
.erp-error { color:#b91c1c; }
.erp-kpis { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.erp-kpi { background:white;border:1px solid var(--erp-line);border-top:3px solid #334155;padding:16px;border-radius:6px; }
.erp-kpi:first-child { border-top-color:var(--erp-blue); }.erp-kpi:nth-child(2) { border-top-color:var(--erp-red); }
.erp-kpi span { display:block;font-size:12px;color:#475569; }.erp-kpi strong { display:block;font-size:22px;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.erp-section { margin-top:24px; }.erp-section h3 { font-size:16px;margin:0 0 10px; }
.erp-table { overflow:auto;max-height:460px;border:1px solid var(--erp-line);border-radius:7px;background:white; }
.erp-table table { width:max-content;min-width:100%;table-layout:auto;border-collapse:collapse;font-size:12px; }
.erp-table th,.erp-table td { padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap; }
.erp-table th { position:sticky;top:0;z-index:1;background:#f1f5f9;color:#334155; }
.erp-table td.erp-num { text-align:right;font-variant-numeric:tabular-nums; }
.erp-table td { overflow:visible;text-overflow:clip;max-width:none; }
.erp-split > * { min-width:0; }
#tab-erp { border:0;border-bottom:3px solid transparent;background:transparent;font-family:inherit; }
#tab-erp.active { border-bottom-color:#1d4ed8;background:#eff6ff; }
.erp-link { padding:4px 0;background:none;border:0;color:#1d4ed8;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit; }
.erp-bars { min-width:140px;width:22%; }.erp-bar { display:block;height:6px;margin:4px 0; }.erp-bar.sales { background:var(--erp-blue); }.erp-bar.purchase { background:var(--erp-red); }
.erp-split { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.erp-pager { display:flex;justify-content:center;align-items:center;gap:15px;margin:14px 0;font-size:13px; }
.erp-pager button { min-width:64px;min-height:44px; }
.erp-pager span { white-space:nowrap; }
.erp-shortcut { padding:12px 15px;margin:12px 0;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;line-height:1.7;font-size:13px; }
#panel-erp :focus-visible { outline:3px solid #2563eb;outline-offset:3px; }
@media(max-width:750px) { .erp-filters,.erp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.erp-split { grid-template-columns:1fr; }.erp-intro { flex-direction:column; }.erp-kpi strong { font-size:18px; } }
@media(max-width:420px) { .erp-filters { grid-template-columns:1fr; }.erp-pager { gap:8px; } }
.trade-table-scroll { width:100%;overflow:auto;max-height:650px;border:1px solid #cbd5e1;border-radius:8px; }
.trade-table-scroll table { table-layout:auto;width:max-content;min-width:100%;font-size:13px; }
.trade-table-scroll th,.trade-table-scroll td { padding:10px 12px;white-space:nowrap;overflow:visible;text-overflow:clip;vertical-align:top; }
.trade-table-scroll th { position:sticky;top:0;background:#f1f5f9;z-index:1; }
.trade-table-scroll .trade-wrap { display:block;min-width:150px;max-width:280px;white-space:normal;overflow-wrap:anywhere; }
.trade-table-scroll .trade-number { text-align:right;font-variant-numeric:tabular-nums; }
.trade-dataset-label { display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin-bottom:12px; }
.trade-dataset-label select,.erp-chart-heading select { min-height:40px;padding:7px 10px;border:1px solid #94a3b8;border-radius:6px;background:white;font:inherit;max-width:100%; }
.erp-chart-heading { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
.erp-chart-heading label { font-size:12px;color:#475569; }
.erp-chart { width:100%;overflow:auto;background:white;border:1px solid #cbd5e1;border-radius:8px; }
.erp-chart svg { display:block;min-width:100%;font-family:inherit; }
.erp-chart-period { cursor:pointer; }.erp-chart-period:hover rect:not([fill="transparent"]) { opacity:.75; }
.erp-chart-period:focus { outline:2px solid #1d4ed8;outline-offset:-2px; }
.trade-table-scroll:focus-visible { outline:3px solid #2563eb;outline-offset:2px; }

/* 거래처 자동완성 — 이름 일부를 치면 후보를 먼저 보여주고 고르게 한다 */
.cust-picker { position:relative;display:block;flex:1;min-width:0; }
.cust-suggest { position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;max-height:320px;overflow-y:auto;
  background:#fff;border:1px solid #94a3b8;border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.16); }
.cust-suggest[hidden] { display:none; }
.cust-item { display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid #eef2f7;
  background:transparent;font:inherit;color:#0f172a;cursor:pointer; }
.cust-item:last-child { border-bottom:0; }
.cust-item:hover,.cust-item[aria-selected="true"] { background:#eff6ff; }
.cust-item b { display:block;font-size:13px;font-weight:700;overflow-wrap:anywhere; }
.cust-item span { display:block;margin-top:2px;font-size:11px;color:#64748b;font-weight:400; }
.cust-item em { font-style:normal;color:#1d4ed8; }
.cust-empty { padding:11px 12px;font-size:12px;color:#64748b; }

/* 데스크톱에서는 본문 폭 제한(900px)을 푼다. 입력·집계·대시보드까지 모두 넓게 쓴다. */
@media (min-width:1000px) {
  .app { max-width:min(1600px, 96vw); }
  /* 좌우로 놓인 칸은 높이를 맞춘다. 한쪽만 길어지면 한눈에 안 들어온다. */
  .erp-split-charts > * { display:flex;flex-direction:column;min-height:0;max-height:var(--erp-panel-h); }
  .erp-split-charts .erp-table,
  .erp-split-charts .erp-chart { flex:1;min-height:0;max-height:none; }
}
/* 검색 칸 배치: 윗줄은 고르는 것(연도·기간·구분), 아랫줄은 타이핑하는 것(거래처·품목·규격). */
.erp-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* 후보 목록은 이름이 길어 입력 칸보다 넓게 펼친다 */
.cust-suggest { min-width:280px; }

/* 넓은 화면에서 그래프가 옆으로 퍼져 읽기 어려워지는 것을 막는다.
   폭을 늘리는 대신 카드를 2열로 놓는다. */
@media (min-width:1200px) {
  #dashboard-wrap, #annual-wrap {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;
  }
  #dashboard-wrap > *, #annual-wrap > * { margin-bottom:0 !important; }
  /* 맨 위 핵심 지표와 월별 집계 표는 한 줄 전체를 쓴다 */
  #dashboard-wrap > *:first-child, #annual-wrap > *:first-child { grid-column:1 / -1; }
  /* 비교 그래프와 월별 금액표도 좌우로 */
  .erp-split-charts { align-items:start; }
}
@media (max-width:1199px) {
  .erp-split-charts { display:block; }
}

/* 변화 분석 — 숫자 나열 대신 작년에서 올해로 이어지는 흐름으로 */
.trend-flow { background:#f8fafc;border:1px solid var(--erp-line);border-radius:10px;padding:16px 18px; }
.trend-head { text-align:center;margin-bottom:14px; }
.trend-head strong { display:block;font-size:30px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums; }
.trend-head span { font-size:13px;color:#475569; }
.trend-sum { margin:12px 0 0;text-align:center;font-size:12px;color:#475569;font-variant-numeric:tabular-nums; }
.trend-side { text-align:center;min-width:150px; }
.trend-side strong { display:block;font-size:26px;font-weight:800;color:#334155;font-variant-numeric:tabular-nums; }
.trend-now strong { color:#1d4ed8; }
.trend-when { display:block;font-size:11px;color:#64748b; }
.trend-cap { display:block;font-size:12px;color:#475569;margin-top:2px; }
.trend-mid { display:flex;flex-wrap:wrap;gap:8px;justify-content:center; }
.trend-item { flex:1;min-width:130px;text-align:center;padding:11px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--erp-line);color:#475569;cursor:help; }
.trend-item b { display:block;font-size:22px;font-variant-numeric:tabular-nums;color:#0f172a; }
.trend-item span { display:block;font-size:13px;font-weight:700;margin-top:2px; }
.trend-item small { display:block;font-size:11px;color:#64748b;margin-top:2px; }
.trend-sign { font-weight:700;color:#64748b; }
.trend-keep { border-color:#bfdbfe;background:#eff6ff; }
.trend-fresh { border-color:#bbf7d0;background:#f0fdf4; }
.trend-back { border-color:#fde68a;background:#fffbeb; }
.trend-none { border-color:#e2e8f0;background:#f8fafc; }
.trend-facts { display:flex;flex-wrap:wrap;gap:10px;margin-top:12px; }
.trend-facts span { flex:1;min-width:190px;background:#fff;border:1px solid var(--erp-line);
  border-radius:8px;padding:11px 14px;font-size:15px;font-variant-numeric:tabular-nums; }
.trend-facts b { display:block;font-size:12px;color:#475569;font-weight:700;margin-bottom:3px; }
.trend-facts small { display:block;font-size:11px;color:#64748b;margin-top:3px; }
.trend-note { margin:10px 0 0;padding:9px 12px;background:#fffbeb;border:1px solid #fde68a;
  border-radius:7px;font-size:12px;line-height:1.6;color:#92400e; }
.trend-legend { display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;
  font-size:12px;color:#475569; }
.trend-legend dt { font-weight:700;color:#334155; }
.trend-legend dd { margin:0; }
.trend-filter { display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px; }
.trend-chip { border:1px solid var(--erp-line);background:#fff;border-radius:999px;padding:6px 13px;
  font:inherit;font-size:12px;color:#475569;cursor:pointer; }
.trend-chip.on { background:#1d4ed8;border-color:#1d4ed8;color:#fff;font-weight:700; }
.cohort { display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700; }
.cohort-retained,.cohort-continued { background:#eff6ff;color:#1d4ed8; }
.cohort-new { background:#f0fdf4;color:#15803d; }
.cohort-re_engaged,.cohort-reappeared,.cohort-active { background:#fffbeb;color:#b45309; }
.cohort-inactive { background:#fef2f2;color:#b91c1c; }
.trend-days span,.trend-days small,.frequency-facts { display:block; }
.trend-days small,.frequency-facts { margin-top:3px;font-size:11px;color:#64748b;font-weight:400; }
.frequency { display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700; }
.frequency-single { background:#fef2f2;color:#b91c1c; }
.frequency-single-year-repeat { background:#fffbeb;color:#b45309; }
.frequency-multi-year { background:#eff6ff;color:#1d4ed8; }
.frequency-unknown { background:#f1f5f9;color:#475569; }
.trend-sort { width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;white-space:nowrap; }
.trend-sort:hover { color:#1d4ed8;text-decoration:underline;text-underline-offset:3px; }
.delta-up { color:#15803d; }
.delta-down { color:#b91c1c; }
@media (max-width:820px) {
  .trend-flow { grid-template-columns:1fr;text-align:center; }
  .trend-legend { grid-template-columns:1fr; }
}
.trend-cut { background:#fffbeb;color:#92400e;font-size:12px;text-align:center; }
.trend-chip.chip-churned { border-color:#fecaca;color:#b91c1c; }
.trend-chip.chip-churned.on { background:#b91c1c;border-color:#b91c1c;color:#fff; }

/* 분석 칸의 기준 높이. 표가 길어도 이 안에서 스크롤한다. */
#panel-erp { --erp-panel-h:440px; }
#panel-erp .erp-chart { max-height:var(--erp-panel-h); }
#panel-erp .erp-table { max-height:var(--erp-panel-h); }
#panel-erp .erp-section > h3 { margin-bottom:8px; }
.trend-flow + .trend-facts { margin-top:12px; }
@media (max-width:1199px) { #panel-erp { --erp-panel-h:380px; } }
/* 대시보드·월별 집계 카드도 높이를 맞춘다. 넘치면 카드 안에서 스크롤한다. */
@media (min-width:1200px) {
  #dashboard-wrap > .sec, #annual-wrap > .sec { max-height:560px;overflow:auto; }
  #dashboard-wrap > *:first-child, #annual-wrap > *:first-child { max-height:none;overflow:visible; }
}
/* 자료에 없어 계산으로 채운 값은 표시를 달리한다 */
.erp-derived { color:#1d4ed8; }
.erp-derived::after { content:'*';font-size:10px;vertical-align:super;opacity:.7; }