@charset "utf-8";
/* 트래픽 문제로 헤더에 cdn으로 불러옴
@font-face {font-family: 'Pretendard';font-weight: 900;font-display: swap;src: local('Pretendard Black'), url('./font/woff2/Pretendard-Black.woff2') format('woff2'), url('./font/woff/Pretendard-Black.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 800;font-display: swap;src: local('Pretendard ExtraBold'), url('./font/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('./font/woff/Pretendard-ExtraBold.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 700;font-display: swap;src: local('Pretendard Bold'), url('./font/woff2/Pretendard-Bold.woff2') format('woff2'), url('./font/woff/Pretendard-Bold.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 600;font-display: swap;src: local('Pretendard SemiBold'), url('./font/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('./font/woff/Pretendard-SemiBold.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 500;font-display: swap;src: local('Pretendard Medium'), url('./font/woff2/Pretendard-Medium.woff2') format('woff2'), url('./font/woff/Pretendard-Medium.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 400;font-display: swap;src: local('Pretendard Regular'), url('./font/woff2/Pretendard-Regular.woff2') format('woff2'), url('./font/woff/Pretendard-Regular.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 300;font-display: swap;src: local('Pretendard Light'), url('./font/woff2/Pretendard-Light.woff2') format('woff2'), url('./font/woff/Pretendard-Light.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 200;font-display: swap;src: local('Pretendard ExtraLight'), url('./font/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('./font/woff/Pretendard-ExtraLight.woff') format('woff');}
@font-face {font-family: 'Pretendard';font-weight: 100;font-display: swap;src: local('Pretendard Thin'), url('./font/woff2/Pretendard-Thin.woff2') format('woff2'), url('./font/woff/Pretendard-Thin.woff') format('woff');}
@font-face {font-family: 'KoPubBatang';font-weight: 500;font-display: swap;src: local('KoPubWorldBatang Medium'), local('KoPubWorld Batang Medium'), url('./font/woff2/KoPubWorldBatang-Medium.woff2') format('woff2'), url('./font/woff/KoPubWorldBatang-Medium.woff') format('woff');} */

/* 2026-10-12 lsyclaude : KoPubWorld바탕 Medium 웹폰트 CDN 연결 (jsDelivr - font-kopubworld 패키지, 메인 비주얼 타이틀 전용) */
@font-face {
  font-family: 'KoPubWorldBatang';
  font-style: normal;
  font-weight: 500; /* Medium */
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0.3/fonts/KoPubWorld-Batang-Medium.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0.3/fonts/KoPubWorld-Batang-Medium.woff') format('woff');
}

:root{
  --color-primary:#9A0000;   /* 포인트 컬러 - 레드 (2026-10-01 lsyclaude : #E82B29 -> #9A0000 최종 확정) */
  --color-text:#2F2D28;      /* 텍스트 기본 컬러 */
  --color-white:#FEFEFE;
  --color-gray:#808284;      /* 뱃지/보조버튼 그레이 */
  --color-gray-border:#707070;
  --gnb-height:88px;
  /* 2026-10-01 lsyclaude(수정) : GNB 재디자인 모바일 시안(Figma 26:2286) 헤더 높이 57px + 하단 라인 1px = 58px 로 변경
     기존 값 보존: --gnb-height-mobile:60px; */
  --gnb-height-mobile:58px;
  --content-max:1364px;      /* 본문 컨텐츠 컨테이너 (1920 해상도 기준) 1364px */

  /* 2026-09-16 lsyclaude : hero 아래 컨텐츠 영역(역세권/4가지이유/Vision/폼/footer) 추가하며 정의 */
  --color-bg-soft:#F8F8F8;
  --color-navy:#1F3960;          /* Vision 카드 아이콘 원 배경 (Figma 실제 색상은 svg 확인 필요, 근사치) */
  --color-footer-bg:#2F2D28;
  --color-footer-text-soft:#D9D9D9;
  --color-footer-text-muted:#9D9D9D;

  /* 2026-09-18 lsyclaude : 서브페이지(sub-nav) 하단 구분선 컬러 추가 (Figma 실측값 #F6F2EB) */
  --color-line-soft:#F6F2EB;

  /* 2026-09-21 lsyclaude : 세대안내 .unit-spec 타입배지/면적표 리디자인(스샷 반영)에 쓰는 회색 배경
     (기존 --color-bg-soft(#F8F8F8)보다 살짝 진한 톤 - 스샷 실측 약 #EBEBEB) */
  --color-spec-bg:#EBEBEB;
}


/* 초기화 */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  color:var(--color-text);word-break: keep-all; 
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;border:none;background:none;cursor:pointer;padding:0;}
/* 2026-09-23 lsyclaude : dl/dt/dd 기본 마진 초기화 추가
   - 브라우저 기본 스타일상 dd는 margin-inline-start:40px 가 붙어있어, footer__builder 처럼
     dt/dd를 flex + gap 으로 배치한 곳에서 "gap 값 + dd 기본 마진"이 겹쳐져 항목마다
     의도한 것보다 여백이 크게(그리고 실제로는 폭이 다른 dt 텍스트 길이에 따라 다르게 보임) 나오는 문제가 있었음
     (footer__address, footer__builder 두 곳 모두 dl>dt/dd 구조라 여기서 공통으로 초기화)
   - 초기화 후 dt-dd 간격은 각 컴포넌트에 정의된 gap 값만으로 일정하게 적용됨 */
dl,dt,dd{margin:0;}

/* ========================================================================================================================
	========================================================================================================================
   2026-09-16 lsyclaude
   씨엘스톤 더 써밋 - 메인페이지 상단부 (GNB / Hero / 하단 고정 버튼)
   Figma: node-id 1:832(global-nav), 1:767(hero), 1:851(bottom-fixed-button)
   기준 디자인 폭 : 1920px (Figma 시안 기준)
   ========================================================================================================================
======================================================================================================================== */

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 팝업레이어 */
#hd_pop {z-index:9000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

@media screen and (max-width: 768px){
	.hd_pops {width: 96vw !important;height: unset !important; top:50px !important; left:2vw !important;}
	.hd_pops_con{width: 100% !important;height: unset !important;}
	.hd_pops img {width:100%}
}

/* 내용 준비중인 페이지 */
.being_prepared{width: 100%;padding: 100px 50px 10vw; display: flex;align-items: center;justify-content: center;}
.being_prepared img{width: 80%;}
@media (max-width:767.98px){
 .being_prepared{padding: 50px 10px 10vw; }
 .being_prepared img{width: 100%;}
}

/* 공통 뱃지 (구로구청 등) */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 12px;
  font-family:'Pretendard';font-weight:700;font-size:15px;
  border-radius:2px;white-space:nowrap;
}
.badge--gray{
  /* background:var(--color-gray); */
  border-left:1px solid rgba(255,255,255,0.5);
  color:var(--color-white);
}

/* 공통 버튼 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;border-radius:2px;white-space:nowrap;
}
.btn__ico{width:16px;height:19px;filter:brightness(0) invert(1);} /* 2026-09-16 lsyclaude : 레드 버튼 위 아이콘 흰색 처리 */

/* 2026-09-16 lsyclaude : hero 아래 섹션 공용 컨테이너 / 타이틀 */
.container{
  width: 100%;
  margin:0 auto;
  padding: 0 26px 0 30px;
        position: relative;
}
.section-tag{
  text-align:center;
  color:var(--color-primary);
  font-weight:700;
  font-size:clamp(16px,2.4vw,26px);
  letter-spacing:-0.02em;
  margin:0 0 12px;
}
.section-title{
  text-align:center;
  color:var(--color-text);
  font-weight:800;
  font-size:clamp(24px,4.5vw,40px);
  line-height:1.3;
  margin:0 0 48px;
}
.btn--primary{
  background:var(--color-primary);
  color:var(--color-white);
}

@media (max-width:767.98px){
	.section-title{margin-bottom:26px;} 
}

/* ============================================================
   GNB (global-nav)
   - 가로 100% (풀 브라우저 폭)
   - 항상 상단 고정, 스크롤 시 흰 배경(.gnb--solid) 전환은 js/script.js 에서 처리
============================================================ */
.gnb{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:var(--gnb-height-mobile);
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.25);
  z-index:1000;
  transition:transform .3s ease;
}
.gnb__inner{
  width:100%;
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.gnb__logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.gnb__logo-img{height:34px;width:auto;}

.gnb__menu-toggle{
  width:32px;height:32px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.gnb__menu-toggle span{
  display:block;width:24px;height:2px;background:var(--color-text);transition:all .25s ease;
}
.gnb__menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.gnb__menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.gnb__menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.gnb__right{display:flex;align-items:center;gap:32px;}
.gnb__call{
  display:flex;align-items:center;gap:8px;
  font-family:'Pretendard';font-weight:800;font-size:20px;color:var(--color-text);
}
.gnb__call-ico{width:25px;height:25px;}
.gnb__cta{height:38px;width:170px;font-size:15px;}

.gnb__nav-foot{display:none;}

/* 데스크톱 메뉴/서브메뉴 */
.gnb__menu{display:flex;align-items:center;gap:48px;}
.gnb__menu-link{
  font-family:'Pretendard';font-weight:700;font-size:17px;color:var(--color-text);
  padding:8px 0;
}
.gnb__submenu{
  position:absolute;
  top:100%;left:0;
  min-width:140px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;transform:translateY(8px);
  /* 2026-09-16 lsyclaude(수정) : 처음엔 빠르게 열리고 끝에서 부드럽게 감속하는 이징으로 변경(사용자 피드백 반영) */
  transition:opacity .3s cubic-bezier(0.16,1,0.3,1), transform .3s cubic-bezier(0.16,1,0.3,1), visibility .3s cubic-bezier(0.16,1,0.3,1);
  padding:12px 0;
}
.gnb__submenu li a{
  display:block;padding:8px 20px;font-size:14px;color:var(--color-text);
  border-bottom:1px solid transparent;
}
.gnb__submenu li a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary);}
.gnb__menu-item{position:relative;}
.gnb__menu-item:hover .gnb__submenu,
.gnb__menu-item:focus-within .gnb__submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}

.gnb__dim{display:none;}

/* ============================================================
   2026-09-16 lsyclaude(재수정)
   GNB 메가메뉴 - "GNB 전체 폭 패널에 4개 카테고리가 한번에 펼쳐지는 구조"가 맞는 방향이라는
   사용자 확인에 따라 최초 방식(.gnb__mega-wrap/.gnb__megamenu)으로 복원.
   - 바로 전 턴에서 시도했던 "각 li 자신의 서브메뉴가 상위 메뉴 아래 개별 노출되는 방식"은 사용 중지(아래 참고용 주석)
   - .gnb__submenu 자체는 삭제하지 않고 모바일 아코디언 메뉴 용도로 계속 사용
   - 호버 라인 좌→우 확장 애니메이션 / 오픈 이징(cubic-bezier 감속) 개선사항은 이 구조에도 그대로 적용
------------------------------------------------------------
   [바로 전 버전 참고용 - 사용 중지]
   데스크톱에서 .gnb__menu:hover .gnb__submenu, .gnb__menu:focus-within .gnb__submenu 로
   각 li의 .gnb__submenu를 상위 메뉴 위치 그대로 두고 전체 동시 노출시켰던 방식.
============================================================ */
.gnb__mega-wrap{position:relative;}
.gnb__megamenu{
  display:none; /* 모바일에서는 미사용, 데스크톱 미디어쿼리에서 block 처리 */
  position:fixed;
  top:var(--gnb-height);
  left:0;
  width:100%;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 32px rgba(0,0,0,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(-14px);
  /* 2026-09-16 lsyclaude(수정) : 패널 전체가 좀 더 부드럽게 열리도록 지속시간을 늘리고(0.3s->0.42s),
     이징도 시작이 급격했던 expo 계열 대신 완만하게 감속하는 곡선으로 변경(사용자 피드백 반영) */
  transition:opacity .42s cubic-bezier(0.22,1,0.36,1), transform .42s cubic-bezier(0.22,1,0.36,1), visibility .42s cubic-bezier(0.22,1,0.36,1);
  z-index:999;
}
.gnb__mega-inner{
  max-width:1920px;
  margin:0 auto;
  padding:36px 60px 40px;
  position:relative;
  /* 2026-09-16 lsyclaude(재수정) : flex+gap 방식은 컬럼 1개는 대메뉴 위치에 맞아도 컬럼 폭/간격이 실제 대메뉴 항목들의
     폭/간격과 달라서 2번째 컬럼부터 점점 어긋나는 문제가 있었음(사용자 스크린샷으로 확인) ->
     컬럼들을 position:absolute 로 바꾸고, js/script.js 에서 각 대메뉴 항목(li)의 실제 x좌표를 측정해
     대응하는 컬럼에 각각 left 값으로 적용 -> 모든 컬럼이 각자의 대메뉴 바로 아래 정렬됨(사용자 피드백 반영) */
  min-height:270px;
}
.gnb__mega-col{
  position:absolute;
  top:30px;
  display:flex;
  flex-direction:column;
  /* 2026-09-22 lsyclaude(추가) : 서브메뉴 텍스트를 좌측 정렬 대신 컬럼(=대메뉴) 기준
     가운데 정렬로 변경(사용자 요청). 컬럼의 실제 가로 위치(left)는 js/script.js의
     syncMegaColumns()에서 "컬럼 중심 = 대응하는 대메뉴 중심"이 되도록 함께 계산해줌 */
  align-items:center;
  gap:20px;
  min-width:100px;
}
.gnb__mega-col a{
  font-family:'Pretendard';font-weight:500;font-size:16px;color:var(--color-text);
  white-space:nowrap;
  text-align:center; /* 2026-09-22 lsyclaude(추가) : 링크 텍스트 자체도 가운데 정렬 */
}
.gnb__mega-col a:hover{color:var(--color-primary);}

/* ---- Desktop (>=1200px) : 데스크톱 GNB 레이아웃 ---- */
@media (min-width:1200px){
  .gnb{height:var(--gnb-height);}
  .gnb__inner{padding:0 60px;}
  .gnb__logo-img{height:50px;}
  .gnb__menu-toggle{display:none;}
  .gnb__nav{
    position:static;display:flex;align-items:stretch;gap:64px;
    background:none;height:100%;width:auto;transform:none;box-shadow:none;
  }
  /* 2026-09-16 lsyclaude(수정) : 메뉴/항목/링크가 GNB 전체 높이(height:100%)를 채우도록 변경
     -> 링크 밑줄(::after)의 bottom:0 위치가 정확히 .gnb의 border-bottom 라인과 같은 Y좌표에 오게 됨(사용자 피드백 반영) */
  .gnb__menu{gap:56px;align-items:stretch;height:100%;}
  .gnb__menu-item{height:100%;}
  .gnb__menu-link{
    font-size:19px;
    height:100%;
    display:inline-flex;
    align-items:center;
    position:relative;
  }
  /* 호버 시 왼쪽→오른쪽으로 확장되며 나타나는 레드 라인 (사용자 피드백 반영, width 0 -> 100%) */
  .gnb__menu-link::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:0;height:2px;
    background:var(--color-primary);
    transition:width .3s cubic-bezier(0.16,1,0.3,1); /* 처음 빠르게, 끝에서 부드럽게 감속 */
  }
  .gnb__menu-item:hover > .gnb__menu-link::after,
  .gnb__menu-item:focus-within > .gnb__menu-link::after,
  .gnb__menu-item.is-active > .gnb__menu-link::after{
    width:100%;
  }
  .gnb__call{font-size:28px;}

  /* 2026-09-16 lsyclaude(재수정) : 데스크톱은 항목별 좁은 드롭다운 대신 메가메뉴 패널 사용 */
  .gnb__submenu{display:none;}
  .gnb__megamenu{display:block;}
  .gnb__mega-wrap:hover .gnb__megamenu,
  .gnb__mega-wrap:focus-within .gnb__megamenu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
}

/* ---- Mobile / Tablet (<1200px) : 전체화면 슬라이드 메뉴 ---- */
@media (max-width:1199.98px){
  .gnb__right{display:none;}
  .gnb__nav{
    position:fixed;
    top:var(--gnb-height-mobile);left:0;
    width:min(360px,86%);
    /* 2026-09-22 lsyclaude(수정) : 모바일 브라우저(특히 iOS Safari/모바일 Chrome)는 주소창이 보이는 상태를
       기준으로 100vh를 계산하지 않고, 주소창이 사라졌을 때의 "최대" 높이를 100vh로 잡는 경우가 많습니다.
       그래서 실제 화면(주소창이 보이는 상태)보다 이 패널의 높이가 더 크게 계산되고, justify-content:space-between
       으로 맨 아래에 배치된 .gnb__nav-foot(전화/관심고객등록 영역)이 화면 아래로 밀려나 잘려 보이는 문제가
       있었습니다(사용자 확인). 주소창 유무에 따라 실시간으로 갱신되는 100dvh(동적 뷰포트 단위)를 쓰도록
       한 줄 더 추가해, 지원 브라우저에서는 실제 보이는 화면 높이에 맞춰지도록 했습니다(미지원 브라우저는
       위 100vh 값을 그대로 사용). 기존 100vh만 쓰던 값은 삭제하지 않고 그대로 두었습니다. */
    height:calc(100vh - var(--gnb-height-mobile));
    height:calc(100dvh - var(--gnb-height-mobile));
    background:#fff;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:24px 0;
    transform:translateX(-100%);
    transition:transform .3s ease;
    overflow-y:auto;
    z-index:1001;
  }
  .gnb.is-open .gnb__nav{transform:translateX(0);}
  .gnb__menu{flex-direction:column;align-items:flex-start;gap:0;width:100%;}
  .gnb__menu-item{width:100%;}
  .gnb__menu-link{display:block;padding:16px 28px;font-size:18px;}
  .gnb__submenu{
    position:static;box-shadow:none;border-top:none;opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;padding:0;background:#faf9f8;transition:max-height .25s ease;
  }
  .gnb__menu-item:hover .gnb__submenu,
  .gnb__menu-item:focus-within .gnb__submenu{max-height:260px;padding:8px 0;}
  .gnb__submenu li a{padding:10px 40px;font-size:15px;}
  .gnb__nav-foot{
    display:flex;flex-direction:column;gap:14px;padding:20px 28px 0;
    border-top:1px solid #eee;margin-top:12px;
    /* 2026-09-22 lsyclaude(추가) : .gnb__nav가 overflow-y:auto인 상태에서 내용(아코디언 펼침 등)이
       패널 높이를 넘어갈 때 flex-shrink 기본값(1)으로 인해 이 영역이 찌그러져 보이는 것도 함께 방지 -
       항상 내용 높이 그대로(축소되지 않고) 유지되도록 함 */
    flex-shrink:0;
  }
  .gnb__nav-foot .gnb__call{font-size:20px;}
  .gnb__nav-foot .gnb__cta{width:100%;height:44px;}
  .gnb.is-open .gnb__dim{
    display:block;position:fixed;inset:0;top:var(--gnb-height-mobile);
    background:rgba(0,0,0,.4);z-index:1000;
  }
  /* 모바일 메뉴 오픈 시 본문 스크롤 잠금 (js/script.js 에서 토글, top 값은 js가 현재 스크롤 위치만큼 음수로 지정) */
  body.is-gnb-open{
    position:fixed;
    left:0;right:0;
    width:100%;
    overflow:hidden;
  }
  /* 메뉴 패널 끝까지 스크롤했을 때 뒤쪽 화면으로 스크롤이 넘어가지 않도록 */
  .gnb__nav{overscroll-behavior:contain;}
}

/* ============================================================
   2026-10-01 lsyclaude(추가)
   GNB 재디자인 적용 (Figma : desktop 26:2150 "글로벌-메뉴-재디자인" / mobile 26:2286 "모바일-글로벌-메뉴-재디자인")
   - 위쪽 기존 GNB 규칙은 삭제하지 않고 그대로 두고, 이 블록에서 덮어쓰는 방식으로 적용
     (되돌릴 때는 이 블록 전체 + :root 의 --gnb-height-mobile 변경분만 걷어내면 됨. 포인트 컬러는 --color-primary(#9A0000) 사용)
   - 상태 구분
     · 기본 상태 : 투명 배경 + 흰색 로고/메뉴/전화번호, 하단 라인 흰색 20%
     · 흰 배경 상태 : 흰 배경 + 컬러 로고 + #2F2D28 메뉴 + #9A0000 전화번호, 하단 라인 #808284 25%
       -> 데스크톱 마우스 오버(.gnb:hover / :focus-within), 스크롤 시(.gnb--solid, js),
          모바일 메뉴 오픈(.is-open), 상단 비주얼(.hero/.sub-visual)이 없는 페이지(.gnb--solid, js)
============================================================ */
.gnb{
  background:transparent;
  border-bottom-color:rgba(255,255,255,.2);
  /* 기존 transform 트랜지션(스크롤 숨김/노출)은 그대로 유지하고 배경/라인 색 전환만 추가 */
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.gnb.gnb--solid,
.gnb.is-open{
  background:#fff;
  border-bottom-color:rgba(128,130,132,.25);
}

/* 로고 2장 전환 (head.php : .gnb__logo-img--white / --color) */
.gnb__logo-img--color{display:none;}
.gnb.gnb--solid .gnb__logo-img--white,
.gnb.is-open .gnb__logo-img--white{display:none;}
.gnb.gnb--solid .gnb__logo-img--color,
.gnb.is-open .gnb__logo-img--color{display:block;}

/* 데스크톱 우측 전화번호 (모바일 메뉴 하단 .gnb__nav-foot 의 전화번호는 기존 스타일 유지) */
.gnb__right .gnb__call{
  gap:9px;
  font-weight:600;font-size:25px;color:#fff;
  transition:color .3s ease;
}
.gnb__right .gnb__call-ico{width:20px;height:20px;}
.gnb__right .gnb__call-ico--color{display:none;}
.gnb.gnb--solid .gnb__right .gnb__call{color:var(--color-primary);}
.gnb.gnb--solid .gnb__right .gnb__call-ico--white{display:none;}
.gnb.gnb--solid .gnb__right .gnb__call-ico--color{display:block;}

/* 모바일 메뉴 "더보기" 아이콘 - 기본 숨김(모바일 미디어쿼리에서만 노출) */
.gnb__menu-more{display:none;}

/* ---- Desktop (>=1200px) ---- */
@media (min-width:1200px){
  /* 데스크톱 마우스 오버/포커스 시에도 흰 배경 상태 */
  .gnb:hover,
  .gnb:focus-within{
    background:#fff;
    border-bottom-color:rgba(128,130,132,.25);
  }
  .gnb:hover .gnb__logo-img--white,
  .gnb:focus-within .gnb__logo-img--white{display:none;}
  .gnb:hover .gnb__logo-img--color,
  .gnb:focus-within .gnb__logo-img--color{display:block;}
  .gnb:hover .gnb__right .gnb__call,
  .gnb:focus-within .gnb__right .gnb__call{color:var(--color-primary);}
  .gnb:hover .gnb__right .gnb__call-ico--white,
  .gnb:focus-within .gnb__right .gnb__call-ico--white{display:none;}
  .gnb:hover .gnb__right .gnb__call-ico--color,
  .gnb:focus-within .gnb__right .gnb__call-ico--color{display:block;}

  /* 시안 : 로고 좌측 30px(276x47.7) / 전화번호 우측 26px */
  .gnb__inner{padding:0 26px 0 30px;position:relative;}
  .gnb__logo-img{height:48px;}

  /* 메뉴는 화면 정중앙 정렬 (시안 : 메뉴 묶음 중심 = 1920 화면 중심 960px)
     - transform(translateX(-50%))을 쓰면 안쪽 position:fixed 메가메뉴 패널의 기준이 nav로 바뀌어버리므로
       left:0/right:0 + margin:auto + width:max-content 방식으로 중앙 정렬 */
  .gnb__nav{
    position:absolute;
    top:0;left:0;right:0;
    margin:0 auto;
    width:max-content;
    height:100%;
  }
  /* 시안 : 대메뉴/서브메뉴 모두 폭 100px 칸 + 31px 간격(131px 피치), 텍스트 가운데 정렬 */
  .gnb__menu{gap:31px;}
  .gnb__menu-item{width:100px;}
  .gnb__menu-link{
    width:100%;
    justify-content:center;
    font-weight:500;font-size:16px;color:#fff;
    transition:color .3s ease;
  }
  .gnb:hover .gnb__menu-link,
  .gnb:focus-within .gnb__menu-link,
  .gnb.gnb--solid .gnb__menu-link{color:var(--color-text);}

  /* 활성 표시선 : 시안 #9A0000, 두께 3px, 폭 100px(칸 전체), 헤더 하단 라인(y=87)에서 시작해 아래로 3px
     (좌->우 확장 애니메이션은 기존 그대로 유지) */
  .gnb__menu-link::after{
    height:3px;
    bottom:-3px;
    background:var(--color-primary);
    z-index:1000; /* 바로 아래 붙는 메가메뉴 패널(z-index:999)보다 위에 보이도록 */
  }

  /* 메가메뉴 패널 : 헤더 아래 189px(헤더 포함 전체 277px), 그림자 0 3px 10px rgba(0,0,0,.16) */
  .gnb__megamenu{
    border-top:none;
    box-shadow:0 3px 10px rgba(0,0,0,.16);
  }
  .gnb__mega-inner{
    padding:0;
    min-height:189px;
  }
  /* 서브메뉴 컬럼 : 헤더 하단에서 34px 아래 시작, 항목 간격 20px, 폭 100px
     (가로 위치는 기존 js syncMegaColumns()가 대메뉴 중심에 맞춰 계산 - 그대로 사용) */
  .gnb__mega-col{
    top:34px;
    gap:20px;
    width:100px;
    min-width:0;
  }
  .gnb__mega-col a{
    font-weight:500;font-size:16px;line-height:19px;color:var(--color-text);
  }
  .gnb__mega-col a:hover{color:var(--color-primary);}
}

/* ---- Mobile / Tablet (<1200px) ---- */
@media (max-width:1199.98px){
  /* 시안 : 로고 좌측 13px(179x31) / 햄버거 우측 20px(19x13) */
  .gnb__inner{padding:0 20px 0 13px;}
  .gnb__logo-img{height:31px;}

  /* 햄버거 : 1px 선 3개(19x13), 기본 흰색 / 흰 배경 상태에서는 #2F2D28
     - 터치 영역 확보를 위해 버튼은 39px로 키우고 margin-right:-10px 로 아이콘 위치는 시안 그대로 유지 */
  .gnb__menu-toggle{width:39px;height:39px;gap:5px;margin-right:-10px;}
  .gnb__menu-toggle span{width:19px;height:1px;background:#fff;}
  .gnb.gnb--solid .gnb__menu-toggle span,
  .gnb.is-open .gnb__menu-toggle span{background:var(--color-text);}
  /* 열림(X) : 선 간격이 6px(1px+5px)로 바뀌어 이동 거리도 8px -> 6px */
  .gnb__menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .gnb__menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* 메뉴 패널 : 시안은 화면 전체 폭(기존 min(360px,86%) 사이드 패널 -> 100%),
     첫 메뉴가 헤더 라인에서 30px 아래 시작 */
  .gnb__nav{width:100%;padding:30px 0 24px;}
  .gnb__mega-wrap{width:100%;padding:0 46px 0 37px;}
  /* 대메뉴 한 줄 : 높이 63px, 16px Medium, 우측에 더보기 아이콘(17px) */
  .gnb__menu-link{
    display:flex;align-items:center;justify-content:space-between;
    height:63px;padding:0;
    font-weight:500;font-size:16px;color:var(--color-text);
  }
  .gnb__menu-more{display:block;width:17px;height:17px;flex-shrink:0;}
  /* 서브메뉴(아코디언) : 펼친 상태 시안이 없어 기존 스타일 유지, 좌측 여백만 대메뉴 기준으로 맞춤 */
  .gnb__submenu li a{padding:10px 16px;}
  /* 하단 전화/관심고객등록 영역은 기존대로 유지(사용자 확인), 좌우 여백만 메뉴와 맞춤 */
  .gnb__nav-foot{padding:20px 46px 0 37px;}
}

/* ============================================================
   Hero (풀페이지 swiper 롤링배너)
============================================================ */
.hero{
  position:relative;
  width:100%;
  height:100vh;          /* 풀페이지 */
  min-height:520px;
  overflow:hidden;
}
.hero__swiper,
.hero__swiper .swiper-wrapper,
.hero__swiper .swiper-slide{
  width:100%;height:100%;
}
.hero__slide{position:relative;}
.hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* 2026-09-22 lsyclaude(추가) : 배경 줌인 모션 - 기본 상태는 원본 크기(scale(1)),
     슬라이드가 활성화(.swiper-slide-active)될 때 아래 heroBgZoom 애니메이션으로 서서히 확대됨.
     transform-origin은 중앙 고정, .hero(부모)에 overflow:hidden이 이미 있어 확대되어도
     화면 밖으로 비어져 보이지 않음. */
  transform:scale(1);
  transform-origin:center center;
  will-change:transform;
}
.hero__dim{
  position:absolute;inset:0;
  background:rgba(0,0,0,.25);
}
/* 2026-09-21 lsyclaude(수정) : 시안(swiper-slide-1~4.jpg) 4장을 픽셀 단위로 실측한 결과,
   4개 슬라이드 모두 카피 좌측 시작점이 가로 기준 약 19.9%(1920px 기준 382px), 상단(뱃지 기준)이
   세로 기준 약 28~29% 지점으로 동일하게 고정되어 있음을 확인 -> 기존 top:50%+translateY(-10%)
   (세로 중앙 부근에 임의로 배치했던 값)는 실제 시안보다 카피가 아래쪽에 위치하는 문제가 있어
   top을 세로 28% 고정값으로 변경(translateY 트랜스폼 제거, 뱃지가 항상 이 지점에서 시작).
   가로 위치(left)는 1200px 이상 데스크톱 구간에서 시안 실측값에 맞춰 아래 미디어쿼리에서 재정의.
   기존 값은 삭제하지 않고 주석으로 보존:
   .hero__copy{ left:5%; top:50%; transform:translateY(-10%); max-width:720px; color:var(--color-white); z-index:2; } */
.hero__copy{
  position:absolute;
  left:5%;
  top:28%;
  max-width:720px;
  color:var(--color-white);
  z-index:2;
}
.hero__logo-line{
  display:flex;align-items:center;gap:12px;
  font-family:'Pretendard';font-weight:700;font-size:18px;
  margin:0 0 16px;
}
.hero__title{
  font-family:'Pretendard';font-weight:800;
  font-size:clamp(33px,5.5vw,77px);
  line-height:1.25;
  margin:0 0 20px;
}
.hero__desc{
  font-family:'Pretendard';font-weight:500;
  font-size:clamp(16px,1.8vw,30px);
  line-height:1.5;
  letter-spacing:-0.02em;
  margin:0;
}

/* 2026-09-22 lsyclaude(추가) : 모바일 해상도에서 .hero__copy 하위 텍스트(로고 라인/타이틀/설명)를
   가운데 정렬로 변경(사용자 요청). .hero__logo-line은 flex 행이라 justify-content도 함께 center로
   맞춰야 뱃지까지 정확히 가운데로 옵니다. 사이트 공통 모바일 기준(767.98px, .reasons/.vision 등과 동일)
   을 그대로 사용했습니다.
   2026-09-22 lsyclaude(수정) : text-align:center만으로는 텍스트만 박스 안에서 가운데 정렬될 뿐,
   .hero__copy 박스 자체는 여전히 left:5%(왼쪽 5% 지점, 내용 너비만큼만 차지)에 그대로 있어 화면 전체
   기준으로는 왼쪽에 쏠려 보이는 문제가 있었습니다(사용자 확인). left:50% + transform:translateX(-50%)로
   박스 자체를 화면 가로 중앙에 위치시키고, width:90%를 줘서 좌우 여백이 균등한 폭을 갖도록 했습니다.
   기존(텍스트만 가운데 정렬하던) 규칙은 삭제하지 않고 주석으로 보존:
   .hero__copy{text-align:center;} */
@media (max-width:767.98px){
  .hero__copy{
    left:50%;
    transform:translateX(-50%);
    width:90%;
    text-align:center;
  }
  .hero__logo-line{justify-content:center;}
}

/* ------------------------------------------------------------
   2026-09-22 lsyclaude(수정)
   Hero 롤링배너 텍스트 모션 - "2차 버전(줌인+위로, 부드럽게)"로 다시 변경
   - 배경 줌인(heroBgZoom)은 처음부터 계속 그대로 유지, 카피 등장 모션만 계속 교체되는 부분입니다.
   - 진행 경과 : 1차(페이드+살짝 위로 이동) -> 2차(줌인+위로, "더 부드럽게" 피드백 반영) ->
     3차(박력있게, back-out 오버슈트) -> 4차(분양사이트 톤 추천 - "우아한 리빌" clip-path 와이프,
     한 차례 서버 반영함) -> 다시 2차로 요청하셔서 이번에 2차로 교체함.
   - 4차(와이프+빛나는 경계선) 코드는 삭제하지 않고 바로 아래에 주석으로 보존해뒀습니다.
     다시 4차로 돌아가고 싶으시면, 아래 활성 코드(@keyframes heroLineIn ~ 관련 규칙들)를
     주석 처리하고 그 아래 보존해둔 4차 블록의 주석만 해제하면 됩니다.
   - index.php의 .hero__title / .hero__desc 줄바꿈은 계속 <span class="hero__line">텍스트</span>
     구조를 그대로 사용하므로 이번 변경에서도 index.php 쪽 수정은 없습니다.
------------------------------------------------------------ */
@keyframes heroBgZoom{
  from{transform:scale(1);}
  to{transform:scale(1.05);}
}
.swiper-slide-active .hero__bg{
  /* 슬라이드 노출 시간(autoplay delay 5000ms)보다 살짝 길게(7s) 잡아 끊기는 느낌 없이 계속 확대되는 중에 다음 슬라이드로 전환되도록 함 */
  animation:heroBgZoom 7s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ---- 2차 버전(현재 사용 중) : 작게 줌인되면서 아래에서 위로 부드럽게 올라옴 ---- */
@keyframes heroLineIn{
  from{opacity:0;transform:translateY(42px) scale(.94);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* 기본 상태 : 슬라이드가 활성화되기 전에는 카피 요소들을 숨겨둠(살짝 아래+작게 축소된 상태, 투명) */
.hero__logo-line,
.hero__title .hero__line,
.hero__desc .hero__line{
  opacity:0;
  transform:translateY(42px) scale(.94);
  transform-origin:left bottom;
}
.hero__title .hero__line,
.hero__desc .hero__line{
  display:block;   /* <br> 대신 span을 줄 단위 블록으로 만들어 기존과 동일하게 줄바꿈되도록 함 */
}
.swiper-slide-active .hero__logo-line,
.swiper-slide-active .hero__title .hero__line,
.swiper-slide-active .hero__desc .hero__line{
  animation:heroLineIn .85s cubic-bezier(0.33,1,0.68,1) forwards;
  transform-origin:left bottom;
}
.swiper-slide-active .hero__logo-line{animation-delay:.25s;}
.swiper-slide-active .hero__title .hero__line:nth-child(1){animation-delay:.41s;}
.swiper-slide-active .hero__title .hero__line:nth-child(2){animation-delay:.57s;}
.swiper-slide-active .hero__desc .hero__line:nth-child(1){animation-delay:.73s;}
.swiper-slide-active .hero__desc .hero__line:nth-child(2){animation-delay:.89s;}

/* 모션 최소화(prefers-reduced-motion) 설정을 켠 사용자는 애니메이션 없이 바로 보이도록 처리 */
@media (prefers-reduced-motion:reduce){
  .hero__bg{animation:none !important;}
  .hero__logo-line,
  .hero__title .hero__line,
  .hero__desc .hero__line{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}

/* ----------------------------------------------------------------------
   ↓↓↓ 4차 버전("우아한 리빌" clip-path 와이프 + 빛나는 경계선, 2026-09-22 한 차례 서버 반영했던 코드)
   현재는 사용 중지 - 다시 쓰려면 위 2차 버전 활성 코드를 주석 처리하고 아래 블록만 주석 해제할 것
   (이름이 같은 @keyframes heroLineIn / .hero__logo-line 등이 동시에 활성화되면 충돌하므로
   반드시 둘 중 하나만 켜져 있어야 합니다)

@keyframes heroLineIn{
  from{clip-path:inset(-20% 100% -20% 0);}
  to{clip-path:inset(-20% 0% -20% 0);}
}
@keyframes heroLineEdgeIn{
  0%{left:0%;opacity:1;}
  92%{opacity:1;}
  100%{left:100%;opacity:0;}
}
.hero__logo-line,
.hero__title .hero__line,
.hero__desc .hero__line{
  opacity:1;
  clip-path:inset(-20% 100% -20% 0);
  position:relative;
}
.hero__title .hero__line,
.hero__desc .hero__line{
  display:block;
}
.hero__logo-line::after,
.hero__title .hero__line::after,
.hero__desc .hero__line::after{
  content:'';
  position:absolute;
  top:-15%;bottom:-15%;
  left:0%;
  width:3px;
  background:var(--color-primary);
  box-shadow:0 0 16px 3px rgba(154,0,0,.85);
  opacity:0;
  pointer-events:none;
}
.swiper-slide-active .hero__logo-line,
.swiper-slide-active .hero__title .hero__line,
.swiper-slide-active .hero__desc .hero__line{
  animation:heroLineIn 1.1s linear forwards;
}
.swiper-slide-active .hero__logo-line::after,
.swiper-slide-active .hero__title .hero__line::after,
.swiper-slide-active .hero__desc .hero__line::after{
  animation:heroLineEdgeIn 1.1s linear forwards;
}
.swiper-slide-active .hero__logo-line,
.swiper-slide-active .hero__logo-line::after{animation-delay:.3s;}
.swiper-slide-active .hero__title .hero__line:nth-child(1),
.swiper-slide-active .hero__title .hero__line:nth-child(1)::after{animation-delay:.5s;}
.swiper-slide-active .hero__title .hero__line:nth-child(2),
.swiper-slide-active .hero__title .hero__line:nth-child(2)::after{animation-delay:.68s;}
.swiper-slide-active .hero__desc .hero__line:nth-child(1),
.swiper-slide-active .hero__desc .hero__line:nth-child(1)::after{animation-delay:.88s;}
.swiper-slide-active .hero__desc .hero__line:nth-child(2),
.swiper-slide-active .hero__desc .hero__line:nth-child(2)::after{animation-delay:1.04s;}

@media (prefers-reduced-motion:reduce){
  .hero__bg{animation:none !important;}
  .hero__logo-line,
  .hero__title .hero__line,
  .hero__desc .hero__line{
    animation:none !important;
    clip-path:none;
  }
  .hero__logo-line::after,
  .hero__title .hero__line::after,
  .hero__desc .hero__line::after{
    animation:none !important;
    display:none;
  }
}
↑↑↑ 4차 버전 보존 블록 끝
---------------------------------------------------------------------- */

/* 2026-09-21 lsyclaude(수정) : 사용자가 전달한 화살표 시안(원형+화살표가 하나로 합쳐진 svg)에 맞춰
   기존 CSS(::before 가상요소 + 반투명 원형 배경)로 직접 그리던 방식을 제거하고, index.php에 인라인으로
   삽입한 svg를 그대로 보여주는 방식으로 변경. 버튼 자체의 원형 배경/보더는 svg 안에 이미 포함되어 있어
   .hero__nav에는 배경을 따로 주지 않음.
   기존 코드는 삭제하지 않고 주석으로 보존:
.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.hero__nav::before{
  content:'';
  width:12px;height:12px;
  border-top:2px solid #fff;border-right:2px solid #fff;
}
.hero__nav--prev{left:24px;}
.hero__nav--prev::before{transform:rotate(-135deg) translate(2px,-2px);}
.hero__nav--next{right:24px;}
.hero__nav--next::before{transform:rotate(45deg) translate(-2px,-2px);}
*/
.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.hero__nav-icon{width:100%;height:100%;display:block;}
/* next(다음) 버튼은 prev와 같은 svg를 좌우 반전해서 사용 (실제 next 전용 svg를 받으면 이 반전 규칙은 제거) */
.hero__nav-icon--next{transform:scaleX(-1);}
.hero__nav.swiper-button-disabled{opacity:.35;pointer-events:none;}

/* 2026-09-21 lsyclaude(수정) : 화살표를 컨텐츠 컨테이너(1364px) 기준이 아니라 사용자 요청대로
   "브라우저 좌우 양 끝"에 고정되도록 변경 — 화면 폭에 관계없이 항상 뷰포트 가장자리에서
   일정 여백(20px)만큼 떨어진 위치에 고정. 기존에는 1200px 이상에서 컨텐츠 컨테이너 좌우 바깥쪽에
   맞춰 정렬되도록 계산식을 썼었음.
   기존 코드는 삭제하지 않고 주석으로 보존: .hero__nav--prev{left:24px;} .hero__nav--next{right:24px;} */
.hero__nav--prev{left:20px;}
.hero__nav--next{right:20px;}

/* 2026-09-16 lsyclaude : 1200px 미만에서는 좌우 화살표가 카피 영역과 겹쳐 숨김 처리 (스와이프/자동재생으로 대체) */
@media (max-width:1199.98px){
  .hero__nav{display:none;}
}

@media (min-width:1200px){
  /* 2026-09-21 lsyclaude(수정) : left 값을 컨텐츠 컨테이너(1364px) 기준 중앙정렬 계산식 대신
     시안 실측값(가로 약 19.9% = 1920px 기준 382px)에 맞춘 20% 고정값으로 변경.
     기존 값은 삭제하지 않고 주석으로 보존: left:calc((100% - var(--content-max)) / 2); */
  .hero__copy{left:10%;max-width:820px;}
  /* 2026-09-21 lsyclaude(수정) : 화살표는 이제 브라우저 좌우 끝 고정(위 .hero__nav--prev/--next 참고)이라
     이 미디어쿼리에서 별도로 재정의하지 않음. 기존 코드는 삭제하지 않고 주석으로 보존:
     .hero__nav{left:calc((100% - var(--content-max)) / 2 - 20px);}
     .hero__nav--next{right:calc((100% - var(--content-max)) / 2 - 20px);left:auto;} */
}

/* 2026-09-16 lsyclaude : Figma(10:2)에 추가된 슬라이드 3,4 반영 - 딤/텍스트 그림자 변형 */
.hero__slide--no-dim .hero__dim{display:none;}
.hero__slide--dim-10 .hero__dim{background:rgba(0,0,0,.1);}
.hero__title--shadow{text-shadow:0 3px 25px rgba(0,0,0,.39);}
.hero__desc--shadow{text-shadow:0 3px 15px rgba(0,0,0,.48);}

/* ============================================================
   2026-10-02 lsyclaude(추가)
   메인배너 디자인 변경 (Figma 46:2295 "메인-메인배너-변경-1002", 1920x1080 기준) - 배너 2개
   - 새 슬라이드에는 .hero__slide--v2 클래스를 붙이고, 그 범위 안에서만 기존 hero 규칙을 덮어씀
     → 위쪽 기존 .hero__copy/.hero__title/.hero__desc 규칙은 삭제/수정 없이 그대로 보존
       (기존 4개 슬라이드로 되돌릴 때 CSS는 손댈 필요 없음)
   - 시안 실측값 (1920 기준)
       카피 좌측 : 88px(≒4.6%) / 소개문구는 타이틀보다 6px 안쪽(94px)
       카피 하단 : 두 배너 모두 약 498px 지점에서 끝남(1080 기준 위에서 46%) → bottom:54%로 하단 기준 정렬
       소개문구(.hero__eyebrow) : slide1 Pretendard Light 19px/25px, slide2(리스트형) Regular 19px/30px
       타이틀(.hero__title)      : KoPubBatang Medium 65px/80px, 흰색 + 레드 강조(#9A0000)
       설명(.hero__desc)        : Pretendard Regular 17px/43px, 강조 SemiBold 레드
   - 시안에 딤 레이어/텍스트 그림자 없음 → 새 슬라이드 마크업에서 .hero__dim 제거
   - 모바일 시안은 없어 PC 비율 기준으로 축소(clamp), 모바일 가운데 정렬은 기존 규칙(767.98px 이하) 그대로 적용
============================================================ */
.hero__slide--v2 .hero__copy{
  top:auto;
  bottom:45%;
}
.hero__slide--v2 .hero__eyebrow{
  font-family:'Pretendard';font-weight:300;
  font-size:clamp(14px,0.99vw,20px);
  line-height:1.316;          /* 25px / 19px */
  color:var(--color-white);
  margin:0 0 15px;
}
.hero__slide--v2 .hero__eyebrow--list{
  font-weight:400;
  line-height:1.579;color:#ff; /* color:#e11830; */
  margin-bottom:18px;
}
.hero__slide--v2 .hero__title{
  font-family:'KoPubWorldBatang','Noto Serif KR','Nanum Myeongjo',serif;
  font-weight:500;
  font-size:clamp(32px,3.385vw,65px);   /* 65px / 1920px = 3.385vw */
  line-height:1.231;          /* 80px / 65px */
  letter-spacing:0;
  color:var(--color-white);
  margin:0;
}
.hero__slide--v2 .hero__desc{
  font-family:'Pretendard';font-weight:400;
  font-size:clamp(14px,0.885vw,17px);
  line-height:1.6;
  letter-spacing:0;
  color:var(--color-white);
  margin:12px 0 0;
}
/* 레드 강조 단어 : 타이틀(em)은 굵기 유지, 설명(strong)은 SemiBold */
.hero__slide--v2 .hero__point{
  font-style:normal;
  color:var(--color-primary);
}
.hero__slide--v2 strong.hero__point{font-weight:600;}
/* 2026-10-02 lsyclaude(추가) : slide 3 설명문의 흰색 SemiBold 강조("라이프") - 브라우저 기본 strong(700) 대신 시안 굵기 600 */
.hero__slide--v2 .hero__desc strong{font-weight:600;}

@media (min-width:1200px){
  .hero__slide--v2 .hero__copy{left:4.6%;}               /* 88px / 1920px */
  /* 2026-10-02 lsyclaude(추가) : slide 3 타이틀 2번째 줄(서울 서남권 비전의 중심에 서다)이 시안 기준 872px로,
     기존 .hero__copy max-width:820px(1200px 이상 구간)에 걸려 3줄로 줄바꿈되는 문제 → 새 배너에서만 최대폭 960px로 확장 */
  .hero__slide--v2 .hero__copy{max-width:960px;}
  .hero__slide--v2 .hero__eyebrow{padding-left:6px;}     /* 시안 94px - 88px (명조 글자 좌측 여백 보정) */
  .hero__slide--v2 .hero__desc{line-height:43px;margin-top:10px;}   /* 시안 : 타이틀 하단 ~ 설명 상단 10px */
}

/* 새 배너 카피 등장 모션 : 기존 heroLineIn(2차 버전) 그대로 사용, 소개문구 줄 → 타이틀 → 설명 순서로 딜레이만 재지정 */
.hero__slide--v2 .hero__eyebrow .hero__line{
  display:block;
  opacity:0;
  transform:translateY(42px) scale(.94);
  transform-origin:left bottom;
}
.hero__slide--v2.swiper-slide-active .hero__eyebrow .hero__line{
  animation:heroLineIn .85s cubic-bezier(0.33,1,0.68,1) forwards;
}
.hero__slide--v2.swiper-slide-active .hero__eyebrow .hero__line:nth-child(1){animation-delay:.25s;}
.hero__slide--v2.swiper-slide-active .hero__eyebrow .hero__line:nth-child(2){animation-delay:.35s;}
.hero__slide--v2.swiper-slide-active .hero__eyebrow .hero__line:nth-child(3){animation-delay:.45s;}
.hero__slide--v2.swiper-slide-active .hero__eyebrow .hero__line:nth-child(4){animation-delay:.55s;}
.hero__slide--v2.swiper-slide-active .hero__title .hero__line:nth-child(1){animation-delay:.65s;}
.hero__slide--v2.swiper-slide-active .hero__title .hero__line:nth-child(2){animation-delay:.81s;}
.hero__slide--v2.swiper-slide-active .hero__desc .hero__line:nth-child(1){animation-delay:.97s;}
/* 2026-10-02 lsyclaude(추가) : slide 3처럼 소개문구(.hero__eyebrow) 없이 타이틀이 첫 요소인 배너는
   소개문구 딜레이만큼(약 .4s) 빈 화면으로 기다리지 않도록 타이틀부터 바로 등장하게 딜레이를 앞당김
   (마크업에 별도 클래스 없이 .hero__title:first-child 로 자동 판별) */
.hero__slide--v2.swiper-slide-active .hero__copy > .hero__title:first-child .hero__line:nth-child(1){animation-delay:.25s;}
.hero__slide--v2.swiper-slide-active .hero__copy > .hero__title:first-child .hero__line:nth-child(2){animation-delay:.41s;}
.hero__slide--v2.swiper-slide-active .hero__copy > .hero__title:first-child + .hero__desc .hero__line:nth-child(1){animation-delay:.57s;}

@media (max-width:767.98px){
  .hero__slide--v2 .hero__eyebrow .hero__line,
  .hero__slide--v2 .hero__title .hero__line,
  .hero__slide--v2 .hero__desc .hero__line{transform-origin:center bottom;}
	.hero__slide--v2 .hero__copy{bottom:62%;}
	.hero__slide--copy-up .hero__copy{bottom:68%;}
}
@media (prefers-reduced-motion:reduce){
  .hero__slide--v2 .hero__eyebrow .hero__line{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}

/* ============================================================
   하단 고정 버튼 (bottom-fixed-button)
============================================================ */
.bottom-fixed{
  position:fixed;
  left:0;right:0;bottom:40px;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;gap: 16px;
  z-index:900;
}
.bottom-fixed__btn{
  flex:1 1 50%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:64px;
  font-family:'Pretendard';
  color:var(--color-white);
  border:1px solid rgba(255,255,255,.31);
  white-space:nowrap;
  overflow:hidden;
  padding:0 10px;
}
.bottom-fixed__ico{width:27px;height:27px;flex-shrink:0;filter:brightness(0) invert(1);}
.bottom-fixed__btn--primary{
  background:rgba(154,0,0,.86);
  font-weight:500;font-size:22px;transition: background .5s ease;
}
.bottom-fixed__btn--primary:hover{background:rgba(154, 0, 0, 1);}
.bottom-fixed__btn--secondary{
  background:rgba(128, 130, 132, .86);
  font-weight:600;font-size:22px;transition: background .5s ease;
}
.bottom-fixed__btn--secondary:hover{background:rgba(128, 130, 132, 1);}
/* 2026-09-16 lsyclaude : 좁은 화면에서 "분양문의"/전화번호가 줄바꿈되지 않도록 세로로 묶어서 배치 */
.bottom-fixed__info{
  display:flex;/* flex-direction:column; */align-items:center;line-height:1.2;gap:15px;
}
.bottom-fixed__num{font-weight:700;font-size:30px;}

@media (min-width:1200px){
  .bottom-fixed__btn{height:63px;padding:0 10px;border-radius: 3px;}
  .bottom-fixed__btn--primary{font-size:19px;}
  .bottom-fixed__btn--secondary{font-size:16px;}
  .bottom-fixed__info{flex-direction:row;align-items:center;gap:16px;}
  .bottom-fixed__btn--secondary .bottom-fixed__label{font-size:19px;}
  .bottom-fixed__num{font-size:28px;}
}

/* 2026-09-21 lsyclaude : 메인페이지 모바일 시안(hero~location 구간) 반영
   - 하단 고정버튼(관심고객등록/분양문의)이 시안에서는 가로 50:50 분할이 아니라
     세로로 쌓인 풀폭 2단 구조로 되어 있어, 767px 이하에서만 이 구조로 재정의
   - '분양문의' 버튼은 회색 배경 대신 흰 배경 + 레드 포인트 컬러 톤으로 변경(시안 반영)
   - 아이콘은 흰색 반전(filter) 처리를 빼서 원본 svg 색상 그대로 노출되게 했는데,
     실제 아이콘 파일을 올려주시면 색상이 시안과 다를 수 있어 확인 후 조정이 필요할 수 있습니다.
   - 가로 50:50 분할이던 기존 공통 규칙(위쪽 .bottom-fixed/.bottom-fixed__btn 등, 1200px 이상 규칙)은
     삭제하지 않고 그대로 두었으며, 아래 미디어쿼리가 모바일 폭에서만 덮어씁니다. */
@media (max-width:767.98px){
  /* 2026-09-21 lsyclaude(재수정) : 화면 최하단에 딱 붙지 않고 바닥에서 20px 띄운 위치에 떠있도록 변경(사용자 요청).
     기존 값(bottom:0, 화면 하단에 완전히 밀착)은 삭제하지 않고 주석으로 보존: bottom:0; */
  .bottom-fixed{flex-direction:column;bottom:20px; gap:3px}
  /* 2026-09-21 lsyclaude(재수정) : 세로(column) 방향에서는 flex-basis가 메인 축(=세로) 크기를 결정하는데,
     기존 flex:1 1 100%의 flex-basis:100%가 height:73px보다 우선 적용되어 버튼 높이가 내용물 크기에
     맞춰지고 73px가 무시되는 문제가 있었음(사용자가 직접 원인 지적) ->
     flex-basis 자체를 73px로 고정하고 grow/shrink는 0으로 꺼서, 내용 길이와 무관하게 정확히 73px가 되도록 수정.
     기존(잘못 적용됐던) 규칙은 삭제하지 않고 주석으로 보존: flex:1 1 100%;width:100%;height:73px;
     2026-09-21 lsyclaude(추가 재수정) : 버튼 가로폭을 100%(꽉 채움) 대신 90%로 줄이고 가운데 정렬(사용자 요청).
     기존 값(width:100%, 여백 없이 꽉 채움)은 삭제하지 않고 주석으로 보존: width:100%; */
  .bottom-fixed__btn{flex:0 0 50px;width:90%;margin:0 auto;border-radius: 5px;}
  /* 2026-09-21 lsyclaude(추가) : 버튼 배경색에 투명도 80% 적용(사용자 요청) - 아래로 비치는 페이지 컨텐츠가
     은은하게 보이는 반투명 배경. 텍스트/아이콘은 그대로 불투명 유지하기 위해 button 전체 opacity가 아니라
     background만 rgba(원래 hex 컬러 + alpha 0.8)로 변경. --color-primary -> rgba(154,0,0,.8),
     --color-gray(#808284) -> rgba(128,130,132,.8) */
  .bottom-fixed__btn--primary{
    background:rgba(154,0,0,.8); font-size: 14px;
  }
  .bottom-fixed__btn--secondary{font-size: 14px;background:rgba(128,130,132,.8);}
  .bottom-fixed__ico {width: 22px;height: 22px;}
  .bottom-fixed__btn--secondary .bottom-fixed__ico{filter:none;}
  .bottom-fixed__btn--secondary .bottom-fixed__num{font-size: 24px;}
}

/* 2026-10-07 lsyclaude(추가) : 하단 고정버튼 등장 모션 (사용자 요청)
   - 페이지 로드 직후에는 안 보이다가 1.5초 뒤 페이드업(아래 → 위 + 투명 → 불투명)으로 나타남
   - AOS 대신 CSS animation 사용 : .bottom-fixed 는 position:fixed 라 항상 화면 안에 있어서
     스크롤 기준인 AOS로는 "로드 후 딜레이" 제어가 맞지 않고, aos.js 로드 여부와도 무관하게 동작하도록 하기 위함
   - animation-fill-mode:both : 딜레이 동안 시작 상태(투명/아래)를 유지 → 처음에 안 보임
   - visibility:hidden 을 같이 걸어 안 보이는 동안 버튼이 클릭(터치)되지 않도록 처리
   - 딜레이 시간 조정 : 아래 animation 의 두 번째 시간값(1.5s)만 바꾸면 됨 (예: 1s ~ 2s)
   - 버튼 자체(.bottom-fixed__btn)에 transform 을 쓰는 다른 규칙이 없어 기존 hover(background 전환)와 충돌 없음 */
@keyframes bottomFixedFadeUp{
  from{opacity:0;visibility:hidden;transform:translate3d(0,30px,0);}
  to{opacity:1;visibility:visible;transform:translate3d(0,0,0);}
}
.bottom-fixed__btn{
  animation:bottomFixedFadeUp .8s 1.5s cubic-bezier(.215,.61,.355,1) both; /* 지속시간 0.8s / 딜레이 1.5s / ease-out-cubic(AOS와 동일 곡선) */
}
/* 모션 최소화(prefers-reduced-motion) 설정 사용자는 딜레이·모션 없이 바로 노출 */
@media (prefers-reduced-motion:reduce){
  .bottom-fixed__btn{animation:none;}
}

/* 2026-10-07 lsyclaude(추가) : GNB 첫 로드 등장 모션 - 메인페이지 전용 (사용자 요청)
   - head.php 에서 메인페이지(_INDEX_)일 때만 .gnb--intro 클래스가 붙음 → 서브페이지는 영향 없음
   - 로드 후 0.5s 딜레이 → 0.8s 동안 위에서 아래로 내려오며 페이드인 (하단 고정버튼 1.5s 보다 먼저 등장)
   - animation-fill-mode 를 both 가 아닌 backwards 로 지정한 이유 (중요) :
     · .gnb 는 스크롤 숨김/노출을 transform 으로 처리하고 있어(js/script.js), 모션이 끝난 뒤에도 animation 의
       transform 이 남아 있으면(forwards/both) 스크롤 숨김이 동작하지 않음
     · 또 .gnb 에 transform 이 남아 있으면 안쪽 position:fixed 요소(모바일 메뉴 패널 .gnb__nav, 딤 .gnb__dim,
       데스크톱 메가메뉴)의 위치 기준이 화면이 아니라 .gnb 로 바뀌어 메뉴가 틀어짐
     · backwards 는 딜레이 동안만 시작 상태(안 보임)를 유지하고, 모션이 끝나면 animation 스타일이 완전히 빠짐
       → 이후에는 기존 GNB 동작 그대로
   - 모션 중(0.5s~1.3s)에는 스크롤 숨김 transform 이 잠시 적용되지 않음 (모션 종료 후 정상)
   - visibility:hidden 으로 안 보이는 동안 메뉴 클릭/hover 차단 */
@keyframes gnbIntroFadeDown{
  from{opacity:0;visibility:hidden;transform:translate3d(0,-100%,0);}
  to{opacity:1;visibility:visible;transform:translate3d(0,0,0);}
}
.gnb.gnb--intro{
  animation:gnbIntroFadeDown .8s .5s cubic-bezier(.215,.61,.355,1) backwards; /* 지속 0.8s / 딜레이 0.5s / ease-out-cubic */
}
@media (prefers-reduced-motion:reduce){
  .gnb.gnb--intro{animation:none;}
}

/* 2026-10-07 lsyclaude(추가) : 서브 상단 배너 배경 줌인 (모든 서브페이지 공통, 사용자 요청)
   - 메인 Hero 배경과 같은 @keyframes heroBgZoom(scale 1 → 1.05) 재사용, 7초 동안 천천히 확대 후 유지(forwards)
   - .sub-visual 에 overflow:hidden 이 이미 있어 확대돼도 배너 밖으로 넘치지 않음
   - 배너 문구 fade-up 은 _inc/visual.php 의 data-aos(AOS) 로 처리 */
.sub-visual__bg{
  transform-origin:center center;
  animation:heroBgZoom 7s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@media (prefers-reduced-motion:reduce){
  .sub-visual__bg{animation:none;}
}

/* 2026-10-07 lsyclaude(추가) : 관심고객등록 조감도(.lead__media) 배경 줌인 (사용자 요청 - fade-up 대신)
   - tail.php 의 data-aos="lead-zoom"(직접 만든 이름) → 화면에 들어오면 AOS가 .aos-animate 를 붙이고, 그때 이미지가 7초 동안 1.05배로 천천히 확대
   - 이미지가 처음부터 보이는 상태에서 확대만 되므로, aos.js 가 없거나 '동작 줄이기' 사용자는 확대 없이 그대로 보임
   - transition 을 .aos-animate 상태에만 걸어서, 화면에서 벗어나 클래스가 빠질 때는 즉시 원래 크기로 돌아감(다시 들어오면 처음부터 줌인)
   - 확대된 이미지가 영역 밖으로 넘치지 않도록 .lead__media 에 overflow:hidden 추가
   - 모바일(767px 이하)은 기존 규칙대로 .lead__media 자체가 숨김 */
.lead__media{overflow:hidden;}
.lead__media img{
  transform:scale(1);
  transform-origin:center center;
}
.lead__media.aos-animate img{
  transform:scale(1.05);
  transition:transform 7s cubic-bezier(0.25,0.46,0.45,0.94); /* 메인 Hero heroBgZoom 과 같은 곡선 */
}

/* ============================================================
   2026-09-22 lsyclaude
   위로가기(Back to Top) 버튼 (.totop)
   - 우측 하단 고정, 평소엔 숨김(opacity:0) 상태 -> tail.php 하단 스크립트에서 스크롤 300px 이상
     내려가면 .totop--show 클래스를 붙여줌 -> 서서히 페이드인 + 위로 슬라이드
   - 아이콘은 별도 svg 없이, 위쪽 .hero__nav 화살표와 동일한 방식(테두리 2개 + rotate)으로 그림
   - bottom 값은 하단 고정 버튼(.bottom-fixed, 관심고객등록/분양문의)과 겹치지 않도록 그 위쪽에
     배치한 추정치입니다. .bottom-fixed 마크업이 이 파일에는 없어 실제 화면에서 겹쳐 보이면
     아래 bottom 값만 조정하면 됩니다.
============================================================ */
.totop{
  position:fixed;
  right:16px;
  bottom:150px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--color-text);
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  z-index:950;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.totop.totop--show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.totop:hover{background:var(--color-primary);}
.totop__arrow{
  width:12px;height:12px;
  border-top:2px solid var(--color-white);
  border-right:2px solid var(--color-white);
  transform:rotate(-45deg) translate(-1px,1px);
}

@media (min-width:768px){
  .totop{right:24px;bottom:180px;width:52px;height:52px;}
  .totop__arrow{width:14px;height:14px;}
}
@media (min-width:1200px){
  .totop{/* right:calc((100% - var(--content-max)) / 2 + 16px); */right:26px;bottom:200px;width:56px;height:56px;}
}

@media (prefers-reduced-motion:reduce){
  .totop{transition:none;}
}

/* ============================================================
   2026-10-06 lsyclaude(추가)
   우측 퀵메뉴 (.quick) - tail.php
   - 구성 : 분양문의 전화(.quick__call) / 관심고객등록(.quick__lead) / 위로가기(.totop, 기존 버튼 편입)
   - 768px 이상 : 브라우저 오른쪽 + 세로 중앙 고정(top:50% + translateY(-50%))
     · 세로 중앙 기준은 전화/관심고객 묶음(.quick__group)이고, 위로가기 버튼은 그 아래에 absolute로 매달아
       위로가기 노출/숨김과 관계없이 묶음 위치가 흔들리지 않게 함
   - 767px 이하 : 하단 가로 바 형태로 고정 (기존 .bottom-fixed 모바일과 같은 90% 폭 / 하단 20px 띄움)
   - 메인페이지(.quick--main) 모바일 : 기존 하단고정버튼과 기능이 겹쳐 전화/관심고객 묶음만 숨김
   - 2026-10-06 lsyclaude(추가) : 메인페이지(.quick--main)는 PC·태블릿에서도 전화/관심고객 묶음 숨김 (위로가기만 노출)
   - 컬러는 전달받은 스샷 실측값 (배경 #2B3944 / CALL 골드 #D9C48A)
   - 위쪽 .totop 기존 규칙(위치/크기)은 삭제하지 않고, 아래 .quick .totop 규칙이 퀵메뉴 안에서만 덮어씀
============================================================ */
.quick{
  --quick-bg:#9A0000;
  --quick-bg-hover:#7c0404;
  --quick-gold:#ffffffbd;
  position:fixed;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  z-index:950;
  width:64px;
}
.quick__group{display:flex;flex-direction:column;gap:10px;}

/* 분양문의 전화 - 위쪽은 알약형, 아래쪽은 살짝 둥근 세로 박스 */
.quick__call{
  display:flex;flex-direction:column;align-items:center;
  padding:26px 0 8px;
  border-radius:32px;
  background:var(--quick-bg);
  color:var(--color-white);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:background .2s ease;
}
.quick__call-ico{padding-bottom:9px;}
.quick__call-ico img{width: 23px;}
.quick__call-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:-.02em;}
.quick__call-num{
  writing-mode:vertical-rl;     /* 숫자를 시계방향 90도로 눕혀 위->아래로 읽히게 (스샷 반영) */
  font-size:19px;font-weight:600;letter-spacing:.04em;line-height:1;
  white-space:nowrap;
  margin:12px 0 14px;
}
.quick__call-en{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--quick-gold);}

/* 관심고객등록 - 정사각 박스 + 플러스 아이콘(css로 그림, svg 교체 시 .quick__lead-plus 안에 img로 대체 가능) */
.quick__lead{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:64px;
  border-radius:50px;
  background:var(--quick-bg);
  color:var(--color-white);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:background .2s ease;
}
.quick__lead-plus{position:relative;width:20px;height:20px;flex-shrink:0;}
/* .quick__lead-plus::before,
.quick__lead-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--color-white);transform:translate(-50%,-50%);}
.quick__lead-plus::before{width:20px;height:2px;}
.quick__lead-plus::after{width:2px;height:20px;} */
.quick__lead-label{font-size:12px;font-weight:700;letter-spacing:-.02em;}

.quick__call:hover,
.quick__lead:hover{background:var(--quick-bg-hover);}

/* 위로가기 - 퀵메뉴 묶음 바로 아래(12px 간격)에 가운데 정렬로 매달기 */
.quick .totop{
  position:absolute;
  top:calc(100% + 12px);
  right:auto;bottom:auto;
  left:4px;                     /* (퀵메뉴 64px - 버튼 56px) / 2 */
  width:56px;height:56px;
  background:var(--quick-bg);
}
.quick .totop:hover{background:var(--color-primary);}

/* 태블릿(768~1199px) : 기존 .totop 태블릿 크기(52px)와 맞춤 */
@media (min-width:768px) and (max-width:1199.98px){
  .quick{right:24px;}
  .quick .totop{width:52px;height:52px;left:6px;}
}

/* 2026-10-06 lsyclaude(추가) : 메인페이지(.quick--main) PC·태블릿(768px 이상)에서도 퀵메뉴 사이드바 숨김 (사용자 요청)
   - 전화/관심고객 묶음(.quick__group)만 숨기고, 위로가기 버튼은 계속 노출
   - 묶음이 사라지면 .quick 높이가 0이 되어 위로가기 버튼이 화면 세로 중앙에 떠버리므로,
     .quick 의 세로중앙 고정(top:50% + transform)을 해제하고 위로가기를 다시 position:fixed 로 돌려
     퀵메뉴 편입 전 단독 .totop 위치(우측 하단, 하단고정버튼 위쪽)와 같은 값으로 배치
   - 서브페이지는 영향 없음 (.quick--main 은 tail.php 에서 _INDEX_ 가 정의된 메인페이지에만 붙음) */
@media (min-width:768px){
  .quick--main{top:auto;transform:none;}   /* transform이 남아있으면 안쪽 .totop의 fixed 기준이 .quick이 되므로 해제 */
  .quick--main .quick__group{display:none;}
  .quick--main .totop{
    position:fixed;
    top:auto;left:auto;
    right:24px;bottom:180px;     /* 기존 .totop 태블릿 값 */
    width:52px;height:52px;
  }
}
@media (min-width:1200px){
  .quick--main .totop{right:26px;bottom:200px;width:56px;height:56px;}   /* 기존 .totop PC 값 */
}

/* 모바일(767px 이하) : 하단 가로 바 */
@media (max-width:767.98px){
  .quick{
    top:auto;right:auto;
    left:5%;bottom:20px;
    width:90%;
    transform:none;              /* transform이 남아있으면 안쪽 .totop의 position:fixed 기준이 화면이 아니라 .quick이 되어버리므로 해제 */
  }
  .quick__group{flex-direction:row;gap:6px;height:56px;}
  .quick__call{
    flex:1 1 auto;min-width:0;
    flex-direction:row;justify-content:center;gap:8px;
    padding:0 14px;
    border-radius:50px;
  }
  .quick__call-ico{padding-bottom:0;}
  .quick__call-num{writing-mode:horizontal-tb;margin:0;font-size:18px;font-weight:700;letter-spacing:.02em;}
  .quick__call-label{font-size:13px;}
  .quick__lead{
    flex:0 0 auto;
    flex-direction:row;gap:6px;
    height:auto;
    padding:0 18px;
  }
  .quick__lead-plus{width:14px;height:14px;}
  .quick__lead-plus::before{width:14px;}
  .quick__lead-plus::after{height:14px;}
  .quick__lead-label{font-size:14px;}

  /* 위로가기 : 모바일은 하단 바 위쪽 오른쪽에 따로 띄움 (기존 .totop 모바일 크기 44px 유지) */
  .quick .totop{
    position:fixed;
    top:auto;left:auto;
    right:16px;bottom:88px;      /* 하단 바(56px) + 하단 여백(20px) + 간격 12px */
    width:44px;height:44px;
  }

  /* 메인페이지 : 하단고정버튼(.bottom-fixed)과 기능이 겹치므로 전화/관심고객 묶음 숨김,
     위로가기는 기존 위치(.totop 기본값 bottom:150px - 하단고정버튼 2단 위쪽)로 */
  .quick--main .quick__group{display:none;}
  .quick--main .totop{bottom:150px;}
}

@media (prefers-reduced-motion:reduce){
  .quick__call,.quick__lead{transition:none;}
}

/* ============================================================
   2026-09-16 lsyclaude
   1) 역세권/교통 (.location)
============================================================ */
.location{padding:64px 0;background:#fff;}
.location__map{
  max-width:var(--content-max);
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(188,167,137,.3);
}
.location__map img{width:100%;display:block;}

/* ============================================================
   2) 4가지 이유 - 세로 지그재그 (.reasons)
============================================================ */
.reasons{padding:110px 0;background:var(--color-bg-soft);}
.reasons__list{display:flex;flex-direction:column;gap:56px;}
.reasons__item{
  display:flex;
  flex-direction:row-reverse;   /* 기본(01,03) : 이미지 우측, 텍스트 좌측 */
  align-items:center;
  gap:40px;
  text-align:left;
}
.reasons__item--reverse{
  flex-direction:row;           /* 02,04 : 이미지 좌측, 텍스트 우측 */
  text-align:right;
}
.reasons__media{
  flex:1 1 50%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(134,117,93,.3);
}
.reasons__media img{width:100%;display:block;aspect-ratio:674/360;object-fit:cover;}
.reasons__text{flex:1 1 50%;}
.reasons__num{
  display:block;
  font-weight:800;
  font-size:clamp(36px,6vw,80px);
  color:rgba(154,0,0,.3);
  letter-spacing:-0.03em;
  line-height:1;
  margin-bottom:4px;
}
.reasons__text h3{
  font-weight:800;
  font-size:clamp(22px,4vw,44px);
  line-height:1.3;
  color:var(--color-text);
  margin:0 0 16px;
}
.reasons__text p{
  font-weight:400;
  font-size:clamp(14px,1.8vw,20px);
  line-height:1.5;
  letter-spacing:-0.02em;
  color:var(--color-text);
  margin:0;
}

@media (max-width:767.98px){
  .reasons {padding: 60px 0;}
  /* 2026-09-22 lsyclaude(수정) : .reasons__item의 기본 align-items:center 값이 모바일(flex-direction:column)
     에서도 그대로 상속되어, 세로축이 아니라 가로축(cross-axis)에 적용되면서 .reasons__text 박스가
     내용 너비만큼만 가운데 정렬되어 좌측에 불필요한 여백이 생기는 문제가 있었습니다(사용자 확인).
     align-items:stretch를 추가해 .reasons__text가 부모 폭(100%)을 그대로 채우도록 수정했습니다.
     기존(align-items 재정의 없이 상위 center 값을 그대로 쓰던) 코드는 삭제하지 않고 주석으로 보존:
     .reasons__item, .reasons__item--reverse{flex-direction:column;text-align:left;gap:20px;} */
  .reasons__item,
  .reasons__item--reverse{flex-direction:column;align-items:stretch;text-align:left;gap:20px;}
  .reasons__media{flex:1 1 auto;width:100%;}
}

/* ============================================================
   3) HYPER VISION 카드 4개 (.vision)
============================================================ */
.vision{padding:110px 0;background:#fff;}
.vision__eyebrow{
  text-align:center;
  font-family:'Cormorant Garamond', 'Pretendard', serif;
  font-weight:700;
  color:var(--color-primary);
  font-size:clamp(20px,3vw,32px);
  margin:0 0 26px;
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.vision__title{
  text-align:center; word-break: keep-all;
  font-weight:800;
  color:var(--color-text);
  font-size:clamp(20px,3.2vw,46px);
  line-height:1.4;
  margin:0 0 24px;
}
.vision__logo-line{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 48px;
}
.vision__logo-img{height:42px;width:auto;}

.vision__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.vision-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(134,117,93,.3);
  border-radius:20px;
  overflow:hidden;
}
.vision-card__media{position:relative;aspect-ratio:654/319;overflow:visible;}
.vision-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.vision-card__badge{
  position:absolute;left:24px;bottom:12px;
  font-weight:700;color:#fff;opacity:.6;
  font-size:clamp(28px,4.5vw,52px);
  letter-spacing:-0.02em;
}
/* 2026-09-16 lsyclaude : 아이콘 원이 이미지/본문 경계에 걸치도록 media 기준(bottom:0 + translateY(50%))으로 배치 */
.vision-card__icon{
  position:absolute;
  left:50%;bottom:0;
  transform:translate(-50%,50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:110px;height:110px;border-radius:50%;
  background:var(--color-navy);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  z-index:2;
}
.vision-card__icon img{width:32px;height:32px;filter:brightness(0) invert(1);}
.vision-card__icon span{font-size:13px;font-weight:600;}
.vision-card__body{padding:70px 32px 36px;}
.vision-card__body h3{
  font-weight:800;font-size:clamp(22px,3.2vw,32px);line-height:1.3;
  color:var(--color-text);margin:0 0 16px;
}
.vision-card__body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.vision-card__body li{
  position:relative;padding-left:26px;
  font-size:clamp(13px,1.6vw,16px);line-height:1.5;color:var(--color-text);
}
.vision-card__body li::before{
  content:'';
  position:absolute;left:0;top:6px;
  width:28px;height:16px;border-radius:3px;
  background:var(--color-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

@media (min-width:1024px){
	.vision-card__icon{ width:125px;height:125px;}
	.vision-card__icon img{width:60px;height:auto;}
	.vision-card__icon_2  img{width:70px;height:auto;}
	.vision-card__icon_3  img{width:80px;height:auto;}
	.vision-card__icon_4  img{width:90px;height:auto;}
	.vision-card__icon span {font-size: 17px;}
}

@media (min-width:900px){
  .vision__grid{grid-template-columns:1fr 1fr;gap:32px 32px;}
}

@media (max-width:767.98px){
  .vision { padding: 60px 0;}
	.vision__eyebrow{gap: 6px;flex-direction: column;}
  .vision-card__icon img{width:46px;height:auto;}
  .vision-card__icon{left: 77%;}
}

/* ========================================================================================================================
   2026-10-01 lsyclaude
   메인 hero 아래 컨텐츠 리뉴얼 (2026-10-01 신규 PC 시안)
   - 1) .location--v2  2) .premium8  3) .hsweet  4) .hvision
   - 기존 .location / .reasons / .vision 규칙은 위에 그대로 남아있음 (index.php에서 기존 마크업은 if(false)로 보존)
   - 수치는 1920 시안 캡처 기준 실측 근사값 (Figma 원본 수치를 주시면 정확히 맞추겠습니다)
   - 모바일(767.98px 이하)은 모바일 시안 전달 전까지의 임시 기본 대응 → 시안 받으면 교체 예정
======================================================================================================================== */

/* ---- 공통 : 컨텐츠 폭 1224px + 좌우 패딩 20px ---- */
.container--main{max-width:1264px;}

/* ---- 공통 : 섹션 헤드 (좌측 정렬 태그 / 타이틀 / 설명) ---- */
.main-head{margin:0 0 50px;text-align:left;}
.main-head__tag{
  margin:0 0 10px;
  font-weight:600;font-size:30px;line-height:1.3;letter-spacing:-0.02em;
  color:var(--color-primary);
}
.main-head__title{
  margin:0 0 16px;
  font-weight:700;font-size:46px;line-height:1.3;letter-spacing:-0.03em;
  color:var(--color-text);
}
.main-head__desc{
  margin:0;
  font-weight:400;font-size:16px;line-height:1.5;
  color:var(--color-gray);
}

/* ------------------------------------------------------------
   1) 역세권 지도 (.location--v2)
------------------------------------------------------------ */
.location.location--v2{padding:100px 0 0;}

/* ------------------------------------------------------------
   2) HYPER PREMIUM 8 (.premium8)
------------------------------------------------------------ */
.premium8{padding:86px 0 120px;background:#fff;}
/* 2026-10-01 lsyclaude(수정) : 타이틀 svg를 'HYPER PREMIUM' / '8' 두 파일로 분리 → 기존 규칙 주석 보존
.premium8__head{margin:0 0 50px;}
.premium8__title{margin:0 0 14px;line-height:0;}
.premium8__title img{height:184px;width:auto;}   ( 로고 svg 높이 (시안 실측 근사) )
*/
/* 2026-10-01 lsyclaude : 헤드 = [타이틀+설명 묶음] + ['8' 그래픽] 좌우 배치
   - '8'이 별도 요소가 되어 설명 텍스트가 'PREMIUM' 바로 아래 붙음 (시안 간격)
   - 높이 값은 시안 실측 근사 → svg 업로드 후 화면 보며 미세 조정 */
/* 2026-10-01 lsyclaude(수정) : 2차 시안 대조 후 수치 조정 → 기존 값 주석 보존
.premium8__head{display:flex;align-items:center;gap:10px;margin:0 0 50px;}
.premium8__title{margin:0 0 24px;line-height:0;}
.premium8__title img{display:block;height:74px;width:auto;}
.premium8__num{display:block;flex:0 0 auto;height:174px;width:auto;}
*/
/* 2026-10-01 lsyclaude : 시안 대조 수정
   - '8' 하단 = 설명 텍스트 하단 (align-items:flex-end), '8' 상단은 HYPER보다 위로 올라감
   - '8'이 타이틀 바로 오른쪽에 붙도록 좌측 정렬 명시 (justify-content:flex-start)
   - 타이틀 : '8' 높이 비율 ≈ 0.6 (시안 실측) */
.premium8__head{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;margin:0 0 50px;}
.premium8__headtxt{flex:0 0 auto;}              /* 타이틀+설명 묶음 (.premium8__text는 리스트에서 사용 중이라 별도 클래스) */
/* 2026-10-01 lsyclaude : 안전장치 - 헤드 묶음에 .premium8__text 클래스를 쓴 경우
   리스트용 규칙(flex:1 1 auto / padding-left)이 적용되어 묶음이 남는 폭을 다 차지 → '8'이 오른쪽 끝으로 밀림.
   헤드 안에서만 리스트용 규칙을 해제 (권장 : 마크업 클래스를 premium8__headtxt 로 변경) */
.premium8__head > .premium8__text{flex:0 0 auto;padding-left:0;}
.premium8__title{margin:0 0 12px;line-height:0;}  /* 'PREMIUM' ~ 설명 텍스트 간격 (24px → 12px) */
.premium8__title img{display:block;height:90px;width:auto;}   /* 'HYPER PREMIUM' svg 높이 (74px → 90px) */
.premium8__num{display:block;flex:0 0 auto;height:150px;width:auto;}  /* '8' svg 높이 (174px → 150px) */

.premium8__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:96px 48px;
}
.premium8__media{overflow:hidden;}
.premium8__media img{width:100%;aspect-ratio:590/426;object-fit:cover;}

/* 사진 아래 : 좌측 아이콘/PREMIUM 라벨 + 세로 구분선 + 우측 텍스트 */
.premium8__info{display:flex;align-items:stretch;margin-top:24px;}
.premium8__label{
  flex:0 0 130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-right:10px;
  border-right:1px solid #E1E1E1;
  text-align:center;
  color:var(--color-primary);
}
.premium8__ico{width:34px;height:34px;object-fit:contain;margin-bottom:8px;}
.premium8__no,
.premium8__key{display:block;font-weight:500;font-size:12px;line-height:1.3;letter-spacing:0;}
.premium8__text{flex:1 1 auto;padding-left:26px;}
.premium8__sub{margin:0 0 4px;font-weight:500;font-size:20px;line-height:1.4;color:var(--color-text);}
.premium8__name{margin:0 0 10px;font-weight:700;font-size:28px;line-height:1.3;letter-spacing:-0.02em;color:var(--color-text);}
.premium8__detail{margin:0;font-weight:400;font-size:14px;line-height:1.6;color:var(--color-gray);}

/* ------------------------------------------------------------
   3) 단 하나의 하이퍼스윗 하우스 (.hsweet)
   - 배경 이미지는 index.php 인라인 style (main-hypersweet-bg.jpg)
------------------------------------------------------------ */
.hsweet{
  padding:100px 0 104px;
  background-color:#D9D9D9;            /* 배경 이미지 로딩 전/누락 시 대체 색 */
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hsweet__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:74px 42px;                        /* 세로 간격 : 아이콘 원이 카드 위로 걸치는 높이 포함 */
  padding-top:24px;                     /* 첫 줄 아이콘 원 걸침 여백 */
}
.hsweet-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
/* 아이콘 원 : 카드 상단 경계 중앙에 절반 걸침 */
.hsweet-card__ico{
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;
  background:var(--color-text);
  z-index:2;
}
.hsweet-card__ico img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);}
.hsweet-card__body{
  flex:1 1 auto;
  padding:52px 24px 34px;
  text-align:center;
}
.hsweet-card__title{margin:0 0 16px;font-weight:600;font-size:28px;line-height:1.4;letter-spacing:-0.02em;color:var(--color-text);}
.hsweet-card__desc{margin:0;font-weight:400;font-size:14px;line-height:1.7;color:var(--color-text);}
.hsweet-card__media{position:relative;overflow:hidden;border-radius:0 0 6px 6px;}
.hsweet-card__media img{width:100%;aspect-ratio:590/310;object-fit:cover;}
.hsweet-card__num{
  position:absolute;right:16px;bottom:6px;
  font-weight:700;font-size:70px;line-height:1;letter-spacing:-0.03em;
  color:rgba(255,255,255,.35);
}

/* ------------------------------------------------------------
   4) HYPER VISION (.hvision)
   - 배경 이미지는 index.php 인라인 style (main-vision-bg.jpg)
------------------------------------------------------------ */
.hvision{
  padding:110px 0 140px;
  background-color:#EFEBE4;            /* 배경 이미지 로딩 전/누락 시 대체 색 */
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hvision__eyebrow{
  margin:0 0 6px;
  font-family:'Cormorant Garamond', 'Pretendard', serif;   /* 기존 .vision__eyebrow 와 동일 폰트 스택 */
  font-weight:700;font-size:56px;line-height:1.2;letter-spacing:0;
  color:var(--color-primary);
}
.hvision__list{display:flex;flex-direction:column;gap:24px;}
.hvision-card{
  position:relative;
  display:flex;justify-content:flex-end;align-items:center;
  min-height:346px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
/* 사진 : 카드 전체를 덮음 */
.hvision-card__bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
}
/* 오른쪽으로 흰색 페이드 (사용자 확인 : CSS 그라데이션) */
.hvision-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.75) 58%, rgba(255,255,255,.9) 100%);
  z-index:1;
}
.hvision-card__body{
  position:relative;z-index:2;
  width:42%;                           /* 텍스트 시작 위치 : 카드 좌측에서 약 58% */
  padding:40px 44px 40px 0;
}
.hvision-card__cat{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;
  font-weight:500;font-size:16px;color:var(--color-text);
}
.hvision-card__ico{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:rgba(128,130,132,.6);
}
.hvision-card__ico img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);}
.hvision-card__title{margin:0 0 30px;font-weight:600;font-size:30px;line-height:1.3;letter-spacing:-0.02em;color:var(--color-text);}
.hvision-card__desc{margin:0 0 8px;font-weight:400;font-size:14px;line-height:1.7;color:var(--color-text);}
.hvision-card__desc:last-child{margin-bottom:0;}

/* ---- 태블릿 (768 ~ 1199px) : 폰트만 축소 ---- */
@media (max-width:1199.98px){
  .main-head__tag{font-size:24px;}
  .main-head__title{font-size:36px;}
  /* 2026-10-01 lsyclaude(수정) : svg 분리로 교체 → .premium8__title img{height:140px;} */
  /* 2026-10-01 lsyclaude : 태블릿 타이틀 / '8' 크기 (PC 대비 약 76%) */
  /* 2026-10-01 lsyclaude(수정) : PC 수치 조정에 맞춰 변경 (기존 gap:8px / margin-bottom:18px / img 56px / num 132px) */
  .premium8__head{gap:11px;}
  .premium8__title{margin-bottom:10px;}
  .premium8__title img{height:70px;}
  .premium8__num{height:116px;}
  .premium8__label{flex-basis:100px;}
  .premium8__text{padding-left:18px;}
  .premium8__name,
  .hsweet-card__title{font-size:24px;}
  .premium8__sub{font-size:17px;}
  .hvision__eyebrow{font-size:44px;}
  .hvision-card__body{width:50%;padding-right:28px;}
  .hvision-card__title{font-size:24px;}
}

/* 2026-10-02 lsyclaude(수정) : 아래 임시 모바일 대응은 모바일 시안 반영 블록으로 교체되어 주석으로 보존합니다.
   (주석 안에 주석을 넣을 수 없어 원래 블록 안의 설명 주석 기호만 괄호로 바꿔둠)
( ---- 모바일 (767.98px 이하) : 임시 기본 대응 (모바일 시안 전달 후 교체 예정) ---- )
@media (max-width:767.98px){
  .main-head{margin-bottom:30px;}
  .main-head__tag{font-size:17px;margin-bottom:6px;}
  .main-head__title{font-size:26px;margin-bottom:10px;}
  .main-head__desc{font-size:14px;}

  .location.location--v2{padding-top:60px;}

  .premium8{padding:60px 0 70px;}
  .premium8__title img{height:100px;}
  .premium8__list{grid-template-columns:1fr;gap:50px;}
  .premium8__info{margin-top:16px;}
  .premium8__label{flex-basis:80px;}
  .premium8__ico{width:28px;height:28px;}
  .premium8__no,.premium8__key{font-size:10px;}
  .premium8__text{padding-left:14px;}
  .premium8__sub{font-size:15px;}
  .premium8__name{font-size:21px;}
  .premium8__detail{font-size:13px;}
  .premium8__detail br{display:none;}

  .hsweet{padding:60px 0;}
  .hsweet__list{grid-template-columns:1fr;gap:50px;}
  .hsweet-card__body{padding:40px 16px 26px;}
  .hsweet-card__title{font-size:21px;}
  .hsweet-card__desc{font-size:13px;}
  .hsweet-card__num{font-size:48px;}

  .hvision{padding:60px 0 80px;}
  .hvision__eyebrow{font-size:34px;}
  ( 모바일 : 사진 위 / 텍스트 아래로 분리 (그라데이션은 아래쪽 방향으로 변경) )
  .hvision-card{flex-direction:column;align-items:stretch;min-height:0;background:#fff;}
  .hvision-card__bg{position:relative;inset:auto;height:auto;aspect-ratio:16/9;}
  .hvision-card::after{display:none;}
  .hvision-card__body{width:100%;padding:22px 20px 26px;}
  .hvision-card__title{font-size:21px;margin-bottom:16px;}
  .hvision-card__desc{font-size:13px;}
}
*/

/* ---- "HYPER VISION" 타이틀 svg (2026-10-02 lsyclaude 추가 : 텍스트 → hyper-vision-title.svg 교체) ---- */
.hvision__eyebrow{line-height:0;margin-bottom:14px;}
.hvision__eyebrow img{height:44px;width:auto;}   /* PC 시안 실측 근사 높이 */

/* ========================================================================================================================
   2026-10-02 lsyclaude
   모바일 시안 반영 (767.98px 이하) - 시안 폭 390px 기준 실측 근사값
   - 내용은 PC와 동일, 디자인 패턴만 변경 (사용자 안내)
   - 줄바꿈 위치는 index.php의 <span class="mobile-only"></span> 로 처리
======================================================================================================================== */
@media (max-width:767.98px){
  /* 공통 섹션 헤드 */
  .main-head{margin-bottom:28px;}
  .main-head__tag{font-size:17px;margin-bottom:8px;}
  .main-head__title{font-size:30px;line-height:1.3;margin-bottom:12px;}
  .main-head__desc{font-size:14px;}

  /* 1) 지도 : 좌우 여백 없이 화면 끝까지 (container 패딩 20px 상쇄) */
  .location.location--v2{padding-top:44px;}
  .location--v2 .location__map{margin:0 -20px;border:0;}

  /* 2) HYPER PREMIUM 8 : 1열, 사진 라운드 */
  .premium8{padding:50px 0 70px;}
  .premium8__head{margin-bottom:26px;}
  /* 2026-10-01 lsyclaude(수정) : svg 분리로 교체 → 기존 규칙 주석 보존
  .premium8__title{margin-bottom:6px;}
  .premium8__title img{height:auto;width:76%;max-width:280px;}
  */
  /* 2026-10-01 lsyclaude : 모바일 타이틀 / '8' 크기 (390 시안 기준, 화면폭 비례 + 최대값 제한) */
  /* 2026-10-01 lsyclaude(수정) : PC 비율에 맞춰 변경 (기존 gap:6px / margin-bottom:12px / img min(12vw,52px) / num min(29vw,124px)) */
  .premium8__head{gap:8px;}
  .premium8__title{margin-bottom:8px;}
  .premium8__title img{height:min(13vw,56px);}
  .premium8__num{height:min(26vw,94px);}
  .premium8__list{grid-template-columns:1fr;gap:40px;}
  .premium8__media{border-radius:10px;}
  .premium8__media img{aspect-ratio:350/252;}
  .premium8__info{margin-top:20px;}
  .premium8__label{flex-basis:108px;padding-right:12px;}
  .premium8__ico{width:30px;height:30px;margin-bottom:10px;}
  .premium8__no,.premium8__key{font-size:13px;font-weight:400;}
  .premium8__text{padding-left:18px;}
  .premium8__sub{font-size:15px;margin-bottom:2px;}
  .premium8__name{font-size:19px;margin-bottom:12px;}
  .premium8__detail{font-size:13px;line-height:1.65;}
  .premium8__detail br{display:none;}           /* 모바일은 강제 줄바꿈 없이 자연 줄바꿈 */

  /* 3) 하이퍼스윗 하우스 : 1열 카드, 아이콘/타이틀 크게 */
  .hsweet{padding:46px 0 60px;}
  .hsweet__list{grid-template-columns:1fr;gap:56px;padding-top:28px;}
  .hsweet-card{border-radius:8px;}
  .hsweet-card__ico{width:52px;height:52px;}
  .hsweet-card__ico img{width:28px;height:28px;}
  .hsweet-card__body{padding:44px 16px 30px;}
  .hsweet-card__title{font-size:26px;line-height:1.4;margin-bottom:16px;}
  .hsweet-card__desc{font-size:13px;}
  .hsweet-card:nth-child(4) .hsweet-card__desc br{display:none;}   /* 04 카드는 모바일 시안처럼 자연 줄바꿈 */
  .hsweet-card__media,
  .hsweet-card__media img{border-radius:0 0 8px 8px;}
  .hsweet-card__media img{aspect-ratio:350/272;}
  .hsweet-card__num{font-size:56px;right:12px;}

  /* 4) HYPER VISION : 사진 전체 + 흰 반투명 덮개, 가운데 정렬 카드 */
  .hvision{padding:44px 0 70px;}
  .hvision__eyebrow{margin-bottom:8px;}
  .hvision__eyebrow img{height:22px;}
  .hvision__list{gap:22px;}
  .hvision-card{
    justify-content:center;
    min-height:0;
    border-radius:16px;
  }
  .hvision-card::after{background:rgba(255,255,255,.72);}   /* PC 좌→우 그라데이션 대신 전체 흰 반투명 */
  .hvision-card__body{width:100%;padding:44px 26px 48px;text-align:center;}
  .hvision-card__cat{justify-content:center;gap:10px;margin-bottom:18px;font-size:14px;}
  .hvision-card__ico{flex-basis:52px;width:52px;height:52px;}
  .hvision-card__ico img{width:30px;height:30px;}
  .hvision-card__title{font-size:22px;margin-bottom:22px;}
  .hvision-card__desc{font-size:14px;line-height:1.6;text-align:left;margin-bottom:10px;}
}

/* ============================================================
   4) 관심고객등록 폼 (.lead)
============================================================ */
.hr_white{border-width:0;}
/* 시안(서브-레이아웃) 기준 : 섹션 높이 855px, 왼쪽 조감도 692px + 오른쪽 흰 배경 폼 패널(상단 라인), 폼 폭 716px */
.lead{
  display:flex;flex-direction:column;
  border-top:1px solid #DFDFDF;
}
/* 관심고객등록 링크(#lead-form)로 이동 시 고정 GNB 높이만큼 아래에서 멈추도록 보정 */
#lead-form,
.lead{scroll-margin-top:var(--gnb-height-mobile);}
@media (min-width:1200px){
  #lead-form,
  .lead{scroll-margin-top:var(--gnb-height);}
}
.lead__media{aspect-ratio:16/10;}
.lead__media img{width:100%;height:100%;object-fit:cover;display:block;}
.lead__panel{background:#fff;padding:48px 20px 60px;}
.lead__panel-inner{max-width:716px;margin:0 auto;}
.lead__title{
  text-align:center;font-weight:700;color:var(--color-text);
  font-size:clamp(26px,2.4vw,32px);line-height:1.3;margin:0 0 14px;
}
.lead__desc{
  text-align:center;color:var(--color-text);font-weight:500;font-size:15px;line-height:1.5;
  margin:0 0 64px;
}
.lead__form{display:flex;flex-direction:column;gap:15px;}
.lead__field{
  display:flex;align-items:center;
  border:1px solid #DFDFDF;border-radius:10px;background:#fff;
  padding:0 16px;height:60px;
}
.lead__field label{
  flex:0 0 116px;font-weight:500;font-size:17px;color:var(--color-text);
  display:flex;align-items:center;gap:2px;
}
.lead__field .req{color:var(--color-primary);}
.lead__field input{
  flex:1;min-width:0;border:none;outline:none;font-size:16px;font-family:inherit;
  background:transparent;color:var(--color-text);
}
.lead__field input::placeholder{color:var(--color-gray);}
.lead__field input:invalid:not(:placeholder-shown){color:var(--color-primary);}

/* 2026-10-06 lsyclaude(추가) : 관심고객등록 - 거주 지역 (tail.php .lead__region)
   - 라벨 위 + 시/도(select) · 시/군/구 · 읍/면/동 3칸 가로 배치
   - 박스 톤(테두리 #DFDFDF / 라운드 10px / 높이 60px / 폰트 16px)은 .lead__field 와 동일하게 맞춤
   - select 기본 화살표는 브라우저마다 달라 appearance:none 후 svg 화살표(텍스트 컬러 #2F2D28)로 통일 */
.lead__region{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.lead__region-label{font-weight:500;font-size:17px;color:var(--color-text);}
.lead__region-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.lead__region-row select,
.lead__region-row input{
  width:100%;min-width:0;height:60px;margin:0;padding:0 16px;
  border:1px solid #DFDFDF;border-radius:10px;background-color:#fff;
  font-size:16px;font-family:inherit;color:var(--color-text);
  outline:none;box-sizing:border-box;
}
.lead__region-row input::placeholder{color:var(--color-gray);}
.lead__region-row select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232F2D28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
/* 아직 시/도를 고르지 않은 상태(첫 옵션 "시/도 선택")는 placeholder처럼 회색으로 표시 */
.lead__region-row select:has(option[value=""]:checked){color:var(--color-gray);}
.lead__region-row select option{color:var(--color-text);}
/* 포커스 시 테두리만 텍스트 컬러로 진하게 (outline 대신) */
.lead__region-row select:focus,
.lead__region-row input:focus{border-color:var(--color-text);}

.lead__privacy{
  display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;
  margin-top:18px;font-size:15px;color:var(--color-text);
}
.lead__privacy-label{color:var(--color-text);}
.lead__radio{display:flex;align-items:center;gap:6px;cursor:pointer;}
/* 라디오 : 선택 = 검정 원 + 흰 체크 / 미선택 = 검정 테두리 원 (20px) */
.lead__radio input{
  -webkit-appearance:none;appearance:none;
  flex-shrink:0;width:20px;height:20px;margin:0;
  border:2px solid var(--color-text);border-radius:50%;
  background:#fff center/12px no-repeat;
  cursor:pointer;
}
.lead__radio input:checked{
  border-color:#000;
  background-color:#000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lead__radio input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}

.lead__msg{margin:0;font-size:13px;color:var(--color-primary);min-height:2px;}
.lead__submit{
  width:100%;height:60px;border-radius:8px;margin-top:0;
  font-weight:700;font-size:16px;
}

@media (min-width:1024px){
  .lead{margin-top:10vh;}
  /* 서브페이지(사업개요)는 본문 하단 여백(200px)으로 간격을 잡으므로 추가 여백 없음 */
  .overview--v2 ~ .lead{margin-top:0;}
}

@media (min-width:900px){
  .lead{flex-direction:row;align-items:stretch;min-height:855px;}
  .lead__media{flex:0 0 36.05%;aspect-ratio:auto;}   /* 692 / 1920 */
  .lead__panel{flex:1 1 auto;display:flex;align-items:center;padding:64px 40px;}
  .lead__panel-inner{width:100%;}
}

/* 모바일 : 조감도 이미지 숨김, 폼만 단일 컬럼 */
@media (max-width:767.98px){
  .lead__media{display:none;}
  .lead__desc{margin-bottom:36px;}
  .lead__field{height:54px;}
  .lead__field label{flex-basis:86px;font-size:16px;}
  .lead__field input{font-size:15px;}
  .lead__submit{height:56px;}
  /* 2026-10-06 lsyclaude(추가) : 거주 지역 - 1줄째 시/도 전체폭, 2줄째 시/군/구 · 읍/면/동 반반 (높이/폰트는 .lead__field 모바일 값과 동일) */
  .lead__region-label{font-size:16px;}
  .lead__region-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .lead__region-row .lead__region-sido{grid-column:1 / -1;}
  .lead__region-row select,
  .lead__region-row input{height:54px;font-size:15px;}
}

/* 2026-09-21 lsyclaude : 관심고객등록 폼 로딩 오버레이 스타일
   (기존 외부 css/style.css 파일 구조를 건드리지 않기 위해 index.php에 인라인으로 추가) */
.lead-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(47, 45, 40, 0.55); /* 텍스트 기본 컬러(#2F2D28) 기반 딤 */
  align-items: center;
  justify-content: center;
}
.lead-loading.is-visible {
  display: flex;
}
.lead-loading__box {
  margin: 20%;display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  background: #fff;
  border-radius: 12px;
}
.lead-loading__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: var(--color-primary); /* 포인트 컬러 */
  border-radius: 50%;
  animation: leadLoadingSpin 0.8s linear infinite;
}
.lead-loading__text {
  margin: 0;
  font-size: 15px;
  color: var(--color-text);
}
@keyframes leadLoadingSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   5) Footer (.footer)
============================================================ */
.footer{background:var(--color-footer-bg);color:#fff;padding:48px 0 212px;}
.footer__top{display:flex;flex-direction:column;gap:40px;}
.footer__logo-img{height:40px;width:auto;margin-bottom:20px;}
.footer__call-label{font-size:16px;font-weight:600;margin:0 0 6px;}
.footer__call-num{
  display:block;font-size:clamp(28px,5vw,40px);font-weight:900;color:#fff;
  margin:0 0 20px;
}
.footer__address{margin:40px 0 0 ;font-size:14px;color:var(--color-footer-text-soft);}
.footer__address div{display:flex;gap:10px;padding:9px 0;}
.footer__address dt{flex-shrink:0;width:52px;}
/* 2026-09-23 lsyclaude(수정) : 시안(Figma)에 "현장/홍보관" 텍스트 다음에 세로 구분선이 있는데
   기존 코드에는 구분선이 없었음 -> dd 앞쪽에 border-left로 세로선 추가.
   dt는 폭(52px)만 고정된 상태로 두고, dd 쪽에 선+여백을 둬서 "현장"(2자)/"홍보관"(3자)
   텍스트 길이가 달라도 선의 위치(= dt 우측 끝에서 gap 10px 뒤)가 항상 동일하게 유지됨.
   기존 코드(구분선 없음)는 위 dt 규칙 그대로이며 별도 삭제 없이 아래 dd 규칙만 추가함 */
.footer__address dd{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.35);
}
/* 2026-09-23 lsyclaude(수정) : 모바일 시안 반영 - PC에서는 시행수탁자/시공사/시행위탁자가
   한 줄에 나란히(flex-wrap行) 배치되지만, 모바일 시안에서는 footer__address(현장/홍보관)와
   동일하게 한 줄에 하나씩 세로로 쌓이는 구조임 -> 기본(모바일)값을 column으로 바꾸고,
   기존 PC용 값(flex-wrap:wrap;gap:20px 32px;align-items:center;flex-direction:row)은
   아래 @media(min-width:1024px) 안으로 이동함. 행 간격(gap:14px)은 정확한 수치가 시안에
   명시돼있지 않아 footer__address 리듬을 참고한 근사치이니, 다르게 보이면 알려주세요. */
.footer__builder{
  display:flex;flex-direction:column;gap:14px;
  font-size:14px;color:#fff;padding-top:2px;border-top:1px solid rgba(255,255,255,.0);
}
/* 2026-09-23 lsyclaude(수정) : dt-dd 사이 여백이 항목마다 다르게 보이던 문제
   - 원인 : 브라우저 기본 dd 마진(margin-inline-start:40px)이 초기화되어 있지 않아서,
     아래 gap:10px 위에 dd 기본 마진(40px)이 항목마다 겹쳐져(=결과적으로 40px+10px=50px 정도의
     간격) 실제 의도(10px)보다 훨씬 크게, 그리고 브라우저/줄바꿈 상황에 따라 다르게 렌더링됐음
   - 조치 : 파일 상단 "초기화" 영역에 dl,dt,dd{margin:0;} 추가 (이 규칙 자체는 변경 없음,
     gap:10px 값 그대로 두면 초기화만으로 세 항목(시행수탁자/시공사/시행위탁자) 모두
     동일한 10px 간격으로 정리됨) */
.footer__builder div{display:flex;align-items:center;gap:10px;}
.footer__builder div dd{font-size: 16px;}
.footer__builder-logo{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9;}

.footer__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.footer__nav-col{display:flex;flex-direction:column;gap:12px;}
.footer__nav-col strong{font-size:16px;font-weight:800;margin-bottom:2px;white-space:nowrap;}
.footer__nav-col a{font-size:14px;color:rgba(255,255,255,.75);white-space:nowrap;}

.footer__divider{border:none;border-top:1px solid rgba(255,255,255,.15);margin:36px 0;}

.footer__bottom{display:flex;flex-direction:column;gap:20px;}
.footer__disclaimer p{
  font-size:12px;line-height:1.7;color:var(--color-footer-text-muted);margin:0 0 12px;
}
.footer__copyright{opacity:.65;}
.footer__links{display:flex;gap:20px;font-size:14px;font-weight:600;}

@media (min-width:1024px){
  .footer__top{flex-direction:row;justify-content:space-between;gap:60px;}
  .footer__nav{grid-template-columns:repeat(5,auto);gap:0 56px;}   /* 사이트맵 5개 컬럼(GNB 대메뉴 수와 동일) */
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:20px 180px;}
  .footer__links{flex:250px; justify-content: flex-end;}
  .footer__builder{flex-direction:row;flex-wrap:wrap;gap:20px 32px;align-items:center;}
}

/* 모바일 : 사이트맵 숨김 (GNB 모바일 메뉴에 같은 링크가 있음) */
@media (max-width:767.98px){
  .footer__nav{display:none;}
  .footer__builder{padding-top: 10px;}
}

/* 공통 - display none/block */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }

/* 공통 - 뷰포트 (pc / mobile) 별 display none/block */
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}

/* ========================================================================================================================
	========================================================================================================================
   2026-09-18 lsyclaude
   서브페이지 공통 (sub-visual 상단 배너 / sub-nav 하단 탭 메뉴) + 사업개요 페이지(.overview)
   Figma: node-id 16:1339 ("써밋-서브페이지-사업개요")
     - sub-visual : 16:1418 中 hero 부분 / sub-nav : 16:1515(서브페이지-nav) / 본문 : 16:1492(content)
   - GNB(.gnb)는 메인페이지와 완전히 동일한 컴포넌트를 그대로 재사용 (별도 CSS 없음)
   - footer(.footer)도 tail.php에 이미 포함되어 있어 그대로 재사용
   - 관심고객등록 폼(.lead)/하단고정버튼(.bottom-fixed)은 index.php 마크업 확인 후 이어서 작업 예정 (about/overview.php 상단 TODO 주석 참고)
   - 기준 디자인 폭 : 1920px (Figma 시안 기준, 메인페이지와 동일 기준)
   ========================================================================================================================
======================================================================================================================== */

/* ------------------------------------------------------------
   sub-visual : 서브페이지 상단 배너(사진 + 딤 + 페이지 타이틀)
   GNB(.gnb, position:fixed)가 이 배너 위쪽 88px(모바일 60px)을 덮는 구조 - 메인페이지 .hero와 동일한 방식
------------------------------------------------------------ */
.sub-visual{
  position:relative;
  width:100%;
  height:28.125vw;      /* 540/1920 비율 유지 */
  min-height:220px;
  max-height:540px;
  overflow:hidden;
}
.sub-visual__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.sub-visual__dim{
  position:absolute;inset:0;
  background:rgba(42,62,110,.31);   /* Figma 실측값(#2a3e6e, 31%) */
}
.sub-visual__copy{
  position:absolute;
  left:50%;top:58%;
  transform:translate(-50%,-50%);
  width:100%;
  padding:0 20px;
  text-align:center;
  color:var(--color-white);
  z-index:2;
}
.sub-visual__logo-line{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Pretendard';font-weight:700;font-size:clamp(14px,1.4vw,26px);
  margin:0 0 16px;
}
.sub-visual__badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 12px;
  font-family:'Pretendard';font-weight:700;font-size:15px;
  background:var(--color-gray);border:1px solid var(--color-gray-border);color:var(--color-white);
  border-radius:2px;white-space:nowrap;
}
.sub-visual__title{
  font-family:'Pretendard';font-weight:700;
  font-size:clamp(26px,3.6vw,49px);
  letter-spacing:-0.02em;
  text-shadow:0 0 15px rgba(0,0,0,.29);
  margin:0;
}

/* ------------------------------------------------------------
   sub-nav : 서브페이지 하단 고정 탭 메뉴(브랜드소개/사업개요/입지환경/프리미엄/오시는길)
   -> Figma 원본은 '오시는길'이 6번째 칸에 중복 표기되어 있었으나, 사용자 확인(2026-09-18)에 따라 5개 탭으로 정리
------------------------------------------------------------ */
.sub-nav{
  background:var(--color-white);
  border-bottom:1px solid var(--color-line-soft);
}
.sub-nav__list{
  display:flex;
  max-width:1226px;
  margin:0 auto;
  overflow-x:auto;                 /* 좁은 화면에서 탭 5개가 다 안 들어올 때 가로 스크롤로 대체 */
  -webkit-overflow-scrolling:touch;
}
.sub-nav__item{
  flex:1 1 0;
  min-width:130px;                 /* 모바일에서 탭이 너무 좁아지지 않도록 최소폭 확보 */
}
.sub-nav__link{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:64px;
  font-family:'Pretendard';font-weight:700;font-size:16px;color:var(--color-text);
  text-align:center;white-space:nowrap;
  padding:0 12px;
}
.sub-nav__link::after{
  content:'';
  position:absolute;left:0;bottom:0;width:100%;height:5px;
  background:var(--color-primary);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .25s ease;
}
.sub-nav__link:hover::after,
.sub-nav__item.is-active .sub-nav__link::after{
  transform:scaleY(1);
}
.sub-nav__item.is-active .sub-nav__link{color:var(--color-primary);}

@media (min-width:1200px){
  .sub-nav__link{height:78px;font-size:19px;}
}

/* 2026-09-21 lsyclaude : 세대안내(29A 등)처럼 탭이 3개뿐인 카테고리용 모디파이어
   - Figma(23:1941) 실측 : 탭 고정폭 260px, 가운데 정렬, 활성 표시줄 높이 3px(사업안내 탭은 5px)
   - 가운데 정렬은 탭 3개(780px)가 화면에 다 들어오는 1200px 이상에서만 적용 -> 좁은 화면에서 가운데
     정렬을 그대로 쓰면 현재 탭(예: 29A)이 스크롤 없이는 안 보이는 문제가 있어 모바일은 왼쪽 정렬 유지 */
/* 2026-09-22 lsyclaude(수정) : 탭 고정폭(260px)이 모바일에서도 그대로 적용되어, 화면 폭(약 375~430px)에
   3개 탭(3×260px=780px)이 전혀 들어오지 못하고 스크롤해야 겨우 1개 반 정도만 보이는 문제가 있었습니다
   (사용자 확인 - "about페이지의 스타일처럼 unit/plan페이지도 나오게"). about 탭(기본 .sub-nav__item,
   flex:1 1 0;min-width:130px)처럼 모바일에서는 탭 폭이 화면에 맞게 줄어들도록, 고정폭 규칙을 가운데 정렬과
   같은 1200px 이상 데스크톱 구간으로 옮기고, 그보다 좁은 화면에서는 about과 동일한 기본 .sub-nav__item
   스타일을 그대로 쓰도록 변경했습니다.
   기존(모든 화면 폭에 적용되던) 규칙은 삭제하지 않고 주석으로 보존:
   .sub-nav--compact .sub-nav__item{flex:0 0 260px;min-width:200px;} */
.sub-nav--compact .sub-nav__link::after{height:3px;}
@media (min-width:1200px){
  .sub-nav--compact .sub-nav__item{flex:0 0 260px;min-width:200px;}
  .sub-nav--compact .sub-nav__list{justify-content:center;}
}

/* ------------------------------------------------------------
   overview(.overview) : 사업개요 페이지 본문
   - 상단 카피(eyebrow/logo-line/title)는 메인페이지 .vision__eyebrow / .vision__logo-line 컴포넌트를 그대로 재사용
   - 조감도(사진)와 사업개요 표(6항목, 2열x3행)만 이 페이지 전용으로 추가
------------------------------------------------------------ */
.overview{padding:80px 0 120px;}
.overview__title{margin-bottom:56px;}   /* .section-title 재사용, 하단 여백만 조정 */
@media (max-width:767.98px){
	.overview{padding:30px 0 80px;}
	.overview__title{margin-bottom:26px;} 
}
.overview__visual{
  max-width:var(--content-max);
  margin:0 auto 64px;
  border-radius:0;
  overflow:hidden;
}
.overview__visual img{width:100%;display:block;}

.overview__spec{
  display:grid;
  grid-template-columns:1fr;
  row-gap:32px;
  margin:0;
}
.overview__spec-item{
  padding-bottom:16px;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.overview__spec-label{
  display:block;
  font-family:'Pretendard';font-weight:500;font-size:15px;color:var(--color-gray);
  margin:0 0 10px;
}
.overview__spec-value{
  display:block; margin-left: 0;
  font-family:'Pretendard';font-weight:800;font-size:clamp(18px,2vw,26px);color:var(--color-text);
  line-height:1.4;
}

@media (min-width:768px){
  .overview__spec{
    grid-template-columns:1fr 1fr;
    column-gap:150px;
    row-gap:56px;
  }
}

/* ========================================================================================================================
	========================================================================================================================
   2026-09-21 lsyclaude
   세대안내(29A/29B/59C) 페이지(.unit) - 타입 배지+면적표(.unit-spec) / 구조별 이미지(.unit-structure) / 안내문구(.unit-notice)
   Figma: node-id 23:1702 ("써밋-서브페이지-세대안내") - spec: 23:1887 / 구조 블록: 23:1897,1907,1917 / 안내문구: 23:1923
   - sub-visual/sub-nav는 사업개요 페이지와 동일한 공용 컴포넌트 재사용 (sub-nav는 --compact 모디파이어 사용)
   - 이 페이지 Figma 원본에는 관심고객등록 폼/하단고정버튼이 없어(하단고정버튼은 hidden 처리) 포함하지 않음(사용자 확인, 2026-09-21)
   ========================================================================================================================
======================================================================================================================== */
.unit{padding:64px 0 120px;}

@media (max-width:767.98px){
	.unit{padding:30px 0 80px;}
}

.unit .vision__title{f}

.unit-spec{
  border-radius:0;
  overflow:hidden;              /* 안쪽 배지/표 블록의 배경색이 바깥 모서리 둥근 모양을 벗어나지 않도록 */
  display:flex;
  flex-direction:column;
}
.unit-spec__badge{
  background:var(--color-primary);
  color:var(--color-white);
  text-align:center;
  padding:40px 24px;
}
.unit-spec__badge-label{
  display:block;font-family:'Pretendard';font-weight:700;font-size:20px;letter-spacing:.08em;
  color:var(--color-white);margin:0 0 8px;
}
.unit-spec__badge-type{
  display:block;font-family:'Pretendard';font-weight:800;
  font-size:clamp(40px,6vw,80px);color:var(--color-white);letter-spacing:-0.02em;
}
.unit-spec__badge-count{
  display:block;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.4);
  font-family:'Pretendard';font-weight:700;font-size:20px;color:var(--color-white);
}

.unit-spec__table{
  background:var(--color-spec-bg);
  display:flex;flex-direction:column;gap:20px;margin:0;
  padding:40px 24px;
}
.unit-spec__row{display:grid;grid-template-columns:1fr;gap:20px;}
.unit-spec__cell{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.15);
}
.unit-spec__cell:empty{border-bottom:none;}   /* 29A 면적표 3행 2열처럼 빈 칸일 땐 구분선도 표시하지 않음 */
.unit-spec__cell-label{font-family:'Pretendard';font-weight:500;font-size:15px;color:var(--color-text);margin:0;}
.unit-spec__cell-value{font-family:'Pretendard';font-weight:700;font-size:clamp(18px,2vw,22px);color:var(--color-text);margin:0;}
.unit-spec__cell-unit{font-weight:700;font-size:15px;color:var(--color-text);margin-left:2px;}

@media (min-width:900px){
  .unit-spec{flex-direction:row;align-items:stretch;}
  .unit-spec__badge{flex:0 0 400px;display:flex;flex-direction:column;justify-content:center;padding:40px 32px;}
  .unit-spec__table{flex:1;justify-content:center;padding:60px 110px;}
  .unit-spec__row{grid-template-columns:1fr 1fr;column-gap:56px;}
}

/* ------------------------------------------------------------
   2) 구조별 이미지 (.unit-structure) - 기본형/복층/옵션형 반복
------------------------------------------------------------ */
.unit-structure{margin-top:64px;}
.unit-structure__head{
  background:var(--color-bg-soft);
  height:81px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Pretendard';font-weight:800;font-size:clamp(18px,2.2vw,24px);color:var(--color-text);
  border-radius:8px 8px 0 0;
}
.unit-structure__body{padding:32px 0 0;}
.unit-structure__visual{
  border-radius:16px;overflow:hidden;
}
.unit-structure__visual img{width:100%;display:block;}
.unit-structure__plan{
  margin-top:20px;
  border-radius:8px;overflow:hidden;
  border:1px solid rgba(134,117,93,.3);
  max-width:236px;
}
.unit-structure__plan img{width:100%;display:block;}

@media (min-width:1024px){
  .unit-structure__body{display:flex;align-items:flex-start;gap:24px;}
  .unit-structure__visual{flex:1 1 auto;min-width:0;}
  .unit-structure__plan{flex:0 0 236px;margin-top:54px;}
}

@media (max-width:767.98px){
	.unit-structure__body {
		display: flex;
		flex-direction: column;
		align-items: center;}
  .unit-structure__plan{padding: 20px;}
}
/* ------------------------------------------------------------
   3) 안내문구 (.unit-notice)
------------------------------------------------------------ */
.unit-notice{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:64px;padding:32px;
  background:var(--color-bg-soft);
}
.unit-notice__ico{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--color-gray);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-family:'Pretendard';font-weight:800;font-size:15px;
}
.unit-notice__text{
  margin:0;font-family:'Pretendard';font-size:13px;line-height:1.7;color:var(--color-gray);
}

/* ========================================================================================================================
   2026-10-01 lsyclaude(추가)
   서브페이지 재디자인 (Figma "서브-레이아웃" 27:2287 / "서브-레이아웃-모바일" 27:2291, 사용자 전달 시안 이미지 실측)
   - 위쪽 기존 sub-visual / sub-nav / overview 규칙은 삭제하지 않고 그대로 두고, 이 블록에서 덮어쓰는 방식
     (되돌릴 때는 이 블록 전체 + _inc/visual.php, _inc/nav.php, about/overview.php 변경분을 걷어내면 됨)
   - 기준 : 데스크톱 1920 / 모바일 390, 본문 컨텐츠 폭 1088px
======================================================================================================================== */

/* ---- sub-visual : 높이 446px(1920 기준, 23.23vw) / 모바일 172px, 딤 없음, 영문 타이틀 + 카테고리명 ---- */
.sub-visual{
  height:23.23vw;
  min-height:172px;
  max-height:446px;
}
.sub-visual__copy{top:59%;}
.sub-visual__title{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-shadow:0 0 15px rgba(0,0,0,.2);
}
.sub-visual__title-en{
  font-family:'Pretendard';font-weight:500;
  font-size:clamp(36px,3.44vw,66px);   /* 1920 기준 66px */
  line-height:1.15;letter-spacing:-0.01em;
}
.sub-visual__category{
  font-family:'Pretendard';font-weight:500;font-size:16px;line-height:1.2;
}
/* 모바일 시안은 배너에 문구 없이 사진만 노출 */
@media (max-width:767.98px){
  .sub-visual__title{gap:1px;}
}

/* ---- sub-nav : 컨텐츠 폭(1088px) 안에서 탭 칸(362px) 가운데 정렬, 칸 사이 세로 구분선, 활성 탭은 레드 배경 + 흰 글자 ---- */
.sub-nav{border-bottom:1px solid #E5E5E5;}
.sub-nav__list{
  max-width:1088px;
  justify-content:center;
}
.sub-nav__item{
  flex:1 1 0;   /* 탭 개수만큼 1088px을 균등 분할 (3개 = 362px, 2개 = 544px) */
  min-width:0;
  border-left:1px solid #E5E5E5;
}
.sub-nav__item:last-child{border-right:1px solid #E5E5E5;}
.sub-nav__link{
  height:62px;
  font-weight:600;font-size:16px;
  transition:background-color .25s ease, color .25s ease;
}
.sub-nav__link::after{display:none;}   /* 기존 하단 표시줄 대신 배경색으로 활성 표시 */
.sub-nav__link:hover{color:var(--color-primary);}
.sub-nav__item.is-active{border-color:var(--color-primary);}
.sub-nav__item.is-active .sub-nav__link{
  background:var(--color-primary);
  color:#fff;
}
@media (min-width:1200px){
  /* 기존 데스크톱 규칙(height:78px;font-size:19px / --compact 260px 고정폭)보다 우선하도록 다시 지정 */
  .sub-nav__link{height:62px;font-size:16px;}
  .sub-nav--compact .sub-nav__item{flex:0 1 362px;min-width:0;}
}
@media (max-width:767.98px){
  /* 모바일 : 탭이 화면 폭을 균등 분할, 높이 45px */
  .sub-nav__item{flex:1 1 0;}
  .sub-nav__item:first-child{border-left:none;}
  .sub-nav__item:last-child{border-right:none;}
  .sub-nav__link{height:45px;padding:0 6px;font-size:16px;}
}

/* 2026-10-01 lsyclaude(추가) : 탭 메뉴가 1개뿐인 카테고리(예: 단지안내 - 배치도)용
   - :only-child 로 "항목이 1개일 때"만 자동 적용 (nav.php 수정 없음, 2개 이상인 그룹은 영향 없음)
   - 폭은 리스트(1088px)의 50%로 고정
   - .sub-nav__list 가 justify-content:center 이므로 margin-right:auto 로 남는 공간을 오른쪽으로 밀어 좌측 정렬
   - 선택자 앞에 .sub-nav 를 붙인 이유 : 데스크톱 .sub-nav--compact .sub-nav__item / 모바일 .sub-nav__item 규칙보다 우선하도록 */
.sub-nav .sub-nav__item:only-child{
  flex:0 0 50%;
  margin-right:auto;
}
@media (max-width:767.98px){
  /* 모바일 : 위 first/last-child 규칙에서 좌우선이 모두 지워지므로, 탭 칸 끝이 보이도록 오른쪽 구분선만 다시 표시 */
  .sub-nav .sub-nav__item:only-child{border-right:1px solid #E5E5E5;}
  .sub-nav .sub-nav__item.is-active:only-child{border-right-color:var(--color-primary);}   /* 활성 탭은 기존처럼 레드 테두리 유지 */
}

/* ---- 2026-10-02 lsyclaude(추가) : 서브페이지 본문 컨텐츠 폭 공통 1088px ----
   - 원인 : 공용 .container 패딩이 좌우 20px이 아니라 "0 26px 0 30px"(합계 56px)이라,
     기존 max-width:1128px(=1088+40)로는 실제 컨텐츠 폭이 1072px로 16px 좁게 나왔음
   - 수정 : max-width = 1088 + 56 = 1144px -> 실제 컨텐츠 폭 정확히 1088px
   - 적용 범위 : 서브페이지 탭메뉴(.sub-nav) 바로 뒤에 오는 <main> 의 직계 .container 전부
     (사업개요/오시는길/평면안내/인테리어 등 공용 nav.php를 쓰는 모든 서브페이지에 자동 적용,
      tail.php의 관심고객등록/footer 쪽 .container 에는 영향 없음)
   - 화면이 1144px보다 좁으면 max-width가 걸리지 않으므로 태블릿/모바일 레이아웃은 기존과 동일 */
.sub-nav ~ main > .container{max-width:1144px;}
@media (min-width:1200px){
  /* 데스크톱 : 패딩을 좌우 28px로 균등하게 맞춰(합계 56px 동일) 컨텐츠가 위 탭메뉴(1088px)와 정확히 같은 위치에 오도록 함
     (기존 26/30 비대칭이면 컨텐츠가 탭메뉴보다 오른쪽으로 2px 밀려 보임) */
  .sub-nav ~ main > .container{padding-left:28px;padding-right:28px;}
}

/* ---- overview(.overview--v2) : 사업개요 본문 ---- */
.overview--v2{padding:90px 0 200px;}
/* 2026-10-02 lsyclaude(수정) : 위 "서브페이지 본문 컨텐츠 폭 공통" 규칙으로 대체 (실제 컨텐츠 1072px로 나오던 값)
.overview--v2 .container{max-width:1128px;}   컨텐츠 1088px + 좌우 패딩 20px */
.overview__tag{
  margin:0 0 14px;
  font-family:'Pretendard';font-weight:500;font-size:20px;line-height:1.4;
  color:var(--color-primary);
}
.overview--v2 .overview__title{
  margin:0 0 16px;
  font-family:'Pretendard';font-weight:700;font-size:40px;line-height:1.5;
  letter-spacing:-0.02em;color:var(--color-text);
}
.overview__desc{
  margin:0 0 30px;
  font-family:'Pretendard';font-weight:500;font-size:16px;line-height:1.5;
  color:var(--color-gray);
}
.overview--v2 .overview__visual{margin:0 0 66px;}

.overview__summary-title{
  margin:0;padding:0 0 18px;
  border-bottom:1px solid var(--color-text);
  font-family:'Pretendard';font-weight:600;font-size:18px;line-height:1.2;
  color:var(--color-text);
}
.overview__summary-list{margin:0;}
.overview__summary-row{
  display:grid;
  grid-template-columns:312px 1fr;   /* 시안 : 내용 시작 위치 = 컨텐츠 좌측 + 312px */
  align-items:center;
  min-height:71px;
  padding:12px 0;
  border-bottom:1px solid #DDDDDD;
}
.overview__summary-row dt{
  font-family:'Pretendard';font-weight:600;font-size:16px;color:var(--color-text);
}
.overview__summary-row dd{
  margin:0;
  font-family:'Pretendard';font-weight:500;font-size:16px;line-height:1.5;color:var(--color-gray);
}

/* 안내문구 박스 : .unit-notice 재사용, 사업개요 시안 크기(아이콘 58px / 글자 15px)로 조정 */
.overview__notice{
  margin-top:38px;
  padding:30px;
  align-items:center;
  gap:34px;
  background:#F6F6F6;
}
.overview__notice .unit-notice__ico{width:58px;height:58px;font-size:30px;}
.overview__notice .unit-notice__text{font-size:15px;line-height:28px;color:var(--color-text);}

@media (max-width:767.98px){
  .overview--v2{padding:30px 0 80px;}
  .overview__tag{font-size:18px;margin-bottom:10px;}
  .overview--v2 .overview__title{font-size:32px;line-height:1.35;margin-bottom:12px;}
  .overview__desc{font-size:15px;margin-bottom:24px;}
  .overview--v2 .overview__visual{margin-bottom:40px;}
  .overview__summary-title{font-size:16px;padding-bottom:14px;}
  .overview__summary-row{grid-template-columns:100px 1fr;column-gap:12px;min-height:56px;}
  .overview__summary-row dt,
  .overview__summary-row dd{font-size:14px;}
  .overview__notice{padding:20px;gap:14px;align-items:flex-start;}
  .overview__notice .unit-notice__ico{width:36px;height:36px;font-size:18px;}
  .overview__notice .unit-notice__text{font-size:13px;line-height:1.7;}
}

/* ========================================================================================================================
   2026-10-01 lsyclaude
   오시는 길 페이지(.way) - about/way.php
   - 상단 카피/여백은 .overview--v2 재사용, 이 블록은 위치 블록(약도 + 장소 정보)만 정의
   - 기준 : 데스크톱 1920(컨텐츠 1088px = 약도 674 + 간격 44 + 정보 370) / 모바일 390
======================================================================================================================== */
.way__list{
  display:flex;flex-direction:column;gap:70px;
  margin-top:0;
}
.way__item{
  display:flex;align-items:flex-start;gap:44px;
}
.way__map{
  flex:0 0 674px;max-width:62%;
  border:1px solid #C4C4C4;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  background:#FBF6ED;   /* 이미지 로딩 전 약도 바탕색 */
}
.way__map img{width:100%;aspect-ratio:672/334;object-fit:cover;}
.way__info{flex:1 1 auto;min-width:0;padding-top:28px;}
.way__title{
  margin:0;padding:0 0 15px;
  border-bottom:1px solid #707070;
  font-family:'Pretendard';font-weight:600;font-size:20px;line-height:1.2;color:var(--color-text);
}
.way__address{
  margin:0;padding-top:16px;
  min-height:120px;   /* 주소가 1줄/2줄이어도 지도 버튼 위치를 블록마다 동일하게 고정 */
  font-family:'Pretendard';font-weight:500;font-size:15px;line-height:22px;color:var(--color-gray);
}
.way__btns{display:flex;flex-direction:row;align-items:flex-start;gap:11px;}
.way__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:167px;height:40px;border-radius:5px;
  font-family:'Pretendard';font-weight:600;font-size:14px;color:var(--color-text);
  transition:filter .2s ease;
}
.way__btn:hover{filter:brightness(.94);}
.way__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.way__btn--naver{background:#4bc94e;}
.way__btn--kakao{background:#F7DF49;}
.way__btn-ico{width:18px;height:18px;object-fit:contain;flex-shrink:0;}

/* 태블릿 : 약도/정보 세로 배치로 전환 전까지 정보 영역 폭만 줄임 */
@media (max-width:1023.98px){
  .way__item{gap:28px;}
  .way__map{flex-basis:58%;max-width:none;}
  .way__info{padding-top:12px;}
}

/* 모바일(제안) : 약도 위 / 정보 아래 1열, 지도 버튼 2개 가로 배치 */
@media (max-width:767.98px){
  .way__list{gap:48px;margin-top:36px;}
  .way__item{flex-direction:column;gap:22px;}
  .way__map{flex:none;width:100%;}
  .way__info{width:100%;padding-top:0;}
  .way__title{font-size:17px;padding-bottom:12px;}
  .way__address{min-height:0;padding:12px 0 20px;font-size:14px;line-height:21px;}
  .way__btns{flex-direction:row;gap:8px;}
  .way__btn{flex:1 1 0;width:auto;height:44px;font-size:14px;}
}

/* ========================================================================================================================
   2026-10-01 lsyclaude
   평면안내 페이지(.plan-unit) - unit/plan.php
   - 타입 탭(4개 균등) + 면적표(회색 박스) + 아이소메트릭 통이미지(가운데 정렬) + 안내문구(.overview__notice 재사용)
   - 기준 : 데스크톱 1920(컨텐츠 1088px) / 모바일 390
======================================================================================================================== */
.plan-unit{padding:94px 0 200px;}
/* 2026-10-02 lsyclaude(수정) : "서브페이지 본문 컨텐츠 폭 공통" 규칙(.sub-nav ~ main > .container)으로 대체
.plan-unit .container{max-width:1128px;}   컨텐츠 1088px + 좌우 패딩 20px */
.plan-unit__sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 타입 탭 : 하단 1px 회색선, 선택 탭은 레드 3px 밑줄 */
.plan-unit__tabs{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #C2C2C2;
}
.plan-unit__tab{
  position:relative;
  height:60px;padding:0 10px;
  font-family:'Pretendard';font-weight:500;font-size:16px;color:var(--color-text);
  white-space:nowrap;
  transition:color .2s ease;
}
.plan-unit__tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--color-primary);
  transform:scaleX(0);transition:transform .25s ease;
}
.plan-unit__tab:hover{color:var(--color-primary);}
.plan-unit__tab.is-active{font-weight:600;color:var(--color-text);}
.plan-unit__tab.is-active::after{transform:scaleX(1);}
.plan-unit__tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}

/* 면적표 : 회색 박스 안에 4항목 가로 배치, 라벨 | 값 */
.plan-unit__area{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 70px;
  min-height:106px;margin:30px 0 0;padding:20px 30px;
  background:#F2F2F2;
}
.plan-unit__area-item{display:flex;align-items:center;}
.plan-unit__area-item dt{
  font-family:'Pretendard';font-weight:400;font-size:15px;color:var(--color-text);
}
.plan-unit__area-item dt::after{
  content:'';display:inline-block;vertical-align:middle;
  width:1px;height:14px;margin:0 16px;background:#C2C2C2;
}
.plan-unit__area-item dd{
  font-family:'Pretendard';font-weight:600;font-size:16px;color:var(--color-text);
}
.plan-unit__area-item sup{font-size:.6em;line-height:0;}

/* 아이소메트릭 이미지 : 라벨까지 포함한 통이미지, 가운데 정렬 */
.plan-unit__visual{margin-top:60px;display:flex;justify-content:center;}
.plan-unit__visual img{width:auto;max-width:100%;height:auto;}

.plan-unit__notice{margin-top:105px;}

@media (min-width:1024px){
  .plan-unit ~ .lead{margin-top:0;}
}

/* 태블릿 : 면적표 간격 축소 */
@media (max-width:1023.98px){
  .plan-unit__area{gap:14px 40px;}
}

/* 모바일(제안) : 타입 탭 2x2, 면적표 2열(라벨 위/값 아래), 이미지 화면 폭 */
@media (max-width:767.98px){
  .plan-unit{padding:30px 0 80px;}
  .plan-unit__tabs{grid-template-columns:repeat(2,1fr);border-bottom:0;}
  .plan-unit__tab{height:48px;font-size:15px;border-bottom:1px solid #C2C2C2;}
  .plan-unit__tab::after{bottom:-1px;}
  .plan-unit__area{
    display:grid;grid-template-columns:1fr 1fr;gap:18px 0;
    min-height:0;margin-top:20px;padding:22px 10px;
  }
  .plan-unit__area-item{flex-direction:column;gap:6px;}
  .plan-unit__area-item:nth-child(odd){border-right:1px solid #DADADA;}
  .plan-unit__area-item dt{font-size:13px;color:var(--color-gray);}
  .plan-unit__area-item dt::after{display:none;}
  .plan-unit__area-item dd{font-size:16px;}
  .plan-unit__visual{margin-top:36px;}
  .plan-unit__notice{margin-top:44px;}
}

/* ========================================================================================================================
   2026-10-01 lsyclaude
   인테리어 페이지(.interior) - unit/interior.php
   - 상단 카피/여백은 .overview--v2 재사용, 이 블록은 사진 갤러리만 정의
   - 기준 : 데스크톱 1920(컨텐츠 1088px, 전체 사진 1088×725 / 반 칸 사진 524×816) / 모바일 390
======================================================================================================================== */
.interior .overview__desc{margin-bottom:26px;}
.interior__gallery{
  display:grid;grid-template-columns:1fr 1fr;
  gap:38px 40px;
}
.interior__item{margin:0;}
.interior__item--full{grid-column:1 / -1;}
.interior__item img{width:100%;height:auto;display:block;background:#F2F2F2;}

/* 모바일(제안) : 사진 간격 축소, 반 칸 사진 2장은 나란히 유지 */
@media (max-width:767.98px){
  .interior.overview--v2 .overview__title{font-size:26px;line-height:1.4;}   /* 한 줄 타이틀이 길어 모바일은 크기 축소 */
  .interior .overview__desc{margin-bottom:24px;}
  .interior__gallery{gap:12px 10px;}
}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}