/**
 * assets/sliding-pagination/sliding-pagination.css
 * 役割: 記事一覧の最上部に複製される「1〜10」ページ切替バー(.pagination-top)を
 *       中央寄せ＋余白＋薄い背景で「ページ切替バー」として見やすく目立たせる（R080607f）。
 *
 * 対象は上部複製(.pagination-top)のみ。位置は最上部のまま（JS の挿入位置は変更しない）。
 * 下部の元ページネーション(.pagination 単体)はテーマ既定のままにする。
 * 上書きは .pagination-top（= .pagination .pagination-top の複合クラス）と
 * リンクの .inactive / span.current で行い、テーマ .pagination 既定より高い詳細度にする。
 * JS がインラインで付ける margin-bottom:20px は !important で上書きする。
 */

/* バー本体：中央寄せ・余白・薄い枠/背景で「切替バー」として目立たせる */
.pagination-top {
    text-align: center !important;
    margin: 8px auto 24px !important;
    padding: 10px 14px;
    background: #f5f7fc;
    border: 1px solid #dde3ef;
    border-radius: 10px;
    line-height: 1.9;
    white-space: nowrap;              /* 頁番号を必ず 1 行に（折り返し禁止・R080607i） */
    overflow-x: auto;                 /* 万一はみ出す幅でも折り返さず横スクロール（主にスマホ） */
    -webkit-overflow-scrolling: touch;
}

/* ページ番号・矢印リンク／現在地：ボタン状にして押しやすく・現在地を強調 */
.pagination-top a,
.pagination-top span.current {
    display: inline-block;
    min-width: 1.8em;
    margin: 2px 2px;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;
}
.pagination-top a.inactive {
    color: #15418a;
    background: #ffffff;
    border: 1px solid #d3dcef;
}
.pagination-top a.inactive:hover {
    background: #e7edfb;
    border-color: #15418a;
}
.pagination-top span.current {
    background: #15418a;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #15418a;
}

/* 省略記号「…」：番号ボタンとは区別（押せない・控えめ。窓とラスト2頁の間の省略を示す）R080607g */
.pagination-top .pagination-ellipsis {
    display: inline-block;
    margin: 2px 2px;
    padding: 4px 4px;
    color: #888888;
    vertical-align: middle;
}

/* スマホ：折り返し時も中央で整列・間隔を詰める */
@media ( max-width: 600px ) {
    .pagination-top {
        padding: 8px 8px;
        line-height: 1.8;
    }
    .pagination-top a,
    .pagination-top span.current {
        margin: 2px 2px;
        padding: 4px 7px;
    }
}