/* --- 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);
}

/* --- common.css の末尾に追記 --- */

/* アプリっぽい挙動にするため、ブラウザ標準のプルダウン更新などを無効化 */
body {
  overscroll-behavior-y: contain; /* または none */
}

/* 引っ張った時に出るインジケーターのスタイル */
#ptr-spinner {
  position: fixed;
  top: -60px; /* 最初は隠しておく */
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 操作の邪魔にならないように */
  z-index: 1000;
  transition: transform 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 戻る時のアニメ */
}

/* 中身のアイコン */
#ptr-icon {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(12, 90, 191, 0.3); /* テーマカラーの薄い色 */
  border-top-color: #0c5abf; /* テーマカラー */
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

/* 更新中にくるくる回すクラス */
#ptr-spinner.loading #ptr-icon {
  opacity: 1;
  animation: ptr-spin 0.6s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}