/* ══════════════════════════════════════════════════════════════
   공통 상단 메뉴 — 메인·이용방법·요금·FAQ 가 같은 상단바를 쓴다
   왼쪽 로고 · 가운데 메뉴 묶음(현재 페이지는 파란 알약) · 오른쪽 내 문서함/시작하기
   페이지마다 CSS 변수 이름이 달라서 색은 값으로 직접 둔다
   ══════════════════════════════════════════════════════════════ */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(250,250,247,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #E2E8F0;transition:box-shadow .2s;
}
.site-nav.scrolled{box-shadow:0 4px 16px -8px rgba(15,23,42,.12)}
.site-nav-inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.site-nav-brand{justify-self:start;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#0F172A;text-decoration:none}
.site-nav-brand b{color:#2563EB}
.site-nav-brand:hover{text-decoration:none}

.site-nav-menu{
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  background:#fff;border:1px solid #E2E8F0;border-radius:999px;
}
.site-nav-menu a{
  padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;color:#475569;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;
}
.site-nav-menu a:hover{background:#F1F5F9;color:#0F172A;text-decoration:none}
/* 셀프 미리보기 — 그린첵 "보고서 샘플"처럼 다른 메뉴와 구분 (연한 파랑 + 문서 아이콘) */
.site-nav-menu a.site-nav-sample{display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;color:#1E40AF}
.site-nav-menu a.site-nav-sample:hover{background:#DBEAFE;color:#1E40AF}
.site-nav-sample svg{width:14px;height:14px;flex:none}
.site-nav-menu a.is-active{background:#2563EB;color:#fff}

.site-nav-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.site-nav-ghost,.site-nav-cta{
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;
}
.site-nav-ghost{background:#fff;border:1px solid #E2E8F0;color:#334155}
.site-nav-ghost:hover{border-color:#2563EB;color:#2563EB;text-decoration:none}
.site-nav-cta{background:#2563EB;border:1px solid #2563EB;color:#fff}
.site-nav-cta:hover{background:#1D4ED8;border-color:#1D4ED8;color:#fff;text-decoration:none}

/* 좁은 화면 — 로고·버튼 한 줄, 메뉴 묶음은 아랫줄 가운데 */
@media (max-width:720px){
  .site-nav-inner{grid-template-columns:1fr auto;padding:10px 16px;row-gap:10px}
  .site-nav-menu{grid-column:1/-1;grid-row:2;justify-self:center}
  .site-nav-menu a{padding:6px 11px;font-size:13px}
  .site-nav-sample svg{width:12px;height:12px}
  .site-nav-ghost,.site-nav-cta{padding:7px 12px;font-size:13px}
}