/* ==========================================================
   components/chart.css — 작은 그래프 (라이브러리 없이 HTML/CSS)
   .hbars(가로 막대 순위: 독서량·독서율) · .mbars(월별 대출 세로 막대)
   · .ladder(연령대별 순위 사다리) · .tmap(17개 시도 타일 지도) · .kw(키워드)
   값은 인라인 style 의 --v(0~1) 로 넣는다.
   ========================================================== */

/* ---------- 가로 막대 ---------- */
.hbars { display: grid; gap: 2px; }
.hbar {
  display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) 52px; align-items: center; column-gap: 10px;
  min-height: 34px; padding: 0 6px; border-radius: 10px; font-size: 14px;
}
a.hbar:hover { background: var(--surface-2); }
.hbar-rk { font-size: 12.5px; font-weight: 800; color: var(--ink-4); text-align: center; font-variant-numeric: tabular-nums; }
.hbar-name { font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hbar-track { position: relative; height: 12px; border-radius: 6px; background: var(--line-2); }
.hbar-track i {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 6px;
  background: linear-gradient(90deg, #A9A4F6, var(--brand)); transform-origin: left; animation: grow-x .7s var(--ease) both;
}
.hbar-track b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--navy); left: calc(var(--avg) * 100%); }
.hbar-val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.hbar.is-me { background: var(--brand-tint); }
.hbar.is-me .hbar-name { color: var(--brand-deep); }
.hbar.is-low .hbar-track i { background: linear-gradient(90deg, #D5DAE3, #AEB6C4); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 8px; border-radius: 4px; background: var(--brand); }
.chart-legend i.avg { width: 2px; height: 12px; border-radius: 1px; background: var(--navy); }

/* ---------- 월별 세로 막대 ---------- */
.mbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 168px; padding-top: 22px; }
.mbar { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; min-width: 0; }
.mbar-col { position: relative; align-self: end; height: calc(var(--v) * 100%); min-height: 3px; border-radius: 6px 6px 3px 3px; background: #CFCBF9; transform-origin: bottom; animation: grow-y .6s var(--ease) both; }
.mbar.is-last .mbar-col { background: var(--brand); }
.mbar.is-max .mbar-col::before {
  content: attr(data-v); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  font-size: 11px; font-weight: 800; color: var(--ink-2); white-space: nowrap;
}
.mbar-m { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-4); text-align: center; white-space: nowrap; }
.mbar.is-last .mbar-m { color: var(--brand-deep); font-weight: 800; }

/* ---------- 연령대별 순위 사다리 ---------- */
.ladder { display: grid; gap: 6px; }
.lad {
  display: grid; grid-template-columns: 30px 88px minmax(0, 1fr) 70px; align-items: center; column-gap: 10px;
  min-height: 44px; padding: 4px 8px; border-radius: 12px;
}
a.lad:hover { background: var(--surface-2); }
.lad-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.lad-ico .ico { width: 17px; height: 17px; }
.lad-name { display: grid; line-height: 1.25; }
.lad-name b { font-size: 14.5px; font-weight: 800; }
.lad-name small { font-size: 11.5px; color: var(--ink-4); }
.lad-track { position: relative; height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.lad-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 5px; background: #B7B2F7; transform-origin: left; animation: grow-x .7s var(--ease) both; }
.lad-val { text-align: right; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lad-val.is-out { font-size: 12.5px; font-weight: 700; color: var(--ink-4); }
.lad.is-best { background: var(--brand-tint); }
.lad.is-best .lad-ico { background: var(--brand); color: #fff; }
.lad.is-best .lad-track i { background: var(--brand); }
.lad.is-best .lad-val { color: var(--brand-deep); }

/* ---------- 17개 시도 타일 지도 ---------- */
.tmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.tile {
  position: relative; display: grid; align-content: space-between; gap: 2px; min-height: 64px; padding: 8px 10px;
  border-radius: 12px; background: var(--line-2); color: var(--ink-3); transition: transform .15s, box-shadow .15s;
}
a.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tile-n { font-size: 13px; font-weight: 800; }
.tile-r { font-size: 17px; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: inherit; }
.tile-r small { font-size: 11px; font-weight: 700; }
.tile.t-out .tile-r { font-size: 11.5px; font-weight: 700; }
.tile.t-1 { background: var(--brand); color: #fff; }
.tile.t-2 { background: #8C86F2; color: #fff; }
.tile.t-3 { background: #C9C6FA; color: var(--brand-deep); }
.tile.t-4 { background: var(--brand-soft); color: var(--brand-deep); }
.tile.is-me { box-shadow: inset 0 0 0 2.5px var(--navy); }
.tile.is-me::after { content: "내 동네"; position: absolute; top: 6px; right: 7px; font-size: 10px; font-weight: 800; opacity: .85; }
.tmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.tmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tmap-legend i { width: 12px; height: 12px; border-radius: 4px; }

/* ---------- 키워드 ---------- */
.kw { display: flex; flex-wrap: wrap; gap: 8px; }
.kw span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-weight: 700; white-space: nowrap;
  font-size: calc(12.5px + var(--w) * 5px);
}
.kw span.kw-top { background: var(--brand-soft); color: var(--brand-deep); }

@media (min-width: 768px) {
  .hbar { grid-template-columns: 26px 54px minmax(0, 1fr) 60px; }
  .mbars { height: 190px; gap: 8px; }
  .mbar-m { font-size: 12px; }
  .tile { min-height: 70px; }
}