/* roulang page: index */
:root {
            --page: #f7fafd;
            --surface: #ffffff;
            --surface-soft: #eff6fb;
            --primary: #2f6fae;
            --primary-dark: #285d91;
            --text: #1e2b3a;
            --muted: #64758a;
            --line: #dce7f0;
            --warm: #fff1e8;
            --warm-text: #9a5838;
            --radius-sm: 12px;
            --radius-md: 18px;
            --radius-lg: 24px;
            --shadow: 0 14px 42px rgba(38, 79, 116, .09);
            --sidebar: 272px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 88px; }
        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 82% 4%, rgba(189, 223, 247, .28), transparent 22rem),
                var(--page);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        body.menu-open { overflow: hidden; }
        a { color: inherit; text-decoration: none; }
        button, input, select, textarea { font: inherit; }
        button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
        img, svg { display: block; max-width: 100%; }
        ::selection { color: #fff; background: var(--primary); }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #eef4f8; }
        ::-webkit-scrollbar-thumb { background: #b8ccdc; border: 3px solid #eef4f8; border-radius: 99px; }

        :focus-visible {
            outline: 3px solid rgba(47, 111, 174, .28);
            outline-offset: 3px;
        }

        .sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 40;
            width: var(--sidebar);
            display: flex;
            flex-direction: column;
            padding: 30px 22px 22px;
            overflow-y: auto;
            background: rgba(255, 255, 255, .96);
            border-right: 1px solid var(--line);
        }
        .brand-mark {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 3px 4px 26px;
        }
        .brand-icon {
            width: 43px;
            height: 43px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            color: #fff;
            font-weight: 800;
            border-radius: 13px;
            background: var(--primary);
            box-shadow: 0 9px 22px rgba(47, 111, 174, .24);
        }
        .brand-name { font-size: 16px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
        .brand-note { margin-top: 4px; color: var(--muted); font-size: 12px; }
        .nav-label {
            padding: 0 10px;
            margin: 8px 0 8px;
            color: #8998a8;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
        }
        .side-nav { display: grid; gap: 7px; }
        .side-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 50px;
            padding: 10px 13px;
            color: #52657a;
            border: 1px solid transparent;
            border-radius: 13px;
            transition: .22s ease;
        }
        .side-link .num {
            width: 25px;
            color: #91a1b2;
            font-size: 11px;
            font-variant-numeric: tabular-nums;
        }
        .side-link:hover { color: var(--primary-dark); background: #f4f9fd; border-color: #dfebf4; }
        .side-link:active { transform: translateY(1px); }
        .side-link.active {
            color: var(--primary-dark);
            font-weight: 700;
            background: #eaf4fc;
            border-color: #d2e6f5;
        }
        .side-link.active::before {
            content: "";
            position: absolute;
            left: -1px;
            top: 12px;
            bottom: 12px;
            width: 3px;
            border-radius: 4px;
            background: var(--primary);
        }
        .directory-box {
            margin-top: 24px;
            padding: 16px;
            background: #f5f9fc;
            border: 1px solid var(--line);
            border-radius: 16px;
        }
        .directory-box a {
            display: flex;
            justify-content: space-between;
            padding: 7px 0;
            color: var(--muted);
            font-size: 13px;
            transition: color .2s ease;
        }
        .directory-box a:hover { color: var(--primary); }
        .progress-track { height: 5px; margin: 12px 0 5px; overflow: hidden; background: #dce8f1; border-radius: 99px; }
        .progress-fill { width: 12%; height: 100%; background: var(--primary); border-radius: inherit; transition: width .16s linear; }
        .side-legal {
            margin-top: auto;
            padding: 20px 7px 0;
            color: #79899a;
            font-size: 11px;
            line-height: 1.7;
        }

        .mobile-bar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 50;
            min-height: 70px;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 20px;
            background: rgba(255,255,255,.96);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(12px);
        }
        .mobile-logo { max-width: 210px; font-size: 14px; font-weight: 800; line-height: 1.3; }
        .menu-button {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            color: var(--text);
            background: #f1f6fa;
            border: 1px solid var(--line);
            border-radius: 12px;
            cursor: pointer;
            transition: .2s ease;
        }
        .menu-button:hover { color: var(--primary); background: #eaf4fc; }
        .mobile-drawer {
            display: none;
            position: fixed;
            inset: 70px 0 auto 0;
            z-index: 49;
            padding: 18px 20px 24px;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        .mobile-drawer.open { display: grid; gap: 8px; }
        .mobile-drawer a {
            padding: 13px 15px;
            color: #52657a;
            background: #f8fbfd;
            border: 1px solid var(--line);
            border-radius: 12px;
        }
        .mobile-drawer a.active { color: var(--primary-dark); font-weight: 700; background: #eaf4fc; }

        .page-shell { margin-left: var(--sidebar); min-width: 0; }
        .content-wrap { width: min(100% - 48px, 1260px); margin-inline: auto; }
        .section-block { padding: 96px 0; scroll-margin-top: 30px; }
        .section-block + .section-block { border-top: 1px solid rgba(220, 231, 240, .78); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .1em;
        }
        .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--primary); }
        .section-heading { max-width: 760px; margin-bottom: 38px; }
        .section-heading h2 {
            margin: 10px 0 12px;
            font-size: clamp(28px, 3vw, 36px);
            line-height: 1.25;
            letter-spacing: -.035em;
        }
        .section-heading p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }

        .button {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 19px;
            font-weight: 700;
            border: 1px solid transparent;
            border-radius: 13px;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
        }
        .button-primary { color: #fff; background: var(--primary); box-shadow: 0 9px 20px rgba(47,111,174,.2); }
        .button-primary:hover { background: var(--primary-dark); box-shadow: 0 12px 25px rgba(47,111,174,.27); transform: translateY(-2px); }
        .button-secondary { color: var(--primary-dark); background: #fff; border-color: #cfdde8; }
        .button-secondary:hover { background: #edf6fd; border-color: #a9cbe3; transform: translateY(-2px); }
        .button:active { transform: translateY(1px); box-shadow: none; }
        .button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

        .dashboard { padding-top: 44px; min-height: 720px; }
        .meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 31px;
            color: #73859a;
            font-size: 13px;
        }
        .meta-path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .status-dot { width: 8px; height: 8px; display: inline-block; margin-right: 7px; background: #55a582; border-radius: 50%; box-shadow: 0 0 0 5px rgba(85,165,130,.1); }
        .hero-title {
            max-width: 940px;
            margin: 0;
            font-size: clamp(34px, 5vw, 54px);
            line-height: 1.16;
            letter-spacing: -.05em;
        }
        .hero-title span { display: block; margin-top: 11px; color: var(--primary); font-size: .48em; letter-spacing: .01em; }
        .hero-intro { max-width: 800px; margin: 24px 0 26px; color: var(--muted); font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }
        .dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
        .metric-board {
            position: relative;
            overflow: hidden;
            padding: 28px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .metric-board::after {
            content: "INDEX / 01";
            position: absolute;
            right: 22px;
            top: 18px;
            color: #dce8f0;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .16em;
        }
        .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
        .metric-item { min-height: 126px; padding: 17px 20px; border-left: 1px solid var(--line); }
        .metric-item:first-child { border-left: 0; padding-left: 0; }
        .metric-number { display: block; color: var(--primary-dark); font-size: 38px; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; }
        .metric-label { display: block; margin-top: 8px; font-weight: 700; }
        .metric-note { color: #8797a8; font-size: 12px; }
        .index-panel {
            padding: 24px;
            color: #eaf3fa;
            background: #263b50;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .index-panel h2 { margin: 0 0 14px; color: #fff; font-size: 19px; }
        .index-panel a {
            display: grid;
            grid-template-columns: 28px 1fr auto;
            align-items: center;
            gap: 8px;
            padding: 12px 0;
            color: #cbd8e4;
            border-bottom: 1px solid rgba(255,255,255,.1);
            font-size: 14px;
            transition: .2s ease;
        }
        .index-panel a:hover { color: #fff; padding-left: 4px; }
        .index-panel a:last-child { border-bottom: 0; }
        .notice-strip {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-top: 22px;
            padding: 15px 18px;
            color: #53697d;
            background: #edf6fc;
            border: 1px solid #d7e9f5;
            border-radius: 14px;
            font-size: 13px;
        }
        .notice-strip strong { color: var(--primary-dark); }

        .matrix-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr .85fr;
            grid-template-rows: repeat(2, minmax(210px, auto));
            gap: 18px;
        }
        .feature-card {
            position: relative;
            overflow: hidden;
            padding: 25px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            box-shadow: 0 8px 24px rgba(44, 79, 111, .06);
            transition: .25s ease;
        }
        .feature-card:hover { transform: translateY(-4px); border-color: #aacde5; box-shadow: var(--shadow); }
        .feature-card:hover .card-arrow { transform: translateX(5px); color: var(--primary); }
        .feature-main {
            grid-row: 1 / 3;
            padding: 34px;
            color: #fff;
            background:
                linear-gradient(135deg, rgba(255,255,255,.06) 25%, transparent 25%) 0 0 / 26px 26px,
                #2f6fae;
            border-color: transparent;
        }
        .feature-main p { color: #dcebf7 !important; }
        .feature-main .feature-no, .feature-main .card-arrow { color: #fff; }
        .feature-soft { background: #eef7fd; }
        .feature-gray { background: #f8fafc; }
        .feature-no { color: #87a1b7; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
        .feature-icon {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            margin: 24px 0 22px;
            color: var(--primary);
            background: #e4f1fa;
            border-radius: 14px;
        }
        .feature-main .feature-icon { color: #fff; background: rgba(255,255,255,.15); }
        .feature-card h3 { margin: 0 0 9px; font-size: 20px; line-height: 1.4; }
        .feature-card p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.8; }
        .card-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
        .card-arrow { transition: transform .2s ease; }

        .update-section { margin-top: 64px; }
        .update-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 22px; }
        .headline-list, .calendar-card {
            padding: 28px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            box-shadow: 0 8px 24px rgba(44,79,111,.06);
        }
        .headline-list h3, .calendar-card h3 { margin: 0 0 18px; font-size: 20px; }
        .headline-item {
            display: grid;
            grid-template-columns: 74px 1fr auto;
            gap: 15px;
            align-items: center;
            padding: 16px 0;
            border-top: 1px solid var(--line);
            transition: .2s ease;
        }
        .headline-item:hover { padding-left: 7px; color: var(--primary-dark); }
        .headline-date { color: #8a9aaa; font-size: 12px; }
        .headline-title { font-weight: 700; }
        .headline-tag { padding: 3px 9px; color: var(--primary-dark); background: #eaf4fc; border-radius: 99px; font-size: 11px; }
        .calendar-row { display: flex; gap: 15px; padding: 15px 0; border-top: 1px solid var(--line); }
        .calendar-day { width: 46px; flex: 0 0 auto; color: var(--primary); font-weight: 800; }
        .calendar-copy strong { display: block; font-size: 14px; }
        .calendar-copy span { color: var(--muted); font-size: 12px; }

        .compare-layout { display: grid; grid-template-columns: 1fr 62px 1fr; align-items: stretch; }
        .compare-card {
            padding: 29px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .compare-card.organized { border-color: #bad8ec; background: #fbfdff; }
        .compare-card h3 { margin: 13px 0 8px; font-size: 23px; }
        .compare-card > p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
        .compare-list { display: grid; gap: 11px; }
        .compare-line {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 13px;
            color: #607287;
            background: #f5f8fa;
            border-radius: 11px;
            font-size: 13px;
        }
        .organized .compare-line { background: #edf6fc; }
        .state-point { width: 9px; height: 9px; flex: 0 0 auto; background: #aeb9c3; border-radius: 50%; }
        .organized .state-point { background: #4b91c7; }
        .compare-arrow { display: grid; place-items: center; color: var(--primary); font-size: 25px; }
        .mini-bars { display: flex; height: 72px; align-items: flex-end; gap: 8px; margin-top: 22px; }
        .mini-bars i { flex: 1; min-width: 9px; background: #cbd7e0; border-radius: 5px 5px 2px 2px; }
        .organized .mini-bars i { background: #8fc1e3; }
        .chart-note { color: #94a1af; font-size: 11px; }
        .process-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            margin-top: 30px;
            padding: 24px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
        }
        .process-step { position: relative; display: flex; align-items: center; gap: 12px; }
        .process-step:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 42px;
            right: 13px;
            top: 18px;
            height: 1px;
            background: #cddce7;
        }
        .step-num {
            z-index: 1;
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 800;
            background: #eaf4fc;
            border-radius: 50%;
        }
        .step-copy { position: relative; z-index: 2; padding-right: 11px; background: #fff; font-size: 13px; font-weight: 700; }

        .faq-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 70px; align-items: start; }
        .faq-intro { position: sticky; top: 34px; }
        .faq-intro h2 { margin: 12px 0 15px; font-size: clamp(28px, 3vw, 36px); line-height: 1.3; }
        .faq-intro p { color: var(--muted); }
        .legal-card { margin: 25px 0; padding: 17px; color: var(--warm-text); background: var(--warm); border: 1px solid #f3dac9; border-radius: 14px; font-size: 13px; }
        .faq-list { display: grid; gap: 12px; }
        .faq-item {
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .faq-item[open] { border-color: #b7d5e9; box-shadow: 0 9px 24px rgba(47,111,174,.07); }
        .faq-item summary {
            position: relative;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
            padding: 19px 22px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: "+";
            width: 28px;
            height: 28px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            color: var(--primary);
            background: #edf6fc;
            border-radius: 50%;
            transition: transform .25s ease;
        }
        .faq-item[open] summary::after { transform: rotate(45deg); }
        .faq-answer { padding: 0 22px 21px; color: var(--muted); font-size: 14px; line-height: 1.9; }

        .contact-panel {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 55px;
            padding: 54px;
            background:
                linear-gradient(90deg, transparent 49px, rgba(47,111,174,.045) 50px, transparent 51px) 0 0 / 50px 50px,
                #edf6fc;
            border: 1px solid #d7e7f2;
            border-radius: 26px;
        }
        .contact-copy h2 { margin: 12px 0 16px; font-size: clamp(29px, 3vw, 38px); line-height: 1.25; }
        .contact-copy p { color: var(--muted); }
        .privacy-points { display: grid; gap: 10px; margin-top: 25px; padding: 0; list-style: none; }
        .privacy-points li { display: flex; gap: 10px; color: #566b7e; font-size: 13px; }
        .privacy-points li::before { content: "✓"; color: var(--primary); font-weight: 800; }
        .form-card { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .form-field.full { grid-column: 1 / -1; }
        .form-label { display: block; margin-bottom: 7px; color: #455a6f; font-size: 13px; font-weight: 700; }
        .form-control {
            width: 100%;
            min-height: 49px;
            padding: 11px 13px;
            color: var(--text);
            background: #fbfdff;
            border: 1px solid #cfdee9;
            border-radius: 11px;
            outline: none;
            transition: .2s ease;
        }
        textarea.form-control { min-height: 116px; resize: vertical; }
        .form-control:hover { border-color: #a9c7dc; }
        .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(47,111,174,.12); background: #fff; }
        .form-control:disabled { color: #8a98a7; background: #eef2f5; cursor: not-allowed; }
        .check-row { display: flex; gap: 10px; align-items: flex-start; margin: 17px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
        .check-row input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--primary); }
        .submit-button { width: 100%; }
        .form-feedback {
            display: none;
            margin-top: 14px;
            padding: 12px 14px;
            color: #256548;
            background: #ebf8f1;
            border: 1px solid #c9ead9;
            border-radius: 11px;
            font-size: 13px;
        }
        .form-feedback.show { display: block; }

        .footer {
            padding: 55px 0 30px;
            color: #c5d1dc;
            background: #243649;
        }
        .footer-grid { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 55px; }
        .footer-brand { color: #fff; font-size: 20px; font-weight: 800; }
        .footer p { max-width: 460px; color: #9fb0c0; font-size: 13px; }
        .footer h2 { margin: 0 0 15px; color: #fff; font-size: 14px; }
        .footer-links { display: grid; gap: 9px; }
        .footer-links a { color: #b8c7d4; font-size: 13px; transition: .2s ease; }
        .footer-links a:hover { color: #fff; transform: translateX(3px); }
        .copyright { margin-top: 38px; padding-top: 22px; color: #8195a7; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }

        @media (max-width: 1024px) {
            .sidebar { display: none; }
            .mobile-bar { display: flex; }
            .page-shell { margin-left: 0; }
            .content-wrap { width: min(100% - 40px, 920px); }
            .section-block { padding: 72px 0; }
            .dashboard { padding-top: 34px; }
            .dashboard-layout { grid-template-columns: 1fr; }
            .index-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
            .index-panel h2 { grid-column: 1 / -1; }
            .metric-grid { grid-template-columns: repeat(2, 1fr); }
            .metric-item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
            .metric-item:nth-child(4) { border-top: 1px solid var(--line); }
            .matrix-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
            .feature-main { grid-row: auto; grid-column: 1 / -1; min-height: 330px; }
            .update-layout { grid-template-columns: 1fr; }
            .faq-layout { gap: 38px; }
            .faq-intro { position: static; }
            .contact-panel { grid-template-columns: 1fr; gap: 30px; }
        }

        @media (max-width: 768px) {
            .content-wrap { width: min(100% - 30px, 700px); }
            .section-block { padding: 62px 0; }
            .hero-intro { font-size: 16px; }
            .metric-board { padding: 21px; }
            .metric-item { padding: 15px 14px; }
            .metric-number { font-size: 31px; }
            .matrix-grid { grid-template-columns: 1fr; }
            .feature-main { grid-column: auto; min-height: auto; }
            .headline-item { grid-template-columns: 64px 1fr; }
            .headline-tag { display: none; }
            .compare-layout { grid-template-columns: 1fr; gap: 14px; }
            .compare-arrow { min-height: 36px; transform: rotate(90deg); }
            .process-strip { grid-template-columns: 1fr; gap: 16px; }
            .process-step:not(:last-child)::after {
                left: 18px;
                right: auto;
                top: 35px;
                bottom: -17px;
                width: 1px;
                height: auto;
            }
            .faq-layout { grid-template-columns: 1fr; }
            .contact-panel { padding: 30px 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
        }

        @media (max-width: 520px) {
            .mobile-bar { padding-inline: 15px; }
            .mobile-logo { max-width: 180px; font-size: 13px; }
            .content-wrap { width: min(100% - 24px, 490px); }
            .hero-title { font-size: 33px; }
            .hero-title span { font-size: .55em; line-height: 1.45; }
            .hero-actions { display: grid; }
            .button { width: 100%; }
            .meta-row { align-items: flex-start; }
            .metric-grid { grid-template-columns: 1fr; }
            .metric-item, .metric-item:nth-child(3) {
                min-height: auto;
                padding: 16px 0;
                border-left: 0;
                border-top: 1px solid var(--line);
            }
            .metric-item:first-child { border-top: 0; }
            .index-panel { display: block; }
            .feature-card { padding: 22px; }
            .headline-list, .calendar-card { padding: 21px; }
            .headline-item { grid-template-columns: 1fr; gap: 2px; }
            .compare-card { padding: 22px; }
            .form-grid { grid-template-columns: 1fr; }
            .form-field.full { grid-column: auto; }
            .form-card { padding: 20px; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-grid > :first-child { grid-column: auto; }
        }

/* roulang page: category1 */
:root{
 --page:#f7fafd;--surface:#fff;--surface-soft:#eff6fb;--primary:#2f6fae;--primary-dark:#285d91;
 --text:#1e2b3a;--muted:#64758a;--line:#dce7f0;--warm:#fff1e8;--warm-text:#9a5838;
 --radius-sm:12px;--radius-md:18px;--radius-lg:24px;--shadow:0 14px 42px rgba(38,79,116,.09);--sidebar:272px
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;color:var(--text);background:radial-gradient(circle at 85% 3%,rgba(189,223,247,.34),transparent 25rem),var(--page);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}img,svg{display:block;max-width:100%}
.sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:var(--sidebar);padding:30px 24px 22px;background:rgba(255,255,255,.93);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}.brand-mark{display:flex;gap:12px;align-items:flex-start;padding:3px 4px 26px}.brand-icon{width:43px;height:43px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;border-radius:13px;background:var(--primary);box-shadow:0 9px 22px rgba(47,111,174,.24)}.brand-name{display:block;font-size:16px;line-height:1.35;font-weight:800;letter-spacing:-.02em}.brand-note{display:block;margin-top:4px;color:var(--muted);font-size:12px}.nav-label{padding:0 10px;margin:8px 0;color:#8998a8;font-size:11px;font-weight:700;letter-spacing:.12em}.side-nav{display:grid;gap:7px}.side-link{position:relative;display:flex;gap:12px;align-items:center;padding:12px 11px;color:#52657a;border-radius:12px;font-size:14px;font-weight:700;transition:.2s ease}.side-link:hover{background:#eef6fc;color:var(--primary)}.side-link.active{color:var(--primary-dark);background:#e7f2fb}.side-link.active:before{content:"";position:absolute;left:0;width:3px;height:26px;border-radius:4px;background:var(--primary)}.num{font-size:11px;color:#8aa3b7;font-variant-numeric:tabular-nums}.directory-box{margin-top:31px;padding:16px;background:#f8fbfd;border:1px solid var(--line);border-radius:var(--radius-md)}.directory-box a{display:flex;justify-content:space-between;padding:7px 0;color:var(--muted);font-size:13px;transition:color .2s ease}.directory-box a:hover{color:var(--primary)}.progress-track{height:4px;margin:13px 0 7px;overflow:hidden;background:#dce8f1;border-radius:99px}.progress-fill{width:28%;height:100%;background:var(--primary);border-radius:99px;transition:width .2s ease}.side-legal{margin-top:auto;padding-top:22px;color:#8191a0;font-size:11px;line-height:1.7}
.mobile-bar,.mobile-drawer{display:none}.page-main{margin-left:var(--sidebar);min-height:100vh}.content-wrap{width:min(100% - 80px,1240px);margin:auto}.topline{display:flex;justify-content:space-between;gap:16px;padding:27px 0 18px;color:#718397;font-size:13px}.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.crumb strong{color:var(--primary-dark)}.status{color:var(--warm-text);background:var(--warm);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.section-block{padding:88px 0;scroll-margin-top:24px}.section-block+.section-block{border-top:1px solid rgba(220,231,240,.8)}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary-dark);font-size:12px;font-weight:800;letter-spacing:.1em}.eyebrow:before{content:"";width:26px;height:2px;background:var(--primary)}.section-heading{max-width:750px;margin-bottom:34px}.section-heading h2{margin:10px 0 12px;font-size:clamp(27px,3vw,35px);line-height:1.25;letter-spacing:-.035em}.section-heading p{margin:0;color:var(--muted);font-size:16px;line-height:1.9}
.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;padding:0 19px;font-weight:700;border:1px solid transparent;border-radius:13px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}.button-primary{color:#fff;background:var(--primary);box-shadow:0 9px 20px rgba(47,111,174,.2)}.button-primary:hover{background:var(--primary-dark);box-shadow:0 12px 25px rgba(47,111,174,.27);transform:translateY(-2px)}.button-secondary{color:var(--primary-dark);background:#fff;border-color:#cfdde8}.button-secondary:hover{background:#edf6fd;border-color:#a9cbe3;transform:translateY(-2px)}.button:active{transform:translateY(1px);box-shadow:none}.button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(47,111,174,.28);outline-offset:3px}
.category-hero{padding:20px 0 70px}.category-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:56px;align-items:center}.category-title{margin:12px 0 17px;font-size:clamp(36px,4.4vw,54px);line-height:1.16;letter-spacing:-.055em}.category-lead{max-width:680px;margin:0;color:var(--muted);font-size:17px;line-height:1.9}.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}.meta-chip{padding:6px 11px;color:#587087;background:#f0f6fa;border:1px solid #dce8f0;border-radius:999px;font-size:12px}.cover-art{position:relative;min-height:385px;overflow:hidden;background:#eaf3fa;border:1px solid #d5e5f0;border-radius:24px;box-shadow:var(--shadow)}.cover-art:before{content:"";position:absolute;inset:22px;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(47,111,174,.08) 28px 29px),#f8fbfd;border:1px solid #d5e5f0;border-radius:17px}.cover-circle{position:absolute;width:184px;height:184px;right:-26px;top:73px;border:28px solid rgba(47,111,174,.17);border-radius:50%}.cover-index{position:absolute;top:49px;left:48px;color:var(--primary);font-size:62px;font-weight:800;letter-spacing:-.08em}.cover-text{position:absolute;left:50px;bottom:57px;color:#35566f;font-size:14px;font-weight:800;letter-spacing:.18em}.cover-rule{position:absolute;left:50px;bottom:45px;width:155px;height:2px;background:#8db6d4}
.filter-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.filter-tags{display:flex;flex-wrap:wrap;gap:8px}.filter-tag{border:1px solid #d6e4ee;background:#fff;color:#5f7487;padding:7px 12px;border-radius:999px;font-size:13px;cursor:pointer;transition:.2s ease}.filter-tag:hover,.filter-tag.active{border-color:#a8cbe4;color:var(--primary-dark);background:#eaf4fc}.filter-search{display:flex;align-items:center;gap:8px;width:min(100%,285px);padding:0 12px;background:#f8fbfd;border:1px solid #d8e5ee;border-radius:11px}.filter-search input{width:100%;height:40px;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.filter-search input::placeholder{color:#94a3b2}
.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:32px;align-items:start}.content-list{display:grid;gap:18px}.feature-entry,.entry-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.feature-entry:hover,.entry-card:hover{border-color:#afcee3;transform:translateY(-4px);box-shadow:0 19px 42px rgba(38,79,116,.13)}.feature-entry{display:grid;grid-template-columns:245px minmax(0,1fr);overflow:hidden}.entry-visual{position:relative;min-height:228px;background:linear-gradient(135deg,#dceefa,#f5faff)}.entry-visual:before{content:"";position:absolute;width:122px;height:122px;left:50%;top:50%;border:18px solid rgba(47,111,174,.19);border-radius:50%;transform:translate(-50%,-50%)}.entry-visual:after{content:"置顶 / 01";position:absolute;left:24px;bottom:22px;color:#356381;font-size:12px;font-weight:800;letter-spacing:.12em}.entry-content{padding:28px}.entry-number{color:#8da1b2;font-size:12px;font-weight:800;letter-spacing:.12em}.entry-content h2,.entry-card h2{margin:8px 0 10px;font-size:22px;line-height:1.35;letter-spacing:-.025em}.entry-content p,.entry-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.8}.entry-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}.tag-list{display:flex;flex-wrap:wrap;gap:7px}.tag{padding:4px 9px;color:#52728a;background:#edf6fb;border-radius:999px;font-size:11px;font-weight:700}.entry-link{color:var(--primary-dark);font-size:14px;font-weight:800}.entry-link span{display:inline-block;transition:transform .2s ease}.entry-link:hover span{transform:translateX(4px)}.entry-card{display:grid;grid-template-columns:105px minmax(0,1fr);gap:19px;padding:20px}.mini-cover{min-height:115px;display:grid;place-items:center;color:#5b83a1;background:#eff6fb;border-radius:15px;font-size:13px;font-weight:800;letter-spacing:.1em}.entry-card .entry-footer{margin-top:13px}.side-index{position:sticky;top:26px;display:grid;gap:15px}.index-card{padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px}.index-card h2{margin:0 0 11px;font-size:15px}.index-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}.index-card a{display:flex;justify-content:space-between;padding:8px 0;color:#607488;border-bottom:1px solid #edf2f6;font-size:13px;transition:color .2s}.index-card a:last-child{border-bottom:0}.index-card a:hover{color:var(--primary)}.update-line{display:flex;gap:10px;padding:8px 0;color:#63778a;font-size:12px}.update-dot{width:8px;height:8px;flex:0 0 auto;margin-top:7px;border-radius:50%;background:#9bc4df}.notice{padding:16px 18px;color:#546b7e;background:#f0f7fb;border:1px solid #d6e7f1;border-radius:15px;font-size:13px;line-height:1.8}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:38px}.page-no{width:40px;height:40px;display:grid;place-items:center;color:#61778a;background:#fff;border:1px solid var(--line);border-radius:11px;font-size:13px;font-weight:700;transition:.2s}.page-no:hover,.page-no.active{color:#fff;background:var(--primary);border-color:var(--primary)}.lower-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:31px 35px;background:#eaf4fb;border:1px solid #d1e4f0;border-radius:22px}.lower-cta h2{margin:0 0 7px;font-size:23px;line-height:1.35}.lower-cta p{max-width:690px;margin:0;color:#607488;font-size:14px}.footer{padding:54px 0 24px;color:#c7d3dd;background:#243849}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:44px}.footer-brand{margin-bottom:12px;color:#fff;font-size:18px;font-weight:800}.footer h2{margin:0 0 12px;color:#fff;font-size:14px}.footer p{margin:0;color:#b7c7d3;font-size:13px;line-height:1.85}.footer-links{display:grid;gap:7px}.footer-links a{color:#bfd1df;font-size:13px;transition:color .2s}.footer-links a:hover{color:#fff}.copyright{margin-top:35px;padding-top:19px;color:#94a9b8;border-top:1px solid rgba(202,220,232,.17);font-size:12px}
@media(max-width:1024px){.sidebar{display:none}.page-main{margin-left:0}.mobile-bar{display:flex;position:sticky;top:0;z-index:50;min-height:70px;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.mobile-logo{max-width:210px;font-size:14px;font-weight:800;line-height:1.3}.menu-button{width:44px;height:44px;display:grid;place-items:center;color:var(--text);background:#f1f6fa;border:1px solid var(--line);border-radius:12px;cursor:pointer}.mobile-drawer{position:fixed;inset:70px 0 auto;z-index:49;padding:18px 20px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.mobile-drawer.open{display:grid;gap:8px}.mobile-drawer a{padding:13px 15px;color:#52657a;background:#f8fbfd;border:1px solid var(--line);border-radius:12px}.mobile-drawer a.active{color:var(--primary-dark);font-weight:700;background:#eaf4fc}.category-grid{grid-template-columns:minmax(0,1fr) 280px;gap:30px}.catalog-layout{grid-template-columns:minmax(0,1fr)}.side-index{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.content-wrap{width:min(100% - 48px,1240px)}}@media(max-width:768px){.category-grid{grid-template-columns:1fr}.cover-art{min-height:260px;order:-1}.cover-index{top:35px}.cover-text{bottom:44px}.cover-rule{bottom:31px}.section-block{padding:62px 0}.category-hero{padding-bottom:52px}.feature-entry{grid-template-columns:1fr}.entry-visual{min-height:150px}.entry-card{grid-template-columns:82px minmax(0,1fr);gap:14px}.mini-cover{min-height:90px}.side-index{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:28px}.lower-cta{display:block}.lower-cta .button{margin-top:19px}}@media(max-width:520px){.content-wrap{width:min(100% - 32px,1240px)}.mobile-bar{padding:12px 16px}.category-title{font-size:34px}.topline{padding-top:18px}.filter-panel{padding:14px}.filter-search{width:100%}.entry-content{padding:21px}.entry-card{grid-template-columns:1fr}.mini-cover{min-height:72px}.entry-card h2,.entry-content h2{font-size:19px}.entry-footer{align-items:flex-start}.lower-cta{padding:25px}.lower-cta .button{width:100%}.footer{padding-top:42px}}