/*
 * single-post.css — ブログ個別記事ページ
 *
 * Base        : structural / shared
 * < 640px     : phone
 * >= 640px    : sm
 * >= 768px    : md
 * >= 1024px   : lg
 */

/* ===== Base ===== */
.single-post__inner { max-width: 100%; margin: 0 auto; background: #fff; border-radius: 10px; border: 1px solid var(--theme-color-grey); }
.single-post__header { border-bottom: 1px solid var(--theme-color-grey); }
.single-post__meta { display: flex; align-items: center; gap: 16px; }
.single-post__title { margin: 0; line-height: 1.5; letter-spacing: .02em; color: var(--theme-color-blue); }
.single-post__thumbnail { overflow: hidden; }
.single-post__thumb-img { width: 100%; height: auto; display: block; object-fit: cover; }
.single-post__content { line-height: 1.9; color: #333; word-break: break-word; }
.single-post__content img { max-width: 100%; height: auto; border-radius: 8px; }
.single-post__content h2 { color: var(--theme-color-blue); border-bottom: 2px solid var(--theme-color-blue); padding-bottom: 8px; }
.single-post__content h3 { color: var(--theme-color-blue); }
.single-post__content a { color: var(--theme-color-blue); text-decoration: underline; }
.single-post__content blockquote { border-left: 4px solid var(--theme-color-blue); background: #f2f7fb; margin: 1em 0; padding: 1em 1.5em; }
.single-post__tags { display: flex; flex-wrap: wrap; border-top: 1px solid var(--theme-color-grey); }
.single-post__tag { color: var(--theme-color-blue); font-weight: 700; text-decoration: none; }
.single-post__tag:hover { text-decoration: underline; }
.single-post__nav { display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--theme-color-grey); }
.single-post__nav-link { color: var(--theme-color-blue); font-weight: 700; text-decoration: none; }
.single-post__nav-link:hover { text-decoration: underline; }

/* ===== Phone (< 640px) ===== */
@media (width < 640px) {
  .single-post__inner { padding: 20px 16px; }
  .single-post__header { padding-bottom: 16px; margin-bottom: 16px; }
  .single-post__meta { font-size: 14px; }
  .single-post__title { font-size: 20px; margin-top: 12px; }
  .single-post__thumbnail { margin-bottom: 20px; border-radius: 8px; }
  .single-post__content { font-size: 15px; padding-bottom: 20px; }
  .single-post__content h2 { font-size: 18px; margin: 28px 0 14px; }
  .single-post__content h3 { font-size: 16px; margin: 24px 0 12px; }
  .single-post__tags { gap: 10px; padding: 16px 0; }
  .single-post__tag { font-size: 14px; }
  .single-post__nav { gap: 20px; padding: 20px 0 0; flex-wrap: wrap; }
  .single-post__nav-link { font-size: 14px; }
}

/* ===== sm (>= 640px) ===== */
@media (width >= 640px) {
  .single-post__inner { padding: 28px 24px; }
  .single-post__header { padding-bottom: 20px; margin-bottom: 20px; }
  .single-post__meta { font-size: 15px; }
  .single-post__title { font-size: 22px; margin-top: 14px; }
  .single-post__thumbnail { margin-bottom: 24px; border-radius: 10px; }
  .single-post__content { font-size: 15px; padding-bottom: 24px; }
  .single-post__content h2 { font-size: 20px; margin: 32px 0 16px; }
  .single-post__content h3 { font-size: 18px; margin: 28px 0 14px; }
  .single-post__tags { gap: 12px; padding: 20px 0; }
  .single-post__tag { font-size: 14px; }
  .single-post__nav { gap: 28px; padding: 24px 0 0; }
  .single-post__nav-link { font-size: 14px; }
}

/* ===== md (>= 768px) ===== */
@media (width >= 768px) {
  .single-post__inner { padding: 36px 32px; }
  .single-post__header { padding-bottom: 24px; margin-bottom: 24px; }
  .single-post__meta { font-size: 16px; }
  .single-post__title { font-size: 24px; margin-top: 16px; }
  .single-post__thumbnail { margin-bottom: 28px; border-radius: 12px; }
  .single-post__content { font-size: 16px; padding-bottom: 28px; }
  .single-post__content h2 { font-size: 22px; margin: 36px 0 18px; }
  .single-post__content h3 { font-size: 19px; margin: 30px 0 14px; }
  .single-post__tags { gap: 14px; padding: 24px 0; }
  .single-post__tag { font-size: 15px; }
  .single-post__nav { gap: 36px; padding: 28px 0 0; }
  .single-post__nav-link { font-size: 15px; }
}

/* ===== lg (>= 1024px) ===== */
@media (width >= 1024px) {
  .single-post__inner { padding: 48px 40px; max-width: 860px; }
  .single-post__header { padding-bottom: 28px; margin-bottom: 28px; }
  .single-post__meta { font-size: 16px; }
  .single-post__title { font-size: 28px; margin-top: 18px; }
  .single-post__thumbnail { margin-bottom: 32px; border-radius: 12px; }
  .single-post__content { font-size: 16px; padding-bottom: 32px; }
  .single-post__content h2 { font-size: 24px; margin: 40px 0 20px; }
  .single-post__content h3 { font-size: 20px; margin: 32px 0 16px; }
  .single-post__tags { gap: 16px; padding: 28px 0; }
  .single-post__tag { font-size: 15px; }
  .single-post__nav { gap: 48px; padding: 32px 0 0; }
  .single-post__nav-link { font-size: 16px; }
}