/* kevindesigner.com 文章頁：只有內容一欄，沒有側欄、廣告、跳出視窗；顏色與字型沿用首頁（index.src.html 的 :root）
   2026-10-24 Kevin：「設計成好閱讀的形式，不要有太多干擾」。直角、不用側邊色條（引用改淺灰底） */
:root{
  --bg:#F7F7F5; --surface:#FFFFFF; --tint:#EFEFEC; --line:#E6E6E2; --line-2:#D9D9D4;
  --ink:#111111; --ink-2:#2E2E2E; --mute:#6B6B6E; --mist:#A6A6A8;
  --accent:#FF5C1A; --accent-ink:#C2410C;
  --sans:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
a{color:inherit}

/* 頂部：只有 Logo 和「所有文章」 */
.bar{max-width:1200px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.bar .logo{display:flex}
.bar .logo svg{height:22px;width:auto;display:block}
.bar nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 2px}
.bar nav a:hover{color:var(--ink)}

/* 內容欄 */
.read{max-width:720px;margin:0 auto;padding:56px max(20px,env(safe-area-inset-right,0px)) 96px max(20px,env(safe-area-inset-left,0px))}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--mute)}
.meta a{text-decoration:none}
.meta a:hover{color:var(--ink)}
h1{margin:0 0 32px;font-size:clamp(26px,4.4vw,34px);line-height:1.42;font-weight:500;color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
.cover{margin:0 0 44px}
.cover img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--tint)}

.body{font-size:17.5px;line-height:1.9;letter-spacing:.01em;overflow-wrap:break-word}
.body>*:first-child{margin-top:0}
.body p{margin:0 0 1.15em}
.body h2{margin:2.3em 0 .8em;font-size:24px;line-height:1.45;font-weight:500;color:var(--ink)}
.body h3{margin:2em 0 .6em;font-size:20px;line-height:1.5;font-weight:500;color:var(--ink)}
.body h4{margin:1.7em 0 .5em;font-size:17.5px;line-height:1.6;font-weight:700;color:var(--ink)}
.body strong,.body b{font-weight:700;color:var(--ink)}
.body a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,92,26,.5);text-decoration-thickness:1px;text-underline-offset:3px}
.body a:hover{text-decoration-color:var(--accent)}
.body ul,.body ol{margin:0 0 1.2em;padding-left:1.45em}
.body li{margin:.35em 0}
.body li p{margin:0}
.body li::marker{color:var(--mist)}
.body hr{margin:2.6em 0;border:0;border-top:1px solid var(--line)}
.body blockquote{margin:1.7em 0;padding:18px 22px;background:var(--tint);color:var(--ink-2)}
.body blockquote p:last-child{margin-bottom:0}
.body code{font-family:var(--mono);font-size:.88em;background:var(--tint);padding:1px 5px}

/* 圖片、影片、嵌入 */
.body figure{margin:2.1em 0}
.body img,.body video{display:block;max-width:100%;height:auto;margin:0 auto}
.body .kg-image-card img{border:1px solid var(--line);background:var(--surface)}
.body figcaption{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--mute);text-align:center}
.body figcaption p{margin:0}
.body video{width:100%;background:#000}
.body .kg-embed-card iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:var(--tint)}

/* 連結卡、相關文章卡、商品卡：只留文字的方框 */
.body .kg-bookmark-card a,.body .creatorhome-article-card a{display:block;padding:14px 18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink-2)}
.body .kg-bookmark-card a:hover,.body .creatorhome-article-card a:hover{border-color:var(--line-2)}
.body .creatorhome-article-card{margin:1.6em 0}
.body .kg-bookmark-title,.body .creatorhome-article-card__title{font-size:16px;line-height:1.55;font-weight:500;color:var(--ink)}
.body .kg-bookmark-description,.body .creatorhome-article-card__description{margin-top:4px;font-size:14px;line-height:1.6;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.body .kg-bookmark-metadata,.body .creatorhome-article-card__eyebrow{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--mist);display:flex;gap:10px;flex-wrap:wrap}
.body .creatorhome-article-card__eyebrow{margin:0 0 4px}
.body .kg-product-card{margin:1.8em 0;padding:18px 20px;background:var(--surface);border:1px solid var(--line)}
.body .kg-product-card-title{margin:0 0 4px;font-size:17px}
.body .kg-product-card-rating{display:none}
.body .kg-product-card-description p{margin:.4em 0;font-size:15.5px}
.body .kg-product-card-button{display:inline-block;margin-top:6px;font-size:15px}
.body .twitter-tweet{font-size:15.5px}
.body .twitter-tweet>a{font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.body .note,.body .newsletter-reminder{font-size:15.5px}
.body .newsletter-reminder{margin:2em 0;padding:18px 22px;background:var(--tint)}
.body .newsletter-reminder p:last-child{margin-bottom:0}

/* 表格：外層 .tw（建置時包上）手機可左右滑，表格本身撐滿欄寬 */
.body .tw{max-width:100%;overflow-x:auto;margin:1.8em 0}
.body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.65}
.body th,.body td{padding:9px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;min-width:6em}
.body th{background:var(--tint);font-weight:500;color:var(--ink)}

/* 文末：上一篇／下一篇 */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.pn a{text-decoration:none;display:block}
.pn small{display:block;margin-bottom:6px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.pn span{font-size:15px;line-height:1.6;color:var(--ink)}
.pn a:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.pn .nx{text-align:right}
.foot{max-width:720px;margin:0 auto;padding:0 20px 48px;font-family:var(--mono);font-size:12px;color:var(--mist)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* 文章列表頁 */
.list h1{margin-bottom:12px}
.list .lead{margin:0 0 44px;font-size:16px;line-height:1.8;color:var(--mute)}
.list .lead a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,92,26,.5);text-decoration-thickness:1px;text-underline-offset:3px}
.list h2{margin:48px 0 8px;font-size:13px;font-weight:400;font-family:var(--mono);letter-spacing:.06em;color:var(--mute)}
.list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li a{display:grid;grid-template-columns:7.2em 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.list time{font-family:var(--mono);font-size:13px;color:var(--mute)}
.list li span{font-size:16.5px;line-height:1.6;color:var(--ink)}
.list li a:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* 作者介紹（10-25 Kevin：每篇統一加、不放大頭貼）：文末一塊，上下細線，跟內文同一欄 */
.author{margin:64px 0 0;padding:28px 0 0;border-top:1px solid var(--line-2)}
.author .au-k{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute)}
.author h2{margin:0;font-size:19px;line-height:1.4;font-weight:500;color:var(--ink)}
.author .au-r{margin:4px 0 12px;font-size:14px;color:var(--mute)}
.author .au-b{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.author .au-l{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 0;font-family:var(--mono);font-size:13px}
.author .au-l a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(255,92,26,.5);padding-bottom:1px}
.author .au-l a:hover{border-color:var(--accent)}
.author+.pn,.read article+.pn{margin-top:40px}

/* 文章列表頁的分頁：全部文章／長文／短文，跟首頁的切換鍵同一種「凸起的鍵」；網址 #long、#short 切換（:target） */
.tg{display:block;position:relative;top:-24px;height:0;visibility:hidden}
.tabs{display:inline-flex;gap:4px;margin:0 0 28px;padding:4px;background:var(--tint);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.tabs a{display:inline-flex;align-items:baseline;gap:6px;padding:9px 16px 8px;font-size:14.5px;color:var(--mute);text-decoration:none;border:1px solid transparent;transition:color .15s}
.tabs a small{font-family:var(--mono);font-size:11.5px;color:var(--mist)}
.tabs a:hover{color:var(--ink)}
.tabs .t-all,#long:target~.tabs .t-long,#essays:target~.tabs .t-long,#short:target~.tabs .t-short,#notes:target~.tabs .t-short{
  color:var(--ink);background:var(--surface);border-color:var(--line-2);box-shadow:0 2px 0 var(--line-2),0 3px 8px -4px rgba(0,0,0,.25)}
#long:target~.tabs .t-all,#essays:target~.tabs .t-all,#short:target~.tabs .t-all,#notes:target~.tabs .t-all{color:var(--mute);background:none;border-color:transparent;box-shadow:none}
#long:target~.alist .c-short,#essays:target~.alist .c-short,#short:target~.alist .c-long,#notes:target~.alist .c-long{display:none}
.list .alist li a{grid-template-columns:7.2em 1fr auto}
.list .alist em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--mist);align-self:center}
#long:target~.alist em,#essays:target~.alist em,#short:target~.alist em,#notes:target~.alist em{display:none}

@media (max-width:600px){
  .read{padding-top:36px}
  .body{font-size:16.5px;line-height:1.85}
  .body h2{font-size:21px}
  .body h3{font-size:18.5px}
  .pn{grid-template-columns:1fr}
  .pn .nx{text-align:left}
  .list li a,.list .alist li a{grid-template-columns:1fr auto;gap:4px 12px}
  .list li time{grid-column:1/-1}
  .tabs{display:flex}
  .tabs a{flex:1;justify-content:center;padding:9px 6px 8px}
}

/* 自己產品的介紹框（CaseFlow）：淺灰底，跟內文分開（10-25 Kevin：導流自己商品保留） */
.body .own-box{margin:2em 0;padding:18px 22px;background:var(--tint);font-size:15.5px}
.body .own-box p{margin:0 0 .5em}
.body .own-box p:last-child{margin-bottom:0}