/* ============================================================
   base.css — tokens.css 다음에 불러온다.
   여기 담긴 것들이 "한글 사이트가 싸구려로 보이는 이유" 대부분을 없앤다.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 앵커로 이동할 때 고정 헤더에 글자가 가려지는 것을 막는다 */
  scroll-padding-top: calc(var(--header-h, 64px) + var(--sp-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text);
  background: var(--bg);
  /* 한글 렌더링 품질 — 없으면 글자가 뭉개져 보인다 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1;  /* Pretendard 대체 글리프(더 또렷한 숫자·기호) */
}

/* ── 한글 줄바꿈 ─────────────────────────────────────────────
   ★한글 사이트에서 가장 티 나는 실수: 단어 중간에서 줄이 바뀌는 것.
   keep-all이면 어절 단위로 끊어져 훨씬 읽기 좋다.
   단 긴 URL이 컨테이너를 뚫는 것은 anywhere로 막는다(둘을 같이 써야 안전). */
body, p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, th, td, label, button, a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 제목 ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  /* 제목 줄 길이를 고르게 나눠 '한 글자만 다음 줄' 같은 꼴을 막는다 */
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* 문단은 마지막 줄에 한 단어만 남는 것을 막는다 */
p { text-wrap: pretty; }

/* 글 읽는 단은 폭을 제한한다. 한 줄이 길면 다음 줄을 못 찾는다 */
.prose { max-width: var(--w-prose); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 2em; }

/* 리드 문단 — 히어로 아래 한 문단만 크게 */
.lead { font-size: var(--fs-lead); color: var(--text-2); line-height: var(--lh-body); }

/* ── 숫자 ────────────────────────────────────────────────────
   표·가격·통계에서 숫자 폭이 들쭉날쭉하면 아마추어처럼 보인다 */
table, .tabular, time, .num { font-variant-numeric: tabular-nums; }

/* ── 링크 ────────────────────────────────────────────────────
   밑줄을 지우지 말고 '다듬는다'. 글자 아래 획을 피해 그린다 */
a { color: var(--link); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* ── 포커스 ──────────────────────────────────────────────────
   키보드 사용자에게만 보이는 링. outline을 지우기만 하면 접근성 위반이다 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── 미디어 ──────────────────────────────────────────────────
   width/height 또는 aspect-ratio가 없으면 이미지가 늦게 뜨며 화면이 튄다(CLS) */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--bg-subtle); }  /* 로드 전 빈 칸이 튀지 않게 */

/* ── 폼 ──────────────────────────────────────────────────── */
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
::selection { background: var(--accent); color: #fff; }

/* ── 넓은 콘텐츠 ─────────────────────────────────────────────
   표나 코드가 페이지 전체를 가로로 밀어버리는 것을 막는다 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 레이아웃 유틸 ───────────────────────────────────────── */
.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--sp-4); }

/* ── 버튼 ────────────────────────────────────────────────────
   한 화면의 주 버튼(채운 것)은 하나만. 나머지는 외곽선/글자 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;              /* 손가락으로 누를 수 있는 최소 크기 */
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
.btn:active { transform: translateY(1px); }   /* 눌리는 느낌 — 없으면 죽은 버튼 같다 */
/* ★골드 배경에 흰 글씨는 대비 2.25:1로 접근성 기준(4.5:1) 위반이다.
   같은 골드에 남색 글씨를 얹으면 7.9:1로 통과하고, 오히려 더 단정해 보인다.
   흰 글씨를 꼭 써야 하면 배경을 var(--accent-ink)(4.8:1)로 어둡게 한다. */
.btn-primary { background: var(--accent); color: var(--n-900); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-3); background: var(--bg-subtle); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── 카드 ──────────────────────────────────────────────────
   구조는 '선'으로 나눈다. 그림자는 떠 있는 것에만 쓴다 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }

/* ── 헤더 ──────────────────────────────────────────────────
   스크롤 전에는 투명, 내려가면 배경이 생기는 방식이 가장 깔끔하다 */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h, 64px);
  display: flex; align-items: center;
  transition: background var(--t-slow) var(--e-out), border-color var(--t-slow) var(--e-out);
  border-bottom: 1px solid transparent;
}
.header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
}

/* ── 스크롤 등장 ─────────────────────────────────────────────
   .reveal 을 붙이면 뷰포트에 들어올 때 부드럽게 올라온다.
   IntersectionObserver로 data-in="true"를 달아 주면 된다 */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-enter) var(--e-out), transform var(--t-enter) var(--e-out);
}
.reveal[data-in="true"] { opacity: 1; transform: none; }

/* ── 움직임 최소화 요청 존중 ────────────────────────────────
   어지럼증·전정기관 질환이 있는 사용자를 위한 것. 선택이 아니라 의무 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}