/* reset + 版面底(編輯台紙白) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

.site-root {
  position:relative;
  min-height:100vh;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-sans);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.paper-grain {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:calc(var(--grain-opacity) * .5);
  mix-blend-mode:multiply;
  background-image:radial-gradient(color-mix(in oklab,var(--c-line) 26%, transparent) 0.5px, transparent 0.8px);
  background-size:6px 6px;
}

/* 刊物雙細線:報頭/欄位標題用 */
.edi-rules {
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  position:relative;
}
.edi-rules::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:3px;
  border-bottom:1px solid var(--c-line);
}

/* 圓角開關補綁:客製面板的色票/分段鈕/旋鈕統一綁 --radius-pill,
   行內已寫 border-radius 的元素不受影響。 */
button { border-radius: var(--radius-pill); }
[data-knob] { border-radius: var(--radius-pill); }

/* 列表版式必須寫成 class,不能留在 inline style。
   js/main.js 的分類篩選在顯示卡片時執行 el.style.display = '',
   這會把 inline style 裡的 display 一併清掉,元素退回標籤預設的
   display,整個版式跟著失效。寫成 class 就能在 inline display 被
   清掉後回落到這裡的值。 */
.news-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:28px;
  align-items:baseline; padding:26px 0;
  border-bottom:1px solid var(--c-border); text-decoration:none;
  color:inherit;
}
@media (max-width: 720px){
  .news-row{ grid-template-columns:1fr; gap:8px; }
}