/* roulang page: index */
:root{
      --ink:#201f23;
      --muted:#706b70;
      --paper:#f6f1eb;
      --paper-2:#eee7df;
      --card:#fffdf9;
      --line:#ded5cd;
      --red:#a34e42;
      --red-dark:#73382f;
      --gold:#c99b52;
      --sage:#62766b;
      --shadow:0 18px 45px rgba(52,38,29,.10);
      --soft-shadow:0 8px 22px rgba(52,38,29,.07);
      --radius:18px;
      --container:1180px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Plus Jakarta Sans","Noto Serif SC",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(rgba(70,47,35,.12) .6px,transparent .6px);background-size:6px 6px;z-index:-1}
    img{display:block;width:100%;object-fit:cover}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer;border:0}
    .container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
    .eyebrow{color:var(--red);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
    .section-head h2{font-family:"Noto Serif SC",serif;font-size:clamp(25px,3vw,36px);line-height:1.25;letter-spacing:0}
    .section-head p{max-width:590px;color:var(--muted);font-size:14px}
    .section-link{font-size:13px;color:var(--red);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--red);padding-bottom:3px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(246,241,235,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(222,213,205,.8)}
    .nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
    .brand-mark{width:38px;height:38px;background:var(--red);color:#fff9f2;display:grid;place-items:center;border-radius:9px;font-family:"Noto Serif SC",serif;font-size:22px;box-shadow:4px 4px 0 var(--gold)}
    .brand-name{font-family:"Noto Serif SC",serif;font-size:17px;font-weight:800;letter-spacing:.02em}
    .nav{display:flex;align-items:center;gap:26px}
    .nav a{font-size:13px;color:var(--muted);font-weight:700;position:relative;padding:9px 0}
    .nav a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--red);transition:right .25s}
    .nav a:hover,.nav a.active{color:var(--ink)}
    .nav a:hover:after,.nav a.active:after{right:0}
    .nav-action{padding:10px 16px!important;border:1px solid var(--red);color:var(--red)!important;border-radius:8px}
    .nav-action:hover{background:var(--red);color:#fff!important}
    .nav-action:after{display:none}
    .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:24px}
    .hero{padding:74px 0 62px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;right:-120px;top:30px;width:350px;height:350px;border:1px solid rgba(163,78,66,.2);border-radius:50%;box-shadow:0 0 0 28px rgba(163,78,66,.04),0 0 0 58px rgba(163,78,66,.03);z-index:-1}
    .hero-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
    .hero h1{font-family:"Noto Serif SC",serif;font-size:clamp(38px,5.5vw,70px);line-height:1.16;letter-spacing:0;margin:14px 0 22px;max-width:680px}
    .hero h1 em{font-style:normal;color:var(--red);position:relative}
    .hero h1 em:after{content:"";position:absolute;left:4px;right:0;bottom:-5px;height:6px;background:var(--gold);opacity:.6;transform:rotate(-2deg)}
    .hero-copy{font-family:"Noto Serif SC",serif;color:#554e4b;font-size:17px;line-height:2;max-width:620px}
    .hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:8px;font-size:13px;font-weight:800;transition:.25s;border:1px solid transparent}
    .btn-primary{background:var(--red);color:#fffaf5;box-shadow:5px 5px 0 rgba(201,155,82,.65)}
    .btn-primary:hover{background:var(--red-dark);transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(201,155,82,.65)}
    .btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,253,249,.45)}
    .btn-ghost:hover{border-color:var(--red);color:var(--red);background:var(--card)}
    .hero-stage{position:relative;min-height:380px}
    .hero-poster{height:390px;border:8px solid #2b292a;box-shadow:20px 20px 0 rgba(115,56,47,.16);position:relative;overflow:hidden}
    .hero-poster img{height:100%;filter:saturate(.78)}
    .hero-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,22,20,.72),transparent 58%)}
    .poster-caption{position:absolute;z-index:1;left:26px;right:26px;bottom:22px;color:#fff}
    .poster-caption strong{display:block;font-family:"Noto Serif SC",serif;font-size:25px;margin-bottom:3px}
    .poster-caption span{font-size:12px;color:#eadbd1}
    .year-note{position:absolute;left:-24px;top:38px;background:var(--gold);color:#38271c;padding:9px 13px;font-size:11px;font-weight:800;writing-mode:vertical-rl;letter-spacing:.1em}
    .hero-stamp{position:absolute;right:-18px;bottom:28px;width:88px;height:88px;border:2px solid var(--red);color:var(--red);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:"Noto Serif SC",serif;font-size:12px;line-height:1.4;transform:rotate(12deg);background:var(--paper)}
    section{padding:82px 0}
    .section-tint{background:var(--paper-2);border-top:1px solid rgba(222,213,205,.7);border-bottom:1px solid rgba(222,213,205,.7)}
    .category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .category-card{padding:24px 20px;min-height:180px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);position:relative;transition:.25s}
    .category-card:hover{transform:translateY(-5px);box-shadow:var(--soft-shadow);border-color:var(--gold)}
    .category-no{font-size:12px;color:var(--gold);font-weight:800}
    .category-card h3{font-family:"Noto Serif SC",serif;font-size:20px;margin:18px 0 10px}
    .category-card p{font-size:12px;color:var(--muted);line-height:1.8}
    .category-arrow{position:absolute;right:18px;bottom:17px;color:var(--red);font-size:19px}
    .film-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .film-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
    .film-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
    .film-image{height:265px;position:relative;overflow:hidden;background:#d8d0c7}
    .film-image img{height:100%;transition:transform .45s}
    .film-card:hover .film-image img{transform:scale(1.05)}
    .film-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,16,16,.45),transparent 48%);pointer-events:none}
    .badge{position:absolute;z-index:1;top:12px;left:12px;background:var(--gold);color:#38271c;border-radius:5px;padding:4px 8px;font-size:10px;font-weight:800}
    .badge.dark{background:rgba(31,28,27,.78);color:#fff}
    .rating{position:absolute;z-index:1;bottom:12px;right:12px;color:#fff;font-size:12px;font-weight:800}
    .film-info{padding:16px}
    .film-info h3{font-family:"Noto Serif SC",serif;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .film-meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--muted);font-size:11px}
    .topic-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
    .topic{padding:7px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:12px;background:rgba(255,253,249,.55)}
    .topic:hover{border-color:var(--red);color:var(--red)}
    .feature-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
    .feature-main{min-height:420px;position:relative;border-radius:var(--radius);overflow:hidden;background:#333}
    .feature-main img{height:100%;position:absolute;inset:0}
    .feature-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,17,16,.88),rgba(20,17,16,.04) 70%)}
    .feature-copy{position:absolute;z-index:1;left:30px;right:30px;bottom:26px;color:#fff}
    .feature-copy h3{font-family:"Noto Serif SC",serif;font-size:30px;margin:8px 0}
    .feature-copy p{font-size:13px;color:#e4d9d2;max-width:510px}
    .feature-side{display:grid;grid-template-rows:1fr 1fr;gap:26px}
    .mini-feature{display:grid;grid-template-columns:38% 62%;background:var(--card);border:1px solid var(--line);overflow:hidden;border-radius:var(--radius)}
    .mini-feature img{height:100%}
    .mini-copy{padding:22px 18px}
    .mini-copy h3{font-family:"Noto Serif SC",serif;font-size:18px;margin:6px 0 8px}
    .mini-copy p{font-size:12px;color:var(--muted);line-height:1.8}
    .news-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
    .news-main{display:grid;grid-template-columns:43% 57%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .news-main img{height:100%;min-height:280px}
    .news-main-copy{padding:28px}
    .news-main-copy h3{font-family:"Noto Serif SC",serif;font-size:23px;line-height:1.45;margin:10px 0 14px}
    .news-main-copy p,.news-item p{font-size:12px;color:var(--muted);line-height:1.8}
    .news-list{display:grid;gap:11px}
    .news-item{display:grid;grid-template-columns:88px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);padding:10px;border-radius:12px}
    .news-item img{height:75px;border-radius:7px}
    .news-item h3{font-family:"Noto Serif SC",serif;font-size:15px;line-height:1.45}
    .date{font-size:10px;color:var(--red);font-weight:800;display:block;margin-top:3px}
    .ranking-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
    .ranking-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:9px 20px}
    .rank-item{display:grid;grid-template-columns:34px 1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
    .rank-item:last-child{border-bottom:0}
    .rank-num{font-family:"Noto Serif SC",serif;color:var(--red);font-size:19px;font-weight:800}
    .rank-title{font-family:"Noto Serif SC",serif;font-size:14px}
    .rank-tag{font-size:10px;color:var(--sage);border:1px solid #b6c4ba;padding:3px 6px;border-radius:4px}
    .rank-score{font-size:12px;font-weight:800;color:var(--gold)}
    .rank-note{padding:35px;background:var(--red);color:#fff8ef;border-radius:var(--radius);min-height:100%;position:relative;overflow:hidden}
    .rank-note:after{content:"TOP 10";position:absolute;right:-15px;bottom:8px;font-size:62px;font-weight:800;color:rgba(255,255,255,.08)}
    .rank-note h3{font-family:"Noto Serif SC",serif;font-size:28px;line-height:1.4;margin-bottom:17px}
    .rank-note p{color:#f1ddd4;font-size:13px;line-height:2}
    .evidence{background:#2b292a;color:#fff7ef}
    .evidence .section-head p{color:#c7b9b0}
    .evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#5a4c45;border:1px solid #5a4c45}
    .evidence-card{padding:29px 24px;background:#2b292a}
    .evidence-card strong{display:block;font-family:"Noto Serif SC",serif;font-size:34px;color:#e1b56e}
    .evidence-card span{display:block;color:#d3c4bb;font-size:12px;margin-top:5px}
    .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .quote-card{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
    .quote-mark{font-family:Georgia,serif;color:var(--red);font-size:42px;line-height:1}
    .quote-card p{font-family:"Noto Serif SC",serif;font-size:15px;line-height:2;margin:8px 0 18px}
    .quote-card small{color:var(--muted);font-size:11px}
    .partners{padding:44px 0;border-bottom:1px solid var(--line)}
    .partner-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:#958b83;font-family:"Noto Serif SC",serif;font-size:18px}
    .partner-row span{padding:8px 18px;border-left:1px solid var(--line)}
    .safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .safety-card{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,249,.55)}
    .safety-icon{width:34px;height:34px;flex:0 0 34px;background:var(--sage);color:white;display:grid;place-items:center;border-radius:50%;font-weight:800}
    .safety-card h3{font-family:"Noto Serif SC",serif;font-size:16px;margin-bottom:4px}
    .safety-card p{font-size:12px;color:var(--muted);line-height:1.75}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
    .faq-item{border-top:1px solid var(--line);padding:19px 0}
    .faq-item h3{font-family:"Noto Serif SC",serif;font-size:17px;margin-bottom:8px}
    .faq-item p{font-size:13px;color:var(--muted);line-height:1.9}
    .final-cta{padding:62px 0;background:var(--paper-2)}
    .cta-box{background:var(--red);color:#fff8ef;border-radius:var(--radius);padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
    .cta-box:after{content:"影";position:absolute;right:25px;bottom:-45px;font-family:"Noto Serif SC",serif;font-size:190px;color:rgba(255,255,255,.08)}
    .cta-box h2{font-family:"Noto Serif SC",serif;font-size:30px;line-height:1.4;margin-bottom:8px}
    .cta-box p{color:#f1ddd4;font-size:13px;max-width:640px}
    .cta-box .btn{position:relative;z-index:1;background:#fff8ef;color:var(--red)}
    .cta-box .btn:hover{background:var(--gold);color:var(--ink)}
    .site-footer{background:#242223;color:#e8ded6;padding:60px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:42px;border-bottom:1px solid #48403d}
    .footer-brand p{color:#a99d95;font-size:12px;line-height:1.9;max-width:300px;margin-top:14px}
    .footer-title{font-family:"Noto Serif SC",serif;font-size:15px;color:#fff5ec;margin-bottom:14px}
    .footer-links{display:grid;gap:8px}
    .footer-links a{font-size:12px;color:#a99d95}
    .footer-links a:hover{color:#e4b568}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#8f8580;font-size:11px}
    :focus-visible{outline:3px solid rgba(201,155,82,.8);outline-offset:3px}
    @media(max-width:1024px){
      .nav{gap:15px}.nav a{font-size:12px}
      .hero-layout{gap:30px}.film-grid{grid-template-columns:repeat(3,1fr)}
      .category-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(calc(100% - 28px),var(--container))}
      .nav-wrap{height:68px}.menu-toggle{display:block}
      .nav{display:none;position:absolute;top:68px;left:14px;right:14px;padding:15px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;align-items:stretch;flex-direction:column;gap:2px}
      .nav.open{display:flex}.nav a{padding:11px 10px}.nav-action{text-align:center;margin-top:6px}
      .hero{padding:48px 0}.hero-layout,.feature-grid,.news-layout,.ranking-layout{grid-template-columns:1fr}
      .hero-stage{min-height:320px}.hero-poster{height:330px}
      .section-head{display:block}.section-head p{margin-top:10px}
      .section-link{display:inline-block;margin-top:14px}
      .film-grid{grid-template-columns:repeat(2,1fr);gap:14px}.film-image{height:245px}
      .category-grid{grid-template-columns:repeat(2,1fr)}
      .feature-main{min-height:350px}.feature-side{grid-template-rows:auto}
      .news-main{grid-template-columns:1fr}.news-main img{height:210px;min-height:0}
      .evidence-grid{grid-template-columns:repeat(2,1fr)}
      .quote-grid,.safety-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .cta-box{display:block;padding:32px 25px}.cta-box .btn{margin-top:22px}
    }
    @media(max-width:520px){
      body{font-size:14px}.brand-name{font-size:14px}.brand-mark{width:34px;height:34px;font-size:19px}
      .hero h1{font-size:38px}.hero-copy{font-size:15px;line-height:1.9}
      .hero-stage{min-height:270px}.hero-poster{height:280px}.year-note{left:-10px}.hero-stamp{right:-8px;width:70px;height:70px;font-size:10px}
      section{padding:58px 0}.category-card{min-height:165px;padding:18px 15px}.category-card h3{font-size:17px}
      .film-image{height:205px}.film-info{padding:12px}.film-info h3{font-size:15px}
      .film-meta{display:block}.film-meta span{display:block;margin-top:3px}
      .mini-feature{grid-template-columns:35% 65%}.mini-copy{padding:15px 12px}.mini-copy h3{font-size:15px}
      .rank-item{grid-template-columns:27px 1fr auto}.rank-tag{display:none}
      .faq-grid{grid-template-columns:1fr}.evidence-card{padding:22px 16px}.evidence-card strong{font-size:28px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
      .cta-box h2{font-size:25px}
    }