/* ============================================================
   모바일 내비 토글 — 5개 페이지 공용
   ------------------------------------------------------------
   ⚠ 왜 site.css 가 아니라 별도 파일인가:
     index.html · curriculum.html 은 아직 공통 CSS 를 자기 <style> 에 들고 있어
     site.css 를 링크할 수 없다(.wrap·.hero·.btn-s 규칙이 서로 충돌한다).
     토글 규칙을 site.css 에 넣으면 그 두 장에 같은 블록을 복사해야 한다 →
     한 장으로 떼어 5개 페이지가 모두 링크한다. 두 파일이 site.css 로 이관되면
     이 파일을 site.css 안으로 접어 넣는다.

   상태는 button[aria-expanded] «한 곳»에만 둔다 — CSS 가 그 속성을 직접 읽으므로
   class 와 aria 를 이중으로 관리할 필요가 없다. 여닫는 코드는 nav.js.
   색·간격·라운드·그림자는 전부 tokens.css 변수.
   ============================================================ */

/* 데스크톱(861px+): 버튼 없음 — 기존 가로 내비 그대로 */
.navbtn{display:none}
/* nav 밖으로 나온 CTA 가 .topbar nav a 에서 받던 기본값을 잇는다 */
.topbar>.wrap>.btn-s{text-decoration:none;font-size:var(--fs-sm);margin-left:var(--s2)}

@media(max-width:860px){
  .topbar .wrap{gap:var(--s2)}

  .navbtn{display:inline-flex;align-items:center;gap:var(--s2);margin-left:auto;
    padding:9px var(--s3);border:1px solid var(--g15);border-radius:var(--r-pill);
    background:var(--white);color:var(--g70);cursor:pointer;
    font-family:var(--font);font-size:var(--fs-sm);font-weight:var(--fw-semi);
    transition:color var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
  .navbtn::before{content:"☰";font-size:var(--fs-base);line-height:1}
  .navbtn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
  .navbtn[aria-expanded="true"]::before{content:"✕"}
  .navbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* 펼침 패널 — .topbar 가 sticky(=positioned)라 그 아래에 붙는다 */
  .topbar nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:0 var(--s5) var(--s4);
    background:var(--white);border-bottom:1px solid var(--g15);box-shadow:var(--sh-2)}
  .navbtn[aria-expanded="true"]+nav{display:flex}
  .topbar nav a{padding:var(--s4) 0;border-bottom:1px solid var(--g15);font-size:var(--fs-base)}
  .topbar nav a:last-child{border-bottom:none}
  .topbar nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
}

/* 좁은 폭에서는 지점 표기를 접는다 — 로고+메뉴+상담이 한 줄에 남아야 한다 */
@media(max-width:560px){ .topbar .br{display:none} }