/* ============================================================
   2안 — 히어로만 교체
   · 파란 그라데이션 스크림 제거, 사진 3장 크로스페이드
   · 문안은 흰색 60% 반투명 패널 위에
   theme.css 뒤에 불러옵니다.
   ============================================================ */

.hero--b {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* dvh — iOS Sarari 주소창이 접힐 때 히어로 높이가 튀는 것을 막습니다 */
  min-height: clamp(440px, 62vh, 620px);
  min-height: clamp(440px, 62dvh, 620px);
  background: var(--paper-2);
}

/* ---------- 사진 3장 ---------- */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slides .hs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  opacity: 0; z-index: 0;
  /* 페이드 1초. 3초 간격이므로 사진이 멈춰 서는 구간은 2초입니다.
     나가는 장을 아래에 불투명하게 깔기 때문에(.is-prev) 곡선을 줄 필요가 없습니다.
     한쪽만 0→1 로 올라오는 단순한 겹침이라 linear 가 가장 고르게 보입니다. */
  transition: opacity 1s linear;
  /* 줌은 .is-on 이 아니라 전 장에 항상 겁니다. 현재 장에만 걸면 사진이 바뀌는
     순간 나가는 장의 transform 이 튕겨 돌아가 페이드 도중에 덜컥거립니다.
     infinite alternate 라 되감기는 지점이 없고, 음수 delay 로 3장의 위상을 어긋냅니다. */
  animation: heroDrift 34s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.hero-slides .hs:nth-child(2) { animation-delay: -11s; }
/* 벚꽃 컷은 가로 사진이라 초점을 조금 위로 */
.hero-slides .hs:nth-child(3) { animation-delay: -22s; object-position: 50% 46%; }
/* 두 장이 동시에 반투명해지면 겹치는 순간 뒤 바탕(--paper-2)이 25% 비쳐
   1초마다 흰 번쩍임이 생깁니다. 나가는 장은 불투명하게 깔아 두고,
   들어오는 장만 그 위에서 0→1 로 올립니다. 바탕이 드러날 틈이 없습니다. */
.hero-slides .hs.is-prev { opacity: 1; z-index: 1; transition: none; }
.hero-slides .hs.is-on   { opacity: 1; z-index: 2; }

/* 배율만 씁니다. 이동을 섞으면 object-fit:cover 가 덮는 여백을 넘어가
   사진 가장자리가 드러날 수 있습니다. */
@keyframes heroDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
/* 모션을 줄이기로 한 사용자에게는 줌만 끕니다. 배율이 계속 변하는 쪽이 문제이고,
   투명도만 오가는 크로스페이드는 남겨도 됩니다. */
@media (prefers-reduced-motion: reduce) {
  .hero-slides .hs { animation: none; }
}

/* 아래쪽만 아주 옅게 눌러 히어로를 바로 밑 네이비 식별 스트립에 앉힙니다.
   (원래는 사진 위 도트의 가독용이었는데, 도트를 없앴으니 역할은 이것만 남습니다) */
.hero--b::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,10,46,.22) 0%, rgba(0,10,46,0) 28%);
}

/* ---------- 문안 패널 ---------- */
.hero--b .hero-body {
  position: relative; z-index: 2;
  max-width: var(--w);
  /* 아래 여백은 사라진 컨트롤 줄 몫까지 흡수합니다. 위보다 조금 크게 잡아야
     시각적으로 가운데로 읽힙니다. */
  padding-block: clamp(28px, 3.6vw, 52px) clamp(40px, 5vw, 68px);
  flex: 1;
  display: flex; align-items: center;
}

.hero-card {
  max-width: 620px;
  padding: clamp(22px, 2.4vw, 36px);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  border-top: 3px solid var(--navy);
  /* 유리판의 두께 — 위쪽 안쪽에 흰 실선 한 줄, 아래쪽에 옅은 그림자 한 줄.
     blur 만으로는 패널이 사진에 인쇄된 것처럼 납작하게 보입니다. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 10, 46, .07),
    var(--sh-3);
}
/* backdrop-filter 미지원 브라우저에서는 불투명도를 올려 가독 확보 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hero-card { background: rgba(255, 255, 255, .88); }
}

/* 밝은 바탕에 맞춰 글자색 되돌리기 */
.hero--b .eyebrow {
  color: var(--navy);
  font-size: .75rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--signal);
}
/* 표제는 1안(30–60px)보다 작게 가되, 본문(16px)보다는 확실히 커야 합니다.
   이전 값 clamp(.9375rem, …) 은 모바일에서 15px 까지 내려가 본문보다 작았습니다. */
.hero--b .hero-card h1 {
  color: var(--navy);
  margin-top: 16px;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem);
  line-height: 1.28;
  letter-spacing: -.04em;
}
/* 사진 위 반투명 패널에서는 회색 보조색이 대비를 잃습니다.
   색 대신 크기·자간으로 위계를 만듭니다. */
.hero--b .hero-card h1 .sub {
  color: var(--navy); opacity: .74;
  margin-top: 10px; font-size: .75rem; letter-spacing: .16em;
}
.hero--b .hero-lead {
  color: var(--ink); margin-top: 18px;
  font-size: .9375rem; line-height: 1.88;
  max-width: 46ch;   /* 한 줄 65자를 넘기지 않도록 (한글은 자당 폭이 넓습니다) */
}
.hero--b .hero-acts { margin-top: 22px; gap: 10px; }
.hero--b .hero-acts .btn { padding: 11px 20px; font-size: .875rem; }
.hero--b .hero-acts .btn { background: var(--navy); border-color: var(--navy); color: #fff; }
.hero--b .hero-acts .btn:hover { background: #001A7A; border-color: #001A7A; color: #fff; }
.hero--b .hero-acts .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.hero--b .hero-acts .btn--ghost:hover { background: var(--navy); color: #fff; }

/* 사진 위에 얹히는 조작은 없습니다. 도트도 멈춤 버튼도 두지 않았습니다.
   대신 모션을 줄이기로 한 사용자에게는 hero-b.js 가 자동 넘김을 아예 시작하지
   않고 첫 장만 보여 줍니다(움직이는 콘텐츠를 멈출 수단에 해당). */

@media (max-width: 640px) {
  .hero--b { min-height: 0; }
  /* 아래 18px 은 컨트롤 줄이 있던 시절 값입니다. 줄이 없어졌으니 여백이 그 몫을 받습니다. */
  .hero--b .hero-body { padding-block: clamp(36px, 9vw, 64px) clamp(32px, 8vw, 48px); }
  .hero-card { max-width: none; }
}