@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg-alt: #FFFBF0;
  --panel: #FFFFFF;
  --line: rgba(35, 26, 4, 0.14);
  --teal: #0E8C77;
  --gold: #8A5F27;
  --text: #221B0F;
  --text-mute: #6B6350;
  --text-faint: #8C7F55;
  --font-kr: 'PretendardVariable', 'Pretendard', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-kr);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-kr);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.demo-notice {
  background: #2A2116; color: #F3E7C9; font-size: 12.5px; text-align: center; padding: 9px 16px;
}
.demo-notice b { color: #F6D96C; }

.mini-topbar {
  background: #FFFFFF; border-bottom: 1px solid var(--line);
}
.mini-topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; flex-wrap: wrap; gap: 10px; }
.mini-brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mini-brand .tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; background: var(--gold); color: #fff; padding: 3px 8px; border-radius: 100px; }
.mini-links { display: flex; gap: 16px; font-size: 13px; color: var(--text-mute); }
.mini-links a:hover { color: var(--text); }

.demo-caption { text-align: center; font-size: 13px; color: var(--text-faint); margin: 0 0 20px; }