/* 🪶 Neumorphism Katakana Converter Style */

#katakana-converter {
  text-align: center;
  background: #fff8f5;
  border-radius: 1.5rem;
  box-shadow: 10px 10px 20px #e5dcd8, -10px -10px 20px #ffffff;
  padding: 2.5rem;
  margin: 3rem auto;
  max-width: 480px;
  font-family: "Noto Sans JP", sans-serif;
  transition: all 0.3s ease;
}

#katakana-converter:hover {
  box-shadow: 8px 8px 18px #e1d8d3, -8px -8px 18px #fff;
}

#katakana-converter label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.8rem;
  display: block;
}

#katakana-input {
  width: 80%;
  padding: 0.7rem 1rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 1rem;
  text-align: center;
  background: #fff;
  box-shadow: inset 4px 4px 8px #ddd6d1, inset -4px -4px 8px #ffffff;
  margin-bottom: 1.2rem;
  transition: 0.3s ease;
}

#katakana-input:focus {
  outline: none;
  box-shadow: inset 4px 4px 10px #e4c7c3, inset -4px -4px 10px #fff;
}

/* 🟥 Buttons */
#katakana-button, #katakana-copy {
  background: linear-gradient(145deg, #ff4a4a, #e33);
  color: #fff;
  border: none;
  border-radius: 1rem;
  padding: 0.7rem 1.5rem;
  margin: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 4px 4px 8px #d9c9c6, -4px -4px 8px #fff;
  display: inline-block;
}

#katakana-button:hover, #katakana-copy:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 2px 2px 5px #bbb;
}

/* 🈁 Katakana Output */
#katakana-result {
  font-size: 2rem;
  color: #222;
  letter-spacing: 3px;
  font-weight: 700;
  margin: 1.5rem 0;
  text-align: center;
}

/* 📜 Note */
.nij-note {
  color: #666;
  font-size: 0.95rem;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.5;
}

/* 📱 Responsive */
@media (max-width: 480px) {
  #katakana-input { width: 90%; font-size: 1rem; }
  #katakana-button, #katakana-copy { width: 80%; }
}