/* ───────── 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{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 3px;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)}
table.calendar td .v{
  font-family:var(--mono);color:var(--grey-900);margin-top:6px;
  font-size:12.5px;font-weight:700;line-height:1.25;letter-spacing:-.2px;
}
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);
}

/* 광고 행 추가 모달 — 필수/선택 그룹 + 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}