/* ===== 拡大表示（虫眼鏡・2026-10-01。仕様 01_企画/拡大表示_仕様_2026-10-01.md） =====
   上の段（.album-head）は album.css、傾きボタン（.tilt-row・.tilt-btn）は card.css、アルバムの立体（.binder 以下）は top.css のものを使う */
.zoom-screen { display: flex; flex-direction: column; min-height: 100dvh; background: var(--page); } /* 地の色だけ（TOP の淡い円は出さない） */
.zoom-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.zoom-stage {
  display: flex; justify-content: center; width: 100%;
  touch-action: none;                             /* なぞってもページがスクロール・拡大しない（カードと同じ） */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* アルバムの大きさと置き場所（2026-10-01 PC で測って決めた）。
   立体は箱（.binder・縦横比 322:368）からはみ出して描かれる。回せる範囲（±20°）の 9 通りの端で測ると、はみ出しは箱の幅に対して
   上 13%・下 19%・左右 8%（目の高さが箱の下の端にあるので下が大きい）。この分を余白に取り、どの向きでも上の段と傾きボタンに当たらないようにする。
   - 幅: 画面の幅から左右 16px を引き、左右のはみ出し（1.16 倍）で割った幅
   - 高さ: 上の段 60px・傾きボタンの段 52px・下の余白 16px＋すき間 16px を引いた残りに、箱の高さ（幅の 368/322＝1.14 倍）＋上下のはみ出し（幅の 32%）＝幅の 1.46 倍が収まる幅。少し余裕を見て 1.51 で割る（横向きでアルバムが約 3% 小さくなるだけで、当たらない側）
   - 上限 360px（アプリの幅は最大 480px） */
.zoom-stage { --zw: min(calc((100% - 32px) / 1.16), 360px, calc((100dvh - 60px - 52px - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.51)); }
.zoom-stage .binder {
  width: var(--zw);
  margin: calc(var(--zw) * .13) 0 calc(var(--zw) * .19); /* 上下のはみ出しの分（margin の % は親の幅に対してなので、--zw から計算する） */
  translate: 3.3% 0;       /* 見た目の中心を画面の中心へ（背表紙が左へ張り出すので、定位置で 11px 左に寄っていた＝幅の 3.3%。TOP の left: 12.2% と同じ補正） */
}