:root {
  /* Everforest light / dark */
  --bg: #fdf6e3; --fg: #5c6a72; --muted: #829181; --line: #e6e2cc; --accent: #8da101; --code: #f4f0d9;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #2d353b; --fg: #d3c6aa; --muted: #9da9a0; --line: #3d484d; --accent: #a7c080; --code: #343f44; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.8 "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--accent); }
header.site, main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
header.site { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; padding-bottom: 32px; font-size: 15px; }
header.site a { text-decoration: none; }
.brand { font-weight: 700; font-size: 18px; color: var(--fg) !important; letter-spacing: -0.01em; }
main { padding-bottom: 96px; }

.posts { list-style: none; padding: 0; margin: 0; }
.posts li { border-top: 1px solid var(--line); }
.posts a { display: block; padding: 24px 0; color: inherit; text-decoration: none; }
.posts h2 { margin: 0; font-size: 21px; line-height: 1.4; letter-spacing: -0.01em; }
.posts a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.posts p { margin: 6px 0 0; color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
time { color: var(--muted); font-size: 14px; }
.draft { font-size: 12px; font-weight: 600; vertical-align: middle; padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); }
.empty { color: var(--muted); }
.private-note { margin: 0 0 24px; padding: 10px 14px; border: 1px solid var(--line); border-left: 2px solid var(--accent); color: var(--muted); font-size: 14px; }
.tags { font-size: 13px; }
.tags a { color: var(--muted); text-decoration: none; margin-right: 6px; }
.tags a:hover { color: var(--fg); text-decoration: underline; }
.posts li > .tags { display: block; margin: -16px 0 20px; }
.filter { color: var(--muted); font-size: 14px; }
.prose pre code.hljs { background: none; padding: 0; }

article h1 { font-size: 32px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 8px; }
.prose { margin-top: 32px; }
.prose h2 { font-size: 23px; margin: 2em 0 0.5em; }
.prose h3 { font-size: 19px; margin: 1.6em 0 0.4em; }
.prose img { max-width: 100%; }
.prose code { font: 0.88em/1.5 "JetBrains Mono", ui-monospace, monospace; background: var(--code); padding: 2px 5px; }
.prose pre { background: var(--code); padding: 16px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--line); color: var(--muted); }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* code highlighting (same Everforest token colours as the dashboard) */
.hljs-keyword, .hljs-selector-tag, .hljs-meta .hljs-keyword { color: #f85552; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #8da101; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #35a77c; }
.hljs-number, .hljs-literal, .hljs-symbol { color: #df69ba; }
.hljs-built_in, .hljs-type, .hljs-title.class_ { color: #dfa000; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-params { color: #3a94c5; }
.hljs-comment, .hljs-quote { color: #939f91; font-style: italic; }
.hljs-deletion { color: #f85552; }
.hljs-meta { color: #f57d26; }
@media (prefers-color-scheme: dark) {
  .hljs-keyword, .hljs-selector-tag, .hljs-meta .hljs-keyword, .hljs-deletion { color: #e67e80; }
  .hljs-string, .hljs-regexp, .hljs-addition { color: #a7c080; }
  .hljs-title, .hljs-title.function_, .hljs-section { color: #83c092; }
  .hljs-number, .hljs-literal, .hljs-symbol { color: #d699b6; }
  .hljs-built_in, .hljs-type, .hljs-title.class_ { color: #dbbc7f; }
  .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-params { color: #7fbbb3; }
  .hljs-comment, .hljs-quote { color: #859289; }
  .hljs-meta { color: #e69875; }
}


header.site nav { display: flex; gap: 16px; }
header.site nav a { color: var(--muted); }
header.site nav a:hover { color: var(--fg); }