/* issue 249 場景 cloudcoffer-utds-joint：UTDS 聯防自動化 IP 阻斷互動圖（inline SVG，不是圖片），放在內文。元件自己是深色面板。
   顏色只讀官網 token：品牌強調色 --accent-dark／--accent-on（依頁面品牌色組，不寫死色碼）、TLS 線＝--arch-sky、警示與阻斷＝--arch-coral，底與字用 --deep／--deeper／--paper／--muted-on-dark／--arch-node。
   沒有 JS 或減少動態時直接是完整狀態（UTDS 偵測到異常、Firewall 已封鎖、第二次攻擊被擋下）；淡化、轉場、脈動與「分析中」字樣全部在檔案最後的 no-preference 區塊內，由 JS 加在根節點的屬性啟動。
   寬（62rem 以上）與窄兩份 SVG 依視窗寬度切換。節點文字大小由伺服器依字寬自動縮小，CSS 不設 SVG 字級。 */
.page-blocks .uj { --uj-gold: var(--accent-dark); --uj-gold-soft: color-mix(in srgb, var(--accent-dark) 70%, var(--paper)); --uj-on-gold: var(--accent-on); --uj-blue: var(--arch-sky); --uj-pale: color-mix(in srgb, var(--paper) 85%, var(--arch-sky)); --uj-grey: color-mix(in srgb, var(--muted-on-dark) 60%, var(--deeper)); --uj-red: var(--arch-coral); --uj-red-soft: color-mix(in srgb, var(--arch-coral) 45%, var(--paper)); --uj-node: var(--arch-node);
  position: relative; min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); border-radius: 1.5rem; background: linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--paper); text-align: left; overflow: hidden; }
.page-blocks .uj > * { min-width: 0; }
.page-blocks .uj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 步驟膠囊 */
.page-blocks .uj-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: uj-n; }
.page-blocks .uj-step { counter-increment: uj-n; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; border: 1.5px solid color-mix(in srgb, var(--uj-gold) 60%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--uj-gold) 10%, transparent); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.page-blocks .uj-step::before { content: counter(uj-n); display: inline-grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--uj-gold); color: var(--uj-on-gold); font-size: .85rem; font-weight: 800; }
.page-blocks .uj-step--atk { border-color: color-mix(in srgb, var(--uj-red) 70%, transparent); background: color-mix(in srgb, var(--uj-red) 12%, transparent); }
.page-blocks .uj-step--atk::before { background: var(--uj-red); color: var(--deeper); }
.page-blocks .uj[data-uj-off] .uj-step--fb { opacity: .35; }

/* 按鈕：沒有 JS 時整列 hidden */
.page-blocks .uj-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.page-blocks .uj-tools[hidden] { display: none; }
.page-blocks .uj-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1.1rem; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, transparent); color: var(--paper); font-size: .9375rem; line-height: 1.3; cursor: pointer; }
.page-blocks .uj-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .uj-btn[aria-pressed="true"] { border-color: var(--uj-gold); background: color-mix(in srgb, var(--uj-gold) 26%, transparent); }
.page-blocks .uj-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* 舞台 */
.page-blocks .uj-stage { padding: .75rem; border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); border-radius: 1.25rem; background: color-mix(in srgb, var(--paper) 4%, transparent); }
.page-blocks .uj-svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-blocks .uj-svg--v { display: none; max-width: 24rem; margin: 0 auto; }
.page-blocks .uj-route, .page-blocks .uj-tap-route, .page-blocks .uj-sys-route, .page-blocks .uj-fb-route { fill: none; stroke: none; }
.page-blocks .uj-node rect, .page-blocks .uj-box { fill: var(--uj-node); stroke: color-mix(in srgb, var(--paper) 40%, transparent); stroke-width: 1.6; }
.page-blocks .uj-node use, .page-blocks .uj-utds use { fill: none; stroke: var(--uj-pale); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .uj-node--dec rect { stroke: var(--uj-gold); stroke-width: 2; }
.page-blocks .uj-box { stroke: var(--uj-gold); stroke-width: 2; }
.page-blocks .uj-utds use { stroke: var(--uj-gold-soft); }
.page-blocks .uj-siem rect { stroke: var(--uj-gold); stroke-width: 2; }
.page-blocks .uj-siem use { stroke: var(--uj-gold-soft); }
.page-blocks .uj-nl, .page-blocks .uj-ns, .page-blocks .uj-tl, .page-blocks .uj-bl { font-family: inherit; text-anchor: middle; }
.page-blocks .uj-nl { fill: var(--paper); font-weight: 700; }
.page-blocks .uj-ns { fill: var(--muted-on-dark); font-weight: 500; }
.page-blocks .uj-ns--a { fill: var(--uj-gold-soft); font-weight: 700; }
.page-blocks .uj-ns--r { fill: var(--uj-red-soft); font-weight: 700; }
.page-blocks .uj-tl { fill: var(--uj-gold-soft); font-weight: 600; text-anchor: start; }
.page-blocks .uj-tl--c { text-anchor: middle; }
.page-blocks .uj-tl--e { text-anchor: end; }
.page-blocks .uj-bl { fill: var(--uj-red-soft); font-weight: 700; text-anchor: start; }
.page-blocks .uj-bl--c { text-anchor: middle; }
.page-blocks .uj-mk--tls { fill: var(--uj-blue); }
.page-blocks .uj-mk--clr { fill: var(--uj-pale); }
.page-blocks .uj-mk--tap { fill: var(--uj-gold); }
.page-blocks .uj-mk--blk { fill: var(--uj-red); }
.page-blocks .uj-mk--off { fill: var(--uj-grey); }
.page-blocks .uj-line { fill: none; stroke-linecap: round; }
.page-blocks .uj-line--tls { stroke: var(--uj-blue); stroke-width: 7; marker-end: url(#uj-ar-tls); }
.page-blocks .uj-line--clr { stroke: var(--uj-pale); stroke-width: 4; stroke-dasharray: .1 9; marker-end: url(#uj-ar-clr); }
.page-blocks .uj-line--neu { stroke: var(--uj-pale); stroke-width: 3; marker-end: url(#uj-ar-clr); }
.page-blocks .uj-badge circle { fill: var(--uj-node); stroke-width: 2; }
.page-blocks .uj-badge use { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .uj-badge--tls circle, .page-blocks .uj-badge--tls use { stroke: var(--uj-blue); }
.page-blocks .uj-badge--clr circle, .page-blocks .uj-badge--clr use { stroke: var(--uj-pale); }
.page-blocks .uj-dec circle { stroke: var(--uj-gold); }
.page-blocks .uj-dec use { stroke: var(--uj-gold-soft); }
.page-blocks .uj-tap-line { fill: none; stroke: var(--uj-gold); stroke-width: 3.5; stroke-dasharray: 9 7; stroke-linecap: round; marker-end: url(#uj-ar-tap); }
.page-blocks .uj-block-line { fill: none; stroke: var(--uj-red); stroke-width: 3.5; stroke-dasharray: 9 7; stroke-linecap: round; marker-end: url(#uj-ar-blk); }
.page-blocks .uj-x circle { fill: var(--uj-node); stroke: var(--uj-red); stroke-width: 2; }
.page-blocks .uj-x path { fill: none; stroke: var(--uj-red); stroke-width: 2.8; stroke-linecap: round; }
.page-blocks .uj-ring { fill: none; stroke: var(--uj-red); stroke-width: 3; pointer-events: none; }
.page-blocks .uj-utds rect.uj-pulse { fill: none; stroke: var(--uj-red); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* 完成狀態（沒有動態、沒有 JS）：UTDS 亮紅、Firewall 已封鎖、第二次攻擊被擋；「分析中」只在播放時出現 */
.page-blocks .uj-st-idle { display: none; }
.page-blocks .uj-appring { opacity: 0; }
.page-blocks .uj[data-uj-off] .uj-appring { opacity: 1; }
.page-blocks .uj[data-uj-off] .uj-ondef { display: none; }
/* 關閉聯防：UTDS → SIEM → Firewall 變灰 */
.page-blocks .uj[data-uj-off] .uj-offdim { opacity: .55; }
.page-blocks .uj[data-uj-off] .uj-sys-line, .page-blocks .uj[data-uj-off] .uj-fb-line { stroke: var(--uj-grey); marker-end: url(#uj-ar-off); }
.page-blocks .uj[data-uj-off] .uj-sys .uj-tl, .page-blocks .uj[data-uj-off] .uj-fb .uj-bl { fill: var(--uj-grey); }
.page-blocks .uj[data-uj-off] .uj-siem rect, .page-blocks .uj[data-uj-off] .uj-siem use { stroke: var(--uj-grey); }

/* 光點 */
.page-blocks .uj-dot { stroke-width: 3; }
.page-blocks .uj-dot--atk { fill: var(--uj-red-soft); stroke: var(--uj-red); filter: drop-shadow(0 0 5px var(--uj-red)); }
.page-blocks .uj-dot--tap { fill: var(--uj-gold-soft); stroke: var(--uj-gold); filter: drop-shadow(0 0 4px var(--uj-gold)); }

.page-blocks .uj-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted-on-dark); font-size: .9rem; line-height: 1.5; }
.page-blocks .uj-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.page-blocks .uj-lg { flex: none; width: 2.75rem; height: .9rem; overflow: visible; }
.page-blocks .uj-lg .uj-line, .page-blocks .uj-lg .uj-tap-line, .page-blocks .uj-lg .uj-block-line { marker-end: none; }
.page-blocks .uj-dotkey { flex: none; width: .9rem; height: .9rem; border: 2.5px solid var(--uj-red); border-radius: 50%; background: var(--uj-red-soft); }
.page-blocks .uj-status { margin: 1rem 0 0; min-height: 1.6em; color: var(--paper); font-weight: 600; line-height: 1.6; }
.page-blocks .uj-feat { margin: 1rem 0 0; padding: 1rem 1.1rem; border: 1.5px solid color-mix(in srgb, var(--uj-gold) 45%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--uj-gold) 8%, transparent); }
.page-blocks .uj-feat-k { margin: 0 0 .5rem; color: var(--uj-gold-soft); font-weight: 800; }
.page-blocks .uj-feat-l { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; }
.page-blocks .uj-feat-l li { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--paper) 8%, transparent); font-weight: 600; line-height: 1.5; }
.page-blocks .uj-feat-l li::before { content: ""; flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--uj-gold); }

@media (max-width: 62rem) {
  .page-blocks .uj-status { min-height: 4.8em; }
  .page-blocks .uj-svg--h { display: none; }
  .page-blocks .uj-svg--v { display: block; }
}
@media (max-width: 30rem) {
  .page-blocks .uj { padding: 1rem .75rem; border-radius: 1rem; }
  .page-blocks .uj-stage { padding: .5rem .25rem; }
  .page-blocks .uj-step { font-size: .88rem; }
}

/* 動態：只在允許動態時才淡化尚未走到的項目、轉場、閃框與脈動；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] .uj-st-idle { display: inline; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] .uj-st-idle.uj-is-gone { display: none; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] [data-uj-at]:not(.uj-is-shown) { opacity: .25; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] .uj-pop[data-uj-at]:not(.uj-is-shown) { opacity: 0; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] .uj-step:not(.uj-is-shown) { opacity: .35; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] :is([data-uj-at], .uj-step) { transition: opacity .45s ease; }
  html:not([data-motion="off"]) .page-blocks .uj[data-uj-anim] .uj-appring.uj-is-flash { animation: uj-flash 1.2s ease-out 1; transition: none; }
  html:not([data-motion="off"]) .page-blocks .uj-utds.uj-is-hit rect.uj-pulse { animation: uj-pulse .9s ease-out 1; }
  @keyframes uj-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
  @keyframes uj-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
}
/* issue 371：按鈕用 all: unset，補回 position 讓「可以點」泡泡與圓圈定位在鈕上；泡泡放在鈕下方（箭頭朝上），避免蓋住鈕上方的提示行，
   泡泡存在時於鈕列下方留出空間，第一次操作移除泡泡時一併收回。 */
.page-blocks .uj-btn.cfh-host { position: relative; }
.page-blocks .uj-btn .cfh-tip { bottom: auto; top: calc(100% + .625rem); }
.page-blocks .uj-btn .cfh-tip::after { top: auto; bottom: 100%; border-width: 0 .4375rem .4375rem; border-top-color: transparent; border-bottom-color: var(--accent-dark); }
.page-blocks .uj-tools:has(.cfh-tip) { margin-bottom: 3.25rem; }
@media (prefers-reduced-motion: no-preference) { .page-blocks .uj-tools { transition: margin-bottom .2s var(--ease); } }