/* ============================================================
   会員向け画面（user/配下）を、PC・タブレットでもスマホの幅で表示する共通スタイル
   （馬場さん指摘・奥田さん指示、2026-09-25）
   - <html class="phone-frame">            : 画面を480px幅の枠にし、枠の外は色を敷く（b）
   - <html class="phone-frame phone-frame--plain"> : 480px幅で中央に置くだけで、枠の外は白のまま（a、トップ）
   admin/配下では読み込まない。style.cssは管理画面と共有のため、スマホ幅向けの指定は
   style.cssを書き換えずにここで重ねる。
   読み込み位置は style.css の直後・各画面の<style>より前。各画面の<style>がスマホ幅で
   style.cssを上書きしているのと同じ順序にするため、下の再指定は :where() で詳細度を足さない。
   ============================================================ */

@media (min-width: 481px) {
  /* htmlのoverflowがvisibleのままだと、bodyのoverflow-xはビューポートへ移り、body自身では
     何も切らない（CSSの仕様）。htmlにも指定して、bodyの枠で切れるようにする
     （style.cssのスマホ幅の html, body { overflow-x: clip } と同じ形。馬場さん指摘、2026-09-25） */
  html.phone-frame { background: #E6E2D9; overflow-x: clip; }
  html.phone-frame--plain { background: #fff; }

  html.phone-frame body {
    max-width: 480px; margin: 0 auto; min-height: 100vh;
    /* 100vwブリード（-50vw）の区切り線（.home-sticky-header::after 等）が枠の外へはみ出さないように切る。
       hiddenだとposition: stickyが効かなくなるためclip（style.cssのスマホ幅と同じ） */
    overflow-x: clip;
  }
  html.phone-frame:not(.phone-frame--plain) body { box-shadow: 0 0 32px rgba(13,27,42,.12); }

  /* 画面の左右いっぱいに固定していた部品を、枠の幅に収めて中央に置く
     （left:0とright:0を持つ固定要素は、max-widthとmargin autoで中央に寄る） */
  html.phone-frame .mobile-header,
  html.phone-frame .home-bar,
  html.phone-frame .sticky-total-bar,
  html.phone-frame .lp-nav,
  html.phone-frame .lp-menu-drawer {
    max-width: 480px; margin-left: auto; margin-right: auto;
  }
  html.phone-frame .mobile-header .notif-bell__menu { right: calc(max(0px, (100% - 480px) / 2) + 12px); }
  html.phone-frame .admin-flash { top: 12px; left: auto; right: calc(max(0px, (100% - 480px) / 2) + 12px); max-width: 456px; }
}

/* style.css の @media (max-width: 768px) のうち、会員画面にかかわるものを769px以上でも効かせる
   （サイドバーは会員画面に無いため除く） */
@media (min-width: 769px) {
  :where(html.phone-frame) .app { grid-template-columns: 1fr; }
  :where(html.phone-frame) .topbar { display: none; }
  :where(html.phone-frame) .mobile-header { display: flex; }
  :where(html.phone-frame) .mobile-header .notif-bell__menu {
    position: fixed;
    top: 66px;
    width: min(320px, calc(100% - 24px));
  }

  :where(html.phone-frame) .content { padding: 72px 14px 60px; }
  :where(html.phone-frame) .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  :where(html.phone-frame) .stat { padding: 16px; gap: 14px; }
  :where(html.phone-frame) .stat__num { font-size: 26px; }
  :where(html.phone-frame) .stat__label { font-size: 12px; }
  :where(html.phone-frame) .card { padding: 18px; border-radius: 12px; }
  :where(html.phone-frame) .card__title { font-size: 16px; }
  /* 次の行と下の .filter-bar の行は、style.css 側の元の指定が 2026-10-16 の未使用クラス削除（リファクタ順19）で
     無くなった写し。どの画面にもこのクラスは無いため効いていない（消すかは別判断。消すと ?v= の上げが要る） */
  :where(html.phone-frame) .list-item__meta { min-width: 0; flex-wrap: wrap; }

  :where(html.phone-frame) .form-grid { grid-template-columns: 1fr; }
  :where(html.phone-frame) .form-grid > .form-side { position: static; }

  :where(html.phone-frame) .data-table-wrap { overflow-x: auto; }
  :where(html.phone-frame) .data-table { min-width: 720px; }

  :where(html.phone-frame) .filter-bar { padding: 14px; } /* 上の .list-item__meta と同じく、元の指定は style.css に無い */
  :where(html.phone-frame) .search { min-width: 0; width: 100%; }

  :where(html.phone-frame) .tab-bar { flex-wrap: wrap; }
  :where(html.phone-frame) .tab-item { white-space: nowrap; }
  :where(html.phone-frame) .tab-bar__search { flex-basis: 100%; max-width: none; margin-left: 0; }

  :where(html.phone-frame) .filter-panel-inner__list { grid-template-columns: 1fr; }
  :where(html.phone-frame) .filter-panel-inner__row { flex-direction: column; align-items: stretch; gap: 6px; }
  :where(html.phone-frame) .filter-panel-inner__row-label { flex: none; }
  :where(html.phone-frame) .filter-panel-inner__row-control .select,
  :where(html.phone-frame) .filter-panel-inner__row-control .input { max-width: none; }

}