/* 학술논문 */
/*======================================================
// 학술논문 리스트
=======================================================*/
:root {
    --thesis-list-item-padding-base: clamp(3px, 0.78125vw, 5px);
    --thesis-info-box-gap: clamp(5px, 2.34375vw, 15px);
    --thesis-thumbnail-box-width: clamp(130px, 39.0625vw, 250px);
}
.thesis-container {padding-bottom: var(--mobile-content-vertical-gap-big);}
.thesis-list-wrap {
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--color-text-02);
    margin-bottom: var(--mobile-content-vertical-gap-big);

    & .no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: calc(var(--thesis-list-item-padding-base) * 4);
        font-size: var(--font-size-18);
    }

    & .thesis-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 
            calc(var(--thesis-list-item-padding-base) * 4)
        ;
        border-bottom: 1px solid var(--color-line-01);

        & .thesis-info-box {
            display: flex;
            flex-direction: column;
            gap: var(--thesis-info-box-gap);

            & h3 {
                font-size: var(--font-size-20);
                line-height: 1.5;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* 최대 2줄만 표시 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            & span {
                font-size: var(--font-size-16);
                font-weight: var(--font-weight-semi-bold);
            }
            & p {
                font-size: var(--font-size-16);
                font-weight: var(--font-weight-light);
                color: var(--color-board-06);
            }
        }

        & .thesis-thumbnail-box {
            flex-shrink: 0;
            overflow: hidden;
            width: var(--thesis-thumbnail-box-width);
            aspect-ratio: 4/3;
            border: 1px solid var(--color-line-01);
            border-radius: var(--border-radius-default);

            @media screen and (max-width: 400px) {
                & {width: 130px;}
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top;
            }
        }
    }
}


/*======================================================
// 페이지네이션
=======================================================*/
:root {
    --pagination-anchor-width: 36px;
}
.pagination {
        
    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--pagination-anchor-width);
        aspect-ratio: 1/1;
        border-radius: 50%;

        &.active {
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }
}