/* デザイントークン(docs/design.md)。手本は「しずかなインターネット」。値の多くは実サイトから採寸している。
   要点: 彩度をほぼ持たない／太字を使わない／狭いカラム／大きな余白と大きな角丸。
   直書きしてよい範囲:
   - 色は必ずトークンを使う(足すときは、ライトの値と --dark-* と下の 2 つの適用ブロックを書く)。
   - 余白は、区画のリズムにはトークンを使い、部品の中の微調整の px は直書きしてよい。
   - 級数・行間は直書きしてよい(級数の正は docs/design.md §2)。
   - ただし、複数の部品が揃えて持つ値はトークンにする。CSS と Ruby(ヘルパの定数)が同じ値を
     持つときは、ビューから CSS 変数で渡すか、両側に相手の名前を注記する。 */
:root {
  /* ── 面 ───────────────────────────────────────────────────────────
     本文の地は白(--surface。body の背景)。色を持つ面はヘッダーとフッター(--bg-soft)だけで、
     白いコンテンツを上下から挟んで境目を作る。影は使わず、面の明度差と 1px の細罫と余白で区画を示す。 */
  --bg: #eff2f6;          /* 一段淡い面(ドロワー・操作バー・反転文字の色・color-mix の下地)。かつての地の色で、統計の CSS などに名残がある */
  --bg-soft: #e6ebf2;     /* 一段沈めた面(ヘッダー・フッター・hover・説明のカードなど) */
  --bg-tint: #e4ecf6;     /* さらに淡い青の面(選択中・ハイライト) */
  --surface: #ffffff;     /* 本文の地(body の背景)と、ボタン・タグ・入力の塗り */

  /* ── 文字 ─────────────────────────────────────────────────────────
     真っ黒にしない。わずかに青みのある濃色を 87% で置いたときの実効値。 */
  --text: #232a31;        /* 本文・見出し(手本の rgba(3,10,18,.87) 相当) */
  --text-muted: #5f6568;  /* 補足・メタ(白地 5.9:1) */
  --text-subtle: #63686c; /* 最も弱い文字。ここが下限(白地 5.6:1 / --bg の上で 5.0:1 / --bg-soft の上でも 4.7:1) */

  /* ── 罫 ───────────────────────────────────────────────────────────
     ほとんど見えない細さ。罫は二層で持ち、章を分ける 1 本にだけ --text-muted を罫の色として使う
     (使う箇所は docs/design.md §3 に列挙)。 */
  --border: #dfe4ec;         /* 仕切り(表の行・区画の中の細罫) */
  --border-strong: #c6ccd5;  /* 本文リンクの下線・図の補助線 */

  /* ── 状態色 ─────────────────────────────────────────────────────
     意味を持つときだけ。彩度は抑え、面には使わず文字と細枠にとどめる。 */
  --danger: #b4453f;
  --success: #3f7d5a;         /* 白地でだけ AA(4.89:1)。--bg-soft の上では 4.08:1 で届かないので面の上に置かない */

  /* ── データ可視化 ───────────────────────────────────────────────
     チャートの塗りだけに使う、彩度を落とした青灰。UI には使わない。 */
  --chart: #6f8ea8;

  /* ── ワードクラウドの語別の色(統計 §1 だけで使う。docs/design.md §5.10) ──────
     サイトは無彩色が原則で、ここだけが例外(2026-09-10 オーナー指示)。
     彩度は 30% に抑え、明度は「白地で 4.6:1 以上」になるところまで落としてある
     (--chart 自身は白地 3.4:1 で、文字色としては使えない)。色相は8つ。 */
  --cloud-1: #507795;
  --cloud-2: #8067ad;
  --cloud-3: #a6598f;
  --cloud-4: #a66159;
  --cloud-5: #8b6f4b;
  --cloud-6: #5f7e44;
  --cloud-7: #447e63;
  --cloud-8: #447e7c;

  /* ── 影 ─────────────────────────────────────────────────────────
     ごく淡く、浮かせる必要があるものだけ。カード・一覧・表・ボタンには落とさない。 */
  --shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
  --scrim: rgba(35, 42, 49, 0.35);

  /* ── タイポグラフィ ─────────────────────────────────────────────
     web フォントは読まない。手本と同じ system + Inter + 日本語ゴシックの並び。 */
  --font-sans: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI",
               "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Noto Sans JP",
               "BIZ UDPGothic", Meiryo, sans-serif;
  /* 等幅はローマ字・パターン・JSON などの「機械が読む値」と、極小の英字ラベルに使う */
  /* サイトタイトル専用の書体(--font-brand)は持たない。手本「ただ、そこ」のスタックを
     当てていたが「イメージと違う」として本文と同じ --font-sans に戻したため
     (2026-09-04 → 05 オーナー判断)。書体はサイト全体で 1 本 + 等幅 + 図用の 3 つだけ */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  /* 「図」として置く英数字(アウトラインの巨大数字など)。日本語は含めない */
  --font-display: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  /* 字間をわずかに開けるのが手本の空気感の要。本文・見出しに一律で効かせる */
  --tracking: 0.03em;

  /* ── 余白スケール ───────────────────────────────────────────────
     「疎」を作るのはここ。セクション間は思い切って広く取る。 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ── 角丸 ───────────────────────────────────────────────────────
     大きめ。カードは 20px、面の中の小片は 12px、ボタン・タグは全丸。 */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* 本文カラムは狭く。読み物は 640px、一覧・データ面は 800px まで */
  --content-width: 800px;
  --reading-width: 640px;
  /* ヘッダー・管理ナビ・フッター(2 か所)の枠の幅。本文より少し広く、ブランドマークとフッターの
     1 列目の左端を揃える(docs/design.md §5.1) */
  --frame-width: 1040px;

  --transition: 160ms ease;

  color-scheme: light;

  /* ── ダークの値(定義はここだけ。適用は下の 2 つのセレクタが行う) ───────────
     同じ「静けさ」を明度だけ反転させる。青みをわずかに残した濃色。 */
  --dark-bg: #191d22;
  --dark-bg-soft: #12161a;
  /* 選択中の面は --dark-surface より明るい側に置く(暗い側だと面の上で沈む)。
     --dark-surface との差 ΔRGB 21(docs/design.md §1 の最大差)・--dark-text-subtle を載せて 4.51:1
     (2026-10-08 実測)。面から離すのは青だけで足す(緑も足すと --dark-text-subtle が 4.5:1 を割る) */
  --dark-bg-tint: #242e45;
  --dark-surface: #232930;
  --dark-text: #e3e7ea;
  --dark-text-muted: #98a0a5;
  --dark-text-subtle: #8f969b;
  --dark-border: #2c3339;
  --dark-border-strong: #454d55;
  --dark-danger: #d98079;
  --dark-success: #7fb79a;
  --dark-chart: #7ea3bf;
  /* ダークは面(#232930)に対して 4.6:1 以上。彩度は 34% で光らせすぎない */
  --dark-cloud-1: #6c96b7;
  --dark-cloud-2: #9e87c4;
  --dark-cloud-3: #bf7dab;
  --dark-cloud-4: #bf847d;
  --dark-cloud-5: #ae8a5b;
  --dark-cloud-6: #739d4d;
  --dark-cloud-7: #4fa17b;
  --dark-cloud-8: #4d9d9b;
  --dark-shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  --dark-scrim: rgba(0, 0, 0, 0.6);
}

/* ダークの適用。既定は OS 設定に追従し、ヘッダーのトグルで付く
   data-theme("light" / "dark")がそれを上書きする。
   ※トークンを 1 つ足したら、下の 2 ブロック両方に参照を追記すること */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--dark-bg);
    --bg-soft: var(--dark-bg-soft);
    --bg-tint: var(--dark-bg-tint);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --text-subtle: var(--dark-text-subtle);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --danger: var(--dark-danger);
    --success: var(--dark-success);
    --chart: var(--dark-chart);
    --cloud-1: var(--dark-cloud-1);
    --cloud-2: var(--dark-cloud-2);
    --cloud-3: var(--dark-cloud-3);
    --cloud-4: var(--dark-cloud-4);
    --cloud-5: var(--dark-cloud-5);
    --cloud-6: var(--dark-cloud-6);
    --cloud-7: var(--dark-cloud-7);
    --cloud-8: var(--dark-cloud-8);
    --shadow-pop: var(--dark-shadow-pop);
    --scrim: var(--dark-scrim);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --bg-soft: var(--dark-bg-soft);
  --bg-tint: var(--dark-bg-tint);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --text-subtle: var(--dark-text-subtle);
  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --danger: var(--dark-danger);
  --success: var(--dark-success);
  --chart: var(--dark-chart);
  --cloud-1: var(--dark-cloud-1);
  --cloud-2: var(--dark-cloud-2);
  --cloud-3: var(--dark-cloud-3);
  --cloud-4: var(--dark-cloud-4);
  --cloud-5: var(--dark-cloud-5);
  --cloud-6: var(--dark-cloud-6);
  --cloud-7: var(--dark-cloud-7);
  --cloud-8: var(--dark-cloud-8);
  --shadow-pop: var(--dark-shadow-pop);
  --scrim: var(--dark-scrim);
}
/* 素のタグへの基本設定と、全体で使うユーティリティ(.mono)(docs/design.md)。
   手本(しずかなインターネット)の骨格:
   - 太字を使わない。強さは「級数」と「文字の濃さ」だけで作る
   - 字間をわずかに開け、行間を広く取る
   - リンクは色を変えず、細い下線で示す */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--space-5);
  -webkit-text-size-adjust: 100%;
}

/* 地はコンテンツの面と同じ白。色を持つのはヘッダーとフッター(どちらも --bg-soft)だけで、
   その 2 つと色が変わることで、罫も影も引かずに上下の境目が出る
   (2026-09-04 オーナー指示「ヘッダーとの境目が現在だとわからない」) */
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
}

/* 見出しも本文と同じ書体・同じ太さ(400)。大きさと余白だけで段を作る */
h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
}

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

/* リンクは本文と同じ色。細い下線だけで「押せる」ことを示す(青くしない) */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 5px;
  transition: text-decoration-color var(--transition), color var(--transition),
              background-color var(--transition), border-color var(--transition);
}

a:hover {
  text-decoration-color: var(--text-muted);
}

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

/* フォーカスリングは消さない。色を持たせず、文字色の細いリングにする */
:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button {
  font-family: inherit;
  letter-spacing: inherit;
}

/* 太字は使わない方針なので、b / strong もごく僅かな差にとどめる */
b, strong {
  font-weight: 500;
}

img {
  max-width: 100%;
}

/* 読み仮名。必ず <ruby> を使う(疑似ルビ禁止) */
rt {
  font-family: inherit;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-subtle);
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ローマ字・パターン・ID など「機械が読む値」だけを等幅にする。
   併用するクラスが級数を持つときは、そちらが後(components.css)にあることで勝つ(例 .entry-range) */
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
/* ページ骨格(docs/design.md §5.1)。
   手本にならい、ヘッダーは罫も影も持たず、追従もしない。
   ページは「大きな余白の中に、狭いカラムがひとつ」だけ置かれる。 */

/* --- グローバルヘッダー --- */
/* ヘッダーはフッターと同じ「一段沈めた面」。白いコンテンツを上下から挟んで境目を作る。
   --bg(#EFF2F6)だと白との差が ΔRGB 16 しかなく、design.md の下限 19 に届かなかった(実測) */
.site-header {
  background: var(--bg-soft);
}

/* ヘッダーだけは本文より少し広く取り、ブランドとナビが1行に収まるようにする */
.site-header__inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  /* 帯は低く。ページの主役ではないので、掴めるだけの高さがあればよい */
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* ブランドマーク: サイト名の読みの五十音円環(ホーム最上部の印と同じ図)。
   小さく置くので線は実寸 1px に固定する(non-scaling-stroke。viewBox 200 のまま
   縮めると線が消える) */
.site-brand__seal {
  width: 30px;
  height: 30px;
  flex: none;
}

.site-brand__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}

.site-brand__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* 30px まで縮めると 12 本の弦が密集して塊に見えるので、線は淡く落として
     「円の中の軌跡」として読ませる(濃くすると汚れに見える) */
  opacity: 0.62;
}

.site-brand__name {
  /* 書体は本文と同じ --font-sans を継承する(2026-09-04 オーナー判断。手本「ただ、そこ」の
     スタックを当てていたが、イメージと違うとして戻した)。太字もやめてサイト全体と同じ 400 に
     戻した(2026-09-05 オーナー指示。これで「太字を使わない」の例外が無くなった) */
  font-size: 16px;
}

/* ブランド名の右に添える英字。縦罫で仕切り、等幅で 1 語 1 行の 3 段に積む。
   もとは奥付に 22px のワードマークとして置いていたものを、小さくしてここへ移した
   (2026-09-05 オーナー指示)。**名前を掴めればよいので、読ませには来ない**濃さに留める */
.site-brand__roman {
  flex: none;
  align-self: center;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--text-subtle);
  /* 3 行を塊として詰める。行送りを字面ぎりぎり(1.05)まで寄せると、行間の余りが減って
     1 行目は下へ・最終行は上へ寄り、3 行が中央に凝縮される
     (2026-09-05 オーナー指示「NAGAI は下揃え、DATABASE は上揃え」)。
     負のマージンで押し込むと字面がボックスの外へ出て上下が欠けるので、行送りだけで詰める */
  line-height: 1.05;
}

.site-brand__roman-line {
  display: block;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ハンバーガー(狭幅のみ表示) */
.nav-toggle {
  display: none;
  border: none;
  background: none;
  padding: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.nav-toggle__bars {
  display: block;
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 5px; }
.nav-toggle__bar:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

.nav-drawer__scrim {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 14px;
}

/* 直下のリンクだけを対象にする(プルダウン内のリンクは .nav-menu__panel a が受け持つ) */
.site-nav > a {
  text-decoration: none;
  color: var(--text-muted);
  padding: var(--space-2) 2px;
}

.site-nav > a:hover {
  color: var(--text);
}

/* 現在地は色を濃くするだけ。下線も面も足さない */
.site-nav > a.is-current {
  color: var(--text);
}

/* ログアウト(button_to)をナビリンクと同じ見た目にする */
.site-nav form {
  display: inline;
}

.site-nav form button {
  background: none;
  border: none;
  padding: var(--space-2) 2px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}

.site-nav form button:hover {
  color: var(--text);
}

/* --- ナビのプルダウン(「検索」→ ジャンル/索引/詳細検索) --- */
.nav-menu {
  position: relative;
}

.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: var(--space-2) 2px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}

.nav-menu__trigger:hover,
.nav-menu__trigger.is-current {
  color: var(--text);
}

.nav-menu__trigger .nav-menu__caret {
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.15s ease;
}

.nav-menu__trigger[aria-expanded="true"] .nav-menu__caret {
  transform: rotate(180deg);
}

/* 浮かせるパネルなので、ここだけは影を許す */
.nav-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  min-width: 10rem;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.nav-menu__panel[hidden] {
  display: none;
}

.nav-menu__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu__panel a:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.nav-menu__panel a.is-current {
  color: var(--text);
}

/* --- 本文へのスキップリンク(Issue 99) ------------------------------------
   見た目は既存のピルのボタン(.btn)のまま。フォーカスされていない間は
   .visually-hidden と同じ方法で隠し、フォーカスで画面左上に出す。 */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 100;
}

/* スキップリンクで飛んだ先(main)は枠を出さない。操作できる要素ではないため */
main.container:focus {
  outline: none;
}

/* --- メインコンテナ --- */
main.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
  /* 想定外の広い子でもページ全体が横スクロールしないようにする backstop */
  overflow-x: clip;
}

@media (max-width: 560px) {
  main.container {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

/* --- 全幅の帯で組むページ(トップ) ---------------------------------------
   区画を「角丸の面」で囲うと、閉じた図形がいくつも縦に並んで一体感を失う。
   面ではなく**画面端まで届く帯**で割り、境目は全幅の罫が受け持つ。
   帯は左右に輪郭を持てないので、原理的に「島」にならない(docs/design.md §5.2)。 */
main.container--flush {
  max-width: none;
  padding: 0;
}


/* 全幅ページでは紙とフッターを直に継ぐ(あいだに地が覗くと帯が途切れて見える) */
main.container--flush + .site-footer {
  margin-top: 0;
}

/* 全幅でもフラッシュだけは本文カラムの幅に揃える */
main.container--flush > .flash {
  max-width: var(--content-width);
  margin: var(--space-5) auto 0;
}

/* 帯の中身は本文カラムの幅(800px)に戻す。ヘッダー(--frame-width。1040px)に合わせて広げてみたが、
   区画が横に伸びて中身が間延びしたため取りやめた(2026-09-04 オーナー指示) */
.band__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

/* ページ最上部の印。上を広く取り、下は看板と続けて読ませたいので詰める */
.band--mark .band__inner {
  padding-block: var(--space-6) 0;
}

/* 看板の帯。印を受けて始まるので上は詰め、紙に入る前の下だけ広く取る */
.band--hero .band__inner {
  padding-block: var(--space-5) var(--space-7);
}

/* 紙の面は白 1 枚(2026-09-04 オーナー指示「やっぱり背景を全部白色に戻しましょう」)。
   面を敷く案(区画ごとに交互 / 一覧の棚だけ)はどちらも試作のうえ取りやめ。
   本当の困りごとは「区画の境目が分かりにくい」「中身が宙に浮いて見える」ことだったので、
   色ではなく罫で解く。手本「ただ、そこ」も面ではなく罫で区画を割っている(design.md §3)。

   区画どうしの罫は border ではなく **1px の隙間**で作る(2026-09-06 オーナー指示)。
   紙を罫の色で塗り、各区画を面の色で塗ると、gap がそのまま全幅の境界線になる。
   看板と本文の切れ目だけは「ここから下は本文」の合図なので、章の罫(--text-muted)を
   .sheet 自身の border-top として残す(要素と要素のあいだではなく、紙の上端に引く線なので) */
.sheet {
  border-top: 1px solid var(--text-muted);
  display: grid;
  gap: 1px;
  background: var(--border);
}

.sheet .band {
  background: var(--surface);
}

/* 左のガター: 標識と小さな図を置く柱。縦罫は区画ごとに引き、紙全体を貫く線は持たない
   (docs/design.md §5.2)。どの区画でも同じ位置に立つので、並ぶと 1 本の柱に見える */
.sheet .band__inner {
  display: grid;
  /* 袖と本体のあいだに縦罫を通すので、gap は持たせず padding で振り分ける。
     袖の幅は「WORD OF THE DAY」が収まる値(標識 12px 化に伴い 132 → 152px) */
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  /* 区画の左右にも縦罫を立てる。袖の柱と合わせて 3 本になり、紙が額に収まる
     (2026-09-04 オーナー指示「標識の左側と、導線の右側にも罫線を」) */
  border-inline: 1px solid var(--border);
}

/* 袖と本体を分ける縦罫。区画をまたいで同じ位置に立つので、紙全体で 1 本の柱に見える。
   design.md §5.2 が意図していた「縦に長い 1 本の索引の背」は、この罫があってはじめて成立する。
   中身がこの背に綴じられるので、宙に浮いて見えなくなる
   (2026-09-04 オーナー指示「band__body の各コンテンツが浮いているのが気になる」) */
.sheet .band__body {
  border-left: 1px solid var(--border);
  padding-left: var(--space-6);
}

/* 縦罫は区画の全高に通す。宙で途切れると「切り株」に見えて、
   かえって中身が浮く(design.md §5.4 で単語詳細のレールについて確かめたのと同じ)。
   そのため上下の余白は .band__inner ではなく、袖と本体それぞれが持つ */
.sheet .band__inner {
  padding-block: 0;
}

.sheet .band__gutter,
.sheet .band__body {
  padding-block: var(--space-7);
}

/* 袖は罫のきわに寄せる(標識が背の左に貼り付いて、柱の一部として読める) */
.sheet .band__gutter {
  padding-right: var(--space-5);
}

.band__gutter {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.band__body {
  min-width: 0;
}

/* 区画の頭: 日本語の見出しと導線を同じ行に置く */
/* 区画の見出し行。下に細罫を敷いて中身と地続きにする。
   罫が無いと見出しと中身が別々に宙に置かれて見える
   (手本「ただ、そこ」も .archive-control の下に同じ罫を持つ) */
.band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 767px) {
  .band__inner {
    padding: var(--space-6) var(--space-4);
  }

  .sheet .band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-6);
    /* 狭幅ではカラムが画面幅いっぱいになるので、左右の罫は画面の縁に貼り付いて
       見切れたように見える。額は外して横罫だけで割る */
    border-inline: none;
  }

  /* 1 カラムに畳むと袖が本体の上に回るので、縦罫は外す
     (残すと本体の左端に意味のない線が立つ)。上下の余白も .band__inner 側へ戻す */
  .sheet .band__gutter,
  .sheet .band__body {
    padding-block: 0;
  }

  .sheet .band__body {
    border-left: none;
    padding-left: 0;
  }

  .sheet .band__gutter {
    padding-right: 0;
  }

  /* 狭幅ではガターを横に寝かせ、標識と図を1行に並べる */
  .band__gutter {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}

/* --- 管理画面の共通サブナビ(Issue 35) --- */
/* 下罫は border ではなく背景として引く。横スクロールする内側の箱の中から、
   現在地の下線(admin.css)をこの罫にぴったり重ねて描くため(border だと箱の外に出て重ならない) */
.admin-nav {
  background: linear-gradient(var(--border), var(--border)) bottom / 100% 1px no-repeat;
}

/* 帯そのものは上下の余白を持たず、各リンクが帯の全高を占める。
   文字の上下の余白はリンク側で同じ厚みにして、帯の中央に置く */
.admin-nav__inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  overflow-x: auto;
  white-space: nowrap;
  font-size: 13px;
}

/* 下の 2px は現在地の下線の場所。そのぶん下の余白を薄くして、文字を上下の中央に置く */
.admin-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) 0 calc(var(--space-3) - 2px);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--text-muted);
}

.admin-nav__link:hover,
.admin-nav__link[aria-current="page"] {
  color: var(--text);
}

/* 未着手件数のバッジ(Issue 75) */
.admin-nav__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* --- フッター(奥付) ------------------------------------------------
   1列目にブランドと説明、右の3列に導線を割る。地を一段沈めた帯で静かに閉じる。 */
.site-footer {
  background: var(--bg-soft);
  color: var(--text);
  margin-top: var(--space-9);
}

.site-footer__inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.site-footer__about {
  max-width: 34em;
}

.site-footer__brand {
  font-size: 15px;
  margin: 0 0 var(--space-2);
}

.site-footer__desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

/* 列見出し(さがす / データを見る / サイト情報)。太らせず、小さく置くだけ */
.site-footer__col-title {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 13px;
}

.site-footer__nav a {
  color: var(--text-muted);
  text-decoration: none;
  width: fit-content;
}

.site-footer__nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

/* 奥付の最下段。細罫で切って、標識とコピーライトだけを置く */
.site-footer__bottom {
  border-top: 1px solid var(--border);
}

.site-footer__bottom-inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-subtle);
}

/* 狭幅では 4 列 → 2 列 → 1 列と畳む */
@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .site-footer__bottom-inner {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }
}

/* --- ダークモードの切り替え(docs/design.md §9) ---
   色を持たせず、明度だけのトグル。 */
.theme-toggle__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 2px;
  border: none;
  background: none;
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--transition);
}

.theme-toggle__icon {
  font-size: 16px;
}

.theme-toggle__track {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: background var(--transition), border-color var(--transition);
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-subtle);
  transition: transform var(--transition), background var(--transition);
}

.theme-toggle__button:hover {
  color: var(--text);
}

.theme-toggle__button:hover .theme-toggle__track {
  border-color: var(--text-subtle);
}



.theme-toggle__button[aria-checked="true"] {
  color: var(--text);
}

.theme-toggle__button[aria-checked="true"] .theme-toggle__track {
  background: var(--text);
  border-color: var(--text);
}

.theme-toggle__button[aria-checked="true"] .theme-toggle__thumb {
  transform: translateX(14px);
  background: var(--bg);
}

/* --- フラッシュ(レイアウトで一元表示) --- */
.flash {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3) var(--space-5);
  font-size: 14px;
  margin-bottom: var(--space-6);
}

.flash .icon {
  margin-right: var(--space-2);
  flex: none;
  color: var(--text-subtle);
}

.flash--alert {
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--danger);
}

.flash--alert .icon {
  color: var(--danger);
}

/* 狭幅: ナビをハンバーガーで開閉するサイドパネルに格納する */
@media (max-width: 767px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 21;
  }

  .site-header__right {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    width: min(280px, 82vw);
    height: 100vh;
    margin: 0;
    background: var(--bg);
    box-shadow: var(--shadow-pop);
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }

  .site-header__right.is-open {
    transform: translateX(0);
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-5);
  }

  .site-nav > a,
  .site-nav form {
    display: block;
  }

  .site-nav > a,
  .nav-menu__trigger,
  .site-nav form button {
    width: 100%;
    padding: var(--space-3) 2px;
    text-align: left;
  }

  .theme-toggle__button {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 2px;
  }

  .nav-menu__trigger {
    justify-content: space-between;
  }

  /* ドロワー内ではプルダウンを浮かせず、その場で開いて下の項目を押し下げる */
  .nav-menu__panel {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0 var(--space-4);
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-menu__panel a {
    padding: var(--space-3) 2px;
    border-radius: 0;
  }

  .nav-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: var(--scrim);
  }

  .nav-drawer__scrim.is-open {
    display: block;
  }

  body.nav-drawer-open {
    overflow: hidden;
  }
}
/* UI 部品(docs/design.md §5)。
   手本は「しずかなインターネット」。太字を使わず、差は「大きさ」と「文字の濃さ」だけ。
   囲いは細罫より「淡いグレーの面 + 大きな角丸」を優先し、間は思い切って空ける。 */

/* --- アイコン(Phosphor Light をインライン SVG。currentColor でトークン連動) --- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: none;
}

/* ラベル・小見出しの先頭に添える装飾アイコン。色はラベルの文字色をそのまま継承する
   (等幅の極小ラベルに、同じ細さの線画をひとつだけ置く「欄外の印」の文法) */
.field-legend .icon,
.section-label .icon,
.section-heading .icon,
.sense-attrs dt .icon,
.stats-section__title .icon,
.stats-wall__heading .icon,
.page-eyebrow .icon,
.related__title .icon,
.prose h2 .icon,
.sort-form__label .icon,
.word-flavor__label .icon,
.empty-note .icon {
  margin-right: 6px;
}

/* テキストに添えるアイコン(戻る・切替リンクなど) */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* --- パンくず --- */
.breadcrumbs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: 12px;
  color: var(--text-subtle);
}

.breadcrumbs a {
  color: var(--text-subtle);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs__sep {
  color: var(--text-subtle);
}

/* --- ページ見出し(一覧・検索など) --- */
.page-title {
  font-size: 21px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* 見出し末尾の Web 検索(外部リンク)。主役は言葉なので、最も弱い文字色で小さく添える。
   見出しは画面幅で伸びるため、font-size を継承させず独立して小さく保つ。 */
.page-title__web-search {
  margin-left: 0.4em;
  font-size: 15px;
  line-height: 1;
  color: var(--text-subtle);
  text-decoration: none;
  vertical-align: 0.1em;
}

.page-title__web-search:hover {
  color: var(--text);
}

.page-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: 12px;
  color: var(--text-subtle);
}

/* 記録番号とランダム導線を右肩にまとめる。導線は情報より右に置き「めくる」向きにする */
.page-eyebrow__meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* 見出し語ストリップに溶け込む控えめなランダム導線。弱い文字色にシャッフル印を1つ添え、
   hover で全体を本文色(--text)へ転じて操作可能と気づかせる */
.eyebrow-random {
  color: var(--text-subtle);
  text-decoration: none;
  white-space: nowrap;
}

.eyebrow-random .icon {
  color: var(--text);
}

.eyebrow-random:hover {
  color: var(--text);
}

.page-title-meta {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  color: var(--text-subtle);
}

.entry-count {
  margin: 0;
  font-size: 13px;
  color: var(--text-subtle);
}

/* --- 一覧の件数と並び順(同じ行に組む。狭幅では折り返す) --- */
.entry-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.entry-toolbar .entry-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

/* いま何件目を見ているか(001–100。1 ページは WordsController::PER_PAGE 件)。数えられる目盛りとして
   等幅(.mono と併用)で置く。11px は base.css の .mono(0.92em)より後にあることで効く(読み込み順に依存) */
.entry-range {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* 右側の操作群(シャッフル・並び順)。狭幅では件数の下へ回り込む */
.entry-toolbar__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.entry-toolbar__shuffle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-form__label {
  font-size: 13px;
  color: var(--text-subtle);
}

.sort-form__select {
  font-size: 14px;
  padding: 4px 8px;
}

/* ページの頭と中身を分ける「章の罫」。罫に文字色(--text-muted)を使うのは、docs/design.md §3 に
   列挙した 5 か所だけで、ここはその 1 つ。
   手本が淡い縦罫と濃い横罫の二層を持つのに倣う(濃さは --text-muted まで。黒にはしない) */
.page-header:not(.page-header--rail) {
  border-bottom: 1px solid var(--text-muted);
}

/* --- レール付きのページ頭: 左に見出し、右のレールにその面を表す数と線画を置く ---
   もとは単語詳細だけの組み(.page-header--word)だったのを、全ページ共通の型にした
   (2026-09-04 オーナー指示「トップの雰囲気を他のページにも」)。
   縦罫が章の罫の代わりになるので、この型のときは下端に横罫を引かない */
.page-header--rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: var(--space-5);
  align-items: stretch;
}

.page-header__main {
  min-width: 0;
}

.page-header__rail {
  border-left: 1px solid var(--border);
  padding-left: var(--space-5);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  /* レールは左の見出しより背が高くなりやすく、余ったぶんがヘッダー下の空白になる。
     一覧が始まる位置を上げるため、数字と線画の間は詰める(2026-09-06) */
  gap: var(--space-5);
}

/* レールの中の線画は左揃えにする(数字と頭を合わせる) */
.page-header__rail .ring-art {
  align-items: flex-start;
}

.page-header__rail .ring-art__svg {
  max-width: 104px;
}

.page-header__rail .ring-art__caption {
  text-align: left;
}

/* 本文が痩せるので、1024px 未満ではレールを下へ回して横並びにする */
@media (max-width: 1023px) {
  .page-header--rail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .page-header__rail {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .page-header__rail .ring-art__svg {
    max-width: 120px;
  }
}

.page-header {
  padding: var(--space-2) 0 var(--space-5);
  margin-bottom: var(--space-6);
}

.page-header .page-title {
  font-size: 24px;
  line-height: 1.7;
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}

.page-header .page-title-meta {
  margin-top: var(--space-3);
  font-size: 13px;
}

/* 見出し語ブロック内の自己完結リード文(定義文)。本文体で読ませる(Issue 18)。
   横幅は親(見出し語ブロック)いっぱいまで取る(オーナー判断で字送りの上限は設けない) */
.page-header .page-lead {
  margin: var(--space-5) 0 0;
  max-width: var(--reading-width);
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted);
}

/* 動的に組み立てる解説文。--bg-soft の淡い角丸の面に控えめに置き、突拍子ない印象を避ける。
   横幅は親(見出し語ブロック)いっぱいまで取り、ひっそりと添える */
.word-flavor {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.word-flavor__label {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  color: var(--text-subtle);
}

.word-flavor__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.95;
}

/* 恒久ページ(About 等)の本文。幅は読み物の幅(--reading-width、640px)までに抑える(Issue 20) */
.prose {
  font-size: 15px;
  max-width: var(--reading-width);
}

.prose section + section {
  margin-top: var(--space-7);
}

/* 章の見出し。design.md §3 の「細罫はセクション見出しの下」に従って 1px の細罫で章の頭を示す。
   h2 が等間隔に並ぶだけだと、どこで話題が変わるのか読めない(濃い章の罫は
   ページ見出しの下など design.md §3 に列挙した箇所だけなので、ここは --border で止める) */
.prose h2 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  color: var(--text);
}

/* FAQ の質問文(h3)。太字を使わないので、問いと答えの差は「大きさ」と「文字の濃さ」で作る
   (質問 = 16px の --text / 答え = 15px の --text-muted)。問いの上は広く空ける */
.prose h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 16px;
  color: var(--text);
}

.prose h3 + p {
  color: var(--text-muted);
}

.prose ul {
  margin: 0;
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: var(--space-1);
}

/* クレジット文は等幅で「そのまま貼れる」体裁にする */
.prose__credit {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* 本文中のリンクだけは下線を出す(地の文に埋もれさせない) */
.prose p a,
.prose li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose__note {
  color: var(--text-subtle);
  font-size: 13px;
}

/* --- 語義パネル: 1px の細罫(--border)で囲む大きな角丸。面は塗らない(docs/design.md §5.4) --- */
.sense-list {
  display: grid;
  gap: var(--space-5);
}

.sense-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* グリッド項目の既定 min-width: auto だと、長いローマ字などの折り返せない
     文字列が列幅を押し広げ、モバイルで枠ごと画面からはみ出す */
  min-width: 0;
}

/* 通し番号(語義 1 / 2 …)。小さな見出しとして静かに置く */
.sense-card__number {
  display: block;
  font-size: 12px;
  color: var(--text-subtle);
}

.sense-heading {
  margin-top: var(--space-3);
  font-size: 19px;
  overflow-wrap: anywhere;
}

/* 見出し語の直下に添える韻・母音のメタ(page-title-meta の語義版) */
.sense-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

/* flex 項目の min-width: auto も折り返しを妨げるので明示的に潰す */
.sense-heading-meta > span {
  min-width: 0;
}

/* 見出し語の読みは「ルビの配置」に頼らず、語の上の行に積む。
   WebKit(iPhone Safari)は 1 つの <ruby>(見出し語まるごとに読み 1 つ)の途中では改行できず、
   読みが長い語では見出しが 1 行のまま画面外へはみ出す。Blink は途中で改行できるので
   PC の Chrome や開発者ツールのスマホ表示では再現しない。CSS で折り返させる手段は無い
   (overflow-wrap / word-break / line-break / white-space いずれも効かない)ため、
   ルビ配置そのものをやめて上下 2 段に積み、通常のテキストとして折り返させる。
   マークアップは <ruby>/<rt> のままなので、読み上げ・読みとの対応付けは保たれる。 */
.sense-heading ruby {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  row-gap: 2px;
}

/* 見出し語のふりがなは本文より一段弱い文字色で添える */
.sense-heading rt {
  /* ルビ注釈のままだと折り返さないので、通常のブロックとして流す */
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--text-subtle);
}

.sense-meaning {
  margin: var(--space-5) 0 0;
  font-size: 15px;
  line-height: 2;
}

/* 交差数の値(常時表示) */
.kana-ring__count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* 小さなセクションラベル */
.section-label {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 13px;
  color: var(--text-subtle);
}

/* --- 該当部分つき特徴: 注釈対象を淡いハイライトで示す --- */
.annotations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.annotation {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

/* 注釈対象は --bg-tint のごく淡い面でハイライトする(下線・囲みは使わない) */
.annotation-target {
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.annotation-target rt {
  font-size: 11px;
  color: var(--text-subtle);
}

/* 特徴名は白地の丸タグ(検索リンク)。hover でわずかに色づく */
.chip {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
  padding: 1px 12px;
  text-decoration: none;
  margin-bottom: 4px;
}

a.chip:hover {
  background: var(--bg-tint);
  border-color: var(--bg-tint);
  color: var(--text);
  text-decoration: none;
}

/* --- 語義の関連データ: ラベル列 + 値列。行を細罫で仕切る(面が広いので余白だけでは読めない) --- */
.sense-attrs {
  margin: var(--space-5) 0 0;
  /* 行の区切りは border ではなく 1px の隙間で作る(design.md §5.3 と同じ組み) */
  display: grid;
  gap: 1px;
  background: var(--border);
}

.sense-attrs__item {
  display: grid;
  /* 値側は minmax(0,1fr) にして、長いジャンルパス等でも列が伸びず内側で折り返す
     (これが 1fr だと min-content で押し広げられ、main/section が横にはみ出す) */
  /* ラベル列は先頭のアイコン(1em + 6px)込みで「エンティティ」等が折り返さない幅 */
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  /* 語義カードは枠だけで背景を持たない(地は白)ので、行も面の色で塗る */
  background: var(--surface);
}

/* モバイルではラベルと値を縦に積む(固定ラベル列が画面幅を圧迫しないように)。
   語義パネルの左右余白も詰めて本文の実効幅を確保する */
@media (max-width: 560px) {
  .sense-attrs__item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .sense-card {
    padding: var(--space-4);
  }
}

.sense-attrs dt {
  display: flex;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-subtle);
}

.sense-attrs dd {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* 属性が未登録のときの「—」表示。データが無いことを控えめに示す */
.sense-undefined {
  font-size: 13px;
  color: var(--text-subtle);
}

/* ジャンル階層: リンク付きパンくず(各階層から検索絞り込みへ) */
.genre-path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.genre-path a {
  text-decoration: none;
  color: var(--text-muted);
}

.genre-path a:hover {
  color: var(--text);
}

/* 末端(小分類)は色の濃さだけで一段立てる(太字にせず、下線も引かない) */
.genre-path a.genre-path__current {
  color: var(--text);
  font-weight: 400;
}

.genre-path__sep {
  color: var(--text-subtle);
  font-size: 13px;
}

/* 一覧の行に添える小さいパンくず。一覧の主役はあくまで見出し語なので、詳細と同じ
   文法のまま級数・色を落として静かに添える。末端も色差だけで立て、
   hover したときだけ本文色(--text)と下線を出す(押せることは失わない)。 */
.genre-path--sm {
  gap: 5px;
  font-size: 12px;
  line-height: 1.7;
}

.genre-path--sm a {
  color: var(--text-subtle);
}

/* 末端(小分類)は最も具体的な情報なので、下線ではなく色差だけで一段立てる */
.genre-path--sm a.genre-path__current {
  color: var(--text-muted);
  font-weight: 400;
}

.genre-path--sm a:hover,
.genre-path--sm a.genre-path__current:hover {
  color: var(--text);
  text-decoration: underline;
}

.genre-path--sm .genre-path__sep {
  font-size: 11px;
  color: var(--text-subtle);
}

/* 品詞・エンティティタイプなどのタグ(検索リンク)。白地の丸タグ */
.tag {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
  padding: 1px 12px;
  text-decoration: none;
}

a.tag:hover {
  border-color: var(--bg-tint);
  background: var(--bg-tint);
  color: var(--text);
  text-decoration: none;
}

/* --- 索引ページ(Issue 22) --- */
.browse-section + .browse-section {
  margin-top: var(--space-6);
}

/* 索引ページの節の見出し(.section-heading を使うのはここだけ) */
.section-heading {
  font-size: 17px;
  color: var(--text-muted);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* 索引の 50音セルは(検索フォームのチェックボックスと違い)一覧への実リンク */
.kana-cell--link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}

.kana-cell--link:hover .kana-cell__face {
  border-color: var(--text);
  color: var(--text);
}

.kana-cell--muted .kana-cell__face {
  color: var(--text-subtle);
}

/* 件数ヒート: --fill(0〜1)に応じて --chart の濃淡でセルを塗る。多いマスほど濃い。
   最大でも 45% までに抑え、ライト/ダークどちらでも文字が読める濃さに留める */
.kana-cell--heat .kana-cell__face {
  background: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 45%), transparent);
  border-color: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 40% + 10%), var(--border-strong));
}

.browse-lengths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.browse-length {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* 文字数チップも 50音表と同じヒート(--fill 0〜1 の単色濃淡)で塗る。
   ラベル文字より弱めの塗りに抑え、索引全体でくどくならないようにする */
.browse-length--heat {
  background: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 35%), transparent);
  border-color: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 35% + 10%), var(--border-strong));
}

/* 「11文字」(条件)と「2件」(該当数)が別物と一目で分かるよう、細罫で仕切る */
.browse-length__count {
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-subtle);
}

a.browse-length:hover .browse-length__count {
  color: var(--text);
  border-left-color: var(--text-subtle);
}

/* --- シェア導線(Issue 30) --- */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: inherit;
  line-height: 1.8;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.share__btn:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}

/* --- 関連語セクション(Issue 23) --- */
.related {
  margin-top: var(--space-8);
}

.related__title {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.related__group + .related__group {
  margin-top: var(--space-5);
}

/* 見出し行: 左にラベル、右端に「もっと見る」(ホームの .band__head と同じ配置) */
.related__group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
}

.related__group-header .section-label {
  margin: 0;
}

.related__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 13px;
  color: var(--text-subtle);
  text-decoration: none;
}

/* しりとりの「次の一手」。関連語セクションの文法を流用し、繋ぎ目の文字だけ色を付ける */
.related--shiritori .empty-note {
  margin-top: var(--space-4);
}

/* 使用元はビューではなく ja.yml(words.show.shiritori の lead_html・dead_end_html・none_html)。
   ビューだけを grep すると未使用に見える */
.shiritori__char {
  color: var(--text);
}

/* --- ジャンル・ハブページ(Issue 21) --- */
/* 大分類は折り畳み(details)。初期表示は大分類の一覧だけに畳む(genre-fold の文法を流用) */
.genre-hub {
  display: grid;
  gap: var(--space-3);
}

/* ハブの summary は見出しを兼ねるので、検索フィルタの折り畳みより大きく組む */
.genre-hub__summary {
  padding: var(--space-3) var(--space-4);
}

.genre-hub__large-name {
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
}

/* 件数の左に、最大値で正規化した細い横棒を添える(数値は必ず併記する) */
.genre-hub__bar {
  margin-left: auto;
  flex: none;
  display: block;
  width: 72px;
  height: 2px;
  background: var(--border-strong);
}

.genre-hub__bar::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--text-subtle);
}

.genre-hub__summary .genre-hub__count {
  min-width: 3em;
  text-align: right;
}

.genre-hub__fold > .genre-fold__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* 大分類そのもので絞り込む導線(名前クリックは開閉に充てるため別リンク) */
.genre-hub__whole {
  font-size: 13px;
  color: var(--text);
  align-self: flex-start;
}

.genre-hub__medium {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-strong);
}

.genre-hub__medium-title {
  font-size: 15px;
  margin: 0 0 var(--space-3);
}

.genre-hub__smalls {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* タグ内に件数を等幅で添える(絞り込み導線。docs/design.md §5.5) */
.genre-hub__small {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* 分類名の右に添える公開件数 */
.genre-hub__count {
  font-size: 12px;
  color: var(--text-subtle);
}

a.tag:hover .genre-hub__count {
  color: var(--text-muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 別表記の一覧 */
.variant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* 別表記も見出しと同じ理由でルビ配置に頼らず積む(.sense-heading ruby のコメント参照)。
   別表記は語まるごとの表記なので、長い語では読みも長くなり WebKit ではみ出す */
.variant-list ruby {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  row-gap: 2px;
}

.variant-list rt {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: var(--text-subtle);
}

/* 一覧の絞り込み中インジケータ(どのファセットで絞っているか + 解除) */
.active-facet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.active-facet .condition-list {
  margin: 0;
}

.active-facet__edit {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

.active-facet__edit:hover {
  color: var(--text);
}

.active-facet__clear {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.active-facet__clear:hover {
  color: var(--text);
  text-decoration: underline;
}

/* --- 一覧: 罫だけで仕切り、1件を 2 段 2 列に組む ---------------------
   1件 = 左に見出し語 → 読み、右に分類・種別 → 文字数。**2 段に収める**。
   (2026-09-06 オーナー指摘「縦に情報を積んでいるせいで一画面の情報量が落ち、
    最下部までのスクロール量が大きい」。3 段 109px/行 → 2 段へ)

   面(白い地に白い面 + 枠 + 角丸)は外した。本文の地が白になった今、面に載せても差が出ず、
   トップ(罫の格子で組む)とも雰囲気が食い違うため。区切りは細罫だけが受け持つ。 */
.entry-list {
  /* 行の区切りは border ではなく「1px の隙間」で作る(2026-09-06 オーナー指示)。
     親を罫の色で塗り、各行を面の色で塗ると、gap がそのまま境界線に見える。
     border-top で作らないので、先頭行だけ線を消す `+` セレクタも、
     狭幅での打ち消しも要らない */
  display: grid;
  gap: 1px;
  background: var(--border);
}

/* 行全体を詳細リンクに(surface のストレッチで実現)。タグは上に載る実リンク。
   左列に見出し語と読みを縦に、右列に分類・種別と文字数を縦に置く。 */
.entry-row {
  position: relative;
  display: grid;
  /* 右列(分類のパンくず)は語より長くなることがあるので上限を持たせる。
     auto のままだと右列が幅を食い尽くし、左列が潰れて見出し語が 1 文字ずつ
     縦に折り返す(2026-09-06 に狭幅で実測) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  column-gap: var(--space-4);
  row-gap: 0;
  align-items: baseline;
  /* 100 行が縦に並ぶので、行の余白は本文の基準より一段締める */
  padding: var(--space-2) var(--space-2);
  /* 面の色で塗って、親(罫の色)を 1px の隙間だけ覗かせる。
     角丸は持たせない: 隙間が 1px しかないので、角が丸いと線が途切れて見える */
  background: var(--surface);
  transition: background-color var(--transition);
}

/* 左列: 見出し語 + 読み(2 段ぶんを占める) */
.entry-row__head {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* 右列の上段: 分類のパンくずと種別タグ */
.entry-row__data {
  grid-column: 2;
  grid-row: 1;
}

/* 右列の下段: 文字数。全行で同じ位置に来る「目盛り」の列 */
.entry-row__meta {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
}

.entry-row:hover {
  background: var(--bg-soft);
}

/* 見出し語と読み */
.entry-row__head {
  min-width: 0;
}

.entry-row__surface {
  display: block;
  font-size: 17px;
  /* 一覧は 100 行が縦に並ぶので、行送りは本文(1.9)より締める */
  line-height: 1.45;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* surface のリンク領域を行全体に広げる(タグ以外はどこを押しても詳細へ) */
.entry-row__surface::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 右側のデータ群(ジャンルのパンくず・種別タグ)。右端に揃える。
   ここは折り返さない: 分類が長い語でタグだけが 1 行下に取り残されるのを避け、
   はみ出しはパンくずの内部(下記)で吸収させる。 */
.entry-row__data {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px var(--space-3);
  min-width: 0;
}

/* ジャンルのパンくずは行リンクの上に載せる(各階層が絞り込みリンク)。
   長い分類はこの中だけで折り返す。 */
.entry-row__data .genre-path {
  position: relative;
  z-index: 1;
  min-width: 0;
  justify-content: flex-end;
}

.entry-row__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.entry-row__len {
  font-size: 12px;
  color: var(--text-subtle);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 一覧のタグは各ファセットの絞り込み(単語一覧)への実リンク。行リンクの上に載せる。 */
.entry-row__tag {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.9;
  padding: 0 10px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.entry-row__tag:hover {
  background: var(--bg-tint);
  color: var(--text);
  text-decoration: none;
}

/* 「押せる行」であることだけを示す矢印。装飾ではないので最小・最弱に置く */
.entry-row__go {
  display: none;
}

.entry-row__reading {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

/* 「別表記〈◯◯〉で一致」。検索結果に出た理由の注記なので、細い縦罫で脇に添える。
   行の下に全幅で敷きたいので、グリッドの全列にまたがらせる */
.entry-row__match {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-strong);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* 一覧のカラムは狭いので、分類は常に「中 › 小」に畳む
   (大分類への導線はジャンル一覧と単語詳細が担う) */
.entry-row__data .genre-path a:first-child,
.entry-row__data .genre-path a:first-child + .genre-path__sep {
  display: none;
}

@media (max-width: 600px) {
  /* 狭幅では 2 列に割る幅が無い。左右に分けず、見出し語 → 読み → 分類 → 文字数と縦に積む
     (2 列のままだと右列が幅を取って見出し語が 1 文字ずつ折り返す) */
  .entry-row {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-3);
  }

  .entry-row__head {
    grid-column: 1;
    grid-row: 1;
  }

  .entry-row__data {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    margin-top: var(--space-2);
  }

  .entry-row__meta {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }

  /* 狭幅では分類のパンくずも左揃えに戻す */
  .entry-row__data .genre-path {
    justify-content: flex-start;
  }
}

/* --- ホームの看板の中身 -------------------------------------------------
   見出し → 一行の説明 → 検索 → 補助導線。1 列の中央揃え(.masthead)で積む。 */
.hero__title {
  font-size: 26px;
  line-height: 1.6;
  margin: 0;
}

.hero__lead {
  margin: var(--space-4) 0 0;
  max-width: 30em;
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted);
}

/* 検索は丸い一本のバー。枠は細く、影は落とさない */
.hero-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 560px;
  margin: var(--space-6) 0 0;
  padding: 0 6px 0 var(--space-5);
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition);
}

.hero-search:focus-within {
  border-color: var(--text-muted);
}

.hero-search .icon {
  flex: none;
  font-size: 17px;
  color: var(--text-subtle);
}

/* 素の input[type="text"] は下線付き(0,0,1,1)なので、クラス1つでは打ち消せない。
   親クラスを重ねて特異度を上げ、枠は検索バー本体だけが持つようにする。 */
.hero-search .hero-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
}

.hero-search__input:focus {
  outline: none;
}

.hero-search__input::placeholder {
  color: var(--text-subtle);
}

.hero-search__submit {
  flex: none;
  height: 38px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.hero-search__submit:hover {
  background: var(--bg-soft);
  border-color: var(--text-subtle);
}

/* 検索バーの下の補助導線 */
.hero__sub {
  margin: var(--space-5) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.hero__sub a {
  color: var(--text-muted);
}

.hero__sub a:hover {
  color: var(--text);
}

.hero__sub .icon {
  margin-left: 4px;
}

/* --- 詳細検索フォーム(ドロップダウンをやめ、一覧/階層/スライダーで選ばせる) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.field-legend {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* 検索フォームは面を持たない。条件どうしを細罫で仕切るだけにする
   (全高の7割が単色の面だと、13項目が平坦に流れて目が滑るため)。
   内容の幅は50音表の最小幅(セル34px×16列 + すき間4px×15 = 604px)より余裕を持たせる。 */
.search-form {
  margin: var(--space-5) 0 var(--space-7);
}

/* 項目(fieldset / .field)同士の間隔。
   後続の .field / .kana-field 等の margin 指定に負けないよう詳細度を上げている */
.search-form > fieldset,
.search-form > .field {
  margin-bottom: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

/* 狭幅ではカードの余白を詰めて、50音表・チップ群の実効幅を確保する */
@media (max-width: 560px) {
  .search-form > fieldset,
  .search-form > .field {
    padding: var(--space-4) 0;
  }
}

/* 送信ボタンと「条件をクリア」を同じ行に。クリアは控えめなテキストリンク */
.search-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--text-muted);
}

.search-clear {
  font-size: 13px;
  color: var(--text-muted);
}

.search-clear:hover {
  color: var(--text);
}

.search-form .field input[type="text"] {
  width: 100%;
}

/* 音の成分(濁点・小書きのかな・長音符の「◯つ以上」)。3行を横に流し、狭幅では折り返す */
.sound-count-field__rows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.sound-count-field__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
}

.sound-count-field__input {
  width: 5em;
}

.sound-count-field__unit {
  color: var(--text-muted);
}

.sound-count-field .field-hint {
  margin: var(--space-3) 0 0;
}

/* 狭幅では縦に積むので、入力欄の左端を揃える */
@media (max-width: 560px) {
  .sound-count-field__rows {
    display: grid;
    grid-template-columns: max-content 5em max-content;
    align-items: center;
    gap: var(--space-3) var(--space-2);
  }

  .sound-count-field__row {
    display: contents;
  }
}

/* 押したキーの文字種が並ぶ表示欄。VSCode の検索窓のように、先頭に「>」プロンプト、
   左に組み立て中のパターン、右端に切替アイコン(text-aa / "ab")を置く。手入力不可の読み取り専用。
   枠線は他の入力欄と同じ(--border-strong、focus で --text-muted)。 */
.char-type-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.char-type-display:focus-within {
  border-color: var(--text-muted);
}

.char-type-display__prompt {
  flex: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-subtle);
}

.char-type-display__value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  /* 漢/あ/ア と 1/A/a/@ の字幅差を無くすため全角字形に揃える(表示のみ。送信値は半角のまま) */
  text-transform: full-width;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 未入力のときは薄い案内文を出す(placeholder 相当) */
.char-type-display__value:empty::before {
  content: attr(data-placeholder);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-subtle);
  text-transform: none;
}

/* 右端の切替アイコン群 */
.char-type-display__flags {
  flex: none;
  display: flex;
  gap: 2px;
}

/* tip(状態ラベル)の絶対配置の基準 */
.char-type-flag {
  position: relative;
  display: inline-flex;
}

.char-type-flag__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}

.char-type-flag__btn .icon {
  width: 20px;
  height: 20px;
}

.char-type-flag__btn:hover {
  background: var(--bg-soft);
  color: var(--text-muted);
}

/* 選択中(aria-pressed=true = 厳密側が有効)は枠線でなく --bg-tint の淡い塗りで示す */
.char-type-flag__btn[aria-pressed="true"] {
  background: var(--bg-tint);
  color: var(--text);
  border-radius: var(--radius-sm);
}

.char-type-flag__btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* 切り替えた瞬間だけ状態ラベルを 3 秒フェード表示。ホバー tooltip は使わない(モバイル配慮) */
.char-type-flag__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.char-type-flag__tip.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .char-type-flag__tip { transition: none; }
}

/* 文字種の入力キー(あ/ア/漢/1/A/a/@ と ⌫)。キーで末尾へ追記、⌫ で末尾を1文字削除。
   キー同士は詰めて置き、削除キーだけ少し離す。 */
.char-type-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.char-type-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  /* 字形を表示欄と揃える。連打でダブルタップ拡大・文字選択が起きないようにする */
  text-transform: full-width;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す
   (大文字小文字を区別しないときに「a」キーを隠すのに使う) */
.char-type-key[hidden] {
  display: none;
}

.char-type-key:hover {
  background: var(--bg-soft);
  border-color: var(--text-subtle);
  color: var(--text);
}

.char-type-key:active {
  background: var(--bg-tint);
  border-color: var(--text);
  color: var(--text);
}

/* 削除キーは SVG アイコン。全角化の対象外にし、少し右に離して置く */
.char-type-key--backspace {
  margin-inline-start: var(--space-3);
  color: var(--text-subtle);
  text-transform: none;
}

.char-type-key--backspace .icon {
  width: 16px;
  height: 16px;
}

.slider-field,
.kana-field,
.chips-field,
.sound-count-field {
  border: none;
  padding: 0;
  margin: 0;
}

/* fieldset は既定で中身の最小サイズより縮まない(min-width: min-content 相当)ため、
   .kana-grid の overflow-x: auto が効かず狭幅ではみ出す。0 にして内側だけをスクロールさせる */
.kana-field {
  min-width: 0;
}

/* 読み文字数の二つまみスライダー */
.length-slider__message {
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.length-slider__track {
  position: relative;
  height: 36px;
  background-image: linear-gradient(
    to right,
    var(--border-strong) 0, var(--border-strong) var(--from, 0%),
    var(--text) var(--from, 0%), var(--text) var(--to, 100%),
    var(--border-strong) var(--to, 100%), var(--border-strong) 100%
  );
  background-size: 100% 2px;
  background-position: 0 center;
  background-repeat: no-repeat;
}

.length-slider__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.length-slider__thumb::-webkit-slider-runnable-track { background: transparent; height: 36px; }
.length-slider__thumb::-moz-range-track { background: transparent; }

/* ツマミ: 本文色(--text)の丸ノブ(--bg のフチでトラック/もう一方のツマミから分離) */
.length-slider__thumb::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  /* トラック(36px)の中央線にツマミを重ねる: (36 - 16) / 2 */
  margin-top: 10px;
  background: var(--text);
  border: 2px solid var(--bg);
  border-radius: 50%;
  cursor: pointer;
}
.length-slider__thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background: var(--text);
  border: 2px solid var(--bg);
  border-radius: 50%;
  cursor: pointer;
}

/* 50音表: 伝統的な縦書きの並び。上から下に「アイウエオ」、右から左に「ア→カ→サ…」。
   direction: rtl で列を右から並べる(スクロール初期位置も右=ア行になる) */
.kana-grid {
  display: flex;
  direction: rtl;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  /* fit-content の箱を親内で左右中央に置く */
  margin-inline: auto;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kana-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kana-cell {
  cursor: pointer;
}

/* 段を揃えるための空セル(ヤ・ワ・ン列) */
.kana-cell--blank {
  width: 34px;
  height: 34px;
  cursor: default;
}

.kana-cell__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.kana-cell__face:hover {
  border-color: var(--text-subtle);
  color: var(--text);
}

.kana-cell input:checked + .kana-cell__face {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.kana-cell input:focus-visible + .kana-cell__face {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* 一覧選択チップ(品詞・エンティティ・特徴)。選択で本文色(--text)の塗りに変わる(文字は反転) */
.check-chips,
.genre-filter__level {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.check-chip {
  cursor: pointer;
}

.check-chip__face {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
  padding: 3px 14px;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.check-chip__face:hover {
  border-color: var(--text-subtle);
  color: var(--text);
}

.check-chip input:checked + .check-chip__face {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.check-chip input:focus-visible + .check-chip__face {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* ジャンル階層フィルタ: 大分類→中分類を折り畳み(details)で辿る。
   初期表示は大分類の一覧だけに畳み、ジャンルが増えても見通しを保つ */
.genre-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.genre-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.genre-fold[open] {
  border-color: var(--border-strong);
}

.genre-fold__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  /* 既定の三角マーカーは消し、キャレットで示す */
  list-style: none;
}

.genre-fold__summary::-webkit-details-marker {
  display: none;
}

.genre-fold__summary:hover {
  color: var(--text);
}

.genre-fold__caret {
  color: var(--text-subtle);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.genre-fold[open] > .genre-fold__summary .genre-fold__caret {
  transform: rotate(0deg);
}

/* 畳んだままでも配下の選択数が分かるバッジ */
.genre-fold__count {
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  font-size: 12px;
  color: var(--text-muted);
}

.genre-fold__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 12px;
  border-top: 1px solid var(--border);
}

/* 中分類の折り畳みは左罫のみで、ひとつ下の階層と分かるように */
.genre-fold--medium {
  border: none;
  border-left: 2px solid var(--border-strong);
}

.genre-fold--medium[open] {
  border-left-color: var(--text);
}

.genre-fold--medium > .genre-fold__summary {
  padding: 4px 10px;
}

.genre-fold--medium > .genre-fold__body {
  border-top: none;
  padding: var(--space-1) 10px var(--space-2);
}

/* 適用中の検索条件チップ(単語一覧の絞り込みヘッダで使う) */
.condition-list {
  list-style: none;
  margin: var(--space-3) 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.condition-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 3px 12px;
}

.condition-chip__label {
  font-size: 12px;
  color: var(--text-subtle);
}

.condition-chip__value {
  font-size: 13px;
  color: var(--text);
}

/* --- 収録数の内訳。ホームでは看板のレールに、管理画面では横並びに置く --- */

/* margin は使う側(ホームの .stats-grid--rows と、admin.css の .is-admin .stats-grid)が持つ */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  font-size: 13px;
  color: var(--text-subtle);
}

.stats-grid__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.stats-grid__item dt {
  font-size: 13px;
  color: var(--text-subtle);
}

.stats-grid__item dd {
  margin: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.stats-grid__unit {
  font-size: 12px;
  color: var(--text-subtle);
  margin-left: 2px;
}

/* --- 標識(英字の極小ラベル) -------------------------------------------
   資料館のキャプションのように、区画の頭に等幅の小さな英字を置く。
   本文の代わりではなく「そこが何の区画か」を示す標識なので、必ず日本語の
   見出しと対にして使う(docs/design.md §5.8)。
   図のキャプション(.ring-art__caption。五十音円環と放射図の両方)はこのクラスを兼ね、級数・行間・字送りを
   後ろの規則で上書きする。その上書きは、この規則より後に書いてあることで効く(記述順に依存)。 */
.label-en {
  display: block;
  margin: 0;
  font-family: var(--font-mono);
  /* 級数は 12px。design.md §2 の「補足・ラベルは 11px 未満にしない」を満たす最小。標識は塗りで置く
     (白抜きにする案は試したうえで、オーナー判断で不採用。経緯と実測は design.md §5.8)。
     16px / 20px の縦積み / 30px(figure-number の書体)まで上げて試したが、
     いずれもオーナー判断で戻した(2026-09-05)。字送りは 0.04em */
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* 日本語の章見出し(ホーム)。標識(.label-en)は袖(.band__gutter)に置くので、いまは中に
   .section-title__ja だけが入る(縦組みの flex は、見出しの上に標識を重ねていた頃の組み) */
.section-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-title__ja {
  font-size: 15px;
  color: var(--text-muted);
}

/* --- 図としての数字(アウトライン) -------------------------------------
   収録語数・文字数のように「サイトの性格を一目で伝える数」を、
   線だけの巨大な数字として置く。文字の中身は塗らない。 */
.figure-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  /* -webkit-text-stroke が無い環境では塗りのまま見えるようにしておく。
     塗りで出るときは太字にしない(design.md §2「太字を使わない」)。 */
  color: var(--border-strong);
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .figure-number {
    /* 1px の線で輪郭を描くので、字面の太い 700 で骨格を確保する(塗らないので太字には見えない) */
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-muted);
  }
}

.figure-number--sm {
  font-size: clamp(36px, 4vw, 48px);
}

/* 数字に添える単位・キャプション */
/* 線だけの数字に添える単位ラベル。標識(.label-en)と同じ級数・同じ塗りで置く */
.figure-caption {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --- 看板(ホーム) -----------------------------------------------------
   面も枠も持たず、1 列の中央揃えで積む(docs/design.md §5.2)。最後の「収録の規模」だけを、
   縦罫を挟んで左右に割る。 */
/* 看板の列の最後に置く「収録の規模」。左に収録語数、縦罫を挟んで右にそのほかの数。
   検索からは --space-8 離して切り、ここだけ左右に割ることで列の終わりを示す */
.masthead__figures {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-6);
  text-align: left;
}

/* 左はこのページの主役の数(収録語数)。ページ中でいちばん大きな図にする */
.masthead__figures-main .figure-number {
  font-size: clamp(56px, 7vw, 88px);
}

/* 右はそのほかの数。ラベル左・値右の等幅の行で積み、縦罫で左と分ける。
   罫は区画の高さいっぱいに通したいので、行のほうを縦中央に寄せる(767px 以下の gap はすぐ下の @media) */
.stats-grid--rows {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  margin: 0;
  min-width: 210px;
  padding-left: var(--space-6);
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.stats-grid--rows .stats-grid__item {
  justify-content: space-between;
  gap: var(--space-3);
}

.stats-grid--rows .stats-grid__item dd {
  font-family: var(--font-mono);
  font-size: 11px;
}

@media (max-width: 767px) {
  .stats-grid--rows {
    gap: var(--space-2) var(--space-4);
  }
}

/* 狭幅では左右に割らず、数の下に内訳を積む(縦罫も外す) */
@media (max-width: 560px) {
  .masthead__figures {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    justify-items: center;
  }

  .stats-grid--rows {
    width: 100%;
    max-width: 260px;
    padding-left: 0;
    border-left: none;
  }
}

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- 線画(読みの円環) -------------------------------------------------
   実データ(読み)から描く装飾。線だけで、面も色も持たない。 */
.ring-art {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.ring-art__svg {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
}

.ring-art__guide {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ring-art__stroke {
  fill: none;
  stroke: var(--text-subtle);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ring-art__start {
  fill: var(--text-muted);
}

/* 図に添えるキャプションは標識より一段小さい 10px。
   級数を上げると「READING PATH / 50-ON RING」がレール幅(168px)で 2 行に折り返し、図より重くなる。
   標識=区画が何かを示す / キャプション=図が何かを示す、で役割が違うので揃えなくてよい。
   要素は .label-en も兼ねるので、ここの級数・行間・字送りは .label-en より後に書いてあることで効く */
.ring-art__caption {
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-align: center;
}

/* キャプションの 2 行目に置く値(交差回数など)。1 行目の下へ落とす。図のキャプションは
   標識の「2 行目に必ず値」の規則の対象外なので、値は任意(docs/design.md §5.8) */
.ring-art__value {
  display: block;
}

/* ページ最上部に置く印。サイト名の読みの円環を、看板の上に静かに 1 つだけ、中央に置く */
.ring-art--mark .ring-art__svg {
  max-width: 172px;
  margin: 0 auto;
}

/* 円の外側を回る英字。標識(.label-en)と同じ等幅・大文字で、級数だけ図に合わせる。
   viewBox 200 を 172px で描くので、11 単位 = 画面上およそ 9.5px(標識とほぼ同じ大きさ) */
.ring-art__arc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  fill: var(--text-subtle);
  text-transform: uppercase;
}

/* 印だけは「ナ」から「ス」へ一筆書きで描かれ、外周の英字がゆっくり回り続ける。
   線の全長(--ring-length)はサーバ側で算出済み(KanaRing.stroke_length)なので、
   長さを測るためだけの JS を持たない。円 → 始点 → 折れ線 の順に、1度だけ描いて止まる。 */
@media (prefers-reduced-motion: no-preference) {
  .ring-art--mark .ring-art__guide {
    opacity: 0;
    animation: ring-mark-fade 1000ms ease-out 170ms forwards;
  }

  .ring-art--mark .ring-art__start {
    opacity: 0;
    animation: ring-mark-fade 580ms ease-out 750ms forwards;
  }

  .ring-art--mark .ring-art__stroke {
    stroke-dasharray: var(--ring-length);
    stroke-dashoffset: var(--ring-length);
    /* 読みを1字ずつ辿る線なので、速度は変えず一定で引く(ペンの動きに合わせる)。
       4.65 秒が正(2026-09-04 に 2.2 秒へ速める指示があったが適用せず、今の速さを正とした。
       docs/issues.md 確定事項 27) */
    animation: ring-mark-draw 4650ms linear 920ms forwards;
  }

  /* 外周の英字だけは止まらない。1周 80 秒 = 目で追えない速さで、視界の端で気づく程度に。
     回転の中心は**円環そのものの中心**(--ring-center = KanaRing::CENTER)。
     g の外形の中心にすると、文字が弧の上側にあるぶん重心が上へずれて回転が振れる */
  .ring-art--mark .ring-art__orbit {
    transform-box: view-box;
    transform-origin: var(--ring-center) var(--ring-center);
    animation: ring-mark-orbit 80s linear infinite;
  }
}

@keyframes ring-mark-fade {
  to {
    opacity: 1;
  }
}

@keyframes ring-mark-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ring-mark-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* --- 放射図(RadialChart): 並んだ数値を、円の上の一筆書きにする -------------
   五十音円環とまったく同じ円・同じ線の濃さで描く。サイトの図を「円」ひとつの
   家族に収めるための約束で、塗りは持たせない(docs/design.md §5.9) */
.radial-art__spokes line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.radial-art__node {
  fill: var(--text-muted);
}

/* --- ホーム: 2つのリスト(最近追加 / 読みが長い) -------------------------
   横に並べず、縦に積んで余白で離す。囲いは付けない。 */
/* 新着と「読みが長い言葉」の区画(ホーム)。今日の一語と同じく、紙(.sheet)の中の白い帯として縦に積む
   (余白は帯が持つので、ここは margin を持たない) */
.home-column {
  margin: 0;
}

/* 「一覧へ →」「ランキングへ →」。今日の一語の導線(.home-featured__more)と同じ重み */
.home-column__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 13px;
  color: var(--text-subtle);
  text-decoration: none;
  white-space: nowrap;
}

.home-column__more:hover {
  color: var(--text);
}

.home-column__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--transition);
}

.home-column__item:hover {
  background: var(--bg-soft);
}

/* 順位・NEW などの行頭のしるし。細く小さく、色を付けるのは「新着」だけ */
.home-column__mark {
  flex: none;
  width: 2.2em;
  font-size: 12px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.home-column__mark--new {
  color: var(--text-subtle);
  font-size: 11px;
}

.home-column__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-column__word {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
}

.home-column__reading {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

.home-column__meta {
  flex: none;
  font-size: 12px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 今日の一語: 面も角丸も持たない、帯の中の区画。右に読みの円環の線画を添える --------- */
.home-featured {
  margin: 0;
}

/* 見出し語+読み → 意味の順に上下へ積む(オーナー判断。左右2段組みは不採用) */
.home-featured__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: var(--space-5);
  align-items: start;
}

.home-featured__word {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.home-featured__word:hover {
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.home-featured__reading {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

.home-featured__meaning {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 2;
  color: var(--text-muted);
}

/* その語の関連データ(ジャンルのパンくず + 丸タグ)。本文から離して、
   「ここから絞り込める」ひとかたまりとして置く(docs/design.md §5.5) */
.home-featured__data {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 見出し行の右端に置く詳細への導線(2カラムの「一覧へ」と同じ重み) */
.home-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 13px;
  color: var(--text-subtle);
  text-decoration: none;
  white-space: nowrap;
}

.home-featured__more:hover {
  color: var(--text);
}

@media (max-width: 700px) {
  .home-featured__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 管理画面の入口カード(ダッシュボード・タグ管理): 1px の罫で割った 1 枚のパネル ---
   カードどうしの罫は border ではなく gap: 1px の隙間で見せる(親を罫の色で塗り、各カードを面の色で塗る)。
   grid ではなく折り返す flex で並べる: 枚数が列数で割り切れなくても、最終段のカードが伸びて段を埋めるので、
   空きに罫の色が面になって覗かない(タグ管理は 5 枚) */
.admin-dash-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  background: var(--border);
}

/* カードの中に別のリンク(まとめて注釈)を置くことがあるので、カードそのものは <a> にしない。
   見出しのリンクの ::after をカード一面に広げて、どこを押しても入れるようにする */
.admin-card {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface);
  transition: background var(--transition);
}

.admin-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text);
  text-decoration: none;
}

.admin-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* フォーカスの輪はカード一面に出す(見出しの文字だけを囲むと、押せる範囲と食い違う) */
.admin-card__link:focus-visible {
  outline: none;
}

.admin-card__link:focus-visible::after {
  outline: 2px solid var(--text-muted);
  outline-offset: -2px;
}

.admin-card__icon {
  width: 22px;
  height: 22px;
}

.admin-card__title {
  font-size: 17px;
  line-height: 1.4;
}

/* 右上の矢印で「入口」であることを示す。色は hover で変える(admin.css) */
.admin-card__arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--text-subtle);
}

.admin-card__desc {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 下端の一言(件数など)。段の中で一番背の高いカードに揃うよう、下へ押しつける */
.admin-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-size: 12px;
  color: var(--text-subtle);
}

/* 一面に広げた見出しのリンクより手前に出して、こちらを押せるようにする */
.admin-card__sublink {
  position: relative;
  z-index: 1;
}

/* --- 単語の管理一覧(Issue 36): 検索 + 注釈状態タブ + テーブル --- */
.admin-words-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-3);
}

/* 検索は細枠の箱 + 虫眼鏡 */
.admin-words-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-words-search:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--bg-tint);
}

.admin-words-search__input {
  border: none;
  background: transparent;
  font-size: 14px;
  padding: 6px 2px;
  width: 16em;
}

.admin-words-search__input:focus {
  outline: none;
}

.admin-words-search__submit {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 4px;
  color: var(--text-muted);
}

.admin-words-search__submit:hover {
  color: var(--text);
}

/* 検索とタグ絞り込みを縦に積む(タグは語義のジャンル・品詞・エンティティ・語種) */
.admin-words-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-words-tag-filters {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-words-tag-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-words-tag-filter__label {
  font-size: 12px;
  color: var(--text-subtle);
}

.admin-words-tag-filter select {
  font-size: 13px;
  padding: 4px 8px;
  max-width: 14em;
}

.admin-words-tag-filter__reset {
  font-size: 13px;
  color: var(--text-muted);
  align-self: flex-end;
  padding-bottom: 5px;
}

.admin-words-tag-filter__reset:hover {
  color: var(--text);
}

.admin-status-tabs {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.admin-status-tabs__tab {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) 2px;
}

.admin-status-tabs__tab:hover {
  color: var(--text);
}

.admin-status-tabs__tab[aria-current="page"] {
  color: var(--text);
  font-weight: 400;
  border-bottom-color: var(--text);
}

.admin-words-count {
  font-size: 13px;
  color: var(--text-subtle);
  margin-bottom: var(--space-3);
}

/* 一括適用(Issue 37)。パネルは細罫の角丸、中身はコンソールの ann-row/ann-chip を流用 */
.bulk-annotation {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.bulk-annotation__summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.bulk-annotation__summary:hover {
  color: var(--text);
}

.bulk-annotation[open] .bulk-annotation__summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: block;
  padding-bottom: var(--space-2);
}

.bulk-annotation__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: var(--space-2) 0;
  max-width: 46em;
}

.bulk-annotation__meaning {
  width: 100%;
  max-width: 34em;
  font-size: 14px;
}

.bulk-annotation__actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.bulk-annotation__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Claude Code 連携(Issue 38): 一覧の導線と書き出し/取り込み画面 */
.admin-words-claude {
  font-size: 14px;
  margin-bottom: var(--space-2);
}

.admin-words-claude .sep {
  color: var(--text-subtle);
  margin: 0 var(--space-2);
}

.proposal-lead {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 46em;
  margin: var(--space-3) 0 var(--space-4);
}

.proposal-limit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.proposal-limit__range-sep {
  font-size: 13px;
  color: var(--text-subtle);
}

.proposal-limit__label {
  font-size: 13px;
  color: var(--text-subtle);
}

.proposal-limit__input {
  width: 5em;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.proposal-limit__count {
  font-size: 13px;
  color: var(--text-subtle);
}

.proposal-json__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.proposal-json__hint {
  font-size: 13px;
  color: var(--text-muted);
}

/* JSON は等幅・淡い面のコードブロック */
.proposal-json__area {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  background: var(--bg-soft);
}

.proposal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.proposal-next {
  margin-top: var(--space-4);
  font-size: 14px;
}

/* 見出しは字送りが広く、狭い列だと折り返して行高が暴れる。折り返さず列幅で受ける。 */
.admin-words-table thead th {
  white-space: nowrap;
}

/* 狭幅でも列を潰さない(.table-scroll の中で横スクロールさせる) */
.admin-words-table {
  min-width: 640px;
}

/* 行アクションの背が一番高いので、それに合わせて全セルを中央に揃える */
.admin-words-table td {
  vertical-align: middle;
}

.admin-words-table__check {
  width: 28px;
  text-align: center;
}

.admin-words-table__reading {
  font-size: 13px;
  color: var(--text-muted);
}

/* 語義数・注釈状態・操作は内容ぶんだけ。余りは表層形と読みに配る */
/* 見出しは `.data-table thead th` の左揃えが勝つため、th も含めて指定して数値と頭を揃える */
.admin-words-table__num,
.admin-words-table thead th.admin-words-table__num {
  width: 1%;
  text-align: right;
}

.admin-words-table__status,
.admin-words-table__actions {
  width: 1%;
  white-space: nowrap;
}

/* 右揃えの語義数と隣り合うので、頭を離して読み違いを防ぐ。
   `.data-table` の padding 一括指定が勝つため、th/td を明示して上書きする */
.admin-words-table th.admin-words-table__status,
.admin-words-table td.admin-words-table__status {
  padding-left: var(--space-5);
}

/* 状態の文字。色(未対応・保留・完了)は admin.css が持つ。この表は管理画面にしか無い */
.admin-words-table__annotated,
.admin-words-table__unannotated,
.admin-words-table__on-hold {
  font-size: 13px;
}

/* --- ページネーション --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  font-size: 14px;
}

.pagination span {
  font-size: 13px;
  color: var(--text-subtle);
}

.pagination a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 7px 20px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.pagination a:hover {
  background: var(--bg-soft);
  border-color: var(--text-subtle);
  text-decoration: none;
}

/* --- テーブル(管理画面の一覧。公開側では使っていない): ヘッダは細罫で締め、行は細罫で仕切る --- */
/* 狭幅では列を潰さず、この入れ物の中だけ横スクロールで逃がす(main は overflow-x: clip)。
   中のテーブルに min-width を与えてはじめて効く(無いと width:100% のまま列が潰れる) */
.table-scroll {
  overflow-x: auto;
}

.data-table thead th {
  font-size: 13px;
  color: var(--text-subtle);
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr:hover {
  background: var(--bg-soft); /* 紙が一段沈む程度 */
}

.data-table td a {
  font-size: 14px;
  text-decoration: none;
}

.data-table td a:hover {
  text-decoration: underline;
}

/* --- ボタン: 白地の丸いピル。hover では背景だけをわずかに変える。
   塗りは主要 CTA のみで、色は持たせず文字色のベタにする。 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  letter-spacing: inherit;
  line-height: 1.6;
  padding: 0 var(--space-5);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover {
  background: var(--bg-soft);
  border-color: var(--text-subtle);
  color: var(--text);
  text-decoration: none;
}

.btn--primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--bg);
}

/* 一覧のツールバーなど、行に紛れさせたい小さなボタン */
.btn--sm {
  min-height: 32px;
  font-size: 13px;
  padding: 0 var(--space-4);
}

/* アイコン+小さなラベルを持つ行アクション用ボタン(annot. / del.)。
   高さを揃え、隣接しても行がガタつかないようにする。 */
.btn--icon {
  gap: 0.4em;
  min-height: 30px;
  font-size: 12px;
  line-height: 1.4;
  padding: 0 var(--space-3);
  white-space: nowrap;
}

/* --- フォーム: 入力はすべて細枠の角丸ボックス(下線 1 本の意匠は使わない) --- */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 9px 14px;
  max-width: 100%;
  transition: border-color var(--transition);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--text-muted);
}

/* iOS Safari は select/input を独自のグラデーション付きスタイルで描くため、
   ネイティブの見た目を切って細枠に戻す。
   矢印も一緒に消えるので、caret-down(Phosphor Light)を data URI の背景で描き直す。
   data URI では CSS 変数を参照できないので、両テーマで見える中間のグレーを直に持つ。 */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236e7781'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  padding-right: 32px;
}

textarea {
  width: 100%;
  min-height: 72px;
}

.field {
  margin-bottom: var(--space-5);
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* フォームのまとまり: 細罫の角丸パネル */
.fieldset-card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}

.fieldset-card legend {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 0 var(--space-2);
}

/* 入力欄に添える畳んだヘルプ(genre-fold の文法を流用)。
   既定は閉じていて、開くと淡い面のパネルで早見表を出す。ホバーには依存しない */
.field-help {
  margin-top: var(--space-2);
}

.field-help__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* タップ領域を確保しつつ、畳んだ状態では小さく目立たせない */
  padding: 6px 2px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-subtle);
  list-style: none;
}

.field-help__summary::-webkit-details-marker {
  display: none;
}

.field-help__summary:hover {
  color: var(--text);
}

.field-help__summary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.field-help__caret {
  color: var(--text-subtle);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.field-help[open] > .field-help__summary .field-help__caret {
  transform: rotate(0deg);
}

.field-help__body {
  border: none;
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: var(--space-4);
}

.field-help__note {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 記法(等幅)と意味(本文)の対比で読ませる早見表 */
.regexp-help__table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-3);
  margin: 0;
}

.regexp-help__table dt {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.regexp-help__table dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 入力欄の補足説明 */
.field-hint {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* 一括登録の貼り付け欄: 等幅で桁を揃える */
.bulk-input {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.8;
}

/* フォーム上部の警告(一部失敗など): 赤の枠と文字(背景は塗らない) */
.form-alert {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  color: var(--danger);
  font-size: 14px;
}

/* 一括登録の結果サマリ */
.bulk-result {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.bulk-result__summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 14px;
}

.bulk-result__errors {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  color: var(--danger);
  font-size: 14px;
  line-height: 1.9;
}

/* バリデーションエラー: 赤の枠と文字のみ(背景を塗らない) */
.error-explanation {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.error-explanation h2 {
  font-size: 14px;
  color: var(--danger);
}

.error-explanation ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.error-explanation li {
  font-size: 14px;
  color: var(--danger);
}

/* --- 一括登録のフェーズ表示(入力→読み→重複) --- */
.steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-subtle);
}

/* ステップ間の細罫でつなぐ */
.steps__item:not(:last-child)::after {
  content: "";
  width: var(--space-6);
  height: 1px;
  background: var(--border-strong);
  margin-left: var(--space-2);
}

/* 番号は 1px 枠の丸。現在は本文色(--text)のベタ(文字は反転)、完了は淡い面(--bg-soft)。 */
.steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.steps__item.is-current {
  color: var(--text);
  font-weight: 400;
}

.steps__item.is-current .steps__no {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.steps__item.is-done {
  color: var(--text-muted);
}

.steps__item.is-done .steps__no {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

/* --- 一括登録の読み確認テーブル(細罫の表 + 赤の警告) --- */
.bulk-review {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}

.bulk-review__table {
  width: 100%;
  /* 狭幅では列が1文字ずつ縦に潰れるため、下限を確保して .bulk-review 側の横スクロールに逃がす */
  min-width: 560px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
}

.bulk-review__table th,
.bulk-review__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.bulk-review__table thead th {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-strong);
}

.bulk-review__table tbody tr:last-child td {
  border-bottom: none;
}

.bulk-review__no {
  width: 3rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

/* 類似・重複がある行、収録基準を満たさない行は左端に赤い帯を出して目立たせる */
.bulk-review__row--warn td:first-child,
.bulk-review__row--error td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.bulk-review__surface {
  width: calc(50% - 1.5rem);
  font-size: 15px;
  font-weight: 400;
}

.bulk-review__reading {
  width: calc(50% - 1.5rem);
}

.bulk-review__reading-input {
  width: 100%;
  min-width: 12rem;
  font-family: var(--font-mono);
  font-size: 15px;
}

/* 検証エラーの入力欄は赤の枠で示す */
.bulk-review__reading-input.is-error {
  border-color: var(--danger);
}

/* エラー(登録できない/収録基準を満たさない)は赤ベタで、類似警告(赤文字)より強く出す */
.bulk-review__error-label {
  display: inline-block;
  margin: 0 0 var(--space-1);
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--danger);
  color: var(--bg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

/* 見た目用のクラスだが、reading_format_controller.js も探す(改名するなら JS も直す) */
.bulk-review__reading-error {
  margin-top: var(--space-2);
}

/* display 指定はブラウザ既定の [hidden] { display: none } より強いので、明示的に隠す */
.bulk-review__error-label[hidden] {
  display: none;
}

/* --- step2: 調査 JSON の反映パネル --- */
.bulk-research {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.bulk-research__summary {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
}

.bulk-research .bulk-input {
  margin: var(--space-3) 0;
}

/* --- step2: 読み欄(入力 + 一致バッジ + 候補チップ) --- */
.bulk-review__reading-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.reading-status {
  font-size: 12px;
  font-weight: 400;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

/* 一致=緑 / 不一致=赤 で即時に判別できるようにする */
.reading-status--match {
  color: var(--success);
}

.reading-status--differ {
  color: var(--danger);
}

.reading-status--research {
  color: var(--text-muted);
}

.reading-status__conf {
  font-size: 12px;
  color: var(--text-subtle);
}

.reading-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 候補チップ: クリックで読み欄へ流し込む。選択中は --bg-tint の淡い面と濃い枠。 */
.reading-choice {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  padding: 3px 10px;
  cursor: pointer;
  font: inherit;
}

.reading-choice:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.reading-choice.is-active {
  background: var(--bg-tint);
  border-color: var(--text);
  color: var(--text);
}

.reading-choice__src {
  font-size: 11px;
  color: var(--text-subtle);
}

.reading-choice__val {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* step3 の読みは確定済みなので読み取り専用の等幅テキストで見せる */
.bulk-review__reading-text {
  font-family: var(--font-mono);
  font-size: 15px;
}

.bulk-review__missing {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--danger);
}

.bulk-review__warn-label {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  font-weight: 400;
  color: var(--danger);
}

.bulk-review__warn-label:not(:first-child) {
  margin-top: var(--space-2);
}

.bulk-review__matches {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bulk-review__match {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
}

.bulk-review__match-surface {
  font-weight: 400;
}

.bulk-review__match-reading {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.bulk-review__match-sim {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--danger);
}

.bulk-review__ok {
  color: var(--text-subtle);
}

/* step3(重複チェック)は No./表層形/読み/重複・類似/除外 の5列。
   step2 の 2列レイアウト(50% ずつ)のままだと除外列が潰れて文言が切れるため、幅を組み直す。 */
.bulk-review__table--duplicates {
  min-width: 720px; /* 5列ぶんの下限。狭幅は横スクロールで読む */
}

.bulk-review__table--duplicates .bulk-review__surface,
.bulk-review__table--duplicates .bulk-review__reading {
  width: 22%;
}

.bulk-review__table--duplicates .bulk-review__exclude-col {
  width: 9rem;
}

/* 除外チェック列 */
.bulk-review__exclude-col {
  text-align: center;
}

.bulk-review__exclude-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-subtle);
  cursor: pointer;
}

/* 「除外」にチェックした行は薄く・取り消し線で「登録に投げない」ことを示す */
.bulk-review__table tbody tr:has(.bulk-review__exclude:checked) {
  opacity: 0.45;
}

.bulk-review__table tbody tr:has(.bulk-review__exclude:checked) .bulk-review__surface {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
}

.bulk-review__table tbody tr:has(.bulk-review__exclude:checked) .bulk-review__reading-input {
  text-decoration: line-through;
}

.bulk-review__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* --- 汎用 --- */
.empty-note {
  color: var(--text-subtle);
}

.back-link {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: 15px;
}

/* 詳細ページ下部のナビ(一覧へ戻る)。ランダム導線は見出し語ストリップに集約した */
.word-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* 間隔は nav 側で管理するので、back-link 既定の上余白は打ち消す */
.word-footer-nav .back-link {
  margin-top: 0;
}

.actions {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* button_to は form でボタンを包むため、素の link_to と並べると基準線がずれる。
   行アクションでは中央揃えにし、form を高さ 0 の入れ物として扱う。 */
.actions--tight {
  align-items: center;
  gap: var(--space-2);
}

.actions--tight .button_to {
  display: inline-flex;
}

/* --- タグ統括管理(Admin::Tags) ------------------------------------------ */
/* 一覧のエラー列挙(編集フォームのバリデーションエラー)。赤テキスト・背景は塗らない */
.form-errors {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  list-style: none;
  font-size: 13px;
}
.form-errors li + li {
  margin-top: var(--space-1);
}

/* 追加パネル(details)。統合パネルと同じトーンに揃える */
.tag-add {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.tag-add__summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.tag-add[open] .tag-add__summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: block;
  padding-bottom: var(--space-2);
}
.tag-add__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 46em;
}
.tag-add__form .field {
  margin-bottom: var(--space-3);
  max-width: 24em;
}

/* 統合パネル(details)。一括適用パネルと同じトーンに揃える */
.tag-merge {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.tag-merge__summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.tag-merge[open] .tag-merge__summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: block;
  padding-bottom: var(--space-2);
}
.tag-merge__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 46em;
}
.tag-merge__pair {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.tag-merge__arrow {
  font-size: 18px;
  line-height: 2.2;
  color: var(--text-subtle);
}

/* タグ一覧テーブル */
/* 狭幅でも列を潰さない(.table-scroll の中で横スクロールさせる) */
.tag-table {
  min-width: 560px;
}
.tag-table__num {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap;
}
/* ジャンルの階層インデント(中分類・小分類を段付けして木構造を示す)。
   段差を大きめに取り、ツリーコネクタ「└」でぶら下がりを明示する。
   等幅ラベルの階層列(大/中/小)と併せて読み取れるようにする。
   ※パディングは .data-table td より詳細度を上げないと効かない(セルの既定パディングに負ける)。
   ビューは genres.level を補間して --large / --medium / --small を付けるが、--large(大分類)は
   字下げしない既定の見た目なので規則を持たない。 */
.data-table td.tag-table__name--medium {
  padding-left: 2.8em;
}
.data-table td.tag-table__name--small {
  padding-left: 5.6em;
}
.tag-table__name--medium > a::before,
.tag-table__name--small > a::before {
  content: "└";
  display: inline-block;
  width: 1.4em;
  margin-left: -1.9em;
  font-family: var(--font-mono);
  color: var(--text-subtle);
}
.tag-table__level {
  font-size: 12px;
  color: var(--text-muted);
}
.tag-table__inuse {
  font-size: 12px;
  color: var(--text-subtle);
}
/* seed(SeedCatalog)管理タグの印(Issue 49) */
.tag-table__seed {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-subtle);
  vertical-align: 1px;
}
/* seed管理タグのリネーム時警告。細罫パネル + 左罫で注意を示す(Issue 49) */
.seed-warning {
  margin: 12px 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.7;
}
.seed-warning__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--danger);
}

/* --- モバイルのフォーム部品は 16px を下限にする ---
   iOS Safari はフォーム部品の文字が 16px 未満だとフォーカス時にページ全体を自動ズームし、
   戻らないまま横スクロールが発生する。狭幅に限り文字を一段上げて防ぐ。
   クラスで小さく上書きしている部品(ホームの検索欄・並び順・一括登録系)も同じ理由で列挙する。 */
@media (max-width: 767px) {
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  textarea,
  .hero-search__input,
  .admin-words-search__input,
  .sort-form__select,
  .bulk-annotation__meaning,
  .proposal-limit__input,
  .proposal-json__area,
  .bulk-input,
  .bulk-review__reading-input {
    font-size: 16px;
  }
}

/* --- 統計ページ(Issue 34 / docs/stats.md) ---------------------------------
   チャートはインライン SVG で描く。量の濃淡は --chart のチント(color-mix)、
   識別は色でなくラベルと位置で持つ。--chart のベタは「最」にだけ使う。 */

.stats-computed {
  margin: var(--space-4) 0 0;
  font-size: 13px;
  color: var(--text-subtle);
}

/* 数字の壁: 4群×5指標の定義リスト。罫線で仕切り、箱にしない */
.stats-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-7);
}

.stats-wall__heading {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.stats-wall__list {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.stats-wall__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 0;
  background: var(--surface);
}

.stats-wall__row dt {
  font-size: 13px;
  color: var(--text-muted);
}

.stats-wall__row dd {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-wall__unit {
  margin-left: 3px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-subtle);
}

@media (max-width: 1023px) {
  .stats-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 519px) {
  .stats-wall {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 章立て。章の区切りは細罫だけで作る */
.stats-section {
  margin-bottom: var(--space-7);
}

.stats-section__title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  color: var(--text-muted);
}

.stats-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.stats-section__header .stats-section__title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.stats-section__lead {
  margin: 0 0 var(--space-4);
  max-width: 46em;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
}

.stats-subheading {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 15px;
  color: var(--text-muted);
}

.stats-subheading:first-child {
  margin-top: 0;
}

/* 章内の注記・補足 */
.stats-hint,
.stats-covered {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--text-subtle);
}

/* 読み物キャプション。行頭に「※」を置く(欄外注の文法) */
.stats-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-notes li {
  position: relative;
  padding-left: 1.4em;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
}

.stats-notes li + li {
  margin-top: var(--space-2);
}

.stats-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: var(--text-subtle);
}

/* 幅の広いチャートは自身の中で横スクロールさせる(ページ全体は横スクロール禁止) */
.stats-scroll {
  overflow-x: auto;
}

/* セグメントボタン(文字数/モーラ・期間切替)。選択中は本文色(--text)のベタ(文字は反転) */
.segmented {
  display: inline-flex;
  margin-bottom: var(--space-4);
}

.segmented__button {
  margin-left: -1px;
  padding: 6px 18px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.segmented__button:first-child {
  margin-left: 0;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding-left: var(--space-5);
}

.segmented__button:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding-right: var(--space-5);
}

.segmented__button:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.segmented__button[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  position: relative;
  z-index: 1;
}

/* --- 頭文字と末尾文字: 50音表ヒートマップ(索引の kana-grid を再利用)と行×行マトリクス --- */
.stats-kana-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}

.stats-kana {
  flex: 1 1 340px;
  min-width: 0;
  overflow-x: auto;
}

.stats-matrix-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 767px) {
  .stats-matrix-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* マスの間隔は border-spacing の1本で持つ(上下左右とも4px)。
   基底の table { width: 100% } を打ち消して内容幅に縮め、列がマス幅(32px)より
   広がらないようにする(広がると横の間隔だけ開いてしまう) */
.sound-matrix {
  border-collapse: separate;
  border-spacing: 4px;
  width: auto;
}

.sound-matrix th {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.sound-matrix thead th {
  width: 32px;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--border-strong);
}

/* 行見出しは1文字。マスの左端に寄せて読めるよう右揃えにする */
.sound-matrix tbody th {
  padding: 0 8px 0 0;
  text-align: right;
}

.sound-matrix thead th.sound-matrix__corner {
  width: 96px;
  text-align: left;
}

.sound-matrix td {
  padding: 0;
}

/* セルのヒートは索引の kana-cell--heat と同じ式(--fill 0〜1) */
.sound-matrix__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 40% + 10%), var(--border-strong));
  background: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 45%), transparent);
  text-decoration: none;
}

a.sound-matrix__cell:hover {
  border-color: var(--chart);
  background: color-mix(in srgb, var(--chart) 14%, transparent);
}

.sound-matrix__cell--empty {
  border-color: var(--border);
  background: none;
}

/* 最多セルだけ数字を直書きする */
.sound-matrix__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
}

/* --- 統計ページ §3 波形塗りバー --- */
.wave-chart {
  display: block;
  width: min(100%, calc(var(--chart-width, 720px) * 1.3));
  height: auto;
}

.wave-chart__bar path {
  fill: color-mix(in srgb, var(--chart) 30%, transparent);
  transition: fill 0.15s;
}

.wave-chart__bar--mode path {
  fill: var(--chart);
}

.wave-chart__bar:hover path {
  fill: var(--chart);
}

/* リンクにならないまとめ棒(モーラの「30+」)。hover で色を変えない */
.wave-chart__bar--static:hover path {
  fill: color-mix(in srgb, var(--chart) 30%, transparent);
}

.wave-chart__bar--static.wave-chart__bar--mode:hover path {
  fill: var(--chart);
}

.wave-chart__baseline {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.wave-chart__value {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text-subtle);
}

.wave-chart__count {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text-muted);
}

.wave-chart__count--mode {
  fill: var(--chart);
}

/* --- 統計ページ §4 収録の推移(株価チャート式) --- */
.stats-current {
  margin: 0;
  white-space: nowrap;
}

.stats-current__total {
  font-weight: 400;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.stats-current__delta {
  margin-left: 8px;
  font-size: 13px;
  color: var(--success);
}

.timeline-chart {
  display: block;
  width: 100%;
  height: auto;
}

.timeline-chart__area {
  fill: color-mix(in srgb, var(--chart) 10%, transparent);
}

.timeline-chart__line {
  fill: none;
  stroke: var(--chart);
  stroke-width: 2;
}

.timeline-chart__dot {
  fill: var(--chart);
}

.timeline-chart__value {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text-muted);
}

.timeline-chart__value--now {
  fill: var(--chart);
}

.timeline-chart__vol {
  fill: var(--text-subtle);
}

.timeline-chart__vol--last {
  fill: var(--chart);
}

.timeline-chart__base {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.timeline-chart__date {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--text-subtle);
}

/* --- ジャンル別の語義数(Plotly サンバースト + 連動する積み上げ棒) ---
   描画は genre_sunburst_controller(Plotly)。ここでは器のサイズと見出しだけを持つ */
.genre-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  align-items: flex-start;
}

.genre-analysis__sunburst {
  flex: 0 1 460px;
  min-width: 300px;
}

.genre-analysis__sunburst-plot {
  width: 100%;
  height: 440px;
}

.genre-analysis__bars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  flex: 1 1 320px;
  min-width: 0;
}

.genre-analysis__label {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.genre-analysis__column {
  width: 76px;
  flex: none;
}

.genre-analysis__column-plot {
  width: 76px;
  height: 400px;
}

.genre-analysis__smalls {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 560px;
}

.genre-analysis__smalls .genre-analysis__label {
  text-align: left;
}

/* --- 統計ページ §6 語種の構成(ワッフル)とエンティティ型のツリーマップ ---
   ワッフルの塗りは順位で固定: 1位=--chart / 2位=--text の 65% / 3位=--chart のチント /
   4位=--bg / 5番目(その他)=--text の 20%。明度差で識別する(色相に依存しない)。
   この節(と §7)で「地」として --bg を塗ったり混ぜ先にしたりしているのは、--bg が地だった頃の名残。
   いまの本文の地は --surface(白)なので、4位のマスやツリーマップの下地は白より一段沈んで見える。
   --surface へ寄せると見た目が変わるので、直すなら見た目の変更として扱う */
.origin-case {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.waffle {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  grid-auto-rows: 18px;
  gap: 3px;
}

.waffle__cell {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
}

.waffle__cell--f1 {
  background: var(--chart);
  border-color: var(--chart);
}

.waffle__cell--f2 {
  background: color-mix(in srgb, var(--text) 65%, var(--bg));
  border-color: color-mix(in srgb, var(--text) 65%, var(--bg));
}

.waffle__cell--f3 {
  background: color-mix(in srgb, var(--chart) 35%, var(--bg));
  border-color: color-mix(in srgb, var(--chart) 55%, var(--border-strong));
}

.waffle__cell--f4 {
  background: var(--bg);
}

.waffle__cell--f5 {
  background: color-mix(in srgb, var(--text) 20%, var(--bg));
}

/* 同じ100マスを語種ごとに横へ並べ直した棒(凡例を兼ねる)。
   「名前 | マス… 件数」の3列。名前とマスの間は細罫で仕切る */
.waffle-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 260px;
  min-width: 0;
}

.waffle-bars__row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) max-content;
  column-gap: var(--space-3);
  align-items: center;
}

.waffle-bars__name {
  font-size: 14px;
  text-align: right;
}

.waffle-bars__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-strong);
}

.waffle-bars__cells .waffle__cell {
  width: 12px;
  height: 12px;
}

.waffle-bars__count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* エンティティ型のツリーマップ。面積 = 語義数(squarified、座標は%)。
   罫は各セルの 1px 枠の重なりで引く。塗りは --chart のチントの濃淡(混ぜ先は --bg) */
.entity-treemap {
  position: relative;
  /* 仮想キャンバス(StatsHelper::TREEMAP_WIDTH / _HEIGHT)と必ず同じ比にする。
     767px 以下だけは下の @media で 3 / 5 に引き伸ばす(面積の比は保たれる) */
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

/* マス同士の境目は細罫1本ぶんに留める(濃い枠だと隣り合う辺が二重になって重い) */
.entity-treemap__cell {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--chart) calc(var(--fill, 0) * 38% + 5%), var(--bg));
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

a.entity-treemap__cell:hover {
  border-color: var(--chart);
  text-decoration: none;
}

/* 小さすぎる型を畳んだ面。絞り込み先が無いのでリンクにせず、グレーの面で区別する */
.entity-treemap__cell--other {
  background: var(--bg-soft);
  color: var(--text-subtle);
}

.entity-treemap__name {
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
}

/* 級数の段は StatsHelper#treemap_scale の値(:normal / :small / :tiny)を補間した修飾子で付ける。
   --normal は既定の級数なので規則を持たない。
   小さいマスの名前は折り返さず「…」で切る(全文はマスの title に残る)。
   折り返させると、マスの高さが 2 行に足りないときに 2 行目が半分だけ見える。
   マスの高さは面積しだいで連続的に変わるので、行数を決め打ちしても防げない。 */
.entity-treemap__cell--small .entity-treemap__name,
.entity-treemap__cell--tiny .entity-treemap__name {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.entity-treemap__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: inherit;
}

/* 面が小さいマスは余白と級数を詰める。詰めないと名前が枠から溢れて読めなくなる。
   いちばん小さい段は名前だけ(件数は title に残す)。11px は design.md §2 の下限。 */
.entity-treemap__cell--small {
  padding: 4px 5px;
  gap: 1px;
}

.entity-treemap__cell--small .entity-treemap__name {
  font-size: 12px;
  line-height: 1.3;
}

.entity-treemap__cell--small .entity-treemap__count {
  font-size: 11px;
}

.entity-treemap__cell--tiny {
  padding: 3px 4px;
  gap: 0;
}

.entity-treemap__cell--tiny .entity-treemap__name {
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0;
}

.entity-treemap__cell--tiny .entity-treemap__count {
  font-size: 11px;
}

/* スマホでは横に入る文字数が足りず、小さいマスの名前が2〜3字で切れてしまう。
   足りないぶんを縦で稼ぎ(マスは縦長になる)、名前は折り返させる。 */
@media (max-width: 767px) {
  .entity-treemap {
    aspect-ratio: 3 / 5;
  }

  .entity-treemap__cell--small .entity-treemap__name,
  .entity-treemap__cell--tiny .entity-treemap__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* --- 統計ページ §7 母音スペクトルと頭子音 ---
   帯は --text の濃淡4段 + オ段のみ --chart のチントの5値。右端の段名で識別する。
   帯の混ぜ先と遷移グラフのノードの hover・フォーカスの --bg は、§6 と同じく --bg が地だった頃の名残 */
.vowel-spectrum {
  display: block;
  width: 100%;
  height: auto;
}

.vowel-spectrum__band--a {
  fill: var(--text);
}

.vowel-spectrum__band--i {
  fill: color-mix(in srgb, var(--text) 68%, var(--bg));
}

.vowel-spectrum__band--u {
  fill: color-mix(in srgb, var(--text) 44%, var(--bg));
}

.vowel-spectrum__band--e {
  fill: color-mix(in srgb, var(--text) 22%, var(--bg));
}

.vowel-spectrum__band--o {
  fill: color-mix(in srgb, var(--chart) 38%, var(--bg));
}

.vowel-spectrum__label {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text);
}

.vowel-spectrum__tick {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--text-subtle);
}

/* --- 統計ページ §7 母音の遷移グラフ ---
   層 = 拍位置、ノード = 母音、エッジ = 隣り合う層の全結合。
   太さと濃さで多寡を出す。色(--chart)を持つのは押して選んだ線だけ(最多の 1 本に塗るのはやめた。
   経緯は下の .vowel-graph__edge.is-selected) */
/* 「多い遷移だけ」の切替。checkbox + 兄弟セレクタで JS を持たない。
   図の右上に、極小のラベルと 26×14 のスイッチだけで置く(区画の主役は図なので、
   ボタンとして立たせない。2026-09-10 オーナー指示で墨反転のピルから作り替えた) */
.vowel-graph-panel__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}

.vowel-graph-panel__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--transition);
}

.vowel-graph-panel__switch:hover {
  color: var(--text-muted);
}

.vowel-graph-panel__switch-track {
  position: relative;
  width: 26px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: background var(--transition), border-color var(--transition);
}

.vowel-graph-panel__switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-subtle);
  transition: transform var(--transition), background var(--transition);
}

.vowel-graph-panel__toggle:checked ~ .vowel-graph-panel__head .vowel-graph-panel__switch-track {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

.vowel-graph-panel__toggle:checked ~ .vowel-graph-panel__head .vowel-graph-panel__switch-track::after {
  transform: translateX(12px);
  background: var(--surface);
}

.vowel-graph-panel__toggle:checked ~ .vowel-graph-panel__head .vowel-graph-panel__switch {
  color: var(--text-muted);
}

.vowel-graph-panel__toggle:focus-visible ~ .vowel-graph-panel__head .vowel-graph-panel__switch-track {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* 少ない遷移を伏せると、残った線の濃淡が読めるようになる */
.vowel-graph-panel__toggle:checked ~ .vowel-graph-frame .vowel-graph__edge.is-faint {
  display: none;
}

/* 伏せている最中でも、選んだ線は出す(押した手応えが無くなるため) */
.vowel-graph-panel__toggle:checked ~ .vowel-graph-frame .vowel-graph__edge.is-faint.is-selected {
  display: inline;
}

/* 押して選んだ鎖の線(何拍でもつなげる。選び方の正は docs/stats.md の統計ページ §7 の章)。
   色を持つのはこの「選んでいる状態」だけにする。最多の1本にも --chart を塗っていた時期が
   あるが(2026-09-10)、押しても消えない線が1本あることになり、選択の色と見分けが付かない。
   最多は太さで既に出ているうえ、注記に数字つきで書いてある。
   stroke-width の 3.2 は StatsHelper::GRAPH_MAX_EDGE(量から決める線の最大幅)と同じ値。
   選んだ線が最も太い線より細くならないよう、変えるなら両方を揃える。 */
.vowel-graph__edge.is-selected {
  stroke: var(--chart);
  stroke-opacity: 1;
  stroke-width: 3.2;
}

.vowel-graph__node.is-picked {
  fill: var(--chart);
  stroke: var(--chart);
}

/* 選んだ移り方と、その語の検索への導線。押すまでは出さない。
   display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す */
.vowel-graph-panel__readout[hidden] {
  display: none;
}

.vowel-graph-panel__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 段名の列(横スクロールしない)＋ 図(横スクロールする)。
   図は縮めない。75 個のノードと 350 本の線が入るので、縮めると拍位置も読めなくなる。
   拡縮させないのは、左の段名と段の y をずらさないためでもある。 */
.vowel-graph-frame {
  display: flex;
  align-items: flex-start;
}

.vowel-graph-frame .stats-scroll {
  flex: 1;
  min-width: 0;
}

.vowel-graph,
.vowel-graph__rows {
  display: block;
  flex: none;
}

.vowel-graph__edge {
  stroke: var(--text);
  stroke-linecap: round;
}

/* ノードは地の色で塗り、後ろを通る線を隠す(線がノードを貫くと層の区切りが読めない) */
.vowel-graph__node {
  fill: var(--surface);
  stroke: var(--text-muted);
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--transition), stroke var(--transition);
}

.vowel-graph__node:hover {
  fill: var(--bg);
  stroke: var(--text);
}

/* 既定のフォーカスリングは丸の外接矩形に黒い枠を描いて重いので、細い罫に置き換える
   (消しはしない。キーボードでも押せる要素なので、どこに居るかは必ず見せる) */
.vowel-graph__node:focus-visible {
  fill: var(--bg);
  stroke: var(--text);
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

.vowel-graph__label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text-muted);
}

.vowel-graph__tick {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-subtle);
}

/* 頭子音の横棒。行ラベル + グレーの棒(最多のみ --chart) + 件数 */
.stats-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.stats-bars__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: var(--space-3);
  padding: 4px 0;
  background: var(--surface);
}

.stats-bars__label {
  font-size: 13px;
}

.stats-bars__bar {
  display: block;
  height: 16px;
}

.stats-bars__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--radius-sm);
  background: var(--text-subtle);
  transition: background 0.15s;
}

/* 最多の色は DOM の先頭行に付ける。SiteStatistics#head_consonants が件数の多い順に返すことに頼る
   (ビューの棒の長さも同じ前提。同数のどれが先頭かは決まっていない) */
.stats-bars__row:first-child .stats-bars__fill {
  background: var(--chart);
}

.stats-bars__bar:hover .stats-bars__fill {
  background: var(--chart);
}

.stats-bars__count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}

/* --- 統計ページ §8 特徴の見本つきランキング --- */
.feature-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.feature-rank__row {
  padding: var(--space-3) 0;
  background: var(--surface);
}

.feature-rank__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.feature-rank__count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

/* 実例語の該当部分は淡いハイライトで示す(単語詳細の注釈と同じ文法) */
.feature-rank__example {
  font-weight: 400;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.feature-rank__target {
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  padding: 1px 3px;
}

.feature-rank__bar {
  height: 6px;
  margin-top: var(--space-2);
}

.feature-rank__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--radius-sm);
  background: var(--text-subtle);
}

/* 最多の色は DOM の先頭行に付ける。SiteStatistics#feature_ranking が件数の多い順に返すことに頼る */
.feature-rank__row:first-child .feature-rank__fill {
  background: var(--chart);
}

/* --- 出典・更新日の一行(フッター直前) --- */
.stats-colophon {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-subtle);
}

/* --- ランキング(/rankings): 切替タブ + 細罫パネルのランキング --- */
/* 種類が多いので目次を兼ねた切替タブにする(タグの文法・現在地は本文色(--text)のベタで文字は反転) */
.rank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.rank-tab {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 4px 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.rank-tab:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.rank-tab[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* 1枠 = 細罫のパネル(区切りは示すが、面としては主張させない) */
.rank-board {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin-bottom: var(--space-6);
}

/* 見出し行(題と 1 位の値)。罫は引かず、余白で順位表と分ける */
.rank-board__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.rank-board__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.rank-board__title {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

/* その板の最大値。縦罫で仕切って右肩に置く */
.rank-board__figure {
  flex: none;
  border-left: 1px solid var(--border);
  padding-left: var(--space-5);
  text-align: right;
}

.rank-board__more {
  font-size: 13px;
  color: var(--text-subtle);
  text-decoration: none;
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 行の区切りは border ではなく 1px の隙間で作る(design.md §5.3 と同じ組み)。
     親を罫の色で塗り、行を面の色で塗る */
  display: grid;
  gap: 1px;
  background: var(--border);
}

/* 順位 / 読み+見出し語 / 指標値 の3列。狭幅でも3列のまま折り返す */
.rank-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  /* 隙間が 1px しかないので角丸は持たせない(角が丸いと線が途切れて見える) */
  background: var(--surface);
  transition: background-color var(--transition);
}

.rank-row:hover {
  background: var(--bg-soft);
}

.rank-row__no {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 1.8em;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
}

/* 上位3位だけ文字を一段濃くする(同率1位が続いてもベタが連続しない) */
.rank-row__no--top {
  color: var(--text-muted);
}

.rank-row__no--first {
  color: var(--text);
}

/* 1位の「値」だけを本文色まで濃くして、板の中の頂点を示す */
.rank-row__number--first {
  color: var(--text);
}

.rank-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rank-row__reading {
  font-size: 12px;
  color: var(--text-subtle);
}

.rank-row__surface {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* 行のどこを押しても詳細へ(entry-row と同じ手口) */
.rank-row__surface::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rank-row__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.rank-row__number {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.rank-row__unit {
  font-size: 12px;
  color: var(--text-subtle);
}

.rank-colophon {
  margin-top: var(--space-6);
  font-size: 12px;
  color: var(--text-subtle);
}

/* ============================================================
   収録リクエスト(Issue 75)
   公開側から「この言葉を入れてほしい」を受け取るフォーム。
   入力欄と重複チェックの結果を1つの表に収め、送信ボタンの位置を動かさない。
   ============================================================ */

.request-frame {
  display: block;
}

.request-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}

.request-table thead th {
  text-align: left;
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

.request-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.request-table input[type="text"] {
  width: 100%;
}

/* 行番号は CSS カウンタで振る(行の増減に JS 無しで追随する) */
.request-rows {
  counter-reset: request-row;
}

.request-row {
  counter-increment: request-row;
}

.request-table__no {
  width: 2.5em;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.request-row .request-table__no::before {
  content: counter(request-row);
}

.request-table__remove {
  width: 3em;
  text-align: right;
}

/* 入力欄と読みの列で幅を分け合う(残りは番号列と削除列の固定幅) */
.request-table__surface,
.request-table__reading {
  width: 50%;
}

/* 表に見出し行があるので、各セルのラベルは狭幅のときだけ見せる */
.request-table__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 読みの字数カウンタ。収録基準を満たしたときだけ緑にする */
.reading-counter {
  margin: var(--space-1) 0 0;
  min-height: 1.4em;
  font-size: 12px;
  color: var(--text-subtle);
}

.reading-counter--ok {
  color: var(--success);
}

/* 重複チェックの判定。その語の入力欄の真下に置く。
   既に載っている・似ている場合だけ赤枠で引き止め、未収録は枠なしで静かに伝える */
/* 判定の kind(WordRequestDuplicateCheck の :exact / :similar / :none)を補間して修飾子を付ける。
   --none(未収録)は枠なしで静かに伝える既定の見た目なので、規則を持たない */
.dup-note {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--text-subtle);
}

.dup-note--exact,
.dup-note--similar {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-2);
  color: var(--danger);
}

.dup-note__verdict {
  display: block;
}

.dup-note__link {
  display: inline-block;
  margin-top: 2px;
  margin-right: var(--space-2);
  font-size: 14px;
  font-weight: 400;
}

/* 照合中だけ出す(turbo が turbo-frame に busy を立てる) */
.request-table__loading {
  display: none;
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--text-subtle);
}

.request-frame[busy] .request-table__loading,
.request-frame[aria-busy="true"] .request-table__loading {
  display: block;
}

/* 照合中は前回の判定を沈め、表示が古いことを示す */
.request-frame[busy] .request-table,
.request-frame[aria-busy="true"] .request-table {
  opacity: 0.5;
}

.request-table__notice {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  color: var(--danger);
}

.request-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.request-actions__limit {
  font-size: 12px;
  color: var(--text-subtle);
}

/* 重複チェックは送信の手前に置く補助操作なので、主 CTA から離して右へ寄せる */
.request-actions__check {
  margin-left: auto;
}

/* ハニーポット: 人間には見えず、タブ移動でも触れない欄 */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信前のお願い(静かに置く) */
.request-notes {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.request-notes ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
}

/* 狭幅では表を組まず、1行 = 1枚の面に積む(横スクロールを作らない) */
@media (max-width: 700px) {
  .request-table thead {
    display: none;
  }

  .request-table,
  .request-table tbody,
  .request-table tr,
  .request-table td {
    display: block;
  }

  .request-row {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-3) var(--space-2);
    margin-bottom: var(--space-3);
  }

  .request-table td {
    padding: 0 0 var(--space-3);
    border-bottom: none;
  }

  .request-table__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .request-table__no,
  .request-table__surface,
  .request-table__reading {
    width: auto;
  }

  .request-table__no {
    padding-bottom: var(--space-2);
  }

  .request-table__remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: auto;
    padding: 0;
  }

  .request-actions__check {
    margin-left: 0;
  }
}

/* --- 管理: 収録リクエスト一覧(Issue 75) --- */

.admin-requests-table__registered {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 6px;
  border: 1px solid currentcolor;
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--success);
  white-space: nowrap;
}

.admin-requests-table__len,
.admin-requests-table__at,
.admin-requests-table__memo {
  font-size: 12px;
  color: var(--text-subtle);
}

.admin-requests-table__len {
  margin-left: var(--space-2);
}

.admin-requests-table__sent {
  white-space: nowrap;
}

.admin-requests-table__ip {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
}

.admin-requests-table__meta {
  margin-top: var(--space-1);
  font-size: 11px;
}

.admin-requests-table__meta summary {
  font-size: 12px;
  color: var(--text-subtle);
  cursor: pointer;
}

.admin-requests-table__meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-2);
  margin: var(--space-1) 0 0;
  max-width: 32em;
}

.admin-requests-table__meta dt {
  font-size: 12px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.admin-requests-table__meta dd {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.admin-requests-table__status {
  font-size: 12px;
  white-space: nowrap;
}

/* 未着手だけ本文色(--text)で残して残件を目立たせる。処理済みの3状態は --text-subtle に沈める */
.admin-requests-table__status--pending {
  color: var(--text);
  font-weight: 400;
}

.admin-requests-table__status--accepted,
.admin-requests-table__status--on_hold,
.admin-requests-table__status--rejected {
  color: var(--text-subtle);
}

.admin-requests-table__memo {
  display: block;
  margin-top: 2px;
  white-space: normal;
}

/* 一括操作パネル */
.bulk-requests {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.bulk-requests__fields {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.bulk-requests__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bulk-requests__field--memo {
  flex: 1 1 320px;
}

.bulk-requests__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-subtle);
}

.bulk-requests__hint {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== 統計ページ §1 ワードクラウド(Issue 78) =====
   よく現れる形態素を「活字の大きさ＝頻度」で組む。最頻の1語を中心に据え、
   残りはばらばらに置いて隙間を詰める(オーナー指示 2026-08-11 / 2026-09-10)。
   100 件を余白が見えないくらい詰めて組む(統計ページ §1)。
   配置は MorphemeCloud が仮想平面で決め、viewBox 付き SVG で拡縮する。 */
.word-cloud {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.word-cloud__svg {
  display: block;
  width: 100%;
  height: auto;
}

.word-cloud__text {
  fill: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  transition: fill var(--transition);
}

/* 語ごとの色(2026-09-10 オーナー指示)。サイト唯一の多色で、色相は8つ。
   割り当ては語そのものから決まる(MorphemeCloud#palette_for)ので、
   収録が増えても同じ語は同じ色のまま。値と実測は tokens.css / docs/design.md §5.10 */
.word-cloud__text--c1 { fill: var(--cloud-1); }
.word-cloud__text--c2 { fill: var(--cloud-2); }
.word-cloud__text--c3 { fill: var(--cloud-3); }
.word-cloud__text--c4 { fill: var(--cloud-4); }
.word-cloud__text--c5 { fill: var(--cloud-5); }
.word-cloud__text--c6 { fill: var(--cloud-6); }
.word-cloud__text--c7 { fill: var(--cloud-7); }
.word-cloud__text--c8 { fill: var(--cloud-8); }

/* 大域の a に付く下線は図の中では邪魔なので消す(押せることは大きさと hover で伝える) */
.word-cloud__link {
  cursor: pointer;
  text-decoration: none;
}

/* hover は色を落として細い下線を引く(サイト全体のリンクと同じ作法)。
   語ごとに色が付いたぶん、押している1語だけ墨に戻ると狙いがはっきりする */
.word-cloud__link:hover .word-cloud__text,
.word-cloud__link:focus-visible .word-cloud__text {
  fill: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

/* =====================================================================
 アノテーション・コンソール(管理者専用)。docs/design.md 準拠。
 本編と同じ器(白い面・細罫・角丸)のまま、
 1画面で多くを捌けるよう級数と余白だけを詰めた高密度レイアウト。
 このファイルの色は無彩色のトークンと --bg-tint(選択中の淡い面)、状態の --success / --danger だけ。
 管理画面の青(--admin-accent)は admin.css がリンクやボタンに付ける。
 チップ選択は極力 JS レス(隠し input + :has() で状態表現)。
 ===================================================================== */

/* スマホ・タブレットでのダブルタップ拡大を無効化し、連続タップでサクサク
 アノテーションを流せるようにする。ピンチ操作での拡大は残す(アクセシビリティ配慮)。 */
.ann { position: relative; touch-action: manipulation; }

/* 上部ステータス */
.ann-bar {
 display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
 border-bottom: 1px solid var(--border);
 padding-bottom: var(--space-2); margin-bottom: var(--space-4);
}
.ann-bar__counter { font-size: 13px; color: var(--text-muted); }
.ann-bar__counter b { color: var(--text); font-weight: 400; }
.ann-bar__counter .rest { color: var(--text); }
.ann-bar__legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-subtle); }
.ann-bar__legend key { font-family: var(--font-mono); color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 1px 5px; margin-right: 6px; }

/* 提案キューの絞り込み・並べ替え(Issue 67)。小さなリンク、選択中は本文色(--text) */
.ann-queue-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: var(--space-4); }
.ann-queue-filter__label { color: var(--text-subtle); }
.ann-queue-filter__link { color: var(--text-muted); text-decoration: none; }
.ann-queue-filter__link:hover { color: var(--text); text-decoration: underline; }
.ann-queue-filter__link.is-on { color: var(--text); font-weight: 400; }
.ann-queue-filter__sep { color: var(--border-strong); }

/* 対象語 */
.ann-eyebrow { font-size: 12px; color: var(--text-subtle); display: flex; gap: 12px; align-items: center; }
.ann-eyebrow .no { font-family: var(--font-mono); color: var(--text-muted); }
.ann-word { font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.3; margin: var(--space-1) 0 2px; overflow-wrap: anywhere; }
.ann-word-meta { font-size: 12px; color: var(--text-subtle); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: baseline; }
/* 1語の再調査用 JSON へ(Claude Code の /reannotation に渡す) */
.ann-word-meta__reresearch { margin-left: auto; color: var(--text); text-decoration: none; }
.ann-word-meta__reresearch:hover { text-decoration: underline; }

/* 用語解説(Issue 39)。特徴選択の脇に置く控えめな開閉パネル(hover 限定にしない) */
.ann-glossary { margin-bottom: var(--space-2); }
.ann-glossary__summary { cursor: pointer; font-size: 12px; color: var(--text-subtle); padding: 2px 0; }
.ann-glossary__summary:hover { color: var(--text); }
.ann-glossary[open] .ann-glossary__summary { color: var(--text); }
.ann-glossary__list { margin: var(--space-2) 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); padding: var(--space-3); max-height: 320px; overflow-y: auto; }
.ann-glossary__item { display: grid; grid-template-columns: 120px 1fr; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ann-glossary__item:last-child { border-bottom: 0; }
.ann-glossary__item dt { font-size: 12px; font-weight: 400; color: var(--text); padding-top: 2px; }
.ann-glossary__item dd { margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-muted); }
.ann-glossary__examples { display: block; font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
@media (max-width: 560px) {
 .ann-glossary__item { grid-template-columns: 1fr; }
}

/* Claude の提案パネル(Issue 38)。左の太い罫(3px の --text)で「機械の下書き」であることを示す */
.ann-proposal { border: 1px solid var(--border); border-left: 3px solid var(--text); border-radius: var(--radius); background: var(--bg-soft); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.ann-proposal__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-2); }
.ann-proposal__head .spacer { flex: 1; }
.ann-proposal__title { font-size: 12px; font-weight: 400; color: var(--text); }
.ann-proposal__confidence { font-size: 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 1px 8px; color: var(--text-muted); }
.ann-proposal__confidence--low { color: var(--danger); border-color: var(--danger); }
/* 反映済み/見送りの状態バッジ(注釈済みの語を見直しているとき)。--applied(反映済み)は基本の
   .ann-proposal__status(--success)のままなので規則を持たない。
   確信度の修飾子(.ann-proposal__confidence--*)は提案 JSON の値をそのまま補間していて、規則があるのは
   --low だけ。--high・--medium と想定外の値は既定の見た目になる(取り込み側は値域を検証しない) */
.ann-proposal__status { font-size: 11px; border: 1px solid var(--success); border-radius: var(--radius-pill); padding: 1px 8px; color: var(--success); }
.ann-proposal__status--dismissed { color: var(--text-subtle); border-color: var(--border-strong); }
/* 立項スコア(Issue 39)。3以下は赤でオーナー判断を促す */
.ann-proposal__entry { font-size: 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 1px 8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ann-proposal__entry--concern { color: var(--danger); border-color: var(--danger); }
.ann-proposal__notes--entry { color: var(--danger); }
/* 複数語義(同音異義語・Issue 41)。語義ごとに細罫で区切り、小さく語義番号を打つ */
.ann-proposal__senses-note { font-size: 12px; color: var(--text-muted); margin: 0 0 var(--space-2); }
.ann-proposal__sense { border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: var(--space-2); }
.ann-proposal__sense:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.ann-proposal__sense-no { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-bottom: 4px; }
.ann-proposal__grid { display: grid; grid-template-columns: 92px 1fr; gap: 4px 18px; margin: 0; }
.ann-proposal__grid dt { font-size: 12px; color: var(--text-subtle); padding-top: 3px; }
.ann-proposal__grid dd { margin: 0; font-size: 14px; }
.ann-proposal__grid .sep { color: var(--text-subtle); margin: 0 4px; }
.ann-proposal__new { font-size: 11px; color: var(--text); border: 1px solid var(--text); border-radius: var(--radius-pill); padding: 0 8px; margin-left: 6px; }
/* 新設候補のワンタップ作成ボタン(Issue 66)。バッジと同じ見た目で、hover で塗る */
.ann-proposal__new-form { display: inline; margin: 0; }
/* デッキでは input[type=submit] で描く(フォームを入れ子にできないため)。
   ボタン要素と同じ見た目になるよう、書体と字間は本文から継がせる */
.ann-proposal__new--btn { background: transparent; cursor: pointer; line-height: 1.6; font-family: inherit; letter-spacing: inherit; }
.ann-proposal__new--btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
/* 提案パネルの特徴(該当部分つき)。1件ずつ縦に積み、該当部分は小さく添える */
.ann-proposal__feature { display: block; margin: 2px 0; }
.ann-proposal__feature b { font-weight: 400; }
.ann-proposal__feature-target { font-size: 12px; color: var(--text-subtle); margin-left: 8px; }
.ann-proposal__notes { font-size: 13px; color: var(--text-muted); margin: var(--space-2) 0 0; }

/* スティッキー引き継ぎ(Issue 37)。アクションバー左端の小さなトグル */
.ann-sticky { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.ann-sticky:has(.ann-sticky__input:checked) { color: var(--text); }

/* 表層形の訂正(Issue 36: 編集画面をコンソールへ統合)。誤字直し用の控えめな1行 */
.ann-surface { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: var(--space-3) 0 0; }
.ann-surface__label { font-size: 12px; color: var(--text-subtle); }
/* 表層形は textarea。長い語(例: 50字超)も折り返して全文が見えるよう全幅・自動高 */
.ann-surface__input {
 flex: 1 1 100%; width: 100%; box-sizing: border-box;
 font-weight: 400; font-size: 16px; line-height: 1.5;
 padding: 6px 10px; margin: 0; resize: none; field-sizing: content;
 min-height: 2em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ann-surface__note { font-size: 12px; color: var(--text-subtle); }

/* 語義パネル */
.ann-sense { border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4) var(--space-5) var(--space-5); margin-top: var(--space-5); }
/* 最低限の項目(読み・語種・ジャンル・品詞・エンティティ)が揃った語義。
 保存の可否とは無関係な、注釈が行き届いたことの目印(sense-completeness)。
 番号のバッジを緑のベタにする(.ann-sense は枠を持たない)。 */
.ann-sense.is-complete .ann-sense__stamp { background: var(--success); color: var(--bg); }
.ann-sense__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ann-sense__stamp { background: var(--bg-soft); color: var(--text-muted); border-radius: var(--radius-pill); font-size: 12px; font-weight: 400; padding: 3px 12px; }
.ann-sense__del { font-size: 12px; color: var(--text-subtle); background: transparent; border: 0; cursor: pointer; padding: 6px 8px; }
.ann-sense__del:hover { color: var(--danger); }

/* ラベル列 + 値列 */
.ann-row { display: grid; grid-template-columns: 92px 1fr; gap: 4px 18px; align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.ann-row:last-child { border-bottom: 0; }
.ann-row__label { font-size: 12px; color: var(--text-subtle); padding-top: 8px; }

/* 読みも textarea。長い読み(例: 70字超)を折り返して全文表示 */
.ann-reading {
 width: 100%; box-sizing: border-box; display: block;
 font-size: 16px; line-height: 1.5;
 padding: 6px 10px; margin: 0; resize: none; field-sizing: content;
 min-height: 2em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ann-derived { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-2); font-size: 12px; color: var(--text-subtle); }
.ann-derived b { font-family: var(--font-mono); color: var(--text); font-weight: 400; }

/* チップ(隠し input + :has)。見た目用のクラスだが、JS も参照する: .ann-chip は genre_picker_controller.js が
   作って探し、.ann-chip__input は inline_add_controller.js が探す。改名するなら JS も直す */
.ann-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ann-chip {
 position: relative; display: inline-flex; align-items: center; gap: 6px;
 border-radius: var(--radius-pill);
 color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-strong);
 font-family: inherit; font-size: 13.5px; line-height: 1.3;
 padding: 6px 14px; min-height: 32px; cursor: pointer; user-select: none;
 transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ann-chip:hover { background: var(--bg-soft); border-color: var(--text-subtle); color: var(--text); }
.ann-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ann-chip:has(.ann-chip__input:checked) { background: var(--text); border-color: var(--text); color: var(--bg); }
.ann-chip:has(input[type="radio"].ann-chip__input:checked)::before { content: "\25CF"; font-size: 8px; color: currentColor; }
.ann-chip:has(.ann-chip__input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
/* ジャンルのボタン型チップ(JS で is-on を付与) */
.ann-chip.is-on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* その場追加。.ann-add(と __btn・__input・__msg)は genre_picker_controller.js が作り、.ann-add__msg は
   inline_add_controller.js も作って探す(見た目用のクラスを JS も参照する。改名するなら JS も直す) */
.ann-add { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ann-add__btn { font-size: 12px; color: var(--text-muted); background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; min-height: 32px; }
.ann-add__btn:hover { border-color: var(--text); color: var(--text); }
.ann-add__input { width: 9em; font-size: 14px; padding: 4px 8px; }
/* その場追加の結果(失敗の理由 / 既存を選んだ旨)。黙って何も起きないのが一番困るので必ず出す */
.ann-add__msg { font-size: 12px; line-height: 1.6; color: var(--text-subtle); max-width: 26em; }
.ann-add__msg.is-error { color: var(--danger); }

/* ジャンル 段階表示 */
.ann-genre__current { font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ann-genre__current .sep { color: var(--text-subtle); }
.ann-genre__change { font-size: 12px; color: var(--text); background: transparent; border: 0; cursor: pointer; text-decoration: underline; }
.ann-genre__level { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
/* display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す
 (ジャンルが確定済みの語では大・中・小の選択肢を出さず、「変更」で選び直しに入る) */
.ann-genre__level[hidden] { display: none; }
.ann-genre__tag { font-size: 12px; color: var(--text-subtle); min-width: 1.4em; }
.ann-genre__level .ann-chips { flex: 1; }

/* 特徴: 範囲タップ */
.ann-feature { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4) var(--space-4); margin-bottom: var(--space-3); }
.ann-feature__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.ann-feature__head .t { font-size: 12px; color: var(--text-subtle); }
.ann-strip-label { font-size: 12px; color: var(--text-subtle); margin: var(--space-3) 0 var(--space-1); }
.ann-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.ann-cell { font-family: inherit; font-size: 15px; line-height: 1; text-align: center; min-width: 1.6em; padding: 9px 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.ann-strip--reading .ann-cell { font-size: 14px; }
.ann-cell:hover { border-color: var(--text); color: var(--text); }
.ann-cell.is-sel { background: var(--text); color: var(--bg); border-color: var(--text); }
.ann-cell.is-start { background: var(--bg-tint); color: var(--text); border-color: var(--text); }
.ann-feature__result { font-size: 12px; color: var(--text-muted); margin-top: var(--space-2); }

/* 別表記(行追加・テキスト) */
.ann-subrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ann-subrow input { flex: 1 1 8em; min-width: 6em; }
.ann-subrow .ann-remove { font-size: 15px; line-height: 1; color: var(--text-subtle); background: transparent; border: 0; cursor: pointer; padding: 6px; }
.ann-subrow .ann-remove:hover { color: var(--danger); }

.ann-addrow { align-self: flex-start; margin-top: var(--space-2); font-size: 13px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px 14px; cursor: pointer; min-height: 32px; }
.ann-addrow:hover { background: var(--bg-soft); border-color: var(--text-subtle); }

/* 「特徴なしで確定」(Issue 76)。特徴を足す導線より控えめに、下に添える */
.ann-features__review { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.ann-features__review-hint { font-size: 12px; color: var(--text-subtle); }

/* 語義を追加 */
.ann-add-sense { display: block; width: 100%; margin-top: var(--space-5); font-size: 13px; background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-3); cursor: pointer; }
.ann-add-sense:hover { background: var(--bg-soft); border-color: var(--text); color: var(--text); }
.ann-add-sense small { display: block; font-size: 11px; color: var(--text-subtle); margin-top: 3px; }

/* 最下部アクションバー */
.ann-actionbar { position: sticky; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--border); padding: var(--space-3) 0; margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ann-actionbar .spacer { flex: 1; }
/* 主ボタン(保存)は行が折り返しても必ず右端に置く。スマホでは項目が2〜3行に折り返し、
   何もしないと画面下端の中ほどに保存ボタンが来る。iOS の画面下端ジェスチャ
   (Apple Intelligence の呼び出し)と重なって押しづらいため、右端へ寄せる。
   1行に収まるときは .spacer が余白を吸い切るので、この auto は効かない(見た目は不変) */
.ann-actionbar .btn--primary { margin-left: auto; }
.ann-actionbar .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); margin-left: 6px; }
.ann-actionbar .btn--primary .kbd { color: var(--bg); opacity: 0.75; }

/* 完了画面 */
.ann-done { padding: var(--space-6) 0; }
.ann-done__lead { font-weight: 400; font-size: clamp(20px, 3vw, 26px); }

@media (max-width: 560px) {
 .ann-row { grid-template-columns: 1fr; gap: 6px; }
 .ann-row__label { padding-top: 0; }
 .ann-bar__legend { display: none; }
}

/* 提案の一括承認プレビュー表(Issue 65) */
.bulk-approval { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 13px; }
.bulk-approval th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 400; border-bottom: 1px solid var(--border-strong); padding: 6px 10px; white-space: nowrap; }
.bulk-approval td { border-bottom: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
.bulk-approval__no { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.bulk-approval__word { font-size: 14px; font-weight: 400; }
.bulk-approval__word a { color: var(--text); text-decoration: none; }
.bulk-approval__word a:hover { color: var(--text); text-decoration: underline; }
.bulk-approval__genre { font-size: 12px; color: var(--text-muted); }
@media (max-width: 700px) {
 .bulk-approval, .bulk-approval tbody, .bulk-approval tr, .bulk-approval td { display: block; }
 .bulk-approval thead { display: none; }
 .bulk-approval tr { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 4px; margin-bottom: var(--space-2); }
 .bulk-approval td { border: 0; padding: 3px 8px; }
}

/* =====================================================================
 アノテーション・デッキ(まとめてアノテーション)
 10件を横一列に並べ、スマホは横スワイプ(scroll-snap)、PC は矢印/ドット/←→キーで送る。
 見た目は1語コンソールの部品(ann-*)をそのまま使い、ここは並べ方と現在地の表示だけ。
 ===================================================================== */
.deck { position: relative; touch-action: manipulation; }
.deck .ann-bar .spacer { flex: 1; }
.deck-bar__link { font-size: 12px; color: var(--text); text-decoration: none; }
.deck-bar__link:hover { text-decoration: underline; }

/* カード送り(現在地・ドット・矢印) */
.deck-nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); }
.deck-nav__arrow { font-size: 13px; line-height: 1; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); min-width: 40px; height: 32px; cursor: pointer; }
.deck-nav__arrow:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--text-subtle); }
.deck-nav__arrow:disabled { border-color: var(--border); color: var(--text-subtle); cursor: default; }
.deck-nav__position { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.deck-nav__dots { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
/* ドット = 何枚目か。完了(全語義が is-complete)は緑のベタ、表示中は --bg-tint の淡い面と濃い枠 */
.deck-dot { font-size: 11px; line-height: 1; min-width: 26px; height: 26px; padding: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-subtle); cursor: pointer; }
.deck-dot:hover { border-color: var(--text-subtle); color: var(--text); }
.deck-dot.is-done { background: var(--success); border-color: var(--success); color: var(--bg); }
.deck-dot.is-on { background: var(--bg-tint); border-color: var(--text); color: var(--text); font-weight: 400; }
.deck-dot.is-on.is-done { background: var(--success); color: var(--bg); border-color: var(--text); }

.deck-lead { font-size: 13px; line-height: 1.8; color: var(--text-muted); margin: 0 0 var(--space-3); }
.deck-glossary { margin: var(--space-3) 0 0; }

/* カードの並び。トラックだけが横スクロールし、ページ本体は横に流れない。
 カードは高さを揃えない(align-items: flex-start)ので、トラックの縦スクロールは出ず、
 長いカードはページごと縦にスクロールする。 */
.deck-track {
 position: relative; display: flex; align-items: flex-start; gap: var(--space-6);
 overflow-x: auto; overscroll-behavior-x: contain;
 scroll-snap-type: x mandatory; scrollbar-width: none;
 padding: var(--space-4) 0 var(--space-2);
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* 見出し語は1語コンソールより一段小さく(カード内で完結させるため) */
.deck-card .ann-word { font-size: clamp(21px, 3.4vw, 28px); }
.deck-card__count { margin-left: auto; color: var(--text-muted); }

/* 提案の要約(既定は畳む)。反映は読み込み時に済んでいるので、ここは根拠の確認用 */
.deck-proposal { margin-top: var(--space-3); }
.deck-proposal__summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 4px 0; }
.deck-proposal__summary:hover .deck-proposal__title { text-decoration: underline; }
.deck-proposal__title { font-size: 12px; font-weight: 400; color: var(--text); }
.deck-proposal .ann-proposal { margin-top: var(--space-2); }

/* まとめ保存バーの進捗(n / m 完了)。全部そろったら緑にする */
.deck-progress { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.deck.is-all-complete .deck-progress { color: var(--success); font-weight: 400; }

@media (max-width: 560px) {
 .deck-track { gap: var(--space-5); }
 .deck-nav__dots { order: 3; flex-basis: 100%; }
}
/* =====================================================================
 登録予定単語(管理者専用): 仕分け → 拡張 → 表記 → 登録待ち。docs/design.md §10 準拠。
 作業画面なので「拾わせる」組み。色は状態と操作にだけ使う:
   処理の色 … 拡張 = --admin-accent / 保留 = --admin-warn / 除外 = --danger / 採用 = 色なし(淡い面)
 数百行を上から流し見て、例外の行(保留・除外)だけが行の左の線で浮くようにする。拡張は upload した語の
 既定で大半の行が選ぶので線を持たず、処理の選択の塗りだけで示す(左端が青の縦帯になって例外が埋もれないように)。
 並んだ要素どうしの罫は gap: 1px の隙間で見せる(親を罫の色で塗り、子を面の色で塗る)。
 ===================================================================== */

/* --- 4段の見出し(仕分け・拡張・表記・登録待ち)。数字を主役にする --- */
.cand-steps {
  margin: 0 0 var(--space-5);
}

.cand-steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
}

.cand-steps__item {
  display: flex;
  background: var(--surface);
}

/* 段そのものがリンク。上端の罫で現在地を示す(管理ナビと同じくアクセント色) */
.cand-steps__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 3px solid transparent;
}

.cand-steps__link:hover {
  background: var(--bg-soft);
}

.cand-steps__link[aria-current="page"] {
  border-top-color: var(--admin-accent);
  background: var(--bg-tint);
}

.cand-steps__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cand-steps__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}

.cand-steps__name {
  font-size: 14px;
}

.cand-steps__count {
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cand-steps__unit {
  margin-left: 2px;
  font-size: 12px;
  color: var(--text-subtle);
}

/* 語の無い段は数字を沈める(どこに語が溜まっているかを一目で取れるように) */
.cand-steps__link.is-empty .cand-steps__count {
  color: var(--text-subtle);
}

/* その段で次にすること。ローカルで回すスキルは名前(/expand)をそのまま出す */
.cand-steps__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

/* ブラウザで確かめる語が待っている(表記の確認待ち) */
.cand-steps__todo {
  font-size: 12px;
  color: var(--admin-warn);
}

.cand-steps__aside {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: 13px;
}

.cand-steps__aside a[aria-current="page"] {
  color: var(--text);
}

/* --- 各画面の頭 --- */
.cand-head {
  margin-bottom: var(--space-4);
}

.cand-head .page-title {
  margin-bottom: var(--space-1);
}

.cand-head__lead {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.cand-empty {
  margin: var(--space-3) 0;
  color: var(--text-subtle);
}

/* --- 追加(貼り付け)。畳めば1行 --- */
.cand-intake {
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  background: var(--surface);
}

.cand-intake__summary {
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  color: var(--admin-accent);
  cursor: pointer;
}

.cand-intake[open] .cand-intake__summary {
  border-bottom: 1px solid var(--border);
}

.cand-intake__form {
  padding: var(--space-3);
}

.cand-intake__text,
.cand-import__text {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

/* --- 段の中の手順(書き出す → 取り込む → 確かめる)。罫で区切って上から順に置く --- */
.cand-steps-local {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cand-step {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.cand-step__title {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  font-weight: 400;
}

.cand-step__hint {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
}

/* 一度に渡す語数(拡張の書き出しを数十語ずつに絞る)。書き出しの上に1行で置く */
.cand-limit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cand-limit__label,
.cand-limit__unit {
  font-size: 13px;
  color: var(--text-muted);
}

.cand-limit__input {
  width: 6em;
}

.cand-limit__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
}

/* 書き出し: コピーのボタンが主役。中身は必要なときだけ開く */
.cand-export {
  padding: var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
}

.cand-export__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cand-export__count {
  margin: 0;
  font-size: 14px;
}

/* 件数の文が長くなっても(「100 語のうち、先頭の 30 語」)ボタンは縮めない */
.cand-export__copy {
  flex: none;
}

/* 使用元はビューではなく ja.yml(admin.word_candidates.export の count_html・count_limited_html)。
   ビューだけを grep すると未使用に見える */
.cand-export__num {
  margin: 0 2px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.cand-export__how {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.cand-export__how code,
.cand-import__label code {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cand-export__peek {
  margin-top: var(--space-2);
}

.cand-export__peek summary {
  font-size: 12px;
  color: var(--text-subtle);
  cursor: pointer;
}

.cand-export__text {
  width: 100%;
  margin-top: var(--space-2);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
}

/* 取り込み */
.cand-import__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
}

.cand-import__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.cand-import__after {
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
}

/* --- 確認の一覧 --- */

/* 連続タップでダブルタップ拡大が起きないようにする(ピンチは残す。アノテーションと同じ) */
.cand-review {
  touch-action: manipulation;
}

/* 帯: 絞り込みとキーボードの案内 */
.cand-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.cand-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cand-filter__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 4px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.cand-filter__chip:hover {
  color: var(--text);
}

.cand-filter__chip[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--bg-soft);
  color: var(--text);
}

.cand-filter__count {
  font-size: 12px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.cand-toolbar__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
}

.cand-toolbar__keys kbd,
.cand-choice__key {
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}

/* タッチの端末・狭い幅ではキーボードの案内を出さない */
@media (hover: none), (max-width: 767px) {
  .cand-toolbar__keys {
    display: none;
  }
}

/* 一覧の器。行・系統の境目は 1px の隙間(親の罫の色)で見せる */
.cand-list,
.cand-family {
  display: grid;
  gap: 1px;
  background: var(--border);
}

.cand-list {
  border: 1px solid var(--border);
}

/* display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す */
.cand-family[hidden],
.cand-row[hidden] {
  display: none;
}

/* 系統の見出し。面を一段沈め、系統の区切りにする */
.cand-family__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--space-3);
  padding: 6px var(--space-3);
  background: var(--bg-soft);
}

.cand-family__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font-size: 13px;
}

.cand-family__count {
  font-size: 12px;
  color: var(--text-subtle);
}

/* 「この系統を選ぶ」。系統の行をすべて選んでいるときは押された状態にする */
.cand-family__action {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cand-family__action:hover {
  border-color: var(--text-subtle);
  color: var(--text);
}

.cand-family__action[aria-pressed="true"] {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

.cand-family__note {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* 行: 左端に選択の列、真ん中に語、右に処理の選択。行のどこを押しても選べる(row-select)。
   左端の太い線で、例外の処理(保留・除外)を選んである行を示す */
.cand-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  padding-right: var(--space-3);
  border-left: 3px solid transparent;
  background: var(--surface);
  cursor: pointer;
  /* キーボードで移ったとき、下端のバーに隠れないよう余白を見込んで見せる */
  scroll-margin: var(--space-6) 0 112px;
}

.cand-row .cand-choice {
  margin: var(--space-2) 0;
}

.cand-row--child .cand-row__word {
  padding-left: 20px;
}

.cand-row[data-decision="hold"] {
  border-left-color: var(--admin-warn);
}

.cand-row[data-decision="reject"] {
  border-left-color: var(--danger);
}

.cand-row[data-decision="reject"] .cand-word__surface {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* 選んでいる行(row-select)。表の hover の面(--bg-soft)と見分けられるよう、アクセント色を薄く混ぜた面にする */
.cand-row[data-selected="true"],
.cand-table tbody tr[data-selected="true"] {
  background: color-mix(in srgb, var(--admin-accent) 14%, var(--surface));
}

/* キーボードで今いる行(処理のラジオにフォーカスがある行)。選んでいる行の面と重ならないよう、枠で示す */
.cand-row:has(.cand-choice input:focus-visible) {
  outline: 2px solid var(--admin-accent);
  outline-offset: -2px;
}

/* 語の部分(turbo-frame) */
.cand-row__word {
  display: block;
  min-width: 0;
  padding: var(--space-2) 0;
}

/* --- 行の選択の列(仕分け・表記の確認・すべての語で共用。row-select) ---
   行の高さいっぱい・幅 44px を当たり判定にする。checkbox は列いっぱいに透明に敷き、印は描き起こす。
   なぞって範囲を選ぶため、この列ではタッチでスクロールさせない。
   .row-check は row_select_controller.js も探す(見た目用のクラスを JS も参照する。改名するなら JS も直す) */
.row-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.row-check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.row-check__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
}

.row-check:hover .row-check__box {
  border-color: var(--admin-accent);
}

.row-check input:checked + .row-check__box {
  border-color: var(--admin-accent);
  background: var(--admin-accent);
}

/* 印(チェック)は枠線を傾けて描く(画像を持たない)。塗りの上なので白 */
.row-check input:checked + .row-check__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  margin: 1px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.row-check input:focus-visible + .row-check__box {
  outline: 2px solid var(--admin-accent);
  outline-offset: 2px;
}

/* 選べない行(すべての語の登録済み) */
.row-check:has(input:disabled) {
  cursor: default;
}

.row-check input:disabled + .row-check__box {
  border-style: dashed;
  opacity: 0.5;
}

.cand-word__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}

.cand-word__surface {
  font-size: 16px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.cand-word__tag {
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 見た目用のクラスだが、decision_list_controller.js も探す(改名するなら JS も直す) */
.cand-word__edit {
  font-size: 12px;
  white-space: nowrap;
}

.cand-word__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cand-word__was {
  color: var(--text-muted);
}

.cand-word__match,
.cand-word__score.is-doubtful {
  color: var(--admin-warn);
}

/* メモは2行で切る(全文は title で出る) */
.cand-word__note {
  display: -webkit-box;
  flex-basis: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-subtle);
}

/* 処理の選択。ラジオを隠し、ラベルを隙間 1px で並べたボタンの組にする。
   .cand-choice は row_select_controller.js が「行の選択を始めない場所」(INTERACTIVE)として参照する */
.cand-choice {
  display: inline-grid;
  grid-auto-columns: minmax(3.5em, auto);
  grid-auto-flow: column;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--border-strong);
}

.cand-choice__option {
  position: relative;
  display: flex;
  cursor: pointer;
  /* Shift+クリックで範囲をそろえるとき、文字の選択が広がらないように */
  user-select: none;
  -webkit-user-select: none;
}

.cand-choice__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cand-choice__label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.cand-choice__option:hover .cand-choice__label {
  background: var(--bg-soft);
  color: var(--text);
}

/* 採用(大半の行)は淡い面にとどめ、例外の処理だけを色のベタにする。
   ビューは処理名(WordCandidateReview::CHOICES)を補間して --expand / --keep / --hold / --reject を付けるが、
   --keep(採用)は既定の見た目に任せるので規則を持たない(.cand-bar__count・.cand-bar__action も同じ) */
.cand-choice__option input:checked + .cand-choice__label {
  background: var(--bg-tint);
  color: var(--text);
}

.cand-choice__option--expand input:checked + .cand-choice__label {
  background: var(--admin-accent);
  color: #fff;
}

.cand-choice__option--hold input:checked + .cand-choice__label {
  background: var(--admin-warn);
  color: #fff;
}

.cand-choice__option--reject input:checked + .cand-choice__label {
  background: var(--danger);
  color: #fff;
}

.cand-choice__option input:focus-visible + .cand-choice__label {
  outline: 2px solid var(--admin-accent);
  outline-offset: -3px;
}

/* キーは、キーボードで今いる行にだけ出す(数百行に並べると騒がしいため)。
   行の中で「直す」を開いて文字を打っている間は出さない(打った文字は欄に入り、処理は選ばれない) */
.cand-choice__key {
  display: none;
}

.cand-choice:has(input:focus-visible) .cand-choice__key {
  display: inline-block;
}

/* タッチの端末ではキーの案内を出さない(帯の案内・確定ボタンの Ctrl+Enter と同じ) */
@media (hover: none) {
  .cand-choice:has(input:focus-visible) .cand-choice__key {
    display: none;
  }
}

.cand-choice__option input:checked + .cand-choice__label .cand-choice__key {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

/* 保留(あとで決める)の語。既定は畳む */
.cand-held {
  margin-top: var(--space-4);
}

.cand-held__summary {
  padding: var(--space-2) 0;
  font-size: 14px;
  color: var(--admin-warn);
  cursor: pointer;
}

/* 下端に貼り付くバー: 処理ごとの語数と確定ボタン */
.cand-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.cand-bar__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-muted);
}

.cand-bar__num {
  margin-left: 4px;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cand-bar__count--expand .cand-bar__num {
  color: var(--admin-accent);
}

.cand-bar__count--hold .cand-bar__num {
  color: var(--admin-warn);
}

.cand-bar__count--reject .cand-bar__num {
  color: var(--danger);
}

/* 選んでいるとき(row-select)の表示: 選んだ語数と、まとめて当てるボタン。すべての語では選んでいないときの案内も */
.cand-bar__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す */
.cand-bar [hidden] {
  display: none;
}

.cand-bar__selected {
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cand-bar__hint {
  font-size: 13px;
  color: var(--text-muted);
}

/* タッチの端末では Shift+クリックの案内を出さない */
@media (hover: none) {
  .cand-bar__hint-pointer {
    display: none;
  }
}

.cand-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cand-bar__action--expand {
  color: var(--admin-accent);
}

.cand-bar__action--hold {
  color: var(--admin-warn);
}

.cand-bar__action--reject {
  color: var(--danger);
}

/* 文字だけのボタン(すべて選ぶ・選択を外す)。押せるものなのでアクセント色 */
.cand-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--admin-accent);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* JS が無いと働かない操作(すべて選ぶ 等)は、row-select がつながるまで出さない */
[data-controller~="row-select"]:not([data-row-select-ready]) [data-js-only] {
  display: none;
}

/* 確定は折り返しても右端(スマホで画面下端の中ほどに来ないように。docs/design.md §10.1.2) */
.cand-bar__submit {
  margin-left: auto;
}

.cand-bar__kbd {
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.75;
}

@media (hover: none) {
  .cand-bar__kbd {
    display: none;
  }
}

/* --- 行の中の手直し(turbo-frame の中の編集フォーム) --- */
.cand-edit {
  display: grid;
  gap: var(--space-2);
}

.cand-edit__label {
  font-size: 12px;
  color: var(--text-subtle);
}

.cand-edit__surface,
.cand-edit__note {
  width: 100%;
}

.cand-edit__actions {
  display: flex;
  gap: var(--space-2);
}

/* --- 登録待ち --- */
.cand-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cand-ready {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.cand-ready__list {
  margin: 0;
  padding-left: 2.2em;
  columns: 2 16em;
  column-gap: var(--space-5);
  font-size: 14px;
}

.cand-ready__item {
  padding: 1px 0;
  break-inside: avoid;
}

.cand-ready__was {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-subtle);
}

/* --- すべての語 --- */
.cand-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 13px;
}

.cand-status-tabs__tab {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.cand-status-tabs__tab[aria-current="page"] {
  border-bottom-color: var(--admin-accent);
}

.cand-status-tabs__count {
  margin-left: 4px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.cand-search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cand-search__input {
  flex: 1;
}

.cand-list-count {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  color: var(--text-subtle);
}

.cand-list-count__limit {
  margin-left: var(--space-2);
  color: var(--admin-warn);
}

.cand-table {
  width: 100%;
}

/* 表の左端の選択の列。セルいっぱいを当たり判定にする(行のほかの場所を押しても選べる) */
.cand-table .cand-table__check {
  position: relative;
  width: 44px;
  padding: 0;
}

.cand-table .cand-table__check .row-check {
  position: absolute;
  inset: 0;
  width: auto;
  min-height: 0;
}

.cand-table__row {
  cursor: pointer;
}

.cand-table__row:has(input:disabled) {
  cursor: default;
}

.cand-table__child .cand-table__surface {
  padding-left: 20px;
}

.cand-table__sub {
  display: block;
  font-size: 12px;
  color: var(--text-subtle);
}

.cand-table__note {
  font-size: 12px;
  color: var(--text-muted);
}

/* 状態の文字。色は意味を持つものだけ(保留 = 要対応 / 登録待ち・登録済み = 達成 / 除外 = 沈める)。
   ビューは status を補間して --<status> を付けるが、前処理中の 4 値(--triage・--expanding・--notating・
   --notated)は既定の見た目に任せるので規則を持たない */
.cand-status {
  font-size: 12px;
  white-space: nowrap;
}

.cand-status--held {
  color: var(--admin-warn);
}

.cand-status--ready,
.cand-status--registered {
  color: var(--success);
}

.cand-status--duplicated,
.cand-status--rejected {
  color: var(--text-subtle);
}

/* --- 1語の画面 --- */
.cand-detail__word {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
}

.cand-detail {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: 14px;
}

.cand-detail__item {
  display: contents;
}

.cand-detail dt {
  font-size: 13px;
  color: var(--text-subtle);
}

.cand-detail dd {
  margin: 0;
}

/* --- 狭い幅: 行は語の下に処理の選択を全幅で置き、押しやすい高さにする(選択の列は2段ぶんの高さ) --- */
@media (max-width: 767px) {
  .cand-steps__link {
    padding: 6px var(--space-2) var(--space-2);
  }

  .cand-steps__count {
    font-size: 18px;
  }

  .cand-steps__hint,
  .cand-steps__no {
    display: none;
  }

  .cand-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cand-row .row-check {
    grid-row: span 2;
  }

  .cand-row .cand-choice {
    grid-column: 2;
    margin-top: 0;
  }

  .cand-choice {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
  }

  .cand-choice__label {
    min-height: 44px;
    font-size: 14px;
  }

  /* 下端のバーのボタンも指で押しやすい高さにする(文字だけのボタンは上下に当たり判定を広げる) */
  .cand-bar__action {
    min-height: 40px;
  }

  .cand-link-button {
    padding: var(--space-2) 0;
  }
}
/*
 * 管理画面（/admin 配下）だけに効かせる上書き。
 *
 * 公開側のデザインシステム「しずか」は**読み物**のための設計で、淡い色・広い字間(0.03em)と
 * 行間(1.9)・大きな角丸・多めの transition を持つ。管理画面は**作業画面**であり、
 * 見る人はオーナー1人なので、そのトーンを引き継ぐ必要がない(2026-09-06 オーナー指示)。
 *
 * 狙いは 2 つだけ:
 *   1. 認知負荷を下げる … 文字と罫を濃くし、字間・行間を詰めて、視線の移動量を減らす
 *   2. レンダリング負荷を下げる … 「高速アノテーション」が主題なので、影・大きな角丸・SVG など
 *      毎回の描画で払うものを減らす(transition は全称セレクタでは潰さない。下の「レンダリング負荷」)
 *
 * ページ構成・レイアウト・HTML は公開側と共有したまま、body の .is-admin の下で上書きする。
 * 公開側のコンポーネント定義は変えず、管理画面のための上書き(トークン、一部のコンポーネントの見た目、
 * 管理画面専用の 2 色 --admin-accent / --admin-warn)はこのファイルに集める。
 * 管理画面はダークに対応していない(docs/design.md §9.4)。ここの上書きはライトの値で、テーマを問わず効く。
 */

.is-admin {
  /* ── 字組み ───────────────────────────────────────────────
     読ませるためではなく、拾わせるための組み。字間を殺し、行間を詰める */
  --tracking: 0;

  /* ── 色 ───────────────────────────────────────────────────
     公開側は「静けさ」を優先して淡いが、作業画面ではコントラストがそのまま速さになる。
     弱い文字ほど濃くする(--text-subtle と --text-muted を --text に寄せる) */
  --text-muted: #414850;
  --text-subtle: #4a515a;

  /* 罫は「どこで区切れているか」を一目で取れる濃さまで上げる */
  --border: #c4cad3;
  --border-strong: #98a1ad;

  /* ── 形 ───────────────────────────────────────────────────
     角丸は輪郭を曖昧にするぶん、形の判別に一手間かかる。ほぼ直角にする。
     ピル(999px)も四角へ。描画コストも下がる */
  --radius: 3px;
  --radius-lg: 4px;
  --radius-pill: 3px;
  /* --radius-sm(6px)は上書きしていないので、管理画面では --radius(3px)より大きい(揃えるかは見送り中) */

  /* 影は使わない(公開側はメニューのパネルとドロワーに --shadow-pop を使う。管理画面ではそれも消す) */
  --shadow-pop: none;

  /* ── 色のメリハリ ─────────────────────────────────────────
     公開側は無彩色で通すが、管理画面では**色が最短の手がかり**になる
     (2026-09-07 オーナー指摘「色のメリハリもないので、各コンテンツや数字、文章を認識しにくい」)。
     増やすのは 2 色だけ: 操作の色(青)と、要対応を示す色(橙)。
     状態の意味を持つ --danger / --success は公開側と共通のものをそのまま使う。 */
  --admin-accent: #1d4ed8;   /* 押せるもの・アイコン */
  --admin-warn: #b45309;     /* 未対応・要判断の件数 */

  line-height: 1.5;
}

/* 見出し・本文の行送りも詰める(base.css の 1.75〜1.9 を上書き) */
.is-admin h1,
.is-admin h2,
.is-admin h3,
.is-admin h4 {
  line-height: 1.4;
}

/* ── レンダリング負荷 ───────────────────────────────────────
   **全称セレクタ(.is-admin *)で transition を潰す案は計測して取りやめた**(2026-09-06)。
   スタイル再計算のたびに全要素へマッチするぶん、かえって重くなる
   (強制レイアウト30回: 全称セレクタあり 255.7ms / なし 175.1ms を実測。別の計測では、なし 156.4ms。
   値は違うが、どちらもなしの方が軽い。docs/design.md §10.2)。
   transition はそもそも hover したときだけ走るので、常時のコストではない。

   効くのは「毎回の描画で払っているもの」を減らすことのほう:
   影(合成レイヤ。上のトークンで --shadow-pop を消している)・大きな角丸・SVG の描画・要らない要素そのもの。 */

/* ── 画面に出す物を減らす ───────────────────────────────────
   公開側のヘッダーは「サイトの顔」を作るための要素を持つが、作業画面では
   どれも読まない。**描かない = 認知負荷もレンダリング負荷も下がる**。
   ログアウトとナビは残す(それだけは作業中に押す) */
.is-admin .site-brand__seal,
.is-admin .site-brand__roman {
  display: none;
}

/* ヘッダーの帯を低くする。作業の主役は下の本文なので、上に場所を割かない */
.is-admin .site-header__inner {
  padding-block: var(--space-2);
}

.is-admin .site-brand__name {
  font-size: 14px;
}

/* 本文の上下余白も詰める(公開側は「疎でよい」が、作業画面では1画面の情報量が価値) */
.is-admin main.container {
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

/* ── 入口のカード(ダッシュボード・タグ管理) ───────────────────
   カードの境目は 1px の罫で割る(components.css。2026-09-07 オーナー指摘「グリッドの境界が見えない」への対応を、
   2026-09-26 に 1 枚のパネルを割る組みへ改めた)。
   押せるものの印はアクセント色: アイコンは常に、右上の矢印は hover のときに。
   hover の面はアクセントをごく薄く混ぜた色にする(--bg-soft だと、要対応の色の文字が 4.2:1 で AA を割る) */
.is-admin .admin-card:hover {
  background: color-mix(in srgb, var(--admin-accent) 6%, var(--surface));
}

.is-admin .admin-card__icon,
.is-admin .admin-card:hover .admin-card__arrow {
  color: var(--admin-accent);
}

/* 手を付けていない件数が残っているカードだけ、下端の一言を「要対応」の色にする */
.is-admin .admin-card__meta--pending {
  color: var(--admin-warn);
}

/* ── 数字を主役にする ───────────────────────────────────────
   ラベルと数字が同じ級数・同じ濃さだと、拾うのに一手間かかる。
   ラベルは小さく薄く、数字は大きく濃く、上下に積んで対にする。
   4 つの数は作業のカードと同じく 1px の罫で割った 1 枚のパネルに収め、最下段に注釈の進捗を置く */
.is-admin .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--border);
}

.is-admin .stats-grid__item {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.is-admin .stats-grid__item dt {
  font-size: 12px;
  color: var(--text-subtle);
}

/* 1 つずつ置く大きな数字は比例幅の数字で組む(等幅の数字は桁を縦に揃えるときだけ。大きいと字間が間延びする) */
.is-admin .stats-grid__item dd {
  font-size: 30px;
  line-height: 1.2;
  font-variant-numeric: normal;
  color: var(--text);
}

.is-admin .stats-grid__unit {
  margin-left: var(--space-1);
  font-size: 13px;
  color: var(--text-subtle);
}

/* 未注釈が残っているときだけ、数字を「要対応」の色にする */
.is-admin .stats-grid__item--pending dd {
  color: var(--admin-warn);
}

/* 注釈の進捗。パネルの全幅を 1 行で使う(ラベル・帯・%) */
.is-admin .stats-grid__item--progress {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.is-admin .stats-grid__item--progress dd {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
}

/* 帯。満ちた部分はアクセント、残りは同じ色相の淡い段にして、同じ色の濃淡で「どこまで満ちたか」を読ませる */
.is-admin .admin-meter {
  position: relative;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--admin-accent) 16%, var(--surface));
}

.is-admin .admin-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter, 0%);
  background: var(--admin-accent);
}

/* % の桁が変わっても帯の長さが揺れないよう、幅を 4 桁ぶん取って右に寄せる */
.is-admin .admin-meter__value {
  flex: none;
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .is-admin .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 区画の見出し(「作業」など)。本文と同じ濃さだと段が読めない */
.is-admin .section-label {
  color: var(--text-subtle);
  font-size: 12px;
}

/* ── 表の見出し行を面で押さえる ─────────────────────────────
   どこまでが見出しでどこからがデータかを、罫だけでなく面でも示す */
.is-admin .data-table thead th {
  background: var(--bg-soft);
  color: var(--text);
}

/* ── 状態を色で分ける ───────────────────────────────────────
   注釈の状態は 3 値(未対応 / 保留 / 完了)。文字だけだと読み取りに一手間かかるので、
   **意味を持つ色**を当てる。色を足すのは状態と操作だけで、装飾には使わない。
   この表の状態の色はここだけが持つ(components.css は級数だけ) */
.is-admin .admin-words-table__unannotated {
  color: var(--admin-warn);
}

.is-admin .admin-words-table__on-hold {
  color: var(--text-muted);
}

.is-admin .admin-words-table__annotated {
  color: var(--success);
}

/* ── 破壊的な操作を色で分ける ───────────────────────────────
   行末の「annot.」と「del.」は同じ見た目なので、押し間違えると戻せない側だけ色を変える */
.is-admin .btn[data-turbo-confirm],
.is-admin form[data-turbo-confirm] .btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.is-admin .btn[data-turbo-confirm]:hover,
.is-admin form[data-turbo-confirm] .btn:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* ── 押せるものを青で示す ───────────────────────────────────
   管理画面のリンクは「読み物の中のリンク」ではなく操作の入口なので、下線ではなく色で示す */
.is-admin main a:not(.btn):not(.admin-card__link):not(.tag):not(.chip):not(.genre-path a) {
  color: var(--admin-accent);
  text-decoration: none;
}

.is-admin main a:not(.btn):not(.admin-card__link):hover {
  text-decoration: underline;
}

/* ── 現在地をはっきりさせる ─────────────────────────────────
   状態タブ・管理ナビの選択中は、下線だけでなく色でも示す。
   管理ナビの下線は帯の下罫にぴったり重なる(layout.css) */
.is-admin .admin-status-tabs a[aria-current],
.is-admin .admin-nav__link[aria-current="page"] {
  color: var(--admin-accent);
  border-color: var(--admin-accent);
}
/*
 * デザインシステムの読み込み順を明示するマニフェスト(docs/design.md 参照)。
 * tokens(変数) → base(素のタグと .mono) → layout(骨格) → components(部品) の後に、管理画面用の
 * annotate(注釈コンソール) → candidates(登録予定単語) → admin(.is-admin の下の上書き) を読む。
 * レイアウトは 1 本(application.html.erb の stylesheet_link_tag "application")なので、
 * 管理画面用の 3 ファイルも公開ページで毎回読まれる。
 * 順序には意味がある: 同じ特異度の規則は後に書いたほうが勝つので、admin は最後に置いて上書きし、
 * annotate はフォーム部品の級数を components より後で上げる。並べ替えると見た目が変わる。
 * 置き場所の実態: layout.css にも部品(nav-menu・theme-toggle・flash・admin-nav)があり、
 * components.css にも管理画面の部品がある。candidates.css は admin.css だけが定義する
 * --admin-accent / --admin-warn を使う(管理画面の外では未定義)。
 * require_tree は使わない(アルファベット順で順序が壊れるため)。
 *








 */