/* ============================================================
   gnb.css — 사이트 전역 네비게이션(GNB) 헤더 스타일
   출처: header.php <header class="gnb"> 안의 인라인 <style> (41~84행) 전량 verbatim.
   Breakdance 요소 ButlerElements\Butler_Header_Gnb 가 이 클래스(.gnb)를 렌더한다.
   테마가 모든 CSS를 소유한다(BD-ELEMENT-SPEC §1). 요소에는 CSS를 두지 않는다.
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   GNB 가 페이지 전환마다 흔들리던 문제 (2026-08-21 수정)

   원인 — 웹폰트 교체.
     메뉴는 `margin-left:auto` 로 **우측 정렬**이다. 폭이 바뀌면 통째로 밀린다.
     Noto Sans 가 도착하기 전에는 대체 글꼴로 그려지는데, 실측하니 메뉴 전체 폭이
     **41px 좁았다**(대체 517px / 실제 558px). 폰트가 도착하는 순간 메뉴가 41px 튄다.
     페이지를 옮길 때마다 반복되니 "들쑥날쑥" 으로 보인다.

   대책 — 대체 글꼴의 크기를 미리 맞춰 둔다(size-adjust).
     교체 순간의 폭 차이를 줄여 튐을 없앤다. 숨겼다 보여주는 방식은 쓰지 않는다 —
     느린 회선에서 메뉴가 한참 안 보이는 것이 더 나쁘다.
   ⚠ 대체 글꼴 실측치는 macOS 기준이다. 다른 OS 에서는 완전히 0 이 되지는 않는다.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'GNB Fallback';
  src:local('Apple SD Gothic Neo'), local('Malgun Gothic'), local('Helvetica Neue'), local('Arial');
  size-adjust:101.2%;   /* 실측 보정 — local() 이 고른 글꼴 기준으로 다시 잰 값 */
  font-display:swap;
}

/* 스크롤바가 생겼다 사라지며 우측 정렬 메뉴가 밀리는 것도 막는다(Windows 에서 두드러진다) */
/* ⚠ 페이지 전환 때 화면이 번쩍이던 원인 (2026-08-22)
   `html` 에 배경이 없어(투명) 문서가 바뀌는 순간 브라우저 기본색(흰색)이 그대로 비쳤다.
   body 는 #FBFAF8 이지만 **body 가 그려지기 전**의 한 순간이 흰색이었던 것.
   html 에 같은 색을 깔면 그 틈이 사라진다. */
html{background:#FBFAF8;scrollbar-gutter:stable;}

.gnb{position:sticky;top:0;z-index:80;/*lang 기준*/ background:#FBFAF8;border-bottom:1px solid rgba(112,112,112,0.45);font-family:'Noto Sans','Noto Sans KR','GNB Fallback',sans-serif;}
.gnb .gwrap{display:flex;align-items:center;justify-content:flex-start;height:60px;max-width:none;margin:0;padding:0 30px;gap:0;}
.gnb .glogo{display:flex;align-items:center;text-decoration:none;}
.gnb .glogo img{height:22px;width:auto;display:block;aspect-ratio:1538/300;}   /* 원본 비율 — 도착 전에도 자리를 잡아 둔다 */
.gnb nav.gnav{display:flex;gap:0;margin-left:auto;font-size:13px;font-weight:400;letter-spacing:0.03em;text-transform:uppercase;color:#333;}
.gnb .nv{position:relative;padding:0 17px;}
.gnb .nv > a{color:#333;text-decoration:none;padding:20px 0;display:inline-block;}
.gnb .nv > a:hover{color:#111;}
.gnb .nv-t{color:#333;cursor:default;padding:20px 0;display:inline-block;}
.gnb .dp{position:absolute;top:100%;left:50%;transform:translateX(-50%);text-transform:none;background:#FBFAF8;border:1px solid #ECECEC;box-shadow:0 10px 28px rgba(0,0,0,0.07);border-radius:0;padding:8px 0;display:none;min-width:158px;z-index:120;}
.gnb .nv:hover .dp{display:block;}
.gnb .dp a{display:block;padding:8px 20px;font-size:11.5px;font-weight:400;color:#555;text-decoration:none;white-space:nowrap;text-align:left;}
.gnb .dp a:hover{color:#111;background:#F4F4F4;}
.gnb .gglobe{position:relative;margin-left:17px;display:flex;align-items:center;align-self:stretch;}
.gnb .gglobe:hover::before,.gnb .gglobe.open::before{content:'';position:absolute;top:0;bottom:-6px;right:0;width:110px;}
.gnb .gglobe-btn{display:flex;align-items:center;justify-content:center;padding:20px 0;background:none;border:none;outline:none;cursor:pointer;color:#333;}
.gnb .gglobe-btn:focus,.gnb .gglobe-btn:focus-visible{outline:none;}
.gnb .glogin-btn{display:flex;align-items:center;justify-content:center;margin-left:17px;padding:20px 0;background:none;border:none;outline:none;cursor:pointer;color:#333;}
.gnb .glogin-btn:hover{opacity:0.55;}
.gnb .gglobe .gdp{position:absolute;top:100%;right:0;background:#FBFAF8;border:1px solid #EBEBEB;box-shadow:0 10px 24px rgba(0,0,0,0.07);min-width:92px;padding:6px 0;display:none;z-index:130;}
.gnb .gglobe:hover .gdp,.gnb .gglobe.open .gdp{display:block;}
.gnb .gglobe .gdp a{display:block;padding:7px 18px;font-size:12px;letter-spacing:0.06em;color:#555;text-decoration:none;text-align:right;}
.gnb .gglobe .gdp a:hover{color:#111;background:#F4F4F4;}
.gnb .gglobe .gdp a.on{color:#111;font-weight:600;}
.gnb .gmenu-btn{display:none;margin-left:auto;width:40px;height:40px;position:relative;background:none;border:none;cursor:pointer;}
.gnb .gmenu-btn i{position:absolute;left:9px;right:9px;height:1.5px;background:#111;transition:transform .3s ease,opacity .3s ease;}
.gnb .gmenu-btn i:nth-child(1){top:14px;} .gnb .gmenu-btn i:nth-child(2){top:20px;} .gnb .gmenu-btn i:nth-child(3){top:26px;}
body.gm-open .gmenu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.gm-open .gmenu-btn i:nth-child(2){opacity:0;}
body.gm-open .gmenu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.gnb-mobile{position:fixed;inset:0;z-index:190;background:#FBFAF8;padding:84px 28px 40px;overflow-y:auto;display:none;}
body.gm-open .gnb-mobile{display:block;}
body.gm-open{overflow:hidden;}

/* ── 펼침메뉴가 열렸을 때 헤더를 그 위로 올린다 (2026-08-20) ──
   ⚠ 원래는 헤더(z-index 80)가 패널(190) 아래 깔려 **닫기 버튼과 로고가 사라졌다.**
     화면 상단 84px 가 비어 보이던 것도 헤더가 가려진 자리였다. 뒤로가기 말고는
     빠져나갈 방법이 없었다 — 정적 원본도 같은 값이라 원본부터 있던 결함이다.
   햄버거를 X 로 바꾸는 연출(위 34~36행)은 원래 있었고, 이제 그게 실제로 보인다.
   경계선은 지운다 — 헤더와 패널의 배경이 같아 선만 남으면 어색하다.

   ⚠ 헤더 자체(.gnb)의 z-index 를 올려도 소용없다 — 패널(.gnb-mobile)은 헤더의
     **자식**이라 헤더가 만든 쌓임 맥락 안에서 형제인 .gwrap(로고·햄버거)과 겨룬다.
     그래서 막대 쪽을 직접 올린다(z-index 가 먹으려면 position 도 필요하다). */
body.gm-open .gnb{border-bottom-color:transparent;}
/* 배경까지 함께 줘야 한다 — 막대만 올리면 그 뒤로 패널 글자가 그대로 비쳐,
   메뉴를 스크롤할 때 제목이 로고·X 를 통과해 지나간다(실측). */
body.gm-open .gnb .gwrap{position:relative;z-index:200;background:#FBFAF8;}
/* 모바일에서는 헤더의 로그인 아이콘을 아예 두지 않는다.
   같은 기능이 펼침메뉴 하단에 글자와 함께 있고, 아이콘만으로는 무슨 버튼인지 읽히지 않는다.
   (전에는 `body.gm-open` 일 때만 감춰서, 메뉴를 열기 전에는 로고 옆에 남아 있었다) */
@media(max-width:1024px){ .gnb .glogin-btn{display:none;} }

/* ── 메뉴 그룹 ── */
.gnb-mobile .gm-grp{border-bottom:1px solid #E3E3E3;padding:16px 0;}
/* 마지막 그룹의 밑줄은 지운다 — 바로 아래 유틸리티 줄이 자기 윗줄을 갖고 있어
   그대로 두면 선이 두 개로 겹쳐 보인다.
   ⚠ `:last-of-type` 은 쓸 수 없다. 형제 중 마지막 div 는 .gm-foot 이라 엉뚱한 것을 짚는다. */
.gnb-mobile .gm-grp:has(+ .gm-foot){border-bottom:none;}

/* 글자와 구분선 사이 간격을 **모든 행에서 똑같이** 맞춘다 (2026-08-20).

   전에는 세 가지가 섞여 들쭉날쭉했다(실측):
     하위 있는 메뉴  위 16 / 아래 17
     첫 solo         위 15 / 아래  9   ← 비대칭
     나머지 solo     위  8 / 아래  9
   접이식으로 바뀌면서 **모든 행이 대메뉴 한 줄만 보인다** — 구별할 이유가 없어졌다.

   ⚠ 데스크톱 메뉴용 `.gnb .nv-t{padding:20px 0;display:inline-block}`(15행)이 모바일까지
     걸려 solo 제목 한 줄이 64px 를 차지했다. 그것을 되돌리되, 글자 상자 높이가
     하위 있는 행과 어긋나지 않도록 `display:block` 으로 통일한다
     (inline 이면 상자가 31px↔33px 로 갈려 위아래 여백이 2px 씩 틀어진다). */
.gnb-mobile .gm-t.nv-t{padding:0;display:block;}
.gnb-mobile .gm-grp,
.gnb-mobile .gm-solo,
.gnb-mobile .gm-grp:not(.gm-solo) + .gm-solo,
.gnb-mobile .gm-solo + .gm-grp:not(.gm-solo){padding-top:13px;padding-bottom:13px;}

/* ── 대메뉴 제목 — 메인 히어로와 같은 영문 디스플레이 서체 ──
   소메뉴(한글 산세리프 14px)와 서체·크기가 확실히 갈려 계층이 한눈에 읽힌다. */
/* ⚠ 26px 은 로고(높이 22px)와 덩치가 비슷해 로고가 묻혔다. 19px 로 낮춰
   "로고가 크고 메뉴가 그 아래" 라는 위계를 만든다. 자간을 조금 벌려 작아진 만큼 또렷하게. */
.gnb-mobile .gm-t{display:block;font-family:var(--font-heading,'NT Fabulous','Instrument Serif',Georgia,serif);
  font-size:19px;font-weight:400;letter-spacing:0.03em;line-height:1.2;text-transform:uppercase;color:#111;}

/* ── 소메뉴 — 터치 영역을 44px 로 넓힌다(기존 22px 는 누르기 어려웠다) ── */
.gnb-mobile .gm-sub{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
/* 대메뉴와 층을 확실히 가른다. 글자 12px, 행간 1.2.
   항목 사이 간격은 위아래 패딩이 만든다 — 11px → 5.5px 로 절반(2026-08-20). */
.gnb-mobile .gm-sub a{display:block;padding:5.5px 0;font-size:12px;line-height:1.2;color:#555;text-decoration:none;}
/* 소메뉴 묶음의 위·아래 여백만 1.5배 (2026-08-21).
   대메뉴에 너무 붙어 있었고, 마지막 항목과 구분선 사이도 좁았다.
     위  7.5px → 11.5px   아래 19.5px → 29.5px
   ⚠ `.gm-sub` 자체에 패딩을 주면 안 된다. 접힌 상태는 `height:0` 인데
     패딩은 그와 별개로 자리를 차지해 **닫혀도 14px 이 남는다.**
     첫·마지막 항목에 얹으면 그 높이가 소메뉴 안에 포함돼 접힘이 그대로 0 이 된다. */
.gnb-mobile .gm-sub a:first-child{padding-top:9.5px;}
.gnb-mobile .gm-sub a:last-child{padding-bottom:15.5px;}
.gnb-mobile .gm-sub a:active{color:#111;}

/* ── 하단 유틸리티 — 언어(좌) · 로그인(우) 한 선상 ── */
.gnb-mobile .gm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;padding-top:20px;border-top:1px solid #E3E3E3;}
.gnb-mobile .gm-lang{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:0.1em;}
.gnb-mobile .gm-lang a{padding:11px 6px;color:#8a8a8a;text-decoration:none;}
.gnb-mobile .gm-lang a.on{color:#111;font-weight:600;}
.gnb-mobile .gm-login{display:flex;align-items:center;gap:7px;padding:11px 2px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:10px;letter-spacing:0.02em;color:#333;}
.gnb-mobile .gm-login svg{flex:none;}
.gnb-mobile .gm-login:active{opacity:.55;}
@media(max-width:1024px){ .gnb nav.gnav{display:none;} .gnb .gglobe{display:none;} .gnb .gmenu-btn{display:block;} }
@media(min-width:1025px){ .gnb-mobile{display:none !important;} }

/* ============================================================
   모바일 펼침메뉴 — 접이식 · 딥그린 반전 (2026-08-20 확정)

   임시 스위처(zz-menu-styles.php)로 다섯 안을 비교해 **접이식**을 골랐고,
   배경은 다크 안처럼 반전하되 색은 브랜드 딥그린 #186133 을 쓴다.

   접이식이란
     대메뉴만 보이고, 누르면 그 소메뉴만 펼쳐진다(한 번에 하나).
     전체 지도가 한 화면에 들어오는 것이 이 안의 목적이다.
     펼치고 접는 동작은 테마 JS(main.js)가 `.is-open` 클래스로 처리한다.

   ⚠ 패널만 어둡게 하면 그 위의 헤더가 밝은 채로 남아 두 동강 나 보인다.
     헤더 래퍼(.gwrap)·햄버거 선·로고까지 함께 뒤집는다.
   ⚠ 로고는 어두운색 원본이라 그대로 두면 딥그린에 묻는다 → 밝게 뒤집는다.
   ============================================================ */

/* ── 펼침/접힘 ── */
/* ── 열림/닫힘 모션 ──
   `display:none ↔ grid` 는 애니메이션이 안 된다(중간값이 없다).
   그래서 **항상 grid 로 두고 높이를 0 에서 늘린다.** 높이는 항목 수마다 다르므로
   스크립트(main.js)가 실제 높이를 재서 넣는다 — max-height 로 어림잡으면
   항목이 적은 메뉴에서 빈 시간만큼 굼떠 보인다.
   ⚠ overflow:hidden 이 없으면 접힌 상태에서도 글자가 삐져나온다. */
.gnb-mobile .gm-sub{display:grid;grid-template-columns:1fr;
  height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:height .34s cubic-bezier(0.22,0.61,0.36,1),
             opacity .24s ease,
             margin-top .34s cubic-bezier(0.22,0.61,0.36,1);}
.gnb-mobile .gm-grp.is-open .gm-sub{opacity:1;margin-top:2px;}

/* 항목이 한 줄씩 따라 올라온다 — 열릴 때만. 닫을 때는 통째로 접히는 편이 깔끔하다. */
.gnb-mobile .gm-sub a{transform:translateY(-6px);transition:transform .3s cubic-bezier(0.22,0.61,0.36,1);}
.gnb-mobile .gm-grp.is-open .gm-sub a{transform:none;
  transition-delay:calc(0.06s + var(--i, 0) * 0.035s);}

@media (prefers-reduced-motion: reduce){
  .gnb-mobile .gm-sub,
  .gnb-mobile .gm-sub a{transition:none;}
  .gnb-mobile .gm-sub a{transform:none;}
}
.gnb-mobile .gm-grp:not(.gm-solo) .gm-t{position:relative;padding-right:30px;cursor:pointer;}

/* + 기호는 글자가 아니라 선 두 개로 그린다 — 서체가 바뀌어도 두께가 흔들리지 않는다.
   두께 1px, 길이는 종전 13px 에서 20% 줄인 10.4px. */
.gnb-mobile .gm-grp:not(.gm-solo) .gm-t::before,
.gnb-mobile .gm-grp:not(.gm-solo) .gm-t::after{
  content:'';position:absolute;right:4px;top:50%;width:10.4px;height:1px;background:#F4F2EA;
  transition:transform .28s cubic-bezier(0.22,0.61,0.36,1);}
.gnb-mobile .gm-grp:not(.gm-solo) .gm-t::after{transform:rotate(90deg);}
.gnb-mobile .gm-grp.is-open .gm-t::after{transform:rotate(0deg);}

/* ── 딥그린 반전 ── */
.gnb-mobile{background:#186133;}
/* 상태를 하나씩 못 박는다 — 링크 색을 밖에서 건드리는 규칙(Breakdance·차단막)이
   섞여 있어, 기본색만 적어 두면 방문·호버·포커스 때 엉뚱한 색이 새어 들어온다. */
.gnb-mobile .gm-t{color:#F4F2EA;}
.gnb-mobile .gm-sub a,
.gnb-mobile .gm-sub a:visited,
.gnb-mobile .gm-sub a:hover,
.gnb-mobile .gm-sub a:focus{color:#B8D4C1;}
.gnb-mobile .gm-sub a:active{color:#fff;}
.gnb-mobile .gm-grp{border-bottom-color:rgba(255,255,255,0.16);}
.gnb-mobile .gm-lang a{color:#8FB49C;}
.gnb-mobile .gm-lang a.on{color:#fff;}
.gnb-mobile .gm-login{color:#E8EFE9;}

/* 하단 구분선 삭제 — 언어·로그인은 마지막 메뉴와 여백만으로 갈라도 충분히 읽힌다 */
.gnb-mobile .gm-foot{border-top:none;}

/* 헤더까지 한 덩어리로 */
body.gm-open .gnb .gwrap{background:#186133;}
body.gm-open .gnb .gmenu-btn i{background:#F4F2EA;}
body.gm-open .gnb .glogo img{filter:invert(1) brightness(1.9);}

/* ============================================================
   모바일 헤더 — 로고·햄버거를 키우고 좌우 여백을 줄인다 (2026-08-20)

   전: 좌우 30px · 로고 높이 22px · 햄버거 40px (선 22px)
   후: 좌우 18px · 로고 높이 26px · 햄버거 46px (선 28px)

   ⚠ 햄버거 선의 세로 위치(top)와 X 로 접힐 때의 이동량은 버튼 높이에 묶여 있다.
     버튼만 키우고 top 을 그대로 두면 선 세 개가 위로 쏠리고, X 가 어긋나 닫힌다.
     40px 기준 14/20/26 · ±6 → 46px 기준 16/23/30 · ±7 로 함께 옮긴다.
   ⚠ 데스크톱은 건드리지 않는다(1024px 이하 전용).
   ============================================================ */
@media (max-width: 1024px) {
  .gnb .gwrap        { padding: 0 18px; }
  .gnb .glogo img    { height: 26px; }
  .gnb .gmenu-btn    { width: 46px; height: 46px; margin-right: -9px; }
  /* X 와 +/- 를 같은 두께로. + 는 이미 1px 인데 햄버거만 1.5px 이라 서로 달라 보였다. */
  .gnb .gmenu-btn i  { left: 9px; right: 9px; height: 1px; }
  .gnb .gmenu-btn i:nth-child(1) { top: 16px; }
  .gnb .gmenu-btn i:nth-child(2) { top: 23px; }
  .gnb .gmenu-btn i:nth-child(3) { top: 30px; }
  body.gm-open .gmenu-btn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.gm-open .gmenu-btn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 펼침메뉴 안쪽 여백도 헤더와 같은 선에 맞춘다 — 로고와 대메뉴 왼끝이 어긋나 보였다 */
  .gnb-mobile { padding-left: 18px; padding-right: 18px; }
}