@media (max-width: 1160px) {
    .header-inner {
        grid-template-columns: auto 1fr;
    }

    .main-nav {
        grid-column: 1 / -1;
        order: 3;
        padding-bottom: 10px;
    }

    .site-search {
        justify-self: end;
        width: 260px;
    }

    .poster-grid,
    .section-short .poster-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .poster-card:nth-child(5) {
        display: none;
    }
}

@media (max-width: 820px) {
    .shell {
        width: min(100% - 28px, 720px);
    }

    .site-search {
        display: none;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .menu-button {
        display: grid;
        width: 42px;
        height: 42px;
        place-content: center;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
    }

    .menu-button span {
        width: 19px;
        height: 2px;
        background: var(--text);
    }

    .main-nav {
        display: none;
        grid-column: 1 / -1;
        flex-wrap: nowrap;
    }

    .main-nav.is-open {
        display: flex;
    }

    .hero-stage {
        min-height: 500px;
    }

    .hero-shade {
        background: linear-gradient(0deg, rgba(7, 10, 17, 0.98) 10%, rgba(7, 10, 17, 0.38) 88%);
    }

    .hero-content {
        top: auto;
        right: 24px;
        bottom: 55px;
        left: 24px;
        width: auto;
        transform: none;
    }

    .hero-content h2 {
        font-size: 46px;
    }

    .hero-arrow {
        top: 36%;
    }

    .now-strip,
    .split-feature,
    .documentary-band,
    .ranking-panel,
    .detail-section,
    .rank-board {
        grid-template-columns: 1fr;
    }

    .now-list {
        grid-template-columns: 1fr;
    }

    .now-list a {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .poster-grid,
    .section-short .poster-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-tv .poster-card:nth-child(even) {
        transform: none;
    }

    .section-variety,
    .update-board {
        padding: 24px;
    }

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

    .split-image {
        min-height: 360px;
    }

    .documentary-stack {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        overflow-x: auto;
    }

    .rank-list {
        grid-template-columns: 1fr;
    }

    .app-banner,
    .footer-grid,
    .category-feature-grid,
    .prose-grid {
        grid-template-columns: 1fr;
    }

    .app-code {
        justify-self: start;
    }

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

    .detail-score {
        grid-column: 1 / -1;
        grid-template-columns: auto auto auto;
        gap: 12px;
        align-items: center;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .shell {
        width: calc(100% - 24px);
    }

    .content-section,
    .update-board,
    .split-feature,
    .documentary-band,
    .ranking-panel,
    .about-panel,
    .app-banner,
    .catalog,
    .detail-section,
    .stills,
    .watch-shell,
    .watch-episodes,
    .watch-description,
    .rank-board,
    .prose-panel {
        margin-top: 54px;
    }

    .hero {
        margin-top: 14px;
    }

    .hero-stage {
        min-height: 470px;
        border-radius: 20px;
    }

    .hero-content h2 {
        font-size: 38px;
    }

    .hero-actions .button {
        flex: 1 1 130px;
    }

    .hero-arrow {
        width: 40px;
        height: 40px;
    }

    .poster-grid,
    .section-short .poster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .poster-card:nth-child(5) {
        display: block;
    }

    .section-heading {
        align-items: center;
    }

    .section-heading h2 {
        font-size: 27px;
    }

    .section-heading > a {
        font-size: 13px;
    }

    .update-list a {
        grid-template-columns: 44px 32px 1fr;
    }

    .update-list b {
        display: none;
    }

    .documentary-band,
    .ranking-panel,
    .about-panel,
    .app-banner,
    .channel-hero,
    .rank-hero,
    .simple-hero,
    .detail-hero,
    .prose-panel {
        padding: 24px;
        border-radius: 22px;
    }

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

    .footer-grid {
        gap: 32px;
    }

    .footer-bottom {
        display: grid;
    }

    .channel-hero {
        display: block;
    }

    .channel-count {
        display: block;
        margin-top: 20px;
    }

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

    .catalog-toolbar {
        display: grid;
    }

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

    .detail-poster {
        width: min(240px, 76%);
        margin-inline: auto;
    }

    .detail-info h1 {
        font-size: 44px;
    }

    .detail-meta {
        grid-template-columns: 1fr;
    }

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

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

    .watch-heading {
        align-items: start;
        flex-direction: column;
    }

    .watch-controls {
        grid-template-columns: 1fr 1fr;
    }

    .watch-controls span {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .video-note {
        right: 8px;
        bottom: 8px;
        left: 8px;
    }

    .rank-column {
        padding: 18px;
    }
}