/* ============================================================
   TOKUマンガ情報 — カスタムCSS
   Bootstrap 5 の上にブランドスタイルを重ねる
   ============================================================ */

/* ------------------------------------------------------------
   デザイントークン
   ------------------------------------------------------------ */
:root {
  --color-primary:       #f97316;  /* ブランドオレンジ */
  --color-primary-dark:  #ea6c0a;  /* ホバー時 */
  --color-sale:          #dc2626;  /* 割引バッジ・赤 */
  --color-points:        #16a34a;  /* ポイント・緑 */
  --color-adult:         #db2777;  /* R18バッジ・ピンク */
  --color-ku-k:          #FF9900;  /* KUバッジ "k" */
  --color-ku-u:          #6b7280;  /* KUバッジ "u" */
  --color-muted:         #9ca3af;  /* 補足テキスト */
  --color-body-bg:       #f9fafb;  /* ページ背景 */
}

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */
body {
  background-color: var(--color-body-bg);
  color: #1f2937;
}

/* Bootstrapのprimaryカラーをブランドオレンジで上書き */
.text-primary   { color: var(--color-primary) !important; }
.bg-primary     { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.nav-pills .nav-link.active {
  background-color: var(--color-primary);
}
.nav-pills .nav-link {
  color: #6b7280;
}
.nav-pills .nav-link:hover {
  color: var(--color-primary);
}
.page-link {
  color: var(--color-primary);
}
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.site-logo {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}
.site-logo:hover { color: var(--color-primary-dark); }

.sort-link {
  color: #9ca3af;
  text-decoration: none;
  font-size: .875rem;
}
.sort-link:hover, .sort-link.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* ------------------------------------------------------------
   書籍カード (.book-card)
   一覧・リスト・シリーズ共通のカードコンポーネント
   ------------------------------------------------------------ */
.book-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .15s;
}
.book-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  color: inherit;
}

/* 表紙画像エリア */
.book-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  overflow: hidden;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.book-card:hover .book-cover img {
  transform: scale(1.05);
}
.book-cover-noimage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: .75rem;
}

/* テキストエリア */
.book-body {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.book-series {
  font-size: .625rem;
  color: var(--color-muted);
  margin-bottom: .1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.book-title {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: .25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book-author {
  font-size: .625rem;
  color: var(--color-muted);
  margin-bottom: .25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.book-price-area {
  margin-top: auto;
  padding-top: .25rem;
}

/* ------------------------------------------------------------
   価格 (.price-*)
   ------------------------------------------------------------ */
.price-current {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-primary);
}
.price-current-lg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}
.price-original {
  font-size: .625rem;
  color: var(--color-muted);
  text-decoration: line-through;
}
.price-points {
  font-size: .625rem;
  color: var(--color-points);
}
.price-points-sm {
  font-size: .75rem;
  color: var(--color-points);
  font-weight: 700;
}
.price-real {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-points);
  padding: .1rem .35rem;
  border-radius: .2rem;
  line-height: 1.4;
}
.price-real-lg {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-points);
  padding: .2rem .5rem;
  border-radius: .25rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   バッジ (.badge-*)
   書籍カバー上に重ねるバッジ群
   ------------------------------------------------------------ */
.badge-discount {
  position: absolute;
  top: .25rem;
  left: .25rem;
  background: var(--color-sale);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  padding: .1rem .25rem;
  border-radius: .2rem;
  line-height: 1.2;
}
.badge-ku {
  position: absolute;
  top: .25rem;
  right: .25rem;
  background: rgba(255,255,255,.88);
  font-size: .5rem;
  font-weight: 700;
  padding: .1rem .25rem;
  border-radius: .2rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.badge-ku .ku-k { color: var(--color-ku-k); }
.badge-ku .ku-u { color: var(--color-ku-u); }

.badge-points {
  position: absolute;
  bottom: .25rem;
  left: .25rem;
  background: var(--color-points);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  padding: .1rem .25rem;
  border-radius: .2rem;
  line-height: 1.2;
}
.badge-r18 {
  position: absolute;
  bottom: .25rem;
  right: .25rem;
  background: var(--color-adult);
  color: #fff;
  font-size: .625rem;
  padding: .1rem .25rem;
  border-radius: .2rem;
  line-height: 1.2;
}

/* ------------------------------------------------------------
   コーナーセクション (.corner-*)
   トップページの横スクロール書籍コーナー
   ------------------------------------------------------------ */
.corner-section { margin-bottom: 2rem; }
.corner-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: .75rem;
}
.corner-deadline {
  font-size: .75rem;
  color: var(--color-sale);
  font-weight: 500;
}
.corner-heading-link {
  color: #1f2937 !important;
  text-decoration: none;
}
.corner-heading-link:hover { color: var(--color-primary); }
.corner-more-btn {
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.corner-more-btn:hover { color: var(--color-primary-dark); }
.corner-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
.corner-row::-webkit-scrollbar { display: none; }

/* コーナー内の書籍カード */
.corner-card {
  flex-shrink: 0;
  width: 10rem;     /* 160px */
}
.corner-card .book-body { padding: .375rem; }
.corner-card .book-title { font-size: .7rem; }
.corner-card .price-current { font-size: .8rem; }

/* 続きを見るボタン */
.corner-more {
  flex-shrink: 0;
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: var(--color-primary);
  text-decoration: none;
  font-size: .625rem;
  text-align: center;
  transition: color .15s;
}
.corner-more:hover { color: var(--color-primary-dark); }
.corner-more-arrow { font-size: 1.5rem; line-height: 1; }

/* ------------------------------------------------------------
   書籍グリッド
   ------------------------------------------------------------ */
.books-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .books-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .books-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .books-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px){ .books-grid { grid-template-columns: repeat(6, 1fr); } }

/* リスト・シリーズページ用（少し幅広） */
.books-grid-narrow {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 576px) { .books-grid-narrow { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .books-grid-narrow { grid-template-columns: repeat(5, 1fr); } }

/* ------------------------------------------------------------
   KU テキストロゴ（書籍詳細ページ）
   ------------------------------------------------------------ */
.ku-logo { letter-spacing: -.01em; }
.ku-logo .ku-k { color: var(--color-ku-k); }
.ku-logo .ku-u { color: var(--color-ku-u); }

/* ------------------------------------------------------------
   シリーズ一覧カード
   ------------------------------------------------------------ */
.series-card { flex-shrink: 0; width: 5rem; text-align: center; }
.series-card img { border-radius: .25rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.series-card.current img { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.series-card.on-sale img { outline: 2px solid #fca87a; outline-offset: 1px; }
.series-card.no-sale img { opacity: .65; }
.series-card.no-sale:hover img { opacity: 1; }

/* ------------------------------------------------------------
   パンくずリスト
   ------------------------------------------------------------ */
.breadcrumb { font-size: .75rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-muted); }

/* ------------------------------------------------------------
   出版社一覧カード
   ------------------------------------------------------------ */
.publisher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: .5rem .75rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
  overflow: hidden;
}
.publisher-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  color: var(--color-primary);
}
.publisher-name {
  font-size: .875rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.publisher-count { font-size: .75rem; color: var(--color-muted); flex-shrink: 0; margin-left: .5rem; }
.publisher-count .on-sale { color: var(--color-primary); font-weight: 700; }

/* ------------------------------------------------------------
   書籍詳細ページ
   ------------------------------------------------------------ */
.book-meta-link:hover { color: var(--color-primary) !important; }

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.footer-link:hover { color: var(--color-primary) !important; }