/* ─── モバイル対応 ──────────────────────────────────────────────────────────
 * Tier A (MVP) + Tier B (UX 磨き)
 * Breakpoint: max-width 768px
 * 設計原則: デスクトップの既存 CSS は変更せず、ここで上書きする
 * ──────────────────────────────────────────────────────────────────────── */

/* デスクトップでは sb-toggle は非表示 (sb-backdrop は CSS の opacity 0 で実質非表示) */
.sb-toggle { display: none; }

@media (max-width: 768px) {
  /* モバイルで sb-toggle を表示 */
  .sb-toggle { display: inline-flex; }


  /* ─── A1: 右サイドバー drawer 化 ─────────── */
  .canvas-wrap {
    flex: 1;
    min-height: 0;
  }
  .sb {
    position: fixed;
    top: 0; bottom: 0;
    right: 0;
    width: min(85vw, 360px);
    height: 100dvh;
    /* ⚠ 閉状態は border/shadow を持たない — translateX(100%) は本体を画面外へ出すが、
       左 border が viewport 右端の線上に乗り、-4px の影が右端からはみ出して
       「画面右端の細い縦線」に見える (owner 実機指摘 2026-08-17) */
    border-left: 1px solid transparent;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 2600;
    /* iOS safe area */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sb.visible {
    transform: translateX(0);
    border-left-color: var(--border-strong);
    box-shadow: -4px 0 24px rgba(0,0,0,0.35);
  }

  /* フィルタ: 高さを制限し、内部スクロールバーは非表示 */
  .sb-filter-body {
    max-height: 38dvh;
    scrollbar-width: none;     /* Firefox */
  }
  .sb-filter-body::-webkit-scrollbar { display: none; }  /* Safari/Chrome */

  /* 作品リスト: 残りスペースを全て使い独立スクロール */
  .wl { min-height: 0; }

  /* 右サイドバー用 backdrop (左 drawer の .drawer-backdrop と同形式) */
  .sb-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sb-backdrop.visible { opacity: 1; pointer-events: auto; }

  /* サイドバー toggle ボタン: **行の中の button** (2026-09-07)。
     旧「右下に浮く FAB」(position: fixed / 円形 / 影 / blur) をやめ、
     `.domain-map__controls` の右端に置く — 盤面へ浮いて被る面積をゼロにする。
     ⚠ 表示の帯は据え置き (既定 display:none / ≤768px で inline-flex) — ≥769px は
     sidebar が常設 280px 列なので入口自体が要らない。
     🔴 行を折り返しにくくするため **アイコンのみの正方形**に留める
     (名前は aria-label が持つ)。`position: relative` は badge の基準。 */
  .sb-toggle {
    position: relative;
    flex: 0 0 auto;
    background: var(--t-bg-elev);
    border: 1px solid color-mix(in srgb, var(--t-fg) 16%, transparent);
    border-radius: 7px;
    padding: 0;
    /* 🔴 **裁定 1-①「一次動作は 44px 床」の例外** (owner 指示 2026-09-07 —「フィルタの
       ボタンと軸セレクタを一行に…部品サイズは小さくなっても ok です」+ hub 裁定)。
       X/Y/Z (`.axis-slot`) と同じ 32px (`--t-tap-sub`) の行に揃える。
       🔴 例外は **この面の `.axis-slot` 3 個とこの `.sb-toggle` だけ** — view タブ
          (`.vs-tab`) / `#overlay-me-chip` / `.axis-preset-btn` は 44px のまま。
       ⚠ 数値は書かず token を参照する。 */
    min-width: var(--t-tap-sub); min-height: var(--t-tap-sub);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--t-dim);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .sb-toggle:hover { color: var(--t-fg); border-color: color-mix(in srgb, var(--t-accent) 50%, transparent); }
  .sb-toggle .sb-toggle-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--accent);
    color: var(--bg);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    display: none;
    border: 2px solid var(--bg);
  }
  :where(html, body)[data-theme="light"] .sb-toggle .sb-toggle-badge { color: var(--t-on-accent); }
  .sb-toggle.has-filters .sb-toggle-badge { display: inline-block; }
  /* サイドバーが開いている時は FAB を隠す (body class 経由) */
  body.sb-open .sb-toggle { opacity: 0; pointer-events: none; transition: opacity 0.15s; }

  /* ─── A2 (2026-08-19 縮退): 旧「ヘッダー内軸セレクタ」の横スクロール規則を撤去 ──
     .axis-selectors は React header に存在しない (domain-map__controls へ移設済み —
     TourOverlay.tsx 冒頭の対応表)。overflow-y: hidden が残ると header 子孫の
     dropdown (通知/アカウント) が下方向へクリップされる (実測: パネル bottom 111px >
     header bottom 62px)。padding / safe-area / nowrap は現役のため残す */
  header {
    padding: 0.5rem 0.75rem;
    /* safe area top (iOS notch) */
    padding-top: max(0.5rem, env(safe-area-inset-top));
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  /* H2: モバイルでは ARTWORK 3D MATRIX タイトル非表示 (ハンバーガー + バッジで十分) */
  h1#app-title { display: none; }

  .axis-selectors {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .axis-select { flex-shrink: 0; }

  /* toggle-row はヘッダーの最後、scroll の中に隠れて OK */
  .toggle-row { flex-shrink: 0; }

  /* ─── A3: モーダルをフル画面化 ───────────────────────────── */
  .modal-backdrop { padding: 0; }
  .modal {
    width: 100vw;
    max-width: none;
    /* dvh = Safari URL バー伸縮に追随 */
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    border: none;
    padding: 1.2rem 1rem 1.5rem;
    /* iOS safe area */
    padding-top: max(1.2rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .modal-close {
    width: 44px; height: 44px;
    font-size: 1.7rem;
    top: max(0.4rem, env(safe-area-inset-top));
    right: 0.5rem;
    display: flex; align-items: center; justify-content: center;
  }
  .modal-title { font-size: 1.15rem; padding-right: 3rem; }
  .modal-cover { width: 120px; }

  /* ─── A4: Compare basket 位置調整 ───────────────────────── */
  .compare-basket {
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 1.2rem);
    flex-wrap: wrap;
    justify-content: center;
  }
  .compare-slot { max-width: 8em; }

  /* ─── A5: Timebar 重なり解消、Legend 縮小 ──────────────── */
  .timebar {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem 0.6rem;
    gap: 0.4rem;
    font-size: 0.6rem;
  }
  /* 閉じ幅は「left + ボタン 1 個ぶん」— left が breakpoint で変わるので式もここに置く
     (定義の正は plot.css の `.timebar.is-collapsed`)。 */
  .timebar.is-collapsed {
    right: calc(100% - 0.5rem - 3.6rem);
  }
  .timebar.is-collapsed:has(.timebar-toggle.is-filtered) {
    right: calc(100% - 0.5rem - 6.5rem);
  }
  .timebar-help-popup { right: 0.5rem; max-width: calc(100vw - 1.5rem); }

  /* Legend はモバイルで小さく、上部右に */
  .legend {
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.55rem;
    max-width: 50vw;
  }
  .legend-bar { height: 6px; }

  /* ─── B1: 44px タップターゲット ─────────────────────────── */
  .hamburger { min-width: 44px; min-height: 44px; }
  .domain-badge { min-height: 44px; }
  .axis-select { min-height: 36px; }  /* 横スクロール内なのでやや小さく許容 */
  .toggle-btn { min-height: 36px; padding: 0.3rem 0.7rem; }
  .sb-preset-chip { min-height: 36px; padding: 0.4rem 0.7rem; }
  .sb-section-head { min-height: 44px; padding: 0.6rem 0.75rem; }
  .wl-item { min-height: 48px; padding: 0.5rem 0.75rem; }
  .sb-filter-head { min-height: 44px; padding: 0.65rem 0.75rem; }
  .modal-tag { min-height: 32px; padding: 0.35rem 0.6rem; }
  .dash-tab-btn { min-height: 44px; }

  /* ─── B3: iOS Safari zoom 防止 (input 16px+) ────────────── */
  .sb-search,
  .sb-sort,
  input[type="text"],
  select { font-size: 16px; }
  .sb-search { min-height: 44px; padding: 0.5rem 0.75rem; }

  /* ─── B5: マイページのモバイル最適化 ───────────────────── */
  .dash-grid,
  .mypage-grid,
  .dash-stats {
    grid-template-columns: 1fr !important;
  }
  .dash-cell,
  .dash-stat-card {
    width: 100%;
  }
  /* マイページモーダル: タブを縦並び/横スクロール許容 */
  .dash-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dash-tab-btn { flex-shrink: 0; }

  /* マイページアイテムのカバー画像を小さく */
  .mypage-item-cover { width: 36px; height: 54px; }

  /* ─── ホバーツールチップ非表示 (モバイルでは tap で modal 開く) ─ */
  .hover-tooltip { display: none !important; }

  /* ─── Tour も画面端まで使う ────────────────────────────── */
  .tour-bubble {
    max-width: calc(100vw - 1.5rem) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
  }
}

/* ─── Tier B4: safe-area-inset (iOS notch) — 768px↑ でも適用 ─ */
header { padding-top: max(0.65rem, env(safe-area-inset-top)); }
.compare-basket { bottom: max(1rem, env(safe-area-inset-bottom)); }