/* =============================================================
   sales.css - B2C/B2B 영업 현황 탭 공용 스타일 (2026-08-07)
   두 탭이 같은 모양을 유지해야 하므로 한 파일에서 관리한다.
   ============================================================= */
.sl-nav{display:flex;gap:10px;margin-bottom:16px;font-size:13px;flex-wrap:wrap;}
.sl-nav a{padding:6px 16px;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#555;}
.sl-nav a.active{background:#1d1d1f;color:#fff;border-color:#1d1d1f;font-weight:600;}
.sl-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px;flex-wrap:wrap;gap:12px;}
.sl-title{font-size:22px;font-weight:700;color:#1d1d1f;}
.sl-sub{font-size:13px;color:#86868b;}
.sl-note{font-size:11px;color:#a1a1a6;margin-bottom:16px;}
.sl-ctrl{display:flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap;}
.sl-ctrl input[type=date]{padding:5px 8px;border:1px solid #ddd;border-radius:6px;font-size:13px;}
.sl-ctrl button{padding:6px 14px;border:none;border-radius:6px;font-size:13px;cursor:pointer;}
.btn-go{background:#1d1d1f;color:#fff;}
.btn-q{background:#f0f0f2;color:#444;}
.sl-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
.kc{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-top:3px solid transparent;}
.kc.on{border-top-color:#2a78d6;} .kc.dl{border-top-color:#1baf7a;}
.kc.sh{border-top-color:#eda100;} .kc.nw{border-top-color:#7c4dff;}
.kc-l{font-size:12px;color:#86868b;margin-bottom:4px;}
.kc-v{font-size:25px;font-weight:700;color:#1d1d1f;}
.kc-s{font-size:11px;color:#86868b;margin-top:4px;}
.up{color:#1baf7a;font-weight:600;} .down{color:#e34948;font-weight:600;}
.sl-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.sl-row3{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px;align-items:start;}
.card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.card-t{font-size:15px;font-weight:600;margin-bottom:4px;color:#1d1d1f;}
.card-d{font-size:11px;color:#a1a1a6;margin-bottom:14px;}
.sec-h{font-size:13px;font-weight:700;color:#86868b;margin:22px 0 10px;letter-spacing:.02em;}
.chart-wrap{height:270px;position:relative;}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{padding:7px 8px;text-align:left;border-bottom:2px solid #e9e9ed;font-weight:600;color:#666;font-size:11.5px;}
.tbl td{padding:7px 8px;border-bottom:1px solid #f3f3f5;}
.tbl td.n{text-align:right;font-weight:600;}
.tbl td.c{text-align:center;}
.tbl tr:hover td{background:#fafafc;}
.rank{display:inline-block;width:19px;height:19px;line-height:19px;text-align:center;border-radius:5px;background:#f0f0f2;color:#666;font-size:10.5px;font-weight:700;}
.rank.t1{background:#1d1d1f;color:#fff;} .rank.t2{background:#5a5a5f;color:#fff;} .rank.t3{background:#9a9aa0;color:#fff;}
.bar-cell{width:34%;}
.bar{height:15px;border-radius:4px;background:#f0f0f2;overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:4px;background:#2a78d6;}
.bar.g > i{background:#1baf7a;} .bar.o > i{background:#eda100;}
.muted{color:#a1a1a6;} .small{font-size:11px;}
.empty{padding:26px 10px;text-align:center;color:#a1a1a6;font-size:12.5px;line-height:1.7;}

/* 지역 윤곽 지도 - 행정경계를 인라인 SVG 로 그린다 (외부 지도 라이브러리/타일 서버 없음). B2B 전용 */
.kmap{width:100%;display:flex;justify-content:center;}
.kmap svg{width:100%;max-width:520px;height:auto;display:block;}
.kmap path{stroke:#fff;stroke-width:1.4;cursor:pointer;transition:fill .15s ease,opacity .15s ease;}
.kmap path:hover{opacity:.82;}
.kmap path.sel{stroke:#1d1d1f;stroke-width:2.6;}
.kmap text{pointer-events:none;font-size:15px;font-weight:600;text-anchor:middle;
    paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:3.2px;stroke-linejoin:round;}
.kmap text.v{font-size:13px;font-weight:700;}
.kmap text.c{font-size:11px;font-weight:600;opacity:.78;}
.kmap text.ins{font-size:12px;font-weight:600;}
.kmap text.insn{font-size:10px;font-weight:600;text-anchor:end;stroke:none;}
.kmap rect{pointer-events:none;}
.legend{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#a1a1a6;margin-top:10px;}
.legend .sw{display:flex;gap:2px;}
.legend .sw i{width:16px;height:9px;border-radius:2px;display:block;}
.mapbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.btn-all{padding:4px 12px;border:1px solid #ddd;background:#fff;border-radius:6px;font-size:11.5px;cursor:pointer;color:#555;}

@media(max-width:900px){.sl-kpi{grid-template-columns:repeat(2,1fr);}.sl-row,.sl-row3{grid-template-columns:1fr;}}