/* 공통 상단 메뉴 — 모든 페이지에서 사용 (페이지별 스타일보다 나중에 로드) */
.nav{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.nav-in{position:relative;max-width:720px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:18px;height:54px;overflow:visible}
.nav .brand{font-weight:800;color:var(--accent);text-decoration:none;font-size:1.1rem;white-space:nowrap}
.nav-menu{display:flex;align-items:center;gap:18px}
.nav-menu a.m{color:var(--sub);text-decoration:none;font-size:.92rem;white-space:nowrap}
.nav-menu a.m:hover{color:var(--text)}
.nav-menu a.m.on{color:var(--text);font-weight:700}

.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;
  border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:640px){
  .nav-toggle{display:flex}
  .nav-menu{display:none;position:absolute;left:0;right:0;top:54px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.14);padding:4px 0 8px}
  .nav.open .nav-menu{display:flex}
  .nav-menu a.m{padding:14px 20px;font-size:1rem;color:var(--text)}
  .nav-menu a.m + a.m{border-top:1px solid var(--line)}
  .nav-menu a.m.on{color:var(--accent);font-weight:700}
  .nav-menu a.m.on::after{content:" ·  지금 보는 페이지";font-weight:400;font-size:.8rem;color:var(--sub)}
}