/* ============================================================
   평택 브레인시티 비스타동원 — 핀포인트 override
   디자인 베이스 = 더파크 비스타동원(www.더파크비스타동원.com) 통째 클론.
   더파크 원본 디자인을 그대로 살리고, 평택 고유 요소만 여기서 override.
   (이전 그란테르/수자인/트리븐 짜깁기 CSS는 더파크 전환으로 전부 제거 — 2026-05-18)
   ============================================================ */

/* ---- 헤더: 그란테르 menu.css(원본 1:1 복사) 가 모든 .navi/.gnb/.tel/.reserve/.ham
   동작을 책임짐. 평택 변형은 (1) 로고 PNG 와 (2) menu.css 기본 .navi { display:none }
   무력화(평택은 무-JS 환경) 두 가지만. (2026-05-20) ---- */

/* 로고 — 컬러/흰색 톤 자동 전환 (그란테르 .navi.* 상태와 동기) */
#logo { width: 200px !important; }
#logo a {
  background-image: url(/img/common/vista-logo.png) !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  text-indent: -9999px !important;
}
/* 로고 — vista-logo-white.png 는 컬러 vista-logo.png 와 동일한 250×30 풀버전(흰 글자)이라
   .navi.white/.navi.over (어두운 섹션 + 메뉴 열림) 에서 PNG 교체로 흰 로고 표시.
   .navi.active/.mouseover/.wh (스크롤 후 / hover / 흰 배경) 에서는 컬러 vista-logo.png 복귀.
   ⚠ .navi.over 가 부여된 상태(메뉴 열림)에서는 .active 가 동시 부여돼도 항상 흰 로고
   유지해야 함 — :not(.over) 가드 필수. (그렇지 않으면 스크롤 후 메뉴 펼치면 컬러 로고로
   돌아가는 버그 — 2026-05-20 사용자 보고) */
.navi.white #logo a,
.navi.white2 #logo a,
.navi.over #logo a { background-image: url(/img/common/vista-logo-white.png) !important; }
.navi.active:not(.over) #logo a,
.navi.mouseover:not(.over) #logo a,
.navi.wh:not(.over) #logo a { background-image: url(/img/common/vista-logo.png) !important; }

/* 그란테르 menu.css 의 .navi { display:none } 무력화 — 항상 보이게 */
header { display: block !important; }
.navi { display: block !important; }

/* gnb-main.js:167 의 `header.css("z-index", 999)` 가 페이지 로드 시 인라인 style 로
   header z-index 를 999 로 덮어씀 → site_wrap.active(9999) 가 header(999) 위로 와서
   메뉴 펼침 시 로고/전화/예약이 사이트맵 뒤로 숨음. !important 로 inline style 무력화. */
header { z-index: 9999999 !important; }

/* PC SCROLL DOWN 표시 — theartpixel.css 의 display:none 무력화 (모든 섹션 공통) */
@media all and (min-width: 1025px) {
  .right_scroll_wrap.pc { display: block !important; }
}
/* REGISTER 섹션 등 일부 진입 시 SCROLL DOWN 숨김 (JS 가 .pyt-hide 토글) */
.right_scroll_wrap.pyt-hide { display: none !important; }


/* 그란테르 motion.css 의 .navi-bg.open / .gnb.open 펼침 룰 (평택 motion.css 에 없음) */
.navi-bg.open { height: 19.1875rem !important; }
.gnb.open { height: 19.1875rem; }
.gnb ul li ul.open {
  transform: translateY(0px) !important;
  opacity: 1 !important;
}

/* 어두운 섹션(.navi.white) 진입 시 — .ham 막대/menu 텍스트도 흰색
   (menu.css 에는 .ham.white 룰만 있고 .navi.white .ham 룰이 없어서 추가) */
.navi.white .ham.sitemap-open-btn span { background-color: #fff !important; }
.navi.white .ham.sitemap-open-btn p { color: #fff !important; }
.navi.white .gnb .depth1 { color: #fff !important; }

/* 메인 페이지(body.main) 헤더 — PC(>1024) 한정.
   스크롤 후에도 투명 유지 + 모든 상태에서 height 7.1875rem 고정.
   태블릿/모바일(≤1024) 은 그란테르 menu.css 의 ≤1400/≤767 룰 그대로 사용. */
@media all and (min-width: 1025px) {
  body.main .navi.active:not(.wh) {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
  }
  body.main .navi,
  body.main .navi.active,
  body.main .navi.wh,
  body.main .navi.active.wh { height: 7.1875rem !important; }
  body.main .navi .gnb .depth1,
  body.main .navi.active .gnb .depth1,
  body.main .navi.wh .gnb .depth1,
  body.main .navi.active.wh .gnb .depth1 { height: 7.1875rem !important; }
  body.main .navi .navi-bg,
  body.main .navi.active .navi-bg,
  body.main .navi.wh .navi-bg,
  body.main .navi.active.wh .navi-bg { top: calc(7.1875rem + 0px) !important; }
}

/* hover 시 .navi 자체 흰 배경 + 보더 — 그란테르 .navi.mouseover 와 동일 효과 */
.navi.wh {
  background-color: #fff !important;
  border-bottom: 1px solid #ddd !important;
}
/* hover (.wh = 흰 배경) 시 — 우측 콘텐츠 모두 검정 톤(어두운 섹션 .white 와 합쳐도 .wh 우선) */
.navi.wh .gnb .depth1 { color: #000 !important; }
.navi.wh:not(.over) #logo a { background-image: url(/img/common/vista-logo.png) !important; }
.navi.wh .tel_wrap a p { color: #000 !important; }
.navi.wh .tel_wrap .tel a div {
  background: url(../img/common/tel.png) center no-repeat !important;
  background-size: 1.125rem !important;
}
.navi.wh .reserve p { color: #000 !important; }
.navi.wh .reserve:after {
  border: 1px solid #000 !important; background: none !important;
}
.navi.wh .reserve .call:after {
  border-bottom: 1px solid #000 !important; border-right: 1px solid #000 !important;
}
.navi.wh .ham.sitemap-open-btn span { background-color: #000 !important; }
.navi.wh .ham.sitemap-open-btn p { color: #000 !important; }
/* 모바일 ≤767 둥근 보더 전화 버튼도 검정 */
@media all and (max-width: 767px) {
  .navi.wh .tel_wrap .tel { border: 1px solid #000 !important; }
}

/* GNB 메뉴 자주(#980644) hover/active 색상 → 브라운 #a1876f 통일 */
.gnb > ul > li:hover > a,
.navi.wh .gnb > ul > li:hover > a,
.navi.white .gnb > ul > li:hover > a,
.navi.over .gnb > ul > li:hover > a { color: #a1876f !important; }
.gnb > ul > li > ul > li > a:hover,
.gnb .depth2 > li > a:hover,
.gnb .depth2 > li.on > a,
.gnb .depth2 > li > a.on { color: #a1876f !important; }
.gnb .line,
.navi.wh .gnb .line,
.navi.white .gnb .line,
.navi.over .gnb .line { background: #a1876f !important; }

@media all and (max-width: 1400px) { #logo { width: 170px !important; } }
@media all and (max-width: 767px)  { #logo { width: 140px !important; } }

/* 메인 히어로 1장 고정 — 슬라이드 인디케이터/넘김 숨김 */
.main_box .main_slide_num,
.swiper1 .swiper-pagination,
.swiper1 .swiper-button-next,
.swiper1 .swiper-button-prev { display: none !important; }

/* ============================================================
   반응형(태블릿/모바일) 보완 — 더파크 PC m.css/pad.css 가 메인 본문·
   헤더·footer 모바일 룰을 원천 미보유(원본은 모바일 m/ 분리)하므로
   단일 트리용 보완. 로드 최후순 + !important 로 안전 적용. (2026-05-18)
   ============================================================ */

/* ★ C1 — ≤1400 스크롤 잠금 해제 (2026-05-20)
   pad.css:16 `body.main{overflow-y:hidden}` 이 ≤1400 전체를 잠그는데,
   원복 트리거 `min.js:779 $('.intro_wrap')...overflow-y:auto` 가
   이 클론엔 .intro_wrap 이 없어 영영 실행 안 됨 → 태블릿/모바일에서
   히어로 아래로 스크롤 불가(사이트 동결). vista-overrides 가 최후 로드라
   여기서 강제로 정상 문서 흐름 복구. 가로 오버플로 가드 동봉. */
@media all and (max-width: 1400px) {
  html, body, body.main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }
  #fullpage, .all_wrap, body.main .all_wrap, .section,
  #fullpage .fp-section, #fullpage .fp-tableCell {
    height: auto !important;
  }
  /* 스크롤 활성화가 .main_skip_bt 클릭(4초 지연)에만 묶여 있던 잔재 —
     인트로가 없으므로 풀스크린 스킵 오버레이 자체를 제거(탭 차단 방지) */
}
/* PC 포함 전 화면에서 인트로 스킵 버튼 숨김 (인트로 영상 자체가 없음) */
.main_skip_wrap { display: none !important; }

/* ============================================================
   푸터 — 더샵 송도그란테르 footer 레이아웃 1:1 이식 + 평택 콘텐츠. (2026-05-20)
   원본: C:/Work/레퍼런스_사이트/더샵송도그란테르.kr/gran/css/{theartpixel,pad,m}.css
   다크 풀와이드(검정 #0d0d0d) + 좌(로고+안내문)/우(시행시공+사업자정보+대표번호) 2단.
   클래스명에 pyt-footer- prefix 부여 — 더파크 theartpixel.css 의 .footer/.footer_left/
   .footer_right/.footer_info/.footer_const 룰과 완전히 격리(li 흰 보더 박스 충돌 차단).
   ============================================================ */
.pyt-footer {
  width: 100%; box-sizing: border-box; position: relative; z-index: 999;
  background-color: #0d0d0d; color: rgba(255,255,255,0.55);
  font-size: 0.75rem; letter-spacing: -0.0313rem; text-align: center;
  padding: 4.625rem 0 4.875rem;
}
.pyt-footer-row {
  width: 90%; max-width: 1720px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 3rem;
}
.pyt-footer-logo {
  width: 7.25rem; height: auto; margin-top: 0.5rem; display: block;
}
.pyt-footer-left {
  text-align: left;
  display: flex; justify-content: flex-start; align-items: flex-start;
  gap: 2.5rem; flex: 1; min-width: 0;
}
.pyt-footer-left > div { flex: 1; min-width: 0; }
.pyt-footer-right {
  display: flex; justify-content: flex-start; align-items: flex-end;
  gap: 1.25rem; flex-direction: column;
}
/* 시행/시공 라인 */
.pyt-footer-const ul {
  display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: 0 0.125rem;
  list-style: none; padding: 0; margin: 0;
}
.pyt-footer-const ul li {
  font-size: 1.125rem; line-height: 100%; color: #fff;
  padding: 0 0.125rem; position: relative;
  background: transparent; border: none;
}
.pyt-footer-const ul li span { color: rgba(255,255,255,0.45); font-size: 0.9375rem; }
.pyt-footer-const ul li.space { margin-right: 1rem; }
/* 시공 로고(dw.png) — 다크 배경에서 보이도록 흰색 보정, 텍스트 라벨 높이에 맞춤 */
.pyt-footer-const ul li.logo { padding: 0 0.25rem; display: inline-flex; align-items: center; }
.pyt-footer-const ul li.logo img {
  height: 1.25rem; width: auto; display: block;
  filter: brightness(0) invert(1);
}
/* 사업지 주소·문의전화 / 사업자·대표자 라인 (좌·우 양쪽에서 쓰임) */
.pyt-footer-info ul {
  display: flex; justify-content: flex-start; align-items: center;
  flex-wrap: wrap; color: #fff;
  list-style: none; padding: 0; margin: 0;
}
.pyt-footer-info li {
  padding: 0 0.75rem; line-height: 100%; position: relative;
  background: transparent; border: none;
}
.pyt-footer-info li:first-child { padding-left: 0; }
.pyt-footer-info li:last-child { padding-right: 0; }
.pyt-footer-info li > div { display: flex; justify-content: flex-start; align-items: flex-end; gap: 0.375rem; }
.pyt-footer-info li::after {
  content: ''; position: absolute; right: 0; top: 1px; bottom: 0; margin: auto;
  width: 1px; height: 0.875rem;
  background-color: #fff; opacity: 0.3;
}
.pyt-footer-info li:last-child::after { display: none; }
.pyt-footer-info li span { color: rgba(255,255,255,0.5); font-size: 0.8125rem; }
.pyt-footer-info li b { font-size: 0.9375rem; font-weight: 400; color: #fff; }
.pyt-footer-right .pyt-footer-info ul {
  justify-content: flex-end; text-align: right;
}
/* 대표번호 */
.pyt-footer-tel {
  display: flex; justify-content: flex-end; align-items: flex-end;
  gap: 0.5rem; margin-top: 0.25rem;
}
.pyt-footer-tel h5 {
  font-size: 0.875rem; line-height: 100%; color: rgba(255,255,255,0.65);
  margin: 0; padding: 0; font-weight: 400;
}
.pyt-footer-tel h2 {
  font-family: 'Poppins', 'Futura PT', sans-serif;
  font-size: 2.625rem; line-height: 0.85;
  color: #fff; font-weight: 600;
  margin: 0; padding: 0;
}
.pyt-footer-tel h2 a { color: inherit; text-decoration: none; }
/* 안내문 */
.pyt-footer p {
  line-height: 165%; margin-top: 1rem;
  color: rgba(255,255,255,0.5);
  text-align: left; font-size: 0.75rem;
}
.pyt-footer p br.pad { display: none; }
/* COPYRIGHT */
.pyt-footer h6 {
  font-size: 0.875rem; line-height: 150%;
  margin: 2.25rem auto 0; letter-spacing: 0;
  color: rgba(255,255,255,0.6); text-align: left;
  width: 90%; max-width: 1720px;
}
.pyt-footer h6 br.mo { display: none; }
/* 탑 버튼 — 기존 jQuery #topBtn 동작 보존(클래스만 더파크와 분리 위해 pyt-footer 안에서 위치만 지정) */
.pyt-footer .top_bt {
  position: absolute; right: 5%; bottom: 4rem;
  width: 49px; height: 47px; background: #fff; cursor: pointer; z-index: 99;
}
.pyt-footer .top_bt::before {
  content: ''; width: 6px; height: 6px;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
  border-left: 1px solid #000; border-top: 1px solid #000;
  transform: rotate(45deg);
}

/* 푸터 주소 줄바꿈 — 모바일(≤767)에서만 표시, PC/태블릿은 한 줄로 (사용자 요청 2026-05-20) */
.pyt-footer br.mo { display: none; }
@media all and (max-width: 767px) {
  .pyt-footer br.mo { display: inline; }
}

/* 모바일 .sub_line — m.css:235 가 20×20 정사각형으로 덮어쓴 것을 PC/태블릿과 동일한
   1×38px 세로 검정선으로 복원 (사용자 요청 2026-05-20). */
@media all and (max-width: 767px) {
  .sub_line {
    width: 1px !important;
    height: 38px !important;
    background-color: #404040 !important;
    margin: 35px auto 0 !important;
  }
}

/* ============================================================
   단지배치도 페이지 — 텍스트 + 단지배치도 메인 + 타입별 세대수 표 + 분위기 컷 3개.
   PDF 5페이지 1:1 이식. (2026-05-20)
   ============================================================ */
.pyt-complex {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 5rem;
  box-sizing: border-box;
}
.pyt-complex-tit { text-align: center; margin-bottom: 3rem; }
/* 운율: 색은 검정 통일, 굵기로만 위계. 부제 얇게(300) + 강조(500), 헤드라인 굵게(700) + 강조(800).
   line-height 살짝 벌려 호흡 (h6 1.35, h2 1.25) */
.pyt-complex-tit h6 {
  font-size: 1.875rem;
  font-weight: 300;
  color: #000;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin: 0 0 0.25rem;
  word-break: keep-all;
}
.pyt-complex-tit h6 b { font-weight: inherit; color: #000; } /* 부제 전체 동일 굵기 */
.pyt-complex-tit h2 {
  font-size: 3rem; font-weight: 700; line-height: 1.25; color: #000;
  letter-spacing: -0.04em; margin: 0; word-break: keep-all;
}
.pyt-complex-tit h2 b { font-weight: inherit; color: #000; } /* 헤드라인 전체 동일 굵기 */

/* 단지배치도 */
.pyt-complex-main { width: 100%; margin-bottom: 3rem; }
.pyt-complex-main img { width: 100%; height: auto; display: block; }

/* 분위기 컷 3개 — 이미지(좌하단 검은박스 라벨) + 장소 정보 */
.pyt-complex-cuts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; list-style: none; padding: 0; margin: 0;
}
.pyt-complex-cuts li { display: flex; flex-direction: column; }
.pyt-complex-cuts figure { position: relative; margin: 0; overflow: hidden; }
.pyt-complex-cuts img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.pyt-complex-cuts li:hover img { transform: scale(1.03); }
/* PDF 좌하단 검은박스 + 흰 텍스트 라벨 */
.pyt-complex-cuts figcaption {
  position: absolute; left: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: -0.025em;
  padding: 0.5rem 1rem;
}
/* 장소 정보 */
.pyt-complex-cuts-info { padding: 1.5rem 0.25rem 0; }
.pyt-complex-cuts-info h4 {
  font-size: 1.125rem; font-weight: 700; color: #980644;
  letter-spacing: -0.025em; margin: 0 0 0.5rem;
}
.pyt-complex-cuts-info h4 + p { margin-top: 0; }
.pyt-complex-cuts-info p {
  font-size: 0.875rem; font-weight: 400; color: #555; line-height: 1.7;
  letter-spacing: -0.025em; margin: 0 0 1.125rem;
  word-break: keep-all;
}
.pyt-complex-cuts-info p:last-child { margin-bottom: 0; }
/* 반응형 */
@media all and (max-width: 1024px) {
  .pyt-complex { padding-bottom: 3rem; }
  .pyt-complex-tit { margin-bottom: 2.5rem; }
  .pyt-complex-tit h6 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.25rem; }
  .pyt-complex-tit h2 { font-size: 2.25rem; line-height: 1.15; }
  .pyt-complex-main { margin-bottom: 2.5rem; }
  .pyt-complex-cuts-info h4 { font-size: 1.0625rem; }
  .pyt-complex-cuts figcaption { font-size: 0.8125rem; padding: 0.4rem 0.875rem; }
}
@media all and (max-width: 767px) {
  .pyt-complex { padding-bottom: 2.5rem; }
  .pyt-complex-tit { margin-bottom: 2.25rem; }
  /* 모바일 — 부제 23px / 헤드라인 30px. 한 줄 유지(360폭에 어절 단위 keep-all) */
  .pyt-complex-tit h6 { font-size: 1.4375rem; line-height: 1.2; margin-bottom: 0.25rem; letter-spacing: -0.045em; }
  .pyt-complex-tit h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.05em; }
  .pyt-complex-main { margin-bottom: 2rem; }
  /* 모바일: ul 을 flex column 으로 + li 는 display:contents 로 박스 효과 제거.
     순서: [정보1, 정보2, 정보3, 이미지1, 이미지2, 이미지3] = order 로 재배치. */
  .pyt-complex-cuts {
    display: flex; flex-direction: column;
    grid-template-columns: none; gap: 0;
  }
  .pyt-complex-cuts li { display: contents; }
  .pyt-complex-cuts-info {
    padding: 0; margin-bottom: 1.5rem;
  }
  .pyt-complex-cuts li:nth-child(1) .pyt-complex-cuts-info { order: 1; }
  .pyt-complex-cuts li:nth-child(2) .pyt-complex-cuts-info { order: 2; }
  .pyt-complex-cuts li:nth-child(3) .pyt-complex-cuts-info { order: 3; }
  /* 정보 3개 끝나면 이미지 시작 — 위 여백 추가 */
  .pyt-complex-cuts li:nth-child(3) .pyt-complex-cuts-info { margin-bottom: 3rem; }
  .pyt-complex-cuts li:nth-child(1) figure { order: 4; margin-bottom: 1.25rem; }
  .pyt-complex-cuts li:nth-child(2) figure { order: 5; margin-bottom: 1.25rem; }
  .pyt-complex-cuts li:nth-child(3) figure { order: 6; margin-bottom: 0; }
  .pyt-complex-cuts-info { margin-bottom: 2.5rem; }
  .pyt-complex-cuts-info h4 { font-size: 1.5rem; margin-bottom: 0.85rem; letter-spacing: -0.03em; }
  .pyt-complex-cuts-info p { font-size: 1.05rem; line-height: 1.8; letter-spacing: -0.02em; }
  /* 모바일: 이미지 16:9 가로 비율 */
  .pyt-complex-cuts img { aspect-ratio: 16 / 9; }
  .pyt-complex-cuts figcaption { font-size: 0.8125rem; padding: 0.35rem 0.75rem; }
}

/* ============================================================
   시스템 페이지 — PDF 페이지 8 우측 스마트 시스템 안내. 6박스 그리드(3×2 PC, 2×2 태블릿,
   1×6 모바일). 자주 원형 아이콘 + 시스템명 + 설명. (2026-05-21)
   ============================================================ */
.pyt-system {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 4rem;
  box-sizing: border-box;
}
.pyt-system-tit { text-align: center; margin-bottom: 3.5rem; }
.pyt-system-tit h6 {
  font-size: 1.875rem; font-weight: 300; color: #000;
  letter-spacing: -0.04em; line-height: 1.35;
  margin: 0 0 0.25rem; word-break: keep-all;
}
.pyt-system-tit h2 {
  font-size: 3rem; font-weight: 700; line-height: 1.25; color: #000;
  letter-spacing: -0.04em; margin: 0; word-break: keep-all;
}
.pyt-system-tit h2 b { font-weight: inherit; color: #000; }
/* PC/태블릿 — 한 줄, 모바일 — "보다 앞선 생활로 안내하는" / "스마트 시스템" 2줄 */
.pyt-system-tit br.mo { display: none; }
@media all and (max-width: 767px) {
  .pyt-system-tit br.mo { display: inline; }
}
.pyt-system-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem; list-style: none; padding: 0; margin: 0;
}
/* 레퍼런스 톤: 라이프스타일 이미지(상단) + 하단 좌 텍스트/우 브론즈 외곽선 작은 아이콘 */
.pyt-system-card {
  text-align: left;
  padding: 0;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.pyt-system-card:hover {
  transform: translateY(-4px);
  border-color: #d9d9d9;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
/* 이미지컷 자리 — 사용자가 라이프스타일 사진 준비 전까지 옅은 그라데이션 + 큰 흰 SVG */
.pyt-system-img {
  width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #b04565 0%, #980644 60%, #70002F 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  overflow: hidden;
}
.pyt-system-img > svg {
  width: 32%; height: 32%;
  transition: transform 0.6s ease;
}
.pyt-system-card:hover .pyt-system-img > svg { transform: scale(1.06); }
.pyt-system-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.pyt-system-card:hover .pyt-system-img img { transform: scale(1.04); }
/* "이미지컷" 워터마크 — premium/complex 페이지와 동일 톤 (우하단 작은 흰 글씨) */
.pyt-system-img::after {
  content: '이미지컷';
  position: absolute;
  right: 0.625rem;
  bottom: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}
/* 하단 좌 텍스트 / 우 작은 아이콘 */
.pyt-system-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.625rem;
}
.pyt-system-text {
  flex: 1 1 auto;
  min-width: 0;
  /* 본문 줄 수 다양해도 카드 본문 영역 높이 통일 → 우측 아이콘 위치 모두 정렬.
     제목(1.3rem) + 본문 3줄(약 4.4rem) ≈ 5.7rem */
  min-height: 5.5rem;
}
.pyt-system-text h4 {
  font-size: 1.125rem; font-weight: 700; color: #980644;
  letter-spacing: -0.05em; line-height: 1.3;
  margin: 0 0 0.625rem;
}
.pyt-system-text p {
  font-size: 0.875rem; font-weight: 400; color: #444;
  letter-spacing: -0.04em; line-height: 1.65;
  margin: 0; word-break: keep-all;
}
/* 우측 작은 외곽선 원형 아이콘 — 브론즈(#a1876f) 톤 */
.pyt-system-sub {
  width: 3rem; height: 3rem;
  border: 1.5px solid #a1876f;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #a1876f;
  flex: 0 0 3rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.pyt-system-sub svg { width: 1.375rem; height: 1.375rem; }
.pyt-system-card:hover .pyt-system-sub {
  background: #a1876f;
  color: #fff;
}

/* 반응형 */
@media all and (max-width: 1024px) {
  .pyt-system { padding-bottom: 3rem; }
  .pyt-system-tit { margin-bottom: 3rem; }
  .pyt-system-tit h6 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.25rem; }
  .pyt-system-tit h2 { font-size: 2.25rem; line-height: 1.15; }
  .pyt-system-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .pyt-system-text h4 { font-size: 1.0625rem; }
  .pyt-system-text p { font-size: 0.875rem; }
  .pyt-system-sub { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; }
  .pyt-system-sub svg { width: 1.25rem; height: 1.25rem; }
  .pyt-system-body { padding: 1.25rem 1.25rem 1.375rem; }
}
@media all and (max-width: 767px) {
  .pyt-system { padding-bottom: 2.5rem; }
  .pyt-system-tit { margin-bottom: 2.25rem; }
  .pyt-system-tit h6 { font-size: 1.4375rem; line-height: 1.2; margin-bottom: 0.25rem; letter-spacing: -0.045em; }
  .pyt-system-tit h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.05em; }
  /* 모바일 2열 — 카드 폭 좁아지므로 body 는 세로 분할 (텍스트 위 / 아이콘 하단 가운데) */
  .pyt-system-list { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .pyt-system-body {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1rem 1.125rem;
    gap: 0.75rem;
  }
  .pyt-system-text { min-height: 0; text-align: left; }
  .pyt-system-text h4 { font-size: 0.9375rem; margin-bottom: 0.4rem; letter-spacing: -0.05em; }
  .pyt-system-text p { font-size: 0.75rem; line-height: 1.55; letter-spacing: -0.045em; }
  .pyt-system-text p br { display: none; } /* 좁은 폭 → 자연 줄바꿈 */
  .pyt-system-sub {
    width: 2.25rem; height: 2.25rem;
    flex: 0 0 2.25rem;
    align-self: flex-end;
  }
  .pyt-system-sub svg { width: 1rem; height: 1rem; }
}

/* ============================================================
   커뮤니티 페이지 — 단지배치도와 동일 운율 패턴: 부제(얇게) + 헤드라인(굵게) 검정 통일 +
   메인 이미지. 이미지는 사용자 제작 — placeholder 회색박스. (2026-05-21)
   ============================================================ */
.pyt-community {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 4rem;
  box-sizing: border-box;
}
.pyt-community-tit { text-align: center; margin-bottom: 3rem; }
.pyt-community-tit h6 {
  font-size: 1.875rem;
  font-weight: 300;
  color: #000;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin: 0 0 0.25rem;
  word-break: keep-all;
}
.pyt-community-tit h2 {
  font-size: 3rem; font-weight: 700; line-height: 1.25; color: #000;
  letter-spacing: -0.04em; margin: 0; word-break: keep-all;
}
.pyt-community-main { width: 100%; }
.pyt-community-main img {
  width: 100%; height: auto; display: block;
}

/* 반응형 */
@media all and (max-width: 1024px) {
  .pyt-community { padding-bottom: 3rem; }
  .pyt-community-tit { margin-bottom: 2.5rem; }
  .pyt-community-tit h6 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.25rem; }
  .pyt-community-tit h2 { font-size: 2.25rem; line-height: 1.15; }
}
@media all and (max-width: 767px) {
  .pyt-community { padding-bottom: 2.5rem; }
  .pyt-community-tit { margin-bottom: 2.25rem; }
  .pyt-community-tit h6 { font-size: 1.4375rem; line-height: 1.2; margin-bottom: 0.25rem; letter-spacing: -0.045em; }
  .pyt-community-tit h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.05em; }
}

/* ============================================================
   입지환경 페이지 — 텍스트 블록 + 지도 이미지. (2026-05-20)
   텍스트는 HTML(자주/검정 원본 색 유지), 지도만 이미지로. .sub_ori 와 동일 폭(1100).
   ============================================================ */
.pyt-location {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 4rem; /* 하단만 — .sub_ori 와의 간격 확보 (좌우/상단은 부모가 잡음) */
  box-sizing: border-box;
}
.pyt-location-tit {
  text-align: center;
  margin-bottom: 3.5rem;
}
.pyt-location-tit h6 {
  font-size: 1.875rem;
  font-weight: 300;
  color: #000;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin: 0 0 0.25rem;
  word-break: keep-all;
}
.pyt-location-tit h6 b { font-weight: inherit; color: #000; }
.pyt-location-tit h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
  letter-spacing: -0.04em;
  margin: 0 0 2.25rem;
  word-break: keep-all;
}
.pyt-location-tit h2 b {
  font-weight: inherit;
  color: #000;
}
.pyt-location-tit p {
  font-size: 1rem;              /* 16px — 본문 가독 */
  font-weight: 400;
  line-height: 1.85;
  color: #555;
  letter-spacing: -0.025em;
  margin: 0;
  word-break: keep-all;
}
.pyt-location-map {
  width: 100%;
  text-align: center;
}
.pyt-location-map img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* ---- 반응형 ---- */
@media all and (max-width: 1400px) {
  .pyt-location-tit h2 { font-size: 2.125rem; }
}
/* PC/태블릿에선 헤드라인 br.mo 숨김 — "브레인시티의 모든 가치가 모인 핵심자리" 한 줄 */
.pyt-location-tit br.mo { display: none; }
@media all and (max-width: 1024px) {
  .pyt-location { padding-bottom: 3rem; }
  .pyt-location-tit { margin-bottom: 3rem; }
  .pyt-location-tit h6 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.25rem; }
  .pyt-location-tit h2 { font-size: 2.625rem; line-height: 1.25; margin-bottom: 1.875rem; }
  .pyt-location-tit p { font-size: 0.9375rem; line-height: 1.8; }
}
@media all and (max-width: 767px) {
  .pyt-location { padding-bottom: 2.5rem; }
  .pyt-location-tit { margin-bottom: 2.25rem; }
  /* 운율: 작은 부제(14px) → 임팩트 헤드라인(30px, 부제의 2.14배) → 작은 본문(14px).
     부제·본문 동일 크기로 시각적 호흡을 좁히고 헤드라인이 도드라지게 */
  .pyt-location-tit h6 { font-size: 1.4375rem; line-height: 1.2; margin-bottom: 0.25rem; letter-spacing: -0.045em; }
  .pyt-location-tit h2 {
    font-size: 2.25rem; line-height: 1.3; letter-spacing: -0.045em;
    margin-bottom: 1.5rem;
  }
  .pyt-location-tit p { font-size: 0.875rem; line-height: 1.75; }
  /* 모바일에서 헤드라인 br.mo 표시 → "브레인시티의" \n "모든 가치가 모인 핵심자리" */
  .pyt-location-tit br.mo { display: inline; }
  /* 본문 <br>은 모바일에서도 유지 → 원본 location_m.jpg 와 동일한 2줄 구성 */
}

/* ============================================================
   프리미엄 페이지 — PREMIUM BIG 6 카드 그리드 (PDF 기반 평택 6개 항목 HTML 구현).
   분양 사이트 표준 패턴: 2단 그리드(PC) → 1단(모바일), 각 카드에 큰 숫자 워터마크 +
   카테고리 라벨 + 헤드라인 + 본문. hover 시 자주 보더 + 살짝 띄움. (2026-05-20)
   ============================================================ */
.pyt-premium {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 5rem; /* 좌우/상단 0 — 부모(.sub_page/#sub_box)가 여백 잡음. 하단만 .sub_ori 와 간격 */
  box-sizing: border-box;
}
.pyt-premium-tit {
  text-align: center;
  margin-bottom: 4rem;
}
.pyt-premium-tit h6 {
  font-family: 'Poppins', 'Futura PT', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: #980644;
  margin: 0 0 0.75rem;
}
.pyt-premium-tit h2 {
  font-family: 'trajan', 'Futura PT', 'copperplate', serif;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #1a1a1a;
  margin: 0;
}
.pyt-premium-tit h2 b {
  color: #980644;
  font-weight: 700;
  margin-left: 0.5rem;
}
.pyt-premium-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 카드 = PDF 디자인 톤: 경계선 없이 이미지 + 라벨 + 헤드라인 + 본문 가운데 정렬.
   hover 시 이미지만 살짝 확대 — 정적이지만 살아있는 느낌. */
.pyt-premium-card {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}
.pyt-premium-label {
  font-family: 'Poppins', 'Futura PT', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #980644;
  margin: 0 0 1rem;
}
.pyt-premium-label span {
  font-weight: 400;
  color: rgba(152, 6, 68, 0.7);
  margin-left: 0.25rem;
}
.pyt-premium-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #f5f5f5; /* 이미지 로딩 전 placeholder */
  position: relative;
}
.pyt-premium-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.pyt-premium-card:hover .pyt-premium-img img {
  transform: scale(1.05);
}
/* "이미지컷" 워터마크 — PDF 와 동일 위치(우하단) 회색 작은 텍스트 */
.pyt-premium-img::after {
  content: '이미지컷';
  position: absolute;
  right: 0.625rem;
  bottom: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ---- 등장 애니메이션 — viewport 진입 시 stagger fade-in + slide-up ---- */
.pyt-premium-card {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.pyt-premium-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.pyt-premium-card.in-view:nth-child(1) { transition-delay: 0.05s; }
.pyt-premium-card.in-view:nth-child(2) { transition-delay: 0.15s; }
.pyt-premium-card.in-view:nth-child(3) { transition-delay: 0.25s; }
.pyt-premium-card.in-view:nth-child(4) { transition-delay: 0.35s; }
.pyt-premium-card.in-view:nth-child(5) { transition-delay: 0.45s; }
.pyt-premium-card.in-view:nth-child(6) { transition-delay: 0.55s; }
/* 타이틀도 함께 등장 */
.pyt-premium-tit {
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.pyt-premium-tit.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* 운율: 헤드라인 21px/700굵게/진한검정 → 본문 14px/400/회색 — 크기 1.5배 + 굵기 + 색 대비 3중으로 위계 */
.pyt-premium-card h3 {
  font-size: 1.3125rem;          /* 21px */
  font-weight: 700;              /* 600 → 700 굵게 강조 */
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 0.875rem;
  letter-spacing: -0.045em;
  word-break: keep-all;
}
.pyt-premium-card h3 b {
  font-weight: 800;
  color: #980644;
}
.pyt-premium-card p {
  font-size: 0.875rem;           /* 14px */
  font-weight: 400;
  line-height: 1.85;             /* 호흡 ↑ — 헤드라인과 본문 시각 차별화 */
  color: #555;
  margin: 0;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

/* ---- 반응형 ---- */
@media all and (max-width: 1400px) {
  .pyt-premium-tit h2 { font-size: 3.25rem; }
  .pyt-premium-list { gap: 2.5rem 1.5rem; }
  .pyt-premium-card h3 { font-size: 1.25rem; }
}
@media all and (max-width: 1024px) {
  .pyt-premium { padding: 0.5rem 0 4rem; }
  .pyt-premium-tit { margin-bottom: 3rem; }
  .pyt-premium-tit h2 { font-size: 2.75rem; }
  .pyt-premium-list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .pyt-premium-label { font-size: 0.9375rem; margin-bottom: 0.875rem; }
  .pyt-premium-img { margin-bottom: 1.25rem; }
  .pyt-premium-card h3 { font-size: 1.25rem; }
  .pyt-premium-card p { font-size: 0.9375rem; }
}
@media all and (max-width: 767px) {
  .pyt-premium { padding: 0 0 3rem; }
  .pyt-premium-tit { margin-bottom: 2.5rem; }
  .pyt-premium-tit h6 { font-size: 0.75rem; letter-spacing: 0.2em; }
  .pyt-premium-tit h2 { font-size: 2.125rem; }
  .pyt-premium-list { grid-template-columns: 1fr; gap: 3.5rem; }
  .pyt-premium-label { font-size: 0.875rem; margin-bottom: 0.75rem; }
  .pyt-premium-img { margin-bottom: 1.125rem; aspect-ratio: 16 / 10; }
  .pyt-premium-card h3 { font-size: 1.25rem; margin-bottom: 0.875rem; line-height: 1.4; }
  .pyt-premium-card p { font-size: 0.875rem; line-height: 1.7; }
}

/* ============================================================
   서브탑 hero — 다른 현장 숲 이미지(sub_top.jpg) 제거, 평택 브랜드 메인 자주 단일
   색상 + 미세 SVG 노이즈 그레인 텍스처로 평면감 보강. (2026-05-20 사용자 결정)
   ============================================================ */
.sub_top { background: #980644 !important; }
/* theartpixel.css 의 sub_top:after (sub_top_bg.png 오버레이) 무력화 */
.sub_top:after { display: none !important; }
/* sub_top_img — 숲 이미지 자리에 SVG fractalNoise 그레인 텍스처 깔기.
   baseFrequency 0.9 = 미세 그레인. numOctaves 2 = 자연스러운 분포. opacity 0.5(SVG 내부) +
   0.18(이미지 element) 이중으로 옅게 — 자주 단색 위에 살짝 살아있는 텍스처 느낌. */
.sub_top_img {
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E") repeat !important;
  opacity: 0.18 !important;
  animation: none !important;
  mix-blend-mode: overlay;
}
/* m.css ≤767 의 sub_top_img sub_top_bg.jpg 작은 아이콘 배경 무력화(SVG 노이즈만 유지) */
@media all and (max-width: 767px) {
  .sub_top_img {
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E") repeat !important;
  }
}

/* ---- 반응형 ---- */
@media all and (max-width: 1400px) {
  .pyt-footer { padding: 4rem 0 4.5rem; }
  .pyt-footer-row { gap: 2.5rem; }
  .pyt-footer-left { gap: 2rem; }
  .pyt-footer-tel h2 { font-size: 2.25rem; }
}
/* ---- ≤1024 (그란테르 m.css 1:1 매칭): 모두 가운데 정렬, 세로 스택 ---- */
@media all and (max-width: 1024px) {
  .pyt-footer { padding: 4.625rem 0 5rem; font-size: 0.875rem; text-align: center; }
  .pyt-footer-row {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2rem;
  }
  .pyt-footer-left {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2.5rem; width: 100%; text-align: center;
  }
  .pyt-footer-left > div { width: 100%; text-align: center; }
  .pyt-footer-info ul, .pyt-footer-const ul {
    justify-content: center; flex-wrap: wrap;
  }
  .pyt-footer-right { align-items: center; gap: 1rem; width: 100%; }
  .pyt-footer-right .pyt-footer-info ul { justify-content: center; text-align: center; }
  .pyt-footer p { text-align: center; margin-top: 1.5rem; }
  .pyt-footer p br.pad { display: block; }
  /* COPYRIGHT — 그란테르 동일(가운데 + 넉넉한 위 여백).
     margin-left:0 만 두면 우측 auto 만 남아 박스가 왼쪽으로 붙음 → 양쪽 auto 로 강제 가운데 */
  .pyt-footer h6 { text-align: center; margin: 5rem auto 0; }
  .pyt-footer .top_bt { right: 5%; bottom: 2.5rem; }
}
/* ---- ≤767 (그란테르 pad.css 매칭): 더 컴팩트 + 구분선 제거 + ul 세로 스택 ---- */
@media all and (max-width: 767px) {
  .pyt-footer { padding: 5rem 0 5rem; font-size: 0.875rem; }
  .pyt-footer-row { width: 90%; gap: 2rem; }
  .pyt-footer-left { gap: 1.5rem; align-items: center; }
  .pyt-footer-const { flex-wrap: wrap; gap: 0.45rem 0; }
  .pyt-footer-const ul { flex-wrap: wrap; gap: 0 0.125rem; }
  .pyt-footer-const ul li { font-size: 1rem; }
  .pyt-footer-const ul li span { font-size: 0.875rem; }
  .pyt-footer-const ul li.space { margin-right: 0.75rem; }
  .pyt-footer-info { flex-wrap: wrap; gap: 0.25rem 0; }
  .pyt-footer-info ul { flex-direction: column; gap: 0.75rem; }
  .pyt-footer-info li { padding: 0 !important; }
  .pyt-footer-info li::after { display: none !important; }
  /* 사업지 주소처럼 긴 텍스트는 단어 단위로 줄바꿈(어절 중간 깨짐 방지) */
  .pyt-footer-info li b { font-size: 0.9375rem; word-break: keep-all; line-height: 1.45; }
  .pyt-footer-info li > div { justify-content: center; text-align: center; }
  .pyt-footer-tel h2 { font-size: 2rem; }
  /* 안내문: br.pad만 숨기고 일반 <br>과 br.mo 는 그대로 살림 → ※ 문장 분리 보장 */
  .pyt-footer p { margin-top: 1.25rem; line-height: 1.7; word-break: keep-all; }
  .pyt-footer p br.pad { display: none; }
  .pyt-footer h6 { font-size: 0.875rem; margin-top: 4rem; line-height: 148%; }
  .pyt-footer h6 br.mo { display: inline; }
  /* ^ 탑버튼 — 모바일에서 숨김 (사용자 요청, 2026-05-20). 데스크탑은 그대로 유지. */
  .pyt-footer .top_bt { display: none !important; }
  .pyt-footer .top_bt {
    position: absolute; left: 50%; top: -1.5rem; right: auto; bottom: auto;
    transform: translateX(-50%);
  }
}

/* ============================================================
   그란테르식 menu 버튼 (.ham.sitemap-open-btn) — header 밖 free-floating <div>.
   JS(Layout.astro inline)가 click 시 .ham.active.over + .navi.over +
   .site_wrap.active + .site_bg.active 동시 토글 — 그란테르 min.js:239 동일 패턴.
   menu.css 가 이미 그란테르 원본 룰(.ham/.ham.active/.ham.over) 그대로 보유하므로
   여기서는 평택 강제 표시 + 헤더 색상/GNB 페이드 보강만. (2026-05-20 리팩토링)
   ============================================================ */
/* 그란테르 .ham 기본 display:none 무력화 — 항상 보이게 */
.ham.sitemap-open-btn { display: flex !important; }

/* ============================================================
   메뉴 열림 (.navi.over) — 헤더 콘텐츠 흰색 전환.
   menu.css 의 .navi.over #logo / .tel_wrap / .reserve 룰이 그대로 작동.
   여기서는 평택 추가 보정만 (PNG 경로/색상).
   ============================================================ */
.navi.over .top_fixed_wrap .tel_wrap a p { color: #fff !important; }
.navi.over .top_fixed_wrap .tel_wrap .tel a div {
  background: url(../img/common/tel2.png) center no-repeat !important;
  background-size: 1.125rem !important;
}
.navi.over .top_fixed_wrap .reserve p { color: #fff !important; }
.navi.over .top_fixed_wrap .reserve:after {
  border: 1px solid #fff !important; background: none !important;
}
.navi.over .top_fixed_wrap .reserve .call:after {
  border-bottom: 1px solid #fff !important; border-right: 1px solid #fff !important;
}
@media all and (max-width: 767px) {
  .navi.over .top_fixed_wrap .tel_wrap .tel { border: 1px solid #fff !important; }
}

/* 메뉴 열림 시 가로 GNB 페이드 아웃 (그란테르 동일).
   PC(>1400)에선 평소 GNB 가 보이고, menu.css 가 ≤1400 에서 이미 .gnb { display:none }
   처리. 메뉴 열림 시 PC 에서도 GNB 페이드 아웃 시킴 — .navi.over .gnb 매칭. */
.navi.over .gnb {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0s 0.3s !important;
}

/* ============================================================
   사이트맵 — JS 가 .site_wrap/.site_bg 에 .active 직접 부여(그란테르 원본 방식).
   menu.css 의 .site_wrap.active / .site_list>li 트랜지션 룰이 그대로 작동.
   ============================================================ */
.site_wrap { pointer-events: none !important; }
.site_bg   { pointer-events: none !important; }
.site_wrap.active { pointer-events: auto !important; z-index: 9999 !important; }
.site_bg.active   { pointer-events: auto !important; z-index: 9998 !important; }
/* ↑ .pyt-footer { z-index: 999 } (vista-overrides:161) 가 menu.css 의 site_wrap.active
   z-index 990 보다 높아서 모바일 푸터가 사이트맵을 가리던 버그 수정. 헤더는 z-index
   9999999 라 여전히 사이트맵 위에 보이고, 푸터만 사이트맵 아래로 밀려남. */
/* 사이트맵 배경 펼침 — 자주 #980644 보다 어두운 톤(#70002F) */
.site_map:after { background-color: #70002F !important; }
/* 사이트맵 서브메뉴 hover 색상만 — 자주 배경 위라 자주 #980644 안 보임 → 브라운 #a1876f */
.site_wrap .site_list2 > li > a:hover { color: #a1876f !important; }

/* ---- iframe(VR/e모델하우스/세대영상) 고정높이 → 뷰포트 비율 ---- */
.sub_img_wrap iframe, .tabcontents iframe { display: block; width: 100% !important; }
@media all and (max-width: 1400px) {
  .sub_img_wrap iframe, .tabcontents iframe { height: 70vh !important; }
}
@media all and (max-width: 767px) {
  .sub_img_wrap iframe, .tabcontents iframe { height: 56vh !important; min-height: 320px; }
  #t-container2 .tabs2 { display: flex !important; width: 100% !important; }
  #t-container2 .tabs2 li { flex: 1 1 0 !important; text-align: center !important; }
}

/* ===========================================================================
   모바일/태블릿 전용 SUMMARY (.pyt-sum-wrap) — 더샵 송도그란테르 sum_wrap 차용
   PC는 display:none (영향 X), ≤1024 에서만 표시. 메인 히어로(#section1) 다음 위치.
   레퍼런스: 더샵송도그란테르.kr/gran/css/theartpixel.css:527+ + m.css/pad.css
   =========================================================================== */
.pyt-sum-wrap { display: none; }
@media (max-width: 1024px) {
  .pyt-sum-wrap {
    display: block;
    position: relative;
    width: 100%;
    padding: 5rem 6vw 6rem;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    background: #1a1a1a;
  }
  .pyt-sum-bg {
    position: absolute; inset: 0;
    background: url(/img/main_m.jpg) center/cover no-repeat;
    z-index: 0;
  }
  .pyt-sum-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.72);
  }
  .pyt-sum-box { position: relative; z-index: 1; }
  .pyt-sum-box > div { width: 100%; max-width: 800px; margin: 0 auto; }
  /* 영문 헤딩 + 한글 부제 — UNIT PLAN(.unit_bg_tit) 스펙과 통일 */
  .pyt-sum-txt-box { text-align: center; color: #fff; }
  .pyt-sum-txt-box h2 {
    font-family: 'trajan', 'Futura PT', 'copperplate', serif;
    font-size: 4.25rem;
    line-height: 100%;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
  }
  .pyt-sum-txt-box h5 {
    font-size: 1rem;
    margin-top: 0.625rem;
    line-height: 100%;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
  }
  /* 항목 리스트 — 그란테르 sum_list 룰 차용 */
  .pyt-sum-sum { margin-top: 3.5rem; }
  .pyt-sum-list {
    display: flex; flex-wrap: wrap;
    gap: 2rem 1.5rem;
    list-style: none;
    padding: 0; margin: 0;
    justify-content: flex-start;
  }
  .pyt-sum-list li { width: 100%; text-align: left; }
  .pyt-sum-list li h3 {
    font-size: 1.125rem;
    line-height: 100%;
    color: #fff;
    font-weight: 600;
    margin: 0;
  }
  .pyt-sum-list li p {
    font-size: 0.95rem;
    line-height: 128%;
    color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(255,255,255,0.4);
    margin: 0.875rem 0 0 0;
    padding-top: 1.25rem;
    font-weight: 300;
  }
}
/* 태블릿 (768~1024) — 그란테르 m.css 참조, 2칸 */
@media (min-width: 768px) and (max-width: 1024px) {
  .pyt-sum-wrap { padding: 6rem 8vw 7rem; }
  .pyt-sum-txt-box h2 { font-size: 5rem; }
  .pyt-sum-txt-box h5 { font-size: 1.125rem; margin-top: 0.875rem; }
  .pyt-sum-sum { margin-top: 4rem; }
  .pyt-sum-list { gap: 2.5rem 2rem; }
  .pyt-sum-list li { width: calc(50% - 1rem); }
  .pyt-sum-list li h3 { font-size: 1.25rem; }
  .pyt-sum-list li p { font-size: 1rem; }
}

/* 등장 애니메이션 — 그란테르 .sum_wrap.on 동일 동작 (viewport 진입 시 .pyt-sum-in 부착) */
@media (max-width: 1024px) {
  /* 초기 상태 */
  .pyt-sum-wrap .pyt-sum-bg { transform: scale(1.18); }
  .pyt-sum-wrap .pyt-sum-txt-box { opacity: 0; transform: translateY(-2rem); }
  .pyt-sum-wrap .pyt-sum-sum { opacity: 0; transform: translateY(2.5rem); }
  /* 활성화 시 (viewport 진입) */
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-bg {
    transform: scale(1);
    transition: transform 2.5s ease-out;
  }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-txt-box {
    opacity: 1; transform: translateY(0);
    transition: opacity 1.2s 0.4s ease, transform 1.2s 0.4s ease;
  }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-sum {
    opacity: 1; transform: translateY(0);
    transition: opacity 1.2s 0.8s ease, transform 1.2s 0.8s ease;
  }
  /* 항목 li 순차 등장 */
  .pyt-sum-wrap .pyt-sum-list li { opacity: 0; transform: translateY(1.5rem); }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(1) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.0s ease, transform 0.9s 1.0s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(2) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.1s ease, transform 0.9s 1.1s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(3) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.2s ease, transform 0.9s 1.2s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(4) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.3s ease, transform 0.9s 1.3s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(5) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.4s ease, transform 0.9s 1.4s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(6) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.5s ease, transform 0.9s 1.5s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(7) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.6s ease, transform 0.9s 1.6s ease; }
  .pyt-sum-wrap.pyt-sum-in .pyt-sum-list li:nth-child(8) { opacity: 1; transform: translateY(0); transition: opacity 0.9s 1.7s ease, transform 0.9s 1.7s ease; }
}

/* ---- 메인 section2 입지: PC/모바일 듀얼 DOM 토글 + 더파크 m/ theartpixel.css 그대로 이식
   PC .location_wrap = >1024 (기존 가로 슬라이드 디자인)
   더파크 m/ .sec_location (인덱스 partial에 통째 추가됨, 평택 텍스트만 치환) = ≤1024
   m/ CSS 룰은 .sec_location 스코프에 한정해 .sec_location {...} 식으로 박음.
   .active 는 인라인 IntersectionObserver 가 viewport 진입 시 동적 부착(등장효과). */
.sec_location.pyt-m-only { display: none; }

@media all and (max-width: 1024px) {
  /* 토글 */
  .location_wrap { display: none !important; }
  .sec_location.pyt-m-only { display: block !important; }

  /* === m/ theartpixel.css .sec_location 통째 이식 — 수치 1:1 동일 ===
     text-align:left 명시 — PC base의 .section{text-align:center} 상속 차단.
     height: auto + min-height 508vw — 컨텐츠 합산이 더 크면 자동 확장(padding-bottom 영역 침범 방지) */
  .sec_location { width: 100%; height: auto; min-height: 508vw; position: relative; overflow: hidden; color: #000; text-align: left; }
  .sec_location .location_bg.bg01 { width: 100%; height: 100%; background: url(/img/location_bg.jpg) left top no-repeat; background-size: cover; position: absolute; top: 0; }
  /* box-sizing border-box 강제 + 폭/패딩 환산 (m/ content-box 동작과 시각적으로 동일):
     m/ content-box width:100% + padding 6vw 외부 = viewport+12vw 박스가 사실상 viewport에 잘림.
     우리는 border-box로 두고 viewport 안에 padding 포함된 viewport 폭 박스. 자식이 viewport 안에 들어감.
     대신 absolute 자식의 right/left 기준은 .loca_box(폭 viewport-12vw) 안이라 viewport 외 침범 방지. */
  .sec_location .location_con { width: 100%; height: auto; padding: 21vw 6vw; position: relative; z-index: 2; box-sizing: border-box; }
  .sec_location .loca_box { width: 100%; position: relative; }
  .sec_location .loca_box.box03 { margin-top: 72vw; }
  .sec_location .loca_box.box04 { position: relative; }

  /* 이미지: 원형 마스크 + PC 평택 jpg (사용자 의도) — 1:1 크롭 */
  .sec_location .loca_img01, .sec_location .loca_img02, .sec_location .loca_img04 { overflow: hidden; border-radius: 50%; aspect-ratio: 1 / 1; }
  .sec_location .loca_img01 img, .sec_location .loca_img02 img, .sec_location .loca_img04 img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* 등장효과 초기 상태 — m/ 원본 그대로 (opacity:0, transform translateX(±3rem)) */
  .sec_location .loca_img01 { max-width: 65vw; transform: translateX(-3rem); opacity: 0; }
  .sec_location .loca_img02 { max-width: 48.3vw; position: absolute; right: 0; top: 59vw; z-index: -1; transform: translateX(3rem); opacity: 0; }
  /* box04 이미지: 자연흐름 + 우측 정렬. m/처럼 텍스트박스 상단(.line)과 어느 정도 겹치도록 margin-top 음수 */
  .sec_location .loca_img04 { width: 48.3vw; max-width: 48.3vw; position: relative; margin: -7vw 0 0 auto; transform: translateX(3rem); opacity: 0; box-sizing: border-box; z-index: -1; }

  .sec_location .loca_tit.tit01 { position: absolute; top: 9vw; right: 12.5vw; transform: translateX(3rem); opacity: 0; }
  .sec_location .loca_tit.tit02 { position: relative; margin-top: 25vw; transform: translateX(3rem); opacity: 0; }
  .sec_location .loca_tit h5 { font-family: 'trajan', serif; font-size: 4vw; font-weight: 400; line-height: 100%; position: absolute; right: 0; color: #000; margin: 0; padding: 0; }
  .sec_location .loca_tit h5 span { display: block; font-size: 8vw; font-weight: 700; margin: 3vw 0 0 8vw; }
  .sec_location .loca_tit.tit02 h5 { font-size: 3.5vw; }
  .sec_location .loca_tit.tit02 h5 span { font-size: 7vw; }

  .sec_location .loca_txt_box { position: relative; display: flex; justify-content: flex-end; }
  .sec_location .loca_txt_box.box02 { padding-top: 29vw; justify-content: flex-start; }
  .sec_location .loca_txt_box.box01 .line { top: 0; margin: -6vw 3.8vw 0 0; }
  .sec_location .loca_txt_box.box02 .line { top: 0; margin: 1vw 0 0 3.8vw; }
  /* box03 .line: 사용자 의도 — 선이 이미지 위로 올라와 겹치게 (margin-top 음수 + z-index) */
  .sec_location .loca_txt_box.box03 .line { top: 0; margin: -10vw 3.8vw 0 0; position: relative; z-index: 5; }
  .sec_location .loca_txt_box .line { width: 1px; background-color: #8c8c8c; display: block; height: 0; opacity: 0; }
  .sec_location .loca_txt.txt01 { margin-top: 8.5vw; }
  .sec_location .loca_txt.txt02 { text-align: right; }
  .sec_location .loca_txt.txt03 { margin-top: 11.5vw; }
  .sec_location .loca_txt { transform: translateY(3rem); opacity: 0; }
  .sec_location .loca_txt h4 { font-size: 3.5vw; font-weight: 700; line-height: 1.5; color: #000; margin: 0; padding: 0; }
  .sec_location .loca_txt p { font-size: 2.8vw; color: rgba(0,0,0,0.7); margin-top: 4vw; line-height: 160%; font-weight: 400; padding: 0; }
  .sec_location .loca_txt_box h2 { font-size: 6vw; font-weight: 700; position: absolute; line-height: 1.2; margin: 0; color: #000; }
  .sec_location .loca_txt_box.box01 h2, .sec_location .loca_txt_box.box03 h2 { right: 0; top: -2vw; left: auto; transform: translateX(3rem); opacity: 0; }
  .sec_location .loca_txt_box.box02 h2 { left: 0; top: 14vw; right: auto; transform: translateX(-3rem); opacity: 0; }
  .sec_location .loca_txt_box h2 span { color: #901549; }

  /* === .active 룰 — m/ theartpixel.css 412-436 그대로 === */
  .sec_location .loca_box.box01.active .loca_img01 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box01.active .loca_tit.tit01 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box01.active .loca_txt_box.box01 h2 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box01.active .line { opacity: 1; height: 36vw; transition: 1.5s 0.6s; }
  .sec_location .loca_box.box01.active .loca_txt { opacity: 1; transform: translate(0); transition: 1.5s 0.6s; }

  .sec_location .loca_box.box03.active .loca_img01 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box03.active .loca_tit.tit01 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box03.active .loca_txt_box.box03 h2 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box03.active .line { opacity: 1; height: 43vw; transition: 1.5s 0.6s; }
  .sec_location .loca_box.box03.active .loca_txt { opacity: 1; transform: translate(0); transition: 1.5s 0.6s; }

  .sec_location .loca_box.box02.active .loca_tit.tit02 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box02.active .loca_img02 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box02.active .loca_txt_box h2 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box02.active .line { opacity: 1; height: 35vw; transition: 1.5s 0.4s; }
  .sec_location .loca_box.box02.active .loca_txt { opacity: 1; transform: translate(0); transition: 1.5s 0.6s; }

  .sec_location .loca_box.box04.active .loca_tit.tit02 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box04.active .loca_img04 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box04.active .loca_txt_box h2 { opacity: 1; transform: translate(0); transition: 1.5s 0.4s; }
  .sec_location .loca_box.box04.active .line { opacity: 1; height: 35vw; transition: 1.5s 0.4s; }
  .sec_location .loca_box.box04.active .loca_txt { opacity: 1; transform: translate(0); transition: 1.5s 0.6s; }
}

/* ---- 메인 section3 공원(.park_wrap): absolute 3블록 중첩 → 세로 ---- */
@media all and (max-width: 1024px) {
  .park_wrap { height: auto !important; padding: 5rem 0 !important; }
  .park_wrap > div:last-child { width: 90% !important; height: auto !important; flex-wrap: wrap !important; flex-direction: column; margin: 0 auto; }
  .park_tit { margin: 0 !important; }
  .park_tit h3 { font-size: 2rem !important; max-width: none !important; }
  .park_content.con01 { margin-left: 0 !important; }
  .park_content.con02, .park_content.con03 { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin-top: 2.5rem !important; }
  .park_content { opacity: 1 !important; transform: none !important; }
  .park_content h2 { font-size: 1.4rem !important; }
  .ori { position: relative !important; width: 90% !important; left: auto !important; bottom: auto !important; margin: 2rem auto 0 !important; font-size: .7rem !important; }
  .ori h6 { width: auto !important; }
  .park_bg_box { display: none !important; }
}

/* ---- 메인 section4 외관(.out_wrap) 모바일 ---- */
@media all and (max-width: 1024px) {
  .out_wrap { height: auto !important; padding: 6rem 0 !important; }
  .out_wrap > div:last-child { width: 90% !important; height: auto !important; align-items: flex-start !important; margin: 0 auto; }
  .out_tit_box { text-align: left !important; opacity: 1 !important; transform: none !important; }
  .out_tit_box h2 { font-size: 2.4rem !important; text-align: left !important; margin-right: 0 !important; }
  .out_txt_box { margin-top: 3rem !important; opacity: 1 !important; transform: none !important; }
  .out_txt_box h2 { font-size: 1.7rem !important; }
  .out_txt_box p { font-size: .85rem !important; margin-top: 1.5rem !important; }
}

/* ============ 메인 원형 회전 배지 (우상단 분양가 상한제 / 좌하단 GRAND OPEN 세트) ============ */
.by_bn {
  width: 10rem;
  height: 10rem;
  position: absolute;
  right: 4rem;
  top: 8rem;
  z-index: 99;
  display: flex !important;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: none;
}
.by_bn_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(/img/common/main_reg_ctxt.png) center no-repeat;
  background-size: cover;
  animation: by_bn_spin 38s 0s linear infinite;
}
@keyframes by_bn_spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.by_bn_txt {
  width: 7.5rem;
  height: 7.5rem;
  background: #980545;
  border: 3px solid #fff;
  border-radius: 100%;
  line-height: 1.25;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}
.by_bn_txt h4 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.by_bn_txt h4 b { font-weight: 800; }

/* 좌하단 GRAND OPEN 배지 — 위치만 좌하단, 자주색 원형 채움(배경/테두리) 없이 회전 링 + 텍스트만 */
.by_bn.go {
  right: auto;
  top: auto;
  left: 4rem;
  bottom: 6rem;
}
.by_bn.go .by_bn_txt {
  background: none;
  border: none;
}
.by_bn.go .by_bn_txt h4 {
  font-size: 1.5rem;
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.45);
}

/* 태블릿/모바일 — 두 배지가 본문을 가리지 않도록 축소.
   #section1 height:auto(메인+SUMMARY 합산) 라서 bottom 기준은 SUMMARY 끝에 깔림 → top 으로 메인 히어로(100vh) 안에 고정 */
@media all and (max-width: 1024px) {
  .by_bn { width: 7.5rem; height: 7.5rem; right: 1.5rem; top: 6rem; }
  .by_bn_txt { width: 5.6rem; height: 5.6rem; }
  .by_bn_txt h4 { font-size: 0.72rem; }
  .by_bn.go { left: 1.5rem; bottom: auto; top: calc(100vh - 14rem); }
  .by_bn.go .by_bn_txt h4 { font-size: 1.05rem; }
}

/* ============ 메인 히어로 텍스트 위치 — 기본(-17%)보다 더 위로 ============ */
.main_txt_box { transform: translateY(-22%) !important; }
/* PC 로고 크기 — 자연 크기 너무 큼, 명시적 축소 */
.main_txt_box img { max-width: 220px !important; max-height: 55px !important; height: auto !important; width: auto !important; }
/* 태블릿(768~1024): 고덕수자인 참고 — 큰 슬로건 임팩트 + 등장 애니메이션 */
@media (min-width: 768px) and (max-width: 1024px) {
  .main_txt_box { transform: translateY(-22%) !important; }
  .main_txt_box > div { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  /* PC와 동일 fade-in + slide-up 등장(페이지 로드 자동) */
  .main_txt_box h2 { font-size: 4.2rem !important; line-height: 1.2 !important; font-weight: 700 !important; animation: pytMainFade 1.5s 0.3s both !important; }
  .main_txt_box h2 span { animation: none !important; }
  .main_txt_box h2 span:before { width: 12px !important; height: 12px !important; top: -1rem !important; }
  .main_txt_box p { font-size: 1.15rem !important; line-height: 1.6 !important; margin-top: 1.5rem !important; word-break: keep-all; padding: 0 2.5rem; animation: pytMainFade 1.5s 0.7s both !important; }
  .main_txt_box img { max-width: 160px !important; max-height: 45px !important; margin-top: 2rem !important; height: auto !important; width: auto !important; animation: pytMainFade 1.5s 1.0s both !important; }
}
/* 모바일(≤767): 분양가 상한제 배지만 숨김 (GRAND OPEN(.by_bn.go)은 유지) */
@media (max-width: 767px) {
  .by_bn:not(.go) { display: none !important; }
}
/* 모바일(≤767): 슬로건 + 등장 애니메이션 */
@media (max-width: 767px) {
  .main_txt_box { transform: translateY(-22%) !important; }
  .main_txt_box > div { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  /* 슬로건: 한 줄 유지하면서 크기 조정 — clamp + nowrap + 좁은 자간 */
  .main_txt_box h2 { font-size: 3.0rem !important; line-height: 1.25 !important; font-weight: 300 !important; white-space: nowrap; padding: 0 !important; letter-spacing: -0.04em !important; animation: pytMainFade 1.5s 0.3s both !important; }
  .main_txt_box h2 span { font-weight: 700 !important; animation: none !important; }
  .main_txt_box h2 span:before { width: 6px !important; height: 6px !important; top: -0.5rem !important; }
  /* 부제: 작게 + 위 간격 좁힘(1.3rem) */
  .main_txt_box p { font-size: 0.9rem !important; line-height: 1.65 !important; margin-top: 1.3rem !important; word-break: keep-all; padding: 0 2rem; animation: pytMainFade 1.5s 0.7s both !important; }
  /* 로고: 위 간격 넉넉히 */
  .main_txt_box img { max-width: 38% !important; max-height: 32px !important; margin-top: 2.5rem !important; height: auto !important; width: auto !important; animation: pytMainFade 1.5s 1.0s both !important; }
}

/* 메인 히어로 텍스트 등장 애니메이션 (≤1024 자동 재생) */
@keyframes pytMainFade {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* 메인 배경 이미지 — 고덕수자인 원본 동일: 페이지 로드 시 scale(1.2)→scale(1) 한 번 줌아웃
   레퍼런스: 고덕국제신도시수자인풍경채/css/theartpixel.css:453+610
     .main_img { transform: scale(1.2); transition: 1.5s; }
     .main_wrap.on .main_img { transform: scale(1); transition: 3.5s 0s; } */
@media (max-width: 1024px) {
  .main_img_box .main_img.img01 {
    animation: pytMainZoomOut 3.5s 0.2s ease-out both !important;
    transform-origin: center center;
  }
}
@keyframes pytMainZoomOut {
  from { transform: scale(1.2); }
  to   { transform: scale(1); }
}

/* ============ 메인 섹션 배경이미지 — 바탕화면 main 이미지로 교체 ============ */
.main_img_box .main_img.img01 {
  background-image: url(/img/main.jpg) !important;
}
/* 모바일(≤767)만 세로 비율 main_m.jpg 사용. 태블릿(768~1024)은 PC main.jpg 그대로 */
@media (max-width: 767px) {
  .main_img_box .main_img.img01 {
    background-image: url(/img/main_m.jpg) !important;
  }
}
/* 메인 텍스트 뒤 흰색 오버레이(main_bg2.png) — PC도 살짝 투명하게 */
.main_img_box .main_img.img01::before { opacity: 0.55 !important; }
@media all and (max-width: 1024px) {
  /* 태블릿/모바일은 더 투명하게 */
  .main_img_box .main_img.img01::before { opacity: 0.4 !important; }
}

/* ---- SUMMARY 제목 옆 장식선: 글자 폭에 비례(-50%)해 겹치던 것 → 글자 오른쪽 고정 간격 ---- */
.main_sum > div > h1::after {
  right: auto !important;
  left: 100% !important;
  margin-left: 2.5rem !important;
}

/* ---- 입지 패널: EXCELLENT/타이틀이 어두운 이미지 위에서 안 보이는 문제 →
        이미지 상단에 흰 페이드(꽃잎 마스크 안쪽으로만 클립) ---- */
.location_img { position: relative; }
.location_img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.78) 35%,
    rgba(255,255,255,0.35) 70%,
    rgba(255,255,255,0) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   추가 메인 섹션 — 평면 안내(#section3) / 관심고객 CTA(#section4)
   레퍼런스(수자인 UNIT PLAN / 그란테르 REGISTER) 차용, 자체완결.
   fullpage verticalCentered:true 로 .section 내용은 세로 중앙정렬됨.
   ============================================================ */

/* ---- 평면 안내 — trivn-seosan UNIT PLAN 1:1 이식 (theartpixel.css 원본) ---- */
.unit_wrap { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; transition: 1.6s; }
.unit_bg_box { width: 32%; height: calc(100% - 9.0625rem); position: relative; background-color: #000; }
.unit_bg { width: 100%; height: 100%; position: relative; overflow: hidden; opacity: 0.7; }
.unit_bg::after { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: url(/img/unit_bg.jpg) center no-repeat; background-size: cover; z-index: 1; transform: scale(1.2); }
.unit_bg_tit { position: absolute; right: 2.875rem; top: 4rem; z-index: 9; color: #fff; text-align: left; opacity: 0; transform: translateY(3rem); }
.unit_bg_tit > span { position: absolute; left: 0; top: 0; transform: rotate(90deg); transform-origin: left top; display: inline-block; white-space: nowrap; }
.unit_bg_tit h2 { font-family: 'trajan', 'Futura PT', sans-serif; font-size: 5.25rem; line-height: 100%; text-transform: uppercase; font-weight: 700; margin-left: -0.25rem; }
.unit_bg_tit p { font-size: 0.9375rem; line-height: 100%; margin-top: 0.625rem; }
.unit_bt { display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 6.25rem; bottom: 4.25rem; gap: 0.5rem; z-index: 9; opacity: 0; transform: translateY(-3rem); }
.unit_bt a { width: 5.5rem; height: 5.5rem; display: flex; justify-content: center; align-items: center; border: 1px solid #fff; color: #fff; }
.unit_bt a span { font-size: 0.8125rem; line-height: 100%; }
.unit_bt a:first-child { background-color: #fff; color: #000; font-weight: 500; }
.unit_box { width: 68%; height: calc(100% - 9.0625rem); position: relative; display: flex; justify-content: center; align-items: center; }
.unit_box > div { width: 90%; max-width: 1060px; }
.unit_tit { text-align: left; }
.unit_tit .dot_box { display: flex; justify-content: flex-start; flex-direction: row; gap: 0.625rem; }
.unit_tit .dot_box span { width: 8px; height: 8px; border-radius: 50%; background: #980644; display: inline-block; opacity: 0; transition: 0s; }
.unit_tit h2 { font-size: 2.125rem; line-height: 100%; font-weight: 300; color: #980644; margin-top: 1.625rem; opacity: 0; transform: translateX(5rem); }
.unit_tit h2 b { font-weight: 700; }
.unit_tit p { font-size: 0.875rem; line-height: 100%; margin-top: 1rem; font-weight: 500; opacity: 0; transform: translateX(5rem); }
.unit_iso_box { width: 100%; max-width: 900px; margin: auto; }
.swiper_unit { width: 100%; margin: 0; padding: 0; opacity: 0; }
.unit_img { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3rem; }
.unit_img > div { width: 37.1875rem; height: 23.6875rem; display: flex; justify-content: center; align-items: center; }
.unit_img img { opacity: 0; transition: 0.8s; }
.unit_img h2 { width: 11.75rem; height: 3.125rem; font-size: 1rem; line-height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 5rem; box-sizing: border-box; background: #b3b8c6; color: #fff; }
.unit_content.con01 .unit_img img { width: 32.125rem; }
.unit_content.con02 .unit_img img { width: 32rem; }
.unit_content.con03 .unit_img img { width: 32.6875rem; }
.unit_content.con04 .unit_img img { width: 32.5rem; }
.unit_content.con05 .unit_img img { width: 37.1875rem; }
/* 평면 이미지: 박스(가로형) 안에 비율 유지로 꽉 맞춤 — 세로 긴 평면(84B 등) 잘림 방지 */
.unit_content .unit_img > div { overflow: hidden; }
.unit_content .unit_img img {
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain; }
.unit_content { display: flex; justify-content: space-between; align-items: center; gap: 4.5rem; }
.unit_txt_box { width: 12rem; min-width: 12rem; opacity: 0; transition: 0.8s; color: #980644; }
.unit_txt_box h1 { font-size: 3rem; line-height: 100%; letter-spacing: 0; text-align: left; }
.unit_txt_box h1 b { font-family: 'trajan', 'Futura PT', sans-serif; font-size: 3.875rem; font-weight: 700; letter-spacing: 0.0625rem; margin-right: 0.125rem; }
.unit_txt_box h1 span { font-size: 2.1875rem; }
.unit_txt_box ul { width: 100%; border-top: 2px solid #980644; }
.unit_txt_box ul li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #b3b8c6; box-sizing: border-box; }
.unit_txt_box h4 { font-size: 0.8125rem; line-height: 100%; font-weight: 500; }
.unit_txt_box h5 { font-size: 0.8125rem; line-height: 100%; font-weight: 500; }
.unit_txt_box h3 { font-size: 0.9375rem; line-height: 100%; margin-top: 0.875rem; font-weight: 500; }
.swiper_unit .swiper-slide-active .unit_img img { opacity: 1; }
.swiper_unit .swiper-slide-active .unit_txt_box { opacity: 1; }
.swiper_unit2 { width: 35.5rem; margin-top: 3.125rem; opacity: 0; }
.swiper_unit2 .swiper-wrapper { display: flex; justify-content: center; align-items: center; }
.swiper_unit2 .swiper-slide { width: 100%; height: 2.5rem; display: flex; justify-content: center; align-items: center; border-bottom: 3px solid #980644; opacity: 0.3; cursor: pointer; }
.swiper_unit2 .swiper-slide span { font-size: 1rem; line-height: 100%; color: #980644; }
.swiper_unit2 .swiper-slide-thumb-active { opacity: 1; }
/* UNIT 진입 리빌(트리븐 theartpixel.css 1:1) — .unit_wrap.on 트리거 */
.unit_wrap.on .unit_tit .dot_box span:nth-child(1) { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .unit_tit .dot_box span:nth-child(2) { opacity: 1; transform: translate(0); transition: 1.2s 0.9s; }
.unit_wrap.on .unit_tit .dot_box span:nth-child(3) { opacity: 1; transform: translate(0); transition: 1.2s 1.2s; }
.unit_wrap.on .unit_bg::after { transform: scale(1); transition: 2s 0s; }
.unit_wrap.on .unit_bg_tit { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .unit_bt { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .unit_tit h2 { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .unit_tit p { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .swiper_unit { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.unit_wrap.on .swiper_unit2 { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
/* ≤1024 (태블릿/모바일): fullpage 미동작 → 인라인 IO 가 #section3 진입 시
   .unit_wrap.on 을 직접 부여. PC와 동일한 .on 룰(696~705) 그대로 재생.
   이전엔 여기서 opacity:1 !important 로 강제 노출했지만, 사용자 요청으로 등장 애니
   효과를 살림. .unit_bg 는 ≤1400 에서 display:none 이라 별도 처리 불필요. */

/* ---- 관심고객 등록 (더샵 송도그란테르 REGISTER 레이아웃: 다크 풀스크린 +
   대형 REGISTER + 서브문구 + 가운데 보더 박스 → 박스 안에 등록폼) ---- */
.pyt_cta { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(10,10,10,0.82), rgba(10,10,10,0.82)), url(/img/contact_bg.jpg) center / cover no-repeat;
  color: #fff; box-sizing: border-box; padding: 6rem 0; }
.pyt_reg { width: 90%; max-width: 540px; margin: 0 auto; text-align: center; }
.pyt_reg h2 { font-family: 'trajan', serif; font-size: clamp(2.75rem, 6vw, 5.25rem); font-weight: 600; letter-spacing: 0.08em; color: #fff; line-height: 1; }
.pyt_reg_sub { margin-top: 1.5rem; font-size: 0.95rem; line-height: 1.95; color: rgba(255,255,255,0.6); font-weight: 300; }
/* 가운데 보더 박스(레퍼런스 QR 자리) — 안에 등록폼 */
.pyt_reg_box { margin: 2.75rem auto 0; max-width: 420px; border: 1px solid rgba(255,255,255,0.35); padding: 2.5rem 2.25rem; display: flex; flex-direction: column; gap: 0.875rem; box-sizing: border-box; }
.pyt_reg_field input { width: 100%; box-sizing: border-box; height: 3.25rem; padding: 0 1rem; background: transparent; border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 0.95rem; outline: none; transition: 0.25s; }
.pyt_reg_field input::placeholder { color: rgba(255,255,255,0.4); }
.pyt_reg_field input:focus { border-color: #fff; }
.pyt_reg_agree { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); cursor: pointer; }
.pyt_reg_agree input { width: 1rem; height: 1rem; accent-color: #980644; flex: none; }
.pyt_reg_btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; margin-top: 0.75rem; height: 3.5rem; border: 1px solid #fff; background: #fff; color: #141414; font-size: 1rem; font-weight: 700; cursor: pointer; transition: 0.3s; }
.pyt_reg_btn span { transition: 0.3s; }
.pyt_reg_btn:hover { background: #980644; border-color: #980644; color: #fff; }
.pyt_reg_btn:hover span { transform: translateX(4px); }
.pyt_reg_done { color: #fff; font-size: 1rem; line-height: 1.7; font-weight: 500; padding: 1.5rem 0; }
.pyt_reg_info { margin-top: 2.25rem; }
.pyt_reg_info a { display: inline-block; font-family: 'trajan', serif; font-size: 2rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.pyt_reg_info span { display: block; margin-top: 0.625rem; font-size: 0.9rem; color: rgba(255,255,255,0.5); font-weight: 300; }
/* 진입 리빌 — 다른 섹션(.on/.unit_wrap.on)과 동일 리듬: 페이드+상승 스태거.
   JS(IntersectionObserver)가 .pyt_cta 에 .reg-in 부여, 이탈 시 제거(재진입 재생) */
.pyt_reg h2,
.pyt_reg_sub,
.pyt_reg_box,
.pyt_reg_info { opacity: 0; transform: translateY(2.25rem); }
.pyt_cta.reg-in .pyt_reg h2     { opacity: 1; transform: none; transition: 1.1s 0.15s; }
.pyt_cta.reg-in .pyt_reg_sub    { opacity: 1; transform: none; transition: 1.1s 0.40s; }
.pyt_cta.reg-in .pyt_reg_box    { opacity: 1; transform: none; transition: 1.1s 0.65s; }
.pyt_cta.reg-in .pyt_reg_info   { opacity: 1; transform: none; transition: 1.1s 0.90s; }

/* ---- 반응형 (태블릿/모바일) ---- */
@media all and (max-width: 1024px) {
  .pyt_cta { min-height: auto; padding: 4.5rem 0; }
  .pyt_reg_box { padding: 2rem 1.5rem; }
  .pyt_reg_info a { font-size: 1.75rem; }
  /* 모바일: fullpage/IO 트리거 불안정 — 항상 노출 */
  .pyt_reg h2, .pyt_reg_sub, .pyt_reg_box, .pyt_reg_info { opacity: 1 !important; transform: none !important; }
}

/* ---- 평면 안내 반응형 — trivn-seosan pad.css(≤1400) 1:1 이식 ---- */
@media all and (max-width: 1400px) {
  .unit_wrap { height: auto; padding: 8rem 0; flex-direction: column; }
  .unit_bg_box { width: 100%; height: auto; background: none; }
  .unit_bg { display: none; }
  .unit_bg_tit { position: relative; right: 0; top: 0; transform: translateY(-3rem); text-align: center; }
  .unit_bg_tit > span { position: relative; transform: rotate(0deg); }
  .unit_bg_tit h2 { font-size: 4.25rem; margin-left: 0; color: #980644; }
  .unit_bg_tit p { font-size: 1rem; margin-top: 0.625rem; color: #000; font-weight: 500; }
  .unit_bt { position: relative; left: 0; bottom: 0; gap: 0.5rem; justify-content: center; transform: translateY(3rem); margin-top: 3rem; }
  .unit_bt a { width: 6rem; height: 6rem; border: 1px solid #000; color: #000; font-weight: 500; }
  .unit_bt a span { font-size: 1rem; line-height: 100%; }
  .unit_bt a:first-child { background-color: #fff; color: #000; font-weight: 500; }
  .unit_box { width: 100%; height: auto; margin-top: 5rem; }
  .unit_tit { text-align: center; }
  .unit_tit .dot_box { justify-content: center; }
  .unit_tit h2 { font-size: 2.375rem; margin-top: 1.625rem; }
  .unit_tit p { font-size: 1rem; margin-top: 1rem; }
  .unit_iso_box { width: 100%; max-width: 900px; margin: auto; margin-top: 7rem; }
  .swiper_unit { width: 100%; margin: 0; padding: 0; }
  .unit_content { justify-content: center; gap: 5.5rem; }
  .unit_txt_box { width: 13rem; }
  .unit_txt_box h1 { font-size: 3rem; }
  .unit_txt_box h1 b { font-size: 3.75rem; margin-right: 0.125rem; }
  .unit_txt_box h1 span { font-size: 2.5rem; }
  .unit_txt_box ul li { padding: 0.875rem 0; }
  .unit_txt_box h4 { font-size: 1rem; }
  .unit_txt_box h5 { font-size: 1rem; }
  .unit_txt_box h3 { font-size: 1.125rem; margin-top: 0.875rem; }
  .unit_img h2 { height: 3.125rem; font-size: 1rem; margin-top: 3.75rem; border-radius: 5rem; }
  .swiper_unit2 { width: 35.5rem; margin-top: 3.125rem; }
}
@media all and (max-width: 1000px) {
  .unit_content { flex-direction: column; gap: 3rem; }
}
/* ---- 평면 안내 반응형 — trivn-seosan m.css(≤767) 1:1 이식 ---- */
@media all and (max-width: 767px) {
  .unit_tit h2 { line-height: 118%; }
  .unit_tit p { white-space: nowrap; }
  .unit_img > div { width: 100%; height: 18rem; }
  .unit_content.con01 .unit_img img { width: 23.125rem; }
  .unit_content.con02 .unit_img img { width: 23rem; }
  .unit_content.con03 .unit_img img { width: 23.6875rem; }
  .unit_content.con04 .unit_img img { width: 23.5rem; }
  .unit_content.con05 .unit_img img { width: 28.1875rem; }
  .swiper_unit2 { width: 100%; max-width: 400px; }
}

/* ============================================================
   단지안내(.complex_wrap) + 커뮤니티(.comm_wrap) — trivn-seosan 1:1
   원본 애니메이션 그대로(2단계 가로스크롤 .on/.on2). 색상만 평택화
   (#031442/#304ea0 → #980644). 진입/2단계 트리거는 별도 인라인 JS.
   ============================================================ */

/* ---- 단지안내 (theartpixel.css 원본) ---- */
.complex_wrap { width: 145%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: flex-start; align-items: center; transition: 1.6s; }
.complex_bg_box { width: 40%; max-width: 1021px; height: 100%; overflow: hidden; display: flex; justify-content: flex-start; align-items: flex-end; position: relative; }
.complex_bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.complex_bg::before { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: url(/img/complex_bg.jpg?v=2) center no-repeat; background-size: cover; z-index: 1; transform: scale(1.2); }
.complex_bg::after { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: url(/img/complex_bg_over.png) center bottom no-repeat; background-size: cover; z-index: 2; }
.complex_bg_tit { text-align: left; color: #fff; position: relative; z-index: 9; margin-bottom: 4.375rem; margin-left: 6.25rem; opacity: 0; transform: translateY(3rem); transition: 0.8s; }
.complex_bg_tit > div { position: relative; }
.complex_bg_tit h2 { font-family: 'trajan','Futura PT',sans-serif; font-size: 5.25rem; line-height: 100%; text-transform: uppercase; font-weight: 700; }
.complex_bg_tit p { font-size: 0.9375rem; line-height: 100%; margin-top: 0.625rem; }
.complex_bg_tit h3 { font-family: 'antro',serif; font-size: 2.75rem; line-height: 100%; color: #fff600; position: absolute; right: -10.875rem; bottom: 0.625rem; }
.complex_box { width: 62%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; background-color: #fff; z-index: 9; }
.complex_box > div { display: flex; justify-content: center; align-items: center; gap: 7.625rem; text-align: left; transform: translateY(3rem); }
.complex_left { width: 100%; max-width: 642px; }
.complex_img_box { display: flex; justify-content: center; align-items: flex-start; gap: 2.5rem; position: relative; opacity: 0; transform: translateY(3rem); transition: 0.8s; }
.complex_img { overflow: hidden; }
.complex_img img { width: 100%; }
.complex_img_box h6 { font-size: 0.875rem; line-height: 100%; margin-top: 0.625rem; color: #222; }
.complex_img_box.box01 { margin-top: 4.5rem; }
.complex_img_box.box02 { text-align: right; margin-top: 3.375rem; }
.complex_img_box.box01 .complex_img { width: 100%; max-width: 300px; }
.complex_img_box.box02 .complex_img { width: 100%; max-width: 714px; }
.complex_img_box h3 { font-family: 'antro',serif; font-size: 2.75rem; line-height: 100%; color: #b1b1b1; position: absolute; z-index: 9; right: -5.375rem; bottom: 2.5rem; }
.complex_tit .dot_box { display: flex; justify-content: flex-start; flex-direction: row; gap: 0.625rem; }
.complex_tit .dot_box span { width: 8px; height: 8px; border-radius: 50%; background: #980644; display: inline-block; opacity: 0; }
.complex_tit h2 { font-size: 2.125rem; line-height: 100%; font-weight: 300; color: #980644; margin-top: 1.625rem; opacity: 0; transform: translateX(5rem); }
.complex_tit h2 b { font-weight: 700; }
.complex_tit p { font-size: 0.875rem; line-height: 100%; margin-top: 1rem; font-weight: 500; opacity: 0; transform: translateX(5rem); }
.complex_txt_box { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 3.5rem 2.5rem; opacity: 0; transform: translateY(3rem); transition: 0.8s; }
.complex_txt_box > div { width: calc(50% - 1.25rem); }
.complex_txt_box.box01 { margin-top: 4.625rem; }
.complex_txt_box.box02 { margin-top: 1.125rem; }
.complex_txt_box h3 { font-size: 1.375rem; line-height: 100%; color: #980644; font-weight: 700; }
.complex_txt_box p { font-size: 0.875rem; line-height: 178%; margin-top: 1.25rem; opacity: 0.7; font-weight: 500; color: #222; }
.complex_wrap.on .complex_bg::before, .complex_wrap.on2 .complex_bg::before { transform: scale(1); transition: 2s 0s; }
.complex_wrap.on .complex_bg_tit { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on .complex_tit .dot_box span:nth-child(1), .complex_wrap.on2 .complex_tit .dot_box span:nth-child(1) { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on .complex_tit .dot_box span:nth-child(2), .complex_wrap.on2 .complex_tit .dot_box span:nth-child(2) { opacity: 1; transform: translate(0); transition: 1.2s 1.1s; }
.complex_wrap.on .complex_tit .dot_box span:nth-child(3), .complex_wrap.on2 .complex_tit .dot_box span:nth-child(3) { opacity: 1; transform: translate(0); transition: 1.2s 1.4s; }
.complex_wrap.on .complex_tit h2, .complex_wrap.on2 .complex_tit h2 { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on .complex_tit p, .complex_wrap.on2 .complex_tit p { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on .complex_txt_box.box01, .complex_wrap.on2 .complex_txt_box.box01 { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on .complex_img_box.box01, .complex_wrap.on2 .complex_img_box.box01 { opacity: 1; transform: translate(0); transition: 1.2s 0.8s; }
.complex_wrap.on2 .complex_txt_box.box02 { opacity: 1; transform: translate(0); transition: 1.2s 0.4s; }
.complex_wrap.on2 .complex_img_box.box02 { opacity: 1; transform: translate(0); transition: 1.2s 0.4s; }
.complex_wrap.on2 { transform: translateX(-30%); }

/* ---- 커뮤니티 (theartpixel.css 원본, .on 단일 리빌) ---- */
.comm_wrap { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: 1.6s; background-color: #e1e1e1; }
.comm_wrap > div:last-child { width: 90%; max-width: 1576px; text-align: left; transform: translateY(3rem); position: relative; z-index: 9; }
.comm_bg { width: 88.5rem; position: absolute; right: -39%; top: 50%; transform: translateY(-50%); z-index: 1; animation: comm_bg 45s 0s infinite linear; }
@keyframes comm_bg { from { transform: translateY(-50%) rotate(-360deg); } to {} }
.comm_tit .dot_box { display: flex; justify-content: flex-start; flex-direction: row; gap: 0.625rem; }
.comm_tit .dot_box span { width: 8px; height: 8px; border-radius: 50%; background: #980644; display: inline-block; opacity: 0; transition: 0s; }
.comm_tit h2 { font-size: 2.125rem; line-height: 100%; font-weight: 300; color: #980644; margin-top: 1.625rem; opacity: 0; transform: translateX(5rem); }
.comm_tit h2 b { font-weight: 700; }
.comm_tit p { font-size: 0.875rem; line-height: 100%; margin-top: 1rem; opacity: 0.7; font-weight: 500; opacity: 0; transform: translateX(5rem); }
.comm_img_box { display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.625rem; position: relative; margin-top: 3.25rem; opacity: 0; transform: translateY(3rem); }
.comm_img { overflow: hidden; width: 100%; max-width: 231px; position: relative; }
.comm_img img { width: 100%; }
.comm_img h6 { display: none; }
.comm_txt_box { width: 100%; max-width: 820px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 2.25rem 3.25rem; margin-top: 3.75rem; opacity: 0; transform: translateY(3rem); }
.comm_txt_box > div { width: calc(50% - 1.625rem); }
.comm_txt_box h3 { font-size: 1.125rem; line-height: 100%; color: #980644; font-weight: 700; }
.comm_txt_box h3 span { font-size: 0.875rem; }
.comm_txt_box p { font-size: 0.875rem; line-height: 100%; margin-top: 0.5rem; opacity: 0.7; font-weight: 500; }
.comm_txt br.pad { display: none; }
.comm_iso_box { position: absolute; right: -1.875rem; top: 0; bottom: 0; margin: auto; display: flex; justify-content: flex-start; align-items: center; z-index: 9; }
.comm_iso_box > div { position: relative; transform: translateY(2rem); }
.comm_iso_box img { width: 52.6875rem; opacity: 0; }
.comm_iso_txt { position: absolute; display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-direction: column; }
.comm_iso_txt p { font-size: 0.875rem; line-height: 128%; font-weight: 500; color: #980644; text-align: center; opacity: 0; transform: translateY(2rem); }
.comm_iso_txt > div { width: 0.875rem; position: relative; display: flex; justify-content: center; align-items: center; }
.comm_iso_txt > div h6 { display: none; opacity: 0; }
.comm_iso_txt:nth-child(n+8) { flex-direction: column-reverse; }
.comm_iso_txt:nth-child(n+8) p { transform: translateY(-2rem); }
.comm_iso_txt > div::before { content: ''; width: 1px; height: 0%; position: absolute; left: 0; right: 0; margin: auto; background-color: #980644; }
.comm_iso_txt > div::after { content: ''; width: 7px; height: 7px; border-radius: 100%; background-color: #980644; position: absolute; left: 0; right: 0; margin: auto; opacity: 0; border: 3px solid #fff; }
.comm_iso_txt:nth-child(-n+7) > div::before { bottom: 0; }
.comm_iso_txt:nth-child(-n+7) > div::after { bottom: 0; }
.comm_iso_txt:nth-child(n+8) > div::before { top: 0; }
.comm_iso_txt:nth-child(n+8) > div::after { top: 0; }
.comm_iso_txt.txt01 { left: 3.25rem; top: -1rem; } .comm_iso_txt.txt01 > div { height: 6rem; }
.comm_iso_txt.txt02 { left: 6.5rem; top: -3rem; } .comm_iso_txt.txt02 > div { height: 6rem; }
.comm_iso_txt.txt03 { left: 17.625rem; top: -6.5rem; } .comm_iso_txt.txt03 > div { height: 16.25rem; }
.comm_iso_txt.txt04 { right: 17.375rem; top: -2rem; } .comm_iso_txt.txt04 > div { height: 20.25rem; }
.comm_iso_txt.txt05 { right: 15rem; top: 3.5rem; } .comm_iso_txt.txt05 > div { height: 16.25rem; }
.comm_iso_txt.txt06 { right: 5.75rem; top: 3.5rem; } .comm_iso_txt.txt06 > div { height: 16.25rem; }
.comm_iso_txt.txt07 { left: 1.25rem; top: 8rem; } .comm_iso_txt.txt07 > div { height: 6rem; }
.comm_iso_txt.txt08 { left: 12.75rem; top: 16rem; } .comm_iso_txt.txt08 > div { height: 6rem; }
.comm_iso_txt.txt09 { left: 22.5rem; top: 13.375rem; } .comm_iso_txt.txt09 > div { height: 16.875rem; }
.comm_iso_txt.txt10 { right: 17.125rem; bottom: -0.125rem; } .comm_iso_txt.txt10 > div { height: 6rem; }
.comm_iso_txt_mo { display: none; }
.comm_wrap.on .comm_tit .dot_box span:nth-child(1) { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_tit .dot_box span:nth-child(2) { opacity: 1; transform: translate(0); transition: 1.2s 0.9s; }
.comm_wrap.on .comm_tit .dot_box span:nth-child(3) { opacity: 1; transform: translate(0); transition: 1.2s 1.2s; }
.comm_wrap.on .comm_tit h2 { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_tit p { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_img_box { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_txt_box { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_iso_txt > div::before { height: 100%; transition: 1.2s 0.6s; }
.comm_wrap.on .comm_iso_txt > div::after { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_iso_box img { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
.comm_wrap.on .comm_iso_txt p { opacity: 1; transform: translate(0); transition: 1.2s 1.0s; }

/* ---- 반응형: trivn pad.css(≤1400) / m.css(≤767), .active(ScrollTrigger) ---- */
@media all and (max-width: 1400px) {
  .complex_wrap { width: 100%; height: auto; flex-direction: column; }
  .complex_bg_box { width: 100%; max-width: revert; height: 100vh; max-height: 500px; }
  .complex_bg_tit { margin-bottom: 4.375rem; margin-left: 6.25rem; transition: 0s; }
  .complex_bg_tit h2 { font-size: 4.25rem; }
  .complex_bg_tit p { font-size: 1rem; }
  .complex_bg_tit h3 { font-size: 2.25rem; right: -10rem; bottom: 0.5rem; }
  .complex_box { width: 90%; margin: auto; height: auto; padding: 8rem 0; }
  .complex_box > div { gap: 3.5rem; transform: translateY(0); flex-direction: column; }
  .complex_left, .complex_right { width: 100%; max-width: 642px; }
  .complex_img_box { gap: 2.5rem; opacity: 1; transform: translateY(0); transition: 0s; }
  .complex_img_box > div { opacity: 0; transform: translateY(3rem); text-align: right; }
  .complex_tit { text-align: center; }
  .complex_tit .dot_box { justify-content: center; }
  .complex_tit h2 { font-size: 2.375rem; }
  .complex_tit p { font-size: 1rem; }
  .complex_txt_box { gap: 3.5rem 2.5rem; opacity: 1; transform: translateY(0); transition: 0s; text-align: center; }
  .complex_txt { opacity: 0; transform: translateY(3rem); }
  .complex_txt_box.box01 { margin-top: 4.5rem; }
  .complex_txt_box.box02 { margin-top: 0; }
  .complex_txt_box h3 { font-size: 1.5rem; }
  .complex_txt_box p { font-size: 1rem; margin-top: 1rem; }
  .complex_bg_box.active .complex_bg::before { transform: scale(1); transition: 2s 0s; }
  .complex_bg_box.active .complex_bg_tit { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .complex_tit.active .dot_box span { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .complex_tit.active h2, .complex_tit.active p { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .complex_txt.active { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .complex_img_box > div.active { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_wrap { height: auto; padding: 8rem 0; }
  .comm_wrap > div:last-child { text-align: center; transform: translateY(0); }
  .comm_bg { width: 70rem; }
  .comm_tit { text-align: center; }
  .comm_tit .dot_box { justify-content: center; }
  .comm_tit h2 { font-size: 2.375rem; }
  .comm_tit p { font-size: 1rem; }
  .comm_img_box { margin-top: 3.25rem; opacity: 1; transform: translateY(0); justify-content: center; }
  .comm_img { opacity: 0; transform: translateY(3rem); }
  .comm_txt_box { margin: 3.75rem auto 0; gap: 3.25rem; opacity: 1; transform: translateY(0); }
  .comm_txt { opacity: 0; transform: translateY(3rem); }
  .comm_iso_box { justify-content: center; position: relative; right: 0; top: 0; margin-top: 10rem; }
  .comm_iso_box > div { transform: translateY(0); }
  .comm_tit.active .dot_box span { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_tit.active h2, .comm_tit.active p { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_img.active { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_txt.active { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_iso_box.active .comm_iso_txt > div::before { height: 100%; transition: 1.2s 0.2s; }
  .comm_iso_box.active .comm_iso_txt > div::after { opacity: 1; transition: 1.2s 0.2s; }
  .comm_iso_box.active img { opacity: 1; transform: translate(0); transition: 1.2s 0.2s; }
  .comm_iso_box.active .comm_iso_txt p { opacity: 1; transform: translate(0); transition: 1.2s 0.6s; }
  .comm_iso_box.active .comm_iso_txt > div h6 { opacity: 1; transition: 1.2s 0.2s; }
  .comm_txt br.pad { display: block; }
  /* 장소 제목/설명 폰트 — .complex_txt_box(h3 1.5rem / p 1rem)와 동일 톤 (2026-05-20) */
  .comm_txt_box h3 { font-size: 1.5rem; line-height: 1.2; }
  .comm_txt_box p { font-size: 1rem; line-height: 1.65; margin-top: 1rem; }
}
@media all and (max-width: 767px) {
  .complex_bg_tit { margin-left: 5%; }
  .complex_bg_tit h2 { font-size: 3.75rem; }
  .complex_bg_tit h3 { font-size: 2rem; right: 0; bottom: 0.5rem; }
  .complex_tit h2 { line-height: 118%; }
  .complex_img_box { gap: 1.5rem; }
  .complex_txt_box > div { width: 100%; }
  .complex_img_box h3 { right: 0; }
  .comm_bg { width: 230vw; right: revert; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0.5; }
  .comm_tit h2 { line-height: 118%; }
  .comm_iso_txt { width: 1.625rem !important; height: 1.625rem !important; }
  .comm_iso_txt > div { width: 100%; height: 100%; }
  .comm_iso_txt > div::before { display: none; }
  .comm_iso_txt > div::after { width: 100%; height: 100%; border: 1px solid #fff; box-sizing: border-box; }
  .comm_iso_txt > div h6 { display: block; font-size: 0.875rem; color: #fff; line-height: 100%; position: relative; z-index: 9; font-weight: 500; }
  .comm_iso_txt p { display: none; }
  .comm_iso_box { flex-direction: column; gap: 3rem; margin-top: 5rem; }
  .comm_iso_box img { width: 30rem; }
  .comm_img_box { width: 90%; margin: 3.25rem auto 0; }
  .comm_txt_box { width: 100%; }
  .comm_txt_box > div { width: 100%; }
  .comm_iso_txt_mo { text-align: left; display: flex !important; justify-content: center; align-items: flex-start; gap: 0.75rem 1rem; flex-wrap: wrap; }
  .comm_iso_txt_mo > div { display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem; }
  .comm_iso_txt_mo h6 { font-size: 0.875rem; color: #fff; background-color: #980644; border-radius: 100%; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; }
  .comm_iso_txt_mo p { font-size: 1rem; line-height: 100%; }
}

/* SUMMARY 항목 마우스오버 텍스트 색상변경 효과 제거 (요청) */
.main_sum ul li,
.main_sum ul li h2,
.main_sum ul li h4,
.main_sum ul li:hover,
.main_sum ul li:hover h2,
.main_sum ul li:hover h4 { color: #fff !important; }


/* ============================================================
   커뮤니티 아이소 라벨 — 평택 comm_iso.png 맞춤 % 핀(말풍선+점)
   트리븐 좌표/연결선 무력화. txt01~06 %는 초기값 → 보면서 미세조정.
   ============================================================ */
.comm_iso_box > div:first-child { position: relative !important; display: inline-block !important; transform: none !important; }
.comm_iso_box .comm_iso_txt_mo { display: none !important; }
.comm_iso_box img.comm_iso_img { display: block !important; width: 52.6875rem !important; max-width: 92vw !important; height: auto !important; opacity: 1 !important; transform: none !important; }
.comm_iso_box .comm_iso_txt {
  position: absolute !important;
  left: auto; right: auto; top: auto; bottom: auto;
  width: auto !important; height: auto !important;
  transform: translate(-50%, -100%) !important;
  flex-direction: column !important; align-items: center !important; gap: 0 !important;
  z-index: 20 !important;
}
.comm_iso_box .comm_iso_txt > div { display: none !important; }
.comm_iso_box .comm_iso_txt > div::before,
.comm_iso_box .comm_iso_txt > div::after { display: none !important; }
.comm_iso_box .comm_iso_txt p {
  opacity: 1 !important; transform: none !important;
  font-size: 0.8rem; font-weight: 700; line-height: 1.2; color: #fff;
  background: #980644; padding: 5px 10px; border-radius: 4px;
  white-space: nowrap; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.comm_iso_box .comm_iso_txt::after {
  content: ''; position: absolute; left: 50%; bottom: -11px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #980644; border: 2px solid #fff; transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.comm_iso_box .comm_iso_txt::before {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 2px; height: 8px; background: #980644; transform: translateX(-50%);
}
/* ---- 초기 위치 (left%, top% — 이미지 기준). 보면서 조정 ---- */
.comm_iso_box .comm_iso_txt.txt01 { left: 47% !important; top: 30% !important; }  /* 헬스장 */
.comm_iso_box .comm_iso_txt.txt02 { left: 82% !important; top: 56% !important; }  /* 다목적 체육관 */
.comm_iso_box .comm_iso_txt.txt03 { left: 66% !important; top: 70% !important; }  /* 골프연습장 */
.comm_iso_box .comm_iso_txt.txt04 { left: 33% !important; top: 40% !important; }  /* 작은도서관 */
.comm_iso_box .comm_iso_txt.txt05 { left: 50% !important; top: 73% !important; }  /* 맘스/키즈룸 */
.comm_iso_box .comm_iso_txt.txt06 { left: 20% !important; top: 55% !important; }  /* 사우나 */
.comm_iso_txt_mo { display: none !important; }
@media all and (max-width: 1024px) {
  .comm_iso_box > div { display: block !important; }
  .comm_iso_box img.comm_iso_img { width: 100% !important; max-width: 100% !important; }
  .comm_iso_box .comm_iso_txt p { font-size: 0.62rem; padding: 3px 6px; }
}

/* 커뮤니티: 배경 워터마크(comm_bg)는 유지 */

/* ============================================================
   커뮤니티 아이소 2장(B2F+B1F) + 트리븐식 연결선 핀
   ============================================================ */
.comm_iso_box, .comm_iso_txt_mo { display: none !important; }
.pyt_iso_wrap { position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: 56%; max-width: 920px; height: 72vh; z-index: 9; pointer-events: none; }
.pyt_iso { position: absolute; }
.pyt_iso img { display: block; width: 100%; height: auto; }
/* 사선 배치: B2F 왼쪽 위 / B1F 오른쪽 아래 — 리더선 라벨 여백 확보 */
.pyt_iso--b2 { width: 35%; left: 0; top: 2%; }
.pyt_iso--b1 { width: 72%; right: 9%; bottom: 11%; }
/* PDF식 리더선: 수직 div 연결선 + 방 위 점 + 바깥 라벨 */
.pyt_line { position: absolute; width: 1px; margin-left: -0.5px;
  background: #980644; z-index: 10; }
.pyt_dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #980644; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); z-index: 11; }
.pyt_lbl { position: absolute; transform: translate(-50%, -50%);
  font-size: 0.74rem; font-weight: 700; color: #fff; background: #980644;
  padding: 5px 10px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 12; }
/* 등장 애니메이션(트리븐식): 아이소 페이드인 → 선 그어지기 → 점·라벨 팝
   기본 = 항상 보임. JS가 .pyt-anim 부여 시에만 숨김/무장, .pyt-in 시 재생.
   (JS/IO 미지원이면 .pyt-anim 안 붙어 그대로 보임 → 안전) */
.pyt_iso_wrap.pyt-anim .pyt_iso img { opacity: 0; transform: scale(1.04);
  transition: opacity .8s ease, transform .8s ease; }
.pyt_iso_wrap.pyt-anim .pyt_line { transform: scaleY(0);
  transition: transform .7s ease .75s; }
.pyt_iso_wrap.pyt-anim .pyt_dot { opacity: 0; transform: scale(0);
  transform-origin: center;
  transition: opacity .35s ease 1.45s, transform .5s cubic-bezier(.34,1.56,.64,1) 1.45s; }
.pyt_iso_wrap.pyt-anim .pyt_lbl { opacity: 0; }
.pyt_iso_wrap.pyt-anim.pyt-in .pyt_iso img { opacity: 1; transform: scale(1); }
.pyt_iso_wrap.pyt-anim.pyt-in .pyt_line { transform: scaleY(1); }
.pyt_iso_wrap.pyt-anim.pyt-in .pyt_dot { opacity: 1; transform: scale(1); }
.pyt_iso_wrap.pyt-anim.pyt-in .pyt_lbl {
  animation: pyt_pop .45s cubic-bezier(.34,1.56,.64,1) 1.65s both; }
@keyframes pyt_pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pyt_iso_wrap.pyt-anim .pyt_iso img,
  .pyt_iso_wrap.pyt-anim .pyt_line,
  .pyt_iso_wrap.pyt-anim .pyt_dot,
  .pyt_iso_wrap.pyt-anim .pyt_lbl {
    transition: none !important; animation: none !important;
    opacity: 1 !important; }
  .pyt_iso_wrap.pyt-anim .pyt_iso img { transform: none !important; }
  .pyt_iso_wrap.pyt-anim .pyt_line { transform: scaleY(1) !important; }
  .pyt_iso_wrap.pyt-anim .pyt_dot { transform: scale(1) !important; }
  .pyt_iso_wrap.pyt-anim .pyt_lbl { transform: translate(-50%, -50%) !important; }
}
/* ≤1024 (태블릿 + 모바일) 세로 스택 — PC 사선 배치는 ≥1025 에서만 적용
   (820~1024 태블릿에서 PC % 좌표가 깨져서 안전한 세로 스택 유지) */
@media all and (max-width: 1024px) {
  .pyt_iso_wrap {
    position: static !important; transform: none !important;
    width: 100% !important; max-width: 680px; height: auto !important;
    margin: 2.5rem auto 0 !important;
    display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  }
  .pyt_iso, .pyt_iso--b1, .pyt_iso--b2 {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important; align-self: center;
  }
  .pyt_iso img { width: 100% !important; height: auto !important; }
  .pyt_iso_wrap .pyt_line,
  .pyt_iso_wrap .pyt_dot,
  .pyt_iso_wrap .pyt_lbl { display: none !important; }

  /* 등장 애니메이션 — .comm_wrap.on (IO 가 viewport 진입 시 부여) 트리거.
     초기: 아이소 2장 + 점배지 + 범례 모두 페이드아웃 + 살짝 아래.
     활성: 단계별로 스태거 페이드인 (PC .pyt-anim 흐름의 모바일 대응) (2026-05-20) */
  .pyt_iso_wrap .pyt_iso { opacity: 0; transform: translateY(2rem); }
  .pyt_iso_wrap .pyt_dot { opacity: 0; }  /* 위치는 margin-negative 로 이미 잡힘 → transform 건들지 않음 */
  .pyt_iso_legend > div { opacity: 0; transform: translateY(1.25rem); }
  .comm_wrap.on .pyt_iso--b2 { opacity: 1; transform: translateY(0); transition: opacity 0.9s 0.2s ease, transform 0.9s 0.2s ease; }
  .comm_wrap.on .pyt_iso--b1 { opacity: 1; transform: translateY(0); transition: opacity 0.9s 0.45s ease, transform 0.9s 0.45s ease; }
  .comm_wrap.on .pyt_iso_wrap .pyt_dot { opacity: 1; transition: opacity 0.45s ease; }
  .comm_wrap.on .pyt_iso--b2 .pyt_dot { transition-delay: 0.7s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(1) { transition-delay: 0.95s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(2) { transition-delay: 1.05s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(3) { transition-delay: 1.15s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(4) { transition-delay: 1.25s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(5) { transition-delay: 1.35s; }
  .comm_wrap.on .pyt_iso--b1 .pyt_dot:nth-of-type(6) { transition-delay: 1.45s; }
  .comm_wrap.on .pyt_iso_legend > div {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(1) { transition-delay: 1.50s; }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(2) { transition-delay: 1.60s; }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(3) { transition-delay: 1.70s; }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(4) { transition-delay: 1.80s; }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(5) { transition-delay: 1.90s; }
  .comm_wrap.on .pyt_iso_legend > div:nth-child(6) { transition-delay: 2.00s; }
}

/* 범례(모바일 전용 — 점=숫자배지 + 아래 "01 사우나 …" 목록, 트리븐 모바일식) */
.pyt_iso_legend { display: none; }

/* 태블릿(768~1024): 위쪽 B2F(사우나) 아이소는 숨기고, B1F 아이소는
   PC처럼 리더선·점·라벨 그대로 노출 — % 좌표는 .pyt_iso 기준이라
   부모 폭만 충분히 주면 PC와 동일 비례로 자리 잡힘. (2026-05-20) */
@media all and (min-width: 768px) and (max-width: 1024px) {
  .pyt_iso--b2 { display: none !important; }
  .pyt_iso_wrap {
    max-width: 760px !important;
    margin: 11rem auto 10rem !important;   /* 라벨 위(-8%)/아래(108%) + 위아래 섹션 호흡 */
    gap: 0 !important;
  }
  .pyt_iso_wrap .pyt_line,
  .pyt_iso_wrap .pyt_dot,
  .pyt_iso_wrap .pyt_lbl { display: block !important; }
  .pyt_iso_wrap .pyt_lbl { font-size: 0.72rem; padding: 4px 8px; }
}

/* 모바일(≤767): 트리븐 m.css 1:1 차용 — 점=번호 배지, 라벨 숨김, 아래 "01 사우나 …" 범례.
   원본: trivn-seosan/css/m.css .comm_iso_txt_mo (h6 1.5rem/원형/컬러 채움 + p 1rem) (2026-05-20) */
@media all and (max-width: 767px) {
  /* B2F(사우나 1개)는 그림이 작아 폭 줄임 — PC 비율(35%/72%)에 맞춰 */
  .pyt_iso--b2 { width: 52% !important; }
  /* 점 = 숫자 배지 (≤1024 룰의 display:none을 덮어쓰기) */
  .pyt_iso_wrap .pyt_dot {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 1.625rem; height: 1.625rem;
    margin: -0.8125rem 0 0 -0.8125rem;
    background: #980644;
    border: 1px solid #fff;
    color: #fff;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  .pyt_iso_wrap .pyt_dot::before { content: attr(data-num); }
  /* 연결선·라벨은 모바일에선 숨김(범례로 대체) */
  .pyt_iso_wrap .pyt_line,
  .pyt_iso_wrap .pyt_lbl { display: none !important; }
  /* 범례 — 트리븐 .comm_iso_txt_mo 차용 */
  .pyt_iso_legend {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
    width: 100%;
    margin: 2rem auto 0 !important;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .pyt_iso_legend > div {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.95rem; line-height: 1; color: #222;
  }
  .pyt_iso_legend b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: 100%;
    background: #980644; color: #fff;
    font-size: 0.78rem; font-weight: 700;
  }
}

/* UNIT PLAN 우측 정보 박스 색상 톤다운 — "생활의 모든 순간을 빛내는 공간"(.unit_tit h2)은
   자주색 유지, 면적표/주택형 탭은 자주색이 너무 강해 가독성/톤 어색 → 어두운 회색 #222.
   탭 활성 강조는 기존 opacity(0.3 / 1) 로 충분히 구분됨. (2026-05-20) */
.unit_txt_box { color: #222 !important; }
.unit_txt_box ul { border-top-color: #222 !important; }
.swiper_unit2 .swiper-slide { border-bottom-color: #222 !important; }
.swiper_unit2 .swiper-slide span { color: #222 !important; }


/* 평면정보(/unit) 탭 — 브라운 컬러 (2026-05-21) */
ul.tabs2.brown li.selected,
ul.tabs2.brown li.selected:hover,
ul.tabs2.brown li.active {
    background: #a1876f !important;
    border: 1px solid #a1876f !important;
    color: #fff !important;
}
ul.tabs2.brown li.selected a,
ul.tabs2.brown li.selected:hover a,
ul.tabs2.brown li.active a {
    color: #fff !important;
}

ul.tabs2.brown { margin-bottom: 3.5rem !important; }


/* 서브 페이지 콘텐츠 진입 stagger fade-up (2026-05-21).
   `backwards` 로 animation 시작 전 from 상태 자동 유지 — opacity/transform 명시 불필요.
   premium 은 IntersectionObserver 기반 .in-view 별도 처리 — 제외. */
@keyframes pytFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 타이틀 블록 자식(h6 → h2 → p) stagger */
.pyt-location-tit > *,
.pyt-complex-tit > *,
.pyt-community-tit > *,
.pyt-system-tit > * {
    animation: pytFadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.pyt-location-tit > *:nth-child(1),
.pyt-complex-tit > *:nth-child(1),
.pyt-community-tit > *:nth-child(1),
.pyt-system-tit > *:nth-child(1) { animation-delay: 0.15s; }

.pyt-location-tit > *:nth-child(2),
.pyt-complex-tit > *:nth-child(2),
.pyt-community-tit > *:nth-child(2),
.pyt-system-tit > *:nth-child(2) { animation-delay: 0.35s; }

.pyt-location-tit > *:nth-child(3),
.pyt-complex-tit > *:nth-child(3),
.pyt-community-tit > *:nth-child(3),
.pyt-system-tit > *:nth-child(3) { animation-delay: 0.55s; }

/* 메인 콘텐츠 wrapper — 타이틀 뒤에 등장 */
.pyt-location-map,
.pyt-complex-main,
.pyt-community-main,
.pyt-system-list,
.sub_img_wrap {
    animation: pytFadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s backwards;
}

/* complex 분위기 컷 — 메인 다음 */
.pyt-complex-cuts {
    animation: pytFadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s backwards;
}