body { font-family: "Spline Sans", "Noto Sans", sans-serif; background-color: #f8fafc; }
    :root { --primary: #2563eb; --primary-hover: #1d4ed8; --slate-200: #e2e8f0; --slate-900: #0f172a; }
    .text-slate-900 { color: var(--slate-900) !important; }
    .text-slate-700 { color: #4a5568 !important; }
    .text-slate-700:hover { color: var(--primary) !important; }
    .border-slate { border-color: var(--slate-200) !important; }
    .bg-primary { background-color: var(--primary) !important; }
    .bg-primary:hover { background-color: var(--primary-hover) !important; }
    .hero {
      min-height: calc(100vh - 80px);
      background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url('/static/img/main/intro_bg.png');
      background-size: cover;
      background-position: center;
    }
    .hero-title { font-size: 2.25rem; line-height: 1.2; font-weight: 700; color: #fff; }
    .hero-text { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.9); }
    @media (min-width:480px) { .hero-title { font-size: 3rem; } .hero-text { font-size: 1.125rem; } }
    @media (min-width:768px) { .hero-title { font-size: 3.75rem; } .hero-text { font-size: 1.25rem; } }
    .btn-primary-custom { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 700; }
    .card-icon { font-size: 2.25rem; color: var(--primary); }
    .metric-icon-bg { width:64px; height:64px; background-color:#e0f2fe; display:flex; align-items:center; justify-content:center; border-radius:50%; }


/* 섹션 및 슬라이더 전체 위치 조정: 시각적으로 아래로 소폭 이동 */
.section.profile,
.profile {}

/* 프로필 섹션 여백을 충분히 줘서 카드가 수직 중앙에 보이도록 */
.profile { padding-top: 64px; padding-bottom: 64px; }

/* Swiper 내부: 카드 고정 크기(픽셀 단위) — 필요하면 수치 조정 가능 */
.profileSwiper { padding-top: 18px; transform: translateY(8px); /* 전체 슬라이더를 약간 아래로 */ }
.profileSwiper .swiper-wrapper { align-items: center; } /* 슬라이드 수직 중앙 정렬 */

.profileSwiper .swiper-slide { /* slide 너비는 CSS로 고정(슬라이드별 고정 크기) */
  width: 250px !important; /* 카드 고정 너비 -> slidesPerView:'auto'와 사용 */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 카드 스타일: 고정 크기, 내부 수직 중앙 정렬 */
.profile-card {
  width: 250px;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  padding: 14px;
  box-sizing: border-box;
  background: #ffffff;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center; /* 카드 내부 요소 수직 중앙 */
  align-items:center;
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15,23,42,0.04);
}

/* 이미지 */
.profile-img {
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
}

/* 제목 / 이름 분리 스타일 */
.card-title {
  font-size: 1rem;
  color: var(--slate-900, #0f172a);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-align:center;
}
.home-title { font-weight:600; color: #2563eb; font-size:0.95rem; }
.profile-name { font-weight:700; font-size:1.02rem; margin-top:4px; }

/* 버튼 */
.consult-btn { display:inline-block; margin-top:8px; font-weight:700; color:var(--primary, #2563eb); text-decoration:none; }
.consult-btn:hover { text-decoration: underline; }

/* hover 시 강조 + 약간 위로 띄우기 (scale) */
.profile-card:hover,
.profile-card:focus {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 22px 46px rgba(2,6,23,0.12);
  z-index: 30;
  outline: none;
}

/* Swiper 네비게이션 버튼 위치/스타일 */
/* 네비게이션 버튼: 투명 배경, 회색 화살표만 보이도록 */
:root { --nav-gray: #6b7280; --nav-gray-hover: #374151; }

.swiper-button-prev,
.swiper-button-next {
  background: transparent !important;
  color: var(--nav-gray) !important;   /* SVG stroke uses currentColor */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  transition: transform .12s ease, color .12s ease, background .12s ease;
  /* 버튼이 카드에 가려지지 않도록 충분히 앞에 오게 */
  z-index: 40;
}

/* hover/focus 시 조금 진해지게 */
.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus,
.swiper-button-next:focus {
  color: var(--nav-gray-hover) !important;
  transform: translateY(-2px);
  outline: none;
}

/* 제거: Swiper 기본의 ::after 텍스트(만약 있다면) 숨김 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* ===============================
   모바일 최적화: 프로필 카드 & 여백
   =============================== */
@media (max-width: 576px) {

  /* 모바일에서는 좌우 카드 간 여백 확보 */
  .profileSwiper .swiper-slide {
    width: 180px !important;
    margin-right: 16px !important; /* 카드 간격 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 카드 자체 크기 축소 + 내부 가운데 정렬 유지 */
  .profile-card {
    width: 180px;
    height: 230px;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 이미지 + 텍스트 중앙 */
    align-items: center;
    gap: 8px;
  }

  /* 이미지도 중앙에서 더 균형 있게 보이도록 조정 */
  .profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 6px;
  }

  /* 제목 & 이름 */
  .card-title {
    font-size: 0.9rem;
    margin-bottom: 0;
    text-align: center;
  }

  .home-title {
    font-size: 0.83rem;
  }

  .profile-name {
    font-size: 0.95rem;
  }

  /* 버튼 크기 살짝 축소 */
  .profile-card .btn {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  /* 모바일에서 네비게이션 버튼을 카드에 방해되지 않게 더 외곽으로 */
  .swiper-button-prev,
  .swiper-button-next {
    transform: translateY(-10px);
    width: 36px;
    height: 36px;
  }
}