footer {
  margin-top: 50px;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .container {
  /* 컨테이너 자체가 찌그러지지 않도록 너비 확보 */
  display: flex;
  flex-direction: column; /* 위아래로 배치 (필요시 row로 변경) */
  align-items: center;    /* 가로 정렬 */
  justify-content: center; /* 세로 정렬 */
  width: 100%;
}

.contact-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.contact-list-box ul {
  /* ⚠️ 중요: ul의 기본 여백을 완전히 제거해야 정중앙에 옵니다 */
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: 20px; /* 항목 사이 간격 */
  justify-content: center; /* ul 내부 항목들 가로 정렬 */
  align-items: center;
}

.contact-list-box li {
  font-size: 13px;
  color: #666;
  white-space: nowrap; /* 한 줄 유지 */
}

/* 카피라이트 텍스트 */
.copy {
  display: block;
  margin-top: 5px; /* 주소/이메일과 약간의 거리 */
  font-size: 11px;
  color: #aaa;
}
/* 기존 스타일은 유지하고 아래 반응형 부분만 교체하거나 참고하세요 */

@media (max-width: 820px) {
  footer {
    height: auto;
    padding: 40px 20px; /* 항목이 늘어났으므로 상하 패딩을 조금 더 확보 */
  }

  .contact-list-box ul {
    flex-direction: column; /* 세로 정렬 */
    gap: 12px; /* 항목 간의 간격 */
    text-align: center;
  }

  .contact-list-box li {
    font-size: 13px; /* 모바일에서 가독성 좋은 크기 */
    display: flex;
    flex-direction: column; /* 모바일에서 라벨과 내용을 위아래로 배치하고 싶다면 추가, 아니면 제거 */
    align-items: center;
  }

  .contact-list-box li .name {
    font-weight: bold;
    margin-bottom: 2px;
  }

  /* 카피라이트 별도 스타일 */
  .copy {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: #aaa;
  }
}