/* =====================================================
   1. デザイントークン（案B: データベース紙面）
   全コンポーネントは必ずトークン経由で着色する（直書きHEX禁止）
   ===================================================== */
:root {
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-alt: #f1f3f7;
  --text: #22293a;
  --text-sub: #6b7386;
  --border: #d6dae3;
  --accent: #315a9e;
  --accent-hover: #24477f;
  --accent-soft: #e8edf5;
  --on-accent: #ffffff;
  --nav-bg: #2e4262;
  --nav-text: #dee5f0;
  --nav-text-strong: #ffffff; /* ナビ帯は両テーマ濃色のためダークでも白のまま継承 */
  --danger: #b03040;
  --danger-soft: #f7e9eb;
  --ok: #277146;
  --ok-soft: #e8f3ed;
  --radius: 4px;
  --content-max: 1080px;
}

/* OS設定がダーク かつ 手動ライト指定でないとき（OS連動） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171b26;
    --surface: #202636;
    --surface-alt: #272e40;
    --text: #e2e6ef;
    --text-sub: #98a1b3;
    --border: #333b4d;
    --accent: #7fa3d8;
    --accent-hover: #9db9e4;
    --accent-soft: #263349;
    --on-accent: #10151f;
    --nav-bg: #141926;
    --nav-text: #c7cfdd;
    --danger: #e08090;
    --danger-soft: #3a2530;
    --ok: #7bc49a;
    --ok-soft: #1f3329;
  }
}

/* 手動ダーク指定（常に勝つ）。上の media 内と同じ値を保つこと */
:root[data-theme="dark"] {
  --bg: #171b26;
  --surface: #202636;
  --surface-alt: #272e40;
  --text: #e2e6ef;
  --text-sub: #98a1b3;
  --border: #333b4d;
  --accent: #7fa3d8;
  --accent-hover: #9db9e4;
  --accent-soft: #263349;
  --on-accent: #10151f;
  --nav-bg: #141926;
  --nav-text: #c7cfdd;
  --danger: #e08090;
  --danger-soft: #3a2530;
  --ok: #7bc49a;
  --ok-soft: #1f3329;
}

/* =====================================================
   2. リセット・ベース
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.45rem; margin: 0.4em 0 0.6em; }
/* 見出しは左のaccent罫＋下罫で「面」を作り、セクションの塊を見えるようにする（全ページ共通） */
h2 {
  font-size: 1.15rem;
  border-left: 4px solid var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 0 0 4px 10px;
  margin: 1.8em 0 .8em;
}
h3 { font-size: 1rem; margin: 1.2em 0 0.5em; }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

/* フォーム部品 */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"],
textarea, select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  max-width: 100%;
}
textarea { width: 100%; min-height: 6em; }
label { color: var(--text-sub); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ボタン（button_to / submit を含む） */
button, input[type="submit"] {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover { background: var(--accent-hover); }
form.button_to { display: inline-block; }

/* テーブル */
table { border-collapse: collapse; }
th, td { border: 1px solid var(--border); padding: 4px 10px; }
th { background: var(--surface-alt); font-weight: 600; }

/* フラッシュ */
.flash { font-size: 0.92em; padding: 8px 0; }
.flash-notice { background: var(--ok-soft); color: var(--ok); }
.flash-alert { background: var(--danger-soft); color: var(--danger); }

.note { color: var(--text-sub); font-size: 0.9em; }

/* =====================================================
   3. レイアウト（ヘッダー・ナビ・本文・フッター）
   ===================================================== */
.site-header { background: var(--nav-bg); color: var(--nav-text); }

.header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.brand { color: var(--nav-text-strong); font-weight: 700; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }

.nav-search input {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  color: var(--nav-text-strong);
  min-width: 200px;
}
.nav-search input::placeholder { color: var(--nav-text); opacity: 0.7; }

.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9em;
}
.user-menu a { color: var(--nav-text); }
.user-name { color: var(--nav-text-strong); font-weight: 600; }
.user-menu form.button_to button {
  background: transparent;
  border: 1px solid var(--nav-text);
  color: var(--nav-text);
  padding: 2px 10px;
  /* 自身では縮めない（2026-09-14）。#theme-toggle と同じ理由＝.user-menu（0.9em）の中なので、
     button 全般の 0.9em が重なると 12.96px になり、隣の切り替えボタン（14.4px）と大きさが揃わない */
  font-size: 1em;
}
.user-menu form.button_to button:hover { background: rgba(255, 255, 255, 0.12); }
#theme-toggle {
  background: transparent;
  border: 1px solid var(--nav-text);
  border-radius: 99px;
  padding: 2px 9px;
  /* 自身では縮めない（2026-09-14）。.user-menu（0.9em）の中にあるので、ここでも 0.9em にすると
     入れ子で掛け算になり 12.96px まで小さくなる（実測）。button 全般の 0.9em は ID の詳細度で上書きされる */
  font-size: 1em;
  line-height: 1.4;
  color: var(--nav-text);
}
#theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }

.global-nav { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.global-nav .container {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.global-nav a { color: var(--nav-text); font-size: 0.92em; flex-shrink: 0; }
.global-nav a:hover { color: var(--nav-text-strong); text-decoration: none; }

/* ページ内タブ（rankings/works/home/neta の各タブnav）の共通スタイル */
.tabs a, .metric-tabs a, .type-tabs a, .year-tabs a, .period-tabs a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius);
}
.tabs a.active, .metric-tabs a.active, .type-tabs a.active,
.year-tabs a.active, .period-tabs a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 40px;
  flex: 1;
}
.layout main { flex: 1; min-width: 0; }
.sidebar { width: 240px; flex-shrink: 0; }
.sidebar-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9em;
}
.sidebar-widget > :first-child { margin-top: 0; }
/* .ad-placeholder は広告の枠と一緒に外した（2026-09-11）。
   使う側が無いCSSは、次に読んだ人が「どこで効いているのか」を探す時間を生むので残さない */

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-sub);
  font-size: 0.9em;
  padding: 18px 0;
}

/* =====================================================
   4. 機能別（既存スタイルのトークン化移設。レイアウト値は維持）
   ===================================================== */
.fanza-candidate { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.fanza-candidate img { max-width: 80px; height: auto; }

/* 説明文に添える箇条書き。本文より一段落として、フォームの入力欄と読み違えないようにする */
.hint-list { margin: 4px 0 8px; padding-left: 1.3em; font-size: 0.92em; }
.hint-list li { margin: 1px 0; }

.spoiler summary { cursor: pointer; color: var(--danger); }
.tag-checkbox { display: inline-block; margin-right: 8px; }

.upcoming-month h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-top: 24px; }
.upcoming-list { list-style: none; padding-left: 0; }
.upcoming-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.upcoming-date { color: var(--text-sub); font-size: 0.9em; min-width: 3em; }
.upcoming-thumb { width: 48px; height: auto; }

.full-course-desc { display: block; margin: 4px 0 0; font-size: 0.9em; color: var(--text-sub); }
/* コース名・作者・説明・編集導線をまとめるカード（作品詳細の .work-header と同じ役割）。
   操作行は新しいクラスを作らず既存の .form-actions を使う。同形のクラスが2つあると必ず食い違う */
.course-header {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.course-header h1 { margin: 0 0 4px; }
.course-meta { margin: 0; color: var(--text-sub); font-size: 0.9em; }
/* ラベルは行の左端で幅を揃える。幅がバラバラだと「前菜→メイン→デザート」の順が縦に読めない。
   section_label は最大50字なので、はみ出しは省略記号で止める */
.course-label {
  display: inline-block; flex-shrink: 0; width: 5em; text-align: center;
  padding: 1px 4px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 0.9em; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-deleted-work { color: var(--text-sub); }
.course-item-controls { margin-left: 8px; }
.course-item-controls form { display: inline-block; margin-right: 4px; }
.label-edit-form input[type="text"] { width: 8em; }

/* ホーム: 新着批評・最近45られたテーブル */
.table-scroll { overflow-x: auto; }
.home-reviews { width: 100%; font-size: 0.95em; }
.home-reviews td { vertical-align: top; }
.home-reviews .cell-num { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.home-reviews .cell-comment { min-width: 200px; }
.comment-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell-muted { color: var(--text-sub); }

/* 作品詳細: レビュー一覧（li#review-N を続きを読むのアンカー先にするため ul 化） */
.review-list { list-style: none; padding: 0; margin: 0; }
/* レビューは1件＝1枠。overflow: hidden は帯（.review-head）の角を親の角丸で切るため
   （帯側にも border-radius を持たせると --radius 変更時に片方が取り残される） */
.review-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 10px;
}
.review-item:last-child { margin-bottom: 0; }

/* =====================================================
   6. 作品リスト（共通コンポーネント）
   （旧5. レスポンシブは末尾のセクション8へ移設したため5は欠番）
   ===================================================== */
.work-table { width: 100%; font-size: 0.95em; }
.work-table th { white-space: nowrap; }
.work-table td { vertical-align: middle; }
.work-table .col-title { font-weight: 600; }
.work-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.work-table .col-thumb { width: 46px; padding: 3px; }

/* flex-shrink: 0 は .mp-list（フルコースの品目・マイページの一覧）で使うため。
   flex アイテムは既定で縮むので、これが無いと長いタイトルの行でサムネが潰れる */
.work-thumb {
  display: block; flex-shrink: 0; width: 34px; height: 46px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 3px;
}
.work-thumb-none {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 46px; border: 1px dashed var(--border); border-radius: 3px;
  color: var(--text-sub); font-size: 8px; line-height: 1.2; text-align: center;
}

.type-badge {
  display: inline-block; font-size: 0.7em; font-weight: 600; vertical-align: 1px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 5px;
}
/* 作品形式（単話／単行本）。種別バッジの隣に並ぶので、目立ちすぎないよう淡色にする */
.format-badge { font-size: 0.7em; color: var(--text-sub); margin-left: 4px; }
.tag-chip,
.pov-chip {
  display: inline-block; margin-right: 4px; padding: 0 8px;
  background: var(--surface-alt); color: var(--text-sub);
  border-radius: 99px; font-size: 0.78em;
}
.tag-chip:hover,
.pov-chip:hover { color: var(--accent); text-decoration: none; }
/* 自分の嗜好で光らせる（②・2026-09-07）。**タグ側には無いPOV固有のルール**なので、
   .tag-chip と共有せず単独で書く（共有しているのは形だけで、意味が違う）。
   色は既存のトークンだけを使う＝新しい色を1つも増やさない */
.pov-chip--favorite {
  background: var(--accent); color: var(--on-accent);
}
.pov-chip--favorite:hover { color: var(--on-accent); }
/* 避けたいは「警告」であって「エラー」ではないので、枠線だけにして塗らない。
   塗ると作品詳細のPOV欄が赤い塊になる */
.pov-chip--avoid {
  background: transparent; color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.pov-chip--avoid:hover { color: var(--danger); }

.work-cards { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
.work-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.work-card-rank {
  min-width: 2em; text-align: right; line-height: 1.3;
  font-size: 1.3rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.work-thumb-lg {
  display: block; flex-shrink: 0; width: 62px; height: 84px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 3px;
}
.work-thumb-none-lg {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 62px; height: 84px; border: 1px dashed var(--border); border-radius: 3px;
  color: var(--text-sub); font-size: 10px;
}
.work-card-body { flex: 1; min-width: 0; }
.work-card-title { margin: 0 0 2px; font-size: 1.02em; font-weight: 700; }
.work-card-tags { margin: 2px 0 6px; }
.work-card-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; font-size: 0.9em; }
.work-card-stats .fap-value { color: var(--accent); font-weight: 600; }

/* =====================================================
   7. 作品詳細ページ
   ===================================================== */
.work-header {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.work-header-cover { width: 150px; flex-shrink: 0; }
.work-cover {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--border); border-radius: 3px;
}
.work-cover-none {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; background: var(--surface-alt);
  color: var(--text-sub); font-size: 0.8em;
}
.work-header-body { flex: 1; min-width: 0; }
.work-header-body h1 { font-size: 1.72rem; line-height: 1.35; margin: 0 0 6px; letter-spacing: 0.01em; }
/* クリエイター名は「誰の作品か」の主要情報なので淡色にせず本文色で出す */
.work-byline { margin: 0 0 10px; font-size: 0.95em; color: var(--text); }
.work-byline a { font-weight: 600; }

.work-facts {
  margin: 0; font-size: 0.95em; display: grid; grid-template-columns: auto 1fr;
  gap: 4px 14px; padding-top: 8px; border-top: 1px solid var(--border);
}
.work-facts dt { color: var(--text-sub); }
.work-facts dd { margin: 0; color: var(--text); }
/* flex-wrap は幅が足りないときだけ効くのでメディアクエリは不要。
   セール表示で子要素が最大7つ（媒体・定価・セール価格・OFF率・期限・商品ページ・編集）になり、
   指定が無いと狭い画面で行が溢れる */
.release-row { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; flex-wrap: wrap; }
.release-row .price { font-size: 1.15em; font-weight: 700; color: var(--text); }
.release-row .sale {
  font-size: 1.05em; font-weight: 600; color: var(--danger);
  background: var(--danger-soft); border-radius: 3px; padding: 0 6px;
}
/* セール中の定価。打ち消し線を引くのはセール価格を併記するときだけ（works/_release_row 参照） */
.release-row .price-was {
  color: var(--text-sub); font-size: 0.9em; font-weight: 400; text-decoration: line-through;
}
/* .release-row .price と詳細度が同じ (0,2,0) なので、必ずこの順（後）に書くこと。
   前に書くと同じ要素に両方のクラスが付いたときに色が上書きされない */
.release-row .price-sale { color: var(--danger); }
.release-row .sale-ends { color: var(--text-sub); font-size: 0.9em; }
.release-edit { font-size: 0.9em; }

.work-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
/* リンクもボタン列に混ざるのでゴーストボタン風に揃える */
.work-actions a {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 14px; font-size: 0.9em;
}
.work-actions a:hover { background: var(--accent-soft); text-decoration: none; }
.fap-stat {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-right: 6px; font-size: 0.9em; color: var(--text-sub);
}
.fap-stat-value {
  color: var(--accent); font-weight: 700; font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-tools { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.admin-tools summary { cursor: pointer; color: var(--text-sub); font-size: 0.9em; }
.admin-tools-body { font-size: 0.9em; }
.admin-tools-body .admin-tools-row { margin: 8px 0 0; }

/* .score-summary は .panel が枠・背景・padding を持つため、宣言を持たない。
   クラス名はビューとテストのスコープ用フックとして残している */
/* 平均点・中央値・レビュー数を3本の数値柱にする。淡色の小ラベルに埋もれさせない。
   パネル内では上段になるので、区切りは右罫ではなく下罫 */
.score-figures {
  display: flex; gap: 18px; align-items: flex-end;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.fig { text-align: center; }
.fig-label { display: block; font-size: 0.9em; color: var(--text-sub); letter-spacing: 0.04em; }
.fig-main {
  font-size: 2.8rem; font-weight: 700; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.fig-sub {
  font-size: 1.45rem; font-weight: 700; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* 得点分布とオカズ度分布を横に並べる。片方しか無いときは auto-fit で1列になり、
   狭い画面でも同じ規則で1列に落ちるので、この2つにメディアクエリは要らない */
.score-dists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.score-dist h3 {
  font-size: 0.9em; color: var(--text-sub); margin: 0 0 6px; letter-spacing: 0.04em;
}

/* 得点分布・オカズ度分布の共用部品。--okazu はラベル幅だけ変える */
.histogram { max-width: 480px; }
.histogram-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.histogram-label { width: 60px; text-align: right; font-size: 0.9em; flex-shrink: 0; }
/* 下地トラックを敷くと棒の絶対長ではなく割合が読める */
.histogram-bar-area {
  flex: 1; display: flex; height: 14px;
  background: var(--surface-alt); border-radius: 2px;
}
.histogram-bar { height: 14px; background: var(--accent); border-radius: 2px; min-width: 2px; }
.histogram-count { width: 48px; font-size: 0.9em; flex-shrink: 0; color: var(--text-sub); }
.histogram--okazu { max-width: 560px; }
/* オカズ度は「とんでもなく抜けた」まであるので、ラベル幅は px ではなく文字数基準の em で確保する
   （.histogram-label 自身の文字サイズが基準なので、9.5em は約9.5文字分になる。文字サイズを変えても文字数の意味は変わらない） */
.histogram--okazu .histogram-label { width: 9.5em; }

.tag-row,
.pov-row { margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; }
/* 題材/特徴は「どっちの種類か」を真っ先に読む見出しなので、淡色の小文字ではなくバッジにする */
.tag-kind-label,
.pov-kind-label {
  display: inline-block; min-width: 3.6em; text-align: center;
  margin-right: 10px; padding: 2px 8px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 3px; font-size: 0.9em; font-weight: 700; letter-spacing: 0.08em;
}
/* × をピルの内側に入れて、どのタグの削除ボタンかを一目で分かるようにする
   （外に置くと自タグとの距離4pxと次タグとの距離10pxがほぼ同じで所属が読めなかった） */
/* **POVの種別名に min-width を足さないこと**（2026-09-04 に 8em を入れて戻した）。
   「マイナスポイント」が8文字なので、6種の行頭を揃えようと 8em を与えたが、
   **狭い画面でバッジだけで1行を食い、POVのチップが押し出された**（ユーザー指摘・実測）。
   タグと同じ 3.6em の下限のまま中身なりに伸ばす＝行頭は種別ごとに揃わないが、
   タグがそうである以上そちらに合わせる。揃えたくなったら幅ではなく別の手を考えること */

.tag-edit-item,
.pov-edit-item {
  display: inline-flex; align-items: center; margin: 0 6px 8px 0;
  background: var(--surface-alt); border-radius: 99px;
}
.tag-edit-item .tag-chip,
.pov-edit-item .pov-chip { margin-right: 0; font-size: 0.92em; padding: 2px 10px; }
.tag-remove button,
.pov-remove button {
  background: transparent; color: var(--text-sub); border: none;
  padding: 0 9px 0 3px; font-size: 0.92em; line-height: 1; opacity: 0.65;
}
.tag-remove button:hover,
.pov-remove button:hover { background: transparent; color: var(--danger); opacity: 1; }

/* タグ編集の折りたたみ。閲覧中に × を押してしまう事故を防ぐため、
   タグのチップは外に出したまま操作だけ中に入れている。
   シリーズ（収録作品）の追加欄も同じ「パネルの末尾に畳んだ編集欄」なので、
   別クラスを新設せずここに相乗りさせる（同形のクラスを2つ持たない） */
.tag-edit, .series-edit, .pov-edit { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.tag-edit summary, .series-edit summary, .pov-edit summary { cursor: pointer; color: var(--accent); font-size: 0.9em; }
.tag-edit-body, .series-edit-body, .pov-edit-body { margin-top: 10px; }

/* シリーズ（収録関係）。作品名＋バッジを1行ずつ並べるだけの一覧。
   .mp-list（フルコースの品目・マイページ）を流用しないのは、あちらがサムネと
   操作ボタンを前提に flex の伸縮と gap 10px を決めているため（ここはバッジが離れすぎる） */
.series-members { list-style: none; padding: 0; margin: 0 0 6px; }
.series-members li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.series-members li:last-child { border-bottom: none; }
/* 1作品が複数のシリーズに属しうる（単行本は複数の単話を収録する＝普通の状態）。
   **シリーズ名を出さない設計**なので、どこからどこまでが1つのシリーズかと
   「外す」ボタンの対象は枠でしか示せない。間隔だけだと地続きに見える。
   枠の描き方は .review-item（1件＝1枠）に揃えてある */
.series-group {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 10px;
}
.series-group:last-child { margin-bottom: 0; }
/* シリーズ名。当初は伏せていたが、複数シリーズが並ぶと
   「どのシリーズのページか」が分からないと手動確認で指摘されたので出すことにした */
.series-name { font-size: 0.95em; font-weight: 600; margin: 0 0 6px; }
/* 外す操作は折りたたみの中（.series-edit）に置く＝出しっぱなしにすると誤操作の原因になる。
   タグの .tag-edit と同じ理由・同じ形 */
.series-removable { list-style: none; padding: 0; margin: 0 0 12px; }
.series-removable li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.series-removable li:last-child { border-bottom: none; }
.series-removable .series-name { margin: 0; font-weight: 400; }
/* 候補一覧で「なぜ選べないか」を添える札 */
.candidate-blocked { font-size: 0.9em; color: var(--text-sub); }
.series-group .note { margin-bottom: 0; }

/* 収録作品の候補一覧。フルコースの .candidate-table を流用しないのは、
   こちらの行にラベル入力欄が無く「チェック＋作品名」だけ＝1列の表になるため */
.candidate-list { list-style: none; padding: 0; margin: 10px 0; }
.candidate-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.candidate-list li:last-child { border-bottom: none; }
/* 作品名は行の主役。グローバルの label 指定（--text-sub）のままだと薄すぎる
   （.candidate-table label と同じ手当て） */
.candidate-list label { cursor: pointer; color: var(--text); }

.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.samples-grid img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--border); border-radius: 3px;
}

/* 縦 padding は 5px 以上を保つこと。親（.review-item）が overflow: hidden なので、
   3px 以下だとフォーカスリング（outline 2px ＋ outline-offset 1px ＝ 3px）が枠で切られる。
   いまの中身は span だけだが、この帯にはレビューへの操作ボタンを足す想定がある */
.review-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0; padding: 5px 10px;
  background: var(--surface-alt); color: var(--text-sub); font-size: 0.95em;
}
/* 投稿者名と点数は一覧を流し読みするときの手がかりなので、淡色に埋めない */
.review-user  { color: var(--accent); font-weight: 600; }
.review-score { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.review-date  { margin-left: auto; }
/* レビューの帯に置く削除ボタン（管理人が他人の投稿を消す用）。
   .btn-danger の padding: 7px 14px のままだと、0.95em・padding 5px の細い帯が約4割膨らむ。
   詳細度 (0,2,0) で .btn-danger (0,1,0) に必ず勝つので、このファイル内で
   .btn-danger より前に書いてあっても効く（btn-primary と .form-actions の順序の罠とは別物） */
.review-head .btn-danger { padding: 2px 10px; }
.review-body  { padding: 8px 10px; }
.review-body > :first-child { margin-top: 0; }
.review-body > :last-child  { margin-bottom: 0; }

/* =====================================================
   9. フォームと参加UI
   ===================================================== */
/* ボタン種別。段階2bで .work-actions 配下に閉じていたものを全ページ共通へ昇格した。
   クラス未指定の素の button / input[type=submit] は従来どおり accent 塗りのまま変えない */
/* padding は下の .form-actions input[type="submit"] と必ず同値にすること。
   あちらは詳細度 (0,2,1) でこちら (0,1,0) に必ず勝つため、値がずれると
   「.btn-primary を直したのに効かない」という罠になる */
.btn-primary { font-size: 0.95em; font-weight: 600; padding: 8px 22px; }
.btn-ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--border); padding: 7px 14px;
}
.btn-ghost:hover { background: var(--accent-soft); }
/* 破壊系は塗らない。塗りボタンは「押してほしい操作」の合図になってしまうため枠線と文字だけ赤にする */
.btn-danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger); padding: 7px 14px;
}
.btn-danger:hover { background: var(--danger-soft); }

.form-narrow { max-width: 460px; }
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; margin-bottom: 3px;
  color: var(--text); font-size: 0.9em; font-weight: 600;
}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="password"],
.form-row input[type="url"], .form-row input[type="number"], .form-row input[type="date"],
.form-row input[type="datetime-local"], .form-row select, .form-row textarea { width: 100%; }
.form-row .hint { display: block; margin-top: 3px; color: var(--text-sub); font-size: 0.9em; }
/* チェックボックスだけはラベルを右に置く（上に置くと何のチェックか分からなくなる） */
.form-row-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.form-row-check input { margin-top: 5px; }
.form-row-check label { margin: 0; color: var(--text); font-size: 0.92em; font-weight: 400; }
/* **入り切らなければ折り返すこと（flex-wrap: wrap）。** .panel は overflow: hidden なので、
   行からはみ出した送信ボタンは切り取られて**押せなくなる**（2026-09-21 実測＝幅1000pxで
   シリーズ統合の「統合する」が箱の外に出て、そのボタンの中心の座標には別の要素があった）。
   統合の寄せ先の <select> は、いちばん長い選択肢の幅まで広がる＝シリーズ名は作品名がそのまま入る。
   test/stylesheets/form_actions_test.rb が消えたことを検出する */
.form-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* flex の既定（min-width: auto）だと中身より小さくなれず、1つでもはみ出す。
   **幅の上限は付けないこと**＝付けると広い画面では1行に収まるが、開いたときの選択肢が途中で切れる
   （シリーズ名は末尾の「第1巻」「第2巻」だけが違うことがある） */
.form-actions select { min-width: 0; max-width: 100%; }
/* 何の欄か読めなくなるまで潰さない（2026-09-21 実測＝幅1000pxでラベルが15pxまで縮んでいた） */
.form-actions label { flex-shrink: 0; }
/* 送信ボタンはビュー側に class を足さずセレクタ側で大きくする（12ページぶんの書き忘れを防ぐ） */
.form-actions input[type="submit"] { padding: 8px 22px; font-size: 0.95em; font-weight: 600; }
.required { color: var(--danger); font-size: 0.8em; font-weight: 700; margin-left: 4px; }
.form-errors {
  margin: 0 0 16px; padding: 10px 14px 10px 30px;
  background: var(--danger-soft); border-left: 4px solid var(--danger);
  border-radius: var(--radius); color: var(--danger); font-size: 0.9em;
}
.form-errors li { margin: 2px 0; }

/* 参加系の一覧（マイページ・フルコース） */
.mp-list { list-style: none; padding: 0; margin: 0; }
.mp-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.mp-list li:last-child { border-bottom: none; }
/* <ol class="mp-list"> だけ連番を復活させる。list-style を消しているため ::before で描く。
   ↑↓ で並べ替える画面（フルコースの品目）で「今何番目か」が読めないと操作しづらい。
   <ul class="mp-list"> は並べ替え不可なので番号を付けない */
ol.mp-list { counter-reset: mp-item; }
ol.mp-list > li { counter-increment: mp-item; }
ol.mp-list > li::before {
  content: counter(mp-item) ".";
  flex-shrink: 0; min-width: 1.5em;
  color: var(--text-sub); font-size: 0.9em; font-variant-numeric: tabular-nums;
}
/* タイトルを伸縮させて、長い作品名でも右の操作ボタンが押し出されないようにする。
   flex-basis を 0 にしないこと。折り返し（狭い画面の .mp-list li { flex-wrap: wrap }）は
   基準幅の合計で判定されるため、基準幅0だとタイトルは行あふれに寄与せず、
   行が折り返す代わりにタイトル欄だけが潰れて縦に伸びる（375px幅でサムネ込み37px・高さ204pxを実測）。
   10em を与えると、狭いときに操作ボタン側が次の行へ落ちてタイトルの幅が保たれる */
.mp-title { flex: 1 1 10em; min-width: 0; }
.mp-meta { color: var(--text-sub); font-size: 0.9em; white-space: nowrap; }
/* .tag-chip（セクション6）はクリックできるタグ用。こちらはクリックしない状態表示用で、
   文字を小さく太くして「押せない情報」であることを見た目で区別する */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  background: var(--surface-alt); color: var(--text-sub);
  font-size: 0.72em; font-weight: 600; white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }

/* 品目の候補一覧（チェックして一括追加） */
/* border-collapse はベース層の table 指定で既に効いている。
   border を一度消しているのは、ベース層の th,td が全周に罫線を引くため
   （下線だけの一覧にしたい） */
.candidate-table { width: 100%; margin: 10px 0; }
.candidate-table th,
.candidate-table td { padding: 6px 8px; border: none; border-bottom: 1px solid var(--border); text-align: left; }
.candidate-table th { font-size: 0.9em; color: var(--text-sub); font-weight: normal; background: none; }
.candidate-table th:first-child,
.candidate-table td:first-child { width: 3.5em; text-align: center; }
.candidate-table input[type="text"] { width: 9em; }
/* 作品名は行の主役。グローバルの label 指定（--text-sub）のままだと
   隣の「登録済み」注記と同じ薄さになって階層が潰れる */
.candidate-table label { cursor: pointer; color: var(--text); }
.candidate-registered { margin-left: 6px; font-size: 0.9em; color: var(--text-sub); }

/* タグ入力（種別ごとの候補チェック＋自由入力） */
.tag-picker-group,
.pov-picker-group { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
.tag-picker-group legend,
.pov-picker-group legend { font-weight: bold; padding: 0 4px; }
.tag-guide,
.pov-guide { margin: 0 0 8px; font-size: 0.9em; color: var(--text-sub); }
.tag-options,
.pov-options { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.tag-options label,
.pov-options label { color: var(--text); cursor: pointer; }

/* 管理人の一覧表（タグ整理・クリエイター整理）の共通骨組み。
   .candidate-table（フルコースの候補一覧）は機能固有のクラスなので流用しない */
.admin-table { width: 100%; }
.admin-table th,
.admin-table td { padding: 5px 8px; border: none; border-bottom: 1px solid var(--border); text-align: left; }
.admin-table th { font-size: 0.9em; color: var(--text-sub); font-weight: normal; background: none; }
.admin-table .col-count { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table .col-ops { white-space: nowrap; }

/* タグ整理: 行内で名前と種別を編集するので入力欄の幅を明示する */
.admin-tag-table .col-edit input[type="text"] { width: 10em; }
.admin-tag-table form { display: inline-block; }

/* 日付列。数値と同じ体裁（右寄せ・等幅数字・折り返し禁止）が要るが、.col-count に
   相乗りさせない。件数の体裁を将来変えたとき（単位を足す・色を付ける等）に
   日付列が道連れになる。作品一覧は既に col-date を使っているのでそれに合わせる */
.admin-table .col-date { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* FANZA一括投稿: 行ごとに種別を選ぶので、選択欄と配信日列の幅を明示する
   （幅が行ごとに動くと、100行の表で種別列の位置が揃わず読めない） */
.fanza-import-table select { width: 8em; }
.fanza-import-table .col-date { width: 7em; }
.fanza-import-table .col-volume { width: 9em; font-size: 0.9em; color: var(--text-sub); }

/* ページ送り。前後のリンクを1行に並べる。
   .pager は汎用名だが、ページ送りの見た目をサイトで1つにしたいので意図的に取っている
   （他機能でページ送りを作るときはこれを使い、別名で定義し直さないこと） */
.pager { margin-top: 12px; display: flex; gap: 16px; }

/* クリエイター整理: リンク列は3つのバッジを常に同じ順で並べる。
   折り返すと「何本目が欠けているか」が縦に読めなくなるので nowrap */
.admin-creator-table .col-links { white-space: nowrap; }
.creator-link-badge {
  display: inline-block; margin-right: 4px; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8em;
}
.creator-link-badge.is-on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.creator-link-badge.is-off { color: var(--text-sub); background: none; }

/* クリエイター編集のリンク一覧。行ごとにサービス名・カテゴリ・URL・外すボタンが並ぶ */
.creator-link-list { list-style: none; padding: 0; margin: 0 0 14px; }
.creator-link-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border); }
.creator-link-service { font-weight: bold; }
.creator-link-category { font-size: 0.8em; color: var(--text-sub); }
/* URL は長いので、狭い画面では折り返して行を伸ばす（横スクロールを作らない） */
.creator-link-list a { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.creator-link-remove { display: inline-block; }

.admin-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* =====================================================
   10. パネル（見出し帯つきの箱）
   section を「1つの塊」として囲う共通部品。作品詳細・フルコース・マイページで使う。
   ===================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* 帯（.panel > h2）の角は親の角丸で切る。帯側にも border-radius を持たせると
     --radius を変えたときに2箇所を直す必要があり、必ず片方が取り残される */
  overflow: hidden;
  margin: 16px 0;
}
/* 帯はパネルの一部なので、全ページ共通の h2（左罫・下罫・上下マージン）を打ち消す。
   .panel > h2 は詳細度 (0,1,1) でベース層の h2 (0,0,1) に必ず勝つ（記述順に依存しない）。
   ビュー側で h2 にクラスを書かせないのは、パネルが増えるたびの書き忘れを構造的に防ぐため */
.panel > h2 {
  margin: 0;
  padding: 5px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  font-size: 1.05rem;
}
.panel-body { padding: 12px 14px; }
/* 中身の先頭・末尾のマージンが帯や枠との間で二重に効くのを止める */
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child  { margin-bottom: 0; }

/* =====================================================
   8. レスポンシブ（800px 1本）
   ここは必ずファイル末尾に置くこと。@media は詳細度を上げないため、
   個別コンポーネントの定義より前にあると同じセレクタの上書きに負ける
   ===================================================== */
@media (max-width: 800px) {
  /* 縦並びでは列を画面幅に揃える（2026-09-14）。横並び用の align-items: flex-start のままだと main が中身に合わせた幅になり、
     中身の最小幅（今回は表）が画面幅を超えるとページごとはみ出す。.table-scroll の横スクロールは、列そのものが膨らむと効かない。
     横並び（801px以上）は今回の不具合の範囲外なので変えていない。stretch にすると .sidebar の箱が本文の高さまで伸びる
     （今は .sidebar 自体に背景が無いので見えないが、背景や position: sticky を足すと効いてくる） */
  .layout { flex-direction: column; align-items: stretch; }
  .sidebar { width: 100%; }
  .nav-search { order: 3; width: 100%; }
  .nav-search input { width: 100%; }
  .user-menu { margin-left: 0; }
  /* 作品テーブルはタグ列・配信日列を隠す（.table-scroll があるので溢れても横スクロールで到達可） */
  .work-table .col-tags, .work-table .col-date { display: none; }
  /* 作品詳細: 表紙だけ縮めて横並びは維持する */
  .work-header-cover { width: 110px; }
  /* .score-dists は auto-fit なので幅で自動的に1列になる。ここに規則は要らない */
  .panel-body { padding: 10px; }
  /* 折り返した行で margin-left: auto が効くと投稿日だけが右端に飛ぶ */
  .review-date { margin-left: 0; }
  .samples-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  /* 狭い画面ではオカズ度のラベルを詰めて棒の領域を確保する */
  .histogram--okazu .histogram-label { width: 8em; }
  /* 狭い画面ではフォームの幅制限を解いて画面幅いっぱいに使う */
  .form-narrow { max-width: none; }
  /* 一覧の行は操作ボタンが押し出されないよう折り返す */
  .mp-list li { flex-wrap: wrap; }
}