/* roulang page: index */
:root {
            --ink: #17151d;
            --muted: #77727d;
            --paper: #f8f6f2;
            --panel: #ffffff;
            --night: #211b2a;
            --night-2: #33283e;
            --rose: #d65d74;
            --rose-dark: #ad3e59;
            --gold: #d3a35a;
            --line: #e8e1dc;
            --radius: 18px;
            --shadow: 0 18px 45px rgba(39, 27, 37, .09);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", system-ui, -apple-system, sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input { font: inherit; }
        .container { max-width: 1180px; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(248,246,242,.92);
            border-bottom: 1px solid rgba(232,225,220,.8);
            backdrop-filter: blur(14px);
        }
        .navbar { min-height: 78px; }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: #fff;
            background: var(--rose);
            font-size: 20px;
            font-weight: 800;
            box-shadow: 0 8px 20px rgba(214,93,116,.25);
        }
        .brand-name { font-weight: 800; letter-spacing: -.04em; }
        .nav-link {
            position: relative;
            color: #655e68 !important;
            font-size: 14px;
            font-weight: 600;
            padding: 10px 14px !important;
        }
        .nav-link:hover, .nav-link.active { color: var(--rose-dark) !important; }
        .nav-link.active::after {
            content: "";
            position: absolute;
            height: 2px;
            width: 18px;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--rose);
        }
        .nav-search {
            border: 1px solid var(--line);
            border-radius: 50px;
            background: #fff;
            padding: 8px 13px;
            color: var(--muted);
            font-size: 13px;
        }
        .hero {
            padding: 74px 0 68px;
            background: #eee7e3;
            overflow: hidden;
        }
        .hero-kicker, .section-kicker {
            color: var(--rose-dark);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .hero h1 {
            max-width: 690px;
            margin: 17px 0 20px;
            font-size: clamp(38px, 5vw, 68px);
            line-height: 1.14;
            letter-spacing: -.065em;
            font-weight: 800;
        }
        .hero h1 span { color: var(--rose-dark); }
        .hero-copy {
            max-width: 650px;
            color: #5d5661;
            font-size: 16px;
            line-height: 1.95;
        }
        .btn-main {
            border: 0;
            border-radius: 10px;
            padding: 12px 20px;
            color: #fff;
            background: var(--rose-dark);
            font-size: 14px;
            font-weight: 700;
            transition: .25s ease;
        }
        .btn-main:hover, .btn-main:focus { color: #fff; background: #8e3048; transform: translateY(-2px); }
        .btn-quiet {
            border: 1px solid #d2c7c4;
            border-radius: 10px;
            padding: 11px 20px;
            color: var(--ink);
            background: rgba(255,255,255,.4);
            font-size: 14px;
            font-weight: 700;
            transition: .25s ease;
        }
        .btn-quiet:hover, .btn-quiet:focus { background: #fff; border-color: var(--rose); color: var(--rose-dark); }
        .hero-feature {
            position: relative;
            min-height: 365px;
            padding: 28px;
            display: flex;
            align-items: end;
            border-radius: 24px;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(0deg, rgba(25,17,28,.85), rgba(25,17,28,.05)), url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1000&q=85") center/cover;
            box-shadow: var(--shadow);
        }
        .hero-feature h2 { margin: 0 0 7px; font-size: 26px; letter-spacing: -.04em; }
        .hero-feature p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; }
        .feature-tag, .badge-soft {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            border-radius: 30px;
            padding: 4px 9px;
            color: #fff;
            background: var(--rose);
            font-size: 11px;
            font-weight: 700;
        }
        .feature-tag { margin-bottom: 14px; }
        section { padding: 84px 0; }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 30px;
        }
        .section-title {
            margin: 8px 0 0;
            font-size: 32px;
            line-height: 1.25;
            letter-spacing: -.055em;
            font-weight: 800;
        }
        .section-desc { max-width: 540px; color: var(--muted); font-size: 14px; }
        .section-link { color: var(--rose-dark); font-size: 13px; font-weight: 700; white-space: nowrap; }
        .section-link:hover { color: var(--ink); }
        .intro-band { background: var(--night); color: #fff; }
        .intro-band .section-desc { color: #bdb2c3; }
        .stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.15); }
        .stat { padding: 28px; background: rgba(255,255,255,.035); }
        .stat strong { display: block; color: #fff; font-size: 36px; line-height: 1; }
        .stat span { display: block; margin-top: 12px; color: #bdb2c3; font-size: 13px; }
        .content-card {
            height: 100%;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--panel);
            box-shadow: 0 8px 26px rgba(39,27,37,.035);
            transition: .25s ease;
        }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .poster { aspect-ratio: 16/10; overflow: hidden; }
        .poster img { height: 100%; transition: transform .45s ease; }
        .content-card:hover .poster img { transform: scale(1.05); }
        .card-body { padding: 18px; }
        .card-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
        .card-text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
        .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; color: var(--muted); font-size: 12px; }
        .rating { color: var(--gold); font-weight: 800; }
        .badge-soft { color: var(--rose-dark); background: #fae7ea; }
        .topic-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
        .topic {
            min-height: 190px;
            padding: 22px;
            border-radius: var(--radius);
            color: #fff;
            background: var(--night-2);
            transition: .25s ease;
        }
        .topic:nth-child(2) { background: #934d61; }
        .topic:nth-child(3) { background: #655069; }
        .topic:nth-child(4) { background: #8b694e; }
        .topic:hover { transform: translateY(-4px); }
        .topic h3 { margin: 54px 0 8px; font-size: 19px; }
        .topic p { margin: 0; color: rgba(255,255,255,.73); font-size: 13px; line-height: 1.7; }
        .time-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
        .time-card { padding: 23px; border-top: 3px solid var(--rose); background: #fff; border-radius: 12px; box-shadow: 0 8px 22px rgba(39,27,37,.04); }
        .time-card strong { display: block; font-size: 26px; }
        .time-card span { color: var(--rose-dark); font-size: 12px; font-weight: 700; }
        .time-card p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
        .rank-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
        .rank-item { display: grid; grid-template-columns: 54px 1fr 100px 70px 88px; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
        .rank-item:last-child { border-bottom: 0; }
        .rank-no { color: var(--rose); font-size: 20px; font-weight: 800; }
        .rank-name { font-weight: 700; }
        .rank-sub, .rank-label { color: var(--muted); font-size: 12px; }
        .rank-hot { color: var(--rose-dark); font-weight: 700; font-size: 13px; }
        .quote-panel { padding: 36px; border-radius: var(--radius); background: #f0e3e3; }
        .quote-panel blockquote { margin: 0; max-width: 740px; font-size: 24px; line-height: 1.55; letter-spacing: -.04em; font-weight: 700; }
        .quote-panel cite { display: block; margin-top: 22px; color: var(--muted); font-size: 13px; font-style: normal; }
        .news-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px 28px; }
        .news-item { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
        .news-thumb { height: 86px; overflow: hidden; border-radius: 10px; }
        .news-thumb img { height: 100%; }
        .news-date { color: var(--rose-dark); font-size: 11px; font-weight: 700; }
        .news-item h3 { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
        .faq-wrap .accordion-item { border: 1px solid var(--line); border-radius: 12px !important; overflow: hidden; margin-bottom: 10px; }
        .accordion-button { padding: 18px 20px; color: var(--ink); background: #fff; font-weight: 700; box-shadow: none !important; }
        .accordion-button:not(.collapsed) { color: var(--rose-dark); background: #fff8f7; }
        .accordion-body { color: var(--muted); font-size: 14px; background: #fff; }
        .closing {
            padding: 66px 0;
            color: #fff;
            background: var(--rose-dark);
        }
        .closing h2 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.05em; }
        .closing p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); }
        .closing .btn-quiet { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
        .closing .btn-quiet:hover { color: var(--rose-dark); background: #fff; }
        footer { padding: 58px 0 24px; color: #bcb4be; background: var(--night); }
        footer .brand-name { color: #fff; }
        .footer-title { margin-bottom: 15px; color: #fff; font-size: 14px; font-weight: 700; }
        .footer-link { display: block; margin: 8px 0; color: #bcb4be; font-size: 13px; }
        .footer-link:hover { color: #fff; }
        .footer-bottom { margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); color: #887d8b; font-size: 12px; }
        :focus-visible { outline: 3px solid rgba(214,93,116,.35); outline-offset: 3px; }
        @media (max-width: 991px) {
            .hero { padding-top: 54px; }
            .hero-feature { margin-top: 30px; }
            .topic-grid { grid-template-columns: repeat(2,1fr); }
            .time-grid { grid-template-columns: repeat(2,1fr); }
        }
        @media (max-width: 767px) {
            section { padding: 58px 0; }
            .navbar { min-height: 68px; }
            .navbar-collapse { padding: 12px 0 8px; }
            .nav-search { margin-top: 8px; }
            .hero h1 { font-size: 42px; }
            .section-head { display: block; }
            .section-link { display: inline-block; margin-top: 15px; }
            .stat-grid { grid-template-columns: 1fr; }
            .news-list { grid-template-columns: 1fr; }
            .rank-item { grid-template-columns: 34px 1fr 62px; gap: 8px; }
            .rank-item .rank-label, .rank-item .rank-sub { display: none; }
            .rank-item .rank-hot { text-align: right; }
        }
        @media (max-width: 520px) {
            .hero { padding: 44px 0 48px; }
            .hero h1 { font-size: 36px; }
            .hero-copy { font-size: 14px; }
            .hero .btn-main, .hero .btn-quiet { width: 100%; }
            .topic-grid, .time-grid { grid-template-columns: 1fr; }
            .topic { min-height: 160px; }
            .topic h3 { margin-top: 34px; }
            .news-item { grid-template-columns: 96px 1fr; gap: 12px; }
            .news-thumb { height: 72px; }
            .quote-panel { padding: 24px; }
            .quote-panel blockquote { font-size: 20px; }
            .closing h2 { font-size: 28px; }
        }

/* roulang page: category1 */
:root {
 --ink:#17151d; --muted:#77727d; --paper:#f8f6f2; --panel:#fff;
 --night:#211b2a; --night-2:#33283e; --rose:#d65d74; --rose-dark:#ad3e59;
 --gold:#d3a35a; --line:#e8e1dc; --radius:18px;
 --shadow:0 18px 45px rgba(39,27,37,.09);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC",system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
.container{max-width:1180px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(248,246,242,.94);border-bottom:1px solid rgba(232,225,220,.8);backdrop-filter:blur(14px)}
.navbar{min-height:78px}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--rose);font-size:20px;font-weight:800;box-shadow:0 8px 20px rgba(214,93,116,.25)}
.brand-name{font-weight:800;letter-spacing:-.04em}
.nav-link{position:relative;color:#655e68!important;font-size:14px;font-weight:600;padding:10px 14px!important}
.nav-link:hover,.nav-link.active{color:var(--rose-dark)!important}
.nav-link.active::after{content:"";position:absolute;height:2px;width:18px;bottom:2px;left:50%;transform:translateX(-50%);background:var(--rose)}
.nav-search{border:1px solid var(--line);border-radius:50px;background:#fff;padding:8px 13px;color:var(--muted);font-size:13px}
main{overflow:hidden}
.page-hero{padding:88px 0 72px;background:var(--night);color:#fff;position:relative}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(33,27,42,.98) 0%,rgba(33,27,42,.75) 48%,rgba(33,27,42,.18)),url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1600&q=85") center/cover;opacity:.9}
.page-hero .container{position:relative;z-index:1}
.hero-kicker,.section-kicker{color:var(--rose);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.page-hero h1{max-width:720px;margin:16px 0 18px;font-size:clamp(38px,5vw,64px);line-height:1.15;letter-spacing:-.065em;font-weight:800}
.page-hero h1 span{color:#f2b5c2}
.hero-copy{max-width:650px;color:rgba(255,255,255,.76);font-size:16px;line-height:1.95}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn-main,.btn-quiet{border-radius:10px;padding:12px 20px;font-size:14px;font-weight:700;transition:.25s ease}
.btn-main{border:0;color:#fff;background:var(--rose-dark)}
.btn-main:hover,.btn-main:focus{color:#fff;background:#8e3048;transform:translateY(-2px)}
.btn-quiet{border:1px solid #d2c7c4;color:var(--ink);background:rgba(255,255,255,.7)}
.btn-quiet:hover,.btn-quiet:focus{background:#fff;border-color:var(--rose);color:var(--rose-dark)}
.hero-panel{padding:25px;border:1px solid rgba(255,255,255,.17);border-radius:20px;background:rgba(255,255,255,.09);backdrop-filter:blur(12px)}
.hero-panel-title{margin-bottom:18px;color:#fff;font-size:14px;font-weight:700}
.hero-metric{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.65);font-size:13px}
.hero-metric strong{color:#fff;font-size:20px}
section{padding:82px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-title{margin:8px 0 0;font-size:32px;line-height:1.25;letter-spacing:-.055em;font-weight:800}
.section-desc{max-width:540px;color:var(--muted);font-size:14px}
.section-link{color:var(--rose-dark);font-size:13px;font-weight:700;white-space:nowrap}
.section-link:hover{color:var(--ink)}
.content-card{height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:0 8px 26px rgba(39,27,37,.035);transition:.25s ease}
.content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.poster{overflow:hidden;aspect-ratio:4/5;background:#ded6d2}
.poster img{height:100%;transition:transform .45s ease}
.content-card:hover .poster img{transform:scale(1.05)}
.card-body{padding:18px}
.card-title{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.03em}
.card-text{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;color:var(--muted);font-size:12px}
.badge-soft{display:inline-flex;align-items:center;width:max-content;border-radius:30px;padding:4px 9px;color:var(--rose-dark);background:#fae7eb;font-size:11px;font-weight:700}
.rating{color:var(--gold);font-weight:800}
.feature-band{background:#eee7e3}
.feature-card{min-height:260px;padding:28px;display:flex;flex-direction:column;justify-content:end;border-radius:20px;color:#fff;background:linear-gradient(0deg,rgba(25,17,28,.9),rgba(25,17,28,.08)),url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1000&q=85") center/cover}
.feature-card.alt{background-image:linear-gradient(0deg,rgba(25,17,28,.9),rgba(25,17,28,.08)),url("https://images.unsplash.com/photo-1518676590629-3dcbd9c5a5c9?auto=format&fit=crop&w=1000&q=85")}
.feature-card h3{margin:12px 0 8px;font-size:24px;font-weight:800}
.feature-card p{margin:0;color:rgba(255,255,255,.72);font-size:13px}
.topic-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic-item{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.25s ease}
.topic-item:hover{border-color:var(--rose);box-shadow:var(--shadow);transform:translateY(-3px)}
.topic-index{color:var(--rose);font-size:12px;font-weight:800}
.topic-item h3{margin:12px 0 8px;font-size:18px}
.topic-item p{margin:0;color:var(--muted);font-size:13px}
.rank-panel{padding:18px;border-radius:20px;background:var(--night);color:#fff}
.rank-item{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;padding:15px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
.rank-item:last-child{border-bottom:0}
.rank-number{color:#f2b5c2;font-size:19px;font-weight:800}
.rank-name{font-size:14px;font-weight:700}
.rank-type{color:rgba(255,255,255,.55);font-size:12px}
.rank-hot{color:#e7bb72;font-size:12px;font-weight:700}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.news-thumb{height:86px;border-radius:12px;overflow:hidden}
.news-thumb img{height:100%}
.news-item h3{margin:0 0 7px;font-size:16px;font-weight:800}
.news-item p{margin:0;color:var(--muted);font-size:13px}
.news-date{color:var(--muted);font-size:12px;white-space:nowrap}
.quote-band{background:var(--rose-dark);color:#fff}
.quote-band blockquote{max-width:820px;margin:0;font-size:clamp(22px,3vw,34px);line-height:1.5;font-weight:700;letter-spacing:-.04em}
.quote-band cite{display:block;margin-top:18px;color:rgba(255,255,255,.7);font-size:13px;font-style:normal}
.faq-wrap{max-width:850px}
.accordion-item{border:1px solid var(--line)!important;border-radius:12px!important;overflow:hidden;margin-bottom:10px;background:#fff}
.accordion-button{padding:18px 20px;color:var(--ink);font-weight:700;background:#fff;box-shadow:none!important}
.accordion-button:not(.collapsed){color:var(--rose-dark);background:#fff4f5}
.accordion-body{color:var(--muted);font-size:14px;line-height:1.8}
.cta-band{padding:56px 0;background:#eee7e3}
.cta-band h2{margin:0 0 12px;font-size:32px;letter-spacing:-.05em}
.cta-band p{margin:0;color:var(--muted);font-size:14px}
footer{padding:62px 0 24px;background:var(--night);color:#fff}
footer .brand-name{color:#fff}
footer .small{color:rgba(255,255,255,.6);line-height:1.8}
.footer-title{margin-bottom:14px;color:#fff;font-size:13px;font-weight:800}
.footer-link{display:block;margin:8px 0;color:rgba(255,255,255,.6);font-size:13px}
.footer-link:hover{color:#fff}
.footer-bottom{margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:12px}
:focus-visible{outline:3px solid rgba(214,93,116,.35);outline-offset:3px}
@media (max-width:1024px){.topic-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.navbar{min-height:68px}.page-hero{padding:62px 0 54px}.hero-panel{margin-top:30px}.section-head{display:block}.section-link{display:inline-block;margin-top:12px}.news-item{grid-template-columns:100px 1fr}.news-date{grid-column:2}.rank-item{grid-template-columns:34px 1fr auto}.rank-type{display:none}}
@media (max-width:520px){.brand-name{font-size:14px}.nav-search{width:100%;margin:10px 0}.page-hero h1{font-size:39px}.hero-actions .btn-main,.hero-actions .btn-quiet{width:100%;text-align:center}.section-title{font-size:27px}.topic-list{grid-template-columns:1fr}.news-item{grid-template-columns:88px 1fr;gap:12px}.news-thumb{height:74px}.news-item h3{font-size:14px}.news-date{display:none}.rank-item{gap:9px}.rank-hot{font-size:11px}}