/* dyzo_enhance.css — dyzo_enhance.js の見た目
   d55 ホバープレビューカード ／ d56 上付き数字の出典脚注
   色は dyzo_blog.css の変数を使う（単独で読み込まれても壊れないよう既定値を持たせる）。 */

/* 7色（design_system_brief.md §3 が正本）。dyzo_blog.css と同じ値を持たせる。 */
:root{
  --d-line:rgba(22,32,28,.13); --d-bg:#f5f8f5; --d-accent:#008208; --d-muted:#5c6763;
  --d-ink:#16201c; --d-highlight:#deefbf;
}

/* ------------------------------------------------------------------ *
 * 共用ポップアップ
 * ------------------------------------------------------------------ */
.d-pop{
  position:absolute; z-index:9999; width:320px; max-width:calc(100vw - 24px);
  background:#fff; border:1px solid var(--d-line); border-radius:10px;
  box-shadow:0 6px 24px rgba(17,24,39,.14);
  font-size:.86rem; line-height:1.55; color:var(--d-ink);
  opacity:0; transform:translateY(-3px);
  transition:opacity .13s ease, transform .13s ease;
  pointer-events:auto;
  overflow:hidden;   /* 画像の角をカードの丸みで切る */
}
.d-pop.is-open{opacity:1; transform:none}
.d-pop--above{transform:translateY(3px)}
.d-pop--above.is-open{transform:none}
.d-pop__inner{padding:12px 14px}

/* プレビューカード（Wikipedia型＝上半分が画像・下半分がテキスト） */
.d-pop--card .d-pop__inner{display:block; padding:0}
.d-pop__thumb{
  display:block; width:100%; height:auto;
  /* アイキャッチ標準に合わせる。40:21 は 1200×630（Metaのog:image推奨実寸）と
     1440×756 が共有する比率。よく言われる「1.91:1」はこれを四捨五入した呼び名なので、
     数字は丸めずに書く。 */
  aspect-ratio:40/21;
  object-fit:cover;
  margin:0; border:0;
  background:var(--d-bg);     /* 読み込み前・透過画像の下地 */
}
.d-pop__text{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  padding:12px 14px;
}
.d-pop__title{font-weight:700; font-size:.9rem; line-height:1.4}
.d-pop__excerpt{color:var(--d-muted)}
.d-pop__site{font-size:.72rem; color:var(--d-muted)}

/* aspect-ratio が使えない古いブラウザ向けの保険 */
@supports not (aspect-ratio: 1/1){
  .d-pop__thumb{height:168px}   /* 320 ÷ (40/21) ≒ 168 */
}

/* 脚注のツールチップ */
.d-pop--src{width:360px}
.d-pop__srcnum{
  display:block; font-size:.72rem; font-weight:700;
  color:var(--d-accent); margin-bottom:4px;
}
.d-pop__src a{word-break:break-all}

/* カードが出るリンクの見え方（下線は既存のまま。点線で「押すと何か出る」を示す） */
.d-haspop{text-underline-offset:2px}
.d-haspop:hover{text-decoration-style:dotted}

/* ------------------------------------------------------------------ *
 * 出典脚注
 * ------------------------------------------------------------------ */
sup.d-fn-sup{line-height:0; margin-left:1px}
a.d-fn{
  font-size:.68em; font-weight:700; text-decoration:none;
  color:var(--d-accent); padding:0 2px; border-radius:3px;
  background:rgba(0,130,8,.08);
}
a.d-fn::before{content:"["}
a.d-fn::after{content:"]"}
a.d-fn:hover,a.d-fn:focus-visible{background:rgba(0,130,8,.18); text-decoration:none}
a.d-fn--missing{color:#b91c1c; background:rgba(185,28,28,.1)}

/* 出典リスト。番号は自前で出す（本文の脚注番号と必ず一致させるため） */
ol.d-sources.d-sources--ready{list-style:none; padding-left:0; counter-reset:none}
ol.d-sources.d-sources--ready > li{
  position:relative; padding-left:2.6em; margin:.45em 0;
  font-size:.92em; line-height:1.6; scroll-margin-top:90px;
}
ol.d-sources.d-sources--ready > li::before{
  content:"[" attr(value) "]";
  position:absolute; left:0; top:0;
  font-weight:700; color:var(--d-accent); font-size:.86em;
}
ol.d-sources.d-sources--ready > li > a.d-src-back{
  position:absolute; left:2.05em; top:0;
  text-decoration:none; color:var(--d-muted); font-size:.9em;
}
ol.d-sources.d-sources--ready > li > a.d-src-back:hover{color:var(--d-accent)}

/* 飛んだ先を一瞬光らせる（どの行に来たのか分かるように） */
.is-flash{animation:d-flash 1.8s ease-out 1}
@keyframes d-flash{
  0%,55%{background:var(--d-highlight)}
  100%{background:transparent}
}

/* ------------------------------------------------------------------ *
 * 端末・設定への配慮
 * ------------------------------------------------------------------ */
@media (hover:none){
  .d-pop{display:none}      /* タッチ端末ではカードを出さない（JS側でも止めている） */
}
@media (prefers-reduced-motion:reduce){
  .d-pop{transition:none}
  .is-flash{animation-duration:.01s}
}
@media (max-width:480px){
  .d-pop__text{padding:10px 12px}
}