/*
 * floating-menu.css — reien_matching 追従メニュー（下吸着＋ハンドル開閉、最新調整維持）
 *
 * 設計：
 *   - 画面下吸着、横並び4ボタン、ハンドルで開閉
 *   - マスター指示で再復活（縦タワーから下吸着に戻す、2026-05-04 v4）
 *   - 旧版：v1 (下吸着初版・Font Awesome)、v2 (縦タワー常時表示)、v3 (縦タワー+スライド)
 *   - 維持要素：Material Symbols / 色反転CTA / ボタン48px / フォント設計同期
 *
 * セクション：
 *   A. 設計トークン   B. シェル（位置・開閉）   C. ハンドル
 *   D. バー本体・要素   E. CTA強調   F. アイコン状態   H. body影響
 *
 * 改訂：2026-05-04 v8：font-family !important を3箇所→1箇所に集約
 */

/* 共通フォント指定：3箇所重複していた !important を1ルールに集約。
   button 等の UA stylesheet を強制上書きするため !important は維持。
   ※ Material Symbols Outlined はアイコンフォント（ligature 使用）なので除外。 */
#floating-menu,
#floating-menu *:not(.material-symbols-outlined) {
  font-family: "Roboto", "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif !important;
}

/* ===== A. 設計トークン ===== */
#floating-menu {
  --fm-bg:           #FFFFFF;
  --fm-text-on-cta:  #FFFFFF;
  --fm-bar-bg:       rgba(12,27,38,0.9);  /* マスター指示：#0C1B26（暗い群青） 不透明度90% */
  --fm-primary:      #1E3A4D;       /* design_common primary_darkest（CTA文字色） */
  --fm-item-bg:      #29648D;       /* design_common primary（通常ボタン背景、ヘッダーCTAと同色設計） */
  --fm-cta-bg:       #FFFFFF;       /* CTA背景（反転） */
  --fm-sidebar-w:    165px;         /* サイドバー幅 */
  --fm-handle-h:     36px;          /* ハンドル高さ（v5: 24→36px、視認性確保） */
  --fm-handle-icon-sz:30px;         /* 矢印サイズ（v5: 24→30px、マスター指示でさらに強調） */
  --fm-handle-label-sz:12px;
  --fm-bar-h:        78px;          /* 上15 + ボタン48 + 下15 = 78（マスター指示：上下15px） */
  --fm-bar-pad-x:    15px;          /* バー左右padding（マスター指示：15px） */
  --fm-bar-pad-y:    15px;          /* バー上下padding（マスター指示：15px） */
  --fm-item-h:       48px;          /* ヘッダーCTA同等 */
  --fm-item-gap:     6px;           /* ボタン間隔（マスター指示） */
  --fm-close-extra-gap:9px;         /* バツボタン前の追加マージン（6+9=15px、マスター指示） */
  --fm-icon-size:    24px;          /* マスター指示：30→24px に縮小 */
  --fm-icon-box:     24px;
  --fm-label-size:   13.5px;        /* ヘッダーCTA同期 */
  --fm-label-weight: 450;
  --fm-label-spacing:0.06em;
  --fm-gap:          9px;           /* アイコン-ラベル間（ヘッダーCTA同期） */
  --fm-z:            1000;
  --fm-trans:        300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== B. シェル（位置） ===== */
#floating-menu {
  position: fixed;
  left: var(--fm-sidebar-w);         /* サイドバー幅を避ける */
  right: 0;
  bottom: 0;
  width: auto;
  z-index: var(--fm-z);
  background: transparent;
  transition: background 0.3s ease-out, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 状態別 高さ・背景（v6: closed時にシェル自体が暗群青で hover せり上がり下の隙間を埋める） */
#floating-menu[data-state="open"] {
  height: var(--fm-bar-h);           /* 78px、バーを収める */
}
#floating-menu[data-state="closed"] {
  height: var(--fm-handle-h);        /* 36px：マウスオフ時はハンドルぴったり */
  background: var(--fm-bar-bg);      /* 暗群青90%透過 */
}

/* 状態切替（v6: transform/opacity でイージング遷移、display は両方 flex 維持） */
#floating-menu[data-state="open"] .fm-bar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#floating-menu[data-state="open"] .fm-handle {
  transform: translateY(100%);       /* 下に退避 */
  opacity: 0;
  pointer-events: none;
}
#floating-menu[data-state="closed"] .fm-bar {
  transform: translateY(100%);       /* 下に退避 */
  opacity: 0;
  pointer-events: none;
}
#floating-menu[data-state="closed"] .fm-handle {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ===== C. 横ハンドル（v6: 絶対配置 + トランジション + hover せり上がり） ===== */
#floating-menu .fm-handle {
  display: flex;                     /* v6: 常時 flex（表示制御は B節 transform/opacity） */
  position: absolute;                /* v6: bar と重ねて配置 */
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  gap: var(--fm-gap);                 /* 9px */
  width: 100%;
  height: var(--fm-handle-h);         /* 36px */
  padding: 0;
  margin: 0;
  background: transparent;            /* v6 修正：シェル背景に統一、透過の重なり回避 */
  color: var(--fm-text-on-cta);
  border: none;
  cursor: pointer;
  font-size: var(--fm-handle-label-sz); /* 12px、font-family は v8 で共通スコープへ集約 */
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
  will-change: transform, opacity;
}

/* hover挙動はマウスデバイスのみ有効化（タッチデバイスでは無効、v7） */
@media (hover: hover) and (pointer: fine) {
  /* hover時：6px せり上がり（閉じた状態のときのみ反応） */
  #floating-menu[data-state="closed"] .fm-handle:hover {
    transform: translateY(-6px);
  }
  /* hover時：シェルが6px伸びる + 背景を不透明化（マウスオフ36px → マウスオン42px、隙間埋め両立） */
  #floating-menu[data-state="closed"]:has(.fm-handle:hover) {
    height: calc(var(--fm-handle-h) + 6px); /* 42px：ハンドル36 + せり上がり6 */
    background: #0C1B26;            /* 90%透過 → 100%不透明で色味が深くなる */
  }
}

#floating-menu .fm-handle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fm-handle-icon-sz); /* 15px */
  line-height: 1;
  transform: rotate(-90deg);          /* › を上向きに、font-family は v8 で共通スコープへ集約 */
}

/* 閉じた状態のときに矢印を「トントン」と上に突き上げる（2連打 → 3秒ステイ → 繰り返し、マスター指示 2026-05-04） */
/* duration 4.5s 内訳：動き 0〜20%（≒0.9s、トントンを速める）+ ステイ 20〜100%（≒3.6s）、振幅3px、イージング強化（突き上げ感） */
@keyframes fm-handle-tap {
  0%   { transform: rotate(-90deg) translateX(0); }
  5%   { transform: rotate(-90deg) translateX(3px); }   /* 1回目突き上げ */
  10%  { transform: rotate(-90deg) translateX(0); }     /* 戻り */
  15%  { transform: rotate(-90deg) translateX(3px); }   /* 2回目突き上げ */
  20%  { transform: rotate(-90deg) translateX(0); }     /* 戻り、ここからステイ */
  100% { transform: rotate(-90deg) translateX(0); }
}
#floating-menu[data-state="closed"] .fm-handle-icon {
  animation: fm-handle-tap 4.5s ease-out infinite;
}

/* ===== D. バー本体・要素（v6: 絶対配置、横並び4コンパクトボタン、内部は縦積み） ===== */
#floating-menu .fm-bar {
  display: flex;                    /* v6: 常時 flex（表示制御は B節 transform/opacity） */
  position: absolute;               /* v6: handle と重ねて配置 */
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--fm-item-gap);
  height: var(--fm-bar-h);
  padding: var(--fm-bar-pad-y) var(--fm-bar-pad-x);
  box-sizing: border-box;
  background: var(--fm-bar-bg);     /* 90%透過 */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
  will-change: transform, opacity;
}

#floating-menu .fm-item {
  flex: 1;                          /* 均等分割（画面幅100%バーに散らす） */
  height: var(--fm-item-h);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--fm-gap);
  padding: 0 12px;
  background: var(--fm-item-bg);
  color: var(--fm-text-on-cta);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: var(--fm-label-size);    /* font-family は v8 で共通スコープへ集約 */
  font-weight: var(--fm-label-weight);
  letter-spacing: var(--fm-label-spacing);
  line-height: 1.7;
  text-align: center;
  transition: filter 0.2s ease;
  box-sizing: border-box;
}

#floating-menu .fm-item:hover {
  filter: brightness(0.7);
}

#floating-menu .fm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fm-icon-box);
  height: var(--fm-icon-box);
  font-size: var(--fm-icon-size);
  line-height: 1;
  color: var(--fm-text-on-cta);
}

#floating-menu .fm-label {
  white-space: nowrap;
  line-height: 1;
  position: relative;
  top: 1px;
}

/* ===== D-2. 閉じるバツボタン（展開メニュー .mm-close-btn 流儀の縮小版） ===== */
/* マスター指示（2026-05-04）：横幅45・縦比例調整、上下中央配置 */
#floating-menu .fm-close-btn {
  flex: 0 0 45px;                   /* 固定幅45px（75→45縮小） */
  margin-left: var(--fm-close-extra-gap);  /* バツとの間だけ追加9px（gap6 + 9 = 15px） */
  align-self: center;               /* バー縦中央に配置 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
#floating-menu .fm-close-btn:hover {
  opacity: 0.7;
}
#floating-menu .fm-close-icon {
  position: relative;
  width: 45px;                      /* 75→45縮小 */
  height: 21px;                     /* 36→21（比率維持、3の倍数） */
}
#floating-menu .fm-close-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 45px;                      /* icon と同じ45px */
  height: 2px;
  background: #FFFFFF;
  transform-origin: center;
}
#floating-menu .fm-close-bar:nth-child(1) {
  transform: translateY(-50%) rotate(15deg);
}
#floating-menu .fm-close-bar:nth-child(2) {
  transform: translateY(-50%) rotate(-15deg);
}
#floating-menu .fm-close-label {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* ===== E. ボタン別 色設計（マスター指示 2026-05-04） ===== */
/* ログイン・会員登録 / 保存する：ヘッダーボタン背景色 #29648D（design_common primary）+ 白文字（マスター指示 2026-05-04） */
#floating-menu .fm-item-account,
#floating-menu .fm-item-save {
  background: #29648D;
  color: #FFFFFF;
}
#floating-menu .fm-item-account .fm-icon,
#floating-menu .fm-item-save .fm-icon {
  color: #FFFFFF;
}

/* 共有する：タグルの「申し込む」ゴールド色 #C9A227 + 白文字（マスター指示 2026-05-04） */
#floating-menu .fm-item-share {
  background: #C9A227;
  color: #FFFFFF;
}
#floating-menu .fm-item-share .fm-icon {
  color: #FFFFFF;
}

/* 来園予約する（CTA）：タグルの「申し込む」ゴールド色 #C9A227 + 白文字（マスター指示 2026-05-04） */
#floating-menu .fm-item-cta {
  background: #C9A227;
  color: #FFFFFF;
}
#floating-menu .fm-item-cta .fm-icon {
  color: #FFFFFF;
}

/* ===== F. アイコン状態（線画/塗り、Material Symbols） ===== */
#floating-menu .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: var(--fm-icon-size);
  line-height: 1;
}
#floating-menu .material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ===== H. body 影響（フッターが追従に隠れないように、v7: data-fm-state ベース） ===== */
body {
  transition: padding-bottom 300ms cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 78px;             /* デフォルト（JS未実行時のフォールバック） */
}
body[data-fm-state="open"]   { padding-bottom: 78px; }
body[data-fm-state="closed"] { padding-bottom: 36px; }

/* ===== I. SP対応（v7修正：常時バー表示、ハンドル/バツなし、横並び4ボタン+各ボタン内アイコン上+ラベル下） ===== */
@media (max-width: 768px) {
  /* シェル：サイドバーを避けず画面全幅、高さ90px固定（バー高さに合わせる） */
  #floating-menu {
    left: 0;
    right: 0;
    height: 90px;
  }

  /* SP は常に open 表示。closed 状態でもバーを強制表示（PC側状態に依存しない） */
  #floating-menu[data-state] .fm-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ハンドル・バツボタン：SP では非表示（常時open前提） */
  #floating-menu[data-state] .fm-handle,
  #floating-menu .fm-close-btn {
    display: none;
  }

  /* バー：横並び維持、高さ90px = ボタン66 + padding 上下12×2、左右も12px統一 */
  #floating-menu .fm-bar {
    height: 90px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 6px;
  }

  /* ボタン：横並び維持、各ボタン内はアイコン上+ラベル下（縦積み）、ラベルはフル文言・自動折り返し */
  #floating-menu .fm-item {
    flex-direction: column;
    height: 66px;
    padding: 6px 3px;
    gap: 3px;                       /* アイコン-ラベル間、6→3に詰める */
    font-size: 12px;                /* design_common caption 級 */
    line-height: 1.3;
    text-align: center;
  }

  /* アイコン：SP は 30px に拡大（マスター指示） */
  #floating-menu .fm-icon {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }
  #floating-menu .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 30;
    font-size: 30px;
  }
  #floating-menu .material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 30;
  }

  /* ラベル：フル文言で自動折り返し（2行許容） */
  #floating-menu .fm-label {
    white-space: normal;            /* PC版 nowrap を上書き */
    line-height: 1.3;
    top: 0;
    word-break: break-word;
  }

  /* body padding：SP は常時 open 表示なので 90 + safe-area（state問わず） */
  body[data-fm-state="open"],
  body[data-fm-state="closed"] {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

/* 保存・共有・来園予約の共通認可状態 */
[data-goenn-action-state="disabled"] {
  opacity: 0.42 !important;
  filter: grayscale(1) saturate(0) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

[data-goenn-action-state="disabled"] .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* ===== 共有パネル ===== */
.fm-share-panel {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 27, 38, 0.18);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fm-share-panel.show {
  opacity: 1;
}
.fm-share-panel,
.fm-share-panel *:not(.material-symbols-outlined) {
  font-family: "Roboto", "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
}
.fm-share-panel-inner {
  position: relative;
  width: 45vw;
  min-height: 120px;
  padding: 36px;
  background: rgba(12, 27, 38, 0.9);
  color: #FFFFFF;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.fm-share-panel.show .fm-share-panel-inner {
  transform: scale(1);
}
.fm-share-panel-title {
  margin: 0 42px 27px;
  color: #FFFFFF;
  font-size: 21px;
  line-height: 1.7;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
}
.fm-share-panel-close {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.fm-share-panel-close:hover {
  opacity: 0.7;
}
.fm-share-panel-close:focus {
  outline: none;
}
.fm-share-panel-close:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}
.fm-share-panel-close-icon {
  position: relative;
  width: 24px;
  height: 24px;
}
.fm-share-panel-close-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 2px;
  background: #FFFFFF;
  transform-origin: center;
}
.fm-share-panel-close-icon span:nth-child(1) {
  transform: translateY(-50%) rotate(24deg);
}
.fm-share-panel-close-icon span:nth-child(2) {
  transform: translateY(-50%) rotate(-24deg);
}
.fm-share-panel-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fm-share-panel-action {
  min-width: 0;
  min-height: 81px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 9px;
  border: 0;
  border-radius: 0;
  background: #29648D;
  color: #FFFFFF;
  cursor: pointer;
  box-sizing: border-box;
  transition: filter 0.2s ease;
}
.fm-share-panel-action:hover,
.fm-share-panel-action:focus {
  outline: none;
}
.fm-share-panel-action:hover {
  filter: brightness(0.7);
}
.fm-share-panel-action:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}
.fm-share-panel-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  font-size: 45px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 45;
}
.fm-share-panel-icon-line {
  background: #06C755;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.fm-share-panel-label {
  display: block;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .fm-share-panel {
    align-items: center;
    padding: 18px;
  }
  .fm-share-panel-inner {
    width: min(90vw, 480px);
    padding: 27px 18px 24px;
  }
  .fm-share-panel-title {
    margin-bottom: 21px;
    font-size: 21px;
  }
  .fm-share-panel-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fm-share-panel-action {
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    padding: 12px 6px;
  }
}