/* 1) 基础重置与主题 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root{
    --bg: #f6f7f9;
    --card: #ffffff;
    --text: #1f2328;
    --muted: #6e7781;
    --accent: #8c5e3c;
    --ring: rgba(140,94,60,.25);
    --shadow: 0 6px 24px rgba(0,0,0,.06);
    --btn-grad-a: #8c5e3c;
    --btn-grad-b: #a06d4a;

    --tap-hl: rgba(140,94,60,.15);
}

body{
    margin:0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
}

img{ display:block; max-width:100%; height:auto; }
button, input{ font: inherit; }
* { -webkit-tap-highlight-color: var(--tap-hl); }

@media (prefers-reduced-motion: reduce){
    * { transition: none !important; animation: none !important; }
}

/* 2) 布局容器 */
.wrapper{
    min-height: 100dvh;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.container{
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.card{
    background: var(--card);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 14px;
}

/* 3) 内容区块 */
.image-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f2f3f5;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.text{
    font-size: clamp(16px, 3.8vw, 18px);
    line-height: 1.7;
    letter-spacing: .1px;
    margin: 6px 2px 12px;
    color: var(--text);
    white-space: pre-wrap;
}

/* 4) 分页区：统一垂直栈 + 底部贴合 + 居中 */
.pager {
    position: sticky;
    bottom: 0;
    z-index: 10;

    display: flex;
    flex-direction: column;      /* 垂直堆叠三个模块 */
    align-items: center;         /* 模块本身居中 */
    gap: 8px;

    padding: 10px 12px;
    margin-top: 16px;

    max-width: 560px;
    margin-left: auto;
    margin-right: auto;

    background: linear-gradient(to right, #fdf6f0, #ffffff);
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    backdrop-filter: blur(6px);

    text-align: center;          /* 关键：让内部 inline/inline-flex 元素可被居中 */
}

/* 4.1 上一页 / 下一页按钮行：稳居中并排 */
.btn-group {
    display: inline-flex;        /* 关键：用 inline-flex，让其本身可被 text-align 居中 */
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* 4.2 按钮样式（紧凑但易点） */
.btn {
    display: inline-flex;        /* 确保内容垂直水平居中 */
    align-items: center;
    justify-content: center;

    padding: 6px 10px;
    font-size: 14px;
    min-width: 88px;
    height: 34px;

    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--btn-grad-a), var(--btn-grad-b));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 4.3 当前页码与跳转 */
.page-info {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.3px;
}

.page-jump {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: #444;
    justify-content: center;
}
.page-jump input[type="number"] {
    width: 60px;
    height: 32px;
    padding: 0 6px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 14px;
}
.page-jump button {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--btn-grad-a), var(--btn-grad-b));
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* 5) 平板增强（≥768px） */
@media (min-width: 768px){
    .wrapper{ padding: 24px; }
    .card{ padding: 18px; border-radius: 16px; }

    .image-box{ border-radius: 12px; }
    .text{ font-size: clamp(17px, 1.2vw, 19px); line-height: 1.75; }

    .pager{
        padding: 12px 14px;
        border-radius: 14px;
        max-width: 640px;
    }
    .btn-group{ gap: 12px; }
}

/* 6) 桌面增强（≥1024px） */
@media (min-width: 1024px){
    .card{ padding: 22px; }
    .text{ font-size: clamp(18px, .95vw, 20px); }

    .image-box{
        max-width: 560px;
        margin: 0 auto 12px;
    }

    /* 保持垂直栈与居中，不再切换为 grid */
    .pager{
        max-width: 560px;
        gap: 10px;
    }
    .page-info{ font-size: 15px; }
}