/* Global styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ececec;
  color: #1f1f1f;
}

header {
  background-color: #ffffff;
  padding: 18px 0;
  border-bottom: 1px solid #ddd;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.container {
  max-width: calc(100% - 960px); /* 좌우 패딩 480px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* Logo */
.logo {
  font-weight: bold;
  font-size: 32px;
  color: #1f1f1f;
  flex: 1;
  text-align: left;
}

/* Navigation */
nav {
  flex: 2;
  text-align: center;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: #1f1f1f;
  font-size: 16px;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* Login */
.login {
  flex: 1;
  text-align: right;
}

.login a {
  text-decoration: none;
  color: #1f1f1f;
  font-size: 16px;
}

.login a:hover {
  text-decoration: underline;
}

/* Main content */
main {
  max-width: calc(100% - 960px); /* 좌우 패딩 480px */
  margin: 0 auto;
  padding-top: 80px; /* 헤더 높이만큼 상단 여백 */
  padding-left: 20px;
  padding-right: 20px;
}

/* Footer styles */
footer {
  background-color: #000000; /* 배경색 */
  color: #ffffff; /* 글자색 */
  position: fixed; /* 화면 하단에 고정 */
  bottom: 0; /* 화면 하단에 붙이기 */
  left: 0;
  width: 100%;
  padding: 10px 20px; /* 좌우 여백 추가 */
  text-align: left; /* 텍스트 왼쪽 정렬 */
  font-size: 16px;
  z-index: 1000; /* 다른 요소 위에 표시 */
}

.footer-container {
  max-width: calc(100% - 960px); /* 좌우 패딩 480px 적용 */
  margin: 0 auto;
  padding: 0;
  line-height: 1.6;
  display: flex; /* 플렉스 컨테이너로 설정 */
  justify-content: space-between; /* 좌우로 텍스트 분리 */
  align-items: center; /* 수직 정렬 */
  flex-wrap: wrap; /* 요소가 한 줄에 다 들어가지 않을 경우 줄 바꿈 허용 */
}

.footer-container p {
  margin: 4px 0;
}

.footer-container a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.footer-container a:hover {
  text-decoration: underline;
}

.footer-left,
.footer-right {
  flex: 1;
  min-width: 320px; /* 좁은 화면에서도 적절한 크기 유지 */
}

.footer-right {
  text-align: right; /* 오른쪽 정렬 */
}

#logo-text {
  text-align: left; /* 텍스트 중앙 정렬 */
  margin-top: 20px; /* 위에 있는 내용과 간격 추가 */
  flex-basis: 100%; /* 전체 너비 차지 */
  font-size: 80px;
  font-weight: bold;
  line-height: 100px;
}

/* Responsive Design for Footer */
@media (max-width: 1024px) {
  .footer-container {
      max-width: 100%;
      padding-left: 20px;
      padding-right: 20px;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .container,
  main {
      max-width: 100%; /* 작은 화면에서는 전체 폭 사용 */
      padding-left: 20px;
      padding-right: 20px;
  }
}

@media (max-width: 768px) {
  .container {
      flex-direction: column;
      text-align: center;
  }

  .logo, .login {
      margin-bottom: 10px;
  }
}

.logo-link {
  color: #1f1f1f;
  text-decoration: none; /* 밑줄 제거 */
}

.logo-link:hover {
  color: #1f1f1f;
  text-decoration: none; /* 밑줄 제거 */
}

.logo-link:active {
  color: #1f1f1f;
  text-decoration: none; /* 밑줄 제거 */
}

.logo-link:visited {
  color: #1f1f1f;
  text-decoration: none; /* 밑줄 제거 */
}