/* roulang page: index */
:root{--berry:#8b3157;--berry-dark:#63223e;--coral:#ed786f;--peach:#fff0e9;--mint:#e2f2ed;--ink:#29242a;--muted:#716a70;--line:#eadfe2;--paper:#fff9f8;--white:#fff;--radius:18px;--shadow:0 12px 32px rgba(74,35,52,.09);--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ed786f;outline-offset:3px}.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(255,249,248,.96);border-bottom:1px solid rgba(234,223,226,.9);backdrop-filter:blur(12px)}.nav-wrap{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;font-size:17px;white-space:nowrap}.brand-mark{height:39px;width:39px;border-radius:12px;background:linear-gradient(135deg,var(--berry),var(--coral));display:grid;place-items:center;color:white;font-size:16px;box-shadow:0 6px 14px #8b315733}.nav-links{display:flex;align-items:center;gap:23px;color:#595159;font-size:14px;font-weight:650}.nav-links a{padding:9px 0;transition:color .18s}.nav-links a:hover,.nav-links a.active{color:var(--berry)}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--berry);font-size:20px}.hero{min-height:470px;position:relative;overflow:hidden;color:white;background:#3f2632 url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=2000&q=85') center 48%/cover no-repeat}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,20,30,.88) 0%,rgba(57,30,43,.72) 48%,rgba(75,37,55,.23) 100%)}.hero-inner{position:relative;min-height:470px;display:flex;align-items:center}.hero-copy{max-width:720px;padding:54px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffe2da;font-size:13px;font-weight:750;letter-spacing:0}.eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}h1{font-size:44px;line-height:1.2;margin:14px 0 10px;max-width:680px;font-weight:850}.hero h1 em{font-style:normal;color:#ffb3a4}.hero-sub{font-size:18px;font-weight:700;color:#fff2ef;margin:0 0 12px}.hero-desc{font-size:15px;color:#f1e6e9;max-width:650px;margin:0 0 24px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:11px;font-weight:750;font-size:14px;transition:transform .18s,background .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(110deg,var(--coral),#c84f74);color:white;box-shadow:0 8px 18px #b8496c44}.btn-primary:hover{box-shadow:0 10px 22px #b8496c66}.btn-ghost{border-color:#ffffff88;color:white;background:#ffffff12}.btn-ghost:hover{background:#ffffff25}.section{padding:62px 0}.section-soft{background:#fff}.section-tint{background:#fff1ed}.section-dark{background:#382630;color:#fff}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.section-head h2{font-size:27px;line-height:1.3;margin:0;font-weight:820}.section-head p{max-width:630px;color:var(--muted);margin:9px 0 0;font-size:14px}.section-dark .section-head p{color:#d6c7ce}.section-kicker{display:block;color:var(--berry);font-size:12px;font-weight:800;margin-bottom:6px}.section-dark .section-kicker{color:#ffb2a5}.text-link{font-size:14px;color:var(--berry);font-weight:750;white-space:nowrap}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.stat strong{font-size:23px;line-height:1.15;color:var(--berry);display:block}.stat span{color:var(--muted);font-size:13px}.stat-badge{width:42px;height:42px;border-radius:13px;background:var(--peach);color:var(--berry);display:grid;place-items:center;font-size:18px}.catalog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:19px 14px}.media-card{min-width:0}.media-link{display:block}.poster{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#eadde1;position:relative;box-shadow:0 5px 16px #4b29300e}.poster img{transition:transform .3s}.media-link:hover .poster img{transform:scale(1.045)}.poster:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(36,20,30,.34));pointer-events:none}.badges{position:absolute;top:9px;left:9px;display:flex;gap:5px;z-index:1}.badge{font-size:10px;line-height:1;padding:6px 7px;border-radius:6px;font-weight:800;background:#fff;color:var(--berry)}.badge.hot{background:var(--coral);color:white}.rating{position:absolute;bottom:9px;right:9px;color:#fff;font-weight:800;font-size:12px;z-index:2}.media-title{font-size:14px;font-weight:750;line-height:1.4;margin:10px 0 4px;overflow-wrap:anywhere}.media-meta{font-size:12px;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{min-height:230px;border-radius:var(--radius);overflow:hidden;position:relative;background:#553341;color:#fff}.feature-card img{position:absolute;inset:0;transition:transform .35s}.feature-card:hover img{transform:scale(1.04)}.feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(35,20,29,.88),rgba(35,20,29,.06) 78%)}.feature-content{position:absolute;z-index:1;left:20px;right:20px;bottom:18px}.feature-content h3{margin:0 0 5px;font-size:20px}.feature-content p{margin:0;color:#f0e2e6;font-size:13px}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.category-card{padding:19px;border:1px solid var(--line);border-radius:15px;background:#fff;min-height:150px;transition:transform .18s,border-color .18s,box-shadow .18s}.category-card:hover{transform:translateY(-3px);border-color:#d8a6b8;box-shadow:var(--shadow)}.category-icon{height:34px;width:34px;border-radius:10px;background:var(--peach);color:var(--berry);display:grid;place-items:center;font-weight:850;margin-bottom:12px}.category-card h3{margin:0 0 6px;font-size:16px}.category-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}.compare-panel{border:1px solid var(--line);border-radius:var(--radius);padding:23px;background:white}.compare-panel.accent{background:#fff2ef;border-color:#f1d6d1}.compare-panel h3{font-size:18px;margin:0 0 17px}.compare-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}.compare-row span:first-child{color:var(--muted)}.compare-row strong{font-weight:750;text-align:right}.rank-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.rank-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #ffffff24}.rank-no{font-size:16px;font-weight:850;color:#ffb4a6}.rank-main{min-width:0}.rank-main strong{display:block;font-size:14px;overflow-wrap:anywhere}.rank-main small{color:#d8c8ce;font-size:11px}.rank-score{text-align:right;font-size:12px;color:#ffd0b9;white-space:nowrap}.timeline{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:18px}.timeline:before{content:"";height:1px;position:absolute;top:11px;left:5%;right:5%;background:#d9b9c5}.timeline-item{position:relative;padding-top:30px}.timeline-item:before{content:"";position:absolute;top:4px;left:0;width:15px;height:15px;border:4px solid var(--paper);border-radius:50%;background:var(--coral);box-shadow:0 0 0 1px #d9b9c5}.timeline-item strong{display:block;color:var(--berry);font-size:14px;margin-bottom:5px}.timeline-item p{font-size:12px;color:var(--muted);margin:0}.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 16px}.article{display:grid;grid-template-columns:96px 1fr;gap:13px;align-items:center}.article-thumb{height:75px;border-radius:10px;overflow:hidden;background:#eadde1}.article h3{font-size:14px;line-height:1.45;margin:0 0 5px}.article time{font-size:11px;color:var(--muted)}.assurance{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.assurance-item{display:flex;gap:12px;align-items:flex-start}.assurance-icon{flex:0 0 38px;height:38px;border-radius:12px;background:#f9dcd6;color:var(--berry);display:grid;place-items:center;font-weight:850}.assurance-item strong{font-size:14px;display:block}.assurance-item p{font-size:12px;color:var(--muted);margin:4px 0 0}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px}.quick-item{padding:16px 0;border-bottom:1px solid var(--line)}.quick-item strong{font-size:14px;display:block;margin-bottom:4px}.quick-item p{font-size:12px;color:var(--muted);margin:0}.faq-list{max-width:880px;margin:auto}.faq-item{border-bottom:1px solid var(--line);padding:17px 0}.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:750;font-size:15px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"＋";color:var(--berry);font-size:18px}.faq-item[open] summary:after{content:"−"}.faq-item p{font-size:13px;color:var(--muted);max-width:760px;margin:12px 0 0}.story-band{background:#f5e8e9}.story-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.story-image{height:320px;border-radius:var(--radius);overflow:hidden}.story-copy h2{font-size:28px;line-height:1.35;margin:0 0 12px}.story-copy p{font-size:14px;color:var(--muted);margin:0 0 18px}.topic-tags{display:flex;flex-wrap:wrap;gap:8px}.topic-tag{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #ead8dd;color:var(--berry);font-size:12px;font-weight:700}.form-wrap{display:grid;grid-template-columns:1fr minmax(320px,.85fr);gap:44px;align-items:center}.form-copy h2{font-size:27px;margin:0 0 9px}.form-copy p{margin:0;color:#eadce2;font-size:14px;max-width:520px}.suggestion-form{background:white;color:var(--ink);border-radius:16px;padding:22px;display:grid;gap:12px}.field label{font-size:12px;font-weight:750;display:block;margin-bottom:5px}.field input,.field select{width:100%;height:43px;border:1px solid var(--line);border-radius:9px;padding:0 12px;background:white;color:var(--ink)}.field input::placeholder{color:#a29aa0}.form-note{color:#746c72;font-size:11px;margin:0}.form-status{min-height:20px;font-size:12px;color:var(--berry);margin:0}.footer{background:#241c22;color:#fff;padding:42px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer-brand p{font-size:12px;color:#c8bbc2;max-width:300px;margin:12px 0 0}.footer h3{font-size:13px;margin:0 0 13px;color:#ffb2a5}.footer-links{display:grid;gap:9px}.footer-links a{font-size:12px;color:#d9cbd1}.footer-links a:hover{color:white;text-decoration:underline;text-underline-offset:3px}.copyright{border-top:1px solid #ffffff20;margin-top:30px;padding-top:16px;font-size:11px;color:#b7aab1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:1024px){.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(3,1fr)}.article-list{grid-template-columns:repeat(2,1fr)}.assurance{grid-template-columns:repeat(2,1fr)}.nav-links{gap:15px}}
@media(max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{min-height:66px}.menu-toggle{display:grid;place-items:center}.nav-links{display:none;position:absolute;top:65px;left:0;right:0;padding:12px 20px 18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 20px #39263212;flex-direction:column;align-items:stretch;gap:2px}.nav-links.open{display:flex}.nav-links a{padding:11px 6px;border-bottom:1px solid #f0e5e8}.hero,.hero-inner{min-height:430px}.hero:before{background:linear-gradient(90deg,rgba(36,20,30,.9),rgba(57,30,43,.63))}.hero-copy{padding:42px 0}.hero-desc{max-width:580px}.stats-grid{grid-template-columns:repeat(2,1fr)}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-card:last-child{display:none}.comparison{gap:12px}.rank-columns{gap:0 18px}.quick-grid{grid-template-columns:repeat(2,1fr)}.story-layout{gap:24px}.story-image{height:280px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.container{width:calc(100% - 28px)}.brand{font-size:15px}.brand-mark{width:36px;height:36px}h1{font-size:34px}.hero,.hero-inner{min-height:450px}.hero-sub{font-size:16px}.hero-desc{font-size:14px}.section{padding:46px 0}.section-head{display:block;margin-bottom:21px}.section-head h2{font-size:23px}.section-head .text-link{display:inline-block;margin-top:12px}.stat{padding:14px 12px}.stat strong{font-size:19px}.stat-badge{height:36px;width:36px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 11px}.media-title{font-size:13px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:215px}.feature-card:last-child{display:block}.category-grid{grid-template-columns:repeat(2,1fr);gap:9px}.category-card{min-height:145px;padding:15px}.comparison{grid-template-columns:1fr}.rank-columns{grid-template-columns:1fr}.rank-row{padding:11px 0}.timeline{grid-template-columns:repeat(2,1fr);gap:22px 14px}.timeline:before{display:none}.article-list{grid-template-columns:1fr;gap:14px}.article{grid-template-columns:86px 1fr}.article-thumb{height:68px}.assurance{grid-template-columns:1fr 1fr;gap:18px 12px}.assurance-item{gap:8px}.assurance-icon{flex-basis:32px;height:32px}.quick-grid{grid-template-columns:1fr}.story-layout{grid-template-columns:1fr}.story-image{height:220px;order:2}.story-copy h2{font-size:24px}.form-wrap{grid-template-columns:1fr;gap:22px}.suggestion-form{padding:17px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px 18px}.copyright{display:block}.copyright span{display:block;margin-top:5px}.btn{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root {
            --berry: #8b3157;
            --berry-dark: #63223e;
            --coral: #ed786f;
            --peach: #fff0e9;
            --mint: #e2f2ed;
            --ink: #29242a;
            --muted: #716a70;
            --line: #eadfe2;
            --paper: #fff9f8;
            --white: #fff;
            --radius: 18px;
            --shadow: 0 12px 32px rgba(74, 35, 52, .09);
            --container: 1180px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 88px; }
        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.65;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; height: 100%; object-fit: cover; }
        button, input, select { font: inherit; }
        button, a, input, select { -webkit-tap-highlight-color: transparent; }
        button { cursor: pointer; }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
            outline: 3px solid var(--coral);
            outline-offset: 3px;
        }
        .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
        .site-header {
            position: sticky; top: 0; z-index: 30;
            background: rgba(255, 249, 248, .96);
            border-bottom: 1px solid rgba(234, 223, 226, .9);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .brand { display: flex; align-items: center; gap: 11px; font-weight: 850; font-size: 17px; white-space: nowrap; }
        .brand-mark {
            width: 39px; height: 39px; border-radius: 12px;
            background: linear-gradient(135deg, var(--berry), var(--coral));
            display: grid; place-items: center; color: #fff; font-size: 16px;
            box-shadow: 0 6px 14px #8b315733;
        }
        .nav-links { display: flex; align-items: center; gap: 23px; color: #595159; font-size: 14px; font-weight: 650; }
        .nav-links a { padding: 9px 0; transition: color .18s; }
        .nav-links a:hover, .nav-links a.active { color: var(--berry); }
        .menu-toggle {
            display: none; width: 44px; height: 44px; border: 1px solid var(--line);
            border-radius: 12px; background: #fff; color: var(--berry); font-size: 20px;
        }
        .section { padding: 52px 0; }
        .section-soft { background: #fff; }
        .section-tint { background: #fff1ed; }
        .section-head {
            display: flex; align-items: end; justify-content: space-between; gap: 24px;
            margin-bottom: 24px;
        }
        .section-head h2 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 820; }
        .section-head p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
        .section-kicker { display: block; margin-bottom: 6px; color: var(--berry); font-size: 12px; font-weight: 800; }
        .text-link { color: var(--berry); font-size: 14px; font-weight: 750; white-space: nowrap; }
        .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
        .crumbs { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }
        .crumbs a:hover { color: var(--berry); }
        .category-intro { padding: 36px 0 30px; background: linear-gradient(110deg, #fff3ee 0%, #fff9f8 65%, #eff7f3 100%); }
        .category-intro .crumbs { margin-bottom: 15px; }
        .category-intro h1 { max-width: 800px; margin: 0; font-size: 36px; line-height: 1.25; font-weight: 850; }
        .category-intro h1 em { color: var(--berry); font-style: normal; }
        .category-intro p { max-width: 760px; margin: 12px 0 0; color: #5e555b; font-size: 15px; }
        .intro-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
        .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ead5dc; border-radius: 999px; background: #fff; padding: 6px 11px; color: var(--berry-dark); font-size: 12px; font-weight: 750; }
        .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
        .filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
        .filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; background: #fff; color: #5d555b; font-size: 13px; font-weight: 650; transition: .18s; }
        .filter-chip:hover, .filter-chip[aria-pressed="true"] { border-color: #c7839b; color: var(--berry); background: #fff5f2; }
        .sort-select {
            min-height: 40px; border: 1px solid var(--line); border-radius: 10px;
            padding: 0 34px 0 12px; background: #fff; color: var(--ink); font-size: 13px;
        }
        .filter-toggle { display: none; }
        .catalog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .list-card {
            display: grid; grid-template-columns: 154px minmax(0, 1fr); min-width: 0;
            overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
            background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s;
        }
        .list-card:hover { transform: translateY(-3px); border-color: #dbb2c0; box-shadow: var(--shadow); }
        .list-poster { position: relative; min-height: 180px; overflow: hidden; background: #eadde1; }
        .list-poster img { position: absolute; inset: 0; transition: transform .3s; }
        .list-card:hover .list-poster img { transform: scale(1.04); }
        .poster-tag {
            position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 8px;
            border-radius: 6px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 800;
        }
        .list-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 15px 14px; }
        .list-copy h3 { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 800; overflow-wrap: anywhere; }
        .list-copy p { margin: 7px 0 12px; color: var(--muted); font-size: 12px; }
        .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
        .tag {
            border-radius: 6px; padding: 4px 7px; background: #f8eff2;
            color: var(--berry); font-size: 10px; font-weight: 750;
        }
        .tag.quality { background: var(--mint); color: #2c6454; }
        .rating-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 12px; font-size: 12px; }
        .rating-line strong { color: var(--berry); font-size: 13px; }
        .rating-line span { color: var(--muted); }
        .featured-strip { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: 20px; background: #382630; color: #fff; }
        .featured-image { min-height: 305px; }
        .featured-image img { min-height: 305px; }
        .featured-copy { display: flex; flex-direction: column; justify-content: center; padding: 34px; }
        .featured-copy .section-kicker { color: #ffb2a5; }
        .featured-copy h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.35; }
        .featured-copy p { margin: 0; color: #e0d3d8; font-size: 14px; }
        .feature-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
        .feature-facts span { border: 1px solid #ffffff38; border-radius: 999px; padding: 6px 10px; color: #fff4f1; font-size: 12px; }
        .rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
        .rank-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
        .rank-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--peach); color: var(--berry); font-size: 13px; font-weight: 850; }
        .rank-main { min-width: 0; }
        .rank-main strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
        .rank-main small { color: var(--muted); font-size: 11px; }
        .rank-score { color: var(--berry); font-size: 13px; font-weight: 800; }
        .topic-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 14px; }
        .topic-panel { min-height: 160px; padding: 20px; border-radius: 15px; background: #fff; border: 1px solid var(--line); }
        .topic-panel:nth-child(2) { background: var(--peach); border-color: transparent; }
        .topic-panel:nth-child(3) { background: var(--mint); border-color: transparent; }
        .topic-panel h3 { margin: 0 0 8px; font-size: 17px; }
        .topic-panel p { margin: 0; color: var(--muted); font-size: 13px; }
        .news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .news-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); }
        .news-thumb { width: 82px; height: 68px; overflow: hidden; border-radius: 10px; background: #eadde1; }
        .news-item h3 { margin: 0; font-size: 13px; line-height: 1.5; }
        .news-item time { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
        .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
        .faq-list details { border-bottom: 1px solid var(--line); padding: 15px 0; }
        .faq-list summary { position: relative; padding-right: 28px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 750; }
        .faq-list summary::-webkit-details-marker { display: none; }
        .faq-list summary:after { content: "+"; position: absolute; right: 3px; top: -2px; color: var(--berry); font-size: 21px; }
        .faq-list details[open] summary:after { content: "−"; }
        .faq-list details p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
        .footer { padding: 44px 0 20px; background: #30242b; color: #f7eef1; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
        .footer-brand p { max-width: 330px; margin: 14px 0 0; color: #d2c5cb; font-size: 13px; }
        .footer h3 { margin: 0 0 13px; color: #fff; font-size: 14px; }
        .footer-links { display: grid; gap: 8px; color: #d2c5cb; font-size: 13px; }
        .footer-links a:hover { color: #ffb2a5; }
        .copyright { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 16px; border-top: 1px solid #ffffff24; color: #bfb1b8; font-size: 11px; }
        .age-note { color: #7a5d68; font-size: 12px; }
        @media (max-width: 1024px) {
            .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .nav-links { gap: 15px; }
            .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 768px) {
            .container { width: min(calc(100% - 32px), var(--container)); }
            .nav-wrap { min-height: 68px; }
            .menu-toggle { display: grid; place-items: center; }
            .nav-links {
                display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
                padding: 10px 20px 18px; background: var(--paper); border-bottom: 1px solid var(--line);
                box-shadow: 0 12px 20px rgba(74, 35, 52, .08); flex-direction: column; align-items: stretch; gap: 0;
            }
            .nav-links.is-open { display: flex; }
            .nav-links a { padding: 12px 4px; border-bottom: 1px solid #f0e6e8; }
            .category-intro { padding: 27px 0 25px; }
            .category-intro h1 { font-size: 30px; }
            .section { padding: 42px 0; }
            .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
            .filter-bar { align-items: stretch; flex-direction: column; }
            .filter-toggle { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 13px; color: var(--berry); font-weight: 750; }
            .filter-content { display: none; }
            .filter-content.is-open { display: flex; flex-direction: column; gap: 13px; }
            .filter-content .filter-group { gap: 7px; }
            .sort-select { width: 100%; }
            .featured-strip { grid-template-columns: 1fr; }
            .featured-image, .featured-image img { min-height: 240px; max-height: 280px; }
            .featured-copy { padding: 24px; }
            .topic-grid { grid-template-columns: 1fr 1fr; }
            .topic-panel:first-child { grid-column: 1 / -1; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
        }
        @media (max-width: 520px) {
            .container { width: min(calc(100% - 28px), var(--container)); }
            .brand { font-size: 15px; }
            .brand-mark { width: 36px; height: 36px; }
            .category-intro h1 { font-size: 27px; }
            .category-intro p { font-size: 14px; }
            .catalog-list { grid-template-columns: 1fr; gap: 11px; }
            .list-card { grid-template-columns: 132px minmax(0, 1fr); }
            .list-poster { min-height: 168px; }
            .list-copy { padding: 12px; }
            .list-copy h3 { font-size: 14px; }
            .rank-list, .faq-list, .news-list { grid-template-columns: 1fr; }
            .topic-grid { grid-template-columns: 1fr; }
            .topic-panel:first-child { grid-column: auto; }
            .section-head h2 { font-size: 23px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
            .copyright { flex-direction: column; gap: 6px; }
        }