@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;}
.ctoem-menu {display: flex;justify-content: center; gap: 12px;margin-bottom: 20px;/* border-bottom: 2px solid #ddd; */padding-bottom: 8px;user-select: none;}
.ctoem-menu .ctoem-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;}
.ctoem-menu .ctoem-link:hover {background-color: #e0e0e0;color: #222;}
.ctoem-menu .ctoem-link.active {background-color: #007bff;color: #fff;border-bottom: 2px solid #007bff;}
#latest_oem_list {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 20px;}
/* .oem-thumb {width: 100%;aspect-ratio: 1 / 1;overflow: hidden;} */
/* 유튜브 영상 비율 유지 */
/* .oem-thumb {width: 100%;aspect-ratio: 16 / 9;overflow: hidden;position: relative;}
.oem-thumb img {width: 100%;height: 100%;object-fit: contain;border-radius: 6px;background-color: #000;} */
.oem-thumb {position: relative;overflow: hidden;}
.oem-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;}

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

.ctoem-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;}
.ctoem-badge i {display: inline-block;width: 36px;height: 36px;background-size: contain;background-repeat: no-repeat;opacity: 0.7; /* 0(완전 투명) ~ 1(완전 불투명) 사이 값 */}
.oem-item { width: calc(25% - 15px);box-sizing: border-box;}

/* 오버레이 텍스트나 아이콘이 있다면 부드럽게 나오도록 */
.ctoem-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;}
.oem-thumb:hover .ctoem-badge {opacity: 1;}
.oem-info {margin-top: 8px;text-align: center;}
.oem-title {font-weight: 700;color: #333;text-decoration: none;display: block;margin-bottom: 4px;}
.oem-meta {font-size: 0.85rem;color: #666;margin-top: 4px;text-align: center; }
@media (max-width: 1024px) {.oem-item {width: calc(50% - 10px);}}
@media (max-width: 600px) {.oem-item {width: calc(50% - 10px);}}
@media (max-width: 400px) {.oem-item {width: 100%;}}

.ytb-thumb,
.normal-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;   
    object-fit: cover;     
    display: block;
}
.no-posts {
    text-align: center;
    padding: 40px 0;
    font-size: 17px;
    color: #888;
}