/* ─────────────────────────────────────────────
   tokens.css — 색 · 글꼴 · 간격 · 기본 타이포 (화이트 톤)
   색을 바꾸려면 여기 :root 만 고치면 된다.
   ───────────────────────────────────────────── */
:root {
  --bg: #F7F6F2;          /* 종이 */
  --bg-2: #EFECE6;        /* 돌 — 교육 섹션 */
  --card: #FFFFFF;
  --text: #141412;
  --text-2: #55524B;
  --text-3: #6E6B63;   /* 흰 바탕에서 작은 글자도 읽히도록(대비 5:1) */
  --line: rgba(20, 20, 18, .10);
  --line-2: rgba(20, 20, 18, .20);
  --gold: #A07D43;        /* 큰 글자·장식용 */
  --gold-ink: #86672F;    /* 작은 글자용(흰 바탕 대비 확보) */
  --gold-deco: #C8A465;   /* 선·점 */
  --gold-soft: #F1E9DA;
  --gold-grad: linear-gradient(100deg, #86672F 0%, #B8914F 30%, #D8BB7F 50%, #B8914F 70%, #86672F 100%);
  --ink: #141412;
  --warn: #B85C45;
  --ok: #3E6B53;          /* 내려간 가격 등 좋은 변화 */
  --shadow: 0 1px 2px rgba(20, 20, 18, .04), 0 24px 48px -28px rgba(20, 20, 18, .18);

  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-en: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --f-kr: "Noto Serif KR", "Cormorant Garamond", "Apple SD Gothic Neo", serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --pad-x: clamp(20px, 4.4vw, 76px);
  --sec-y: clamp(72px, 8vw, 128px);
  --maxw: 1480px;
  --radius: 22px;
  --nav-h: 84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--gold-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
em { font-style: normal; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: #fff; font-weight: 600;
  transition: top .3s var(--ease);
}
.skip:focus { top: 16px; }

/* ── 타이포 ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold-deco); }

.h2 {
  font-family: var(--f-kr);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.24;
  letter-spacing: -.05em;
  text-wrap: balance;
}

/* 단어 쪼개기(JS) — 가림막 안에서 올라온다 */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; will-change: transform; }

@media (max-width: 767px) {
  .br-d { display: none; }
}