:root {
  /* surfaces */
  --bg: #f4f8ff;
  --bg-tint: radial-gradient(1200px 600px at 50% -200px, #dcebff 0%, rgba(220,235,255,0) 60%), var(--bg);
  --panel: #ffffff;
  --panel-2: #eef4ff;
  --border: #dde7f5;
  --text: #16202e;
  --muted: #5b6574;       /* 本文背景・panel-2 の上でも 4.5:1 を満たす濃さ */

  /* pop multi-color accents */
  --accent: #3b82f6;      /* hero blue */
  --accent-rgb: 59,130,246; /* --accent の RGB（半透明の影・フォーカス枠用） */
  --accent-2: #0e7490;    /* cyan (links / secondary)。白背景で 4.5:1 以上 */
  --accent-3: #8b5cf6;    /* violet */
  --accent-4: #f59e0b;    /* amber */
  --ok: #19c37d;          /* green */
  --warn: #f59e0b;
  --danger: #ef4444;
  /* 白文字を載せる塗り用の濃いめの色（WCAG AA 4.5:1 以上）。上の明るい色は枠線・装飾用。 */
  --accent-strong: #2563eb;
  --accent-strong-2: #1d4ed8;
  --accent-3-strong: #7c3aed;
  --ok-strong: #15803d;
  --ok-strong-2: #047857;
  --warn-text: #b45309;

  /* radii */
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* shadows (soft, slightly pink-tinted) */
  --shadow-sm: 0 1px 2px rgba(22,32,46,.06), 0 1px 1px rgba(22,32,46,.04);
  --shadow-md: 0 6px 16px rgba(22,32,46,.10);
  --shadow-pop: 0 10px 24px rgba(var(--accent-rgb),.22), 0 2px 6px rgba(22,32,46,.08);

  /* motion */
  --dur: .18s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* R18版（SITE_VARIANT="adult", src/site.ts）の配色。<html data-site="adult"> は配信時に
   src/analytics.ts の applySiteIdentity が付ける。ピンクは R18 版用に温存している色なので、
   本家（上の :root）では使わない。色の差し替えはここだけで済むよう、本文側は変数だけを使う。
   TODO(R18): 仮の配色。デザインが決まったら詰める（白文字を載せる *-strong は 4.5:1 以上を保つ）。 */
:root[data-site="adult"] {
  --bg: #fff5f9;
  --bg-tint: radial-gradient(1200px 600px at 50% -200px, #ffe0ef 0%, rgba(255,224,239,0) 60%), var(--bg);
  --panel-2: #fdeef5;
  --border: #f5dbe7;
  --text: #2a1620;
  --muted: #6e5562;

  --accent: #ec4899;      /* hero pink */
  --accent-rgb: 236,72,153;
  --accent-2: #a21caf;    /* fuchsia (links)。白背景で 4.5:1 以上 */
  --accent-strong: #be185d;
  --accent-strong-2: #9d174d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  background: var(--bg-tint);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--accent-2); }

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

header.site {
  text-align: center;
  padding: 32px 12px 8px;
}
header.site h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* トップ以外のページのロゴはトップへのリンク。見た目はリンクにしない。 */
header.site h1 .site-logo { color: inherit; text-decoration: none; }
/* 公開ビューの「○○'s ⚐ / My 100 Manga」（2 行）。作者名もロゴと同じサイズで出し、名前の
   通報旗はその横に小さく置く。長い名前は折り返す。 */
header.site h1 .owner-line { display: block; overflow-wrap: anywhere; }
header.site h1 .owner-line[hidden] { display: none; }
header.site h1 .owner-line .report-flag { vertical-align: middle; margin-left: 4px; }
header.site h1 .accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: rotate(-3deg);
}
header.site p.tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
/* ヘッダーのみんなのリスト・売上ランキングへのボタン（src/header.ts が各ページに差し込む）。 */
header.site .header-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--panel); border: 1.5px solid var(--accent);
  color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
header.site .header-link:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-pop);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-3-strong)); border-color: transparent; color: #fff;
}
header.site .header-link-icon { font-size: 14px; line-height: 1; }
header.site .header-link + .header-link { margin-left: 8px; }
/* ヘッダー右上の Google ログイン / アカウント表示（public/account.js が差し込む）。 */
header.site { position: relative; }
.account-bar { position: absolute; top: 10px; right: 12px; z-index: 20; text-align: left; }
.account-login, .account-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.account-login:hover, .account-chip:hover { border-color: var(--accent); color: var(--accent); }
.account-chip img { width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; }
.account-chip span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.account-menu[hidden] { display: none; }
.account-email { margin: 0 0 4px; padding: 4px 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu a, .account-menu button {
  padding: 8px; border: none; border-radius: 8px; background: none;
  color: var(--text); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--panel-2); color: var(--accent); }
.account-danger { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.account-danger summary { cursor: pointer; }
.mylists-note a { color: var(--accent); font-weight: 600; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}
.toolbar .name-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
}
.toolbar input[type="text"] {
  flex: 1;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* shared focus ring for text inputs / textareas */
input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.22);
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
}
.action-bar .cover-status { margin: 0; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  padding: 9px 16px;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease);
}
button:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px) scale(.97); box-shadow: none; }
button:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.45); outline-offset: 2px; }
button.primary, a.button.primary {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong-2));
  border: 1.5px solid transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
button.primary:hover, a.button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
/* ボタンの見た目のリンク（<a><button> の入れ子をやめて <a class="button"> にしたもの）。 */
a.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none; line-height: inherit;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.button:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
a.button:active { transform: translateY(1px) scale(.97); box-shadow: none; }
a.button:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.45); outline-offset: 2px; }
a.button.primary { border-color: transparent; color: #fff; font-weight: 800; box-shadow: var(--shadow-sm); }
.publish-bar a.button.primary { padding: 12px 48px; font-size: 16px; }
button.ok {
  background: linear-gradient(135deg, var(--ok-strong), var(--ok-strong-2));
  border: 1.5px solid transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
button.ok:hover { filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(25,195,125,.22); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

.publish-bar { display: flex; justify-content: center; margin-top: 24px; }
.publish-bar button.primary { padding: 12px 48px; font-size: 16px; }
/* At exactly TARGET the merged counter/CTA turns green and pulses so it's obvious you can publish. */
.publish-bar button.primary.exact {
  background: var(--ok-strong);
  border-color: var(--ok-strong);
  box-shadow: 0 0 0 0 var(--ok);
  animation: publishReady 1.6s ease-out 2;
}
@keyframes publishReady {
  0% { box-shadow: 0 0 0 0 rgba(25, 195, 125, .5); }
  100% { box-shadow: 0 0 0 14px rgba(25, 195, 125, 0); }
}

/* Unsaved-changes indicator vs the published (公開) state, shown only while editing. */
.diff-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 8px 14px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, .10);
}
.diff-bar .diff-count { color: var(--warn-text); font-size: 14px; font-weight: 600; }
.diff-bar button.ghost {
  background: transparent;
  border: 1px solid var(--muted);
  color: var(--muted);
  padding: 6px 16px;
  font-size: 13px;
}
.diff-bar button.ghost:hover { background: rgba(107, 114, 128, .12); filter: none; }

.clear-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
button.danger {
  background: transparent;
  border: 1.5px solid var(--danger);
  color: var(--danger);
}
button.danger:hover { background: rgba(239, 68, 68, .12); filter: none; }
/* 「編集中の漫画を全削除」は誤タップを誘わないよう、枠なしの小さなテキストボタンにする。 */
.clear-bar button.danger {
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: normal;
  padding: 6px 10px;
}
.clear-bar button.danger:hover {
  background: none;
  color: var(--danger);
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

/* Honor reduced-motion: kill the bouncy transforms/animations globally. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  button:hover, button:active,
  .slot:hover, .stat-card:hover, .result:hover, .cand:hover, .fix-row:hover { transform: none !important; }
}

/* ── 管理画面 (admin.html) ─────────────────────────────────────────── */
.admin-todo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.admin-todo[hidden] { display: none; }
.admin-todo-title { font-size: 14px; margin-right: 4px; }
.admin-todo-empty { color: var(--muted); font-size: 13px; }
.admin-todo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--accent);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
.admin-todo a:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.admin-todo-n {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.admin-nav a {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.admin-nav a:hover { background: var(--panel-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.admin-nav a.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-pop);
}
.admin-page[hidden] { display: none; }
/* 開発環境だけに出す UI（DB 初期化・各キャッシュの全削除）。admin.js の initDevTools が
   /api/admin/stats の dev=true のときだけ hidden を外す。.cover-actions のように自前の
   display を持つ要素でも確実に消えるよう !important で潰す。 */
.dev-only[hidden] { display: none !important; }
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.pager .pager-info { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager[hidden] { display: none; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
/* トップの収録数（3 枚固定）。読み込み前は hidden で枠ごと出さない。 */
.stat-grid.site-stats { grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; }
.stat-grid.site-stats[hidden] { display: none; }
@media (max-width: 640px) {
  .stat-grid.site-stats { gap: 8px; }
  .stat-grid.site-stats .stat-card { padding: 12px 6px; }
  .stat-grid.site-stats .stat-card .n { font-size: 20px; }
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
}
.stat-card .n { font-size: 26px; font-weight: 800; color: var(--accent); }
.stat-card .k { font-size: 12px; color: var(--muted); margin-top: 2px; }
a.stat-card.stat-link { display: block; color: inherit; text-decoration: none; }
a.stat-card.stat-link .k::after { content: " ›"; }
/* 日付などの長い値を並べる stat-grid（管理画面の売上ランキング） */
.stat-grid.compact .n { font-size: 18px; }
/* 管理画面の売上ランキング: 今日の分が未取得（Cron 停止の疑い） */
.stat-card.warn { border-color: #f0b429; }
.stat-card.warn .n { color: #c77700; }

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table th, .admin-table td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  white-space: nowrap;
}
.admin-table th {
  background: linear-gradient(var(--panel-2), var(--panel-2));
  color: var(--accent);
  font-weight: 700;
  text-transform: none;
}
.admin-table tbody tr:nth-child(even) td { background: rgba(238,244,255,.6); }
.admin-table tbody tr:hover td { background: rgba(var(--accent-rgb),.07); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.owner { white-space: normal; word-break: break-word; }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table a.slug { font-family: ui-monospace, Menlo, monospace; }
.admin-table td.warn { color: var(--accent); }
.admin-table td.num.hot { color: #fff; background: var(--accent); font-weight: 700; }
.admin-table td.muted { color: var(--muted); }
/* シリーズの結合: 依頼 1 件 / 候補 1 グループごとの枠。見出し行に判断材料と操作を置く。 */
.merge-group { margin-bottom: 16px; }
.merge-group .admin-table td.owner, .merge-group .admin-table label { white-space: nowrap; }
.merge-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.merge-group-head .muted { color: var(--muted); }
.merge-group-head .warn-text { color: var(--accent); font-weight: 700; }
/* 長い補助テキストは1行で省略し、全文は title のツールチップで見せる。自動レイアウトの
   表では td の max-width が効かないため、中の .clip 要素で幅を絞る。 */
.admin-table .clip { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 長くなりうる名前の列は折り返して、表が横にはみ出さないようにする。 */
.admin-table td.wrap { white-space: normal; word-break: break-word; min-width: 8em; }
.admin-empty { text-align: center; color: var(--muted); padding: 32px; }
.admin-table td.report-text { white-space: normal; word-break: break-word; max-width: 260px; }
.admin-table td.report-text .report-cover {
  display: block;
  max-width: 72px;
  max-height: 100px;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: var(--panel-2);
}
.admin-table td.report-actions { white-space: nowrap; }
.admin-table td.report-actions button,
.admin-table td.report-actions a { margin-left: 6px; }
.admin-table td.report-actions button:first-child,
.admin-table td.report-actions a:first-child { margin-left: 0; }
.admin-table td.report-actions a { font-size: 13px; white-space: nowrap; }
.admin-table a.detail { cursor: pointer; }
.table-scroll { overflow-x: auto; }
.admin-table td.book-title {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 160px;
  max-width: 280px;
}
.admin-table td.book-title a.slug { font-family: inherit; }
.admin-table td.book-authors {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 100px;
  max-width: 180px;
}
.admin-table td.book-publisher {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 90px;
  max-width: 160px;
}
.admin-table td.book-meta-caption button.linkish {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--accent-2);
  font: inherit;
  cursor: pointer;
}
.admin-table td.book-meta-caption button.linkish:hover { text-decoration: underline; }
.book-meta-full {
  grid-column: 1 / -1;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.8;
  font-size: 14px;
  padding: 4px 2px;
}
.corr-thumb { width: 40px; height: 56px; object-fit: contain; background: var(--panel-2); border-radius: 4px; display: block; }
.corr-noimg { width: 40px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border-radius: 4px; color: var(--muted); font-size: 10px; }
.corr-thumb.zoomable { cursor: zoom-in; }

/* 表紙の拡大表示オーバーレイ */
.cover-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}
.cover-zoom[hidden] { display: none; }
.cover-zoom img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* リスト詳細モーダル */
.detail-modal { max-width: 880px; width: 92vw; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
  margin: 12px 0;
}
.detail-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  font-size: 12px;
}
.detail-item .di-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--panel-2); display: block; }
.detail-item .di-noimg { width: 100%; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--muted); font-size: 11px; }
.detail-item .di-body { padding: 6px 8px; }
.detail-item .di-pos { color: var(--muted); }
.detail-item .di-title { font-weight: 600; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.detail-item .di-author { color: var(--muted); max-height: 2.4em; overflow: hidden; }
.detail-item .di-flags { margin-top: 4px; color: var(--accent); font-size: 11px; }
.detail-item .di-meta { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.detail-item .di-meta:empty { display: none; }
.detail-item .di-isbn { font-variant-numeric: tabular-nums; }
.detail-item.clickable { cursor: pointer; }
.detail-item.clickable:hover { border-color: var(--accent); }

/* 表紙キャッシュ操作 */
.cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cover-single { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.cover-single input[type="text"] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  width: 200px;
}

.dev-danger-box {
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 8px;
}
.dev-danger-box h3 { margin: 0 0 8px; font-size: 15px; }
.dev-danger-box ul { margin: 6px 0; padding-left: 20px; }
.dev-danger-box button.danger { margin-top: 12px; }

/* 管理画面のスマホ表示。表は 1 行 = 1 カードにして、各セルの前に列名（admin.js が th から
   写した data-label）を出す。横スクロールせずに全列が読める。 */
@media (max-width: 640px) {
  /* ナビは折り返すと画面を占領するので 1 行の横スクロールにする */
  .admin-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 16px;
    padding: 0 16px 10px;
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav a { padding: 6px 12px; font-size: 13px; }
  .admin-todo a { white-space: normal; }

  .admin-page .toolbar { padding: 12px; gap: 8px; justify-content: flex-start; }
  .admin-page .toolbar > strong { flex: 1 1 100%; }
  .admin-page .toolbar > div[style*="flex:1"] { display: none; }
  .admin-page .toolbar button { padding: 7px 12px; font-size: 13px; }
  .admin-page .toolbar input[type="text"] { flex: 1 1 100%; min-width: 0 !important; margin-left: 0 !important; }
  .admin-page input[type="text"] { min-width: 0 !important; max-width: 100%; }

  .cover-actions { padding: 12px; }
  .cover-actions > button { flex: 1 1 auto; }
  .cover-single { flex-wrap: wrap; margin-left: 0; width: 100%; }
  .cover-single input[type="text"] { flex: 1 1 160px; width: auto; }

  .merge-group-head { flex-wrap: wrap; }
  .merge-group-head > span { flex: 1 1 100%; }
  .merge-group-head > div[style*="flex:1"] { display: none; }

  .table-scroll { overflow-x: visible; }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td { display: block; }
  .admin-table {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .admin-table thead { display: none; }
  .admin-table tbody tr {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .admin-table tbody tr:nth-child(even) td,
  .admin-table tbody tr:hover td { background: none; }
  .admin-table th, .admin-table td,
  .admin-table td.wrap, .admin-table td.owner,
  .admin-table td.report-text,
  .admin-table td.book-title, .admin-table td.book-authors, .admin-table td.book-publisher {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: none;
  }
  .admin-table td {
    position: relative;
    padding: 5px 0 5px 7.5em;
    border-bottom: 1px dashed var(--border);
    text-align: left;
  }
  .admin-table tr td:last-child { border-bottom: none; }
  .admin-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 6px;
    width: 7em;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }
  /* 列名の無いセル（表紙・操作ボタン・見出しの無い表）はラベル幅を取らない */
  .admin-table td[data-label=""],
  .admin-table td:not([data-label]) { padding-left: 0; }
  .admin-table td[data-label=""]::before,
  .admin-table td:not([data-label])::before { display: none; }
  /* ボタンだけのセル（「詳細」「削除」が別の列のもの）は横に並べる */
  .admin-table td[data-label=""]:has(> button:only-child) {
    display: inline-block;
    margin: 8px 8px 0 0;
    padding: 0;
    border-bottom: none;
  }
  .admin-table td.num { text-align: left; }
  .admin-table td.num.hot { background: none; color: var(--accent); }
  .admin-table .clip { max-width: none; white-space: normal; }
  .admin-table td.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    white-space: normal;
  }
  .admin-table td.report-actions button,
  .admin-table td.report-actions a { margin-left: 0; }
  .admin-table td.report-actions button { flex: 1 1 auto; padding: 9px 12px; }
  .admin-table td.report-text .report-cover { max-width: 96px; max-height: 136px; }
  .admin-empty { padding: 20px 8px; }

  .detail-modal { width: 100%; }
  .detail-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
}

/* 限定公開リストの目印（公開ビューのタグライン横）。 */
.secret-badge {
  display: inline-block;
  padding: 1px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* 作者のひとこと（公開ビューのツールバー）。長文は折り返す。 */
.owner-bio {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 控えめな通報リンク（公開ビュー） */
.report-link {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--muted);
  font-size: 12px;
  opacity: .6;
  transition: opacity .15s ease, color .15s ease;
}
.report-link:hover { opacity: 1; color: var(--accent); filter: none; }
.report-link:disabled { opacity: .5; color: var(--muted); }
.dinfo .report-link { display: block; margin-top: 10px; text-align: left; }
/* 巻ピッカー内の「間違っています」通報。行の右端に旗アイコンだけを置き、ホバー
   （デスクトップ）または .revealed 付与（タッチ端末の初回タップ）で文言を展開する。 */
.report-flag {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease;
}
.report-flag .flag-icon { font-size: 16px; }
.report-flag .flag-text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .2s ease, opacity .15s ease, margin-left .2s ease;
}
.report-flag:hover,
.report-flag.revealed { opacity: 1; color: var(--accent); }
.report-flag:hover .flag-text,
.report-flag.revealed .flag-text {
  max-width: 120px;
  opacity: 1;
  margin-left: 4px;
}
.report-flag:disabled { opacity: .4; cursor: default; }

/* シリーズ名の通報（巻一覧の見出し行）。巻の通報と同じく普段は旗だけで、ホバー（タッチ端末は
   初回タップ）で文言を展開する。通報済みは薄く固定して二度押しさせない。 */
.name-report-flag { opacity: .7; vertical-align: middle; }
.name-report-flag:hover .flag-text,
.name-report-flag.revealed .flag-text { max-width: 220px; }
.name-report-flag.reported { opacity: .45; color: var(--muted); cursor: default; }

/* 「シリーズが分かれている？」の画面。対象のタイトルは大きく出す。 */
.merge-title { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 8px 0 4px; overflow-wrap: anywhere; }
.merge-title .series-id { font-size: 12px; font-weight: normal; color: var(--muted); margin-left: 8px; }
/* 検索結果の絞り込み（出版社・レーベル）。選択肢が 1 つしかないときは JS 側で隠す。 */
.merge-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0;
}
.merge-filters[hidden] { display: none; }
.merge-filters .hint { margin: 0; flex: none; }
.merge-filters select {
  flex: 1 1 160px; min-width: 0; max-width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
}
.merge-filters select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.22);
}
/* 候補行。左のチェックで選び、行を押すと巻のプレビュー。 */
.merge-cand:hover { transform: none; }
.merge-check { flex: none; display: flex; align-items: center; padding: 6px; margin: -6px 0 -6px -4px; cursor: pointer; }
.merge-check input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.merge-done { flex: none; margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 選択中の相手と送信ボタン。結果欄（.results）の下端に貼り付ける。 */
.merge-submit {
  position: sticky; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 0 4px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.merge-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.merge-chips:empty { display: none; }
.merge-chip {
  display: inline-flex; align-items: center; gap: 2px;
  max-width: 100%; padding: 2px 4px 2px 10px;
  border: 1px solid var(--accent); border-radius: 999px;
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.merge-chip .series-id { margin-left: 4px; font-size: 11px; color: var(--muted); }
.merge-chip .linkbtn { padding: 0 4px; font-size: 14px; line-height: 1; }
.merge-submit button.primary { flex: 1; }
.merge-cand .series-id { font-size: 11px; font-weight: normal; color: var(--muted); }
.merge-cand .merge-vols { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.merge-cand.open { border-color: var(--accent); margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 候補を押したときに出す巻のプレビュー（表紙の横スクロール）。 */
.merge-preview {
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.merge-preview .hint { margin: 0; }
.merge-preview-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.merge-preview-vol {
  flex: none; width: 64px; text-align: center;
  padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-weight: 400;
  cursor: pointer; /* button の既定を消す */
}
.merge-preview-vol:hover { filter: none; box-shadow: none; }
.merge-preview-vol:hover img { outline: 2px solid var(--accent); }
.merge-preview-vol img, .merge-preview-vol .noimg { width: 64px; height: 92px; border-radius: 4px; }
.merge-preview-vol img { object-fit: cover; display: block; }
.merge-preview-vol .noimg {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--muted); font-size: 10px;
}
.merge-preview-label { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 「間違っています」で非表示にした巻を本人が戻す導線。折りたたみ（<details>）で普段は邪魔せず、
   開くと巻ごとに「戻す」を出す。 */
.hidden-restore {
  margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 13px;
}
.hidden-restore > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  color: var(--muted);
  user-select: none;
}
.hidden-restore > summary::-webkit-details-marker { display: none; }
.hidden-restore > summary::before { content: "▸ "; }
.hidden-restore[open] > summary::before { content: "▾ "; }
.hidden-restore > summary:hover { color: var(--accent); }
.hidden-list {
  padding: 4px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hidden-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hidden-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden-row .linkbtn { flex: none; }

/* 詳細ダイアログ右上の通報メニュー。旗アイコン1つ（.report-toggle）をタップ/ホバー
   で開き、対象（表紙・コメント）ごとの項目を .report-pop に出す。 */
#detailModal .modal { position: relative; transition: transform .2s ease; touch-action: pan-y; }
#editModal .modal { transition: transform .2s ease; touch-action: pan-y; }
#detailModal h2 { padding-right: 40px; }
.report-menu { position: absolute; top: 14px; right: 14px; z-index: 2; }
.report-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.report-toggle:hover,
.report-toggle[aria-expanded="true"] { opacity: 1; color: var(--accent); border-color: var(--accent); }
.report-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report-pop[hidden] { display: none; }
.report-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.report-item:hover { background: var(--panel-2); color: var(--accent); }

.mylists {
  margin-top: 40px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.mylists-title { margin: 0 0 4px; font-size: 16px; }
h3.mylists-title { margin-top: 24px; font-size: 14px; }
.ml-claim { margin: 0 0 8px; font-size: 13px; }
/* 編集 URL を直接開いた時の「アカウントに追加」（app.js renderClaimBar）。 */
.claim-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 16px; padding: 12px 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px;
}
/* ログイン直後の紐付けダイアログ（account.js chooseDialog）。 */
.claim-list { list-style: none; margin: 0 0 16px; padding: 0; max-height: 50vh; overflow-y: auto; }
.claim-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.claim-list label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; font-size: 14px; }
.claim-slug { color: var(--muted); font-size: 12px; }
.mylists-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.mylists-list { list-style: none; margin: 0; padding: 0; }
.mylists-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ml-view { flex: 1 1 auto; color: var(--text); text-decoration: none; font-weight: 600; }
.ml-view:hover { color: var(--accent); }
.ml-edit {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}
.ml-edit:hover { background: var(--accent-strong); color: #fff; }
.ml-del {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.ml-del:hover { color: var(--danger); }

.slot {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .slot:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); z-index: 3; }
}
.slot .num {
  position: absolute;
  top: 6px; left: 6px;
  background: linear-gradient(135deg, var(--accent-3-strong), var(--accent-strong));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.slot.over-limit {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.slot.over-limit .num { background: var(--accent-strong); }
.slot.empty {
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-style: dashed;
}
.slot.empty .plus { font-size: 28px; line-height: 1; }
.slot.empty .label { font-size: 12px; margin-top: 4px; }

.slot .cover {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  background: var(--panel-2);
}
.slot .cover.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
  text-align: center;
}
.slot .meta {
  padding: 6px 8px;
  background: var(--panel);
}
.slot .meta .t {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}
.slot .meta .c {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  max-height: 2.4em;
  overflow: hidden;
}
/* 削除ボタン（×）。カード（button.slot）の中に入れ子にせず、外側の .slot-cell に兄弟として
   置く。見た目の丸は中の .slot-remove-x、押せる範囲はボタン本体（タッチ端末では 44px 四方）。 */
.slot-cell { position: relative; display: flex; flex-direction: column; min-width: 0; }
.slot-cell > .slot { width: 100%; }
.slot-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  opacity: 0;
  z-index: 4;
}
.slot-remove:hover, .slot-remove:active { transform: none; box-shadow: none; filter: none; }
.slot-remove-x {
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
.slot-remove:hover .slot-remove-x { background: var(--accent-strong); }
/* Desktop: reveal × on hover / keyboard focus. Touch devices have no hover, so keep it always visible. */
@media (hover: hover) {
  .slot-cell:hover .slot-remove, .slot-remove:focus-visible { opacity: 1; }
  .slot-cell:hover .slot-remove { transform: translateY(-3px); } /* 浮き上がるカードに合わせる */
}
@media (hover: none) {
  .slot-cell .slot-remove { opacity: 1; top: 0; right: 0; width: 44px; height: 44px; }
}

.slot .badges {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.slot .badge {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.slot .badge-spoiler { background: var(--accent-strong); }
.slot .badge-comment { background: var(--accent-3-strong); }

/* ---------- reorder mode ---------- */
#reorderToggle.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  font-weight: 700;
}

/* Selected card: accent ring + check badge. */
.grid.reorder .slot.selected {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.slot-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  z-index: 4;
}
.slot.selected .slot-check { display: flex; }

/* Insertion caret: a tappable strip on the card's leading edge that means
   "move the selection to just before this card". Only rendered on unselected
   cards once a selection exists. */
.ins-caret {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 30%;
  z-index: 5;
  cursor: copy;
  border-left: 4px solid var(--accent);
  background: linear-gradient(to right, rgba(var(--accent-rgb),.28), rgba(var(--accent-rgb),0));
}
.ins-caret::after {
  content: "▸";
  position: absolute;
  top: 50%; left: 4px;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}
@media (hover: hover) {
  .ins-caret { opacity: .55; }
  .ins-caret:hover { opacity: 1; }
}

.reorder-controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.reorder-count { font-size: 13px; color: var(--muted); }
.reorder-spacer { flex: 1; }
@media (max-width: 560px) {
  .reorder-count { flex-basis: 100%; }
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,17,21,.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 12px;
  z-index: 50;
  overflow: auto;
}
.modal-backdrop.open { display: flex; }
/* Freeze the page behind any open modal so the background can't scroll or be
   touched; the backdrop keeps its own overflow for tall modal content. */
html:has(.modal-backdrop.open) { overflow: hidden; }
.modal-backdrop { overscroll-behavior: contain; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  padding: 22px;
  box-shadow: var(--shadow-pop);
  animation: modalPop .22s var(--ease-bounce);
}
@keyframes modalPop {
  from { transform: translateY(8px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal h2 { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.modal .row { display: flex; gap: 8px; margin-bottom: 12px; }
/* 見出しの右に操作ボタンを置くモーダル（本の詳細 #volModal）。背景（.modal-backdrop）が
   スクロールするので、見出しの行ごと上に貼り付けて、長い本文でもボタンを押せるようにする。 */
.modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px;
  margin: -22px -22px 12px; padding: 16px 22px 12px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-head h2 { flex: 1; min-width: 0; margin: 0; padding-top: 6px; }
.modal-head-actions { flex: none; display: flex; gap: 8px; }
@media (max-width: 480px) {
  .modal-head { flex-wrap: wrap; }
  .modal-head-actions { order: -1; width: 100%; justify-content: flex-end; }
  .modal-head h2 { padding-top: 0; }
}

.modal input[type="text"], .modal textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.modal textarea { resize: vertical; min-height: 60px; }
.modal label.check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

/* 公開範囲のトグル。checkbox を視覚的に隠し、隣の .switch をつまみ付きのレールとして描く。 */
.switch-row { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; font-weight: 600; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-row .switch {
  position: relative; flex: none; width: 44px; height: 26px;
  border-radius: var(--radius-pill); background: var(--border); transition: background .15s;
}
.switch-row .switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.sel-cover { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.sel-cover-thumb { width: 44px; height: 62px; flex: none; }
.sel-cover-thumb img, .sel-cover-thumb .noimg {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted); text-align: center;
}

.results { max-height: 320px; overflow: auto; margin: 8px 0; }
/* 検索結果が30件を超えるときの「さらに表示」。結果リストの末尾に横いっぱいで置く。 */
.more-results { display: block; width: 100%; margin: 8px 0; }

/* 画面いっぱいのモーダル（検索）。結果欄だけがスクロールし、見出しとフッターは常に見える。 */
.modal-full { padding: 16px 12px; }
.modal-full .modal {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 32px);
  max-width: 720px;
}
.modal-full .results { flex: 1; max-height: none; min-height: 0; }
.modal-full .modal-actions { flex: none; }
/* 検索モーダルの見出し行（タイトル + 右上の閉じる）。下の操作欄は表紙取得ボタンがあるときだけ出す。 */
.search-head { flex: none; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.search-head h2 { flex: 1; min-width: 0; margin: 0; padding-top: 6px; }
.search-head button { flex: none; }
#searchModal .modal-actions:has(.search-actions:empty) { display: none; }
@media (max-width: 560px) {
  .modal-full { padding: 0; }
  .modal-full .modal {
    height: 100dvh;
    max-width: none;
    border: none;
    border-radius: 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
}
/* スマホでだけ画面いっぱいにするモーダル（本の詳細: 閲覧画面・ランキング）。検索の .modal-full と
   同じ見た目だが、PC ではふつうのカードのまま。中身が長ければ背景（.modal-backdrop）ごとスクロール。 */
@media (max-width: 560px) {
  .modal-sheet { padding: 0; }
  .modal-sheet .modal {
    min-height: 100dvh;
    max-width: none;
    border: none;
    border-radius: 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
}
.result {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  align-items: center;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.result:hover { background: var(--panel-2); border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.result img, .result .noimg {
  width: 44px; height: 62px; object-fit: cover;
  border-radius: 4px; background: var(--panel-2); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted);
}
.result .info { flex: 1; }
.result .info .t { font-size: 14px; font-weight: 600; }
.result .info .a { font-size: 12px; color: var(--muted); }
.result .chev { color: var(--muted); font-size: 20px; flex: none; padding: 0 4px; }

.vol-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.linkbtn {
  background: none;
  border: none;
  color: var(--accent-2);
  padding: 4px 2px;
}
.linkbtn:hover { filter: brightness(1.15); text-decoration: underline; }

/* 「最新巻を取得」ボタン。検索カード(.result)内と巻一覧バー(.vol-bar)の両方で使う。 */
.sup-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  flex: none;
  white-space: nowrap;
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.sup-btn:hover { background: rgba(217, 119, 6, .12); filter: none; }
/* 巻一覧の末尾の「最新巻を取得」バー。更新日・IDはボタンの下に1行ずつ。 */
.sup-bar { margin-top: 12px; }
/* マスター更新日・最終確認日。 */
.sup-stamp {
  font-size: 12px;
  color: var(--muted);
  flex-basis: 100%;
}

/* シリーズID。問い合わせ用なので目立たせないが、ID だけを選択・コピーできるようにする。 */
.series-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
}
.series-id-line { flex-basis: 100%; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.series-id-line .copy-id { font-size: 12px; padding: 2px 4px; }

/* 検索モーダルの見出し直下に出す、巻一覧で開いているシリーズ名。 */
.search-subtitle { margin: -4px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.35; }
.search-subtitle[hidden] { display: none; }
.search-subtitle .name-report-flag { font-size: 13px; font-weight: normal; }
.search-subtitle .st-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 2px 0 0 -6px; }
.search-subtitle .sa { margin-top: 2px; font-size: 13px; font-weight: normal; color: var(--muted); }
.search-bar { flex: none; margin: 0 0 4px; }
.search-bar[hidden] { display: none; }

/* キーワード取得バー（検索結果の先頭に常設）。 */
.live-bar { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
/* live MADB 由来の検索カードにつく識別バッジ。 */
.live-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
}

.gap-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed var(--muted);
  border-radius: 8px;
}
.gap-label { font-size: 12px; color: var(--muted); }
.gap-btn { font-size: 13px; }

.modal-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

/* ランキングから開く読み取り専用の巻一覧（public/series-volumes.js）。本の詳細と同じ枠に、
   ページ側のランキングと同じ .slot を並べる。巻数が多いシリーズがあるので一覧だけスクロール
   させ、見出しと「トップで開く」は常に見えるようにしておく。 */
.sv-modal { max-width: 720px; }
/* 本の詳細（.modal-backdrop は z-index 50）より 1 つ下に敷く。巻一覧 → 巻をタップ → 本の詳細、
   と重ねて開くので、同じ z-index だと後から DOM に入った巻一覧が詳細を覆ってしまう
   （詳細のモーダルは最初に開いたときに作られるため、必ず巻一覧より前に入る）。 */
#seriesVolumesModal { z-index: 49; }
.sv-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sv-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  max-height: 56vh;
  overflow-y: auto;
  margin-top: 10px;
  padding: 2px;
}
/* .slot の見た目は a 向けに書いてあるので、button で使うときに効かない分だけ戻す。 */
.sv-slot { font: inherit; color: inherit; }
@media (max-width: 560px) {
  .sv-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: none; }
}
/* 検索モーダルのフッター左側。表示中の画面の「表紙を取得」を入れる（閉じるの左に左寄せ）。 */
.search-actions { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.search-actions .cover-status { margin: 0; }
/* R18版の検索モーダルに出る「全年齢の作品も含める」（public/app.js initAllAges）。
   既定は成年向けだけを引くので、外せることが分かる位置（タイトルのすぐ下）に置く。 */
.all-ages { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.all-ages[hidden] { display: none; }
.all-ages input { margin: 0; }
.hint { color: var(--muted); font-size: 13px; }
/* 成年向けで追加できない ISBN を検索したときの結果欄（src/adult.ts）。「見つからない」と見分けがつくよう枠付き。 */
.adult-block {
  margin: 8px 0; padding: 12px 14px;
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  background: #fffbeb; color: var(--warn-text); font-size: 14px; font-weight: 700;
}
/* 書名検索が成年向けの巻にも当たったときの注記（結果の下）。 */
.adult-note { margin: 10px 0 0; }
.spinner { color: var(--muted); font-size: 14px; padding: 10px 0; display: flex; align-items: center; gap: 8px; }
.spinner::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(59, 130, 246, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner::before { animation-duration: 2s; }
}

.cover-status {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0; font-size: 12px;
}
.cover-status::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border: 2px solid rgba(59, 130, 246, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cover-status::before { animation-duration: 2s; }
}

.share-url {
  display: flex; gap: 8px; margin: 8px 0;
}
.share-url input { flex: 1; }
/* X へのシェア（public/share-x.js）。ポスト導線は X の黒ボタンに寄せる。 */
.share-x { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
button.x-post { background: #000; border-color: #000; color: #fff; }
button.x-post:hover { background: #222; border-color: #222; }
/* 画像共有のあとに出す SNS の投稿画面リンク（share-x.js の showSnsPanel）。 */
.sns-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0 0 16px; }
.sns-link {
  display: block; text-align: center; padding: 12px 8px; border-radius: 8px;
  font-weight: 700; text-decoration: none; color: #fff;
}
.sns-link:hover { opacity: .85; }
.sns-x, .sns-threads { background: #000; }
.sns-bluesky { background: #1185fe; }
.sns-facebook { background: #1877f2; }
.sns-line { background: #06c755; }
/* 新刊の ISBN 追加。巻番号欄は数桁だけなので固定幅にする。 */
.new-vol-row { align-items: center; }
.share-url input.new-vol-num { flex: none; width: 4.5em; text-align: right; }
.new-vol-btn { font-size: 13px; }

footer.site {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 32px;
  padding: 20px 16px 28px;
  border-top: 1px solid var(--border);
}
footer.site p { margin: 6px 0 0; }
footer.site .foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-size: 13px;
}
footer.site .foot-links a { color: var(--text); text-decoration: none; }
footer.site .foot-links a:hover { color: var(--accent); text-decoration: underline; }
footer.site .aff-disclosure { margin-top: 10px; font-size: 11px; }
footer.site .foot-source { margin-top: 10px; font-size: 11px; }
footer.site .foot-source a { color: inherit; text-decoration: none; }
footer.site .foot-source a:hover { color: var(--accent); text-decoration: underline; }
/* 楽天・Yahoo! の公式クレジット（src/footer.ts。中身の HTML は規定のまま変えないので外側から整える）。 */
footer.site .foot-credits { font-size: 11px; }
footer.site .foot-credits a { color: var(--muted); }
footer.site .foot-credits button {
  /* 左の間隔は Yahoo! のスニペットの span（margin 15px、改変不可）が作るので、ボタン側には付けない。 */
  background: none; border: none; padding: 0; margin: 0;
  color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer;
}
footer.site .foot-credits button:hover { color: var(--danger); }
footer.site .foot-copy { margin-top: 10px; font-size: 11px; opacity: .8; }

/* 右下の「ページの先頭へ」ボタン（src/footer.ts）。PC（幅が広くマウス操作）だけ出す。 */
.to-top { display: none; }
@media (min-width: 768px) and (hover: hover) {
  .to-top {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 24px; bottom: 24px; z-index: 30;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; color: var(--accent);
    box-shadow: 0 4px 14px rgba(22, 32, 46, .12);
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .to-top.show { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .to-top:focus-visible { outline: 3px solid rgba(37, 99, 235, .4); outline-offset: 2px; }
}
html:has(.modal-backdrop.open) .to-top { display: none; }

/* static content pages (about など) */
.prose {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}
.prose h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 22px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.prose h3 { font-size: 15px; margin: 16px 0 4px; }
.prose p { margin: 8px 0; }
/* 利用規約・プライバシーポリシー末尾の制定日（改定時は「最終改定日」を足す）。 */
.prose .enacted { margin-top: 24px; text-align: right; color: var(--muted); font-size: 13px; }
.prose ul { margin: 8px 0; padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose .lead { color: var(--muted); font-size: 14px; }
.prose .note {
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0;
}
.prose .src-name { font-weight: 700; }
.prose .x-icon { vertical-align: text-bottom; margin-right: 4px; }
.prose .profile { overflow: hidden; }
.prose .profile ul { list-style: none; padding-left: 0; margin-left: 0; }
.prose .profile-avatar {
  float: left;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 16px 8px 0;
  object-fit: cover;
}
.prose .operator-photo { margin: 16px 0; }
.prose .operator-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  border-radius: 12px;
}
.prose .operator-photo figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.prose .donate-qr { margin: 12px 0; }
.prose .donate-qr img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 220px;
  border-radius: 8px;
}
.prose .donate-qr figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

/* view page: read-only */
.slot.view { cursor: pointer; }
.slot.view .meta .c.spoiler {
  filter: blur(5px);
  cursor: pointer;
  user-select: none;
}
.slot.view .meta .c.spoiler.revealed { filter: none; cursor: default; }

/* view detail modal */
.detail-body { display: flex; gap: 14px; }
.detail-body .dcover, .detail-body .dnoimg {
  width: 96px; height: 132px; object-fit: cover; border-radius: 6px;
  background: var(--panel-2); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted);
}
.detail-body .dinfo { flex: 1; min-width: 0; }
.detail-body .dauthor { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.detail-body .dcomment { white-space: pre-wrap; word-break: break-word; }
.detail-body .dcomment.spoiler {
  filter: blur(5px); cursor: pointer; user-select: none;
}
.detail-body .dcomment.spoiler.revealed { filter: none; cursor: default; }
.detail-body .dcomment.empty { color: var(--muted); }
.detail-reveal { margin-top: 10px; }

/* view detail modal — metadata list */
.dmeta { margin: 0 0 10px; display: grid; gap: 4px; }
.dmeta-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; }
.dmeta-row dt { flex: none; width: 68px; color: var(--muted); }
.dmeta-row dd { margin: 0; min-width: 0; word-break: break-word; }
.series-link { color: var(--accent-2); font-weight: 600; text-decoration: none; cursor: pointer; }
.series-link:hover { text-decoration: underline; }

/* view detail modal — synopsis */
.dsynopsis { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.dsynopsis-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.dsynopsis-text {
  margin: 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  max-height: 180px; overflow-y: auto;
}

/* view detail modal — buy links */
.buy { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.buy-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.buy-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.buy-btn {
  display: inline-block; text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  color: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-bounce), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.buy-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.buy-btn:active { transform: translateY(1px) scale(.97); }
.buy-btn.amazon { background: #ff9900; color: #1a1015; border-color: #e88a00; }
.buy-btn.rakuten { background: #bf0000; border-color: #a30000; }
.buy-btn.mercari { background: #ff0211; border-color: #d80010; }
.buy-btn.yahoo { background: #ff0033; border-color: #d9002b; }
.buy-note { font-size: 11px; color: var(--muted); margin: 4px 0 0; }

/* correction page */
.toolbar .check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.fix-list { display: flex; flex-direction: column; gap: 10px; }
.fix-row {
  display: flex; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .fix-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.fix-cover { width: 56px; height: 78px; flex: none; }
.fix-cover img, .noimg {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted); text-align: center;
}
.fix-info { flex: 1; min-width: 0; }
.fix-info .t { font-size: 14px; font-weight: 600; overflow: hidden; }
.fix-info .a { font-size: 12px; color: var(--muted); }

.cand-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-height: 360px; overflow: auto; margin: 6px 0 14px;
}
@media (max-width: 560px) { .cand-grid { grid-template-columns: repeat(3, 1fr); } }
/* 表紙候補の段階ローディング。段階ごとの区画は display:contents でグリッドに溶け込ませ、
   到着順に関係なく段階順に並べる。 */
.cand-section { display: contents; }
.pick-stages { display: flex; flex-direction: column; margin: 6px 0 0; }
.pick-stages .spinner { padding: 3px 0; font-size: 13px; }
.pick-stage.done { color: var(--muted); font-size: 13px; padding: 3px 0 3px 24px; position: relative; }
.pick-stage.done::before { content: "✓"; position: absolute; left: 4px; color: var(--accent); }
.pick-stage.fail { color: var(--muted); font-size: 13px; padding: 3px 0 3px 24px; }
.cand {
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cand:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.cand img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--panel); }
.cand .src {
  align-self: center;
  font-size: 9px; font-weight: 700; color: var(--accent-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 0 6px;
}
.cand .cap { font-size: 10px; color: var(--muted); line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.fix-info .a.isbn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* ── 人気ランキング (ranking.html / ranking.js) ──────────────────────────── */
.rank-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.rank-tab {
  padding: 8px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rank-tab:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.rank-tab.active {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-3-strong));
  border-color: transparent; color: #fff; box-shadow: var(--shadow-pop);
}
.rank-note { color: var(--muted); font-size: 12px; margin: 4px 0 12px; }
.rank-empty { color: var(--muted); text-align: center; padding: 32px 0; }

/* ── 公開リスト一覧 (lists.html / lists.js) ─────────────────────────────── */
.plist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.plist-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
.plist-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.plist-covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
.plist-covers .cover { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--panel-2); border-radius: 4px; }
.plist-title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.plist-bio {
  color: var(--text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plist-meta { color: var(--muted); font-size: 12px; margin-top: auto; font-variant-numeric: tabular-nums; }

/* 人気ランキング ⇔ 売上ランキングの切り替え（ページ間リンク） */
.rank-switch { display: flex; gap: 0; margin: 4px 0 0; border-bottom: 1.5px solid var(--border); }
.rank-switch a {
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1.5px;
}
.rank-switch a.active { color: var(--accent); border-bottom-color: var(--accent); }
/* ランキング（人気・売上）の表紙グリッド（100 冊の閲覧画面の .slot を流用）。左上の順位は 1〜3 位を金銀銅に。 */
a.rank-slot { color: inherit; text-decoration: none; }
.rank-slot .num.top1 { background: linear-gradient(135deg, #f4ce73, #e8a200); font-size: 14px; }
.rank-slot .num.top2 { background: linear-gradient(135deg, #c9d0d8, #9aa3ad); font-size: 13px; }
.rank-slot .num.top3 { background: linear-gradient(135deg, #e3a679, #c57b45); font-size: 13px; }
.rank-slot:first-child { border-color: #f4ce73; box-shadow: 0 8px 20px rgba(232,162,0,.18); }
.rank-slot .meta .c { white-space: nowrap; text-overflow: ellipsis; }
.rank-source { color: var(--muted); font-size: 11px; margin: 16px 0 0; }
/* ランキングの本の詳細（book-detail.js）の「巻一覧を開く」。リンクだが primary ボタンの見た目に。 */
a.bd-series {
  display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong-2)); color: #fff; /* button.primary と同じ */
  font-weight: 800; font-size: 13px; text-decoration: none; box-shadow: var(--shadow-sm);
}
a.bd-series:hover { filter: brightness(1.03); box-shadow: var(--shadow-pop); }

/* ── サイト内ダイアログ (ui-dialog.js) ─────────────────────────────────
   スマホで扱いづらいブラウザ標準 alert/confirm/prompt の置き換え。 */
.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, .5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
  overflow: auto;
}
.ui-dialog-backdrop.open { display: flex; }
.ui-dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 22px;
  box-shadow: var(--shadow-pop);
  animation: modalPop .22s var(--ease-bounce);
}
.ui-dialog-msg {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.ui-dialog-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.ui-dialog-error {
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--danger);
}
.ui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ui-dialog-actions button {
  padding: 10px 18px;
  font-size: 15px;
}
@media (max-width: 560px) {
  .ui-dialog { padding: 18px; }
  .ui-dialog-actions button { flex: 1; padding: 12px 14px; }
}

/* iOS Safari zooms into inputs under 16px on focus (and leaves the page horizontally scrollable) */
@media (max-width: 640px) {
  input[type="text"], textarea, select,
  .toolbar input[type="text"],
  .modal input[type="text"], .modal textarea { font-size: 16px; }
}

/* ダイアログのパネル自体（ui-dialog.js がフォーカスを移す先）にはフォーカス枠を出さない。 */
.modal:focus, .ui-dialog:focus { outline: none; }

/* 画面下の通知（ui-dialog.js uiToast）。「元に戻す」などのボタンを 1 つ持てる。 */
.ui-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 1200;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px); padding: 10px 12px 10px 18px;
  background: #1e293b; color: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md); font-size: 14px;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ui-toast.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ui-toast-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-toast-action {
  flex: none; padding: 6px 14px; min-height: 36px;
  background: transparent; border: 1.5px solid #93c5fd; color: #bfdbfe; font-size: 13px;
}
.ui-toast-action:hover { background: rgba(147,197,253,.15); }

/* はじめての人向けの説明（index.html #emptyGuide。リストが空のときだけ出る）。 */
.empty-guide {
  margin: 0 0 16px; padding: 16px 20px;
  background: var(--panel); border: 1.5px dashed var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.empty-guide[hidden] { display: none; }
.empty-guide-title { margin: 0 0 8px; font-size: 16px; color: var(--accent-strong); }
.empty-guide-steps { margin: 0 0 10px; padding-left: 1.4em; font-size: 14px; }
.empty-guide-steps li { margin: 4px 0; }
.empty-guide-steps b { display: block; }
.empty-guide-link { font-weight: 700; font-size: 14px; }

/* 公開後モーダルの編集用URLの注意書き。 */
.edit-url-warn {
  margin: 4px 0; padding: 8px 12px; font-size: 13px; line-height: 1.6;
  color: var(--warn-text); background: rgba(245, 158, 11, .10);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
}
.edit-url-warn.safe { color: var(--muted); background: var(--panel-2); border-color: var(--border); }
button.copied { border-color: var(--ok-strong); color: var(--ok-strong); }

/* 購入リンクの広告表記（ステマ規制）。見出しの横に小さく「PR」。 */
.pr-label {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border: 1px solid var(--muted); border-radius: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--muted); vertical-align: 1px;
}
/* あらすじの出典表記。 */
.dsynopsis-src { margin: 6px 0 0; font-size: 11px; color: var(--muted); text-align: right; }

/* 404 ページ（public/404.html）。 */
.notfound { text-align: center; padding: 24px 0 8px; }
.notfound-code {
  margin: 0; font-size: 64px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-3-strong));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound h2 { margin: 12px 0 8px; font-size: 20px; }
.notfound-more { margin-top: 20px; font-size: 14px; }

/* ── 管理画面のダイアログ (native <dialog>。ui-dialog.js の overlay とは別物) ─────────
   表や検索欄を入れるので ui-dialog より広くする。管理画面でしか使わない。 */
.admin-dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 22px;
  width: min(760px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow: auto;
}
.admin-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.admin-dialog h3 { margin: 0 0 8px; font-size: 16px; }
.admin-dialog .admin-table { margin-top: 8px; }