/*
 * 一天聽一點 — Wireframe 樣式（SSOT）
 *
 * 由 layouts/main.php 的 inline <style> 抽出（第 3 站 FE-03：無 inline style 裝飾；
 * 外部檔屬於 CSP style-src 的 'self'，不會被 Content-Security-Policy 擋掉）。
 * 對齊公司 Figma WF 元件庫（baNiFTwbFZMMmLe8yiyHR0）。
 */

/* ===== 公司 WF 設計語言：黑白灰線框，唯一色=粉紅 section 標籤 ===== */
:root{
    --wf-ink:#4A4A4A; --wf-line:#3a3a3a; --wf-mut:#9a9a9a; --wf-hair:#dcdcdc;
    --wf-bg:#f4f5f6; --wf-ph:#dcdcdc; --wf-pink:#ffdbe6; --wf-solid:#3a3a3a;
}
*{ box-sizing:border-box; }
body{ background:#fff; color:var(--wf-ink);
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; margin:0; font-weight:400; overflow-x:hidden; }
a{ color:var(--wf-ink); }
/* 滿版網站（已移除 Figma frame 外框）；內容寬 1440 置中 */
.wf-frame{ background:#fff; }
.wf-inner{ max-width:1440px; margin:0 auto; }
/* 低調 section 標註（wireframe 溝通用；左側粉紅細線 + 小灰字） */
.wf-label{ display:inline-block; max-width:100%; word-break:break-word; color:#b1949e; font-weight:500; font-size:.72rem;
    padding-left:.55rem; border-left:2px solid var(--wf-pink); margin:0 0 1rem; letter-spacing:.02em; }
.wf-section{ padding:3rem 3.5rem; }
.wf-section + .wf-section{ padding-top:1rem; }
.wf-h1{ font-size:2rem; font-weight:700; margin:0 0 .3rem; }
/* section 置中標題（可加兩側細線） */
.wf-h2{ text-align:center; font-weight:700; font-size:1.15rem; margin:0 0 2rem; }
.wf-h2.rule{ display:flex; align-items:center; gap:1.2rem; }
.wf-h2.rule::before,.wf-h2.rule::after{ content:""; flex:1; height:1px; background:var(--wf-hair); }
/* 圖片/影片佔位：淺灰 + 細白 X 對角線 */
.wf-ph{ position:relative; background:var(--wf-ph); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wf-ph::before,.wf-ph::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(to top right, transparent calc(50% - .5px), #fff calc(50% - .5px), #fff calc(50% + .5px), transparent calc(50% + .5px)); }
.wf-ph::after{ background:linear-gradient(to bottom right, transparent calc(50% - .5px), #fff calc(50% - .5px), #fff calc(50% + .5px), transparent calc(50% + .5px)); }
.wf-ph > span{ position:relative; z-index:1; color:#8f8f8f; font-size:.75rem; background:rgba(255,255,255,.55); padding:0 .4rem; }
.wf-ph-16x9{ aspect-ratio:16/9; } .wf-ph-1x1{ aspect-ratio:1/1; }
.wf-ph-4x3{ aspect-ratio:4/3; } .wf-ph-3x2{ aspect-ratio:3/2; }
.wf-ph-banner{ height:460px; }
.wf-search-thumb{ width:240px; max-width:100%; flex-shrink:0; }
@media (max-width:575.98px){ .wf-search-thumb{ width:100%; } }
/* 文字佔位灰條 */
.wf-tline{ height:.7rem; background:#ededed; border-radius:2px; margin:.4rem 0; }
.wf-tline.w-80{ width:80%; } .wf-tline.w-60{ width:60%; } .wf-tline.w-40{ width:40%; }
.wf-dummy{ color:#c9c9c9; font-size:.82rem; line-height:1.9; word-break:break-word; }
.wf-card{ background:#fff; }
/* 按鈕 */
.wf-btn{ display:inline-block; border:1px solid var(--wf-line); background:#fff; color:#000;
    padding:.5rem 1.4rem; font-size:.8rem; text-decoration:none; letter-spacing:.05em; }
.wf-btn:hover{ background:#f0f0f0; }
.wf-btn-solid{ background:var(--wf-solid); color:#fff; border-color:var(--wf-solid); }
.wf-btn-solid:hover{ background:#222; color:#fff; }
.wf-btn-block{ display:block; text-align:center; width:100%; }
/* 深灰膠囊標籤（課程狀態/分類） */
.wf-pill{ display:inline-block; background:#e9e9e9; border:1px solid #cfcfcf; color:#555;
    font-size:.68rem; padding:.12rem .6rem; border-radius:10px; margin:.1rem .15rem 0 0; }
.wf-pill-dark{ background:var(--wf-solid); color:#fff; border-color:var(--wf-solid); }
/* 便條紙備註（開發交接用，黃） */
.wf-note{ display:inline-block; background:#fffceb; border:1px dashed #d9c85a; color:#7a6f2a; font-size:.7rem; padding:.3rem .6rem; margin-top:.5rem; border-radius:4px; }
/* 白便條紙模組標籤（新式編輯器用） */
.wf-tag{ display:inline-block; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); border:1px solid #eee;
    font-size:.72rem; color:#666; padding:.5rem .8rem; }
/* ===== Header ===== */
/* ⚠ 2026-08-13：這條 background:#fff 目前已被 style.css 的
   .has-menu-open .site-header{background:transparent!important;...}
   蓋掉（header 同時掛 wf-header／site-header 兩個 class，wireframe.css
   比 style.css 先載入，這條又沒有 !important，理論上贏不了）。
   日後若有人動到 style.css 那條的 !important，這裡會重新生效、
   讓漢堡選單展開時 header 又冒出白底——先在這裡留一筆紀錄。 */
.wf-header{ border-bottom:1px solid var(--wf-hair); position:sticky; top:0; background:#fff; z-index:30; }
.wf-header .inner{ display:flex; align-items:center; justify-content:space-between; padding:1.6rem 3.5rem; }
.wf-logo{ font-weight:300; font-size:1.5rem; letter-spacing:.32em; }
/* 右下角浮動社群選單（YouTube / Podcast，全站顯示） */
.wf-float{ position:fixed; right:1rem; bottom:1rem; z-index:1050; display:flex; flex-direction:column; gap:.55rem; }
.wf-float a{ width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid var(--wf-line);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:#333; text-decoration:none;
    box-shadow:0 2px 8px rgba(0,0,0,.16); }
.wf-float a:hover{ background:#f0f0f0; }
.wf-nav{ display:flex; align-items:center; gap:2.2rem; }
/* letter-spacing 會在最後一個字之後也留白，使各項右緣多出 .18em，flex gap 因此視覺不均；
   以等量負 margin 抵銷，讓項目間距真正等於 gap。 */
/* 導覽項目一律 inline-flex：
   Bootstrap 的 .dropdown-toggle::after 是 inline-block 且有實際高度（border .3em），
   若走 line box + vertical-align，帶箭頭的 <a> 會比其他 <a> 高，align-items:center
   對齊盒子中心後文字就錯位。改 inline-flex 後箭頭成為 flex item 自動垂直置中，
   不再參與 line box 計算，各項目高度一致。line-height:1 消除字級差造成的高度浮動。 */
.wf-nav a{ display:inline-flex; align-items:center; line-height:1;
    text-decoration:none; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#222; }
.wf-nav a.active{ font-weight:700; }
/* .dropdown 是 block，其 line box 會受繼承字級（16px）的隱形 strut 撐高；
   改為 flex 容器即無 strut，高度由內部 <a> 決定，與其他項目一致。 */
.wf-nav .dropdown{ display:flex; align-items:center; }
/* letter-spacing 在最後一個字之後也留白，使各項右緣多出 .18em、flex gap 視覺不均。
   補償要下在「flex item」層級（純 <a> 與 .dropdown 皆是），只加在 <a> 上會漏掉
   帶下拉的項目，造成兩種項目間距差 2.25px。 */
.wf-nav > a, .wf-nav > .dropdown{ margin-right:-.18em; }
/* 文字尾端已有 .18em 字距，箭頭只需再補一點點 */
.wf-nav .dropdown-toggle::after{ margin-left:.1em; }
.wf-crumb{ font-size:.75rem; color:var(--wf-mut); padding:1rem 3.5rem 0; letter-spacing:.05em; }
.wf-crumb a{ color:var(--wf-mut); text-decoration:none; }
/* ===== Footer ===== */
.wf-footer{ background:#2f2f2f; color:#cfcfcf; padding:3rem 3.5rem 2rem; }
.wf-footer a{ color:#cfcfcf; text-decoration:none; font-size:.82rem; }
.wf-footer .wf-label{ color:#9a9a9a; border-left-color:#6a6a6a; }
/* 表單 */
.wf-form-label{ text-align:right; font-size:.8rem; color:#666; padding-top:.5rem; }
.wf-input{ width:100%; border:1px solid #cfcfcf; background:#fafafa; padding:.5rem .7rem; font-size:.85rem; }
/* RWD 斷點提示 */
.wf-bp{ position:fixed; right:8px; bottom:8px; z-index:50; background:#000; color:#fff; font-size:.68rem; padding:.2rem .5rem; opacity:.5; border-radius:3px; }
@media (max-width:991px){
    .wf-section{ padding:2rem 1.3rem; }
    .wf-header .inner{ padding:1rem 1.3rem; flex-wrap:wrap; }
    .wf-nav{ gap:.5rem; flex-direction:column; align-items:flex-start; width:100%; margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--wf-hair); }
    /* 展開時浮層覆蓋在內容上方（不推擠下方內容）*/
    .wf-nav.show, .wf-nav.collapsing{ position:absolute; top:100%; left:0; right:0; z-index:40; margin-top:0; padding:1rem 1.3rem; background:#fff; box-shadow:0 12px 22px rgba(0,0,0,.16); border-top:1px solid var(--wf-hair); max-height:calc(100vh - 68px); overflow-y:auto; }
    .wf-nav a{ padding:.35rem 0; width:100%; border-radius:4px; }
    .wf-nav a:hover{ background:#f2f2f2; padding-left:.5rem; }
    /* 手機版子選單：改成向下延伸（inline 展開，非浮層），漢堡展開即顯示 */
    /* 手機版選單為靜態展開（見下方 .dropdown-menu），需還原 block 排列，
       否則 menu 會成為 flex item 與 toggle 並排 */
    .wf-nav .dropdown{ width:100%; display:block; }
    .wf-nav .dropdown-menu{ position:static !important; display:block; float:none; border:0; box-shadow:none; background:transparent; padding:.1rem 0 .3rem 1.3rem; margin:0; transform:none !important; }
    .wf-nav .dropdown-menu a{ padding:.3rem .5rem; color:#666; font-size:.85rem; border-radius:4px; }
    .wf-nav .dropdown-menu a:hover{ background:#f2f2f2; color:#000; }
    .wf-nav .dropdown-toggle::after{ display:none; }
    .wf-footer{ padding:2rem 1.3rem; } .wf-crumb{ padding:1rem 1.3rem 0; }
    .wf-logo{ font-size:1.15rem; letter-spacing:.14em; }
    .wf-h1{ font-size:1.5rem; }
    .wf-ph-banner{ height:220px; }
    .wf-h2.rule::before,.wf-h2.rule::after{ display:none; }
    .wf-label{ display:block; }
    .wf-h1{ overflow-wrap:break-word; }
}