/* 공통 토대 — 변수·리셋·레이아웃 골격·footer·전화바 */
:root {
  /* ---------- 색 ---------- */
  --navy: #1b3a5c;
  --navy-dark: #12293f;
  --green: #2e7d5b;
  /* 매매 배지 하나만 쓴다. #b8860b은 흰 글씨와 대비 3.25로 AA(4.5) 미달이라 명도만 낮췄다
     — 색상·채도는 그대로. 결과 4.99로 전세(green 5.00)와 나란해진다 */
  --gold: #906909;
  --background: #f4f6f9;
  --card-background: #ffffff;
  --text: #223142;
  --muted: #6b7a8c;
  --line: #e5eaf0;
  --surface-tint: #f0f4f9;   /* 표 머리·비활성 영역 등 아주 옅은 면 */
  --on-navy: #cdd8e4;        /* 네이비 위에 얹는 보조 텍스트(footer) */
  --danger: #dc2626;         /* 삭제·영구삭제 */
  --danger-bg: #fef2f2;
  --danger-line: #fecaca;

  /* ---------- 타이포 스케일 (7단계) ----------
     기존 27종(0.5px 단위)을 정리한 것. 새 스타일은 반드시 이 안에서 고른다.
     42·52px는 히어로/에러 화면 일회성 디스플레이라 토큰 밖에 둔다.
     xs·sm는 11/13이었다 — 손님 화면에 13px 이하 글자가 51개였고(관리자는 15~19px)
     아버지 또래 손님도 본다. 한 단계씩만 올렸다. 두 단계면 md(15)와 붙어 위계가 사라진다 */
  --fs-xs: 12px;    /* 배지·캡션 */
  --fs-sm: 14px;    /* 보조 정보 */
  --fs-md: 15px;    /* 본문 */
  --fs-lg: 17px;    /* 소제목·강조 */
  --fs-xl: 20px;    /* 섹션 제목 */
  --fs-2xl: 26px;   /* 페이지 제목 */
  --fs-3xl: 32px;   /* 히어로 */

  /* ---------- 모서리 (4단계) ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---------- 그림자 — 높이(elevation) 3단계 ----------
     포커스링·바텀시트·모달은 의미가 달라 토큰화하지 않고 그 자리에 둔다 */
  --sh-sm: 0 2px 8px rgba(27, 58, 92, 0.10);
  --sh-md: 0 6px 18px rgba(27, 58, 92, 0.18);
  --sh-lg: 0 12px 30px rgba(27, 58, 92, 0.22);

  /* ---------- 여백 — 4px 그리드 ----------
     기존 값(36종)은 건드리지 않았다. 손대면 전 화면 레이아웃이 밀리는데
     얻는 건 내부 일관성뿐이라 비용이 크다. 새로 쓰는 스타일만 여기서 고른다 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
}

* {
  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: var(--fs-lg);
  font-weight: 800;
  color: var(--navy);
  margin: 22px 0 10px;
}

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

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

.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: var(--fs-lg);
  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: var(--fs-xs);
  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;
  /* 44px = 손가락 최소 터치 영역(Apple HIG 44pt). 사이트에서 제일 중요한 버튼인데
     38px였다. 헤더가 52px이라 위아래 4px씩 남고 줄이 밀리지 않는다 */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: var(--sh-md);
}

.site-phone b {
  font-size: var(--fs-xl);   /* 원이 커진 만큼 📞도 한 단계 (PC는 아래에서 같은 값으로 덮는다) */
  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: var(--fs-xl);
  }

  .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: var(--fs-xl);
    font-weight: 900;
    color: var(--navy);
  }

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

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

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

.footer-legal {
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.footer-legal a {
  color: var(--on-navy);
}

.footer-note {
  font-size: var(--fs-xs);
  color: #8fa2b5;
  margin-top: 8px;
}

/* ---------- 선 아이콘 (fragments/icons.html) ---------- */
/* currentColor라 놓이는 자리의 글자색을 그대로 따라간다 — 이모지로는 못 하던 것 */
.ico {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;   /* 글자 baseline에 맞춘다 */
}