/* 重新調整文章內的所有標題大小，拉開與 18px 內文的差距 */
/* #article-container h1 { font-size: 2.5rem; }   45px */
/* #article-container h2 { font-size: 2.1rem; }   ~38px */
/* #article-container h3 { font-size: 1.8rem; }   ~32px */
/* #article-container h4 { font-size: 1.5rem; }   27px */
/* #article-container h5 { font-size: 1.35rem; }  ~24px */
/* #article-container h6 { font-size: 1.2rem; }   21.6px -> 確保明顯大於 18px 內文 */

/* 引入 Google Fonts 雲端字體：JetBrains Mono (程式碼) 與 Noto Sans TC (中文思源黑體) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* 1. 全站字體優化（中英文分離原則） */
body {
  /* 優先英文高質感字體，後面接繁中思源黑體，最後是系統後備字體 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 
               "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

/* 2. 文章內文微調，確保閱讀舒適度 */
#article-container {
  letter-spacing: 0.03em; /* 稍微拉開字距，降低閱讀疲勞 */
  line-height: 1.8;       /* 舒適的行高 */
}

/* 3. Codeblock 程式碼區塊字體（核心重災區） */
#article-container pre,
#article-container code,
.highlight,
.highlight table,
.highlight .code pre {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", monospace !important;
  font-variant-ligatures: none; /* 若想要開啟連字功能（例如 != 變成 ≠），可以改成 normal */
}

/* ==========================================================================
   Inline Code (行內代碼) 高辨識度美化 - 區分深淺色模式
   ========================================================================== */

/* 🟢 優化後：淺色主題 (Light Mode) - 增強辨識度 */
:not(pre) > code {
  /* 使用帶有科技感的深藍偏紫色調，比純黑或暗紅更具代碼感 */
  color: #0969da !important; 
  /* 稍微加深一點點背景色，採用淡淡的灰藍色，讓邊界清晰 */
  background-color: #f0f3f6 !important; 
  padding: 0.2em 0.45em !important;
  border-radius: 6px !important;
  /* 讓邊框顏色再深一階，確保在純白背景下能「跳」出來 */
  border: 1px solid #d0d7de !important;
  font-size: 0.88em !important;
  font-weight: 500 !important; /* 稍微加粗一點點，大幅提升吸睛度 */
  word-break: break-word !important;
  /* 加上微弱的陰影，讓它在視覺上有一點點浮起來的層次感 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* 🔵 深色主題 (Dark Mode) - 保持舒適不刺眼 */
[data-theme="dark"] :not(pre) > code {
  /* 使用高亮但柔和的青藍色/冰藍色 */
  color: #79c0ff !important; 
  /* 深色模式下背景要夠暗，才不會有過度曝曬感 */
  background-color: #1c2129 !important; 
  border: 1px solid #388bfd !important; /* 帶有一點點藍色的暗邊框 */
  box-shadow: none !important;
}

/* 淺色模式選取範圍 */
::selection {
  background: rgba(0, 102, 204, 0.2);
  color: inherit;
}
/* 深色模式選取範圍 */
[data-theme="dark"] ::selection {
  background: rgba(56, 139, 253, 0.4);
  color: #ffffff;
}

.timeline {
  position: relative;
  margin-left: 20px;
  padding-left: 30px;
  border-left: 2px solid #4a7dbe;
}

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

.timeline-item::before {
  content: '';
  position: absolute;
  left: -37px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: #4a7dbe;
  border-radius: 50%;
}

.time {
  font-weight: bold;
  color: #4a7dbe;
  margin-bottom: 2px;
}

.content {
  line-height: 1.6;
}

.about-tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.12em 0.65em;
  border-radius: 999px;
  font-size: 0.88em;
  font-weight: 600;
  vertical-align: middle;
}

.about-tag-cyber {
  background: rgba(161, 105, 255, 0.18);
  color: #5e2bd1;
}

.about-tag-math {
  background: rgba(246, 233, 182, 0.55);
  color: #7a6131;
}

.about-tag-dev {
  background: rgba(173, 216, 255, 0.55);
  color: #1f5aa2;
}

.about-tag-oi {
  background: rgb(0, 68, 158);
  color: #8edafb;
}

.about-tag-phy {
  background: rgba(138, 228, 154, 0.55);
  color: #108405;
}

[data-theme="dark"] .about-tag-cyber {
    background: rgba(161, 105, 255, 0.25);
    color: #c4a7ff;
}

[data-theme="dark"] .about-tag-math {
    background: rgba(246, 233, 182, 0.15);
    color: #fce883;
}

[data-theme="dark"] .about-tag-oi {
  background: rgba(0, 69, 158, 0.397);
  color: #acd9ed;
}

[data-theme="dark"] .about-tag-dev {
    background: rgba(173, 216, 255, 0.2);
    color: #93c5fd;
}

[data-theme="dark"] .about-tag-phy {
    background: rgba(138, 228, 154, 0.2);
    color: #86efac;
}

/* Override flink layout for larger friend link cards */
.flink-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0 0;
}

.flink-list-item {
  width: calc(50% - 20px) !important;
  margin: 20px 10px;
  min-height: 120px !important;
  height: auto !important;
}

.flink-list-item a {
  font-size: 1.05em;
}

.flink-item-icon {
  width: 80px !important;
  height: 80px !important;
  margin: 15px 15px !important;
}

.flink-item-name,
.flink-item-desc {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
  height: auto !important;
}

.flink-item-name {
  font-size: 1.7em !important;
  padding-top: 14px;
}

.flink-item-desc {
  font-size: 1.05em !important;
  padding-top: 12px;
}

@media (max-width: 1024px) {
  .flink-list-item {
    width: calc(50% - 15px) !important;
  }
}

@media (max-width: 600px) {
  .flink-list-item {
    width: calc(100% - 15px) !important;
  }
}

/* ==========================================
   1. 基礎容器與網格佈局
   ========================================== */
.project-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* ==========================================
   2. 專案卡片主體（適應淺色/深色模式）
   ========================================== */
.project-card {
    border-radius: 12px;
    padding: 22px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    
    /* 預設淺色模式 (Light Mode) */
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 懸停效果 (Hover) */
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 190, 244, 0.18);
    border-color: #00bef4 !important;
}

/* 深色模式修正 (Dark Mode) */
[data-theme="dark"] .project-card {
    background: rgba(30, 30, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   3. 文字與標題顏色修正（雙行版本）
   ========================================== */
.project-card .project-title {
    display: flex;
    flex-direction: column; /* 讓子元素垂直排列，自動分行 */
    margin-bottom: 15px;
    padding-right: 75px; /* 給右上角的 Badge 留出空間 */
}

/* 第一行：類別標籤樣式 */
.project-card .project-category {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: #666 !important; /* 淺色模式下是低調的灰色 */
}
[data-theme="dark"] .project-card .project-category {
    color: #aaa !important; /* 深色模式下稍微變亮 */
}

/* 第二行：真實題目/專案名稱樣式 */
.project-card .project-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-bg-hover) !important; /* 淺色模式下使用主題強調色 */
}

/* ============================
   柔和藍色氛圍：首頁輕柔背景
   ============================ */
body {
  background-color: #f4f8ff !important;
}

[data-theme="dark"] body {
  background-color: #0b1422 !important;
}

#page-header.full_page {
  position: relative;
}

#page-header.full_page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(236, 245, 255, 0.22);
  pointer-events: none;
  z-index: 0;
}

#page-header.full_page > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ☀️ 淺色模式：首頁 Cover 完美銜接修正
   利用與全站 light body 背景 #f4f8ff 同色系的淺灰藍色漸層，
   底部漸層強度達 1.0（完全不透明），與網頁底色完美貼合，
   讓淺色水彩底圖在底部自然淡出，完美融入全站背景。
   ============================================================ */
[data-theme="light"] #page-header.full_page::before {
  background: linear-gradient(
    180deg,
    rgba(244, 248, 255, 0.15) 0%,   /* 上方保持高度透光，完美展現原本水彩圖的亮麗細節 */
    rgba(244, 248, 255, 0.6) 55%,    /* 中間柔和過渡，並為上方的文字提供舒適的閱讀襯底 */
    rgba(244, 248, 255, 1) 100%     /* 底部強度 1.0 完全不透明，與 #f4f8ff 背景融為一體 */
  ) !important;
  
  /* 💡 注意：淺色模式下不需要使用 mix-blend-mode: multiply (這會讓畫面變髒變暗)，
        直接使用正常的色彩疊加（normal），就能讓白淨優雅的水彩感完美延續。 */
  mix-blend-mode: normal !important; 
}

/* ============================================================
   深色模式：首頁 Cover 修正
   原始的 cover.jpg 是淺色水彩圖，切到 Dark Mode 時會顯得突兀刺眼，
   這裡用一層深藍色遮罩（與全站 dark body 背景 #0b1422 同色系）
   蓋在圖片上，並用 mix-blend-mode 讓底圖的色彩變化仍隱約可見，
   底部漸層強度達 1.0（完全不透明），與 body 背景色完美銜接，
   視覺上自然過渡成「暗色版」的 cover，而不是整片死黑。
   ============================================================ */
[data-theme="dark"] #page-header.full_page::before {
  background: linear-gradient(
    180deg,
    rgba(11, 20, 34, 0.55) 0%,
    rgba(11, 20, 34, 0.82) 55%,
    rgba(11, 20, 34, 1) 100%
  );
  mix-blend-mode: multiply;
}

/* 若瀏覽器不支援 mix-blend-mode，降級為純色深色遮罩，依然維持暗色效果 */
@supports not (mix-blend-mode: multiply) {
  [data-theme="dark"] #page-header.full_page::before {
    background: rgba(11, 20, 34, 1);
  }
}

/* ============================================================
   深色模式：文章頁面頂圖修正
   與首頁 Cover 保持同風格，用深藍遮罩讓文章頁面的 top_img
   在 Dark Mode 下自然融入深色背景
   ============================================================ */
#page-header:not(.full_page) {
  position: relative;
}

#page-header:not(.full_page)::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 加上一層由上至下的微暗深藍灰色漸層，強制讓白字浮現 */
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.3) 100%) !important;
  pointer-events: none;
  z-index: 0;
}

#page-header:not(.full_page) > * {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] #page-header:not(.full_page)::before {
  background: linear-gradient(
    180deg,
    rgba(11, 20, 34, 0.48) 0%,
    rgba(11, 20, 34, 0.78) 65%,
    rgba(11, 20, 34, 1) 100%
  );
  mix-blend-mode: multiply;
}

@supports not (mix-blend-mode: multiply) {
  [data-theme="dark"] #page-header:not(.full_page)::before {
    background: rgba(11, 20, 34, 1);
  }
}

/* 導航欄：保持半透明白底 + 深藍黑字 */
#nav {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.16) !important;
}

[data-theme="dark"] #nav {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.12) !important;
}

#nav .site-name,
#nav .nav-site-title,
#nav .nav-page-title,
#nav .site-page,
#nav a {
  color: #0f172a !important;
}

[data-theme="dark"] #nav .site-name,
[data-theme="dark"] #nav .nav-site-title,
[data-theme="dark"] #nav .nav-page-title,
[data-theme="dark"] #nav .site-page,
[data-theme="dark"] #nav a {
  color: #e2e8f0 !important;
}

#menus a,
#menus .site-page,
#search-button,
#toggle-menu {
  color: #1d2939 !important;
}

[data-theme="dark"] #menus a,
[data-theme="dark"] #menus .site-page,
[data-theme="dark"] #search-button,
[data-theme="dark"] #toggle-menu {
  color: #cbd5e1 !important;
}

#menus a:hover,
#menus .site-page:hover,
#search-button:hover,
#toggle-menu:hover {
  color: #1e40af !important;
}

[data-theme="dark"] #menus a:hover,
[data-theme="dark"] #menus .site-page:hover,
[data-theme="dark"] #search-button:hover,
[data-theme="dark"] #toggle-menu:hover {
  color: #93c5fd !important;
}

#toggle-menu,
#search-button {
  border: none !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
}

[data-theme="dark"] #toggle-menu,
[data-theme="dark"] #search-button {
  background: rgba(15, 23, 42, 0.82) !important;
}

#search-button {
  min-width: auto !important;
}

#nav .fas {
  color: #1d2939 !important;
}

[data-theme="dark"] #nav .fas {
  color: #e2e8f0 !important;
}

footer#footer,
.footer-other,
.footer-copyright {
  background: rgba(244, 248, 255, 0.92) !important;
  color: rgba(15, 23, 42, 0.65) !important;
}

[data-theme="dark"] footer#footer,
[data-theme="dark"] .footer-other,
[data-theme="dark"] .footer-copyright {
  background: rgba(15, 23, 42, 0.92) !important;
  color: rgba(226, 232, 240, 0.75) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-copyright,
.footer-copyright a,
.footer-copyright span,
.framework-info,
.framework-info a,
.footer-custom_text {
  color: rgba(15, 23, 42, 0.65) !important;
}

[data-theme="dark"] .footer-copyright,
[data-theme="dark"] .footer-copyright a,
[data-theme="dark"] .footer-copyright span,
[data-theme="dark"] .framework-info,
[data-theme="dark"] .framework-info a,
[data-theme="dark"] .footer-custom_text {
  color: rgba(226, 232, 240, 0.75) !important;
}

.footer-other {
  border-top: 1px solid rgba(96, 165, 250, 0.12) !important;
}

.framework-info a {
  color: rgba(15, 23, 42, 0.75) !important;
}

#site-title {
  color: #0f172a !important;
}

[data-theme="dark"] #site-title {
  color: #f8fafc !important;
}

#site-subtitle,
#site-subtitle span,
#site-subtitle i {
  color: #334155 !important;
}

[data-theme="dark"] #site-subtitle,
[data-theme="dark"] #site-subtitle span,
[data-theme="dark"] #site-subtitle i {
  color: #cbd5e1 !important;
}

.recent-post-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(191, 219, 254, 0.7);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .recent-post-item {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(71, 85, 105, 0.24) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

.recent-post-item:hover {
  box-shadow: 0 16px 32px rgba(59, 130, 246, 0.16);
}

.recent-post-info {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px 24px;
}

[data-theme="dark"] .recent-post-info {
  background: rgba(15, 23, 42, 0.95) !important;
}

.recent-post-info a.article-title {
  color: #2563eb !important;
}

[data-theme="dark"] .recent-post-info a.article-title {
  color: #93c5fd !important;
}

.recent-post-item .article-meta,
.recent-post-item .post-meta-date,
.recent-post-item .article-meta-label,
.recent-post-item .article-meta__categories,
.recent-post-item .article-meta__tags,
.recent-post-item .article-meta-link {
  color: #475569 !important;
}

[data-theme="dark"] .recent-post-item .article-meta,
[data-theme="dark"] .recent-post-item .post-meta-date,
[data-theme="dark"] .recent-post-item .article-meta-label,
[data-theme="dark"] .recent-post-item .article-meta__categories,
[data-theme="dark"] .recent-post-item .article-meta__tags,
[data-theme="dark"] .recent-post-item .article-meta-link {
  color: #cbd5e1 !important;
}

.recent-post-item .post-meta-separator {
  color: #93c5fd !important;
}

[data-theme="dark"] .recent-post-item .post-meta-separator {
  color: rgba(147, 197, 253, 0.85) !important;
}

[data-theme="dark"] .project-card .project-name {
    color: #00bef4 !important; /* 深色模式下使用經典科技藍 */
}

/* ==========================================
   4. 狀態標籤 (Badge) 配色優化（解決淺色不清楚問題）
   ========================================== */
.project-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* 淺色模式下的 Badge：加深文字顏色 */
.badge-wip { 
    background: #fff3cd !important; 
    color: #b56d00 !important; /* 焦糖深橘 */
    border: 1px solid #ffeeba;
}
.badge-done { 
    background: #d4edda !important; 
    color: #155724 !important; /* 深森林綠 */
    border: 1px solid #c3e6cb;
}

/* 深色模式下的 Badge：提高亮度和對比 */
[data-theme="dark"] .badge-wip { 
    background: rgba(230, 142, 0, 0.2) !important; 
    color: #ffa726 !important; 
    border: 1px solid rgba(230, 142, 0, 0.4);
}
[data-theme="dark"] .badge-done { 
    background: rgba(40, 167, 69, 0.2) !important; 
    color: #57d9a3 !important; 
    border: 1px solid rgba(40, 167, 69, 0.4);
}

/* ==========================================
   5. 進度條與連結列表（Lazy Animation 版本）
   ========================================== */
.project-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    margin: 18px 0;
    overflow: hidden;
}
[data-theme="dark"] .project-progress-bar { 
    background: rgba(255, 255, 255, 0.1); 
}

/* 進度條主體 */
.project-progress-fill {
    height: 100%;
    border-radius: 3px;
    background-size: 30px 30px;
    background-image: linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%, 
        transparent 75%, 
        transparent
    );
    background-color: #00bef4; 
    transform-origin: left;
    
    /* 預設狀態：縮小到 0，處於靜止隱藏狀態 */
    transform: scaleX(0); 
}

.project-links {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 12px;
}
.project-links li {
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.project-links li::before {
    content: "•";
    color: #00bef4;
    font-weight: bold;
    margin-right: 8px;
    font-size: 16px;
}
.project-links a {
    color: var(--font-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}
.project-links a:hover {
    color: #00bef4 !important;
    text-decoration: underline;
}

/* ==========================================
   全站通用：卡片內子進度條 (Sub Progress Bar) 橫向對齊與美化
   ========================================== */

/* 1. 子任務外殼：使用 Flex 佈局讓文字和進度條橫向並排並置中對齊 */
.project-card .sub-task-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左邊放文字，右邊放進度條 */
    width: 100%;
    margin: 8px 0;
}

/* 2. 子任務的文字：設定固定最小寬度，保證右側的進度條開頭能完美對齊 */
.project-card .sub-task-name {
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.85;
    min-width: 150px; /* 如果專案/目標的文字比較長，可以自由拉大這個數值 */
    flex-shrink: 0;
}

/* 3. 精細化子進度條：只縮小被包裹在 sub-task-container 內部的進度條 */
.project-card .sub-task-container .project-progress-bar {
    flex-grow: 1;               /* 自動填滿剩下的右側空間 */
    height: 6px !important;     /* 覆蓋原本主進度條的高度，讓它變細、更精緻 */
    margin: 0 0 0 15px !important; /* 取消原本進度條的上下 margin，改成與左側文字保持 15px 間距 */
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
}

/* 4. 深色模式下的子進度條軌道背景 */
[data-theme="dark"] .project-card .sub-task-container .project-progress-bar {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* 5. 子進度條的填充部分：賦予和主進度條類似的科技感漸層 */
.project-card .sub-task-container .project-progress-fill {
    border-radius: 10px !important;
    background: linear-gradient(90deg, #00bef4, #0076f4) !important;
}

/* 深色模式下的子進度條填充（客製化霓虹發光感，藍轉紫漸層） */
[data-theme="dark"] .project-card .sub-task-container .project-progress-fill {
    background: linear-gradient(90deg, #00bef4, #a169ff) !important; 
    box-shadow: 0 0 8px rgba(0, 190, 244, 0.4) !important;
}

/* 當 JS 偵測到滑入並賦予 .animate 類別時，才啟動動畫 */
.project-progress-fill.animate {
    /* projectLoad 改為 2.8 秒滑順慢速延伸 */
    animation: 
        projectLoad 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        progressMove 1.2s linear infinite;
}

/* ==========================================
   全站通用：當子進度條填滿 100% 時自動變綠色
   ========================================== */

/* 1. 淺色模式：100% 滿格時切換為舒適的綠色漸層 */
.project-card .sub-task-container .project-progress-fill[style*="width: 100%"] {
    background: linear-gradient(90deg, #10b981, #059669) !important; /* 翡翠綠漸層 */
}

/* 2. 深色模式：100% 滿格時切換為帶有霓虹發光感的綠色 */
[data-theme="dark"] .project-card .sub-task-container .project-progress-fill[style*="width: 100%"] {
    background: linear-gradient(90deg, #34d399, #10b981) !important; /* 科技感薄荷綠漸層 */
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;         /* 綠色霓虹微光 */
}

/* 6. 清除 <li> 的預設圓點或縮排影響，確保橫向排版在清單中不歪斜 */
.project-card ul, 
.project-card li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ==========================================
   Goal / Project 頁面：調整 li 清單文字大小
   ========================================== */

/* 1. 放大主要清單文字，並調整行高 */
.project-card .project-links li {
    font-size: 1.05em !important; /* 原本大約是 0.9em~1em，微調放大 */
    line-height: 1.8 !important;   /* 舒適的行高，防止文字跟進度條擠在一起 */
    color: var(--text-color);
}

/* 2. 同步微調子進度條的標題文字，保持視覺和諧 */
.project-card .sub-task-name {
    font-size: 0.95em !important; /* 配合 li 的放大，同步微調子任務名稱 */
    font-weight: 500;             /* 稍微加粗，讓結構更清晰 */
}

/* ------------------------------------------
   動畫核心定義
   ------------------------------------------ */
@keyframes projectLoad {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes progressMove {
    from { background-position: 0 0; }
    to { background-position: 30px 0; }
}

/* ==========================================================================
   全站 Details / Summary 標籤高質感魔改 (仿終端機資訊盒)
   ========================================================================== */

/* 1. 外殼容器：套用到全站所有的 details */
details {
  background: rgba(30, 30, 30, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  margin: 20px auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

/* 深色模式下的外殼 */
[data-theme="dark"] details {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* 當展開時 (open 狀態)，邊框稍微亮起 */
details[open] {
  border-color: rgba(0, 190, 244, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
[data-theme="dark"] details[open] {
  border-color: rgba(0, 190, 244, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* 2. 標題列 (Summary) 樣式 */
details summary {
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  outline: none !important;
  color: var(--text-bg-hover) !important; /* 預設使用系統主題強調色 */
  transition: color 0.2s ease, transform 0.2s ease !important;
  list-style: none !important; /* 隱藏原本陽春的黑色小三角 */
}

/* 針對 Safari 瀏覽器隱藏預設小三角 */
details summary::-webkit-details-marker {
  display: none !important;
}

/* 自訂前端的小箭頭或裝飾（讓它更有儀式感） */
details summary::before {
  content: "🚀" !important; /* 你可以換成 📂、▶ 或任何你喜歡的 Emoji */
  margin-right: 8px !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

/* 當展開時，讓前端的 Emoji 或箭頭旋轉（增加動態細節） */
details[open] summary::before {
  transform: rotate(90deg) !important; /* 如果用箭頭（如 ❯）旋轉效果超好，Emoji 也可以看視覺效果 */
}

/* 深色模式下的標題顏色 */
[data-theme="dark"] details summary {
  color: #00bef4 !important; /* 強制科技藍，白天黑夜都清晰 */
}

/* 懸停在標題時的效果 */
details summary:hover {
  color: #00bef4 !important;
  opacity: 0.9;
}

/* 3. 展開後的內容容器微調 */
details > :not(summary) {
  animation: detailsFadeIn 0.4s ease-out; /* 讓內容展開時有滑順的淡入感 */
  padding-top: 10px;
}

/* 淡入動畫定義 */
@keyframes detailsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Redefine 風格：有 cover 顯示、沒 cover 變純文字卡片
   ========================================================================== */

/* 1. 當首頁卡片的圖片完全沒有網址(空值)或載入失敗時，徹底隱藏圖片容器 */
#recent-posts > .recent-post-item .post_cover:not([href]),
#recent-posts > .recent-post-item .post_cover[href=""],
#recent-posts > .recent-post-item .post_cover img:not([src]),
#recent-posts > .recent-post-item .post_cover img[src=""],
#recent-posts > .recent-post-item .post_cover img[src*="undefined"] {
  display: none !important;
}

/* 2. 核心魔法：當圖片被隱藏後，讓右手邊的文字區塊自動橫向撐滿 100% 寬度 */
#recent-posts > .recent-post-item .post_cover:not([href]) + .recent-post-info,
#recent-posts > .recent-post-item .post_cover[href=""] + .recent-post-info,
#recent-posts > .recent-post-item:not(:has(img[src])) .recent-post-info,
#recent-posts > .recent-post-item:has(img[src=""]) .recent-post-info {
  display: block !important;
}

/* ==========================================================================
   側邊欄卡片 (Aside .card) Dark Mode 配色統一
   ========================================================================== */

/* 淺色模式：保持原本的淡白背景 + 淡藍邊框 */
.card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(191, 219, 254, 0.6) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(147, 197, 253, 0.8) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1) !important;
}

/* ==========================================================================
   【配色修正區：深淺色主題完美同步優化】
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 深色模式 (Dark Mode) - 消除雙層疊色，統一 Slate 藍色調
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* 1. 從根本修改 Butterfly 的原生 CSS 全域變數 */
  --global-bg: #0b0f19 !important;      /* 全站最底層背景（改為極深邃藍黑，取代純黑） */
  --card-bg: rgba(15, 23, 42, 0.93) !important; /* 卡片主背景（與文章卡片一致的深藍） */
}

/* 2. 徹底消除全站最底層背景圖/色的干擾，防止純黑穿透出來 */
html[data-theme="dark"] #web_bg {
  background-color: #0b0f19 !important;
  background-image: none !important;  /* 移除可能干擾的預設暗色背景圖 */
}

/* 3. 重要關鍵：將側邊欄、主內容的外殼容器「強制透明化」 */
/* 這樣外殼就不會自帶一層黑色，裡面的小工具（自我介紹、公告、最新文章）才不會疊色 */
html[data-theme="dark"] #content-inner,
html[data-theme="dark"] #aside-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* 4. 聯動打包：把首頁文章卡片、側邊欄所有小工具、文章內頁底圖、目錄(TOC) 統一綁定同一套外觀 */
html[data-theme="dark"] #recent-posts .recent-post-item, /* 首頁文章卡片 */
html[data-theme="dark"] #aside-content .card-widget,     /* 自我介紹、公告、最新文章、標籤、歸檔等所有側邊欄卡片 */
html[data-theme="dark"] #post,                            /* 文章內頁的主要內容底圖 */
html[data-theme="dark"] #page,                            /* 自訂分頁底圖 */
html[data-theme="dark"] .layout > div:first-child,        /* 其他內頁左側容器 */
html[data-theme="dark"] #card-toc {                        /* 右側跟隨的 TOC 目錄卡片 */
  background: rgba(15, 23, 42, 0.93) !important;          /* 完美一致的 Slate 藍色背景 */
  border: 1px solid rgba(71, 85, 105, 0.4) !important;    /* 精緻的 Slate 邊框線 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;   /* 沉穩不突兀的陰影 */
}

/* 5. 目錄內部容器清理（防止 TOC 重疊內部白邊或黑邊） */
html[data-theme="dark"] .toc-container,
html[data-theme="dark"] #card-toc .toc-content {
  background: transparent !important;
}


/* --------------------------------------------------------------------------
   B. 淺色模式 (Light Mode) - 校正錯位與雜音，對應深色版結構
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
  --global-bg: #f6f8fa !important;      /* 乾淨、舒適的淺灰白背景 */
  --card-bg: #ffffff !important;         /* 卡片一律回歸乾淨純白 */
}

/* 一樣將淺色模式的外殼容器透明化，確保卡片流外觀乾淨俐落 */
html[data-theme="light"] #content-inner,
html[data-theme="light"] #aside-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* 確保淺色模式下，側邊欄與文章卡片能完美對應深色模式的容器邊界，不會發生白色區塊錯亂 */
html[data-theme="light"] #recent-posts .recent-post-item,
html[data-theme="light"] #aside-content .card-widget,
html[data-theme="light"] #post,
html[data-theme="light"] #page,
html[data-theme="light"] .layout > div:first-child,
html[data-theme="light"] #card-toc {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;   /* 輕薄淡雅的邊框 */
  box-shadow: 0 4px 15px rgba(148, 163, 184, 0.06) !important; /* 現代感微陰影 */
}

/* ==========================================
   修正 1：側邊工具欄與懸浮按鈕深色模式統一
   ========================================== */
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] #rightside > div > button,
[data-theme="dark"] #rightside > div > a {
    background-color: rgba(15, 23, 42, 0.93) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #rightside > div > button:hover,
[data-theme="dark"] #rightside > div > a:hover {
    background-color: #00bef4 !important; /* 懸停時變為科技藍 */
    color: #fff !important;
}

/* ==========================================
   修正 4：拓寬全站版面與文章閱讀區塊
   ========================================== */
.layout {
    max-width: 1350px !important; /* 原本大約是 1200px */
}

/* 調整主內容佔比 */
.layout > div:first-child {
    width: 76% !important; 
}

/* 調整側邊欄佔比 */
#aside-content {
    width: 24% !important; 
}

/* 確保手機與平板不會跑版 */
@media screen and (max-width: 900px) {
    .layout > div:first-child { width: 100% !important; }
    #aside-content { width: 100% !important; }
}

/* ==========================================
   1. 徹底移除文章方塊的細線邊框
   ========================================== */
#recent-posts {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* ==========================================
   2. 全站視覺圓角統一 (核心組件 16px)
   ========================================== */
/* 包含：首頁文章卡片、側邊欄工具、文章內頁主體、獨立頁面(About/Links)、歸檔與分類頁 */
.recent-post-item,
#aside-content .card-widget,
.layout > #post,
.layout > #page,
.layout > #archive,
.layout > #tag,
.layout > #category,
.flink-list-item {
    border-radius: 35px !important;
}

#article-container img,
#article-container .highlight,
#article-container blockquote,
.note {
    border-radius: 25px !important;
}