/* roulang page: index */
:root{--ink:#202c2a;--muted:#65736f;--paper:#f6f8f4;--white:#fff;--mint:#bcebd5;--green:#186b53;--green-dark:#10533f;--coral:#e9785e;--yellow:#f2d66d;--line:#dce5df;--soft:#edf3ee;--shadow:0 9px 24px rgba(25,55,42,.08);--radius:8px;--container:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green)}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button,a,input,textarea{outline-offset:3px}
:focus-visible{outline:3px solid var(--coral)}
.container{width:min(var(--container),calc(100% - 44px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px}
.site-header{position:sticky;top:0;z-index:10;background:rgba(246,248,244,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;line-height:1.2}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:8px;font-size:19px}
.brand-name{max-width:230px;font-size:16px}
.nav-links{display:flex;align-items:center;gap:25px;font-size:14px;color:#44534e}
.nav-links a{padding:8px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--green);border-color:var(--green)}
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;width:42px;height:42px;cursor:pointer}
.hero{position:relative;overflow:hidden;background:#dff2e7;padding:74px 0 62px}
.hero:after{content:"";position:absolute;right:-70px;top:-100px;width:410px;height:410px;border-radius:50%;border:1px solid rgba(24,107,83,.16);box-shadow:0 0 0 35px rgba(24,107,83,.035),0 0 0 75px rgba(24,107,83,.025)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:55px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--green);font-size:13px;font-weight:750}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}
h1,h2,h3,p{margin-top:0}
h1{font-size:48px;line-height:1.2;max-width:680px;margin:15px 0 14px;font-weight:820}
h1 em{font-style:normal;color:var(--green)}
.hero-sub{font-size:20px;font-weight:650;margin-bottom:10px}
.hero-copy{max-width:650px;color:#4b5e56;margin:0 0 23px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:6px;font-weight:700;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-secondary{background:rgba(255,255,255,.55);border-color:#9dcdb6;color:var(--green-dark)}
.btn-secondary:hover{background:#fff}
.btn:active{transform:translateY(0)}
.hero-art{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.hero-poster{width:205px;aspect-ratio:3/4;background:linear-gradient(150deg,#f2d66d 0 25%,#b8dfc5 25% 55%,#398267 55% 100%);border-radius:6px;box-shadow:var(--shadow);transform:rotate(-5deg);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#18392d}
.hero-poster strong{font-size:24px;line-height:1.25}
.hero-poster span{font-size:12px;margin-top:7px}
.poster-small{position:absolute;width:130px;aspect-ratio:3/4;border-radius:6px;padding:12px;display:flex;align-items:end;font-weight:750;line-height:1.3;box-shadow:var(--shadow)}
.poster-small.one{background:linear-gradient(145deg,#f2a28c,#f4d98a 52%,#537c62);left:9%;top:18%;transform:rotate(8deg)}
.poster-small.two{background:linear-gradient(145deg,#c4d7dd,#729a90 50%,#e2c48f);right:7%;top:25%;transform:rotate(8deg)}
.poster-caption{position:absolute;bottom:4px;right:7%;font-size:12px;color:var(--muted)}
section{padding:68px 0;border-bottom:1px solid var(--line)}
section:nth-of-type(even){background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.section-head h2{font-size:29px;line-height:1.25;margin:0 0 8px}
.section-head p{max-width:700px;color:var(--muted);margin:0}
.kicker{font-size:12px;color:var(--green);font-weight:800;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{padding:23px 25px;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat strong{display:block;font-size:30px;line-height:1.2;color:var(--green)}
.stat span{font-size:13px;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service{padding:20px 18px;border-top:3px solid var(--mint);background:var(--soft)}
.service:nth-child(2){border-color:var(--coral)}.service:nth-child(3){border-color:var(--yellow)}.service:nth-child(4){border-color:#88b9b0}
.service h3{font-size:17px;margin:0 0 7px}.service p{font-size:14px;color:var(--muted);margin:0}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 16px}
.movie{min-width:0}
.poster{position:relative;display:flex;align-items:end;aspect-ratio:3/4;border-radius:6px;overflow:hidden;padding:14px;color:#1b3027;font-weight:800;background:linear-gradient(155deg,#efd987 0 23%,#aed9bf 23% 57%,#43836a 57%);transition:transform .2s ease,box-shadow .2s ease}
.movie:nth-child(4n+2) .poster{background:linear-gradient(145deg,#f5b4a2,#f3d98e 48%,#72977b)}
.movie:nth-child(4n+3) .poster{background:linear-gradient(145deg,#cadcda,#83aea1 48%,#e7c693)}
.movie:nth-child(4n+4) .poster{background:linear-gradient(145deg,#d7c8a4,#8ab0a1 52%,#597768)}
.poster:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.poster-title{font-size:20px;line-height:1.2;max-width:88%;text-shadow:0 1px 4px rgba(255,255,255,.45)}
.badge{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:4px;background:#fff;color:var(--green-dark);font-size:11px;font-weight:750}
.badge.hd{background:#d8f1e3}.badge.update{background:#fff0c5}.badge.bluray{background:#dce9f3}
.movie-info{padding-top:10px;display:flex;justify-content:space-between;gap:8px;align-items:start}
.movie-info strong{font-size:15px}.movie-info span{font-size:12px;color:var(--muted);white-space:nowrap}
.score{font-weight:750;color:var(--coral)}
.feature-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
.feature{min-height:210px;padding:20px;display:flex;flex-direction:column;justify-content:end;border-radius:6px;color:#18372d;background:linear-gradient(145deg,#f1d475,#80b99a)}
.feature:nth-child(2){background:linear-gradient(145deg,#f0a58f,#e6d08e)}
.feature:nth-child(3){background:linear-gradient(145deg,#b7d6d0,#65947f)}
.feature strong{font-size:21px}.feature p{font-size:13px;margin:5px 0 0;max-width:340px}
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.category{padding:18px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:border-color .2s,transform .2s}
.category:hover{border-color:#8ac4a7;transform:translateY(-2px)}
.category b{display:block;font-size:17px;margin-bottom:5px}.category p{font-size:13px;color:var(--muted);margin:0}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.bars{display:grid;gap:13px}
.bar-row{display:grid;grid-template-columns:95px 1fr 42px;align-items:center;gap:12px;font-size:13px}
.bar{height:10px;background:#e6ede8;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green);border-radius:9px}
.comparison-note{padding:22px;background:#f0f5f0;border-left:3px solid var(--coral)}
.comparison-note p{margin:0;color:#52625b}
.topic-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.topic{padding:18px 16px;border-bottom:1px solid var(--line)}
.topic b{display:block;font-size:17px;margin-bottom:5px}.topic p{font-size:13px;color:var(--muted);margin:0}
.scene-grid{display:flex;flex-wrap:wrap;gap:10px}
.scene{padding:12px 16px;border:1px solid var(--line);border-radius:5px;background:#fff;font-weight:650}
.scene:nth-child(3n+1){border-color:#abd9c0}.scene:nth-child(3n+2){border-color:#efc2b4}
.rankings{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.rank{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rank-num{font-size:18px;font-weight:800;color:#8a9992}.rank:nth-child(-n+3) .rank-num{color:var(--coral)}
.rank b{font-size:14px}.rank small{display:block;color:var(--muted);font-size:12px}.rank-score{text-align:right;font-size:12px;color:var(--muted)}
.updates{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}
.update{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.update b{font-size:14px}.update span{font-size:12px;color:var(--muted);white-space:nowrap}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.milestone{border-top:2px solid var(--mint);padding-top:15px}.milestone time{font-size:12px;color:var(--green);font-weight:750}.milestone b{display:block;margin:5px 0}.milestone p{font-size:13px;color:var(--muted);margin:0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-item{display:grid;grid-template-columns:95px 1fr;gap:13px;align-items:center}
.news-thumb{aspect-ratio:1.2;border-radius:5px;background:linear-gradient(135deg,#f2d66d,#5b9678)}
.news-item:nth-child(3n+2) .news-thumb{background:linear-gradient(135deg,#f1a58e,#83b99a)}
.news-item:nth-child(3n) .news-thumb{background:linear-gradient(135deg,#d5ded3,#7d9b79)}
.news-item h3{font-size:14px;line-height:1.45;margin:0 0 5px}.news-item time{font-size:11px;color:var(--muted)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trust-item{border-left:2px solid var(--mint);padding-left:16px}.trust-item b{display:block;margin-bottom:5px}.trust-item p{font-size:13px;color:var(--muted);margin:0}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick{padding:17px;background:var(--soft);border-radius:5px}.quick b{display:block;margin-bottom:5px}.quick p{margin:0;font-size:13px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}
.step{padding:18px 0;border-top:1px solid var(--line);counter-increment:step}
.step:before{content:"0" counter(step);display:block;color:var(--coral);font-weight:800;font-size:13px;margin-bottom:5px}.step b{display:block}.step p{font-size:13px;color:var(--muted);margin:4px 0 0}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"＋";color:var(--green);font-size:18px}
details[open] summary:after{content:"−"}
details p{font-size:14px;color:var(--muted);margin:9px 24px 0 0}
.contact{background:#e4f2e8}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.contact h2{font-size:29px;margin:0 0 8px}.contact-copy{color:var(--muted);margin:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:5px}.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700}
.field input,.field textarea{width:100%;border:1px solid #bdcec2;border-radius:5px;background:#fff;padding:10px 12px;color:var(--ink)}
.field textarea{min-height:86px;resize:vertical}
.form-status{grid-column:1/-1;font-size:13px;color:var(--green);min-height:22px}
.site-footer{background:#202e2a;color:#eef5ef;padding:45px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.footer-grid h3{font-size:14px;margin:0 0 10px;color:#bcebd5}
.footer-grid p,.footer-grid a{font-size:13px;color:#c5d0ca}
.footer-grid a{display:block;margin:5px 0}.footer-grid a:hover{color:#fff}
.footer-brand{font-weight:800;font-size:17px!important;color:#fff!important}
.copyright{margin-top:28px;padding-top:15px;border-top:1px solid #46534e;font-size:12px;color:#aebbb4}
@media(max-width:1024px){.hero-grid{gap:25px}.poster-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.nav-links{gap:15px}.categories{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(100% - 32px,var(--container))}.nav-wrap{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:12px 20px 18px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:2px}.nav-links.open{display:flex}.nav-links a{padding:10px 4px}.hero{padding:54px 0 40px}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:230px;max-width:500px;width:100%;margin:auto}.hero-poster{width:165px}.poster-small{width:106px}h1{font-size:38px}.section-head{display:block}.section-head p{margin-top:8px}.feature-grid{grid-template-columns:1fr 1fr}.feature:first-child{grid-column:1/-1}.comparison,.contact-wrap{grid-template-columns:1fr;gap:22px}.news-grid{grid-template-columns:1fr 1fr}.updates{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr 1fr}.trust-grid,.quick-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.brand-name{font-size:14px;max-width:190px}.hero{padding-top:42px}h1{font-size:32px}.hero-sub{font-size:17px}.hero-art{min-height:200px}.poster-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}.poster{padding:10px}.poster-title{font-size:17px}.movie-info{display:block}.movie-info span{display:block;margin-top:2px}.stats{grid-template-columns:1fr 1fr}.stat{padding:16px;border-bottom:1px solid var(--line)}.stat:nth-child(2){border-right:0}.stat:nth-child(3),.stat:nth-child(4){border-bottom:0}.stat strong{font-size:25px}.service-grid,.categories{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.feature:first-child{grid-column:auto}.feature{min-height:165px}.topic-list{grid-template-columns:1fr 1fr}.rankings{grid-template-columns:1fr}.rank{grid-template-columns:32px 1fr auto}.updates{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.news-grid{grid-template-columns:1fr}.trust-grid,.quick-grid,.faq-list{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.form{grid-template-columns:1fr}.field.full,.form-status{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.section-head h2{font-size:25px}section{padding:48px 0}}

/* roulang page: category1 */
:root{--ink:#202c2a;--muted:#65736f;--paper:#f6f8f4;--white:#fff;--mint:#bcebd5;--green:#186b53;--green-dark:#10533f;--coral:#e9785e;--yellow:#f2d66d;--line:#dce5df;--soft:#edf3ee;--shadow:0 9px 24px rgba(25,55,42,.08);--radius:8px;--container:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green)}
img{display:block;max-width:100%}
button,input{font:inherit}
button,a,input{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(233,120,94,.45)}
.container{width:min(var(--container),calc(100% - 44px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:10;background:rgba(246,248,244,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;line-height:1.2}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:8px;font-size:19px}
.brand-name{max-width:230px;font-size:16px}
.nav-links{display:flex;align-items:center;gap:25px;font-size:14px;color:#44534e}
.nav-links a{padding:8px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--green);border-color:var(--green)}
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;width:42px;height:42px;cursor:pointer}
.category-hero{background:#dff2e7;padding:48px 0 44px;border-bottom:1px solid #c7e4d4}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:19px}
.breadcrumb a{color:var(--green)}
.category-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:54px;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:13px;font-weight:750}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}
h1{font-size:clamp(34px,4vw,54px);line-height:1.15;letter-spacing:0;margin:11px 0 15px}
.hero-copy{max-width:690px;color:#4b5e56;margin:0}
.hero-note{border-left:3px solid var(--coral);padding:14px 0 14px 20px;color:#456057;background:rgba(255,255,255,.36)}
.hero-note strong{display:block;color:var(--green-dark);font-size:20px;margin-bottom:4px}
section{padding:62px 0;border-bottom:1px solid var(--line)}
section:nth-of-type(even){background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:25px}
.section-head h2{font-size:29px;line-height:1.25;margin:0 0 7px}
.section-head p{max-width:700px;color:var(--muted);margin:0}
.filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.filter-label{font-weight:750;color:var(--green-dark);margin-right:4px}
.filter-btn{border:1px solid #bfd2c6;background:#fff;color:#4b5e56;border-radius:5px;padding:8px 14px;cursor:pointer;transition:.18s}
.filter-btn:hover,.filter-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.search-box{margin-left:auto;border:1px solid #bfd2c6;border-radius:5px;padding:8px 12px;min-width:200px;color:var(--ink);background:#fbfdfb}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 16px;margin-top:24px}
.poster-card{min-width:0}
.poster-art{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;display:flex;align-items:end;padding:17px;color:#17392d;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.poster-card:hover .poster-art{transform:translateY(-4px);box-shadow:0 13px 26px rgba(25,55,42,.14)}
.poster-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 37%,rgba(255,255,255,.8))}
.poster-art>*{position:relative;z-index:1}
.poster-card:nth-child(4n+1) .poster-art{background:linear-gradient(145deg,#d9efc8,#efbd82 55%,#77a984)}
.poster-card:nth-child(4n+2) .poster-art{background:linear-gradient(145deg,#f0d780,#d98972 54%,#8cb39e)}
.poster-card:nth-child(4n+3) .poster-art{background:linear-gradient(145deg,#c4ddd3,#f2b48c 55%,#65907a)}
.poster-card:nth-child(4n) .poster-art{background:linear-gradient(145deg,#e6e3bd,#91b8a2 55%,#e58e76)}
.poster-title{font-size:20px;line-height:1.25;max-width:92%;text-shadow:0 1px 4px rgba(255,255,255,.45)}
.badge{position:absolute!important;top:10px;left:10px;padding:3px 8px;border-radius:4px;background:#fff;color:var(--green-dark);font-size:11px;font-weight:750}
.badge.hd{background:#d8f1e3}.badge.update{background:#fff0c5}.badge.bluray{background:#dce9f3}
.poster-info{padding-top:10px}
.poster-info h3{font-size:16px;line-height:1.35;margin:0 0 4px}
.meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.score{color:#a56a16;font-weight:750}
.empty-state{display:none;padding:24px;color:var(--muted);text-align:center;border:1px dashed #bfd2c6;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:6px;font-weight:700;transition:background .18s,color .18s,transform .18s,border-color .18s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-secondary{background:#fff;border-color:#9dcdb6;color:var(--green-dark)}.btn-secondary:hover{background:var(--soft)}
.center-action{text-align:center;margin-top:28px}
.topic-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.topic-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0}
.topic-row:last-child{border-bottom:1px solid var(--line)}
.topic-row strong{font-size:17px}.topic-row p{margin:3px 0 0;color:var(--muted);font-size:13px}
.topic-mark{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:6px;background:var(--mint);color:var(--green-dark);font-weight:800}
.rank-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:35px}
.rank-list{margin:0;padding:0;list-style:none}
.rank-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:12px 0}
.rank-no{font-size:20px;font-weight:800;color:var(--coral)}
.rank-item h3{font-size:15px;margin:0}.rank-item p{font-size:12px;color:var(--muted);margin:2px 0 0}
.update-panel{background:#eef5ef;padding:24px;border-left:3px solid var(--mint)}
.update-item{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #d2e1d7;font-size:14px}
.update-item:last-child{border-bottom:0}.update-item time{color:var(--muted);white-space:nowrap;font-size:12px}
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.guide-step{position:relative;border-top:3px solid var(--mint);padding-top:14px}
.guide-step b{display:block;color:var(--green);font-size:13px;margin-bottom:5px}
.guide-step h3{font-size:18px;margin:0 0 5px}.guide-step p{margin:0;color:var(--muted);font-size:13px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
details{background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 16px}
details[open]{border-color:#a9cdb9}
summary{cursor:pointer;list-style:none;padding:15px 25px 15px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;color:var(--green);font-size:21px;line-height:1}
details[open] summary:after{content:"−"}
details p{margin:0 0 16px;color:var(--muted);font-size:14px}
.site-footer{background:#202e2a;color:#eef5ef;padding:45px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.footer-grid h3{font-size:14px;margin:0 0 10px;color:#bcebd5}
.footer-grid p,.footer-grid a{font-size:13px;color:#c5d0ca}
.footer-grid a{display:block;margin:5px 0}.footer-grid a:hover{color:#fff}
.footer-brand{font-weight:800;font-size:17px!important;color:#fff!important}
.copyright{margin-top:28px;padding-top:15px;border-top:1px solid #46534e;font-size:12px;color:#aebbb4}
@media(max-width:1024px){.nav-links{gap:15px}.poster-grid{grid-template-columns:repeat(3,1fr)}.category-grid,.rank-layout{gap:28px}}
@media(max-width:768px){.nav-wrap{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:22px;right:22px;top:76px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:10px 18px;flex-direction:column;align-items:stretch;gap:2px}.nav-links.open{display:flex}.nav-links a{padding:10px 3px}.category-grid,.topic-layout,.rank-layout{grid-template-columns:1fr}.section-head{display:block}.section-head h2{font-size:25px}.search-box{margin-left:0;flex:1;min-width:180px}.guide{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.container{width:min(var(--container),calc(100% - 28px))}.brand-name{max-width:185px;font-size:14px}.category-hero{padding:35px 0}.poster-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}.poster-title{font-size:17px}.poster-info h3{font-size:14px}.filter-bar{align-items:stretch}.filter-label{width:100%}.search-box{width:100%;flex-basis:100%}.faq-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero-note{margin-top:15px}}