@media (max-width: 767px) {
    html {
        touch-action: none;
        overscroll-behavior-y: contain;
    }

    body {
        scrollbar-gutter: auto;
    }

    input, textarea {
        touch-action: auto !important;
    }

    #content-wrapper {
        min-height: 400dvh;
    }

    #main-content {
        display: block !important;
        max-width: none !important;
        min-height: 300dvh;
        padding: 0 !important;
    }

    #cards-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        max-width: none !important;
        width: 100%;
    }

    .mobile-snap-page,
    #contact-section {
        min-height: 100dvh !important;
    }

    .glass-card.mobile-snap-page {
        width: 100%;
        height: 100dvh;
        aspect-ratio: auto;
        padding: 4.7rem 1.65rem 5.5rem !important;
        border-radius: 0 !important;
        justify-content: center;
        overflow: hidden;
    }

    .glass-card > div:first-child {
        justify-content: center;
        transform: translateY(-36px);
    }

    .glass-card > div:first-child > div:first-child {
        opacity: 1;
        transform: translateY(0);
    }

    .glass-card > div:first-child > div:nth-child(2) {
        transform: translateY(-16px);
    }

    .glass-card > div:first-child > p {
        max-height: 46dvh;
        margin-top: 1rem !important;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        overflow: visible;
        font-size: clamp(1rem, 4.6vw, 1.18rem) !important;
        line-height: 1.5 !important;
    }

    .glass-card > div:last-child,
    .glass-card.is-active > div:last-child {
        transform: translateY(-92px);
    }

    .glass-card.is-active > div:first-child > div:nth-child(2) {
        transform: translateY(-16px);
    }

    .glass-card.is-active > div:first-child > p {
        max-height: 46dvh;
        margin-top: 1rem !important;
    }

    #cards-grid.cards-hovering .glass-card:not(.is-active) .book-title-main,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .book-title-main *,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .year-label,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .year-label *,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .ui-type,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .title-location {
        color: inherit !important;
        text-shadow: inherit !important;
    }

    #contact-section {
        max-width: none !important;
        padding: 5.75rem 1.35rem 4.5rem !important;
    }

    #contact-form-container {
        max-width: 430px;
    }

    .contact-card {
        padding: 1.4rem !important;
        gap: 1rem !important;
    }

    #contact-message {
        min-height: 6.5rem;
    }

    .page-switcher {
        position: fixed !important;
        left: 50% !important;
        top: auto !important;
        bottom: calc(1.15rem + env(safe-area-inset-bottom)) !important;
        z-index: 80;
        height: 2.75rem !important;
        width: 10.5rem !important;
        color: rgba(255,255,255,0.48) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-page-up {
        position: fixed;
        top: calc(1.15rem + env(safe-area-inset-top));
        left: 50%;
        z-index: 80;
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -12px);
        transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }

    .mobile-page-up.is-visible {
        opacity: 0.2;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .mobile-page-up.is-visible:hover {
        opacity: 0.4;
    }

    body[data-mobile-snap-page="4"] .mobile-page-up {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-page-down {
        position: fixed;
        bottom: calc(1.15rem + env(safe-area-inset-bottom));
        left: 50%;
        z-index: 80;
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 12px);
        transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }

    body[data-mobile-snap-page="1"] .mobile-page-down,
    body[data-mobile-snap-page="2"] .mobile-page-down {
        opacity: 0.2;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    body[data-mobile-snap-page="1"] .mobile-page-down:hover,
    body[data-mobile-snap-page="2"] .mobile-page-down:hover {
        opacity: 0.4;
    }

    .page-switcher.is-pinned {
        top: auto !important;
        bottom: calc(1.15rem + env(safe-area-inset-bottom)) !important;
    }

    body[data-mobile-snap-page="3"] #contact-btn,
    body[data-mobile-snap-page="4"] #contact-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body[data-mobile-snap-page="4"] #contact-btn {
        top: calc(1.15rem + env(safe-area-inset-top)) !important;
        bottom: auto !important;
    }

    .page-switcher .switcher-label {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .page-switcher .switcher-down,
    .page-switcher .switcher-up {
        opacity: 0 !important;
        transform: translateY(0) !important;
    }

    body[data-mobile-snap-page="3"] .page-switcher:hover .switcher-label {
        opacity: 0 !important;
        transform: translateY(-12px) !important;
    }

    body[data-mobile-snap-page="3"] .page-switcher:hover .switcher-down {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    body[data-mobile-snap-page="4"] .page-switcher:hover .switcher-label {
        opacity: 0 !important;
        transform: translateY(12px) !important;
    }

    body[data-mobile-snap-page="4"] .page-switcher:hover .switcher-up {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    #footer-global {
        display: flex !important;
        position: absolute;
        left: 0;
        bottom: calc(0.65rem + env(safe-area-inset-bottom));
        z-index: 79;
        width: 100%;
        padding: 0 1.35rem !important;
        opacity: 0;
        pointer-events: none;
    }

    body[data-mobile-snap-page="4"] #footer-global {
        opacity: 1 !important;
    }

    #footer-global .deefunct-mark {
        right: 1.35rem;
    }

    #intro-logo {
        will-change: transform, opacity;
        transform-origin: center center;
        transform: translate(-50%, -50%) scale(1);
    }

    #intro-logo.nav-visible {
        opacity: 1 !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.5s ease 0.3s !important;
    }

    #intro-logo.nav-hidden {
        opacity: 1 !important;
        transform: translate(-50%, calc(-50% - 45vh)) scale(0.24) !important;
        transition: transform 0s, opacity 0s !important;
    }

    #intro-logo-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #intro-subtitle {
        margin-top: 1.25rem !important;
    }

    /* 滑动期间隐藏上下三角箭头 */
    body.is-scrolling .mobile-page-up,
    body.is-scrolling .mobile-page-down {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }

    /* 移动端默认全部显示地名与发光年份 */
    .glass-card .title-location {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .glass-card .year-label {
        color: rgb(255, 255, 255) !important;
    }

    .glass-card:nth-child(1) .year-label {
        text-shadow: 0 0 20px rgba(255,255,255,0.85), 0 0 44px rgba(255,255,255,0.55), 0 0 70px rgba(255,255,255,0.35) !important;
    }

    .glass-card:nth-child(2) .year-label {
        text-shadow: 0 0 22px rgba(255,255,255,0.85), 0 0 52px rgba(255,255,255,0.55) !important;
    }

    .glass-card:nth-child(3) .year-label {
        text-shadow: 0 0 24px rgba(255,255,255,0.85), 0 0 56px rgba(255,255,255,0.55) !important;
    }
}