/* 상단바 — gl-nav.js 가 태블릿을 기본으로 ☰ 에 담고, 넓어지는 만큼 꺼내 놓는다.
 *
 * 🔴 역할 토큰만 쓴다. 홈(style.css)과 안쪽 화면(site.css)이 같은 이름의 토큰을
 *    갖고 있어, 밝은·어두운 화면과 브랜드 색에서 저절로 따라간다.
 * 🔴 상태는 상단바에 붙는 두 이름으로만 가른다.
 *      .gl-nav-collapsed   태블릿 이하 — 메뉴 줄 전체를 감춘다
 *      .gl-nav-more        무엇이든 ☰ 안에 들어갔다 — ☰ 을 보인다
 */

/* 옛 휴대폰 전용 메뉴(손으로 쓴 홈)는 쓰지 않는다 — ☰ 하나로 모았다 */
html.gl-nav-on .mobile-menu { display: none !important; }

/* 한 칸씩 꺼내 놓지 못한 메뉴 */
[data-gl-nav-bar] .gl-nav-off { display: none !important; }
[data-gl-nav-bar].gl-nav-collapsed [data-gl-nav] { display: none !important; }

/* 🔴 접힌 상단바 — 로고는 왼쪽, 남은 아이콘과 ☰ 은 오른쪽에 나란히 (애플처럼).
   안쪽 화면의 상단바는 로고 · 메뉴 · 전화 · 언어 · 밝기가 한 줄에 양끝 맞춤으로 흩어져 있다.
   메뉴 · 전화 · 언어가 ☰ 안으로 들어가자 남은 밝기 아이콘이 상단바 «가운데»에 떴다
   (2026-09-13 소유자 화면 캡처). 메뉴 바로 뒤에 남은 첫 요소를 오른쪽으로 민다 —
   gl-nav.js 는 요소를 복사하지 않고 옮기므로, 이 자리는 늘 상단바에 남은 것 중 첫째다.
   홈 · 에디터로 짠 화면은 오른쪽 묶음 하나가 그 자리라 모양이 그대로다. */
[data-gl-nav-bar].gl-nav-collapsed > [data-gl-nav] + * { margin-left: auto; }
/* 아이콘 사이도 홈과 안쪽 화면이 같게 — 홈의 오른쪽 묶음은 12px, 안쪽 화면 상단바는 16px 였다 */
[data-gl-nav-bar].gl-nav-collapsed { column-gap: 12px; }

/* ── ☰ ──────────────────────────────────────────────────────────────
   홈의 .nav-burger 규칙과 같은 모양이다. 안쪽 화면에는 그 규칙이 없어 여기에 둔다.
   보이고 숨는 것은 상태 이름이 정한다 — 폭 조건(980px)으로 정하지 않는다. */
[data-gl-nav-bar] .gl-nav-btn {
  display: none;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg-strong);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
[data-gl-nav-bar].gl-nav-more .gl-nav-btn { display: inline-flex; }
/* 밝기 아이콘과 ☰ 은 붙어 서므로 한 벌로 보이게 — 크기 · 테두리 · 모양을 맞춘다.
   종전에는 34px 동그라미 옆에 40px 모서리 둥근 네모라 짝이 안 맞았다. 상단바의 다른 것
   (전화 버튼 · 언어 선택 · 밝기)이 모두 동그랗게 끝나 ☰ 도 동그랗게 맞춘다. */
[data-gl-nav-bar].gl-nav-collapsed .gl-mode-btn { width: 40px; height: 40px; }
/* 🔴 선은 글자색으로 긋는다. 종전 --chip(어두운 버튼 바탕)으로 그었더니 어두운 화면에서
   바탕과 거의 같은 색이라 ☰ 이 안 보였다. 홈의 .nav-burger 규칙보다 뒤에 실려 이 색이 이긴다. */
.gl-nav-btn span, .gl-nav-btn span::before, .gl-nav-btn span::after {
  content: ""; display: block; width: 18px; height: 2px;
  background: var(--fg-strong, currentColor); position: relative;
}
.gl-nav-btn span::before { position: absolute; top: -6px; }
.gl-nav-btn span::after { position: absolute; top: 6px; }
.gl-nav-btn:hover, .gl-nav-btn[aria-expanded="true"] { background: var(--surface-2); }
.gl-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 펼침판 ──────────────────────────────────────────────────────── */
.gl-nav-panel {
  position: fixed; z-index: 120;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 96px); overflow: auto;
  padding: 8px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft, 0 20px 60px rgba(0, 0, 0, 0.18));
  display: flex; flex-direction: column;
}
.gl-nav-panel[hidden] { display: none; }

.gl-nav-panel-links { display: flex; flex-direction: column; }
.gl-nav-panel-links a {
  white-space: nowrap; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; color: var(--fg); text-decoration: none;
}
.gl-nav-panel-links a:hover, .gl-nav-panel-links a:focus-visible {
  background: var(--surface-2); color: var(--fg-strong); outline: none;
}
/* 레드팀 M3(2026-09-25) — 굵기 600→700 정리(AI 티) 뒤 보통 링크도 700 이 되어
   지금 위치(현재 위치는 이미 700) 와 굵기로 구분이 안 됐다. 밑줄로 따로 표시한다. */
.gl-nav-panel-links a[aria-current="page"] {
  color: var(--fg-strong); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.gl-nav-panel-links a::after { display: none; }   /* 상단바 밑줄 효과를 판 안에서는 끈다 */

/* 언어 · 밝기 — 메뉴와 줄로 가른다 */
.gl-nav-panel-tools:not(:empty) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 6px; padding: 12px 6px 4px; border-top: 1px solid var(--line);
}
.gl-nav-panel .nav-lang, .gl-nav-panel .nav-mode { display: inline-flex; }

/* 오른쪽 버튼(전화문의 …)은 맨 아래에 넓게 — Vercel · Stripe 가 그렇게 둔다 */
.gl-nav-panel-cta:not(:empty) { padding: 8px 6px 4px; }
.gl-nav-panel-cta .nav-cta, .gl-nav-panel-cta .header-cta {
  display: flex; width: 100%; justify-content: center; box-sizing: border-box;
}
.gl-nav-panel-cta .nav-cta:hover { transform: none; }

/* 휴대폰에서는 판을 좌우로 넓힌다 */
@media (max-width: 560px) {
  .gl-nav-panel { left: 12px; right: 12px !important; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-nav-btn { transition: none; }
}