body {
  font-family: "Segoe UI", sans-serif;
  max-width: 500px;
  margin: 50px auto;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
h1 {
  color: #333;
  text-align: center;
}
div {
  text-align: center;
}
img {
  width: 300px;
  height: 300px;
}
label {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
}
button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.75rem;
  background-color: rgb(183, 0, 80);
  color: white;
  border: none;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: rgb(73, 42, 52);
}
#result {
  margin-top: 2rem;
  padding: 1rem;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
}


select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none; /* 기본 화살표 제거 (크롬/사파리) */
  background-color: white;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%220%200%2010%205%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%200L5%204L9%200H1Z%22%20fill%3D%22%23333%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65rem auto;
}

input[type="date"] {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}