/* convert-bar.css — 底部固定 CTA 条（snippets/convert_bar.liquid 専用）。
   position:fixed は本文件のみ（body 内 inline position 禁止の thin-client 規約）。
   LINE 緑 #06C755 は R3 ブランド锁色（token 化しない・全页唯一の高饱和）；booking 分支は --convert-bg / --convert-fg。
   R11：条内按钮は pill・token は --bar-bg / --bar-fg。
   設計稿 v2：条は全幅の面板（内側だけ 480px 居中）、上緣は金→桃の 2px 渐变条（v1 の 1px 分隔線から変更）、
   影は上向き。条内は二欄 = 左に初回価格ブロック、右に flex:1 の按钮。
   bar 面板 = 半透明 color-mix + blur（color-mix 非対応の旧環境は前行の不透明 var(--bar-bg) にフォールバック）。
   設計稿に合わせ既定は隐れた状態（translateY(110%)）。
   app.js が [data-main-cta]（hero と CTA 段）を observe し、どちらも視口外の時だけ .convert-bar--shown を付ける。
   JS 無し時は条が出ない = 予約入口は页尾大按钮（R11 主入口）一本に降級。 */
.convert-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background: var(--bar-bg);
  background: color-mix(in srgb, var(--bar-bg) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 30px color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--bar-fg);
  z-index: 60;
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.convert-bar--shown { transform: translateY(0); }
.convert-bar-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rule);
}
.convert-bar-inner {
  box-sizing: border-box;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
/* 左欄：初回バッジ文言 + 主推価格（service.menu.first.price）。price 空なら liquid 側で欄ごと出ない。 */
.convert-bar-offer { flex: none; line-height: 1.35; }
.convert-bar-offer-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.convert-bar-offer-price {
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--bar-fg);
}
.convert-bar-cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 999px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
/* LINE アイコン（kind == 'line' 分支のみ）。flex:none = 文言が長くても潰れない。 */
.convert-bar-icon { flex: none; display: block; }
.convert-bar-cta:active { transform: scale(0.97); }
.convert-bar-cta--line { background: #06C755; color: #FFFFFF; box-shadow: 0 6px 16px rgba(6, 199, 85, 0.3); }
.convert-bar-cta--line:hover { background: #05B34D; color: #FFFFFF; }
.convert-bar-cta--booking { background: var(--convert-bg); color: var(--convert-fg); }
.convert-bar-cta--booking:hover { opacity: 0.92; color: var(--convert-fg); }
@media (prefers-reduced-motion: reduce) {
  .convert-bar, .convert-bar-cta { transition: none; }
  .convert-bar-cta:active { transform: none; }
}