:root { --night:#0e0b1f; --night2:#2a1b3d; --dusk:#4b2e4f; --cream:#f3e6cf; --dim:rgba(243,230,207,.8); --amber:#e8a15b; --line:rgba(243,230,207,.14); color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--cream); font:17px/1.7 "IBM Plex Sans KR","IBM Plex Sans JP","Apple SD Gothic Neo","Hiragino Sans",system-ui,sans-serif;
  background: radial-gradient(900px 600px at 85% -10%, rgba(232,161,91,.18), transparent 60%), linear-gradient(180deg,var(--night),var(--night2) 60%,var(--dusk)); background-attachment: fixed; }
main { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
header { display:flex; align-items:center; gap:16px; margin-bottom: 32px; }
header img { width:72px; height:72px; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.4); }
h1 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 40px; margin: 0; line-height: 1.1; }
h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 26px; margin: 40px 0 8px; color: var(--amber); }
h3 { font-size: 18px; margin: 24px 0 4px; }
p, li { color: var(--dim); }
a { color: var(--amber); }
.tag { color: var(--amber); font-size: 15px; margin: 4px 0 0; }
nav { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 24px; font-size: 14px; }
nav a { text-decoration:none; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color: var(--cream); }
nav a.on { background: var(--amber); color: var(--night); border-color: transparent; }
.card { border:1px solid var(--line); border-radius:16px; padding: 4px 22px 16px; background: rgba(26,19,48,.55); margin-top: 20px; }
footer { margin-top: 56px; font-size: 14px; color: var(--dim); border-top: 1px solid var(--line); padding-top: 16px; }