/* ==========================================================================
   tool.hktv.my — 指南（第二層內容）樣式
   依賴 pages.css 的 .pg-* / .tp-* 基礎，這裡只補列表卡與文章殼。
   ========================================================================== */

.gd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .9rem;font-size:.76rem;font-weight:600;color:var(--pg-mut)}
.gd-crumb a{color:var(--pg-mut);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.gd-crumb a:hover{color:var(--pg-brand)}
.gd-crumb b{color:var(--pg-text);font-weight:800}
.gd-crumb span{opacity:.5}

/* ---- 分組 ---- */
.gd-group{margin:1.6rem 0 0}
.gd-group-h{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .7rem}
.gd-group-h h2{display:flex;align-items:center;gap:.55rem;margin:0;font-size:1rem;font-weight:800;color:var(--pg-text)}
.gd-group-ico{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:.5rem;background:var(--c,#2563eb);color:#fff;font-size:.78rem}
.gd-group-tool{font-size:.74rem;font-weight:800;color:var(--pg-brand);text-decoration:none;white-space:nowrap}
.gd-group-tool i{font-size:.68rem;margin-left:.2rem}
.gd-group-tool:hover{border-bottom:1px solid currentColor}

/* ---- 卡片 ---- */
.gd-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:720px){.gd-grid{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.gd-card{display:flex;flex-direction:column;gap:.4rem;padding:.95rem 1rem;border:1px solid var(--pg-line);border-radius:.8rem;background:var(--pg-card);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.gd-card:hover{border-color:var(--pg-brand);box-shadow:0 8px 22px -16px rgba(16,24,40,.5);transform:translateY(-1px)}
.gd-card b{font-size:.86rem;line-height:1.5;font-weight:800;color:var(--pg-text)}
.gd-card span{font-size:.78rem;line-height:1.7;color:var(--pg-mut)}
.gd-card em{margin-top:auto;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--pg-mut);display:inline-flex;align-items:center;gap:.3rem}
.gd-card em i{font-size:.66rem}

/* ---- 文章 ---- */
.gd-article{max-width:46rem}
.gd-article .pg-hd h1{font-size:1.6rem}
@media(min-width:640px){.gd-article .pg-hd h1{font-size:1.95rem}}
.gd-article .pg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.38rem}
.gd-article .pg-meta a{color:var(--pg-brand);text-decoration:none;font-weight:800}
.gd-dot{opacity:.45}
.gd-article .pg-sec h2{font-size:1.02rem}
.gd-article .pg-sec table{width:100%;border-collapse:collapse;margin:.7rem 0;font-size:.8rem}
.gd-article .pg-sec th,.gd-article .pg-sec td{padding:.5rem .6rem;border-bottom:1px solid var(--pg-line);text-align:left;vertical-align:top}
.gd-article .pg-sec thead th{background:var(--pg-soft);font-size:.74rem;font-weight:800;color:var(--pg-mut);letter-spacing:.02em}
.gd-article .pg-sec tbody tr:last-child td{border-bottom:0}
.gd-article .pg-sec blockquote{margin:.7rem 0;padding:.6rem .9rem;border-left:3px solid var(--pg-brand);background:var(--pg-brand-soft);border-radius:.4rem;font-size:.82rem;line-height:1.75;color:var(--pg-text)}

/* ---- 工具導流 ---- */
.gd-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin:1.3rem 0 0;padding:.9rem 1rem;border:1px solid var(--pg-line);border-radius:.8rem;background:var(--pg-soft)}
.gd-cta b{display:block;font-size:.86rem;font-weight:800;color:var(--pg-text)}
.gd-cta span{display:block;font-size:.76rem;color:var(--pg-mut);margin-top:.15rem}

/* ---- 相關文章 ---- */
.gd-more{margin:1.8rem 0 0}
.gd-more h2{margin:0 0 .7rem;font-size:1rem;font-weight:800;color:var(--pg-text)}
.gd-all{margin:.9rem 0 0;font-size:.78rem;font-weight:800}
.gd-all a{color:var(--pg-brand);text-decoration:none}
.gd-all a:hover{border-bottom:1px solid currentColor}

/* ---- 路線圖 ---- */
.gd-road{margin:2rem 0 0;padding:1.1rem 1.15rem;border:1px dashed var(--pg-line);border-radius:.9rem;background:var(--pg-soft)}
.gd-road h2{margin:0 0 .4rem;font-size:.94rem;font-weight:800;color:var(--pg-text);display:flex;align-items:center;gap:.45rem}
.gd-road>p{margin:0 0 .8rem;font-size:.76rem;line-height:1.7;color:var(--pg-mut)}
.gd-road-row{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.5rem 0;border-top:1px solid var(--pg-line)}
@media(min-width:640px){.gd-road-row{grid-template-columns:7.5rem 1fr}}
.gd-road-tool{font-size:.72rem;font-weight:800;color:var(--pg-mut);letter-spacing:.02em;text-transform:uppercase}
.gd-road ul{margin:0;padding-left:1.05rem;list-style:disc}
.gd-road li{font-size:.76rem;line-height:1.8;color:var(--pg-text)}

/* ---- 首頁指南區 ---- */
.th-guides{margin-top:.2rem}
.th-guides .gd-card{background:var(--th-card);border-color:var(--th-line)}
.th-guides .gd-card b{color:var(--th-ink)}
.th-guides .gd-card span{color:var(--th-mut)}
.th-guides .gd-card em{color:var(--th-mut)}

/* ---- 工具頁底部導流 ---- */
.gd-toolblock{max-width:66rem;margin:1.7rem auto 0;padding:1.1rem 1.15rem;border:1px solid var(--th-line);border-radius:.9rem;background:var(--th-card)}
.gd-toolblock .gd-group-h{margin-bottom:.75rem}
.gd-toolblock .gd-card{background:var(--pg-soft);border-color:var(--pg-line)}

/* ---- 首頁與工具頁底部的指南卡不在 .tpw 內，補一組等價變數 ---- */
.th-sec--guides,.th-guides,.gd-toolblock{
  --pg-card:var(--th-card);--pg-soft:#f6f8fb;--pg-line:var(--th-line);
  --pg-text:var(--th-ink);--pg-mut:var(--th-mut);
  --pg-brand:var(--th-brand);--pg-brand-soft:var(--th-brand-soft);
}
html.dark .th-sec--guides,html.dark .th-guides,html.dark .gd-toolblock{
  --pg-soft:#0d1621;--pg-line:#253142;--pg-text:#e8edf3;--pg-mut:#98a4b3;--pg-brand:#60a5fa;
}