.blog-page-wrap { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:5rem 2rem 6rem; }
.blog-page-header { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:3rem; }
.blog-page-title { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.04em; margin-bottom:.5rem; }
.blog-page-count { font-size:.9rem; color:var(--muted); }
.blog-search-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.85rem; cursor:pointer; transition:all .15s; font-family:inherit; }
.blog-shortcut-kbd { font-size:.65rem; padding:.1rem .35rem; border-radius:3px; background:var(--surface); border:1px solid var(--border); color:var(--subtle); font-family:var(--mono); }
.blog-title-compact { font-size:.9rem; }
.blog-pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:3.5rem; }
.blog-page-nav-link { display:flex; align-items:center; gap:.4rem; padding:.55rem 1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; font-size:.85rem; color:var(--muted); text-decoration:none; transition:all .15s; }
.blog-page-num { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; font-size:.85rem; font-weight:500; text-decoration:none; transition:all .15s; background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.blog-page-num.is-current { background:var(--accent); color:#fff; border:1px solid transparent; }
.blog-page-num:not(.is-current):hover { color:var(--text); border-color:var(--border-h); }
.blog-search-btn:hover { border-color:var(--border-h) !important; color:var(--text) !important; }
.blog-page-nav-link:hover { color:var(--text) !important; border-color:var(--border-h) !important; }