/* roulang page: index */
:root{
  --bloom:#b0485f;
  --bloom-d:#8a324b;
  --gild:#c19a58;
  --paper:#fdf8f5;
  --card:#ffffff;
  --ink:#2b2228;
  --mute:#6d5f66;
  --line:#ebdfd9;
  --rlg:18px;
  --rsm:11px;
  --sh:0 14px 34px rgba(94,44,62,.10);
  --sec:clamp(46px,6.5vw,84px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.75;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--bloom);outline-offset:3px}

.cczxttkd-wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- 顶栏 ---------- */
.cczxttkd-top{position:sticky;top:0;z-index:60;background:rgba(253,248,245,.92);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cczxttkd-topin{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px}
.cczxttkd-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:.05em;white-space:nowrap}
.cczxttkd-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(140deg,var(--bloom),var(--gild));color:#fff;font-size:17px;font-weight:700;box-shadow:0 6px 16px rgba(176,72,95,.28)}
.cczxttkd-nav{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.cczxttkd-nav::-webkit-scrollbar{display:none}
.cczxttkd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;color:var(--mute);white-space:nowrap}
.cczxttkd-nav a:hover{color:var(--bloom);background:rgba(176,72,95,.08)}

/* ---------- 首屏 ---------- */
.cczxttkd-hero{position:relative;overflow:hidden;color:#fff;background:#2b2228 url("/assets/images/backpic/back-1.webp") center/cover no-repeat}
.cczxttkd-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(45,17,29,.92) 0%,rgba(45,17,29,.64) 48%,rgba(45,17,29,.32) 100%)}
.cczxttkd-heroin{position:relative;padding:clamp(56px,9vw,104px) 0 clamp(50px,8vw,92px)}
.cczxttkd-kicker{display:inline-flex;align-items:center;padding:6px 15px;border:1px solid rgba(255,255,255,.34);border-radius:999px;font-size:13px;letter-spacing:.16em;color:#f6ddbd}
.cczxttkd-hero h1{margin-top:22px;font-size:clamp(34px,6vw,60px);line-height:1.14;letter-spacing:.06em;font-weight:800}
.cczxttkd-hero h1 em{font-style:normal;color:#f0c489}
.cczxttkd-lede{margin-top:20px;max-width:56ch;font-size:16px;line-height:1.9;color:rgba(255,255,255,.86)}
.cczxttkd-points{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;max-width:780px}
.cczxttkd-points li{position:relative;padding-left:24px;font-size:15px;color:rgba(255,255,255,.9)}
.cczxttkd-points li::before{content:"";position:absolute;left:0;top:.74em;width:9px;height:9px;border-radius:50%;background:var(--gild)}
.cczxttkd-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.cczxttkd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;border:1px solid transparent;background:var(--bloom);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:transform .24s ease,background .24s ease,box-shadow .24s ease}
.cczxttkd-btn:hover{background:var(--bloom-d);transform:translateY(-2px);box-shadow:0 12px 24px rgba(138,50,75,.28)}
.cczxttkd-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.cczxttkd-ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.cczxttkd-trust{margin-top:26px;font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.68)}

/* ---------- 通用板块 ---------- */
.cczxttkd-sec{padding:var(--sec) 0}
.cczxttkd-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cczxttkd-head{max-width:780px;margin-bottom:clamp(26px,4vw,40px)}
.cczxttkd-h2{font-size:clamp(22px,3vw,30px);line-height:1.32;letter-spacing:.03em;font-weight:800}
.cczxttkd-h2 span{color:var(--bloom)}
.cczxttkd-sub{margin-top:12px;font-size:15px;line-height:1.85;color:var(--mute)}

/* ---------- 题材分类 ---------- */
.cczxttkd-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cczxttkd-cat{padding:22px 22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--rlg);transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease}
.cczxttkd-cat:hover{transform:translateY(-3px);border-color:rgba(176,72,95,.4);box-shadow:var(--sh)}
.cczxttkd-cat h3{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:.02em}
.cczxttkd-cat h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--gild)}
.cczxttkd-cat p{margin-top:9px;font-size:14px;line-height:1.8;color:var(--mute)}

/* ---------- 卡片 ---------- */
.cczxttkd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cczxttkd-card{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--rlg);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.cczxttkd-card:hover{transform:translateY(-4px);border-color:rgba(176,72,95,.34);box-shadow:var(--sh)}
.cczxttkd-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f0e5e0}
.cczxttkd-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cczxttkd-card:hover .cczxttkd-thumb img{transform:scale(1.06)}
.cczxttkd-tag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;background:rgba(31,17,24,.74);color:#fff;font-size:12px;letter-spacing:.05em}
.cczxttkd-cardbody{display:flex;flex-direction:column;gap:7px;padding:16px 18px 20px}
.cczxttkd-name{font-size:17px;font-weight:700;letter-spacing:.02em}
.cczxttkd-note{font-size:14px;line-height:1.7;color:var(--mute)}

/* ---------- 榜单 ---------- */
.cczxttkd-rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;counter-reset:cczrank}
.cczxttkd-rank li{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--rsm);transition:background .22s ease,border-color .22s ease}
.cczxttkd-rank li:hover{background:#fffaf7;border-color:rgba(176,72,95,.4)}
.cczxttkd-rank li::before{counter-increment:cczrank;content:counter(cczrank);flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(176,72,95,.1);color:var(--bloom);font-size:13px;font-weight:700}
.cczxttkd-rank b{font-size:15px;font-weight:600}
.cczxttkd-rank span{margin-left:auto;font-size:13px;color:var(--gild);white-space:nowrap}

/* ---------- 题材分区 ---------- */
.cczxttkd-genre{padding:20px 22px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--rlg)}
.cczxttkd-genre + .cczxttkd-genre{margin-top:16px}
.cczxttkd-genre h3{font-size:16px;font-weight:700;color:var(--bloom);letter-spacing:.03em}
.cczxttkd-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cczxttkd-chip{padding:6px 15px;border-radius:999px;background:#faf2ee;border:1px solid #f0e1d9;font-size:14px;color:#5c4a52}

/* ---------- 主题专题 ---------- */
.cczxttkd-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cczxttkd-theme{padding:26px 24px;border-radius:var(--rlg);background:linear-gradient(150deg,#ffffff 0%,#fbf0ea 100%);border:1px solid var(--line);transition:transform .26s ease,box-shadow .26s ease}
.cczxttkd-theme:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.cczxttkd-theme h3{font-size:18px;font-weight:800;letter-spacing:.03em}
.cczxttkd-theme p{margin-top:10px;font-size:14px;line-height:1.8;color:var(--mute)}
.cczxttkd-theme i{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:rgba(193,154,88,.16);color:#8a6a2f;font-size:13px;font-style:normal}

/* ---------- 资讯 ---------- */
.cczxttkd-news li{padding:15px 4px;border-bottom:1px solid var(--line);transition:padding .22s ease,color .22s ease}
.cczxttkd-news li:first-child{border-top:1px solid var(--line)}
.cczxttkd-news li:hover{padding-left:10px;color:var(--bloom)}
.cczxttkd-news a{display:flex;align-items:baseline;gap:16px}
.cczxttkd-when{flex:0 0 auto;min-width:52px;font-size:13px;color:var(--gild)}
.cczxttkd-news p{font-size:15px;line-height:1.7}

/* ---------- 观众点评 ---------- */
.cczxttkd-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cczxttkd-voice{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--rlg)}
.cczxttkd-voice p{font-size:15px;line-height:1.85;color:#4a3d43}
.cczxttkd-voice span{display:block;margin-top:14px;font-size:13px;color:var(--mute)}

/* ---------- 问答 ---------- */
.cczxttkd-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.cczxttkd-qa{padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--rlg)}
.cczxttkd-qa h3{font-size:16px;font-weight:700;letter-spacing:.02em}
.cczxttkd-qa p{margin-top:9px;font-size:14px;line-height:1.85;color:var(--mute)}

/* ---------- 收口 ---------- */
.cczxttkd-final{padding:clamp(32px,5vw,54px);text-align:center;color:#fff;border-radius:24px;background:linear-gradient(120deg,#3a1f2b,#7c3450)}
.cczxttkd-final h2{font-size:clamp(21px,3vw,28px);letter-spacing:.04em}
.cczxttkd-final p{max-width:52ch;margin:12px auto 24px;font-size:15px;line-height:1.85;color:rgba(255,255,255,.82)}
.cczxttkd-final .cczxttkd-btn{background:var(--gild);color:#3a1f2b}
.cczxttkd-final .cczxttkd-btn:hover{background:#d8b478;box-shadow:0 12px 24px rgba(0,0,0,.22)}

/* ---------- 页脚 ---------- */
.cczxttkd-foot{background:#2b2228;color:#cfc1c7;padding:clamp(38px,6vw,64px) 0 0}
.cczxttkd-footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.cczxttkd-foot h3{margin-bottom:14px;font-size:15px;color:#fff;letter-spacing:.06em}
.cczxttkd-foot p,.cczxttkd-foot a,.cczxttkd-foot li{font-size:14px;line-height:1.9}
.cczxttkd-foot a:hover{color:#f0c489}
.cczxttkd-foot li{padding:3px 0}
.cczxttkd-copy{margin-top:clamp(28px,4vw,44px);padding:18px 0;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:13px;color:#9d8f95}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .cczxttkd-cats,.cczxttkd-cards,.cczxttkd-themes,.cczxttkd-voices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cczxttkd-rank,.cczxttkd-faq{grid-template-columns:1fr}
  .cczxttkd-footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .cczxttkd-topin{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0}
  .cczxttkd-nav{width:100%}
  .cczxttkd-points{grid-template-columns:1fr}
  .cczxttkd-heroin{padding:48px 0 52px}
  .cczxttkd-lede{font-size:15px}
  .cczxttkd-cta{gap:10px}
  .cczxttkd-btn{min-height:46px;padding:0 22px}
}
@media (max-width:520px){
  body{font-size:15px}
  .cczxttkd-cats,.cczxttkd-cards,.cczxttkd-themes,.cczxttkd-voices,.cczxttkd-footgrid{grid-template-columns:1fr}
  .cczxttkd-hero h1{letter-spacing:.03em}
  .cczxttkd-news a{flex-direction:column;gap:2px}
  .cczxttkd-news p{font-size:14px}
}