/* ==========================================================================
   scrollbar.css — 独自スクロールバーの見た目（OverlayScrollbars テーマ）
   ブランド色で控えめ。vendor/overlayscrollbars.css の後に読み込む。
   ========================================================================== */

/* ネイティブスクロールバーの非表示は OverlayScrollbars 自身が行うため、
   ここでは指定しない。手動で常に隠すと JS が失敗したときに
   スクロールバーが一切出なくなってしまう。 */

/* --- Lenis とのドラッグ中の同居 ------------------------------------------
   バーをドラッグしている間は Lenis を止める（smooth-scroll.js）が、
   lenis.stop() が付ける .lenis-stopped に対して vendor/lenis.css が
   `overflow: clip` を当てるため、ドキュメントがスクロール不可と見なされ
   OverlayScrollbars がバーを隠してしまう（掴んだ瞬間に消える）。
   ドラッグ中は Lenis のアニメーションだけ止めたいので overflow を戻す。
   値は scrollbar.js の OS_OPTIONS（x: hidden / y: scroll）と揃えること。
   vendor 側の `.lenis:not(.lenis-autoToggle).lenis-stopped` に勝つ詳細度が要る */
html.lenis.lenis-stopped.is-scrollbar-drag {
  overflow: hidden scroll;
}

/* --- テーマ: os-theme-loyal ----------------------------------------------
   モノトーンの半透明。地の色を選ばず、コンテンツの邪魔をしない。
   余白は OS の padding で作る。縦バーは
     幅         = --os-size
     左右の余白 = --os-padding-perpendicular
     上下の余白 = --os-padding-axis
     サムの太さ = --os-size - --os-padding-perpendicular * 2
   バー幅 18px・サム 6px なので、左右の余白は (18 - 6) / 2 = 6px。
   上下も同じ 6px にして四辺を揃える。
   掴める範囲はサムの見た目より広く、左右に --os-padding-perpendicular ぶん
   （＝各 6px）はみ出すので、当たり判定はバー幅ぶん確保される */
.os-theme-loyal {
  --os-size: 18px;                 /* 6px（サム）+ 6px × 2（左右の余白） */
  --os-padding-perpendicular: 6px;
  --os-padding-axis: 6px;          /* 上下の余白 */
  --os-track-border-radius: 9px;
  --os-track-bg: transparent;
  --os-track-bg-hover: rgba(0, 0, 0, 0.04);
  --os-track-bg-active: rgba(0, 0, 0, 0.06);
  --os-handle-border-radius: 3px;
  --os-handle-bg: rgba(0, 0, 0, 0.25);
  --os-handle-bg-hover: rgba(0, 0, 0, 0.4);
  --os-handle-bg-active: rgba(0, 0, 0, 0.55);
  --os-handle-min-size: 40px;
}

/* 縦バーは既定で下端を --os-size ぶん空ける（横バーとの角の取り合いのため）。
   このサイトは overflow-x: hidden で横バーが出ないので、その分を戻して
   上下の余白を --os-padding-axis だけに揃える */
.os-theme-loyal.os-scrollbar-vertical {
  bottom: 0;
}

/* gnav（青背景）の上では白系にする。
   テーマ変数は .os-scrollbar 自身に指定されるため、祖先クラスからの継承では
   勝てない。スクロールバー要素を直接指定して上書きする。 */
.os-theme-loyal--on-brand .os-scrollbar {
  --os-track-bg-hover: rgba(255, 255, 255, 0.1);
  --os-track-bg-active: rgba(255, 255, 255, 0.14);
  --os-handle-bg: rgba(255, 255, 255, 0.4);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.6);
  --os-handle-bg-active: rgba(255, 255, 255, 0.75);
}