/* 開いているときだけ本文との間を空ける（閉じたら見出し1行ぶんの高さにする）。 */
.eye-doc-text-notice-details[open] > .eye-doc-text-notice-head { margin-bottom: 4px; }
.eye-doc-text-notice-row + .eye-doc-text-notice-row { margin-top: 4px; }

@media (max-width: 900px) {
  /* 狭い画面では並べても読めない。縦に積む。 */
  .eye-doc-body { flex-direction: column; }
  .eye-doc-right { border-left: none; border-top: 1px solid var(--stroke); padding-top: 0; }
}

/* 上端の「原本をダウンロード」。形式を問わず出す（#683 のレビューで、
   PDF に導線が無いことが分かった）。切り替えボタンと同じ高さに揃える。 */
.eye-doc-download-top {
  flex-shrink: 0;
  margin-left: 4px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.eye-doc-download-top:hover { background: var(--chip-bg-hover); color: var(--text); }
.eye-doc-download-top:disabled { opacity: .5; cursor: default; }
.eye-doc-download-top.hidden { display: none; }

/* ページ送り。下端中央に浮かせる（上端は zoom / タイトル / 閉じるで埋まっている）。 */
.eye-doc-nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.eye-doc-nav.hidden { display: none; }
.eye-doc-nav button {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}
.eye-doc-nav button:hover:not(:disabled) { background: var(--chip-bg-hover); }
.eye-doc-nav button:disabled { opacity: .35; cursor: default; }
.eye-doc-nav-pos {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text);
  border-left: 1px solid var(--stroke);
  border-right: 1px solid var(--stroke);
}
.eye-doc-nav-pos input {
  width: 44px;
  padding: 5px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 6px;
}
.eye-doc-hit-jump {
  font-size: 12px !important;
  padding: 8px 12px !important;
  color: var(--pri) !important;
  border-left: 1px solid var(--stroke) !important;
  white-space: nowrap;
}
.eye-doc-hit-jump.hidden { display: none; }
/* 資料を開くボタン（参照元 / 元PDF / 出どころ）の共通の見え方。
 *
 * **押す前から青くしておく。** 以前は3種類とも `color: var(--text-muted)` +
 * `border-color: var(--stroke)` で、`--pri` になるのは `:hover` の時だけだった。
 * カードの中で最も薄い要素が「資料を開く唯一の入口」になっていて、
 * 気づかないという指摘が出た（利用者フィードバック）。hover 前提の可視性は
 * タッチ環境では最初から成り立たない。
 *
 * 3種類のガタイ（丸いラベル型・アイコンのみの正方形・省略付きのファイル名）は
 * それぞれのクラスが持ち、**配色だけ**をこの変数群で共有する。値を各クラスに
 * 書き写すと、次に色を変えたときに1つだけ古くなる。
 *
 * **`:root` ではなく `body` に置くこと。** テーマ変数（app.css）は
 * `body[data-theme="light"|"dark"]` が持っており、`html`（`:root`）には `--pri` が無い。
 * `:root` で `color-mix(... var(--pri) ...)` を組むと `--pri` が未定義のまま解決され、
 * guaranteed-invalid になって `background` ごと落ちる（ライト/ダークとも無地になる）。 */
body {
  --ref-src-fg: var(--tone-info-fg);
  --ref-src-border: color-mix(in srgb, var(--pri) 42%, transparent);
  --ref-src-bg: color-mix(in srgb, var(--pri) 10%, transparent);
  --ref-src-bg-hover: color-mix(in srgb, var(--pri) 20%, transparent);
}

/* 「参照元」ラベル付きの丸ボタン（新聞用語集・カタカナ・要注意ワードの紙面画像、
   コンプラ照合カードの根拠 PDF）。以前は呼び出し側が 50x24 のインラインスタイルを
   3箇所に複製していた。 */
.ref-src-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 24px; padding: 0 9px; flex-shrink: 0;
  border: 1px solid var(--ref-src-border); border-radius: 9999px;
  background: var(--ref-src-bg); color: var(--ref-src-fg);
  font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.ref-src-btn:hover { background: var(--ref-src-bg-hover); border-color: var(--ref-src-fg); }
.ref-src-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

/* 新聞用語集の紙面の記号（#855。`_renderGlossaryTerm`）。
 * 紙面は縦組みで字の右に打つので、横組みでは字の右肩に小さく置く。
 * inline-block にしてあるのは、× 側の表記の取り消し線を記号に伝えないため
 * （inline の子には親の text-decoration が描かれる。inline-block には描かれない）。 */
.gl-mark {
  display: inline-block;
  font-size: .8em;
  line-height: 1;
  vertical-align: .4em;
  margin: 0 1px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
  text-decoration: none;
  cursor: help;
}
/* 丸囲みの 統・特・付・慣。語の頭に置く（紙面の [付][統]母屋）。 */
.gl-mark.gl-mark-circled {
  vertical-align: .08em;
  font-size: .78em;
  width: 1.45em;
  height: 1.45em;
  line-height: 1.35em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  margin: 0 2px 0 0;
}
.gl-ruby rt { font-size: 9px; color: var(--ok); letter-spacing: 0; }

/* 記号にホバー（またはフォーカス）すると凡例を出す（`_showGlossaryTip`。body 直下に1つ）。
 * 記号の ::after にしないこと —— ルビの親字の中の記号で、ルビと親字の間に割り込んだ。 */
.gl-tip {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.gl-tip[hidden] { display: none; }
.gl-mark[data-tip]:focus { outline: 1px dotted currentColor; outline-offset: 1px; }

/* 「記号の見方」ボタン（`.ref-src-btn` と同じ丸ボタンの形）と、押すと開く凡例の欄。 */
.gl-legend-btn {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; flex-shrink: 0;
  border: 1px solid var(--ref-src-border); border-radius: 9999px;
  background: var(--ref-src-bg); color: var(--ref-src-fg);
  font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.gl-legend-btn:hover,
.gl-legend-btn[aria-expanded="true"] { background: var(--ref-src-bg-hover); border-color: var(--ref-src-fg); }
.gl-legend {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.gl-legend-title { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.gl-legend-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; }
.gl-legend-sym { flex-shrink: 0; width: 2.6em; text-align: center; font-size: 14px; color: var(--text); }
.gl-legend-sym .gl-mark { vertical-align: baseline; font-size: 1em; cursor: default; }
.gl-legend-sym .gl-mark.gl-mark-circled { font-size: .8em; }
.gl-legend-label { font-weight: 700; color: var(--text); margin-right: 6px; }
.gl-legend-meaning { color: var(--text-secondary); }