/* ======================================================
   1. 顏色變數定義 (Variables)
   ====================================================== */
/* 1. 基礎白天模式 */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --link-color: #613DC1;
    --header-bg: #613DC1;
    --meta-bg: #E8DBC5;
    --code-bg: #f4f4f4;
    --border-color: #eee;
    --quote-bg: #f9f9f9;
    --table-even: #eee;
    --guestbook-link: #007bff;
}

/* 2. 黑暗模式：當 html 標籤帶有 .dark-mode 類別時 */
/* 注意：這裡改用 html.dark-mode 來確保最高優先權 */
html.dark-mode {
    --bg-color: #393E41;
    --text-color: #ffffff;
    --link-color: #EBC3DB;
    --header-bg: #393E41;
    --meta-bg: #393E41;
    --code-bg: #323131;
    --border-color: #666;
    --quote-bg: #393E41;
    --table-even: #666;
    --guestbook-link: #EBC3DB;
}
/* ======================================================
   2. 基礎配置 (Base)
   ====================================================== */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 800px;
    margin: auto;
    padding: .2em;
    line-height: 1.5em;
    font-family: sans-serif;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { line-height: 1.5em; }
p { line-height: 1.7em; }

/* 圖片與媒體 */
img, iframe, video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}
.center-img { display: block; margin: 1.5rem auto; }

/* ======================================================
   3. 佈局組件 (Layout)
   ====================================================== */
header {
    position: relative;
    width: 100%;
    height: 1.75rem;
    font-size: 1rem;
    background: var(--header-bg);
}

@media (prefers-color-scheme: dark) {
    header { border-bottom: 2px dotted var(--link-color); }
}

header nav { padding: 0 0.5rem; }
header ul { margin: 0; padding: 0; list-style: none; }
header a { color: #fff; line-height: 1.75rem; padding: 0 0.5rem; }

.pull-left { float: left; }
.pull-right { float: right; }

.content-wrapper { padding: 0 12px; }
.main-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

main {
    max-width: 650px;
    margin: auto;
    display: block;
    font-size: 1.1em;
}

footer { text-align: center; font-size: 90%; margin-top: 2rem; }
footer a { display: inline-block; margin: 5px 10px; }

/* ======================================================
   4. 文章元數據與標籤 (Article Meta)
   ====================================================== */
.article-meta {
    text-align: center;
    background: var(--meta-bg);
    color: var(--text-color);
    padding: 5px;
    border-radius: 5px;
    border: 1px dotted var(--border-color);
    margin: 20px 0;
}

.title { font-size: 1.1em; }
.terms { font-size: .9em; }

/* 強制標題不換行補丁 */
.content-wrapper h1, main h1, .title {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: 1.4rem;
}

/* ======================================================
   5. 功能性區塊 (Features)
   ====================================================== */

/* 目錄 (TOC) */
#TableOfContents, #TOC {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
}

@media screen and (min-width: 768px) {
    #table-of-contents {
        position: fixed;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        background-color: var(--bg-color);
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        width: 250px;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* 首頁搜尋框 */
.hp-search-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 70vh;
    margin: -5vh auto 0;
    width: 100%;             /* 置中關鍵：確保容器橫跨整個螢幕寬度 */
}

.hp-search-input {
    width: min(90vw, 500px);
    padding: 12px 20px;
    margin: 0 auto;
    font-size: 1.2rem;
    border: 2px solid var(--text-color);
    background: transparent;
    color: inherit;
    border-radius: 5px;
    outline: none;
    display: block;          /* 確保 margin auto 生效 */
}

/* 留言板 */
.guestbook-link { font-weight: bold; color: var(--guestbook-link) !important; }

/* 閃爍動畫 */
.thought-cursor { color: var(--link-color); animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ======================================================
   6. 程式碼與引用 (Code & Blockquote)
   ====================================================== */
code {
    background-color: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

pre {
    border: 2px solid #c8ebc3;
    padding: 1em;
    overflow-x: auto;
}

blockquote {
    background: var(--quote-bg);
    border-left: 5px solid #ccc;
    padding: 3px 1em;
}

/* 表格 */
table { margin: auto; border-top: 1px solid var(--border-color); width: 100%; }
th, td { padding: 5px; text-align: left; }
tr:nth-child(even) { background: var(--table-even); }

/* ======================================================
   文章統計數據 (Site Stats)、最近想什麼（） - 置中修正
   ====================================================== */
.site-stats {
    display: flex;          /* 開啟彈性佈局 */
    justify-content: center; /* 水平居中所有內容 */
    align-items: center;     /* 垂直居中 */
    flex-wrap: wrap;         /* 寬度不夠時自動換行（手機版） */
    
    width: 100%;            /* 確保容器佔滿全寬 */
    margin: 1px auto;      /* 上下留白，左右自動居中 */
    font-family: monospace;
    font-size: 0.9em;
    text-align: center;
}

/* 統計數據間的斜線分隔符 */
.site-stats .divider {
    margin: 0 15px;
    opacity: 0.3;
}

/* 最近想什麼 (Latest Thought) - 置中修正 */
.hp-latest-thought {
    width: 100%;            /* 關鍵：佔滿寬度 */
    text-align: center;     /* 文字居中 */
    margin: 0px auto;
    font-size: 1rem;
    letter-spacing: 0.5px;
}