/* --- Global Variables --- */
:root {
    --bg-color: #0b0b0d;       /* 統一用 index 的極深黑 */
    --card-bg: #141416;
    --text-main: #d1d1d1;
    --text-muted: #888;
    --accent-color: #d4af37;   /* 刀鋒金 */
    --accent-glow: rgba(212, 175, 55, 0.3);
    --link-color: #64b5f6;
    --border: #333;
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-body: 'Noto Serif TC', "Songti TC", serif;
}

/* --- Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* --- Navigation (Global) --- */
nav {
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(11,11,13, 0.95); /* 輕微透明背景 */
    position: sticky; /* 讓導航欄吸頂 */
    top: 0;
    z-index: 100;
}
.logo { font-size: 1.5rem; font-weight: 900; color: var(--accent-color); letter-spacing: 2px; }
.nav-links a { margin-left: 20px; font-size: 0.9rem; color: var(--text-main); opacity: 0.8; }
.nav-links a:hover { opacity: 1; color: var(--accent-color); }

/* --- Buttons --- */
.btn-outline {
    padding: 8px 16px;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 0.9rem;
}
.btn-outline:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* --- Blog Specific Images (Mobile Screenshot Fix) --- */
/* 核心修改：限制圖片最大寬度，避免手機截圖佔滿屏幕 */
figure {
    margin: 40px 0;
    text-align: center;
    background: #1a1a1a; /* 圖片背景框，增加質感 */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
}
figure img {
    max-width: 100%;       /* 手機上自動縮放 */
    width: 320px;          /* 電腦上限制寬度為手機標準寬 */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #444;
}
figcaption {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 15px;
    font-style: italic;
}

/* --- Typography & Layout --- */
.container { max-width: 720px; margin: 0 auto; padding: 40px 20px; }
h1 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; color: #fff; line-height: 1.3; }
h2 { font-family: var(--font-heading); font-size: 1.6rem; margin-top: 50px; margin-bottom: 20px; color: #fff; border-left: 4px solid var(--accent-color); padding-left: 15px; }
h3 { font-family: var(--font-heading); font-size: 1.25rem; margin-top: 30px; margin-bottom: 15px; color: #eee; }
p { margin-bottom: 24px; font-size: 1.05rem; }
.meta-info { font-family: var(--font-heading); color: var(--text-muted); font-size: 0.9rem; margin-bottom: 40px; }
.category-tag { color: var(--accent-color); font-weight: bold; font-size: 0.85rem; text-transform: uppercase; display: block; margin-bottom: 10px; }

/* --- CTA Box --- */
.cta-box {
    background: linear-gradient(145deg, #1e1e1e, #252525);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px;
    margin: 60px 0 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: #0b0b0d;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 6px;
    margin-top: 20px;
}
.cta-button:hover { background-color: #f0c950; transform: translateY(-2px); }

/* --- Footer --- */
footer { border-top: 1px solid #333; padding-top: 40px; margin-top: 80px; text-align: center; font-size: 0.85rem; color: var(--text-muted); }

/* --- Code Highlight --- */
code { background-color: #2d2d2d; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #ff9e64; }
.highlight { color: var(--accent-color); }