/* ==========================================================================
   スマホ版 (2026-09-14)
   Figma「漫画閲覧アプリ」 セクション「スマホ版 (390x844)」の実装。
   基準デバイス: iPhone 14 / 390 x 844 (safe-area 上54px 下34px)。

   ・このファイルは style.css / auth.css の「後」に読み込む (上書き用)。
   ・768px 以下だけに効かせる。デスクトップの見た目は一切変えない。
   ・設計の根拠と寸法の出どころは docs/スマホ版UI設計_20260914.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. モバイル専用要素は既定で隠す (デスクトップに出さない)
   -------------------------------------------------------------------------- */
.m-tabbar,
.m-scrim,
.m-sheet,
.m-searchbar-wrap,
.m-header-btn,
.spacer-flex,
#toggle-fit-width {
  display: none;
}

/* スマホ判定は「幅が狭い」だけでは足りない。
   iPhone 14 を横にすると 844x390 になり max-width:768px を外れてしまうので、
   「背が低い」(max-height:500px) も同じ条件に入れる。
   ※ mobile.js の matchMedia も同じ条件にしてあるので、片方だけ直さないこと。 */
@media (max-width: 768px), (max-height: 500px) {

/* --------------------------------------------------------------------------
   2. 共通
   -------------------------------------------------------------------------- */
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
/* ホバー由来の拡大はタッチでは邪魔なので殺す */
.manga-card:hover { transform: none; }
.manga-card:hover .card-body { box-shadow: none; }

/* --------------------------------------------------------------------------
   3. トップバー (app-bar)  高さ52px
       左: ロゴ   右: 検索 / お気に入り / アバター / ≡ (出版社フィルタ)
       下タブを廃止したので、ナビゲーションはすべてここに集約している。
   -------------------------------------------------------------------------- */
.main-header {
  height: calc(var(--size-appbar) + var(--sa-top));
}
.header-inner {
  height: var(--size-appbar);
  /* 以前は左4px・右8px・間隔2pxで画面端に貼りついていた。360pxの狭い画面でも
     76px 余っており詰める必要が無かったので、標準的な16pxに広げた。
     ノッチ端末では safe-area と大きいほうを採る。Figma: mobile/app-bar */
  gap: 4px;
  padding: 0 max(16px, var(--sa-right)) 0 max(16px, var(--sa-left));
}
.logo-btn { gap: 6px; }
.logo-img   { height: 26px; }
.logo-title { font-size: 15px; letter-spacing: 1.5px; }
.logo-sub   { font-size: 8px;  letter-spacing: 2.5px; }

.search-form { display: none; }

/* お気に入りはヘッダーに残す。下タブを廃止したので、ここが唯一の導線になる。
   文字は落としてハートだけのアイコンボタンにし、他のヘッダーボタンと寸法を揃える。 */
.fav-header-btn {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  padding: 0;
  gap: 0;
  background: none;
  border-radius: 8px;
  color: var(--color-fav);
  flex-shrink: 0;
  font-size: 0;            /* 「お気に入り」の文字を消す (SVGだけ残す) */
  /* デスクトップ用の指定は justify-content を持っておらず、既定の flex-start のままだと
     ハートが左に 10px ずれる。他のヘッダーボタンと同じく中央に寄せる。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fav-header-btn svg { width: 24px; height: 22px; }
.fav-header-btn svg [fill="white"]   { fill: currentColor; }
.fav-header-btn svg [stroke="white"] { stroke: currentColor; }
/* fav.php では「現在地」を示すために disabled + 赤背景がインラインで付いている。
   スマホではアイコンだけにしたいので背景を打ち消す (インライン指定に勝つため !important)。 */
.fav-header-btn[disabled] { background: none !important; opacity: 1; }

/* ハンバーガー (出版社で絞り込む) はアカウントアイコンの右。
   DOM 上ですでにアバターの後ろにあるので order は触らない。
   以前は order:-1 で左端へ出していたが、Figma に合わせて 2026-09-16 に撤去した。 */

/* 巻一覧ビューと fav.php のハンバーガーはメニューを持っていない飾りなので、
   スマホでは出さない (押しても何も起きないボタンを置かない) */
.header-inner > .hamburger-btn { display: none; }
.hamburger-btn {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

/* 検索アイコン (モバイルだけ出る) */
.m-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: var(--color-text-primary);
}
/* 検索モード中は虫眼鏡に色を付ける。
   このボタンが出口も兼ねているので、「今押すと戻る」と分かるようにする。 */
body[data-mode="search"] .m-header-btn { color: var(--color-primary); }

.header-inner .spacer-flex { display: block; flex: 1 1 auto; min-width: 0; }

.user-avatar-btn { width: 34px; height: 34px; font-size: 14px; }

/* --------------------------------------------------------------------------
   4. ライブラリ本体
   -------------------------------------------------------------------------- */
.library-main,
.fav-main {
  /* 下タブを廃止したので、下端はセーフエリアぶんだけでよい */
  padding: 14px 0 calc(var(--sa-bottom) + 24px);
}
.library-section {
  max-width: 100%;
  margin: 0 0 var(--space-section-gap);
  padding: 0 max(var(--space-screen-pad), var(--sa-left));
}
.section-heading {
  font-size: 17px;
  font-weight: 700;
  padding: 0;
}
.section-heading-row { margin-bottom: 10px; gap: 8px; }
#recent-section .section-heading,
#sample-section .section-heading { margin-bottom: 10px; }

/* 並び替えはチップ形状に */
.sort-order-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

/* 承認待ちバナー */
.pending-banner {
  margin: 12px var(--space-screen-pad) 0;
  padding: 12px 14px;
  font-size: 13px;
  border-radius: var(--radius-field);
  background: var(--color-warn-bg);
  border-color: var(--color-warn-border);
  color: var(--color-text-warn);
}

/* --------------------------------------------------------------------------
   5. 3列グリッド
       390 − 左右16x2 = 358 / 358 − gap 11x2 = 336 → 1枚 112px
   -------------------------------------------------------------------------- */
.manga-grid,
#volumes-grid {
  /* 固定 161px をやめて流動列に。
     390px 縦持ち → 3列 (1枚112px) / 844px 横持ち → 7列 と、幅なりに増える。 */
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-grid-gap-y) var(--space-grid-gap-x);
  justify-content: stretch;
}
.manga-card { width: 100%; }

.card-body {
  padding: 0;
  gap: 4px;
  border-radius: 0;
  overflow: visible;
}
.card-cover {
  aspect-ratio: 112 / 164;
  border-radius: var(--radius-card);
}
.card-title-bar {
  height: auto;
  overflow: visible;
}
/* タイトルは 12px のままで、太さと行間だけ緩める。
   ジャンプ+ アプリを実測したところ、作品タイトルは約14sp・2列だった (2026-09-16)。
   こちらは 12px・3列なので、文字自体は小さいのにカード幅に対する比率は
   10.7% 対 7.8% で 1.4倍あり、そのぶん詰まって見えていた。
   列数は 3 のまま (200作品超を一覧する用途なので密度を優先) 、
   w500 → 400、行間 1.33 → 1.45 にして圧迫感だけ下げる。 */
.card-title-text {
  position: static;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 17.4px;
}
.card-badge { padding: 0; }
.card-badge span {
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-tertiary);
}

/* ハート: 見た目34px / 実タップ44px */
.fav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  top: 5px;
  right: 5px;
}
.fav-btn::before {
  content: "";
  position: absolute;
  top: -5px; right: -5px; bottom: -5px; left: -5px;
}
.fav-btn:hover { transform: none; }
.fav-btn svg { width: 18px; height: 17px; }

/* 編集は長押しのアクションシートへ移設 */
.edit-btn { display: none !important; }

.card-progress-label { font-size: 10px; padding: 2px 5px; }

/* 「最近開いた漫画」は横スクロールの棚にする */
#recent-grid {
  display: flex;
  gap: var(--space-grid-gap-x);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 画面端まで流したいので、セクションの左右 padding を打ち消して自前で付け直す */
  margin: 0 calc(-1 * var(--space-screen-pad));
  padding: 0 var(--space-screen-pad) 4px;
}
#recent-grid::-webkit-scrollbar { display: none; }
#recent-grid .manga-card {
  flex: 0 0 var(--size-cover-w);
  width: var(--size-cover-w);
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   6. 下タブバーは 2026-09-17 に廃止した
       ホーム / さがす / アカウント はヘッダーのロゴ・虫眼鏡・アバターと重複していたため。
       重複していなかった「お気に入り」は、ヘッダーのハートに移して到達性を保っている
       (下の .fav-header-btn を参照)。
       部品ファイル includes/mobile_tabbar.php は残してあるが、どこからも include していない。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. 検索 (「さがす」タブ)
       別画面ではなく、ライブラリを検索モードに切り替える方式。
   -------------------------------------------------------------------------- */
.m-searchbar-wrap {
  display: none;
  position: sticky;
  top: calc(var(--size-appbar) + var(--sa-top));
  z-index: 80;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 8px max(var(--space-screen-pad), var(--sa-left)) 10px;
}
body[data-mode="search"] .m-searchbar-wrap { display: block; }
/* 検索モードでは「最近開いた漫画」「試し読み」棚を隠して結果に集中させる */
body[data-mode="search"] #recent-section,
body[data-mode="search"] #sample-section { display: none !important; }

.m-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--size-touch-min);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-field-bg);
}
.m-searchbar svg { flex-shrink: 0; color: var(--color-text-tertiary); }
.m-searchbar input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  /* 16px 未満だと iOS が自動ズームする */
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
}
.m-searchbar input::placeholder { color: var(--color-text-tertiary); }
.m-search-clear {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: #d5d5d8;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 出版社チップの横スクロール */
.m-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 8px;
  padding-bottom: 2px;
}
.m-chip-row::-webkit-scrollbar { display: none; }
.m-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.m-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* --------------------------------------------------------------------------
   8. ボトムシート (出版社フィルタ / カード長押し)
   -------------------------------------------------------------------------- */
.m-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--color-scrim);
}
.m-scrim[hidden] { display: none; }

/* 出版社ドロップダウンをボトムシート化 */
.hamburger-wrap .dropdown-menu {
  position: fixed;
  top: auto;
  left: 0; right: 0; bottom: 0;
  z-index: 1600;
  min-width: 0;
  max-height: 72dvh;
  border: none;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
  padding: 8px 0 calc(8px + var(--sa-bottom));
  overscroll-behavior: contain;
}
/* つまみ */
.hamburger-wrap .dropdown-menu::before {
  content: "";
  display: block;
  width: 38px; height: 4px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background: #c7c7cc;
}
.dropdown-item {
  min-height: var(--size-touch-min);
  padding: 12px var(--space-screen-pad);
  font-size: 15px;
}
.dropdown-item-count { font-size: 13px; }
.dropdown-header { padding: 10px var(--space-screen-pad) 6px; font-size: 12px; }

/* 汎用シート (カード長押し) */
.m-sheet {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1700;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 8px calc(8px + var(--sa-bottom));
  background: var(--color-scrim);
}
.m-sheet[hidden] { display: none; }
.m-sheet-panel {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.m-sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.m-sheet-head strong { font-size: 14px; font-weight: 700; }
.m-sheet-head span   { font-size: 12px; color: var(--color-text-tertiary); }

.m-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
}
.m-act:last-child { border-bottom: none; }
.m-act.danger { color: var(--color-danger); }
.m-act.strong { font-weight: 700; }
.m-act svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   9. 巻一覧
   -------------------------------------------------------------------------- */
.sub-header {
  height: auto;
  min-height: var(--size-appbar);
  padding: 0 max(8px, var(--sa-left));
  top: calc(var(--size-appbar) + var(--sa-top));
}
.volumes-align {
  margin: 0;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.sub-header-title { font-size: 17px; font-weight: 700; }

/* 「作品一覧」ボタンは戻る矢印だけにする (幅を作品名に譲る) */
#back-to-library {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  padding: 0;
  justify-content: center;
  background: none;
  color: var(--color-text-primary);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
}
#back-to-library svg { width: 18px; height: 18px; }
#back-to-library svg path { stroke: var(--color-text-primary); stroke-width: 2; }

.volumes-main {
  padding: 16px max(var(--space-screen-pad), var(--sa-left))
           calc(var(--sa-bottom) + 24px);
  min-height: 0;
}
#volumes-grid .card-badge { display: none; }

/* --------------------------------------------------------------------------
   10. リーダー
       上バー = 戻る + 作品名 / 下バー = 操作4つ + シーク
   -------------------------------------------------------------------------- */
.reader-header {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.reader-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* ライブラリのヘッダーと揃える。Figma: mobile/reader-appbar */
  gap: 4px;
  padding: 0 max(16px, var(--sa-right)) 0 max(16px, var(--sa-left));
  height: 48px;
  overflow: visible;
}
/* タイトルは1行・省略記号。独立行にはしない (縦を食うため) */
.reader-title-top {
  display: block;
  flex: 1 1 auto;
  order: 2;
  width: auto;
  flex-basis: auto;
  min-width: 0;
  padding: 0 4px;
  border-bottom: none;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.reader-title-inline { display: none; }
.toolbar-left, .toolbar-right { display: contents; }
.ctrl-sep { display: none; }

/* 戻るは上バーに残してアイコンだけにする */
#back-to-volumes {
  order: 1;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  padding: 0;
  justify-content: center;
  background: none;
  border-radius: 50%;
  font-size: 0;
  flex-shrink: 0;
}
#back-to-volumes svg { width: 20px; height: 20px; }
#back-to-volumes svg polygon { fill: var(--color-text-primary); }

/* 上バーの右側に同じ幅のダミーを置いてタイトルを真ん中に見せる */
.reader-toolbar::after {
  content: "";
  order: 3;
  width: var(--size-touch-min);
  flex-shrink: 0;
}

/* --- 下バー --- */
#progress-bar-container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* mobile.js が生成する操作ボタンの行 */
.m-reader-controls {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}
.m-reader-controls .toolbar-row {
  display: contents;
}
.m-reader-controls .ctrl-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 58px;
  flex-direction: column;
  gap: 3px;
  padding: 8px 2px;
  background: none;
  border-radius: 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  white-space: normal;
  text-align: center;
}
.m-reader-controls .ctrl-btn:hover { background: none; }
.m-reader-controls .ctrl-btn:active { background: rgba(0, 0, 0, 0.05); }
.m-reader-controls .ctrl-btn.active { color: var(--color-primary); }
/* 下バーは PC と同じボタンを移動して使い回している (mobile.js の MOVE_IDS)。
   PC 側で viewBox を図柄ぴったりに切り詰めた影響がここにも及ぶので、
   スマホでの見た目が変わらない寸法に固定しておく。24:17.6 を保つこと。 */
.m-reader-controls .ctrl-btn svg { width: 20px; height: 15px; }
/* 上バー用に白抜きで描かれている SVG をバー背景 (白) でも見えるようにする */
.m-reader-controls .ctrl-btn svg [stroke="white"] { stroke: currentColor; }
.m-reader-controls .ctrl-btn svg [fill="white"]   { fill: currentColor; }
.m-reader-controls .ctrl-btn svg rect[fill-opacity] { fill: currentColor; fill-opacity: .25; }
.m-reader-controls .ctrl-btn span { display: block; }
/* 「幅に合わせる」はデスクトップでは隠しているので、下バーの中だけ出す */
.m-reader-controls #toggle-fit-width { display: inline-flex; }

/* シーク行 */
.m-seek-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px max(var(--space-screen-pad), var(--sa-left))
           calc(8px + var(--sa-bottom)) max(var(--space-screen-pad), var(--sa-right));
}
.m-seek-wrap .progress-info {
  justify-content: center;
  padding-bottom: 2px;
}
#progress-text {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  color: var(--color-text-secondary);
}
/* 帯8px + 上下にヒット領域を足して合計44px */
#progress-bar {
  /* style.css の flex:1 が縦積み (column) だと「高さを伸ばす」指定になり、
     余白が無いぶん flex-basis:0 で高さ 0 に潰れる。ここで打ち消す。 */
  flex: 0 0 auto;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  margin: 18px 0;
  touch-action: none;
}
#progress-bar::before {
  content: "";
  position: absolute;
  top: -18px; right: 0; bottom: -18px; left: 0;
}
#progress-fill { border-radius: 4px; }
#progress-circle {
  width: 28px; height: 28px;
  border: 2px solid var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 紙面。横スワイプ中に縦スクロールが暴れないようにする */
#content-container {
  touch-action: pan-y pinch-zoom;
}

/* 紙面は「画面全体」に対して上下中央に置いている。
   ところが上バー (実測 48px) と下バー群 (操作59 + シーク77 = 136px) は高さが違うので、
   そのままだとバーを出したとき紙面の上に 98px・下に 10px となって崩れて見える。

   下に差分ぶんの余白を足し、中央寄せの基準を「バーとバーのあいだ」に合わせる。
   この余白は**常に**入れておく。バーの表示・非表示で出し入れすると紙面が上下に動いて
   読んでいるときに気が散るため、位置は固定して動かさない。

   差分は app.js の updateReaderBarDiff() が実測して --reader-bar-diff に入れる
   (端末やセーフエリアでバーの高さが変わるため、決め打ちにしない)。
   transform ではなく padding にしているのは、ピンチズームのプレビューが
   紙面の inline transform を使っていて衝突するため。

   セレクタを .single-page / .spread-page 付きにしているのは、
   style.css の `#content-container.single-page { padding: ... }` が
   ショートハンドで padding-bottom ごと上書きしてくるため (詳細度を合わせて後勝ちにする)。 */
#content-container.single-page,
#content-container.spread-page {
  padding-bottom: calc(var(--sa-bottom, 0px) + var(--reader-bar-diff, 0px));
}

/* ドラッグ中に出る現在ページのふきだし */
.m-seek-bubble {
  position: fixed;
  z-index: 1100;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
.m-seek-bubble[hidden] { display: none; }

/* ズーム中の表示 */
.m-zoom-badge {
  position: fixed;
  z-index: 1100;
  left: 50%;
  top: calc(12px + var(--sa-top));
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.m-zoom-reset {
  position: fixed;
  z-index: 1100;
  right: max(16px, var(--sa-right));
  bottom: calc(24px + var(--sa-bottom));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--size-touch-min);
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
}
.m-zoom-badge[hidden], .m-zoom-reset[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. メタデータ編集モーダル (スマホではボトムシート風に)
   -------------------------------------------------------------------------- */
.modal-backdrop { padding: 0; align-items: flex-end; }
.modal-card {
  max-width: 100%;
  max-height: 92dvh;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 20px var(--space-screen-pad) calc(20px + var(--sa-bottom));
}
.modal-actions button { height: var(--size-touch-min); flex: 1 1 0; }
.modal-danger-row { flex-direction: column; align-items: stretch; gap: 10px; }
.btn-danger { height: var(--size-touch-min); }
.preset-row button { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.genre-tag { padding: 6px 8px 6px 12px; font-size: 13px; }
.genre-tag button { font-size: 16px; padding: 0 4px; }

/* --------------------------------------------------------------------------
   12. 認証まわり (login / register / two_factor / pending)
   -------------------------------------------------------------------------- */
body.auth-page { padding: 16px; }
.auth-card {
  max-width: 100%;
  padding: 28px 20px calc(24px + var(--sa-bottom));
  border-radius: 14px;
}
.auth-logo .logo-img { height: 52px; }
.auth-field input { height: 48px; border-radius: var(--radius-field); }
.auth-submit, .auth-guest { height: 48px; border-radius: var(--radius-field); }
.auth-footer { font-size: 13px; }

/* --------------------------------------------------------------------------
   13. プロフィール / ユーザー管理
   -------------------------------------------------------------------------- */
/* profile.php も body.auth-page なので、中央寄せを解除して上から積む */
body.auth-page:has(.profile-wrap) {
  display: block;
  padding: 0 0 calc(24px + var(--sa-bottom));
  background: var(--color-page-bg);
}
.profile-wrap {
  max-width: 100%;
  padding: 16px max(var(--space-screen-pad), var(--sa-left))
           calc(24px + var(--sa-bottom));
}
.profile-back { min-height: var(--size-touch-min); display: inline-flex; align-items: center; }
.profile-card { border-radius: 12px; padding: 18px 16px; }
.btn-secondary, .auth-submit { min-height: var(--size-touch-min); }
.avatar-row { flex-wrap: wrap; }

body.admin-page {
  padding: 0 0 calc(24px + var(--sa-bottom));
  background: var(--color-page-bg);
}
.admin-wrap { max-width: 100%; padding: 16px max(var(--space-screen-pad), var(--sa-left)); }
.admin-head { flex-wrap: wrap; gap: 8px; }
.admin-back { min-height: var(--size-touch-min); display: inline-flex; align-items: center; }

/* 6列テーブルはスマホでは 1人1カードに積み替える */
.user-table,
.user-table tbody,
.user-table tr,
.user-table td { display: block; width: 100%; }
.user-table thead { display: none; }
.user-table {
  background: none;
  border: none;
  box-shadow: none;
}
.user-table tr {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.user-table td {
  border: none;
  padding: 3px 0;
}
.user-table td[data-label]::before {
  content: attr(data-label);
  color: var(--color-text-tertiary);
  font-size: 12px;
  margin-right: 6px;
}
/* 権限バッジと状態バッジは1行に並べる */
.user-table td.role-cell,
.user-table td.status-cell {
  display: inline-block;
  width: auto;
  margin: 6px 6px 2px 0;
}
.user-table .meta-cell { font-size: 12px; color: var(--color-text-secondary); }
.user-table .row-actions { display: flex; gap: 8px; margin-top: 8px; }
.user-table .row-actions form { flex: 1 1 0; }
.user-table .btn-action {
  width: 100%;
  min-height: var(--size-touch-min);
  border-radius: var(--radius-field);
}

} /* @media (max-width: 768px) */


/* ==========================================================================
   画面が低いとき (横持ち等): 認証カードの上下中央寄せをやめる
   body.auth-page は align-items:center なので、カードが画面より高いと
   上端が切れてスクロールしても出てこない。ブロック配置に落として上から積む。
   ========================================================================== */
@media (max-height: 700px) {
  body.auth-page {
    display: block;
    padding: 16px;
  }
  body.auth-page > .auth-card { margin: 0 auto; }
}

/* ==========================================================================
   横向き (見開き) のとき: 上下バーを薄くして紙面を稼ぐ
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .reader-toolbar { height: 44px; }
  .m-reader-controls { border-bottom: none; }
  /* 横は縦幅が足りないので、操作とシークを1行に畳む */
  #progress-bar-container { flex-direction: row; align-items: center; }
  .m-reader-controls { flex: 0 0 auto; }
  .m-reader-controls .ctrl-btn {
    width: 52px;
    flex: 0 0 52px;
    height: 52px;
    font-size: 0;
    gap: 0;
    padding: 0;
  }
  .m-reader-controls .ctrl-btn span { display: none; }
  .m-seek-wrap {
    flex: 1 1 auto;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    padding: 0 max(12px, var(--sa-right)) var(--sa-bottom) max(12px, var(--sa-left));
  }
  .m-seek-wrap .progress-info { padding: 0; flex-shrink: 0; }
  /* 横は1行なので、こんどは横方向に伸ばす */
  #progress-bar { flex: 1 1 auto; width: auto; margin: 16px 0; }
  #progress-bar::before { top: -16px; bottom: -16px; }
}