/* ───────── KPI groups ───────── */
.kpi-groups{display:grid;grid-template-columns:5fr 2fr 4fr;gap:16px}
@media (max-width:1100px){.kpi-groups{grid-template-columns:1fr}}
.kpi-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.kpi-group .gh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--grey-600);margin-bottom:12px;letter-spacing:.3px;text-transform:uppercase}
.kpi-group .gh::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--primary);display:inline-block}
.kpi-group.sales .gh::before{background:#f5b400}
.kpi-group.ad .gh::before{background:#c87a3a}
.kpi-group.pv .gh::before{background:var(--primary)}
.kpi-group .kpi-mini-grid{display:grid;gap:10px}
.kpi-group.sales .kpi-mini-grid{grid-template-columns:repeat(5,1fr)}
.kpi-group.ad .kpi-mini-grid{grid-template-columns:repeat(2,1fr)}
.kpi-group.pv .kpi-mini-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){
  .kpi-group.sales .kpi-mini-grid,.kpi-group.pv .kpi-mini-grid{grid-template-columns:repeat(2,1fr)}
}
.kpi-group .k{padding:10px 12px;background:var(--grey-50);border:1px solid var(--line);border-radius:10px}
.kpi-group .k .l{font-size:11.5px;color:var(--mut);margin-bottom:4px}
.kpi-group .k .v{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--grey-900);letter-spacing:-.3px}
.kpi-group .k .s{font-size:11px;margin-top:4px}
.kpi-group .k .delta{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;margin-top:2px;font-family:var(--mono)}
.kpi-group .k .delta.pos{background:rgba(12,166,120,.12);color:var(--pos)}
.kpi-group .k .delta.neg{background:rgba(224,49,49,.12);color:var(--neg)}
.kpi-group .k .delta.zero{background:var(--grey-100);color:var(--mut)}

/* ───────── KPI cards (legacy, 다른 탭에서 사용) ───────── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:.15s;box-shadow:var(--shadow-sm)}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.kpi .l{font-size:12px;color:var(--mut);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.kpi .l .ico{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.kpi .v{font-size:24px;font-weight:700;font-family:var(--mono);letter-spacing:-.5px;color:var(--grey-900)}
.kpi .s{font-size:12px;margin-top:6px;font-family:var(--mono);color:var(--mut)}
.kpi .delta{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;margin-top:4px}
.kpi .delta.pos{background:rgba(12,166,120,.1);color:var(--pos)}
.kpi .delta.neg{background:rgba(224,49,49,.1);color:var(--neg)}
.kpi .delta.zero{background:var(--grey-100);color:var(--mut)}

/* ───────── Tables ───────── */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;max-height:620px;box-shadow:var(--shadow-sm)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;white-space:nowrap}
th,td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--line)}
th{background:var(--grey-50);color:var(--grey-600);position:sticky;top:0;font-weight:600;font-size:12px;letter-spacing:.1px}
td:first-child,th:first-child,td.l,th.l{text-align:left}
td.num{font-family:var(--mono)}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--primary-50)}
tbody tr.clickable{cursor:pointer}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;font-family:var(--mono)}
.pill.pos{background:rgba(12,166,120,.1);color:var(--pos)}
.pill.neg{background:rgba(224,49,49,.1);color:var(--neg)}
.pill.zero{background:var(--grey-100);color:var(--mut)}

/* ───────── (BEST 배지 / 랭킹 행 강조 제거 — 일반 행과 동일) ───────── */
.best-badge{display:none}

/* ───────── Modal ───────── */
.overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:60;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
.modal{width:min(1080px,94vw);max-height:90vh;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.modal-h{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal-h-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.modal-h .ttl{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--grey-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-h .ttl-kr{font-size:13px;font-weight:500;color:var(--grey-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-h .gdNo{font-family:var(--mono);font-size:12px;color:var(--mut);background:var(--grey-100);padding:3px 8px;border-radius:6px;flex-shrink:0}
/* 차트 카드 sub-label */
.chart-card .ch-sub{margin-left:auto;font-size:12px;color:var(--mut);font-family:var(--mono)}
.modal-close{margin-left:auto;background:transparent;border:0;font-size:22px;color:var(--grey-500);cursor:pointer;width:32px;height:32px;border-radius:8px}
.modal-close:hover{background:var(--grey-100);color:var(--grey-900)}
.modal-b{padding:24px;overflow:auto}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.chart-card .ch-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chart-card .ch-h .q{width:18px;height:18px;border-radius:50%;background:var(--grey-200);color:var(--grey-500);font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.chart-card h3{font-size:14px;font-weight:700;color:var(--grey-900)}
.chart-card .ch-meta{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.chart-card .ch-meta .m{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.chart-card .ch-meta .m .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.mini-kpi{background:var(--grey-50);border:1px solid var(--line);border-radius:10px;padding:12px}
.mini-kpi .l{font-size:11px;color:var(--mut)}
.mini-kpi .v{font-size:18px;font-weight:700;font-family:var(--mono);margin-top:4px}

/* ───────── 상품별 분석 — wide table (영역 안에서 가로 스크롤) ───────── */
.tablewrap.wide{max-height:none;overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);padding:0}
.tablewrap.wide table.wide-table{background:#fff;border:0;border-radius:0;box-shadow:none}
table.wide-table{font-size:12.5px;border-collapse:separate;border-spacing:0;table-layout:fixed;width:3260px}
/* row 1 (그룹 밴드) — 좌측 3개 빈 셀 */
table.wide-table thead tr.row-group th.row1-empty{background:#fff;border-bottom:1px solid var(--line);padding:0;height:36px}
table.wide-table thead tr.row-group th.row1-empty:first-child{border-top-left-radius:var(--radius)}
/* 그룹 헤더 (매출/PV/PV 소스별/광고비) — 컬러 밴드 */
table.wide-table thead th.group{font-weight:700;text-align:center;font-size:12px;letter-spacing:.2px;padding:8px 10px;border-bottom:2px solid transparent}
table.wide-table thead th.group.g-sales{background:#fff7d6;color:#8a6d00;border-bottom-color:#f3deaa}
table.wide-table thead th.group.g-pv{background:#dbe6ff;color:#1f4ed8;border-bottom-color:#bbcdff}
table.wide-table thead th.group.g-pv-src{background:#e8f4f0;color:#0a7158;border-bottom-color:#b5dccc}
table.wide-table thead th.group.g-ad{background:#fbe6d4;color:#a35a17;border-bottom-color:#f0c69b}
/* sub 헤더 + 작은 라벨 (일별 / 월누적) */
table.wide-table thead th.sub{background:var(--grey-50);font-size:11.5px;font-weight:600;color:var(--grey-700);padding:7px 6px;white-space:nowrap;border-bottom:1px solid var(--line);line-height:1.25}
table.wide-table thead th.sub[data-scope]::after{
  content:attr(data-scope);
  display:block;
  margin-top:3px;
  font-size:9.5px;
  font-weight:500;
  color:var(--grey-400);
  letter-spacing:.2px;
  text-transform:lowercase;
}
table.wide-table thead th.sub.important[data-scope]::after{color:rgba(12,166,120,.65)}
table.wide-table thead th.sub.sub-total{background:#eef4ff !important;color:var(--primary) !important}
table.wide-table thead th.sub.sub-total[data-scope]::after{color:rgba(51,102,255,.6)}
/* sticky 헤더는 제거 (top 스크롤 시 topbar와 충돌) */
table.wide-table thead th{position:relative !important;top:auto !important}
/* 좌측 3컬럼 헤더 셀 자체 스타일 — sticky 좌측만 적용 */
table.wide-table thead th.head-id,
table.wide-table thead th.head-name{
  background:#fff !important;
  color:var(--grey-900);
  font-weight:700;
  text-align:center;
  font-size:12.5px;
  border-bottom:1px solid var(--line);
  padding:8px 10px;
  vertical-align:middle;
}
/* 중요 컬럼 그린 강조 */
table.wide-table thead th.sub.important{
  color:var(--pos) !important;
  background:#e7f7f0 !important;
  font-weight:700;
  border-bottom:2px solid var(--pos);
}
table.wide-table tbody td.important{color:var(--pos);font-weight:600}
/* 광고비 그룹 좌측 구분선 */
table.wide-table thead th.ad-start,
table.wide-table tbody td.ad-start{border-left:3px solid var(--grey-300)}
table.wide-table tbody td.ad-last,
table.wide-table thead th.ad-last{padding-right:18px}
table.wide-table th,table.wide-table td{border-right:1px solid var(--line);padding:8px 10px}
table.wide-table th:last-child,table.wide-table td:last-child{border-right:0}
/* 그룹 헤더 옆 작은 범위 라벨 (예: '일별 + 월누적') */
table.wide-table thead th.group .g-scope{display:inline-block;margin-left:6px;font-size:10px;font-weight:500;opacity:.7;letter-spacing:.2px}
table.wide-table tbody td.num{font-family:var(--mono);text-align:right;font-size:12.5px}
table.wide-table tbody td.total{background:rgba(51,102,255,.04);font-weight:600}
table.wide-table td.gdname{
  max-width:260px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
table.wide-table td.gdname-kr{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--grey-600)}

/* sticky 좌측 3컬럼 — wrapper 가로 스크롤 시 고정. thead/tbody 양쪽 적용 + z-index 강화 */
table.wide-table tbody td.sticky-1,
table.wide-table thead th.sticky-1{position:sticky !important;left:0 !important;z-index:10 !important;background:#fff !important;border-right:1px solid var(--line)}
table.wide-table tbody td.sticky-2,
table.wide-table thead th.sticky-2{position:sticky !important;left:100px !important;z-index:10 !important;background:#fff !important;border-right:1px solid var(--line)}
/* sticky-3 — 마지막 frozen 컬럼이므로 우측에 그림자로 경계 표시 */
table.wide-table tbody td.sticky-3,
table.wide-table thead th.sticky-3{position:sticky !important;left:320px !important;z-index:10 !important;background:#fff !important;border-right:2px solid var(--grey-300);box-shadow:4px 0 6px -2px rgba(0,0,0,0.06)}
/* row 1 그룹 밴드 행의 좌측 3 빈 셀도 sticky로 같이 움직임 */
table.wide-table thead tr.row-group th.row1-empty{position:sticky !important;background:#fff !important;z-index:11 !important;border-bottom:1px solid var(--line)}
table.wide-table thead tr.row-group th.row1-empty:nth-child(1){left:0 !important}
table.wide-table thead tr.row-group th.row1-empty:nth-child(2){left:100px !important}
table.wide-table thead tr.row-group th.row1-empty:nth-child(3){left:320px !important;box-shadow:4px 0 6px -2px rgba(0,0,0,0.06)}
/* hover 효과 */
table.wide-table tbody tr:hover td.sticky-1,
table.wide-table tbody tr:hover td.sticky-2,
table.wide-table tbody tr:hover td.sticky-3{background:var(--primary-50) !important}
table.wide-table tbody td.gdname{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.wide-table tbody td.gdname-kr{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--grey-600)}
table.wide-table tbody td.gdname .best-badge{margin-right:4px}

/* ───────── Matrix-style tables (matrix, PV(전체), PV전일 등) — wrapper 내부 가로 스크롤 ───────── */
.tablewrap.matrix-wrap{max-height:none;overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);padding:0}
.tablewrap.matrix-wrap table.matrix{background:#fff;border:0;border-radius:0;box-shadow:none}
table.matrix{font-size:11.5px}
table.matrix th,table.matrix td{border-right:1px solid var(--line);padding:5px 9px}
table.matrix th:last-child,table.matrix td:last-child{border-right:0}
table.matrix th{background:var(--grey-50);font-weight:600;color:var(--grey-700);text-align:center;font-size:11px}
table.matrix th.l,table.matrix td.l{text-align:left;background:#fff}
table.matrix thead th.month-band{background:var(--grey-100);color:var(--grey-900);font-weight:700;font-size:12px;border-bottom:2px solid var(--grey-300);letter-spacing:-.2px}
table.matrix thead th.month-band .ym-sub{color:var(--mut);font-weight:500;font-size:10px;margin-left:4px}
table.matrix thead th{position:relative;top:auto}
table.matrix td.gdname,table.matrix td.gdname-kr{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.matrix td.gdname-kr{color:var(--grey-600)}
table.matrix th.l:nth-child(1),table.matrix td.l:nth-child(1){width:100px;min-width:100px;position:sticky;left:0;z-index:2;background:#fff}
table.matrix th.l:nth-child(2),table.matrix td.l:nth-child(2){width:180px;min-width:180px;position:sticky;left:100px;z-index:2;background:#fff}
table.matrix th.l:nth-child(3),table.matrix td.l:nth-child(3){width:180px;min-width:180px;position:sticky;left:280px;z-index:2;background:#fff;border-right:2px solid var(--grey-300)}
table.matrix thead th.l{z-index:3;background:var(--grey-50) !important}
table.matrix td.day{text-align:right;font-family:var(--mono);font-size:11.5px;padding:4px 9px}
table.matrix td.empty{color:var(--grey-300)}
table.matrix td.future{background:repeating-linear-gradient(135deg,#fafbfc 0 6px,#f3f4f6 6px 12px)}
table.matrix tbody tr:nth-child(even) td.day{background:#fafbfc}
table.matrix tbody tr:hover td{background:var(--primary-50) !important}
/* group header row (e.g. 상품 / 유입 / 평가) */
table.matrix thead tr:first-child th.group-h{background:var(--primary-50);color:var(--primary);font-weight:700;font-size:11.5px;border-bottom:2px solid var(--primary-100);padding:6px 9px;text-align:center}
/* tfoot 총계 행 */
table.matrix tfoot td{background:var(--grey-100);font-weight:700;color:var(--grey-900);border-top:2px solid var(--grey-300);padding:6px 9px;text-align:right}
table.matrix tfoot td.l{text-align:left}
/* editable 입력 in 광고비 multi section */
table.matrix td input.cell-input,
table.matrix td select.cell-input{
  width:100%;padding:3px 6px;border:1px solid transparent;background:transparent;font-size:11.5px;font-family:inherit;color:var(--grey-900);outline:none;border-radius:4px
}
table.matrix td input.cell-input:focus,
table.matrix td select.cell-input:focus{border-color:var(--primary);background:#fff}
table.matrix td.num input.cell-input{text-align:right;font-family:var(--mono)}
table.matrix td.row-del{text-align:center;padding:2px 6px}
table.matrix td.row-del button{background:transparent;border:0;color:var(--grey-400);cursor:pointer;font-size:14px;padding:0 4px;border-radius:4px}
table.matrix td.row-del button:hover{background:var(--grey-100);color:var(--neg)}
.ad-section{margin-bottom:16px}
.ad-section summary{font-weight:700;font-size:14px}
.ad-section .matrix-wrap{padding:0}

/* ───────── Month picker dropdown ───────── */
.month-picker{display:inline-flex;align-items:center;gap:6px}
.month-picker select{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;color:var(--grey-800);outline:none;cursor:pointer}
.month-picker select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.btn-month-nav{height:32px;min-width:32px;padding:0 8px;font-size:11px;color:var(--grey-600)}
.btn-month-nav:disabled{opacity:.35;cursor:not-allowed;background:#fff;color:var(--grey-400)}

/* ───────── Calendar tables (월별 매출 누적 / 광고비 누적) — 모던 리디자인 ───────── */
.cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:900px){.cal-grid{grid-template-columns:1fr}}
table.calendar{
  width:100%;table-layout:fixed;background:#fff;
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 4px 20px rgba(17,24,39,.06);
  padding:6px;
}
table.calendar th,table.calendar td{border:none;white-space:normal}
table.calendar thead{}
table.calendar thead tr{border-bottom:1px solid var(--grey-100)}
table.calendar th{
  background:transparent;text-align:center;font-weight:700;font-size:10.5px;
  color:var(--grey-400);height:auto;padding:14px 4px 12px;
  letter-spacing:.8px;text-transform:uppercase;
}
table.calendar th.sun{color:#ef4444}
table.calendar th.sat{color:var(--primary)}
table.calendar td{
  padding:5px 2px;vertical-align:top;text-align:center;
  height:82px;position:relative;transition:background .15s ease;
}
table.calendar td .d{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:var(--grey-700);
  margin:2px auto 0;transition:all .15s ease;
}
table.calendar td.sun .d{color:#ef4444}
table.calendar td.sat .d{color:var(--primary)}
/* 셀 값 — 폭이 좁아져도 깨지지 않도록 clamp + tabular-nums + word-break.
   금액이 더 늘어나면 자동으로 두 줄 처리되며 폰트도 같이 줄어든다. */
table.calendar td .v{
  font-family:var(--mono);color:var(--grey-900);margin-top:6px;
  font-size:clamp(10px,1.05vw,12.5px);font-weight:700;line-height:1.25;
  letter-spacing:-.3px;font-variant-numeric:tabular-nums;
  word-break:break-all;overflow-wrap:anywhere;
  padding:0 2px;
}
@media (max-width:1200px){table.calendar td .v{font-size:11px}}
@media (max-width:900px){table.calendar td .v{font-size:10.5px;letter-spacing:-.4px}}
table.calendar td .v.neg{color:#ef4444}
table.calendar td .v.muted{color:var(--grey-300);font-weight:400}
table.calendar td.outside{background:transparent}
table.calendar td.outside .d{color:var(--grey-200);font-weight:500}
table.calendar td.future{
  background:repeating-linear-gradient(135deg,#fafbfc 0 5px,#f4f5f7 5px 10px);
  border-radius:10px;
}
table.calendar td.future .d{color:var(--grey-400);font-weight:500}
table.calendar td.future .v{color:var(--grey-500);font-weight:600}
table.calendar td.today{background:var(--primary-50);border-radius:10px}
table.calendar td.today .d{
  background:var(--primary);color:#fff;
  box-shadow:0 3px 10px rgba(51,102,255,.4);
}
table.calendar td.disabled{cursor:not-allowed}
table.calendar td.disabled .d{color:var(--grey-300);font-weight:500}
table.calendar td.pickable{cursor:pointer;border-radius:10px}
table.calendar td.pickable:hover{background:var(--primary-50)}
table.calendar td.pickable:hover .d{
  background:var(--primary-100);color:var(--primary);
}

/* 광고 섹션 — 엑셀 업로드 행 (행추가 버튼 + 업로드 버튼 + 헤더 안내) */
.ad-upload-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ad-upload-row .ad-upload-hint{font-size:11.5px;color:var(--mut);line-height:1.5;flex:1;min-width:240px}
.ad-upload-row .ad-upload-hint strong{color:var(--grey-700);font-weight:700}

/* 광고 행 추가 모달 — 필수/선택 그룹 + 2열 그리드 */
.ad-modal-fields .ad-modal-group{font-size:12px;font-weight:700;color:var(--grey-700);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px}
.ad-modal-fields .ad-modal-group:first-child{margin-top:0}
.ad-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media (max-width:520px){.ad-modal-grid{grid-template-columns:1fr}}
.ad-modal-fields .ad-field{display:flex;flex-direction:column;gap:4px}
.ad-modal-fields .ad-field label{font-size:11.5px;color:var(--grey-600);font-weight:500}
.ad-modal-fields .ad-field .input{width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;outline:none}
.ad-modal-fields .ad-field .input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.req{color:var(--neg);font-weight:700}

/* ───────── KPI panel (Image #1 style — Wanted Design System) ───────── */
table.kpi-table{
  width:100%;table-layout:fixed;background:#fff;border-collapse:separate;border-spacing:0;
  font-size:13px;border-radius:var(--radius);overflow:hidden;
}
table.kpi-table th,table.kpi-table td{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 14px;text-align:center;
}
table.kpi-table th:last-child,table.kpi-table td:last-child{border-right:0}
/* 그룹 밴드: 매출과 건수 (primary tint), 광고비 (bronze tint) */
table.kpi-table thead tr.kpi-bands th.kpi-band{
  position:relative;font-weight:700;font-size:12.5px;color:var(--grey-900);
  text-align:left;padding:12px 14px 12px 22px;letter-spacing:-.1px;
  background:linear-gradient(180deg,#f4f7ff,#eef3ff);
  border-bottom:2px solid var(--primary-100);
}
table.kpi-table thead tr.kpi-bands th.kpi-band::before{
  content:'';position:absolute;left:10px;top:50%;width:4px;height:14px;
  background:var(--primary);border-radius:2px;transform:translateY(-50%);
}
table.kpi-table thead tr.kpi-bands th.kpi-band.b-ad{
  background:linear-gradient(180deg,#fdf2e6,#fbe6d4);
  border-bottom-color:#f0c69b;color:#8a4d11;
}
table.kpi-table thead tr.kpi-bands th.kpi-band.b-ad::before{background:#c87a3a}
/* 헤더: 라벨 + 작은 날짜/주기 라벨 */
table.kpi-table thead tr.kpi-heads th{
  background:var(--grey-50);font-weight:600;font-size:12px;color:var(--grey-700);
  padding:10px 12px;letter-spacing:-.1px;text-align:center;line-height:1.4;
}
table.kpi-table thead tr.kpi-heads th.kpi-empty{background:#fff;border-right:0}
table.kpi-table thead tr.kpi-heads .kpi-sub{
  font-size:10.5px;font-weight:500;color:var(--mut);margin-left:4px;
  font-family:inherit;
}
table.kpi-table thead tr.kpi-heads .kpi-date{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--primary);
  background:var(--primary-50);padding:1px 6px;border-radius:4px;margin-left:5px;
  letter-spacing:.2px;
}
table.kpi-table tbody tr.kpi-row td.kpi-v{
  font-family:var(--mono);font-size:16px;font-weight:700;color:var(--grey-900);
  padding:16px 12px;background:#fff;letter-spacing:-.4px;
  transition:background .12s ease;
}
table.kpi-table tbody tr.kpi-row:hover td.kpi-v:not(.kpi-empty):not(.editable){background:var(--grey-50)}
table.kpi-table tbody td.kpi-empty{background:#fafbfc;border-right:0}
table.kpi-table tbody td.kpi-v .kpi-pct{
  display:block;margin-top:6px;font-size:11px;font-weight:600;
  color:var(--primary);font-family:var(--mono);letter-spacing:0;
  padding:2px 7px;border-radius:999px;background:var(--primary-50);
  display:inline-flex;align-items:center;gap:3px;margin-top:6px;
}
table.kpi-table tbody td.kpi-v .kpi-pct.over{color:var(--pos);background:rgba(12,166,120,.1)}
table.kpi-table tbody td.kpi-v .kpi-pct.under{color:var(--warn);background:rgba(240,140,0,.12)}
table.kpi-table tbody td.kpi-v.editable{padding:8px 10px;background:linear-gradient(180deg,#fffef5,#fffce8)}
table.kpi-table tbody td.kpi-v.editable input{
  width:100%;border:1.5px dashed var(--grey-300);background:#fff;
  text-align:center;font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--grey-900);padding:10px 6px;border-radius:8px;outline:none;
  transition:border-color .12s,background .12s,box-shadow .12s;
}
table.kpi-table tbody td.kpi-v.editable input::placeholder{color:var(--grey-300);font-weight:500}
table.kpi-table tbody td.kpi-v.editable input:hover{border-color:var(--primary-100)}
table.kpi-table tbody td.kpi-v.editable input:focus{
  border-style:solid;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px var(--primary-50);
}
.kpi-save-msg{
  margin-top:8px;font-size:12px;color:var(--mut);min-height:18px;
  text-align:right;padding:0 6px;display:flex;justify-content:flex-end;align-items:center;gap:6px;
}
.kpi-save-msg.ok{color:var(--pos)}
.kpi-save-msg.ok::before{content:'✓';font-weight:700}
.kpi-save-msg.err{color:var(--neg)}
.kpi-save-msg.err::before{content:'⚠';font-weight:700}

/* ───────── 전환율 추이 매트릭스 ───────── */
#conv-matrix{font-size:12px}
#conv-matrix thead th{
  background:var(--grey-50) !important;font-weight:600;color:var(--grey-700);
  font-size:11.5px;padding:9px 8px;border-bottom:1.5px solid var(--line);text-align:center;
}
#conv-matrix thead th.l{text-align:left;padding-left:14px;background:#fff !important}
#conv-matrix tbody td{padding:7px 8px;border-bottom:1px solid var(--grey-100)}
/* 5개 초과 상품은 기본 숨김 — '더보기' 클릭으로 tbody.show-all 토글 시 노출 */
#conv-matrix tbody tr.conv-extra{display:none}
#conv-matrix tbody.show-all tr.conv-extra{display:table-row}
/* 상품 셀 — 두꺼운 우측 구분선 + 그라데이션 배경 */
.matrix td.conv-prod-cell{
  background:linear-gradient(180deg,#fff,#fafbfc) !important;vertical-align:middle;
  border-right:2px solid var(--primary-100) !important;padding:10px 12px !important;
  position:sticky;left:0;z-index:2;min-width:240px;
}
.matrix td.conv-prod-cell .l.num{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--primary);
  letter-spacing:.2px;
}
/* sub-label (PV/건수/전환율) — 좌측 컬러 띠 */
.matrix td.conv-sub-label{
  background:var(--grey-50);text-align:left;font-weight:700;font-size:11px;
  color:var(--grey-700);padding:7px 10px !important;
  position:sticky;left:240px;z-index:1;width:64px;min-width:64px;
  border-right:1px solid var(--line) !important;
}
.matrix tr.conv-pv  td.conv-sub-label{border-left:3px solid #5c7cfa}
.matrix tr.conv-qty td.conv-sub-label{border-left:3px solid #f5b400}
.matrix tr.conv-cvr td.conv-sub-label{border-left:3px solid var(--pos);color:var(--pos)}
/* 행별 색상 */
.matrix tr.conv-pv  td.day{color:#1f4ed8;font-weight:600}
.matrix tr.conv-qty td.day{color:#8a6d00;font-weight:600}
.matrix tr.conv-cvr td.day{color:var(--pos);font-weight:700;background:#f0faf6}
.matrix tr.conv-cvr td.day.zero{color:var(--grey-300);font-weight:400;background:transparent}
.matrix tr.conv-pv  td.day.empty,
.matrix tr.conv-qty td.day.empty{color:var(--grey-300);font-weight:400}
/* 상품 블록 사이 구분선 */
.matrix tr.conv-band td{border-top:2px solid var(--primary-100)}
.matrix tbody tr:hover td.day{background:var(--primary-50) !important}
.matrix tbody tr.conv-cvr:hover td.day{background:rgba(12,166,120,.15) !important}

/* ───────── chart-card 폴리시 (Wanted DS) ───────── */
.chart-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease;
}
.chart-card:hover{box-shadow:var(--shadow)}
.chart-card .ch-h{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed var(--grey-100);
}
.chart-card .ch-h h3{
  font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--grey-900);
  display:flex;align-items:center;gap:8px;
}
.chart-card .ch-h h3::before{
  content:'';width:4px;height:16px;background:var(--primary);
  border-radius:2px;display:inline-block;
}
.chart-card .ch-h .ch-sub{
  margin-left:auto;font-size:12px;color:var(--mut);font-family:var(--mono);
  background:var(--grey-50);padding:4px 10px;border-radius:999px;
}

/* ───────── 멀티셀렉트 (chips + 검색 + 패널) — Wanted DS ───────── */
.ms-wrap{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,var(--grey-50));
  padding:10px 12px;display:flex;flex-direction:column;gap:10px;
  position:relative;transition:border-color .15s,box-shadow .15s;
}
.ms-wrap:focus-within{border-color:var(--primary-100);box-shadow:0 0 0 3px var(--primary-50)}
.ms-chips{
  display:flex;flex-wrap:wrap;gap:6px;min-height:30px;
  padding:4px 0;align-items:center;
}
.ms-chips:empty::before{
  content:'선택된 상품 없음 — 아래 검색에서 상품을 추가하세요';
  font-size:12px;color:var(--mut);font-style:italic;padding:4px 6px;
}
.ms-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;
  background:#fff;color:var(--primary);border:1px solid var(--primary-100);
  border-radius:999px;font-size:12px;font-weight:600;
  max-width:260px;box-shadow:var(--shadow-sm);
  transition:transform .12s,box-shadow .12s;
}
.ms-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.ms-chip .ms-chip-label{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}
.ms-chip button{
  background:var(--primary-50);border:0;color:var(--primary);cursor:pointer;
  font-size:13px;line-height:1;padding:3px 7px;border-radius:999px;
  font-weight:700;transition:background .12s;
}
.ms-chip button:hover{background:var(--primary);color:#fff}
.ms-search{
  display:flex;gap:8px;align-items:center;
  padding-top:8px;border-top:1px dashed var(--grey-200);
}
.ms-search .ms-input{
  flex:1;height:38px;padding:0 14px;font-size:13px;font-family:inherit;
  background:#fff;border:1px solid var(--line);border-radius:8px;
}
.ms-search .ms-input::placeholder{color:var(--grey-400)}
.ms-search .ms-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.ms-search .ms-clear{height:38px;padding:0 14px;font-size:12px}
.ms-panel{
  position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:50;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  max-height:320px;overflow-y:auto;padding:6px;
}
.ms-panel .ms-opt{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--grey-800);
  transition:background .1s;
}
.ms-panel .ms-opt:hover{background:var(--grey-50)}
.ms-panel .ms-opt.selected{background:var(--primary-50);color:var(--primary);font-weight:600}
.ms-panel .ms-opt.selected:hover{background:var(--primary-100)}
.ms-panel .ms-opt .ms-opt-code{
  font-family:var(--mono);color:var(--grey-500);font-size:11.5px;flex-shrink:0;width:96px;
  letter-spacing:.2px;
}
.ms-panel .ms-opt.selected .ms-opt-code{color:var(--primary)}
.ms-panel .ms-opt .ms-opt-name{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ms-panel .ms-empty{padding:18px;text-align:center;color:var(--mut);font-size:12px}
.ms-panel .ms-foot{
  display:flex;justify-content:space-between;padding:9px 12px;margin-top:4px;
  border-top:1px solid var(--grey-100);font-size:11px;color:var(--mut);
}
.ms-panel .ms-foot strong{color:var(--primary);font-weight:600}

/* ───── 통합 캘린더 (매출 · 광고비 · ROAS) ───── */
table.calendar-unified td{min-height:92px;vertical-align:top;padding:6px 8px}
table.calendar-unified td .uv{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:11px;line-height:1.4;color:var(--grey-700);
}
table.calendar-unified td .uv .lbl{color:var(--grey-500);font-weight:500;font-size:10.5px}
table.calendar-unified td .uv .num{font-weight:600;color:var(--grey-900);font-variant-numeric:tabular-nums;text-align:right;font-size:clamp(10px,.95vw,12px);letter-spacing:-.3px;word-break:break-all;overflow-wrap:anywhere;min-width:0}
table.calendar-unified td .uv .num.neg{color:#ef4444}
table.calendar-unified td.disabled .uv{display:none}
table.calendar-unified td.future .uv .num{color:var(--grey-400)}