:root {
    --fg: #1a1a1a;
    --muted: #6b7280;
    --accent: #0b5fff;
    --bg: #ffffff;
    --line: #e5e7eb;
    --soft: #f5f7ff;
    --maxw: 720px;
}

* { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px; padding-bottom: 16px; max-width: 960px;
}
.site-title { font-weight: 700; font-size: 1.25rem; color: var(--fg); }
.site-nav a { margin-left: 20px; color: var(--fg); }

/* Main */
main { padding: 40px 0; min-height: 60vh; }
h1 { font-size: 1.9rem; line-height: 1.4; margin: 0 0 .6em; }
h2 { font-size: 1.4rem; margin: 2em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.lead { color: var(--muted); font-size: 1.05rem; }

.hero { padding: 16px 0 8px; }
.hero h1 { margin-bottom: .2em; }

/* Post list */
.post-meta { color: var(--muted); font-size: .9rem; margin: .3em 0; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-card { padding: 24px 0; border-bottom: 1px solid var(--line); }
.post-card h2, .post-card h3 { margin: .2em 0; }

/* Article */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1.2em; }
.tldr {
    background: var(--soft); border-left: 4px solid var(--accent);
    padding: 12px 16px; margin: 1.5em 0; border-radius: 4px;
}
.content { margin-top: 1.5em; }
.content > * + * { margin-top: 1em; }
.content h2, .content h3 { margin-top: 1.8em; }
.content pre { background: #f6f8fa; padding: 16px; overflow: auto; border-radius: 6px; }
.content code { background: #f6f8fa; padding: .1em .3em; border-radius: 3px; font-size: .9em; }
.content pre code { background: none; padding: 0; }
.content table { border-collapse: collapse; width: 100%; }
.content th, .content td { border: 1px solid var(--line); padding: 8px 12px; }
.content blockquote { border-left: 4px solid var(--line); margin: 1.5em 0; padding-left: 16px; color: var(--muted); }
.content ul, .content ol { padding-left: 1.5em; }

.badge, .tag {
    display: inline-block; font-size: .8rem; background: #f0f0f0; color: var(--fg);
    padding: 2px 10px; border-radius: 999px; margin-right: 6px; margin-bottom: 4px;
}
.post-cats { margin: .8em 0; }
.post-tags { margin-top: 2.5em; }

.pagination { margin-top: 2em; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--line); padding: 24px 0; margin-top: 40px;
    color: var(--muted); font-size: .9rem;
}
.site-footer .container { display: flex; justify-content: space-between; max-width: 960px; }
.site-footer a { color: var(--muted); }

@media (max-width: 600px) {
    .site-header .container { flex-direction: column; gap: 10px; }
    .site-nav a { margin: 0 10px; }
    h1 { font-size: 1.6rem; }
}