/* ============================================================
   Landly base.css — 리셋 / 폰트 / 타이포 / 레이아웃 프리미티브 / 그레인
   ============================================================ */

/* ---- @font-face (자가호스팅) ---- */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* fontsource-variable Fraunces (opsz, wght 축 포함) */
  src: url('../fonts/Fraunces.woff2') format('woff2-variations');
}

/* ---- 리셋 ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  /* 미세한 종이 그레인 — SVG feTurbulence를 data URI 배경으로 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01';
  /* 한국어 조판: 어절(단어) 단위로만 줄바꿈, 넘칠 때만 강제 분리 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목은 줄 길이 균형, 본문은 외톨이 단어 방지 (지원 브라우저만 적용) */
h1, h2, h3, .display-1, .display-2, .h3, .scene-lead { text-wrap: balance; }
p, .lead { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---- 타이포 ---- */
.font-display {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-2);
}
.display-1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 620;
  color: var(--ink);
}
.display-2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
.h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  color: var(--ink-2);
}
.metric-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  font-weight: 580;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.muted { color: var(--ink-2); }
.brass { color: var(--brass-2); }

/* 브래스 밑줄 악센트 (헤드라인 강조 구절) */
.ul-brass {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.12em;
  padding-bottom: 0.04em;
}

/* ---- 레이아웃 프리미티브 ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-hairline { border-top: 1px solid var(--line); }

/* 다크(에버그린) 섹션 */
.section-pine {
  background-color: var(--pine);
  color: var(--on-pine);
}
.section-pine .eyebrow { color: var(--brass); }

.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 60ch; }
.measure-tight { max-width: 46ch; }

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

/* ---- 스크롤 리빌 ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 기기의 "모션 줄이기" 설정과 무관하게 항상 애니메이션 동작 (사이트 방침) */