/* ==========================================================
   リキッドグラス（共通部品）
   使い方：ガラスにしたい要素に class="lg" を付け、js/liquid-glass.js を読み込む。
           角の丸みは各ページの CSS で border-radius を指定する。
           ガラスにしない画面幅では、各ページの CSS で
           background / backdrop-filter / box-shadow を none にし、::before を消す。
   しくみ：
   - どのブラウザでも：うっすら白い板＋軽いぼかし＋色を少しあざやかに＋ふちの光
   - Chrome系だけ：js/liquid-glass.js が、ふちで後ろの景色が曲がる
     レンズの効果（SVG フィルター）を足す（html.lg-refract）
   - 「透明度を下げる」「コントラストを上げる」設定の人には白い板で見せる
   ========================================================== */
:where(.lg) { position: relative; } /* 各ページで fixed などを指定したら、そちらが優先 */
.lg {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .1)),
    rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(2px) saturate(1.8) brightness(1.04);
  backdrop-filter: blur(2px) saturate(1.8) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(255, 255, 255, .35),
    inset 0 0 6px rgba(255, 255, 255, .16),
    0 6px 18px -6px rgba(30, 52, 70, .32),
    0 1px 3px rgba(30, 52, 70, .14);
}
/* ふちの光（左上と右下が明るい、細い光の線） */
.lg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 32%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .55) 85%, rgba(255, 255, 255, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Chrome系：レンズの効果（フィルターは JS が要素の大きさに合わせて作る） */
html.lg-refract .lg[data-lg-ready] {
  -webkit-backdrop-filter: var(--lg-filter) brightness(1.04);
  backdrop-filter: var(--lg-filter) brightness(1.04);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lg, html.lg-refract .lg[data-lg-ready] {
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}