/* ===== 기본 설정 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
#cta, #quick-form { scroll-margin-top: 70px; }
:root {
  --navy: #16213e;
  --navy-soft: #1f2c52;
  --gold: #c8a96a;
  --orange: #ff6b35;
}
body {
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: #2b2b2b;
  line-height: 1.75;
  background: #fff;
}
main { max-width: 880px; margin: 0 auto; padding: 0 20px; }
h1, h2 { font-weight: 900; letter-spacing: -0.5px; }
h2 { font-size: 26px; margin-bottom: 28px; text-align: center; }
h3 { font-size: 18px; margin: 22px 0 8px; color: #16213e; font-weight: 800; }
article { margin-bottom: 26px; }
p { color: #444; }

/* ===== 섹션 eyebrow 라벨 ===== */
.eyebrow {
  display: block; text-align: center; color: #c8a96a;
  font-size: 13px; font-weight: 700; letter-spacing: 3px;
  margin-bottom: 8px; text-transform: uppercase;
}

/* ===== 섹션 배경 교차 ===== */
section { padding: 64px 0; }
#location { background: #faf6ee; }
#price-compare { background: #fff; }
#faq { background: #fff; }
#author { background: #16213e; color: #fff; }
#author h2, #author p { color: #fff; }
#cta { background: #faf6ee; }
#visit-gift { background: #16213e; color: #fff; }
#visit-gift h2 { color: #fff; }

#location, #price-compare, #faq, #author, #cta, #visit-gift {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
#location > *, #price-compare > *, #faq > *, #author > *, #cta > *, #visit-gift > * {
  max-width: 840px; margin-left: auto; margin-right: auto; padding: 0 20px;
}

/* ===== 상단 고정 연락 바 ===== */
.top-bar {
  position: sticky; top: 0; z-index: 500;
  background: #16213e; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 12px 20px; font-size: 14px; font-weight: 700;
}
.top-bar .brand { letter-spacing: 1px; white-space: nowrap; }
.top-bar .nav-links {
  display: flex; align-items: center; justify-content: center;
  flex: 1; gap: 16px; flex-wrap: wrap;
}
.top-bar .nav-links a {
  color: #f4f6fb; text-decoration: none; font-size: 14px;
}
.top-bar .nav-links a:hover { color: #c8a96a; }
.top-bar-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 40px; height: 40px; padding: 0; background: transparent; border: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.top-bar .phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: #c8a96a; font-size: 16px; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  animation: phonePulse 1s infinite ease-in-out;
}
.top-bar .phone:hover { color: #f9d27d; }
.icon-phone { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; filter: invert(70%) sepia(40%) saturate(400%); }

@keyframes phonePulse {
  0%, 100% { color: #c8a96a; text-shadow: 0 0 0 transparent; }
  50% { color: #ffd46d; text-shadow: 0 0 10px rgba(255, 212, 109, 0.6), 0 0 18px rgba(255, 212, 109, 0.35); }
}

/* ===== 히어로 ===== */
.hero {
  position: relative; text-align: center; color: #fff;
  background: linear-gradient(rgba(10,16,33,0.55), rgba(10,16,33,0.75)), #16213e;
  min-height: 552px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0; transition: opacity 2s ease-in-out;
}
.hero-img.hero-img-active { opacity: 0.85; z-index: 1; }
.hero-caption { position: relative; z-index: 1; width: 90%; max-width: 640px; padding: 40px 0; }
@keyframes hero-neon-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.5), 0 0 14px rgba(200,169,106,0.4); }
  50% { text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 38px rgba(200,169,106,0.9); }
}
.hero-eyebrow {
  font-size: 23px; letter-spacing: 2px; color: #d8c79a; margin-bottom: 10px; font-weight: 600;
  -webkit-text-stroke: 0.9px #000;
  paint-order: stroke fill;
  animation: hero-neon-pulse 2.2s ease-in-out infinite;
}
.hero h1 {
  font-size: 51px; line-height: 1.5;
  -webkit-text-stroke: 1.1px #000;
  paint-order: stroke fill;
  animation: hero-neon-pulse 2.2s ease-in-out infinite;
}
.hero h1 .accent { color: #c8a96a; }
.hero-sub {
  margin-top: 12px; font-size: 23px; color: #e8e4d8; font-weight: 600;
  -webkit-text-stroke: 0.8px #000;
  paint-order: stroke fill;
  animation: hero-neon-pulse 2.2s ease-in-out infinite;
}
.hero-buttons { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-buttons a {
  padding: 10px 20px; border-radius: 4px; font-size: 13px; font-weight: 700;
  text-decoration: none; border: 1px solid rgba(255,255,255,0.5); color: #fff;
}
.hero-buttons a.solid { background: #c8a96a; border-color: #c8a96a; color: #16213e; }

/* ===== 퀵 문의폼 ===== */
.quick-form { width: 100vw; position: relative; left: 50%; margin-left: -50vw; background: #f3eedd; padding: 24px 0; }
.quick-form-inner { max-width: 840px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quick-form-inner .qf-question { font-size: 13px; font-weight: 700; color: #16213e; margin-bottom: 8px; }
.quick-form-inner input[type="text"], .quick-form-inner input[type="tel"] { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
.quick-form-inner .qf-row { display: flex; gap: 8px; margin-bottom: 8px; }
.quick-form-inner .qf-agree { font-size: 11px; color: #888; margin: 8px 0; }
.quick-form-inner .qf-submit { grid-column: 1 / -1; background: #16213e; color: #fff; border: none; padding: 14px; min-height: 48px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 14px; }
@media (max-width: 600px) { .quick-form-inner { grid-template-columns: 1fr; } }

/* ===== 중간 메뉴바 ===== */
.section-navbar { width: 100vw; position: relative; left: 50%; margin-left: -50vw; background: #16213e; color: #fff; padding: 14px 0; text-align: center; }
.section-navbar .nav-inner { max-width: 840px; margin: 0 auto; padding: 0 20px; }
.section-navbar .nav-phone { color: #c8a96a; font-weight: 800; font-size: 16px; margin-bottom: 8px; display: block; }
.section-navbar .nav-links { font-size: 12px; }
.section-navbar .nav-links a { color: #cfd3dd; text-decoration: none; margin: 0 8px; }
.section-navbar .nav-links a:hover { color: #c8a96a; }

/* ===== 우측 고정 퀵메뉴 ===== */
.side-quick {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 400;
  display: flex; flex-direction: column; gap: 6px;
}
.sq-item {
  display: block; width: 64px; padding: 10px 4px; text-align: center;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #16213e; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.sq-item.sq-top { background: #16213e; color: #fff; }
@media (max-width: 768px) { .side-quick { display: none; } }

/* ===== 모바일 하단 고정 바 ===== */
.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 450;
  background: #fff; border-top: 1px solid #e5e5e5;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.mcb-item {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 52px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: #16213e; border-right: 1px solid #eee;
}
.mcb-item:last-child { border-right: none; }
.mcb-primary { background: #16213e; color: #fff; }
.mcb-phone { background: #c8a96a; color: #16213e; }

/* ===== PREMIUM POINT 영상 그리드 ===== */
.premium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.premium-grid figure { background: #fff; border-radius: 8px; overflow: hidden; }
.premium-grid video { width: 100%; height: 220px; object-fit: contain; object-position: center; display: block; background: #e8e2d3; }
.premium-grid figcaption { padding: 10px 12px 0; font-weight: 700; font-size: 14px; color: #16213e; }
.premium-desc { padding: 4px 12px 14px; font-size: 12px; color: #777; }

/* ===== 단지개요 카드 (이미지 + 구분/내용 표) ===== */
.overview-card { margin-top: 10px; }
.overview-img { width: 100%; height: auto; aspect-ratio: 998 / 574; object-fit: contain; object-position: center; border-radius: 8px; background: #e8e2d3; display: block; }
.info-table-v2 { width: 100%; border-collapse: collapse; margin-top: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.06); font-size: 13px; }

.location-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-top: 18px; }
.location-layout .location-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin-top: 0; display: block; }
.location-info { background: #faf6ee; border: 1px solid #f0e8db; border-radius: 10px; padding: 18px; min-height: 100%; }
.location-info h3 { margin: 0 0 10px; font-size: 18px; color: #16213e; }
.location-info p { margin-bottom: 12px; font-size: 14px; color: #555; }
.location-info ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.location-info li { position: relative; padding-left: 16px; font-size: 14px; color: #555; line-height: 1.5; }
.location-info li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #c8a96a; }
@media (max-width: 760px) { .location-layout { grid-template-columns: 1fr; } .location-layout .location-img { max-height: 280px; } }
.info-table-v2 thead th { background: #16213e; color: #fff; padding: 10px; font-size: 13px; }
.info-table-v2 thead th:first-child { width: 110px; }
.info-table-v2 tbody td { padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 13px; }
.info-table-v2 tbody td:first-child { font-weight: 700; color: #16213e; background: #faf6ee; width: 110px; }
.info-table-v2 tbody tr:nth-child(odd) td:last-child { background: #fff; }
.info-table-v2 tbody tr:nth-child(even) td:last-child { background: #fcfaf4; }

/* ===== 위치/선물/평면 이미지 ===== */
.location-img { width: 100%; aspect-ratio: 1 / 1; max-height: 336px; object-fit: contain; border-radius: 8px; background: #e8e2d3; display: block; margin-top: 10px; }
.gift-img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; background: rgba(255,255,255,0.1); display: block; margin-top: 16px; }
.floorplan-img { width: 100%; height: 320px; object-fit: contain; background: #f7f7f7; border-radius: 8px; display: block; margin-top: 10px; }

/* ===== 갤러리 탭 (알약형, 네이비+오렌지) ===== */
#gallery { background: #16213e; color: #fff; width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 64px 0; }
#gallery > * { max-width: 840px; margin-left: auto; margin-right: auto; padding: 0 20px; }
#gallery h2 { color: #fff; }
.gallery-tabs, .floorplan-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.gallery-tabs .tab-btn {
  padding: 12px 28px; border: 1px solid rgba(255,255,255,0.3); background: transparent;
  border-radius: 30px; cursor: pointer; font-size: 13px; font-weight: 700; color: #cfd3dd;
}
.gallery-tabs .tab-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.floorplan-tabs .tab-btn {
  padding: 10px 22px; border: 1px solid #ccc; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 13px; font-weight: 700; color: #555;
}
.floorplan-tabs .tab-btn.active { background: #16213e; color: #fff; border-color: #16213e; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery-grid.hidden { display: none; }
.gallery-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 6px; background: #e8e2d3; }
#gallery-community.gallery-grid { grid-template-columns: 1fr 1fr 1fr; }

/* ===== 관련 글 카드 ===== */
.related-posts { margin-top: 36px; display: grid; gap: 14px; }
.post-card { display: block; border: 1px solid #eee; border-radius: 8px; padding: 18px; text-decoration: none; color: inherit; }
.post-card h3 { font-size: 15px; color: #16213e; margin-bottom: 6px; }
.post-card p { font-size: 13px; color: #777; margin-bottom: 8px; }
.post-card .post-more { font-size: 12px; font-weight: 700; color: #c8a96a; }

/* ===== 표 ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; }
.price-table th, .price-table td { border: 1px solid #e8e2d3; padding: 12px; text-align: left; font-size: 14px; }
.price-table th { background: #16213e; color: #fff; font-weight: 600; }
.table-note { font-size: 12px; color: #888; margin-top: 10px; }

/* ===== FAQ ===== */
#faq details { border: 1px solid #eee; border-radius: 8px; padding: 16px 18px; margin-bottom: 10px; background: #fff; }
#faq summary { font-weight: 700; cursor: pointer; color: #16213e; }
#faq p { margin-top: 10px; color: #555; font-size: 14px; }

/* ===== 작성자 신뢰 섹션 ===== */
#author { text-align: center; }
#author .eyebrow { color: #c8a96a; }

/* ===== 예약방문 특별혜택 ===== */
#visit-gift { text-align: left; }
#visit-gift h2 { text-align: center; margin-bottom: 24px; }
.gift-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gift-tag { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); padding: 4px 12px; border-radius: 4px; font-size: 12px; }
.gift-highlight { background: #1f2c52; border-radius: 8px; padding: 16px; margin-bottom: 12px; font-size: 15px; }
.gift-highlight b { color: #ff8c5a; }
#visit-gift .gift-row b { color: #c8a96a; }
#visit-gift .gift-img { max-width: 480px; margin: 16px auto 0; }

/* ===== CTA ===== */
#cta { text-align: center; }
#cta .cta-card {
  max-width: 600px; margin: 0 auto; padding: 42px 28px;
  background: #fff; border: 1px solid #eee6d8; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(22, 33, 62, 0.06);
}
.cta-form { margin-top: 18px; display: grid; gap: 12px; text-align: left; }
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.cta-date-label { font-size: 12px; font-weight: 700; color: #16213e; margin-bottom: 6px; }
.cta-form input,
.cta-form textarea {
  width: 100%; min-width: 0; padding: 14px 14px; min-height: 48px; border: 1px solid #e7e1d9; border-radius: 10px;
  background: #fbfaf6; font-size: 16px; color: #2d2d2d;
}
.cta-form textarea { min-height: 120px; resize: vertical; }
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: #9c968a; }
.cta-button { display: inline-block; margin-top: 4px; padding: 16px 42px; min-height: 48px; background: #16213e; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 700; letter-spacing: 1px; border: none; cursor: pointer; }
.cta-button:hover { background: #c8a96a; color: #16213e; }
@media (max-width: 600px) { .cta-form-row { grid-template-columns: 1fr; } }

/* 허니팟(스팸 봇) 필드 — 화면·스크린리더에서 숨김 */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  pointer-events: none;
}

footer { background: #fafafa; border-top: 1px solid #e5e5e5; padding: 22px 20px; }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.footer-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #8a8a8a; color: #fff; font-weight: 800; font-size: 13px;
}
.footer-logo-text { font-weight: 700; color: #555; font-size: 14px; }
.footer-info { color: #888; font-size: 12px; line-height: 1.8; }
.footer-contact { color: #888; }
.footer-sep { margin: 0 8px; color: #ccc; }
.footer-copy { color: #999; }
.footer-copy a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-sep { display: block; margin: 2px 0; }
}

/* ===== 이벤트 팝업 (3카드 그리드) ===== */
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; overflow-y: auto; }
.popup-overlay.hidden { display: none; }
.popup-wrap { position: relative; width: min(100%, 760px); max-height: calc(100vh - 40px); overflow: visible; z-index: 1; }
.popup-close { position: absolute; top: -42px; right: 0; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 20px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; z-index: 2; }
.popup-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
.popup-img { width: 100%; height: auto; aspect-ratio: 453 / 675; object-fit: contain; object-position: center; border-radius: 10px; background: #f6f6f6; display: block; }
.popup-hide-today { display: block; text-align: right; margin-top: 14px; font-size: 12px; color: #ddd; }
.popup-hide-today input { margin-right: 6px; }
.popup-dots { display: none; }
@media (max-width: 700px) {
  .popup-wrap { width: 70%; }
  .popup-cards {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  .popup-cards::-webkit-scrollbar { display: none; }
  .popup-img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 453 / 675; object-fit: contain; scroll-snap-align: center; }
  .popup-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .popup-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; }
  .popup-dot.active { background: #fff; }
}

/* =====================================================
   반응형 — 태블릿 (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
  main { padding: 0 16px; }
  h2 { font-size: 23px; margin-bottom: 22px; }
  section { padding: 48px 0; }

  /* 하단 고정 바 노출, 우측 고정 퀵메뉴는 위쪽에서 이미 숨김 처리됨 */
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 60px; }

  /* 상단 내비게이션 — 햄버거 메뉴 */
  .top-bar { flex-wrap: nowrap; position: sticky; }
  .top-bar .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #16213e; padding: 4px 20px 12px;
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
  }
  .top-bar .nav-links.open { display: flex; }
  .top-bar .nav-links a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
  .nav-toggle { display: flex; }

  /* 히어로 */
  .hero { min-height: 440px; }
  .hero-eyebrow { font-size: 18px; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 16px; }

  /* 프리미엄 포인트 */
  .premium-grid { gap: 10px; }
  .premium-grid video { height: 180px; }

  /* 단지개요 표 */
  .info-table-v2 { font-size: 12px; }
  .info-table-v2 thead th, .info-table-v2 tbody td { padding: 8px 10px; }

  /* 갤러리 */
  .gallery-grid img { height: 180px; }
  #gallery-community.gallery-grid { grid-template-columns: 1fr 1fr; }

  /* 타입소개 평면도 */
  .floorplan-img { height: 260px; }

  /* 시세비교 표 — 가로 스크롤 */
  .table-scroll { box-shadow: inset -14px 0 10px -10px rgba(0,0,0,0.12); }
  .price-table { min-width: 560px; }
  .price-table th, .price-table td { font-size: 13px; padding: 10px; white-space: nowrap; }
}

/* =====================================================
   반응형 — 모바일 (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  main { padding: 0 14px; }
  h2 { font-size: 20px; margin-bottom: 18px; }
  h3 { font-size: 16px; }
  section { padding: 36px 0; }

  /* 상단 바 — 로고/전화/햄버거 겹침 방지 */
  .top-bar { padding: 10px 14px; gap: 8px; }
  .top-bar .brand { font-size: 13px; }
  .top-bar .phone { font-size: 13px; }
  .icon-phone { width: 12px; height: 12px; }
  .nav-toggle { width: 34px; height: 34px; }

  /* 히어로 */
  .hero { min-height: 380px; }
  .hero-eyebrow { font-size: 15px; }
  .hero h1 { font-size: 28px; line-height: 1.4; }
  .hero-sub { font-size: 14px; }

  /* 프리미엄 포인트 — 1열 스택 */
  .premium-grid { grid-template-columns: 1fr; }
  .premium-grid video { height: 200px; }

  /* 갤러리 — 1열 스택 */
  .gallery-grid, #gallery-community.gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid img { height: 220px; }

  /* 타입소개 평면도 */
  .floorplan-img { height: 220px; }

  /* 하단 고정 바 라벨 축소 */
  .mcb-item { font-size: 13px; min-height: 48px; }
}