/* ==========================================================================
   理悅法律事務所 法律專欄共用樣式（專欄頁 articles.html、分類列表頁 articles-*.html、文章頁 articles/*.html）
   - 2026-10-26 使用者決定改版只限法律專欄：其他頁回到 01c4401 原樣（各頁內嵌樣式，不載入本檔）
   - 導覽列、手機選單、頁尾、LINE 鈕：01c4401 原版（樣式照搬原版內嵌樣式，HTML 在 partials/，和手寫頁逐字相同）
   - 頁首：深綠色塊＋金色大樹，比照 01c4401 服務頁頁首的底色、大樹位置與透明度；不放太極八卦
   - 排版（2026-10-25 新版）：每頁只有一條中軸（畫面中心）；主閱讀欄共用左緣；側欄只放在留白裡，放不下就移到主欄上方
   - 字體：標題思源宋體、內文黑體、法條標楷體；不用英文眉標、金色字裝飾（Cormorant 只給原版導覽列與頁尾的英文名）
   - 載入：partials/css.html（改本檔後把 ?v= 換新，再跑 build-shell.py 與 build-articles.py）
   ========================================================================== */

/* ---------- 色票、字體、尺寸 ---------- */
:root{
  --paper:#FDFBF5;        /* 頁面底色（cream-light） */
  --cream:#F7F3EA;        /* 淺色區塊（只用在少數整段區塊） */
  --white:#FFFFFF;
  --ink:#111111;          /* 標題、粗體 */
  --body:#2B2B2B;         /* 內文 */
  --ink-soft:#3A3A3A;     /* 小字：日期、麵包屑、說明 */
  --muted-dark:#6C675B;   /* 前言、聲明小字、提示字 */
  --muted:#7B7568;        /* 只用在分隔符與 16px 以上非必要文字 */
  --forest:#0F2A20;       /* 標題字、主按鈕、頁尾 */
  --forest-light:#2D5A47; /* 按鈕 hover */
  --gold:#B89455;         /* 只當線條：連結底線、短線 */
  --rule:rgba(15,42,32,.14);
  --rule-strong:rgba(15,42,32,.28);
  --line-green:#06C755;   /* 只用在 LINE 浮動鈕 */
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --kai:"BiauKaiTC","BiauKai","標楷體-繁","DFKai-SB","標楷體","TW-Kai","Noto Serif TC",serif;
  --navgap:96px;          /* 固定導覽列高度（原版導覽列實測 96px；≤900px 見下方） */
  --gutter:40px;
  /* 原版導覽列、手機選單、頁尾、LINE 鈕用的變數（01c4401 手寫頁同值） */
  --green-900:#0F2A20;--green-800:#1B3A2D;--green-700:#2D5A47;--gold-500:#B89455;--gold-400:#C9A968;--cream-light:#FDFBF5;--line:rgba(184,148,85,.28);
  /* 深綠頁首上的字 */
  --on-green:#F7F3EA;
  --on-green-soft:rgba(247,243,234,.78);
}

/* ---------- 基本（只套在導覽列、手機選單、頁尾、LINE 鈕以外，原版共用區段照原版的繼承） ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navgap) + 24px)}
body{background:var(--paper);color:var(--body);font:400 18px/1.95 var(--sans);letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(img){max-width:100%;display:block}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(a){color:inherit;text-decoration:none}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(h1,h2,h3,h4){letter-spacing:.01em;text-wrap:pretty}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(h1){text-wrap:balance}
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(p,li,dd,blockquote,.rows .t){text-wrap:pretty}   /* 避免最後一行只剩一兩個字 */
:where(body>:not(#nav,#mobileMenu,footer,.line-fab)) :where(:focus-visible){outline:2px solid var(--forest);outline-offset:3px}

/* ---------- 原版導覽列、手機選單、頁尾、LINE 鈕（01c4401 內嵌樣式原文，不改） ---------- */
/* 原版的字從 body 繼承（標楷體 20px／1.9）；本檔 body 是新版內文字，這裡讓共用區段照原版繼承 */
:where(#nav,#mobileMenu,footer,.line-fab){font-family:"標楷體", "DFKai-SB", "BiauKai", "AR PL UKai TW", serif;font-weight:400;font-size:20px;line-height:1.9;color:var(--ink);letter-spacing:normal;font-variant-numeric:normal}

/* NAV (Phase 1 統一工程 - 完整版) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 40px;background:rgba(247,243,234,.93);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:all .4s}
nav.scrolled{padding:13px 40px;border-bottom-color:var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:42px;height:42px;object-fit:contain}
.brand-name{font-family:"Noto Serif TC",serif;font-weight:500;font-size:18px;letter-spacing:2px;color:var(--green-900)}
.brand-sub{font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:3px;color:var(--gold-500);text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center}
.nav-links > li > a{font-family:"Noto Serif TC",serif;font-size:15px;letter-spacing:2px;color:var(--ink-soft);text-decoration:none;position:relative;padding:4px 0;transition:color .3s;cursor:pointer}
.nav-links > li > a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold-500);transition:width .3s}
.nav-links > li > a:hover{color:var(--green-800)}
.nav-links > li > a:hover::after{width:100%}
.nav-cta{padding:10px 22px;background:var(--green-800);color:var(--cream-light);text-decoration:none;font-family:"Noto Serif TC",serif;font-size:15px;letter-spacing:3px;border:1px solid var(--green-800);transition:all .3s;white-space:nowrap}
.nav-cta:hover{background:transparent;color:var(--green-800)}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.mobile-toggle span{display:block;width:24px;height:1.5px;background:var(--green-900);margin:5px 0;transition:all .3s}
.mobile-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mobile-toggle.active span:nth-child(2){opacity:0}
.mobile-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{position:fixed;top:68px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);padding:24px;transform:translateY(-120%);transition:transform .4s;z-index:99;max-height:calc(100vh - 68px);overflow-y:auto}
.mobile-menu.active{transform:translateY(0)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:14px;padding:0}
.mobile-menu a{font-family:"Noto Serif TC",serif;font-size:18px;letter-spacing:3px;color:var(--green-900);text-decoration:none;display:block;padding:8px 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){
  nav{padding:16px 24px}
  .nav-links,.nav-cta{display:none}
  .mobile-toggle{display:block}
}


/* DROPDOWN (Phase 1 統一工程新增) */
.nav-dropdown{position:relative}
.nav-dropdown-trigger .caret{font-size:10px;margin-left:3px;display:inline-block;transition:transform .3s}
.nav-dropdown:hover .nav-dropdown-trigger .caret{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--cream-light);border:1px solid var(--line);min-width:170px;padding:8px 0;list-style:none;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 12px 32px rgba(15,42,32,.12);z-index:101}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown-menu li{display:block}
.nav-dropdown-menu a{display:block;padding:11px 22px;font-family:"Noto Serif TC",serif;font-size:15px;letter-spacing:2px;color:var(--green-900);white-space:nowrap;text-decoration:none}
.nav-dropdown-menu a::after{display:none}
.nav-dropdown-menu a:hover{background:var(--green-900);color:var(--cream)}
@media(max-width:900px){.nav-dropdown-menu{display:none}}


/* FOOTER (Phase 1 統一工程) */
footer{background:var(--green-900);color:var(--cream);padding:72px 40px 32px;margin-top:0}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(184,148,85,.18)}
.footer-brand-name{font-family:"Noto Serif TC",serif;font-weight:500;font-size:20px;letter-spacing:3px;color:var(--cream);margin-bottom:4px}
.footer-brand-en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;letter-spacing:3px;color:var(--gold-400);margin-bottom:18px}
.footer-tagline{font-size:15px;line-height:1.9;color:rgba(247,243,234,.65)}
footer h5{font-family:"Noto Serif TC",serif;font-size:16px;font-weight:500;letter-spacing:3px;color:var(--gold-400);margin-bottom:18px}
footer ul{list-style:none;padding:0}
footer ul li{margin-bottom:11px}
footer ul a{color:rgba(247,243,234,.7);text-decoration:none;font-size:15px;letter-spacing:1px;transition:color .3s}
footer ul a:hover{color:var(--gold-400)}
.footer-bottom{padding-top:28px;text-align:center;font-size:13px;color:rgba(247,243,234,.4);letter-spacing:2px}
@media(max-width:900px){
  footer{padding:56px 24px 28px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr;gap:28px}
}


/* LINE FAB (Phase 2) */
.line-fab{position:fixed;right:24px;bottom:24px;z-index:200;display:inline-flex;align-items:center;gap:9px;padding:13px 22px 13px 16px;background:#06C755;color:#fff;text-decoration:none;font-family:"Noto Serif TC",serif;font-size:16px;letter-spacing:2px;border-radius:999px;box-shadow:0 8px 24px rgba(6,199,85,.35),0 2px 6px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s,background .25s}
.line-fab:hover{transform:translateY(-2px);background:#05B04A;box-shadow:0 12px 32px rgba(6,199,85,.45),0 4px 10px rgba(0,0,0,.15)}
.line-fab:active{transform:translateY(0)}
.line-fab-icon{width:24px;height:24px;flex-shrink:0}
.line-fab-text{white-space:nowrap}
@media(max-width:560px){
  .line-fab{right:16px;bottom:16px;padding:12px 18px 12px 14px;font-size:15px}
  .line-fab-icon{width:22px;height:22px}
}
@media print{.line-fab{display:none}}

/* ---------- 版面容器 ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}          /* 專欄頁、分類列表頁 */

/* ---------- 法律專欄頁首：深綠色塊＋金色大樹（2026-10-26 使用者決定；比照 01c4401 服務頁頁首） ----------
   大樹：01c4401 服務頁 .hero-tree 原值（tree-watermark.png 當 mask、填 --gold-400、top 50%／right −100px／高 80%、最高 680px、透明度 .28；≤768px 高 55%／right −130px／.18）
   放在頁首第一個子元素 <div class="hero-tree" aria-hidden="true"></div>；頁首自成一層、大樹 z-index:-1 疊在文字下面、不吃點擊；超出右緣由頁首裁掉
   頁首內的字色在 build-articles.py 的 ARTICLE_CSS、LIST_CSS（--on-green、--on-green-soft） */
.col-head,.list-head,.rp-head{position:relative;isolation:isolate;overflow:hidden;background:var(--green-900)}
.hero-tree{position:absolute;top:50%;right:-100px;transform:translateY(-50%);height:80%;max-height:680px;aspect-ratio:406/439;
  background-color:var(--gold-400);-webkit-mask:url("tree-watermark.png") center/contain no-repeat;mask:url("tree-watermark.png") center/contain no-repeat;
  opacity:.28;pointer-events:none;z-index:-1}

/* ---------- 小標 ---------- */
.kicker{display:flex;align-items:center;font:700 15px/1.6 var(--sans);color:var(--ink-soft);margin-bottom:16px}

/* ---------- 區塊 ---------- */
.band{border-image:linear-gradient(var(--cream),var(--cream)) fill 0/0/0 100vw}   /* 米色整條延伸到畫面兩側：外擴不影響版面、不產生橫向捲動 */

/* ---------- 按鈕與連結 ---------- */
.btn{display:inline-block;font:400 17px/1 var(--sans);padding:15px 26px;border-radius:2px;border:1px solid var(--forest);text-align:center;transition:background .2s,color .2s}
.btn--solid{background:var(--forest);color:#fff}
.btn--solid:hover{background:var(--forest-light);border-color:var(--forest-light)}
.btn--ghost{background:transparent;color:var(--forest)}
.btn--ghost:hover{background:rgba(15,42,32,.05)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.tlink{display:inline-block;font:16px/1.6 var(--sans);color:var(--forest);border-bottom:1px solid var(--gold);padding:10px 0 1px}
.tlink:hover{border-color:var(--forest)}
.bc{font:15px/1.6 var(--sans);color:var(--ink-soft);margin-bottom:22px}
.bc a{color:inherit;text-decoration:none}
.bc a:hover{color:var(--forest)}
.bc span{margin:0 8px;color:var(--rule-strong)}
.bc span.here{margin:0;color:var(--ink-soft)}
.sq,.catsq::before{display:inline-block;width:8px;height:8px;background:var(--c);margin-right:9px;vertical-align:2px;flex:none}
.catsq{white-space:nowrap}
.catsq::before{content:"";margin-right:7px}

/* ---------- 文章清單：日期｜標題 ---------- */
.rows{list-style:none;border-top:1px solid var(--rule-strong)}
.rows li{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:20px;padding:15px 0;align-items:baseline}
.rows .d{font:15px/1.6 var(--sans);color:var(--ink-soft)}
.rows .t{font:500 18px/1.65 var(--serif);color:var(--ink);text-wrap:pretty}
.rows a:hover .t{color:var(--forest);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}

/* ---------- 手機與平板 ---------- */
@media(max-width:900px){
  :root{--navgap:88px}   /* 原版導覽列 ≤900px 實測 88px */
}
@media(max-width:768px){
  :root{--gutter:20px}
  body{font-size:17px}
  .hero-tree{height:55%;right:-130px;opacity:.18}
  .rows a{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:14px 0}
}