/* ════════════════════════════════════════════════════════════════
   데일리 전체 매출·비용 표(.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); }
/* ROAS·공헌이익·공헌이익율 — 한 묶음으로 강조(굵게) + 묶음 위 구분선으로 매출 그룹과 분리 */
.grid-daily tr.d-roas   td.num,
.grid-daily tr.d-margin td.num,
.grid-daily tr.d-rate   td.num { font-weight: 700; color: #1A1D21; }
.grid-daily tr.d-roas   th.dlabel,
.grid-daily tr.d-margin th.dlabel,
.grid-daily tr.d-rate   th.dlabel { color: #1A1D21; font-weight: 700; }
/* 성과 묶음(ROAS·공헌이익) 위 구분선 = 비용 그룹과의 경계. 2px로 통일(사용자 지시 2026-07-20).
   전체 채널의 4개 표는 비용 합계 '다음 행'이 서로 달라 그 경계선 굵기가 제각각이었다:
     퍼포먼스=ROAS(d-roas, 2px) / 전체·시스템=공헌이익(d-subtotal, 1px) / 공구=공헌이익(선 없음).
   경계선은 ROAS가 있으면 ROAS가, 없으면 공헌이익이 그리므로 둘 다 2px로 맞춘다.
   ※ d-margin이 d-subtotal과 함께 쓰이는 표(전체·시스템)에서는 이 규칙이 뒤에 와서 1px을 덮는다. */
.grid-daily tr.d-roas > *,
.grid-daily tr.d-margin > * { border-top: 2px solid var(--line-strong); }
/* 단, ROAS 바로 아래 공헌이익은 같은 성과 묶음이라 사이에 선을 넣지 않는다(퍼포먼스 표 기존 모습 유지). */
.grid-daily tr.d-roas + tr.d-margin > * { border-top: 0; }
/* ── 데일리 세부 행 접기(아코디언) ──
   합계 행(매출 합계·비용 합계) 라벨 셀 클릭으로 세부 행(매출 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: 800; color: #1A1D21; }
.grid-daily tr.d-ad-subtotal td.num { font-weight: 800; color: #1A1D21; }
/* 접힘 시 zebra 재계산(지원 브라우저) — 숨긴 행을 건너뛰고 보이는 행 기준 홀짝 유지.
   td.num:not(.neg-cell) — :nth-child(... of :not(.d-collapsed)) 안의 :not() 인자가 특이도에 가산되어
   (0,5,3)이 되면서 월합계 음수셀 오버라이드 규칙(.grid-daily tbody.daily-body td.num.month-total.neg-cell,
   common.css, (0,5,2))보다 특이도가 높아 배경을 덮어버리던 버그. neg-cell 셀은 이 규칙 매칭에서 제외해
   음수 배경 규칙이 항상 이기도록 함(product-block/tfoot의 :not(.neg-cell) 관례와 동일). */
@supports selector(tr:nth-child(1 of .x)) {
  .grid-daily tbody.daily-body tr:nth-child(odd of :not(.d-collapsed)) td.num:not(.neg-cell),
  .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:not(.neg-cell),
  .grid-daily tbody.daily-body tr:nth-child(even of :not(.d-collapsed)) th.dlabel { background: #FAFBFC; }
}
/* 데일리 표 sticky 그림자(가로 스크롤 시) — 좌측 고정 그룹(항목 + 합계 열) 우측 끝 + 상단 헤더.
   2026-07-20: 카드 ID를 하나씩 나열하던 방식(#dailyCard / allchannel.css의 #acDailyCard·
   #acPerfDailyCard·#acSysDailyCard)을 걷어내고 **.can-scroll-x 가 붙은 모든 데일리 표**에 적용한다.
   ID 나열 방식이라 표가 늘 때마다 빠졌다 — 공구(acGongguDailyCard)·시스템 메뉴(sysDailyCard)·
   퍼포먼스의 mktCard·tableCard에 그림자가 없어 표마다 모습이 달랐다(사용자 지시로 통일).
   can-scroll-x 는 각 표 JS가 가로 스크롤 가능할 때만 붙이므로 조건도 동일하다. */
.can-scroll-x .grid-daily td.num.month-total {
  box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10);
}
.can-scroll-x .grid-daily thead th.date {
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, .08);
}
.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); }

/* 비용 비율 커스텀 말풍선(네이티브 title 대체 — 즉시 표시·가독성). daily-table.js wireCostTip이
   body에 1개 생성, 커서 근처(position:fixed)로 이동. pointer-events:none으로 hover 깜빡임 방지. */
.daily-cost-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: rgba(21, 128, 61, .96); color: #fff;
  padding: 5px 9px; border-radius: 6px;
  font-size: 10px; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  opacity: 1; transition: opacity 80ms ease;
}
.daily-cost-tip[hidden] { display: none; }