/* 배너 스타일 — 프론트 화면과 관리자 미리보기가 **같이 읽는 한 벌**이다.
*
* 값만 내려주고 모양은 각자 만들게 두면, 운영자가 미리보기에서 보고 "이대로 나가겠구나"
* 하고 공개한 것과 실제로 걸리는 배너가 달라진다. 어긋나도 아무도 모른다.
*
* 쓰는 법 — 이 파일을 걸고 아래 마크업으로 그린다.
*
*
*
*
*
*
*
*
* 값이 null 인 칸은 그 요소를 아예 안 그린다. 모양 클래스는 `template` 을 그대로 붙인다
* (`sj-banner--split` · `--overlay` · `--text` · `--image`).
*
* **글자 크기를 높이에 비례해 잡는다(cqh).** 배너는 폭이 제각각이어도 높이 대비 글자
* 크기는 비슷하다. 폭 기준으로 잡으면 1240x150 처럼 납작한 자리에서 글자가 칸 높이를
* 넘겨 잘린다.
*/
.sj-banner {
display: flex;
position: relative;
overflow: hidden;
width: 100%;
border-radius: 4px;
background: #fff;
text-decoration: none;
color: #1f2937;
/* 안쪽 글자·여백이 이 칸의 크기를 기준으로 줄고 늘어난다. */
container-type: size;
}
/* 이미지와 글이 자리를 나눠 쓴다. **글이 왼쪽, 이미지가 오른쪽**이다 — 읽는 눈이 글부터
닿는다. 차례는 order 로 바꾼다 — 마크업 차례를 바꾸면 세로로 쌓을 때 어긋난다. */
.sj-banner__img {
order: 2;
flex: 0 0 42%;
width: 100%;
height: 100%;
display: block;
}
.sj-banner__text {
order: 1;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2cqh;
padding: 8cqh 6%;
overflow: hidden;
}
/* 제목은 무슨 일이 있어도 보여야 한다. 길면 화면이 --t 를 낮춰 글씨를 줄이고, 그래도
한 줄에 안 들어가면 둘째 줄로 넘어간다. --t 를 안 주면 1로 본다. */
.sj-banner__title {
font-weight: 700;
font-size: clamp(7px, calc(15cqh * var(--t, 1)), 22px);
line-height: 1.22;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: keep-all;
overflow-wrap: anywhere;
}
.sj-banner__badge {
align-self: flex-start;
background: #eef2f7;
border: 1px solid #e5e7eb;
border-radius: 3px;
padding: 0 6px;
font-size: clamp(6px, 8cqh, 12px);
font-weight: 500;
white-space: nowrap;
}
.sj-banner__cap {
font-size: clamp(6px, 8cqh, 12px);
color: #9ca3af;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 이미지 위 텍스트 — 이미지를 배경으로 깔고 그 위에 글을 얹는다. 글이 이미지에 묻히지
않게 어두운 겹을 깐다 — 소재가 밝든 어둡든 글씨가 읽혀야 한다. */
.sj-banner--overlay { display: block; }
.sj-banner--overlay .sj-banner__img { position: absolute; inset: 0; flex: none; }
.sj-banner--overlay .sj-banner__text {
position: relative;
height: 100%;
background: linear-gradient(90deg, rgba(9, 16, 30, .78), rgba(9, 16, 30, .15));
}
.sj-banner--overlay .sj-banner__title { color: #fff; }
.sj-banner--overlay .sj-banner__badge {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .35);
color: #fff;
}
.sj-banner--overlay .sj-banner__cap { color: #c7d2e0; }
/* 텍스트만 — 소재가 올라와 있어도 그리지 않는다. */
.sj-banner--text .sj-banner__img { display: none; }
/* 통이미지 — 광고주가 만들어 온 완성된 소재를 그대로 건다. 글자를 그리지 않고, 자르지도
않는다(응답의 fit 이 contain 으로 온다) — 자르면 소재 안에 든 글자가 같이 잘린다. */
.sj-banner--image .sj-banner__text { display: none; }
.sj-banner--image .sj-banner__img { flex: 1; }
/* 세로로 긴 자리는 위아래로 쌓는다. 이때도 글이 먼저다 — 좌우로 놓을 때와 같은 차례라
읽는 눈이 글부터 닿는다. 플로팅만 예외로 이미지가 위다(떠 있는 작은 덩어리라 그림이
먼저 눈에 걸려야 눌린다). */
.sj-banner--tall { flex-direction: column; }
.sj-banner--tall .sj-banner__img { flex: 0 0 55%; }
.sj-banner--tall.sj-banner--float .sj-banner__img { order: 0; }