/* =============================================
   웨딩박람회 - 원본 디자인 기반 CSS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', sans-serif;
  color: #333; background: #fff;
  -webkit-font-smoothing: antialiased;
  font-weight: 400; letter-spacing: -0.03em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; vertical-align: top; }
ul { list-style: none; }
button { font-family: inherit; }
em { color: #e74c3c; font-style: normal; font-weight: 500; }
.pc-only { display: block !important; }
.m-only { display: none !important; }

/* ── Header ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.3s;
}
.site-header.scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.logo img { height: 32px; }
.logo-text { font-size: 17px; font-weight: 700; color: #967F5E; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav a { font-size: 13px; font-weight: 500; color: #555; padding: 8px 14px; border-radius: 20px; transition: all 0.2s; }
.main-nav a:hover { color: #967F5E; background: rgba(150,127,94,0.08); }
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.mobile-menu-btn span { display: block; width: 20px; height: 1.5px; background: #333; border-radius: 1px; transition: all 0.3s; }

/* ── Inner ── */
.inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ── Hero Banner ── */
.hero { margin-top: 60px; }
.hero img { width: 100%; }
.hero-m { display: none; }

/* ── 섹션 공통 ── */
.sec-tit { font-size: 1.5rem; font-weight: 500; text-align: center; margin-bottom: 6px; color: #191919; letter-spacing: -0.5px; }
.sec-sub { text-align: center; color: #888; font-size: 14px; font-weight: 300; margin-bottom: 30px; }
.sec-header-img { max-width: 600px; margin: 0 auto 30px; }

/* ── 사전신청 폼 ── */
.sec-form { padding: 60px 0; background-size: cover; background-position: center; }
.reg-form {
  max-width: 460px; margin: 0 auto;
  background: rgba(255,255,255,0.97); padding: 32px 28px;
  border-radius: 14px; box-shadow: 0 8px 36px rgba(0,0,0,0.08);
}
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; font-weight: 500; color: #555; margin-bottom: 5px; }
.fg input[type="text"], .fg input[type="tel"], .fg .date-input {
  width: 100%; padding: 13px 14px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #191919; background: #fff;
  transition: border-color 0.2s;
}
.fg input::placeholder { color: #bbb; font-weight: 300; }
.fg input:focus { outline: none; border-color: #967F5E; box-shadow: 0 0 0 3px rgba(150,127,94,0.1); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visit-opts { display: flex; gap: 8px; }
.radio-pill { flex: 1; cursor: pointer; }
.radio-pill input { display: none; }
.radio-pill span {
  display: block; text-align: center; padding: 12px; border: 1px solid #ddd;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: #666; background: #f8f8f8;
  transition: all 0.2s;
}
.radio-pill input:checked + span { border-color: #967F5E; background: #fff; color: #967F5E; }
.date-wrap { display: flex; gap: 10px; align-items: center; }
.date-wrap .date-input { flex: 1; }
.undecided { font-size: 12px; color: #aaa; white-space: nowrap; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.undecided input { width: 16px; height: 16px; accent-color: #967F5E; }
.fc { margin-bottom: 8px; }
.fc label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #666; cursor: pointer; }
.fc input[type="checkbox"] { width: 17px; height: 17px; accent-color: #967F5E; flex-shrink: 0; }
.fc a { color: #967F5E; text-decoration: underline; }
.btn-apply {
  width: 100%; padding: 15px; background: #967F5E; color: #fff; border: none;
  border-radius: 9px; font-size: 15px; font-weight: 500; cursor: pointer;
  margin-top: 14px; transition: background 0.2s;
}
.btn-apply:hover { background: #846e50; }

/* ── 영상 ── */
.sec-video { padding: 60px 0; background-size: cover; background-position: center; }
.video-wrap {
  position: relative; padding-bottom: 56.25%; max-width: 780px; margin: 0 auto;
  border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ── 프로모션 배너 ── */
.sec-promo img { width: 100%; cursor: pointer; }

/* ── 패럴랙스 배경 ── */
.parallax-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover; background-position: center; background-attachment: fixed;
  z-index: 0;
}
.sec-hall, .sec-dress, .sec-snap { position: relative; overflow: hidden; }
.sec-hall .inner, .sec-dress .inner, .sec-snap .inner { position: relative; z-index: 1; padding: 60px 20px; }

/* ── 웨딩홀 ── */
.hall-showcase { text-align: center; margin-bottom: 30px; }
.hall-showcase img { margin: 0 auto; max-width: 100%; }
.hall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.hall-item { border-radius: 10px; overflow: hidden; }
.hall-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.full-banner { display: block; }
.full-banner img { width: 100%; }

/* ── 스튜디오 ── */
.sec-studio { background: #fff; padding: 60px 0; }
.studio-main { margin: 0 auto 30px; max-width: 100%; }
.studio-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.studio-grid img { width: 100%; border-radius: 8px; aspect-ratio: 1; object-fit: cover; }

/* ── 드레스 ── */
.sec-dress { min-height: 400px; }
.dress-showcase { text-align: center; }
.dress-showcase img { margin: 0 auto; }

/* ── 스냅 ── */
.sec-snap { min-height: 500px; }
.snap-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  padding: 40px 0;
}
.snap-item {
  background: rgba(255,255,255,0.95); border-radius: 8px; padding: 10px;
  text-align: center; transition: transform 0.2s;
}
.snap-item:hover { transform: translateY(-3px); }
.snap-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }

/* ── 혼수 이벤트 ── */
.sec-events { padding: 60px 0; background: #f5f5f5; }
.honsu-block { margin-bottom: 50px; }
.honsu-tit { max-width: 500px; margin: 0 auto 20px; }
.honsu-swiper { padding-bottom: 40px; }
.honsu-swiper .swiper-slide { border-radius: 10px; overflow: hidden; }
.honsu-swiper .swiper-slide img { width: 100%; }

/* ── ESG ── */
.sec-esg { padding: 50px 0; background: #fff; overflow: hidden; }
.esg-slider { position: relative; }
.esg-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 10px 0;
}
.esg-track::-webkit-scrollbar { display: none; }
.esg-track img {
  flex: 0 0 45%; max-width: 500px; border-radius: 10px; scroll-snap-align: start;
}
.esg-prev, .esg-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff; border: none;
  font-size: 22px; cursor: pointer; z-index: 2; line-height: 1;
}
.esg-prev { left: 0; }
.esg-next { right: 0; }

/* ── 오시는길 ── */
.sec-location { padding: 60px 0; }
.venue-name { text-align: center; font-size: 1.1rem; font-weight: 500; color: #191919; }
.venue-addr { text-align: center; font-size: 13px; color: #aaa; font-weight: 300; margin-top: 4px; margin-bottom: 20px; }
.map-wrap { width: 100%; height: 380px; border-radius: 10px; overflow: hidden; background: #eee; }
.map-wrap iframe { width: 100%; height: 100%; border: none; }

/* ── 하단 CTA ── */
.sec-tail img { width: 100%; cursor: pointer; }

/* ── Floating ── */
.floating-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96); box-shadow: 0 -1px 10px rgba(0,0,0,0.08);
  transform: translateY(100%); transition: transform 0.3s; display: none;
}
.floating-cta.visible { transform: translateY(0); }
.floating-btn {
  display: block; text-align: center; padding: 14px;
  background: #967F5E; color: #fff; border-radius: 9px;
  font-size: 15px; font-weight: 500;
}
.floating-phone {
  position: fixed; bottom: 76px; right: 16px; z-index: 899;
  width: 46px; height: 46px; border-radius: 50%; background: #967F5E;
  color: #fff; display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.back-to-top {
  position: fixed; bottom: 76px; right: 16px; z-index: 899;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.5);
  color: #fff; border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.back-to-top.visible { display: flex; }

/* ── Footer ── */
.site-footer { background: #1e1e1e; color: #aaa; padding: 36px 20px; text-align: center; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.company-info { margin-bottom: 4px; font-size: 12px; font-weight: 300; }
.company-info strong { color: #ddd; font-weight: 500; }
.company-info a { color: #967F5E; }
.footer-links { margin: 10px 0; }
.footer-links a { color: #aaa; margin: 0 10px; font-size: 12px; }
.footer-links a:hover { color: #fff; }
.copyright { font-size: 11px; color: #666; margin-top: 8px; font-weight: 300; }

/* ── Dress ── */
.sec-dress { position: relative; overflow: hidden; }
.sec-dress .inner-z { padding: 60px 20px; }
.dress-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.dress-grid img { width: 100%; border-radius: 8px; aspect-ratio: 3/4; object-fit: cover; }

/* ── Full width sections ── */
.sec-full img { width: 100%; display: block; cursor: pointer; }
.sec-full a { display: block; }
.full-img { width: 100%; }

/* ── Parallax section ── */
.sec-parallax {
  min-height: 500px; background-size: cover; background-position: center;
  background-attachment: fixed; position: relative;
}
.inner-z { position: relative; z-index: 1; padding: 60px 20px; max-width: 1100px; margin: 0 auto; }
.sec-himg { max-width: 500px; margin: 0 auto 24px; display: block; }
.hall-main { text-align: center; margin-bottom: 24px; }
.hall-main img { margin: 0 auto; }

/* ── Honey banners ── */
.honey-banners { margin: 30px 0; }
.honey-ban-row { display: flex; gap: 10px; justify-content: center; }
.honey-ban-row img { flex: 1; max-width: 33%; border-radius: 8px; }

/* ── Promo swiper ── */
.promo-block { margin-top: 40px; }
.promo-swiper { padding-bottom: 40px; }
.promo-swiper .swiper-slide { border-radius: 10px; overflow: hidden; }
.promo-swiper .swiper-slide img { width: 100%; }

/* ── ESG swiper ── */
.sec-esg { padding: 50px 0; background: #fff; }
.esg-swiper { padding-bottom: 40px; }
.esg-swiper .swiper-slide { border-radius: 10px; overflow: hidden; }
.esg-swiper .swiper-slide img { width: 100%; }

/* ── Swiper ── */
.swiper-button-prev, .swiper-button-next { color: #967F5E; }
.swiper-pagination-bullet-active { background: #967F5E; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box {
  background: #fff; padding: 40px 32px; border-radius: 16px;
  text-align: center; max-width: 360px; width: 90%;
  transform: scale(0.95); transition: transform 0.3s;
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-icon { font-size: 42px; margin-bottom: 16px; color: #967F5E; }
.modal-title { font-size: 1.2rem; font-weight: 500; margin-bottom: 8px; color: #191919; }
.modal-desc { font-size: 13px; color: #aaa; margin-bottom: 24px; line-height: 1.6; font-weight: 300; }
.modal-close { padding: 12px 36px; background: #967F5E; color: #fff; border: none; border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; }

/* ── Policy pages ── */
.error-page, .policy-page { max-width: 800px; margin: 0 auto; padding: 100px 20px 60px; }
.policy-page h1 { margin-bottom: 30px; font-size: 1.3rem; font-weight: 500; }
.policy-content h3 { margin-top: 25px; margin-bottom: 8px; font-weight: 500; }
.policy-content p { color: #666; margin-bottom: 10px; line-height: 1.8; font-weight: 300; }
.btn-back { display: inline-block; margin-top: 30px; padding: 12px 30px; background: #967F5E; color: #fff; border-radius: 8px; }
.form-loading .btn-apply { opacity: 0.6; pointer-events: none; }