/* ===============================
   セクション全体のレイアウト設定
   =============================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  margin-top: 20px; /* 固定ヘッダー（60px） + 適切な余白（20px）に調整 */
}

.container {
  max-width: 90%;
  margin: 0 auto;
  padding: 15px;
  background: white;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

.container > * {
  padding: 10px 15px;
  margin-bottom: 10px;
}

.container-header {
  font-size: var(--font-xl);
  font-weight: bold;
  background-color: #f4f4f4;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* ===============================
   レスポンシブ対応
   =============================== */
@media (max-width: 600px) {
  .container {
    max-width: 95%;
    padding: 10px;
  }

  main {
    margin-top: 15px; /* モバイル用に調整 */
  }
}

/* ===============================
   チーム情報上部ブロック
   =============================== */
.team-info-block {
  display: block;
  margin-top: 10px;
}

.team-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.season-selector-inline {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.season-selector-inline label {
  margin-right: 0.25rem;
  font-weight: normal;
}

.season-selector-inline select {
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
}

#teamName {
  font-size: var(--font-xl);
  margin: 0;
}

/* ===============================
   中段：3カラム構成（上揃え・左詰め）
   =============================== */
.team-body-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.2rem; /* ←間隔さらに縮めたよ💡 */
  gap: 2rem;
  text-align: left;
}

/* 左カラム：ロゴ */
.team-logo-column {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.team-logo img {
  width: 160px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background-color: #eee;
}

/* 中央カラム：順位・監督・フォーメーション */
.team-info-column {
  flex: 0 0 auto;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}

.team-sub-row {
  display: flex;
  flex-direction: column; /* ←縦並びに変更💡 */
  gap: 0.25rem;
  font-size: var(--font-md);
}

/* チーム順位表示のスタイル調整 */
#teamRank {
  white-space: pre-line; /* 改行を保持 */
  line-height: 1.4; /* 行間を調整 */
  font-size: var(--font-md);
  font-weight: normal; /* ← 太字をやめて統一 */
  overflow-wrap: anywhere; /* 長文を強制改行 */
  word-break: break-word;
}

/* データ読み込み中のスタイル */
#teamRank.loading {
  color: #666;
  font-style: italic;
}

/* データなしの場合のスタイル */
#teamRank.no-data {
  color: #999;
  font-style: italic;
}

.team-formation-row {
  font-size: var(--font-md);
  white-space: normal; /* 改行を削除して通常の表示に */
  line-height: 1.4;
  overflow-wrap: anywhere; /* 長文を強制改行 */
  word-break: break-word;
  margin: 0;
  padding: 0;
}

/* 監督ラベルも本文サイズに統一＋折り返し */
.manager-label {
  font-size: var(--font-md);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
  padding: 0;
}

/* 右カラム：勝敗表 */
.team-record-column {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0; /* ← 空行に見える余白をなくす */
}

/* ===== [SP最適化] チーム3カラム配置（ロゴ右に順位、次段に右カラム） ===== */
@media (max-width: 768px) {
  /* ロゴを"固定幅カラム"化して、右に順位が並ぶようにする */
  .team-logo-column {
    flex: 0 0 auto;
    /* ロゴ列の実幅は画像幅に合わせる */
  }
  .team-logo img {
    /* 端末幅に応じて可変：96〜140pxの範囲で最適化 */
    width: clamp(96px, 28vw, 140px);
    height: auto;
  }

  /* 順位（中央）をロゴの右側に必ず並べる */
  .team-info-column {
    flex: 1 1 auto; /* 余り幅を使って右に並ぶ */
    min-width: 160px; /* つぶれ防止 */
    margin-left: 0.75rem; /* ロゴとの間隔を最小限 */
  }

  /* 右カラムは"次の段に100%幅で折り返す" */
  .team-record-column {
    flex: 1 1 100%;
    order: 3; /* 念のため次段に落とす優先度を明示 */
    max-width: 100%;
  }

  /* ブロック間の"見えない余白"を徹底的にゼロ化 */
  .team-record-column > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 監督・フォメ行の行間を詰める（空行対策） */
  .manager-label,
  .team-formation-row {
    line-height: 1.35;
  }

  /* スマホ表示では監督とフォメの間に改行を入れる */
  #managerFormationWrap {
    display: block;
  }
  #managerFormationWrap .separator {
    display: none;
  }
  #managerFormationWrap .manager-label,
  #managerFormationWrap .team-formation-row {
    display: block;
    margin-bottom: 0.25rem;
  }
}

/* PCでも空行を出さない最低限のガード */
.team-record-column {
  gap: 0 !important;
}
.team-record-column > * {
  margin: 0;
  padding: 0;
}

/* 監督テキストの長文はみ出し防止＆強制折返し */
.manager-label,
#teamManager {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* フォーメーション行の余白・折返し調整（空行見えを防止） */
.team-formation-row {
  margin-top: 0;
  padding-top: 0;
}

/* 監督＋フォメ統合行の微調整（改行表示＆空行ゼロ） */
#managerFormationWrap {
  display: block; /* 改行表示のためblockに変更 */
  white-space: normal;
}
#managerFormationWrap .separator {
  display: none; /* 区切り文字は不要 */
}
#managerFormationWrap .manager-label,
#managerFormationWrap .team-formation-row {
  display: block;
  margin-bottom: 0.25rem;
}
.stat-label {
  font-weight: 700;
}

.team-record-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  background-color: #fff;
}

.team-record-table th,
.team-record-table td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.8rem;
  text-align: left;
  white-space: nowrap;
}

/* --- team-formation 表示の行揃えと改行制御 --- */
.team-formation-row .stat-label {
  display: block; /* ラベルをブロック化して次の行からリスト開始 */
  margin: 0 0 2px 0; /* 空行に見えない最小マージン */
  line-height: 1.4;
}

/* 念のため #teamFormation 側でも \n を改行扱いに */
#teamFormation {
  white-space: pre-line; /* JSで<br>化しているが、\nでも崩れないよう二重に保険 */
  line-height: 1.4;
}

/* 監督行は余白ゼロで空行化を防止（既存の方針を踏襲） */
.manager-label {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}