:root { color-scheme: light; --ink: #1c2433; --muted: #667085; --line: #e7ebf2; --bg: #f5f7fb; --card: #fff; --accent: #4f46e5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; background: var(--bg); color: var(--ink); }
a { color: inherit; }
.top, .wrap, footer { width: min(920px, calc(100% - 32px)); margin: 0 auto; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.top b { font-size: 16px; }
.top nav { display: flex; gap: 14px; font-size: 14px; font-weight: 700; }
.top nav a { text-decoration: none; color: #3d465c; }
.hero, .grid, .list { margin-bottom: 14px; }
.hero, article, .post { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.hero { padding: 28px 24px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 13px; font-weight: 700; }
h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.03em; }
.hero p, .post p, article p { margin: 0; color: #3d465c; line-height: 1.6; }
.btn { display: inline-block; margin-top: 16px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
article, .post { padding: 16px; }
article h2, .post h2 { margin: 0 0 6px; font-size: 15px; }
.post time { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
footer { padding: 8px 0 28px; color: var(--muted); font-size: 12px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 26px; } }