/* assets/css/style.css */

/* 页面统一字体 */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
}

/* 搜索按钮稍微圆角大一点 */
#searchBtn {
    border-radius: 0.5rem; /* 8px */
}

/* 搜索按钮 hover 效果稍微突出 */
#searchBtn:hover {
    opacity: 0.9;
}

/* 结果区域的小动画 */
#resultArea {
    transition: all 0.3s ease;
}

/* 表格内字体稍微小一点，行距紧凑 */
table.table td, table.table th {
    font-size: 0.95rem;
    padding: 0.5rem;
}

/* 让表格标题居中 */
table.table thead th {
    text-align: center;
}

/* 自定义 alert */
.custom-alert {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
}
footer {
    font-size: 0.85rem;
    color: #6c757d; /* Bootstrap muted色 */
}
.bg-gradient-green {
    min-height: 100vh;
    background: linear-gradient(135deg, #f1f5f2, #f1f8e9);
    /* #e8f5e9 是浅草绿，#f1f8e9 是很淡的黄绿色 */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  /* 紫红色文字 */
.text-magenta {
    color: #d81b60 !important;
  }
  
  /* 卡片阴影加美化 */
  .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem; /* 适度圆角 */
  }
  /* 首页查看说明链接美化 */
.explanation-link {
    color: #6c757d; /* 初始浅灰色 */
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .explanation-link:hover {
    color: #198754; /* Bootstrap官方绿色，hover变绿 */
    text-decoration: underline; /* 鼠标移上加个下划线，更明显 */
  }
  .result-text {
    font-weight: bold;
    font-size: 1.5rem;
  }
  
  .katakana-btn, .hiragana-btn {
    min-width: 2.5rem;
    text-align: center;
  }
  .badge {
    font-size: 1rem;
    padding: 0.5em 0.8em;
    background-color: #f8f9fa;
    color: #555;
    border: 1px solid #ccc;
    cursor: default;
  }
  .animate-click {
    transform: scale(0.92);
    transition: transform 0.2s ease;
  }
  .animate-click.active {
    transform: scale(1.0);
  }