/* ===== 文章閱讀頁樣式（v5 定案版，2026-08-18 套版）=====
只被 article.html／article-followup.html 載入（site.css 之後），其他頁面不吃這支。
骨架：深色置中標題 → 精選圖跨在深淺交界上 → 正文＋右側欄（關於作者→這篇文章會談到→最新文章）。
量測依據（2026-08-17 實查真實案例，1470px）：
雷蒙三十 正文 710px / 18px / line-height 1.8 / 頁底 #f6f7f8 淺灰 / 白卡 radius 32px
側欄 246px、position:fixed、無卡片背景
ahrefs 正文 600px / 18px / 1.56 / 左側 sticky 目錄 252px
joshwcomeau 正文 686px / 18px / 單欄無側欄
共同結論：淺底、單一閱讀面、正文 600-710px、18px、側欄 240-260px。 */
/* ---------- 頁面底色：黑 → 淺藍灰 ---------- */
body.artlab{background:var(--paper2)}
/* ---------- 閱讀區外殼 ---------- */
.read{background:var(--paper2);position:relative}
.read-pad{padding:clamp(40px,5.5vh,68px) 0 clamp(66px,9vh,116px)}
/* ---------- 正文排版（覆寫 site.css 的 .prose） ---------- */
.artlab .prose{max-width:none;margin:0;color:var(--dark)}
.artlab .prose p{font-size:1.115rem;line-height:1.9;margin:0 0 1.45em}
.artlab .prose h2{font-size:clamp(1.45rem,2.3vw,1.78rem);line-height:1.35;
font-weight:900;margin:2.15em 0 .72em;color:var(--dark);letter-spacing:-.01em}
.artlab .prose h2:first-child{margin-top:0}
.artlab .prose h3{font-size:1.24rem;font-weight:800;margin:1.7em 0 .5em;color:var(--navy)}
.artlab .prose blockquote{border-left:3px solid var(--teal);padding:4px 0 4px 22px;
margin:1.7em 0;color:var(--dark);font-size:1.14rem;line-height:1.85}
.artlab .prose strong{font-weight:800}
/* 卡片式閱讀面 */
.prose-card{background:var(--paper);border-radius:24px;
padding:clamp(32px,4.6vh,58px) clamp(24px,3.4vw,54px);
box-shadow:0 26px 64px -38px rgba(20,40,55,.42)}
/* ---------- 內文開頭的目錄（手機版看得到；桌面有側欄時隱藏，交給側欄） ---------- */
.artlab .prose>.toc{background:rgba(31,89,126,.055);border:1px solid var(--line-d);
border-left:3px solid var(--teal);border-radius:12px;padding:20px 24px;margin:0 0 2.2em}
.artlab .prose>.toc h4{font-size:.76rem;letter-spacing:.14em;color:var(--navy);
font-weight:800;margin-bottom:10px}
.artlab .prose>.toc li{font-size:.98rem;line-height:1.85}
/* ---------- 精選圖／內文大圖 ---------- */
.lead-fig{margin:0}
.lead-fig img{display:block;width:100%;border-radius:20px}
.lead-fig figcaption{margin-top:12px;font-size:.86rem;color:var(--dark-dim);line-height:1.6}
/* ---------- byline（深底版／淺底版） ---------- */
.bl{display:flex;align-items:center;gap:13px}
.bl img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.bl b{display:block;font-size:.98rem;font-weight:800}
.bl span{display:block;font-size:.85rem;margin-top:3px}
.bl-dark img{border:2px solid rgba(79,216,234,.45)}
.bl-dark b{color:var(--cream)}
.bl-dark span{color:var(--cream-dim)}
.bl-light img{border:2px solid rgba(31,89,126,.28)}
.bl-light b{color:var(--dark)}
.bl-light span{color:var(--dark-dim)}
/* ---------- 側欄：不做成卡片，直接落在頁面底色上 ----------
側欄用「外層 stretch ＋ 內層拉滿高度」兩層，sticky 的容器高度才等於整段文章高度，
不會像單層那樣文章還沒讀完側欄就脫離（about-lab v7 踩過同一個坑）。
⚠️ 2026-08-20：整塊 side-in 不再 sticky。側欄 1107px 比視窗（~700px）高，
整塊釘住會把底部的「最新文章」永遠推到畫面外；改用 JS 逐幀算位置則會跳動
（JS 比合成執行緒慢一幀，Freddy 錄影指出）。現行做法＝只有目錄 .stoc 原生 sticky，
作者卡與最新文章正常隨頁面捲走，並用 flex order 把最新文章排到目錄之前，
避免它捲上來跟釘住的目錄重疊。v5 區塊底部有對應規則。 */
.side{display:none}
.side-in{position:sticky;top:104px}
.side h4{font-size:.82rem;letter-spacing:.14em;color:var(--navy);font-weight:800;
margin-bottom:12px;text-transform:uppercase}
.sdiv{height:1px;background:var(--line-d);margin:22px 0}
.stoc ol{list-style:none;margin:0;padding:0;counter-reset:s}
.stoc li{counter-increment:s}
.stoc a{display:flex;gap:9px;padding:7px 10px 7px 8px;border-radius:8px;
font-size:.97rem;line-height:1.5;color:var(--dark-dim);border:none;
transition:background .18s,color .18s}
.stoc a::before{content:counter(s);font-size:.72rem;font-weight:800;color:var(--teal);
flex:none;padding-top:.22em;font-variant-numeric:tabular-nums}
.stoc a:hover{background:rgba(31,89,126,.07);color:var(--navy)}
.stoc a.on{background:rgba(58,166,185,.17);color:var(--navy);font-weight:700}
.stoc a.on::before{color:var(--navy)}
.slatest ul{list-style:none;margin:0;padding:0}
.slatest li+li{margin-top:4px;padding-top:12px;border-top:1px solid var(--line-d)}
.slatest a{display:block;font-size:.92rem;line-height:1.55;font-weight:700;
color:var(--dark);border:none;padding:5px 0;transition:color .18s}
.slatest a:hover{color:var(--navy)}
.slatest .sk{display:block;font-size:.68rem;letter-spacing:.1em;color:var(--teal);
font-weight:800;margin-bottom:4px}
/* 作者卡：大頭貼置中放大，名字在下、簡介靠左讀起來比較順 */
.sauthor-row{text-align:center}
.sauthor-row img{width:112px;height:112px;border-radius:50%;
object-fit:cover;display:block;margin:2px auto 11px;
border:3px solid #fff;box-shadow:0 6px 18px -8px rgba(20,40,55,.45)}
.sauthor-row b{display:block;font-size:1rem;font-weight:800;color:var(--dark)}
.sauthor p{font-size:.92rem;color:var(--dark-dim);line-height:1.65;margin:11px 0 0}
/* 社群 icon：品牌 logo 是實心字符，不能用 stroke 描邊畫——Threads／FB 那種
複雜輪廓描出來一定變形（2026-08-17 Freddy 指出）。path 取自官方 simple-icons，
原始檔留在 assets/icons/，一律 fill:currentColor。 */
.ssocial{display:flex;gap:9px;margin-top:15px;justify-content:center}
.ssocial a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:rgba(31,89,126,.09);color:var(--navy);border:none;
transition:background .18s,color .18s}
.ssocial a:hover{background:var(--navy);color:#fff}
.ssocial svg{width:16px;height:16px;display:block;fill:currentColor}
/* ---------- 深區塊接淺區塊的收邊 ---------- */
.artlab .magnet{border-top:1px solid rgba(200,230,232,.1)}
/* ---------- 手機（<1080px）：一律單欄，側欄不出現 ---------- */
@media(max-width:1079px){
.side{display:none!important}
.read-grid,.read-grid-l{display:block!important}
}
@media(min-width:1080px){
.has-side .prose>.toc{display:none}
}
/* ===== v5 骨架與定案數值 =====
精選圖 figw=100（左緣切齊正文欄、右緣切齊目錄欄）、陰影 figlift=6／figsho=.80（緊貼、深色）、
側欄大頭貼 avatar=112px。2026-08-18 Freddy 與太太用滑桿拉出來的定案值，直接烘死不留變數面板。 */
.v5{--hang:clamp(52px,7vw,100px)}
.v5 .pagehead{overflow:visible;text-align:left;
padding:clamp(132px,16vh,152px) 0 0;background:linear-gradient(180deg,#081420,#0a1c2a)}
.ph-c-in{max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:2}
.ph-c-in .k{font-size:.92rem;letter-spacing:.14em;color:var(--hot);
font-weight:800;margin-bottom:clamp(14px,2vh,18px)}
.ph-c-in h1{font-size:clamp(1.85rem,3.6vw,2.72rem);line-height:1.28;font-weight:900;
color:#fbfeff;letter-spacing:-.012em}
.ph-c-in .bl{justify-content:center;margin-top:clamp(22px,3vh,28px)}
/* 精選圖跨在深淺交界上 */
.fig-hang{position:relative;z-index:4;
margin-top:clamp(34px,5vh,54px);margin-bottom:calc(-1 * var(--hang))}
/* 精選圖收窄只在桌面版生效。手機版精選圖一律滿寬（Freddy 已驗過的行為，不能動）——
一開始沒包 media query，390px 的圖被縮成 82%，scrollHeight 19888→19853 就是這樣抓到的。 */
.fig-hang .lead-fig{margin:0 auto}
@media(min-width:1080px){
.fig-hang .lead-fig{max-width:100%}
}
.fig-hang .lead-fig img{border-radius:20px;
box-shadow:0 6px 12.6px -6px rgba(0,0,0,.80)}
.v5 .read{padding-top:calc(var(--hang) + clamp(32px,4.4vh,54px))}
/* 正文 + 右側欄（側欄保留卡片語言，但統一樣式並收窄） */
@media(min-width:1080px){
.read-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;
gap:clamp(36px,4vw,62px);align-items:start}
.side{display:block;align-self:stretch}
}
.v5 .side-in{display:flex;flex-direction:column;gap:18px;position:static;height:100%}
/* 順序：關於作者 → 最新文章 → 目錄（目錄必須排最後才能一路黏到文末不與人重疊） */
.v5 .sauthor{order:1}
.v5 .slatest{order:2}
.v5 .stoc{order:3;position:sticky;top:104px}
.v5 .side-in>nav,.v5 .side-in>div{background:var(--paper);border:1px solid var(--line-d);
border-radius:16px;padding:20px 22px;box-shadow:0 22px 52px -36px rgba(20,40,55,.42)}
.v5 .sdiv{display:none}
.v5 .stoc a{padding:6px 9px 6px 7px}
/* ---------- 文末作者卡（2026-08-31 Freddy 手機版回饋）----------
他的三點：①要有小頭貼 ②文字不要置中、改靠左 ③加 LINE 那塊 CTA 排版很怪。
③ 的成因：.step004 是 inline-flex，裡面「加我的官方 LINE，輸入」「004」
「免費領取《…》」是三個獨立的文字節點 → flex 把每一段當成獨立項目各自換行，
窄螢幕上就變成三欄並排。改回正常文字流就解決，不是調 gap 或 padding 能修的。
⚠️ 全部鎖在 .artlab 底下＝只影響文章頁。.magnet / .step004 首頁與 blog 也在用，
而首頁正在挑版（O1–O5），不動共用的 site.css。首頁那邊的同一個 bug 待挑版定案後另修。 */
/* 頭像 ＋ 姓名（各寬度都顯示） */
.artlab .magnet .author-id{
display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.artlab .magnet .author-id h2{ margin:0 }
.artlab .magnet .author-ava{
width:64px; height:64px; flex:0 0 64px; border-radius:50%;
object-fit:cover; display:block;
box-shadow:0 10px 24px -10px rgba(0,0,0,.7),
0 0 0 3px rgba(79,216,234,.10), 0 0 0 4px rgba(79,216,234,.28);
}
@media(max-width:760px){
/* ② 整塊靠左 */
.artlab .magnet-grid{ text-align:left }
.artlab .magnet p{ margin-inline:0; max-width:none }
/* ③ 004 那塊：脫離 flex、正常斷行、圓角矩形而非藥丸 */
.artlab .magnet .step004{
display:block; width:100%; text-align:left;
border-radius:16px; padding:14px 18px; line-height:1.75;
}
/* CTA：兩顆等寬堆疊，不再一大一小置中 */
.artlab .magnet .cta-row{
flex-direction:column; align-items:stretch;
justify-content:flex-start; gap:12px;
}
.artlab .magnet .cta-row .btn{ width:100%; justify-content:center }
/* 頭像在手機上略縮 */
.artlab .magnet .author-ava{ width:56px; height:56px; flex-basis:56px }
.artlab .magnet .author-id{ margin-bottom:14px }
/* 誘餌封面維持置中（2026-08-31 Freddy 第二輪回饋）。
上面那條 .magnet-grid{text-align:left} 是為了讓文字靠左，
但封面圖是 inline 元素，會跟著一起被拉去靠左——圖不是文字，置中才好看。
.magnet-cover 雖然有 justify-self:center，手機單欄時它的寬度就是整欄寬（350px），
置不置中由裡面那張 inline ![]()
決定，所以要在這一層把 text-align 收回來。 */
.artlab .magnet .magnet-cover{ text-align:center }
}
/* ---------- 手機版頁尾（2026-08-31 Freddy 回饋：「頁面最後底部這邊的排版很奇怪」）----------
成因不是間距沒調好，是 .foot 用 `flex + flex-wrap + justify-content:space-between`：
換行之後每一行各自把項目推到兩端 → 390px 實測第一行的間距 289px、第二行 93px，
四個欄位沒有共同的對齊軸（x 座標 20 / 309 / 20 / 269）。加上「免費資源」只有 2 條連結、
同一行的「追蹤外銷實驗室」有 4 條，短的那欄下面就空出一大塊——他截圖畫紅字的正是那裡。
解法：手機版改成兩欄 grid，並把兩個各有 4 條連結的欄位（網站導覽／追蹤外銷實驗室）
排在同一列，高度自然齊平、不留空洞；「免費資源」整排放到最後——它的連結字最長
（「外銷入門地圖 VOL.02」），半欄會擠，而且那是 LINE 004 誘餌，
擺在分隔線正上方比塞在半欄裡醒目。
⚠️ 全部鎖在 .artlab 底下＝只影響文章頁。.foot 首頁／blog／關於頁也在用，
而首頁正在挑版（O1–O5），不動共用的 site.css。
待挑版定案後，跟 .step004 同一批上移到 site.css 套全站。 */
@media(max-width:760px){
.artlab .foot{
display:grid; grid-template-columns:1fr 1fr;
gap:28px 18px; align-items:start;
}
.artlab .foot .col:nth-child(1){ grid-column:1/-1 } /* logo ＋ 一句話：整排 */
.artlab .foot .col:nth-child(2){ order:1 } /* 網站導覽（4 條） */
.artlab .foot .col:nth-child(4){ order:2 } /* 追蹤外銷實驗室（4 條） */
.artlab .foot .col:nth-child(3){ order:3; grid-column:1/-1 } /* 免費資源：整排 */
/* 連結的可點高度 31px → 39px（手機上原本偏窄） */
.artlab .foot .col a{ padding:7px 0 }
}