@charset "utf-8";
/* base.css — reset · 레이아웃 유틸 · 타이포 · 애니메이션 (common.css에서 분할) */

/* --- CSS Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 유동 폰트: 1280px 이하 14px → 1440px≈16px → 1920px+ 18px (상한)
   rem 단위를 사용하는 모든 요소가 해상도에 비례하여 자동 조정됩니다. */
html { font-size: clamp(14px, 1.1vw, 18px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* --- Layout Utilities --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.section {
  padding: var(--space-24) 0;
}
.section-sm {
  padding: var(--space-16) 0;
}

/* --- Typography --- */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.text-primary  { color: var(--color-primary); }
.text-accent   { color: var(--color-accent); }
.text-muted    { color: var(--color-text-muted); }
.text-white    { color: var(--color-white); }
.text-center   { text-align: center; }
.text-left     { text-align: left; }

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.animate-fadeInUp    { animation: fadeInUp    0.6s ease both; }
.animate-fadeIn      { animation: fadeIn      0.6s ease both; }
.animate-slideInLeft { animation: slideInLeft 0.6s ease both; }
.anim-delay-1 { animation-delay: .1s; }
.anim-delay-2 { animation-delay: .2s; }
.anim-delay-3 { animation-delay: .3s; }
.anim-delay-4 { animation-delay: .4s; }

/* Intersection Observer driven */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }