:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --card: #f5f5f7;
  --accent: #0a66c2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618;
    --fg: #f2f2f2;
    --muted: #a1a1a6;
    --line: #3a3a3c;
    --card: #1f1f22;
    --accent: #6cb4ff;
  }
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 1.5rem 0 .25rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
p { margin: .5rem 0; }
.kind { color: var(--muted); font-size: .9rem; margin: 0; }
.top { display: flex; gap: 16px; font-size: .9rem; }
.top .lang { margin-left: auto; }
h1 .alt { font-weight: normal; font-size: .8em; color: var(--muted); }

.contact { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

.projects { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 12px; }
.projects a { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; }
.projects a:hover, .projects a:focus-visible { border-color: var(--accent); }
.projects h2 { margin: 0; font-size: 1.1rem; }
.projects p { margin: .25rem 0 0; font-size: .95rem; }

.lead { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 .5rem; }
.features { padding-left: 1.2rem; }
.features li { margin: .35rem 0; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: .75rem 0 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.list { list-style: none; padding: 0; margin: .75rem 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.list a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.list a:hover .title, .list a:focus-visible .title { color: var(--accent); }
.list .text { display: flex; flex-direction: column; }
.list .title { font-weight: 600; }
.list .desc { color: var(--muted); font-size: .9rem; }