/* どの見た目の上にも重ねる共通の CSS (画像・埋め込み・カード・一覧) */
:root {
  --blog-border: rgba(127, 127, 127, 0.3);
  --blog-muted: rgba(127, 127, 127, 0.9);
  --blog-card-bg: rgba(127, 127, 127, 0.06);
}

.post-content img { max-width: 100%; height: auto; }
.post-content pre.highlight { overflow-x: auto; padding: 0.8em 1em; border-radius: 6px; }
.post-content pre.highlight code { display: block; background: none; padding: 0; white-space: pre; word-break: normal; }
.post-content table { display: block; max-width: 100%; overflow-x: auto; }

/* YouTube: 押すまではサムネイルだけ */
.embed-youtube { margin: 1.5em 0; }
.embed-youtube-link,
.embed-youtube iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: 8px; overflow: hidden; background: #000;
}
.embed-youtube-link img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.embed-youtube-play {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px;
  transform: translate(-50%, -50%); border-radius: 14px; background: rgba(33, 33, 33, 0.8);
}
.embed-youtube-play::after {
  content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff;
}
.embed-youtube-link:hover .embed-youtube-play { background: #f00; }
.embed-youtube figcaption { font-size: 0.85em; color: var(--blog-muted); margin-top: 0.4em; }

/* リンクのカード (GitHub・その他) */
.card-link {
  display: flex; margin: 1.5em 0; border: 1px solid var(--blog-border); border-radius: 8px;
  overflow: hidden; color: inherit; text-decoration: none; background: var(--blog-card-bg);
}
.card-link:hover { border-color: var(--blog-muted); }
.card-link-body { flex: 1; min-width: 0; padding: 0.8em 1em; display: flex; flex-direction: column; gap: 0.3em; }
.card-link-title { font-size: 1em; line-height: 1.4; }
.card-link-desc {
  font-size: 0.85em; color: var(--blog-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-link-site { font-size: 0.8em; color: var(--blog-muted); }
.post-content .card-link-image { width: 30%; max-width: 220px; object-fit: cover; margin: 0; border-radius: 0; }
@media (max-width: 480px) {
  .post-content .card-link-image { display: none; }
}

/* X のポスト */
.card-x {
  margin: 1.5em 0; padding: 0.8em 1em; border: 1px solid var(--blog-border); border-radius: 8px;
  background: var(--blog-card-bg); font-style: normal;
}
.card-x p { margin: 0 0 0.5em; }
.card-x footer { font-size: 0.85em; color: var(--blog-muted); }

/* 一覧 */
.archive-posts { list-style: none; padding-left: 0; }
.archive-entry { margin: 0.4em 0; }
.archive-entry time, .entry-footer time { color: var(--blog-muted); font-size: 0.9em; margin-right: 0.5em; }
.footer-years { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; justify-content: center; margin-bottom: 0.5em; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; padding-left: 0; }
.post-tags li { list-style: none; }
.pagination, .paginav { display: flex; justify-content: space-between; gap: 1em; }
.pagination .next, .paginav .next { margin-left: auto; text-align: right; }