/* =========================
   HERO (고정폭/고정비 + 중앙정렬 + 좌우 크롭 + 오버플로 방지)
   ========================= */

:root{
  /* 파일 경로만 니 이미지로 바꾸면 끝 */
  --hero-image: url("/static/images/hero_pre_wedding2.webp");

  /* 좌우/상하 포커스 (중앙=50%) */
  --hero-focus-x: 50%;
  --hero-focus-y: 24%;

  /* 데스크탑 고정 폭/비율 */
  --pc-width: 520px;           /* 데스크탑 가로 고정 */
  --ratio-w: 3;                /* 가로 비(3:5) */
  --ratio-h: 5;                /* 세로 비(3:5) */

  /* 모바일 고정 폭(필요하면 수치만 바꿔) */
  --mo-width: 360px;

  /* 스타일 */
  --hero-radius: 12px;
  --hero-shadow: 0 18px 50px rgba(0,0,0,.16);
  --hero-overlay: rgba(0,0,0,.38);
}

/* 가로 스크롤 절대 안 나가게(혹시 모를 상위 영향 차단) */
html, body { overflow-x: hidden; }

/* === 핵심: 고정 섹션 === */
.hero-section.hero--fixed{
  /* ▶ 가로 고정: 데스크탑은 520px, 단 화면이 더 좁으면 자동으로 줄어듦(넘침 방지) */
  width: min(var(--pc-width), calc(100vw - 32px));
  /* ▶ 비율 고정(3:5). width에 맞춰 height가 자동 계산됨 */
  aspect-ratio: var(--ratio-w) / var(--ratio-h);

  margin: 24px auto 32px;
  position: relative;
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  overflow: hidden;

  /* 좌우 크롭 + 중앙정렬 */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-focus-x) var(--hero-focus-y);
  background-repeat: no-repeat;
}

/* 어두운 오버레이 */
.hero-section.hero--fixed .hero-overlay{
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

/* 가운데 텍스트 */
.hero-section.hero--fixed .hero-inner{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 48px 24px;
  text-align: center;
  color: #fff;
}

/* 타이틀/서브 텍스트 */
.hero-title{
  font-family: 'OneStoreMobilePop', sans-serif !important;
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.18;
  margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.hero-names{
  font-family: 'Paperozi', sans-serif !important;
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.22;
  margin: 0 0 8px;
}
.hero-sub{
  font-family: 'Paperozi', sans-serif !important;
  font-size: clamp(13px, 2.4vw, 16px);
  line-height: 1.4;
  margin: 0 0 8px;
  opacity: .95;
}
.hero-names .heart{ display:inline-block; animation:heart-beat 1.6s ease-in-out infinite; }
@keyframes heart-beat{
  0%,100%{ transform:scale(1); }
  40%{ transform:scale(1.14); }
  60%{ transform:scale(1.06); }
}

/* === 모바일: 웹/모바일 두 가지 사이즈만 쓰고 싶다 => 모바일에서만 폭 교체 === */
@media (max-width: 768px){
  .hero-section.hero--fixed{
    width: min(var(--mo-width), calc(100vw - 24px));
    /* aspect-ratio 유지라 세로는 자동으로 따라옴 */
  }
}

/* 안전장치: 히어로 내부에 이미지 태그를 쓰더라도 찌그러짐 방지 */
.hero-section.hero--fixed img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus-x) var(--hero-focus-y);
  display: block;
}

.hero-section.hero--fixed { width: 100%; max-width: 100%; margin: 0 auto; }