/* MARK_ING — 공통 햄버거 네비 (라이트 베이지) */
:root {
  --nav-bg: #FAF8F4;
  --nav-bg2: #E9EEEA;
  --nav-ink: #2B2F2D;
  --nav-mu: #6B706E;
  --nav-line: rgba(43, 47, 45, .08);
  --nav-y: #FFFF62;
}

.site-nav-btn {
  position: relative; z-index: 100001;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 8px;
  background: rgba(43, 47, 45, .06); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0; transition: background .2s;
}
.site-nav-btn:hover { background: rgba(43, 47, 45, .1); }
.site-nav-btn span {
  display: block; width: 18px; height: 2px; background: var(--nav-ink); border-radius: 1px;
  transition: transform .25s, opacity .25s;
}
.site-nav-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-btn.open span:nth-child(2) { opacity: 0; }
.site-nav-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav--light .site-nav-btn { background: rgba(43, 47, 45, .06); }
.site-nav--light .site-nav-btn:hover { background: rgba(43, 47, 45, .1); }
.site-nav--light .site-nav-btn span { background: var(--nav-ink); }

/* 노란 탑바 (포트폴리오 · 시연) */
.site-nav--bar .site-nav-btn,
.bar .site-nav-btn { background: rgba(43, 47, 45, .08); }
.site-nav--bar .site-nav-btn:hover,
.bar .site-nav-btn:hover { background: rgba(43, 47, 45, .14); }
.site-nav--bar .site-nav-btn span,
.bar .site-nav-btn span { background: var(--nav-ink); }

.site-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background: rgba(43, 47, 45, .28); backdrop-filter: blur(4px);
}
.site-nav-overlay.open { display: block; animation: navFade .2s ease; }
@keyframes navFade { from{opacity:0} to{opacity:1} }

.site-nav-panel {
  position: absolute; top: 0; left: 0; width: min(280px, 78vw); height: 100%;
  background: var(--nav-bg); border-right: 1px solid var(--nav-line);
  padding: 56px 16px 24px; display: flex; flex-direction: column; gap: 4px;
  animation: navSlide .26s cubic-bezier(.22,1,.36,1);
  box-shadow: 8px 0 32px rgba(43, 47, 45, .06);
}
@keyframes navSlide { from{transform:translateX(-100%)} to{transform:translateX(0)} }

.site-nav-brand {
  font-weight: 800; font-size: 13px; letter-spacing: -.04em;
  color: var(--nav-ink); margin-bottom: 18px; padding: 0 12px 16px;
  border-bottom: 1px solid var(--nav-line);
}

.site-nav-link {
  display: block; padding: 14px 14px; border-radius: 10px;
  text-decoration: none; color: var(--nav-mu);
  font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  transition: background .15s, color .15s;
}
.site-nav-link:hover { background: var(--nav-bg2); color: var(--nav-ink); }
.site-nav-link.active {
  background: var(--nav-y); color: var(--nav-ink);
}

@media (max-width: 640px) {
  .bar-sub { display: none !important; }
  .pf-top .chapters { display: none !important; }
}