/* ════════════════════════════════════════════════════
   HERO PHOTO PATHS — 홈 4축 시네마틱 Hero
   기술(Ken Burns · transition · warm grading · local vignette · mobile safe crop)은
   codex/backup-20260821-current-work(c06bd50)에서 재사용 — 2026-09-07
   회수 범위: 홈 Hero 시각/모션만. 헤더·네비·사이드바·예약 관련 변경은 회수하지 않음.
   4축 시퀀스: 1. PARIS(센강) -> 2. ART(루브르) -> 3. BEYOND PARIS(지베르니) -> 4. WITH YOU(가이드 현장)
   운영 교체: 이 파일 + js/hero-photos-config.js(문서용)
════════════════════════════════════════════════════ */

:root {
  /* 1. PARIS — 센강 / 오르세 리버스케이프 */
  --hero-slide-1-bg: url('../images/selected/seine.jpg');
  --hero-slide-1-pos: center 58%;
  /* 2. ART — 석양의 루브르 피라미드 */
  --hero-slide-2-bg: url('../images/tours/louvre/louvre-01.webp');
  --hero-slide-2-pos: center 45%;
  /* 3. BEYOND PARIS — 지베르니 모네의 정원, 일본식 다리 */
  --hero-slide-3-bg: url('../images/selected/giverny.jpg');
  --hero-slide-3-pos: center 52%;
  /* 4. WITH YOU — 루브르 현장의 공인 가이드 (얼굴·머리 전체가 보이도록 세로 크롭을 얼굴 높이로 내림) */
  --hero-slide-4-bg: url('../images/tours/louvre/louvre-hero-guide.jpg');
  --hero-slide-4-pos: center 46%;

  /* 고급스러운 시네마틱 톤 & 무드 (따뜻한 로즈, 아이보리, 금빛 억센트 보호) */
  --hero-overlay-dark: rgba(18, 14, 13, 0.52);
  --hero-rose-accent: #C5A089;
  --hero-gold-accent: #D4AF37;
}

.slide-bg-1 {
  background-color: #12161c;
  background-image: var(--hero-slide-1-bg);
  background-position: var(--hero-slide-1-pos);
  background-size: cover;
  filter: saturate(1.1) brightness(1.05) contrast(1.02) !important;
}

.slide-bg-2 {
  background-color: #1A1412;
  background-image: var(--hero-slide-2-bg);
  background-position: var(--hero-slide-2-pos);
  background-size: cover;
  filter: saturate(1.18) brightness(1.06) contrast(1.03) !important;
}

.slide-bg-3 {
  background-color: #141712;
  background-image: var(--hero-slide-3-bg);
  background-position: var(--hero-slide-3-pos);
  background-size: cover;
  filter: saturate(1.03) brightness(1.05) contrast(1.02) !important;
}

.slide-bg-4 {
  background-color: #141110;
  background-image: var(--hero-slide-4-bg);
  background-position: var(--hero-slide-4-pos);
  background-size: cover;
  filter: saturate(1.16) brightness(1.1) contrast(1.01) !important;
}

/* 이전 콜라주용 감광 규칙을 해제해 원본의 색감과 입체감을 유지한다. */
.hero-slider--editorial .slide.active .slide-bg-1 {
  opacity: 1;
}

/* 데스크톱: 텍스트가 놓이는 왼쪽 + 세로 밴드에 국소 스크림을 둔다.
   4장 중 센강·지베르니·가이드 슬라이드는 밝은 하늘/돔이 있어 흰 글씨 대비 확보가 필요. */
.slide-vignette,
.hero-slider--editorial .slide-vignette--paris {
  background:
    linear-gradient(
      90deg,
      rgba(16, 13, 12, 0.82) 0%,
      rgba(16, 13, 12, 0.6) 26%,
      rgba(16, 13, 12, 0.3) 46%,
      rgba(16, 13, 12, 0.08) 64%,
      rgba(16, 13, 12, 0) 80%
    ),
    linear-gradient(
      0deg,
      rgba(16, 13, 12, 0.5) 0%,
      rgba(16, 13, 12, 0.14) 32%,
      rgba(16, 13, 12, 0) 58%
    );
}

/* 밝은 배경에서도 흰 글씨가 읽히도록 텍스트 자체에 그림자를 둔다. */
.hero-slider--editorial .slide-eyebrow {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}
.hero-slider--editorial .slide-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.42);
}
.hero-slider--editorial .slide-sub {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

/* 두 겹의 빛이 서로 다른 속도로 움직여 한 장의 사진에도 깊이를 만든다. */
.slide::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 74% 28%, rgba(255, 226, 178, .2), transparent 28%),
    linear-gradient(112deg, transparent 35%, rgba(255,255,255,.1) 51%, transparent 66%);
  mix-blend-mode: screen;
}

.slide.active::after {
  animation: hero-light-parallax 5.4s ease-out both;
}

/* 첫 화면은 사진 한 장씩 온전히 보여 주는 시네마틱 시퀀스로 사용한다. */
.hero-slider--editorial .hero-collage {
  display: none;
}

.hero-slider--editorial .slide-content {
  width: min(58%, 640px);
  max-width: 640px;
  padding-left: clamp(30px, 4vw, 52px);
  padding-right: 20px;
}

.hero-slider--editorial .slide-title {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.22;
  margin-bottom: 12px;
}

.hero-slider--editorial .slide-sub {
  max-width: 520px;
  margin-bottom: 22px;
}

/* 데스크톱: 고정 헤더를 피해 세로 가운데 정렬 — 노트북 높이에서도 제목이 잘리지 않게 한다. */
@media (min-width: 768px) {
  .hero-slider--editorial .slide {
    align-items: center;
    box-sizing: border-box;
    padding-top: 104px;
    padding-bottom: 56px;
  }
}

/* 노트북 등 세로가 짧은 화면: 여백·제목을 더 조인다. */
@media (min-width: 768px) and (max-height: 820px) {
  .hero-slider--editorial .slide {
    padding-top: 92px;
    padding-bottom: 40px;
  }
  .hero-slider--editorial .slide-title {
    font-size: clamp(27px, 2.9vw, 40px);
  }
  .hero-slider--editorial .slide-sub {
    margin-bottom: 16px;
    line-height: 1.55;
  }
  .hero-slider--editorial .slide-eyebrow {
    margin-bottom: 8px;
  }
}

/* 배경은 교차 페이드하되 문구는 활성 슬라이드 한 장만 표시한다. */
.slide:not(.active) .slide-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.slide.active .slide-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

/* 활성 슬라이드에만 2.5% 이내의 느린 카메라 이동을 적용한다. */
.slide {
  transition: opacity 1.15s cubic-bezier(.22,.61,.36,1);
}

.slide.active .slide-bg {
  animation-duration: 6.2s;
  animation-timing-function: cubic-bezier(.18,.7,.2,1);
  animation-fill-mode: both;
}

.slide-bg-1 { transform-origin: 50% 58%; }
.slide-bg-2 { transform-origin: 50% 60%; }
.slide-bg-3 { transform-origin: 52% 52%; }
/* slide 4: 줌 기준점을 가이드 얼굴 높이에 두어 Ken Burns 동안 얼굴이 프레임 밖으로 나가지 않게 한다. */
.slide-bg-4 { transform-origin: 50% 48%; }

.slide.active .slide-bg-1 { animation-name: hero-camera-wide; }
.slide.active .slide-bg-2 { animation-name: hero-camera-pyramid; }
.slide.active .slide-bg-3 { animation-name: hero-camera-garden; }
.slide.active .slide-bg-4 { animation-name: hero-camera-guide; }

@keyframes hero-camera-wide {
  from { transform: translate3d(-1.4%, 0.8%, 0) scale(1.02); }
  to { transform: translate3d(1.3%, -1%, 0) scale(1.09); }
}

@keyframes hero-camera-pyramid {
  from { transform: translate3d(1.5%, 1%, 0) scale(1.02); }
  to { transform: translate3d(-1.3%, -1.1%, 0) scale(1.105); }
}

@keyframes hero-camera-garden {
  from { transform: translate3d(-1.7%, 1.2%, 0) scale(1.025); }
  to { transform: translate3d(1.4%, -1.2%, 0) scale(1.095); }
}

/* slide 4 전용: 세로 이동을 최소화하고 확대폭을 줄여(1.028→1.062) 얼굴이 항상 프레임 안에 있게 한다. */
@keyframes hero-camera-guide {
  from { transform: translate3d(0.8%, 0.4%, 0) scale(1.028); }
  to { transform: translate3d(-0.8%, -0.5%, 0) scale(1.062); }
}

@keyframes hero-light-parallax {
  from { opacity: .25; transform: translate3d(-2%, 1%, 0) scale(1.02); }
  35% { opacity: .72; }
  to { opacity: .32; transform: translate3d(3%, -1.5%, 0) scale(1.07); }
}

/* ════════════════════════════════════════════════════
   DESKTOP ART DIRECTION  ≥ 1024px
   납작한 Hero + inset -8% + Ken Burns 1.09~1.105 스택을 풀어
   4:3 원본 구도를 살린다. 모바일(max-width: 900px) 규칙은 그대로 둔다.
════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    /* PARIS: 오르세 지붕선 + 하늘, 하단 석축은 조금만 */
    --hero-slide-1-pos: 40% 40%;
    /* ART: 피라미드 꼭대기 여백 + 궁전 윙 */
    --hero-slide-2-pos: 50% 40%;
    /* BEYOND: 등나무 캐노피를 우선하고 수면은 하단 힌트만 */
    --hero-slide-3-pos: 50% 34%;
    /* WITH YOU: 얼굴을 오른쪽 중단에. 30%는 돔만 커지고 얼굴이 바닥으로 내려감 */
    --hero-slide-4-pos: 66% 42%;
  }

  /* 사이드바와 함께 봐도 사진이 띠처럼 납작하지 않게 세로를 확보 */
  .page-upper-grid {
    height: clamp(600px, 73vh, 780px);
  }

  /* style.css 의 inset:-8% 를 desktop에서만 해제 — 추가 확대 금지 */
  .hero-slider--editorial .slide-bg {
    inset: 0;
  }

  .hero-slider--editorial .slide-content {
    width: min(46%, 540px);
    max-width: 540px;
  }

  .hero-slider--editorial .slide-bg-1 { transform-origin: 40% 42%; }
  .hero-slider--editorial .slide-bg-2 { transform-origin: 50% 42%; }
  .hero-slider--editorial .slide-bg-3 { transform-origin: 50% 36%; }
  .hero-slider--editorial .slide-bg-4 { transform-origin: 66% 42%; }

  .hero-slider--editorial .slide.active .slide-bg-1 { animation-name: hero-camera-wide-desktop; }
  .hero-slider--editorial .slide.active .slide-bg-2 { animation-name: hero-camera-pyramid-desktop; }
  .hero-slider--editorial .slide.active .slide-bg-3 { animation-name: hero-camera-garden-desktop; }
  .hero-slider--editorial .slide.active .slide-bg-4 { animation-name: hero-camera-guide-desktop; }
}

@keyframes hero-camera-wide-desktop {
  from { transform: translate3d(-0.35%, 0.15%, 0) scale(1.008); }
  to { transform: translate3d(0.45%, -0.2%, 0) scale(1.022); }
}

@keyframes hero-camera-pyramid-desktop {
  from { transform: translate3d(0.3%, 0.15%, 0) scale(1.008); }
  to { transform: translate3d(-0.4%, -0.2%, 0) scale(1.022); }
}

@keyframes hero-camera-garden-desktop {
  from { transform: translate3d(-0.35%, 0.15%, 0) scale(1.008); }
  to { transform: translate3d(0.4%, -0.2%, 0) scale(1.022); }
}

@keyframes hero-camera-guide-desktop {
  from { transform: translate3d(0.15%, 0.1%, 0) scale(1.006); }
  to { transform: translate3d(-0.2%, -0.1%, 0) scale(1.016); }
}

/* 세로 화면에서는 얼굴·작품·주요 피사체 중심을 조금 위로 확보한다. */
@media (max-width: 900px) {
  :root {
    --hero-slide-1-pos: 60% 55%;
    --hero-slide-2-pos: center 42%;
    --hero-slide-3-pos: 46% 40%;
  }

  .slide-bg-1 { transform-origin: 55% 55%; }
  .slide-bg-2 { transform-origin: 50% 55%; }
  .slide-bg-3 { transform-origin: 48% 45%; }

  /* slide 4: 모바일은 하단에 문구가 깔리므로, 가이드 얼굴이 문구 위 빈 영역에
     오도록 세로로만 살짝 확대(auto 155%)하고 크롭 기준을 아래로 내려
     머리 위 여백 + 얼굴 전체가 문구 위에 오게 한다. */
  .slide-bg-4 {
    background-size: auto 155%;
    background-position: 50% 70%;
    transform-origin: 50% 44%;
  }

  /* 모바일·태블릿: 문구가 놓이는 하단에 스크림을 적용한다. */
  .slide-vignette,
  .hero-slider--editorial .slide-vignette--paris {
    background: linear-gradient(
      0deg,
      rgba(16, 13, 12, 0.84) 0%,
      rgba(16, 13, 12, 0.58) 30%,
      rgba(16, 13, 12, 0.2) 52%,
      rgba(16, 13, 12, 0) 74%
    );
  }

  .slide {
    align-items: flex-end;
  }

  .slide-content,
  .hero-slider--editorial .slide-content {
    width: 100%;
    max-width: 560px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 8px;
  }

  .slide-title,
  .hero-slider--editorial .slide-title {
    font-size: clamp(25px, 6.8vw, 30px);
    line-height: 1.18;
  }

  .slide-sub,
  .hero-slider--editorial .slide-sub {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 10px;
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide.active .slide-bg {
    animation: none;
    transform: none;
  }

  .slide.active::after {
    animation: none;
  }

  .slide.active .slide-content {
    transition: none;
  }
}