/* ============================================
   땅끈 전역 스타일
   ============================================
   Tailwind CSS가 대부분의 스타일을 처리하지만,
   Tailwind로 하기 어려운 부분만 여기에 작성해요.
*/

/* 기본 리셋 - 모든 요소의 기본 스타일을 통일 */
* {
  margin: 0;      /* 바깥 여백 제거 */
  padding: 0;     /* 안쪽 여백 제거 */
  box-sizing: border-box;  /* 패딩과 보더를 크기에 포함 */
}

/* 부드러운 스크롤 - 페이지 이동 시 스르륵 움직이는 효과 */
html {
  scroll-behavior: smooth;
}

/* 기본 폰트 설정 - 한글이 잘 보이도록 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Noto Sans KR', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;  /* 글자가 부드럽게 보이도록 */
}

/* 링크 기본 스타일 제거 */
a {
  text-decoration: none;  /* 밑줄 제거 */
  color: inherit;         /* 부모의 글자색을 따름 */
}

/* 텍스트 줄 수 제한 (2줄까지만 표시하고 ... 처리) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 스크롤바 숨기기 (가로 스크롤 필터에서 사용) */
.overflow-x-auto::-webkit-scrollbar {
  display: none;           /* 크롬, 사파리에서 스크롤바 숨김 */
}
.overflow-x-auto {
  -ms-overflow-style: none;  /* IE, Edge에서 스크롤바 숨김 */
  scrollbar-width: none;     /* Firefox에서 스크롤바 숨김 */
}

/* no-underline 클래스 - 밑줄 없는 링크 */
.no-underline {
  text-decoration: none !important;
}

/* ============================================
   다크모드 전환 애니메이션
   ============================================ */
/* 다크모드 켜고 끌 때 색상이 부드럽게 변하는 효과 */
/* 갑자기 바뀌면 눈이 깜짝 놀라니까, 0.2초 동안 천천히 변해요 */
*,
*::before,
*::after {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ============================================
   모바일 메뉴 애니메이션
   ============================================ */
/* 모바일 메뉴가 열릴 때 위에서 아래로 슬라이드하며 나타나는 효과 */
@keyframes slideDown {
  from {
    opacity: 0;          /* 투명하게 시작 */
    transform: translateY(-10px);  /* 10px 위에서 시작 */
  }
  to {
    opacity: 1;          /* 완전히 보이게 */
    transform: translateY(0);     /* 원래 위치로 */
  }
}

.mobile-menu-enter {
  animation: slideDown 0.2s ease-out;
}

/* ============================================
   홈페이지 전용 애니메이션
   ============================================ */

/* 위로 살짝 올라오면서 나타나는 효과 (섹션 등장용) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* 부드럽게 나타나는 효과 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* 좌우로 살짝 흔들리는 효과 (검색 아이콘 등에 사용) */
@keyframes bounce-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.animate-bounce-x:hover {
  animation: bounce-x 0.4s ease-in-out;
}

/* 인기 검색어 태그 호버 시 살짝 커지는 효과 */
.tag-hover {
  transition: all 0.2s ease;
}
.tag-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}