/* ============================================================
   v1.3.32 — 대시보드 세로 막대 + 남은 대비·잘림 수정
   디자인·배치 전용 오버레이. 업무 로직/API/DB/FIFO/예측/권한은 변경하지 않는다.
   기존 화면 파일(styles.css, theme-v1324~v1331.css)은 건드리지 않는다.

   1) 운영현황 '매출 추이 / 판매량 추이' 를 세로 막대로 (app.js 가 .v1332-columns 로 그린다)
   2) KPI 작은 설명글씨 대비 2.9:1 → 4.5:1 이상
   3) 좁은 화면 + 큰 글자에서 카드 안쪽이 잘리던 것
   ============================================================ */

/* ── 1. 세로 막대 공통 (밝은 화면) ───────────────────────────── */
html:not([data-theme="dark"]) .v1332-columns{
  height:186px!important;
  gap:10px!important;
  padding:14px 12px 6px!important;
  border:1px solid #e8f0f7!important;
  border-radius:14px!important;
  /* 눈금선 4칸 — 막대 높이를 눈으로 가늠할 수 있게 (앞 레이어가 위에 그려진다) */
  background:
    repeating-linear-gradient(to bottom,transparent 0,transparent 32px,#e4eef6 32px,#e4eef6 33px),
    linear-gradient(180deg,#fdfefe 0%,#f6fafd 100%)!important;
  border-bottom:2px solid #dbe7f2!important;   /* 막대가 서 있는 바닥선 */
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
html:not([data-theme="dark"]) .v1332-columns .v1323-column{
  min-width:52px!important;
  gap:4px!important;
}
html:not([data-theme="dark"]) .v1332-columns .v1323-column>i{
  height:112px!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  align-items:flex-end!important;
}
html:not([data-theme="dark"]) .v1332-columns .v1323-column>i>em{
  width:min(58px,58%)!important;
  min-height:4px!important;
  border-radius:10px 10px 4px 4px!important;
  background:linear-gradient(180deg,#7cc6fc 0%,#2f8bee 62%,#1f6fd0 100%)!important;
  box-shadow:0 6px 13px rgba(41,132,235,.18)!important;
  transition:none!important;
}
/* 판매량 카드는 초록 계열로 구분 (매출과 헷갈리지 않게) */
html:not([data-theme="dark"]) .v1332-columns.volume .v1323-column>i>em{
  background:linear-gradient(180deg,#7ee0b9 0%,#33bd80 62%,#219a65 100%)!important;
  box-shadow:0 6px 13px rgba(49,186,125,.18)!important;
}
/* 가장 큰 달만 진하게 — 어느 달이 제일 높은지 한눈에 */
html:not([data-theme="dark"]) .v1332-columns .v1323-column.peak>i>em{
  background:linear-gradient(180deg,#4aa6f7 0%,#1668cd 62%,#0f5099 100%)!important;
  box-shadow:0 7px 16px rgba(22,104,205,.26)!important;
}
html:not([data-theme="dark"]) .v1332-columns.volume .v1323-column.peak>i>em{
  background:linear-gradient(180deg,#45cd9b 0%,#149a63 62%,#0d7d4f 100%)!important;
  box-shadow:0 7px 16px rgba(20,154,99,.26)!important;
}
html:not([data-theme="dark"]) .v1332-columns .v1323-column>b{
  font-size:11px!important;
  font-weight:950!important;
  color:#15395c!important;
  font-variant-numeric:tabular-nums!important;
}
html:not([data-theme="dark"]) .v1332-columns .v1323-column.peak>b{ color:#0f5099!important; }
html:not([data-theme="dark"]) .v1332-columns.volume .v1323-column.peak>b{ color:#0d7d4f!important; }
html:not([data-theme="dark"]) .v1332-columns .v1323-column>small{
  font-size:9px!important;
  font-weight:800!important;
  color:#5f7488!important;   /* 대비 4.8:1 */
}

/* ── 2. 세로 막대 (어두운 화면) ─────────────────────────────── */
html[data-theme="dark"] .v1332-columns,
html[data-theme="dark"] .v1323-column-chart,
html[data-theme="dark"] .v1323-station-columns{
  border:1px solid #26313d!important;
  border-radius:14px!important;
  background:
    repeating-linear-gradient(to bottom,transparent 0,transparent 32px,#28333f 32px,#28333f 33px),
    linear-gradient(180deg,#161d26 0%,#131922 100%)!important;
  border-bottom:2px solid #2c3844!important;
}
html[data-theme="dark"] .v1332-columns{ height:186px!important;gap:10px!important;padding:14px 12px 6px!important; }
html[data-theme="dark"] .v1323-column>i,
html[data-theme="dark"] .v1323-station-column>i{
  background:transparent!important;border-radius:0!important;overflow:visible!important;
}
html[data-theme="dark"] .v1332-columns .v1323-column>i{ height:112px!important; }
html[data-theme="dark"] .v1323-column>i>em,
html[data-theme="dark"] .v1323-station-column>i>em{
  width:min(58px,58%)!important;min-height:4px!important;
  border-radius:10px 10px 4px 4px!important;
  background:linear-gradient(180deg,#6db9f5 0%,#2f7fd8 100%)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .v1332-columns.volume .v1323-column>i>em{
  background:linear-gradient(180deg,#63d3a6 0%,#1f9c68 100%)!important;
}
html[data-theme="dark"] .v1332-columns .v1323-column.peak>i>em{
  background:linear-gradient(180deg,#9ad3ff 0%,#3f95ef 100%)!important;
}
html[data-theme="dark"] .v1332-columns.volume .v1323-column.peak>i>em{
  background:linear-gradient(180deg,#88e8c1 0%,#25b478 100%)!important;
}
html[data-theme="dark"] .v1332-columns .v1323-column>b{ font-size:11px!important;font-weight:950!important;color:#eaf2fb!important; }
html[data-theme="dark"] .v1332-columns .v1323-column>small{ font-size:9px!important;font-weight:800!important;color:#a9bccf!important; }

/* ── 3. KPI 작은 설명글씨 대비 (밝은 화면) ──────────────────── */
/* 기존 #7f94a8 = 흰 배경 대비 3.1:1 (권장 4.5:1 미달) → #5f7488 = 4.8:1 */
html:not([data-theme="dark"]) body .v1321-kpis .v1200-kpi>small,
html:not([data-theme="dark"]) body .v1200-kpi>small{
  color:#5f7488!important;
}
html:not([data-theme="dark"]) body .v1200-kpi>small.up{ color:#12805a!important; }
html:not([data-theme="dark"]) body .v1200-kpi>small.bad{ color:#c62f3d!important; }
html:not([data-theme="dark"]) body .v1200-kpi>small.warn{ color:#8a5300!important; }

/* ── 4. 좁은 화면 + 큰 글자에서 카드 안쪽이 잘리던 것 ────────── */
@media(min-width:960px) and (max-width:1180px){
  body .v1321-card{ overflow-x:visible!important;min-width:0!important; }
  body .v1321-card>header{ flex-wrap:wrap!important;row-gap:2px!important; }
  body .v1321-bar-row>span{ min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important; }
  body .v1332-columns{ gap:7px!important;padding-left:8px!important;padding-right:8px!important; }
  body .v1332-columns .v1323-column{ min-width:46px!important; }
}

/* ── 5. 폰 화면 ─────────────────────────────────────────────── */
@media(max-width:640px){
  body .v1332-columns{ height:164px!important;gap:7px!important;padding:11px 8px 5px!important; }
  body .v1332-columns .v1323-column{ min-width:44px!important; }
  body .v1332-columns .v1323-column>i{ height:96px!important; }
  body .v1332-columns .v1323-column>i>em{ width:min(30px,72%)!important; }
  body .v1332-columns .v1323-column>b{ font-size:9.5px!important; }
  body .v1332-columns .v1323-column>small{ font-size:8.5px!important; }
}

/* ── 6. 어두운 화면 머리말 장식이 글자를 가리던 것 ──────────── */
/* theme-v1331 의 ⛽ 장식이 불투명해서 오른쪽 '예측 …까지' 글자와 겹쳤다.
   장식은 남기고 흐리게만 해서 글자가 위로 읽히게 한다. */
html[data-theme="dark"] .v1321-head::after{ opacity:.16!important; }