/* =====================================================
===================================================== */
:root{
--ink:#0f172a; --muted:#667085; --bg:#0b1020; --card:#0f172a; --chip:#0e7490;
--a:#22d3ee; --b:#6366f1; --ring:rgba(99,102,241,.35); --radius:18px;
}


.ww-blog{color:#e5e7eb; background:linear-gradient(180deg,#0b1020 0%,#0a0f1a 100%);}
.container{max-width:1160px; padding:0 20px; margin-inline:auto;}
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}


/* Hero */
.ww-archive-hero{padding:56px 0 28px; border-bottom:1px solid rgba(255,255,255,.06);}
.ww-archive-hero .eyebrow{letter-spacing:.12em; font-size:.8rem; opacity:.8}
.ww-archive-hero .title{font-size:clamp(1.6rem,2.2vw,2.4rem); line-height:1.3; margin:.3em 0 .4em;}
.ww-archive-hero .lead{color:#cbd5e1; max-width:70ch}
.breadcrumbs{margin-top:12px; font-size:.9rem; opacity:.9}


/* Filter */
.ww-archive-filter{padding:22px 0 8px}
.ww-archive-filter__form{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.ww-archive-filter input[type="search"]{background:#0e162b; border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:12px 16px; color:#fff}
.ww-archive-filter .btn{padding:12px 18px; border-radius:999px; background:linear-gradient(90deg,var(--a),var(--b)); border:none; color:#001018; font-weight:700}
.chips{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:#d1d5db; text-decoration:none}
.chip:hover{border-color:rgba(255,255,255,.25)}


/* Grids */
.grid{display:grid; gap:18px}
.grid--featured{grid-template-columns:1fr;}
.grid--cards{grid-template-columns:repeat(1,minmax(0,1fr));}
@media(min-width:768px){
.grid--featured{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1080px){
.grid--cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}


/* Card */
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden; position:relative; transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(2,9,27,.45)}
.card--featured{border-color:rgba(34,211,238,.35)}
.card__link{color:inherit; text-decoration:none; display:grid; grid-template-rows:auto 1fr}
.card__media{position:relative; aspect-ratio:1200/675; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; left:10px; top:10px; font-size:.75rem; background:rgba(2,8,23,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); padding:4px 10px; border-radius:999px}
.card__body{padding:14px 14px 16px}
.card__title{font-size:clamp(1.0rem,1.4vw,1.25rem); line-height:1.35; margin:0 0 .35em}
.card__ex{color:#cbd5e1; font-size:.95rem; margin:0 0 .9em}
.meta{display:flex; gap:10px; flex-wrap:wrap; font-size:.83rem; color:#9fb3d9}
.meta__cat a{color:#cfe7ff}


/* Sections */
.section-title{font-size:1.2rem; letter-spacing:.08em; margin:28px 0 14px; display:flex; align-items:center; gap:.6em}
.section-title span{display:inline-grid; place-items:center; width:1.8em; height:1.8em; border-radius:6px; background:linear-gradient(180deg,var(--a),var(--b)); color:#05121c; font-weight:700}


/* Pagination */
.ww-pagination{display:flex; justify-content:center; padding:24px 0 44px}
.ww-pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 4px; border-radius:10px; background:#0e162b; border:1px solid rgba(255,255,255,.08); text-decoration:none; color:#e5e7eb}
.ww-pagination .current{background:linear-gradient(180deg,var(--a),var(--b)); color:#001018; font-weight:700}


/* 小さな微アニメ */
.card__media::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 20% 10%,rgba(99,102,241,.15),transparent), radial-gradient(40% 40% at 90% 0%,rgba(34,211,238,.14),transparent); opacity:.35}