/* 表形式のスタイル */
.book-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
}

.book-table th,
.book-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.book-table th {
  background-color: #3498db;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

.book-table td {
  border-left: 1px solid #000;
}

.book-table th:hover {
  background-color: #2980b9;
}

.book-table th.sort-asc::after {
  content: ' \2191';
}

.book-table th.sort-desc::after {
  content: ' \2193';
}

/* ゼブラストライプの行スタイル */
.book-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.book-table tr:hover {
  background-color: #e3f2fd;
}

/* 検索関連のスタイル */
.search-bar {
  margin-bottom: 20px;
  position: relative;
}

#searchInput {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.search-count {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

/* 検索結果のハイライト */
.highlight {
  background-color: #ffff99;
  font-weight: bold;
}

/* カテゴリラベルのスタイル（説明文の下に表示） */
.category-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.category-label {
  font-size: 11px;
  font-weight: normal;
  color: #555;
  background-color: #e8f4fc;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #b6dcf6;
  display: inline-block;
}

/* タイトルとリンクマークのスタイル */
.title-container {
  display: flex;
  align-items: center;
}

.title-link-icon {
  margin-left: 8px;
  color: #2196f3;
  font-size: 14px;
  padding: 3px 5px;
  border-radius: 3px;
  transition: all 0.2s ease;
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
}

.title-link-icon:hover {
  color: #fff;
  background-color: #2196f3;
  border-color: #1e88e5;
}

/* 説明文のスタイル */
.book-description {
  margin-bottom: 4px;
  line-height: 1.5;
}

/* 英語タイトルのスタイル */
.book-english-title {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #666;
  font-style: italic;
}

/* タイトルリンクのスタイル */
.book-link {
  color: #1a73e8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.book-link:hover {
  color: #0d47a1;
  text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .book-table th,
  .book-table td {
    padding: 8px 10px;
  }
  
  .book-table {
    font-size: 14px;
  }
}