.wrap-article{
    display: flex;
    flex-wrap: wrap;
    padding:14px 0;
}
.wrap-article > article{
    width:25%;
    box-sizing: border-box;
    padding:14px 14px 42px;
}
.wrap-article > article .post-thumbnail img{
    width:100%;
    vertical-align: middle;
    height:auto;
}
.wrap-article > article h2{
    font-size:18px;
    font-weight:600;
    margin:15px 0 10px 0;
}
.wrap-article > article div{
    margin:5px 0;
}
.wrap-article > article div p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4; /* 최대 4줄로 제한 */
    line-clamp: 4; /* 표준 속성, 일부 브라우저에서 지원 */
}
.wrap-article > article .read-more{
    font-size:12px;
    display:inline-block;
    position: relative;
    margin-top:15px;
}
.wrap-article > article .read-more::after {
    content: "";
    background: url("../img/arrow-right-black.png") no-repeat right 50%;
    background-size: 24px;
    width: 18px;
    overflow: hidden;
    display: inline-block;
    height: 15px;
    vertical-align: bottom;
    margin-left: 5px;
    opacity: 0.6;
    transition: margin-left 0.3s ease; /* 부드러운 움직임 추가 */
}

.wrap-article > article .read-more:hover::after {
    margin-left: 8px;
}
.pagination{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 30px 0 50px;
}
.pagination > *{
    display:inline-block;
    line-height:30px;
}
.pagination > .prev,
.pagination > .next{
    width:auto;
}
.pagination > .current{
    background:#333;
    color:#fff;
    font-weight:600;
    text-align: center;
    border-radius: 3px;
    width:30px;
}
.pagination a:hover{
    text-decoration: underline;
    color:#000;
}
.single-post h1{
    font-size:28px;
    margin:40px 0 20px;
}
.post-meta{
    display: flex;
    align-items: center;
}
.post-meta .post-author img{
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
    border: 3px solid #fff !important;
    box-shadow: 0px 1px 6px 0px rgb(0 0 0 / 17%);
}
.post-meta .post-date{
    margin-right:10px;
}
.post-split{
    font-size:12px;
    color:#686868;
    display:inline-block;
    padding:0 5px;
}
.post-content{
    line-height:1.6em;
    margin:50px 0;
}
.post-content p{
    margin:15px 0;
}
.wp-block-code {
    font-family: "Courier 10 Pitch", Courier, monospace;
    overflow: auto;
    max-width: 100%;
    padding:2em;
    background:#eeeeee;
}
.post-content h3{
    margin-bottom:25px;
}
.single-post .post-categories,
.single-post .post-tags{
    margin:10px 0;
}
.single-post .wp-block-separator{
    border:0;
    border-top:1px solid #cecece;
}
.wrap-article > article div.post-tags {
    margin: 10px 0 0;
}
.wrap-article > article div.post-tags a{
    line-height: 22px;
    padding: 0 12px;
    background: #ededed;
    border-radius: 11px;
    color: #222;
    font-size: 12px;
    margin: 1px;
    display: inline-block;
}
@media (max-width: 1024px) {
    .wrap-article > article{ 
        width:33.3333%;
        padding:14px 14px 42px;
    }
}
@media (max-width: 680px) {
    .wrap-article > article{
        width:50%;
        padding:14px 14px 42px;
    }
    .single-post h1 {
        font-size: 22px;
        margin: 40px 0 20px;
    }
}
@media (max-width: 440px) {
    .wrap-article{
        margin:0 -8px;
    }
    .wrap-article > article{
        padding:14px 8px 32px;
    }
    .wrap-article > article h2{
        font-size:17px;
    }
   
}