/* 공개 페이지 공용 상단바 — landing/guide/blog/pricing 이 함께 쓴다.
   마크업은 public_nav.js 가 주입한다. 페이지 로컬에 네비를 다시 만들지 말 것. */

.gf-pubnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.gf-pubnav-inner {
  display: flex; align-items: center; height: 64px;
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.gf-pubnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.gf-pubnav-brand .logo-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--primary-action);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.gf-pubnav-brand .logo-mark svg { width: 20px; height: 20px; }
.gf-pubnav-brand .name { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.gf-pubnav-brand .name span { color: var(--primary); }

.gf-pubnav-links { display: flex; align-items: center; gap: 22px; margin-left: 32px; margin-right: auto; }
.gf-pubnav-links a {
  font-size: 15px; font-weight: 500; color: var(--text-sub); text-decoration: none;
  white-space: nowrap;   /* 항목이 늘어도 '사용설명 / 서' 로 접히지 않게 */
  transition: color var(--transition);
}
.gf-pubnav-links a:hover { color: var(--text); }
.gf-pubnav-links a.active { color: var(--primary); font-weight: 700; }

.gf-pubnav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gf-pubnav-toggle, .gf-pubnav-mobile-menu { display: none; }

@media (max-width: 760px) {
  .gf-pubnav-inner { height: 60px; padding: 0 14px; gap: 8px; }
  .gf-pubnav-brand { gap: 8px; }
  .gf-pubnav-brand .logo-mark { width: 32px; height: 32px; }
  .gf-pubnav-brand .logo-mark svg { width: 18px; height: 18px; }
  .gf-pubnav-brand .name { display: inline; font-size: 17px; }
  .gf-pubnav-links { display: none; }
  .gf-pubnav-actions { margin-left: auto; }
  .gf-pubnav-actions .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .gf-pubnav-actions .btn-ghost { display: none; }

  .gf-pubnav-toggle {
    width: 40px; height: 40px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text); background: transparent; border: 0;
    border-radius: var(--radius-sm); cursor: pointer;
  }
  .gf-pubnav-toggle:hover { background: var(--hover); }
  .gf-pubnav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .gf-pubnav-toggle svg { width: 22px; height: 22px; }
  .gf-pubnav-toggle .close-ic { display: none; }
  .gf-pubnav-toggle[aria-expanded="true"] .menu-ic { display: none; }
  .gf-pubnav-toggle[aria-expanded="true"] .close-ic { display: block; }

  .gf-pubnav-mobile-menu {
    display: block; position: absolute; left: 0; right: 0; top: 60px;
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    background: var(--card); border-bottom: 1px solid var(--border);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
  }
  .gf-pubnav-mobile-menu.is-open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  .gf-pubnav-mobile-menu-inner { padding: 10px 16px 16px; }
  .gf-pubnav-mobile-menu-inner > a,
  .gf-pubnav-mobile-account > a {
    min-height: 48px; display: flex; align-items: center;
    font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .gf-pubnav-mobile-menu-inner > a.active { color: var(--primary); }
  .gf-pubnav-mobile-account { display: block; margin-top: 8px; }
  .gf-pubnav-mobile-account > a { color: var(--text-sub); border-bottom: 0; }
}