:root {
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #17213b;
  background: #f3f6fb;
  --blue: #1D4166;   /* 브랜드 네이비 (2026-08-23) */
  --line: #dce3ee;
  --muted: #667085;
  --danger: #b42318;
  --text: #17213b;

  /* ── 유종 색 (2026-08-23 확정) ─────────────────────────────
     현장에서 쓰는 색 그대로다. 경유가 초록인 이유가 그것이다.
     색만으로 구분시키지 않는다 — 어디서 쓰든 이름을 같이 적는다.
     ───────────────────────────────────────────────────────── */
  /* 무연(노랑)과 고급(주황)은 서로 멀리 떼어 놓는다.
     v1.3.64 의 #E0A020(색상각 40°)/#E8792B(25°)는 15° 밖에 안 떨어져 있었고
     밝기도 거의 같아서(50/54) 달력 뱃지처럼 작은 자리에서는 구분이 안 됐다.
     사장님: "달력에 무연하고 고급 색감이 거의 비슷하네".
     v1.3.67 — 노랑은 더 노랗게(45°), 주황은 더 진하게(22°, 어둡게) 벌렸다. */
  --fuel-hi:   #C8500C;   /* 고급휘발유 — 진한 주황 (2026-09-13 사장님 지시로 빨강 #C0392B 에서 바꿈.
                             빨강은 '문제·위험' 색과 겹쳐서 고급유 탱크가 늘 위험해 보였다.
                             --state-bad(#B3402F)보다 채도가 훨씬 높아 주황으로 읽힌다.) */
  --fuel-reg:  #E5B21A;   /* 무연(휘발유) — 노랑 */
  --fuel-die:  #2F9E6B;   /* 경유 — 초록 */
  --fuel-ker:  #6B7280;   /* 등유 — 회색 */
  --fuel-urea: #6E4FC7;   /* 요소수 — 보라 (2026-08-24 채도 보정)
                             기존 #7A6FB0 은 채도가 낮아(0.099) 회색으로 읽혔다.
                             색 검증 도구로 확인해 같은 보라 계열에서 채도만 올렸다. */
  --fuel-etc:  #5B6672;   /* 그 밖 */

  /* 연한 바탕용 — 달력 뱃지·표 줄처럼 '칠하는' 자리에서 쓴다.
     2026-09-13(v1.3.64): 화면마다 제 색을 만들어 쓰다 보니 같은 경유가 어디선
     초록이고 어디선 파랑이었다. 칠하는 색은 전부 여기서만 가져간다. */
  --fuel-hi-wash:   rgba(200,80,12,.14);
  --fuel-reg-wash:  rgba(229,178,26,.18);
  --fuel-die-wash:  rgba(47,158,107,.14);
  --fuel-ker-wash:  rgba(107,114,128,.12);
  --fuel-urea-wash: rgba(110,79,199,.12);
  --fuel-etc-wash:  rgba(91,102,114,.09);

  /* 상태색은 유종색보다 어둡게 잡아 초록끼리 겹치지 않게 한다 */
  --state-ok:   #1B7A50;
  --state-warn: #B8791A;
  --state-bad:  #B3402F;
}
* {
  box-sizing: border-box;
}
/* 어떤 요소가 넘쳐도 화면 전체가 옆으로 밀리지 않게 한다.
   가로로 밀리면 왼쪽 메뉴 글자가 잘려 "깨진 화면"이 된다(2026-08-23). */
html, body { max-width: 100%; overflow-x: hidden; }
/* 격자·플렉스 칸이 안쪽 내용 때문에 늘어나는 것을 막는다 */
.card-list > *, .form-grid > *, .station-grid > *, .report-grid > *, .tank-grid > * { min-width: 0; }
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-height: 100vh;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(150deg, #e9f1ff, #f9fbff 55%, #eef8f5);
}
.login-card,
.form-card {
  width: min(100%, 460px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 16px 45px #183b6b16;
}
.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  font-size: 1.75rem;
}
.login-card h1 {
  margin: 18px 0 5px;
}
.login-card p,
.page-title p {
  color: var(--muted);
  margin: 0 0 20px;
}
.login-card label,
.form-card label {
  display: grid;
  gap: 7px;
  font-weight: 750;
  margin: 15px 0;
}
input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #c8d1df;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #17213b;
}
textarea {
  resize: vertical;
}
.primary,
.quiet {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 850;
}
.primary {
  background: var(--blue);
  color: #fff;
}
.quiet {
  background: #edf2f8;
  color: #344054;
}
.large {
  width: 100%;
  min-height: 52px;
}
.error {
  color: var(--danger);
  min-height: 22px;
  margin-top: 10px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* 첫 칸(제목·위치표시)만 세로로 쌓는다.
   예전에는 .topbar div 전체에 걸려 있어서, 나중에 넣은 버튼 묶음까지
   세로로 쌓이며 상단이 깨졌다(2026-08-23). */
.topbar > div:first-child {
  display: grid;
}
.topbar .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

@media (min-width: 1024px) {
  
}
/* 첫 칸 안쪽은 예전처럼 세로로 쌓는다 */
.topbar-title { display: grid; }
.topbar-left { min-width: 0; overflow: hidden; }
.topbar .top-actions button { flex: 0 0 auto; white-space: nowrap; }
.topbar small {
  color: var(--muted);
  margin-top: 3px;
}
main {
  max-width: none;
  margin: 0;
  padding: 20px 16px 172px;   /* 아래 올리기 줄 + 메뉴 자리 */
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.page-title h1 {
  font-size: 1.5625rem;
  margin: 0 0 5px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 18px;
}
.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}
.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 1.5625rem;
}
.card-list {
  display: grid;
  gap: 12px;
}
.station-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 17px;
  display: grid;
  gap: 10px;
}
.search-result { width: 100%; text-align: left; color: inherit; cursor: pointer; }
.search-result p { margin: 6px 0 0; }
.station-card.muted { opacity: .68; }
.search-dialog { max-width: 760px; }
.notification-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: white; font-size: 0.6875rem; }
.upload-primary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.upload-primary-actions button { min-height: 76px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
.upload-primary-actions button span { font-size: 0.75rem; opacity: .78; }
.visually-hidden-file { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
@media (pointer: fine) { .camera-only { display: none !important; } .upload-primary-actions { grid-template-columns: 1fr; } }
.station-card.problem {
  border-left: 5px solid #f04438;
}
.station-head {
  display: flex;
  justify-content: space-between;
}
.badge {
  font-size: 0.75rem;
  font-weight: 850;
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef4ff;
  color: #3538cd;
}
.badge.problem {
  background: #fef3f2;
  color: #b42318;
}
.badge.ok {
  background: #ecfdf3;
  color: #067647;
}
.amount-row,
.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #475467;
}
.button-row button {
  flex: 1;
  min-width: 120px;
}
.form-card {
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
}
.form-card.compact {
  padding: 18px;
}
.form-card h2 {
  font-size: 1.1875rem;
  margin: 0 0 8px;
}
.password-dialog {
  width: min(92vw, 460px);
  border: 0;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 24px 80px #10182855;
}
.password-dialog::backdrop {
  background: #10182899;
}
.password-dialog label {
  display: grid;
  gap: 7px;
  margin: 15px 0;
  font-weight: 750;
}







.install-steps strong,
.install-steps span,
.install-success strong,
.install-success span,
.install-warning strong,
.install-warning span { display: block; }
.install-steps span,
.install-success span,
.install-warning span { margin-top: 5px; color: var(--muted); line-height: 1.5; }
.install-success,
.install-warning { padding: 17px; border-radius: 15px; background: #ecfdf3; color: #067647; }
.install-warning { background: #fff7ed; color: #9a3412; }
.login-card .app-install-button { margin-top: 10px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.difference-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eff4ff;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
}
.difference-box strong {
  font-size: 1.375rem;
}
.message {
  min-height: 24px;
  margin-top: 10px;
}
.toolbar {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-grid > div,
.calendar-day {
  min-height: 100px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
}
.calendar-day { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; color: var(--text); }
.calendar-day.has-events { border-color: #84adff; background: #f5f8ff; }
.day-sales { font-size: 0.6875rem; font-weight: 700; color: #1a7f37; background: #eafbf0; padding: 1px 6px; border-radius: 999px; }

/* ===== 달력 개선 (2026-08-22): 상태 깃발 · 요일머리글 · 오늘강조 · 뱃지 접기 ===== */
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.calendar-weekday { text-align: center; font-size: 0.75rem; font-weight: 900; color: var(--muted); padding: 6px 0; }
.calendar-weekday.sun { color: #d92d20; }
.calendar-weekday.sat { color: #175cd3; }
.calendar-day { position: relative; overflow: hidden; padding-top: 12px; }
.day-flag { position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 12px 12px 0 0; }
.day-flag.bad { background: #f04438; }
.day-flag.warn { background: #f79009; }
.day-flag.ok { background: #12b76a; }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.calendar-day.sun > .day-head > strong { color: #d92d20; }
.calendar-day.sat > .day-head > strong { color: #175cd3; }
.calendar-day.today { border-color: var(--blue); box-shadow: 0 0 0 2px #155eef33; }
.calendar-day.today > .day-head > strong { background: var(--blue); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: 0.8125rem; }
.calendar-day .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.warn { background: #fff7e6; color: #b45309; }
.badge.more { background: #eef1f6; color: #475467; font-weight: 800; }
.calendar-day:hover { border-color: var(--blue); }
.wide-field { grid-column: 1 / -1; }

.calendar-filters { grid-template-columns: 150px minmax(220px, 1fr) 150px 130px 130px; align-items: end; }
.calendar-filters label { margin: 0; font-size: 0.75rem; }
.badge.delivery { background: #ecfdf3; color: #067647; }
.badge.document { background: #fff6ed; color: #b54708; }


.station-card.muted { opacity: .65; }
.permission-choice-grid label,
.station-choice-grid label { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.permission-choice-grid input,
.station-choice-grid input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.permission-choice-grid span,
.station-choice-grid span { display: grid; gap: 2px; }
.permission-choice-grid small,
.station-choice-grid small { color: var(--muted); font-size: 0.6875rem; }
.user-access-card details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.user-access-card summary { cursor: pointer; color: var(--blue); font-weight: 800; padding: 6px 0; }
.user-access-card h4 { margin: 14px 0 8px; }


.station-card.warning { border-color: #fdb022; background: #fffaeb; }
.forecast-note { margin: 10px 0; padding: 9px 11px; border-radius: 10px; background: #f2f4f7; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.recognition-dialog { width: min(920px, calc(100% - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: 22px; padding: 0; box-shadow: 0 22px 70px #10182840; }
.recognition-dialog::backdrop { background: #10182899; }
.recognition-dialog form { padding: 22px; overflow: auto; }
.recognition-detail-list { display: grid; gap: 10px; margin: 10px 0 18px; }
.recognition-detail-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(110px, 160px)); gap: 9px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.recognition-detail-row label { margin: 0; }
.form-help { color: var(--muted); line-height: 1.5; }
.overview-panel { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px #183b6b12; }
.overview-panel h2 { margin: 0 0 5px; }
.overview-panel p { margin: 0; color: var(--muted); }
.overview-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 14px 0 10px; }
.overview-tabs button { flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 999px; padding: 9px 16px; background: #edf2f8; color: #344054; font-weight: 850; }
.overview-tabs button.active { background: var(--blue); color: #fff; }
.bar-chart { min-height: 230px; display: flex; align-items: stretch; gap: 7px; overflow-x: auto; padding: 30px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }


.bar-track { display: flex; align-items: end; justify-content: center; background: #eef4ff; border-radius: 9px 9px 3px 3px; overflow: hidden; }
.bar-track span { width: 100%; display: block; background: linear-gradient(180deg,#528bff,var(--blue)); border-radius: 9px 9px 3px 3px; }

.overview-note { padding: 14px; border-radius: 14px; background: #f5f8ff; color: #475467; margin-bottom: 12px; }
.segmented {
  display: flex;
  background: #e9eef6;
  padding: 4px;
  border-radius: 13px;
  margin-bottom: 14px;
}
.segmented button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px;
  border-radius: 10px;
  font-weight: 800;
}
.segmented .active {
  background: #fff;
  box-shadow: 0 1px 5px #10182820;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 10px 0 16px;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
}
.check-grid input {
  width: 18px;
  min-height: 18px;
}
.empty-card {
  background: #fff;
  border: 1px dashed #bac5d4;
  border-radius: 17px;
  padding: 30px;
  text-align: center;
  color: var(--muted);
}
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  /* 메뉴가 10개라 억지로 나누면 글씨가 안 읽힌다. 옆으로 밀어 보게 한다. */
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px max(8px, env(safe-area-inset-right))
    calc(6px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px #1d293912;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav button {
  border: 0;
  background: transparent;
  border-radius: 12px;
  min-height: 46px;
  flex: 0 0 auto;
  min-width: 58px;
  padding: 0 8px;
  color: #667085;
  font-weight: 800;
}
.bottom-nav button.active {
  background: #eef4ff;
  color: var(--blue);
}
.document-viewer {
  position: fixed;
  inset: 67px 0 0;
  z-index: 50;
  background: #182230;
  display: grid;
  grid-template-rows: auto 1fr;
}
.document-viewer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
}
.document-viewer-back {
  min-height: 52px;
  padding: 10px 20px;
  border: 0;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
}
.document-viewer-body {
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 14px;
}
.document-viewer-body img {
  max-width: 100%;
  height: auto;
}
.document-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.station-open {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.station-open:hover,
.station-open:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 8px 24px #155eef1f;
  outline: none;
}
.station-open small {
  display: block;
  margin-top: 10px;
  color: var(--blue);
  font-weight: 800;
}
.closing-station {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.closing-actions {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.closing-action {
  grid-column: span 4;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: #fff;
  color: var(--text);
  text-align: left;
  box-shadow: 0 4px 15px #1018280d;
}
.closing-action:nth-child(1),
.closing-action:nth-child(2),
.closing-action:nth-child(3) {
  grid-column: span 6;
}
.closing-action strong,
.closing-action span {
  display: block;
}
.closing-action strong {
  font-size: 1.1875rem;
  margin-bottom: 7px;
}
.closing-action span {
  color: var(--muted);
  line-height: 1.45;
}
.closing-action.primary span {
  color: #ffffffd9;
}
.inline-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}
.inline-settings label {
  margin: 0;
}
.closing-editor { margin-top: 16px; }
.closing-editor .station-head { align-items: flex-start; margin-bottom: 14px; }
.closing-editor h2 { margin: 0 0 5px; }
.closing-detail-head,
.closing-detail-row {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 120px 150px 48px;
  gap: 8px;
  align-items: end;
}
.closing-detail-head { padding: 8px 6px; color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.closing-detail-row { padding: 10px 6px; border-top: 1px solid var(--line); }
.closing-detail-row label { margin: 0; }
.closing-detail-remove { min-height: 46px; border: 0; border-radius: 12px; background: #fff1f0; color: #b42318; font-weight: 900; }
@media (max-width: 680px) {
  .topbar { height: 64px; padding: 8px; gap: 6px; }
  .topbar > div:first-child { min-width: 76px; max-width: 92px; font-size: 0.8125rem; line-height: 1.25; }
  .topbar small { display: none; }
  .topbar .top-actions { gap: 4px; }
  .topbar .top-actions button { min-height: 44px; padding: 8px 7px; font-size: 0.6875rem; white-space: nowrap; }
  .metric-grid {
    grid-template-columns: 1fr;
  }
  .form-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }
  .closing-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }
  .toolbar {
    grid-template-columns: 1fr;
  }
  .calendar-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-filters > :nth-child(2) { grid-column: 1 / -1; }
  .bottom-nav {
    overflow-x: hidden;
    grid-template-columns: repeat(8, minmax(42px, 1fr));
    padding-left: 4px;
    padding-right: 4px;
  }
  .bottom-nav button {
    min-height: 46px;
    padding: 4px 2px;
    font-size: 0.6875rem;
  }
  .calendar-grid > div,
  .calendar-day {
    min-height: 76px;
    padding: 6px;
  }
  .overview-panel { padding: 14px; margin-left: -4px; margin-right: -4px; }
  .bar-chart { min-height: 205px; }
  
  .page-title h1 {
    font-size: 1.375rem;
  }
  .closing-station,
  .inline-settings {
    grid-template-columns: 1fr;
  }
  .closing-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .closing-action,
  .closing-action:nth-child(1),
  .closing-action:nth-child(2),
  .closing-action:nth-child(3),
  .closing-action:last-child {
    grid-column: auto;
    min-height: 126px;
  }
  .closing-action:first-child {
    grid-column: 1 / -1;
    min-height: 108px;
  }
  .closing-detail-head { display: none; }
  .closing-detail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0; }
  .recognition-dialog { width: calc(100% - 12px); max-height: calc(100vh - 12px); }
  .recognition-dialog form { padding: 16px; }
  .recognition-detail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recognition-detail-row > strong { grid-column: 1 / -1; }
  .closing-detail-row label:nth-child(2) { grid-column: 1 / -1; }
  .closing-detail-remove { align-self: end; }
}

.password-field {
  position: relative;
  width: 100%;
}
.password-field input {
  padding-right: 52px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 40px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 1.1875rem;
  line-height: 1;
  padding: 0;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  background: #eef4ff;
  outline: none;
}

/* ============================================================
   디자인 개편 (2026-08-22)
   — 카카오(노란 강조 버튼) · ChatGPT(미니멀 PC 사이드바) ·
     오빠두 엑셀 대시보드(상태색 KPI 카드) 참고
   기존 CSS는 그대로 두고, 이 블록에서 팔레트/레이아웃만 덧씌운다.
   PC(960px 이상)에서만 사이드바가 보이고 하단탭은 숨는다.
   모바일은 기존 하단탭 그대로 사용한다.
   ============================================================ */
/* ── 네이비 톤으로 전환 (2026-08-23) ──────────────────────────
   8/17 구현본(gas-ui.css)이 채택한 색이다. 시안 HTML 은 오렌지였지만
   시트 남색 체계와 안 맞아서 구현할 때 네이비로 바꿨고, 그쪽이 맞다.
   시트 순서 램프 s1~s7 은 진한색 → 연한색. 색이 순서를 말해 준다.
   ──────────────────────────────────────────────────────────── */
:root {
  --s1: #0F2942; --s2: #1D4166; --s3: #2C5A8A; --s4: #3F76AC;
  --s5: #5E92C4; --s6: #8AB0D6; --s7: #B4CDE5;

  --accent: #EDA100;       /* 강조 — 주의를 끌 곳에만 */
  --accent-ink: #3A2800;
  --sidebar-bg: #12283F;   /* 네이비 사이드바 */
  --sidebar-ink: #E8EEF5;
  --sidebar-muted: #93A9BF;
  --ok: #1B7A50;
  --warn: #B8791A;

  /* 글자 크기 배율 — 구서버에 있던 기능. 한 번에 키우고 줄인다. */
  --z: 1;
}

/* 주요 버튼은 네이비 그라데이션 + 흰 글씨 */
.primary {
  background: linear-gradient(180deg, var(--s3) 0%, var(--s2) 100%);
  color: #fff;
  font-weight: 900;
  border: 1px solid var(--s2);
  box-shadow: 0 1px 2px #0F294218;
}
.primary:hover,
.primary:focus-visible {
  box-shadow: 0 2px 8px #0F294226;
  outline: none;
}
.primary:active { transform: translateY(1px); }
.primary:disabled { box-shadow: none; opacity: .55; }

/* 표 머리는 네이비, 합계줄은 크림 + 이중선 — 엑셀에서 보던 그대로 */
table thead th {
  background: linear-gradient(180deg, var(--s3), var(--s2));
  color: #fff;
  font-weight: 800;
}
table tbody tr:nth-child(even) > td { background: #F7FAFD; }
table tfoot td, table tr.total td {
  background: #FFF6E8; font-weight: 800;
  border-top: 2px double var(--s2);
}

/* 상단바에도 네이비 한 줄 */
.topbar { border-bottom: 2px solid var(--s2); }

/* 오빠두 스타일 — KPI 카드: 큰 숫자 + 상태색 왼쪽 바 */
.metric {
  position: relative;
  border-left: 4px solid var(--blue);
  padding-left: 14px;
}
.metric strong { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.02em; }
.metric span { text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.04em; }
.station-card.problem { border-left-width: 5px; border-left-color: var(--danger); }
.badge { font-weight: 900; }

/* PC 사이드바 (ChatGPT류 미니멀 다크 사이드바) — 기본은 숨김 */
.sidebar-nav {
  display: none;
}

@media (min-width: 960px) {
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    padding: 16px 12px;
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    z-index: 40;
    overflow-y: auto;
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 18px;
    color: #fff;
  }
  .sidebar-brand-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 900;
  }
  .sidebar-brand-text { font-weight: 800; font-size: 0.875rem; }
  .sidebar-nav button[data-nav] {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--sidebar-muted);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    border-left: 3px solid transparent;
  }
  .sidebar-nav button[data-nav]:hover {
    background: #ffffff12;
    color: var(--sidebar-ink);
  }
  .sidebar-nav button[data-nav].active {
    background: #ffffff1a;
    color: #fff;
    border-left-color: var(--accent);
  }

  /* 사이드바 폭만큼 본문을 밀어낸다 */
  .topbar { margin-left: 240px; }
  /* 사이트는 화면을 꽉 채운다. 오른쪽에 빈 공간을 남기지 않는다(2026-08-23). */
  #mainContent { margin-left: 240px; max-width: none; width: auto; padding: 24px 28px 60px; }
  .bottom-nav { display: none; }

  /* PC에서는 대시보드 카드도 폭을 살려 3열까지 */
  .metric-grid { grid-template-columns: repeat(4, 1fr); }
  .card-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .closing-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .closing-action,
  .closing-action:nth-child(1),
  .closing-action:nth-child(2),
  .closing-action:nth-child(3) { grid-column: span 2; }
}

/* ============================================================
   대시보드·매입/실마진 화면 (2026-08-22 추가)
   대표=전체 / 소장=담당 주유소, PC는 정보 밀도 높게·모바일은 핵심만
   ============================================================ */

.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px 13px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 3px 12px #1018280a; }










.kpi strong { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.02em; }

.section-label { font-size: 0.75rem; font-weight: 900; color: var(--muted); letter-spacing: .03em; margin: 18px 0 10px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 3px 12px #1018280a; }
.panel-label { font-size: 0.75rem; font-weight: 900; color: var(--muted); margin: 0 0 10px; }


.donut { position: relative; width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.donut::after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #fff; }














/* 매입·실마진 화면 */


.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 720px; }
.data-table th, .data-table td { padding: 11px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.data-table th:first-child, .data-table td:first-child,
.data-table th:nth-child(2), .data-table td:nth-child(2) { text-align: left; }
.data-table thead th { background: #f7f9fc; color: var(--muted); font-size: 0.75rem; font-weight: 900; position: sticky; top: 0; }
.data-table tbody tr:hover { background: #f9fbff; }
.data-table tfoot td { font-weight: 900; background: #f7f9fc; border-bottom: 0; }
.data-table .num-good { color: var(--ok); font-weight: 800; }
.data-table .num-bad { color: var(--danger); font-weight: 800; }



@media (min-width: 960px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .kpi strong { font-size: 1.5625rem; }
  
  
  .cash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .cash-summary { position: sticky; top: 16px; display: flex; flex-direction: column; }
  .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; }
}
@media (max-width: 680px) {
  /* 모바일은 핵심 숫자만 — 표는 가로 스크롤, 부가정보는 감춘다 */
  .kpi strong { font-size: 1.375rem; }
  
  
  
}

/* 달력 — 폰에서는 칸이 좁으므로 뱃지를 2개까지만 노출하고 매출액을 우선 보여준다 */
@media (max-width: 680px) {
  .calendar-day { min-height: 82px; padding: 6px; padding-top: 11px; gap: 3px; }
  .calendar-day .badge { font-size: 0.6875rem; padding: 3px 6px; }
  .calendar-day .badge:nth-of-type(n + 3):not(.more) { display: none; }
  .day-sales { font-size: 0.6875rem; padding: 1px 5px; }
  .calendar-weekday { font-size: 0.6875rem; padding: 4px 0; }
}

/* ============================================================
   화면 강화 (2026-08-23) — 주유소별 미니 대시보드 · 거래처 색상 · 정보 밀도
   ============================================================ */

/* 대시보드 요약 컨테이너는 내부에서 자체 레이아웃(KPI행·패널행)을 한다.
   격자로 두면 KPI행·패널행이 각각 한 칸씩 차지해 세로로 찌그러진다. */
.dash-summary { display: block; }

/* 오늘 보고 현황 막대 */
.report-bars { display: grid; gap: 8px; }






/* 주유소별 미니 대시보드 타일 — PC 한 줄 최대 6개, 넘치면 아래로 */
.station-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.station-tile {
  display: flex; flex-direction: column; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid #12b76a;
  border-radius: 14px; padding: 12px 12px 11px; text-align: left; color: var(--text);
  cursor: pointer; box-shadow: 0 2px 8px #1018280a; transition: box-shadow .15s, transform .15s;
}
.station-tile.problem { border-left-color: #f04438; }
.station-tile:hover, .station-tile:focus-visible { box-shadow: 0 6px 18px #155eef26; transform: translateY(-1px); outline: none; }












.status-dots { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 2px; }






/* 거래처(매입처)별 색상 입고 뱃지 */


.supplier-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--supplier-color); flex: 0 0 auto; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  
}
.supplier-list { display: grid; gap: 7px; margin-top: 10px; }
.supplier-row { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1.2fr); gap: 8px; align-items: center; }
.supplier-row small { color: var(--muted); font-size: 0.6875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-row input[type="color"] { min-height: 34px; padding: 2px; border-radius: 8px; }
.supplier-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 800; color: var(--supplier-color); }

/* 인식 결과에서 "사람이 꼭 봐야 할 항목" 강조 */



@media (min-width: 700px)  { .station-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .station-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .station-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (min-width: 960px) {
  /* 현장에서 "글씨만 크고 빈 공간이 많다"는 지적 반영.
     읽기용 텍스트·여백만 촘촘하게. 버튼·입력칸은 손가락 크기를 유지한다. */
  :root { font-size: 0.9375rem; }
  #mainContent { padding: 20px 26px 48px; }
  .page-title h1 { font-size: 1.375rem; }
  .page-title p { margin-bottom: 12px; font-size: 0.8125rem; }
  .station-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
  .kpi { padding: 12px 13px 11px; border-radius: 14px; }
  .kpi strong { font-size: 1.375rem; }
  
  
  
  .panel { padding: 13px 14px; border-radius: 15px; }
  .panel-label { font-size: 0.6875rem; margin-bottom: 8px; }
  .donut { width: 74px; height: 74px; }
  .donut::after { width: 50px; height: 50px; }
  
  
  
  .section-label { margin: 14px 0 8px; font-size: 0.6875rem; }
  input, select, textarea { min-height: 42px; font-size: 0.875rem; }
  .form-card label { margin: 10px 0; font-size: 0.8125rem; }
  .form-card { padding: 18px; border-radius: 18px; }
  .station-card { padding: 14px; border-radius: 14px; }
  .badge { font-size: 0.6875rem; padding: 4px 8px; }
}

@media (max-width: 680px) {
  /* 폰은 핵심만 — 달력 칸이 좁으므로 뱃지 2개까지, 매출액 우선 */
  .kpi strong { font-size: 1.375rem; }
  .calendar-day .badge:nth-of-type(n + 3):not(.more) { display: none; }
  .supplier-row { grid-template-columns: minmax(0,1fr) 46px; }
  .supplier-row small { grid-column: 1 / -1; }
}

/* ============================================================
   화면 안 탭 (2026-08-23)
   항목이 많은 화면을 큰 갈래로 나눠, 고른 것만 보이게 한다.
   ============================================================ */
.tab-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  margin: 0 0 16px;
  background: #e9eef6;
  border-radius: 13px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-button {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #475467;
  font-weight: 800;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-button:hover { color: var(--text); }
.tab-button.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 5px #10182820;
}
.tab-button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* 시스템 안의 하위 탭은 한 단계 아래라는 게 보이도록 조금 작고 옅게 */



@media (min-width: 960px) {
  .tab-bar { margin-bottom: 14px; }
  .tab-button { flex: 0 0 auto; font-size: 0.8125rem; min-height: 40px; padding: 9px 18px; }
  
}

/* ============================================================
   좌측 메뉴(LNB) 아코디언 (2026-08-23)
   이카운트·스마트스토어 방식 — 대분류를 펼쳐 하위 업무를 고르면
   오른쪽 작업영역이 그 업무 하나로 통째로 바뀐다.
   ============================================================ */
@media (min-width: 960px) {
  .nav-group { margin-top: 2px; }
  .nav-group-head {
    all: unset; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 11px 12px; border-radius: 10px;
    color: var(--sidebar-muted); font-weight: 700; font-size: 0.875rem;
    cursor: pointer; border-left: 3px solid transparent;
  }
  .nav-group-head:hover { background: #ffffff12; color: var(--sidebar-ink); }
  .nav-group.open > .nav-group-head { color: #fff; }
  .nav-caret { font-size: 0.6875rem; opacity: .7; transition: transform .18s; }
  .nav-group.open .nav-caret { transform: rotate(90deg); }
  .nav-children {
    display: none; margin: 2px 0 6px 14px; padding-left: 8px;
    border-left: 1px solid #ffffff1f;
  }
  .nav-group.open .nav-children { display: block; }
  .nav-child {
    all: unset; box-sizing: border-box; display: block;
    padding: 9px 12px; border-radius: 8px;
    color: var(--sidebar-muted); font-weight: 600; font-size: 0.8125rem; cursor: pointer;
  }
  .nav-child:hover { background: #ffffff12; color: var(--sidebar-ink); }
  .nav-child.active { background: var(--accent); color: var(--accent-ink); font-weight: 800; }

  /* 상단에 지금 보고 있는 위치 표시 */
  .topbar-left { display: flex; flex-direction: column; gap: 2px; }
  .crumb { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
  .crumb strong { color: var(--text); font-size: 0.9375rem; font-weight: 800; }
  .crumb-sep { opacity: .45; }
  .crumb:not([hidden]) + .topbar-title { display: none; }

  /* 왼쪽 메뉴로 고르므로 화면 안 탭 바는 감춘다 (모바일에서는 계속 사용) */
  .tab-bar { display: none; }
}

/* ============================================================
   달력 집중 개선 (2026-08-23)
   달력이 첫 화면이다. 위에 이 달 숫자, 아래 큰 달력,
   검색·일정입력은 접어서 맨 아래로 내렸다.
   ============================================================ */
.calendar-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.calendar-move { display: flex; align-items: center; gap: 6px; }
.calendar-move input[type="month"] { min-height: 40px; width: 168px; font-weight: 800; }
.calendar-move .quiet { min-width: 44px; min-height: 40px; padding: 8px 12px; font-weight: 900; }

/* 이 달 요약 — 매출부터 보이게 */
.calendar-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 380px; }
.cal-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 12px; padding: 8px 11px;
}
.cal-kpi span { font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.cal-kpi strong { font-size: 1rem; font-weight: 900; letter-spacing: -.02em; }
.cal-kpi.ok { border-left-color: #12b76a; }
.cal-kpi.bad { border-left-color: #f04438; }
.cal-kpi.bad strong { color: #b42318; }

/* 하루 칸 — 날짜와 매출은 항상 보이고, 뱃지는 남는 자리에만 */
.calendar-day .day-badges { display: flex; flex-direction: column; gap: 3px; width: 100%; overflow: hidden; }
.calendar-day.alert { border-color: #fda29b; background: #fffbfa; }
.calendar-day .day-head > strong { font-size: 0.9375rem; font-weight: 900; }
.day-sales { font-variant-numeric: tabular-nums; }

.calendar-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 8px 2px 0; font-size: 0.6875rem; color: var(--muted); font-weight: 700;
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend .day-flag { position: static; width: 14px; height: 6px; border-radius: 3px; }
.calendar-legend .legend-sales { margin-left: auto; font-weight: 600; }

/* 검색·일정등록은 접어둔다 */
.calendar-tools { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.calendar-tools > summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font-size: 0.8125rem; font-weight: 800; color: var(--muted);
}
.calendar-tools > summary::-webkit-details-marker { display: none; }
.calendar-tools > summary::before { content: "▸ "; }
.calendar-tools[open] > summary::before { content: "▾ "; }
.calendar-tools[open] > summary { border-bottom: 1px solid var(--line); color: var(--text); }
.calendar-tools > *:not(summary) { padding: 12px 14px; margin: 0; }
.calendar-tools .form-card { border: 0; box-shadow: none; margin: 0; }

@media (min-width: 960px) {
  /* PC 는 화면이 넓다 — 칸을 키워 하루에 무슨 일이 있었는지 다 보이게 */
  .calendar-day { min-height: 124px; }
  .calendar-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calendar-grid { gap: 7px; }
}
@media (max-width: 680px) {
  .calendar-topbar { flex-direction: column; align-items: stretch; }
  .calendar-move input[type="month"] { flex: 1; width: auto; }
  .calendar-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-kpi strong { font-size: 0.9375rem; }
  .calendar-legend .legend-sales { display: none; }
}

/* ============================================================
   정보 밀도 (2026-08-23) — 읽는 글씨와 여백만 줄인다.
   누르는 것(버튼·입력칸)은 손가락 크기 그대로 둔다.
   ============================================================ */
@media (min-width: 960px) {
  :root { font-size: 0.875rem; }
  .page-title h1 { font-size: 1.1875rem; }
  .page-title p { font-size: 0.75rem; }
  .form-card, .overview-panel { padding: 14px 16px; margin-bottom: 10px; }
  .form-card h2, .overview-panel h2 { font-size: 0.875rem; margin-bottom: 10px; }
  .station-card { padding: 11px 13px; }
  .station-card strong { font-size: 0.8125rem; }
  .amount-row { font-size: 0.75rem; }
  .form-help { font-size: 0.75rem; }
  .card-list { gap: 8px; }
  /* 누르는 것은 줄이지 않는다 */
  button, input, select, textarea { min-height: 42px; }
  .badge { min-height: 0; }
}
.station-card.compact-row { padding: 8px 11px; }
.station-card.compact-row strong { font-size: 0.75rem; font-weight: 700; }
.station-card.compact-row .amount-row { font-size: 0.6875rem; }

/* ============================================================
   소통 — 메시지 · 알림 (2026-08-23)
   ============================================================ */
.message-card { border-left: 4px solid var(--line); }
.message-card.unread { border-left-color: var(--blue); background: #f5f8ff; }
.message-card.urgent { border-left-color: #f04438; }
.message-card.urgent .station-head strong { color: #b42318; }
.message-card p { margin: 6px 0 8px; white-space: pre-wrap; font-size: 0.8125rem; line-height: 1.55; }
.checkbox-line { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-weight: 700; font-size: 0.8125rem; }
.checkbox-line input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; }
#messageBody { min-height: 76px; resize: vertical; line-height: 1.5; }

/* 왼쪽 메뉴 안읽음 표시 */
.nav-badge {
  margin-left: auto; background: #d92d20; color: #fff;
  font-size: 0.6875rem; font-weight: 900; padding: 1px 6px; border-radius: 999px; min-height: 0;
}
.sidebar-nav [data-nav="messages"] { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   현황 맨 위 — 이 달 매출·마진 (2026-08-23)
   ============================================================ */
.trend-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 2px 8px #1018280a;
}











.panel-label { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 800; color: var(--muted); }

/* 일별 매출 막대 */






/* 주유소 순위 */











@media (min-width: 960px) {
  
  
  
}

/* 준비 상태 패널 (2026-08-23) */
.ready-panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fbfcfe; }
.ready-panel h3 { margin: 0; font-size: 0.875rem; }
.ready-panel .card-list { gap: 6px; margin-top: 8px; }

/* 앱 설치 버튼 — 이미 설치된 기기에서는 문구만 바꿔 계속 보여준다 */
.app-install-button.installed { opacity: .75; }


/* ============================================================
   유종 표시 — 색 동그라미 + 이름 (2026-08-23)
   색맹이신 분도 이름으로 알 수 있어야 하므로 이름을 반드시 같이 쓴다.
   ============================================================ */
.fuel-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fuel-etc); flex: 0 0 auto;
  box-shadow: 0 0 0 1px #00000018;
}
.fuel-dot.hi   { background: var(--fuel-hi); }
.fuel-dot.reg  { background: var(--fuel-reg); }
.fuel-dot.die  { background: var(--fuel-die); }
.fuel-dot.urea { background: var(--fuel-urea); }
.fuel-dot.ker  { background: var(--fuel-ker); }  /* v1.3.224 — FUEL_KINDS(app.js)에는 등유(ker)가 있는데
  여기 없어서 등유 점만 기본값(--fuel-etc)으로 나왔다(회색 계열이라 눈에 잘 안 띄지만 실제로는 다른 색). */

.fuel-name { display: inline-flex; align-items: center; gap: 6px; }

/* 유종 범례 — 달력·재고 화면 위에 한 줄 */
.fuel-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 0.6875rem; font-weight: 700; color: var(--muted);
}
.fuel-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ============================================================
   달력 보강 (2026-08-23) — 구서버 실무 기능 복원
   ============================================================ */
.calendar-legendbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 2px 8px;
}

/* 환산수량 ↔ 부피량 전환 */
.qty-switch {
  display: inline-flex; background: #eef1f6; border-radius: 999px; padding: 3px; gap: 2px;
}
.qty-option {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; min-height: 34px;
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 800; color: var(--muted);
}
.qty-option.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px #10182814; }

/* 일정 단계 3색 */












/* 입고 뱃지에 유종 점 하나 더 */


/* 눌러서 고정되는 툴팁 — 폰에는 마우스가 없다 */
.cal-tip {
  position: fixed; z-index: 200; max-width: 260px;
  background: #17212B; color: #fff; border-radius: 9px;
  padding: 9px 11px; font-size: 0.75rem; line-height: 1.5; font-weight: 600;
  white-space: pre-line; box-shadow: 0 10px 30px #10182833;
  pointer-events: none;
}

@media (max-width: 680px) {
  .calendar-legendbar { flex-direction: column; align-items: stretch; }
  .qty-switch { align-self: flex-start; }
}

/* 현황 안의 주유소별 — 메뉴가 한 단계 더 들어간다 */
@media (min-width: 960px) {
  .nav-group-sub { margin-left: 0; }
  .nav-group-sub > .nav-group-head { font-size: 0.8125rem; font-weight: 600; padding: 9px 12px; }
  .nav-group-sub .nav-children { margin-left: 10px; }
  .nav-group-sub .nav-child { font-size: 0.75rem; padding: 8px 12px; }
}

/* ============================================================
   보고 현황 신호등 (2026-08-23) — 8/16 시안 대표화면
   ============================================================ */
.report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.report-head h2 { margin: 0; font-size: 1rem; }
.report-head-right { display: flex; align-items: center; gap: 8px; }
.report-head-right input[type="date"] { min-height: 38px; width: 158px; }

.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.report-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; box-shadow: 0 2px 8px #1018280a;
}













/* ============================================================
   탱크 액량계 (2026-08-23) — 8/16 시안 · gas-ui.css 이식
   ============================================================ */
.tank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.tank-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 13px; box-shadow: 0 2px 8px #1018280a;
  display: flex; flex-direction: column; gap: 9px;
}
.tank-card.bad { border-color: #F0CFC9; background: #FFFBFA; }
.tank-top { display: flex; flex-direction: column; gap: 3px; }
.tank-top strong { font-size: 0.8125rem; }
.tank-top .fuel-name { font-size: 0.75rem; color: var(--muted); font-weight: 700; }

.tank-body { display: flex; align-items: flex-end; gap: 11px; }
.tank-vessel {
  position: relative; width: 46px; height: 74px; flex: 0 0 auto;
  border-radius: 9px 9px 14px 14px; background: #EEF1F5;
  box-shadow: inset 0 2px 6px #00000024, inset 0 -2px 0 #ffffff18;
  overflow: hidden;
}
.tank-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  transition: height .5s cubic-bezier(.2,.8,.2,1);
}
.tank-safety-line { position: absolute; left: 0; right: 0; height: 2px; background: #B3402F; opacity: .8; }

.tank-figures { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tank-figures strong { font-size: 1rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tank-figures strong em { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--muted); margin-left: 1px; }
.tank-figures span { font-size: 0.6875rem; color: var(--muted); }
.tank-figures b { font-size: 0.8125rem; font-weight: 900; }
.tank-figures .badge { align-self: flex-start; margin-top: 3px; }

.tank-foot { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.6875rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; }

.tank-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tank-total { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tank-total .fuel-name { font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.tank-total strong { display: block; font-size: 1rem; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tank-total small { font-size: 0.6875rem; color: var(--muted); }

.badge.warn { background: #FBF3E4; color: #B8791A; }


/* ============================================================
   글자 크기 배율 (2026-08-23 도입 → 2026-08-24 실제로 작동하게 고침)
   ------------------------------------------------------------
   [고친 내용] 예전에는 body 에만 배율을 걸어놨는데, 화면 안의 글씨는
   전부 px 로 크기가 못박혀 있어서 가+ / 가− 를 눌러도 아무것도 안 커졌다.
   이제 모든 글씨 크기를 rem(뿌리 글자크기의 배수)으로 바꿔서,
   여기 :root 한 줄만 바꾸면 화면 전체 글씨가 같이 커지고 작아진다.

   뿌리를 16px 로 고정하는 이유: rem 계산의 기준점이라 PC/폰이 달라지면
   같은 카드가 화면마다 다른 크기로 보인다. 밀도 조절은 글자가 아니라
   여백(padding·gap)으로 잡는다 — 아래 '화면 밀도' 블록 참고.
   ============================================================ */
:root { font-size: calc(16px * var(--z)); }





/* ============================================================
   마감일지 = 엑셀 그대로 (2026-08-23)
   8/17 구현본(gas-ui.css)의 색 규칙을 그대로 옮겼다.
   크림색 = 채우는 곳 · 회색 = 자동계산 · 크림+이중선 = 합계
   ============================================================ */
.sheet-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.sheet-toolbar select { width: auto; min-width: 150px; }
.sheet-daynav { display: flex; align-items: center; gap: 6px; }
.sheet-daynav input[type="date"] { width: 158px; }
.sheet-actions { margin-left: auto; display: flex; gap: 8px; }

.sheet-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sheet-flag {
  font-size: 0.6875rem; font-weight: 800; padding: 5px 11px; border-radius: 999px;
  background: #EEF3F9; color: #25476E; border: 1px solid #D6E2EF;
}
.sheet-flag.cream { background: #FFFDF3; color: #8A6212; border-color: #E3C77A; }
.sheet-flag.gray { background: #F2F4F6; color: #5B6672; border-color: #E0E4E9; }
.sheet-flag.ok { background: #E7F3ED; color: #1B7A50; border-color: #C4E4D4; }
.sheet-flag.bad { background: #FBEDEB; color: #B3402F; border-color: #F0CFC9; }

.sheet-wrap {
  border: 1px solid var(--s6); border-radius: 10px; overflow: auto;
  background: #fff; -webkit-overflow-scrolling: touch;
}
.sheet-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.sheet-table th, .sheet-table td {
  border-right: 1px solid #E4EBF1; border-bottom: 1px solid #E4EBF1;
  padding: 6px 9px; text-align: right; white-space: nowrap;
}
.sheet-table thead th {
  background: linear-gradient(180deg, var(--s2), var(--s1));
  color: #fff; font-weight: 800; text-align: center;
  position: sticky; top: 0; z-index: 3;
}
.sheet-rowno {
  background: #F1F5F9 !important; color: var(--muted); font-weight: 800;
  text-align: center !important; width: 42px; min-width: 42px;
  position: sticky; left: 0; z-index: 2;
}
.sheet-table thead .sheet-rowno { z-index: 4; }

.sheet-band td {
  background: var(--s2); color: #fff; font-weight: 800;
  text-align: left; letter-spacing: -.01em;
}
.sheet-head { background: #F5F9FD; font-weight: 800; color: var(--s1); text-align: center; }
.sheet-name { text-align: left; font-weight: 800; color: var(--s1); background: #F9FBFD; }
.sheet-input { background: #FFFDF3; box-shadow: inset 0 0 0 1px #E3C77A; font-weight: 700; }
.sheet-empty { color: #98A2AC; text-align: left; font-weight: 600; }
.sheet-total td { background: #FFF6E8; font-weight: 800; border-top: 2px double var(--s2); }
.sheet-ok { color: #1B7A50; font-weight: 800; }
.sheet-bad { color: #B3402F; font-weight: 800; }
.sheet-table .num { font-variant-numeric: tabular-nums; }

/* 아래쪽 엑셀 시트 탭 */
.sheet-tabbar {
  display: flex; gap: 3px; margin-top: 12px; padding: 0 4px;
  border-top: 2px solid var(--s2); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sheet-tab {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto;
  padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center;
  border-radius: 0 0 9px 9px;
  background: #E8EEF5; color: var(--s2); font-size: 0.75rem; font-weight: 800;
  border: 1px solid var(--s6); border-top: 0;
}
.sheet-tab.active { background: var(--s2); color: #fff; border-color: var(--s2); }
.sheet-tab:hover:not(.active) { background: #DCE6F0; }

@media (max-width: 680px) {
  .sheet-toolbar { flex-direction: column; align-items: stretch; }
  .sheet-actions { margin-left: 0; }
  .sheet-table { font-size: 0.6875rem; }
  .sheet-table th, .sheet-table td { padding: 5px 7px; }
}

/* ============================================================
   백업·복구 화면 정리 (2026-08-23)
   순서대로 1 → 2, 마지막 버튼만 강조. 모양은 전부 같게.
   ============================================================ */

.step-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.step-head h3 { margin: 0 0 2px; font-size: 0.9375rem; }
.step-head .form-help { margin: 0; }
.step-no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--s2); color: #fff; font-weight: 900; font-size: 0.8125rem;
  display: grid; place-items: center;
}

/* 백업 두 갈래 */
.backup-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.backup-kind {
  border: 1px solid var(--line); border-left: 4px solid var(--s4);
  border-radius: 12px; padding: 13px 14px; background: #FBFCFE;
  display: flex; flex-direction: column; gap: 7px;
}
.backup-kind.full { border-left-color: var(--s1); background: #F6F9FC; }
.backup-kind h4 { margin: 0; font-size: 0.875rem; color: var(--s1); }
.backup-kind p { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.backup-kind-note { color: var(--s3) !important; font-weight: 700; }
.backup-kind .quiet, .backup-kind .primary { align-self: flex-start; margin-top: 2px; }

/* 경고 박스 */
.warn-box {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid #F0CFC9; border-left: 4px solid #B3402F;
  background: #FDF6F4; border-radius: 12px; padding: 12px 14px; margin-bottom: 13px;
}
.warn-box strong { font-size: 0.8125rem; color: #B3402F; }
.warn-box span { font-size: 0.75rem; line-height: 1.65; color: #6C4A44; }
.warn-box b { color: #8A2E22; }
.restore-warn { border-left-color: #B8791A; border-color: #EFDCC0; background: #FDFAF3; margin: 12px 0; }
.restore-warn strong { color: #8A5B12; }
.restore-warn span { color: #6B5836; }
.restore-warn b { color: #6B4A08; }

/* 입력칸 번호 */
.field-no {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: #E4EDF6; color: var(--s2);
  font-size: 0.6875rem; font-weight: 900; margin-right: 5px; vertical-align: -2px;
}

/* 마지막 단계 안내 + 버튼 줄 */
.install-final {
  border-top: 1px solid var(--line); margin-top: 13px; padding-top: 13px;
}
.install-final-text {
  font-size: 0.75rem; line-height: 1.7; color: var(--muted); margin-bottom: 11px;
}
.install-final-text strong { color: var(--text); }
.install-final-text code {
  background: #F1F5F9; border-radius: 5px; padding: 1px 6px;
  font-size: 0.75rem; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 버튼 모양을 같게 — 마지막 것만 색으로 강조 */
.install-final .button-row .quiet,
.install-final .button-row .primary,
.step-block .button-row .quiet,
.step-block .button-row .primary {
  min-height: 42px; padding: 10px 18px; border-radius: 11px;
  font-size: 0.8125rem; font-weight: 800;
}

/* 복구 — 자동 인식 결과 */
.restore-kind {
  border: 1px solid var(--line); border-left: 4px solid var(--s4);
  background: #F7FAFD; border-radius: 12px; padding: 12px 14px; margin: 11px 0;
}
.restore-kind.full { border-left-color: var(--s1); }
.restore-kind.data { border-left-color: var(--s4); }
.restore-kind.server { border-left-color: #B8791A; background: #FDFAF3; }
.restore-kind.bad { border-left-color: #B3402F; background: #FDF6F4; }
.restore-kind-tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 800; color: #fff;
  background: var(--s3); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px;
}
.restore-kind.server .restore-kind-tag { background: #B8791A; }
.restore-kind.bad .restore-kind-tag { background: #B3402F; }
.restore-kind strong { display: block; font-size: 0.9375rem; color: var(--s1); }
.restore-kind p { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.restore-kind small { display: block; margin-top: 6px; font-size: 0.6875rem; color: var(--muted); }

@media (max-width: 680px) {
  .backup-choice { grid-template-columns: 1fr; }
  .install-final .button-row { flex-direction: column; }
  .install-final .button-row button { width: 100%; }
}

/* ============================================================
   어디서든 바로 올리기 (2026-08-24 위치 정리)

   · PC  — 왼쪽 메뉴 "맨 아래"에 붙인다. 손이 제일 자주 가는 자리.
   · 폰  — 화면 맨 바닥에 붙인다. 그 아래에는 아무것도 두지 않는다.
           대신 메뉴를 위로 올려서, 자주 쓰는 올리기가 엄지 자리를 차지한다.
   ============================================================ */
.quick-upload { display: none; }

@media (min-width: 960px) {
  .quick-upload {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: auto;                 /* 메뉴가 짧아도 항상 맨 아래 */
    padding: 12px 2px 2px;
    border-top: 1px solid #ffffff1f;
  }
  .quick-btn {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 11px; border-radius: 11px; min-height: 48px;
    background: #ffffff12; border: 1px solid #ffffff1f; color: var(--sidebar-ink);
  }
  .quick-btn:hover { background: #ffffff1f; border-color: #ffffff33; }
  .quick-btn.camera { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .quick-btn.camera:hover { filter: brightness(1.05); }
  .quick-btn .quick-icon { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
  .quick-btn span > strong { display: block; font-size: 0.8125rem; font-weight: 800; }
  .quick-btn span > small { display: block; font-size: 0.6875rem; opacity: .8; margin-top: 1px; }
  .quick-btn.camera span > small { opacity: .7; }
}

/* 폰 — 화면 맨 바닥. 아래에 아무것도 없다. */
.quick-upload-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40; display: flex; gap: 7px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 26px #1d293914;
}
.quick-bar-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  flex: 1; min-height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 800;
  background: #EEF3F9; color: var(--s2); border: 1px solid #D6E2EF;
}
.quick-bar-btn.camera { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* PC 에서는 이 줄을 쓰지 않는다 (왼쪽 메뉴 아래에 있으므로) */
@media (min-width: 960px) { .quick-upload-bar { display: none; } }

/* ============================================================
   폰 메뉴 — 2단 가로 (2026-08-24)

   원래 화면 아래에 있던 메뉴를 위로 올린 것이다.
   1단을 누르면 하위가 바로 밑 2단 칸에 "옆으로" 늘어선다.
   아래로 펼쳐지는 판이 아니다 — 화면을 가리지 않는다.

   화면 아래는 사진·파일 올리기가 통째로 쓴다.
   엄지가 닿는 자리는 제일 자주 하는 일이 가져가는 것이 맞다.
   ============================================================ */
.phone-nav { display: none; }

@media (max-width: 959px) {
  .bottom-nav { display: none !important; }
  .sidebar-nav { display: none !important; }

  .phone-nav {
    display: block;
    position: sticky; top: 67px; z-index: 28;
    background: var(--sidebar-bg);
    box-shadow: 0 4px 14px #0f294226;
  }
  .phone-nav-row {
    display: flex; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px 8px;
  }
  .phone-nav-row::-webkit-scrollbar { display: none; }
  .phone-nav-row.sub {
    background: #ffffff14;
    border-top: 1px solid #ffffff1f;
    padding: 4px 8px;
  }
  
  
  
  

  /* 본문 아래 여백 — 맨 밑 올리기 줄 자리만큼만 */
  main { padding-bottom: 84px; }
}

/* ============================================================
   폰 올리기 — 화면 맨 바닥에 딱 붙는 직사각형 두 칸
   틈 없이 반반. 그 아래에는 아무것도 없다.
   ============================================================ */
.quick-upload-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40; display: flex; gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px #1d293914;
}
.quick-bar-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  flex: 1 1 50%; min-height: 58px; border-radius: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.875rem; font-weight: 800;
}
.quick-bar-btn.camera { background: var(--accent); color: var(--accent-ink); }
.quick-bar-btn.file { background: var(--s2); color: #fff; }
@media (min-width: 960px) { .quick-upload-bar { display: none; } }


/* ════════════════════════════════════════════════════════════
   화면 밀도 최적화 (2026-08-24)
   ------------------------------------------------------------
   [왜] 한 화면에 들어가는 정보가 너무 적었다. 원인은 글자가 아니라
   여백이었다 — 카드마다 17px 안쪽 여백 + 12px 사이 간격 + 28px 화면
   가장자리 여백이 겹쳐서, 실제 내용이 쓰는 자리가 절반도 안 됐다.

   [방식] 글자 크기는 거의 그대로 두고(읽기 힘들어지면 안 되니까)
   여백·모서리·간격만 한 단계씩 줄였다. 대신 줄인 만큼 열을 늘려서
   같은 화면에 카드가 더 들어가게 했다.

   [지킨 것] 폰에서 손가락으로 누르는 것(버튼·입력칸)은 44px 아래로
   절대 안 내려가게 막아뒀다. 빽빽하게 만든다고 못 누르면 소용없다.

   [순서] 이 블록은 파일 맨 끝이라 앞의 규칙을 덮어쓴다. 밀도를 다시
   조절할 일이 생기면 앞을 뒤지지 말고 여기만 고치면 된다.
   ════════════════════════════════════════════════════════════ */

/* ── 모서리 둥글기: 22·17·16·15·13·9 로 제각각이던 것을 4단계로 통일 ── */
.form-card            { border-radius: 14px; }
.form-card.compact    { border-radius: 12px; padding: 13px 14px; }
.station-card,
.metric,
.kpi                  { border-radius: 12px; }

/* ── 화면 가장자리 여백 ── */
#mainContent { padding: 14px 14px 84px; }

/* ── 제목 줄: 25px + 아래여백이 화면 위쪽을 너무 많이 먹고 있었다 ── */
.page-title            { gap: 10px; align-items: center; }
.page-title h1         { font-size: 1.25rem; margin: 0 0 2px; }
.page-title p          { font-size: 0.8125rem; margin: 0; }

/* ── 요약 숫자 카드(KPI) ── */
.metric-grid  { gap: 8px; margin: 8px 0 12px; }
.metric       { padding: 11px 12px; }
.metric span  { font-size: 0.75rem; }
.metric strong{ font-size: 1.375rem; margin-top: 3px; }
.kpi-row      { gap: 8px; margin: 8px 0 12px; }
.kpi          { padding: 10px 11px; gap: 4px; }


/* ── 주유소·목록 카드 ── */
.card-list    { gap: 8px; }
.station-card { padding: 12px 13px; gap: 7px; }
.station-card.compact-row { padding: 7px 10px; }

/* ── 입력 폼: 2열 사이 간격만 있고 위아래가 붕 떠 있었다 ── */
.form-grid    { gap: 0 12px; }
.toolbar      { gap: 8px; margin-bottom: 9px; }

/* ── 폰: 손가락 크기 확보 (밀도보다 우선) ── */
@media (max-width: 959px) {
  button,
  .btn,
  select,
  input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  /* 카드 안에 촘촘히 들어가는 작은 버튼까지 44px 로 키우면 카드가 터진다 */
  .station-card button.quiet,
  .badge,
  .chip,
  .zoom-option { min-height: 0; }
}

/* ── PC: 남는 가로폭을 열 수로 바꾼다 (여기가 정보량이 가장 많이 는다) ── */
@media (min-width: 960px) {
  #mainContent  { margin-left: 240px; padding: 18px 22px 48px; max-width: none; }
  .metric-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-list    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .kpi-row      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-title h1{ font-size: 1.375rem; }
}
@media (min-width: 1440px) {
  #mainContent  { padding: 20px 28px 48px; }
  .metric-grid  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-list    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .kpi-row      { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════
   달력·상단바 밀도 수정 (2026-08-24) — 실제로 띄워서 재보고 고친 것
   ------------------------------------------------------------
   [폰에서 발견한 진짜 버그]
   .calendar-summary 에 flex:1 1 380px 이 걸려 있었다. PC 에서는 가로로
   놓이니 "가로 380px" 이라 문제가 없었는데, 폰에서는 .calendar-topbar 가
   flex-direction:column 으로 바뀐다. 그러면 380px 이 '세로'가 되면서
   숫자 4개짜리 요약칸이 380px 짜리 빈 상자로 부풀었다.
   달력을 보려면 그 빈 상자를 지나 한참 내려야 했다.
   → 폰에서는 내용만큼만 차지하게 flex:0 0 auto 로 바꾼다. (약 270px 절약)

   [PC 달력 칸]
   빈 칸 하나가 124px 였다. 6줄이면 779px — 900px 짜리 화면에서 한 달이
   한눈에 안 들어오고 스크롤을 해야 했다. 84px 로 줄이면 그대로 다 들어온다.
   (날짜 + 뱃지 2~3개는 84px 안에서 충분히 보인다)
   ════════════════════════════════════════════════════════════ */

/* 폰: 요약칸이 세로로 부풀지 않게 (가장 큰 낭비였다) */
@media (max-width: 680px) {
  .calendar-summary { flex: 0 0 auto; }
  .cal-kpi { padding: 7px 10px; }
  /* '오늘' 이 세로로 쪼개져 보이던 것 — 글자를 안 자르게 한다 */
  .calendar-move .quiet { white-space: nowrap; min-width: 52px; }
}

/* 폰 상단바: 제목이 두 줄로 깨지고 버튼이 너무 컸다 */
@media (max-width: 680px) {
  .topbar { padding: 7px 10px; }
  .topbar-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-actions button { padding: 0 8px; min-height: 32px; font-size: 0.75rem; }
   /* 폰은 브라우저 자체 확대를 쓰는 게 편하다 */
}

/* 달력 칸 높이 — 한 달이 한 화면에 들어오도록 */
@media (min-width: 960px) {
  .calendar-grid > div,
  .calendar-day { min-height: 84px; padding: 10px 8px 7px; }
  .calendar-grid { gap: 6px; }
}
@media (max-width: 680px) {
  .calendar-grid > div,
  .calendar-day { min-height: 62px; padding: 9px 4px 4px; gap: 2px; }
  .calendar-grid { gap: 4px; }
}

/* 폰: flex:0 0 auto 로 바꾸면 너비를 '내용만큼'으로 잡아서 화면 밖으로
   삐져나간다(오른쪽 카드가 잘려 보였다). 세로만 줄이고 가로는 꽉 채운다. */
@media (max-width: 680px) {
  .calendar-summary,
  .calendar-move { width: 100%; box-sizing: border-box; }
  .calendar-move input[type="month"] { min-width: 0; }
}

/* 아주 좁은 폰(360px)에서 달 이동줄이 20px 정도 삐져나갔다.
   화살표 버튼만 좁히면 들어온다 — 손가락 높이(44px)는 그대로 지킨다. */
@media (max-width: 400px) {
  .calendar-move { gap: 4px; }
  .calendar-move .quiet { min-width: 40px; padding: 8px 6px; }
  .calendar-move #calendarToday { min-width: 46px; }
}

/* 360px 폰에서 상단 버튼 5개가 한 줄에 안 들어가 '로그아웃'이 잘렸다.
   줄바꿈을 허용해 잘리지 않게 한다 — 잘려서 못 누르는 것보다 낫다. */
@media (max-width: 400px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .top-actions button { padding: 0 7px; }
}

/* ════════════════════════════════════════════════════════════
   엑셀식 각진 모양 (2026-08-24)
   ------------------------------------------------------------
   [요청] 메뉴판은 그대로 두고, 달력·카드 같은 것들이 둥글어 보이니
   엑셀처럼 평평한 네모로 만들어 달라.

   [방식] 모서리 둥글기만 없앤다. 색·여백·글자는 그대로다.
   표(엑셀)는 칸이 각져야 줄이 맞아 보이고, 칸 경계도 또렷해진다.

   [남겨둔 것]
     · 메뉴판(사이드바) — 지금 모양이 괜찮다고 하셔서 그대로 둔다
     · 동그란 뱃지·알림 숫자·글자크기 스위치 — 원래 동그란 것이
       정보(개수·상태)를 나타내는 표시라 네모로 만들면 뜻이 흐려진다
   ════════════════════════════════════════════════════════════ */
.calendar-grid > div,
.calendar-day,
.station-card,
.metric,
.kpi,
.cal-kpi,
.form-card,
.form-card.compact,
.card-list > article,
.empty-card,
.trend-panel,
.overview-panel,
.step-block,
.document-viewer,
.recognition-dialog,
.password-dialog,
.search-dialog,
table, thead, tbody, tr, th, td,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.toolbar > *,
.tab-button,
.btn,
button.primary,
button.quiet,
.station-card-bar,
.station-card-bar i,
.day-flag {
  border-radius: 0 !important;
}

/* 표처럼 보이도록 칸 경계를 또렷하게 (엑셀 느낌의 핵심) */
.calendar-grid { gap: 0; border: 1px solid var(--line); background: var(--line); }
.calendar-grid > div,
.calendar-day { border: none; outline: 1px solid var(--line); outline-offset: 0; }
.calendar-weekdays { gap: 0; }
.calendar-weekday {
  border: 1px solid var(--line); border-bottom: none;
  background: var(--sunken, #eef2f7);
}

/* 카드가 붙어 보이지 않게 최소한의 간격은 남긴다 */
.card-list { gap: 6px; }
.metric-grid, .kpi-row { gap: 6px; }

/* 달력·카드 안의 이름표(뱃지)도 각지게 — 칸은 네모인데 안이 둥글면 따로 논다.
   단, '개수·상태를 나타내는 동그라미' 는 그대로 둔다:
   알림 숫자, 유종 범례 점, 오늘 날짜 표시, 비율 게이지 */
.badge,
.chip,
.qty-switch,
.qty-switch button,
.problem-chips span,
.zoom-switch,
.zoom-option,
.day-sales {
  border-radius: 0 !important;
}
/* revert 는 '브라우저 기본값(0)' 으로 되돌리는 것이라 오히려 각져버린다.
   동그래야 하는 것은 값을 직접 적어 준다. */
.notification-count,
.nav-badge,
.day-head strong { border-radius: 999px !important; }

.legend-dot,
.sw,
.metric-gauge,
.metric-gauge span { border-radius: 50% !important; }

/* 메뉴판은 지금 모양이 좋다고 하셔서 손대지 않는다 */
.sidebar-nav button[data-nav],
.sidebar-nav .nav-child,
.sidebar-nav .nav-group-head { border-radius: 8px !important; }
.sidebar-brand-mark { border-radius: 9px !important; }
.quick-btn { border-radius: 10px !important; }

/* 마감일지 기준 분석 — 매입처·유종을 나란히 (2026-08-24) */
.analysis-columns { display: grid; gap: 10px; margin-bottom: 10px; }
/* 두 표를 나란히 놓으려면 한 칸이 충분히 넓어야 한다.
   1100px 에서 나눴더니 한 칸이 450px 밖에 안 돼 표가 가로로 잘렸다.
   1400px 부터 나눈다 — 그 아래에서는 위아래로 쌓는 게 읽기 낫다. */
@media (min-width: 1400px) { .analysis-columns { grid-template-columns: 1fr 1fr; } }

/* 분석 표는 칸 수가 적다. 공용 표의 min-width:720px 를 그대로 쓰면
   좁은 칸에서 가로 스크롤이 생겨 숫자를 못 본다. 폭에 맞춰 넣는다. */
.analysis-columns .data-table { min-width: 0; }
.analysis-columns .data-table th,
.analysis-columns .data-table td { padding: 9px 8px; }
/* 유종 상세(맨 뒷칸)만 줄바꿈을 허용해 표가 넘치지 않게 한다 */
.analysis-columns .data-table td:last-child { white-space: normal; line-height: 1.35; }
.total-row td { border-top: 2px solid var(--line); background: var(--sunken, #eef2f7); }
.analysis-columns .panel { min-width: 0; }
.bar-cell { display: flex; align-items: center; gap: 7px; }
.bar-track { flex: 1 1 auto; height: 7px; background: var(--line); min-width: 40px; }
.bar-fill { display: block; height: 100%; background: var(--blue); }
.bar-fill.g1 { background: var(--fuel-hi); }
.bar-fill.g2 { background: var(--fuel-reg); }
.bar-fill.g3 { background: var(--fuel-die); }
.bar-fill.g4 { background: var(--fuel-urea); }

/* 표·패널도 각지게 (2026-08-24) — 엑셀식 통일에서 빠져 있었다 */
.panel, .table-scroll, .data-table,
.data-table th, .data-table td,
.bar-track, .bar-fill { border-radius: 0 !important; }

/* ════════════════════════════════════════════════════════════
   일자별 판매 추이 (2026-08-24)
   하루를 막대 하나로, 유종을 위아래로 쌓는다. 총량과 유종 비중을
   한 번에 본다. 색만으로 구분시키지 않는다 — 범례에 이름을 같이 적고
   막대에 올리면 이름·수량이 뜬다(이 프로젝트의 기존 원칙 그대로).
   모서리는 각지게 둔다 — 엑셀식 화면에 맞춘다.
   ════════════════════════════════════════════════════════════ */
.daily-chart-box { padding: 12px 13px 10px; }
.daily-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 132px; margin: 10px 0 0;
  border-bottom: 1px solid var(--line);
}
.daily-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px;                       /* 쌓인 칸 사이 2px 틈 — 경계가 또렷해진다 */
  cursor: default; position: relative;
}
.daily-col:hover { background: #1d41660d; }
.daily-seg { display: block; width: 100%; min-height: 2px; }
.daily-seg.f1 { background: var(--fuel-hi); }
.daily-seg.f2 { background: var(--fuel-reg); }
.daily-seg.f3 { background: var(--fuel-die); }
.daily-seg.f4 { background: var(--fuel-urea); }
.daily-col.empty::after {
  content: ""; display: block; height: 2px; background: var(--line);
}
.daily-axis {
  display: flex; gap: 2px; margin-top: 5px;
  font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.daily-axis span { flex: 1 1 0; min-width: 0; text-align: center; }
.daily-axis span.hide { visibility: hidden; }
.daily-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: 0.75rem; }
.daily-legend b { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text); }
.daily-legend i { width: 10px; height: 10px; display: inline-block; }
.daily-legend i.f1 { background: var(--fuel-hi); }
.daily-legend i.f2 { background: var(--fuel-reg); }
.daily-legend i.f3 { background: var(--fuel-die); }
.daily-legend i.f4 { background: var(--fuel-urea); }
.daily-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--navy, #12283F); color: #fff; padding: 7px 10px;
  font-size: 0.75rem; line-height: 1.5; white-space: nowrap; z-index: 5;
  display: none; pointer-events: none; box-shadow: 0 4px 14px #0b1c2e33;
}
.daily-col:hover .daily-tip, .daily-col:focus-within .daily-tip { display: block; }
.daily-tip em { font-style: normal; color: #cfe0f0; }

/* 늘고 줆 — 색만으로 알리지 않고 ▲▼ 기호를 같이 쓴다 (2026-08-24) */
.data-table .up   { color: var(--state-ok,  #1B7A50); font-weight: 700; }
.data-table .down { color: var(--state-bad, #B3402F); font-weight: 700; }
.muted-text { color: var(--muted); }

/* 주유소별 매입자료 · 최종마진 (2026-08-24 개편) */
.cost-calc { padding: 12px 13px 10px; }
.cost-inputs { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0 0; }
.margin-card { padding: 10px 11px 8px; }
.margin-card h3 { margin: 0; font-size: 0.95rem; }
.margin-card .data-table { min-width: 0; }
.margin-card .price-cell { padding: 3px 6px; }
/* 유종 색 표시는 작은 네모 하나다 — 폭을 안 주면 칸 전체로 늘어난다 */
.margin-card .daily-seg { width: 9px; height: 9px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.price-input {
  width: 100%; max-width: 110px; min-height: 34px; text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line);
  background: var(--input-bg, #fff); color: var(--text); padding: 4px 7px;
}
.price-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.save-state { margin: 5px 0 0; font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.save-state.bad { color: var(--state-bad, #B3402F); font-weight: 700; }

.scroll-hint { display: none; margin: 4px 0 0; font-size: 0.72rem; color: var(--muted); }

/* 폰에서는 표가 옆으로 밀린다. 유종 칸을 붙여 두어야
   밀면서도 지금 어느 유종을 보고 있는지 안 놓친다. */
@media (max-width: 760px) {
  .margin-card .data-table th:first-child,
  .margin-card .data-table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--panel, #fff); box-shadow: 1px 0 0 var(--line);
  }
  .margin-card .data-table tbody tr:nth-child(even) td:first-child { background: var(--row-alt, #F7F8FA); }
  .margin-card .data-table .total-row td:first-child { background: #EEF0F4; }
  .scroll-hint { display: block; }
}
.badge.warn { background: #FBF3E4; color: #B8791A; }

/* 제목줄 오른쪽 배지가 좁아져 글자가 세로로 쪼개지던 것 (2026-08-24) */
.station-head > .badge { white-space: nowrap; flex: 0 0 auto; align-self: flex-start; }


/* ROLE_ALERT_UI_V1 — 역할별 메뉴 · 실제 업무센터 · 필수알림/업무지시 */
.role-menu-root { display: grid; gap: 10px; margin: 8px 0 14px; }






.work-center-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.work-stat { border: 1px solid var(--line); background: var(--panel); border-radius: 0; padding: 13px; }
.work-stat span,.work-stat small { display: block; color: var(--muted); font-size: .75rem; }
.work-stat strong { display: block; font-size: 1.65rem; margin: 4px 0; }


.work-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 16px; }
.work-shortcut { min-height: 48px; border: 1px solid var(--line); background: var(--panel); border-radius: 0; font-weight: 800; }
.work-comms { border: 1px solid var(--line); background: var(--panel); }
.work-comms > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); font-size: .8rem; }
.work-comms > div:last-child { border-bottom: 0; }

/* 알림 우선순위 색: 중요=빨강, 일반=파랑 (2026-08-30 · 사장님 요청으로 확실히 구분) */
.priority-high,.priority-urgent { border-left: 4px solid #d92d20 !important; }
.priority-normal { border-left: 4px solid #1570ef !important; }
.priority-low { border-left: 4px solid #98a2b3 !important; }
.prio-chip{display:inline-block;font-size:.62rem;font-weight:900;padding:1px 7px;border-radius:999px;white-space:nowrap}
.prio-chip.imp{background:#fdecea;color:#b42318}
.prio-chip.gen{background:#e8f0fe;color:#1355c4}
.notification-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.notification-filter { min-height: 34px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 6px 10px; font-weight: 700; }
.notification-filter.active { background: #155eef; color: #fff; border-color: #155eef; }
.notification-meta,.message-meta-line { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.message-type.task { background: #fff1d6; color: #935f00; }
.message-type.report { background: #e8f3ff; color: #155eef; }
.message-type.notice { background: #ecfdf3; color: #067647; }
.message-due { color: #b42318; font-weight: 800; }
.message-ack { margin-top: 8px; }
.ack-done { display: inline-block; margin-top: 8px; color: #067647; font-size: .75rem; font-weight: 800; }
.ok-card { border-left: 4px solid #12b76a; }
@media (max-width: 900px) {
  .work-center-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  
  .work-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 역할별 실제 업무센터 · 필수알림 */
.work-push-required{margin:0 0 12px;border:1px solid #9ec1f4;border-left:4px solid #1768e8;background:#eef5ff;padding:11px 12px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.work-push-required strong{display:block;color:#123d68;margin-bottom:2px}.work-push-required span{display:block;font-size:.86rem;color:#52677d}.work-push-required.problem{border-color:#e7adad;border-left-color:#b42318;background:#fff2f1}.work-push-required.problem strong{color:#9b1c16}
@media(max-width:720px){.work-push-required{align-items:stretch;flex-direction:column}.work-push-required button{width:100%}}


/* ROLE_DASHBOARD_V2 — 대표·소장 중심 한눈 대시보드 (실제 API 자료만 사용) */
.role-dashboard{max-width:1500px;margin:0 auto}
.role-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.role-dashboard-head h1{margin:2px 0 3px;font-size:1.65rem;letter-spacing:-.035em}
.role-dashboard-head p{margin:0;color:var(--muted);font-size:.84rem}
.role-dashboard-eyebrow,.role-panel-kicker{display:block;color:#1768e8;font-size:.7rem;font-weight:900;letter-spacing:.04em}
.role-dashboard-actions{display:flex;align-items:center;gap:8px}.role-dashboard-asof{color:var(--muted);font-size:.72rem;white-space:nowrap}
.role-dashboard-kpis{gap:8px;margin-bottom:9px}.role-dashboard-kpis .work-stat{padding:10px 12px;min-height:83px;background:#fff}.role-dashboard-kpis .work-stat strong{font-size:1.48rem;line-height:1.15}.role-dashboard-kpis .work-stat.has-value{border-top:3px solid #eda100}
.role-business-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);margin-bottom:9px}
.role-business-strip article{min-width:0;background:#fff;padding:10px 12px}.role-business-strip span,.role-business-strip small{display:block;color:var(--muted);font-size:.7rem}.role-business-strip strong{display:block;margin:3px 0;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);gap:9px;align-items:start}
.role-dashboard-panel{background:#fff;border:1px solid var(--line);border-radius:0;padding:11px}.role-dashboard-primary{min-height:320px}.role-dashboard-side{display:grid;gap:9px}
.role-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.role-panel-head h2{margin:1px 0 0;font-size:.96rem}.text-link{border:0;background:transparent;color:#1768e8;font-size:.72rem;font-weight:850;padding:4px;white-space:nowrap}
.role-station-board{display:grid;gap:5px}
.role-alert-list{display:grid;gap:4px}.role-alert-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:start;border:0;border-bottom:1px solid #edf0f4;background:transparent;text-align:left;padding:7px 2px}.role-alert-dot{width:7px;height:7px;border-radius:50%;background:#f0a000;margin-top:4px}.role-alert-row.priority-high .role-alert-dot,.role-alert-row.priority-urgent .role-alert-dot{background:#d92d20}.role-alert-copy{min-width:0}.role-alert-copy strong,.role-alert-copy small{display:block}.role-alert-copy strong{font-size:.76rem}.role-alert-copy small{margin-top:2px;color:var(--muted);font-size:.66rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.role-alert-time{font-size:.61rem;color:#98a2b3;white-space:nowrap}.role-more-alerts{width:100%;border:0;background:#f7f9fc;color:#1768e8;font-size:.68rem;font-weight:850;padding:7px}
.role-comms{border:0}.role-comms button{width:100%;display:flex;justify-content:space-between;gap:9px;border:0;border-bottom:1px solid #edf0f4;background:#fff;padding:8px 2px;text-align:left;font-size:.74rem}.role-comms button:last-child{border-bottom:0}.role-comms button span{font-weight:900;color:#1768e8}.role-quick-panel{margin-top:9px}.role-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.role-shortcuts .work-shortcut{min-height:52px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;text-align:left}.role-shortcuts .work-shortcut strong{font-size:.76rem}.role-shortcuts .work-shortcut span{font-size:.65rem;color:#1768e8}
@media(max-width:1100px){.role-dashboard-grid{grid-template-columns:1fr}.role-dashboard-side{grid-template-columns:1fr 1fr}.role-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.role-dashboard-head{align-items:flex-start;flex-direction:column}.role-dashboard-actions{width:100%;justify-content:space-between}.role-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.role-business-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.role-dashboard-side{grid-template-columns:1fr}.role-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.role-dashboard-panel{padding:9px}}

/* 실제 운영 보고센터 + 홈 미니달력 (v1.0.5) */
.work-calendar-panel{margin-top:12px}.work-mini-calendar{padding:12px}.mini-calendar-head{display:flex;align-items:end;gap:12px;margin-bottom:8px}.mini-calendar-head strong{font-size:16px}.mini-calendar-head span{font-size:11px;color:var(--muted,#667085)}.mini-calendar-week,.mini-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.mini-calendar-week span{text-align:center;font-size:10px;color:#718096;padding:3px}.mini-calendar-day{position:relative;min-height:42px;border:1px solid #e1e7ef;background:#fff;border-radius:4px;padding:5px;text-align:left;color:#27364a}.mini-calendar-day:hover{background:#f5f8fc}.mini-calendar-day.today{box-shadow:inset 0 0 0 2px #1768e8}.mini-calendar-day.has-work{background:#f7faff}.mini-calendar-day i{position:absolute;right:4px;bottom:4px;min-width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#1768e8;color:#fff;font-size:9px;font-style:normal}.mini-calendar-day.pad{visibility:hidden}

.operation-status-strip{margin-bottom:10px}.operation-actual-summary{padding:10px;border:1px solid #dde5ee;background:#f8fbff;margin:10px 0}.operation-checks{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.operation-checks span{font-size:11px;padding:5px 7px;border:1px solid #dce4ed;background:#fff}.operation-checks .done{color:#087443;border-color:#b8dbc9;background:#f0fbf5}.operation-checks .missing{color:#a33a2c;border-color:#efc7c0;background:#fff6f4}
.operation-layout{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(520px,1.2fr);gap:12px;align-items:start}.operation-submit-card{margin:0}.operation-file-label,.wide-note{display:grid;gap:6px;font-weight:800;margin:10px 0}.operation-file-label input{min-height:44px;border:1px dashed #bfcbd9;padding:9px;background:#fbfdff}.operation-file-label span{font-size:11px;font-weight:500;color:#667589}.wide-note textarea{min-height:86px;border:1px solid #d8e1ec;padding:9px;resize:vertical}.competitor-price-grid{display:grid;gap:5px;margin:8px 0 10px}.competitor-price-row{display:grid;grid-template-columns:25px minmax(130px,1fr) 90px 90px;gap:5px;align-items:center}.competitor-price-row span{text-align:center;font-size:11px;color:#64748b}.competitor-price-row input{min-height:38px;border:1px solid #d8e1ec;padding:6px 7px}.operation-report-list{display:grid;gap:5px;margin-top:10px}.operation-report-row{width:100%;display:grid;grid-template-columns:110px minmax(0,1fr) 78px 76px;gap:8px;align-items:center;text-align:left;border:1px solid #dce4ed;background:#fff;padding:9px 10px;border-radius:5px}.operation-report-row:hover{background:#f7faff}.operation-report-kind{font-weight:900;font-size:11px}.operation-report-row strong{display:block;font-size:12px}.operation-report-row small{display:block;color:#6f7f92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.operation-report-status{font-size:10px;font-weight:900;padding:4px 6px;text-align:center;background:#fff6df;color:#93610d}.operation-report-status.paid{background:#edf4ff;color:#145cc5}.operation-report-attach{font-size:10px;color:#68798c}.operation-detail{margin-top:12px;padding:12px}.operation-detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.operation-detail-grid p{line-height:1.6}.operation-docs{display:grid;gap:5px;margin:7px 0}.operation-price-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:6px 0}.operation-price-summary span{padding:6px;border:1px solid #e2e8ef;background:#fbfdff;font-size:10px}
@media(max-width:900px){.operation-layout,.operation-detail-grid{grid-template-columns:1fr}.operation-report-row{grid-template-columns:96px minmax(0,1fr) 68px}.operation-report-attach{display:none}.competitor-price-row{grid-template-columns:22px minmax(105px,1fr) 78px 78px}.mini-calendar-day{min-height:38px}.operation-price-summary{grid-template-columns:1fr}}



/* ============================================================
   PC / PHONE UI SPLIT v1.0.8
   원칙: 데이터/API는 공유하지만 화면 구조·메뉴·정보밀도는 공유하지 않는다.
   PC = 관리/분석/표 중심, PHONE = 오늘업무/사진/보고/알림 중심.
   ============================================================ */
.mobile-workcenter,.mobile-logout-label{display:none}
@media (min-width:960px){
  .desktop-workcenter{display:block}
  .mobile-workcenter{display:none!important}
  .role-dashboard{max-width:1680px}
  main{margin-left:240px;padding:16px 18px 48px}
  .topbar{margin-left:240px;padding-left:18px;padding-right:18px}
  .role-dashboard-grid{grid-template-columns:minmax(0,1.85fr) minmax(300px,.72fr)}
  
  .role-dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .role-business-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:959px){
  :root{font-size:16px}
  .desktop-workcenter{display:none!important}
  .mobile-workcenter{display:block}
  .desktop-top-action,.desktop-logout-label,.topbar .zoom-switch{display:none!important}
  .mobile-logout-label{display:inline}
  .topbar{height:56px;padding:7px 10px;border-bottom:0;background:var(--sidebar-bg);color:#fff}
  .topbar-left{max-width:52%}.topbar-title>strong{font-size:.92rem;color:#fff}.topbar small{font-size:.7rem;color:#b9c9d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .top-actions{gap:5px}.topbar .top-actions .quiet{min-height:40px;padding:7px 10px;border-radius:8px;background:#ffffff12;color:#fff;font-size:.76rem}
  #notificationButton{background:var(--accent)!important;color:var(--accent-ink)!important;font-weight:900}
  .phone-nav{top:56px;background:#102f50}
  .phone-nav-row{padding:5px 7px}.phone-nav-row.sub{padding:4px 7px;background:#0b2540}
  
  main{margin-left:0;padding:10px 10px 72px;background:#f2f5f8}
  .page-title{gap:8px}.page-title h1{font-size:1.22rem}.page-title p{font-size:.76rem}
  .form-card,.overview-panel,.trend-panel{border-radius:8px;padding:12px;margin-bottom:9px}
  .form-grid{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr}
  .data-table,.analysis-columns .data-table{font-size:.75rem}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .quick-upload-bar{z-index:55}

  /* 모바일 첫 화면은 PC 대시보드 축소판이 아니다. */
  .role-dashboard{max-width:none;margin:0}
  .mobile-home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:5px 2px 10px}
  .mobile-home-role{display:block;color:#1768e8;font-size:.7rem;font-weight:950;letter-spacing:.04em}
  .mobile-home-head h1{margin:2px 0 3px;font-size:1.35rem;letter-spacing:-.035em}.mobile-home-head p{margin:0;color:#68788b;font-size:.76rem;line-height:1.4}
  .mobile-notify-button{flex:0 0 auto;min-height:42px;border:0;border-radius:8px;background:#102f50;color:#fff;padding:8px 10px;font-size:.74rem;font-weight:900}.mobile-notify-button span{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#d92d20;color:#fff;margin-left:4px}
  .mobile-home-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px}
  .mobile-stat{min-width:0;background:#fff;border:1px solid #dce4ed;border-top:3px solid #8da0b5;padding:8px 7px}.mobile-stat.has{border-top-color:#e79a00}.mobile-stat span{display:block;color:#6e7d90;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-stat strong{display:block;margin-top:3px;font-size:1.15rem;line-height:1.15}
  .mobile-home-card{background:#fff;border:1px solid #dce4ed;border-radius:8px;padding:10px;margin-bottom:8px}
  .mobile-priority-card{border-left:4px solid #1768e8}
  .mobile-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.mobile-card-head span{display:block;color:#1768e8;font-size:.62rem;font-weight:900}.mobile-card-head h2{margin:1px 0 0;font-size:.92rem}.mobile-card-head button{min-height:34px;border:0;border-radius:6px;background:#eef3f8;color:#38506a;padding:6px 9px;font-size:.68rem;font-weight:850}
  .mobile-priority-list,.mobile-alert-list{display:grid;gap:5px}
  .mobile-priority-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #e0e7ef;border-left:4px solid #1a7f50;background:#fff;padding:9px;text-align:left}.mobile-priority-row.needs{border-left-color:#d92d20;background:#fffcfb}.mobile-priority-row span{min-width:0}.mobile-priority-row strong,.mobile-priority-row small{display:block}.mobile-priority-row strong{font-size:.8rem}.mobile-priority-row small{margin-top:2px;color:#6f7f92;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-priority-row>b{flex:0 0 auto;font-size:.68rem;color:#1768e8}
  .mobile-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mobile-action-grid button{min-height:56px;border:1px solid #dce4ed;border-radius:7px;background:#f8fbff;padding:8px;text-align:left}.mobile-action-grid strong,.mobile-action-grid span{display:block}.mobile-action-grid strong{font-size:.76rem}.mobile-action-grid span{margin-top:3px;color:#1768e8;font-size:.62rem;font-weight:800}
  .mobile-alert-list button{display:grid;grid-template-columns:8px minmax(0,1fr);gap:7px;border:0;border-bottom:1px solid #edf1f5;background:#fff;padding:7px 2px;text-align:left}.mobile-alert-list i{width:7px;height:7px;border-radius:50%;background:#e79a00;margin-top:4px}.mobile-alert-list i.priority-high,.mobile-alert-list i.priority-urgent{background:#d92d20}.mobile-alert-list strong,.mobile-alert-list small{display:block}.mobile-alert-list strong{font-size:.75rem}.mobile-alert-list small{margin-top:2px;color:#6f7f92;font-size:.66rem;line-height:1.35}
  .mobile-connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mobile-connect-grid button{min-height:50px;border:1px solid #dce4ed;border-radius:7px;background:#fbfdff;padding:8px;text-align:left}.mobile-connect-grid button:last-child{grid-column:1/-1}.mobile-connect-grid span,.mobile-connect-grid strong{display:block}.mobile-connect-grid span{font-size:.67rem;color:#657589}.mobile-connect-grid strong{margin-top:3px;font-size:.82rem;color:#1768e8}
  .mobile-calendar-summary p{margin:0;color:#6f7f92;font-size:.72rem;line-height:1.45}
  .mobile-empty-ok,.mobile-empty-error{padding:14px;text-align:center;border:1px dashed #c8d3df;border-radius:7px;color:#637589;font-size:.74rem}.mobile-empty-ok{background:#f5fbf7;color:#19724b}.mobile-empty-error{background:#fff5f4;color:#b42318}
}
@media (max-width:390px){
  .mobile-home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar-left{max-width:45%}
}


/* ============================================================
   v1.0.9 역할 화면 / 초기등록 / 컴팩트 대시보드
   ============================================================ */
@media (min-width:960px){
  .sidebar-nav{overflow:hidden!important}
  .role-menu-root{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:6px;margin:6px 0 8px;padding-right:2px}
  .quick-upload{flex:0 0 auto;margin-top:8px!important;padding-top:9px!important;background:var(--sidebar-bg);position:relative;z-index:3}
  
  
  
  
  
  
  .admin-role-preview{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 6px;border:1px solid #d7e1ec;background:#f7f9fc;border-radius:8px}
  .admin-role-preview>span{font-size:.69rem;font-weight:900;color:#5f7186;white-space:nowrap}.admin-role-preview select{height:32px;min-width:112px;border:1px solid #d6e0eb;border-radius:6px;background:#fff;padding:0 8px;font-size:.72rem;font-weight:800}.admin-role-preview #adminPreviewStation{min-width:135px}
  .station-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;gap:8px!important}
  .station-tile{border-radius:8px!important;padding:9px 10px!important;gap:6px!important;min-height:168px}
  .role-station-board{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px!important}
  .role-station-mini{min-width:0;border:1px solid #dbe3ec;border-left:4px solid #1a7f50;background:#fff;padding:10px;text-align:left;cursor:pointer}.role-station-mini.needs{border-left-color:#e5483f;background:#fffdfc}.role-station-mini:hover{box-shadow:0 5px 14px #18496f1c}
  .role-dashboard-grid{grid-template-columns:minmax(0,2.2fr) minmax(290px,.72fr)!important}
}

.tile-donut,.mini-donut{--p:0;position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1a7f50 calc(var(--p)*1%),#e8edf3 0)}
.tile-donut:after,.mini-donut:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}.tile-donut b,.mini-donut b{position:relative;z-index:1;font-size:.62rem;font-weight:950;color:#284057}
.tile-sales-track,.mini-sales-track{height:5px;background:#eef2f6;overflow:hidden}.tile-sales-track span,.mini-sales-track i{display:block;height:100%;background:#1768e8}
.status-dots{gap:3px 6px!important}

.overview-panel{border-radius:8px!important;border:1px solid #ccd8e5!important;box-shadow:0 10px 28px #17345216}.overview-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:10px 0}.overview-kpis article{background:#f8fbff;border:1px solid #dce5ef;padding:9px 10px}.overview-kpis span{display:block;font-size:.62rem;color:#6e7e91}.overview-kpis strong{display:block;margin-top:3px;font-size:.95rem}.overview-tabs button{border-radius:6px!important;min-height:38px!important;padding:7px 11px!important;font-size:.72rem}
.manager-setup-dialog{width:min(900px,calc(100% - 24px));max-height:90vh;border:0;border-radius:10px;padding:0;box-shadow:0 24px 70px #0e274443}.manager-setup-dialog::backdrop{background:#0b1d2f99}.manager-setup-dialog form{padding:18px}.setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid #e2e8f0;padding-bottom:12px}.setup-head span{font-size:.65rem;color:#1768e8;font-weight:950}.setup-head h2{margin:2px 0 4px;font-size:1.25rem}.setup-head p{margin:0;color:#69798c;font-size:.78rem;line-height:1.5}.setup-station-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:13px 0}.setup-station-grid label{font-size:.7rem;font-weight:850;color:#5f7185}.setup-station-grid input,.setup-station-grid select{width:100%;min-height:42px;margin-top:4px}.setup-tank-grid{display:grid;gap:6px}.setup-tank-row{display:grid;grid-template-columns:135px minmax(150px,1fr) 105px 105px 105px;gap:6px;align-items:center;padding:7px;border:1px solid #dce5ef;background:#fbfdff}.setup-tank-row input{min-width:0;min-height:40px}.setup-check{display:flex;align-items:center;gap:7px;font-size:.75rem}.setup-check input{min-height:auto}.setup-foot{margin:9px 0 0;color:#718094;font-size:.68rem}
@media(max-width:959px){.manager-setup-dialog{width:calc(100% - 16px)}.manager-setup-dialog form{padding:14px}.setup-station-grid{grid-template-columns:1fr}.setup-tank-row{grid-template-columns:1fr 1fr}.setup-tank-row .setup-check{grid-column:1/-1}.overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ============================================================
   v1.0.10 Excel형 컴팩트 운영 대시보드
   - PC 상단 요약은 한 줄
   - 주유소는 행 단위 한눈표
   - 원형 완료율 제거, 실제 탱크 재고 막대 사용
   - 미완료 상태 셀은 눌러서 바로 해당 업무로 이동
   ============================================================ */
@media (min-width:960px){
  .role-dashboard-head{align-items:center;margin-bottom:7px}
  .role-dashboard-head h1{font-size:1.42rem;margin:1px 0 1px}.role-dashboard-head p{font-size:.72rem}.role-dashboard-asof{font-size:.64rem}
  .role-dashboard-kpis{display:grid!important;gap:0!important;border:1px solid #d8e1eb;background:#d8e1eb;margin-bottom:7px!important}
  .role-dashboard-kpis .work-stat{min-height:54px!important;padding:6px 9px!important;border:0!important;border-top:0!important;background:#fff;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:end}
  .role-dashboard-kpis .work-stat span{font-size:.61rem;color:#6c7c90;grid-column:1/-1}.role-dashboard-kpis .work-stat strong{font-size:1rem!important;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-dashboard-kpis .work-stat small{font-size:.58rem;color:#8592a3;text-align:right;white-space:nowrap}
  .role-dashboard-kpis .work-stat.has-value{box-shadow:inset 0 3px 0 #eda100}
  .role-business-strip{display:none!important}
  .role-dashboard-primary{min-height:0!important;padding:9px!important}
  .role-panel-head{margin-bottom:6px}.role-panel-head h2{font-size:.88rem}
  .role-station-board{display:block!important}
  .role-station-table{display:grid;gap:4px}
  .role-station-table-head{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(270px,1.35fr) minmax(360px,1.65fr) 28px;gap:7px;align-items:center;padding:0 7px 4px;color:#718196;font-size:.6rem;font-weight:850}
  .role-station-table-head small{display:block;font-size:.54rem;font-weight:600;color:#98a2b3;margin-top:1px}
  .role-station-mini{display:grid!important;grid-template-columns:minmax(170px,.9fr) minmax(270px,1.35fr) minmax(360px,1.65fr) 28px;gap:7px;align-items:stretch;min-height:82px!important;padding:6px 7px!important;border:1px solid #dbe3ec!important;border-left:4px solid #159455!important;background:#fff!important;box-shadow:none!important}
  .role-station-mini.needs{border-left-color:#e5483f!important;background:#fffdfc!important}.role-station-mini:hover{box-shadow:0 3px 10px #18496f12!important}
  .station-main-cell,.station-tank-cell,.station-detail-go{border:0;background:transparent;text-align:left;padding:3px;min-width:0}
  .station-main-cell{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:center}.station-main-title strong,.station-main-title small{display:block}.station-main-title strong{font-size:.8rem;color:#152b46}.station-main-title small{font-size:.59rem;color:#738397;margin-top:1px}
  .station-main-sales{display:grid;grid-template-columns:auto minmax(60px,1fr);gap:6px;align-items:center}.station-main-sales b{font-size:.72rem;color:#1a2e48;white-space:nowrap}.station-main-sales i{height:6px;background:#edf1f5;overflow:hidden}.station-main-sales i em{display:block;height:100%;background:#1768e8}
  .station-tank-cell{display:flex;align-items:center;cursor:pointer}.station-tank-bars{display:grid;gap:4px;width:100%}.station-tank-line{display:grid;grid-template-columns:58px minmax(80px,1fr) 46px;gap:5px;align-items:center}.station-tank-name{display:flex;align-items:center;gap:4px;font-size:.58rem;color:#526377;white-space:nowrap}.station-tank-name .fuel-dot{width:6px;height:6px}.station-tank-track{height:7px;background:#edf1f5;overflow:hidden;border:1px solid #e4e9ef}.station-tank-track i{display:block;height:100%}.station-tank-line strong{font-size:.57rem;text-align:right;color:#44566b;white-space:nowrap}.station-tank-line.risk strong{color:#b42318;font-weight:950}.station-tank-empty{width:100%;border:1px dashed #d8a3a0;background:#fff8f7;color:#b42318;padding:8px;font-size:.62rem;font-weight:850;text-align:center}
  .station-status-cells{display:grid;grid-template-columns:repeat(5,minmax(58px,1fr));gap:3px;align-items:stretch}.work-status-cell{border:1px solid transparent;padding:5px 3px;display:grid;place-items:center;align-content:center;gap:2px;min-width:0;cursor:pointer}.work-status-cell span{font-size:.55rem;font-weight:750}.work-status-cell b{font-size:.61rem}.work-status-cell.done{background:#159455;color:#fff;border-color:#12824a}.work-status-cell.done:hover{background:#117c45}.work-status-cell.missing{background:#fff0ef;color:#b42318;border-color:#f1c5c0}.work-status-cell.missing:hover{background:#ffe5e2}.work-status-cell:focus-visible{outline:2px solid #1768e8;outline-offset:1px}
  .station-detail-go{display:grid;place-items:center;color:#1768e8;font-size:1.25rem;font-weight:800;cursor:pointer}.station-detail-go:hover{background:#f1f6fd}
}
@media (min-width:960px) and (max-width:1250px){
  .role-dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .role-station-table-head,.role-station-mini{grid-template-columns:minmax(145px,.8fr) minmax(220px,1.15fr) minmax(330px,1.55fr) 26px}
  .station-status-cells{grid-template-columns:repeat(5,minmax(50px,1fr))}
}


/* ============================================================
   v1.0.11 실제 운영형 대시보드 통합 디자인
   기준: 사용자가 확정한 네이비 사이드바 + Excel형 표 + 작은 KPI + 실제 그래프
   PC/모바일은 같은 데이터를 쓰되 화면 구조는 별도로 표현한다.
   ============================================================ */
:root{
  --ui-blue:#1768e8; --ui-blue-dark:#0f58c6; --ui-navy:#0d2b49; --ui-navy-2:#123d66;
  --ui-bg:#f4f7fb; --ui-panel:#fff; --ui-border:#d8e2ee; --ui-muted:#708196;
  --ui-green:#159455; --ui-red:#d92d20; --ui-amber:#e89b16;
  --sidebar-bg:#0d2b49; --sidebar-ink:#edf5fd; --sidebar-muted:#b9c9da; --accent:#1768e8; --accent-ink:#fff;
}
body{background:var(--ui-bg);color:#152b46}

/* 공통 화면을 '관리표'처럼 정돈한다. */
.form-card,.station-card,.role-dashboard-panel,.metric,.kpi,.overview-panel{border:1px solid var(--ui-border)!important;box-shadow:0 2px 8px rgba(24,55,88,.045)!important}
.form-card,.station-card,.metric,.kpi{border-radius:7px!important}
.form-card{background:#fff}
.page-title{margin-bottom:10px}.page-title h1{font-weight:950;letter-spacing:-.035em;color:#142a46}.page-title p{font-size:.78rem;margin-bottom:0;color:var(--ui-muted)}
input,select,textarea{border-radius:6px;min-height:40px;border-color:#ccd8e5;background:#fff}.primary,.quiet{border-radius:6px;min-height:38px;padding:8px 12px}.primary{background:var(--ui-blue)}
/* v1.3.129 — 위 "폰: 손가락 크기 확보(959px 이하 44px)" 규칙이 바로 윗줄 관리표 규칙(input,select,textarea 40px)에 select 만 져서,
   폰에서 월 선택·주유소 선택 드롭다운만 40px 였다(입력칸·버튼은 44px). 폰에서 드롭다운도 44px 로 되돌린다. PC 는 그대로. */
@media (max-width: 959px) { select { min-height: 44px; } }
.tab-bar{border-radius:7px!important;border-color:var(--ui-border)!important;background:#f4f7fb!important;padding:4px!important}.tab-button{border-radius:5px!important}.tab-button.active{background:#fff!important;color:var(--ui-blue)!important;box-shadow:0 2px 7px rgba(32,65,100,.08)!important}
.data-table,table{border-color:var(--ui-border)}.data-table th,.data-table td,table th,table td{border-color:#e4eaf1}.data-table th,table th{background:#f7f9fc;color:#52657a;font-weight:900}
.badge{border-radius:4px!important}.empty-card{border-radius:6px!important}

@media(min-width:960px){
  .sidebar-nav{width:218px;padding:12px 10px;background:linear-gradient(180deg,#0c2947 0%,#102f50 62%,#0b253f 100%);box-shadow:5px 0 24px rgba(9,31,54,.08)}
  .sidebar-brand{padding:7px 7px 13px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:5px}.sidebar-brand-mark{width:27px;height:27px;background:#fff!important;color:#0d2b49!important;border-radius:5px!important;font-size:.82rem}.sidebar-brand-copy{display:grid}.sidebar-brand-text{font-size:.81rem!important;font-weight:950!important}.sidebar-brand-copy small{font-size:.55rem;color:#8ea8c1;margin-top:1px}
  .topbar{margin-left:218px;height:58px;border-bottom:1px solid var(--ui-border);padding:7px 16px;background:rgba(255,255,255,.98)}
  #mainContent{margin-left:218px;padding:14px 16px 46px;background:var(--ui-bg)}
  .topbar-title strong{font-size:.82rem}.topbar-title small{font-size:.62rem}.crumb{font-size:.66rem}
  .top-actions button{min-height:32px!important;padding:6px 9px!important;border-radius:5px!important;font-size:.68rem!important}.admin-role-preview{border-radius:6px!important;padding:3px 5px!important}.admin-role-preview select{height:30px!important;border-radius:5px!important}
  .role-menu-root{gap:5px;margin:4px 0 7px}
  
  .quick-upload{gap:5px!important;padding:8px 0 0!important}.quick-btn{min-height:42px!important;border-radius:5px!important;padding:7px 9px!important}.quick-btn.camera{background:#7138c7!important;border-color:#7138c7!important}.quick-btn.file{background:#1768e8!important;border-color:#1768e8!important}.quick-btn span>strong{font-size:.69rem!important}.quick-btn span>small{font-size:.54rem!important}

  .work-center-view{max-width:100%}.desktop-workcenter{display:block}.role-dashboard-head{margin-bottom:8px!important}.role-dashboard-head h1{font-size:1.28rem!important;color:#132a46}.role-dashboard-eyebrow{font-size:.62rem!important;color:var(--ui-blue)!important;font-weight:950}.role-dashboard-head p{font-size:.67rem!important;color:#718297}.role-dashboard-asof{font-size:.58rem!important;color:#8090a3}
  .role-dashboard-kpis{grid-template-columns:repeat(7,minmax(0,1fr))!important;border:0!important;background:transparent!important;gap:6px!important;margin-bottom:8px!important}.role-dashboard-kpis .work-stat{min-height:58px!important;border:1px solid var(--ui-border)!important;border-radius:6px!important;padding:7px 9px!important;box-shadow:0 2px 7px rgba(26,55,88,.035)!important}.role-dashboard-kpis .work-stat.has-value{box-shadow:inset 0 3px 0 var(--ui-amber),0 2px 7px rgba(26,55,88,.035)!important}.role-dashboard-kpis .work-stat span{font-size:.57rem!important}.role-dashboard-kpis .work-stat strong{font-size:1.02rem!important;color:#122946}.role-dashboard-kpis .work-stat small{font-size:.53rem!important}
  .role-dashboard-grid{grid-template-columns:minmax(0,2.35fr) minmax(260px,.72fr)!important;gap:8px!important}.role-dashboard-panel{border-radius:6px!important;padding:9px!important;background:#fff}.role-panel-head{min-height:31px;padding-bottom:5px;border-bottom:1px solid #edf1f5;margin-bottom:6px!important}.role-panel-kicker{font-size:.52rem!important;color:var(--ui-blue)!important}.role-panel-head h2{font-size:.78rem!important;color:#17304e}.text-link{font-size:.58rem!important;color:var(--ui-blue)!important}
  .role-dashboard-side{gap:8px!important}.role-alert-row{border-radius:4px!important;padding:6px 5px!important}.role-alert-copy strong{font-size:.62rem!important}.role-alert-copy small{font-size:.54rem!important}.role-alert-time{font-size:.5rem!important}.role-comms button{border-radius:4px!important;min-height:38px!important;padding:6px 8px!important}.role-comms button strong,.role-comms button span{font-size:.59rem!important}

  .role-station-table{gap:0!important;border:1px solid #dce4ed;border-bottom:0}.role-station-table-head{grid-template-columns:minmax(150px,.82fr) minmax(280px,1.42fr) minmax(360px,1.65fr) 26px!important;background:#f4f7fb;padding:7px 8px!important;border-bottom:1px solid #dce4ed;font-size:.56rem!important}.role-station-mini{grid-template-columns:minmax(150px,.82fr) minmax(280px,1.42fr) minmax(360px,1.65fr) 26px!important;min-height:88px!important;border:0!important;border-bottom:1px solid #dce4ed!important;border-left:4px solid var(--ui-green)!important;padding:7px 8px!important}.role-station-mini.needs{border-left-color:var(--ui-red)!important;background:#fffdfa!important}.station-main-title strong{font-size:.74rem!important}.station-main-title small{font-size:.53rem!important}.station-main-sales b{font-size:.66rem!important}.station-main-sales i{height:7px!important;border-radius:1px}.station-main-sales i em{background:linear-gradient(90deg,#78a5f4,#1768e8)!important}.station-tank-line{grid-template-columns:55px minmax(90px,1fr) 43px!important}.station-tank-track{height:8px!important;background:#edf1f5!important;border-radius:1px!important}.station-tank-name{font-size:.54rem!important}.station-tank-line strong{font-size:.52rem!important}.station-status-cells{grid-template-columns:repeat(5,minmax(54px,1fr))!important;gap:4px!important}.work-status-cell{min-height:48px!important;border-radius:4px!important}.work-status-cell.done{background:#e9f8ef!important;color:#0d7543!important;border-color:#c5ecd5!important}.work-status-cell.done b{color:#0a7b45}.work-status-cell.missing{background:#fff0ef!important;color:#c52d24!important;border-color:#f2c6c2!important}.work-status-cell span{font-size:.51rem!important}.work-status-cell b{font-size:.58rem!important}.station-detail-go{border-left:1px solid #edf1f5!important}

  .role-dashboard-insights{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;margin-top:8px}.insight-panel{min-height:176px}.work-insight-chart{height:118px;display:flex;align-items:end;gap:4px;padding:5px 3px 0;border-bottom:1px solid #e8edf3}.work-insight-bar{height:100%;flex:1;min-width:5px;display:grid;grid-template-rows:1fr 15px;align-items:end}.work-insight-bar i{display:block;width:100%;background:linear-gradient(180deg,#7fa9ef,#1768e8);min-height:4px}.work-insight-bar small{text-align:center;font-size:.46rem;color:#8b98a9;padding-top:2px}.dashboard-no-data{display:grid;place-items:center;min-height:105px;color:#7b8999;font-size:.6rem}
  .work-rank-list,.work-tank-overview{display:grid;gap:3px}.work-rank-list button,.work-tank-overview button{border:0;border-bottom:1px solid #edf1f5;background:#fff;min-height:30px;padding:4px 2px;display:grid;align-items:center;gap:6px;text-align:left;color:#30455d}.work-rank-list button{grid-template-columns:18px minmax(70px,.7fr) minmax(60px,1fr) 72px}.work-rank-list button>b{width:16px;height:16px;display:grid;place-items:center;background:#eef4ff;color:#1768e8;border-radius:3px;font-size:.5rem}.work-rank-list button>span{font-size:.55rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.work-rank-list button>i,.work-tank-overview button>i{height:6px;background:#edf1f5;overflow:hidden}.work-rank-list button>i em,.work-tank-overview button>i em{display:block;height:100%;background:#1768e8}.work-rank-list button>strong{font-size:.53rem;text-align:right}.work-rank-list button>strong small{display:block;color:#159455;font-size:.46rem}.work-tank-overview button{grid-template-columns:minmax(75px,.8fr) minmax(70px,1fr) 35px}.work-tank-overview button span b,.work-tank-overview button span small{display:block}.work-tank-overview button span b{font-size:.54rem}.work-tank-overview button span small{font-size:.47rem;color:#7c8b9d}.work-tank-overview button strong{font-size:.53rem;text-align:right}.work-tank-overview button.risk strong{color:var(--ui-red)}
  .work-calendar-panel{margin-top:8px!important}.work-mini-calendar{max-width:none!important}.mini-calendar-head{margin-bottom:4px!important}.mini-calendar-grid{gap:2px!important}.mini-calendar-day{min-height:31px!important;border-radius:3px!important}.mini-calendar-day b{font-size:.55rem!important}.role-quick-panel{margin-top:8px!important}.role-shortcuts{grid-template-columns:repeat(6,minmax(0,1fr))!important}.work-shortcut{min-height:42px!important;border-radius:4px!important;padding:6px 8px!important}.work-shortcut strong{font-size:.59rem!important}.work-shortcut span{font-size:.5rem!important}

  /* 나머지 모든 PC 화면도 같은 디자인 언어로 맞춘다. */
  .form-card{padding:14px!important;margin-bottom:10px!important}.form-card.compact{padding:12px!important}.form-card h2{font-size:.92rem!important}.form-card h3{font-size:.78rem!important}.form-card p,.form-help{font-size:.65rem!important}.form-grid{gap:7px 9px!important}.form-card label{font-size:.68rem!important;margin:7px 0!important}.form-card input,.form-card select,.form-card textarea{min-height:37px!important;border-radius:5px!important;padding:7px 9px!important;font-size:.72rem!important}.card-list{gap:7px!important}.station-card{padding:10px!important;gap:6px!important}.station-card strong{font-size:.72rem}.station-card,.station-card p,.station-card span{font-size:.64rem}.metric-grid,.kpi-row{gap:7px!important}.metric,.kpi{padding:10px!important}.metric strong,.kpi strong{font-size:1.05rem!important}.metric span,.kpi-label{font-size:.61rem!important}.data-table th,.data-table td,table th,table td{padding:7px 8px!important;font-size:.64rem!important}.page-title h1{font-size:1.23rem!important}.page-title{align-items:center}.page-title .btn-row{gap:5px}.page-title input,.page-title button{min-height:34px!important;font-size:.66rem!important;border-radius:5px!important}
}

@media(max-width:959px){
  body{background:#f2f5f9}.topbar{height:55px!important;padding:7px 10px!important}.topbar-title strong{font-size:.8rem}.topbar-title small{font-size:.58rem}.top-actions .quiet{min-height:34px!important;border-radius:6px!important;padding:6px 8px!important;font-size:.67rem!important}.phone-nav{top:55px!important;background:#102f50!important}.phone-nav-row{padding:4px 7px!important}
  main{padding:10px 9px 72px!important}.desktop-workcenter{display:none!important}.mobile-workcenter{display:block!important}.mobile-home-head{padding:3px 1px 8px!important}.mobile-home-role{font-size:.62rem!important;color:#1768e8!important}.mobile-home-head h1{font-size:1.25rem!important;margin:2px 0!important}.mobile-home-head p{font-size:.68rem!important}.mobile-notify-button{border-radius:6px!important;min-height:37px!important;background:#fff!important;border:1px solid #d8e2ed!important;color:#1768e8!important}
  .mobile-home-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.mobile-stat{min-height:62px!important;border-radius:7px!important;padding:8px!important;background:#fff!important;border:1px solid #d9e2ed!important}.mobile-stat span{font-size:.55rem!important}.mobile-stat strong{font-size:1rem!important}.mobile-stat.has{box-shadow:inset 0 3px 0 #e89b16!important}
  .mobile-home-card{border-radius:8px!important;border:1px solid #d9e2ed!important;padding:10px!important;margin-top:8px!important;box-shadow:0 2px 8px rgba(25,55,87,.04)!important}.mobile-card-head span{font-size:.54rem!important;color:#1768e8!important}.mobile-card-head h2{font-size:.82rem!important}.mobile-card-head button{min-height:31px!important;border-radius:5px!important;font-size:.6rem!important}.mobile-priority-row{border-radius:6px!important;padding:9px!important}.mobile-priority-row strong{font-size:.7rem!important}.mobile-priority-row small{font-size:.58rem!important}.mobile-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}.mobile-action-grid button{min-height:74px!important;border-radius:8px!important;background:#fff!important;border:1px solid #d7e1ec!important;padding:9px 6px!important;display:grid!important;place-items:center!important;text-align:center!important}.mobile-action-grid button:before{content:'↗';width:28px;height:28px;border-radius:8px;background:#edf4ff;color:#1768e8;display:grid;place-items:center;font-size:.8rem}.mobile-action-grid button strong{font-size:.68rem!important}.mobile-action-grid button span{font-size:.54rem!important}.mobile-alert-list button{border-radius:5px!important;padding:8px!important}.mobile-connect-grid button{border-radius:6px!important;min-height:55px!important}.mobile-connect-grid button span{font-size:.58rem!important}.mobile-connect-grid button strong{font-size:.75rem!important}
  .quick-upload-bar{height:60px!important;box-shadow:0 -4px 14px rgba(20,48,80,.10)!important}.quick-bar-btn{min-height:60px!important;font-size:.75rem!important}.quick-bar-btn.camera{background:#7138c7!important}.quick-bar-btn.file{background:#1768e8!important}
  .form-card,.station-card{border-radius:8px!important;padding:12px!important}.form-card input,.form-card select,.form-card textarea{min-height:44px!important;border-radius:7px!important;font-size:16px!important}.primary,.quiet{border-radius:7px!important}.page-title h1{font-size:1.2rem!important}.data-table-wrap{overflow-x:auto}.data-table{min-width:680px}
}

/* =========================================================
   v1.0.15 전체 업무화면 완성형 UI
   - 기존 DOM id, 이벤트, API, 권한 구조를 그대로 유지한다.
   - PC는 Excel/ERP형 고밀도 작업공간, 모바일은 현장용 별도 화면이다.
   - 이 블록만 마지막에 덧붙여 v1.0.14 복구 기준을 점진적으로 확장한다.
   ========================================================= */
:root{
  --ui115-sidebar:196px;
  --ui115-topbar:50px;
  --ui115-navy:#0b2743;
  --ui115-navy-2:#12395e;
  --ui115-blue:#1768e8;
  --ui115-green:#168451;
  --ui115-green-bg:#eaf7f0;
  --ui115-amber:#b96f05;
  --ui115-amber-bg:#fff4dc;
  --ui115-red:#bd3028;
  --ui115-red-bg:#ffebe9;
  --ui115-line:#d5dee8;
  --ui115-head:#edf2f7;
  --ui115-bg:#f2f5f9;
  --ui115-text:#17304d;
  --ui115-muted:#63748a;
}

.empty-card{
  min-height:42px!important;
  padding:10px 12px!important;
  border:1px solid var(--ui115-line)!important;
  border-radius:3px!important;
  background:#f8fafc!important;
  color:var(--ui115-muted)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:.75rem!important;
  box-shadow:none!important;
}
.empty-card.problem{background:var(--ui115-red-bg)!important;color:var(--ui115-red)!important;border-color:#efc1bd!important}
.message{min-height:0;margin-top:6px;font-size:.75rem;font-weight:700}
.badge{border-radius:3px!important}

@media(min-width:960px){
  html,body{background:var(--ui115-bg)!important;color:var(--ui115-text)!important}
  body{font-size:14px!important}
  
  .sidebar-brand{min-height:48px!important;padding:2px 4px 9px!important;margin-bottom:7px!important}
  .sidebar-brand-mark{width:30px!important;height:30px!important;border-radius:4px!important;font-size:.9rem!important}
  .sidebar-brand-text{font-size:.82rem!important;white-space:nowrap!important}
  .sidebar-brand-copy small{font-size:.63rem!important}
  .sidebar-nav{gap:3px!important}
  
  
  
  
  
  .quick-upload{padding-top:8px!important;gap:5px!important}
  .quick-btn{min-height:45px!important;padding:7px 9px!important;border-radius:3px!important}
  .quick-btn span>strong{font-size:.74rem!important}.quick-btn span>small{font-size:.6rem!important}

  .topbar{
    left:var(--ui115-sidebar)!important;
    height:var(--ui115-topbar)!important;
    padding:5px 12px!important;
    border-bottom:1px solid var(--ui115-line)!important;
    box-shadow:none!important;
    background:#fff!important;
  }
  .topbar-title strong{font-size:.82rem!important}.topbar-title small{font-size:.64rem!important}
  .top-actions{gap:4px!important}
  .top-actions button,.top-actions select,.admin-role-preview select{min-height:38px!important;font-size:.72rem!important;border-radius:3px!important}
  
  #mainContent{
    margin-left:var(--ui115-sidebar)!important;
    padding:10px 12px 22px!important;
    max-width:none!important;
    background:var(--ui115-bg)!important;
  }
  .view{width:100%!important;max-width:none!important;min-width:0}
  .page-title{min-height:42px!important;margin:0 0 7px!important;padding:0!important}
  .page-title h1{font-size:1.15rem!important;line-height:1.2!important;margin:0 0 2px!important;color:#102b49!important}
  .page-title p{font-size:.72rem!important;line-height:1.35!important;color:var(--ui115-muted)!important;margin:0!important}

  button,input,select,textarea{font-family:inherit}
  button.primary,button.quiet,.primary,.quiet,.tab-button,.segmented button{
    min-height:42px!important;
    padding:8px 12px!important;
    border-radius:3px!important;
    font-size:.75rem!important;
    font-weight:800!important;
  }
  .primary{background:var(--ui115-blue)!important;border-color:#0e59ca!important}
  .quiet{background:#fff!important;border-color:var(--ui115-line)!important;color:#314a65!important}
  .form-card,.panel,.overview-panel,.trend-panel,.role-dashboard-panel,.operation-submit-panel,.operation-inbox-panel{
    border:1px solid var(--ui115-line)!important;
    border-radius:4px!important;
    box-shadow:0 1px 3px #142f4a0a!important;
    background:#fff!important;
  }
  .form-card,.form-card.compact,.panel{padding:10px!important;margin-bottom:8px!important}
  .form-card h2,.panel h2{font-size:.91rem!important;margin:0 0 7px!important}
  .form-card h3,.panel h3{font-size:.8rem!important;margin:9px 0 5px!important}
  .form-card p,.form-help{font-size:.71rem!important;line-height:1.45!important;margin:4px 0 8px!important}
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;gap:7px 9px!important}
  .form-grid .wide-field{grid-column:span 2}
  .form-card label,.panel label{font-size:.7rem!important;font-weight:750!important;margin:0!important;gap:4px!important}
  .form-card input,.form-card select,.form-card textarea,.panel input,.panel select,.panel textarea,
  .toolbar input,.toolbar select,.sheet-toolbar input,.sheet-toolbar select{
    min-height:42px!important;
    padding:8px 9px!important;
    border:1px solid #cfd9e4!important;
    border-radius:3px!important;
    background:#fff!important;
    color:#203953!important;
    font-size:.75rem!important;
  }
  .form-card textarea,.panel textarea{min-height:72px!important;resize:vertical}
  .button-row,.btn-row{gap:6px!important;align-items:center!important}
  .tab-bar{min-height:46px!important;padding:3px!important;gap:2px!important;border:1px solid var(--ui115-line)!important;border-radius:4px!important;background:#eaf0f6!important;margin-bottom:8px!important}
  .tab-button{background:transparent!important;color:#52677d!important;border:0!important}
  .tab-button.active{background:#fff!important;color:var(--ui115-blue)!important;box-shadow:0 1px 3px #16314d17!important}
  .segmented{gap:2px!important;padding:3px!important;border-radius:4px!important;background:#eaf0f6!important;margin-bottom:8px!important}
  .segmented button.active{background:#fff!important;color:var(--ui115-blue)!important}
  .section-label{font-size:.76rem!important;margin:9px 0 5px!important;color:#3d536a!important}

  .data-table,.sheet-table{width:100%;font-size:.75rem!important}
  .data-table th,.sheet-table th{height:34px!important;padding:6px 8px!important;background:var(--ui115-head)!important;color:#425970!important;font-size:.7rem!important;font-weight:850!important;border:1px solid #d8e1ea!important}
  .data-table td,.sheet-table td{height:34px!important;padding:6px 8px!important;font-size:.73rem!important;border:1px solid #e0e7ef!important;background:#fff!important}
  .table-scroll,.sheet-wrap{border:1px solid var(--ui115-line)!important;border-radius:3px!important;box-shadow:none!important}

  /* 대표·관리자·소장 대시보드 */
  
  
  
  
  
  
  
  
  .role-station-table-head,.role-station-mini{
    grid-template-columns:minmax(180px,.9fr) minmax(330px,1.45fr) minmax(390px,1.6fr) 30px!important;
  }
  .role-station-table-head{padding:8px 9px!important;font-size:.7rem!important;background:var(--ui115-head)!important}
  .role-station-table-head small{font-size:.61rem!important}
  .role-station-mini{padding:7px 8px!important;border-left:3px solid var(--ui115-green)!important}
  .role-station-mini.needs{border-left-color:var(--ui115-red)!important}
  .station-main-title strong{font-size:.82rem!important}.station-main-title small{font-size:.67rem!important}.station-main-sales b{font-size:.75rem!important}
  .station-tank-line{grid-template-columns:65px minmax(90px,1fr) minmax(128px,.9fr)!important;gap:6px!important}
  .station-tank-name{font-size:.67rem!important}.station-tank-track{height:8px!important}
  .station-tank-value{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px;align-items:center;min-width:0}
  .station-tank-value b{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4f6175}
  .station-tank-value strong{font-size:.65rem!important;text-align:right!important}
  .station-status-cells{grid-template-columns:repeat(5,minmax(62px,1fr))!important;gap:4px!important}
  .work-status-cell{min-height:50px!important;border-radius:3px!important}
  .work-status-cell span{font-size:.64rem!important}.work-status-cell b{font-size:.71rem!important}
  .work-status-cell.done{background:var(--ui115-green-bg)!important;color:#0f7042!important;border-color:#b9e1ca!important}
  .work-status-cell.warn{background:var(--ui115-amber-bg)!important;color:#925700!important;border-color:#ecd299!important}
  .work-status-cell.missing,.work-status-cell.danger{background:var(--ui115-red-bg)!important;color:var(--ui115-red)!important;border-color:#efbbb7!important}
  
  
  
  
  
  
  

  /* 마감·현금: 입력과 결과를 한 화면에 */
  .closing-station{display:grid!important;grid-template-columns:repeat(2,minmax(220px,1fr))!important;gap:9px!important}
  .closing-actions{grid-template-columns:repeat(8,minmax(105px,1fr))!important;gap:5px!important;overflow-x:auto;margin-bottom:8px!important}
  .closing-action{min-height:66px!important;padding:9px 10px!important;border-radius:4px!important}
  .closing-action strong{font-size:.78rem!important}.closing-action span{font-size:.63rem!important}
  .closing-editor{border-top:3px solid var(--ui115-blue)!important}
  .cash-layout{grid-template-columns:minmax(620px,1.55fr) minmax(300px,.7fr)!important;gap:8px!important}
  .cash-summary{position:sticky;top:calc(var(--ui115-topbar) + 10px)}
  .difference-box{border-radius:4px!important;padding:13px!important}

  /* 채팅: 작성 / 메시지 / 기기 설정 3열 */
  .message-workspace{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(440px,1.35fr) minmax(260px,.62fr);gap:8px;align-items:start}
  .message-workspace>.form-card{margin:0!important}
  .message-compose-panel{position:sticky;top:calc(var(--ui115-topbar) + 10px)}
  .message-compose-panel .form-grid{grid-template-columns:1fr!important}
  .message-compose-panel .wide-field{grid-column:auto!important}
  .message-thread-panel{border:1px solid var(--ui115-line);background:#fff;padding:6px;min-height:420px}
  .message-card{border-radius:3px!important;border-left:3px solid #b8c6d6!important;margin:0!important}
  .message-card.unread{border-left-color:var(--ui115-blue)!important}.message-card.urgent{border-left-color:var(--ui115-red)!important}
  .message-device-panel{position:sticky;top:calc(var(--ui115-topbar) + 10px)}

  /* 보고센터: 상태표 + 입력/목록 + 상세 */
  .operation-status-strip{margin-bottom:7px!important}
  .operation-layout{grid-template-columns:minmax(340px,.72fr) minmax(560px,1.28fr)!important;gap:8px!important}
  .operation-submit-card{position:sticky;top:calc(var(--ui115-topbar) + 10px)}
  .operation-report-row{min-height:42px!important;border-radius:3px!important;padding:7px 9px!important}

  /* 자료함: 작은 업로드 패널 + 고밀도 자료목록 */
  .document-workspace{display:grid;grid-template-columns:minmax(300px,.55fr) minmax(620px,1.45fr);gap:8px;align-items:start}
  .document-upload-panel{position:sticky;top:calc(var(--ui115-topbar) + 10px);margin:0!important}
  .document-upload-panel .form-grid{grid-template-columns:1fr!important}.document-upload-panel .upload-primary-actions{grid-template-columns:1fr 1fr!important;gap:5px!important}
  .document-list-panel{border:1px solid var(--ui115-line);background:#fff;padding:0!important;gap:0!important;min-height:160px}

  /* 재고·탱크·발주: 입력 폼은 짧게, 현황은 행 단위 */
  [data-view="inventory"]>.form-card{max-width:none!important}
  [data-view="inventory"]>[data-inventory-pane="item"],
  [data-view="inventory"]>[data-inventory-pane="movement"]{border-top:3px solid var(--ui115-blue)!important}
  [data-view="inventory"]>[data-inventory-pane="tank"] .form-grid,
  [data-view="inventory"]>[data-inventory-pane="supplier"] .form-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important}
  #inventoryCards{border:1px solid var(--ui115-line);background:#fff;padding:0!important;gap:0!important}
  #tankCards,#orderCards,#supplierList{margin-top:8px}

  /* 원장: 입력 패널 + 잔액표 */
  .ledger-workspace{display:grid;grid-template-columns:minmax(350px,.72fr) minmax(540px,1.28fr);gap:8px;align-items:start}
  .ledger-entry-panel{position:sticky;top:calc(var(--ui115-topbar) + 10px);margin:0!important}
  .ledger-entry-panel .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ledger-list-panel{border:1px solid var(--ui115-line);background:#fff;padding:0!important;gap:0!important;min-height:120px}

  /* 공통 Excel형 동적 목록 */
  .dense-record-head{display:grid;align-items:center;min-height:35px;padding:6px 9px;background:var(--ui115-head);border-bottom:1px solid var(--ui115-line);color:#486077;font-size:.69rem;font-weight:850}
  .dense-record-row{display:grid!important;align-items:center;gap:8px;min-height:52px!important;margin:0!important;padding:6px 9px!important;border:0!important;border-bottom:1px solid #e1e8ef!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .dense-record-row:last-child{border-bottom:0!important}
  .dense-record-row:hover{background:#f8fbff!important}
  .dense-record-row .station-head{margin:0!important;gap:6px!important}.dense-record-row .station-head strong{font-size:.75rem!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dense-record-row .amount-row{margin:0!important;gap:5px 10px!important;font-size:.69rem!important}
  .dense-record-row .button-row{justify-content:flex-end!important;flex-wrap:wrap!important}
  .dense-record-row .button-row button{min-height:34px!important;padding:5px 8px!important;font-size:.67rem!important}
  .document-record-head,.document-record-row{grid-template-columns:minmax(260px,1.2fr) minmax(145px,.55fr) minmax(300px,1fr)}
  /* 아래 .inventory-view 블록(재고 현황 표 새 디자인)이 이 값을 덮어쓴다. 여기 것은 최소 fallback. */
  .inventory-record-head,.inventory-record-row{grid-template-columns:minmax(170px,.75fr) minmax(260px,1.05fr) minmax(250px,1fr) minmax(250px,1fr)}
  .inventory-record-row .forecast-note{margin:0!important;font-size:.68rem!important;line-height:1.35!important}
  .inventory-record-row .inline-settings{display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:5px!important;margin:0!important}
  .inventory-record-row .inline-settings label{font-size:.62rem!important}.inventory-record-row .inline-settings input{min-height:36px!important}
  .ledger-record-head,.ledger-record-row{grid-template-columns:minmax(240px,1fr) minmax(260px,1fr)}

  /* 매입·마진·관리 */
  
  .kpi-row,.metric-grid{gap:6px!important}.kpi,.metric{min-height:72px!important;padding:9px!important;border-radius:4px!important}
  .analysis-columns{grid-template-columns:1fr 1fr!important;gap:8px!important}
  #manageTabs{position:sticky;top:var(--ui115-topbar);z-index:12}
  /* display 에는 !important 를 주지 않는다 — 탭 전환(showTab)이 style.display:none 로 숨길 때
     계정 생성 패널이 다른 탭(감사·설비 등)에 새어 나오던 버그(2026-08-30) */
  #userManager:not([hidden]){display:grid;grid-template-columns:minmax(360px,.72fr) minmax(520px,1.28fr)!important;column-gap:10px!important;align-items:start!important}
  #userManager>h2,#userManager>p,#userManager>.form-grid,#userManager>h3,#userManager>.check-grid,#userManager>#createUser,#userManager>#userMessage{grid-column:1}
  #userManager>#userCards{grid-column:2;grid-row:1/span 20;margin:0!important}
  .check-grid{gap:5px!important}.check-grid label{min-height:42px!important;border-radius:3px!important;padding:7px 8px!important}
  .user-access-card{border-radius:3px!important;padding:9px!important}
  .user-access-card details{margin-top:7px!important;padding-top:7px!important}
  .step-block,.backup-kind,.warn-box,.restore-kind{border-radius:4px!important;box-shadow:none!important}
}

@media(max-width:1190px) and (min-width:960px){
  :root{--ui115-sidebar:184px}
  .message-workspace{grid-template-columns:300px minmax(430px,1fr)}
  .message-device-panel{grid-column:1/-1;position:static;display:grid!important;grid-template-columns:1fr auto;align-items:center}
  .document-workspace{grid-template-columns:300px minmax(520px,1fr)}
  .role-station-table-head,.role-station-mini{grid-template-columns:minmax(160px,.8fr) minmax(270px,1.2fr) minmax(330px,1.5fr) 28px!important}
  
  
}

@media(max-width:959px){
  #mainContent{padding:10px 9px 78px!important}
  .page-title{min-height:44px!important;margin-bottom:8px!important}.page-title h1{font-size:1.18rem!important}.page-title p{font-size:.73rem!important}
  .message-workspace,.document-workspace,.ledger-workspace{display:grid;grid-template-columns:1fr;gap:8px}
  .message-workspace>.form-card,.document-workspace>.form-card,.ledger-workspace>.form-card{margin:0!important}
  .message-thread-panel,.document-list-panel,.ledger-list-panel{padding:0!important;gap:0!important}
  .dense-record-head{display:none!important}
  .dense-record-row{border-radius:8px!important;margin-bottom:7px!important}
  .closing-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.closing-action{min-height:86px!important}
  .cash-layout,.operation-layout,.analysis-columns{grid-template-columns:1fr!important}
  .form-grid .wide-field{grid-column:auto!important}
  .work-status-cell.warn{background:var(--ui115-amber-bg)!important;color:var(--ui115-amber)!important;border-color:#efd59f!important}
  .work-status-cell.danger{background:var(--ui115-red-bg)!important;color:var(--ui115-red)!important;border-color:#efbbb7!important}
  .quick-upload-bar{height:auto!important;min-height:62px!important;padding:0 0 env(safe-area-inset-bottom)!important;gap:0!important}
  .quick-bar-btn{min-height:62px!important;border:0!important;border-radius:0!important;font-size:.79rem!important}
  .mobile-home-stats{gap:6px!important}.mobile-stat{min-height:68px!important;padding:8px!important}
  .mobile-action-grid button,.mobile-work-actions button{min-height:82px!important}
  .mobile-priority-row,.mobile-alert-list button,.mobile-connect-grid button{min-height:48px!important}
  .form-card input,.form-card select,.form-card textarea,.panel input,.panel select,.panel textarea{min-height:48px!important;font-size:16px!important}
  button.primary,button.quiet,.primary,.quiet{min-height:46px!important}
}

/* =========================================================
   v1.0.12 사용자 확정 시안형 실제 운영 UI
   - 네이비 사이드바 + Excel형 고밀도 대시보드
   - 실제 API 데이터만 표시, 빈 자료는 빈 상태로 표시
   - PC/모바일 레이아웃은 계속 분리
   ========================================================= */
:root{
  --ui112-navy:#0d2a48;
  --ui112-navy2:#123a63;
  --ui112-blue:#1768e8;
  --ui112-blue-soft:#eef5ff;
  --ui112-green:#169b5b;
  --ui112-green-soft:#eaf8f0;
  --ui112-red:#e5483f;
  --ui112-red-soft:#fff0ef;
  --ui112-amber:#f59e0b;
  --ui112-amber-soft:#fff7e7;
  --ui112-bg:#f4f7fb;
  --ui112-panel:#ffffff;
  --ui112-line:#d9e3ee;
  --ui112-text:#142a45;
  --ui112-muted:#718198;
}
body{background:var(--ui112-bg);color:var(--ui112-text)}

.sidebar-brand{border-bottom:1px solid rgba(255,255,255,.1)!important}






@media(min-width:960px){
  #mainContent{background:var(--ui112-bg)!important;padding:12px 14px 24px!important}
  .view{max-width:none!important}
  .page-title{min-height:46px!important;margin:0 0 8px!important;align-items:center!important}
  .page-title h1{font-size:1.22rem!important;color:#132b47!important;margin:0 0 2px!important;letter-spacing:-.025em}
  .page-title p{font-size:.63rem!important;color:#748398!important;margin:0!important}
  .page-title .btn-row{gap:6px!important}
  .page-title input,.page-title select,.page-title button{min-height:34px!important;font-size:.62rem!important;border-radius:5px!important}

  /* 확정 시안형 메인 대시보드 */
  
  
  
  
  
  
  
  
  

  
  
  
  
  

  
  
  
  

  
  
  

  

  

  
  

  
  

  /* 실제 업무 화면 전체도 동일한 시안 언어로 정돈 */
  .form-card,.overview-panel,.trend-panel,.station-card,.role-dashboard-panel,.operation-submit-panel,.operation-inbox,.recognition-dialog,.password-dialog{border:1px solid var(--ui112-line)!important;border-radius:6px!important;box-shadow:0 2px 8px rgba(24,55,88,.04)!important;background:#fff!important}
  .form-card{padding:11px!important;margin-bottom:8px!important}.form-card h2,.form-card h3{color:#18324f!important}.form-card label{font-size:.62rem!important;color:#52647a!important}.form-card input,.form-card select,.form-card textarea{min-height:36px!important;border:1px solid #d9e2ec!important;border-radius:4px!important;background:#fbfdff!important;font-size:.65rem!important}.form-card textarea{min-height:72px!important}
  button.primary,button.quiet,.primary,.quiet{border-radius:4px!important}.primary{background:var(--ui112-blue)!important}.quiet{border-color:#d8e2ed!important;background:#fff!important;color:#42566e!important}
  table{border-collapse:collapse}.data-table th,.data-table td,.sheet-table th,.sheet-table td{border-color:#e2e9f1!important}.data-table th,.sheet-table th{background:#f5f8fc!important;color:#506279!important;font-size:.58rem!important}.data-table td,.sheet-table td{font-size:.6rem!important}
  .tab-row,.overview-tabs{gap:4px!important}.tab-row button,.overview-tabs button{border-radius:4px!important;font-size:.58rem!important;min-height:32px!important}
  .card-list{gap:7px!important}.station-card{padding:9px!important}.station-head h2,.station-head strong{color:#203a58!important}
}

@media(max-width:959px){
  #mainContent{background:#f7f9fc!important}
  .page-title{padding:5px 2px!important;margin-bottom:7px!important}.page-title h1{font-size:1.18rem!important}.page-title p{font-size:.72rem!important}
  .mobile-work-center,.phone-nav{font-family:inherit}
  .mobile-work-actions button,.mobile-priority-row,.mobile-stat,.mobile-work-section{border-radius:12px!important;box-shadow:0 3px 12px rgba(25,55,85,.05)!important;border-color:#dfe7f0!important;background:#fff!important}
  
  .phone-nav{background:rgba(255,255,255,.98)!important;border-top:1px solid #dce5ef!important;box-shadow:0 -4px 16px rgba(25,55,85,.07)!important}
  .phone-nav button.active{color:var(--ui112-blue)!important}
  /* PC형 대시보드를 폰에서는 그대로 축소하지 않는다. */
  
  
}

/* v1.0.15 우선순위 고정: 긴급복구 CSS 뒤에서도 완성형 레이어가 이긴다. */
@media(min-width:960px){
  .sidebar,.sidebar-nav{box-sizing:border-box!important;width:var(--ui115-sidebar)!important;padding:10px 9px!important;background:linear-gradient(180deg,var(--ui115-navy) 0%,#0d3153 64%,#081d32 100%)!important}
  .sidebar-brand{min-height:48px!important;padding:2px 4px 9px!important}.sidebar-brand-mark{width:30px!important;height:30px!important;border-radius:4px!important}.sidebar-brand-text{font-size:.82rem!important}
  
  .topbar{left:auto!important;margin-left:var(--ui115-sidebar)!important;height:var(--ui115-topbar)!important;padding:5px 12px!important;border-bottom:1px solid var(--ui115-line)!important;box-shadow:none!important}
  #mainContent{margin-left:var(--ui115-sidebar)!important;padding:10px 12px 22px!important;background:var(--ui115-bg)!important}
  .page-title{min-height:42px!important;margin:0 0 7px!important;padding:0!important}.page-title h1{font-size:1.15rem!important}.page-title p{font-size:.72rem!important}
  button.primary,button.quiet,.primary,.quiet,.tab-button,.segmented button{min-height:42px!important;padding:8px 12px!important;border-radius:3px!important;font-size:.75rem!important}
  .form-card,.overview-panel,.trend-panel,.station-card,.role-dashboard-panel,.operation-submit-panel,.operation-inbox-panel,.recognition-dialog,.password-dialog{border:1px solid var(--ui115-line)!important;border-radius:4px!important;box-shadow:0 1px 3px #142f4a0a!important}
  .form-card,.form-card.compact,.panel{padding:10px!important;margin-bottom:8px!important}.form-card h2,.form-card h3{color:#18324f!important}.form-card label{font-size:.7rem!important}
  .form-card input,.form-card select,.form-card textarea,.panel input,.panel select,.panel textarea{min-height:42px!important;border-radius:3px!important;background:#fff!important;font-size:.75rem!important}
  .data-table th,.sheet-table th{background:var(--ui115-head)!important;font-size:.7rem!important;padding:6px 8px!important}.data-table td,.sheet-table td{font-size:.73rem!important;padding:6px 8px!important}
  
  
  .role-station-table-head,.role-station-mini{grid-template-columns:minmax(180px,.9fr) minmax(330px,1.45fr) minmax(390px,1.6fr) 30px!important}.role-station-table-head{font-size:.7rem!important}.role-station-table-head small{font-size:.61rem!important}
  .station-main-title strong{font-size:.82rem!important}.station-main-title small{font-size:.67rem!important}.station-main-sales b{font-size:.75rem!important}.station-tank-line{grid-template-columns:65px minmax(90px,1fr) minmax(128px,.9fr)!important}.station-tank-name{font-size:.67rem!important}
  .work-status-cell{min-height:50px!important}.work-status-cell span{font-size:.64rem!important}.work-status-cell b{font-size:.71rem!important}.work-status-cell.done{background:var(--ui115-green-bg)!important;color:#0f7042!important;border-color:#b9e1ca!important}.work-status-cell.warn{background:var(--ui115-amber-bg)!important;color:#925700!important;border-color:#ecd299!important}.work-status-cell.missing,.work-status-cell.danger{background:var(--ui115-red-bg)!important;color:var(--ui115-red)!important;border-color:#efbbb7!important}
  
  .dense-record-row.dense-record-row{padding:6px 9px!important;border-radius:0!important;box-shadow:none!important}.dense-record-row .station-head strong{font-size:.75rem!important}.dense-record-row .amount-row{font-size:.69rem!important}
}
@media(max-width:1190px) and (min-width:960px){
  .role-station-table-head,.role-station-mini{grid-template-columns:minmax(160px,.8fr) minmax(270px,1.2fr) minmax(330px,1.5fr) 28px!important}
}
@media(max-width:959px){
  #mainContent{padding:10px 9px 78px!important}.page-title{min-height:44px!important;margin-bottom:8px!important}.page-title h1{font-size:1.18rem!important}.page-title p{font-size:.73rem!important}
  .message-workspace,.document-workspace,.ledger-workspace{grid-template-columns:1fr!important}.dense-record-head{display:none!important}.dense-record-row.dense-record-row{display:block!important;border-radius:8px!important;margin-bottom:7px!important;padding:12px!important}
  .form-card input,.form-card select,.form-card textarea,.panel input,.panel select,.panel textarea{min-height:48px!important;font-size:16px!important}
  button.primary,button.quiet,.primary,.quiet{min-height:46px!important}.quick-upload-bar{min-height:62px!important;padding:0 0 env(safe-area-inset-bottom)!important;gap:0!important}.quick-bar-btn{min-height:62px!important;border:0!important;border-radius:0!important}
  .work-status-cell.warn{background:var(--ui115-amber-bg)!important;color:var(--ui115-amber)!important;border-color:#efd59f!important}.work-status-cell.danger{background:var(--ui115-red-bg)!important;color:var(--ui115-red)!important;border-color:#efbbb7!important}
}


/* ═══ v1.0.16 재고·탱크 안전 개편 — inventory view에만 범위를 제한한다 ═══ */
.inventory-view .inventory-context-bar{display:grid;grid-template-columns:minmax(210px,260px) 1fr auto;align-items:end;gap:10px;margin:0 0 8px;padding:9px 10px;border:1px solid var(--ui115-line,#d7e0e9);background:#fff;border-radius:4px}.inventory-view .inventory-context-bar label{display:grid;gap:4px;font-size:.7rem;color:#536779}.inventory-view .inventory-context-copy{display:grid;gap:2px;align-self:center}.inventory-view .inventory-context-copy strong{font-size:.85rem;color:#18324f}.inventory-view .inventory-context-copy small{font-size:.68rem;color:#6b7b8c}.inventory-view .inventory-context-bar select{min-height:42px}
.inventory-view .tank-entry-grid{grid-template-columns:repeat(3,minmax(155px,1fr))}.inventory-view .tank-entry-grid .wide-field{grid-column:span 2}.inventory-view .form-help{margin:4px 0 0;color:#6b7b8c;font-size:.68rem}.inventory-view .empty-card{min-height:auto!important;padding:10px!important;border:1px dashed #cdd7e2!important;border-radius:3px!important;background:#f9fbfd!important;color:#66778a!important;font-size:.72rem!important}
.inventory-view .tank-record-head,.inventory-view .tank-record-row{display:grid;grid-template-columns:minmax(145px,1.05fr) minmax(165px,1.18fr) minmax(175px,1.25fr) minmax(145px,1fr) minmax(125px,.9fr) minmax(205px,1.25fr);gap:0;align-items:stretch}.inventory-view .tank-record-head{border:1px solid #d7e0e9;border-bottom:0;background:#eef3f8;color:#38516a;font-size:.68rem;font-weight:800}.inventory-view .tank-record-head span{padding:7px 8px;border-right:1px solid #d7e0e9}.inventory-view .tank-record-row{border:1px solid #d7e0e9;border-bottom:0;background:#fff;font-size:.7rem}.inventory-view .tank-record-row:last-child{border-bottom:1px solid #d7e0e9}.inventory-view .tank-record-row>div{min-width:0;padding:7px 8px;border-right:1px solid #e4e9ef;display:flex;flex-direction:column;justify-content:center;gap:3px}.inventory-view .tank-record-row>div:last-child{border-right:0}.inventory-view .tank-record-row.warning{box-shadow:inset 3px 0 #e0a020}.inventory-view .tank-record-row.problem{box-shadow:inset 3px 0 #c0392b}.inventory-view .tank-ident strong{font-size:.77rem;color:#18324f}.inventory-view .tank-ledger b{font-size:.65rem}.inventory-view .balance-ok{color:#147a4c}.inventory-view .balance-warning{color:#c0392b}.inventory-view .tank-level i{display:block;height:8px;border-radius:2px;background:#e9eef4;overflow:hidden}.inventory-view .tank-level i em{display:block;height:100%;min-width:0}.inventory-view .tank-level small,.inventory-view .tank-threshold small,.inventory-view .tank-reading-meta small{color:#6b7b8c;font-size:.63rem}.inventory-view .tank-actions{display:grid!important;grid-template-columns:auto 1fr 1fr;align-content:center;gap:5px!important}.inventory-view .tank-actions .tank-adjust{grid-column:2/4}.inventory-view .tank-actions button{min-height:36px!important;padding:5px 7px!important;font-size:.67rem!important}
.inventory-dialog{width:min(760px,calc(100vw - 28px));border:1px solid #cbd5df;border-radius:5px;padding:14px}.inventory-dialog::backdrop{background:#10243a80}.inventory-adjust-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;padding:8px;border:1px solid #d7e0e9;background:#f7f9fc}.inventory-adjust-summary span{display:grid;gap:2px;font-size:.68rem}.inventory-adjust-summary strong{font-size:.76rem;color:#18324f}
@media(max-width:959px){.inventory-view .inventory-context-bar{grid-template-columns:1fr;align-items:stretch}.inventory-view .inventory-context-bar button{width:100%}.inventory-view .tank-entry-grid{grid-template-columns:1fr}.inventory-view .tank-entry-grid .wide-field{grid-column:auto}.inventory-view .tank-record-head{display:none}.inventory-view .tank-record-row{grid-template-columns:1fr 1fr;margin:0 0 8px;border:1px solid #d7e0e9!important;border-radius:7px}.inventory-view .tank-record-row>div{border-right:0;border-bottom:1px solid #edf1f5;padding:9px}.inventory-view .tank-record-row>div:nth-last-child(-n+2){border-bottom:0}.inventory-view .tank-actions{grid-column:1/-1}.inventory-view .tank-actions button{min-height:46px!important}.inventory-adjust-summary{grid-template-columns:1fr}.inventory-dialog{padding:11px}.inventory-dialog .form-grid{grid-template-columns:1fr}}

/* ═══ v1.0.78 — 재고 현황 목록(품목별). 탱크 표와 같은 톤: 칸 구분선·정렬·상태 줄무늬 ═══
   구조는 그대로(.dense-record-row.inventory-record-row 안에 station-head / amount-row.inventory-balance /
   forecast-note / inline-settings 4칸). 여기서 '보기'만 손본다. #inventoryCards 를 한 줄씩 세로로
   쌓는 건 위 v1.0.53 블록에 추가해 뒀다(그게 깨짐의 원인이었음). */
.inventory-view #inventoryCards{ border:1px solid #d7e0e9; border-radius:6px; overflow:hidden; background:#fff; }
.inventory-view .inventory-record-head,
.inventory-view .inventory-record-row{
  grid-template-columns:minmax(150px,.95fr) minmax(220px,1.25fr) minmax(200px,1.35fr) minmax(250px,1.5fr) !important;
  align-items:stretch !important;
}
.inventory-view .inventory-record-head{
  background:#eef3f8; color:#38516a; font-size:.68rem; font-weight:800; border-bottom:1px solid #d7e0e9;
}
.inventory-view .inventory-record-head span{ padding:8px 10px; border-right:1px solid #dce4ec; }
.inventory-view .inventory-record-head span:last-child{ border-right:0; }

.inventory-view .inventory-record-row{
  border:0 !important; border-bottom:1px solid #e9edf2 !important; border-radius:0 !important;
  box-shadow:none !important; background:#fff !important; margin:0 !important; padding:0 !important;
  min-height:0 !important; font-size:.72rem; transition:background .12s;
}
.inventory-view #inventoryCards .inventory-record-row:last-child{ border-bottom:0 !important; }
.inventory-view .inventory-record-row:hover{ background:#f7fafd !important; }
.inventory-view .inventory-record-row.warning{ box-shadow:inset 3px 0 #e0a020 !important; }
.inventory-view .inventory-record-row.problem{ box-shadow:inset 3px 0 #c0392b !important; }

.inventory-view .inventory-record-row > *{
  min-width:0; margin:0 !important; padding:9px 10px !important;
  border-right:1px solid #eef1f5;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.inventory-view .inventory-record-row > *:last-child{ border-right:0; }

/* 1칸 — 품목 + 상태 배지 */
.inventory-view .inventory-record-row .station-head{ align-items:flex-start !important; gap:5px; }
.inventory-view .inventory-record-row .station-head strong{ font-size:.8rem !important; color:#18324f; white-space:normal; }
.inventory-view .inventory-record-row .station-head .badge{ font-size:.58rem; padding:2px 7px; font-weight:800; }

/* 2칸 — 장부 · 실측 · 차이 · 입고예정 : 한 줄에 하나씩 */
.inventory-view .inventory-record-row .inventory-balance{
  flex-direction:column !important; align-items:flex-start; gap:3px !important;
  font-size:.7rem !important; color:#54687c;
}
.inventory-view .inventory-record-row .inventory-balance .balance-warning{ color:#c0392b; font-weight:700; }

/* 3칸 — 예측 : 회색 알약 말고 조용한 본문 */
.inventory-view .inventory-record-row .forecast-note{
  background:none !important; padding:0 !important; border-radius:0 !important; margin:0 !important;
  color:#6b7b8c; font-size:.67rem !important; line-height:1.45 !important;
}

/* 4칸 — 설정 · 조정 : 2×2 (안전재고 | 판매단가 / 저장 | 재고조정) */
.inventory-view .inventory-record-row .inline-settings{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:5px 6px !important;
  align-items:end !important; margin:0 !important;
}
.inventory-view .inventory-record-row .inline-settings label{ font-size:.58rem; color:#5a6b7d; gap:2px; }
.inventory-view .inventory-record-row .inline-settings input{
  min-height:32px; width:100%; box-sizing:border-box;
  border:1px solid #cdd8e3; border-radius:5px; padding:4px 7px; font-size:.72rem;
}
.inventory-view .inventory-record-row .inline-settings button{
  min-height:32px !important; padding:4px 8px !important; font-size:.64rem !important;
}
.inventory-view .inventory-record-row .inline-settings .item-settings-save{ grid-column:1; }
.inventory-view .inventory-record-row .inline-settings .stock-adjust-open{ grid-column:2; }
.inventory-view .inventory-record-row .form-help{ color:#8a97a6; font-size:.66rem; }

@media(max-width:959px){
  .inventory-view .inventory-record-head{ display:none; }
  .inventory-view .inventory-record-row{
    grid-template-columns:1fr 1fr !important; margin:0 0 8px !important;
    border:1px solid #d7e0e9 !important; border-radius:8px !important;
  }
  .inventory-view .inventory-record-row > *{ border-right:0; border-bottom:1px solid #edf1f5; }
  .inventory-view .inventory-record-row .station-head{ grid-column:1/-1; }
  .inventory-view .inventory-record-row .inline-settings{ grid-column:1/-1; }
  .inventory-view .inventory-record-row > *:nth-last-child(-n+1){ border-bottom:0; }
}


/* ═══ v1.0.17 연결형 대시보드 · 소장 상세 · 고정 상단바 설정 ═══ */
:root{--ui117-topbar-size:42px;--ui117-menu-font:14px;--ui117-body-font:14px;--ui117-gap:6px;--ui115-topbar:var(--ui117-topbar-size)}
@media(min-width:960px){
  body{font-size:var(--ui117-body-font)!important}
  .topbar{height:var(--ui117-topbar-size)!important;min-height:var(--ui117-topbar-size)!important;padding:3px 9px!important;position:fixed!important;top:0!important;right:0!important;z-index:80!important;overflow:visible!important}
  .topbar-left{gap:7px!important;min-width:0}.topbar-title{min-width:132px}.topbar-title strong{font-size:.78rem!important}.topbar-title small{font-size:.58rem!important}
  .history-nav{display:flex;align-items:center;gap:3px;flex:none}.top-nav-button{height:32px;min-height:32px!important;padding:4px 8px!important;border:1px solid #cfd9e5;border-radius:3px;background:#fff;color:#173650;font-size:.68rem;font-weight:800;white-space:nowrap}.top-nav-button.home{background:#edf4ff;color:#115ac6;border-color:#bdd3f3}
  .admin-role-preview{height:32px!important;gap:3px!important}.admin-role-preview span{font-size:.6rem!important}.admin-role-preview select{height:32px!important;min-height:32px!important;padding:3px 6px!important}
  .top-actions{gap:3px!important;flex-wrap:nowrap!important;min-width:0}.top-actions>.quiet{height:32px!important;min-height:32px!important;padding:4px 7px!important;font-size:.66rem!important}
  .ui-setting-cluster{display:flex;align-items:center;gap:3px;flex:none}.ui-setting-cluster label{height:32px;display:flex;align-items:center;gap:3px;padding:2px 4px;border:1px solid #d4dde7;border-radius:3px;background:#fff;white-space:nowrap}.ui-setting-cluster label>span{font-size:.56rem;color:#53677e;font-weight:800}.ui-setting-cluster select{height:26px!important;min-height:26px!important;width:66px;padding:1px 18px 1px 5px!important;border:0!important;background:#f7f9fc;font-size:.62rem!important;font-weight:800}.ui-setting-cluster .data-mode-setting select{width:78px}
  .demo-data-badge{height:26px;display:inline-flex;align-items:center;padding:0 7px;border:1px solid #e6b95f;background:#fff5d9;color:#8b5a00;border-radius:3px;font-size:.58rem;font-weight:900;white-space:nowrap}
  #mainContent{padding:calc(var(--ui117-topbar-size) + var(--ui117-gap)) var(--ui117-gap) 18px!important;margin-top:0!important}
  .sidebar-nav,.role-nav-item,.role-nav-group-head{font-size:var(--ui117-menu-font)!important}.sidebar-brand{min-height:42px!important;margin-bottom:4px!important;padding-bottom:5px!important}
  .target-dashboard-top,.target-dashboard-board,.target-dashboard-lower,.target-insight-grid,.target-bottom-grid,.manager-dashboard-main,.manager-dashboard-insights,.overview-dashboard-grid{gap:var(--ui117-gap)!important;margin-bottom:var(--ui117-gap)!important}
  
  .target-panel,.role-dashboard-panel,.overview-panel{margin-bottom:var(--ui117-gap)!important}
  
  
  .station-fuel-summary{margin-top:var(--ui117-gap)!important}.station-fuel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;border-top:1px solid #e1e7ee}.station-fuel-card{text-align:left;padding:7px 9px;border:0;border-right:1px solid #e1e7ee;border-bottom:1px solid #e1e7ee;background:#fff;display:grid;gap:5px}.station-fuel-card:hover{background:#f7faff}.station-fuel-card>strong{font-size:.72rem;color:#17314e}.station-fuel-line{display:grid;grid-template-columns:54px 1fr 132px;align-items:center;gap:5px}.station-fuel-line>b{font-size:.61rem}.station-fuel-line>i{height:7px;background:#e6edf3;border-radius:2px;overflow:hidden}.station-fuel-line>i>em{display:block;height:100%}.station-fuel-line>small{font-size:.56rem;color:#667a90;text-align:right}.station-fuel-line.risk small,.station-fuel-line.risk b{color:#bd3028;font-weight:800}
  .overview-panel{scroll-margin-top:calc(var(--ui117-topbar-size) + 8px)!important;padding:8px!important}.overview-kpis{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:4px!important}.overview-kpis article{min-height:52px!important;padding:6px 8px!important;border-radius:3px!important}.overview-kpis span{font-size:.6rem!important}.overview-kpis strong{font-size:.83rem!important}.overview-dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr .95fr}.overview-dashboard-grid>section{border:1px solid #d5dee8;background:#fff;border-radius:4px;min-width:0}.station-detail-link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:7px}.station-detail-link-grid button{min-height:55px;border:1px solid #dbe3ec;background:#f9fbfd;border-radius:3px;text-align:left;padding:6px 8px;display:grid;gap:2px}.station-detail-link-grid b{font-size:.68rem;color:#17314e}.station-detail-link-grid span{font-size:.56rem;color:#6d7e90}
}
@media(max-width:1320px) and (min-width:960px){.ui-setting-cluster label>span{display:none}.ui-setting-cluster select{width:60px}.demo-data-badge{display:none}.topbar-title{display:none}.overview-dashboard-grid{grid-template-columns:1fr 1fr}.station-detail-links{grid-column:1/-1}}
@media(max-width:959px){.history-nav,.ui-setting-cluster,.demo-data-badge{display:none!important}.overview-dashboard-grid{display:block}.overview-dashboard-grid>section{margin-bottom:8px}.station-fuel-grid{grid-template-columns:1fr}}

@media(min-width:960px){
  
  [data-view="dashboard"].station-detail-mode>.page-title,[data-view="dashboard"].station-detail-mode>#salesTrendPanel,[data-view="dashboard"].station-detail-mode>#dashboardSummary,[data-view="dashboard"].station-detail-mode>#stationCards,[data-view="dashboard"].station-detail-mode>#reportStatusPanel,[data-view="dashboard"].station-detail-mode>#tankBoardPanel{display:none!important}
  [data-view="dashboard"].station-detail-mode>#stationOverview{display:block!important;margin:0!important}
}


/* ═══ v1.0.18 안정형 상단바 · 단일업무 미니대시보드 · 관리자 운영보드 ═══ */
@media(min-width:960px){
  .topbar{display:flex!important;align-items:center!important;gap:6px!important;height:var(--ui117-topbar-size)!important;padding:3px 8px!important;box-sizing:border-box!important;white-space:nowrap!important}
  .topbar-left{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important;overflow:visible!important;max-width:none!important}
  .topbar-title{display:none!important}
  .history-nav{height:30px!important;display:flex!important;align-items:center!important;gap:3px!important}
  .top-nav-button{height:30px!important;min-height:30px!important;padding:3px 8px!important;font-size:.66rem!important;line-height:1!important;box-sizing:border-box!important}
  .admin-role-preview{flex:0 0 auto!important;height:30px!important;padding:2px 4px!important}
  .admin-role-preview select{height:26px!important;min-height:26px!important;max-width:118px!important;padding:1px 20px 1px 5px!important;font-size:.61rem!important}
  .top-actions{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;min-width:0!important;overflow:visible!important}
  .ui-setting-cluster{display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important}
  .ui-setting-cluster label{height:30px!important;min-height:30px!important;padding:1px 3px!important;box-sizing:border-box!important}
  .ui-setting-cluster select{height:24px!important;min-height:24px!important;width:62px!important;padding:1px 17px 1px 4px!important;font-size:.6rem!important}
  .ui-setting-cluster .data-mode-setting select{width:74px!important}
  .top-actions>.quiet{height:30px!important;min-height:30px!important;padding:3px 6px!important;font-size:.63rem!important}
  .demo-data-badge{height:24px!important;padding:0 5px!important}
  .app-runtime-message{max-width:230px;overflow:hidden;text-overflow:ellipsis;border:1px solid #efc6c2;background:#fff3f2;color:#a12620;padding:4px 7px;border-radius:3px;font-size:.58rem;font-weight:800}
  #mainContent{padding-top:calc(var(--ui117-topbar-size) + var(--ui117-gap))!important}

  
  
  
  
  
  

  .menu-context-strip{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(420px,2fr) auto;align-items:stretch;gap:var(--ui117-gap);margin:0 0 var(--ui117-gap);border:1px solid #d5dee8;background:#fff;min-height:54px}
  .menu-context-title{padding:6px 9px;border-left:4px solid #1768e8;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-content:center}
  .menu-context-title>span{grid-row:1/3;align-self:center;font-size:.55rem;color:#1768e8;font-weight:900}
  .menu-context-title>strong{font-size:.76rem;color:#17314e;line-height:1.1}
  .menu-context-title>small{font-size:.55rem;color:#718195;white-space:normal;line-height:1.2}
  .menu-context-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid #e3e9ef}
  .menu-context-kpis article{padding:6px 9px;border-right:1px solid #e3e9ef;display:grid;align-content:center;gap:2px}
  .menu-context-kpis span{font-size:.53rem;color:#718195;font-weight:800}
  .menu-context-kpis strong{font-size:.65rem;color:#203b58;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-context-home{margin:6px;border:1px solid #bfd1e6;background:#f3f7fc;color:#145aa8;border-radius:3px;padding:0 10px;font-size:.62rem;font-weight:900;white-space:nowrap}

  
  
  
  
  
  

  [data-manage-pane],[data-inventory-pane],[data-system-pane]{scroll-margin-top:calc(var(--ui117-topbar-size) + 8px)}
}
@media(max-width:1480px) and (min-width:960px){
  .ui-setting-cluster label>span{display:none!important}.ui-setting-cluster select{width:56px!important}.ui-setting-cluster .data-mode-setting select{width:68px!important}
  .top-actions>.app-install-button,.top-actions>#passwordButton{display:none!important}
  .admin-role-preview span{display:none!important}
}
@media(max-width:1180px) and (min-width:960px){
  .top-actions>#globalSearchButton{display:none!important}.demo-data-badge{display:none!important}
  .menu-context-strip{grid-template-columns:1fr auto}.menu-context-kpis{display:none}
}
/* v1.0.75 — 폰에서 메뉴 요약을 감추던 규칙을 뺐다. 아래 '메뉴 위 요약을 막대로' 에서
   폰 전용으로 다시 그린다(폰에서도 메뉴마다 요약이 보여야 한다). */
@media(max-width:959px){.app-runtime-message{display:none!important}}
@media(min-width:960px){
  
  
  
  
  
  
  
}
@media(max-width:1500px) and (min-width:960px){}

/* ======================================================================
   v1.0.20 ROLE DASHBOARD MASTER THEME
   확정 시안: 진한 네이비 상단/좌측, 홈-뒤로-앞으로, 고밀도 한 화면 대시보드,
   좌측 하단 사진 촬영/파일 업로드 상시 유지
   ====================================================================== */
:root{
  --v119-navy:#062a51;
  --v119-navy-2:#0a365f;
  --v119-blue:#0879f8;
  --v119-blue-soft:#eaf3ff;
  --v119-bg:#f4f7fb;
  --v119-panel:#fff;
  --v119-line:#dbe4ef;
  --v119-text:#102845;
  --v119-muted:#6d7c91;
  --v119-green:#1c9a55;
  --v119-orange:#f59e0b;
  --v119-red:#ef4444;
  --v119-sidebar:220px;
  --v119-topbar:var(--ui117-topbar-size,44px);
  --ui119-topbar-font:14px;
}

@media (min-width:960px){
  html,body{height:100%;background:var(--v119-bg)!important;}
  body{overflow:hidden!important;color:var(--v119-text)!important;}
  #appView{height:100vh!important;overflow:hidden!important;background:var(--v119-bg)!important;}

  /* ---------- fixed top bar ---------- */
  body .topbar.topbar-v119{
    position:fixed!important;inset:0 0 auto 0!important;
    width:100%!important;height:var(--v119-topbar)!important;min-height:var(--v119-topbar)!important;
    margin:0!important;padding:0 14px 0 12px!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important;
    background:linear-gradient(90deg,#06284d 0%,#07335e 54%,#06284d 100%)!important;
    color:#fff!important;border:0!important;border-bottom:1px solid #051d39!important;
    box-shadow:0 2px 8px rgba(1,26,52,.18)!important;z-index:300!important;overflow:hidden!important;
    font-size:var(--ui119-topbar-font)!important;
  }
  .topbar-brand-v119{height:100%;min-width:245px;display:flex;align-items:center;gap:8px;color:#fff;white-space:nowrap;flex:0 0 auto;}
  .topbar-brand-v119 .topbar-brand-drop{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:800;transform:none;}
  .topbar-brand-v119 strong{font-size:calc(var(--ui119-topbar-font) + 3px)!important;font-weight:900!important;letter-spacing:-.4px;}
  .topbar-brand-v119 small{font-size:10px!important;padding:2px 5px;border-radius:3px;background:#fff;color:#31465e;font-weight:800;}
  body .topbar .topbar-left{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important;min-width:0!important;margin:0!important;padding:0!important;background:transparent!important;}
  body .topbar .topbar-title,body .topbar .crumb{display:none!important;}
  body .topbar .history-nav{display:flex!important;align-items:center!important;gap:4px!important;height:100%!important;background:transparent!important;margin:0!important;padding:0!important;}
  body .topbar #navHome,body .topbar #navBack,body .topbar #navForward{
    min-width:70px!important;height:calc(var(--v119-topbar) - 10px)!important;min-height:30px!important;margin:0!important;padding:0 12px!important;
    border:1px solid rgba(255,255,255,.22)!important;border-radius:4px!important;background:rgba(2,28,56,.28)!important;color:#fff!important;
    font-size:var(--ui119-topbar-font)!important;font-weight:900!important;line-height:1!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
  }
  body .topbar #navHome:hover,body .topbar #navBack:hover,body .topbar #navForward:hover{background:#0d4c84!important;}
  body .topbar #navHome{order:1} body .topbar #navBack{order:2} body .topbar #navForward{order:3}

  body .topbar #adminRolePreview{height:calc(var(--v119-topbar) - 10px)!important;display:flex;align-items:center;gap:4px;padding:0 5px!important;margin:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:4px!important;background:rgba(255,255,255,.08)!important;}
  body .topbar #adminRolePreview[hidden]{display:none!important;}
  body .topbar #adminRolePreview>span{color:#eaf4ff!important;font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:800!important;}
  body .topbar #adminRolePreview select{height:28px!important;border:1px solid #bdcfe0!important;border-radius:3px!important;background:#fff!important;color:#173653!important;font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:800!important;padding:0 24px 0 7px!important;}

  body .topbar .top-actions{display:flex!important;align-items:center!important;gap:4px!important;flex:1 1 auto!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;background:transparent!important;overflow:hidden!important;}
  body .topbar .ui-setting-cluster{display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important;background:transparent!important;margin:0!important;padding:0!important;}
  body .topbar .ui-setting-cluster label{height:calc(var(--v119-topbar) - 10px)!important;display:flex!important;align-items:center!important;gap:4px!important;padding:0 5px!important;margin:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:4px!important;background:rgba(255,255,255,.08)!important;box-sizing:border-box!important;color:#fff!important;}
  body .topbar .ui-setting-cluster label>span{color:#edf6ff!important;font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:800!important;white-space:nowrap!important;}
  body .topbar .ui-setting-cluster input[type="number"]{width:38px!important;min-width:38px!important;max-width:38px!important;height:27px!important;min-height:27px!important;padding:0 2px!important;margin:0!important;border:1px solid #b8cce0!important;border-radius:3px!important;background:#fff!important;color:#173b5d!important;text-align:center!important;font-size:var(--ui119-topbar-font)!important;font-weight:900!important;appearance:textfield!important;-moz-appearance:textfield!important;}
  body .topbar .ui-setting-cluster input[type="number"]::-webkit-inner-spin-button,body .topbar .ui-setting-cluster input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  body .topbar .data-mode-setting select{height:27px!important;min-height:27px!important;width:76px!important;padding:0 20px 0 6px!important;border:1px solid #b8cce0!important;border-radius:3px!important;background:#fff!important;color:#173b5d!important;font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:800!important;}
  body .topbar .demo-data-badge{height:28px;display:inline-flex;align-items:center;padding:0 7px;border-radius:4px;background:#ffda73!important;color:#654500!important;font-size:calc(var(--ui119-topbar-font) - 2px)!important;font-weight:900!important;white-space:nowrap;}
  body .topbar .topbar-right-start{margin-left:auto!important;}
  body .topbar #notificationButton,body .topbar #globalSearchButton,body .topbar .app-install-button,body .topbar #passwordButton,body .topbar #logoutButton{
    height:30px!important;min-height:30px!important;padding:0 6px!important;margin:0!important;border:0!important;border-radius:3px!important;background:transparent!important;color:#f4f8ff!important;font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:900!important;white-space:nowrap!important;}
  body .topbar #notificationButton:hover,body .topbar #globalSearchButton:hover,body .topbar .app-install-button:hover,body .topbar #passwordButton:hover,body .topbar #logoutButton:hover{background:rgba(255,255,255,.1)!important;}
  .topbar-user-v119{min-width:108px;max-width:155px;height:calc(var(--v119-topbar) - 8px);display:grid;align-content:center;gap:0;padding:0 8px;border-left:1px solid rgba(255,255,255,.18);color:#fff;line-height:1.05;}
  .topbar-user-v119 span{font-size:calc(var(--ui119-topbar-font) - 1px)!important;font-weight:900!important;color:#fff!important;}
  .topbar-user-v119 strong{font-size:calc(var(--ui119-topbar-font) - 3px)!important;font-weight:700!important;color:#d6e7f6!important;overflow:hidden;text-overflow:ellipsis;}

  /* ---------- left menu ---------- */
  body .sidebar-nav{
    position:fixed!important;top:var(--v119-topbar)!important;left:0!important;bottom:0!important;width:var(--v119-sidebar)!important;height:auto!important;
    margin:0!important;padding:8px 8px 152px!important;box-sizing:border-box!important;background:linear-gradient(180deg,#062b52 0%,#062547 100%)!important;
    border-right:1px solid #0b3a68!important;z-index:210!important;overflow:hidden!important;color:#fff!important;
  }
  body .sidebar-nav .sidebar-brand{display:none!important;}
  body .role-menu-root{height:100%;overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin;}
  
  
  
  
  
  
  
  
  
  .nav-badge{margin-left:auto!important;background:#e83b3b!important;color:#fff!important;}
  body .quick-upload{position:absolute!important;left:8px!important;right:8px!important;bottom:9px!important;display:grid!important;gap:6px!important;padding:0!important;margin:0!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.13)!important;padding-top:8px!important;z-index:5!important;}
  body .quick-upload .quick-btn{min-height:58px!important;border:0!important;border-radius:4px!important;padding:7px 8px!important;display:grid!important;grid-template-columns:28px 1fr!important;align-items:center!important;gap:5px!important;color:#fff!important;text-align:left!important;box-shadow:none!important;}
  body .quick-upload .quick-btn.camera{background:linear-gradient(135deg,#7a35d4,#8738df)!important;}
  body .quick-upload .quick-btn.file{background:linear-gradient(135deg,#0876ef,#137ff7)!important;}
  body .quick-upload .quick-icon{font-size:17px!important;}
  body .quick-upload strong{font-size:calc(var(--ui117-menu-font) + 1px)!important;font-weight:900!important;color:#fff!important;}
  body .quick-upload small{display:block;color:#e7f1ff!important;font-size:calc(var(--ui117-menu-font) - 3px)!important;line-height:1.2;}

  /* ---------- main shell ---------- */
  body #mainContent{position:fixed!important;top:var(--v119-topbar)!important;left:var(--v119-sidebar)!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;padding:8px 10px!important;box-sizing:border-box!important;background:var(--v119-bg)!important;overflow-y:auto!important;overflow-x:hidden!important;font-size:var(--ui117-body-font)!important;}
  body #menuContextStrip{margin-bottom:4px!important;}
  body .page-title{margin:0 0 6px!important;min-height:34px!important;align-items:center!important;}
  body .page-title h1{font-size:calc(var(--ui117-body-font) + 5px)!important;margin:0!important;}
  body .page-title p{font-size:calc(var(--ui117-body-font) - 2px)!important;margin:1px 0 0!important;}
  body .view{min-height:0!important;}

  /* ---------- v119 dashboard ---------- */
  [data-view="dashboard"]{height:100%!important;min-height:0!important;overflow:hidden!important;}
  [data-view="dashboard"]>.v119-hidden-title{display:none!important;}
  .v119-dashboard-host{height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important;}
  .v119-dashboard-hidden{display:none!important;}
  .v119-loading{height:100%;display:grid;place-items:center;color:var(--v119-muted);background:#fff;border:1px solid var(--v119-line);}
  
  
  
  
  
  
  .v119-titlebar>button,.v119-panel>header button{height:26px;border:1px solid #d1deec;border-radius:3px;background:#fff;color:#1769c5;font-size:calc(var(--ui117-body-font) - 2px);font-weight:800;padding:0 8px;}
  
  
  
  
  
  
  
  

  /* v1.0.69: 옛 대시보드 행/열 그리드(.v119-grid.ceo-main/.admin-top/.manager-main …)는 블럭 구조(.dblk-grid)로 대체 — 삭제. .v119-panel 등 패널 겉모습은 블럭도 그대로 씀. */
  .v119-panel{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--v119-line);border-radius:4px;background:#fff;overflow:hidden;box-shadow:0 1px 4px rgba(20,49,79,.03);}
  .v119-panel>header{height:31px;min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 8px;border-bottom:1px solid #e3eaf2;background:#fbfdff;box-sizing:border-box;}
  .v119-panel>header>span{display:flex;align-items:baseline;gap:6px;min-width:0;}
  .v119-panel>header small{font-size:calc(var(--ui117-body-font) - 4px);color:#6280a0;font-weight:800;white-space:nowrap;}
  .v119-panel>header strong{font-size:calc(var(--ui117-body-font) - 1px);color:#132f52;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  
  
  
  
  
  
  

  .v119-chart{height:100%;min-height:0;padding:7px 8px 5px;box-sizing:border-box;}
  .v119-chart-bars{height:100%;min-height:105px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid #dfe7ef;padding:5px 3px 17px;box-sizing:border-box;background:linear-gradient(to top,#fbfdff,#fff);}
  .v119-chart-bars>span{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:4px;}.v119-chart-bars i{display:block;width:72%;max-width:15px;background:linear-gradient(180deg,#6aa5f4,#2f78dc);border-radius:2px 2px 0 0;}.v119-chart-bars small{position:absolute;bottom:-15px;font-size:9px;color:#7a8999;white-space:nowrap;}

  
  
  
  

  

  
  

  
  
  .v119-empty{min-height:52px;display:grid;place-items:center;color:#74869a;font-size:calc(var(--ui117-body-font) - 3px);padding:8px}.v119-empty.ok{color:#16894c}.v119-empty.bad{color:#de3f38;background:#fff5f4}

  /* manager multi/smaller screen controlled scroll only when necessary */
  @media(max-height:850px){.v119-panel>header{height:28px;min-height:28px}}
  @media(max-width:1500px){.topbar-brand-v119{min-width:205px}.topbar-brand-v119 strong{font-size:14px!important}.topbar-user-v119{display:none!important}.ui-setting-cluster label>span{display:none!important}[data-view="dashboard"]{overflow:auto!important}.v119-dashboard-host{overflow:auto!important}}

  /* ---------- staff/work center visual family ---------- */
  html[data-ui-role="STAFF"] .desktop-workcenter{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px;overflow:hidden;}
  html[data-ui-role="STAFF"] .role-dashboard-head{display:none!important;}
  html[data-ui-role="STAFF"] .work-center-stats{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:6px!important;margin:0!important;}
  html[data-ui-role="STAFF"] .work-stat{height:72px!important;border:1px solid var(--v119-line)!important;border-radius:4px!important;background:#fff!important;padding:7px 9px!important;box-sizing:border-box!important;display:grid!important;align-content:center!important;gap:2px!important;}
  html[data-ui-role="STAFF"] .work-stat span{font-size:calc(var(--ui117-body-font) - 3px)!important;font-weight:800;color:#405a76}.work-stat strong{font-size:calc(var(--ui117-body-font) + 3px)!important;color:#102e50}.work-stat small{font-size:calc(var(--ui117-body-font) - 4px)!important;color:#728499}
  html[data-ui-role="STAFF"] .role-dashboard-grid{display:grid!important;grid-template-columns:1.4fr 1fr!important;gap:6px!important;min-height:0!important;overflow:hidden!important;}
  html[data-ui-role="STAFF"] .role-dashboard-panel{border:1px solid var(--v119-line)!important;border-radius:4px!important;background:#fff!important;box-shadow:none!important;min-height:0!important;overflow:hidden!important;}
  html[data-ui-role="STAFF"] .role-dashboard-primary{display:flex;flex-direction:column;}
  html[data-ui-role="STAFF"] .role-panel-head{min-height:31px!important;padding:4px 8px!important;border-bottom:1px solid #e4eaf1!important;background:#fbfdff!important;}
  html[data-ui-role="STAFF"] .role-panel-head h2{font-size:calc(var(--ui117-body-font) - 1px)!important;color:#143354!important;}
  html[data-ui-role="STAFF"] .role-panel-kicker{font-size:calc(var(--ui117-body-font) - 4px)!important;color:#69819a!important;}
  html[data-ui-role="STAFF"] .role-dashboard-side{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;min-height:0!important;}
  html[data-ui-role="STAFF"] .work-calendar-panel,html[data-ui-role="STAFF"] .role-quick-panel{margin:0!important;}
  html[data-ui-role="STAFF"] .work-shortcuts{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:6px!important;padding:7px!important;}
  html[data-ui-role="STAFF"] .work-shortcuts button{min-height:64px!important;border:1px solid #dce5ef!important;border-radius:4px!important;background:#fff!important;display:grid!important;place-content:center!important;text-align:center!important;gap:3px!important;}

  /* default one-screen rule; custom larger fonts/density naturally unlock main scrolling */
  html:not([style*="--ui117-body-font: 0px"]) [data-view="dashboard"]{scrollbar-width:thin;}
}

/* mobile remains field-first; only keep quick upload functionality, not desktop shell */
@media(max-width:959px){
  .topbar-brand-v119,.topbar-user-v119{display:none!important;}
}
@media(min-width:960px){
  
  
  
  
  
  
}

/* v1.0.20 ONE-SCREEN ROLE ROWS FINAL */
@media(min-width:960px){
  
  
  
}


/* v1.0.20 ROLE DASHBOARD FINAL — 확정 시안 실사이트 구현 */
@media(min-width:960px){
  :root{--v120-gap:7px;--v120-head:32px;}
  [data-view="dashboard"]{padding:0!important;overflow:hidden!important;background:#f4f7fb!important;}
  .v119-dashboard-host{height:calc(100vh - var(--v119-topbar))!important;padding:8px 10px 9px!important;box-sizing:border-box!important;overflow:hidden!important;}
  
  
  
  
  
  
  
  .v119-panel{min-height:0!important;overflow:hidden!important;border:1px solid #dbe4ef!important;border-radius:5px!important;background:#fff!important;box-shadow:0 1px 2px rgba(22,50,84,.02)!important;display:flex!important;flex-direction:column!important}.v119-panel>header{height:var(--v120-head)!important;min-height:var(--v120-head)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:4px 9px!important;box-sizing:border-box!important;border-bottom:1px solid #e7edf4!important;background:#fff!important}.v119-panel>header span{display:flex!important;align-items:baseline!important;gap:6px!important}.v119-panel>header small{font-size:9px!important;color:#7d8da0!important;font-weight:800!important}.v119-panel>header strong{font-size:13px!important;color:#153656!important}.v119-panel>header button{border:0!important;background:transparent!important;color:#1472da!important;font-size:10px!important;font-weight:900!important;padding:0!important;min-height:auto!important}

  
  .v120-sales-chart .v119-chart-bars{position:relative!important;overflow:hidden!important}.v120-sales-line{position:absolute!important;left:4px!important;right:4px!important;top:8px!important;bottom:18px!important;width:calc(100% - 8px)!important;height:calc(100% - 26px)!important;pointer-events:none!important;overflow:visible!important}.v120-sales-line polyline{fill:none!important;stroke:#199653!important;stroke-width:1.3!important;vector-effect:non-scaling-stroke!important}
  
  .station-card-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px 8px!important;font-size:9px!important}.station-card-metrics span:last-child{grid-column:1/3!important}.station-card-fuels{display:grid!important;gap:4px!important;align-content:center!important}.station-card-fuels>span{display:grid!important;grid-template-columns:55px 1fr 64px!important;align-items:center!important;gap:5px!important;font-size:8.7px!important}.station-card-fuels>span>b{font-size:9px!important}.station-card-fuels i{height:6px!important;border-radius:3px!important;background:#edf1f5!important;overflow:hidden!important}.station-card-fuels i em{display:block!important;height:100%!important;background:#20a05a!important}.station-card-fuels small{text-align:right!important;color:#687b8f!important}

  

  

  html[data-ui-role="STAFF"] .desktop-workcenter{height:calc(100vh - var(--v119-topbar))!important;padding:9px 10px!important;box-sizing:border-box!important;display:grid!important;grid-template-rows:82px minmax(0,1fr) 220px!important;gap:7px!important;overflow:hidden!important}.desktop-workcenter>.role-dashboard-head,html[data-ui-role="STAFF"] #workCenterPushRequired,html[data-ui-role="STAFF"] #workCenterBusiness,html[data-ui-role="STAFF"] #workCenterInsights,html[data-ui-role="STAFF"] .role-quick-panel{display:none!important}.html[data-ui-role="STAFF"] .role-dashboard-head{display:none!important}html[data-ui-role="STAFF"] .work-center-stats{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:7px!important}html[data-ui-role="STAFF"] .work-stat{height:82px!important;min-height:82px!important;border:1px solid #dbe4ef!important;border-radius:5px!important;background:#fff!important;padding:8px 10px!important}html[data-ui-role="STAFF"] .work-stat span{font-size:11px!important}html[data-ui-role="STAFF"] .work-stat strong{font-size:18px!important}html[data-ui-role="STAFF"] .work-stat small{font-size:9px!important}html[data-ui-role="STAFF"] .role-dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr)!important;gap:7px!important;min-height:0!important;overflow:hidden!important}html[data-ui-role="STAFF"] .role-dashboard-primary{height:100%!important;min-height:0!important}.v120-staff-board{height:100%!important;display:grid!important;grid-template-columns:1.05fr .82fr .82fr!important;grid-template-rows:1fr 1fr!important;gap:7px!important;padding:0!important}.v120-staff-board>section{border:1px solid #dbe4ef!important;border-radius:5px!important;background:#fff!important;overflow:hidden!important}.v120-staff-board>section>header{height:34px!important;display:flex!important;align-items:baseline!important;justify-content:space-between!important;padding:6px 9px!important;border-bottom:1px solid #e7edf4!important;box-sizing:border-box!important}.v120-staff-board>section>header strong{font-size:13px!important;color:#153656!important}.v120-staff-board>section>header small{font-size:9px!important;color:#74869a!important}.v120-staff-board .staff-quick{grid-row:1/3!important}.v120-staff-board .staff-quick>div{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(2,1fr)!important;gap:7px!important;padding:9px!important;height:calc(100% - 34px)!important;box-sizing:border-box!important}.v120-staff-board .staff-quick button{border:1px solid #dfe7ef!important;border-radius:5px!important;background:#fff!important;display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:30px auto auto!important;align-content:center!important;padding:8px!important;text-align:left!important;color:#173653!important}.v120-staff-board .staff-quick i{grid-column:1/3!important;font-style:normal!important;font-size:25px!important;color:#1872dc!important}.v120-staff-board .staff-quick b{font-size:12px!important}.v120-staff-board .staff-quick small{font-size:9px!important;color:#738398!important}.v120-staff-board .staff-quick em{grid-column:2!important;grid-row:2/4!important;font-size:18px!important;font-style:normal!important;color:#176bd1!important}.v120-staff-board .staff-summary>div{height:calc(100% - 34px)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;padding:8px!important;box-sizing:border-box!important}.v120-staff-board .staff-summary span{border:1px solid #e1e8f0!important;border-radius:4px!important;padding:8px!important;display:grid!important;align-content:center!important}.v120-staff-board .staff-summary small{font-size:9px!important;color:#728398!important}.v120-staff-board .staff-summary b{font-size:15px!important;color:#153656!important}.v120-staff-board .staff-summary b.ok{color:#178a4c!important}.v120-staff-board .staff-summary b.warn{color:#e48a00!important}.v120-staff-board .staff-summary b.bad{color:#e23e37!important}.v120-staff-board .staff-tanks>div{height:calc(100% - 34px)!important;display:grid!important;align-content:center!important;gap:8px!important;padding:8px!important;box-sizing:border-box!important}.v120-staff-board .staff-tanks button{border:0!important;background:#fff!important;display:grid!important;grid-template-columns:1fr 1fr 34px!important;align-items:center!important;gap:6px!important;text-align:left!important;color:#29445f!important}.v120-staff-board .staff-tanks span{display:grid!important}.v120-staff-board .staff-tanks b{font-size:10px!important}.v120-staff-board .staff-tanks small{font-size:8px!important;color:#728398!important}.v120-staff-board .staff-tanks i{height:7px!important;background:#edf1f5!important;border-radius:4px!important;overflow:hidden!important}.v120-staff-board .staff-tanks i em{display:block!important;height:100%!important;background:#239f59!important}.v120-staff-board .staff-tanks>div>button:nth-child(n+3) i em{background:#f3a019!important}.v120-staff-board .staff-today>div{height:calc(100% - 34px)!important;display:grid!important;align-content:start!important;overflow:hidden!important}.v120-staff-board .staff-today button{min-height:31px!important;display:grid!important;grid-template-columns:20px 1fr 52px!important;align-items:center!important;gap:5px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff!important;padding:4px 8px!important;text-align:left!important;color:#2a455f!important;font-size:9px!important}.v120-staff-board .staff-today button>b{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;background:#eef4fb!important;border-radius:2px!important}.v120-staff-board .staff-today em{font-style:normal!important;color:#74869a!important;text-align:right!important;font-size:8px!important}html[data-ui-role="STAFF"] .role-dashboard-side{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important;gap:7px!important;min-height:0!important}html[data-ui-role="STAFF"] .role-dashboard-panel{border:1px solid #dbe4ef!important;border-radius:5px!important;background:#fff!important;overflow:hidden!important}html[data-ui-role="STAFF"] .role-panel-head{height:34px!important;min-height:34px!important;padding:6px 9px!important}html[data-ui-role="STAFF"] .role-alert-row{min-height:32px!important}html[data-ui-role="STAFF"] .work-calendar-panel{margin:0!important;height:220px!important;overflow:hidden!important}
  @media(max-height:900px){.v119-dashboard-host{padding-top:6px!important}.station-card-fuels>span{grid-template-columns:46px 1fr 54px!important}}
}


/* v1.0.21 ROLE DASHBOARD REFINEMENT — v1.0.70: .v121-* 클래스 전부 미사용(v120StationCards·v121Sparkline 삭제)으로 제거. v121StationDailyRows 함수는 v123 가 재사용 중이라 유지. */

/* v1.0.22 BACKUP / RESTORE SPLIT */
.system-standalone-view { max-width: none; }

.system-standalone-view .system-status-message { margin: 0 0 8px; }
.system-standalone-view .system-work-card { margin: 0 0 8px; }
.system-standalone-view .backup-station-row { max-width: 360px; margin-bottom: 8px; }
.system-standalone-view .backup-choice { align-items: stretch; }
.system-standalone-view .backup-kind { height: 100%; }
@media (min-width: 1200px) {
  [data-view="backup"] .backup-choice { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:8px; }
  [data-view="restore"] .system-work-card { max-width:none; }
}

/* v1.0.30 — 백업/복구 화면 정체성 (2026-08-29)
   열자마자 "지키는 화면"인지 "되돌리는 화면"인지 색·아이콘·한 줄로 못 박는다. */
.screen-hero {
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  background:var(--card,#fff); margin-bottom:10px;
}
.screen-hero.protect { border-left:5px solid #1f9d58; }
.screen-hero.rewind  { border-left:5px solid #d64541; }
.screen-hero .hero-ico {
  width:44px; height:44px; flex:none; border-radius:12px;
  display:grid; place-items:center; font-size:1.35rem;
}
.screen-hero.protect .hero-ico { background:#e5f4ec; color:#1f8a4d; }
.screen-hero.rewind  .hero-ico { background:#fbe7e6; color:#c53a35; }
.screen-hero .hero-copy { flex:1; min-width:0; }
.screen-hero .hero-kind {
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#5a6675; display:block; margin-bottom:2px;
}
.screen-hero.protect .hero-kind b { color:#1f8a4d; }
.screen-hero.rewind  .hero-kind b { color:#c53a35; }
.screen-hero .hero-copy h1 { margin:0 0 3px; font-size:1.2rem; }
.screen-hero .hero-copy p { margin:0; font-size:.84rem; color:#5c6673; line-height:1.55; }
.screen-hero .hero-copy p b { color:#33404d; }
.screen-hero .hero-state {
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  text-align:right; max-width:230px;
}
.screen-hero .hero-state .system-status-message { margin:0; font-size:.74rem; color:#7a8593; }

.safe-line, .risk-line {
  display:flex; gap:9px; align-items:flex-start;
  border-radius:10px; padding:10px 13px; font-size:.82rem; line-height:1.55; margin-bottom:12px;
}
.safe-line { background:#e5f4ec; color:#1c7a45; }
.risk-line { background:#fbe7e6; color:#b83833; }
.risk-line b { white-space:nowrap; font-weight:800; }

.step-badge {
  display:inline-block; flex:none; font-size:.68rem; font-weight:800;
  letter-spacing:.04em; padding:5px 10px; border-radius:999px;
  background:#eef2f7; color:#4a586a; white-space:nowrap; margin-top:1px;
}
.step-no.danger { background:#d64541; }

.restore-run.danger-step {
  border:1px solid #f0c9c6; border-left:4px solid #d64541;
  border-radius:11px; padding:14px 15px 4px; margin-top:12px; background:#fffafa;
}
.restore-run.danger-step .step-head { margin-bottom:9px; }
#restoreBackup.danger, button.danger {
  background:#d64541; border:1px solid #c53a35; color:#fff; font-weight:700;
}
#restoreBackup.danger:hover, button.danger:hover { background:#c53a35; }






@media (max-width:720px){
  .screen-hero { flex-wrap:wrap; }
  .screen-hero .hero-state { align-items:flex-start; text-align:left; max-width:none; }
}


/* v1.0.23 GASONE CEO DASHBOARD */
@media (min-width:960px){
  .topbar-v119{background:linear-gradient(90deg,#062d58,#073b6c)!important;box-shadow:0 1px 4px rgba(5,34,63,.2)!important}
  .topbar-brand-v119 strong,.sidebar-brand-text{letter-spacing:-.25px!important}
  .topbar-brand-drop{color:#43a7ff!important}.sidebar-nav{background:linear-gradient(180deg,#092f57,#07345f 62%,#062b52)!important}
  .role-menu-root button.active{background:#1375e8!important;box-shadow:inset 3px 0 #79b9ff!important}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media(max-height:900px){}
}

/* v1.0.24 — 주유소 상세 탭 차트 전용 클래스.
   공용 .bar-track(표 안의 가로 진행바)와 충돌하지 않게 완전히 분리한다. */
#overviewChart.bar-chart {
  min-height: 230px;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 30px 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
#overviewChart .overview-bar-item {
  flex: 1 0 42px;
  min-width: 42px;
  max-width: 78px;
  display: grid;
  grid-template-rows: 24px 150px auto;
  gap: 5px;
  text-align: center;
}
#overviewChart .overview-bar-value {
  font-size: .6875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#overviewChart .overview-bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 150px;
  min-height: 150px;
  background: #eef4ff;
  border-radius: 6px 6px 2px 2px !important;
  overflow: hidden;
}
#overviewChart .overview-bar-track > span {
  width: 100%;
  min-height: 4px;
  display: block;
  background: linear-gradient(180deg,#528bff,var(--blue));
  border-radius: 5px 5px 0 0 !important;
  transition: height .18s ease;
}
#overviewChart .overview-bar-item > small {
  font-weight: 800;
  color: #475467;
  white-space: nowrap;
}
@media (max-width: 760px) {
  #overviewChart.bar-chart { min-height: 205px; }
  #overviewChart .overview-bar-item {
    grid-template-rows: 20px 125px auto;
    min-width: 34px;
  }
  #overviewChart .overview-bar-track {
    height: 125px;
    min-height: 125px;
  }
}


/* CALENDAR_WORKSPACE_V125 — 요청 범위: 달력/입고 일정만 */
.calendar-actionbar{display:flex;align-items:center;gap:8px;margin:7px 0;padding:7px 9px;border:1px solid #dbe5ef;border-radius:5px;background:#f7faff}.calendar-actionbar>div{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}.calendar-actionbar strong{font-size:12px;color:#173a5d}.calendar-actionbar span{font-size:10px;color:#66798d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-actionbar button{height:30px;padding:0 10px;font-size:11px;white-space:nowrap}.calendar-delivery-tools{border-color:#b9d4f3!important}.calendar-delivery-tools>summary{color:#155fa8!important;background:#f5f9ff}.calendar-delivery-form{padding:9px!important}.calendar-delivery-head{display:flex;gap:10px;align-items:baseline;margin-bottom:7px}.calendar-delivery-head strong{font-size:12px;color:#173a5d}.calendar-delivery-head span{font-size:10px;color:#6d8094}.calendar-delivery-grid{grid-template-columns:1.05fr 1.1fr .9fr 1.2fr .8fr .8fr!important;gap:6px!important}.calendar-delivery-grid label{font-size:10px!important;font-weight:800;color:#40566e}.calendar-delivery-grid input,.calendar-delivery-grid select{height:32px!important;min-height:32px!important;font-size:11px!important}.calendar-delivery-actions{display:flex;align-items:center;gap:10px;margin-top:7px}.calendar-delivery-actions button{height:31px;padding:0 12px}.calendar-delivery-actions span{font-size:9.5px;color:#74869a}@media(min-width:1200px){[data-view="calendar"]{padding-bottom:8px}.calendar-topbar{margin-bottom:5px!important}.calendar-legendbar{margin:5px 0!important}.calendar-weekday{padding:3px 0!important}.calendar-grid{min-height:0!important}.calendar-day{min-height:82px!important;padding:7px 6px 5px!important;gap:2px!important}.calendar-day .day-head>strong{font-size:12px!important}.calendar-day .badge{font-size:9px!important;padding:2px 4px!important}.calendar-legend{margin-top:5px!important;font-size:9px!important}.calendar-tools{margin-top:7px!important}}@media(max-width:900px){.calendar-actionbar{align-items:stretch;flex-wrap:wrap}.calendar-actionbar>div{flex-basis:100%;display:block}.calendar-actionbar span{display:block;white-space:normal;margin-top:2px}.calendar-delivery-grid{grid-template-columns:1fr 1fr!important}}


/* CALENDAR_DENSITY_HOVER_V126
   요청 범위: 업무 달력만. 상단/사이드바/대시보드는 변경하지 않는다.
   목적: 위 도구를 얇게 만들고 달력을 크게, 날짜 칸에는 4건까지 보이고 hover 시 전체 내역 표시. */
.calendar-day .day-head-meta{display:flex;align-items:center;gap:4px;min-width:0}.day-event-count{display:inline-flex;align-items:center;height:16px;padding:0 4px;background:#eaf2ff;color:#155eef;border:1px solid #cfe0ff;font-size:8.5px;font-weight:900;line-height:1;white-space:nowrap}.cal-tip{max-width:min(430px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:11px 13px;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow:hidden;border:1px solid #2f4051;border-radius:5px!important;box-shadow:0 12px 30px #10182840}.calendar-day[data-tip]{cursor:pointer}

@media(min-width:1200px){
  [data-view="calendar"]>.page-title{min-height:32px!important;margin:0 0 3px!important;padding:0!important;display:flex!important;align-items:center!important}
  [data-view="calendar"]>.page-title h1{margin:0!important;font-size:17px!important;line-height:1.05!important}
  [data-view="calendar"]>.page-title p{margin:2px 0 0!important;font-size:9.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  [data-view="calendar"] .calendar-topbar{display:grid!important;grid-template-columns:300px minmax(0,1fr)!important;align-items:stretch!important;gap:5px!important;margin:0 0 3px!important}
  [data-view="calendar"] .calendar-move{gap:3px!important;height:36px!important}
  [data-view="calendar"] .calendar-move input[type="month"]{height:34px!important;min-height:34px!important;width:164px!important;font-size:12px!important;padding:0 8px!important}
  [data-view="calendar"] .calendar-move .quiet{height:34px!important;min-height:34px!important;min-width:34px!important;padding:0 8px!important;font-size:11px!important}
  [data-view="calendar"] .calendar-summary{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;flex:none!important}
  [data-view="calendar"] .cal-kpi{height:36px!important;min-height:36px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:7px!important;padding:3px 7px!important;border-left-width:3px!important}
  [data-view="calendar"] .cal-kpi span{font-size:9px!important;white-space:nowrap!important}
  [data-view="calendar"] .cal-kpi strong{font-size:12px!important;line-height:1!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  [data-view="calendar"] .calendar-actionbar{height:32px!important;min-height:32px!important;box-sizing:border-box!important;margin:3px 0!important;padding:2px 6px!important;gap:5px!important}
  [data-view="calendar"] .calendar-actionbar>div{gap:6px!important;overflow:hidden!important}
  [data-view="calendar"] .calendar-actionbar strong{font-size:10.5px!important;white-space:nowrap!important}
  [data-view="calendar"] .calendar-actionbar span{font-size:8.8px!important}
  [data-view="calendar"] .calendar-actionbar button{height:26px!important;min-height:26px!important;padding:0 8px!important;font-size:9.5px!important}
  [data-view="calendar"] .calendar-legendbar{min-height:26px!important;height:26px!important;box-sizing:border-box!important;margin:2px 0 3px!important;padding:0 2px!important;display:flex!important;align-items:center!important}
  [data-view="calendar"] .qty-switch button{height:24px!important;min-height:24px!important;padding:0 7px!important;font-size:9.5px!important}
  [data-view="calendar"] .fuel-legend{font-size:9px!important;gap:8px!important}
  [data-view="calendar"] .calendar-weekdays{height:24px!important;min-height:24px!important;margin-bottom:0!important}
  [data-view="calendar"] .calendar-weekday{height:24px!important;box-sizing:border-box!important;padding:4px 0!important;font-size:10px!important}
  [data-view="calendar"] .calendar-grid{height:clamp(560px,calc(100vh - 235px),840px)!important;min-height:560px!important;grid-auto-rows:minmax(0,1fr)!important;gap:0!important;overflow:visible!important}
  [data-view="calendar"] .calendar-grid>div,
  [data-view="calendar"] .calendar-day{min-height:0!important;height:auto!important;padding:5px 5px 4px!important;gap:2px!important;overflow:hidden!important}
  [data-view="calendar"] .calendar-day .day-head{min-height:21px!important;gap:4px!important}
  [data-view="calendar"] .calendar-day .day-head>strong{font-size:12px!important}
  [data-view="calendar"] .calendar-day.today>.day-head>strong{width:21px!important;height:21px!important;font-size:11px!important}
  [data-view="calendar"] .calendar-day .day-head-meta{margin-left:auto!important}
  [data-view="calendar"] .calendar-day .day-sales{font-size:8.5px!important;padding:1px 3px!important}
  [data-view="calendar"] .calendar-day .day-badges{gap:2px!important;overflow:hidden!important}
  [data-view="calendar"] .calendar-day .badge{min-height:16px!important;box-sizing:border-box!important;padding:2px 4px!important;font-size:9px!important;line-height:1.15!important}
  [data-view="calendar"] .calendar-legend{margin:3px 2px 0!important;gap:8px!important;font-size:8.5px!important;min-height:18px!important}
  [data-view="calendar"] .calendar-tools{margin-top:5px!important}
}

@media(max-width:900px){
  .cal-tip{max-width:calc(100vw - 18px);font-size:10.5px}
  .day-event-count{font-size:8px;height:15px}
}


/* CALENDAR_EXECUTIVE_SUMMARY_HOVER_V128
   요청 범위: 달력만. 대표/관리자는 날짜 칸의 입고를 주유소별 요약하고, 전체 Hover는 읽기 쉬운 카드형으로 표시한다. */



.cal-tip.rich{width:min(560px,calc(100vw - 24px))!important;max-width:min(560px,calc(100vw - 24px))!important;max-height:min(620px,calc(100vh - 24px))!important;padding:0!important;background:#fff!important;color:#172b4d!important;border:1px solid #aebed0!important;border-radius:8px!important;box-shadow:0 16px 42px rgba(16,24,40,.28)!important;white-space:normal!important;overflow:auto!important;pointer-events:auto!important;font-size:11px!important;line-height:1.35!important}
.cal-tip.rich .cal-tip-rich{min-width:0;background:#fff}
.cal-tip.rich .cal-tip-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#0f3b66;color:#fff;border-bottom:1px solid #0b3156}
.cal-tip.rich .cal-tip-head>div{display:flex;align-items:baseline;gap:8px;min-width:0}.cal-tip.rich .cal-tip-head strong{font-size:13px;font-weight:900;white-space:nowrap}.cal-tip.rich .cal-tip-head span{font-size:10px;font-weight:800;color:#d8e9fa}.cal-tip.rich .cal-tip-head small{font-size:9px;color:#d8e9fa;white-space:nowrap}

.cal-tip.rich .cal-tip-section{padding:8px 10px;border-bottom:1px solid #e5ebf1}.cal-tip.rich .cal-tip-section:last-child{border-bottom:0}.cal-tip.rich .cal-tip-section>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.cal-tip.rich .cal-tip-section>header strong{font-size:11px;font-weight:900;color:#173a5d}.cal-tip.rich .cal-tip-section>header span{font-size:9.5px;color:#60758b;font-weight:700}


.cal-tip.rich .danger{color:#c4322b!important}
.cal-tip.rich .cal-tip-empty{display:grid;gap:4px;padding:14px}.cal-tip.rich .cal-tip-empty strong{font-size:12px}.cal-tip.rich .cal-tip-empty span{color:#66798d}

@media(max-width:900px){.cal-tip.rich{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:66vh!important}.cal-tip.rich .cal-tip-head small{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   v1.0.30 — 대표 대시보드 확장 (2026-08-29)
   주유소 6곳 이상을 다 보이게 + 전체 발주 현황 / 재고 소진 예측 / 최근 변경 패널.
   한 화면 고정 그리드 대신 세로로 흐르고 필요하면 스크롤한다.
   기존 하드코딩 라이트 색을 따른다(이 앱 대시보드는 단일 테마).
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:960px){
  [data-view="dashboard"]{overflow:auto!important}
  .v119-dashboard-host{overflow:auto!important;height:auto!important;min-height:calc(100vh - var(--v119-topbar))!important}
  /* 되도록 한 화면에. 패널 높이 하한을 없애 내용만큼만 차지하고, 내부는 짧게 스크롤. */
  
  
  
  
  
  
  
  
  

  
  
  

  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  

  
  
  

  
}

.demo-warn-strip{background:#fef3c7;color:#8a5a06;border:1px solid #f0d488;border-radius:7px;padding:8px 13px;font-size:12px;font-weight:700;margin:0 0 9px;line-height:1.4}
.demo-warn-strip span{font-weight:500;color:#9a7433}

/* ======================================================================
   v1.0.31 - PC screen density cleanup (2026-08-29)
   On wide screens, forms / checkbox grids / cards were locked to 2 columns
   and puffed up, leaving lots of empty space. Make them fill to content.
   Not applied on phones (<960px); mobile keeps its own 42px touch rules.
   ====================================================================== */
@media (min-width:960px){
  .check-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))!important;gap:5px 8px!important;margin:8px 0 12px!important}
  .permission-choice-grid,.station-choice-grid{grid-template-columns:repeat(auto-fill,minmax(224px,1fr))!important;gap:6px!important}
  .permission-choice-grid label,.station-choice-grid label{padding:7px 9px!important;border-radius:8px!important;gap:7px!important;align-items:center!important}
  .permission-choice-grid input,.station-choice-grid input{width:17px!important;height:17px!important;margin-top:0!important}
  .permission-choice-grid span,.station-choice-grid span{gap:1px!important}
  .permission-choice-grid strong,.station-choice-grid strong{font-size:.78rem!important;line-height:1.2!important}
  .permission-choice-grid small,.station-choice-grid small{font-size:.6rem!important;line-height:1.2!important}
  #userManager .check-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}

  .form-grid:not(.closing-totals):not(.calendar-delivery-grid):not(.calendar-filters){
    grid-template-columns:repeat(auto-fill,minmax(198px,1fr))!important;gap:7px 12px!important
  }
  .form-grid .wide-field{grid-column:1/-1!important}

  .form-card{padding:14px 16px!important;border-radius:10px!important;box-shadow:0 1px 2px rgba(16,42,67,.05),0 6px 18px rgba(16,42,67,.06)!important}
  .form-card.compact{padding:11px 13px!important;border-radius:9px!important}
  .form-card>h2,.overview-panel>h2{font-size:.9rem!important;margin:0 0 9px!important;padding-bottom:7px!important;border-bottom:1px solid var(--ui115-line,#d5dee8)!important;letter-spacing:-.01em!important}
  .form-card>h3{font-size:.76rem!important;margin:11px 0 6px!important;color:var(--ui115-muted,#63748a)!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-weight:800!important}
  .form-card>p,.form-card .form-help{font-size:.7rem!important;line-height:1.45!important;margin:4px 0 8px!important}
  .form-card label{margin:5px 0!important;font-size:.72rem!important}
  .form-card input,.form-card select,.form-card textarea{min-height:34px!important;padding:6px 9px!important;font-size:.76rem!important;border-radius:6px!important}
  .form-card .button-row{margin-top:9px!important;gap:6px!important}
  .form-card .button-row button,.toolbar button{min-height:34px!important;padding:7px 13px!important;font-size:.76rem!important;border-radius:6px!important}

  .card-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:8px!important}
  
  .station-card{padding:10px 12px!important;gap:5px!important;border-radius:9px!important}
  .metric-grid,.kpi-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px!important;margin:6px 0 10px!important}
  .metric,.kpi,.trend-kpi{padding:9px 11px!important;border-radius:9px!important}

  [data-view="purchases"] .kpi-row{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
  [data-view="purchases"] #purchasePendingLots{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important}
  
  
  
  
  [data-view="purchases"] .price-cell .price-input,[data-view="purchases"] .cost-supply,[data-view="purchases"] .cost-transport,[data-view="purchases"] .cost-vat{max-width:110px!important;text-align:right!important}
  [data-view="purchases"] #purchaseStationCards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}
  [data-view="purchases"] .data-table th,[data-view="purchases"] .data-table td{padding:5px 8px!important;font-size:.7rem!important}
  [data-view="purchases"] .section-label{margin:12px 0 6px!important;font-size:.72rem!important;font-weight:800!important;color:var(--ui115-muted,#63748a)!important;text-transform:uppercase!important;letter-spacing:.04em!important}

  /* 계정 생성: 폼은 좌우 2열로 두되, 체크박스 그리드와 계정 목록은 화면 전체 폭을 쓴다. */
  #userManager{grid-template-columns:minmax(360px,.62fr) minmax(360px,.62fr)!important;column-gap:16px!important}
  #userManager>h3,#userManager>#newUserStations,#userManager>#permissionChoices,#userManager>#createUser,#userManager>#userMessage,#userManager>#userCards{grid-column:1/-1!important}
  #userManager>#userCards{grid-row:auto!important;margin-top:6px!important}
  #userManager .check-grid,#userManager .permission-choice-grid,#userManager .station-choice-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))!important}
  #userCards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;display:grid!important;gap:8px!important;align-content:start!important}

  .menu-context-strip{min-height:46px!important;border-radius:9px!important;box-shadow:0 1px 2px rgba(16,42,67,.05)!important;background:#fff!important}
  .menu-context-title>strong{font-size:.82rem!important}
  .menu-context-title>span{font-size:.58rem!important}
  .menu-context-title>small{font-size:.58rem!important}
  .menu-context-kpis strong{font-size:.72rem!important}
  .menu-context-kpis span{font-size:.56rem!important}
  .menu-context-home{font-size:.7rem!important;padding:0 12px!important;font-weight:800!important}

  .ui-setting-cluster .ui-scale-main{display:flex!important;align-items:center!important;gap:5px!important}
  .ui-setting-cluster .ui-scale-main select{min-width:78px!important}
  .ui-setting-detail{position:relative!important}
  .ui-setting-detail>summary{list-style:none!important;cursor:pointer!important;font-size:calc(var(--ui119-topbar-font,13px) - 1px)!important;font-weight:800!important;color:#edf6ff!important;padding:0 7px!important;height:calc(var(--v119-topbar,44px) - 12px)!important;display:flex!important;align-items:center!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:4px!important;background:rgba(255,255,255,.08)!important;white-space:nowrap!important}
  .ui-setting-detail>summary::-webkit-details-marker{display:none!important}
  .ui-setting-detail[open]>summary{background:rgba(255,255,255,.22)!important}
  .ui-setting-detail-grid{position:absolute!important;top:calc(100% + 6px)!important;right:0!important;z-index:120!important;display:grid!important;grid-template-columns:repeat(2,minmax(120px,1fr))!important;gap:6px!important;padding:10px!important;background:#fff!important;border:1px solid #cbd6e2!important;border-radius:8px!important;box-shadow:0 10px 28px rgba(15,35,60,.22)!important;width:280px!important}
  .ui-setting-detail-grid label{display:grid!important;gap:3px!important;margin:0!important}
  .ui-setting-detail-grid label>span{font-size:11px!important;color:#53677e!important;font-weight:800!important}
  .ui-setting-detail-grid input{width:100%!important;min-height:30px!important;border:1px solid #c3cfdc!important;border-radius:5px!important;padding:4px 7px!important;font-size:12px!important;color:#173b5d!important;text-align:center!important;background:#fff!important}
}

/* v1.0.32 — 매입·실마진 유류/유외 구분 표 */


[data-view="purchases"] #purchaseItemTable tfoot td{background:#0b2743;color:#fff;font-weight:800}
[data-view="purchases"] #purchaseItemTable .num-good{color:#168451;font-weight:800}
[data-view="purchases"] #purchaseItemTable .num-bad{color:#bd3028;font-weight:800}

/* v1.0.33 — 메뉴별 상단 요약 대시보드: 클릭 가능한 KPI 타일 */
.menu-context-kpis .menu-context-kpi{border:0;border-right:1px solid #e3e9ef;background:#fff;text-align:left;padding:6px 10px;display:grid;align-content:center;gap:2px;cursor:pointer;transition:background .12s}
.menu-context-kpis .menu-context-kpi:hover{background:#f4f7fb}
.menu-context-kpis .menu-context-kpi span{font-size:.56rem;color:#71879d;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-context-kpis .menu-context-kpi strong{font-size:.82rem;color:#17314e;font-variant-numeric:tabular-nums}
.menu-context-kpis .menu-context-kpi.warn strong{color:#b96f05}
.menu-context-kpis .menu-context-kpi.ok strong{color:#168451}
@media (min-width:960px){
  .menu-context-kpis{grid-auto-flow:column!important;grid-auto-columns:minmax(112px,1fr)!important;grid-template-columns:none!important}
  .menu-context-strip{grid-template-columns:minmax(200px,1fr) auto auto!important}
}

/* v1.0.33 — 재고·원장 리포트 엑셀 버튼 배치 */
.ledger-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ledger-toolbar .segmented{margin:0!important}
.ledger-toolbar #downloadLedgerReport{white-space:nowrap}
.inventory-context-bar #downloadInventoryReport{white-space:nowrap}
@media (max-width:720px){
  .ledger-toolbar{gap:8px}
  .ledger-toolbar .segmented{flex:1 1 100%}
  .ledger-toolbar #downloadLedgerReport,
  .inventory-context-bar #downloadInventoryReport{width:100%}
}

/* ══ v1.0.34 — 권한 화면(누르는 버튼) · 원가·실마진 관리 화면 ══ */

/* 직책 프리셋 버튼 */
.visually-hidden-select{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.role-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.role-preset{appearance:none;border:1.5px solid #cbd5e1;background:#fff;color:#334155;font-weight:800;font-size:.86rem;padding:9px 18px;border-radius:8px;cursor:pointer;transition:all .12s;min-width:64px}
.role-preset:hover{border-color:#94a3b8;background:#f8fafc}
.role-preset.active{border-color:#1768e8;background:#1768e8;color:#fff;box-shadow:0 2px 8px rgba(23,104,232,.28)}

/* 권한/주유소 = 누르면 색이 바뀌는 버튼 (체크박스 아님) */
.toggle-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.perm-toggle{position:relative;appearance:none;text-align:left;border:1.5px solid #d5dee8;background:#fff;border-radius:8px;padding:9px 30px 9px 12px;cursor:pointer;display:grid;gap:2px;transition:all .1s;line-height:1.25}
.perm-toggle>strong{font-size:.82rem;color:#1f2d3d;font-weight:800}
.perm-toggle>small{font-size:.62rem;color:#8090a2;letter-spacing:.01em}
.perm-toggle::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;border:2px solid #c4cfdb;background:#fff;transition:all .1s}
.perm-toggle:hover:not([disabled]){border-color:#9db4cc;background:#f6f9fc}
.perm-toggle[aria-pressed="true"]{border-color:#1768e8;background:#eaf2ff;box-shadow:inset 0 0 0 1px #1768e8}
.perm-toggle[aria-pressed="true"]>strong{color:#0f4bb3}
.perm-toggle[aria-pressed="true"]::after{border-color:#1768e8;background:radial-gradient(circle at center,#1768e8 0 6px,#fff 6px)}
.perm-toggle[disabled]{opacity:.45;cursor:not-allowed}
.perm-toggle[data-cost="1"]{border-style:dashed}
.perm-toggle.station-toggle{display:block}
.perm-toggle.station-toggle>strong{font-size:.8rem}
#permScopeNote{font-weight:600;font-size:.66rem;color:#8a6d3b}

/* 원가·실마진 관리 화면 */
.cost-filterbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;padding:12px 14px;background:#f4f7fb;border:1px solid #dbe4ee;border-radius:10px;margin-bottom:12px}
.cost-filterbar label{display:grid;gap:3px;font-size:.66rem;font-weight:800;color:#4a5b6e}
.cost-filterbar input,.cost-filterbar select{min-height:34px;border:1px solid #c3cfdc;border-radius:6px;padding:4px 8px;font-size:.8rem;background:#fff;color:#1f2d3d}
.cost-filterbar .cost-filter-range{flex-direction:row;align-items:center;gap:5px}
.cost-filterbar .cost-filter-range input{max-width:140px}
.cost-filterbar .cost-filter-search input{min-width:170px}
.cost-filterbar button{min-height:36px;padding:0 14px;border-radius:6px;font-weight:800}

.cost-bar-list{display:grid;gap:5px;margin-bottom:10px}
.cost-bar-row{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(90px,2fr) minmax(84px,auto) minmax(120px,auto) minmax(70px,auto);align-items:center;gap:10px;border:1px solid #e0e7ef;background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:.76rem;text-align:left;transition:background .1s,border-color .1s}
.cost-bar-row:hover{background:#f6f9fc;border-color:#b9c8d8}
.cost-bar-row.selected{border-color:#1768e8;background:#eef4ff;box-shadow:inset 0 0 0 1px #1768e8}
.cost-bar-row .cbr-name{font-weight:800;color:#20303f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cost-bar-row .cbr-track{height:12px;background:#eef2f6;border-radius:6px;overflow:hidden}
.cost-bar-row .cbr-track>i{display:block;height:100%;background:linear-gradient(90deg,#1768e8,#4b93f7)}
.cost-bar-row .cbr-amount{font-variant-numeric:tabular-nums;text-align:right;color:#33475b}
.cost-bar-row .cbr-margin{font-variant-numeric:tabular-nums;text-align:right;font-weight:800}
.cost-bar-row .cbr-margin.ok{color:#168451}.cost-bar-row .cbr-margin.bad{color:#bd3028}
.cost-bar-row .cbr-pending{text-align:right;font-size:.66rem;font-weight:800;color:#6b7a8a}
.cost-bar-row .cbr-pending.warn{color:#b96f05}
/* v1.3.63 — 주유소 줄 아래에 '무엇이 빠졌는지' 한 줄. 칸을 늘리지 않고 전체 폭을 쓴다. */
.cost-bar-row .cbr-issue{grid-column:1/-1;font-size:.66rem;font-weight:700;line-height:1.4;color:#b96f05;white-space:normal}










@media (max-width:720px){
  .cost-filterbar{gap:8px}
  .cost-filterbar label,.cost-filterbar button{width:100%}
  .cost-filterbar .cost-filter-range input{max-width:none;flex:1}
  .cost-bar-row{grid-template-columns:1fr auto;grid-auto-rows:min-content;gap:4px 8px}
  .cost-bar-row .cbr-track{grid-column:1/-1;order:5}
  .cost-bar-row .cbr-issue{grid-column:1/-1;order:6}
  .role-preset{flex:1 1 40%}
  .toggle-grid{grid-template-columns:1fr 1fr}
}

/* ══ v1.0.35 — 관리자 대시보드 '주유소 운영 현황' 한 단계 크게 + 칸 정렬 ══ */
@media (min-width:960px){
  
  
  /* 헤더와 데이터 행이 정확히 같은 10칸을 쓰도록 명시 (마감·현금·자료·승인은 고정폭·가운데) */
  
  
  
  
  
  
  
  
  
  
  
}

/* ══ v1.0.35 — 담당 주유소 2곳 이상 소장·부장·차장 대시보드 ══ */
@media (min-width:960px){
  
  
  
  
  
  
  
}
@media (max-width:959px){
  
  
}

/* ══ v1.0.36 — 알림 일반/중요 색 통일 · 주유소별 백업 현황 ══ */
.role-alert-dot{background:#1570ef!important}
.role-alert-row.priority-high .role-alert-dot,.role-alert-row.priority-urgent .role-alert-dot{background:#d92d20!important}
.mobile-alert-list i{background:#1570ef!important}
.mobile-alert-list i.priority-high,.mobile-alert-list i.priority-urgent{background:#d92d20!important}

.notification-open.priority-normal{border-left-color:#1570ef!important}
.notification-open.priority-high,.notification-open.priority-urgent{border-left-color:#d92d20!important}

#stationBackupPanel .station-backup-list{display:grid;gap:5px;margin-top:8px}
.station-backup-row{display:grid;grid-template-columns:minmax(110px,1fr) auto minmax(0,1.4fr);gap:10px;align-items:center;padding:9px 11px;border:1px solid #dde5ee;border-radius:8px;background:#fff}
.station-backup-row.ok{border-left:4px solid #1f9d58}
.station-backup-row.warn{border-left:4px solid #d64541;background:#fff8f7}
.station-backup-row .sbr-name{font-weight:800;color:#1f2d3d;font-size:.86rem}
.station-backup-row .sbr-state{font-weight:800;font-size:.78rem;white-space:nowrap}
.station-backup-row.ok .sbr-state{color:#1f7a45}
.station-backup-row.warn .sbr-state{color:#c0392b}
.station-backup-row .sbr-meta{font-size:.68rem;color:#7c8a99;text-align:right}
.station-backup-warn{margin:9px 0 0;padding:8px 11px;border-radius:7px;background:#fdecea;color:#b42318;font-size:.76rem;font-weight:700}
.station-backup-ok{margin:9px 0 0;padding:8px 11px;border-radius:7px;background:#eaf7ef;color:#1f7a45;font-size:.76rem;font-weight:700}
@media (max-width:720px){
  .station-backup-row{grid-template-columns:1fr auto}
  .station-backup-row .sbr-meta{grid-column:1/-1;text-align:left}
}

/* ══ v1.0.38 — 카카오톡식 채팅방 ══ */
.chat-view{padding:0!important}
.chat-layout{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 108px);min-height:420px;border:1px solid #d9e2ec;border-radius:12px;overflow:hidden;background:#fff}
.chat-rooms{display:flex;flex-direction:column;border-right:1px solid #e4ebf2;min-width:0;background:#f7f9fc}
.chat-rooms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 10px;border-bottom:1px solid #e4ebf2}
.chat-rooms-head strong{font-size:1rem;color:#17314e}
.chat-rooms-head button{padding:7px 12px;border-radius:7px;font-weight:800;font-size:.78rem}
.chat-room-list{flex:1;overflow-y:auto;padding:6px}
.chat-room-item{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 10px;cursor:pointer}
.chat-room-item:hover{background:#eef3f9}
.chat-room-item.active{background:#e4eefb}
.chat-room-item .cri-top{display:flex;align-items:baseline;gap:6px}
.chat-room-item .cri-top strong{font-size:.86rem;color:#1f2d3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.chat-room-item .cri-tag{font-size:.58rem;font-weight:800;background:#dbe6f3;color:#3a5b7f;border-radius:4px;padding:1px 5px}
.chat-room-item .cri-top time{font-size:.6rem;color:#93a2b3;white-space:nowrap}
.chat-room-item .cri-bot{display:flex;align-items:center;gap:6px;margin-top:2px}
.chat-room-item .cri-bot small{flex:1;font-size:.7rem;color:#7c8b9c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room-item .cri-unread{background:#d92d20;color:#fff;font-size:.6rem;font-weight:900;border-radius:999px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.chat-thread{display:flex;flex-direction:column;min-width:0;background:#b2c7da}
.chat-thread-empty{margin:auto;text-align:center;color:#3d566e;padding:24px;max-width:360px}
.chat-thread-empty p{margin:0 0 8px}
.chat-thread-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-bottom:1px solid #e0e7ee}
.chat-back{display:none;font-size:1.3rem;line-height:1;padding:2px 8px;border-radius:7px}
.chat-thread-title{flex:1;min-width:0}
.chat-thread-title strong{display:block;font-size:.92rem;color:#17314e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread-title small{display:block;font-size:.62rem;color:#8090a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread-actions{display:flex;gap:6px}
.chat-thread-actions button{padding:5px 10px;font-size:.72rem;border-radius:6px}
.chat-messages{flex:1;overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:3px}
.chat-sys{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:.66rem;padding:3px 12px;border-radius:999px;margin:6px 0}
.chat-msg{display:flex;flex-direction:column;max-width:76%}
.chat-msg.other{align-self:flex-start}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg .chat-name{font-size:.64rem;color:#33475b;margin:6px 2px 2px}
.chat-msg .chat-name em{font-style:normal;color:#7c8b9c}
.chat-msg .chat-bubble{display:inline-block;padding:7px 11px;border-radius:12px;font-size:.84rem;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.chat-msg.other .chat-bubble{background:#fff;color:#1f2d3d;border-radius:4px 12px 12px 12px}
.chat-msg.mine .chat-bubble{background:#fee500;color:#191600;border-radius:12px 4px 12px 12px}
.chat-msg time{font-size:.56rem;color:#40566b;margin:1px 3px}
.chat-composer{display:flex;gap:8px;align-items:flex-end;padding:9px 10px;background:#fff;border-top:1px solid #e0e7ee}
.chat-composer textarea{flex:1;resize:none;border:1px solid #cbd6e2;border-radius:10px;padding:8px 11px;font-size:.86rem;line-height:1.4;max-height:120px;font-family:inherit}
.chat-composer textarea:focus{outline:2px solid #1768e8;border-color:#1768e8}
.chat-composer button{padding:9px 16px;border-radius:9px;font-weight:800;white-space:nowrap}
.chat-people-list{display:grid;gap:4px;max-height:min(50vh,360px);overflow-y:auto;margin:10px 0}
.chat-person{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #dde5ee;border-radius:8px;cursor:pointer}
.chat-person:hover{background:#f4f7fb}
.chat-person input{width:18px;height:18px}
.chat-person em{font-style:normal;color:#7c8b9c;font-size:.78rem}

@media (max-width:900px){
  .chat-layout{grid-template-columns:1fr;height:calc(100vh - 130px)}
  .chat-thread{position:absolute;inset:0;transform:translateX(100%);transition:transform .18s;z-index:5}
  .chat-view .chat-layout{position:relative}
  .chat-thread-pane.room-open,.chat-thread.room-open,#chatThreadPane.room-open{transform:translateX(0)}
  .chat-back{display:block}
  .chat-msg{max-width:82%}
}

/* ══════════════════════════════════════════════════════════════════════
   v1.0.40 — 입체감 · 강조 정리 (DESIGN POLISH, 2026-08-30)
   --------------------------------------------------------------------
   [요청] 각진 모양은 그대로 두되(엑셀식 유지), 화면이 너무 평평하다 →
   면마다 높낮이(그림자)를 주고, 중요한 부분(주요 버튼·큰 숫자·활성 메뉴·
   중요 알림)이 더 또렷하게 튀어나오게 한다.

   [원칙]
     - 모서리 둥글기는 이 블록에서 절대 건드리지 않는다(각진 모양 유지).
     - HTML/JS 요소 id 는 그대로. CSS 만 덧붙인다(파일 맨 끝 = 우선순위 최상).
     - 그림자는 3단계로만: --elev-1(면) / --elev-2(뜬 것) / --elev-3(대화상자).
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --pop:#1768e8;                 /* 유일하게 튀는 파랑 — 활성·강조에만 */
  --pop-deep:#0f57c9;
  --elev-1:0 1px 2px rgba(16,42,67,.08), 0 2px 6px rgba(16,42,67,.09);
  --elev-2:0 3px 8px rgba(16,42,67,.10), 0 14px 30px rgba(16,42,67,.15);
  --elev-3:0 22px 52px rgba(10,28,52,.30);
  --elev-btn:inset 0 1px 0 rgba(255,255,255,.20), 0 2px 5px rgba(16,42,67,.24), 0 9px 20px rgba(16,42,67,.16);
  --ring:0 0 0 3px rgba(23,104,232,.22);
}

/* ── 1. 면(패널·카드·표)에 높낮이 부여 ─────────────────────────── */
.panel,.overview-panel,.trend-panel,.station-card,.table-scroll,
.menu-context-strip,.station-backup-row,.chat-layout,
.mobile-home-card,.work-comms,.work-push-required{
  box-shadow:var(--elev-1);
}
.difference-box{ box-shadow:var(--elev-1); border-left:4px solid var(--pop); }
.difference-box strong{ font-variant-numeric:tabular-nums; }

@media (min-width:960px){
  /* .v119-panel 은 .v123-ceo / .v120-* 안에서 (0,2,0)!important 로 눌려 있어
     여기서는 대시보드 컨테이너를 함께 적어 (0,2,1) 로 확실히 이긴다. */
  body .v119-dashboard .v119-panel,
  body .v123-ceo .v119-panel,
  body .v120-admin .v119-panel,
  body .v135-mm .v119-panel,
  body .v135-mm-grid .v119-panel,
  body .role-dashboard-panel,
  html[data-ui-role="STAFF"] .role-dashboard-panel,
  body .panel,
  body .overview-panel,
  body .trend-panel,
  body .station-card,
  body .operation-submit-panel,
  body .operation-inbox-panel,
  body .menu-context-strip,
  body .overview-dashboard-grid>section{
    box-shadow:var(--elev-1)!important;
    border-color:#d4deea!important;
  }
  body .table-scroll,body .sheet-wrap{ box-shadow:var(--elev-1)!important; }
  /* 패널 머리글이 본문보다 한 겹 위에 있게 */
  
  
  
}

/* ── 2. 상단바 · 좌측 메뉴 · 하단 메뉴 = 본문 위에 뜬 층 ───────── */
.topbar{ box-shadow:0 2px 10px rgba(16,42,67,.14); }
.bottom-nav{ box-shadow:0 -6px 24px rgba(16,42,67,.16); }
.phone-nav{ box-shadow:0 10px 20px rgba(6,26,48,.30); }
@media (min-width:960px){
  body .topbar,body .topbar.topbar-v119{ box-shadow:0 4px 18px rgba(4,20,40,.32)!important; }
  body .sidebar-nav{ box-shadow:6px 0 22px rgba(4,20,40,.20)!important; }
}

/* ── 3. 주요 버튼 = 확실히 튀어나오게 ─────────────────────────── */
.primary,button.primary{
  box-shadow:var(--elev-btn);
}
.primary:hover,button.primary:hover,
.primary:focus-visible,button.primary:focus-visible{
  filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 3px 8px rgba(16,42,67,.26), 0 12px 26px rgba(16,42,67,.20);
  outline:none;
}
.primary:active,button.primary:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.24);
}
.primary:disabled{ box-shadow:none; }
.quiet,button.quiet{ box-shadow:var(--elev-1); }
.quiet:hover,button.quiet:hover{ box-shadow:var(--elev-2); }

/* ── 4. 큰 숫자(KPI) 강조 — 크기 · 굵기 · 상태색 · 윗변 띠 ─────── */
.metric,.kpi,.work-stat,.role-dashboard-kpis .work-stat,.mobile-home-card{ box-shadow:var(--elev-1); }
.metric strong,.kpi strong,.work-stat strong,.mini-stats strong{
  font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
@media (min-width:960px){
  /* .v123-kpis .v119-kpi 가 box-shadow:none!important (0,2,0) 로 눌러서
     대시보드 컨테이너까지 적어 (0,2,1) 로 이긴다. */
  
  
  
  
  
  
  
  
  body .v119-titlebar h1,body .page-title h1{ font-weight:900!important; letter-spacing:-.03em!important; }
  .menu-context-kpis .menu-context-kpi strong{ font-size:.92rem!important; font-variant-numeric:tabular-nums; }
}

/* ── 5. 활성 상태(메뉴·탭·구분버튼·필터) 더 또렷하게 ──────────── */
.sidebar-nav button[data-nav].active{ background:#ffffff22; box-shadow:inset 3px 0 0 var(--accent); }
.tab-button{ position:relative; }
.tab-button.active{ color:var(--pop)!important; font-weight:900!important; box-shadow:0 2px 9px rgba(23,104,232,.20)!important; }
.tab-button.active::after{ content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--pop); }
.segmented .active{ box-shadow:0 2px 8px rgba(16,42,67,.18); color:var(--pop); font-weight:900; }
.notification-filter.active{ box-shadow:var(--elev-btn); }
.overview-tabs button.active{ box-shadow:var(--elev-btn); }
.role-preset.active{ box-shadow:0 2px 10px rgba(23,104,232,.34); }
.perm-toggle[aria-pressed="true"]{ box-shadow:inset 0 0 0 1px var(--pop), var(--elev-1); }
@media (min-width:960px){
  
}

/* ── 6. 알림 우선순위 — 색 띠 + 옅은 바탕 + 큰 점 ─────────────── */
.priority-high,.priority-urgent{
  background:linear-gradient(90deg, rgba(217,45,32,.07), rgba(217,45,32,0) 62%)!important;
}
.priority-normal{
  background:linear-gradient(90deg, rgba(21,112,239,.06), rgba(21,112,239,0) 62%)!important;
}
.notification-open.priority-high,.notification-open.priority-urgent{ box-shadow:var(--elev-1); }
.notification-open.priority-normal{ box-shadow:var(--elev-1); }
.role-alert-dot{ width:9px!important; height:9px!important; box-shadow:0 0 0 3px rgba(240,160,0,.20); }
.role-alert-row.priority-high .role-alert-dot,
.role-alert-row.priority-urgent .role-alert-dot{ box-shadow:0 0 0 3px rgba(217,45,32,.20); }
.prio-chip.imp{ background:#d92d20; color:#fff; }
.work-push-required.problem{ box-shadow:var(--elev-2); }

/* ── 7. 표 — 머리글이 스크롤 때 떨어져 보이게 + 합계줄 강조 ───── */
.data-table thead th{ box-shadow:inset 0 -1px 0 #d3dde8; }
.data-table tfoot td,.total-row td,table tr.total td{ font-variant-numeric:tabular-nums; }
@media (min-width:960px){
  
}

/* ── 8. 누를 수 있는 줄·카드 = 얹으면 살짝 떠오른다 ──────────── */
.station-open:hover,.station-open:focus-visible{ box-shadow:var(--elev-2)!important; transform:translateY(-1px); }
.menu-context-kpis .menu-context-kpi:hover{ box-shadow:var(--elev-1); }
@media (min-width:960px){
  .v119-table-row:hover,
  .role-station-row:hover,
  .cost-bar-row:hover,
  .operation-report-row:hover,
  .v119-station-cards>button:hover,
  .v123-station-cards>button:hover,
  .chat-room-item:hover{
    box-shadow:var(--elev-1);
    transform:translateY(-1px);
  }
}

/* ── 9. 입력칸 포커스 — 각진 파란 테두리 대신 부드러운 링 ───── */
input:focus,select:focus,textarea:focus,
.cost-filterbar input:focus,.cost-filterbar select:focus,
table.cost-grid input:focus,.chat-composer textarea:focus{
  outline:none!important;
  border-color:var(--pop)!important;
  box-shadow:var(--ring)!important;
}
button:focus-visible,[role="button"]:focus-visible,
.role-nav-item:focus-visible,.tab-button:focus-visible,
.v119-table-row:focus-visible,.role-station-row:focus-visible{
  outline:2px solid var(--pop);
  outline-offset:2px;
}

/* ── 10. 대화상자 = 화면에서 가장 높은 층 ─────────────────────── */
.password-dialog,.recognition-dialog,.search-dialog,.install-dialog,
#chatNewRoomDialog,#chatInviteDialog,dialog{
  box-shadow:var(--elev-3)!important;
}
.password-dialog::backdrop,.recognition-dialog::backdrop,
.search-dialog::backdrop,.install-dialog::backdrop,dialog::backdrop{
  background:rgba(12,26,45,.55)!important;
}

/* ── 11. 채팅 말풍선 · 빈 화면 마무리 ────────────────────────── */
.chat-msg .chat-bubble{ box-shadow:0 1px 2px rgba(16,42,67,.14); }
.empty-card,.v119-empty{ background:#fbfcfe; border-color:#cfd9e5; }

/* ── 12. 높낮이 변화가 의도적으로 보이도록 짧은 전환 ─────────── */
.station-card,.station-open,.primary,.quiet,button.primary,button.quiet,
.tab-button,.segmented button,.role-nav-item,.perm-toggle,.role-preset,
.v119-table-row,.role-station-row,.cost-bar-row,.operation-report-row,
.v119-station-cards>button,.v123-station-cards>button,.chat-room-item,
.menu-context-kpi,.notification-filter{
  transition:box-shadow .13s ease, transform .13s ease, background-color .13s ease, border-color .13s ease, filter .13s ease;
}
@media (prefers-reduced-motion: reduce){
  .station-card,.station-open,.primary,.quiet,button.primary,button.quiet,
  .tab-button,.segmented button,.role-nav-item,.perm-toggle,.role-preset,
  .v119-table-row,.role-station-row,.cost-bar-row,.operation-report-row,
  .v119-station-cards>button,.v123-station-cards>button,.chat-room-item,
  .menu-context-kpi,.notification-filter{ transition:none!important; }
  .station-open:hover,
  .v119-table-row:hover,.role-station-row:hover,.cost-bar-row:hover,
  .operation-report-row:hover,.v119-station-cards>button:hover,
  .v123-station-cards>button:hover,.chat-room-item:hover,
  .primary:active,button.primary:active{ transform:none!important; }
}
/* v1.0.40 DESIGN POLISH — 끝 */

/* ══════════════════════════════════════════════════════════════════════
   v1.0.42 — 기초 설정 화면 + '미완료 = 빨간 메뉴' 강조
   ══════════════════════════════════════════════════════════════════════ */

/* ── 메뉴 빨간 강조: 기초 설정이 안 끝났을 때. 끝나면 클래스가 빠져 원래색 ── */





@media (min-width:960px){
  
  
  
  
}

/* ── 기초 설정 화면 ── */
.setup-context-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:11px 13px; margin:0 0 10px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--elev-1);
}
.setup-context-bar label{ display:flex; align-items:center; gap:7px; margin:0; font-weight:800; font-size:.8rem; }
.setup-context-bar select{ min-height:36px; min-width:180px; }
.setup-context-bar .quiet{ margin-left:auto; }
.setup-status{ flex:1 1 260px; font-size:.82rem; color:#33475b; display:flex; flex-direction:column; gap:1px; }
.setup-status.ok{ color:#11814a; }
.setup-status.warn{ color:#b3402f; }
.setup-status b{ font-weight:900; }
.setup-status-sub{ font-size:.7rem; color:var(--muted); font-weight:700; }

.setup-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:1100px){ .setup-grid{ grid-template-columns:1fr 1fr; } }
.setup-card{ box-shadow:var(--elev-1); }
.setup-card .station-head{ align-items:flex-start; gap:10px; }
.setup-card h2{ font-size:.98rem; margin:0 0 3px; }
.setup-card .station-head small{ color:var(--muted); line-height:1.4; display:block; }
.setup-chip{
  flex:0 0 auto; align-self:flex-start;
  padding:3px 9px; font-size:.66rem; font-weight:900; white-space:nowrap;
  background:#eef2f7; color:#5b6b7d; border:1px solid var(--line);
}
.setup-chip.ok{ background:#e7f7ef; color:#11814a; border-color:#bfe6cf; }
.setup-chip.need{ background:#fdecea; color:#b3402f; border-color:#f2c4bd; }

.setup-list{ display:grid; gap:5px; margin:10px 0 12px; }
.setup-empty{ margin:8px 0; padding:9px 11px; background:var(--sunken,#eef2f7); color:var(--muted); font-size:.78rem; }
.setup-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px;
  padding:7px 10px; border:1px solid var(--line); background:#fff;
}
.setup-item-main{ font-size:.82rem; color:#20303f; }
.setup-item-main b{ font-weight:900; }
.setup-item-sub{ font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }

.setup-addrow{
  display:flex; flex-wrap:wrap; align-items:end; gap:8px 10px;
  padding-top:10px; border-top:1px dashed var(--line);
}
.setup-addrow label{ display:grid; gap:3px; margin:0; font-size:.66rem; font-weight:800; color:#4a5b6e; }
.setup-addrow input,.setup-addrow select{ min-height:34px; }
.setup-addrow input{ max-width:150px; }
.setup-addrow .primary{ min-height:36px; white-space:nowrap; }

.setup-price-row{ display:grid; grid-template-columns:1fr 120px auto auto; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--line); background:#fff; }
.setup-price-row .setup-price-input{ min-height:32px; text-align:right; font-variant-numeric:tabular-nums; }
.setup-price-row .setup-price-save{ min-height:32px; padding:0 12px; }
.setup-price-state{ font-size:.72rem; font-weight:900; text-align:center; }
.setup-price-state.ok{ color:#11814a; }
.setup-price-state.need{ color:#b3402f; }
@media (max-width:680px){
  .setup-price-row{ grid-template-columns:1fr auto; }
  .setup-price-row .setup-price-input{ grid-column:1/-1; }
  .setup-addrow input{ max-width:none; flex:1 1 120px; }
}
/* v1.0.42 기초 설정 — 끝 */

/* ══════════════════════════════════════════════════════════════════════
   v1.0.43 — 마감 월별 일괄 확정 바
   ══════════════════════════════════════════════════════════════════════ */
.closing-batch-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:10px 12px; margin:0 0 8px;
  background:var(--sunken,#eef2f7); border:1px solid var(--line);
}
.closing-batch-bar #closingBatchInfo{ font-weight:800; font-size:.82rem; color:#33475b; }
.closing-batch-bar .closing-batch-flagged{ display:flex; align-items:center; gap:6px; margin:0; font-size:.74rem; font-weight:700; color:#4a5b6e; }
.closing-batch-bar .closing-batch-flagged input{ width:16px; min-height:16px; }
.closing-batch-bar #closingBatchConfirm{ margin-left:auto; min-height:36px; white-space:nowrap; }
.closing-batch-bar #closingBatchConfirm:disabled{ opacity:.5; }
@media (max-width:680px){
  .closing-batch-bar #closingBatchConfirm{ margin-left:0; width:100%; }
}
/* v1.0.43 — 끝 */

/* v1.0.46 — 기초 설정: 기본 마감시간 */
.setup-closing-time{ display:flex; align-items:center; gap:6px; margin:0; font-size:.74rem; font-weight:800; color:#4a5b6e; }
.setup-closing-time input{ min-height:34px; width:auto; }
.setup-closing-time button{ min-height:34px; padding:0 10px; }
.setup-closing-help{ margin:2px 0 8px; }

/* v1.0.47 — 예상 현재고 */
.tank-forecast-panel .tank-forecast-meta{ font-size:.68rem; color:var(--muted); font-weight:800; white-space:nowrap; }
.tank-forecast-list{ display:grid; gap:8px; margin-top:8px; }
.tank-forecast-row{ border:1px solid var(--line); background:#fff; padding:9px 11px; box-shadow:var(--elev-1); }
.tank-forecast-row.bad{ border-left:4px solid #d23a2f; }
.tank-forecast-row.warn{ border-left:4px solid #e08a00; }
.tank-forecast-row.ok{ border-left:4px solid #16a45c; }
.tank-forecast-row.not-ready{ border-left:4px solid #c4cfdb; }
.tfr-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tfr-head strong{ font-weight:900; font-size:.9rem; }
.tfr-now{ font-size:1.05rem; font-weight:900; color:#0c2444; font-variant-numeric:tabular-nums; }
.tfr-head span{ font-size:.7rem; color:var(--muted); font-weight:700; margin-left:auto; }
.tfr-bar{ height:8px; background:#eef2f6; margin:6px 0 4px; overflow:hidden; }
.tfr-bar i{ display:block; height:100%; background:linear-gradient(90deg,#1768e8,#4b93f7); }
.tank-forecast-row.bad .tfr-bar i{ background:#d23a2f; }
.tank-forecast-row.warn .tfr-bar i{ background:#e08a00; }
.tfr-calc,.tfr-note{ margin:2px 0 0; font-size:.66rem; color:var(--muted); line-height:1.45; font-variant-numeric:tabular-nums; }

/* v1.0.48 — 달력 매입 뱃지 · 주유소 필터 */
.calendar-scope{ display:flex; align-items:center; gap:6px; margin:0; font-size:.72rem; font-weight:800; color:#4a5b6e; }
.calendar-scope select{ min-height:32px; width:auto; }
.badge.purchase-badge{ background:#eef3fb; color:#1f4e79; }
.badge.purchase-badge.expected{ background:#fdf0e4; color:#8a5200; }
.badge.purchase-badge b{ font-weight:900; }

/* ══════════════════════════════════════════════════════════════════════
   v1.0.49 — 본문(내용) 전용 크기조절 · 상단 이동버튼 · 버전 표기
   ══════════════════════════════════════════════════════════════════════ */
/* 본문 크기: 메인메뉴·상단바는 그대로, 내용만 확대/축소한다.
   ⚠ #mainContent 자체(position:fixed; left:240px)에 zoom 을 걸면 left 값까지 축소돼
   내용이 왼쪽 메뉴 밑으로 들어가 잘린다. 그래서 '안쪽 요소'만 zoom 한다.
   zoom 은 글자·간격·이미지를 통째로 키워서 rem/px 섞여 있어도 확실히 먹는다. */
#mainContent > *{ zoom: var(--ui-content-zoom, 1); }
@media (min-width:960px){
  body #mainContent > *{ zoom: var(--ui-content-zoom, 1) !important; }
}
/* 두 크기 선택칸을 상단바에서 좁게 — 글자가 잘리지 않게 라벨은 짧게(메뉴/본문) */
.ui-setting-cluster .ui-scale-main,
.ui-setting-cluster .ui-scale-body{ display:flex; align-items:center; gap:4px; }
@media (min-width:960px){
  .ui-setting-cluster .ui-scale-main,
  .ui-setting-cluster .ui-scale-body{ display:flex !important; align-items:center !important; gap:4px !important; }
  .ui-setting-cluster .ui-scale-main select,
  .ui-setting-cluster .ui-scale-body select{ min-width:66px !important; max-width:82px !important; padding:0 16px 0 5px !important; }
  .ui-setting-cluster .ui-scale-main > span,
  .ui-setting-cluster .ui-scale-body > span{ color:#edf6ff !important; font-size:calc(var(--ui119-topbar-font,13px) - 2px) !important; font-weight:800 !important; white-space:nowrap !important; }
  /* '자료' 선택칸이 잘려서 '실제제자' 처럼 보이던 것 — 폭을 늘린다 */
  body .topbar .data-mode-setting select{ width:88px !important; }
  /* 넘치면 숨기지 말고 옆으로 밀어서 보게 한다(잘려서 안 보이는 것보다 낫다) */
  body .topbar .top-actions{ overflow-x:auto !important; scrollbar-width:thin; }
  body .topbar .top-actions::-webkit-scrollbar{ height:4px; }
}

/* 상단 이동 버튼(홈·뒤로·앞으로) — 눌리는 자리를 넉넉히 */
@media (min-width:960px){
  body .topbar #navHome,body .topbar #navBack,body .topbar #navForward{
    min-width:78px !important; padding:0 14px !important; cursor:pointer !important;
  }
  body .topbar #navHome:active,body .topbar #navBack:active,body .topbar #navForward:active{ background:#0a3e6e !important; }
}
/* v1.0.49 — 끝 */

/* ══ v1.0.51 — 상단바 '메뉴/본문' 선택칸: '더 크게'·'사용자 지정' 글자 잘림만 수정 ══ */
@media (min-width:960px){
  /* v1.0.49의 max-width:82px 때문에 '더 크게' 끝 글자가 잘렸다 — 가장 긴 항목이
     다 보이도록 폭만 넓힌다. 상단바 다른 요소는 건드리지 않는다. */
  body .ui-setting-cluster .ui-scale-main select,
  body .ui-setting-cluster .ui-scale-body select{
    min-width:104px !important; max-width:124px !important; width:auto !important;
    padding:0 18px 0 7px !important; text-overflow:clip !important;
  }
}
/* v1.0.51 — 끝 */

/* ══ v1.0.52 — 관리자 '주유소 운영 현황' 표 밑에 상태(완료/확인/정상) 뜻 설명 줄 ══ */




/* 패널(세로 flex) 안에서: 표는 남는 높이를 채우고, 설명 줄은 항상 밑에 보이게.
   .v120-admin-table 의 height:100% 를 풀어야 설명 줄이 패널 밖으로 밀려나지 않는다. */


@media (min-width:960px){
  
}
/* v1.0.52 — 끝 */

/* ══ v1.0.53 — 감사 후속: '먼저 할 일' 배너 · 실시간 탱크재고 · 예측 정확도 ══ */
.v119-setup-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  width:100%; margin:0 0 8px; padding:9px 14px; box-sizing:border-box;
  border:1px solid #e6b6b0; border-left:4px solid #d23b36; border-radius:5px;
  background:#fdf2f1; color:#8a2b26; text-align:left; cursor:pointer;
  font-size:calc(var(--ui117-body-font, 14px) - 1px);
}
.v119-setup-banner:hover{ background:#fbe9e7; }
.v119-setup-banner b{ font-weight:900; color:#b3312b; }
.v119-setup-banner span{ flex:1 1 220px; color:#7a3f3b; font-weight:600; }
.v119-setup-banner em{ font-style:normal; font-weight:900; color:#b3312b; white-space:nowrap; }






  



  

/* 자료함·메시지·원장·재고 목록: .card-list 의 auto-fill 격자(260px) 때문에 넓은 화면에서
   행이 가로로 흩어지던 것 수정 — 한 줄에 한 행씩 세로로 쌓는다. (v1.0.53)
   v1.0.78: #inventoryCards 가 이 목록에서 빠져 있어 재고 현황 화면이 깨졌었다 → 추가.
   (예전에 아래쪽에 있던 별도 #inventoryCards.card-list 블록은 이걸로 통합해 삭제) */
@media (min-width:960px){
  body #documentList.document-list-panel,
  body #messageList.message-thread-panel,
  body #ledgerCards.ledger-list-panel,
  body #inventoryCards.card-list{
    grid-template-columns:1fr !important;
  }
}
/* v1.0.53 — 끝 */

/* ══ v1.0.55 — 카톡·엑셀 루틴 화면 ══ */
.v55-bar{ display:flex; flex-wrap:wrap; align-items:end; gap:8px 12px; margin:8px 0 12px; }
.v55-bar label{ display:flex; flex-direction:column; gap:3px; font-size:.75rem; color:#53677e; font-weight:700; }
.v55-bar input, .v55-bar select{ min-height:34px; border:1px solid #cdd8e3; border-radius:6px; padding:4px 8px; background:#fff; }
.v55-bar button{ min-height:34px; }
.v55-chip{ background:#eef3fb; color:#1f4e79; border-radius:12px; padding:3px 12px; font-size:.78rem; font-weight:800; }
.v55-h2{ font-size:1rem; margin:18px 0 8px; color:#153656; }
.v55-panel{ border:1px solid #dbe4ef; border-radius:6px; background:#fff; overflow:hidden; }
.v55-panel .empty-card{ margin:0; border:0; }
.v55-quick summary, .form-card > summary{ cursor:pointer; font-weight:800; color:#1769c5; padding:2px 0; }
.v55-quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 12px; margin:8px 0; }
.v55-quick-grid label{ display:flex; flex-direction:column; gap:3px; font-size:.74rem; color:#53677e; font-weight:700; }
.v55-quick-grid input, .v55-quick-grid select{ min-height:34px; border:1px solid #cdd8e3; border-radius:6px; padding:4px 8px; }
[data-view] textarea{ width:100%; box-sizing:border-box; border:1px solid #cdd8e3; border-radius:6px; padding:8px; font:inherit; resize:vertical; }

/* 아침 보고 격자 */
.v55-morning-head, .v55-morning-row{ display:grid; grid-template-columns:minmax(120px,1.4fr) repeat(4,1fr); gap:1px; align-items:stretch; }
.v55-morning-head{ background:#f5f8fb; border-bottom:1px solid #e3eaf2; }
.v55-morning-head span{ padding:8px 10px; font-size:.72rem; font-weight:900; color:#546881; }
.v55-morning-row{ border-bottom:1px solid #eef1f5; }
.v55-morning-row:last-child{ border-bottom:0; }
.v55-st{ padding:8px 10px; display:flex; flex-direction:column; gap:1px; }
.v55-st small{ color:#7d8da0; font-size:.68rem; }
.v55-cell{ margin:5px; border-radius:5px; padding:6px 4px; text-align:center; font-size:.74rem; font-weight:800; }
.v55-cell.ok{ background:#e7f6ec; color:#1a7f46; }
.v55-cell.warn{ background:#fdf2e2; color:#a9670a; }
.v55-cell.bad{ background:#fdeceb; color:#c0392b; }

/* 재고조정 */
.v55-adj-head, .v55-adj-row{ display:grid; grid-template-columns:1.1fr .9fr repeat(6,1fr); gap:4px; align-items:center; padding:5px 8px; }
.v55-adj-head{ background:#f5f8fb; font-size:.68rem; font-weight:900; color:#546881; border-bottom:1px solid #e3eaf2; }
.v55-adj-row{ border-bottom:1px solid #eef1f5; font-size:.78rem; }
.v55-adj-row input{ min-width:0; width:100%; box-sizing:border-box; min-height:30px; border:1px solid #cdd8e3; border-radius:5px; padding:3px 5px; background:#eef5ff; }
.v55-adj-diff.bad{ color:#c0392b; font-weight:800; } .v55-adj-diff.warn{ color:#a9670a; font-weight:800; } .v55-adj-diff.ok{ color:#1a7f46; }
.v55-adj-source{display:block;margin-top:2px;color:#66788a;font-size:.61rem;font-weight:400;white-space:nowrap}
.v55-adj-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 9px;border:1px solid #d8e4f0;border-radius:7px;background:#f7fbff;color:#38536b;font-size:.72rem}
.v55-adj-summary strong{color:#173f69}.v55-adj-summary span{padding-left:8px;border-left:1px solid #d8e4f0}.v55-adj-summary b{color:#173f69;font-variant-numeric:tabular-nums}
.stockadj-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}.stockadj-charts article{padding:9px;border:1px solid #dce6f0;background:#fff;border-radius:8px}.stockadj-charts h3{margin:0;color:#173f69;font-size:.8rem}.stockadj-charts p{margin:3px 0 7px;color:#687789;font-size:.65rem}.stockadj-bar-row{display:grid;grid-template-columns:68px minmax(35px,1fr) 58px;gap:5px;align-items:center;margin:4px 0;font-size:.68rem}.stockadj-bar-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stockadj-bar-row i{height:8px;background:#edf2f7;border-radius:99px;overflow:hidden}.stockadj-bar-row em{display:block;height:100%;border-radius:99px}.stockadj-bar-row em.positive{background:#d89122}.stockadj-bar-row em.negative{background:#c63b32}.stockadj-bar-row b{text-align:right;font-variant-numeric:tabular-nums;font-size:.67rem}@media(max-width:900px){.stockadj-charts{grid-template-columns:1fr}.stockadj-bar-row{grid-template-columns:82px minmax(35px,1fr) 65px}}
/* v1.0.78 — 재고조정 그래프·요약 어두운 화면 대응 (userzip 병합 시 빠져 있던 것) */
html[data-theme="dark"] .stockadj-charts article{background:#161d25;border-color:#2a323c}
html[data-theme="dark"] .stockadj-charts h3{color:#e7ebef}
html[data-theme="dark"] .stockadj-charts p{color:#9aa4b0}
html[data-theme="dark"] .stockadj-bar-row i{background:#242a31}
html[data-theme="dark"] .v55-adj-summary{background:#161d25;border-color:#2a323c;color:#9aa4b0}
html[data-theme="dark"] .v55-adj-summary strong,html[data-theme="dark"] .v55-adj-summary b{color:#e7ebef}
html[data-theme="dark"] .v55-adj-summary span{border-left-color:#2a323c}
html[data-theme="dark"] .v55-adj-source{color:#8891a0}
.v55-annual-head, .v55-annual-row{ display:grid; grid-template-columns:60px repeat(auto-fit,minmax(70px,1fr)); gap:4px; padding:5px 8px; font-size:.76rem; }
.v55-annual-head{ background:#f5f8fb; font-weight:900; color:#546881; }
.v55-annual-row{ border-bottom:1px solid #eef1f5; font-variant-numeric:tabular-nums; }
.v55-annual-row .bad{ color:#c0392b; } .v55-annual-row .warn{ color:#a9670a; }

/* 주변시세 */
#marketBoard{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; border:0; }
.v55-market-card{ border:1px solid #dbe4ef; border-radius:6px; background:#fff; padding:10px 12px; }
.v55-market-card h3{ margin:0 0 6px; font-size:.92rem; color:#153656; }
.v55-market-row{ display:grid; grid-template-columns:1fr 1fr 1fr 46px; gap:4px; font-size:.76rem; padding:3px 0; border-top:1px solid #f0f3f7; }
.v55-market-row .bad{ color:#c0392b; font-weight:800; } .v55-market-row .ok{ color:#1a7f46; font-weight:800; }

/* 지출·결제 */
.v55-pay-head, .v55-pay-row{ display:grid; grid-template-columns:1.3fr 1fr .6fr 1fr auto; gap:8px; align-items:center; padding:7px 10px; font-size:.8rem; }
.v55-pay-head{ background:#f5f8fb; font-weight:900; color:#546881; border-bottom:1px solid #e3eaf2; }
.v55-pay-row{ border-bottom:1px solid #eef1f5; }
.v55-pay-row .warn{ color:#a9670a; font-weight:800; } .v55-pay-row .ok{ color:#1a7f46; }
.v55-exp-row{ display:grid; grid-template-columns:52px 1.2fr .8fr .7fr 1.3fr; gap:6px; padding:5px 10px; border-bottom:1px solid #eef1f5; font-size:.76rem; }
.v55-exp-row .ok{ color:#1a7f46; } .v55-exp-row .warn{ color:#a9670a; }

/* 발주 요청 */
.v55-orq-line{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid #eef1f5; font-size:.8rem; }
.v55-orq-line span{ flex:1; }
/* v1.3.120 — 전체 input{width:100%} 때문에 체크칸이 줄 전체를 차지하고 주유소·유종·수량 글자가 오른쪽 끝에 세로로 찌그러졌다. 체크칸은 크게(26px) 고정. */
.v55-orq-line input[type="checkbox"]{ width:26px; height:26px; min-height:0; flex:0 0 auto; margin:0; }
.v55-orqrows{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.v55-orq-input{ display:grid; grid-template-columns:1fr 1fr .7fr 1fr; gap:6px; }
.v55-orq-input select, .v55-orq-input input{ min-height:32px; border:1px solid #cdd8e3; border-radius:5px; padding:3px 6px; min-width:0; }

@media (max-width:720px){
  .v55-morning-head, .v55-morning-row{ grid-template-columns:minmax(90px,1fr) repeat(4,1fr); }
  .v55-adj-head, .v55-adj-row{ grid-template-columns:1fr 1fr; }
  .v55-adj-head span:nth-child(n+3), .v55-adj-row span.v55-adj-pos, .v55-adj-row span.v55-adj-gauge{ display:none; }
  .v55-pay-head, .v55-pay-row{ grid-template-columns:1fr 1fr auto; }
  .v55-pay-head span:nth-child(3), .v55-pay-row span:nth-child(3), .v55-pay-head span:nth-child(4), .v55-pay-row span:nth-child(4){ display:none; }
}
/* ══ v1.0.57 — 폰 전용 홈(카드 대시보드) · 하단 5칸 네비 ══ */
@media (max-width:720px){
  /* 하단 네비 — 5칸 균등, 아이콘+글씨 세로 */
  .bottom-nav{ justify-content:space-around !important; overflow-x:visible !important; gap:0 !important; }
  .bottom-nav button{ flex:1 1 0 !important; min-width:0 !important; display:flex; align-items:center; justify-content:center; }
  .bottom-nav button span{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.98rem; }
  .bottom-nav button span em{ font-style:normal; font-size:.6rem; font-weight:800; }

  /* 폰 홈 카드 — 큰 탭 타깃, 세로 스택 */
  .mobile-action-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; grid-auto-rows:min-content !important; }
  .mobile-action-grid button{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:3px !important;
    min-height:64px !important; padding:11px 12px !important; border:1px solid #dbe4ef !important; border-radius:10px !important;
    background:#fff !important; text-align:left !important; color:#1b3450 !important;
  }
  .mobile-action-grid button strong{ font-size:.9rem !important; }
  .mobile-action-grid button span{ font-size:.66rem !important; color:#7d8da0 !important; }
  .mobile-action-grid button:active{ background:#eef4ff !important; }
  /* 홈에서 목록/입력 화면으로 들어갔을 때 위에 '홈으로' 줄 */
  .mobile-view-bar{ display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:20;
    background:#fff; border-bottom:1px solid #e3eaf2; padding:8px 4px; margin:-4px -4px 8px; }
  .mobile-view-bar button{ border:1px solid #cdd8e3; background:#f4f8ff; color:#1769c5; border-radius:8px;
    padding:6px 12px; font-weight:800; font-size:.8rem; }
  .mobile-view-bar b{ font-size:.86rem; color:#1b3450; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (min-width:721px){ .mobile-view-bar{ display:none; } }

/* 대시보드 아침보고 미니 패널 */









  
.v55-clone-box{ margin-top:12px; padding:12px; border:1px dashed #b8cce0; border-radius:6px; background:#fbfdff; }
.v55-clone-box h3{ margin:0 0 4px; font-size:.88rem; color:#153656; }
/* v1.0.56 — 소장 아침 할일 체크리스트 · 채팅 등록 버튼 */
.v55-fieldchecklist{ display:flex; flex-direction:column; gap:8px; padding:8px 10px; }
.v55-fc-block b{ font-size:.82rem; color:#1b3450; }
.v55-fc-ok{ color:#1a7f46; font-weight:800; font-size:.74rem; }
.v55-fc-left{ color:#c0392b; font-weight:800; font-size:.74rem; }
.v55-fc-items{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.v55-fc-item{ border:1px solid #d4dde7; border-radius:14px; background:#fff; padding:4px 10px; font-size:.74rem; color:#33465c; cursor:pointer; display:flex; align-items:center; gap:4px; }
.v55-fc-item i{ font-style:normal; }
.v55-fc-item.done{ background:#eef7f0; border-color:#bfe0c9; color:#1a7f46; }
.v55-fc-item.pending{ border-color:#e6b6b0; color:#b3312b; font-weight:700; }
.chat-register{ align-self:flex-start; margin-top:3px; border:1px solid #cdd8e3; background:#f2f7ff; color:#1769c5; border-radius:12px; padding:2px 9px; font-size:.7rem; font-weight:800; cursor:pointer; }
.chat-msg.mine .chat-register{ align-self:flex-end; }
/* v1.0.55 — 끝 */

/* v1.0.57 — 대표 '유류 매입단가·수송료' 표 (loadFuelCost) */
.v55-fc{ display:flex; flex-direction:column; border:1px solid #e3eaf2; border-radius:8px;
  overflow-x:auto; background:#fff; }
.v55-fc-head, .v55-fc-line{ display:grid; gap:6px; align-items:center; padding:5px 8px; min-width:640px;
  grid-template-columns:1.5fr .9fr .8fr .9fr .95fr .85fr .8fr .85fr .95fr; }
.v55-fc-head{ background:#f5f8fb; border-bottom:1px solid #e3eaf2; font-size:.66rem; font-weight:900;
  color:#546881; text-align:right; }
.v55-fc-head span:first-child, .v55-fc-head span:nth-child(2){ text-align:left; }
.v55-fc-line{ border-bottom:1px solid #eef1f5; font-size:.78rem; color:#2a3f57; text-align:right; }
.v55-fc-line span:first-child, .v55-fc-line span:nth-child(2){ text-align:left; font-weight:700; }
.v55-fc-line input{ width:100%; min-width:0; box-sizing:border-box; padding:4px 6px; border:1px solid #cdd8e3;
  border-radius:5px; font-size:.78rem; text-align:right; }
.v55-fc-line .fc-margin.ok{ color:#1a7f46; font-weight:800; }
.v55-fc-line .fc-margin.bad{ color:#c0392b; font-weight:800; }
.v55-fc:has(.v55-fc-line.ro) .v55-fc-head,
.v55-fc-line.ro{ grid-template-columns:1.5fr 1fr .95fr 1fr .9fr 1fr 1fr; min-width:560px; }
.v55-fc-line.ro span{ font-weight:600; }

/* ══ v1.0.58 — 항상 보이는 버전 칩 (내가 어느 버전을 보는지 헷갈리지 않게) ══ */
.version-chip{
  flex:0 0 auto; align-self:center; margin:0 3px;
  border:1px solid #d0d8e2; border-radius:999px;
  background:#eef2f7; color:#3d4d60;
  font-size:.68rem; font-weight:800; letter-spacing:.02em;
  padding:3px 9px; line-height:1; white-space:nowrap; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.version-chip:hover{ background:#e3e9f1; }
.version-chip:focus-visible{ outline:2px solid #4a90d9; outline-offset:1px; }
.version-chip.stale{ background:#fff3d6; border-color:#e6b85c; color:#8a5a06; }
.version-chip.stale::before{ content:"⚠ "; }
@media (max-width:720px){
  .version-chip{ font-size:.63rem; padding:3px 7px; margin:0 2px; }
}

/* ══ v1.0.59 — 버전 잘 보이게 + 대표 폰 홈(주유소별 신호 + 지시) ══ */
.login-version{ margin:2px 0 10px; font-size:.82rem; font-weight:800; color:#5b6b7f;
  letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.mobile-home-version{ display:inline-block; margin-top:5px; padding:2px 8px; border-radius:999px;
  background:#eef2f7; color:#42536a; font-size:.7rem; font-weight:800; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; }
.mobile-home-version.stale{ background:#fff3d6; color:#8a5a06; }
.mobile-home-summary{ margin:0 0 10px; padding:9px 12px; border:1px solid #e3eaf2; border-radius:10px;
  background:#f7fafc; font-size:.82rem; color:#33465c; line-height:1.5; }
.mobile-home-summary b{ font-weight:900; font-variant-numeric:tabular-nums; }
.mobile-home-summary b.ok{ color:#1a7f46; } .mobile-home-summary b.warn{ color:#b06f00; }
.mobile-home-summary b.bad{ color:#c0392b; }









  



/* ══ v1.0.60 — 관리자 '화면 보기 = 폰 화면' (앱을 390px iframe 으로 다시 띄워 폰 레이아웃 그대로) ══ */
#adminPreviewViewport{ margin-right:4px; }
#adminPhoneFrame{ position:fixed; left:0; right:0; bottom:0; top:var(--ui117-topbar-size,46px);
  z-index:60; background:#0c1016; display:flex; justify-content:center; align-items:flex-start;
  padding:18px 12px; overflow:auto; }
#adminPhoneFrame[hidden]{ display:none; }
#adminPhoneStage{ width:390px; max-width:100%;
  height:min(860px, calc(100vh - var(--ui117-topbar-size,46px) - 36px));
  border:0; border-radius:20px; background:#fff; box-shadow:0 14px 60px rgba(0,0,0,.55); }
.embed-phone #adminRolePreview,
.embed-phone #adminPhoneFrame,
.embed-phone .quick-upload-bar{ display:none !important; }

/* ══ v1.0.61 — 브리핑 색 토큰 · 밝게/어둡게 (v1.0.66: 띠에서 실제 쓰는 규칙만 남김) ══ */
.brief-theme-toggle{ flex:0 0 auto; align-self:center; margin:0 3px; border:1px solid #cdd8e3; border-radius:999px;
  background:#eef2f7; color:#3d4d60; font-size:.72rem; font-weight:800; padding:4px 10px; white-space:nowrap; cursor:pointer; }
.brief-theme-toggle:active{ background:#e2e8f1; }

/* 색 토큰 — 띠(.brief-strip) 안의 .bh-card / .bh-rem / .bh-ask / .bh-more 가 참조한다. */
.brief-strip{
  --bh-ground:#EEF2F7; --bh-panel:#FFFFFF; --bh-ink:#141B26; --bh-mut:#5C6B7D; --bh-line:#E1E7EF;
  --bh-accent:#0B5FD9; --bh-ok:#0FA36B; --bh-warn:#B5730A; --bh-bad:#E8480E; --bh-head-ink:#FFFFFF;
}
body[data-brief-theme="dark"] .brief-strip, html[data-theme="dark"] .brief-strip{
  --bh-ground:#0F141A; --bh-panel:#181F27; --bh-ink:#EAEFF5; --bh-mut:#8DA0B4; --bh-line:#2B3540;
  --bh-accent:#FFB020; --bh-ok:#36D399; --bh-warn:#FFB020; --bh-bad:#F26D5B; --bh-head-ink:#EAEFF5;
}

.bh-card{ margin:0 14px 11px; background:var(--bh-panel); border-radius:15px; padding:14px 15px;
  border:1px solid var(--bh-line); border-top:4px solid var(--bh-ok); box-shadow:0 2px 9px rgba(20,27,38,.05); }
body[data-brief-theme="dark"] .bh-card{ box-shadow:none; border:1px solid var(--bh-line); border-top:4px solid var(--bh-ok); }
.bh-card.bad{ border-top-color:var(--bh-bad); }
.bh-card-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.bh-card-nm{ font-size:1rem; font-weight:800; }
.bh-card-rt{ font-size:.86rem; font-weight:800; color:var(--bh-accent); }
.bh-say{ font-size:.85rem; color:var(--bh-mut); margin:7px 0 12px; line-height:1.6; }
.bh-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.bh-act{ font:inherit; font-size:.81rem; font-weight:800; padding:9px 14px; border-radius:11px;
  border:1.5px solid var(--bh-accent); background:transparent; color:var(--bh-accent); cursor:pointer; }
.bh-act.solid{ background:var(--bh-accent); color:#fff; }
body[data-brief-theme="dark"] .bh-act{ border-color:var(--bh-line); color:var(--bh-ink); }
body[data-brief-theme="dark"] .bh-act.solid{ background:var(--bh-accent); color:#161B22; border-color:var(--bh-accent); }

.bh-rem{ margin:0 14px; display:flex; flex-direction:column; gap:7px; }
.bh-rem-row{ display:flex; align-items:center; gap:10px; text-align:left; width:100%; background:var(--bh-panel);
  border:1px solid var(--bh-line); border-radius:12px; padding:11px 13px; font:inherit; font-size:.83rem;
  color:var(--bh-ink); line-height:1.5; cursor:pointer; }
.bh-rem-row span{ flex:1; } .bh-rem-row b{ color:var(--bh-mut); }
.bh-rem-row:active{ background:var(--bh-ground); }

.bh-ask{ display:block; width:calc(100% - 28px); margin:8px 14px 20px; padding:12px; border-radius:12px;
  border:1px dashed var(--bh-line); background:var(--bh-panel); color:var(--bh-mut); font:inherit;
  font-size:.83rem; font-weight:700; text-align:left; cursor:pointer; }
.bh-more{ margin:0 14px 11px; padding:11px 15px; font-size:.82rem; font-weight:700; color:var(--bh-mut);
  background:var(--bh-panel); border:1px dashed var(--bh-line); border-radius:12px; }
.bh-more-link{ border:0; background:none; color:var(--bh-accent); font:inherit; font-weight:800; cursor:pointer; padding:0; }

/* v1.0.62 — PC 대시보드 맨 위 아침 브리핑 */
#deskBrief{ display:block; max-width:880px; width:100%; margin:0 auto 20px; align-self:center; border-radius:16px; }
@media (max-width:720px){ #deskBrief{ display:none; } }  /* 폰은 workcenter 쪽 브리핑을 쓴다 */

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.64 — 화면 전체 밝게/어둡게 (1차)
   상단바·좌측메뉴는 이미 진한 네이비라 그대로 두고, 밝던 본문·패널·표·입력칸을
   어둡게 덮는다. 하드코딩 #fff 가 많아 !important 로 눌러 준다.
   빠진 구석은 신고 받는 대로 보강 (styles.css 토큰화는 별도 작업).
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  color-scheme:dark; background:#0d1117;
  --text:#e6ecf3; --line:#2a323c; --muted:#9aa7b6; --blue:#4d9bff; --danger:#f26d5b;
  --v119-bg:#0d1117; --v119-panel:#161b22; --v119-line:#2a323c; --v119-text:#e6ecf3; --v119-muted:#9aa7b6;
  --v119-blue-soft:#15233a;
  --state-ok:#3fbe7e; --state-warn:#d9a441; --state-bad:#f26d5b;
}
html[data-theme="dark"] body{ background:#0d1117 !important; color:#e6ecf3 !important; }
html[data-theme="dark"] #appView{ background:#0d1117 !important; }
@media (min-width:960px){
  html[data-theme="dark"] html, html[data-theme="dark"] body{ background:#0d1117 !important; color:#e6ecf3 !important; }
  html[data-theme="dark"] body #mainContent{ background:#0d1117 !important; color:#e6ecf3 !important; }
}
/* 본문 큰 제목·설명 */
html[data-theme="dark"] .page-title h1, html[data-theme="dark"] .v119-titlebar h1,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3{ color:#eef2f7 !important; }
html[data-theme="dark"] .page-title p, html[data-theme="dark"] .v119-titlebar span,
html[data-theme="dark"] small, html[data-theme="dark"] .form-help, html[data-theme="dark"] .muted{ color:#9aa7b6 !important; }

/* 카드·패널·KPI 공통 (v119/v120/v123 + 예전 세대 + 일반) */
html[data-theme="dark"] .v119-panel, html[data-theme="dark"] .v119-panel>header,
html[data-theme="dark"] .v119-kpi, html[data-theme="dark"] .v119-titlebar>button,
html[data-theme="dark"] .v119-panel>header button, html[data-theme="dark"] .v123-station-row,
html[data-theme="dark"] .v123-station-head, html[data-theme="dark"] .v123-station-cards>button,
html[data-theme="dark"] .v120-ceo-row, html[data-theme="dark"] .v120-ceo-head,
html[data-theme="dark"] .v123-ceo .v119-panel, html[data-theme="dark"] .v123-ceo .v119-panel>header,
html[data-theme="dark"] .v55-panel, html[data-theme="dark"] .v55-bar, html[data-theme="dark"] .v119-setup-banner,
html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .kpi,
html[data-theme="dark"] .card-list > *, html[data-theme="dark"] .form-card,
html[data-theme="dark"] .station-card, html[data-theme="dark"] .overview-panel,
html[data-theme="dark"] .empty-card, html[data-theme="dark"] .v119-empty, html[data-theme="dark"] .dashboard-no-data,
html[data-theme="dark"] .work-stat, html[data-theme="dark"] .work-shortcut, html[data-theme="dark"] .work-comms,
html[data-theme="dark"] .notification-filter, html[data-theme="dark"] .cost-grid td, html[data-theme="dark"] .cost-grid th{
  background:#161b22 !important; border-color:#2a323c !important; color:#e6ecf3 !important; box-shadow:none !important;
}
html[data-theme="dark"] .v119-kpi strong, html[data-theme="dark"] .v119-kpi small, html[data-theme="dark"] .v119-kpi em,
html[data-theme="dark"] .v119-panel>header strong, html[data-theme="dark"] .v119-panel>header small,
html[data-theme="dark"] .v123-station-row strong, html[data-theme="dark"] .v120-ceo-row .station strong,
html[data-theme="dark"] .kpi strong, html[data-theme="dark"] .kpi span, html[data-theme="dark"] .panel-label{ color:#e6ecf3 !important; }









/* 표 */
html[data-theme="dark"] table, html[data-theme="dark"] .data-table{ background:#161b22 !important; color:#e6ecf3 !important; }

/* (v1.0.78) 예전 여기 있던 #inventoryCards.card-list 단일컬럼 블록은
   위 v1.0.53 목록 규칙 + 아래 .inventory-view 재디자인으로 통합되어 삭제됨. */
html[data-theme="dark"] .data-table thead th, html[data-theme="dark"] thead th{ background:#1c222b !important; color:#9aa7b6 !important; border-color:#2a323c !important; }
html[data-theme="dark"] td, html[data-theme="dark"] th{ border-color:#2a323c !important; }

/* 입력칸 */
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background:#1c222b !important; color:#e6ecf3 !important; border-color:#2f3946 !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:#6b7889 !important; }

/* 배지·칩 */
html[data-theme="dark"] .badge{ background:#20262f !important; color:#c7d2df !important; border-color:#2a323c !important; }
html[data-theme="dark"] .badge.warn{ background:#2a2214 !important; color:#d9a441 !important; }
html[data-theme="dark"] .badge.problem, html[data-theme="dark"] .badge.document{ background:#2c1a17 !important; color:#f26d5b !important; }

/* 다이얼로그 */
html[data-theme="dark"] dialog, html[data-theme="dark"] .recognition-dialog, html[data-theme="dark"] .password-dialog,
html[data-theme="dark"] .install-dialog, html[data-theme="dark"] .search-dialog, html[data-theme="dark"] .notification-dialog{
  background:#161b22 !important; color:#e6ecf3 !important; border:1px solid #2a323c !important;
}
html[data-theme="dark"] dialog::backdrop{ background:rgba(0,0,0,.6); }

/* 채팅·메시지·달력 본문 */
html[data-theme="dark"] .chat-msg, html[data-theme="dark"] .message-card, html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .calendar-grid, html[data-theme="dark"] .ledger-card, html[data-theme="dark"] #messageList > *{
  background:#161b22 !important; border-color:#2a323c !important; color:#e6ecf3 !important;
}

/* 모바일 홈 */
html[data-theme="dark"] .mobile-workcenter, html[data-theme="dark"] .mobile-home-card,
html[data-theme="dark"] .mobile-stat, html[data-theme="dark"] .mobile-action-grid button,
html[data-theme="dark"] .mobile-priority-row, html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .phone-nav, html[data-theme="dark"] .mobile-view-bar,
html[data-theme="dark"] .mobile-home-head{
  background:#161b22 !important; border-color:#2a323c !important; color:#e6ecf3 !important;
}
html[data-theme="dark"] .bottom-nav button, html[data-theme="dark"] .phone-nav button{ color:#9aa7b6 !important; }

/* 로그인 */
html[data-theme="dark"] .login-shell{ background:#0d1117 !important; }
html[data-theme="dark"] .login-card{ background:#161b22 !important; color:#e6ecf3 !important; border:1px solid #2a323c !important; }

/* v1.0.64 다크 — 2차 보강 (v55 화면들 + quiet 버튼 + 흰 조각) */
html[data-theme="dark"] button.quiet, html[data-theme="dark"] .quiet,
html[data-theme="dark"] .qty-option, html[data-theme="dark"] .zoom-option, html[data-theme="dark"] .tab-button{
  background:#1c222b !important; color:#c7d2df !important; border-color:#2f3946 !important;
}
html[data-theme="dark"] .qty-option.active, html[data-theme="dark"] .zoom-option.active,
html[data-theme="dark"] .notification-filter.active{ background:#25405f !important; color:#fff !important; }
/* v55 계열(아침보고·재고조정·주변시세·지출·발주·유류원가) 표/칩/셀 */
html[data-theme="dark"] .v55-fc, html[data-theme="dark"] .v55-fc-head, html[data-theme="dark"] .v55-fc-line,
html[data-theme="dark"] .v55-fc-line.ro, html[data-theme="dark"] .v55-chip, html[data-theme="dark"] .v55-morning-head,
html[data-theme="dark"] .v55-dm-head, html[data-theme="dark"] .v55-dm-row, html[data-theme="dark"] .v55-adj-head,
html[data-theme="dark"] .v55-adj-row, html[data-theme="dark"] .v55-annual-head, html[data-theme="dark"] .v55-annual-row,
html[data-theme="dark"] .v55-market-head, html[data-theme="dark"] .v55-market-row, html[data-theme="dark"] .v55-pay-head,
html[data-theme="dark"] .v55-pay-row, html[data-theme="dark"] .v55-orq-head, html[data-theme="dark"] .v55-orq-row,
html[data-theme="dark"] .v55-fc-item, html[data-theme="dark"] .v55-clone-box, html[data-theme="dark"] .chat-register{
  background:#161b22 !important; color:#e6ecf3 !important; border-color:#2a323c !important;
}
html[data-theme="dark"] .v55-fc-head, html[data-theme="dark"] .v55-morning-head, html[data-theme="dark"] .v55-dm-head,
html[data-theme="dark"] .v55-adj-head, html[data-theme="dark"] .v55-annual-head, html[data-theme="dark"] .v55-market-head,
html[data-theme="dark"] .v55-pay-head, html[data-theme="dark"] .v55-orq-head{ background:#1c222b !important; color:#9aa7b6 !important; }
html[data-theme="dark"] .v55-cell{ background:transparent !important; }
html[data-theme="dark"] .v55-cell.ok{ background:#13291f !important; color:#3fbe7e !important; }
html[data-theme="dark"] .v55-cell.warn{ background:#2a2214 !important; color:#d9a441 !important; }
html[data-theme="dark"] .v55-cell.bad{ background:#2c1a17 !important; color:#f26d5b !important; }
html[data-theme="dark"] .v55-fc-item.done{ background:#13291f !important; border-color:#1f4230 !important; color:#3fbe7e !important; }
html[data-theme="dark"] .v55-fc-item.pending{ border-color:#40392a !important; color:#d9a441 !important; }
/* form-card / step 계열, 설정 화면 */
html[data-theme="dark"] .form-card, html[data-theme="dark"] .system-work-card, html[data-theme="dark"] .setup-station-grid,
html[data-theme="dark"] .setup-tank-row, html[data-theme="dark"] .step-head, html[data-theme="dark"] .screen-hero,
html[data-theme="dark"] .backup-device-panel, html[data-theme="dark"] .station-backup-list > *{
  background:#161b22 !important; color:#e6ecf3 !important; border-color:#2a323c !important;
}
html[data-theme="dark"] .step-badge, html[data-theme="dark"] .step-no{ background:#20262f !important; color:#c7d2df !important; }
html[data-theme="dark"] .safe-line{ background:#13291f !important; color:#3fbe7e !important; }
html[data-theme="dark"] .risk-line{ background:#2c1a17 !important; color:#f26d5b !important; }
html[data-theme="dark"] .v55-market-card, html[data-theme="dark"] .v55-dash-morning,
html[data-theme="dark"] .v55-fieldchecklist, html[data-theme="dark"] .v55-fc-block,
html[data-theme="dark"] .v55-market-fuel, html[data-theme="dark"] .v55-annual-block{
  background:#161b22 !important; color:#e6ecf3 !important; border-color:#2a323c !important;
}

/* v1.0.64 다크 — 3차 (달력·채팅·메시지·자료함) */
html[data-theme="dark"] .cal-kpi, html[data-theme="dark"] .calendar-actionbar, html[data-theme="dark"] .calendar-summary,
html[data-theme="dark"] .calendar-legendbar, html[data-theme="dark"] .calendar-topbar, html[data-theme="dark"] .calendar-tools,
html[data-theme="dark"] .cal-day, html[data-theme="dark"] .calendar-grid > *, html[data-theme="dark"] .cal-tip,
html[data-theme="dark"] .chat-layout, html[data-theme="dark"] .chat-rooms, html[data-theme="dark"] .chat-room-list > *,
html[data-theme="dark"] .chat-thread, html[data-theme="dark"] .chat-compose, html[data-theme="dark"] .chat-room-item,
html[data-theme="dark"] .message-thread-panel, html[data-theme="dark"] .message-compose-panel, html[data-theme="dark"] .message-device-panel,
html[data-theme="dark"] .document-list-panel, html[data-theme="dark"] .document-upload-panel, html[data-theme="dark"] .ledger-entry-panel,
html[data-theme="dark"] .operation-submit-card, html[data-theme="dark"] .cash-summary, html[data-theme="dark"] #manageTabs,
html[data-theme="dark"] .card-list > *, html[data-theme="dark"] .form-grid > label, html[data-theme="dark"] .report-grid > *{
  background:#161b22 !important; color:#e6ecf3 !important; border-color:#2a323c !important;
}
html[data-theme="dark"] .cal-tip.rich .cal-tip-head, html[data-theme="dark"] table.cost-grid thead th{ background:#1c2f45 !important; }
html[data-theme="dark"] .calendar-grid{ background:#0d1117 !important; }

/* v1.0.64 다크 — 4차 (CEO 대시보드 패널 행들 + 달력 요일줄) */

html[data-theme="dark"] .fc-track, html[data-theme="dark"] .v123-fc-bar, html[data-theme="dark"] .bm{ background:#20262f !important; }
html[data-theme="dark"] .calendar-weekday{ background:#1c222b !important; color:#9aa7b6 !important; border-color:#2a323c !important; }
html[data-theme="dark"] .calendar-weekday.sun{ color:#f26d5b !important; }
html[data-theme="dark"] .qty-switch, html[data-theme="dark"] .qty-switch button{ background:#1c222b !important; color:#c7d2df !important; border-color:#2f3946 !important; }
html[data-theme="dark"] .qty-switch button.active{ background:#25405f !important; color:#fff !important; }
html[data-theme="dark"] .ob-day, html[data-theme="dark"] .ob-main, html[data-theme="dark"] .v123-ob-row .ob-stat,
html[data-theme="dark"] details > summary, html[data-theme="dark"] .calendar-tools > summary,
html[data-theme="dark"] .ui-setting-detail-grid, html[data-theme="dark"] .ui-setting-detail > summary{
  background:#1c222b !important; color:#c7d2df !important; border-color:#2a323c !important;
}

/* ══ v1.0.65 — 브리핑 '띠' (대시보드 맨 위 한 줄, 자세히로 펼침) ══ */
#deskBrief{ max-width:none !important; margin:0 0 14px !important; }
#briefHome{ display:block; margin:0 0 10px; }
#briefHome:empty{ display:none; }
.brief-strip{ background:#fff; border:1px solid #e4e9ef; border-radius:11px; overflow:hidden; }
html[data-theme="dark"] .brief-strip{ background:#161b22; border-color:#2a323c; color:#e6ecf3; }
.brief-strip .bs-line{ display:flex; align-items:center; gap:10px; padding:11px 13px; }
.bs-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:#c23b2a; }
.bs-dot.ok{ background:#167c4a; }
html[data-theme="dark"] .bs-dot{ background:#f26d5b; } html[data-theme="dark"] .bs-dot.ok{ background:#3fbe7e; }
.bs-when{ flex:none; font-size:.71rem; color:#8a97a6; font-family:"IBM Plex Mono","Consolas",monospace; }
.bs-msg{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.85rem; font-weight:700; color:#1a2430; }
html[data-theme="dark"] .bs-msg{ color:#e6ecf3; }
.bs-msg b{ font-weight:900; }
.bs-chips{ display:flex; gap:6px; flex:none; }
.bs-chip{ font-size:.69rem; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.bs-chip.bad{ background:#fbe7e3; color:#c23b2a; } .bs-chip.warn{ background:#f8efd8; color:#8a6200; }
html[data-theme="dark"] .bs-chip.bad{ background:#2c1a17; color:#f26d5b; }
html[data-theme="dark"] .bs-chip.warn{ background:#2a2214; color:#d9a441; }
.bs-more{ flex:none; border:0; background:none; color:#1e5edc; font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; padding:2px 4px; white-space:nowrap; }
html[data-theme="dark"] .bs-more{ color:#4d9bff; }
.bs-exp{ display:none; border-top:1px solid #e4e9ef; padding:12px 13px; }
html[data-theme="dark"] .bs-exp{ border-color:#2a323c; }
.brief-strip[data-open="1"] .bs-exp{ display:block; }
.bs-h{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#8a97a6; font-weight:800; margin:2px 0 7px; }
.bs-h:not(:first-child){ margin-top:14px; }
.bs-h b{ color:#1e5edc; } html[data-theme="dark"] .bs-h b{ color:#4d9bff; }
.bs-cards{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.bs-normal{ font-size:.82rem; color:#5b6b7c; padding:8px 0 0; } html[data-theme="dark"] .bs-normal{ color:#9aa7b6; }
.bs-total{ font-size:.83rem; color:#5b6b7c; margin-top:12px; padding-top:10px; border-top:1px solid #e4e9ef; }
html[data-theme="dark"] .bs-total{ color:#9aa7b6; border-color:#2a323c; }
.bs-total b{ font-weight:800; color:#1a2430; } html[data-theme="dark"] .bs-total b{ color:#e6ecf3; }
.bs-allok{ font-size:.85rem; color:#5b6b7c; text-align:center; padding:4px 0; }
/* 폰: 아주 좁게, 스크롤해도 위에 붙음, when·chips 숨김 */
@media (max-width:720px){
  #briefHome .brief-strip{ position:sticky; top:0; z-index:6; border-radius:10px; }
  #briefHome .bs-line{ padding:9px 12px; gap:8px; }
  #briefHome .bs-when{ display:none; }
  #briefHome .bs-msg{ font-size:.8rem; }
  #briefHome .bs-chips{ display:none; }
  .bs-cards{ grid-template-columns:1fr; }
}

/* ══ v1.0.67~69 — 대시보드 블럭 그리드 (모든 역할 대시보드의 유일한 레이아웃) ══════
   부품 = .dblk · 크기 = sz-sm(4칸)/md(6)/lg(8)/full(12) · 12칸 그리드 · ≤960px 전부 세로 1줄.
   패널 겉모습(.v119-panel / .v119-kpi / .v123-ceo .v119-panel …)·다크테마는 기존 규칙을 그대로 물려받는다.
   v1.0.69: 옛 행/열 그리드(.v119-grid.* / .v123-grid.*)는 삭제. 남은 옛 역할별 grid-template-rows
   (.v119-dashboard.ceo/.admin/.manager · .v123-ceo 의 mega-line 안)는 아래 reset 으로 무력화됨 —
   mega-line 편집 위험이 커서 선언만 죽여 두고 실제 제거는 추후. */
/* 블럭 대시보드는 rigid 한 옛 grid-template-rows(역할별 고정 픽셀 높이)를 쓰지 않는다 — 내용 높이대로 흐른다. */

.v119-dashboard-host:has(.dash-blocks){ overflow:auto !important; height:auto !important; min-height:0 !important; }









@media (max-width:960px){
  
  
}

/* ══ v1.0.71 — 대표 홈 재설계 (ceo2) ══════════════════════════════════════════
   가독성 중심. 노란 둥근 테두리 없음. 상태 = ○ △ ✕ 글자, 숫자 = 큰 고정폭.
   .dash-blocks.ceo (PC 대시보드) 와 .ceo2-mobile (폰 홈) 두 곳에서 같은 조각을 씀.
   관리자·소장 화면은 안 건드린다. */
.dash-blocks, .ceo2{
  --c2-ink:#1b232e; --c2-mut:#5c6672; --c2-faint:#8b939d;
  --c2-line:#e4ded4; --c2-line2:#efeae1; --c2-surf:#ffffff; --c2-raise:#faf8f4;
  --c2-accent:#1f5f8b; --c2-ok:#1f7a4d; --c2-warn:#a9741a; --c2-bad:#bd3b3b;
  /* 비중 도넛 6색. 색맹이어도 밝기 차이로 구분되게 명도를 벌려 놓는다. */
  --c3-p1:#1f5f8b; --c3-p2:#7fb2d4; --c3-p3:#2f8f6b; --c3-p4:#d99a2b; --c3-p5:#8f6bb5; --c3-p6:#9aa7b6;
  font-family:"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif;
}
html[data-theme="dark"] .dash-blocks, html[data-theme="dark"] .ceo2{
  --c2-ink:#e8ebef; --c2-mut:#9aa4b0; --c2-faint:#727d89;
  --c2-line:#2a3037; --c2-line2:#242a31; --c2-surf:#1b1f26; --c2-raise:#20252d;
  --c2-accent:#63a8d6; --c2-ok:#4bbd82; --c2-warn:#d6a24e; --c2-bad:#e0665f;
  --c3-p1:#63a8d6; --c3-p2:#2f6f99; --c3-p3:#4bbd82; --c3-p4:#d6a24e; --c3-p5:#a98fd0; --c3-p6:#7b8794;
}
.ceo2-num{ font-family:"IBM Plex Mono",ui-monospace,"Consolas",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* --- PC 대시보드 패널 껍데기: 얇은 테두리, 조용한 머리글 --- */









/* --- 폰 홈 wrapper --- */

.ceo2-mod > h3{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c2-mut); margin:0 0 10px; }

/* --- 아침 보고 표 --- */










  





/* --- 봐야 할 곳 --- */













/* --- 오늘 숫자 --- */






@media (min-width:960px){  }

/* --- 매출 순위 --- */










/* --- 주변시세 --- */








 

/* v1.0.71 — 폰 홈: ceo2 모듈이 들어오면 stats 그리드를 풀고, 옛 노란 상단 테두리를 조용한 왼쪽 선으로 */

.mobile-stat{ border-top-width:1px !important; border-top-color:#dbe3ec !important; box-shadow:none !important; border-left:2px solid #c7d0dc !important; border-radius:8px !important; }
.mobile-stat.has{ border-left-color:#5b7a9c !important; }
html[data-theme="dark"] .mobile-stat{ border-top-color:#2a3037 !important; border-left-color:#3a424c !important; }
html[data-theme="dark"] .mobile-stat.has{ border-left-color:#63a8d6 !important; }

/* v1.0.72 — 대표 홈 = 대시보드. KPI 카드 + 주유소별 현황 카드. 독촉/지시 버튼 제거. */
.ceo2-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:720px){ .ceo2-kpis{ grid-template-columns:repeat(4,1fr); } }
.ceo2-kpi{ display:flex; flex-direction:column; gap:3px; padding:13px 14px; border:1px solid var(--c2-line); border-radius:11px; background:var(--c2-surf); text-decoration:none; color:var(--c2-ink); }
.ceo2-kpi-k{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--c2-faint); }
.ceo2-kpi strong{ font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.ceo2-kpi strong small{ font-size:12px; color:var(--c2-faint); font-weight:400; }
.ceo2-kpi-sub{ font-size:11px; color:var(--c2-faint); }
.ceo2-kpi.warn strong{ color:var(--c2-warn); }


@media (min-width:720px){  }







  














/* v1.0.72 — KPI 카드: 숫자 아닌 값("원가 대기")은 본문 글꼴로, 글자 넓게 벌어지지 않게 */
.ceo2-kpi strong.ceo2-txt{ font-family:"IBM Plex Sans KR","Malgun Gothic",sans-serif; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.ceo2-kpi strong.ceo2-num{ letter-spacing:0; }

/* ══ v1.0.74 — 그래프 대시보드 (ceo3). 나이 있는 분들이 그림으로 본다: 큰 막대·도넛·링 + 값 표시 ══ */
.ceo2 .ceo3-empty, .dash-blocks .ceo3-empty{ font-size:12.5px; color:var(--c2-faint); padding:14px 4px; }

/* 매출 추이 */
.ceo3-trend{ display:flex; flex-direction:column; gap:12px; }
.ceo3-trend-head{ display:flex; align-items:baseline; gap:12px; }
.ceo3-trend-head b{ font-size:24px; font-weight:700; color:var(--c2-ink); }
.ceo3-delta{ font-size:12.5px; font-weight:600; }
.ceo3-delta.up{ color:var(--c2-ok); } .ceo3-delta.dn{ color:var(--c2-bad); }
.ceo3-trend-plot{ position:relative; display:flex; align-items:flex-end; gap:5px; height:150px; padding-top:18px; }
.ceo3-bar{ position:relative; flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.ceo3-bar > i{ width:min(26px,80%); background:var(--c2-accent); border-radius:3px 3px 0 0; display:block; min-height:3px; }
.ceo3-bar > b{ position:absolute; top:-2px; font-size:10px; font-weight:600; color:var(--c2-mut); white-space:nowrap; }
.ceo3-bar > small{ margin-top:5px; font-size:10px; color:var(--c2-faint); }
.ceo3-trend-line{ position:absolute; left:0; right:0; top:18px; bottom:16px; width:100%; height:calc(100% - 34px); pointer-events:none; overflow:visible; }
.ceo3-trend-line polyline{ fill:none; stroke:var(--c2-ink); stroke-width:1.6; opacity:.35; vector-effect:non-scaling-stroke; }

/* 주유소별 가로 막대 */










/* 도넛 */











/* 아침 보고 진행 링 */










/* 탱크 게이지 */





/* 발주선(안전재고) 눈금 — 막대가 이 선 아래로 내려오면 주문할 때다 */





/* 주변시세 (0선 기준 좌우 막대) */



/* 어느 유종 기준인지 이름 옆에 작게 */







 


/* KPI 카드 스파크라인 */
/* ── v1.0.75 — 메뉴 위 요약을 막대로. 홈 그래프와 같은 언어로 맞춘다 ── */
.menu-context-kpis .menu-context-kpi{ position:relative; }
.mctx-bar{ display:block; height:5px; border-radius:3px; background:#e6ebf1; overflow:hidden; margin-top:4px; }
.mctx-bar b{ display:block; height:100%; border-radius:3px; background:#c98a12; }
.menu-context-kpi.ok .mctx-bar b{ background:#168451; }
html[data-theme="dark"] .mctx-bar{ background:#242a31; }
html[data-theme="dark"] .mctx-bar b{ background:#d6a24e; }
html[data-theme="dark"] .menu-context-kpi.ok .mctx-bar b{ background:#4bbd82; }
/* 어두운 화면에서 #b96f05 / #168451 은 너무 어두워 안 읽힌다 → 밝은 쪽으로 */
html[data-theme="dark"] .menu-context-kpis .menu-context-kpi.warn strong{ color:#e0ad5c !important; }
html[data-theme="dark"] .menu-context-kpis .menu-context-kpi.ok strong{ color:#5cc98f !important; }

/* 폰에서도 메뉴마다 요약이 보이게. 예전엔 959px 아래에서 통째로 감췄다
   → 폰으로 일하는 소장·부장은 메뉴를 열어도 아무 요약이 없었다.
   위 기본 배치는 전부 @media(min-width:960px) 안에 있으니, 폰은 여기서 처음부터 짠다.
   1줄: [메뉴 이름] ......... [홈]   2줄: [숫자 막대들] */
@media(max-width:959px){
  .menu-context-strip{
    display:grid !important; grid-template-columns:1fr auto; column-gap:8px; row-gap:8px;
    margin:0 0 10px; padding:10px 12px;
    border:1px solid #dbe3ec; border-radius:12px; background:#fff;
  }
  .menu-context-title{ grid-row:1; grid-column:1; display:flex; align-items:baseline; gap:6px; min-width:0; }
  .menu-context-title>span{ font-size:.62rem; color:#1768e8; font-weight:800; white-space:nowrap; }
  .menu-context-title>strong{ font-size:.95rem; color:#17314e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .menu-context-title>small{ display:none; }
  .menu-context-home{
    grid-row:1; grid-column:2; margin:0; align-self:center; white-space:nowrap;
    border:1px solid #bfd1e6; background:#f3f7fc; color:#145aa8;
    border-radius:8px; padding:5px 10px; font-size:.72rem; font-weight:700;
  }
  .menu-context-kpis{
    grid-row:2; grid-column:1/-1; border-left:0;
    display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px;
  }
  .menu-context-kpis article,
  .menu-context-kpis .menu-context-kpi{
    border:0; border-right:0; background:none; padding:0; min-width:0;
    display:grid; gap:3px; align-content:start; text-align:left;
  }
  .menu-context-kpis span{ font-size:.62rem; color:#71879d; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .menu-context-kpis strong{ font-size:1.05rem; color:#17314e; font-variant-numeric:tabular-nums; }
  .menu-context-kpis .menu-context-kpi.warn strong{ color:#b96f05; }
  .menu-context-kpis .menu-context-kpi.ok strong{ color:#168451; }
  html[data-theme="dark"] .menu-context-title>strong,
  html[data-theme="dark"] .menu-context-kpis strong{ color:#e6ecf3; }
  html[data-theme="dark"] .menu-context-home{ background:#1c222b; border-color:#2a323c; color:#8fc0ee; }
}
html[data-theme="dark"] .menu-context-strip{ background:#161b22 !important; border-color:#2a323c !important; }

/* 폰에서 도넛/링을 세로로 */
@media (max-width:520px){
  
}

/* ── PC 전체 주유소 한눈표: 정보는 유지하고 행 높이만 줄인다 ── */
@media (min-width:960px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (min-width:1200px){
  
}


/* v1.0.82 — 역할별 메인 메뉴 구분 + 기초 설정 우선 강조
   업무 상태색(문제/주의/정상)과 섞이지 않도록 역할 구분은 사이드바 메뉴에만 적용한다. */
@media (min-width:960px){
  #roleMenuRoot[data-menu-role="CEO"]{ --role-menu-accent:#8b6bc4; --role-menu-soft:rgba(139,107,196,.18); --role-menu-line:#bba7df; }
  #roleMenuRoot[data-menu-role="ADMIN"]{ --role-menu-accent:#2a82e8; --role-menu-soft:rgba(42,130,232,.18); --role-menu-line:#86baf4; }
  #roleMenuRoot[data-menu-role="ADMIN_FIELD"],
  #roleMenuRoot[data-menu-role="STATION_MANAGER"],
  #roleMenuRoot[data-menu-role="DEPARTMENT_HEAD"],
  #roleMenuRoot[data-menu-role="SECTION_CHIEF"]{ --role-menu-accent:#1a8d86; --role-menu-soft:rgba(26,141,134,.18); --role-menu-line:#73c7c1; }

  
  
  
  

  /* 미완료 기초 설정은 역할색보다 우선한다. 메뉴 첫 칸에서 바로 해야 할 일로 보이게 한다. */
  
  
  
  
}


/* ══ v1.0.83 — 버전 번호 상시 표시 보강 ══
   PC 상단바가 좁아져 기존 버전 칩이 가려져도 왼쪽 메뉴 하단에서 현재 버전을 항상 확인한다. */

@media (min-width:960px){
  body .sidebar-nav{ padding-bottom:184px!important; }
  
  
  
  body .topbar #versionChip{
    background:#ffffff!important; color:#173653!important; border:1px solid #cbd9e8!important;
    min-height:26px!important; padding:3px 8px!important; font-weight:950!important;
  }
}
@media (max-width:959px){
  
  body .topbar #versionChip{ display:inline-flex!important; align-items:center!important; justify-content:center!important; }
}
/* ══ v1.0.83 — 끝 ══ */

/* Data availability must not look like a successful zero-value dashboard. */
.workflow-data-warning{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;margin-bottom:10px;border:1px solid #e8c27a;border-top:3px solid #d97706;border-radius:12px;background:#fffaf0;color:#78350f;font-size:13px;line-height:1.5;box-shadow:0 2px 8px rgba(120,53,15,.05)}
.workflow-data-warning span{flex:1;min-width:160px;overflow-wrap:anywhere}
.workflow-data-warning button{min-height:42px;padding:8px 14px;border:1px solid #92400e;border-radius:6px;background:#fff;color:#78350f;font-weight:700;cursor:pointer}
@media(max-width:959px){.workflow-data-warning{display:grid;grid-template-columns:1fr;font-size:14px}.workflow-data-warning button{width:100%;min-height:44px}}
@media(min-width:960px){
  body .topbar > .topbar-brand-v119{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;max-width:none!important;line-height:1.2!important;gap:8px!important}
  body .topbar > .topbar-brand-v119 strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:959px){
  
  
  
  
  
}

/* ══════════════════════════════════════════════════════════════════════════════
   v1.0.93 USER-CENTERED DASHBOARD
   목적: 컴퓨터에 익숙하지 않은 사용자도 첫 화면에서 상태 → 해야 할 일 → 상세 순서로 읽는다.
   PC와 휴대폰은 같은 데이터를 쓰되, 휴대폰에서는 그래프를 접어서 업무 버튼을 먼저 보여준다.
   ══════════════════════════════════════════════════════════════════════════════ */














/* 상태판: 색에 의존하지 않고 모든 칸에 한글 상태를 같이 쓴다. */












/* 현장 역할: 해야 할 일을 번호 순서로 크게 보여준다. */



/* v1.0.93: 대시보드의 한글 제목은 작고 희미한 영문식 헤더가 아니라 바로 읽히게. */





.ceo2-kpi{min-height:88px;justify-content:center;padding:12px 14px}.ceo2-kpi-k{font-size:11px!important;font-weight:850!important}.ceo2-kpi strong{font-size:23px!important;line-height:1.1!important}.ceo2-kpi-sub{font-size:10.5px!important;line-height:1.25!important}

/* 역할별로 상태판 첫인상만 구분. 메뉴/권한 색과 충돌하지 않게 옅게 사용한다. */




/* 휴대폰: 그래프를 먼저 보여 주고, 상태 목록은 접어서 본다. */







.v193-mobile-more{border:1px solid #dce5ee;border-radius:10px;background:#fff;overflow:hidden}.v193-mobile-more>summary{min-height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#23547d;font-size:12px;font-weight:900;cursor:pointer;list-style:none}.v193-mobile-more>summary::-webkit-details-marker{display:none}.v193-mobile-more>summary::after{content:"펼치기 ＋";font-size:10px;color:#6c7f92}.v193-mobile-more[open]>summary{border-bottom:1px solid #e6ebf0}.v193-mobile-more[open]>summary::after{content:"접기 －"}.v193-mobile-more>.ceo2-mod{padding:12px;border-bottom:1px solid #eef2f5}.v193-mobile-more>.ceo2-mod:last-child{border-bottom:0}.v193-mobile-more .ceo3-trend-plot{height:120px}.v193-mobile-more .ceo3-bar>small{font-size:9px}

/* 직원 폰도 큰 동작 버튼과 분명한 글자로 통일한다. */
@media(max-width:959px){
  .mobile-action-grid button,.mobile-work-actions button{min-height:76px!important;border-radius:10px!important}.mobile-action-grid button strong,.mobile-work-actions button strong{font-size:.76rem!important;line-height:1.25!important}.mobile-alert-list button{min-height:58px!important}.mobile-alert-list strong{font-size:.72rem!important}.mobile-alert-list small{font-size:.62rem!important;line-height:1.35!important}
  .brief-strip .bs-line{padding:10px 9px!important;gap:7px!important}.brief-strip .bs-msg{font-size:11px!important;line-height:1.35!important}.brief-strip .bs-more{min-width:54px!important;font-size:9.5px!important}
}
@media(max-width:560px){
  .mobile-home-head h1{font-size:1.18rem!important}.mobile-home-head p{font-size:.68rem!important;line-height:1.4!important}
}
@media(min-width:960px) and (max-width:1280px){
  
}



html[data-theme="dark"] .v193-station,html[data-theme="dark"] .v193-steps>section,html[data-theme="dark"] .v193-mobile-more,html[data-theme="dark"] .v193-mobile-graphs .ceo2-mod{background:#1b2027;border-color:#303943;color:#e6edf4}

/* ══ v1.1.3 — 운영현황·보고 중심 역할 UI / PC+PHONE ══ */
.setup-role-note{margin:0 0 10px;padding:9px 12px;border:1px solid #d9e5f1;border-radius:9px;background:#f7fbff;color:#46617b;font-size:11px;line-height:1.5;font-weight:750}
.setup-tank-item{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}.setup-tank-item .setup-item-sub{grid-column:1}.setup-tank-delete{grid-column:2;grid-row:1/3;min-width:54px}.quiet.danger{color:#b42318;border-color:#efc6c2;background:#fff7f6}.quiet.danger:hover{background:#fff0ee;border-color:#dfa7a2}

.operation-hub{margin:0 0 12px}.operation-hub-field,.operation-hub-summary{border:1px solid #dce6ef;border-radius:12px;background:#fff;padding:12px;box-shadow:0 2px 8px rgba(26,59,93,.04)}
.operation-hub-field-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.operation-hub-field-head>div{display:grid;gap:2px}.operation-hub-field-head span{font-size:10px;color:#75879a;font-weight:800}.operation-hub-field-head strong{font-size:17px;color:#233f5b}
.operation-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.operation-hub-action{min-height:82px;border:1px solid #dce5ee;border-radius:10px;background:#f9fbfd;text-align:left;padding:10px 11px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:4px 8px;color:#28445f;font:inherit;cursor:pointer}.operation-hub-action>span{font-size:12px;font-weight:950}.operation-hub-action>small{grid-column:1/-1;font-size:10px;color:#708296;line-height:1.35}.operation-hub-action>b{font-size:10px;color:#176ac7}.operation-hub-action.ok{background:#f2faf5;border-color:#cfe6d7}.operation-hub-action.warn{background:#fff9ef;border-color:#efd8b2}.operation-hub-action.na{background:#f5f6f8;color:#718093}
.operation-hub-summary{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:stretch}.operation-hub-summary>div:first-child{border:1px solid #d7e3ee;border-radius:10px;background:#f6faff;padding:13px;display:grid;align-content:center;gap:3px}.operation-hub-summary>div:first-child>span{font-size:10px;color:#6d8196;font-weight:850}.operation-hub-summary>div:first-child>strong{font-size:27px;color:#1c5d97}.operation-hub-summary>div:first-child>small{font-size:10px;color:#657a90}.operation-hub-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}.operation-hub-stations button{min-height:66px;border:1px solid #dfe7ef;border-radius:9px;background:#fff;text-align:left;padding:8px 9px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;color:#2c4864;font:inherit;cursor:pointer}.operation-hub-stations button span{font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.operation-hub-stations button b{font-size:12px;color:#176ac7}.operation-hub-stations button small{grid-column:1/-1;font-size:9.5px;color:#7a8b9c}

.report-head-v112{align-items:stretch!important}.report-head-v112>div:first-child p:last-child{margin:4px 0 0;color:#6f8194;font-size:11px}.report-progress-ring{min-width:82px;min-height:60px;border:1px solid #d7e3ee;border-radius:10px;background:#f6faff;padding:7px 10px;display:grid;place-content:center;text-align:center}.report-progress-ring b{font-size:17px;color:#1d619b}.report-progress-ring small{font-size:9px;color:#74869a}
.report-card-v112{border:1px solid #dfe7ee;border-top:3px solid #37a36b;border-radius:12px;box-shadow:0 2px 8px rgba(20,41,67,.04)}.report-card-v112.warn{border-top-color:#d89424}.report-card-v112.bad{border-top-color:#d34a43}.report-card-open{width:100%;border:0;background:transparent;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;padding:2px 0 9px;text-align:left;color:#27445f;font:inherit;cursor:pointer}.report-card-open>span{display:grid;gap:2px;min-width:0}.report-card-open strong{font-size:13px}.report-card-open small{font-size:9.5px;color:#7b8c9e}.report-card-open>b{font-size:11px;color:#315f8d}.report-card-open>em{font-style:normal;font-size:10px;color:#176ac7;font-weight:850}.report-lines-v112{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.report-line-v112{min-height:42px;padding:6px 7px;border:1px solid #dfe7ee;border-radius:7px;background:#f8fafc;display:grid;align-content:center;gap:2px}.report-line-v112 b{font-size:9.5px;color:#53697e}.report-line-v112 em{font-size:10px;font-style:normal;font-weight:900;color:#278052}.report-line-v112.missing{background:#fff5f2;border-color:#efcfca}.report-line-v112.missing em{color:#b53a32}.report-line-v112.na{background:#f4f5f7}.report-line-v112.na em{color:#7c8997}
.report-station-detail{margin-top:14px;border:1px solid #dbe5ee;border-radius:12px;background:#fff;padding:14px}.report-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px}.report-detail-head span{font-size:10px;color:#74879a;font-weight:850}.report-detail-head h2{margin:2px 0;font-size:18px;color:#223e59}.report-detail-head p{margin:0;color:#708296;font-size:10.5px}.report-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px}.report-detail-summary article{min-height:68px;border:1px solid #e0e7ee;border-radius:9px;padding:8px 9px;background:#fafcfd;display:grid;align-content:center;gap:2px}.report-detail-summary span{font-size:9.5px;color:#718498}.report-detail-summary b{font-size:13px;color:#294760}.report-detail-summary b.ok{color:#208052}.report-detail-summary b.bad{color:#b93b34}.report-detail-summary small{font-size:9px;color:#7f8d9b}
.report-doc-section{margin-top:12px}.report-doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.report-doc-card{border:1px solid #dfe7ee;border-radius:9px;background:#fafcfd;padding:9px;display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}.report-doc-card>div:first-child{display:grid;gap:2px;min-width:0}.report-doc-card>div:first-child b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-doc-card>div:first-child small{font-size:9px;color:#7c8c9c}.report-doc-type{font-size:9px;font-weight:900;color:#24649b}.report-recognition{grid-column:1/-1;display:flex;gap:5px;flex-wrap:wrap}.report-recognition span{padding:4px 6px;border-radius:6px;background:#eef5fb;color:#46647f;font-size:9px}.report-recognition b{margin-right:4px;color:#275578}.report-original-open{min-height:34px}.report-submit-list{display:grid;gap:6px}.report-submit-list button{min-height:54px;border:1px solid #dfe7ef;border-radius:8px;background:#fff;padding:7px 9px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;color:#2a4762;font:inherit;cursor:pointer}.report-submit-list button span{font-size:10px;font-weight:900}.report-submit-list button b{font-size:10px;color:#176ac7}.report-submit-list button small{grid-column:1/-1;font-size:9px;color:#7d8d9d}


@media(max-width:959px){
  .operation-layout{grid-template-columns:1fr!important}.operation-hub{margin:0 0 9px}.operation-hub-field,.operation-hub-summary{padding:9px;border-radius:10px}.operation-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.operation-hub-action{min-height:72px;padding:8px}.operation-hub-action>span{font-size:11px}.operation-hub-action>small{font-size:9px}.operation-hub-summary{grid-template-columns:1fr;gap:7px}.operation-hub-summary>div:first-child{min-height:74px;grid-template-columns:auto auto;align-items:center;column-gap:8px}.operation-hub-summary>div:first-child>strong{font-size:23px}.operation-hub-stations{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.operation-hub-stations button{min-height:58px;padding:7px}.operation-submit-card,.operation-inbox-panel{padding:10px!important}.operation-file-label{min-height:54px!important}
  .report-head-v112{display:grid!important;gap:9px}.report-head-right{justify-content:flex-start!important;flex-wrap:wrap}.report-grid{grid-template-columns:1fr!important}.report-card-v112{padding:9px!important}.report-card-open{grid-template-columns:1fr auto;padding-bottom:7px}.report-card-open>em{display:none}.report-lines-v112{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.report-line-v112{min-height:38px;padding:5px}.report-station-detail{padding:10px;margin-top:10px}.report-detail-head h2{font-size:16px}.report-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.report-detail-summary article{min-height:60px;padding:7px}.report-doc-grid{grid-template-columns:1fr}.report-doc-card{grid-template-columns:1fr auto;padding:8px}.report-original-open{min-height:40px;min-width:72px}.report-recognition{gap:4px}.report-recognition span{font-size:8.5px}.report-submit-list button{min-height:50px}
  .setup-grid{grid-template-columns:1fr!important}.setup-role-note{font-size:10px}.setup-tank-item{grid-template-columns:1fr auto}.setup-tank-delete{min-height:38px}
}
@media(max-width:520px){
  .operation-hub-grid{grid-template-columns:1fr 1fr}.operation-hub-field-head{align-items:flex-start}.operation-hub-field-head strong{font-size:15px}.operation-hub-stations{grid-template-columns:1fr 1fr}.report-lines-v112{grid-template-columns:1fr 1fr}.report-detail-summary{grid-template-columns:1fr 1fr}.report-progress-ring{min-width:72px}
}
html[data-theme="dark"] .operation-hub-field,html[data-theme="dark"] .operation-hub-summary,html[data-theme="dark"] .report-station-detail,html[data-theme="dark"] .v112-mobile-report{background:#1b2027;border-color:#303943;color:#e7edf3}html[data-theme="dark"] .operation-hub-action,html[data-theme="dark"] .operation-hub-stations button,html[data-theme="dark"] .report-doc-card,html[data-theme="dark"] .report-submit-list button,html[data-theme="dark"] .report-detail-summary article{background:#20262d;border-color:#343f4a;color:#e6edf4}html[data-theme="dark"] .report-line-v112,html[data-theme="dark"] .report-progress-ring{background:#232a32;border-color:#36414c}

/* ══ v1.1.4 — 카드 가장자리 색 띠 전면 제거 / PC+PHONE ══
   상태는 배지·점·배경톤·텍스트로만 표현한다. 왼쪽/위쪽 색 선은 쓰지 않는다. */
.station-card.problem,
.metric,
.station-tile,
.cal-kpi,
.message-card,
.trend-kpi,
.backup-kind,
.warn-box,
.restore-warn,
.restore-kind,
.priority-high,.priority-urgent,.priority-normal,.priority-low,
.ok-card,
.work-push-required,
.role-station-row,
.business-task-card,
.mobile-priority-card,
.mobile-priority-row,
.role-station-mini,
.screen-hero.protect,.screen-hero.rewind,
.restore-run.danger-step,
.notification-open.priority-normal,.notification-open.priority-high,.notification-open.priority-urgent,
.station-backup-row.ok,.station-backup-row.warn,
.difference-box,
.tank-forecast-row,
.ceo-st-main,
.v119-table-row,
.menu-context-title {
  border-left-width:1px!important;
  border-left-color:var(--line,#dce4ed)!important;
}

/* 대시보드/KPI/보고/브리핑의 위쪽 상태 띠도 전부 제거 */
.role-dashboard-kpis .work-stat.has-value,
.mobile-stat,.mobile-stat.has,
.closing-editor,
[data-view="inventory"]>[data-inventory-pane="movement"],
.workflow-data-warning,
.bh-card,.bh-card.bad,
.ceo2-exc-card,.ceo2-exc-card.warn,
.v193-guide,.v193-guide.warn,.v193-guide.bad,.v193-guide.unknown,
.v193-station,.v193-station.warn,.v193-station.bad,
.report-card-v112,.report-card-v112.warn,.report-card-v112.bad,
body .v119-dashboard .v119-kpi,
body .v123-kpis .v119-kpi,
body .v119-kpis .v119-kpi,
body .v119-dashboard .v119-kpi.ok,
body .v119-dashboard .v119-kpi.warn,
body .v119-dashboard .v119-kpi.bad,
body .v123-kpis .v119-kpi.ok,
body .v123-kpis .v119-kpi.warn,
body .v123-kpis .v119-kpi.bad {
  border-top-width:1px!important;
  border-top-color:var(--line,#dce4ed)!important;
}

/* 역할 메뉴도 왼쪽 색 띠 없이 배경/아이콘으로만 활성 상태를 표시 */

.sidebar-nav button[data-nav].active{box-shadow:none!important}

/* 색선이 사라진 뒤에도 상태는 충분히 구분되도록 면과 배지만 사용 */
.v193-guide.bad,.v193-station.bad,.report-card-v112.bad{background:#fff8f7!important;border-color:#efcfcb!important}
.v193-guide.warn,.v193-station.warn,.report-card-v112.warn{background:#fffcf5!important;border-color:#ead9b8!important}
.v193-guide:not(.bad):not(.warn):not(.unknown),.v193-station:not(.bad):not(.warn),.report-card-v112:not(.bad):not(.warn){background:#fff!important}
.station-card.problem,.message-card.urgent,.work-push-required.problem,.role-station-row.needs,.mobile-priority-row.needs,.role-station-mini.needs,.station-backup-row.warn,.tank-forecast-row.bad{background:#fff8f7!important}
.station-tile.problem,.cal-kpi.bad,.trend-kpi.warn,.tank-forecast-row.warn{background:#fffcf5!important}

/* PC/폰 동일 원칙 */
@media(max-width:959px){
  
  .mobile-stat,.mobile-stat.has{border-left-width:1px!important;border-left-color:#dce4ed!important}
}
html[data-theme="dark"] .v193-guide.bad,
html[data-theme="dark"] .v193-station.bad,
html[data-theme="dark"] .report-card-v112.bad,
html[data-theme="dark"] .station-card.problem,
html[data-theme="dark"] .message-card.urgent,
html[data-theme="dark"] .role-station-row.needs,
html[data-theme="dark"] .mobile-priority-row.needs,
html[data-theme="dark"] .role-station-mini.needs{background:#282126!important;border-color:#4a3940!important}
html[data-theme="dark"] .v193-guide.warn,
html[data-theme="dark"] .v193-station.warn,
html[data-theme="dark"] .report-card-v112.warn{background:#28251f!important;border-color:#4b4332!important}
/* ══ v1.1.4 — 끝 ══ */
/* v1.1.4 보강 — 고특이도/과거 레이아웃의 색선도 제거 */
.v119-setup-banner,
[data-view="calendar"] .cal-kpi{
  border-left-width:1px!important;
  border-left-color:var(--line,#dce4ed)!important;
}


/* ════════════════════════════════════════════════════════════════════════════
   v1.2.0 — 역할·업무 흐름 최종 스타일 / PC + PHONE
   기존 업무 로직·HTML ID·API 연결은 유지하고, 공통 표면/여백/상태 표현만 통일한다.
   중요: 카드의 왼쪽/위쪽 색 강조선은 사용하지 않는다.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --v120-bg:#f3f6f9;
  --v120-surface:#ffffff;
  --v120-surface-2:#f7f9fb;
  --v120-surface-3:#edf2f7;
  --v120-border:#dfe6ed;
  --v120-border-strong:#ccd7e1;
  --v120-ink:#1c2a39;
  --v120-muted:#66788a;
  --v120-faint:#91a0ae;
  --v120-accent:#286eaa;
  --v120-accent-soft:#eaf2f8;
  --v120-ok:#257b55;
  --v120-ok-soft:#edf7f1;
  --v120-warn:#a96f18;
  --v120-warn-soft:#fbf5e8;
  --v120-bad:#b94b45;
  --v120-bad-soft:#fbefee;
  --v120-shadow:0 2px 9px rgba(25,49,72,.055);
  --v120-shadow-up:0 8px 24px rgba(25,49,72,.075);
}
html[data-theme="dark"]{
  --v120-bg:#11171e;
  --v120-surface:#1a222b;
  --v120-surface-2:#202a34;
  --v120-surface-3:#26323e;
  --v120-border:#303c48;
  --v120-border-strong:#43515f;
  --v120-ink:#e9eef4;
  --v120-muted:#a5b1bd;
  --v120-faint:#75818d;
  --v120-accent:#65a5d7;
  --v120-accent-soft:#1b3041;
  --v120-ok:#59b98b;
  --v120-ok-soft:#173126;
  --v120-warn:#d1a155;
  --v120-warn-soft:#302716;
  --v120-bad:#df7772;
  --v120-bad-soft:#321e1e;
  --v120-shadow:0 2px 9px rgba(0,0,0,.18);
  --v120-shadow-up:0 10px 26px rgba(0,0,0,.23);
}
body{background:var(--v120-bg);color:var(--v120-ink)}
#mainContent{background:var(--v120-bg)}
#mainContent>.view{padding-top:2px}
#mainContent .page-title{margin:0 0 13px}
#mainContent .page-title h1,#mainContent .page-title h2{color:var(--v120-ink);letter-spacing:-.025em}
#mainContent .page-title p{color:var(--v120-muted);margin-bottom:0}

/* 공통 PC 쉘 — 네이비 메뉴 + 중립 본문 */

.sidebar-brand{padding-bottom:13px!important;margin-bottom:7px!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
.sidebar-brand-mark{border-radius:9px!important;background:rgba(255,255,255,.13)!important;box-shadow:none!important}
.sidebar-brand-copy small{color:#9fb4c8!important}
.role-menu-root{gap:9px!important;margin:6px 0 12px!important}










.topbar-v119{background:var(--v120-surface)!important;border-bottom:1px solid var(--v120-border)!important;box-shadow:none!important}
.topbar-v119 .quiet,.topbar-v119 button{border-radius:8px!important}

/* 기존 패널/폼/표도 같은 표면 규칙으로 정리 */
.panel,.overview-panel,.trend-panel,.form-card,.station-card,.table-scroll,.data-table,
.operation-submit-card,.operation-inbox-panel,.report-card-v112,.report-station-detail,
.setup-card,.calendar-summary,.calendar-tools,.calendar-actionbar,.chat-layout{
  background:var(--v120-surface)!important;border:1px solid var(--v120-border)!important;
  box-shadow:var(--v120-shadow)!important;border-radius:12px!important;
}
.panel,.overview-panel,.trend-panel,.form-card,.setup-card{padding:14px!important}
input,select,textarea{background:var(--v120-surface)!important;color:var(--v120-ink)!important;border-color:var(--v120-border-strong)!important;border-radius:9px!important}
.primary,.quiet,.action-button,.tab-button{border-radius:8px!important}
.quiet{background:var(--v120-surface)!important;border:1px solid var(--v120-border)!important;color:var(--v120-ink)!important}

/* ── v1.2.0 역할별 운영현황 ───────────────────────────────────────────── */






.v1200-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}

.v1200-kpi{position:relative;min-width:0;min-height:82px;display:grid;align-content:center;gap:3px;text-align:left;padding:10px 11px;border:1px solid var(--v120-border);border-radius:11px;background:var(--v120-surface);box-shadow:var(--v120-shadow);color:var(--v120-ink);font:inherit}
button.v1200-kpi{cursor:pointer}
button.v1200-kpi:hover{border-color:var(--v120-border-strong);box-shadow:var(--v120-shadow-up)}
.v1200-kpi>span{font-size:9px;color:var(--v120-muted);font-weight:850}
.v1200-kpi>strong{font-size:19px;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1200-kpi>small{font-size:8.5px;color:var(--v120-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1200-kpi>small.up{color:var(--v120-ok)}.v1200-kpi>small.warn{color:var(--v120-warn)}.v1200-kpi>small.bad{color:var(--v120-bad)}
.v1200-kpi>b{position:absolute;right:9px;top:8px;color:var(--v120-faint);font-size:11px}
.v1200-grid{display:grid;gap:9px;align-items:start}
.v1200-grid.primary{grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr)}

.v1200-grid.halves{grid-template-columns:repeat(2,minmax(0,1fr))}
.v1200-card{min-width:0;background:var(--v120-surface);border:1px solid var(--v120-border);border-radius:12px;padding:12px;box-shadow:var(--v120-shadow)}
.v1200-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:9px}
.v1200-card>header small{display:block;font-size:8.5px;color:var(--v120-faint);font-weight:750;margin-bottom:2px}
.v1200-card>header h3{margin:0;font-size:11.5px;color:var(--v120-ink);letter-spacing:-.015em}
.v1200-card>header>button{min-height:31px;border:1px solid var(--v120-border);border-radius:8px;background:var(--v120-surface-2);color:var(--v120-accent);font-size:8.5px;font-weight:900;padding:5px 8px}
.v1200-empty{min-height:68px;border:1px dashed var(--v120-border-strong);border-radius:9px;background:var(--v120-surface-2);display:grid;place-items:center;text-align:center;padding:12px;color:var(--v120-muted);font-size:9px}
.v1200-empty.ok{color:var(--v120-ok);background:var(--v120-ok-soft)}
.v1200-more{margin-top:6px;color:var(--v120-faint);font-size:8.5px;text-align:right}

/* 탱크: 실제 등록된 1번~마지막 탱크를 모두 표시. 유종색은 내용물에만 사용 */



.v1200-tank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px}
.v1200-tank-card{min-width:0;display:grid;gap:7px;text-align:left;padding:9px;border:1px solid var(--v120-border);border-radius:10px;background:var(--v120-surface-2);color:var(--v120-ink);font:inherit;box-shadow:none}
.v1200-tank-card:hover{border-color:var(--v120-border-strong);background:var(--v120-surface)}
.v1200-tank-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;min-width:0}
.v1200-tank-card>header>span{min-width:0}.v1200-tank-card>header b{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v1200-tank-card>header small{display:block;margin-top:2px;color:var(--v120-muted);font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1200-tank-card>header em{font-style:normal;font-size:7.5px;font-weight:900;border-radius:999px;padding:3px 5px;background:var(--v120-surface-3);color:var(--v120-muted);white-space:nowrap}
.v1200-tank-card>header em.ok{background:var(--v120-ok-soft);color:var(--v120-ok)}.v1200-tank-card>header em.warn{background:var(--v120-warn-soft);color:var(--v120-warn)}.v1200-tank-card>header em.bad{background:var(--v120-bad-soft);color:var(--v120-bad)}
.v1200-tank-visual{height:80px;position:relative;overflow:hidden;border:1px solid var(--v120-border);border-radius:9px;background:var(--v120-surface);display:flex;align-items:center;justify-content:center}
.v1200-tank-visual>i{position:absolute;left:0;right:0;bottom:0;opacity:.78}
.v1200-tank-visual>u{position:absolute;left:0;right:0;border-top:1px dashed var(--v120-warn);text-decoration:none;z-index:2}
.v1200-tank-visual>strong{position:relative;z-index:3;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.86);color:#233647;font-size:13px;box-shadow:0 1px 4px rgba(20,43,62,.10)}
html[data-theme="dark"] .v1200-tank-visual>strong{background:rgba(20,28,36,.84);color:#eef4f8}
.v1200-tank-numbers{display:grid;grid-template-columns:1fr 1fr;gap:4px}.v1200-tank-numbers>span{padding:5px 6px;border-radius:7px;background:var(--v120-surface)}.v1200-tank-numbers small{display:block;font-size:7px;color:var(--v120-faint)}.v1200-tank-numbers b{display:block;margin-top:1px;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1200-tank-card>footer{display:flex;justify-content:space-between;gap:7px;align-items:center;font-size:7.2px;color:var(--v120-faint)}.v1200-tank-card>footer b{color:var(--v120-muted);font-size:7.5px;text-align:right}

/* 보고 진행/보고 매트릭스 */





.v1200-report-matrix{display:grid;gap:4px;overflow:auto}
.v1200-report-head,.v1200-report-row{min-width:430px;display:grid;grid-template-columns:minmax(112px,1.35fr) repeat(4,minmax(58px,.7fr)) 18px;gap:4px;align-items:center}
.v1200-report-head{padding:0 7px 3px}.v1200-report-head span{font-size:7.5px;color:var(--v120-faint);font-weight:850;text-align:center}.v1200-report-head span:first-child{text-align:left}
.v1200-report-row{border:1px solid var(--v120-border);border-radius:8px;background:var(--v120-surface-2);padding:6px 7px;color:var(--v120-ink);text-align:left;font:inherit}
.v1200-report-row:hover{background:var(--v120-surface)}
.v1200-report-row>span b{display:block;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v1200-report-row>span small{display:block;font-size:7px;color:var(--v120-muted);margin-top:1px}
.v1200-report-row em{font-style:normal;text-align:center;border-radius:6px;padding:4px 3px;background:var(--v120-surface);font-size:7.3px;color:var(--v120-muted);font-weight:900}.v1200-report-row em.ok{background:var(--v120-ok-soft);color:var(--v120-ok)}.v1200-report-row em.bad{background:var(--v120-bad-soft);color:var(--v120-bad)}.v1200-report-row em.na{color:var(--v120-faint)}.v1200-report-row>i{font-style:normal;color:var(--v120-accent);text-align:right}

/* 대표 비교 / 문제 주유소 */


.v1200-system{display:grid;gap:6px}.v1200-system>span{display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px 8px;border-radius:8px;background:var(--v120-surface-2)}.v1200-system b,.v1200-system em{font-size:8px}.v1200-system em{font-style:normal;color:var(--v120-muted)}.v1200-system em.ok{color:var(--v120-ok)}.v1200-system em.warn{color:var(--v120-warn)}
.v1200-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.v1200-quick>button{min-height:58px;text-align:left;border:1px solid var(--v120-border);border-radius:9px;background:var(--v120-surface-2);padding:8px;color:var(--v120-ink);font:inherit}.v1200-quick b{display:block;font-size:9px}.v1200-quick small{display:block;margin-top:3px;color:var(--v120-muted);font-size:7.5px;line-height:1.4}

/* 주유소 상세 대시보드 */
.v1200-station-detail{display:grid;gap:10px}
.v1200-station-detail .station-detail-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.v1200-detail-reports{display:grid;gap:5px}.v1200-detail-reports>div{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:7px 8px;border-radius:8px;background:var(--v120-surface-2)}.v1200-detail-reports span{font-size:8.5px}.v1200-detail-reports b{font-size:8.5px}.v1200-detail-reports b.ok{color:var(--v120-ok)}.v1200-detail-reports b.bad{color:var(--v120-bad)}.v1200-detail-reports b.na{color:var(--v120-muted)}
.v1200-source-list{display:grid;gap:6px}.v1200-source-list>button{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;text-align:left;border:1px solid var(--v120-border);border-radius:9px;background:var(--v120-surface-2);padding:7px 8px;color:var(--v120-ink);font:inherit}.v1200-source-list b{display:block;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v1200-source-list small{display:block;margin-top:2px;font-size:7px;color:var(--v120-muted)}.v1200-source-list em{font-style:normal;color:var(--v120-accent);font-size:7.5px;font-weight:900}

/* ── 보고/보고현황: 기존 기능 보존 + 최종 스타일 통일 ───────────────── */
.operation-layout{gap:10px!important}
.operation-hub-field,.operation-hub-summary{background:var(--v120-surface)!important;border:1px solid var(--v120-border)!important;border-radius:12px!important;box-shadow:var(--v120-shadow)!important}
.operation-hub-action{border:1px solid var(--v120-border)!important;border-left:1px solid var(--v120-border)!important;border-top:1px solid var(--v120-border)!important;border-radius:9px!important;background:var(--v120-surface-2)!important;box-shadow:none!important}
.operation-hub-action.ok{background:var(--v120-ok-soft)!important}.operation-hub-action.warn{background:var(--v120-warn-soft)!important}.operation-hub-action.bad{background:var(--v120-bad-soft)!important}
.operation-hub-stations button{border-radius:9px!important;background:var(--v120-surface-2)!important;border:1px solid var(--v120-border)!important}
.report-card-v112,.report-card-v112.warn,.report-card-v112.bad{border:1px solid var(--v120-border)!important;border-left:1px solid var(--v120-border)!important;border-top:1px solid var(--v120-border)!important;border-radius:11px!important;background:var(--v120-surface)!important;box-shadow:var(--v120-shadow)!important}
.report-card-v112.warn{background:var(--v120-warn-soft)!important}.report-card-v112.bad{background:var(--v120-bad-soft)!important}
.report-line-v112{border-radius:8px!important;background:var(--v120-surface-2)!important;border-color:var(--v120-border)!important}.report-line-v112.done{background:var(--v120-ok-soft)!important}.report-line-v112.missing{background:var(--v120-bad-soft)!important;border-color:var(--v120-border)!important}
.report-doc-card{background:var(--v120-surface-2)!important;border-color:var(--v120-border)!important;border-radius:9px!important}
.report-recognition span{background:var(--v120-accent-soft)!important;border-radius:7px!important}
.report-submit-list button{background:var(--v120-surface-2)!important;border-color:var(--v120-border)!important;border-radius:9px!important}

/* ── 달력: 매출/보고/입고/결제의 날짜 축 ────────────────────────────── */
.calendar-topbar{gap:8px!important;margin-bottom:9px!important}
.calendar-summary{display:grid!important;gap:8px!important;border-radius:12px!important}
.calendar-grid{gap:1px!important;background:var(--v120-border)!important;border-color:var(--v120-border)!important;border-radius:10px!important;overflow:hidden}
.calendar-grid>div{background:var(--v120-surface)!important;border:0!important;min-height:92px}
.calendar-day{background:var(--v120-surface)!important}.calendar-day:hover{background:var(--v120-surface-2)!important}
.calendar-day.today{box-shadow:inset 0 0 0 2px var(--v120-ink)!important}

.calendar-tools,.calendar-actionbar{padding:10px!important}

/* ── 채팅: 같은 표면/라운드/여백 규칙 ───────────────────────────────── */
.chat-layout{border-radius:12px!important;background:var(--v120-surface)!important;overflow:hidden!important}
.chat-rooms{background:var(--v120-surface-2)!important;border-right:1px solid var(--v120-border)!important}
.chat-rooms-head,.chat-thread-head{border-color:var(--v120-border)!important;background:var(--v120-surface)!important}
.chat-room-item{border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;margin:3px 5px!important}
.chat-room-item:hover{background:var(--v120-surface-3)!important}.chat-room-item.active{background:var(--v120-accent-soft)!important;border-color:var(--v120-border)!important}
.chat-thread,.chat-messages{background:var(--v120-surface)!important}
.chat-bubble{border-radius:11px!important;background:var(--v120-surface-2)!important;border:1px solid var(--v120-border)!important;box-shadow:none!important}
.chat-msg.mine .chat-bubble{background:var(--v120-accent-soft)!important}
.chat-composer{background:var(--v120-surface)!important;border-top:1px solid var(--v120-border)!important}

/* ── 기본설정: 수시변경 vs 구조값을 같은 카드 체계로 ───────────────── */
.setup-context-bar{border:1px solid var(--v120-border)!important;border-radius:10px!important;background:var(--v120-surface)!important;box-shadow:var(--v120-shadow)!important}
.setup-grid{gap:10px!important}
.setup-card{border-radius:12px!important;background:var(--v120-surface)!important;border:1px solid var(--v120-border)!important}
.setup-list{gap:6px!important}.setup-item{border:1px solid var(--v120-border)!important;border-radius:9px!important;background:var(--v120-surface-2)!important;padding:8px!important}
.setup-price-row,.setup-tank-item{border:1px solid var(--v120-border)!important;border-radius:9px!important;background:var(--v120-surface-2)!important;padding:8px!important}
.setup-price-state{border-radius:999px!important}

/* dark: 구형 하드코딩 흰색을 공통 변수로 교정 */
html[data-theme="dark"] .v1200-card,html[data-theme="dark"] .v1200-kpi,html[data-theme="dark"] .v1200-tank-card,
html[data-theme="dark"] .operation-hub-field,html[data-theme="dark"] .operation-hub-summary,html[data-theme="dark"] .report-card-v112,
html[data-theme="dark"] .setup-card,html[data-theme="dark"] .chat-layout,html[data-theme="dark"] .calendar-grid>div{
  color:var(--v120-ink)!important;background:var(--v120-surface)!important;border-color:var(--v120-border)!important;
}

/* ── PHONE: 같은 정보, 다른 배치. 기능을 숨기지 않는다. ───────────────── */
@media(max-width:959px){
  #mainContent{background:var(--v120-bg)!important}
  #mainContent>.view{padding-left:9px!important;padding-right:9px!important}
  
  
  
  
  
  /* v1.3.131 — 폰 '업무' 화면: 운영현황 묶음이 숫자 칸 4줄 격자(#mobileWorkStats)의 한 칸(약 85px)에 갇혀 글자가 한두 자씩 세로로 찍혔다. 한 줄 전체를 쓰게 한다. */
  .mobile-home-stats>.v1200-mobile-host{grid-column:1/-1;min-width:0}
  .v1200-kpis,.v1200-overview.admin .v1200-kpis,.v1200-station-detail .station-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .v1200-kpi{min-height:74px;padding:9px}.v1200-kpi>strong{font-size:17px}.v1200-kpi>span{font-size:8.5px}.v1200-kpi>small{font-size:8px}
  .v1200-grid.primary,.v1200-grid.thirds,.v1200-grid.halves{grid-template-columns:1fr;gap:7px}
  .v1200-card{padding:10px;border-radius:11px}.v1200-card>header h3{font-size:11px}.v1200-card>header>button{min-height:40px;padding:7px 9px}
  .v1200-tank-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .v1200-tank-visual{height:72px}.v1200-tank-card{padding:8px}.v1200-tank-card>header b{font-size:9px}.v1200-tank-card>footer{display:grid;gap:2px}.v1200-tank-card>footer b{text-align:left}
  
  .v1200-report-matrix{margin:0 -2px;padding-bottom:2px}
  .v1200-report-head,.v1200-report-row{min-width:400px}
  
  
  .v1200-quick>button{min-height:58px}
  .operation-layout{grid-template-columns:1fr!important}.operation-hub-action,.operation-hub-stations button{min-height:48px!important}
  .report-original-open,.report-submit-list button,.operation-status-btn,.setup-price-save,.setup-tank-delete{min-height:42px!important}
  .calendar-grid>div{min-height:66px!important}
  .chat-layout{grid-template-columns:1fr!important;height:auto!important;min-height:520px!important}
  .chat-rooms{border-right:0!important;border-bottom:1px solid var(--v120-border)!important;max-height:180px;overflow:auto}
  .chat-thread{min-height:330px}
  .setup-grid{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .v1200-tank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1200-tank-numbers{grid-template-columns:1fr}
  .v1200-quick{grid-template-columns:1fr 1fr}
}
/* ══ v1.2.0 — 끝 ══ */

/* v1.2.2 — 최종 공통 규칙: 카드/패널 상태를 색 띠로 표현하지 않는다.
   오래된 화면별 규칙이 뒤섞여 있어도 이 마지막 레이어가 항상 이긴다. */
.priority-high,.priority-urgent,.priority-normal,.priority-low,
.ok-card,.work-push-required,.role-station-row,.business-task-card,
.mobile-priority-card,.mobile-priority-row,.role-station-mini,
.message-card,.screen-hero.protect,.screen-hero.rewind,
.station-backup-row.ok,.station-backup-row.warn,
.tank-forecast-row.bad,.tank-forecast-row.warn,.tank-forecast-row.ok,.tank-forecast-row.not-ready,
.workflow-data-warning,.v193-station,.report-card-v112,
.inventory-view .tank-record-row.warning,.inventory-view .tank-record-row.problem,
.inventory-view .inventory-record-row.warning,.inventory-view .inventory-record-row.problem,
.manager-tank-card,.manager-tank-card.warn,.manager-tank-card.danger {
  border-left-width:1px!important;
  border-left-color:var(--line,#dbe3ec)!important;
  border-top-width:1px!important;
  border-top-color:var(--line,#dbe3ec)!important;
  box-shadow:none!important;
}
.role-dashboard-kpis .work-stat.has-value,.mobile-stat.has,.closing-editor,
[data-view="inventory"]>[data-inventory-pane="movement"] {
  border-top-width:1px!important;
  border-top-color:var(--line,#dbe3ec)!important;
}
.role-nav-item.active,.role-menu-root button.active,.sidebar-nav button[data-nav].active {
  box-shadow:none!important;
}

/* v1.2.4 terminal mapping edit/delete: show the saved relationship itself, not only a label. */
.setup-terminal-item{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:3px}.setup-terminal-item .setup-item-main{grid-column:1}.setup-terminal-item .setup-item-sub{grid-column:1;line-height:1.45}.setup-terminal-item>.button-row{grid-column:2;grid-row:1/3;margin:0;align-self:center;white-space:nowrap}.setup-terminal-item.muted{opacity:.68}.setup-terminal-item .button-row button{min-width:48px}@media(max-width:720px){.setup-terminal-item{grid-template-columns:1fr}.setup-terminal-item>.button-row{grid-column:1;grid-row:auto;justify-content:flex-end;margin-top:4px}}


/* v1.2.5 단말기 입력순서/한글 우선 입력 */
.terminal-sortbar{display:flex;align-items:end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 5px}.terminal-sortbar label{display:grid;gap:3px;font-size:.67rem;font-weight:800;color:#4a5b6e}.terminal-sortbar select{min-height:32px;min-width:132px}.terminal-sortbar small{color:#6b7785;font-size:.66rem}.setup-order-no{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:6px;border:1px solid var(--v120-border,#d7dde5);border-radius:999px;background:var(--v120-surface,#fff);font-size:.66rem;font-weight:800;color:#667085;vertical-align:middle}@media(max-width:720px){.terminal-sortbar{align-items:stretch}.terminal-sortbar label{width:100%}.terminal-sortbar select{width:100%}}


/* v1.3.4 관리자 전체 초기화: 명확한 위험 버튼 + 경고 모달 */
.factory-reset-danger{
  border:1px solid #b42318!important;background:#d92d20!important;color:#fff!important;
  font-weight:900!important;box-shadow:0 2px 6px rgba(180,35,24,.18)!important;
}
.factory-reset-danger:hover{background:#b42318!important;border-color:#912018!important}
.factory-reset-danger:disabled{opacity:.55!important;cursor:not-allowed!important}
.setup-factory-reset .button-row{justify-content:flex-end}
#factoryResetExecute{min-width:180px;min-height:42px}
.factory-reset-dialog{width:min(560px,calc(100vw - 24px));border:1px solid #f0b4ae;border-radius:10px;padding:0;background:#fff;box-shadow:0 24px 70px rgba(50,15,12,.32)}
.factory-reset-dialog::backdrop{background:rgba(16,24,40,.62)}
.factory-reset-dialog-body{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 20px 14px}
.factory-reset-warning-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fee4e2;color:#b42318;font-size:1.25rem;font-weight:1000}
.factory-reset-dialog h2{margin:0 0 8px;color:#8f1d14;font-size:1.18rem}
.factory-reset-dialog p{margin:0 0 8px;color:#344054;font-size:.8rem;line-height:1.62}
.factory-reset-dialog .factory-reset-backup-note{padding:9px 10px;background:#fff4f2;border:1px solid #fecdca;border-radius:6px;color:#7a271a}
.factory-reset-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px;border-top:1px solid #f2d5d2}
.factory-reset-dialog-actions button{min-height:40px;padding:0 16px}
@media(max-width:959px){.factory-reset-dialog-body{grid-template-columns:36px 1fr;padding:16px 14px 12px}.factory-reset-warning-icon{width:34px;height:34px}.factory-reset-dialog-actions{padding:10px 14px 14px}.factory-reset-dialog-actions button{flex:1}}

/* v1.3.7 — 자료 촬영·원본 모아보기·간편 인식수정 */
.document-capture-guide{margin:10px 0 12px;padding:11px 12px;border:1px solid #cfd8e6;border-radius:8px;background:#f8fbff;display:grid;gap:4px}
.document-capture-guide strong{font-size:.88rem;color:#163a63}.document-capture-guide p{margin:0;font-size:.82rem;line-height:1.5;color:#344054}.document-capture-guide small{color:#667085;line-height:1.45}
.document-list-workspace{min-width:0;display:grid;gap:8px}.document-filter-panel{margin:0!important}.document-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:7px}.document-filter-grid label{display:grid;gap:4px;font-size:.78rem;color:#475467}.document-filter-grid input,.document-filter-grid select{min-width:0}
.document-quick-review-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.document-raw-text{margin:12px 0;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.document-raw-text textarea{width:100%;margin-top:8px;resize:vertical;font-family:"IBM Plex Mono",monospace;font-size:.75rem;line-height:1.45;box-sizing:border-box}
.document-gallery-dialog{width:min(1240px,calc(100% - 20px));}.document-gallery-shell{padding:18px;overflow:auto;max-height:calc(100vh - 24px)}.document-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.document-gallery-card{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-width:0}.document-gallery-preview{height:230px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}.document-gallery-preview img{width:100%;height:100%;object-fit:contain;background:#fff}.document-gallery-preview iframe{width:100%;height:100%;border:0;background:#fff}.document-gallery-fileicon{font-size:2.2rem}.document-gallery-meta{padding:9px 10px;display:grid;gap:5px}.document-gallery-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.document-gallery-meta small{color:#667085}.document-gallery-meta .button-row{margin-top:3px}
.document-record-row .identity-warning{font-size:.75rem;color:#b45309;margin-top:4px}.document-record-row .identity-ok{font-size:.75rem;color:#067647;margin-top:4px}
@media (max-width:1100px){.document-filter-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.document-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.document-filter-grid{grid-template-columns:1fr 1fr}.document-gallery-grid{grid-template-columns:1fr}.document-gallery-preview{height:300px}.document-quick-review-dialog .form-grid{grid-template-columns:1fr}.document-capture-guide{font-size:.9rem}.upload-primary-actions{grid-template-columns:1fr!important}}
html[data-theme="dark"] .document-capture-guide{background:#16202c;border-color:#344054}.document-capture-guide strong{color:inherit}html[data-theme="dark"] .document-capture-guide p,html[data-theme="dark"] .document-capture-guide small{color:#cbd5e1}html[data-theme="dark"] .document-gallery-card{background:#111827}html[data-theme="dark"] .document-gallery-preview{background:#0f172a}

/* ============================================================
   v1.3.13 — 달력: 매입자료 / 확정실패 현장 모드
   ============================================================ */
.calendar-view-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calendar-mode-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;background:#e8eef5;border:1px solid #d4dee9;border-radius:7px}
.calendar-mode-option{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 16px;border-radius:5px;font-size:.75rem;font-weight:900;color:#4b6075}
.calendar-mode-option.active{background:#173f68;color:#fff;box-shadow:0 1px 3px #10182822}
.calendar-legendbar .qty-switch{border-radius:7px}
.calendar-legendbar .qty-option{border-radius:5px}
.calendar-failure-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.calendar-failure-filters[hidden],#calendarQtyWrap[hidden],#calendarFuelLegend[hidden]{display:none!important}
.calendar-day.purchase-mode .purchase-badge{background:#eef7f1;color:#1e6b43;border-color:#cce6d5}
.calendar-day.failure-mode .calendar-failure-badge{background:#fff1f0;color:#b42318;border-color:#f3c4c0;font-weight:900}
.calendar-day.failure-mode .day-sales{font-weight:900;color:#137047;background:#eef8f1}

.calendar-mode-tip .calendar-purchase-tip-list,.calendar-mode-tip .calendar-failure-tip-list{display:grid;border:1px solid #e0e8ef;border-radius:6px;overflow:hidden}
.calendar-purchase-tip-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:7px 8px;border-top:1px solid #e9eef3;background:#fff}
.calendar-purchase-tip-row:first-child{border-top:0}
.calendar-purchase-tip-row>div{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.calendar-purchase-tip-row strong{font-size:10.5px;color:#173a5d}
.calendar-purchase-tip-row small{font-size:8.5px;color:#66798d}
.calendar-purchase-tip-row span{font-size:9.5px;color:#526b83}
.calendar-purchase-tip-row>b{font-size:11px;color:#172b4d;white-space:nowrap}
.calendar-purchase-tip-row>em{font-size:8.5px;font-style:normal;color:#66798d;white-space:nowrap}
.calendar-finance-tip{display:flex;align-items:center;gap:16px;padding:9px 11px;background:#f4f8fc;border-bottom:1px solid #dce6ef;font-size:11px}
.calendar-finance-tip strong{font-size:11.5px;color:#173a5d}
.calendar-finance-tip span{font-weight:900;color:#36607f}
.calendar-failure-tip-row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(116px,auto);gap:8px;align-items:center;padding:7px 8px;border-top:1px solid #e9eef3;background:#fff}
.calendar-failure-tip-row:first-child{border-top:0}
.calendar-failure-tip-row time{font-weight:900;color:#b42318;font-variant-numeric:tabular-nums}
.calendar-failure-tip-row>div{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.calendar-failure-tip-row>div small{color:#66798d;font-size:8.5px}
.calendar-failure-tip-row>div strong{font-size:10px;color:#172b4d}
.calendar-failure-tip-row>div span{font-size:9.5px;color:#526b83}
.calendar-failure-tip-row>b{font-size:10px;color:#173a5d;text-align:right;white-space:nowrap}

.calendar-day-financial-card{display:flex;align-items:center;gap:18px;padding:10px 13px;border:1px solid #cbd9e6;background:#f5f9fd;border-radius:6px}
.calendar-day-financial-card strong{font-size:13px;color:#173a5d}
.calendar-day-financial-card span{font-size:12px;font-weight:900;color:#36607f}
.calendar-detail-station{display:block;margin-top:2px;font-size:10px;color:#708399;font-weight:700}
.calendar-purchase-detail .station-head>div{min-width:0}
.calendar-purchase-main{display:flex;align-items:baseline;gap:10px;margin:12px 0 8px;padding:10px 12px;background:#f4f8fc;border:1px solid #dbe6ef;border-radius:6px}
.calendar-purchase-main span{font-size:11px;font-weight:800;color:#5d7187}
.calendar-purchase-main strong{font-size:20px;color:#173a5d;font-variant-numeric:tabular-nums}
.calendar-purchase-quantities{display:flex;gap:10px;flex-wrap:wrap}
.calendar-purchase-quantities span{display:inline-flex;gap:5px;padding:5px 8px;background:#f8fafc;border:1px solid #e1e8ef;border-radius:5px;font-size:11px;color:#526b83}
.calendar-purchase-quantities b{color:#172b4d}
.calendar-purchase-source{display:block;margin-top:8px;font-size:10px;color:#718399;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-failure-detail{padding:14px!important}
.calendar-failure-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.calendar-failure-detail-head time{font-size:17px;font-weight:950;color:#b42318;font-variant-numeric:tabular-nums}
.calendar-failure-money{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.calendar-failure-money>div{padding:10px 12px;border:1px solid #e1e8ef;background:#f8fafc;border-radius:6px}
.calendar-failure-money span{display:block;margin-bottom:3px;font-size:10px;font-weight:800;color:#66798d}
.calendar-failure-money strong{font-size:18px;color:#b42318}
.calendar-failure-money b{font-size:16px;color:#173a5d}
.failure-approval-no{margin-top:9px;padding:10px 12px;border:2px solid #173f68;background:#fff;border-radius:6px}
.failure-approval-no span{display:block;font-size:10px;font-weight:900;color:#526b83}
.failure-approval-no strong{display:block;margin-top:2px;font-size:24px;line-height:1.1;letter-spacing:.06em;color:#102f50;font-variant-numeric:tabular-nums;word-break:break-all}
.calendar-failure-minor{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.calendar-failure-minor span{font-size:10px;color:#66798d;background:#f5f7fa;border:1px solid #e2e8ef;border-radius:4px;padding:3px 6px}
.calendar-failure-detail p{margin:9px 0 0;font-size:10.5px;color:#66798d}
@media(max-width:900px){.calendar-view-controls{align-items:flex-start;flex-direction:column}.calendar-failure-tip-row{grid-template-columns:52px minmax(0,1fr)}.calendar-failure-tip-row>b{grid-column:2;text-align:left}.calendar-failure-money{grid-template-columns:1fr}.failure-approval-no strong{font-size:21px}.calendar-day-financial-card{flex-wrap:wrap;gap:8px}}

/* v1.3.16 — 달력 매입자료는 글자색을 바꾸지 않고 유종별로 아주 옅은 배경만 깐다. */
.purchase-badge { color: inherit; border-color: rgba(91,102,114,.16); }
.purchase-badge.fuel-bg-reg { background: rgba(224,160,32,.12); }
.purchase-badge.fuel-bg-die { background: rgba(47,158,107,.12); }
.purchase-badge.fuel-bg-hi { background: rgba(235,135,60,.13); }
.purchase-badge.fuel-bg-ker { background: rgba(72,126,176,.10); }
.purchase-badge.fuel-bg-urea { background: rgba(122,111,176,.10); }
.purchase-badge.fuel-bg-etc { background: rgba(91,102,114,.07); }
.day-flag.goods { background: #7a6fb0; }
.calendar-goods-badge { background: rgba(122,111,176,.08); color: inherit; border-color: rgba(122,111,176,.16); }
.calendar-goods-tip-list { display: grid; gap: 6px; }
.calendar-goods-tip-row { display: grid; grid-template-columns: minmax(120px,1fr) auto auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: rgba(122,111,176,.06); }
.calendar-goods-tip-row span,.calendar-goods-tip-row em { font-size: .75rem; font-style: normal; white-space: nowrap; }
.calendar-goods-detail { border-left: 4px solid rgba(122,111,176,.45); }
.calendar-goods-numbers { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.calendar-goods-numbers span { display: inline-flex; gap: 5px; align-items: baseline; }
@media (max-width: 700px) { .calendar-goods-tip-row { grid-template-columns: 1fr 1fr; } }

/* v1.3.17 — 마감일지 중심 유외상품 운영현황 */
.goods-overview-panel{margin:0 0 14px;padding:14px;border:1px solid var(--line,#dfe3ea);border-radius:14px;background:var(--panel,#fff)}
.goods-overview-list{display:grid;gap:8px}



















@media(max-width:800px){}

/* v1.3.18 — 최근 유외상품 운영현황의 PHONE 전용 배치 보정.
   PC 스타일은 그대로 두고 959px 이하에서만 카드/버튼/그래프가 화면 밖으로 밀리지 않게 한다. */
@media(max-width:959px){
  .dashboard-goods-strip,
  .goods-overview-panel{
    margin:8px 0!important;
    padding:10px!important;
    border-radius:10px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .dashboard-goods-strip>.station-head,
  .goods-overview-panel>.station-head,
  .goods-overview-row>.station-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    align-items:start!important;
  }
  .dashboard-goods-strip>.station-head>div,
  .goods-overview-panel>.station-head>div,
  .goods-overview-row>.station-head>div{
    min-width:0!important;
  }
  .dashboard-goods-strip>.station-head h2,
  .goods-overview-panel>.station-head h2{
    margin:0 0 2px!important;
    font-size:.92rem!important;
    line-height:1.25!important;
  }
  .dashboard-goods-strip>.station-head small,
  .goods-overview-panel>.station-head small,
  .goods-overview-row>.station-head small{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.35!important;
  }
  .dashboard-goods-strip>.station-head>button,
  .goods-overview-panel>.station-head>button{
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media(max-width:420px){
  
  
  
  
  
}


/* v1.3.20 — 모든 메뉴 공통 조회기간 + PHONE 실제 반응형 보정.
   폰은 PC 폭을 억지로 축소하지 않고 입력/버튼을 세로로 재배치한다. */
.global-period-bar{display:flex;align-items:end;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line,#dce4ed);border-radius:12px;background:var(--panel,#fff)}
.global-period-copy{display:grid;gap:2px;margin-right:auto;min-width:180px}.global-period-copy strong{font-size:.82rem}.global-period-copy small{font-size:.7rem;color:var(--muted,#6b7785);line-height:1.35}
.global-period-bar label{display:grid;gap:3px;font-size:.68rem;font-weight:800;color:var(--muted,#667085)}
.global-period-bar input{min-height:36px;min-width:142px}
.global-period-bar button{min-height:36px;white-space:nowrap}
@media(max-width:959px){
  #mainContent{max-width:100%;overflow-x:hidden}
  .global-period-bar{display:grid!important;grid-template-columns:1fr 1fr;align-items:end;gap:8px;padding:10px;margin-bottom:10px}
  .global-period-copy{grid-column:1/-1;min-width:0;margin:0}.global-period-copy small{white-space:normal;overflow-wrap:anywhere}
  .global-period-bar label{min-width:0;width:100%}.global-period-bar input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  .global-period-bar button{grid-column:1/-1;width:100%}
  .page-title{min-width:0;max-width:100%}.page-title>div,.station-head>div{min-width:0}
  .page-title h1,.page-title p,.station-head h2,.station-head small{overflow-wrap:anywhere}
  .btn-row,.button-row{max-width:100%;flex-wrap:wrap}.btn-row>*{min-width:0;max-width:100%}
  .form-grid{grid-template-columns:1fr!important}.form-grid>*{min-width:0;max-width:100%}
  .inventory-context-bar{grid-template-columns:1fr!important}.inventory-context-bar>*{min-width:0;max-width:100%}
  .inventory-context-bar label,.inventory-context-bar select{width:100%;max-width:100%}
  .tab-bar{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .card-list,.station-card,.panel,.form-card,.dashboard-goods-strip,.goods-overview-panel{max-width:100%;min-width:0;box-sizing:border-box}
  table{max-width:100%}
}
@media(max-width:430px){
  .global-period-bar{grid-template-columns:1fr}.global-period-copy,.global-period-bar button{grid-column:1}.global-period-bar label{grid-column:1}
  .page-title .btn-row{width:100%}.page-title .btn-row input,.page-title .btn-row button{width:100%}
}

/* ============================================================
   v1.3.21 — 운영 대시보드/입고예정/유외상품: PC+모바일 동시 보강
   - 글보다 그래프, 정상은 담백하게 / 부족·위험만 강하게
   - 유외상품은 Excel형 촘촘한 표
   - 달력은 오늘 / 입고예정 / 실제입고를 즉시 구분
   ============================================================ */
.v1321-dashboard{display:grid;gap:8px;min-width:0}
.v1321-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 2px 2px}
.v1321-head small{font-size:9px;color:#667085;font-weight:800}
.v1321-head h2{margin:2px 0 0;font-size:17px;line-height:1.15;letter-spacing:-.02em;color:#172b4d}
.v1321-head-status{display:flex;align-items:center;gap:7px;font-size:9px;color:#667085}
.v1321-head-status button{min-height:28px;padding:3px 9px;border:1px solid #d7e0e9;background:#fff;border-radius:6px;color:#37516d;font-weight:900}
.v1321-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.v1321-kpis .v1200-kpi{min-height:58px;padding:6px 8px;border-radius:7px;gap:1px;box-shadow:none;background:#fff}
.v1321-kpis .v1200-kpi>span{font-size:8px;font-weight:850}
.v1321-kpis .v1200-kpi>strong{font-size:15px;line-height:1.1}
.v1321-kpis .v1200-kpi>small{font-size:7.5px}
.v1321-kpis .v1200-kpi>b{right:6px;top:5px;font-size:9px}
.v1321-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;min-width:0}
.v1321-card{min-width:0;border:1px solid #dce4ed;border-radius:8px;background:#fff;padding:8px 9px;box-shadow:0 1px 3px #1018280a;overflow:hidden}
.v1321-card>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;border-bottom:1px solid #edf1f5;padding-bottom:5px}
.v1321-card>header h3{margin:0;font-size:11.5px;color:#173a5d;letter-spacing:-.015em}
.v1321-card>header small{font-size:7.5px;color:#7a8796;white-space:nowrap}
.v1321-empty{min-height:68px;display:grid;place-items:center;padding:8px;border:1px dashed #d9e1ea;border-radius:6px;color:#7a8796;font-size:8.5px;text-align:center;background:#fbfcfd}
.v1321-bars{display:grid;gap:4px;min-width:0}
.v1321-bar-row{appearance:none;border:0;background:transparent;color:inherit;width:100%;display:grid;grid-template-columns:minmax(96px,1.25fr) minmax(90px,1.8fr) minmax(70px,.7fr) minmax(62px,.8fr);align-items:center;gap:6px;min-height:24px;padding:2px 3px;border-radius:4px;text-align:left;font:inherit;min-width:0}
button.v1321-bar-row{cursor:pointer}.v1321-bar-row:hover{background:#f7faff}
.v1321-bar-row>span{font-size:8.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#344054}
.v1321-bar-row>i{position:relative;height:8px;border-radius:2px;background:#eef2f6;overflow:visible;min-width:0}
.v1321-bar-row>i>em{display:block;height:100%;min-width:1px;border-radius:2px;background:#6688ab}
.v1321-bar-row>i>u{position:absolute;top:-3px;bottom:-3px;width:1px;background:#b42318;text-decoration:none;opacity:.85}
.v1321-bar-row>strong{font-size:8.5px;text-align:right;white-space:nowrap;color:#27364a;font-variant-numeric:tabular-nums}
.v1321-bar-row>small{font-size:7.2px;color:#7b8795;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1321-bar-row.bad{background:#fff4f2}.v1321-bar-row.bad>i>em{background:#d92d20}.v1321-bar-row.bad>strong,.v1321-bar-row.bad>small{color:#b42318;font-weight:900}
.v1321-bar-row.warn{background:#fffaf0}.v1321-bar-row.warn>i>em{background:#e9a23b}.v1321-bar-row.warn>strong{color:#9a6700}
.v1321-bar-row.ok>i>em{background:#4d9b72}.v1321-bar-row.unknown>i>em{background:#98a2b3}
.v1321-hourly{height:105px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:2px;padding:7px 3px 1px;border-bottom:1px solid #e5eaf0}
.v1321-hourly>span{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;min-width:0}
.v1321-hourly i{display:block;width:100%;min-height:2px;background:#577da5;border-radius:2px 2px 0 0}
.v1321-hourly small{height:10px;font-size:6px;color:#788696}
.v1321-foot{margin:5px 1px 0;font-size:7.5px;color:#667085}
.v1321-inbound{display:grid;gap:3px;max-height:166px;overflow:auto}
.v1321-inbound button{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:7px;align-items:center;min-height:27px;padding:4px 6px;border:1px solid #e7ecf1;background:#fbfdff;border-radius:5px;text-align:left;color:#344054}
.v1321-inbound time{font-size:7.5px;font-weight:850;color:#35638d}.v1321-inbound span{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v1321-inbound strong{font-size:8px;white-space:nowrap}

/* 달력 상태: 예정은 점선/연한 파랑, 실제 입고는 초록. 오늘은 셀 전체를 부드럽게 강조. */
.calendar-day.today{background:#eef6ff!important;border-color:#3b82c4!important;box-shadow:inset 0 0 0 2px #3b82c4!important}
.calendar-day.today>.day-head{background:#e2f0ff;border-radius:4px;padding:2px 3px}
.today-label{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;padding:1px 5px;border-radius:999px;background:#2f6fa8;color:#fff;font-size:7px;font-weight:900;letter-spacing:-.02em}
.calendar-day .delivery-badge.expected{background:#f2f7ff!important;color:#285d8f!important;border:1px dashed #78a7d2!important;font-weight:850}
.calendar-day .delivery-badge.received{background:#edf8f1!important;color:#17633a!important;border:1px solid #91c9a6!important;font-weight:900}
.calendar-day .purchase-badge.actual{border-style:solid!important;box-shadow:inset 3px 0 0 #2f8f5b}
.calendar-day .delivery-badge.expected::first-letter{font-weight:900}.calendar-day .delivery-badge.received::first-letter{font-weight:900}
.calendar-delivery-simple,.calendar-delivery-grid.simple{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:7px;align-items:end}
.calendar-delivery-advanced{margin-top:7px;border:1px solid #e1e7ee;border-radius:7px;padding:6px 8px;background:#fbfcfe}.calendar-delivery-advanced summary{cursor:pointer;font-size:8.5px;font-weight:850;color:#50647b}

/* 유외상품: 빈 카드 대신 실제 품목만 Excel형 한 표에 촘촘하게 표시 */
.goods-overview-panel{padding:8px!important;border-radius:8px!important;margin-bottom:8px!important}
.goods-overview-panel>.station-head{margin-bottom:5px}.goods-overview-panel>.station-head h2{font-size:13px;margin:0}.goods-overview-panel>.station-head small{font-size:8px}
.goods-sheet-summary{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:3px 0 7px}
.goods-sheet-summary>span{display:inline-flex;align-items:baseline;gap:5px;padding:3px 7px;border:1px solid #e1e7ee;border-radius:4px;background:#fafbfd}
.goods-sheet-summary small{font-size:7px;color:#667085}.goods-sheet-summary b{font-size:9px;color:#27364a}.goods-sheet-summary .bad{background:#fff1f0;border-color:#f1c7c3}.goods-sheet-summary .bad b{color:#b42318}.goods-sheet-summary .warn{background:#fff9eb;border-color:#efd9a6}.goods-sheet-summary .warn b{color:#946200}
.goods-sheet-table-wrap{width:100%;overflow:auto;border:1px solid #dfe5ec;border-radius:5px;background:#fff}
.goods-sheet-table{width:100%;min-width:940px;border-collapse:collapse;font-size:8.5px}
.goods-sheet-table th{height:27px;padding:4px 6px;background:#f3f7fb;color:#3e566e;border:1px solid #dfe5ec;font-size:7.5px;white-space:nowrap;position:sticky;top:0;z-index:1}
.goods-sheet-table td{height:30px;padding:3px 6px;border:1px solid #e5e9ee;background:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.goods-sheet-table tr.bad td{background:#fff5f4}.goods-sheet-table tr.warn td{background:#fffbf2}.goods-sheet-table tr:hover td{background:#f7fbff}
.goods-sheet-table .goods-name{white-space:normal;min-width:120px}.goods-sheet-table .goods-name b{display:block;font-size:8.5px}.goods-sheet-table .goods-name small{display:block;margin-top:1px;color:#8a96a3;font-size:6.8px}
.goods-sheet-table .num{text-align:right}.goods-sheet-table .strong{font-weight:900}
.goods-sheet-status{display:inline-flex;padding:2px 5px;border-radius:999px;font-size:7px;font-weight:900;background:#edf7f1;color:#1b6b44}.goods-sheet-status.bad{background:#feeceb;color:#b42318}.goods-sheet-status.warn{background:#fff4d9;color:#946200}
.goods-sheet-actions{display:flex;gap:3px}.goods-sheet-actions button{min-height:24px!important;height:24px!important;padding:2px 6px!important;border-radius:4px!important;font-size:7px!important}

/* 마감일지 편집 진입: 엑셀형 보기에서 바로 인식 원본 수정으로 연결 */
.sheet-actions .sheet-edit{background:#173f68;color:#fff;border-color:#173f68}

@media(max-width:1100px){
  .v1321-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calendar-delivery-simple,.calendar-delivery-grid.simple{grid-template-columns:repeat(3,minmax(120px,1fr))}
}
@media(max-width:959px){
  .v1321-dashboard{gap:7px}
  .v1321-head{align-items:flex-start}.v1321-head h2{font-size:15px}.v1321-head-status{align-self:center}
  .v1321-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .v1321-kpis .v1200-kpi{min-height:52px;padding:5px 6px}.v1321-kpis .v1200-kpi>strong{font-size:13px}
  .v1321-grid{grid-template-columns:1fr;gap:6px}
  .v1321-card{padding:7px}.v1321-card>header h3{font-size:11px}
  .v1321-bar-row{grid-template-columns:minmax(78px,1.1fr) minmax(70px,1.4fr) minmax(64px,.7fr);gap:4px;min-height:25px}
  .v1321-bar-row>small{grid-column:1/-1;padding-left:2px;white-space:normal}
  .v1321-hourly{height:92px;gap:1px}
  .calendar-delivery-simple,.calendar-delivery-grid.simple{grid-template-columns:1fr 1fr}
  .goods-overview-panel{padding:7px!important}
  .goods-sheet-table-wrap{border-radius:4px}
  .goods-sheet-table{min-width:760px;font-size:8px}
  .goods-sheet-table th{font-size:7px}.goods-sheet-table td{font-size:7.8px}
}
@media(max-width:560px){
  .v1321-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1321-head{display:grid;grid-template-columns:1fr auto}.v1321-head small{font-size:8px}.v1321-head h2{font-size:14px}
  .v1321-bar-row{grid-template-columns:minmax(84px,1fr) minmax(60px,1fr) auto}.v1321-bar-row>span{font-size:8px}.v1321-bar-row>strong{font-size:8px}
  .calendar-delivery-simple,.calendar-delivery-grid.simple{grid-template-columns:1fr}
  .today-label{font-size:6.5px}
  .goods-sheet-summary{display:grid;grid-template-columns:1fr 1fr}.goods-sheet-summary>span{justify-content:space-between}
  .goods-sheet-table{min-width:690px}
}
.v1321-bars.margin .v1321-bar-row.bad>i>em{background:#d92d20}
.v1321-bars.margin .v1321-bar-row.warn>i>em{background:#d9a441}
.v1321-quick-card{padding-bottom:7px}.v1321-quick-card .v1200-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.v1321-quick-card .v1200-quick button{min-height:42px;padding:6px 7px}.v1321-quick-card .v1200-quick b{font-size:9px}.v1321-quick-card .v1200-quick small{font-size:7px}
@media(max-width:959px){.v1321-quick-card .v1200-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.v1321-quick-card .v1200-quick button{min-height:40px}}

/* v1.3.22 — 조회실패/예측보류/전체목록 표시 */
.v1321-empty.error{border-style:solid;border-color:#f1b8b2;background:#fff5f4;color:#b42318;grid-template-columns:1fr auto;gap:8px}
.v1321-empty.error button{min-height:25px;padding:3px 7px;border:1px solid #d92d20;border-radius:5px;background:#fff;color:#b42318;font-size:7.5px;font-weight:900}
.v1321-note.warn{margin:0 0 5px;padding:5px 7px;border:1px solid #efd59b;border-radius:5px;background:#fff9eb;color:#8a5a00;font-size:7.5px;font-weight:800}
.v1322-forecast-pending{margin:5px 0 0;padding:5px 8px;border:1px solid #e3e8ef;border-radius:5px;background:#fafbfd;color:#5d6b7a;font-size:7.5px}
ul.v1322-forecast-pending{padding-left:20px}.v1322-forecast-pending p{margin:3px 0}.v1322-forecast-pending summary{cursor:pointer;font-weight:900}
.v1321-bars.tank,.v1321-bars.goods,.v1321-bars.forecast{max-height:310px;overflow:auto;padding-right:2px}
.v1322-basis-strip{display:flex;gap:4px;flex-wrap:wrap;margin-top:-2px}.v1322-basis-strip span{padding:3px 6px;border:1px solid #e3e8ef;border-radius:4px;background:#fafbfd;color:#667085;font-size:7px}.v1322-basis-strip b{color:#344054}
.goods-focus-row td{animation:v1322Focus 2.2s ease both;box-shadow:inset 0 1px #2f75b5,inset 0 -1px #2f75b5}
@keyframes v1322Focus{0%,65%{background:#eaf4ff}100%{background:inherit}}
@media(max-width:959px){.v1321-bars.tank,.v1321-bars.goods,.v1321-bars.forecast{max-height:360px}.v1322-basis-strip{display:grid;grid-template-columns:1fr 1fr}.v1321-empty.error{grid-template-columns:1fr}}
@media(max-width:560px){.v1322-basis-strip{grid-template-columns:1fr}.v1322-basis-strip span{font-size:7.2px}}

/* v1.3.23 — 대표 전용 전체 비교 대시보드. 개별 주유소 대시보드는 기존 규칙 유지. */




.v1323-column-chart,.v1323-station-columns{height:176px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);align-items:end;gap:7px;padding:12px 6px 2px;border-bottom:1px solid #e2e8f0;overflow-x:auto;overflow-y:hidden}
.v1323-column{height:100%;min-width:44px;display:grid;grid-template-rows:1fr auto auto;gap:3px;align-items:end;text-align:center}
.v1323-column>i,.v1323-station-column>i{height:118px;display:flex;align-items:flex-end;justify-content:center;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#f7fafe 0,#eef4f9 100%);overflow:hidden}
.v1323-column>i>em,.v1323-station-column>i>em{display:block;width:min(34px,74%);min-height:2px;border-radius:5px 5px 0 0;background:#557fa7}
.v1323-column>b,.v1323-station-column>b{font-size:8.5px;color:#20374f;white-space:nowrap;font-variant-numeric:tabular-nums}
.v1323-column>small{font-size:7.5px;color:#6e7e8e;white-space:nowrap}
.v1323-station-column{appearance:none;border:0;background:transparent;min-width:58px;height:100%;display:grid;grid-template-rows:1fr auto auto;gap:3px;align-items:end;text-align:center;padding:0 2px;cursor:pointer;color:inherit}
.v1323-station-column:hover>i{background:#f0f6fb}.v1323-station-column:hover>i>em{background:#326f9f}
.v1323-station-column>span{font-size:8px;font-weight:900;color:#42566b;line-height:1.15;min-height:18px;display:flex;align-items:flex-start;justify-content:center;white-space:normal}
.v1323-chart-help{margin:5px 2px 0;font-size:7.5px;color:#758393;text-align:right}











.v1323-full{grid-column:1/-1}
@media(max-width:959px){
  
  .v1323-column-chart,.v1323-station-columns{height:154px;grid-auto-columns:minmax(48px,1fr);gap:5px;padding-left:2px;padding-right:2px}
  .v1323-column>i,.v1323-station-column>i{height:98px}.v1323-column>b,.v1323-station-column>b{font-size:8px}
  
}
@media(max-width:560px){
  
  
  .v1323-column-chart,.v1323-station-columns{height:146px;grid-auto-columns:minmax(52px,1fr)}
  
}

/* v1.3.40 — 운영현황 범위/유류 전체실측 전용 보강. 공통 레이아웃은 변경하지 않는다. */
.dashboard-station-context{margin:.18rem 0 .08rem;font-weight:700;color:var(--text,#243746)}
.inventory-measure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}
.inventory-measure-grid label{display:grid;gap:6px;padding:10px;border:1px solid var(--line,#d9e1e8);border-radius:10px;background:var(--panel,#fff)}
.inventory-measure-grid label small{font-size:.82rem;opacity:.78}
@media(max-width:720px){.inventory-measure-grid{grid-template-columns:1fr}}

/* v1.3.107 — 주유소관리 + 세차장 통합 설치센터 */

/* v1.3.114 — 설치센터(앱 두 장 고르기)를 없애고, 지금 만드는 아이콘 하나만 크게 보여 준다. */
.install-here{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#eef5ff;border:1px solid #c9dcff;margin:12px 0 14px}
.install-here-icon{width:58px;height:58px;border-radius:16px;flex:0 0 58px;box-shadow:0 4px 12px #16324f1f}
.install-here-copy strong,.install-here-copy span{display:block}
.install-here-copy strong{font-size:1.05rem;color:#173b67}
.install-here-copy span{margin-top:4px;color:#51677f;font-size:.86rem}
.install-plain{margin:10px 2px;color:var(--text);font-size:.92rem;line-height:1.65}
.install-plain.ok{color:#067647;font-weight:700}
.install-plain.warn{color:#9a3412;font-weight:700}
.install-tell-apart{margin:14px 0 4px;padding:13px 15px;border:1px dashed #d8e1ec;border-radius:14px;background:#fbfcfe}
.install-tell-apart>strong{display:block;font-size:.9rem;color:#173b67;margin-bottom:9px}
.install-tell-row{display:flex;align-items:center;gap:11px;margin:7px 0}
.install-tell-row img{width:38px;height:38px;border-radius:11px;flex:0 0 38px}
.install-tell-row span{font-size:.85rem;line-height:1.45;color:var(--muted)}
.install-tell-row span b{color:var(--text)}
.install-tell-apart small{display:block;margin-top:10px;color:var(--muted);font-size:.78rem;line-height:1.5}


/* v1.3.108 — 상단 앱 설치 분리 + 세차장 공용 PC 로그인 확인 */
.install-top-main,.install-top-carwash{font-weight:700!important;border-radius:9px!important;padding-inline:11px!important}
.install-top-main{background:#e8f1ff!important;border-color:#94bfff!important;color:#124f9c!important}
.install-top-carwash,.carwash-install-button{background:#e7f8f2!important;border-color:#7acdaf!important;color:#116149!important;font-weight:700!important}
.install-top-main:hover{background:#d9e9ff!important}.install-top-carwash:hover,.carwash-install-button:hover{background:#d3f2e7!important}
.carwash-login-confirm-note{margin:8px 0 2px;color:#64748b;font-size:12px;line-height:1.45}
.carwash-session-continue{margin-top:8px;background:#0f766e!important;border-color:#0f766e!important}
.install-manual-help{margin-top:12px}
@media(max-width:959px){.login-card .carwash-install-button{width:100%;margin-top:8px}.install-top-main,.install-top-carwash{display:none!important}}

@media(max-width:640px){.install-here-icon{width:50px;height:50px;flex:0 0 50px}}

/* v1.3.133 — 폰 운영현황 머리 정리 (대기열 12번)
 * 1) 메뉴 요약 띠(#menuContextStrip)는 운영현황에서 hidden 인데, 폰 규칙 `.menu-context-strip{display:grid!important}` 가
 *    `[hidden]{display:none!important}` 와 무게가 같고 뒤에 있어서 이겼다 → 모든 폰 화면 맨 위에 빈 흰 줄이 떴다.
 * 2) 운영현황 머리(PC 에서는 v119 가 통째로 숨김)가 폰에서는 보이는데, 제목 옆에 조회월·필요물량 기준일·새로고침이
 *    178px 칸에 붙어 제목 설명이 좁게 줄바꿈되고, 조회월은 바로 위 '조회기간' 막대와 같은 것(두 개).
 *    조회월은 막대가 이미 맡으므로(MENU_PERIOD_FIELDS dashboard → trendMonth) 폰에서는 뺀다.
 *    필요물량 기준일·새로고침은 폰에서만 바꿀 수 있는 것이라 남기고 제목 아래 한 줄로 둔다. */
@media(max-width:959px){
  .menu-context-strip[hidden]{display:none!important}
  [data-view="dashboard"]>.page-title{flex-direction:column;align-items:stretch;gap:8px}
  [data-view="dashboard"]>.page-title .dashboard-period-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;width:100%}
  [data-view="dashboard"]>.page-title .dashboard-period-controls>label:first-child{display:none}
  /* v1.3.136 — 머리의 '새로고침'(#refreshDashboard)은 바로 아래 운영현황 묶음의 '새로고침 ↻'·'↻' 와 똑같이 loadDashboard 를 부른다
     (크로미움: 셋 다 같은 12개 조회). PC 처럼 폰도 아래 것만 둔다. 기준일 칸이 한 줄을 다 쓴다. */
  [data-view="dashboard"]>.page-title #refreshDashboard{display:none}
  [data-view="dashboard"]>.page-title .dashboard-period-controls{grid-template-columns:minmax(0,1fr)}
}

/* v1.3.137 — 폰 작은 누름칸 (대기열 16번)
 * 크로미움 390px 소장·직원으로 42px 미만 누름칸을 뽑아 원인을 찾음(모두 PC 촘촘한 규칙이 폰에도 걸린 것):
 *  - 달력 '입고 일정 등록' 칸 8개: `.calendar-delivery-grid input,select{height:32px!important;font-size:11px!important}`(CALENDAR_WORKSPACE_V125, 화면 크기 구분 없음)
 *    → 폰에서 32px·글자 11px. 아이폰은 16px 보다 작은 글자 칸을 누르면 화면이 확대된다.
 *  - 달력 '매입자료·유외상품·확정실패', '부피수량·환산수량' 전환 단추 34px·12px (`.calendar-mode-option{min-height:34px}` 이 폰 44px 규칙보다 무거움)
 *  - 업무 화면 '새로고침·전체·달력 열기' 31px·글자 9.6px (`.mobile-card-head button{min-height:31px!important}`)
 *  - 운영현황 '↻' 28px·글자 9px (`.v1321-head-status button{min-height:28px}`)
 * 폰(959px 이하)에서만 44px 이상·읽을 수 있는 글자로. PC 는 그대로. */
@media(max-width:959px){
  .calendar-delivery-form .calendar-delivery-grid input,.calendar-delivery-form .calendar-delivery-grid select{height:auto!important;min-height:44px!important;font-size:16px!important}
  .calendar-mode-switch .calendar-mode-option,.calendar-legendbar .qty-option{min-height:44px;font-size:14px}
  .mobile-home-card .mobile-card-head button{min-height:44px!important;font-size:14px!important;padding:6px 12px!important}
  .v1321-head .v1321-head-status button{min-height:44px;min-width:44px;font-size:18px}
}

/* v1.3.138 — 어둡게 모드 글자 대비 (대기열 17번, 크로미움으로 글자·배경 대비를 계산해 3 미만만 뽑음)
 *  - 폰 모든 메뉴 위 '← 홈 · 메뉴 이름' 줄: 어둡게 규칙이 줄 배경만 어둡게 바꾸고 `.mobile-view-bar b{color:#1b3450}` 는 남아 대비 1.36(안 보임).
 *  - 마감일지 아래 탭(종합 합계·확정실패·통합입고): 어둡게 배경 위 `.sheet-tab{color:var(--s2)}` 짙은 남색, 대비 1.53. */
html[data-theme="dark"] .mobile-view-bar b{color:#e6ecf3}
html[data-theme="dark"] .sheet-tab:not(.active){color:#c9d6e3}
/*  - 안내·오류 글(.message): 화면 코드가 글자색을 직접 넣는다(빨강 #b42318 71곳 · 초록 #067647 42곳 · 주황 #b45309 16곳).
 *    어둡게 배경(#141b24)에서 빨강 대비 2.64 · 초록 3.04 · 주황 3.45 → 같은 뜻의 밝은 색으로(대비 8.9 · 9.3 · 9.4). */
html[data-theme="dark"] .message[style*="rgb(180, 35, 24)"]{color:#fda29b!important}
html[data-theme="dark"] .message[style*="rgb(6, 118, 71)"]{color:#5dd39e!important}
html[data-theme="dark"] .message[style*="rgb(180, 83, 9)"]{color:#fdb022!important}

/* v1.3.139 — PC 어둡게 모드 (대기열 18번). 1366px 소장·대표 모든 메뉴에서 대비 3 미만은 '업무' 화면 주유소 표 한 곳뿐이었다:
 *  - 표 머리 `.role-station-table-head{background:var(--ui115-head)!important}` 가 어둡게에서도 밝은 회색 → 어둡게용 흐린 글자와 대비 1.97
 *  - '판매자료 없음' `.station-main-sales b{color:#1a2e48}` 어두운 바탕에 대비 1.26 · 탱크 이름 `.station-tank-name{color:#526377}` 2.81 */
html[data-theme="dark"] .role-station-table-head{background:#1c2430!important;border-bottom-color:#2e3a48!important}
html[data-theme="dark"] .station-main-sales b{color:#e6ecf3}
html[data-theme="dark"] .station-tank-name{color:#9fb0c2}

/* v1.3.140 — PC 업무 화면 '담당 주유소 한눈표' 가 오른쪽 카드 밑으로 들어가던 것 (대기열 19번)
 * 마지막으로 이기는 규칙 `.role-station-table-head, .role-station-mini{grid-template-columns:minmax(180px,.9fr) minmax(330px,1.45fr) minmax(390px,1.6fr) 30px!important}`
 * 의 최소 폭 합이 969px(칸 930 + 간격 21 + 안쪽 여백 18)인데, 표 자리는 1366px 화면에서 856px · 1280px 에서 778px 라
 * 줄이 오른쪽으로 넘쳐 '지금 확인할 일' 카드 밑에 5번째 진행 칸이 가려졌다(크로미움으로 잰 값). 1536px 이상은 표 자리가 넓어 괜찮다.
 * 그 구간에서만 앞 두 칸(주유소·매출 / 탱크)의 최소 폭을 줄인다. 진행 칸 5개(각 최소 62px)는 그대로 들어간다. */
@media(min-width:960px) and (max-width:1535px){
  .role-station-table .role-station-table-head,.role-station-table .role-station-mini{grid-template-columns:minmax(120px,.9fr) minmax(150px,1.45fr) minmax(340px,1.6fr) 30px!important}
}
/* 1199px 이하(작은 노트북·가로 태블릿)는 한 줄로 쌓는다 — 원래 뜻(styles.css `@media(max-width:1100px){.role-dashboard-grid{grid-template-columns:1fr}}`)을
 * 뒤쪽 PC 규칙 `.role-dashboard-grid{grid-template-columns:minmax(0,2.35fr) minmax(260px,.72fr)!important}` 가 이겨 1024px 에서 표 자리가 522px 로 좁아졌었다.
 * 1101~1199px 도 두 줄이면 표 자리(599px 부터)가 위 최소 폭(679px)보다 좁아 같은 문제라 1199px 까지 넓혔다(크로미움 1101px 에서 확인). */
@media(min-width:960px) and (max-width:1199px){
  .desktop-workcenter .role-dashboard-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* v1.3.141 — PC 1280·1366 겹침·넘침 점검 (대기열 20번)
 * 업무 화면 한눈표의 탱크 칸: 한 줄(이름·막대·값) 격자가 `65px minmax(90px,1fr) minmax(128px,.9fr)` 로 최소 295px 인데
 * v1.3.140 에서 탱크 칸이 1280px 화면 227px · 1366px 275px 로 좁아져 값(실측량/용량)이 옆 진행 칸 쪽으로 74px · 23px 넘쳤다.
 * 같은 구간(960~1535px)에서만 이름·막대가 줄어들고 값은 글자 길이만큼 차지하게 한다. */
@media(min-width:960px) and (max-width:1535px){
  .role-station-table .station-tank-line{grid-template-columns:minmax(44px,65px) minmax(36px,1fr) auto!important}
}
/* 좁은 옆 칸(알림 받기 설정 230px · 자료함 사진 인식 준비 240px)의 카드 목록: `.card-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important}`
 * 이라 칸보다 넓은 260px 카드가 20~30px 밖으로 나갔다. 칸이 260px 보다 좁을 때만 칸 폭에 맞춘다(넓은 칸은 그대로 260px 기준). */
@media(min-width:960px){
  .card-list{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))!important}
}
/* 달력 위 요약 칸이 자료를 못 불렀을 때 뜨는 '일부 자료 확인 필요 / 마감일지 확정실패' 는 글자가 길어(한 줄 고정) 칸 밖으로 85~106px 넘쳤다. 이 경고 칸만 줄바꿈. */
.calendar-summary .cal-kpi.warn strong{white-space:normal!important;overflow-wrap:anywhere}
/* PC(1200px 이상) 달력 위 '오늘' 단추가 34px 폭에 글자 11px 이라 '오 / 늘' 로 세로로 갈라졌다
 * (`[data-view="calendar"] .calendar-move .quiet{min-width:34px!important}`). 이 단추만 한 줄로. 옆 달 고르기 칸이 조금 줄어든다. */
@media(min-width:1200px){
  [data-view="calendar"] .calendar-move #calendarToday{min-width:44px!important;white-space:nowrap}
}

/* v1.3.142 — 글자가 한두 자씩 세로로 갈라진 곳 (대기열 21번)
 * 크로미움으로 모든 메뉴의 글자 줄 수를 세서(Range.getClientRects), 2줄 이상인데 가장 짧은 줄이 글자 2자 폭보다 좁은 것을 뽑음:
 *  - 세차장 '주유소별 오늘 세차 수납' 표: 10칸이 폰 326px 에 끼워져 '무/한/대/주/유/소' 처럼 한 자씩(가로 스크롤 칸 안인데도 표가 칸 폭에 맞춰 줄어듦).
 *    폰은 칸 글자를 한 줄로 두고 기존 가로 스크롤 칸(.cw-table-scroll)이 밀어 준다. PC 1280·1366 은 '전/체' 처럼 낱말 안에서 끊기던 머리만 낱말 단위로.
 *  - 외상 원장 '외상 · 선입금 · 보관증' 전환 단추(PC): '선입 / 금', '보관 / 증' → 한 줄.
 *  - 폰 아침 보고 현황 표 머리: '현금마 / 감', '마감일 / 지' → 낱말 안에서 끊지 않고 옆 여백을 줄임.
 *  - 폰 공지·운영 머리 '새로 / 고침' 단추 → 한 줄.
 *  - 달력 오늘 칸 '오 / 늘' 표시(7px) → 한 줄. */
.cw-table-scroll .cw-summary-table th{word-break:keep-all}
@media(max-width:959px){.cw-table-scroll .cw-summary-table th,.cw-table-scroll .cw-summary-table td{white-space:nowrap}}
/*   그 표를 담은 칸이 글자 한 줄 폭(폰 592px)만큼 커지지 않도록(격자 칸 기본 최소 폭 auto) — 칸은 화면 폭 그대로, 표만 가로로 밀림. */
.carwash-grid-two>*{min-width:0}
.segmented button{white-space:nowrap}
.today-label{white-space:nowrap}
@media(max-width:959px){
  .v55-morning-head span{padding-left:4px;padding-right:4px;word-break:keep-all}
  .view>.page-title button{white-space:nowrap}
}

/* v1.3.143 — 폰 입력칸 글자 16px (대기열 22번)
 * 아이폰(사파리)은 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대한다 — 어르신들이 "화면이 커졌다" 며 당황하고 되돌리기 어렵다.
 * 크로미움 390px 로 모든 메뉴의 입력칸 글자 크기를 모아 보니 16px 미만 12곳, 모두 `button, input, select, textarea { font: inherit; }` (styles.css 앞쪽)로
 * 작은 글자 칸(라벨 등)의 크기를 물려받은 것: 모든 화면 위 '조회기간' 년·월·일 10.9px, 재고 화면들 주유소 11.2px,
 * 아침 보고·월말 재고정산·지출 12px, 기본설정 주유소 12.8px. 폰(959px 이하)에서는 입력칸 글자를 16px 로 둔다(PC 그대로). */
@media(max-width:959px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),select,textarea{font-size:16px}
}

/* v1.3.144 — PC 1024px(960~1199px) 칸 넘침 (대기열 24번)
 * 크로미움 1024px 소장 모든 메뉴에서 칸 밖으로 넘친 것: 두 칸 배치의 최소 폭 합이 본문 폭(810px)보다 넓었다.
 *   운영 보고 .operation-layout 340+560 → +100 · 현금마감 .cash-layout 620+300 → +134 · 자료함 .document-workspace 300+520 → +224
 *   외상 원장 .ledger-workspace 350+540 → +88 · 계정 #userManager 360+520 → +96
 *   세차장 '주유소별 오늘 세차 수납' 표 +158 — 표를 감싼 .cw-table-scroll 의 overflow:auto 가 carwash.css 에서 720px 이하에만 있어
 *   그보다 넓은 화면에서는 밀리지 않고 칸 밖으로 나갔다(v1.3.142 에서 머리를 낱말 단위로 바꾸며 드러남).
 *   달력 입고 등록 6칸 격자 — 날짜 칸(최소 126px)이 112px 칸에 → +14.
 * 이 구간에서는 두 칸 배치를 위아래로 쌓고(폰·태블릿과 같은 순서), 입고 등록은 3칸씩, 표 감싸개는 어느 폭에서나 옆으로 밀리게. */
.cw-table-scroll{overflow-x:auto}
/* 1200~1279px 에서도 넘친 것(1280 이상은 0): 자료함 목록 카드(+48) · 알림/지시 3칸(300+440+260 → +30)
 * · 업무 한눈표 '판매자료 없음'+막대(+26, 960·1200·1240) — 자료함은 1279px 까지 쌓고, 알림/지시는 2칸, 매출 막대는 줄어들게.
 * (달력 요약 '거래처 / 입고일 0곳 · 0일' 이 1200~1240px 에서 옆 칸 사이로 12~14px 나가는 것은 테마 글자 크기 규칙끼리 얽혀 있어 이번엔 두었다.) */
@media(min-width:960px) and (max-width:1279px){
  .document-workspace{grid-template-columns:minmax(0,1fr)!important}
  .message-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important}
  /* 옆에 나란히 둘 때 쓰던 '따라 내려오는' 입력칸(position:sticky)이, 위아래로 쌓으면 아래 목록 위에 겹쳐 떠 버린다(크로미움으로 봄: 운영 보고 '대표에게 보고 보내기' 가 '내가 보낸 보고' 위에). */
  .document-workspace>.document-upload-panel,.message-workspace>.message-compose-panel{position:static}
}
@media(min-width:960px) and (max-width:1535px){
  .role-station-table .station-main-sales{grid-template-columns:auto minmax(24px,1fr)!important}
}
@media(min-width:960px) and (max-width:1199px){
  .operation-layout,.cash-layout,.document-workspace,.ledger-workspace,.carwash-grid-two{grid-template-columns:minmax(0,1fr)!important}
  .operation-layout>.operation-submit-card,.cash-layout>.cash-summary,.ledger-workspace>.ledger-entry-panel{position:static}
  #userManager:not([hidden]){grid-template-columns:minmax(0,1fr)!important}
  .calendar-delivery-form .calendar-delivery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* v1.3.146 — 달력 위 요약 칸 (대기열 27번, 24번에서 남긴 것)
 * 1200px 이상 `[data-view="calendar"] .cal-kpi{grid-template-columns:auto minmax(0,1fr)!important}` 라 이름(span)이 먼저 자리를 잡고
 * 숫자(strong)는 남은 자리에 한 줄 고정인데, 테마(theme-v1342/1343)가 숫자를 20px 로 키워 '0곳 · 0일' 이 1200~1240px 에서 칸 밖으로 12~14px 나갔다.
 * 숫자가 제 폭을 먼저 갖고 이름이 남은 자리에서 줄바꿈하게 바꾼다. 경고 칸(.warn — 숫자 자리가 긴 글)은 그대로. */
@media(min-width:1200px){
  [data-view="calendar"] .calendar-summary .cal-kpi:not(.warn){grid-template-columns:minmax(0,1fr) auto!important}
  [data-view="calendar"] .calendar-summary .cal-kpi:not(.warn)>span{word-break:keep-all;line-height:1.15}
}

/* v1.3.150 — 폰 작은 글씨 (대기열 31번)
 * 크로미움 폰 390 에서 글자 크기를 잼: 소장 운영현황 카드 7~9.5px(기준 달 7.6·빠른 이동 설명 7·칸 이름 9.5),
 * 달력 '오늘' 6.5px, 입고 칸 이름 10px, 폰 메뉴 단추 11.5px, 업무 화면 칸 머리 8.6px 등.
 * 직원분들이 읽어야 하는 글은 12px 이상, 누르는 단추·칸 이름은 13px 로. 폰만(760px 이하), 세차 화면은 제외.
 * 테마 파일(theme-v13xx)이 styles.css 뒤에 !important 로 줄여 놓아서 html:root body:not(.carwash-mode) 로 무게를 올린다. */
@media (max-width: 760px) {
  /* 맨 위 알림·나가기·어둡게는 그대로 — 키우면 왼쪽 제목 칸이 좁아져 머리 줄이 두 줄로 커진다(크로미움으로 봄) */
  
  html:root body:not(.carwash-mode) .menu-context-strip .menu-context-title>span,
  html:root body:not(.carwash-mode) .menu-context-strip .menu-context-kpi>span,
  html:root body:not(.carwash-mode) .global-period-bar>label,
  html:root body:not(.carwash-mode) .mobile-home-head .mobile-home-role,
  html:root body:not(.carwash-mode) .mobile-home-head #mobileWorkSubtitle,
  html:root body:not(.carwash-mode) .mobile-home-stats .mobile-stat>span,
  html:root body:not(.carwash-mode) .mobile-home-card .mobile-card-head>div>span,
  html:root body:not(.carwash-mode) .mobile-action-grid>button>span,
  html:root body:not(.carwash-mode) .mobile-connect-grid>button>span,
  html:root body:not(.carwash-mode) .brief-strip .bs-more{font-size:12px!important}
  /* 운영현황 카드 */
  html:root body:not(.carwash-mode) .v1321-dashboard .v1321-head small,
  html:root body:not(.carwash-mode) .v1321-dashboard .v1322-basis-strip span,
  html:root body:not(.carwash-mode) .v1321-dashboard .v1322-basis-strip span>b,
  html:root body:not(.carwash-mode) .v1321-kpis .v1200-kpi>small,
  html:root body:not(.carwash-mode) .v1321-kpis .v1200-kpi>b,
  html:root body:not(.carwash-mode) .v1321-card>header small,
  html:root body:not(.carwash-mode) .v1321-card .v1200-quick>button>small{font-size:12px!important}
  html:root body:not(.carwash-mode) .v1321-kpis .v1200-kpi>small{word-break:keep-all;text-wrap:balance;line-height:1.25}
  html:root body:not(.carwash-mode) .v1321-kpis .v1200-kpi>span,
  html:root body:not(.carwash-mode) .v1321-card .v1321-empty,
  html:root body:not(.carwash-mode) .v1321-card .v1200-empty,
  html:root body:not(.carwash-mode) .v1321-card .v1200-quick>button>b{font-size:13px!important}
  /* 달력 */
  html:root body:not(.carwash-mode) .calendar-day .today-label{font-size:11px!important}
  /* 50px 칸에 날짜와 '오늘' 이 한 줄이라 전에도 5px 밖으로 나가 잘렸다 → '오늘' 은 날짜 밑 줄로 */
  html:root body:not(.carwash-mode) .calendar-day.today .day-head{flex-wrap:wrap;row-gap:2px;min-width:0}
  html:root body:not(.carwash-mode) .calendar-actionbar>div>span,
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-head>span,
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-actions>span{font-size:12px!important}
  /* 제목과 긴 설명이 한 줄이라 제목이 44~51px 로 눌려 '입고예정 / 간편 / 등록' 세 줄 → 제목 위, 설명 아래 */
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-head{flex-direction:column;align-items:flex-start;gap:2px}
  /* 설명 글을 키우면 옆 '입고예정 저장' 단추가 '입고예/정 저장' 으로 갈라짐 → 단추 한 줄 전체, 설명은 밑에 */
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-actions{flex-direction:column;align-items:stretch;gap:6px}
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-actions>button{white-space:nowrap}
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-grid>label,
  html:root body:not(.carwash-mode) .calendar-delivery-form .calendar-delivery-advanced>summary{font-size:13px!important}
  /* 운영 입력 · 유외상품 · 계정 */
  html:root body:not(.carwash-mode) .operation-hub-grid .operation-hub-action>small,
  html:root body:not(.carwash-mode) .goods-overview-panel #goodsOverviewBasis,
  html:root body:not(.carwash-mode) .goods-sheet-summary>span>small,
  html:root body:not(.carwash-mode) .inventory-context-bar #inventoryStationHelp,
  html:root body:not(.carwash-mode) #userManager #permScopeNote,
  html:root body:not(.carwash-mode) #permissionChoices .perm-toggle>small{font-size:12px!important}
  html:root body:not(.carwash-mode) .operation-hub-grid .operation-hub-action>b,
  html:root body:not(.carwash-mode) .goods-sheet-summary>span>b{font-size:13px!important}
}

/* v1.3.151 — 폰·태블릿 맨 위 '지금 있는 곳'(예: 시스템 › 근무 관리)이 안 보이던 것 (대기열 32번)
 * 959px 이하 `.topbar{background:var(--sidebar-bg);color:#fff}` — 원래 짙은 머리라 흰 글자였다. 뒤에 theme-v1324 가 머리를 밝게(rgba(250,253,255)) 바꾸면서
 * 제목(.topbar-title strong)만 #173b63 으로 바꾸고 이 줄은 흰색을 물려받은 채 남아 흰 바탕에 흰 글자(자리만 차지). 어둡게 모드에서는 잘 보인다.
 * 밝게 모드에서만 글자색을 제목과 맞추고, 지금 화면 이름만 한 줄로(긴 이름은 …). */
@media (max-width: 959px) {
  html:not([data-theme="dark"]) body .topbar .crumb{color:#5b7088}
  html:not([data-theme="dark"]) body .topbar .crumb strong{color:#173b63}
  /* 16px '재고·발주 › 유외상품 재고' 가 제목 칸(117px)을 넘어 오른쪽 단추 밑으로 들어가 잘렸다(어둡게에서도) →
     윗 메뉴 이름은 바로 밑 폰 메뉴 줄에 이미 있으니 빼고, 지금 화면 이름만 14px 한 줄 … 로 */
  body .topbar .topbar-left{min-width:0;overflow:hidden}
  body .topbar .crumb{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden}
  body .topbar .crumb>span{display:none}
  body .topbar .crumb strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px}
}

/* v1.3.152 — 계정·권한 화면 권한 단추 밑 설명('세부 권한' 등)이 흐리던 것 (대기열 33번)
 * `.perm-toggle>small{color:#8090a2}` — 흰 바탕 대비 3.27, 켜진 단추(#eaf2ff) 2.9. 폰·PC 모두. 대비 도구(폰 소장 13개 메뉴)에서 이 화면만 15곳.
 * 같은 무게 규칙을 뒤에 두어 #52667a(흰 5.93 · 켜짐 5.27 · 올림 5.61). 어둡게 모드는 테마 규칙(html[data-theme="dark"] …)이 더 무거워 그대로. */
.perm-toggle>small{color:#52667a}
/* 같은 단추 이름이 '인식 자료 검토·확 / 정' 처럼 낱말 가운데서 갈라지던 것(폰 390, 5개) → 낱말 단위로 두 줄 고르게, 칸보다 긴 낱말만 쪼갬 */
.perm-toggle>strong{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}

/* v1.3.153 — PC 흐린 글자 2곳 (대기열 34번)
 * 대비 도구(크로미움 1366, 소장·대표 모든 메뉴): 운영현황 브리핑 시각 `.bs-when{color:#8a97a6}` 흰 바탕 2.98,
 * 손익 화면 자료 없는 줄 `.cost-bar-row.nodata .cbr-margin{color:#8a97a4}`(theme-v1364) 2.90.
 * 어둡게 모드는 짙은 바탕이라 지금 색이 맞다 → 밝게 모드에서만 #5f6f80(흰 5.16 · #fbfcfd 5.02). */
html:not([data-theme="dark"]) .bs-when{color:#5f6f80}
html:not([data-theme="dark"]) .cost-bar-row.nodata .cbr-margin{color:#5f6f80}


/* v1.3.156 — 태블릿·폰 가로(761~959px) 글자 갈라짐 2곳 (대기열 37번)
 * 크로미움 844×390·768×1024·900×600·959×700 소장 모든 메뉴: 달력 '오늘' 단추가 44px 칸에 '오/늘' 두 줄(1200px 이상은 v1.3.141 에서 고침),
 * 기본설정 맨 위 '주유소' 이름표가 '주유/소' 두 줄. 폰을 가로로 돌렸을 때 위아래 띠·칸 넘침·아래 띠 가림은 없었다(따로 고칠 것 없음).
 * '오늘' 은 줄바꿈만 막으면 44px 칸 밖으로 글자가 나가서(칸이 넘침 숨김이라 최소 폭 0) 칸이 줄지 않게도 한다. */
#calendarToday{white-space:nowrap;flex:0 0 auto}
.setup-context-bar>label{white-space:nowrap}
/* 1024px 달력 위 안내 줄 제목 '한 번 입력 · 함께 반 / 영'(v1.3.155 에서도) → 한 줄, 옆 설명이 … 로 줄어든다 */
.calendar-actionbar>div>strong{white-space:nowrap;flex:0 0 auto}

/* v1.3.157 — 대표 계정 폰 화면 (대기열 38번)
 * 크로미움 폰 390 대표(CEO) 36개 메뉴를 넘침·작은 글씨·대비·글자 갈라짐 도구로 봄. 넘침·대비는 소장과 같이 0(백업·복구 머리 칸은 전부터),
 * 갈라짐 2곳이 대표 화면에만 있었다:
 *  - 운영현황 카드 머리 '전체 유 / 류 예상 현 / 재고' — 옆 설명(`.v1321-card>header small{white-space:nowrap}`)이 한 줄로 자리를 다 차지해
 *    제목이 65px 로 눌림. v1.3.150 에서 설명을 8px → 12px 로 키우며 더 심해짐(소장 카드는 설명이 짧아 괜찮았음).
 *    → 폰에서는 제목 위, 설명 아래(설명은 줄바꿈 허용).
 *  - 아침 보고 표 주유소 이름 '무한대주 / 유소' — 첫 칸 90px(글자 자리 70px)에 16px 굵은 6글자.
 *    → 현황 칸 4개를 62px 로 고정하고 남는 자리를 이름 칸에(약 100px), 이름 15px·양옆 여백 6px. 가장 긴 이름(6글자)도 한 줄. */
@media (max-width: 760px) {
  html:root body:not(.carwash-mode) .v1321-card>header{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
  html:root body:not(.carwash-mode) .v1321-card>header small{white-space:normal}
  html:root body:not(.carwash-mode) .v1321-card>header h3{word-break:keep-all}
  html:root body:not(.carwash-mode) .v55-morning-head,
  html:root body:not(.carwash-mode) .v55-morning-row{grid-template-columns:minmax(0,1fr) repeat(4,62px)}
  html:root body:not(.carwash-mode) .v55-morning-row .v55-st{padding-left:6px;padding-right:6px}
  html:root body:not(.carwash-mode) .v55-morning-row .v55-st>b{font-size:15px;letter-spacing:-.02em;word-break:keep-all}
}

/* v1.3.158 — 대표 폰 작은 글씨 (대기열 39번, v1.3.150 을 대표·세차장 화면까지)
 * 크로미움 폰 390 대표 36개 메뉴에서 11px 미만: 손익 화면 표 머리 10px·내용 10.5px·거래조건 '저장' 10.5px·조회 칸 이름 10.6px·
 * 주유소 막대 '확인'·안내 10.6px, 세차장 요약 표 머리 10px·내용 10.5px, 메뉴 위 요약 칸 이름 9.9px, 운영 '오늘 보고 진행' 10px,
 * 기본설정 안내 10px, 재고정산 그래프 설명 10.4px, 탱크·거래처 안내 10.9px, 설비 정렬 안내 10.6px. 읽는 글 12px, 누르는 단추 13px(폰만, 세차 모드 제외).
 * 표는 원래 가로로 밀어 보는 칸(min-width 720px) 안이라 글자가 커져도 화면 밖으로 안 나간다. 백업 화면은 건드리지 않음. */
@media (max-width: 760px) {
  html:root body:not(.carwash-mode) .data-table th,
  html:root body:not(.carwash-mode) .data-table td,
  html:root body:not(.carwash-mode) .cw-summary-table th,
  html:root body:not(.carwash-mode) .cw-summary-table td,
  html:root body:not(.carwash-mode) .cost-filterbar>label,
  html:root body:not(.carwash-mode) .cost-filterbar>label>span,
  html:root body:not(.carwash-mode) .cost-bar-row>.cbr-pending,
  html:root body:not(.carwash-mode) .cost-bar-row>.cbr-issue,
  html:root body:not(.carwash-mode) .menu-context-kpis>article>span,
  html:root body:not(.carwash-mode) #setupRoleNote,
  html:root body:not(.carwash-mode) #setupPriceChip,
  html:root body:not(.carwash-mode) .operation-hub-summary>div>span,
  html:root body:not(.carwash-mode) .operation-hub-summary>div>small,
  html:root body:not(.carwash-mode) #stockAdjCharts>article>p,
  html:root body:not(.carwash-mode) .inventory-view .form-card .form-help,
  html:root body:not(.carwash-mode) .terminal-sortbar>label,
  html:root body:not(.carwash-mode) .terminal-sortbar>small{font-size:12px!important}
  html:root body:not(.carwash-mode) .data-table td>button{font-size:13px!important}
  /* 카드 머리 오른쪽 단추가 '새로 / 고침'(손익 매입 조건)처럼 낱말 가운데서 갈라지던 것 → 한 줄, 왼쪽 제목이 줄바꿈 */
  html:root body:not(.carwash-mode) .station-head>button{white-space:nowrap;flex:0 0 auto}
}

/* v1.3.159 — 어둡게 모드 달력 '오늘' 딱지가 흐리던 것 (대기열 40번)
 * 크로미움 폰 390 어둡게: 파란 딱지(#2f6fa8) 위 글자가 회색(#9aa7b6)이라 대비 2.39.
 * theme-v1331 이 이 딱지를 흰색으로 해 놓았지만, 같은 파일의 `html[data-theme="dark"] body #mainContent small:not(...)` 가
 * #mainContent(아이디) 덕분에 더 무거워 이겼다. 그보다 무거운 선택자로 흰색을 되돌린다(대비 4.6). 밝게 모드는 그대로. */
html[data-theme="dark"] body #mainContent .calendar-grid .calendar-day.today .day-head .day-head-meta small.today-label{color:#fff!important}

/* v1.3.190 — 폰에서 '재고 사진·실측' 화면의 예상 현재고 칸 제목이 한 글자씩 세로로 갈라지던 것 (대기열 78번)
 * 크로미움 폰 390(소장·차장·부장·관리자 모두): '예상 현재고' 가 폭 13px·높이 117px,
 * 그 아래 설명은 폭 13px·높이 1142px 로 한 글자씩 세로로 쏟아졌다.
 * 제목 칸(.station-head)이 가로 한 줄(flex)인데, 오른쪽 '마지막 마감 …' 요약이 white-space:nowrap 이라
 * 폭을 다 먹고 왼쪽 제목 칸이 0px 로 눌린 탓이다.
 * 폰에서만 위아래로 쌓고 요약도 줄바꿈되게 한다. PC(721px 이상)는 예전 그대로 가로 한 줄이다. */
@media (max-width:720px){
  #tankForecastPanel .station-head{flex-direction:column;align-items:stretch;gap:4px}
  #tankForecastPanel .station-head>div{min-width:0;width:100%}
  #tankForecastPanel .tank-forecast-meta{white-space:normal}
}

/* v1.3.197 — 작은 PC(960~1279px)에서 '재고 사진·실측' 의 탱크 기록 줄이 칸 밖으로 나가던 것 (대기열 80번)
 * 이 표는 가로 6칸이고 각 칸 최소폭을 더하면 145+165+175+145+125+205 = 960px 이다.
 * 폰 규칙은 959px 이하에서만 2칸으로 접어서, 그 사이(960~1279px)에서는 778px 자리에 960px 가 그려져
 * 오른쪽이 잘렸다(크로미움 1024px 에서 tank-record-row 778 < 960 확인).
 * 그 구간만 3칸으로 접는다. 1280px 이상 PC 와 폰(959px 이하)은 예전 그대로다. */
@media (min-width:960px) and (max-width:1279px){
  .inventory-view .tank-record-head{display:none}
  .inventory-view .tank-record-row{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 8px;border:1px solid #d7e0e9!important;border-radius:7px}
  .inventory-view .tank-record-row>div{border-bottom:1px solid #edf1f5;padding:8px}
  .inventory-view .tank-record-row>div:nth-child(3n){border-right:0}
  .inventory-view .tank-actions{grid-column:1/-1;border-bottom:0!important}
}

/* v1.3.198 — 작은 PC(960~1279px)에서 '재고 현황' 표의 마지막 칸(설정·조정)이 화면 밖으로 잘리던 것 (대기열 87번)
 * 표가 가로 4칸이고 각 칸 최소폭 합이 150+220+200+250 = 820px 인데,
 * 960px 창에서는 표 자리가 744px 뿐이라 오른쪽 '판매단가' 칸과 [설정 저장] 단추가 화면 밖으로 나갔다
 * (크로미움 960px: .card-list 744<836, 칸 오른쪽 끝 1030px > 화면 960px — 그림으로도 잘림 확인).
 * 그 구간만 칸 최소폭을 풀고, 설정·조정 칸 안(안전재고·판매단가·저장)도 두 줄로 접는다.
 * 폰(959px 이하)과 큰 PC(1280px 이상)는 예전 그대로다. */
@media (min-width:960px) and (max-width:1279px){
  .inventory-view .inventory-record-head,
  .inventory-view .inventory-record-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,1.5fr)!important}
  .inventory-view .inventory-record-row .inline-settings{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .inventory-view .inventory-record-row .inline-settings>button{grid-column:1/-1}
}

/* v1.3.199 — 주변시세의 '선택한 날짜 입력자료 · 수정/삭제' 칸이 너무 좁아 글자가 잘리던 것 (대기열 88번)
 * 이 칸은 주변 주유소 카드들과 같은 240px 짜리 격자 한 칸에 들어가 있었다.
 * 그런데 이 칸만 입력칸 3개 + 단추 2개가 들어가서, 1366px 화면에서도 278px 밖에 못 받아
 *   주유소 이름 '무한대주유소' → '무한대ㅈ' 로 잘리고,
 *   [수정]·[삭제] 가 46px 칸에 갇혀 '수 정' 처럼 한 글자씩 세로로 갈라졌다(PC 960~1920 모두).
 * 이 칸만 한 줄을 다 쓰게 하고, 이름 칸을 넓히고, 단추는 한 줄로 둔다.
 * 주변 주유소 카드(v55-market-card)와 폰 화면은 예전 그대로다. */
#marketBoard>.v55-panel{grid-column:1/-1}
#marketBoard>.v55-panel .v55-market-row.market-edit-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:6px;align-items:center}
#marketBoard>.v55-panel .v55-market-row.market-edit-row>span{display:flex;gap:6px;white-space:nowrap}
#marketBoard>.v55-panel .v55-market-row.market-edit-row button{white-space:nowrap;min-height:34px;padding:4px 12px}
@media(max-width:720px){
  #marketBoard>.v55-panel .v55-market-row.market-edit-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);row-gap:6px}
  #marketBoard>.v55-panel .v55-market-row.market-edit-row>span{grid-column:1/-1;justify-content:flex-end}
}

/* v1.3.200 — 큰 PC(1280px 이상)에서 탱크 '상태·작업' 칸의 단추 글자가 한두 자씩 갈라지던 것 (대기열 89번)
 * 6칸 표의 마지막 칸이 211px 인데 그 안에 단추 3개를 가로로 넣어,
 * [실측 입력] 이 49px 칸에서 '실측 / 입 력', [최근 실측 수정] 이 '최근 / 실측 / 수정' 으로 그려졌다
 * (크로미움 1366px: 단추 49x54 · 글자 한 줄에 2자). 점검 도구가 이 갈라짐을 못 잡아 사람 눈으로 찾았고,
 * 이번에 도구의 눈도 '줄 수 대비 한 줄 글자 수' 로 고쳤다.
 * 이 칸만 단추를 위아래로 쌓아 한 줄씩 온전히 보이게 한다.
 * 작은 PC(960~1279px, v1.3.197 에서 3칸으로 접은 구간)와 폰은 예전 그대로다. */
@media (min-width:1280px){
  .inventory-view .tank-actions{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  .inventory-view .tank-actions .tank-adjust{grid-column:auto}
  .inventory-view .tank-actions button{white-space:nowrap;width:100%}
}

/* v1.3.201 — 세차 태블릿 세로(768×1024)에서 단추 글자가 낱말 가운데서 갈라지던 것 (대기열 90번)
 * 세차 모드 '세차기 집계 입력' 탭의 '불러오기' 가 폭 48px 로 눌려 '불러 / 오기' 두 줄이 됐다.
 * 제목 칸(.station-head)이 가로 한 줄(flex)인데 왼쪽 설명글이 길어 오른쪽 단추가 줄어든 탓이다.
 * v1.3.158 이 폰(760px 이하·세차 모드 제외)에서만 같은 것을 막아 두었고, 768px 태블릿·세차 모드는 빠져 있었다.
 * 여기서는 '낱말을 가운데서 자르지 않는다' 한 가지만 더한다(word-break:keep-all).
 * 띄어쓰기에서 줄이 바뀌는 것('지금 보내기' → '지금 / 보내기')은 읽는 데 지장이 작아 그대로 둔다.
 * 단추 크기·색·자리, 세차 화면 흐름은 그대로다. */
.station-head > button { word-break: keep-all; }

/* v1.3.202 — 직원 PC 업무 화면 '바로가기' 단추 글자가 한 글자씩 세로로 쏟아지던 것 (대기열 90번)
 * 크로미움 직원 계정 PC 에서 잼(글자 칸 폭 / 실제 줄):
 *   1024px  23px  '일 / 마 / 감 / 입 / 력'   ← 한 글자씩 다섯 줄
 *   1152px  38px  '일 마 / 감 입 / 력'
 *   1280px  49px  '일 마감 / 입력'            ← 낱말은 안 갈라짐
 *   1366px  57px  '일 마감 입 / 력'           ← '입력' 이 갈라짐
 * 바로가기 칸이 가로 3칸 고정이라 작은 PC 에서 한 칸이 47px 까지 눌린 탓이다.
 * 1) 작은 PC(960~1279px)에서만 가로 2칸·세로 3줄로 접는다 — 칸 47→74px, 글자 23→50px.
 * 2) 이 화면 안에서는 어느 폭에서도 낱말을 가운데서 자르지 않는다(word-break:keep-all).
 *    바로가기 말고도 '현금 상 / 태' · '현재 실 / 측' · '오늘 매 / 출 (참고)' · '주유소 탱크 현 / 황' ·
 *    '현장 요약 - 무한대 / 주유소' · '현재 미처리 업무가 없 / 습니다.' 가 같은 식으로 끊겨 있었다(1024px).
 * 고친 뒤(960·1024·1152·1279·1280·1366·1920 모두): 낱말 갈라짐 0 · 칸 밖으로 나간 것 0.
 * 1280px 이상은 칸 수 그대로이고 글자만 낱말 단위로 접힌다. 폰(959px 이하)은 전·후 같다.
 * 다른 역할(소장·대표·관리자·차장) 화면은 이 칸을 안 써서 그대로다. */
@media (min-width:960px) and (max-width:1279px){
  .v120-staff-board .staff-quick>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important}
}
.v120-staff-board{word-break:keep-all}

/* v1.3.203 — 폰·태블릿 '알림 · 확인할 일' 창의 거르기 단추가 손가락보다 작던 것 (대기열 92번)
 * 알림 창(#notificationDialog) 안의 [전체]·[중요]·[업무]·[보고] 네 단추가 폰 390px 과
 * 세차 태블릿 768px 에서 모두 **높이 35px** 였다. 이 프로젝트가 v1.3.129·137·160 에서 맞춰 온
 * 폰 최소 44px 에 못 미친다. 매일 누르는 창이고 나이 드신 분들이 놓치기 쉬운 크기다.
 * 원인은 v1.3.129 와 같은 모양이다 — 폰 규칙 `@media(max-width:959px){button{min-height:44px}}` 는
 * 이름표(element)로 걸려 있는데, 뒤에 나오는 `.notification-filter{min-height:34px}` 는 class 라 더 무거워 이긴다.
 * 그래서 폰에서만 44px 로 되돌린다. PC(960px 이상)는 34px 그대로다.
 * 잰 값: 폰 390px 35 → 44px · 세차 768px 35 → 44px · 네 단추 한 줄 그대로(54px 폭) · 창 밖으로 나간 것 0.
 * 단추가 하는 일(거르기)·색·글자는 그대로다. */
@media (max-width:959px){
  .notification-filter{min-height:44px}
}

/* v1.3.207 — 소장·부장·차장 홈 맨 위에 "오늘 해야 할 일"(v55FieldChecklistPanel)을 v1321Dashboard 맨 위로 옮겼다.
 * (AI_BUILD_STANDARD.md 1-3: 대시보드 1순위는 "문제·할 일" — 그동안 이 패널은 있었지만 화면에 안 보이는
 * 경로에만 연결돼 있었다. app.js 는 한 줄만 옮겼고, 계산·API·done/pending 판정은 그대로다.)
 * 옮기면서 보니 기존 알약 단추(.v55-fc-item)가 손가락 크기(2-4: 폰 42px 이상)에 못 미쳤다 —
 * 전: padding 4px 10px·0.74rem → 실측 높이 약 24px. 나이 드신 분들이 맨 위 첫 화면에서 매일 누르는
 * 자리라 여기서만 키운다(다른 곳에서 이 클래스를 쓰는 자리는 없음 — grep 확인).
 * 색·아이콘(완료 ✔ 초록 / 미확인 ○ 빨강)과 눌렀을 때 이동하는 곳(data-target-menu)은 그대로다. */
.v55-fieldchecklist{ gap:10px; }
.v55-fc-block b{ font-size:.92rem; }
.v55-fc-items{ gap:8px; }
.v55-fc-item{ min-height:40px; padding:8px 14px; font-size:.86rem; border-radius:12px; font-weight:700; }
.v55-fc-item i{ font-size:1.05em; }
@media (max-width:959px){
  .v55-fc-items{ flex-direction:column; align-items:stretch; }
  .v55-fc-item{ min-height:44px; width:100%; font-size:.92rem; justify-content:flex-start; }
}

/* v1.3.208 — 소장님이 올려준 디자인 시안의 "소장 화면"을 그대로 반영. 얹기만 하고 위 v55/v1.3.207 규칙은
 * 하나도 지우지 않는다(같은 선택자를 새 값으로 다시 선언 — 캐스케이드로 뒤에 온 이 블록이 이긴다).
 * 자료·계산은 그대로, 카드 크기·색·안내문만 시안대로 새로 입힌다. */
.v55-fc-summary{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.v55-fc-summary b{ font-size:.94rem; font-weight:900; color:#1b3450; white-space:nowrap; }
.v55-fc-bar{ flex:1; height:12px; border-radius:999px; background:#e7ecf2; overflow:hidden; }
.v55-fc-bar span{ display:block; height:100%; background:#1f9d58; border-radius:999px; }
.v55-fc-bar.sm{ height:7px; margin:6px 0 10px; flex:none; width:100%; }
.v55-fc-block{ margin-bottom:4px; }
.v55-fc-items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.v55-fc-item{
  flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px;
  min-height:104px; padding:14px 14px 12px; border-radius:14px; text-align:left;
  box-shadow:0 1px 3px rgba(20,30,45,.10);
}
.v55-fc-item i{ font-size:1.7rem; line-height:1; }
.v55-fc-item-label{ font-size:.9rem; font-weight:800; line-height:1.3; }
.v55-fc-item-status{ font-size:.84rem; font-weight:900; }
.v55-fc-item-hint{ font-size:.72rem; font-weight:600; }
.v55-fc-item.done{ background:#1a7f46; color:#fff; border:none; }
.v55-fc-item.pending{ background:#c53a35; color:#fff; border:none; }
.v55-fc-howto{ margin-top:6px; padding:12px 14px; background:#f5f8fb; border-radius:12px; }
.v55-fc-howto b{ font-size:.88rem; color:#1b3450; display:block; }
.v55-fc-howto small{ display:block; color:#5c6673; font-size:.74rem; margin:2px 0 10px; }
.v55-fc-steps{ display:flex; flex-wrap:wrap; gap:10px; }
.v55-fc-steps span{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:70px; font-size:.72rem; font-weight:700; color:#33465c; text-align:center; }
.v55-fc-steps span i{ font-style:normal; font-size:1.3rem; }
.v55-fc-tips{ margin-top:10px; padding:12px 14px; background:#eef7f0; border-radius:12px; }
.v55-fc-tips b{ font-size:.88rem; color:#1a7f46; display:block; margin-bottom:6px; }
.v55-fc-tips ul{ margin:0; padding-left:18px; }
.v55-fc-tips li{ font-size:.78rem; color:#2a3f57; line-height:1.6; }
@media (max-width:959px){
  .v55-fc-items{ grid-template-columns:1fr; }
  .v55-fc-item{ min-height:96px; }
  .v55-fc-steps span{ min-width:64px; font-size:.7rem; }
}
/* 어두운 화면 — 배치는 위와 같고 색만 다르다(2-5). 새 안내상자(howto·tips)·막대만 다크 값이 필요하다
 * (카드 자체는 이미 있던 html[data-theme="dark"] .v55-fc-item.done/.pending !important 규칙이 그대로 이긴다). */
html[data-theme="dark"] .v55-fc-summary b{ color:#c7d2df; }
html[data-theme="dark"] .v55-fc-bar{ background:#242c37; }
html[data-theme="dark"] .v55-fc-howto, html[data-theme="dark"] .v55-fc-tips{ background:#161b22; }
html[data-theme="dark"] .v55-fc-howto b, html[data-theme="dark"] .v55-fc-steps span{ color:#e6ecf3; }
html[data-theme="dark"] .v55-fc-howto small{ color:#9aa7b6; }
html[data-theme="dark"] .v55-fc-tips b{ color:#3fbe7e; }
html[data-theme="dark"] .v55-fc-tips li{ color:#c7d2df; }

/* v1.3.209 — 관리자(ADMIN) 홈 전용 시안. 기존 규칙은 하나도 지우지 않고 얹기만 한다.
 * 통계 타일(.v1321-kpis .v1200-kpi)·바로가기(.v1200-quick)·요약(.ceo2-kpis)은 전부 이미 있는
 * 부품을 그대로 재사용해서 색·크기·밝음/어두움을 새로 만들지 않는다(아래 4개 규칙이 그 셋 전부다).
 * 새로 생긴 모양은 "적용 원칙" 카드(.v55-ap-*)뿐이라 그 색만 계산해서 확인했다 —
 * 배경/글자색은 바로 위 v1.3.208 안내상자(.v55-fc-howto/.v55-fc-tips)와 같은 값을 그대로 재사용한다
 * (라이트 #5c6673 on #f5f8fb = 5.47:1, 다크 #9aa7b6 on #161b22 = 7.07:1 — 둘 다 본문 기준 4.5:1 이상). */
.v1321-kpis.v55-admin-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1100px){
  .v1321-kpis.v55-admin-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.v55-admin-summary .ceo2-kpis{ margin:0; }
.v55-ap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.v55-ap-item{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:#f5f8fb; }
.v55-ap-item i{ font-style:normal; font-size:1.25rem; line-height:1; }
.v55-ap-item b{ font-size:.84rem; font-weight:800; color:#1b3450; }
.v55-ap-item span{ font-size:.72rem; color:#5c6673; line-height:1.4; }
html[data-theme="dark"] .v55-ap-item{ background:#161b22; }
html[data-theme="dark"] .v55-ap-item b{ color:#e6ecf3; }
html[data-theme="dark"] .v55-ap-item span{ color:#9aa7b6; }
/* v1.3.209 — .v1321-card 는 사이트 전체(소장·부장·차장·대표 화면 포함)에 어두운 화면 색이 없는
 * 기존 결함이다(범위 밖이라 "추가 개선 후보"로만 남기고 전역 규칙은 그대로 둔다). 그 카드를 새로
 * 들여온 이 관리자 화면(.v55-admin-home)만은 하얗게 남지 않게, 이미 검증된 값(위 "구형 하드코딩
 * 흰색 교정" 규칙과 같은 --v120-surface/--v120-ink/--v120-border, 각각 다크에서 13.77:1·7.36:1)을
 * 그대로 재사용해 이 화면 범위 안에서만 얹는다 — 다른 화면의 .v1321-card 는 손대지 않는다. */
html[data-theme="dark"] .v55-admin-home .v1321-card{ background:var(--v120-surface); border-color:var(--v120-border); }
html[data-theme="dark"] .v55-admin-home .v1321-card>header{ border-bottom-color:var(--v120-border); }
html[data-theme="dark"] .v55-admin-home .v1321-card>header h3{ color:var(--v120-ink); }
html[data-theme="dark"] .v55-admin-home .v1321-card>header small{ color:var(--v120-muted); }

/* ============================================================
 * v1.3.210 — 대표(CEO) 홈 전용 시안. 위 규칙은 하나도 지우거나 고치지 않고 얹기만 한다.
 * 통계 타일(.v1200-kpi)·바로가기(.v1200-quick)·보고 현황표(.v1200-report-matrix)는 전부 이미 있는
 * --v120-* 공통 변수 부품을 그대로 재사용해서 여기서 새로 손대지 않는다(밝음/어두움 이미 같은 배치).
 * 이 화면에서 새로 생긴 모양(유종 타일·유종별 막대·매출 추이 탭·실마진 입고 목록)은 전부 --v120-* 변수만
 * 써서 처음부터 다크 값을 같이 냈다 — 새 색은 하나도 만들지 않았다. 유종 점(.v55-fuel-dot) 색만 인라인
 * style 로 fuelColor() 값을 그대로 쓴다(AGENTS.md 1-6-2 — 유종 고정 배정, 절대 새로 안 만듦).
 * 대비 확인(신규로 조합한 짝만, 나머지는 아래처럼 이미 사이트에 있는 짝을 그대로 재사용):
 *  - 탭 "선택됨" 상태: 처음에는 --v120-accent 배경+흰 글자로 만들었다가, 다크 값(#65a5d7 on #fff)이
 *    2.6:1로 기준(4.5:1) 미달인 걸 계산으로 발견해 폐기했다. 대신 이미 검증된 짝
 *    --v120-accent on --v120-accent-soft(다크 5.22:1·라이트 5+:1 — .chat-room-item.active 와 같은 짝)로
 *    바꿨다 — 배경을 채우지 않고 글자·테두리만 강조색을 쓰는 방식.
 *  - 그 외 색 짝은 전부 이미 이 표에서 쓰던 조합 재사용: --v120-bad on --v120-bad-soft(.v1200-tank-card
 *    em.bad와 동일), --v120-accent on --v120-surface-2(.v1200-report-copy button과 동일).
 * ============================================================ */
.v55-ceo-fuel-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.v55-ceo-fuel-tile{min-width:0;min-height:74px;display:grid;gap:4px;align-content:center;text-align:left;padding:10px 11px;border:1px solid var(--v120-border);border-radius:10px;background:var(--v120-surface-2);color:var(--v120-ink);font:inherit;box-shadow:var(--v120-shadow)}
.v55-ceo-fuel-tile:hover{border-color:var(--v120-border-strong);background:var(--v120-surface)}
.v55-ceo-fuel-tile>header{display:flex;align-items:center;gap:6px}
.v55-ceo-fuel-tile>header b{font-size:10.5px;font-weight:900}
.v55-ceo-fuel-tile>strong{font-size:15px;font-variant-numeric:tabular-nums}
.v55-ceo-fuel-tile>small{font-size:8px;color:#55677a} /* var(--v120-muted)는 이 배경(surface-2)에서 4.31:1로 미달 — 라이트만 진하게(5.5:1), 어두운 화면은 전역 small 규칙(4674줄)이 그대로 처리 */
.v55-ceo-fuel-tile>em{justify-self:start;font-style:normal;font-size:7.5px;font-weight:900;padding:2px 6px;border-radius:999px;background:var(--v120-bad-soft);color:var(--v120-bad)}
.v55-ceo-fuel-tile.unknown>strong{color:var(--v120-muted)}
.v55-fuel-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;display:inline-block}
@media(max-width:960px){.v55-ceo-fuel-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

.v55-ceo-fuel-bars{display:grid;gap:6px}
.v55-ceo-fuel-bar-row{display:grid;grid-template-columns:minmax(88px,1fr) minmax(90px,2fr) minmax(64px,.6fr);align-items:center;gap:8px;min-height:28px}
.v55-ceo-fuel-bar-row>span{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:800;color:var(--v120-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v55-ceo-fuel-bar{position:relative;height:9px;border-radius:3px;background:var(--v120-surface-3);overflow:hidden}
.v55-ceo-fuel-bar>em{display:block;height:100%;min-width:2px;border-radius:3px}
.v55-ceo-fuel-bar-row>strong{font-size:8.5px;text-align:right;color:var(--v120-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

.v55-ceo-pane-note{margin:0 0 7px;padding:6px 9px;border:1px solid var(--v120-border);border-radius:7px;background:var(--v120-surface-2);color:#55677a;font-size:8px;line-height:1.5} /* var(--v120-muted)는 이 배경에서 4.31:1로 미달 — 라이트만 진하게(5.5:1) */
.v55-ceo-pane-note b{color:var(--v120-ink)}
html[data-theme="dark"] .v55-ceo-pane-note{ color:var(--v120-muted); }

.v55-ceo-trend-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.v55-ceo-tabs{display:flex;gap:5px;flex-wrap:wrap}
.v55-ceo-tab{min-height:34px;padding:6px 12px;border:1px solid var(--v120-border);border-radius:999px;background:var(--v120-surface-2);color:#55677a;font-size:8.5px;font-weight:850} /* var(--v120-muted)는 이 배경에서 4.31:1로 미달 — 라이트만 진하게(5.5:1) */
.v55-ceo-tab:hover{border-color:var(--v120-border-strong)}
.v55-ceo-tab.active{background:var(--v120-accent-soft);border-color:var(--v120-accent);color:var(--v120-accent)}
.v55-ceo-station-filter{min-height:34px;border-radius:8px!important;font-size:8.5px;padding:4px 8px;max-width:220px}
.v55-ceo-tab-pane[hidden]{display:none}
@media(max-width:959px){
  .v55-ceo-tab{min-height:42px}
  .v55-ceo-station-filter{min-height:42px}
}

.v1321-kpis.v55-ceo-margin-tiles{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:8px}
@media(max-width:1100px){.v1321-kpis.v55-ceo-margin-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v55-ceo-margin-list{display:grid;gap:5px;max-height:340px;overflow:auto;padding-right:2px}
.v55-ceo-margin-row-wrap{display:grid;gap:0;min-width:0}
.v55-ceo-margin-row{appearance:none;width:100%;min-width:360px;display:grid;grid-template-columns:44px minmax(72px,1fr) minmax(56px,.8fr) minmax(56px,.7fr) minmax(64px,.9fr) 16px;align-items:center;gap:6px;min-height:36px;padding:5px 8px;border:1px solid var(--v120-border);border-radius:8px;background:var(--v120-surface-2);color:var(--v120-ink);font:inherit;text-align:left;cursor:pointer}
.v55-ceo-margin-row:hover{background:var(--v120-surface)}
.v55-ceo-margin-row.bad{border-color:var(--v120-bad)}
.v55-ceo-margin-row.warn{border-left:3px solid var(--v120-warn)}
.v55-ceo-margin-row>span{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v55-cm-date{color:#55677a;font-weight:850} /* var(--v120-muted)는 이 배경(margin-row, surface-2)에서 4.31:1로 미달 — 라이트만 진하게(5.5:1) */
.v55-cm-amount{font-weight:900;text-align:right}
.v55-ceo-margin-row>em{font-style:normal;color:var(--v120-accent);text-align:right;font-size:9px}
.v55-ceo-margin-detail{margin:3px 2px 2px;padding:8px 10px;border:1px dashed var(--v120-border-strong);border-radius:8px;background:var(--v120-surface);min-width:0}
.v55-ceo-margin-detail-body p{margin:0 0 5px;font-size:8px;color:var(--v120-ink);line-height:1.55}
.v55-ceo-margin-detail-body p:last-child{margin-bottom:0}
.v55-ceo-margin-detail-body .v55-ceo-margin-note{color:var(--v120-muted)}
@media(max-width:959px){.v55-ceo-margin-row{min-height:44px}}

/* v1.3.210 다크 — 이 화면(.v55-ceo-home)에서 재사용하는 옛 하드코딩 부품들은 사이트 전체가 아직
 * 어두운 화면 값이 없는 기존 결함이다(.v1321-head/.v1321-empty/.v119-chart-bars/.v1321-hourly/
 * .v1323-column-chart 계열 — v1.3.209 의 .v1321-card 와 같은 종류의 결함이며, .v1321-card 자체는 그
 * 패치가 이미 있다). 사이트 전역 규칙은 그대로 두고, 이번에 새로 들여오는 이 화면 범위 안에서만
 * 이미 검증된 --v120-* 값으로 얹는다 — 다른 화면(소장 개별 대시보드 등)의 같은 클래스는 손대지 않는다. */
html[data-theme="dark"] .v55-ceo-home .v1321-card{ background:var(--v120-surface); border-color:var(--v120-border); }
html[data-theme="dark"] .v55-ceo-home .v1321-card>header{ border-bottom-color:var(--v120-border); }
html[data-theme="dark"] .v55-ceo-home .v1321-card>header h3{ color:var(--v120-ink); }
html[data-theme="dark"] .v55-ceo-home .v1321-card>header small{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1321-head small{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1321-head h2{ color:var(--v120-ink); }
html[data-theme="dark"] .v55-ceo-home .v1321-head-status{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1321-head-status button{ border-color:var(--v120-border); background:var(--v120-surface); color:var(--v120-ink); }
html[data-theme="dark"] .v55-ceo-home .v1321-empty{ border-color:var(--v120-border-strong); background:var(--v120-surface-2); color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v119-chart-bars{ border-bottom-color:var(--v120-border); background:var(--v120-surface-2); }
html[data-theme="dark"] .v55-ceo-home .v119-chart-bars i{ background:var(--v120-accent); }
html[data-theme="dark"] .v55-ceo-home .v119-chart-bars small{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1321-hourly{ border-bottom-color:var(--v120-border); }
html[data-theme="dark"] .v55-ceo-home .v1321-hourly small{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1323-column-chart,
html[data-theme="dark"] .v55-ceo-home .v1323-station-columns{ border-bottom-color:var(--v120-border); }
html[data-theme="dark"] .v55-ceo-home .v1323-column>i,
html[data-theme="dark"] .v55-ceo-home .v1323-station-column>i{ background:var(--v120-surface-3); }
html[data-theme="dark"] .v55-ceo-home .v1323-column>b,
html[data-theme="dark"] .v55-ceo-home .v1323-station-column>b{ color:var(--v120-ink); }
html[data-theme="dark"] .v55-ceo-home .v1323-column>small{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-home .v1323-station-column>span{ color:var(--v120-ink); }
html[data-theme="dark"] .v55-ceo-home .v1323-station-column:hover>i{ background:var(--v120-surface); }
html[data-theme="dark"] .v55-ceo-home .v1323-station-column:hover>i>em{ background:var(--v120-accent); }
html[data-theme="dark"] .v55-ceo-home .v1323-chart-help{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-ceo-tab{ color:var(--v120-muted); }
html[data-theme="dark"] .v55-cm-date{ color:var(--v120-muted); }

/* v1.3.210 (수정) — .v119-chart/.v119-chart-bars(일별추이 막대그래프)의 높이는 height:100% 사슬
 * (.v119-chart→.v119-chart-bars→span→막대 i) 로 되어 있다. 지금까지 이 부품을 쓰던 유일한 자리
 * (v120ManagerSalesPanel)는 CSS 그리드 트랙(.v120-manager-sales{grid-template-rows:minmax(0,1fr)
 * 105px})이 확정 높이를 내려줘서 문제가 없었다. 그런데 대표 홈은 이 부품을 일반 흐름 카드
 * (.v1321-card/.v55-ceo-tab-pane) 안에 놓는다 — 확정 높이를 내려주는 조상이 없어 height:100% 가
 * 전부 auto 로 무너지고 막대가 하나도 안 보인다. Playwright로 실제로 렌더링해 대조해 보니 PC·폰
 * 폭 둘 다 똑같이 무너진다(폭 문제가 아니라 "이 부품을 쓰는 자리가 바뀐" 문제) — 그래서 폭 조건
 * 없이 대표 홈(.v55-ceo-home) 범위에서만 퍼센트 대신 고정 높이로 다시 그린다. 다른 화면
 * (v120ManagerSalesPanel)이 쓰는 원래 규칙은 전혀 건드리지 않는다. */
.v55-ceo-home .v119-chart{height:auto;min-height:0;padding:7px 8px 5px;box-sizing:border-box}
.v55-ceo-home .v119-chart-bars{height:150px;min-height:150px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--v120-border);padding:5px 3px 17px;box-sizing:border-box;background:var(--v120-surface-2)}
.v55-ceo-home .v119-chart-bars>span{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:4px}
.v55-ceo-home .v119-chart-bars i{display:block;width:72%;max-width:15px;background:var(--v120-accent);border-radius:2px 2px 0 0}
.v55-ceo-home .v119-chart-bars small{position:absolute;bottom:-15px;font-size:9px;color:#55677a;white-space:nowrap} /* v120-muted(#66788a)는 이 배경(#f7f9fb)에서 대비 4.31:1로 기준(4.5:1) 미달 — 이 축 라벨만 살짝 더 진한 색(5.5:1)을 쓴다. 어두운 화면은 아래 다크 규칙(html[data-theme="dark"] .v55-ceo-home .v119-chart-bars small)이 var(--v120-muted)로 다시 덮어써 그대로 6.67:1 유지. */
.v55-ceo-home .v120-sales-chart .v119-chart-bars{position:relative;overflow:hidden}
.v55-ceo-home .v120-sales-line{position:absolute;left:4px;right:4px;top:8px;bottom:18px;width:calc(100% - 8px);height:calc(100% - 26px);pointer-events:none;overflow:visible}
.v55-ceo-home .v120-sales-line polyline{fill:none;stroke:var(--v120-accent);stroke-width:1.3;vector-effect:non-scaling-stroke}
@media(min-width:960px){ .v55-ceo-home .v119-chart-bars{height:180px;min-height:180px} }

/* v1.3.211 — "주요 기능 바로가기"(관리자)·"전체 관리 바로가기"(대표)가 시안의 색깔 아이콘 타일이 아니라
 * 옛 글자만 있는 .v1200-quick 그대로였다는 지적을 반영한다. 새 클래스(.v55-quick-tiles/.v55-qt)만 추가하고
 * .v1200-quick 자체는 그대로 둔다 — 다른 화면 5곳(현장 홈, 대표/관리자 전체 화면 등)이 쓰는 부품이라
 * 손대면 전부 같이 바뀐다. --v120-* 변수만 쓰므로 밝은/어두운 화면이 자동으로 맞는 색을 쓴다.
 * 아이콘 배지 색은 장식이라 두 화면 모두 고정 색(흰 글자 대비 확보된 진한 색)을 그대로 쓴다. */
.v55-quick-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.v55-qt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 14px 12px;
  border-radius:16px;border:1px solid var(--v120-border);background:var(--v120-surface);
  text-align:left;cursor:pointer;min-height:96px;box-shadow:var(--v120-shadow);font-family:inherit}
.v55-qt:hover{border-color:var(--v120-accent);background:var(--v120-accent-soft)}
.v55-qt-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;color:#fff;background:#286eaa}
.v55-qt b{font-size:14px;color:var(--v120-ink);font-weight:800}
.v55-qt small{font-size:12px;color:var(--v120-muted)}
.v55-quick-tiles .v55-qt:nth-child(6n+1) .v55-qt-ic{background:#1f9d64}
.v55-quick-tiles .v55-qt:nth-child(6n+2) .v55-qt-ic{background:#d64550}
.v55-quick-tiles .v55-qt:nth-child(6n+3) .v55-qt-ic{background:#7c4fd1}
.v55-quick-tiles .v55-qt:nth-child(6n+4) .v55-qt-ic{background:#dd8a12}
.v55-quick-tiles .v55-qt:nth-child(6n+5) .v55-qt-ic{background:#1f78c9}
.v55-quick-tiles .v55-qt:nth-child(6n+6) .v55-qt-ic{background:#546679}
@media(max-width:959px){
  .v55-quick-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v55-qt{min-height:88px;padding:12px}
}

/* ══════════════════════════════════════════════════════════════════════
 * v1.3.212 — 시안("주유소 통합관리 vNext — 최종 적용 시안")의 왼쪽 메뉴(다크 네이비,
 * 아이콘이 있는 평평한 목록)를 PC 사이드바에 반영한다.
 *
 * 자료·권한·이동 로직은 한 글자도 안 바꾼다 — renderRoleMenu()/#roleMenuRoot,
 * ROLE_MENU_PROFILES, menuItemAllowed(), 역할별 강조색(--role-menu-accent, 5234~5239줄)은
 * 그대로 재사용한다. 여기서는 "펼쳐야 보이는 접이식 묶음" 모양을 "누르면 바로 보이는
 * 평평한 목록" 모양으로만 다시 그린다(UI_EDIT_GUIDE.md 3번: 같은 기능, 새 모양).
 * #appView 는 항상 존재하는 최상위 컨테이너라 여기 선택자에 넣어 이전 시대 규칙들보다
 * 확실히 이기게 한다(구형 규칙을 지우지 않고 남겨 둔 채 마지막에 새로 그리는 값만 이긴다).
 * ══════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  #appView .sidebar-nav{
    width:224px!important;
    background:linear-gradient(180deg,#0e2a49 0%,#0a1f36 55%,#081a2e 100%)!important;
    padding:14px 10px 16px!important;
    box-shadow:4px 0 20px rgba(6,20,36,.18)!important;
  }
  #appView .role-menu-root{ gap:2px!important; margin:2px 0 10px!important; }
  /* 접이식 → 평평한 목록: 닫힌 묶음도 항상 그대로 보인다(자료·기능은 그대로, 모양만). */
  
  
  
  
  
  
  
  
  
  
  
  /* 역할 주메뉴 묶음의 색 상자(5241~5259줄)는 평평한 목록에서는 굳이 안 써도 되게,
     새 목록 색과 부딪히지 않도록 배경만 비운다(강조 활성색·라벨색은 그대로 유지). */
  
  
}

/* ══════════════════════════════════════════════════════════════════════
 * v1.3.213 — 사이드바를 224px로 넓혔더니 본문(#mainContent) 왼쪽 34px가 사이드바 밑에
 * 가려지는 것을 발견해 고친다(재고·실마진분석 등 홈이 아닌 화면에서 실제 자료로 확인).
 *
 * 원인: 본문 왼쪽 위치는 theme-v1326.css 의
 *   `html:not([data-theme="dark"]) body #mainContent{ left:var(--fh26-sidebar) }` (특이도 1,1,2)
 *   와 다크모드용 `html[data-theme="dark"] body #mainContent{ left:var(--fh26-sidebar) }` 가 정하고,
 *   그 변수 --fh26-sidebar 는 186px 로 고정돼 있다. v1.3.212 는 사이드바 폭만 224px 로 새로 그렸을 뿐
 *   이 변수·이 규칙은 안 건드렸기 때문에, 사이드바(224px)와 본문 시작 위치(186px) 사이 38px 가 어긋나
 *   본문 제목 앞부분 글자가 사이드바 밑에 가려 잘려 보였다.
 * 고치는 법: 같은 요소를 가리키는 ID 선택자를 두 번 써서(#mainContent#mainContent) 특이도를
 * (2,0,0) 으로 올려 위 두 규칙(특이도 1,1,2)을 라이트·다크 모드 모두에서 확실히 이기게 한다.
 * --fh26-sidebar 변수나 theme-v1326.css 규칙 자체는 지우지 않는다(다른 화면이 참조할 수 있음).
 *
 * v1.3.223 — 이 규칙이 .carwash-mode 를 몰라서, 960px 이상 세차 키오스크 화면에서 세차 전용
 * 왼쪽 정렬(carwash.css)을 항상 이겨 224px 빈 공간이 생겼다(1280px 재현 확인). body:not(
 * .carwash-mode) 로 세차 화면만 제외 — 224px 값·PC 동작은 안 바꿈.
 * ══════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  body:not(.carwash-mode) #mainContent#mainContent{ left:224px!important; }
}

/* ══════════════════════════════════════════════════════════════════════
 * v1.3.214 — 시안의 소장 화면처럼 핵심 메뉴(각 역할의 "주메뉴")만 항상 펼쳐 보이고, 나머지는
 * "더보기" 항목 하나로 접어 둔다(renderRoleMenu() 참고 — 자료·이동 로직은 그대로, 묶는 방식만 바뀜).
 *
 * v1.3.212 는 "닫힌 묶음도 항상 그대로 보인다"는 규칙(#appView .role-nav-children[hidden]{
 * display:grid!important })을 넣어 접이식 자체를 무력화했었다 — 그때는 "전부 평평하게 보이기"가
 * 목표였기 때문이다. 이번에는 "더보기" 묶음만 원래대로 접히게 되돌리되, 그 v1.3.212 규칙 줄은
 * 지우지 않는다(다른 묶음·다른 화면이 기대할 수 있음) — 더 구체적인 선택자로 "더보기" 묶음만 다시
 * 덮어써서 이긴다(특이도 상 이 규칙이 항상 이긴다).
 * ══════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  
  
  
  
  
  
  
}


/* v1.3.269 — 채팅: 내 메시지 아래 수정·삭제 단추(예전에는 꾸밈이 없어 큰 상자로 나왔다) + 폰 채팅방 목록 높이 */
.chat-msg-actions{display:inline-flex;gap:6px;margin:2px 4px 0}
.chat-msg-actions button{border:0;background:none;padding:4px 6px;min-height:30px;font-size:.72rem;font-weight:700;color:#5b6b7c;text-decoration:underline;cursor:pointer;box-shadow:none}
.chat-msg-actions .chat-msg-delete{color:#b42318}
@media(max-width:959px){.chat-rooms{max-height:min(42vh,340px)}}
/* v1.3.269 — 프로그램관리: 한 카드를 펼치면 같은 줄 카드가 같이 1600px 넘게 늘어나 빈 카드처럼 보였다. 카드는 위로 붙이고, 펼친 카드는 한 줄을 다 쓴다 */
#userCards{align-items:start}
#userCards .user-access-card:has(details[open]){grid-column:1/-1}
#userCards .user-access-card .station-head small{display:block;color:#667085;font-weight:500}

.user-create-box{margin:8px 0 16px;border:1px solid var(--line,#dfe6ef);border-radius:12px;background:#fff}
.user-create-box>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;font-size:1rem;color:#1d4ed8;min-height:44px;display:flex;align-items:center}
.user-create-box>summary::-webkit-details-marker{display:none}
.user-create-box[open]>summary{border-bottom:1px solid #e4ebf2}
.user-create-box>*:not(summary){margin-left:16px;margin-right:16px}
.user-create-box>#userMessage{margin-bottom:14px}

/* v1.3.270 — 폰·태블릿: 달력 '자세히' 줄·세차 통장이체 줄·달력 이전/다음 달 단추를 손가락 크기로 */
@media (max-width:820px){
  .calendar-delivery-advanced>summary,.cw45-transfer>summary,html body details.form-card.compact>summary{min-height:38px;display:flex;align-items:center}
}
@media (pointer:coarse),(max-width:820px){
  /* v1.3.270 — 버전 칩(낡은 화면이면 누르면 새로고침)이 17px 높이라 손가락으로 누르기 어려웠다. 모양은 그대로 두고 누르는 범위만 위아래로 넓힘 */
  html body #vnTop .vn-ver{position:relative}
  html body #vnTop .vn-ver::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px}
}

/* v1.3.270 — 마감일지 4단추: 폰·태블릿(~959px)에서 칸이 2개인데 단추가 '6칸·4칸 차지'로 남아 있어 '현금마감'이 반쪽(폰)이거나
   줄마다 폭이 어긋났다(태블릿) → 입력·현금마감은 한 줄 전체, 사진·파일은 반반(단추 id·동작 그대로). PC(960px~)는 4열 그대로 */
@media (max-width:959px){
  html body .closing-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .closing-actions>.closing-action{grid-column:auto}
  html body .closing-actions>.closing-action[data-closing-action="manual"],
  html body .closing-actions>.closing-action[data-closing-action="cash"]{grid-column:1/-1;min-height:96px}
}

/* v1.3.270 — 주변단가(소장·부장) 폰·태블릿: 매일 하는 일은 '가격 넣기'와 '우리 가격과 비교 보기'인데, 입력은 맨 아래 접힘 + 비교는 긴 수정목록 뒤에 있어
   둘 다 한참 내려가야 보였다. 순서를 '입력 → 비교 → 오늘 입력자료(수정/삭제)'로, 수정목록 한 줄은 2줄(이름·유종 / 가격·단추)로 줄이고 카드 안쪽 여백을 줌 */
@media (max-width:820px){
  html body [data-view="market"]:not([hidden]){display:flex;flex-direction:column}
  html body [data-view="market"]>.page-title{order:-3}
  html body [data-view="market"]>details.form-card{order:-2}
  html body [data-view="market"]>#marketBoard{order:-1;display:flex;flex-direction:column}
  html body #marketBoard>.v55-market-card{order:-1}
  html body #marketBoard>.v55-panel{padding:10px 12px}
  html body #marketBoard>.v55-panel .v55-market-row.market-edit-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);row-gap:8px;padding:10px 0}
  html body #marketBoard>.v55-panel .v55-market-row.market-edit-row>.market-edit-price{grid-column:1;grid-row:2}
  html body #marketBoard>.v55-panel .v55-market-row.market-edit-row>span{grid-column:2;grid-row:2;justify-content:flex-end}
  html body #marketBoard>.v55-panel .v55-market-row.market-edit-row button{min-height:40px}
}

/* v1.3.270 — 재고·탱크 '탱크 현황' 카드(폰·태블릿): 단추 줄이 배지 1 + 단추 2칸 격자인데, 미측정 탱크는 단추가 1개뿐이라 오른쪽 한 칸이 비어 단추가 반쪽만 찼다.
   단추가 하나면 남은 폭을 다 쓰게 함(단추 id·동작 그대로) */
@media (max-width:820px){
  html body .tank-record-row .tank-actions>button:nth-child(2):last-child{grid-column:2/-1}
}

/* v1.3.270 — 재고·탱크 팝업 4개(탱크 수정·실측 입력·재고 조정·측정 보정) 폰·태블릿: 예전 5px 모서리·14px 여백이 남아 입력칸 라벨이 칸에 붙고,
   '닫기' 단추가 제목 옆에서 커다랗게 늘어났다. 소장이 매일 쓰는 실측 입력 팝업이라 여백·입력칸·단추를 손가락 크기로 정리 */
@media (max-width:820px){
  html body dialog.inventory-dialog{width:calc(100vw - 20px);max-width:560px;border:0;border-radius:18px;padding:0;box-shadow:0 22px 70px #10182840}
  html body dialog.inventory-dialog form{padding:16px 16px 18px;display:grid;gap:12px}
  html body dialog.inventory-dialog .station-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  html body dialog.inventory-dialog .station-head h2{margin:0 0 2px;font-size:1.15rem}
  html body dialog.inventory-dialog .station-head button{flex:0 0 auto;min-height:40px;padding:0 14px}
  html body dialog.inventory-dialog .form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  html body dialog.inventory-dialog label{display:grid;gap:6px;font-weight:700}
  html body dialog.inventory-dialog input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  html body dialog.inventory-dialog select,html body dialog.inventory-dialog textarea{min-height:48px;box-sizing:border-box;width:100%}
  html body dialog.inventory-dialog .button-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  html body dialog.inventory-dialog .button-row button{min-height:48px;width:100%}
}

/* v1.3.271 — 알림 창(종 모양 단추): 안쪽 여백이 없어 제목·필터가 창 가장자리에 붙고, '닫기'가 창 높이만큼 늘어나고, 알림 글이 가운데 정렬로 깨져 보였다
   (PC·태블릿·폰 모두). 여백·머리줄·알림 카드를 정리한다(단추 id·데이터 속성·동작 그대로) */
html body dialog.notification-dialog{width:min(760px,calc(100vw - 20px));max-height:calc(100vh - 28px);padding:18px 20px 20px;border:0;border-radius:18px;overflow:auto;box-shadow:0 22px 70px #10182840}
html body dialog.notification-dialog>.station-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;padding:0;border:0}
html body dialog.notification-dialog>.station-head h2{margin:0 0 4px;font-size:1.25rem}
html body dialog.notification-dialog>.station-head small{display:block;line-height:1.4}
html body dialog.notification-dialog>.station-head button{flex:0 0 auto;align-self:flex-start;min-height:40px;height:auto;padding:0 16px}
html body dialog.notification-dialog .notification-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
html body dialog.notification-dialog .notification-filter-row button{min-height:40px;padding:0 16px}
html body dialog.notification-dialog #notificationCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
html body dialog.notification-dialog .notification-open{display:grid;gap:6px;text-align:left;padding:12px 14px;align-content:start}
html body dialog.notification-dialog .notification-open>.station-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0;padding:0;border:0}
html body dialog.notification-dialog .notification-open>p{margin:0;text-align:left;line-height:1.45}
html body dialog.notification-dialog .notification-open .notification-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
@media (max-width:560px){
  html body dialog.notification-dialog{padding:14px 14px 18px}
  html body dialog.notification-dialog #notificationCards{grid-template-columns:minmax(0,1fr)}
}

/* v1.3.271 — 팝업 머리줄의 '닫기'가 제목·설명 높이만큼 길게 늘어났다(새 채팅·초대·마감 인식 등 공통). 위에 붙여 보통 단추 높이로 */
html body dialog .station-head>button:last-child{align-self:flex-start;height:auto;min-height:40px}

/* v1.3.271 — 프로그램관리(관리자) PC: '계정 목록' 제목과 '새 계정 만들기' 상자가 2열 격자에 나란히 놓여 상자가 제목 옆 오른쪽에 떠 있었다 → 각각 한 줄 전체.
   주유소 목록 카드의 이름과 코드(무한대주유소MHD · …)가 붙어 보이던 것 → 코드는 아래 줄 */
html body #userManager>h2,html body #userManager>#newUserBox{grid-column:1/-1}
html body #stationManagerPanel div>strong+small{display:block;margin-top:2px}

/* v1.3.272 — 재고·탱크 '탱크·실측' 탭: 가끔 하는 '탱크 등록' 양식이 맨 위에 길게 있고, 매일 보는 '예상 현재고'·'탱크 현황'(실측 입력 단추)이 한참 아래에 있었다
   → 탱크 등록을 맨 아래로(단추 id·동작 그대로. 탭을 바꿔도 다른 칸의 순서는 그대로) */
html body .inventory-view:not([hidden]){display:flex;flex-direction:column}
html body .inventory-view>#tankCreatePanel{order:5}

/* v1.3.272 — 통합 검색 상세표(폰): 날짜·주유소·구분이 화면 폭을 다 차지해 유종·수량·금액이 오른쪽 화면 밖에 있었다.
   주유소가 하나뿐이면 '주유소' 칸, 마진 권한이 없으면 'FIFO 실마진' 칸을 접는다(태블릿·PC 는 그대로) */
@media (max-width:560px){
  html body .searchhub-detail-table.single-station th:nth-child(2),html body .searchhub-detail-table.single-station td:nth-child(2){display:none}
  html body .searchhub-detail-table.no-margin th:nth-child(7),html body .searchhub-detail-table.no-margin td:nth-child(7){display:none}
  html body .searchhub-detail-table.single-station{min-width:0;font-size:11.5px}
  html body .searchhub-detail-table.single-station th,html body .searchhub-detail-table.single-station td{padding:8px 4px}
  html body .searchhub-detail-table.single-station.no-margin td:nth-child(4){word-break:keep-all}
  html body .searchhub-detail-table.single-station td:nth-child(1),html body .searchhub-detail-table.single-station td:nth-child(3),html body .searchhub-detail-table.single-station td:nth-child(5),html body .searchhub-detail-table.single-station td:nth-child(6){white-space:nowrap}
}

/* v1.3.273 — 채팅 '새 채팅'·'초대' 창: 모서리가 직각이고 제목 상자에 그림자가 따로 떠 있어 다른 팝업(알림 창)과 달라 보였다 → 둥근 모서리, 제목 상자는 평평하게(단추 id·동작 그대로) */
html body dialog#chatNewRoomDialog,html body dialog#chatInviteDialog{border-radius:18px!important;overflow:hidden}
html body dialog#chatNewRoomDialog .station-head,html body dialog#chatInviteDialog .station-head{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0 0 4px!important}

/* v1.3.273 — 마감일지 단추(폰·태블릿): 사진 찍기(파란 단추)가 파일 올리기보다 20px 낮아 나란히 놓은 두 칸의 높이가 어긋났다 → 같은 높이로 늘림(단추 id·동작 그대로) */
@media (max-width:959px){
  html body .closing-actions{align-items:stretch}
}

/* v1.3.273 — 대표 홈 '확인함 → 등록' 양식: 등록 단추가 작고 안내 글이 옆에 붙어 폰에서 잘렸고, 달력 색이 화면 폭만 한 파란 막대였다
   → 등록 단추를 한 줄 전체로(안내 글은 그 아래), 색 고르기는 작은 칸으로(단추·입력 칸 data 속성·동작 그대로) */
html body .v1334-save{display:grid;gap:6px}
html body .v1334-save>.primary{width:100%;min-height:44px}
html body .v1334-form input.v1334-in[type="color"]{width:64px;height:40px;padding:2px;display:block}

/* v1.3.274 — 마감일지 4단추(PC 960px~): 파란 두 단추가 흰 두 단추보다 9px 낮게 놓였다 → 폰·태블릿(v1.3.273)과 같이 같은 높이로 */
html body .closing-actions{align-items:stretch}

/* v1.3.275 — 주변단가(PC 821px~): v1.3.270 의 순서 정리가 폰·태블릿에만 걸려, PC 는 여전히 '긴 수정목록 → 비교 → 맨 아래 접힌 입력'이었다
   → PC 도 '입력 → 비교 → 오늘 입력자료'로, 수정목록 카드는 안쪽 여백을 줌(단추 id·동작 그대로) */
@media (min-width:821px){
  html body [data-view="market"]:not([hidden]){display:flex;flex-direction:column}
  html body [data-view="market"]>.page-title{order:-3}
  html body [data-view="market"]>details.form-card{order:-2}
  html body [data-view="market"]>#marketBoard{order:-1;display:flex;flex-direction:column}
  html body #marketBoard>.v55-market-card{order:-1;align-self:flex-start;min-width:min(420px,100%)}
  html body #marketBoard>.v55-panel{padding:12px 16px}
}

/* v1.3.275 — 통합 검색 상세표: 원가·마진 권한이 없는 계정(소장·부장)에게 'FIFO 실마진' 칸이 PC·태블릿에서도 줄마다 '-' 로만 보였다
   → 폰(v1.3.272)처럼 모든 화면에서 그 칸을 접는다 */
html body .searchhub-detail-table.no-margin th:nth-child(7),html body .searchhub-detail-table.no-margin td:nth-child(7){display:none}

/* v1.3.276 확인함: 관리자가 아닌 계정에는 탱크 등록 단추 대신 안내 */
html body .v1334-adminonly{font-size:12px;font-weight:700;color:#64748b;padding:0 4px}