/* ==========================================================================
   guides-website-spatialui.css
   企業網站建置指南（/guides/website/*）專用版型
   --------------------------------------------------------------------------
   設計方向：
   - 品牌感：延用首頁色票（navy / cyan / blue）與同一套字體堆疊
   - Spatial UI：整頁一張連續的空間底（漸層 + cyan 導引線），不做浮動玻璃卡片
   - Editorial：左側邊欄放章節標籤，右側單欄文字，行寬控制在可讀範圍
   - Continuous：段落之間只用 hairline 分隔，沒有一段一張卡
   - 輕量：無 backdrop-filter、無 3D transform、無裝飾性動畫
   所有規則都收在 .guides-wrap.gw 之下，不影響其他 guides 系列。
   --------------------------------------------------------------------------
   本檔原本由 v1 base → 2026-09 inner-page → 2026-09-04 brand-alignment v5
   三層疊寫而成，同一個選擇器最多出現三次。已整併成單一份最終值，
   RWD / print 統一收在檔尾，維持原本的視覺結果。
   ========================================================================== */

/* ==========================================================================
   01. Tokens 與版面根節點
   ========================================================================== */
.guides-wrap.gw{
    /* 色票（與首頁 index.css 同一組） */
    --gw-navy:#0a1f33;
    --gw-blue:#10bde9;
    --gw-cyan:#008cab;
    --gw-ink:#112735;
    --gw-body:#364650;
    --gw-muted:#546571;
    --gw-faint:#6a8594;
    --gw-line:rgba(10,57,79,.105);
    --gw-line-soft:rgba(10,57,79,.065);

    /* 版面 */
    --gw-wrap:1040px;
    --gw-gutter:24px;
    --gw-rail:142px;
    --gw-gap:50px;

    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    font-size:20px;
    line-height:1.95;
    letter-spacing:.02em;
    color:var(--gw-body);
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;

    /* 版面撐滿內容區高度，短頁面時 CTA 仍會貼齊頁尾 */
    display:flex;
    flex-direction:column;

    /* 環境光：藍左、暖右，濃度壓低避免像首頁首屏 */
    background:
        radial-gradient(46rem 34rem at -8% 30%,rgba(45,205,238,.10),transparent 72%),
        radial-gradient(44rem 34rem at 106% 18%,rgba(226,183,183,.095),transparent 72%),
        radial-gradient(38rem 28rem at 86% 92%,rgba(42,194,225,.045),transparent 76%),
        linear-gradient(180deg,#f7fbfc 0%,#f5fafb 52%,#f2f8fa 100%);
}

/* ---------- 內容容器：文字量測欄 ---------- */
.gw .paper{
    width:min(var(--gw-wrap),calc(100% - var(--gw-gutter) * 2));
    margin-inline:auto;
    padding:0;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
}

/* ==========================================================================
   02. 內文連結（覆寫 guides.css 的 a.link）
   ========================================================================== */
.gw a.link{
    margin:0;
    padding-bottom:1px;
    border-bottom:1px solid rgba(0,143,174,.42);
    color:#037d98;
    text-decoration:none;
    transition:color .18s ease,border-color .18s ease;
}
.gw a.link:hover{color:var(--gw-navy);border-bottom-color:var(--gw-navy);}

/* ==========================================================================
   03. Hero
   ========================================================================== */
.gw .hero{
    padding:clamp(38px,4.8vw,62px) 0 clamp(30px,3.6vw,46px);
    display:grid;
    grid-template-columns:var(--gw-rail) minmax(0,1fr);
    column-gap:var(--gw-gap);
}
.gw .hero > *{grid-column:2;}

/* breadcrumb：借用首頁 HOW TO CHOOSE 類的小膠囊語言 */
.gw .guides-breadcrumb{
    grid-column:1/-1;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    align-items:center;
    flex-wrap:wrap;
    gap:0 .5em;
    min-height:26px;
    margin:0 0 clamp(18px,2.2vw,26px);
    padding:4px 11px 3px;
    border:1px solid rgba(17,93,119,.06);
    background:rgba(255,255,255,.78);
    box-shadow:0 5px 16px rgba(20,61,80,.035);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:#3c6676;
}
.gw .guides-breadcrumb a{
    padding-bottom:0;
    border-bottom:0;
    color:#3c6676;
    text-decoration:none;
    margin-left: .5em;
}
/* 膠囊裡的連結沿用內文連結色，但不帶底線 */
.gw .guides-breadcrumb a.link{color:#037d98;}
/* 當前頁：不是連結，維持膠囊本身的字色 */
.gw .guides-breadcrumb .current{color:inherit;}
.gw .guides-breadcrumb a:hover{color:var(--gw-cyan);}

.gw .hero h1{
    margin:0;
    max-width:21em;
    font-size:clamp(30px,3.5vw,46px);
    font-weight:700;
    line-height:1.34;
    letter-spacing:-.012em;
    color:var(--gw-navy);
    text-wrap:balance;
}

/* 文章編號：邊欄折頁號，不是裝飾徽章 */
.gw .t-num{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-top:20px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.24em;
    color:#406676;
    font-variant-numeric:tabular-nums;
}
.gw .t-num::after{
    content:"";
    width:46px;
    height:1px;
    background:rgba(0,184,234,.55);
}

.gw .hero .lead{
    margin:clamp(20px,2.4vw,30px) 0 0;
    max-width:39em;
    font-size:clamp(19.5px,1.35vw,21px);
    line-height:1.9;
    color:#51636c;
}

.gw .hero-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 22px;
    margin-top:26px;
}

/* 主要行動：沿用主網站 .lugoNavCta 的形狀與配色 */
.gw .hero-links a.primary,
.gw a.gw-btn{
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 22px;
    border-radius:10px;
    background:#0d273b;
    box-shadow:0 8px 18px rgba(11,34,55,.08);
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.03em;
    text-decoration:none;
    transition:background .18s ease,color .18s ease;
}
.gw .hero-links a.primary:hover,
.gw a.gw-btn:hover{background:var(--gw-blue);color:#052335;}

/* 次要行動：文字連結，不做第二顆按鈕 */
.gw .hero-links a:not(.primary){
    padding-bottom:2px;
    border-bottom:1px solid rgba(0,143,174,.42);
    color:#037d98;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
}
.gw .hero-links a:not(.primary):hover{color:var(--gw-navy);border-bottom-color:var(--gw-navy);}

/* ==========================================================================
   04. Section：邊欄標籤 + 單欄正文，段落之間只有 hairline
   ========================================================================== */
.gw .section{
    display:grid;
    grid-template-columns:var(--gw-rail) minmax(0,1fr);
    column-gap:var(--gw-gap);
    padding:clamp(32px,4vw,54px) 0;
    border-top:1px solid var(--gw-line);
}
.gw .section > *{grid-column:2;min-width:0;}

.gw .section-label{
    grid-column:1;
    display:inline-flex;
    box-sizing:border-box;
    width:max-content;
    max-width:100%;
    align-items:center;
    min-height:25px;
    margin:0;
    padding:3px 9px 2px;
    border:1px solid rgba(17,93,119,.055);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 4px 12px rgba(20,61,80,.025);
    font-size:12.5px;
    font-weight:800;
    font-style:italic;
    letter-spacing:.16em;
    line-height:1.35;
    text-transform:uppercase;
    color:#3f6777;
    overflow-wrap:break-word;
}

.gw .section-head{margin:0 0 clamp(14px,1.6vw,20px);}

.gw .section-head h2,
.gw .section h2{
    margin:0;
    max-width:29em;
    font-size:clamp(23px,2.1vw,30px);
    font-weight:700;
    line-height:1.5;
    letter-spacing:.005em;
    color:#0f283a;
    text-wrap:balance;
}

/* .section-head p 的行寬與間距一律由下方 .gw .section p 決定 */
.gw .section-head p{color:var(--gw-muted);}

.gw .section h3{
    margin:clamp(26px,3vw,38px) 0 8px;
    font-size:clamp(21px,1.75vw,23px);
    font-weight:700;
    line-height:1.7;
    color:#0f283a;
}

.gw .section p{
    margin:0 0 14px;
    max-width:40em;
    text-wrap:pretty;
}
.gw .section p:last-child{margin-bottom:0;}

.gw .section strong{color:#0f283a;font-weight:700;}

/* 內文重點：以品牌色底線取代 <u> 的預設下劃線 */
.gw .section u{
       text-decoration: none;
    background-image: linear-gradient(to bottom, transparent calc(100% - 40px), #eefa21 40px);
}

/* ---------- 清單：hairline 節奏，不用色塊 ---------- */
.gw .section ul:not(.entry-list),
.gw .section ol{
    margin:6px 0 20px;
    padding:0;
    list-style:none;
    max-width:40em;
}

.gw .section ul:not(.entry-list) > li{
    position:relative;
    margin:0;
    padding:9px 0 9px 22px;
    border-bottom:1px solid var(--gw-line-soft);
}
.gw .section ul:not(.entry-list) > li:last-child{border-bottom:0;}
.gw .section ul:not(.entry-list) > li::before{
    content:"";
    position:absolute;
    left:1px;
    top:calc(9px + .95em);
    width:9px;
    height:1px;
    background:var(--gw-blue);
}

.gw .section ol{counter-reset:gwol;}
.gw .section ol > li{
    counter-increment:gwol;
    position:relative;
    margin:0;
    padding:9px 0 9px 40px;
    border-bottom:1px solid var(--gw-line-soft);
}
.gw .section ol > li:last-child{border-bottom:0;}
.gw .section ol > li::before{
    content:counter(gwol,decimal-leading-zero);
    position:absolute;
    left:0;
    top:9px;
    font-size:13.5px;
    font-weight:800;
    letter-spacing:.06em;
    line-height:2.85;
    color:var(--gw-faint);
    font-variant-numeric:tabular-nums;
}

/* ---------- 內文中段的行動區塊：深色跳脫帶 ----------
   刻意與周圍的淺色閱讀版面拉開對比，橫跨 rail + 正文兩欄。
   左欄放 eyebrow 與大標，右欄放說明與白底按鈕，右上角一抹暖色光暈。 */
.gw .inline-cta{
    grid-column:1/-1;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px,4vw,64px);
    align-items:start;
    margin:clamp(28px,3.4vw,44px) 0 clamp(12px,1.6vw,20px);
    padding:clamp(30px,3.6vw,52px) clamp(26px,3.4vw,56px);
    border:0;
    border-radius:clamp(18px,2vw,28px);
    background:
        radial-gradient(20rem 15rem at 99% -6%,rgba(247,196,124,.58),transparent 60%),
        radial-gradient(26rem 19rem at 104% 6%,rgba(221,124,116,.34),transparent 64%),
        linear-gradient(160deg,#123047 0%,#0d2739 56%,#0b2032 100%);
    box-shadow:0 26px 60px rgba(11,34,55,.20);
    overflow:hidden;
}

/* eyebrow：外框膠囊，對應參考稿的 WEBSITE REDESIGN & MAINTENANCE */
.gw .inline-cta .inline-cta-kicker{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
    max-width:100%;
    margin:0 0 clamp(14px,1.8vw,22px);
    padding:6px 16px 5px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    font-size:12px;
    font-weight:800;
    font-style:italic;
    letter-spacing:.16em;
    line-height:1.5;
    text-transform:uppercase;
    color:#9fd6ea;
}

.gw .inline-cta .inline-cta-title{
    grid-column:1;
    grid-row:2;
    margin:0;
    max-width:14em;
    font-size:clamp(24px,2.4vw,34px);
    font-weight:700;
    line-height:1.45;
    letter-spacing:-.01em;
    color:#fff;
}

.gw .inline-cta > p:not(.inline-cta-title):not(.inline-cta-kicker){
    grid-column:2;
    grid-row:2;
    margin:0;
    max-width:32em;
    font-size:16.5px;
    line-height:1.85;
    color:rgba(255,255,255,.80);
}

.gw a.inline-cta-link{
    grid-column:2;
    grid-row:3;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    min-height:48px;
    margin-top:clamp(18px,2.2vw,26px);
    padding:0 24px;
    border:0;
    border-radius:10px;
    background:#fff;
    box-shadow:0 10px 24px rgba(4,17,28,.24);
    color:#0d2739;
    font-size:16px;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    transition:background .18s ease,color .18s ease;
}
.gw a.inline-cta-link:hover{background:var(--gw-blue);color:#052335;}

/* 窄版：收成單欄，順序 eyebrow → 大標 → 說明 → 按鈕 */
@media screen and (max-width:900px){
    .gw .inline-cta{
        display:block;
        padding:26px 22px 28px;
        border-radius:18px;
    }
    .gw .inline-cta .inline-cta-title{max-width:none;}
    .gw .inline-cta > p:not(.inline-cta-title):not(.inline-cta-kicker){
        margin-top:14px;
        max-width:none;
    }
}

/* ==========================================================================
   05. 文章列表（index）：連續列，不是三張卡
   ========================================================================== */
.gw .entry-list{
    margin:clamp(10px,1.4vw,18px) 0 0;
    padding:0;
    list-style:none;
}

.gw .entry{border-top:1px solid var(--gw-line);}
.gw .entry:last-child{border-bottom:1px solid var(--gw-line);}

.gw .entry-link{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    column-gap:20px;
    align-items:start;
    padding:clamp(20px,2.4vw,26px) 0;
    color:inherit;
    text-decoration:none;
}

.gw .entry-no{
    font-size:14px;
    font-weight:800;
    letter-spacing:.12em;
    line-height:2.5;
    color:var(--gw-faint);
    font-variant-numeric:tabular-nums;
    transition:color .18s ease;
}

.gw .entry-body{min-width:0;}

.gw .entry-title{
    font-size:clamp(19px,1.6vw,22px);
    font-weight:700;
    line-height:1.6;
    color:var(--gw-navy);
    transition:color .18s ease;
}

.gw .entry p{
    margin:6px 0 0;
    max-width:34em;
    font-size:17px;
    line-height:1.85;
    color:var(--gw-muted);
}

.gw a.entry-link:hover .entry-title{color:var(--gw-cyan);}
.gw a.entry-link:hover .entry-no{color:var(--gw-blue);}

/* 尚未上線的文章：留在同一條列表節奏裡，只降對比 */
.gw .entry-link:not(a) .entry-title{color:#4e606c;font-weight:400;}
.gw .entry-link:not(a) .entry-no{color:#70909f;}
.gw .entry-link:not(a) p{color:var(--gw-faint);}

/* ==========================================================================
   06. FAQ（AEO / GEO：問題用 h3，答案緊接段落，機器與人都好讀）
   ========================================================================== */
.gw .faq-q{
    margin-right:9px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    color:#0d98bb;
}
.gw .faq-q::before{content:"Q";}

.gw .section h3:has(> .faq-q){position:relative;padding-left:26px;}
.gw .section h3:has(> .faq-q) > .faq-q{position:absolute;left:0;top:0;margin:0;line-height:2.4;}

.gw .faq-a{
    position:relative;
    padding-left:26px;
    max-width:40em;
    color:var(--gw-muted);
}
.gw .faq-a::before{
    content:"A";
    position:absolute;
    left:0;
    top:0;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:2.6;
    color:var(--gw-faint);
}

/* ==========================================================================
   07. 文末行動：內頁式收尾，柔和橫向資訊帶（不是首頁滿版深色 banner）
   ========================================================================== */
.gw .cta{
    display:grid;
    grid-template-columns:var(--gw-rail) minmax(0,1fr);
    column-gap:var(--gw-gap);
    margin:clamp(18px,3vw,34px) 0 clamp(40px,5vw,68px);
    padding:clamp(26px,3.2vw,36px) clamp(24px,3.2vw,38px);
    border:1px solid rgba(10,57,79,.055);
    border-radius:22px;
    background:
        linear-gradient(100deg,rgba(207,247,251,.72),rgba(250,250,230,.72)),
        rgba(255,255,255,.72);
    box-shadow:0 16px 36px rgba(19,65,84,.06);
    color:var(--gw-body);
}
.gw .cta > *{grid-column:2;min-width:0;}

.gw .cta .section-label{grid-column:1;color:#627a86;}

.gw .cta h2{
    margin:0;
    max-width:24em;
    font-size:clamp(22px,2vw,29px);
    font-weight:700;
    line-height:1.5;
    color:var(--gw-navy);
}

.gw .cta p{
    margin:10px 0 0;
    max-width:34em;
    color:var(--gw-muted);
}

.gw .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:20px;
}

.gw .footer-links a{
    display:inline-flex;
    align-items:center;
    min-height:auto;
    padding:5px 0 3px;
    border:0;
    border-bottom:1px solid rgba(0,143,174,.35);
    border-radius:0;
    background:transparent;
    color:var(--gw-cyan);
    font-size:16px;
    font-weight:700;
    letter-spacing:.03em;
    text-decoration:none;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.gw .footer-links a:not(:first-child){color:#037d98;}
.gw .footer-links a:hover{background:transparent;border-color:var(--gw-navy);color:var(--gw-navy);}

/* 第一顆維持實心按鈕，與 hero 主要行動同形 */
.gw .footer-links a:first-child{
    min-height:44px;
    padding:0 19px;
    border:0;
    border-radius:10px;
    background:#0d273b;
    box-shadow:0 8px 18px rgba(11,34,55,.08);
    color:#fff;
}
.gw .footer-links a:first-child:hover{background:var(--gw-blue);color:#052335;}

/* ==========================================================================
   08. 系列總覽（.gw-index）：像目錄 / 清單，而不是 Landing Page
   ========================================================================== */
/* 整份目錄放在一張柔和 paper 裡，而不是每篇一張卡 */
.gw-index .entry-list{
    overflow:hidden;
    margin-top:10px;
    padding:0 26px;
    border-radius:22px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(10,57,79,.055);
    box-shadow:0 18px 44px rgba(18,62,80,.065);
}
.gw-index .entry{border-top-color:rgba(7,27,47,.10);}
.gw-index .entry:first-child{border-top:0;}
.gw-index .entry:last-child{border-bottom:0;}

.gw-index .entry-link{
    grid-template-columns:52px minmax(0,1fr) 28px;
    column-gap:18px;
    padding:24px 0;
}
.gw-index a.entry-link::after{
    content:"↗";
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-self:end;
    font-size:15px;
    color:#6d8d9d;
    transition:transform .18s ease,color .18s ease;
}
.gw-index a.entry-link:hover::after{color:var(--gw-blue);transform:translateX(2px);}
.gw-index .entry-link:not(a)::after{
    content:"COMING";
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-self:end;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    color:#698898;
}

.gw-index .entry-no{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:29px;
    margin-top:1px;
    border-radius:8px;
    background:rgba(16,189,233,.075);
    color:#2892aa;
    line-height:1;
}
.gw-index a.entry-link:hover .entry-no{background:rgba(16,189,233,.13);color:var(--gw-cyan);}

.gw-index .entry-title{
    font-size:clamp(19px,1.45vw,21px);
    color:#0f283a;
}
.gw-index .entry p{
    max-width:42em;
    margin-top:4px;
    font-size:16.5px;
}

/* WordPress 專題入口：仍是次要文章段落，不做大型 CTA */
.gw-index .section:nth-of-type(2){
    padding-top:38px;
    padding-bottom:42px;
}
.gw-index .section:nth-of-type(2) .section-head p{max-width:38em;}

/* --------------------------------------------------------------------------
   08b. 系列總覽的主區塊：一張獨立的 hero 卡
   刻意偏離「整頁一張連續空間底、不做卡片」的原則 —— 這是列表頁與文章內頁
   最主要的識別差異（內頁沒有這張卡，改用左側的閱讀軸）。只作用在 .gw-index。
   -------------------------------------------------------------------------- */
.gw-index{--gw-index-hero-gap:clamp(16px,2.2vw,28px);}
.gw-index .hero{
    display:block;
    margin:var(--gw-index-hero-gap) 0 clamp(26px,3.2vw,42px);
    padding:clamp(32px,4.2vw,58px) clamp(26px,4vw,62px) clamp(32px,4.2vw,52px);
    border:1px solid rgba(10,57,79,.06);
    border-radius:clamp(20px,2.4vw,32px);
    background:#fff;
    box-shadow:0 24px 60px rgba(18,62,80,.07);
}

/* eyebrow：短線 + 斜體品牌色，取代內頁的膠囊麵包屑 */
.gw-index .guides-breadcrumb{
    display:flex;
    align-items:center;
    gap:.85em;
    width:auto;
    max-width:none;
    min-height:0;
    margin:0 0 clamp(16px,2vw,24px);
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    font-size:13px;
    font-style:italic;
    letter-spacing:.06em;
    text-transform:none;
    color:#037d98;
}
.gw-index .guides-breadcrumb::before{
    content:"";
    flex:none;
    width:34px;
    height:2px;
    border-radius:2px;
    background:#2b93c9;
}
.gw-index .guides-breadcrumb a,
.gw-index .guides-breadcrumb a.link{
    margin:0;
    color:#037d98;
    font-weight:800;
}

.gw-index .hero h1{
    max-width:20em;
    font-size:clamp(30px,3.6vw,50px);
    line-height:1.3;
    letter-spacing:-.018em;
}
/* 標題後半段換色，讓主標分成兩層資訊 */
.gw-index .hero h1 .accent{color:#2b93c9;}

.gw-index .hero .lead{
    max-width:46em;
    margin-top:clamp(18px,2.2vw,28px);
}

.gw-index .hero-links{margin-top:clamp(24px,2.8vw,34px);}

/* 主要行動：列表頁用品牌藍實心（內頁是深藍），差異一眼可辨 */
.gw-index .hero-links a.primary{
    background:#227cae;
    box-shadow:0 10px 24px rgba(34,124,174,.22);
}
.gw-index .hero-links a.primary::after{
    content:"→";
    margin-left:.55em;
}
.gw-index .hero-links a.primary:hover{
    background:#1b6b95;
    color:#fff;
}

/* 次要行動：白底外框膠囊，不再是文字底線 */
.gw-index .hero-links a:not(.primary){
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 22px;
    border:1px solid rgba(10,57,79,.16);
    border-bottom:1px solid rgba(10,57,79,.16);
    border-radius:10px;
    background:#fff;
    color:var(--gw-navy);
    font-size:16px;
}
.gw-index .hero-links a:not(.primary):hover{
    border-color:#2b93c9;
    color:#1b6b95;
}

/* 重點標籤列 */
.gw-index .hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    margin:clamp(20px,2.4vw,30px) 0 0;
    padding:0;
    list-style:none;
}
.gw-index .hero-points li{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    min-height:42px;
    padding:6px 20px;
    border:1px solid rgba(10,57,79,.05);
    border-radius:999px;
    background:rgba(16,189,233,.06);
    font-size:15.5px;
    font-weight:700;
    line-height:1.5;
    color:#33505f;
}
.gw-index .hero-points li::before{
    content:"\2713";
    color:#037d98;
    font-weight:800;
}

@media screen and (max-width:520px){
    .gw-index .hero{
        margin-inline:0;
        padding:26px 20px 28px;
        border-radius:18px;
    }
    .gw-index .hero-links a.primary,
    .gw-index .hero-links a:not(.primary){width:100%;justify-content:center;}
    .gw-index .hero-points li{font-size:14.5px;padding:5px 16px;}
}

/* ==========================================================================
   09. 文章內頁（.gw-article）：更像 editorial article
   ========================================================================== */
.gw-article .hero .t-num{
    margin-top:16px;
    color:#5a717d;
}
.gw-article .hero .t-num::after{
    width:34px;
    background:rgba(0,184,234,.42);
}

/* 用 .gw.gw-article 提高一級，避免被 RWD 的 .gw .section-label 蓋掉 */
.gw.gw-article .section-label{
    font-size:10.5px;
    letter-spacing:.14em;
}
.gw-article .section-head{margin-bottom:16px;}
.gw-article .section h3{margin-top:30px;}

/* 清單以資料感呈現，避免首頁卡片感 */
.gw-article .section ul:not(.entry-list) > li,
.gw-article .section ol > li{
    padding-top:8px;
    padding-bottom:8px;
}

/* 30 秒摘要：只做一個很淡的編輯提示區，不新增卡片 */
.gw-article .section:first-of-type{
    margin-top:8px;
    padding-top:clamp(32px,4vw,48px);
}
.gw-article .section:first-of-type .section-head p{
    position:relative;
    padding-left:18px;
}
.gw-article .section:first-of-type .section-head p::before{
    content:"";
    position:absolute;
    left:0;
    top:.45em;
    bottom:.45em;
    width:2px;
    border-radius:2px;
    background:rgba(16,189,233,.55);
}

/* FAQ 更像知識文件：問題之間拉出分隔，不做 accordion/card */
.gw-article .section:has(.faq-q) h3{
    padding-top:20px;
    border-top:1px solid rgba(10,57,79,.075);
}
.gw-article .section:has(.faq-q) .section-head + h3{
    padding-top:0;
    border-top:0;
}
.gw-article .faq-a{margin-bottom:22px;}

/* 錨點落點：除了共用 layout 的 scroll-margin-top，再稍微保留閱讀呼吸空間 */
.gw-article .section[id]{scroll-margin-top:82px;}

/* ==========================================================================
   10. 文章頁內目錄 / Table of Contents
   - 純 HTML anchor，不依賴 JS
   - 延續 Editorial 兩欄節奏，整組是文章的一部分，不拆成多張卡片
   ========================================================================== */
.gw-article .gw-toc{
    display:grid;
    grid-template-columns:var(--gw-rail) minmax(0,1fr);
    column-gap:var(--gw-gap);
    padding:clamp(26px,3.6vw,42px) 0 clamp(34px,4.6vw,56px);
    border-top:1px solid var(--gw-line);
}

.gw-article .gw-toc-label{
    grid-column:1;
    align-self:start;
    margin-top:3px;
    font-size:12px;
    font-weight:800;
    font-style:italic;
    line-height:1.4;
    letter-spacing:.18em;
    color:#4e7180;
}

.gw-article .gw-toc-body{
    grid-column:2;
    min-width:0;
}

.gw-article .gw-toc-title{
    margin:0 0 10px;
    font-size:clamp(19px,1.55vw,22px);
    font-weight:700;
    line-height:1.5;
    color:var(--gw-navy);
}

.gw-article .gw-toc ol{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 28px;
    margin:0;
    padding:0;
    list-style:none;
    border-top:1px solid var(--gw-line-soft);
}

.gw-article .gw-toc li{
    margin:0;
    border-bottom:1px solid var(--gw-line-soft);
}

.gw-article .gw-toc a{
    display:grid;
    grid-template-columns:1fr;
    column-gap:10px;
    align-items:start;
    padding:12px 2px;
    color:#26404d;
    font-size:16px;
    font-weight:600;
    line-height:1.65;
    text-decoration:none;
    transition:color .18s ease,padding-left .18s ease;
}

.gw-article .gw-toc a span{
    padding-top:.1em;
    font-size:14px;
    font-weight:800;
    line-height:2;
    letter-spacing:.08em;
    color:#2e93ad;
    font-variant-numeric:tabular-nums;
}

.gw-article .gw-toc a::after{
    content:"↘";
    justify-self:end;
    grid-column:2;
    grid-row:1;
    color:#6b95a5;
    font-size:13px;
    font-weight:400;
    opacity:.72;
}

.gw-article .gw-toc a:hover{
    color:var(--gw-cyan);
    padding-left:4px;
}

/* ==========================================================================
   11. 右側 sticky 目錄跟班
   ========================================================================== */
.gw-article .paper{position:relative;}

/* 跟班的活動區域 */
.gw-right-toc-follow{
    position:absolute;
    top:420px;
    left:calc(100% + 18px);
    width:52px;
    height:calc(100% - 520px);
    pointer-events:none;
    /* 內文有大量 position:relative（li / faq-a / 標題裝飾），
       這裡不指定 z-index 會被 DOM 順序在後面的內文蓋過去 */
    z-index:30;
}

.gw-right-toc-details{
    position:sticky;
    top:92px;
    width:52px;
    pointer-events:auto;
    z-index:1;
}

/* 收合狀態：只顯示「目錄」 */
.gw-right-toc-details > summary{
    box-sizing:border-box;
    width:52px;
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 8px;
    list-style:none;
    cursor:pointer;
    border:1px solid rgba(10,57,79,.14);
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 28px rgba(10,57,79,.08);
    color:var(--gw-cyan);
    font-size:13px;
    font-weight:800;
    letter-spacing:.14em;
    writing-mode:vertical-rl;
}
.gw-right-toc-details > summary::-webkit-details-marker{display:none;}
.gw-right-toc-details[open] > summary{border-color:rgba(16,189,233,.45);}

/* 面板往左展開，浮在正文上，不推擠版面 */
.gw-right-toc-panel{
    position:absolute;
    top:0;
    right:calc(100% + 14px);
    width:348px;
    box-sizing:border-box;
    padding:22px 24px 18px;
    border:1px solid rgba(10,57,79,.10);
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 45px rgba(10,57,79,.10);
    z-index:2;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
    overscroll-behavior:contain;
}

.gw-right-toc-kicker{
    margin:0 0 12px;
    font-size:11.5px;
    font-weight:800;
    font-style:italic;
    letter-spacing:.18em;
    color:#627a86;
}

.gw-right-toc-panel ol{
    margin:0;
    padding:0;
    list-style:none;
}
.gw-right-toc-panel li{
    margin:0;
    border-top:1px solid var(--gw-line-soft);
}
.gw-right-toc-panel li:first-child{border-top:0;}

.gw-right-toc-panel a{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:10px 0;
    color:var(--gw-ink);
    font-size:15px;
    line-height:1.55;
    text-decoration:none;
}
.gw-right-toc-panel a span{
    font-size:11.5px;
    font-weight:800;
    line-height:1.7;
    color:#2e93ad;
    font-variant-numeric:tabular-nums;
}
.gw-right-toc-panel a:hover{color:var(--gw-cyan);}

/* ==========================================================================
   12. RWD
   ========================================================================== */

/* ---------- ≥901px：Editorial 導引線與章節節點 ---------- */
@media screen and (min-width:901px){
    /* rail label 待在 rail 裡，不讓膠囊撐滿欄位 */
    .gw .section-label{
        justify-self:start;
        align-self:start;
        margin-top:2px;
    }

    /* ------------------------------------------------------------------
       閱讀軸（reading spine）—— 只出現在文章內頁
       列表頁刻意不畫這條線，讓「有一條縱向軸」成為『我進到內頁了』的訊號。
       軸線由起點實心圓 → 各章節空心節點 → 文末終點環，構成閱讀行程。
       ------------------------------------------------------------------ */
    .gw-article .paper{
        background-image:linear-gradient(rgba(16,189,233,.34),rgba(16,189,233,.07));
        background-repeat:no-repeat;
        background-size:1px 100%;
        background-position:calc(var(--gw-rail) - var(--gw-gap) / 2) 0;
    }

    .gw-article .section,
    .gw-article .cta{position:relative;}

    /* 章節節點 */
    .gw-article .section::before,
    .gw-article .cta::before{
        content:"";
        position:absolute;
        left:calc(var(--gw-rail) - var(--gw-gap) / 2 - 3px);
        top:-4px;
        width:7px;
        height:7px;
        border-radius:50%;
        background:#f8fcfd;
        border:2px solid rgba(16,189,233,.70);
        box-sizing:border-box;
    }

    /* 列表頁：hero 卡以下補回同一條導引線，維持視覺一致。
       起點壓到卡片上緣，線被不透明的卡片遮住，卡片下方才露出，
       不會在卡片上方留一小截斷線。 */
    .gw-index .paper{
        background-image:linear-gradient(rgba(16,189,233,.34),rgba(16,189,233,.07));
        background-repeat:no-repeat;
        background-size:1px calc(100% - var(--gw-index-hero-gap));
        background-position:calc(var(--gw-rail) - var(--gw-gap) / 2) var(--gw-index-hero-gap);
    }
    .gw-index .section,
    .gw-index .cta{position:relative;}
    .gw-index .section::before,
    .gw-index .cta::before{
        content:"";
        position:absolute;
        left:calc(var(--gw-rail) - var(--gw-gap) / 2 - 3px);
        top:-4px;
        width:7px;
        height:7px;
        border-radius:50%;
        background:#f8fcfd;
        border:2px solid rgba(16,189,233,.70);
        box-sizing:border-box;
    }
    .gw-index .cta::before{top:50%;transform:translateY(-50%);}

    /* 起點：正文第一段用實心圓，標示閱讀從這裡開始 */
    .gw-article .section:first-of-type::before{
        background:var(--gw-blue);
        border-color:var(--gw-blue);
    }

    /* 文末行動區的節點：軸線被 CTA 底色蓋住，這裡維持與章節同尺寸，
       放大成環會變成一顆沒有線連著的孤點 */
    .gw-article .cta::before{top:50%;transform:translateY(-50%);}
}

/* ---------- ≤1220px：右側沒空間就收掉跟班（上方完整 TOC 仍保留） ---------- */
@media screen and (max-width:1220px){
    .gw-right-toc-follow{display:none;}
}

/* ---------- ≤900px：收成單欄，邊欄標籤變成標題上方的行內標記 ---------- */
@media screen and (max-width:900px){
    /* 註：rail / gap 不在此歸零 —— 單欄由下方 display:block 達成，
       原檔的 --gw-rail:0 也一直被後段 .guides-wrap.gw 覆蓋而未生效 */
    .guides-wrap.gw{font-size:18.5px;line-height:1.9;}

    .gw .hero,
    .gw .section,
    .gw .cta{display:block;}

    .gw .hero{padding-top:34px;}
    .gw .guides-breadcrumb{margin-bottom:20px;}
    .gw .section-label{margin:0 0 12px;font-size:11px;letter-spacing:.18em;}
    .gw .cta{border-radius:18px;}
    .gw .cta h2,
    .gw .cta p{max-width:none;}

    .gw .entry-link{grid-template-columns:44px minmax(0,1fr);column-gap:14px;}
    .gw-index .entry-link{grid-template-columns:40px minmax(0,1fr) 22px;column-gap:12px;}
    .gw-index .entry-list{padding-inline:20px;border-radius:18px;}

    .gw-article .gw-toc{display:block;}
    .gw-article .gw-toc-label{margin:0 0 10px;}
    .gw-article .gw-toc ol{grid-template-columns:1fr;}
}

@media screen and (max-width:640px){
    .guides-wrap.gw{--gw-gutter:18px;font-size:17.5px;}
}

@media screen and (max-width:520px){
    .gw .hero-links{gap:12px;}
    .gw .hero-links a.primary{width:100%;justify-content:center;}
    .gw .footer-links a{width:auto;justify-content:flex-start;}
    .gw .footer-links a:first-child{width:100%;justify-content:center;}

    .gw .cta{padding:26px 20px;margin-bottom:34px;}

    .gw-index .entry-list{padding-inline:16px;}
    .gw-index .entry-link{grid-template-columns:34px minmax(0,1fr);}
    .gw-index .entry-no{width:30px;height:25px;font-size:11px;}
    .gw-index a.entry-link::after,
    .gw-index .entry-link:not(a)::after{display:none;}

    .gw-article .gw-toc{padding-top:24px;padding-bottom:36px;}
    .gw-article .gw-toc a{font-size:15px;}
}

/* 尊重使用者的減少動態偏好（本頁僅有 hover 顏色轉場） */
@media (prefers-reduced-motion:reduce){
    .gw *{transition:none !important;}
}

/* ==========================================================================
   13. 列印：去掉底色、陰影與跟班
   ========================================================================== */
@media print{
    .guides-wrap.gw{background:none;}
    .gw .paper{background-image:none;}
    .gw .cta{
        margin-inline:0;
        padding-inline:0;
        border:1px solid #ddd;
        background:none;
        box-shadow:none;
        color:#000;
    }
    .gw .cta h2{color:#000;}
    .gw-index .entry-list{background:none;box-shadow:none;border:1px solid #ddd;}
    .gw .footer-links{display:none;}
    .gw-right-toc-follow{display:none;}
}