body {
  height: 100vh; /* Set the height of the body to 100% of the viewport height */
  width: 100vw; /* Set the width of the body to 100% of the viewport width */
  overflow: auto; /* Enable scrolling if the content overflows the viewport */
}

.principalButton {
  background-color: #007bff;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  transition-duration: 0.4s;
  margin: 5px;
  padding: 5px 5px;
  border-radius: 20px;
  font-size: calc(0.8rem + (100% - 0.8rem) / 5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.principalButton:hover {
  background-color: #0056b3;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.interestratebutton {
  background-color: #007bff;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  transition-duration: 0.4s;
  margin: 3px;
  padding: 5px 8px;
  border-radius: 50px;
  font-size: 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.interestratebutton:hover {
  background-color: #0056b3;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.yearButton {
  background-color: #007bff;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  transition-duration: 0.4s;
  margin: 5px 3px;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
  white-space: nowrap; /* 줄 바꿈 방지 */
  overflow: hidden; /* 넘치는 내용 감추기 */
  text-overflow: ellipsis; /* 넘치는 내용을 줄임표(...)로 표시 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.yearButton:hover {
  background-color: #0056b3;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

@media (max-width: 576px) {
  .yearButton {
    margin: 2px;
    padding: 4px 6px;
    font-size: 0.7rem;
  }
}

#principalText {
  margin: 0;
}

.gracebtns {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 10px;
}

.gracebtns button {
  flex: 0 0 calc(20% - 6px); 
  margin: 3px; 
}

.interest-rate-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.interest-rate-buttons button {
  flex: 0 0 calc(12.5% - 50px); 
  margin: 2px; 
}

.loan-term-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 10px;
}

.loan-term-buttons button {
  flex: 0 0 calc(12.5% - 3px);
  margin: 1.5px; 
}


.loan-amount-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 10px;
}

.loan-amount-buttons button {
  flex: 0 0 calc(20% - 6px); 
  margin: 3px; /* 버튼 간격 설정 */
}


.calculateButton {
  background-color: #dc3545;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  transition-duration: 0.4s;
  margin: 20px;
  padding: 15px 30px;
  border-radius: 20px;
  font-size: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.calculateButton:hover {
  background-color: #bd2130;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}

.historyButton {
  background-color: #6c757d; /* 변경된 배경색 */
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  transition-duration: 0.4s;
  margin: 20px;
  padding: 15px 30px;
  border-radius: 20px;
  font-size: 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.historyButton:hover {
  background-color: #5a6268; /* 변경된 호버 시 배경색 */
  color: white;
  transform: scale(1.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}


#loanTable table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
    font-size: 0.3rem;  /* adjust as necessary */
}

#loanTable caption {
  font-weight: bold;
  margin-bottom: 10px;
}

#loanTable th,
#loanTable td {
  padding: 3px;
  text-align: right;
  border: 1px solid #ddd;
}

#loanTable th {
  background-color: #007bff; /* Button color */
  color: white;
}

#loanTable tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Light gray */
}

#loanTable tbody td {
  color: #333; /* Table text color */
}

#loanTable tfoot td {
  font-weight: bold;
  color: #333; /* Table footer text color */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  #loanTable th,
  #loanTable td {
    font-size: 12px; /* Adjust font size for mobile devices */
  }
}

/* Media query for PC screens */
@media (min-width: 769px) {
  #loanTable th,
  #loanTable td {
    font-size: 18px; /* Adjust font size for PC screens */
  }
}

#historyTable table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
    font-size: 0.3rem;  /* adjust as necessary */
}

#historyTable caption {
  font-weight: bold;
  margin-bottom: 10px;
}

#historyTable th,
#historyTable td {
  padding: 3px;
  text-align: right;
  border: 1px solid #ddd;
}

#historyTable th {
  white-space: nowrap;
  background-color: #007bff; /* Button color */
  color: white;
}

#historyTable tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Light gray */
}

#historyTable tbody td {
  color: #333; /* Table text color */
}

#historyTable tfoot td {
  font-weight: bold;
  color: #333; /* Table footer text color */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  #historyTable th,
  #historyTable td {
    font-size: 14px; /* Adjust font size for mobile devices */
  }
}

/* Media query for PC screens */
@media (min-width: 769px) {
  #historyTable th,
  #historyTable td {
    font-size: 18px; /* Adjust font size for PC screens */
  }
}