/* =====================================================================
   やさしく注釈エンジン — 唯一のスタイル正典（single source of truth）
   全ページ共通。本体(static)は _fragments/header.html 経由、
   LAB(Astro)は Base.astro 経由でこの 1 ファイルを読み込む。
   ボタン・点線下線・吹き出しポップアップのすべてをここで管理する。
   ※ インライン style でボタン色を上書きしないこと（バグの温床）。
   ===================================================================== */

/* ── やさしくボタン（デフォルト / ON 両状態を CSS で一元管理）── */
#jargon-btn {
  border-color: var(--color-rule, #d2d2d7);
  color: var(--color-ink-2, #6e6e73);
}
#jargon-btn.is-on {
  background: var(--color-accent, #d8431f);
  color: #fff;
  border-color: var(--color-accent, #d8431f);
}

/* ── 注釈された用語（点線下線＋発見性の「?」）── */
.ej-term {
  border-bottom: 1px dashed var(--color-accent, #d8431f);
  cursor: help;
  text-underline-offset: 2px;
  border-radius: 1px;
  transition: background .15s;
}
.ej-term:hover, .ej-term:focus-visible { background: var(--color-accent-soft, #fbe4de); outline: none; }
.ej-term::after {
  content: "?";
  font-size: .6em; vertical-align: super; line-height: 0;
  color: var(--color-accent, #d8431f); margin-left: 1px;
  opacity: 0; transition: opacity .15s;
}
.ej-term:hover::after, .ej-term:focus-visible::after { opacity: 1; }

/* ── 吹き出しポップアップ ── */
.ej-pop {
  position: absolute; z-index: 60; max-width: 300px;
  background: var(--color-ink, #1d1d1f); color: var(--color-paper, #fff);
  padding: .7rem .85rem; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  font-family: var(--font-body, -apple-system, sans-serif); line-height: 1.6;
}
.ej-pop-term { display: block; font-size: .72rem; font-weight: 700; color: var(--color-accent, #d8431f); letter-spacing: .02em; }
.ej-pop-yomi { display: block; font-size: .62rem; color: rgba(255,255,255,.55); margin-top: 1px; }
.ej-pop-easy { display: block; font-size: .9rem; margin-top: .35rem; }
.ej-pop-blog { display: inline-block; margin-top: .6rem; font-size: .75rem; font-weight: 600; color: var(--color-accent, #d8431f); text-decoration: none; border: 1px solid var(--color-accent, #d8431f); border-radius: 4px; padding: .18rem .55rem; letter-spacing: .02em; transition: background .15s, color .15s; }
.ej-pop-blog:hover { background: var(--color-accent, #d8431f); color: #fff; }
.ej-pop::after {
  content: ""; position: absolute; left: var(--arrow-x, 50%); margin-left: -7px;
  border: 7px solid transparent;
}
.ej-pop[data-place="top"]::after { top: 100%; border-top-color: var(--color-ink, #1d1d1f); }
.ej-pop[data-place="bottom"]::after { bottom: 100%; border-bottom-color: var(--color-ink, #1d1d1f); }
@media (max-width: 640px) { .ej-pop { max-width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .ej-term, .ej-term::after { transition: none; } }

/* ── やさしくモード時の折返し保護（長い言い換えでもレイアウトを壊さない）── */
body.jargon-mode .phrase {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
body.jargon-mode h1,
body.jargon-mode h2,
body.jargon-mode h3 {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}