/* TechPlain 網站品牌樣式（tp-web.css）v2｜2026-10-31
   v2 依據：brand-web\網站設計研究_2026-10-31.md（10 站實地筆記＋8 角度研究＋設計總監彙整）。
   核心改變：四階表面與文字色階、毛玻璃正式配方（近實色打底＋@supports 疊真模糊）、
   光暈紀律（全站兩顆、呼吸只動 opacity/scale）、噪點防色帶、動效全部鎖 html.js 與
   prefers-reduced-motion: no-preference、sticky 元素一律不掛 backdrop-filter。
   字型（各頁 <head> 載入）：Archivo 500/700＋台北黑體 400/700（jsDelivr 切片）。 */

/* 自家代管的中文字型子集：台北黑體（OFL）裁成頁面用字、改名 TP Sans（約 147KB×2）。
   來源 TTF 在 anim\fonts\；重切腳本在對話暫存 subset_font.py；加新頁面文字要重切。 */
@font-face { font-family: 'TP Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/TPSans-Regular.woff2") format("woff2"); }
@font-face { font-family: 'TP Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/TPSans-Bold.woff2") format("woff2"); }

:root {
  /* 底與表面（每階亮一點點，深度靠色階不靠陰影） */
  --tp-ink: #060121;
  --tp-s1: #0A0C36;                        /* 區塊底 */
  --tp-s2: rgba(13, 8, 46, 0.90);          /* 近實色卡（毛玻璃的退場底） */
  --tp-s3: rgba(255, 255, 255, 0.05);      /* 疊在卡上的提亮層 */
  --tp-s4: rgba(255, 255, 255, 0.09);      /* hover 提亮 */
  /* 文字四階（最差底＝提亮後的卡面實算：白 17.5:1、t2 11.6:1、t3 6.0:1、t4 5.0:1） */
  --tp-t1: #FFFFFF;
  --tp-t2: #C9D4E3;
  --tp-t3: #8A97AD;
  --tp-t4: #7A8AA5;
  --tp-text: #F7F8FA;
  /* 品牌藍家族＋幽靈冰青（點綴第三色，取自幽靈 #33C6FF／#8EE3FF） */
  --tp-electric: #0078D4;   /* 實心按鈕底，白字 4.5:1 */
  --tp-steel: #2A93E4;      /* 重點框邊、光暈、時程圓點 */
  --tp-bright: #63B6F7;     /* 小標、連結、數字 */
  --tp-ice: #8EE3FF;        /* 冰青：漸層尾端、星點、徽章描邊 */
  --tp-ice-deep: #33C6FF;
  /* 毛玻璃 */
  --tp-glass-fill: rgba(255, 255, 255, 0.06);
  --tp-glass-border: rgba(255, 255, 255, 0.10);
  --tp-glass-border-top: rgba(255, 255, 255, 0.22);
  --tp-hairline: rgba(255, 255, 255, 0.08);
  --tp-hairline-strong: rgba(255, 255, 255, 0.12);
  /* 光 */
  --tp-glow-press: 0 0 24px -6px rgba(42, 147, 228, 0.55);
  --tp-shadow-deep: 0 16px 40px rgba(2, 6, 23, 0.5);
  /* 字 */
  --tp-font: 'Archivo', 'TP Sans', 'Taipei Sans TC', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --tp-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* 形 */
  --tp-r-sm: 12px; --tp-r-md: 16px; --tp-r-lg: 24px; --tp-r-pill: 999px;
  --tp-gutter: 20px;
  --tp-max: 1200px;
  --tp-read: 720px;
  /* 動 */
  --tp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tp-fast: 150ms; --tp-base: 280ms;
}

/* ── 基礎 ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--tp-ink);
  color: var(--tp-text);
  font-family: var(--tp-font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}
/* 招牌底：整頁一張連續深底，光暈只在 hero 與報名區各一顆（元素做，不放這裡） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 65% at 4% -4%, rgba(18, 26, 84, 0.95) 0%, rgba(18, 26, 84, 0) 60%),
    linear-gradient(115deg, #0A0C36 0%, #060121 62%);
}
/* 噪點蓋全頁（含卡片與文字上方 3.5%），手機 OLED 不出色帶 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999;
  pointer-events: none;
  background: url("noise.png") repeat;
  background-size: 160px 160px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}
a { color: var(--tp-bright); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tp-bright); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; }
.tp-wrap { max-width: var(--tp-max); margin: 0 auto; padding: 0 var(--tp-gutter); }
.tp-read { max-width: var(--tp-read); }

/* ── 字級 ─────────────────────────────────────────── */
.tp-h1 { margin: 0; font-size: clamp(34px, 5vw + 14px, 60px); line-height: 1.2; font-weight: 700; }
.tp-lead { margin: 16px 0 0; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.6; font-weight: 400; color: var(--tp-t2); }
.tp-h2 { margin: 0 0 10px; font-size: clamp(26px, 6.2vw, 36px); line-height: 1.3; font-weight: 700; }
.tp-h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.45; font-weight: 700; }
.tp-eyebrow { display: block; margin: 0 0 10px; color: var(--tp-bright); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.tp-sub { margin: 0 0 22px; color: var(--tp-t2); }
.tp-small { font-size: 15px; }
.tp-dim { color: var(--tp-t3); }
.tp-num { font-family: 'Archivo', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 區塊語法：eyebrow＋H2＋一句副標 ─────────────────── */
.tp-section { padding-top: 72px; }
@media (min-width: 768px) { .tp-section { padding-top: 96px; } }

/* ── 頁首（sticky 不掛 blur：透明起手，捲動轉實色） ────── */
.tp-header {
  position: sticky; top: 0; z-index: 30;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--tp-base) var(--tp-ease), border-color var(--tp-base) var(--tp-ease);
}
.tp-header.is-scrolled { background: rgba(6, 1, 33, 0.88); border-bottom-color: var(--tp-hairline); }
.tp-header .tp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.tp-logo { display: inline-flex; align-items: center; min-height: 44px; }
.tp-logo img { height: 28px; width: auto; display: block; }
.tp-nav { display: none; align-items: center; gap: 22px; }
.tp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--tp-t2); text-decoration: none; font-size: 15px; font-weight: 500; }
.tp-nav a:hover { color: var(--tp-t1); }
.tp-header-cta { display: inline-flex; }
html.js .tp-header-cta { opacity: 0; visibility: hidden; transition: opacity var(--tp-base) var(--tp-ease), visibility 0s linear var(--tp-base); }
html.js .tp-header.is-scrolled .tp-header-cta { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 900px) { .tp-nav { display: inline-flex; } }

/* 頂部報名進度條（有支援才出現，純裝飾） */
.tp-progress { display: none; }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    .tp-progress {
      display: block; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 31;
      background: linear-gradient(90deg, var(--tp-electric), var(--tp-bright), var(--tp-ice));
      transform-origin: 0 50%; transform: scaleX(0);
      animation: tp-grow 1s linear forwards;
      animation-timeline: scroll();
      animation-range: 0% 100%;
    }
  }
}
@keyframes tp-grow { to { transform: scaleX(1); } }

/* ── 按鈕：膠囊、微軟藍；光預先畫在 ::before，hover 只動 opacity ── */
.tp-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 34px;
  border-radius: var(--tp-r-pill); border: 0;
  background: var(--tp-electric); color: #FFFFFF;
  font-family: var(--tp-font); font-weight: 700; font-size: 18px; text-decoration: none;
  cursor: pointer;
}
.tp-btn::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 100%, rgba(99, 182, 247, 0.55), rgba(99, 182, 247, 0) 70%);
  opacity: 0; transition: opacity var(--tp-fast) var(--tp-ease);
}
.tp-btn:active { transform: scale(0.98); }
.tp-btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.tp-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--tp-t2); font-weight: 500; text-decoration: none; font-size: 16px;
}
.tp-btn-ghost:hover { color: var(--tp-t1); }
@media (hover: hover) and (pointer: fine) {
  .tp-btn:hover::before { opacity: 1; }
  .tp-btn { transition: transform 80ms var(--tp-ease); }
}

/* ── 卡片材質 ─────────────────────────────────────── */
/* 近實色卡（預設；清單、FAQ 這類大量出現的用它，不吃 GPU） */
.tp-card {
  background: linear-gradient(var(--tp-s3), var(--tp-s3)), var(--tp-s2);
  border: 1px solid var(--tp-glass-border);
  border-top-color: var(--tp-glass-border-top);
  border-radius: var(--tp-r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--tp-shadow-deep);
}
/* 毛玻璃卡（主角用：hero 示範組、報名卡、講師卡；同視口最多 3 塊） */
.tp-glass {
  background: linear-gradient(var(--tp-glass-fill), var(--tp-glass-fill)), var(--tp-s2);
  border: 1px solid var(--tp-glass-border);
  border-top-color: var(--tp-glass-border-top);
  border-radius: var(--tp-r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--tp-shadow-deep);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tp-glass {
    background: linear-gradient(var(--tp-glass-fill), var(--tp-glass-fill)), rgba(6, 1, 33, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  @media (max-width: 767px) {
    .tp-glass { -webkit-backdrop-filter: blur(9px) saturate(150%); backdrop-filter: blur(9px) saturate(150%); }
  }
}
/* 卡片 hover（桌機細游標限定；邊框亮、微浮起） */
@media (hover: hover) and (pointer: fine) {
  .tp-card, .tp-glass { transition: border-color var(--tp-fast) var(--tp-ease), transform var(--tp-fast) var(--tp-ease); }
  .tp-lift:hover { border-color: rgba(255, 255, 255, 0.20); transform: translateY(-2px); }
}
/* 聚光卡：滑鼠跟隨高光（::after 只動 opacity；手機不啟用，靜態也成立） */
.tp-spot { position: relative; overflow: hidden; }
.tp-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 182, 247, 0.12), transparent 70%);
  opacity: 0; transition: opacity 0.3s var(--tp-ease);
}
@media (hover: hover) and (pointer: fine) { .tp-spot:hover::after { opacity: 1; } }

/* ── 重點框（支柱藍邊＋→，一頁只用在最重要的一兩句） ───── */
.tp-key {
  display: flex; gap: 12px; align-items: baseline;
  border: 2px solid var(--tp-steel);
  border-radius: var(--tp-r-md);
  background: rgba(13, 23, 67, 0.55);
  box-shadow: var(--tp-glow-press);
  padding: 16px 20px;
  font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; line-height: 1.5;
}
.tp-key::before { content: "→"; color: var(--tp-bright); font-family: 'Archivo', sans-serif; }

/* ── 四角星清單（品牌記號當 bullet） ────────────────── */
.tp-spark-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tp-spark-list > li { position: relative; padding-left: 28px; }
.tp-spark-list > li::before {
  content: ""; position: absolute; left: 4px; top: 0.42em;
  width: 13px; height: 18px;
  background: url("spark.png") no-repeat center / contain;
}

/* ── 徽章與 chips ────────────────────────────────── */
.tp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 16px;
  border-radius: var(--tp-r-pill);
  border: 1px solid rgba(99, 182, 247, 0.40);
  background: rgba(13, 23, 67, 0.55);
  font-size: 14px; font-weight: 700; color: var(--tp-t1);
}
.tp-pill img { height: 15px; width: auto; }
.tp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 14px;
  border-radius: var(--tp-r-pill);
  border: 1px solid var(--tp-hairline-strong);
  background: var(--tp-s2);
  font-size: 14px; color: var(--tp-t2);
}
.tp-logochip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--tp-hairline-strong);
}
.tp-logochip img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* ── 支柱記號（幽靈＋名稱，跟 IG 頁首一樣） ───────────── */
.tp-pillar { display: inline-flex; align-items: center; gap: 8px; color: var(--tp-bright); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; }
.tp-pillar img { width: 24px; height: auto; display: block; }

/* ── 氛圍層：光束、呼吸光、星點（只在 hero 與報名區） ───── */
.tp-stage { position: relative; overflow: clip; }
.tp-beams, .tp-glow, .tp-stars { position: absolute; inset: 0; pointer-events: none; }
.tp-beams {
  background:
    linear-gradient(118deg, transparent 30%, rgba(42, 147, 228, 0.20) 42%, rgba(51, 198, 255, 0.10) 50%, transparent 62%),
    linear-gradient(118deg, transparent 55%, rgba(18, 62, 107, 0.45) 68%, transparent 86%);
}
.tp-glow {
  background: radial-gradient(42% 46% at 82% 92%, rgba(32, 116, 182, 0.42) 0%, rgba(32, 116, 182, 0.16) 42%, rgba(32, 116, 182, 0) 68%);
  opacity: 0.7;
}
.tp-stars span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--tp-ice);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .tp-glow { animation: tp-breathe 7s var(--tp-ease) infinite alternate; }
  html.js .tp-stars span { animation: tp-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate; }
}
@keyframes tp-breathe { from { opacity: 0.55; transform: scale(1); } to { opacity: 0.85; transform: scale(1.06); } }
@keyframes tp-twinkle { from { opacity: 0.2; } to { opacity: 1; } }

/* ── 捲動顯示（一次性；初始隱藏鎖在 html.js 下，JS 被擋整頁照常） ── */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0; translate: 0 16px;
    transition: opacity 0.55s var(--tp-ease), translate 0.55s var(--tp-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
  html.js .tp-hero-rise { animation: tp-rise 0.5s var(--tp-ease) both; }
  html.js .tp-hero-rise.r2 { animation-delay: 80ms; }
  html.js .tp-hero-rise.r3 { animation-delay: 160ms; }
}
@keyframes tp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── 手風琴（details.tp-acc；grid rows 0fr→1fr） ───────── */
details.tp-acc summary {
  cursor: pointer; list-style: none; position: relative;
  min-height: 54px; padding: 14px 52px 14px 18px;
  font-weight: 700; display: flex; align-items: center; gap: 12px;
}
details.tp-acc summary::-webkit-details-marker { display: none; }
details.tp-acc summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%;
  translate: 0 -50%;
  font-family: 'Archivo', sans-serif; font-size: 24px; color: var(--tp-bright);
  transition: rotate 0.2s var(--tp-ease);
}
details.tp-acc.is-open summary::after { rotate: 45deg; }
details.tp-acc .tp-acc-num { color: var(--tp-bright); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; }
details.tp-acc .tp-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--tp-ease); }
details.tp-acc.is-open .tp-acc-body { grid-template-rows: 1fr; }
details.tp-acc .tp-acc-inner { overflow: hidden; min-height: 0; }
details.tp-acc .tp-acc-inner p { margin: 0; padding: 0 18px 18px 48px; font-size: 15px; color: var(--tp-t2); }
html:not(.js) details.tp-acc .tp-acc-body { grid-template-rows: 1fr; }

/* ── 報名卡：漸層描邊（預設停住，hover 或鍵盤聚焦才轉） ──── */
@property --tp-angle { syntax: "<angle>"; initial-value: 135deg; inherits: false; }
.tp-signup {
  position: relative;
  --tp-angle: 135deg;   /* 一般宣告：不支援 @property 的舊瀏覽器退回靜態漸層描邊 */
  border: 1.5px solid transparent;
  border-radius: var(--tp-r-lg);
  background:
    linear-gradient(rgba(13, 8, 46, 0.92), rgba(13, 8, 46, 0.92)) padding-box,
    conic-gradient(from var(--tp-angle), rgba(99, 182, 247, 0.9), rgba(0, 120, 212, 0.55), rgba(142, 227, 255, 0.25), rgba(99, 182, 247, 0.9)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--tp-shadow-deep);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html.js .tp-signup { animation: tp-spin 6s linear infinite; animation-play-state: paused; }
  html.js .tp-signup:hover, html.js .tp-signup:focus-within { animation-play-state: running; }
}
@keyframes tp-spin { to { --tp-angle: 495deg; } }

/* ── 手機貼底報名條（不掛 blur；safe-area） ───────────── */
.tp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--tp-gutter) calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(6, 1, 33, 0.94);
  border-top: 1px solid var(--tp-hairline-strong);
}
.tp-dock .tp-dock-info { font-size: 14px; line-height: 1.45; color: var(--tp-t2); }
.tp-dock .tp-dock-info b { display: block; color: var(--tp-t1); font-size: 15px; }
html.js .tp-dock { translate: 0 110%; visibility: hidden; transition: translate var(--tp-base) var(--tp-ease), visibility 0s linear var(--tp-base); }
html.js .tp-dock.is-visible { translate: 0 0; visibility: visible; transition-delay: 0s, 0s; }
.tp-dock.is-closed { display: none; }
@media (prefers-reduced-motion: reduce) { html.js .tp-dock { transition: none; } }
@media (min-width: 768px) { .tp-dock { display: none; } }

/* ── 內建瀏覽器提示列（偵測到 IG／LINE 才由 JS 顯示） ───── */
.tp-inapp { display: none; gap: 10px; align-items: center; padding: 10px var(--tp-gutter); background: rgba(13, 23, 67, 0.92); border-bottom: 1px solid var(--tp-hairline); font-size: 13.5px; color: var(--tp-t2); }
.tp-inapp.is-on { display: flex; }
.tp-inapp a { color: var(--tp-ice); font-weight: 700; }

/* ── 時程 ────────────────────────────────────────── */
.tp-timeline { list-style: none; margin: 16px 0 0; padding: 22px 20px 8px; }
.tp-timeline li { position: relative; margin-left: 6px; padding: 0 0 18px 24px; border-left: 2px solid var(--tp-hairline); }
.tp-timeline li:last-child { border-left-color: transparent; }
.tp-timeline li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--tp-steel); }
.tp-timeline time { display: block; color: var(--tp-bright); font-weight: 700; font-size: 15px; line-height: 1.6; }
.tp-timeline .key { font-weight: 700; }
.tp-timeline .key::before { background: var(--tp-ice-deep); box-shadow: var(--tp-glow-press); }
.tp-timeline .key time { color: var(--tp-t1); }

/* ── 減少動態：一切靜止但品牌氛圍不消失 ───────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .tp-hero-rise { animation: none !important; }
  .tp-glow { opacity: 0.7 !important; animation: none !important; }
  .tp-stars span { opacity: 0.6 !important; animation: none !important; }
  .tp-btn, .tp-card, .tp-glass, .tp-header, .tp-signup { transition: none !important; animation: none !important; }
  details.tp-acc .tp-acc-body, details.tp-acc summary::after { transition: none !important; }
}

@media (min-width: 768px) {
  body { font-size: 18px; }
  :root { --tp-gutter: 32px; }
  .tp-logo img { height: 32px; }
}