/* roulang page: index */
:root{
--bgc:#0D0C0F;
--bg2:#16151A;
--pap:#F4F1EA;
--fog:#9A96A3;
--lin:rgba(244,241,234,.12);
--amn:#F0541E;
--amn2:rgba(240,84,30,.14);
--rad-s:2px;
--rad-m:6px;
--gap:20px;
--sec:96px;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bgc);color:var(--pap);font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible{outline:2px solid var(--amn);outline-offset:3px}
.kkc-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* 顶栏 */
.kkc-top{position:sticky;top:0;z-index:60;background:rgba(13,12,15,.94);border-bottom:1px solid var(--lin);backdrop-filter:blur(8px)}
.kkc-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;position:relative}
.kkc-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:18px;font-weight:800;letter-spacing:-.02em;min-height:44px}
.kkc-mark{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--amn);color:#0D0C0F;font-size:18px;font-weight:900;border-radius:var(--rad-s)}
.kkc-nav{display:flex;align-items:center;gap:26px}
.kkc-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--fog);text-decoration:none;transition:color .3s}
.kkc-nav a::after{content:"";position:absolute;left:0;bottom:10px;height:1px;width:0;background:var(--amn);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.kkc-nav a:hover{color:var(--pap)}
.kkc-nav a:hover::after{width:100%}
.kkc-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kkc-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--lin);border-radius:var(--rad-s);cursor:pointer}
.kkc-burger i{display:block;width:18px;height:2px;background:var(--pap);transition:transform .3s,opacity .3s}

/* 首屏 */
.kkc-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--lin)}
.kkc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.kkc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,15,.88) 0%,rgba(13,12,15,.34) 44%,rgba(13,12,15,.95) 100%)}
.kkc-hero-in{position:relative;z-index:2;width:100%;padding:140px 0 76px;max-width:780px}
.kkc-hero-in>*{animation:kkc-rise .6s cubic-bezier(.2,.7,.2,1) both}
.kkc-hero-in>*:nth-child(2){animation-delay:.08s}
.kkc-hero-in>*:nth-child(3){animation-delay:.16s}
.kkc-hero-in>*:nth-child(4){animation-delay:.24s}
@keyframes kkc-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.kkc-hero h1{font-size:clamp(40px,7vw,92px);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:18px}
.kkc-hero h1 em{font-style:normal;color:var(--amn)}
.kkc-hero-sub{font-size:clamp(15px,2vw,19px);color:var(--pap);opacity:.92;margin-bottom:12px;font-weight:600}
.kkc-hero-p{max-width:620px;color:var(--fog);font-size:16px;margin-bottom:30px}
.kkc-btns{display:flex;flex-wrap:wrap;gap:14px}
.kkc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border-radius:var(--rad-s);font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.kkc-btn-main{background:var(--amn);color:#0D0C0F}
.kkc-btn-main:hover{background:var(--pap);color:#0D0C0F}
.kkc-btn-ghost{border-color:rgba(244,241,234,.7);color:var(--pap)}
.kkc-btn-ghost:hover{background:var(--pap);color:#0D0C0F}

/* 板块通用 */
.kkc-sec{padding:var(--sec) 0}
.kkc-sec-alt{background:var(--bg2)}
.kkc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.kkc-h2{font-size:clamp(26px,3.2vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.kkc-sub{color:var(--fog);font-size:14px;margin-top:10px}
.kkc-note{color:var(--fog);font-size:13px}

/* 频道分区 */
.kkc-chan{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lin);border:1px solid var(--lin);border-radius:var(--rad-m);overflow:hidden}
.kkc-chan li{background:var(--bgc);padding:32px 28px;transition:background .35s}
.kkc-chan li:hover{background:var(--bg2)}
.kkc-chan li:hover .kkc-no{color:var(--amn)}
.kkc-no{display:block;font-family:var(--mono);font-size:26px;font-weight:900;line-height:1;color:rgba(244,241,234,.2);margin-bottom:16px;transition:color .35s}
.kkc-chan h3{font-size:18px;font-weight:700;margin-bottom:8px}
.kkc-chan p{font-size:14px;color:var(--fog);line-height:1.7}

/* 卡片网格 */
.kkc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.kkc-card{background:var(--bg2);border:1px solid var(--lin);border-radius:var(--rad-m);overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.kkc-card:hover{transform:translateY(-3px);border-color:rgba(244,241,234,.32)}
.kkc-poster{position:relative;aspect-ratio:3/4;overflow:hidden;background:#09090b}
.kkc-poster img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.kkc-card:hover .kkc-poster img{transform:scale(1.04)}
.kkc-badge{position:absolute;left:8px;top:8px;padding:1px 7px;font-size:12px;line-height:1.7;border-radius:var(--rad-s);background:var(--amn2);color:var(--amn);border:1px solid rgba(240,84,30,.42)}
.kkc-card-body{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 14px}
.kkc-tit{font-size:15px;font-weight:600;line-height:1.4}
.kkc-sc{font-family:var(--mono);font-size:13px;color:var(--amn);flex:none}

/* 高分好评 */
.kkc-hl li{display:flex;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--lin)}
.kkc-hl li:first-child{border-top:1px solid var(--lin)}
.kkc-hl-num{font-family:var(--mono);font-size:clamp(38px,4.6vw,60px);font-weight:900;line-height:1;color:var(--amn);flex:none;width:110px}
.kkc-hl-txt{flex:1;min-width:0}
.kkc-hl-txt h3{font-size:17px;font-weight:700;margin-bottom:4px}
.kkc-hl-txt p{font-size:14px;color:var(--fog)}
.kkc-hl-thumb{flex:none;width:96px;height:128px;border-radius:var(--rad-m);overflow:hidden;border:1px solid var(--lin)}
.kkc-hl-thumb img{width:100%;height:100%;object-fit:cover}

/* 排行榜 */
.kkc-rank{background:var(--pap);color:#0D0C0F;padding:var(--sec) 0}
.kkc-rank .kkc-h2{color:#0D0C0F}
.kkc-rank .kkc-sub,.kkc-rank .kkc-note{color:rgba(13,12,15,.6)}
.kkc-rank li{display:flex;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid rgba(13,12,15,.14)}
.kkc-rank li:first-child{border-top:1px solid rgba(13,12,15,.14)}
.kkc-rk{font-family:var(--mono);font-size:clamp(24px,3.4vw,40px);font-weight:900;line-height:1;color:var(--amn);flex:none;width:74px}
.kkc-rank-name{font-size:17px;font-weight:700;flex:1;min-width:0}
.kkc-cat{font-size:12px;padding:1px 8px;border:1px solid rgba(13,12,15,.22);border-radius:var(--rad-s);color:rgba(13,12,15,.68);flex:none}
.kkc-heat{font-size:13px;color:rgba(13,12,15,.55);flex:none;width:132px;text-align:right}

/* 类型专区 */
.kkc-types{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.kkc-types article{border:1px solid var(--lin);border-radius:var(--rad-m);padding:24px 22px;background:var(--bg2);transition:border-color .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.kkc-types article:hover{border-color:rgba(240,84,30,.5);transform:translateY(-3px)}
.kkc-types h3{font-size:16px;font-weight:700;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--lin);color:var(--amn)}
.kkc-types li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:14px}
.kkc-types li span{font-family:var(--mono);font-size:13px;color:var(--fog)}

/* 热门推荐 */
.kkc-remen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:start}
.kkc-remen > article{display:grid;grid-template-columns:200px 1fr;background:var(--bg2);border:1px solid var(--lin);border-radius:var(--rad-m);overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.kkc-remen > article:hover{transform:translateY(-3px);border-color:rgba(244,241,234,.32)}
.kkc-remen > article:nth-child(even){margin-top:28px}
.kkc-thumb{aspect-ratio:16/9;overflow:hidden;background:#09090b}
.kkc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.kkc-remen > article:hover .kkc-thumb img{transform:scale(1.04)}
.kkc-remen-txt{padding:18px 20px}
.kkc-remen-txt h3{font-size:16px;font-weight:700;margin-bottom:6px}
.kkc-remen-txt p{font-size:13px;color:var(--fog);line-height:1.6;margin-bottom:8px}
.kkc-remen-txt .kkc-sc{font-size:13px}

/* 主题片单 */
.kkc-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.kkc-topic{position:relative;display:block;aspect-ratio:21/9;border-radius:var(--rad-m);overflow:hidden;border:1px solid var(--lin)}
.kkc-topic img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.kkc-topic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,15,.1),rgba(13,12,15,.92));transition:background .35s}
.kkc-topic:hover img{transform:scale(1.04)}
.kkc-topic:hover::after{background:linear-gradient(180deg,rgba(13,12,15,.45),rgba(13,12,15,.97))}
.kkc-topic-txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.kkc-topic-txt h3{font-size:16px;font-weight:700;margin-bottom:4px}
.kkc-topic-txt p{font-size:12px;color:rgba(244,241,234,.74);line-height:1.6}

/* 待播与重映 */
.kkc-wait li{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--lin)}
.kkc-wait li:first-child{border-top:1px solid var(--lin)}
.kkc-wait-thumb{aspect-ratio:3/2;border-radius:var(--rad-m);overflow:hidden;border:1px solid var(--lin)}
.kkc-wait-thumb img{width:100%;height:100%;object-fit:cover}
.kkc-wait h3{font-size:16px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kkc-wait p{font-size:13px;color:var(--fog);line-height:1.65}
.kkc-tag{font-size:12px;font-weight:400;padding:1px 7px;border-radius:var(--rad-s);border:1px solid rgba(240,84,30,.45);color:var(--amn);background:var(--amn2)}

/* 推荐清单 */
.kkc-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.kkc-rail::-webkit-scrollbar{display:none}
.kkc-rail li{flex:0 0 230px;scroll-snap-align:start}
.kkc-rail article{border:1px solid var(--lin);border-radius:var(--rad-m);overflow:hidden;background:var(--bg2);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.kkc-rail article:hover{transform:translateY(-3px);border-color:rgba(244,241,234,.32)}
.kkc-rail .kkc-thumb{aspect-ratio:4/3}
.kkc-rail-txt{padding:14px 15px 16px}
.kkc-rail-txt h3{font-size:15px;font-weight:600;margin-bottom:4px}
.kkc-rail-txt p{font-size:12px;color:var(--fog);line-height:1.6}

/* 资讯 */
.kkc-news li{display:grid;grid-template-columns:160px 1fr auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lin)}
.kkc-news li:first-child{border-top:1px solid var(--lin)}
.kkc-news .kkc-thumb{aspect-ratio:4/3;border-radius:var(--rad-m);border:1px solid var(--lin)}
.kkc-news h3{font-size:16px;font-weight:600;line-height:1.5}
.kkc-news time{font-family:var(--mono);font-size:13px;color:var(--fog);flex:none}

/* 问答 */
.kkc-faq details{border-bottom:1px solid var(--lin)}
.kkc-faq details:first-child{border-top:1px solid var(--lin)}
.kkc-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:16px 0;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.kkc-faq summary::-webkit-details-marker{display:none}
.kkc-faq summary::after{content:"+";font-family:var(--mono);font-size:20px;line-height:1;color:var(--amn);flex:none}
.kkc-faq details[open] summary::after{content:"−"}
.kkc-faq p{padding:0 0 18px;font-size:15px;color:var(--fog);max-width:900px}

/* 收尾条 */
.kkc-end{background:var(--amn);color:#0D0C0F;padding:80px 0}
.kkc-end h2{font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.kkc-end p{font-size:15px;color:rgba(13,12,15,.74);margin-bottom:28px}
.kkc-end .kkc-btn{border-color:rgba(13,12,15,.8);color:#0D0C0F}
.kkc-end .kkc-btn-solid{background:#0D0C0F;color:var(--pap);border-color:#0D0C0F}
.kkc-end .kkc-btn-solid:hover{background:var(--pap);color:#0D0C0F;border-color:var(--pap)}
.kkc-end .kkc-btn-line:hover{background:#0D0C0F;color:var(--pap)}

/* 页脚 */
.kkc-foot{background:var(--bg2);border-top:1px solid var(--lin);padding:64px 0 0}
.kkc-foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.kkc-foot-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;min-height:44px}
.kkc-foot-about{color:var(--fog);font-size:14px;margin-top:12px;max-width:280px;line-height:1.7}
.kkc-foot h3{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--fog);margin-bottom:10px}
.kkc-foot li a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--pap);text-decoration:none;transition:color .3s}
.kkc-foot li a:hover{color:var(--amn)}
.kkc-foot-txt{font-size:14px;color:var(--fog);line-height:1.7}
.kkc-copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding:18px 0;border-top:1px solid var(--lin);font-size:13px;color:var(--fog)}

@media(max-width:1024px){
.kkc-grid{grid-template-columns:repeat(3,1fr)}
.kkc-types{grid-template-columns:repeat(2,1fr)}
.kkc-topics{grid-template-columns:repeat(2,1fr)}
.kkc-foot-grid{grid-template-columns:1fr 1fr}
.kkc-hl-num{width:92px}
}
@media(max-width:768px){
:root{--sec:64px;--gap:14px}
.kkc-burger{display:flex}
.kkc-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:#111014;border-bottom:1px solid var(--lin);padding:6px 24px 14px}
.kkc-toggle:checked ~ .kkc-nav{display:flex}
.kkc-nav a{min-height:44px;font-size:15px;border-bottom:1px solid var(--lin)}
.kkc-nav a::after{display:none}
.kkc-hero{min-height:76vh}
.kkc-hero-in{padding:110px 0 56px}
.kkc-chan{grid-template-columns:repeat(2,1fr)}
.kkc-grid{grid-template-columns:repeat(2,1fr)}
.kkc-remen{grid-template-columns:1fr}
.kkc-remen > article:nth-child(even){margin-top:0}
.kkc-remen > article{grid-template-columns:170px 1fr}
.kkc-topics{grid-template-columns:1fr}
.kkc-topic{aspect-ratio:16/9}
.kkc-hl li{gap:16px;align-items:flex-start}
.kkc-hl-num{width:74px;font-size:34px}
.kkc-hl-thumb{width:72px;height:96px}
.kkc-news li{grid-template-columns:110px 1fr;gap:14px}
.kkc-news time{grid-column:2;text-align:left}
.kkc-heat{width:auto;display:none}
.kkc-rank li{gap:14px}
.kkc-rk{width:56px}
.kkc-foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:520px){
.kkc-wrap{padding:0 20px}
.kkc-chan{grid-template-columns:1fr}
.kkc-grid{grid-template-columns:1fr}
.kkc-types{grid-template-columns:1fr}
.kkc-remen > article{grid-template-columns:1fr}
.kkc-hl-thumb{display:none}
.kkc-hl-num{width:64px;font-size:30px}
.kkc-wait li{grid-template-columns:110px 1fr;gap:14px}
.kkc-news li{grid-template-columns:96px 1fr}
.kkc-rail li{flex:0 0 200px}
.kkc-foot-grid{grid-template-columns:1fr}
.kkc-btns .kkc-btn{flex:1 1 100%}
.kkc-copy{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.kkc-card:hover,.kkc-card:hover .kkc-poster img,.kkc-remen > article:hover,.kkc-remen > article:hover .kkc-thumb img,.kkc-topic:hover img,.kkc-types article:hover,.kkc-rail article:hover{transform:none}
}