@charset "utf-8";

/* 基本は縦並び（スマホ用） */
.main-container {
  display: flex;
  flex-direction: column;
  /* 縦に積むにゃん */
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 auto;
  /* 幅固定を解除して、画面いっぱいに広げる */
  width: 100%;
}

/* 画面幅が 768px（タブレット・PC）以上の時だけ横並びにする */
@media (min-width: 768px) {
  .main-container {
    flex-direction: row;
    /* 横並びにする */
    gap: 2.5rem;
  }

  .sidebar {
    flex: 0 0 320px;
    /* PCでは 320px で固定！ */
  }
}




body {
  font-size: 0.9rem;
  width: 95%;
  background: #fff;
}

/* 左右に分ける親要素 */
.main-container {
  /* 横並びにするための宣言 */
  display: flex;
  /* 左右の隙間 */
  gap: 2.5rem;
  /* 中身が短くても（子要素の高さが違っても）上に詰める */
  align-items: flex-start;
}

/* 左カラムの幅を固定 */
.sidebar {
  /* 320pxから動かないように固定 */
  flex: 0 0 320px;
  top: 1rem;
}

/* 右カラムは残りの幅を全部使う */
.result-area {
  flex: 1;
}


/* 入力エリアのレイアウト */
/* 横並びに */
.input-fields {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}


.input-group label {
  /* 320pxから動かないように固定 */
  min-height: 1.5rem;
  /* 上下に隙間を作って、中身が増えたら勝手に伸びるようにする */
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2行になった時の行間を整える */
  line-height: 1.2;
  /* ラベルと入力欄をくっつけたいなら0、少し空けたいなら 0.25rem とか */
  gap: 0;
  text-align: center;
  color: #0d90f3;
  background-color: #d0ebfd;
  border: 1px solid #a5d1f1;
  border-bottom: none;
}



textarea,
input {
  font-size: 0.85rem;
  padding: 0.75rem;
  border: 1px solid #a5d1f1;
  box-sizing: border-box;
}


/* テキストエリアを縦長にする */
.input-group textarea {
  height: 120px;
  width: 100%;
}


/* テーブルを包むコンテナに高さを設定 */
/* テーブル行数が少なくてもdetailsは上に詰めたくないため */
.table-container {
  /* ここで高さを確保 */
  min-height: 14rem;
  display: flex;
  flex-direction: column;
}

#confirmation-table {
  background-color: #f2f2f2;
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  font-size: 0.85rem;
}

#confirmation-table th,
#confirmation-table td {
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid #ddd;
}

#confirmation-table th {
  color: #555;
  text-align: center;
}

/* 異常値のテキスト用クラス */
.invalid-value {
  /* 警告っぽい赤 */
  color: #d9534f;
  font-weight: bold;
}

/* 異常値のセルの背景を薄く赤くする */
.invalid-cell {
  background-color: #f2dede !important;
}


/* details要素（左カラム）の上の余白を作る */
details {
  /* ここでテーブルとの間隔をしっかり空ける */
  margin-top: 2rem;
  /* 折りたたみ部分にマウスを乗せると指マークになるように */
  cursor: pointer;
}

/* summary（detailsの見出し部分）の調整 */
summary {
  font-size: 0.85rem;
  color: #666;
  outline: none;
}

/* サンプリング回数の入力欄があるブロックの余白をリセット */
.setting-group {
  margin-top: 0.5rem;
}


/* ボタン関係 */
.action-buttons {
  margin-top: 1rem;
  /* 横並びにする */
  display: flex;
  /* 高い方のボタンに高さを合わせる */
  align-items: stretch;
  /* ボタン同士の隙間を指一本分あける */
  gap: 0.75rem;
  /* スマホで横幅が足りない時は自動で折り返す */
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #68779a;
  border-radius: 0.5rem;
  /* 幅を均等にする */
  flex: 1;
  /* 広がりすぎ防止 */
  max-width: 200px;
}

@media (max-width: 480px) {
  .action-buttons {
    flex-direction: column;
    /* 縦並びにする */
  }

  .btn-primary,
  .btn-secondary {
    /* 画面幅いっぱいの大きなボタンにする */
    width: 100%;
    max-width: none;
    /* スマホではより押しやすく少し高くする */
    min-height: 3.5rem;
  }
}

.btn-primary {
  background: #cbe8fa;
}

.btn-secondary {
  background: #fff;
}

.btn-primary:hover {
  background-color: #E6A1C0;
}

.btn-secondary:hover {
  background-color: #FFFF00;
}



/* 推定完了の装飾 */
.mdc-info-box {
  background-color: #e8f5e9;
  padding: 0.25rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0.5rem;
  color: #155724;
}



#result-container {
  display: none;
}

/* 基本は全部隠す。初期状態もこれでOK */
.tab-panel {
  display: none;
}

/* activeクラスがついているパネルだけ出す */
.tab-panel.active {
  display: block;
}

/* タブ全体のコンテナ */
.tabs {
  display: flex;
  border-bottom: 2px solid #ddd;
  /* 下に線を引く */
  gap: 4px;
  margin-bottom: 1.5rem;
}

/* タブボタン単品 */
.tab-btn {
  /* 通常時は背景なし */
  background: none;
  border: none;
  /* 上だけ角丸にする */
  border-radius: 8px 8px 0 0;
  padding: 0.75rem 1.25rem;
  color: #666;
  position: relative;
  /* 下線に重ねる */
  bottom: -2px;
  font-size: 1rem;
}

/* ホバー（マウスを乗せたとき） */
.tab-btn:hover {
  background-color: skyblue;
}

/* 選択されているタブ（JSでactiveクラスがつく） */
.tab-btn.active {
  /* 背景を白にして浮き立たせる */
  background: #fff;
  color: #000000;
  font-weight: bold;
  /* 枠線をつける */
  border: 2px solid #ddd;
  /* 下の線だけ消して一体化させる！ */
  border-bottom-color: #fff;
}


/* 全群の事後分布 */
#summary-chart {
  width: 640px;
  height: 320px;
  /* 大きくなりすぎない上限 */
  max-width: 640px;
  margin-bottom: 1.25rem;
  padding: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}


#all-groups-hdi-container {
  width: 720px;
  max-width: 720px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.hdi-individual-plot {
  width: 640px;
  max-width: 640px;
  height: 40px;
}


.mdc-warn-box {
  background-color: #FFF3CD;
  border-color: #FFEEBA;
  padding: 0.25rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0.5rem;
  color: #856404;
}

.mdc-info2-box {
  background-color: #e0f0ff;
  border-color: #b8daff;
  padding: 0.25rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0.5rem;
  color: #004085;
}



/* 推定結果テーブルのスタイル */
.summary-table {
  width: 400px;
  max-width: 640px;
  border-collapse: collapse;
  margin: 0.5rem 3rem;
  font-size: 0.85rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.summary-table th,
.summary-table td {
  padding: 0.25rem;
  border: 1px solid #ddd;
}

.summary-table th {
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
}

.summary-table tr:hover {
  background-color: #f1f1f1;
}


/* detailsの左の余白を作る */
.summary-table-details {
  margin-left: 2rem;
  /* 折りたたみ部分にマウスを乗せると指マークになるように */
  cursor: pointer;
}


#all-diffs-summary-container {
  width: 640px;
  max-width: 640px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}


/* 2群間比較の「親コンテナ」（ガワだけ） */
#diff-charts-container {
  /* ここで「横に並べるぞ」と宣言 */
  display: flex;
  /* 入りきらない分は折り返す */
  flex-wrap: wrap;
  /* グラフ同士の隙間 */
  gap: 1rem;
  width: 100%;
}

/* 2群間比較の「個別のグラフ」（JSで生成される要素につける） */
.diff-plot {
  /* 200pxを基準に伸び縮み */
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 300px;
  height: 200px;
  padding: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}

#footer {
  display: none;
}