/* Page-level layout: header/footer shell, containers, sections, anchor scroll offset */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* 노치/펀치홀 기기에서 컨트롤·텍스트가 safe area 안에 머물도록 */
  padding-inline: max(var(--space-6), env(safe-area-inset-left))
    max(var(--space-6), env(safe-area-inset-right));
}

/* 반투명 머티리얼 헤더 — 콘텐츠가 아래로 스크롤되어 비친다.
   구분선은 상시 노출 대신 스크롤 시에만 나타나는 소프트 엣지(.is-scrolled). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--color-border);
  }
}

/* 헤더 내부 레이아웃은 components/nav.css의 .site-header__bar가 담당 */

main {
  flex: 1;
}

.l-section {
  padding: var(--space-16) 0;
}

.l-section:nth-of-type(even) {
  background: var(--color-surface);
}

/* Anchor targets: keep sections clear of the sticky header on jump/scroll,
   both for in-page nav clicks and a page loaded directly with a #hash.
   법정 문서의 조문(`article.legal-article#art-N`)도 같은 계산식을 쓴다 — 규칙이 `main section[id]`
   에만 걸려 있던 동안 /privacy·/terms·/email-policy 조문 32개의 scroll-margin-top이 0px이라
   목차·딥링크로 도착하면 조문 h2가 고정 헤더 뒤로 완전히 가려졌다(2026-09-08 발견).
   `initAnchorRouting()`이 대상의 computed scroll-margin-top을 읽어 쓰므로 JS 경로도 이 값을 따른다. */
main section[id],
main article[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* 푸터는 콘텐츠 밴드가 아니라 사이트 크롬이다 — 그래서 .l-section 교차와 같은 surface를 쓰면 안 된다.
   섹션 개수가 짝수인 페이지(현재 21개 중 12개)에서 마지막 섹션이 surface가 되어 푸터와 같은 색이 되고,
   1px 헤어라인 하나만 남아 구획이 사라진다(2026-09-05 /saas에서 발견). 한 단계 내려앉은 바닥을 주면
   섹션 교차 리듬을 건드리지 않고 모든 페이지에서 푸터가 크롬으로 읽힌다.
   뮤트 토큰을 이 스코프에서 재정의해 하위 요소(링크·사업자 dt·그룹 브랜드)까지 한 번에 대비를 올린다. */
.site-footer {
  --color-text-muted: var(--color-text-muted-strong);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  background: var(--color-surface-sunken);
}

/* 데스크톱: 브랜드 문장이 왼쪽 앵커, 내비 3열은 내용 폭만 차지하며 오른쪽에 모인다 —
   여백이 브랜드와 내비 사이에 한 덩어리로 놓여 의도적으로 읽힌다(균등 분배 시 열마다 흩어짐) */
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  column-gap: clamp(var(--space-12), 6vw, var(--space-20));
  row-gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-12);
}

@media (max-width: 767px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* 첫 컬럼(COMPANY, 링크 5개)이 왼쪽 두 행을 차지 → 링크 2개짜리 두 컬럼이 오른쪽에 위아래로 놓여 빈 칸이 없다 */
  .site-footer__grid > nav:first-of-type {
    grid-row: span 2;
  }

  /* 링크 행 간격은 유지하되 탭 영역을 44px 가까이 — 시각 간격은 음수 마진으로 상쇄 */
  .site-footer__links {
    gap: var(--space-1);
  }

  .site-footer__links a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -4px;
  }

  .site-footer__meta-links a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
}

.site-footer__logo {
  margin: 0 0 var(--space-3);
}

.site-footer__logo img {
  height: 17px;
  width: auto;
  opacity: 0.85;
}

.site-footer__tagline {
  margin: 0;
  max-width: 26ch;
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 태그라인 문장 속 인라인 워드마크 — base.css의 img { display: block }을 되돌려
   "boostree는 …"이 한 문장으로 흐르게 한다 */
.site-footer__tagline img {
  display: inline-block;
  height: 16px;
  width: auto;
  vertical-align: -2px;
}

.site-footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__links a,
.site-footer__meta a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__meta a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.site-footer__meta {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.site-footer__meta p {
  margin-bottom: var(--space-3);
}

/* 마지막 줄(©)은 한 단계 작고 연하게 — 사업자 정보와 위계 구분 */
.site-footer__meta > p:last-child {
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* 사업자 정보 5항목 — 라벨·값 쌍. 데스크톱은 한 줄로 흐르고(넘치면 접힘), 모바일은 1열로 정렬되어
   표처럼 읽힌다. 값이 중간에서 끊기지 않는다. 라벨은 한 단계 연하게, 값은 본문 회색. */
.site-footer__biz {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  margin: 0;
  line-height: 1.55;
  /* 항목 사이 헤어라인: 각 항목의 왼쪽 선을 쓰고, 첫 항목(과 줄바꿈된 첫 항목)의 선은
     dl을 왼쪽으로 밀어 .site-footer__biz-wrap(overflow hidden) 밖으로 내보낸다 — 줄이 접혀도 줄 앞에 선이 남지 않는다 */
  margin-left: calc(-1 * var(--space-4) - 1px);
}

.site-footer__biz-wrap {
  overflow: hidden;
  margin: 0 0 var(--space-3);
}

.site-footer__biz > div {
  display: flex;
  gap: var(--space-2); /* 라벨은 값에 바짝 — 묶음은 헤어라인이 가른다 */
  min-width: 0;
  padding-inline: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.site-footer__biz dt {
  flex: none;
  font-weight: 500;
  color: var(--color-text-muted);
  opacity: 0.7;
  white-space: nowrap;
}

.site-footer__biz dd {
  margin: 0;
  word-break: keep-all;
}

.site-footer__biz dd a {
  overflow-wrap: anywhere; /* 이메일처럼 긴 토큰만 칸을 넘기지 않고 접는다 */
}

/* 값 안의 링크(사업자정보확인·전화·이메일)는 평문 값과 구분되도록 연한 밑줄 — 두 테마 모두 currentColor 기반 */
.site-footer__meta .site-footer__biz a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
}

.site-footer__meta .site-footer__biz a:hover,
.site-footer__meta .site-footer__biz a:focus-visible {
  text-decoration-color: currentColor;
}

@media (max-width: 767px) {
  .site-footer__biz {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-left: 0;
  }

  .site-footer__biz-wrap {
    overflow: visible;
  }

  .site-footer__biz > div {
    gap: var(--space-3);
    padding-inline: 0;
    border-left: 0;
  }

  .site-footer__biz dt {
    width: 7.5rem;
    font-weight: 600;
    opacity: 0.8;
  }

  .site-footer__biz dd a {
    display: inline-block;
    padding-block: 9px;
    margin-block: -9px;
  }
}

.site-footer__meta-links {
  color: var(--color-text);
}

/* 초대형 워드마크 피날레 — 페이지의 마지막 시선이 브랜드로 끝난다 */
.site-footer__mark {
  margin-top: var(--space-16);
}

.site-footer__mark img {
  display: block;
  width: 100%;
  height: auto;
}

/* 개인정보 처리방침 링크 — 시행령 §31: 첫 화면(연결 화면)에 고유 명칭으로, 다른 고지사항과
   글자 굵기·색으로 구분해 게재한다. 푸터 메타 링크 중 이 항목만 본문색·굵게. */
.site-footer__meta a.site-footer__privacy {
  color: var(--color-text);
  font-weight: 700;
}

/* ---------- 그룹 브랜드 — 브랜드 열, 태그라인 아래 GROUP BRANDS 목록 ---------- */
/* 외부 브랜드 사이트 링크는 내부 내비와 다른 위계라 내비 3열이 아닌 브랜드 열에 둔다.
   제목은 내비 열과 같은 어휘(.site-footer__heading), 항목은 마크(원색) + 이름 + 도메인. 오픈 전 브랜드는 평문. */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__family-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  word-break: keep-all;
}

.site-footer__family-item img {
  flex: none;
  display: block;
}

.site-footer__family-domain {
  font-size: 0.8125rem;
  opacity: 0.75;
}

a.site-footer__family-item:hover,
a.site-footer__family-item:focus-visible {
  color: var(--color-primary);
}

a.site-footer__family-item:hover .site-footer__family-name,
a.site-footer__family-item:focus-visible .site-footer__family-name {
  text-decoration: underline;
}

/* 오픈 준비 중 브랜드 — 링크 아님, 평문 */
.site-footer__family-item.is-soon {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .site-footer__brand {
    gap: var(--space-6);
  }

  a.site-footer__family-item {
    padding-block: 8px;
    margin-block: -6px;
  }
}