/* 
 * WP 미디어 포스트 그리드 (by Ohpixel) 프론트엔드 스타일시트 
 */
.ohg-wrapper { width: 100%; margin: 40px 0; }
.ohg-grid { display: grid; gap: 40px 20px; }
@media screen and (min-width: 769px) { .ohg-grid { grid-template-columns: repeat(var(--ohg-pc-cols, 3), 1fr); } }
@media screen and (max-width: 768px) { .ohg-grid { grid-template-columns: repeat(var(--ohg-mo-cols, 1), 1fr); gap: 30px 15px; } }

.ohg-item { display: flex; flex-direction: column; }
.ohg-item.click-card { position: relative; transition: transform 0.2s ease; }
.ohg-item.click-card:hover { transform: translateY(-5px); }
.ohg-cover-link { position: absolute; inset: 0; z-index: 10; }

.ohg-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 15px; background-color: #f4f5f7; border-radius: 4px; }
.ohg-thumb img, .ohg-no-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ohg-no-thumb { display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 14px; }
.ohg-item:hover .ohg-thumb img { transform: scale(1.05); }

.ohg-badge { position: absolute; top: 10px; left: 10px; background: var(--ohg-btn-bg, #232B66); color: #fff; padding: 4px 10px; font-size: 12px; font-weight: bold; z-index: 2; border-radius: 2px; }

.ohg-info { display: flex; flex-direction: column; flex-grow: 1; }
.ohg-meta { font-size: 13px; color: #888; margin-bottom: 8px; display: flex; gap: 10px; }

.ohg-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 10px 0 !important; color: inherit; display: -webkit-box; -webkit-line-clamp: var(--ohg-title-lines, 2); -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.ohg-title a { color: inherit; text-decoration: none; position: relative; z-index: 11; }

/* 🌟 요약글 영역: 별도의 과도한 스타일을 넣지 않고 테마의 p 태그 옵션을 그대로 상속받도록 설정하며, 줄 수 제한만 제어 */
p.ohg-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: var(--ohg-excerpt-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    margin: 0 0 10px 0 !important;
}

.ohg-action { margin-top: auto; padding-top: 15px; position: relative; z-index: 11; }
.ohg-btn { display: inline-block; padding: 8px 16px; background-color: var(--ohg-btn-bg, #232B66); color: var(--ohg-btn-color, #fff) !important; text-decoration: none; font-size: 14px; border-radius: 4px; transition: opacity 0.2s; }
.ohg-btn:hover { opacity: 0.8; }

/* 🌟 완벽한 원형 페이지네이션 디자인 (선택됨: 배경+보더 / 미선택: 보더만) */
.ohg-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; }
.ohg-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--ohg-btn-size, 40px);
    height: var(--ohg-btn-size, 40px);
    border-radius: 50%;
    background-color: transparent;
    color: #444444;
    border: 1px solid #d2d6dc;
    font-size: var(--ohg-btn-font-size, 14px);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.ohg-pagination .page-numbers:hover {
    border-color: var(--ohg-btn-bg, #232B66);
    color: var(--ohg-btn-bg, #232B66);
}
.ohg-pagination .page-numbers.current {
    background-color: var(--ohg-btn-bg, #232B66);
    color: var(--ohg-btn-color, #FFFFFF);
    border-color: var(--ohg-btn-bg, #232B66);
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(35,43,102,0.2);
}

.ohg-loadmore-btn { display: inline-block; padding: 12px 30px; background-color: var(--ohg-btn-bg, #232B66); color: var(--ohg-btn-color, #fff); border: none; font-size: var(--ohg-btn-font-size, 14px); border-radius: 8px; cursor: pointer; transition: opacity 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.ohg-loadmore-btn:hover { opacity: 0.85; }