/*
  yukkuri-thread.css — りんく/こん太/たぬ姉の吹き出しスレッド(共有コンポーネント)。

  ★2026-09-14: LP(tsuioku-no-kirameki/index.html)の inline CSS から【そのままの順序で】切り出した。
    /live/ でも同じ見た目を使うため、2箇所目を書かずにここを両方から読む
    (web-ios-android/CLAUDE.md 基準⑥: 静的HTML群が共有するスタイルは役割ごとに決まった共有置き場へ)。
  ★使う側が用意する CSS 変数: --lh-body(本文の行間) / --text-secondary(名前の色)。
  ★LP 固有の上書き(.hero-thread / .y-row.lp-pop-row / .tanabata-preview__dialog 等)は LP 側に残してある。
    このファイルは各ページの <style> より【前】に読み込むこと(ページ側の同名セレクタが勝つ順序を保つ)。

  マークアップ:
    <div class="yukkuri-thread">
      <div class="y-row [reverse]">
        <div class="speaker"><img src="…" alt="りんく" width="92" height="92"><span>りんく</span></div>
        <div class="bubble">…</div>
      </div>
    </div>
*/
.yukkuri-thread{display:grid;gap:18px;margin-top:20px}
.y-row{display:grid;grid-template-columns:minmax(50px,76px) minmax(0,1fr);gap:10px;align-items:start}
.y-row.reverse{grid-template-columns:minmax(0,1fr) minmax(50px,76px)}
.y-row .bubble{min-width:0}
.y-row .speaker img{width:64px;height:64px}
.y-row .speaker span{font-size:.74rem}
.y-row .bubble{
  padding:14px 16px;
  border-radius:22px;
  font-size:clamp(.88rem,2.9vw,.98rem)
}
.y-row .bubble::after{
  left:-7px;top:18px;width:14px;height:14px;
  transform:rotate(45deg)
}
.y-row.reverse .bubble::after{
  left:auto;right:-7px;top:18px;
  transform:rotate(45deg)
}
@media (min-width:761px){
  .y-row{grid-template-columns:112px minmax(0,1fr);gap:16px}
  .y-row.reverse{grid-template-columns:minmax(0,1fr) 112px}
  .y-row .speaker img{width:92px;height:92px}
  .y-row .speaker span{font-size:.8rem}
  .y-row .bubble{
    padding:18px 20px;
    border-radius:26px;
    font-size:1rem;
  }
  .y-row .bubble::after{
    left:-10px;top:50%;width:18px;height:18px;
    transform:translateY(-50%) rotate(45deg)
  }
  .y-row.reverse .bubble::after{
    left:auto;right:-10px;top:50%;
    transform:translateY(-50%) rotate(45deg)
  }
}
.speaker{display:flex;flex-direction:column;align-items:center;gap:8px}
.speaker img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(79,56,23,.14))}
.speaker span{color:var(--text-secondary);font-size:.8rem}
.bubble{
  position:relative;padding:18px 20px;border-radius:26px;background:rgba(255,253,248,.97);
  border:1px solid rgba(88,62,28,.1);line-height:var(--lh-body)
}
.bubble::after{
  content:"";position:absolute;left:-10px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);
  background:rgba(255,253,248,.97);border-left:1px solid rgba(88,62,28,.1);border-bottom:1px solid rgba(88,62,28,.1)
}
.y-row.reverse .bubble::after{
  left:auto;right:-10px;border-left:none;border-bottom:none;border-right:1px solid rgba(88,62,28,.1);border-top:1px solid rgba(88,62,28,.1)
}
@keyframes yukkuriFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(-1.4deg)}
}
@keyframes yukkuriBubbleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@media (max-width:360px){
  .y-row{grid-template-columns:minmax(46px,64px) minmax(0,1fr);gap:8px}
  .y-row.reverse{grid-template-columns:minmax(0,1fr) minmax(46px,64px)}
  .y-row .speaker img{width:56px;height:56px}
}