@media (max-width: 1050px) {
    .wrap { width: calc(100% - 40px); }
    .comic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .hero-copy { padding: 25px; }
    .hero-image { min-height: 350px; }
    .nav { justify-content: flex-start; }
    .brand-note { display: none; }
}
@media (max-width: 760px) {
    .comic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-slide { grid-template-columns: 1fr; }
    .hero-image { height: auto; min-height: 0; aspect-ratio: 16/9; }
    .hero-copy { min-height: 295px; padding: 24px; }
    .hero-top { flex-wrap: wrap; }
    .detail-hero { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding: 20px; }
    .metadata { grid-template-columns: 1fr; }
    .chapter-list { grid-template-columns: 1fr; }
    .mobile-module { padding: 25px; gap: 20px; }
    .mobile-module > img { width: 75px; height: 75px; }
    .ranking li { grid-template-columns: 35px 1fr auto; }
    .rank-genre { display: none; }
}
@media (max-width: 520px) {
    .wrap { width: calc(100% - 28px); }
    .header-top { min-height: 76px; gap: 10px; }
    .brand { font-size: 22px; gap: 7px; }
    .brand img { width: 35px; height: 35px; }
    .header-cta { font-size: 12px; }
    .nav { gap: 3px; padding-bottom: 10px; }
    .nav a { font-size: 13px; padding: 8px 7px; }
    .nav .icon { width: 16px; height: 16px; }
    main { padding-top: 22px; }
    .comic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .section { margin-top: 32px; }
    .section-heading h2 { font-size: 22px; }
    .tone { padding: 17px 12px; }
    .card-body h3 { font-size: 16px; }
    .hero-copy { padding: 23px 20px; }
    .hero-copy h2 { font-size: 30px; }
    .hero-meta { font-size: 13px; }
    .hero-intro { font-size: 15px; }
    .mobile-module { align-items: flex-start; flex-direction: column; }
    .mobile-module h2 { font-size: 25px; }
    .detail-hero { grid-template-columns: 1fr; }
    .detail-hero > img { width: 170px; }
    .feature-row { grid-template-columns: 95px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
    .feature-row img { width: 95px; }
    .feature-row p { font-size: 14px; }
    .feature-row h3 { font-size: 17px; }
    .gallery { gap: 10px; }
    .ranking li { padding: 14px 12px; gap: 10px; font-size: 14px; }
    .rank-number { font-size: 23px; }
    .button { padding: 9px 12px; }
    .filters label { width: 100%; }
    .filters input, .filters select { width: 100%; display: block; margin-top: 5px; }
}