/*=== Global ===*/
body {
  margin: 4px;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 縦スクロールをなくす */
}

.app-container {
  display: flex;
  height: 100vh; /* 画面全体を埋める */
}

/* モーダル用スタイル */
.modal {
  position: fixed;
  top: 0;
  right: 0;  /* left:0 から変更 */
  width: 100%;  /* または適切な幅 */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: flex-end;  /* 有効化 */
  align-items: flex-start;  /* stretchから変更 */
  z-index: 1000;
}

/* 非表示用クラス */
.hidden {
  display: none;
}

hr {
  border: none;
  border-top: 1px solid #444;
  margin: 10px 0;
}

/*=== 左サイドバー (.sidebar) ===*/
.sidebar {
  width: 240px;
  flex-shrink: 0; /* はみ出さない */
  background: #2a2a32;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative; /* 相対配置 */
  height: 695px;
}
.sidebar-content{
  position: relative;
  z-index: 1; /* .sidebar-bottom-image より上に表示 */
}

.sidebar h1 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #f3d9ff;
}
.menu-section {
  margin-bottom: 20px;

}

/*=== 中央SVG (.main-area) ===*/
.main-area {
  width: 790px;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column; /* ボタンを縦に並べるために追加 */
  background: #222;
}
.skill-node-label {
  font-size: 18px;
  font-weight: bold;
  color: #a4e7e9;
  margin-right: 50px; /* ボタンとの余白 */
}
/* メインエリア上部のボタン配置用コンテナ */
.main-area-buttons {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  gap: 10px; /* ボタン間の間隔 */
  padding: 10px; /* 周囲の余白 */
  box-sizing: border-box; /* padding を含めたサイズにする */
  position: relative; /* 子要素の絶対配置を可能にする */
}

.sidebar-button {
  /* 左用 */
  width: 200px;
  margin-bottom: 15px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #3c4245;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-button {
  /* 左の3つ用 */
  width: auto;
  margin-bottom: 0;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background-color: #3c4245;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-button:hover {
  background-color: #4b6464;
}
.menu-button.active {
  background-color: #d9e738;
  color: #222;
}


/*=== 正六角形ノード系 ===*/
.hex-polygon {
  fill: #4d6e6e;
  stroke: #666;
  stroke-width: 2;
  transition: transform 0.2s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hex-polygon.type-practice {
    fill: #12c9c9;
    stroke: #20ffff;
    stroke-width: 2;
    transition: transform 0.2s;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.hex-polygon.type-skill {
    stroke: #97e029;
    stroke-width: 4;
    transition: transform 0.2s;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.hex-polygon.type-goal {
   stroke: #924faf;
   stroke-width: 4;
   transition: transform 0.2s;
   transform-box: fill-box;
   transform-origin: 50% 50%;
}

.hex-polygon.no-practice {
  fill: #314141;
  stroke: #3d4947;
  stroke-width: 1;
}
.hex-polygon.has-practice {
  fill: #008080;
  stroke: #20ffff;
  stroke-width: 3;
}
.hex-polygon:hover {
  transform: scale(1.1);
}
.hex-polygon.active {
  stroke: #ffa040 !important;
  stroke-width: 3 !important;
}

.hex-label {
  fill: #fff;
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}

.grid-line {
  stroke: #444444;
  stroke-width: 1.5;
  fill: none;
  pointer-events: none;
}
.connect-line {
  stroke: #003a3a;
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}
.connect-line.both-has-practice {
  stroke: #07ccc9;
  stroke-width: 3.5;
}

.number-input {
  width: 55px;        /* 3桁の数字が入る適切な幅 */
  text-align: right;  /* 数値を右寄せ */
  padding: 2px;       /* 必要な余白 */
  box-sizing: border-box;
}



.modal-content {
  background-color: #2a2a32;
  padding: 20px;
  border-radius: 5px;
  width: 420px;
  max-width: 80vw;
  height: 100%;  /* 高さを親に合わせる */
  overflow-y: auto;
  margin-right: 10px;  /* 右端の余白確保 */
}


/*=== 右パネル(Book + info-mode) ===*/
.book-panel {
  position: relative;
    background: #2a2a32;
    width: 490px;
    border-left: 2px solid #484848;
    color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
}

.book-panel.hidden {
  background-color: #2a2a32 !important; /* ← ★ hidden 時の背景色を #2a2a32 に設定 */
}

/*=== Bookモード (#book-mode) ===*/
#book-mode {
   display: flex;
   flex-direction: column;
   flex: 1;  /* 親(.book-panel)の高さを目一杯使う */
   overflow: hidden; /* ここもhiddenにして、childの .holder-container だけスクロール */
}

/* Bookパネルのヘッダー部分 */
.book-panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a32;
  padding: 8px;
  border-bottom: 1px solid #444;
}
.book-panel-header h2 {
  margin: 0;
  font-size: 18px;
  color: #c6d60c;
}
.book-panel-actions {
  display: flex;
  gap: 10px;
}

/* 新規/編集フォーム */
#book-dynamic-form.form-section {
  background-color: #3a3a4b;
  border: 2px solid #666;
  padding: 10px;
  margin-bottom: 10px;
}

/* ボタン類 */
.top-menu-button {
  padding: 8px 16px;
  background-color: #3c4245;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
#form-save-btn {
  background-color: #df8f3f;
  color: #fffefe;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
#form-save-btn:hover {
  background-color: #ffc266;
}



/* 入力フォーム要素 */
.book-panel input,
.book-panel select,
.book-panel textarea {
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 4px 6px;
  box-sizing: border-box;
}
.book-panel input:focus,
.book-panel select:focus,
.book-panel textarea:focus {
  outline: 1px solid #aaa;
}

/*=== Bookモード: カードホルダー ===*/
.holder-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.card-holder {
  width: 145px;
  height: 185px;
  background: #5b5b5b;
  color: #fff;
  border: 1px solid #848484;
  border-radius: 6px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.card-holder.hovered {
  background: #fffbe6;
  border-color: #ccc;
}

/*=== Bookモード: カード(練習) ===*/
.holder-card {
  width: 140px;
  height: 180px;
  /* ▼ 重要: Flexコンテナ化 & 縦積みにする */
  display: flex;
  flex-direction: column;

  border: 1px solid #888;
  background-color: #01344b;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 4px;
  /* ここで padding を加えると 1:5:4 の計算に含まれなくなるので、最小限に */
  padding: 4px;
  position: relative;
  transition: transform 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*======= 練習名: 高さ比率 1 =======*/
.holder-card-name {
  /* flex: 1 → 全体を10等分したうちの 1 */
  flex: 1.7 1 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;     /* 縦方向の中央寄せ */
  justify-content: center; /* 横方向の中央寄せ（お好み） */

  /* 追加装飾など */
  background-color: #f8f8f8;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid rgb(76, 106, 8);
  margin-bottom: 2px; /* 隙間を少しだけ */
  line-height: 1.2;
  padding: 2px 4px;   /* 上下左右の余白 */
}

/*======= 画像: 高さ比率 5 =======*/
.holder-card-image {
  /* flex:5 → 全体を10等分したうちの 5 */
  flex: 4.5 1 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px; /* 隙間を少しだけ */
}

.holder-card-image img {
  /* 画像が領域をはみ出さないように */
  max-width: 97%;
  max-height: 97%;
  object-fit: cover; /* 画像を領域におさめつつ、余白なくカット */
  border: 1px solid #fff;
  border-radius: 2px;
}

/*======= 説明: 高さ比率 4 =======*/
.holder-card-desc {
  /* flex:4 → 全体を10等分したうちの 4 */
  flex: 3.8 1 0;
  overflow: hidden;
  margin: 2px 0 0 0;
  box-sizing: border-box;

  /* 複数行を許可して高さ超過分をカット */
  white-space: pre-wrap;
  /* 文字装飾 */
  font-size: 7px;
  background-color: #f8f8f8;
  color: #333;
  line-height: 1.2;
  border: 2px solid transparent;
  padding: 4px;
}

.holder-card.dragging {
  opacity: 0.4;
  border: 2px dashed #333;
}

.holder-card.active-card {
  outline: none;
  box-shadow: none;
  border: 1px solid #dadada;
  background-color: #013130;
  transform: scale(1.15);
  z-index: 99999;
}

/* カテゴリ別の説明枠 */
.holder-card.cat-体 .holder-card-desc {
  border-color: #a80101;
}
.holder-card.cat-技 .holder-card-desc {
  border-color: #66bb66;
}
.holder-card.cat-術 .holder-card-desc {
  border-color: #005fd4;
}
.holder-card.cat-目標 .holder-card-desc {
  border-color: #8700c1;
}
.holder-card.cat-不明 .holder-card-desc {
  border-color: #999;
}

/*=== 練習情報モード (info-mode) ===*/
.practice-info-video {
  position: relative;
  width: 100%; /* または固定値 */
  padding-bottom: 56.25%; /* 16:9 の場合 */
  height: 0;
  overflow: hidden;
}
.practice-info-meta-row {
  display: flex;
  gap: 10px;
  background-color: #333;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.practice-info-cat,
.practice-info-actual {
  flex: 1;
  min-width: 0;
}
.small-label {
  font-size: 12px;
  margin-right: 4px;
}
.small-text {
  font-size: 12px;
  line-height: 1.4;
}
.practice-info-desc {
  background-color: #3a3a4b;
  padding: 8px;
  border: 2px solid #666;
  flex: 1;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 220px; /* 例: 高さ固定 */
}

/* ドラッグ中のカード */
.holder-card.dragging {
  opacity: 0.4;
  border: 2px dashed #333;
}

/*=== info-mode の位置/サイズ指定 ===*/
#info-mode {
  padding-top: 2px; /* この値を小さくする。 例: 5px, 0px など */

  padding: 10px;
  position: fixed; /* 任意 */
  top: 0;
  z-index: 10;
  background-color: inherit;
  width: 450px;   /* 任意の設定 */
  height: 670px;  /* 任意の設定 */
}

#info-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#node-menu-book {
  margin-left: auto;
  /* あるいは position:absolute; right:10px; でも可（後述） */
}

#node-menu-book {

  /* テキスト色を付けて太文字にする */
  font-weight: bold;  /* 太文字 */
  font-size: 16px;
  /* 横幅を広げる */
  width: 120px;       /* お好みのサイズ */
  text-align: center; /* 文字を中央寄せ */
 }

#hexSvg.node-disabled .hex-polygon,
#hexSvg.node-disabled .connect-line,
#hexSvg.node-disabled .grid-line,
#hexSvg.node-disabled .hex-label {
  pointer-events: none;  /* クリック不可 */
  opacity: 0.5;         /* 半透明グレー */
  transition: opacity 0.2s;
}

#hexSvg.node-disabled .hex-polygon {
  fill: #666;
  stroke: #999;
}
#hexSvg.node-disabled .connect-line {
  stroke: #999;
  /* stroke-width: 2; // お好み */
}

#book-menu-set {
  background-color: rgb(99, 124, 124); /* 例: 薄い黄色  */
  color: #ffffff;           /* 文字色を暗めに */
  font-weight: bold;
  /* ボタンサイズを少し大きく */
  padding: 10px 26px;

}

#book-menu-set.waiting-set {
  background-color: #33a484; /* セット時の鮮やかな色 */
  color: #fff;
  font-weight: bold;
}

.top-menu-button.waiting-set {
  background-color: #33a484;
  color: #fff;
  font-weight: bold;         /* さらに太字 */
}

@keyframes setInHex {
     /* 中心からスッと膨らんで、最終的に収まるイメージ */
     0% {
       transform: scale(0);
       fill-opacity: 0.0; /* 透明寄り */
     }
     50% {
       transform: scale(1.2);
       fill-opacity: 0.8; /* 少し濃く */
     }
     100% {
       transform: scale(1);
       fill-opacity: 0.1; /* 中程度の不透明度に落ち着く */
     }
   }

.shakiin-anim {
     animation: setInHex 0.7s ease-out forwards;
     transform-box: fill-box;      /* SVG で transform が効くように */
     transform-origin: center;     /* 中心を起点に拡大 */
   }

.arrow-line {
   stroke: #07ccc9;
   stroke-width: 3.5;
    fill: none;
}

.holder-card.type-practice > .holder-card-desc { /*  > (子セレクタ) を追加 */
  border-color: #078888; /* ノードstroke と合わせる */
}
.holder-card.type-skill > .holder-card-desc { /*  > (子セレクタ) を追加 */
  border-color: #97e029;
}
.holder-card.type-goal > .holder-card-desc { /*  > (子セレクタ) を追加 */
  border-color: #924faf;
}

/* 画像ここから */
.sidebar-bottom-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 0; /* .sidebar-content より後ろに表示 */
}

.sidebar-bottom-image img {
  width: auto;
  height: auto;
  max-width: 250px;
  max-height: 250px;
}

/* カレンダーのコンテナのスタイル */
/* =========================
   カレンダー全体のレイアウト
   ========================= */

/* カレンダーコンテナを、ノードのメインエリア(幅:790px, 高さ:695px)に揃える */
#calendar-container {
  width: 790px;       /* メインエリアと同じ横幅 */
  height: 695px;      /* メインエリアと同じ高さ */
  margin: 0;          /* 左サイドバーにくっつける → autoマージンを外す */
  padding: 10px;      /* 周囲に少し余白 */
  box-sizing: border-box;
  background-color: #f0f0f0; /* もう少し明るいグレーに */
  /* 例えば #e8e8e8 よりさらに明るめなら #f0f0f0 や #f5f5f5 など */
}

#calendar {
  width: 100%;
  height: 100%;
}

/* =========================
   FullCalendar全体の装飾
   ========================= */
.fc {
  width: 100%;
  background-color: transparent; /* 親コンテナ色を使う */
  border: none;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* === ヘッダー（トップバー）: 無色 + ボタン調整 === */
.fc .fc-header-toolbar {
  background-color: transparent !important;
  border: none !important;
  padding: 10px;
  margin-bottom: 10px;
}

/* 左右の矢印（prev/next） */
.fc .fc-prev-button,
.fc .fc-next-button {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
  font-size: 1.4em;
  font-weight: bold;
}
.fc .fc-prev-button:hover,
.fc .fc-next-button:hover {
  background-color: transparent !important;
  color: #07ccc9 !important; /* ティールブルー */
}

/* 「今月」・「月/週/日」ボタン */
.fc .fc-button {
  background-color: #fbfbfb !important; /* 少し暗めの白 */
  color: #0a6e6d !important;           /* ティールブルー文字 */
  border-color: #0a6b6a !important;
  font-weight: bold !important;
  font-size: 0.95em !important;        /* 少し小さく */

  /* ボタンをやや広めに */
  padding: 6px 20px !important;
  margin: 0 2px !important;
  border-radius: 5px !important;
  text-shadow: none !important;
}
.fc .fc-button:hover {
  background-color: #e0e0e0 !important;
}
.fc .fc-button.fc-button-active {
  background-color: #e8e8e8 !important; /* 選択ボタンは明るめのグレー */
  color: #07ccc9 !important;
  border-color: #07ccc9 !important;
}

/* タイトル(月名など) */
.fc .fc-toolbar-title {
  font-size: 1.5em;
  color: #000;
  font-weight: bold;
}

/* =========================
   曜日ヘッダー
   ========================= */
/* 曜日の英語表記 → 太字OFF + 大きさ小さめ */
.fc .fc-col-header-cell-cushion {
  color: #fff !important;
  font-size: 0.9em !important; /* 前回より小さく */
  font-weight: normal !important;
  padding: 5px;
}

/* 既定でborderがある場合は消す */
.fc .fc-col-header-cell {
  border: none !important;
}

/* 日曜(オレンジ), 土曜(薄オレンジ), 平日(ティール)などは
   dayHeaderFormat: {weekday:'short'} の指定により
   "Sun" "Mon" ... のセルに付与されるクラスで塗り分け可能
   （FullCalendarのデフォルト: .fc-col-header-cell.fc-day-sun など）*/
.fc .fc-col-header-cell.fc-day-sun {
  background-color: orange !important;
}
.fc .fc-col-header-cell.fc-day-sat {
  background-color: #ffc080 !important; /* 薄めのオレンジ */
}
.fc .fc-col-header-cell:not(.fc-day-sun):not(.fc-day-sat) {
  background-color: #008080 !important; /* ティール */
}

/* =========================
   日付セルの背景色
   ========================= */
/* (a) 平日(当月) → もっと明るい白系 */
.fc-daygrid-day:not(.fc-day-other):not(.fc-day-today) {
  background-color: #fcfcfc !important; /* 真っ白に近い */
}

/* (c) 前後月の日付( .fc-day-other ) → やや薄いグレー */
.fc-daygrid-day.fc-day-other {
  background-color: #eeeeee !important;
}

/* (d) 今日 → もう少し暗め＆黄色寄りの黄緑 */
.fc-daygrid-day.fc-day-today {
  background-color: #f1ef53 !important; /* お好みで微調整 */
}

/* 日付数字は基本的に黒文字 */
.fc-daygrid-day-number {
  color: #000 !important;
  font-weight: normal !important; /* 必要あれば標準に */
}

/* 週・日表示の時間文字色 */
.fc-timegrid-slot-label-cushion,
.fc-timegrid-axis-cushion {
  color: #000 !important; /* 黒文字にする */
}

.fc .fc-toolbar > :not(:first-child) {
  margin-left: 0px;
}
.fc .fc-toolbar > :not(:last-child) {
  margin-right: 0px;
}
.fc .fc-button-group>:first-child {
  margin-left: 10px;
}
.fc .fc-button-group>:last-child {
  margin-right: 10px;
}
.fc-header-toolbar .fc-button-group button{
  margin: 0 5px;
}
.fc-header-toolbar .fc-today-button {
  margin-left: 10px; /* 「今月」ボタンの左マージン */
}


/* style.css に以下を追加 */
#practice-fields {
  display: none; /* 初期状態では非表示 */
}

#skill-period-fields {
  display: none; /* 初期状態では非表示 */
}

.show {
  display: block !important; /* 表示クラス */
}

/* 通常状態 */
.top-menu-button {
  padding: 8px 16px;
  background-color: #3c4245; /* ダークグレー */
  color: #fff;              /* 白文字 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#book-menu-set:disabled {
  background-color: #555 !important;
  color: #999 !important;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ホバー時 */
.top-menu-button:hover {
  background-color: #4b6464; /* 明るめのグレー */
}

/* 無効状態（disabled） */
.top-menu-button:disabled {
  background-color: #555 !important;
  color: #999 !important;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
/* node.html 専用 */
.menu-button.disabled {
    background-color: #555 !important;
    color: #999 !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.5;
    transition: none !important;
}
#goal-fields { display: none; }



/* 左側の説明テキストを小さめにし、UI的に「説明」感を出す例 */

/* 親のコンテナ (例: #mode-help) */
#mode-help {
  font-size: 11px; /* 文字をやや小さく */
  line-height: 1.4;
  color: #f8f9fa;
  background-color: #333; /* ダーク色(任意) */
  padding: 8px;
  margin-top: 8px;
  border-radius: 4px;
  max-width: 200px;
  white-space: pre-wrap; /* \n を改行として扱う */
  text-indent: 0;             /* 段落の先頭にインデントを付けない */
}

/* ボタンに対応するタイトルなどを強調したいなら */
#mode-help h3 {
  font-size: 12px; 
  margin-bottom: 4px;
  color: #fff;
}

/* シナジーライン専用スタイル */
.synergy-line {
  stroke: #ffa500; /* オレンジ色に設定 */
  stroke-width: 3;
  stroke-dasharray: 6 3; /* 点線（破線）表示に変更 */
  fill: none;
  pointer-events: none;
}

/* シナジースコア表示のテキストスタイル改善 */
.synergy-label {
  fill: #ffffff; /* 数字の色を白に */
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}

/* シナジースコア表示の背景（丸形）を追加する場合 */
.synergy-label-bg {
  fill: rgba(0,0,0,0.6); /* 半透明黒背景 */
  stroke: none;
  pointer-events: none;
}