/* NEMONE shared product shell — /, /build, /editor */
:root{
  --nm-ink:#26232E;
  --nm-sub:#5C5470;
  --nm-muted:#6E6880;
  --nm-line:#E3DFEC;
  --nm-faint:#EFEBF8;
  --nm-accent:#7A68A6;
  --nm-paper:#FFFFFF;
  --nm-soft:#EFEBF8;
  --nm-butter:#EFEBF8;
  --nm-mint:#EFEBF8;
  --nm-sky:#E6E0F2;
  --nm-nav-height:68px;
}

html{
  scrollbar-gutter:stable;
  scroll-behavior:auto;
}

[data-nm-site-nav]{
  position:sticky;
  top:0;
  z-index:200;
  width:100%;
  height:var(--nm-nav-height);
  min-height:var(--nm-nav-height);
  flex:0 0 auto;
}

.nm-site-nav{
  width:100%;
  height:100%;
  min-height:0;
  box-sizing:border-box;
  border-bottom:1px solid var(--nm-faint);
  background:rgba(252,251,254,.96);
  color:var(--nm-ink);
  font-family:"Archivo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.nm-site-nav__inner{
  width:min(100%,1440px);
  height:100%;
  min-height:0;
  margin:0 auto;
  padding:0 clamp(18px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nm-site-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--nm-ink);
  text-decoration:none;
  flex:0 0 auto;
}

.nm-site-mark{
  width:31px;
  height:31px;
  padding:5px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:3px;
  border-radius:9px;
  background:var(--nm-ink);
  transform:rotate(-1deg);
  box-shadow:0 3px 10px rgba(38,35,46,.12);
}

.nm-site-mark i{display:block;border-radius:2px;background:var(--nm-paper)}
.nm-site-mark i:nth-child(2){background:var(--nm-accent)}

.nm-site-mark--small{
  width:28px;
  height:28px;
  padding:5px;
  border-radius:8px;
}

.nm-site-brand__copy{display:flex;flex-direction:column;line-height:1}
.nm-site-brand__copy strong{font-size:15px;letter-spacing:2px;font-weight:750}
.nm-site-brand__copy small{margin-top:4px;color:var(--nm-muted);font-size:8.5px;letter-spacing:1.55px;font-weight:650}

.nm-site-links{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  padding:4px;
  border:1px solid var(--nm-faint);
  border-radius:12px;
  background:var(--nm-soft);
}
.nm-site-link{
  min-height:40px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--nm-sub);
  text-decoration:none;
  white-space:nowrap;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.1px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}

.nm-site-link[data-route="home"]{min-width:52px}
.nm-site-link[data-route="build"],
.nm-site-link[data-route="editor"]{min-width:90px}

.nm-site-link:hover{color:var(--nm-ink);background:rgba(255,255,255,.72)}
.nm-site-link.is-active{
  color:#fff;
  border-color:var(--nm-ink);
  background:var(--nm-ink);
  font-weight:750;
  box-shadow:inset 0 -3px 0 var(--nm-accent),0 2px 8px rgba(38,35,46,.12);
}
.nm-site-link[data-route="build"]{margin-left:0}
.nm-site-link__short{display:none}

.nm-stagebar{
  width:100%;
  min-height:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--nm-sub);
  font-family:"Archivo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
}

.nm-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:11px;
  white-space:nowrap;
}

.nm-steps span{display:inline-flex;align-items:center;gap:6px}
.nm-steps b{
  display:inline-flex;
  width:21px;
  height:21px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--nm-line);
  border-radius:50%;
  background:#fff;
  color:var(--nm-sub);
  font-size:10px;
}
.nm-steps .on{color:var(--nm-ink);font-weight:750}
.nm-steps .on b{background:var(--nm-ink);color:#fff;border-color:var(--nm-ink);box-shadow:inset 0 -2px 0 var(--nm-accent)}
.nm-steps .done{color:var(--nm-ink)}
.nm-steps .done b{background:var(--nm-soft);border-color:var(--nm-accent)}
.nm-steps i{color:var(--nm-line);font-style:normal}

@media (max-width:720px){
  :root{--nm-nav-height:62px}
  .nm-site-nav__inner{padding-inline:14px;gap:10px}
  .nm-site-brand{gap:8px}
  .nm-site-brand__copy small{display:none}
  .nm-site-brand__copy strong{font-size:13px;letter-spacing:1.45px}
  .nm-site-mark{width:29px;height:29px}
  .nm-site-links{gap:1px;padding:3px}
  .nm-site-link{min-height:36px;padding-inline:10px;font-size:11.5px}
  .nm-site-link[data-route="build"]{margin-left:0}
  .nm-steps{gap:5px;font-size:10.5px}
  .nm-steps b{width:19px;height:19px}
}

@media (max-width:500px){
  .nm-site-nav__inner{padding-inline:10px;gap:6px}
  .nm-site-brand__copy{display:none}
  .nm-site-link{padding-inline:9px}
  .nm-site-link__wide{display:none}
  .nm-site-link__short{display:inline}
}

@media (max-width:360px){
  .nm-site-mark{width:27px;height:27px;border-radius:8px}
  .nm-site-link{padding-inline:7px;font-size:11px}
}