/* ============================================================
   リセット & ベース
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
    'Noto Sans JP', 'Segoe UI', sans-serif;
  overflow: hidden; /* スマホスクロール防止 */
}

/* ============================================================
   地図コンテナ（全画面）
   ============================================================ */
#map {
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* スマホのブラウザバー対応 */
  z-index: 1;
}
#map.is-dragging { cursor: grabbing !important; }

/* スマホ用ズームコントロールを現在地ボタンと被らないように上げる */
.leaflet-control-zoom {
  margin-bottom: 160px !important;
}

/* ============================================================
   トップバー（検索など）UI
   ============================================================ */
.top-bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px; /* デスクトップでも広がりすぎない */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* 下の地図操作を邪魔しない */
}

/* アプリ名称のチップ */
.app-title-chip {
  align-self: center;
  padding: 4px 10px;
  background: rgba(8, 12, 30, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.8);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.search-container {
  display: flex;
  gap: 6px;
  background: rgba(8, 12, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px;
  border-radius: 100px; /* ピル型 */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  pointer-events: auto;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px; /* iOSフォーカスズーム防止 */
  padding: 4px 16px;
  outline: none;
  font-family: inherit;
  width: 100%;
}
.search-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.search-error {
  font-size: 0.8rem;
  color: #fb7185;
  text-align: center;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  padding: 4px;
  display: none;
}
.search-error:not(:empty) { display: block; }

/* 検索候補リスト（サジェスト） */
.search-candidates {
  margin-top: 4px;
  background: rgba(8, 12, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: auto;
}
.search-candidates.hidden { display: none; }

.candidate-item {
  padding: 12px 16px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s;
}
.candidate-item:last-child { border-bottom: none; }
.candidate-item:hover { background: rgba(255, 255, 255, 0.15); }
.candidate-name { font-weight: 700; margin-bottom: 2px; }
.candidate-address { font-size: 0.75rem; color: rgba(240, 244, 255, 0.6); }

/* 検索結果（面積表示）ブロック */
.search-info {
  margin-top: 4px;
  padding: 12px 16px;
  background: rgba(8, 12, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(47, 126, 216, 0.3);
  border-radius: 16px;
  color: #fff;
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.search-info.hidden { display: none; }
.search-info-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.result-area-exact {
  font-size: 0.8rem;
  color: #93c5fd;
  margin-bottom: 2px;
}
.result-dome-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   ボトムアクション UI
   ============================================================ */
.bottom-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1000;
}

/* 画面右下などのサブアクション */
.sub-actions {
  position: absolute;
  left: 16px; /* 右側がかぶるので左下に移動 */
  bottom: 96px; 
  display: flex;
  flex-direction: column;
  gap: 20px; /* ボタン同士の距離を広げて誤タップ防止 */
  z-index: 1000;
  pointer-events: none; /* クリックは子任せ */
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  background: rgba(8, 12, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: all 0.2s;
  padding: 0;
  pointer-events: auto;
}
.fab svg { width: 24px; height: 24px; }
.fab:active { transform: scale(0.9); }
.fab.hidden { display: none; }

.fab.btn-danger {
  color: #fda4af;
  border-color: rgba(251, 113, 133, 0.3);
}

/* ゴミ箱に重なった時のエフェクト */
.fab.is-over {
  background: #e11d48 !important;
  border-color: #fff !important;
  transform: scale(1.3) !important;
  box-shadow: 0 0 24px rgba(225, 29, 72, 0.6);
}
.fab.is-over svg {
  animation: shake 0.2s infinite;
}

/* 消去直前の「もう消えるよ」エフェクト */
.fab.is-confirming {
  background: #fff !important;
  color: #e11d48 !important;
  transform: scale(1.5) !important;
  box-shadow: 0 0 40px #fff;
  transition: all 0.2s ease;
}
.fab.is-confirming svg {
  animation: shake 0.1s infinite; /* さらに細かく震える */
}

@keyframes shake {
  0% { transform: rotate(0); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}

/* 中央下のメインボタン */
.main-action {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

/* 共通ボタンスタイル（トップバー検索ボタン含む） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.2); }

.btn-pill {
  background: linear-gradient(135deg, #2f7ed8, #4f9cf9);
  color: #fff;
  border-radius: 100px;
  padding: 16px 28px; /* 大きめでタップしやすく */
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(47, 126, 216, 0.4);
  letter-spacing: 0.02em;
  white-space: nowrap; /* テキストの折り返しを防止 */
  user-select: none; /* 長押し時のテキスト選択を防止 */
  -webkit-user-select: none; /* iOS用 */
  -webkit-touch-callout: none; /* iOSメニュー防止 */
}
.btn-pill:active:not(:disabled) { transform: scale(0.97); }
.btn-pill:hover:not(:disabled) { box-shadow: 0 8px 32px rgba(47, 126, 216, 0.5); }

/* ドラッグヒント */
.drag-hint {
  position: absolute;
  bottom: 78px; /* ボタンに近づける */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 900;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  animation: fadein 0.3s ease;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ポリゴンのカーソル */
.dome-polygon-path {
  cursor: grab;
  touch-action: none !important;
  pointer-events: auto !important;
}
.dome-polygon-path:active {
  cursor: grabbing;
}

/* ============================================================
   レスポンシブ（スマホ向け小型化）
   ============================================================ */
@media (max-width: 600px) {
  .top-bar {
    top: 8px; /* 上部の余白を縮小 */
  }

  .app-title-chip {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  /* 検索バー周りを少しコンパクトに */
  .search-container {
    padding: 6px 10px; 
  }
  .search-input {
    font-size: 0.9rem;
    padding: 8px 12px;
  }
  .btn-search {
    width: 36px;
    height: 36px;
  }

  /* 情報パネルの余白と文字サイズを縮小 */
  .search-info {
    padding: 8px 12px;
    border-radius: 12px;
  }
  .search-info-title {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .result-dome-count {
    font-size: 1rem;
  }

  /* ボタン・操作UIを小さく */
  .btn-pill {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
  .sub-actions {
    bottom: 80px; 
    left: 12px;
  }
  .fab {
    width: 52px;
    height: 52px;
  }
  .fab svg {
    width: 22px;
    height: 22px;
  }
  .drag-hint {
    bottom: 74px;
    padding: 4px 12px;
    font-size: 0.75rem;
  }
  
  /* スマホ用ズームコントロールを少し上げる（左下ボタンと被らないように） */
  .leaflet-control-zoom {
    margin-bottom: 240px !important;
    margin-right: 12px !important;
  }
  /* ズームボタン自体を大きくして押しやすくする */
  .leaflet-touch .leaflet-control-zoom-in,
  .leaflet-touch .leaflet-control-zoom-out {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 24px !important;
  }
}