/* 神魔小说插图资料库 · 共用样式（2026-10-10 多板块改版） */
:root{
  --paper:#f7f2e8; --paper2:#fffdf8; --ink:#2b2622; --ink2:#6b6156;
  --line:#ddd2bd; --accent:#8c6a3f; --accent2:#b08d5a;
  --t1:#8c3b2e; --t2:#2f6b4f; --t3:#3a5a8c; --t4:#7a6a52;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:"Songti SC","SimSun","Noto Serif CJK SC",serif;line-height:1.7}

/* ---- 顶部导航 ---- */
nav.top{background:var(--ink);color:#f3ece0;padding:0 18px;display:flex;flex-wrap:wrap;
        align-items:center;gap:2px;position:sticky;top:0;z-index:40}
nav.top .brand{font-size:15px;letter-spacing:.5px;padding:11px 14px 11px 0;color:#f3ece0;
               border-right:1px solid rgba(255,255,255,.18);margin-right:8px;white-space:nowrap}
nav.top .brand small{display:block;font-size:11px;opacity:.66;letter-spacing:0}
nav.top a{color:#e9e0d2;text-decoration:none;font-size:13.5px;padding:12px 13px;display:block;
          border-bottom:2px solid transparent}
nav.top a:hover{background:rgba(255,255,255,.07)}
nav.top a.on{border-bottom-color:var(--accent2);color:#fff;background:rgba(255,255,255,.05)}
nav.top .spacer{flex:1}
nav.top .ver{font-size:11.5px;opacity:.6;padding-right:6px}

header{padding:30px 24px 20px;border-bottom:1px solid var(--line);background:var(--paper2)}
h1{margin:0 0 6px;font-size:25px;letter-spacing:.5px}
.sub{color:var(--ink2);font-size:14px}
main{max-width:1180px;margin:0 auto;padding:22px 24px 60px}
section{margin-bottom:32px}
h2{font-size:17px;margin:0 0 12px;padding-left:10px;border-left:4px solid var(--accent2)}
h3{font-size:14.5px;margin:16px 0 8px;color:var(--accent)}

.kpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:13px}
.kpi b{font-size:19px;color:var(--accent);margin-right:4px;font-family:Georgia,serif}
.findings{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.finding{background:var(--paper2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-size:13.5px}
.finding h3{margin:0 0 6px;font-size:14px;color:var(--accent)}

/* ---- 板块入口卡 ---- */
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.block{display:block;text-decoration:none;color:inherit;background:var(--paper2);border:1px solid var(--line);
       border-radius:9px;padding:16px 18px;transition:.15s}
.block:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(90,70,40,.14);border-color:var(--accent2)}
.block h3{margin:0 0 4px;font-size:16px;color:var(--ink)}
.block .tagline{font-size:12.5px;color:var(--accent);margin-bottom:8px}
.block p{margin:0;font-size:13px;color:var(--ink2);line-height:1.65}
.block .stat{margin-top:10px;font-size:12px;color:var(--ink2)}
.block.soon{opacity:.62;cursor:default}
.block.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ---- 工具条与筛选 ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--paper2);
         border:1px solid var(--line);border-radius:8px;padding:12px 14px}
select,input,button{font-family:inherit;font-size:13.5px;padding:6px 10px;border:1px solid var(--line);
                    border-radius:5px;background:#fff;color:var(--ink)}
input[type=search]{min-width:190px}
button{cursor:pointer}
button:hover{border-color:var(--accent2)}
.count{margin-left:auto;color:var(--ink2);font-size:13px}
.empty{color:var(--ink2);padding:30px 0;text-align:center}

/* ---- 卡片墙 ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;margin-top:18px}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:8px;overflow:hidden;
      cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(90,70,40,.13);border-color:var(--accent2)}
.card img{width:100%;aspect-ratio:2/3;object-fit:contain;display:block;background:#fffdf7}
.card img.wide{aspect-ratio:2.35/1}   /* 横幅图（如清本"上图下文"的单幅插图） */
.card .body{padding:8px 9px 10px;font-size:12.5px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .no{color:var(--accent);font-size:11.5px;letter-spacing:.5px}
.card .tt{line-height:1.45;min-height:2.6em}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.tag{font-size:11px;padding:1px 6px;border-radius:3px;border:1px solid currentColor;opacity:.9}
.tag.神魔对抗{color:var(--t1)} .tag.神异场景{color:var(--t2)}
.tag.变身幻化{color:var(--t3)} .tag.世俗场景{color:var(--t4)}
.tag.神异{color:#8a6b1f;background:#fdf6e3} .tag.世情{color:#7a736a;background:#f2efe9}
.tag.sj{color:#5a6b7a;background:#eef3f6}
.tag.sm{font-size:10.5px;opacity:.8}

/* ---- 表格 ----
   border-collapse:separate + 单边描边：collapse 模式下 position:sticky 的 th 会丢边框，
   滚动时表头与表体看起来"错位"（v0.5 修）。 */
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--paper2)}
table.data th,table.data td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
                            padding:6px 9px;text-align:left;vertical-align:top}
table.data tr>:first-child{border-left:1px solid var(--line)}
table.data thead tr:first-child th{border-top:1px solid var(--line)}
table.data th{background:var(--paper);color:var(--ink2);font-weight:normal;position:sticky;top:44px;z-index:3}
table.data tr:nth-child(even) td{background:#fdfbf5}
.scroll table.data th{top:0}   /* 表在自己的滚动容器里时，表头贴容器顶（不减去导航高度） */
table.meta{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
table.meta th,table.meta td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
table.meta th{background:var(--paper);width:110px;color:var(--ink2);font-weight:normal}
.scroll{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:8px}

/* ---- 统计图（天象页：用附录「数量（张）」画条形图） ---- */
.chart{background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:14px 18px 16px}
.chart h3{margin:12px 0 8px;font-size:14px;color:var(--accent)}
.chart h3:first-child{margin-top:0}
.crow{display:grid;grid-template-columns:190px 1fr 130px;gap:10px;align-items:center;margin:5px 0;font-size:12.5px}
.clab{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar{display:block;height:15px;background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.cbar i{display:block;height:100%;border-radius:2px 0 0 2px}
.cval{color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.ctotal{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink2)}
.ctotal b{color:var(--accent);font-size:14px}
.cgroup{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);margin:11px 0 5px;
        padding-bottom:3px;border-bottom:1px solid var(--line)}
.cgroup .cdot{width:9px;height:9px;border-radius:2px;display:inline-block}
.cgroup .cgn{margin-left:auto;color:var(--ink2);font-size:12px}
.chartnote{font-size:12.5px;color:var(--ink2);margin:8px 0 0}
.hintline{font-size:12.5px;color:var(--ink2);margin:10px 0 0;line-height:1.7}
.hintline b{color:var(--ink)}
img.apx{width:min(100%,520px);height:auto;border:1px solid var(--line);border-radius:6px;background:#fffdf7;cursor:zoom-in}
@media (max-width:760px){
  .crow{grid-template-columns:118px 1fr 104px;font-size:12px}
}
.cmp.one{grid-template-columns:1fr}
.cmp.one img{width:auto;max-width:100%;display:block;margin:0 auto}

/* ---- 弹层 ---- */
.modal{position:fixed;inset:0;background:rgba(35,28,20,.55);display:flex;align-items:flex-start;
       justify-content:center;padding:26px 16px;overflow:auto;z-index:50}
.modal[hidden]{display:none}
.sheet{background:var(--paper2);border-radius:10px;max-width:1080px;width:100%;padding:22px 24px 26px;
       box-shadow:0 18px 50px rgba(40,30,15,.35)}
.sheet h3{margin:0 0 4px;font-size:19px;color:var(--ink)}
.sheet .mno{color:var(--accent);font-size:13px;letter-spacing:1px}
.close{float:right;border:none;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink2)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0 6px}
.cmp.three{grid-template-columns:1fr 1fr 1fr}
.cmp figure{margin:0}
.cmp img{width:100%;max-height:52vh;object-fit:contain;border:1px solid var(--line);border-radius:6px;
         background:#fffdf7;cursor:zoom-in}
.cmp figcaption{font-size:12.5px;color:var(--ink2);margin-top:7px;line-height:1.6}
.cmp figcaption b{color:var(--ink)}
.src{margin-top:12px;font-size:12px;color:var(--ink2);border-top:1px dashed var(--line);padding-top:10px}

/* ---- 提示条 ---- */
.note{background:#fdf6e3;border:1px solid #e8d9a8;border-radius:8px;padding:12px 15px;font-size:13px;
      color:#6b5a24;margin:0 0 18px}
.note b{color:#8a6b1f}
.muted{color:var(--ink2)}
footer{border-top:1px solid var(--line);background:var(--paper2);padding:22px 24px;font-size:12.5px;color:var(--ink2)}
footer p{margin:6px 0}
a{color:#7a5a2e}
@media (max-width:640px){ .cmp,.cmp.three{grid-template-columns:1fr} .sheet{padding:16px} main{padding:16px} }