/*
 * base.css — 리셋 · 문서 골격 · 공용 유틸리티
 *
 * 디자인 값은 tokens.css 의 --c4-* 만 쓴다. 임의 색·px 금지.
 *
 * ★ 다음은 리터럴 px 가 남는 것이 정상이며 "하드코딩 px 0건" 검증(8단계)의 예외다.
 *   · 미디어 쿼리 조건부의 기준선 — 조건부에는 var() 를 쓸 수 없다
 *   · .sr-only 의 clip / width / height / margin 에 쓰는 1px · -1px — 값이 아니라 표준 기법 상수다
 *   · var(--c4-admin-bar-h, 0px) 처럼 var() 의 폴백으로 쓰는 0px — 토큰이 없을 때의 방어값
 */

/* ─────────────────────────────────────────────────────────
   리셋
   ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	/* 자간은 전역 선택자로 건다. body 한 곳에만 걸면 em 이 본문 크기로 한 번만 계산돼
	   페이지 제목 같은 큰 글자까지 본문 기준 자간을 쓰게 된다(CSS 에러는 안 난다).
	   확인은 반드시 가장 큰 글자의 computed 값으로 할 것. */
	letter-spacing: var(--c4-ls);
}

html {
	/* 스크롤바 없는 화면(빈 상태·404)에서 가운데 정렬 콘텐츠가 밀리지 않게 거터를 고정한다.
	   overflow-y 는 html 에만 — body 에 걸면 sticky 가 죽는다. */
	scrollbar-gutter: stable;
	scroll-padding-top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h));
	-webkit-text-size-adjust: 100%;
}

@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-sans);
	font-size: var(--c4-fz-body1);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	-webkit-font-smoothing: antialiased;
}

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

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

/* height:auto 를 iframe·video·embed 에 걸지 않는다 — 그쪽은 비율 래퍼가 높이를 잡는다. */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

svg:not([fill]) {
	fill: currentColor;
}

a {
	color: inherit;
}

/* letter-spacing 은 여기서 건드리지 않는다.
   inherit 로 덮으면 부모가 계산해 둔 px 를 그대로 받아서, 폼 컨트롤이 자기 font-size 로
   em 을 다시 계산하지 못한다(위 * 규칙의 취지가 무너진다). * 규칙이 그대로 적용되게 둘 것. */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ─────────────────────────────────────────────────────────
   포커스
   ───────────────────────────────────────────────────────── */

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

/* 입력 필드는 외곽 링 대신 테두리 색을 강조한다. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--c4-color-focus);
}

/* ─────────────────────────────────────────────────────────
   문서 골격 · 스티키 푸터
   ───────────────────────────────────────────────────────── */

/* 전 페이지 공통이다 — 화면별 분기를 만들지 말 것.
   100vh 에서 관리자 바 높이를 빼지 않으면, 코어가 html 에 넣는 margin-top:32px 때문에
   내용이 없는 화면에서도 항상 스크롤바가 생긴다.
   100dvh 는 모바일 주소창 때문에 스크롤 중 높이가 변해 레이아웃이 흔들리므로 쓰지 않는다. */
.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;
	/* 앵커로 이동했을 때 sticky 헤더 아래에서 멈추게 한다. */
	scroll-margin-top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-anchor-gap));
}

.c4-site__footer {
	flex-shrink: 0;
}

/* 본문 컬럼 컨테이너 — 이 정의가 단일 출처다.
   ★ 3단계에서 3열 그리드를 만들 때 이 컨테이너를 다시 만들지 말 것.
     그리드는 이 위에 얹는 것이지 대체하는 게 아니다.
     720 과 24 가 두 파일에 각각 적히면 한쪽만 고쳐질 때 화면이 갈린다.
   데스크톱 720 / 375 뷰포트에서 327. */
.c4-container {
	width: 100%;
	max-width: calc(var(--c4-container-content) + var(--c4-gutter-mobile) * 2);
	margin-inline: auto;
	padding-inline: var(--c4-gutter-mobile);
}

/* ─────────────────────────────────────────────────────────
   유틸리티
   ───────────────────────────────────────────────────────── */

/* 화면에서 안 보이고 스크린리더에만 읽히는 표준 클래스.
   이름은 .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;
}

.c4-skip-link {
	position: absolute;
	left: var(--c4-skip-link-off);
	top: var(--c4-skip-link-inset);
	z-index: 100;
	padding: var(--c4-skip-link-inset) var(--c4-gutter-mobile);
	background: var(--c4-color-white);
	color: var(--c4-color-text);
	border: var(--c4-border-w) solid var(--c4-color-border);
	border-radius: var(--c4-radius-box);
	text-decoration: none;
}

.c4-skip-link:focus-visible {
	left: var(--c4-skip-link-inset);
}

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