/** style.css 修正版（孫階層対応・トグル表示追加・孫階層横並び・ボタン幅統一） **/

body {
  font-family: sans-serif;
  margin: 20px;
  background: #f5f5f5;
}

.container {
  max-width: 1400px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.group-row {
  display: flex; /* ★ 追加: keyword-list を横並びにするため */
  flex-wrap: wrap; /* ★ 追加: 画面幅に応じて折り返すため */
  gap: 20px;
  margin-bottom: 20px;
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 6px;
}

.left-column {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.keyword-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
}

.keyword-list h3 {
  margin-bottom: 8px;
}

.sub-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.sub-group h4 {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

button {
  margin: 5px 0;
  padding: 8px 12px;
  border: none;
  background: #4a7aff;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

button.active {
  background: #cab904;
}

button:hover {
  background: #cab904;
}

/* --- 孫階層用 --- */
.sub-subgroups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 15px;
  border-left: 2px dashed #ccc;
  padding-left: 10px;
  flex-direction: row; /* 孫階層同士も横並び */
}

.sub-subgroups.collapsed {
  display: none;
}

/* 🌟 修正: sub-subgroup を Grid コンテナに変更し、ボタン幅を統一する 🌟 */
/* --- 孫階層用 (.sub-subgroup) の修正 (再々強化) --- */
.sub-subgroup {
  display: grid;
  gap: 8px; /* ボタン間の間隔 */

  /* 🌟 強化 1: 高さの決定をコンテンツに任せる (間延びを防ぐ最も確実な方法) 🌟 */
  height: min-content;

  /* 🌟 強化 2: Grid内のアイテムを縦方向の上端に揃える 🌟 */
  align-items: start;

  /* 幅の統一のための設定 */
  grid-template-columns: minmax(min-content, max-content);

  width: auto;
  flex: 0 0 auto;
}

.sub-subgroup button {
  /* Grid設定により上書きされるため、autoはそのまま残します */
  width: auto;
  flex: 0 0 auto;
}

/* トグルボタン用 */
.sub-group h4 span.toggle {
  margin-left: 5px;
  font-weight: bold;
  user-select: none;
}

.hidden {
  display: none;
}

#generateLabel,
#generateEnglish,
#savePreset,
#loadPreset {
  display: flex;
}
/* ボタンの基本スタイル */
.back-to-top {
  /* 常に画面に対して固定する */
  position: fixed;
  /* 右端から30pxの位置に配置 */
  right: 30px;
  /* 下端から30pxの位置に配置 */
  bottom: 30px;
  /* 他の要素の上に表示されるようにz-indexを設定 */
  z-index: 99;

  /* 初期状態では非表示にする (JSで制御) */
  /* 注: JSで表示を制御するため、初期の display: none; はHTMLやJSで制御します */
  /* ここではボタンの中央寄せのために flex を設定しておき、JSで show/hideを制御します */
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */

  /* デザインを go-to-bottom に合わせる */
  width: auto; /* 幅をテキストに合わせる */
  padding: 10px 15px; /* 内側の余白を設定 */
  height: auto; /* 高さを自動にする */

  background-color: #d15304;
  color: white;
  border: none;
  border-radius: 5px; /* 角丸にする */
  cursor: pointer;

  font-size: 14px; /* 文字サイズを小さく調整 */
  white-space: nowrap; /* テキストが折り返さないようにする */

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 表示・非表示をスムーズにするためのトランジション */
  transition: opacity 0.3s, visibility 0.3s;
}

/* スクロール時に表示するためのクラス (JavaScriptで切り替えます) */
/* 注: display: block; ではなく display: flex; に変更します */
.back-to-top.show {
  display: flex;
}

/* --- 以下、go-to-bottomのスタイル（比較用） --- */

/* 左上に固定するボタンのスタイル */
.go-to-bottom {
  /* 常に画面に対して固定する */
  position: fixed;
  /* 左端から30pxの位置に配置 */
  left: 30px;
  /* 上端から30pxの位置に配置 */
  top: 30px;
  /* 他の要素の上に表示されるようにz-indexを設定 */
  z-index: 99;

  /* 初期状態では表示する (ページ最上部では非表示にするため、JSで制御) */
  display: flex;
  align-items: center;
  justify-content: center;

  /* デザイン */
  width: auto;
  padding: 10px 15px;
  height: auto;
  background-color: #d15304; /* トップボタンと色を変えて区別 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s, visibility 0.3s;
}

/* スクロール量が少ないときに非表示にするクラス */
/* .go-to-bottom.hide {
display: none;
} */

/* History Management Styles */
/* History Management Styles (修正版: Tailwindクラスをターゲット) */

/* ラベルは flex-grow が適用されているため、このボタンの固定化で自動的にスペースを占めるはずです */
/* --- 履歴ボタンのスタイル調整 --- */

/* 既存のボタンの見た目を適用するため、globalな button スタイルはそのまま利用します */

/* 履歴アイテム全体を包むラッパー (削除ボタンをボタンと横並びにするためのFlexコンテナとして機能させる) */
.history-item-wrapper {
  margin-bottom: 5px; /* 履歴ボタン同士の間隔 */
}

/* 履歴ボタンと削除ボタンを横並びにするためのラッパー */
.history-item-flex-wrapper {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  gap: 8px; /* ボタンと削除アイコンの間隔 */
}

/* 履歴ボタン自体 */
.history-button {
  /* globalな button スタイル（width: 100%; text-align: left; など）が適用されます */
  flex-grow: 1; /* 親の幅いっぱいに広がる */
  margin: 0; /* ラッパーで間隔を制御するため、マージンをリセット */
}

/* 削除ボタン */
.delete-history-btn {
  /* 既存のボタンのスタイルを上書きして、アイコンとして機能させる */
  width: 24px; /* 固定幅 */
  height: 24px; /* 固定高さ */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */

  /* 既存のボタンの背景色/テキスト色を上書き */
  background: #dc2626; /* 赤 */
  color: white;

  border-radius: 50%; /* 正円にする */
  flex-shrink: 0; /* 縮まないようにする */
  display: flex; /* SVGアイコンを中央に配置 */
  justify-content: center;
  align-items: center;
}

.delete-history-btn:hover {
  background: #b91c1c;
}
.subgroups-main-wrapper.collapsed {
  display: none;
}

/* 新しいラッパーが非表示になるように設定 */
.main-content-wrapper.collapsed {
  display: none !important; /* display:flex を上書きして非表示にする */
}

/* keyword-list のスタイルを調整（不要であれば削除可） */
.keyword-list {
  /* flex-direction: column; が設定されているか確認し、必要なら削除 */
  display: block; /* Flexboxコンテナ内で全体を占有させるため */
  width: 100%;
}

/* --- キーワードボタンの折りたたみ機能用スタイル --- */

/* 9個目以降のボタンに適用される、初期非表示のスタイル */
.sub-group button.hidden-initial,
.sub-subgroup button.hidden-initial {
  display: none;
}

/* トグルボタンのスタイル調整 */
/* キーワードボタンと区別し、常に横幅いっぱいに表示されるようにします */
button.toggle-more-buttons {
  /* 既存の button スタイルを上書き */
  width: 100%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px; /* sub-groupのgapが効くように下マージンを調整 */
  background: #555; /* 色を変えて区別 */
  color: #fff;
  flex-shrink: 0; /* sub-group内のFlexboxで縮まないように */
}

button.toggle-more-buttons:hover {
  background: #333;
}

/* --- ツールチップ機能 (JSON value 表示) 用スタイル --- */

/* 1. ラッパー要素: ツールチップをボタンに対して相対位置に配置するために必要 */
/* ラッパー自体を横並びのボタンのように扱うため、ボタンの margin をここで再現 */
.tooltip-wrapper {
  position: relative;
  display: inline-block; /* 縦積みではなく、横並びを許可するため inline-block に変更 */
  margin: 5px 0; /* 元のボタンの上下マージンを再現 */
  width: 100%; /* 子要素のボタンの幅100%を維持 */
}

/* 🌟 修正: sub-subgroup 内のラッパーのスタイルを上書き 🌟 */
/* Gridの列幅に合わせるため、幅を100%に設定 */
.sub-subgroup .tooltip-wrapper {
  width: 100%; /* Grid の列幅に合わせる */
  flex: none; /* Flexboxの設定を解除 */
  margin: 0; /* sub-subgroup の gap で間隔を制御するため、マージンをリセット */
}

/* 2. ツールチップ要素 (item.value) の初期状態 */
.tooltip-value {
  /* 初期状態 */
  visibility: hidden; /* 非表示 */
  opacity: 0; /* 透明度も0 */

  /* 🌟 修正箇所: 幅の柔軟性と折り返し 🌟 */

  /* ツールチップの最大幅を設定 (これ以上広くならない) */
  max-width: 300px;

  /* 最小幅を、例えば、ボタンのラベルより少し広い程度に設定 */
  min-width: 100px;

  white-space: normal; /* テキストを折り返すようにする */
  word-wrap: break-word; /* 長い単語でも強制的に折り返す */

  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 5px 10px;

  /* ボタンに対する絶対位置 */
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);

  /* アニメーション */
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

/* 3. ホバー時の動作を制御 */
/* ラッパーがホバーされたら、その中の .tooltip-valueを表示する */
.tooltip-wrapper:hover .tooltip-value {
  visibility: visible; /* 表示 */
  opacity: 1; /* 透明度を元に戻す */
}

/* 4. 子要素のボタンのスタイル調整 */
/* ラッパーが幅を持つため、ボタン自体の幅を調整 */
.tooltip-wrapper button {
  /* sub-group内のボタンは幅100%を維持 */
  width: 100%;
  margin: 0; /* ラッパーでマージンを制御するためリセット */
}

/* 🌟 修正: sub-subgroup内のボタンはGridの幅に合わせる 🌟 */
.sub-subgroup .tooltip-wrapper button {
  width: 100%; /* Gridの列幅に合わせる */
  flex: none;
}

/* --- キーワードボタンの折りたたみ機能 (ラッパー対応) --- */

/* 9個目以降のボタンのラッパーに適用される、初期非表示のスタイル */
.tooltip-wrapper.hidden-initial {
  display: none !important;
}