/* roulang page: index */
:root {
      --ink: #201b1c;
      --muted: #746a6c;
      --soft: #f7f2ef;
      --paper: #fffdfb;
      --line: #e8ddd8;
      --accent: #8f263f;
      --accent-dark: #6f1c30;
      --copper: #a66b45;
      --rose-soft: #f4e5e8;
      --success: #55745d;
      --warning: #9a6a25;
      --radius-sm: 6px;
      --radius: 8px;
      --radius-lg: 10px;
      --shadow-sm: 0 6px 18px rgba(32, 27, 28, .06);
      --shadow-md: 0 14px 34px rgba(32, 27, 28, .10);
      --container: 1200px;
      --ease: 180ms ease;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.72;
      letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

    img { max-width: 100%; display: block; }

    button, input, select, textarea {
      font: inherit;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(143, 38, 63, .22);
      outline-offset: 2px;
    }

    .site-container {
      width: min(100% - 32px, var(--container));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 253, 251, .96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 2px 16px rgba(32, 27, 28, .035);
    }

    .navbar {
      min-height: 72px;
      padding: 0;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
    }

    .brand-icon {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(143, 38, 63, .28);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(143, 38, 63, .16), rgba(166, 107, 69, .10)),
        var(--paper);
      position: relative;
      box-shadow: inset 0 0 0 5px rgba(255, 253, 251, .72);
    }

    .brand-icon::before,
    .brand-icon::after {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      height: 2px;
      border-radius: 4px;
      background: var(--accent);
    }

    .brand-icon::before { top: 11px; }
    .brand-icon::after { top: 20px; width: 10px; right: auto; }

    .brand-text {
      font-size: 17px;
      letter-spacing: 0;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 8px 10px;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(143, 38, 63, .16);
    }

    .nav-menu {
      gap: 6px;
      margin-left: 34px;
    }

    .nav-link {
      color: var(--muted);
      font-weight: 650;
      font-size: 15px;
      padding: 10px 14px !important;
      border-radius: var(--radius-sm);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--accent);
      background: var(--rose-soft);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-search {
      width: 210px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 16px;
      color: var(--ink);
      background: #fff;
      transition: border-color var(--ease), box-shadow var(--ease);
    }

    .nav-search::placeholder { color: #a09698; }

    .nav-search:focus {
      border-color: rgba(143, 38, 63, .55);
      box-shadow: 0 0 0 4px rgba(143, 38, 63, .10);
      outline: none;
    }

    .btn-main,
    .btn-line,
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
      border-radius: var(--radius);
      font-weight: 750;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), border-color var(--ease), color var(--ease);
    }

    .btn-main {
      color: #fff;
      background: var(--accent);
      box-shadow: 0 8px 18px rgba(143, 38, 63, .20);
    }

    .btn-main:hover {
      color: #fff;
      background: var(--accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(143, 38, 63, .24);
    }

    .btn-line {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
    }

    .btn-line:hover {
      color: var(--accent);
      border-color: rgba(143, 38, 63, .30);
      background: var(--rose-soft);
      transform: translateY(-1px);
    }

    .btn-soft {
      color: var(--accent);
      background: var(--rose-soft);
      border-color: rgba(143, 38, 63, .10);
    }

    .btn-soft:hover {
      color: var(--accent-dark);
      border-color: rgba(143, 38, 63, .30);
      transform: translateY(-1px);
    }

    main {
      overflow: hidden;
    }

    section {
      padding: 72px 0;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      background: rgba(143, 38, 63, .08);
      border: 1px solid rgba(143, 38, 63, .12);
      border-radius: 999px;
      padding: 5px 11px;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section-title {
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.22;
      font-weight: 850;
      margin: 0 0 14px;
      letter-spacing: 0;
    }

    .section-desc {
      max-width: 760px;
      color: var(--muted);
      font-size: 16px;
      margin: 0;
    }

    .hero {
      padding: 46px 0 22px;
      background:
        radial-gradient(circle at 18% 20%, rgba(143, 38, 63, .10), transparent 28%),
        linear-gradient(180deg, #fffaf8 0%, #f7f2ef 100%);
      border-bottom: 1px solid var(--line);
    }

    .hero-board {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 26px;
      align-items: stretch;
    }

    .hero-copy {
      min-height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px 0;
    }

    .age-strip {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border: 1px solid rgba(143, 38, 63, .20);
      background: rgba(255, 255, 255, .70);
      color: var(--accent-dark);
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    .hero h1 {
      font-size: clamp(32px, 4.6vw, 54px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 900;
      margin: 0 0 20px;
    }

    .hero-lead {
      max-width: 680px;
      font-size: 17px;
      color: #5f5557;
      margin: 0 0 26px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 24px;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 650px;
    }

    .point {
      min-height: 78px;
      background: rgba(255, 255, 255, .72);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
    }

    .point strong {
      display: block;
      font-size: 20px;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 5px;
      font-variant-numeric: tabular-nums;
    }

    .point span {
      color: var(--muted);
      font-size: 13px;
    }

    .choice-stage {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 14px;
      align-content: center;
    }

    .choice-stack {
      display: grid;
      gap: 14px;
    }

    .choice-card,
    .matrix-card,
    .value-item,
    .news-card,
    .wall-card,
    .quote-card,
    .form-panel,
    .faq-wrap {
      background: rgba(255, 253, 251, .92);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .choice-card:hover,
    .matrix-card:hover,
    .value-item:hover,
    .news-card:hover,
    .wall-card:hover,
    .quote-card:hover {
      transform: translateY(-2px);
      border-color: rgba(143, 38, 63, .26);
      box-shadow: var(--shadow-md);
    }

    .choice-card {
      padding: 18px;
      min-height: 156px;
      position: relative;
      overflow: hidden;
    }

    .choice-card.featured {
      min-height: 334px;
      background:
        linear-gradient(145deg, rgba(143, 38, 63, .94), rgba(111, 28, 48, .98)),
        var(--accent);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-color: rgba(143, 38, 63, .45);
      box-shadow: 0 18px 38px rgba(111, 28, 48, .24);
    }

    .choice-card h2,
    .choice-card h3 {
      font-size: 22px;
      line-height: 1.3;
      margin: 10px 0 8px;
      font-weight: 850;
    }

    .choice-card p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .choice-card.featured p,
    .choice-card.featured .choice-meta {
      color: rgba(255, 255, 255, .80);
    }

    .choice-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .badge-mini,
    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(143, 38, 63, .16);
      background: rgba(255, 255, 255, .72);
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .choice-card.featured .badge-mini {
      color: #fff;
      border-color: rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .12);
    }

    .countdown-section {
      padding: 18px 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .countdown-bar {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 18px;
      align-items: center;
    }

    .status-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      font-weight: 850;
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 5px rgba(85, 116, 93, .12);
    }

    .status-line small {
      color: var(--muted);
      font-weight: 650;
    }

    .time-boxes {
      display: flex;
      gap: 8px;
      font-variant-numeric: tabular-nums;
    }

    .time-box {
      width: 54px;
      min-height: 50px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--soft);
      text-align: center;
    }

    .time-box b {
      display: block;
      font-size: 18px;
      line-height: 1;
    }

    .time-box span {
      display: block;
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    .directory {
      background: var(--paper);
    }

    .directory-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 14px;
      margin-top: 28px;
    }

    .matrix-card {
      min-height: 172px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .matrix-card strong {
      font-size: 19px;
      line-height: 1.35;
      margin-bottom: 8px;
      display: block;
    }

    .matrix-card p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .matrix-card .arrow {
      align-self: flex-start;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(143, 38, 63, .18);
      color: var(--accent);
      background: var(--rose-soft);
      margin-top: 16px;
    }

    .value-section {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .value-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 42px;
      align-items: start;
    }

    .value-list {
      display: grid;
      gap: 12px;
    }

    .value-item {
      min-height: 108px;
      padding: 18px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: start;
    }

    .num-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      background: var(--ink);
      color: #fff;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }

    .value-item h3 {
      font-size: 18px;
      margin: 0 0 5px;
      font-weight: 850;
    }

    .value-item p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .news-section {
      background: #fff;
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 24px;
      margin-top: 30px;
    }

    .news-list {
      display: grid;
      gap: 12px;
    }

    .news-card {
      padding: 16px;
      display: grid;
      grid-template-columns: 112px 1fr auto;
      gap: 16px;
      align-items: center;
    }

    .safe-thumb {
      width: 112px;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(143, 38, 63, .12);
      background:
        linear-gradient(135deg, rgba(143, 38, 63, .16), rgba(166, 107, 69, .12)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 8px, rgba(255,255,255,.15) 8px 16px);
      position: relative;
      overflow: hidden;
    }

    .safe-thumb::after {
      content: "18+";
      position: absolute;
      left: 10px;
      bottom: 8px;
      color: #fff;
      background: rgba(32, 27, 28, .72);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 850;
    }

    .news-card h3 {
      font-size: 18px;
      line-height: 1.35;
      margin: 6px 0 4px;
      font-weight: 850;
    }

    .news-card p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .news-side {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: var(--soft);
      height: fit-content;
    }

    .news-side h3 {
      font-size: 20px;
      font-weight: 850;
      margin-bottom: 14px;
    }

    .rank-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .rank-list li {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 10px;
      align-items: start;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .rank-list li:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .rank-no {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--accent);
      border: 1px solid rgba(143, 38, 63, .14);
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }

    .rank-list a {
      font-weight: 780;
      line-height: 1.45;
    }

    .rank-list a:hover {
      color: var(--accent);
    }

    .rank-list span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px;
    }

    .wall-section {
      background: var(--paper);
      padding-top: 40px;
    }

    .wall-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 112px;
      gap: 14px;
      margin-top: 30px;
    }

    .wall-card {
      padding: 16px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(145deg, rgba(255, 253, 251, .95), rgba(247, 242, 239, .92));
    }

    .wall-card.large {
      grid-column: span 5;
      grid-row: span 3;
      background:
        linear-gradient(145deg, rgba(32, 27, 28, .92), rgba(111, 28, 48, .88)),
        var(--ink);
      color: #fff;
    }

    .wall-card.medium {
      grid-column: span 4;
      grid-row: span 2;
    }

    .wall-card.small {
      grid-column: span 3;
      grid-row: span 1;
    }

    .wall-card.tall {
      grid-column: span 3;
      grid-row: span 2;
    }

    .wall-card h3 {
      font-size: 20px;
      line-height: 1.35;
      font-weight: 850;
      margin: 10px 0 0;
    }

    .wall-card.large h3 {
      font-size: 29px;
      line-height: 1.22;
    }

    .wall-card p {
      color: var(--muted);
      margin: 8px 0 0;
      font-size: 14px;
    }

    .wall-card.large p {
      color: rgba(255, 255, 255, .76);
    }

    .wall-card::before {
      content: "";
      position: absolute;
      right: -40px;
      bottom: -46px;
      width: 140px;
      height: 140px;
      border: 1px solid rgba(143, 38, 63, .16);
      transform: rotate(18deg);
      border-radius: 18px;
    }

    .review-section {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .review-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px;
      margin-top: 30px;
    }

    .score-panel {
      background: var(--ink);
      color: #fff;
      border-radius: var(--radius);
      padding: 24px;
      min-height: 270px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .score-number {
      font-size: 58px;
      line-height: 1;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      margin-bottom: 10px;
    }

    .score-panel p {
      color: rgba(255, 255, 255, .76);
      margin: 0;
    }

    .quote-list {
      display: grid;
      gap: 12px;
    }

    .quote-card {
      padding: 18px;
    }

    .quote-card p {
      margin: 0 0 10px;
      color: #4f4648;
    }

    .quote-card span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .lead-section {
      background: #fff;
    }

    .lead-panel {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 28px;
      align-items: center;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(143, 38, 63, .07), rgba(166, 107, 69, .06)),
        var(--soft);
      box-shadow: var(--shadow-sm);
    }

    .lead-panel h2 {
      font-size: clamp(27px, 3vw, 36px);
      line-height: 1.22;
      font-weight: 900;
      margin: 0 0 12px;
    }

    .lead-panel p {
      color: var(--muted);
      margin: 0 0 20px;
    }

    .form-panel {
      padding: 20px;
      background: #fff;
    }

    .form-label {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 7px;
    }

    .form-control,
    .form-select {
      min-height: 46px;
      border-radius: var(--radius);
      border-color: var(--line);
      color: var(--ink);
      box-shadow: none;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: rgba(143, 38, 63, .58);
      box-shadow: 0 0 0 4px rgba(143, 38, 63, .10);
    }

    .form-check-input {
      border-color: var(--line);
    }

    .form-check-input:checked {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .form-hint {
      display: none;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: var(--radius);
      background: rgba(85, 116, 93, .10);
      color: var(--success);
      font-size: 13px;
      font-weight: 750;
    }

    .faq-section {
      background: var(--paper);
      padding-top: 40px;
    }

    .faq-wrap {
      margin-top: 28px;
      overflow: hidden;
      box-shadow: none;
    }

    .accordion-item {
      border: 0;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .accordion-item:last-child {
      border-bottom: 0;
    }

    .accordion-button {
      color: var(--ink);
      background: #fff;
      font-weight: 850;
      font-size: 17px;
      padding: 20px;
      box-shadow: none;
      letter-spacing: 0;
    }

    .accordion-button:not(.collapsed) {
      color: var(--accent);
      background: var(--rose-soft);
      box-shadow: none;
    }

    .accordion-button:focus {
      box-shadow: inset 0 0 0 3px rgba(143, 38, 63, .10);
    }

    .accordion-button::after {
      transition: transform var(--ease);
    }

    .accordion-body {
      color: var(--muted);
      padding: 0 20px 20px;
      font-size: 15px;
    }

    .fixed-cta {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 45;
      width: min(calc(100% - 28px), 720px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px 10px 18px;
      border: 1px solid rgba(143, 38, 63, .18);
      border-radius: var(--radius-lg);
      background: rgba(255, 253, 251, .94);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 34px rgba(32, 27, 28, .16);
    }

    .fixed-cta strong {
      font-size: 14px;
      line-height: 1.35;
    }

    .fixed-cta span {
      color: var(--muted);
      font-size: 12px;
      display: block;
    }

    .site-footer {
      padding: 48px 0 94px;
      background: #f4efec;
      border-top: 1px solid var(--line);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr;
      gap: 28px;
    }

    .footer-brand {
      font-size: 18px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .footer-text {
      color: var(--muted);
      margin: 0;
      max-width: 560px;
      font-size: 14px;
    }

    .footer-title {
      font-size: 14px;
      font-weight: 850;
      margin-bottom: 12px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      color: var(--muted);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    .copyright {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1199px) {
      .hero-board,
      .value-layout,
      .lead-panel,
      .review-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        min-height: auto;
        padding-bottom: 4px;
      }

      .choice-stage {
        grid-template-columns: 1fr 1fr;
      }

      .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .wall-card.large { grid-column: span 6; }
      .wall-card.medium { grid-column: span 6; }
      .wall-card.small { grid-column: span 4; }
      .wall-card.tall { grid-column: span 4; }
    }

    @media (max-width: 991px) {
      .navbar-collapse {
        padding: 16px 0 18px;
      }

      .nav-menu {
        margin-left: 0;
        gap: 4px;
      }

      .nav-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 12px;
      }

      .nav-search {
        width: 100%;
        border-radius: var(--radius);
      }

      .countdown-bar,
      .news-layout,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .news-card {
        grid-template-columns: 96px 1fr;
      }

      .news-card .btn-line {
        grid-column: 2;
        width: fit-content;
      }
    }

    @media (max-width: 767px) {
      .site-container {
        width: min(100% - 24px, var(--container));
      }

      section {
        padding: 52px 0;
      }

      .hero {
        padding-top: 32px;
      }

      .hero h1 {
        font-size: 34px;
      }

      .hero-lead {
        font-size: 15px;
      }

      .hero-actions,
      .fixed-cta {
        align-items: stretch;
      }

      .hero-actions .btn-main,
      .hero-actions .btn-line,
      .hero-actions .btn-soft {
        flex: 1 1 100%;
      }

      .hero-points,
      .choice-stage,
      .directory-grid {
        grid-template-columns: 1fr;
      }

      .choice-card.featured {
        min-height: 260px;
      }

      .countdown-bar {
        gap: 12px;
      }

      .time-boxes {
        width: 100%;
      }

      .time-box {
        flex: 1;
        width: auto;
      }

      .news-card {
        grid-template-columns: 1fr;
      }

      .safe-thumb {
        width: 100%;
        aspect-ratio: 16 / 8;
      }

      .news-card .btn-line {
        grid-column: auto;
        width: 100%;
      }

      .wall-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
      }

      .wall-card,
      .wall-card.large,
      .wall-card.medium,
      .wall-card.small,
      .wall-card.tall {
        grid-column: auto;
        grid-row: auto;
        min-height: 170px;
      }

      .lead-panel {
        padding: 18px;
      }

      .fixed-cta {
        flex-direction: column;
        bottom: 12px;
        padding: 12px;
      }

      .fixed-cta .btn-main {
        width: 100%;
      }

      .copyright {
        display: block;
      }

      .copyright span {
        display: block;
        margin-top: 8px;
      }
    }

    @media (max-width: 520px) {
      .brand-text {
        font-size: 15px;
        max-width: 210px;
        white-space: normal;
        line-height: 1.25;
      }

      .section-title {
        font-size: 28px;
      }

      .choice-card h2,
      .choice-card h3,
      .wall-card.large h3 {
        font-size: 22px;
      }

      .value-item {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category2 */
:root {
      --ink: #211b1d;
      --muted: #756a6d;
      --soft: #faf7f4;
      --paper: #ffffff;
      --line: #eadfdd;
      --accent: #8b2335;
      --accent-dark: #681729;
      --accent-soft: #f7e9ec;
      --copper: #a06a43;
      --rose-gray: #eee5e4;
      --success: #55745f;
      --warning: #9a6b2f;
      --radius: 8px;
      --radius-lg: 10px;
      --shadow: 0 14px 36px rgba(41, 27, 31, .07);
      --shadow-hover: 0 20px 46px rgba(41, 27, 31, .12);
      --container: 1200px;
      --transition: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background: linear-gradient(180deg, #fffdfb 0%, var(--soft) 54%, #ffffff 100%);
      line-height: 1.7;
      letter-spacing: 0;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .site-container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .96);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 22px rgba(42, 29, 32, .04);
      backdrop-filter: blur(10px);
    }

    .navbar {
      min-height: 72px;
      padding: 0;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: 0;
    }

    .brand-icon {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(139, 35, 53, .28);
      border-radius: 8px;
      position: relative;
      background:
        linear-gradient(135deg, rgba(139, 35, 53, .12), rgba(160, 106, 67, .12)),
        #fff;
      box-shadow: inset 0 0 0 4px rgba(255,255,255,.7);
    }

    .brand-icon::before,
    .brand-icon::after {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--accent);
      border-radius: 99px;
    }

    .brand-icon::before {
      top: 12px;
    }

    .brand-icon::after {
      top: 21px;
      width: 12px;
      right: auto;
      background: var(--copper);
    }

    .brand-text {
      font-size: 18px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: none;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(139, 35, 53, .16);
    }

    .nav-menu {
      gap: 4px;
      align-items: center;
    }

    .nav-link {
      color: var(--muted);
      font-size: 15px;
      font-weight: 650;
      padding: 10px 14px !important;
      border-radius: 8px;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--accent);
      background: var(--accent-soft);
    }

    .nav-link.active {
      color: var(--accent);
      background: #f9eef0;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 18px;
    }

    .nav-search {
      width: 188px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 16px;
      color: var(--ink);
      background: #fff;
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .nav-search::placeholder {
      color: #a5989b;
    }

    .nav-search:focus,
    .form-control:focus,
    .form-select:focus {
      border-color: rgba(139, 35, 53, .62);
      box-shadow: 0 0 0 3px rgba(139, 35, 53, .14);
    }

    .btn-main,
    .btn-outline-soft {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      padding: 10px 18px;
      font-weight: 750;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
    }

    .btn-main {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 22px rgba(139, 35, 53, .18);
    }

    .btn-main:hover,
    .btn-main:focus {
      background: var(--accent-dark);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(139, 35, 53, .24);
    }

    .btn-outline-soft {
      background: #fff;
      color: var(--accent);
      border-color: rgba(139, 35, 53, .24);
    }

    .btn-outline-soft:hover,
    .btn-outline-soft:focus {
      background: var(--accent-soft);
      border-color: rgba(139, 35, 53, .42);
      color: var(--accent-dark);
      transform: translateY(-1px);
    }

    .page-hero {
      padding: 58px 0 34px;
      background:
        radial-gradient(circle at 16% 10%, rgba(139, 35, 53, .08), transparent 30%),
        linear-gradient(135deg, #fff 0%, #fbf5f3 100%);
      border-bottom: 1px solid var(--line);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
      gap: 34px;
      align-items: stretch;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      background: rgba(139, 35, 53, .08);
      border: 1px solid rgba(139, 35, 53, .16);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 750;
      margin-bottom: 18px;
    }

    .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
    }

    h1 {
      font-size: 42px;
      line-height: 1.18;
      font-weight: 850;
      margin: 0 0 16px;
      letter-spacing: 0;
      max-width: 760px;
    }

    .hero-copy {
      font-size: 17px;
      color: var(--muted);
      max-width: 720px;
      margin: 0 0 22px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 24px 0 20px;
    }

    .age-note {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #6f4b52;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px 14px;
      font-size: 14px;
      max-width: 710px;
    }

    .age-note strong {
      color: var(--accent);
      flex: 0 0 auto;
    }

    .cover-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 18px;
      min-height: 340px;
    }

    .cover-art {
      position: relative;
      min-height: 210px;
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(139, 35, 53, .88), rgba(33, 27, 29, .86)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 22px);
      color: #fff;
      padding: 22px;
    }

    .cover-art::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -34px;
      width: 170px;
      height: 170px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
    }

    .cover-kicker {
      font-size: 13px;
      opacity: .82;
      margin-bottom: 42px;
    }

    .cover-title {
      position: relative;
      z-index: 1;
      font-size: 26px;
      line-height: 1.24;
      font-weight: 850;
      max-width: 270px;
    }

    .summary-list {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .summary-list li {
      display: flex;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 14px;
    }

    .summary-list span {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: var(--accent-soft);
      font-size: 12px;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .status-strip {
      padding: 18px 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .status-inner {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 12px;
      align-items: center;
    }

    .status-title {
      font-weight: 800;
      font-size: 17px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    main {
      overflow: hidden;
    }

    .section {
      padding: 64px 0;
    }

    .section-compact {
      padding: 44px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(260px, .32fr);
      gap: 24px;
      align-items: end;
      margin-bottom: 28px;
    }

    .section-label {
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .section-title {
      font-size: 32px;
      line-height: 1.24;
      font-weight: 850;
      margin: 0;
    }

    .section-desc {
      color: var(--muted);
      margin: 0;
      font-size: 15px;
    }

    .topic-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 28px;
      align-items: start;
    }

    .topic-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }

    .topic-card {
      position: relative;
      min-height: 210px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 20px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(41, 27, 31, .04);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .topic-card:hover {
      transform: translateY(-2px);
      border-color: rgba(139, 35, 53, .32);
      box-shadow: var(--shadow-hover);
    }

    .topic-card.large {
      grid-column: span 7;
      min-height: 300px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,233,236,.82)),
        repeating-linear-gradient(135deg, rgba(139,35,53,.06) 0 1px, transparent 1px 18px);
    }

    .topic-card.medium {
      grid-column: span 5;
    }

    .topic-card.small {
      grid-column: span 6;
      min-height: 178px;
    }

    .card-num {
      color: rgba(139, 35, 53, .28);
      font-size: 44px;
      line-height: 1;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(139, 35, 53, .18);
      background: rgba(139, 35, 53, .07);
      color: var(--accent);
      font-size: 12px;
      font-weight: 750;
    }

    .tag.neutral {
      color: var(--muted);
      border-color: var(--line);
      background: var(--soft);
    }

    .topic-card h2,
    .topic-card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.32;
      font-weight: 840;
    }

    .topic-card h3 {
      font-size: 19px;
    }

    .topic-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .topic-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
      color: #8a7d80;
      font-size: 13px;
    }

    .side-panel {
      position: sticky;
      top: 92px;
      display: grid;
      gap: 16px;
    }

    .panel-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 20px;
      box-shadow: 0 8px 20px rgba(41, 27, 31, .04);
    }

    .panel-title {
      font-size: 18px;
      font-weight: 820;
      margin-bottom: 12px;
    }

    .rule-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .rule-list li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    .rule-list b {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: var(--accent-soft);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .timeline {
      display: grid;
      gap: 14px;
      margin-top: 10px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 18px;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 16px;
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .timeline-item:hover {
      transform: translateY(-1px);
      border-color: rgba(139, 35, 53, .28);
      box-shadow: var(--shadow);
    }

    .time-box {
      border-radius: 8px;
      background: var(--soft);
      border: 1px solid var(--line);
      min-height: 118px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--accent);
      font-weight: 850;
    }

    .time-box span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      margin-top: 4px;
    }

    .timeline-body h3 {
      font-size: 19px;
      margin: 0 0 8px;
      font-weight: 820;
    }

    .timeline-body p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 15px;
    }

    .mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .mini-link {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 6px 11px;
      border-radius: 7px;
      border: 1px solid var(--line);
      color: var(--accent);
      background: #fff;
      font-size: 13px;
      font-weight: 760;
    }

    .mini-link:hover {
      background: var(--accent-soft);
      border-color: rgba(139, 35, 53, .28);
      color: var(--accent-dark);
    }

    .lead-band {
      background:
        linear-gradient(135deg, rgba(139, 35, 53, .08), rgba(160, 106, 67, .08)),
        #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .lead-box {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(340px, .62fr);
      gap: 30px;
      align-items: center;
    }

    .lead-title {
      font-size: 31px;
      line-height: 1.25;
      font-weight: 850;
      margin: 0 0 12px;
    }

    .lead-text {
      color: var(--muted);
      margin: 0;
    }

    .lead-form {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: var(--shadow);
    }

    .form-control,
    .form-select {
      min-height: 44px;
      border-radius: 8px;
      border-color: var(--line);
      color: var(--ink);
      background-color: #fff;
    }

    .form-check-input {
      border-color: rgba(139, 35, 53, .38);
    }

    .form-check-input:checked {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .form-check-input:focus {
      box-shadow: 0 0 0 3px rgba(139, 35, 53, .14);
      border-color: var(--accent);
    }

    .form-hint {
      color: var(--muted);
      font-size: 13px;
      margin-top: 10px;
    }

    .faq-wrap {
      max-width: 920px;
      margin: 0 auto;
    }

    .accordion {
      display: grid;
      gap: 12px;
    }

    .accordion-item {
      border: 1px solid var(--line);
      border-radius: var(--radius) !important;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 8px 20px rgba(41, 27, 31, .035);
    }

    .accordion-button {
      padding: 18px 20px;
      font-weight: 800;
      color: var(--ink);
      background: #fff;
      box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
      color: var(--accent);
      background: var(--accent-soft);
      box-shadow: none;
    }

    .accordion-button:focus {
      border-color: transparent;
      box-shadow: inset 0 0 0 3px rgba(139, 35, 53, .12);
    }

    .accordion-button::after {
      transition: transform var(--transition);
    }

    .accordion-body {
      color: var(--muted);
      padding: 0 20px 20px;
      font-size: 15px;
    }

    .site-footer {
      background: #fbf8f6;
      border-top: 1px solid var(--line);
      padding: 44px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) .55fr .55fr;
      gap: 34px;
      padding-bottom: 30px;
    }

    .footer-brand {
      font-size: 20px;
      font-weight: 850;
      margin-bottom: 10px;
    }

    .footer-text {
      color: var(--muted);
      margin: 0;
      max-width: 560px;
      font-size: 14px;
    }

    .footer-title {
      font-weight: 820;
      margin-bottom: 10px;
    }

    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      color: var(--muted);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    .copyright {
      border-top: 1px solid var(--line);
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: #8c8082;
      font-size: 13px;
      flex-wrap: wrap;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1199px) {
      .site-container {
        width: min(100% - 32px, var(--container));
      }

      .hero-grid,
      .lead-box {
        grid-template-columns: 1fr;
      }

      .topic-layout {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
        grid-template-columns: repeat(2, 1fr);
      }

      .nav-actions {
        margin-left: 0;
      }
    }

    @media (max-width: 991px) {
      .navbar {
        padding: 14px 0;
      }

      .navbar-collapse {
        padding-top: 16px;
      }

      .nav-menu {
        align-items: stretch;
        gap: 6px;
      }

      .nav-link {
        padding: 11px 12px !important;
      }

      .nav-actions {
        padding-top: 12px;
        flex-direction: column;
        align-items: stretch;
      }

      .nav-search {
        width: 100%;
        border-radius: 8px;
      }

      .status-inner {
        grid-template-columns: 1fr 1fr;
      }

      .section-head {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 767px) {
      .site-container {
        width: min(100% - 24px, var(--container));
      }

      .page-hero {
        padding: 38px 0 28px;
      }

      h1 {
        font-size: 32px;
      }

      .hero-copy {
        font-size: 15px;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .btn-main,
      .btn-outline-soft {
        width: 100%;
        white-space: normal;
        text-align: center;
      }

      .cover-panel {
        padding: 14px;
        min-height: auto;
      }

      .cover-art {
        min-height: 188px;
      }

      .status-inner {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 46px 0;
      }

      .section-title {
        font-size: 27px;
      }

      .topic-grid {
        grid-template-columns: 1fr;
      }

      .topic-card.large,
      .topic-card.medium,
      .topic-card.small {
        grid-column: auto;
        min-height: 190px;
      }

      .side-panel {
        grid-template-columns: 1fr;
      }

      .timeline-item {
        grid-template-columns: 1fr;
      }

      .time-box {
        min-height: 76px;
      }

      .lead-box {
        gap: 20px;
      }

      .lead-title {
        font-size: 26px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .copyright {
        display: grid;
      }
    }

    @media (max-width: 520px) {
      .brand-text {
        font-size: 16px;
        max-width: 190px;
        white-space: normal;
      }

      .brand-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
      }

      .age-note {
        display: block;
      }

      .age-note strong {
        display: inline-block;
        margin-bottom: 4px;
      }

      .tag-row,
      .mini-actions {
        gap: 6px;
      }

      .accordion-button {
        padding: 16px;
        font-size: 15px;
      }

      .accordion-body {
        padding: 0 16px 16px;
      }
    }

/* roulang page: category1 */
:root {
      --ink: #20191a;
      --muted: #6f6264;
      --soft: #f7f2f0;
      --paper: #fffdfb;
      --line: #e8ddda;
      --accent: #7b2638;
      --accent-dark: #5e1b2a;
      --accent-soft: #f2e4e7;
      --copper: #9b6a43;
      --rose-gray: #d8c7c9;
      --success: #55735d;
      --warning: #a07136;
      --radius: 8px;
      --radius-lg: 10px;
      --shadow: 0 14px 36px rgba(32, 25, 26, .08);
      --shadow-hover: 0 18px 44px rgba(32, 25, 26, .13);
      --container: 1200px;
      --transition: 190ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    ::selection {
      color: #fff;
      background: var(--accent);
    }

    .site-container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 253, 251, .96);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 22px rgba(32, 25, 26, .04);
      backdrop-filter: blur(10px);
    }

    .site-header .navbar {
      min-height: 72px;
      padding: 0;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      font-weight: 800;
      color: var(--ink);
    }

    .brand-icon {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(123, 38, 56, .42);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(123, 38, 56, .12), rgba(155, 106, 67, .16)),
        linear-gradient(90deg, transparent 45%, rgba(123, 38, 56, .42) 45%, rgba(123, 38, 56, .42) 55%, transparent 55%);
      position: relative;
      flex: 0 0 auto;
    }

    .brand-icon::before,
    .brand-icon::after {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      height: 1px;
      background: rgba(123, 38, 56, .58);
    }

    .brand-icon::before {
      top: 11px;
    }

    .brand-icon::after {
      bottom: 11px;
    }

    .brand-text {
      font-size: 18px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 8px 10px;
      box-shadow: none;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(123, 38, 56, .12);
    }

    .navbar-toggler-icon {
      width: 1.25em;
      height: 1.25em;
    }

    .nav-menu {
      gap: 4px;
      align-items: center;
    }

    .nav-link {
      color: var(--muted);
      font-weight: 700;
      font-size: 15px;
      padding: 10px 14px !important;
      border-radius: var(--radius);
      position: relative;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--accent);
      background: var(--accent-soft);
    }

    .nav-link.active {
      color: var(--accent);
      background: #f8ecef;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 18px;
    }

    .nav-search {
      width: 190px;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      padding: 0 16px;
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    }

    .nav-search::placeholder {
      color: #9a8d8f;
    }

    .nav-search:focus {
      border-color: rgba(123, 38, 56, .56);
      box-shadow: 0 0 0 4px rgba(123, 38, 56, .1);
      background: #fffdfd;
    }

    .btn-main,
    .btn-outline,
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
      border-radius: var(--radius);
      font-weight: 800;
      line-height: 1.25;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
    }

    .btn-main {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 10px 20px rgba(123, 38, 56, .18);
    }

    .btn-main:hover,
    .btn-main:focus {
      color: #fff;
      background: var(--accent-dark);
      border-color: var(--accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(123, 38, 56, .24);
    }

    .btn-outline {
      color: var(--accent);
      background: #fff;
      border-color: rgba(123, 38, 56, .28);
    }

    .btn-outline:hover,
    .btn-outline:focus {
      color: var(--accent-dark);
      background: var(--accent-soft);
      border-color: rgba(123, 38, 56, .45);
      transform: translateY(-1px);
    }

    .btn-soft {
      color: var(--accent-dark);
      background: #f8ecef;
      border-color: #edd3d9;
    }

    .btn-soft:hover,
    .btn-soft:focus {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .page-hero {
      background:
        radial-gradient(circle at 84% 18%, rgba(123, 38, 56, .18), transparent 28%),
        linear-gradient(135deg, #261c1e 0%, #151112 52%, #302326 100%);
      color: #fff;
      padding: 56px 0 34px;
      position: relative;
      overflow: hidden;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: auto -8% -42% 42%;
      height: 280px;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 28px);
      transform: rotate(-8deg);
      opacity: .38;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 34px;
      align-items: stretch;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #f0dfe3;
      font-size: 14px;
      font-weight: 800;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      margin-bottom: 18px;
    }

    .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #d4a36d;
      box-shadow: 0 0 0 4px rgba(212, 163, 109, .16);
    }

    h1 {
      max-width: 760px;
      margin: 0;
      font-size: 42px;
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-copy {
      max-width: 760px;
      color: rgba(255,255,255,.78);
      font-size: 17px;
      margin: 18px 0 24px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px;
    }

    .age-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 720px;
      color: rgba(255,255,255,.74);
      font-size: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius);
      background: rgba(255,255,255,.06);
    }

    .age-note strong {
      color: #fff;
      white-space: nowrap;
    }

    .rank-panel {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.26);
      backdrop-filter: blur(12px);
    }

    .rank-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .rank-title {
      font-weight: 900;
      font-size: 18px;
    }

    .rank-state {
      color: #f1dcc9;
      font-size: 13px;
      border: 1px solid rgba(241, 220, 201, .28);
      border-radius: 999px;
      padding: 4px 9px;
    }

    .rank-item {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .rank-item:last-child {
      border-bottom: 0;
    }

    .rank-no {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(255,255,255,.13);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .rank-name {
      font-weight: 800;
      line-height: 1.35;
    }

    .rank-desc {
      color: rgba(255,255,255,.62);
      font-size: 13px;
      line-height: 1.4;
      margin-top: 2px;
    }

    .rank-tag {
      color: #ffe0e6;
      font-size: 13px;
      font-weight: 800;
    }

    main {
      background:
        linear-gradient(180deg, #fbf7f5 0%, #fffdfb 320px),
        var(--paper);
    }

    .section {
      padding: 54px 0;
    }

    .section-tight {
      padding: 34px 0;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-end;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
    }

    .section-kicker {
      color: var(--accent);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    h2 {
      margin: 0;
      font-size: 30px;
      line-height: 1.28;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-summary {
      max-width: 470px;
      color: var(--muted);
      margin: 0;
      font-size: 15px;
    }

    .filter-board {
      margin-top: -22px;
      position: relative;
      z-index: 2;
    }

    .filter-inner {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .filter-grid {
      display: grid;
      grid-template-columns: minmax(240px, 1.3fr) 1fr 1fr 1fr auto;
      gap: 12px;
      align-items: end;
    }

    .field-label {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 7px;
    }

    .form-control,
    .form-select {
      min-height: 44px;
      border-color: var(--line);
      border-radius: var(--radius);
      color: var(--ink);
      box-shadow: none;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: rgba(123, 38, 56, .62);
      box-shadow: 0 0 0 4px rgba(123, 38, 56, .1);
    }

    .rule-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .tag,
    .status-badge {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
    }

    .tag.is-active,
    .status-badge.primary {
      color: var(--accent);
      background: var(--accent-soft);
      border-color: rgba(123, 38, 56, .24);
    }

    .status-badge.ok {
      color: var(--success);
      background: #edf4ee;
      border-color: #d7e5da;
    }

    .content-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 26px;
      align-items: start;
    }

    .feature-strip {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 20px;
      margin-bottom: 18px;
      border: 1px solid rgba(123, 38, 56, .18);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(123, 38, 56, .08), rgba(155, 106, 67, .08)),
        #fff;
    }

    .feature-strip h3 {
      margin: 0 0 6px;
      font-size: 22px;
      font-weight: 900;
    }

    .feature-strip p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .list-stack {
      display: grid;
      gap: 14px;
    }

    .info-card {
      display: grid;
      grid-template-columns: 176px minmax(0, 1fr);
      gap: 18px;
      padding: 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 22px rgba(32, 25, 26, .045);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .info-card:hover {
      transform: translateY(-2px);
      border-color: rgba(123, 38, 56, .32);
      box-shadow: var(--shadow-hover);
    }

    .thumb {
      min-height: 132px;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius);
      border: 1px solid rgba(123, 38, 56, .12);
      background:
        linear-gradient(135deg, rgba(123, 38, 56, .42), rgba(32, 25, 26, .78)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 13px);
      position: relative;
      overflow: hidden;
    }

    .thumb::before {
      content: attr(data-label);
      position: absolute;
      left: 12px;
      top: 12px;
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(0,0,0,.28);
    }

    .thumb::after {
      content: "";
      position: absolute;
      right: -24px;
      bottom: -24px;
      width: 92px;
      height: 92px;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 50%;
    }

    .card-topline {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .info-card h3 {
      margin: 0 0 8px;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 900;
    }

    .info-card p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 15px;
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      color: #8c7e80;
      font-size: 13px;
    }

    .card-meta time {
      font-variant-numeric: tabular-nums;
    }

    .sidebar {
      display: grid;
      gap: 16px;
      position: sticky;
      top: 92px;
    }

    .side-box {
      padding: 18px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 22px rgba(32, 25, 26, .04);
    }

    .side-title {
      margin: 0 0 12px;
      font-size: 17px;
      font-weight: 900;
    }

    .summary-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .summary-list li {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    .summary-list li:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .summary-list strong {
      color: var(--ink);
      font-weight: 900;
      white-space: nowrap;
    }

    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .steps {
      counter-reset: step;
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .steps li {
      counter-increment: step;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .steps li::before {
      content: counter(step, decimal-leading-zero);
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #fff;
      background: var(--accent);
      font-weight: 900;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .step-title {
      display: block;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .step-text {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    .pagination-wrap {
      margin-top: 22px;
      display: flex;
      justify-content: center;
    }

    .pagination {
      gap: 6px;
      margin: 0;
    }

    .page-link {
      min-width: 38px;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px !important;
      color: var(--muted);
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .page-link:hover,
    .page-link:focus {
      color: var(--accent);
      background: var(--accent-soft);
      border-color: rgba(123, 38, 56, .28);
      box-shadow: none;
    }

    .page-item.active .page-link {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
    }

    .guide-band {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .guide-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: start;
    }

    .notice-card {
      padding: 22px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(123, 38, 56, .18);
      background: #fff;
      box-shadow: var(--shadow);
    }

    .notice-card h2 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .notice-card p {
      color: var(--muted);
      margin: 0;
    }

    .point-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .point {
      padding: 16px;
      min-height: 128px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
    }

    .point b {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
    }

    .point span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .lead-panel {
      background:
        linear-gradient(135deg, rgba(123, 38, 56, .1), rgba(155, 106, 67, .08)),
        #fff;
      border: 1px solid rgba(123, 38, 56, .18);
      border-radius: var(--radius-lg);
      padding: 26px;
      box-shadow: var(--shadow);
    }

    .lead-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 26px;
      align-items: center;
    }

    .lead-panel h2 {
      margin-bottom: 10px;
    }

    .lead-panel p {
      color: var(--muted);
      margin: 0 0 18px;
    }

    .lead-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .lead-form .full {
      grid-column: 1 / -1;
    }

    .form-check-input {
      border-color: var(--line);
      box-shadow: none;
    }

    .form-check-input:checked {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .form-check-input:focus {
      border-color: rgba(123, 38, 56, .58);
      box-shadow: 0 0 0 4px rgba(123, 38, 56, .1);
    }

    .faq-wrap {
      max-width: 980px;
      margin: 0 auto;
    }

    .accordion {
      display: grid;
      gap: 10px;
    }

    .accordion-item {
      border: 1px solid var(--line);
      border-radius: var(--radius) !important;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 6px 18px rgba(32, 25, 26, .04);
    }

    .accordion-button {
      color: var(--ink);
      background: #fff;
      font-weight: 900;
      padding: 17px 18px;
      box-shadow: none;
      letter-spacing: 0;
    }

    .accordion-button:not(.collapsed) {
      color: var(--accent);
      background: #fff7f8;
      box-shadow: inset 0 -1px 0 var(--line);
    }

    .accordion-button:focus {
      border-color: rgba(123, 38, 56, .38);
      box-shadow: 0 0 0 4px rgba(123, 38, 56, .1);
    }

    .accordion-button::after {
      transition: transform var(--transition);
    }

    .accordion-body {
      color: var(--muted);
      padding: 16px 18px 18px;
      font-size: 15px;
    }

    .site-footer {
      background: #f4efed;
      border-top: 1px solid var(--line);
      padding: 42px 0 22px;
      color: var(--muted);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 34px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand {
      color: var(--ink);
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .footer-text {
      margin: 0;
      max-width: 480px;
      font-size: 14px;
    }

    .footer-title {
      color: var(--ink);
      font-weight: 900;
      margin-bottom: 10px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      color: var(--muted);
      font-size: 14px;
    }

    .footer-links a:hover,
    .footer-links a:focus {
      color: var(--accent);
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      font-size: 13px;
      color: #827477;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1199.98px) {
      .hero-grid,
      .content-layout,
      .guide-grid,
      .lead-grid {
        grid-template-columns: 1fr;
      }

      .rank-panel,
      .sidebar {
        position: static;
      }

      .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .filter-grid .btn-main {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 991.98px) {
      .site-header .navbar {
        min-height: 66px;
      }

      .navbar-collapse {
        padding: 14px 0 18px;
      }

      .nav-menu {
        align-items: stretch;
        gap: 6px;
        margin: 12px 0;
      }

      .nav-link {
        padding: 11px 12px !important;
      }

      .nav-actions {
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        width: 100%;
      }

      .nav-search {
        width: 100%;
        border-radius: var(--radius);
      }

      h1 {
        font-size: 36px;
      }

      h2 {
        font-size: 27px;
      }

      .section-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-grid > div:first-child {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 767.98px) {
      .site-container {
        width: min(100% - 28px, var(--container));
      }

      .page-hero {
        padding: 42px 0 28px;
      }

      h1 {
        font-size: 31px;
      }

      .hero-copy {
        font-size: 16px;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .age-note {
        display: block;
      }

      .age-note strong {
        display: block;
        margin-bottom: 4px;
      }

      .rank-item {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .rank-tag {
        grid-column: 2;
      }

      .filter-grid,
      .point-grid,
      .lead-form {
        grid-template-columns: 1fr;
      }

      .feature-strip {
        grid-template-columns: 1fr;
      }

      .info-card {
        grid-template-columns: 1fr;
      }

      .thumb {
        min-height: 170px;
      }

      .section {
        padding: 42px 0;
      }

      .section-tight {
        padding: 28px 0;
      }

      .lead-panel {
        padding: 20px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .copyright {
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .brand-text {
        max-width: 210px;
        white-space: normal;
        font-size: 16px;
      }

      .nav-actions {
        grid-template-columns: 1fr;
      }

      .btn-main,
      .btn-outline,
      .btn-soft {
        width: 100%;
        white-space: normal;
        min-height: 46px;
        text-align: center;
      }

      .filter-inner,
      .side-box,
      .notice-card {
        padding: 16px;
      }

      .card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .pagination {
        flex-wrap: wrap;
      }
    }