/* ☰ 펼침 판 «전체 화면» — 문서 41 구현 순서 35 (navfull · 2026-10-29) · 사이트 설정 site.motion.navfull = "on"

   gl-nav.js 의 펼침 판(.gl-nav-panel · 320px)을 화면 전체로 편다. gl-navfull.js 가 html.gl-navfull-live 를 단 뒤에만 뜻이 있다 —
   스크립트(초점 가두기)가 없으면 종전 판 그대로다.
   · 판은 화면 전체(inset 0)를 덮고 상단바 아래(--gl-navfull-top)부터 메뉴를 크게 세운다. 상단바는 판 위에 떠서 ☰ 이 ✕ 로 바뀐다(닫기)
   · 나타날 때 판은 opacity, 메뉴 줄은 아래에서 차례로 올라온다(transform · opacity 만)
   🔴 gl-nav.js 가 판에 적는 top · right(작은 판 자리)는 여기서 덮는다(!important — 휴대폰 규칙의 right !important 보다 무겁게).
   🔴 색은 역할 토큰만. 움직임 줄이기 — 판은 그대로 전체 화면 · 움직임만 없다. */
:root.gl-navfull-live .gl-nav-panel {
  inset: 0 !important; width: auto; max-height: none; height: 100%;
  z-index: 120; border: 0; border-radius: 0; box-shadow: none;
  padding: calc(var(--gl-navfull-top, 72px) + clamp(16px, 4vh, 48px)) clamp(20px, 6vw, 96px) clamp(24px, 6vh, 64px);
  background: var(--bg); color: var(--fg);
  overflow: auto; overscroll-behavior: contain;
  align-items: stretch; justify-content: flex-start;
}
:root.gl-navfull-live .gl-nav-panel:not([hidden]) { animation: gl-navfull-in 0.28s cubic-bezier(0.2, 0, 0, 1) both; }
:root.gl-navfull-live .gl-nav-panel-links { gap: 2px; }
:root.gl-navfull-live .gl-nav-panel-links a {
  padding: 10px 0; border-radius: 0; white-space: normal;
  font-size: clamp(26px, 5.2vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--fg-strong);
}
:root.gl-navfull-live .gl-nav-panel-links a:hover,
:root.gl-navfull-live .gl-nav-panel-links a:focus-visible { background: transparent; color: var(--accent); }
:root.gl-navfull-live .gl-nav-panel-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:root.gl-navfull-live .gl-nav-panel:not([hidden]) .gl-nav-panel-links > a { animation: gl-navfull-rise 0.42s cubic-bezier(0.2, 0, 0, 1) both; }
:root.gl-navfull-live .gl-nav-panel-links > a:nth-child(2) { animation-delay: 0.04s; }
:root.gl-navfull-live .gl-nav-panel-links > a:nth-child(3) { animation-delay: 0.08s; }
:root.gl-navfull-live .gl-nav-panel-links > a:nth-child(4) { animation-delay: 0.12s; }
:root.gl-navfull-live .gl-nav-panel-links > a:nth-child(5) { animation-delay: 0.16s; }
:root.gl-navfull-live .gl-nav-panel-links > a:nth-child(n+6) { animation-delay: 0.2s; }
:root.gl-navfull-live .gl-nav-panel-tools:not(:empty) { margin-top: clamp(20px, 4vh, 40px); padding: 16px 0 0; justify-content: flex-start; }
:root.gl-navfull-live .gl-nav-panel-cta:not(:empty) { padding: 16px 0 0; max-width: 420px; }

/* 상단바를 판 위로 — ☰ 이 곧 닫기 버튼이다(gl-navfull.js 가 열린 동안 is-navfull-open) */
.is-navfull-open { z-index: 130 !important; }
:root.is-navfull-open { overflow: hidden; }   /* 뒤 본문이 스크롤되지 않게 — scrollbar-gutter: stable(gl-nav.css)이라 폭이 안 흔들린다 */
:root.gl-navfull-live .gl-nav-btn span { transition: background-color 0.2s; }
:root.gl-navfull-live .gl-nav-btn span::before,
:root.gl-navfull-live .gl-nav-btn span::after { transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); }
:root.gl-navfull-live .gl-nav-btn[aria-expanded="true"] span { background: transparent; }
:root.gl-navfull-live .gl-nav-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
:root.gl-navfull-live .gl-nav-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@keyframes gl-navfull-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gl-navfull-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :root.gl-navfull-live .gl-nav-panel:not([hidden]),
  :root.gl-navfull-live .gl-nav-panel:not([hidden]) .gl-nav-panel-links > a { animation: none; }
  :root.gl-navfull-live .gl-nav-btn span,
  :root.gl-navfull-live .gl-nav-btn span::before,
  :root.gl-navfull-live .gl-nav-btn span::after { transition: none; }
}