/* style.css: 초보자용 간단 스타일 */

/* 전체 화면 가운데 정렬 및 배경 */
body {
  max-width: 400px;
  margin: 50px auto;
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* .page: 개별 화면 숨기기 기본 */
.page {
  display: none;
}

/* 입력 필드 스타일 */
input {
  width: 80%;
  padding: 8px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* 버튼 기본 스타일 */
button {
  padding: 8px 16px;
  margin: 8px;
  border: none;
  border-radius: 4px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

/* 버튼 호버 효과 */
button:hover {
  background-color: #2980b9;
}

/* 로그아웃 버튼 색상 */
.btn-logout {
  background-color: #e74c3c;
}
.btn-logout:hover {
  background-color: #c0392b;
}

/* 링크 스타일 */
a {
  color: #3498db;
  text-decoration: none;
  font-size: 14px;
}
a:hover {
  text-decoration: underline;
}

/* 피라미드 출력 영역 */
pre {
  text-align: left;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto;
  /* 세로 스크롤 가능하도록 높이 제한 */
  max-height: 400px;
  overflow-y: auto;
}