/* =========================================================
   NOBLE NOIR · theme/19 보조 스타일 (Tailwind utility 보완)
   - 본문은 index.html 의 Tailwind utility 중심
   - 여기엔 full-bleed / grid 함정 / Swiper 보정 / 폰트 토큰 / 상태 전이만
   - 원본 톤: 전 섹션 다크(#141416) + 골드(#c6a76d) + Playfair 세리프
   ========================================================= */

:root{
  --gold:#c6a76d;          /* 원본 버튼 측정 rgb(198,167,109) */
  --gold-soft:#dcc290;
  --ink:#141416;           /* 메인 다크 배경 rgb(20,20,22) */
  --ink-2:#17171a;
  --line:rgba(255,255,255,.12);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; word-break:keep-all; }

/* 디스플레이 세리프 */
.font-display{ font-family:"Playfair Display", serif; }
.font-cormorant{ font-family:"Cormorant Garamond", serif; }

/* 골드 토큰 */
.text-gold{ color:var(--gold); }
.bg-gold{ background-color:var(--gold); }
.border-gold{ border-color:var(--gold); }

/* 트래킹 */
.tracking-luxe{ letter-spacing:.42em; }
.tracking-wide2{ letter-spacing:.16em; }

/* =========================================================
   Tailwind4 CDN grid 함정 회피 — 명시 minmax 그리드
   ========================================================= */
.grid-min{ display:grid; }
.grid-min > *{ min-width:0; }
.g-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1023px){ .g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:639px){ .g-4,.g-3,.g-2{ grid-template-columns:minmax(0,1fr); } }

/* =========================================================
   HERO 풀스크린 배경 Swiper
   - 배경 swiper 는 absolute inset-0 (in-flow 빠지면 하단 바 사라지는 함정 회피)
   - Swiper 가 슬라이드에 display:block 강제 → 명시
   ========================================================= */
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg .swiper-slide{ display:block !important; }
.hero-slide-img{
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center;
  transform:scale(1.08); transition:transform 7s ease-out;
}
.swiper-slide-active .hero-slide-img{ transform:scale(1); }

/* 일반 swiper 슬라이드 정렬 보정 */
.luxe-swiper .swiper-slide{ height:auto; display:flex !important; }

/* pagination 골드 */
.hero-pagi .swiper-pagination-bullet{ width:10px; height:10px; background:rgba(255,255,255,.4); opacity:1; transition:.3s; }
.hero-pagi .swiper-pagination-bullet-active{ background:var(--gold); width:28px; border-radius:6px; }
.review-pagi .swiper-pagination-bullet{ width:8px; height:8px; background:rgba(255,255,255,.25); opacity:1; }
.review-pagi .swiper-pagination-bullet-active{ background:var(--gold); }

/* =========================================================
   버튼 — 원본 측정값
   · 아웃라인: 투명 + 1px solid #fff, radius 0, padding 15px 40px, 15px, #fff
   · 골드: bg #c6a76d (방문 예약)
   ========================================================= */
.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:15px 40px; border:1px solid currentColor; border-radius:0;
  font-size:.9375rem; letter-spacing:.06em; line-height:1; background:transparent; cursor:pointer;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .2s ease;
}
.btn-line-light{ color:#fff; }
.btn-line-light:hover{ background:#fff; color:#141416; }
.btn-line-gold{ color:var(--gold); border-color:var(--gold); }
.btn-line-gold:hover{ background:var(--gold); color:#141416; }
.btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:15px 40px; border:1px solid var(--gold); border-radius:0;
  background:var(--gold); color:#141416; letter-spacing:.06em; line-height:1; cursor:pointer;
  transition:background-color .35s, color .35s, transform .2s;
}
.btn-gold:hover{ background:transparent; color:var(--gold); }
.btn-line:active, .btn-gold:active{ transform:translateY(1px); }

/* 골드 얇은 구분선 */
.rule-gold{ width:54px; height:1px; background:var(--gold); }

/* 멤버십 카드 hover */
.bene-card{ transition:transform .4s ease, border-color .4s ease, background-color .4s ease; }
.bene-card:hover{ transform:translateY(-8px); border-color:var(--gold); background:rgba(198,167,109,.07); }
.bene-card:hover .bene-num{ color:var(--gold); }

/* 갤러리 이미지 hover zoom */
.gal-item{ overflow:hidden; }
.gal-item img{ transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.gal-item:hover img{ transform:scale(1.08); }

/* FAQ 아코디언 */
.faq-item .faq-body{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-item.open .faq-body{ max-height:340px; }
.faq-item.open .faq-icon{ transform:rotate(45deg); color:var(--gold); }
.faq-icon{ transition:transform .35s ease, color .35s ease; }

/* 헤더 스크롤 상태 */
#siteHeader{ transition:background-color .4s ease, border-color .4s ease, height .4s ease; }
#siteHeader.scrolled{ background:rgba(15,15,17,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }

/* 모바일 드로어 */
#drawer{ transition:transform .4s cubic-bezier(.4,0,.2,1); transform:translateX(100%); }
#drawer.open{ transform:translateX(0); }
#drawerDim{ transition:opacity .4s ease; }

/* 상세 모달 */
#detailModal{ transition:opacity .35s ease; }
#detailModal .modal-card{ transition:transform .4s ease, opacity .4s ease; transform:translateY(24px); opacity:0; }
#detailModal.open .modal-card{ transform:translateY(0); opacity:1; }

/* TOP / 고정바 */
#topBtn{ transition:opacity .35s, visibility .35s, transform .35s; }
#fixedBar{ transition:transform .45s ease, opacity .45s ease; }

/* 숫자 카운터 */
.stat-num{ font-variant-numeric:tabular-nums; }

/* 진입 레이어 팝업 */
#entryPopup{ transition:opacity .32s ease; opacity:0; }
#entryPopup.open{ opacity:1; }
#entryPopup .popup-card{ transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; transform:translateY(26px) scale(.97); opacity:0; }
#entryPopup.open .popup-card{ transform:translateY(0) scale(1); opacity:1; }

/* 푸터 패밀리사이트 select — 네이티브 드롭다운 가독성(밝은 OS 목록 위 다크 텍스트) */
.family-select option{ color:#141416; background:#fff; }
.family-select option:first-child{ color:#777; }

/* 가로 overflow 안전장치 */
html, body{ max-width:100%; overflow-x:hidden; }