/* responsive.css */
/* ==============================================
   Breakpoint
============================================== */


/* ------------------------------
   1. Desktop（＞ 1024px）
------------------------------ */
@media (min-width: 1025px) {
    html {
        font-size: 1rem;
    }
    .padding-responsive {
        padding: 0 4rem;
    }
    #welcome.hidden ~ .input {
        width: calc(100% - 8rem);
    }
    #msgInput {
        font-size: 1rem;
    }
}

/* ------------------------------
   2. Pad（≤ 1024px）
------------------------------ */
@media (max-width: 1024px) {
    html {
        font-size: 1rem;
    }
    .padding-responsive {
        padding: 0 3rem;
    }
    #welcome.hidden ~ .input {
        width: calc(100% - 6rem);
    }
    #msgInput {
        font-size: 1rem;
    }
}


/* ------------------------------
   3. Mini Pad（≤ 768px）
------------------------------ */
@media (max-width: 768px) {
    html {
        font-size: 0.875rem;
    }
    .padding-responsive {
        padding: 0 2rem;
    }
    #welcome {
        align-items: center;
        height: 100%;
    }
    #welcome.hidden ~ .input {
        width: calc(100% - 4rem);
    }
    .input {
        margin-bottom: 2rem;
    }
}


/* ------------------------------
   4. Phone（≤ 480px）
------------------------------ */
@media (max-width: 480px) {
    .padding-responsive {
        padding: 0 1.5rem;
    }
    #welcome.hidden ~ .input {
        width: calc(100% - 3rem);
    }
}