/* =========================================
   1. GLOBAL & RESET & VARIABLES
   ========================================= */
:root {
  --text-color: #1a1c20;
  --link-color: #4a76ee;
  --background-color: #ffffff;
  --section-bg-even: #f6f8fa; /* 짝수 섹션용 연한 회색 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  width: 100%;
  overflow-x: hidden; 
}

a {
  color: var(--link-color);
  text-decoration: none;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}
footer p {
  margin: 5px 0;
}

/* =========================================
   2. NAVBAR
   ========================================= */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px; /* 네비게이션 높이 약간 축소 (80px -> 70px) */
  padding: 0 50px;
  max-width: 1400px; 
  margin: 0 auto;
}

nav .left a {
  color: var(--text-color);
  font-size: 22px;
  font-weight: 600;
}

nav .right a {
  color: var(--text-color);
  margin: 0 10px;
}

nav .right a:last-child {
  color: var(--background-color);
  background-color: var(--text-color);
  padding: 5px 15px;
  border-radius: 5px;
}

nav .right a span {
  margin-left: 5px;
}

/* =========================================
   3. COMMON SECTION STYLES
   ========================================= */
section {
  /* [핵심 수정] 링크 이동 시 네비게이션 높이(70px)보다 조금 더 여유를 두고 멈추게 함 */
  scroll-margin-top: 100px; 
  
  margin: 0;
  padding: 80px 50px; /* 기본 패딩 */
  width: 100%;
}

/* 짝수 번째 섹션 배경색 변경 */
section:nth-of-type(even) {
  background-color: var(--section-bg-even);
}

section h2 {
  font-size: 35px;
  margin-bottom: 30px;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

section .group,
section .cells,
section > .text, 
section form {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   4. SECTION SPECIFIC STYLES
   ========================================= */
/* --- Hero Section (콤팩트 & 중앙 정렬 수정판) --- */
.hero-section {
  display: flex;
  justify-content: center; /* 전체 덩어리(이미지+글자)를 화면 정중앙에 배치 */
  align-items: center;     /* 수직 중앙 정렬 */
  gap: 60px;               /* 이미지와 텍스트 사이 간격*/
  
  padding-top: 60px; 
  padding-bottom: 60px;
  min-height: auto; 
}

/* 이미지 영역 */
.hero-section .headshot {
  flex: 0 0 auto; /* 이미지 크기만큼만 공간 차지 (늘어나지 않음) */
  display: flex;
  justify-content: flex-end; /* 이미지를 텍스트 쪽으로 붙임 */
}

.hero-section .headshot img {
  width: 100%;
  max-width: 260px; /* 프로필 사진 크기 */
  height: auto;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 텍스트 영역 */
.hero-section .text {
  flex: 0 1 auto; 
  max-width: 600px;
  text-align: left;
  
  /* [핵심 수정] 공통 스타일의 margin: auto를 무력화하여 옆으로 밀리는 현상 방지 */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hero-section .text h2 {
  font-size: 40px;
  margin-bottom: 15px;
  text-align: left; /* 제목 왼쪽 정렬 확실히 지정 */
  margin-left: 0;
}

.hero-section .text p {
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 링크 그룹 간격 */
.hero-section .text .links,
.hero-section .text .links-2,
.hero-section .text .links-3,
.hero-section .text .links-4 { /* [추가됨] */
  margin-top: 10px;
}

/* 버튼 스타일 (업데이트됨) */
.hero-section .text .links a,
.hero-section .text .links-2 a,
.hero-section .text .links-3 a,
.hero-section .text .links-4 a, /* [추가됨] */
.checkup-section .text .links a,
.newstart-section .text .links a,
.newstart-quiz-section .text .links a, /* [추가됨] */
.biblequiz-section .text .links a,
.ai-quiz-section .text .links a,       /* [추가됨] */
.fluid-section .text .links a,
.contact-section .text .links a  {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--link-color);
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 5px;
  transition: .1s;
  font-size: 15px;
}

/* 마우스 올렸을 때(Hover) 스타일 (업데이트됨) */
.hero-section .text .links a:hover,
.hero-section .text .links-2 a:hover,
.hero-section .text .links-3 a:hover,
.hero-section .text .links-4 a:hover, /* [추가됨] */
.checkup-section .text .links a:hover,
.newstart-section .text .links a:hover,
.newstart-quiz-section .text .links a:hover, /* [추가됨] */
.biblequiz-section .text .links a:hover,
.ai-quiz-section .text .links a:hover,       /* [추가됨] */
.fluid-section .text .links a:hover,
.contact-section .text .links a  {
  color: var(--text-color);
  border: 2px solid var(--text-color);
}

/* --- Skills Section (위로 당기기) --- */
.skills-section {
  /* [중요] Hero 섹션과 가까워지도록 상단 패딩 제거 또는 축소 */
  padding-top: 100px; 
  padding-bottom: 100px;
}

.skills-section .text {
  text-align: center;
  margin-bottom: 20px;
}

.skills-section .cells {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.skills-section .cells .cell {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 160px; /* 카드 너비 약간 축소 */
  padding: 12px 15px;
  margin: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.skills-section .cells .cell img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.skills-section .cells .cell span {
  font-size: 16px;
  font-weight: 500;
}

/* --- Common Layout (Testimony, Checkup, NEWSTART, BibleQuiz) --- */
.group {
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: center;
}

.person-details {
  text-align: center;
  flex: 0 0 250px;
}

.person-details img {
  width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 5px solid rgba(255,255,255,0.5);
}

.person-details p {
  font-weight: 600;
  margin-bottom: 5px;
}

.person-details p:last-child {
  font-weight: normal;
  color: #666;
}

.group .text {
  flex: 1;
  font-size: 18px;
  line-height: 1.6;
}

/* Checkup & NEWSTART & Quiz Links Spacing (업데이트됨) */
.checkup-section .text .links,
.newstart-section .text .links,
.newstart-quiz-section .text .links, /* [추가됨] */
.biblequiz-section .text .links,
.ai-quiz-section .text .links,       /* [추가됨] */
.fluid-section .text .links {
  margin-top: 25px;
}

/* =========================================
   수정된 Contact Section CSS
   (styles.css 하단의 해당 부분을 이것으로 덮어쓰세요)
   ========================================= */

/* --- Contact Section --- */
.contact-section .group {
  /* 좌우 배치가 아닌 상하 배치로 변경 */
  flex-direction: column; 
  align-items: center; /* 중앙 정렬 */
  gap: 20px; /* 링크와 폼 사이 간격 */
}

/* 폼 스타일 */
.contact-section form {
  width: 100%;
  max-width: 600px; /* 폼이 너무 넓어지지 않게 중앙에 적당한 크기로 제한 */
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 링크 버튼 스타일 (기존 .text .links a 에서 .text 제거하여 적용) */
.contact-section .links {
  margin-bottom: 10px;
}

.contact-section .links a {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--link-color);
  border-radius: 5px;
  transition: .1s;
  font-size: 15px;
  color: var(--link-color); /* 색상 명시 */
  background-color: transparent;
}

.contact-section .links a:hover {
  color: var(--text-color);
  border: 2px solid var(--text-color);
}

.contact-section form input,
.contact-section form textarea {
  font-family: 'Poppins', sans-serif;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  padding: 15px;
  margin-bottom: 20px;
  outline: none;
  border-radius: 5px;
  transition: .2s;
}

.contact-section form input:focus,
.contact-section form textarea:focus {
  border-color: var(--link-color);
  background-color: #fff;
}

.contact-section form button {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background-color: var(--link-color);
  border: none;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: .2s;
}

.contact-section form button:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}

/* --- Top Link Icon Style & Tooltip --- */
h2 .top-link {
  position: relative; /* 말풍선 위치의 기준점 */
  font-size: 20px;
  margin-left: 10px;
  color: #ccc;
  vertical-align: middle;
  transition: .2s;
}

/* 마우스 올렸을 때 아이콘 효과 */
h2 .top-link:hover {
  color: var(--link-color);
  transform: translateY(-3px);
}

/* [추가된 기능] 마우스 올렸을 때 'to top' 글자 나오게 하기 */
h2 .top-link:hover::after {
  content: "to top"; /* 보여줄 텍스트 */
  
  /* 위치 및 크기 설정 */
  position: absolute;
  bottom: 100%; /* 아이콘 바로 위에 배치 */
  left: 50%;
  transform: translateX(-50%); /* 정확히 중앙 정렬 */
  
  /* 디자인 꾸미기 */
  background-color: #333; /* 검은색 배경 */
  color: #fff;            /* 흰색 글자 */
  padding: 5px 8px;       /* 내부 여백 */
  font-size: 12px;        /* 글자 크기 */
  border-radius: 4px;     /* 둥근 모서리 */
  white-space: nowrap;    /* 줄바꿈 방지 */
  pointer-events: none;   /* 글자가 마우스 클릭 방해하지 않게 설정 */
  
  /* 부드럽게 나타나는 효과 (선택사항) */
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

/* 말풍선 등장 애니메이션 */
@keyframes fadeIn {
  to { opacity: 1; transform: translateX(-50%) translateY(-5px); }
}

/* =========================================
   Custom Button Tooltips (HTML의 data-tooltip 내용을 보여줌)
   ========================================= */
/* 툴팁을 가진 링크 버튼 설정 */
.links a[data-tooltip] {
  position: relative; /* 말풍선의 기준점 */
}

/* 마우스 올렸을 때 말풍선 등장 */
.links a[data-tooltip]:hover::after {
  content: attr(data-tooltip); /* HTML에 적힌 문구를 가져옴 (핵심!) */
  
  /* 위치 및 디자인 (이전 to top 스타일과 통일) */
  position: absolute;
  bottom: 100%;       /* 버튼 바로 위에 배치 */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px; /* 버튼과 말풍선 사이 간격 */
  
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;        /* 다른 요소보다 위에 보이게 함 */
  
  /* 애니메이션 */
  opacity: 0;
  animation: tooltipFade 0.3s forwards;
}

/* 등장 애니메이션 정의 */
@keyframes tooltipFade {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* =========================================
   5. RESPONSIVE DESIGN (Mobile)
   ========================================= */
/* --- Mobile Responsive (모바일에서는 세로 배치) --- */
@media (max-width: 768px) {
  section {
    padding: 60px 20px;
  }
  .skills-section {
    padding-top: 60px; 
  }

  .hero-section {
    flex-direction: column; /* 모바일: 이미지 위, 텍스트 아래 */
    text-align: center;
    gap: 30px;
    padding-top: 40px;
  }
  
  .hero-section .text {
    text-align: center;
    /* 모바일에서는 중앙 정렬을 위해 마진 리셋 해제 또는 auto 사용 가능하지만, 
       flex column 구조라 0으로 둬도 무방함 */
  }
  
  .hero-section .text h2 {
    text-align: center;
  }

  .hero-section .text .links,
  .hero-section .text .links-2,
  .hero-section .text .links-3,
  .hero-section .text .links-4 { /* [추가됨] */
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
  
  .hero-section .headshot {
    justify-content: center;
  }

  .hero-section .headshot img {
    width: 220px;
  }

  .group {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .contact-section .group {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  nav {
    padding: 0 20px;
  }

  nav .right a span {
    display: none;
  }
  
  .skills-section .cells .cell {
    width: 100%;
  }

}

/* --- Top Link Icon Style --- */
h2 .top-link {
  font-size: 20px; /* 제목보다 작게 설정 (h2는 35px임) */
  margin-left: 10px; /* 제목과 아이콘 사이 간격 */
  color: #ccc; /* 너무 튀지 않게 연한 회색 (원하는 색으로 변경 가능) */
  vertical-align: middle;
  transition: .2s;
}

/* 마우스 올렸을 때 효과 */
h2 .top-link:hover {
  color: var(--link-color); /* 파란색(링크색)으로 변경 */
  transform: translateY(-3px); /* 살짝 위로 올라가는 애니메이션 */
}