@font-face { font-family: "Montserrat ExtraBold"; src: url("/fonts/Montserrat-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: block; }
@font-face { font-family: "Montserrat Medium"; src: url("/fonts/Montserrat-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: block; }

:root { color-scheme: light dark; --ink: #111; --muted: #777; --line: #ddd; --page-bg: #fff; --page-ink: #111; --footer-logo-size: 22px; --footer-social-gap: 12px; }
@media (prefers-color-scheme: dark) { :root { --ink: #fff; --muted: #aaa; --line: #333; --page-bg: #000; --page-ink: #fff; } }
@media (max-width: 768px) { :root { --footer-logo-size: 12px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100dvh; background: var(--page-bg); color: var(--ink); font-family: NanumSquare, "Nanum Square", Arial, sans-serif; }
body > main { flex: 1 0 auto; }
a { color: inherit; }
.site-footer { flex-shrink: 0; margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 112px 5vw 72px; color: var(--ink); font-size: var(--footer-logo-size); }
.site-footer .footer-brand { grid-column: 2; transform: translateX(-4px); font-family: "Montserrat ExtraBold", sans-serif; font-weight: 800; }
.site-footer .footer-brand span { margin-left: 4px; font-family: "Montserrat Medium", sans-serif; font-weight: 500; }
.site-footer .social { grid-column: 3; justify-self: start; display: flex; gap: 8px; margin-left: var(--footer-social-gap); }
.site-footer .social a { color: inherit; }
.site-footer .icon { position: relative; display: block; width: 22px; height: 22px; color: var(--ink); }
.site-footer .instagram { border: 2px solid currentColor; border-radius: 6px; }
.site-footer .instagram::before { content: ""; position: absolute; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; top: 5px; left: 5px; }
.site-footer .instagram::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; top: 3px; right: 3px; }
@media (max-width: 768px) { .site-footer { padding: 24px 6vw; } }