:root{
  --surface:#FFFFFF; --surface-sub:#F5F6F8; --line:#E5E7EB;
  --ink:#111111; --ink-sub:#3A3D42; --ink-muted:#6B7079;
  --brand:#E0114F; --brand-strong:#B80C40; --brand-soft:#FFE8EE; --on-brand:#FFFFFF;
  --radius-md:8px; --radius-lg:12px;
  --sans:Pretendard,"Noto Sans KR",-apple-system,system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--surface-sub);color:var(--ink);margin:0}
body{font-family:var(--sans);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 40px;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}
.logo{font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo span{color:var(--brand)}
.play{background:var(--brand);color:var(--on-brand);text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:var(--radius-md)}
article{background:var(--surface);border-radius:var(--radius-lg);padding:24px 20px;line-height:1.7;font-size:15px;color:var(--ink-sub)}
article h1{font-size:26px;line-height:1.25;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em;text-wrap:balance}
article h2{font-size:18px;color:var(--ink);margin:28px 0 6px;letter-spacing:-.01em}
article p,article ul{margin:0 0 12px;max-width:65ch}
article li{margin-bottom:6px}
article a{color:var(--brand-strong)}
.updated{font-size:13px;color:var(--ink-muted)}
.tip{background:var(--brand-soft);border-radius:var(--radius-md);padding:12px 14px;color:var(--ink)}
footer{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:13px;color:var(--ink-muted);padding-top:8px}
footer a{color:var(--ink-muted)}