/* ============================
   ■ 背景・全体設定
============================ */
body {
  font-family: sans-serif;
  padding: 20px;
  color: white;
  min-height: 100vh;
  background: linear-gradient(to bottom, #5A2E3F, #3A1E2A, #1A0E12);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

main, .scroll-container {
  background: transparent !important;
}

/* ============================
   ■ 斜めライン（背景装飾）
============================ */
.line-w1, .line-red, .line-w3, .line-w4, .line-yellow, .line-w6 {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  right: -10px;
  width: 1000px;
  transform: rotate(45deg);
  transform-origin: right top;
}

.line-w1 { top: 119px; height: 1px; background: #ffffff; }
.line-red { top: 120px; height: 6px; background: #8A0F1A; }
.line-w3 { top: 127px; height: 1px; background: #ffffff; }
.line-w4 { top: 179px; height: 1px; background: #ffffff; }
.line-yellow { top: 180px; height: 6px; background: #D9B64A; }
.line-w6 { top: 187px; height: 1px; background: #ffffff; }

/* ============================
   ■ 見出し・リンク
============================ */
h1 { margin-bottom: 20px; }

.link-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

a.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  background: #fff;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.link-button:hover {
  transform: translateY(-3px);
  border-color: #92F3A4;
  box-shadow:
    0 -2px 8px #92F3A4,
    0 0 5px #92F3A4,
    inset 0 0 5px #92F3A4;
}

.kokosuki-fix {
  position: relative;
  z-index: 50;
}

/* ============================
   ■ 週スケジュール
============================ */
.week-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 0;
    width: 100%;
    scrollbar-width: none;

    /* ← これが決定打！ */
    min-width: max-content;
}
.week-list::-webkit-scrollbar { display: none; }

.day-card {
  width: 240px;          /* ← min-width ではなく width に統一 */
  flex: 0 0 240px;       /* ← 絶対に伸びない */
  box-sizing: border-box;/* ← padding を含めて 240px 内に収める */
  background: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 6px #0D0F2B;
  color: #000;
}

/* ============================
   ■ スケジュールカード
============================ */
.schedule-card {
  position: relative;
  width: 100%;
  padding: 12px;
  margin-top: 12px;

  background: #0D0F2B;          /* ← 完全一致！ */
  border: 2px solid #92F3A4;    /* ミント枠線 */
  border-radius: 10px;
  border-left: 4px solid #92F3A4;
  color: #fff;

  box-shadow: 0 4px 12px rgba(13, 15, 43, 0.45);

  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.schedule-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 12px #92F3A4,
    0 0 20px rgba(146,243,164,0.6);
}



/* ▼ schedule-main（ホバー対象） */
.schedule-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;

  text-decoration: none;   /* ← 下線を完全に消す */
  color: inherit;          /* ← 文字色も親に合わせる（重要） */
}

.schedule-main:hover {
  transform: translateY(-6px) rotateX(4deg) rotateY(2deg) scale(1.03);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.25),
    0 0 12px rgba(146,243,164,0.6);
}

/* ▼ 削除ボタン（右上固定） */
/* ▼ 削除ボタンを右上に固定 */
.side-delete {
  position: absolute;
  top: 8px;
  right: 8px;

  background: #d33;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 20;
}

/* ▼ スケジュールのスクロールボタンを YouTube動画と同じにする */
.week-btn {
  background: #2aa775;   /* 緑 */
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  margin: 0 5px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.week-btn:hover {
  background: #1f8a60;   /* 濃い緑 */
  transform: translateY(-2px);
}

.week-scroll-container {
  display: flex;
  align-items: center;
  gap: 6px; /* ← ボタンと日付の距離を小さくする */
}

.week-btn {
  flex-shrink: 0; /* ← ボタンが押しつぶされない */
}

.week-list {
  flex: 1; /* ← 日付リストが中央に広がる */
}



/* ============================
   ■ タイトル
============================ */
.schedule-title {
    color: #92F3A4 !important; /* ミントグリーン */
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;

    /* ここすき風の光り方 */
    text-shadow:
        0 0 6px rgba(146,243,164,0.6),
        0 0 12px rgba(146,243,164,0.4);
}

/* ============================
   ■ サムネイル
============================ */
.schedule-thumb {
  width: 100%;
  height: 135px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 6px;
  box-sizing: border-box;
}

/* ============================
   ■ 時間
============================ */
.schedule-time {
    display: inline-block;
    padding: 6px 14px;              /* ← 少し大きめに調整 */
    font-size: 16px;                /* ← 14px → 16px にアップ */
    font-weight: 700;
    color: #92F3A4;                 /* ミントグリーン */
    border: 2px solid #92F3A4;      /* ボタンと同じ太さに */
    border-radius: 8px;
    background: rgba(13, 15, 43, 0.35); /* 濃紺の透明感 */
    box-shadow: 0 3px 8px rgba(13, 15, 43, 0.45);
    white-space: nowrap;            /* ← 時間が折り返されない */
    width: fit-content;             /* ← 中身に合わせて幅が決まる */
    transition: 0.2s ease;
}

/* ホバーで光る（ここすきボタンと同じ） */
.schedule-time:hover {
    background: rgba(146, 243, 164, 0.15);
    box-shadow:
        0 0 10px rgba(146,243,164,0.6),
        0 0 20px rgba(146,243,164,0.4);
    transform: translateY(-2px);
}




/* ============================
   ■ YouTube 最新動画
============================ */
.scroll-container {
  position: relative;
  display: flex;
  align-items: center;
}

.scroll-btn {
  background: #2aa775;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  margin: 0 5px;
}

.scroll-btn:hover {
  background: #1f8a60;
}

.video-list {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none;
}

.video-list::-webkit-scrollbar { display: none; }

.video-card {
  width: 240px;
  min-width: 240px;
  background: white;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.2s, box-shadow 0.1s ease;
  color: #000;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 -2px 8px #92F3A4,
    0 0 5px #92F3A4,
    inset 0 0 5px #92F3A4;
}

.thumb {
  width: 100%;
  border-radius: 8px;
}

.video-link {
    text-decoration: none !important;
    color: inherit !important;
    display: inline-block;
}


/* ============================
   ■ デバッグ
============================ */
#mouse-debug {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
}

/* --- サムネ横にコメント・タイトルを並べるレイアウト --- */
.item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    margin-bottom: 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* サムネ */
.kokosuki-thumb {
    width: 140px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
}

/* 右側の情報エリア */
.info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* タイトル */
.info b {
    font-size: 15px;
    margin-bottom: 6px;
}

/* コメント */
.info p {
    font-size: 14px;
    margin: 4px 0;
    line-height: 1.4;
}

/* 時間表示 */
.time-display {
    font-size: 13px;
    font-weight: bold;
    color: #444;
    margin-bottom: 6px;
}

.kokosuki-item-link {
    text-decoration: none !important;
    color: inherit !important;
}

#mouse-debug {
    position: fixed;
    top: 10px;
    right: 10px;

    width: fit-content !important;
    max-width: max-content !important;
    display: inline-block !important;

    padding: 6px 10px;
    background: rgba(0,0,0,0.6);
    color: #0f0;

    font-size: 12px;
    border-radius: 6px !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.5) !important;

    z-index: 99999;
    pointer-events: none;
}



.kokosuki-text {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
    color: #fff;
    background: rgba(0,0,0,0.25);
    padding: 10px 14px;
    border-radius: 8px;
}

/* ====== 統一ボタン ====== */
.btn {
    padding: 10px 20px;
    background: #0D0F2B; /* 濃紺ベース */
    border: 2px solid #92F3A4; /* ミント枠線 */
    border-radius: 8px;
    color: #92F3A4; /* ミント文字 */
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important; /* ← 下線を完全に消す */
}

.btn:hover {
    background: #92F3A4; /* ホバーでミント反転 */
    color: #0D0F2B; /* 文字は濃紺に */
    box-shadow: 0 0 10px #92F3A4;
}

/* 小さめボタン（削除など） */
.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
}

/* 危険操作（削除）だけは赤で統一 */
.btn-danger {
    border-color: #ff4c4c;
    color: #ff4c4c;
}

.btn-danger:hover {
    background: #ff4c4c;
    color: #fff;
    box-shadow: 0 0 10px #ff4c4c;
}

.link-buttons.kokosuki-fix {
    margin: 0;
    text-align: left;
}
/* 日付ハイライト */
.day-card.selected {
    background: #FFD84C;
    color: #000;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255,216,76,0.6);
}

/* 入力フォームをボタンと同じくらい大きく */
.schedule-input input {
    padding: 12px 14px;
    font-size: 12px;
    height: 42px;
}

.time-select {
    padding: 6px 10px;          /* ← 少し小さめにして option と高さを合わせる */
    font-size: 16px;            /* ← 18px → 16px にすると見切れない */
    height: 40px;               /* ← 42px → 40px に調整 */
    border-radius: 8px;
    border: 2px solid #92F3A4;
    background: #0D0F2B;
    color: #92F3A4;
    appearance: none;           /* ← ブラウザのデフォルト装飾を消す */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 10px center;
    background-repeat: no-repeat;
}


.time-select:focus {
    outline: none;
    box-shadow: 0 0 10px #92F3A4;
}

.time-select option {
    font-size: 16px;      /* ← select と揃える */
    padding: 6px 10px;    /* ← option の高さを確保 */
    background: #0D0F2B;
    color: #92F3A4;
}
/* ===== 入力フォームを統一デザイン（文字大きめ版） ===== */
.input-unified {
    padding: 8px 12px;
    font-size: 18px;          /* ← 文字を大きく */
    height: 46px;             /* ← 見切れないように高さも調整 */
    border-radius: 8px;
    border: 2px solid #92F3A4;
    background: #0D0F2B;
    color: #92F3A4;
    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.input-unified:focus {
    outline: none;
    box-shadow: 0 0 10px #92F3A4;
}

/* 日付のカレンダーアイコンをミント色に寄せる */
input[type="date"].input-unified::-webkit-calendar-picker-indicator {
    filter: invert(80%);
}
.time-select option {
    font-size: 18px;      /* ← option も揃える */
    padding: 8px 12px;
}