/* 必ず最初に記述することをお勧めします */
*,
*::before,
*::after {
  box-sizing: border-box; /* 全ての要素にbox-sizingを適用 */
}

/* General Body Styles */
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 10px;
  background-color: #104cd0;
  color: white; /* bodyのデフォルト文字色は白 */
  min-height: 100vh;
}

h1 {
  color: white;
  margin-bottom: 20px;
  text-align: center;
}

/* Main Container for Layout */
.container {
  display: flex;
  width: 100%;
  max-width: 1430px; /* PCでの最大幅 */
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* カラム間のギャップ */
}

/* Left Column: Controls */
.controls {
  flex: 0 0 250px;
  padding-right: 20px;
  border-right: 1px solid #eee;
  padding-bottom: 0;
}

.controls h2 {
  color: #555;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.controls h2:first-of-type {
  margin-top: 0;
}

.controls label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #666;
}

.controls input[type="text"],
.controls input[type="number"],
.controls input[type="file"] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.controls button {
  background-color: #104cd0;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  margin-top: 10px;
  transition: background-color 0.2s;
  width: 100%;
}

.controls button:hover {
  background-color: #0d3a90;
}

#selectedObjectControls label {
  margin-bottom: 5px;
}

#selectedObjectControls input[type="number"],
#selectedObjectControls input[type="text"] {
  width: auto;
  margin-left: 5px;
  display: inline-block;
}

#selectedObjectControls .input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#selectedObjectControls .input-group label {
  margin-bottom: 0;
}

#selectedObjectControls button {
  margin-right: 5px;
  background-color: #007bff;
  width: auto;
}

#selectedObjectControls button:hover {
  background-color: #0056b3;
}

#noObjectSelectedText {
  color: #888;
  font-style: italic;
  margin-top: 15px;
}

hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}

/* Center Column: Canvas */
.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex: 0 0 900px;
  width: 900px;
  height: 600px;
}

canvas {
  border: 1px solid #ccc;
  display: block;
}

/* Right Column: Object List */
#object-list {
  flex: 0 0 200px;
  padding-left: 20px;
  border-left: 1px solid #eee;
  padding-top: 0;
  color: #333; /* ★追加: オブジェクトリスト全体の文字色を濃いグレーに */
}

#object-list h3 {
  color: #555; /* 必要であれば #333 などに調整 */
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 15px;
}

#object-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#object-ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #eee;
  margin-bottom: 5px;
  background-color: #f9f9f9;
  cursor: grab;
  border-radius: 4px;
  font-size: 0.9em;
  position: relative;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  color: #333; /* ★追加: リストアイテムの文字色を濃いグレーに */
}

#object-ul li.selected {
  background-color: #e0f2f7;
  border-color: #007bff;
  font-weight: bold;
}

#object-ul li.dragging {
  opacity: 0.7;
  border: 2px dashed #007bff;
  background-color: #e6f7ff;
}

#object-ul li span {
  flex-shrink: 1;
  flex-basis: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
  max-width: 80px;
}

/* ボタンコンテナのスタイル */
#object-ul li .item-buttons {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

#object-ul li .move-btn,
#object-ul li .delete-item-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8em;
  transition: background-color 0.2s;
}

#object-ul li .delete-item-btn {
  background-color: #dc3545;
}

#object-ul li .move-btn:hover {
  background-color: #0056b3;
}

#object-ul li .delete-item-btn:hover {
  background-color: #c82333;
}

/* 矢印ボタンの見た目 */
#object-ul li .move-up-btn::before {
  content: "↑";
}

#object-ul li .move-down-btn::before {
  content: "↓";
}

/* スライダーのスタイル */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
  border-radius: 50%;
}

/* ---レスポンシブデザインのブレークポイント (max-width: 1024px でタブレットも考慮) --- */
@media (max-width: 1024px) {
  .container {
    flex-direction: column; /* カラムを縦並びにする */
    gap: 20px;
    padding: 15px;
    max-width: 100%; /* 親の幅いっぱいに広げる */
    flex-wrap: wrap; /* スマホサイズで折り返すように */
  }

  /* コントロールパネルの調整 */
  .controls,
  #object-list {
    flex: 1 1 100%; /* 幅を親の100%に広げる */
    max-width: 100%; /* 最大幅も100%に */
    border: none; /* ボーダーを削除 */
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px;
  }

  .controls {
    border-bottom: 1px solid #eee; /* 下にボーダーを追加 */
    order: 1; /* コントロールパネルを一番最初に表示 */
  }

  #object-list {
    padding-top: 20px;
    border-top: 1px solid #eee; /* 上にボーダーを追加 */
    color: #333; /* ★追加: レスポンシブ時も文字色を濃いグレーに */
    order: 2; /* オブジェクトリストをCanvasより前に表示 */
  }

  /* Canvas Container の調整 */
  .canvas-container {
    width: 900px; /* JSで設定するCanvasの幅と合わせるか、親要素の幅 */
    height: 600px; /* JSで設定するCanvasの高さと合わせる */
    padding-bottom: 0; /* JSで高さを固定するため、縦横比維持のパディングは不要 */
    margin: 0 auto; /* 中央揃え */
    flex: none; /* Flexboxの伸縮を無効化 */
    order: 2;
  }

  /* Canvas要素自体も親コンテナに合わせてサイズ調整 */
  canvas {
    position: static; /* absoluteを解除 */
    width: 100% !important; /* 親要素の幅に合わせる */
    height: 100% !important; /* 親要素の高さに合わせる */
  }

  /* 入力フィールドやボタンの幅調整 */
  .controls input[type="text"],
  .controls input[type="number"],
  .controls input[type="file"],
  .controls button {
    width: 100%;
  }

  #selectedObjectControls input[type="number"],
  #selectedObjectControls input[type="text"] {
    width: auto;
  }

  /* オブジェクトリストアイテムのテキスト幅調整 (より柔軟に) */
  #object-ul li span {
    max-width: 100px; /* タブレット/中サイズのスマホで少し広げる */
  }
}

/* ---さらに小さいスマホ向けのブレークポイント (例: 576px 以下) --- */
@media (max-width: 576px) {
  body {
    padding: 5px;
  }
  .container {
    padding: 10px;
  }
  .controls h2,
  #object-list h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
  .controls label {
    font-size: 0.9em;
    margin-bottom: 5px;
  }
  .controls input,
  .controls button {
    padding: 6px;
    font-size: 0.9em;
  }
  #object-ul li {
    font-size: 0.8em;
    padding: 6px 8px;
    color: #333; /* ★追加: 小型スマホ時も文字色を濃いグレーに */
  }
  #object-ul li .item-buttons {
    gap: 3px;
  }
  #object-ul li .move-btn,
  #object-ul li .delete-item-btn {
    padding: 3px 6px;
    font-size: 0.7em;
  }
  #object-ul li span {
    max-width: 80px; /* 小型スマホで調整。デフォルト値と同じか少し狭く */
  }
  /* Canvas Container の調整 */
  .canvas-container {
    /* 必要に応じて、さらに小さい画面での固定サイズを設定 */
    width: 100%; /* 例えば画面幅いっぱいに */
    max-width: 900px; /* ただし最大900px */
    height: 400px; /* スマホで表示したい固定高さ */
    margin: 0 auto;
    padding-bottom: 0;
  }
}