/* どこに居るかを色で示す: ページの「区域」ごとのキーカラー（body の data-zone で決める）
   車 = 青 #1C77C3 / バイク = 青緑 #2A9D99（ミント #BEE9E8 の濃い色） / 地域のテーマ = 水色 #39A9DB / 分析・統計資料 = 青みのグレー / 記録・地図・トップ = 紺
   色は帯・印・選んだ項目だけに使い、文字は --zone-ink（白地でも区域の淡い地の上でも差 4.5 以上にするため、帯の色より少し濃い: 自動車 #1869B0・バイク #10766F・分析 #556A80）にする */
body { --zone: var(--cmt-navy); --zone-ink: var(--cmt-navy); --zone-bg: var(--cmt-surface); }
body[data-zone="car"]    { --zone: var(--cmt-car);    --zone-ink: #1869B0;       --zone-bg: var(--cmt-car-bg); }
body[data-zone="bike"]   { --zone: var(--cmt-bike);   --zone-ink: #10766F; --zone-bg: var(--cmt-bike-bg); }
body[data-zone="buyer"]  { --zone: var(--cmt-buyer);  --zone-ink: var(--cmt-buyer);     --zone-bg: #EEF0F2; }
body[data-zone="region"] { --zone: var(--cmt-region); --zone-ink: var(--cmt-region-text); --zone-bg: var(--cmt-region-bg); }
body[data-zone="data"]   { --zone: var(--cmt-data);   --zone-ink: #556A80;      --zone-bg: var(--cmt-data-bg); }

/* ヘッダーの下の線・選んでいるメニュー */
body[data-zone] .cmt-header { box-shadow: inset 0 -3px 0 var(--zone); }
body[data-zone] .cmt-header-nav a[aria-current="page"] { color: var(--zone-ink) !important; border-bottom-color: var(--zone) !important; }
body[data-zone] .cmt-bnav a[aria-current="page"] { color: var(--zone-ink); }
body[data-zone] .cmt-bnav a[aria-current="page"]::before { background: var(--zone); }
body[data-zone] .cmt-eyebrow { color: var(--zone-ink); }

/* 区域の帯（ヘッダーのすぐ下・いまどこに居るか） */
.cmt-zonebar { background: var(--zone-bg); border-bottom: 1px solid color-mix(in srgb, var(--zone) 22%, transparent); }
.cmt-zonebar-in { max-width: 1240px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--zone-ink); letter-spacing: .04em; }
.cmt-zonebar-in i { width: 10px; height: 10px; background: var(--zone); flex: none; }
.cmt-zonebar-in span { color: var(--cmt-text-sub); font-weight: 400; }
@media (min-width: 1080px) { .cmt-zonebar-in { padding: 8px 24px; } }
@media (min-width: 1080px) { body[data-zone-watch="map"] .cmt-zonebar { display: none; } }

/* 分析・統計資料の中の印も区域の色に */
body[data-zone="data"] .st-switch a[aria-current="page"] { border-color: var(--zone); box-shadow: inset 0 -3px 0 var(--zone); }
body[data-zone="data"] .st-switch a[aria-current="page"] svg, body[data-zone="data"] .st-switch a[aria-current="page"] b, body[data-zone="data"] .st-switch a[aria-current="page"]::after { color: var(--zone-ink); }
body[data-zone="data"] .st-crumb a { color: var(--zone-ink); }
body[data-zone="data"] .st-door-main::before { background: var(--zone); }
body[data-zone="data"] .st-door:first-child .st-door-main::before { background: var(--cmt-navy); }
body[data-zone="data"] .ld-col[data-on="b"] i, body[data-zone="data"] .ld-row-bars .ld-b { background: var(--zone); }
body[data-zone="data"] .ld-col[data-on="a"] i, body[data-zone="data"] .ld-key-a { box-shadow: inset 0 0 0 2px var(--zone); border-color: var(--zone); }
body[data-zone="data"] .ld-col[data-on] .ld-col-y { color: var(--zone-ink); }
body[data-zone="data"] .an-key--now[style*="navy"] { background: var(--zone) !important; }
body[data-zone="data"] .ld-tl-year { color: var(--zone-ink); border-bottom-color: var(--zone); }
body[data-zone="data"] .lib-more { border-color: var(--zone); color: var(--zone-ink); }
body[data-zone="data"] .lib-more:hover { background: var(--zone); color: #fff; }

/* テーマ（車・バイク・地域）の見出しの印 */
/* 見出しの印はテーマの最初の画面の帯で出す */

/* テーマの最初の画面（写真が無いとき）は区域の淡い色の地。左に区域の色の帯 */
body[data-zone] .th-hero--plain { background: linear-gradient(90deg, var(--zone) 0 6px, var(--zone-bg) 6px); }
body[data-zone] .th-hero--plain h1, body[data-zone] main .th-hero h1 { border-left: 0; padding-left: 0; }
/* 地域のページ: 自動車の欄は青・バイクの欄は青緑で、欄の中の印もその色 */
[data-kind-panel="car"]  { --zone: var(--cmt-car);  --zone-ink: #1869B0;       --zone-bg: var(--cmt-car-bg); }
[data-kind-panel="bike"] { --zone: var(--cmt-bike); --zone-ink: #10766F; --zone-bg: var(--cmt-bike-bg); }
[data-kind-panel] .cmt-eyebrow { color: var(--zone-ink) !important; }
@media (min-width: 1080px) { body[data-zone] .cmt-header-nav a[aria-current="page"] { background: var(--zone-bg); } }
/* 一覧・地図: 選んだ種類のボタンは区域の色 */
body[data-zone="car"] button[data-val="car"][aria-pressed="true"],
body[data-zone="bike"] button[data-val="bike"][aria-pressed="true"],
body[data-zone="buyer"] button[data-val="buyer"][aria-pressed="true"] { background: var(--zone-ink) !important; border-color: var(--zone-ink) !important; color: #fff !important; }