/* 전체 컨테이너 */
#og-preview-custom {
    display: flex; /* 플렉스 박스를 사용하여 자식 요소들을 배치 */
    justify-content: center; /* 자식 요소들을 수평 중앙 정렬 */
    padding: 7px; /* 컨테이너 안의 여백을 20px로 설정 */
}

/* 이미지와 텍스트를 감싸는 컨테이너 */
.preview-container-custom {
    background: linear-gradient(to right, #f0f0f0, #e0e0e0); /* 그라데이션 배경 색상 */
    border-radius: 12px; /* 모서리를 둥글게 처리 */
    display: flex; /* 자식 요소들을 가로로 나열하기 위해 flexbox 사용 */
    overflow: hidden; /* 컨테이너 안의 내용이 넘치지 않도록 숨김 */
    max-width: 800px; /* 최대 너비 800px로 제한 */
    width: 100%; /* 너비는 100%로 설정 (부모 요소에 맞춰 조정) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과로 부드러운 입체감 제공 */
}

/* 이미지 컨테이너 */
.og-image-custom {
    width: 150px; /* 고정된 너비 150px */
    height: 150px; /* 고정된 높이 150px */
    background-size: cover; /* 이미지가 컨테이너를 완전히 덮도록 설정 */
    background-position: center; /* 이미지를 중앙에 배치 */
    border-right: solid 1px rgba(0, 0, 0, 0.06); /* 오른쪽에 얇은 선을 추가 */
    flex-shrink: 0; /* 이미지 크기가 줄어들지 않도록 설정 */
    border-radius: 12px; /* 모서리를 둥글게 처리 */
    overflow: hidden; /* 내용이 넘치지 않도록 숨김 */
    display: flex; /* 플렉스를 사용하여 자식 요소들 배치 */
    align-items: center; /* 이미지가 세로로 중앙 정렬 */
    justify-content: center; /* 이미지가 가로로 중앙 정렬 */
}

/* 이미지 내부의 img */
.og-image-custom img {
    width: 100%; /* 이미지가 컨테이너를 꽉 채우도록 설정 */
    height: 100%; /* 이미지가 컨테이너를 꽉 채우도록 설정 */
    object-fit: cover; /* 비율을 유지하며 컨테이너를 꽉 채움 */
    object-position: center; /* 이미지를 중앙 기준으로 잘라냄 */
    display: block; /* 인라인 블록 요소로 설정하여 여백 제거 */
}

/* 텍스트 컨테이너 */
.preview-text-custom {
    padding: 15px; /* 텍스트 영역 안에 15px의 여백 추가 */
    display: flex; /* 플렉스를 사용하여 자식 요소들 배치 */
    flex-direction: column; /* 텍스트는 세로로 배치 */
    justify-content: center; /* 텍스트가 세로로 중앙 정렬 */
    flex-grow: 1; /* 남은 공간을 채우도록 설정 */
}

/* 텍스트 스타일 */
.preview-text-custom h3 {
    margin: 0; /* 기본 여백 제거 */
    color: black; /* 제목 텍스트 색상 */
    font-size: 18px; /* 제목 텍스트 크기 */
}

.preview-text-custom p {
    color: #777; /* 본문 텍스트 색상 */
    margin: 10px 0; /* 본문 위아래 여백 10px 추가 */
    font-size: 14px; /* 본문 텍스트 크기 */
}

/* URL 스타일 */
.preview-text-custom a {
    color: #007bff !important; /* 주소 텍스트 색상은 파란색 */
    text-decoration: none; /* 링크의 밑줄 제거 */
    font-size: 14px; /* 링크 텍스트 크기 */
}

.preview-text-custom a:hover {
    text-decoration: underline; /* 링크에 마우스 오버 시 밑줄 추가 */
    color: #007bff !important; /* 마우스 오버 상태에서 파란색 유지 */
}

/* 반응형 처리 */
@media (max-width: 1060px) { /* 화면 너비가 768px 이하일 때 적용 */
    .preview-container-custom {
        height: 120px; /* 컨테이너의 높이를 100px로 고정 */
    }

    .og-image-custom {
        width: 120px; /* 이미지 너비를 100px로 축소 */
        height: 120px; /* 이미지 높이를 100px로 축소 */
        margin-bottom: 10px; /* 이미지 아래에 10px 여백 추가 */
        border-right: none; /* 이미지 오른쪽 경계선 제거 */
    }

    .preview-text-custom {
        height: 100%; /* 텍스트 영역이 컨테이너 높이를 채우도록 설정 */
        justify-content: center; /* 텍스트가 세로로 중앙 정렬 */
    }

    .preview-text-custom h3 {
        font-size: 12px; /* 제목 텍스트 크기를 10px로 축소 */
    }

    .preview-text-custom p {
        font-size: 8px; /* 본문 텍스트 크기를 8px로 축소 */
    }

    .preview-text-custom a {
        font-size: 9px; /* 링크 텍스트 크기를 9px로 축소 */
        color: #007bff !important; /* 주소 색상은 여전히 파란색 */
    }
}