/* =========================
   基础
   ========================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  color: #000;
}

body.dark-mode {
  background: #181818;
  color: #fff;
}

/* =========================
   Header（唯一结构）
   ========================= */

:root {
  --header-height: 56px;
}

@media (max-width: 767px) {
  :root {
    --bottom-nav-height: 56px;
  }
}

.site-header {
  position: fixed;   /* ⭐ 核心 */
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;

  background: #fff;
  border-bottom: 1px solid #ddd;
}

body.dark-mode .site-header {
  background: #2d2d2d;
  border-bottom-color: #1a1a1a;
}

.header-pc {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.nav-left a {
  text-decoration: none;
  color: inherit;
  font-size: 15px;
}

/* =========================
   左右区
   ========================= */

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-left {
  flex: 1;
}

/* =========================
   Responsive Menu（不覆盖 Header）
   ========================= */

/* =========================
   PC 菜单按钮（☰ → ✕）
   ========================= */

.pc-menu-toggle {
  width: 36px;
  height: 36px;
}

/* 图标容器 */
.menu-icon {
  position: relative;
  width: 22px;
  height: 16px;
}

/* 三条线 */
.menu-icon::before,
.menu-icon::after,
.menu-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-icon::before {
  top: 0;
}

.menu-icon span {
  top: 7px;
}

.menu-icon::after {
  bottom: 0;
}

/* ===== 打开菜单 → X ===== */
body.menu-open .menu-icon::before {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .menu-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

body.menu-open .menu-icon span {
  opacity: 0;
}

body.menu-open {
  overflow: hidden;
}

/* ===== 手机端强制不显示 ===== */
@media (max-width: 767px) {
  .pc-menu-toggle {
    display: none !important;
  }
}

/* =========================
   公共菜单基础（默认 = 手机）
   ========================= */
.mobile-menu {
  position: fixed;
  top: var(--header-height);
  bottom: var(--bottom-nav-height);
  left: 0;

  width: 100vw;
  z-index: 1002;

  background: #fff;
  box-shadow: 0 0 30px rgba(0,0,0,0.25);

  display: flex;
  flex-direction: column;
  padding: 20px;

  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* =========================
   PC：左侧 Sidebar 菜单
   ========================= */
@media (min-width: 768px) {
  .mobile-menu {
    top: var(--header-height);
    bottom: 0;

    width: 240px;          /* 左侧宽度 */
    height: auto;

    transform: translateX(-240px);
    box-shadow: 4px 0 16px rgba(0,0,0,0.2);
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  /* 打开菜单时，内容右移 */
  body.menu-open main,
  body.menu-open section {
    margin-left: 240px;
    transition: margin-left 0.3s ease;
  }
}

/* 菜单链接 */
.mobile-menu a {
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  padding: 12px 0;
}

.mobile-menu footer {
  margin-top: auto;           /* ⭐ 推到菜单底部 */
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 13px;
  opacity: 0.85;
}

body.dark-mode .mobile-menu footer {
  border-top-color: rgba(255,255,255,0.15);
}


/* 深色模式 */
body.dark-mode .mobile-menu {
  background: #2d2d2d;
}

/* =========================
   PC / Mobile 控制
   ========================= */

.pc-only { display: inline-flex; }
.mobile-only { display: none; }

@media (max-width: 767px) {
  .pc-only { display: none !important; }
  .mobile-only { display: inline-flex; }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  body {
    padding-top: var(--header-height);
    padding-bottom: var(--bottom-nav-height);
  }
}

@media (max-width: 767px) {
  .pc-menu-toggle {
    display: none !important;
  }
}

/* =========================
   Mobile Bottom Nav
   ========================= */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  display: flex;
  background: #fff;
  border-top: 1px solid #ddd;
  z-index: 1000;
}

.bottom-nav a,
.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  font-size: 12px;
}

@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

body.dark-mode .bottom-nav {
  background: #2d2d2d;
  border-top-color: #1a1a1a;
}

@media (max-width: 767px) {
  :root {
    --bottom-nav-height: 56px;
  }

  body {
    padding-bottom: var(--bottom-nav-height);
  }
}

/* =========================
   Icon 按钮
   ========================= */

.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: opacity 0.2s, transform 0.1s;
}

.icon-btn:hover { opacity: 0.7; }
.icon-btn:active { transform: scale(0.95); }

/* =========================
   搜索框
   ========================= */

.search-container {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  width: 36px;
  overflow: hidden;
  transition: width 0.3s;
  cursor: pointer;
}

body.dark-mode .search-container {
  background: #333;
}

.search-container img {
  width: 18px;
  height: 18px;
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  width: 0;
  opacity: 0;
  transition: width 0.3s, opacity 0.3s;
}

.search-container.active {
  width: 200px;
}

.search-container.active .search-input {
  width: 140px;
  opacity: 1;
}

/* ===== 搜索框深色模式强制反色（修复） ===== */

body.dark-mode .site-header .search-container {
  background: #333;
}

body.dark-mode .site-header .search-container svg,
body.dark-mode .site-header .search-container img {
  filter: invert(1) brightness(1.2);
}

body.dark-mode .site-header .search-container * {
  color: #fff;
}

/* 手机：搜索展开占满 header */
@media (max-width: 767px) {
  .search-container.active {
    position: absolute;
    inset: 0;
    height: 56px;
    border-radius: 0;
    padding: 0 16px;
    z-index: 1100;
  }

  .search-container.active .search-input {
    width: 100%;
  }
}

/* 搜尋頁專用（不吃首頁卡片樣式） */
.search-page .blog-posts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-page .post {
  width: 100% !important;
}

/* 搜尋無結果卡片 */
.empty-state {
  max-width: 420px;
  margin: 60px auto;
  padding: 32px 24px;
  text-align: center;
  border-radius: 16px;
  background: var(--card-bg, rgba(0,0,0,0.04));
}

body.dark-mode .empty-state {
  background: rgba(255,255,255,0.06);
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.empty-state h3 {
  margin: 8px 0;
  font-size: 18px;
}

.empty-state p {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 20px;
}

.empty-action {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  background: #198964;
  color: #fff;
}

.empty-action:hover {
  opacity: 0.9;
}

/* =========================
   仅手机端：搜索移到左边
   ========================= */
@media (max-width: 767px) {

  .header-pc {
    display: flex;
  }

  /* 左右区仍存在，但不再靠 flex:1 撑开 */
  .nav-left {
    flex: none;
    order: 1;
  }

  .nav-right {
    flex: 1;
    order: 2;
    justify-content: flex-end;
  }

  /* ⭐ 搜索排到最前 */
  .nav-right .search-container {
    order: -1;
    margin-right: auto;
  }
}

/* =========================
   内容区
   ========================= */

section {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

body.dark-mode section {
  background: #242424;
}


body {
  padding-top: var(--header-height);
}

/* 連結 */
a {
  color: #1a73e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body.dark-mode a {
  color: #ffffff;
}

/* =========================
   Blog 列表（左圖右文，上文下 meta）
   ========================= */

.blog .blog-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog .post {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  padding: 10px;

  display: flex;
  flex-direction: column; /* ✅ 強制上下 */
  gap: 6px;
}

/* 上半部：左圖 + 標題 */
.blog .post > a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* =========================
   封面
   ========================= */

.post-thumb {
  flex: 0 0 140px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   標題
   ========================= */

.post-title {
  font-size: 15px;
  line-height: 1.4;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   底部 meta（關鍵）
   ========================= */
.post-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

/* ⭐ 卡片底部的 meta */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  opacity: 0.75;

  margin-top: auto;   /* ← 這一行是靈魂 */
}

/* =========================
   Tag：基礎（不覆蓋分類）
   ========================= */

.post-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

/* 類型 */
.post-tag[data-type="article"] {
  background: rgba(33,150,243,.12);
  color: #1565c0;
}

.post-tag[data-type="video"] {
  background: rgba(233,30,99,.12);
  color: #ad1457;
}

/* 分類 */
.post-tag[data-category] {
  background: rgba(76,175,80,.12);
  color: #2e7d32;
}

/* =========================
   深色模式（維持正常）
   ========================= */

body.dark-mode .blog-posts .post {
  background: #242424;
}

body.dark-mode .post-title {
  color: #fff;
}

body.dark-mode .post-tag {
  background: rgba(255,255,255,.12);
  color: #ddd;
}

/* =========================
   Blog Tag 匯總區
   ========================= */

.blog-tag-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}

/* 匯總區的 tag 稍微大一點 */
.blog-tag-summary .post-tag {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, transform 0.15s;
}

.blog-tag-summary .post-tag:hover {
  transform: translateY(-1px);
}

/* 當前選中 */
.blog-tag-summary .post-tag.active {
  outline: 2px solid rgba(0,0,0,0.15);
}

body.dark-mode .blog-tag-summary .post-tag.active {
  outline-color: rgba(255,255,255,0.25);
}

/* =========================
   首页 Blog（PC / 平板）
   ========================= */

.home .blog-posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px 0;
}

.home .post {
  width: calc(25% - 20px);
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.home .post img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.home .post a {
  text-decoration: none;
  color: #000;
}

/* 桌面響應式 */
@media (max-width: 1200px) {
  .home .post { width: calc(33.33% - 20px); }
}

@media (max-width: 768px) {
  .home .post { width: calc(50% - 20px); }
}

/* =========================
   首页「最新动态」横向滑动（仅手机）
   ========================= */
@media (max-width: 767px) {
  .home .blog-posts {
    flex-wrap: nowrap;        /* ❗关键 */
    overflow-x: auto;
    gap: 14px;
    padding: 6px 10px 12px;
    scroll-snap-type: x mandatory;
  }

  .home .post {
    flex: 0 0 75%;            /* ❗只用 flex，不用 width */
    margin: 0;
    scroll-snap-align: start;
  }

  .home .post img {
    height: auto;             /* ❗手机用自然比例 */
  }

  .home .blog-posts::-webkit-scrollbar {
    display: none;
  }
}

/* 深色模式 */
body.dark-mode.home .post {
  background: #242424;
}

body.dark-mode.home .post a {
  color: #ffffff;
}

/* 16:9 容器 */
.home .post-thumb {
  aspect-ratio: 16 / 9;   /* ⭐ 現代瀏覽器首選 */
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

/* 圖片填滿比例 */
.home .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ❗裁切不變形 */
  display: block;
}

/* 標題兩行省略 */
.home .post-title {
  font-size: 15px;
  line-height: 1.4;
  margin: 8px 6px 10px;

  display: -webkit-box;
  -webkit-line-clamp: 2;      /* ⭐ 限制 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   文章頁樣式
   ========================= */
/* 基本文章區塊 */

.article {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  line-height: 1.8;
}
/* 標題與資訊 */
.article-title {
  font-size: 1.9rem;
  margin-bottom: 8px;
}

.article-meta {
  font-size: 0.9rem;
  opacity: 0.6;
  margin-bottom: 24px;
}

.article-intro {
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 28px;
}

/* 內文排版 */
.article h2 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.article p {
  margin: 12px 0;
}

.article ul {
  padding-left: 18px;
  margin: 12px 0;
}

.article li {
  margin: 6px 0;
}

/* 文字居中 */
.text-center {
  text-align: center;
  margin-top: 15px;
}

.text-center-inline {
  display: block;      /* inline 變 block 才能居中 */
  text-align: center;
}

/* 圖片 */
.article-image {
  margin: 28px 0;
  text-align: center;
}

.article-image img {
  max-width: 100%;
  border-radius: 10px;
}

.article-image figcaption {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 6px;
}

/* 🔒 文章頁圖片防爆（終極保險） */
.article img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 分割線 */
.article hr,
#previewArea hr {
  border: none;
  height: 1px;
  background: #ddd;
  margin: 32px auto;
  width: 60%;
}

body.dark-mode .article hr {
  background: #333;
}

/* 區塊引用（Medium 風格） */
blockquote {
  margin: 28px 0;
  padding-left: 16px;
  border-left: 3px solid #ddd;
  color: #555;
}

blockquote p {
  margin: 8px 0;
}

/* 文字縮進 */
.indent {
  margin-left: 2em;
}

/* 推薦連結 */
.article-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 0.95rem;
  opacity: 0.8;
  text-decoration: underline;
}

/* 深色模式 */
body.dark-mode .article {
  color: #eaeaea;
}

body.dark-mode .article-meta,
body.dark-mode .article-intro,
body.dark-mode .article-image figcaption {
  opacity: 0.7;
}

/* =========================
   文章時間線樣式
   ========================= */

.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,0.1);
}

body.dark-mode .timeline::before {
  background: rgba(255,255,255,0.2);
}

.timeline-item {
  position: relative;
  margin-bottom: 48px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 50%;
}

.timeline-date {
  font-weight: 600;
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.timeline-content p {
  margin-bottom: 16px;
}

/* =========================
   分頁樣式
   ========================= */
/* 部落格分頁 */
#pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 20px 0;
}

#pagination button {
  padding: 6px 12px;
  border: 1px solid #198964;
  border-radius: 6px;
  background: #fff;
  color: #198964;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

#pagination button:hover {
  opacity: 0.8;
}

#pagination button.active {
  background: #198964;
  color: #fff;
}

/* 暗黑模式下分頁 */
body.dark-mode #pagination button {
  background: #2d2d2d;
  color: #ccc;       /* 普通頁碼淺色文字 */
  border-color: #444;
}

body.dark-mode #pagination button.active {
  background: #198964;  /* 保持主色 */
  color: #fff;
}

/* =========================
   Turnstile 全屏驗證
   ========================= */

#cf-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  transition: opacity 0.4s ease;
}

#cf-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.cf-box {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}

.cf-logo {
  width: clamp(128px, 75vmin, 512px);
  height: clamp(128px, 75vmin, 512px);
  margin-bottom: clamp(14px, 5vmin, 128px);
}

.cf-loading .spinner {
  width: clamp(10px, 7vmin, 42px);
  height: clamp(10px, 7vmin, 42px);
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

.cf-box h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.cf-box p {
  opacity: 0.8;
  margin-bottom: 24px;
}

/* 驗證錯誤提示 */
.cf-error {
  margin-top: clamp(14px, 5vmin, 64px);
  font-size: clamp(13px, 2.4vmin , 20px);
  color: #d93025;
  display: none;
}

/* turnstile 驗證條隱藏 */
.cf-turnstile {
  position: absolute;
  opacity: 0;
  pointer-events: none;
} 

/* 鎖定背景 */
body.cf-lock {
  overflow: hidden;
}

/* 深色模式 */
body.dark-mode #cf-overlay {
  background: #000;
}

body.dark-mode .cf-box {
  color: #fff;
}

body.dark-mode .cf-error {
  color: #ff6b6b;
}

/* 時間節點摺疊 */
.timeline-year-content {
  display: none;
}

.timeline-year.open .timeline-year-content {
  display: block;
}

.timeline-year-toggle {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
}

.image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.image-viewer img {
  max-width: 92vw;
  max-height: 92vh;
}

/* 文章圖片橫向排列 */
.article-gallery {
  display: flex;
  gap: 16px;
  margin: 20px 0;
}

/* 每張圖 */
.article-image {
  flex: 1;
  margin: 0;
}

/* 圖片本身，防止過界 */
.article-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* 手機自動改為直向堆疊 */
@media (max-width: 767px) {
  .article-gallery {
    flex-direction: column;
  }
}

/* PC：橫向排列（不滑）*/
.article-gallery {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}

.article-image {
  flex: 1;
  margin: 0;
}

/* 手機：左右滑動（像相簿）*/
@media (max-width: 767px) {
  .article-gallery {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .article-image {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* 隱藏滾動條（但仍可滑） */
  .article-gallery::-webkit-scrollbar {
    display: none;
  }
}

/* =========================
   404 推荐文章
   ========================= */

  .error-recommend .blog-posts {
    flex-wrap: nowrap;        /* ❗关键 */
    overflow-x: auto;
    gap: 14px;
    padding: 6px 10px 12px;
    scroll-snap-type: x mandatory;
  }

  .error-recommend .post {
    flex: 0 0 75%;            /* ❗只用 flex，不用 width */
    margin: 0;
    scroll-snap-align: start;
  }

  .error-recommend .post img {
    height: auto;             /* ❗手机用自然比例 */
  }

  .error-recommend .blog-posts::-webkit-scrollbar {
    display: none;
  }

/* PC 端調整 (通常設定在 768px 或 992px 以上) */
@media (min-width: 768px) {

  .error-recommend .post {
    flex: 0 0 220px;           /* ⭐ 固定寬度，或是設為 20%~30% */
    max-width: 250px;          /* 限制最大寬度 */
  }

  .error-recommend .post-title {
    font-size: 14px;           /* PC 標題稍微縮小 */
  }
}

/* 深色模式 */
body.dark-mode.error-recommend .post {
  background: #242424;
}

body.dark-mode.error-recommend .post a {
  color: #ffffff;
}

/* 16:9 容器 */
.error-recommend .post-thumb {
  aspect-ratio: 16 / 9;   /* ⭐ 現代瀏覽器首選 */
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

/* 圖片填滿比例 */
.error-recommend .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ❗裁切不變形 */
  display: block;
}

/* 標題兩行省略 */
.error-recommend .post-title {
  font-size: 15px;
  line-height: 1.4;
  margin: 8px 6px 10px;

  display: -webkit-box;
  -webkit-line-clamp: 2;      /* ⭐ 限制 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   404 搜索（置中）
   ========================= */
.error-search {
  display: flex;
  justify-content: center;
  margin: 24px 0 36px;
  position: relative; /* 新增：讓內部的 absolute 定位以此為基準 */
  max-width: 420px;    /* 移到外層容器確保 Icon 跟隨寬度 */
  margin-left: auto;   /* 配合 justify-content: center 的效果 */
  margin-right: auto;
}

.error-search img {
  width: 18px;
  height: 18px;
  position: absolute;  /* 新增：絕對定位 */
  left: 16px;          /* 距離左邊邊距 */
  top: 50%;            /* 置中對齊 */
  transform: translateY(-50%); /* 垂直置中修正 */
  pointer-events: none; /* 讓點擊圖示時也能觸發 input 聚焦 */
  z-index: 1;
}

.error-search input {
  width: 100%;
  padding: 12px 16px 12px 42px; /* 修改：左側 padding 增加到 42px 給 Icon 空間 */
  font-size: 15px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.error-search input:focus {
  border-color: #198964;
  box-shadow: 0 0 0 3px rgba(25,137,100,0.15);
}

/* 暗黑模式 */
body.dark-mode .error-search input {
  background: #1e1e1e;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

body.dark-mode .error-search input::placeholder {
  color: #aaa;
}

body.dark-mode .error-search img {
  filter: invert(1) brightness(1.2);
}

/* =========================
   隱私權政策頁（privacy）
   ========================= */

#privacy-policy {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  line-height: 1.8;
  font-size: 15px;
}

/* 主標題 */
#privacy-policy h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

/* 更新時間 */
#privacy-policy .policy-updated {
  font-size: 13px;
  opacity: 0.65;
  margin-bottom: 28px;
}

/* 區塊標題 */
#privacy-policy h2 {
  font-size: 20px;
  margin-top: 36px;
  margin-bottom: 10px;
  border-left: 4px solid #333;
  padding-left: 10px;
}

/* 小標題 */
#privacy-policy h3 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 6px;
}

/* 內文 */
#privacy-policy p {
  margin: 6px 0 12px;
}

/* 備註文字 */
#privacy-policy .policy-note {
  font-size: 13px;
  opacity: 0.7;
  margin-left: 4px;
}

/* 清單 */
#privacy-policy ul {
  padding-left: 22px;
  margin: 6px 0 16px;
}

#privacy-policy li {
  margin: 4px 0;
}

/* 分隔線 */
#privacy-policy hr {
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 28px 0;
}

/* 連結 */
#privacy-policy a {
  color: #1a73e8;
  text-decoration: none;
}

#privacy-policy a:hover {
  text-decoration: underline;
}

/* =========================
   深色模式
   ========================= */

body.dark-mode #privacy-policy {
  color: #e0e0e0;
}

body.dark-mode #privacy-policy h2 {
  border-left-color: #888;
}

body.dark-mode #privacy-policy hr {
  background: rgba(255,255,255,0.15);
}

body.dark-mode #privacy-policy a {
  color: #8ab4f8;
}

body.dark-mode #privacy-policy .policy-note {
  opacity: 0.75;
}

/* =========================
   行動裝置微調
   ========================= */

@media (max-width: 600px) {
  #privacy-policy {
    padding: 30px 16px 50px;
    font-size: 14px;
  }

  #privacy-policy h1 {
    font-size: 24px;
  }

  #privacy-policy h2 {
    font-size: 18px;
  }
}

    /* =========================
       About Page – Apple-like
       ========================= */

    .about {
      max-width: 980px;
      margin: 0 auto;
      padding: 120px 20px 160px;
    }

    .about-card {
  margin-bottom: 160px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  max-width: 1100px;
  margin: 120px auto;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.about-card.is-visible {
  opacity: 1;
  transform: none;
}

.about-card:nth-of-type(2) { animation-delay: 0.1s; }
.about-card:nth-of-type(3) { animation-delay: 0.2s; }
.about-card:nth-of-type(4) { animation-delay: 0.3s; }
.about-card:nth-of-type(5) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
    .about-hero h1 {
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 32px;
    }

    .about-hero p {
      font-size: 1.15rem;
      line-height: 1.9;
      max-width: 720px;
      opacity: 0.85;
    }

    .about h2 {
      font-size: 2rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
    }

    .about p {
      font-size: 1rem;
      line-height: 1.8;
      max-width: 720px;
      opacity: 0.85;
    }

    .about ul {
      margin-top: 16px;
      padding-left: 18px;
      max-width: 720px;
    }

    .about li {
      margin: 8px 0;
      line-height: 1.8;
      opacity: 0.85;
    }

    .about a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* 深色模式 */
    body.dark-mode .about {
      color: #eaeaea;
    }

    body.dark-mode .about p,
    body.dark-mode .about li {
      opacity: 0.88;
    }

    body.dark-mode main.about section {
  background: transparent !important;
}

/* 初始狀態（尚未進入視窗） */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

/* PC 版動畫 */
@media (min-width: 768px) {
  .reveal {
    transform: translateY(60px);
    transition:
      opacity 0.9s ease,
      transform 0.9s ease;
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .about-card {
    display: flex;
    gap: 40px;
    align-items: center;
  }
  .about-card:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.about-card.is-visible .about-media,
.about-card.is-visible .about-text {
  opacity: 1;
  transform: none;
}

/* 手機版動畫 */
@media (max-width: 767px) {
  .reveal {
    transition: opacity 0.6s ease;
  }

  .reveal.active {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .about-card {
    flex-direction: column;
  }
}

/* ===== PC 版（显示图片 + 左右布局） ===== */
@media (min-width: 768px) {
  .about-media {
  aspect-ratio: 4 / 3; /* 或 16 / 9 */
  overflow: hidden;
  border-radius: 16px;
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    .about-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
}

  body.dark-mode .about-media {
    background: #2a2a2a;
  }

  /* 奇偶交错 */
  .about-card:nth-of-type(odd) .about-text {
    order: 1;
  }

  .about-card:nth-of-type(odd) .about-media {
    order: 2;
  }

  .about-card:nth-of-type(even) .about-text {
    order: 2;
  }

  .about-card:nth-of-type(even) .about-media {
    order: 1;
  }

  .about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ⭐ 裁切而非拉伸 */
    display: block;
  }
}

/* ===== 手机版（隐藏图片，单栏） ===== */
@media (max-width: 767px) {
  .about-media {
    display: none;
  }

  .about-card {
    display: block;
  }
}

/* =========================
   社群
   ========================= */

/* 作者 */
.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.author-meta {
  display: flex;
  flex-direction: column;
}

.author-line {
  display: flex;
  gap: 6px;
  align-items: center;
}

.author-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.author-handle {
  font-size: 0.85rem;
  opacity: 0.6;
}

.post-time {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* 内容 */
.post-content {
  font-size: 1rem;
  line-height: 1.6;
  margin: 6px 0 12px;
  padding-left: 6px;
  padding-top: 10px;
}

/* 首页社群：解除卡片定位 */
body.home .post-card {
  position: static;
  padding-bottom: 0;
}

body.home .post-actions {
  position: static;
  margin-top: 12px;
  justify-content: flex-end;
}

/* =========================
   社群圖片九宮格（WeChat Style）
   ========================= */

.post-images {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

/* 所有圖片：正方形 */
.post-images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* === 不同數量的排列 === */

/* 1 張 */
.post-images.count-1 {
  grid-template-columns: 1fr;
  max-width: 70%;
}

/* 2 張 */
.post-images.count-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 80%;
}

/* 3 張 */
.post-images.count-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 張（微信特例 2x2） */
.post-images.count-4 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 80%;
}

/* 5–9 張 */
.post-images.count-5,
.post-images.count-6,
.post-images.count-7,
.post-images.count-8,
.post-images.count-9 {
  grid-template-columns: repeat(3, 1fr);
}

.post-image-wrap {
  position: relative;
}

.image-shield {
  position: absolute;
  inset: 0;
  cursor: default;
}

.image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ⭐ Viewer 裡的圖片 */
.image-viewer img {
  max-width: 90vw;
  max-height: 90vh;

  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.viewer-shield {
  position: absolute;
  inset: 0;
}

/* =========================
   +N 遮罩（只在列表）
   ========================= */

body:not(.single-view) .post-images.has-more {
  position: relative;
}

body:not(.single-view) .post-images.has-more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* 暗色模式 */
body.dark-mode .post-content,
body.dark-mode .author-name {
  color: #f2f2f2;
}

body.dark-mode .author-handle,
body.dark-mode .post-time,
body.dark-mode .post-title.subtle {
  opacity: 0.6;
}

/* =========================
   讚、留言、分享
   ========================= */
   .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.post-actions {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  color: #444;
}

body.dark-mode .action-btn {
  color: #e5e5e5;
}

.action-btn:hover {
  opacity: 0.6;
}

.post-actions {
  pointer-events: auto;
}

.post-card {
  cursor: pointer;
}

@media (max-width: 767px) {
  .post-actions {
    right: 12px;
    bottom: 10px;
    gap: 14px;
  }
}

.post-card {
  position: relative; /* ⭐ 必須 */
  padding-bottom: 50px; /* 給右下角 icon 留空間 */
}

.post-actions {
  position: absolute;
  right: 16px;
  bottom: 14px;

  display: flex;
  gap: 16px;

  font-size: 0.85rem;
  opacity: 0.8;
}

body:not(.single-view) .post-card {
  position: relative;
  padding-bottom: 50px;
}

body:not(.single-view) .post-card .post-actions {
  position: absolute;
  right: 16px;
  bottom: 14px;
}

body.single-view .post-actions {
  position: static;          /* ⭐ 關鍵 */
  margin-top: 16px;
  justify-content: flex-end; /* 右對齊，但不浮 */
}

/* =========================
   單篇頁：徹底去除卡片 / 容器背景
   ========================= */

body.single-view #singlePost,
body.single-view #singlePost > article,
body.single-view section,
body.single-view .post-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.dark-mode.single-view .post-card {
  background: transparent;
}

body.single-view section {
  background: transparent;
}

.post-images img {
  -webkit-user-drag: none; /* Safari / iOS 關鍵 */
  user-drag: none;
  user-select: none;
}

/* =========================
   Footer
   ========================= */

#site-footer {
  background: #fff;
  padding: 30px 0;
  text-align: center;
}

body.dark-mode #site-footer {
  background: #2d2d2d;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.social-links img {
  width: 28px;
  height: 28px;
  transition: transform 0.2s;
}

.social-links img:hover {
  transform: scale(1.15);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
}

body.dark-mode .dropdown-menu {
  background: #2d2d2d;
  border-color: #444;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;

}

body {
  padding-top: var(--header-height);
} 

/* =========================
   影片頁
   ========================= */

/* === 影片容器 === */
.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

/* 封面 */
.video-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  z-index: 2;
}

/* 播放鍵 */
.play-btn {
  font-size: 48px;
  color: #fff;
  opacity: 0.85;
}

/* === iframe 核心解鎖 === */
.video-card iframe {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ⚠️ 關鍵：影片區域不吃任何 overlay */
.video-card .image-shield,
.video-card .viewer-shield {
  display: none !important;
}

/* ⚠️ iOS Safari 必殺 */
.video-card {
  transform: none !important;
  filter: none !important;
}

.video-page * {
  user-select: auto;
}

.video-layout {
  display: flex;
  flex-direction: row;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.video-main-col {
  flex: 1;
  min-width: 0;
}

.video-recommend {
  width: 360px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .video-layout {
    flex-direction: column;
  }

  .video-recommend {
    width: 100%;
  }
}

/* ===== 影片頁主佈局 ===== */
body.video-page .video-layout {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden; /* ⭐ 圓角生效關鍵 */
}

/* 手機預設（<= 767px） */
.video-player {
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (min-width: 768px) {
  .video-player {
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px; /* 👈 圓角大小你可調 */
  }
}

.video-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto !important;
}

.video-meta {
  margin-top: 16px;
}

.video-title {
  font-size: 20px;
  margin-bottom: 12px;
}
   
.video-meta .post-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-meta .post-actions {
  margin-left: auto; /* ⭐ 推到右邊 */
}

.video-page {
  background: var(--bg-color, #fff);
}

.content {
  max-width: 720px;
  margin: auto;
  padding: 16px;
}

/* 🎬 影片區塊 */
.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 12px 0;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: auto !important;
}

body.video-page .video-layout {
  display: flex;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.video-main {
  flex: 1 1 auto;
  min-width: 0;
}

.video-side {
  flex: 0 0 360px;
}

@media (max-width: 900px) {
  body.video-page .video-layout {
    flex-direction: column;
  }

  .video-side {
    width: 100%;
  }
}

/* 單個推薦影片 */
.video-recommend .blog-posts {
  flex-direction: column;    /* 改為縱向排列 */
  gap: 14px;
  padding: 6px 10px 12px;
}

.video-recommend .post {
  flex: 0 0 auto;            /* 高度根據內容自動調整 */
  margin: 0;
  scroll-snap-align: start; 
  width: calc(100%);
  margin-bottom: 6px;
}

/* 深色模式 */
body.dark-mode.video-recommend .post {
  background: #242424;
}

body.dark-mode.video-recommend .post a {
  color: #ffffff;
}

/* 16:9 容器 */
.video-recommend .post-thumb {
  aspect-ratio: 16 / 9;     /* ⭐ 現代瀏覽器首選 */
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

/* 圖片填滿比例 */
.video-recommend .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ❗裁切不變形 */
  display: block;
}

/* 標題兩行省略 */
.video-recommend .post-title {
  font-size: 15px;
  line-height: 1.4;
  margin: 8px 6px 10px;

  display: -webkit-box;
  -webkit-line-clamp: 2;    /* ⭐ 限制 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 901px) {
  .video-recommend {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* 讚、留言、分享 */
body:not(.video-page) .post-card {
  position: relative;
  padding-bottom: 50px;
}

body:not(.video-page) .post-card .post-actions {
  position: absolute;
  right: 16px;
  bottom: 14px;
}

body.video-page .post-actions {
  position: static;          /* ⭐ 關鍵 */
  margin-top: 16px;
  justify-content: flex-end; /* 右對齊，但不浮 */
}

body.video-page .video-layout {
  display: flex;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* 左：影片 + 標題作者 */
.video-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 右：推薦 */
.video-side {
  flex: 0 0 360px;
}

@media (max-width: 900px) {
  body.video-page .video-layout {
    flex-direction: column;
  }

  .video-side {
    width: 100%;
    margin-top: 24px;
  }
}

.video-author-row {
  display: flex;
  align-items: center;        /* ⭐ 與作者垂直平齊 */
  justify-content: space-between;
  gap: 16px;
}

.author-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-right .post-actions {
  position: static;           /* ❗一定要清掉之前的 absolute */
  display: flex;
  gap: 18px;
  margin: 0;
}

body.video-page .post-actions {
  position: static !important;
  justify-content: flex-end;
}

/* 影片提示 */
.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* 狀態提示層 */
.video-status {
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  z-index: 5;
}

.video-status.hidden {
  display: none;
}

/* 重試按鈕 */
.video-status button {
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.video-card.playing .video-cover {
  pointer-events: none;
  opacity: 0;
}

/* 加載icon */
.video-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000; /* 可留黑底 */
  color: #fff;
}

/* 圓形 loading */
.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  opacity: .85;
  color: #fff;
}

body:not(.dark-mode) .cf-loading .spinner {
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: #000;
}

body:not(.dark-mode) .loading-text {
  color: #000;
}


/* =========================
   影片頁：去除卡片背景
   ========================= */

body.video-page .video-main-col,
body.video-page .video-meta,
body.video-page .post,
body.video-page .post-author,
body.video-page .video-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================
   捐款頁
   ========================= */

.donation-card {
  max-width: 420px;
  margin: 3rem auto;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--card-bg, #f7f7f7);
  text-align: center;
}

.donation-title {
  margin-bottom: .5rem;
}

.donation-desc {
  font-size: 0.95rem;
  opacity: .8;
}

.donation-qr img {
  width: 180px;
  margin: 1rem auto;
}

.donation-info {
  font-weight: 600;
  margin-bottom: .5rem;
}

.donation-address {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.donation-address code {
  padding: .4rem .6rem;
  background: #00000010;
  border-radius: 6px;
}

.copy-btn {
  border: none;
  padding: .4rem .6rem;
  border-radius: 6px;
  cursor: pointer;
}

.donation-note {
  margin-top: .8rem;
  font-size: .8rem;
  opacity: .65;
}

/* =========================
   全站禁止列印（最終版）
   ========================= */
@media print {
  html,
  body {
    display: none !important;
  }
}