/* 左端固定・日単位カウントダウンルーラー */
#day-ruler {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* 左端固定・高さは100vh */
  width: 80px;
  /* デスクトップ標準幅 */
  z-index: 9999;
  pointer-events: none;
  /* クリック貫通 */
  background: linear-gradient(-90deg,
      rgba(76, 96, 194, 0) 0%,
      rgba(76, 96, 194, 0.5) 50%,
      rgba(76, 96, 194, 1) 100%);
}

#day-ruler .ruler-bg {
  position: absolute;
  inset: 0;
  --day-step: 24px;
  /* JSで上書き（高さに応じて可変） */
  --tick-thickness: 0.08rem;
  /* 目盛線の太さ */
  --ruler-color: color-mix(in oklab, #fff 70%, #fff 30%);

  --tick-size: 8px;
  /* 通常（日ごと）の横線の長さ（短く） */
  --tick-size-10: 20px;
  /* 10日ごとの横線の長さ（長く） */

  background:
    /* 縦のガイド */
    linear-gradient(to right,
      color-mix(in oklab, var(--ruler-color) 12%, transparent) 0 1px,
      transparent 1px),

    /* 10日ごとの長めの目盛 */
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--day-step) * 10 - var(--tick-thickness)),
      var(--ruler-color) calc(var(--day-step) * 10 - var(--tick-thickness)) calc(var(--day-step) * 10)),

    /* 毎日の短めの目盛 */
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--day-step) - var(--tick-thickness)),
      var(--ruler-color) calc(var(--day-step) - var(--tick-thickness)) var(--day-step));

  background-size:
    100% 100%,
    /* 縦ガイド */
    var(--tick-size-10) calc(var(--day-step) * 10),
    /* 10日ごと */
    var(--tick-size) var(--day-step);
  /* 1日ごと */

  background-position: left top, left top, left top;
  background-repeat: no-repeat, repeat-y, repeat-y;
}

@media (prefers-color-scheme: dark) {
  #day-ruler .ruler-bg {
    --ruler-color: color-mix(in oklab, #fff 78%, #000 22%);
  }
}

/* 今日位置の ◀ マーク */
#today-marker {
  position: absolute;
  left: 100%;
  translate: -50px -50%;
  /* ← 左右の中心を少し右へ寄せる（20%前後が目安） */
  display: flex;
  align-items: center;
  gap: 6px;
  /* 画像と数字の間隔 */
}

#today-marker img {
  width: 16px;
  height: auto;
  display: block;
}

.countdown-timer {
  font-family: monospace;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 3px #4753a3, 0 0 3px #4753a3;
}

/* ===== スマホだけ細くするバリエーション ===== */
@media (max-width: 743px) {
  #day-ruler {
    width: 30px;
  }

  #today-marker {
    translate: -10px -50%;
  }

  #today-marker img {
    width: 14px;
    filter: drop-shadow(0 0 3px #5566bc) drop-shadow(0 0 3px #5566bc);
  }

  #day-ruler .ruler-bg {
    --tick-thickness: 1px;
    --tick-size: 6px !important;
    /* 通常（日ごと）の横線の長さ（短く） */
    --tick-size-10: 12px !important;
    /* 10日ごとの横線の長さ（長く） */
  }

  .countdown-timer {
    display: block;
    position: absolute;
    font-size: 13px;
    top: 3px;
    left: 15px;
  }

}