/* roulang page: index */
:root{
  --clay:#d94f2b;
  --ink:#16232b;
  --paper:#f6f3ee;
  --txt:#1a1d21;
  --dim:#6b7076;
  --edge:#e3ded5;
  --r:14px;
  --shadow:0 8px 26px rgba(22,35,43,.09);
  --gap:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--paper);color:var(--txt);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.75}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(217,79,43,.55);outline-offset:2px}

.znswkghp-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}

/* 顶部骨架 */
.znswkghp-hd{position:sticky;top:0;z-index:30;background:rgba(246,243,238,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.znswkghp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;min-height:66px;padding-top:8px;padding-bottom:8px}
.znswkghp-logo{display:flex;align-items:center;gap:10px;min-height:44px}
.znswkghp-square{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:linear-gradient(135deg,var(--clay),#f0873f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;letter-spacing:-.5px}
.znswkghp-brand{font-size:15.5px;font-weight:800;line-height:1.25;letter-spacing:.3px}
.znswkghp-sub{display:block;font-size:11px;font-weight:500;color:var(--dim);letter-spacing:.6px}
.znswkghp-nav{width:100%;overflow-x:auto;scrollbar-width:none}
.znswkghp-nav::-webkit-scrollbar{display:none}
.znswkghp-nav ul{display:flex;gap:2px;padding-bottom:4px}
.znswkghp-nav a{display:block;padding:11px 12px;min-height:44px;font-size:14px;color:var(--dim);border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.znswkghp-nav a:hover{color:var(--clay);background:rgba(217,79,43,.09)}

/* 首屏 */
.znswkghp-hero{position:relative;color:#fff;background:var(--ink) url("/assets/images/backpic/back-1.webp") center/cover no-repeat;overflow:hidden}
.znswkghp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(12,21,27,.88),rgba(12,21,27,.95))}
.znswkghp-hero-in{position:relative;display:grid;gap:26px;padding:38px 0 40px}
.znswkghp-eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;color:#ffb27a;border:1px solid rgba(255,178,122,.4);border-radius:999px;padding:3px 12px;margin-bottom:14px}
.znswkghp-hero h1{font-size:28px;line-height:1.3;font-weight:800;letter-spacing:.5px}
.znswkghp-hero h1 em{font-style:normal;color:#ffb27a}
.znswkghp-hero-txt p{margin-top:16px;font-size:14.5px;line-height:1.85;color:#cfd7dc;max-width:34em}
.znswkghp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.znswkghp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s}
.znswkghp-btn-main{background:var(--clay);color:#fff;box-shadow:0 10px 22px rgba(217,79,43,.3)}
.znswkghp-btn-main:hover{background:#c2431f;transform:translateY(-2px)}
.znswkghp-btn-ghost{border-color:rgba(255,255,255,.38);color:#fff}
.znswkghp-btn-ghost:hover{background:rgba(255,255,255,.12)}
.znswkghp-pick{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:12px}
.znswkghp-pick figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#26333b}
.znswkghp-pick img{width:100%;height:100%;object-fit:cover}
.znswkghp-pick-body{padding:12px 4px 4px}
.znswkghp-pick-body h2{font-size:17px;font-weight:800;letter-spacing:.4px}
.znswkghp-pick-body p{margin-top:6px;font-size:13px;color:#bcc6cc;line-height:1.7}

/* 通用板块 */
.znswkghp-part{padding:44px 0}
.znswkghp-part + .znswkghp-part{border-top:1px solid var(--edge)}
.znswkghp-tint{background:#efeae1}
.znswkghp-sect-head{margin-bottom:22px}
.znswkghp-h2{font-size:21px;font-weight:800;letter-spacing:.4px;display:flex;align-items:center;gap:10px;line-height:1.4}
.znswkghp-h2::before{content:"";width:6px;height:19px;flex:0 0 6px;border-radius:3px;background:var(--clay)}
.znswkghp-lead{margin-top:12px;font-size:14px;line-height:1.85;color:var(--dim);max-width:60em}

/* 卡片 */
.znswkghp-cards{display:grid;gap:var(--gap);grid-template-columns:1fr}
.znswkghp-card{background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;transition:transform .22s,box-shadow .22s}
.znswkghp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.znswkghp-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dcd7ce}
.znswkghp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.znswkghp-card:hover .znswkghp-thumb img{transform:scale(1.05)}
.znswkghp-badge{position:absolute;left:10px;top:10px;padding:2px 9px;border-radius:999px;background:rgba(22,35,43,.82);color:#fff;font-size:12px;letter-spacing:.3px}
.znswkghp-score{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:8px;background:var(--clay);color:#fff;font-size:13px;font-weight:700}
.znswkghp-body{padding:12px 14px 14px}
.znswkghp-title{font-size:15px;font-weight:700;line-height:1.5}
.znswkghp-meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--dim)}

/* 分类频道 */
.znswkghp-chans{display:grid;gap:14px;grid-template-columns:1fr}
.znswkghp-chan{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:18px}
.znswkghp-chan h3{font-size:16px;font-weight:700}
.znswkghp-chan p{margin-top:8px;font-size:13.5px;line-height:1.8;color:var(--dim)}

/* 榜单 */
.znswkghp-rank li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--edge);min-height:44px}
.znswkghp-no{flex:0 0 26px;font-size:15px;font-weight:800;color:#b9b2a7}
.znswkghp-rank li:nth-child(-n+3) .znswkghp-no{color:var(--clay)}
.znswkghp-rankname{flex:1;font-size:14.5px;font-weight:600}
.znswkghp-kind{font-size:12px;color:var(--dim);border:1px solid var(--edge);border-radius:999px;padding:1px 9px}
.znswkghp-rscore{font-size:14px;font-weight:700;color:var(--clay)}

/* 高分 */
.znswkghp-good{display:grid;gap:12px;grid-template-columns:1fr}
.znswkghp-good li{background:#fff;border:1px solid var(--edge);border-left:3px solid var(--clay);border-radius:12px;padding:14px 16px}
.znswkghp-good h3{font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.znswkghp-good h3 span{font-size:13.5px;color:var(--clay);font-weight:700}
.znswkghp-good p{margin-top:6px;font-size:13.5px;line-height:1.75;color:#4c5359}

/* 专题 */
.znswkghp-specials{display:grid;gap:16px;grid-template-columns:1fr}
.znswkghp-special{position:relative;background:var(--ink);color:#fff;border-radius:16px;padding:22px;overflow:hidden}
.znswkghp-special::after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(217,79,43,.28)}
.znswkghp-special h3{position:relative;font-size:17px;font-weight:800}
.znswkghp-special p{position:relative;margin-top:10px;font-size:13.5px;line-height:1.8;color:#c5ced4}
.znswkghp-special em{display:inline-block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:1px;color:#ffb27a}

/* 类型与年代 */
.znswkghp-genres{display:grid;gap:20px;grid-template-columns:1fr}
.znswkghp-genre h3{font-size:16px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--clay);display:inline-block}
.znswkghp-genre li{padding:7px 0;font-size:14px;color:#3b424a;border-bottom:1px solid rgba(22,35,43,.06)}
.znswkghp-genre li:last-child{border-bottom:0}

/* 资讯 */
.znswkghp-news{display:grid;gap:14px;grid-template-columns:1fr}
.znswkghp-news li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--edge);border-radius:14px;padding:10px}
.znswkghp-news img{flex:0 0 104px;width:104px;height:72px;object-fit:cover;border-radius:10px}
.znswkghp-news h3{font-size:14.5px;font-weight:600;line-height:1.55}
.znswkghp-time{margin-top:4px;font-size:12px;color:var(--dim)}

/* 问答 */
.znswkghp-faq{display:grid;gap:12px;grid-template-columns:1fr}
.znswkghp-faq article{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:16px 18px}
.znswkghp-faq h3{font-size:15px;font-weight:700}
.znswkghp-faq p{margin-top:8px;font-size:13.5px;line-height:1.85;color:#4c5359}

/* 页脚 */
.znswkghp-foot{background:var(--ink);color:#c6ced4;padding-top:38px}
.znswkghp-foot-grid{display:grid;gap:26px;padding-bottom:28px;grid-template-columns:1fr}
.znswkghp-foot h3{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}
.znswkghp-foot p{font-size:13.5px;line-height:1.85;color:#a8b3ba}
.znswkghp-foot li{font-size:13.5px;line-height:2}
.znswkghp-foot a:hover{color:#fff}
.znswkghp-copy{border-top:1px solid rgba(255,255,255,.12);padding:14px 0;text-align:center;font-size:12.5px;color:#8b959c}

@media (min-width:520px){
  .znswkghp-cards{grid-template-columns:repeat(2,1fr)}
  .znswkghp-chans{grid-template-columns:repeat(2,1fr)}
  .znswkghp-good{grid-template-columns:repeat(2,1fr)}
  .znswkghp-genres{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  .znswkghp-top{flex-wrap:nowrap;min-height:70px}
  .znswkghp-nav{width:auto;overflow:visible}
  .znswkghp-nav ul{padding-bottom:0}
  .znswkghp-hero h1{font-size:36px}
  .znswkghp-h2{font-size:25px}
  .znswkghp-part{padding:54px 0}
  .znswkghp-cards{grid-template-columns:repeat(3,1fr)}
  .znswkghp-chans{grid-template-columns:repeat(3,1fr)}
  .znswkghp-good{grid-template-columns:repeat(2,1fr)}
  .znswkghp-specials{grid-template-columns:repeat(3,1fr)}
  .znswkghp-news{grid-template-columns:repeat(2,1fr)}
  .znswkghp-faq{grid-template-columns:repeat(2,1fr)}
  .znswkghp-foot-grid{grid-template-columns:1.5fr 1fr 1fr}
  .znswkghp-rank{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
}
@media (min-width:1024px){
  .znswkghp-hero-in{grid-template-columns:1.08fr .92fr;align-items:center;gap:46px;padding:64px 0}
  .znswkghp-hero h1{font-size:44px}
  .znswkghp-good{grid-template-columns:repeat(4,1fr)}
  .znswkghp-genres{grid-template-columns:repeat(4,1fr)}
  .znswkghp-part{padding:60px 0}
}