/* ==========================================================
   Top ABC — 自訂樣式（Tailwind 之外的部分）
   原則：不做裝飾性動畫，只補 Tailwind 沒有的排版與元件。
   ========================================================== */

:root{
  --c-brand:#099FE1; --c-dark:#2B65B5; --c-ink:#12304C; --c-accent:#F49221;
}

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  font-family:'Manrope','Noto Sans TC',system-ui,sans-serif;
  background:#F8FAFC; color:#12304C;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* 標題用 Outfit，中文自動落回 Noto Sans TC。
   英數字比內文更有個性，中文維持易讀。 */
h1,h2,h3,.font-display{
  font-family:'Outfit','Noto Sans TC',system-ui,sans-serif;
  letter-spacing:-.005em;
}
/* 純英數的大標（例如 We Love TOP ABC）收緊字距才有份量 */
h1{ letter-spacing:-.02em; }

/* ---------- 捲軸 ---------- */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- 內文排版（文章 / 課程介紹） ---------- */
.rich{ color:#334155; line-height:1.95; font-size:1.0625rem; }
.rich > :first-child{ margin-top:0; }
.rich p{ margin:0 0 1.3em; }
.rich img{ max-width:100%; height:auto; border-radius:.75rem; margin:1.75em auto; display:block; }
.rich figure{ margin:1.75em 0; }
.rich figcaption{ text-align:center; font-size:.875rem; color:#64748B; margin-top:.6em; }
.rich h2,.rich h3,.rich h4{ color:#12304C; font-weight:600; line-height:1.45; margin:2em 0 .7em; }
.rich h2{ font-size:1.5rem; } .rich h3{ font-size:1.25rem; } .rich h4{ font-size:1.0625rem; }
.rich a{ color:var(--c-brand); text-decoration:underline; text-underline-offset:3px; word-break:break-word; }
.rich a:hover{ color:var(--c-dark); }
.rich ul,.rich ol{ margin:0 0 1.3em; padding-left:1.4em; }
.rich ul{ list-style:disc; } .rich ol{ list-style:decimal; }
.rich li{ margin-bottom:.45em; }
.rich strong{ color:#12304C; font-weight:600; }
.rich blockquote{ border-left:3px solid var(--c-brand); background:#F8FAFC;
                  padding:.9em 1.2em; margin:1.6em 0; color:#475569; }
.rich iframe{ max-width:100%; border-radius:.75rem; }
.rich table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem; }
.rich th,.rich td{ border:1px solid #E2E8F0; padding:.65em .85em; text-align:left; }
.rich th{ background:#F8FAFC; font-weight:600; }
.rich hr{ border:0; border-top:1px solid #E2E8F0; margin:2.2em 0; }

/* ---------- 表單 ---------- */
.field{
  width:100%; padding:.7rem .9rem; border-radius:.5rem;
  border:1px solid #CBD5E1; background:#fff; color:#12304C;
  font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.field:focus{ outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(9,159,225,.14); }
.field::placeholder{ color:#94A3B8; }
.field:disabled{ background:#F1F5F9; color:#94A3B8; }
.field-label{ display:block; font-weight:500; font-size:.875rem; color:#334155; margin-bottom:.4rem; }
.field-hint{ font-size:.8125rem; color:#64748B; margin-top:.35rem; }
.field-error{ border-color:#DC2626; }

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:500; border-radius:.5rem; line-height:1.2; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible{ outline:2px solid var(--c-brand); outline-offset:2px; }
.btn-primary{ background:var(--c-accent); color:#fff; }
.btn-primary:hover{ background:#DD7712; }
.btn-blue{ background:var(--c-brand); color:#fff; }
.btn-blue:hover{ background:#0A7CB4; }
.btn-dark{ background:#12304C; color:#fff; }
.btn-dark:hover{ background:#0B2136; }
.btn-ghost{ background:#fff; color:#334155; border:1px solid #CBD5E1; }
.btn-ghost:hover{ border-color:#94A3B8; background:#F8FAFC; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- 表格 ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{ text-align:left; font-weight:600; color:#475569; background:#F8FAFC;
         padding:.7rem 1rem; border-bottom:1px solid #E2E8F0; white-space:nowrap; }
.tbl td{ padding:.85rem 1rem; border-bottom:1px solid #F1F5F9; color:#334155; vertical-align:middle; }
.tbl tbody tr:hover{ background:#F8FAFC; }
.tbl tbody tr:last-child td{ border-bottom:0; }

/* ---------- 標籤 ---------- */
.tag{ display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:500;
      padding:.2rem .55rem; border-radius:.3rem; }

/* ---------- PIN 輸入 ---------- */
.pin-input{
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  letter-spacing:.5em; text-align:center; text-transform:uppercase;
  font-size:1.5rem; font-weight:600; padding:.85rem .5rem .85rem 1.1rem;
}

/* ---------- 進度條 ---------- */
.bar{ height:.375rem; border-radius:999px; background:#E2E8F0; overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:999px; background:var(--c-brand);
             transition:width .5s ease; }

/* ---------- 行數裁切 ---------- */
.clamp-1,.clamp-2,.clamp-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-1{ -webkit-line-clamp:1; } .clamp-2{ -webkit-line-clamp:2; } .clamp-3{ -webkit-line-clamp:3; }

/* ---------- 無障礙 ---------- */
.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){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- 列印（結業證書） ---------- */
@media print{
  header,footer,nav,.no-print{ display:none!important; }
  body{ background:#fff!important; }
  main{ padding:0!important; }
  .print-sheet{ box-shadow:none!important; border:1px solid #CBD5E1!important; margin:0!important; }
}

/* ==========================================================
   毛玻璃 (Glassmorphism)
   ========================================================== */
.glass{
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);
}
.glass-strong{
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
          backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.24);
}
/* 淺色底上使用的毛玻璃（導覽列、浮動卡片） */
.glass-light{
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.65);
}
/* 不支援 backdrop-filter 的瀏覽器要有可讀的退路 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass       { background:rgba(12,32,52,.62); }
  .glass-strong{ background:rgba(12,32,52,.72); }
  .glass-light { background:rgba(255,255,255,.94); }
}

/* ==========================================================
   Hero 輪播：緩慢放大 (Ken Burns) + 交叉淡出
   5 張 × 每張 7 秒 = 35 秒一輪
   ========================================================== */
.hero-stage{ position:absolute; inset:0; overflow:hidden; }
.hero-stage li{ position:absolute; inset:0; margin:0; list-style:none; }
.hero-stage img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  opacity:0; transform:scale(1);
  animation:heroKenBurns 35s linear infinite;
  will-change:opacity, transform;
}
.hero-stage li:nth-child(1) img{ animation-delay:0s; }
.hero-stage li:nth-child(2) img{ animation-delay:7s; }
.hero-stage li:nth-child(3) img{ animation-delay:14s; }
.hero-stage li:nth-child(4) img{ animation-delay:21s; }
.hero-stage li:nth-child(5) img{ animation-delay:28s; }

@keyframes heroKenBurns{
  0%   { opacity:0; transform:scale(1.00); }
  4%   { opacity:1; }
  20%  { opacity:1; transform:scale(1.085); }
  24%  { opacity:0; transform:scale(1.10); }
  100% { opacity:0; transform:scale(1.10); }
}
/* 第一張先顯示，避免載入瞬間全黑 */
.hero-stage li:first-child img{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .hero-stage img{ animation:none; opacity:0; transform:none; }
  .hero-stage li:first-child img{ opacity:1; }
}

/* ==========================================================
   Hero 遮罩：左側實藍保證白字可讀，往右淡出露出照片
   ========================================================== */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(9,30,52,.97)   0%,
      rgba(10,35,60,.95)  28%,
      rgba(13,52,88,.86)  45%,
      rgba(12,85,140,.55) 66%,
      rgba(14,110,170,.22) 85%,
      rgba(16,120,185,.10) 100%);
}
/* 底部再壓一層，讓毛玻璃資訊列有底 */
.hero-scrim::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,30,52,.30) 0%, transparent 30%, rgba(9,30,52,.55) 100%);
}
/* 手機：文字佔滿整個寬度，改用整面遮罩 */
@media (max-width:900px){
  /* 手機：文字佔滿寬度，改成上下向漸層。
     上緣沒有文字所以壓淡讓照片露出來，文字帶再加深。 */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(9,30,52,.55)  0%,
      rgba(9,30,52,.72)  14%,
      rgba(10,35,60,.90) 26%,
      rgba(11,42,72,.90) 60%,
      rgba(10,55,92,.72) 78%,
      rgba(9,45,78,.86) 100%);
  }
  .hero-scrim::after{ background:none; }
}


/* ==========================================================
   Hero 材質：細格線 + 極淡顆粒
   純 CSS，沒有 JS、不佔用主執行緒
   ========================================================== */
.hero-texture{
  position:absolute; inset:0; pointer-events:none;
  /* 1px 細格線，56px 一格 */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.055) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.055) 0 1px, transparent 1px 56px);
  /* 只在左側文字區顯示，往右淡出讓照片乾淨 */
  -webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 62%, transparent 82%);
          mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 62%, transparent 82%);
}
/* 極淡顆粒，讓大面積漸層不會太「數位」 */
.hero-texture::after{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media (max-width:900px){
  .hero-texture{
    background-size:44px 44px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 88%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 88%);
  }
}

/* ==========================================================
   頁面載入進度條
   ========================================================== */
#nav-progress{
  position:fixed; top:0; left:0; z-index:60; height:3px; width:0;
  background:linear-gradient(90deg, var(--c-brand), var(--c-accent));
  box-shadow:0 0 8px rgba(9,159,225,.6);
  transition:width .25s ease, opacity .3s ease .1s;
  opacity:0; pointer-events:none;
}
#nav-progress.on{ opacity:1; }

/* ==========================================================
   點擊 / 互動反饋
   ========================================================== */
/* 所有按鈕與連結卡片：按下去會有回彈 */
.btn{ transition:background-color .15s, border-color .15s, color .15s,
                 box-shadow .15s, transform .12s cubic-bezier(.34,1.4,.64,1); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px) scale(.985); }

/* 卡片式連結（課程卡、文章卡、單元列）*/
a.card, li > a, .tbl tbody tr{ transition:transform .18s ease, box-shadow .18s ease, background-color .15s; }
a:active > img{ transform:scale(.995); }

/* 漣漪：點擊處擴散一圈，位置由 JS 帶入 CSS 變數 */
.ripple{ position:relative; overflow:hidden; }
.ripple::after{
  content:''; position:absolute; left:var(--rx,50%); top:var(--ry,50%);
  width:0; height:0; border-radius:50%; transform:translate(-50%,-50%);
  background:currentColor; opacity:0; pointer-events:none;
}
.ripple.rippling::after{ animation:rip .55s ease-out; }
@keyframes rip{
  0%   { width:0; height:0; opacity:.22; }
  100% { width:260%; height:260%; opacity:0; }
}

/* 表單送出中：按鈕變灰並顯示轉圈 */
.btn[data-loading="1"]{ pointer-events:none; opacity:.75; }
.btn[data-loading="1"]::before{
  content:''; width:.95em; height:.95em; margin-right:.15em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 鍵盤操作可見的焦點框 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--c-brand); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  .btn:hover, .btn:active{ transform:none; }
  .ripple.rippling::after{ animation:none; }
  #nav-progress{ transition:none; }
}

/* ==========================================================
   捲動進場動效
   ------------------------------------------------------------------
   ⚠️ 關鍵：隱藏樣式只在 <html class="js"> 時生效。
   JS 沒跑、被擋掉、或出錯 → 內容一律正常顯示，絕不會像之前的 AOS
   那樣把整個區塊卡在 opacity:0 讓使用者看到空白。
   ========================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity, transform;
}
.js [data-reveal="left"] { transform:translateX(-22px); }
.js [data-reveal="right"]{ transform:translateX(22px); }
.js [data-reveal="zoom"] { transform:scale(.965); }

/* 選擇器 scope 與隱藏規則一致（.js 前綴），特異性更高，必定勝出 */
.js [data-reveal].shown,
[data-reveal].shown{
  opacity:1 !important;
  transform:none !important;
  transition:opacity .62s cubic-bezier(.22,.7,.3,1),
             transform .62s cubic-bezier(.22,.7,.3,1);
  transition-delay:var(--d, 0ms);
}

/* 卡片浮起 */
.lift{ transition:transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s ease, border-color .2s ease; }
.lift:hover{ transform:translateY(-5px); box-shadow:0 14px 34px -14px rgba(15,35,54,.24); }

/* 圖片容器 hover 緩慢推近 */
.zoom-wrap{ overflow:hidden; }
.zoom-wrap img{ transition:transform .7s cubic-bezier(.22,.7,.3,1); }
.lift:hover .zoom-wrap img,
.zoom-wrap:hover img{ transform:scale(1.06); }

/* 導覽列捲動後縮起並加陰影 */
#site-header{ transition:box-shadow .25s ease, background-color .25s ease, padding .25s ease; }
#site-header.scrolled{
  box-shadow:0 1px 3px rgba(15,35,54,.06), 0 8px 24px -16px rgba(15,35,54,.22);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
          backdrop-filter:saturate(160%) blur(12px);
}
#site-header.scrolled img{ transform:scale(.92); transition:transform .25s ease; }

/* 連結底線由左往右展開 */
.underline-grow{ position:relative; }
.underline-grow::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:currentColor; transition:width .28s cubic-bezier(.22,.7,.3,1);
}
.underline-grow:hover::after{ width:100%; }

/* 箭頭在 hover 時往前推 */
.arrow-slide i,
.arrow-slide .fa-arrow-right{ transition:transform .25s cubic-bezier(.22,.7,.3,1); }
.arrow-slide:hover i,
.arrow-slide:hover .fa-arrow-right{ transform:translateX(4px); }

/* 統計數字跳動 */
.tick{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .lift:hover{ transform:none; }
  .zoom-wrap img, .lift:hover .zoom-wrap img{ transform:none; }
  .underline-grow::after{ transition:none; }
}

/* ==========================================================
   統一元件：卡片
   全站的課程卡、文章卡、花絮卡都用同一組 class，
   之後要調整只需要改這裡一處。
   ========================================================== */
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #E2E8F0; border-radius:1rem;
  transition:transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:#83C8ED;
  box-shadow:0 14px 34px -14px rgba(15,35,54,.24);
}
.card-media{ position:relative; overflow:hidden; background:#F1F5F9; aspect-ratio:16/10; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block;
                 transition:transform .7s cubic-bezier(.22,.7,.3,1); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media .placeholder{ display:grid; place-items:center; height:100%; color:#CBD5E1; font-size:1.5rem; }
.card-body{ display:flex; flex-direction:column; flex-grow:1; padding:1.25rem; gap:.5rem; }
.card-eyebrow{ font-size:.8125rem; font-weight:500; color:#0A7CB4; }
.card-title{ font-family:'Outfit','Noto Sans TC',sans-serif;
             font-size:1.0625rem; font-weight:600; line-height:1.45; color:#12304C; }
.card:hover .card-title{ color:#0A7CB4; }
.card-text{ font-size:.9375rem; line-height:1.7; color:#475569; }
.card-foot{ margin-top:auto; padding-top:.9rem; border-top:1px solid #F1F5F9;
            display:flex; align-items:center; justify-content:space-between;
            font-size:.8125rem; color:#64748B; }
/* 整張卡可點：連結覆蓋整個卡片，但文字仍可選取 */
.card-link::after{ content:''; position:absolute; inset:0; z-index:1; }
.card{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .card:hover{ transform:none; }
  .card:hover .card-media img{ transform:none; }
}

/* ---------- 公告輪播 ---------- */
.announce-item{
  opacity:0; transform:translateY(60%);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.7,.3,1);
  pointer-events:none;
}
.announce-item.is-on{ opacity:1; transform:none; pointer-events:auto; }
.announce-item.is-out{ opacity:0; transform:translateY(-60%); }
.announce-dot.is-on{ background:#F49221; width:1rem; border-radius:99px; }
@media (prefers-reduced-motion:reduce){
  .announce-item{ transition:none; }
}

/* 卡片底部若改為多行，取消 justify-between 的橫排 */
.card-foot.flex-col{ justify-content:flex-start; }