:root {
  --bg: #fff; --text: #3d4144; --muted: #646769; --link: #52adc8; --border: #f2f3f3; --mast: #fff; --card: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #252a34; --text: #eaeaea; --muted: #b0b4b8; --link: #74c0e0; --border: #3a3f4a; --mast: #252a34; }
}
:root[data-theme="dark"] { --bg: #252a34; --text: #eaeaea; --muted: #b0b4b8; --link: #74c0e0; --border: #3a3f4a; --mast: #252a34; }

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h2 { font-size: 1.35em; margin: 2em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
h2:first-of-type { margin-top: 0; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.7em; }
li p { margin: 0; }
p { margin: 0 0 1em; }
u { text-decoration: underline; }
.meta { color: var(--muted); }
.tag { color: var(--muted); font-style: italic; }

/* Masthead */
.masthead { border-bottom: 1px solid var(--border); background: var(--mast); position: sticky; top: 0; z-index: 10; }
.masthead .inner { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.masthead .site { font-size: 1.25em; font-weight: 700; color: var(--text); }
.masthead .site:hover { text-decoration: none; }
.masthead nav { display: flex; align-items: center; gap: 1em; }
.masthead nav a { color: var(--muted); }
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--text); text-decoration: none; }
#theme-toggle { background: none; border: 0; cursor: pointer; color: var(--text); font-size: 1.1em; padding: 6px; }

/* Layout */
#main { max-width: 1140px; margin: 0 auto; padding: 2em 16px; display: grid; grid-template-columns: 200px 1fr; gap: 2.5em; }
.sidebar { position: sticky; top: 72px; align-self: start; font-size: 0.85em; }
.sidebar img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; display: block; }
.sidebar h3 { font-size: 1.3em; margin: 0.8em 0 0.2em; }
.sidebar .bio { color: var(--muted); margin: 0 0 0.8em; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin: 0 0 0.45em; display: flex; align-items: center; gap: 0.5em; color: var(--muted); }
.sidebar li a { display: inline-flex; align-items: center; gap: 0.5em; }
.sidebar svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

/* Content */
article { min-width: 0; font-size: 0.95em; }
.page { max-width: 1140px; margin: 0 auto; padding: 2em 16px; font-size: 0.95em; }
details summary { cursor: pointer; color: var(--link); margin-bottom: 0.6em; }
.jc li { font-size: 0.93em; margin-bottom: 0.5em; }

/* Footer */
.footer { max-width: 1140px; margin: 2em auto 0; padding: 1.5em 16px 2em; border-top: 1px solid var(--border); font-size: 0.8em; color: var(--muted); }

@media (max-width: 760px) {
  #main { grid-template-columns: 1fr; gap: 1.5em; }
  .sidebar { position: static; display: flex; flex-wrap: wrap; gap: 0 1.5em; align-items: center; }
  .sidebar img { width: 90px; height: 90px; }
  .sidebar .text { flex: 1; min-width: 160px; }
  .sidebar ul { width: 100%; display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; margin-top: 0.4em; }
}