/*
 * 記事一覧 /articles/ の新UI版（WordPress テンプレート page-kyouma-ui-articles.php。2026-10-29 No.007-②）。
 * 共通UI（kyouma-ui.css）の黒背景・トークンを使う。PC（760px〜）3列・スマホ1列。アイキャッチは 16:9 にそろえる（object-fit: cover）。
 */
.ka-list h1 { margin: 0; color: #fff; font-size: 22px; line-height: 1.35; }
.ka-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.ka-item { margin: 0; min-width: 0; }
.ka-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #303842; border-radius: var(--kui-radius); background: var(--kui-paper); color: var(--kui-text); text-decoration: none; }
.ka-card:hover { border-color: var(--kui-accent-line); }
.ka-card:focus-visible { outline: 3px solid var(--kui-focus); outline-offset: 2px; }
.ka-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1b2129; }
.ka-thumb img, .ka-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka-thumb.is-empty { display: grid; place-items: center; background: linear-gradient(135deg, #1b2129, #11151a); }
.ka-thumb-label { color: #6f7a87; font-size: 20px; font-weight: 800; letter-spacing: .12em; }
.ka-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.ka-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--kui-muted); font-size: 12px; }
.ka-cat { padding: 1px 8px; border: 1px solid var(--kui-accent-line); border-radius: 999px; background: var(--kui-accent-soft); color: #d9f5e6; font-weight: 700; white-space: nowrap; }
.ka-date { font-variant-numeric: tabular-nums; }
.ka-title { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.ka-title img.emoji { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .07em !important; vertical-align: -.1em !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.ka-empty { margin: 16px 0 4px; padding: 18px 8px; border: 1px dashed var(--kui-line-strong); border-radius: 12px; color: var(--kui-muted); text-align: center; }

/* ページ送り（paginate_links の a.page-numbers・span.current）。押せる大きさ 44px。
   Cocoon の .page-numbers（幅・高さ 46px 固定・line-height 44px・margin）を打ち消す（「‹ 前へ」「次へ ›」が折り返さないように。No.007-③-B） */
.ka-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.ka-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; height: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid #4a5662; border-radius: 9px; background: #212831; color: #f7f8fa; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.ka-pager a.page-numbers:hover { border-color: var(--kui-accent); }
.ka-pager .page-numbers.current { border-color: var(--kui-accent-line); background: var(--kui-accent-soft); color: #fff; box-shadow: inset 0 -2px 0 var(--kui-accent); }
.ka-pager .page-numbers.dots { border-color: transparent; background: none; }

@media (min-width: 760px) {
  .ka-list h1 { font-size: 24px; }
  .ka-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ka-title { font-size: 15px; }
}