/* 地図の空白調整 */
html, body {
    padding: 0; /* ページ全体の余白をなくす */
    margin: 0;  /* ページ全体の余白をなくす */
    height: 100%; /* ★最重要：htmlとbodyが画面の高さ全体を占めるようにする */
    width: 100%;  /* ★最重要：htmlとbodyが画面の幅全体を占めるようにする */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#mapdiv {
    height: 100%;
    width: 100%;
    z-index: 0;
}

#sidebar {
    position: fixed;
    top: 0;
    right: -380px; /* サイドバーの幅に合わせて変更 */
    width: 380px; /* サイドバーの幅 */
    height: 100%; /* これで親の高さ全体を占有 */
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.3s;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    /* overflow-y: auto; ← これは一旦削除またはコメントアウト */

    /* ↓↓↓ この3行を追加 ↓↓↓ */
    display: flex;             /* Flexコンテナにする */
    flex-direction: column;    /* 子要素を縦方向に並べる */
    /* サイドバー自体がはみ出す可能性を考慮し、overflow-y: auto は #chousaku-list に任せるか、
       Flexboxで制御しきれない場合のみ、#sidebar にも適用を検討 */
}

#sidebar.open {
    right: 0;
}

#sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 10px;
    position: relative; /* 閉じボタンの基準位置をここに移動 */
}
#sidebar-header h3 {
    margin: 0;
    font-size: 1.2em;
}
#close-sidebar {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #555;
}

/* Googleマップ風の閉じボタン */
.google-style-close-btn {
    position: absolute;
    left: -30px;
    top: 50vh;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: all 0.2s ease;
}

.google-style-close-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.google-style-close-btn i {
    color: #666;
    font-size: 16px;
}
#toggle-sidebar-button {/*情報・検索ボタン*/
    position: fixed;
    top: 80px;
    left: 10px;
    z-index: 101;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 5px;
}
#toggle-sidebar-button i {
    font-size: 1.2em;
}
#search-container, #address-search-container {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap; /* 小さな画面で折り返す */
    gap: 5px;
}
/* 検索テキストボックスのクリアボタン用スタイル */
.search-input-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.clear-input-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    z-index: 10;
}

.clear-input-btn:hover {
    background-color: #f0f0f0;
    color: #666;
}

.clear-input-btn.visible {
    display: flex;
}

#search-input, #address-search-input {
    flex-grow: 1; /* 入力フィールドが幅を占める */
    padding: 8px 30px 8px 8px; /* 右側に30pxのパディングを追加 */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px; /* 最低限の幅を設定 */
}
#search-button, #address-search-button {
    padding: 8px 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
}
#search-button:hover, #address-search-button:hover {
    background-color: #218838;
}
#chousaku-list {
    /* ↓↓↓ この行を修正 ↓↓↓ */
    flex-grow: 1; /* 親（#sidebar）の残りのスペースを全て埋める */
    
    /* ↓↓↓ この行はそのまま残す ↓↓↓ */
    overflow-y: auto; /* #chousaku-list 内のコンテンツがはみ出したらスクロール可能にする */

    padding-right: 10px;
}
.chousaku-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.chousaku-item:hover {
    background-color: #f0f0f0;
}
.chousaku-item h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #007bff;
    font-size: 1.1em;
}
.chousaku-item p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
}
.layer-checkbox-container {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.layer-checkbox-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
}
.layer-checkbox-container label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #333;
}
.layer-checkbox-container input[type="checkbox"] {
    margin-right: 5px;
}

/* バージョン表示位置を左下に変更 */
#version-display {
    position: absolute;
    bottom: 4px; /* 下からの距離 */
    left: 82px;    /* 右からの距離 v */
    z-index: 1000;
    background-color: rgba(255,255,255,0.7);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: #333;
}
/* （文字付き）アクションボタンの基本スタイル (既存のボタンと合わせて調整) */
.action-button {
    position: fixed;
    top: 130px; /* 位置を調整 */
    left: 100px; /* 位置を調整 */
    z-index: 950; /* サイドバーの少し下 */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
    display: flex; /* アイコンとテキストを並べるため */
    align-items: center;
    gap: 5px; /* アイコンとテキストの間隔 */
}

/* 検索結果マーカーのスタイル */
.search-result-marker {
    z-index: 1000 !important;
}

.search-result-marker div {
    background-color: #ff4444 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Leaflet.PolylineMeasure コントロールのカスタム位置調整 */
.leaflet-control-polylinemeasure {
    /*
     * margin を使って、指定した 'position' (例: topleft) からの相対位置を調整します。
     * 例: topleft から右に20px、下に20pxずらす場合
     */
    margin-top: 40px;   /* ズームコントロールから40px下に配置 */
    margin-left: 10px; /* 左から10px右に移動 */

    /*
     * もし、デフォルトの位置を完全に無視して、画面の特定のピクセル位置に配置したい場合は、
     * position: absolute; と top/left/right/bottom を直接設定することも可能ですが、
     * 他のLeafletコントロールとの干渉に注意が必要です。
     * 例: 画面左上から50px下に、150px右に配置
     */
    /*
    position: absolute !important;
    top: 50px !important;
    left: 150px !important;
    */
}

/* 円描画モード切り替えボタンのスタイル (円描画)*/
.leaflet-control-draw-circle {
    position: absolute !important;
    top: 170px !important;    /* ← ここが"縦位置"の指定です */
    left: 0px !important;    /* ← ここが"横位置"の指定です */
    z-index: 1001 !important;
    display: block !important;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
    cursor: pointer;
    text-align: center;
}

/* 現在地表示コントロールの位置調整（唯一の有効定義） */
.leaflet-top.leaflet-left .leaflet-control-locate {
    position: absolute !important;
    top: 350px !important;
    left: 30px !important;
    z-index: 1002 !important;
    display: block !important;
    margin: 0 !important;
}

/* 情報・検索ボタン */
#toggle-sidebar-button {/* [情報検索ボタンの配置 */
    top: 250px; /* 他コントロールより下に配置 */
    left: 10px; /* 左端に配置 */
}

/* データ概要ボタン */
#open-info-panel-button {/* データ概要ボタンの配置 */
    top: 300px; /* 情報・検索ボタンの下に配置 */
    left: 10px; /* 左端に配置 */
}

/* データ概要詳細ウインドウ */

#radius-settings-ui {
    position: absolute;
    top: 210px;
    left: 54px;
    z-index: 1000;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.20);
    display: none; /* 初期状態では非表示 */
}

/* input 要素のスタイルもCSSに移動するなら */
#radius-settings-ui #radius-input {
    width: 60px;
    margin-right: 5px;
}

/* フローティング 「データ概要」情報パネルのスタイル */
.floating-panel {
    /* display: none !important; を削除 - JavaScriptで制御 */
    position: fixed;
    top: 310px;         /* データ概要ボタンと同じ高さ */
    left: 130px;        /* ボタン(left: 10px)の右側に表示 */
    z-index: 2000;      /* サイドバーや他UIより前面に */
    background-color: #fff;
    border: 2px solid #007bff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 180px;       /* パネルの幅 */
    max-height: 80%;    /* 高さが画面からはみ出さないように */
    overflow-y: auto;
}

.panel-header {
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.close-panel-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #888;
    cursor: pointer;
    line-height: 1; /* ボタン内の縦位置調整 */
    padding: 0;
}

.close-panel-button:hover {
    color: #333;
}

.panel-content {
    padding: 15px;
}

.panel-content p {
    margin: 5px 0;
    font-size: 14px;
}

/* =================================================== */
/* 中心点マーカーのカスタムアイコン用スタイル */
.center-dot {
    width: 8px;
    height: 8px;
    background-color: darkred; /* 中心点の色 */
    border-radius: 50%; /* 丸い形 */
    border: 1px solid white;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* 距離表示のスタイル(円描画) */
.circle-distance-label {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明の白背景 */
    padding-top: 3px;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 60px;
    border-radius: 3px;
    border: 1px solid #aaa;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    pointer-events: none; /* マウスイベントを透過させる */
}

/* 円にホバーした際に表示されるツールチップのスタイル(円描画) */
.circle-info-tooltip {
    background-color: rgba(255, 255, 255, 0.9); /* 少し不透明度を上げた白背景 */
    padding: 5px 10px; /* 上下左右のパディング */
    border-radius: 4px;
    border: 1px solid #777; /* 少し濃い目のボーダー */
    font-size: 0.95em; /* 情報なので少し小さめの文字サイズ */
    color: #333;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影で浮遊感を出す */
}

.leaflet-control-draw-circle img {
    width: 28px; /* アイコンのサイズ */
    height: 28px;
    display: block;
    margin: 2 auto;
}
.leaflet-control-draw-circle.active {
    background-color: #e0ffe0; /* アクティブ時の背景色 */
    border-color: #008000;
}
/* ================================================================= */
/* Leaflet.PolylineMeasure コントロールのカスタム位置調整 */
.leaflet-control-polylinemeasure {
    position: absolute !important;
    top: 40px !important;
    left: 10px !important;
    margin: 0 !important;
    z-index: 1003 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ポリライン計測コントロールの確実な表示 */
.leaflet-control-polylinemeasure .leaflet-control-polylinemeasure-toggle {
    position: absolute !important;
    top: 40px !important;
    left: 10px !important;
    z-index: 1003 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ポリライン計測コントロールのボタン要素 */
.leaflet-control-polylinemeasure a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ======================================================================= */
/* 現在地表示コントロールの位置調整 */
/*

.leaflet-top.leaflet-left .leaflet-control-locate {
    position: absolute !important;
    top: 10px !important;
    left: 0px !important;
    z-index: 1002 !important;
    display: block !important;
    margin: 0 !important;
}
*/
/* 現在地アイコンのサイズ調整と中央配置 */
/*
.leaflet-control-locate-location-arrow {
    font-size: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform: translateY(2px);
}
*/
/* ボタン自体のサイズ調整とパディング調整（変更なし） */
/*
.leaflet-control-locate .leaflet-bar-part-single {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    box-sizing: border-box;
}
*/
/* ============================================================================== */

/* ========================
   Leafletコントロール配置
   ======================== */

/* 距離計測コントロール */
.leaflet-control-polylinemeasure {
    position: absolute !important;
    top: 40px !important;
    left: 10px !important;
    z-index: 1000 !important;
    display: block !important;
    margin: 0 !important;
}

/* 円描画コントロール */
.leaflet-control-draw-circle {
    position: absolute !important;
    top: 205px !important;
    left: 0px !important;
    z-index: 1001 !important;
    display: block !important;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
    cursor: pointer;
    text-align: center;
}

/* 現在地表示コントロール */
.leaflet-top.leaflet-left .leaflet-control-locate {
    position: absolute !important;
    top: 180px !important;
    left: 10px !important;
    z-index: 1002 !important;
    display: block !important;
    margin: 0 !important;
}

/* 情報・検索ボタン */
#toggle-sidebar-button {
    position: fixed;
    top: 260px;
    left: 10px;
    z-index: 101;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* データ概要ボタン */
#open-info-panel-button {
    position: fixed;
    top: 310px;
    left: 10px;
    z-index: 101;
}

/* ========================
   ここまでコントロール配置
   ======================== */

/* --- モダン遺跡ポップアップ --- */
.heritage-popup {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 18px 18px 10px 18px;
  font-family: 'Segoe UI', 'Hiragino Sans', 'Meiryo', sans-serif;
  min-width: 260px;
  max-width: 350px;
}
.heritage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: white;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  margin: -8px -8px 8px -8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.heritage-header::before {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.7;
  color: rgba(255,255,255,0.8);
}

.heritage-header:active {
  cursor: grabbing;
  background: linear-gradient(135deg, #357abd, #2c5aa0);
  transform: translateY(1px);
}
.heritage-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.02em;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.heritage-info {
  font-size: 0.95em;
  margin-bottom: 8px;
}
.survey-areas-section {
  margin-top: 8px;
}
.survey-areas-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.survey-area-item {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  margin: 2px 0;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
  border: none;
  border-left: 3px solid transparent;
  position: relative;
}
.survey-area-item:hover, .survey-area-item:focus {
  background: rgba(255,255,255,0.25);
  transform: translateX(4px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-left-color: #ffec99;
}
.survey-area-item.hovered {
  background: rgba(255,255,255,0.25) !important;
  border-left-color: #ffec99 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  50% {
    box-shadow: 0 4px 12px rgba(255,236,153,0.3);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}
.area-name {
  font-size: 1em;
  color: #fff;
}
.area-indicator {
  font-size: 1.1em;
  color: #ffec99;
  margin-left: 8px;
}

/* --- 調査区詳細オーバーレイ --- */
.survey-details-overlay {
  position: absolute;
  z-index: 2001;
  animation: slideInFromLeft 0.4s cubic-bezier(.4,2,.6,1);
  /* 動的配置のため、left, top, transformはJavaScriptで設定 */
  max-width: 350px;
  min-width: 260px;
}
.survey-details-card {
  background: #fff;
  color: #333;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  min-width: 260px;
  max-width: 350px;
  padding: 18px 20px 14px 20px;
  font-family: 'Segoe UI', 'Hiragino Sans', 'Meiryo', sans-serif;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.draggable-header {
  cursor: grab;
  user-select: none;
}

.draggable-header:active {
  cursor: grabbing;
}

.survey-details-overlay.dragging {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  transform: scale(1.02);
  transition: none;
}
.card-header h3 {
  font-size: 1.1em;
  margin: 0;
  color: #764ba2;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.3em;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.close-btn:hover {
  color: #e74c3c;
  background-color: rgba(255,255,255,0.1);
}
.card-content p {
  margin: 6px 0;
  font-size: 0.98em;
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- 遺跡マーカーポップアップが消えないようにする --- */
.heritage-popup-leaflet {
  z-index: 2000 !important;
  cursor: default;
  user-select: none;
}

.heritage-popup-leaflet.dragging {
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  transform: scale(1.02);
  transition: none;
  cursor: grabbing !important;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 600px) {
  .heritage-popup, .survey-details-card {
    min-width: 90vw;
    max-width: 98vw;
    font-size: 0.97em;
    padding: 10px 6vw 10px 6vw;
  }
  .survey-details-overlay {
    /* モバイルでは遺跡ポップアップの下に表示 */
    left: 50% !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    max-width: 90vw !important;
  }
}

/* ===== 包蔵地ラベル表示ボタン ===== */
.houzou-label-control button {
  display: block;
  width: 58px;
  height: 58px;
  line-height: 1.2;
  font-size: 12px;
  background: #fff;
  color: #1b3d7a;
  border: none;
  cursor: pointer;
  padding: 6px;
  text-align: center;
  font-weight: 600;
}
.houzou-label-control button.active {
  background: #1b64c1;
  color: #fff;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.35);
}
.houzou-label-chip {
  background: rgba(15, 59, 112, 0.9);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,0.35);
}

#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
}

#app-loading-overlay[hidden] {
  display: none !important;
}

.app-loading-box {
  text-align: center;
  padding: 24px 32px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.app-loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border: 3px solid #e0e0e0;
  border-top-color: #2e7d32;
  border-radius: 50%;
  animation: app-loading-spin 0.8s linear infinite;
}

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

#app-loading-message {
  margin: 0;
  color: #333;
  font-size: 14px;
}