html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  /* 한글이 음절 단위로 끊어지지 않게 — 띄어쓰기 단위로 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 히어로 애니메이션 그라디언트 배경 */
.hero-bg {
  background: linear-gradient(
    135deg,
    #0a1a2e 0%,
    #0f2742 20%,
    #1a1d24 40%,
    #2c1f3d 60%,
    #0f2742 80%,
    #0a1a2e 100%
  );
  background-size: 320% 320%;
  animation: heroGradient 22s ease-in-out infinite;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(176, 141, 87, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(176, 141, 87, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(15, 39, 66, 0.45) 0%, transparent 60%);
  animation: heroOrbs 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

@keyframes heroGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heroOrbs {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  33% { transform: translate(3%, -2%) scale(1.05); opacity: 1; }
  66% { transform: translate(-3%, 3%) scale(0.97); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-bg::before { animation: none; }
}

/* select 화살표 스타일 */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b08d57' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}
select option {
  background: #0f2742;
  color: #fff;
}

/* 헤더 가림 보정 */
section[id] { scroll-margin-top: 5rem; }

/* 폼 placeholder 색 */
::placeholder { color: rgba(255,255,255,0.35); }

/* 갤러리 슬라이드 hover */
.gallery-swiper .swiper-slide > div { transition: transform 0.5s ease; }
.gallery-swiper .swiper-slide:hover > div { transform: scale(1.02); }

/* 갤러리 페이지네이션 도트 — 골드 컬러 적용 */
.gallery-swiper .swiper-pagination-bullet {
  background: #1a1d24;
  opacity: 0.25;
  width: 8px;
  height: 8px;
  border-radius: 0;
  margin: 0 4px;
  transition: opacity 0.2s, width 0.2s;
}
.gallery-swiper .swiper-pagination-bullet-active {
  background: #b08d57;
  opacity: 1;
  width: 24px;
}

/* 헤더 스크롤 상태 */
header { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
header.scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 24px rgba(15, 39, 66, 0.06);
}

/* 네비 활성 링크 */
header nav a { position: relative; transition: color 0.2s ease; }
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: #b08d57;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
header nav a.active { color: #0f2742; }
header nav a.active::after { transform: scaleX(1); }

/* 섹션 페이드업 */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* 코스 카드 hover 인터랙션 */
#course .group {
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
#course .group:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -20px rgba(15, 39, 66, 0.25);
}

/* 맨 위로 가기 버튼 */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 39;
  width: 44px;
  height: 44px;
  background: #0f2742;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { background: #1a1d24; }
@media (max-width: 767.98px) {
  /* 모바일에선 상담 CTA와 겹치지 않도록 위로 올림 */
  .to-top { bottom: 5.5rem; }
}