/* ============================================================
   Liquid Glass UI — base material & components
   Apple の Liquid Glass に着想を得た Web 標準実装
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --glass-blur: 24px;
  --glass-saturate: 180%;
  --glass-tint: 255 255 255;   /* 地色 RGB */
  --glass-alpha: 0.55;         /* 地色の不透明度 = 可読性のつまみ */
  --glass-radius: 22px;
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-hi-top: rgba(255, 255, 255, 0.60);
  --glass-hi-bottom: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --glass-text: #10131a;
  --glass-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-tint: 22 24 28;
    --glass-alpha: 0.48;
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-hi-top: rgba(255, 255, 255, 0.22);
    --glass-hi-bottom: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.50);
    --glass-text: #f2f4f8;
  }
}

/* ---------- 2. 透かす背景を作る(必須) ---------- */
/* ガラスは背後に情報が無いと成立しない。無地ページには敷いておく。 */
.glass-backdrop {
  position: relative;
  min-height: 100%;
  background-color: #eef1f6;
  background-image:
    radial-gradient(60% 55% at 18% 22%, rgba(120, 170, 255, 0.85), transparent 70%),
    radial-gradient(55% 50% at 82% 30%, rgba(255, 140, 190, 0.70), transparent 70%),
    radial-gradient(70% 60% at 50% 92%, rgba(120, 235, 210, 0.65), transparent 72%);
}

@media (prefers-color-scheme: dark) {
  .glass-backdrop { background-color: #0b0d12; }
}

/* ---------- 3. ベースマテリアル ---------- */
.glass {
  position: relative;
  isolation: isolate;
  color: var(--glass-text);
  background: rgb(var(--glass-tint) / var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-hi-top),
    inset 0 -1px 0 var(--glass-hi-bottom);
}

/* スペキュラハイライト:これが無いと平坦な半透明板に見える */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 34%,
    rgba(255, 255, 255, 0) 60%
  );
}

/* コンテンツはハイライトより上に置く */
.glass > * {
  position: relative;
  z-index: 1;
}

/* 背景が激しい場合の可読性補強(ぼかしではなく地色で稼ぐ) */
.glass--solidify { --glass-alpha: 0.78; }

/* ---------- 4. コンポーネント ---------- */

/* 固定ナビゲーションバー */
.glass-bar {
  --glass-blur: 30px;
  --glass-radius: 0px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-inline: none;
  border-top: none;
}

/* フローティングカード / パネル */
.glass-card {
  padding: 20px 22px;
}

/* ボタン(pill) */
.glass-btn {
  --glass-radius: 999px;
  --glass-blur: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 590;
  cursor: pointer;
  transition:
    transform 0.28s var(--glass-ease),
    box-shadow 0.28s var(--glass-ease),
    background-color 0.28s var(--glass-ease);
}

.glass-btn:hover {
  transform: translateY(-1px);
  background: rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.12));
}

.glass-btn:active { transform: scale(0.96); }

.glass-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ドック / ツールバー */
.glass-dock {
  --glass-radius: 26px;
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 8px;
}

/* ドック内の項目はガラスを重ねない(ネスト禁止)。透明なチップにする。 */
.glass-dock__item {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 18px;
  padding: 10px 14px;
  background: rgb(var(--glass-tint) / 0.28);
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s var(--glass-ease), transform 0.2s var(--glass-ease);
}

.glass-dock__item:hover { background: rgb(var(--glass-tint) / 0.5); }
.glass-dock__item:active { transform: scale(0.94); }

/* ---------- 5. フォールバック(必須) ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(var(--glass-tint) / 0.94); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass {
    background: rgb(var(--glass-tint) / 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-btn,
  .glass-dock__item { transition: none; }
  .glass-btn:hover { transform: none; }
}

# Liquid Glass レビューチェックリスト

## A. 成立条件

- [ ] ガラスの背後に、透かす価値のある絵(写真・グラデーション・スクロールするコンテンツ)がある
- [ ] ガラスを使う役割が画面内で 1〜2 種類に絞られている
- [ ] 本文・表・入力欄など「読ませる/操作させる」領域はガラスの上に載っていない

## B. 質感

- [ ] `saturate()` が 160〜200% で入っている(blur だけになっていない)
- [ ] 1px の border と inset ハイライトで縁が光っている
- [ ] スペキュラハイライト(斜めの白グラデ)が入っている
- [ ] 外側シャドウが「大きくぼかして低不透明度」になっている(濃く小さい影は安く見える)
- [ ] 角丸が十分に大きい(パネル 20〜28px / ボタンは pill)

## C. 可読性

- [ ] 想定される **最も明るい背景** で本文 4.5:1 を満たす
- [ ] 想定される **最も暗い背景** で本文 4.5:1 を満たす
- [ ] アイコン・境界線が 3:1 を満たす
- [ ] `text-shadow` による誤魔化しをしていない
- [ ] ライト / ダーク両モードで確認済み

## D. アクセシビリティ

- [ ] `prefers-reduced-transparency: reduce` で不透明にフォールバックする
- [ ] `prefers-contrast: more` に対応している
- [ ] `prefers-reduced-motion: reduce` でモーションを止めている
- [ ] フォーカスリングがガラス上でも視認できる

## E. パフォーマンス

- [ ] 画面内の `backdrop-filter` 要素が 4 枚以下
- [ ] blur 値をアニメーションしていない(動かすのは transform / opacity のみ)
- [ ] ガラスのネストが 1 段以下
- [ ] 祖先に `filter` / `transform` が無いことを確認した
- [ ] `-webkit-backdrop-filter` を併記した
- [ ] スクロール・リサイズ時にカクつきが出ないか実機で確認した

---

## 症状別 調整早見表

| 症状 | 原因 | 対処 |
|---|---|---|
| ただの灰色の箱に見える | 背後に透かすものが無い | 背景にグラデーション/写真を敷く。無理ならガラスをやめる |
| 眠い・くすんで見える | 彩度が落ちている | `saturate()` を 180% 付近まで上げる |
| 平坦な半透明板に見える | 縁とハイライトが無い | 1px border + inset ハイライト + スペキュラを追加 |
| 文字が読みにくい | 地色が薄すぎる | `--glass-alpha` を上げる(blur を上げても改善しない) |
| 内側のパネルが濁る | ガラスの多段ネスト | 内側は半透明チップに置き換える |
| スクロールが重い | backdrop-filter が多すぎる | 枚数を減らす / blur を下げる / 固定要素のみに限定 |
| 効果が突然消える | 祖先の filter・transform | 祖先のスタイルを外すか、ガラス要素を階層外に出す |
| 影が安っぽい | 影が小さく濃い | ぼかしを大きく、不透明度を 0.15〜0.20 に下げる |