@charset "UTF-8";

/* ==========================================================================
   常時展開型・マルチカラム・カレンダーレイアウト（年次開閉リセット版）
   ========================================================================== */

/* 1. 外枠（メインコンテナ）の強制リセット */
.diary-wrapper {
  display: block !important; 
  flex-direction: row !important; /* スマホ用メディアクエリの縦並び化を強制キャンセル */
  max-width: 1240px !important;   /* 画面幅いっぱいにカレンダーを並べられるよう拡張 */
  width: 95% !important;
  margin: 20px auto !important;
  background-color: #ffffff !important;
  border: 1px solid #999999 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* 2. 不要になった古いサイドバー・メインエリアの干渉を無効化 */
.diary-sidebar, 
.diary-content,
.archive-tree,
.tree-year-group {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 3. トグルスイッチ（チェックボックス）の隠蔽 */
.tree-toggle {
  display: none !important;
}

/* 年の見出しデザイン（2026年など） */
.tree-year-group .tree-h3 {
  display: block !important;
  font-size: 16px !important;
  font-weight: bold !important;
  background-color: #009999 !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  padding: 8px 15px !important;
  border: 1px solid #007a7a !important;
  cursor: pointer !important; /* クリック可能であることをユーザーに示す設定 */
}

.tree-year-group .tree-h3:hover {
  background-color: #bbf1ef !important; /* ホバー時に背景を明るい水色に切り替え */
  color: #0066cc !important;            /* 文字色をリンクの青色に切り替え */
  border-color: #009999 !important;     /* 枠線を濃い青緑に切り替え */
}

/* ==========================================================================
   【最重要】年単位のアコーディオン開閉制御
   ========================================================================== */

/* 初期状態（閉じている時）：カレンダーコンテナを非表示にします */
.tree-toggle ~ .calendar-months-grid {
  display: none !important;
}

/* 展開状態（チェックが入った時）：PC表示時は横並びのグリッド配置を有効化します */
.tree-toggle:checked ~ .calendar-months-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important; 
}

/* 各月の外枠ボックス */
.tree-month-group {
  display: block !important;
  background-color: #fdfdfd !important;
  border: 1px solid #cccccc !important;
  padding: 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
}

/* 月のタイトル（1月、2月など） */
.tree-month-title {
  display: block !important;
  font-size: 14px;
  font-weight: bold;
  background-color: #e6f7f7;
  color: #007a7a;
  border: 1px solid #bbf1ef;
  margin: 0 0 10px 0 !important;
  padding: 5px 10px !important;
  text-align: center;
}

/* カレンダーコンテナ */
.calendar-container {
  display: block !important;
  width: 100% !important;
  max-width: 363px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   カレンダー内部の格子（グリッド）装飾
   ========================================================================== */

/* 曜日ヘッダー行 */
.calendar-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  padding: 0 0 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.calendar-weekdays li {
  display: block !important;
  width: auto !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: bold !important;
  color: #666666 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 土日の色分け */
.calendar-weekdays li.sun { color: #cc0000 !important; }
.calendar-weekdays li.sat { color: #0066cc !important; }

/* 日付リストの配置 */
.tree-day-list {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* 各日付マスの正方形維持設定 */
.tree-day-list li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  list-style: none !important;
  border: none !important;
}

/* 日記がある日のリンク */
.tree-day-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  background-color: #ffffff !important;
  border: 1px solid #dddddd !important;
  color: #333333 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* ホバー時の色変更（位置固定） */
.tree-day-list li a:hover {
  background-color: #bbf1ef !important;
  border-color: #009999 !important;
  color: #0066cc !important;
  padding: 0 !important;
}

/* 日記がない日の数字マス */
.tree-day-list li.no-diary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #e8e8e8 !important;
  color: #bbbbbb !important;
  font-size: 11px !important;
  font-weight: normal !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* 曜日を合わせるための透明な空マス */
.tree-day-list li.empty {
  display: block !important;
  background-color: transparent !important;
  border: none !important;
}

/* ==========================================================================
   スマホ対応（画面幅が600px以下のとき）
   ========================================================================== */
@media (max-width: 600px) {
  .diary-wrapper {
    margin: 10px auto !important;
    padding: 10px !important;
    width: 95% !important;
  }
  
  /* スマホ環境下で展開された際は、1列の縦並びにフォールバックさせます */
  .tree-toggle:checked ~ .calendar-months-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}