body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #fff8ef;
  color: #4a3524;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px;
}

h1 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

.koppe-area{
    text-align:center;
    margin-bottom:20px;
}

#koppeImage{
  width:200px;
  height:220px;
  object-fit:contain;
  max-width:70%;
  transition:0.3s;
}

#koppeMessage{
    display:inline-block;
    background:#ffffff;
    border:2px solid #f2d8b8;
    border-radius:18px;
    padding:12px 18px;
    margin-top:12px;
    font-size:18px;
    font-weight:bold;
    color:#8a5b2b;
    box-shadow:0 4px 10px rgba(120,80,40,.12);
}

.lead {
  text-align: center;
  line-height: 1.7;
  margin-bottom: 28px;
}

.card {
  background: white;
  border: 2px solid #f2d8b8;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 12px rgba(120,80,40,.12);
}

label {
  display:block;
  font-weight:bold;
  margin-bottom:8px;
}

.input-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

input {
  width:100%;
  font-size:24px;
  padding:12px;
  border:2px solid #e7c69d;
  border-radius:12px;
  box-sizing:border-box;
}

button{
  width:100%;
  padding:15px;
  font-size:18px;
  font-weight:bold;
  color:white;
  background:#f4a94f;
  border:none;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 5px 0 #c88335;
}

button:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 #c88335;
}

.result-area h2{
  margin:30px 0 20px;
}

.result-card{
  background:white;
  border:2px solid #f2d8b8;
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 4px 10px rgba(120,80,40,.10);
}

.result-title{
  font-size:22px;
  font-weight:bold;
}

.result-count{
  margin-top:6px;
  font-size:20px;
  font-weight:bold;
  color:#d97925;
}

.result-comment{
  margin-top:10px;
  line-height:1.7;
}

.empty{
  text-align:center;
}

.note{
  text-align:center;
  color:#777;
  margin:30px 0;
}