/* 日本語は欧文より行間を広げた方が読みやすい */
.md-typeset {
  line-height: 1.85;
}

/* 表が多いサイトなので本文幅を少し広く取る */
.md-grid {
  max-width: 1320px;
}

/* 表を詰めて一覧性を上げる */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
  line-height: 1.6;
}

.md-typeset table:not([class]) th {
  white-space: nowrap;
}

/* 見出しの上に余白を足して、区切りを分かりやすく */
.md-typeset h2 {
  margin-top: 2.4em;
  padding-top: 0.4em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* トップページのカード風リンク */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card-grid > a {
  display: block;
  padding: 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .15s, transform .15s;
}

.card-grid > a:hover {
  border-color: var(--md-primary-fg-color);
  transform: translateY(-2px);
}

.card-grid strong {
  display: block;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.35rem;
}

.card-grid span {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

/* 動画埋め込みを16:9で可変に */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin: 1.2rem 0;
  background: var(--md-default-fg-color--lightest);
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 動画未収録のプレースホルダ */
.video-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
  text-align: center;
}