body {
  max-width: 900px;   /* ページ全体の最大横幅 */
  margin: 0 auto;     /* 横方向中央寄せ */
  padding: 20px;      /* 上下左右に適度な余白 */
  font-family: sans-serif;
  box-sizing: border-box; 
}

h1,h2,h3 {
  margin-bottom: 10px;
}
.guild-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* 下部のカードレイアウト */
.container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
}

/* ここから追加: 画面幅が狭い(max-width: 500px など)場合のレイアウト切り替え */
@media (max-width: 500px) {
  /* 上部ギルドカード: 1行1枚に */
  .guild-container {
    flex-direction: column;
    align-items: center;
  }

  /* 下部ギルド情報カード＆コマンドタイムライン: 縦に並ぶ */
  .container {
    flex-direction: column;
    align-items: center;
  }
}

/* ギルドブロック */
.guild-block {
  border: 1px solid #ccc;
  padding: 10px;
  width: 320px; /* 2列に並んだときちょうど良い横幅 */
  border-radius: 4px;
  margin-bottom: 10px;
}
.guild-block h2 {
  margin-top: 0;
}
.row {
  margin: 5px 0;
}
.row label {
  display: inline-block;
  width: 110px;
  font-weight: bold;
}
.result-block {
  margin-top: 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 8px;
  border-radius: 4px;
}

/* 下部ギルド情報(表示のみ) + コマンド */
.guild-info {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius:4px;
  width:280px;
}
.guild-row {
  margin:5px 0;
  display:flex;
  justify-content: space-between;
}
.guild-row label {
  margin-right:10px;
}
.result-line {
  margin:5px 0;
}
.result-line span {
  display:inline-block;
  width:100px;
}

/* コマンドカード */
.command-item {
  margin: 3px;
  padding: 5px;
  border-radius: 4px;
  color: #fff;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.command-label {
  font-weight: bold;
}
/* ギルド色 */
.guild1 { background-color: #FDC314; }
.guild2 { background-color: #FD7393; }
.guild3 { background-color: #57BBF5; }
.guild4 { background-color: #77D15A; }
.gp-display-color {background-color: #bf7fff;}

.drag-over {
  border:2px dashed #333;
}

/* アコーディオン */
.accordion {
  border:1px solid #ccc;
  padding:5px;
  border-radius:4px;
  background:#fefefe;
}
details summary {
  cursor:pointer;
  font-weight:bold;
}

/* GP表示情報表示領域 */
.gp-display-item {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #e0e0e0;
}
.gp-display-item ul {
  list-style-type: none;
  padding-left: 0;
}
.gp-display-item li {
  margin: 2px 0;
}