/* 매거진 블로그 전용 — ki.css 다음에 로드한다.
 *
 * 정본 위치가 api 프로젝트인 이유: /assets/* 를 api 가 서빙하고,
 * 블로그(Astro)는 같은 도메인에서 절대경로로 이 파일을 가져간다.
 * 디자인시스템을 두 벌로 복사하면 반드시 갈라지므로 한 벌만 둔다.
 *
 * ki.css 에 이미 있는 것(.article-grid / .card-art / .longform /
 * .article-content / .toc / .meta)은 여기서 다시 정의하지 않는다.
 * 여기 있는 것은 **마크다운 본문에서만 나오는 요소**와 태그 UI 뿐이다.
 */

/* ── 태그 ─────────────────────────────────────────────── */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.2;
}

.tag-chip:hover { border-color: var(--primary); color: var(--primary); }

/* ── 마크다운 본문 ────────────────────────────────────── */
/* ki.css 의 .article-content 가 문단·제목·목록을 잡고,
 * 여기서는 코드/이미지/인용/표/구분선만 더한다. */

.article-content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 30px 0;
  border: 1px solid var(--border);
}

.article-content figure { margin: 30px 0; }
.article-content figcaption {
  margin-top: 10px;
  color: var(--muted-foreground);
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
}

.article-content code {
  padding: 0.12em 0.36em;
  background: var(--muted);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.88em;
  word-break: break-all;
}

/* 코드블록 — 어두운 판. 본문이 밝은 지면이라 코드가 확실히 구분된다.
 * ⚠️ pre > code 의 인라인 스타일을 반드시 되돌릴 것. 안 그러면
 * 인라인 코드용 배경·테두리가 블록 안 모든 줄에 겹쳐 들어간다. */
.article-content pre {
  margin: 30px 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--foreground);
  color: #e8ecf5;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  -webkit-overflow-scrolling: touch;
}

.article-content pre code {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: inherit;
  word-break: normal;
}

.article-content blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--primary);
  color: var(--foreground);
  font-size: 18px;
  line-height: 1.65;
}

.article-content blockquote p:last-child { margin-bottom: 0; }

.article-content hr {
  margin: 46px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* 표 — 좁은 화면에서 가로 스크롤. 페이지 자체가 밀리면 안 된다. */
.article-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 14px;
}

.article-content th,
.article-content td {
  padding: 11px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

/* ── 글 없음 ──────────────────────────────────────────── */
.empty-state {
  border: 1px dashed var(--border);
  padding: 44px 24px;
  text-align: center;
  color: var(--muted-foreground);
}

.empty-state strong { display: block; margin-bottom: 8px; color: var(--foreground); font-size: 16px; }

/* ── 글 하단 이동 ─────────────────────────────────────── */
.post-nav {
  display: grid;
  gap: 12px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav a {
  display: block;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 16px 18px;
}

.post-nav a:hover { border-color: var(--primary); }
.post-nav span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-foreground);
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-nav strong { font-size: 15px; line-height: 1.45; letter-spacing: -0.015em; }
.post-nav .next { text-align: right; }

@media (max-width: 720px) {
  .article-content pre { padding: 14px 16px; font-size: 12px; }
  .article-content blockquote { font-size: 16px; }
  .article-content img { margin: 22px 0; }
}