/* 01sano.css - 佐野さん用 黒基調カレンダー */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: transparent; /* 背景画像を透けさせる */
  margin: 0;
  padding: 0;
  color: #fff;
}

header, main, #popup {
  background-color: rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 4px;
}


/* 年月ヘッダー */
.calendar-header {
  width: 100%;        /* 横幅を親コンテナいっぱいに */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 1px auto;
  max-width: 100%;
  gap: 10px;
  color: #fff;
  background: linear-gradient(145deg, #331d03, #8b4516); /* ダーク系グラデ ← 追加 */
  border-radius: 8px; /* 角丸 ← 追加 */
  padding: 9px 0; /* 上下余白調整 ← 追加 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* 影で浮き感追加 ← 追加 */
}

#monthYear {
  font-size: 25px;          /* 文字サイズ */
  font-family: 'Lobster', cursive;  /* 英語でも読みやすくおしゃれ */
  font-weight: bold;        /* 太さ */
  line-height: 0.7;         /* 縦幅調整 */
  padding: 6px 0;           /* 上下の余白 */
  text-align: center;       /* 中央揃え */
}

/* 前月・翌月ボタン */
#prevMonth, #nextMonth {
  font-size: 20px;          /* 文字サイズ */
  font-family: 'Lobster', cursive;  /* 英語でも読みやすくおしゃれ */
  padding: 4px 8px;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(68,68,68,0.6), rgba(34,34,34,0.6)); /* グラデ ← 追加 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* 影追加 ← 追加 */
  transition: transform 0.2s, box-shadow 0.2s; /* ホバー演出 ← 追加 */
}
#prevMonth:hover, #nextMonth:hover {
  background: linear-gradient(135deg, #555, #333); /* ホバー時グラデ ← 追加 */
  transform: translateY(-1px); /* 軽く浮かせる ← 追加 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* ホバー時影 ← 追加 */
}


/* カレンダー全体 */
#calendar {
  width: 100%;       /* 画面幅いっぱいに */
  max-width: 100%;   /* 最大幅も制限 */
  box-sizing: border-box;
  margin: 2px auto;

  /* 半透明に変更 */
  background-color: rgba(255, 255, 255, 0.2); /* 白50%透過 */
  backdrop-filter: blur(5px);                 /* 背景を少しぼかす */

  /* 背景グラデーション追加 */
  background: linear-gradient(145deg, rgba(0,0,0,0), rgba(30,30,30,0)); /* ← 追加 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* 影で浮き感追加 ← 追加 */
  border-radius: 16px; /* 角丸を少し大きくして柔らかさ強化 ← 変更 */

  display: flex;
  flex-direction: column;  /* 縦に週ごと並べる */
  gap: 0;

  border-radius: 12px;      /* 角を丸くして柔らかい印象に */
  padding: 4px;            /* 内側余白 */
}

/* 曜日ヘッダー */
.weekday-header {
  background: linear-gradient(145deg, #351e02, #723913); /* ダーク系グラデ ← 追加 */
  text-align: center;
  padding: 8px 0;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;      /* 角を丸くして柔らかい印象に */
}
.weekday-header.sun { color: #be4848ef; }
.weekday-header.sat { color: #407fbed5; }


.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  position: relative;
}

/* 日付セル */
.day {
  background: #444; /* 黒系グレー */
  min-height: 80px;
  padding: 2px !important;
  gap: 0 !important; /* flex要素間の余白をゼロに */
  flex: 1;           /* 均等に幅を割り当て */
  min-width: 0;      /* 収縮可能に */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  transition: background 0.2s;
  z-index: 1;
  border-radius: 8px; /* 角丸強化 ← 追加 */
  background: linear-gradient(135deg, rgba(148, 148, 148, 0.4), rgba(34, 34, 34, 0.6)); /* 半透明化 */
}
.day-number {
  margin: 1px !important;
  margin-bottom: 0 !important;   /* 数字とイベントの距離をゼロに */
  padding-bottom: 0 !important;
  padding: 2px 3px !important;     /* 左右ちょっとだけ */
  /*line-height: 1.0;   /* 数字の上下も詰める */
}


/* 日付ラベル */
.date-label-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1px;
  font-size: 17px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/* 日付数字 */
.date-number {
  font-weight: bold;
}

/* 祝日ラベル */
.holiday-label {
  height: 12px!important;             /* 高さ自動調整 */
  line-height: 13px!important;      /* 行高を自動 */
  color: #fae9e9;
  font-size: 12px;
  padding: 2px 3px!important;
}

/* 今日の日付 */
.day.today {
  background: linear-gradient(135deg, #87bac7, #15444d)!important; /* 全体と同系の黒系グラデ */
  border: 2px solid #29b9e9bd; /* 青系アクセント枠は残す */
  border-radius: 8px;          /* 他のセルと角丸を揃える */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* 浮き感追加 */
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s; /* ホバー演出に対応 */
}


.day.today:hover {
  background: linear-gradient(135deg, #153526, #8ac0aa)!important; /* hoverでもグラデ維持 */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

/* 今日ラベル */
.today-label {
  height: 12px!important;             /* 高さ自動調整 */
  line-height: 11px!important;      /* 行高を自動 */
  font-size: 13px;
  padding: 0px 3px!important;
  color: #80e766; /* 青系アクセント */
  font-weight: bold;
  background: none;
  border-radius: 0;
}

/* 土日セル */
.day.sun {
  background: linear-gradient(135deg,
    rgba(228, 145, 145, 0.3),   /* #e49191ee → alpha 0.75 */
    rgba(122, 44, 44, 0.8)        /* #7a2c2cee → alpha 0.8 */
  );
}

.day.sat {
  background: linear-gradient(135deg,
    rgba(125, 157, 212, 0.3),   /* #7d9dd4e7 → alpha 0.91 */
    rgba(35, 77, 119, 0.91)      /* #234d77e7 → alpha 0.91 */
  );
}

.day.holiday {
  background: linear-gradient(135deg,
    rgba(228, 145, 145, 0.3),   /* #e49191ee → alpha 0.75 */
    rgba(122, 44, 44, 0.8)       /* #7a2c2cee → alpha 0.8 */
  );
}

/* 月に含まれない日（空白セル） */
.day.other-month {
  background: rgba(247, 247, 247, 0.459); /* ほぼ透過で違和感なく */
  color: rgba(223, 219, 219, 0.5); /* 日付文字も薄くして馴染ませる */
}

/* カーソル持ってくと */
.day:hover { 
    background: linear-gradient(135deg, #303030, #c2c2c2)!important; /* hoverでもグラデ維持 */
  ; 
}

/* コンテナ：複数日イベント */
.multi-day-container {
  position: relative; /* 子の絶対配置の基準 */
  height: 0;       /* 帯の高さに合わせる */
  margin-bottom: 5px; /* 単日イベントとの間隔 */
}
.multi-day-container .multi-day-band {
  position: absolute;
  top: 0;
}




/* 単日イベント */
.event {
  top: -2px !important;                 /* 日付セル内上部からの間隔 */
  margin-top: 0;      /* 上の余白カット */
  font-size: 14px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;      /* 改行を有効にする */
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2em;
  background: linear-gradient(135deg, #ff8800, #ffb84d); /* ジャズ系グラデ ← 変更 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* 少し浮かせる ← 追加 */
  transition: transform 0.2s, box-shadow 0.2s; /* ホバー時の演出 ← 追加 */
  position: relative;
  z-index: 2;
}

.event:hover {
  transform: translateY(-2px); /* 浮き演出 ← 追加 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.4); /* ホバー時の影 ← 追加 */
}

/* コンテナ：単日イベント */
.single-event-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;      /* 改行を有効にする */
  gap: 0;
  z-index: 2;
}

/* サムネ付きイベント全体を固定高さに */
.event.has-thumbnail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 120px;   /* ← 全て同じ高さに統一 */
  overflow: hidden;
}

/* タイトル部分：最大2行まで */
.event.has-thumbnail .event-title {
  flex: 0 0 auto;
  max-height: 2.4em;       /* 行高 × 2 */
  line-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0px;
}

/* サムネ部分：高さは残り領域を使う */
.event.has-thumbnail .thumbnail {
  flex: 1;
  height: 70px;            /* 固定でもOK */
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.85;
}





/* サムネがある場合だけ高さが伸びる */
.thumbnail {
  width: 100%;
  height: 60px;                /* 高さ固定 */
  object-fit: cover;
  border-radius: 4px;
  margin-top: 0;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 複数日イベント帯（週を横断） */
.multi-day-band {
  display: block;
  top: 20px !important;                 /* 日付セル内上部からの間隔 */
  height: 15px!important;             /* 高さ自動調整 */
  line-height: 17px!important;      /* 行高を自動 */
  padding: 0px 9px!important;
  background: rgba(121, 70, 12, 0.774);
  color: #c4b7a5;
  font-weight: 600;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-bottom: 1px;
  left: 0;
  width: 100%;
  z-index: 3;         /* 単日イベントより前面 */
  border-radius: 6px; /* 角丸 ← 追加 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 浮き感追加 ← 追加 */
}

/* ポップアップ */
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #555;
  padding: 16px;
  z-index: 1000;
  text-align: center;
  width: 60vw;
  max-width: 600px;
  max-height: 80%;
  overflow: auto;
  color: #fff;
  background: linear-gradient(145deg, #111, #222); /* ダーク系グラデ ← 追加 */
  border-radius: 12px; /* 角丸強化 ← 変更 */
  box-shadow: 0 6px 20px rgba(0,0,0,0.5); /* 浮き感強化 ← 追加 */
}

#popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
}

#overlay {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,0.5); /* 少し透け感弱めに調整 ← 変更 */
  z-index: 999;
}



/* レスポンシブ調整 */
@media (max-width: 600px) {

  .day { 
    min-height: 0px;            /* 高さ制限を外す */
    padding: 2px 0;          /* 上下余白を小さく */
    position: relative;    /* absolute 子を正しく参照 */
  }

  #monthYear { font-size: 30px; }
  
  /* 日付ラベル */
  .date-label-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    margin-bottom: 0!important;
    position: relative;
    z-index: 2;
  }


  /* 単日イベント */
  .event {
    top: -3px !important;                 /* 日付セル内上部からの間隔 */
    font-size: 8px;     /* 小さめ文字 */
  }


  /* イベント全体 */
  .event.has-thumbnail {
    height: auto;        /* 固定高さを解除 */
    flex-direction: column;
    justify-content: flex-start;
  }

  /* タイトル部分 */
  .event.has-thumbnail .event-title {
    font-size: 8px;     /* 小さめ文字 */
    line-height: 1.2em;
    max-height: 16px;   /* 2行まで */
    margin-bottom: 1px;
  }

  /* サムネ部分 */
  .event.has-thumbnail .thumbnail,
  .thumbnail {
    height: 42px;       /* 残りの高さ */
    object-fit: cover;
  }



  /* 祝日名称を小さく */
  .holiday-label {
    font-size: 5px!important;
    height: 5px!important;             /* 高さ自動調整 */
    line-height: 5px!important;      /* 行高を自動 */
    margin-top: 0;              /* 上余白は不要 */
    display: flex;              /* フレックスにする */
    flex-direction: column;     /* 縦方向 */
    justify-content: center;    /* 縦中央寄せ */
    padding: 0px 0px!important;           /* 左右少し狭め */
  }






  /* 複数日イベント帯（週を横断） */
  .multi-day-band {
    margin: 0 ;
    font-size: 9px!important;           /* 小さくする */
    height: 13px!important;             /* 高さ自動調整 */
    line-height: 15px!important;      /* 行高を自動 */
    top: 16px !important;                 /* 日付セル内上部からの間隔 */
    padding: 0px 8px!important;           /* 左右少し狭め */
  }


  /* 曜日ヘッダー */
  .weekday-header {
    padding: 3px 0;/* 上下余白を小さく */
    font-size: 13px; /* 文字も少し小さく */
  }

  /* 今日ラベル */
  .today-label {
    font-size: 9px;
  }

}