/* =========================================================
   Base / Reset
========================================================= */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;          /* 横スクロール防止の保険 */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


/* =========================================================
   Layout
========================================================= */

#container {
  max-width: 1200px;           /* 画面内に収める上限 */
  margin: 0 auto;
  padding: 12px;
}


/* =========================================================
   Search Box
========================================================= */

.search-box {
  position: relative;
  max-width: 400px;
  width: 100%;
}

#speciesSearch {
  width: 100%;
  padding: 6px 8px;
  font-size: 14px;
}

#speciesSuggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;

  max-height: 200px;
  overflow-y: auto;

  margin: 0;
  padding: 0;
  list-style: none;

  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
}

#speciesSuggestions li {
  padding: 6px 8px;
  cursor: pointer;
}

#speciesSuggestions li:hover {
  background: #f0f0f0;
}


/* =========================================================
   Grid Layout
========================================================= */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* はみ出し防止 */
  gap: 16px;
}


/* =========================================================
   Chart Box (1 chart unit)
========================================================= */

.chart-box {
  position: relative;          /* Chart.js 必須 */
  width: 100%;
  height: 330px;               /* 高さは箱で制御 */
}

.chart-box canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* =========================================================
   Canvas (common style)
========================================================= */

canvas {
  background: #fff;
  border: 1px solid #ccc;
  max-width: 100%;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  #speciesSearch {
    font-size: 16px;
  }
}