/* mobile-shell.css
   モバイル専用シェル（下部タブバー）
   ・PC幅 (769px+) では完全に不活性 — 既存レイアウトへの影響ゼロ
   ・既存ファイルは一切書き換えない。このファイルを読み込むだけで有効化
*/

/* クロスドキュメント View Transitions（Chrome 126+）
   非対応ブラウザは単に無視する。デフォルトのクロスフェードが付くだけ。 */
@view-transition {
  navigation: auto;
}

/* スマホ簡易エディタ関連は既定で非表示（≤768px の編集時のみ @media 内で表示） */
.editor-simple-toolbar { display: none; }
.editor-preview-close { display: none; }
.editor-simple-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  background: #22303d;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 11px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 10000;
  max-width: 84vw;
  text-align: center;
}
.editor-simple-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {

  /* overscroll バウンス時の背景色を和紙色に統一 */
  html {
    background: #f7f4ee;
  }

  /* ===== カスタムプロパティ ===== */
  :root {
    --ms-tabbar-h:    56px;
    --ms-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ms-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --ms-ink:      #0f0f0f;
    --ms-ink-soft: #5c5c5c;
    --ms-line:     #ececec;
    --ms-bg:       #ffffff;
    --ms-accent:   #8a1c1c;
  }

  /* ===== ハンバーガーを非表示（下部タブが代替）===== */
  /* container query の display:block を上書きするため !important を使用 */
  .header-mobile-menu {
    display: none !important;
  }

  /* ===== 右上の人アイコンを非表示（下部タブの「マイページ」が代替）===== */
  .home-header-creator-link {
    display: none !important;
  }

  /* ===== 右上のシェブロン（表示と並び替え）も廃止 =====
     表示切替は専用アイコンに移行済み。中の controls は残るので
     JS からのプログラム的クリックは引き続き機能する */
  .home-page--index .header-index-mobile-display-menu {
    display: none !important;
  }

  /* ===== ロゴを左寄せ（モバイルの中央寄せをやめる）===== */
  /* ハンバーガー消滅で1列目が空くため、1〜2列目にまたがらせて左端から始める */
  .header-band > .home-header-index-brand,
  .header-band > .home-header-reader-brand,
  .header-band > .home-header-editor-brand {
    grid-column: 1 / 3 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .header-band > .home-header-index-brand .home-logo,
  .header-band > .home-header-reader-brand .home-logo-reader-mark,
  .header-band > .home-header-editor-brand .home-logo-editor-mark,
  .header-band > .home-header-index-brand .home-logo-link--creator {
    margin-inline: 0 !important;
  }
  .header-band .home-logo-combined {
    left: 0 !important;
    transform: translateY(-49%) !important;
  }

  /* ===== 上帯背景は最初の白い和紙だけに固定（フェード巡回なし）=====
     header-band-bg.js は3枚の和紙(白→青→ペイント)をクロスフェードで
     巡回させるが、モバイルでは静かな白一枚に統一する。
     JS がインライン style で別画像を当てても !important で打ち消す。 */
  .header-band-bg__layer {
    background-image: url("header-band-washi.webp") !important;
    opacity: 1 !important;
    transition: none !important;
  }

  /* ===== タブバー分のスペースを本文下部に確保 ===== */
  .home-page {
    padding-bottom: calc(var(--ms-tabbar-h) + var(--ms-safe-bottom) + 20px) !important;
  }

  /* ===== 下部タブバー本体 ===== */
  .ms-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: calc(var(--ms-tabbar-h) + var(--ms-safe-bottom));
    padding-bottom: var(--ms-safe-bottom);
    display: flex;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--ms-line);
  }
  /* 起動演出（スプラッシュ）表示中はタブバーを隠し、
     スプラッシュが消える＝コンテンツ表示と同じタイミングでフェードイン */
  body:has(#tf-splash:not(.is-dismiss)) .ms-tabbar {
    opacity: 0;
    pointer-events: none;
  }

  /* ===== タブ共通 ===== */
  .ms-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--ms-ink-soft);
    font-size: 10.5px;
    font-family: var(--ms-serif);
    letter-spacing: .02em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
  }

  .ms-tab svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ms-tab.is-active {
    color: var(--ms-ink);
  }

  .ms-tab.is-active svg {
    stroke-width: 2.2;
  }

  /* 投稿タブも他タブと同じ佇まい（アイコンのみ） */

  /* ================================================================
     Phase B: フィードチップバー
     ================================================================ */

  /* ページ余白(16px)を打ち消して全幅化。チップ自体は padding で
     ロゴと同じ x=16px から始まり、スクロール時は画面端まで流れる */
  .ms-feed-chips {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 -16px;
    padding: 6px 16px 10px;
    background: var(--ms-bg);
    border-bottom: 1px solid var(--ms-line);
  }

  /* 上帯とチップ列の間隔を詰める（既存の margin-bottom: 20px を縮小）*/
  .home-page.home-page--index > .home-header.home-header--index {
    margin-bottom: 4px !important;
  }

  /* 上帯をひとまわりコンパクトに（従来の約8割の高さ）*/
  .home-page--index .home-header--index .header-band {
    min-height: 32px;
  }
  .home-header--index,
  .home-header--reader,
  .home-header--editor {
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 4px !important;
  }
  .header-band .home-logo-combined {
    height: 36px !important;
  }
  .ms-feed-chips::-webkit-scrollbar { display: none; }

  .ms-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: rgba(15, 15, 15, .02);
    color: var(--ms-ink-soft);
    font-family: var(--ms-serif);
    font-size: 12.5px;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, color .12s;
  }

  .ms-chip.is-active {
    background: var(--ms-ink);
    color: var(--ms-bg);
  }

  /* ================================================================
     右上アイコン（表示切替・検索）と全画面検索オーバーレイ
     ================================================================ */

  .ms-header-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--ms-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transform: translateY(-3px);
  }
  .ms-header-btn svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* YouTube 風の全画面検索 */
  .ms-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--ms-bg);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .ms-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
  }
  .ms-search-back {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--ms-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .ms-search-back svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ms-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: #f1f1f1;
    /* 16px 未満だと iOS Safari がフォーカス時に自動ズームする */
    font-size: 16px;
    color: var(--ms-ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .ms-search-input::placeholder {
    color: #9a9a9a;
  }

  /* 検索候補（YouTube 風のサジェスト行） */
  .ms-search-suggests {
    overflow-y: auto;
    max-height: calc(100% - 70px);
    padding: 4px 0;
  }
  .ms-search-suggest {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 20px;
    border: none;
    background: transparent;
    color: var(--ms-ink);
    font-size: 15px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-search-suggest:active {
    background: #f5f5f5;
  }
  .ms-search-suggest svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: var(--ms-ink-soft);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ms-search-suggest span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ================================================================
     Phase B: 本棚表示の磨き込み
     仕様（棚・背表紙・縦書きタイトル）は Web 版と同一。
     ここではタッチ端末向けの微調整のみ行う。
     ================================================================ */

  /* タッチ端末では hover の浮き上がりが「貼り付いた」まま残るため無効化。
     代わりにタップ瞬間だけ軽く持ち上げる */
  .home-page--index #works-list .work-card:hover {
    transform: none;
  }
  .home-page--index #works-list .work-card:active {
    transform: translateY(-3px);
  }

  /* チップバーと棚の間に少し呼吸を持たせる */
  .home-page--index .works-section {
    margin-top: 4px;
  }

  /* 常設のインライン検索窓は廃止（右上の検索アイコン → 全画面検索に置換）*/
  .home-page--index .works-index-mobile-search {
    display: none !important;
  }

  /* シリーズ詳細ビューなどで「戻るバー」等の全幅要素がカードの前に入ると、
     棚板の描画(::before のマスク)と本の段がズレる。
     mobile-shell.js が先頭カードの実位置を測って --ms-shelf-board-offset に
     渡すので、その分だけ描画開始位置を下げる */
  .home-page--index .works-shelf-frame:has(#works-list.works-list--shelf) #works-list.works-list--shelf::before {
    top: calc(12px + var(--ms-shelf-board-offset, 0px)) !important;
  }

  /* 背表紙の上角をわずかに丸めて柔らかい印象に */
  .home-page--index #works-list.works-list--shelf .work-card {
    border-radius: 4px 4px 2px 2px;
  }

  /* ===== 棚と本をひとまわり小さく（約80%）して圧迫感を抑える ===== */
  /* 棚一段の高さ（ボード描画の周期もこの変数から計算される） */
  .home-page.home-page--index .works-shelf-frame:has(#works-list.works-list--shelf) #works-list.works-list--shelf {
    --shelf-mobile-wrap-line-h: 272px;
  }
  /* 高さは棚一段(272px) + 6px = ボードに 6px 沈んで立つ既存の意匠を維持 */
  .home-page--index #works-list.works-list--shelf .work-card {
    height: 278px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .home-page--index #works-list.works-list--shelf .work-card.shelf-book--thin {
    width: 34px !important;
    min-width: 30px !important;
    max-width: 40px !important;
  }
  .home-page--index #works-list.works-list--shelf .work-card.shelf-book--normal {
    width: 40px !important;
    min-width: 34px !important;
    max-width: 46px !important;
  }
  .home-page--index #works-list.works-list--shelf .work-card.shelf-book--thick {
    width: 44px !important;
    min-width: 38px !important;
    max-width: 50px !important;
  }
  .home-page--index #works-list.works-list--shelf .work-card-title {
    font-size: 0.74rem !important;
  }
  .home-page--index #works-list.works-list--shelf .work-card-meta .work-card-author {
    font-size: 0.64rem !important;
  }
  /* 棚フレームの高さは中身に合わせる（固定 min-height を解除） */
  .home-page.home-page--index .works-shelf-frame:has(#works-list.works-list--shelf) .works-shelf-frame-main {
    min-height: 0 !important;
  }

  /* リスト（カード）表示は先頭カードが上端に詰まって見えるので、
     上に少し余白を足してチップ列との間に呼吸を持たせる */
  .home-page--index #works-list:not(.works-list--shelf) {
    padding-top: 14px !important;
  }

  /* ================================================================
     Phase C: 読書ページ × モバイルシェル統合
     スワイプめくり・没入モードの仕組みは Web 版と同一。
     没入モード時は周辺 UI を畳んで本文を画面いっぱいに広げる。
     （寸法変化後の再ページネーションは mobile-shell.js が resize
       イベントを発火して script.js に任せる）
     ================================================================ */

  /* タブバーを出し入れできるよう transition を付与
     （没入モードの transform スライド＋起動演出後の opacity フェードイン） */
  .ms-tabbar {
    transition: transform .28s ease, opacity .6s ease;
  }

  /* 没入モード（本文中央タップ → .page に ui-hidden 付与）時は
     タブバーを画面外へ沈める */
  body:has(.reader-page-body.ui-hidden) .ms-tabbar {
    transform: translateY(100%);
  }

  /* 没入モード：ヘッダー・作品情報・ツールバー・コメント・フッターを
     完全に畳み、本文スタックをビューポートいっぱいに拡大する */
  body:has(.reader-page-body.ui-hidden) .home-header--reader {
    display: none;
  }
  body:has(.reader-page-body.ui-hidden) .home-page--reader .site-footer {
    display: none;
  }
  body:has(.reader-page-body.ui-hidden) .home-page--reader {
    padding-bottom: 0 !important;
  }
  .reader-page-body.ui-hidden .reader-meta {
    display: none;
  }
  .reader-page-body.ui-hidden .paged-reader-toolbar {
    display: none;
  }
  .reader-page-body.ui-hidden .reader-after-reading {
    display: none;
  }
  .reader-page-body.ui-hidden .paged-reader-section {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
  }
  /* style.css 側の隣接セレクタ（詳細度 0,6,0）に勝つため !important。
     ページ番号は absolute で上に重なるため、下は最小限の余白 +
     ホームバー（safe-area）だけ確保すればよい */
  .reader-page-body.ui-hidden .reader-stack {
    height: calc(100vh - 20px - env(safe-area-inset-top, 0px) - var(--ms-safe-bottom)) !important;
    height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - var(--ms-safe-bottom)) !important;
    min-height: 0 !important;
  }

  /* ================================================================
     Phase C: 上下二段組（ツールバーの「二段」ボタンで切替）
     .reader-two-panel は buildPagedReader が付与する
     ================================================================ */

  .reader-page-body.reader-two-panel .reader-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .reader-page-body.reader-two-panel .reader-stack .reader-paper {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  .reader-page-body.reader-two-panel .reader-stack .reader-paper.bottom-panel {
    display: block;
  }

  /* ================================================================
     投稿ページ: ツールバーの整形
     ・フォント選択 → ジャンル/背表紙カラーと同じ標準入力の見た目
     ・ルビ/縦中横/横書き → ホームのチップと同じ枠なしソフトフィル
     ================================================================ */

  /* フォント選択: ジャンル等の .editor-field-shell と同じ意匠
     （枠線なし・白地・角丸10px・うっすら影） */
  .home-page--editor .editor-ruby-tools select.editor-toolbar-font-select,
  .home-page--editor select.editor-toolbar-font-select {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: none !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(44, 29, 23, 0.05);
    color: #2c1d17 !important;
    padding: 10px 26px 10px 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* 折り返しエリアが画面端まで全幅になっているので、
     他の入力欄（x=14px）と左右を揃える。
     上は区切り線とフォント選択が密着しないよう少し余白を取る */
  .home-page--editor .editor-toolbar-primary-fold-anchor {
    padding: 18px 14px 0 !important;
    box-sizing: border-box !important;
  }

  .home-page--editor .editor-ruby-tools .editor-button.editor-button-secondary {
    border: none !important;
    border-radius: 8px !important;
    background: rgba(15, 15, 15, .04) !important;
    color: var(--ms-ink-soft) !important;
    font-family: var(--ms-serif) !important;
    font-size: 12.5px !important;
    letter-spacing: .03em;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 14px !important;
    line-height: 1.4 !important;
  }

  /* ================================================================
     Phase E: エディタ集中入力モード
     本文フォーカス中はヘッダー等をすべて畳み、キーボード上端までの
     可視領域（visualViewport → --ms-vvh）いっぱいに原稿用紙を広げる。
     mobile-shell.js が focus/blur で body.ms-edit-focus を切り替える。
     ================================================================ */

  body.ms-edit-focus .home-header--editor,
  body.ms-edit-focus .editor-meta,
  body.ms-edit-focus .editor-work-fields-card,
  body.ms-edit-focus .editor-writing-toolbar,
  body.ms-edit-focus .editor-count,
  body.ms-edit-focus .editor-body-field > .editor-label,
  body.ms-edit-focus .ms-tabbar,
  body.ms-edit-focus .site-footer {
    display: none !important;
  }
  body.ms-edit-focus .home-page--editor,
  body.ms-edit-focus .editor-page {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.ms-edit-focus .editor-main--writing {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.ms-edit-focus .editor-form {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.ms-edit-focus .editor-body-field {
    margin: 0 !important;
  }
  /* 既存モバイルレイアウトは flex で伸ばすため、flex を切って
     height（= visualViewport 高さ）を効かせる */
  body.ms-edit-focus .editor-writing-stack.reader-stack {
    flex: 0 0 auto !important;
    /* ステータスバー（電波・時計）直下に「ほんの少し」呼吸を持たせる（+10px）。
       その分 height からも差し引いて下端のはみ出しを防ぐ。 */
    height: calc(var(--ms-vvh, 100dvh) - 22px - env(safe-area-inset-top, 0px)) !important;
    margin-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* ================================================================
     Phase F: スマホ簡易エディタ（LINE風 自動拡張入力）≤768px
     編集/新規投稿は自前描画(render/caret/page)を使わず、ネイティブ
     textarea にそのまま書かせる（カーソル/タップ/選択/スクロールは
     ブラウザ標準）。PC(≥769px)は不変。
     ================================================================ */
  .home-page--editor #editor-body-render,
  .home-page--editor #editor-body-caret,
  .home-page--editor #editor-body-selection,
  .home-page--editor .editor-body-pager,
  .home-page--editor .editor-body-page-indicator {
    display: none !important;
  }
  /* ページ用の高さ固定/クリップを解除して内容なり（自動拡張）に */
  .home-page--editor .editor-writing-viewport,
  .home-page--editor .editor-writing-stack.reader-stack,
  .home-page--editor .editor-writing-paper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }
  /* 外側の四角い枠を消し、入力欄の角丸ボックス1つに統一する */
  .home-page--editor .editor-writing-paper {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  /* 集中モードでも簡易エディタは自動拡張（フル高さにしない）。上の余白は維持。 */
  body.ms-edit-focus .home-page--editor .editor-writing-stack.reader-stack {
    height: auto !important;
    margin-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  }
  /* textarea を“見える”プレーン入力に（横書き・自動拡張は JS が height を制御） */
  .home-page--editor #editor-body.editor-body-paper-input {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    /* height は JS(autoResizeEditorBodySimple)がインラインで制御するため !important を付けない。
       ただし style.css の固定 height には勝つ必要があるので auto を指定（同詳細度・後勝ち）。 */
    height: auto;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    color: #2c1d17 !important;
    -webkit-text-fill-color: #2c1d17 !important;
    caret-color: #2c1d17 !important;
    /* 読書ページ本文エリアと同じ紙色（実測 rgb(248,243,236)） */
    background: rgb(248, 243, 236) !important;
    border: 1px solid #e7e2d8 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: var(--reader-line-height, 1.9) !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 1px 2px rgba(44, 29, 23, 0.05);
  }
  .home-page--editor #editor-body.editor-body-paper-input::placeholder {
    color: rgba(44, 29, 23, 0.22) !important;
  }

  /* 簡易モードの書式ツールバー（ルビ／縦中横／プレビュー） */
  .home-page--editor .editor-simple-toolbar {
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 8px;
  }
  .home-page--editor .editor-simple-tool {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #e2dccf;
    background: rgba(15, 15, 15, 0.03);
    color: var(--ms-ink-soft, #5a5048);
    font-family: var(--ms-serif, serif);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.3;
    cursor: pointer;
  }
  .home-page--editor .editor-simple-tool--preview {
    margin-left: auto;
    color: #46566a;
    border-color: rgba(70, 86, 106, 0.42);
    background: rgba(70, 86, 106, 0.08);
  }

  /* プレビュー全画面オーバーレイ（縦書き＋ルビ/縦中横の仕上がり確認） */
  .editor-preview.editor-preview--mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgb(248, 243, 236) !important;
    border: none !important;
    z-index: 9999 !important;
    overflow: auto !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .editor-preview--mobile-overlay .editor-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin: 0 0 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .editor-preview--mobile-overlay .editor-preview-viewport {
    flex: 1 1 auto;
    min-height: 0;
  }
  .editor-preview--mobile-overlay .editor-preview-paper {
    height: calc(100dvh - 160px) !important;
    min-height: 320px;
    width: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    border: 1px solid #ece7dd !important;
    border-radius: 8px !important;
  }

}