/* =========================================================
  hero-patches.css (FINAL)
  목적:
  - 홈 메인 Hero(슬라이더) : 텍스트 정중앙 배치
  - 서브 Hero(hero--sub)   : 텍스트는 좌하단(감성) 유지 + 항상 보이게
  - 기존 파일의 문제(중복/충돌/!important 남발/문법오류) 제거
  주의:
  - 이 파일은 "홈에서만" 로드하는 용도 (head에서 extraCss로 주입)
========================================================= */


/* =========================================================
  0) 안전장치: Hero 기준 요소는 항상 relative
  - overlay absolute 기준이 슬라이더/정적배경으로 정확히 잡히도록 고정
========================================================= */
.hero .hero-slider,
.hero .hero-static{
  position: relative;
}


/* =========================================================
  1) (옵션) 홈 Hero를 "꽉찬 배너" 느낌으로 만들고 싶다면
  - 지금 사이트에서 hero가 container 안에 있어 라운드가 보이는데
  - 홈만 더 꽉 차게 보이게 하고 싶을 때 사용
  - 원치 않으면 아래 블록 전체를 주석처리(또는 삭제)하면 됨
========================================================= */

.hero:not(.hero--sub){
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.hero:not(.hero--sub) .hero-bg{
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}



/* =========================================================
  2) ✅ 홈(메인) Hero 텍스트 = 정중앙 고정
  - 기존 patches에서 left/bottom !important로 박혀서 중앙이 안 먹던 문제 해결
  - 메인(hero)만 중앙, 서브(hero--sub)는 아래에서 따로 스타일
========================================================= */
.hero:not(.hero--sub) .hero-overlay{
  /* 중앙 배치 핵심 */
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  /* 중앙 타이포 그래피 */
  text-align: center !important;
  width: min(960px, calc(100% - 48px)) !important;
  margin: 0 !important;

  /* 레이아웃 안정 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* 클릭 방해 방지 */
  pointer-events: none;

  /* 가독성 */
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.40);
  z-index: 5;
}

/* 메인 타이틀 크기/행간: 사진마다 안정적으로 보이게 clamp 사용 */
.hero:not(.hero--sub) .hero-title{
  font-size: clamp(28px, 3.6vw, 50px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em;
}

/* 메인 eyebrow(작은 문구)도 중앙 정렬 */
.hero:not(.hero--sub) .hero-eyebrow{
  font-size: clamp(14px, 2.1vw, 20px) !important;
  opacity: .92;
}


/* =========================================================
  3) 서브 Hero(hero--sub) 텍스트 처리
  - 내부페이지는 좌하단 감성 배치 유지 (홈처럼 중앙을 원하면 아래 주석 해제)
  - "서브 히어로 문구가 안 보인다" 문제는 보통 opacity/transform 애니메이션 충돌이라
    여기서 강제로 보이게 처리
========================================================= */

/* ✅ 서브는 기본적으로 좌하단 */
.hero--sub .hero-overlay{
  left: 26px;
  bottom: 22px;
  top: auto;
  right: auto;
  transform: none;

  text-align: left;
  width: min(900px, calc(100% - 52px));

  /* 서브에서 문구 안 보이는 문제 방지 */
  opacity: 1 !important;
  z-index: 5;
  pointer-events: none;
}

/* 서브 타이틀은 너무 크지 않게 */
.hero--sub .hero-title{
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.2;
}

/* (선택) 서브도 중앙정렬로 하고 싶으면 주석 해제 */
/*
.hero--sub .hero-overlay{
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  width: min(960px, calc(100% - 48px)) !important;
  align-items: center;
}
*/


/* =========================================================
  4) 모바일 최적화
  - 중앙 문구가 화면 밖으로 밀리지 않게 폭/패딩 조정
========================================================= */
@media (max-width: 760px){
  .hero:not(.hero--sub) .hero-overlay{
    width: calc(100% - 32px) !important;
  }

  .hero--sub .hero-overlay{
    left: 18px;
    bottom: 16px;
    width: calc(100% - 36px);
  }
}


/* =========================================================
  5) (선택) 텍스트 가독성용 그라데이션 오버레이
  - 사진이 밝을 때 글자가 날아가는 경우 대비
  - 필요 없으면 주석 처리 가능
========================================================= */
.hero .hero-slider::after,
.hero .hero-static::after{
  content:"";
  position:absolute;
  inset:0;
  /* 중앙 문구 기준으로 위/아래 어느 쪽도 무난한 그라데이션 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.10) 35%,
    rgba(0,0,0,.18) 100%
  );
  pointer-events:none;
  z-index: 1;
}

/* overlay는 그라데이션 위에 올라와야 함 */
.hero .hero-overlay{
  z-index: 5;
}
/* =====================================================
   HOME HERO – Warm Beige Theme Patch
   ===================================================== */

/* 히어로 아래 영역과 자연스럽게 연결 */
.hero + .section-block,
.hero + section {
  background: var(--bg-page);
}

/* 히어로 오버레이 톤을 브라운 웜톤으로 */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(107, 74, 45, 0.35),
    rgba(107, 74, 45, 0.55)
  );
}

/* 히어로 내부 텍스트 톤 안정화 */
.hero-title,
.hero-subtitle {
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* ===== Hero caption strip 제거 (최우선 덮어쓰기) ===== */
.hero-bg .hero-overlay{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* 혹시 overlay가 pseudo-element로 띠를 만들면 이것도 제거 */
.hero-bg .hero-overlay::before,
.hero-bg .hero-overlay::after{
  content: none !important;
}

/* title 자체도 혹시 몰라서 완전 제거 */
.hero-bg .hero-title{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-block; /* 텍스트만 영역 잡히게 */
}

/* 가독성은 텍스트 그림자로만 */
.hero-bg .hero-title{
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.25);
}
.hero-cta{
  display:flex;
  gap:10px;
  margin-top: 14px;
  pointer-events: auto; /* overlay가 pointer-events:none이라 CTA만 클릭되게 */
}
.hero-cta .btn{
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 800;
}
.hero-cta .btn.ghost{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff;
}
.hero-cta .btn.primary{
  background:#fff;
  color:#0f172a;
  border: 1px solid rgba(255,255,255,.6);
}
@media (max-width: 520px){
  .hero-cta{ flex-direction: column; width: min(320px, 100%); }
  .hero-cta .btn{ width:100%; }
}
.section-cta{
  margin-top:28px;
  text-align:center;
}