@layer theme-custom {
/* ============================================================
   urodrh 衛教主題頁共用 CSS — theme_css 遷移版
   v1.0 2026-08-19 · 母本＝customized_css_list idx=9 線上現況
   （原檔含註解版：urodrh/output/backup/css-idx9-* + repo 遷移紀錄）
   本檔會被平台包進 @layer theme-custom（位階低於未分層樣式），
   因此除下列四組「今日輸家」外，全部宣告補 !important 以維持
   與 idx=9 時代逐像素相同的外觀（2026-08-19 六組模擬驗證 0 差異）：
   - .faq > p 的 margin、.refs-body p 的 margin、
     .refs-body .refs-q 的 margin、.refs-body a 的 text-decoration
     ——這四組今天就被 .sec p !important／平台樣式壓著沒生效，
     維持非 !important＝保留現況（別「修好」它們，會改變線上外觀）。
   ============================================================ */

.uro-topic{
  --teal:#017081 !important;
  --teal-soft:#e6f1f2 !important;
  --navy:#154372 !important;
  --navy-soft:#e8eef5 !important;
  --ink:#1a1a1a !important;
  --grey:#666 !important;
  --line:#e2e2e2 !important;
  font-family:'Noto Sans TC','PingFang TC',sans-serif !important;
  color:var(--ink) !important;
  background:#fff !important;
  line-height:1.85 !important;
  letter-spacing:.02em !important;
}
.uro-topic *{box-sizing:border-box !important;margin:0 !important;padding:0 !important}
.uro-topic .wrap{max-width:1180px !important;margin:0 auto !important;padding:0 32px !important;display:grid !important;grid-template-columns:240px 1fr !important;gap:56px !important}


.uro-topic .side{position:sticky !important;top:40px !important;align-self:start !important;height:calc(100vh - 80px) !important;overflow-y:auto !important;padding-top:8px !important}
.uro-topic .toc-label{font-size:12px !important;letter-spacing:.18em !important;color:#aaa !important;font-weight:700 !important;margin-bottom:14px !important}
.uro-topic .toc{list-style:none !important}
.uro-topic .toc li{margin:2px 0 !important}
.uro-topic .toc a{display:block !important;color:var(--grey) !important;text-decoration:none !important;font-size:14px !important;padding:5px 10px !important;border-left:2px solid transparent !important;margin-left:-2px !important;transition:.18s !important}
.uro-topic .toc a:hover{color:var(--teal) !important;background:var(--teal-soft) !important}
.uro-topic .toc a.active{color:var(--teal) !important;font-weight:700 !important;border-left-color:var(--teal) !important;background:var(--teal-soft) !important}
.uro-topic .toc a.intro{color:#999 !important}
.uro-topic .toc a.intro.active{color:var(--teal) !important}
.uro-topic .toc-num{display:inline-block !important;width:1.6em !important;color:#bbb !important;font-size:12px !important}
.uro-topic .toc a.active .toc-num{color:inherit !important}
.uro-topic .more{margin-top:36px !important;padding-top:24px !important;border-top:1px solid var(--line) !important}
.uro-topic .more-label{font-size:12px !important;letter-spacing:.12em !important;color:var(--teal) !important;font-weight:700 !important;margin-bottom:12px !important}
.uro-topic .more ul{list-style:none !important}
.uro-topic .more li{margin:3px 0 !important}
.uro-topic .more a{display:block !important;color:#444 !important;text-decoration:none !important;font-size:13.5px !important;padding:6px 10px !important;border-radius:6px !important;transition:.18s !important}
.uro-topic .more a:hover{background:var(--teal-soft) !important;color:var(--teal) !important}

.uro-topic .side .more.readmore{background:var(--teal-soft) !important;border:0 !important;border-radius:10px !important;padding:15px 16px 12px !important;margin-top:28px !important}
.uro-topic .side .more.readmore .more-label{color:var(--teal) !important;margin-bottom:10px !important;font-size:14px !important}
.uro-topic .side .more.readmore a{color:#555 !important;font-weight:400 !important}
.uro-topic .side .more.readmore a:hover{background:rgba(1,112,129,.12) !important}


.uro-topic .main{min-width:0 !important;padding:48px 0 80px !important}
.uro-topic .kicker{font-size:13px !important;letter-spacing:.16em !important;color:var(--teal) !important;font-weight:700 !important;margin-bottom:14px !important}
.uro-topic h1{font-size:38px !important;line-height:1.42 !important;font-weight:800 !important;margin-bottom:18px !important;letter-spacing:.01em !important}
.uro-topic .byline{font-size:14.5px !important;color:var(--grey) !important;padding-bottom:26px !important;border-bottom:2px solid var(--teal) !important;margin-bottom:8px !important}
.uro-topic .byline b{color:var(--teal) !important}

.uro-topic .intro-box{background:var(--teal-soft) !important;border-radius:14px !important;padding:28px 32px !important;margin:36px 0 8px !important}
.uro-topic .intro-tag{font-size:18px !important;font-weight:800 !important;letter-spacing:.02em !important;color:var(--teal) !important;margin-bottom:14px !important}
.uro-topic .intro-box p{margin:.7em 0 !important;font-size:16.5px !important;color:#2a2a2a !important}


.uro-topic .toc-m{display:none !important;margin:28px 0 8px !important;border:1px solid var(--line) !important;border-radius:12px !important;overflow:hidden !important}
.uro-topic .toc-m summary{list-style:none !important;cursor:pointer !important;padding:15px 20px !important;font-size:15px !important;font-weight:700 !important;color:var(--teal) !important;background:var(--teal-soft) !important;display:flex !important;justify-content:space-between !important;align-items:center !important}
.uro-topic .toc-m summary::-webkit-details-marker{display:none !important}
.uro-topic .toc-m summary::after{content:"▾" !important;font-size:13px !important}
.uro-topic .toc-m[open] summary::after{content:"▴" !important}
.uro-topic .toc-m ul{list-style:none !important;padding:10px 8px !important}
.uro-topic .toc-m li{margin:1px 0 !important}
.uro-topic .toc-m a{display:block !important;color:#555 !important;text-decoration:none !important;font-size:14.5px !important;padding:8px 14px !important}
.uro-topic .toc-m .toc-num{display:inline-block !important;width:1.8em !important;color:#bbb !important;font-size:12px !important}


.uro-topic .sec{margin-top:58px !important}
.uro-topic .sec h2{display:flex !important;align-items:center !important;gap:18px !important;padding:15px 24px !important;border-radius:12px !important;color:#fff !important;font-size:24px !important;font-weight:800 !important;margin-bottom:18px !important;background:var(--teal) !important}
.uro-topic .sec h2 .n{font-size:26px !important;font-weight:800 !important;font-variant-numeric:tabular-nums !important;opacity:.65 !important}
.uro-topic .sec p{font-size:17px !important;margin:1.1em 0 !important}


.uro-topic .lead{font-size:18.5px !important;font-weight:700 !important;line-height:1.7 !important;margin:2px 0 6px !important;color:var(--teal) !important}
.uro-topic .sec--navy .lead{color:var(--navy) !important}


.uro-topic .sec h3{font-size:18px !important;font-weight:800 !important;color:var(--ink) !important;margin:1.7em 0 .35em !important;padding-left:13px !important;border-left:4px solid var(--teal) !important}
.uro-topic .sec--navy h3{border-left-color:var(--navy) !important}

.uro-topic .callout{border-radius:0 10px 10px 0 !important;padding:22px 26px !important;margin:28px 0 !important}
.uro-topic .callout .ct{font-size:18px !important;font-weight:800 !important;letter-spacing:.02em !important;margin-bottom:10px !important}
.uro-topic .callout p{font-size:15.5px !important;margin:.3em 0 !important;color:#333 !important}
.uro-topic .sec--teal .callout{background:var(--teal-soft) !important;border-left:5px solid var(--teal) !important}
.uro-topic .sec--teal .callout .ct,.uro-topic .sec--teal .callout b{color:var(--teal) !important}
.uro-topic .sec--navy .callout{background:var(--navy-soft) !important;border-left:5px solid var(--navy) !important}
.uro-topic .sec--navy .callout .ct,.uro-topic .sec--navy .callout b{color:var(--navy) !important}


.uro-topic .figure{margin:40px 0 !important;text-align:center !important;display:block !important;outline:none !important;background:transparent !important}
.uro-topic .figure img{max-width:100% !important;height:auto !important;display:block !important;margin:0 auto !important}
.uro-topic .figure figcaption{margin-top:14px !important;font-size:15px !important;color:var(--grey) !important;text-align:center !important}


.uro-topic .related{margin:26px 0 4px !important;padding:14px 18px !important;background:#f7f9fa !important;border:1px dashed #cfd8dc !important;border-radius:10px !important;font-size:15px !important;line-height:1.7 !important}
.uro-topic .related .rl-tag{display:inline-block !important;font-weight:800 !important;color:var(--teal) !important;margin-right:8px !important}
.uro-topic .sec--navy .related .rl-tag{color:var(--navy) !important}
.uro-topic .related a{color:var(--navy) !important;text-decoration:none !important;font-weight:700 !important;border-bottom:1px solid var(--navy) !important}
.uro-topic .related a:hover{opacity:.7 !important}


.uro-topic .more-b{display:none !important;margin-top:56px !important;padding-top:32px !important;border-top:1px solid var(--line) !important}
.uro-topic .more-b .mb-label{font-size:13px !important;font-weight:700 !important;letter-spacing:.12em !important;color:var(--teal) !important;margin-bottom:16px !important}

.uro-topic .more-b .uro-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
.uro-topic .more-b a{display:block !important;padding:16px !important;border:1px solid var(--line) !important;border-radius:12px !important;text-decoration:none !important;color:var(--ink) !important;font-size:15px !important;font-weight:600 !important}
.uro-topic .more-b a:hover{border-color:var(--teal) !important;color:var(--teal) !important}


.uro-topic .read-more{margin-top:50px !important;padding:28px 32px !important;background:var(--teal-soft) !important;border-radius:14px !important}
.uro-topic .read-more .rm-label{font-size:18px !important;font-weight:800 !important;color:var(--teal) !important;margin-bottom:16px !important}
.uro-topic .read-more ul{list-style:none !important}
.uro-topic .read-more li{margin:10px 0 !important;padding-left:22px !important;position:relative !important}
.uro-topic .read-more li::before{content:"›" !important;position:absolute !important;left:6px !important;color:var(--teal) !important;font-weight:800 !important}
.uro-topic .read-more a{color:var(--navy) !important;text-decoration:none !important;font-weight:600 !important;font-size:15.5px !important}
.uro-topic .read-more a:hover{text-decoration:underline !important}

.uro-topic .cta{margin:40px 0 0 !important;background:linear-gradient(100deg,var(--teal),var(--navy)) !important;border-radius:16px !important;padding:36px 40px !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:24px !important;flex-wrap:wrap !important}
.uro-topic .cta h3{font-size:21px !important;font-weight:800 !important;margin-bottom:6px !important;border-left:none !important;padding-left:0 !important;color:#fff !important}
.uro-topic .cta p{font-size:14.5px !important;opacity:.9 !important;color:#fff !important}
.uro-topic .cta a{flex-shrink:0 !important;background:#fff !important;color:var(--navy) !important;text-decoration:none !important;font-weight:800 !important;font-size:15px !important;padding:14px 30px !important;border-radius:30px !important}


@media (max-width:980px){
  .uro-topic .wrap{grid-template-columns:1fr !important;gap:0 !important;padding:0 20px !important}
  .uro-topic .side{display:none !important}
  .uro-topic .toc-m{display:block !important}
  .uro-topic .more-b{display:block !important}
  .uro-topic .main{padding:28px 0 60px !important}
  .uro-topic h1{font-size:27px !important}
  .uro-topic .byline{font-size:13.5px !important}
  .uro-topic .intro-box{padding:22px 22px !important;margin:28px 0 0 !important}
  .uro-topic .intro-box p{font-size:16px !important}
  .uro-topic .sec{margin-top:46px !important}
  .uro-topic .sec h2{font-size:20px !important;padding:13px 18px !important;gap:12px !important}
  .uro-topic .sec h2 .n{font-size:21px !important}
  .uro-topic .sec p{font-size:16px !important}
  .uro-topic .lead{font-size:16.5px !important}
  .uro-topic .sec h3{font-size:16.5px !important}
  .uro-topic .callout{padding:18px 20px !important}
  .uro-topic .figure{margin:28px 0 !important}
  .uro-topic .figure figcaption{font-size:14px !important}
  .uro-topic .cta{flex-direction:column !important;align-items:flex-start !important;padding:28px 26px !important;text-align:left !important}
  .uro-topic .cta a{width:100% !important;text-align:center !important}
}




.uro-topic .faq{
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  padding:2px 0 !important;
}
.uro-topic .faq summary{
  cursor:pointer !important;
  padding:14px 4px !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  list-style:none !important;
  position:relative !important;
  padding-right:28px !important;
}
.uro-topic .faq summary::-webkit-details-marker{display:none !important;}
.uro-topic .faq summary::after{
  content:"＋" !important;
  position:absolute !important;
  right:6px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-weight:400 !important;
  opacity:.55 !important;
}
.uro-topic .faq[open] summary::after{content:"－" !important;}
.uro-topic .faq summary:hover{opacity:.75 !important;}
.uro-topic .faq > p{
  margin:0 0 16px;
  padding:0 4px !important;
  line-height:1.85 !important;
}


.uro-topic .refs{
  margin-top:28px !important;
  padding-top:22px !important;
  border-top:1px dashed rgba(0,0,0,.15) !important;
}
.uro-topic .refs summary{
  cursor:pointer !important;
  list-style:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--teal) !important;
  background:var(--teal-soft) !important;
  border:1px solid var(--teal) !important;
  border-radius:999px !important;
  padding:11px 20px !important;
  transition:.18s !important;
}
.uro-topic .refs summary::-webkit-details-marker{display:none !important;}
.uro-topic .refs summary::after{content:"👇" !important;font-size:17px !important;line-height:1 !important;}
.uro-topic .refs[open] summary::after{content:"👆" !important;}
.uro-topic .refs summary:hover{background:var(--teal) !important;color:#fff !important;}
.uro-topic .refs[open] summary{margin-bottom:6px !important;}
.uro-topic .refs-body{
  font-size:.86em !important;
  color:#8a9096 !important;
  line-height:1.75 !important;
  padding:10px 2px 4px !important;
}
.uro-topic .refs-body p{margin:0 0 10px;}
.uro-topic .refs-body a{color:#8a9096 !important;text-decoration:underline;}
.uro-topic .refs-body .refs-q{
  font-weight:600 !important;
  color:#6f767c !important;
  margin-top:14px;
}

@media print{
  .uro-topic .faq[open] summary::after{content:"" !important;}
  .uro-topic .refs-body{color:#555 !important;}
}
}
