.blog { --prose: #d6e4da; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace; }
.blog.sheet { overflow-wrap: break-word; }
.blog :lang(ko), .blog-editor :lang(ko) {
  font-family: "IBM Plex Sans", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  word-break: keep-all;
}
.blog-hero .button { display: inline-block; }

/* Filters */
.blog-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 40px 0 8px; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-categories a, .blog-categories .is-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.blog-categories small { color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.blog-categories a:hover { border-color: var(--gold-2); color: var(--text); }
.blog-categories a[aria-current="page"] { color: var(--gold); border-color: var(--gold-2); background: var(--panel); }
.blog-categories a[aria-current="page"] small { color: var(--gold); }
.blog-categories .is-empty { border-style: dashed; color: var(--muted); font-weight: 400; opacity: 0.6; cursor: default; }
.blog-filterbar .blog-filters { margin: 0; gap: 6px; }
.blog-filterbar .blog-filters a { padding: 5px 10px; font-size: 12px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 8px; }
.blog-filters a {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}
.blog-filters a:hover { color: var(--text); border-color: var(--gold-2); }
.blog-filters a[aria-current="page"], .blog-filters .blog-tag-active { color: var(--gold); border-color: var(--gold-2); }

/* List */
.blog-list { list-style: none; margin: 16px 0 0; padding: 0; }
.blog-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.blog-item.has-cover { grid-template-columns: minmax(0, 1fr) 180px; align-items: start; }
.blog-item h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.035em; line-height: 1.25; margin: 0 0 8px; }
.blog-item h2 a:hover { color: var(--gold); }
.blog-summary { color: var(--muted); max-width: 46em; margin: 0; }
.blog-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.blog-meta > :first-child:not(.blog-badge) { color: var(--gold); }
.blog-meta .blog-cat {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.blog-meta .blog-cat:hover { border-color: var(--gold-2); color: var(--gold); }
.blog-meta .blog-cat + span { color: var(--muted); }
.blog-head .blog-meta > .blog-cat { color: var(--gold); }
.blog-head .blog-meta .blog-cat + span { color: var(--text); }
.blog-badge {
  padding: 2px 8px;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
}
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; font-size: 13px; }
.blog-tags a { color: var(--muted); }
.blog-tags a:hover { color: var(--gold); }
.blog-empty { margin-top: 32px; }

.blog-pages { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.blog-pages a:last-child { justify-self: end; }
.blog-pages a { color: var(--text); }

/* Detail */
.blog-crumb { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; font-size: 12px; color: var(--muted); }
.blog-crumb a { color: var(--muted); }
.blog-crumb a + a::before { content: "/"; margin-right: 10px; color: var(--line); }
.blog-admin { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; font-size: 13px; }
.blog-admin a { color: var(--gold); }
.blog-file { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12px; color: var(--muted); }
.blog-note { max-width: 40em; margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 14px; }
.blog-note code { font-family: var(--mono, ui-monospace, Consolas, monospace); color: var(--text); }
.blog-editor-note { margin: 0 0 4px; font-size: 13px; }
.blog-head h1 { font-size: clamp(32px, 5vw, 50px); letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 14px; }
.blog-post:lang(ko) h1 { letter-spacing: -0.02em; line-height: 1.3; }
.blog-lede { font-size: 18px; color: var(--text); margin: 0 0 14px; max-width: 40em; }
.blog-head .blog-meta { margin-bottom: 0; }
.blog-head .blog-meta > :first-child { color: var(--text); }
.blog-cover { margin: 28px 0 0; }
.blog-cover img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.blog-cover figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.55; text-align: center; }
.blog-head + .blog-missing-image { margin: 28px 0 0; }
/* hide_title: the title stays in the page for screen readers and search engines. */
.blog-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* theme: the body sits in a themed wrapper (e.g. .kc) with its own stylesheet. */
.blog-detail .blog-themed { margin-top: 36px; }

/* Prose: Markdown output */
.blog-prose { margin-top: 36px; max-width: 70ch; color: var(--prose); font-size: 17px; line-height: 1.75; }
.blog-prose:lang(ko) { font-size: 16.5px; line-height: 1.9; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p, .blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .blog-prose table, .blog-prose figure { margin: 0 0 1.25em; }
.blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4, .blog-prose h5, .blog-prose h6 { color: var(--text); line-height: 1.3; letter-spacing: -0.025em; margin: 2em 0 0.6em; }
.blog-prose h1 { font-size: 1.75em; }
.blog-prose h2 { font-size: 1.45em; }
.blog-prose h3 { font-size: 1.2em; }
.blog-prose h4, .blog-prose h5, .blog-prose h6 { font-size: 1em; }
.blog-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-prose a:hover { color: #ffb199; }
.blog-prose strong, .blog-prose b { color: var(--text); }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: 0.3em; }
.blog-prose li > ul, .blog-prose li > ol { margin: 0.3em 0 0; }
.blog-prose blockquote { padding: 2px 0 2px 18px; border-left: 3px solid var(--gold-2); color: var(--muted); }
.blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-prose figure { margin: 2em 0; }
.blog-prose figure img { display: block; width: 100%; border: 1px solid var(--line); }
.blog-prose figcaption { margin-top: 10px; color: var(--muted); font-size: 0.85em; line-height: 1.55; text-align: center; }
.blog-prose p > img + em, .blog-prose p > img + br + em { display: block; margin-top: 8px; color: var(--muted); font-size: 0.85em; text-align: center; }
.blog-missing-image { padding: 10px 14px; border: 1px dashed var(--gold-2); border-radius: 10px; color: var(--muted); font-size: 13px; }
.blog-prose mark { background: #ff5c3933; color: var(--text); padding: 0 3px; border-radius: 3px; }
.blog-prose code, .blog-prose kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  word-break: break-word;
}
.blog-prose pre {
  max-width: none;
  overflow-x: auto;
  padding: 16px 18px;
  background: #0b100e;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  tab-size: 4;
}
.blog-prose pre code { display: block; padding: 0; border: 0; background: none; font-size: inherit; white-space: pre; word-break: normal; color: #e7f2ea; }
.blog-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.blog-prose th, .blog-prose td { text-align: left; vertical-align: top; padding: 9px 14px; border: 1px solid var(--line); }
.blog-prose th { color: var(--muted); font-weight: 600; background: var(--panel); }
.blog-post .blog-tags { margin-top: 32px; }

.blog-neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.blog-neighbours a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; color: inherit; }
.blog-neighbours a:hover { border-color: var(--gold-2); color: inherit; }
.blog-neighbours a:hover b { color: var(--gold); }
.blog-neighbours .newer { text-align: right; grid-column: 2; }
.blog-neighbours small { color: var(--muted); font-size: 12px; }
.blog-neighbours b { font-weight: 600; line-height: 1.4; }

/* Editor */
.form-page.blog-editor { max-width: 920px; }
.blog-editor h1 { margin-bottom: 12px; }
.blog-editor .form-panel { display: grid; gap: 14px; margin-top: 16px; }
.blog-field { display: grid; gap: 6px; min-width: 0; }
.blog-field label { margin: 0; }
.blog-editor .form-panel input, .blog-editor .form-panel textarea, .blog-editor .form-panel select { margin-bottom: 0; }
.blog-editor input[name="title"] { font-size: 20px; font-weight: 600; padding: 10px 12px; }
.blog-field-row { display: grid; grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1.6fr); gap: 14px; }
.blog-field-row-3 { grid-template-columns: minmax(120px, 0.4fr) minmax(140px, 0.5fr) minmax(0, 1.4fr); }
.blog-editor textarea { resize: vertical; line-height: 1.6; }
.blog-editor textarea.blog-md { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 14px; min-height: 420px; tab-size: 4; }
.blog-tabs { display: flex; align-items: center; gap: 4px; }
.blog-tabs label { margin-right: auto; font-weight: 600; }
.blog-tabs button { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 13px; }
.blog-tabs button[aria-selected="true"] { color: var(--gold); background: var(--bg); border: 1px solid var(--gold-2); }
.blog-preview { min-height: 420px; margin: 0; padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; max-width: none; }
.blog-preview[aria-busy="true"] { opacity: 0.6; }
.blog-editor { --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace; --prose: #d6e4da; }
.blog-more summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.blog-more[open] summary { margin-bottom: 12px; }
.blog-more .blog-field + .blog-field { margin-top: 12px; }
.blog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.blog-actions .button { min-height: 42px; }
.blog-danger { background: #e05a4a; color: #fff; }

@media (max-width: 720px) {
  .blog-item.has-cover { grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; }
  .blog-prose { font-size: 16px; }
  .blog-prose:lang(ko) { font-size: 16px; }
  .blog-neighbours { grid-template-columns: 1fr; }
  .blog-neighbours .newer { grid-column: auto; }
  .blog-field-row { grid-template-columns: 1fr; }
  .form-page.blog-editor { padding-left: 16px; padding-right: 16px; }
  .blog-filters a, .blog-tags a, .blog-categories a { min-height: 36px; display: inline-flex; align-items: center; }
  .blog-filterbar { margin-top: 28px; }
}