/* convert-bar.css — 底部固定 CTA 条（snippets/convert_bar.liquid 専用）。
   position:fixed は本文件のみ（body 内 inline position 禁止の thin-client 規約）。
   LINE 緑 #06C755 は R3 ブランド锁色（token 化しない・全页唯一の高饱和）—— convert.kind == 'line' の時だけ
   （.au-bar-cta--line）。それ以外は主題の aurora 渐变（.au-bar-cta--other）。
   面板 = 半透明 var(--page) + blur（color-mix 非対応の旧環境は前行の不透明 var(--page) にフォールバック）。
   既定は隐れた状態（translateY(120%)・safe-area padding 分を吞む）。app.js が [data-main-cta]（hero と
   RESERVATION CTA）を observe し、どちらも視口外の時だけ .au-bar--shown を付けて滑入。
   JS 無し時は条が出ない = 予約入口は RESERVATION 段の大按钮一本に降級。幅は .au-page と同心（max-width:var(--maxw)）。 */
.au-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: var(--maxw, 480px);
  box-sizing: border-box;
  padding: clamp(9.2px, 2.56vw, 12.3px) clamp(14.8px, 4.1vw, 19.7px) calc(clamp(11.1px, 3.08vw, 14.8px) + env(safe-area-inset-bottom, 0px));
  background: var(--page);
  background: color-mix(in srgb, var(--page) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  z-index: 50;
  transform: translateY(120%);
  transition: transform 0.32s ease;
}
.au-bar--shown { transform: translateY(0); }
.au-bar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  box-sizing: border-box;
  min-height: clamp(44.3px, 12.31vw, 59.1px);
  padding: clamp(7.4px, 2.05vw, 9.8px) clamp(11.1px, 3.08vw, 14.8px);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(12.9px, 3.59vw, 17.2px);
  letter-spacing: 0.1em;
  text-align: center;
  border-radius: 8px;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.au-bar-cta--line { background: #06C755; color: #FFFFFF; }
.au-bar-cta--line:hover { background: #05B34D; color: #FFFFFF; }
.au-bar-cta--other { background: var(--aurora); color: var(--ink); }
.au-bar-cta--other:hover { color: var(--ink); opacity: 0.9; }
.au-bar-cta:active { transform: scale(0.99); }
.au-bar-icon { flex: none; }
.au-bar-label { min-width: 0; overflow-wrap: anywhere; }
.au-bar-note {
  margin: clamp(5.5px, 1.54vw, 7.4px) 0 0;
  text-align: center;
  font-size: clamp(8.8px, 2.44vw, 11.7px);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
  .au-bar, .au-bar-cta { transition: none; }
}