/* ═══════════════════════════════════════════════════════════════════════════
   site-footer.css — 전 페이지 공통 푸터 (정책 링크 + 사업자 정보 표시사항)

   ★ 이 파일은 landing / pricing / terms / privacy / refund / billing 6개 페이지가
     함께 읽는다. 푸터 스타일의 단일 출처 — 여기만 고치면 6곳이 같이 바뀐다.

   ★ 토큰을 선언하지 않는다. 호스트 페이지의 :root 변수를 쓰되, 변수가 없는
     페이지에서도 깨지지 않도록 var(--x, 폴백)을 전부 붙였다. legal.css를 안 읽는
     landing.html·billing.html에도 그대로 물릴 수 있어야 하기 때문이다.

   ★ 사업자 정보는 전자상거래법 제13조의 표시 의무 사항이라 각 페이지에 HTML로
     하드코딩되어 있다(JS 주입 금지 — 스크립트가 죽으면 표시 의무를 못 지킨다).
     값이 없는 항목은 "(등록 후 기재)"로 문구를 통일해 두었으니, 서류가 나오면
     `grep -rn "(등록 후 기재)" prototype-voice/public/` 한 번으로 전부 찾는다.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-foot {
  border-top: 1px solid var(--line, #e2e6ed);
  background: var(--paper, #fff);
  margin-top: 4rem;
  padding: 2.6rem 0 2.2rem;
  font-family: var(--font-body, 'Archivo', 'Pretendard', system-ui, sans-serif);
}

.site-foot .foot-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── 상단: 브랜드 + 정책 링크 ─────────────────────────────────────────────── */
.site-foot .foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft, #eef1f6);
}

.site-foot .foot-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display, 'Newsreader', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy, #0a1f44);
  text-decoration: none;
}

.site-foot .foot-brand .mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(145deg, var(--navy, #0a1f44), var(--accent, #1d4ed8));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-body, 'Archivo', system-ui, sans-serif);
}

.site-foot .foot-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-wrap: wrap;
}

.site-foot .foot-links a {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--slate, #4a5568);
  text-decoration: none;
  white-space: nowrap;
}

.site-foot .foot-links a:hover { color: var(--accent, #1d4ed8); }

/* 법정 문서 링크는 한 덩어리로 읽히게 살짝 강조 */
.site-foot .foot-links a.legal { color: var(--navy-soft, #16335f); font-weight: 600; }

/* ── 사업자 정보 (전자상거래법 제13조 표시사항) ───────────────────────────── */
.site-foot .biz {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-size: 0.79rem;
  line-height: 1.75;
  color: var(--mist, #7a8699);
}

.site-foot .biz > div {
  display: flex;
  gap: 0.4rem;
  /* 항목이 길어도 375px에서 가로로 넘치지 않게 줄바꿈을 허용 */
  min-width: 0;
}

.site-foot .biz dt {
  color: var(--slate, #4a5568);
  font-weight: 600;
  white-space: nowrap;
}

.site-foot .biz dd { margin: 0; word-break: break-word; }

/* 아직 값이 없는 항목 — 심사 전에 반드시 채워야 함을 시각적으로도 구분 */
.site-foot .biz .todo { color: #a3adbb; font-style: italic; }

.site-foot .biz a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-foot .biz a:hover { color: var(--accent, #1d4ed8); }

.site-foot .foot-note {
  margin-top: 1.1rem;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--mist, #7a8699);
}

.site-foot .foot-copy {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--mist, #7a8699);
}

/* ── 모바일 ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .site-foot { padding: 2rem 0 1.8rem; margin-top: 2.6rem; }
  .site-foot .foot-wrap { padding: 0 1.15rem; }
  .site-foot .foot-top { align-items: flex-start; flex-direction: column; gap: 0.9rem; }
  .site-foot .foot-links { gap: 0.55rem 1rem; }
  .site-foot .foot-links a { font-size: 0.82rem; }
  /* 375px에서 두 칼럼으로 흩어지면 라벨-값 대응이 안 읽힌다 → 한 줄에 한 항목 */
  .site-foot .biz { flex-direction: column; gap: 0.15rem; font-size: 0.775rem; }
}