/* ================================ 0. 배너 고정 크기 (절대 필수) ================================ */ .banner-unit-wrapper { width: 180px; height: 80px; box-sizing: border-box; } /* ================================ 1. 링크 전체 채우기 ================================ */ .rb-banner-split-layout a { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid #eee; box-sizing: border-box; } /* ================================ 2. 이미지 영역 (flex 문제 해결) ================================ */ .banner-image { width: 100%; overflow: hidden; background: #f8f8f8; min-height: 0; /* 🔥 flex 기본값 무력화 */ } .banner-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ================================ 3. 이미지 + 텍스트 ================================ */ .has-image-and-text .banner-image { flex: 0 0 60px; /* 🔥 이게 핵심 */ height: 60px; } .has-image-and-text .banner-content { flex: 0 0 20px; height: 20px; border-top: 1px solid #eee; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .has-image-and-text .banner-content h3 { margin: 0; font-size: 11px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================ 4. 이미지만 ================================ */ .has-image-only .banner-image { width: 100%; height: 100%; /*object-fit: fill;*/ max-height: 85px; } .banner-image img{ width: 100%; height: 100%; object-fit: fill; max-height: 85px; } .has-image-only .banner-content { display: none; } /* ================================ 5. 텍스트만 ================================ */ .has-text-only .banner-image { display: none; } .has-text-only .banner-content { flex: 0 0 100%; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; } .has-text-only .banner-content h3 { margin: 0; font-size: 14px; font-weight: 700; }