/* 文章內頁（2026.10.28 定案，方案 A「延續首頁」）。規格見 DESIGN.md「文章內頁」。
   只在一般文章內頁載入；顏色沿用首頁 site-redesign.css。 */

body.single-post .container-wrap.updm-single-wrap { background: #f8f8f8; padding-top: 0; padding-bottom: 0; }
body .updm-single-wrap .container.main-content { max-width: none; }
body .updm-single-wrap .row { padding-bottom: 0; }

.updm-post {
    --u-ink: #444;
    --u-muted: #777;
    --u-rule: #eee;
    --u-blue: #005d76;
    --u-cyan: #02acd8;
    --u-focus: #5197d5;
    --u-tint: rgba(0,93,118,.07);
    --u-ease: cubic-bezier(.22,1,.36,1);
    padding: 56px 0 104px;
    color: var(--u-ink);
    font-size: 17px;
    line-height: 1.8;
}
/* 蓋掉 nigramotion.css 給列表 article.post 的左側小圖示與內距 */
body article.post.updm-post,
body article.post.updm-post:hover { margin: 0; padding-left: 0; padding-right: 0; border: 0; background: none; line-height: 1.8; }
.updm-post *, .updm-post *::before, .updm-post *::after { box-sizing: border-box; }
.updm-post a { text-decoration: none; }
.updm-post a:focus-visible, .updm-post button:focus-visible, .updm-post .updm-post-slider:focus-visible { outline: 2px solid var(--u-focus); outline-offset: 4px; }

/* ===== 卡片：首頁「最新公告」的框 ===== */
.updm-post .updm-post-card,
.updm-post .updm-post-nav { max-width: 960px; margin-left: auto; margin-right: auto; }
.updm-post .updm-post-card { position: relative; padding: 64px 72px 72px; background: #fff; border: 1px solid var(--u-cyan); border-radius: 0 30px 0 0; box-shadow: 0 12px 36px rgba(0,0,0,.055); }
.updm-post .updm-post-card::before { content: ""; position: absolute; top: -1px; left: 72px; width: 62px; height: 10px; background: var(--u-cyan); }

/* ===== 標題區 ===== */
.updm-post .updm-post-head { padding-bottom: 36px; border-bottom: 1px solid var(--u-rule); }
.updm-post .updm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--u-muted); font-size: 15px; line-height: 1.5; }
.updm-post .updm-post-meta time { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.updm-post ul.updm-post-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.updm-post ul.updm-post-cats li { margin: 0; padding: 0; list-style: none; }
.updm-post .updm-post-cats a {
    display: inline-flex; align-items: center; min-height: 30px; padding: 4px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1.4; color: #000;
    background: linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(180deg,#e9f4f8,#d9ecf4);
    box-shadow: 0 0 0 1px rgba(0,93,118,.22),inset 0 0 0 1.5px rgba(255,255,255,.85),0 1px 2px rgba(0,93,118,.06);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine) {
    .updm-post .updm-post-cats a:hover { background: var(--u-cyan); color: #000; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,93,118,.45),0 8px 16px -6px rgba(0,93,118,.35); }
}
body .updm-post h1.updm-post-title { margin: 18px 0 0; padding: 0; color: var(--u-blue); font-size: 33px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; text-wrap: balance; }

/* ===== 圖片 ===== */
.updm-post .updm-post-media { margin: 40px 0 0; padding: 0; }
.updm-post .updm-media-single { display: block; padding: 32px; background: #f8f8f8; cursor: zoom-in; overflow: hidden; }
.updm-post .updm-media-single img { display: block; width: auto; max-width: 100%; height: auto; max-height: 82vh; margin: 0 auto; transition: transform 1s var(--u-ease); }
@media (hover:hover) and (pointer:fine) { .updm-post .updm-media-single:hover img { transform: scale(1.02); } }
.updm-post .updm-post-media figcaption { margin-top: 10px; color: var(--u-muted); font-size: 13px; line-height: 1.6; text-align: center; }

/* 多張圖：首頁主視覺輪播（#updm-home-slider）同規格。沒有 JavaScript 時圖片直接上下排列。 */
.updm-post .updm-post-slider { position: relative; margin: 0 -72px; background: #f8f8f8; }
.updm-post .updm-post-slider:not(.is-enhanced) .ps-slide { margin: 0 auto 16px; max-width: 760px; padding: 4px; border-radius: 20px; background: #fff; }
.updm-post .updm-post-slider:not(.is-enhanced) .ps-slide img { display: block; width: 100%; height: auto; border-radius: 16px; }
.updm-post .updm-post-slider.is-enhanced { overflow: hidden; height: clamp(420px, 72vh, 680px); padding: 14px 0; }
.updm-post .is-enhanced .ps-stage { position: relative; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.updm-post .is-enhanced .ps-stage.dragging { cursor: grabbing; }
.updm-post .is-enhanced .ps-slide { position: absolute; left: 50%; top: 50%; margin: 0; padding: 4px; border-radius: 20px; background: #fff; overflow: hidden; will-change: transform, opacity; box-shadow: 0 8px 20px rgba(28,58,77,.23); }
.updm-post .ps-slide a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.updm-post .is-enhanced .ps-slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 20px; pointer-events: none; will-change: transform; }
@media (hover:hover) and (pointer:fine) { .updm-post .is-enhanced .ps-slide img { transition: scale .7s var(--u-ease); } .updm-post .is-enhanced .ps-slide:hover img { scale: 1.025; } }
/* 左右箭頭：與首頁 #updm-home-slider .demo-edge 同規格。改一邊要同步改另一邊。 */
.updm-post .ps-edge { position: absolute; top: 50%; z-index: 150; display: grid; place-items: center; width: 56px; height: 112px; margin: 0; padding: 12px; border: 0; border-radius: 0; background: transparent; cursor: pointer; transform: translateY(-50%); filter: drop-shadow(0 4px 10px rgba(24,55,79,.23)); touch-action: manipulation; }
.updm-post .ps-edge[hidden] { display: none; }
.updm-post .ps-edge::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 44 100 48 100 100 C100 152 0 156 0 200 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C0 44 100 48 100 100 C100 152 0 156 0 200 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.updm-post .ps-edge-left { left: -1px; }
.updm-post .ps-edge-right { right: -1px; }
.updm-post .ps-edge-right::before { transform: scaleX(-1); }
.updm-post .ps-edge span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--u-focus); color: #fff; font-size: 14px; line-height: 1; }
/* 圖片說明：首頁 .demo-caption 同款玻璃框，停下來時才出現 */
.updm-post .ps-caption { position: absolute; left: 50%; bottom: 22px; z-index: 140; width: min(70%, 560px); padding: 10px 20px; border: 1px solid rgba(255,255,255,.6); border-radius: 14px; background: rgba(185,219,242,.75); color: #000; font-size: 15px; line-height: 1.6; text-align: center; backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); box-shadow: 0 8px 24px rgba(48,94,126,.12); opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: opacity .4s ease, transform .5s var(--u-ease); }
.updm-post .ps-caption.visible { opacity: 1; transform: translate(-50%,0); }
.updm-post .updm-post-slider:not(.is-enhanced) .ps-caption { display: none; }

/* ===== 內文 ===== */
.updm-post .updm-post-body { margin-top: 44px; }
.updm-post .updm-post-body p,
.updm-post .updm-post-body li { max-width: 20em; font-size: 17px; line-height: 1.8; color: var(--u-ink); }
.updm-post .updm-post-body p { margin: 0 0 1.2em; padding: 0; }
.updm-post .updm-post-body ul,
.updm-post .updm-post-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.updm-post .updm-post-body ul li { list-style: square; margin: 0; padding: 0; }
.updm-post .updm-post-body ol li { list-style: decimal; margin: 0; padding: 0; }
.updm-post .updm-post-body a { color: var(--u-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,93,118,.35); transition: text-decoration-color .25s ease; }
.updm-post .updm-post-body a:hover { text-decoration-color: currentColor; }
.updm-post .updm-post-body img { max-width: 100%; height: auto; }
.updm-post .updm-post-body iframe { max-width: 100%; }
.updm-post .updm-post-body table { width: 100%; }
.updm-post .updm-post-body > :last-child,
.updm-post .updm-post-body .wpb_wrapper > :last-child,
.updm-post .updm-post-body .wpb_text_column :last-child { margin-bottom: 0; }

/* ===== 下載項目 ===== */
.updm-post .updm-post-files { margin-top: 64px; }
body .updm-post h2.updm-sec-head { margin: 0; padding: 0; color: var(--u-blue); font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: normal; }
.updm-post .updm-sec-head span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .13em; }
.updm-post ul.updm-file-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--u-rule); }
.updm-post ul.updm-file-list li { margin: 0; padding: 0; list-style: none; }
.updm-post .updm-file { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--u-rule); color: var(--u-ink); transition: background .25s ease; }
.updm-post .updm-file-name { flex: 1; min-width: 0; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; transition: color .25s ease; }
/* 檔案類型：有底色的圓角小字 */
.updm-post .updm-file-type { flex: none; padding: 1px 10px; border-radius: 999px; background: var(--u-tint); color: var(--u-blue); font-size: 12px; font-weight: 500; letter-spacing: .08em; line-height: 22px; }
.updm-post .updm-file-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--u-blue); font-size: 15px; line-height: 1; transition: transform .4s var(--u-ease), background .25s ease, color .25s ease; }
@media (hover:hover) and (pointer:fine) {
    .updm-post .updm-file:hover { background: #f5fafc; }
    .updm-post .updm-file:hover .updm-file-name { color: var(--u-blue); }
    .updm-post .updm-file:hover .updm-file-icon { transform: translateY(3px); background: var(--u-blue); color: #fff; }
}

/* ===== 上一篇／下一篇 ===== */
.updm-post .updm-post-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; padding: 0 8px; }
.updm-post .pn { display: block; min-width: 0; padding: 8px 32px 8px 0; color: var(--u-ink); }
.updm-post .pn.next { padding: 8px 0 8px 32px; border-left: 1px solid #e2e2e2; text-align: right; }
.updm-post .pn-label { display: inline-flex; gap: 8px; color: var(--u-muted); font-size: 15px; line-height: 1.6; }
.updm-post .pn-arrow { display: inline-block; transition: transform .5s var(--u-ease); }
.updm-post .pn-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 6px; color: var(--u-ink); font-size: 17px; font-weight: 500; line-height: 1.6; text-wrap: pretty; transition: color .25s ease; }
@media (hover:hover) and (pointer:fine) {
    .updm-post a.pn:hover .pn-title { color: var(--u-blue); }
    .updm-post a.pn.prev:hover .pn-arrow { transform: translateX(-5px); }
    .updm-post a.pn.next:hover .pn-arrow { transform: translateX(5px); }
}

/* ===== 進場：與首頁區塊同一套（site-redesign.js 的 hp-pending 機制）=====
   外框線畫出 → 藍色色塊鋪滿再縮到右下 → 色條沿外框跑回左上角 → 內容淡入。
   is-pending 由版型裡的小段程式加上；沒有 JavaScript 時內容直接顯示。 */
.updm-post .u-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; color: var(--u-cyan); }
.updm-post .u-frame path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.updm-post .u-cover { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; pointer-events: none; background: var(--u-cyan); }
.updm-post .u-accent { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.updm-post .updm-post-card.has-drawn-frame { border-color: transparent; }
.updm-post .updm-post-card.is-accent-interactive::before { visibility: hidden; }
.updm-post.is-pending .u-frame path { stroke-dashoffset: 1; }
.updm-post.is-pending .updm-post-card::before,
.updm-post.is-pending .u-accent { opacity: 0; }
/* 動畫開始前先藏起內容；開始後（is-revealing）由動畫自己控制淡入 */
.updm-post.is-pending:not(.is-revealing) .updm-post-card > :not(.u-frame):not(.u-cover):not(.u-runner):not(.u-accent),
.updm-post.is-pending:not(.is-revealing) .updm-post-nav { opacity: 0; }

/* ===== 大圖 ===== */
.updm-lb { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 56px 72px; background: rgba(10,10,10,.88); opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.updm-lb.is-open { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }
.updm-lb figure { display: grid; justify-items: center; gap: 12px; margin: 0; max-width: 100%; }
.updm-lb img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 150px); transform: scale(.98); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.updm-lb.is-open img { transform: none; }
.updm-lb figcaption { max-width: 40em; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.6; text-align: center; }
.updm-lb figcaption:empty { display: none; }
.updm-lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background .25s ease, color .25s ease; }
.updm-lb button:hover { background: #fff; color: #000; }
.updm-lb button:focus-visible { outline: 2px solid #5197d5; outline-offset: 3px; }
.updm-lb button[hidden] { display: none; }
.updm-lb .lb-close { top: 20px; right: 20px; }
.updm-lb .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.updm-lb .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.updm-lb .lb-count { position: absolute; left: 0; right: 0; bottom: 20px; color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .1em; text-align: center; }

/* ===== 手機 ===== */
@media (max-width: 767px) {
    .updm-post { padding: 24px 0 72px; }
    .updm-post .updm-post-card { padding: 36px 20px 32px; border-radius: 0 20px 0 0; }
    .updm-post .updm-post-card::before { left: 20px; }
    .updm-post .updm-post-head { padding-bottom: 24px; }
    body .updm-post h1.updm-post-title { font-size: 24px; }
    .updm-post .updm-post-media { margin-top: 28px; }
    .updm-post .updm-media-single { margin: 0 -20px; padding: 16px; }
    .updm-post .updm-post-slider { margin: 0 -20px; }
    .updm-post .updm-post-slider.is-enhanced { height: clamp(300px, 60vh, 560px); }
    .updm-post .ps-caption { width: 90%; padding: 10px 16px; font-size: 13px; }
    .updm-post .updm-post-body { margin-top: 32px; }
    .updm-post .updm-post-files { margin-top: 48px; }
    .updm-post .updm-post-nav { padding: 0; }
    .updm-post .pn { padding: 8px 14px 8px 0; }
    .updm-post .pn.next { padding: 8px 0 8px 14px; }
    .updm-post .pn-title { font-size: 15px; }
    .updm-lb { padding: 64px 12px; }
    .updm-lb .lb-prev, .updm-lb .lb-next { top: auto; bottom: 12px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .updm-post *, .updm-post *::before, .updm-post *::after, .updm-lb, .updm-lb * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}