/* ═══════════════════════════════════════════════════════════════
   VERDIER — 홈페이지 전용 스타일
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. 히어로 섹션
   ────────────────────────────────────────────────────────────── */

.hero {
  position:   relative;
  width:      100%;
  height:     100vh;
  min-height: 700px;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  justify-content: center;
}

/* 배경 이미지 */
.hero__bg {
  position:   absolute;
  inset:      0;
  background: url('../images/hero.jpg') center center / cover no-repeat;
  transform:  scale(1.08);
  /* GSAP parallax 대상 */
}

/* 히어로 오버레이 */
.hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 6, 0.3) 0%,
    rgba(10, 8, 6, 0.1) 40%,
    rgba(10, 8, 6, 0.5) 80%,
    rgba(10, 8, 6, 0.85) 100%
  );
  z-index: 1;
}

/* 히어로 콘텐츠 */
.hero__content {
  position:   relative;
  z-index:    2;
  text-align: center;
  color:      var(--white);
}

/* 히어로 레이블 */
.hero__label {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    300;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color:          var(--brand-light);
  margin-bottom:  var(--sp-2);
  opacity:        0; /* GSAP 초기값 */
}

/* 히어로 타이틀 */
.hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(56px, 9vw, 120px);
  font-weight:    400;
  letter-spacing: var(--ls-wide);
  line-height:    1;
  color:          var(--white);
  margin-bottom:  var(--sp-2);
}

/* 타이틀 글자 — GSAP 개별 애니메이션 대상 */
.hero__title .char {
  display:        inline-block;
  opacity:        0;
  transform:      translateY(40px);
}

/* 히어로 서브타이틀 */
.hero__subtitle {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    300;
  letter-spacing: 0.25em;
  color:          rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom:  var(--sp-4);
  opacity:        0;
}

/* 히어로 별 장식 */
.hero__star {
  display:     inline-flex;
  gap:         8px;
  align-items: center;
  margin-bottom: var(--sp-3);
  opacity:     0;
}

.hero__star svg {
  color: var(--brand);
}

/* 히어로 CTA */
.hero__cta {
  display:    flex;
  gap:        var(--sp-2);
  justify-content: center;
  opacity:    0;
}

/* 히어로 스크롤 힌트 */
.hero__scroll {
  position:   absolute;
  bottom:     var(--sp-4);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    2;
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        10px;
  opacity:    0;
}

.hero__scroll span {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    300;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
}

.hero__scroll-line {
  width:      1px;
  height:     50px;
  background: linear-gradient(to bottom, rgba(194, 122, 52, 0.8), transparent);
  animation:  scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.8; }
  50%       { transform: scaleY(0.5); opacity: 0.3; }
}


/* ──────────────────────────────────────────────────────────────
   2. 철학 섹션 (수평 분할)
   ────────────────────────────────────────────────────────────── */

.philosophy {
  background: var(--dark-900);
  overflow:   hidden;
}

.philosophy-inner {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

/* 왼쪽 이미지 패널 */
.philosophy__image {
  position:   relative;
  overflow:   hidden;
}

.philosophy__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transform:  scale(1.1);
  /* GSAP parallax */
}

/* 이미지 위 황금 라인 장식 */
.philosophy__image::after {
  content:    '';
  position:   absolute;
  top:        var(--sp-5);
  right:      0;
  width:      1px;
  height:     0; /* GSAP로 height 확장 */
  background: var(--brand);
}

/* 오른쪽 텍스트 패널 */
.philosophy__text {
  padding:    var(--sp-9) var(--sp-7);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

.philosophy__quote {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 3vw, 48px);
  font-weight:    400;
  line-height:    var(--lh-snug);
  color:          var(--white);
  letter-spacing: var(--ls-tight);
  margin-bottom:  var(--sp-3);
  position:       relative;
}

/* 따옴표 장식 */
.philosophy__quote::before {
  content:     '\201C';
  position:    absolute;
  top:         -20px;
  left:        -20px;
  font-size:   80px;
  color:       rgba(194, 122, 52, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

.philosophy__body {
  font-size:   var(--text-base);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color:       rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-4);
}

/* 셰프 서명 */
.philosophy__sign {
  display:    flex;
  flex-direction: column;
  gap:        4px;
}

.philosophy__sign-name {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  color:          var(--brand-light);
}

.philosophy__sign-title {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
}


/* ──────────────────────────────────────────────────────────────
   3. 시그니처 메뉴 섹션
   ────────────────────────────────────────────────────────────── */

.signature {
  background: var(--dark-800);
  overflow:   hidden;
}

.signature-head {
  text-align:     center;
  margin-bottom:  var(--sp-6);
}

.signature-head .heading-xl {
  color: var(--white);
}

.signature-head .body-text {
  max-width: 520px;
  margin:    var(--sp-2) auto 0;
}

/* 메뉴 카드 그리드 */
.signature-grid {
  display:    grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        1px;
  background: rgba(255, 255, 255, 0.05);
}

/* 개별 메뉴 카드 */
.dish-card {
  position:   relative;
  overflow:   hidden;
  background: var(--dark-800);
  aspect-ratio: 3 / 4;
  cursor:     pointer;
}

.dish-card__image {
  position:   absolute;
  inset:      0;
}

.dish-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transform:  scale(1.05);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dish-card:hover .dish-card__image img {
  transform: scale(1.12);
}

/* 카드 오버레이 */
.dish-card__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.92) 0%,
    rgba(10, 8, 6, 0.3) 50%,
    transparent 100%
  );
  transition: background var(--t-normal);
}

.dish-card:hover .dish-card__overlay {
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.95) 0%,
    rgba(10, 8, 6, 0.6) 60%,
    rgba(10, 8, 6, 0.1) 100%
  );
}

/* 카드 콘텐츠 */
.dish-card__content {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    var(--sp-4);
}

.dish-card__category {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color:          var(--brand);
  margin-bottom:  8px;
  display:        block;
}

.dish-card__name {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  font-weight:    400;
  color:          var(--white);
  line-height:    var(--lh-snug);
  margin-bottom:  10px;
}

.dish-card__desc {
  font-size:      var(--text-xs);
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.55);
  line-height:    var(--lh-normal);
  max-height:     0;
  overflow:       hidden;
  transition:     max-height var(--t-normal), opacity var(--t-normal);
  opacity:        0;
}

.dish-card:hover .dish-card__desc {
  max-height: 80px;
  opacity:    1;
}

.dish-card__price {
  font-family:    var(--font-display);
  font-size:      var(--text-md);
  color:          var(--brand-light);
  margin-top:     var(--sp-1);
  display:        block;
  transform:      translateY(8px);
  opacity:        0;
  transition:     transform var(--t-normal), opacity var(--t-normal);
}

.dish-card:hover .dish-card__price {
  transform: translateY(0);
  opacity:   1;
}

/* 더보기 링크 */
.signature-footer {
  text-align: center;
  padding-top: var(--sp-5);
}


/* ──────────────────────────────────────────────────────────────
   4. 어워드 / 수상 섹션
   ────────────────────────────────────────────────────────────── */

.awards {
  background: var(--dark-900);
  position:   relative;
  overflow:   hidden;
}

/* 배경 골드 선 */
.awards::before {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(to right, transparent, rgba(194, 122, 52, 0.2), transparent);
  transform:  translateY(-50%);
}

.awards-inner {
  display:          flex;
  justify-content:  center;
  align-items:      stretch;
  gap:              0;
  text-align:       center;
}

.award-item {
  flex:       1;
  max-width:  260px;
  padding:    var(--sp-5) var(--sp-3);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position:   relative;
}

.award-item:last-child {
  border-right: none;
}

/* 아이콘 링 */
.award-item__icon {
  width:       64px;
  height:      64px;
  border:      1px solid rgba(194, 122, 52, 0.35);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  margin:      0 auto var(--sp-2);
  color:       var(--brand);
}

/* 숫자 카운트업 대상 */
.award-item__number {
  font-family:    var(--font-display);
  font-size:      clamp(40px, 5vw, 70px);
  font-weight:    400;
  color:          var(--white);
  line-height:    1;
  margin-bottom:  8px;
}

.award-item__number sup {
  font-size:   0.4em;
  vertical-align: super;
  color:       var(--brand-light);
}

.award-item__label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
}


/* ──────────────────────────────────────────────────────────────
   5. 셰프 섹션 (전체 너비 + 오른쪽 텍스트)
   ────────────────────────────────────────────────────────────── */

.chef-section {
  background: var(--dark-700);
  overflow:   hidden;
}

.chef-inner {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}

.chef__visual {
  position:   relative;
  overflow:   hidden;
}

.chef__visual img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
}

/* 셰프 이름 오버레이 */
.chef__visual-badge {
  position:   absolute;
  bottom:     var(--sp-4);
  left:       var(--sp-4);
  padding:    12px 20px;
  background: rgba(10, 8, 6, 0.75);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--brand);
}

.chef__visual-badge .name {
  font-family: var(--font-display);
  font-size:   var(--text-xl);
  color:       var(--white);
}

.chef__visual-badge .title {
  font-size:   var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:       var(--brand-light);
}

.chef__info {
  padding:    var(--sp-9) var(--sp-7);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

.chef__info .heading-xl {
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.chef__bio {
  font-size:   var(--text-base);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color:       rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-4);
}

/* 경력 타임라인 */
.chef__timeline {
  display:    flex;
  flex-direction: column;
  gap:        var(--sp-2);
  margin-bottom: var(--sp-5);
}

.timeline-item {
  display:    flex;
  gap:        var(--sp-2);
  align-items: baseline;
}

.timeline-item__year {
  font-family:    var(--font-display);
  font-size:      var(--text-md);
  color:          var(--brand);
  min-width:      52px;
}

.timeline-item__text {
  font-size:   var(--text-sm);
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.5);
  line-height: var(--lh-normal);
}


/* ──────────────────────────────────────────────────────────────
   6. 프라이빗 다이닝 섹션
   ────────────────────────────────────────────────────────────── */

.private-dining {
  position:   relative;
  min-height: 70vh;
  display:    flex;
  align-items: center;
  overflow:   hidden;
}

.private-dining__bg {
  position:   absolute;
  inset:      0;
  background: url('../images/private.jpg') center center / cover no-repeat;
}

.private-dining__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to right,
    rgba(10, 8, 6, 0.92) 0%,
    rgba(10, 8, 6, 0.7) 50%,
    rgba(10, 8, 6, 0.2) 100%
  );
}

.private-dining__content {
  position:   relative;
  z-index:    2;
  max-width:  580px;
  padding:    var(--sp-7) 0;
}

.private-dining__content .heading-xl {
  color:        var(--white);
  margin-bottom: var(--sp-3);
}

.private-dining__content .body-text {
  margin-bottom: var(--sp-4);
}

/* 수용 인원 배지들 */
.private-badges {
  display:    flex;
  gap:        var(--sp-1);
  flex-wrap:  wrap;
  margin-bottom: var(--sp-4);
}

.private-badge {
  font-size:      var(--text-xs);
  font-weight:    300;
  letter-spacing: var(--ls-normal);
  color:          rgba(255, 255, 255, 0.6);
  border:         1px solid rgba(255, 255, 255, 0.15);
  padding:        6px 14px;
}


/* ──────────────────────────────────────────────────────────────
   7. 와인 셀러 섹션
   ────────────────────────────────────────────────────────────── */

.wine-section {
  background: var(--dark-900);
  overflow:   hidden;
}

.wine-inner {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        0;
  min-height: 60vh;
}

.wine__text {
  padding:    var(--sp-9) var(--sp-7);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

.wine__text .heading-xl {
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.wine__image {
  position:   relative;
  overflow:   hidden;
}

.wine__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* 통계 행 */
.wine-stats {
  display:    flex;
  gap:        var(--sp-4);
  margin:     var(--sp-3) 0 var(--sp-5);
}

.wine-stat__number {
  font-family: var(--font-display);
  font-size:   var(--text-4xl);
  color:       var(--white);
  line-height: 1;
}

.wine-stat__label {
  font-size:   var(--text-xs);
  font-weight: 300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:       rgba(255, 255, 255, 0.35);
}


/* ──────────────────────────────────────────────────────────────
   8. 예약 CTA 섹션
   ────────────────────────────────────────────────────────────── */

.reservation-cta {
  background:  var(--dark-700);
  text-align:  center;
  padding:     var(--sp-9) 0;
  position:    relative;
  overflow:    hidden;
}

/* 배경 장식 원 */
.reservation-cta::before,
.reservation-cta::after {
  content:       '';
  position:      absolute;
  border-radius: 50%;
  border:        1px solid rgba(194, 122, 52, 0.08);
}

.reservation-cta::before {
  width:  600px;
  height: 600px;
  left:   50%;
  top:    50%;
  transform: translate(-50%, -50%);
}

.reservation-cta::after {
  width:  900px;
  height: 900px;
  left:   50%;
  top:    50%;
  transform: translate(-50%, -50%);
}

.reservation-cta__content {
  position:   relative;
  z-index:    1;
}

.reservation-cta .heading-xl {
  color:        var(--white);
  margin-bottom: var(--sp-2);
}

.reservation-cta .body-text {
  max-width:   440px;
  margin:      0 auto var(--sp-4);
}

/* 운영 시간 */
.operating-hours {
  display:    flex;
  justify-content: center;
  gap:        var(--sp-5);
  margin-bottom: var(--sp-5);
  flex-wrap:  wrap;
}

.hours-item {
  display:    flex;
  flex-direction: column;
  gap:        4px;
}

.hours-item__label {
  font-size:      var(--text-xs);
  font-weight:    300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--brand);
}

.hours-item__time {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  color:          var(--white);
}

.hours-divider {
  width:      1px;
  background: rgba(255, 255, 255, 0.08);
  align-self: stretch;
}


/* ──────────────────────────────────────────────────────────────
   반응형 — 태블릿
   ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .philosophy-inner,
  .chef-inner,
  .wine-inner {
    grid-template-columns: 1fr;
  }

  .philosophy__image,
  .chef__visual,
  .wine__image {
    height:     60vw;
    min-height: 350px;
  }

  .philosophy__text,
  .chef__info,
  .wine__text {
    padding: var(--sp-6) var(--sp-4);
  }

  .signature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .awards-inner {
    flex-wrap: wrap;
  }

  .award-item {
    flex:     0 0 50%;
    max-width: 50%;
  }

  .private-dining__content {
    max-width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────
   반응형 — 모바일
   ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hero__cta {
    flex-direction: column;
    align-items:    center;
  }

  .signature-grid {
    grid-template-columns: 1fr;
  }

  .dish-card {
    aspect-ratio: 4 / 3;
  }

  .award-item {
    flex:     0 0 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .chef-inner {
    grid-template-columns: 1fr;
  }

  .wine-inner {
    grid-template-columns: 1fr;
  }

  .wine__image {
    height: 55vw;
  }

  .wine-stats {
    flex-wrap: wrap;
    gap:       var(--sp-3);
  }

  .operating-hours {
    flex-direction: column;
    align-items:    center;
    gap:            var(--sp-3);
  }

  .hours-divider {
    display: none;
  }

  .philosophy__quote::before {
    display: none;
  }
}