/* ==========================================================================
   base.css — 리셋 · 문서 골격 · 공용 유틸리티
   디자인 값은 전부 tokens.css 의 --c4-* 를 참조합니다. 임의 색·px 금지.

   이 파일에 리터럴 px 가 남는 자리는 셋뿐이며 전부 정상입니다
   (8단계 "하드코딩 px 0건" 검증의 예외):
     · 미디어 쿼리 조건부의 기준선 — 조건부에는 var() 를 쓸 수 없습니다.
     · .sr-only 의 1px / -1px — 값이 아니라 표준 기법 상수입니다.
     · @font-face 의 unicode-range — fonts.css 소관이며 토큰화 대상이 아닙니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 리셋
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;

  /* 스크롤바 거터 고정.
     안 하면 스크롤바가 없는 화면(빈 상태·404)에서 가운데 정렬 콘텐츠가 7~8px 밀려
     페이지를 오갈 때 흔들려 보입니다.
     ★ overflow-y 는 html 에만 겁니다 — body 에 걸면 sticky 가 죽습니다. */
  scrollbar-gutter: stable;

  /* 앵커 이동 시 고정 헤더(와 관리자 바)에 글자가 가리지 않게 합니다. */
  scroll-padding-top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h));
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

body {
  margin: 0;
  background: var(--c4-color-white);
  color: var(--c4-color-text);
  font-family: var(--c4-font-family);
  font-size: var(--c4-type-body1-size);
  font-weight: var(--c4-type-weight-regular);
  line-height: var(--c4-type-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 시안 자간은 % 기준이라 CSS 로는 em 을 씁니다.
   ★ em 은 선언한 요소의 font-size 에서 px 로 계산되고 그 px 가 자식에게 상속됩니다.
     body 한 곳에만 걸면 페이지 제목(44px)까지 본문(17px) 기준 자간을 쓰게 됩니다.
     그래서 전역 선택자로 걸어 각 요소가 자기 크기로 다시 계산하게 합니다.
   ★ 자간이 0 인 예외(로고)는 클래스 선택자로 덮습니다.
   ★ 이 버그는 CSS 에러가 안 나고 작은 글자에서는 티도 안 납니다 —
     확인은 반드시 페이지 제목(가장 큰 글자)의 computed 값으로 하세요. */
*,
*::before,
*::after {
  letter-spacing: var(--c4-ls);
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ★★ 코드류도 본문 글꼴을 따라갑니다(사용자 요청, 8단계 이후).
     브라우저 기본값이 `font-family: monospace`라 그대로 두면 **한글이 고정폭 글꼴을
     못 찾아 시스템 명조로 떨어집니다.** 본문과 전혀 다른 글자로 보이는데, 값이
     테마 어디에도 없어서(브라우저 기본값이라) 원인을 찾기 어렵습니다.
   ★ `font-size: inherit` 도 함께 걸어야 합니다. 브라우저는 monospace 계열에
     기본 크기를 따로 적용해 글자만 작아집니다(font-family 만 고쳐도 남습니다). */
code,
kbd,
samp,
pre {
  font-family: inherit;
  font-size: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* ★ height:auto 는 img 에만 겁니다.
     iframe·video·embed 에 걸면 지정된 높이가 무너져 재생기가 납작해집니다. */
img {
  max-width: 100%;
  height: auto;
}

video,
iframe,
embed,
object {
  max-width: 100%;
}

img,
svg,
video,
iframe,
embed,
object {
  display: block;
}

/* ★ fill 이 명시된 SVG(브랜드 로고·다색 아이콘)를 덮지 않도록 한정합니다. */
svg:not([fill]) {
  fill: currentColor;
}

table {
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   2. 포커스
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--c4-focus-w) solid var(--c4-color-focus);
  outline-offset: var(--c4-focus-offset);
}

/* --------------------------------------------------------------------------
   3. 문서 골격 · 스티키 푸터

   전 페이지 공통입니다. 콘텐츠가 짧으면 푸터가 화면 하단에 붙고,
   길면 콘텐츠를 따라 내려갑니다. 화면별 분기를 만들지 마세요.

   · position: fixed 금지.
   · 100vh 에서 관리자 바 높이를 빼지 않으면, 코어가 html 에 넣는 margin-top:32px
     때문에 내용이 없는 화면에서도 항상 스크롤바가 생깁니다.
   · 100dvh 보다 100svh 가 안전합니다 — dvh 는 모바일 주소창 때문에 스크롤 중
     높이가 변해 레이아웃이 흔들립니다.
   -------------------------------------------------------------------------- */

.c4-site {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--c4-admin-bar-h, 0px));
}

@supports (min-height: 100svh) {
  .c4-site {
    min-height: calc(100svh - var(--c4-admin-bar-h, 0px));
  }
}

.c4-site-main {
  flex: 1;
}

.c4-site-header,
.c4-site-footer {
  flex-shrink: 0;
}

/* 스킵 링크의 대상. tabindex="-1" 이 붙어 있어 포커스를 받습니다. */
.c4-site-main:focus {
  outline: none;
}

.c4-site-main {
  scroll-margin-top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-anchor-gap));
}

/* --------------------------------------------------------------------------
   4. 본문 컬럼 컨테이너

   ★★ 이 정의가 본문 폭의 단일 출처입니다.
      3단계에서 3열 그리드를 만들 때 이 컨테이너를 다시 만들지 마세요.
      그리드는 이 컨테이너 위에 얹는 것이지 대체하는 게 아닙니다 —
      720 과 24 가 두 파일에 각각 적히면 한쪽만 고쳐질 때 화면이 갈립니다.

   데스크톱: max-width 768 - 좌우 패딩 24 = 본문 720
   375 뷰포트: 375 - 48 = 327 (모바일 좌우 여백 24)
   -------------------------------------------------------------------------- */

.c4-container {
  width: 100%;
  max-width: calc(var(--c4-container-body) + var(--c4-gutter-mobile) * 2);
  margin-inline: auto;
  padding-inline: var(--c4-gutter-mobile);
}

/* --------------------------------------------------------------------------
   5. sr-only — 화면에서 안 보이고 스크린리더에만 읽히는 표준 클래스

   ★ 클래스 이름은 .sr-only 그대로 씁니다 (.c4- 접두어 규칙의 예외 —
     널리 쓰이는 관용 이름이라 다른 이름으로 지으면 서로 못 알아봅니다).
   2·3·6단계가 드로어 체크박스 · 페이지네이션 화살표 · 빈 제목 대체에서 씁니다.

   ★ margin: -1px 을 빼지 마세요 — 일부 브라우저에서 1px 짜리 잔상이 남습니다.
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. 스킵 링크 — 평소엔 sr-only, 포커스되면 화면에 나타납니다.
   -------------------------------------------------------------------------- */

/* 평소 상태는 .sr-only 와 같은 표준 기법입니다(1px / -1px 는 값이 아니라 기법 상수). */
.c4-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.c4-skip-link:focus-visible,
.c4-skip-link:focus {
  position: fixed;
  top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-skip-inset));
  left: var(--c4-skip-inset);
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  padding: var(--c4-skip-inset) calc(var(--c4-skip-inset) * 2);
  background: var(--c4-color-white);
  color: var(--c4-color-text);
  border-radius: var(--c4-radius-box);
  box-shadow: 0 0 0 var(--c4-focus-w) var(--c4-color-focus);
  font-size: var(--c4-type-body3-size);
  font-weight: var(--c4-type-weight-bold);
  line-height: var(--c4-type-body-lh);
}

/* --------------------------------------------------------------------------
   7. 접근성 — 움직임 최소화 설정
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}