/* とげとげが止まらないとき（内部名: continuous_toge_mode）専用スタイル。
   既存 style.css のCSS変数（--ink 等）を流用し、独立ファイルとして追加する。
   既存クラスとの衝突を避けるため continuous-toge- プレフィックスで統一。 */

.continuous-toge-trigger{
  display:block;
  margin:10px auto 0;
  padding:9px 18px;
  min-height:44px;
  box-sizing:border-box;
  border:1px solid var(--line);
  background:var(--rose);
  color:var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
/* 2026-08-20: 実測高さ38pxで44px未満だったため、min-heightで底上げする
   （既存のpadding指定はそのまま維持し、視覚上の変化は最小限に留める）。 */
.continuous-toge-trigger:hover{transform:translateY(-1px);box-shadow:var(--soft-shadow)}

.continuous-toge-panel{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(85,53,47,.35);
}
.continuous-toge-panel.hidden{display:none}
body.continuous-toge-open{overflow:hidden}

.continuous-toge-card{
  position:relative;
  width:100%;max-width:420px;
  background:var(--white);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:26px 22px 22px;
}
.continuous-toge-close{
  position:absolute;top:12px;right:14px;
  border:none;background:none;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;padding:6px;
}
.continuous-toge-heading{
  font-size:17px;margin:0 0 10px;color:var(--ink);text-align:center;
}
.continuous-toge-intro{
  font-size:13px;color:var(--muted);line-height:1.8;text-align:center;
  margin:0 0 18px;
}
.continuous-toge-blocks{
  margin:0 0 20px;padding-left:0;list-style:none;counter-reset:ctoge;
}
.continuous-toge-blocks li{
  counter-increment:ctoge;
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px 12px 40px;
  margin-bottom:10px;
  font-size:13px;
  line-height:1.8;
  color:var(--ink);
}
.continuous-toge-blocks li::before{
  content:counter(ctoge);
  position:absolute;left:12px;top:12px;
  width:20px;height:20px;border-radius:50%;
  background:var(--pink);color:#fff;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.continuous-toge-cta{
  display:block;width:100%;
  border:none;background:var(--pink);color:#fff;
  border-radius:14px;padding:13px;
  font-size:14px;font-weight:700;cursor:pointer;
}
.continuous-toge-cta:hover{opacity:.92}

@media(max-width:700px){
/* .continuous-toge-panelはflexのjustify-content:centerで子をstretchしないため、
   width:100%が実際のビューポート幅ではなく内容依存で解決され、狭い画面でカードが
   右にはみ出すことがある（good_repliesのmodal-card-wideと同種の問題）。viewport単位で
   明示的に実際の画面幅基準のサイズへ固定する。 */
.continuous-toge-card{
  width:calc(100vw - 40px);
  max-width:calc(100vw - 40px);
}
}