/* ============================================
   358 선교문화센터 (mission358.org) - 모던 보강 v2
   사이트 원본 teal/blue 톤 존중 + 부드러운 인터랙션만 추가
   ============================================ */

:root {
  --m358-tx:        all .35s cubic-bezier(.4,0,.2,1);
  --m358-shadow-sm: 0 2px 12px rgba(0,0,0,.06);
  --m358-shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --m358-radius:    12px;
}

/* 글로벌 부드러움만 */
html { scroll-behavior: smooth; }
:focus-visible { outline-offset: 3px; border-radius: 4px; }

/* ============================================
   카드 / 박스 호버 효과 - 색상 변경 없이 인터랙션만
   ============================================ */
.card,
.box,
.item,
.article,
[class*="card"]:not(nav):not([class*="link"]),
[class*="-box"]:not([class*="search"]),
.news-item,
.notice-item,
.list-item {
  transition: var(--m358-tx);
}

.card:hover,
.box:hover,
[class*="card"]:not(nav):not([class*="link"]):hover,
[class*="-box"]:not([class*="search"]):hover,
.news-item:hover,
.notice-item:hover,
.list-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--m358-shadow-md) !important;
}

/* 카드 안 이미지 호버 줌 */
.card img,
[class*="card"] img,
.thumb img,
.news-item img {
  transition: var(--m358-tx);
}
.card:hover img,
[class*="card"]:hover img,
.news-item:hover img {
  transform: scale(1.03);
}

/* ============================================
   히어로 영역 - 텍스트 그림자만 살짝
   ============================================ */
.hero h1, .hero h2, .hero p {
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ============================================
   부드러운 링크 transitions
   ============================================ */
a:not(.btn):not(.button):not([class*="banner"]) {
  transition: var(--m358-tx);
}

/* ============================================
   페이지네이션 부드럽게
   ============================================ */
.pagination a,
.paging a {
  transition: var(--m358-tx) !important;
}
.pagination a:hover,
.paging a:hover {
  transform: translateY(-1px);
}

/* ============================================
   테이블 호버 효과만 (색상은 원본 유지)
   ============================================ */
table tbody tr {
  transition: var(--m358-tx);
}

/* ============================================
   부드러운 fade-in 애니메이션
   ============================================ */
@keyframes m358FadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > section,
main > article {
  animation: m358FadeIn .6s ease-out;
}

img { max-width: 100%; height: auto; }