/* =============================================================
   MOBILE NAV — shared hamburger drawer for top-level pages
   Everything is gated behind @media(max-width:900px) so desktop
   layout is untouched. The toggle button + drawer are created by
   assets/mobile-nav.js (cloned from the page's own .nav-links /
   .nav-cta), so each page only needs to link this CSS + the JS.
   ============================================================= */

/* Hidden on desktop — only the script reveals it under the breakpoint */
.nav-toggle{display:none}
.mobile-menu{display:none}

@media(max-width:900px){
  /* keep the brand on one line — stop the per-character vertical wrap */
  .nav .brand{font-size:19px}
  .nav .brand span{white-space:nowrap}

  /* the toolbar CTAs move into the drawer */
  .nav-inner > .nav-cta{display:none}

  /* hamburger button */
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;flex:0 0 auto;padding:0 11px;cursor:pointer;
    background:transparent;border:2px solid var(--c-ink);border-radius:12px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{
    display:block;width:100%;height:2.5px;border-radius:2px;background:var(--c-ink);
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* drawer panel */
  .mobile-menu{
    display:flex;flex-direction:column;
    padding:6px var(--gutter) 22px;
    border-top:1px solid color-mix(in srgb,var(--c-ink) 12%,transparent);
    background:color-mix(in srgb,var(--c-cream) 97%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .mobile-menu[hidden]{display:none}

  /* cloned nav links (own classes → immune to the page's .nav-links{display:none}) */
  .mm-links{display:flex;flex-direction:column}
  .mm-links a{
    padding:15px 4px;font-size:17px;font-weight:600;letter-spacing:-.02em;
    color:var(--c-ink);
    border-bottom:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent);
  }

  /* cloned CTA buttons → full-width stack */
  .mm-cta{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .mm-cta a{width:100%;justify-content:center;--h:50px !important;font-size:15px !important}

  /* "프로그램 도입" is a .btn-morph (collapses to an arrow on hover). In the
     drawer keep it a plain labelled pill — no morph, label always shown. */
  .mm-cta .btn-morph,
  .mm-cta .btn-morph:hover,
  .mm-cta .btn-morph:focus-visible{grid-template-columns:1fr;padding:0;text-align:center}
  .mm-cta .btn-morph .lbl,
  .mm-cta .btn-morph:hover .lbl,
  .mm-cta .btn-morph:focus-visible .lbl{opacity:1;transform:none}
  .mm-cta .btn-morph .ico{display:none}
  .mm-cta .btn-morph::before,
  .mm-cta .btn-morph:hover::before,
  .mm-cta .btn-morph:focus-visible::before{height:var(--h)}
}