/* ================================
   Platinum Edition – Elegant Silver Glow
   ================================ */

/* 全体設定：基本の背景色、フォントなど */
body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif; /* フォント設定 */
  background-color: #f9f9fb; /* 柔らかい白銀トーン */
  color: #333; /* 基本文字色 */
  line-height: 1.6;
  display: flex;
  justify-content: center;
  padding: 20px;
  animation: backgroundShine 12s ease-in-out infinite alternate;
}

/* 柔らかく光る背景 */
@keyframes backgroundShine {
  0% { background-color: #f7f7f9; }
  50% { background-color: #f0f0f3; }
  100% { background-color: #fafafa; }
}

/* コンテナ */
.container {
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(160, 160, 160, 0.25);
  overflow: hidden;
  animation: fadeIn 1.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ヘッダー */
.header {
  background: linear-gradient(45deg, #dcdcdc, #c0c0c0, #e6e6e6);
  background-size: 200% 200%;
  animation: metallicFlow 8s linear infinite;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  padding: 20px;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 3px solid #e0e0e0;
}

@keyframes metallicFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 画像枠 */
.image-wrapper {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: #f5f5f7;
}
.image-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  border-bottom: 5px solid #e6e6e6;
}

/* コンテンツ */
.content {
  padding: 20px;
}

.content p {
  font-size: 1rem;
  color: #555;
  text-align: center;
  margin-bottom: 20px;
}

/* 音声プレーヤー */
audio {
  width: 100%;
  margin-top: 20px;
  border-radius: 5px;
  outline: none;
  background: #f0f0f3;
}

/* ペット情報テーブル */
.pet-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pet-info-table th {
  background: linear-gradient(45deg, #d9d9d9, #eaeaea);
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}

.pet-info-table td {
  background-color: #fff;
  font-size: 1rem;
  color: #444;
}

.pet-info-table th,
.pet-info-table td {
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d0d0d0;
  padding: 10px;
}

.pet-info-table tr:nth-child(even) td {
  background-color: #f7f7f7;
}

/* ログインボタン */
.login-button {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.login-button button {
  background: linear-gradient(45deg, #c0c0c0, #e6e6e6, #dcdcdc);
  background-size: 200% 200%;
  animation: metallicFlow 10s linear infinite;
  color: #333;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(100, 100, 100, 0.3);
  transition: all 0.3s ease;
}

.login-button button:hover {
  background-position: 100% 0;
  color: #000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ログインフォーム */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
}

.form-group label {
  font-size: 1rem;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: #fafafa;
  transition: border-color 0.3s ease;
}
.form-group input:focus {
  border-color: #b0b0b0;
}

/* ✅ パスワードリンク修正版 */
.forgot-password {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px; /* 下部との整合性を確保 */
}

.forgot-password a {
  color: #555;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.forgot-password a:hover {
  color: #888;
  text-decoration: underline;
}

/* ✅ パスワード変更リンク修正版 */
.change-password {
  text-align: center;
  margin-top: 10px;
}
.change-password a {
  color: #555;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.change-password a:hover {
  color: #888;
  text-decoration: underline;
}

/* 編集ボタン */
.edit-link {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(45deg, #c0c0c0, #e0e0e0);
  color: #333;
  text-decoration: none;
  border-radius: 25px;
  font-size: 1rem;
  text-align: center;
  transition: background 0.3s ease;
}
.edit-link:hover {
  background: linear-gradient(45deg, #e6e6e6, #bfbfbf);
}

/* 編集テーブル */
.edit-table,
.pet-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.edit-table th,
.pet-info-table th {
  background-color: #e0e0e0;
  padding: 10px;
  text-align: left;
}

.edit-table td,
.pet-info-table td {
  padding: 10px;
  border: 1px solid #d0d0d0;
}

.edit-table th,
.edit-table td {
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
  overflow: hidden;
}

/* 汎用ボタン */
button {
  background: linear-gradient(45deg, #c0c0c0, #e6e6e6);
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(150, 150, 150, 0.3);
  transition: all 0.3s ease;
}

button:hover {
  background: linear-gradient(45deg, #e6e6e6, #bfbfbf);
  color: #000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* フッター */
.footer {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  padding: 10px 0;
  background-color: #f5f5f7;
  border-top: 2px solid #e0e0e0;
}

/* 小さな画面用レスポンシブ設定 */
@media (max-width: 768px) {
  .header {
    font-size: 1.5rem;
    padding: 15px;
  }
  .content p {
    font-size: 0.9rem;
  }
  .pet-info-table th,
  .pet-info-table td {
    font-size: 0.9rem;
  }
  .login-form .login-button button {
    max-width: 100%;
  }
}