#main .x-diff-up      { color:#1a9c4c; font-weight:bold; }
#main .x-diff-up-warm { color:#d2691e; font-weight:bold; } /* 増加幅2〜5位（濃いオレンジ） */
#main .x-diff-up-hot  { color:#d6324b; font-weight:bold; } /* 増加幅1位（赤） */
#main .x-diff-down { color:#d6324b; font-weight:bold; }
#main .x-diff-flat { color:#888; }
#main .x-diff-new  { color:#2b7de9; font-weight:bold; }
/* ランキングカード（1行にまとめる）。縦1列で並べ、横幅は最大500pxで中央寄せ。 */
#main .xf-list {
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    max-width:500px;
    margin-left:auto; margin-right:auto;
    margin-top:4px; /* 見出し行との隙間を詰める（既定の10pxを上書き） */
}
#main .xf-card { flex-direction:row; align-items:center; gap:8px; padding:8px 14px; }
#main .xf-rank {
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; min-width:26px; height:1.7em; padding:0;
    background:#1f9c4c; color:#fff !important;
    font-weight:bold; font-size:0.82em; border-radius:6px;
}
#main .xf-rank-1 { background:#e0a800; } /* 金 */
#main .xf-rank-2 { background:#9aa0a6; } /* 銀 */
#main .xf-rank-3 { background:#cd7f32; } /* 銅 */
#main .xf-name {
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-weight:bold; font-size:0.95em;
}
#main .xf-count { flex-shrink:0; width:88px; text-align:right; font-weight:bold; font-size:1.0em; color:#1f2937; white-space:nowrap; }
#main .xf-unit { font-weight:normal; font-size:0.78em; color:#6b7280; margin-left:1px; }
#main .xf-diff { flex-shrink:0; width:64px; white-space:nowrap; font-size:0.9em; text-align:right; }
/* 列見出し：カード(.card.xf-card)と同じ構造・同じ列クラスを流用し、
   背景・枠・影だけ消す。これでカードと必ず同じ列位置に並ぶ。 */
#main .xf-head.xf-card {
    box-sizing:border-box;
    max-width:500px; margin:0 auto;
    background:none; border-color:transparent; box-shadow:none;
    padding-top:2px; padding-bottom:0; cursor:default;
}
#main .xf-head.xf-card:hover { transform:none; box-shadow:none; }
#main .xf-head .xf-rank {
    background:none !important; color:#9099a7 !important;
    font-weight:700; font-size:0.72em;
}
#main .xf-head .xf-name,
#main .xf-head .xf-count,
#main .xf-head .xf-diff {
    color:#9099a7; font-weight:700; font-size:0.72em; letter-spacing:.04em;
}
/* 順位推移バンプチャート */
#main .xf-bump-wrap { margin:2px auto 10px; }
/* スマホ・PCとも #main の幅いっぱいに表示（viewBox付きなので全体が拡大縮小） */
#main .xf-bump { display:block; width:100%; height:auto; }
#main .xf-bump-guide { stroke:#e6e9ef; stroke-width:1; }
#main .xf-bump-month { fill:#6b7280; font-size:11px; font-weight:700; }
#main .xf-bump-nodata { fill:#c6ccd6; font-size:11px; font-weight:700; letter-spacing:3px; }
#main .xf-bump-label { font-size:10px; }
#main .xf-bump-note { font-size:0.82em; color:#888; text-align:center; margin:2px 0 4px; }