/* ========================================================================
   kicchow D2「世界のパン・トピックス」 専用CSS  (news-board.css)
   接頭辞 .nb- で top-rich.css の .news-board/.news-card/.news-flag と完全分離。
   フラット基調: 1px #C4A882 罫線 / 過度な shadow・グラデは使わない。
   ブランド色: 森 #2C3A24 / メイン #4A7A35 / ホバー #8DB87A /
               麻の葉 #E8DFC8 / ゴールド #D4B896 / 罫線 #C4A882
   フォント: 本文 Zen Maru Gothic / 見出し Kaisei Decol
   ======================================================================== */

/* ---- ローカルトークン（このファイル内のみ・グローバルを汚さない） ---- */
.nb-page {
  --nb-forest:   #2C3A24;
  --nb-main:     #4A7A35;
  --nb-hover:    #8DB87A;
  --nb-asanoha:  #E8DFC8;
  --nb-gold:     #D4B896;
  --nb-line:     #C4A882;
  --nb-paper:    #FFFFFF;
  --nb-ink:      #2C2C2A;
  --nb-mute:     #8A8070;
  --nb-font-body:  'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
  --nb-font-title: 'Kaisei Decol', 'Hiragino Mincho ProN', serif;

  font-family: var(--nb-font-body);
  color: var(--nb-ink);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px 40px;
  box-sizing: border-box;
}
.nb-page *, .nb-page *::before, .nb-page *::after { box-sizing: border-box; }
.nb-page a { color: var(--nb-main); text-decoration: none; transition: color .15s ease; }
.nb-page a:hover { color: var(--nb-hover); }

/* ====================================================================== */
/* [1] 上部: パンくず / 見出し / リード / 最終更新                          */
/* ====================================================================== */
.nb-breadcrumb {
  font-size: 11.5px;
  color: var(--nb-mute);
  padding: 14px 0 4px;
  line-height: 1.6;
}
.nb-breadcrumb a { color: var(--nb-main); }
.nb-breadcrumb a:hover { color: var(--nb-hover); }
.nb-breadcrumb .sep { margin: 0 6px; color: var(--nb-line); }

.nb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  border-bottom: 1px solid var(--nb-line);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.nb-head-title {
  font-family: var(--nb-font-title);
  font-size: 26px;
  font-weight: 700;
  color: var(--nb-forest);
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
}
.nb-head-lead {
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.85;
  color: var(--nb-forest);
  margin: 2px 0 0;
  order: 3;
}
.nb-head-updated {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--nb-mute);
  white-space: nowrap;
  align-self: center;
}

/* 共通: 🍞絵文字つきセクション見出し */
.nb-rail-title,
.nb-list-title,
.nb-side-title {
  font-family: var(--nb-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-forest);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* ====================================================================== */
/* [2] 国別 pill ナビ帯（折返し・横スクロール禁止）                        */
/* ====================================================================== */
.nb-area-nav {
  display: flex;
  flex-wrap: wrap;          /* 折返し。横スクロールはしない */
  gap: 8px;
  margin-bottom: 22px;
}
.nb-area-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--nb-asanoha);
  border: 1px solid var(--nb-line);
  color: var(--nb-forest);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nb-area-pill:hover {
  background: var(--nb-hover);
  border-color: var(--nb-hover);
  color: #fff;
}
.nb-area-pill--active {
  background: var(--nb-main);
  border-color: var(--nb-main);
  color: #fff;
}
.nb-area-pill--active:hover {
  background: var(--nb-main);
  border-color: var(--nb-main);
  color: #fff;
}

/* ====================================================================== */
/* [3] 大型ヒーロー帯 2カラム（左=大判カード / 右=あわせて読みたいレール）  */
/* ====================================================================== */
.nb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}
.nb-hero-main { min-width: 0; }
.nb-hero-rail {
  min-width: 0;
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: var(--nb-paper);
  padding: 16px 16px 8px;
}
.nb-hero-rail .nb-rail-title { margin-bottom: 10px; }

/* ====================================================================== */
/* [4] テーマ別キュレーション帯（帯内のみ横スクロール可）                   */
/* ====================================================================== */
.nb-theme-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;          /* 帯内のみ横スクロール。ページ全体は折返し維持 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px 2px 12px;
  margin-bottom: 30px;
}
.nb-theme-rail::-webkit-scrollbar { height: 7px; }
.nb-theme-rail::-webkit-scrollbar-thumb { background: var(--nb-line); border-radius: 999px; }
.nb-theme-rail::-webkit-scrollbar-track { background: var(--nb-asanoha); border-radius: 999px; }
.nb-theme-card {
  flex: 0 0 240px;           /* 束カード固定幅 */
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: var(--nb-paper);
  padding: 14px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease;
}
.nb-theme-card:hover { border-color: var(--nb-hover); }
.nb-theme-card > .nb-rail-title {
  font-size: 14px;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nb-line);
}

/* ====================================================================== */
/* [5] 2カラム本体（左=新着高密度リスト / 右=ランキングsidebar）            */
/* ====================================================================== */
.nb-body {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);   /* desktop 約60:40 */
  gap: 26px;
  align-items: start;
  margin-bottom: 30px;
}

/* --- 左: 新着の記事 高密度リスト --- */
.nb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--nb-line);
}
.nb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--nb-line);
  color: var(--nb-ink);
  transition: background .12s ease, opacity .15s ease;
}
.nb-row:hover { background: var(--nb-asanoha); }
.nb-row.is-read { opacity: .5; }          /* 既読フェード */
.nb-row-area {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--nb-asanoha);
  border: 1px solid var(--nb-line);
  color: var(--nb-forest);
  white-space: nowrap;
}
.nb-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--nb-ink);
  white-space: nowrap;        /* 1行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-row:hover .nb-row-title { color: var(--nb-main); }
.nb-row-date {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--nb-mute);
  white-space: nowrap;
}

/* --- 右: サイドバー（ランキング） --- */
.nb-side {
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: var(--nb-paper);
  padding: 16px 16px 10px;
  position: sticky;
  top: 16px;
}
.nb-rank-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.nb-rank-tabs a,
.nb-rank-tabs button {
  flex: 1 1 0;
  text-align: center;
  font-family: var(--nb-font-body);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 999px;
  background: var(--nb-asanoha);
  border: 1px solid var(--nb-line);
  color: var(--nb-forest);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nb-rank-tabs a:hover,
.nb-rank-tabs button:hover { background: var(--nb-hover); border-color: var(--nb-hover); color: #fff; }
.nb-rank-tabs a.is-active,
.nb-rank-tabs button.is-active { background: var(--nb-main); border-color: var(--nb-main); color: #fff; }

/* ====================================================================== */
/* ランキング行 兼 あわせて読みたいレール（rank-item.php）                  */
/*   1-3位 = ゴールド #D4B896 / 4-5位 = 森 #2C3A24                          */
/* ====================================================================== */
.nb-rank {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nb-line);
  color: var(--nb-ink);
  transition: opacity .15s ease;
}
.nb-rank:last-child { border-bottom: none; }
.nb-rank.is-read { opacity: .5; }
.nb-rank-badge {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nb-font-title);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--nb-line);   /* 既定（6位以降想定） */
}
.nb-rank.is-gold .nb-rank-badge  { background: var(--nb-gold);   color: var(--nb-forest); }
.nb-rank.is-green .nb-rank-badge { background: var(--nb-forest); color: #fff; }
.nb-rank .nb-rank-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--nb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-rank:hover .nb-rank-title { color: var(--nb-main); }
.nb-rank .nb-rank-meta { font-size: 10.5px; color: var(--nb-mute); margin-top: 2px; }
/* rail コンテキスト（[3]右）はサムネ小を許容 */
.nb-rank--rail .nb-rank-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--nb-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.nb-rank--rail .nb-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ====================================================================== */
/* 共通カード部品 card.php（hero / standard / compact）                    */
/* ====================================================================== */
.nb-card {
  display: flex;
  flex-direction: column;
  background: var(--nb-paper);
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--nb-ink);
  transition: border-color .15s ease;
}
.nb-card:hover { border-color: var(--nb-hover); }

.nb-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--nb-asanoha);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nb-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネ欠落時: #D4B896 地 + 🍞 */
.nb-card-thumb--empty {
  background: var(--nb-gold);
  font-size: 40px;
  color: var(--nb-forest);
}
.nb-card-area {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--nb-forest);
  color: #fff;
}
.nb-card-body { padding: 12px 14px 14px; }
.nb-card-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--nb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-card:hover .nb-card-title { color: var(--nb-main); }
.nb-card-excerpt {
  font-size: 12px;
  color: var(--nb-mute);
  line-height: 1.7;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-card-date { font-size: 11px; color: var(--nb-mute); }
.nb-card.is-read { opacity: .5; }

/* --- hero: 大判（写真大・見出し大） --- */
.nb-card--hero .nb-card-title {
  font-family: var(--nb-font-title);
  font-size: 20px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  margin-bottom: 8px;
}
.nb-card--hero .nb-card-area { font-size: 12px; padding: 5px 13px; }
.nb-card--hero .nb-card-body { padding: 16px 18px 18px; }
.nb-card--hero .nb-card-excerpt { font-size: 13px; -webkit-line-clamp: 2; }

/* --- compact: 関連2枚グリッド/レール用（薄め） --- */
.nb-card--compact { border-radius: 12px; }
.nb-card--compact .nb-card-title { font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; }
.nb-card--compact .nb-card-body { padding: 10px 12px 12px; }
.nb-card--compact .nb-card-area { font-size: 10.5px; padding: 3px 9px; top: 8px; left: 8px; }

/* ====================================================================== */
/* [6] 続きを読む ボタン（#4A7A35 アウトライン・ホバー反転）                */
/* ====================================================================== */
.nb-more-wrap { text-align: center; margin: 22px 0 4px; }
.nb-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nb-font-body);
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 30px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--nb-main);
  color: var(--nb-main);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nb-more-btn:hover {
  background: var(--nb-main);   /* ホバー反転 */
  color: #fff;
  border-color: var(--nb-main);
}
.nb-more-btn[disabled],
.nb-more-btn.is-done {
  opacity: .45;
  cursor: default;
  background: transparent;
  color: var(--nb-mute);
  border-color: var(--nb-line);
}

/* ====================================================================== */
/* [7] フッターCTA（保存したニュース棚 / RSS購読）                          */
/* ====================================================================== */
.nb-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 34px 0 8px;
}
.nb-cta-bookmark {
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: var(--nb-paper);
  padding: 18px 20px;
}
.nb-cta-bookmark h3 {
  font-family: var(--nb-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-forest);
  margin: 0 0 8px;
}
.nb-cta-bookmark p {
  font-size: 12.5px;
  color: var(--nb-forest);
  line-height: 1.8;
  margin: 0 0 12px;
}
.nb-cta .nb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--nb-main);
  color: #fff;
  border: 1px solid var(--nb-main);
  transition: background .15s ease, border-color .15s ease;
}
.nb-cta .nb-cta-btn:hover { background: var(--nb-hover); border-color: var(--nb-hover); color: #fff; }
/* ブックマーク棚: JSが .nb-bookmark-list に保存記事を流し込む */
.nb-cta-bookmark .nb-bookmark-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-cta-bookmark .nb-bookmark-list li {
  border-bottom: 1px solid var(--nb-line);
  padding: 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.nb-cta-bookmark .nb-bookmark-list li:last-child { border-bottom: none; }
.nb-cta-bookmark .nb-bookmark-empty { font-size: 12px; color: var(--nb-mute); margin: 0; }

/* ====================================================================== */
/* [8] 単記事末尾: ネクストカード + 同国/同テーマ関連2枚                    */
/* ====================================================================== */
.nb-next {
  border-top: 1px solid var(--nb-line);
  margin-top: 36px;
  padding-top: 24px;
}
.nb-next-title {
  font-family: var(--nb-font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--nb-forest);
  margin: 0 0 14px;
  line-height: 1.4;
}
/* 大きな ▶続けて読む ネクストカード（横長・1本） */
.nb-next-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--nb-paper);
  margin-bottom: 22px;
  transition: border-color .15s ease;
}
.nb-next-card:hover { border-color: var(--nb-hover); }
.nb-next-card .nb-next-thumb {
  flex: 0 0 38%;
  max-width: 240px;
  aspect-ratio: 16 / 9;
  background: var(--nb-asanoha);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.nb-next-card .nb-next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nb-next-card .nb-next-thumb--empty { background: var(--nb-gold); font-size: 32px; color: var(--nb-forest); }
.nb-next-card .nb-next-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nb-next-card .nb-next-kicker {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--nb-main);
}
.nb-next-card .nb-next-headline {
  font-family: var(--nb-font-title);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--nb-forest);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nb-next-card:hover .nb-next-headline { color: var(--nb-main); }
.nb-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ====================================================================== */
/* レスポンシブ: mobile 縦積み（768px 以下）                               */
/* ====================================================================== */
@media (max-width: 768px) {
  .nb-page { padding: 0 12px 32px; }
  .nb-head-title { font-size: 21px; }
  .nb-head-updated { flex: 1 1 100%; order: 4; }

  /* [3] ヒーロー縦積み */
  .nb-hero { grid-template-columns: 1fr; gap: 18px; }

  /* [5] 本体縦積み: サイドバーは追従解除 */
  .nb-body { grid-template-columns: 1fr; gap: 22px; }
  .nb-side { position: static; top: auto; }

  /* [4] テーマ帯はカード幅を少し狭める */
  .nb-theme-card { flex-basis: 78vw; max-width: 280px; }

  /* hero カード見出しを抑える */
  .nb-card--hero .nb-card-title { font-size: 17px; }

  /* [7] CTA 縦積み */
  .nb-cta { grid-template-columns: 1fr; }

  /* [8] ネクストカード縦積み・関連2枚は1列 */
  .nb-next-card { flex-direction: column; }
  .nb-next-card .nb-next-thumb { flex-basis: auto; max-width: none; width: 100%; }
  .nb-next-grid { grid-template-columns: 1fr; }
}

/* 高密度リストの行: モバイルで見出し折返しを許す（読みやすさ優先） */
@media (max-width: 480px) {
  .nb-row { flex-wrap: wrap; gap: 6px 8px; }
  .nb-row-title { flex: 1 1 100%; white-space: normal; -webkit-line-clamp: 1; }
  .nb-row-date { order: 2; }
}

/* ====================================================================== */
/* D2 補足ブロック（base 末尾追補）                                         */
/*   archive-news.php / 各部品 / news-board.js が要求する未定義クラスを補う。 */
/*   すべて .nb-page 配下 ＝ 既存 --nb-* 変数を継承。base 規則は非破壊。       */
/* ====================================================================== */

/* [1] h1 内サブ（「／ 国名」） */
.nb-head-sub {
  font-family: var(--nb-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--nb-main);
  margin-left: 6px;
}

/* 空状態（一覧0件 / ランキング集計中）。<p> でも <li> でも使う */
.nb-empty {
  list-style: none;
  font-size: 13px;
  color: var(--nb-mute);
  line-height: 1.8;
  padding: 14px 2px;
  margin: 0;
}

/* [5] 左カラム wrapper（grid セルの収縮を許可。行コンテナ自体は base .nb-list） */
.nb-list-main { min-width: 0; }

/* [5] 新着リスト各行の保存ボタン（list-row.php の <button class="nb-row-bm">） */
.nb-row-bm {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  color: var(--nb-forest);
  transition: opacity .15s ease, transform .12s ease;
}
.nb-row-bm:hover { opacity: 1; transform: scale(1.12); }
.nb-row-bm.is-saved { opacity: 1; }

/* カード右上の保存ボタン（card.php の .nb-card-bm。card root の <a> 内に置くため
   クリックは news-board.js が preventDefault で遷移を止める） */
.nb-card-bm {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 3px rgba(44, 58, 36, .25);
  transition: transform .12s ease, background .15s ease;
}
.nb-card-bm:hover { transform: scale(1.12); background: #fff; }
.nb-card-bm.is-saved { background: var(--nb-gold); }

/* [3][5] ランキング/レールの <ol> 化と、リンク/本文の内部レイアウト
   （rank-item.php: <li.nb-rank> > [.nb-rank-badge] + <a.nb-rank-link> >
     [.nb-rank-thumb] + <span.nb-rank-body> > [.nb-rank-title][.nb-rank-meta]） */
.nb-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-rank-link {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.nb-rank-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* [4] テーマ帯セクション見出し「🍞 テーマで読む」（base 共通見出しと同じ見た目） */
.nb-theme-title {
  font-family: var(--nb-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-forest);
  margin: 0 0 12px;
  line-height: 1.4;
}
/* [4] 束カードのヘッダ（theme-rail.php: .nb-theme-card-head > .nb-theme-card-label） */
.nb-theme-card-head {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nb-line);
}
.nb-theme-card-label {
  font-family: var(--nb-font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-forest);
  line-height: 1.4;
}
.nb-theme-card-label:hover { color: var(--nb-main); }
.nb-theme-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* [7] ブックマーク棚コンテナ（JSが .nb-bookmark-list を流し込む。base が中身を整形） */
.nb-bookmark-shelf { margin-top: 4px; }

/* [7] CTA は 2枚（ブックマーク / 国別RSS）。base の 2列 grid をそのまま使い、
   RSS カードと共通テキスト（.nb-cta-title / .nb-cta-sub）を補う。 */
.nb-cta-rss {
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: var(--nb-paper);
  padding: 18px 20px;
}
.nb-cta .nb-cta-title {
  font-family: var(--nb-font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-forest);
  margin: 0 0 8px;
}
.nb-cta .nb-cta-sub {
  font-size: 12.5px;
  color: var(--nb-forest);
  line-height: 1.8;
  margin: 0 0 12px;
}
.nb-cta-rss a { color: var(--nb-main); font-weight: 700; }
.nb-cta-rss a:hover { color: var(--nb-hover); }

/* モバイル: CTA は 1 列へ戻す（base @768 と同値だが、上の 3 列上書きより後に置く） */
@media (max-width: 768px) {
  .nb-cta { grid-template-columns: 1fr; }
}