@charset "UTF-8";
/* ==========================================================================
   Suggesco ─ 記事の読み上げ（AIの声）  2026-08-16
   --------------------------------------------------------------------------
   記事の冒頭に置く再生バー。声は odaira 本人のクローン（Higgsfield seed_audio）。

   ■ 速度切替を持たせてある（odaira指定「1.5倍速モード」）。
     1.0 → 1.25 → 1.5 → 2.0 の順で回り、選んだ速度は localStorage に覚える。
   ■ 紙芝居とは別の入口。紙芝居に音は載せない（「読みながら」を壊さないため）。
   ■ 色はトークンのみ。16進を直書きしない（ダークモードで壊れないため）。
   ========================================================================== */

.sgv{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);background:var(--paper-2);
  padding:11px 12px;margin:22px 0 6px;
}
.sgv__play{
  flex:0 0 auto;width:42px;height:42px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;
  display:grid;place-items:center;transition:.2s;padding:0;
}
.sgv__play:hover{background:transparent;color:var(--ink)}
.sgv__play svg{width:14px;height:14px;fill:currentColor;display:block}
.sgv__body{flex:1;min-width:0}
.sgv__ttl{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.sgv__ttl b{font-weight:400;letter-spacing:.06em;text-transform:none;font-size:11px;color:var(--ink-2)}

/* シークバー。細い線1本にして、記事の邪魔をしない。 */
.sgv__bar{
  position:relative;height:14px;cursor:pointer;display:flex;align-items:center;
}
.sgv__bar::before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--line)}
.sgv__bar i{position:absolute;left:0;height:2px;width:0;background:var(--ink)}
.sgv__bar:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

.sgv__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);margin-top:6px;
}
.sgv__rate{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  padding:4px 8px;cursor:pointer;transition:.2s;
}
.sgv__rate:hover{border-color:var(--ink);color:var(--ink)}
.sgv__rate[data-on="1"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 読み込み中・失敗したときの一言。黙って無反応にしない。 */
.sgv__note{font-family:var(--font-sans);font-size:11.5px;color:var(--ink-3)}

@media (max-width:480px){
  .sgv{gap:10px;padding:10px}
  .sgv__play{width:38px;height:38px}
}
@media print{.sgv{display:none}}