/* =========================
   カウントダウン共通設定
========================= */
.c-countdown{
  --cd-color: #0a86c8;   /* 通常時：水色 */
  --cd-bg:    #e6f2ff;   /* ラベル背景 */

  display:flex;
  flex-direction:column;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin: 1.1em auto;
  color:#000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* タイムアップ時 */
.c-countdown[data-status="done"]{
  --cd-color: #8b5a2b;   /* 茶色 */
  --cd-bg:    #efe4d6;
}

/* =========================
   上の日付
========================= */
.c-countdown__date .date{
  font-weight: 900;
  font-size: clamp(22px, 5vw, 44px);
  letter-spacing: .02em;
}

/* =========================
   ラベル帯
========================= */
.c-countdown__labelbar{
  background: var(--cd-bg);
  border-radius:6px;
  padding:.35rem .75rem;
  margin:.3rem 0 .6rem;
}
.c-countdown__labelbar .txt{
  font-weight:700;
  font-size:.95rem;
  white-space:nowrap;
}

/* =========================
   数字エリア
========================= */
.c-countdown__digits{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 1rem;
  line-height:1;
}

.c-countdown__digits .seg{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-left: 10px;
  padding-right: 10px;
}

/* 数字 */
.c-countdown__digits .num{
  font-weight:900;
  font-feature-settings:"tnum";
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 8vw, 56px);
  color: var(--cd-color);   /* ★ 変数参照 */
}

/* 単位 */
.c-countdown__digits .cap{
  margin-top:.15rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing:.06em;
}

/* =========================
   コロン（：）
========================= */
.c-countdown__digits .seg + .seg::before{
  content: ":";
  position: absolute;
  left: -0.8rem;
  top: 40%;
  transform: translateY(-55%);
  font-weight: 900;
  font-size: clamp(28px, 8vw, 56px);
  line-height: 1;
  color: var(--cd-color);   /* ★ 数字と完全同期 */
}

/* =========================
   スマホ調整
========================= */
@media (max-width: 480px){
  .c-countdown__labelbar{
    padding:.25rem .6rem;
  }
  .c-countdown__digits{
    gap:.8rem;
  }
}