/* ==========================================================
   components/chart.css — 차트 모양
   .dbar(전국 평균 100 기준 양방향 막대) · .dbar-axis(막대 눈금)
   · .strip(17개 시도 분포 띠) · .lc-*(추이 꺾은선) · .wstack(가중치 막대)
   · .table-toggle(표로 보기)

   dataviz 규칙: 막대 10px · 기준선 쪽 각지고 끝 4px 둥글게 · 격자 실선 헤어라인
   · 점은 흰 2px 테두리 · 글자는 막대 색을 쓰지 않는다
   ========================================================== */

/* ---------- 양방향 막대 ---------- */
.dbar { position: relative; display: block; width: 100%; height: 10px; border-radius: 3px; background: var(--line-2); }
.dbar::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--mid-line); z-index: 1; }
.dbar i { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.dbar i.exp { background: var(--exp); border-radius: 0 4px 4px 0; }
.dbar i.aff { background: var(--aff); border-radius: 4px 0 0 4px; transform-origin: right center; }
.dbar i.flat { background: var(--flat); border-radius: 2px; }
.js .dbar i { animation: grow-x .7s var(--ease) both; }
.dbar.is-empty { background: repeating-linear-gradient(45deg, var(--line-2) 0 4px, #fff 4px 8px); }

.dbar-axis {
  container-type: inline-size;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-4); white-space: nowrap;
}
.dbar-axis i { font-style: normal; }
.dbar-axis b { font-weight: 700; }
.dbar-axis .mid { color: var(--ink-3); }
.dbar-axis .mid b { display: none; }
/* 막대 칸이 좁으면: "저렴 · 100 · 비쌈" 만 */
@container (max-width: 240px) {
  .dbar-axis span:not(.mid) b { display: none; }
  .dbar-axis .mid i { display: none; }
  .dbar-axis .mid b { display: inline; }
}

/* ---------- 분포 띠 ---------- */
.strip { position: relative; padding-top: 30px; }
.strip:not(.has-focus) { padding-top: 6px; }
.strip-track { position: relative; height: 26px; margin: 0 10px; }
.strip-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line); }
.strip-mid { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mid-line); border-radius: 1px; }
.strip-dot { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; border-radius: 50%; }
.strip-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--flat); box-shadow: 0 0 0 2px #fff; transition: transform .15s; }
.strip-dot.exp i { background: #F2A3A6; }
.strip-dot.aff i { background: #9DB7F4; }
.strip-dot:hover i, .strip-dot:focus-visible i { transform: scale(1.35); }
.strip-dot.is-focus { z-index: 2; }
.strip-dot.is-focus i { width: 16px; height: 16px; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(29, 36, 51, .3); }
.strip-dot.is-focus.exp i { background: var(--exp); }
.strip-dot.is-focus.aff i { background: var(--aff); }
.strip-dot.is-focus.flat i { background: var(--navy-2); }
.strip-label {
  position: absolute; top: 0; transform: translateX(-50%); margin-left: 0;
  padding: 3px 9px; border-radius: 8px; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.strip-label b { font-weight: 900; }
.strip-label::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--navy); }
.strip-scale { position: relative; display: flex; justify-content: space-between; margin: 4px 10px 0; font-size: 11.5px; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.strip-scale .mid { position: absolute; transform: translateX(-50%); color: var(--ink-3); }
.strip-legend { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--ink-4); }
.strip-legend span { display: inline-flex; align-items: center; gap: 3px; }
.strip-legend .ico { width: 12px; height: 12px; }

/* ---------- 추이 꺾은선 ---------- */
.lc { position: relative; }
.lc-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.lc-svg:focus-visible { outline: 3px solid rgba(14, 162, 113, .35); outline-offset: 4px; border-radius: 8px; }
.lc-grid { stroke: var(--line-2); stroke-width: 1; }
.lc-ytick, .lc-xtick { font-size: 11.5px; font-weight: 600; fill: var(--ink-4); font-variant-numeric: tabular-nums; font-family: var(--font); }
.lc-ref { stroke: var(--mid-line); stroke-width: 1.5; }
.lc-ref-label { font-size: 11.5px; font-weight: 700; fill: var(--ink-3); font-family: var(--font); }
.lc-area { fill: var(--navy-2); fill-opacity: .07; }
.lc-line { fill: none; stroke: var(--navy-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-end { fill: var(--navy-2); stroke: #fff; stroke-width: 2; }
.lc-end-label { font-size: 12.5px; font-weight: 800; fill: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; }
.lc-cross { stroke: var(--ink-4); stroke-width: 1; opacity: 0; }
.lc-hover { fill: #fff; stroke: var(--navy-2); stroke-width: 2.5; opacity: 0; }
.lc-svg.is-hover .lc-cross, .lc-svg.is-hover .lc-hover { opacity: 1; }
.lc-hit { fill: transparent; cursor: crosshair; }
.lc-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; display: grid; gap: 1px;
  padding: 7px 11px; border-radius: 10px; background: var(--navy); color: #fff; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(22, 33, 62, .5); opacity: 0; transition: opacity .12s;
}
.lc-tip.show { opacity: 1; }
.lc-tip span { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.lc-tip b { font-size: 14px; font-weight: 800; }
.lc-tip em { font-style: normal; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .8); }

/* ---------- 가중치 막대 (항목 비중) ---------- */
.wstack { display: flex; gap: 2px; height: 14px; border-radius: 5px; overflow: hidden; background: var(--line-2); }
.wstack span { min-width: 0; transition: flex-grow .3s var(--ease); }
/* 항목 색 칠하기 — 막대 조각과 범례 점이 같이 쓴다 */
.w-groceries { background: var(--c-groceries); }
.w-freshFood { background: var(--c-freshFood); }
.w-dining { background: var(--c-dining); }
.w-services { background: var(--c-services); }
.w-fuel { background: var(--c-fuel); }
.w-trend { background: var(--c-trend); }
.wlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.wlegend span { display: inline-flex; align-items: center; gap: 6px; }
.wlegend i { width: 10px; height: 10px; border-radius: 3px; }
.wlegend b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- 표로 보기 (차트의 접근성 쌍둥이) ---------- */
.table-toggle { margin-top: 12px; }
.table-toggle summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
}
.table-toggle summary::-webkit-details-marker { display: none; }
.table-toggle summary .ico { width: 15px; height: 15px; }
.table-toggle summary:hover { color: var(--ink); }
.table-toggle[open] summary { margin-bottom: 8px; }