/*
 * Compact navigation for tablet / mobile (all 12 pages: Home + secondary, KO + EN).
 * Desktop (> 960px) is untouched: the toggle is hidden and the existing header layout applies.
 * The collapsed state only exists when site-nav.js has marked the document (html.nav-js),
 * so without JavaScript the full menu simply stays visible as a stacked list.
 */
.nav-toggle{display:none;appearance:none;-webkit-appearance:none;background:transparent;color:inherit;border:1px solid var(--ink);border-radius:0;min-height:44px;padding:0 14px;font:800 13px/1 Arial,Helvetica,"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;letter-spacing:0;cursor:pointer;align-items:center;gap:10px;white-space:nowrap}
.nav-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.nav-toggle-bars{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.nav-here{display:none}

@media (max-width:960px){
  html header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;min-height:0;padding:12px 0;position:relative}
  html header .brand{flex:0 0 auto}
  html header .header-link{display:none}
  html header nav{flex:0 0 100%;order:3;width:100%;margin:10px 0 0;padding:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow:visible;border-top:1px solid var(--rule)}
  html header nav a{display:flex;align-items:center;justify-content:flex-start;flex:none;min-height:48px;padding:0 4px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.3;white-space:nowrap;text-align:left}
  html header nav a[aria-current="page"]{color:var(--accent);font-weight:800;box-shadow:inset 3px 0 0 var(--accent);padding-left:14px;padding-bottom:0}
  html header nav .lang-switch{position:static;display:flex;align-items:center;gap:6px;margin:0;padding:0 4px;height:48px;line-height:1.3;border:0;font-size:14px;white-space:nowrap;color:var(--sub)}
  html header nav .lang-switch a{display:inline;min-height:0;padding:0;border:0;box-shadow:none;font-size:14px}
  html header nav .lang-switch .lang-current{font-weight:800;color:var(--ink)}

  html.nav-js header .nav-toggle{display:inline-flex;margin-left:auto}
  html.nav-js header .nav-here{display:block;margin-left:auto;font:800 13px/1.3 Arial,Helvetica,"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--accent);white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
  html.nav-js header .nav-here + .nav-toggle{margin-left:0}
  html.nav-js header nav{display:none}
  html.nav-js header.nav-open nav{display:flex}
}

/* Language switch: same size for the current language and the link, on every viewport. */
header .lang-switch{font-size:14px;line-height:1.3;white-space:nowrap}
header .lang-switch a,header .lang-switch .lang-current{font-size:inherit;line-height:inherit;letter-spacing:0}