/* 自定义样式 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

/* 隐藏滚动条但保留功能 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* iOS 底部安全区域适配 */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- 阅读器主题系统 --- */

/* 基础过渡：让切换不生硬 */
.reader-container-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 1. 亮色模式 (Light) - 经典 */
.theme-light {
    background-color: #ffffff !important;
    color: #1f2937 !important; /* gray-800 */
}
/* 针对亮色模式下的二级文字 */
.theme-light .reader-meta {
    color: #6b7280; /* gray-500 */
}

/* 2. 羊皮纸模式 (Sepia) - 护眼 */
.theme-sepia {
    background-color: #f6f1e1 !important; /* 更柔和的米色 */
    color: #4e342e !important; /* 深棕色文字 */
}
.theme-sepia .reader-meta {
    color: #8d6e63;
}

/* 3. 暗色模式 (Dark) - 夜间 */
.theme-dark {
    background-color: #121212 !important; /* 纯黑太刺眼，用深灰 */
    color: #a8a8a8 !important; /* 浅灰文字，降低对比度防刺眼 */
}
.theme-dark .reader-meta {
    color: #666666;
}

/* 修复图片在暗色模式下太亮的问题 */
.theme-dark img {
    opacity: 0.8; /* 稍微降低亮度 */
    filter: grayscale(30%); /* 降低饱和度 */
}

/* 覆盖加载中文字的颜色，使其跟随主题 */
.theme-light .loading-text { color: #9ca3af; }
.theme-sepia .loading-text { color: #8d6e63; }
.theme-dark  .loading-text { color: #555555; }
/* 阅读内容样式 */
#reader-container p {
    margin-bottom: 1em;
    text-indent: 2em;
}

/* --- 仿真翻页模式 (完美对齐版) --- */
.reader-pagination {
    /* 1. 容器必须铺满，且无左右 Padding */
    height: 100vh;
    width: 100vw;
    margin: 0;

    /* 关键：容器本身水平方向不能有 padding，否则打乱翻页计算 */
    padding-left: 0;
    padding-right: 0;

    /* 垂直方向可以加 padding，避开顶部刘海和底部下巴 */
    padding-top: 60px;    /* 留出顶部菜单空间 */
    padding-bottom: 60px; /* 留出底部空间 */

    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;

    /* 2. 列宽设为 100vw，间隙设为 0 */
    column-fill: auto;
    column-width: 100vw;
    column-gap: 0;
}

/* 3. 核心修改：将左右留白加在具体的文字元素上 */
.reader-pagination > * {
    /* 这里设置你想要的阅读边距 */
    padding-left: 20px;
    padding-right: 20px;

    /* 保持原有断行逻辑 */
    box-sizing: border-box;
    max-width: 100vw; /* 防止元素撑破 */
}

/* 针对段落的优化 */
.reader-pagination p {
    margin-bottom: 1em;
    text-align: justify; /* 两端对齐更像书 */
    break-inside: avoid; /* 尽量不在段落中间断开 */
}

.reader-pagination p {
    /* 核心：首行缩进 2 个字符 */
    text-indent: 2em;

    /* 保持之前的样式 */
    margin-bottom: 0.8em; /* 段落间距，建议 0.8em - 1em */
    text-align: justify;  /* 两端对齐，配合缩进效果最好 */
    line-height: 1.8;     /* 行高 */

    /* 防止分页截断 */
    break-inside: avoid;

    /* 确保是块级元素 */
    display: block;
}

.reader-pagination h2 {
    text-align: center;
    break-inside: avoid;
    margin-bottom: 2em;
}

.reader-pagination img {
    /* 图片也要有边距，或者你希望图片通栏可以设为 0 */
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    break-inside: avoid;
    display: block;
}

/* 加在包裹点击层的容器上 */
.touch-layer {
    /* 关键：允许垂直滚动(如果有)，但水平滑动交给 JS 处理 */
    /* 这能防止浏览器把你的横滑误判为页面历史的前进后退 */
    touch-action: pan-y;

    /* 防止 iOS Safari 的橡皮筋回弹效果 */
    overscroll-behavior-x: none;

    /* 确保占满全屏 */
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
}