/* ===============================
   타이포그래피, 유틸리티 클래스, 키프레임 애니메이션
   =============================== */

/* 기본 박스 모델 & 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
html, body {
  overflow-x: hidden;
  font-family: var(--font-family-base);
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 반응형 폰트 크기 */
@media (min-width: 1024px) {
  body {
    font-size: 17px;
    line-height: 1.75;
  }
}

/* 문단 여백 */
p {
  margin: 0 0 1em;
}

/* ===============================
   🎞️ Keyframe Animations
   =============================== */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ===============================
   📺 Media Elements
   =============================== */
img, video {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-md);
}