@media (min-width: 320px) and (max-width: 480px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* ----- 상단: 로고 + 메뉴 (화면 위에 고정) ----- */
    h1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 108px;
        margin: 0;
        padding-top: 14px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 101;
    }

    h1 a {
        font-size: 20px;
    }

    header {
        position: fixed;
        top: 52px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 28px);
        max-width: 420px;
        margin: 0;
        z-index: 102;
    }

    nav ul {
        width: 100%;
        height: 44px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    nav li {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .flip-vert-inner {
        width: 100%;
        height: 2em;
    }

    .flip-vert-front,
    .flip-vert-back {
        font-size: 12px;
        letter-spacing: 0.01em;
    }

    #up_btn {
        right: 20px;
        bottom: 24px;
    }

    /* ----- 제목 + 연락처 ----- */
    #banner {
        margin-top: 140px;
        padding: 0 16px;
    }

    #banner h2 {
        margin-top: 0;
        font-size: 44px;
        text-align: center;
    }

    /* 연락처는 사진 오른쪽, 빨간 띠 위 하얀 부분에 */
    #p-txt ul {
        display: block;
        width: auto;
        margin: 28px 16px 0 calc(var(--photo-w-m, 135px) + 28px);
        font-size: 15px;
        line-height: 2;
    }

    #p-txt ul li {
        margin: 0;
    }

    /* ----- 빨간 띠 + 앉아 있는 사진 ----- */
    #red-bg {
        margin-top: 70px;
        padding-bottom: 64px;
    }

    .contact-inner {
        --photo-w: 135px;
        --seat: 60%;
        padding: 24px 16px 0;
        min-height: 0;
    }

    #m-img,
    #connect-size #m-img {
        left: 16px;
    }

    /* 빨간 띠 위: 소개글은 다리 오른쪽, 폼은 그 아래 전체 폭 */
    #email-size {
        display: block;
        margin: 0;
        font-size: 13px;
    }

    #left-text {
        margin: 0 0 0 calc(var(--photo-w) + 12px);
        min-height: calc(var(--photo-w) * 1.0);
        font-size: 12px;
        line-height: 1.7;
    }

    #download-btn {
        width: 100%;
        margin-top: 12px;
        padding: 8px;
        font-size: 12px;
    }

    #contact-form {
        display: flex;
        width: 100%;
        margin: 32px 0 0;
    }

    #contact-form ul {
        flex-direction: column;
        gap: 14px;
    }

    #contact-form ul li {
        flex: 1 1 auto;
    }

    #contact-form h3 {
        font-size: 13px;
        margin-bottom: 6px;
    }

    #contact-form input,
    #contact-form textarea {
        font-size: 16px;   /* 아이폰에서 입력할 때 화면이 확대되지 않게 */
    }

    #contact-form button {
        margin-top: 20px;
        padding: 12px;
        background-color: #f4d7d7;
        color: #d94a4a;
        border: none;
        font-size: 14px;
    }
}