/* ============================================================
   summary.css — 사업개요(사업안내) 서브 페이지
   * main.css/pad.css/mobile.css 다음에 로드
   ============================================================ */

/* 서브 페이지는 일반 스크롤 */
html.summary-html,
body.summary-page {
  position: static !important;
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  background: #ffffff;
}

/* 스크롤 시 헤더를 흰 배경 + 진한 요소로 (단, 메뉴 열림 중에는 투명 → 어사이드 어두운 배경이 비치도록) */
body.is-summary-scrolled:not(.is-menu-open) .site-header {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* 메뉴 열림 중에는 흰 배경/그림자 제거 */
body.is-summary-scrolled.is-menu-open .site-header {
  background: transparent;
  box-shadow: none;
}

/* 아래로 스크롤 시 헤더가 위로 차분히 사라지고, 위로 스크롤 시 다시 표시 */
body.summary-page .site-header {
  transition:
          transform 0.55s var(--motion-soft-ease),
          background-color 0.45s ease,
          box-shadow 0.45s ease,
          height 0.7s var(--layout-ease);
  will-change: transform;
}
body.summary-page.is-header-hidden .site-header {
  transform: translateY(-100%);
}

/* =====================================================
   상단 서브 배너 (sub_top.jpg) + 오버레이 타이틀
   ===================================================== */
.summary-top {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.summary-top-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
  /* 차분한 줌 인/아웃 반복 */
  animation: summary-top-zoom 20s ease-in-out infinite;
}

@keyframes summary-top-zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.summary-top-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 헤더와 겹치지 않게 위 여백 */
  padding-top: 90px;
  text-align: center;
  pointer-events: none;
}

.summary-top-en {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
  /* 시작: 넓은 자간 + 숨김 → 도착: 좁은 자간 */
  letter-spacing: 0.5em;
  /* 자간을 우측으로 밀지 않도록 보정 */
  text-indent: 0.5em;
  opacity: 0;
  transition:
          letter-spacing 1.7s cubic-bezier(0.22, 0.61, 0.36, 1),
          text-indent 1.7s cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity 1.1s ease;
}

.summary-top-ko {
  margin: 22px 0 0;
  font-family: "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  font-weight: 350;
  font-size: 28px;
  line-height: 1.3;
  color: #ffffff;
  opacity: 0;
  transform: translateY(26px);
  transition:
          opacity 1.2s ease 0.35s,
          transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}

/* 로드 직후 등장 (register.html은 body가 register-standalone이라 함께 지정) */
.summary-page.is-top-in .summary-top-en,
.register-standalone.is-top-in .summary-top-en {
  opacity: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.summary-page.is-top-in .summary-top-ko,
.register-standalone.is-top-in .summary-top-ko {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   본문 — 이미지01/02 + 사업개요 표 (한 줄 배치)
   ===================================================== */
.summary-body {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  /* 서브탑 아래 여백(위여백 넉넉히) */
  padding: clamp(100px, 13vh, 200px) clamp(24px, 4vw, 90px) clamp(60px, 8vh, 110px);
}

.summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 3.4vw, 66px);
}

.summary-photo {
  display: block;
  width: auto;
  height: auto;
  /* 이미지 크기가 커도 한 줄 배치가 깨지지 않게 상한 */
  max-width: clamp(220px, 28vw, 440px);
  flex: 0 1 auto;
}

/* 이미지01이 02보다 위에 위치 */
.summary-photo--1 {
  margin-top: 0;
}
.summary-photo--2 {
  margin-top: clamp(50px, 8vh, 100px);
}

.summary-info {
  flex: 1 1 380px;
  min-width: 320px;
  max-width: 520px;
  /* 규모 아래 선이 이미지02 하단선과 가로선상 맞도록 바닥 정렬 */
  align-self: flex-end;
  /* 대지위치 열 왼쪽 여백 */
  margin-left: clamp(14px, 2.2vw, 48px);
}

.summary-info-title {
  margin: 0 0 22px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--navy);
}

/* 사업개요 표 (대지위치 위 가로선 없음) */
.summary-table {
  border-top: 0;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 6px;
  border-bottom: 1px solid #e3e3e7;
}

.summary-term {
  flex: 0 0 96px;
  font-family: "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #22346c;
}

.summary-desc {
  flex: 1;
  font-family: "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #2a2a2a;
}

/* =====================================================
   페이드업 등장 (data-reveal → is-revealed)
   ===================================================== */
.summary-photo,
.summary-info-title,
.summary-item {
  opacity: 0;
  transform: translateY(34px);
  transition:
          opacity 1s var(--motion-soft-ease),
          transform 1.1s var(--motion-soft-ease);
}

.summary-photo--1.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.summary-photo--2.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

/* 표: 제목 → 각 열이 쫘라락 순차 상승 */
.summary-info.is-revealed .summary-info-title {
  opacity: 1;
  transform: translateY(0);
}
.summary-info.is-revealed .summary-item {
  opacity: 1;
  transform: translateY(0);
}
.summary-info.is-revealed .summary-item:nth-child(1) { transition-delay: 0.12s; }
.summary-info.is-revealed .summary-item:nth-child(2) { transition-delay: 0.20s; }
.summary-info.is-revealed .summary-item:nth-child(3) { transition-delay: 0.28s; }
.summary-info.is-revealed .summary-item:nth-child(4) { transition-delay: 0.36s; }
.summary-info.is-revealed .summary-item:nth-child(5) { transition-delay: 0.44s; }
.summary-info.is-revealed .summary-item:nth-child(6) { transition-delay: 0.52s; }
.summary-info.is-revealed .summary-item:nth-child(7) { transition-delay: 0.60s; }
.summary-info.is-revealed .summary-item:nth-child(8) { transition-delay: 0.68s; }

/* =====================================================
   유의사항(notice) + 푸터
   ===================================================== */
.summary-notice {
  width: 100%;
  margin: 0 auto;
  /* 노티스 위·아래 여백 넉넉히(푸터 위) */
  padding: clamp(80px, 11vh, 170px) clamp(24px, 4vw, 90px) clamp(90px, 12vh, 180px);
  text-align: center;
}

.summary-notice-img {
  /* 원본 크기 그대로(넘칠 때만 축소) */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(34px);
  transition:
          opacity 1s var(--motion-soft-ease),
          transform 1.1s var(--motion-soft-ease);
}
.summary-notice-img.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 푸터 상단 연회색선 */
.summary-footer {
  border-top: 1px solid #e4e4e7;
}

/* 단일 이미지 서브페이지(입지환경·프리미엄): 콘텐츠 이미지를 원본 크기로 넓게 표시 */
.summary-body--single {
  max-width: 1600px;
  padding-left: clamp(14px, 2vw, 44px);
  padding-right: clamp(14px, 2vw, 44px);
}
.summary-notice-pic {
  display: block;
}

/* 오시는길 서브페이지: 지도 콘텐츠 영역 배경을 흰색으로(배경이미지 제거) */
.summary-contact {
  background: #ffffff;
}
.summary-contact .contact-bg {
  display: none;
}
/* 버튼 아래 여백 = CONTACT US 제목 위 여백(패딩+제목 margin)과 동일하게 */
.summary-contact .contact-inner {
  height: auto;
  padding-bottom: calc(clamp(80px, 12vh, 140px) + 46px);
}

/* 서브페이지 모바일: 스크롤로 헤더가 밝아진(is-light-header) 상태에서 어사이드를 열면
   닫기버튼(X)·특례사업 문구·전화 아이콘이 진한색으로 남는 문제 →
   메뉴 열림 중에는 어사이드(네이비 배경) 위 요소를 항상 흰색으로 고정.
   (mobile.css의 is-light-header 규칙이 !important라 클래스 수를 늘려 우선순위 확보) */
@media (max-width: 1365px) {
  body.summary-page.is-menu-open .menu-line-top,
  body.summary-page.is-menu-open .menu-line-bottom,
  body.register-standalone.is-menu-open .menu-line-top,
  body.register-standalone.is-menu-open .menu-line-bottom {
    background: #ffffff !important;
    opacity: 1 !important;
  }
  body.summary-page.is-menu-open .project-type,
  body.register-standalone.is-menu-open .project-type {
    color: #ffffff !important;
  }
  body.summary-page.is-menu-open .telephone-icon,
  body.register-standalone.is-menu-open .telephone-icon {
    filter: none !important;
  }
}

/* 서브페이지 모바일: 햄버거/닫기 버튼 개선
   1) 탭 영역 확대(16px 버튼이라 클릭이 잘 안 됨) — 전화 아이콘과 안 겹치게 40×40
   2) 어사이드 닫기(X) 균형: 16px 버튼 중앙(8px)에서 두 선이 정확히 교차(±3.5px) */
@media (max-width: 1365px) {
  body.summary-page .menu-button::before,
  body.register-standalone .menu-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
  }
  body.summary-page.is-menu-open .menu-line-top,
  body.register-standalone.is-menu-open .menu-line-top {
    transform: translateY(3.5px) rotate(45deg) !important;
  }
  body.summary-page.is-menu-open .menu-line-bottom,
  body.register-standalone.is-menu-open .menu-line-bottom {
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }
}

/* 오시는길 모바일: 맵 이미지 원본크기 + 지도/주소/버튼 여백 여유있게(서브페이지는 스크롤 가능) */
@media (max-width: 1365px) {
  .summary-contact .contact-map-m {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: initial !important;
  }
  /* 두 지도 블록 사이 간격(= 첫 지도 버튼 아래 여백) 넉넉히 */
  .summary-contact .contact-maps {
    gap: 34px !important;
    margin-top: 18px !important;
  }
  /* 현장/견본주택 주소: 위(지도)·아래(버튼) 여백 */
  .summary-contact .contact-map-caption {
    margin-top: 16px !important;
    margin-bottom: 14px !important;
  }
  .summary-contact .contact-map-buttons {
    margin-top: 0 !important;
  }
  .summary-contact .contact-inner {
    height: auto !important;
    min-height: 0 !important;
    /* 맨 아래 버튼 하단 여백 = CONTACT US 제목 위 여백
       (contact-inner 패딩 26px + .contact-head margin-top 46px = 72px)와 동일 */
    padding-bottom: 72px !important;
  }
}

/* =====================================================
   서브페이지 관심고객 플로팅 버튼 + 오픈예정 뱃지
   (메인의 body.is-ready 대체 — 서브페이지에서 항상 노출)
   ===================================================== */
body.summary-page .register-control--floating {
  opacity: 1;
  pointer-events: auto;
}
body.summary-page .register-control--floating .register-circle {
  animation-play-state: running;
}
body.summary-page.is-guest-open .register-control--floating {
  opacity: 0;
  pointer-events: none;
}
/* 모달 열림 중 배경 스크롤 잠금(서브페이지 overflow-y:auto !important 덮어쓰기) */
body.summary-page.is-guest-open {
  overflow: hidden !important;
}
/* 스크롤 시 붙는 is-light-header가 모바일에서 플로팅을 숨기지 않도록 복원 */
body.summary-page.is-light-header .register-control--floating,
body.summary-page.is-light-header .open-badge {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.summary-page.is-guest-open.is-light-header .register-control--floating {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 사업개요: 모바일(≤1365px)에서는 표+이미지2개 대신 통합 이미지(m_business.jpg) */
.summary-business-m {
  display: none;
  opacity: 0;
  transform: translateY(34px);
  transition:
          opacity 1s var(--motion-soft-ease),
          transform 1.1s var(--motion-soft-ease);
}
.summary-business-m.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1365px) {
  .summary-body .summary-row {
    display: none;
  }
  .summary-business-m {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* =====================================================
   오시는길(contact.html) — 메인 6단(CONTACT) 콘텐츠 재사용
   메인은 풀페이지 SPA라 배경이미지가 position:absolute 기준을 필요로 하고,
   카피/지도 요소들은 스크롤 잭킹 상태 클래스(.is-contact-visible)로만 보이게
   설계돼 있어서, 서브페이지(일반 스크롤)에서는 그 두 가지를 보정해줘야 함.
   ===================================================== */
.summary-contact {
  position: relative;
}

.summary-contact .contact-inner {
  height: auto;
  min-height: 60vh;
}

.summary-contact .contact-eyebrow,
.summary-contact .contact-title,
.summary-contact .contact-map-frame,
.summary-contact .contact-map-caption,
.summary-contact .contact-map-buttons {
  opacity: 1;
  transform: none;
}

/* =====================================================
   반응형 — 좁은 폭에서는 세로 배치
   ===================================================== */
@media (max-width: 1024px) {
  .summary-row {
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 5vh, 56px);
  }
  .summary-photo--2 { margin-top: 0; }
  .summary-info { width: 100%; max-width: 620px; margin-top: 8px; }
  .summary-top-en { font-size: 40px; }
  .summary-top-ko { font-size: 22px; }
}

@media (max-width: 560px) {
  .summary-top-en { font-size: 30px; }
  .summary-top-ko { font-size: 18px; }
  .summary-top-inner { padding-top: 70px; }
}