/* static/css/shoppinglive.css — 쇼핑라이브 뷰(#shoppingLiveView) 전용 스타일.
   출처: 쇼핑라이브_어드민_대시보드_목업.html — topbar(기존 헤더와 중복)만 제외하고 탭/카드/표/편집 스타일 이식.
   전역 충돌 방지: 커스텀 프로퍼티·모든 선택자를 #shoppingLiveView로 스코프(전역 .btn/.card/.badge와 분리).
   ①단계(실험 로그)만 실동작 — 성과/요인 분석 탭은 .state-card(common.css 기존 클래스) 재사용. */

#shoppingLiveView {
  --slv-surface: #ffffff;
  --slv-surface-alt: #f2f4f6;
  --slv-border: #e6e8ec;
  --slv-border-strong: #d3d7dd;
  --slv-text: #14161a;
  --slv-text-2: #4c5560;
  --slv-muted: #7a828c;
  --slv-accent: #03c75a;
  --slv-accent-dark: #017a37;
  --slv-accent-tint: #e8f8ef;
  --slv-warn: #8a5a00;
  --slv-warn-tint: #fff6e3;
  --slv-warn-border: #f2d488;
  --slv-info: #2b4a6f;
  --slv-info-tint: #eef4fb;
  --slv-info-border: #c6d9ef;
  --slv-r-lg: 16px;
  --slv-r-pill: 999px;
  --slv-sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
  font-size: 14px;
}

/* 탭 */
#shoppingLiveView .slv-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--slv-border);
}
#shoppingLiveView .slv-tab {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slv-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
#shoppingLiveView .slv-tab.is-active { color: var(--slv-accent-dark); border-bottom-color: var(--slv-accent); }
#shoppingLiveView .slv-tab:focus-visible { outline: 2px solid var(--slv-accent); outline-offset: -4px; border-radius: 6px; }

#shoppingLiveView .slv-panel { display: none; padding-top: 4px; }
#shoppingLiveView .slv-panel.is-active { display: block; }

#shoppingLiveView .slv-pagehead { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 14px; flex-wrap: wrap; }
#shoppingLiveView .slv-pagehead h1 { font-size: 14px; font-weight: 700; color: var(--slv-text); }
#shoppingLiveView .slv-sync { font-size: 12.5px; color: var(--slv-muted); }
#shoppingLiveView .slv-spacer { flex: 1; }

/* 버튼 */
#shoppingLiveView .slv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: var(--slv-r-pill);
  border: 1px solid var(--slv-border-strong);
  background: var(--slv-surface);
  color: var(--slv-text-2);
  cursor: pointer;
  font-family: inherit;
}
#shoppingLiveView .slv-btn.slv-primary { background: var(--slv-accent-dark); border-color: var(--slv-accent-dark); color: #fff; }
#shoppingLiveView .slv-btn-xs {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--slv-border-strong);
  background: var(--slv-surface);
  color: var(--slv-text-2);
  cursor: pointer;
  font-family: inherit;
}
#shoppingLiveView .slv-btn-xs.slv-save { background: var(--slv-accent-dark); border-color: var(--slv-accent-dark); color: #fff; }
#shoppingLiveView .slv-btn-xs.slv-cancel { color: var(--slv-muted); background: var(--slv-surface); }
#shoppingLiveView .slv-actwrap { display: inline-flex; gap: 6px; }

/* 카드 */
#shoppingLiveView .slv-card {
  background: var(--slv-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
#shoppingLiveView .slv-card.slv-pad { padding: 24px 28px; }

/* 표 */
#shoppingLiveView .slv-table-scroll { overflow-x: auto; }
#shoppingLiveView table.slv-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#shoppingLiveView table.slv-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--slv-muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--slv-border);
  background: var(--slv-surface-alt);
  white-space: nowrap;
}
#shoppingLiveView table.slv-table tbody td { padding: 12px; border-bottom: 1px solid var(--slv-border); color: var(--slv-text-2); white-space: nowrap; }
#shoppingLiveView table.slv-table tbody tr:last-child td { border-bottom: 0; }
#shoppingLiveView table.slv-table tbody tr:hover td { background: var(--slv-surface-alt); }
#shoppingLiveView table.slv-table tbody tr.is-editing td { background: var(--slv-accent-tint); }
#shoppingLiveView table.slv-table th.num,
#shoppingLiveView table.slv-table td.num { text-align: right; }
#shoppingLiveView table.slv-table td .slv-date { font-weight: 700; color: var(--slv-text); }

#shoppingLiveView table.slv-table th.actcol,
#shoppingLiveView table.slv-table td.actcol {
  text-align: center;
  white-space: nowrap;
  position: sticky;
  right: 0;
  box-shadow: -8px 0 8px -8px rgba(16, 24, 40, .15);
}
#shoppingLiveView table.slv-table th.actcol { background: var(--slv-surface-alt); z-index: 2; }
#shoppingLiveView table.slv-table td.actcol { background: var(--slv-surface); z-index: 1; }
#shoppingLiveView table.slv-table tbody tr:hover td.actcol { background: var(--slv-surface-alt); }
#shoppingLiveView table.slv-table tbody tr.is-editing td.actcol { background: var(--slv-accent-tint); }

/* 배지(실험 로그 표 검증 칸 · 성과 탭과 공유) */
#shoppingLiveView .slv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--slv-r-pill);
}
#shoppingLiveView .slv-badge-fix { color: var(--slv-warn); background: var(--slv-warn-tint); border: 1px solid var(--slv-warn-border); }

/* 실험 로그 표 — 수동 추가 회차(source=manual) 옅은 표식(날짜 옆). 마킹 회차는 표식 없이 자연스럽게 */
#shoppingLiveView .slv-manualtag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--slv-muted);
  background: var(--slv-surface-alt);
  padding: 1px 7px;
  border-radius: var(--slv-r-pill);
  vertical-align: middle;
}

/* 인라인 편집 입력 */
#shoppingLiveView .slv-ctl {
  font: inherit;
  font-size: 13px;
  color: var(--slv-text);
  background: var(--slv-surface);
  border: 1px solid var(--slv-border-strong);
  border-radius: 10px;
  min-height: 34px;
  padding: 6px 9px;
  outline: none;
  max-width: 130px;
  box-sizing: border-box;
}
#shoppingLiveView .slv-ctl:focus { border-color: var(--slv-accent); box-shadow: 0 0 0 3px var(--slv-accent-tint); }
#shoppingLiveView select.slv-ctl { min-width: 88px; }
#shoppingLiveView input.slv-ctl { width: 96px; }
#shoppingLiveView input.slv-ctl.slv-wide { width: 130px; }
#shoppingLiveView input[type="number"].slv-ctl { width: 70px; }

#shoppingLiveView .slv-locked { color: var(--slv-muted); font-weight: 600; background: var(--slv-surface-alt); cursor: help; }

/* 실험 로그 표 상품 칸 — 축약 텍스트 한 줄만 보여주고 전체 구성은 title(hover)로 위임 */
#shoppingLiveView .slv-prodcell {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#shoppingLiveView .slv-loading,
#shoppingLiveView .slv-empty { color: var(--slv-muted); text-align: center; padding: 28px 0 !important; white-space: normal; }

#shoppingLiveView .slv-footnote { font-size: 12px; color: var(--slv-muted); margin: 16px 2px 44px; }

/* ═══════ 성과 탭(②-2단계) — 회차 칩·히어로·추이 차트·회차별 기록 표. 색값은 목업 그대로. ═══════ */
#shoppingLiveView .slv-sync-ok { color: var(--slv-accent-dark); font-weight: 700; }

/* 회차 선택 칩 — 한 줄 가로 캐러셀(#37 후속). 최신 회차가 왼쪽(desc 정렬 그대로), 넘치면 좌우 화살표 + 트랙패드 스크롤. */
#shoppingLiveView .slv-rt-carousel { position: relative; margin-bottom: 16px; }
#shoppingLiveView .slv-roundtabs {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  /* overflow-x:auto면 세로도 clip돼 칩 위로 튀어나온 "최근" 배지(top:-8px)가 잘린다 → 위 여백 확보 */
  padding-top: 11px;
}
#shoppingLiveView .slv-roundtabs::-webkit-scrollbar { width: 0; height: 0; }
#shoppingLiveView .slv-rt-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--slv-border-strong);
  background: var(--slv-surface);
  color: var(--slv-text-2);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: all .12s;
  position: absolute; top: calc(50% + 5px); transform: translateY(-50%); z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
#shoppingLiveView .slv-rt-prev { left: 0; }
#shoppingLiveView .slv-rt-next { right: 0; }
#shoppingLiveView .slv-rt-arrow:hover { border-color: var(--slv-muted); color: var(--slv-text); }
#shoppingLiveView .slv-rt-arrow.is-disabled { opacity: .35; cursor: default; pointer-events: none; }
#shoppingLiveView .slv-rt-arrow.is-hidden { display: none; }
#shoppingLiveView .slv-rt {
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  padding: 10px 14px;
  min-width: 150px;
  border-radius: 12px;
  border: 1px solid var(--slv-border-strong);
  background: var(--slv-surface);
  cursor: pointer;
  transition: all .12s;
}
#shoppingLiveView .slv-rt:hover { border-color: var(--slv-muted); }
#shoppingLiveView .slv-rt-d { font-size: 13.5px; font-weight: 800; color: var(--slv-text); }
#shoppingLiveView .slv-rt-m { font-size: 11.5px; color: var(--slv-muted); font-weight: 600; }
#shoppingLiveView .slv-rt.is-on { background: var(--slv-accent-tint); border-color: var(--slv-accent); box-shadow: inset 0 0 0 1px var(--slv-accent); }
#shoppingLiveView .slv-rt.is-on .slv-rt-d,
#shoppingLiveView .slv-rt.is-on .slv-rt-m { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-rt-live {
  position: absolute; top: -8px; right: 10px;
  font-size: 9.5px; font-weight: 800; color: #fff;
  background: var(--slv-accent-dark); padding: 2.5px 7px; border-radius: 999px;
  box-shadow: 0 2px 5px rgba(1, 122, 55, .35);
}

/* 히어로(선택 회차 요약) — .slv-card와 별개 컨테이너지만 동일 톤(테두리 없음 + shadow-card) */
#shoppingLiveView .slv-hero {
  background: var(--slv-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  margin-bottom: 16px;
}
#shoppingLiveView .slv-hero-left { padding: 30px 34px; border-right: 1px solid var(--slv-border); }
#shoppingLiveView .slv-hero-right { padding: 26px 30px; background: linear-gradient(180deg, #fbfcfd, #fff); }
#shoppingLiveView .slv-eyebrow { font-size: 13px; color: var(--slv-muted); font-weight: 600; }
#shoppingLiveView .slv-eyebrow b { color: var(--slv-text-2); }
#shoppingLiveView .slv-hero-big {
  font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
  color: var(--slv-accent-dark); margin: 10px 0 2px; font-variant-numeric: tabular-nums;
}
#shoppingLiveView .slv-hero-big .slv-won { font-size: 30px; font-weight: 800; }
#shoppingLiveView .slv-hero-story { font-size: 16px; color: var(--slv-text-2); margin-top: 8px; }
#shoppingLiveView .slv-hero-story b { color: var(--slv-text); font-weight: 800; }
#shoppingLiveView .slv-hero-tags { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

#shoppingLiveView .slv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--slv-r-pill);
}
#shoppingLiveView .slv-pill-ok { color: var(--slv-accent-dark); background: var(--slv-accent-tint); border: 1px solid #b6e8cc; }
#shoppingLiveView .slv-pill-fix { color: var(--slv-warn); background: var(--slv-warn-tint); border: 1px solid var(--slv-warn-border); }
#shoppingLiveView .slv-pill-mute { color: var(--slv-text-2); background: var(--slv-surface-alt); border: 1px solid var(--slv-border); }

#shoppingLiveView .slv-rt-title { font-size: 13px; color: var(--slv-muted); font-weight: 600; margin-bottom: 14px; }
#shoppingLiveView .slv-compose { height: 30px; display: flex; gap: 3px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
#shoppingLiveView .slv-seg {
  position: relative; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  overflow: hidden; white-space: nowrap;
}
#shoppingLiveView .slv-c1 { background: #2a78d6; }
#shoppingLiveView .slv-c2 { background: #1baf7a; }
#shoppingLiveView .slv-c3 { background: #eda100; }
#shoppingLiveView .slv-clegend { display: flex; flex-direction: column; gap: 9px; }
#shoppingLiveView .slv-legend-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
#shoppingLiveView .slv-dot { width: 10px; height: 10px; border-radius: 3px; }
#shoppingLiveView .slv-nm { color: var(--slv-text-2); flex: 1; }
#shoppingLiveView .slv-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
#shoppingLiveView .slv-pct { color: var(--slv-muted); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* 추이 차트(Chart.js 캔버스) */
#shoppingLiveView .slv-trend { margin-bottom: 16px; }
#shoppingLiveView .slv-trend h3 { font-size: 16px; font-weight: 800; }
#shoppingLiveView .slv-cap { font-size: 12.5px; color: var(--slv-muted); margin-top: 2px; }
#shoppingLiveView .slv-chart-wrap { position: relative; height: 230px; margin-top: 18px; }
#shoppingLiveView .slv-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* 회차별 기록 표 */
#shoppingLiveView .slv-thead-bar { display: flex; align-items: center; gap: 10px; padding: 18px 24px 12px; }
#shoppingLiveView .slv-thead-bar h3 { flex: 1; font-size: 16px; font-weight: 800; }
#shoppingLiveView table.slv-table tbody tr.slv-clk { cursor: pointer; }
#shoppingLiveView table.slv-table tbody tr.is-on td { background: var(--slv-accent-tint); }
#shoppingLiveView table.slv-table tbody tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--slv-accent); }
#shoppingLiveView td.slv-pos { color: var(--slv-accent-dark); font-weight: 800; }
#shoppingLiveView td.slv-mult { font-weight: 800; color: var(--slv-text); }
#shoppingLiveView .slv-mini { display: flex; gap: 2px; height: 22px; width: 100%; border-radius: 5px; overflow: hidden; }
#shoppingLiveView .slv-mini i { display: flex; align-items: center; justify-content: center; min-width: 0; }
#shoppingLiveView .slv-mini-pct {
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3); white-space: nowrap; overflow: hidden;
}
#shoppingLiveView .slv-badge-ok { color: var(--slv-accent-dark); background: var(--slv-accent-tint); }

/* 회차별 기록 표(성과 탭)만 고정 열 폭 — 매출 구성 열에 잉여 폭이 쏠려 총매출과 벌어지던 빈 공간 제거. 실험 로그 표(12열)는 미적용 */
#shoppingLiveView table.slv-perf-table { table-layout: fixed; }
#shoppingLiveView table.slv-perf-table th:nth-child(1),
#shoppingLiveView table.slv-perf-table td:nth-child(1) { width: 13%; }
#shoppingLiveView table.slv-perf-table th:nth-child(2),
#shoppingLiveView table.slv-perf-table td:nth-child(2) { width: 13%; }
#shoppingLiveView table.slv-perf-table th:nth-child(3),
#shoppingLiveView table.slv-perf-table td:nth-child(3) { width: 9%; }
#shoppingLiveView table.slv-perf-table th:nth-child(4),
#shoppingLiveView table.slv-perf-table td:nth-child(4) { width: 17%; }
#shoppingLiveView table.slv-perf-table th:nth-child(5),
#shoppingLiveView table.slv-perf-table td:nth-child(5) { width: 13%; }
#shoppingLiveView table.slv-perf-table th:nth-child(6),
#shoppingLiveView table.slv-perf-table td:nth-child(6) { width: 9%; }
#shoppingLiveView table.slv-perf-table th:nth-child(7),
#shoppingLiveView table.slv-perf-table td:nth-child(7) { width: 9%; }
#shoppingLiveView table.slv-perf-table th:nth-child(8),
#shoppingLiveView table.slv-perf-table td:nth-child(8) { width: 17%; }
#shoppingLiveView table.slv-perf-table .slv-mini { width: 100%; }

/* 회차별 기록 표 — 행 클릭 드릴다운(②-4단계, 이슈 #37). 상세는 그 행 바로 아래 <tr>로 삽입/제거. */
/* 드릴다운 셰브론 — 퍼포먼스 채널 데일리표(.d-chev)와 동일한 SVG(가는 선·round). 펼침=⌄, 접힘=-90°(›). */
#shoppingLiveView .slv-caret {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 5px; vertical-align: -1px;
  color: var(--slv-muted);
  transition: transform .16s ease, color .16s ease;
}
#shoppingLiveView .slv-caret svg {
  width: 11px; height: 11px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#shoppingLiveView .slv-caret.is-collapsed { transform: rotate(-90deg); }
#shoppingLiveView table.slv-table tbody tr.slv-clk:hover .slv-caret { color: var(--slv-accent-dark); }
@media (prefers-reduced-motion: reduce) { #shoppingLiveView .slv-caret { transition: none; } }
#shoppingLiveView table.slv-table tbody tr.is-open td:first-child { font-weight: 700; }
#shoppingLiveView table.slv-table tbody tr.slv-detail-tr { cursor: default; }
#shoppingLiveView table.slv-table tbody tr.slv-detail-tr td {
  background: var(--slv-surface-alt);
  padding: 18px 24px 22px;
  white-space: normal;
}
#shoppingLiveView table.slv-table tbody tr.slv-detail-tr:hover td { background: var(--slv-surface-alt); }

#shoppingLiveView .slv-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#shoppingLiveView .slv-detail-card {
  display: flex;
  flex-direction: column;
  background: var(--slv-surface);
  border: 1px solid var(--slv-border);
  border-radius: 12px;
  padding: 16px 18px;
}
#shoppingLiveView .slv-detail-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--slv-muted);
  margin-bottom: 10px;
}
/* 한 카드 안 두 번째 소제목(광고비·ROAS 카드의 '실험 변수') — 위 섹션과 간격 확보 */
#shoppingLiveView .slv-detail-title-mt { margin-top: 16px; }
#shoppingLiveView .slv-detail-card .slv-legend-row { font-size: 12.5px; }
#shoppingLiveView .slv-detail-card .slv-legend-row + .slv-legend-row { margin-top: 7px; }
#shoppingLiveView .slv-detail-empty { font-size: 12.5px; color: var(--slv-muted); }

/* 드릴다운 매출 구성 — 상위 그룹 라인(라이브 직접/광고/오가닉). 기본 .slv-legend-row는 히어로
   도넛 범례(#slvHLegend)와 클래스를 공유하므로 .slv-detail-card 스코프 안에서만 재정의한다.
   금액·%를 고정폭 우측정렬 열로 잡고 전체 폭을 좁혀(max-width) 채널명과의 가운데 여백을 줄인다.
   하위 세부 라인(.slv-subch-row)의 들여쓰기(29px)만큼 폭을 더 잡아 두 라인의 열 축을 맞춘다. */
/* 상위·하위 동일 3열 축: 이름(1fr) / 금액(118px 우측) / %(44px 우측). max-width 없이 카드 폭을
   꽉 채워 금액·% 우측 끝이 카드 우측에서 하위 세부 라인과 정확히 일치한다. dot은 이름 안 inline. */
#shoppingLiveView .slv-detail-card .slv-legend-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px 44px;
  align-items: center; column-gap: 14px; max-width: none;
}
#shoppingLiveView .slv-detail-card .slv-legend-row .slv-dot {
  display: inline-block; margin-right: 8px; vertical-align: middle;
}
#shoppingLiveView .slv-detail-card .slv-legend-row .slv-nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#shoppingLiveView .slv-detail-card .slv-legend-row .slv-amt {
  text-align: right; white-space: nowrap; font-weight: 800;
}
#shoppingLiveView .slv-detail-card .slv-legend-row .slv-pct {
  text-align: right; white-space: nowrap;
  color: var(--slv-text); font-weight: 800;
}
/* 상위 그룹(라이브 직접/광고/오가닉) 묶음 — 그룹 사이에 하프라인 구분선 + 여백으로
   "어디까지가 한 그룹인지" 시각적으로 분리. 그룹 헤더 이름은 굵게 앵커링. */
#shoppingLiveView .slv-split-group + .slv-split-group {
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--slv-border);
}
#shoppingLiveView .slv-split-group > .slv-legend-row .slv-nm { color: var(--slv-text); font-weight: 700; }
#shoppingLiveView .slv-split-group .slv-subch { margin-bottom: 2px; }

/* 매출 구성 분할(라이브/광고/오가닉) 아래 세부 채널 리스트(②-5, round-detail 지연 로드) —
   .slv-legend-row(분할 요약) 바로 아래 들여쓴 보조 목록. 원본 legend-row보다 한 단계 약하게.
   %는 상위 그룹 라인과 달리 muted 유지 — "그룹 안 비중"임을 시각적으로 옅게 구분. */
#shoppingLiveView .slv-subch-loading { font-size: 12px; color: var(--slv-muted); margin-bottom: 8px; }
/* 하위 세부: 왼쪽 들여쓰기(19+10+border)만 두고 우측 끝은 카드 우측에 붙어 상위 라인과 동일.
   금액·% 열 폭·gap을 상위(.slv-legend-row)와 똑같이 맞춰 우측 두 열이 세로로 정확히 정렬된다. */
#shoppingLiveView .slv-subch {
  display: flex; flex-direction: column; gap: 3px;
  margin: 3px 0 9px 19px; padding-left: 10px; max-width: none;
  border-left: 2px solid var(--slv-border);
}
#shoppingLiveView .slv-subch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px 44px;
  align-items: baseline; column-gap: 14px;
  font-size: 11.5px; color: var(--slv-text-2);
}
#shoppingLiveView .slv-subch-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shoppingLiveView .slv-subch-amt { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#shoppingLiveView .slv-subch-pct {
  color: var(--slv-muted); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#shoppingLiveView .slv-subch-etc { color: var(--slv-muted); }

/* 상품 랭킹 TOP5 — 요인 분석 탭 그룹 비교 미니바(.slv-track/.slv-fill)와 동일 패턴 재사용 */
#shoppingLiveView .slv-drank { display: flex; flex-direction: column; gap: 8px; }
#shoppingLiveView .slv-drow { display: grid; grid-template-columns: 14px 1fr 88px 108px; align-items: center; gap: 8px; font-size: 12.5px; }
#shoppingLiveView .slv-drank-no { color: var(--slv-muted); font-weight: 700; }
#shoppingLiveView .slv-drank-name { color: var(--slv-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shoppingLiveView .slv-drank-val { text-align: right; font-weight: 700; color: var(--slv-text); white-space: nowrap; }
#shoppingLiveView .slv-drank-val small { color: var(--slv-muted); font-weight: 600; }
/* 랭킹 막대 — 얇은 pill 트랙. 순위가 내려갈수록 브랜드 그린을 옅게(다크→기본→라이트) 3단계로
   구분해 1위가 시각적으로 앞서 보이게. 새 색 남발 없이 accent 계열 안에서만. 1위 번호는 accent 강조. */
#shoppingLiveView .slv-drow .slv-track { height: 8px; border-radius: 999px; }
#shoppingLiveView .slv-drow .slv-fill { border-radius: 999px; background: var(--slv-accent); }
#shoppingLiveView .slv-drow .slv-fill.slv-rk1 { background: var(--slv-accent-dark); }
#shoppingLiveView .slv-drow .slv-fill.slv-rk4,
#shoppingLiveView .slv-drow .slv-fill.slv-rk5 { background: #a7ddc1; }
#shoppingLiveView .slv-drow:first-child .slv-drank-no { color: var(--slv-accent-dark); }

/* 광고비·ROAS / 실험 변수 — 정의 목록(라벨 좌 · 값 우) 하프라인 구분선. 카드 높이를 space-between로
   채워 "휑함" 제거하고, 우측 값은 tabular 정렬로 스캔 쉽게. 두 카드 동일 패턴 → 톤 일관. */
/* 행 간격은 slv-kv-row가 고정(padding·min-height). grow/space-between을 주면 카드가 늘어날 때
   행이 제각각 벌어져(한 카드 안 광고비·ROAS vs 실험 변수 행 높이 불일치) — 상단부터 고정 간격으로. */
#shoppingLiveView .slv-kv { display: flex; flex-direction: column; }
#shoppingLiveView .slv-kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--slv-border); min-height: 22px;
}
#shoppingLiveView .slv-kv-row:first-child { border-top: 0; padding-top: 2px; }
#shoppingLiveView .slv-kv-k { font-size: 12.5px; color: var(--slv-text-2); font-weight: 600; white-space: nowrap; }
#shoppingLiveView .slv-kv-v {
  font-size: 15px; color: var(--slv-text); font-weight: 800;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
#shoppingLiveView .slv-kv-v-muted { color: var(--slv-muted); font-weight: 700; }

@media (max-width: 900px) {
  #shoppingLiveView .slv-detail-grid { grid-template-columns: 1fr; }
  #shoppingLiveView .slv-drow { grid-template-columns: 14px 1fr 78px; }
  #shoppingLiveView .slv-drank-val small { display: block; }
}

@media (max-width: 820px) {
  #shoppingLiveView .slv-hero { grid-template-columns: 1fr; }
  #shoppingLiveView .slv-hero-left { border-right: 0; border-bottom: 1px solid var(--slv-border); }
  #shoppingLiveView .slv-hero-big { font-size: 44px; }
}
@media (max-width: 420px) {
  #shoppingLiveView .slv-rt { min-width: 130px; }
}

@media (max-width: 640px) {
  #shoppingLiveView .slv-card.slv-pad { padding: 18px 16px; }
  #shoppingLiveView .slv-pagehead { margin: 18px 0 10px; }
}

/* ═══════ 요인 분석 탭(②-3b) — 진행 요약 배너 · 6요인 신호등 카드(상태배지+그룹비교 미니바) ·
   다음 회차 참고 카드. 목업(쇼핑라이브_어드민_대시보드_목업.html 탭②) 색값·톤 그대로 이식. ═══════ */
#shoppingLiveView .slv-fsummary {
  background: var(--slv-surface);
  border-radius: var(--slv-r-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 32px;
  margin-bottom: 18px;
}
#shoppingLiveView .slv-fbig { font-size: 22px; font-weight: 800; margin: 9px 0 10px; color: var(--slv-text); line-height: 1.4; }
#shoppingLiveView .slv-fstory { font-size: 14.5px; color: var(--slv-text-2); line-height: 1.75; max-width: 760px; }
#shoppingLiveView .slv-ftags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#shoppingLiveView .slv-pill-info { color: var(--slv-info); background: var(--slv-info-tint); border: 1px solid var(--slv-info-border); }

/* 요인 분석 탭 재구성(#39) — "① 영향력 파악"과 "② 디벨롭"을 완전히 분리된 큰 섹션 2개로 쌓는다.
   기존엔 카드 하나에 매출 영향+테스트 후보가 섞여 있어 구분이 안 됐음 — 섹션 헤드(번호뱃지+제목+
   서브카피)로 시각적으로 확실히 나누고, 섹션 사이는 굵은 여백+구분선으로 끊는다. */
#shoppingLiveView .slv-fsection { margin-bottom: 8px; }
#shoppingLiveView .slv-fsection-develop { margin-top: 34px; padding-top: 30px; border-top: 3px solid var(--slv-border); }
#shoppingLiveView .slv-fsection-head { display: flex; align-items: flex-start; gap: 12px; margin: 2px 2px 16px; }
#shoppingLiveView .slv-fsection-badge {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--slv-accent-dark); color: #fff; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
#shoppingLiveView .slv-fsection-develop .slv-fsection-badge { background: var(--slv-info); }
#shoppingLiveView .slv-fsection-title { font-size: 17px; font-weight: 800; color: var(--slv-text); }
#shoppingLiveView .slv-fsection-sub { font-size: 12.5px; font-weight: 600; color: var(--slv-muted); margin-top: 2px; }

#shoppingLiveView .slv-glabel { font-size: 12.5px; font-weight: 700; color: var(--slv-muted); margin: 20px 2px 2px; }
#shoppingLiveView .slv-glabel:first-child { margin-top: 2px; }
#shoppingLiveView .slv-flist { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }

/* 영향력 카드(.slv-fcard) — #39 재구성으로 디벨롭과 완전히 분리, 매출 영향(+B그룹 유입/전환)만 담당. */
#shoppingLiveView .slv-fcard { display: flex; flex-direction: column; overflow: hidden; margin-bottom: 12px; }
#shoppingLiveView .slv-fcard-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px 0;
}
#shoppingLiveView .slv-frow-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
#shoppingLiveView .slv-fdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#shoppingLiveView .slv-fdot-set { background: var(--slv-accent); }
#shoppingLiveView .slv-fdot-low { background: var(--slv-warn); }
#shoppingLiveView .slv-fdot-na { background: var(--slv-muted); }
#shoppingLiveView .slv-fdot-plan { background: var(--slv-info); }
#shoppingLiveView .slv-fno {
  font-size: 11px; font-weight: 800; color: var(--slv-accent-dark);
  background: var(--slv-accent-tint); padding: 2px 8px; border-radius: 6px; flex-shrink: 0;
}
#shoppingLiveView .slv-fname { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#shoppingLiveView .slv-fstatus {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--slv-r-pill);
  white-space: nowrap;
}
#shoppingLiveView .slv-fstatus-na { color: var(--slv-muted); background: var(--slv-surface-alt); }
#shoppingLiveView .slv-fstatus-low { color: var(--slv-warn); background: var(--slv-warn-tint); border: 1px solid var(--slv-warn-border); }
#shoppingLiveView .slv-fstatus-plan { color: var(--slv-info); background: var(--slv-info-tint); border: 1px solid var(--slv-info-border); }
#shoppingLiveView .slv-fstatus-set { color: var(--slv-accent-dark); background: var(--slv-accent-tint); }

#shoppingLiveView .slv-fsec { padding: 14px 22px; border-top: 1px solid var(--slv-border); }
#shoppingLiveView .slv-fsec-impact { border-top: 0; padding-top: 12px; }
/* 카드 제목 바로 다음 첫 섹션(매출 막대 제거 후 데이터 카드가 첫 섹션이 됨)은 구분선 없이 여백만 — 제목에 선이 붙어 보이던 문제(#79) */
#shoppingLiveView .slv-fcard-head + .slv-fsec { border-top: 0; padding-top: 14px; }
#shoppingLiveView .slv-fsec-label {
  font-size: 11px; font-weight: 800; color: var(--slv-muted); letter-spacing: .02em; margin-bottom: 8px;
}
#shoppingLiveView .slv-fsec-label-inline { margin-bottom: 6px; }
/* '지표별 비교' 접기 헤더(#75) — 클릭 가능. 셰브론(slv-caret)은 공용 스타일 재사용. */
#shoppingLiveView .slv-fmetrics-head {
  display: flex; align-items: center; cursor: pointer; user-select: none;
  margin-top: 10px; padding: 2px 0; transition: color .16s ease;
}
#shoppingLiveView .slv-fmetrics-head:hover { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-fmetrics-head:hover .slv-caret { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-fseen { font-size: 13px; color: var(--slv-text-2); line-height: 1.6; }
#shoppingLiveView .slv-fseen + .slv-fseen { margin-top: 4px; }
#shoppingLiveView .slv-fnext { font-size: 12.5px; color: var(--slv-text-2); margin-top: 7px; }

/* 요인 카드 큰 숫자 막대(.slv-idiff/.slv-ibars 등)와 옛 2열 지표비교(.slv-mbs/.slv-mb-*)는
   #75-ds/#79로 데이터 카드(.slv-dm-*) 하나로 일원화되며 더 이상 렌더되지 않아 제거함(2026-07-16).
   막대 색 규칙(.slv-ibar-fill/.slv-if-top/.slv-if-rest)은 .slv-dm-gbar 안에서 계속 재사용된다. */
#shoppingLiveView .slv-ibar-fill { height: 100%; border-radius: 6px; }
#shoppingLiveView .slv-ibar-fill.slv-if1 { background: var(--slv-accent-dark); }
#shoppingLiveView .slv-ibar-fill.slv-if2 { background: var(--slv-border-strong); }
#shoppingLiveView .slv-ibar-fill.slv-if3 { background: var(--slv-warn); }
/* 순위 기반 색(#74) — 1등만 진초록 강조, 2등 이하는 전부 같은 중립 초록.
   그룹이 6~7개(요일)여도 색이 규칙적이다(갈색·회색 뒤섞임 제거). */
#shoppingLiveView .slv-ibar-fill.slv-if-top { background: var(--slv-accent-dark); }
#shoppingLiveView .slv-ibar-fill.slv-if-rest { background: var(--slv-accent); opacity: .34; }

/* 유입/전환 프레임(B그룹: 플친·토스·GFA만) — 3칸 큰 숫자 스탯으로(기존엔 한 줄 텍스트에 섞여 있었음). */
#shoppingLiveView .slv-ftraffic-stats { display: flex; gap: 26px; flex-wrap: wrap; }
#shoppingLiveView .slv-ftstat { display: flex; flex-direction: column; gap: 3px; }
#shoppingLiveView .slv-ftstat-k { font-size: 11px; color: var(--slv-muted); font-weight: 700; }
#shoppingLiveView .slv-ftstat-v { font-size: 18px; font-weight: 800; color: var(--slv-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
#shoppingLiveView .slv-ftraffic-n { font-weight: 600; color: var(--slv-muted); font-size: 11.5px; margin-top: 8px; }
#shoppingLiveView .slv-ftraffic-empty { font-size: 12.5px; color: var(--slv-muted); }
#shoppingLiveView .slv-ftraffic-hint { font-size: 12px; color: var(--slv-warn); margin-top: 6px; }

/* 디벨롭 카드(.slv-fdevcard, #39) — 영향력 카드와 별도 섹션의 독립 카드. 요인마다 테스트 후보
   칩만 담아 가볍게 그리드로 배치(6장이 한 화면에 스캔되도록). 기존 .slv-pill 칩 재사용. */
#shoppingLiveView .slv-fdev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#shoppingLiveView .slv-fdevcard { padding: 16px 20px; background: var(--slv-surface-alt); }
#shoppingLiveView .slv-fdevcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#shoppingLiveView .slv-fdev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#shoppingLiveView .slv-fdev-hint { font-size: 11.5px; color: var(--slv-muted); margin-top: 10px; }

#shoppingLiveView .slv-nextplan {
  background: linear-gradient(180deg, var(--slv-info-tint), var(--slv-surface) 80%);
  border: 1px solid var(--slv-info-border);
  border-radius: var(--slv-r-lg);
  padding: 18px 22px;
  box-shadow: var(--slv-sh-sm);
  margin-top: 4px;
}
#shoppingLiveView .slv-nextplan:empty { display: none; }
#shoppingLiveView .slv-np-t { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--slv-info); margin-bottom: 8px; }
#shoppingLiveView .slv-np-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#shoppingLiveView .slv-np-k { font-size: 11.5px; color: var(--slv-muted); font-weight: 600; }
#shoppingLiveView .slv-np-v { font-size: 14px; font-weight: 700; margin-top: 1px; }

@media (max-width: 900px) {
  #shoppingLiveView .slv-fcard-head { padding: 14px 18px 0; gap: 10px; flex-wrap: wrap; }
  #shoppingLiveView .slv-fsec { padding: 14px 18px; }
  #shoppingLiveView .slv-fsec-impact { padding-top: 12px; }
  #shoppingLiveView .slv-fai { padding: 12px 18px 14px; }
  #shoppingLiveView .slv-fdev-grid { grid-template-columns: 1fr; }
  #shoppingLiveView .slv-np-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── AI 요인 분석 리포트(#75) — 2층: 핵심 심층 + 요인별 ── */
#shoppingLiveView .slv-aisection { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
#shoppingLiveView .slv-aisection:empty { display: none; }
#shoppingLiveView .slv-ai-head { display: flex; align-items: center; gap: 10px; }
#shoppingLiveView .slv-ai-title { font-size: 14px; font-weight: 800; color: var(--slv-accent-dark); }
#shoppingLiveView .slv-ai-gen { font-size: 12px; color: var(--slv-muted); }
#shoppingLiveView .slv-ai-refresh { margin-left: auto; }
/* 갱신 중(#79) — 클릭 즉시 '생성 중…'으로 바뀌고 비활성. 진행 중임을 시각적으로 알린다. */
#shoppingLiveView .slv-ai-refresh:disabled { opacity: .55; cursor: default; background: var(--slv-surface-alt); }
#shoppingLiveView .slv-aicard {
  background: var(--slv-surface);
  border: 1px solid var(--slv-border);
  border-radius: var(--slv-r-lg);
  box-shadow: var(--slv-sh-sm);
  padding: 16px 18px;
}
#shoppingLiveView .slv-ai-core { border-left: 3px solid var(--slv-accent); background: var(--slv-accent-tint); }
#shoppingLiveView .slv-ai-cardhead { font-size: 13px; font-weight: 700; color: var(--slv-text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
#shoppingLiveView .slv-ai-body { font-size: 13px; line-height: 1.7; color: var(--slv-text-2); }
#shoppingLiveView .slv-ai-body p { margin: 0 0 8px; }
#shoppingLiveView .slv-ai-body p:last-child { margin-bottom: 0; }
#shoppingLiveView .slv-ai-body strong { color: var(--slv-text); font-weight: 700; }
#shoppingLiveView .slv-ai-ul { margin: 4px 0 8px; padding-left: 18px; }
#shoppingLiveView .slv-ai-ul li { margin: 2px 0; }
#shoppingLiveView .slv-ai-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 12.5px; }
#shoppingLiveView .slv-ai-table th, #shoppingLiveView .slv-ai-table td { border: 1px solid var(--slv-border); padding: 5px 8px; text-align: left; }
#shoppingLiveView .slv-ai-table th { background: var(--slv-surface-alt); font-weight: 700; color: var(--slv-text); }
#shoppingLiveView .slv-ai-factors { display: flex; flex-direction: column; gap: 10px; }
#shoppingLiveView .slv-ai-sectitle { font-size: 12.5px; font-weight: 700; color: var(--slv-muted); margin-top: 4px; }
#shoppingLiveView .slv-ai-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--slv-r-pill); }
#shoppingLiveView .slv-ai-badge-set { background: var(--slv-accent-tint); color: var(--slv-accent-dark); }
#shoppingLiveView .slv-ai-badge-low { background: var(--slv-warn-tint); color: var(--slv-warn); border: 1px solid var(--slv-warn-border); }
#shoppingLiveView .slv-ai-badge-na { background: var(--slv-surface-alt); color: var(--slv-muted); }

/* 마크다운 렌더 보강(#75) — 헤더·구분선·인용 + 가로 넘침 방지 + 요인카드 하단 AI 블록 */
#shoppingLiveView .slv-ai-body { overflow-wrap: anywhere; word-break: break-word; }
#shoppingLiveView .slv-ai-h { font-weight: 700; color: var(--slv-text); margin: 10px 0 6px; line-height: 1.5; }
#shoppingLiveView .slv-ai-h:first-child { margin-top: 0; }
#shoppingLiveView .slv-ai-h1 { font-size: 15px; }
#shoppingLiveView .slv-ai-h2 { font-size: 14px; }
#shoppingLiveView .slv-ai-h3 { font-size: 13px; color: var(--slv-text-2); }
#shoppingLiveView .slv-ai-h4 { font-size: 12.5px; color: var(--slv-text-2); }
#shoppingLiveView .slv-ai-hr { border: 0; border-top: 1px solid var(--slv-border); margin: 12px 0; }
#shoppingLiveView .slv-ai-quote { border-left: 3px solid var(--slv-accent); padding: 6px 12px; margin: 8px 0; color: var(--slv-text-2); background: var(--slv-surface-alt); border-radius: 0 8px 8px 0; }
#shoppingLiveView .slv-ai-table { display: block; max-width: 100%; overflow-x: auto; }
/* 피드백#3(구분선 통일): 카드 안 모든 섹션(매출영향 제외 — 첫 섹션)은 같은 실선 규칙을 쓴다.
   AI 분석 블록만 점선+다른 패딩을 쓰던 걸 .slv-fsec와 동일하게 맞춤. */
#shoppingLiveView .slv-fai { padding: 14px 22px; border-top: 1px solid var(--slv-border); }
#shoppingLiveView .slv-fai-head { font-size: 12px; font-weight: 700; color: var(--slv-accent-dark); margin-bottom: 6px; }

/* ══════════════════════ 요인 데이터 카드 v2 — "블록형 랭킹 리스트"(#75-ds) ══════════════════════
   실사용자 피드백(그룹 2개면 오른쪽이 비고, 6~7개면 빽빽해져 카드마다 제각각으로 보임)에 따라
   그룹을 그리드의 "열"로 두는 방식을 폐기했다. 대신 지표 하나 = 블록 하나(.slv-dm-block), 블록
   안에서 그룹은 세로로 쌓인 행(.slv-dm-grow = 라벨+막대+값)이다. 행은 항상 블록 전체 너비를
   쓰므로 그룹이 2개든 7개든 그 블록 자체는 늘 꽉 차 보인다(행 개수만 다를 뿐 좌우 균형은 항상
   동일). 같은 카드 안 모든 블록은 그 요인의 그룹 수가 같으므로 2열 그리드에 나열해도 카드 내부
   블록끼리 높이가 자연히 맞는다 — 카드마다(요인마다) 전체 높이가 다른 건 정상이고, 문제였던
   "한 카드 안 좌우 불균형"은 구조적으로 사라진다. 프로토타입(scratchpad/slv_v2.html)을 실데이터로
   playwright 스크린샷 검증 후 이식. 막대 색은 기존 .slv-ibar-fill.slv-if-top/slv-if-rest 재사용. */
#shoppingLiveView .slv-dm .slv-fsec-label-inline { margin-bottom: 12px; }
#shoppingLiveView .slv-dm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px; }
#shoppingLiveView .slv-dm-block { min-width: 0; }
/* 제목 줄에 차이 칩을 오른쪽으로 미는 space-between — "차이 +1,086만원"이 블록 제목과 한눈에
   묶여 보이게(피드백: 왼쪽 아래 단독 캡션은 어정쩡함). */
#shoppingLiveView .slv-dm-blocktitle {
  font-size: 11.5px; font-weight: 700; color: var(--slv-text-2); margin-bottom: 6px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
#shoppingLiveView .slv-dm-blocktitle-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#shoppingLiveView .slv-dm-lower { font-size: 10px; font-weight: 500; color: var(--slv-muted); }
#shoppingLiveView .slv-dm-diffchip {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--slv-accent-dark);
  background: var(--slv-accent-tint); border-radius: var(--slv-r-pill); padding: 1px 8px; white-space: nowrap;
}
#shoppingLiveView .slv-dm-grow { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; margin: 0 -4px; }
#shoppingLiveView .slv-dm-grow:hover { background: var(--slv-surface-alt); }
#shoppingLiveView .slv-dm-glabel {
  flex: 0 0 58px; font-size: 11px; color: var(--slv-muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#shoppingLiveView .slv-dm-gbar { flex: 1 1 auto; min-width: 24px; height: 8px; border-radius: 5px; background: var(--slv-surface-alt); overflow: hidden; }
#shoppingLiveView .slv-dm-gbar .slv-ibar-fill { display: block; height: 100%; border-radius: 5px; }
#shoppingLiveView .slv-dm-gval {
  flex: 0 0 auto; min-width: 58px; text-align: right; font-size: 11.5px; font-weight: 700;
  color: var(--slv-text-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
#shoppingLiveView .slv-dm-cat {
  grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: var(--slv-text-2); letter-spacing: .02em;
  margin: 14px 0 2px; padding-top: 10px; border-top: 1px dashed var(--slv-border);
}
#shoppingLiveView .slv-dm-more {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--slv-accent-dark);
  background: var(--slv-accent-tint); border: 0; border-radius: var(--slv-r-pill);
  padding: 7px 14px; cursor: pointer;
}
#shoppingLiveView .slv-dm-more:hover { background: #d8f2e4; }
#shoppingLiveView .slv-dm-extra { display: none; }
#shoppingLiveView .slv-dm-extra.is-open { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px; }
#shoppingLiveView .slv-dm-extra-rows { display: none; }
#shoppingLiveView .slv-dm-extra-rows.is-open { display: block; }

/* A-4(상품 구성) 전용 — 세트군/단품군. 같은 .slv-dm-grow 문법이되 제품명이 길어 라벨 폭을 넓힌
   변형(.is-prod) — .slv-dm-cat(소제목)은 "세트군"/"단품군" 표시에 그대로 재사용된다. */
#shoppingLiveView .slv-dm-grow.is-prod .slv-dm-glabel { flex: 1 1 auto; min-width: 0; }
#shoppingLiveView .slv-dm-grow.is-prod .slv-dm-gbar { flex: 0 0 90px; }
#shoppingLiveView .slv-dm-grow.is-prod .slv-dm-gval { flex: 0 0 118px; }
#shoppingLiveView .slv-dm-grow.is-prod .slv-dm-gval small { display: block; font-weight: 600; color: var(--slv-muted); font-size: 10px; }

@media (max-width: 640px) {
  #shoppingLiveView .slv-dm-grid, #shoppingLiveView .slv-dm-extra.is-open { grid-template-columns: 1fr; }
  #shoppingLiveView .slv-dm-grow.is-prod .slv-dm-gbar { flex-basis: 60px; }
}

/* 특별회차 배너(#75-ds) — factorReport.dataset.special_rounds. 요인 리스트 상단에 한 번만 표시.
   기존 .slv-nextplan(정보 톤 그라디언트)과 같은 --slv-info-* 토큰 재사용. */
#shoppingLiveView .slv-dm-sp {
  margin: 0 0 16px;
  background: linear-gradient(180deg, var(--slv-info-tint), var(--slv-surface));
  border: 1px solid var(--slv-info-border);
  border-radius: var(--slv-r-lg);
  padding: 12px 16px;
}
#shoppingLiveView .slv-dm-sp-t { font-size: 12px; font-weight: 800; color: var(--slv-info); margin-bottom: 6px; }
#shoppingLiveView .slv-dm-sp-row { font-size: 12.5px; color: var(--slv-text-2); margin: 3px 0; }
#shoppingLiveView .slv-dm-sp-row b { color: var(--slv-text); }

/* ═══════ #99 — 히어로 캡션 · 비교 블록 · 쇼호스트 추가 분석 모달 ═══════ */

/* 히어로 큰 숫자 옆 캡션 — 그 숫자가 '라이브 매출'임을 밝힌다(인크리멘탈과 헷갈리지 않게) */
#shoppingLiveView .slv-hbig-cap {
  font-size: 13px; font-weight: 700; color: var(--slv-text-2);
  margin-left: 10px; vertical-align: middle; letter-spacing: -0.01em;
}

/* 비교 블록 — [행 라벨] [왼쪽 값] [판정] [오른쪽 값] 4칸 그리드.
   라벨·판정 칸은 반드시 '고정 px'로 준다 — auto 로 두면 "전체"(2자)와 "라이브 제외"(5자)처럼
   행마다 텍스트 길이가 달라 카드마다·행마다 시작 x 좌표가 어긋난다(#99 실측 버그 원인).
   라벨이 없는 카드(2·3번)도 JS 에서 빈 .slv-cmp-rowlb 를 넣어 칸 수를 4개로 맞춘다 —
   그래야 카드 1·2·3 이 완전히 같은 그리드 정의를 공유해서 좌측 정렬선이 일치한다. */
#shoppingLiveView .slv-cmp-card { margin-top: 16px; margin-bottom: 16px; }

/* 라이브 효과 표(#99 개편) — 행=주중/주말/전체, 열=라이브 유무·인크리멘탈·배수.
   카드 3개를 표 하나로 합치면서 추가. 숫자는 tabular-nums로 자릿수 비교가 쉽게. */
#shoppingLiveView .slv-cmp-table { width: 100%; }
/* 행 라벨(th)에도 td와 같은 아래 선을 준다 — 기존 표 규칙이 tbody td에만 border-bottom을
   걸어, 라벨 칸에서만 구분선이 끊겨 보였다(#99). */
#shoppingLiveView .slv-cmp-table th[scope="row"] {
  text-align: left; font-weight: 700; white-space: nowrap;
  padding: 12px; border-bottom: 1px solid var(--slv-border);
}
#shoppingLiveView .slv-cmp-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#shoppingLiveView .slv-cmp-table td.num b { font-weight: 800; }
#shoppingLiveView .slv-cmp-days {
  display: inline-block; margin-left: 6px; font-size: 11.5px;
  font-weight: 600; color: var(--slv-muted);
}
#shoppingLiveView .slv-cmp-inc.is-up { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-cmp-inc.is-dn { color: #c0392b; }
/* 전체 행은 주중·주말의 합산 성격이라 구분선으로 끊는다. */
#shoppingLiveView .slv-cmp-table tr.slv-cmp-total > * {
  border-top: 2px solid var(--slv-border-strong); background: var(--slv-surface-alt);
}
/*  ↑ margin-bottom 만 있으면, margin-bottom 이 없는 윗 카드(회차별 기록)와 첫 비교 카드
    사이 간격이 0이 된다. margin-top 도 같이 줘서 위 카드 스타일에 기대지 않고 이 카드
    스스로 간격을 보장한다(형제 margin 은 겹치므로 카드 사이가 두 배로 벌어지진 않는다). */
#shoppingLiveView .slv-cmp-grid { display: flex; flex-direction: column; gap: 14px; }
/*  값 칸만 minmax(0,300px) 로 신축시키고, 라벨·판정은 고정폭 — 1fr 로 두면 와이드 모니터에서
    박스가 화면 끝까지 늘어나 가운데 판정 텍스트가 양쪽 값에서 멀어져 한눈에 안 들어온다. */
#shoppingLiveView .slv-cmp-row {
  display: grid; grid-template-columns: 100px minmax(0, 300px) 168px minmax(0, 300px);
  align-items: stretch; gap: 14px; min-width: 0; justify-content: start;
}
#shoppingLiveView .slv-cmp-rowlb {
  display: flex; align-items: center; font-size: 12px; font-weight: 800;
  color: var(--slv-text-2); white-space: nowrap; padding-right: 4px;
}
#shoppingLiveView .slv-cmp-cell {
  background: var(--slv-surface-alt); border: 1px solid var(--slv-border);
  border-radius: 12px; padding: 12px 14px; min-width: 0;
}
/* 강조(더 큰 쪽) — 배경 틴트만이 아니라 좌측 브랜드색 바 + 값 텍스트 색까지 바꿔서,
   카드1처럼 강조가 행마다 좌우로 뒤집힐 때 그 뒤집힘이 눈에 바로 들어오게 한다.
   색은 새로 만들지 않고 이 파일에 이미 있는 "ok" 톤(.slv-pill-ok 등)을 그대로 재사용. */
#shoppingLiveView .slv-cmp-cell.is-hi {
  background: var(--slv-accent-tint); border-color: #b6e8cc;
  border-left: 3px solid var(--slv-accent-dark); padding-left: 12px;
}
#shoppingLiveView .slv-cmp-cell.is-hi .slv-cmp-v { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-cmp-lb { font-size: 12.5px; font-weight: 700; color: var(--slv-text-2); }
#shoppingLiveView .slv-cmp-v {
  font-size: 21px; font-weight: 900; color: var(--slv-text); margin-top: 4px;
  letter-spacing: -0.02em; white-space: nowrap;
}
/* 표본 일수 — 절대 빼면 안 됨(주말 라이브 4일 vs 72일이 같은 무게로 읽히는 사고 방지).
   단, 값(.slv-cmp-v)보다는 눈에 덜 띄게 — 크기·색 모두 한 단계 낮춘다. */
#shoppingLiveView .slv-cmp-n { font-size: 11.5px; color: var(--slv-muted); margin-top: 2px; }
#shoppingLiveView .slv-cmp-verdict {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; white-space: nowrap; padding: 0 6px; text-align: center;
}
#shoppingLiveView .slv-cmp-verdict.is-up { color: var(--slv-accent-dark); }
#shoppingLiveView .slv-cmp-verdict.is-dn { color: var(--slv-text-2); }
#shoppingLiveView .slv-cmp-verdict.is-na { color: var(--slv-muted); font-weight: 700; }
#shoppingLiveView .slv-cmp-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--slv-muted); }
#shoppingLiveView .slv-cmp-empty {
  font-size: 12.5px; color: var(--slv-muted); padding: 10px 2px;
}

/* 요인 카드 헤더 우측(추가 분석 버튼 + 상태 배지) */
#shoppingLiveView .slv-fhead-right { display: inline-flex; align-items: center; gap: 8px; }
#shoppingLiveView .slv-fmore-btn {
  border: 1px solid var(--slv-border); background: var(--slv-surface); color: var(--slv-text-2);
  font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
#shoppingLiveView .slv-fmore-btn:hover {
  background: var(--slv-accent-tint); border-color: #b6e8cc;
  color: var(--slv-accent-dark);
}

/* 쇼호스트 추가 분석 모달 */
#slvHostModal[hidden] { display: none; }
#slvHostModal {
  position: fixed; inset: 0; z-index: 1200; background: rgba(17, 24, 20, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#slvHostModal .slv-modal-box {
  background: var(--slv-surface); border-radius: 16px; width: min(920px, 100%);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
#slvHostModal .slv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--slv-border);
}
#slvHostModal .slv-modal-head h3 { margin: 0; font-size: 16px; font-weight: 900; }
#slvHostModal .slv-modal-x {
  border: 0; background: transparent; font-size: 22px; line-height: 1;
  color: var(--slv-text-2); cursor: pointer; padding: 2px 6px;
}
#slvHostModal .slv-modal-body { padding: 16px 20px 20px; overflow-y: auto; }
#slvHostModal .slv-hm-lead {
  font-size: 12.5px; color: var(--slv-text-2); line-height: 1.65; margin: 0 0 16px;
}
#slvHostModal .slv-hm-host {
  border: 1px solid var(--slv-border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
/* 마지막 쇼호스트 카드는 모달 바디 padding 이 이미 아래 여백을 주므로 중복 여백 제거 */
#slvHostModal .slv-hm-host:last-child { margin-bottom: 0; }
#slvHostModal .slv-hm-name {
  font-size: 14.5px; font-weight: 900; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
#slvHostModal .slv-hm-rounds {
  font-size: 11.5px; font-weight: 700; color: var(--slv-text-2);
  background: var(--slv-surface-alt); border: 1px solid var(--slv-border);
  border-radius: 999px; padding: 2px 9px;
}
#slvHostModal .slv-hm-sub + .slv-hm-sub { margin-top: 16px; }
/* 소제목 왼쪽에 얇은 브랜드색 바 — '시간대' 표와 '주중·주말' 표가 붙어 보이지 않게 구분선 역할 */
#slvHostModal .slv-hm-subt {
  font-size: 12px; font-weight: 800; color: var(--slv-text-2); margin-bottom: 8px;
  padding-left: 8px; border-left: 2px solid var(--slv-accent-dark);
}
#slvHostModal .slv-hm-table { width: 100%; font-size: 12.5px; }
#slvHostModal .slv-hm-table th, #slvHostModal .slv-hm-table td { padding: 7px 8px; }
#slvHostModal .slv-hm-table td.num, #slvHostModal .slv-hm-table th.num { text-align: right; }
/* n=n 배지 — 그냥 흐린 텍스트가 아니라 필(pill) 로 그려서 '이건 표본 회차 수'라는 게
   값과 헷갈리지 않고 한눈에 읽히게 한다. */
#shoppingLiveView .slv-hm-n,
#slvHostModal .slv-hm-n {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800;
  color: var(--slv-text-2); background: var(--slv-surface-alt);
  border: 1px solid var(--slv-border); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px;
}
/* 표본 1회 — 우연일 수 있어 흐리게 */
#slvHostModal .slv-hm-table tr.is-thin { opacity: 0.55; }
/*  구간별 1등(추가 매출 최대) — 표가 여러 개라 색을 많이 쓰면 오히려 안 읽혀서
    행 배경 옅은 틴트 + 이름만 굵게. 표본 1회(is-thin)는 1등이어도 강조하지 않는다. */
#slvHostModal .slv-hm-table tr.is-top { background: var(--slv-accent-tint); }
#slvHostModal .slv-hm-table tr.is-top td:first-child { font-weight: 800; color: var(--slv-accent-dark); }
#slvHostModal .slv-hm-table tbody tr + tr td { border-top: 1px solid var(--slv-border); }
#slvHostModal .slv-hm-name { font-size: 13px; color: var(--slv-text-2); }

/* 중간 폭 — 값 칸(300px 상한)만 풀어 남는 공간을 채운다. 라벨·판정은 데스크톱과 같은
   고정폭을 유지해야 좌측 정렬선이 안 흔들린다. 모든 행이 이제 같은 4칸 그리드를 쓰므로
   (라벨 없는 카드도 JS 가 빈 칸을 넣는다) :has() 분기가 더 이상 필요 없다. */
@media (max-width: 1080px) {
  #shoppingLiveView .slv-cmp-row { grid-template-columns: 100px 1fr 168px 1fr; }
}

@media (max-width: 720px) {
  #shoppingLiveView .slv-cmp-row { grid-template-columns: 1fr; gap: 8px; }
  /* 좁은 화면에서 1열로 쌓이면 라벨 있는 칸·순서가 더 이상 정렬 역할을 하지 않으므로,
     라벨 없는 카드가 넣은 빈 칸은 그냥 빈 줄이 되어 접어서 없앤다. */
  #shoppingLiveView .slv-cmp-rowlb:empty { display: none; }
  #shoppingLiveView .slv-cmp-verdict { padding: 6px 0; }
  #slvHostModal { padding: 12px; }
  #slvHostModal .slv-modal-body { padding: 14px; }
}

/* ─── 요인 카드 드릴다운(#99) — 기본 접힘, 헤더 클릭으로 펼침 ─── */
/*  요인이 6개라 전부 펼쳐두면 화면이 너무 길어 훑기 어렵다. 헤더만 보이는 상태를 기본으로 둔다. */
#shoppingLiveView .slv-fcard > .slv-fcard-head { cursor: pointer; user-select: none; }
#shoppingLiveView .slv-fcard > .slv-fcard-head:hover { background: var(--slv-surface-alt); }
#shoppingLiveView .slv-fcard > .slv-fcard-body { display: none; }
#shoppingLiveView .slv-fcard.is-open > .slv-fcard-body { display: block; }
/*  캐럿 — 펼치면 180° 회전. 별도 아이콘 파일 없이 CSS 삼각형으로. */
#shoppingLiveView .slv-fcaret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--slv-muted);
  transition: transform 0.15s ease;
}
#shoppingLiveView .slv-fcard.is-open .slv-fcaret { transform: rotate(180deg); }
#shoppingLiveView .slv-fcard > .slv-fcard-head:focus-visible {
  outline: 2px solid var(--slv-accent-dark); outline-offset: -2px; border-radius: 12px;
}

/*  비교 카드 제목 여백 보정(#99) — .slv-thead-bar 는 원래 패딩 없는 카드(회차별 기록처럼
    표가 카드 끝까지 닿는 경우)용이라 자기가 padding:18px 24px 12px 을 갖는다.
    비교 카드는 .slv-pad(24px 28px)도 함께 써서 두 패딩이 겹쳤다 — 제목이 카드 상단에서
    42px, 좌측 52px 까지 밀렸다. 비교 카드에서만 중복분을 걷어낸다. */
#shoppingLiveView .slv-cmp-card > .slv-thead-bar { padding: 0 0 14px; }

/*  접힌 요인 카드 하단 여백(#99) — .slv-fcard-head 는 padding-bottom:0 이다(원래 아래에
    본문이 이어지는 전제). 드릴다운으로 접으면 헤더 밑이 곧 카드 끝이라 딱 붙어 보인다.
    접혔을 때만 하단 패딩을 준다(펼치면 종전 간격 유지). */
#shoppingLiveView .slv-fcard:not(.is-open) > .slv-fcard-head { padding-bottom: 16px; }
#shoppingLiveView .slv-fcard { margin-bottom: 14px; }