/* ==========================================================================
   日本漫画 APP 落地页 — 全部样式本地化
   视觉语言：暖纸奶油底 + 墨黑 + 绯红点缀的杂志风
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 配色体系 */
    --bg: #fdf9f0;              /* 奶油纸底 */
    --paper: #ffffff;           /* 内容卡纸 */
    --ink: #111111;             /* 报纸墨黑 */
    --ink-soft: #1c1c1c;        /* 次级文字 */
    --muted: #222222;           /* 说明文字 */
    --faint: #2e2e2e;           /* 弱化文字 */
    --accent: #9d2933;          /* 绯红主强调 */
    --accent-deep: #7d2029;     /* 绯红加深 */
    --accent-wash: #f6e7e5;     /* 绯红浅染 */
    --line: #eeeeee;            /* 细分割线 */
    --line-warm: #e6e0d2;       /* 暖色边框 */

    /* 字体体系 */
    --font-display: "Arial Black", "Arial Rounded MT Bold", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft YaHei", sans-serif;
    --font-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    --font-body: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft YaHei", sans-serif;

    /* 尺寸与布局 */
    --nav-h: 56px;
    --maxw: 800px;
    --radius: 6px;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.06);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 18px);
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0 1px, transparent 1px 3px);
    color: var(--ink);
    line-height: 1.8;
    font-size: 16px;
    padding: calc(var(--nav-h) + 12px) 10px 10px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 容器：杂志卡片 */
.container {
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    background: var(--paper);
    padding: 20px 25px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
}

/* ---------- 3. 顶部固定导航 ---------- */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 100;
    background: rgba(253, 249, 240, 0.94);
    border-bottom: 1px solid var(--line-warm);
    backdrop-filter: blur(8px);
    transition: box-shadow 0.3s var(--ease);
}
.topnav.scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); }

.topnav-inner {
    max-width: var(--maxw);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 品牌 */
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
    padding: 6px 2px;
}
.brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.brand-en {
    font-size: 10px;
    font-weight: 400;
    color: var(--faint);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 导航链接 */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav-links a {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:hover { color: var(--accent); background: var(--accent-wash); }
.nav-links a.active { color: var(--accent); font-weight: 600; }

/* 导航下载按钮 */
.btn-nav {
    flex-shrink: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 5px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-nav:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* ---------- 4. 杂志报头 ---------- */
.hero {
    text-align: center;
    padding: 30px 0 20px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 22px;
}
.magazine-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 8vw, 48px);
    font-weight: bold;
    letter-spacing: clamp(5px, 2vw, 10px);
    color: var(--ink);
    margin-bottom: 8px;
}
.magazine-subtitle {
    font-size: clamp(13px, 3vw, 17px);
    font-style: italic;
    color: var(--muted);
    margin-bottom: 12px;
    letter-spacing: 2px;
}
.issue-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 26px;
    font-size: 12px;
    color: var(--faint);
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

/* ---------- 5. 卷首语 ---------- */
.introduction {
    text-align: center;
    font-size: clamp(14px, 3vw, 17px);
    line-height: 2;
    margin-bottom: 26px;
    color: var(--muted);
    font-weight: 400;
}
.introduction em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
}
.hero-cta {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* 通用按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 2px solid var(--ink);
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: all 0.25s var(--ease);
}
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-2px); }
.btn-ghost {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* ---------- 6. 平台数据 ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 34px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat-item { text-align: center; padding: 6px 4px; }
.stat-num {
    font-family: var(--font-serif);
    font-size: clamp(24px, 6vw, 34px);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.stat-label {
    font-size: 12px;
    color: var(--faint);
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ---------- 7. 区块通用 ---------- */
.section { margin: 0 0 34px; }
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 12px;
}
.section-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    background: var(--accent);
    margin: 10px auto 0;
}
.section-lead {
    text-align: center;
    font-size: 14px;
    color: var(--faint);
    margin: 12px 0 22px;
}

/* ---------- 8. 特集内容网格 ---------- */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 8px;
}
.content-item {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.content-item:hover {
    border-color: var(--line-warm);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}
.content-title {
    font-family: var(--font-serif);
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ink);
    letter-spacing: 1px;
}
.content-title::before {
    content: "◆ ";
    color: var(--accent);
    font-size: 0.8em;
}
.content-text {
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink-soft);
    font-weight: 400;
    text-align: justify;
}

/* ---------- 9. 分割线 ---------- */
.divider {
    height: 1px;
    background: var(--line);
    margin: 26px 0;
    text-align: center;
}
.divider-text {
    background: var(--paper);
    padding: 0 15px;
    color: var(--faint);
    font-size: 12px;
    letter-spacing: 3px;
    position: relative;
    top: -10px;
}

/* ---------- 10. 作品展示墙 ---------- */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.cover-card {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.cover-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
}
.cover-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: #f1ece1;
}
.cover-card figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}
.cover-title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.cover-tag {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-wash);
    border: 1px solid rgba(157, 41, 51, 0.25);
    padding: 2px 9px;
    border-radius: 999px;
}

/* ---------- 11. 核心功能卡片 ---------- */
.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.feature-card {
    padding: 20px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.feature-card:hover {
    border-color: var(--line-warm);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}
.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--accent-wash);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.feature-text {
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted);
}

/* ---------- 12. 读者来信 ---------- */
.reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.review-card {
    position: relative;
    margin: 0;
    padding: 18px 18px 14px 62px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.review-card:hover {
    border-color: var(--line-warm);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}
.avatar {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-serif);
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-a { background: #9d2933; }
.avatar-b { background: #b0713c; }
.avatar-c { background: #6f7d2f; }
.avatar-d { background: #3f6f8f; }
.avatar-e { background: #8f4f7f; }
.avatar-f { background: #5f6f7f; }
.review-text {
    font-size: 14px;
    line-height: 1.85;
    color: var(--ink-soft);
}
.review-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--faint);
    font-style: normal;
}
.review-meta::before { content: "—— "; }

/* ---------- 13. 更新日志时间轴 ---------- */
.timeline {
    --date: 96px;
    --axis: 22px;
    --gap: 10px;
    display: grid;
    grid-template-columns: var(--date) var(--axis) 1fr;
    gap: 0 var(--gap);
    margin-top: 6px;
    position: relative;
}
/* 轴线：与圆点共用同一组列宽变量，中心精确对齐 */
.timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: calc(var(--date) + var(--gap) + var(--axis) / 2 - 1px);
    width: 2px;
    background: var(--line);
}
.timeline-row {
    display: contents;
}
.timeline-time {
    padding: 4px 0 0 2px;
    font-size: 13px;
    color: var(--faint);
    font-family: var(--font-serif);
    text-align: right;
    line-height: 1.6;
}
.timeline-dot {
    justify-self: center;
    align-self: start;
    width: 14px;
    height: 14px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--accent);
}
.timeline-content {
    padding: 0 0 24px;
}
.timeline-row:last-child .timeline-content { padding-bottom: 0; }
.timeline-version {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.timeline-list {
    list-style: none;
}
.timeline-list li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.9;
}
.timeline-list li::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: var(--accent);
    font-weight: 700;
}

/* ---------- 14. 常见问题（折叠） ---------- */
.faq {
    border-top: 1px solid var(--line);
}
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 4px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
}
.faq-a p {
    padding: 0 4px 16px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--muted);
}

/* ---------- 15. 下载区域 ---------- */
.download-box {
    text-align: center;
    padding: 26px 18px;
    background: #f3eee2;
    margin: 10px 0 30px;
    border: 1px dashed var(--line-warm);
    border-radius: var(--radius);
}
.download-title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--ink);
}
.download-desc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px;
}
.download-version {
    display: inline-block;
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-wash);
    border: 1px solid rgba(157, 41, 51, 0.25);
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.download-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.download-note {
    font-size: 12px;
    color: var(--faint);
}

/* ---------- 16. 页脚 ---------- */
.footer {
    text-align: center;
    padding: 18px 0 6px;
    color: var(--faint);
    font-size: 12px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
    line-height: 1.8;
}
.footer-site {
    font-weight: 600;
    color: var(--muted);
}
.footer-links a {
    font-size: inherit;
    color: var(--faint);
    text-decoration: none;
    margin: 0 6px;
    transition: color 0.2s var(--ease);
}
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-disclaimer { font-size: 11px; }
.footer-copy { font-size: 11px; }

/* ---------- 17. 返回顶部悬浮球 ---------- */
.to-top {
    position: fixed;
    right: 18px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(157, 41, 51, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.2s var(--ease);
    z-index: 99;
}
.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.to-top:hover { background: var(--accent-deep); }

/* ---------- 18. 滚动揭示动画 ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 网格内错峰揭示 */
.content-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.content-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.content-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.features .reveal:nth-child(2) { transition-delay: 0.06s; }
.features .reveal:nth-child(3) { transition-delay: 0.12s; }
.features .reveal:nth-child(4) { transition-delay: 0.18s; }
.features .reveal:nth-child(5) { transition-delay: 0.24s; }
.features .reveal:nth-child(6) { transition-delay: 0.30s; }
.reviews .reveal:nth-child(2) { transition-delay: 0.06s; }
.reviews .reveal:nth-child(3) { transition-delay: 0.12s; }
.reviews .reveal:nth-child(4) { transition-delay: 0.18s; }
.reviews .reveal:nth-child(5) { transition-delay: 0.24s; }
.reviews .reveal:nth-child(6) { transition-delay: 0.30s; }
.gallery .reveal:nth-child(2) { transition-delay: 0.08s; }
.gallery .reveal:nth-child(3) { transition-delay: 0.16s; }
.gallery .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- 19. 移动端导航：仅保留品牌与下载按钮 ---------- */
@media (max-width: 767px) {
    .nav-links { display: none; }
}

/* ---------- 20. 平板及以上 ---------- */
@media (min-width: 768px) {
    :root { --nav-h: 64px; }
    body { padding: calc(var(--nav-h) + 20px) 20px 24px; }
    .container { padding: 36px 46px; }
    .hero { padding: 48px 0 36px; margin-bottom: 34px; }
    .issue-info { font-size: 14px; justify-content: space-between; }
    .introduction { margin-bottom: 34px; }
    .stats { gap: 16px; margin-bottom: 42px; padding: 26px 0; grid-template-columns: repeat(4, 1fr); }
    .section { margin-bottom: 42px; }
    .content-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .content-item { padding: 20px 22px; }
    .gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .features { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .reviews { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .timeline { --date: 120px; --axis: 24px; }
    .divider { margin: 34px 0; }
    .download-box { padding: 38px 26px; margin: 14px 0 40px; }
    .footer { padding: 26px 0 10px; font-size: 13px; }
}

/* ---------- 21. 桌面大屏 ---------- */
@media (min-width: 1024px) {
    .gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .to-top { right: 30px; bottom: 30px; }
}

/* ---------- 22. 弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .reveal.visible { transition: none; }
}