/* =====================================================
   JJAPTOON Notice UI v3
   responsive.css
===================================================== */

/* =====================================================
   Ultra Wide (1600px+)
===================================================== */

@media (min-width:1600px){

    :root{

        --container:1400px;

    }

    .hero{

        padding:72px 80px;

    }

    .hero h1{

        font-size:56px;

    }

    #latestDomain{

        font-size:28px;

        min-width:560px;

    }

}

/* =====================================================
   Desktop
===================================================== */

@media (max-width:1200px){

    .page{

        padding:24px;

    }

}

/* =====================================================
   Laptop
===================================================== */

@media (max-width:992px){

    .hero{

        padding:42px 0;

    }

    .hero h1{

        font-size:36px;

    }

    #latestDomain{

        min-width:100%;

        font-size:20px;

    }

}

/* =====================================================
   Tablet
===================================================== */

@media (max-width:768px){

    header{

        height:auto;


    }

    .logo{

        font-size:28px;

    }

    .glass{

        padding:24px;

        border-radius:20px;

    }

    .hero{

        padding:32px 20px;

    }

    .hero h1{

        font-size:30px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons button{

        width:100%;

    }

    #latestDomain{

        min-width:100%;

        font-size:18px;

        padding:16px;

    }

    footer>div{

        flex-direction:column;

        width:100%;

    }

    footer>div a,
    footer>div button{

        width:100%;

    }

}

/* =====================================================
   Mobile
===================================================== */

@media (max-width:576px){

    .page{

        padding:18px;

    }

    .logo{

        font-size:24px;

        letter-spacing:1px;

    }

    .hero{

        padding:24px 16px;

    }

    .hero h1{

        font-size:26px;

        line-height:1.3;

    }

    .glass{

        padding:20px;

    }

    .glass h2{

        font-size:22px;

    }

    #latestDomain{

        font-size:16px;

        line-height:1.6;

    }

    .notice-card {
        padding: 14px 16px;
    }

    .notice-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .history-card {
        padding: 14px 16px;
    }

    .loader-logo{

        font-size:32px;

    }

    .loader-bar{

        width:220px;

    }

    #toast{

        width:calc(100% - 32px);

        text-align:center;

    }

}

/* =====================================================
   Small Mobile
===================================================== */

@media (max-width:360px){

    .hero h1{

        font-size:22px;

    }

    .hero-buttons button{

        min-width:100%;

        height:50px;

    }

    #latestDomain{

        font-size:15px;

        padding:14px;

    }

}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}