/* ============================================================
   Sakurumii · page-countdown.css
   ============================================================ */

/* 倒计时主卡 */
.cd-main{grid-column:1/-1;position:relative;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.cd-main::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,rgba(255,255,255,.015) 1px 3px)}
.cd-main .inner{position:relative;z-index:1;padding:44px 40px 40px;display:flex;flex-direction:column;gap:26px}
.cd-target{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cd-target h2{color:var(--w1)}
.cd-target .t-date{font-family:var(--jm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g1)}
.cd-target .t-date b{color:var(--o);font-weight:600}

.cd-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 8px 16px;border:1px solid rgba(230,230,230,.12);background:rgba(0,0,0,.35)}
.cd-cell b{font-family:var(--head);font-weight:600;font-size:clamp(2.4rem,7vw,4.5rem);line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(255,77,0,.28)}
.cd-cell b em{font-style:normal;color:var(--o)}
.cd-cell span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g1)}

/* 进度条 */
.cd-progress{display:flex;flex-direction:column;gap:10px}
.cd-progress .bar{position:relative;height:8px;background:var(--g2);overflow:hidden}
.cd-progress .bar i{position:absolute;inset-y:0;left:0;width:0;background:linear-gradient(90deg,var(--o),#ff8a3d);box-shadow:0 0 14px rgba(255,77,0,.6);transition:width 1s cubic-bezier(.16,.84,.24,1)}
.cd-progress .meta{display:flex;justify-content:space-between;font-family:var(--jm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g1)}
.cd-progress .meta b{color:var(--o);font-weight:600}

/* 日历 */
.cal-wrap{grid-column:span 7;display:flex;flex-direction:column;gap:14px}
.cal-month{border:1px solid var(--line);padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0))}
.cal-month .cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cal-month .cal-head b{color:var(--w1);font-weight:600;font-size:1.0625rem;font-family:var(--head)}
.cal-month .cal-head span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-family:var(--jm);font-size:12px;line-height:1;text-align:center}
.cal-grid .wd{padding:6px 0;color:var(--g1);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.cal-grid .day{padding:10px 0;border:1px solid transparent;color:var(--w2);font-weight:500}
.cal-grid .day.empty{visibility:hidden}
.cal-grid .day.hl{color:#fff;background:rgba(255,77,0,.16);border-color:rgba(255,77,0,.55);text-shadow:0 0 10px rgba(255,77,0,.5)}
.cal-grid .day.today{outline:1px solid rgba(230,230,230,.4)}
.cal-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g1)}

/* 阶段时间轴 */
.phase-tl{grid-column:span 5;display:flex;flex-direction:column}
.phase{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(230,230,230,.1)}
.phase:first-child{border-top:0;padding-top:0}
.phase .p-date{font-family:var(--jm);font-size:11px;letter-spacing:.06em;color:var(--o);font-weight:600;padding-top:3px;text-transform:uppercase}
.phase h4{color:var(--w1);font-size:1rem;line-height:1.3;margin-bottom:4px}
.phase p{color:var(--w2);font-size:.8125rem;line-height:1.3rem;font-weight:500;text-wrap:pretty}
.phase.done .p-date{color:var(--g1)}
.phase.done h4{color:var(--g1)}

@media (max-width:1023px){
  .cd-main .inner{padding:28px 20px 24px}
  .cd-digits{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .cd-cell b{font-size:2rem}
}
@media (max-width:639px){
  .cd-digits{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cd-cell b{font-size:3rem}
}