/* ============================================================
   延長徵件公告（js/notice.js）
   後台開關開啟時 <html> 加上 .is-extended：
   .ext-old 原時間保留但劃線、.ext-new 延長時間才出現、.ext-hide 直接隱藏
   ============================================================ */
.ext-new{ display:none }
html.is-extended .ext-new{ display:inline }
html.is-extended .ext-hide{ display:none }
html.is-extended .ext-old,
.ext-new s{ text-decoration:line-through; text-decoration-thickness:1px; opacity:.55 }

/* 數據區：大數字直接換成新日期，原時間劃線自成一行、延長時間在下一行（窄欄才不會斷在字中間） */
.stat-v-time .ext-new s{ display:block }
/* 截止日期：原日期縮小劃線，延長日期換行放大 */
html.is-extended .step-deadline .ext-old{ display:block; font-size:.66em }
html.is-extended .step-deadline .ext-new{ display:block; margin-top:4px }

/* ---------- 彈窗：約佔畫面七成 ---------- */
.notice{ position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; padding:16px }
.notice[hidden]{ display:none }
.notice-backdrop{ position:absolute; inset:0; background:rgba(5,5,5,.84); backdrop-filter:blur(8px) }
.notice-panel{
  position:relative; width:70vw; min-height:70vh; max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(48px,7vh,88px) clamp(28px,5vw,88px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(198,242,20,.14), transparent 70%),
    var(--bg-elevated);
  border:1px solid rgba(198,242,20,.5);
  box-shadow:0 0 0 1px rgba(198,242,20,.08), 0 0 90px rgba(198,242,20,.14);
}
.notice-close{
  position:absolute; top:18px; right:22px; font-size:34px; line-height:1; color:var(--gray);
  background:none; border:0; cursor:pointer;
}
.notice-close:hover, .notice-close:focus-visible{ color:var(--acid) }
.notice-star{ font-size:clamp(28px,3vw,44px); color:var(--acid); line-height:1 }
.notice-eyebrow{
  margin-top:clamp(12px,2vh,20px);
  font-family:var(--font-mono); font-size:clamp(12px,1vw,14px); letter-spacing:.35em; color:var(--acid-dim);
}
.notice-title{
  margin-top:clamp(16px,3vh,32px);
  font-family:var(--font-zh); font-weight:300; font-size:clamp(30px,4.4vw,72px); line-height:1.35; letter-spacing:.06em;
  color:var(--white);
}
.notice-title b{ font-weight:500; color:var(--acid); white-space:nowrap }
html[lang="en"] .notice-title{ font-family:var(--font-en); font-size:clamp(26px,3.4vw,56px); letter-spacing:.01em }
.notice-was{ margin-top:clamp(14px,2.4vh,24px); font-size:clamp(14px,1.2vw,18px); color:var(--gray); letter-spacing:.06em }
.notice-was s{ text-decoration-thickness:1px }
.notice-cta{
  margin-top:clamp(28px,5vh,52px); display:inline-flex; align-items:center; gap:10px;
  padding:16px 44px; border-radius:999px; background:var(--acid); color:var(--bg);
  font-family:var(--font-zh); font-weight:500; font-size:clamp(16px,1.4vw,20px); letter-spacing:.12em; text-decoration:none;
  box-shadow:0 8px 32px rgba(198,242,20,.3); transition:transform .3s, box-shadow .3s;
}
.notice-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(198,242,20,.42) }
.notice-skip{
  margin-top:clamp(24px,4vh,40px); display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--gray); letter-spacing:.06em; cursor:pointer;
}
.notice-skip input{ width:16px; height:16px; accent-color:var(--acid); cursor:pointer }

@media (max-width: 768px){
  .notice{ padding:12px }
  .notice-panel{ width:100%; min-height:70vh; min-height:70svh; padding:56px 22px 36px }
  .notice-close{ top:12px; right:14px }
  .notice-title b{ white-space:normal }
  .notice-cta{ padding:14px 36px }
}