/* ============================================================================
   mobile-ui.css — 「ZINEをつくろう」モバイル閲覧リーダー（〜768px）
   ----------------------------------------------------------------------------
   方針：モバイルは **閲覧専用の縦スクロールリーダー**。全ページを SVG で縦に並べ、
   スクロールで読み、ブラウザのピンチで拡大する。エディタのキャンバスは使わない（隠す）。
   ・このファイルが描くものは ≤768px のときだけ表示。デスクトップ(>768px)には無影響。
   ・状態は body クラス `m-ui` のみ。挙動は mobile-ui.js。
   ⚠️ 仕様変更時は MANUAL.md のモバイル節も更新する。
   ============================================================================ */

#m-ui { display: none; }

@media screen and (max-width: 768px) {

  /* モバイル＝編集画面では、エディタ(.app)とその付随UIを丸ごと隠す（リーダーが全面） */
  body.m-ui .app,
  body.m-ui #chat-bubble,
  body.m-ui #backup-nudge { display: none !important; }

  body.m-ui #m-ui { display: block; }

  #m-ui button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
  .m-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 8px;
    background: none; border: none; cursor: pointer;
    color: var(--text-2); border-radius: var(--radius-md);
  }
  .m-icon-btn:active { background: var(--surface-2); }
  .m-icon-btn svg { width: 22px; height: 22px; }

  /* ====================================================================
     リーダー：固定オーバーレイ（ヘッダ＋縦スクロール＋フッタ）
     ==================================================================== */
  #m-reader {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background:
      radial-gradient(circle at 12% 0%, rgba(0,0,0,.02), transparent 42%),
      var(--bg);
  }

  .m-reader-head {
    flex: none;
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .m-reader-title {
    text-align: center; font-weight: 700; font-size: 15px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em;
  }

  .m-reader-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 16px 8px;
  }

  /* 1ページ＝1カード（SVGレンダリング＋ページ番号） */
  .m-page-card { margin: 0 auto 22px; max-width: 520px; }
  .m-page-sheet {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .m-page-sheet svg, .m-page-sheet img { display: block; width: 100%; height: 100%; }

  .m-page-label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 2px 0;
  }
  .m-page-num {
    min-width: 22px; height: 22px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px;
    font-size: 12px; font-weight: 700; color: var(--text-2);
  }
  .m-page-tag { font-size: 11.5px; color: var(--text-3); }

  .m-reader-foot {
    flex: none; text-align: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    color: var(--text-3); font-size: 11.5px; font-weight: 500;
  }

  /* ====================================================================
     シート（プロジェクトメニュー）& スクリム
     ==================================================================== */
  .m-sheet, .m-scrim { display: none; }

  .m-scrim {
    position: fixed; inset: 0; z-index: 290;
    background: rgba(0,0,0,.40);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  body.m-sheet-open .m-scrim { display: block; opacity: 1; visibility: visible; }

  .m-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px rgba(0,0,0,.22);
    transform: translateY(110%); visibility: hidden;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
    max-height: 82vh; overflow-y: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .m-sheet.open { transform: translateY(0); visibility: visible; }
  .m-sheet-handle { width: 42px; height: 4px; border-radius: 99px; background: var(--border); margin: 10px auto 4px; }
  .m-sheet-title { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); padding: 2px 16px 12px; }

  .m-menu-list { padding: 4px 12px 8px; }
  .m-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 12px; background: none; border: none; cursor: pointer;
    color: var(--text); font-size: 15px; text-align: left; border-radius: 12px;
  }
  .m-menu-item:active { background: var(--surface-2); }
  .m-menu-item svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
  .m-menu-divider { height: 1px; background: var(--border); margin: 6px 12px; }
}