@import url(
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Pretendard&display=swap'
);


*{

    box-sizing:border-box;

}



body{

    margin:0;

    background:#0b0b10;

    color:#eeeeee;

    font-family:
        Pretendard,
        Inter,
        Arial,
        sans-serif;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:30px 0;

}



header{

    text-align:center;

    margin-bottom:30px;

}



h1{

    font-size:42px;

    font-weight:700;

}



.description{

    color:#aaa;

    font-size:18px;

}





button{

    background:#8b5cf6;

    color:white;

    border:none;

    padding:10px 20px;

    border-radius:8px;

    cursor:pointer;

}



button:hover{

    opacity:.8;

}



.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}



.gallery-item{

    background:#191925;

    border-radius:18px;

    overflow:visible;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}



.gallery-item:hover{

    transform:translateY(-5px);

}



.gallery-item img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}



.gallery-item p{

    margin:0;

    padding:12px;

    text-align:left;

    overflow:visible;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#ddd;

    font-size:14px;

}
/* =========================
   Gallery Delete Button
========================= */


/* =========================
   Gallery Delete Button
========================= */

.image-delete-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    gap:5px;
    white-space:nowrap;

    margin-top:6px;
    padding:5px 12px;

    border:none;
    border-radius:12px;

    background:#2b1b22;
    color:#ff8fa3;

    font-size:12px;

    cursor:pointer;
    transition:0.2s;

}


.image-delete-btn img{

    width:16px;
    height:16px;
    object-fit:contain;
    flex-shrink:0;

}


.image-delete-btn:hover{

    background:#ff4d6d;

    color:white;

}



#searchBox{
    width:100%;
    display:flex;
    justify-content:center;
    margin:20px 0;
}


#searchBox form{
    display:flex;
    gap:8px;
}


#searchBox input{
    width:320px;
    padding:12px 16px;
    border-radius:20px;
    border:1px solid #333;
    background:#111;
    color:white;
}


#searchBox button{
    padding:12px 18px;
    border-radius:20px;
    cursor:pointer;
}

@media(max-width:600px){

    #searchBox input{
        width:200px;
    }

}



/* search mobile fix */

#searchBox{
    max-width:100%;
    overflow:visible;
}


#searchBox form{
    max-width:100%;
}


#searchBox input{
    box-sizing:border-box;
    max-width:70vw;
}


@media(max-width:600px){

    #searchBox input{
        width:60vw;
    }

    #searchBox button{
        white-space:nowrap;
    }

    .gallery-grid{
        width:100%;
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-item img{
        max-width:100%;
        height:auto;
    }

}



/* =========================
   Responsive Gallery
========================= */

@media (max-width:1024px){

    .gallery-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media (max-width:768px){

    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* =====================================================
   Images Page Grid
===================================================== */

.images-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:20px;
    width:100%;
}

.images-grid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

@media (max-width:1024px){

    .images-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;
    }

}

@media (max-width:768px){

    .images-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

}

/* 모바일 */

@media(max-width:768px){

    .gallery-item{

        border-radius:16px;

    }


    .gallery-info{

        padding:12px;

    }


    .gallery-title{

        font-size:14px;

    }


    .gallery-meta{

        font-size:12px;

    }

}



/* Search Result Layout Fix */

/* =====================
   

/* =====================
   NSFW Switch
===================== */

.nsfw-switch{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:12px;
    white-space:nowrap;
}


.switch{
    position:relative;
    width:48px;
    height:26px;
    display:inline-block;
}


.switch input{
    opacity:0;
    width:0;
    height:0;
    position:absolute;
}


.slider{
    position:absolute;
    inset:0;

    background:#555;
    border-radius:30px;

    cursor:pointer;
    transition:.25s;
}


.slider:before{
    content:"";

    position:absolute;

    width:22px;
    height:22px;

    left:2px;
    top:2px;

    background:white;
    border-radius:50%;

    transition:.25s;
}


.switch input:checked + .slider{
    background:#b14cff;
}


.switch input:checked + .slider:before{
    transform:translateX(22px);
}



/* =========================
   Gallery Pagination UI
========================= */

/* =========================
   Pagination Center Fix
========================= */

#pagination{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin:30px 0 40px;

}


#pagination button{

    min-width:36px;

    height:34px;

    padding:0 12px;

    border-radius:6px;

    border:1px solid rgba(255,255,255,0.18);

    background:rgba(255,255,255,0.07);

    color:#ddd;

    font-size:13px;

    cursor:pointer;

    transition:.2s;

}


#pagination button:hover{

    background:rgba(255,255,255,0.16);

}


#pagination button.active{

    background:rgba(255,255,255,0.22);

    color:white;

    border-color:rgba(255,255,255,0.35);

}




/* =========================
   Mobile Header NSFW Fix
========================= */

@media(max-width:600px){

    #searchBox{

        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;

    }


    #searchBox form{

        width:100%;
        display:flex;
        justify-content:center;

    }


    #searchBox input{

        width:90vw;
        max-width:360px;

    }


    .nsfw-switch{

        width:auto;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:8px;

    }


    header{

        overflow:visible;

    }

}



/* missing tag category colors */

.category-appearance {
    background:#1e3a8a;
    color:#93c5fd;
}


.category-expression {
    background:#6b214f;
    color:#f9a8d4;
}


.category-object {
    background:#5c3b1e;
    color:#ffd08a;
}


.category-accessory {
    background:#115e59;
    color:#99f6e4;
}


.category-background {
    background:#374151;
    color:#d1d5db;
}



/* 번역 노드 리사이즈 핸들 */

.saved-translation{

    position:absolute;

    overflow:visible;

    cursor:move;

}


.icon-meta{
    display:flex;
    align-items:center;
    gap:4px;
}

.icon-meta img{
    width:16px;
    height:16px;
    object-fit:contain;
}


/* Gallery Card Meta Fix */

.gallery-info{

    padding:12px;
    color:#ddd;

}


.gallery-title{

    color:#fff;
    font-size:14px;
    font-weight:500;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}


.gallery-meta{

    display:flex;
    align-items:center;
    gap:10px;

    margin-top:8px;

    color:#bbb;
    font-size:13px;

}


.gallery-meta span{

    display:flex;
    align-items:center;
    gap:4px;

}


.gallery-meta img{

    width:15px;
    height:15px;

    object-fit:contain;

}


.icon-meta{

    color:#ddd;

}



.nav-icon{
    width:20px;
    height:20px;
    vertical-align:middle;
    object-fit:contain;
}



/* Navbar Icon Size Fix */

.nav-icon{

    width:18px;
    height:18px;

    display:inline-block;

    object-fit:contain;

    vertical-align:middle;

}


.nsfw-switch .nav-icon{

    width:18px;
    height:18px;

}


.user-menu .nav-icon{

    width:18px;
    height:18px;

}



.nsfw-switch .nav-icon{

    width:20px;
    height:20px;

}



/* Mobile Navbar Icon Fix */

@media(max-width:768px){

    .nav-icon{

        width:16px;
        height:16px;

    }


    .nsfw-switch .nav-icon{

        width:16px;
        height:16px;

    }

}



h2 
.image-delete-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    min-width:80px !important;
    white-space:nowrap !important;
}

.image-delete-btn img{
    display:block !important;
    width:16px !important;
    height:16px !important;
    margin-right:4px !important;
}


.image-delete-btn{
    width:90px !important;
    min-width:90px !important;
}


.image-delete-btn{
    width:max-content !important;
    min-width:90px !important;
    max-width:none !important;

    display:inline-flex !important;
    flex:0 0 auto !important;

    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    white-space:nowrap !important;
}



/* delete icon button fix */
button.image-delete-btn{

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    width:auto !important;
    min-width:90px !important;

    white-space:nowrap !important;

}


button.image-delete-btn img{

    display:inline-block !important;

    width:16px !important;
    height:16px !important;

    object-fit:contain !important;

}