/* --- 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 {
  position: fixed;
  top: -80px; /* 文字が入る分、少し上に隠す */
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column; /* ★アイコンと文字を縦に並べる */
  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-text {
  font-size: 13px;
  font-weight: bold;
  margin-top: 6px;
  color: #666;
}

/* アイコン自体の大きさ（common.css 105行目付近） */
#ptr-icon {
  width: 28px;
  height: 28px;
  /* 枠線を少し細くし、背景色を薄くする */
  border: 2px solid rgba(12, 90, 191, 0.1); 
  /* 動く方の線を少し太く(3px)して目立たせる */
  border-top: 3px solid #0c5abf; 
  border-radius: 50%;
  opacity: 0;
  box-sizing: border-box;
}

/* ★ 更新中：回転を 0.8s から 0.6s に高速化し、加速感を出す */
.loading #ptr-icon {
  opacity: 1 !important;
  /* ease-in-out ではなく linear にすることで、途切れず回り続けます */
  animation: ptr-spin 0.6s linear infinite; 
}

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

/* --- スケルトンスクリーン（読み込み中の骨組み表示） --- */

/* このクラスを付けた要素は、読み込みが終わるまでグレーの枠になります */
.skeleton {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,    /* 30%から35%へ（少し光を絞る） */
    rgba(255, 255, 255, 0.5) 50%, 
    rgba(255, 255, 255, 0) 65%     /* ここは必ず65%（40%だと変になります） */
  );
  
  /* 背景サイズは300%くらいが一番コントロールしやすいです */
  background-size: 300% 100%; 
  
  /* 【重要】linear に変えると、止まりそうな感じが消えて一定速度になります
     時間は 3s くらいにすると、YouTubeのような落ち着いた速さになります */
  animation: sk-shimmer 3s infinite linear; 
  
  background-color: rgba(0, 0, 0, 0.1); 
  color: transparent !important;
  border-radius: 10px;
  display: inline-block; /* blockから変更 */
  vertical-align: middle;
  width: var(--sk-w, 100%);
  height: 1.2rem;
  overflow: hidden;
}

@keyframes sk-shimmer {
  0% {
    /* 300%の背景の端から端までを1回で通す設定 */
    background-position: 150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}