/* TechPlain 淺色主題（tp-light.css）v1｜2026-10-31
   疊在 tp-web.css 之後載入就變淺色版；拿掉這行 <link> 就回到深色。
   10-31 William：「換成一個淺色版面好了，不一定都要深深的。」
   對比實算（WCAG）：主文字 #0D1743 對白卡 17.2:1；t2 10.2:1；t3 5.5:1；t4 4.5:1；
   連結藍 #0B5CAB 對白卡 6.7:1；按鈕 #0078D4 配白字 4.53:1；鋼藍 #2A93E4 只做非文字（3.3:1）。
   Logo 規則：品牌只有白色字標，淺底照設計系統改用 Archivo 粗體字呈現＋深藍四角星；
   頁尾保留一塊深夜藍收尾，白色字標只住在那裡。 */

:root {
  --tp-ink: #F4F7FB;                         /* 底色改極淡藍白 */
  --tp-s1: #FFFFFF;
  --tp-s2: rgba(255, 255, 255, 0.92);
  --tp-s3: rgba(255, 255, 255, 0.5);
  --tp-s4: rgba(13, 23, 67, 0.04);
  --tp-t1: #0D1743;
  --tp-t2: #33415C;
  --tp-t3: #5A6A85;
  --tp-t4: #68788F;
  --tp-text: #0D1743;
  --tp-bright: #0B5CAB;                      /* 文字用的藍（小標、連結、時間） */
  --tp-glass-fill: rgba(255, 255, 255, 0.66);
  --tp-glass-border: rgba(13, 23, 67, 0.10);
  --tp-glass-border-top: rgba(255, 255, 255, 0.95);
  --tp-hairline: rgba(13, 23, 67, 0.10);
  --tp-hairline-strong: rgba(13, 23, 67, 0.16);
  --tp-glow-press: 0 0 24px -8px rgba(42, 147, 228, 0.35);
  --tp-shadow-deep: 0 16px 40px rgba(13, 23, 67, 0.12);
}

/* 底：白到淡藍的斜向場，右下一點鋼藍光 */
body::before {
  background:
    radial-gradient(70% 55% at 90% 104%, rgba(42, 147, 228, 0.16) 0%, rgba(42, 147, 228, 0) 62%),
    radial-gradient(70% 50% at 2% -6%, rgba(18, 26, 84, 0.07) 0%, rgba(18, 26, 84, 0) 58%),
    linear-gradient(115deg, #FFFFFF 0%, #EFF4FA 62%);
}
/* 噪點改相乘、更淡 */
body::after { mix-blend-mode: multiply; opacity: 0.045; }

/* 文字選到時的底色 */
::selection { background: rgba(42, 147, 228, 0.25); }

/* 頁首：白玻璃感的實色 */
.tp-header.is-scrolled { background: rgba(255, 255, 255, 0.88); border-bottom-color: var(--tp-hairline); }
.tp-nav a { color: var(--tp-t2); }
.tp-nav a:hover { color: var(--tp-t1); }

/* 文字字標（淺底沒有深色 logo，用字呈現） */
.tp-logo-text { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.tp-logo-text img { height: 20px; width: auto; display: block; }
.tp-logo-text .logo-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px; color: var(--tp-t1); letter-spacing: -0.01em; }
.tp-logo-text .logo-sub { font-size: 14px; font-weight: 700; color: var(--tp-t3); padding-left: 10px; border-left: 1px solid var(--tp-hairline); }

/* 支柱記號：幽靈住進深藍小圓底（它是為深底畫的） */
.tp-pillar { color: var(--tp-bright); }
.tp-pillar img { width: 30px; height: 30px; padding: 4px; box-sizing: border-box; background: #0D1743; border-radius: 50%; }

/* 按鈕 */
.tp-btn { box-shadow: 0 8px 22px -10px rgba(0, 120, 212, 0.55); }
.tp-btn::before { background: radial-gradient(60% 100% at 50% 100%, rgba(42, 147, 228, 0.35), rgba(42, 147, 228, 0) 70%); }
.tp-btn-ghost { color: var(--tp-t2); }
.tp-btn-ghost:hover { color: var(--tp-t1); }

/* 卡片材質：白卡＋藍灰柔影 */
.tp-card {
  background: #FFFFFF;
  border: 1px solid rgba(13, 23, 67, 0.08);
  border-top-color: rgba(255, 255, 255, 1);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 30px rgba(13, 23, 67, 0.08);
}
.tp-glass {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(13, 23, 67, 0.10);
  border-top-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 40px rgba(13, 23, 67, 0.12);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tp-glass {
    background: rgba(255, 255, 255, 0.60);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
  @media (max-width: 767px) {
    .tp-glass { -webkit-backdrop-filter: blur(9px) saturate(140%); backdrop-filter: blur(9px) saturate(140%); }
  }
}
@media (hover: hover) and (pointer: fine) {
  .tp-lift:hover { border-color: rgba(13, 23, 67, 0.18); }
}
.tp-spot::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(42, 147, 228, 0.10), transparent 70%); }

/* 重點框 */
.tp-key { background: rgba(42, 147, 228, 0.08); }

/* 四角星換深藍版 */
.tp-spark-list > li::before { background-image: url("spark-navy.png"); }

/* 徽章與 chips */
.tp-pill { background: rgba(255, 255, 255, 0.8); border-color: rgba(11, 92, 171, 0.35); color: var(--tp-t1); }
.tp-chip { background: #FFFFFF; color: var(--tp-t2); }
.tp-logochip { background: #F2F6FB; border-color: rgba(13, 23, 67, 0.08); }

/* 氛圍層 */
.tp-beams {
  background:
    linear-gradient(118deg, transparent 30%, rgba(42, 147, 228, 0.12) 42%, rgba(51, 198, 255, 0.07) 50%, transparent 62%),
    linear-gradient(118deg, transparent 55%, rgba(18, 26, 84, 0.06) 68%, transparent 86%);
}
.tp-glow { background: radial-gradient(42% 46% at 82% 92%, rgba(42, 147, 228, 0.22) 0%, rgba(42, 147, 228, 0.08) 42%, rgba(42, 147, 228, 0) 68%); }
.tp-stars span { background: #2A93E4; opacity: 0.4; }

/* 手風琴 */
details.tp-acc .tp-acc-inner p { color: var(--tp-t2); }

/* 報名卡：白底＋藍漸層描邊 */
.tp-signup {
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    conic-gradient(from var(--tp-angle), rgba(11, 92, 171, 0.75), rgba(42, 147, 228, 0.45), rgba(51, 198, 255, 0.30), rgba(11, 92, 171, 0.75)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 40px rgba(13, 23, 67, 0.12);
}

/* 貼底報名條與提示列 */
.tp-dock { background: rgba(255, 255, 255, 0.97); border-top: 1px solid rgba(13, 23, 67, 0.12); box-shadow: 0 -8px 24px rgba(13, 23, 67, 0.10); }
.tp-dock .tp-dock-info { color: var(--tp-t3); }
.tp-dock .tp-dock-info b { color: var(--tp-t1); }
.tp-inapp { background: rgba(255, 255, 255, 0.96); color: var(--tp-t2); border-bottom: 1px solid var(--tp-hairline); }
.tp-inapp a { color: var(--tp-bright); }

/* 時程 */
.tp-timeline .key::before { background: var(--tp-bright); }

/* 頁尾：保留一塊深夜藍收尾，白色字標住這裡 */
.footer { background: linear-gradient(115deg, #0D1743 0%, #060121 70%); border-top: 0; }
.footer, .footer p { color: rgba(235, 242, 255, 0.78); }
.footer a { color: #FFFFFF; }
.footer .footer-brand span { color: rgba(235, 242, 255, 0.6); border-left-color: rgba(255, 255, 255, 0.16); }