/**
 * back-to-top ボタン＋モバイル向けsticky CTAバー 共通スタイル。
 *
 * 2026-09-10、improve-codebase-architectureスキルでの調査により、この2ブロックが
 * 全54ページに個別実装され、既にbyte単位で完全一致していると判明（詳細はgrillingログ参照）。
 * CTAバー未使用ページ（ツールページ等）にも本ファイルを共通で読み込ませる方針とした
 * （対応する<div class="sticky-cta-bar">が無ければ何も描画されないため無害）。
 *
 * 使い方：
 *   <link rel="stylesheet" href="/assets/css/back-to-top.css">
 */

/* Sticky mobile CTA bar */
.sticky-cta-bar { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sticky-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    gap: 8px;
    background: var(--surface, #ffffff);
    border-top: 1px solid var(--line, #e5e7eb);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .sticky-cta-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .sticky-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 6px;
    border-radius: var(--radius-md, 12px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
  }
  .sticky-cta-btn--primary { background: var(--primary, #00a0e6); color: #fff; }
  .sticky-cta-btn--primary:active { background: var(--primary-dark, #0082c4); }
  .sticky-cta-btn--secondary { background: var(--primary-light, #e6f6fd); color: var(--primary-dark, #0082c4); }
  .sticky-cta-btn--secondary:active { background: var(--primary-mid, #b3e0f7); }
}

/* Back-to-top button */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--primary-mid, #b3e0f7);
  color: var(--primary, #00a0e6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 80;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, background .15s;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--primary-light, #e6f6fd); }
.back-to-top svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .back-to-top { bottom: calc(80px + env(safe-area-inset-bottom)); right: 14px; }
}