/* roulang page: index */
:root{
      --ink:#20242d;
      --muted:#737985;
      --paper:#faf9f6;
      --surface:#ffffff;
      --soft:#f0eee9;
      --line:#e7e4de;
      --accent:#bb5d54;
      --accent-dark:#8f3f3b;
      --gold:#c58b45;
      --night:#29282d;
      --radius:16px;
      --shadow:0 16px 42px rgba(42,35,29,.08);
      --container:1180px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;object-fit:cover}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 40px));margin:auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em}
    .eyebrow:before{content:"";width:22px;height:1px;background:var(--accent)}
    .section{padding:88px 0;border-top:1px solid var(--line)}
    .section.alt{background:#f4f1ec}
    .section.dark{background:var(--night);color:#fff;border:0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
    .section-head h2{font-size:clamp(25px,3vw,39px);line-height:1.25;letter-spacing:-.01em;margin-top:10px}
    .section-head p{max-width:560px;color:var(--muted);font-size:14px}
    .dark .section-head p{color:#bcb9ba}
    .header{position:sticky;top:0;z-index:20;background:rgba(250,249,246,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
    .nav{height:76px;display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:11px;min-width:max-content;font-weight:800}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 8px 18px rgba(187,93,84,.2)}
    .brand-name{font-size:15px}
    .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
    .nav-links a{padding:9px 12px;color:#646770;font-size:13px;border-radius:9px;transition:.2s}
    .nav-links a:hover,.nav-links a.active{background:#ece9e3;color:var(--accent-dark)}
    .nav-action{padding:10px 16px;border:1px solid var(--line);border-radius:9px;color:var(--accent-dark);font-size:13px;font-weight:700;transition:.2s}
    .nav-action:hover{border-color:var(--accent);background:#fff}
    .menu-toggle{display:none;border:0;background:transparent;font-size:24px;color:var(--ink)}
    .hero{background:#eeece7;border-top:0;padding:54px 0 48px;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;right:-100px;top:-160px;width:460px;height:460px;border:1px solid rgba(187,93,84,.2);border-radius:50%}
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;min-height:330px}
    .hero h1{font-size:clamp(34px,5vw,62px);line-height:1.16;letter-spacing:-.03em;max-width:760px;margin:14px 0 20px}
    .hero h1 em{font-style:normal;color:var(--accent)}
    .hero-copy{font-size:16px;color:#686a70;max-width:680px}
    .hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 21px;border:1px solid transparent;font-size:14px;font-weight:700;transition:.22s}
    .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(187,93,84,.2)}
    .btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
    .btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
    .btn-light:hover{border-color:var(--accent);color:var(--accent-dark)}
    .hero-note{margin-top:20px;font-size:12px;color:#8c8d91}
    .hero-panel{position:relative;z-index:1;background:#fff;border:1px solid var(--line);padding:23px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .hero-panel img{height:190px;border-radius:11px}
    .panel-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
    .panel-meta strong{font-size:17px}.panel-meta span{font-size:12px;color:var(--accent)}
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
    .stat{padding:13px;background:#f7f5f1;border-radius:10px}.stat b{display:block;font-size:20px}.stat small{color:var(--muted);font-size:11px}
    .feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .feature{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.22s}
    .feature:hover,.media-card:hover,.news-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .feature-number{color:var(--accent);font-size:13px;font-weight:800}.feature h3{font-size:18px;margin:12px 0 8px}.feature p{font-size:13px;color:var(--muted)}
    .media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s}
    .media-card img{height:210px}
    .media-body{padding:16px}
    .media-body h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .media-body p{font-size:12px;color:var(--muted);margin:5px 0 12px}
    .meta-line{display:flex;justify-content:space-between;align-items:center;font-size:12px}
    .badge{display:inline-flex;padding:3px 8px;border-radius:5px;background:#f4e8e4;color:var(--accent-dark);font-weight:700;font-size:11px}
    .rating{color:var(--gold);font-weight:700}
    .popular-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:18px}
    .popular-card{position:relative;min-height:360px;border-radius:var(--radius);overflow:hidden;background:#333}
    .popular-card:first-child{grid-row:span 2;min-height:738px}
    .popular-card img{height:100%;position:absolute;inset:0}
    .popular-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(19,18,20,.9))}
    .popular-info{position:absolute;z-index:1;bottom:23px;left:22px;right:22px;color:#fff}.popular-info h3{font-size:21px}.popular-info p{font-size:12px;color:#ddd;margin-top:4px}
    .category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .category{padding:22px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.2s}
    .category:hover{border-color:var(--accent);background:#fffaf8}.category h3{font-size:16px;margin-bottom:7px}.category p{font-size:12px;color:var(--muted)}
    .category-link{display:inline-block;margin-top:14px;color:var(--accent-dark);font-size:12px;font-weight:700}
    .rank-layout{display:grid;grid-template-columns:1fr .78fr;gap:22px}
    .ranking{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .rank-item{display:grid;grid-template-columns:45px 1fr 100px 62px;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
    .rank-item:last-child{border-bottom:0}.rank-no{font-size:18px;font-weight:800;color:#c6c1bb}.rank-item:nth-child(-n+3) .rank-no{color:var(--accent)}
    .rank-title{font-weight:600}.rank-title small{display:block;color:var(--muted);font-size:11px;font-weight:400}.heat{color:var(--accent);font-size:12px}.rank-score{font-weight:700;font-size:13px;text-align:right}
    .scene{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.scene img{height:360px;border-radius:var(--radius)}
    .scene-copy h2{font-size:35px;line-height:1.3;margin:13px 0 17px}.scene-copy p{color:var(--muted);margin-bottom:23px}
    .steps{display:grid;gap:16px}.step{display:grid;grid-template-columns:34px 1fr;gap:13px}.step i{width:30px;height:30px;border-radius:50%;background:#f2dfda;color:var(--accent-dark);font-style:normal;text-align:center;line-height:30px;font-weight:700}.step h3{font-size:15px}.step p{font-size:12px;color:var(--muted);margin-top:2px}
    .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trust{padding:20px;border-left:2px solid var(--accent);background:rgba(255,255,255,.06)}.trust strong{display:block;font-size:22px;color:#fff}.trust span{font-size:12px;color:#bdb9bb}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-item{display:flex;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.22s}.news-item img{width:92px;height:76px;border-radius:8px;flex:none}.news-item h3{font-size:14px;line-height:1.45}.news-item time{display:block;color:var(--muted);font-size:11px;margin-top:8px}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:21px}.faq h3{font-size:15px;margin-bottom:8px}.faq p{font-size:13px;color:var(--muted)}
    .closing{padding:64px 0;background:#eee9e3}.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.closing h2{font-size:30px;line-height:1.35}.closing p{color:var(--muted);font-size:13px;margin-top:7px}
    footer{background:#29282d;color:#d7d3d0;padding:56px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}.footer-brand p{font-size:13px;color:#999497;max-width:290px;margin-top:15px}.footer-col h3{font-size:14px;color:#fff;margin-bottom:14px}.footer-col a{display:block;color:#aaa5a5;font-size:12px;margin:8px 0;transition:.2s}.footer-col a:hover{color:#fff}.copyright{border-top:1px solid #464347;margin-top:40px;padding-top:18px;color:#878285;font-size:11px}
    :focus-visible{outline:3px solid rgba(197,139,69,.45);outline-offset:3px}
    @media(max-width:1024px){.nav-links{gap:0}.media-grid{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.popular-grid{grid-template-columns:1fr 1fr}.popular-card:first-child{grid-row:auto;min-height:420px}.trust-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.container{width:min(var(--container),calc(100% - 28px))}.nav{height:68px}.menu-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{text-align:center}.nav-action{display:none}.hero{padding:38px 0}.hero-grid,.scene,.rank-layout{grid-template-columns:1fr;gap:28px}.hero h1{font-size:38px}.section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:13px}.feature-row,.news-grid{grid-template-columns:1fr}.media-grid{grid-template-columns:repeat(2,1fr)}.media-card img{height:180px}.category-grid{grid-template-columns:repeat(2,1fr)}.popular-grid{grid-template-columns:1fr}.popular-card:first-child{min-height:420px}.popular-card{min-height:280px}.scene img{height:270px}.closing-inner{display:block}.closing .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.brand-name{font-size:13px}.hero h1{font-size:32px}.hero-copy{font-size:14px}.hero-panel img{height:160px}.stats{gap:6px}.stat{padding:10px}.stat b{font-size:17px}.media-grid{gap:10px}.media-card img{height:145px}.media-body{padding:12px}.media-body h3{font-size:14px}.rank-item{grid-template-columns:30px 1fr 58px;padding:13px 12px}.rank-item .badge{display:none}.rank-score{font-size:12px}.category-grid{gap:9px}.category{padding:16px 12px}.trust-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}}

/* roulang page: category1 */
:root{
      --ink:#20242d;
      --muted:#737985;
      --paper:#faf9f6;
      --surface:#fff;
      --soft:#f0eee9;
      --line:#e7e4de;
      --accent:#bb5d54;
      --accent-dark:#8f3f3b;
      --gold:#c58b45;
      --night:#29282d;
      --radius:16px;
      --shadow:0 16px 42px rgba(42,35,29,.08);
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:"Noto Sans SC",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;object-fit:cover}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 40px));margin:auto}
    .header{position:sticky;top:0;z-index:20;background:rgba(250,249,246,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
    .nav{height:76px;display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:11px;min-width:max-content;font-weight:800}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 8px 18px rgba(187,93,84,.2)}
    .brand-name{font-size:15px}
    .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
    .nav-links a{padding:9px 12px;color:#646770;font-size:13px;border-radius:9px;transition:.2s}
    .nav-links a:hover,.nav-links a.active{background:#ece9e3;color:var(--accent-dark)}
    .nav-action{padding:10px 16px;border:1px solid var(--line);border-radius:9px;color:var(--accent-dark);font-size:13px;font-weight:700;transition:.2s}
    .nav-action:hover{border-color:var(--accent);background:#fff}
    .menu-toggle{display:none;border:0;background:transparent;font-size:24px;color:var(--ink)}
    .hero{background:#eeece7;padding:56px 0 52px;border-top:0;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;right:-120px;top:-180px;width:500px;height:500px;border:1px solid rgba(187,93,84,.2);border-radius:50%}
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:70px;align-items:center;min-height:360px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em}
    .eyebrow:before{content:"";width:22px;height:1px;background:var(--accent)}
    .hero h1{font-size:clamp(34px,5vw,62px);line-height:1.16;letter-spacing:-.03em;max-width:760px;margin:14px 0 20px}
    .hero h1 em{font-style:normal;color:var(--accent)}
    .hero-copy{font-size:16px;color:#686a70;max-width:690px}
    .hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 21px;border:1px solid transparent;font-size:14px;font-weight:700;transition:.22s}
    .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(187,93,84,.2)}
    .btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
    .btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
    .btn-light:hover{border-color:var(--accent);color:var(--accent-dark)}
    .hero-note{margin-top:20px;font-size:12px;color:#8c8d91}
    .hero-panel{position:relative;z-index:1;background:#fff;border:1px solid var(--line);padding:23px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .hero-panel img{height:188px;border-radius:11px}
    .panel-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
    .panel-meta strong{font-size:17px}
    .panel-meta span{font-size:12px;color:var(--accent)}
    .signal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
    .signal{padding:13px 0 0;border-top:1px solid var(--line)}
    .signal strong{display:block;font-size:23px;line-height:1.2}
    .signal span{color:var(--muted);font-size:11px}
    .section{padding:84px 0;border-top:1px solid var(--line)}
    .section.alt{background:#f4f1ec}
    .section.dark{background:var(--night);color:#fff;border:0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
    .section-head h2{font-size:clamp(25px,3vw,39px);line-height:1.25;letter-spacing:-.01em;margin:10px 0 0}
    .section-head p{max-width:560px;color:var(--muted);font-size:14px;margin:0}
    .dark .section-head p{color:#bcb9ba}
    .intro-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
    .intro-layout h2{font-size:34px;line-height:1.35;margin:10px 0 18px}
    .intro-layout p{color:var(--muted);max-width:680px}
    .quote-box{border-left:3px solid var(--accent);padding:10px 0 10px 24px;font-size:20px;line-height:1.6;color:var(--accent-dark)}
    .spec-list{border-top:1px solid var(--line)}
    .spec-list div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}
    .spec-list span{color:var(--muted)}
    .media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s}
    .media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .media-card img{height:210px}
    .media-body{padding:16px}
    .media-body h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
    .media-body p{font-size:12px;color:var(--muted);margin:5px 0 12px}
    .meta-line{display:flex;justify-content:space-between;align-items:center;font-size:12px}
    .badge{display:inline-flex;padding:3px 8px;border-radius:5px;background:#f4e8e4;color:var(--accent-dark);font-weight:700;font-size:11px}
    .rating{color:var(--gold);font-weight:700}
    .feature-row{display:grid;grid-template-columns:1.15fr .9fr .95fr;gap:18px}
    .feature{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.22s}
    .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .feature-number{color:var(--accent);font-size:13px;font-weight:800}
    .feature h3{font-size:18px;margin:12px 0 8px}
    .feature p{font-size:13px;color:var(--muted);margin:0}
    .category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .category-tile{padding:20px 17px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.2s}
    .category-tile:hover{border-color:var(--accent);transform:translateY(-3px)}
    .category-tile strong{display:block;font-size:16px;margin-bottom:7px}
    .category-tile span{display:block;color:var(--muted);font-size:12px;line-height:1.65}
    .rank-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:34px;align-items:start}
    .rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .rank-item{display:grid;grid-template-columns:45px 1fr 100px 62px;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
    .rank-item:last-child{border-bottom:0}
    .rank-item:nth-child(-n+3) .rank-no{color:var(--accent)}
    .rank-no{font-size:20px;font-weight:800;color:#b8b5af}
    .rank-title{font-weight:600}
    .rank-title small{display:block;color:var(--muted);font-size:11px;font-weight:400}
    .rank-hot{font-size:12px;color:var(--accent-dark)}
    .rank-score{font-weight:700;color:var(--gold)}
    .rank-aside{padding:28px;background:#ded9d0;border-radius:var(--radius)}
    .rank-aside h3{font-size:24px;line-height:1.35;margin:0 0 12px}
    .rank-aside p{font-size:13px;color:#69665f;margin:0}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .news-item{display:flex;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.22s}
    .news-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .news-item img{width:92px;height:76px;border-radius:8px;flex:none}
    .news-item h3{font-size:14px;line-height:1.45;margin:0}
    .news-item time{display:block;color:var(--muted);font-size:11px;margin-top:8px}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:21px}
    .faq h3{font-size:15px;margin:0 0 8px}
    .faq p{font-size:13px;color:var(--muted);margin:0}
    .cta-band{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 32px;background:#eee5df;border:1px solid #e1d5ce;border-radius:var(--radius)}
    .cta-band h2{font-size:25px;margin:0 0 5px}
    .cta-band p{font-size:13px;color:var(--muted);margin:0}
    footer{padding:58px 0 25px;background:#242329;color:#fff}
    .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px}
    .footer-brand p{max-width:300px;color:#aaa8ad;font-size:13px;line-height:1.8}
    .footer-col{display:flex;flex-direction:column;gap:10px}
    .footer-col h3{font-size:14px;margin:0 0 6px;color:#fff}
    .footer-col a{font-size:13px;color:#aaa8ad;transition:.2s}
    .footer-col a:hover{color:#fff}
    .copyright{padding-top:28px;margin-top:36px;border-top:1px solid #444149;color:#89878d;font-size:12px}
    :focus-visible{outline:3px solid rgba(187,93,84,.35);outline-offset:3px}
    @media(max-width:1024px){
      .nav{gap:16px}.nav-links a{padding:8px 7px}
      .hero-grid{gap:36px}.media-grid{grid-template-columns:repeat(3,1fr)}
      .category-grid{grid-template-columns:repeat(3,1fr)}
      .news-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 30px))}
      .nav{height:68px}.nav-action{display:none}.menu-toggle{display:block;margin-left:auto}
      .nav-links{display:none;position:absolute;left:15px;right:15px;top:76px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-links.open{display:flex}.nav-links a{padding:11px 13px}
      .hero{padding:42px 0}.hero-grid,.intro-layout,.rank-layout{grid-template-columns:1fr}
      .hero-panel{max-width:560px}.section{padding:64px 0}
      .media-grid{grid-template-columns:repeat(2,1fr)}
      .feature-row{grid-template-columns:1fr}
      .category-grid{grid-template-columns:repeat(2,1fr)}
      .section-head{display:block}.section-head p{margin-top:14px}
      .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
      .footer-col:last-child{display:none}
    }
    @media(max-width:520px){
      .brand-name{font-size:13px;max-width:205px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .hero h1{font-size:37px}.hero-copy{font-size:14px}
      .signal-grid{gap:8px}.signal strong{font-size:19px}
      .media-grid,.news-grid,.faq-grid{grid-template-columns:1fr}
      .category-grid{grid-template-columns:1fr 1fr}
      .rank-item{grid-template-columns:32px 1fr 55px;padding:13px 14px}
      .rank-hot{display:none}.rank-score{font-size:13px}
      .cta-band{display:block;padding:24px}.cta-band .btn{margin-top:18px}
      .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
    }

/* roulang page: category2 */
:root{
 --ink:#20242d;
 --muted:#737985;
 --paper:#faf9f6;
 --surface:#ffffff;
 --soft:#f0eee9;
 --line:#e7e4de;
 --accent:#bb5d54;
 --accent-dark:#8f3f3b;
 --gold:#c58b45;
 --night:#29282d;
 --radius:16px;
 --shadow:0 16px 42px rgba(42,35,29,.08);
 --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em}
.eyebrow:before{content:"";width:22px;height:1px;background:var(--accent)}
.section{padding:84px 0;border-top:1px solid var(--line)}
.section.alt{background:#f4f1ec}
.section.dark{background:var(--night);color:#fff;border:0}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}
.section-head h2{font-size:clamp(25px,3vw,39px);line-height:1.25;letter-spacing:-.01em;margin-top:10px}
.section-head p{max-width:560px;color:var(--muted);font-size:14px}
.dark .section-head p{color:#bcb9ba}
.header{position:sticky;top:0;z-index:20;background:rgba(250,249,246,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content;font-weight:800}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 8px 18px rgba(187,93,84,.2)}
.brand-name{font-size:15px}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{padding:9px 12px;color:#646770;font-size:13px;border-radius:9px;transition:.2s}
.nav-links a:hover,.nav-links a.active{background:#ece9e3;color:var(--accent-dark)}
.nav-action{padding:10px 16px;border:1px solid var(--line);border-radius:9px;color:var(--accent-dark);font-size:13px;font-weight:700;transition:.2s}
.nav-action:hover{border-color:var(--accent);background:#fff}
.menu-toggle{display:none;border:0;background:transparent;font-size:24px;color:var(--ink)}
.hero{background:#eeece7;border-top:0;padding:48px 0 42px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-100px;top:-160px;width:460px;height:460px;border:1px solid rgba(187,93,84,.2);border-radius:50%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;min-height:420px}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.16;letter-spacing:-.03em;max-width:730px;margin:14px 0 20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy{font-size:16px;color:#686a70;max-width:660px}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 21px;border:1px solid transparent;font-size:14px;font-weight:700;transition:.22s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(187,93,84,.2)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-light:hover{border-color:var(--accent);color:var(--accent-dark)}
.hero-note{margin-top:20px;font-size:12px;color:#8c8d91}
.hero-visual{position:relative;z-index:1}
.hero-visual img{height:390px;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-visual:before{content:"夜间精选";position:absolute;left:22px;top:22px;z-index:2;padding:7px 12px;color:#fff;background:rgba(41,40,45,.76);border-radius:7px;font-size:12px}
.hero-caption{position:absolute;right:18px;bottom:18px;left:18px;z-index:2;color:#fff}
.hero-caption strong{font-size:20px;display:block}
.hero-caption span{font-size:12px;color:#ded9d4}
.hero-visual:after{content:"";position:absolute;inset:45% 0 0;border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(transparent,rgba(20,18,20,.78))}
.series-bar{position:absolute;bottom:-1px;left:0;right:0;z-index:3;border-top:1px solid rgba(255,255,255,.18);display:flex;gap:8px;padding:12px 18px;color:#fff;background:rgba(26,24,27,.76);backdrop-filter:blur(8px)}
.series-bar a{font-size:12px;color:#e9e5e0;padding:5px 10px;border-radius:7px;transition:.2s}
.series-bar a:hover,.series-bar a.active{background:var(--accent);color:#fff}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.mini-stat{padding:14px 16px;border-left:2px solid var(--accent);background:rgba(255,255,255,.56)}
.mini-stat strong{display:block;font-size:20px;line-height:1.2}
.mini-stat span{font-size:11px;color:var(--muted)}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.22s}
.feature:hover,.media-card:hover,.news-item:hover,.topic:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature-number{color:var(--accent);font-size:13px;font-weight:800}
.feature h3{font-size:18px;margin:12px 0 8px}
.feature p{font-size:13px;color:var(--muted)}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.22s}
.media-card img{height:205px}
.media-body{padding:16px}
.media-body h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-body p{font-size:12px;color:var(--muted);margin:5px 0 12px;min-height:24px}
.meta-line{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.badge{display:inline-flex;padding:3px 8px;border-radius:5px;background:#f4e8e4;color:var(--accent-dark);font-weight:700;font-size:11px}
.rating{color:var(--gold);font-weight:700}
.topic-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.topic{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.22s}
.topic.large{grid-row:span 2;background:#36343a;color:#fff;position:relative;overflow:hidden;min-height:354px}
.topic.large img{position:absolute;inset:0;height:100%;opacity:.62}
.topic.large:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(20,18,20,.92))}
.topic-content{position:relative;z-index:1;margin-top:220px}
.topic-content h3{font-size:24px}
.topic-content p{font-size:13px;color:#d4ced0;margin-top:6px}
.topic h3{font-size:18px;margin-bottom:8px}
.topic p{font-size:13px;color:var(--muted)}
.topic-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.topic-tags span{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:3px 8px;color:var(--accent-dark)}
.rank-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rank-head,.rank-item{display:grid;grid-template-columns:52px 1fr 110px 70px 94px;align-items:center;gap:12px}
.rank-head{padding:14px 20px;background:#f3f0eb;color:var(--muted);font-size:12px}
.rank-item{padding:14px 20px;border-bottom:1px solid var(--line);transition:.2s}
.rank-item:last-child{border-bottom:0}
.rank-item:hover{background:#fcfaf7}
.rank-no{font-size:20px;font-weight:800;color:#a9a49e}
.rank-item:nth-child(-n+4) .rank-no{color:var(--accent)}
.rank-title{font-weight:600}
.rank-title small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.rank-hot{color:var(--accent-dark);font-size:13px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-item{display:flex;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.22s}
.news-item img{width:92px;height:76px;border-radius:8px;flex:none}
.news-item h3{font-size:14px;line-height:1.45}
.news-item time{display:block;color:var(--muted);font-size:11px;margin-top:8px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:21px}
.faq h3{font-size:15px;margin-bottom:8px}
.faq p{font-size:13px;color:var(--muted)}
.cta{padding:56px 0;background:#e9e3dc}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{font-size:clamp(25px,3vw,38px);line-height:1.3}
.cta p{color:var(--muted);margin-top:8px}
.cta .btn{flex:none}
footer{background:var(--night);color:#fff;padding:58px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.footer-brand .brand-name{color:#fff}
.footer-brand p{color:#aaa6a6;font-size:13px;max-width:330px;margin-top:17px}
.footer-col h3{font-size:14px;margin-bottom:15px}
.footer-col a{display:block;color:#aaa6a6;font-size:13px;margin:9px 0;transition:.2s}
.footer-col a:hover{color:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:20px;color:#8f8b8c;font-size:12px}
@media(max-width:1024px){
 .nav{gap:16px}.nav-links a{padding:8px 8px}
 .hero-grid{gap:34px}.media-grid{grid-template-columns:repeat(3,1fr)}
 .media-card:nth-child(n+10){display:none}
 .category-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 30px))}
 .nav{height:68px}.brand-name{font-size:13px}
 .nav-links{display:none;position:absolute;left:15px;right:15px;top:76px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
 .nav-links.open{display:flex}.nav-links a{padding:11px 13px}
 .nav-action{display:none}.menu-toggle{display:block;margin-left:auto}
 .hero{padding:34px 0}.hero-grid{grid-template-columns:1fr;gap:28px;min-height:0}
 .hero h1{font-size:42px}.hero-visual img{height:330px}
 .section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:12px}
 .feature-row,.topic-layout{grid-template-columns:1fr}.topic.large{grid-row:auto;min-height:340px}
 .media-grid{grid-template-columns:repeat(2,1fr);gap:14px}.media-card img{height:180px}
 .rank-head{display:none}.rank-item{grid-template-columns:38px 1fr 66px 56px;padding:13px 14px}
 .rank-item .rank-badge{display:none}
 .news-grid{grid-template-columns:1fr 1fr}.faq-grid{grid-template-columns:1fr}
 .cta-box{display:block}.cta .btn{margin-top:22px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:520px){
 .hero h1{font-size:36px}.hero-copy{font-size:14px}
 .hero-actions .btn{width:100%}.hero-visual img{height:270px}
 .series-bar{overflow-x:auto;white-space:nowrap}.series-bar a{flex:none}
 .mini-stats{gap:7px}.mini-stat{padding:11px 9px}.mini-stat strong{font-size:17px}
 .media-grid{grid-template-columns:1fr 1fr}.media-card img{height:145px}
 .media-body{padding:12px}.media-body h3{font-size:14px}.media-body p{font-size:11px}
 .news-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
 .footer-brand{grid-column:1/-1}
 .rank-item{grid-template-columns:28px 1fr 52px;padding:12px 10px}.rank-hot{font-size:11px}.rank-score{font-size:12px}
}