body {
  margin: 0; /* ブラウザのデフォルトマージンをリセット */
  overscroll-behavior: none; /* ページ全体のオーバースクロールを無効化 */
}

/* 地図コンテナの基本スタイル */
/* 地図全体を覆い、その中に地図本体とオーバーレイ要素を配置するための親コンテナ */
/* PC: ヘッダー60px + フッター約50px = 110px */
#map-container {
  position: relative; /* 子要素の絶対配置の基準点とする */
  height: calc(100vh - 110px); /* ビューポートの高さからヘッダー+フッター分を引く */
  height: calc(100dvh - 110px); /* 動的ビューポート対応 */
  width: 100%; /* 親要素の幅全体を使用 */
  overflow: hidden; /* コンテナからのはみ出しを防ぐ */
  overscroll-behavior: none; /* オーバースクロールのバウンス効果を無効化 */
}

/* スマホ: ボトムナビの高さを考慮（フッターは非表示） */
@media (max-width: 768px) {
  #map-container {
    height: calc(100vh - 60px - env(safe-area-inset-bottom, 0)); /* ボトムナビ分を引く */
    height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0));
  }
}

/* 地図本体のスタイル */
/* #map-container の中に地図を描画するための要素 */
#map {
  height: 100%; /* 親コンテナの高さ全体を使用 */
  width: 100%; /* 親コンテナの幅全体を使用 */
  touch-action: none; /* タッチ操作をマップに委ねる */
  overscroll-behavior: none; /* オーバースクロールのバウンス効果を無効化 */
}

.auth-container {
  position: absolute; /* 親要素（#map-container）を基準に絶対配置 */
  top: 15px; /* 上端からの配置距離 */
  right: 50px; /* 右端からの配置距離 */
  z-index: var(--z-index-base); /* 地図の他の要素よりも手前に表示 */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger Menu */
/* ハンバーガーメニューなどの子要素を相対的に配置するためのコンテナ */
.relative {
  position: relative;
}

.hamburger-button {
  background-color: #ffffff;
  border: 1px solid #dddfe2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hamburger-button svg {
  width: 24px;
  height: 24px;
  color: #333;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 5px); /* Button height + 5px gap */
  right: 0;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: var(--z-index-dropdown);
  min-width: 160px;
  overflow: hidden;
  padding: 8px 0;
}

.dropdown-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}

.dropdown-item:hover {
  background-color: #f0f2f5;
}

/* 要素を非表示にするユーティリティクラス */
.hidden {
  display: none;
}

/* ログアウトボタン自体のスタイル */
/* 視覚的に分かりやすく、クリック可能なボタンとしてデザイン */
.logout-button {
  background-color: #ffffff; /* 背景色を白に */
  color: #1877f2; /* 文字色を青に */
  border: 1px solid #dddfe2; /* 枠線を薄いグレーに */
  padding: 10px 15px; /* 内側の余白 */
  border-radius: 6px; /* 角を丸くする */
  text-decoration: none; /* 下線をなくす */
  font-size: 16px; /* フォントサイズ */
  font-weight: bold; /* フォントを太くする */
  cursor: pointer; /* カーソルをポインターに */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  transition: all 0.3s; /* ホバー時の変化を滑らかに */
}

/* ログアウトボタンのホバー時のスタイル */
/* マウスオーバー時に背景色と枠線を変更してインタラクティブ性を示す */
.logout-button:hover {
  background-color: #f0f2f5; /* 背景色を薄いグレーに */
  border-color: #ccd0d5; /* 枠線を少し濃いグレーに */
}

/* ログインボタン自体のスタイル */
/* 視覚的に分かりやすく、クリック可能なボタンとしてデザイン */
.login-button {
  background-color: #ffffff; /* 背景色を白に */
  color: #1877f2; /* 文字色を青に */
  border: 1px solid #dddfe2; /* 枠線を薄いグレーに */
  padding: 10px 15px; /* 内側の余白 */
  border-radius: 6px; /* 角を丸くする */
  text-decoration: none; /* 下線をなくす */
  font-size: 16px; /* フォントサイズ */
  font-weight: bold; /* フォントを太くする */
  cursor: pointer; /* カーソルをポインターに */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  transition: all 0.3s; /* ホバー時の変化を滑らかに */
}

/* ログインボタンのホバー時のスタイル */
/* マウスオーバー時に背景色と枠線を変更してインタラクティブ性を示す */
.login-button:hover {
  background-color: #f0f2f5; /* 背景色を薄いグレーに */
  border-color: #ccd0d5; /* 枠線を少し濃いグレーに */
}

/* 釣果登録ボタン自体のスタイル */
/* 視覚的に分かりやすく、主要な操作としてデザイン */
.register-catch-button {
  background-color: #42b72a; /* 目立つ緑色 */
  color: #ffffff; /* 白い文字 */
  border: none; /* 枠線なし */
  padding: 12px 20px; /* パディングを増やして大きく見せる */
  border-radius: 6px;
  text-decoration: none;
  font-size: 18px; /* フォントサイズを大きく */
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 強めの影 */
  transition: all 0.3s;
  margin-right: 10px; /* 右側に少しマージンを追加 */
}

.register-catch-button:hover {
  background-color: #36a420; /* ホバーで少し暗く */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* auth-containerのレスポンシブ対応 */
 @media (max-width: 768px) {
  /* ログアウト・ログインボタンのコンテナを右上に配置 */
  .auth-container {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    transform: none;
    width: auto;
    z-index: var(--z-index-base);
  }

  /* ログアウト/ログインボタンのスタイル調整 */
  .auth-container .logout-button,
  .auth-container .login-button {
    width: auto;
    margin-bottom: 0;
    margin-right: 0;
    padding: 8px 12px;
    font-size: 14px;
  }

  /* FAB (Floating Action Button) としての釣果登録ボタン */
  .register-catch-button {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #42b72a;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    z-index: calc(var(--z-index-base) + 1);
    font-size: 0; /* テキストを隠す */
    margin-right: 0;
    border: none;
    padding: 0; /* パディングをリセット */
  }

  .register-catch-button::before {
    content: '+';
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
  }

  .register-catch-button:hover {
    background-color: #36a420;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
}

/* モーダル関連スタイル */

/* モーダル背景のスタイル */
/* 画面全体を覆い、モーダルの背景として半透明のオーバーレイを作成 */
.modal {
  position: fixed; /* 画面に固定 */
  z-index: var(--z-index-modal); /* 他の要素より前面に表示 */
  left: 0;
  top: 0;
  width: 100%; /* 全幅 */
  height: 100%; /* 全高 */
  overflow: auto; /* コンテンツがはみ出た場合にスクロールを有効にする */
  background-color: rgba(0,0,0,0.4); /* 半透明の黒い背景 */
  display: flex; /* Flexboxで中央配置を容易にする */
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
}

/* モーダルコンテンツボックスのスタイル */
/* モーダルの実際のコンテンツを保持するコンテナ */
.modal-content {
  background-color: #fefefe; /* 白い背景 */
  margin: auto; /* Flexboxにより中央配置されるため、autoは補助的な役割 */
  padding: 20px; /* 内側の余白 */
  border: 1px solid #888; /* 枠線 */
  width: 80%; /* 幅 */
  max-width: 500px; /* 最大幅 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* 影 */
  animation-name: animatetop; /* アニメーションの指定 */
  animation-duration: 0.4s; /* アニメーションの時間 */
  border-radius: 8px; /* 角を丸くする */
  text-align: center; /* テキストを中央揃え */
}

/* モーダル表示アニメーションのキーフレーム */
/* モーダルが上からフェードインするアニメーション */
@keyframes animatetop {
  from {top: -300px; opacity: 0} /* 開始時：画面外上部に位置し、透明 */
  to {top: 0; opacity: 1} /* 終了時：画面上部に位置し、不透明 */
}

/* 閉じるボタンのスタイル */
/* モーダルを閉じるためのボタン */
.close-button {
  color: #aaa; /* 色 */
  float: right; /* 右にフロート */
  font-size: 28px; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  cursor: pointer; /* カーソルをポインターに */
}

/* 閉じるボタンのホバー/フォーカス時のスタイル */
/* マウスオーバーまたはフォーカス時に色を変更 */
.close-button:hover,
.close-button:focus {
  color: black; /* 黒色に */
  text-decoration: none; /* 下線をなくす */
  cursor: pointer; /* カーソルをポインターに */
}

/* モーダル内のh2要素のスタイル */
/* モーダルの見出し */
.modal h2 {
  color: #333; /* 濃い灰色 */
  margin-bottom: 15px; /* 下部のマージン */
}

/* モーダル内のp要素のスタイル */
/* モーダルの段落テキスト */
.modal p {
  color: #666; /* 灰色 */
  line-height: 1.5; /* 行の高さ */
  margin-bottom: 10px; /* 下部のマージン */
}

/* モーダル内の統計情報のコンテナスタイル */
/* 統計情報を表示するためのセクション */
.modal-stats {
  margin: 20px 0; /* 上下マージン */
  padding: 15px; /* 内側の余白 */
  background-color: #e9f7ef; /* 薄い緑色の背景 */
  border-radius: 5px; /* 角を丸くする */
  border: 1px solid #d4edda; /* 枠線 */
}

/* モーダル統計情報の見出し (h3) スタイル */
/* 統計セクションのサブ見出し */
.modal-stats h3 {
  color: #28a745; /* 緑色 */
  margin-top: 0; /* 上部マージンをリセット */
  margin-bottom: 10px; /* 下部のマージン */
  font-size: 1.1em; /* フォントサイズ */
}

/* モーダル統計情報内の強調テキスト (strong) スタイル */
/* 統計の数値を強調 */
.modal-stats strong {
  color: #007bff; /* 青色 */
}

/* 警告アラートのスタイル */
/* ユーザーへの警告メッセージを表示するボックス */
.alert-warning {
  background-color: #fff3cd; /* 薄い黄色の背景 */
  border: 1px solid #ffeeba; /* 枠線 */
  color: #856404; /* 暗い黄色のテキスト */
  padding: 10px 15px; /* 内側の余白 */
  border-radius: 5px; /* 角を丸くする */
  margin-bottom: 20px; /* 下部のマージン */
}

/* 警告アラート内のp要素のスタイル */
/* アラート内の段落テキスト */
.alert-warning p {
  margin: 0; /* デフォルトマージンをリセット */
  color: #856404; /* 親要素のテキスト色を継承 */
}

/* 統計グリッドのスタイル */
/* 統計項目を横並びにするためのFlexboxコンテナ */
.modal-stats-grid {
  display: flex; /* Flexboxを使用 */
  justify-content: space-around; /* 項目を均等に配置 */
  gap: 15px; /* 項目間のスペース */
  margin-top: 15px; /* 上部マージン */
  flex-wrap: wrap; /* 画面が小さい場合に折り返す */
}

/* 統計グリッド内の各項目のスタイル */
/* 個々の統計データ表示ブロック */
.stat-item {
  flex: 1; /* 成長・縮小を許可 */
  min-width: 120px; /* 最小幅 */
  text-align: center; /* テキスト中央揃え */
  background-color: #ffffff; /* 白い背景 */
  padding: 10px; /* 内側の余白 */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影 */
}

/* 統計項目内のアイコンのスタイル */
/* 統計に関連するアイコン */
.stat-item i {
  font-size: 2em; /* 大きなアイコンサイズ */
  color: #007bff; /* アイコンの色 */
  margin-bottom: 5px; /* 下部のマージン */
  display: block; /* 独立したブロックとして表示 */
}

/* 統計項目内のp要素のスタイル */
/* 統計項目の説明テキスト */
.stat-item p {
  margin: 0; /* デフォルトマージンをリセット */
  font-size: 0.9em; /* フォントサイズ */
  color: #555; /* 灰色 */
}

/* 統計項目内の数値のスタイル */
/* 統計の主要な数値 */
.stat-number {
  font-size: 1.5em; /* 大きなフォントサイズ */
  font-weight: bold; /* 太字 */
  color: #007bff; /* 青色 */
  margin-top: 5px; /* 上部マージン */
}