:root{
  --max:1200px; --pad:22px;
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb;
  --card:#fff; --bg:#f6f8fb;
  --accent:#0ea5e9; --accent2:#22c55e; --accent3:#f59e0b; --accent4:#8b5cf6;
  --radius:14px; --shadow:0 8px 20px rgba(2,6,23,.06);
}

.wrap{max-width:var(--max);margin:0 auto;padding:28px var(--pad)}
.cat-hero{background:var(--bg);border-bottom:1px solid var(--line)}
.cat-title{margin:0 0 8px;font-size:clamp(22px,3.2vw,30px);line-height:1.25;color:var(--ink)}
.breadcrumbs{margin:0 0 10px;color:#64748b;font-size:14px}
.cat-desc{color:var(--muted);font-size:15px}

.cat-board{background:#fff}
.cat-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.cat-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;transition:.2s ease transform,.2s ease box-shadow
}
.cat-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(2,6,23,.08)}
.thumb-wrap{position:relative;display:block}
.thumb{width:100%;height:180px;object-fit:cover;display:block;background:#f1f5f9}
.badge{
  position:absolute;left:10px;top:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent4));color:#fff;
  font-size:12px;padding:4px 8px;border-radius:999px
}
.info{padding:14px 16px}
.tit{margin:0 0 8px;font-size:17px;line-height:1.4;color:var(--ink)}
.tit a{text-decoration:none;color:inherit}
.tit a:hover{opacity:.9;text-decoration:underline}
.excerpt{margin:0 10px 10px 0;color:var(--muted);font-size:14px;line-height:1.6}
.vis-url{display:none}
.meta{color:#94a3b8;font-size:13px}

.pagination{margin:22px 0 6px}
.pagination ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pagination a,.pagination span{
  display:inline-block;border:1px solid var(--line);padding:8px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink);background:#fff
}
.pagination .current{background:var(--bg);border-color:#cbd5e1}

.no-posts{padding:40px 0;color:var(--muted)}
@media (min-width:1024px){
  .thumb{height:190px}
}