/* ============================================================
   VLSI-TSA — Banner 倒數計時條 (countdown.css)
   ------------------------------------------------------------
   半透明橫條，疊在 banner 底部（桌機、手機一致）。
   ============================================================ */

.bn-cd {
  position: absolute; bottom: 6px; z-index: 5;
  left: 50%; transform: translateX(-50%);
  width: var(--b3w); max-width: 100%;
  border-radius: 0 0 20px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  padding: 12px clamp(14px, 2.4vw, 26px) 32px;
  background: rgb(0 0 0 / 20%);
  backdrop-filter: blur(3px);
}

/* 左：標題 */
.bn-cd__cap {
  flex: 1 1 0; min-width: 0;
  font-size: clamp(15px, 1.7vw, 20px); font-weight: 700; line-height: 1.2;
  color: #fff; letter-spacing: .01em;
}

/* 中：倒數 */
.bn-cd__clock { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; justify-content: center; gap: 5px; }
.bn-cd__grp { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bn-cd__pair { display: flex; gap: 4px; }
.bn-cd__digit {
  width: clamp(38px, 4.6vw, 50px); height: clamp(30px, 3.6vw, 38px); border-radius: 6px;
  border: 0; color: #fff; background: rgb(20 22 26 / 88%);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: clamp(16px, 2vw, 22px); font-weight: 700;
  display: grid; place-items: center;
}
.bn-cd__unit {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.bn-cd__sep {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: clamp(13px, 1.6vw, 18px); font-weight: 700; color: rgba(255, 255, 255, .5);
  line-height: clamp(30px, 3.6vw, 38px);
}

/* 右：Deadline */
.bn-cd__due {
  flex: 1 1 0; min-width: 0; text-align: left;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700; line-height: 1.35;
  color: #fff; letter-spacing: .02em;
}
.bn-cd__due-lb {
  display: block; letter-spacing: .1em; text-transform: uppercase;
  font-size: .85em; margin-bottom: 2px;
  color: rgba(255, 255, 255, .62);
}

/* ---- RWD ---- */
@media (max-width: 991px) {
  .bn-cd { gap: 8px 14px; padding: 10px 16px 32px; }
  .bn-cd__digit { width: 22px; height: 30px; font-size: 16px; }
  .bn-cd__sep { line-height: 30px; font-size: 13px; }
  .bn-cd__unit { font-size: 8px; letter-spacing: .06em; }
}
/* 600px 以下 banner 為 4:5 直圖：三段上下排（601–767px 仍是 5:2 扁圖，維持橫排） */
@media (max-width: 600px) {
  .bn-cd { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; }
  .bn-cd__cap, .bn-cd__clock, .bn-cd__due { flex: 0 0 auto; width: 100%; }
  .bn-cd__clock { justify-content: flex-start; }
}
