BEFORE → AFTER
핵심 변경
- 1무거운 딥그린 히어로를 없애고 매거진 톤(PRESS 이빨간 + 골드 룰 + 중앙 탭)으로. 기존 event.html 매거진과 같은 결로 통일.
- 2KBS 협찬 피처드 — 공식 포스터 왼쪽 고정(온전, 여백 0) + 오른쪽 텍스트 + 하단 시네마 필름 스트립(촬영 현장 20장, 좌우 화살표·페이드).
- 3사진 없는 언론 카드는 타이포 썸네일(딥그린 배경 + 큰 따옴표 + 매체명)로 — 사진 카드와 격자 높이를 맞춰 나란히.
- 4협찬 카피는 배우 이름을 주어로 쓰지 않고 극 중 캐릭터(김무진) 중심 + "(배우 하석진 님)" 괄호 존칭. 협찬 사실고지 취지 · 초상권 대응.
재사용 컴포넌트
🎞 시네마 필름 스트립
사진 여러 장을 균일 프레임으로 가로 스크롤. 좌우 페이드 + 화살표로 "더 있다" 신호. 촬영·행사 사진 많은 섹션 어디든 재사용.
/* 칸 크기 균일 + 카드가 콘텐츠 따라 안 늘어나게 min-width:0 필수 */ .film{position:relative;height:108px;overflow:hidden;min-width:0;} .film .track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;} .film .cell{flex:0 0 168px;height:100%;scroll-snap-align:start;} .film .cell img{width:100%;height:100%;object-fit:cover;} .film .fade-l,.film .fade-r{position:absolute;top:0;bottom:0;width:90px;pointer-events:none;} /* 부모 flex/grid 셀에도 min-width:0 — 안 그러면 track 전체폭으로 카드가 늘어남 */
❝ 타이포 썸네일 카드
사진이 없는 텍스트 콘텐츠(언론 기사 등)에. 딥그린 그라데이션 + 큰 따옴표 + 매체명으로 사진 카드와 같은 높이의 시각 블록을 만들어 격자를 맞춤.
.q-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;
background:linear-gradient(145deg,#3a5030,#2c3e2d 46%,#1c2818);}
.q-thumb .mark{font-family:Georgia,serif;font-size:70px;color:#c9a86a;}
.q-thumb .media{font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.82);}
이번에 배운 것
⚠ min-width:0 함정 (이번에 두 번 걸림)
가로 스크롤(필름·갤러리)을 grid/flex 셀 안에 넣으면, 자식 콘텐츠 전체폭(예: 168px×20 = 3360px)을 따라 부모 카드가 통째로 늘어나 화살표가 화면 밖으로 나가고 스크롤이 막힌다. 부모 셀에 min-width:0을 줘야 카드가 제 폭을 지키고 내부만 스크롤된다. img를 grid 자식으로 직접 두면 세로로 밀리는 것도 같은 원인 — div로 감싸거나 min-width:0.
🖼 세로 이미지 여백 0 — aspect-ratio 고정
세로 포스터를 옆 텍스트 높이에 맞추려 하면 위아래 여백이 생긴다. 반대로 포스터 컨테이너에 aspect-ratio(7/10)를 고정하고 텍스트를 그 높이에 맞추면, 포스터가 온전히 보이면서 여백이 0이 된다.
✍ 협찬 카피는 배우 이름 메인 금지
협찬 고지는 "제품 협조 사실"을 알리는 목적. 배우 실명을 마케팅 주어로 쓰면 취지에 안 맞고 초상권·퍼블리시티 소지. 극 중 캐릭터 중심 + 배우는 괄호 존칭이 안전하다.