@charset "utf-8";
/* 데모 페이지 공통 셸 — 상단 바(크라토스 배지) + 각 데모 고유 스타일은 페이지 내부에 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  --k-bg: #0e1017;
  --k-cobalt: #4c6fff;
  --k-amber: #ffb020;
  --ink: #14161a;
  --muted: #6b7385;
  --dim: #9aa3b5;
  --line: #e8eaf0;
  --soft: #f6f7fa;
  --mono: "JetBrains Mono", monospace;
  --body: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  padding-top: 44px;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--k-cobalt); outline-offset: 2px; }

/* 상단 데모 배지 바 */
.kbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 44px;
  z-index: 999;
  background: var(--k-bg);
  color: #edeff5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
}
.kbar-mark {
  width: 20px; height: 20px; border-radius: 5px; flex: none;
  background: linear-gradient(140deg, #4c6fff, #8a5bff);
}
.kbar b { font-weight: 800; letter-spacing: -0.02em; }
.kbar-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--k-amber); border: 1px solid rgba(255,176,32,.4);
  padding: 3px 7px; border-radius: 4px;
}
.kbar-back {
  margin-left: auto; font-size: 12.5px; color: #8b93a7;
  border: 1px solid rgba(255,255,255,.14); padding: 6px 12px; border-radius: 4px;
  transition: .16s;
}
.kbar-back:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.kbar-note { color: #8b93a7; font-size: 12px; }
@media (max-width: 700px) { .kbar-note { display: none; } }

/* 공통 유틸 */
.dwrap { width: min(100% - 32px, 1100px); margin-inline: auto; }
.dnav {
  height: 58px; display: flex; align-items: center; gap: 22px;
  border-bottom: 1px solid var(--line);
}
.dlogo { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.dmenu { display: flex; gap: 18px; margin-left: auto; font-size: 14px; color: var(--muted); }
.dmenu a:hover { color: var(--ink); }
@media (max-width: 620px) { .dmenu { display: none; } }