:root{
  /* GUCCI/BERLUTI 톤: 웜 오프화이트 + 블랙 + 헤어라인 */
  --bg: #f6f3ee;
  --ink: #111;
  --muted: #5b5b5b;
  --hair: rgba(0,0,0,.14);

  --max: 1180px;
  --pad: 28px;
  --radius: 0px;

  /* ✅ Pretendard 통일 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
}

/* 3문단 카피 스타일 */
.copy-lines{
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}

.copy-lines p{
  margin: 0;
  line-height: 1.9;
  letter-spacing: -0.01em;
}

/* 앵커 이동 시 sticky 헤더에 가려지지 않게 */
section{ scroll-margin-top: 86px; }

img, video{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

a{ color: inherit; }

.hairline{ height:1px; background: var(--hair); width:100%; }

/* ===== HEADER ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246,243,238,.92);
  backdrop-filter: blur(10px);
}

/* ✅ nav-inner만 중앙정렬 */
.nav-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 좌/우 요소는 숨김(HTML에 남아있어도 영향 X) */
.nav-left,
.nav-right{
  display:none !important;
}

/* 로고 */
.nav-logo{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
}

/* 로고 이미지 */
.logo-img{
  height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* fallback 텍스트 */
.logo-text--fallback{
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 16px;
}

/* ===== DRAWER ===== */
.drawer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

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

.drawer-inner{
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--hair);
  transform: translateX(10px);
  transition: transform .18s ease;
  padding: 18px 18px 24px;
  display:flex;
  flex-direction: column;
}

.drawer.is-open .drawer-inner{
  transform: translateX(0);
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-bottom: 12px;
}

.drawer-title{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 600;
}

.drawer-nav{
  display:flex;
  flex-direction: column;
  padding: 10px 0 18px;
  gap: 12px;
}

.drawer-link{
  text-decoration:none;
  font-size: 22px;
  letter-spacing: -0.01em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
}

.drawer-foot{
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 14px;
}
.drawer-note{
  color: var(--muted);
  font-size: 13px;
}

/* ===== HERO ===== */
.hero{
  padding: 56px 0 8px;
}

.hero-head{
  text-align:center;
  padding: 0 var(--pad) 26px;
  max-width: var(--max);
  margin: 0 auto;
}

.pill{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.25);
  margin-bottom: 14px;
}

.hero-title{
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero-sub{
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
  max-width: 56ch;
  margin: 16px auto 0;
  text-align: center;
}

.hero-media{
  position: relative;
  width: 100%;
  height: clamp(380px, 52vw, 640px);
  overflow: hidden;
  background: #d9d9d9;
  border-radius: var(--radius);
}

/* ✅ 영상만 사용: 항상 보이게 */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity: 1;
  transition: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ✅ PAUSE 버튼 완전 제거(HTML에 남아있어도 안 보임) */
.media-ctrl{ display:none !important; }

.hero-copy{
  max-width: 860px;
  margin: 22px auto 0;
  padding: 0 var(--pad) 46px;
  text-align:center;
}

.hero-copy p{ margin: 10px 0; }
.muted{ color: var(--muted); }

.hero-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .02em;
  background: transparent;
}

.ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,.22);
  text-decoration:none;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(0,0,0,.78);
}

/* ===== SECTION HEAD ===== */
.section-head{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 18px;
  text-align: center;
}

.section-title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
}

.section-desc{
  margin: 10px auto 0;
  max-width: 820px;
  color: var(--muted);
  font-size: 14px;
}

/* ===== RESERVE ===== */
.reserve{
  padding: 36px 0 32px;
  border-top: 1px solid var(--hair);
}

.reserve-card{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  overflow: visible;
}

.tally-iframe{
  width: 100%;
  height: 1px;           /* ✅ Tally dynamicHeight가 inline height로 실제 높이를 세팅 */
  min-height: 200px;     /* ✅ 로딩 중 최소 표시(빈 여백 과다 방지) */
  border: 1px solid var(--hair);
  background: transparent;
  display: block;
}

.reserve-note{
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.72);
  font-size: 13px;
  background: rgba(255,255,255,.28);
}

/* ===== SPLITS ===== */
.split-wrap{
  border-top: 1px solid var(--hair);
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 66vh, 780px);
  border-bottom: 1px solid var(--hair);
}

.split-media{
  background: #ddd;
  overflow:hidden;
}

.split-text{
  padding: clamp(26px, 4.3vw, 72px);
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 12px;
}

.kicker{
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(0,0,0,.62);
}

.split-title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
}

.text-link{
  margin-top: 10px;
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .02em;
}

@media (min-width: 981px){
  .split--reverse .split-media{ order: 2; }
  .split--reverse .split-text{ order: 1; }
}

/* ===== PROCESS ===== */
.process{
  padding: 54px 0 74px;
  border-bottom: 1px solid var(--hair);
}

.steps{
  max-width: var(--max);
  margin: 22px auto 0;
  padding: 0 var(--pad);
  list-style:none;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.step{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.24);
  padding: 16px 16px;
  display:flex;
  gap: 12px;
}

.step-num{
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  min-width: 44px;
}

.step-title{
  font-weight: 600;
  letter-spacing: .02em;
}

.step-desc{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.process-cta{
  display:flex;
  justify-content:center;
  margin-top: 18px;
  padding: 0 var(--pad);
}

/* ===== GALLERY ===== */
.gallery{
  padding: 54px 0 74px;
  border-bottom: 1px solid var(--hair);
}

.grid{
  max-width: var(--max);
  margin: 22px auto 0;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.grid-item{
  margin:0;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background:#ddd;
  height: 280px;
}

/* ===== SUPPORT ===== */
.support{
  padding: 54px 0 74px;
}

.support-box{
  max-width: var(--max);
  margin: 18px auto 0;
  padding: 0 var(--pad);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.22);
}

.support-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.support-row:first-child{ border-top: 0; }

.support-label{
  color: rgba(0,0,0,.64);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.support-value{
  font-size: 14px;
}

/* ===== FOOTER ===== */
.site-footer{
  padding: 28px 0 44px;
}

.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad) 0;
}

.footer-brand{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align:center;
}

.footer-logo{
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-meta{
  color: var(--muted);
  font-size: 13px;
}

/* ===== RESPONSIVE (FIXED BRACES) ===== */
@media (max-width: 980px){
  /* Tally iframe: keep only as fallback; dynamicHeight will size it */
    .split{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .split--reverse .split-media,
  .split--reverse .split-text{
    order: 0;
  }

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

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

  .support-row{
    grid-template-columns: 1fr;
  }

  .logo-img{
    height: 20px;
  }

  /* HERO 박스 */
  .hero-media{
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 260px;
    max-height: 460px;
    background: #d9d9d9;
  }

  .hero-video{
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* ✅ 모바일: 스토리/갤러리 크롭 방지 */
  .split-media{
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .split-media img{
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #ddd;
  }

  .grid-item{
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .grid-item img{
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #ddd;
  }
}

/* 접근성: 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .media-ctrl{ display:none !important; }
}

/* ===== LOCATION (image) ===== */
.location-section{
  background: var(--bg);          /* ✅ 페이지 기본 배경과 동일 */
  padding: 56px 0 72px;
  text-align: center;
  border-top: 1px solid var(--hair);
}

/* 제목/설명은 기본 텍스트 컬러를 사용 */
.location-section .section-title{
  color: var(--ink);
}

.location-section .section-desc{
  color: var(--muted);
}

.location-image-wrap{
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 0 var(--pad);
}

/* 블랙 이미지가 ‘툭’ 뜨지 않게, 아주 얇은 테두리만 */
.location-image{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0,0,0,.10);
  background: #000;
}

/* 주소/전화 라인 */
.location-meta-inline{

  max-width: var(--max);
  margin: 18px auto 0;
  padding: 0 var(--pad);
  color: rgba(0,0,0,.68);
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 980px){
  .location-section{
    padding: 56px 0 76px;
  }
  .location-image-wrap{
    margin-top: 28px;
  }
}
/* ===== Footer (match page background) ===== */
.site-footer{
  background: var(--bg);
  color: var(--ink);
}

.site-footer .hairline{
  background: var(--hair);
}

.site-footer .footer-meta{
  color: var(--muted);
}

/* footer logo image */
.footer-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.footer-logo-img{
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-logo-text{
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}
.modal.is-open{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.modal-dialog{
  position: relative;
  width: min(760px, calc(100% - 32px));
  margin: 8vh auto;
  background: var(--bg);
  border: 1px solid var(--hair);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.modal-title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-close{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.modal-close svg{
  width: 20px;
  height: 20px;
  fill: var(--ink);
  opacity: .9;
}

.modal-body{
  padding: 18px;
  overflow: auto;
}

.modal-body h4{
  margin: 18px 0 8px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.modal-body p, .modal-body li{
  font-size: 13px;
  color: rgba(0,0,0,.74);
  line-height: 1.9;
}
.modal-body ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
/* ===== Hero more link ===== */
.hero-actions{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-more-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(0,0,0,.28);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .82;
  transition:
    opacity .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.hero-more-link:hover{
  opacity: 1;
  border-bottom-color: rgba(0,0,0,.65);
  transform: translateY(-1px);
}

.hero-more-link__arrow{
  font-size: 12px;
  transform: translateY(-1px);
}

.hero-more-link:focus-visible{
  outline: none;
  opacity: 1;
  border-bottom-color: rgba(0,0,0,.65);
  box-shadow: 0 2px 0 0 rgba(0,0,0,.65);
}
/* ===== Story more link ===== */
.story-more{
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--hair);
}

.story-more-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  justify-content: center;
  align-items: center;
}

.story-more-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 6px;
  border-bottom: 1px solid rgba(0,0,0,.24);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .82;
  transition:
    opacity .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.story-more-link:hover{
  opacity: 1;
  border-bottom-color: rgba(0,0,0,.62);
  transform: translateY(-1px);
}

.story-more-link__arrow{
  font-size: 12px;
  transform: translateY(-1px);
}

.story-more-link:focus-visible{
  outline: none;
  opacity: 1;
  border-bottom-color: rgba(0,0,0,.62);
  box-shadow: 0 2px 0 0 rgba(0,0,0,.62);
}

@media (max-width: 980px){
  .story-more{
    padding: 22px 0 26px;
  }

  .story-more-link{
    font-size: 13px;
    gap: 8px;
  }

  .story-more-link__arrow{
    font-size: 11px;
  }
}

@media (max-width: 980px){
  .hero-more-link{
    font-size: 13px;
    gap: 6px;
  }

  .hero-more-link__arrow{
    font-size: 11px;
  }
}
@media (max-width: 980px){
  .modal-dialog{
    margin: 6vh auto;
  }
}
/* ===== Footer clickable info links ===== */
.footer-meta-links{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.footer-meta-link{
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.footer-meta-link:hover{
  text-decoration: underline;
}

.footer-meta-link:focus-visible{
  outline: 1px solid rgba(0,0,0,.35);
  outline-offset: 4px;
}

.footer-sep{
  color: rgba(0,0,0,.38);
}

/* modal 안 리스트/링크 가독성 보정 */
.modal-body ol{
  margin: 8px 0 0;
  padding-left: 18px;
}

.modal-body a{
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 980px){
  .footer-meta-links{
    gap: 4px 8px;
  }
}