/**
 * nm-logo.css — neis.me Toolgrid 로고 (공식 스니펫)
 * 원천: "neisme Logo (standalone).html" 디자인 문서의 "복사해서 쓰는 코드" (2026-08-05 반영)
 *
 * 마크업:
 *   <a class="nm-logo" href="https://neis.me/v1">
 *     <span class="nm-grid"><i></i><i></i><i></i><i></i></span>
 *     <span class="nm-word">neis<b>.</b>me</span>
 *   </a>
 *
 * 크기는 .nm-logo 의 font-size 한 줄로 조절.
 * 다크 배경 위에서는 .on-dark 를 추가하거나, data-theme="dark" 조상 아래에 두면 자동 반전.
 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
.nm-logo{--nm-ink:#1F2933; --nm-paper:#F5F3EF;
  --nm-accent:#F0A04B; --nm-accent-text:#D1802A;
  display:inline-flex;align-items:center;gap:.46em;
  font-size:28px;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.nm-grid{display:grid;
  grid-template:1fr 1fr/1fr 1fr;gap:.18em;
  width:1.72em;height:1.72em;
  padding:.36em;box-sizing:border-box;
  background:var(--nm-ink);border-radius:.18em}
.nm-grid i{background:var(--nm-paper);border-radius:.04em}
.nm-grid i:last-child{background:var(--nm-accent)}
.nm-word{font-weight:700;letter-spacing:-.05em;
  color:var(--nm-ink)}
.nm-word b{font-weight:700;color:var(--nm-accent-text)}

/* 다크 배경 */
.nm-logo.on-dark{--nm-ink:#F5F3EF; --nm-paper:#1F2933;
  --nm-accent-text:#F0A04B}
.nm-logo.on-dark .nm-grid{background:var(--nm-ink)}
.nm-logo.on-dark .nm-grid i{background:var(--nm-paper)}
.nm-logo.on-dark .nm-grid i:last-child{
  background:var(--nm-accent)}
.nm-logo.on-dark .nm-word{color:#F5F3EF}

/* 사이트 다크모드 (site-chrome.js 가 data-theme="dark" 를 html 에 박는다) — on-dark 와 동일 반전 */
[data-theme="dark"] .nm-logo{--nm-ink:#F5F3EF; --nm-paper:#1F2933; --nm-accent-text:#F0A04B}
[data-theme="dark"] .nm-logo .nm-grid{background:var(--nm-ink)}
[data-theme="dark"] .nm-logo .nm-grid i{background:var(--nm-paper)}
[data-theme="dark"] .nm-logo .nm-grid i:last-child{background:var(--nm-accent)}
[data-theme="dark"] .nm-logo .nm-word{color:#F5F3EF}

/* 상단 네비/헤더용 크기 프리셋 */
.nm-logo--nav{font-size:19px}
.nm-logo--sm{font-size:15px}