/* CSS 변수 정의 */ 
:root { 
--primary-color: #004080; 
--secondary-color: #00bfae; 
--background-color: #f9f9f9; 
--hero-bg-color: #e6f7f5; 
--hero2-bg-color: #e6f0f7; 
} 

/* 전체 스타일 */ 
body { 
margin: 0; 
font-family: Arial, sans-serif; 
line-height: 1.6; 
background-color: var(--background-color);
color: var(--primary-color); 
} 

/* 헤더 */ 
header { 
background-color: white; 
position: sticky; 
top: 0; 
z-index: 100; 
} 

.nav-container { 
display: flex; 
justify-content: space-between; 
align-items: center; 
max-width: 1100px; 
margin: 0 auto; 
padding: 1.5rem 1rem; 
box-sizing: border-box; 
} 

/* 기본 메뉴 숨김 */ 
.nav-links { 
display: flex; 
gap: 1rem; 
} 

.menu-toggle { 
display: none; /* 데스크탑에서는 숨김 */ 
font-size: 2rem; 
background: none; 
border: none; 
cursor: pointer; 
} 

/* 로고 */ 
.logo { 
display: flex; 
flex-direction: column; 
align-items: center; 
} 

.logo-text { 
font-size: 2.5rem; 
font-weight: bold; 
line-height: 1; 
} 

.logo .path { 
color: var(--primary-color); 
} 

.logo .able { 
color: var(--secondary-color); 
} 

.logo .subtitle { 
font-size: 1.2rem; 
color: var(--primary-color); 
text-align: center; 
margin-top: 0; 
line-height: 1; 
width: 100%; 
font-weight: normal; 
} 

.logo-link {
  text-decoration: none; /* 밑줄 제거 */
  color: inherit;        /* 기존 색상 유지 */
  display: inline-block; /* 클릭 영역을 로고 전체로 확장 */
}
/* 네비게이션 */ 
nav a { 
margin-left: 2rem; 
text-decoration: none; 
color: var(--primary-color); 
font-weight: 500; 
font-size: 1.1rem; 
} 

nav a:hover { 
color: var(--secondary-color); 
} 

/* Hero Section */ 
.hero { 
background-size: cover; 
background-position: center; 
background-repeat: no-repeat; 
display: flex; 
flex-wrap: wrap; 
align-items: center; 
justify-content: center; 
padding: 2rem 1rem; 
gap: 2rem; 
min-height: 100vh;
} 

/* index.html의 hero 섹션에만 적용되는 스타일 */
.home-page .hero {
  background-image: url('../assets/images/home.jpg');
  color: white;
}

.hero-text { 
flex: 1; 
min-width: 280px; 
max-width: 600px; 
padding: 1rem; 
} 

/* Hero 내부 첫 요소 상단 여백 제거 */ 
.hero-text > *:first-child { 
margin-top: 0; 
} 

.tagline { 
font-size: 2.5rem; 
font-weight: bold; 
text-align: center; 
margin-bottom: 1rem; 
} 

.tagline .yourPath { 
color: var(--primary-color); 
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.7); 
} 
.tagline .yourPoss { 
color: var(--secondary-color); 
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7); 
} 

.subcopy { 
margin: 0 0 1.5rem 0; 
font-size: 1.5rem; 
color: white; 
text-align: center; 
} 

.hero-buttons { 
text-align: center; 
} 

.hero-buttons .btn { 
display: inline-block; 
margin: 0.5rem 0.5rem 0 0.5rem; 
padding: 0.7rem 1.4rem; 
border-radius: 8px; 
background: var(--secondary-color); 
color: white; 
text-decoration: none; 
font-weight: bold; 
transition: 0.3s; 
} 

.hero-buttons .btn:hover { 
background: #009688; 
} 

.hero-buttons .btn-outline { 
background: transparent; 
border: 2px solid var(--secondary-color); 
color: var(--secondary-color); 
} 

.hero-image { 
flex: 1; 
min-width: 280px; 
max-width: 600px; 
text-align: center; 
} 

.hero-image img { 
max-width: 100%; 
border-radius: 16px; 
box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
} 

/* 들여쓰기 */ 
.indent { 
display: inline-block; 
margin-left: 20px; 
} 

/* About Us 섹션 */ 
.hero-title { 
text-align: center; 
padding: 2rem 1rem 1rem 1rem; 
background-color: var(--hero-bg-color); 
} 

/* services.html, contact.html, about.html의 Hero 제목에만 적용되는 공통 스타일 */
.services-page .hero-title,
.contact-page .hero-title,
.about-page .hero-title {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom)); 
}

/* 각 페이지별 배경 이미지 설정 */
.services-page .hero-title {
  background-image: url('../assets/images/services.jpg');
}
.contact-page .hero-title {
  background-image: url('../assets/images/contact.jpg');
}
.about-page .hero-title {
  background-image: url('../assets/images/about.jpg');
}

.hero-title h2 { 
font-size: 2.5rem; 
font-weight: bold; 
color: var(--secondary-color); 
margin: 0; 
} 

.hero-content { 
max-width: 800px; 
margin: 0 auto; 
padding: 2rem 1.5rem; 
line-height: 1.8; 
font-size: 1.1rem; 
color: #333; 
} 

.hero-content h3 { 
font-size: 1.5rem; 
color: var(--primary-color); 
margin-top: 1.5rem; 
margin-bottom: 0.5rem; 
} 

.hero-content p { 
margin: 0 0 1rem 0; 
} 

.hero-content ul { 
list-style: disc inside; 
margin: 0.5rem 0 1.5rem 0; 
padding: 0; 
} 

.hero-content li { 
margin: 0.4rem 0; 
} 

.hero-content .optional { 
font-size: 0.9rem; 
color: gray; 
font-weight: normal; 
} 

/* Contact Form Styling */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto; /* 중앙 정렬 */
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

#contactForm button {
  padding: 1rem;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contactForm button:hover {
  background-color: #009688;
}

#form-message {
  text-align: center;
  margin-top: 1rem;
  font-weight: bold;
}

/* Founder section */
.founder-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 0; /* 기존 섹션과 간격 확보 */
}
.founder-photo img {
  max-width: 300px;
  border-radius: 10px;
}
.founder-text {
  flex: 1;
  min-width: 200px;
}

/* Accordion (Why Choose Us) */
.accordion-btn {
  width: 100%;
  text-align: left;
  padding: 12px 20px;
  font-size: 1rem;
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  margin-bottom: 5px;
  transition: background-color 0.3s;
  font-weight: 500;
}

.accordion-btn:hover {
  background-color: #e0e0e0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background-color: #fafafa;
  padding: 0 20px;
}

.accordion-content p {
  margin: 10px 0;
}

.accordion-btn.active + .accordion-content {
  max-height: 500px; /* 충분히 펼쳐질 수 있는 값 */
  padding: 10px 20px;
}


/* 푸터 */ 
footer { 
text-align: center; 
padding: 2rem 1rem; 
background-color: var(--background-color); 
font-size: 0.9rem; 
} 

/* 모바일 화면 대응 */ 
@media screen and (max-width: 768px) { 

.nav-container { 
flex-direction: row; 
justify-content: space-between; 
align-items: center; 
} 

.menu-toggle { 
display: block; 
} 

.nav-links { 
display: none; 
flex-direction: column; 
width: 100%; 
position: absolute; 
top: 100%; 
left: 0; 
background-color: white; 
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
padding: 1rem; 
box-sizing: border-box; 
} 

.nav-links.show { 
display: flex; 
} 

.nav-links a { 
margin: 0.5rem 0; 
text-align: center; 
} 

.hero { 
flex-direction: column; 
padding: 5rem 1rem 5rem 1rem;
min-height: 70vh;
} 

.hero-text, .hero-image { 
max-width: 100%; 
} 

.subcopy {
  font-size: 1.2rem;
}

.founder-container {
  flex-direction: column;
  gap: 1rem;
}
.founder-photo img {
  max-width: 100%;
}
  
header, .menu-toggle {
  position: relative;
  z-index: 9999; /* 모든 hero 섹션보다 위로 */
}

/* ✅ 버튼을 세로 정렬 */
.hero-buttons {
  display: flex;
  flex-direction: column; /* 세로 배치 */
  gap: 1rem; /* 버튼 간격 */
  width: 80%; /* 버튼 전체 넓이 */
  align-items: center; /* 내부 버튼 중앙 정렬 */
  margin: 0 auto; /* ✅ hero-buttons 자체를 중앙으로 */
}

.hero-buttons .btn {
  width: 80%; /* hero-buttons 기준으로 꽉 차게 */
  text-align: center;
}

}