/* Pilofy 블로그(/blog) 전용 스타일 — public/styles.css의 :root 디자인 토큰(--paper, --coral 등)을
   그대로 재사용한다(이 파일에서 재정의하지 않음, 반드시 styles.css 다음에 로드될 것). */

.blog { min-height: 60vh; }

/* ---- 언어 스위처 — /blog/(기본 한국어), /blog/{lang}/ 양쪽에서 공용 ---- */
.lang-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 36px; }
.lang-pills__item {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 7px 16px;
}
.lang-pills__item:hover { border-color: var(--coral); color: var(--coral); }
.lang-pills__item.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }
.lang-pills__item.is-active:hover { color: #fff; }

/* ---- 언어별 글 목록 (/blog/, /blog/{lang}/) ---- */
.blog-index h1 { font-size: 30px; font-weight: 800; margin-bottom: 32px; }
.blog-index__list { display: flex; flex-direction: column; gap: 4px; }
.blog-index__item { border-top: 1px solid var(--divider); padding: 24px 0; }
.blog-index__item:last-child { border-bottom: 1px solid var(--divider); }
.blog-index__item h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.blog-index__item p { color: var(--muted); font-size: 15px; margin-bottom: 10px; max-width: 60ch; }
.blog-index__item time { color: var(--muted); font-size: 13px; }
.blog-index__empty { color: var(--muted); font-size: 15px; }

/* ---- 글 상세 (/blog/{lang}/{slug}/) ---- */
.post { max-width: 720px; }
.post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--muted);
}
.post__back { font-weight: 600; }
.post__back:hover { color: var(--coral); }
.post__title { font-size: 32px; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
.post__lead { font-size: 17px; color: var(--muted); margin-bottom: 32px; }
.post__hero { width: 100%; border-radius: 16px; margin-bottom: 32px; }
.post__body { font-size: 16px; line-height: 1.85; }
.post__body p { margin-bottom: 18px; color: var(--fg); }
.post__body h2 { font-size: 22px; font-weight: 800; margin: 40px 0 16px; }
.post__body h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; }
.post__body ul, .post__body ol { padding-left: 22px; margin-bottom: 18px; }
.post__body li { margin-bottom: 8px; color: var(--fg); }
.post__body a { color: var(--coral); border-bottom: 1px solid var(--coral-tint); }
.post__body img { border-radius: 16px; margin: 24px 0; }
.post__langs { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--divider); }
.post__langs-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.post__langs-list { display: flex; flex-wrap: wrap; gap: 8px; }
.post__langs-list a {
  font-size: 13.5px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 6px 14px;
}
.post__langs-list a:hover { border-color: var(--coral); color: var(--coral); }

@media (max-width: 480px) {
  .post__title { font-size: 26px; }
}