/* ============================================================
   detail-panel-styles.css — v1.3.217

   v1.3.215/216 에서 전면 재설계를 하며 옛 theme-v1324~v1364.css 16개
   파일의 <link> 를 index.html 에서 뺐다(구형 CSS·구형 렌더러를 새 UI와
   같이 두지 않는다는 원칙 — AI_HANDOFF.md). 그런데 그 16개 파일 중
   일부는 "새 시안 화면"이 아니라 "메뉴 상세 화면(매입가 입력·확인함·
   복구 관리·재고 유종 색)"의 유일한 스타일 정의였다 — app.js 는 그대로
   두고 화면만 새로 짠 것이 아니라, 그 상세 화면 자체가 옛 파일에만
   있었다. 그 결과 class 는 여전히 뿌려지는데 어떤 CSS 파일에도 규칙이
   없는 "고아 클래스"가 됐다(자동 검사로 확인: JS/HTML 에서 쓰는데
   styles.css·carwash.css·final-vnext.css·appearance.css 어디에도 없음).

   이 파일은 그 고아 규칙만 옛 파일에서 그대로(또는 최종 승자만) 옮겨
   온 것이다 — 대시보드 배치·사이드바·상단바처럼 이미 새 시안이 대신하는
   부분은 옮기지 않았다(옮기면 새 디자인과 다시 섞인다). 옛 16개 파일
   자체는 과거 버전 대조용으로 그대로 남아 있고 이 파일만 새로 연결한다.

   포함:
     1) 매입가 목록 입력 (구 theme-v1347.css 전체)
     2) 실마진 분석·재고 요약 화면 (구 theme-v1352.css 전체)
     3) 유종 색 통일 — 달력·탱크 막대·재고 화면·그래프 (구 theme-v1364.css
        전체 — 원래 theme-v1354 의 유종색 초안을 이 파일이 최종적으로
        덮어썼으므로 1354 쪽은 옮기지 않는다)
     4) 확인함(자동인식→사람확인→등록) 카드 (구 theme-v1334.css 전체)
     5) 복구 관리 · 시점 정리 목록 (구 theme-v1333.css 전체)
     6) 화면 크기(글자 크기) 상단바 팝오버 — 모든 화면 공통 상단바에
        있어 눈에 계속 보인다 (구 theme-v1326.css·v1331.css 중
        .ui-scale-popover 관련 부분만)
   ============================================================ */

/* ── 1) 매입가 목록 입력 (구 theme-v1347.css) ── */
/* ============================================================
   v1.3.47 — 유류 매입가 월별 입력 목록

   날짜·매입처·유종·환산수량은 마감일지에서 자동으로 올라온다.
   사람이 채우는 칸은 '매입가' 하나뿐이므로, 그 칸이 한눈에 보이고
   아직 안 채운 줄이 바로 구분되어야 한다.
   PC·폰·어두운 화면 모두 대상이다.
   ============================================================ */

.fuel-margin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 9px 12px;
  margin: 12px 0 4px;
}
.fuel-margin-bar > label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted, #647f99);
  min-width: 0;
}
.fuel-margin-bar select,
.fuel-margin-bar input {
  min-height: 40px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 700;
  padding: 0 10px;
}
.fuel-margin-bar > button { min-height: 40px; padding: 0 14px; font-weight: 800; white-space: nowrap; }
.fuel-margin-spacer { flex: 1 1 12px; }
.fuel-margin-fill > input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* 요약 줄 */
.fuel-margin-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 10px;
  font-size: .86rem;
}
.fuel-margin-summary b { font-weight: 900; font-variant-numeric: tabular-nums; }
.fuel-margin-note {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #f0d9a6;
  background: #fff7e8;
  color: #8a5a0b;
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 700;
}

/* 목록 */
.fuel-margin-table td,
.fuel-margin-table th { vertical-align: middle; }
.fuel-margin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fuel-margin-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuel-margin-input {
  width: 108px;
  min-height: 38px;
  padding: 0 9px;
  border-radius: 8px;
  text-align: right;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 아직 안 채운 줄은 바로 눈에 띄게 */
.fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
  border-color: #e6b877;
  background: #fffaf0;
}
.fuel-margin-amount { font-weight: 800; }

@media (max-width: 720px) {
  .fuel-margin-bar > label,
  .fuel-margin-bar > button { width: 100%; }
  .fuel-margin-spacer { display: none; }
  .fuel-margin-fill > input { width: 100%; text-align: left; }
  .fuel-margin-input { width: 92px; }
}

/* PC 밝은 화면 — 앞선 판들과 같은 색 언어 */
@media (min-width: 960px) {
  html:not([data-theme="dark"]) .fuel-margin-panel {
    border: 1px solid #cfe3f5 !important;
    background: linear-gradient(150deg, #ffffff 0%, #f3faff 100%) !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-summary { color: #3c5c7a !important; }
  html:not([data-theme="dark"]) .fuel-margin-summary b { color: #12466f !important; }
  html:not([data-theme="dark"]) .fuel-margin-input {
    border: 1px solid #9ecbee !important;
    background: #ffffff !important;
    color: #12466f !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
    border-color: #e6b877 !important;
    background: #fffaf0 !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending > td { background: #fffdf8 !important; }
}

html[data-theme="dark"] .fuel-margin-note {
  background: rgba(180, 120, 20, .14);
  border-color: rgba(214, 160, 60, .4);
  color: #f0c987;
}
html[data-theme="dark"] .fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
  border-color: rgba(214, 160, 60, .5);
  background: rgba(180, 120, 20, .12);
}

/* v1.3.48 — 매입가를 안 넣으면 마진에서 빠진다는 경고.
   숫자가 틀린 게 아니라 '아직 덜 찼다' 는 것을 분명히 말해 준다. */
.fuel-margin-warn {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid #f0b8b8;
  background: #fff3f3;
  color: #9c3026;
  font-size: .84rem;
  line-height: 1.55;
  font-weight: 700;
}
.fuel-margin-warn b { font-weight: 900; }
html[data-theme="dark"] .fuel-margin-warn {
  background: rgba(180, 60, 50, .14);
  border-color: rgba(214, 100, 90, .4);
  color: #f0a9a0;
}

/* v1.3.51 — 거래 조건 줄과 폴·매입 조건 설정 */
.fuel-margin-terms {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px dashed var(--line, #dfe8f2);
  background: rgba(120, 150, 180, .05);
}
.fuel-margin-terms > label { font-size: .76rem; }
.fuel-margin-unit { font-weight: 800; }
/* 유종을 못 맞춘 줄은 손댈 수 없다는 걸 보여준다 */
.fuel-margin-table tr.fuel-margin-unmatched > td { opacity: .72; }
.fuel-margin-mode {
  min-height: 34px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  padding: 0 6px;
}
.fuel-margin-transport {
  width: 84px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* v1.3.82 — 실마진 매입가 표 입력칸 겹침 방지.
   전역 select/input 은 width:100% 이므로 거래조건의 select 3개를 레이아웃 없이 두면
   각각 셀 전체 폭을 차지해 다음 열까지 침범할 수 있다. 이 표 안에서만 폭과 그리드를 고정하고
   전체 표가 좁아질 때는 .table-scroll 의 가로 스크롤을 사용한다. */
.fuel-margin-table {
  min-width: 1480px;
}
.fuel-margin-row-terms {
  display: grid;
  grid-template-columns: 74px 104px 104px;
  align-items: center;
  gap: 4px;
  min-width: 290px;
  max-width: 290px;
}
.fuel-margin-row-terms select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 22px 0 6px;
  font-size: .76rem;
}
.fuel-margin-table .fuel-margin-mode {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  box-sizing: border-box;
}
.fuel-margin-table .fuel-margin-input {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  box-sizing: border-box;
}
.fuel-margin-table .fuel-margin-transport {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  box-sizing: border-box;
}
.purchase-terms-panel .data-table select { min-height: 36px; border-radius: 8px; font-size: .82rem; padding: 0 8px; }
.purchase-terms-panel .data-table td { vertical-align: middle; }

@media (min-width: 960px) {
  html:not([data-theme="dark"]) .fuel-margin-terms {
    border-color: #cddff0 !important;
    background: #f7fbff !important;
  }
  html:not([data-theme="dark"]) .purchase-terms-panel {
    border: 1px solid #cfe3f5 !important;
    background: linear-gradient(150deg, #ffffff 0%, #f6fbff 100%) !important;
  }
}
html[data-theme="dark"] .fuel-margin-terms { border-color: rgba(120,160,200,.3); background: rgba(120,160,200,.07); }

/* ── 2) 실마진 분석 · 재고 요약 (구 theme-v1352.css) ── */
/* ============================================================
   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); }

/* ── 3) 유종 색 통일 (구 theme-v1364.css) ── */
/* ══════════════════════════════════════════════════════════════════
   v1.3.64 — 유종 색 통일
   2026-09-13 사장님 지시:
     "무연 노랑 · 경유 녹색 · 고급 주황으로 통일. 탱크도 그래프도 전부.
      달력에서 매입한 기록하고 들어올 매입은 다르게."

   두 가지를 지킨다.

   1) 색(hue)은 오직 '유종' 을 뜻한다.
      예전에는 화면마다 제 색을 만들어 썼다 — 실마진 화면의 경유는 파랑이었고,
      달력의 매입 뱃지는 유종과 상관없이 전부 같은 초록이었으며, 탱크 막대는
      재고가 적으면 빨강·주황으로 덮어써서 무연 탱크가 노랑이 아니었다.
      이제 칠하는 색은 styles.css 의 --fuel-* 토큰에서만 가져온다.

   2) '들어올 매입' 과 '들어온 매입' 은 색이 아니라 '모양' 으로 나눈다.
      색을 쓰면 유종 구분과 싸운다. 그래서
        · 입고 예정 → 점선 테두리, 연한 바탕, ⏱
        · 실제 입고 → 실선 테두리 + 왼쪽 굵은 색띠, 진한 바탕, ✓
      서식(크기·자리·글자)은 그대로 두고 테두리와 바탕만 바꿨다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 유종 바탕·글자 한 벌 ────────────────────────────────────────── */
.fuel-bg-reg  { --fuel-ink: #7E6000; --fuel-line: var(--fuel-reg);  --fuel-soft: var(--fuel-reg-wash); }
.fuel-bg-die  { --fuel-ink: #176B47; --fuel-line: var(--fuel-die);  --fuel-soft: var(--fuel-die-wash); }
.fuel-bg-hi   { --fuel-ink: #A8340A; --fuel-line: var(--fuel-hi);   --fuel-soft: var(--fuel-hi-wash); }
.fuel-bg-ker  { --fuel-ink: #4B5563; --fuel-line: var(--fuel-ker);  --fuel-soft: var(--fuel-ker-wash); }
.fuel-bg-urea { --fuel-ink: #4B32A0; --fuel-line: var(--fuel-urea); --fuel-soft: var(--fuel-urea-wash); }
.fuel-bg-etc  { --fuel-ink: #44515F; --fuel-line: var(--fuel-etc);  --fuel-soft: var(--fuel-etc-wash); }

/* ── 달력: 매입 뱃지 ─────────────────────────────────────────────
   예전 규칙이 !important 로 한 색을 밀어넣고 있어서 같은 무게로 되돌린다. */
.calendar-day.purchase-mode .badge.purchase-badge,
.calendar-day.purchase-mode .badge.delivery-badge {
  background: var(--fuel-soft, var(--fuel-etc-wash)) !important;
  color: var(--fuel-ink, #44515F) !important;
  border: 1px solid var(--fuel-line, var(--fuel-etc)) !important;
  font-weight: 800;
}

/* 들어올 매입 — 점선. 아직 안 들어온 것이라 테두리를 끊어 놓는다. */
.calendar-day.purchase-mode .badge.delivery-badge.expected {
  border-style: dashed !important;
  background: transparent !important;
  font-weight: 750;
}

/* 들어온 매입 — 실선 + 왼쪽 굵은 색띠 */
.calendar-day.purchase-mode .badge.delivery-badge.received,
.calendar-day.purchase-mode .badge.purchase-badge.actual {
  border-style: solid !important;
  box-shadow: inset 3px 0 0 var(--fuel-line, var(--fuel-etc)) !important;
  padding-left: 8px;
  font-weight: 900;
}

/* ── 달력 아닌 곳의 매입 뱃지도 같은 색을 쓴다 ──────────────────── */
.badge.purchase-badge.fuel-bg-reg, .badge.purchase-badge.fuel-bg-die,
.badge.purchase-badge.fuel-bg-hi,  .badge.purchase-badge.fuel-bg-ker,
.badge.purchase-badge.fuel-bg-urea,.badge.purchase-badge.fuel-bg-etc {
  background: var(--fuel-soft); color: var(--fuel-ink); border-color: var(--fuel-line);
}

/* ── 탱크 잔량 예측 막대 ────────────────────────────────────────── */
.tfr-bar i { background: var(--fuel-bar, var(--fuel-etc)) !important; }
/* 부족·위험은 줄 왼쪽 테두리(.tank-forecast-row.bad/.warn)가 이미 말한다.
   막대까지 빨강으로 덮으면 그 탱크의 유종이 무엇인지 알 수 없게 된다. */
.tank-forecast-row.bad .tfr-bar,
.tank-forecast-row.warn .tfr-bar { outline: 1px solid rgba(0,0,0,.06); }

/* ── 실마진 분석 재고 줄 ────────────────────────────────────────
   theme-v1354 가 자기 색을 갖고 있었다(경유가 파랑이었다). 토큰으로 되돌린다. */
.profit-stock-row.fuel-premium::before  { background: var(--fuel-hi); }
.profit-stock-row.fuel-regular::before  { background: var(--fuel-reg); }
.profit-stock-row.fuel-diesel::before   { background: var(--fuel-die); }
.profit-stock-row.fuel-kerosene::before { background: var(--fuel-ker); }
.profit-stock-row.fuel-urea::before     { background: var(--fuel-urea); }
.profit-stock-row.fuel-etc::before      { background: var(--fuel-etc); }
.profit-stock-row.fuel-premium > .psr-track > em  { background: var(--fuel-hi); }
.profit-stock-row.fuel-regular > .psr-track > em  { background: var(--fuel-reg); }
.profit-stock-row.fuel-diesel  > .psr-track > em { background: var(--fuel-die); }
.profit-stock-row.fuel-kerosene > .psr-track > em { background: var(--fuel-ker); }
.profit-stock-row.fuel-urea    > .psr-track > em  { background: var(--fuel-urea); }
.profit-stock-row.fuel-etc     > .psr-track > em  { background: var(--fuel-etc); }
html:not([data-theme="dark"]) .profit-stock-row.fuel-premium  { background: var(--fuel-hi-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-regular  { background: var(--fuel-reg-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-diesel   { background: var(--fuel-die-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-kerosene { background: var(--fuel-ker-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-urea     { background: var(--fuel-urea-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-etc      { background: var(--fuel-etc-wash) !important; }

/* ── 유종 범례: 색만으로 구분시키지 않는다 — 이름을 늘 같이 적는다 ── */
.fuel-legend span, .daily-legend b { white-space: nowrap; }

/* ── 좁은 화면 ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .calendar-day.purchase-mode .badge.purchase-badge,
  .calendar-day.purchase-mode .badge.delivery-badge { padding-left: 6px; }
  .calendar-day.purchase-mode .badge.delivery-badge.received,
  .calendar-day.purchase-mode .badge.purchase-badge.actual { box-shadow: inset 2px 0 0 var(--fuel-line, var(--fuel-etc)) !important; }
}

/* ── 어두운 화면 ────────────────────────────────────────────────
   유종 색(hue)은 그대로 두고 바탕만 어둡게 한다. 색이 바뀌면 같은 유종이
   낮과 밤에 다른 색이 된다. */
html[data-theme="dark"] .fuel-bg-reg  { --fuel-ink: #F2CE5C; --fuel-soft: rgba(229,178,26,.20); }
html[data-theme="dark"] .fuel-bg-die  { --fuel-ink: #7FD9AE; --fuel-soft: rgba(47,158,107,.18); }
html[data-theme="dark"] .fuel-bg-hi   { --fuel-ink: #F09068; --fuel-soft: rgba(200,80,12,.22); }
html[data-theme="dark"] .fuel-bg-ker  { --fuel-ink: #C3CBD6; --fuel-soft: rgba(107,114,128,.20); }
html[data-theme="dark"] .fuel-bg-urea { --fuel-ink: #B6A3F0; --fuel-soft: rgba(110,79,199,.20); }
html[data-theme="dark"] .fuel-bg-etc  { --fuel-ink: #C3CBD6; --fuel-soft: rgba(91,102,114,.20); }
html[data-theme="dark"] .profit-stock-row.fuel-premium  { background: rgba(200,80,12,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-regular  { background: rgba(229,178,26,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-diesel   { background: rgba(47,158,107,.12); }
html[data-theme="dark"] .profit-stock-row.fuel-kerosene { background: rgba(107,114,128,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-urea     { background: rgba(110,79,199,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-etc      { background: rgba(91,102,114,.14); }

/* ── 매입 상태 범례 (점선 = 예정 · 실선+색띠 = 완료) ────────────── */
.purchase-state-legend { margin-top: 3px; }
.purchase-state-legend .pstate-sample {
  display: inline-block; width: 16px; height: 9px; border-radius: 2px;
  background: transparent; flex: 0 0 auto;
}
.purchase-state-legend .pstate-sample.expected { border: 1px dashed var(--fuel-etc); }
.purchase-state-legend .pstate-sample.actual {
  border: 1px solid var(--fuel-etc);
  box-shadow: inset 3px 0 0 var(--fuel-etc);
}

/* ── 그래프 — 등유 칸(v1.3.64 에서 추가). 나머지 f1~f4 · g1~g4 는
   styles.css 에서 이미 --fuel-* 토큰을 쓰므로 고급이 저절로 주황이 된다. */
.bar-fill.g5      { background: var(--fuel-ker); }
.daily-seg.f5     { background: var(--fuel-ker); }
.daily-legend i.f5{ background: var(--fuel-ker); }

/* ── v1.3.66 자료 없는 주유소 줄 — 숫자 자리를 비우고 이유를 적는다 ── */
.cost-bar-row.nodata { background: #fbfcfd; border-style: dashed; }
.cost-bar-row.nodata .cbr-name { color: #6b7a8a; }
.cost-bar-row.nodata .cbr-amount,
.cost-bar-row.nodata .cbr-margin { color: #8a97a4; font-weight: 700; }
.cost-bar-row.nodata .cbr-track { background: transparent; border: 1px dashed #dbe3eb; }
html[data-theme="dark"] .cost-bar-row.nodata { background-color: #121821; }
html[data-theme="dark"] .cost-bar-row.nodata .cbr-track { border-color: #2b3644; }

/* ── 4) 확인함 (구 theme-v1334.css) ── */
/* ============================================================
   v1.3.34 — 확인함 (자동 인식 → 사람 확인 → 등록)
   AI_BUILD_STANDARD 1-3(문제·할 일이 맨 위) · 3-2(확인 한 번) · 2장(디자인 표준)
   디자인 전용 오버레이. 기존 화면 파일은 건드리지 않는다.
   ============================================================ */

.v1334-pending{ margin-bottom:12px!important; }
.v1334-pending>header h3{ display:flex!important;align-items:center!important;gap:8px!important; }
.v1334-count{
  min-width:22px;height:22px;padding:0 7px;
  display:inline-grid;place-items:center;
  border-radius:999px;font-size:11.5px;font-weight:950;line-height:1;
}
html:not([data-theme="dark"]) .v1334-count{ background:#fdecec;color:#b3261e; }
html[data-theme="dark"] .v1334-count{ background:#3a1f21;color:#ff9ba3; }

.v1334-list{ display:grid;gap:8px;padding:2px 0 4px; }

.v1334-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main actions" "form form";
  gap:8px 14px;align-items:start;
  padding:12px 14px;border-radius:12px;
  border:1px solid transparent;
}
.v1334-main{ grid-area:main;display:grid;gap:3px;min-width:0; }
.v1334-actions{ grid-area:actions;display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.v1334-form{ grid-area:form; }

.v1334-kind{
  justify-self:start;
  padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:900;letter-spacing:-.01em;
}
.v1334-main b{ font-size:13.5px;font-weight:900;line-height:1.35;overflow-wrap:anywhere;word-break:keep-all; }
.v1334-main small{ font-size:11.5px;line-height:1.5;overflow-wrap:anywhere;word-break:keep-all; }
.v1334-main em{ font-style:normal;font-size:10.5px;font-weight:700; }

/* 누르는 곳 — 폰 42px 이상 / PC 는 이 프로젝트 밀도(34px) */
.v1334-actions button{ min-height:42px!important;padding:0 14px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:800!important; }
@media(min-width:960px){ .v1334-actions button{ min-height:34px!important;padding:0 12px!important;font-size:12px!important; } }

/* 입력칸은 [등록] 을 눌렀을 때만 생긴다 (3단계 구조) */
.v1334-form{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 12px;padding:12px;margin-top:2px;border-radius:10px; }
.v1334-form label{ display:grid;gap:4px;font-size:11.5px;font-weight:800;min-width:0; }
.v1334-form input,.v1334-form select{ min-height:42px;border-radius:9px;padding:0 10px;font-size:13px;font-weight:700;box-sizing:border-box;width:100%; }
.v1334-form input[type="color"]{ padding:3px;min-height:42px; }



.v1334-foot{ margin:2px 0 0!important;font-size:10.5px!important;line-height:1.5!important; }

/* ── 밝은 화면 ─────────────────────────────────────────────── */
html:not([data-theme="dark"]) .v1334-row{ background:#fffdf7;border-color:#f0e3c8; }
html:not([data-theme="dark"]) .v1334-row.info{ background:#f7fafd;border-color:#dfe9f2; }
html:not([data-theme="dark"]) .v1334-kind{ background:#8a5300;color:#fff; }
html:not([data-theme="dark"]) .v1334-row.info .v1334-kind{ background:#41648a;color:#fff; }
html:not([data-theme="dark"]) .v1334-main b{ color:#15395c; }
html:not([data-theme="dark"]) .v1334-main small{ color:#5f7488; }
html:not([data-theme="dark"]) .v1334-main em{ color:#7d8fa1; }
html:not([data-theme="dark"]) .v1334-form{ background:#fff;border:1px solid #e6edf4; }
html:not([data-theme="dark"]) .v1334-form label{ color:#3c5d7d; }
html:not([data-theme="dark"]) .v1334-form input,
html:not([data-theme="dark"]) .v1334-form select{ border:1px solid #d5e1ec;background:#fff;color:#15395c; }

html:not([data-theme="dark"]) .v1334-foot{ color:#7d8fa1!important; }

/* ── 어두운 화면 ───────────────────────────────────────────── */
html[data-theme="dark"] .v1334-row{ background:#1e1a12;border-color:#3a3324; }
html[data-theme="dark"] .v1334-row.info{ background:#151c25;border-color:#2b3744; }
html[data-theme="dark"] .v1334-kind{ background:#5a3f10;color:#ffd79a; }
html[data-theme="dark"] .v1334-row.info .v1334-kind{ background:#22384f;color:#a9d2ff; }
html[data-theme="dark"] .v1334-main b{ color:#eaf2fb; }
html[data-theme="dark"] .v1334-main small{ color:#b8c8d8; }
html[data-theme="dark"] .v1334-main em{ color:#8fa2b5; }
html[data-theme="dark"] .v1334-form{ background:#141b24;border:1px solid #2b3744; }
html[data-theme="dark"] .v1334-form label{ color:#c4d6e8; }
html[data-theme="dark"] .v1334-form input,
html[data-theme="dark"] .v1334-form select{ border:1px solid #2b3744;background:#0f151d;color:#eaf2fb; }

html[data-theme="dark"] .v1334-foot{ color:#8fa2b5!important; }

/* ── 폰 ────────────────────────────────────────────────────── */
@media(max-width:720px){
  .v1334-row{ grid-template-columns:1fr;grid-template-areas:"main" "actions" "form";gap:8px; }
  .v1334-actions{ justify-content:stretch; }
  .v1334-actions button{ flex:1 1 auto; }
}

/* ── 5) 복구 관리 · 시점 정리 (구 theme-v1333.css) ── */
/* ============================================================
   v1.3.33 — 복구 센터: 버전 표시 · 실패 이유 표시 · 시점 정리
   디자인 전용 오버레이. 업무 로직/API/DB/FIFO/예측/권한은 변경하지 않는다.
   기존 화면 파일(styles.css, theme-v1324~v1332.css)은 건드리지 않는다.
   ============================================================ */

/* ── 고른 시점의 버전 한 줄 ─────────────────────────────────── */
.restore-version{
  margin:6px 0 0!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.45!important;
}
html:not([data-theme="dark"]) .restore-version{ background:#eef4fb!important;color:#274b6d!important; }
html:not([data-theme="dark"]) .restore-version.same{ background:#eef7f1!important;color:#1d6b46!important; }
html:not([data-theme="dark"]) .restore-version.diff{ background:#fff6e8!important;color:#8a5300!important; }
html[data-theme="dark"] .restore-version{ background:#1a222c!important;color:#c4d6e8!important; }
html[data-theme="dark"] .restore-version.same{ background:#16261f!important;color:#7fd7ab!important; }
html[data-theme="dark"] .restore-version.diff{ background:#2a2317!important;color:#ffc46b!important; }
.restore-version b{ font-variant-numeric:tabular-nums!important; }

/* ── 복구 결과 알림 (성공·실패·진행중) ───────────────────────── */
.restore-result{
  margin-top:10px!important;
  padding:12px 14px!important;
  border-radius:12px!important;
  border:1px solid transparent!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.restore-result strong{ display:block!important;font-size:14.5px!important;font-weight:950!important;margin-bottom:4px!important; }
.restore-result p{ margin:3px 0 0!important; }
.restore-result code{
  padding:1px 6px!important;border-radius:5px!important;
  font-family:"IBM Plex Mono",Consolas,monospace!important;font-size:12px!important;
}
html:not([data-theme="dark"]) .restore-result.running{ background:#eef4fb!important;border-color:#cfe0f0!important;color:#274b6d!important; }
html:not([data-theme="dark"]) .restore-result.ok{ background:#eef7f1!important;border-color:#bfe3ce!important;color:#175f3e!important; }
html:not([data-theme="dark"]) .restore-result.bad{ background:#fdf0f1!important;border-color:#f3c9cd!important;color:#96222d!important; }
html:not([data-theme="dark"]) .restore-result.warn{ background:#fff6e8!important;border-color:#f2ddb9!important;color:#7a4a00!important; }
html:not([data-theme="dark"]) .restore-result code{ background:#ffffff!important;color:#1b3f63!important;border:1px solid #d9e5f1!important; }
html[data-theme="dark"] .restore-result.running{ background:#161d26!important;border-color:#2b3744!important;color:#c4d6e8!important; }
html[data-theme="dark"] .restore-result.ok{ background:#13211b!important;border-color:#2a4437!important;color:#8ee0b5!important; }
html[data-theme="dark"] .restore-result.bad{ background:#241618!important;border-color:#4a2b30!important;color:#ff9ba3!important; }
html[data-theme="dark"] .restore-result.warn{ background:#241f14!important;border-color:#463a22!important;color:#ffc978!important; }
html[data-theme="dark"] .restore-result code{ background:#0f151d!important;color:#9ad3ff!important;border:1px solid #2b3744!important; }

/* ── 복구 시점 정리 목록 ────────────────────────────────────── */
.restore-cleanup{ margin-top:12px!important; }
.restore-cleanup>summary{
  cursor:pointer!important;list-style:none!important;
  padding:11px 12px!important;border-radius:10px!important;min-height:42px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;
  font-size:13px!important;font-weight:900!important;
}
.restore-cleanup>summary::-webkit-details-marker{ display:none!important; }
.restore-cleanup>summary::before{ content:"▸ ";font-weight:900!important; }
.restore-cleanup[open]>summary::before{ content:"▾ "; }
.restore-cleanup>summary small{ font-weight:700!important;font-size:11px!important;margin-left:6px!important;opacity:.8; }
html:not([data-theme="dark"]) .restore-cleanup>summary{ background:#f3f7fb!important;border:1px solid #dfe9f2!important;color:#28496b!important; }
html[data-theme="dark"] .restore-cleanup>summary{ background:#161d26!important;border:1px solid #2b3744!important;color:#c4d6e8!important; }
@media(min-width:960px){
  .restore-cleanup>summary{ min-height:34px!important;padding:7px 12px!important; }
}

.restore-cleanup-list{
  margin-top:8px!important;
  max-height:340px!important;
  overflow-y:auto!important;
  border-radius:10px!important;
}
.restore-cleanup-row{
  display:grid!important;
  grid-template-columns:158px minmax(118px,180px) 66px 70px 1fr!important;
  gap:8px!important;align-items:center!important;
  padding:8px 10px!important;
  font-size:12px!important;
  border-bottom:1px solid transparent!important;
}
.restore-cleanup-row .rc-when{ font-weight:850!important;font-variant-numeric:tabular-nums!important; }
.restore-cleanup-row .rc-ver{ font-weight:950!important;font-variant-numeric:tabular-nums!important; }
.restore-cleanup-row .rc-origin,
.restore-cleanup-row .rc-kind{ font-weight:700!important; }
.restore-cleanup-row .rc-lock{ font-size:10.5px!important;font-weight:800!important;white-space:nowrap!important;justify-self:start!important; }
/* AGENTS.md 3장 — 손가락으로 누르는 곳은 42px 이상. PC 는 이 프로젝트의 밀도 규칙(약 34px)을 따른다. */
.restore-cleanup-row .rc-del{ justify-self:start!important;min-height:42px!important;padding:0 14px!important;font-size:12.5px!important;border-radius:8px!important; }
@media(min-width:960px){
  .restore-cleanup-row .rc-del{ min-height:34px!important;padding:0 12px!important;font-size:11.5px!important; }
}
html:not([data-theme="dark"]) .restore-cleanup-row{ background:#fff!important;border-bottom-color:#eef3f8!important;color:#2b4a68!important; }
html:not([data-theme="dark"]) .restore-cleanup-row.full{ background:#fffaf2!important; }
html:not([data-theme="dark"]) .restore-cleanup-row .rc-ver{ color:#15395c!important; }
html:not([data-theme="dark"]) .restore-cleanup-row .rc-origin{ color:#5f7488!important; }
html:not([data-theme="dark"]) .restore-cleanup-row .rc-lock{ color:#1d6b46!important; }
html[data-theme="dark"] .restore-cleanup-row{ background:#141b24!important;border-bottom-color:#222c37!important;color:#c4d6e8!important; }
html[data-theme="dark"] .restore-cleanup-row.full{ background:#1b1a15!important; }
html[data-theme="dark"] .restore-cleanup-row .rc-ver{ color:#eaf2fb!important; }
html[data-theme="dark"] .restore-cleanup-row .rc-origin{ color:#a9bccf!important; }
html[data-theme="dark"] .restore-cleanup-row .rc-lock{ color:#7fd7ab!important; }

/* 좁은 화면 — 한 줄에 다 못 넣으면 두 줄로 접는다 */
@media(max-width:820px){
  .restore-cleanup-row{
    grid-template-columns:1fr 1fr auto!important;
    grid-template-areas:"when when del" "kind ver origin"!important;
    row-gap:3px!important;
  }
  .restore-cleanup-row .rc-when{grid-area:when!important}
  .restore-cleanup-row .rc-kind{grid-area:kind!important}
  .restore-cleanup-row .rc-ver{grid-area:ver!important}
  .restore-cleanup-row .rc-origin{grid-area:origin!important}
  .restore-cleanup-row .rc-del,
  .restore-cleanup-row .rc-lock{grid-area:del!important;justify-self:end!important}
}

/* ── 6) 화면 크기 팝오버 (구 theme-v1326.css) ── */
@media(min-width:960px){
  /* 화면 크기 조절은 상단 공간을 계속 넓히는 방식이 아니라, 버튼 1개 + 떠 있는 패널 방식. */
  body .ui-scale-popover{
    position:relative!important;
    flex:0 0 auto!important;
  }
  body .ui-scale-popover>summary{
    list-style:none!important;
    cursor:pointer!important;
    min-height:calc(var(--v119-topbar,44px) - 10px)!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:0 9px!important;
    border:1px solid #d8e5f1!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#355d83!important;
    white-space:nowrap!important;
    box-shadow:0 1px 3px rgba(35,74,111,.035)!important;
    font-size:max(11px,calc(var(--ui119-topbar-font,14px) - 2px))!important;
    font-weight:900!important;
    box-sizing:border-box!important;
  }
  body .ui-scale-popover>summary::-webkit-details-marker{display:none!important}
  body .ui-scale-popover>summary::after{content:"▾";font-size:10px;color:#7190ad!important}
  body .ui-scale-popover[open]>summary{background:#edf6ff!important;border-color:#b9d6ef!important;color:#176ac7!important}
  body .ui-scale-popover[open]>summary::after{content:"▴"}
  body .ui-scale-popover>summary strong{
    color:#176ac7!important;
    font-size:inherit!important;
    font-weight:950!important;
  }
  body .ui-scale-popover-panel{
    position:fixed!important;
    top:calc(var(--v119-topbar,44px) + 8px)!important;
    right:12px!important;
    z-index:5000!important;
    width:min(360px,calc(100vw - 24px))!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:12px!important;
    border:1px solid #cad9e8!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 16px 36px rgba(22,57,92,.24)!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }
  body .ui-scale-popover:not([open])>.ui-scale-popover-panel{display:none!important}
  body .ui-scale-popover-panel>.ui-scale-main,
  body .ui-scale-popover-panel>.ui-scale-body{
    height:auto!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    gap:5px!important;
    padding:8px!important;
    border:1px solid #e0e9f2!important;
    border-radius:9px!important;
    background:#f8fbfe!important;
  }
  body .ui-scale-popover-panel>.ui-scale-main>span,
  body .ui-scale-popover-panel>.ui-scale-body>span{
    display:block!important;
    color:#526d87!important;
    font-size:11px!important;
    font-weight:900!important;
  }
  body .ui-scale-popover-panel>.ui-scale-main select,
  body .ui-scale-popover-panel>.ui-scale-body select{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 28px 0 9px!important;
    border:1px solid #cbd9e6!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#173b5d!important;
    font-size:12px!important;
    font-weight:850!important;
  }
  body .ui-scale-popover-panel .ui-setting-detail{
    grid-column:1/-1!important;
    position:static!important;
    width:auto!important;
  }
  body .ui-scale-popover-panel .ui-setting-detail>summary{
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border:1px solid #dce7f0!important;
    border-radius:8px!important;
    background:#f6f9fc!important;
    color:#486681!important;
    font-size:11px!important;
    font-weight:900!important;
    box-sizing:border-box!important;
  }
  body .ui-scale-popover-panel .ui-setting-detail>summary::after{content:"＋";color:#7890a8}
  body .ui-scale-popover-panel .ui-setting-detail[open]>summary::after{content:"－"}
  body .ui-scale-popover-panel .ui-setting-detail-grid{
    position:static!important;
    width:auto!important;
    margin-top:7px!important;
    padding:9px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    border:1px solid #e0e8f0!important;
    border-radius:8px!important;
    background:#fbfdff!important;
    box-shadow:none!important;
  }
  body .ui-scale-popover-panel .ui-setting-detail-grid label{
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    gap:4px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body .ui-scale-popover-panel .ui-setting-detail-grid input{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:32px!important;
    min-height:32px!important;
    box-sizing:border-box!important;
  }

}
/* 다크모드에서도 크기 팝오버의 가독성과 레이어 안정성은 동일하게 보장. */
html[data-theme="dark"] .ui-scale-popover>summary{
  background:#173653!important;border-color:#365672!important;color:#eef6ff!important;
}
html[data-theme="dark"] .ui-scale-popover>summary strong{color:#8bc2ff!important}
html[data-theme="dark"] .ui-scale-popover-panel{
  background:#102a43!important;border-color:#35536d!important;color:#edf5fc!important;
}
html[data-theme="dark"] .ui-scale-popover-panel>.ui-scale-main,
html[data-theme="dark"] .ui-scale-popover-panel>.ui-scale-body,
html[data-theme="dark"] .ui-scale-popover-panel .ui-setting-detail-grid{
  background:#15324d!important;border-color:#36536c!important;
}
html[data-theme="dark"] .ui-scale-popover-panel>.ui-scale-main>span,
html[data-theme="dark"] .ui-scale-popover-panel>.ui-scale-body>span,
html[data-theme="dark"] .ui-scale-popover-panel .ui-setting-detail-grid label>span{color:#c9d9e8!important}
@media(min-width:960px){
  html[data-theme="dark"] body .ui-scale-popover>summary{background-color:#141b24 !important;color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover>summary::after{color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover[open]>summary{background-color:#17222f !important;color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover>summary strong{color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel{background-color:#141b24 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-main,
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-body{background-color:#141b24 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-main>span,
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-body>span{color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-main select,
  html[data-theme="dark"] body .ui-scale-popover-panel>.ui-scale-body select{background-color:#141b24 !important;color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel .ui-setting-detail>summary{background-color:#141b24 !important;color:#dbe7f5 !important}
  html[data-theme="dark"] body .ui-scale-popover-panel .ui-setting-detail>summary::after{color:#dbe7f5}
  html[data-theme="dark"] body .ui-scale-popover-panel .ui-setting-detail-grid{background-color:#141b24 !important}
}

/* v1.3.218 — 달력 유외상품 품목별 색상
 * 소장님 지시: "달력에 유외상품도잇잔아 유외상품도 색 다르게해주고 유외상품들어가는것도
 * 색깔다르게해줘". 유류는 이미 유종별(fuel-bg-*)로 색이 갈리는데, 유외상품은 품목이 달라도
 * 전부 같은 색(calendar-goods-badge 기본 보라색 하나)이었다. 같은 앱 안에 이미 있는
 * 세차장 안전달력의 품목→6색 해시(cwSafeGoodsTone, carwash.css 의 cw-safe-goods-badge/
 * cw-safe-detail-row tone-1~6)와 똑같은 팔레트를 달력(calendar-goods-badge, 날짜 상세
 * calendar-goods-detail 카드, 마우스오버 calendar-goods-tip-row)에도 그대로 맞춰 쓴다 —
 * 새 색을 지어내는 대신 이미 검증된 배색을 재사용해 앱 전체 색감을 통일한다. */
.badge.calendar-goods-badge.tone-1{color:#075985;background:#e0f2fe;border-color:rgba(2,132,199,.35)}
.badge.calendar-goods-badge.tone-2{color:#166534;background:#dcfce7;border-color:rgba(22,163,74,.35)}
.badge.calendar-goods-badge.tone-3{color:#7c2d12;background:#ffedd5;border-color:rgba(249,115,22,.35)}
.badge.calendar-goods-badge.tone-4{color:#6b21a8;background:#f3e8ff;border-color:rgba(168,85,247,.35)}
.badge.calendar-goods-badge.tone-5{color:#9f1239;background:#ffe4e6;border-color:rgba(244,63,94,.35)}
.badge.calendar-goods-badge.tone-6{color:#854d0e;background:#fef9c3;border-color:rgba(234,179,8,.35)}

.calendar-goods-detail.tone-1{border-left:4px solid #0284c7}
.calendar-goods-detail.tone-2{border-left:4px solid #16a34a}
.calendar-goods-detail.tone-3{border-left:4px solid #f97316}
.calendar-goods-detail.tone-4{border-left:4px solid #a855f7}
.calendar-goods-detail.tone-5{border-left:4px solid #f43f5e}
.calendar-goods-detail.tone-6{border-left:4px solid #eab308}

.calendar-goods-tip-row.tone-1{border-left:3px solid #0284c7}
.calendar-goods-tip-row.tone-2{border-left:3px solid #16a34a}
.calendar-goods-tip-row.tone-3{border-left:3px solid #f97316}
.calendar-goods-tip-row.tone-4{border-left:3px solid #a855f7}
.calendar-goods-tip-row.tone-5{border-left:3px solid #f43f5e}
.calendar-goods-tip-row.tone-6{border-left:3px solid #eab308}

/* 어두운 화면(다크모드)에서는 위 파스텔 배경이 너무 흐리게 보여, 배경은 옅은 반투명으로
   바꾸고 글자색만 밝혀 눈에 띄게 한다(탱크/재고 다크모드 대비 규칙과 같은 방식). */
html[data-theme="dark"] .badge.calendar-goods-badge.tone-1{color:#7cd4fd;background:rgba(2,132,199,.20);border-color:rgba(2,132,199,.45)}
html[data-theme="dark"] .badge.calendar-goods-badge.tone-2{color:#7fd9ae;background:rgba(22,163,74,.20);border-color:rgba(22,163,74,.45)}
html[data-theme="dark"] .badge.calendar-goods-badge.tone-3{color:#f6ad55;background:rgba(249,115,22,.22);border-color:rgba(249,115,22,.45)}
html[data-theme="dark"] .badge.calendar-goods-badge.tone-4{color:#d1abfb;background:rgba(168,85,247,.22);border-color:rgba(168,85,247,.45)}
html[data-theme="dark"] .badge.calendar-goods-badge.tone-5{color:#fca5b5;background:rgba(244,63,94,.20);border-color:rgba(244,63,94,.45)}
html[data-theme="dark"] .badge.calendar-goods-badge.tone-6{color:#f3d477;background:rgba(234,179,8,.20);border-color:rgba(234,179,8,.45)}


/* v1.3.237 — 마진 핵심 두 열을 색으로 구분. 글자색의 이익/손실 표시는 기존 규칙 유지. */
html:not([data-theme="dark"]) .fuel-margin-table th.margin-simple-per-l{background:#fff1bf!important;color:#725500!important}
html:not([data-theme="dark"]) .fuel-margin-table td.margin-simple-per-l{background:#fff9e5!important}
html:not([data-theme="dark"]) .fuel-margin-table th.margin-net-per-l{background:#d9f2e2!important;color:#175f3a!important}
html:not([data-theme="dark"]) .fuel-margin-table td.margin-net-per-l{background:#eef9f2!important}
html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending>td.margin-simple-per-l,
html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-correcting>td.margin-simple-per-l{background:#fff6d8!important}
html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending>td.margin-net-per-l,
html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-correcting>td.margin-net-per-l{background:#e7f6ec!important}
html[data-theme="dark"] .fuel-margin-table th.margin-simple-per-l{background:#4b3d18!important;color:#ffe39a!important}
html[data-theme="dark"] .fuel-margin-table td.margin-simple-per-l{background:#2e291d!important}
html[data-theme="dark"] .fuel-margin-table th.margin-net-per-l{background:#174432!important;color:#b9f3d4!important}
html[data-theme="dark"] .fuel-margin-table td.margin-net-per-l{background:#183429!important}