/* ========================================
 * page-pc.css
 * PCページネーション
 * ======================================== */

/* ページネーション */
.page-nav { display: flex; align-items: center; gap: var(--padd-2); flex-wrap: wrap; padding: var(--padd-2); background-color: var(--colr-2); border-radius: var(--radi-1); margin-top: var(--padd-2); }

/* 共通ボタン */
.page-first, .page-prev, .page-num, .page-now, .page-next, .page-last { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: var(--padd-3); border: 1px solid var(--colr-1); border-radius: var(--radi-1); color: var(--colr-1); font-weight: var(--fwgt-1); text-decoration: none; }

/* ホバー */
.page-first:hover, .page-prev:hover, .page-num:hover, .page-next:hover, .page-last:hover { border-color: var(--colr-3); color: var(--colr-3); }

/* 現在ページ */
.page-now { background-color: var(--colr-1); color: var(--colr-2); }

/* 現在ページホバー */
.page-now:hover { background-color: var(--colr-3); border-color: var(--colr-3); color: var(--colr-2); }

/* 非活性 */
.page-disab { opacity: 0.4; pointer-events: none; }

/* ページ情報 */
.page-info { font-size: var(--font-1); color: var(--colr-1); margin-left: auto; }

/* ページ移動ボックス */
.page-jump { width: 50px; height: 36px; border: 1px solid var(--colr-1); border-radius: var(--radi-1); text-align: center; color: var(--colr-1); font-weight: var(--fwgt-1); }

/* ページ移動ボックスフォーカス */
.page-jump:focus { outline: none; border-color: var(--colr-3); color: var(--colr-3); }

/* ページ移動ボックスのラッパー（吹き出しの位置基準にする） */
.page-jump-wrap { position: relative; display: inline-flex; }

/* フォーカス中はプレースホルダーを非表示にする */
.page-jump:focus::placeholder { color: transparent; }

/* ヒント吹き出し（普段は透明・非表示） */
.page-jump-hint { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background-color: var(--colr-1); color: var(--colr-2); font-size: var(--font-1); font-weight: var(--fwgt-1); padding: var(--padd-3); border-radius: var(--radi-1); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 999; }

/* 吹き出しの三角 */
.page-jump-hint::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--colr-1) transparent transparent transparent; }

/* フォーカス中だけヒントを表示する */
.page-jump:focus + .page-jump-hint { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }