/* ══════════════════════════════════════════════════════════════
   FTL 官網 — Glass V6 設計系統（2026-09-12）

   規則只有一條：**零硬線**。分層靠光（玻璃、內側高光、柔陰影）與留白，
   不靠 1px 實線。色調完全沿用 V1 的變數；換掉的是材質、字體、字級、動效。
   參考手法來源：agentcat.com（大而輕的字、無邊框卡）、anchr.tech（玻璃、點陣底紋）。
   spec：docs/specs/2026-09-12-glass-v6-redesign-design.md
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ---- 色票：與 V1 相同 ---- */
  --paper:#FBFAFF; --paper-2:#EEF4FD; --card:#FFFFFF;
  --b:#1668E3; --b-ink:#0A46B4; --b-dp:#0A4FC0; --b-dk:#0A34C8; --b-lt:#4A9BF0; --b-hi:#60D0F0;
  --ink:#0B1F3A; --ink-2:#3E4F70; --ink-3:#4F6084;
  --line:#DEE9F8; --line-2:#C7D8F0;
  --ok:#0B6E4F; --warn:#8A5300; --danger:#B3261E;
  --g-cta:linear-gradient(100deg,#0A46B4 0%,#1B6FE0 100%);
  --g-chip:linear-gradient(145deg,#4E8BF2 0%,#1B4FCE 62%,#274888 100%);
  /* 品牌漸層：跟 logo 一樣從亮藍走到深藍，中間帶一點青 */
  --g-text:linear-gradient(118deg,#2B8BFF 0%,#1668E3 42%,#0A46B4 78%,#0A34C8 100%);
  --g-brand:linear-gradient(118deg,#60D0F0 0%,#2B8BFF 30%,#1668E3 62%,#0A34C8 100%);
  --g-stroke:linear-gradient(120deg,#1668E3,#60D0F0);

  /* ---- 材質：玻璃 ---- */
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.5);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-soft:0 12px 34px rgba(11,31,58,.05);
  --shadow-lift:0 22px 48px rgba(11,31,58,.09);
  --shadow-cta:0 14px 34px -14px rgba(66,112,199,.7), 0 6px 20px -10px rgba(126,220,250,.55);

  /* ---- 字體 ---- */
  --f:"Huninn","LINE Seed TC","Noto Sans TC",system-ui,sans-serif;
  --f-en:"Outfit","Huninn","Noto Sans TC",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- 尺度 ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:96px; --s10:128px;
  --r-sm:12px; --r:20px; --r-lg:28px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:240ms;
  --nav-h:76px;
  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px) }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 背景：V1 的四角柔光 ＋ 一層極淡點陣（anchr 的底紋手法） */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 560px at 78% 12%,  rgba(150,201,248,.62), transparent 66%),
    radial-gradient(560px 520px at 58% 60%,  rgba(113,204,249,.44), transparent 66%),
    radial-gradient(680px 520px at -4% 4%,   rgba(150,201,248,.30), transparent 64%),
    radial-gradient(760px 560px at 104% 92%, rgba(113,204,249,.26), transparent 66%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(222,233,248,.9) 1px, transparent 1.2px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
#site-header,#site-footer,.page{ position:relative; z-index:1 }
[hidden]{ display:none !important }
html.lang-pending body{ visibility:hidden }
.page{ counter-reset:sec }
img{ max-width:100% }
h1,h2,h3,h4,p{ margin:0 }
h1,h2,h3{ text-wrap:balance }
p,li,dd{ text-wrap:pretty }
a{ color:inherit }

/* ══ 字級：大而輕 ═══════════════════════════════════════════ */
.display,.h1,.h2,.h3{ font-weight:700; color:var(--ink) }
.display{ font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.06; letter-spacing:-.03em }
.h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.14; letter-spacing:-.025em }
.h2{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.22; letter-spacing:-.02em }
.h3{ font-size:1.18rem; line-height:1.45; letter-spacing:-.012em }
.en,.num,.display .en{ font-family:var(--f-en) }
.display .en,.h1 .en{ font-weight:400 }
.lead{ font-size:1.06rem; line-height:1.8; color:var(--ink-2) }
.muted{ color:var(--ink-2) } .dim{ color:var(--ink-3) }
.num{ font-variant-numeric:tabular-nums }
.grad-text{ background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s4);
  font-family:var(--f-en); font-size:.82rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--b-ink);
}
.eyebrow::before{ content:counter(sec,decimal-leading-zero); font-weight:600; opacity:.55 }
.section .eyebrow::before{ counter-increment:sec }
.hero .eyebrow::before,.pagehead .eyebrow::before{ content:none }

/* ══ 版面 ═══════════════════════════════════════════════════ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5) }
.section{ position:relative; padding-block:clamp(var(--s7),6vw,var(--s9)) }
.section--tight{ padding-block:clamp(var(--s6),4.5vw,var(--s8)) }
/* 交錯區塊：不切邊，上下緣羽化 */
.section--alt{ background:linear-gradient(180deg, transparent, rgba(238,244,253,.9) 14%, rgba(238,244,253,.9) 86%, transparent) }
.section > .wrap{ position:relative; z-index:1 }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:clamp(var(--s6),4vw,var(--s7)) }
.sec-head p{ max-width:58ch }
.grid{ display:grid; gap:20px }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)) }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)) }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)) }
.divider{ height:clamp(var(--s5),3vw,var(--s6)); border:0; margin:0; background:none }
.stack{ display:flex; flex-direction:column }
.mt-4{ margin-top:var(--s4) } .mt-5{ margin-top:var(--s5) } .mt-6{ margin-top:var(--s6) } .mt-7{ margin-top:var(--s7) }

/* ══ 玻璃：唯一的分層材質 ═══════════════════════════════════ */
.glass,.panel,.pane,.card,.ios-row,.row,.partner,.info,.member{
  background:var(--glass);
  border:0;
  box-shadow:var(--glass-hi), var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.glass,.panel,.pane{ border-radius:var(--r-lg); padding:clamp(var(--s5),3vw,var(--s6)) }
.card{ position:relative; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); border-radius:var(--r);
  color:inherit; text-decoration:none; transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease }
@media (hover:hover) and (pointer:fine){
  a.card:hover,.card--interactive:hover,.ios-row:hover,a.row:hover{ transform:translateY(-4px); box-shadow:var(--glass-hi), var(--shadow-lift) }
}
.card--bar{ padding-left:calc(var(--s5) + 6px) }
.card--bar::before{ content:''; position:absolute; left:var(--s4); top:var(--s5); bottom:var(--s5); width:4px; border-radius:2px; background:var(--g-stroke) }
.card--fill{ background:var(--g-cta); color:#fff; box-shadow:var(--shadow-cta) }
.card--fill .h3,.card--fill h3{ color:#fff } .card--fill .card__body{ color:#DCE8FF }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3) }
.card__body{ color:var(--ink-2); font-size:1rem; line-height:1.75 }
.card__foot{ margin-top:auto; padding-top:var(--s3); display:flex; align-items:center; justify-content:space-between; gap:var(--s3) }
.card__index{ font-family:var(--f-en); font-size:.8rem; font-weight:500; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase }

/* 標籤：淡藍玻璃膠囊，不用實心也不用邊框 */
/* 標籤：每一類都是漸層膠囊＋白字＋淡陰影（跟「招募」同一個等級），用漸層的色相與明度分類別 */
.tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:var(--r-pill); color:#fff;
  background:linear-gradient(118deg,#1B6FE0,#0A46B4); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -8px rgba(10,52,200,.55);
  font-size:.82rem; font-weight:700; letter-spacing:.02em; white-space:nowrap }
.tag--cyan{ background:linear-gradient(118deg,#3FBDE8,#1668E3) }
.tag--ok{ background:var(--g-brand) }
.tag--warn{ background:linear-gradient(118deg,#2F3FC9,#0A1F8C); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -8px rgba(10,31,140,.55) }
.tag--ghost{ background:linear-gradient(118deg,#8FA6CF,#5F76A3); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px rgba(11,31,58,.35) }
.tag-row{ display:flex; flex-wrap:wrap; gap:7px }
.note{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.7); box-shadow:var(--glass-hi), var(--shadow-soft); font-size:.84rem; color:var(--ink-2) }
.note .icon{ width:15px; height:15px; flex:none; color:var(--warn) }

/* ══ 按鈕 ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 24px; border-radius:var(--r-pill); border:0;
  background:rgba(255,255,255,.78); color:var(--ink);
  box-shadow:var(--glass-hi), var(--shadow-soft);
  font-family:var(--f); font-size:.97rem; font-weight:700; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform 160ms var(--ease), box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.btn:active{ transform:scale(.98) }
.btn--primary{ background:var(--g-brand); color:#fff; box-shadow:var(--shadow-cta) }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); box-shadow:var(--glass-hi), var(--shadow-lift) }
  .btn--primary:hover{ box-shadow:0 18px 40px -14px rgba(66,112,199,.8), 0 8px 24px -10px rgba(126,220,250,.6) }
}
.btn--lg{ height:58px; padding:0 30px; font-size:1.02rem }
.btn--block{ width:100% }
.btn .icon{ width:17px; height:17px }
.btn[disabled]{ opacity:.45; pointer-events:none }
.link-arrow{ display:inline-flex; align-items:center; gap:7px; color:var(--b-ink); text-decoration:none; font-size:.95rem; font-weight:700 }
.link-arrow .icon{ width:16px; height:16px; transition:transform var(--dur) var(--ease) }
@media (hover:hover) and (pointer:fine){ .link-arrow:hover .icon{ transform:translateX(4px) } }

/* ══ 清單列：獨立的玻璃列，列與列之間是空氣 ═══════════════════ */
.ios-list,.rows,.info-list{ display:flex; flex-direction:column; gap:var(--s2) }
.ios-row{ display:flex; align-items:center; gap:var(--s4); min-height:72px; padding:var(--s3) var(--s5); border-radius:var(--r);
  color:var(--ink); text-decoration:none; transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease }
.ios-row__icon,.sqchip{ flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:var(--g-chip); box-shadow:0 6px 14px -8px rgba(39,72,136,.9) }
.ios-row__icon .icon,.sqchip .icon{ width:21px; height:21px; color:#fff }
.ios-row__label{ flex:1; font-size:1rem; font-weight:700; line-height:1.5 }
.ios-row__chev,.row__chev{ flex:none; width:18px; height:18px; color:#9BAFD0; transition:transform var(--dur) var(--ease), color var(--dur) ease }
@media (hover:hover) and (pointer:fine){ .ios-row:hover .ios-row__chev,a.row:hover .row__chev{ transform:translateX(3px); color:var(--b) } }
.row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5); border-radius:var(--r);
  color:inherit; text-decoration:none; transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease }
.row__main{ min-width:0 }
.row__title{ font-weight:700; font-size:1.02rem; line-height:1.5 }
.row__meta{ font-size:.92rem; color:var(--ink-2); margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.row__side{ display:flex; align-items:center; gap:var(--s4); flex:none }
.numchip{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--g-chip); color:#fff; font-family:var(--f-en); font-size:.82rem; font-weight:600; display:grid; place-items:center }
.info{ display:flex; gap:var(--s5); align-items:flex-start; padding:var(--s4) var(--s5); border-radius:var(--r) }
.info dt{ flex:none; width:7.5em; font-size:.86rem; font-weight:700; color:var(--ink-3); letter-spacing:.04em; padding-top:2px }
.info dd{ margin:0; font-size:.98rem }
.info dd a{ color:var(--b-ink); text-decoration:none } .info dd a:hover{ text-decoration:underline }
.bullets{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s4) }
.bullet{ display:flex; gap:15px; font-size:.95rem; color:var(--ink-2); line-height:1.75; align-items:baseline }
.bullet .bn{ flex:none; font-family:var(--f-en); font-size:.85rem; font-weight:600; color:var(--b-ink) }

/* ══ 導覽列 ═════════════════════════════════════════════════ */
.devbar{ display:flex; justify-content:center; align-items:center; gap:10px; padding:9px var(--s5);
  background:var(--ink); color:#DCE8FF; font-size:.78rem; text-align:center }
.devbar__dot{ width:8px; height:8px; border-radius:50%; background:var(--b-hi); flex:none; animation:blink 2.4s ease-in-out infinite }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (max-width:560px){ .devbar{ font-size:.72rem; text-align:left; justify-content:flex-start } }
.skip{ position:absolute; left:-9999px; top:8px; z-index:200; padding:11px 22px; border-radius:var(--r-pill); background:var(--b); color:#fff; text-decoration:none; font-weight:700 }
.skip:focus{ left:16px }
.nav{ position:relative; height:var(--nav-h); transition:background-color var(--dur) ease, box-shadow var(--dur) ease }
[data-stuck="true"] .nav{ background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 10px 30px rgba(11,31,58,.05) }
.nav__inner{ height:100%; display:flex; align-items:center; gap:var(--s5) }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink) }
.brand img{ height:44px; width:auto }
.brand__id{ font-family:var(--f-en); font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--ink-2) }
@media (max-width:640px){ .brand__id{ display:none } }
.nav__links{ display:flex; align-items:center; gap:var(--s5); margin-left:auto }
.nav__link{ position:relative; color:var(--ink-2); text-decoration:none; font-size:.94rem; font-weight:500; white-space:nowrap; padding:6px 0; transition:color var(--dur) ease }
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--ink) }
.nav__link::after{ content:''; position:absolute; left:50%; right:50%; bottom:0; height:2px; border-radius:2px; background:var(--b); transition:left var(--dur) var(--ease), right var(--dur) var(--ease) }
.nav__link[aria-current="page"]::after{ left:0; right:0 }
.nav__side{ display:flex; align-items:center; gap:var(--s3) }
.lang{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:var(--r-pill); background:rgba(11,31,58,.06) }
.lang__slider{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--r-pill); background:#fff; box-shadow:var(--shadow-soft); transition:transform var(--dur) var(--ease) }
.lang[data-lang="en"] .lang__slider{ transform:translateX(100%) }
.lang__btn{ position:relative; z-index:1; height:32px; padding:0 14px; border:0; background:none; border-radius:var(--r-pill); font-family:var(--f-en); font-size:.8rem; font-weight:600; color:var(--ink-3); cursor:pointer }
.lang__btn[aria-pressed="true"]{ color:var(--ink) }
.nav__burger{ display:none; width:44px; height:44px; border:0; border-radius:14px; background:rgba(255,255,255,.78); box-shadow:var(--glass-hi), var(--shadow-soft); color:var(--ink); place-items:center; cursor:pointer }
.nav__burger .icon{ width:22px; height:22px }
@media (max-width:940px){ .nav__links{ display:none } .nav__burger{ display:grid } }
.sheet{ position:fixed; inset:0; z-index:150; background:rgba(251,250,255,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s var(--dur) }
.sheet[data-open="true"]{ opacity:1; visibility:visible; transform:none; transition:opacity var(--dur) ease, transform var(--dur) var(--ease) }
.sheet__head{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding-inline:var(--s5) }
.sheet__list{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5) }
.sheet__link{ display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:0 var(--s5); border-radius:var(--r);
  background:var(--glass); box-shadow:var(--glass-hi), var(--shadow-soft); color:var(--ink); text-decoration:none; font-size:1.05rem; font-weight:700 }
.sheet__link .icon{ width:18px; height:18px; color:#9BAFD0 }
.sheet__link[aria-current="page"]{ color:var(--b-ink) }
.sheet__foot{ padding:var(--s4) var(--s5) }

/* ══ 首屏：左標題、右 logo 動畫 ═════════════════════════════ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(var(--s7),6vw,var(--s9)) clamp(var(--s5),3vw,var(--s6)) }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--s6),5vw,var(--s9)); align-items:center }
.hero .logo-draw{ margin-block:-4% }
.hero__title{ margin-bottom:var(--s5) }
.hero__sub{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:var(--s4) }
.hero__desc{ max-width:34em; margin-bottom:var(--s6) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center }
.endorse{ display:flex; align-items:center; gap:10px; margin-top:var(--s7); font-size:.86rem; color:var(--ink-2) }
.endorse .icon{ width:17px; height:17px; color:var(--b); flex:none }
@media (max-width:940px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--s7) }
  .hero__grid > .logo-draw{ order:2; max-width:220px; margin-inline:auto }
}
@media (max-width:640px){ .hero__cta{ flex-direction:column; align-items:stretch } .hero__cta .btn{ width:100% } }

/* logo 動畫（LogoDraw.tsx）：四支刷子沿緞帶骨架把原圖刷出來；每支刷子只露出自己那幾片緞帶，
   所以緞帶一出現就是完整的。刷完一道高光斜掃收尾。 */
.logo-draw{ position:relative; width:100%; max-width:440px; margin-inline:auto; aspect-ratio:733/692 }
.logo-draw__svg,.logo-draw__img,.logo-draw__shine{ position:absolute; inset:0; width:100%; height:100% }
.logo-draw__svg{ overflow:visible }
.logo-draw__brush{
  fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  /* 收尾不用超慢的 ease：最後 20% 幾乎不動會被看成「停頓」。這組貝茲值要跟 LogoDraw.tsx 的 EASE 相同 */
  animation:logo-draw 1.5s cubic-bezier(.45,.05,.25,1) both;
}
@keyframes logo-draw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
/* 刷完後換成原圖：刷子已覆蓋全部像素，這一步在畫面上看不出變化 */
.logo-draw__img{ object-fit:contain; opacity:0;
  animation:logo-fade-in .5s ease-out both, logo-float 8s ease-in-out infinite;
  animation-delay:2.3s, 3.4s; filter:drop-shadow(0 24px 40px rgba(22,104,227,.18)) }
@keyframes logo-fade-in{ to{ opacity:1 } }
@keyframes logo-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
.logo-draw__svg{ animation:logo-float 8s ease-in-out infinite; animation-delay:3.4s }
.logo-draw[data-logo-state="done"] .logo-draw__svg{ display:none }
/* 高光：一道斜亮帶由左上掃到右下，用 logo 的 alpha 當遮罩，所以只會亮在緞帶上 */
.logo-draw__shine{ pointer-events:none; opacity:0;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.0) 58%, transparent 62%);
  background-size:260% 100%; background-position:100% 0;
  animation:logo-shine 1.1s cubic-bezier(.4,0,.2,1) both; animation-delay:2.45s }
@keyframes logo-shine{ 0%{ opacity:0; background-position:100% 0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ opacity:0; background-position:0% 0 } }
@media (prefers-reduced-motion:reduce){
  .logo-draw__svg,.logo-draw__shine{ display:none }
  .logo-draw__img{ animation:none; opacity:1 }
}

/* ══ 首頁區塊 ═══════════════════════════════════════════════ */
.weekly{ display:grid; gap:18px; grid-template-columns:1.55fr 1fr; align-items:stretch }
.weekly__side{ display:grid; gap:18px }
.card--feature{ padding:clamp(var(--s5),3vw,var(--s7)); border-radius:var(--r-lg); background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.6)) }
.card--feature .h3{ font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.32; max-width:24ch }
.card--feature .card__body{ font-size:1.02rem; max-width:44ch }
.card--sec .h3{ font-size:1rem }
.card--sec .card__body{ font-size:.9rem }
@media (max-width:900px){ .weekly{ grid-template-columns:1fr } }

.principles{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:clamp(var(--s6),4vw,var(--s7)) }
.principle{ padding:var(--s5); border-radius:var(--r) }
.principle__n{ display:block; font-family:var(--f-en); font-size:2.4rem; font-weight:300; line-height:1; letter-spacing:-.03em; margin-bottom:var(--s4);
  background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent }
.principle{ text-decoration:none; color:inherit; transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease }
.principle h3{ font-size:1.12rem; line-height:1.5; margin-bottom:var(--s2) }
.principle p{ font-size:.98rem; line-height:1.7; color:var(--ink-2) }
@media (hover:hover) and (pointer:fine){ a.principle:hover{ transform:translateY(-4px); box-shadow:var(--glass-hi), var(--shadow-lift) } }
@media (max-width:900px){ .principles{ grid-template-columns:1fr } }

.agenda{ display:grid; gap:12px }
.card--event{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--s3) var(--s5); align-items:start; padding:var(--s5) }
.card--event .card__top{ grid-column:1; grid-row:1/span 2; flex-direction:column; align-items:flex-start; gap:8px }
.card--event .h3{ grid-column:2; grid-row:1 }
.card--event .card__body{ grid-column:2; grid-row:2; max-width:60ch }
.card--event-lead{ background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) }
.card--event-lead .h3{ font-size:1.3rem }
@media (max-width:640px){ .card--event{ grid-template-columns:1fr } .card--event .card__top,.card--event .h3,.card--event .card__body{ grid-column:1; grid-row:auto } .card--event .card__top{ flex-direction:row; align-items:center } }

/* 藍色面板：整頁唯一的飽和色塊，本身就是一張大玻璃 */
.slab{ position:relative; color:#fff; margin-inline:auto; max-width:calc(var(--wrap) + var(--s8)); border-radius:var(--r-lg);
  background:linear-gradient(135deg,#0A46B4,#1668E3 55%,#2A8BEA); box-shadow:0 30px 70px -30px rgba(10,52,200,.55) }
.slab::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(520px 320px at 85% 10%, rgba(96,208,240,.4), transparent 70%), radial-gradient(400px 300px at 10% 100%, rgba(255,255,255,.14), transparent 70%) }
.slab h2,.slab h3{ color:#fff }
.slab .lead{ color:rgba(255,255,255,.9) }
.slab .eyebrow{ color:#BFD8FF }
.slab .btn{ background:#fff; color:var(--b-dk); box-shadow:0 12px 30px -12px rgba(0,0,0,.35) }
.slab .btn--primary{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) }
.slab .ios-row{ background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); color:#fff }
.slab .ios-row__icon{ background:#fff; box-shadow:none } .slab .ios-row__icon .icon{ color:var(--b-dk) }
.slab .ios-row__chev{ color:rgba(255,255,255,.6) }
.slab .dim{ color:rgba(255,255,255,.85) }
@media (hover:hover) and (pointer:fine){ .slab .ios-row:hover{ background:rgba(255,255,255,.18) } }
@media (max-width:1240px){ .slab{ margin-inline:var(--s4) } }

.marquee{ position:relative; overflow:hidden; padding-block:var(--s3) var(--s6) }
.marquee__track{ display:flex; width:max-content; animation:mq 46s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__group{ display:flex; align-items:center; gap:var(--s4); padding-right:var(--s4); flex:none }
@keyframes mq{ to{ transform:translateX(-50%) } }
.partner{ display:flex; align-items:center; gap:13px; height:68px; padding:0 var(--s5); border-radius:var(--r); box-shadow:var(--glass-hi), 0 8px 24px rgba(11,31,58,.04) }
.partner__dot{ width:30px; height:30px; border-radius:10px; flex:none; background:var(--g-chip) }
.partner b{ font-size:1rem; font-weight:700; white-space:nowrap }

/* ══ 首頁：本週日曆（週一到週日）═══════════════════════════ */
.week__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4) }
.week__range{ display:flex; align-items:center; gap:10px; font-size:1.05rem; color:var(--ink-3); margin:0 }
.week__now{ font-family:var(--f); font-size:.8rem; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); background:rgba(22,104,227,.1); color:var(--b-ink) }
.week__nav{ display:flex; gap:8px }
.week__btn{ height:40px; min-width:40px; padding:0 12px; border:0; border-radius:var(--r-pill); background:rgba(255,255,255,.78); box-shadow:var(--glass-hi), var(--shadow-soft);
  font-family:var(--f); font-size:1.1rem; font-weight:700; color:var(--ink); cursor:pointer; transition:transform 150ms var(--ease), opacity var(--dur) ease }
.week__btn--text{ font-size:.92rem; padding:0 16px }
.week__btn:hover:not(:disabled){ transform:translateY(-2px) }
.week__btn:disabled{ opacity:.35; cursor:default }
.week__grid{ animation:week-in .35s var(--ease) both }
@keyframes week-in{ from{ opacity:0; transform:translateY(8px) } }
.week__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px }
.week__day{ min-height:160px; padding:var(--s3) var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--glass); box-shadow:var(--glass-hi), var(--shadow-soft) }
.week__day--empty{ background:none; box-shadow:none }
.week__day--today{ background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(214,232,255,.85)); box-shadow:var(--glass-hi), var(--shadow-lift), 0 0 0 2px rgba(22,104,227,.35) }
.week__head{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:10px }
.week__head b{ font-size:1rem }
.week__head .num{ font-size:.9rem; color:var(--ink-3) }
.week__day--today .week__head b{ background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent }
.week__items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.week__items li{ display:flex; flex-direction:column; gap:4px; font-size:.95rem; line-height:1.45 }
.week__items .tag{ align-self:flex-start; font-size:.76rem; padding:3px 9px }
.week__next{ margin-top:var(--s4); font-size:1rem; color:var(--ink-2) }
@media (max-width:900px){ .week__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .week__day{ min-height:0 } }
@media (max-width:560px){ .week__grid{ grid-template-columns:1fr; gap:6px } .week__day{ display:grid; grid-template-columns:5.2em 1fr; gap:var(--s3); align-items:start; padding:10px var(--s4) } .week__head{ flex-direction:column; align-items:flex-start; gap:0; margin:0 } .week__day--empty .week__items::before{ content:'—'; color:var(--ink-3) } }

/* ══ 時程：一排玻璃步驟 ════════════════════════════════════ */
.timeline-glass{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px }
.tstep{ position:relative; padding:var(--s4) var(--s5); border-radius:var(--r); background:var(--glass); box-shadow:var(--glass-hi), var(--shadow-soft) }
.tstep__date{ display:block; font-family:var(--f-en); font-size:1.25rem; font-weight:500; letter-spacing:-.01em; margin-bottom:6px;
  background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent }
.tstep__label{ font-size:.98rem; line-height:1.55; color:var(--ink-2) }
.tstep--done{ opacity:.6 }
.tstep--done .tstep__date{ background:none; color:var(--ink-3) }

/* ══ 課程頁 ═════════════════════════════════════════════════ */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:var(--r-pill); background:rgba(255,255,255,.7); box-shadow:var(--glass-hi), var(--shadow-soft);
  font-size:.92rem; font-weight:700; color:var(--ink-2); text-decoration:none; transition:transform 150ms var(--ease), color var(--dur) ease }
.chip:hover{ transform:translateY(-2px); color:var(--b-ink) }
.card--lecture{ padding:clamp(var(--s5),3vw,var(--s6)); border-radius:var(--r-lg) }
.card--lecture .h2{ max-width:30ch }
.card--lecture .card__body,.card--lecture .bio{ max-width:72ch }
.card--row > div{ max-width:78ch }
.lecture__speaker{ font-size:1.05rem; color:var(--ink-2) }
.lecture__speaker b{ font-size:1.25rem }
.bio{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.92rem; line-height:1.7; color:var(--ink-3) }
.bullets-plain{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.98rem; line-height:1.7; color:var(--ink-2) }
.bullets-plain li{ position:relative; padding-left:18px }
.bullets-plain li::before{ content:''; position:absolute; left:0; top:.68em; width:8px; height:8px; border-radius:50%; background:var(--g-brand) }
.bullets-plain b{ color:var(--ink) }
.keywords{ font-size:.9rem; color:var(--b-ink); margin:4px 0 var(--s3) }
.card--row{ flex-direction:row; gap:var(--s5); align-items:flex-start }
.card--row .principle__n{ flex:none; width:3.2rem; margin:0; font-size:2rem }
.card--row .card__body{ margin-top:8px }
@media (max-width:640px){ .card--row{ flex-direction:column; gap:var(--s3) } }
.info-list--inline{ flex-direction:row; flex-wrap:wrap; gap:var(--s3) }
.info-list--inline .info{ flex:1 1 260px; background:rgba(255,255,255,.5); box-shadow:none }

/* ══ 社員相關資訊：身份切換 ══════════════════════════════════ */
.mtabs__switch{ display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:5px; border-radius:var(--r-pill); background:rgba(11,31,58,.06); margin-bottom:clamp(var(--s5),3vw,var(--s6)) }
.mtabs__tab{ height:46px; padding:0 26px; border:0; border-radius:var(--r-pill); background:none; font-family:var(--f); font-size:1.02rem; font-weight:700; color:var(--ink-3); cursor:pointer; transition:color var(--dur) ease, background var(--dur) ease }
.mtabs__tab--on{ background:var(--g-brand); color:#fff; box-shadow:var(--shadow-cta) }
.mtabs .flow{ animation:week-in .35s var(--ease) both }

/* ══ 社員相關資訊：四個步驟 ══════════════════════════════════ */
.flow{ display:flex; flex-direction:column; gap:clamp(var(--s6),4vw,var(--s7)) }
.flow__step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s4) }
.flow__n{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--g-brand); color:#fff; font-family:var(--f-en); font-size:1.25rem; font-weight:600; box-shadow:var(--shadow-cta) }
.flow__body{ min-width:0 }
@media (max-width:640px){ .flow__step{ grid-template-columns:1fr } .flow__n{ width:40px; height:40px; font-size:1.05rem } }
.member{ flex-direction:row; align-items:center; gap:var(--s4) }
.member .member__ava{ flex:none; width:64px; height:64px; aspect-ratio:1; border-radius:50%; margin:0; background:var(--g-brand); color:#fff }
.member .member__role{ margin-bottom:4px }
.member .h3{ font-size:1.15rem }
.member__initial{ font-size:1.6rem; font-weight:700 }

/* ══ 入社頁 ═════════════════════════════════════════════════ */
.tiers{ width:100%; border-collapse:collapse; font-size:1rem }
.tiers th{ text-align:left; font-size:.84rem; font-weight:700; letter-spacing:.04em; color:var(--ink-3); padding:0 0 12px }
.tiers td{ padding:12px 10px }
.tiers tbody tr:nth-child(odd) td{ background:rgba(22,104,227,.06) }
.tiers td:first-child{ border-radius:10px 0 0 10px } .tiers td:last-child{ border-radius:0 10px 10px 0 }
.tiers td:last-child,.tiers th:last-child{ text-align:right }
.tiers td b{ font-family:var(--f-en); font-size:1.3rem; font-weight:500 }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px }
.steps .card{ flex-direction:row; align-items:flex-start; gap:var(--s4) }
.steps .card__body{ margin:0 }
.faq{ display:flex; flex-direction:column; gap:12px }
.faq__item{ padding:0 }
.faq__q{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) var(--s5); font-size:1.05rem; font-weight:700; cursor:pointer; list-style:none }
.faq__q::-webkit-details-marker{ display:none }
.faq__q .icon{ flex:none; color:#9BAFD0; transition:transform var(--dur) var(--ease) }
.faq__item[open] .faq__q .icon{ transform:rotate(90deg); color:var(--b) }
.faq__item .card__body{ padding:0 var(--s5) var(--s5) }

/* ══ 關於頁：幹部名單 ═══════════════════════════════════════ */
.roster{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.roster li{ display:flex; justify-content:space-between; gap:var(--s3); font-size:1.02rem }
.roster .dim{ font-size:.92rem }

/* ══ 活動頁：行事曆列 ═══════════════════════════════════════ */
.row__date{ display:flex; flex-direction:column; align-items:flex-start; min-width:4.6em; font-family:var(--f-en) }
.row__date b{ font-size:1.15rem; font-weight:500; letter-spacing:-.01em }
.row__date span{ font-size:.82rem; color:var(--ink-3) }
.row--muted{ opacity:.6 }
.counts{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700; color:var(--ok) }
.counts .icon{ width:16px; height:16px }
.ios-row__meta{ font-size:.9rem; font-weight:400 }

/* ══ 內頁共用 ═══════════════════════════════════════════════ */
.pagehead{ position:relative; padding-block:clamp(var(--s7),6vw,var(--s9)) clamp(var(--s5),3vw,var(--s6)) }
.pagehead .h1{ max-width:26ch }
.pagehead .lead{ max-width:58ch; margin-top:var(--s5) }
.member{ align-items:flex-start }
.member__ava{ width:100%; aspect-ratio:4/5; border-radius:var(--r-sm); display:grid; place-items:center; overflow:hidden; background:linear-gradient(160deg,#EAF2FD,#D4E5FA); color:var(--b-ink); font-family:var(--f-en); font-size:2rem; font-weight:300 }
.member__role{ display:block; margin-bottom:var(--s3); font-family:var(--f-en); font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--b-ink) }
.member__meta{ display:flex; flex-direction:column; gap:6px; margin-top:var(--s2) }
.member__meta a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); text-decoration:none; font-size:.82rem; word-break:break-all }
.member__meta a .icon{ width:14px; height:14px; flex:none }
.filters{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6) }
.filter{ height:42px; padding:0 18px; border-radius:var(--r-pill); border:0; background:rgba(255,255,255,.7); box-shadow:var(--glass-hi), var(--shadow-soft);
  font-family:var(--f); font-size:.9rem; font-weight:700; color:var(--ink-2); cursor:pointer; transition:transform 150ms var(--ease), background-color var(--dur) ease, color var(--dur) ease }
.filter:active{ transform:scale(.97) }
.filter[aria-pressed="true"]{ background:var(--g-cta); color:#fff; box-shadow:var(--shadow-cta) }
.empty{ display:none; padding:var(--s7) var(--s5); text-align:center; color:var(--ink-3); border-radius:var(--r); background:var(--glass-2) }
.empty[data-show="true"]{ display:block }
.empty .icon{ width:28px; height:28px; margin-bottom:var(--s3); color:var(--b-lt) }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:var(--s4) }
.field label{ font-size:.88rem; font-weight:700; color:var(--ink) }
.field label .req{ color:var(--b-ink) }
.field input,.field textarea{ width:100%; min-height:54px; padding:14px 18px; border:0; border-radius:var(--r-sm);
  background:rgba(255,255,255,.8); box-shadow:var(--glass-hi), inset 0 0 0 1px rgba(199,216,240,.6); font:inherit; color:var(--ink); transition:box-shadow var(--dur) ease }
.field textarea{ min-height:136px; resize:vertical; line-height:1.7 }
.field input::placeholder,.field textarea::placeholder{ color:#93A3BE }
.field input:focus,.field textarea:focus{ outline:none; box-shadow:var(--glass-hi), 0 0 0 4px rgba(22,104,227,.16) }
.field__hint{ font-size:.8rem; color:var(--ink-3) }
.field__err{ display:none; font-size:.82rem; color:var(--danger); font-weight:700; align-items:center; gap:6px }
.field__err .icon{ width:14px; height:14px }
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{ box-shadow:var(--glass-hi), 0 0 0 2px rgba(179,38,30,.4) }
.field[data-invalid="true"] .field__err{ display:flex }
.form-note{ display:none; align-items:center; gap:10px; padding:14px 18px; border-radius:var(--r-sm); background:rgba(11,110,79,.08); color:var(--ok); font-weight:700; margin-top:var(--s4) }
.form-note[data-show="true"]{ display:flex }
.form-note .icon{ width:18px; height:18px }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.contact-channel__mark{ width:48px; height:48px; border-radius:16px }
.contact-channel__meta{ font-size:.84rem }
.stats{ display:flex; flex-wrap:wrap; gap:clamp(var(--s6),5vw,var(--s8)) }
.stat b{ display:block; font-family:var(--f-en); font-size:clamp(1.9rem,3.2vw,2.5rem); font-weight:300; line-height:1; color:var(--b) }
.stat span{ display:block; margin-top:8px; font-size:.82rem; color:var(--ink-2) }

/* ══ 頁尾 ═══════════════════════════════════════════════════ */
.footer{ position:relative; margin-top:var(--s9); background:linear-gradient(180deg, transparent, rgba(255,255,255,.7) 30%) }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s6); padding-block:var(--s8) var(--s7) }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr } }
.footer img.flogo{ height:62px; width:auto; margin-bottom:var(--s4) }
.footer__brand p{ color:var(--ink-2); font-size:.95rem; max-width:32ch }
.footer h4{ font-family:var(--f-en); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--b-ink); margin-bottom:var(--s4) }
.footer__list{ display:flex; flex-direction:column; gap:11px }
.footer__list a{ color:var(--ink-2); text-decoration:none; font-size:.98rem; transition:color var(--dur) ease }
.footer__list a:hover{ color:var(--b-ink) }
.footer__bar{ background:none }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding-block:var(--s5) var(--s6); font-size:.88rem; color:var(--ink-3) }
.social{ display:flex; gap:var(--s2); margin-top:var(--s4) }
.social a{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.78); box-shadow:var(--glass-hi), var(--shadow-soft); color:var(--ink-2);
  transition:color var(--dur) ease, background-color var(--dur) ease, transform 150ms var(--ease) }
.social a .icon{ width:19px; height:19px }
.social a:hover{ color:#fff; background:var(--g-cta) }

/* ══ 進場與圖示 ═════════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(12px) }
.reveal.in{ opacity:1; transform:none; transition:opacity 560ms var(--ease), transform 560ms var(--ease); transition-delay:calc(var(--i,0) * 60ms) }
.reveal--fade{ transform:none }
.reveal--rise{ transform:translateY(18px) }
.reveal--stat{ transform:translateY(5px) scale(.992) }
.icon{ width:20px; height:20px; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none } .reveal.in{ transition:none }
  .marquee__track,.devbar__dot{ animation:none }
}

/* ══ 專案：簡報式投影片 ══════════════════════════════════════ */
.deck{ outline:none; border-radius:var(--r-lg) }
.deck:focus-visible{ box-shadow:0 0 0 3px rgba(22,104,227,.35) }
.deck__stage{ position:relative; aspect-ratio:16/9; min-height:320px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(238,244,253,.85)); box-shadow:var(--glass-hi), var(--shadow-lift);
  animation:deck-in .35s var(--ease) both }
@keyframes deck-in{ from{ opacity:0; transform:translateX(12px) } }
.deck__slide{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:var(--s3); padding:clamp(24px,5vw,64px) }
.deck__slide--cover{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:center; background:radial-gradient(600px 400px at 80% 20%, rgba(96,208,240,.35), transparent 70%) }
.deck__coverText{ display:flex; flex-direction:column; gap:var(--s3); min-width:0 }
.deck__cover{ width:100%; border-radius:16px; box-shadow:var(--glass-hi), var(--shadow-lift); object-fit:cover; aspect-ratio:2/1 }
@media (max-width:760px){ .deck__slide--cover{ grid-template-columns:1fr } .deck__cover{ display:none } }
.deck__kicker{ font-family:var(--f-en); font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--b-ink) }
.deck__title{ max-width:22ch }
.deck__slide--cover .deck__title{ background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent }
.deck__sub{ font-size:1.15rem; color:var(--ink-3) }
.deck__body{ font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.75; color:var(--ink-2); max-width:60ch }
.deck__bullets{ font-size:clamp(1rem,1.4vw,1.12rem); max-width:60ch }
.deck__stat{ display:flex; align-items:baseline; gap:12px; margin-top:var(--s2) }
.deck__stat b{ font-family:var(--f-en); font-size:clamp(2rem,4vw,3.2rem); font-weight:500; letter-spacing:-.02em }
.deck__stat span{ color:var(--ink-2) }
.deck__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding:var(--s4) var(--s2) 0 }
.deck__links{ display:flex; gap:var(--s5) }
.deck__nav{ display:flex; align-items:center; gap:10px }
.deck__dots{ list-style:none; margin:0; padding:0; display:flex; gap:6px }
.deck__dot{ width:10px; height:10px; border-radius:50%; border:0; padding:0; background:rgba(11,31,58,.15); cursor:pointer; transition:transform 150ms var(--ease), background var(--dur) ease }
.deck__dot--on{ background:var(--g-brand); transform:scale(1.25) }
.deck__count{ font-size:.9rem; color:var(--ink-3); min-width:3.5em; text-align:center }
@media (max-width:640px){ .deck__stage{ aspect-ratio:auto; min-height:380px } }

/* ══ 洞察：週報 ═════════════════════════════════════════════ */
.issue__cover{ padding:clamp(var(--s5),4vw,var(--s7)); border-radius:var(--r-lg); background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(238,244,253,.85)); box-shadow:var(--glass-hi), var(--shadow-soft); margin-bottom:18px }
.issue__eyebrow{ font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--b-ink) }
.issue__range{ font-size:1.1rem; color:var(--ink-3); margin:6px 0 var(--s4) }
.issue__headlines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:700; line-height:1.3; letter-spacing:-.02em }
.issue__stories{ display:grid; gap:18px }
.issue__story{ position:relative; padding:clamp(var(--s5),3vw,var(--s6)) }
.issue__story .h2{ max-width:72ch }
.issue__story .card__body{ max-width:72ch; font-size:1.05rem }
.issue__lede{ margin-top:var(--s4); font-size:1.02rem; line-height:1.75; color:var(--ink-2); max-width:52ch }
.story{ display:grid; gap:14px; max-width:72ch }
.story__lede{ font-size:1.08rem; line-height:1.75; color:var(--ink) }
.story__facts{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.story__facts li{ position:relative; padding-left:18px; font-size:.98rem; line-height:1.7; color:var(--ink-2) }
.story__facts li::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--g-brand) }
.story__context,.story__why,.story__taiwan,.story__term{ font-size:.98rem; line-height:1.75; color:var(--ink-2) }
.story__context b,.story__why b,.story__taiwan b,.story__term b,.story__watch b{ color:var(--ink) }
.story__quote{ margin:4px 0; padding:14px 18px; border-radius:14px; background:rgba(22,104,227,.06) }
.story__quote p{ font-size:1.02rem; line-height:1.75; color:var(--ink) }
.story__quote cite{ display:block; margin-top:6px; font-style:normal; font-size:.88rem; color:var(--ink-3) }
.story__watch{ font-size:.98rem; line-height:1.75; color:var(--ink-2) }
.story__watch ul{ margin:4px 0 0; padding-left:1.2em }
.story__watch li{ padding-left:2px }
.story__term{ color:var(--ink-3); font-size:.92rem }
.issue__n{ font-family:var(--f-en); font-size:.9rem; font-weight:600; letter-spacing:.1em; color:var(--ink-3) }
.issue__sources summary{ cursor:pointer; font-size:.9rem; font-weight:700; color:var(--b-ink); list-style:none }
.issue__sources summary::-webkit-details-marker{ display:none }
.issue__sources ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.92rem }
.issue__sources li{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.issue__sources a{ color:var(--ink-2) }
.row--issue{ display:block; padding:0 }
.row--issue summary{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5); cursor:pointer; list-style:none }
.row--issue summary::-webkit-details-marker{ display:none }
.row--issue summary .icon{ color:#9BAFD0; transition:transform var(--dur) var(--ease) }
.row--issue[open] summary .icon{ transform:rotate(90deg); color:var(--b) }
.row__expand{ display:flex; flex-direction:column; gap:var(--s4); padding:0 var(--s5) var(--s5) }

/* ══ 首頁：我們是誰 ═════════════════════════════════════════ */
.formats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px }
.format{ gap:10px }
.format .ios-row__icon{ margin-bottom:4px }
.format .h3{ font-size:1.1rem }
.format .card__body{ font-size:.95rem }
@media (max-width:1020px){ .formats{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
/* 手機：一列一張，圖示靠左、文字靠右，避免五張窄卡每行只塞得下五個字 */
@media (max-width:640px){
  .formats{ grid-template-columns:1fr }
  .format{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px; align-items:start }
  .format .ios-row__icon{ grid-row:1 / span 3; margin:0 }
  .format .h3, .format .format__get, .format .card__body{ grid-column:2 }
}
.issue__cover--link{ display:block; text-decoration:none; color:inherit; margin:0; transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease }
@media (hover:hover) and (pointer:fine){ .issue__cover--link:hover{ transform:translateY(-4px); box-shadow:var(--glass-hi), var(--shadow-lift) } }
.project-teaser__img{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:14px; margin-bottom:4px }

/* ══ 資源頁 ═════════════════════════════════════════════════ */
.res-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.res-item--wide{ grid-column:1 / -1 }
.res-item[hidden]{ display:none }
@media (max-width:960px){ .res-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .res-grid{ grid-template-columns:1fr } }
.book{ flex-direction:row; gap:var(--s4); align-items:flex-start }
.book__cover{ flex:none; width:96px; aspect-ratio:2/3; object-fit:cover; border-radius:10px; box-shadow:0 10px 24px rgba(11,31,58,.18) }
.book__body{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.book .h3{ font-size:1.05rem }
.book .tag{ align-self:flex-start }

/* ══ 專案牆與對話框 ═════════════════════════════════════════ */
button.project-teaser{ text-align:left; font:inherit; cursor:pointer; border:0 }
.project-dialog{ border:0; padding:0; background:transparent; max-width:min(1100px,94vw); width:100%; margin:auto }
.project-dialog::backdrop{ background:rgba(11,31,58,.45); backdrop-filter:blur(8px) }
.project-dialog__inner{ position:relative; padding:var(--s5); border-radius:var(--r-lg); background:rgba(251,250,255,.96); box-shadow:var(--shadow-lift) }
.project-dialog__close{ position:absolute; top:12px; right:12px; z-index:2 }
.project-dialog .deck__stage{ min-height:0 }
.project-dialog__inner{ max-height:92dvh; overflow:auto; -webkit-overflow-scrolling:touch }
/* 手機：投影片不再用絕對定位撐在 16:9 的舞台裡（舞台會變 0 高），改成照內容長高、整個對話框可捲動 */
@media (max-width:760px){
  .project-dialog{ max-width:100vw; width:100%; margin:auto 0 0; max-height:100dvh }
  .project-dialog__inner{ border-radius:var(--r-lg) var(--r-lg) 0 0; padding:var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)) }
  .project-dialog .deck__stage{ aspect-ratio:auto; min-height:0 }
  .project-dialog .deck__slide{ position:relative; inset:auto; padding:var(--s5) var(--s4) }
  .project-dialog .deck__cover{ display:block; aspect-ratio:16/9 }
  .project-dialog .deck__bar{ padding-top:var(--s4) }
}
.issue__cover--latest{ box-shadow:var(--glass-hi), var(--shadow-lift), 0 0 0 2px rgba(22,104,227,.25) }
.issue__headlines--small{ font-size:clamp(1.05rem,1.4vw,1.25rem); gap:4px }

/* ══ 投影片：左文右圖 ═════════════════════════════════════════ */
.deck__slide--split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s5),4vw,var(--s7)); align-items:center }
.deck__text{ display:flex; flex-direction:column; gap:var(--s3); min-width:0 }
.deck__visual{ min-width:0 }
.deck__img{ width:100%; border-radius:16px; box-shadow:var(--glass-hi), var(--shadow-lift); object-fit:cover; aspect-ratio:3/2 }
.deck__flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.deck__flow li{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.75); box-shadow:var(--glass-hi), var(--shadow-soft); font-size:1rem }
.deck__flow li + li{ position:relative }
.deck__flow li + li::before{ content:''; position:absolute; left:28px; top:-10px; width:2px; height:10px; background:var(--g-brand) }
.deck__flowN{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--g-brand); color:#fff; font-size:.85rem; font-weight:600 }
.deck__stats{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.deck__stats li{ display:flex; flex-direction:column; padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.75); box-shadow:var(--glass-hi), var(--shadow-soft) }
.deck__stats b{ font-family:var(--f-en); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; letter-spacing:-.02em; line-height:1.1 }
.deck__stats span{ color:var(--ink-2); font-size:.95rem }
.deck__list{ padding:4px 0 }
.deck__kicker{ display:inline-flex; align-items:center; gap:10px }
@media (max-width:760px){ .deck__slide--split{ grid-template-columns:1fr; align-items:start } .deck__visual{ order:-1 } .deck__stats{ grid-template-columns:1fr 1fr } }
.partner__logo{ height:34px; width:auto; max-width:180px; object-fit:contain }
a.partner{ text-decoration:none; color:inherit }
.partner__logo--mark{ height:30px; border-radius:8px }

/* ══ 活動列表：可點開的列 ══════════════════════════════════════ */
button.row--button{ width:100%; text-align:left; font:inherit; cursor:pointer; border:0 }
.row--button .row__side .icon{ color:#9BAFD0; transition:transform var(--dur) var(--ease), color var(--dur) ease }
@media (hover:hover) and (pointer:fine){ .row--button:hover{ transform:translateY(-3px); box-shadow:var(--glass-hi), var(--shadow-lift) } .row--button:hover .row__side .icon{ transform:translateX(3px); color:var(--b) } }
.event-detail{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s3) var(--s2) 0 }
.event-detail .h2{ max-width:30ch }
.event-detail__book{ display:grid; grid-template-columns:120px 1fr; gap:var(--s5); align-items:start }
.event-detail__book .book__cover{ width:120px }
@media (max-width:640px){ .event-detail__book{ grid-template-columns:1fr } }
.project-dialog__inner .card__top{ padding-right:56px }
.res-grid{ align-items:stretch }
.res-item{ height:100% }

/* ══ 首頁五張卡：你會得到什麼 ═══════════════════════════════ */
.format__get{ font-size:1rem; font-weight:700; line-height:1.4 }
/* ══ 聯絡區：LINE QR ════════════════════════════════════════ */
.qr{ display:flex }
.qr__img{ width:128px; height:128px; border-radius:16px; background:#fff; padding:8px; box-shadow:0 12px 30px -12px rgba(0,0,0,.4) }
@media (max-width:760px){ .qr{ display:none } }
.t-head{ display:block }

/* ══ 洞察文章 ═══════════════════════════════════════════════ */
.article{ max-width:820px; margin:0 auto }
.article__cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin-bottom:var(--s3); box-shadow:var(--glass-hi), var(--shadow-soft) }
.article__hero{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:18px; margin-bottom:var(--s5); box-shadow:var(--glass-hi), var(--shadow-lift) }
.article__summary{ font-weight:500; color:var(--ink) }
.article__body{ display:grid; gap:var(--s4); margin-top:var(--s5) }
.article__body .h2{ margin-top:var(--s4) }
.article__body .card__body{ font-size:1.06rem; line-height:1.9 }
.article__body a{ color:var(--b-ink); text-decoration:underline; text-underline-offset:3px }
.article__quote{ margin:0; padding:14px 20px; border-radius:16px; background:rgba(22,104,227,.06); color:var(--ink-2); line-height:1.8 }
/* 英文內文選填：有英文版時，依語言只顯示一份 */
html[lang="en"] .lang-zh-only:has(+ .lang-en-only){ display:none }
html:not([lang="en"]) .lang-en-only{ display:none }