.gpcpg-wrapper {
    max-width: 1200px; /* 사이트 최대 폭에 맞게 조절 */
    margin: 0 auto;
    padding: 20px 0 40px 0;
}

.gpcpg-main-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
    padding-left: 5px;
}

/* 그리드 레이아웃 설정 (자바스크립트 없이 CSS로 화면 분할) */
.gpcpg-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC 화면에서 4칸 */
    gap: 20px;
}

.gpcpg-card {
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gpcpg-thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.gpcpg-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 콘텐츠 영역을 확장시켜 작성자를 하단으로 밀어냄 */
}

.gpcpg-category {
    font-size: 13px;
    color: #3b5998; /* 이미지와 유사한 톤다운 블루 */
    font-weight: 600;
    margin-bottom: 10px;
}

.gpcpg-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.gpcpg-title a {
    color: #111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄 넘어가면 말줄임표 처리 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 요약글 스타일 추가 */
.gpcpg-excerpt {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄 넘어가면 말줄임표 처리 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 작성자(아바타+이름) 하단 고정 영역 */
.gpcpg-author {
    margin-top: auto; /* 남은 공간을 위쪽으로 밀어서 요소를 맨 아래에 고정 */
    display: flex;
    align-items: center;
    border-top: 1px solid #f5f5f5; /* 첨부 이미지의 구분선 느낌 */
    padding-top: 15px;
}

.gpcpg-author-avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    display: block;
}

.gpcpg-author-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* 태블릿 반응형 (2칸) */
@media screen and (max-width: 1024px) {
    .gpcpg-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 모바일 반응형 (1칸) */
@media screen and (max-width: 640px) {
    .gpcpg-grid-container {
        grid-template-columns: 1fr;
    }
}