/* style.css - 캐나다서부지역한국학교협회 최종 맞춤 스타일 */

/* 기본 설정 */
html, body {
  height: 100%; /* HTML과 Body의 높이를 100%로 설정 */
  margin: 0;
  padding: 0; /* body의 기본 패딩을 0으로 설정하여 Sticky Footer가 정상 작동하도록 합니다 */
}

body {
  font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.1rem; /* 기본 폰트 크기 조정 */
  line-height: 1.8;
  background-color: #f9f9f9;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; /* flexbox를 사용하여 하위 요소를 배치 */
  flex-direction: column; /* 세로 방향으로 배치 */
  min-height: 100vh; /* 뷰포트 높이만큼 최소 높이 설정 */
}

/* 박스 모델 설정 */
* {
    box-sizing: border-box;
}

/* 가운데 정렬을 위한 공통 wrapper */
.wrapper {
    max-width: 1100px; /* one2.ca 기준 최대 너비 */
    margin: 0 auto;
    padding: 0 1rem; /* 좌우 패딩 */
}

/* 헤더 영역 */
header {
  background-color: #fff;
  border-bottom: 2px solid #007bff; /* 하단 테두리 색상 강조 */
  padding-bottom: 0; /* 메뉴 영역이 따로 있으므로 */
}

/* 사이트 제목/로고 영역 (PC 화면의 최상단) */
.site-branding {
  text-align: center;
  padding: 20px 0; /* 상하 여백 */
  background-color: #fff; /* 배경색 */
}

.site-branding .logo-link {
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 부모 색상 상속 */
    display: block; /* 링크 전체 영역 클릭 가능 */
}

.site-branding h1 {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 2.5rem; /* 제목 크기 */
  color: #222;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.site-branding p {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 부제목 크기 */
  color: #666;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

/* 로고 이미지 (사이트 제목 대신 이미지를 사용할 경우) */
.site-branding .header-logo {
  max-height: 80px; /* 로고 이미지 크기 */
  width: auto;
  margin-bottom: 10px;
}

/* 메뉴 바 배경 (PC 메뉴 전체 영역) */
.main-nav-background {
    background-color: #f0f0f0; /* 메뉴 바 배경색 */
    padding: 10px 0; /* 메뉴 바 상하 여백 */
    border-top: 1px solid #ddd; /* 상단 테두리 */
}

/* 내비게이션 (PC 메뉴 버튼 정렬) */
.main-nav {
  display: flex;
  justify-content: center; /* 메뉴 중앙 정렬 */
  align-items: center;
}

/* 햄버거 버튼 (PC에서는 숨김) */
.menu-toggle {
  display: none;
}

/* PC 메뉴 리스트 */
.main-nav .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 가로 정렬 */
  flex-wrap: wrap; /* 내용이 넘치면 다음 줄로 */
  gap: 10px; /* 메뉴 아이템 간 간격 */
  justify-content: center; /* 메뉴 아이템 중앙 정렬 */
  width: 100%; /* 전체 너비 차지 */
}

.main-nav .nav-list li {
  margin: 0; /* 기본 마진 제거 */
}

.main-nav .nav-list a {
  display: block; /* 블록 요소로 만들어 클릭 영역 확장 */
  text-decoration: none;
  color: #555;
  font-weight: 600;
  padding: 10px 20px; /* 버튼 패딩 */
  border: 1px solid #ccc; /* 버튼 테두리 */
  border-radius: 5px; /* 버튼 모서리 둥글게 */
  background-color: #fff; /* 버튼 배경색 */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
}

.main-nav .nav-list a:hover {
  background-color: #007bff; /* 호버 시 배경색 */
  color: #fff; /* 호버 시 텍스트 색상 */
  border-color: #007bff; /* 호버 시 테두리 색상 */
}

.main-nav .nav-list a.active {
  background-color: #0056b3; /* 활성 페이지 배경색 (더 진하게) */
  color: #fff;
  border-color: #0056b3;
}


/* 메인 콘텐츠 영역 (모든 PHP 파일의 <main> 태그에 .wrapper 클래스가 있는지 확인하세요) */
main {
    padding: 30px 0; /* 상하 패딩 */
    flex-grow: 1; /* 메인 콘텐츠가 남은 공간을 채우도록 */
}

.main-content {
  max-width: 960px; /* 콘텐츠 영역의 최대 너비, 원래 wrapper가 960px이었음을 반영 */
  margin: 0 auto;
  padding: 2rem; /* one2.ca의 .main-content와 유사하게 변경 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

.main-content h1, .main-content h2, .main-content h3 {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    color: #222;
    margin-bottom: 1rem;
}

.main-content h1 { font-size: 2.2rem; font-weight: 700; text-align: center; }
.main-content h2 { font-size: 1.8rem; font-weight: 600; }
.main-content h3 { font-size: 1.4rem; font-weight: 600; }
.main-content p { font-size: 1rem; line-height: 1.7; margin-bottom: 1rem; }
.main-content ul { list-style: disc; margin: 1rem 0 1rem 20px; padding: 0; }
.main-content li { margin-bottom: 0.5rem; font-size: 1rem; }

/* 이미지 스타일 */
.main-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 5px;
}

/* 기존 로고 이미지 (index.php) - 필요시 크기 조정 */
.logo {
    max-width: 250px;
    margin: 30px auto;
}

/* 푸터 */
footer { /* class 대신 태그 선택자로 직접 적용 */
  background-color: #1e1e1e; /* 어두운 배경색 */
  color: #eee; /* 밝은 글자색 */
  padding: 5px 0;
  text-align: center;
  font-size: 0.9rem;
  /* margin-top: 50px; 이 부분은 제거되었습니다. */
}

footer p { /* .footer p 대신 footer p로 변경 */
    margin: 0;
}

/* 푸터 내 링크 스타일 */
footer a { /* .footer a 대신 footer a로 변경 */
  color: #007bff; /* 푸터 링크 색상 */
  text-decoration: none;
}

footer a:hover { /* .footer a:hover 대신 footer a:hover로 변경 */
  text-decoration: underline;
}

/* 문의 양식 스타일 (contact.php) */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  font-family: 'Inter', 'Noto Sans KR', sans-serif; /* 기존 'Poppins'에서 변경 및 한글 폰트 추가 */
  font-size: 16px;
}

.contact-form label {
  display: block;
  margin-top: 15px; /* 라벨 위 여백 추가 */
  margin-bottom: 5px; /* 라벨 아래 여백 */
  font-weight: 600; /* 폰트 굵기 조정 */
}

.contact-form label:first-child {
  margin-top: 0; /* 첫 번째 라벨은 위 여백 없음 */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px; /* 패딩 조정 */
  margin-bottom: 20px; /* 입력 필드 아래 여백 조정 */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* 패딩과 보더가 너비에 포함되도록 설정 */
  font-family: 'Noto Sans KR', sans-serif; /* 일관된 폰트 적용 */
  font-size: 1rem; /* 폰트 크기 조정 */
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  background-color: #1e1e1e;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1rem; /* 폰트 크기 조정 */
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: auto; /* 버튼 너비 자동 조절 */
  display: inline-block; /* 인라인 블록으로 정렬 */
}

.contact-form button:hover {
  background-color: #333;
}

/* 스팸 방지용 숨김 필드 스타일 (Honeypot) */
.hidden-field {
    display: none !important; /* 화면에서 완전히 숨김 */
    visibility: hidden; /* 스크린 리더 등에서도 숨김 */
    position: absolute; /* 레이아웃에 영향 미치지 않도록 */
    left: -9999px; /* 화면 밖으로 이동 */
    height: 1px; /* 최소 크기 */
    width: 1px; /* 최소 크기 */
    overflow: hidden; /* 내용이 넘쳐도 보이지 않도록 */
}

/* 반응형 디자인 */
@media (max-width: 992px) { /* 태블릿 가로 */
    .wrapper {
        padding: 0 15px;
    }
    /* 메뉴 항목 간격 조절 */
    .main-nav .nav-list {
        gap: 8px;
    }
    .main-nav .nav-list a {
        padding: 8px 15px;
        font-size: 0.95rem;
    }
    .site-branding h1 { font-size: 2rem; }
    .site-branding p { font-size: 0.9rem; }
    .main-content h1 { font-size: 2rem; }
    .main-content h2 { font-size: 1.6rem; }
    .main-content h3 { font-size: 1.3rem; }
    .main-content p, .main-content li { font-size: 0.95rem; }
}

@media (max-width: 768px) { /* 태블릿 세로 및 스마트폰 가로 */
  body {
      padding: 0; /* 모바일에서 body padding 제거 (이미 위에 설정했지만 다시 명시) */
  }
  header {
    padding-bottom: 0; /* 모바일 헤더 패딩 조정 */
    border-bottom: none; /* 모바일에서는 하단 테두리 제거 */
  }
  .site-branding {
    padding: 15px 10px; /* 모바일에서 제목/로고 영역 패딩 */
  }
  .site-branding h1 {
    font-size: 1.8rem; /* 모바일 제목 크기 조정 */
  }
  .site-branding p {
    font-size: 0.8rem; /* 모바일 부제목 크기 조정 */
  }

  /* 햄버거 버튼 (모바일에서 보임) */
  .main-nav-background {
      background-color: #fff; /* 모바일 메뉴 배경 흰색 */
      border-top: none; /* 모바일에서는 상단 테두리 제거 */
      padding: 10px 15px; /* 버튼 정렬을 위한 패딩 */
      display: flex; /* 로고와 햄버거 버튼을 flex로 정렬 */
      justify-content: space-between; /* 로고와 버튼을 양 끝으로 분리 */
      align-items: center;
      position: relative; /* 자식 요소인 nav-list의 absolute 기준점 */
  }
  .main-nav {
    width: auto; /* auto로 설정하여 버튼 공간만 차지 */
  }
  .menu-toggle {
    display: block; /* 햄버거 버튼 보이게 */
    background-color: #007bff; /* 파란색 배경 */
    color: #fff; /* 흰색 텍스트 */
    border: none;
    padding: 8px 12px; /* 버튼 패딩 */
    border-radius: 5px;
    font-size: 1.4rem; /* 아이콘 크기 */
    cursor: pointer;
  }
  .site-branding .logo-link {
    text-align: left; /* 텍스트 왼쪽 정렬 */
    padding-left: 0; /* 추가 패딩 제거 */
  }

  /* 모바일 내비게이션 메뉴 (기본 숨김) */
  .main-nav .nav-list {
    display: none; /* 기본 숨김 */
    flex-direction: column; /* 세로 정렬 */
    width: 100%;
    position: absolute; /* 절대 위치 */
    top: 100%; /* main-nav-background 아래로 배치 */
    left: 0;
    right: 0;
    background-color: #fff; /* 메뉴 배경색 */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 1000; /* 메뉴가 다른 콘텐츠 위에 오도록 */
    border-top: 1px solid #eee; /* 메뉴 상단 구분선 */
    padding: 10px 0; /* 모바일 메뉴 내부 패딩 */
  }

  /* 햄버거 메뉴 열렸을 때 보임 */
  .main-nav .nav-list.open {
    display: flex;
  }

  .main-nav .nav-list li {
    width: 100%;
    margin-left: 0;
    border-bottom: 1px solid #eee; /* 메뉴 항목 구분선 */
  }
  .main-nav .nav-list li:last-child {
    border-bottom: none;
  }

  .main-nav .nav-list a {
    padding: 12px 20px;
    color: #333;
    font-size: 1rem;
    border: none;
    border-radius: 0;
    background-color: transparent;
    text-align: left; /* 왼쪽 정렬 */
  }
  .main-nav .nav-list a:hover,
  .main-nav .nav-list a.active {
    background-color: #f0f0f0;
    color: #007bff;
  }
  .main-content {
      padding: 1.5rem 1rem;
  }
  .main-content h1 { font-size: 2rem; }
  .main-content h2 { font-size: 1.6rem; }
  .main-content h3 { font-size: 1.3rem; }
  .main-content p, .main-content li { font-size: 0.95rem; }
  .wrapper {
      padding: 0 15px;
  }
}

@media (max-width: 480px) { /* 스마트폰 세로 */
    .site-branding h1 { font-size: 1.5rem; }
    .site-branding p { font-size: 0.7rem; }
    .main-content h1 { font-size: 1.8rem; }
    .main-content h2 { font-size: 1.4rem; }
    .main-content h3 { font-size: 1.2rem; }
    .main-content p, .main-content li { font-size: 0.9rem; }
}