@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@media (max-width: 340px) {
    .title-line {
        font-size: 2.6rem;
        letter-spacing: 4px;
    }

    .greeting-name {
        font-size: 1rem;
    }

    .subtitle {
        font-size: .85rem;
    }

    .letter-body {
        font-size: .82rem;
    }

    .page {
        padding: 30px 20px;
    }

    .load-icon {
        font-size: 2.8rem;
    }

    .load-text {
        font-size: 1.3rem;
    }
}

@media (min-width: 429px) {
    .page {
        max-width: 400px;
    }

    .title-line {
        font-size: 3.6rem;
    }

    .greeting-name {
        font-size: 1.2rem;
    }

    .letter-body {
        font-size: .92rem;
    }
}

@media (min-height: 800px) {
    .page {
        gap: 4px;
    }

    .letter-wrap {
        margin-bottom: 24px;
    }
}

@media (max-height: 640px) {
    .page {
        gap: 0;
        padding: 24px 20px;
    }

    .greeting {
        margin-bottom: 2px;
    }

    .title-line {
        font-size: 2.4rem;
    }

    .subtitle {
        margin-bottom: 8px;
        font-size: .82rem;
    }

    .divider {
        margin-bottom: 12px;
    }

    .letter-body {
        font-size: .78rem;
        line-height: 1.8;
    }

    .letter-wrap {
        margin-bottom: 12px;
        min-height: 100px;
    }

    .footer-main {
        font-size: .82rem;
    }

    .footer-note {
        font-size: .72rem;
        margin-top: 4px;
    }

    .load-icon {
        font-size: 2.5rem;
    }

    .load-text {
        font-size: 1.2rem;
    }

    .load-btn {
        margin-top: 24px;
        padding: 10px 28px;
    }
}

@media (max-height: 500px) {
    .page {
        padding: 16px 20px;
    }

    .title-line {
        font-size: 2rem;
    }

    .letter-body {
        font-size: .72rem;
        line-height: 1.6;
    }

    .letter-wrap {
        min-height: 80px;
    }

    .footer-main {
        font-size: .75rem;
    }
}