@media (max-width: 1050px) {
    .site-nav {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 70px;
        display: none;
        grid-template-columns: repeat(3, 1fr);
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #0c171f;
        box-shadow: var(--shadow);
    }

    .site-nav.open {
        display: grid;
    }

    .menu-toggle {
        display: inline-flex;
        gap: 7px;
    }

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

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .poster-row,
    .compact-carousel {
        grid-template-columns: repeat(2, 1fr);
    }

    .update-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

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

@media (max-width: 760px) {
    .section-shell,
    .header-inner,
    .footer-grid,
    .copyright,
    .app-banner {
        width: min(100% - 28px, 1200px);
    }

    .brand-copy small {
        display: none;
    }

    .site-nav {
        grid-template-columns: repeat(2, 1fr);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .hero {
        min-height: auto;
        gap: 28px;
        padding-block: 42px 30px;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 17vw, 5rem);
    }

    .hero-visual {
        border-radius: 24px 8px 24px 8px;
        box-shadow: 12px 12px 0 rgba(83, 214, 208, 0.09);
    }

    .content-section {
        margin-block: 58px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .feature-mosaic,
    .poster-row,
    .compact-carousel,
    .video-grid,
    .topic-grid,
    .related-grid,
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .feature-mosaic .feature-card,
    .topic-card:first-child {
        grid-row: auto;
    }

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

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

    .category-card {
        min-height: 230px;
        padding: 20px;
    }

    .split-showcase,
    .ranking-layout,
    .recommendation-lab,
    .about-section,
    .category-hero,
    .channel-notes,
    .mini-ranking,
    .story-section,
    .highlight-section {
        grid-template-columns: 1fr;
    }

    .split-showcase,
    .recommendation-lab,
    .category-hero {
        gap: 30px;
        padding: 28px;
    }

    .editorial-card {
        grid-template-columns: 46px 1fr;
    }

    .editorial-card img {
        grid-column: 1 / 3;
    }

    .topic-card {
        min-height: 360px;
    }

    .topic-card > div {
        max-width: 100%;
    }

    .app-banner {
        grid-template-columns: 1fr;
        padding: 34px 26px;
    }

    .brand-code {
        width: 130px;
    }

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

    .category-feature {
        min-height: 260px;
    }

    .player-main-button {
        width: 64px;
    }

    .player-controls {
        left: 10px;
        right: 10px;
        gap: 7px;
    }

    .player-controls input {
        min-width: 60px;
    }

    .player-time {
        display: none;
    }

    .story-section blockquote {
        grid-column: 1;
    }

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

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

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

    .episode-nav a:last-child {
        text-align: left;
    }
}

@media (max-width: 430px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .hero-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-meta span + span::before {
        content: "";
        margin: 0;
    }

    .ranking-list li {
        grid-template-columns: 46px 1fr;
    }

    .ranking-list li > strong {
        grid-column: 2;
    }

    .mini-ranking li {
        grid-template-columns: 30px 1fr;
    }

    .mini-ranking li > strong {
        grid-column: 2;
    }
}