/* ============================================================
   PCゲームサーバー初心者向けガイド - メインスタイル
   デザインコンセプト: ダークテック × 読みやすさ × AdSense最適化
   ============================================================ */

/* ---------- CSS変数 ---------- */
:root {
  --color-primary:    #1a3a5c;   /* ダークネイビー */
  --color-secondary:  #0f6cbf;   /* ブライトブルー */
  --color-accent:     #00c9a7;   /* テックグリーン */
  --color-accent2:    #f97316;   /* オレンジ（強調） */
  --color-bg:         #f4f6f9;   /* 薄グレー背景 */
  --color-surface:    #ffffff;   /* カード背景 */
  --color-surface2:   #eef2f7;   /* セカンダリ背景 */
  --color-text:       #1e2d3d;   /* メインテキスト */
  --color-text-muted: #6b7a8d;   /* サブテキスト */
  --color-border:     #dce3ed;   /* ボーダー */
  --color-tag-server: #1a3a5c;
  --color-tag-cmd:    #0f6cbf;
  --color-tag-mods:   #7c3aed;
  --color-tag-review: #059669;
  --color-tag-news:   #dc2626;

  --font-main:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;

  --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.14);

  --header-h:    64px;
  --catnav-h:    48px;   /* カテゴリナビの高さ（padding14×2+border≒48px） */
  --sidebar-w:   300px;
  --max-w:       1200px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ---------- ユーティリティ ---------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 16px;
}

/* ロゴ */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-icon {
  width: 38px; height: 38px;
  background: var(--color-accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.logo-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .03em;
}
.logo-sub {
  font-size: 10px;
  color: var(--color-accent);
  font-weight: 500;
  letter-spacing: .05em;
}

/* グローバルナビ */
.global-nav { display: flex; align-items: center; gap: 4px; }
.global-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.global-nav a:hover,
.global-nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.global-nav a .nav-icon { font-size: 14px; }

/* ============================================================
   横スクロール防止
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ドロップダウンアイテム（ゲーム別） */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.nav-chevron {
  font-size: 10px;
  transition: transform .2s;
  margin-left: 2px;
}
.nav-dropdown-btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 6px 0;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-btn[aria-expanded="true"] + .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
.nav-dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  transition: background .15s, color .15s;
  border-radius: 0;
}
.nav-dropdown-menu li a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.nav-game-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ヘッダー右側 */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-search-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  transition: background .2s;
}
.header-search-btn:hover { background: rgba(255,255,255,.2); }

/* ハンバーガー */
.hamburger {
  display: none;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
}
.hamburger span {
  display: block; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

/* 検索オーバーレイ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.85);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box {
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
}
.search-input-wrap {
  display: flex;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.search-input-wrap input {
  flex: 1;
  padding: 16px 20px;
  font-size: 16px;
  border: none;
  outline: none;
  font-family: var(--font-main);
}
.search-submit {
  padding: 0 24px;
  background: var(--color-secondary);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
.search-submit:hover { background: var(--color-primary); }
.search-close {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
}

/* ============================================================
   HERO（トップページ）
   ============================================================ */

/*
 * ヒーロー背景画像レイヤー構造:
 *   .hero                … グラデーション背景（常時表示）
 *   .hero::before        … SVGパターン または 背景画像レイヤー
 *   .hero::after         … 背景画像がある場合のみ：半透明ダークオーバーレイ
 *
 * CSS変数（front-page.php から inline style で注入）:
 *   --hero-bg-url          : url(...)
 *   --hero-overlay-opacity : 0.0 〜 1.0（デフォルト 0.65）
 */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0d2847 50%, #1a1a2e 100%);
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}

/* デフォルト：SVGドットパターン */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300c9a7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}

/* 背景画像あり：画像レイヤーに切り替え */
.hero.hero-has-bg::before {
  background-image: var(--hero-bg-url, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* 画像を少し透明化して文字と馴染ませる */
  opacity: 0.35;
  z-index: 0;
}

/* 背景画像あり：ダークオーバーレイ（半透明）で文字の可読性を確保 */
.hero.hero-has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 45, var(--hero-overlay-opacity, 0.65));
  z-index: 1;
}

/* コンテンツをオーバーレイより前面に */
.hero.hero-has-bg .hero-inner {
  position: relative;
  z-index: 2;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.hero-content { max-width: 600px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,201,167,.15);
  border: 1px solid rgba(0,201,167,.3);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  letter-spacing: .05em;
}
.hero-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.hero-title span { color: var(--color-accent); }
.hero-desc {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-bottom: 28px;
  line-height: 1.8;
}
.hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 14px; font-weight: 700;
  border-radius: var(--radius-md);
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(0,201,167,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,201,167,.45); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 14px; font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s;
}
.btn-secondary:hover { background: rgba(255,255,255,.18); }

/* ヒーロー統計 */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
.stat-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  text-align: center;
  min-width: 120px;
}
.stat-num {
  font-size: 28px; font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
}
.stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

/* ============================================================
   カテゴリナビ（5本柱）
   ============================================================ */
.category-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-h);
  z-index: 900;
}
.category-nav-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none;   /* <a>タグ対応 */
  background: none;        /* button要素の場合もリセット */
  border-top: none;
  border-left: none;
  border-right: none;
}
.cat-nav-item:hover,
.cat-nav-item:focus {
  color: var(--color-secondary);
  border-bottom-color: rgba(15,108,191,.3);
  outline: none;
}
.cat-nav-item.active,
.cat-nav-item[aria-current] {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}
.cat-nav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* カテゴリカラー */
.cat-server  .cat-nav-dot { background: var(--color-tag-server); }
.cat-command .cat-nav-dot { background: var(--color-tag-cmd); }
.cat-mods    .cat-nav-dot { background: var(--color-tag-mods); }
.cat-review  .cat-nav-dot { background: var(--color-tag-review); }
.cat-news    .cat-nav-dot { background: var(--color-tag-news); }
.cat-server.active  { color: var(--color-tag-server); border-bottom-color: var(--color-tag-server); }
.cat-command.active { color: var(--color-tag-cmd);    border-bottom-color: var(--color-tag-cmd); }
.cat-mods.active    { color: var(--color-tag-mods);   border-bottom-color: var(--color-tag-mods); }
.cat-review.active  { color: var(--color-tag-review); border-bottom-color: var(--color-tag-review); }
.cat-news.active    { color: var(--color-tag-news);   border-bottom-color: var(--color-tag-news); }

/* ============================================================
   AdSense 専用スロット（最適配置）
   ============================================================ */
.ad-slot {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  overflow: hidden;
  position: relative;
}
.ad-slot::before {
  content: 'AD';
  position: absolute;
  top: 6px; left: 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-border);
  letter-spacing: .1em;
}
/* レスポンシブ横長広告（記事上下） */
.ad-slot-horizontal {
  width: 100%;
  min-height: 90px;
  margin: 24px 0;
}
/* サイドバー縦長広告 */
.ad-slot-sidebar {
  width: 100%;
  min-height: 250px;
  margin-bottom: 24px;
}
/* インフィード広告（記事間） */
.ad-slot-infeed {
  width: 100%;
  min-height: 120px;
  margin: 16px 0;
}

/* ============================================================
   記事・一覧ページ用広告スロット（AdSense実装用）
   ※ <span> のプレースホルダーを削除し <ins> タグを貼るだけで動作
   ============================================================ */
.ad-slot-article-top,
.ad-slot-article-bottom,
.ad-slot-list-top {
  width: 100%;
  min-height: 90px;       /* AdSense読み込み前の高さ確保 */
  margin: 24px 0;
  overflow: hidden;
  /* 開発環境確認用の薄いボーダー（本番でも問題なし） */
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
/* AdSenseの ins タグが入ったら枠線を消す */
.ad-slot-article-top ins,
.ad-slot-article-bottom ins,
.ad-slot-list-top ins {
  display: block !important;
  border: none !important;
}

/* ============================================================
   ★ 記事個別ページ（single.php）レイアウト
      サイドバーなし・1カラム・最大幅 860px で中央揃え
   ============================================================ */
.single-wrap {
  background: var(--color-bg);
  padding: 28px 0 80px;
}
.single-container {
  max-width: 860px;       /* 記事本文の読みやすい幅 */
  margin: 0 auto;
  padding: 0 20px;
}

/* 記事ヘッダー */
.article-header {
  margin-bottom: 28px;
}
.single-title {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.single-meta i { font-size: 11px; margin-right: 4px; }

/* アイキャッチ */
.single-eyecatch {
  margin-bottom: 36px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.single-eyecatch img { width: 100%; height: auto; display: block; }

/* 記事本文 */
.single-content {
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 48px;
}
/* 本文内の見出し */
.single-content h2 {
  font-size: 1.35em;
  font-weight: 800;
  margin: 2.2em 0 .8em;
  padding: .5em .8em;
  background: linear-gradient(90deg, rgba(15,108,191,.08), transparent);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
}
.single-content h3 {
  font-size: 1.15em;
  font-weight: 700;
  margin: 1.8em 0 .6em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--color-border);
  line-height: 1.45;
}
.single-content h4 {
  font-size: 1.05em;
  font-weight: 700;
  margin: 1.5em 0 .5em;
  color: var(--color-secondary);
}
.single-content p { margin-bottom: 1.4em; }
.single-content ul,
.single-content ol {
  margin: 1em 0 1.4em 1.5em;
  list-style: initial;
}
.single-content ol { list-style: decimal; }
.single-content li { margin-bottom: .5em; }
.single-content a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.single-content a:hover { color: var(--color-accent); }
.single-content blockquote {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: var(--color-surface2);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--color-text-muted);
}
.single-content pre,
.single-content code {
  font-family: var(--font-mono);
  font-size: 13px;
}
.single-content pre {
  background: #1a1a2e;
  color: #e2e8f0;
  padding: 1.2em 1.4em;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5em 0;
  line-height: 1.7;
}
.single-content :not(pre) > code {
  background: rgba(15,108,191,.1);
  color: var(--color-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .88em;
}
.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 1em 0;
}
.single-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
}
.single-content th,
.single-content td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  line-height: 1.6;
}
.single-content th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.single-content tr:nth-child(even) td { background: var(--color-surface2); }

/* シェアボタン */
.share-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .2s, transform .15s;
}
.share-btn:hover { opacity: .85; transform: translateY(-1px); }
.share-x       { background: #000; color: #fff; }
.share-bluesky { background: #0085ff; color: #fff; }
.share-copy    { background: var(--color-surface2); color: var(--color-text); border: 1px solid var(--color-border); }

/* シェアボタン下部 */
.share-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
  margin-bottom: 36px;
}
.share-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* 著者情報ボックス */
.author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 36px;
}
.author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  color: #fff;
}
.author-info { flex: 1; min-width: 0; }
.author-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.author-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-secondary);
  background: rgba(15,108,191,.08);
  padding: 2px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
}
.author-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.75; }

/* 前後の記事ナビゲーション */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.post-nav-prev,
.post-nav-next {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color .2s;
}
.post-nav-next { text-align: right; }
.post-nav-prev:hover,
.post-nav-next:hover { border-color: var(--color-secondary); }
.post-nav-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.post-nav-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
  text-decoration: none;
}
.post-nav-link:hover { text-decoration: underline; }
.post-nav-empty {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 関連記事 */
.related-posts { margin-bottom: 40px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-thumb {
  height: 90px;
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,.3);
}
.related-body { padding: 12px; }
.related-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card:hover .related-title { color: var(--color-secondary); }

/* ============================================================
   ★ 記事一覧・アーカイブページ（index.php / archive.php）レイアウト
      サイドバーなし・1カラム・最大幅 880px で中央揃え
   ============================================================ */
.list-wrap {
  background: var(--color-bg);
  padding: 32px 0 80px;
}
.list-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* カテゴリ説明文 */
.cat-description {
  background: var(--color-surface2);
  border-left: 4px solid var(--color-secondary);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* 記事カード（一覧・アーカイブ共通）：a タグラッパー対応 */
.article-card-link {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
/* ホバー：カード全体に適用 */
.article-card:hover .article-card-link { opacity: 1; }

/* 空状態 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.empty-icon  { font-size: 48px; margin-bottom: 16px; }
.empty-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.empty-desc  { font-size: 13px; }

/* ============================================================
   メインレイアウト（1カラム・サイドバーなし）
   ============================================================ */
.layout-main {
  padding: 40px 0 0;
}
/* .layout-grid は記事一覧ページ等で使用（front-page は1カラム） */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 32px;
  align-items: start;
}
.main-content {
  min-width: 0;
}

/* ============================================================
   セクションヘッダー
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
}
.section-title-bar {
  width: 4px; height: 22px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-secondary));
  border-radius: 2px;
}
.section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  display: flex; align-items: center; gap: 4px;
  transition: gap .2s;
}
.section-link:hover { gap: 8px; }

/* ============================================================
   ピックアップ（横スクロールカルーセル）
   カードサイズはカスタマイザーの「カードサイズ」から変更可
   CSS変数 --pickup-card-w / --pickup-thumb-h をインラインで渡す
   ============================================================ */
.pickup-section {
  padding: 48px 0;
  background: var(--color-bg);
}
.pickup-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.pickup-scroll::-webkit-scrollbar { height: 4px; }
.pickup-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.pickup-card {
  flex-shrink: 0;
  /* カスタマイザーで設定したサイズ（デフォルト200px） */
  width: var(--pickup-card-w, 200px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.pickup-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pickup-thumb {
  width: 100%;
  /* カスタマイザーで設定したサムネ高さ（デフォルト120px） */
  height: var(--pickup-thumb-h, 120px);
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,.3);
}
.pickup-meta { padding: 10px 12px; }
.pickup-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  margin-bottom: 6px;
  color: #fff;
}
.pickup-card-title {
  font-size: 12px; font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   記事カード（メインリスト）
   ※ .article-card-link が <a> タグ全体ラッパーになっている構造に対応
      .article-card はリスト行コンテナ、
      .article-card-link がグリッドレイアウトを担う
   ============================================================ */
.articles-list { display: flex; flex-direction: column; gap: 0; }

/* ---- カード外枠（article 要素） ---- */
.article-card {
  border-bottom: 1px solid var(--color-border);
  transition: background .2s;
  cursor: pointer;
}
.article-card:first-child { border-top: 1px solid var(--color-border); }
.article-card:hover { background: var(--color-surface2); }

/* ---- <a> ラッパー：グリッドレイアウト ---- */
.article-card-link {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;           /* サムネイルとテキストの間隔を広げる */
  padding: 20px 24px;  /* 左右の余白を増やす */
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start; /* 縦方向はトップ揃え */
}

/* サムネイル */
.article-thumb {
  width: 200px;
  height: 120px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,.2);
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

/* 本文エリア */
.article-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;  /* タグ上部に少し余白 */
}
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  color: #fff;
  letter-spacing: .03em;
}
/* 既知カテゴリスラッグ */
.tag-server  { background: var(--color-tag-server); }
.tag-command { background: var(--color-tag-cmd);    }
.tag-mods    { background: var(--color-tag-mods);   }
.tag-review  { background: var(--color-tag-review); }
.tag-news    { background: var(--color-tag-news);   }
.tag-game    { background: #b45309; }
/* 未定義スラッグ（子カテゴリ・ゲームタイトル等）のフォールバック
   .tag に background を設定しておき、既知クラスで上書きする構造 */
.tag:not(.tag-server):not(.tag-command):not(.tag-mods):not(.tag-review):not(.tag-news):not(.tag-game) {
  background: var(--color-primary);  /* ネイビー：白塗り防止 */
}

.article-title {
  font-size: 16px; font-weight: 700;
  line-height: 1.55;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card:hover .article-title { color: var(--color-secondary); }
.article-excerpt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--color-text-muted);
}
.article-meta i { font-size: 11px; }
.article-meta-sep { color: var(--color-border); }

/* NEW バッジ */
.badge-new {
  display: inline-block;
  background: var(--color-accent2);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .05em;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ============================================================
   サイドバー（記事一覧・記事詳細ページ用・front-pageでは非使用）
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--header-h) + var(--catnav-h) + 16px);
  max-height: calc(100vh - var(--header-h) - var(--catnav-h) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding-right: 2px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-widget {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.widget-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px; font-weight: 700;
  letter-spacing: .05em;
}
.widget-header .widget-icon { font-size: 16px; }
.widget-body { padding: 16px; }

/* サイドバー記事リスト */
.sidebar-article-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-article {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: opacity .2s;
}
.sidebar-article:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-article:hover { opacity: .75; }
.sidebar-article-thumb {
  width: 68px; height: 50px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface2);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-article-title {
  font-size: 12px; font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サイドバー外部リンク（バナー） */
.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
.sidebar-link-item {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--color-border);
}
.sidebar-link-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sidebar-link-item img { width: 100%; height: 60px; object-fit: cover; }
.sidebar-link-label {
  padding: 8px 10px;
  font-size: 11px; font-weight: 700;
  background: var(--color-text);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
/* ゲームリンク専用カラー */
.link-nexus    .sidebar-link-label { background: #e86925; }
.link-7days    .sidebar-link-label { background: #c0392b; }
.link-scum     .sidebar-link-label { background: #1a1a1a; }
.link-scumwiki .sidebar-link-label { background: #2c3e50; }

/* タグクラウド */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud-item {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  background: var(--color-surface2);
  color: var(--color-text-muted);
  border-radius: 100px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.tag-cloud-item:hover {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}

/* プロフィールウィジェット */
.profile-widget { text-align: center; }
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin: 0 auto 12px;
  color: #fff;
}
.profile-name { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.profile-role {
  font-size: 11px; font-weight: 600;
  color: var(--color-secondary);
  background: rgba(15,108,191,.08);
  padding: 2px 10px; border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
}
.profile-desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.7; text-align: left; }

/* ============================================================
   特集セクション（5本柱グリッド）
   ============================================================ */
.pillars-section { padding: 48px 0; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.pillar-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.pillar-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pillar-color, var(--color-secondary));
  transform: scaleX(0);
  transition: transform .2s;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar-card:hover::after { transform: scaleX(1); }
.pillar-icon {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}
.pillar-title {
  font-size: 13px; font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.pillar-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.pillar-count {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pillar-color, var(--color-secondary));
}

/* ============================================================
   ランキングセクション
   ============================================================ */
.ranking-section { padding: 48px 0; background: var(--color-surface); }
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ranking-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: stretch;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.ranking-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ranking-num {
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
  flex-shrink: 0;
  background: var(--color-surface2);
  color: var(--color-text-muted);
}
.ranking-num.rank-1 { background: #fbbf24; color: #78350f; }
.ranking-num.rank-2 { background: #d1d5db; color: #374151; }
.ranking-num.rank-3 { background: #d97706; color: #fff; }
.ranking-content { padding: 12px 14px; flex: 1; }
.ranking-tag { margin-bottom: 6px; }
.ranking-title {
  font-size: 13px; font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   CTAバナー（メルマガ・SNSフォロー等）
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '🎮';
  position: absolute;
  right: 160px; top: 50%;
  transform: translateY(-50%);
  font-size: 80px;
  opacity: .07;
}
.cta-title {
  font-size: 22px; font-weight: 900;
  color: #fff; margin-bottom: 8px;
}
.cta-desc { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   タグ一覧セクション（フッター直上）
   ============================================================ */
.tag-list-section {
  padding: 48px 0 40px;
  background: var(--color-surface2);
  border-top: 1px solid var(--color-border);
}
.tag-list-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
}
.tag-list-heading i {
  color: var(--color-secondary);
  font-size: 14px;
}
.tag-list-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-list-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  text-decoration: none;
}
.tag-list-item:hover {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}
.tag-list-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--color-surface2);
  color: var(--color-text-muted);
  padding: 1px 6px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  line-height: 1.5;
}
.tag-list-item:hover .tag-list-count {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,.75);
  padding: 48px 0 0;
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand .logo-title { font-size: 16px; }
.footer-brand .logo-sub { font-size: 11px; }
.footer-desc {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 12px;
  color: rgba(255,255,255,.6);
}
.footer-heading {
  font-size: 12px; font-weight: 700;
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  display: flex; align-items: center; gap: 6px;
  transition: color .2s;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-links a::before { content: '›'; color: var(--color-accent); }
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: rgba(255,255,255,.4); transition: color .2s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb {
  padding: 10px 0;
  font-size: 12px;
  color: var(--color-text-muted);
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: '›'; color: var(--color-border); }
.breadcrumb a { color: var(--color-secondary); }
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   ページネーション
   ============================================================ */
.pagination {
  display: flex; justify-content: center; gap: 6px;
  padding: 32px 0;
}
.page-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  color: var(--color-text-muted);
}
.page-btn:hover { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.page-btn.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.page-btn.disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   TOPへ戻るボタン
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .2s;
  z-index: 500;
  border: none;
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { transform: translateY(-3px); }

/* ============================================================
   ★ PHPゲームカード（raian-game-manager プラグイン連携）
      front-page.php の <section class="game-cards-section"> 内で描画
   ============================================================ */
.game-cards-section {
  padding: 64px 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface2) 100%);
}
.game-cards-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 36px;
}
.game-cards-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.3;
}
.game-cards-title-bar {
  width: 4px; height: 28px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-secondary));
  border-radius: 2px;
  flex-shrink: 0;
}
.game-cards-title-icon { font-size: 24px; }
.game-cards-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* カードグリッド */
.game-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* 個別カード */
.game-card {
  background: var(--color-primary);  /* ダークネイビー背景に変更 */
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* サムネイル */
.game-card-thumb {
  position: relative;
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.game-card-emoji {
  font-size: 60px;
  opacity: .6;
  user-select: none;
}
.game-card-version {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.65);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

/* カード本文 */
.game-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  background: #132a46;  /* 少し明るいダークネイビー */
}
.game-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;          /* 白文字 */
  line-height: 1.3;
}
.game-card-emoji-sm { font-size: 20px; flex-shrink: 0; }
.game-card-genre {
  font-size: 12px;
  color: rgba(255,255,255,.55);  /* 半透明白 */
  line-height: 1.5;
  margin-top: -4px;
}

/* 記事リンクリスト */
.game-card-articles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255,255,255,.12);  /* ダーク背景用ボーダー */
  padding-top: 10px;
}
.game-card-article-item { /* no style needed */ }
.game-card-article-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: #fff;              /* 白文字 */
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.game-card-article-link:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.game-card-article-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-card-article-arrow {
  font-size: 10px;
  color: rgba(255,255,255,.5);  /* 薄い白 */
  flex-shrink: 0;
  transition: transform .15s;
}
.game-card-article-link:hover .game-card-article-arrow {
  transform: translateX(3px);
  color: #fff;
}

/* バッジ */
.game-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.game-card-badge i { font-size: 9px; }
.game-card-badge--copypaste { background: rgba(0,201,167,.25); color: #fff; }
.game-card-badge--tool      { background: rgba(124,58,237,.35); color: #fff; }
.game-card-badge--guide     { background: rgba(15,108,191,.35); color: #fff; }
.game-card-badge--new       { background: rgba(249,115,22,.45); color: #fff; }

/* 推奨スペック アコーディオン */
.game-card-specs {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.game-card-specs-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.07);  /* 薄い白 */
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);         /* 白文字 */
  cursor: pointer;
  list-style: none;
  transition: background .15s, color .15s;
  user-select: none;
}
.game-card-specs-toggle::-webkit-details-marker { display: none; }
.game-card-specs-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.game-card-specs-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform .2s;
}
.game-card-specs[open] .game-card-specs-arrow { transform: rotate(180deg); }
.game-card-specs-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  padding: 12px 14px;
  font-size: 12px;
  background: rgba(0,0,0,.2);          /* 暗い半透明 */
}
.game-card-specs-list dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: rgba(255,255,255,.55);        /* 薄白 */
  padding: 5px 12px 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.game-card-specs-list dt i { font-size: 11px; color: var(--color-accent); }
.game-card-specs-list dd {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);        /* 白文字 */
  line-height: 1.5;
}
.game-card-specs-list dt:last-of-type,
.game-card-specs-list dd:last-of-type { border-bottom: none; }

/* 全記事リンク */
.game-card-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--color-secondary), #0d5fa0);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: #fff;           /* 白文字に変更 */
  text-decoration: none;
  transition: background .15s, border-color .15s, gap .15s, opacity .15s;
}
.game-card-more:hover {
  background: linear-gradient(90deg, #0d5fa0, #0a4d88);
  border-color: rgba(255,255,255,.3);
  gap: 12px;
  opacity: .92;
}
.game-card-more i:last-child { margin-left: auto; font-size: 11px; }

/* ============================================================
   スケルトンローディング
   ============================================================ */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #dce3ed 50%, #eef2f7 75%);
  background-size: 936px 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--radius-sm);
}

/* ============================================================
   モバイルナビドロワー
   ============================================================ */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1500;
  opacity: 0;
  transition: opacity .3s;
}
.mobile-nav-overlay.open { opacity: 1; }
.mobile-nav-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px; height: 100%;
  background: var(--color-surface);
  z-index: 1600;
  transition: right .3s;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.mobile-nav-drawer.open { right: 0; }
.drawer-header {
  padding: 20px;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
.drawer-close {
  background: none; border: none; color: #fff;
  font-size: 20px; cursor: pointer;
}
.drawer-nav { padding: 12px 20px 20px; }
.drawer-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600;
  color: var(--color-text);
  transition: color .2s;
  text-decoration: none;
}
.drawer-nav a:hover { color: var(--color-secondary); }

/* アコーディオン（ゲーム別） */
.drawer-accordion-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border: none; border-bottom: 1px solid var(--color-border);
  background: none;
  font-size: 14px; font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-main);
  text-align: left;
  gap: 8px;
}
.drawer-accordion-btn:hover { color: var(--color-secondary); }
.drawer-accordion-btn > span {
  display: flex; align-items: center; gap: 12px;
}
.drawer-accordion-icon {
  font-size: 11px;
  color: var(--color-text-muted);
  transition: transform .25s;
  flex-shrink: 0;
}
.drawer-accordion-body {
  padding: 4px 0 4px 32px;
}
.drawer-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px; font-weight: 600;
  color: var(--color-text-muted);
  transition: color .2s;
  text-decoration: none;
}
.drawer-sub-link:hover { color: var(--color-secondary); }
.drawer-cat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ドロワー カテゴリリンク（ゲーム別以外） */
.drawer-cat-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600;
  color: var(--color-text);
  transition: color .2s;
  text-decoration: none;
}
.drawer-cat-link:hover { color: var(--color-secondary); }

/* ============================================================
   サービスセクション（サーバー構築・Modsに使えるサービス）
   ============================================================ */
.services-section {
  padding: 72px 0;
  background: var(--color-bg);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card-header {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.service-pr-badge {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.25);
  color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.4);
}
.service-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.service-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}
.service-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.service-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-secondary);
  transition: gap .15s;
}
.service-card:hover .service-link-btn { gap: 8px; }
.services-note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
}

/* ============================================================
   noteへの誘導セクション
   ============================================================ */
.note-section {
  padding: 72px 0;
  background: linear-gradient(135deg, #0d1f35 0%, #1a3a5c 100%);
  position: relative;
  overflow: hidden;
}
.note-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(0,201,167,.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(15,108,191,.08) 0%, transparent 50%);
  pointer-events: none;
}
.note-section .section-title {
  color: #fff;
}
.note-section .section-title .section-title-bar {
  background: #41c9b4;
}
.note-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* AI向けのみの場合：全幅表示 */
.note-cards-grid.note-single {
  grid-template-columns: 1fr;
  max-width: 640px;
}
@media (max-width: 700px) {
  .note-cards-grid,
  .note-cards-grid.note-single { grid-template-columns: 1fr; max-width: 100%; }
  .note-card { flex-direction: column; gap: 14px; }
  .note-card-icon { font-size: 36px; }
}

/* ============================================================
   記事一覧ページ コンテナ（1カラム・ワイド）
   ============================================================ */
.list-container {
  max-width: 860px;   /* 記事一覧は読みやすい幅に制限 */
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ============================================================
   記事一覧ページ：広告スロット
   ============================================================ */
/*
 * Google AdSense 設定後、このスロットに <ins class="adsbygoogle"> を配置します。
 * 広告が未設定の間はスペースが空欄になります（ダミー枠は表示しません）。
 */
.ad-slot-list {
  width: 100%;
  /* 広告コード挿入前は最小高さ 0（広告なしの場合に余白を作らない） */
  min-height: 0;
  margin: 0 0 24px;
  overflow: hidden;
}
/* AdSenseコードが入ったときだけ自動的に高さが確保されます */
.ad-slot-list ins { display: block; }

/* アーカイブページのカテゴリ説明文 */
.archive-desc {
  background: var(--color-surface2);
  border-left: 4px solid var(--color-secondary);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   記事詳細ページ コンテナ（1カラム・ワイド）
   ============================================================ */
.single-container {
  max-width: 860px;   /* サイドバーなしで記事幅を広く確保 */
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.single-article {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-top: 16px;
}

/* 記事ヘッダー */
.single-article-header {
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--color-border);
}
.single-article-title {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--color-text);
  margin: 14px 0 16px;
  letter-spacing: .01em;
}
.single-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.single-article-meta i { margin-right: 4px; }

/* シェアボタン */
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700;
  cursor: pointer; border: none;
  transition: opacity .2s, transform .15s;
}
.share-btn:hover { opacity: .82; transform: translateY(-1px); }
.share-x       { background: #000; color: #fff; }
.share-bluesky { background: #0085ff; color: #fff; }
.share-copy    { background: var(--color-surface2); color: var(--color-text); border: 1px solid var(--color-border); }

/* ============================================================
   記事詳細ページ：広告スロット
   ============================================================ */
/*
 * Google AdSense 設定後、このスロットに <ins class="adsbygoogle"> を配置します。
 * 現在は空（ダミー枠なし）のため、審査中でもレイアウトに影響しません。
 *
 * 配置場所:
 *   .ad-slot-article-top    … 記事タイトル直下（高クリック率）
 *   .ad-slot-article-bottom … 記事本文末尾（読了後のクリック）
 */
.ad-slot-article {
  width: 100%;
  min-height: 0;   /* 広告未設定時は余白ゼロ */
  overflow: hidden;
}
.ad-slot-article-top {
  margin: 0 40px 24px;
  width: calc(100% - 80px);
}
.ad-slot-article-bottom {
  margin: 24px 40px 0;
  width: calc(100% - 80px);
}
.ad-slot-article ins { display: block; }

/* アイキャッチ画像 */
.single-eyecatch {
  margin: 0 0 0;
  line-height: 0;
}
.single-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

/* 記事本文 */
.single-body {
  padding: 36px 40px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}

/* 本文内の見出し・段落など WordPress デフォルトスタイル補完 */
.single-body h2 {
  font-size: 22px; font-weight: 800;
  margin: 48px 0 18px;
  padding: 12px 16px 12px 20px;
  background: var(--color-surface2);
  border-left: 5px solid var(--color-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.45;
}
.single-body h3 {
  font-size: 18px; font-weight: 700;
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-primary);
}
.single-body h4 {
  font-size: 16px; font-weight: 700;
  margin: 28px 0 10px;
  color: var(--color-text);
}
.single-body p { margin-bottom: 18px; }
.single-body ul,
.single-body ol {
  margin: 0 0 18px 1.5em;
  list-style: revert;
  line-height: 1.85;
}
.single-body li { margin-bottom: 6px; }
.single-body a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-body a:hover { opacity: .75; }
.single-body strong { font-weight: 800; color: var(--color-primary); }
.single-body em { font-style: italic; color: var(--color-text-muted); }
.single-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--color-surface2);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.single-body pre,
.single-body code {
  font-family: var(--font-mono);
  font-size: 14px;
}
.single-body pre {
  background: #0d1117;
  color: #e6edf3;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 20px 0;
  line-height: 1.7;
  border: 1px solid rgba(255,255,255,.08);
}
.single-body :not(pre) > code {
  background: var(--color-surface2);
  color: var(--color-accent2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .88em;
  border: 1px solid var(--color-border);
}
.single-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  display: block;
}
.single-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}
.single-body th,
.single-body td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.single-body th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.single-body tr:nth-child(even) td { background: var(--color-surface2); }

/* シェア（下部） */
.single-share-bottom {
  padding: 24px 40px;
  border-top: 1px solid var(--color-border);
}
.single-share-label {
  font-size: 13px; font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* 著者ボックス */
.single-author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 40px;
  background: var(--color-surface2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.author-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.author-name { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.author-role {
  font-size: 11px; font-weight: 600;
  color: var(--color-secondary);
  background: rgba(15,108,191,.08);
  padding: 2px 10px; border-radius: 100px;
  display: inline-block;
  margin-bottom: 8px;
}
.author-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.75; }

/* 前後ナビ */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-border);
}
.post-nav-prev,
.post-nav-next {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.post-nav-prev:hover,
.post-nav-next:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); }
.post-nav-next { text-align: right; }
.post-nav-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.post-nav-link {
  font-size: 13px; font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-nav-empty { font-size: 12px; color: var(--color-text-muted); }

/* 関連記事 */
.single-related {
  padding: 28px 40px 32px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.related-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-thumb {
  height: 100px;
  background: linear-gradient(135deg, var(--color-primary), #0d2847);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,.3);
  overflow: hidden;
}
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-title {
  font-size: 12px; font-weight: 700;
  padding: 10px 12px;
  line-height: 1.5;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.note-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s;
  border-radius: var(--radius-md);
}
.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.note-card-game {
  background: rgba(15,108,191,.18);
}
.note-card-game:hover {
  border-color: rgba(15,108,191,.5);
}
.note-card-ai {
  background: rgba(0,201,167,.12);
}
.note-card-ai:hover {
  border-color: rgba(0,201,167,.4);
}
.note-card-icon {
  font-size: 44px;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.note-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-card-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(0,201,167,.15);
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid rgba(0,201,167,.3);
  margin: 0;
}
.note-card-ai .note-card-label {
  color: #41c9b4;
}
.note-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}
.note-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin: 0;
}
.note-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  transition: gap .15s;
}
.note-card:hover .note-link-btn { gap: 9px; }
.note-card-ai .note-link-btn { color: #41c9b4; }