/* =========================
   KBOARD LATEST LIST
========================= */

#kboard-screen-latest{
    width:100%;
    position:relative;
    z-index:5;
    box-sizing:border-box;
}

.latest-list-container{
    width:100%;
    padding:10px 36px 14px;
    box-sizing:border-box;

    background:
        linear-gradient(to bottom,
        rgba(52,105,145,.86),
        rgba(38,86,125,.9));

    border-top:1px solid rgba(210,240,255,.28);
    border-bottom:1px solid rgba(20,65,95,.75);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,25,50,.35),
        0 5px 18px rgba(0,55,95,.2);
}

.latest-list-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:10px;
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.latest-list-item{
    position:relative;
    min-width:0;
}

.latest-list-item.is-hidden{
    display:none;
}

.latest-list-item a{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;

    height:32px;
    padding:0 12px;
    box-sizing:border-box;

    border-radius:8px;
    overflow:hidden;

    background:
        linear-gradient(to bottom,
        rgba(255,255,255,.12),
        rgba(255,255,255,.035));

    border:1px solid rgba(190,230,255,.3);

    color:#dcefff !important;
    text-decoration:none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 10px rgba(0,0,0,.14);

    transition:all .25s ease;
}

.latest-list-item a:before{
    content:"";
    position:absolute;
    left:-70%;
    top:0;
    width:50%;
    height:100%;
    background:linear-gradient(to right,
        transparent,
        rgba(255,255,255,.16),
        transparent);
    transform:skewX(-22deg);
    transition:.45s ease;
}

.latest-list-item a:hover{
    transform:translateY(-2px);
    border-color:rgba(235,205,120,.7);
    background:
        linear-gradient(to bottom,
        rgba(75,145,195,.62),
        rgba(24,78,120,.72));

    box-shadow:
        0 0 14px rgba(75,165,230,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.latest-list-item a:hover:before{
    left:125%;
}

/* 블릿 */
.latest-bullet{
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:#e9c66d;
    box-shadow:0 0 8px rgba(233,198,109,.8);
}

/* HIT */
.latest-hit{
    position:absolute;
    top:3px;
    left:12px;
    color:#d887ff;
    font-size:10px;
    font-weight:900;
    line-height:1;
    opacity:.9;
}

/* 제목 */
.latest-title{
    display:block;
    width:100%;
    padding-left:12px;
    box-sizing:border-box;

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

    color:#eaf7ff;
    font-size:12px;
    font-weight:900;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.latest-title img{
    max-height:13px;
    vertical-align:middle;
    margin-right:4px;
}

.kboard-thumbnail-new-notify{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:15px;
    height:15px;
    margin-right:4px;

    border-radius:50%;
    background:#ff4d4d;
    color:#fff;
    font-size:10px;
    font-weight:900;
}

/* 더보기 버튼 */
.latest-more-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    min-width:96px;
    height:30px;
    margin:12px auto 0;
    padding:0 15px;

    border-radius:30px;
    border:1px solid rgba(235,205,120,.65);

    background:
        linear-gradient(to bottom,
        rgba(255,255,255,.12),
        rgba(255,255,255,.035));

    color:#ffe7a8;
    font-size:12px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 4px 12px rgba(0,0,0,.18);

    transition:all .25s ease;
}

.latest-more-btn:hover{
    transform:translateY(-2px);
    color:#fff;
    background:
        linear-gradient(to bottom,
        rgba(75,145,195,.62),
        rgba(24,78,120,.72));
    box-shadow:0 0 14px rgba(75,165,230,.3);
}

.latest-more-btn em{
    font-style:normal;
    font-size:11px;
    animation:latestArrow 1.4s infinite;
}

@keyframes latestArrow{
    0%{ transform:translateY(0); opacity:.55; }
    50%{ transform:translateY(3px); opacity:1; }
    100%{ transform:translateY(0); opacity:.55; }
}


/* 반응형 */
@media(max-width:1200px){
    .latest-list-grid{
        grid-template-columns:repeat(4, 1fr);
    }
}

@media(max-width:768px){
    .latest-list-container{
        padding:10px 14px 14px;
    }

    .latest-list-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:8px;
    }

    .latest-list-item a{
        height:32px;
    }
}

@media(max-width:480px){
    .latest-list-grid{
        grid-template-columns:1fr;
    }
}