/* ============================================================
   勁園AI檢定網 落地頁 v2（工單 #0005943 / PM 2026-09-04 原型）

   版型與互動 100% 沿用 brand-landing-exam.css——兩站原型的區塊結構相同
   （hero / directory / experience / features / pricing / trust / faq / cta），
   複製一份 28KB 只為換配色並不划算，且日後改版面要維護兩份、必然漂移。

   故本檔只做一件事：覆寫 .el-page 的顏色 token。Skill.cshtml 依序載入
   brand-landing-exam.css 再載本檔，後者覆蓋前者的變數，其餘規則全數共用。
   配色取自 brand-landing.css 的 .t-skill（松石綠 teal + 黃銅），與頁首/頁尾
   的品牌外殼一致。
   ============================================================ */

.el-page{
  /* 主色：藏青 → 松石綠（.t-skill 的 --ink / --navy / --navy-2） */
  --el-navy:#081F26;
  --el-navy-2:#0C2B33;
  --el-ink:#0F3A44;

  /* 輔色：國考金 → 黃銅（.t-skill 的 --gold / --gold-2 / --gold-deep） */
  --el-gold:#C7A24A;
  --el-gold-ink:#7A5F1F;
  --el-gold-soft:rgba(199,162,74,.45);
  --el-gold-wash:rgba(199,162,74,.10);

  /* 底色：米白偏冷，與松石綠相容（國考版 #fbf8f0 偏暖，配綠會顯髒） */
  --el-cream:#f7faf9;
  --el-line:#dfe6e4;

  /* 陰影跟著主色調偏冷 */
  --el-shadow:0 16px 48px rgba(8,31,38,.12);
}

/* 主視覺 CTA 用鏽橘（.t-skill 的 --seal），與黃銅拉開層次、避免整頁單一色相 */
.el-page .el-primary{
  background:#C2622D;
  color:#fff;
}

.el-page .el-primary:hover{
  background:#D77A45;
}

/* ===== 聯絡表單彈窗（工單 #0005943）===== */
.el-page .el-contact-modal{width:min(560px,calc(100vw - 32px))}

/* honeypot：真人不可見也不可聚焦；不用 display:none —— 部分機器人會略過 none 的欄位 */
.el-page .el-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.el-page .el-contact-form{margin-top:6px}
.el-page .el-form-row{margin-bottom:14px}
.el-page .el-form-row label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--el-ink)}
.el-page .el-req{margin-left:4px;color:#C2622D}

.el-page .el-form-row input,
.el-page .el-form-row textarea{
  width:100%;padding:10px 12px;border:1px solid var(--el-line);border-radius:10px;
  background:#fff;color:var(--el-ink);font:inherit;line-height:1.6;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.el-page .el-form-row input:focus,
.el-page .el-form-row textarea:focus{
  outline:none;border-color:var(--el-gold);box-shadow:0 0 0 3px var(--el-gold-wash);
}
.el-page .el-form-row textarea{resize:vertical;min-height:96px}

.el-page .el-form-msg{min-height:20px;margin:4px 0 0;font-size:13px}
.el-page .el-form-msg.is-ok{color:var(--el-green)}
.el-page .el-form-msg.is-err{color:var(--el-red)}

.el-page .el-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.el-page .el-form-actions button{min-height:44px;padding:0 20px;border-radius:10px;font-weight:700;cursor:pointer}
.el-page .el-form-actions button:focus-visible{outline:2px solid var(--el-gold);outline-offset:2px}

/* 許願入口 */
.el-page .el-wish{margin:22px 0 0;text-align:center;color:var(--el-muted);font-size:14px}
.el-page .el-wish-btn{
  border:0;background:none;padding:0 2px;color:var(--el-gold-ink);font:inherit;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.el-page .el-wish-btn:hover{color:#C2622D}
.el-page .el-wish-btn:focus-visible{outline:2px solid var(--el-gold);outline-offset:2px;border-radius:4px}

@media (max-width:600px){
  .el-page .el-form-actions{flex-direction:column-reverse}
  .el-page .el-form-actions button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .el-page .el-form-row input,
  .el-page .el-form-row textarea{transition:none}
}

/* ===== ALE 學習循環（厚環色塊，取代 PM 的 GIF）=====
   結構對齊原 GIF：厚環 + 五段色塊 + 環上編號 + 外側標籤 + 中心「學習成果」。
   文案與段界取自該 GIF（段界由像素取樣反推：段 i 起點 = -126 + 72i，
   第一段中心正落在 12 點鐘方向）。

   段色未沿用 GIF 原色——原色五者的明度與彩度各自為政（#2468B3 偏暗、
   #EE8122 偏亮），並置時像簡報圖表色。改為明度統一、彩度收一階的一組。

   ⚠️ 本區塊 .el-features 的底色是 #081F26（深藍黑，不是淺底），配色依此計算。
   每項需要兩個色，不能共用一個：
   ・--el-c  色塊色：要承載白色編號（白字對它 ≥4.5），同時在深底上可辨（≥3）
   ・--el-ct 標題色：當文字疊在深底上（≥4.5）
   兩者的亮度區間不相交（白字要求 ≤0.183、深底文字要求 ≥0.228），
   同一個值做不到，故拆開。色值僅調明度、保留色相與飽和度。
   色相順序（藍→青→綠→橘→紫）與語意維持不變，並錨定本頁品牌色：
   第 2 段取松石綠、第 4 段取鏽橘（.t-skill 的 --navy-3 / --seal 同色域），
   避免圖表自成一套色彩語言、與頁面其餘部分打架。
   色值只寫在 HTML 的 --el-c，CSS 不重列，避免兩處色表漂移。

   動畫一律 transition + .is-visible（IntersectionObserver 觸發），不用
   animation：animation 簡寫吃 var(--delay) 時 computed 會掉，先前踩過。
   各段刻意 stagger 重疊（.34s < 段長 .7s），讓循環讀起來是連貫的一筆，
   而不是五個各自播完的獨立動作。 */
.el-page .el-ale-flow{
  --el-seg-dur:.62s;         /* 單段生長時間 */
  --el-seg-gap:.30s;         /* 段與段的間隔（小於段長 → 重疊，動勢連貫） */
  --el-ease:cubic-bezier(.16,1,.3,1);        /* expo-out：起步快、收尾穩 */
  --el-pop:cubic-bezier(.34,1.36,.64,1);     /* 節點的輕微彈跳 */
  margin:48px auto 0;max-width:820px;
  padding:46px 0 70px;      /* 上下標籤會伸出環外，留出位置不壓到鄰近區塊 */
}
.el-page .el-ale-ring{position:relative;width:100%;aspect-ratio:1;max-width:400px;margin:0 auto}
.el-page .el-ale-svg{
  width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));   /* 深底：靠較重的落影撐出層次 */
}

.el-page .el-ale-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:13}

/* 構圖底：環外一圈極淡虛線，給環一個「座落之處」而非浮在空白上 */
.el-page .el-ale-guide{fill:none;stroke:rgba(255,255,255,.18);stroke-width:.5;stroke-dasharray:1 3.2}

/* 光源層：疊在色塊之上的單一高光→陰影，讓平塗有厚度。
   隨色塊跑完才淡入，才不會在空環時就先亮一圈 */
.el-page .el-ale-sheen{
  fill:none;stroke-width:13;pointer-events:none;
  opacity:0;transition:opacity .6s ease-out;
  transition-delay:calc(var(--el-seg-gap) * 5);
}
.el-page .el-ale-flow.is-visible .el-ale-sheen{opacity:1}

/* 每段：rotate 定位起點（見 HTML），stroke-dashoffset 由起點生長。
   60° 弧長 = 周長 251.33 / 6 = 41.89，扣 3.2 留段間縫 → 38.69。
   端點維持平頭（butt）。試過 round + dash 補償（24.89 + 圓頭 13 = 視覺 37.89），
   實測不可行：圓頭半徑 6.5 在 60° 的段上佔比過大，六段各自變成獨立膠囊、
   環的連續感消失。厚環用平頭是對的。 */
.el-page .el-ale-seg{
  fill:none;stroke:var(--el-c);stroke-width:13;
  stroke-dasharray:38.69 251.33;stroke-dashoffset:38.69;
  transition:stroke-dashoffset var(--el-seg-dur) var(--el-ease),
             stroke-width .2s ease-out, opacity .2s ease-out, filter .2s ease-out;
  transition-delay:var(--el-d,0s);
}
.el-page .el-ale-flow.is-visible .el-ale-seg{stroke-dashoffset:0}

/* 透明感應弧：可見色塊只有 13 寬，直接拿它當 hover 目標的話滑鼠要精準壓在環身上，
   且段間縫會把感應切斷、沿環滑動一路斷續。這條比色塊寬（24）且不扣縫
   （完整 60° 弧長 41.89），相鄰段的感應區相接。
   內緣 40-12=28 仍在中心圓（半徑 26.5）之外，不會搶走中心的事件。 */
.el-page .el-ale-hit{
  fill:none;stroke:transparent;stroke-width:24;
  stroke-dasharray:41.89 251.33;
  pointer-events:stroke;
}

/* hover：只強化被指的那一段（加粗＋提亮＋落影），其餘維持原樣。
   目標是包住「色塊＋感應弧」的 <g>，不是色塊本身——色塊太窄、且段中央被
   編號圓蓋住，直接掛在它上面會出現「滑到段中間反而沒反應」。

   實測後排除的做法：
   ・其他段淡到 .28：淡掉的段看起來像被停用，環外標籤又沒跟著淡，兩邊對不起來
   ・淡出掛 .el-ale-svg:hover：svg 感應區是整個方形，滑鼠進中心空白就六段全淡
   ・scale(1.045) 往外推：內緣由 153.5 移到 158.7，滑鼠停在段內側那圈時
     段會跑到滑鼠外面 → hover 消失 → 縮回 → 又碰到，無限閃爍。
     加粗則是往兩側同時擴張，感應範圍只增不減，安全。 */
@media (hover:hover){
  .el-page .el-ale-flow.is-visible .el-ale-slice:hover .el-ale-seg{
    stroke-width:19;
    filter:brightness(1.09) drop-shadow(0 6px 13px rgba(8,31,38,.34));
  }
  .el-page .el-ale-slice{cursor:default}
}

/* 環上編號（svg 內）：只在窄螢幕使用。桌機由 .el-ale-dot 擔任此角色
   （HTML 元素才能有白 ring 與陰影）；手機版 li 改直列後 dot 離開環面，
   改由這組 text 標號，與下方清單的編號對應，不必只靠顏色辨識。 */
.el-page .el-ale-num{
  display:none;
  fill:#fff;font-size:5.6px;font-weight:700;
  text-anchor:middle;dominant-baseline:central;
  font-variant-numeric:tabular-nums;pointer-events:none;
}

/* 中心：不用粗色邊，改極細邊 + 柔陰影，像一張浮起的圓卡 */
.el-page .el-ale-core{
  position:absolute;left:50%;top:50%;width:53%;aspect-ratio:1;container-type:inline-size;
  transform:translate(-50%,-50%) scale(.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;border-radius:50%;
  background:#fff;text-align:center;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .5s var(--el-ease), transform .5s var(--el-pop);
  transition-delay:calc(var(--el-seg-gap) * 5 + var(--el-seg-dur) * .5);
}
.el-page .el-ale-flow.is-visible .el-ale-core{opacity:1;transform:translate(-50%,-50%) scale(1)}
.el-page .el-ale-core b{
  font-size:clamp(28px,7cqw,34px);font-weight:800;color:var(--el-ink);
  letter-spacing:.06em;line-height:1;
}
.el-page .el-ale-core span{
  position:relative;padding-top:9px;
  font-size:13px;font-weight:600;color:var(--el-gold-ink);
  line-height:1.5;letter-spacing:.08em;
}
/* ALE 與副標之間的短分隔線：拉開主從，並呼應頁面的黃銅 */
.el-page .el-ale-core span::before{
  content:"";position:absolute;left:50%;top:0;
  width:26px;height:2px;margin-left:-13px;
  background:var(--el-gold);border-radius:1px;
}

/* 節點：實心色圓 + 白數字 + 白 ring，從環面浮起（原白底空心版偏輕） */
.el-page .el-ale-steps{margin:0;padding:0;list-style:none}
.el-page .el-ale-steps li{
  position:absolute;left:var(--el-x);top:var(--el-y);
  width:230px;text-align:center;
  /* li 是 230×28 的方框、橫跨環身，若攔截事件會在環上切出六段死區
     （實測沿環掃描有 51° 完全無法觸發）。標籤本身另外開回，文字仍可選取。 */
  pointer-events:none;
}
.el-page .el-ale-dot{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin:0 auto;
  border-radius:50%;background:var(--el-c);
  box-shadow:0 0 0 3px #fff, 0 2px 5px -1px rgba(8,31,38,.28);
  color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1;pointer-events:none;   /* 不擋下方感應弧，否則滑到段中央的編號會失去 hover */
}

/* 入場：節點彈、標籤稍後上浮，兩者分開才有前後層次 */
.el-page .el-ale-steps li{transform:translate(-50%,-50%)}
.el-page .el-ale-dot,
.el-page .el-ale-label{
  opacity:0;
  transition:opacity .38s ease-out, transform .5s var(--el-pop);
  transition-delay:var(--el-d,0s);
}
.el-page .el-ale-dot{transform:scale(.5)}
.el-page .el-ale-label{transform:translateY(5px)}
.el-page .el-ale-flow.is-visible .el-ale-dot{opacity:1;transform:scale(1)}
.el-page .el-ale-flow.is-visible .el-ale-label{opacity:1}

/* 標籤沿半徑推到環外（--el-dx/dy 為該節點的單位方向向量）：
   水平需讓開「環外緣 + 標籤半寬」，垂直只需讓開環外緣 + 半行高 */
.el-page .el-ale-label{
  display:block;position:absolute;left:50%;top:50%;width:230px;
  /* 寬度與外推距離為 PM 2026-09-08 新文案（每項兩句、最長 18 字）加大：
     原 136px / 134px / 74px 配的是舊短文案，直接換文案上下兩個標籤會壓到環身、
     斜角四個各多折一行留下孤字。230px = 最長那句剛好一行（18 字 × 12.5px），
     外推同步加大，否則標籤變寬後左右兩側會貼上環身。 */
  --el-out:translate(calc(var(--el-dx,0) * var(--el-out-x,150px)), calc(var(--el-dy,0) * var(--el-out-y,100px)));
  transform:translate(-50%,-50%) var(--el-out) translateY(5px);
}
.el-page .el-ale-flow.is-visible .el-ale-label{transform:translate(-50%,-50%) var(--el-out)}
.el-page .el-ale-label{pointer-events:auto}
.el-page .el-ale-label b{
  display:block;font-size:15px;font-weight:700;color:var(--el-ct);
  line-height:1.35;letter-spacing:.01em;
}
.el-page .el-ale-label>span{
  display:block;margin-top:5px;font-size:12.5px;font-weight:400;
  color:#B9C4D8;line-height:1.7;letter-spacing:.01em;   /* 同本區塊 .el-lead 的淺灰藍 */
}

/* ===== ALE 重點列（環下方）=====
   刻意不做成三張卡片——加了框線與底色會與上方的環搶視覺、也顯得廉價。
   改用「頂端一條色線 + 留白」分欄，重量壓在文字上。 */
.el-page .el-ale-hl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;
  max-width:900px;margin:64px auto 0;padding:0;list-style:none;
  /* margin-top 64：環下方的標籤是絕對定位、外推後不撐開 .el-ale-ring 的高，
     間距不夠時第 4 項的第二行會貼上本列的頂端色線（PM 新文案變兩行後才顯現）。 */
}
.el-page .el-ale-hl li{
  padding-top:16px;border-top:2px solid var(--el-ct);
  display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;
  column-gap:10px;row-gap:4px;align-items:center;
}
.el-page .el-ale-hl svg{
  grid-row:1;width:22px;height:22px;fill:none;
  stroke:var(--el-ct);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.el-page .el-ale-hl b{
  grid-row:1;font-size:15px;font-weight:700;color:#fff;
  line-height:1.35;letter-spacing:.01em;
}
.el-page .el-ale-hl span{
  grid-column:1 / -1;grid-row:2;
  font-size:12.5px;color:#B9C4D8;line-height:1.7;
}

@media (max-width:900px){
  .el-page .el-ale-hl{grid-template-columns:repeat(2,1fr);gap:24px 28px;margin-top:28px}
}
@media (max-width:600px){
  .el-page .el-ale-hl{grid-template-columns:1fr;gap:20px;margin-top:24px}
}

/* 900 以下改直列：PM 2026-09-08 新文案（每項最長 18 字）在 601–900 的窄標籤
   會折出孤字，原本「縮一階但仍掛在環外」的規則已放不下，故直列斷點由 600 提到 900。
   斷點對齊版型主體 brand-landing-exam.css 的 900 / 600。 */
@media (max-width:900px){
  /* 手機仍保留環（開發者指示）：390px 放不下環外標籤，故環只作視覺主體——
     保留六段色塊與中心 ALE，環上不放編號；六項改列在環下方，
     靠「清單左側色條 = 環上該段顏色」對應，不需要引線。 */
  .el-page .el-ale-flow{padding:0 0 10px;margin-top:32px}
  .el-page .el-ale-ring{position:relative;aspect-ratio:auto;max-width:none}
  .el-page .el-ale-svg{display:block;width:210px;height:210px;margin:0 auto}
  .el-page .el-ale-num{display:block}

  .el-page .el-ale-core{
    position:absolute;left:50%;top:105px;   /* 105 = svg 高的一半，對準環心 */
    transform:translate(-50%,-50%);
    width:112px;aspect-ratio:1;margin:0;padding:0;
    flex-direction:column;gap:3px;
    border:1px solid var(--el-line);border-radius:50%;background:#fff;
  }
  .el-page .el-ale-flow.is-visible .el-ale-core{transform:translate(-50%,-50%)}
  .el-page .el-ale-core b{font-size:23px}
  .el-page .el-ale-core span{font-size:11px;padding:0;padding-top:6px;letter-spacing:.04em}
  .el-page .el-ale-core span::before{width:20px}

  .el-page .el-ale-steps{
    position:relative;display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;
  }
  .el-page .el-ale-steps li{
    position:static;transform:none;width:auto;
    display:grid;grid-template-columns:28px 1fr;align-items:start;gap:12px;text-align:left;
    padding-left:14px;border-left:3px solid var(--el-c);
  }
  .el-page .el-ale-dot{margin-top:1px}   /* 對齊標題首行而非整塊置中 */
  .el-page .el-ale-label br{display:none}  /* 硬斷行是為環外窄標籤設的，直列時多餘 */
  .el-page .el-ale-label,
  .el-page .el-ale-flow.is-visible .el-ale-label{position:static;transform:none;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .el-page .el-ale-seg,.el-page .el-ale-dot,
  .el-page .el-ale-label,.el-page .el-ale-core{transition:none}
  .el-page .el-ale-seg{stroke-dashoffset:0}
  .el-page .el-ale-dot{opacity:1;transform:scale(1)}
  .el-page .el-ale-label{opacity:1;transform:translate(-50%,-50%) var(--el-out)}
  .el-page .el-ale-core{opacity:1;transform:translate(-50%,-50%) scale(1)}
}