/* ════════════════════════════════════════════════════════════════
   데일리 전체 매출·비용 표(.grid-daily) 전용 스타일 — static/js/daily-table.js 짝.
   · index.html §2.5(#dailyCard/#gridDaily) 마크업에 그대로 적용.
   · .grid 공통(날짜/월합계 헤더·zebra·음수셀·세로 구분선)은 index.html에 잔류 —
     여기는 .grid-daily 전용(항목 단일열 sticky·행 위계색·아코디언·셰브론·sticky 그림자)만.
   · 분리 전 index.html 인라인 <style>의 .grid-daily 블록과 100% 동일.
   ════════════════════════════════════════════════════════════════ */

/* 데일리 표(.grid-daily)는 라벨 열이 항목 1개(--col-daily-label) — month-total left 오버라이드.
   (.grid 공통 td.num.month-total/thead th.month-total 규칙은 index.html 잔류, 여기서 left만 재지정.) */
.grid-daily thead th.month-total { left: var(--col-daily-label); }
.grid-daily td.num.month-total { left: var(--col-daily-label); }

/* ════════ 데일리 전체 매출·비용 표(.grid-daily) ════════
   제품 열 없이 항목(지표) 단일 sticky 좌측열만. 날짜/월합계 헤더·zebra·음수셀은 .grid 공통 규칙 재사용.
   제품 열이 없으므로 좌측 항목열 헤더(corner-dlabel)/본문(th.dlabel)을 left:0에 고정한다. */
.grid-daily thead th.corner-dlabel {
  position: sticky; top: 0; left: 0; z-index: 30;
  background: var(--thead-bg); text-align: center;
  width: var(--col-daily-label); min-width: var(--col-daily-label); max-width: var(--col-daily-label);
  font-weight: 700; color: var(--charcoal);
  border-right: 1px solid var(--line-strong);
}
.grid-daily th.dlabel {
  position: sticky; left: 0; z-index: 10;
  background: var(--surface);
  text-align: left;
  width: var(--col-daily-label); min-width: var(--col-daily-label); max-width: var(--col-daily-label);
  font-size: 11px; font-weight: 600; color: var(--text-2);
  border-right: 1px solid var(--line-strong);
}
/* 본문 zebra(행 단위) — 제품 블록이 없으므로 tbody.daily-body 내 tr 홀짝으로 직접 */
.grid-daily tbody.daily-body tr:nth-child(odd)  td.num,
.grid-daily tbody.daily-body tr:nth-child(odd)  th.dlabel { background: #FFFFFF; }
.grid-daily tbody.daily-body tr:nth-child(even) td.num,
.grid-daily tbody.daily-body tr:nth-child(even) th.dlabel { background: #FAFBFC; }
/* 매출 세부 채널 행(자사몰/스마트스토어/쿠팡로켓) — 보조(살짝 연하게, 들여쓰기로 세부 구분) */
.grid-daily tr.d-sales td.num { font-weight: 500; color: #3A4148; }
.grid-daily tr.d-sales th.dlabel { color: #3A4148; font-weight: 600; padding-left: 22px; }
/* 비용 행 — 보조(연하게) */
.grid-daily tr.d-cost td.num { font-weight: 500; color: #4A5159; }
.grid-daily tr.d-cost th.dlabel { color: #4A5159; padding-left: 22px; }
/* 합계 행(매출 합계·비용 합계) — 세부 행보다 진하게, 그룹 머리(부모-위 아코디언)로 구분선.
   라벨은 들여쓰기 없이(세부 행만 들여쓰기) 합계임을 또렷이. */
.grid-daily tr.d-subtotal td.num { font-weight: 700; color: #1A1D21; }
.grid-daily tr.d-subtotal th.dlabel { color: #1A1D21; font-weight: 700; padding-left: 12px; }
.grid-daily tr.d-subtotal > * { border-top: 1px solid var(--line-strong); }
/* 비용 그룹 머리(비용 합계) 위에 굵은 구분선(매출↔비용 경계) */
.grid-daily tr.d-cost-first > * { border-top: 2px solid var(--line-strong); }
/* 마진/마진율 행 — 강조(굵게), 비용 아래. 위에 구분선(비용↔마진 경계) */
.grid-daily tr.d-margin td.num,
.grid-daily tr.d-rate   td.num { font-weight: 700; color: #1A1D21; }
.grid-daily tr.d-margin th.dlabel,
.grid-daily tr.d-rate   th.dlabel { color: #1A1D21; font-weight: 700; }
.grid-daily tr.d-margin > * { border-top: 2px solid var(--line-strong); }
/* ── 데일리 세부 행 접기(아코디언) ──
   합계 행(매출 합계·비용 합계) 라벨 셀 클릭으로 세부 행(매출 3행/비용 7행) display 토글.
   값·계산은 그대로(표시만 접음). 셰브론: 라벨 오른쪽 가는 선 SVG(⌄ 펼침, 접힘 시 -90° 회전=›) —
   프로필 캐럿(.ph-caret)과 동일 스타일(stroke·round), 작고 은은하게. */
.grid-daily tr.d-collapsed { display: none; }
.grid-daily th.dlabel.d-toggle { cursor: pointer; user-select: none; -webkit-user-select: none; }
.grid-daily th.dlabel.d-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.d-chev {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px; vertical-align: -1px; color: var(--muted);
  transition: transform .16s ease, color .16s ease;
}
.d-chev svg {
  width: 11px; height: 11px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.grid-daily th.dlabel.d-toggle:hover .d-chev,
.grid-daily th.dlabel.d-toggle:focus-visible .d-chev { color: var(--brand); }
.grid-daily th.dlabel.d-toggle.is-collapsed .d-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .d-chev { transition: none; } }
/* 광고 채널 세부 행(메타~카카오플친) — 광고비용 소계의 하위, 한 단계 더 들여쓰기 */
.grid-daily tr.d-ad th.dlabel { padding-left: 24px; color: #5A626B; }
.grid-daily tr.d-ad td.num { color: #5A626B; }
.grid-daily tr.d-ad th.dlabel::before { content: "- "; color: var(--muted); }
/* 광고비용 소계 행 — 비용 톤 유지 + 묶음 마무리로 살짝 또렷(전체 합계보단 약하게) */
.grid-daily tr.d-ad-subtotal th.dlabel { font-weight: 700; }
.grid-daily tr.d-ad-subtotal td.num { font-weight: 600; }
/* 접힘 시 zebra 재계산(지원 브라우저) — 숨긴 행을 건너뛰고 보이는 행 기준 홀짝 유지 */
@supports selector(tr:nth-child(1 of .x)) {
  .grid-daily tbody.daily-body tr:nth-child(odd of :not(.d-collapsed)) td.num,
  .grid-daily tbody.daily-body tr:nth-child(odd of :not(.d-collapsed)) th.dlabel { background: #FFFFFF; }
  .grid-daily tbody.daily-body tr:nth-child(even of :not(.d-collapsed)) td.num,
  .grid-daily tbody.daily-body tr:nth-child(even of :not(.d-collapsed)) th.dlabel { background: #FAFBFC; }
}
/* 데일리 표 sticky 그림자(가로 스크롤 시) — 좌측 고정 그룹(항목 + 합계 열) 우측 끝 + 상단 헤더.
   (#dailyCard도 .table-card라 .grid 공통 그림자 규칙이 동일 적용 — 여기선 specificity 보강만) */
#dailyCard.can-scroll-x .grid-daily td.num.month-total {
  box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10);
}
#dailyCard.can-scroll-x .grid-daily thead th.date {
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, .08);
}
#dailyCard.can-scroll-x .grid-daily thead th.month-total {
  box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .08);
}

/* ── 비용 세분화 세부행(2차 드롭다운) ──
   비용 대분류(인플루언서/제작비/리뷰작업/체험단) 라벨 클릭 시 소분류(소재·작업 단위) 세부행 토글.
   zebra 규칙보다 뒤에 와야 배경색을 이김(세부행은 회색 톤으로 대분류와 구분). */
.grid-daily tr.d-cost-sub th.dlabel.d-sub-label {
  padding-left: 24px; font-weight: 600; color: #5A626B; font-size: 11px;
  white-space: nowrap; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; max-width: var(--col-daily-label);
}
.grid-daily tr.d-cost-sub th.dlabel.d-sub-label::before { content: "- "; color: var(--muted); }
.grid-daily tr.d-cost-sub td.num,
.grid-daily tr.d-cost-sub th.dlabel { background: #F4F6F8; }
.grid-daily tr.d-cost-sub td.num { font-weight: 500; color: #5A626B; }
.grid-daily th.dlabel.d-cost-toggle { cursor: pointer; user-select: none; -webkit-user-select: none; }
.grid-daily th.dlabel.d-cost-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.grid-daily th.dlabel.d-cost-toggle:hover .d-chev,
.grid-daily th.dlabel.d-cost-toggle:focus-visible .d-chev { color: var(--brand); }
.grid-daily th.dlabel.d-cost-toggle.is-collapsed .d-chev { transform: rotate(-90deg); }