/* assets/css/nav.css — 공통 네비게이션 */
:root{
  --top-blue:#1976d2;
  --sub-gray:#eceff1;
  --light-blue:#e3f2fd;
}
*{box-sizing:border-box}
.top-nav{position:sticky; top:0; z-index:50; background:var(--top-blue); box-shadow:0 2px 10px rgba(0,0,0,.08)}
.top-nav__inner{max-width:1080px;margin:0 auto;display:flex;gap:.5rem;padding:.75rem 1rem;overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.top-link{color:#e3f2fd;text-decoration:none;padding:.5rem .75rem;border-radius:999px;white-space:nowrap;font-weight:600;opacity:.9}
.top-link:hover{background:rgba(255,255,255,.14)}
.top-link.active{background:#0f4fb3;color:#fff;opacity:1}
.sub-nav{position:sticky; top:48px; z-index:45; background:var(--sub-gray); border-bottom:1px solid #cfd8dc}
@media (min-width:768px){ .sub-nav{top:52px} }
.sub-nav__inner{max-width:1080px;margin:0 auto;display:flex;gap:.5rem;padding:.5rem 1rem;overflow:auto}
.sub-link{color:#263238;text-decoration:none;padding:.4rem .7rem;border-radius:10px;white-space:nowrap;font-weight:600}
.sub-link:hover{background:#dde7ee}
.sub-link.active{background:var(--light-blue); outline:1px solid #bbdefb}
body{scroll-padding-top:110px}

/* FUN VISIBILITY FIX */
@media (min-width: 900px){
  .top-nav__inner{
    flex-wrap: wrap;
    overflow: visible;
  }
}
/* make horizontal scroll affordance on small screens */
.top-nav__inner::-webkit-scrollbar{height:8px}
.top-nav__inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:999px}