/* ============================================================
   base.css — 변수·리셋·레이아웃 골격·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: 콘텐츠가 짧아도(검색 결과 0건 등) footer가 화면 하단에 붙는다 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 본문 컬럼(body 직계)과 footer 사이 최소 간격 — footer 안의 .column은 해당 없음 */
body > .column {
  margin-bottom: 28px;
}

/* 언어판별 본문 서체 — 한국어 폰트(Noto Sans KR)에 없는 한자는 임의 폰트로 폴백되어
   글자마다 서체·굵기가 섞이므로, html 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 부모(body) 아래에서 auto 마진이 stretch를 끄므로 명시 — 내용량과 무관하게 폭 고정 */
  margin: 0 auto;
  padding: 0 16px;
}

/* PC 계층: 768은 큰 모니터에서 좌우 여백이 과도(1920 기준 60%가 빈 공간) → 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: baseline;
  gap: 8px;
  min-width: 0;
}

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

.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;
}

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

  .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;
}