/* ==========================================================================
   base.css — 리셋 · 문서 기본 · 본문 컨테이너 · 유틸리티 · 스티키 푸터
   --------------------------------------------------------------------------
   디자인 값은 --c4-* 토큰만 쓴다. 임의 색 · px 금지.
   화면별 스타일은 assets/css/sections/*.css 소관.

   ★ 본문 3열 그리드(242 / 720 / 242 + column-gap 40)는 여기에 없다.
     사이드 박스가 처음 등장하는 3단계에서 assets/css/base/layout.css 에 만든다.
     지금 넣으면 참조가 0인 규칙이 남는다.
   ========================================================================== */

/* ---------- 리셋 ---------- */

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

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

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

	/* 앵커 이동 시 sticky 헤더 아래로 가려지지 않게. 전환은 768 에서(토큰이 처리). */
	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-page-bg);   /* 따뜻한 아이보리(2026-10-14 사용자 지시 · 처음엔 흰색) */
	/* 가로로 눕힌 아이폰의 노치 · 둥근 모서리 쪽 — viewport-fit=cover(header.php · 2026-10-15) 전과 같게 내용을 안전 영역 안에 둔다(바탕색만 끝까지). 세로 화면 · PC 는 0 */
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	color: var(--c4-color-text);
	font-family: var(--c4-font-family);
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ★ 자간을 body 한 곳에만 걸면 안 된다.
   em 은 **선언한 요소의 font-size** 로 px 계산되고 그 px 가 자식에게 상속되므로,
   body 에만 걸면 페이지 제목처럼 큰 글자까지 본문 크기 기준의 자간을 쓴다.
   전역 선택자로 걸어 각 요소가 자기 크기로 다시 계산하게 한다.
   로고처럼 자간이 0 인 예외는 클래스 선택자로 덮는다.
   검증은 반드시 **페이지 제목(가장 큰 글자)의 computed letter-spacing** 으로 할 것 —
   이 버그는 CSS 에러가 안 나고 작은 글자에서는 티도 안 난다. */
*,
*::before,
*::after { letter-spacing: var(--c4-tracking); }

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

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

/* 미디어 — img 에만 걸고 iframe · video · embed 에는 걸지 않는다.
   그쪽은 종횡비를 속성이나 래퍼로 잡는 경우가 많아 height:auto 가 레이아웃을 깬다. */
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

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

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

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

button { cursor: pointer; }

hr {
	border: 0;
	border-top: var(--c4-border-w) solid var(--c4-color-border);
	margin: 0;
}

table { border-collapse: collapse; width: 100%; }

/* ---------- 포커스 ---------- */

/* :focus-visible 에만 링을 준다. 입력 필드는 각 섹션 CSS 에서 테두리 색으로 강조한다. */
:focus-visible {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

/* ---------- 본문 컨테이너 ---------- */

/* ★★ 본문 컬럼 폭의 **단일 출처**다.
   3단계에서 layout.css 에 3열 그리드를 만들 때 이 컨테이너를 **다시 만들지 말 것.**
   그리드는 이 컨테이너 위에 얹는 것이지 대체하는 게 아니다.
   720 과 24 가 두 파일에 각각 적히면 한쪽만 고쳐질 때 화면이 갈린다.

   max-width 에 좌우 여백을 더해 두어 한 규칙으로 두 뷰포트를 맞춘다:
     768 이상 → 768 - 24*2 = 콘텐츠 720
     375      → 375 - 24*2 = 콘텐츠 327 */
.c4-container {
	width: 100%;
	max-width: calc(var(--c4-content-w) + var(--c4-gutter-mobile) * 2);
	margin-inline: auto;
	padding-inline: var(--c4-gutter-mobile);
}

/* ---------- 유틸리티 ---------- */

/* 화면에서는 안 보이고 스크린리더에만 읽히는 표준 클래스.
   .c4- 접두어 규칙의 예외 — 널리 쓰이는 관용 이름이라 그대로 둔다.
   2단계 드로어 체크박스 · 3단계 페이지네이션 화살표 · 6단계 빈 제목 대체가 이 클래스를 쓴다. */
.sr-only {
	position: absolute !important;
	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: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--c4-skip-pad);
	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);
}

.c4-skip-link:focus {
	left: var(--c4-skip-offset);
	top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-skip-offset));
}

/* ---------- 스티키 푸터 (전 페이지 공통) ---------- */

/* 콘텐츠가 짧으면 푸터가 화면 하단에 붙고, 길면 콘텐츠를 따라 내려간다.
   화면별 분기를 만들지 말 것. position:fixed 금지.

   100vh 에서 관리자 바 높이를 빼지 않으면, 코어가 html 에 넣는 margin-top:32px 때문에
   내용이 없는 화면에서도 항상 스크롤바가 생긴다.
   dvh 는 모바일 주소창 때문에 스크롤 중 높이가 변해 레이아웃이 흔들리므로 svh 를 쓴다. */
.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-main {
	flex: 1;
	/* 스킵 링크로 이동했을 때 sticky 헤더에 가리지 않게 */
	scroll-margin-top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-anchor-extra));
}

.c4-main:focus { outline: none; }

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

/* ---------- 제목 명조 — 나눔명조(2026-10-14 사용자 지시 "모든 타이틀들, 헤더의 메뉴와 버튼들을 나눔명조로") ----------
   화면 · 구역 제목(<h1> · 구역 <h2> · 상자 제목) + 헤더 메뉴(PC · 모바일 드로어) + 헤더 · 드로어의 전화예약 버튼 글자. 본문 · 카드 제목 · 목록 글 제목 · 버튼 그 밖은 Pretendard 그대로.
   글꼴은 토큰 --c4-font-serif 한 곳(tokens.css) · 굵기는 각 자리의 굵기 그대로(제목 · 메뉴 · 버튼 모두 700). :where — 선택자 힘 0(각 화면 CSS 를 이기려 들지 않는다). */
:where(
	.c4-main-hero__title, .c4-main-treat__title, .c4-main-note__title, .c4-main-press__title, .c4-main-info__title,
	.c4-list__title, .c4-page__title, .c4-single__title, .c4-notice__title, .c4-notice-single__title, .c4-faq__title,
	.c4-location__title, .c4-gallery__title, .c4-no-results__title,
	.c4-about-hero__title, .c4-about-card__title, .c4-about-feature__title, .c4-about-history__title, .c4-about-timeline__title,
	.c4-about-process__title, .c4-about-process__name, .c4-about-process__item-name,
	.c4-main-banner__title,
	.c4-menu > li > a, .c4-header .c4-cta__text, .c4-drawer .c4-cta__text, .c4-main-info__cta .c4-cta__text, .c4-single__back .c4-cta__text, .c4-location-buttons__cta .c4-cta__text, .c4-fixed-cta .c4-cta__text
) {
	font-family: var(--c4-font-serif);
}

/* 명조 제목 자간 −6% 통일(2026-10-14 사용자 지시 '명조 타이틀들 전부 자간 -8%으로 통일' → 같은 날 '나눔명조들 전부 +2') — 제목 자신 **과 그 안의 모든 요소**에 건다.
   ★ 위 전역 규칙(* { letter-spacing: var(--c4-tracking) })이 제목 안 줄 나눔 span(.c4-split__line) · 링크에도 −4% 를 다시 걸어
     제목에만 주면 보이는 글자는 −4% 그대로였다(히어로 제목 −6% · −8% 가 화면에 안 먹던 원인). 메뉴 · 전화예약 버튼 글자는 제목이 아니라 아래 −2%. */
:where(
	.c4-main-hero__title, .c4-main-treat__title, .c4-main-note__title, .c4-main-press__title, .c4-main-info__title,
	.c4-list__title, .c4-page__title, .c4-single__title, .c4-notice__title, .c4-notice-single__title, .c4-faq__title,
	.c4-location__title, .c4-gallery__title, .c4-no-results__title,
	.c4-about-hero__title, .c4-about-card__title, .c4-about-feature__title, .c4-about-history__title, .c4-about-timeline__title,
	.c4-about-process__title, .c4-about-process__name, .c4-about-process__item-name,
	.c4-main-banner__title
),
:where(
	.c4-main-hero__title, .c4-main-treat__title, .c4-main-note__title, .c4-main-press__title, .c4-main-info__title,
	.c4-list__title, .c4-page__title, .c4-single__title, .c4-notice__title, .c4-notice-single__title, .c4-faq__title,
	.c4-location__title, .c4-gallery__title, .c4-no-results__title,
	.c4-about-hero__title, .c4-about-card__title, .c4-about-feature__title, .c4-about-history__title, .c4-about-timeline__title,
	.c4-about-process__title, .c4-about-process__name, .c4-about-process__item-name,
	.c4-main-banner__title
) * {
	letter-spacing: var(--c4-serif-title-ls);
}

/* 제목이 아닌 명조 자간 −2%(2026-10-14 사용자 지시 '나눔명조들 전부 자간 +2' — 그 전 전역 −4%) — 헤더 · 드로어 메뉴 · 전화예약 버튼 글자 · 히어로 숫자. 안쪽 요소까지(위와 같은 이유). */
:where(.c4-menu > li > a, .c4-header .c4-cta__text, .c4-drawer .c4-cta__text, .c4-main-info__cta .c4-cta__text, .c4-single__back .c4-cta__text, .c4-location-buttons__cta .c4-cta__text, .c4-fixed-cta .c4-cta__text, .c4-main-hero__stat-num),
:where(.c4-menu > li > a, .c4-header .c4-cta__text, .c4-drawer .c4-cta__text, .c4-main-info__cta .c4-cta__text, .c4-single__back .c4-cta__text, .c4-location-buttons__cta .c4-cta__text, .c4-fixed-cta .c4-cta__text, .c4-main-hero__stat-num) * {
	letter-spacing: var(--c4-serif-ls);
}

/* ---------- 모션 ---------- */

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