@charset "UTF-8";
/*
* Footer styles — A(분양특화) / B(기업형)
* Copyright 마케터비
* 검정 배경 + 넉넉한 여백의 미니멀 에디토리얼 스타일
* (한강 푸르지오 리버프론트 공식홈페이지 데스크탑 푸터 벤치마킹)
*/

/* ===== 공통 ===== */
.xet-layout .layout__footer {
  /* [2026-08-24] 라이믹스 관리자로 로그인해서 볼 때 페이지/위젯을 바로 수정하는
     아이콘이 화면 하단에서 푸터에 가려 보이는 문제 - 이 z-index:1 이 원인일
     가능성이 높다. position:relative 자체는 안쪽 footer-top-btn(맨위로 버튼,
     z-index:2)의 위치 기준으로 계속 필요하지만, 바깥쪽 z-index:1 은 푸터를
     본문 콘텐츠보다 항상 위 스택으로 끌어올려서, 그 관리자 전용 아이콘처럼
     z-index 가 없는 일반 콘텐츠 요소가 푸터 영역과 겹칠 때 밑에 깔려버리게
     만든다. 코드 전체를 확인해도 이 z-index:1 이 꼭 필요한 이유(겹쳐야 하는
     다른 요소)를 찾지 못해 제거한다 - 데스크탑/모바일 화면에 시각적 차이는
     없어야 한다. */
  position: relative;
  background-color: #0a0a0a;
  color: rgba(255, 255, 255, 0.56);
  transition: var(--transition-all);
}
.xet-layout .layout__footer a {
  color: inherit;
}

/* ----- TOP 버튼 (푸터 우측 상단 고정 링크, 플로팅 버튼 아님) ----- */
.footer-top-btn {
  position: absolute;
  top: 32px;
  right: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-top-btn i {
  font-size: 1rem;
}
.footer-top-btn:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* =====================================================
   Style A — 분양특화 (전환 집중)
   ===================================================== */
.xet-layout .footer--style-A {
  padding: 0;
}
.footer-a__cta {
  background-color: var(--theme-color);
  padding: var(--gap2x) 0;
}
.footer-a__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  text-align: center;
}
.footer-a__cta-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer-a__cta-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.footer-a__cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.footer-a__cta-tel i {
  font-size: 1.6rem;
}
.footer-a__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.85rem 2rem;
  background-color: #fff;
  color: var(--theme-color) !important;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: var(--box-shadow);
  transition: var(--transition-all);
}
.footer-a__cta-btn:hover {
  transform: translateY(-2px);
}
.footer-a__body {
  padding: 72px 24px 40px;
  text-align: center;
}
.footer-a__brand {
  margin-bottom: 28px;
}
.footer-a__logo {
  display: inline-block;
  max-height: 36px;
}
/* [2026-08-24] 어두운 배경용 로고(logo_img_dark) 미등록 시 밝은 배경용 로고로
   대체되는데, 그 로고가 어두운 색 위주면 어두운 푸터 배경에 묻힌다. 로고의
   원래 색상과 무관하게 완전한 흰색 실루엣으로 강제 변환 - 헤더의
   .logo__dark.not (css/header.css) 과 동일한 필터 값으로 통일했다. */
.footer-a__logo.is-fallback-white,
.footer-b__logo.is-fallback-white {
  filter: brightness(0) invert(1);
}
.footer-a__name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
.footer-a__notes {
  margin-bottom: 28px;
}
.footer-a__notes p {
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
}
/* [기법 3] 항목 사이 "|" 구분선을 텍스트로 넣지 않고 li::after 가상요소로 그린다.
   줄바꿈 시 특정 항목 뒤에 남는 구분선은 아래 반응형 블록에서 nth-child 로 개별 제거. */
.footer-a__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.footer-a__info li {
  position: relative;
  padding: 0 10px;
  white-space: nowrap;
}
.footer-a__info li::after {
  content: "|";
  display: inline-block;
  position: absolute;
  right: -2px;
  top: 0;
  opacity: 0.35;
}
.footer-a__info li:last-child::after {
  display: none;
}
/* js/footer.js 가 실제 렌더된 offsetTop 을 비교해 "줄이 바뀌는 지점의 마지막 항목"에
   붙여준다 - 항목 문구 길이가 관리자 입력값이라 고정 폭에서 어디서 줄바꿈될지
   미리 알 수 없으므로, 레퍼런스처럼 nth-child 로 하드코딩하지 않고 실측 방식을 쓴다. */
.footer-a__info li.is-line-end::after {
  display: none;
}
.footer-a__info li a {
  display: inline-flex;
  align-items: center;
}
.footer-a__info strong {
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
/* [2026-08-22] 카피라이트 줄 - A/B 공통으로 "카피문구 | Powered by 마케터비"
   한 줄로 합쳤다(기존엔 별도 줄의 .footer-credit 였음). 래퍼(footer-a__copy /
   footer-b__copy)는 스타일별로 유지하되 내용은 공유 클래스로 통일. */
.footer-a__copy,
.footer-b__copy {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.4);
}
.footer-copy__divider {
  margin: 0 10px;
  opacity: 0.3;
}
.footer-copy__credit {
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.56);
  transition: var(--transition-all);
}
.footer-copy__credit:hover {
  color: #fff;
}

/* =====================================================
   Style B — 기업형 (정보 정돈·신뢰)
   ===================================================== */
.xet-layout .footer--style-B {
  padding: 100px 24px 48px;
}
/* [2026-08-22] 3컬럼(브랜드/정보/바로가기) 구조를 사용자 첨부 이미지대로
   "로고+추가정보(좌) / 대표전화(우)" 한 줄 + 구분선 + 카피라이트줄 로 재구성.
   '바로가기'(footer-b__menu) 컬럼은 요청대로 완전히 제거. */
.footer-b__top {
  display: flex;
  flex-direction: column;
  gap: var(--gap2x);
}
.footer-b__brand {
  min-width: 0;
}
.footer-b__logo {
  display: block;
  max-height: 32px;
  margin-bottom: 20px;
}
.footer-b__name {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 20px;
}
.footer-b__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff !important;
  flex-shrink: 0;
}
/* [추가정보 1~6] 목록 — 로고 바로 아래, 항목명(strong) + 내용(span) */
.footer-b__info {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* [버그수정 2026-08-24] css/layout.css 의 legacy 규칙 `.layout__footer ul{display:flex;
   flex-wrap:wrap;gap:var(--gap)}` (원래 지금은 삭제된 '바로가기' 메뉴 목록용이었다)가
   특이도(0,2,1)로 이 목록의 원래 세로 목록 의도를 덮어써서, "항목명+내용"이 세로로
   한 줄씩 쌓이지 않고 li 들이 가로 한 줄에 나열됐다. 거기에 strong 의 min-width:96px
   (여러 줄일 때 항목명 컬럼을 맞추기 위한 값)까지 겹쳐서 "시행"처럼 짧은 항목명
   뒤로 비정상적으로 큰 빈 칸이 생기는 게 실제 원인이었다. 세로 목록으로 되돌린다. */
.xet-layout .layout__footer .footer-b__info {
  display: block;
}
.footer-b__info li {
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.9;
  padding: 2px 0;
  color: rgba(255, 255, 255, 0.56);
}
.footer-b__info strong {
  flex: 0 0 auto;
  min-width: 96px;
  color: rgba(255, 255, 255, 0.32);
  font-weight: 500;
}
.footer-b__info span {
  flex: 1 1 auto;
}
/* [2026-08-22] 구분선 위/아래 간격이 40px/24px 로 서로 달라 줄 위아래가
   안 맞아 보인다는 피드백 - 위아래를 똑같은 값으로 맞추고, footer-b__bottom
   쪽의 별도 padding-top 은 없앤다(있으면 40+24 로 아래쪽만 더 벌어짐). */
.footer-b__divider {
  height: 1px;
  margin: 40px 0;
  background-color: rgba(255, 255, 255, 0.12);
}
.footer-b__notes {
  margin-top: var(--gap);
}
.footer-b__notes p {
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
  color: rgba(255, 255, 255, 0.32);
}

/* =====================================================
   반응형 — 브레이크포인트 1024px 단일 (2026-08-22)
   사용자가 첨부한 참고 템플릿(footer_template.html)의 핵심 기법 3가지를 푸터에 적용:
   1) 브레이크포인트는 1024px 하나만 사용 (그 아래 모바일형 / 그 위 PC형).
      기존에 768px 에 걸려있던 규칙들을 전부 여기 1024px 하나로 합쳤다.
   2) 폭 여백은 min(Xvw, Ypx) 유동값으로 — 데스크탑에서 화면이 아무리 넓어도
      캡(px) 이상 커지지 않고, 1024~캡 도달 폭 사이에서는 vw 비율로 부드럽게
      줄어든다(1024px 에서 갑자기 60px 로 뛰는 계단현상 방지).
   3) footer-a__info 의 "|" 구분선은 텍스트가 아니라 li::after 가상요소로 그리고,
      줄바꿈되는 지점의 구분선은 nth-child 로 개별적으로 숨긴다 (아래 참고).
   ===================================================== */
/* [기법 2] 모바일 전용 유동 폰트 — min(vw, px) 로 캡을 씌워, 화면이 아주 좁아질
   때(폴더블 접힘 등)만 vw 비율로 더 줄어들고 그 외에는 사실상 캡 값 그대로 보인다.
   데스크탑(1024px~)은 기존 고정 값을 그대로 쓴다. */
@media (max-width: 1023px) {
  .footer-a__notes p,
  .footer-b__notes p {
    font-size: min(3.33333vw, 11px);
  }
  .footer-a__info {
    font-size: min(3.6vw, 0.85rem);
  }
  .footer-b__info li {
    font-size: min(3.6vw, 0.85rem);
  }
}
@media (min-width: 1024px) {
  .footer-a__cta-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .footer-a__cta-lead {
    align-items: flex-start;
  }
  .footer-a__cta-tel {
    font-size: 2.4rem;
  }
  .footer-b__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap2x);
  }
  .footer-b__tel {
    margin-top: 4px;
  }
  /* [기법 2] 좌우 패딩: 1024px 에서 곧장 60px 로 튀지 않고, 1920px 이상에서만
     60px 캡에 닿도록 vw 비율로 서서히 늘린다 (60px ÷ 19.2 = 3.125vw). */
  .xet-layout .footer--style-A .footer-a__body {
    padding: 100px min(3.125vw, 60px) 60px;
  }
  .footer-a__brand {
    margin-bottom: 40px;
  }
  /* [2026-08-22] "로고는 좌측끝, 번호는 우측끝" 요청 - 기존엔 이 바깥 padding(최대
     60px 유동값) + 안쪽 xet-container 패딩(16~30px) + max-width:1600 센터링이
     3중으로 겹쳐서 좌우 여백이 예상보다 훨씬 컸다. 데스크탑에서는 좌우 padding을
     0으로 비우고, 안쪽 3줄(top/divider/bottom)에서 24px 고정값 하나로만 통일해
     "작은 고정 여백만" 남긴다. 모바일은 그대로 유지(요청사항). */
  .xet-layout .footer--style-B {
    padding: 118px 0 60px;
  }
  /* 세 블록(로고+정보/카피라이트) 전부 같은 좌우 여백으로 통일.
     [버그수정 2026-08-23] .xet-layout 접두사 없이 .footer-b__top 단독으로만 썼더니
     css/common/responsive-grid.css 의 [class*=xet-container] 규칙(1200px↑ 24px,
     1440px↑ 30px)과 특이도가 똑같아져서(둘 다 0,1,0) 1200px 미만 창에서는 내 규칙이
     이기다가 1200px 이상(전체화면)에서 그 쪽 규칙이 로드순서상 나중이라 다시 이겨버렸다
     - "창 줄이면 정상, 전체화면하면 반영 안 됨" 증상의 정확한 원인. .xet-layout 을
     붙여 특이도를 0,2,0 으로 올려 로드순서와 무관하게 항상 이기도록 고정한다.
     [2026-08-24] 고정 24px 이 큰 화면에서 "화면 끝에 붙어 보인다"는 피드백으로,
     footer-a__body 와 같은 min(vw,px) 유동값으로 교체 - 1024px 근처에서는 24px 와
     비슷하게 작다가, 화면이 넓어질수록 최대 60px 까지 부드럽게 늘어난다
     (60px ÷ 19.2 = 3.125vw, 1920px 에서 캡에 도달). 모바일(1023px 이하)은 그대로 유지. */
  .xet-layout .footer-b__top,
  .xet-layout .footer-b__divider,
  .xet-layout .footer-b__bottom {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: min(3.125vw, 60px);
    padding-right: min(3.125vw, 60px);
  }
  .footer-top-btn {
    top: 60px;
    right: 60px;
  }
}

/* [버그수정 2026-08-23] "로고 좌측끝 / 전화번호 우측끝" 이 안 맞고 가운데 쪽으로
   쏠려 있던 원인 - css/common/responsive-grid.css 의 [class*=xet-container]:before/
   :after (content:"";display:table 클리어픽스) 가 .footer-b__top 과
   .footer-a__cta-inner 에도 그대로 걸리는데, 두 요소 다 display:flex 라서
   그 빈 가상요소가 "안 보이는 빈 flex 아이템" 으로 취급되어 justify-content:
   space-between 계산에 로고/전화번호와 나란히 끼어든다(실측: 2개 아이템이 아니라
   4개로 분배되어 로고가 24px 대신 367px 에서 시작). 이 두 컨테이너에서만
   가상요소를 꺼서 진짜 자식 2개(로고/추가정보 ↔ 전화번호)만 남긴다.
   .xet-layout 접두사로 특이도를 (0,2,1) 로 올려 [class*=xet-container]:before의
   (0,1,1) 을 로드순서와 무관하게 이긴다. */
.xet-layout .footer-b__top::before,
.xet-layout .footer-b__top::after,
.xet-layout .footer-a__cta-inner::before,
.xet-layout .footer-a__cta-inner::after {
  content: none;
  display: none;
}

/* 다크모드 전환 기능은 비활성화되어 있으나, 혹시를 대비해 푸터는 항상 동일한 다크 톤 유지 */