/* 공통 헤더 · 휴대폰 메뉴의 바탕 — 따로 만든 쪽용 (2026-10-12 · 지금 부르는 쪽 = 한글 쪽 51장 public/hangul.html · public/<언어>/hangul.html)
   오너 10-12 "한글 페이지에 모바일 햄버거 메뉴가 안나오는 현상 확인 - 와그작 메뉴와 동일하게 수정 한다".

   다른 쪽은 쪽 전체에 tokens.css · base.css · i18n-fonts.css 를 깔고 그 위에 header-minimal.css · mobile-menu.css · rtl-utilities.css 를 얹는다.
   따로 만든 쪽(한글 쪽)은 자기 글꼴 · 변수(--font-body · --ease-out) · 줄바꿈이 있어 그 넷을 쪽 전체에 깔면 본문이 바뀐다
   (tokens.css 의 body hyphens:auto · html[lang] body keep-all, base.css 의 * 여백 0 · main 위 여백, i18n-fonts.css 의 html[lang] --font-body,
   rtl-utilities.css 의 아랍어 몸 글 dlig). 그래서 헤더 · 휴대폰 메뉴가 그 넷에서 받는 것만 옮겨 크롬 안에만 건다.
   값은 원본 파일에서 기계로 옮겼다(출처를 묶음마다 적었다) — 그 파일들을 고치면 여기도 같이, 그리고 아래 ?v= 를 올린다.
   다른 쪽과 계산값이 같은지는 e2e/hangul-menu.spec.ts 가 견준다(헤더 · 메뉴 칸 · 단추 · 휴대폰 메뉴 글꼴 · 크기 · 자리).

   부르는 차례(그 쪽 <head> 끝 — 쪽 자기 <style> 뒤): 이 파일 → header-minimal.css → mobile-menu.css.
   쪽 자기 규칙 중 요소 이름 규칙(button · img · :focus-visible)이 크롬 안으로 새는 것은 7절이 같은 특이도 · 뒤 차례로 되돌린다.
   마크업 = scripts/site-upgrade/sync-parts.py R13(public/config/site-links.json) · 움직임 = js/mobile-menu.js · layout-config.js · lang-selector.js · site-parts.js.
   이 파일을 부르는 쪽: public/hangul.html 한 곳(50장은 apply-hangul-locales.py 가 원본에서 만든다). */

/* 1. base.css — 다른 쪽은 * 여백 0 · 몸(16px · 줄 1.6 · 글 색). 크롬 안에만, 특이도 0 이라 header-minimal.css 가 이긴다 */
:where(.wz-skip-link,.wz-header,.wz-mobile-menu),:where(.wz-header,.wz-mobile-menu) *{margin:0;padding:0;box-sizing:border-box}
:where(.wz-skip-link,.wz-header,.wz-mobile-menu){font-size:16px;line-height:1.6;color:var(--wz-text-primary,#2D2A3E);text-align:start;word-break:normal;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* 2. tokens.css html[lang] body — 언어별 줄바꿈 · 줄 높이 · 오른쪽→왼쪽 */
html[lang=ja] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ko] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=zh-CN] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=zh-TW] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){word-break:keep-all;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
html[lang=th] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){word-break:keep-all;overflow-wrap:break-word;line-height:1.6;hyphens:none}
html[lang=ar] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=he] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ur] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){direction:rtl;text-align:right}
html[lang=bn] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=hi] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){line-height:1.6}
html[lang=de] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=fi] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=nl] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){hyphens:auto;-webkit-hyphens:auto;word-wrap:break-word;overflow-wrap:break-word}
/* i18n-fonts.css html[dir=rtl] body — 오른쪽→왼쪽 쪽(페르시아어 포함)의 글 맞춤 */
html[dir=rtl] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){text-align:right}
/* rtl-utilities.css html[lang] body — 오른쪽→왼쪽 언어 몸 글 */
html[lang=ar] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){font-size:calc(1rem + 1px);font-feature-settings:"liga" 1,"dlig" 1}
html[lang=he] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){font-size:calc(1rem + 1px)}
html[lang=ur] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){font-size:calc(1rem + 1px);font-feature-settings:"liga" 1}

/* 3. tokens.css :root — 헤더 · 휴대폰 메뉴 CSS 가 부르는 변수만 */
:where(.wz-skip-link,.wz-header,.wz-mobile-menu){--wz-purple:#9E63CF;--wz-purple-dark:#7E4FA6;--wz-mint:#36C9A1;--wz-coral:#FF665E;--wz-yellow:#FFB830;--wz-text-primary:#2D2A3E;--wz-font-korean-display:'NanumSquareRound','GmarketSans',sans-serif;--wz-font-korean-body:'Pretendard','NanumSquareRound',sans-serif;--wz-text-small:14px;--wz-text-caption:12px;--font-display:'Nunito','GmarketSans','Pretendard',sans-serif;--font-body:'Lexend','Pretendard',sans-serif}

/* 4. i18n-fonts.css html[lang] — 언어별 --font-display · --font-body(쪽 전체가 아니라 크롬 안에만) */
html[lang=el] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans',sans-serif;--font-body:'Noto Sans',sans-serif}
html[lang=hu] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ro] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Lato',sans-serif;--font-body:'Lato',sans-serif}
html[lang=az] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=uz] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Poppins',sans-serif;--font-body:'Poppins',sans-serif}
html[lang=fil] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ha] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=sw] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=yo] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Plus Jakarta Sans',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif}
html[lang=fa] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Naskh Arabic',sans-serif;--font-body:'Noto Naskh Arabic',sans-serif}
html[lang=mr] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ne] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Devanagari',sans-serif;--font-body:'Noto Sans Devanagari',sans-serif}
html[lang=gu] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Gujarati',sans-serif;--font-body:'Noto Sans Gujarati',sans-serif}
html[lang=pa] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Gurmukhi',sans-serif;--font-body:'Noto Sans Gurmukhi',sans-serif}
html[lang=kn] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Kannada',sans-serif;--font-body:'Noto Sans Kannada',sans-serif}
html[lang=ml] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Malayalam',sans-serif;--font-body:'Noto Sans Malayalam',sans-serif}
html[lang=ta] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Tamil',sans-serif;--font-body:'Noto Sans Tamil',sans-serif}
html[lang=te] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Telugu',sans-serif;--font-body:'Noto Sans Telugu',sans-serif}
html[lang=ko] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Lexend','Pretendard',sans-serif;--font-body:'Pretendard','Nunito',sans-serif}
html[lang=en] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Lexend',sans-serif;--font-body:'Nunito',sans-serif}
html[lang=ja] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'M PLUS Rounded 1c',sans-serif;--font-body:'Noto Sans JP',sans-serif}
html[lang=zh-CN] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=zh] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans SC',sans-serif;--font-body:'Noto Sans SC',sans-serif}
html[lang=zh-TW] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans TC',sans-serif;--font-body:'Noto Sans TC',sans-serif}
html[lang=ar] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Arabic',sans-serif;--font-body:'Noto Sans Arabic',sans-serif}
html[lang=he] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Hebrew',sans-serif;--font-body:'Noto Sans Hebrew',sans-serif}
html[lang=ur] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Nastaliq Urdu',sans-serif;--font-body:'Noto Sans Arabic',sans-serif}
html[lang=th] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Thai',sans-serif;--font-body:'Noto Sans Thai',sans-serif}
html[lang=hi] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Hind',sans-serif;--font-body:'Noto Sans Devanagari',sans-serif}
html[lang=bn] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans Bengali',sans-serif;--font-body:'Noto Sans Bengali',sans-serif}
html[lang=vi] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Be Vietnam Pro',sans-serif;--font-body:'Be Vietnam Pro',sans-serif}
html[lang=bg] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=kk] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=mn] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ru] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=sr] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=uk] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Noto Sans',sans-serif;--font-body:'Noto Sans',sans-serif}
html[lang=cs] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=pl] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Lato',sans-serif;--font-body:'Lato',sans-serif}
html[lang=da] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=de] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=fi] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=nb] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=nl] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=sv] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Inter',sans-serif;--font-body:'Inter',sans-serif}
html[lang=fr] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=it] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=pt-BR] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Montserrat',sans-serif;--font-body:'Montserrat',sans-serif}
html[lang=es] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=tr] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Poppins',sans-serif;--font-body:'Poppins',sans-serif}
html[lang=id] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=ms] :where(.wz-skip-link,.wz-header,.wz-mobile-menu),html[lang=tl] :where(.wz-skip-link,.wz-header,.wz-mobile-menu){--font-display:'Plus Jakarta Sans',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif}
/* i18n-fonts.css [data-lang] — 언어 목록의 언어 이름 글꼴 */
:where(.wz-header,.wz-mobile-menu) [data-lang=el]{font-family:'Noto Sans',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=fa]{font-family:'Noto Naskh Arabic',sans-serif;direction:rtl;unicode-bidi:isolate}
:where(.wz-header,.wz-mobile-menu) [data-lang=fil],:where(.wz-header,.wz-mobile-menu) [data-lang=ha],:where(.wz-header,.wz-mobile-menu) [data-lang=sw],:where(.wz-header,.wz-mobile-menu) [data-lang=yo]{font-family:'Plus Jakarta Sans',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=hu],:where(.wz-header,.wz-mobile-menu) [data-lang=ro]{font-family:Lato,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=az],:where(.wz-header,.wz-mobile-menu) [data-lang=uz]{font-family:Poppins,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=mr],:where(.wz-header,.wz-mobile-menu) [data-lang=ne]{font-family:'Noto Sans Devanagari',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=gu]{font-family:'Noto Sans Gujarati',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=pa]{font-family:'Noto Sans Gurmukhi',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=kn]{font-family:'Noto Sans Kannada',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=ml]{font-family:'Noto Sans Malayalam',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=ta]{font-family:'Noto Sans Tamil',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=te]{font-family:'Noto Sans Telugu',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=ko]{font-family:Pretendard,'Noto Sans KR',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=en]{font-family:Nunito,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=ja]{font-family:'Noto Sans JP',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=zh-CN],:where(.wz-header,.wz-mobile-menu) [data-lang=zh]{font-family:'Noto Sans SC',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=zh-TW]{font-family:'Noto Sans TC',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=ar],:where(.wz-header,.wz-mobile-menu) [data-lang=ur]{font-family:'Noto Sans Arabic',sans-serif;direction:rtl;unicode-bidi:isolate}
:where(.wz-header,.wz-mobile-menu) [data-lang=he]{font-family:'Noto Sans Hebrew',sans-serif;direction:rtl;unicode-bidi:isolate}
:where(.wz-header,.wz-mobile-menu) [data-lang=th]{font-family:'Noto Sans Thai',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=hi]{font-family:Hind,'Noto Sans Devanagari',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=bn]{font-family:'Noto Sans Bengali',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=vi]{font-family:'Be Vietnam Pro',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=bg],:where(.wz-header,.wz-mobile-menu) [data-lang=kk],:where(.wz-header,.wz-mobile-menu) [data-lang=mn],:where(.wz-header,.wz-mobile-menu) [data-lang=ru],:where(.wz-header,.wz-mobile-menu) [data-lang=sr],:where(.wz-header,.wz-mobile-menu) [data-lang=uk]{font-family:'Noto Sans',sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=cs],:where(.wz-header,.wz-mobile-menu) [data-lang=pl]{font-family:Lato,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=da],:where(.wz-header,.wz-mobile-menu) [data-lang=de],:where(.wz-header,.wz-mobile-menu) [data-lang=fi],:where(.wz-header,.wz-mobile-menu) [data-lang=nb],:where(.wz-header,.wz-mobile-menu) [data-lang=nl],:where(.wz-header,.wz-mobile-menu) [data-lang=sv]{font-family:Inter,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=fr],:where(.wz-header,.wz-mobile-menu) [data-lang=it],:where(.wz-header,.wz-mobile-menu) [data-lang=pt-BR]{font-family:Montserrat,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=es],:where(.wz-header,.wz-mobile-menu) [data-lang=tr]{font-family:Poppins,sans-serif}
:where(.wz-header,.wz-mobile-menu) [data-lang=id],:where(.wz-header,.wz-mobile-menu) [data-lang=ms],:where(.wz-header,.wz-mobile-menu) [data-lang=tl]{font-family:'Plus Jakarta Sans',sans-serif}

/* 5. i18n-fonts.css 의 헤더 몫(언어 고르기 · 오른쪽→왼쪽 메뉴) — 원본 그대로. header-minimal.css 보다 앞이라 같은 속성은 그 파일이 이긴다(다른 쪽과 같은 차례) */
html[dir=rtl] .wz-header__nav{flex-direction:row-reverse}.wz-lang-selector{position:relative;display:inline-block}.wz-lang-selector__trigger{display:flex;align-items:center;gap:6px;padding:8px 12px;background:0 0;border:1.5px solid var(--wz-purple,#9e63cf);border-radius:8px;font-family:var(--font-body, 'Pretendard', sans-serif);font-size:14px;font-weight:500;color:var(--wz-purple,#9e63cf);cursor:pointer;transition:.2s}.wz-lang-selector__trigger:hover{background:rgba(158,99,207,.08);border-color:var(--wz-purple,#9e63cf)}.wz-lang-selector__menu{position:absolute;top:calc(100% + 8px);right:0;width:200px;max-height:320px;overflow-y:auto;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:1000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}.wz-lang-selector__menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.wz-lang-selector__item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:0 0;border:none;font-size:14px;color:#333;text-align:left;cursor:pointer;transition:background .15s}.wz-lang-selector__item:hover{background:rgba(158,99,207,.08)}.wz-lang-selector__item.is-active{background:rgba(158,99,207,.12);color:var(--wz-purple,#9e63cf);font-weight:600}.wz-lang-selector__flag{font-size:18px;line-height:1}.wz-lang-selector__menu::-webkit-scrollbar{width:6px}.wz-lang-selector__menu::-webkit-scrollbar-track{background:0 0}.wz-lang-selector__menu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}@media (max-width:900px){.wz-lang-selector--desktop{display:none}}@media (min-width:901px){.wz-lang-selector--mobile{display:none}}

/* 6. rtl-utilities.css 의 헤더 몫 — 다른 쪽은 header-minimal.css · mobile-menu.css 뒤에 와서 같은 특이도면 이 규칙이 이긴다.
      이 파일은 그 둘보다 앞이므로, 같은 자리를 header-minimal.css 도 잡는 두 규칙(.wz-header__actions)만 .wz-header 를 하나 더 붙여 그 차례를 지킨다 */
[dir=rtl] .wz-header__nav{margin-left:0;margin-right:auto}[dir=rtl] .wz-header .wz-header__actions{margin-left:0;margin-right:24px}[dir=rtl] .wz-header__nav-link::after{left:auto;right:0}[dir=rtl] .wz-lang-selector__item{text-align:right}[dir=rtl] .wz-lang-selector__menu{right:auto;left:0}@media (max-width:900px){[dir=rtl] .wz-header .wz-header__actions{right:auto;left:24px;margin-right:0}}

/* 7. 쪽 자기 요소 이름 규칙이 크롬 안으로 새는 것 되돌리기 — 다른 쪽에서는 브라우저 기본값이던 것(같은 특이도 · 이 파일이 뒤라 이긴다 · header-minimal.css 의 칸 규칙은 그대로 이긴다)
      한글 쪽: a{color:inherit} · button{font:inherit;color:inherit} · img{display:block;max-width:100%;…} · :focus-visible{outline:3px …;border-radius:6px}
      (그림 높이는 header-minimal.css 가 칸마다 정하므로 되돌리지 않는다) */
:where(.wz-header,.wz-mobile-menu) a{color:revert}
:where(.wz-header,.wz-mobile-menu) button{font:revert;color:revert}
:where(.wz-header,.wz-mobile-menu) img{display:revert;max-width:revert}
:where(.wz-skip-link,.wz-header,.wz-mobile-menu):focus-visible,:where(.wz-header,.wz-mobile-menu) :focus-visible{outline:revert;outline-offset:revert;border-radius:revert}