/* =========================================
   Global Typography — SLIM TEMPLATE
   - 텍스트만 담당(레이아웃/배경/보더/애니메이션 없음)
   - 페이지 수가 늘어나도 길어지지 않도록 제네릭 셀렉터만 사용
   ========================================= */

/* 1) 토큰(변수) — 숫자만 바꾸면 전역 즉시 반영 */
:root{
  /* 반응형 타입 스케일 */
  --fs-base:      clamp(14px, 1.2vw, 16px);
  --fs-h1:        clamp(28px, 4.2vw, 44px);
  --fs-h2:        clamp(22px, 3.0vw, 32px);
  --fs-h3:        clamp(18px, 2.2vw, 22px);
  --fs-subtitle:  clamp(16px, 1.8vw, 18px); /* 히어로/인트로 부제 */
  --fs-lead:      clamp(17px, 2.0vw, 20px);

  /* 폰트 패밀리 / 웨이트 */
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* 색상 토큰(라이트 기본) */
  --color-text: #111;
  --color-text-muted: #666;
  --color-link: #0b7cc6;
  --color-link-hover: #095f99;
  --text-on-image: #fff;

  /* 가독성용 텍스트 그림자 */
  --shadow-text-soft: 0 2px 6px rgba(0,0,0,.35);
}

/* === Global base typography === */
html { font-size: 16px; }

html, body {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular, 400);
  line-height: 1.5; /* reset.css에서 이동 */
  color: var(--color-text);
}

body {
  letter-spacing: -0.01em; /* 추가 보강: 본문 자간 */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold, 700);
  line-height: 1.2;          /* 충돌 정리: 1.2만 유지 */
  margin: 0 0 .75rem;        /* 제목 공통 여백 */
}

/* 제목 크기(추가 스케일) */
h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem); }
h2 { font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem); }
h3 { font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem); }

/* 본문/보조 텍스트 */
p { font-size: var(--fs-base); }
.lead { font-size: var(--fs-lead); color: var(--color-text); }
.subtitle { font-size: var(--fs-subtitle); color: var(--color-text-muted); }

/* 링크 */
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
/* 키보드 포커스 가시화(타이포 기준선 유지) */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 캡션/부가 텍스트 */
small, .caption, figcaption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* 타자 텍스트(가로쓰기 기본) */
.typewriter {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal; /* 기본은 일반 줄바꿈 */
}
/* 애니 쓸 때 줄바꿈 방지용 선택 클래스 */
.typewriter--nowrap {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

/* 선택) 다크 모드 — 토큰만 바꿔 끼우는 방식 */
@media (prefers-color-scheme: dark) {
  body { color: var(--color-text-dark); }
  small, .caption, figcaption { color: var(--color-text-muted-dark); }
}