@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap");

html {
  scroll-behavior: smooth;
}

body,
h2,
p,
ul,
li,
address,
span,
strong,
a {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", Arial, sans-serif;
  color: #495057; /* 기본 텍스트 색상을 약간 어둡게 모던화 */
}

body {
  line-height: 1.6;
  overflow-x: hidden; /* 가로 스크롤바 방지 */
  position: relative; /* 필요시 위치 기준 */
  word-break: keep-all; /* 단어 단위 줄바꿈 (한국어에 유용) */

  /* 전체 페이지를 Flex 컨테이너로 설정하여 자식들을 중앙 정렬 */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 뷰포트 전체 높이 사용 */
  align-items: center; /* 가로 중앙 정렬 */
  justify-content: center; /* 세로 중앙 정렬 */
}

a {
  text-decoration: none !important;
  color: #007bff; /* 기본 링크 색상을 모던한 파란색으로 변경 */
}

a:link,
a:visited,
a:active {
  color: #007bff; /* 방문한 링크, 활성 링크 색상을 모던한 파란색으로 변경 */
}

img {
  vertical-align: top;
  border: 0 none;
  max-width: 100%;
}

.section {
  padding: 60px 20px;
  text-align: center;
  width: 100%; /* 섹션 너비 100% */
  box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

.banner {
  background-color: #e9ecef; /* 배너 배경색을 밝고 모던한 회색 톤으로 변경 */
  flex-grow: 1; /* banner 섹션이 남은 공간을 차지하여 콘텐츠를 중앙에 배치 */
  display: flex; /* 내부 콘텐츠를 flex로 정렬 */
  flex-direction: column;
  justify-content: center; /* 세로 중앙 정렬 */
  align-items: center; /* 가로 중앙 정렬 */
}

.about {
  /* HTML에서 제거되었으므로, 이 CSS 블록은 이제 필요 없습니다. */
}

.section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #212529; /* 제목 색상을 더 진하게 변경 */
}

.section p {
  font-size: 1em;
  margin: 10px 0;
  color: #495057; /* 단락 텍스트 색상 모던화 */
}

/* main-container: body의 Flex 속성을 상속받아 중앙 정렬 유지 */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1; /* 남은 세로 공간을 채워, 내용이 적어도 중앙에 오도록 함 */
  width: 100%;
  max-width: 900px;
  padding: 20px;
  box-sizing: border-box;
}

/* header: 그대로 유지 */
.header {
    text-align: center;
    margin-bottom: 40px;
}

.company-logo img {
    max-width: 200px;
    height: auto;
    margin-bottom: 10px;
}

.company-logo {
    font-size: 2.5em;
    font-weight: 700;
    color: #212529; /* 로고 제목 색상 변경 */
    margin-bottom: 10px;
}

.tagline {
    font-size: 1.2em;
    color: #6c757d; /* 태그라인 색상 변경 */
    margin-bottom: 0;
}

/* 핵심: 이 부분이 Google 로그인 버튼을 중앙 정렬합니다. */
.centered-container {
  display: flex;
  flex-direction: column; /* 자식 요소들을 세로로 정렬 */
  justify-content: center; /* **세로 가운데 정렬** */
  align-items: center; /* **가로 가운데 정렬** */
  min-height: 250px; /* 충분한 높이를 제공하여 세로 중앙 정렬을 지원 */
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px; /* 최대 너비 제한 */
}

/* g_id_signin은 HTML에 클래스로 사용됨 */
.g_id_signin {
  /* Google이 렌더링할 iframe의 공간을 미리 확보 (Google Standard Large 버튼 기준) */
  width: 250px; /* Google 버튼 너비에 맞춤 */
  height: 40px; /* Google 버튼 높이에 맞춤 */
  min-height: 40px; /* 레이아웃 흔들림 방지 */
  margin: 10px auto; /* 상하 여백과 좌우 자동 마진으로 중앙 정렬 */
  box-sizing: border-box;
  display: block; /* 블록 요소로 설정하여 중앙 정렬이 제대로 작동하도록 함 */
}

/* Google이 생성하는 wrapper div를 강제로 중앙 정렬 */
.S9gUrf-YoZ4jf {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Google iframe 자체도 중앙 정렬 강제 */
.L5Fo6c-PQbLGe {
  margin: 0 auto !important;
  display: block !important;
}

/* --- Footer Styles - 색상만 모던하게 변경 --- */
#footer {
  width: 100%;
  text-align: center;
  background-color: #343a40; /* 푸터 배경색을 어둡게 변경 (모던한 느낌) */
  clear: both;
  padding: 20px;
  box-sizing: border-box;
}

#footer address {
  margin-top: 0;
}

#footer address span {
  font-size: 0.9em;
  line-height: 1.5;
  color: #adb5bd; /* 푸터 텍스트 색상을 밝은 회색으로 변경 */
}

#footer address strong {
  color: #ced4da; /* 강조 텍스트 색상 변경 */
  font-weight: bold;
}

#footer address a {
  color: #ced4da !important; /* 개인정보처리방침 링크 색상 변경 */
  text-decoration: underline !important; /* 푸터 링크에 밑줄 추가 */
}
#footer address a:hover {
    color: #ffffff !important; /* 호버 시 색상 변경 */
}


/* Mobile Footer */
#m-footer {
  display: none;
  background-color: #343a40; /* 모바일 푸터 배경색도 동일하게 변경 */
  padding: 20px;
  box-sizing: border-box;
}

#m-footer address p {
  color: #adb5bd !important; /* 모바일 푸터 텍스트 색상 변경 */
  font-size: 0.8em;
  font-weight: normal;
  margin: 0;
}
#m-footer address strong {
    color: #ced4da !important; /* 모바일 푸터 강조 텍스트 색상 변경 */
}


/* 반응형 디자인 */
@media (max-width: 768px) {
  .section {
    padding: 30px 15px;
  }

  .banner h2 {
    font-size: 1.6em;
  }

  .banner p {
    font-size: 0.9em;
  }

  .centered-container {
    min-height: 200px;
    padding: 15px;
  }

  .g_id_signin {
      width: 100%; /* 모바일에서 너비 100% */
      max-width: 250px; /* 모바일 최대 너비 */
      margin: 10px auto; /* 모바일에서도 중앙 정렬 유지 */
      display: block; /* 블록 요소로 설정 */
  }
  
  /* 모바일에서도 Google wrapper 중앙 정렬 유지 */
  .S9gUrf-YoZ4jf {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  .L5Fo6c-PQbLGe {
    margin: 0 auto !important;
    display: block !important;
  }
  .entrance-button {
      width: 100%;
      max-width: 250px;
  }

  #m-footer {
    display: block;
  }
  #footer {
    display: none;
  }
}