/* ===========================
   AID Project Detail (Desktop)
   - default: 라인 왼→오
   - .aid-left: 라인 오→왼
=========================== */

/* Vars */
:root {
  --label-w: 8.5em; /* 라벨 고정폭 */
  --gap-x: 2.2em; /* 라벨-값 간격 */
  --hero-min: 680px; /* 히어로 최소 높이 */
}

/* ===== HERO ===== */
.detail-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: var(--hero-min);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* 이미지: <img> 또는 <picture> 모두 커버 (FIX) */
.detail-hero > picture,
.detail-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.detail-hero > picture > img,
.detail-hero > img {
  object-fit: cover;
  opacity: 0; /* ← opacity는 img에만 */
  transform: scale(1.04); /* ← transform도 img에만 */
}

/* 등장 애니메이션 */
.detail-hero.play > picture > img,
.detail-hero.play > img {
  animation: heroIn 0.9s ease forwards;
}

/* ===== 텍스트 오버레이 ===== */
.detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: end; /* 기본: 오른쪽 정렬 */
  padding: clamp(20px, 6vw, 56px);
}

.detail-panel {
  max-width: min(640px, 92vw);
  margin-right: clamp(40px, 8vw, 160px);
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.detail-title {
  margin: 0 0 clamp(14px, 1.8vw, 18px);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 5.2vw, 72px);
}

/* ===== 라인: 오른쪽 패널 (왼쪽 → 오른쪽) ===== */
.detail-line {
  position: relative;
  display: block;
  width: 300%;
  left: -200%; /* 왼쪽 화면 밖에서 시작 */
  height: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  transform-origin: left; /* 왼쪽 기준으로 그려짐 */
  transform: scaleX(0);
  opacity: 0.95;
  margin: 0 0 clamp(14px, 1.8vw, 18px);
}
.detail-line.draw {
  animation: lineDrawRight 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@keyframes lineDrawRight {
  to {
    transform: scaleX(1);
  }
}

/* ===== 라인: 왼쪽 패널 (오른쪽 → 왼쪽) ===== */
.detail-overlay.aid-left {
  justify-items: start;
}
.detail-overlay.aid-left .detail-panel {
  position: relative;
  overflow: visible;
  margin-left: clamp(40px, 8vw, 160px);
  margin-right: 0;
}

.detail-overlay.aid-left .detail-line {
  position: relative;
  display: block;
  height: 2px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);

  /* ✅ 핵심 */
  width: 200%; /* 충분히 길게 */
  transform-origin: right; /* 오른쪽 기준 */
  transform: scaleX(0);
  opacity: 0.95;

  /* 🔸시작점을 '조금 안쪽'으로 밀기 */
  right: 1vw; /* 👉 숫자를 조절하면서 맞춰 (3vw~8vw 추천) */
  left: auto;

  margin: 0 0 clamp(14px, 1.8vw, 18px);
}

.detail-overlay.aid-left .detail-line.draw {
  animation: lineDrawLeft 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}

@keyframes lineDrawLeft {
  to {
    transform: scaleX(1);
  }
}

/* ===== 스펙 리스트 ===== */
.detail-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}
.detail-info li {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: var(--gap-x);
  align-items: baseline;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.7;

  /* 순차 등장 기본 상태 */
  opacity: 0;
  transform: translateY(-18px);
  animation: aidItemDrop 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
.detail-info .label {
  justify-self: start;
  text-align: left;
  letter-spacing: 0.28em;
  opacity: 0.95;
}
.detail-info .value {
  justify-self: start;
}

/* ===== 텍스트 애니메이션 순서 (라인 → 제목 → 항목들) ===== */
.detail-title {
  opacity: 0;
  transform: translateY(24px);
  animation: aidTitleRise 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
  animation-delay: 0.9s; /* 라인(0.9s) 이후 시작 */
}
@keyframes aidTitleRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aidItemDrop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 항목별 지연 */
.detail-info li:nth-child(1) {
  animation-delay: 1.1s;
}
.detail-info li:nth-child(2) {
  animation-delay: 1.25s;
}
.detail-info li:nth-child(3) {
  animation-delay: 1.4s;
}
.detail-info li:nth-child(4) {
  animation-delay: 1.55s;
}
.detail-info li:nth-child(5) {
  animation-delay: 1.7s;
}
.detail-info li:nth-child(6) {
  animation-delay: 1.85s;
}

/* ===== 반응형 (태블릿 이하에서 좌측 정렬 유지) ===== */
@media (max-width: 991.98px) {
  .detail-overlay {
    justify-items: start;
  }
  .detail-panel {
    margin-right: clamp(20px, 5vw, 60px);
    margin-left: clamp(20px, 5vw, 60px);
  }
  .detail-info .label {
    letter-spacing: 0.18em;
  }
}

/* ===== 모션 최소화 ===== */
@media (prefers-reduced-motion: reduce) {
  .detail-hero > img,
  .detail-hero > picture,
  .detail-hero > picture > img,
  .detail-line,
  .detail-title,
  .detail-info li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ==== HERO IMAGE HOTFIX (desktop) ==== */
/* 레이아웃 고정 */
.detail-hero {
  position: relative;
}
.detail-hero picture,
.detail-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1; /* 이미지가 배경 레이어 */
}
.detail-hero picture > img,
.detail-hero > img {
  object-fit: cover;
}

/* 애니메이션 대상은 img 요소만 */
.detail-hero picture > img,
.detail-hero > img {
  opacity: 0;
  transform: scale(1.04);
}

/* play 상태에서 등장 */
.detail-hero.play picture > img,
.detail-hero.play > img {
  animation: heroIn 0.9s ease forwards;
}

/* 혹시 다른 CSS가 덮어쓰는 경우 강제 표시 */
.detail-hero.play picture > img,
.detail-hero.play > img {
  opacity: 1 !important;
}

/* 오버레이는 이미지 위 */
.detail-overlay {
  z-index: 2;
}

/* 애니메이션 키프레임(없으면 포함) */
@keyframes heroIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 기존 .detail-hero > img 규칙은 제거하거나 대체하세요 */

/* 1) picture 자체를 배경처럼 절대 배치 */
.detail-hero picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* 2) 내부 이미지가 영역을 완전히 채우도록 */
.detail-hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0; /* 애니메이션 초기값 유지하려면 */
  transform: scale(1.04);
}

/* 3) 재생 시 페이드/스케일 애니메이션 적용 대상 변경 */
.detail-hero.play picture img {
  animation: heroIn 0.9s ease forwards;
}

/* 오버레이는 사진 위에 보이도록 */
.detail-overlay {
  z-index: 2;
}