/* 19차: 배너는 웜 아이보리 #f9f7f2, 주변 상단은 세이지 #eff3ee */
:root { --ccaa-top-ivory: #eff3ee; --ccaa-hero-left: #f9f7f2; }
#main > section.hero {
  background-color: #eff3ee !important;
  background-image: none !important;
}
#main > .hero .hero-shell {
  background-color: #f9f7f2 !important;
  border-color: #e5e2d9;
}
/* 원본 배너 이미지 왼쪽은 투명하지 않으므로 불투명 웜 아이보리 오버레이 필요 */
#main > .hero .hero-shell::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #f9f7f2 0%,
    rgba(249,247,242,1) 19%,
    rgba(249,247,242,.94) 33%,
    rgba(249,247,242,.65) 45%,
    rgba(249,247,242,.18) 57%,
    rgba(249,247,242,0) 72%) !important;
}
#main > .hero .hero-copy,
#main > .hero .hero-badge { z-index: 2; }
#main > .hero .weather-showcase,
#main > .hero .creative-statement { background: transparent !important; }
/* 모바일은 텍스트 공간 전체를 정확한 아이보리로,
   아랫부분의 수채화 그림은 원본 색감 유지 */
@media (max-width: 820px) {
  #main > .hero .hero-shell::before { display: none !important; }
  #main > .hero .hero-copy { background: #f9f7f2 !important; }
}