:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  font: 16px/1.7 -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: #1c1b1a;
  background: #fbf3e6;
}
a { color: #7a5b3a; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e3d9c6;
}
.site-nav img { width: 32px; height: 32px; border-radius: 8px; }
.site-nav a { color: inherit; text-decoration: none; font-size: 0.92rem; opacity: 0.7; }
.site-nav a.brand { font-weight: 700; opacity: 1; margin-right: auto; }
.site-nav a:hover { opacity: 1; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 2.2em 0 0.4em; }
.updated { color: #6b6b6b; font-size: 0.9rem; }
.lang { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #d9d5cf; }
ul { padding-left: 1.2em; }
li { margin: 0.3em 0; }

/* home */
.hero { text-align: center; padding: 36px 0 8px; }
.hero img { width: 96px; height: 96px; border-radius: 22px; }
.hero h1 { font-size: 2rem; margin: 18px 0 6px; }
.hero p { color: #5c574f; margin: 0 auto; max-width: 34ch; }
.points { list-style: none; padding: 0; margin: 32px 0; }
.points li { padding: 12px 0; border-top: 1px solid #e3d9c6; }
.points li:last-child { border-bottom: 1px solid #e3d9c6; }
.foot { margin-top: 40px; color: #6b6b6b; font-size: 0.9rem; }

@media (prefers-color-scheme: dark) {
  body { color: #e8e6e3; background: #191817; }
  a { color: #d6b48a; }
  .site-nav, .points li, .points li:last-child, .lang { border-color: #3a372f; }
  .hero p { color: #b8b3a8; }
  .foot, .updated { color: #999; }
}