/* --- common.css --- */

/* iPhoneのセーフエリアなどを考慮した初期値 */
:root {
  --bottom-nav-h: 64px;
  --nav-actual-h: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

/* --- 全体のレイアウト設定（Flexboxによる修正） --- */
html, body {
  height: 100%; /* htmlとbodyを画面の高さに合わせる */
  margin: 0;
  padding: 0;
}

body {
  display: flex;          /* Flexboxレイアウトを有効化 */
  flex-direction: column; /* 子要素を縦方向に並べる */
  min-height: 100vh;      /* 最小でも画面の高さいっぱいに広がる */
}

/* --- メインコンテンツのラッパー --- */
.wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  flex: 1; /* ★これが重要！残りのスペースをすべて埋めるように伸縮 */
  /* 下部メニューにコンテンツが隠れないように、下部に余白を追加 */
  padding-bottom: calc(var(--nav-actual-h) + 16px);
}