/* namedang.net 공통 메뉴 — nav.js 와 짝. 페이지 스타일과 섞이지 않도록 모두 .nd- 로 시작합니다. */
:root{
  --nd-bar:#17161d; --nd-bar-ink:rgba(255,255,255,.66);
  --nd-bg:#fffdf8; --nd-ink:#22212b; --nd-muted:#77748a; --nd-line:#ece6da; --nd-hover:#f4efe4; --nd-on:#fbefe3;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--nd-bg:#1d1c24; --nd-ink:#f2f0fa; --nd-muted:#a4a1b8; --nd-line:#2f2d3a; --nd-hover:#272532; --nd-on:#2e2a3a;}
}
:root[data-theme="dark"]{--nd-bg:#1d1c24; --nd-ink:#f2f0fa; --nd-muted:#a4a1b8; --nd-line:#2f2d3a; --nd-hover:#272532; --nd-on:#2e2a3a;}

.nd-bar,.nd-side{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:0;line-height:1.3;text-align:left}
.nd-bar *,.nd-side *{box-sizing:border-box}
.nd-bar svg,.nd-side svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- 상단 서비스 바 ----------
   z-index를 낮게 둡니다. 각 페이지의 결제창·모달이 이 바를 덮어야 합니다. */
.nd-bar{position:relative;z-index:35;display:flex;align-items:center;gap:4px;height:44px;padding:0 8px;background:var(--nd-bar);color:#fff;font-size:13px;font-weight:600}
.nd-burger{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:10px;background:none;color:#fff;cursor:pointer}
.nd-burger:hover{background:rgba(255,255,255,.1)}
.nd-tabs{flex:1;min-width:0;display:flex;justify-content:center;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nd-tabs::-webkit-scrollbar{display:none}
.nd-tabs a{flex:none;padding:7px 13px;border-radius:99px;color:var(--nd-bar-ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nd-tabs a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nd-tabs a[aria-current="page"]{background:#fff;color:var(--nd-bar)}
.nd-bar :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 햄버거 폭만큼 오른쪽을 비워 탭이 화면 가운데 오게 합니다 */
@media (min-width:640px){.nd-bar::after{content:"";flex:none;width:36px}}
@media (max-width:639px){.nd-tabs{justify-content:flex-start}}

/* ---------- 사이드바 ---------- */
.nd-scrim{position:fixed;inset:0;z-index:2147482500;background:rgba(15,14,20,.45);opacity:0;transition:opacity .25s}
.nd-side{position:fixed;top:0;bottom:0;left:0;z-index:2147483000;width:min(300px,86vw);display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;padding:14px 12px calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--nd-bg);color:var(--nd-ink);box-shadow:8px 0 40px rgba(0,0,0,.18);
  transform:translateX(-104%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.nd-open .nd-scrim{opacity:1}
.nd-open .nd-side{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nd-open,.nd-open body{overflow:hidden}

.nd-side-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 14px;margin-bottom:6px;border-bottom:1px solid var(--nd-line)}
.nd-logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.nd-logo b{display:block;font-size:17px}
.nd-logo small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--nd-muted)}
.nd-x{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--nd-muted);cursor:pointer}
.nd-x:hover{background:var(--nd-hover);color:var(--nd-ink)}

.nd-mk{flex:none;position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--c);color:#fff;
  font:700 16px/1 "Noto Serif KR","Batang",serif;box-shadow:0 2px 8px -3px var(--c)}
.nd-mk::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.4);border-radius:7px}

.nd-gt{margin:14px 8px 6px;font-size:11.5px;font-weight:700;color:var(--nd-muted);letter-spacing:.04em}
.nd-side ul{list-style:none;margin:0;padding:0}
.nd-side li a{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;color:inherit;text-decoration:none;transition:background .15s}
.nd-side li a:hover{background:var(--nd-hover)}
.nd-side li a[aria-current="page"]{background:var(--nd-on)}
.nd-side li a[aria-current="page"] b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:#ef5146;vertical-align:middle}
.nd-tx b{display:block;font-size:15px}
.nd-tx em{display:inline-block;margin-left:4px;padding:2px 6px;border-radius:99px;background:#e8f6ef;color:#1f8a5b;font-size:10.5px;font-style:normal;vertical-align:1px}
.nd-tx small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--nd-muted)}
.nd-side :focus-visible{outline:2px solid #ef5146;outline-offset:2px}

.nd-foot{margin:auto 8px 0;padding-top:18px;font-size:11.5px;line-height:1.6;color:var(--nd-muted)}

@media (prefers-reduced-motion:reduce){.nd-side,.nd-scrim{transition:none!important}}