/* ============================================================
   TiBOOST 論壇暨決賽頒獎典禮 — forum.css
   只放論壇頁專屬樣式；design token、.wrap/.sec/.header/.footer/.overlay
   一律沿用 style.css，本檔必須在 style.css 之後載入。
   ============================================================ */

/* ============================================================
   KV 排版調參區

   主視覺沿用競賽官網的 .hero 結構（.hero-hand / .hero-burst / .hero-lockup /
   樣式在 style.css），本區只覆寫「這一頁要多大、擺哪裡」。
   要調整構圖改下面這組 --kv-* 就好，不用動任何規則本體。

   兩隻手與星芒的最終座標不是寫死的：forum.js 的 heroPlace() 以標準字上的
   .oo-spark（OO 交疊處）為錨點反推指尖位置，指尖間距／整手微調在 forum.js
   的 KV 物件裡（gapX / gapY / offR / offL / contactOff）。
   ============================================================ */
.fhero{
  /* — 主視覺（手＋星芒＋標準字）整組的位置與大小 — */
  --kv-center-x: 66%;                         /* 標準字中心在 Banner 的水平位置 */
  --kv-center-y: 48%;                         /* 標準字中心在 Banner 的垂直位置 */
  --kv-lockup-w: min(36vw, 580px);            /* 標準字寬度 */
  --kv-lockup-x: -50%;                        /* 標準字水平微調（相對自身寬，負=左） */
  --kv-lockup-y: -50%;                        /* 標準字垂直微調（相對自身高，負=上） */
  --kv-hand-w: min(42vw, 660px);              /* 單手寬度 */
  --kv-burst-w: min(19vw, 300px);             /* 星芒直徑 */
  /* — 主視覺亮度：重心仍在左側文案，但右側要看得清楚（1 = 原始亮度） — */
  --kv-hand-opacity: .88;                     /* 兩隻手 */
  --kv-burst-opacity: .6;                     /* 星芒透明度 */
  --kv-burst-bright: .95;                     /* 星芒亮度倍率 */
  --kv-lockup-opacity: .92;                   /* 標準字 */
  --kv-scrim: 48%;                            /* 左側暗場漸層結束位置 */
  /* — 左側文案區塊 — */
  --kv-copy-left: clamp(24px, 5vw, 96px);     /* 文案離左側距離 */
  --kv-copy-y: 46%;                           /* 文案垂直位置 */
  --kv-copy-w: min(38vw, 470px);              /* 文案最大寬度 */
}

/* ============ Banner ============ */
/* 版面依主辦設計稿：文案靠左，主視覺（兩隻手＋標準字）落在右半邊 */
.fhero{ position:relative; height:100svh; min-height:620px; max-height:900px; overflow:hidden }
.fhero .hero-hand{ width:var(--kv-hand-w); opacity:var(--kv-hand-opacity) }
.fhero .hero-burst{ width:var(--kv-burst-w); height:var(--kv-burst-w) }
.fhero .hero-burst img{ opacity:var(--kv-burst-opacity); filter:brightness(var(--kv-burst-bright)) }
/* 右側不做描線進場，標準字直接停在最終狀態（--draw 是 style.css 的遮罩進度） */
.fhero .lockup-mark{ --draw:112% }
.fhero .hero-axis{
  left:var(--kv-center-x); top:var(--kv-center-y);
  width:var(--kv-lockup-w);
  transform:translate(var(--kv-lockup-x), var(--kv-lockup-y));
  opacity:var(--kv-lockup-opacity);
}
/* OO 交會處的發光 */
.fhero .hero-lockup.is-glow .lockup-mark{
  filter:drop-shadow(0 0 8px rgba(198,242,20,.3)) drop-shadow(0 0 26px rgba(198,242,20,.14));
}
/* 左側暗場：只負責讓文案讀得清楚，不再整片壓暗右邊 */
.fhero::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,5,5,.9) 0%, rgba(5,5,5,.74) 22%, rgba(5,5,5,.34) 38%, rgba(5,5,5,0) var(--kv-scrim));
}

/* 左側文案
   排版依設計稿，但全白太平：以酸色做出層次 —— 標題的 TiBOOST、細線的起點、
   ✦ 標記、標籤與外框折角都吃酸色，正文維持白字。 */
.fhero-copy{
  position:absolute; left:var(--kv-copy-left); top:var(--kv-copy-y);
  transform:translateY(-50%); z-index:4;
  width:var(--kv-copy-w);
}
/* 貼齊文案左緣的酸色細直線，把整塊文案框成一個單位 */
.fhero-copy::before{
  content:''; position:absolute; left:-20px; top:4px; bottom:4px; width:1px;
  background:linear-gradient(180deg, transparent, var(--acid) 16%, var(--acid-dim) 72%, transparent);
  opacity:.75;
}

.fhero-eyebrow{
  position:relative; padding:15px 0;
  font-family:var(--font-zh); font-weight:300; font-size:clamp(15px, 1.5vw, 20px);
  letter-spacing:.12em; color:var(--white);
}
/* 上下細線由酸色起筆、往右淡出 */
.fhero-eyebrow::before,
.fhero-eyebrow::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--acid) 0%, rgba(244,244,242,.5) 40%, rgba(244,244,242,.08) 100%);
}
.fhero-eyebrow::before{ top:0 }
.fhero-eyebrow::after{ bottom:0 }
.fhero-eyebrow i{
  font-style:normal; color:var(--acid); font-size:.72em;
  margin-right:10px; vertical-align:2px;
}

.fhero-title{
  margin-top:26px;
  font-family:var(--font-zh); font-weight:500; font-size:clamp(26px, 3.1vw, 42px);
  letter-spacing:.02em; line-height:1.25; color:var(--white);
}
.fhero-title b{
  font-family:var(--font-en); font-weight:400; letter-spacing:.03em;
  color:var(--acid); text-shadow:0 0 26px rgba(198,242,20,.4);
  margin-right:.1em;
}

.fhero-sub{
  position:relative; display:inline-block; margin-top:18px; padding-bottom:12px;
  font-family:var(--font-zh); font-weight:400; font-size:clamp(17px, 1.9vw, 25px);
  letter-spacing:.14em; color:var(--white);
}
.fhero-sub::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--acid), rgba(198,242,20,.12));
}

.fhero-meta{
  position:relative; margin-top:32px; display:flex; flex-direction:column; gap:11px;
  border:1px solid rgba(244,244,242,.26); border-radius:18px; padding:18px 24px;
  background:
    repeating-linear-gradient(180deg, rgba(198,242,20,.05) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(198,242,20,.09), rgba(5,5,5,.55) 46%);
  backdrop-filter:blur(6px);
}
/* 對角兩個酸色折角，讓框不只是一個白方塊 */
.fhero-meta::before,
.fhero-meta::after{
  content:''; position:absolute; width:26px; height:26px; pointer-events:none;
}
.fhero-meta::before{
  left:-1px; top:-1px; border-top:1px solid var(--acid); border-left:1px solid var(--acid);
  border-radius:18px 0 0 0;
}
.fhero-meta::after{
  right:-1px; bottom:-1px; border-bottom:1px solid var(--acid); border-right:1px solid var(--acid);
  border-radius:0 0 18px 0;
}
.fhero-meta > div{ display:flex; align-items:baseline; gap:6px }
.fhero-meta dt{ font-family:var(--font-zh); font-size:clamp(14px, 1.4vw, 16px); letter-spacing:.1em; color:var(--acid) }
.fhero-meta dt::after{ content:'：' }
html[lang="en"] .fhero-meta dt::after{ content:':'; margin-right:4px }
/* 數字吃等寬字（中文自動落回 Noto Sans TC），日期時間看起來像儀表讀值 */
.fhero-meta dd{
  font-family:var(--font-mono), var(--font-zh);
  font-size:clamp(14px, 1.4vw, 16px); letter-spacing:.02em; color:var(--white);
}

/* 打字游標：跟著逐字輸出的字頭走，輸出完就撤掉（由 forum.js 插入／移除）。
   本體零寬、方塊畫在 ::before，所以不佔版位 —— 佔了就會把最後一個字擠到
   下一行，文案又是垂直置中的，整塊會跟著上下跳。
   高度壓在字體 ascent 以內並貼齊 baseline，同樣是為了不撐開行高。 */
.kv-caret{
  display:inline-block; position:relative; width:0; height:.72em;
  vertical-align:baseline;
  animation:kv-blink .68s steps(1, end) infinite;
}
.kv-caret::before{
  content:''; position:absolute; left:.04em; top:0; width:.46em; height:100%;
  background:var(--acid); box-shadow:0 0 14px rgba(198,242,20,.75);
}
@keyframes kv-blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
/* 尚未輸出的字：留住版位不重排，只是看不見 */
.kv-typing{ visibility:hidden }
/* 進場前先藏整塊文案，否則會先閃出完整文字再被切開重打。
   .is-in / .is-ready 由 forum.js 掛上（動畫版／降低動態版各走一個）。 */
html.js .fhero-copy{ visibility:hidden }
html.js .fhero-copy.is-in,
html.js .fhero-copy.is-ready{ visibility:visible }

/* ---- 文案進場動畫 ----
   裝飾線條都是 ::before/::after，GSAP 選不到，只能走 keyframes。
   打字長度會隨語系變動，寫死 delay 會對不上，所以由 forum.js 在 timeline
   的對應時點掛 .is-line，keyframes 一律零延遲、掛上就播。 */
@media (prefers-reduced-motion: no-preference){
  .fhero-copy.is-in::before{
    transform-origin:top; animation:kv-line-v .9s cubic-bezier(.22,1,.36,1) backwards;
  }
  /* 掛 .is-line 之前先收成 0：這幾條線的 delay 由 JS 決定，
     沒有寫死 animation-delay 可以靠 backwards 撐住初始狀態。 */
  html.js .fhero-eyebrow::before,
  html.js .fhero-eyebrow::after,
  html.js .fhero-sub::after{ transform:scaleX(0); transform-origin:left }
  html.js .fhero-meta::before,
  html.js .fhero-meta::after{ width:0; height:0; opacity:0 }

  html.js .fhero-eyebrow.is-line::before,
  html.js .fhero-eyebrow.is-line::after{
    animation:kv-line-h .8s cubic-bezier(.22,1,.36,1) forwards;
  }
  html.js .fhero-eyebrow.is-line::after{ animation-delay:.08s }
  html.js .fhero-sub.is-line::after{
    animation:kv-line-h .6s cubic-bezier(.22,1,.36,1) forwards;
  }
  /* 折角從短劃長成完整的 L */
  html.js .fhero-meta.is-line::before,
  html.js .fhero-meta.is-line::after{ animation:kv-corner .55s ease-out forwards }
  html.js .fhero-meta.is-line::after{ animation-delay:.12s }
}
/* 亂碼校正中的讀值走酸色，定住後回白字 */
.fhero-meta dd.is-scrambling{ color:var(--acid-dim) }
@keyframes kv-line-v{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes kv-line-h{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes kv-corner{ from{ width:0; height:0; opacity:0 } to{ width:26px; height:26px; opacity:1 } }

/* ============ 活動介紹 ============ */
.about-lead{
  font-family:var(--font-zh); font-weight:400; font-size:clamp(24px, 3.2vw, 40px);
  letter-spacing:.1em; color:var(--white);
}
.about-formula{
  margin-top:14px;
  font-family:var(--font-zh); font-weight:300; font-size:clamp(16px, 1.9vw, 22px);
  letter-spacing:.3em; color:var(--gray);
}
.about-formula i{ font-style:normal; color:var(--acid); margin:0 4px }

.about-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px, 5vw, 80px); align-items:center; margin-top:56px;
}
.about-text p{ color:var(--gray); font-size:16px; line-height:2.05 }
.about-text p + p{ margin-top:26px }

/* 三圓交疊：對應設計稿的 Venn，改以酸性系細線圓呈現。
   每圓都是「標題 + 說明」，文字置中；圓縮到 52%、容器比例 1/.95，
   交疊區只留給圖形，三塊文字都落在各自不重疊的範圍內。 */
.venn{ position:relative; width:100%; aspect-ratio:1 / .95; max-width:520px; margin:0 auto }
.venn-c{
  position:absolute; width:52%; aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); backdrop-filter:blur(2px);
  /* 圓環發光：比照主視覺 TiBOOST 標準字的酸色暈染 */
  border-color:rgba(198,242,20,.34);
  box-shadow:0 0 46px rgba(198,242,20,.16), inset 0 0 64px rgba(198,242,20,.07);
}
/* 圓環上的行進光點：兩層跟著轉的徑向漸層，光點永遠貼在環上（一順一逆、速度不同） */
.venn-c::before,
.venn-c::after{
  content:''; position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(198,242,20,.85));
}
.venn-c::before{
  background:radial-gradient(circle 6px at 50% 0,
    rgba(240,255,190,1), rgba(198,242,20,.55) 45%, rgba(198,242,20,0) 72%);
  animation:venn-orbit 16s linear infinite;
}
.venn-c::after{
  background:radial-gradient(circle 3.5px at 0 50%,
    rgba(240,255,190,.9), rgba(198,242,20,.4) 45%, rgba(198,242,20,0) 72%);
  animation:venn-orbit 26s linear infinite reverse;
}
.venn-c--2::before{ animation-delay:-5.3s }
.venn-c--3::before{ animation-delay:-10.6s }
.venn-c--2::after{ animation-delay:-8.6s }
.venn-c--3::after{ animation-delay:-17.2s }
@keyframes venn-orbit{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .venn-c::before, .venn-c::after{ animation:none } }
.venn-t{ position:relative; z-index:1; display:block; max-width:64% }
.venn-c b{
  display:block; font-family:var(--font-zh); font-weight:400; font-size:clamp(12px, 1.35vw, 15px);
  letter-spacing:.1em; line-height:1.55;
}
.venn-c i{
  display:block; margin-top:6px; font-style:normal; font-family:var(--font-zh);
  font-size:clamp(9px, 1vw, 11px); letter-spacing:.04em; line-height:1.7; color:var(--gray);
}
.venn-c--1{ top:0; left:50%; transform:translateX(-50%); background:rgba(198,242,20,.10); border-color:rgba(198,242,20,.55) }
.venn-c--1 b{ color:var(--acid) }
.venn-c--2{ bottom:0; left:0; background:rgba(244,244,242,.06) }
.venn-c--2 b{ color:var(--white) }
.venn-c--3{ bottom:0; right:0; background:rgba(143,174,16,.14); border-color:rgba(198,242,20,.3) }
.venn-c--3 b{ color:var(--white) }

/* ============ 議程 ============ */
.agenda-when{ font-family:var(--font-mono); font-size:clamp(17px, 2.1vw, 24px); letter-spacing:.14em; color:var(--acid) }
.agenda-where{ margin-top:8px; font-size:15px; letter-spacing:.06em; color:var(--gray) }

.agenda-wrap{ margin-top:44px; border:1px solid var(--line); overflow-x:auto }
.agenda{ width:100%; border-collapse:collapse; min-width:720px }
.agenda th{
  padding:16px 18px; text-align:left; white-space:nowrap;
  background:rgba(198,242,20,.07); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-weight:400; font-size:13px; letter-spacing:.16em; color:var(--acid);
}
.agenda td{
  padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top;
  font-size:15px; line-height:1.75; color:var(--white);
}
.agenda tr:last-child td{ border-bottom:0 }
.agenda tbody tr{ transition:background .3s }
.agenda tbody tr:hover{ background:rgba(198,242,20,.04) }
.agenda td:nth-child(1){ font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; color:var(--acid); white-space:nowrap }
.agenda td:nth-child(3){ color:var(--gray); font-size:14px }
.agenda td b{ font-weight:400; color:var(--white) }
.agenda td i{ font-style:normal; color:var(--acid-dim); font-size:13px; margin-left:4px }
.agenda-note{ margin-top:20px; font-size:13px; line-height:1.9; color:var(--gray) }

/* ============ 講師陣容 ============ */
.speaker-hint{ font-size:13px; color:var(--acid-dim); letter-spacing:.08em; margin-bottom:36px }
.speaker-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.speaker{ text-align:center; transition:transform .3s }
.speaker:hover{ transform:translateY(-4px) }
.speaker-photo{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:120px; margin:0 auto; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--line);
  font-family:var(--font-zh); font-weight:100; font-size:40px; color:var(--gray);
  filter:grayscale(1); transition:filter .4s, border-color .4s;
}
.speaker:hover .speaker-photo{ filter:grayscale(0); border-color:var(--acid) }
.speaker h3{ font-family:var(--font-zh); font-weight:400; font-size:20px; margin-top:18px; letter-spacing:.1em }
.speaker:hover h3{ color:var(--acid) }
.speaker p{ font-size:14px; color:var(--gray); margin-top:6px; line-height:1.6 }
.speaker[data-nobio]{ cursor:default }
.speaker[data-nobio]:hover{ transform:none }

/* ============ 獲獎名單 ============ */
.winner-lead{
  text-align:center; font-family:var(--font-zh); font-weight:300;
  font-size:clamp(20px, 2.6vw, 30px); letter-spacing:.14em; margin-bottom:48px;
}
.winner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.winner{
  border:1px solid var(--line); padding:40px 28px; text-align:center;
  background:var(--bg-elevated); transition:border-color .35s, transform .35s;
}
.winner:hover{ border-color:var(--acid); transform:translateY(-4px) }
.winner-rank{
  display:block; font-family:var(--font-zh); font-weight:400;
  font-size:clamp(22px, 2.4vw, 28px); letter-spacing:.24em; color:var(--acid);
}
.winner--2 .winner-rank{ color:var(--white) }
.winner--3 .winner-rank{ color:var(--acid-dim) }
.winner-name{ margin-top:22px; font-size:16px; letter-spacing:.06em; color:var(--gray) }
/* 決賽前的待揭曉狀態：名次留著，名字以虛線框佔位 */
.winner.is-pending{ border-style:dashed }
.winner.is-pending:hover{ transform:none; border-color:var(--line) }
.winner.is-pending .winner-name{ color:var(--acid-dim); letter-spacing:.2em; font-size:15px }
.winner-note{ margin-top:26px; text-align:center; font-size:13px; letter-spacing:.06em; color:var(--gray) }

/* ============ 講師簡介 Overlay ============ */
/* style.css 用 top/left 50% + translate(-50%,-50%) 置中，但開窗動畫會補間 panel 的 y，
   GSAP 會整個改寫 transform，置中的位移就被吃掉、面板掉到下方。
   改用 flex 置中：位置交給 flex，transform 完全讓給動畫。 */
.overlay{ display:flex; align-items:center; justify-content:center; padding:24px }
.overlay-panel{ position:relative; top:auto; left:auto; transform:none; margin:0 }

/* ============ 交通資訊 ============ */
.venue-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px, 4.5vw, 68px); align-items:start }
.venue-map{ border:1px solid var(--line); overflow:hidden; background:var(--bg-elevated) }
.venue-map img{ width:100%; height:auto; display:block }
.venue-ico{ color:var(--acid); margin-right:10px; font-style:normal }
.venue-place{ font-family:var(--font-zh); font-weight:300; font-size:clamp(19px, 2.2vw, 26px); letter-spacing:.1em }
.venue-place a{ color:var(--white); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s }
.venue-place a:hover{ color:var(--acid); border-color:var(--acid) }
.venue-item{ margin-top:40px }
.venue-item h3{ font-family:var(--font-zh); font-weight:400; font-size:19px; letter-spacing:.14em; color:var(--white) }
.venue-item p{ margin-top:12px; padding-left:26px; font-size:15px; line-height:2; color:var(--gray) }

/* ============ 與我聯絡 ============ */
.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px }
.contact-card{
  display:flex; flex-direction:column; gap:16px;
  border:1px solid var(--line); padding:38px 34px; background:var(--bg-elevated);
  transition:border-color .35s, transform .35s;
}
.contact-card:hover{ border-color:var(--acid); transform:translateY(-3px) }
.contact-who{ font-family:var(--font-zh); font-weight:400; font-size:20px; letter-spacing:.16em; color:var(--white) }
.contact-mail{ display:flex; align-items:center; gap:11px; font-size:16px; letter-spacing:.02em; color:var(--gray); word-break:break-all }
.contact-mail i{ color:var(--acid); font-style:normal; flex-shrink:0 }
.contact-card:hover .contact-mail{ color:var(--acid) }

/* ============ 活動報名（固定右下角） ============ */
.forum-apply{
  position:fixed; right:28px; bottom:28px; z-index:900;
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--acid); color:var(--bg) !important;
  font-family:var(--font-zh); font-weight:500; font-size:17px; letter-spacing:.1em; line-height:1.4;
  box-shadow:0 10px 40px rgba(198,242,20,.32);
  transition:transform .3s, box-shadow .3s;
}
/* QA 小幫手浮動鈕：
   首頁把它併進右下 FAB 選單，所以 style.css 用 display:none !important 藏起來。
   論壇頁沒有 FAB 選單，改回獨立圓鈕顯示，並往上讓開活動報名鈕。 */
.qa-fab{ display:flex !important; bottom:140px }

/* 設計稿上「活動報名」在主視覺就看得到，所以不做捲動後才出現的處理 */
.forum-apply:hover{ transform:scale(1.06); box-shadow:0 0 56px rgba(198,242,20,.55) }

/* ============ 響應式 ============ */
@media (max-width: 1024px){
  .about-grid{ grid-template-columns:1fr; gap:48px }
  .venn{ max-width:440px }
  .venue-grid{ grid-template-columns:1fr; gap:40px }
  .speaker-grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 768px){
  /* 窄螢幕：左右並排放不下，文案改壓在上半部、主視覺退到下半部當背景 */
  .fhero{
    --kv-center-x: 54%;
    --kv-center-y: 76%;
    --kv-lockup-w: 76vw;
    --kv-hand-w: 60vw;
    --kv-burst-w: 38vw;
    --kv-copy-left: 24px;
    --kv-copy-y: calc(var(--header-h) + 56px);
    --kv-copy-w: calc(100% - 48px);
    height:auto; min-height:min(104svh, 820px); max-height:none;
  }
  .fhero-copy{ transform:none }
  /* 手機是上下排（文案上、主視覺下），暗場要跟著改成由上往下 */
  .fhero::after{
    background:linear-gradient(180deg,
      rgba(5,5,5,.92) 0%, rgba(5,5,5,.8) 26%, rgba(5,5,5,.42) 48%, rgba(5,5,5,0) 68%);
  }
  .fhero .hero-burst{ min-width:130px; min-height:130px }
  .fhero-meta{ padding:16px 20px }
  .contact-grid{ grid-template-columns:1fr }
  .winner-grid{ grid-template-columns:1fr }
  .speaker-grid{ grid-template-columns:repeat(2,1fr); gap:22px }
  .speaker-photo{ width:96px; height:96px; font-size:32px }

  /* 議程改直立卡片：橫向捲動在手機上很難用 */
  .agenda-wrap{ border:0; overflow:visible }
  .agenda{ min-width:0 }
  .agenda thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .agenda tbody tr{
    display:block; border:1px solid var(--line); padding:16px 18px; margin-bottom:12px;
    background:var(--bg-elevated);
  }
  .agenda tbody tr:hover{ background:var(--bg-elevated) }
  .agenda td{ display:block; padding:0; border:0 }
  .agenda td:empty{ display:none }
  .agenda td::before{
    content:attr(data-label); display:block; margin-bottom:3px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--gray);
  }
  .agenda td:nth-child(1){ font-size:16px }
  .agenda td:nth-child(1)::before{ display:none }
  .agenda td:nth-child(2){ margin-top:10px; font-size:15px }
  .agenda td:nth-child(3){ margin-top:12px }

  .forum-apply{ right:16px; bottom:16px; width:80px; height:80px; font-size:15px }
  .qa-fab{ bottom:112px }
}