/* アクセス解析ページ専用スタイル (an- プレフィックスで console.css と非干渉) */
.an-period { display:inline-flex; gap:4px; padding:4px; background:#F1F3F5; border-radius:999px; }
.an-period button {
    padding:6px 16px; border:none; background:none; cursor:pointer;
    font-size:13px; font-weight:600; color:#6B7280; border-radius:999px;
}
.an-period button.is-active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(0,0,0,.1); }

.an-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.an-kpi {
    background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:18px 20px;
}
.an-kpi__label { font-size:12px; color:#6B7280; margin-bottom:6px; }
.an-kpi__value { font-size:30px; font-weight:800; line-height:1.1; color:#111827; }
.an-kpi__value small { font-size:14px; font-weight:600; color:#9CA3AF; margin-left:3px; }
.an-kpi__trend { display:inline-block; margin-top:8px; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; }
.an-kpi__trend--up   { color:#047857; background:#D1FAE5; }
.an-kpi__trend--down { color:#B91C1C; background:#FEE2E2; }
.an-kpi__trend--flat { color:#6B7280; background:#F3F4F6; }
.an-kpi__trend--new  { color:#fff;    background:#F59E0B; }

.an-chart { width:100%; height:auto; display:block; }
.an-chart-empty, .an-empty { text-align:center; color:#9CA3AF; padding:32px 16px; font-size:13px; }

.an-bar { display:flex; height:30px; border-radius:6px; overflow:hidden; margin-bottom:12px; }
.an-bar__seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.an-legend { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.an-legend__item { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 8px; background:#F9FAFB; border-radius:6px; }
.an-legend__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.an-legend__label { flex:1; color:#4B5563; }
/* ---------- スマホ (≤640px): KPI 縦並び ---------- */
@media (max-width: 640px) {
    .an-kpis { grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
    .an-kpi { padding:12px 14px; }
    .an-kpi__value { font-size:26px; }
}
.an-legend__val { font-weight:700; color:#111827; }

.an-pages { display:flex; flex-direction:column; gap:2px; }
.an-page-row { display:grid; grid-template-columns:28px 1fr 70px; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid #F3F4F6; }
.an-page-row:last-child { border-bottom:none; }
.an-page-rank { font-weight:700; color:#9CA3AF; text-align:center; font-size:13px; }
.an-page-path { min-width:0; }
.an-page-path code { font-size:12px; color:#374151; word-break:break-all; }
.an-page-track { height:5px; background:#F3F4F6; border-radius:999px; margin-top:4px; overflow:hidden; }
.an-page-fill { height:100%; background:#2D6A4F; border-radius:999px; }
.an-page-pv { text-align:right; font-weight:700; font-size:14px; color:#111827; }
.an-page-pv small { font-size:11px; font-weight:500; color:#9CA3AF; }

@media (max-width:720px) { .an-kpis { grid-template-columns:1fr; } .an-legend { grid-template-columns:1fr; } }