/* 🌸 summary.css - 完全整列・スクロールなしバージョン */
td {
  vertical-align: top; /* ← テーブルセル内の内容を常に上に寄せる */
}


.summary-tabs {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    width: 600px;  /* ← タブ数 × 60px */
    gap: 0;
}

.summary-tab-btn {
    flex: none;
    width: 60px;
    background: #ffe4e1; /* 元の淡いピンク背景色 */
    border: 1px solid #d8a0a0;
    border-bottom: none;
    border-radius: 12px 12px 0 0; /* 元の角丸 */
    padding: 4px 0;
    font-size: 85%; /* 元のフォントサイズ */
    font-weight: bold;
    color: #444;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.summary-tab-btn.active {
    background: #ffccd5; /* 元の濃いめピンク背景色 */
    color: #000;
}


.summary-table td {
    box-sizing: border-box;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: right;
    vertical-align: middle;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px;
    border: 1px solid #ccc;
    font-size: 80%; /* 🌸 フォントサイズを小さく統一 */
}

.summary-table td.empty {
    background-color: #fff !important;
    border: none !important;
    text-align: center;
    color: #ccc;
}

.summary-table td.empty:last-child {
    border-right: none !important;
}

.summary-table tr:first-child td {
    background-color: #ffe4e1;
    text-align: center;
    font-weight: bold;
}

.summary-table tr td:last-child {
    border-right: 1px solid #ccc !important;
}

@media screen and (max-width: 600px) {
  .summary-tabs,
  .summary-tab-content,
  
.summary-table {
    display: inline-block;
    width: 600px;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

  .summary-table td {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
  }
}

/* 🌸 項目名（履行など）のフォントサイズを小さく統一 */
.summary-table th {
    font-size: 80%;
}

/* 🌸 .slot-and-summary-wrapperの統合した完全版 */
.slot-and-summary-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-right: none !important; /* 黄色の線を消す設定をここに統合 */
}

.slot-table-container {
  flex-shrink: 0;
}
.summary-table-container {
  flex-shrink: 0;
}


/* 🌸 スロット名：ピンク統一 */
.slot-name {
    background-color: #ffe4e1;
    color: #b03060;
    padding: 4px;
    border: 1px solid #f8a5c2;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    font-family: "Meiryo", sans-serif;
    font-size: 90%;
}

/* 🌸 性能表示もオーグメントと統一して整える */
.slot-details {
    display: none;
    font-size: 90%;
    font-family: "Meiryo", sans-serif;
    line-height: 1.2;
    color: #444;
    margin-top: 6px;
    white-space: pre-wrap;
    transition: all 0.3s ease;
}

.slot-details.open {
    display: block;
}


/* 🌸 オーグメント全体スタイル（前回と共通） */
.slot-augment-info {
    background-color: #fff5f7;
    color: #b71c1c;
/*     padding: 6px;
    border: 1px dashed #f8a5c2;
    border-radius: 6px;
    font-size: 90%;
    padding-left: 10px;
    font-family: "Meiryo", sans-serif;
    margin-top: 6px;
    white-space: pre-wrap;
    line-height: 1.2; /* ★ ここを 1.2 にして行間を詰める */
}


/* 🌸 (オーグメント) のタイトル行だけ太字＆余白あり */
.slot-augment-info .augment-title {
    font-weight: bold;
    margin-bottom: 4px;
    color: #ad1457;
}

.slot-header-flex {
  display: flex;
  align-items: center;  /* ← これで上下中央揃えに！ */
  gap: 6px;
}

.slot-header-flex img.item-icon {
  height: 16px;         /* ← アイコンを小さく統一 */
  width: auto;
}

.item-name-text {
  font-size: 92%;
  font-weight: bold;
  color: #000;
  cursor: default;
  transition: all 0.2s ease;
}

.empty-slot {
  background-color: #f0f0f0 !important;
  width: 100%;
  height: 100%;
  display: flex;               /* ← 中身を縦方向にフィットさせる */
  align-items: stretch;        /* ← 上下ぴったり */
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 0;
  line-height: 0;
}



.slot-table-container td {
  vertical-align: top;
  padding: 0;
  margin: 0;
  height: auto;
}

/* 🌸 旧テーブル構成用のslot-table（今は使用しないためコメントアウト） */
/*
.slot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 15px 12px;
}
*/

.slot-table td {
  vertical-align: top;
  background-color: #ffe4ea; /* 薄いピンク */
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slot-table label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.slot-table input[type="text"],
.slot-table select {
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.slot-table .form-element::placeholder {
  color: #aaa;
}

.augment-details {
  margin-top: 8px;
}

.augment-label {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  padding-left: 4px;
}

/* 🌸 レスポンシブ対応：スマホでスロットを縦並びに */
@media screen and (max-width: 768px) {
  .slot-table {
    display: block;
    width: 100%;
  }

  .slot-table tr {
    display: block;
    margin-bottom: 16px;
  }

  .slot-table td {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  .slot-table input[type="text"],
  .slot-table select {
    width: 100%;
  }
}

/* 🌸 現在使用中：divベースのスロット入力を4列で表示（レスポンシブ対応） */
.slot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 15px 12px;
  table-layout: fixed; /* 🌸 各列の幅を均等にする */
}

/* 🌸 各スロットの1ブロック（ピンクの角丸カード） */
.slot-container {
  background-color: #ffe4ea;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

/* 🌸 レスポンシブ：スマホ時は縦並びにする */
@media screen and (max-width: 768px) {
  .slot-table, .slot-table tr, .slot-table td {
    display: block;
    width: 100%;
  }

  .slot-container {
    margin-bottom: 12px;
  }
}