/* static/css/system-channel.css — 시스템 채널 뷰 스타일
   퍼포먼스 형식 컴포넌트를 sys- 접두사로 복제해 #systemView 안에 렌더.
   뷰 전환(switchView("system"))으로 .container에 view-system 클래스가 붙으면
   퍼포먼스 직계 섹션을 숨기고 #systemView만 노출(cost.css의 view-cost 패턴과 동일). */

.container.view-system > .section:not(#systemView),
.container.view-system > #bannerSlot,
.container.view-system > #emptySlot {
  display: none;
}

/* 시스템 채널 헤더 */
#systemView .sys-head {
  margin: 2px 0 14px;
}
#systemView .sys-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text, #1f2328);
}
#systemView .sys-sub {
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin: 4px 0 0;
}

/* ② 시스템 매출 목표 — 퍼포먼스와 동일 레이아웃: 시스템 합계(왼쪽 pt-total) + 채널 그리드(오른쪽).
   pt-grid 1.15fr 2fr 좌우 분할, pt-ch-group은 2열(판매가/공급가 위, 팝업 아래). 퍼포먼스 카드엔 무영향. */
#sysPtBody .pt-grid { grid-template-columns: 1.15fr 2fr; }
#sysPtBody .pt-channels { padding: 6px; }
#sysPtBody .pt-ch-group { grid-template-columns: 1fr 1fr; gap: 0; }
#sysPtBody .pt-ch { width: 100%; }
/* 게이지 바는 카드가 넓어지므로 폭 100% 유지(기존 pt-gauge가 이미 block 100%지만 명시). */
#sysPtBody .pt-gauge, #sysPtBody .pt-gauge-wrap { width: 100%; }

/* 폰트·크기는 퍼포먼스 채널 카드(.pt-ch, 히어로 24px) 기본값 그대로 — 시스템도 2x2 그리드라 동일 스케일.
   (이전 3채널 1행 때의 pt-total급 스케일업 override는 제거) */

@media (max-width: 640px) {
  #sysPtBody .pt-ch-group { grid-template-columns: 1fr; gap: 8px; }
}

/* ── 성과 표 3종(판매가·공급가·팝업) — 계층형(트리) 지표 행 ──
   지표 라벨 열(th.label.tree-label)에서 depth로 들여쓰기, 토글행(비용/기타비용)에 ▶/▼ 캐럿.
   판매가·공급가도 "비용" 한 행으로 묶고 펼치면 하위 항목이 나온다(#61) → 세 그리드 공통 스코프.
   데일리표(#gridDaily)는 자기 규칙(daily-table.css th.dlabel.d-toggle)을 쓰므로 무영향. */
#sysSaleGrid th.label.tree-label,
#sysSupplyGrid th.label.tree-label,
#sysPopupGrid th.label.tree-label {
  white-space: nowrap;
}
/* 토글 아이콘 — 퍼포먼스 "전체 매출 비용" 데일리표(th.d-toggle)와 완전히 동일한 방식.
   쉐브론은 라벨 텍스트 "오른쪽"(margin-left:5px, daily-table.css .d-chev 기본과 일치),
   기본(펼침)=아래 쉐브론 ⌄, 접힘=-90° 회전 ›. 회전은 th(.tree-toggle.is-collapsed)에 걸린다
   (쉐브론 자체에 is-collapsed를 붙이지 않음 — 정본과 동일). */
#sysSaleGrid th.label.tree-label .d-chev,
#sysSupplyGrid th.label.tree-label .d-chev,
#sysPopupGrid th.label.tree-label .d-chev {
  margin-left: 5px;
  margin-right: 0;
}
#sysSaleGrid th.label.tree-toggle.is-collapsed .d-chev,
#sysSupplyGrid th.label.tree-toggle.is-collapsed .d-chev,
#sysPopupGrid th.label.tree-toggle.is-collapsed .d-chev { transform: rotate(-90deg); }
#sysSaleGrid th.label.tree-label .tree-txt,
#sysSupplyGrid th.label.tree-label .tree-txt,
#sysPopupGrid th.label.tree-label .tree-txt { vertical-align: middle; }
/* 들여쓰기(depth) — 1단계 16px, 2단계 30px. 캐럿 없는 행도 정렬 맞춤. */
#sysSaleGrid th.label.tree-d1,
#sysSupplyGrid th.label.tree-d1,
#sysPopupGrid th.label.tree-d1 { padding-left: 16px; }
#sysPopupGrid th.label.tree-d2 { padding-left: 30px; }
/* 토글 가능한 행(비용·기타비용) — 클릭 가능 표시 */
#sysSaleGrid th.label.tree-toggle,
#sysSupplyGrid th.label.tree-toggle,
#sysPopupGrid th.label.tree-toggle {
  cursor: pointer;
  user-select: none;
}
/* 호버 시 배경 하이라이트 없음 — 정본(daily-table.css th.dlabel.d-toggle:hover)과 동일.
   호버는 쉐브론 색상만 var(--brand)로 바꾼다(정본 라인 75-76). 셀 배경은 불변. */
#sysSaleGrid th.label.tree-toggle:hover .d-chev,
#sysSupplyGrid th.label.tree-toggle:hover .d-chev,
#sysPopupGrid th.label.tree-toggle:hover .d-chev { color: var(--brand, #4A5159); }
#sysSaleGrid th.label.tree-toggle:focus-visible,
#sysSupplyGrid th.label.tree-toggle:focus-visible,
#sysPopupGrid th.label.tree-toggle:focus-visible {
  outline: 2px solid var(--accent, #7C9A72);
  outline-offset: -2px;
}
/* 비용 상위(cost_total)·기타비용(etc_total) 라벨 강조 — 위계 표현 */
#sysSaleGrid tr.m-costtotal th.label,
#sysSupplyGrid tr.m-costtotal th.label,
#sysPopupGrid tr.m-costtotal th.label,
#sysPopupGrid tr.m-etctotal th.label { font-weight: 700; color: #4A5159; }
/* 하위 노드(원가/수수료/인건비/설치철거/기타)는 톤다운 */
#sysPopupGrid tr.m-fee th.label,
#sysPopupGrid tr.m-labor th.label,
#sysPopupGrid tr.m-install th.label,
#sysPopupGrid tr.m-etc th.label { color: #6b7280; font-weight: 500; }
/* 판매가·공급가 표의 하위 비용 항목(원가·배송비·수수료·마케팅비·대행수수료·분담금) 톤다운.
   depth-1 행 전체에 걸어 하위 항목이 늘어도 자동 적용된다. */
#sysSaleGrid tr.depth-1 th.label,
#sysSupplyGrid tr.depth-1 th.label { color: #6b7280; font-weight: 500; }

/* ─── 팝업 회차 관리 모달 (목표 모달 .modal-overlay/.modal-card 룩 재사용) ─── */
/* height를 명시(max-height만이면 콘텐츠가 짧을 때 카드가 쪼그라들어 목록 표시행이 줄어듦) —
   뷰포트에 맞춰 카드를 최대한 키우고, 내부(목록/폼)만 스크롤 */
.pp-card { width: min(1200px, 96vw) !important; max-width: min(1200px, 96vw) !important; height: min(92vh, 920px); max-height: min(92vh, 920px); overflow: hidden; display: flex; flex-direction: column; }
/* 모달 내부 스크롤 — 타이틀·회차추가 버튼·테이블 헤더는 고정, 목록 본문만 스크롤 */
#sysPeriodModal .modal-head { flex: 0 0 auto; }
/* 탭 바(회차 관리 / 지점명 정리) — 목표 모달 .tg-tabs 룩 재사용. 고정, 스크롤 대상 아님 */
#sysPeriodModal .pp-tabs { flex: 0 0 auto; margin-bottom: 12px; }
/* 회차 관리 탭 패널: 내부에 #ppListView/#ppForm(각 flex:1 1 auto)이 들어가는 flex 컬럼 */
#sysPeriodModal #ppTabPeriod { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#sysPeriodModal #ppTabPeriod[hidden] { display: none; }
/* 지점명 정리 탭 패널: 리드문·메시지는 고정, 목록 래퍼만 스크롤 */
#sysPeriodModal #ppTabAlias { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#sysPeriodModal #ppTabAlias[hidden] { display: none; }
#sysPeriodModal #ppTabAlias .pp-alias-lead,
#sysPeriodModal #ppTabAlias #ppAliasMsg { flex: 0 0 auto; }
#sysPeriodModal #ppTabAlias .pp-alias-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 수동 매출 탭 패널: 리드문·입력폼은 고정, 목록 표만 스크롤 */
#sysPeriodModal #ppTabManual { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#sysPeriodModal #ppTabManual[hidden] { display: none; }
#sysPeriodModal #ppTabManual .pp-alias-lead,
#sysPeriodModal #ppTabManual .pp-ms-upload,
#sysPeriodModal #ppTabManual #ppMsForm,
#sysPeriodModal #ppTabManual #ppMsListMsg { flex: 0 0 auto; }
#sysPeriodModal #ppTabManual .pp-ms-listwrap { flex: 0 0 auto; overflow-x: auto; }
#sysPeriodModal #ppListView { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* ⚠ display:flex(author 룰)는 UA의 [hidden]{display:none}보다 항상 우선한다(오리진 순서상 author>UA는
   특이도 무관 절대 우선) → hidden 속성만으로는 안 감춰지는 버그. 아래 [hidden] 오버라이드로 명시 복구.
   (목록추가 클릭 시 폼이 목록 "아래에 추가로" 노출되던 원인 — showPeriodList/openPeriodForm의
   hidden 토글 로직 자체는 정상이었음) */
#sysPeriodModal #ppListView[hidden] { display: none; }
#sysPeriodModal #ppListView .pp-toolbar { flex: 0 0 auto; }
#sysPeriodModal #ppListView .pp-list-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
#sysPeriodModal #ppForm { flex: 1 1 auto; min-height: 0; overflow: auto; }
#sysPeriodModal #ppForm[hidden] { display: none; }
.pp-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.pp-list-wrap { overflow-x: auto; }
/* 스크롤바 비주얼 제거(일체감) — 스크롤 기능은 유지 */
.pp-card, .pp-list-wrap { scrollbar-width: none; -ms-overflow-style: none; }
.pp-card::-webkit-scrollbar, .pp-list-wrap::-webkit-scrollbar { width: 0; height: 0; }
/* 팝업 채널 성과 표 — 지점명 옆 '잠정' 배지(실비 미확정 회차 포함 지점) */
#sysPopupGrid th.prod .pp-prov-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-size: 10px; font-weight: 600; background: #fbf3e6; color: #9a6b23; vertical-align: middle; white-space: nowrap; }
.pp-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-list th, .pp-list td { padding: 7px 9px; border-bottom: 1px solid #eef1f5; text-align: right; white-space: nowrap; }
.pp-list th:first-child, .pp-list td:first-child,
.pp-list th:nth-child(2), .pp-list td:nth-child(2),
.pp-list th:nth-child(3), .pp-list td:nth-child(3) { text-align: left; }
.pp-list thead th { color: #6b7280; font-weight: 600; border-bottom: 1.5px solid #e5e8ee; position: sticky; top: 0; background: #fff; }
.pp-empty { text-align: center !important; color: #9aa2ad; padding: 22px !important; }
.pp-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.pp-final { background: #eaf3ec; color: #3e4d41; }
.pp-pending { background: #fbf3e6; color: #9a6b23; }
.pp-ops { text-align: center !important; }
.pp-ops button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 4px 0 10px; }
.pp-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b7280; }
.pp-grid input, .pp-grid select { padding: 7px 9px; border: 1px solid #d9dee6; border-radius: 8px; font-size: 13px; color: #1f2430; }
.pp-grid .pp-full { grid-column: 1 / -1; }
/* 라벨 옆 보조 설명(정산 기간/판매 기간 구분용) — 라벨보다 옅게, 줄바꿈 없이 */
.pp-grid .pp-hint { color: #9aa1ab; font-weight: 400; font-size: 11.5px; }
.pp-grid .pp-check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: #4b5563; }
.pp-grid .pp-check input { width: auto; }
@media (max-width: 640px) { .pp-grid { grid-template-columns: 1fr; } }

/* ── [지점명 정리] 탭 — 별칭 매핑 목록 ── */
.pp-alias-lead { font-size: 12.5px; color: #6b7280; margin: 0 0 8px; line-height: 1.5; }
.pp-alias-wrap { scrollbar-width: none; -ms-overflow-style: none; padding-right: 2px; }
.pp-alias-wrap::-webkit-scrollbar { width: 0; height: 0; }
.pp-alias-sec { margin-bottom: 18px; }
.pp-alias-sec:last-child { margin-bottom: 2px; }
.pp-alias-h { font-size: 12px; font-weight: 700; color: #4A5159; margin: 0 0 10px; letter-spacing: -.01em; }
.pp-alias-cnt { color: #9aa2ad; font-weight: 600; margin-left: 2px; }
.pp-alias-list { display: flex; flex-direction: column; gap: 7px; }
.pp-alias-row { display: flex; align-items: center; gap: 8px; }
.pp-alias-raw { flex: 0 0 200px; min-width: 0; font-size: 13px; color: #1f2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-alias-arrow { flex: 0 0 auto; color: #9aa2ad; font-size: 13px; }
.pp-alias-input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #d9dee6; border-radius: 8px; font-size: 13px; color: #1f2430; }
.pp-alias-input:focus { outline: none; border-color: #7C9A72; box-shadow: 0 0 0 2px rgba(124,154,114,.18); }
.pp-alias-btn { flex: 0 0 auto; border: 1px solid #d9dee6; background: #fff; color: #4A5159; border-radius: 8px; font-size: 12.5px; font-weight: 600; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.pp-alias-btn:hover { background: #f4f6f4; }
.pp-alias-save { border-color: #7C9A72; background: #7C9A72; color: #fff; }
.pp-alias-save:hover { background: #6d8a64; border-color: #6d8a64; }
.pp-alias-del { color: #b5524f; }
.pp-alias-del:hover { background: #fbeeee; border-color: #e6c6c5; }
.pp-alias-empty { font-size: 12.5px; color: #9aa2ad; padding: 12px 2px; margin: 0; }
@media (max-width: 640px) {
  .pp-alias-row { flex-wrap: wrap; }
  .pp-alias-raw { flex: 1 1 100%; }
  .pp-alias-input { flex: 1 1 auto; }
}

/* ── [수동 매출] 탭 — 입력 폼 + 등록 목록 ── */
.pp-ms-form { margin-bottom: 4px; }
.pp-ms-form .pp-grid { margin: 4px 0 8px; }
/* 목록: .pp-list 룩 재사용. 지점·기간·분류(1~3열) 왼쪽, 매출·공급액·원가(4~6열) 오른쪽 —
   기본 .pp-list가 처음 3열 왼쪽/나머지 오른쪽 처리하므로 별도 정렬 오버라이드 불필요. */
.pp-ms-listwrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.pp-ms-listwrap::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 640px) { .pp-ms-form .pp-grid { grid-template-columns: 1fr; } }

/* ── [수동 매출] 탭 — raw 엑셀 자동 업로드(미리보기→저장) 카드 ── */
.pp-ms-upload { margin: 0 0 14px; padding: 12px 14px; background: #f7f8f6; border: 1px solid #e5e8ee; border-radius: 10px; }
.pp-ms-upload-h { font-size: 12.5px; font-weight: 700; color: #4A5159; margin: 0 0 4px; letter-spacing: -.01em; }
.pp-ms-upload-desc { font-size: 12px; color: #6b7280; margin: 0 0 10px; line-height: 1.5; }
.pp-ms-upload-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.pp-ms-upload-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b7280; }
/* 매장 커스텀 드롭다운(회차 관리 "분류" .table-target 패턴 재사용) — .pp-ms-upload-row 스코프에서만
   높이·라디우스·보더 톤을 옆 3개 컨트롤(엑셀 파일 버튼·캘린더 트리거)과 통일(40px). 전역 .table-target-btn(필 모양)엔 손대지 않음. */
.pp-ms-upload-row .pp-store-target { width: 100%; }
.pp-ms-upload-row .table-target-btn {
  width: 100%; max-width: none; height: 40px; box-sizing: border-box;
  padding: 0 12px; border-radius: 8px; border-color: #d6dae0;
  background: #fff; justify-content: space-between;
}
.pp-ms-upload-row .table-target-btn:hover { background: #f4f6f4; border-color: #c7cdd6; }
.pp-ms-upload-row .table-target-pop { left: 0; right: auto; min-width: 200px; }
/* 커스텀 엑셀 파일 선택 버튼(native input 숨김 + 세이지 톤 버튼 + 파일명) — .pp-ms-upload 스코프 */
.pp-ms-upload .pp-file-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pp-ms-upload .pp-file-btn input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pp-ms-upload .pp-file-btn-label { display: inline-flex; align-items: center; gap: 6px; height: 40px; box-sizing: border-box; padding: 0 14px; border: 1px solid #d6dae0; border-radius: 8px; background: #fff; color: #4A5159; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pp-ms-upload .pp-file-btn:hover .pp-file-btn-label { background: #f4f6f4; border-color: #c7cdd6; }
.pp-ms-upload .pp-file-btn input[type="file"]:focus-visible + .pp-file-btn-label { outline: 2px solid #7C9A72; outline-offset: 1px; }
.pp-ms-upload .pp-file-name { font-size: 12.5px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* 판매 기간·정산일 캘린더 트리거 — 공용 .cal-trigger는 그대로 두고 이 행 안에서만 높이 40px로 고정(다른 화면 회귀 방지) */
.pp-ms-upload-row .cal-trigger { height: 40px; min-height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 8px; border-color: #d6dae0; }
.pp-ms-upload-btns { display: flex; gap: 8px; margin-left: auto; align-items: center; }
/* 전역 .btn-primary의 width:100%가 좁은 flex 공간에서 버튼을 압축해 텍스트가 세로로 깨지던 문제 → 폭 자동·nowrap 고정 */
.pp-ms-upload-btns .btn { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; font-size: 13px; }
.pp-ms-upload #ppMsUpMsg { margin: 8px 0 0; }
.pp-ms-upload #ppMsUpResult { margin-top: 10px; }
.pp-ms-up-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-ms-up-list th, .pp-ms-up-list td { padding: 6px 9px; border-bottom: 1px solid #eef1f5; text-align: right; white-space: nowrap; }
.pp-ms-up-list th:first-child, .pp-ms-up-list td:first-child { text-align: left; }
.pp-ms-up-list thead th { color: #6b7280; font-weight: 600; border-bottom: 1.5px solid #e5e8ee; }
.pp-ms-up-list tfoot td { font-weight: 700; color: #1f2430; border-top: 1.5px solid #e5e8ee; border-bottom: none; }
.pp-ms-up-warn { font-size: 12px; color: #9a6b23; margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 640px) {
  .pp-ms-upload-row { flex-direction: column; align-items: stretch; }
  .pp-ms-upload-btns { margin-left: 0; }
}

/* 회차 폼 — 분류 커스텀 드롭다운(퍼포먼스 .table-target 룩 재사용). 팝오버는 트리거 왼쪽 정렬로 카드 overflow 클립 방지 */
.pp-cat-target { align-self: flex-start; }
.pp-cat-target .table-target-pop { left: 0; right: auto; min-width: 200px; }
/* 회차 폼 — 기간 Cally 트리거 풀폭(pp-full 라벨) */
.pp-cal { position: relative; display: block; }
.pp-cal .cal-trigger { width: 100%; justify-content: space-between; box-sizing: border-box; }

/* ── 팝업 채널 성과 표 — 지점 셀 hover 툴팁(이슈 #36) ──
   그 지점의 회차 정보(기간·분류·수수료율·정산 상태). 네이티브 title 금지(marks.js decorateTable이
   렌더 직후 지움) → data-tip-shop + JS(showShopTip)로 띄우는 body 부착 커스텀 카드.
   perf-channel.css .perf-tip과 동일 룩(어드민 톤 작은 카드)으로 별도 클래스(.pp-shop-tip)로 정의
   — system-channel.css 스코프 유지, perf-channel.css 비의존. */
#sysPopupGrid th.prod.has-tip { cursor: help; }
.pp-shop-tip {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e8ee;
  box-shadow: 0 10px 28px rgba(31, 36, 48, .14);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
.pp-shop-tip .pst-name { font-weight: 800; font-size: 13px; color: #1f2430; margin-bottom: 8px; }
.pp-shop-tip .pst-period + .pst-period { margin-top: 8px; }
.pp-shop-tip .pst-sep { height: 1px; background: #eef1f6; margin: 9px 0; }
.pp-shop-tip .pst-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 3px 0; }
.pp-shop-tip .pst-row span { color: #9aa3b8; white-space: nowrap; }
.pp-shop-tip .pst-row b { font-weight: 700; color: #1f2430; text-align: right; }
.pp-shop-tip .pst-status { padding: 1px 8px; border-radius: 9px; font-size: 11px; }
.pp-shop-tip .pst-status.final { background: #eaf3ec; color: #3e4d41; }
.pp-shop-tip .pst-status.pending { background: #fbf3e6; color: #9a6b23; }

/* ── 데일리표 채널 필터 팝오버(#sysDailyChPop) — 판매가/공급가/팝업 그룹 헤더 라벨 ──
   common.css .ctp-opt/.ctp-sep 룩 그대로 쓰고, 그룹명만 이 파일에서 추가(스코프 유지). */
#sysDailyChPop .ctp-group-label {
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  color: #9aa3b8;
  letter-spacing: .02em;
}
#sysDailyChPop .ctp-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #9aa3b8;
}

/* ── 데일리표 매출 채널 세부 행(#sysGridDaily tr.d-ch) — 판매가/공급가 매출 2단 토글 하위 ──
   daily-table.css .grid-daily tr.d-sales th.dlabel의 padding-left(22px)보다 한 단계(14px) 더
   들여써 "매출 합계 → 판매가/공급가 매출 → 채널" 3단 위계를 구분한다. ID 셀렉터로 specificity 확보. */
#sysGridDaily tr.d-ch th.dlabel {
  padding-left: 36px;
  font-weight: 500;
  color: var(--muted);
}

/* ── 현대홈쇼핑 판매가 기준 상세 모달 ── */
/* 공급가 표(#sysSupplyGrid)의 '현대홈쇼핑' 채널명 셀 — 클릭 가능 힌트(다른 채널 셀은 무관, 기본 스타일 유지) */
#sysSupplyGrid th.prod.hd-link {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
#sysSupplyGrid th.prod.hd-link:hover { color: var(--sage); }
/* 모달 카드 — 팝업 회차 관리 모달(.pp-card)과 같은 폭 확장 패턴, 표만 있어 높이는 더 낮게 */
.hd-card {
  width: min(1000px, 96vw) !important;
  max-width: min(1000px, 96vw) !important;
  max-height: min(88vh, 620px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hd-note {
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hd-scroll { flex: 1 1 auto; min-height: 0; }
.hd-msg {
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}