/* ==========================================================
   觀點網 —— 文章頁樣式（/article/{id}.html）
   依赖 main.css 中的设计变量与内页通用组件（麵包屑、側欄）
   --pillar 由模板按文章所属频道色设置
   ========================================================== */

/* ---------- 麵包屑行（左欄內）與字號 ---------- */
.art-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.art-bar .crumbs{min-width:0;flex-wrap:wrap}
.art-size{flex:none;display:inline-flex;align-items:stretch;height:26px;border:1px solid var(--line-2);border-radius:var(--r);
          background:var(--card);overflow:hidden}
.art-size__label{display:flex;align-items:center;padding:0 8px 0 10px;font-size:12px;color:var(--ink-3)}
.art-size button{min-width:28px;border:0;border-left:1px solid var(--line);background:none;
                 font-size:12px;color:var(--ink-2);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.art-size button:hover{color:var(--brand)}
.art-size button[aria-pressed="true"]{background:var(--ink);color:var(--dark-text)}
/* 麵包屑不再佔右欄頂部，右側全時數據去掉頂部粗線 */
.art-page .side-head{border-top:0}
/* 正文與全時數據之間：欄距正中一條淡淡的豎線，上下兩端漸隱 */
.art-page .inner-side{position:relative}
.art-page .inner-side::before{content:"";position:absolute;top:0;bottom:0;left:-24px;width:1px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--line) 60px,var(--line) calc(100% - 120px),transparent);opacity:.5}

/* ---------- 標題區 ---------- */
.article-head{padding:6px 0 22px;}
.article-head .kicker{color:var(--pillar);margin-bottom:12px}
.article-head h1{font:700 34px/1.32 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
/* 摘要：統一色，不隨頻道變化 */
.article-dek{margin-top:16px;padding:12px 16px;border-left:3px solid var(--line-2);border-radius:0 var(--r) var(--r) 0;
             background:var(--sunk);font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;
              font:12px/1.5 var(--mono);color:var(--ink-3)}
.article-meta time{font-variant-numeric:tabular-nums}

/* ---------- 標籤（時間右側，與頻道頁一致） ---------- */
.article-tags{display:flex;flex-wrap:wrap;gap:6px}
.art-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:2px;
         background:var(--sunk);color:var(--ink-2);font:500 11px/1 var(--sans);white-space:nowrap;
         transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.art-tag:hover,.art-tag:focus-visible{border-color:var(--pillar);background:var(--card);color:var(--pillar)}

/* ---------- 正文（編輯器 HTML） ---------- */
.article-body{max-width:auto;font-size:17px;line-height:1.95;color:var(--ink);overflow-wrap:anywhere;
              text-align:justify;text-justify:inter-character}
/* 编辑器常带行内字体、字号，统一回到版面字体 */
.article-body :where(p,span,font,div,section,li,td){font-family:inherit!important;font-size:inherit!important;line-height:inherit!important}
.article-body[data-size="sm"]{font-size:15px;line-height:1.9}
.article-body[data-size="lg"]{font-size:19.5px;line-height:1.95}
.article-body p{margin:0 0 1.15em}
/* 圖片最大 600px */
.article-body img{display:block;max-width:min(100%,600px)!important;height:auto!important;margin:1.2em auto;border-radius:var(--r)}
.article-body h2,.article-body h3,.article-body h4{font:700 20px/1.45 var(--serif);margin:1.6em 0 .7em}
.article-body strong,.article-body b{font-weight:700}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article-body ul{list-style:disc;padding-left:1.4em;margin-bottom:1.15em}
.article-body ol{list-style:decimal;padding-left:1.4em;margin-bottom:1.15em}
.article-body blockquote{margin:1.4em 0;padding:2px 0 2px 16px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.article-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.2em 0;font-size:14px}
.article-body td,.article-body th{padding:6px 10px;border:1px solid var(--line)}
.article-body iframe,.article-body video{display:block;max-width:100%;margin:1.2em auto}
.article-body figure{margin:1.2em 0}
/* 視頻稿（catid 218）：正文只有一個播放器 */
.article-video{margin:0 0 1.15em}
.article-video video{width:100%;max-width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r)}
/* 瀏覽器解不了 H.265 時的提示（article.js 插入） */
.article-video__tip{margin:.6em 0 0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.article-video__tip a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ---------- 正文底部：署名（左）與分享（右） ---------- */
.article-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:38px;padding-top:14px;              }
.article-foot .art-share{margin-left:auto}
.article-byline{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ink-2)}
.article-byline span{display:inline-flex;align-items:baseline;gap:8px}
.article-byline em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.12em;color:var(--ink-3)}
.article-byline em::after{content:"";display:inline-block;width:1px;height:10px;margin-left:8px;background:var(--line-2);vertical-align:-1px}

/* ---------- 分享 ---------- */
.art-share{display:flex;align-items:center;gap:6px}
.art-share__btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
                border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink-3);cursor:pointer;
                transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.art-share__btn .hole{fill:var(--card);transition:fill .2s ease}
.art-share__btn:hover,.art-share__btn:focus-visible,.art-share__btn[aria-expanded="true"]{border-color:currentColor;color:var(--ink)}
.art-share__btn.is-wechat:hover,.art-share__btn.is-wechat[aria-expanded="true"]{color:#07c160}
.art-share__btn.is-qq:hover{color:#12b7f5}
.art-share__btn.is-weibo:hover{color:#e6162d}
.art-share__sep{width:1px;height:14px;margin:0 4px;background:var(--line)}
.art-share__wx{position:relative}
.art-share__pop{position:absolute;right:50%;bottom:calc(100% + 10px);z-index:20;transform:translateX(50%);width:156px;padding:12px 12px 10px;
                border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:0 8px 24px oklch(19.4% .006 56 / .14);
                text-align:center}
.art-share__pop::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;margin:-5px 0 0 -5px;
                       border:solid var(--line);border-width:0 1px 1px 0;background:var(--card);transform:rotate(45deg)}
.art-share__qr{display:flex;align-items:center;justify-content:center;width:128px;height:128px;margin:0 auto;font-size:12px;color:var(--ink-3)}
.art-share__qr img,.art-share__qr canvas{display:block;width:128px;height:128px}
.art-share__pop p{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}

/* ---------- 廣告：通欄在左欄頂部，方塊在免責聲明之後、署名分享之前居中；圖片按原比例縮放 ---------- */
.art-ad{position:relative;line-height:0}
.art-ad[hidden]{display:none}
.art-ad a{display:block}
.art-ad img{display:block;max-width:100%;height:auto;margin:0 auto}
.art-ad--banner{margin:10px 0 10px}
.art-ad--banner img{width:100%}
.art-ad--square{margin:20px 0 0}

/* ---------- 打印：只留標題、摘要與正文 ---------- */
@media print{
  .masthead,.site-foot,.inner-side,.art-bar,.art-share,.art-related,.art-ad,.term{display:none!important}
  .inner-grid{display:block}
  .article-foot{border-top:0}
}

/* ---------- 相關文章 ---------- */
.art-related{margin-top:14px}
.art-related__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.art-related__list li{border-bottom:1px solid var(--line)}
/* 一行：標題超長省略，日期靠右 */
.art-related__item{display:flex;align-items:baseline;gap:12px;padding:9px 0}
/* 標題字體與側欄全時數據一致 */
.art-related__title{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-related__item time{flex:none;font:11px/1.5 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.art-related__item:hover .art-related__title{color:var(--brand)}
@media (max-width:720px){
  .art-related__list{grid-template-columns:minmax(0,1fr)}
}