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

/* 🔴 로고 위치 통일 — 스크롤바가 생기는 화면(긴 화면)과 안 생기는 화면(짧은 화면)이 상단바 폭이 15px 달라
   가운데 정렬 컨테이너 안의 로고가 7.5px 가로로 밀렸다(1440 폭 실측 154.5 ↔ 162). 항상 같은 자리를 비워 둔다 (2026-10-19) */
html { scrollbar-gutter: stable; }

/* 옛 휴대폰 전용 메뉴(손으로 쓴 홈)는 쓰지 않는다 — ☰ 하나로 모았다 */
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; }

/* 상단바 행동 규격 — 렌더러·기존 안쪽 화면·접힌 판이 같은 한 벌을 쓴다.
   주 행동의 채움색은 기존 브랜드 규칙을 유지한다. 선택 메뉴의 내부 항목은 제외한다. */
[data-gl-nav-bar], .gl-nav-panel {
  --gl-nav-control-size: 40px;
  --gl-nav-control-radius: 999px;
  --gl-nav-control-gap: 12px;
}
/* 계정 · 구독 · 이용권 · 결제 화면(data-gl-billing · license · shop(계정 메뉴 제외) · download)의 — 주보(data-gl-bulletin)가 있는 화면은 뺀다 · 상단바 누름 영역은 44px — 2026-10-24 출시 감사 고객-UI-1-03. 다른 화면은 그대로 */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) :is([data-gl-nav-bar], .gl-nav-panel) { --gl-nav-control-size: 44px; }
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* 바닥글 링크 — 줄 간격은 그대로 두고 눌림 영역만 위아래로 넓힌다(안쪽 여백 + 음수 바깥 여백) */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) footer a { display: inline-block; padding: 15px 4px; margin: -15px -4px; }
[data-gl-nav-bar] :is([data-gl-nav-actions], .nav-right),
:is([data-gl-nav-bar], .gl-nav-panel) .shop-account-menu .shop-mount {
  display: flex; align-items: center; gap: var(--gl-nav-control-gap);
}
[data-gl-nav-bar] :is(.nav-lang, .nav-mode):empty { display: none; }
/* 메뉴가 상단바와 펼침판 사이를 옮겨도 링크 자체의 누름 영역을 유지한다. */
:is([data-gl-nav-bar] [data-gl-nav], .gl-nav-panel-links) > a {
  display: inline-flex; align-items: center; box-sizing: border-box;
  min-height: 44px; min-width: 44px;
}
:is([data-gl-nav-bar], .gl-nav-panel) :is(.nav-cta, .header-cta, .shop-account-link, .shop-account-cart, .shop-account-avatar, .gl-mode-btn, .gl-nav-btn, .gl-lang) {
  box-sizing: border-box; flex-shrink: 0;
  height: var(--gl-nav-control-size); min-height: var(--gl-nav-control-size);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--gl-nav-control-radius);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; vertical-align: middle;
  transition: background-color .16s, color .16s, border-color .16s;
}
:is([data-gl-nav-bar], .gl-nav-panel) :is(.shop-account-link, .shop-account-cart, .shop-account-avatar, .gl-mode-btn, .gl-nav-btn, .gl-lang) {
  background-color: var(--surface); color: var(--fg-strong);
}
:is([data-gl-nav-bar], .gl-nav-panel) :is(.gl-mode-btn, .gl-nav-btn, .shop-account-avatar) {
  width: var(--gl-nav-control-size); padding: 0;
}
:is([data-gl-nav-bar], .gl-nav-panel) .shop-account-avatar { font-size: 0; gap: 0; }
:is([data-gl-nav-bar], .gl-nav-panel) .gl-lang { padding-right: 28px; }
:is([data-gl-nav-bar], .gl-nav-panel) :is(.nav-cta, .header-cta) { border-color: transparent; }
:is([data-gl-nav-bar], .gl-nav-panel) :is(.shop-account-link, .shop-account-cart, .shop-account-avatar, .gl-mode-btn, .gl-nav-btn, .gl-lang):hover {
  background-color: var(--surface-2); color: var(--fg-strong);
}
:is([data-gl-nav-bar], .gl-nav-panel) :is(.nav-cta, .header-cta):hover { transform: none; }
:is([data-gl-nav-bar], .gl-nav-panel) :is(a, button, select):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
:is([data-gl-nav-bar], .gl-nav-panel) :is(button, select):disabled,
:is([data-gl-nav-bar], .gl-nav-panel) [aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
/* 긴 이름도 메뉴 버튼을 밀어내지 않는다. 원문은 링크의 접근성 이름에 남는다. */
[data-gl-nav-bar] > :is(.logo-mark, .logo) {
  flex-shrink: 1; min-width: 0; max-width: calc(100% - 56px);
}
/* CSS mask로 만든 합성 로고도 링크 안에 온전히 들어가야 한다.
   도구 버튼·클릭 영역·원래 로고의 높이는 유지하고 그림만 같은 비율로 맞춘다. */
[data-gl-nav-bar] > .logo-mark.lk .nav-lock {
  transform: scale(var(--gl-nav-logo-scale, 1)); transform-origin: left center;
}
[data-gl-nav-bar] :is(.logo-text, .logo-en) { overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; }
[data-gl-nav-bar] :is(.logo-wide, .ci) { min-width: 0; flex-shrink: 1; }
[data-gl-nav-bar] :is(.logo-wide, .ci) img { max-width: 100%; object-fit: contain; }
.gl-nav-panel .shop-account-menu { min-width: 0; max-width: 100%; }
.gl-nav-panel .shop-account-menu .shop-mount { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.gl-nav-panel .shop-account-link { max-width: 100%; }
/* 모바일 계정 메뉴는 판의 흐름 안에 펼쳐야 왼쪽 화면 밖으로 나가거나 잘리지 않는다. */
.gl-nav-panel .shop-account-user { flex-direction: column; align-items: flex-start; max-width: 100%; }
.gl-nav-panel .shop-account-pop { position: static; margin-top: 8px; min-width: 0; width: 224px; max-width: 100%; box-sizing: border-box; }
.gl-nav-panel .shop-account-who { overflow-wrap: anywhere; }
.gl-nav-panel .shop-account-label { overflow: hidden; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; }
@media (prefers-reduced-motion: reduce) {
  :is([data-gl-nav-bar], .gl-nav-panel) :is(a, button, select) { transition: none; }
}

/* ── ☰ ──────────────────────────────────────────────────────────────
   홈의 .nav-burger 규칙과 같은 모양이다. 안쪽 화면에는 그 규칙이 없어 여기에 둔다.
   보이고 숨는 것은 상태 이름이 정한다 — 폭 조건(980px)으로 정하지 않는다. */
[data-gl-nav-bar] .gl-nav-btn {
  display: none;
  width: var(--gl-nav-control-size); height: var(--gl-nav-control-size); 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]:not(.gl-nav-more) .gl-nav-btn { display: none; }
[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: var(--gl-nav-control-size); height: var(--gl-nav-control-size); }
/* 🔴 선은 글자색으로 긋는다. 종전 --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; }
}

/* 로그인 · 가입 화면의 글자 링크(비밀번호 찾기 · 가입하기 …) — 안쪽 여백 + 같은 크기의 음수 바깥 여백으로 줄 모양은 그대로 두고 눌림 영역만 위아래로 넓힌다 */
[data-gl-shop^="member-"] .shop-mount a:not(.shop-btn):not(.gl-a-btn) { display: inline-block; padding: 15px 4px; margin: -15px -4px; }

/* 좁은 폰(≤480) — 상단바 단추 셋(오류 때는 «계정 확인» 알약까지)이 로고를 덮지 않도록 로고가 먼저 줄어든다(고객 화면) */
@media (max-width: 480px) {
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] > :is(.logo-mark, .logo) { max-width: calc(100% - 214px); }
}
/* 폭 360 이하 — 단추 간격·알약 안쪽 여백을 줄이고 로고가 먼저 줄어든다 */
@media (max-width: 370px) {
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] { column-gap: 4px; --gl-nav-control-gap: 6px; }
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] > :is(.logo-mark, .logo) { max-width: calc(100% - 172px); }
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] .shop-account-link { padding: 0 10px; font-size: 14px; }
}

/* 글자 크기 5단(12·14·16·20·28) — 고객 화면의 공통 상단 링크 · 바닥글 · 로그인 (출시 감사 4차 UI-4-01) */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) :is(.nav-links a, .gl-nav-panel a) { font-size: 14px; }
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) footer :is(.footer-links a) { font-size: 14px; }
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) footer :is(.biz-info, .biz-info *, .footer-bottom, .footer-bottom *) { font-size: 14px; }
[data-gl-shop^="member-"] .shop-auth h2 { font-size: 20px; }
[data-gl-shop^="member-"] .shop-mount .shop-btn { font-size: 16px; }
[data-gl-shop^="member-"] .shop-links, [data-gl-shop^="member-"] .shop-links * { font-size: 14px; }
/* 폭 340 이하 — 단추가 로고와 한 줄에 안 들어가면(오류 때 «계정 확인» 알약) 단추가 아래 줄로 내려간다. 로고는 자르지 않는다 */
@media (max-width: 340px) {
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] { flex-wrap: wrap; row-gap: 8px; }
  body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) [data-gl-nav-bar] > :is(.logo-mark, .logo) { max-width: 100%; flex-shrink: 0; }
}

/* 입력 칸 16px(모바일 확대 방지) · 보조 글자 14px — 출시 감사 5차 UI-5-01 */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) :is(.gl-lic-muted, code) { font-size: 14px; }
/* 열린 ☰ 메뉴 링크 44px (출시 감사 6차 UI-6-02) */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) .gl-nav-panel a { display: flex; align-items: center; min-height: 44px; }
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) .shop-account-who { font-size: 14px; }
[data-gl-shop^="member-"] :is(.shop-field label, .shop-auth-or) { font-size: 14px; }
[data-gl-shop^="member-"] .shop-mount .shop-field label { font-size: 14px; }
body:has([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download]):not(:has([data-gl-bulletin])) .shop-account-menu .shop-account-who span { font-size: 14px; }
/* 로그인 · 가입 카드 — 상단바가 두 줄로 늘어난 만큼(--gl-nav-c 가 잰다 · 한 줄이면 0)만 아래로 민다(출시 감사 6·7차 UI-6-01 · UI-7-03) */
[data-gl-shop^="member-"] { margin-top: max(0px, calc(var(--gl-nav-c, 80px) - 80px)); }
/* 상단 계정 메뉴 항목 44px (출시 감사 7차 UX-7-02) */
body:not(:has([data-gl-bulletin])):has(:is([data-gl-billing], [data-gl-license], [data-gl-shop]:not([data-gl-shop="account-menu"]), [data-gl-download])) .shop-account-pop :is(a, button) { min-height: 44px; display: flex; align-items: center; }

/* 로그인 · 가입 · 비밀번호 재설정 폼의 안내·오류 글자 (출시 감사 10차 UI-10-02) */
[data-gl-shop^="member-"] .shop-mount :is(.shop-msg, .shop-form-msg) { font-size: 16px; }
[data-gl-shop^="member-"] .shop-mount :is(.shop-field-err, .shop-field-hint, .shop-auth-foot, .shop-auth-sub, .shop-notice) { font-size: 14px; }
/* 폼 안내·오류 문장은 한글 낱말 중간에서 끊지 않는다 — 끊을 곳이 없을 만큼 긴 낱말만 넘침 방지로 자른다 (출시 감사 11차 UI-11-01) */
[data-gl-shop^="member-"] .shop-mount :is(.shop-msg, .shop-form-msg, .shop-field-err, .shop-field-hint, .shop-auth-sub) { word-break: keep-all; overflow-wrap: break-word; }