/* 치지직 채널 분석기 — 차트 전용 스타일 (core.js Charts.*, README §11.3)
 * 원칙: 얇은 표시·머리카락 격자·데이터 끝만 둥글게·점에는 바탕색 테두리·글자는 글자 토큰(계열 색 금지)·hover 는 띠/안내선. */

/* ── 틀 ── */
.ca-chart .ca-cplot{position:relative;min-width:0}
.ca-chart-fill{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ca-chart-fill > .ca-cplot{flex:1 1 auto;position:relative}
.ca-chart-fill > .ca-cplot > svg{position:absolute;inset:0;width:100%;height:100%}
.ca-chart-fill > .ca-bullets,.ca-chart-fill > .ca-funnel{flex:1 1 auto;align-content:center}
.ca-chart svg.ca-svg-center{display:block;margin:0 auto;max-width:100%}
.ca-chart svg[tabindex]{outline:none;border-radius:6px}
.ca-chart svg[tabindex]:focus-visible{outline:2px solid var(--ca-green);outline-offset:3px}

/* ── 축·격자·라벨 ── */
.ca-chart .ca-x-label{fill:var(--ca-mut2);font-size:10px}
.ca-chart .ca-axis-label.is-strong{fill:var(--ca-txt2);font-weight:600}
.ca-chart .ca-axis-label.is-today{fill:var(--ca-txt);font-weight:700}
.ca-chart .ca-axis-title{fill:var(--ca-mut);font-size:10.5px;font-weight:600}
.ca-chart .ca-row-label{fill:var(--ca-txt2);font-size:11px}
.ca-chart .ca-val-label{fill:var(--ca-txt);font-size:10.5px;font-weight:650}
.ca-chart .ca-in-label{font-size:10px;font-weight:650;pointer-events:none}
.ca-chart .ca-grid-v{stroke:rgba(42,42,53,.75)}
.ca-chart .ca-grid-faint{opacity:.45}
.ca-chart .ca-zero-line{stroke:rgba(255,255,255,.22);stroke-width:1}
.ca-chart .ca-ref-line{stroke:rgba(236,236,241,.42);stroke-width:1;stroke-dasharray:4 3;fill:none;pointer-events:none}
.ca-chart .ca-ref-bg{fill:rgba(21,21,27,.82)}
.ca-chart .ca-ref-label{fill:var(--ca-txt2);font-size:10px;font-weight:600}

/* ── 표시(마크) ── */
.ca-chart .ca-bar{transition:filter .12s}
.ca-chart .ca-bar.is-hot{filter:brightness(1.22)}
.ca-chart .ca-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ca-chart .ca-dot{stroke:#20202a;stroke-width:1.6}
.ca-chart .ca-dot-hot{stroke:#20202a;stroke-width:2;pointer-events:none}
.ca-chart .ca-area{stroke:none}
.ca-chart .ca-pt{fill-opacity:.82;stroke:#20202a;stroke-width:1.5}
.ca-chart .ca-pt-ring{fill:none;stroke:#ececf1;stroke-width:1.5;pointer-events:none}
.ca-chart .ca-pt-label{fill:var(--ca-txt2);font-size:10px;font-weight:600;pointer-events:none}
.ca-chart .ca-quad-label{fill:var(--ca-mut);font-size:11px;font-weight:600;pointer-events:none}
.ca-chart .ca-trend-line{stroke:rgba(236,236,241,.62);stroke-width:1.5;stroke-dasharray:6 4;pointer-events:none}

/* hover 레이어 */
.ca-chart .ca-hit{fill:transparent;cursor:crosshair}
.ca-chart .ca-hit-dot{fill:transparent}
.ca-chart .ca-xh{stroke:rgba(236,236,241,.38);stroke-width:1;pointer-events:none}
.ca-chart .ca-xb{fill:rgba(255,255,255,.045);pointer-events:none}
/* 개별 표시 툴팁(트리맵 칸·캘린더 칸 등)은 app.css 의 opacity .82 대신 자체 강조 */
.ca-chart .ca-tm-cell[data-tip]:hover,.ca-chart .ca-rb[data-tip]:hover,.ca-chart .ca-rose-h[data-tip]:hover,.ca-chart .ca-tl-seg[data-tip]:hover,.ca-chart .ca-cal-cell[data-tip]:hover,.ca-chart .ca-wf-cell[data-tip]:hover{opacity:1}

/* ── 범례 ── */
.ca-legend2{margin:0 0 10px;gap:6px 14px;font-size:12px;line-height:1.4}
.ca-chart-fill > .ca-legend2{flex:none}
.ca-legend2 .ca-lg{display:inline-flex;align-items:center;gap:6px;color:var(--ca-txt2);min-width:0}
.ca-legend2 .ca-lg b{color:var(--ca-txt);font-weight:700}
.ca-legend .ca-lg-k{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0;vertical-align:middle;flex:none}
.ca-legend .ca-lg-k.is-line{width:14px;height:2.5px;border-radius:2px}
.ca-legend .ca-lg-k.is-dot{width:9px;height:9px;border-radius:50%}
.ca-legend .ca-lg-k.is-dash{width:15px;height:2px;border-radius:0;-webkit-mask:linear-gradient(90deg,#000 60%,transparent 0) 0 0/5px 100% repeat-x;mask:linear-gradient(90deg,#000 60%,transparent 0) 0 0/5px 100% repeat-x}
.ca-legend .ca-lg-k.is-ring{background:transparent !important;border:1.5px solid var(--ca-mut);border-radius:50%;width:11px;height:11px}
.ca-radar .ca-legend{justify-content:center}

/* ── 구조화 툴팁 (값이 앞·굵게, 이름이 뒤) ── */
.ca-tip.is-rich{white-space:normal;padding:8px 11px 7px;min-width:118px}
.ca-tip-t{font-size:11.5px;color:var(--ca-txt2);font-weight:650;margin-bottom:4px;max-width:260px;overflow-wrap:anywhere}
.ca-tip-r{display:flex;align-items:center;gap:7px;line-height:1.55;font-size:12px}
.ca-tip-r b{color:var(--ca-txt);font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.ca-tip-r span{color:var(--ca-mut);min-width:0;overflow-wrap:anywhere}
.ca-tip-k{flex:none;width:12px;height:2.5px;border-radius:2px}
.ca-tip-k.is-rect{width:9px;height:9px;border-radius:2.5px}
.ca-tip-k.is-dot{width:8px;height:8px;border-radius:50%}
.ca-tip-k.is-none{width:0;margin-right:-7px}
.ca-tip-n{margin-top:4px;color:var(--ca-mut);font-size:11px;overflow-wrap:anywhere}

/* ── 기존 차트 보강 ── */
.ca-donut .ca-donut-seg{transition:opacity .12s}
.ca-donut svg:hover .ca-donut-seg{opacity:.55}
.ca-donut svg .ca-donut-seg:hover{opacity:1}
.ca-heat-wrap{display:grid;gap:8px}
.ca-heat-scale{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11px;color:var(--ca-mut)}
.ca-heat-scale i{width:14px;height:10px;border-radius:2px}
.ca-heat-scale span{padding:0 3px}
.ca-meter-target{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ca-txt);border-radius:1px}
.ca-spark-wrap{position:relative}
.ca-spark-wrap svg{width:100%;display:block}
.ca-spark-dot{position:absolute;right:-3px;width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 1.5px #20202a}

/* ── 트리맵 ── */
.ca-chart .ca-tm-rect{fill-opacity:.26;transition:fill-opacity .12s}
.ca-chart .ca-tm-cell:hover .ca-tm-rect{fill-opacity:.42}
.ca-chart .ca-tm-name{fill:var(--ca-txt);font-size:12px;font-weight:650;pointer-events:none}
.ca-chart .ca-tm-val{fill:var(--ca-txt2);font-size:11px;pointer-events:none}

/* ── 캘린더·타임라인 ── */
.ca-chart .ca-cal-cell:hover{stroke:#ececf1;stroke-width:1.2}
.ca-chart .ca-cal-cell.is-end{stroke:rgba(236,236,241,.55);stroke-width:1}
.ca-chart .ca-tl-track{fill:rgba(255,255,255,.028)}
.ca-chart .ca-tl-track.is-wk{fill:rgba(155,92,255,.075)}
.ca-chart .ca-tl-seg{transition:filter .12s}
.ca-chart .ca-tl-seg:hover{filter:brightness(1.25)}
.ca-chart .ca-tl-now{stroke:#ff5d5d;stroke-width:2;stroke-linecap:round;pointer-events:none}

/* ── 원형(로즈·게이지·방사형 막대) ── */
.ca-chart .ca-polar-grid{fill:none;stroke:rgba(255,255,255,.075)}
.ca-chart .ca-rose-hit{fill:transparent}
.ca-chart .ca-rose{transition:filter .12s}
.ca-chart .ca-rose-h:hover .ca-rose{filter:brightness(1.22)}
.ca-chart .ca-rose-h:hover .ca-rose-hit{fill:rgba(255,255,255,.04)}
.ca-chart .ca-needle{stroke:#ececf1;stroke-width:1.5;stroke-dasharray:3 2}
.ca-chart .ca-needle-dot{fill:#ececf1;stroke:#20202a;stroke-width:1.5}
.ca-chart .ca-center-v{fill:var(--ca-txt);font-weight:800;letter-spacing:-.3px}
.ca-chart .ca-center-l{fill:var(--ca-mut);font-size:10.5px}
.ca-chart .ca-gauge-track{fill:none;stroke:rgba(255,255,255,.07);stroke-linecap:round}
.ca-chart .ca-gauge-val{fill:none;stroke-linecap:round}
.ca-chart .ca-gauge-zone{fill:none;stroke-width:3.5;stroke-opacity:.7}
.ca-chart .ca-gauge-target{stroke:#ececf1;stroke-width:2.5;stroke-linecap:round}
.ca-chart .ca-gauge-v{fill:var(--ca-txt);font-weight:850;letter-spacing:-.6px}
.ca-chart .ca-gauge-l{fill:var(--ca-txt2);font-size:12px;font-weight:600}
.ca-chart .ca-rb-track{fill:none;stroke:rgba(255,255,255,.06);stroke-linecap:round}
.ca-chart .ca-rb-val{fill:none;stroke-linecap:round;transition:filter .12s}
.ca-chart .ca-rb-hit{fill:none;stroke:transparent}
.ca-chart .ca-rb:hover .ca-rb-val{filter:brightness(1.22)}
.ca-chart .ca-rb-label{fill:var(--ca-txt2);pointer-events:none}
.ca-chart .ca-rb-num{fill:var(--ca-txt);font-weight:750}
.ca-rb-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.ca-rb-wrap.is-side{flex-direction:row;justify-content:center;gap:22px}
.ca-rb-list{display:grid;gap:6px;min-width:170px;max-width:100%}
.ca-rb-li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.ca-rb-li i{width:10px;height:10px;border-radius:3px}
.ca-rb-li span{color:var(--ca-txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-rb-li b{color:var(--ca-txt);font-weight:750}

/* ── 불릿 ── */
.ca-bullets{display:grid;gap:12px;container-type:inline-size}
.ca-bl-row{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr) minmax(72px,auto);align-items:center;gap:12px;border-radius:6px}
.ca-bl-label{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ca-bl-name{font-size:12.5px;color:var(--ca-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-bl-sub{font-size:11px;color:var(--ca-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-bl-track{position:relative;height:18px;border-radius:4px;background:rgba(255,255,255,.025);overflow:hidden}
.ca-bl-band{position:absolute;top:0;bottom:0}
.ca-bl-bar{position:absolute;left:0;top:6px;height:6px;border-radius:0 3px 3px 0}
.ca-bl-target{position:absolute;top:2px;bottom:2px;width:2px;background:var(--ca-txt);border-radius:1px}
.ca-bl-val{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;text-align:right}
.ca-bl-val b{font-size:13px;font-weight:750;white-space:nowrap}
.ca-bl-val span{font-size:11px;color:var(--ca-mut);white-space:nowrap}
.ca-chart .ca-bl-row[data-tip]:hover{opacity:1;background:rgba(255,255,255,.025)}
@container (max-width:420px){
  .ca-bl-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";row-gap:6px}
  .ca-bl-label{grid-area:l} .ca-bl-val{grid-area:v;flex-direction:row;gap:6px;align-items:baseline} .ca-bl-track{grid-area:t}
}

/* ── 퍼널 ── */
.ca-funnel{display:grid;container-type:inline-size}
.ca-fn-row,.ca-fn-step{display:grid;grid-template-columns:minmax(88px,28%) minmax(0,1fr) minmax(76px,auto);align-items:center;gap:12px}
.ca-fn-row{padding:2px 0;border-radius:6px}
.ca-chart .ca-fn-row[data-tip]:hover{opacity:1;background:rgba(255,255,255,.025)}
.ca-fn-label{min-width:0;line-height:1.3}
.ca-fn-label span{display:block;font-size:12.5px;color:var(--ca-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-fn-label small{display:block;font-size:11px;color:var(--ca-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-fn-track{display:flex;justify-content:center;height:26px;border-radius:6px;background:rgba(255,255,255,.025)}
.ca-fn-bar{display:block;height:100%;border-radius:6px}
.ca-fn-val{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.ca-fn-val b{font-size:13px;font-weight:750;white-space:nowrap}
.ca-fn-val span{font-size:11px;color:var(--ca-mut)}
.ca-fn-step{padding:3px 0}
.ca-fn-step > .ca-fn-rate{grid-column:2;justify-self:center;display:inline-flex;align-items:baseline;gap:5px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--ca-line);line-height:1.35;white-space:nowrap}
.ca-fn-rate i{font-style:normal;font-size:10.5px;color:var(--ca-mut2)}
.ca-fn-rate b{font-size:13.5px;font-weight:800;color:var(--ca-txt);font-variant-numeric:tabular-nums}
.ca-fn-rate small{font-size:11px;color:var(--ca-mut)}
.ca-fn-note{font-size:11px;color:var(--ca-mut);margin-top:8px}
@container (max-width:420px){
  .ca-fn-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";row-gap:4px}
  .ca-fn-label{grid-area:l} .ca-fn-val{grid-area:v;flex-direction:row;gap:6px;align-items:baseline} .ca-fn-track{grid-area:t}
  .ca-fn-step{grid-template-columns:1fr} .ca-fn-step > .ca-fn-rate{grid-column:1}
}

/* ── 로렌츠·덤벨·상자 그림 ── */
.ca-chart .ca-lz-area{fill-opacity:.14;stroke:none}
.ca-chart .ca-lz-eq{stroke:rgba(236,236,241,.34);stroke-width:1;stroke-dasharray:3 3}
.ca-chart .ca-lz-gini{fill:var(--ca-txt);font-size:13px;font-weight:800}
.ca-chart .ca-db-link{stroke-width:2.5;stroke-opacity:.42;stroke-linecap:round}
.ca-chart .ca-bx-wh{stroke-width:1.3;stroke-opacity:.85}
.ca-chart .ca-bx-box{stroke-width:1.5}
.ca-chart .ca-bx-med{stroke:#ececf1;stroke-width:2.2;stroke-linecap:round}
.ca-chart .ca-bx-out{fill:none;stroke-width:1.3}
.ca-chart .ca-bx-pt{fill-opacity:.45}
.ca-chart .ca-bx-mean{fill:#ececf1;stroke:#20202a;stroke-width:1}

/* ── 와플 ── */
.ca-waffle{display:flex;align-items:center;justify-content:center;gap:16px 24px;flex-wrap:wrap}
.ca-chart .ca-wf-cell{transition:filter .1s}
.ca-chart .ca-wf-cell.is-rest{fill:rgba(255,255,255,.07)}
.ca-chart .ca-wf-cell:not(.is-rest):hover{filter:brightness(1.22)}
.ca-wf-legend{display:grid;gap:10px;min-width:0}
.ca-wf-li b{display:block;font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.15;color:var(--ca-txt)}
.ca-wf-li span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ca-txt2)}
.ca-wf-li i{width:9px;height:9px;border-radius:3px;flex:none}
.ca-wf-li small{color:var(--ca-mut);font-size:11.5px}

@media (prefers-reduced-motion:reduce){
  .ca-chart *{transition:none !important}
}

/* 보강(2차) */
.ca-chart .ca-cal-track{fill:rgba(255,255,255,.04)}
.ca-chart .ca-area-sep{fill:none;stroke:#20202a;stroke-width:1.5;stroke-linejoin:round;pointer-events:none}
.ca-chart-fill > .ca-cplot > .ca-rb-wrap{position:absolute;inset:0;justify-content:center}
.ca-chart .ca-ref-tag{fill:#2a2a35;stroke:rgba(236,236,241,.18);stroke-width:1}