/* ============================================================
   db.css — 実体ページの部品（競技 /race/ と用具 /gear/ の一覧・詳細で共有。接頭辞 db-）。
   色は gs-shell.css の変数だけ（hex を直書きしない。テーマの正本は design/theme.json）。
   構成: ヒーロー帯 → 節（左バー見出しは main.css の .gs-sec-head）→ 事実表 / カード / 札 / 出典。
   ============================================================ */

/* ---- ヒーロー ---- */
.db-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 2rem 0 1.75rem; }
.db-hero-inner { display: flex; gap: 1.25rem; align-items: flex-start; }
.db-hero-body { flex: 1 1 auto; min-width: 0; }
.db-kicker { font-size: .82rem; color: var(--mute); margin: 0 0 .45rem; font-weight: 700; letter-spacing: .02em; }
.db-kicker a { color: var(--g); text-decoration: none; }
.db-kicker a:hover { text-decoration: underline; }
.db-hero h1 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .5rem; color: var(--ink); line-height: 1.3; }
.db-hero h1 .sub { display: block; font-size: .95rem; font-weight: 600; color: var(--mute); margin-top: .25rem; }
.db-hero .lead { font-size: .97rem; color: var(--mute); line-height: 1.85; margin: .4rem 0 0; max-width: 52em; }
.db-price { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: .6rem 0 0; }
.db-price small { font-size: .78rem; font-weight: 600; color: var(--mute); margin-left: .4rem; }
.db-price .sale { color: var(--s-ink); margin-left: .6rem; }

/* ---- チップ・札 ---- */
.db-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.db-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .72rem; border-radius: 999px; font-size: .8rem;
  font-weight: 700; background: var(--soft); color: var(--g-dark); border: 1px solid var(--line); text-decoration: none; }
a.db-chip:hover { background: var(--g); color: #fff; border-color: var(--g); text-decoration: none; }
.db-chip.is-main { background: var(--g); color: #fff; border-color: var(--g); }
.db-chip[aria-pressed="true"] { background: var(--g); color: #fff; border-color: var(--g); }
.db-chip .n { font-size: .72rem; font-weight: 600; opacity: .8; }
.db-status { display: inline-block; padding: .16rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap;
  background: var(--tint); color: var(--g-dark); border: 1px solid var(--line); }
.db-status.is-on_sale, .db-status.is-sale_scheduled { background: var(--s-soft); color: var(--s-ink); border-color: var(--s-soft); }
.db-status.is-sold_out { background: var(--y-soft); color: var(--y-deep); border-color: var(--y-soft); }
.db-status.is-held { background: var(--soft); color: var(--mute); }
.db-status.is-cancelled { background: var(--card); color: var(--s-ink); border-color: var(--s-ink); text-decoration: line-through; }
.db-cta { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem .5rem 0 0; padding: .55rem 1.1rem; border-radius: 10px;
  background: var(--card); border: 1.5px solid var(--g); color: var(--g-dark); font-weight: 700; font-size: .9rem; text-decoration: none; }
.db-cta:hover { background: var(--g); color: #fff; text-decoration: none; }

/* ---- 節 ---- */
.db-section { margin: 1.75rem auto; }
.db-sec-count { font-size: .82rem; color: var(--mute); font-weight: 600; }
.db-prose { font-size: .95rem; line-height: 1.9; color: var(--ink); max-width: 60em; }
.db-prose p { margin: 0 0 .85rem; }
.db-note { font-size: .86rem; color: var(--mute); line-height: 1.7; margin: .5rem 0 0; }
.db-unofficial { margin: 2rem auto 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
  font-size: .84rem; color: var(--mute); line-height: 1.7; }
.db-unofficial p { margin: 0; }
.db-unofficial p + p { margin-top: .25rem; }
.db-empty { padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--mute); font-size: .9rem; }

/* ---- 事実表（th が項目名）と行列表（thead つき）---- */
.db-table { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin: 0 0 1rem; }
.db-table th, .db-table td { border-bottom: 1px solid var(--line); padding: .55rem .8rem; text-align: left; vertical-align: top; }
.db-table > tbody > tr > th { background: var(--soft); color: var(--g-dark); font-weight: 700; white-space: nowrap; width: 1%; }
.db-table tr:last-child th, .db-table tr:last-child td { border-bottom: none; }
.db-table td .sub { display: block; font-size: .8rem; color: var(--mute); }
.db-matrix { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin: 0 0 .6rem; }
.db-matrix th, .db-matrix td { border-bottom: 1px solid var(--line); padding: .5rem .75rem; text-align: left; }
.db-matrix thead th { background: var(--g); color: #fff; font-weight: 700; font-size: .82rem; }
.db-matrix tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; background: var(--soft); }
.db-matrix td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-matrix tr:last-child th, .db-matrix tr:last-child td { border-bottom: none; }
.db-matrix a { color: var(--g); font-weight: 700; text-decoration: none; }
.db-matrix a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .db-table, .db-matrix { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- カード（一覧）---- */
.db-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.db-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 22px -22px rgba(16,36,43,.4);
  transition: border-color .15s, transform .15s; }
.db-card:hover { border-color: var(--g); transform: translateY(-1px); color: var(--ink); text-decoration: none; }
.db-card.is-soon { opacity: .75; }
.db-card-band { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .95rem;
  background: var(--soft); border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--mute); font-weight: 700; }
.db-card-body { padding: .85rem 1.05rem 1rem; flex: 1 1 auto; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.db-card-title { font-weight: 800; font-size: 1rem; color: var(--g-dark); line-height: 1.4; }
.db-card-sub { font-size: .8rem; color: var(--mute); }
.db-card-meta { font-size: .84rem; color: var(--ink); line-height: 1.6; margin-top: auto; }
.db-card-meta b { color: var(--ink); }
.db-card-price { font-weight: 800; color: var(--ink); }
.db-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.db-card-tags span { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: var(--tint); color: var(--g-dark); font-weight: 700; }

/* ---- 開催回の行（カレンダー・シリーズ）---- */
.db-year-h { margin: 1.4rem 0 .6rem; padding-left: .7rem; border-left: 3px solid var(--brand); font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.db-year-h:first-child { margin-top: 0; }

/* ---- ストアへの送客（app/affiliate/ が組んだ URL だけを描く）---- */
.db-stores { display: flex; flex-wrap: wrap; gap: .6rem; }
.db-store { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  text-decoration: none; background: var(--card); border: 1.5px solid var(--line); color: var(--g-dark); }
.db-store:hover { border-color: var(--g); background: var(--soft); text-decoration: none; }

/* ---- 出典 ---- */
.db-sources { font-size: .82rem; color: var(--mute); padding-left: 1.2em; margin: 0; }
.db-sources li { margin-bottom: .3rem; }
.db-sources a { color: var(--g-dark); }
.db-list { margin: 0; padding-left: 1.2em; font-size: .92rem; line-height: 1.8; }
.db-images { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; }
.db-images img { width: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
@media (max-width: 520px) {
  .db-hero { padding: 1.4rem 0 1.3rem; }
  .db-cards { grid-template-columns: 1fr; }
}