/* ============================================================
   v1.3.52 — 실마진 분석 통합 화면

   '매입·정산' 과 '실마진 분석' 이 같은 API 를 쓰면서 매입단가 입력칸까지
   서로 다른 방식으로 두 곳에 있었다. 한 화면으로 합쳤다.
   여기에 재고 그래프를 더하고, 요약 카드와 막대를 눈에 들어오게 다듬는다.

   색은 앞선 판들의 언어를 그대로 쓴다(파랑 기본 · 초록 정상 · 노랑 주의 · 빨강 부족).
   비슷한 색을 쓰되 칸끼리 구분되도록 왼쪽 색 띠와 배경 농도를 나눈다.
   ============================================================ */

/* ── 요약 카드 (사용자가 마음에 들어한 형태) ────────────────────── */
.profit-summary-grid,
#profitSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}
#profitSummary > .metric {
  position: relative;
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 5.6rem;
  padding: 13px 14px 12px 15px;
  border-radius: 15px;
  overflow: hidden;
}
/* 칸마다 왼쪽 색 띠로 구분한다 — 숫자만 보고도 어느 칸인지 알게 */
#profitSummary > .metric::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #8fbce6;
}
#profitSummary > .metric:nth-child(1)::before { background: #4a9ef0; }
#profitSummary > .metric:nth-child(2)::before { background: #2fb37c; }
#profitSummary > .metric:nth-child(3)::before { background: #6f8ea8; }
#profitSummary > .metric:nth-child(4)::before { background: #38b88f; }
#profitSummary > .metric:nth-child(5)::before { background: #7a5fd0; }
#profitSummary > .metric:nth-child(6)::before { background: #e0a020; }
#profitSummary > .metric.problem::before { background: #e0564f; }
#profitSummary > .metric > span {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
  opacity: .9;
}
#profitSummary > .metric > strong {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.04em;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

/* ── 재고 현황 ─────────────────────────────────────────────────── */
.profit-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.profit-stock-card {
  padding: 12px 13px;
  border: 1px solid var(--line, #dfe8f2);
  border-radius: 13px;
  background: rgba(120, 150, 180, .04);
}
.profit-stock-card > header { margin: 0 0 9px; }
.profit-stock-card > header h3 {
  margin: 0;
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.profit-stock-card > header small {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  line-height: 1.4;
  opacity: .8;
}
.profit-stock-bars { display: grid; gap: 6px; }
.profit-stock-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 9rem) 1fr auto;
  grid-template-areas: "name track value" "name note note";
  align-items: center;
  gap: 2px 9px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .55);
}
.psr-name {
  grid-area: name;
  font-size: .81rem;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psr-track {
  grid-area: track;
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(110, 140, 170, .16);
  overflow: hidden;
}
.psr-track > em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #4a9ef0;
}
.psr-value {
  grid-area: value;
  font-size: .88rem;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.psr-note {
  grid-area: note;
  font-size: .73rem;
  line-height: 1.35;
  opacity: .78;
  font-variant-numeric: tabular-nums;
}
/* 상태별 색 — 유종색과 겹치지 않게 상태색만 쓴다 */
.profit-stock-row.ok    > .psr-track > em { background: #2fb37c; }
.profit-stock-row.warn  > .psr-track > em { background: #e0a020; }
.profit-stock-row.bad   > .psr-track > em { background: #e0564f; }
.profit-stock-row.warn  { background: rgba(224, 160, 32, .10); }
.profit-stock-row.bad   { background: rgba(224, 86, 79, .10); }
.profit-stock-row.bad > .psr-value { color: #b3302a; }
.profit-stock-empty,
.profit-stock-foot {
  margin: 0;
  padding: 8px 2px 0;
  font-size: .78rem;
  line-height: 1.5;
  opacity: .8;
}

@media (max-width: 720px) {
  .profit-stock-row { grid-template-columns: 1fr auto; grid-template-areas: "name value" "track track" "note note"; }
  .psr-track { margin-top: 3px; }
}

/* ── PC 밝은 화면 — 앞선 판들과 같은 색 언어 ───────────────────── */
@media (min-width: 960px) {
  html:not([data-theme="dark"]) #profitSummary > .metric {
    border: 1px solid #dbe8f2 !important;
    background: linear-gradient(140deg, #ffffff 0%, #f6fbff 100%) !important;
    box-shadow: 0 3px 10px rgba(36, 78, 115, .055) !important;
  }
  html:not([data-theme="dark"]) #profitSummary > .metric > span { color: #456585 !important; }
  html:not([data-theme="dark"]) #profitSummary > .metric > strong { color: #0e3b68 !important; }
  html:not([data-theme="dark"]) #profitSummary > .metric.problem {
    background: linear-gradient(140deg, #ffffff 0%, #fff4f3 100%) !important;
    border-color: #f1c9c5 !important;
  }
  html:not([data-theme="dark"]) .profit-stock-panel {
    border: 1px solid #cfe3f5 !important;
    background: linear-gradient(150deg, #ffffff 0%, #f5fbff 100%) !important;
  }
  html:not([data-theme="dark"]) .profit-stock-card {
    border-color: #dceaf6 !important;
    background: #fbfdff !important;
  }
  html:not([data-theme="dark"]) .profit-stock-card > header h3 { color: #12466f !important; }
  html:not([data-theme="dark"]) .profit-stock-row { background: #ffffff !important; }
  html:not([data-theme="dark"]) .psr-name { color: #29506f !important; }
  html:not([data-theme="dark"]) .psr-value { color: #12466f !important; }
}

html[data-theme="dark"] .profit-stock-card { background: rgba(120, 160, 200, .06); border-color: rgba(120, 160, 200, .24); }
html[data-theme="dark"] .profit-stock-row { background: rgba(120, 160, 200, .08); }

/* v1.3.53 — 엑셀 받기 줄 */
.fuel-margin-files {
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px dashed var(--line, #dfe8f2);
  background: rgba(120, 150, 180, .04);
  gap: 8px;
}
.fuel-margin-files-label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted, #647f99);
  align-self: center;
}
.fuel-margin-files > button { min-height: 36px; padding: 0 12px; font-size: .82rem; font-weight: 800; }
@media (min-width: 960px) {
  html:not([data-theme="dark"]) .fuel-margin-files { border-color: #cddff0 !important; background: #f9fcff !important; }
}
html[data-theme="dark"] .fuel-margin-files { border-color: rgba(120,160,200,.28); background: rgba(120,160,200,.06); }