@media (max-width: 1100px) {
    .main-nav { gap: 20px; }
    .comic-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .quick-bar { gap: 20px; }
    .hero-copy { padding-left: 30px; }
}
@media (max-width: 800px) {
    .wrap { width: calc(100% - 36px); }
    .comic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
    .header-note { display: none; }
    .header-mobile { margin-left: auto; }
    .quick-bar { flex-wrap: wrap; gap: 20px; }
    .quick-bar > div { flex-basis: 100%; }
    .ranking-strip { grid-template-columns: 1fr; gap: 20px; }
    .hero-slide { grid-template-columns: 1fr; }
    .hero-art { grid-column: 1; grid-row: 1; height: auto; }
    .hero-image { height: auto; aspect-ratio: 16 / 9; }
    .hero-art::after { background: linear-gradient(0deg,var(--deep),transparent 60%); }
    .hero-copy { grid-column: 1; grid-row: 2; padding: 10px 26px 85px; }
    .hero-label { margin-bottom: 15px; }
    .hero-desc { max-width: none; }
    .slider-controls { left: 26px; }
    .detail-hero { grid-template-columns: 180px minmax(0,1fr); gap: 24px; padding: 20px; }
    .detail-hero h1 { font-size: 30px; }
    .chapter-list { grid-template-columns: 1fr; }
    .mobile-panel { align-items: flex-start; }
    .footer-grid { gap: 24px; grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 540px) {
    .wrap { width: calc(100% - 28px); }
    .header-top { min-height: 86px; gap: 10px; }
    .brand { font-size: 24px; gap: 8px; }
    .brand small { font-size: 10px; letter-spacing: 1px; }
    .brand img { width: 38px; height: 38px; }
    .header-mobile { font-size: 12px; padding: 6px 8px; }
    .home-title span { font-size: 11px; }
    .home-title h1 { font-size: 16px; }
    .comic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
    .card-copy { padding: 10px; }
    .card-copy h3 { font-size: 16px; height: 44px; }
    .section-heading { align-items: flex-start; gap: 10px; }
    .section-heading h2 { font-size: 19px; }
    .section-heading .icon { width: 19px; height: 19px; }
    .section-heading .more { font-size: 12px; white-space: nowrap; }
    .shelf { margin: 34px 0; }
    .hero-copy { padding: 5px 20px 82px; }
    .hero h2 { font-size: 32px; }
    .hero-meta { font-size: 12px; }
    .hero-desc { font-size: 14px; }
    .hero .button { padding: 10px 16px; }
    .quick-bar { justify-content: space-between; gap: 14px; }
    .quick-bar a { gap: 5px; font-size: 13px; }
    .quick-bar .icon { width: 16px; }
    .ranking-strip { padding: 22px; margin: 34px 0; }
    .ranking-strip li { gap: 12px; }
    .ranking-strip li p { font-size: 11px; }
    .ranking-strip h2 { font-size: 25px; }
    .mobile-panel { display: block; padding: 24px; }
    .mobile-panel img { width: 74px; height: 74px; margin-bottom: 20px; }
    .mobile-panel h2 { font-size: 27px; }
    .footer-grid { grid-template-columns: 1fr; }
    .site-footer nav:last-child { grid-template-columns: 1fr 1fr; }
    .detail-hero { display: block; padding: 20px; }
    .detail-hero > .cover { width: 160px; margin: 0 auto 25px; }
    .detail-hero .actions { gap: 8px; }
    .detail-hero .button { padding: 9px 12px; }
    .feature-pick { grid-template-columns: 100px minmax(0,1fr); gap: 16px; padding: 16px; }
    .feature-pick > a { width: 100px; }
    .feature-pick .cover { height: 150px; }
    .feature-pick h2 { font-size: 20px; }
    .feature-pick p { font-size: 13px; }
    .feature-pick .button { font-size: 12px; padding: 8px; }
    .catalog-controls { gap: 12px; }
    .catalog-controls label:first-child { width: 100%; }
    .catalog-search { flex: 1; }
    .story-gallery > div { grid-template-columns: 1fr; }
    .prose { margin-top: 30px; }
}