/* 머리말 — 가운데 주 메뉴(2026-11-05 HUB 개선 의견): 스토어 · 메테우스 웹을 한 덩어리로 크게, 그 끝에 같은 메테우스를 쓰는
   다른 방법인 PC 앱 받기를 붙이고, 커뮤니티 · 새 소식은 옆에 작은 보조 메뉴로 둔다. header-modes.js가 지금 칸을 표시한다.
   PC(761px~)에서는 이 줄이 주 메뉴이고 오른쪽은 가이드 · 언어 · 알림 · 로그인만 둔다(앱 받기는 덩어리 끝의 PC 앱). 폰은 ☰ 메뉴(#main-navigation)와 아래 탭 바를 그대로 쓴다.
   맨 위에서는 머리말 바탕을 비워 첫 화면과 한 장으로 잇고, 조금이라도 내리면 흰 유리 바가 깔린다(html.header-scrolled — header-scroll.js).
   스크롤이 없는 메테우스 웹(/cad)은 앱 틀과 갈라지도록 늘 바탕을 깐다. */
.mode-bar,.nav-guide,.lang-toggle{display:none}
/* 바탕 — 맨 위에선 비우고, 내리면 깐다 */
html:not(.header-scrolled) body:not(.is-webapp) .header{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.header-scrolled body .header,body.is-webapp .header{background:rgba(255,255,255,.86);border-bottom-color:rgba(32,43,53,.07);box-shadow:none}
/* 알림 종은 로그인한 뒤에만 */
.header .nav-actions:has(#account:not(.is-signed-in))>.notification-trigger{display:none}
.header .nav-actions>.notification-trigger{border-color:transparent;background:transparent}
.header .nav-actions>.notification-trigger:hover{background:rgba(32,43,53,.05)}

@media(min-width:761px){
  .header .nav-wrap{position:relative;min-height:64px;gap:24px}
  .header .nav-wrap .brand{font-size:22px;line-height:1}
  .header #main-navigation,.header .nav-actions>.lang-switch{display:none}
  .storefront .home-hero{margin-top:-24px}

  /* 주 메뉴 줄 — 좁은 PC에서는 로고와 오른쪽 단추 사이 가운데에 흐르고, 넓은 PC(1101px~)에서는 아래 규칙이 머리말 한가운데에 세운다 */
  .mode-bar{display:flex;align-items:center;gap:8px;margin:0 auto}
  /* 주 덩어리 — 스토어 · 메테우스 웹 두 칸(같은 너비)과 끝의 PC 앱. 흰 선택 표시가 두 칸 사이를 미끄러진다 */
  .mode-switch{--seg:116px;position:relative;display:grid;grid-template-columns:var(--seg) var(--seg) auto;align-items:center;height:44px;padding:4px;box-sizing:border-box;border-radius:var(--ui-pill);background:rgba(32,43,53,.06);box-shadow:inset 0 0 0 1px rgba(32,43,53,.05)}
  .mode-switch>a[data-mode]{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;border-radius:var(--ui-pill);font-size:15px;font-weight:650;letter-spacing:-.01em;color:#56636d;white-space:nowrap;transition:color .2s ease}
  .mode-switch>a[data-mode]:hover,.mode-switch>a[data-mode].active{color:var(--ui-ink)}
  .mode-switch>a:focus-visible{outline-offset:-2px}
  .mode-thumb{position:absolute;top:4px;left:4px;width:var(--seg);height:36px;border-radius:var(--ui-pill);background:#fff;box-shadow:0 1px 2px rgba(20,32,42,.08),0 0 0 1px rgba(32,43,53,.06);transform:translateX(calc(var(--mode-index,0) * var(--seg)));opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
  .mode-switch.has-active .mode-thumb{opacity:1}
  /* PC 앱 — 모드가 아니라 받기 단추라 가는 선 뒤에 작게 붙인다 */
  .mode-app{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;margin-left:6px;padding:0 14px 0 13px;border-radius:var(--ui-pill);font-size:13.5px;font-weight:600;color:#56636d;white-space:nowrap}
  .mode-app::before{content:"";position:absolute;left:-4px;top:10px;bottom:10px;width:1px;background:rgba(32,43,53,.14)}
  .mode-app:hover{background:rgba(255,255,255,.7);color:var(--ui-ink)}
  .mode-app .client-download-icon{width:15px;height:15px}
  .mode-app-short{display:none}

  /* 보조 메뉴 — 커뮤니티 · 새 소식은 작게 */
  .mode-sub{display:flex;align-items:center;gap:4px}
  .mode-sub>a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--ui-pill);font-size:13.5px;font-weight:500;color:#66737d;white-space:nowrap}
  .mode-sub>a:hover{background:rgba(32,43,53,.05);color:var(--ui-ink)}
  .mode-sub>a.active{color:var(--ui-ink);font-weight:650}

  /* 스토어에 있을 때만 스토어 칸에 꺾쇠 — 다시 누르면 스토어 메뉴가 칸 아래로 열린다 */
  .mode-chevron{display:none;width:6px;height:6px;margin:-3px 0 0 1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform .16s ease}
  .mode-store[aria-haspopup] .mode-chevron{display:block}
  .mode-store[aria-expanded="true"] .mode-chevron{transform:translateY(3px) rotate(225deg)}
  .mode-store-menu{position:absolute;left:4px;top:0;width:var(--seg);height:100%;pointer-events:none}
  .header .mode-store-menu .nav-dropdown{position:absolute;top:calc(100% + 10px);left:-10px;pointer-events:auto}
  .header .mode-store-menu[open] .nav-dropdown{animation:nav-dropdown-in .16s cubic-bezier(.2,.7,.3,1)}

  /* 오른쪽 — 가이드 · 언어 · 로그인은 같은 글자 단추(높이 36) */
  .header .nav-wrap .nav-actions{gap:2px;align-items:center}
  .header .nav-wrap .nav-guide,.header .nav-wrap .lang-toggle,.header .nav-wrap .nav-actions>.text-button:not(.is-signed-in){display:inline-flex;align-items:center;gap:6px;height:36px;min-height:36px;padding:0 12px;border-radius:var(--ui-pill);font-size:14px;font-weight:500;letter-spacing:0;line-height:1;color:#48535d;white-space:nowrap}
  .header .nav-wrap .nav-guide:hover,.header .nav-wrap .lang-toggle:hover,.header .nav-wrap .nav-actions>.text-button:not(.is-signed-in):hover{background:rgba(32,43,53,.05);color:var(--ink)}
  .header .nav-wrap .nav-guide.active{color:var(--ink);font-weight:600}
  .lang-toggle svg{width:16px;height:16px;margin-left:-1px;flex-shrink:0}
  .lang-toggle span{font-size:13px;font-weight:600;letter-spacing:.02em}
}
/* 영어 — 가장 긴 「METHEUS web」이 칸에 들어가게 칸을 조금 넓힌다 */
@media(min-width:761px){html[lang="en"] .mode-switch{--seg:124px}html[lang="en"] .mode-switch>a[data-mode]{font-size:14px}}
/* 넓은 PC — 선택 덩어리(스토어 · 메테우스 웹 · PC 앱) 자체를 머리말 한가운데에 세우고, 커뮤니티 · 새 소식은 흐름에서 빼 덩어리 오른쪽에 매단다.
   오른쪽 단추와 부딪힐 만큼 좁으면 header-modes.js가 --mode-shift로 모자란 만큼만 왼쪽으로 비킨다 */
@media(min-width:1101px){
  .mode-bar{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--mode-shift,0px)),-50%)}
  .mode-sub{position:absolute;left:calc(100% + 22px);top:50%;transform:translateY(-50%)}
}
/* 좁은 PC · 태블릿 — 칸을 줄이고 PC 앱은 아이콘과 「앱」만, 언어는 지구본만 */
@media(min-width:761px) and (max-width:1100px){
  .mode-switch{--seg:92px;height:42px}
  .mode-switch>a[data-mode]{font-size:14px;height:34px}
  .mode-thumb{height:34px}
  html[lang="en"] .mode-switch{--seg:104px}html[lang="en"] .mode-switch>a[data-mode]{font-size:13px}
  .mode-app{padding:0 11px;height:34px;margin-left:4px}
  .mode-app-long{display:none}.mode-app-short{display:inline}
  .mode-sub>a{padding:0 7px;font-size:13px}
  .header .nav-wrap .lang-toggle{padding:0 10px}
  .lang-toggle span{display:none}
}
@media(min-width:761px) and (max-width:900px){.mode-sub>a{padding:0 5px;font-size:12.5px}.header .nav-wrap .nav-guide,.header .nav-wrap .nav-actions>.text-button:not(.is-signed-in){padding:0 9px}}

/* 폰 — 언어 고르기는 폰 머리말에만 보이고(PC는 지구본 단추 .lang-toggle), 글자 둘만 둔다. 지금 언어만 진하게 */
@media(max-width:760px){
  .lang-switch{display:flex;align-items:center;color:var(--ui-ink-3)}
  .lang-switch>svg{display:none}
  .lang-switch>button{min-height:26px;padding:5px 6px;border-radius:var(--ui-pill);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--ui-ink-3)}
  .lang-switch>button:hover,.lang-switch>button[aria-pressed="true"]{color:var(--ui-ink)}
  .lang-switch>button:focus-visible{outline-offset:1px}
}
@media(prefers-reduced-motion:reduce){.mode-thumb,.mode-switch>a,.mode-chevron{transition:none}.header .mode-store-menu[open] .nav-dropdown{animation:none}}
@media(forced-colors:active){.mode-switch{border:1px solid CanvasText}.mode-thumb{border:1px solid Highlight}.lang-switch>button[aria-pressed="true"]{color:Highlight}}