記事一覧のページネーション機能追加（1ページ20件表示）

## 1. 目的
現在 `pages/list.php` は `LIMIT 80` で最大80件を一括取得・表示しているため、記事が増えると画面が縦に長くなりスクロールが重くなる。1ページ20件のページネーションを導入し、スマホ・PCともに快適に閲覧できるようにする。

## 2. 具体的な仕様

### 2-1. URL パラメータ
- `p`（ページ番号、1始まり、未指定時は1）を追加。既存の `q`/`category`/`tag`/`difficulty` パラメータは全てそのまま維持する。

### 2-2. PHPロジック（pages/list.php）
- 1ページあたりの件数を定数 `PER_PAGE = 20` とする。
- `$page_num = max(1, (int)($_GET['p'] ?? 1));`
- WHERE句の組み立ては既存コードをそのまま流用。
- 総件数取得用に `SELECT COUNT(*) total FROM shiftmemo_articles WHERE ...` を同じ `$params` で実行し `$total` を得る。
- 記事取得クエリを `ORDER BY updated_at DESC, id DESC LIMIT 20 OFFSET ?` に変更。OFFSET = `($page_num - 1) * PER_PAGE`。
- 総ページ数 `$total_pages = max(1, (int)ceil($total / PER_PAGE));`
- `$page_num` が `$total_pages` を超える場合は1にリセット。

### 2-3. ページネーション UI
- 記事一覧の下部（サイドバーの外、`<section>` の閉じ直前）にページネーションブロックを追加。
- 表示形式（PCもスマホも同じシンプルな横並び）:
```
[前へ] 1 2 3 ... 12 [次へ] （20件 / 全234件）
```
- 前へ・次へは `$page_num <= 1` / `$page_num >= $total_pages` のとき disabled 表示（`<span class="btn disabled">` など）。
- ページ番号リンクは現在ページを強調（クラス `active`）。
- 全ページ数が7以上の場合は「現在±2ページ＋先頭・末尾＋…」の省略表示にする。
- リンクは既存の検索パラメータを全て引き継ぐ（`http_build_query(['page'=>'list','q'=>$q,'category'=>$category,'tag'=>$tag,'difficulty'=>$difficulty,'p'=>$n])`）。

### 2-4. CSS
- `.pagination { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:16px 0; }`
- `.pagination .btn.active { background:#1d4ed8; color:#fff; }`
- `.pagination .btn.disabled { opacity:.4; pointer-events:none; }`
- 既存の `.btn` スタイルを流用するので追加CSSは最小限。

## 3. 既存機能との整合
- 検索・カテゴリ・タグ・難易度フィルタは全て維持。絞り込み後の件数にもページネーションが適用される。
- 管理ダッシュボード（admin.php）の `LIMIT 80` 一覧は変更しない。
- `top_articles()` のサイドバーランキングは変更しない。
- 印刷ビュー・記事詳細・編集・コメント機能には一切影響しない。
- 変更対象ファイルは `pages/list.php` と共通CSS（`app_header` 内のスタイルブロック）のみ。