/* ==========================================================
   glass.css — Liquid Glass（リキッドグラス）の見た目
   site.css / maker.css の「後」に読み込む。レイアウトは触らず、色・質感だけを上書きする。

   1. トークン（ライト / ダーク）
   2. 背景（ガラス越しに透ける、やわらかいグラデーション）
   3. ユーティリティ  .glass / .glass-strong / .glass-lite / .glass-tint / .glass-card / .glass-btn / .glass-specular
   4. 既存の部品への適用（紹介サイト → ツール本体）
   5. アクセシビリティ（透明度を下げる設定・動きを減らす設定・backdrop-filter 非対応）

   注意：backdrop-filter を付けた要素は
   - 中の position:fixed の基準になる（画面全体に出したいものの親には付けない）
   - 中に入れたガラスの「背後」をぼかせなくなる（中のものは .glass-lite にする）
   ========================================================== */

/* ---------- 1. トークン ---------- */
:root{
  color-scheme:light dark;

  /* 既存トークンの調整：グラデーションの上でも文字が読めるよう、補助文字と文字用の赤を少し濃く */
  --ink-sub:#5c564d;
  --accent-ink:#b0301b;          /* 文字・アイコンとして使う赤（塗りは --accent のまま） */
  --line:rgba(120,90,60,.16);
  --chip-bg:rgba(255,255,255,.42);
  --card:rgba(255,255,255,.62);  /* ガラスでない所（入力欄など）に残る「白」 */

  /* ガラスの素材 */
  --glass-bg:rgba(255,255,255,.22);
  --glass-bg-hover:rgba(255,255,255,.32);
  --glass-bg-strong:rgba(255,255,255,.66);  /* モーダル・シートなど、文字を長く読む面 */
  --glass-bg-lite:rgba(255,255,255,.38);    /* ガラスの中に置く小さな部品 */
  --glass-bg-sheet:rgba(252,249,246,.86);   /* 下から出るシート：後ろの画面が「染み」にならないよう、色味だけ移す */
  --glass-blur-sheet:blur(40px) saturate(150%);
  --glass-blur:blur(20px) saturate(180%);
  --glass-edge:rgba(255,255,255,.55);       /* 上・左の縁（光を受ける側） */
  --glass-edge-dim:rgba(255,255,255,.18);   /* 下・右の縁 */
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.08);
  --glass-shadow:0 8px 32px rgba(60,40,20,.12);
  --glass-shadow-lift:0 14px 40px rgba(60,40,20,.16);
  --glass-specular:rgba(255,255,255,.35);
  --glass-radius:24px;

  /* 背景のグラデーション */
  --bg-base:#f8f1ea;
  --bg-blob-1:rgba(255,168,140,.55);
  --bg-blob-2:rgba(178,190,255,.50);
  --bg-blob-3:rgba(255,214,150,.50);
  --bg-blob-4:rgba(150,214,205,.42);
}

/* ダーク：OSの設定に合わせる */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16120f;
    --ink:#f4efe9;
    --ink-sub:#c4bbb0;
    --accent-ink:#ff8a6e;
    --line:rgba(255,255,255,.12);
    --chip-bg:rgba(255,255,255,.08);
    --card:rgba(30,25,21,.72);
    --shadow:0 6px 24px rgba(0,0,0,.4);

    --glass-bg:rgba(255,255,255,.08);
    --glass-bg-hover:rgba(255,255,255,.13);
    --glass-bg-strong:rgba(32,27,23,.74);
    --glass-bg-lite:rgba(255,255,255,.07);
    --glass-bg-sheet:rgba(30,25,21,.86);
    --glass-blur:blur(20px) saturate(160%);
    --glass-edge:rgba(255,255,255,.22);
    --glass-edge-dim:rgba(255,255,255,.06);
    --glass-inset:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.25);
    --glass-shadow:0 8px 32px rgba(0,0,0,.38);
    --glass-shadow-lift:0 14px 40px rgba(0,0,0,.48);
    --glass-specular:rgba(255,255,255,.12);

    --bg-base:#15110e;
    --bg-blob-1:rgba(204,59,36,.42);
    --bg-blob-2:rgba(70,80,190,.40);
    --bg-blob-3:rgba(170,110,40,.32);
    --bg-blob-4:rgba(30,130,120,.30);
  }
}

/* ---------- 2. 背景 ---------- */
/* body に背景色があると下の疑似要素（z-index:-1）が隠れるので、色は html に持たせる */
html{ background:var(--bg-base); }
body{ background:transparent; }
/* iOS は background-attachment:fixed が効かないので、固定の疑似要素に敷く */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 50% at 12% 8%,  var(--bg-blob-1), transparent 70%),
    radial-gradient(45% 55% at 92% 18%, var(--bg-blob-2), transparent 70%),
    radial-gradient(50% 45% at 78% 92%, var(--bg-blob-3), transparent 70%),
    radial-gradient(45% 50% at 6% 88%,  var(--bg-blob-4), transparent 70%),
    var(--bg-base);
}

/* ---------- 3. ユーティリティ ---------- */

/* 基本の素材：半透明＋背後をぼかす＋光を受ける縁＋浮いた影 */
.glass,
.glass-card,
.glass-btn{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  border-left-color:var(--glass-edge);
  box-shadow:var(--glass-inset), var(--glass-shadow);
}
/* 文字を長く読む面（モーダル・シート・ドロップダウン）：不透明度を上げてコントラストを確保 */
.glass-strong{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  box-shadow:var(--glass-inset), var(--glass-shadow);
}
/* ガラスの中に置く部品（ぼかしなし。入れ子のぼかしは効かず、重いだけなので） */
.glass-lite{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  box-shadow:var(--glass-inset);
}
/* 色つきのガラス（主ボタン）。上半分にツヤ */
.glass-tint{
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 52%), var(--accent);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(204,59,36,.30);
}
.glass-card{ border-radius:var(--glass-radius); }
.glass-btn { border-radius:999px; }

/* 押せるガラス：乗せると明るく・少し浮く、押すと沈む */
.glass-btn,
.glass-card[href]{
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
@media (hover:hover){
  .glass-btn:hover,
  .glass-card[href]:hover{
    background:var(--glass-bg-hover);
    box-shadow:var(--glass-inset), var(--glass-shadow-lift);
    transform:translateY(-1px);
  }
}
.glass-btn:active{ transform:scale(.97); }

/* マウス位置に合わせて動く光（glass.js が --mx / --my を入れる）
   ::after を使うので、::after を別の用途で使っている要素には付けない */
.glass-specular{ position:relative; }
.glass-specular::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), var(--glass-specular), transparent 70%);
  opacity:0; transition:opacity .3s ease;
}
.glass-specular.is-lit::after{ opacity:1; }

/* ==========================================================
   4. 既存の部品への適用
   HTMLにクラスを足す代わりに、既存のセレクタを上のユーティリティと同じ素材でまとめる。
   ========================================================== */

/* ---------- 共通：文字としての赤 ---------- */
a{ color:var(--accent-ink); }
:focus-visible{ outline-color:var(--accent-ink); }

/* ---------- 紹介サイト：ナビバー ----------
   ぼかしは ::before に付ける。ヘッダー本体に付けると、スマホのドロップダウン（中に入っているガラス）の
   背後がぼけなくなるため。 */
.site-header{
  position:relative; z-index:30; isolation:isolate;
  background:none; border-bottom:1px solid var(--glass-edge-dim);
  box-shadow:inset 0 -1px 0 var(--glass-edge-dim), 0 4px 24px rgba(60,40,20,.06);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge);
}
.site-nav a{ color:var(--ink-sub); border-radius:999px; transition:background .3s ease, color .3s ease; }
@media (min-width:641px){
  /* もとの gap:18px と同じ幅になるよう、すき間を「押せる丸い面」の余白に置きかえる */
  .site-nav{ gap:0; margin-right:-10px; }
  .site-nav a{ padding:6px 10px; }
}
@media (hover:hover){
  .site-nav a:hover{ background:var(--glass-bg-hover); color:var(--ink); text-decoration:none; }
}
.nav-toggle{ border-radius:12px; transition:background .3s ease; }
.nav-toggle[aria-expanded="true"]{ background:var(--glass-bg-hover); }

@media (max-width:640px){
  .site-nav{
    top:calc(100% + 8px); left:12px; right:12px;
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge-dim); border-top-color:var(--glass-edge);
    border-radius:20px;
    box-shadow:var(--glass-inset), var(--glass-shadow-lift);
    padding:6px 8px;
  }
  .site-nav a{ padding:12px 12px; border-radius:0; border-bottom-color:var(--line); }
}

/* ---------- 紹介サイト：カード ---------- */
.feature-highlight,
.feature-card,
.tool-highlight,
.update-item,
.article-card,
.form-success{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  border-left-color:var(--glass-edge);
  box-shadow:var(--glass-inset), var(--glass-shadow);
  border-radius:var(--glass-radius);
}
/* もとは赤い枠で強調していたカード：縁の赤を残しつつガラスに */
.feature-highlight,
.tool-highlight{
  border-color:rgba(204,59,36,.35);
  border-top-color:rgba(255,255,255,.6);
  border-left-color:rgba(255,255,255,.6);
  box-shadow:var(--glass-inset), inset 0 0 0 1px rgba(204,59,36,.18), var(--glass-shadow);
}
.feature-highlight .icon,
.feature-card .icon,
.inline-icon{ color:var(--accent-ink); }

.article-card{ transition:background .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
@media (hover:hover){
  .article-card:hover{
    background:var(--glass-bg-hover);
    border-color:var(--glass-edge-dim);
    border-top-color:var(--glass-edge); border-left-color:var(--glass-edge);
    box-shadow:var(--glass-inset), var(--glass-shadow-lift);
    transform:translateY(-2px);
  }
}

/* 記事内の囲み */
.note-box{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim); border-top-color:var(--glass-edge);
  border-radius:20px; color:var(--ink-sub);
}
.todo-box{ border-radius:20px; }
@media (prefers-color-scheme:dark){
  .todo-box{ background:rgba(228,183,107,.10); border-color:rgba(228,183,107,.45); color:#e9cd94; }
}
.article-body h2{ border-left-color:var(--accent); }
.page-body th, .page-body td{ border-color:var(--line); }
.page-body th{ background:var(--glass-bg-lite); }
.ad-slot{ border-color:var(--line); border-radius:20px; }

/* ---------- 紹介サイト：ボタン ---------- */
a.btn-primary,
.form-submit{
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 52%), var(--accent);
  color:#fff;
  border:1px solid rgba(255,255,255,.28); border-bottom-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(204,59,36,.30);
  transition:box-shadow .3s ease, transform .3s ease, filter .3s ease;
}
.btn-more{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge); border-left-color:var(--glass-edge);
  box-shadow:var(--glass-inset), var(--glass-shadow);
  border-radius:999px;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
@media (hover:hover){
  a.btn-primary:hover,
  .form-submit:hover{ opacity:1; filter:brightness(1.06); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(204,59,36,.36); }
  .btn-more:hover{ background:var(--glass-bg-hover); border-color:var(--glass-edge-dim); border-top-color:var(--glass-edge); border-left-color:var(--glass-edge); box-shadow:var(--glass-inset), var(--glass-shadow-lift); }
}
a.btn-primary:active, .form-submit:active, .btn-more:active{ transform:scale(.97); }

/* ---------- 紹介サイト：フォーム ---------- */
.form-field input, .form-field textarea{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim); border-top-color:var(--line);
  border-radius:14px; color:var(--ink);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
  transition:background .3s ease, border-color .3s ease;
}
.form-field input:focus, .form-field textarea:focus{ background:var(--glass-bg-strong); border-color:rgba(204,59,36,.45); }

.site-footer{ border-top-color:var(--glass-edge-dim); }

/* ---------- ツール本体：スタート画面 ---------- */
.start-card .start-brand,
.start-card .start-note a,
.crosslink a,
.doc-inner a,
.help-text strong{ color:var(--accent-ink); }
.start-points li::before,
.doc-inner .doc-links a::after{ color:var(--accent-ink); }

button.btn-primary,
.bar-btn-primary{
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 52%), var(--accent);
  border:1px solid rgba(255,255,255,.28); border-bottom-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(204,59,36,.30);
  transition:box-shadow .3s ease, transform .3s ease, filter .3s ease, opacity .3s ease;
}
@media (hover:hover){
  button.btn-primary:hover, .bar-btn-primary:not(:disabled):hover{ filter:brightness(1.06); }
}
button.btn-primary:active{ transform:scale(.97); }

.doc-toggle,
.back-btn-start{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge); border-left-color:var(--glass-edge);
  box-shadow:var(--glass-inset), var(--glass-shadow);
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease, width .25s ease, padding .25s ease;
}
@media (hover:hover){
  .doc-toggle:hover,
  .back-btn-start:hover{ background:var(--glass-bg-hover); box-shadow:var(--glass-inset), var(--glass-shadow-lift); }
}
.doc-toggle:active{ transform:scale(.97); }

/* 「使い方・えらべる設定」のシート（モーダル） */
#startScreen .doc-backdrop,
.modal-backdrop{
  background:rgba(20,16,10,.28);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
/* 長文を読む面なので、不透明度とぼかしを強めにする（0.66 では後ろのボタンや絵文字が色の染みとして文字の下に出た） */
#startScreen .doc-panel,
.modal-sheet{
  background:var(--glass-bg-sheet);
  -webkit-backdrop-filter:var(--glass-blur-sheet);
  backdrop-filter:var(--glass-blur-sheet);
  border:1px solid var(--glass-edge-dim); border-top-color:var(--glass-edge); border-bottom:none;
  border-radius:28px 28px 0 0;
  box-shadow:var(--glass-inset), 0 -12px 40px rgba(0,0,0,.18);
}
/* パネルの中の見出し帯：パネルと「同じ色」を重ねるので境目は出ない（以前は白を重ねて帯だけ白く浮いていた）。
   不透明度を上げて、下を通る本文が見出しと重なって読めてしまわないようにする */
#startScreen .doc-head{
  background:rgba(252,249,246,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
@media (prefers-color-scheme:dark){
  #startScreen .doc-head{ background:rgba(30,25,21,.94); }
}
#startScreen .doc-head::before{ background:var(--ink-sub); opacity:.35; }

/* ガラスの中の部品（ぼかしなし） */
.doc-nav button,
.doc-inner .doc-links a,
.spec-item,
.faq-item,
.doc-note{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  box-shadow:var(--glass-inset);
}
.spec-item, .faq-item, .doc-note{ border-radius:20px; }
.faq-item{ transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.faq-item[open]{ background:var(--glass-bg-strong); border-color:rgba(204,59,36,.32); border-top-color:var(--glass-edge); box-shadow:var(--glass-inset), var(--glass-shadow); }
.spec-icon{ background:var(--glass-bg-lite); box-shadow:var(--glass-inset); }

/* 説明（シートにしない置き方）は背景にそのまま透かす */
.start-doc,
.start-faq{ background:var(--glass-bg); border-top-color:var(--glass-edge-dim); }

/* ---------- ツール本体：ナビバー（ヘッダー・下部バー）と調整シート ---------- */
#appHeader,
#bottomBar,
#sheet{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
#appHeader{
  border-bottom:1px solid var(--glass-edge-dim);
  box-shadow:inset 0 -1px 0 var(--glass-edge-dim), 0 4px 24px rgba(60,40,20,.06);
  position:relative; z-index:2;
}
#bottomBar,
#sheet{
  border-top:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-edge-dim), 0 -4px 24px rgba(60,40,20,.06);
}
@media (min-width:860px){
  #editorScreen.has-side #sheet{
    border-top:none; border-left:1px solid var(--glass-edge);
    box-shadow:inset 1px 0 0 var(--glass-edge-dim), -4px 0 24px rgba(60,40,20,.06);
  }
}

/* ナビバー・シートの中のボタン類（ぼかしなし） */
.icon-btn,
.back-btn:not(.back-btn-start),
.chip,
.tpl,
.bar-btn.on{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim);
  border-top-color:var(--glass-edge);
  box-shadow:var(--glass-inset);
}
.icon-btn, .chip, .tpl-main, .bar-btn, .bar-btn-icon{ transition:background .3s ease, box-shadow .3s ease, transform .2s ease; }
@media (hover:hover){
  .icon-btn:hover,
  .back-btn:not(.back-btn-start):hover,
  .chip:not(.on):hover,
  .bar-btn:not(.on):not(.bar-btn-primary):hover,
  .bar-btn-icon:not(:disabled):hover{ background:var(--glass-bg-hover); }
}
.icon-btn:active, .chip:active, .bar-btn:active, .bar-btn-icon:not(:disabled):active{ transform:scale(.95); }

/* 選択中：色つきのガラス。横スクロールの枠で影が四角く切れるので、外側の影は付けない */
.chip.on,
.tpl.on,
.doc-nav button:active{
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 52%), var(--accent);
  border-color:rgba(255,255,255,.28); border-bottom-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.08);
}
.chip-add{ background:none; border:1.5px dashed var(--line); box-shadow:none; }
.thumb-add{ border-color:var(--line); }
.sep{ background:var(--line); }

/* プレビュー：作品そのものは不透明のまま、ガラスの台に乗せたような影だけ */
#previewCanvas{ border-radius:14px; box-shadow:0 0 0 1px var(--glass-edge), var(--glass-shadow-lift); }

/* 写真のサムネイル */
.thumb{ border-radius:16px; box-shadow:0 0 0 1px var(--glass-edge-dim), 0 2px 8px rgba(0,0,0,.14); }
@media (prefers-color-scheme:dark){ .thumb{ background:#2a241f; } }

/* ---------- ツール本体：モーダルの入力欄 ---------- */
.field input[type="text"], .field input[type="number"],
.note-row input{
  background:var(--glass-bg-lite);
  border:1px solid var(--glass-edge-dim); border-top-color:var(--line);
  border-radius:14px; color:var(--ink);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
}
.field input[type="text"]:focus, .field input[type="number"]:focus,
.note-row input:focus{ border-color:rgba(204,59,36,.45); }
.swatch{ border-color:var(--glass-edge); box-shadow:0 1px 4px rgba(0,0,0,.12); }

/* ---------- ツール本体：ドロップ表示・トースト ---------- */
.drop-hint-box{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-radius:28px; color:var(--accent-ink);
}
.toast{
  background:rgba(28,24,20,.72);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--glass-shadow);
}

/* ==========================================================
   5. アクセシビリティ
   ========================================================== */

/* 「透明度を下げる」（macOS / iOS の設定）：ガラスをやめて不透明に */
@media (prefers-reduced-transparency:reduce){
  :root{
    --glass-bg:#fffaf5; --glass-bg-hover:#fff; --glass-bg-strong:#fffaf5; --glass-bg-sheet:#fffaf5; --glass-bg-lite:#f3ede5;
    --chip-bg:#f3ede5; --card:#fff;
  }
  body::before{ background:var(--bg-base); }
  .glass-specular::after{ display:none; }
  #startScreen .doc-head{ background:var(--glass-bg-sheet); }
}
@media (prefers-reduced-transparency:reduce) and (prefers-color-scheme:dark){
  :root{ --glass-bg:#221d19; --glass-bg-hover:#2a241f; --glass-bg-strong:#221d19; --glass-bg-sheet:#221d19; --glass-bg-lite:#2c2621; --chip-bg:#2c2621; --card:#221d19; }
}

/* backdrop-filter が使えないブラウザ：背後が透けて読みにくくならないよう、不透明度を上げる */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{ --glass-bg:rgba(255,255,255,.78); --glass-bg-hover:rgba(255,255,255,.88); --glass-bg-strong:rgba(255,255,255,.94); --glass-bg-sheet:#fcf9f6; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (prefers-color-scheme:dark){
    :root{ --glass-bg:rgba(34,29,25,.9); --glass-bg-hover:rgba(42,36,31,.92); --glass-bg-strong:rgba(34,29,25,.96); --glass-bg-sheet:#1e1915; }
  }
}

/* 「視差効果を減らす」：動き（浮く・沈む・光が動く）を止める */
@media (prefers-reduced-motion:reduce){
  /* #sheet は除く：js/app.js が開閉の transitionend でプレビューを描き直しているため（0秒だと発火しない） */
  *:not(#sheet), *::before, *::after{ transition-duration:0s !important; animation-duration:0s !important; }
  .glass-btn:hover, .glass-card[href]:hover, .article-card:hover,
  a.btn-primary:hover, .form-submit:hover{ transform:none; }
  .glass-btn:active, a.btn-primary:active, .form-submit:active, .btn-more:active,
  button.btn-primary:active, .doc-toggle:active,
  .icon-btn:active, .chip:active, .bar-btn:active, .bar-btn-icon:active{ transform:none; }
  .glass-specular::after{ display:none; }
}