@charset "utf-8";

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.category-menu {display: flex;justify-content: center; gap: 12px;margin-bottom: 20px;/* border-bottom: 2px solid #ddd; */padding-bottom: 8px;user-select: none;}
.category-menu .category-link {display: inline-block;padding: 8px 16px;font-weight: 600;color: #555;text-decoration: none;border-radius: 4px 4px 0 0;background-color: #f5f5f5;transition: background-color 0.3s ease, color 0.3s ease;cursor: pointer;}
.category-menu .category-link:hover {background-color: #e0e0e0;color: #222;}
.category-menu .category-link.active {background-color: #007bff;color: #fff;border-bottom: 2px solid #007bff;}
#latest_post_list {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 20px;}
.post-thumb {position: relative;overflow: hidden;}
.post-thumb img {width: 100%;display: block;border-radius: 6px;}

/* 제목을 이미지 하단에 오버레이 */
.thumb-title-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.5);color: #fff;font-size: 1rem;padding: 8px 12px;text-align: center;font-weight: 600;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* 마우스 오버 시 이미지 확대 + 약간 어둡게 */
.post-thumb:hover img {transform: scale(1.05);filter: brightness(80%);}

.category-badge {position: absolute;top: 5px;left: 5px;/* background: rgba(0, 0, 0, 0.6); */color: #fff;padding: 0px 0px;font-size: 0.8rem;border-radius: 4px;display: flex;align-items: center;gap: 6px;}
.category-badge i {display: inline-block;width: 36px;height: 36px;background-size: contain;background-repeat: no-repeat;opacity: 0.7; /* 0(완전 투명) ~ 1(완전 불투명) 사이 값 */}
.post-item { width: calc(25% - 15px);box-sizing: border-box;}

/* 오버레이 텍스트나 아이콘이 있다면 부드럽게 나오도록 */
.category-badge {position: absolute;top: 5px;left: 5px; padding: 0;font-size: 0.8rem;border-radius: 4px;display: flex;align-items: center;gap: 6px;opacity: 0.9;transition: opacity 0.3s ease;}
.post-thumb:hover .category-badge {opacity: 1;}
.post-info {margin-top: 8px;text-align: center;}
.post-title {font-weight: 700;color: #333;text-decoration: none;display: block;margin-bottom: 4px;}
.post-meta {font-size: 0.85rem;color: #666;margin-top: 4px;text-align: center; }
@media (max-width: 1024px) {.post-item {width: calc(50% - 10px);}}
@media (max-width: 600px) {.post-item {width: calc(50% - 10px);}}
@media (max-width: 400px) {.post-item {width: 100%;}}

.normal-thumb {
    width: 270px;  /* 기존 썸네일 크기 */
    height: 270px;
    object-fit: cover;
    border-radius: 6px;
}

/* 유튜브 썸네일만 별도 크기와 스타일 */
.youtube-thumb {
    width: 270px;  
    height: 270px;  
    object-fit: cover; 
    border-radius: 6px;
}
.no-posts {
    text-align: center;
    padding: 40px 0;
    font-size: 17px;
    color: #888;
}