/* 画面スタイル。docs/design/prototype.html の見た目（色・フォント・余白・ダークモード）を手本にしている */
:root{
  --bg:#FAFBFC;
  --surface:#FFFFFF;
  --fg:#1B2028;
  --muted:#5D6975;
  --faint:#8B96A1;
  --line:#E3E8ED;
  --accent:#27567F;
  --accent-soft:#EDF3F9;
  --warn-fg:#7A5A12;
  --warn-bg:#FBF3E2;
  --warn-line:#E8D8B0;
  --ok-fg:#2F6049;
  --ok-bg:#EBF4EF;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","Songti SC",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic","PingFang SC",system-ui,sans-serif;
  --pinyin:"Noto Serif","Noto Serif JP",serif;
  --def-size:17px;
  --def-lh:1.45;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10141A;
    --surface:#161B22;
    --fg:#E4EAF0;
    --muted:#9AA6B2;
    --faint:#73808D;
    --line:#262E38;
    --accent:#86B4DF;
    --accent-soft:#1A2531;
    --warn-fg:#E8CD8E;
    --warn-bg:#2A2314;
    --warn-line:#4A3D1C;
    --ok-fg:#9CD6B6;
    --ok-bg:#16261E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10141A;
  --surface:#161B22;
  --fg:#E4EAF0;
  --muted:#9AA6B2;
  --faint:#73808D;
  --line:#262E38;
  --accent:#86B4DF;
  --accent-soft:#1A2531;
  --warn-fg:#E8CD8E;
  --warn-bg:#2A2314;
  --warn-line:#4A3D1C;
  --ok-fg:#9CD6B6;
  --ok-bg:#16261E;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
}
a{color:var(--accent)}
.latin{font-family:var(--pinyin)}

/* ---- 検索バー（上に固定） ---- */
.bar{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.bar-in{max-width:680px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;gap:12px}
.field{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field svg{flex:0 0 auto;color:var(--faint)}
#q{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  padding:9px 0;
}
#q::placeholder{color:var(--faint)}
/* ロゴ「AIdian」（layout.php。検索窓の左。入口のページ /enter では検索窓を出さず、ロゴもリンクにしない）。欧文のセリフ体（ピンインと同じ Noto Serif）。
   「AI」だけ辞書の色（--accent。暗い配色では明るい青）にして、大文字の I と小文字の l が同じ形に見えて「Aldian」と読まれないようにする */
/* ロゴと、その下の小さな「日中・中日辞典」（.logo-sub。リンクなし。2026-11-03）を縦に並べる。横に置くと狭い幅で検索窓が削られるので縦 */
.brand{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:1px 0}
.logo{margin:0;padding:0;font-family:var(--pinyin);font-size:22px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--fg);text-decoration:none}
.logo-sub{margin:0;font-size:10px;line-height:1;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.logo-ai{color:var(--accent)}
a.logo:hover .logo-ai{filter:brightness(1.15)}
a.logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}

/* ---- 本文 ---- */
main{max-width:680px;margin:0 auto;padding:6px 16px 8px}
.lead{color:var(--muted);margin:8px 0 10px;font-size:14.5px;line-height:1.55}
.home .tagline{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--fg)} /* トップの読み方と一言（templates/home.php） */
.note{color:var(--faint);font-size:13.5px;margin:0}
.sec{
  margin:14px 0 8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--faint);
}
.sec .count{font-weight:400;letter-spacing:0;margin-left:4px}

/* 日本の字の形・繁体字を簡体字に直したときの一言（「中国語の『手纸』（『手紙』を簡体字にした形）」。ボタンのページ・語のページ・見つからないページの一番上。2026-11-03） */
.converted{margin:10px 0 2px;font-size:14px;line-height:1.6;color:var(--muted)}
.converted [lang]{font-size:16px;color:var(--fg)}
.converted [lang="zh-Hans"]{font-family:var(--serif)}
.converted a{font-size:13px}

/* 検索結果の枠（2026-11-03）：日本語の枠（.ja-frame「日本語の『手紙』は中国語で」）と中国語の枠（.zh-frame「中国語の『手纸』」）。
   見出しの中の補足（.sec-note「（『手紙』を簡体字にした形）」）、枠の中の小見出し（.subsec）、意味の違いの注意（.caution）、日本語の見出しの候補（.ja-cands） */
.ja-frame,.zh-frame{margin-top:8px}
.ja-frame .sec,.zh-frame .sec{font-size:13px;margin:6px 0 8px;letter-spacing:.06em}
.ja-frame .sec{color:var(--accent)}
.zh-frame .sec{color:var(--fg)}
.ja-frame .sec [lang],.zh-frame .sec [lang]{font-size:16px;letter-spacing:0}
.sec-note{font-weight:400;letter-spacing:0;font-size:12px;color:var(--muted);margin-left:4px}
.sec-note [lang]{font-size:13px}
.subsec{margin:12px 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--faint)}
.subsec .count{font-weight:400;letter-spacing:0;margin-left:4px}
.caution{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-fg);border-radius:8px;font-size:14px;line-height:1.6}
.caution.same{background:var(--ok-bg);color:var(--ok-fg);border-left-color:var(--ok-fg)}
.caution a{color:inherit;font-weight:600}
.caution [lang="zh-Hans"]{font-family:var(--serif);font-size:15px}
.ja-cands{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ja-cand{padding:10px 14px}
.ja-cand + .ja-cand{border-top:1px solid var(--line)}
.ja-cand p{margin:0}
.ja-cand-head a{text-decoration:none;color:var(--fg)}
.ja-cand-head a:hover .s-hw{color:var(--accent)}
.ja-cand-head .s-hw{font-size:21px}
.ja-cand-head .tag{vertical-align:middle;margin-left:6px}
.ja-sense{margin:10px 0 4px;color:var(--muted);letter-spacing:.06em} /* 意味がいくつもある語の、意味ごとの小見出し（例：食べ物のたまご） */
.ja-sense + .ja-cands{margin-bottom:4px}
.ja-cand-usage{font-size:14px;line-height:1.6;color:var(--fg);margin-top:2px}
.ja-cand-ex{margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ja-cand-ex .ex-zh{display:block;font-family:var(--serif);font-size:15px;color:var(--fg)}
.ja-cand-ex .ex-py{display:block;font-family:var(--pinyin)}
.ja-cand-ex .ex-ja{display:block}
.ja-meta{margin:6px 0 0}
.ja-none{margin:0 0 8px}
.related-lead{margin:8px 0 6px;font-size:14px;color:var(--muted)}
.related{margin-bottom:8px}
.miss .related-lead{margin-top:14px}

/* 検索結果の一覧 */
.results{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.results li + li{border-top:1px solid var(--line)}
.results a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:10px 14px;
  color:var(--fg);
  text-decoration:none;
}
.results a:hover{background:var(--accent-soft)}
.s-hw{font-family:var(--serif);font-size:19px;flex:0 0 auto}
.s-py{font-family:var(--pinyin);color:var(--muted);font-size:14px;flex:0 0 auto}
.s-ja{
  color:var(--faint);
  font-size:13px;
  margin-left:auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 検索結果の上の「『語』の AI の解説を見る」（検索語そのものが無く、部分一致だけのとき。templates/results.php の .offer）。
   一覧と同じ角丸の箱に、左の細い帯で目を引く。中のボタンは未収録の語のページと同じ部品（.gen-form。下の「AI の解説を見る」ボタン） */
.offer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:10px 0 2px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:12px;
}
.offer-lead{flex:1 1 auto;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.offer-lead [lang]{font-family:var(--serif);font-size:16px;color:var(--fg)}
/* 箱の中の並び：1 行目に案内文とボタン、ボタンの下の注意書き（.gen-note）は次の行に箱の全幅で。
   部品（.gen-form）と .gen-idle は箱の並びに溶かす（display:contents）。こうしないと注意書きの長さがボタンの列の幅になり、
   パソコン幅で案内文の最後の数文字だけが 2 行目に折り返していた（2026-11-03）。案内文の幅はその文の長さ（flex-basis auto）なので、
   幅が足りないときは文を途中で切らずにボタンが次の行へ移る。押したあとの「AI が解説を作っています」（.gen-status）も次の行に全幅で */
.offer .gen-form,.offer .gen-idle{display:contents}
.offer .offer-btn{flex:0 0 auto}
.offer .gen-note,.offer .gen-status{flex:1 1 100%}

/* 「『語』の AI の解説を見る」ボタン（templates/_generate.php。未収録の語のページと検索結果の上で共通）。
   送信の形（POST /generate）なので <button>。指で押しやすい高さ（44px）にし、狭い幅では行の全幅に広げる。
   文字色は背景色（--bg）にしているので、暗い配色（--accent が明るい青）でも読める。
   押すと JavaScript が .is-busy を付け、ボタンと注意書き（.gen-idle）の代わりに「AI が解説を作っています」（.gen-status）を出す */
.gen-form{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gen-idle{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%}
.gen-form.is-busy .gen-idle{display:none}
.gen-status{display:none}
.gen-form.is-busy .gen-status{display:block}
.offer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  max-width:100%;
  margin:0;
  padding:8px 22px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:var(--accent);
  color:var(--bg);
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.offer-btn [lang]{font-family:var(--serif);font-size:17px}
.offer-btn:hover{filter:brightness(1.08)}
.offer-btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.offer-btn:disabled{opacity:.6;cursor:default;filter:none}
@media (max-width:480px){.gen-idle,.offer-btn{width:100%}}
.gen-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--faint);text-wrap:balance} /* 2 行になるときは均等に折り返す（スマホ幅の検索結果の箱で「す。」だけが 2 行目に残らないように。対応していないブラウザではふつうの折り返し） */
.gen-lead{margin:0 0 4px;font-size:15px;line-height:1.55;color:var(--fg)}
.gen-limit{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* 見出し語ページ */
.entry-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.hw{
  font-family:var(--serif);
  font-weight:600;
  font-size:34px;
  line-height:1.15;
  margin:0;
  letter-spacing:.02em;
}
.py{
  font-family:var(--pinyin);
  font-size:18px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.say{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--accent);
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.say:hover{border-color:var(--accent)}
/* 確認状態の小さな札（目立たせない） */
.tag{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--faint);
  border:1px solid var(--line);
  border-radius:999px;
  padding:1px 8px;
  white-space:nowrap;
}
.senses{display:flex;flex-direction:column;gap:15px;margin-top:16px}
.sense-h{display:flex;align-items:flex-start;gap:8px}
.num{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:5px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:grid;
  place-items:center;
  margin-top:calc((var(--def-size) * var(--def-lh) - 20px) / 2 + 1px);
}
/* 品詞の札：意味の頭に置く。番号（塗りつぶし）と見分けがつくよう、枠線だけ・塗りなし・番号より小さい字。
   番号・札・意味を横に並べた別々の箱にしているので、意味が折り返しても 2 行目は札の下に潜らず、意味の書き出しにそろう。
   「慣用」「固有」のような 2 文字でも、min-width と左右の余白で札の形は崩れない。縦位置は番号と同じ式で意味の 1 行目の中心に合わせる */
.pos{
  flex:0 0 auto;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border:1px solid var(--faint);
  border-radius:4px;
  color:var(--muted);
  background:transparent;
  font-size:11px;
  font-weight:500;
  line-height:18px;
  text-align:center;
  white-space:nowrap;
  margin-top:calc((var(--def-size) * var(--def-lh) - 20px) / 2 + 1px);
}
.def{font-size:var(--def-size);font-weight:500;min-width:0;line-height:var(--def-lh);text-spacing-trim:trim-start} /* 行頭の全角かっこの左の空きを詰める（札との間隔をそろえる） */
.ex{list-style:none;margin:7px 0 0;padding:0 0 0 29px;display:flex;flex-direction:column;gap:9px}
.zh{font-family:var(--serif);font-size:17px;margin:0;line-height:1.45}
.pyx{font-family:var(--pinyin);font-size:12.5px;color:var(--muted);margin:0;line-height:1.4}
.ja{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45}
.sense.single .ex{padding-left:12px}

/* 学習メモ（hint に中身があるときだけ出す）。枠や強い色は使わず、細い線 1 本で区切るだけ。左端は見出し語・意味とそろえる */
/* 学習メモ（templates/entry.php の .hint）。薄い色の枠で目立たせる（2026-11-03。それまでは細い線 1 本で控えめだった）。
   背景は --accent-soft（暗い配色では濃い紺。どちらでも本文の色 --fg が読める）、左に辞書の色の帯、見出しは辞書の色、本文は本文と同じ色 */
.hint{margin-top:14px;padding:10px 14px 11px;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:10px}
.hint h2{margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.hint p{margin:0 0 5px;font-size:14px;line-height:1.65;color:var(--fg)}
.hint p:last-child{margin-bottom:0}

.fb{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.fb button{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-family:var(--sans);
  font-size:13.5px;
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
}
.fb button:hover{border-color:var(--accent);color:var(--accent)}

/* 未収録のとき（「まだありません」。生成の対象の語はこれに「AI の解説を見る」ボタンが付く＝.offer-page） */
.miss{padding-block:10px}
.miss .mw{font-family:var(--serif);font-size:38px;margin:0 0 6px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.miss .lead{margin:0 0 14px}
.offer-page .lead{margin-bottom:12px;color:var(--fg)}
.offer-page .lead [lang]{font-family:var(--serif)}
.offer-page .gen-form{margin-top:2px}

/* パイロット用の入口のページ（/enter）。見出し語ページと同じ明朝の見出し＋「ここが違う」と同じ枠 */
.enter{padding-block:18px 6px;max-width:420px}
.enter-title{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 6px;line-height:1.3}
.enter .lead{margin:0 0 14px;font-size:15px;color:var(--fg)}
.enter-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.enter-form label{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.enter-form input{
  font-family:var(--sans);
  font-size:16px; /* 16px 未満だと iPhone が入力時に画面を拡大する */
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  width:100%;
  min-width:0;
}
.enter-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.enter-form button{
  align-self:flex-start;
  margin-top:2px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--bg);
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  border-radius:999px;
  padding:9px 26px;
  cursor:pointer;
}
.enter-form button:hover{filter:brightness(1.08)}
.enter-form button:focus-visible{outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.enter-error{
  margin:0;
  padding:8px 10px;
  border:1px solid var(--warn-line);
  border-radius:8px;
  background:var(--warn-bg);
  color:var(--warn-fg);
  font-size:13.5px;
  line-height:1.5;
}
.enter .note{margin-top:12px}

/* 文書のページ（プライバシーポリシー /privacy。templates/privacy.php） */
.doc{padding-block:12px 4px}
.doc h1{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 10px;line-height:1.3}
.doc h2{font-size:15.5px;font-weight:600;margin:18px 0 4px;line-height:1.4}
.doc p,.doc li{font-size:14.5px;line-height:1.7;margin:0 0 6px}
.doc ul{margin:0 0 6px;padding-left:1.4em}
.doc li{margin-bottom:3px}
.doc .meta{color:var(--muted);font-size:13px;margin-top:14px}

footer{
  max-width:680px;
  margin:22px auto 0;
  padding:16px 16px 28px;
  color:var(--faint);
  font-size:12px;
  line-height:1.55;
  border-top:1px solid var(--line);
}
footer p{margin:0 0 5px}

/* AI が解説を作っている間の点の動き（.gen-status の中。ボタンを押したあとに出る） */
.dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){.dots i{animation:none;opacity:.6}}

/* ---- 「ここが違う」（直し案の入力欄）。JavaScript なしで開閉できる details を使う。開くと行の全幅に広がる ---- */
.fb{align-items:flex-start}
.sg{flex:0 1 auto;min-width:0}
.sg[open]{flex-basis:100%}
.sg summary{
  display:inline-block;
  list-style:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.6;
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
  user-select:none;
}
.sg summary::-webkit-details-marker{display:none}
.sg summary:hover,.sg[open] summary{border-color:var(--accent);color:var(--accent)}
.sg-form{
  margin:10px 0 0;
  padding:12px 14px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.sg-lead{margin:0;font-size:12.5px;color:var(--faint);line-height:1.5}
.sg-row{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.sg-row span{letter-spacing:.04em}
.sg-row select,.sg-row textarea{
  font-family:var(--sans);
  font-size:15px;
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 9px;
  max-width:100%;
}
.sg-row select{align-self:flex-start;min-width:9em}
.sg-row textarea{resize:vertical;line-height:1.5}
.sg-row select:focus,.sg-row textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* 人には見えない欄（ロボット避け）。display:none にはしない（ロボットが見分けるため）が、画面の外に置き、読み上げにも出さない */
.sg-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sg-actions{display:flex;justify-content:flex-end}
.sg-actions button,.adm button,.adm-login button{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  border-radius:999px;
  padding:7px 18px;
  cursor:pointer;
}
.sg-actions button:hover,.adm button:hover,.adm-login button:hover{filter:brightness(1.08)}
.sg-thanks{
  margin:18px 0 0;
  padding:10px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--ok-fg);
  border-radius:10px;
  background:var(--surface);
  color:var(--fg);
  font-size:14.5px;
}

/* ---- 運営者の確認画面（/admin）。辞書と同じ配色・フォント。スマホ幅でも崩れないよう 1 列を基本にする ---- */
.adm{padding-bottom:16px}
.adm-title{font-family:var(--sans);font-size:20px;font-weight:700;margin:12px 0 2px;line-height:1.3}
.adm-title .adm-py{font-family:var(--pinyin);font-weight:400;color:var(--muted);font-size:17px}
.adm-title .count{font-weight:400;font-size:13px;color:var(--faint);margin-left:6px}
.adm-sub{margin:0 0 8px;font-size:13px;color:var(--muted);line-height:1.6}
.adm-head{margin-bottom:6px}
.adm .muted{color:var(--faint)}
.adm-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin:6px 0 2px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.adm-nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13.5px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.adm-nav a:hover{color:var(--accent)}
.adm-nav a[aria-current="page"]{color:var(--accent);border-color:var(--line);background:var(--surface)}
.adm-logout{margin:0 0 0 auto}
.adm-logout button{background:transparent;color:var(--faint);border-color:transparent;font-size:12.5px;padding:4px 8px}
.adm-logout button:hover{color:var(--accent);filter:none}
.adm-flash{
  margin:8px 0 2px;
  padding:8px 12px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.55;
  border:1px solid var(--ok-bg);
  background:var(--ok-bg);
  color:var(--ok-fg);
}
.adm-flash.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-fg)}
.adm-login{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:360px;
  margin-top:10px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.adm-login label{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.adm-login input{
  font-family:var(--sans);
  font-size:16px;
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
}
.adm-login input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.adm-login button{align-self:flex-start}
.adm-error{color:var(--warn-fg);font-size:13.5px;margin:0}
.adm-batch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 10px}
.adm-batch button:disabled{opacity:.45;cursor:default}
.adm button:disabled{opacity:.45;cursor:default;filter:none}
.adm .tag{line-height:1.5}
.adm .tag.warn{color:var(--warn-fg);border-color:var(--warn-line);background:var(--warn-bg)}
.adm .tag.ok{color:var(--ok-fg);border-color:var(--ok-bg);background:var(--ok-bg)}
.adm .tag.muted{color:var(--faint)}
a.tag{text-decoration:none}

/* 一覧（直し案・語） */
.adm-list{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.adm-list li + li{border-top:1px solid var(--line)}
.adm-list li > a,.adm-list li.al-entry{display:flex;flex-direction:column;gap:3px;padding:9px 14px;color:var(--fg);text-decoration:none}
.adm-list li > a:hover{background:var(--accent-soft)}
.al-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.al-hw{font-family:var(--serif);font-size:19px;line-height:1.2;color:var(--fg);text-decoration:none}
.al-hw-ja{font-size:14.5px;font-weight:500;color:var(--fg)} /* サーバーの確認（/admin/check）の項目名 */
.al-py{font-family:var(--pinyin);color:var(--muted);font-size:14px}
.al-look{font-size:12px;color:var(--faint)}
.al-body{font-size:13.5px;color:var(--muted);line-height:1.5}
.al-part{display:inline-block;font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-right:6px;line-height:1.6;vertical-align:1px}
.al-meta{font-size:11.5px;color:var(--faint)}
.al-form{margin:0 0 0 auto}
.al-form button{font-size:12.5px;padding:4px 12px;background:var(--surface);color:var(--accent)}
.al-notes{margin:0;padding:0 0 0 18px;font-size:12.5px;color:var(--warn-fg);line-height:1.5}
/* 語の確認：絞り込み（スマホ幅では折り返して 1 列に近くなる）・件数・ページ・行の操作（「このままでよい」と「この読みを消す」） */
.adm-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 10px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--muted)}
.adm-filter label{display:flex;align-items:center;gap:5px}
.adm-filter select{font-family:var(--sans);font-size:13.5px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 6px;max-width:100%}
.adm-filter select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.adm-filter .chk input{margin:0;accent-color:var(--accent)}
.adm-filter button{font-size:12.5px;padding:4px 12px}
.adm-clear{font-size:12.5px;color:var(--faint)}
.adm-range{margin:0 0 6px;font-size:12.5px;color:var(--faint)}
.al-actions{display:flex;align-items:center;gap:4px 10px;margin-left:auto;flex-wrap:wrap}
.al-actions .al-form{margin:0}
.al-del{font-size:12px;color:var(--faint);text-decoration:none;border-bottom:1px dotted var(--faint);white-space:nowrap}
.al-del:hover{color:var(--warn-fg);border-bottom-color:var(--warn-fg)}
.adm-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 4px;font-size:13.5px;color:var(--muted)}
.adm-pager a{color:var(--accent);text-decoration:none}
.adm-pager a:hover{text-decoration:underline}
.adm-warn{margin:8px 0;padding:10px 14px;border:1px solid var(--warn-line);border-left-width:3px;border-radius:10px;background:var(--warn-bg);color:var(--warn-fg);font-size:14px;line-height:1.6}
.adm-cancel{font-size:13.5px;color:var(--muted)}

/* 直し案 1 件 */
.adm-sec{margin-top:14px}
.adm-sec .sec{margin-top:0}
.adm-dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:14.5px;line-height:1.55}
.adm-dl dt{color:var(--faint);font-size:12.5px;padding-top:2px;white-space:nowrap}
.adm-dl dd{margin:0;overflow-wrap:anywhere}
.adm-note{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.adm-note ul{margin:2px 0 0;padding-left:20px;color:var(--warn-fg)}
.adm-verdict{margin:0 0 6px;font-size:14.5px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.adm-text{margin:0 0 6px;font-size:14px;line-height:1.6}
.ae-label{display:inline-block;font-size:11px;color:var(--faint);letter-spacing:.06em;margin-right:8px;vertical-align:1px}
.adm-changes{margin:0 0 6px;padding-left:20px;font-size:13.5px;color:var(--muted);line-height:1.55}
.adm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.adm-actions .note{flex-basis:100%}
.adm button.primary{background:var(--ok-fg);border-color:var(--ok-fg)}
.adm button.danger{background:var(--surface);color:var(--warn-fg);border-color:var(--warn-line)}
.adm-memo{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);max-width:480px}
.adm-memo input{font-family:var(--sans);font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.adm-memo input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.adm-verify{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.adm-verify button{background:var(--surface);color:var(--accent)}

/* 今の項目と AI の直し案を並べる（パソコン幅では 2 列、スマホ幅では縦に） */
.adm-compare{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:700px){.adm-compare.two{grid-template-columns:1fr 1fr}}
.adm-col{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.adm-col-h{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--faint)}
.ae{display:flex;flex-direction:column;gap:7px}
.ae-head{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ae-hw{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2}
.ae-py{font-family:var(--pinyin);font-size:15px;color:var(--muted)}
.ae-sense{display:flex;flex-direction:column;gap:2px;padding:3px 0}
.ae-def{margin:0;display:flex;align-items:flex-start;gap:6px;font-size:15px;font-weight:500;line-height:1.45}
.ae-def .num,.ae-def .pos{margin-top:1px}
.ae-def .num{width:18px;height:18px;font-size:11px}
.ae-def .pos{height:18px;line-height:16px;min-width:18px}
.ae-meaning{min-width:0}
.ae-zh{margin:0 0 0 24px;font-family:var(--serif);font-size:15px;line-height:1.45}
.ae-pyx{margin:0 0 0 24px;font-family:var(--pinyin);font-size:12px;color:var(--muted);line-height:1.4}
.ae-ja{margin:0 0 0 24px;font-size:13px;color:var(--muted);line-height:1.45}
.ae-hint{margin:0;padding-top:6px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.55}
/* 変わるところ：下線と薄い下地で示す（色だけに頼らない） */
.chg{background:var(--warn-bg);box-shadow:0 0 0 2px var(--warn-bg);border-radius:3px;text-decoration:underline;text-decoration-color:var(--warn-fg);text-underline-offset:3px}
.ae-sense.chg{box-shadow:none;padding-left:6px;border-left:3px solid var(--warn-line);text-decoration:none}