/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    /* 调整为深灰色，而非纯黑 */
    background-color: #1a1c22; 
    color: #d1d5db; /* 略亮的浅灰文字，更易读 */
    font-family: 'serif', 'PingFang SC', 'Microsoft YaHei';
    line-height: 1.6;
    overflow-x: hidden;
background-image: url('../images/bg.png');
background-attachment: fixed;
background-size: cover;
}

/* 营造氛围的朦胧层 - 降低了阴影浓度 */
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 10;
}

header {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 关键调整：深灰色背景，带一点点透明感 */
    background-color: rgba(45, 50, 60, 0.95); 
    border-bottom: 1px solid #374151;
    position: sticky; /* 让导航栏跟随滚动 */
    top: 0;
    z-index: 100;
}

.logo {
    color: #e5c07b; /* 温暖的古铜色 */
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}

nav a {
    color: #9ca3af;
    text-decoration: none;
    margin-left: 25px;
    font-size: 15px;
    transition: 0.3s;
}

nav a:hover { color: #e5c07b; }

/* 主体内容 */
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
    z-index: 5;
}

.hero {
    text-align: center;
    margin-bottom: 60px;
}

.hero h1 {
    font-size: 40px;
    color: #f3f4f6;
    margin-bottom: 15px;
}

.hero p {
    color: #9ca3af;
    font-style: italic;
    font-size: 18px;
}

/* 卡片布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.card {
    /* 卡片颜色比背景稍亮，拉开层次 */
    background: #2d323c; 
    padding: 35px;
    border-radius: 4px;
    border: 1px solid #3f444e;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: #e5c07b;
    transform: translateY(-5px);
    background: #343a46; /* 悬停时稍微变亮 */
}

.card h3 {
    color: #e5c07b;
    margin-bottom: 15px;
    font-size: 20px;
}

.card p {
    font-size: 15px;
    color: #bfc5ce;
    margin-bottom: 25px;
}

.btn {
    display: inline-block;
    color: #e5c07b;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #e5c07b;
    padding: 8px 18px;
    border-radius: 2px;
    transition: 0.3s;
}

.btn:hover {
    background: #e5c07b;
    color: #1a1c22;
}

footer {
    text-align: center;
    padding: 40px;
    color: #6b7280;
    font-size: 13px;
    border-top: 1px solid #2d323c;
}

/* 针对转换后文章内容的排版 */
#output {
    line-height: 1.8;
    text-align: justify; /* 两端对齐，更有书籍感 */
    color: #e0e0e0;
}

#output h1, #output h2 {
    color: #e5c07b;
    margin: 30px 0 20px 0;
    border-left: 4px solid #e5c07b;
    padding-left: 15px;
}

.article-body p {
    margin-bottom: 20px;
    text-indent: 2em !important;
    text-align: justify;
    line-height: 1.8;
}

/* 更加强力的空行捕获 */
.article-body p:empty,
#output p:empty,
.article-body p br:only-child {
    display: block;
    content: "";
    margin-bottom: 1.5em;
    min-height: 1.5em; /* 强制撑开高度 */
}

.article-body p:empty::before, 
#output p:empty::before {
    content: "\00a0"; /* 确保有内容撑开 */
}
#output strong {
    color: #f3f4f6; /* 加粗文字更白一点 */
}

#output img {
    max-width: 100%; /* 防止 Word 里的图片撑破布局 */
    height: auto;
    border: 1px solid #3f444e;
    margin: 20px 0;
}

/* --- 图片位置与尺寸控制 --- */

/* 1. Header 里面的小图：紧跟在禁忌知识后面 */
.header-icon {
    width: 24px;         /* 强制缩小到图标大小 */
    height: 24px;
    vertical-align: middle; /* 与文字对齐 */
    margin-left: 15px;   /* 与左侧文字保持间距 */
    opacity: 0.7;        /* 稍微透明一点，不抢文字风头 */
    object-fit: contain;
}

/* 2. Hero 区域下方的大图容器 */
.hero-image-container {
    margin-top: 30px;    /* 与上方文字的间距 */
    text-align: center;  /* 居中 */
}

.hero-logo {
    width: 200px;        /* 设定一个适合正中的宽度 */
    height: auto;        /* 高度自动等比缩放 */
    filter: drop-shadow(0 0 10px rgba(229, 192, 123, 0.2)); /* 给大图加一点点古铜色微光 */
    object-fit: contain;
}

/* 针对移动端的适配：如果屏幕太小，大图缩小一点 */
@media (max-width: 768px) {
    .hero-logo {
        width: 120px;
    }
}

.avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保照片填满方框且不变形 */
    display: block;
}

/* 图片矩阵容器 */
.evidence-gallery {
    display: flex;
    gap: 15px; /* 图片间距 */
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #4b5563; /* 增加一条虚线分割线 */
}

/* 单个图片容器 */
.evidence-item {
    flex: 1;
    text-align: center;
}

/* 图片缩放逻辑 */
.evidence-item img {
    width: 100%;
    height: 200px; /* 固定高度，确保对齐 */
    object-fit: cover; /* 自动裁切以填充高度，不拉伸 */
    filter: grayscale(30%); /* 稍微降低饱和度，增加胶片感 */
    border: 1px solid #3f3f46;
    transition: all 0.3s ease;
}

.evidence-item img:hover {
    filter: grayscale(0%);
    border-color: #e5c07b; /* 悬停时显示你导航条的金黄色 */
}

/* 图片注释说明 */
.evidence-caption {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
    font-family: "Courier New", Courier, monospace; /* 使用等宽字体增强科技感 */
}

/* 手机端自动切换为竖排 */
@media (max-width: 768px) {
    .evidence-gallery {
        flex-direction: column;
    }
    .evidence-item img {
        height: auto;
    }
}

/* 针对侧边栏封面图的专门调整 */
.sidebar-cover {
    width: 100%;          /* 强制宽度等于侧边栏容器宽度 */
    max-width: 210px;    /* 考虑到侧边栏有 padding，设为 210px 左右比较合适 */
    height: auto;         /* 高度自动缩放，保持原图比例 */
    display: block;
    margin: 0 auto 20px; /* 居中并与下方的目录保持间距 */
    border: 1px solid #3f444e;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}