/* roulang page: index */
:root {
      color-scheme: light;
      --ink: #172b43;
      --muted: #68798b;
      --ocean: #2365a8;
      --ocean-dark: #184e87;
      --mint: #218675;
      --coral: #db7956;
      --paper: #f5f8fa;
      --line: #e2e9ef;
      --white: #fff;
      --radius: 8px;
      --shadow: 0 12px 30px rgba(25, 54, 82, .075);
      --shadow-hover: 0 18px 36px rgba(25, 54, 82, .13);
      --content: 1200px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      background: #fff;
      color: var(--ink);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid rgba(35, 101, 168, .38); outline-offset: 3px; }
    .container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; z-index: 50; top: 0;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid rgba(226,233,239,.9);
      backdrop-filter: blur(12px);
    }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
    .brand-mark {
      display: grid; place-items: center; flex: 0 0 42px; height: 42px;
      color: #fff; background: var(--ocean); border-radius: 7px;
      font-size: 13px; font-weight: 800; letter-spacing: 0;
    }
    .brand-name { font-weight: 750; font-size: 15px; line-height: 1.3; white-space: nowrap; }
    .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
    .nav-links a:not(.btn) { color: #53677b; font-size: 13px; transition: color .18s ease; }
    .nav-links a:not(.btn):hover, .nav-links a.active { color: var(--ocean-dark); }
    .menu-toggle {
      display: none; width: 44px; height: 44px; border: 1px solid var(--line);
      color: var(--ink); background: #fff; border-radius: 6px; cursor: pointer;
    }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
      content: ""; display: block; width: 18px; height: 2px; margin: 4px auto;
      background: currentColor; transition: transform .18s ease;
    }
    .menu-toggle[aria-expanded="true"] span { opacity: 0; }
    .menu-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

    .btn {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 10px 18px; border: 1px solid transparent; border-radius: 6px;
      font-weight: 700; font-size: 14px; line-height: 1.3; cursor: pointer;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { color: #fff; background: var(--ocean); box-shadow: 0 6px 14px rgba(35,101,168,.18); }
    .btn-primary:hover { background: var(--ocean-dark); box-shadow: 0 9px 18px rgba(35,101,168,.24); }
    .btn-secondary { color: var(--ocean-dark); border-color: #cad9e7; background: #fff; }
    .btn-secondary:hover { background: #f1f6fa; border-color: #a9c2d9; }
    .btn-small { min-height: 39px; padding: 8px 14px; font-size: 13px; }
    .hero { padding: 40px 0 52px; background: #f5f8fa; }
    .hero-stage {
      position: relative; min-height: 470px; overflow: hidden; display: flex; align-items: flex-end;
      background: #223a51; border-radius: 8px; box-shadow: var(--shadow);
    }
    .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
    .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,33,51,.84) 0%, rgba(14,33,51,.56) 46%, rgba(14,33,51,.05) 100%), linear-gradient(0deg, rgba(10,25,39,.42), transparent 50%); }
    .hero-copy { position: relative; z-index: 1; width: min(760px, 100%); padding: 56px 60px; color: #fff; }
    .hero-kicker { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; color: #d6e9f6; font-size: 13px; font-weight: 650; }
    .hero-kicker::before { content: ""; width: 23px; height: 2px; background: #75c8b3; }
    .hero h1 { margin: 0; max-width: 680px; font-size: 54px; line-height: 1.2; font-weight: 800; }
    .hero h1 em { color: #9ce0cf; font-style: normal; }
    .hero-subtitle { margin: 12px 0 16px; color: #e4edf4; font-size: 19px; font-weight: 550; }
    .hero-description { max-width: 680px; margin: 0; color: #edf3f7; font-size: 15px; line-height: 1.95; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
    .hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); }
    .hero .btn-secondary:hover { background: rgba(255,255,255,.17); }
    .hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: #d4e1e9; font-size: 12px; }
    .hero-proof span::before { content: "✓"; margin-right: 7px; color: #9ce0cf; font-weight: 800; }
    main { overflow: hidden; }
    .section { padding: 72px 0; }
    .section-alt { background: var(--paper); }
    .section-line { border-top: 1px solid var(--line); }
    .section-head { max-width: 760px; margin-bottom: 30px; }
    .eyebrow { margin: 0 0 8px; color: var(--mint); font-size: 12px; font-weight: 800; }
    .section-title { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 780; }
    .section-intro { margin: 12px 0 0; max-width: 740px; color: var(--muted); font-size: 14px; }
    .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .benefit { display: flex; gap: 16px; padding: 21px 0; border-top: 1px solid var(--line); }
    .benefit-number { display: grid; place-items: center; flex: 0 0 40px; height: 40px; color: var(--ocean); background: #eaf2f8; border-radius: 6px; font-weight: 800; }
    .benefit h3 { margin: 0 0 5px; font-size: 16px; }
    .benefit p { margin: 0; color: var(--muted); font-size: 13px; }
    .showcase-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
    .showcase-image-wrap { position: relative; overflow: hidden; aspect-ratio: 1.32; border-radius: 8px; background: #dce6ec; box-shadow: var(--shadow); }
    .showcase-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .image-caption { position: absolute; bottom: 14px; left: 14px; padding: 7px 10px; color: #fff; background: rgba(18,38,57,.8); border-radius: 4px; font-size: 12px; }
    .path-list { display: grid; gap: 0; margin-top: 20px; }
    .path-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .path-index { color: var(--mint); font-size: 12px; font-weight: 800; }
    .path-item h3 { margin: 0; font-size: 15px; }
    .path-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .poster-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; }
    .poster-card { min-width: 0; }
    .poster-art { position: relative; overflow: hidden; aspect-ratio: 2 / 2.82; background: #e8edf1; border-radius: 6px; box-shadow: 0 5px 15px rgba(25,54,82,.09); }
    .poster-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
    .poster-card:hover .poster-art img { transform: scale(1.045); }
    .poster-card:focus-within .poster-art img { transform: scale(1.025); }
    .poster-badges { position: absolute; top: 9px; left: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
    .badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid transparent; border-radius: 3px; font-size: 10px; line-height: 1.2; font-weight: 750; }
    .badge-quality { color: #fff; background: rgba(23,43,67,.82); }
    .badge-update { color: #155f52; border-color: #b7ddd3; background: #e7f5f1; }
    .badge-genre { color: #3d627d; border-color: #d2e0e9; background: #f2f7fa; }
    .poster-info { padding: 10px 1px 0; }
    .poster-title { overflow: hidden; margin: 0; font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .poster-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 11px; }
    .score { color: #a45c26; font-weight: 800; white-space: nowrap; }
    .score::before { content: "★"; margin-right: 4px; color: #d99048; }
    .popular-layout { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; align-items: stretch; }
    .popular-feature { position: relative; min-height: 385px; overflow: hidden; border-radius: 8px; background: #28435a; }
    .popular-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .popular-feature::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(14,31,46,.88), transparent 66%); }
    .popular-feature-copy { position: absolute; z-index: 1; right: 23px; bottom: 23px; left: 23px; color: #fff; }
    .popular-feature-copy h3 { margin: 7px 0 4px; font-size: 23px; }
    .popular-feature-copy p { margin: 0; color: #e1e9ef; font-size: 12px; }
    .popular-side { display: grid; gap: 14px; }
    .popular-item { display: grid; grid-template-columns: 94px 1fr; gap: 14px; min-height: 112px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: box-shadow .18s ease, transform .18s ease; }
    .popular-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .popular-item img { width: 94px; height: 112px; object-fit: cover; border-radius: 4px; }
    .popular-item h3 { margin: 7px 0 6px; font-size: 14px; }
    .popular-item p { margin: 0; color: var(--muted); font-size: 11px; }
    .popular-item .score { display: inline-block; margin-top: 6px; font-size: 12px; }
    .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .category-item { min-height: 145px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .18s ease; }
    .category-item:hover { background: #f2f7fa; }
    .category-item .cat-no { color: var(--mint); font-size: 11px; font-weight: 800; }
    .category-item h3 { margin: 6px 0; font-size: 16px; }
    .category-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .rank-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: start; }
    .rank-note { position: sticky; top: 105px; padding-top: 12px; }
    .rank-note .section-title { max-width: 340px; }
    .rank-note p { max-width: 360px; color: var(--muted); font-size: 14px; }
    .rank-list { border-top: 1px solid var(--line); }
    .rank-row { display: grid; grid-template-columns: 43px minmax(0,1fr) auto auto; align-items: center; gap: 14px; min-height: 60px; border-bottom: 1px solid var(--line); }
    .rank-no { color: #8ca0b1; font-size: 16px; font-weight: 800; }
    .rank-row:nth-child(-n+3) .rank-no { color: var(--coral); }
    .rank-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .rank-tag { padding: 3px 7px; color: #567287; background: #edf3f7; border-radius: 3px; font-size: 10px; white-space: nowrap; }
    .rank-heat { min-width: 71px; color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
    .feature-story { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 315px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
    .feature-story img { width: 100%; height: 100%; min-height: 315px; object-fit: cover; }
    .feature-story-copy { display: flex; flex-direction: column; justify-content: center; padding: 34px; }
    .feature-story-copy h3 { margin: 10px 0; font-size: 24px; line-height: 1.45; }
    .feature-story-copy p { margin: 0; color: var(--muted); font-size: 13px; }
    .story-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
    .story-links a { padding: 6px 10px; color: var(--ocean-dark); border: 1px solid #d8e4ed; border-radius: 4px; font-size: 11px; transition: background .18s ease; }
    .story-links a:hover { background: #eef5f9; }
    .preference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
    .preference-group { padding-top: 18px; border-top: 2px solid var(--ocean); }
    .preference-group:nth-child(2) { border-color: var(--coral); }
    .preference-group h3 { margin: 0 0 7px; font-size: 18px; }
    .preference-group p { margin: 0 0 17px; color: var(--muted); font-size: 13px; }
    .link-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
    .link-cloud a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 12px; transition: border-color .18s ease, color .18s ease; }
    .link-cloud a:hover { color: var(--ocean); border-color: #9bbbd5; }
    .detail-preview { display: grid; grid-template-columns: 250px 1fr; gap: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
    .detail-preview img { width: 100%; height: 310px; object-fit: cover; border-radius: 5px; }
    .detail-copy { align-self: center; }
    .detail-copy h3 { margin: 8px 0 4px; font-size: 26px; }
    .detail-subtitle { margin: 0 0 17px; color: var(--muted); font-size: 13px; }
    .detail-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .fact { padding: 6px 9px; color: #50677a; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; }
    .detail-copy > p:not(.detail-subtitle) { max-width: 650px; color: var(--muted); font-size: 13px; }
    .detail-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
    .shelf { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 13px; }
    .shelf-item { position: relative; overflow: hidden; aspect-ratio: 1 / 1.2; border-radius: 6px; background: #e8edf1; }
    .shelf-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
    .shelf-item:hover img { transform: scale(1.04); }
    .shelf-item span { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 12px 10px; color: white; background: linear-gradient(transparent, rgba(12,29,44,.85)); font-size: 13px; font-weight: 700; }
    .guide-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
    .guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .guide-link { display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 10px; min-height: 62px; border-bottom: 1px solid var(--line); }
    .guide-link span:first-child { color: var(--mint); font-size: 11px; font-weight: 800; }
    .guide-link strong { font-size: 13px; }
    .guide-link span:last-child { color: #93a3b1; }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .news-item { display: grid; grid-template-columns: 98px 1fr; gap: 13px; min-height: 103px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .news-item img { width: 98px; height: 78px; object-fit: cover; border-radius: 5px; }
    .news-item time { color: var(--mint); font-size: 10px; font-weight: 750; }
    .news-item h3 { margin: 4px 0; font-size: 13px; line-height: 1.5; }
    .news-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .faq-list { max-width: 900px; border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item summary { position: relative; padding: 18px 42px 18px 0; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; position: absolute; top: 15px; right: 4px; color: var(--ocean); font-size: 22px; font-weight: 400; }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p { max-width: 800px; margin: -4px 0 18px; color: var(--muted); font-size: 13px; }
    .more-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
    .more-column { padding-top: 15px; border-top: 2px solid var(--mint); }
    .more-column:nth-child(2) { border-color: var(--ocean); }
    .more-column:nth-child(3) { border-color: var(--coral); }
    .more-column h3 { margin: 0 0 11px; font-size: 15px; }
    .more-column a { display: block; padding: 8px 0; color: #556c80; border-bottom: 1px solid var(--line); font-size: 12px; transition: color .18s ease; }
    .more-column a:hover { color: var(--ocean); }
    .assurance { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; border: 1px solid #cfe2db; border-radius: 7px; background: #f0f8f5; }
    .assurance h2 { margin: 0 0 4px; font-size: 18px; }
    .assurance p { margin: 0; color: #5e766f; font-size: 12px; }
    .assurance-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .assurance-tags span { padding: 7px 10px; color: #286b5d; border: 1px solid #c7dfd7; border-radius: 4px; background: #fff; font-size: 11px; }
    .site-footer { padding: 52px 0 24px; color: #d7e0e7; background: #172b43; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 38px; }
    .footer-brand .brand-name { color: #fff; white-space: normal; }
    .footer-brand p { max-width: 300px; margin: 14px 0 0; color: #aab9c6; font-size: 12px; }
    .footer-col h3 { margin: 0 0 13px; color: #fff; font-size: 13px; }
    .footer-col a { display: block; width: fit-content; margin: 8px 0; color: #b9c7d2; font-size: 12px; transition: color .18s ease; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.14); color: #9fb0bd; font-size: 11px; }
    .floating-cta {
      position: fixed; z-index: 40; right: 22px; bottom: max(20px, env(safe-area-inset-bottom));
      display: flex; align-items: center; gap: 18px; max-width: calc(100% - 32px);
      padding: 10px 11px 10px 16px; border: 1px solid var(--line); border-radius: 7px;
      background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(20,45,68,.16);
      transition: opacity .2s ease, transform .2s ease;
    }
    .floating-cta[hidden] { display: none; }
    .floating-cta p { margin: 0; font-size: 12px; font-weight: 700; }
    .floating-cta .btn { min-height: 37px; padding: 8px 12px; font-size: 12px; }
    .float-close { width: 28px; height: 28px; padding: 0; color: #708294; border: 0; background: transparent; cursor: pointer; font-size: 19px; }

    @media (max-width: 1024px) {
      .nav-links { gap: 16px; }
      .nav-links a:not(.btn) { font-size: 12px; }
      .poster-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
      .popular-layout { grid-template-columns: 1fr 1fr; }
      .popular-feature { min-height: 420px; }
      .popular-side:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      html { scroll-padding-top: 72px; }
      .container { width: min(var(--content), calc(100% - 36px)); }
      .nav-wrap { min-height: 68px; }
      .brand-name { max-width: 245px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
      .menu-toggle { display: block; }
      .nav-links {
        position: absolute; top: calc(100% - 1px); right: 0; left: 0;
        display: none; align-items: stretch; gap: 0; padding: 8px 18px 18px;
        background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px rgba(25,54,82,.08);
      }
      .nav-links.open { display: flex; flex-direction: column; }
      .nav-links a:not(.btn) { padding: 11px 4px; border-bottom: 1px solid #edf1f4; font-size: 14px; }
      .nav-links .btn { margin-top: 12px; }
      .hero { padding: 22px 0 36px; }
      .hero-stage { min-height: 460px; }
      .hero-copy { padding: 38px 30px; }
      .hero h1 { font-size: 42px; }
      .section { padding: 56px 0; }
      .section-title { font-size: 27px; }
      .benefit-grid { gap: 14px; }
      .showcase-grid { grid-template-columns: 1fr; gap: 24px; }
      .showcase-image-wrap { aspect-ratio: 1.6; }
      .poster-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px 13px; }
      .rank-layout { grid-template-columns: 1fr; gap: 18px; }
      .rank-note { position: static; }
      .rank-note p { max-width: 680px; }
      .feature-story { grid-template-columns: 1fr 1fr; }
      .feature-story-copy { padding: 23px; }
      .feature-story-copy h3 { font-size: 21px; }
      .preference-grid { gap: 24px; }
      .detail-preview { grid-template-columns: 190px 1fr; gap: 22px; padding: 18px; }
      .detail-preview img { height: 275px; }
      .guide-layout { grid-template-columns: 1fr; gap: 16px; }
      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 32px); }
      .brand { gap: 8px; }
      .brand-mark { flex-basis: 38px; height: 38px; font-size: 12px; }
      .brand-name { max-width: 210px; font-size: 12px; }
      .hero-stage { min-height: 500px; align-items: flex-end; }
      .hero-image { object-position: 58% center; }
      .hero-shade { background: linear-gradient(0deg, rgba(14,33,51,.91), rgba(14,33,51,.48) 60%, rgba(14,33,51,.1)); }
      .hero-copy { padding: 30px 22px; }
      .hero h1 { font-size: 36px; }
      .hero-subtitle { font-size: 16px; }
      .hero-description { font-size: 13px; }
      .hero-actions .btn { flex: 1 1 145px; }
      .hero-proof { gap: 7px 13px; }
      .section { padding: 45px 0; }
      .section-title { font-size: 24px; }
      .section-intro { font-size: 13px; }
      .benefit-grid { grid-template-columns: 1fr; gap: 0; }
      .benefit { padding: 16px 0; }
      .showcase-image-wrap { aspect-ratio: 1.25; }
      .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 21px 13px; }
      .popular-layout { grid-template-columns: 1fr; }
      .popular-feature { min-height: 350px; }
      .popular-side:last-child { grid-column: auto; grid-template-columns: 1fr; }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .category-item { min-height: 150px; padding: 16px 13px; }
      .rank-row { grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; min-height: 58px; }
      .rank-heat { display: none; }
      .rank-name { font-size: 13px; }
      .feature-story { grid-template-columns: 1fr; }
      .feature-story img { min-height: 210px; max-height: 240px; }
      .feature-story-copy { padding: 21px; }
      .preference-grid { grid-template-columns: 1fr; gap: 23px; }
      .detail-preview { grid-template-columns: 105px 1fr; gap: 14px; padding: 13px; }
      .detail-preview img { height: 170px; }
      .detail-copy h3 { font-size: 19px; }
      .detail-subtitle { margin-bottom: 10px; font-size: 11px; }
      .detail-facts { gap: 5px; margin-bottom: 8px; }
      .fact { padding: 4px 6px; font-size: 10px; }
      .detail-copy > p:not(.detail-subtitle) { display: none; }
      .detail-footer { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 8px; }
      .shelf { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
      .guide-list { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; gap: 2px; }
      .more-grid { grid-template-columns: 1fr; gap: 22px; }
      .assurance { align-items: flex-start; flex-direction: column; padding: 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
      .floating-cta { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; justify-content: space-between; gap: 8px; max-width: none; padding: 8px 8px 8px 12px; }
      .floating-cta p { max-width: 48%; font-size: 11px; line-height: 1.4; }
      .floating-cta .btn { min-height: 36px; padding-inline: 10px; font-size: 11px; }
      .float-close { flex: 0 0 26px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }