/* ============================================================
   TECH LAYER（科技層）：前台共用儀表元件樣式（2026-11-04，國考作戰儀表版）
   色票：座艙底＝本站深綠 --ink／--ink2；儀表光＝品牌綠 --teal 提亮 #35D99A＋金 --amber 提亮 #E9C33C。
   行為在 assets/tech.js；組裝在 includes/tech.php＋layout.php。
   移除方式：layout.php 不再掛本檔與 tech.js、index.php 拿掉標記即全數退場。
   ============================================================ */
:root{--font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --tacc:#35D99A;--tacc2:#E9C33C;--ttxt:#D7F0E0;--tdim:#7FA893;--tline:rgba(53,217,154,.32);--tpanel:rgba(7,24,17,.55)}
.tech-mono{font-family:var(--font-mono)}

/* ---- ① 頁首下捲動進度軌 ---- */
#tech-rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:rgba(12,53,39,.18)}
#tech-rail-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tacc),var(--tacc2));box-shadow:0 0 8px rgba(53,217,154,.55)}
#tech-rail-pct{position:fixed;top:7px;right:10px;z-index:90;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ttxt);background:rgba(7,24,17,.78);border:1px solid var(--tline);border-radius:4px;padding:1px 6px}
@media (max-width:899px){#tech-rail-pct{display:none}}

/* ---- ③ 等寬字資料標籤 ---- */
.tag{font-family:var(--font-mono);letter-spacing:.05em}

/* ---- ④ 頁尾狀態燈＋雙時鐘（本站頁尾為淺底） ---- */
.tech-status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px;padding-top:14px;padding-right:54px;border-top:1px solid #2A565C;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:#9DB8B0}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;animation:tech-pulse 2.2s ease-out infinite}
@keyframes tech-pulse{0%{box-shadow:0 0 0 0 rgba(27,154,107,.45)}70%{box-shadow:0 0 0 8px rgba(27,154,107,0)}100%{box-shadow:0 0 0 0 rgba(27,154,107,0)}}
.tech-clocks{margin-left:auto;color:var(--teal-dark)}

/* ---- ② 藍圖格線區塊＋SEC 標籤＋十字標記（淺底：綠色細格線） ---- */
.tech-sec{position:relative;background-image:linear-gradient(rgba(27,154,107,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(27,154,107,.07) 1px,transparent 1px);background-size:30px 30px}
.tech-tag{position:absolute;top:-24px;left:max(20px,calc(50% - 560px));z-index:3;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:#F7F5F0;background:var(--ink);border-left:3px solid var(--tacc2);padding:2.5px 9px;pointer-events:none;white-space:nowrap}
.tech-cross{position:absolute;top:8px;right:max(20px,calc(50% - 560px));z-index:3;font-family:var(--font-mono);font-size:15px;line-height:1;color:rgba(20,122,84,.5);pointer-events:none}
.tech-sec.inset-tag .tech-tag{top:auto;bottom:10px;right:12px;left:auto}
.tech-sec.inset-tag .tech-cross{top:8px;right:12px}

/* ---- B 首頁 hero 科技層 ---- */
.hero .wrap{position:relative;z-index:2}
#tech-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(4,15,10,.45) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.hud-c{position:absolute;width:22px;height:22px;z-index:3;pointer-events:none;border:0 solid rgba(233,195,60,.85)}
.hud-c.tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.hud-c.tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.hud-c.bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.hud-c.br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}
/* ⑥ 右上即時讀數（桌機置頂右，避免壓住 hero 底部統計列） */
.hero-readout{position:absolute;right:16px;top:16px;z-index:3;font-family:var(--font-mono);background:var(--tpanel);border:1px solid var(--tline);border-radius:8px;padding:8px 12px;backdrop-filter:blur(3px);min-width:230px}
.hr-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:1.5px 0}
.hr-k{font-size:10.5px;letter-spacing:.16em;color:var(--tdim)}
.hr-v{font-size:12.5px;color:var(--ttxt)}
.hr-v b{color:var(--tacc2);font-weight:700}
@media (max-width:899px){
  .hero-readout{position:static;margin:16px 20px 0;min-width:0;display:flex;flex-wrap:wrap;gap:4px 18px}
  .hr-row{gap:8px}
}
/* ---- ⑩ 開機自檢 overlay ---- */
.tech-boot{position:fixed;inset:0;z-index:200;background:#06150E;display:flex;align-items:center;justify-content:center;animation:tb-autohide .45s ease 2.35s forwards;cursor:pointer}
@keyframes tb-autohide{to{opacity:0;visibility:hidden}}
.tech-boot.out{opacity:0;transition:opacity .3s ease;pointer-events:none}
.tech-boot-box{width:min(430px,88vw);border:1px solid #2F6B7E;background:#0A241A;padding:22px 24px;color:var(--ttxt);font-family:var(--font-mono);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.tech-boot-head{font-size:13px;letter-spacing:.18em;color:#F7F5F0;border-bottom:1px solid #2F6B7E;padding-bottom:10px;margin-bottom:12px}
.tech-boot-head span{color:var(--tacc)}
.tech-boot-lines{list-style:none;margin:0;padding:0}
.tech-boot-lines li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;padding:3.5px 0;opacity:0;animation:tb-line .3s ease forwards;animation-delay:var(--d,0s)}
@keyframes tb-line{to{opacity:1}}
.tb-k{letter-spacing:.1em;color:var(--tdim)}
.tb-dots{flex:1;border-bottom:1px dotted rgba(127,168,147,.45);transform:translateY(-3px)}
.tech-boot-lines b{color:var(--tacc2);font-weight:700}
.tb-tail{font-size:10.5px;letter-spacing:.12em;color:var(--tdim)}
.tech-boot-bar{height:4px;background:#14402C;margin:14px 0 10px}
.tech-boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tacc),var(--tacc2));animation:tb-bar 1.25s ease .1s forwards}
@keyframes tb-bar{to{width:100%}}
.tech-boot-done{font-size:12.5px;letter-spacing:.22em;color:var(--tacc2);opacity:0;animation:tb-line .3s ease 1.4s forwards}
.tech-boot-skip{margin-top:10px;font-size:10px;letter-spacing:.1em;color:#68707D}

/* ---- D 卡片掃光＋對角框＋微傾斜 ---- */
.tech-shine{position:relative;overflow:hidden;--mx:50%;--my:50%}
.tech-shine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(53,217,154,.16),transparent 65%)}
.tech-shine:hover::after{opacity:1}
.tech-hud{--hudc:rgba(20,122,84,.45);background-image:
  linear-gradient(var(--hudc),var(--hudc)),linear-gradient(var(--hudc),var(--hudc)),
  linear-gradient(var(--hudc),var(--hudc)),linear-gradient(var(--hudc),var(--hudc));
  background-size:14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:left 8px top 8px,left 8px top 8px,right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat}

/* ---- 減少動態偏好：全部靜止 ---- */
@media (prefers-reduced-motion: reduce){
  .tech-dot{animation:none}
  .tech-boot{display:none !important}
  .tech-boot-lines li,.tech-boot-done{animation:none;opacity:1}
  .tech-boot-bar i{animation:none;width:100%}
  .tech-shine::after{display:none}
}

/* 捲軸溝槽預留：內容高度變化時捲軸不消失重現，避免版面寬度跳動。 */
html{scrollbar-gutter:stable}