/* ─────────────────────────────────────────────────────────────
   site-chrome.css — 사이트 머리(.site-head)·바닥(.site-foot) 한 벌.

   랜딩(v2/index.php)과 CSS 빌더(v2/css-builder/a·b)가 이 한 벌을 같이 읽는다.
   전에는 랜딩 <style> 안에 통째로 박혀 있었다. 그때 빌더가 그것을 베끼자
   같은 것이 두 벌이 되어 한쪽만 고쳐 놓고 고쳤다고 하는 자리가 생겼다.
   그래서 여기 한 곳으로 모았다. 여기 값을 고치면 두 화면이 같이 바뀐다.

   ※ 데모 러너·가이드가 쓰는 머리는 이것이 아니다(shared/header.php 의 .og-nav).
     그 둘은 서로 다른 화면이고, 여기서 건드리지 않는다.

   ── 두 가지 못박기 ──
   ① 토큰을 :root 가 아니라 크롬 자신에게 건다.
      :root 에 걸면 이 시트를 읽는 페이지(빌더)가 이미 쓰는 같은 이름 토큰과 부딪힌다.
      값은 랜딩의 foxnail 토큰(한낮 light + Sharp)에서 그대로 옮겼다.
   ② 글자 크기를 rem 이 아니라 px 로 적는다.
      랜딩은 html 이 16px 이고 빌더는 그렇지 않을 수 있다. rem 으로 적으면
      같은 시트를 읽고도 두 화면의 머리 글자가 서로 다른 크기로 뜬다.
      옮기기 전 랜딩 값(.78rem=12.48px · .875rem=14px · 1.125rem=18px · .8rem=12.8px)을 그대로 쓴다.
   ───────────────────────────────────────────────────────────── */

.skip-link, .site-head, .site-foot {
  --sc-surface:      #ffffff;
  --sc-text:         #111520;
  --sc-muted:        #59616f;
  --sc-brand:        #2f6bff;
  --sc-brand-strong: #1f4fd6;
  --sc-on-brand:     #ffffff;
  --sc-link:         #1f4fd6;
  --sc-border:       #dae0e9;
  --sc-focus:        #2f6bff;

  --sc-radius-xs:    2px;
  --sc-radius-md:    3px;
  --sc-radius-pill:  4px;
  --sc-bw:           1px;
  --sc-bw-emph:      2px;

  --sc-space-1: 4px;  --sc-space-2: 8px;  --sc-space-3: 12px;
  --sc-space-4: 16px; --sc-space-5: 24px; --sc-space-6: 32px;
  --sc-container: 1080px;

  --sc-font-sans: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --sc-fs-xs: 12.48px;  --sc-fs-sm: 14px;  --sc-fs-md: 16px;  --sc-fs-lg: 18px;
  --sc-fw-semibold: 600; --sc-fw-bold: 700;
  --sc-lh-base: 1.7;

  --sc-motion-fast: 120ms;
  --sc-ease: cubic-bezier(.2, 0, 0, 1);
}

/* 바깥 CSS 가 크롬 안으로 새지 않게 막는다. :where() 라 무게가 0 이므로
   아래의 제 규칙들이 언제나 이긴다. */
:where(.skip-link, .site-head, .site-foot),
:where(.skip-link, .site-head, .site-foot) * {
  box-sizing: border-box; margin: 0; padding: 0;
}

.site-head, .site-foot {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-md);
  line-height: var(--sc-lh-base);
  letter-spacing: normal;
  color: var(--sc-text);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* 무게를 클래스 둘로 잡는다. 빌더 a.css 의 `body :focus-visible`(무게 0,1,1)보다
   커야 크롬 안 초점 테두리가 빌더 색으로 물들지 않는다. */
.site-head :focus-visible,
.site-foot :focus-visible,
.skip-link:focus-visible,
.skip-link:focus-visible:focus {
  outline: var(--sc-bw-emph) solid var(--sc-focus);
  outline-offset: 2px;
  border-radius: var(--sc-radius-xs);
}

/* ── 스킵 링크 ── */
.skip-link {
  position: absolute; left: -999px; top: var(--sc-space-2);
  background: var(--sc-brand); color: var(--sc-on-brand);
  padding: var(--sc-space-2) var(--sc-space-4); border-radius: var(--sc-radius-md);
  z-index: 200; font-weight: var(--sc-fw-semibold);
  font-family: var(--sc-font-sans); font-size: var(--sc-fs-md); line-height: var(--sc-lh-base); letter-spacing: normal;
}
.skip-link:focus { left: var(--sc-space-4); }

/* ── 머리 ── */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--sc-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: var(--sc-bw) solid var(--sc-border);
}
.site-head__inner {
  max-width: var(--sc-container); margin: 0 auto;
  padding: var(--sc-space-4) var(--sc-space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-4);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sc-space-3);
  text-decoration: none; color: var(--sc-text);
  font-size: var(--sc-fs-lg); font-weight: var(--sc-fw-bold); letter-spacing: -.01em;
}
.brand__mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--sc-brand); color: var(--sc-on-brand);
  border-radius: var(--sc-radius-md);
  font-size: 12.8px; font-weight: var(--sc-fw-bold); letter-spacing: -.5px;
}
/* 랜딩에서 이 딱지는 .tag .tag-brand .brand__tag 세 벌을 겹쳐 쓰고 있었다.
   .tag 는 랜딩 본문(STABLE 딱지)도 쓰는 것이라 크롬이 가져올 수 없다.
   그래서 크롬 몫만 제 이름으로 떼어 왔다 — 나오는 값은 옛 세 벌과 같다. */
.site-head__tag {
  display: inline-block;
  margin-left: var(--sc-space-1);
  font-size: var(--sc-fs-xs);
  font-weight: var(--sc-fw-semibold);
  padding: var(--sc-space-1) var(--sc-space-3);
  border-radius: var(--sc-radius-pill);
  background: color-mix(in srgb, var(--sc-brand) 16%, transparent);
  color: var(--sc-brand-strong);
  letter-spacing: .01em;
}
.gnb { display: flex; align-items: center; gap: var(--sc-space-5); }
.gnb a {
  color: var(--sc-muted); text-decoration: none;
  font-size: var(--sc-fs-sm); font-weight: var(--sc-fw-semibold);
  transition: color var(--sc-motion-fast) var(--sc-ease);
}
.gnb a:hover { color: var(--sc-brand-strong); }
/* 지금 보고 있는 자리 표시. 랜딩·빌더 둘 다 쓰지 않는다(둘 다 gnb 밖의 화면이다).
   쓰는 페이지가 생기면 sc_head('guide') 처럼 넘기면 된다. */
.gnb a[aria-current="page"] { color: var(--sc-brand-strong); }

/* ── 바닥 (하단 고정 한 줄) ── */
.site-foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--sc-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: var(--sc-bw) solid var(--sc-border);
}
.site-foot__inner {
  max-width: var(--sc-container); margin: 0 auto;
  padding: var(--sc-space-3) var(--sc-space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-3);
  flex-wrap: wrap; font-size: var(--sc-fs-xs); color: var(--sc-muted);
}
.site-foot__inner strong { color: var(--sc-text); font-weight: var(--sc-fw-semibold); }
.site-foot a { color: var(--sc-link); }
.site-foot__links { display: flex; gap: var(--sc-space-4); }
.site-foot__links a { color: var(--sc-link); text-decoration: none; }
.site-foot__links a:hover { text-decoration: underline; }

/* 바닥이 붙박이라 자리를 안 차지한다. 본문이 그 밑으로 들어가지 않게 비워 둔다. */
body { padding-bottom: 60px; }

@media (prefers-reduced-motion: reduce) {
  .site-head *, .site-foot * { transition: none !important; animation: none !important; }
}

/* ── 좁은 폭 (분기점 768px · 480px) ── */
@media (max-width: 768px) {
  .site-head__inner { padding: var(--sc-space-3) var(--sc-space-4); }
  .gnb { gap: var(--sc-space-4); }
  .site-foot__inner { padding: var(--sc-space-3) var(--sc-space-4); }
}
@media (max-width: 480px) {
  .gnb { display: none; } /* 모바일: 내비 숨김 — 본문 안의 이동 단추가 대신한다 */
}