/*
 * 대시보드 «담당자 노력 대비 실적» (2026-11-02) — 노력(열람·이력) 대비 실적 산점도 + 담당자 상세(rmm 모달 본문).
 * 마크업 = workspace/dashboard/_counselor_effort(.html.erb)·_counselor_effort_detail / 동작 = counselor_effort_controller.js.
 * 색은 전부 토큰(var(--ord-*)) — 라이트/다크 자동. hex 금지(theme_new_files_guard_test).
 */
.dce { padding: 16px 18px; margin-bottom: 16px; }   /* 아래 «캠페인 현황» 카드와 붙지 않게 */
.dce-empty { padding: 40px 0; text-align: center; color: var(--ord-text-4); font-size: 13px; }
.dce-dim { color: var(--ord-text-4); font-weight: 400; }

.dce-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dce-chart { min-width: 0; }
.dce-chartbox { position: relative; border: 1px solid var(--ord-line-soft); border-radius: 12px; background: var(--ord-surface); overflow: hidden; }
.dce-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.dce-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11.5px; color: var(--ord-text-3); }
.dce-legend-avg { margin-left: auto; color: var(--ord-text-4); }
.dce-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dce-legend i.is-good, .dce-dot.is-good { background: var(--ord-solid-green); fill: var(--ord-solid-green); }
.dce-legend i.is-bad, .dce-dot.is-bad { background: var(--ord-solid-red); fill: var(--ord-solid-red); }

/* 산점도 요소 */
.dce-bg { fill: var(--ord-surface); }
.dce-gl { stroke: var(--ord-chart-grid); }
.dce-ax { font-size: 10px; fill: var(--ord-chart-axis); }
.dce-axt { font-size: 11px; fill: var(--ord-text-3); }
.dce-avg { stroke: var(--ord-chart-axis); stroke-dasharray: 4 4; }
.dce-trend { stroke: var(--ord-accent); stroke-width: 2; opacity: .7; }
.dce-pt { cursor: pointer; outline: none; }
.dce-dot { fill-opacity: .88; stroke: var(--ord-surface); stroke-width: 1.5; transition: r .12s, stroke-width .12s; }
.dce-lab { font-size: 11px; fill: var(--ord-text-2); cursor: pointer; paint-order: stroke; stroke: var(--ord-surface); stroke-width: 3px; }
.dce-svg.has-focus .dce-pt { opacity: .28; }
.dce-svg.has-focus .dce-pt.is-hov, .dce-svg.has-focus .dce-pt.is-sel { opacity: 1; }
.dce-pt.is-hov .dce-dot, .dce-pt:focus-visible .dce-dot { r: 9; }
.dce-pt.is-sel .dce-dot { r: 9; stroke: var(--ord-text); stroke-width: 2.5; }
.dce-pt.is-hov .dce-lab, .dce-pt.is-sel .dce-lab { font-weight: 800; fill: var(--ord-text); }

/* 말풍선 */
.dce-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--ord-tooltip-bg); color: var(--ord-on-solid); font-size: 11.5px; line-height: 1.65; box-shadow: 0 8px 24px rgba(15, 23, 42, .28); opacity: 0; transition: opacity .1s; }
.dce-tip.is-on { opacity: 1; }
.dce-tip-nm { font-size: 13px; }
.dce-tip-r { display: flex; justify-content: space-between; gap: 14px; }
.dce-tip-r span:first-child { opacity: .65; }
.dce-tip-up { color: var(--ord-solid-green); font-weight: 800; }
.dce-tip-dn { color: var(--ord-solid-red); font-weight: 800; }
.dce-tip-hint { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .22); opacity: .65; font-size: 10.5px; }

/* 오른쪽 패널 */
.dce-panel { min-width: 0; border: 1px solid var(--ord-line-soft); border-radius: 12px; padding: 14px 16px; background: var(--ord-surface); }
.dce-p-empty { padding: 28px 0; text-align: center; color: var(--ord-text-4); font-size: 12.5px; }
.dce-sec-plain { margin-top: 14px; }
.dce-sec-plain h5 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ord-text); }

/* 담당자 상세 모달 본문 — A-4(바탕 + 섹션 카드). 모달 안이라 .dce 밖이다 */
.dce-m { padding: 16px; background: var(--ord-surface-2); }
.dce-m-scope { margin-bottom: 12px; font-size: 12px; color: var(--ord-text-3); }
.dce-m .dce-sec { margin-top: 12px; border: 1px solid var(--ord-line); border-radius: 12px; background: var(--ord-surface); overflow: hidden; }
.dce-m .dce-sec h5 { margin: 0; padding: 8px 14px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); font-size: 12px; font-weight: 700; color: var(--ord-accent); }
.dce-sec-b { padding: 10px 14px 12px; }
.dce-s { font-size: 10.5px; margin-top: 6px; }
.dce-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dce-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ord-line); background: var(--ord-surface); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; color: var(--ord-text); cursor: pointer; font-family: inherit; }
.dce-chip:hover { border-color: var(--ord-accent); background: var(--ord-band); }

/* 열람대비·이력대비 카드 */
.dce-kp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dce-kp3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dce-kp3 .dce-kp-v { font-size: 18px; white-space: nowrap; }
.dce-gap { font-weight: 700; margin-left: 4px; }
.dce-gap.is-up, .dce-delta.is-up { color: var(--ord-tint-green-fg); }
.dce-gap.is-down, .dce-delta.is-down { color: var(--ord-tint-red-fg); }
.dce-delta { font-size: 11px; font-weight: 700; }
.dce-trendline { margin: 12px 0 0; font-size: 12.5px; color: var(--ord-text-2); }
.dce-kp { border: 1px solid var(--ord-line); border-radius: 10px; padding: 9px 11px; background: var(--ord-surface); }
.dce-kp-l { font-size: 10.5px; color: var(--ord-text-3); }
.dce-kp-v { font-size: 19px; font-weight: 800; color: var(--ord-text); }
.dce-kp-c { font-size: 10.5px; margin-top: 1px; }

/* 팀 평균 비교 */
.dce-cmp { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11.5px; }
.dce-cmp-l { width: 70px; flex: none; color: var(--ord-text-3); }
.dce-cmp-tr { flex: 1; height: 10px; position: relative; border-radius: 4px; background: var(--ord-progress-track); }
.dce-cmp-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.dce-cmp-tr u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ord-text-2); }
.dce-cmp-v { width: 92px; flex: none; text-align: right; font-weight: 700; color: var(--ord-text); }
.dce-cmp i.is-blue, .dce-stack i.is-blue { background: var(--ord-solid-blue); }
.dce-cmp i.is-blue2, .dce-stack i.is-blue2 { background: var(--ord-chart-bar-hover); }
.dce-cmp i.is-green { background: var(--ord-solid-green); }

/* 구성 막대 */
.dce-stack { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--ord-progress-track); margin: 4px 0 3px; }
.dce-stack i { display: block; height: 100%; }
.dce-stack-l { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--ord-text-3); }
.dce-stack-l em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.dce-stack-l em::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--dce-c, currentColor); }
.dce-stack i.is-violet { background: var(--ord-solid-violet); }
.dce-stack i.is-violet2 { background: var(--ord-tint-violet-line); }
.dce-stack i.is-assign { background: var(--ord-src-assign); }
.dce-stack i.is-share { background: var(--ord-src-share); }
.dce-stack i.is-xfer { background: var(--ord-src-xfer); }
.dce-stack i.is-consign { background: var(--ord-src-consign); }
/* 범례 점 색 — em 은 배경 없이 ::before 점만 칠한다 */
.dce-stack-l em { --dce-c: transparent; }
.dce-stack-l em.is-blue { --dce-c: var(--ord-solid-blue); }
.dce-stack-l em.is-blue2 { --dce-c: var(--ord-chart-bar-hover); }
.dce-stack-l em.is-violet { --dce-c: var(--ord-solid-violet); }
.dce-stack-l em.is-violet2 { --dce-c: var(--ord-tint-violet-line); }
.dce-stack-l em.is-assign { --dce-c: var(--ord-src-assign); }
.dce-stack-l em.is-share { --dce-c: var(--ord-src-share); }
.dce-stack-l em.is-xfer { --dce-c: var(--ord-src-xfer); }
.dce-stack-l em.is-consign { --dce-c: var(--ord-src-consign); }

/* 상품별 */
.dce-prods { margin-top: 6px; }
.dce-prod { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin: 3px 0; }
.dce-prod-n { width: 86px; flex: none; color: var(--ord-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dce-prod-tr { flex: 1; height: 8px; border-radius: 4px; background: var(--ord-progress-track); overflow: hidden; }
.dce-prod-tr i { display: block; height: 100%; background: var(--ord-solid-green); }
.dce-prod b { width: 30px; text-align: right; color: var(--ord-text); }

/* 최근 8주 */
.dce-spark { width: 100%; display: block; }
.dce-spark-bar { fill: var(--ord-chart-bar); }
.dce-spark-ax { font-size: 9.5px; fill: var(--ord-chart-axis); }
.dce-spark-line { fill: none; stroke: var(--ord-chart-line); stroke-width: 2.2; }
.dce-spark-dot { fill: var(--ord-chart-line); }
.dce-spark-n { font-size: 9.5px; font-weight: 700; fill: var(--ord-tint-green-fg); }

@media (max-width: 820px) {
  .dce-body { grid-template-columns: minmax(0, 1fr); }
  .dce-tip { display: none; }
}

/* 계산 기준 — 평소엔 접어 둔다 */
.dce-basis { margin-top: 12px; font-size: 12px; color: var(--ord-text-3); }
.dce-basis summary { cursor: pointer; width: max-content; color: var(--ord-text-3); }
.dce-basis summary:hover { color: var(--ord-accent); }
.dce-basis ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.8; }