/* ═══════════════════════════════════════════════════════════════
   VERDIER — 공통 스타일 (모든 페이지 공유)
   디자인 시스템: 레스토랑 (restaurantoneul 기반)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montaga&family=Montserrat:wght@100;200;300;400;500&family=Noto+Sans+KR:wght@300;400;500&display=swap');


/* ──────────────────────────────────────────────────────────────
   디자인 토큰 (레스토랑 디자인 시스템 상속)
   ────────────────────────────────────────────────────────────── */

:root {
  /* 브랜드 */
  --brand:        #c27a34;
  --brand-dark:   #a06228;
  --brand-light:  #d9a870;
  --brand-pale:   #f5ede3;

  /* 다크 팔레트 */
  --dark-900:     #1a1816;
  --dark-800:     #222222;
  --dark-700:     #2c2925;
  --dark-600:     #383431;
  --dark-500:     #55514d;

  /* 웜 어스 톤 */
  --warm-50:      #faf6f2;
  --warm-100:     #f5ede5;
  --warm-200:     #dac5b6;
  --warm-300:     #cec0b5;
  --warm-400:     #aa988a;
  --warm-500:     #786659;

  /* 중립 */
  --white:        #ffffff;
  --gray-50:      #f5f5f5;
  --gray-100:     #efefef;
  --gray-200:     #e0e0e0;
  --gray-400:     #cccccc;
  --gray-600:     #666666;

  /* 오버레이 */
  --overlay-dark: rgba(0, 0, 0, 0.75);
  --overlay-mid:  rgba(0, 0, 0, 0.40);

  /* 폰트 */
  --font-display: 'Montaga', serif;
  --font-sans:    'Montserrat', 'Noto Sans KR', sans-serif;

  /* 사이즈 */
  --text-xs:      13px;
  --text-sm:      14px;
  --text-base:    15px;
  --text-md:      16px;
  --text-lg:      20px;
  --text-xl:      22px;
  --text-2xl:     26px;
  --text-3xl:     34px;
  --text-4xl:     40px;
  --text-5xl:     50px;
  --text-6xl:     64px;
  --text-hero:    90px;

  /* 자간 */
  --ls-xwide:     0.35em;
  --ls-wide:      0.18em;
  --ls-normal:    0.04em;
  --ls-tight:    -0.02em;

  /* 행간 */
  --lh-tight:     1.2;
  --lh-snug:      1.4;
  --lh-normal:    1.65;
  --lh-relaxed:   1.9;

  /* 간격 */
  --sp-1:   10px;
  --sp-2:   20px;
  --sp-3:   30px;
  --sp-4:   40px;
  --sp-5:   60px;
  --sp-6:   90px;
  --sp-7:   120px;
  --sp-8:   160px;
  --sp-9:   200px;

  /* 전환 */
  --t-fast:   0.25s ease-out;
  --t-normal: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-slow:   0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-spring: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 레이아웃 */
  --max-w:        1680px;
  --container-w:  90%;
  --header-h:     100px;
  --header-h-sm:  70px;
}


/* ──────────────────────────────────────────────────────────────
   리셋 & 기본 스타일
   ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:        16px;
  scroll-behavior:  smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      300;
  color:            var(--dark-900);
  background-color: var(--dark-900);
  line-height:      var(--lh-normal);
  overflow-x:       hidden;
}

img {
  display:    block;
  max-width:  100%;
  height:     auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  border:     none;
  background: none;
  cursor:     pointer;
  font:       inherit;
}


/* ──────────────────────────────────────────────────────────────
   커스텀 스크롤바
   ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--dark-900);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-dark);
}




/* ──────────────────────────────────────────────────────────────
   레이아웃 — 컨테이너
   ────────────────────────────────────────────────────────────── */

.container {
  width:     var(--container-w);
  max-width: var(--max-w);
  margin:    0 auto;
}

.container--narrow {
  width:     min(var(--container-w), 860px);
  margin:    0 auto;
}

.container--wide {
  width:     min(98%, 1800px);
  margin:    0 auto;
}


/* ──────────────────────────────────────────────────────────────
   헤더
   ────────────────────────────────────────────────────────────── */

.site-header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          1000;
  height:           var(--header-h);
  display:          flex;
  align-items:      center;
  padding:          0 var(--sp-4);
  transition:       background var(--t-normal), height var(--t-normal), backdrop-filter var(--t-normal);
}

/* 스크롤 후 헤더 배경 */
.site-header.is-scrolled {
  background:       rgba(26, 24, 22, 0.92);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height:           var(--header-h-sm);
  border-bottom:    1px solid rgba(194, 122, 52, 0.15);
}

.header-inner {
  width:            100%;
  max-width:        var(--max-w);
  margin:           0 auto;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
}

/* 로고 */
.site-logo {
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        2px;
  text-decoration: none;
}

.site-logo__wordmark {
  font-family:     var(--font-display);
  font-size:       26px;
  letter-spacing:  var(--ls-xwide);
  color:           var(--white);
  line-height:     1;
}

.site-logo__sub {
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    300;
  letter-spacing: 0.5em;
  color:          var(--brand);
  text-transform: uppercase;
}

/* 네비게이션 */
.site-nav {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-4);
}

.site-nav__link {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--ls-wide);
  color:          rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  position:       relative;
  padding-bottom: 3px;
  transition:     color var(--t-fast);
}

.site-nav__link::after {
  content:     '';
  position:    absolute;
  bottom:      0;
  left:        0;
  width:       0;
  height:      1px;
  background:  var(--brand);
  transition:  width var(--t-normal);
}

.site-nav__link:hover {
  color: var(--white);
}

.site-nav__link:hover::after {
  width: 100%;
}

.site-nav__link.is-active {
  color: var(--brand-light);
}

/* 예약 버튼 */
.btn-reserve {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--ls-wide);
  color:          var(--dark-900);
  background:     var(--brand);
  text-transform: uppercase;
  padding:        12px 24px;
  transition:     background var(--t-fast), transform var(--t-fast);
}

.btn-reserve:hover {
  background: var(--brand-dark);
  transform:  translateY(-1px);
}

/* 모바일 햄버거 */
.header-menu-btn {
  display:        none;
  flex-direction: column;
  gap:            6px;
  padding:        8px;
  cursor:         pointer;
}

.header-menu-btn span {
  display:    block;
  width:      28px;
  height:     1px;
  background: var(--white);
  transition: transform var(--t-normal), opacity var(--t-fast);
}

.header-menu-btn.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-menu-btn.is-open span:nth-child(2) {
  opacity: 0;
}

.header-menu-btn.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 모바일 오버레이 메뉴 */
.mobile-menu {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    999;
  background: var(--dark-900);
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:        var(--sp-3);
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--t-normal);
}

.mobile-menu.is-open {
  opacity:        1;
  pointer-events: auto;
}

.mobile-menu__link {
  font-family:    var(--font-display);
  font-size:      var(--text-4xl);
  color:          var(--white);
  letter-spacing: var(--ls-wide);
  transition:     color var(--t-fast);
}

.mobile-menu__link:hover {
  color: var(--brand-light);
}

.mobile-menu__reserve {
  margin-top:  var(--sp-3);
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  letter-spacing: var(--ls-wide);
  color:       var(--brand-light);
  text-transform: uppercase;
  border:      1px solid var(--brand);
  padding:     14px 32px;
}

.mobile-menu__reserve:hover {
  background: var(--brand);
  color:      var(--dark-900);
}


/* ──────────────────────────────────────────────────────────────
   섹션 공통
   ────────────────────────────────────────────────────────────── */

.section {
  padding: var(--sp-9) 0;
}

.section--dark {
  background: var(--dark-900);
  color:      var(--white);
}

.section--light {
  background: var(--warm-50);
  color:      var(--dark-900);
}

.section--mid {
  background: var(--dark-700);
  color:      var(--white);
}


/* ──────────────────────────────────────────────────────────────
   타이포그래피 공통
   ────────────────────────────────────────────────────────────── */

/* 섹션 라벨 (작은 대문자) */
.eyebrow {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color:          var(--brand);
  margin-bottom:  var(--sp-2);
}

/* 디스플레이 헤딩 */
.heading-xl {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 5vw, var(--text-6xl));
  font-weight:    400;
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.heading-lg {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 3.5vw, var(--text-4xl));
  font-weight:    400;
  line-height:    var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.heading-md {
  font-family:    var(--font-display);
  font-size:      clamp(22px, 2.5vw, var(--text-3xl));
  font-weight:    400;
  line-height:    var(--lh-snug);
}

/* 본문 */
.body-text {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  font-weight:  300;
  line-height:  var(--lh-relaxed);
  color:        var(--warm-400);
}

.body-text--light {
  color: rgba(255, 255, 255, 0.6);
}

/* 구분선 — 황금 얇은 선 */
.divider {
  width:      60px;
  height:     1px;
  background: var(--brand);
  margin:     var(--sp-3) 0;
}

.divider--center {
  margin-left:  auto;
  margin-right: auto;
}


/* ──────────────────────────────────────────────────────────────
   버튼 공통
   ────────────────────────────────────────────────────────────── */

/* 골드 라인 버튼 */
.btn-outline-gold {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--brand-light);
  border:         1px solid var(--brand);
  padding:        14px 32px;
  position:       relative;
  overflow:       hidden;
  transition:     color var(--t-normal);
}

.btn-outline-gold::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--brand);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal);
  z-index:    -1;
}

.btn-outline-gold:hover {
  color: var(--dark-900);
}

.btn-outline-gold:hover::before {
  transform: scaleX(1);
}

/* 화살표 아이콘 버튼 내 */
.btn-arrow {
  display: inline-block;
  width:   16px;
  height:  1px;
  background: currentColor;
  position: relative;
  transition: width var(--t-normal);
}

.btn-arrow::after {
  content:    '';
  position:   absolute;
  right:      0;
  top:        -3px;
  width:      6px;
  height:     6px;
  border-right: 1px solid currentColor;
  border-top:   1px solid currentColor;
  transform:  rotate(45deg);
}

.btn-outline-gold:hover .btn-arrow {
  width: 24px;
}


/* ──────────────────────────────────────────────────────────────
   푸터
   ────────────────────────────────────────────────────────────── */

.site-footer {
  background:  var(--dark-900);
  border-top:  1px solid rgba(194, 122, 52, 0.15);
  padding:     var(--sp-7) 0 var(--sp-4);
  color:       rgba(255, 255, 255, 0.5);
}

.footer-inner {
  display:   grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap:       var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
  margin-bottom:  var(--sp-3);
}

.footer-brand .site-logo {
  align-items: flex-start;
  margin-bottom: var(--sp-2);
}

.footer-brand .site-logo__wordmark {
  font-size: 22px;
}

.footer-tagline {
  font-size:   var(--text-xs);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color:       rgba(255, 255, 255, 0.4);
  max-width:   220px;
}

.footer-col__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--brand);
  margin-bottom:  var(--sp-2);
}

.footer-col__list {
  display:    flex;
  flex-direction: column;
  gap:        10px;
}

.footer-col__list a {
  font-size:   var(--text-xs);
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.45);
  transition:  color var(--t-fast);
}

.footer-col__list a:hover {
  color: var(--brand-light);
}

.footer-contact p {
  font-size:   var(--text-xs);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color:       rgba(255, 255, 255, 0.45);
}

.footer-contact .contact-tel {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  color:          var(--white);
  margin-bottom:  6px;
  display:        block;
}

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.footer-copy {
  font-size:  11px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color:      rgba(255, 255, 255, 0.3);
}

.footer-social {
  display:    flex;
  gap:        var(--sp-2);
}

.footer-social a {
  width:      32px;
  height:     32px;
  display:    flex;
  align-items: center;
  justify-content: center;
  border:     1px solid rgba(255, 255, 255, 0.1);
  color:      rgba(255, 255, 255, 0.4);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.footer-social a:hover {
  border-color: var(--brand);
  color:        var(--brand-light);
}


/* ──────────────────────────────────────────────────────────────
   GSAP reveal 초기 상태 (JS가 없을 때도 표시)
   ────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
}

.reveal.is-ready {
  opacity: 0; /* GSAP가 제어 */
}


/* ──────────────────────────────────────────────────────────────
   반응형 — 태블릿 (1024px 이하)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --text-hero: 64px;
    --text-6xl:  52px;
    --sp-9:      140px;
    --sp-8:      120px;
  }

  .site-nav,
  .btn-reserve {
    display: none;
  }

  .header-menu-btn {
    display: flex;
    margin-right: -15px;
    margin-top: -10px;
  }

  .mobile-menu {
    display: flex;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
}


/* ──────────────────────────────────────────────────────────────
   반응형 — 모바일 (767px 이하)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --text-hero: 44px;
    --text-6xl:  38px;
    --text-4xl:  30px;
    --text-3xl:  26px;
    --sp-9:      100px;
    --sp-8:      80px;
    --sp-7:      80px;
    --sp-5:      50px;
    --header-h:  70px;
    --container-w: 92%;
  }

  .section {
    padding: 80px 0;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .footer-bottom {
    flex-direction: column;
    gap:            var(--sp-2);
    align-items:    flex-start;
  }

  .cursor,
  .cursor-ring {
    display: none;
  }
}