/* The header the inner pages share (더 알아보기, 서비스 안내서, 도입 문의): the wordmark and the page links,
   the same width and spacing on every page, so nothing jumps when moving between them. */
/* Line heights are fixed here so the row measures the same on every page, whatever the page's body line-height. */
html { scrollbar-gutter: stable; }
/* The header is one compact bar, the same at rest and while stuck to the top as the page scrolls
   (site-top.js adds html.top-scrolled for the hairline). */
.top { position: sticky; top: 0; z-index: 10; background: var(--paper); box-shadow: 0 1px 0 transparent; transition: box-shadow 0.2s ease; }
html.top-scrolled .top { box-shadow: 0 1px 0 var(--line, var(--hairline)); }
.top { max-width: 1160px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: normal; }
.top a { text-decoration: none; }
.top .wordmark { font-family: "Noto Serif KR", "AppleMyungjo", serif; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.08em; color: var(--navy); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; line-height: 1.5; }
.site-nav a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.site-nav a:hover { color: var(--ink-strong, var(--ink)); text-decoration: underline; text-underline-offset: 4px; }
.site-nav [aria-current="page"] { color: var(--ink-strong, var(--ink)); font-weight: 600; }
/* The last link shows 로그인 or 마이페이지 by html.signed-in, which a script in <head> sets from the jb_signed_in cookie
   before the first paint, so nothing changes once the page is visible. */
.site-nav .account span { display: inline-block; }
.site-nav .account .in, html.signed-in .site-nav .account .out { display: none; }
html.signed-in .site-nav .account .in { display: inline-block; }
.site-nav .account span::before, .site-nav .account span::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; }
.site-nav .account span::before { font-weight: 400; }
.site-nav .account span::after { font-weight: 600; }
/* Each link reserves the width of both its regular and its bold form (hidden copies below the text), so the row is the
   same width on every page whichever link is the bold current one. */
.site-nav > *::before, .site-nav > *::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; }
.site-nav > *::before { font-weight: 400; }
.site-nav > *::after { font-weight: 600; }
/* Headings and sections jumped to by a link stop below the bar. */
h1, h2, h3, h4, section[id], [id^="schools"] { scroll-margin-top: 64px; }
@media (max-width: 600px) {
  .top { padding: 12px 20px; }
  .site-nav { gap: 4px 14px; font-size: 13px; }
}
@media print { .top { display: none; } }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }