/* Kpopn — 新站樣式
 *
 * 這份是重寫的，不是搬舊站的 theme CSS：舊站那份是 WordPress 商業佈景的產出，
 * 六個檔案加起來 330KB，裡面九成是這個站用不到的 shortcode 樣式。
 * 這裡只留視覺上真正需要的部分，色票、間距都對著舊站量出來的值調。
 * 字級例外：舊站那組是為英文佈景量的，中文同字級視覺密度更高、可辨識度差一級，
 * 所以正文基準從 15/16 提到 16/17、次要文字從 11 提到 12（對齊台灣主流新聞站），
 * 手機再加碼一層（見檔尾「響應式」）。標題與導覽列維持舊站值，那是品牌識別。
 *
 * 設計 token（量自 www.kpopn.com）：
 *   背景 #f3f3f3 / 內文 #555 / 標題 #111 / 深色列 #222
 *   容器寬 962px、卡片白底 + 0 3px 5px rgba(0,1,1,.1)
 *   導覽列 12px/700/letter-spacing 2px、卡片標題 20px/letter-spacing 3px
 */

:root {
  --bg:            #f3f3f3;
  --surface:       #ffffff;
  --ink:           #555555;
  --ink-strong:    #111111;
  --ink-title:     #000000;
  --dark:          #222222;   /* 只當「深色塊背景」用；文字請用 --ink-strong */
  --line:          #e6e6e6;
  --muted:         #999999;
  --accent:        #70b4f1;
  --accent-dark:   #3d90d8;

  --container:     962px;
  --gap:           30px;
  --radius:        0px;
  --shadow:        0 3px 5px 0 rgba(0, 1, 1, .1);
  --shadow-hover:  0 6px 18px 0 rgba(0, 1, 1, .16);

  /* ---- 深色主題需要的擴充 token（淺色值 = 原本寫死的值） ---- */
  --surface-2:     #fafbfc;   /* 卡片內襯、表頭 */
  --panel:         #fafafa;   /* 摘要、引言的底 */
  --chip:          #f4f4f4;   /* 標籤、分享鈕 */
  --hover-bg:      #fafafa;   /* 下拉選單 hover */
  --skeleton:      #e9e9e9;   /* 圖片載入前的底 */
  --faint:         #cccccc;   /* 分隔點、極淡線 */
  --entry-ink:     #444444;   /* 內文文字 */
  --ink-2:         #666666;   /* 摘要/引言文字 */
  --bar-ink:       #cfcfcf;   /* 深色列上的文字 */
  --bar-muted:     #8f8f8f;   /* 深色列上的次要字 */
  --bar-chip:      #3a3a3a;   /* 深色列上的輸入框/按鈕 */
  --bar-chip-2:    #444444;   /* 深色列輸入框 focus */
  --bar-line:      #3a3a3a;   /* 頁尾分隔線 */
  --on-dark:       #ffffff;   /* 深色塊上的反白字（兩主題皆白） */
  --ok-bg:  #e6f4ea; --ok-ink:  #1e8449;
  --err-bg: #fdecea; --err-ink: #c0392b;

  --font-sans: Cabin, "Open Sans", Arial, Helvetica, "Microsoft JhengHei", "微軟正黑體",
               "PingFang TC", "Hiragino Sans GB", "Noto Sans TC", sans-serif;
  --font-title: "Open Sans", Cabin, Arial, Helvetica, "Microsoft JhengHei", "微軟正黑體",
                "PingFang TC", "Noto Sans TC", sans-serif;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-dark); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-title); color: var(--ink-strong); font-weight: 700; }
button { font: inherit; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dark); color: var(--on-dark); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 15px;
}

/* ------------------------------------------------------------------ 頂列 */

/* 頂列 13 → 主選單 14 → 正文 16 → 內文 17，由上而下一層層放大；
   舊站這兩列都是 12px，正文提到 16 之後只剩 75%，相對落差太大。 */
.topbar { background: var(--dark); color: var(--bar-ink); font-size: 13px; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 49px;
}
.topbar-links { display: flex; gap: 18px; }
.topbar-links a { color: var(--bar-ink); letter-spacing: 1px; }
.topbar-links a:hover { color: var(--on-dark); }

.topbar-tools { display: flex; align-items: center; gap: 8px; }

.search-form { display: flex; align-items: center; }
.search-form input {
  border: 0; background: var(--bar-chip); color: var(--on-dark);
  padding: 7px 12px; width: 190px; font-size: 13px; letter-spacing: 1px;
}
.search-form input::placeholder { color: var(--bar-muted); }
.search-form input:focus { outline: 2px solid var(--accent); background: var(--bar-chip-2); }
.search-form button {
  border: 0; background: var(--bar-chip); color: var(--on-dark); padding: 7px 12px; line-height: 1;
}
.search-form button:hover { background: var(--accent-dark); }
.search-icon {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-radius: 50%; position: relative;
}
.search-icon::after {
  content: ""; position: absolute; right: -5px; bottom: -3px;
  width: 7px; height: 2px; background: currentColor; transform: rotate(45deg);
}

/* ------------------------------------------------------------------ 標頭 */

.site-header { background: var(--surface); }
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 15px;
}
.logo img { width: 265px; height: auto; }

.nav-toggle {
  display: none;
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink-strong);
  margin: 5px 0; transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ 主選單 */

.mainnav {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  transition: box-shadow .25s;
}
.mainnav.is-scrolled { box-shadow: 0 3px 14px rgba(0, 0, 0, .09); }
.mainnav-list { display: flex; justify-content: center; flex-wrap: wrap; }
.mainnav-list > li { position: relative; }
.mainnav-list > li > a {
  display: block; padding: 0 14px; line-height: 55px;
  font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--ink-strong);
}
.mainnav-list > li > a:hover { color: var(--accent-dark); }
.caret {
  display: inline-block; margin-left: 6px; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.submenu {
  position: absolute; left: 0; top: 100%; min-width: 160px;
  background: var(--surface); box-shadow: var(--shadow);
  border-top: 2px solid var(--accent);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.mainnav-list > li:hover .submenu,
.mainnav-list > li:focus-within .submenu {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  display: block; padding: 10px 16px; font-size: 14px;
  letter-spacing: 1px; color: var(--ink-strong); border-bottom: 1px solid var(--line);
}
.submenu li:last-child a { border-bottom: 0; }
.submenu a:hover { background: var(--hover-bg); color: var(--accent-dark); }

/* 行動版選單 */
.mobile-nav {
  display: none; background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 15px 20px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav .search-form { margin-bottom: 12px; }
.mobile-nav .search-form input { width: 100%; background: var(--chip); color: var(--ink-strong); }
.mobile-nav .search-form input::placeholder { color: var(--muted); }
.mobile-nav .search-form button { background: var(--chip); color: var(--ink-strong); }
.mobile-nav > ul > li > a {
  display: block; padding: 10px 0; font-weight: 700;
  letter-spacing: 2px; color: var(--ink-strong); border-bottom: 1px solid var(--line);
}
.mobile-nav ul ul { padding: 6px 0 10px 14px; }
.mobile-nav ul ul a { display: block; padding: 6px 0; font-size: 13px; color: var(--ink); }

/* ------------------------------------------------------------------ 版面骨架 */

main { display: block; padding-bottom: 50px; }

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--gap);
  align-items: start;
  margin-top: 30px;
}
.page-main { min-width: 0; }

/* 區塊標題 */
.section-title {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 40px 0 24px; position: relative;
}
.section-title h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 30px; letter-spacing: 1px; color: var(--ink-title);
}
.section-mark {
  display: inline-block; width: 24px; height: 24px; flex: none;
  background: url("/images/mark.svg") center/contain no-repeat;
  opacity: .85;
}
.section-more {
  position: absolute; right: 0; bottom: 6px;
  font-size: 12px; letter-spacing: 1px; color: var(--muted);
}
.section-more:hover { color: var(--accent-dark); }

.more-row { text-align: center; margin: 30px 0 0; }
.btn {
  display: inline-block; padding: 11px 30px; background: var(--dark); color: var(--on-dark);
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.btn:hover { background: var(--accent-dark); color: var(--on-dark); }

/* ------------------------------------------------------------------ 主打輪播 */

.feature-section { padding-top: 10px; }

.carousel { position: relative; }

/* 捲動容器。無縫循環靠 JS 在邊界做「無聲瞬移」，
   所以這裡刻意不設 scroll-behavior: smooth —— 平滑與否必須由 JS 逐次決定，
   寫死在 CSS 會讓瞬移也變成看得見的滑動。 */
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 瞬移的瞬間要關掉吸附，否則會跟 scroll-snap 打架、彈回原位 */
.carousel-track.is-jumping { scroll-snap-type: none; }

.feature { scroll-snap-align: center; position: relative; }
.feature .feature-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.feature .post-cats a,
.feature .post-meta a { position: relative; z-index: 2; }

/* 封面比例分兩群：1.56:1（約 5.1 萬篇）與 2.05:1（約 3.9 萬篇），
   沒有單一比例能同時不裁到兩群，取中間值折衷。
   手機用較高的 3:2，免得在窄螢幕上變成一條細長的橫帶。 */
.feature-thumb {
  display: block; aspect-ratio: 3 / 2;
  overflow: hidden; background: var(--skeleton);
}
.feature-thumb .thumb { width: 100%; height: 100%; object-fit: cover; }

.feature-overlay {
  position: absolute; inset: auto 0 0 0; padding: 24px 26px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 55%, rgba(0,0,0,0));
  color: #fff;
}
.feature-title {
  font-size: 27px; line-height: 1.4; color: #fff;
  letter-spacing: 1px; margin: 6px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-title a { color: #fff; }
.feature-overlay .post-cats a,
.feature-overlay .post-meta,
.feature-overlay .post-meta a { color: rgba(255,255,255,.88); }

/* 左右箭頭：桌機用。手機直接滑，不佔畫面 */
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .42); color: #fff;
  font-size: 22px; line-height: 1;
  opacity: 0; transition: opacity .2s, background .2s;
}
.carousel:hover .carousel-nav,
.carousel-nav:focus-visible { opacity: 1; }
.carousel-nav:hover { background: rgba(0, 0, 0, .7); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

/* 圓點指示器 */
.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: background .2s, transform .2s;
}
.carousel-dot:hover { background: rgba(255, 255, 255, .8); }
.carousel-dot[aria-current="true"] { background: #fff; transform: scale(1.35); }
.carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 640px) {
  .feature-thumb { aspect-ratio: 16 / 9; }
}

/* 手機：不顯示箭頭（用滑的），字級與留白縮小，圓點加大好按 */
@media (max-width: 639px) {
  .carousel-nav { display: none; }
  .feature-overlay { padding: 14px 16px 26px; }
  .feature-title { font-size: 19px; letter-spacing: .5px; margin: 4px 0 6px; }
  .carousel-dot { width: 9px; height: 9px; }
  .carousel-dots { bottom: 8px; }
}

/* ------------------------------------------------------------------ 卡片 */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  position: relative;               /* stretched link 的定位基準 */
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
/* 整張卡片可點：標題連結的偽元素撐滿卡片。
   HTML 不動（沒有巢狀 <a> 的問題），語意仍是「標題是連結」。 */
.card .card-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* 卡片不可拖曳：桌機上拖到卡片會拉出圖片/連結的半透明殘影，
   在輪播上還會跟滑動手勢打架。CSS 只管 WebKit/Blink，
   Firefox 靠 site.js 的 dragstart 攔截。 */
.card img, .card a,
.feature img, .feature a,
.row-post img, .row-post a,
.kt-toc a, .kt-links a {
  -webkit-user-drag: none;
  user-drag: none;
}

/* 卡片裡的分類與作者是獨立連結，抬到覆蓋層之上才點得到 */
.card .post-cats a,
.card .post-meta a { position: relative; z-index: 2; }
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--skeleton); }
.card-thumb .thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.card:hover .card-thumb .thumb { transform: scale(1.04); }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title {
  font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: .5px;
  color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title a:hover { color: var(--accent-dark); }

.thumb-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--skeleton); }
.thumb-empty .section-mark { width: 40px; height: 40px; opacity: .25; }

.post-cats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: 1px; }
.post-cats a { color: var(--muted); }
.post-cats a:hover { color: var(--accent-dark); }
.post-cats a + a::before { content: "·"; margin-right: 8px; color: var(--faint); }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--muted); letter-spacing: .5px; margin-top: auto;
}
.post-meta a { color: var(--muted); }
.post-meta a:hover { color: var(--accent-dark); }

.empty { text-align: center; color: var(--muted); padding: 50px 0; }

/* 橫式列表（側欄） */
.row-post { position: relative; display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row-post .row-title a::after { content: ""; position: absolute; inset: 0; }
.row-post:last-child { border-bottom: 0; }
.row-thumb { flex: none; width: 88px; height: 62px; overflow: hidden; background: var(--skeleton); }
.row-thumb .thumb { width: 100%; height: 100%; object-fit: cover; }
.row-title {
  font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-body .meta-date { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ 影音專區 */

.video-section { padding-top: 6px; }

.vgrid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.vcard { background: var(--surface); box-shadow: var(--shadow); }
.vcard-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  overflow: hidden; background: #000;
}
/* hqdefault 是 4:3 且上下有黑邊，放大裁切成 16:9 剛好去掉 */
.vcard-thumb img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.01);
  transition: transform .3s;
}
.vcard:hover .vcard-thumb img { transform: scale(1.05); }

.vcard-play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.vcard-play::before {
  content: ""; width: 54px; height: 40px; border-radius: 10px;
  background: rgba(0, 0, 0, .72);
  transition: background .2s;
}
.vcard-play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.vcard:hover .vcard-play::before { background: #f00; }

.vcard-title {
  padding: 12px 14px 14px;
  font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: .5px;
  color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 點擊後換進來的 iframe 容器 */
.vcard-frame { aspect-ratio: 16 / 9; background: #000; }
.vcard-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 480px) {
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  /* 兩欄只剩 147px 寬、一行約 10 個中文字，影片標題動輒 35 字，clamp 2 行會砍掉一半；
     放寬到 4 行（約 40 字）讓現有標題完整顯示，同一列的卡片由 grid 自動對齊高度。 */
  .vcard-title { font-size: 14px; padding: 9px 10px 11px; letter-spacing: 0; -webkit-line-clamp: 4; }
  .vcard-play::before { width: 44px; height: 32px; }
  .vcard-play::after { border-width: 7px 0 7px 12px; }
}

/* ------------------------------------------------------------------ 側欄 */

.sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 75px; }
.widget { background: var(--surface); box-shadow: var(--shadow); }
.widget-title {
  font-size: 14px; letter-spacing: 2px; padding: 14px 18px;
  border-bottom: 2px solid var(--dark); color: var(--ink-strong);
}
.widget-body { padding: 6px 18px 16px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.tag-cloud a {
  display: inline-block; padding: 5px 11px; background: var(--chip);
  font-size: 12px; color: var(--ink); letter-spacing: .5px;
}
.tag-cloud a:hover { background: var(--dark); color: var(--on-dark); }

/* 側欄的「請來 Follow 我們」 */
.widget-social {
  display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px;
}
.widget-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--dark); color: var(--on-dark);
  transition: background .2s, transform .2s;
}
.widget-social a:hover { background: var(--accent-dark); color: var(--on-dark); transform: translateY(-2px); }
.widget-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.widget-social .icon { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------------ 彙整頁 */

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--muted); padding: 18px 0 0;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb .sep { color: var(--faint); }

.archive-header { padding: 22px 0 6px; text-align: center; }
.archive-title { font-size: 32px; letter-spacing: 1px; color: var(--ink-title); }
.archive-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

.child-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.child-cats a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 14px; letter-spacing: 1px; color: var(--ink-strong);
}
.child-cats a:hover { background: var(--dark); color: var(--on-dark); }
.child-cats .count { font-size: 12px; color: var(--muted); }
.child-cats a:hover .count { color: color-mix(in srgb, var(--on-dark) 70%, transparent); }

/* 分頁 */
.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 36px 0 0;
  font-size: 14px;
}
.pagination a, .pagination .page-current, .pagination .page-gap {
  display: inline-block; min-width: 38px; text-align: center;
  padding: 9px 12px; background: var(--surface); box-shadow: var(--shadow);
  letter-spacing: 1px; color: var(--ink-strong);
}
.pagination a:hover { background: var(--dark); color: var(--on-dark); }
.pagination .page-current { background: var(--dark); color: var(--on-dark); }
.pagination .page-gap { background: none; box-shadow: none; color: var(--muted); }

/* ------------------------------------------------------------------ 單篇文章 */

.single {
  background: var(--surface); box-shadow: var(--shadow);
  padding: 34px 38px 30px; margin-top: 18px;
}
.single-header { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px; }
.single-title {
  font-size: 30px; line-height: 1.45; letter-spacing: 1px;
  color: var(--ink-strong); margin: 10px 0 12px; font-weight: 700;
}
.single-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted); }
.single-meta a { color: var(--ink); }

.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag-list a {
  display: inline-block; padding: 4px 10px; background: var(--chip);
  font-size: 12.5px; color: var(--ink); letter-spacing: .5px;
}
.tag-list a:hover { background: var(--dark); color: var(--on-dark); }

.single-summary {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: 14px 18px; margin-bottom: 24px; font-size: 15px; color: var(--ink-2);
}

/* 內文：舊站 TinyMCE 產出的 HTML 直接放進來，所以要照顧 WordPress 時代的 class */
.entry { font-size: 17px; line-height: 1.9; color: var(--entry-ink); word-wrap: break-word; }
.entry p { margin: 0 0 1.4em; }
.entry h2 { font-size: 22px; margin: 1.8em 0 .7em; }
.entry h3 { font-size: 19px; margin: 1.6em 0 .6em; }
.entry h4 { font-size: 17px; margin: 1.4em 0 .5em; }
.entry a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.entry img { margin: 0 auto; }
.entry ul, .entry ol { margin: 0 0 1.4em 1.6em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li { margin-bottom: .4em; }
.entry hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.entry blockquote {
  margin: 1.6em 0; padding: 12px 20px;
  border-left: 3px solid var(--accent); background: var(--panel); color: var(--ink-2);
}
.entry table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; }
.entry th, .entry td { border: 1px solid var(--line); padding: 8px 10px; }
.entry center { display: block; text-align: center; }
.entry iframe { max-width: 100%; }

/* 影片、Instagram 之類的嵌入內容不要撐破版面 */
.entry iframe[src*="youtube"], .entry iframe[src*="youtu.be"],
.entry iframe[src*="dailymotion"], .entry iframe[src*="vimeo"] {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 1.5em auto;
}
.entry .instagram-media, .entry .twitter-tweet { margin: 1.5em auto !important; }
/* Instagram 的 embed.js 會在 blockquote / 換進來的 iframe 上寫 inline min-width: 326px，
   手機主欄只有約 305px，整頁被撐出橫向捲軸；inline style 只有 !important 壓得過。 */
.entry .instagram-media { min-width: 0 !important; max-width: 100% !important; }
/* 同一支腳本把 iframe 設成 position: absolute; width: calc(100% - 2px)，
   .entry 以上沒有 positioned 祖先時 100% 會算成視窗寬；讓 .entry 當它的定位基準。 */
.entry { position: relative; }

/* WordPress 時代殘留的 caption / align class */
.entry figure, .entry .wp-caption { max-width: 100%; margin: 1.6em auto; }
.entry figcaption, .entry .wp-caption-text {
  font-size: 12.5px; color: var(--muted); text-align: center;
  margin-top: 8px; line-height: 1.6;
}
.entry .aligncenter, .entry .alignnone { display: block; margin-left: auto; margin-right: auto; }
.entry .alignleft { float: left; margin: .4em 1.4em 1em 0; }
.entry .alignright { float: right; margin: .4em 0 1em 1.4em; }
.entry .size-full, .entry .size-large { width: auto; max-width: 100%; }
.entry::after { content: ""; display: table; clear: both; }

.single-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.share-label { color: var(--muted); letter-spacing: 1px; }
.share a, .share-copy {
  display: inline-block; padding: 7px 14px; background: var(--chip);
  color: var(--ink); border: 0; letter-spacing: 1px; font-size: 13px;
}
.share a:hover, .share-copy:hover { background: var(--dark); color: var(--on-dark); }

/* 上下篇 */
.single-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.nav-el {
  background: var(--surface); box-shadow: var(--shadow); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px; min-height: 74px;
}
.nav-el.is-empty { box-shadow: none; background: none; }
.nav-label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.nav-title {
  font-size: 14px; color: var(--ink-strong); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-next { text-align: right; }
.related { margin-top: 10px; }
.static-page .entry { font-size: 16px; }

/* ---- 聯絡表單 ---- */

/* 蜜罐：真人看不到，機器人通常會照填。
 * 不能用 display:none —— 有些機器人會跳過看不見的欄位，
 * 移出畫面外反而更容易讓它上鉤。 */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note {
  margin: 0 0 20px; padding: 12px 16px;
  border-radius: 4px; font-size: 14.5px;
}
.form-ok    { background: var(--ok-bg); color: var(--ok-ink); border-left: 3px solid var(--ok-ink); }
.form-error { background: var(--err-bg); color: var(--err-ink); border-left: 3px solid var(--err-ink); }

.entry form { margin: 0; }
.entry form label {
  display: block; margin: 16px 0 6px;
  font-size: 14px; color: var(--ink-strong); font-weight: 600;
}
/* 單選鈕的 label 要跟輸入框的 label 分開：它是選項不是欄位名 */
.entry form label:has(input[type="radio"]) {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0; font-weight: 400; color: var(--ink); cursor: pointer;
}
.entry form input[type="radio"] { width: auto; margin: 0; }
.entry form input[type="text"],
.entry form input[type="email"],
.entry form textarea {
  display: block; width: 100%; max-width: 460px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 15px; color: var(--ink-strong); background: var(--surface);
}
.entry form input:focus, .entry form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.entry form textarea { min-height: 140px; resize: vertical; }
.entry form input[type="submit"] {
  margin-top: 22px; padding: 11px 30px; width: auto;
  background: var(--dark); color: var(--on-dark); border: 0; border-radius: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; cursor: pointer;
}
.entry form input[type="submit"]:hover { background: var(--accent-dark); }

/* ---- 韓國旅遊 101 ----
 *
 * 舊站這頁是 WordPress 頁面建構器排的，版面靠外掛的樣式表撐著。
 * 原本我逐條把那份 CSS 量回來重寫，但那等於逆向維護一個第三方外掛 ——
 * 很脆弱，而且留下 58KB 塞滿包裝 div 與 inline style 的標記，沒人能編輯。
 *
 * 改成把「內容」抽出來重新輸出成語意標籤（15KB，0 個 div），
 * 版面用自己的設計系統重寫。下面這些是全新的，不是還原外掛。 */

/* 目錄：自動收合的卡片格線，不需要斷點 */
.kt-toc { margin: 2em 0 2.6em; }
.kt-toc > h2 {
  text-align: center; font-size: 24px; margin: 0 0 1.2em;
  color: var(--ink-strong); letter-spacing: 1px;
}
.kt-toc ul {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.kt-toc a {
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 14px 16px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .18s, background .18s, transform .18s;
}
.kt-toc a:hover {
  background: var(--surface); border-color: var(--accent);
  transform: translateY(-2px); text-decoration: none;
}
.kt-toc-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #578fbf; color: #fff;
}
.kt-toc-icon .icon { width: 26px; height: 26px; fill: currentColor; }
.kt-toc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kt-toc-text strong { font-size: 15px; color: var(--ink-strong); font-weight: 700; }
.kt-toc-text small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* 章節 */
.kt-section { margin: 0 0 2.8em; scroll-margin-top: 70px; }   /* sticky 選單的高度 */
.kt-section > h2 {
  font-size: 24px; color: var(--ink-strong); letter-spacing: 1px;
  margin: 0 0 .8em; padding-bottom: .45em;
  border-bottom: 2px solid #578fbf;
}
.kt-section h3 { font-size: 17px; margin: 1.6em 0 .5em; color: var(--ink-strong); }
.kt-section p  { margin: 0 0 1.1em; }
.kt-section ul, .kt-section ol { margin: 0 0 1.2em 1.5em; }
.kt-section ul { list-style: disc; }
.kt-section ol { list-style: decimal; }
.kt-section li { margin-bottom: .4em; }
.kt-section img { max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 6px; }
.kt-section table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; }
.kt-section th, .kt-section td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.kt-section th { background: var(--surface-2); font-weight: 600; }

/* 表格在窄螢幕自己橫向捲，不要把整頁撐破 */
.kt-section table { display: block; overflow-x: auto; white-space: nowrap; }

/* 地區連結卡片（/ktravel）：與目錄卡片同一套語彙，較小較密 */
.kt-section ul.kt-links {          /* 要壓過 .kt-section ul 的 disc */
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  list-style: none; margin: .8em 0 1.6em; padding: 0;
}
.kt-section .kt-links li { margin: 0; list-style: none; }
.kt-links a {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .18s, background .18s, transform .18s;
}
.kt-links a:hover {
  background: var(--surface); border-color: var(--accent);
  transform: translateY(-2px); text-decoration: none;
}
.kt-links strong { font-size: 14px; color: var(--ink-strong); font-weight: 600; }
.kt-links small { font-size: 11.5px; color: var(--muted); }

/* 四季卡片（/ktravel-101）：清單版四季，一排四張自動收合 */
.kt-seasons {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none !important; margin: 1.2em 0 !important; padding: 0 !important;
}
.kt-seasons li {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; text-align: center; margin: 0 !important;
}
.kt-seasons img { width: 64px; height: 64px; margin: 0 auto 8px; }
.kt-seasons h3 { margin: 0 0 .4em !important; font-size: 16px; }
.kt-seasons p { font-size: 13px; line-height: 1.7; color: var(--ink); text-align: left; margin: 0; }

/* 章節裡的小圖示（首都/時區/電壓…）原檔是 512x512 的 PNG，
   要限制尺寸；照片（鈔票、交通卡、地圖）是 JPG，維持原比例滿寬。 */
.kt-section img[src$=".png"] { width: 60px; height: 60px; margin: .6em auto .2em; }
.kt-section .kt-seasons img  { width: 64px; height: 64px; margin: 0 auto 8px; }

.kt-section figure { margin: 1.2em auto; text-align: center; }
.kt-section figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

@media (max-width: 480px) {
  .kt-toc ul { grid-template-columns: 1fr; }
  .kt-toc-icon { width: 44px; height: 44px; }
  .kt-toc-icon .icon { width: 22px; height: 22px; }
  .kt-section > h2 { font-size: 20px; }
}

/* 「關於我們」的段落標題。
 *
 * 舊站這幾個標題是切圖（161x51 的 PNG），在高解析螢幕上會糊，
 * 也不能被選取、翻譯或被搜尋引擎讀到。改成真文字 + CSS，
 * 尺寸對著原圖量：文字高 27px、藍條 122x4px、兩者間距 17px。 */
/* 選擇器要帶 .entry，否則 (0,1,0) 輸給上面的 .entry h2 (0,1,1)，字級與邊距都不會生效 */
.entry .about-h {
  margin: 2.2em 0 1em;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  color: var(--ink-strong);
  line-height: 1.3;
}
.entry .about-h::after {
  content: "";
  display: block;
  width: 122px; height: 4px;
  margin: 17px auto 0;
  background: #87b8d8;
}
.static-page .entry .about-h + p { margin-top: 0; }

@media (max-width: 480px) {
  .entry .about-h { font-size: 20px; margin: 1.8em 0 .9em; }
  .entry .about-h::after { width: 96px; margin-top: 12px; }
}

/* ------------------------------------------------------------------ 錯誤頁 */

.error-page { text-align: center; padding: 70px 15px 50px; }
.error-code { font-size: 72px; font-weight: 700; color: var(--ink-strong); margin: 0; line-height: 1; }
.error-title { font-size: 24px; margin: 14px 0 10px; }
.error-text { color: var(--muted); }
.error-text code { background: var(--chip); padding: 2px 6px; font-size: 13px; }
.error-search { justify-content: center; margin: 24px 0; }
.error-search input { background: var(--surface); color: var(--ink-strong); border: 1px solid var(--line); width: 260px; }
.error-search button { background: var(--dark); }

/* ------------------------------------------------------------------ 頁尾 */

.site-footer { background: var(--dark); color: var(--bar-ink); font-size: 13px; margin-top: 50px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); padding-top: 44px; padding-bottom: 34px;
}
.footer-col p { margin: 0 0 4px; }
.footer-logo { width: 180px; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 16px; }
.footer-company { color: var(--on-dark); font-weight: 600; }
.footer-title {
  font-size: 13px; letter-spacing: 2px; color: var(--on-dark);
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--bar-line);
}
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--bar-ink); }
.footer-links a:hover { color: var(--on-dark); }

.social-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.social-list a {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--bar-chip); color: var(--bar-ink); font-size: 11px;
}
.social-list a:hover { background: var(--accent-dark); color: var(--on-dark); }
.social-list .icon { width: 16px; height: 16px; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid var(--bar-line); padding: 16px 0;
  font-size: 12px; color: var(--bar-muted); text-align: center;
}

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--dark); color: var(--on-dark); opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.to-top.is-visible { opacity: .85; pointer-events: auto; }
.to-top:hover { opacity: 1; color: var(--on-dark); background: var(--accent-dark); }

/* ------------------------------------------------------------------ 響應式 */

@media (max-width: 900px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .topbar-links { display: none; }
  .topbar-inner { justify-content: flex-end; }
  .nav-toggle { display: block; }
  .mainnav { display: none; }
  .mobile-nav:not([hidden]) { display: block; }
  .logo img { width: 200px; }
  .header-inner { padding: 18px 15px; }
  .single { padding: 24px 20px; }
  .single-title { font-size: 23px; }
  .feature-title { font-size: 19px; }
  .feature-overlay { padding: 16px 18px; }
  .section-title h2 { font-size: 23px; }
  .archive-title { font-size: 25px; }
  .single-nav { grid-template-columns: 1fr; }
  .nav-next { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* 手機字級加碼。
 *
 * 手機拿得近、螢幕窄，正文維持桌機基準、次要文字與可點元件再放大半級到一級：
 * 11~13px 的分類/日期/標籤在手機上低於可讀下限，側欄橫列與上下篇掉到主欄下方後
 * 就是主要內容而非輔助資訊。letter-spacing 一併收斂，中文加字距在窄欄容易孤字換行。
 * 標題類（single-title/archive-title/entry h2~h4）上面那個 block 已縮過，這裡不碰。 */
@media (max-width: 768px) {
  .row-title { font-size: 15px; }
  .nav-title { font-size: 15px; }
  .post-cats, .post-meta, .row-body .meta-date, .nav-label { font-size: 12.5px; }
  .tag-list a, .single-meta, .breadcrumb { font-size: 13px; }
  .single-summary { font-size: 15.5px; }
  .widget-title { font-size: 15px; }
  .pagination a, .pagination .page-current, .pagination .page-gap { min-width: 42px; }
  .mobile-nav > ul > li > a { font-size: 16px; }
  .mobile-nav ul ul a { font-size: 15px; padding: 8px 0; }
  .site-footer { font-size: 14px; }
  .footer-bottom { font-size: 12.5px; }
  .entry figcaption, .entry .wp-caption-text { font-size: 13px; }
  .entry table { font-size: 14.5px; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ------------------------------------------------------------------ 深色主題
 *
 * 三態：淺色 / 深色 / 跟隨系統（預設）。
 * 純前端：HTML 在邊緣快取是所有人共用一份，主題只靠 CSS 變數 +
 * <html data-theme> 切換，伺服器完全不參與（否則要按 cookie 分快取）。
 *
 * 同一份色板寫兩次是刻意的：一次給手動選深色（data-theme），
 * 一次給「跟隨系統且系統是深色」（media query + :not 手動淺色）。
 */

:root[data-theme="dark"] {
  --bg:            #161719;
  --surface:       #1f2124;
  --ink:           #c9cbd0;
  --ink-strong:    #eceef1;
  --ink-title:     #f2f3f5;
  --dark:          #101113;
  --line:          #33363b;
  --muted:         #8a8f98;
  --accent-dark:   #8ec3f5;          /* 深底上 hover 要變亮不是變深 */
  --shadow:        0 0 0 1px #2a2d31; /* 深色下陰影不可見，改 1px 邊線 */
  --shadow-hover:  0 0 0 1px #3f434a;

  --surface-2:     #26282c;
  --panel:         #26282c;
  --chip:          #2a2d31;
  --hover-bg:      #26282c;
  --skeleton:      #26282c;
  --faint:         #4a4e55;
  --entry-ink:     #cdd0d4;
  --ink-2:         #b6bac0;
  --bar-ink:       #b7bbc2;
  --bar-muted:     #7c828c;
  --bar-chip:      #26282c;
  --bar-chip-2:    #2f3237;
  --bar-line:      #26282c;
  --ok-bg:  #17301f; --ok-ink:  #6fcf8f;
  --err-bg: #35201d; --err-ink: #f0918a;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="dark"] body {
  -webkit-font-smoothing: auto;
}
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .section-mark,
:root[data-theme="dark"] .thumb-empty .section-mark {
  filter: invert(.92) hue-rotate(180deg);
}
:root[data-theme="dark"] .entry img,
:root[data-theme="dark"] .card-thumb .thumb,
:root[data-theme="dark"] .feature-thumb .thumb { filter: brightness(.92); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg:            #161719;
    --surface:       #1f2124;
    --ink:           #c9cbd0;
    --ink-strong:    #eceef1;
    --ink-title:     #f2f3f5;
    --dark:          #101113;
    --line:          #33363b;
    --muted:         #8a8f98;
    --accent-dark:   #8ec3f5;          /* 深底上 hover 要變亮不是變深 */
    --shadow:        0 0 0 1px #2a2d31; /* 深色下陰影不可見，改 1px 邊線 */
    --shadow-hover:  0 0 0 1px #3f434a;
  
    --surface-2:     #26282c;
    --panel:         #26282c;
    --chip:          #2a2d31;
    --hover-bg:      #26282c;
    --skeleton:      #26282c;
    --faint:         #4a4e55;
    --entry-ink:     #cdd0d4;
    --ink-2:         #b6bac0;
    --bar-ink:       #b7bbc2;
    --bar-muted:     #7c828c;
    --bar-chip:      #26282c;
    --bar-chip-2:    #2f3237;
    --bar-line:      #26282c;
    --ok-bg:  #17301f; --ok-ink:  #6fcf8f;
    --err-bg: #35201d; --err-ink: #f0918a;
  }
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .section-mark,
  :root:not([data-theme="light"]) .thumb-empty .section-mark {
    filter: invert(.92) hue-rotate(180deg);
  }
  :root:not([data-theme="light"]) .entry img,
  :root:not([data-theme="light"]) .card-thumb .thumb,
  :root:not([data-theme="light"]) .feature-thumb .thumb { filter: brightness(.92); }
}

/* 主題切換鈕（頂列） */
.theme-toggle {
  border: 0; background: var(--bar-chip); color: var(--bar-ink);
  padding: 6px 10px; font-size: 13px; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.theme-toggle:hover { background: var(--bar-chip-2); color: var(--on-dark); }
.theme-toggle .icon { width: 14px; height: 14px; fill: currentColor; }

@media print {
  .topbar, .mainnav, .mobile-nav, .sidebar, .site-footer, .to-top,
  .single-nav, .related, .share, .breadcrumb { display: none !important; }
  body { background: #fff; }
  .single { box-shadow: none; padding: 0; }
}

/* ------------------------------------------------------------------ Motion
 * 跨頁轉場：宣告式的 View Transitions，支援的瀏覽器（Chrome/Edge/Safari 18+）
 * 換頁時會自動做一個短促的 cross-fade；不支援的瀏覽器行為完全不變。
 * 捲動進場動畫在 site.js（Web Animations API），這裡只放純 CSS 的部分。 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .22s; }

  /* 行動版選單展開時滑入 */
  .mobile-nav:not([hidden]) { animation: nav-drop .28s cubic-bezier(.22,.61,.36,1); }
  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* 互動元件的微動態：已有 transition 的維持，這裡補按下回饋 */
  .card:active, .kt-toc a:active, .kt-links a:active { transform: translateY(0) scale(.985); }
  .btn, .share a, .share-copy, .tag-cloud a, .tag-list a { transition: background .18s, color .18s, transform .18s; }
  .btn:active { transform: scale(.97); }
}

/* 草稿預覽橫幅（只有登入後台的人會看到） */
.preview-banner {
  background: #b7791f; color: #fff; text-align: center;
  padding: 10px 16px; font-size: 13.5px; letter-spacing: 1px;
}