/* static/css/kakao-shoppinglive.css — 카카오 쇼핑라이브 뷰(#kakaoShoppingLiveView) 전용 스타일.
   출처: static/css/shoppinglive.css(네이버 쇼핑라이브 뷰)를 복제해 카카오용으로 스코프·색상만 치환.
   전역 충돌 방지: 커스텀 프로퍼티·모든 선택자를 #kakaoShoppingLiveView로 스코프(전역 .btn/.card/.badge와 분리).
   브랜드 컬러: 카카오 브라운(#3C1E1E)을 accent로, 연노랑(#FFF9D6)을 tint 배경으로 사용
   (카카오 시그니처 옐로 #FEE500은 흰 배경 위 텍스트·테두리로 쓰면 대비가 나오지 않아 accent로 채택하지 않음). */

#kakaoShoppingLiveView {
  --ksl-surface: #ffffff;
  --ksl-surface-alt: #f2f4f6;
  --ksl-border: #e6e8ec;
  --ksl-border-strong: #d3d7dd;
  --ksl-text: #14161a;
  --ksl-text-2: #4c5560;
  --ksl-muted: #7a828c;
  --ksl-accent: #3C1E1E;
  --ksl-accent-dark: #1F0F0F;
  --ksl-accent-tint: #FFF9D6;
  --ksl-warn: #8a5a00;
  --ksl-warn-tint: #fff6e3;
  --ksl-warn-border: #f2d488;
  /* 카카오 옐로 — 막대·강조선처럼 "면적/선"으로 칠하는 곳 전용(#94).
     텍스트·버튼 배경엔 쓰지 않는다(흰 배경 위 노랑 글씨는 대비가 안 나옴 → 그쪽은 accent 브라운). */
  --ksl-yellow: #FEE500;
  --ksl-yellow-deep: #F5D800;
  --ksl-neg: #c0392b;      /* 음수(마진 등) — 마케팅비 포함 기준이라 마이너스가 정상 표기될 수 있다(#94) */
  --ksl-info: #2b4a6f;
  --ksl-info-tint: #eef4fb;
  --ksl-info-border: #c6d9ef;
  --ksl-r-lg: 16px;
  --ksl-r-pill: 999px;
  --ksl-sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
  font-size: 14px;
}

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

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

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

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

/* 카드 */
#kakaoShoppingLiveView .ksl-card {
  background: var(--ksl-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;   /* 카드끼리 붙어 한 덩어리로 보이던 문제(#94) */
}
#kakaoShoppingLiveView .ksl-card:last-child { margin-bottom: 0; }
#kakaoShoppingLiveView .ksl-card.ksl-pad { padding: 24px 28px; }

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

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

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

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

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

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

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

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

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

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

/* 요약(6개) · 시청·참여(10개) KPI — 사이트 전역 .kpi-card 톤(흰/그레이 톤·border none·shadow·큰 숫자)을
   그대로 이식한 스탯 카드. 기존엔 .ksl-np-grid(다음 회차 참고용 3열 고정 그리드)를 재사용해 넓은
   화면에서 항목당 500px 넘게 늘어나며 "카드"로 안 보였다(#94 실측). auto-fit + 개별 아이템 상한(200px)
   으로 폭이 넓어질수록 열이 늘어나되 한 항목이 무한정 벌어지지 않는다. 좁은 화면(~340px)에서도
   138px 하한 덕에 자연히 2열 유지.
   ⚠ minmax(138px,200px)처럼 max가 고정 길이면 auto-fit의 "몇 열이 들어가는지" 계산 자체가 138이
   아니라 200 기준으로 돌아 좁은 화면에서 오히려 1열로 줄어드는 함정이 있다(실측 375px에서 1열
   확인). max를 1fr로 두어 열 개수 계산은 min(138px) 기준으로 하고, 아이템 자체 max-width로 시각
   폭만 캡한다(표준 "반응형 카드 그리드" 패턴). */
#kakaoShoppingLiveView .ksl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
#kakaoShoppingLiveView .ksl-kpi-item {
  background: var(--ksl-accent-tint);   /* 지표 타일은 전부 카카오 연노랑으로 통일(#94) */
  border-radius: 14px;
  padding: 15px 17px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  /* max-width를 두면 그리드 칸(1fr)보다 타일이 좁아져 타일 사이가 띄엄띄엄 벌어진다 —
     칸을 그대로 채우게 하고, 대신 칸 최소폭(minmax)으로 개수를 조절한다(#94). */
}
#kakaoShoppingLiveView .ksl-kpi-k {
  font-size: 12px; font-weight: 600; color: var(--ksl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 숫자는 절대 잘리면 안 된다 — ellipsis 대신 필요하면 2줄로 자연스럽게 줄바꿈(#94 실측: 768px 4열,
   375px 2열 모두에서 "−1,007,696원"류 긴 금액이 ellipsis에 잘려 안 보이는 사고 확인 후 제거). */
#kakaoShoppingLiveView .ksl-kpi-v {
  font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  color: var(--ksl-text); font-variant-numeric: tabular-nums;
  word-break: keep-all; overflow-wrap: break-word;
}
#kakaoShoppingLiveView .ksl-kpi-foot { font-size: 10.5px; color: var(--ksl-muted); margin-top: 1px; }

/* 회차 대비 증감 칩(#94 — "비교가 없다" 피드백 대응). 방향(▲▼)만 표시하고 색으로 좋다/나쁘다를
   암시하지 않는다(가치판단 금지 규칙) — 항상 중립 muted 톤. 이전 회차가 없으면 아예 렌더하지 않고
   (JS에서 빈 문자열), 비교는 가능하지만 값 자체가 없을 때만 "—"(ksl-kpi-delta-na). */
#kakaoShoppingLiveView .ksl-kpi-delta {
  font-size: 11px; font-weight: 700; color: var(--ksl-text-2);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
#kakaoShoppingLiveView .ksl-kpi-delta-na { color: var(--ksl-muted); font-weight: 600; }

/* 타일 강조(--lg)는 폐기 — 어느 지표가 중요한지는 회차·상황마다 달라 임의 선정이 오히려
   혼란스럽다는 피드백. 모든 타일이 같은 배경·같은 크기다(#94). 클래스는 남겨두되 무효. */

/* 회차 선택 칩 — 한 줄 가로 캐러셀(#37 후속). 최신 회차가 왼쪽(desc 정렬 그대로), 넘치면 좌우 화살표 + 트랙패드 스크롤. */
#kakaoShoppingLiveView .ksl-rt-carousel { position: relative; margin-bottom: 16px; }
/* 회차 칩 줄과 아래 첫 카드가 붙어 칩이 카드에 파묻히던 문제(#94).
   여백이 .ksl-rt-carousel에만 있었는데 이 화면은 그 래퍼를 안 써서 0이었다. */
#kakaoShoppingLiveView .ksl-roundtabs { margin-bottom: 20px; }
#kakaoShoppingLiveView .ksl-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;
}
#kakaoShoppingLiveView .ksl-roundtabs::-webkit-scrollbar { width: 0; height: 0; }
#kakaoShoppingLiveView .ksl-rt-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--ksl-border-strong);
  background: var(--ksl-surface);
  color: var(--ksl-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);
}
#kakaoShoppingLiveView .ksl-rt-prev { left: 0; }
#kakaoShoppingLiveView .ksl-rt-next { right: 0; }
#kakaoShoppingLiveView .ksl-rt-arrow:hover { border-color: var(--ksl-muted); color: var(--ksl-text); }
#kakaoShoppingLiveView .ksl-rt-arrow.is-disabled { opacity: .35; cursor: default; pointer-events: none; }
#kakaoShoppingLiveView .ksl-rt-arrow.is-hidden { display: none; }
#kakaoShoppingLiveView .ksl-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(--ksl-border-strong);
  background: var(--ksl-surface);
  cursor: pointer;
  transition: all .12s;
}
#kakaoShoppingLiveView .ksl-rt:hover { border-color: var(--ksl-muted); }
#kakaoShoppingLiveView .ksl-rt-d { font-size: 13.5px; font-weight: 800; color: var(--ksl-text); }
#kakaoShoppingLiveView .ksl-rt-m { font-size: 11.5px; color: var(--ksl-muted); font-weight: 600; }
#kakaoShoppingLiveView .ksl-rt.is-on { background: var(--ksl-accent-tint); border-color: var(--ksl-yellow-deep); box-shadow: inset 0 0 0 1px var(--ksl-yellow-deep); }
#kakaoShoppingLiveView .ksl-rt.is-on .ksl-rt-d,
#kakaoShoppingLiveView .ksl-rt.is-on .ksl-rt-m { color: var(--ksl-accent-dark); }
#kakaoShoppingLiveView .ksl-rt-live {
  position: absolute; top: -8px; right: 10px;
  font-size: 9.5px; font-weight: 800; color: #fff;
  background: var(--ksl-accent-dark); padding: 2.5px 7px; border-radius: 999px;
  box-shadow: 0 2px 5px rgba(1, 122, 55, .35);
}

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

/* 카카오 성과 히어로는 네이버(채널별 매출 구성 도넛)와 달리 보여줄 "구성 분할"이 없어 우측 열 없이
   1열로 쓴다(#94 — "결론이 없다" 피드백 대응). 오른쪽 보더/배경만 무효화. */
#kakaoShoppingLiveView .ksl-hero.ksl-hero-1col { grid-template-columns: 1fr; }
#kakaoShoppingLiveView .ksl-hero.ksl-hero-1col .ksl-hero-left { border-right: 0; }

#kakaoShoppingLiveView .ksl-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--ksl-r-pill);
}
#kakaoShoppingLiveView .ksl-pill-ok { color: var(--ksl-accent-dark); background: var(--ksl-accent-tint); border: 1px solid #F0DFA0; }
#kakaoShoppingLiveView .ksl-pill-fix { color: var(--ksl-warn); background: var(--ksl-warn-tint); border: 1px solid var(--ksl-warn-border); }
#kakaoShoppingLiveView .ksl-pill-mute { color: var(--ksl-text-2); background: var(--ksl-surface-alt); border: 1px solid var(--ksl-border); }
/* 히어로 태그 중 마진처럼 음수인 값 — 가치판단 색(초록=좋음 식) 없이 기존 --ksl-neg 톤만 옅게 재사용 */
#kakaoShoppingLiveView .ksl-pill-neg { color: var(--ksl-neg); background: rgba(192, 57, 43, .08); border: 1px solid rgba(192, 57, 43, .25); }

#kakaoShoppingLiveView .ksl-rt-title { font-size: 13px; color: var(--ksl-muted); font-weight: 600; margin-bottom: 14px; }
#kakaoShoppingLiveView .ksl-compose { height: 30px; display: flex; gap: 3px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
#kakaoShoppingLiveView .ksl-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;
}
#kakaoShoppingLiveView .ksl-c1 { background: #2a78d6; }
#kakaoShoppingLiveView .ksl-c2 { background: #1baf7a; }
#kakaoShoppingLiveView .ksl-c3 { background: #eda100; }
#kakaoShoppingLiveView .ksl-clegend { display: flex; flex-direction: column; gap: 9px; }
#kakaoShoppingLiveView .ksl-legend-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
#kakaoShoppingLiveView .ksl-dot { width: 10px; height: 10px; border-radius: 3px; }
#kakaoShoppingLiveView .ksl-nm { color: var(--ksl-text-2); flex: 1; }
#kakaoShoppingLiveView .ksl-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
#kakaoShoppingLiveView .ksl-pct { color: var(--ksl-muted); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

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

/* 회차별 기록 표 */
#kakaoShoppingLiveView .ksl-thead-bar { display: flex; align-items: center; gap: 10px; padding: 18px 24px 12px; }
#kakaoShoppingLiveView .ksl-thead-bar h3 { flex: 1; font-size: 16px; font-weight: 800; }
#kakaoShoppingLiveView table.ksl-table tbody tr.ksl-clk { cursor: pointer; }
#kakaoShoppingLiveView table.ksl-table tbody tr.is-on td { background: var(--ksl-accent-tint); }
#kakaoShoppingLiveView table.ksl-table tbody tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--ksl-accent); }
#kakaoShoppingLiveView td.ksl-pos { color: var(--ksl-accent-dark); font-weight: 800; }
/* 음수 값(마진·마진율) — 표 셀·KPI 숫자 어디에 붙어도 동작하도록 클래스 단독으로도 정의(#94). */
#kakaoShoppingLiveView .ksl-neg { color: var(--ksl-neg); }
#kakaoShoppingLiveView td.ksl-neg { color: var(--ksl-neg); font-weight: 800; }
#kakaoShoppingLiveView td.ksl-mult { font-weight: 800; color: var(--ksl-text); }
#kakaoShoppingLiveView .ksl-mini { display: flex; gap: 2px; height: 22px; width: 100%; border-radius: 5px; overflow: hidden; }
#kakaoShoppingLiveView .ksl-mini i { display: flex; align-items: center; justify-content: center; min-width: 0; }
#kakaoShoppingLiveView .ksl-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;
}
#kakaoShoppingLiveView .ksl-badge-ok { color: var(--ksl-accent-dark); background: var(--ksl-accent-tint); }

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

/* 상품 랭킹 표(15행) — 상품명이 60자 넘는 경우가 많아 고정 열 폭 + 말줄임으로 정리(#94).
   숫자 열은 등폭 느낌(font-variant-numeric은 table.ksl-table 공통 규칙에 이미 적용)으로 자릿수 비교.
   넓은 화면(카드 폭이 늘어날수록 상품명 열도 %만큼 함께 넓어짐)에서는 대부분 전체 노출, 좁을 땐
   말줄임 + title(hover)로 전체 텍스트 확인. */
#kakaoShoppingLiveView table.ksl-rank-table { table-layout: fixed; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(1),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(1) { width: 7%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(2),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(2) { width: 39%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(3),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(3) { width: 13%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(4),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(4) { width: 10%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(5),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(5) { width: 10%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(6),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(6) { width: 13%; }
#kakaoShoppingLiveView table.ksl-rank-table th:nth-child(7),
#kakaoShoppingLiveView table.ksl-rank-table td:nth-child(7) { width: 8%; }
#kakaoShoppingLiveView .ksl-prodname {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}

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

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

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

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

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

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

/* 매출 · 비용 구성(10행) 재구성(#94) — 라벨↔금액이 카드 폭(실측 1,480px) 끝과 끝으로 벌어지던 문제를
   "매출 흐름"(총주문액·취소액·순매출)과 "차감 항목"(원가·수수료·배송비·마케팅비) 두 그룹으로 나눠
   넓은 화면(≥901px)에서 2열로 배치해 해결한다. 각 열 자체도 max-width로 한 번 더 좁혀 그 안에서도
   라벨·값이 너무 벌어지지 않게 한다. 마진 · 마진율은 소계가 아니라 "결과"이므로 표 밖으로 빼
   하단에 큰 숫자 요약 바(.ksl-cost-summary)로 분리해 위계를 준다. */
/* align-items:start — 두 열의 행 수가 다르므로(매출 흐름 3행 vs 차감 5행) 늘려 맞추지 않고
   각자 내용만큼만 차지하게 한다. stretch면 짧은 왼쪽 열 아래에 빈 공간이 크게 남는다(#94). */
#kakaoShoppingLiveView .ksl-cost-grid { display: grid; grid-template-columns: 1fr; column-gap: 48px; align-items: start; }
#kakaoShoppingLiveView .ksl-cost-col { display: flex; flex-direction: column; max-width: 460px; min-width: 0; }
#kakaoShoppingLiveView .ksl-cost-col .ksl-kv-row:first-child { border-top: 0; padding-top: 2px; }
/* 차감 항목 — 라벨 앞 "−" 표시 + 들여쓰기 + 값 톤 낮춤(muted 계열)으로 "빼는 돈"임을 시각적으로 구분 */
#kakaoShoppingLiveView .ksl-kv-row--deduct .ksl-kv-k { color: var(--ksl-muted); padding-left: 13px; position: relative; }
#kakaoShoppingLiveView .ksl-kv-row--deduct .ksl-kv-k::before {
  content: "−"; position: absolute; left: 0; top: 0; color: var(--ksl-muted); font-weight: 700;
}
#kakaoShoppingLiveView .ksl-kv-row--deduct .ksl-kv-v { color: var(--ksl-text-2); font-weight: 600; font-size: 13.5px; }
/* 순매출 — 매출 흐름 열의 소계. 연노랑 tint 배경으로 카드 안에서 한 번 더 강조 */
#kakaoShoppingLiveView .ksl-kv-row--total {
  margin-top: 6px; padding: 10px 12px; border-top: 0;
  background: var(--ksl-accent-tint); border-radius: 10px;
}
#kakaoShoppingLiveView .ksl-kv-row--total .ksl-kv-k { color: var(--ksl-accent-dark); font-weight: 700; }
#kakaoShoppingLiveView .ksl-kv-row--total .ksl-kv-v { color: var(--ksl-accent-dark); font-size: 16px; font-weight: 800; }

/* 마진 · 마진율 — 표에서 분리된 최종 결과 요약 바. 굵은 구분선으로 위 두 열과 끊고, 큰 숫자로 결론만
   보이게 한다. 음수는 절제된 옅은 배경 칩으로만 감싸 화면을 지배하지 않되 명확히 구분되게(#94 6번). */
#kakaoShoppingLiveView .ksl-cost-summary {
  display: flex; flex-wrap: wrap; gap: 36px;
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ksl-border-strong);
}
#kakaoShoppingLiveView .ksl-cost-summary-item { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
#kakaoShoppingLiveView .ksl-cost-summary-k { font-size: 12.5px; font-weight: 700; color: var(--ksl-muted); }
#kakaoShoppingLiveView .ksl-cost-summary-v {
  font-size: 25px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ksl-accent-dark);
}
#kakaoShoppingLiveView .ksl-cost-summary-v.ksl-neg {
  color: var(--ksl-neg); background: rgba(192, 57, 43, .08);
  padding: 2px 10px; border-radius: 8px; display: inline-block;
}

/* 단계별 매출 — 방송전/중/후 막대가 카드 풀폭(1,480px 실측)에 걸쳐 얇고 긴 선처럼 보이던 문제를
   막대 그룹 자체 폭을 읽기 좋은 값으로 제한해 해결(#94). */
#kakaoShoppingLiveView #kslStageBody { max-width: 640px; display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 901px) {
  /* 넓은 화면에선 3열 — 매출 흐름(3행) / 차감(5행) / 마진 결과. 2열이면 행 수 차이(3 vs 5)로
     왼쪽 아래에 빈 공간이 크게 남아, 하단에 있던 마진 요약을 세 번째 열로 올려 그 자리를 채운다(#94). */
  #kakaoShoppingLiveView .ksl-cost-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr); }
  #kakaoShoppingLiveView .ksl-cost-grid > .ksl-cost-summary {
    margin-top: 0; padding-top: 0; border-top: 0;
    flex-direction: column; gap: 18px; align-self: center;
  }
}

@media (max-width: 900px) {
  /* 1열로 접히면 마진 요약은 세 번째 "열"이 아니라 맨 아래 결과 바로 돌아간다(구분선 복원). */
  #kakaoShoppingLiveView .ksl-cost-grid > .ksl-cost-summary {
    margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ksl-border-strong);
    flex-direction: row; gap: 36px;
  }
  #kakaoShoppingLiveView .ksl-detail-grid { grid-template-columns: 1fr; }
  #kakaoShoppingLiveView .ksl-drow { grid-template-columns: 14px 1fr 78px; }
  #kakaoShoppingLiveView .ksl-drank-val small { display: block; }
}

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

@media (max-width: 640px) {
  #kakaoShoppingLiveView .ksl-card.ksl-pad { padding: 18px 16px; }
  #kakaoShoppingLiveView .ksl-pagehead { margin: 18px 0 10px; }
  /* 모바일 — KPI 아이템 간격을 좁혀 375px 폭에서도 2열이 확실히 유지되게(#94) */
  #kakaoShoppingLiveView .ksl-kpi-grid { gap: 10px; }
  #kakaoShoppingLiveView .ksl-kpi-item { padding: 13px 14px 11px; }
  #kakaoShoppingLiveView .ksl-cost-summary { gap: 24px; }
  /* 2열 폭(약 140px)에서 2줄로 줄바꿈되더라도 카드가 과하게 높아지지 않게 폰트를 살짝 줄인다. */
  #kakaoShoppingLiveView .ksl-kpi-v { font-size: 17px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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