/* roulang page: index */
:root {
            --primary: #1C1917;
            --primary-light: #2A2420;
            --secondary: #C75D4E;
            --secondary-dark: #A94A3F;
            --accent-gold: #C79B5A;
            --bg: #FAF7F0;
            --card: #FFFFFF;
            --card-soft: #FDFBF6;
            --border: #E5DFD3;
            --border-light: #D8D0C2;
            --text: #2B2723;
            --text-muted: #6F675D;
            --text-invert: #FFFFFF;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 12px 24px rgba(0,0,0,0.08);
            --radius: 12px;
            --radius-lg: 20px;
            --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
            --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-sans); background-color: var(--bg); color: var(--text); line-height: 1.8; }
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--primary); line-height: 1.4; margin-bottom: 0.75rem; }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }

        .container-custom { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
        @media (min-width: 768px) { .container-custom { padding-left: 2rem; padding-right: 2rem; } }

        header { background: rgba(250,247,240,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
        .logo { font-weight: 700; letter-spacing: 0.01em; }
        .nav-link { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text-muted); transition: all 0.3s; }
        .nav-link:hover { color: var(--primary); background: rgba(255,255,255,0.5); }
        .nav-link.active { color: var(--secondary); background: rgba(199,91,78,0.08); }

        .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: #fff; border-radius: 999px; padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.9rem; transition: background 0.3s, transform 0.3s; border: none; cursor: pointer; }
        .btn-primary:hover { background: var(--secondary-dark); }
        .btn-primary:active { transform: scale(0.98); }
        .btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); color: var(--text); border-radius: 999px; padding: 0.75rem 1.75rem; font-weight: 500; font-size: 0.9rem; transition: border-color 0.3s, color 0.3s, transform 0.3s; background: transparent; }
        .btn-outline:hover { border-color: var(--secondary); color: var(--secondary); }
        .btn-outline:active { transform: scale(0.98); }

        .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
        .section-alt { background: #FDFBF6; }
        .section-dark { background: var(--primary); color: #fff; }
        .section-dark h2, .section-dark h3 { color: #fff; }
        .section-dark .text-muted { color: rgba(255,255,255,0.7); }

        .section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: var(--secondary); text-transform: uppercase; margin-bottom: 0.5rem; }
        .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
        .section-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 42rem; margin-bottom: 2.5rem; }

        .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
        .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

        .badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; }
        .badge-eu { background: #F2E3D5; color: #9A4C3A; }
        .badge-jp { background: #EBE4D8; color: #7A5C2E; }
        .badge-cn { background: #DFE8DC; color: #4F6744; }
        .badge-plain { background: rgba(255,255,255,0.2); color: #fff; }

        .hero { position: relative; min-height: 480px; display: flex; align-items: center; }
        .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
        .hero-overlay { position: absolute; inset: 0; background: rgba(28,25,23,0.72); }
        .hero-content { position: relative; z-index: 10; }
        .hero-burst { position: absolute; top: 2rem; right: 2rem; background: var(--secondary); color: #fff; border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 700; font-size: 0.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transform: rotate(3deg); }

        .matrix-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .matrix-grid { grid-template-columns: repeat(3, 1fr); } }

        .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (min-width: 768px) { .metric-grid { grid-template-columns: repeat(4, 1fr); } }

        .timeline-item { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
        .timeline-date { min-width: 5rem; font-weight: 600; color: var(--secondary); }
        .timeline-content h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }

        .compare-card { background: var(--card-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
        .compare-card .region { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
        .compare-card ul { list-style: none; }
        .compare-card li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--border-light); }

        .faq-item { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
        .faq-question { font-weight: 700; font-size: 1rem; color: var(--primary); }
        .faq-answer { color: var(--text-muted); margin-top: 0.5rem; }

        .form-input { width: 100%; border: 1px solid var(--border-light); border-radius: 999px; padding: 0.8rem 1.25rem; font-size: 0.9rem; background: #fff; transition: border-color 0.3s, box-shadow 0.3s; outline: none; }
        .form-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(199,91,78,0.12); }

        .footer-link { color: rgba(255,255,255,0.75); transition: color 0.3s; }
        .footer-link:hover { color: #fff; }

        @media (max-width: 768px) {
            .section { padding-top: 3rem; padding-bottom: 3rem; }
            .section-title { font-size: 1.75rem; }
            .hero { min-height: 400px; }
            .hero-burst { top: 1rem; right: 1rem; padding: 0.5rem 1rem; font-size: 0.8rem; }
        }

/* roulang page: category1 */
:root {
            --primary: #1C1917;
            --primary-light: #2A2420;
            --secondary: #C75D4E;
            --secondary-dark: #A94A3F;
            --accent-gold: #C79B5A;
            --bg: #FAF7F0;
            --card: #FFFFFF;
            --card-soft: #FDFBF6;
            --border: #E5DFD3;
            --border-light: #D8D0C2;
            --text: #2B2723;
            --text-muted: #6F675D;
            --text-invert: #FFFFFF;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 12px 24px rgba(0,0,0,0.08);
            --radius: 12px;
            --radius-lg: 20px;
            --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
            --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
        }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-sans); background-color: var(--bg); color: var(--text); line-height: 1.8; }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        .container-custom { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
        header { background: rgba(250,247,240,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
        .logo { font-weight: 700; letter-spacing: 0.01em; }
        .nav-link { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text-muted); transition: all 0.3s; }
        .nav-link:hover { color: var(--primary); background: rgba(255,255,255,0.5); }
        .nav-link.active { color: var(--secondary); background: rgba(199,91,78,0.08); }
        .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: #fff; border-radius: 999px; padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.9rem; transition: background 0.3s, transform 0.3s; border: none; cursor: pointer; }
        .btn-primary:hover { background: var(--secondary-dark); }
        .btn-primary:active { transform: scale(0.98); }
        .btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); color: var(--text); border-radius: 999px; padding: 0.75rem 1.75rem; font-weight: 500; font-size: 0.9rem; transition: border-color 0.3s, color 0.3s, transform 0.3s; background: transparent; }
        .btn-outline:hover { border-color: var(--secondary); color: var(--secondary); }
        .btn-outline:active { transform: scale(0.98); }
        .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
        .section-alt { background: #FDFBF6; }
        .section-dark { background: var(--primary); color: #fff; }
        .section-dark h2, .section-dark h3 { color: #fff; }
        .section-dark .text-muted { color: rgba(255,255,255,0.7); }
        .section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: var(--secondary); text-transform: uppercase; margin-bottom: 0.5rem; }
        .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
        .section-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 42rem; margin-bottom: 2.5rem; }
        .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
        .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; }
        .badge-eu { background: #F2E3D5; color: #9A4C3A; }
        .badge-jp { background: #EBE4D8; color: #7A5C2E; }
        .badge-cn { background: #DFE8DC; color: #4F6744; }
        .badge-plain { background: rgba(255,255,255,0.2); color: #fff; }
        .hero { position: relative; min-height: 480px; display: flex; align-items: center; }
        .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
        .hero-overlay { position: absolute; inset: 0; background: rgba(28,25,23,0.72); }
        .hero-content { position: relative; z-index: 10; }
        .matrix-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .timeline-item { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
        .compare-card { background: var(--card-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
        .compare-card .region { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
        .compare-card ul { list-style: none; }
        .compare-card li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--border-light); }
        .faq-item { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
        .faq-question { font-weight: 700; font-size: 1rem; color: var(--primary); }
        .faq-answer { color: var(--text-muted); margin-top: 0.5rem; }
        .form-input { width: 100%; border: 1px solid var(--border-light); border-radius: 999px; padding: 0.8rem 1.25rem; font-size: 0.9rem; background: #fff; transition: border-color 0.3s, box-shadow 0.3s; outline: none; }
        .form-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(199,91,78,0.12); }
        .footer-link { color: rgba(255,255,255,0.75); transition: color 0.3s; }
        .footer-link:hover { color: #fff; }
        .filter-chip { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; background: #fff; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
        .filter-chip.active, .filter-chip:hover { background: var(--secondary); color: #fff; border-color: var(--secondary); }
        .select-input { padding: 0.5rem 1.5rem 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 0.85rem; color: var(--text); outline: none; cursor: pointer; transition: border-color 0.2s; }
        .select-input:focus { border-color: var(--secondary); }
        .ranking-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
        .ranking-number { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--secondary); min-width: 2.5rem; text-align: center; }
        .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.75rem; }
        .tag-chip { padding: 0.4rem 1.2rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--text-muted); transition: all 0.2s; cursor: pointer; }
        .tag-chip:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(199,91,78,0.04); }
        .data-bar { display: flex; align-items: center; gap: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 2rem; }
        .data-bar-item { text-align: center; flex: 1; }
        .data-bar-value { font-size: 2rem; font-weight: 700; color: var(--primary); font-family: var(--font-serif); line-height: 1.2; }
        .data-bar-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
        .cta-banner { background: linear-gradient(120deg, #2A2420 0%, #1C1917 100%); border-radius: var(--radius-lg); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
        .cta-banner h2 { color: #fff; font-size: 1.75rem; font-family: var(--font-serif); }
        .cta-banner p { color: rgba(255,255,255,0.7); max-width: 36rem; }
        .cover-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: #ddd; }
        .card-body { padding: 1.25rem; }
        .card-title { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; font-family: var(--font-serif); }
        .card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
        .card-score { font-weight: 600; color: var(--accent-gold); }

        @media (min-width: 768px) {
            .matrix-grid { grid-template-columns: repeat(3, 1fr); }
            .metric-grid { grid-template-columns: repeat(4, 1fr); }
            .container-custom { padding-left: 2rem; padding-right: 2rem; }
            .cta-banner { flex-direction: row; text-align: left; justify-content: space-between; }
        }
        @media (max-width: 767px) {
            .section { padding-top: 3rem; padding-bottom: 3rem; }
            .section-title { font-size: 1.75rem; }
            .data-bar { flex-wrap: wrap; gap: 1rem; justify-content: center; }
            .data-bar-item { min-width: 45%; }
            .cta-banner { padding: 2rem 1.5rem; }
        }