@charset "utf-8";
/*
Theme Name: scrumble, from Japan
Theme URI: https://scrumbleggs.com/
Description: Japanese Onomatopoeia
Version: 1.0
Author: scrumble
Author URI: https://scrumbleggs.com/
*/

/* ==========================================================================
   1. Design Tokens（カラー・余白・タイポグラフィの一元管理）
   ========================================================================== */
:root {
  /* --- Colors: ダークボード優先。背景は完全な黒ではなく、わずかに沈めたグレーがかった黒 --- */
  --color-bg:          #0d0d0d;  /* ページ全体の背景 */
  --color-bg-raised:   #161616;  /* カード・記事ブロックなど一段持ち上げる面 */
  --color-bg-raised-2: #1f1f1f;  /* ホバー時やさらに強調したい面 */
  --color-border:      #2a2a2a;  /* 区切り線、控えめに */

  /* --- Text: 純白(#fff)を避け、明るさを抑えたグレー --- */
  --color-text:        #d8d6d3;  /* 本文 */
  --color-text-strong: #e9e7e4;  /* 見出しなど強調したい文字（本文より明るく。以前は逆転していたバグを修正） */
  --color-text-muted:  #8e8b87;  /* 補足・日付・キャプションなど */

  /* --- Accent: ワインレッド --- */
  --color-accent:        #8a1f2d;
  --color-accent-bright: #b3303f; /* ホバーなど少し明るく */
  --color-accent-text:   #f3e7e8; /* アクセント背景の上に乗せる文字 */

  /* --- Typography --- */
  --font-base: "Tahoma", "Yu Gothic", "游ゴシック", sans-serif;
  --font-mono: "Courier New", monospace;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* --- Layout --- */
  --content-max: 1200px;
  --radius: 6px;

  /* --- Genre Colors: 日本の伝統色 --- */
  --color-shounen: #165E83;  /* 藍色 */
  --color-shoujo:  #BB7EC3;  /* 藤色 */
  --color-seinen:  #F8B500;  /* 山吹色 */
  --color-ehon:    #F5E56B;  /* 黄檗 */
  --color-novel:   #EC6D51;  /* 朱色 */
  --color-notes:   #6CBB5A;  /* 萌黄 */
  --color-catalog: #EB8999;  /* 紅梅 */
  --color-library: #84B9CB;  /* 空色 */
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

/* 補足・キャプション等に使う共通の控えめカラー（以前は複数箇所でclass指定だけあり未定義だった） */
.muted { color: var(--color-text-muted); }

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-accent-bright); }

h1, h2, h3, h4 {
  color: var(--color-text-strong);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

p { margin: 0 0 var(--space-3); }

small, .muted { color: var(--color-text-muted); }

::selection { background: var(--color-accent); color: var(--color-accent-text); }

/* ==========================================================================
   3. Layout Containers
   ========================================================================== */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* サイト紹介タグライン（トップページ、ロゴ・ナビ直下） */
.site-tagline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-3) 0;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

/* 上段：左にロゴ、右上にサブメニュー（控えめ・後回しでよい情報） */
.header-top {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-logo img { height: 80px; width: auto; }

/* 右上ブロック：上にSNS行、下にsub-nav行という縦2段 */
.header-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding-top: var(--space-1);
}

/* 上段：SNSリンク（中身は未定、枠だけ用意。今は空でもレイアウトは崩れない） */
.sns-nav {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 1em; /* 項目が0個でも高さを確保し、追加時にガタつかないように */
}
.sns-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.sns-nav a:hover { color: var(--color-accent-bright); }

/* 下段：notes / catalog / about + bottomリンク + ハンバーガー */
.sub-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sub-nav {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sub-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.sub-nav a:hover { color: var(--color-accent-bright); }

/* サブメニューの現在地ライン */
.sub-nav a[aria-current="page"],
.sub-nav .current-menu-item > a,
.sub-nav .current-menu-ancestor > a,
.sub-nav .current-category-ancestor > a,
.sub-nav .current-post-ancestor > a,
.sub-nav .current-menu-parent > a {
  color: var(--color-text-strong);
  border-bottom-color: var(--color-accent-bright);
}

/* notesとcatalogのジャンルカラー */
.category-notes .sub-nav .current-menu-item > a,
.category-notes .sub-nav .current-menu-ancestor > a,
.category-notes .sub-nav .current-category-ancestor > a,
.category-notes .sub-nav .current-post-ancestor > a,
.category-notes .sub-nav .current-menu-parent > a { color: var(--color-notes); border-bottom-color: var(--color-notes); }

.category-catalog .sub-nav .current-menu-item > a,
.category-catalog .sub-nav .current-menu-ancestor > a,
.category-catalog .sub-nav .current-category-ancestor > a,
.category-catalog .sub-nav .current-post-ancestor > a,
.category-catalog .sub-nav .current-menu-parent > a { color: var(--color-catalog); border-bottom-color: var(--color-catalog); }

.category-library .sub-nav .current-menu-item > a,
.category-library .sub-nav .current-menu-ancestor > a,
.category-library .sub-nav .current-category-ancestor > a,
.category-library .sub-nav .current-post-ancestor > a,
.category-library .sub-nav .current-menu-parent > a { color: var(--color-library); border-bottom-color: var(--color-library); }

/* ヘッダー⇄フッターのジャンプリンク */
.jump-link {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.jump-link:hover { color: var(--color-accent-bright); }

/* 下段：メインナビ。全幅で堂々と展開する主役の導線 */
.main-nav-row {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--space-4) var(--space-3);
}
.main-nav {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover {
  color: var(--color-text-strong);
}
.main-nav a[aria-current="page"],
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-category-ancestor > a,
.main-nav .current-post-ancestor > a,
.main-nav .current-menu-parent > a {
  color: var(--color-text-strong);
  border-bottom-color: var(--color-accent-bright);
}

/* ハンバーガー：モバイルのみ表示 */
.menu-toggle { display: none; }
.menu-overlay { display: none; }
.mobile-sub-divider { display: none; }
.mobile-drawer { display: none; }

/* ==========================================================================
   5.5 Breadcrumb
   ========================================================================== */
.breadcrumb { 
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 var(--space-2);
  color: var(--color-text-muted);
  opacity: 0.6;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent-bright); }
.breadcrumb li[aria-current="page"] { color: var(--color-text); }

/* ログイン時の編集リンク (*) */
.edit-link {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-left: var(--space-1);
  opacity: 0.5;
}
.edit-link:hover { opacity: 1; color: var(--color-accent-bright); }

/* パンくず内のh1：構造上はh1だが、見た目は他のパンくず項目と同じトーンに抑える */
.breadcrumb-h1 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ==========================================================================
   5.7 Genre Colors（ジャンルカラー：body classで切り替え）
   ========================================================================== */

/* メニューの現在地下線 */
.category-shounen .main-nav a[aria-current="page"],
.category-shounen .main-nav .current-menu-item > a,
.category-shounen .main-nav .current-menu-ancestor > a,
.category-shounen .main-nav .current-category-ancestor > a,
.category-shounen .main-nav .current-post-ancestor > a,
.category-shounen .main-nav .current-menu-parent > a { border-bottom-color: var(--color-shounen); color: var(--color-shounen); }
.category-shoujo  .main-nav a[aria-current="page"],
.category-shoujo  .main-nav .current-menu-item > a,
.category-shoujo  .main-nav .current-menu-ancestor > a,
.category-shoujo  .main-nav .current-category-ancestor > a,
.category-shoujo  .main-nav .current-post-ancestor > a,
.category-shoujo  .main-nav .current-menu-parent > a { border-bottom-color: var(--color-shoujo);  color: var(--color-shoujo);  }
.category-seinen  .main-nav a[aria-current="page"],
.category-seinen  .main-nav .current-menu-item > a,
.category-seinen  .main-nav .current-menu-ancestor > a,
.category-seinen  .main-nav .current-category-ancestor > a,
.category-seinen  .main-nav .current-post-ancestor > a,
.category-seinen  .main-nav .current-menu-parent > a { border-bottom-color: var(--color-seinen);  color: var(--color-seinen);  }
.category-ehon    .main-nav a[aria-current="page"],
.category-ehon    .main-nav .current-menu-item > a,
.category-ehon    .main-nav .current-menu-ancestor > a,
.category-ehon    .main-nav .current-category-ancestor > a,
.category-ehon    .main-nav .current-post-ancestor > a,
.category-ehon    .main-nav .current-menu-parent > a { border-bottom-color: var(--color-ehon);    color: var(--color-ehon);    }
.category-novel   .main-nav a[aria-current="page"],
.category-novel   .main-nav .current-menu-item > a,
.category-novel   .main-nav .current-menu-ancestor > a,
.category-novel   .main-nav .current-category-ancestor > a,
.category-novel   .main-nav .current-post-ancestor > a,
.category-novel   .main-nav .current-menu-parent > a { border-bottom-color: var(--color-novel);   color: var(--color-novel);   }
.category-notes   .main-nav a[aria-current="page"],
.category-notes   .main-nav .current-menu-item > a,
.category-notes   .main-nav .current-menu-ancestor > a,
.category-notes   .main-nav .current-category-ancestor > a,
.category-notes   .main-nav .current-post-ancestor > a,
.category-notes   .main-nav .current-menu-parent > a { border-bottom-color: var(--color-notes);   color: var(--color-notes);   }
.category-catalog .main-nav a[aria-current="page"],
.category-catalog .main-nav .current-menu-item > a,
.category-catalog .main-nav .current-menu-ancestor > a,
.category-catalog .main-nav .current-category-ancestor > a,
.category-catalog .main-nav .current-post-ancestor > a,
.category-catalog .main-nav .current-menu-parent > a { border-bottom-color: var(--color-catalog); color: var(--color-catalog); }
.category-library .main-nav a[aria-current="page"],
.category-library .main-nav .current-menu-item > a,
.category-library .main-nav .current-menu-ancestor > a,
.category-library .main-nav .current-category-ancestor > a,
.category-library .main-nav .current-post-ancestor > a,
.category-library .main-nav .current-menu-parent > a { border-bottom-color: var(--color-library); color: var(--color-library); }

/* シリーズラベル */
.category-shounen .series-label { color: var(--color-shounen); }
.category-shoujo  .series-label { color: var(--color-shoujo);  }
.category-seinen  .series-label { color: var(--color-seinen);  }
.category-ehon    .series-label { color: var(--color-ehon);    }
.category-novel   .series-label { color: var(--color-novel);   }
.category-notes   .series-label { color: var(--color-notes);   }
.category-catalog .series-label { color: var(--color-catalog); }

/* カードのホバー枠線 */
.category-shounen .entry-card:hover { border-color: var(--color-shounen); }
.category-shoujo  .entry-card:hover { border-color: var(--color-shoujo);  }
.category-seinen  .entry-card:hover { border-color: var(--color-seinen);  }
.category-library .entry-card:hover { border-color: var(--color-library); }
.category-ehon    .entry-card:hover { border-color: var(--color-ehon);    }
.category-novel   .entry-card:hover { border-color: var(--color-novel);   }
.category-notes   .entry-card:hover { border-color: var(--color-notes);   }
.category-catalog .entry-card:hover { border-color: var(--color-catalog); }

/* パンくずリンクのホバー */
.category-shounen .breadcrumb a:hover { color: var(--color-shounen); }
.category-shoujo  .breadcrumb a:hover { color: var(--color-shoujo);  }
.category-seinen  .breadcrumb a:hover { color: var(--color-seinen);  }
.category-ehon    .breadcrumb a:hover { color: var(--color-ehon);    }
.category-novel   .breadcrumb a:hover { color: var(--color-novel);   }
.category-notes   .breadcrumb a:hover { color: var(--color-notes);   }
.category-catalog .breadcrumb a:hover { color: var(--color-catalog); }

/* ==========================================================================
   6. Category Grid（一覧ページ：PC 3カラム → タブレット2 → モバイル1）
   ========================================================================== */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
}

/* 親カテゴリ（SHOUNEN等）：右上に固定の雑誌表紙カード */
.genre-grid {
  grid-template-columns: repeat(3, 1fr);
}
.genre-cover {
  grid-column: 3;
  grid-row: 1;
}
.genre-cover .body .muted { margin-bottom: 0; }

.entry-card {
  position: relative;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
/* カード全体が<a>で覆われている一覧（book-card等）用：右上に編集リンクを重ねて表示する */
.card-edit-link {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  padding: 0.2em 0.45em;
  border-radius: var(--radius);
  opacity: 0.7;
}
.card-edit-link:hover {
  opacity: 1;
  color: var(--color-accent-bright);
}
.entry-card:hover {
  border-color: var(--color-accent);
}
.entry-card a { color: inherit; display: block; }
.entry-card .thumb {
  aspect-ratio: 2 / 1;
  background: var(--color-bg-raised-2);
  overflow: hidden;
}
.entry-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.entry-card .body { padding: var(--space-3); overflow: hidden; }
.entry-card .body h3 { word-break: break-word; overflow-wrap: break-word; }
.entry-card .body p { word-break: break-word; overflow-wrap: break-word; }
.entry-card .series-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-bright);
}
.entry-card h3 { font-size: 1rem; margin: var(--space-1) 0; }
.entry-card .meta { font-size: 0.75rem; color: var(--color-text-muted); }

/* シリーズラベルのジャンルカラー */
.series-label.genre-shounen { color: var(--color-shounen); }
.series-label.genre-shoujo  { color: var(--color-shoujo);  }
.series-label.genre-seinen  { color: var(--color-seinen);  }
.series-label.genre-ehon    { color: var(--color-ehon);    }
.series-label.genre-novel   { color: var(--color-novel);   }
.series-label.genre-notes   { color: var(--color-notes);   }
.series-label.genre-catalog { color: var(--color-catalog); }
.series-label.genre-library { color: var(--color-library); }

/* 固定■カード（雑誌表紙）の背景色をジャンルカラーに設定 */
/* 透過PNGをアップすると、透明部分にジャンルカラーが表示される */
/* 固定■カード（雑誌表紙）の背景色をジャンルカラーに設定 */
/* bodyクラスではなくgenre-slugクラスで直接指定（子カテゴリページでも機能するため） */
.genre-shounen.genre-cover .thumb,
.genre-shounen .genre-cover .thumb { background-color: var(--color-shounen); }
.genre-shoujo.genre-cover .thumb,
.genre-shoujo  .genre-cover .thumb { background-color: var(--color-shoujo);  }
.genre-seinen.genre-cover .thumb,
.genre-seinen  .genre-cover .thumb { background-color: var(--color-seinen);  }
.genre-ehon.genre-cover .thumb,
.genre-ehon    .genre-cover .thumb { background-color: var(--color-ehon);    }
.genre-novel.genre-cover .thumb,
.genre-novel   .genre-cover .thumb { background-color: var(--color-novel);   }
.genre-notes.genre-cover .thumb,
.genre-notes   .genre-cover .thumb { background-color: var(--color-notes);   }
.genre-catalog.genre-cover .thumb,
.genre-catalog .genre-cover .thumb { background-color: var(--color-catalog); }
.genre-library.genre-cover .thumb,
.genre-library .genre-cover .thumb { background-color: var(--color-library); }

/* 図書館/カタログ用6列グリッド */
.genre-grid-wide {
  grid-template-columns: repeat(6, 1fr);
}
.genre-grid-wide .genre-cover {
  grid-column: 5 / 7;
  grid-row: 1;
}

/* 本カード */
.book-card .book-thumb {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-raised-2);
}
.book-card > a {
  display: block;
}
.book-card .book-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-card .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.book-overlay-top {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  padding: var(--space-1) var(--space-2) var(--space-2) 2.75rem;
}
.book-overlay-bottom {
  position: absolute;
  bottom: 3.75rem;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-2) var(--space-1) 2.75rem;
}

/* single.php用（大きい画像） */
.book-thumb-single .book-overlay-top {
  top: 3rem;
  padding: var(--space-2) var(--space-3) var(--space-4) var(--space-5);
}
.book-thumb-single .book-overlay-bottom {
  bottom: 4rem;
  padding: var(--space-4) var(--space-3) var(--space-2) var(--space-5);
}
.book-text-light .book-title-ja { color: #222; }
.book-text-light .book-author-ja { color: #333; }
.book-text-dark .book-title-ja { color: #f0f0f0; }
.book-text-dark .book-author-ja { color: #e0e0e0; }

/* book-thumb-singleにも適用 */
.book-thumb-single.book-text-light .book-title-ja { color: #222; }
.book-thumb-single.book-text-light .book-author-ja { color: #333; }
.book-thumb-single.book-text-dark .book-title-ja { color: #f0f0f0; }
.book-thumb-single.book-text-dark .book-author-ja { color: #e0e0e0; }

.book-title-ja {
  font-size: 0.78rem;
  font-weight: bold;
  color: #222;
  margin: 0;
  line-height: 1.4;
}
.book-author-ja {
  font-size: 0.68rem;
  font-weight: bold;
  color: #333;
  margin: 0 var(--space-2) 0 0;
  display: inline;
}
.book-publisher-ja {
  font-size: 0.68rem;
  color: #333;
  margin: 0;
  display: inline;
}
.book-roman {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
  line-height: 1.3;
}
.book-card-meta {
  padding: 0 var(--space-2) var(--space-1);
}
.book-card-info {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
/* Library親カテゴリページ */
.library-section {
  margin-top: var(--space-5);
}
.library-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.library-section-title {
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--color-library);
}
.library-section-link {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.library-section-link:hover { color: var(--color-library); }

.library-viewall-links {
  margin-top: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.library-viewall-link {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.library-viewall-link:hover { color: var(--color-library); }

.book-card-placeholder {
  visibility: hidden;
}
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  justify-content: flex-end;
}

/* picks：4列グリッド */
.library-picks-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* 作家プロフィールカード（single.php 3カラム目） */
.manga-title-block {
  margin-bottom: var(--space-3);
}
.manga-title-series {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.manga-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 var(--space-1);
  color: var(--color-text-strong);
}
.manga-date {
  font-size: 0.72rem;
  margin: 0;
}
/* single.php右カラム：このページに含まれるオノマトペ一覧（クリックで索引ページへ） */
.manga-onomatopoeia-list {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-3);
}
.manga-onomatopoeia-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.manga-onomatopoeia-list a {
  color: var(--color-text);
}
.manga-onomatopoeia-list a:hover {
  color: var(--color-accent-bright);
}
.author-card {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-raised);
}
.author-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}
.author-card-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text-strong);
}
.author-card-summary {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.6;
}
.author-card-blitz {
  margin-bottom: var(--space-2);
}
.author-card-blitz-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.author-card-blitz-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.author-card-blitz-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius);
  flex: 0 0 auto;
}
.author-card-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  display: block;
}
.author-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}
.author-card-links a {
  font-size: 0.72rem;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.author-card-links a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
}
.author-card-link {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.author-card-link:hover { color: var(--color-accent-bright); }
/* 書評タブ */
.review-tabs {
  margin-bottom: var(--space-3);
}
/* 本棚の署名（誰の言葉で書かれたレビューか。Aboutページの署名と同じ「— 名前」の体裁） */
.book-curator-signature {
  text-align: right;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.review-tab-buttons {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}
.review-tab-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: color 0.15s ease;
}
.review-tab-btn.active {
  color: var(--color-library);
  border-bottom: 2px solid var(--color-library);
}
.review-tab-content {
  display: none;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text);
}
.review-tab-content.active { display: block; }

/* discoveryシリーズ：多言語タブ（8言語分、ボタンが多いので折り返しを許可） */
.discovery-tabs .review-tab-buttons {
  flex-wrap: wrap;
}
/* アラビア語（右から左に書く言語）の、表示調整 */
.discovery-tabs .review-tab-content[dir="rtl"] {
  text-align: right;
}
.discovery-tabs .review-tab-content[dir="rtl"] table {
  direction: rtl;
}

/* 一覧内の一言コメント用タブ（category.php）。書評タブを流用しつつ余白を詰める */
.comment-tabs {
  margin-bottom: 0;
}
.comment-tabs .review-tab-buttons {
  margin-bottom: var(--space-1);
  padding-bottom: 0;
  border-bottom: none;
}
.comment-tabs .review-tab-btn {
  font-size: 0.7rem;
  padding: 0 var(--space-1);
}

/* オノマトペ索引トップページ（page-onomatopoeia.php）：A-Zジャンプナビ */
.onomatopoeia-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
}
.onomatopoeia-az-nav a {
  font-size: 0.8rem;
  font-weight: bold;
}
.onomatopoeia-az-disabled {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  opacity: 0.3;
}
.onomatopoeia-letter-group {
  margin-top: var(--space-5);
  scroll-margin-top: var(--space-6);
}
.onomatopoeia-letter-heading {
  font-size: 1.4rem;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
}

/* オノマトペ索引トップページ（page-onomatopoeia.php）：左2/3 A-Z一覧・右1/3 ランキング */
.onomatopoeia-index-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.onomatopoeia-index-sidebar {
  position: static; /* 追従（sticky）はしない */
}
@media (max-width: 900px) {
  .onomatopoeia-index-layout {
    grid-template-columns: 1fr;
  }
  /* スマホでは、A-Z一覧の"後"にランキングが来るよう、表示順を明示的に指定 */
  .onomatopoeia-index-main { order: 1; }
  .onomatopoeia-index-sidebar { order: 2; }
}

/* オノマトペ索引トップページ（page-onomatopoeia.php）：全語一覧のタイル状グリッド */
.onomatopoeia-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.onomatopoeia-index-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.onomatopoeia-index-item:hover {
  border-color: var(--color-accent);
  color: var(--color-text-strong);
}
.onomatopoeia-index-word {
  font-size: 0.88rem;
}
.onomatopoeia-index-count {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

/* オノマトペ索引ページ（taxonomy-onomatopoeia.php）：3列グリッド。
   各セルの中で、その作品の4コマ＋キャプションを縦積みで全部見せる。
   category.phpの一覧と同じ列数（3列）に揃えている。 */
.onomatopoeia-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-3);
}
.onomatopoeia-entry {
  background: var(--color-bg-raised);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.onomatopoeia-discovery-link {
}
/* サイドバー（A-Zページ）では、Top10カードとの間に、余白を、加える */
.onomatopoeia-index-sidebar .onomatopoeia-discovery-link {
  margin-top: var(--space-3);
}
.onomatopoeia-discovery-link a {
  color: var(--color-text);
  text-decoration: none;
  display: block;
}
.onomatopoeia-discovery-link .thumb {
  margin-top: var(--space-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.onomatopoeia-discovery-link .thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.onomatopoeia-discovery-link:hover .episode-title-link {
  color: var(--color-notes);
}
.onomatopoeia-ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.onomatopoeia-ranking-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}
.onomatopoeia-ranking-list li:last-child {
  border-bottom: none;
}
.onomatopoeia-ranking-num {
  color: var(--color-text-muted);
  min-width: 1.5em;
}
.onomatopoeia-ranking-current {
  color: var(--color-accent-bright);
  font-weight: bold;
}
.onomatopoeia-ranking-count {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-left: auto;
}
.onomatopoeia-entry-header {
  margin-bottom: var(--space-3);
}
.onomatopoeia-entry-header .meta {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
/* [作品名] を単独行に折り返す。タイトル＋READ＋編集リンクはその下にまとまる */
.onomatopoeia-entry-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-bottom: 2px;
}
.onomatopoeia-entry-title-row .series-cat-link {
  flex-basis: 100%;
}
.onomatopoeia-entry-title-row .edit-link {
  flex: 0 0 auto;
  white-space: nowrap;
}
.onomatopoeia-entry-title-row .episode-title-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
}

.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.book-list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.book-list-item:hover { border-color: var(--color-accent); }
.category-library .book-list-item:hover { border-color: var(--color-library); }
.book-list-thumb .book-thumb {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-raised-2);
}
.book-list-thumb .book-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-list-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.book-list-roman {
  font-size: 0.8rem;
  color: var(--color-text-strong);
  margin: 0;
}
.book-list-roman a {
  color: inherit;
}
.book-list-roman a:hover {
  text-decoration: underline;
}
.book-list-comment {
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 0;
}
.book-list-amazon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
}
.library-single-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  align-items: start;
}
/* 左ブロック（画像＋情報＋Amazon）は独立した内部グリッド。
   右側（書評タブ・サイドバー）の高さと行を共有しないので、
   複数行にまたがるアイテムがあるときに発生するグリッドの余白バグを避けられる。 */
.library-single-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-content: start;
}
.library-single-image {
  grid-column: 1;
  grid-row: 1;
}
.library-single-info {
  grid-column: 2;
  grid-row: 1;
}
.library-single-amazon {
  grid-column: 1 / 3;
  grid-row: 2;
}
.library-single-content {
  grid-column: 2;
}
.library-single-sidebar {
  grid-column: 3;
}
.library-single-image .book-thumb-single {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-raised-2);
}
.library-single-image .book-thumb-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-other-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.book-detail-title-ja {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 var(--space-1);
  color: var(--color-text-strong);
}
.book-detail-title-en {
  font-size: 0.8rem;
  margin: 0;
}
.book-detail-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: 0.8rem;
  margin-bottom: var(--space-4);
}
.book-detail-dl dt { color: var(--color-text-muted); white-space: nowrap; }
.book-detail-dl dd { margin: 0; }

/* Amazonリンクボタン */
.book-amazon-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.book-amazon-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.book-amazon-links-kindle,
.book-list-amazon-kindle {
  margin-top: var(--space-1);
}
.book-amazon-global-btn {
  font-size: 0.72rem;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-accent-bright);
  white-space: nowrap;
  transition: border-color 0.15s ease;
  display: inline-block;
  margin-bottom: var(--space-1);
}
.book-amazon-global-btn:hover {
  border-color: var(--color-accent-bright);
}
.book-amazon-btn {
  font-size: 0.72rem;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.book-amazon-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
}
.book-amazon-btn--disabled {
  opacity: 0.4;
  filter: grayscale(100%);
}
.book-amazon-btn--disabled:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}
.book-cdjapan-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.book-cdjapan-label {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.book-cdjapan-link {
  font-size: 0.8rem;
  color: #0099cc;
  text-decoration: underline;
  transition: opacity 0.15s ease;
}
.book-cdjapan-link:hover {
  opacity: 0.75;
}
.book-cdjapan-link--disabled {
  color: var(--color-text-muted);
  text-decoration: underline;
  opacity: 0.4;
  cursor: default;
}
.book-comment {
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-style: italic;
}
.library-other-books { margin-top: var(--space-5); }
.library-other-title {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.05em;
}

.manga-card { display: flex; flex-direction: column; }
.manga-card-gallery { position: relative; }
.manga-card-gallery .thumb {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--color-bg-raised-2);
  cursor: pointer;
}
.manga-card-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; }
.manga-card-gallery .thumb.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: default;
}
.lg-hidden { display: none; }

/* メタ行：ジャンル ▶SHORT 日付 */
.manga-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3) 0;
  font-size: 0.72rem;
}
.manga-card-date { color: var(--color-text-muted); }
.short-trigger {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.short-trigger:hover { color: var(--color-accent-bright); }

/* タイトル行：[作品名] TITLE → READ */
.manga-card-title {
  padding: var(--space-1) var(--space-3) var(--space-3);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}
/* [作品名] は常に単独の行に折り返す。タイトル＋READ＋編集リンクはその下の行にまとまる */
.series-cat-link {
  flex-basis: 100%;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.series-cat-link:hover { color: var(--color-accent-bright); }
.episode-title-link { color: var(--color-text); }
.episode-title-link:hover { color: var(--color-text-strong); }
.episode-title-link:hover .read-label { color: var(--color-accent-bright); }
.read-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* 子カテゴリ（作品）ページ：3カラムレイアウト */
.series-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

/* 左2カラム：作品紹介カード（entry-cardを流用、画像上・情報下） */
.series-header {
  margin-bottom: var(--space-4);
}
.series-header .thumb {
  aspect-ratio: 8 / 3;  /* 2カラム分の横長、右カラムの4:3と高さが揃う */
}
.series-header h2 {
  font-size: 1.1rem;
  margin: var(--space-1) 0;
}

/* 話数縦リスト（古い順） */
.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.episode-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.episode-item:hover { border-color: var(--color-accent); }
.episode-thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 54px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-bg-raised-2);
}
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-info { flex: 1; min-width: 0; }
.episode-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: var(--space-1);
}
.episode-title-row .edit-link {
  flex: 0 0 auto;
  white-space: nowrap;
}
.episode-title-row .episode-title-link {
  font-size: 0.9rem;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.episode-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 2px;
}
.episode-info .meta { font-size: 0.72rem; color: var(--color-text-muted); margin: 0; }
/* 話数一覧：このコマに含まれるオノマトペ一覧（管理者の確認用も兼ねる。single.phpと同じ仕組み） */
.episode-onomatopoeia-list {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.episode-onomatopoeia-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.episode-onomatopoeia-list a {
  color: var(--color-text-muted);
}
.episode-onomatopoeia-list a:hover {
  color: var(--color-accent-bright);
}

/* 右1カラム：サイドバー */
.series-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sidebar-genre-card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidebar-genre-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.sidebar-genre-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-genre-card .body { padding: var(--space-3); }
.sidebar-genre-card h3 { font-size: 0.9rem; margin: 0 0 var(--space-1); }

/* 他の作品リスト */
.sibling-series-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sibling-series-item a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color 0.15s ease;
}
.sibling-series-item a:hover { border-color: var(--color-accent); }
.sibling-thumb {
  flex: 0 0 auto;
  width: 50px;
  height: 38px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-bg-raised-2);
}
.sibling-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sibling-info { display: flex; flex-direction: column; font-size: 0.8rem; }
.sibling-info .meta { font-size: 0.7rem; color: var(--color-text-muted); }

/* ==========================================================================
   6. Single（連載1話）：本文 + 前後話ナビ
   ========================================================================== */
.single-article { padding-block: var(--space-5); }
.single-article { padding-top: 0; }

.page-template-default .single-article { padding-top: 0; }
.category-library .single-article { padding-top: 0; }
.single-article > p.muted:first-of-type { margin-top: 0; margin-bottom: var(--space-2); }
.page-title {
  font-size: 1.8rem;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text-strong);
}

/* SHOUNEN/SHOUJO/SEINEN用 3カラムレイアウト */
.manga-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-block: var(--space-4);
}

/* discoveryシリーズ：左2/3 本文・右1/3 シリーズ目次 */
.discovery-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-block: var(--space-4);
}
.discovery-intro,
.discovery-table,
.discovery-subtable,
.discovery-dialogue {
  margin-bottom: var(--space-4);
}
.discovery-table table,
.discovery-subtable table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}
.discovery-table th,
.discovery-table td,
.discovery-subtable th,
.discovery-subtable td {
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}
.discovery-table th,
.discovery-subtable th {
  background: var(--color-bg-raised);
}
.discovery-single-sidebar {
  position: sticky;
  top: var(--space-4);
}

.discovery-thumb {
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  overflow: hidden;
}
.discovery-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* discovery-qa：A（回答）の段落は、少し右にずらしてメリハリをつける
   使い方：<div class="a-block"><p><strong>A.</strong> ...</p><p>続きの説明...</p></div>
   のように、A側の答え全体を、1つのdivでまとめて囲む */
.discovery-qa .a-block {
  margin-left: var(--space-4);
}

.discovery-sidebar-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}
.discovery-sidebar-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.discovery-sidebar-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.discovery-sidebar-list li:last-child { border-bottom: none; }
.discovery-sidebar-list a {
  color: var(--color-text);
  text-decoration: none;
}
.discovery-sidebar-list a:hover {
  color: var(--color-notes);
}
.discovery-sidebar-list li.is-current span {
  color: var(--color-notes);
  font-weight: bold;
}

@media (max-width: 900px) {
  .discovery-layout {
    grid-template-columns: 1fr;
  }
  .discovery-single-sidebar {
    position: static;
  }
}

/* 左：YouTube動画 */
.manga-col-video {}
.youtube-wrap {
  position: relative;
  padding-bottom: 177.77%; /* 9:16 縦型（ショート動画） */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-raised);
}
.youtube-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* 中：4コマ縦並び */
.manga-col-frames {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.manga-frame {
  margin: 0;
}
.manga-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.manga-frame img:hover {
  opacity: 0.9;
}
.manga-frame figcaption {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: 1.5;
}

/* 右：本文（解説、Amazonアソシエイト等） */
.manga-col-content {
  font-size: 0.9rem;
  line-height: 1.8;
}

/* 4コマまとめ */
.manga-summary {
  margin: var(--space-4) 0 0;
}
.manga-summary img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.manga-summary figcaption {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.episode-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.episode-nav a {
  display: block;
  padding: var(--space-3);
  background: var(--color-bg-raised);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.episode-nav .next { text-align: right; }
.episode-nav .label { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: var(--space-1); }

/* ==========================================================================
   7. Footer
   ========================================================================== */

/* Amazonアソシエイトバナー枠：背景は完全な黒ではなく、はっきり区別がつく「ちょいグレー」 */
.footer-associate {
  background: var(--color-bg-raised-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.amazon-band {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

/* ランダム商品画像 */
.amazon-band-image {
  flex: 0 0 auto;
  max-width: 80px;
  max-height: 100px;
}
.amazon-band-image img {
  width: auto;
  height: auto;
  max-width: 80px;
  max-height: 100px;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
}
.amazon-band-image-placeholder {
  width: 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  overflow: hidden;
  background: var(--color-bg-raised);
  border-radius: var(--radius);
}
.amazon-band-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}
/* おみくじ表示（画像がない枠）専用：「You drew this : 商品名」の1行 */
.amazon-band-omikuji-name {
  font-size: 0.78rem;
  color: var(--color-text);
  margin: 0;
}
.amazon-band-omikuji-fallback {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.amazon-band-omikuji-fallback a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.amazon-band-omikuji-fallback a:hover {
  color: var(--color-accent-bright);
}
.amazon-band-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.amazon-band-region {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.75rem;
}
.amazon-band-label {
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.amazon-band-countries a {
  color: var(--color-text);
  white-space: nowrap;
}
.amazon-band-countries a:hover { color: var(--color-accent-bright); }
.amazon-band-country-disabled {
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0.4;
  filter: grayscale(100%);
}

/* 右側：Amazonアソシエイト開示文（規約上の必須掲載文） */
.amazon-band-disclosure {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: right;
  padding-top: 2px;
}

/* AMAZON GLOBAL：1行目に単独表示、ラベル自体がリンク。自国にAmazonがない人の受け皿として少し強調する */
.amazon-band-global {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-strong);
}
.amazon-band-global:hover { color: var(--color-accent-bright); }

#site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  padding-block: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.footer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.footer-links { display: flex; gap: var(--space-3); flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.footer-disclosure {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.footer-support-row {
  display: flex;
  justify-content: flex-start;
}
.footer-support-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-support-link:hover {
  color: var(--color-accent-bright);
}
.footer-credit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.footer-credit { font-family: var(--font-mono); font-size: 0.75rem; }

/* ==========================================================================
   Blitz Table（作家プロフィールページの全巻リスト）
   ========================================================================== */
.blitz-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: 0.85rem;
}
.blitz-table th,
.blitz-table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: center;
}
.blitz-table th {
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.blitz-table td:first-child {
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.blitz-table a {
  font-size: 1.1rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.blitz-table a:hover {
  opacity: 1;
}
.blitz-table tr:hover td {
  background: var(--color-bg-raised);
}
.top-slider {
  width: 100%;
  margin-bottom: var(--space-5);
  border-radius: var(--radius);
  overflow: hidden;
}
.top-slider .swiper-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.top-slider .swiper-button-prev,
.top-slider .swiper-button-next {
  color: #fff;
  opacity: 0.7;
}
.top-slider .swiper-button-prev:hover,
.top-slider .swiper-button-next:hover {
  opacity: 1;
}
.top-slider .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}
.top-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-accent-bright);
}

/* トップページ：解説動画プロモバナー（notes/video、最新1本） */
.video-promo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.video-promo-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.video-promo-thumb {
  display: block;
  width: auto;
  height: 150px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-raised-2);
}
.video-promo-thumb img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
}
.video-promo-thumb .no-image {
  height: 150px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-promo-date {
  font-size: 0.68rem;
  text-align: center;
}
.video-promo-text {
  flex: 1 1 auto;
  min-width: 0;
}
.video-promo-heading {
  font-size: 1.1rem;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-1);
}
.video-promo-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}
.video-promo-button {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: bold;
  font-size: 0.85rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background 0.15s ease;
}
.video-promo-button:hover {
  background: var(--color-accent-bright);
  color: var(--color-bg);
}
@media (max-width: 600px) {
  .video-promo-banner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .video-promo-button {
    width: 100%;
    text-align: center;
  }
}

/* トップページ最新話セクション */
.top-latest {
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}
.top-latest-heading {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.top-latest .entry-grid {
  padding-top: 0;
}

/* PICKED UP：3ジャンルからランダム1本ずつ、4コマ全表示。
   PCは3本並び、スマホ・タブレット（900px以下）は1本目だけ表示（loading=lazyにより、隠れた2・3本目は読み込まれない） */
.picked-up {
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}
.picked-up-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .picked-up-grid {
    grid-template-columns: 1fr;
  }
  .picked-up-card:not(.is-mobile-featured) {
    display: none;
  }
}
.picked-up-card {
  background: var(--color-bg-raised);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.picked-up-card .manga-card-title {
  margin-bottom: var(--space-1);
  min-height: 4.2rem;
}
.picked-up-card .manga-card-meta {
  margin-bottom: var(--space-2);
}
.picked-up-card .manga-onomatopoeia-list {
  margin-top: var(--space-3);
}

/* ==========================================================================
   404 Error Page
   ========================================================================== */
.error-404 {
  text-align: center;
  padding-block: var(--space-6);
  max-width: 600px;
  margin-inline: auto;
}
.error-404-code {
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  font-family: var(--font-mono);
  opacity: 0.6;
}
.error-404-title {
  font-size: 1.5rem;
  margin: var(--space-3) 0;
  color: var(--color-text-strong);
}
.error-404-message {
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: var(--space-5);
}
.error-404-home {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-accent-bright);
  font-size: 0.85rem;
  transition: background 0.15s ease;
}
.error-404-home:hover {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

/* ==========================================================================
   8. Responsive breakpoints
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
  .entry-grid { grid-template-columns: repeat(2, 1fr); }
  .manga-layout { grid-template-columns: 1fr 1fr; }
  .manga-col-content { grid-column: 1 / -1; }
  .top-slider.swiper { display: none !important; } /* Swiper公式CSS（.swiper { display: block }）は読み込み順で後勝ちするため、詳細度を上げて確実に上書きする */
}

/* Mobile */
@media (max-width: 600px) {
  .entry-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .onomatopoeia-entries { grid-template-columns: 1fr; gap: var(--space-5) var(--space-3); }
  .episode-nav { grid-template-columns: 1fr; }

  /* 子カテゴリページ：モバイルでは縦並び */
  .series-layout { grid-template-columns: 1fr; }
  .series-header { flex-direction: column; }

  /* 3カラム→縦並び */
  .manga-layout { grid-template-columns: 1fr; }

  /* library子カテゴリ（shelf/picks）本リスト：スマホ */
  .book-list-item {
    grid-template-columns: 1fr 2fr;
  }
  .library-single-grid {
    grid-template-columns: 1fr;
  }
  .library-single-left {
    grid-template-columns: 1fr;
  }
  .library-single-image {
    grid-column: 1;
    grid-row: 1;
  }
  .library-single-info {
    grid-column: 1;
    grid-row: 2;
  }
  .library-single-amazon {
    grid-column: 1;
    grid-row: 3;
  }
  .library-single-content {
    grid-column: 1;
  }
  .library-single-sidebar {
    grid-column: 1;
  }

  /* ロゴ潰れ防止 */
  .site-logo img {
    height: 52px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }
  .header-top { gap: var(--space-2); padding: var(--space-2) var(--space-2) 0; }

  /* サブメニュー・SNS行・ジャンプリンクはモバイルで非表示 */
  .sns-row { display: none; }
  .sub-nav { display: none; }
  .jump-link { display: none; }
  /* メインメニューも非表示（モバイルドロワーで代替） */
  .main-nav-row { display: none; }
  .main-nav { display: none; }

  /* ハンバーガーボタン */
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }
  .menu-toggle span {
    width: 22px; height: 2px; background: var(--color-text);
    display: block;
  }

  /* オーバーレイ */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
  }
  body.open-menu .menu-overlay { display: block; }

  /* モバイルドロワー */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    background: var(--color-bg-raised);
    padding: var(--space-6) var(--space-4) var(--space-4);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    overflow-y: auto;
  }
  body.open-menu .mobile-drawer { transform: translateX(0); }

  .mobile-drawer-nav,
  .mobile-drawer-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .mobile-drawer-nav a,
  .mobile-drawer-sub a {
    font-size: 1rem;
    color: var(--color-text);
    letter-spacing: 0.04em;
  }
  .mobile-drawer-nav a { text-transform: uppercase; }
  .mobile-drawer-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-3) 0;
  }

  /* カテゴリページ：モバイルでは■を上に縦積み */
  .genre-grid { grid-template-columns: 1fr; }
  .genre-cover { order: -1; grid-column: 1; grid-row: 1; }
  .genre-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .genre-grid-wide .genre-cover { grid-column: 1 / 3; grid-row: 1; }

  /* Amazon帯：スマホでも横並び（画像左、メニュー右） */
  .amazon-band { gap: var(--space-3); }
  .amazon-band-disclosure { white-space: normal; text-align: left; }

  /* EUROPE/MIDDLE EAST/OCEANIAは見出しと国旗リストを改行 */
  .amazon-band-region {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  /* NORTH AMERICAとSOUTH AMERICAは横並びのまま */
  .amazon-band-row:first-child .amazon-band-region {
    flex-direction: row;
    align-items: baseline;
  }

  /* フッター */
  .footer-disclosure { white-space: normal; }
  .footer-credit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}