/* 공통 토대 — 변수·리셋·레이아웃 골격·footer·전화바 */
:root {
  --navy: #1b3a5c;
  --navy-dark: #12293f;
  --green: #2e7d5b;
  --gold: #b8860b;
  --background: #f4f6f9;
  --card-background: #ffffff;
  --text: #223142;
  --muted: #6b7a8c;
  --line: #e5eaf0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;   /* 스크롤바 자리 예약 — 페이지마다 컬럼이 15px 흔들리는 것 방지 */
}

body {
  margin: 0;
  font-family: 'Noto Sans KR', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--background);
  color: var(--text);
  line-height: 1.6;
  /* sticky footer — 콘텐츠가 짧아도 하단에 붙는다 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 본문 컬럼과 footer 사이 최소 간격 */
body > .column {
  margin-bottom: 28px;
}

/* Noto Sans KR에 없는 한자는 폰트가 섞여 폴백된다 → lang에 맞는 CJK 폰트를 먼저 */
html[lang="vi"] body {
  /* Noto Sans KR엔 베트남어 성조 문자가 없다 */
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans KR', sans-serif;
}

html[lang="zh"] body {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Noto Sans KR', 'Segoe UI', sans-serif;   /* KR은 footer 법정 1줄(한글) 폴백용 */
}

html[lang="zh-tw"] body {
  font-family: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', 'Noto Sans KR', 'Segoe UI', sans-serif;   /* KR은 footer 법정 1줄(한글) 폴백용 */
}

html[lang="ja"] body {
  font-family: 'Yu Gothic UI', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans KR', 'Segoe UI', sans-serif;   /* KR은 footer 법정 1줄(한글) 폴백용 */
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* 3계층 — 모바일 100% / 태블릿 768 / PC 1024 */
.column {
  max-width: 768px;
  width: 100%;        /* flex 부모 아래에서 auto 마진이 stretch를 끈다 — 폭 고정용 */
  margin: 0 auto;
  padding: 0 16px;
}

/* 768은 큰 모니터에서 여백이 과도 → 1024 */
@media (min-width: 1024px) {
  .column {
    max-width: 1024px;
  }
}

.back-link {
  display: inline-block;
  margin: 14px 0 6px;
  font-weight: 700;
  color: var(--navy);
}

.section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 22px 0 10px;
}

.section-title small {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}

/* ---------- 풀폭 사이트 헤더 — sticky로 전화 상시 노출 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(27, 58, 92, 0.05);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;   /* 모바일 컴팩트 — PC는 64px */
}

.site-logo {
  display: flex;
  align-items: center;   /* 로고 마크와 글자를 같은 축에 (마크 없던 시절엔 baseline) */
  gap: 8px;
  min-width: 0;
}

/* 로고 마크: 원본이 239px라 그 이상 키우지 않는다(확대해도 선명해지지 않는다) */
.site-logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;   /* 320px 폭에서 글자에 밀려 찌그러지지 않게 */
}

.site-logo-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.site-logo strong {
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  white-space: nowrap;
}

/* 상호 꼬리('REAL ESTATE')는 PC에서만 — 좁은 화면에선 전화 버튼을 침범한다 */
.site-logo-suffix {
  display: none;
}

.site-logo small {
  display: none;   /* 상호 병기(간판 대조)는 좁은 화면에서 생략 — PC에서만 */
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--muted);
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 모바일: 전화는 원형 아이콘 버튼 (번호·문구는 PC에서만 — 320px 폭 보호) */
.site-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 3px 10px rgba(27, 58, 92, 0.25);
}

.site-phone b {
  font-size: 16px;
  line-height: 1;
}

.site-phone-number {
  display: none;
}

.site-phone small {
  display: none;
}

/* 헤더 안의 언어 선택은 자체 상단 여백 제거 */
.site-header .language-picker {
  padding: 0;
}

/* 320px대에선 언어 라벨(100~130px)이 상호를 전화 버튼으로 밀어넣는다 → 지구본만 */
@media (max-width: 359px) {
  .site-header .language-picker-button > span:not(.language-picker-caret) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-header-inner {
    height: 64px;
  }

  .site-logo-mark {
    width: 42px;
    height: 42px;
  }

  .site-logo-suffix {
    display: inline;   /* 간격은 마크업의 실제 공백이 만든다 — 여백으로 띄우면 복사·낭독 시 한 단어로 붙는다 */
  }

  .site-logo strong {
    font-size: 20px;
  }

  .site-logo small {
    display: inline;
  }

  .site-header-right {
    gap: 14px;
  }

  /* PC: 원형 아이콘 → 번호+환영 문구 전체 노출 */
  .site-phone {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 7px;
    align-items: baseline;
  }

  .site-phone b {
    font-size: 18px;
    font-weight: 900;
    color: var(--navy);
  }

  .site-phone-number {
    display: inline;
  }

  .site-phone small {
    display: inline;
    font-size: 11.5px;
    color: var(--muted);
  }
}

/* ---------- footer (법정 표기 fragment) ---------- */
.footer {
  background: var(--navy-dark);
  color: #cdd8e4;
  padding: 22px 0 26px;
  margin-top: auto;   /* sticky footer — 남는 세로 공간을 위쪽 여백으로 흡수해 하단 고정 */
  width: 100%;
}

.footer-legal {
  font-size: 12px;
  line-height: 1.8;
}

.footer-legal a {
  color: #cdd8e4;
}

.footer-note {
  font-size: 11px;
  color: #8fa2b5;
  margin-top: 8px;
}