/*
 * 광고캠페인관리 상단 대시보드 (2026-08-09)
 *   퍼널 · 14일 추이 · 주의 목록 · 전환율 순위. 접기/펼치기(localStorage 기억).
 *   헤더 컨트롤은 대시보드 섹션 공용(.dsc-*, _dash_section_controls.css)을 그대로 재사용한다.
 *
 * 차트는 Chart.js 가 아니라 **CSS 막대**다 — 14개 막대에 라이브러리를 끌어올 이유가 없고,
 * turbo-frame 안에서 canvas 재초기화 문제도 피한다.
 */

.adcd { border: 1px solid #e5e7eb; border-radius: 14px; background: linear-gradient(180deg, #fbfcfe, #fff); margin-bottom: 18px; overflow: hidden; }
.adcd-body { padding: 14px 16px 16px; }
.adcd.is-collapsed .adcd-body,
.adcd.is-collapsed .dsc-meta { display: none; }
.adcd .dsc-head { margin-bottom: 0; padding: 14px 16px 0; }
.adcd .dsc-meta { padding: 0 16px; }
/* ⚠접힌 상태에서는 본문·설명줄이 사라져 헤더가 카드 아래 테두리에 붙는다 → 아래 여백을 헤더가 진다. */
.adcd.is-collapsed .dsc-head { padding-bottom: 14px; }
.adcd-toggle { font-family: inherit; font-size: 11.5px; font-weight: 700; color: #6b7280; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.adcd-toggle:hover { color: #3e6187; border-color: #c7d5e5; }

/* ── 퍼널 ───────────────────────────────────────────────── */
.adcd-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.adcd-fn { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 13px; min-width: 0; }
.adcd-fn::after { content: "›"; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 17px; font-weight: 700; z-index: 1; }
.adcd-fn:last-child::after { display: none; }
.adcd-fn.is-muted { background: #f9fafb; }
.adcd-fn-k { font-size: 11px; font-weight: 700; color: #6b7280; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.adcd-fn-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #94a3b8); font-style: normal; flex-shrink: 0; }
.adcd-fn-v { font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--c, #111827); }
.adcd-fn.is-muted .adcd-fn-v { color: #9ca3af; }
.adcd-fn-s { font-size: 11px; color: #9ca3af; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adcd-fn-s b { font-weight: 700; }
.adcd-up { color: #059669; } .adcd-down { color: #e11d48; } .adcd-flat { color: #9ca3af; }
.adcd-wait { display: inline-block; font-size: 10px; font-weight: 800; color: #d97706; background: #fffbeb; border: 1px solid #fde68a; border-radius: 99px; padding: 1px 7px; margin-top: 4px; }

/* ── 추이 ─────────────────────────────────────────────────
   홈 대시보드 「최근 14일 추이」와 같은 Chart.js 차트(DB 유입 막대 + 실적 라인).
   ⚠자체 CSS 막대(2026-08-09 초기 구현)는 폐기했다 — %높이가 부모 높이에 의존해
     레이아웃이 조금만 바뀌어도 선으로 무너진다. 캔버스는 그 위험이 없다. */
.adcd-trend { margin-top: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 13px 14px; }
.adcd-trend-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.adcd-trend-h b { font-size: 12.5px; font-weight: 700; }
.adcd-trend-h span { font-size: 11px; color: #9ca3af; }
/* Chart.js 는 maintainAspectRatio:false — 부모 높이가 곧 차트 높이다. */
.adcd-canvas { position: relative; height: 220px; }

/* ── 주의 · 순위 ────────────────────────────────────────── */
.adcd-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-top: 14px; }
.adcd-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 13px 14px; }
.adcd-panel h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.adcd-cnt { font-size: 11px; font-weight: 700; color: #fff; background: #9ca3af; border-radius: 99px; padding: 1px 7px; }
.adcd-cnt.is-warn { background: #d97706; }
.adcd-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px dashed #eef0f3; }
.adcd-item:last-child { border-bottom: 0; padding-bottom: 0; }
.adcd-ic { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px; }
.adcd-ic.w { background: #d97706; } .adcd-ic.i { background: #60a5fa; } .adcd-ic.g { background: #cbd5e1; }
.adcd-tx { min-width: 0; flex: 1; }
.adcd-tx b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adcd-tx span { display: block; font-size: 11.5px; color: #6b7280; margin-top: 1px; }
.adcd-empty { font-size: 12px; color: #9ca3af; padding: 14px 0; text-align: center; }
.adcd-rank { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed #eef0f3; }
.adcd-rank:last-child { border-bottom: 0; }
.adcd-rank .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; }
.adcd-rank .v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adcd-rank .v small { font-weight: 500; color: #9ca3af; font-size: 10.5px; margin-left: 3px; }
.adcd-rank-h { font-size: 11px; font-weight: 700; margin: 0 0 4px; }
.adcd-rank-h.up { color: #059669; } .adcd-rank-h.dn { color: #e11d48; margin-top: 10px; }

/* ── 로딩 ───────────────────────────────────────────────── */
.adcd-skel { padding: 26px 16px; text-align: center; color: #9ca3af; font-size: 12.5px; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .adcd-cols { grid-template-columns: 1fr; }
  .adcd-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adcd-fn::after { display: none; }
  .adcd-fn-v { font-size: 21px; }
}
@media (max-width: 760px) {
  .adcd .dsc-head { padding: 12px 12px 0; }
  .adcd .dsc-meta { padding: 0 12px; }
  .adcd-body { padding: 12px; }
  .adcd-canvas { height: 180px; }
}
@media (max-width: 430px) {
  .adcd-funnel { grid-template-columns: 1fr 1fr; }
}