/* =============================================================================
 * fab-buttons.css  —  Floating Action Buttons (FAB) 共通スタイル 完全版（最終確定版）
 * -----------------------------------------------------------------------------
 * 目的:
 * - すべてのフローティングボタンの「見た目・動き・押下フィードバック」を統一。
 * - 位置・色・積層・アイコン調整などの個別差分を、このファイルで一元管理。
 * - スマホ/PC・ライト/ダーク・季節テーマにも安全に拡張できる設計。
 *
 * 設計の柱:
 * - ベースクラス: .fab（全ボタン共通の外観/アニメ/押下）
 * - 状態        : .is-visible（当面 .show も受ける）, .is-pressed, .is-hidden
 * - 変数        : --fab-gradient / --fab-hover-bg（配色）
 * --fab-bottom / --fab-right / --fab-size / --fab-z（配置・積層）
 * --fab-icon-shift-y（アイコン微調整）
 * --fab-transform / --fab-transition（動きの単一真実）
 * - 端末特化    : .fab--only-sm, .fab--only-mdup, .fab--all
 * - アクセシビリティ: focus-visible, prefers-reduced-motion, safe-area, forced-colors
 * ============================================================================= */


/* =========================
 * デフォルトトークン（ライト）
 * ========================= */
:root {
  /* 配色（ライト）— 上書き可 */
  --fab-gradient: linear-gradient(#26ccff, #0026ac);
  --fab-hover-bg: #26ccff;
  --fab-outline-color: var(--fab-hover-bg);

  /* 配置・積層（各ボタンで上書き可） */
  /* --fab-bottom: 20px; */
  --fab-right: 20px;
  --fab-size: 50px;

  /* 追加（自動スタック用） */
  --fab-gap: 12px;             /* FAB同士の縦間隔 */
  --fab-bottom-base: 20px;     /* 最下段の基準ライン */

  /* 共通スロット（縦位置）。0=最下段, 1=その一つ上… */
  --slot-search: 2;  /* ← ここを変えるだけでPC/SPの“検索ボタン”の縦位置が一括で変わる */

  --fab-icon-scale: 0.56; /* アイコン比率 */
  --fab-z: 1000;

  /* アイコン微調整（各ボタンで上書き可） */
  --fab-icon-shift-y: 0px;

  /* アニメーション・押下感パラメータ */
  --fab-press-translate: 2px;
  --fab-press-scale: 0.98;
  /* PCで hover→active のときのスケール（浮き→押下のバランス用） */
  --fab-press-scale-hover: 1.05;

  --fab-scale-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fab-fade-ease: ease;
  --fab-fade-duration: 0.3s;
  --fab-color-fade-duration: 0.28s;

  /* テキストレベル・将来使う場合 */
  --fab-label-size: 12px;
  --fab-label-weight: 600;
}

/* =========================
 * ダークトークン
 * ========================= */
html.dark-mode {
  --fab-gradient: linear-gradient(#1976D2, #22264c);
  --fab-hover-bg: #1976D2;
  --fab-outline-color: var(--fab-hover-bg);
}

/* =============================================================================
 * GTA (Global Touch Arbiter) ターゲット用ユーティリティ
 * - 見た目と独立。最高のタッチ応答性と不要なOS標準動作の抑制。
 * ============================================================================= */
.gta-target {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;       /* ★タッチ応答性の核心 */
  -webkit-touch-callout: none;
}

/* =========================
 * ベース: すべてのFAB共通
 * ========================= */
.fab {
  position: fixed;
  /* bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
  right:  calc(var(--fab-right)  + env(safe-area-inset-right, 0px)); */
  bottom: calc(
    var(--fab-bottom-abs,  /* ← 個別の“絶対bottom”を与える時だけ使う。通常は未設定でOK */
      calc(var(--fab-bottom-base, 20px) + (var(--fab-stack, 0) * (var(--fab-size, 45px) + var(--fab-gap, 12px))))
    ) + env(safe-area-inset-bottom, 0px)
  );
  right:  calc(var(--fab-right, 20px) + env(safe-area-inset-right, 0px));
  left: auto;
  z-index: var(--fab-z);
  width: var(--fab-size);
  height: var(--fab-size);
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0;
  font-size: 0; /* アイコンのみ */
  font-weight: normal;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  -webkit-touch-callout: none;

  will-change: transform, opacity;

  /* ★ 動きは変数で一本化（単一制御元） */
  /* 可視・不可視のトークンを分離（既定：可視=1, 不可視=0.5） */
  --fab-transform-visible: scale(1);
  --fab-transform-hidden:  scale(0.5);
  /* 実際に適用される現在値 */
  --fab-transform: var(--fab-transform-hidden);

  --fab-transition: opacity var(--fab-fade-duration) var(--fab-fade-ease),
                    transform var(--fab-fade-duration) var(--fab-scale-ease);

  opacity: 0;
  transform: var(--fab-transform);
  pointer-events: none;
  transition: var(--fab-transition-final, var(--fab-transition));
}

/* 背景レイヤ（通常・押下/ホバー） */
.fab::before,
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity var(--fab-color-fade-duration) ease;
}
.fab::before { background: var(--fab-gradient); opacity: 1; }
.fab::after  { background: var(--fab-hover-bg); opacity: 0; }

/* 内容は前面＋微調整 */
.fab > * {
  position: relative;
  z-index: 2;
  transform: translateY(var(--fab-icon-shift-y));
}

/* =======================================================
 * 配置ユーティリティ
 * ======================================================= */
.fab.fab--left {
  /* 右・左で同じオフセットを使う設計ならこのままでOK。
     もし独立させたいなら --fab-left を導入して fallback 併用に。 */
  left:  calc(var(--fab-left, var(--fab-right, 20px)) + env(safe-area-inset-left, 0px));
  right: auto;
}

/* =======================================================
 * ラベル併用（必要な場合のみ）
 * ======================================================= */
.fab.fab--has-label {
  border-radius: 9999px;
  width: auto;
  padding-inline: 10px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fab__icon {
  font-size: calc(var(--fab-size) * var(--fab-icon-scale));
  line-height: 1;
  display: inline-block;
}
.fab__label {
  font-size: var(--fab-label-size);
  font-weight: var(--fab-label-weight);
  line-height: 1;
  user-select: none;
  pointer-events: none; /* クリックはボタン全体で受ける */
}

/* アイコン（Font Awesome 等） */
.fab :is(i, .fa, .fas, .fa-solid) {
  font-size: calc(var(--fab-size) * var(--fab-icon-scale));
  line-height: 1;
  display: inline-block;
}
/* SVGアイコンにも適用したい場合のみ有効化
.fab svg { width: calc(var(--fab-size) * var(--fab-icon-scale)); height: auto; }
*/

/* =======================================================
 * 個別FABの定義（位置・層・サイズ・アイコン調整）
 * ======================================================= */

/* SP用（<768pxで表示される想定） */
#spFilterOpenBtn {
  --fab-stack: var(--slot-search);
  --fab-right: 20px;
  --fab-z: 1000;
}
/* PC用（>=768pxで表示される想定） */
#PCsearchFloatBtn {
  --fab-stack: var(--slot-search);
  --fab-right: 20px;
  --fab-z: 1000;
}
/* スマホ：メニュー（オーバーレイ開閉）— 中段, オーバーレイより前面 */
/* 2段目（スタック1） — メニュー */
#spMenuOverlayOpenBtn,
#spMenuOverlayCloseBtn {
  --fab-stack: 1;
  --fab-right: 20px;
  --fab-z: 1001; /* .sp-overlay(z:1000)より上 */
}

/* 閉じるボタンだけ overlay-fab 層へ（最前面で押下保証） */
#spMenuOverlayCloseBtn {
  --fab-z: var(--layer-overlay-fab);
}

/* 最下段（スタック0） */
#pageTopBtn {
  --fab-stack: 0;
  --fab-icon-scale: 0.80;
  --fab-right: 20px;
  --fab-z: 1000;
  --fab-icon-shift-y: -2px;
}

/* 端末出し分け */
@media (min-width: 768px) { .fab--only-sm   { display: none; } }
@media (max-width: 767px) { .fab--only-mdup { display: none; } }

/* =======================================================
 * プロファイル（表示・非表示の演出のみを制御）
 * ======================================================= */

/* 1) 既定（＝.anim--scale）: ベースのトランジションを使用 */
.fab.anim--scale { /* no-op（ドキュメント目的） */ }

/* 2) フェードのみ：transformのアニメーションをオフ */
.fab.anim--fade {
  --fab-transform-hidden: var(--fab-transform-visible); /* ← 非表示でも同じ姿勢 */
  --fab-transition-final: opacity var(--fab-fade-duration) var(--fab-fade-ease);
}

/* 3) 瞬時：出入りアニメなし */
.fab.anim--none {
  --fab-transform-hidden: var(--fab-transform-visible); /* ← 非表示でも同じ姿勢 */
  --fab-transition-final: none;
}

/* =======================================================
 * ユーザー操作へのフィードバック（常に一定の演出を保証）
 * ======================================================= */

/* --------------------
 * 状態：ホバー（PC限定）
 * -------------------- */
@media (hover: hover) and (pointer: fine) {
  /* ★改修点: `.is-visible` と `:hover` を組み合わせ、セレクタの詳細度問題を完全に解決 */
  .fab.is-visible:hover,
  .fab.show:hover {
    --fab-transform: scale(1.1);
    --fab-transition: transform var(--fab-fade-duration) var(--fab-scale-ease);
  }

  .fab:hover::after {
    opacity: 1;
  }
}

/* タッチ環境のhover固定対策（保険） */
@media (hover: none) {
  .fab:hover:not(:active):not(.is-pressed) {
    transform: none;
  }
  .fab:hover:not(:active):not(.is-pressed)::after {
    opacity: 0;
  }
}

/* --------------------
 * 状態：表示/非表示/押下/フォーカス（常に最優先）
 * -------------------- */

/* 表示/非表示 */
.fab.is-visible, .fab.show {
  opacity: 1;
  --fab-transform: var(--fab-transform-visible);
  pointer-events: auto;
}
.fab.is-hidden {
  opacity: 0;
  --fab-transform: var(--fab-transform-hidden);
  pointer-events: none;
}

/* 押下（共通）：沈み込み＋“バネ感” */
.fab:active,
.fab.is-pressed {
  --fab-transform: translateY(var(--fab-press-translate)) scale(var(--fab-press-scale));
  --fab-transition: transform var(--fab-fade-duration) var(--fab-scale-ease);
}
.fab:active::after,
.fab.is-pressed::after {
  opacity: 1;
}

/* PC限定：hover中に押した場合は“浮き→押下”のバランス用スケール */
@media (hover: hover) and (pointer: fine) {
  .fab:hover:active,
  .fab:hover.is-pressed {
    --fab-transform: translateY(var(--fab-press-translate)) scale(var(--fab-press-scale-hover));
  }
}

/* フォーカス */
.fab:focus-visible {
  outline: 3px solid var(--fab-outline-color);
  outline-offset: 3px;
}
/* マウス操作など不要なフォーカスリングは非表示に */
.fab:focus {
  outline: none;
}

/* タッチ環境（=指操作）ではリングを完全抑止 */
@media (hover: none) and (pointer: coarse) {
  .fab:focus-visible { outline: none; }
  /* タッチ時は閉じるボタンもリング不要 */
  [data-overlay-close]:focus,
  [data-overlay-close]:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* =======================================================
 * アクセシビリティ & 環境対応
 * ======================================================= */

/* 低モーション設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  .fab, .fab::before, .fab::after {
    transition: none;
  }
  .fab, .fab.is-visible, .fab.is-hidden, .fab.show {
    --fab-transform: scale(1);
  }
}

/* 高コントラスト対応（Windows 等）— OS配色に忠実な版 */
@media (forced-colors: active) {
  .fab {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
    box-shadow: none;
    forced-color-adjust: none;
  }
  /* 擬似要素は透明化（親背景に委譲） */
   .fab::before, .fab::after { background: transparent; opacity: 0; }
   .fab:focus-visible { outline-color: Highlight; }

  .fab:active,
  .fab.is-pressed {
    --fab-transform: translateY(var(--fab-press-translate)) scale(var(--fab-press-scale));
  }
}

@media (forced-colors: active) and (hover: hover) and (pointer: fine) {
  .fab:hover { background: Highlight; color: HighlightText; }
}

/* =======================================================
 * Neutral（耳ボタンなどの完全中和用）
 * 目的：すべてのモーションと色レイヤを中和（transform/レイヤを変数で抑制）
 * ======================================================= */
.fab.fab--neutral,
.fab.fab--neutral:hover,
.fab.fab--neutral:active,
.fab.fab--neutral.is-pressed {
  --fab-transform: none;
  --fab-transition-final: none;
}
.fab.fab--neutral::before,
.fab.fab--neutral::after {
  background: transparent;
  opacity: 0;
}


/* 非表示状態の当たり判定をゼロ化して、背面リンクを確実に通す */
.fab[aria-hidden="true"],
.fab.is-hidden,
.fab.is-visually-hidden {
  pointer-events: none;
}

/* グローバルの a:active opacity を FAB 内では無効化（任意） */
.fab a:active,
.fab button:active {
  opacity: 1; /* または initial; */
}