/* 中央系統首頁：一週天氣區塊
 * 所有樣式限定在 #wx 底下；不依賴瀏覽器或 Tailwind 的預設樣式；動畫名稱一律加 wx- 前綴。
 * 字型沿用首頁的 font-family（不另外載入字型）。
 */
#wx { display: block; width: 100%; margin: 0 0 3rem; padding: 0; font-family: inherit; line-height: normal; text-align: left; }
#wx[hidden] { display: none !important; }
#wx *, #wx *::before, #wx *::after { box-sizing: border-box; }
#wx svg { display: inline-block; vertical-align: middle; flex-shrink: 0; overflow: visible; }
#wx button { font-family: inherit; line-height: normal; margin: 0; text-transform: none; -webkit-appearance: none; appearance: none; }
#wx ol { list-style: none; margin: 0; padding: 0; }
#wx h2, #wx p { margin: 0; }

/* 卡片與背景插畫 */
#wx .wx-card { position: relative; overflow: hidden; border-radius: 28px; background: #CFE0EF; color: #0F172A; padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 32px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.05); }
#wx .wx-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; }

/* 今天 */
#wx .wx-now { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 32px; border-right: 1px solid rgba(15,23,42,.12); }
#wx .wx-meta { font-size: 13px; font-weight: 700; color: #334155; }
#wx .wx-meta-sub { font-weight: 600; }
#wx .wx-t { display: flex; align-items: center; gap: 14px; }
#wx .wx-deg { font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#wx .wx-cond { font-size: 17px; font-weight: 800; }
#wx .wx-hl { font-size: 13px; color: #334155; font-variant-numeric: tabular-nums; }

/* 明天摘要與一週預報按鈕 */
#wx .wx-sum { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.72); color: #0F172A; }
#wx .wx-sum-l { font-size: 13px; font-weight: 800; color: #0F172A; }
#wx .wx-sum-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#wx .wx-sum-p { font-size: 13px; font-weight: 700; color: #1D4ED8; }
#wx .wx-wk { position: relative; margin-left: auto; height: 42px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid rgba(15,23,42,.15); background: rgba(255,255,255,.75); color: #0F172A; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
#wx .wx-wk:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
#wx .wx-wk svg { transition: transform .2s; }
#wx .wx-open .wx-wk svg { transform: rotate(180deg); }

/* 一週預報 */
#wx .wx-days { position: relative; flex: 1 1 520px; display: none; grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 4px; }
#wx .wx-open .wx-days { display: grid; flex-basis: 100%; }
#wx .wx-open .wx-sum { display: none; }
#wx .wx-days li { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; }
#wx .wx-d { font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
#wx .wx-days li.wx-today .wx-d { font-weight: 900; color: #0F172A; }
#wx .wx-days li.wx-tmr .wx-d { font-weight: 800; color: #0F172A; }
#wx .wx-hi { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#wx .wx-lo { font-size: 13px; color: #334155; font-variant-numeric: tabular-nums; }
#wx .wx-bar { position: relative; width: 6px; height: 48px; border-radius: 3px; background: rgba(255,255,255,.7); }
#wx .wx-bar i { position: absolute; left: 0; width: 6px; border-radius: 3px; background: #2563EB; }
#wx .wx-pop { font-size: 12px; height: 16px; color: #1D4ED8; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 夜晚與雷雨：白色文字 */
#wx .wx-on-dark { color: #F8FAFC; }
#wx .wx-on-dark .wx-now { border-right-color: rgba(248,250,252,.22); }
#wx .wx-on-dark .wx-meta, #wx .wx-on-dark .wx-hl, #wx .wx-on-dark .wx-lo, #wx .wx-on-dark .wx-d { color: rgba(248,250,252,.85); }
#wx .wx-on-dark .wx-days li.wx-today .wx-d, #wx .wx-on-dark .wx-days li.wx-tmr .wx-d { color: #F8FAFC; }
#wx .wx-on-dark .wx-bar { background: rgba(255,255,255,.25); }
#wx .wx-on-dark .wx-bar i { background: #60A5FA; }
#wx .wx-on-dark .wx-pop { color: #93C5FD; }

/* 提醒氣泡 */
#wx .wx-tip { position: relative; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 18px; border-radius: 18px; background: var(--wx-bg, #EFF6FF); border: 1px solid var(--wx-line, #BFDBFE); color: var(--wx-ink, #1E3A8A); }
#wx .wx-tip::before { content: ""; position: absolute; top: -8px; left: var(--wx-tail, 40%); width: 14px; height: 14px; background: inherit; border-left: 1px solid var(--wx-line, #BFDBFE); border-top: 1px solid var(--wx-line, #BFDBFE); border-right: 0; border-bottom: 0; transform: rotate(45deg); }
#wx .wx-ic { width: 42px; height: 42px; border-radius: 21px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#wx .wx-tx { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#wx .wx-tt { font-size: 16px; font-weight: 800; }
#wx .wx-tm { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }

/* 「知道了」實體按鈕 */
#wx .wx-ackwrap { position: relative; display: flex; align-items: center; gap: 12px; }
#wx .wx-ack { position: relative; height: 54px; padding: 0 28px; border: 0; border-radius: 16px; background: linear-gradient(#3B82F6, #1D4ED8); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.15), 0 6px 0 #1E3A8A, 0 14px 20px rgba(30,58,138,.35); transition: transform .08s ease, box-shadow .08s ease; animation: wx-bob 2.4s ease-in-out infinite; }
#wx .wx-ack::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 42%; border-radius: 12px; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
#wx .wx-ack:hover { filter: brightness(1.06); }
#wx .wx-ack:active, #wx .wx-ack.wx-pressed { transform: translateY(5px); animation: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 0 #1E3A8A, 0 3px 6px rgba(30,58,138,.3); }
#wx .wx-ack:focus-visible { outline: 3px solid #93C5FD; outline-offset: 4px; }

/* 笑臉計數徽章 */
#wx .wx-cnt { display: none; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: #FEF3C7; border: 2px solid #FCD34D; color: #92400E; font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 #FCD34D; }
#wx .wx-cnt.wx-show { display: inline-flex; }
#wx .wx-cnt .wx-face { width: 22px; height: 22px; }
#wx .wx-cnt.wx-bump { animation: wx-bump .5s cubic-bezier(.3,1.6,.5,1); }
/* 徽章是全公司今天的總數：下方小字說明；API 無法取得時整組隱藏 */
#wx .wx-cntwrap { display: none; flex-direction: column; align-items: center; gap: 3px; }
#wx .wx-cntwrap.wx-show { display: inline-flex; }
#wx .wx-cntnote { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--wx-ink); opacity: .75; white-space: nowrap; }

/* 第四次起的提示視窗 */
#wx .wx-nag { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.45); padding: 24px; }
#wx .wx-nag .wx-box { width: min(380px, 100%); background: #fff; color: #0F172A; border-radius: 28px; padding: 30px 26px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 30px 60px -12px rgba(15,23,42,.4); animation: wx-shake .6s ease; }
#wx .wx-nag .wx-em { width: 72px; height: 72px; border-radius: 36px; background: #FEF3C7; display: flex; align-items: center; justify-content: center; }
#wx .wx-nag h2 { font-size: 26px; line-height: 1.25; font-weight: 900; color: #0F172A; }
#wx .wx-nag p { font-size: 15px; line-height: 1.5; color: #475569; }
#wx .wx-nag button { margin-top: 6px; height: 48px; padding: 0 26px; border-radius: 999px; border: 0; background: #111; color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
#wx .wx-nag button:focus-visible { outline: 3px solid #93C5FD; outline-offset: 3px; }

/* 全螢幕特效 */
#wx .wx-fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; overflow: hidden; pointer-events: none; animation: wx-veil 2.8s ease forwards; }
#wx .wx-fx .wx-p { position: absolute; top: 0; display: block; }
#wx .wx-fxcard { position: absolute; left: 50%; top: 50%; width: min(340px, 86vw); transform: translate(-50%, -50%); padding: 32px 28px; border-radius: 28px; background: rgba(255,255,255,.95); color: #0F172A; box-shadow: 0 24px 60px -12px rgba(15,23,42,.35); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: wx-pop 2.8s ease forwards; }
#wx .wx-ci { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; }
#wx .wx-c1 { font-size: 22px; font-weight: 900; }
#wx .wx-c2 { font-size: 15px; color: #334155; }

@keyframes wx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes wx-bump { 0% { transform: scale(.6) rotate(-8deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wx-shake { 0% { transform: scale(.8); } 30% { transform: scale(1.04) rotate(-3deg); } 45% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 75% { transform: rotate(1deg); } 100% { transform: none; } }
@keyframes wx-veil { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wx-pop { 0% { opacity: 0; transform: translate(-50%, -44%) scale(.86); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@keyframes wx-fall { from { transform: translateY(-12vh); } to { transform: translateY(112vh); } }
@keyframes wx-drift { 0% { transform: translate(0, -10vh); } 50% { transform: translate(4vw, 50vh); } 100% { transform: translate(-2vw, 110vh); } }
@keyframes wx-rise { from { transform: translateY(105vh); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-10vh); opacity: 0; } }
@keyframes wx-streak { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@keyframes wx-confetti { from { transform: translateY(-10vh) rotate(0); } to { transform: translateY(110vh) rotate(540deg); } }
@keyframes wx-fog { 0% { opacity: 0; transform: translateX(-6vw); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateX(6vw); } }

/* 減少動態效果：不播放動畫，只顯示關懷卡片 */
@media (prefers-reduced-motion: reduce) {
  #wx .wx-ack, #wx .wx-cnt.wx-bump, #wx .wx-nag .wx-box, #wx .wx-fx, #wx .wx-fxcard { animation: none; }
  #wx .wx-fx .wx-p { display: none; }
  #wx .wx-wk svg, #wx .wx-ack { transition: none; }
}

/* 手機寬度 */
@media (max-width: 720px) {
  #wx .wx-card { padding: 22px 18px; gap: 20px 16px; }
  #wx .wx-now { border-right: 0; padding-right: 0; flex: 1 1 100%; }
  #wx .wx-deg { font-size: 56px; }
  #wx .wx-days { grid-template-columns: repeat(7, minmax(36px, 1fr)); gap: 2px; }
  #wx .wx-tip::before { display: none; }
  #wx .wx-tip { padding: 14px; }
  #wx .wx-ackwrap { flex: 1 1 100%; }
}