/* ==========================================================================
 * base.css — 리셋 + 문서 기본 타이포 + 스크롤 엔진(Lenis) 필수 규칙
 * ==========================================================================
 * 컴포넌트 스타일은 여기 넣지 않는다. 그건 layout.css.
 * 값은 전부 tokens.css 참조. 하드코딩 금지.
 * ========================================================================== */

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

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

/* margin 은 전부 없애고 필요한 곳에서만 다시 준다 */
html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* 스크롤 위치 복원은 mod-shell.js 가 manual 로 관리한다.
   CSS 의 smooth 스크롤은 Lenis 와 싸우므로 켜지 않는다. */
html {
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  min-height: 100lvh;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-none);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;

  /* 푸터에 닿으면 mod-transition.js 가 body 에 is-footer-inview 를 붙이고
     색이 통째로 반전된다. 그 전환 시간은 여기서 정한다.
     (반전 규칙 자체는 motion.css) */
  transition: background-color var(--dur-medium), color var(--dur-medium);
}

/* 미디어 요소 기본값 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* 폼 요소는 폰트를 상속하지 않으므로 명시 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

/* 긴 단어가 레이아웃을 밀어내지 않게 */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 표는 이 킷에서 쓰지 않지만 들어와도 깨지지 않게 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --------------------------------------------------------------------- *
 * 2. 기본 타이포
 * --------------------------------------------------------------------- *
 * 문서 요소 자체에 최소한만 걸어 두고, 실제 크기는 layout.css 의
 * 의미 기반 클래스가 정한다. 여기 값은 "클래스를 안 붙였을 때의 안전망".
 */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 { font-size: var(--text-title); }
h2 { font-size: var(--text-display); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h4 { font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-body); }

p {
  text-wrap: pretty;
}

small {
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
}

blockquote {
  font-size: var(--text-quote);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-label);
}

figcaption {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  opacity: var(--opacity-quiet);
}

/* --------------------------------------------------------------------- *
 * 3. 링크
 * --------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-ui);
}

/* 포인터가 있는 기기에서만 호버 반응. 터치에서 '눌린 채 남는' 현상 방지 */
@media (hover: hover) {
  a:hover {
    opacity: var(--opacity-hover);
  }
}

/* 키보드 포커스는 절대 지우지 않는다 */
:focus-visible {
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* 텍스트 선택 색 */
::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------- *
 * 4. Lenis (부드러운 스크롤) 필수 규칙
 * --------------------------------------------------------------------- *
 * mod-shell.js 가 Lenis 인스턴스를 만들면 Lenis 가 <html> 에
 * lenis / lenis-smooth / lenis-stopped 클래스를 스스로 붙인다.
 * 아래 세 줄이 없으면 스크롤이 두 번 걸리거나 아예 멈춘다. 지우지 말 것.
 */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------- *
 * 5. 스크롤 잠금
 * --------------------------------------------------------------------- *
 * 모바일 메뉴가 열려 있는 동안 mod-shell.js 가 <html> 에 menu-open 을 붙인다.
 */

html.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------- *
 * 6. 접근성 유틸
 * --------------------------------------------------------------------- */

.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;
}

/* 포커스를 받으면 다시 보이는 "본문 바로가기" 링크용 */
.sr-only:focus-visible {
  position: fixed;
  top: var(--gutter);
  left: var(--gutter);
  z-index: var(--z-menu);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--color-ink);
  color: var(--color-bg);
}

[hidden] {
  display: none !important;
}

/* ── 브라우저의 '스크롤 앵커링' 끄기 ── (2026-08-30, 모바일 스크롤 튐 대응)
 * ⚠ 크롬/사파리는 **화면 위쪽 콘텐츠의 높이가 변하면 스크롤 위치를 몰래 보정한다**
 *   (overflow-anchor. 원래는 광고가 늦게 떠도 읽던 자리를 지켜 주는 기능이다).
 *   그런데 이 지면은 JS 가 매 프레임 인라인 높이를 쓴다 —
 *   무대 트랙 높이(stage.js) · 연표 진행선 높이(mod-timeline.js) · 사진 박스(hero.js).
 *   그때마다 브라우저가 스크롤을 제멋대로 당겨서, **위로 올릴 때 버벅이다가
 *   엉뚱한 구간으로 옮겨지는** 것처럼 보인다. 어느 쪽을 앵커로 잡느냐가
 *   스크롤 방향에 따라 달라서 **내릴 때보다 올릴 때 더 심하다.**
 * → 스크롤 위치는 이 사이트가 직접 관리하므로 브라우저 보정은 끈다.
 * ⚠ 되살리면 같은 증상이 돌아온다. */
html,
body {
  overflow-anchor: none;
}