:root {
  --bg: #F6F4EF; --card: #FFFFFF; --border: #E4E0D6;
  --ink: #23302C; --ink-soft: #6F7A75; --accent: #2E6B5E; --accent-soft: #E3EEEA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141917; --card: #1D2421; --border: #2C3632;
    --ink: #EEF2EF; --ink-soft: #9AA6A1; --accent: #7CC4B2; --accent-soft: #1F302B;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Noto Sans KR", system-ui, sans-serif;
  line-height: 1.75; -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 72px; }
nav.langs { text-align: right; font-size: 14px; margin-bottom: 24px; }
nav.langs a { color: var(--ink-soft); text-decoration: none; margin-left: 12px; }
nav.langs a[aria-current] { color: var(--accent); font-weight: 600; }
header.hero { text-align: center; padding: 24px 0 8px; }
header.hero img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
header.hero h1 { font-size: 36px; margin: 16px 0 4px; letter-spacing: -0.02em; }
header.hero p { color: var(--ink-soft); margin: 0; font-size: 17px; }
h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.02em; }
.updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 28px; }
h2 { font-size: 20px; margin: 36px 0 10px; }
p, li { font-size: 16px; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.summary {
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 22px; font-size: 17px;
}
.summary strong { color: var(--accent); }
.cards { display: grid; gap: 12px; margin: 28px 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.card b { display: block; font-size: 17px; margin-bottom: 4px; }
.card span { color: var(--ink-soft); font-size: 15px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; }
a { color: var(--accent); }
.links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 28px 0; }
.links a { background: var(--card); border: 1px solid var(--border); border-radius: 999px;
           padding: 10px 18px; text-decoration: none; font-weight: 600; }
footer { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border);
         color: var(--ink-soft); font-size: 14px; text-align: center; }
footer a { color: var(--ink-soft); }