*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --walnut:  #2E1A0E;
  --amber:   #C17F3B;
  --honey:   #E8A84C;
  --gold:    #D4A853;
  --cream:   #F5EFE4;
  --linen:   #EDE4D3;
  --bark:    #7A5230;
  --charcoal:#2C2420;
  --mist:    #F9F5EE;
  --mid:     #6B5040;
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--mist);
  color: var(--charcoal);
  overflow-x: clip; /* hidden ¡æ clip À¸·Î º¯°æ */
}

/* grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: .5;
}

/* common section */
section { padding: 30px 0vw; }

.section-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.section-tag-line { width: 28px; height: 1px; background: var(--amber); }
.section-tag-text {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: .78rem; color: var(--amber); letter-spacing: .2em;
}
.section-title {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(1.7rem,2.8vw,2.6rem);
  font-weight: 700; color: var(--walnut); line-height: 1.3; margin-bottom: 14px;
}
.section-desc {
  font-size: .95rem; line-height: 1.9; color: var(--mid);
  font-weight: 300; max-width: 480px;
}

/* fade-up */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }