/* デザイントークン「活字見本帖」(docs/design.md)。
   色・フォント・余白はここ以外で直書きしない。角丸・影のトークンは存在しない(使用禁止)。 */
:root {
  /* 紙と墨: 高コントラスト */
  --bg: #FAF8F3;          /* 温かみのある白(紙) */
  --ink: #191813;         /* ほぼ黒の墨 */
  --ink-2: #5C5950;       /* 補足文 */
  --ink-3: #7C7969;       /* メタ情報(最も弱い文字。これ以上薄くしない) */
  --rule: #E4E1D5;        /* 細罫(ヘアライン) */
  --rule-mid: #C9C5B4;    /* 中間の罫(入力の下線など) */

  /* 朱: ふりがな・注釈・現在地・ブランド印章。唯一のアクセント */
  --shu: #C43A1E;
  --shu-deep: #A62E15;    /* hover */

  /* 緑: 管理画面の「満たされている」状態表示だけに使う色(オーナー承認の例外)。
     design.md の「朱一色」方針の外だが、即時判別のため限定導入。用途は以下に限る:
       - 一括登録 step2 の「読み一致」バッジ(一致=緑 / 不一致=朱)
       - アノテーション・コンソールで最低限の項目が揃った語義カードの枠 */
  --midori: #2F7A45;

  /* 墨ベタ面(フッター)の上で使う文字色 */
  --on-ink: #FAF8F3;
  --on-ink-dim: #B6B3A6;
  --on-ink-rule: #3B3931;

  /* タイポグラフィ: 見出し語は明朝を巨大に、データラベルは極小の等幅 */
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                 "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 余白スケール */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;

  --content-width: 1040px;
}
/* 素のタグへの基本設定(docs/design.md)。角丸・影は全面禁止。構造は罫線とスケール対比で作る。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 固定ヘッダーの下にアンカー/フォーカス先が隠れないよう、スクロール位置を上げる */
html {
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0.02em;
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-mid);
  text-underline-offset: 4px;
  transition: color 0.15s, text-decoration-color 0.15s, background 0.15s, border-color 0.15s;
}

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

/* テキスト選択も朱(細部の作り込み) */
::selection {
  background: var(--shu);
  color: var(--bg);
}

/* フォーカスリングは消さず、朱で明示的に再定義する */
:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 2px;
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
}

/* 読み仮名。必ず <ruby> を使う(疑似ルビ禁止)。既定は弱い墨、見出し語では朱 */
rt {
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
}

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

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
/* ページ骨格(docs/design.md §5.1)。ヘッダーは墨の1本罫、フッターは墨のベタ面で締める。 */

/* --- グローバルヘッダー --- */
/* スクロールしても常に上部へ留める。ドロワー/スクリム(z-index 19〜21)は
   このヘッダー内にあるので、ヘッダーを stacking context にしても相対順序は保たれる */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 14px 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;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand__seal {
  width: 22px;
  height: 22px;
  flex: none;
}

.site-brand__name {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.12em;
}

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

/* ハンバーガー(狭幅のみ表示。デスクトップ/タブレットは非表示のまま)。
   開閉で×に変形する(aria-expanded を JS が切り替え、CSS だけでモーフィングさせる)。 */
.nav-toggle {
  display: none;
  border: none;
  background: none;
  padding: 14px;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__bars {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  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: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  top: 7px;
  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: 7px;
  transform: rotate(-45deg);
}

.nav-drawer__scrim {
  display: none;
}

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

/* 直下のリンクだけを対象にする(プルダウン内のリンクは .nav-menu__panel a が受け持つ) */
.site-nav > a {
  text-decoration: none;
  color: var(--ink-2);
  /* タップ領域確保(見た目は変えずに padding で広げる) */
  padding: var(--space-2) 2px;
}

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

/* 現在地は朱の下線 */
.site-nav > a.is-current {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--shu);
}

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

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

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

/* --- ナビのプルダウン(「検索」→ ジャンル/索引/詳細検索) --- */
.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: 15px;
  color: var(--ink-2);
  cursor: pointer;
}

.nav-menu__trigger:hover {
  color: var(--ink);
}

.nav-menu__trigger.is-current {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--shu);
}

/* .icon(components.css)が後勝ちで 1em にするため、詳細度を上げて小さく保つ */
.nav-menu__trigger .nav-menu__caret {
  width: 0.72em;
  height: 0.72em;
  transition: transform 0.15s ease;
}

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

/* 墨 1px 枠のパネル(角丸・影なし) */
.nav-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 25;
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--ink);
}

/* display 指定はクラス側が UA の [hidden]{display:none} に勝つので、明示的に打ち消す */
.nav-menu__panel[hidden] {
  display: none;
}

.nav-menu__panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu__panel a:last-child {
  border-bottom: none;
}

/* hover は墨反転 */
.nav-menu__panel a:hover {
  background: var(--ink);
  color: var(--bg);
}

/* 現在地は朱の縦罫(下線はパネルの区切り罫と衝突するので使わない) */
.nav-menu__panel a.is-current {
  border-left-color: var(--shu);
  color: var(--ink);
  font-weight: 500;
}

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

/* 常設のキーワード検索(枠で囲わず下線1本 + 虫眼鏡アイコン) */
.header-search {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid var(--rule-mid);
}

.header-search:focus-within {
  border-bottom-color: var(--shu);
}

.header-search__input {
  border: none;
  background: transparent;
  padding: 4px 2px;
  font-size: 15px;
  width: 160px;
  color: var(--ink);
}

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

.header-search__submit {
  border: none;
  background: transparent;
  color: var(--ink-3);
  padding: 4px 2px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.header-search__submit:hover {
  color: var(--shu);
}

.header-search__input::placeholder {
  color: var(--ink-3);
}

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

/* モバイルは左右パディングを詰めて実効幅を確保する */
@media (max-width: 560px) {
  main.container {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
}

/* --- 管理画面の共通サブナビ(Issue 35) --- */
.admin-nav {
  border-bottom: 1px solid var(--rule-mid);
}

.admin-nav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  /* 狭幅では折り返さず横スクロールで逃がす(管理画面のみなので許容) */
  overflow-x: auto;
  white-space: nowrap;
}

.admin-nav__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  padding: var(--space-2) 0;
}

.admin-nav__link {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14px;
  /* タップ領域確保(見た目は変えずに padding で広げる) */
  padding: var(--space-2) 2px;
}

.admin-nav__link:hover {
  color: var(--ink);
}

/* 現在地は朱の下線(グローバルナビと同じ文法) */
.admin-nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--shu);
}

/* 公開サイトへの出口リンクは右端に離す */
.admin-nav__link--site {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- フッター: 墨のベタ面で締める --- */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  margin-top: var(--space-7);
}

.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.site-footer__about {
  max-width: 480px;
}

.site-footer__brand {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 2.5vw, 24px);
  letter-spacing: 0.14em;
  margin: 0 0 var(--space-3);
}

.site-footer__desc {
  font-size: 15px;
  line-height: 2;
  color: var(--on-ink-dim);
  margin: 0;
}

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

.site-footer__nav a {
  color: var(--on-ink-dim);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: var(--shu);
}

.site-footer__bottom {
  border-top: 1px solid var(--on-ink-rule);
}

.site-footer__bottom-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--on-ink-dim);
}

/* --- フラッシュ(レイアウトで一元表示) --- */
.flash {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-4);
  font-size: 15px;
  margin-bottom: var(--space-5);
}

.flash .icon {
  margin-right: 8px;
}

.flash--alert {
  color: var(--shu); /* エラーは朱テキストのみ。背景は塗らない */
  border-color: var(--shu);
}

/* 375px 想定の狭幅: ナビ+検索をハンバーガーで開閉するサイドパネルに格納する */
@media (max-width: 767px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 21; /* ドロワー(20)・スクリム(19)より前面に置き、開いた後も押せるようにする */
  }

  .site-header__right {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    width: min(280px, 80vw);
    height: 100vh;
    margin: 0;
    background: var(--bg);
    border-left: 1px solid var(--ink);
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: 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-6);
  }

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

  .site-nav > a,
  .nav-menu__trigger,
  .site-nav form button {
    width: 100%;
    padding: var(--space-4) 2px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
  }

  /* ドロワー内ではプルダウンを浮かせず、その場で開いて下の項目を押し下げる */
  .nav-menu__trigger {
    justify-content: space-between;
  }

  .nav-menu__panel {
    position: static;
    min-width: 0;
    border: none;
  }

  .nav-menu__panel a {
    padding: var(--space-4) 2px var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--rule);
  }

  .nav-menu__panel a:last-child {
    border-bottom: 1px solid var(--rule);
  }

  .header-search {
    width: 100%;
  }

  .header-search__input {
    width: 100%;
  }

  .nav-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(25, 24, 19, 0.4);
  }

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

  body.nav-drawer-open {
    overflow: hidden;
  }
}
/* UI 部品(docs/design.md §5)。
   言葉を巨大な明朝で組み、データは極小の等幅ラベルで添える(スケール対比)。
   構造は「墨の罫線」と「墨の枠(1px)」で作る。角丸・影は使わない。 */

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

.icon--lg { width: 1.35em; height: 1.35em; }

/* ラベル・小見出しの先頭に添える装飾アイコン。色はラベルの文字色をそのまま継承する
   (等幅の極小ラベルに、同じ細さの線画をひとつだけ置く「欄外の印」の文法) */
.field-legend .icon,
.section-label .icon,
.section-heading .icon,
.sense-attrs dt .icon,
.stats-grid__item dt .icon,
.page-eyebrow .icon,
.related__title .icon,
.prose h2 .icon,
.sort-form__label .icon,
.hero-featured__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: 8px;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

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

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

.breadcrumbs__sep {
  color: var(--rule-mid);
}

/* --- ページ見出し(一覧・検索など) --- */
.page-title {
  font-size: clamp(24px, 4vw, 36px);
  overflow-wrap: anywhere;
}

/* 見出し末尾の Web 検索(外部リンク)。主役は言葉なので、墨の最も弱い色で小さく添える。
   見出しは最大 92px まで伸びるため、font-size を継承させず独立して小さく保つ。 */
.page-title__web-search {
  margin-left: 0.5em;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1;
  color: var(--ink-3);
  text-decoration: none;
  /* 大きな字面のなかほどへ少し持ち上げ、ベースラインに沈めない */
  vertical-align: 0.2em;
}

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

.page-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

.page-title-meta {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

.entry-count {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

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

.entry-toolbar .entry-count {
  margin: 0;
}

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

.sort-form__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

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

/* --- 単語詳細: 見出し語を紙面いっぱいの明朝で組む(型見本の文法) --- */
.page-header {
  padding: var(--space-5) 0 var(--space-5);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-6);
}

.page-header .page-title {
  font-size: clamp(40px, 9vw, 92px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.page-header .page-title-meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* 見出し語ブロック内の自己完結リード文(定義文)。本文体で読ませる(Issue 18) */
.page-header .page-lead {
  margin: var(--space-4) 0 0;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.9;
}

/* 動的に組み立てる解説文。細罫の下に控えめに置き、突拍子ない印象を避ける。
   横幅は親(見出し語ブロック)いっぱいまで取り、ひっそりと添える */
.word-flavor {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.word-flavor__label {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-3);
}

.word-flavor__text {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.85;
}

/* 恒久ページ(About 等)の本文。幅は他の要素と同じだけ取る(Issue 20) */
.prose {
  font-size: 15px;
}

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

.prose h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(18px, 2.4vw, 22px);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule-mid);
}

/* FAQ の質問文(h3)と活用シーンの箇条書き */
.prose h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 16px;
}

.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: 14px;
}

.prose__note {
  color: var(--ink-3);
  font-size: 13px;
}

/* --- 語義パネル: 墨の1px枠(印刷物のフレーム) --- */
.sense-list {
  display: grid;
  gap: var(--space-5);
}

.sense-card {
  position: relative;
  border: 1px solid var(--ink);
  padding: var(--space-5) var(--space-6) var(--space-5);
}

/* 左上の通し番号(01/02…)。朱の刻印 */
.sense-card__number {
  position: absolute;
  top: -1px;
  left: -1px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--bg);
  background: var(--ink);
  padding: 3px 10px;
}

.sense-heading {
  margin-top: var(--space-4);
  font-size: clamp(22px, 3.6vw, 32px);
  overflow-wrap: anywhere;
}

/* 見出し語の直下に添える韻・母音のメタ(page-title-meta の語義版) */
.sense-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* 見出し語のふりがなは朱(教科書のルビの文法) */
.sense-heading rt {
  font-size: 14px;
  color: var(--shu);
}

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

/* 小さなセクションラベル */
.section-label {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* --- 該当部分つき特徴: 朱書きの注釈 --- */
.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);
}

/* 注釈対象は明朝 + 朱の下線(校正記号の文法)。コンパクトに添える */
.annotation-target {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  border-bottom: 2px solid var(--shu);
  padding-bottom: 2px;
}

.annotation-target rt {
  font-size: 12px;
  color: var(--shu);
}

/* 特徴名は墨枠の小ラベル(検索リンク)。hover で反転 */
.chip {
  display: inline-block;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 2px 10px;
  text-decoration: none;
  margin-bottom: 4px;
}

a.chip:hover {
  background: var(--ink);
  color: var(--bg);
}

/* --- 語義の関連データ: ラベル列 + 値列の定義グリッド --- */
.sense-attrs {
  margin: var(--space-5) 0 0;
}

.sense-attrs__item {
  display: grid;
  /* 値側は minmax(0,1fr) にして、長いジャンルパス等でも列が伸びず内側で折り返す
     (これが 1fr だと min-content で押し広げられ、main/section が横にはみ出す) */
  /* ラベル列は先頭のアイコン(1em + 6px)込みで「エンティティ」等が折り返さない幅 */
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
}

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

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

.sense-attrs dt {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

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

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

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

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

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

/* 末端(小分類)は強調 */
.genre-path a.genre-path__current {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
}

.genre-path a.genre-path__current:hover {
  color: var(--shu);
  border-color: var(--shu);
}

.genre-path__sep {
  color: var(--shu);
  font-size: 14px;
}

/* 品詞・エンティティタイプなどのタグ(検索リンク)。墨枠、hover で反転 */
.tag {
  display: inline-block;
  border: 1px solid var(--rule-mid);
  color: var(--ink-2);
  font-size: 15px;
  padding: 1px 12px;
  text-decoration: none;
}

a.tag:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* 表示のみのタグ(語種など、絞り込み対象でないもの) */
.tag--static {
  color: var(--ink);
}

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

.section-heading {
  font-size: clamp(18px, 2.6vw, 22px);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule-mid);
}

/* 索引の 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(--ink);
  background: var(--ink);
  color: var(--bg);
}

.kana-cell--muted .kana-cell__face {
  color: var(--rule-mid);
}

/* 件数ヒート: --fill(0〜1)に応じて朱の濃淡でセルを塗る。多いマスほど濃い朱。
   単色の塗り(グラデーションではない)で 50音表の分布を一目で示す。実数はホバー表示 */
.kana-cell--heat .kana-cell__face {
  background: color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 70%), transparent);
  border-color: color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 55% + 12%), var(--rule-mid));
}

.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(--shu) calc(var(--fill, 0) * 55%), transparent);
  border-color: color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 45% + 12%), var(--rule-mid));
}

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

a.browse-length:hover .browse-length__count {
  color: var(--bg);
  border-left-color: var(--on-ink-rule);
}

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

.share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.share__btn:hover {
  background: var(--ink);
  color: var(--bg);
}

/* --- 関連語セクション(Issue 23) --- */
.related {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
}

.related__title {
  font-size: clamp(18px, 2.6vw, 24px);
  margin: 0 0 var(--space-4);
}

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

/* 見出し行: 左にラベル、右端に「もっと見る」(ホームの section-header と同じ配置) */
.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: var(--space-2);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

/* --- ジャンル・ハブページ(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-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--ink);
}

.genre-hub__summary .genre-hub__count {
  margin-left: auto;
}

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

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

.genre-hub__whole:hover {
  color: var(--shu);
}

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

.genre-hub__medium-title {
  font-size: 16px;
  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: 13px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

a:hover > .genre-hub__count,
a.tag:hover .genre-hub__count {
  color: var(--bg);
}

.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);
}

.variant-list rt {
  font-size: 14px;
  color: var(--shu);
}

/* 一覧の絞り込み中インジケータ(どのファセットで絞っているか + 解除) */
.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(--rule);
}

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

.active-facet__edit {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-decoration: none;
}

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

.active-facet__clear {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--shu);
  text-decoration: none;
}

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

/* --- 一覧: 型見本のリスト(読みを小さく上に、言葉を大きく) --- */
.entry-list {
  border-top: 2px solid var(--ink);
}

/* 行全体を詳細リンクに(surface のストレッチで実現)。タグは上に載る実リンク。 */
.entry-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 2px;
  border-bottom: 1px solid var(--rule);
}

.entry-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 右側のデータ群(文字数・品詞/種別タグ・語義数) */
.entry-row__data {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.entry-row__len {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 一覧のタグは各ファセットの絞り込み(単語一覧)への実リンク。行リンクの上に載せる。 */
.entry-row__tag {
  position: relative;
  z-index: 1;
  border: 1px solid var(--rule-mid);
  color: var(--ink-2);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 0 8px;
  white-space: nowrap;
  text-decoration: none;
}

.entry-row__tag:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.entry-row__reading {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.entry-row__surface {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.15s;
}

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

.entry-row:hover .entry-row__surface {
  color: var(--shu);
}

.entry-row__meta {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* --- ホーム: 今日の一語(巨大な見本語) --- */
.hero {
  padding: var(--space-6) 0 var(--space-6);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-6);
}

.hero__lead {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 21px);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0;
}

.hero-featured {
  margin: var(--space-6) 0;
}

.hero-featured__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--shu);
  margin: 0 0 var(--space-2);
}

.hero-featured__word {
  display: inline-block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(48px, 12vw, 104px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hero-featured__word:hover {
  color: var(--shu);
}

.hero-featured__reading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* --- 詳細検索フォーム(ドロップダウンをやめ、一覧/階層/スライダーで選ばせる) --- */
.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-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: var(--space-1);
}

/* 検索フォームは全項目の幅を揃えた1カラムの墨1px枠パネル(カード)で、ページ中央に置く。
   内容の幅は50音表の最小幅(セル34px×16列 + すき間4px×15 = 604px)より余裕を持たせ、
   PCサイズで50音表がスクロールバー無しに収まるようにする。
   影はサイト全体では使わない方針だが、このカードだけオーナー判断でごく薄く敷く。 */
.search-form {
  max-width: calc(720px + var(--space-6) * 2 + 2px);
  margin: var(--space-6) auto var(--space-7);
  border: 1px solid var(--ink);
  padding: var(--space-7) var(--space-6);
  box-shadow: 0 2px 12px rgba(25, 24, 19, 0.07);
}

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

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

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

.search-clear {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

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

/* 罫線と見分けが付くよう、検索フォームのテキスト入力は下線でなく墨1pxの箱にする */
.search-form .field input[type="text"] {
  width: 100%;
  border: 1px solid var(--rule-mid);
  padding: 8px 12px;
  background: var(--bg);
}

.search-form .field input[type="text"]:focus {
  border-color: var(--shu);
}

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

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

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

.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(--ink);
  /* 漢/あ/ア と 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-gothic);
  font-size: 13px;
  color: var(--ink-3);
  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(--ink-3);
  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(--rule);
  color: var(--ink-2);
}

/* 選択中(aria-pressed=true = 厳密側が有効)は枠線でなく背景の塗りで示す。
   墨ベタは主張が強いので、未選択ホバーと同じベージュ(--rule)の淡い塗りにする。 */
.char-type-flag__btn[aria-pressed="true"] {
  background: var(--rule);
  color: var(--ink);
}

.char-type-flag__btn[aria-pressed="true"]:hover {
  background: var(--rule-mid);
}

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

/* 切り替えた瞬間だけ状態ラベルを 3 秒フェード表示。ホバー tooltip は使わない(モバイル配慮) */
.char-type-flag__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 2;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  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: 30px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid var(--rule-mid);
  background: var(--rule);
  box-shadow: 0 2px 0 var(--rule-mid);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  /* 字形を表示欄と揃える。連打でダブルタップ拡大・文字選択が起きないようにする */
  text-transform: full-width;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.05s, background 0.12s, border-color 0.12s, box-shadow 0.05s;
}

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

.char-type-key:hover {
  border-color: var(--ink-3);
  box-shadow: 0 2px 0 var(--ink-3);
}

/* 押し込み: キーを影の上に沈める */
.char-type-key:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--ink-3);
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}

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

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

.slider-field,
.kana-field,
.chips-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-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.length-slider__track {
  position: relative;
  height: 36px;
  background-image: linear-gradient(
    to right,
    var(--rule-mid) 0, var(--rule-mid) var(--from, 0%),
    var(--shu) var(--from, 0%), var(--shu) var(--to, 100%),
    var(--rule-mid) var(--to, 100%), var(--rule-mid) 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; }

/* ツマミ: 墨の丸ノブ(紙色フチで罫トラック/もう一方のツマミから分離)。
   design.md は角丸禁止だが、スライダーのツマミはオーナー判断で丸を許可(掴む対象として自然)。 */
.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(--ink);
  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(--ink);
  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(--rule-mid);
  font-size: 15px;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

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

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

/* 一覧選択チップ(品詞・エンティティ・特徴)。選択で墨に反転 */
.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(--rule-mid);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  padding: 3px 12px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

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

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

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

.genre-fold {
  border: 1px solid var(--rule-mid);
}

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

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

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

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

.genre-fold__caret {
  color: var(--shu);
  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;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--shu);
}

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

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

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

.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(--ink);
  padding: 2px 10px;
}

.condition-chip__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--shu);
}

.condition-chip__value {
  font-size: 14px;
  color: var(--ink);
}

/* 簡素↔詳細 検索の切替リンク(等幅小・朱 hover) */
.search-switch {
  margin: var(--space-3) 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.search-switch a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-mid);
  padding-bottom: 2px;
}

.search-switch a:hover {
  color: var(--shu);
  border-color: var(--shu);
}

/* ホームの探し方導線: 墨1px枠のパネルを横に並べる(hover で墨反転) */
.hero-entries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-entry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}

.hero-entry .icon {
  color: var(--shu);
}

.hero-entry__arrow {
  margin-left: var(--space-2);
}

.hero-entry:hover {
  background: var(--ink);
  color: var(--bg);
}

.hero-entry:hover .icon {
  color: var(--bg);
}

/* --- 収録統計: 罫線で仕切る数字の行(箱にしない) --- */
.stats-grid {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
}

.stats-grid__item {
  flex: 1;
  min-width: 140px;
  padding: var(--space-2) var(--space-5);
  border-left: 1px solid var(--rule-mid);
}

.stats-grid__item:first-child {
  border-left: none;
  padding-left: 0;
}

.stats-grid__item dt {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

.stats-grid__item dd {
  margin: 4px 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 56px);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stats-grid__unit {
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink-3);
  margin-left: 5px;
}

/* 375px 想定の狭幅: 3項目が中途半端に折り返さないよう縦積みにする(区切りは上罫に) */
@media (max-width: 767px) {
  .stats-grid {
    flex-direction: column;
  }

  .stats-grid__item {
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--rule-mid);
    padding: var(--space-3) 0;
  }

  .stats-grid__item:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* --- 管理コンソール(ダッシュボード): 墨枠パネルの入口カード --- */
.admin-dash-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--space-6);
}

.admin-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, color 0.15s;
}

.admin-card:hover {
  background: var(--ink);
  color: var(--bg);
}

.admin-card__title {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 21px;
}

.admin-card__desc {
  margin-top: var(--space-3);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
}

.admin-card:hover .admin-card__desc {
  color: var(--on-ink-dim);
}

.admin-card__tag {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--shu);
}

.admin-card:hover .admin-card__tag {
  color: var(--bg);
}

/* --- 単語の管理一覧(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);
}

/* 検索はヘッダー検索と同じ文法(下線1本 + 虫眼鏡) */
.admin-words-search {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid var(--rule-mid);
}

.admin-words-search:focus-within {
  border-bottom-color: var(--shu);
}

.admin-words-search__input {
  border: none;
  background: transparent;
  font-size: 15px;
  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(--ink-2);
}

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

/* 検索とタグ絞り込みを縦に積む(タグは語義のジャンル・品詞・エンティティ・語種) */
.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-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

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

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

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

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

.admin-status-tabs__tab {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14px;
  padding: var(--space-2) 2px;
}

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

.admin-status-tabs__tab[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--shu);
}

.admin-words-count {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: var(--space-3);
}

/* 一括適用(Issue 37)。パネルは墨1px枠、中身はコンソールの ann-row/ann-chip を流用 */
.bulk-annotation {
  border: 1px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.bulk-annotation__summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

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

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

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

.bulk-annotation__meaning {
  width: 100%;
  max-width: 34em;
  border-bottom: 1px solid var(--rule-mid);
  font-size: 15px;
  padding: 4px 2px;
}

.bulk-annotation__meaning:focus {
  outline: none;
  border-bottom-color: var(--shu);
}

.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(--ink-2);
  cursor: pointer;
}

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

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

.proposal-lead {
  font-size: 14px;
  color: var(--ink-2);
  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-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
}

.proposal-limit__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.proposal-limit__input {
  width: 5em;
  border: none;
  border-bottom: 1px solid var(--rule-mid);
  font-size: 15px;
  padding: 4px 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.proposal-limit__count {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
}

.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(--ink-2);
}

/* JSON は等幅・墨1px枠(コード面) */
.proposal-json__area {
  width: 100%;
  border: 1px solid var(--ink);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background: transparent;
}

.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-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* 語義数・注釈状態・操作は内容ぶんだけ。余りは表層形と読みに配る */
/* 見出しは `.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-words-table__annotated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
}

/* 未対応は朱(注意を引く現在の作業対象) */
.admin-words-table__unannotated {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--shu);
}

/* 保留は墨の淡色(対応待ちで脇に置いた語) */
.admin-words-table__on-hold {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

/* --- セクション見出し --- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-4);
}

.section-header .section-heading {
  margin: 0;
}

.section-header__more {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.section-heading {
  margin: var(--space-6) 0 var(--space-4);
  font-size: 18px;
}

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

.pagination span {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.pagination a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ink);
  padding: 5px 18px;
  font-size: 15px;
  text-decoration: none;
}

.pagination a:hover {
  background: var(--ink);
  color: var(--bg);
}

/* --- テーブル(検索結果・管理一覧): 墨の太罫で頭を締める --- */
/* 狭幅では列を潰さず、この入れ物の中だけ横スクロールで逃がす(main は overflow-x: clip)。
   中のテーブルに min-width を与えてはじめて効く(無いと width:100% のまま列が潰れる) */
.table-scroll {
  overflow-x: auto;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 2px solid var(--ink);
}

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

.data-table tbody tr:hover {
  background: #F2EFE6; /* 紙が一段沈む程度 */
}

.data-table td a {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
}

.data-table td a:hover {
  color: var(--shu);
}

/* --- ボタン: 墨枠。hover で反転。塗りは主要CTAのみ --- */
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  padding: 7px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn:hover {
  background: var(--ink);
  color: var(--bg);
}

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

.btn--primary:hover {
  background: var(--shu-deep);
  border-color: var(--shu-deep);
}

.btn--sm {
  font-size: 15px;
  padding: 3px 12px;
}

/* アイコン+極小の等幅ラベルを持つ行アクション用ボタン(annot. / del.)。
   高さと文字送りを揃え、隣接しても行がガタつかないようにする。 */
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  padding: 5px 10px;
  white-space: nowrap;
}

/* --- フォーム --- */
input[type="text"],
input[type="password"],
input[type="number"] {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-mid);
  padding: 6px 2px;
  max-width: 100%;
}

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

textarea,
select {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule-mid);
  padding: 6px 10px;
  max-width: 100%;
}

textarea:focus,
select:focus {
  border-color: var(--ink);
}

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

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

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 2px;
}

/* 検索のキーワード欄はひと回り大きく */
.field--keyword input {
  width: min(420px, 100%);
  font-size: 15px;
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}

/* フォームのまとまり: 墨の枠 */
.fieldset-card {
  border: 1px solid var(--ink);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}

.fieldset-card legend {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  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-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  list-style: none;
}

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

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

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

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

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

.field-help__body {
  border: 1px solid var(--ink);
  padding: var(--space-3);
}

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

/* 記法(等幅)と意味(明朝)の対比で読ませる早見表 */
.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(--shu);
  white-space: nowrap;
}

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

/* 入力欄の補足説明 */
.field-hint {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  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(--shu);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  color: var(--shu);
  font-size: 15px;
}

/* 一括登録の結果サマリ */
.bulk-result {
  border: 1px solid var(--ink);
  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-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
}

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

/* バリデーションエラー: 朱テキストのみ(背景を塗らない) */
.error-explanation {
  border: 1px solid var(--shu);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.error-explanation h2 {
  font-family: var(--font-gothic);
  font-size: 15px;
  color: var(--shu);
}

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

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

/* --- 一括登録のフェーズ表示(入力→読み→重複) --- */
.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-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

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

/* 番号は 1px 墨枠の正方形。現在は朱ベタ、完了は墨ベタ。 */
.steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  font-size: 12px;
  line-height: 1;
}

.steps__item.is-current {
  color: var(--shu);
}

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

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

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

/* --- 一括登録の読み確認テーブル(墨罫の表 + 朱の警告) --- */
.bulk-review {
  overflow-x: auto;
  border: 1px solid var(--ink);
  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(--rule);
}

.bulk-review__table thead th {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border-bottom: 2px solid var(--ink);
}

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

.bulk-review__no {
  width: 3rem;
  font-family: var(--font-mono);
  color: var(--ink-3);
}

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

.bulk-review__surface {
  width: calc(50% - 1.5rem);
  font-family: var(--font-mincho);
  font-size: 18px;
}

.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(--shu);
  outline: 1px solid var(--shu);
}

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

.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: 1px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.bulk-research__summary {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  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-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border: 1px solid currentColor;
}

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

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

.reading-status--research {
  color: var(--ink-2);
}

.reading-status__conf {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

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

/* 候補チップ: クリックで読み欄へ流し込む。選択中は墨ベタ反転。 */
.reading-choice {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 2px 8px;
  cursor: pointer;
  font: inherit;
}

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

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

.reading-choice__src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.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(--shu);
}

.bulk-review__warn-label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--shu);
}

.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(--shu);
  padding: 1px 8px;
}

.bulk-review__match-surface {
  font-family: var(--font-mincho);
}

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

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

.bulk-review__ok {
  color: var(--ink-3);
}

/* 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-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
  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(--shu);
}

.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;
}

/* --- 管理フォームの入れ子(語義・特徴の行) --- */
.word-sense-fields {
  border-top: 1px solid var(--rule-mid);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.word-sense-feature-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

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

.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;
}
/* ランダムジャンプ = 墨枠ボタン(.btn)に朱のシャッフルアイコンを添える */
.word-random {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.word-random .icon {
  color: var(--shu);
}
.word-random:hover .icon {
  color: var(--bg);
}

.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(--shu);
  color: var(--shu);
  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: 1px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.tag-add__summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.tag-add[open] .tag-add__summary {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  display: block;
  padding-bottom: var(--space-2);
}
.tag-add__hint {
  font-size: 13px;
  color: var(--ink-2);
  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: 1px solid var(--ink);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.tag-merge__summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.tag-merge[open] .tag-merge__summary {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  display: block;
  padding-bottom: var(--space-2);
}
.tag-merge__hint {
  font-size: 13px;
  color: var(--ink-2);
  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(--shu);
}

/* タグ一覧テーブル */
/* 狭幅でも列を潰さない(.table-scroll の中で横スクロールさせる) */
.tag-table {
  min-width: 560px;
}
.tag-table__num {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap;
}
/* ジャンルの階層インデント(中分類・小分類を段付けして木構造を示す)。
   段差を大きめに取り、朱のツリーコネクタ「└」でぶら下がりを明示する。
   等幅ラベルの階層列(大/中/小)と併せて読み取れるようにする。
   ※パディングは .data-table td より詳細度を上げないと効かない(セルの既定パディングに負ける)。 */
.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(--shu);
}
.tag-table__level {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.tag-table__inuse {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
/* seed(SeedCatalog)管理タグの印。墨1px枠+極小等幅(Issue 49) */
.tag-table__seed {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  vertical-align: 1px;
}
/* seed管理タグのリネーム時警告。墨1px枠パネル+朱の左罫(Issue 49) */
.seed-warning {
  margin: 12px 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  border-left: 3px solid var(--shu);
  font-size: 13px;
  line-height: 1.7;
}
.seed-warning__title {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--shu);
}

/* --- モバイルのフォーム部品は 16px を下限にする ---
   iOS Safari はフォーム部品の文字が 16px 未満だとフォーカス時にページ全体を自動ズームし、
   戻らないまま横スクロールが発生する。狭幅に限り文字を一段上げて防ぐ。
   クラスで小さく上書きしている部品(ヘッダー検索・並び順・一括登録系)も同じ理由で列挙する。 */
@media (max-width: 767px) {
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  textarea,
  .header-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 で描き、
   量の濃淡は朱チント(color-mix)、識別は色でなくラベルと位置で持つ。朱は「最」にだけ使う。 */

.stats-computed {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* 数字の壁: 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: 2px solid var(--ink);
  margin-bottom: var(--space-7);
}

.stats-wall__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--shu);
}

.stats-wall__list {
  margin: 0;
}

.stats-wall__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}

.stats-wall__row dt {
  font-size: 14px;
  color: var(--ink-2);
}

.stats-wall__row dd {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-wall__unit {
  margin-left: 3px;
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-3);
}

@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-2);
  border-bottom: 2px solid var(--ink);
  font-size: clamp(20px, 2.8vw, 26px);
}

.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-2);
  border-bottom: 2px solid var(--ink);
  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(--ink-2);
}

.stats-subheading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: clamp(16px, 2.2vw, 19px);
}

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

/* 章内の注記・補足(等幅の欄外注) */
.stats-hint,
.stats-covered {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* 読み物キャプション。行頭に朱の「※」を置く(欄外注の文法) */
.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(--ink-2);
}

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

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

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

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

.segmented__button {
  margin-left: -1px;
  padding: 5px 16px;
  border: 1px solid var(--ink);
  background: none;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.segmented__button:first-child {
  margin-left: 0;
}

.segmented__button:hover,
.segmented__button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* --- 頭文字と末尾文字: 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-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
}

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

.sound-matrix tbody th {
  padding: 0 8px 0 0;
  text-align: left;
}

.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: 1px solid color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 55% + 12%), var(--rule-mid));
  background: color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 70%), transparent);
  text-decoration: none;
}

a.sound-matrix__cell:hover {
  border-color: var(--ink);
  background: var(--ink);
}

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

/* 最多セルだけ数字を白抜きで直書きする(朱は「最」にだけ) */
.sound-matrix__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bg);
}

/* --- §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(--shu) 38%, transparent);
  transition: fill 0.15s;
}

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

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

.wave-chart__baseline {
  stroke: var(--ink);
  stroke-width: 2;
}

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

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

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

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

.stats-current__total {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.stats-current__delta {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--shu);
}

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

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

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

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

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

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

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

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

.timeline-chart__base {
  stroke: var(--ink);
  stroke-width: 2;
}

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

/* --- ジャンル別の語義数(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(--ink-2);
  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;
}

.genre-analysis__small-bar {
  height: 56px;
  width: 100%;
}

/* --- 語種の構成(ワッフル)とエンティティ型のヒートマップ ---
   ワッフルの塗りは順位で固定: 1位=朱ベタ / 2位=墨ベタ / 3位=朱チント / 4位=紙+墨枠 /
   5番目(その他)=墨チント。明度差で識別する(色相に依存しない) */
.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(--ink);
}

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

.waffle__cell--f2 {
  background: var(--ink);
}

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

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

.waffle__cell--f5 {
  background: color-mix(in srgb, var(--ink) 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: 2px solid var(--ink);
}

.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(--ink-3);
  white-space: nowrap;
}

/* エンティティ型のツリーマップ。面積 = 語義数(squarified、座標は%)。
   罫は各セルの墨 1px 枠の重なりで引く。塗りは朱チントの濃淡 */
.entity-treemap {
  position: relative;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--ink);
  background: var(--bg);
}

.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(--ink);
  background: color-mix(in srgb, var(--shu) calc(var(--fill, 0) * 50% + 6%), var(--bg));
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.entity-treemap__cell:hover {
  background: var(--ink);
  color: var(--bg);
}

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

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

/* --- §7 母音スペクトルと頭子音 ---
   帯は墨の明度4段 + オ段のみ朱チントの5値。右端の段名で識別する(色相に依存しない) */
.vowel-spectrum {
  display: block;
  width: 100%;
  height: auto;
}

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

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

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

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

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

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

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

/* 頭子音の横棒。行ラベル + 墨の棒(最多のみ朱) + 等幅の件数 */
.stats-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}

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

.stats-bars__row:first-child {
  border-top: none;
}

.stats-bars__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
}

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

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

.stats-bars__row:first-child .stats-bars__fill {
  background: var(--shu);
}

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

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

/* --- §8 特徴の見本つきランキング --- */
.feature-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}

.feature-rank__row {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}

.feature-rank__row:first-child {
  border-top: none;
}

.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: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* 実例語は明朝。該当部分に朱2px下線(単語詳細の校正記号の文法) */
.feature-rank__example {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.feature-rank__target {
  border-bottom: 2px solid var(--shu);
  padding-bottom: 1px;
}

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

.feature-rank__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--ink);
}

.feature-rank__row:first-child .feature-rank__fill {
  background: var(--shu);
}

/* --- 奥付(フッター直前の等幅一行) --- */
.stats-colophon {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
/* =====================================================================
   アノテーション・コンソール(管理者専用)。docs/design.md 準拠。
   紙×墨＋朱一色 / 角丸・影・ピルなし / 巨大明朝 × 等幅ラベル。
   チップ選択は極力 JS レス(隠し input + :has() で状態表現)。
   ===================================================================== */

.ann { position: relative; }

/* 上部ステータス(墨2px下端) */
.ann-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
}
.ann-bar__counter { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); }
.ann-bar__counter b { color: var(--ink); font-weight: 600; }
.ann-bar__counter .rest { color: var(--shu); }
.ann-bar__legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); }
.ann-bar__legend key { color: var(--shu); border: 1px solid var(--rule-mid); padding: 1px 5px; margin-right: 6px; }

/* 提案キューの絞り込み・並べ替え(Issue 67)。極小の等幅リンク、選択中は朱 */
.ann-queue-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; margin-bottom: var(--space-4); }
.ann-queue-filter__label { color: var(--ink-3); }
.ann-queue-filter__link { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.ann-queue-filter__link:hover { color: var(--ink); border-bottom-color: var(--rule-mid); }
.ann-queue-filter__link.is-on { color: var(--shu); border-bottom-color: var(--shu); }
.ann-queue-filter__sep { color: var(--rule-mid); }

/* 見本語 */
.ann-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 14px; align-items: center; }
.ann-eyebrow .no { color: var(--shu); }
.ann-word { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(34px, 7vw, 76px); line-height: 1.06; margin: var(--space-1) 0 2px; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ann-word-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink); }

/* 用語解説(Issue 39)。特徴選択の脇に置く控えめな開閉パネル(hover 限定にしない) */
.ann-glossary { margin-bottom: var(--space-2); }
.ann-glossary__summary { cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); padding: 2px 0; }
.ann-glossary__summary:hover { color: var(--shu); }
.ann-glossary[open] .ann-glossary__summary { color: var(--ink); }
.ann-glossary__list { margin: var(--space-2) 0 0; border: 1px solid var(--rule-mid); 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(--rule); }
.ann-glossary__item:last-child { border-bottom: 0; }
.ann-glossary__item dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink); padding-top: 2px; }
.ann-glossary__item dd { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.ann-glossary__examples { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 560px) {
  .ann-glossary__item { grid-template-columns: 1fr; }
}

/* Claude の提案パネル(Issue 38)。朱の1px枠で「機械の下書き」であることを示す */
.ann-proposal { border: 1px solid var(--shu); 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-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--shu); }
.ann-proposal__confidence { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--rule-mid); padding: 1px 8px; color: var(--ink-2); }
.ann-proposal__confidence--low { color: var(--shu); border-color: var(--shu); }
/* 反映済み/見送りの状態バッジ(注釈済みの語を見直しているとき) */
.ann-proposal__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--ink); padding: 1px 8px; color: var(--on-ink); background: var(--ink); }
.ann-proposal__status--dismissed { color: var(--ink-2); background: transparent; border-color: var(--rule-mid); }
/* 立項スコア(Issue 39)。3以下は朱でオーナー判断を促す */
.ann-proposal__entry { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--rule-mid); padding: 1px 8px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ann-proposal__entry--concern { color: var(--shu); border-color: var(--shu); }
.ann-proposal__notes--entry { color: var(--shu); }
/* 複数語義(同音異義語・Issue 41)。語義ごとに細罫で区切り、極小の等幅で語義番号を打つ */
.ann-proposal__senses-note { font-size: 12px; color: var(--ink-2); margin: 0 0 var(--space-2); }
.ann-proposal__sense { border-top: 1px solid var(--rule); 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-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--shu); margin-bottom: 4px; }
.ann-proposal__grid { display: grid; grid-template-columns: 92px 1fr; gap: 4px 18px; margin: 0; }
.ann-proposal__grid dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); padding-top: 3px; }
.ann-proposal__grid dd { margin: 0; font-size: 14px; }
.ann-proposal__grid .sep { color: var(--shu); margin: 0 4px; }
.ann-proposal__new { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--shu); border: 1px solid var(--shu); padding: 0 6px; margin-left: 6px; }
/* 新設候補のワンタップ作成ボタン(Issue 66)。バッジと同じ見た目で、hover で朱反転 */
.ann-proposal__new-form { display: inline; margin: 0; }
.ann-proposal__new--btn { background: transparent; cursor: pointer; line-height: 1.5; }
.ann-proposal__new--btn:hover { background: var(--shu); color: var(--on-ink); }
/* 提案パネルの特徴(該当部分つき)。1件ずつ縦に積み、該当部分は極小の等幅で添える */
.ann-proposal__feature { display: block; margin: 2px 0; }
.ann-proposal__feature b { font-weight: 600; }
.ann-proposal__feature-target { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); margin-left: 8px; }
.ann-proposal__notes { font-size: 13px; color: var(--ink-2); margin: var(--space-2) 0 0; }

/* スティッキー引き継ぎ(Issue 37)。アクションバー左端の小さなトグル */
.ann-sticky { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-2); cursor: pointer; }
.ann-sticky:has(.ann-sticky__input:checked) { color: var(--shu); }

/* 表層形の訂正(Issue 36: 編集画面をコンソールへ統合)。誤字直し用の控えめな1行 */
.ann-surface { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: var(--space-3) 0 0; }
.ann-surface__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); }
/* 表層形は textarea。長い語(例: 50字超)も折り返して全文が見えるよう全幅・自動高。下線1本の見た目は維持 */
.ann-surface__input {
  flex: 1 1 100%; width: 100%; box-sizing: border-box;
  font-family: var(--font-mincho); font-weight: 500; font-size: 17px; line-height: 1.5;
  border: 0; border-bottom: 1px solid var(--rule-mid); background: transparent;
  padding: 4px 2px; margin: 0; resize: none; field-sizing: content;
  min-height: 1.7em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ann-surface__input:focus { border-bottom-color: var(--shu); }
.ann-surface__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }

/* 語義パネル(墨1px枠・番号刻印) */
.ann-sense { border: 1px solid var(--ink); padding: var(--space-4) var(--space-5) var(--space-5); margin-top: var(--space-5); }
/* 最低限の項目(読み・語種・ジャンル・品詞・エンティティ)が揃った語義。
   保存の可否とは無関係な、注釈が行き届いたことの目印(sense-completeness)。
   枠の色替えだけでは気付きにくいので、枠を二重にし、番号の刻印も緑のベタ面にする。
   inset の box-shadow は枠を太らせるだけでレイアウトを動かさない(影は落とさない)。 */
.ann-sense.is-complete {
  border-color: var(--midori);
  box-shadow: inset 0 0 0 1px var(--midori);
}
.ann-sense.is-complete .ann-sense__stamp { background: var(--midori); }
.ann-sense__head { display: flex; align-items: center; justify-content: space-between; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-3); }
.ann-sense__stamp { background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; padding: 5px 12px; }
.ann-sense__del { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; padding: 6px 12px; }
.ann-sense__del:hover { color: var(--shu); }

/* ラベル列 + 値列 */
.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(--rule); }
.ann-row:last-child { border-bottom: 0; }
.ann-row__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); padding-top: 6px; }

/* 読みも textarea。長い読み(例: 70字超)を折り返して全文表示。下線1本の見た目は維持 */
.ann-reading {
  width: 100%; box-sizing: border-box; display: block;
  font-size: 17px; letter-spacing: 0.04em; line-height: 1.5;
  border: 0; border-bottom: 1px solid var(--rule-mid); background: transparent;
  padding: 4px 2px; margin: 0; resize: none; field-sizing: content;
  min-height: 1.7em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ann-reading:focus { border-bottom-color: var(--shu); }
.ann-derived { display: flex; gap: 16px; flex-wrap: wrap; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }
.ann-derived b { color: var(--ink); font-weight: 400; }

/* チップ(隠し input + :has) */
.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: 1px solid var(--ink); color: var(--ink); background: transparent;
  font-family: var(--font-gothic); font-size: 13.5px; line-height: 1.3;
  padding: 6px 12px; min-height: 34px; cursor: pointer; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.ann-chip:hover { background: var(--ink); color: var(--on-ink); }
.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(--ink); color: var(--on-ink); }
.ann-chip:has(input[type="radio"].ann-chip__input:checked)::before { content: "\25CF"; font-size: 8px; color: var(--shu); }
.ann-chip:has(input[type="radio"].ann-chip__input:checked):hover::before { color: var(--on-ink-dim); }
.ann-chip:has(.ann-chip__input:focus-visible) { outline: 2px solid var(--shu); outline-offset: 2px; }
/* ジャンルのボタン型チップ(JS で is-on を付与) */
.ann-chip.is-on { background: var(--ink); color: var(--on-ink); }

/* その場追加 */
.ann-add { display: inline-flex; align-items: center; gap: 6px; }
.ann-add__btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); background: transparent; border: 1px dashed var(--rule-mid); padding: 5px 10px; cursor: pointer; min-height: 34px; }
.ann-add__btn:hover { border-color: var(--ink); color: var(--ink); }
.ann-add__input { width: 8em; font-size: 14px; border: 0; border-bottom: 1px solid var(--shu); padding: 4px 2px; }

/* ジャンル 段階表示 */
.ann-genre__current { font-family: var(--font-gothic); font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ann-genre__current .sep { color: var(--shu); }
.ann-genre__change { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; text-decoration: underline; }
.ann-genre__change:hover { color: var(--shu); }
.ann-genre__level { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
.ann-genre__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--shu); min-width: 1.4em; }
.ann-genre__level .ann-chips { flex: 1; }

/* 特徴: 範囲タップ */
.ann-feature { border: 1px solid var(--ink); 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-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); }
.ann-strip-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); margin: var(--space-3) 0 var(--space-1); }
.ann-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.ann-cell { font-family: var(--font-mincho); font-size: 18px; line-height: 1; text-align: center; min-width: 1.5em; padding: 9px 5px; border: 1px solid var(--rule-mid); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; }
.ann-strip--reading .ann-cell { font-family: var(--font-gothic); font-size: 14px; }
.ann-cell:hover { border-color: var(--ink); }
.ann-cell.is-sel { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ann-cell.is-start { color: var(--shu); border-color: var(--shu); box-shadow: inset 0 -2px 0 var(--shu); }
.ann-feature__result { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); margin-top: var(--space-2); }

/* 別表記(行追加・テキスト) */
.ann-subrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px dotted var(--rule); }
.ann-subrow input { flex: 1 1 8em; min-width: 6em; }
.ann-subrow .ann-remove { font-family: var(--font-mono); font-size: 15px; line-height: 1; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; padding: 6px; }
.ann-subrow .ann-remove:hover { color: var(--shu); }

.ann-addrow { align-self: flex-start; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 6px 14px; cursor: pointer; min-height: 34px; }
.ann-addrow:hover { background: var(--ink); color: var(--on-ink); }

/* 語義を追加 */
.ann-add-sense { display: block; width: 100%; margin-top: var(--space-5); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; background: transparent; color: var(--ink); border: 1px dashed var(--ink); padding: var(--space-3); cursor: pointer; }
.ann-add-sense:hover { background: var(--ink); color: var(--on-ink); }
.ann-add-sense small { display: block; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.08em; margin-top: 3px; }
.ann-add-sense:hover small { color: var(--on-ink-dim); }

/* 最下部アクションバー */
.ann-actionbar { position: sticky; bottom: 0; z-index: 4; background: var(--bg); border-top: 2px solid var(--ink); 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; }
.ann-actionbar .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-left: 6px; }
.ann-actionbar .btn:hover .kbd, .ann-actionbar .btn--primary .kbd { color: var(--on-ink-dim); }

/* 完了画面 */
.ann-done { padding: var(--space-6) 0; }
.ann-done__lead { font-family: var(--font-mincho); font-size: clamp(24px, 4vw, 36px); }

@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-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 400; border-bottom: 2px solid var(--ink); padding: 6px 10px; white-space: nowrap; }
.bulk-approval td { border-bottom: 1px solid var(--rule); padding: 8px 10px; vertical-align: top; }
.bulk-approval__no { font-family: var(--font-mono); font-size: 11px; color: var(--shu); white-space: nowrap; }
.bulk-approval__word { font-family: var(--font-mincho); font-size: 15px; }
.bulk-approval__word a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-mid); }
.bulk-approval__word a:hover { color: var(--shu); border-color: var(--shu); }
.bulk-approval__genre { font-size: 12px; color: var(--ink-2); }
@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(--rule-mid); padding: 6px 4px; margin-bottom: var(--space-2); }
  .bulk-approval td { border: 0; padding: 3px 8px; }
}

/* iOS Safari の自動ズーム対策(components.css のフォーム部品と同じ理由)。
   このファイルは components より後に読まれるため、ここの小さめ入力は個別に上げる */
@media (max-width: 767px) {
  .ann-add__input { font-size: 16px; }
}
/*
 * デザインシステムの読み込み順を明示するマニフェスト(docs/design.md 参照)。
 * tokens(変数) → base(素のタグ) → layout(骨格) → components(部品) の順で効かせる。
 * require_tree は使わない(アルファベット順で順序が壊れるため)。
 *






 */