/* ════════════════════════════════════════════════════════════
   BEAN 풀스크린 히어로 — 가독성 · 정렬 · 테마 대응
   bean.tailwind.css(컴파일 산출물) 다음에 로드되어 우선 적용된다.
   산출물을 직접 수정하지 않기 위해 분리한 오버라이드 레이어.
   ════════════════════════════════════════════════════════════ */

/* 콘텐츠 수직 중앙 정렬.
   비디오 히어로는 inner 가 .bean_hero 직계라 align-items 로 해결되지만,
   이미지 히어로는 inner 가 절대배치된 .bean_hero-slide 안에 있어
   슬라이드 자체를 수직 중앙 컨테이너로 만들어야 한다. */
.bean_hero { align-items: center; }
.bean_hero-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 스크림(베일) — 텍스트가 놓인 쪽만 어둡게, 반대쪽 이미지는 그대로 노출.
   좌/우/가운데 정렬 옵션에 맞춰 어두워지는 방향이 바뀐다.
   (좌측 정렬이 기본) */
.bean_hero-veil {
  background:
    linear-gradient(to right,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.44) 34%,
      rgba(0,0,0,.12) 64%, rgba(0,0,0,.03) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 18%);
}
.bean_hero-al-right .bean_hero-veil {
  background:
    linear-gradient(to left,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.44) 34%,
      rgba(0,0,0,.12) 64%, rgba(0,0,0,.03) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 18%);
}
.bean_hero-al-center .bean_hero-veil {
  background:
    radial-gradient(125% 100% at 50% 50%,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 42%,
      rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%, rgba(0,0,0,.20) 100%);
}

/* 태그 칩 — 밝은 이미지 위에서도 또렷하게(어두운 글래스 + 테두리) */
.bean_hero-tag {
  background-color: rgba(10,12,20,.42) !important;
  border: 1px solid rgba(255,255,255,.34);
  padding: 7px 16px;
  letter-spacing: .2em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

/* 타이틀/설명 — 어떤 사진 위에서도 읽히도록 그림자 */
.bean_hero-title {
  letter-spacing: -.015em;
  text-shadow: 0 2px 22px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.45);
}
.bean_hero-desc {
  color: rgba(255,255,255,.93);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

/* 버튼 — 테마 액센트(--bean-accent) + 그림자 + 호버 리프트 */
.bean_hero-btn {
  box-shadow:
    0 14px 34px -10px color-mix(in srgb, var(--bean-accent) 62%, transparent),
    0 3px 10px rgba(0,0,0,.28);
  transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
}
.bean_hero-btn:hover { transform: translateY(-2px); }
.bean_hero-btn:active { transform: translateY(0); }