/* ==========================================================================
   hero — 대형 배경 이미지 + 좌측 텍스트
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  overflow: hidden;
  background: #dfe8ee;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* 모바일에서 이미지가 텍스트를 덮지 않도록 흰 그라데이션을 깐다 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(233 240 244 / .96) 0%, rgb(233 240 244 / .72) 55%, rgb(233 240 244 / 0) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-16);
}

.hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__title {
  max-width: 18ch;
  color: var(--c-text-strong);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-1);
  line-height: 1.25;
}

.hero__desc {
  max-width: 52ch;
  color: var(--c-text-sub);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .hero { min-height: 480px; }
  .hero__title { font-size: var(--fs-4xl); }
  .hero__desc { font-size: 1.1875rem; line-height: 28px; }
}

@media (min-width: 1200px) {
  .hero { min-height: var(--hero-h); }
  .hero__inner { padding-block: var(--sp-20); }
  .hero__title { font-size: var(--fs-5xl); }
  /* 시안은 한 줄이다. 폭 제한을 풀어 줄바꿈을 막는다 */
  .hero__title { max-width: none; }
  .hero__desc { max-width: 640px; }
  .hero__bg::after {
    background: linear-gradient(90deg, rgb(233 240 244 / .92) 0%, rgb(233 240 244 / .35) 42%, rgb(233 240 244 / 0) 62%);
  }
}

/* --- 배너 링크 -------------------------------------------------------------
   맨 위 섹션은 어드민 배너로 그려진다 `[2026-09-16 확정]`.
   배너에 링크(banners.link_url)가 걸려 있으면 비주얼 자체가 링크가 된다.
   시안에 없는 요소라 버튼을 새로 만들지 않고 이미지를 감싸는 방식을 골랐다.
   포커스 링을 지우지 않는다 — 키보드로도 닿아야 한다.
   -------------------------------------------------------------------------- */
.hero__bg-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   hero--image — 글 없는 이미지 한 장 [개발 보정 2026-09-18]

   히어로 문구를 이미지 안에 담기로 하면서 (A11 에서 한 장 올린다)
   텍스트 블록이 사라졌다. 세 가지가 따라 바뀐다.

   1. 잘라 쓰지 않는다. object-fit: cover 는 넘치는 쪽을 버리는데,
      글이 그림 안에 있으면 그 글이 잘린다. 이미지 비율대로 높이를 준다
   2. min-height 를 푼다. 높이를 이미지가 정하므로 380px 을 밑에서 받치면
      세로로 짧은 이미지에서 빈 띠가 생긴다
   3. 흰 그라데이션을 걷는다. 그건 글을 읽히게 하려고 깔았던 것이고,
      글이 없는 지금은 이미지 왼쪽만 바래 보이게 만든다
   -------------------------------------------------------------------------- */

.hero--image {
  display: block;
  min-height: 0;
}

.hero--image .hero__bg { position: static; }
.hero--image .hero__bg::after { content: none; }

.hero--image .hero__bg-img {
  display: block;
  height: auto;
  object-fit: fill;
}

.hero--image .hero__bg-link { display: block; }