* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { display: flex; min-height: 100dvh; flex-direction: column; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font-family: Pretendard, system-ui, sans-serif; }
#main-content { display: flex; flex: 1 0 auto; flex-direction: column; }
#main-content > :only-child { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.content-width { width: min(var(--content), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%); padding: 12px 16px; background: var(--accent); color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:where(a, button, input, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 767px) { :root { --gutter: 20px; } .content-width { width: calc(100% - 40px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; scroll-behavior: auto; } }