/* ==========================================================================
   에스엔볼트에너지(충전소·전기버스) 모듈 — 전용 부품
   원칙: 페이지 바탕·제목·탭·버튼·표·입력칸은 모빌하이 공통 테마(curator_theme) 그대로.
         카드·배지·요약 띠 등은 안전관리 모듈의 sh.css(.sh-*) 를 같이 쓴다 (.sh-page 토큰 상속).
         이 파일은 이 모듈에만 있는 부품(.sv-*) 만 정의한다.
   head.html 전역 로드 (hx-boost 사이드바 이동 시에도 적용되도록).
   ========================================================================== */

/* ── 상태 점 · 범례 ── */
.sv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sh-busy); vertical-align: 0; margin-right: 5px; flex: 0 0 auto; }
.sv-dot.charging { background: #34d399; }
.sv-dot.idle { background: #b3b0a3; }
.sv-dot.fault { background: var(--sh-coral-fill); }
.sv-dot.offline { background: #5f5e5e; }
.sv-dot.done { background: var(--sh-yellow-fill); }
.sv-dot.live { background: var(--sh-coral-fill); box-shadow: 0 0 0 0 rgba(254, 139, 112, .6); animation: sv-pulse 1.6s infinite; }
@keyframes sv-pulse { 0% { box-shadow: 0 0 0 0 rgba(254, 139, 112, .55); } 70% { box-shadow: 0 0 0 8px rgba(254, 139, 112, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 139, 112, 0); } }
@media (prefers-reduced-motion: reduce) { .sv-dot.live { animation: none; } }

/* 강조 카드 안 단위 글씨 (sh.css 기본은 회색이라 어두운 바탕에서 묻힘) */
.sh-stat.sh-stat-hero .sh-stat-value small { color: rgba(255, 255, 255, .72); }

/* 카드 머리의 "다른 화면으로" 링크 — 버튼으로 두면 테마가 글자('관리' 등)로 색을 바꿔 버림 */
.sv-more {
    display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 800;
    color: var(--sh-ink2) !important; text-decoration: none !important; white-space: nowrap;
    padding: 4px 6px 4px 10px; border-radius: 8px;
}
.sv-more::after { content: "chevron_right"; font-family: 'Material Symbols Outlined'; font-size: 18px; font-weight: 400; line-height: 1; }
.sv-more:hover { background: var(--sh-soft); color: var(--sh-ink) !important; }

/* ── 충전기 블록 (블록형 현황) — 한 줄 12기 (충전소 대부분이 12기 이하라 한 줄에 들어감) ── */
.sv-chargers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1500px) { .sv-chargers { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.sv-charger {
    position: relative; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px;
    padding: 10px 10px 9px; text-align: center; min-width: 0; cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}
.sv-charger:hover { box-shadow: var(--sh-shadow-hover); transform: translateY(-2px); }
.sv-charger-name { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--sh-ink2); white-space: nowrap; }
.sv-charger-kw { font-size: 10.5px; font-weight: 700; color: var(--sh-faint); }
.sv-charger-bus { font-size: 11.5px; font-weight: 800; color: var(--sh-ink); background: var(--sh-soft); border-radius: 8px; padding: 3px 4px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sv-charger-time { display: flex; justify-content: center; font-size: 10.5px; color: var(--sh-muted); margin-top: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-charger.idle .sv-charger-bus { color: var(--sh-faint); font-weight: 700; }
.sv-charger.fault { border-color: #ffc9b9; background: #fff7f4; }
.sv-charger.fault .sv-charger-bus { background: var(--sh-red-soft); color: var(--sh-red); }
.sv-charger.offline { background: #f6f5f1; border-style: dashed; }
.sv-charger.offline .sv-charger-name, .sv-charger.offline .sv-charger-bus { color: var(--sh-faint); }

/* SOC 원형 게이지: style="--p: 86" */
.sv-ring {
    --p: 0; --ring: #34d399; --track: #ecebe3;
    width: 74px; height: 74px; margin: 8px auto 0; border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--track) 0);
    display: grid; place-items: center; position: relative;
}
.sv-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--sh-card); }
.sv-ring > * { position: relative; }
.sv-ring b { display: block; font-size: 17px; font-weight: 800; color: var(--sh-ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sv-ring b small { font-size: 10px; font-weight: 700; color: var(--sh-muted); }
.sv-ring span { display: block; font-size: 10px; font-weight: 700; color: var(--sh-muted); margin-top: 2px; }
.sv-ring.lg { width: 118px; height: 118px; }
.sv-ring.lg::before { inset: 12px; }
.sv-ring.lg b { font-size: 26px; }
.sv-ring.lg span { font-size: 11.5px; }
.sv-charger.idle .sv-ring, .sv-ring.idle { --ring: #d9d6c9; }
.sv-charger.fault .sv-ring, .sv-ring.fault { --ring: var(--sh-coral-fill); --track: #ffe1d8; }
.sv-charger.fault .sv-ring::before { background: #fff7f4; }
.sv-charger.offline .sv-ring, .sv-ring.offline { --ring: #cfccc0; --track: #e6e4dc; }
.sv-charger.offline .sv-ring::before { background: #f6f5f1; }
.sv-charger.done .sv-ring, .sv-ring.done { --ring: var(--sh-yellow-fill); }
.sv-ring.warn { --ring: var(--sh-yellow-fill); }

/* 충전소 묶음 머리 (블록형: 충전소 이름 + 가동/대기/고장 수 + 사용 전력) */
.sv-station-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sv-station-name { font-size: 15px; font-weight: 800; color: var(--sh-ink); padding-left: 10px; border-left: 3px solid var(--sh-yellow-fill); line-height: 1.2; }
.sv-station-name small { font-size: 11.5px; font-weight: 700; color: var(--sh-muted); margin-left: 6px; }
.sv-station-counts { display: inline-flex; gap: 10px; font-size: 12px; font-weight: 700; color: var(--sh-ink2); flex-wrap: wrap; }
.sv-station-counts b { font-variant-numeric: tabular-nums; color: var(--sh-ink); }
.sv-station-power { margin-left: auto; font-size: 12px; color: var(--sh-muted); font-weight: 700; white-space: nowrap; }
.sv-station-power b { color: var(--sh-ink); font-variant-numeric: tabular-nums; }

/* 막대형 현황: 충전소 한 줄 = 충전기 칸을 상태색으로 */
.sv-stackrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 210px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sh-line); }
.sv-stackrow:last-child { border-bottom: none; }
.sv-stackrow-name { font-weight: 800; font-size: 13.5px; color: var(--sh-ink); }
.sv-stackrow-name small { display: block; font-size: 11px; font-weight: 700; color: var(--sh-muted); margin-top: 2px; }
.sv-cells { display: flex; gap: 3px; height: 30px; }
.sv-cell { flex: 1 1 0; min-width: 0; border-radius: 6px; background: #e6e3d8; position: relative; overflow: hidden; cursor: pointer; }
.sv-cell i { position: absolute; left: 0; bottom: 0; right: 0; background: #34d399; height: calc(var(--p, 0) * 1%); }
.sv-cell.fault { background: var(--sh-coral-fill); }
.sv-cell.offline { background: repeating-linear-gradient(45deg, #d8d5ca 0 5px, #e9e7de 5px 10px); }
.sv-cell.done i { background: var(--sh-yellow-fill); }
.sv-cell:hover { outline: 2px solid var(--sh-slate); outline-offset: 1px; }
.sv-stackrow-meta { font-size: 12px; color: var(--sh-ink2); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.55; }
.sv-stackrow-meta em { font-style: normal; color: var(--sh-red); }

/* 알림 띠 (고장 이벤트 수신) */
.sv-alarm {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff4ef; border: 1px solid #ffc9b9; border-radius: 16px; padding: 11px 16px; margin-bottom: 14px;
    font-size: 13px; color: #8f3219;
}
.sv-alarm b { color: #7a2710; font-weight: 800; }
.sv-alarm .sv-alarm-actions { margin-left: auto; display: flex; gap: 6px; }
.sv-alarm.ok { background: var(--sh-green-soft); border-color: #c4e3d1; color: #23694a; }

/* ── 캘린더 ── */
.sv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--sh-line); border-radius: 16px; overflow: hidden; background: var(--sh-card); }
.sv-cal-dow { background: var(--sh-cream); font-size: 12px; font-weight: 800; color: var(--sh-ink2); text-align: center; padding: 8px 0; border-bottom: 1px solid var(--sh-line); }
.sv-cal-dow.sun { color: var(--sh-red); }
.sv-cal-dow.sat { color: var(--sh-blue); }
.sv-cal-day { min-height: 116px; padding: 6px 6px 8px; border-right: 1px solid var(--sh-line); border-bottom: 1px solid var(--sh-line); min-width: 0; cursor: pointer; }
.sv-cal-day:nth-child(7n) { border-right: none; }
.sv-cal-day:hover { background: #fdfbf6; }
.sv-cal-day.out { background: #faf9f5; }
.sv-cal-day.out .sv-cal-num { color: var(--sh-faint); }
.sv-cal-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; font-size: 12.5px; font-weight: 800; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sv-cal-day.sun .sv-cal-num { color: var(--sh-red); }
.sv-cal-day.sat .sv-cal-num { color: var(--sh-blue); }
.sv-cal-day.today .sv-cal-num { background: var(--sh-slate); color: #fff; }
.sv-cal-holiday { font-size: 10.5px; font-weight: 700; color: var(--sh-red); margin-left: 4px; }
.sv-ev {
    display: block; font-size: 11.5px; font-weight: 700; line-height: 1.35; border-radius: 6px; padding: 2px 6px; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--sh-soft); color: var(--sh-ink2);
    border-left: 3px solid var(--sh-faint);
}
.sv-ev.bus { background: #eaf1ff; color: #1f4fb8; border-left-color: #2563eb; }
.sv-ev.station { background: #fff3cc; color: #7a5600; border-left-color: #fdc003; }
.sv-ev.crew { background: #e5f3ea; color: #23694a; border-left-color: #2f8a5b; }
.sv-ev.staff { background: #efeaf8; color: #55408c; border-left-color: #6b52a8; }
.sv-ev.night { background: #4a4946; color: #fff; border-left-color: #fdc003; }
.sv-ev-more { font-size: 11px; font-weight: 700; color: var(--sh-muted); margin-top: 3px; padding-left: 6px; }
.sv-ev-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sh-ink2); }
.sv-ev-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sv-ev-key i.bus { background: #2563eb; } .sv-ev-key i.station { background: #fdc003; }
.sv-ev-key i.crew { background: #2f8a5b; } .sv-ev-key i.staff { background: #6b52a8; }

/* 주간 시간표 */
.sv-week { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border: 1px solid var(--sh-line); border-radius: 16px; overflow: hidden; background: var(--sh-card); }
.sv-week-head { background: var(--sh-cream); font-size: 12px; font-weight: 800; color: var(--sh-ink2); text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--sh-line); border-left: 1px solid var(--sh-line); }
.sv-week-head:first-child { border-left: none; }
.sv-week-head.today { background: var(--sh-slate); color: #fff; }
.sv-week-time { font-size: 11px; font-weight: 700; color: var(--sh-muted); text-align: right; padding: 4px 8px 0 0; border-bottom: 1px solid var(--sh-line); min-height: 46px; font-variant-numeric: tabular-nums; }
.sv-week-slot { border-left: 1px solid var(--sh-line); border-bottom: 1px solid var(--sh-line); padding: 2px 3px; min-height: 46px; min-width: 0; }

/* 연간 (12개월 작은 달력) */
.sv-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .sv-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-mini { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; padding: 12px; }
.sv-mini-title { font-size: 13px; font-weight: 800; color: var(--sh-ink); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sv-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10.5px; text-align: center; font-variant-numeric: tabular-nums; }
.sv-mini-grid span { height: 20px; display: grid; place-items: center; border-radius: 5px; color: var(--sh-ink2); font-weight: 600; }
.sv-mini-grid span.h { color: var(--sh-faint); font-weight: 800; }
.sv-mini-grid span.has { background: var(--sh-amber-soft); color: #7a5600; font-weight: 800; }
.sv-mini-grid span.has.bus { background: #eaf1ff; color: #1f4fb8; }
.sv-mini-grid span.has.multi { background: var(--sh-slate); color: #fff; }

/* 근무표 셀 (격일 근무) */
.sv-shift { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; font-weight: 800; background: var(--sh-soft); color: var(--sh-faint); }
.sv-shift.work { background: var(--sh-green-soft); color: var(--sh-green); }
.sv-shift.night { background: #4a4946; color: #fdc003; }
.sv-shift.off { background: var(--sh-soft); color: var(--sh-faint); }
.sv-shift.leave { background: var(--sh-violet-soft); color: var(--sh-violet); }
.sv-shift.vac { background: var(--sh-red-soft); color: var(--sh-red); }

/* ── 당직자 카드 · 원터치 전화 ── */
.sv-duty { display: flex; align-items: center; gap: 12px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.sv-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #f1eee2; color: #6d6354; }
.sv-duty-main { flex: 1; min-width: 0; }
.sv-duty-name { font-weight: 800; font-size: 14px; color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-duty-name small { font-size: 11.5px; font-weight: 700; color: var(--sh-muted); margin-left: 5px; }
.sv-duty-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-state { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: var(--sh-soft); color: var(--sh-ink2); }
.sv-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-state.standby { background: var(--sh-green-soft); color: var(--sh-green); }
.sv-state.working { background: var(--sh-amber-soft); color: var(--sh-amber); }
.sv-state.off { background: #ecebe6; color: #8a887c; }
.sv-call {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--sh-slate); color: #fff !important; text-decoration: none !important; border: none;
}
.sv-call:hover { background: #4a4946; }
.sv-call .material-symbols-outlined { font-size: 19px; }
.sv-call.disabled { background: #e4e1d6; color: #a9a699 !important; pointer-events: none; }

/* 스마트폰 모형 (모바일 화면 미리보기) */
.sv-phone { width: 330px; max-width: 100%; margin: 0 auto; border-radius: 36px; background: #2f2e2b; padding: 12px; box-shadow: 0 24px 50px rgba(57, 56, 47, .22); }
.sv-phone-screen { border-radius: 26px; background: #fbf9f4; overflow: hidden; min-height: 600px; display: flex; flex-direction: column; }
.sv-phone-bar { background: var(--sh-slate); color: #fff; padding: 14px 16px 12px; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; }
.sv-phone-bar small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.sv-phone-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sv-phone-body .sv-duty { border-radius: 14px; padding: 10px 12px; }
.sv-phone-sec { font-size: 11.5px; font-weight: 800; color: var(--sh-muted); margin: 6px 2px 0; }
.sv-phone-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sh-line); background: #fff; }
.sv-phone-tabbar span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--sh-muted); padding: 8px 0 10px; }
.sv-phone-tabbar span.on { color: var(--sh-ink); }
.sv-phone-tabbar .material-symbols-outlined { display: block; font-size: 20px; margin: 0 auto 1px; }

/* ── 열화상 채널 ── */
.sv-thermal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: #2f2e2b; border-radius: 16px; padding: 8px; }
.sv-th {
    position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: radial-gradient(60% 50% at 30% 40%, #3b82f6 0%, transparent 70%), radial-gradient(50% 45% at 70% 65%, #22c55e 0%, transparent 70%), linear-gradient(135deg, #1e3a8a, #0f766e 60%, #1d4ed8);
}
.sv-th.warm { background: radial-gradient(38% 34% at 62% 48%, #facc15 0%, #f97316 38%, transparent 72%), radial-gradient(60% 50% at 25% 60%, #22c55e 0%, transparent 70%), linear-gradient(135deg, #1e3a8a, #0f766e 60%, #1d4ed8); }
.sv-th.hot { background: radial-gradient(40% 36% at 55% 45%, #fff 0%, #ef4444 30%, #f97316 55%, transparent 78%), radial-gradient(60% 50% at 20% 70%, #22c55e 0%, transparent 70%), linear-gradient(135deg, #1e3a8a, #0f766e 60%, #1d4ed8); outline: 3px solid var(--sh-coral-fill); outline-offset: -3px; }
.sv-th.real { background: linear-gradient(180deg, #8fa3b8 0%, #b9c4cc 45%, #6f7a72 46%, #565f58 100%); }
.sv-th.lost { background: repeating-linear-gradient(45deg, #3a3936 0 8px, #44433f 8px 16px); }
.sv-th-ch { position: absolute; left: 6px; top: 5px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.sv-th-temp { position: absolute; right: 6px; bottom: 5px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.sv-th.hot .sv-th-temp { background: var(--sh-coral-fill); }
.sv-th.warm .sv-th-temp { background: rgba(253, 192, 3, .92); color: #3d2d00; }
.sv-th-name { position: absolute; left: 6px; bottom: 5px; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-th-lost { position: absolute; inset: 0; display: grid; place-items: center; color: #bdb9ab; font-size: 11.5px; font-weight: 700; }
.sv-scale { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #1e3a8a, #22c55e, #facc15, #f97316, #ef4444, #fff); }

/* ── 결재 문서 (기안용지·공문·내역서 서식) ── */
.sv-paper { background: #fff; border: 1px solid #d9d6cb; box-shadow: 0 10px 28px rgba(57, 56, 47, .10); padding: 34px 38px; max-width: 820px; margin: 0 auto; color: #1f1e1b; font-size: 13.5px; line-height: 1.75; white-space: normal; word-break: keep-all; }
.sv-paper-title { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .5em; margin: 0 0 18px; padding-left: .5em; }
.sv-paper-title.tight { letter-spacing: .12em; padding-left: .12em; }
.sv-paper table { width: 100%; border-collapse: collapse; }
.sv-paper th, .sv-paper td { border: 1px solid #2b2a27; padding: 6px 9px; font-size: 13px; vertical-align: middle; }
.sv-paper th { background: #f1efe8; font-weight: 800; text-align: center; white-space: nowrap; }
.sv-paper .sv-sign td { height: 58px; text-align: center; font-size: 12px; color: #55534b; }
.sv-paper .sv-sign th { font-size: 12.5px; }
.sv-paper .sv-sign-side { width: 30px; letter-spacing: 0; line-height: 1.9; }
.sv-stamp { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #d9573a; color: #d9573a; font-size: 12px; font-weight: 800; line-height: 1.1; transform: rotate(-8deg); }
.sv-stamp.wait { border: 2px dashed #b3b0a3; color: #b3b0a3; transform: none; font-weight: 700; }
.sv-stamp.reject { border-color: #5f5e5e; color: #5f5e5e; }
.sv-paper-sec { font-weight: 800; margin: 16px 0 6px; font-size: 13.5px; }
.sv-paper .sv-cb { display: inline-block; margin-right: 12px; white-space: nowrap; }

/* 결재 진행 줄 */
.sv-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.sv-flow-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sh-muted); white-space: nowrap; }
.sv-flow-step + .sv-flow-step::before { content: ""; width: 18px; height: 2px; background: var(--sh-busy); margin: 0 6px; }
.sv-flow-step i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--sh-soft); color: var(--sh-muted); }
.sv-flow-step.done { color: var(--sh-ink); }
.sv-flow-step.done i { background: var(--sh-slate); color: #fff; }
.sv-flow-step.now { color: var(--sh-amber); }
.sv-flow-step.now i { background: var(--sh-yellow-fill); color: #553e00; }
.sv-flow-step.reject i { background: var(--sh-coral-fill); color: #fff; }

/* ── 엑셀 올리기 (끌어다 놓기) ── */
.sv-drop {
    border: 2px dashed var(--sh-busy); border-radius: 18px; background: var(--sh-cream);
    padding: 26px 18px; text-align: center; color: var(--sh-ink2); font-size: 13px; line-height: 1.6; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.sv-drop:hover, .sv-drop.over { border-color: var(--sh-slate); background: #f6f2e6; }
.sv-drop .material-symbols-outlined { font-size: 34px; color: #8a6400; display: block; margin: 0 auto 6px; }
.sv-drop strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--sh-ink); }
.sv-drop small { color: var(--sh-muted); font-size: 12px; }
.sv-file { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sh-line); font-size: 12.5px; min-width: 0; }
.sv-file:last-child { border-bottom: none; }
.sv-file-ext { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--sh-green-soft); color: var(--sh-green); flex: 0 0 auto; letter-spacing: .02em; }
.sv-file-ext.hwp { background: var(--sh-blue-soft); color: var(--sh-blue); }
.sv-file-ext.pdf { background: var(--sh-red-soft); color: var(--sh-red); }
.sv-file-ext.img { background: var(--sh-violet-soft); color: var(--sh-violet); }
.sv-file-ext.doc { background: var(--sh-blue-soft); color: var(--sh-blue); }
.sv-file-main { flex: 1; min-width: 0; }
.sv-file-name { font-weight: 800; color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-file-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 처리 단계 (올리기 → 읽기 → 맞추기 → 완성) */
.sv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sv-step { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; padding: 12px 14px; position: relative; }
.sv-step-no { font-size: 11px; font-weight: 800; color: var(--sh-faint); letter-spacing: .06em; }
.sv-step-title { font-size: 13.5px; font-weight: 800; color: var(--sh-ink); margin-top: 3px; }
.sv-step-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 3px; line-height: 1.5; }
.sv-step.done { border-color: #c4e3d1; background: #f6fbf8; }
.sv-step.done .sv-step-no { color: var(--sh-green); }
.sv-step.now { border-color: #f6dc8a; background: #fffbef; }
.sv-step.now .sv-step-no { color: var(--sh-amber); }

/* ── 분류 트리 (사용자 분할) ── */
.sv-tree, .sv-tree ul { list-style: none; margin: 0; padding: 0; }
.sv-tree ul { margin-left: 14px; padding-left: 12px; border-left: 1px dashed var(--sh-busy); }
.sv-tree li { margin: 2px 0; }
.sv-node { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--sh-ink2); cursor: pointer; min-width: 0; }
.sv-node:hover { background: var(--sh-soft); }
.sv-node.active { background: var(--sh-slate); color: #fff; }
.sv-node.active .sv-node-count { background: rgba(255, 255, 255, .18); color: #fff; }
.sv-node.root { font-weight: 800; color: var(--sh-ink); }
.sv-node.root.active { color: #fff; }
.sv-node .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.sv-node-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-node-count { font-size: 11px; font-weight: 800; background: var(--sh-soft); color: var(--sh-muted); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.sv-node-tools { display: none; gap: 2px; }
.sv-node:hover .sv-node-tools { display: inline-flex; }
.sv-node-tools button { border: none; background: transparent; color: inherit; padding: 0 2px; line-height: 1; cursor: pointer; opacity: .75; }
.sv-node-tools button:hover { opacity: 1; }
.sv-split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.sv-split > .sh-card { margin-bottom: 0; }
@media (max-width: 1100px) { .sv-split { grid-template-columns: 1fr; } }

/* ── 자재 카드 (사진 + 품명 + 단가) ── */
.sv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sv-itemcard { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 18px; overflow: hidden; cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; min-width: 0; }
.sv-itemcard:hover { box-shadow: var(--sh-shadow-hover); transform: translateY(-2px); }
.sv-itemcard .sh-photo { border-radius: 0; border: none; border-bottom: 1px solid var(--sh-line); aspect-ratio: 16 / 10; }
.sv-itemcard-body { padding: 11px 14px 13px; }
.sv-itemcard-name { font-size: 14px; font-weight: 800; color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-itemcard-sub { font-size: 11.5px; color: var(--sh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-itemcard-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--sh-ink2); font-weight: 700; }
.sv-itemcard-foot b { font-size: 15px; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sv-itemcard.low { border-color: #ffc9b9; }

/* ── 작은 막대 그래프 (월별 세로 막대) ── */
.sv-cols { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.sv-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.sv-col-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: var(--sh-slate); height: calc(var(--h, 0) * 1%); min-height: 2px; position: relative; }
.sv-col-bar.now { background: var(--sh-yellow-fill); }
.sv-col-bar.soft { background: #cfcbbd; }
.sv-col-bar.coral { background: var(--sh-coral-fill); }
.sv-col-bar em { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--sh-ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-col-key { font-size: 11px; font-weight: 700; color: var(--sh-muted); white-space: nowrap; }

/* 표 안 숫자 정렬 · 합계 줄 */
.sh-page .my_table_data td.sv-r { text-align: right; font-variant-numeric: tabular-nums; }
.sh-page .my_table_data tr.sv-total td { background: var(--sh-cream); font-weight: 800; color: var(--sh-ink); }
.sh-page .my_table_data td.sv-heat { font-variant-numeric: tabular-nums; text-align: right; }

/* 충전소 CCTV — 실시간 영상 격자 (채널을 누르면 그 채널만 원본 화질로 크게) */
.sv-cctv { position: relative; background: #2f2e2b; border-radius: 16px; padding: 8px; }
.sv-cctv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sv-cam { position: relative; aspect-ratio: 4 / 3; background: #1c1b19; border-radius: 8px; overflow: hidden; cursor: pointer; }
.sv-cam:hover { outline: 2px solid var(--sh-yellow-fill); outline-offset: -2px; }
.sv-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sv-cam-ch { position: absolute; left: 6px; top: 5px; z-index: 1; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.sv-cam-state { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #bdb9ab; font-size: 11.5px; font-weight: 700; pointer-events: none; }
.sv-cam.live .sv-cam-state { display: none; }
.sv-cam.lost { background: repeating-linear-gradient(45deg, #3a3936 0 8px, #44433f 8px 16px); }
.sv-cam.lost video { display: none; }
.sv-cam-tools { position: absolute; right: 8px; top: 8px; z-index: 2; display: none; gap: 6px; }
.sv-cam-tools > span { width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sv-cam-tools > span:hover { background: rgba(0, 0, 0, .8); }
.sv-cam-tools .material-symbols-outlined { font-size: 20px; }
.sv-cctv.solo .sv-cctv-grid { grid-template-columns: minmax(0, 1fr); }
.sv-cctv.solo .sv-cam { display: none; }
.sv-cctv.solo .sv-cam.on { display: block; aspect-ratio: auto; height: min(74vh, 900px); cursor: default; outline: none; }
.sv-cctv.solo .sv-cam.on .sv-cam-tools { display: flex; }
.sv-cctv.solo .sv-cam.on .sv-cam-ch { font-size: 14px; left: 12px; top: 10px; }
.sv-cam:fullscreen { height: 100vh !important; border-radius: 0; }
.sv-cctv-pause { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; background: rgba(28, 27, 25, .86); border-radius: 16px; }
.sv-cctv.paused .sv-cctv-pause { display: grid; }

/* 충전소 관제화면 — 제작사별 관제 사이트를 나눠 띄우는 프레임 벽 */
.sv-wall { display: grid; gap: 10px; }
.sv-wall.cols-1 { grid-template-columns: 1fr; }
.sv-wall.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-wall.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-wall-cell { display: flex; flex-direction: column; border: 1px solid var(--sh-line); border-radius: 14px; overflow: hidden; background: var(--sh-card); min-width: 0; }
.sv-wall-bar { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--sh-line); background: var(--sh-soft); }
.sv-wall-bar .sv-wall-name { flex: 0 0 120px; }
.sv-wall-bar .sv-wall-url { flex: 1 1 auto; min-width: 0; }
.sv-wall-bar .form-control { height: 30px; font-size: 12px; }
.sv-wall-go { flex: 0 0 auto; border: none; background: var(--sh-slate); color: #faf7f6; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sv-wall-go:hover { filter: brightness(1.08); }
.sv-wall-ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; color: var(--sh-ink2); text-decoration: none; cursor: pointer; }
.sv-wall-ico:hover { background: #ece8db; color: var(--sh-ink); }
.sv-wall-ico .material-symbols-outlined { font-size: 18px; }
/* 전체화면: 칸이 화면을 꽉 채우고 프레임이 그 안을 채운다 */
.sv-wall-cell:fullscreen { background: #fff; }
.sv-wall-cell:fullscreen .sv-wall-view { aspect-ratio: auto; flex: 1 1 auto; height: auto; }
.sv-wall-view { position: relative; aspect-ratio: 16 / 10; background: #f4f2ec; }
.sv-wall.cols-1 .sv-wall-view { aspect-ratio: auto; height: min(72vh, 860px); }
.sv-wall-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.sv-wall-warn { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 12.5px; font-weight: 700; color: var(--sh-muted); pointer-events: none; }
.sv-wall-warn a { color: var(--sh-ink); pointer-events: auto; }

/* 모달 안 2단 */
.sv-modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .sv-modal-grid { grid-template-columns: 1fr; } }

/* 좁은 화면 */
@media (max-width: 820px) {
    .sv-stackrow { grid-template-columns: 1fr; gap: 6px; }
    .sv-stackrow-meta { text-align: left; }
    .sv-thermal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-cctv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-cal-day { min-height: 84px; }
}