/* ==========================================================================
   Pagination (Clean & Spaced)
   ========================================================================== */

#paging {
    margin: auto;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0 40px 0;
    list-style: none;
    padding: 0;
    
    /* ▼ 修正：ボタン同士の間隔をここで設定します */
    gap: 12px; 
}

/* ボタンの入れ物（リストアイテム） */
.pagination li {
    width: 42px;
    height: 50px;
    /* float: left; は不要なので削除 */
}

/* 実際のボタン（リンク） */
.pagination > li > a {
    display: inline-block;
    width: 100%;
    padding: 0;
    text-align: center;
    
    color: var(--color-text);
    background-color: #ffffff;
    border: none; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    
    margin: 0 4px;
    border-radius: 8px;
    transition: all 0.3s ease; /* 動きを滑らかに */
}

/* アクティブ（現在のページ） */
.pagination > .active > a {
    background-color: var(--color-accent); /* テーマのくすみブルー */
    color: #ffffff;
    border-color: var(--color-accent);
    pointer-events: none; /* クリック不可に */
}

/* ホバー時 */
.pagination > li > a:hover {
    background-color: var(--color-hover);
    color: #ffffff;
    transform: translateY(-2px); /* 少し浮く */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* クリックできない矢印（最初のページで「前へ」など） */
.pagination > .not-allow > a,
.pagination > .not-allow > a:hover {
    color: #ccc;
    background-color: #f9f9f9;
    border-color: #eee;
    cursor: default;
}