/* ── pages / blog/tag/<주제> — 태그별 글 목록 ──────────────────────
   원본 kowonps.com/en/blog?tag=<주제> 와 같은 구성:
   태그 칩 줄 → 주제 링크 줄 → 태그 이름 + 편수 → 글 카드 그리드.
   히어로·도입문·시술 카드·CTA 는 blog 허브(page-blog.css)를 그대로 쓰고,
   카드도 허브의 .blog-post 규칙을 그대로 쓴다. 이 파일은 목록 머리만 만든다.
   (원본은 쿼리스트링 한 페이지지만 이 빌드는 정적이라 주제별 경로로 나눈다) */

/* 태그 칩 줄은 .blog-cats__tag(page-blog.css)를 그대로 쓰고,
   지금 보고 있는 태그만 눌린 상태로 둔다. */
.blog-cats__tag.is-current{background:var(--brand);color:var(--text-inverse)}

/* 원본의 'Browse by topic' 줄 — 칩과 구분되게 작은 글자 링크 줄로 둔다. */
.blog-tag__topics{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  margin-top:var(--sp-tight);
  font-size:var(--fs-14);line-height:1.6;color:var(--text-tertiary);
}
.blog-tag__topics > span{font-weight:700;color:var(--text-secondary)}
.blog-tag__topics a{color:var(--text-tertiary)}
.blog-tag__topics a:hover{color:var(--brand)}

/* 목록 머리 — 태그 이름 + 편수. blog 허브의 카테고리 머리와 같은 값. */
.blog-tag__head{
  margin-top:var(--sp-block);padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.blog-tag__title{
  font-weight:700;font-size:var(--fs-32);line-height:1.3;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.blog-tag__count{
  margin-top:6px;
  font-weight:500;font-size:var(--fs-16);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);
}
.blog-tag__grid{margin-top:var(--sp-stack)}

/* 카드마다 붙는 태그 칩 — 원본에 있는 요소다. */
.blog-post__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.blog-post__tag{font-size:var(--fs-14)}

/* 허브에서는 카드가 판이지만 여기서는 카드 전체가 글로 가는 링크다. */
.blog-post__card{color:inherit}

/* blog 허브와 같게 1023 이하에서는 1열 가로 카드로 내린다. */
@media (max-width:1023px){
  .blog-tag__grid{grid-template-columns:1fr}
}