/* roulang page: index */
:root{
  --pine:#1F3D2B;
  --toffee:#C8813A;
  --berry:#B5323C;
  --milk:#FBF5EA;
  --sheet:#FFFDF8;
  --sand:#F3E7D3;
  --dim:#6B6257;
  --edge:rgba(31,61,43,.14);
  --rad:14px;
  --rad-s:10px;
  --lift:0 8px 24px rgba(31,61,43,.08);
  --rhythm:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--pine);font:400 16px/1.75 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0}
p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.kkc-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* 顶栏 */
.kkc-head{position:sticky;top:0;z-index:80;background:rgba(251,245,234,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.kkc-head-in{display:flex;align-items:center;gap:16px;min-height:68px}
.kkc-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:16px;font-weight:800}
.kkc-mark{position:relative;width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:repeating-linear-gradient(45deg,var(--toffee) 0 6px,var(--berry) 6px 12px,var(--pine) 12px 18px)}
.kkc-mark::after{content:"饼";position:absolute;inset:0;display:grid;place-items:center;border-radius:9px;background:rgba(31,61,43,.44);color:#fff;font-size:15px;font-weight:800}
.kkc-name{white-space:nowrap}
.kkc-short{display:none}
.kkc-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.kkc-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:15px;color:#4B4338;transition:background .2s,color .2s}
.kkc-nav a:hover{background:var(--sand);color:var(--pine)}
.kkc-nav a:focus-visible{outline:2px solid var(--toffee);outline-offset:2px}
.kkc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:var(--rad-s);background:var(--toffee);color:#2A1806;font-weight:700;font-size:15px;border:1.5px solid var(--toffee);cursor:pointer;transition:background .2s,transform .2s}
.kkc-btn:hover{background:#B06F2C;transform:translateY(-1px)}
.kkc-btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.kkc-btn-ghost{background:transparent;color:var(--pine);border-color:var(--pine)}
.kkc-btn-ghost:hover{background:var(--sand)}
.kkc-btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.kkc-head-cta{margin-left:6px}
.kkc-burger{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:10px;background:transparent;cursor:pointer}
.kkc-burger i{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:var(--pine)}
.kkc-burger i::before,.kkc-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--pine)}
.kkc-burger i::before{top:-6px}
.kkc-burger i::after{top:6px}

/* 首屏 */
.kkc-hero{position:relative;padding:52px 0 68px;background:linear-gradient(180deg,var(--sheet),var(--milk))}
.kkc-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--pine) 0 16px,transparent 16px 22px,var(--toffee) 22px 38px,transparent 38px 44px);opacity:.55}
.kkc-hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.kkc-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--toffee)}
.kkc-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--toffee)}
.kkc-hero h1{margin-top:16px;font-size:clamp(26px,4.4vw,46px)}
.kkc-hl{display:inline-block;padding:0 2px;background:linear-gradient(transparent 72%,rgba(200,129,58,.45) 72%)}
.kkc-sub{margin-top:16px;font-size:17px;font-weight:700;color:var(--toffee)}
.kkc-lead{margin-top:14px;max-width:34em;font-size:15.5px;color:var(--dim)}
.kkc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.kkc-hero-poster{position:relative;width:100%;max-width:392px;margin:0 auto;aspect-ratio:3/4;overflow:hidden;border-radius:16px;background:var(--sand);box-shadow:var(--lift)}
.kkc-hero-poster img{width:100%;height:100%;object-fit:cover}
.kkc-sticker{position:absolute;top:14px;right:14px;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--toffee);border:3px solid var(--sheet);color:#fff;font-size:12.5px;font-weight:800;line-height:1.15;text-align:center;transform:rotate(8deg)}
.kkc-tape{position:absolute;left:-10px;bottom:24px;padding:6px 14px;border-radius:2px;background:rgba(255,253,248,.94);color:var(--pine);font-size:12px;font-weight:800;transform:rotate(-4deg);box-shadow:0 2px 8px rgba(31,61,43,.14)}

/* 通用板块 */
.kkc-sec{padding:var(--rhythm) 0;scroll-margin-top:84px}
.kkc-tone{background:var(--sheet)}
.kkc-sand{background:var(--sand)}
.kkc-deep{background:var(--pine)}
.kkc-h2{max-width:660px;margin-bottom:34px}
.kkc-h2 h2{font-size:clamp(22px,2.6vw,30px)}
.kkc-h2 h2::after{content:"";display:block;width:54px;height:4px;margin-top:14px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--toffee) 0 9px,var(--berry) 9px 18px)}
.kkc-h2 p{margin-top:14px;font-size:15px;color:var(--dim)}
.kkc-deep .kkc-h2 h2{color:var(--milk)}
.kkc-deep .kkc-h2 p{color:rgba(251,245,234,.72)}

/* 观影心情 */
.kkc-moods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kkc-moods li{padding:22px 20px 20px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad);transition:transform .25s,box-shadow .25s,border-color .25s}
.kkc-moods li:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:rgba(200,129,58,.45)}
.kkc-chip{display:block;width:26px;height:26px;margin-bottom:14px;border-radius:7px;background:repeating-linear-gradient(45deg,rgba(200,129,58,.9) 0 4px,rgba(31,61,43,.5) 4px 8px)}
.kkc-moods h3{font-size:17px}
.kkc-moods p{margin-top:8px;font-size:14.5px;color:var(--dim)}

/* 片单卡墙 */
.kkc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.kkc-card{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.kkc-card:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:rgba(31,61,43,.3)}
.kkc-poster{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.kkc-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kkc-card:hover .kkc-poster img{transform:scale(1.04)}
.kkc-badge{position:absolute;top:10px;left:10px;padding:2px 9px;border-radius:999px;background:var(--berry);color:#fff;font-size:11.5px;font-weight:700}
.kkc-score{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(251,245,234,.94);color:var(--pine);font-size:12px;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace}
.kkc-card-body{padding:14px 14px 16px}
.kkc-card h3{font-size:15.5px}
.kkc-card p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--dim)}

/* 特别篇 */
.kkc-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kkc-feat{position:relative;display:flex;align-items:flex-end;min-height:268px;border-radius:var(--rad);overflow:hidden}
.kkc-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kkc-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,61,43,.2),rgba(31,61,43,.9))}
.kkc-feat-body{position:relative;z-index:1;padding:22px}
.kkc-feat h3{color:#fff;font-size:18px}
.kkc-feat p{margin-top:8px;font-size:14px;color:rgba(251,245,234,.84)}
.kkc-count{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;background:rgba(251,245,234,.16);color:#fff;font-size:12px;font-weight:700}

/* 观看路线 */
.kkc-route{border-top:1px dashed var(--edge)}
.kkc-route li{display:grid;grid-template-columns:78px 168px 1fr;gap:20px;align-items:center;padding:16px 14px;border-bottom:1px dashed var(--edge);transition:background .2s,transform .2s}
.kkc-route li:hover{background:var(--sand);transform:translateX(4px)}
.kkc-night{font-size:13.5px;font-weight:800;color:var(--toffee);white-space:nowrap}
.kkc-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--rad-s);background:var(--sand)}
.kkc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kkc-route li:hover .kkc-thumb img{transform:scale(1.05)}
.kkc-rtxt strong{display:block;font-size:16px}
.kkc-rtxt em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--dim)}

/* 卖点 */
.kkc-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kkc-perks li{padding:24px 20px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad)}
.kkc-ico{width:38px;height:38px;margin-bottom:14px;display:grid;place-items:center;border-radius:10px;background:var(--sand);color:var(--pine)}
.kkc-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kkc-perks h3{font-size:16px}
.kkc-perks p{margin-top:8px;font-size:14px;color:var(--dim)}

/* 好评 */
.kkc-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kkc-voices li{position:relative;padding:24px 22px 22px 28px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad)}
.kkc-voices li::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:var(--toffee)}
.kkc-voices li::after{content:"\201C";position:absolute;right:16px;top:2px;font-family:Georgia,serif;font-size:44px;line-height:1;color:rgba(200,129,58,.22)}
.kkc-vt{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:800}
.kkc-vs{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:var(--berry)}
.kkc-voices p{margin-top:10px;font-size:15.5px;line-height:1.7}

/* 类型专区 */
.kkc-types{display:grid;grid-template-columns:repeat(3,1fr)}
.kkc-col{padding:0 26px;border-left:1px dashed rgba(31,61,43,.22)}
.kkc-col:first-child{border-left:0;padding-left:0}
.kkc-col:last-child{padding-right:0}
.kkc-col h3{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:17px}
.kkc-col h3::before{content:"";width:14px;height:14px;border-radius:4px;background:repeating-linear-gradient(45deg,var(--toffee) 0 3px,var(--pine) 3px 6px)}
.kkc-mini{display:grid;gap:16px}
.kkc-mini li{background:var(--sheet);border:1px solid rgba(31,61,43,.1);border-radius:var(--rad);overflow:hidden;transition:transform .25s,box-shadow .25s}
.kkc-mini li:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.kkc-mini span{display:block;padding:10px 12px 12px}
.kkc-mini strong{font-size:14.5px}
.kkc-mini em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--toffee)}

/* 排行榜 */
.kkc-top{counter-reset:kkcrank;border-top:1px solid var(--edge)}
.kkc-top li{counter-increment:kkcrank;display:grid;grid-template-columns:60px 1fr auto auto;gap:16px;align-items:center;padding:14px;border-bottom:1px solid var(--edge);transition:background .2s}
.kkc-top li:hover{background:var(--sheet)}
.kkc-top li::before{content:counter(kkcrank,decimal-leading-zero);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:26px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--pine)}
.kkc-top strong{font-size:16px}
.kkc-tag{padding:2px 10px;border-radius:999px;background:var(--sand);color:var(--pine);font-size:12px;font-weight:700;white-space:nowrap}
.kkc-hot{font-size:12.5px;font-weight:800;color:var(--berry);white-space:nowrap}

/* 热门横版 */
.kkc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kkc-wide{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.kkc-wide:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:rgba(31,61,43,.28)}
.kkc-wide span{display:block;padding:14px 16px}
.kkc-wide h3{font-size:16px}
.kkc-wide p{margin-top:6px;font-size:13.5px;color:var(--dim)}

/* 资讯 */
.kkc-news li{display:grid;grid-template-columns:132px 1fr auto;gap:20px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--edge);transition:background .2s}
.kkc-news li:hover{background:var(--sand)}
.kkc-news h3{font-size:15.5px;font-weight:700}
.kkc-news time{font-size:13px;color:var(--dim);white-space:nowrap}
.kkc-news .kkc-thumb{width:132px}

/* 问答 */
.kkc-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.kkc-faq article{padding:24px 22px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--rad)}
.kkc-faq h3{font-size:16.5px}
.kkc-faq p{margin-top:10px;font-size:14.5px;color:var(--dim)}
.kkc-outro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:36px;padding:26px 28px;border:1px dashed rgba(31,61,43,.3);border-radius:var(--rad);background:var(--sand)}
.kkc-outro p{font-size:15.5px;font-weight:700}

/* 页脚 */
.kkc-foot{padding-top:56px;background:var(--pine);color:rgba(251,245,234,.78)}
.kkc-foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:40px}
.kkc-foot h3{margin-bottom:14px;font-size:15px;color:var(--milk)}
.kkc-foot li+li{margin-top:8px}
.kkc-foot a{font-size:14px;color:rgba(251,245,234,.75);transition:color .2s}
.kkc-foot a:hover{color:var(--toffee)}
.kkc-foot p{font-size:14px;line-height:1.75}
.kkc-copy{padding:18px 0;border-top:1px solid rgba(251,245,234,.16);font-size:13px;color:rgba(251,245,234,.6)}

@media (max-width:1024px){
  .kkc-hero-in{grid-template-columns:1fr .82fr;gap:34px}
  .kkc-lead{font-size:15px}
  .kkc-grid{grid-template-columns:repeat(3,1fr)}
  .kkc-perks{grid-template-columns:repeat(2,1fr)}
  .kkc-voices{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  :root{--rhythm:48px}
  .kkc-nav{position:fixed;top:69px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 20px;background:var(--sheet);border-bottom:1px solid var(--edge);box-shadow:var(--lift);display:none}
  .kkc-nav.is-open{display:flex}
  .kkc-nav a{padding:0 8px;min-height:46px}
  .kkc-burger{display:flex}
  .kkc-head-cta{display:none}
  .kkc-hero-in{grid-template-columns:1fr;gap:34px}
  .kkc-hero-poster{max-width:340px}
  .kkc-moods{grid-template-columns:repeat(2,1fr)}
  .kkc-grid{grid-template-columns:repeat(2,1fr)}
  .kkc-feats{grid-template-columns:1fr}
  .kkc-route li{grid-template-columns:64px 120px 1fr;gap:14px;padding:14px 10px}
  .kkc-types{grid-template-columns:1fr;gap:22px}
  .kkc-col{padding:0}
  .kkc-col+.kkc-col{padding-top:22px;border-top:1px dashed rgba(31,61,43,.22)}
  .kkc-top li{grid-template-columns:44px 1fr auto;gap:10px;padding:12px 8px}
  .kkc-hot{display:none}
  .kkc-grid3{grid-template-columns:repeat(2,1fr)}
  .kkc-news li{grid-template-columns:104px 1fr;gap:14px}
  .kkc-news time{grid-column:2;font-size:12.5px}
  .kkc-news .kkc-thumb{width:104px}
  .kkc-faq{grid-template-columns:1fr}
  .kkc-foot-grid{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media (max-width:520px){
  :root{--rhythm:44px}
  .kkc-wrap{padding:0 16px}
  .kkc-full{display:none}
  .kkc-short{display:inline}
  .kkc-hero{padding:40px 0 52px}
  .kkc-hero h1{font-size:26px}
  .kkc-grid{display:flex;gap:14px;margin:0 -16px;padding:0 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory}
  .kkc-grid>li{flex:0 0 74%;scroll-snap-align:start}
  .kkc-grid3{grid-template-columns:1fr}
  .kkc-route li{grid-template-columns:54px 92px 1fr;gap:10px}
  .kkc-rtxt strong{font-size:15px}
  .kkc-rtxt em{font-size:13px}
  .kkc-top li{grid-template-columns:38px 1fr}
  .kkc-tag{display:none}
  .kkc-perks,.kkc-voices{grid-template-columns:1fr}
  .kkc-news li{grid-template-columns:88px 1fr}
  .kkc-news .kkc-thumb{width:88px}
  .kkc-foot-grid{grid-template-columns:1fr}
  .kkc-acts .kkc-btn{flex:1 1 auto}
}