/* データ・分析（案）
   色と文字は parts.css の決まりのまま。データの色は 自動車＝青・バイク＝緑。前の期間は灰色の細い棒。
   増えた／減ったの印は、色だけに頼らず ▲▼ と数字で示す */
:root {
  --an-up-bg: #FCEBE5; --an-up-fg: #A1361A;     /* 増えた（盗難が増えるのは悪いこと） */
  --an-down-bg: #E8EFF5; --an-down-fg: #34536F; /* 減った */
  --an-prev: #B9C1CB;                            /* 前の期間 */
  --an-hair: #EDF0F4;
}
.an-wrap { padding: 0 16px 48px; }
.an-head { padding: 24px 0 8px; display: grid; gap: 12px; }
.an-head h1 { margin: 2px 0 4px; font-size: var(--cmt-fs-xxl); color: var(--cmt-navy); line-height: 1.3; text-wrap: balance; }
.an-head p { margin: 0; font-size: 14px; color: var(--cmt-text-sub); max-width: 46em; }
.an-head .cmt-eyebrow { color: var(--cmt-navy); }
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cmt-line); }
.an-tabs span { padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--cmt-text-sub); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.an-tabs span[aria-current] { color: var(--cmt-navy); border-bottom-color: var(--cmt-navy); }

/* 条件のバー（PC では上に固定） */
.an-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid var(--cmt-line); margin-bottom: 20px; background: var(--cmt-white); }
.an-ctl { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.an-ctl-label { font-size: 12px; font-weight: 700; color: var(--cmt-text-sub); letter-spacing: .06em; }
.an-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--cmt-surface); border-radius: var(--cmt-r-pill); }
.an-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--cmt-r-pill); background: transparent; color: var(--cmt-text-sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.an-seg button:hover { color: var(--cmt-navy); }
.an-seg button[aria-pressed="true"] { background: var(--cmt-white); color: var(--cmt-navy); box-shadow: 0 1px 2px rgba(22,32,43,.12), 0 0 0 1px var(--cmt-line); }
.an-seg button small { font-weight: 500; margin-left: 4px; font-size: 11px; }
.an-seg--small button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.an-compare { margin: 0; font-size: 12px; color: var(--cmt-text-sub); flex-basis: 100%; }
.an-compare b { color: var(--cmt-text); }

/* 増えた・減ったの札 */
.an-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: var(--cmt-r-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.6; }
.an-delta--up { background: var(--an-up-bg); color: var(--an-up-fg); }
.an-delta--down { background: var(--an-down-bg); color: var(--an-down-fg); }
.an-delta--flat, .an-delta--na { background: var(--cmt-surface); color: var(--cmt-text-sub); }

/* 要点 */
.an-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; background: var(--cmt-line); border: 1px solid var(--cmt-line); }
.an-kpi { background: var(--cmt-white); padding: 14px; min-width: 0; display: grid; gap: 4px; align-content: start; }
.an-kpi small { font-size: 12px; color: var(--cmt-text-sub); line-height: 1.5; }
.an-kpi b { font-family: var(--cmt-font-num); font-variant-numeric: tabular-nums; font-size: 30px; line-height: 1.1; color: var(--cmt-text); letter-spacing: .01em; }
.an-kpi b span { font-family: var(--cmt-font); font-size: 13px; font-weight: 700; margin-left: 3px; }
.an-kpi b.an-kpi-word { font-family: var(--cmt-font); font-size: 22px; font-weight: 700; }
.an-kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--cmt-text-sub); }

/* カード */
.an-grid { display: grid; gap: 16px; }
.an-card { border: 1px solid var(--cmt-line); background: var(--cmt-white); padding: 18px 16px; min-width: 0; }
.an-card--site { background: var(--cmt-surface); border-style: dashed; }
.an-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 12px; margin-bottom: 12px; }
.an-card-head h2 { margin: 0; font-size: 17px; color: var(--cmt-text); line-height: 1.4; }
.an-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.an-sub { margin: 2px 0 0; font-size: 12px; color: var(--cmt-text-sub); }
.an-grade { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1px solid var(--cmt-line); border-radius: var(--cmt-r-tag); color: var(--cmt-text-sub); white-space: nowrap; }
.an-grade--d { border-style: dashed; }
.an-src, .an-note { margin: 12px 0 0; font-size: 12px; color: var(--cmt-text-sub); line-height: 1.6; }
.an-empty { margin: 8px 0; padding: 20px; font-size: 14px; color: var(--cmt-text-sub); line-height: 1.8; background: var(--cmt-surface); }

.an-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--cmt-text-sub); margin: 0 0 10px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-key { width: 18px; border-radius: 0 3px 3px 0; display: inline-block; }
.an-key--now { height: 10px; }
.an-key--prev { height: 4px; background: var(--an-prev); }

/* 比べる棒: 上の太い棒＝選んだ期間、下の細い棒＝前の期間。同じ目盛り */
.an-rows { display: grid; }
.an-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 4.6em; grid-template-areas: "name bars val" "name bars chg"; align-items: center; column-gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--an-hair); cursor: default; }
.an-row:last-child { border-bottom: 0; }
.an-row:hover, .an-row:focus-visible { background: var(--cmt-surface); outline: none; }
.an-row-name { grid-area: name; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-row-name small { display: block; font-size: 11px; font-weight: 500; color: var(--cmt-text-sub); }
.an-bars { grid-area: bars; display: grid; gap: 3px; position: relative; }
.an-bar-now, .an-bar-prev { display: block; border-radius: 0 3px 3px 0; min-width: 2px; }
.an-bar-now { height: 14px; }
.an-bar-prev { height: 4px; background: var(--an-prev); }
.an-row-val { grid-area: val; font-family: var(--cmt-font-num); font-variant-numeric: tabular-nums; font-size: 16px; text-align: right; line-height: 1.2; }
.an-row-val small { font-family: var(--cmt-font); font-size: 11px; color: var(--cmt-text-sub); margin-left: 1px; }
.an-row-chg { grid-area: chg; text-align: right; }
.an-row--single { grid-template-areas: "name bars val"; }
.an-row--single .an-row-chg { display: none; }
.an-gridlines { position: absolute; inset: -8px 0; pointer-events: none; }
.an-axis { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 4.6em; column-gap: 10px; padding: 6px 4px 0; font-size: 11px; color: var(--cmt-text-sub); }
.an-axis-in { position: relative; height: 16px; }
.an-axis-in span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-axis-in span:first-child { transform: none; }
.an-axis-in span:last-child { transform: translateX(-100%); }

/* 年ごとの動き（縦の棒・選んだ年を強く） */
.an-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: end; height: 190px; padding: 18px 4px 0; border-bottom: 1px solid var(--cmt-line); }
.an-col { display: grid; justify-items: center; align-content: end; gap: 6px; height: 100%; cursor: default; border-radius: 4px; }
.an-col:hover, .an-col:focus-visible { background: var(--cmt-surface); outline: none; }
.an-col-val { font-family: var(--cmt-font-num); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--cmt-text-sub); }
.an-col-bar { width: min(56px, 70%); border-radius: 4px 4px 0 0; background: var(--an-prev); }
.an-col[data-on="true"] .an-col-val { color: var(--cmt-text); font-weight: 700; font-size: 16px; }
.an-col-labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 6px 4px 0; font-size: 12px; color: var(--cmt-text-sub); text-align: center; }
.an-col-labels span[data-on="true"] { color: var(--cmt-navy); font-weight: 700; }

.an-table summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cmt-navy); min-height: 40px; display: flex; align-items: center; margin-top: 8px; }
.an-scroll { overflow-x: auto; }
.an-scroll table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.an-scroll th, .an-scroll td { padding: 6px 10px; border-bottom: 1px solid var(--cmt-line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-scroll th:first-child, .an-scroll td:first-child { text-align: left; }
.an-scroll th { font-weight: 400; color: var(--cmt-text-sub); font-size: 12px; }

.an-tip { position: fixed; z-index: 300; pointer-events: none; background: var(--cmt-text); color: var(--cmt-white); font-size: 12px; line-height: 1.7; padding: 8px 12px; border-radius: 6px; max-width: 280px; box-shadow: 0 6px 18px rgba(22,32,43,.28); }
.an-tip b { font-size: 13px; }
.an-tip .an-tip-num { font-family: var(--cmt-font-num); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .an-bar-now, .an-bar-prev, .an-col-bar { transition: width .35s ease, height .35s ease; }
}

@media (min-width: 1080px) {
  .an-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px 64px; }
  .an-head { grid-template-columns: 1fr auto; align-items: end; padding-top: 40px; }
  .an-head h1 { font-size: 34px; }
  .an-tabs { border-bottom: 0; }
  .an-controls { position: sticky; top: 60px; z-index: 20; flex-wrap: nowrap; }
  .an-compare { flex-basis: auto; margin-left: auto; text-align: right; }
  .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
  .an-kpi { padding: 20px 22px; }
  .an-kpi b { font-size: 42px; }
  .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .an-card { padding: 24px 26px; }
  .an-card--wide { grid-column: 1 / -1; }
  .an-card-head h2 { font-size: 19px; }
  #pref-chart .an-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  #pref-chart .an-row:nth-last-child(2) { border-bottom: 0; }
  #pref-chart .an-axis { grid-template-columns: none; display: none; }
  #site-chart .an-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .an-row { grid-template-columns: 6em minmax(0, 1fr) 5.4em; padding: 10px 6px; }
  .an-axis { grid-template-columns: 6em minmax(0, 1fr) 5.4em; }
}