/* ============================================================================
   base (2단계) — 리셋 + 타이포 기본 + 헤더/푸터 공통
   미디어쿼리는 991 / 992 / 1001 / 2560 경계에서만 사용(기준서 A-5).
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  font-size: 16px;                 /* 루트 16px 고정 (기준서 B-7) */
  scroll-behavior: smooth;         /* 기준서 M1 */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);     /* 16px→24px (기준서 B-8) */
  letter-spacing: var(--ls-base);  /* 국문 기본 -0.8px */
  color: var(--color-text);
  background: #fff;
  word-break: keep-all;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
small { opacity: .8; }

/* 화면엔 안 보이지만 검색엔진·화면낭독기는 읽는 텍스트.
   구간 디자인 이미지처럼 글자가 이미지에 구워진 자리에 같은 내용을 함께 둘 때 쓴다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 포커스 링: 원본은 :focus-visible 0건이지만 접근성용으로 복원(기준서 M7 권장) */
:focus-visible { outline: 2px solid var(--color-main2); outline-offset: 2px; }

/* 모바일에서 링크·버튼을 누를 때 브라우저가 칠하는 기본 하이라이트(안드로이드 크롬은 하늘색)를 끈다.
   햄버거 버튼에서 파란 사각형이 잠깐 비치던 원인. 누른 느낌은 각 요소의 :active로 준다. */
a, button, input, select, textarea, label, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ============================== 로고 (공홈 인라인 SVG 추출본 — 벡터) ==============================
   logo_en.svg = ♯ THE SHARP(142×30) · logo_kr.svg = 더샵 관저아르테(126×19).
   currentColor mask 방식이라 색 전환은 color 하나로(어두운 배경=흰색, 밝은 배경=네이비). */
.logo-mark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--color-main2); }
.logo-mark .li { display: block; background: currentColor; }
.logo-mark .li-en {
  width: 104px; height: 22px;
  -webkit-mask: url(../img/logo_en.svg) no-repeat center / contain;
  mask: url(../img/logo_en.svg) no-repeat center / contain;
}
.logo-mark .li-kr {
  width: 86px; height: 13px;
  -webkit-mask: url(../img/logo_kr.svg) no-repeat center / contain;
  mask: url(../img/logo_kr.svg) no-repeat center / contain;
}
.logo-mark.is-light { color: var(--color-text-invert); }
.logo-mark.is-lg .li-en { width: 156px; height: 33px; }
.logo-mark.is-lg .li-kr { width: 126px; height: 19px; }

/* ============================== 헤더 공통 뼈대 ============================== */
.site-header { width: 100%; z-index: 50; }
.site-header .gnb { display: flex; align-items: center; }

/* ---------- 991px↑: 헤더 fixed (기준서 15) ---------- */
@media (min-width: 991px) {
  .site-header {
    position: fixed;
    top: 0;
    height: var(--pc-header-height);
  }
  .site-header .gnb {
    /* 로고 | 메뉴 | (스피커+전화)를 한 줄 flex로 흘린다.
       메뉴를 남는 폭 전부에 채우므로 좌우 간격이 gap 값 하나로 고정된다
       — 절대배치+가운데정렬이던 이전 방식은 로고(200px)와 우측묶음(245px) 폭이 달라
       한쪽만 80px로 벌어졌다(다른 쪽은 35px). flex로 바꾸면 양쪽 모두 gap 값 그대로. */
    justify-content: space-between;
    gap: var(--hdr-gap);
    /* 로고·전화의 기준선. position:relative가 없으면 absolute 자식이 헤더(전체 폭)에 붙어
       넓은 화면에서 화면 양 끝까지 벌어진다 — 오산 실측: 1440에서 16px, 1920에서 160px
       (= 폭 calc(100%-32px)·최대 1600px 컨테이너의 좌우 끝). 1400이 아니라 1600이다. */
    position: relative;
    width: calc(100% - 32px);
    max-width: 1600px;
    margin: 0 auto;
    height: var(--pc-header-height);
    font-size: var(--fs-16);
  }
  .site-header .menu-btn { display: none; }

  .site-header .logo { flex: 0 0 auto; }

  /* 메뉴 폭 — 오산 기본은 960px(60rem)이고 2560↑에서 1200px로 넓어진다.
     넓은 화면에서 메뉴만 가운데 960px에 몰리면 로고·전화와 사이가 크게 벌어져 보이므로,
     남는 폭에 따라 메뉴를 늘려 좌우로 붙인다(대표 지시 2026-08-27: 메뉴와 더 가깝게).
     560px = 로고(200) + 전화묶음(245) + 여백 — 이 값 아래로는 겹치니 하한을 둔다. */
  .site-header .nav {
    display: flex; height: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* nowrap — 줄바꿈을 허용하면 좁은 창에서 'E-모델하우스'가 조용히 두 줄로 접힌다(실측 991px).
     넘치면 눈에 보이게 두고, 아래 좁은 구간 규칙으로 실제로 안 넘치게 만든다. */
  .site-header .nav a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; white-space: nowrap; }
  .site-header .nav a:hover { color: var(--color-main1); }         /* 원본: header .nav a:hover */
  .site-header .nav a.is-active { font-weight: var(--fw-head); }   /* 원본: header .nav a.active { font-weight:700 } */

  /* 헤더 우측 묶음: BGM 토글 + 전화 배지.
     오산은 토글을 right:13~17rem 매직값으로 박아놨지만, 전화번호 길이에 따라 어긋나므로
     같은 시각 결과를 전화 배지 기준 flex로 잡는다(토글이 항상 배지 왼쪽에 붙는다). */
  .site-header .hd-right {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-12);
  }
  .site-header .tel {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--color-main1);
    color: var(--color-text-invert);
    font-weight: var(--fw-emph);
    font-size: var(--fs-24);
    border-radius: var(--radius-circle);
    padding: var(--sp-4) 22px;
    white-space: nowrap;
  }
  .site-header .tel .tel-short { display: none; }

  /* 헤더가 열리면(hover) 흰 배경 — 기본은 투명(실측) */
  .site-header:hover { background: #fff; }

  /* 어두운 섹션 위에서는 아주 옅은 스크림을 깐다.
     오산 헤더는 불투명 네이비라 흰 글자가 늘 읽히는데, 우리는 투명이라 히어로 영상의
     '밝은 하늘' 구간에서 흰 GNB가 배경에 묻힌다(실측). 스크림은 위 45%→아래 0으로 사라져
     투명한 인상은 그대로 두면서 글자만 살린다. hover(흰 배경)일 땐 끈다. */
  .site-header.on-dark::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: calc(var(--pc-header-height) + 24px);
    background: linear-gradient(180deg, rgba(0, 18, 65, .45) 0%, rgba(0, 18, 65, 0) 100%);
    pointer-events: none;
    z-index: -1;
  }
  .site-header.on-dark:hover::before { opacity: 0; }

  /* 어두운 섹션 위: 흰 로고/흰 GNB (섹션의 data-header가 JS로 헤더에 반영됨) */
  .site-header.on-dark .logo-mark { color: var(--color-text-invert); }  /* 오산 header-logo-white/color 전환 패턴 */
  .site-header.on-dark .nav a { color: var(--color-text-invert); }
  .site-header.on-dark:hover .logo-mark { color: var(--color-main2); }
  .site-header.on-dark:hover .nav a { color: var(--color-text); }

  /* 메가 메뉴: hover 시 열림 — 원본과 동일하게 헤더 하단(top:100%)에 부착.
     z-index:1로 header-dim(뒤 형제) 위에 layering. */
  .mega {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #f5f5f5;
    max-height: 0;
    overflow: hidden;
    z-index: 1;
  }
  .site-header:hover .mega { max-height: 1000px; border-bottom: 1px solid #eee; }
  .mega-inner {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));  /* GNB 7 카테고리(오산 구조 1:1) */
    max-width: var(--pc-gnb-width);
    margin: 0 auto;
  }
  .mega-col { border-left: 1px solid #ebebeb; }
  .mega-col:last-child { border-right: 1px solid #ebebeb; }
  .mega-col h4 { display: none; }
  .mega-col ul li a { display: block; padding: var(--sp-16) var(--sp-12); text-align: left; } /* 원본: .depth2>li a 16px/12px, start 정렬 */
  .mega-col ul li a:hover { background: var(--color-main1); color: var(--color-text-invert); }

  /* 헤더 열림 시 화면 딤 */
  .header-dim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: #000; opacity: 0; pointer-events: none; }
  .site-header:hover .header-dim { opacity: .5; }

  /* 모바일 전용 메뉴 리스트는 데스크톱에서 완전 숨김 (모바일 마크업 데스크톱 격리) */
  .mega .mo-gnb { display: none; }
}

/* ---------- 991~1199px: 좁은 데스크톱 ----------
   로고(200) + 전화번호 필(193) + 스피커(40)가 자리를 다 먹어 메뉴 한 칸이 67px까지 줄고
   'E-모델하우스'가 두 줄로 접힌다(실측). 이 구간만 전화 배지를 짧게 쓰고 간격·글자를 조인다.
   (오산 원본은 min-width 1400이라 이 구간 자체를 지원하지 않는다 — 우리 쪽 보강) */
@media (min-width: 991px) and (max-width: 1199px) {
  .site-header .gnb { gap: 16px; }
  .site-header .nav { font-size: 15px; }
  .site-header .tel .tel-full { display: none; }
  .site-header .tel .tel-short { display: inline; }
  .site-header .logo .li-en { width: 88px; height: 19px; }
  .site-header .logo .li-kr { width: 72px; height: 11px; }
}

/* ---------- 2560px↑: .gnb/.logo 폰트 16→20px (기준서 A-5, 실측 문면대로) ---------- */
@media (min-width: 2560px) {
  .site-header .gnb { font-size: 20px; }
  .site-header .logo .li-en { width: 130px; height: 28px; }  /* 2560↑ 로고 동일 비율 확대 */
  .site-header .logo .li-kr { width: 108px; height: 16px; }
}

/* ---------- 990px↓: 헤더 sticky + 네이비 (기준서 15) — 상세는 3단계 ---------- */
@media (max-width: 990px) {
  html { min-width: initial; }
  .site-header { position: sticky; top: 0; background: var(--color-main1); z-index: 3; } /* 원본: .site-header sticky z3 — 메뉴 패널(absolute)이 본문 위에 얹히는 기준 */
  .site-header .gnb { position: relative; height: var(--mo-header-height); justify-content: center; }
  .site-header .logo { color: var(--color-text-invert); gap: 6px; }
  .site-header .logo .li-en { width: 21vw; height: 4.5vw; }
  .site-header .logo .li-kr { width: 18vw; height: 2.8vw; }
  .site-header .nav { display: none; }
  .site-header .menu-btn {
    position: absolute; left: 4vw; top: 50%; transform: translateY(-50%);
    width: 26px; height: 20px; display: block;
  }
  .site-header .menu-btn span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: var(--sp-4); }
  .site-header .menu-btn span:nth-child(1) { top: 0; }
  .site-header .menu-btn span:nth-child(2) { top: 9px; }
  .site-header .menu-btn span:nth-child(3) { bottom: 0; }
  /* 원본 모바일: 우측 짧은 배지(전화상담) — 긴 번호는 로고와 겹쳐 숨김.
     BGM 토글은 모바일 미노출(오산 동일 — 모바일엔 오디오 진입점이 없다) */
  .site-header .hd-right { position: absolute; right: 2vw; display: flex; align-items: center; }
  .site-header .bgm-toggle { display: none; }
  .site-header .tel {
    display: flex; align-items: center; gap: 4px;
    background: #fff; color: var(--color-main1);
    font-weight: var(--fw-head); font-size: 3.6vw;
    border-radius: var(--radius-circle); padding: 1.2vw 3vw;
  }
  .site-header .tel .tel-full { display: none; }
  .mega, .header-dim { display: none; } /* 모바일 메뉴 패널은 3단계에서 구현 */
}

/* ============================== 푸터 공통 뼈대 ============================== */
.site-footer { width: 100%; background: var(--color-footer-bg); color: var(--color-text-invert); }
.site-footer .ft-wrap { display: flex; }
.site-footer .ft-logo { margin-bottom: var(--sp-20); color: var(--color-text-invert); }
/* 푸터 표 — 오산 실측 그대로: 글자 10.92px · 행간 16.38px · 자간 -0.546px ·
   라벨 열 68px(우리는 16px였고 라벨 열이 120px여서 값이 멀리 떨어져 보였다). */
.site-footer table {
  width: 100%;
  font-size: 0.6825rem;          /* 10.92px */
  font-weight: var(--fw-btn);
  line-height: 1.5;              /* 16.38px */
  letter-spacing: -0.546px;
  margin-bottom: var(--sp-20);
  border-collapse: collapse;
}
.site-footer table td { padding: 2px 0; vertical-align: top; }
.site-footer table td:first-child { width: 68px; font-weight: var(--fw-head); padding-right: var(--sp-8); }
.site-footer p { font-size: var(--fs-12); font-weight: var(--fw-light); line-height: 1.75; letter-spacing: -0.6px; opacity: .8; }
.site-footer p + p { margin-top: 2px; }
.site-footer .ft-copyright { margin-top: var(--sp-12); }
.site-footer .ft-tel { display: flex; align-items: center; font-size: var(--fs-24); }
.site-footer .ft-tel b { font-size: 1.8rem; font-family: var(--font-display-kr); }

@media (min-width: 991px) {
  .site-footer .ft-wrap { width: var(--container-1400); margin: 0 auto; padding: 3rem 0 4rem; }
  .site-footer .ft-info { display: flex; flex-direction: column; width: 70%; }
  .site-footer .ft-side { display: flex; flex-direction: column; align-items: flex-end; width: 30%; padding-top: var(--sp-10); }
}
@media (max-width: 990px) {
  .site-footer .ft-wrap { flex-direction: column-reverse; padding: 0; }
  .site-footer .ft-info { padding: 3vw; }
  .site-footer .ft-side { padding: 8vw 2.5vw 2.5vw; border-bottom: 1px solid rgba(255,255,255,.2); }
}

/* ───────── 팝업 배너 ─────────
   PC는 두 장 나란히, 모바일은 위아래. 이미지 비율(760:1140)을 유지한다. */
/* inset:0 만으로는 크기가 안 잡혀 0×0이 됐다(실측) — 상하좌우와 크기를 함께 준다 */
.site-popup {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 60; display: flex; align-items: center; justify-content: center;
}
.site-popup[hidden] { display: none; }
.site-popup .sp-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 6, 24, .72); }
.site-popup .sp-inner {
  position: relative; z-index: 1;
  width: min(94vw, 860px);
  max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-12);
  padding: 0 var(--sp-8) var(--sp-8);
}
.site-popup .sp-close {
  align-self: flex-end;
  background: none; border: 0; padding: var(--sp-8) var(--sp-4);
  color: #fff; font-size: var(--fs-14); font-weight: var(--fw-head); cursor: pointer;
}
.site-popup .sp-imgs { display: flex; gap: var(--sp-12); }
/* flex-basis를 0으로 두면 이미지가 폭을 못 잡아 0으로 접힌다(실측) — 50%로 준다 */
.site-popup .sp-card { flex: 1 1 50%; min-width: 0; display: block; border-radius: 6px; overflow: hidden; }
.site-popup .sp-card img { display: block; width: 100%; height: auto; }
.site-popup .sp-today {
  display: flex; align-items: center; gap: var(--sp-8);
  color: #fff; font-size: var(--fs-14);
}
.site-popup .sp-today input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--color-main3); }

/* 모바일에서는 띄우지 않는다(대표 지시 2026-08-27).
   CSS로만 숨기면 화면 밖에서 이미지를 계속 받으므로 JS에서도 아예 열지 않는다. */
@media (max-width: 990px) {
  .site-popup { display: none !important; }
}

/* 허니팟 — 봇만 채우는 칸. 화면·낭독·탭이동에서 모두 빠진다. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}