/* =========================================================
   武泰地主學院｜文章共用樣式 2.0
   File: knowledge-article.css
   適用：GP、RK、WZ、BQ 四大知識系列
   ========================================================= */

/* =========================================================
   01. 全域變數
   ========================================================= */
:root{
  --ka-navy:#1f3653;
  --ka-navy-2:#2d496c;
  --ka-gold:#b8964d;
  --ka-gold-dark:#987936;

  --ka-text:#334155;
  --ka-muted:#64748b;
  --ka-line:#e5e7eb;
  --ka-soft:#f7f9fc;
  --ka-soft-blue:#eef4fb;
  --ka-white:#ffffff;

  --ka-radius-sm:12px;
  --ka-radius:20px;
  --ka-radius-lg:28px;

  --ka-shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --ka-shadow:0 18px 50px rgba(15,23,42,.09);
  --ka-transition:.28s ease;
}

/* =========================================================
   02. 文章頁預設主題
   沒有加分類 class 時，使用品牌深藍
   ========================================================= */
.ka-article-page{
  --ka-series-main:var(--ka-navy);
  --ka-series-dark:var(--ka-navy-2);
  --ka-series-soft:var(--ka-soft-blue);
  --ka-series-rgb:31,54,83;

  color:var(--ka-text);
  background:var(--ka-white);
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  line-height:1.9;
}

/* =========================================================
   03. 四大知識系列主題色
   使用方式：
   <main class="ka-article-page ka-theme-gp">
   ========================================================= */

/* GP｜地主合建指南：藍色 */
.ka-theme-gp{
  --ka-series-main:#315f8d;
  --ka-series-dark:#23496f;
  --ka-series-soft:#edf4fa;
  --ka-series-rgb:49,95,141;
}

/* RK｜重建知識百科：磚紅色 */
.ka-theme-rk{
  --ka-series-main:#a65a4b;
  --ka-series-dark:#7f4035;
  --ka-series-soft:#fbf0ed;
  --ka-series-rgb:166,90,75;
}

/* WZ｜塭仔圳地主專區：綠色 */
.ka-theme-wz{
  --ka-series-main:#4f765f;
  --ka-series-dark:#385846;
  --ka-series-soft:#edf5f0;
  --ka-series-rgb:79,118,95;
}

/* BQ｜施工品質與居住品質：金棕色 */
.ka-theme-bq{
  --ka-series-main:#b18445;
  --ka-series-dark:#87612d;
  --ka-series-soft:#faf4e9;
  --ka-series-rgb:177,132,69;
}

/* =========================================================
   04. 基本設定
   ========================================================= */
.ka-article-page,
.ka-article-page *{
  box-sizing:border-box;
}

.ka-article-page img{
  display:block;
  max-width:100%;
  height:auto;
}

.ka-article-page a{
  color:inherit;
}

.ka-article-page .container{
  width:min(1180px,100%);
  margin-inline:auto;
}

/* =========================================================
   05. 麵包屑
   ========================================================= */
.ka-breadcrumb{
  background:var(--ka-soft);
  border-bottom:1px solid var(--ka-line);
}

.ka-breadcrumb .container{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:50px;
  color:var(--ka-muted);
  font-size:16px;
  overflow-x:auto;
  white-space:nowrap;
}


.wzk-breadcrumb a,
.wzk-breadcrumb span {
    font-size: 16px;
    font-weight: 500;
}




.ka-breadcrumb a{
  color:var(--ka-muted);
  text-decoration:none;
}

.ka-breadcrumb a:hover{
  color:var(--ka-series-dark);
}

/* =========================================================
   06. 文章 Hero
   ========================================================= */
.ka-article-hero{
  position:relative;
  overflow:hidden;
  padding:26px 0 28px;
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(var(--ka-series-rgb),.14),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      var(--ka-series-soft) 0%,
      #ffffff 100%
    );
  border-bottom:1px solid var(--ka-line);
}

.ka-article-hero::after{
  content:"";
  position:absolute;
  top:-120px;
  right:-120px;
  width:360px;
  height:360px;
  border:1px solid rgba(var(--ka-series-rgb),.22);
  border-radius:50%;
}

.ka-article-hero-inner{
  position:relative;
  z-index:1;
  max-width:920px;
}

.ka-article-category{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--ka-series-soft);
  color:var(--ka-series-dark);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}

.ka-category-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:var(--ka-series-main);
  color:#fff;
}

.ka-category-icon::before{
  display:block;
  font-size:13px;
  line-height:1;
}

.ka-theme-gp .ka-category-icon::before{ content:"🤝"; }
.ka-theme-rk .ka-category-icon::before{ content:"▤"; }
.ka-theme-wz .ka-category-icon::before{ content:"⌖"; }
.ka-theme-bq .ka-category-icon::before{ content:"◆"; }

.ka-article-hero h1{
  max-width:980px;
  margin:0;
  color:var(--ka-navy);
  font-size:clamp(38px,5vw,54px);
  line-height:1.2;
  letter-spacing:-.03em;
}

.ka-article-subtitle{
  margin:18px 0 0;
  color:var(--ka-series-dark);
  font-size:clamp(21px,2.2vw,30px);
  font-weight:800;
  line-height:1.45;
}

.ka-article-lead{
  max-width:840px;
  margin:22px 0 0;
  color:var(--ka-muted);
  font-size:19px;
}

.ka-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--ka-line);
  color:var(--ka-muted);
  font-size:14px;
}

.ka-article-meta span{
  display:inline-flex;
  align-items:center;
}

.ka-article-meta span:not(:last-child)::after{
  content:"";
  width:4px;
  height:4px;
  margin-left:20px;
  border-radius:50%;
  background:var(--ka-gold);
}

/* =========================================================
   07. 主版面
   ========================================================= */
.ka-article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:56px;
  align-items:start;
  padding-top:38px;
  padding-bottom:48px;
}

.ka-article-content{
  min-width:0;
  max-width:820px;
}

/* =========================================================
   08. 文章文字
   ========================================================= */
.ka-section{
  margin-bottom:66px;
  scroll-margin-top:110px;
}

.ka-subsection{
  margin-top:44px;
  scroll-margin-top:110px;
}

.ka-section h2,
.ka-related h2,
.ka-download h2,
.ka-final-cta h2{
  margin:0 0 24px;
  color:var(--ka-navy);
  font-size:clamp(28px,3vw,36px);
  line-height:1.35;
  letter-spacing:-.02em;
}

.ka-subsection h3{
  margin:0 0 18px;
  color:var(--ka-navy);
  font-size:26px;
  line-height:1.45;
}

.ka-article-content p{
  margin:0 0 22px;
  color:var(--ka-text);
  font-size:16px;
}

.ka-article-content ul,
.ka-article-content ol{
  margin:0 0 24px;
  padding-left:1.45em;
}

.ka-article-content li{
  margin:.45em 0;
  font-size:17px;
}

.ka-section-label{
  margin:0 0 10px !important;
  color:var(--ka-gold-dark) !important;
  font-size:12px !important;
  font-weight:900;
  letter-spacing:.16em;
}

/* =========================================================
   09. 引言與引用
   ========================================================= */
.ka-quote,
.ka-director-quote{
  position:relative;
  margin:30px 0;
  padding:28px 32px 28px 38px;
  border-left:5px solid var(--ka-series-main);
  border-radius:0 var(--ka-radius) var(--ka-radius) 0;
  background:var(--ka-soft);
  color:var(--ka-navy);
  font-size:23px;
  font-weight:800;
  line-height:1.65;
  box-shadow:var(--ka-shadow-sm);
}

.ka-director-quote{
  background:linear-gradient(135deg,#fffaf0 0%,#ffffff 100%);
}

.ka-director-quote cite{
  display:block;
  margin-top:14px;
  color:var(--ka-muted);
  font-size:14px;
  font-style:normal;
  font-weight:700;
}

/* =========================================================
   10. 一分鐘重點整理
   ========================================================= */
.ka-quick-take{
  margin:0 0 64px;
  padding:30px 34px;
  border:1px solid rgba(var(--ka-series-rgb),.22);
  border-radius:var(--ka-radius);
  background:
    linear-gradient(
      135deg,
      var(--ka-series-soft) 0%,
      #ffffff 100%
    );
  box-shadow:var(--ka-shadow-sm);
}

.ka-quick-take h2{
  margin:0 0 16px;
  color:var(--ka-navy);
  font-size:24px;
}

.ka-quick-take ul{
  margin:0;
  padding-left:1.3em;
}

.ka-quick-take li{
  margin:.55em 0;
  font-weight:600;
}

/* =========================================================
   11. 比較表
   ========================================================= */
.ka-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius);
  box-shadow:var(--ka-shadow-sm);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.ka-compare-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  background:var(--ka-white);
}

.ka-compare-table th,
.ka-compare-table td{
  padding:18px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--ka-line);
}

.ka-compare-table th{
  background:var(--ka-series-dark);
  color:var(--ka-white);
  font-size:15px;
  letter-spacing:.03em;
}

.ka-compare-table td:first-child{
  color:var(--ka-navy);
  font-weight:800;
}

.ka-compare-table tbody tr:nth-child(even){
  background:#fbfcfe;
}

.ka-compare-table tbody tr:last-child td{
  border-bottom:none;
}

/* =========================================================
   12. 一般提醒框
   ========================================================= */
.ka-reminder{
  margin:26px 0 0;
  padding:20px 24px;
  border-left:4px solid var(--ka-series-main);
  border-radius:0 var(--ka-radius-sm) var(--ka-radius-sm) 0;
  background:var(--ka-series-soft);
  color:var(--ka-series-dark);
  font-size:16px;
}

.ka-reminder strong{
  color:var(--ka-series-dark);
}

/* =========================================================
   13. 一般註解
   白色背景使用深灰色文字
   ========================================================= */
.ka-note{
  margin:26px 0 0 !important;
  padding-top:20px;
  border-top:1px solid var(--ka-line);
  color:var(--ka-muted) !important;
  font-size:14px !important;
  line-height:1.8;
}

/* =========================================================
   14. 情境卡片
   ========================================================= */
.ka-scenario-card{
  padding:30px 34px;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius);
  background:var(--ka-soft);
  box-shadow:var(--ka-shadow-sm);
}

.ka-scenario-card p:last-child{
  margin-bottom:0;
}

/* =========================================================
   15. 武泰觀點
   ========================================================= */
.ka-wutai-view{
  padding:38px 40px;
  border-radius:var(--ka-radius-lg);
  background:
    linear-gradient(
      135deg,
      rgba(31,54,83,.98),
      rgba(45,73,108,.98)
    );
  box-shadow:var(--ka-shadow);
}

.ka-wutai-view h2,
.ka-wutai-view p,
.ka-wutai-view li{
  color:var(--ka-white);
}

.ka-wutai-view .ka-section-label{
  color:#e5c979 !important;
}

.ka-wutai-view .ka-director-quote{
  background:rgba(255,255,255,.09);
  color:var(--ka-white);
  border-left-color:#e5c979;
  box-shadow:none;
}

.ka-wutai-view .ka-director-quote cite{
  color:#dbe6f3;
}

/* 武泰觀點內的註解，改用淺色 */
.ka-wutai-view .ka-note{
  border-top:1px solid rgba(255,255,255,.2);
  color:#dbe6f3 !important;
}

.ka-check-list{
  list-style:none;
  padding:0 !important;
}

.ka-check-list li{
  position:relative;
  padding-left:30px;
}

.ka-check-list li::before{
  content:"✓";
  position:absolute;
  top:0;
  left:0;
  color:#e5c979;
  font-weight:900;
}

/* =========================================================
   16. 勾選清單
   ========================================================= */
.ka-checklist{
  display:grid;
  gap:14px;
  padding:28px;
  border-radius:var(--ka-radius);
  background:var(--ka-soft);
  box-shadow:var(--ka-shadow-sm);
}

.ka-checklist label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius-sm);
  background:var(--ka-white);
  cursor:pointer;
  transition:var(--ka-transition);
}

.ka-checklist label:hover{
  border-color:rgba(var(--ka-series-rgb),.55);
  transform:translateY(-2px);
}

.ka-checklist input{
  width:19px;
  height:19px;
  margin-top:4px;
  flex:0 0 auto;
  accent-color:var(--ka-series-main);
}

/* =========================================================
   17. 下載區塊
   ========================================================= */
.ka-download{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:center;
  margin:0 0 66px;
  padding:34px 38px;
  border:1px solid rgba(var(--ka-series-rgb),.25);
  border-radius:var(--ka-radius-lg);
  background:
    linear-gradient(
      135deg,
      var(--ka-series-soft) 0%,
      #ffffff 100%
    );
  box-shadow:var(--ka-shadow-sm);
}

.ka-download p{
  margin-bottom:0;
}

.ka-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  background:var(--ka-series-main);
  color:var(--ka-white) !important;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
  transition:var(--ka-transition);
}

.ka-download-btn:hover{
  background:var(--ka-series-dark);
  transform:translateY(-2px);
}

/* =========================================================
   18. FAQ
   ========================================================= */
.ka-faq details{
  margin:14px 0;
  overflow:hidden;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius-sm);
  background:var(--ka-white);
  box-shadow:var(--ka-shadow-sm);
}

.ka-faq summary{
  position:relative;
  padding:20px 56px 20px 22px;
  color:var(--ka-navy);
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}

.ka-faq summary::-webkit-details-marker{
  display:none;
}

.ka-faq summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  color:var(--ka-series-main);
  font-size:26px;
  font-weight:500;
}

.ka-faq details[open] summary::after{
  content:"−";
}

.ka-faq details[open] summary{
  background:var(--ka-series-soft);
}

.ka-faq details p{
  margin:0;
  padding:0 22px 22px;
  color:var(--ka-muted);
}

/* =========================================================
   19. 延伸閱讀
   ========================================================= */
.ka-related{
  margin:0 0 66px;
}

.ka-related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.ka-related-card{
  display:block;
  padding:24px;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius);
  background:var(--ka-white);
  text-decoration:none;
  box-shadow:var(--ka-shadow-sm);
  transition:var(--ka-transition);
}

.ka-related-card:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--ka-series-rgb),.55);
  box-shadow:var(--ka-shadow);
}

.ka-related-card > span{
  color:var(--ka-series-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.ka-related-card h3{
  margin:8px 0;
  color:var(--ka-navy);
  font-size:20px;
  line-height:1.45;
}

.ka-related-card p{
  margin:0;
  color:var(--ka-muted);
  font-size:15px;
}

/* =========================================================
   20. 最終 CTA
   ========================================================= */
.ka-final-cta{
  padding:22px;
  border-radius:var(--ka-radius-lg);
  background:
    linear-gradient(
      135deg,
      var(--ka-navy) 0%,
      var(--ka-navy-2) 100%
    );
  text-align:center;
  box-shadow:var(--ka-shadow);
}

.ka-final-cta h2,
.ka-final-cta p{
  color:var(--ka-white);
}

.ka-final-cta p{
  max-width:680px;
  margin-inline:auto;
}

.ka-final-cta .ka-section-label{
  color:#e5c979 !important;
}

.ka-cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:28px;
}

.ka-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  transition:var(--ka-transition);
}

.ka-btn-primary{
  background:var(--ka-gold);
  color:var(--ka-white) !important;
}

.ka-btn-primary:hover{
  background:var(--ka-gold-dark);
  transform:translateY(-2px);
}

.ka-btn-outline{
  border:1px solid rgba(255,255,255,.55);
  color:var(--ka-white) !important;
}

.ka-btn-outline:hover{
  background:var(--ka-white);
  color:var(--ka-navy) !important;
}

/* =========================================================
   21. 側邊文章目錄
   ========================================================= */
.ka-article-sidebar{
  position:sticky;
  top:110px;
}

.ka-toc{
  padding:24px;
  border:1px solid var(--ka-line);
  border-radius:var(--ka-radius);
  background:var(--ka-white);
  box-shadow:var(--ka-shadow-sm);
}

.ka-toc-title{
  margin:0 0 14px;
  color:var(--ka-navy);
  font-weight:900;
}

.ka-toc a{
  display:block;
  padding:9px 0;
  border-bottom:1px solid var(--ka-line);
  color:var(--ka-muted);
  font-size:14px;
  text-decoration:none;
  transition:var(--ka-transition);
}

.ka-toc a:last-child{
  border-bottom:none;
}

.ka-toc a:hover{
  padding-left:4px;
  color:var(--ka-series-dark);
}

/* =========================================================
   22. 平板版
   ========================================================= */
@media (max-width:1024px){
  .ka-article-layout{
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }

  .ka-article-content{
    max-width:none;
  }

  .ka-article-sidebar{
    position:static;
    order:-1;
  }

  .ka-toc{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 18px;
  }

  .ka-toc-title{
    grid-column:1/-1;
  }
}

/* =========================================================
   23. 手機版
   ========================================================= */
@media (max-width:768px){
  .ka-article-page .container{
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }

  .ka-article-hero{
    padding:34px 0 36px;
  }

  .ka-article-lead{
    font-size:17px;
  }

  .ka-article-meta{
    display:grid;
    gap:8px;
  }

  .ka-article-meta span::after{
    display:none !important;
  }

  .ka-article-layout{
    padding-top:36px;
    padding-bottom:56px;
  }

  .ka-article-sidebar{
    display:none;
  }

  .ka-section{
    margin-bottom:50px;
  }

  .ka-article-content p{
    font-size:17px;
  }

  .ka-quote,
  .ka-director-quote{
    padding:24px 24px 24px 28px;
    font-size:20px;
  }

  .ka-quick-take,
  .ka-scenario-card,
  .ka-wutai-view,
  .ka-checklist,
  .ka-download,
  .ka-final-cta{
    padding:24px 20px;
    border-radius:18px;
  }

  .ka-download{
    grid-template-columns:1fr;
  }

  .ka-download-btn{
    width:100%;
  }

  .ka-related-grid{
    grid-template-columns:1fr;
  }

  .ka-cta-actions{
    flex-direction:column;
  }

  .ka-btn{
    width:100%;
  }

  .ka-compare-table{
    min-width:680px;
  }

  .ka-compare-table th,
  .ka-compare-table td{
    padding:14px;
    font-size:15px;
    line-height:1.65;
  }

  .ka-article-content,
  .ka-article-content p,
  .ka-article-content li,
  .ka-related-card{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .ka-faq summary{
    padding:18px 52px 18px 18px;
    font-size:16px;
    line-height:1.65;
  }

  .ka-faq summary::after{
    right:18px;
  }

  .ka-faq details p{
    padding:0 18px 20px;
  }
}

/* =========================================================
   24. 小手機版
   ========================================================= */
@media (max-width:480px){
  .ka-article-page .container{
    padding-left:16px;
    padding-right:16px;
  }

  .ka-article-hero{
    padding:28px 0 30px;
  }

  .ka-article-hero h1{
    font-size:30px;
    line-height:1.3;
    letter-spacing:-.02em;
  }

  .ka-article-subtitle{
    font-size:19px;
    line-height:1.55;
  }

  .ka-article-lead{
    font-size:16px;
    line-height:1.8;
  }

  .ka-section h2,
  .ka-related h2,
  .ka-download h2,
  .ka-final-cta h2{
    font-size:25px;
    line-height:1.4;
  }

  .ka-subsection h3{
    font-size:21px;
    line-height:1.5;
  }

  .ka-article-content p,
  .ka-article-content li{
    font-size:16px;
  }

  .ka-quote,
  .ka-director-quote{
    margin:24px 0;
    padding:20px 18px 20px 22px;
    font-size:18px;
    line-height:1.7;
  }

  .ka-checklist{
    padding:18px 14px;
  }

  .ka-checklist label{
    padding:13px 12px;
    font-size:15px;
    line-height:1.65;
  }

  .ka-related-card{
    padding:20px;
  }

  .ka-final-cta{
    padding:28px 18px;
  }

  .ka-btn,
  .ka-download-btn{
    min-height:50px;
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================================
   25. 列印
   ========================================================= */
@media print{
  .ka-breadcrumb,
  .ka-article-sidebar,
  .ka-download,
  .ka-final-cta,
  .ka-related{
    display:none !important;
  }

  .ka-article-layout{
    display:block;
    padding:0;
  }

  .ka-article-content{
    max-width:none;
  }

  .ka-wutai-view{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #bbb;
    box-shadow:none;
  }

  .ka-wutai-view h2,
  .ka-wutai-view p,
  .ka-wutai-view li,
  .ka-wutai-view .ka-note{
    color:#000 !important;
  }

  .ka-section{
    break-inside:avoid;
  }
}


/*------------------------------------*/
.ka-compare-table{
    width:100%;
    table-layout:fixed;
}

.ka-compare-table th:first-child,
.ka-compare-table td:first-child{
    width:20%;
}

.ka-compare-table th:nth-child(2),
.ka-compare-table td:nth-child(2){
    width:40%;
}

.ka-compare-table th:nth-child(3),
.ka-compare-table td:nth-child(3){
    width:40%;
}


/*----------------------------------------*/
section.wzk-hero {
     
    padding: 30px 0;
     
}


section.wzk-section {
  padding: 30px 0;
     
}