/* Small, layout-preserving mobile safety rules. */
img,
video,
iframe {
    max-width:100%;
}

img,
video {
    height:auto;
}

input,
select,
textarea,
button {
    box-sizing:border-box;
    max-width:100%;
}

.main-grid > *,
.content-grid > *,
.form-row,
.input-line {
    min-width:0;
}

.table-wrap,
.table-container {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media(max-width:800px){
    .logo-link{
        flex-shrink:0;
    }

    .logo{
        white-space:nowrap;
    }

    .header-inner{
        gap:10px;
    }

    .header-right{
        flex:1 1 auto;
        min-width:0;
    }

    .search-box{
        width:min(145px,100%);
        min-width:0;
    }

    .search-box input{
        min-width:0;
    }

    .nav-inner{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        overflow:visible;
    }

    .nav-item{
        min-width:0;
        height:46px;
        padding-left:4px;
        padding-right:4px;
        text-align:center;
        white-space:nowrap;
        gap:6px;
        font-size:12px;
    }

    .nav-icon{
        flex:0 0 auto;
        font-size:14px;
    }

    .dropdown{
        top:46px;
        max-width:calc(100vw - 20px);
    }

    .nav-item:nth-child(4n) .dropdown{
        left:auto;
        right:0;
    }

    .nav-item.mobile-open .dropdown{
        display:block;
    }

    input,
    select,
    textarea{
        font-size:16px;
    }

    .modal-content,
    [role="dialog"]{
        max-width:calc(100vw - 24px);
        max-height:calc(100vh - 24px);
        overflow:auto;
    }

    .detail-content,
    .post-content,
    .content-body{
        overflow-wrap:anywhere;
    }
}

@media(max-width:500px){
    .header-divider{
        display:none;
    }
}

@media(max-width:360px){
    .nav-item{
        gap:2px;
        font-size:10.5px;
        letter-spacing:-.4px;
    }

    .nav-icon{
        font-size:12px;
    }
}