/* Final shared header. This file must be the last stylesheet in every page. */
:root{scrollbar-gutter:stable;color-scheme:dark}
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
html,body{background:#0b0f0e}
html body>header{
  width:100%!important;min-height:64px!important;height:64px!important;
  padding:0 clamp(20px,5vw,96px)!important;display:grid!important;
  grid-template-columns:42px 290px minmax(0,1fr) 108px!important;
  align-items:center!important;column-gap:16px!important;box-sizing:border-box!important;
  background:#181a19!important;border:0!important;border-bottom:1px solid #242a27!important;
  box-shadow:none!important;backdrop-filter:none!important;isolation:isolate
}
html body>header .site-menu-button{
  position:static!important;inset:auto!important;grid-column:1!important;
  width:42px!important;height:42px!important;min-width:42px!important;margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;background:#222522!important;
  border:1px solid #343a36!important;border-radius:8px!important;box-shadow:none!important
}
html body>header .site-menu-button:hover{background:#2b302d!important;border-color:#4a554e!important}
html body>header .site-menu-button img{width:20px!important;height:20px!important;display:block!important;object-fit:contain!important;opacity:.9}
html body>header .logo{
  grid-column:2!important;width:290px!important;max-width:290px!important;height:42px!important;
  min-width:0!important;margin:0!important;padding:0!important;justify-self:start!important
}
html body>header .logo img{max-width:100%!important;max-height:42px!important;object-fit:contain!important;object-position:left center!important}
html body>header .nav-links{
  grid-column:3!important;min-width:0!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:clamp(8px,.72vw,17px)!important;white-space:nowrap!important
}
html body>header .nav-links a{margin:0!important;padding:21px 0 18px!important;font-size:clamp(.69rem,.67vw,.84rem)!important;line-height:1!important}
html body>header .nav-links .header-btn{padding:12px 16px!important}
html body>header .auth-header-button{
  grid-column:4!important;width:108px!important;max-width:108px!important;height:42px!important;
  margin:0!important;justify-self:end!important;border-radius:10px!important
}
@media(max-width:1500px){
 html body>header{grid-template-columns:42px 250px minmax(0,1fr) 104px!important;padding-inline:24px!important;column-gap:12px!important}
 html body>header .logo{width:250px!important;max-width:250px!important}
 html body>header .nav-links{gap:8px!important}
 html body>header .nav-links a{font-size:.68rem!important}
}
@media(max-width:1050px){
 html body>header{grid-template-columns:42px minmax(0,1fr) 104px!important}
 html body>header .logo{grid-column:2!important}
 html body>header .nav-links{display:none!important}
 html body>header .auth-header-button{grid-column:3!important}
}
/* 2026-08-17: one mobile header layout on every page */
@media(max-width:600px){
 html body>header{
   padding:0 8px!important;grid-template-columns:42px minmax(0,1fr) 42px!important;
   column-gap:8px!important
 }
 html body>header .site-menu-button{grid-column:1!important}
 html body>header .logo{
   grid-column:2!important;width:min(220px,100%)!important;max-width:220px!important;
   justify-self:start!important
 }
 html body>header .nav-links{display:none!important}
 html body>header .auth-header-button{
   position:static!important;inset:auto!important;grid-column:3!important;
   width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;
   margin:0!important;padding:0!important;justify-self:end!important;display:grid!important;place-items:center!important
 }
 html body>header .auth-header-button span{display:none!important}
}
/* 2026-09-12: 모드 페이지 전용 헤더 블록을 지웠습니다.
   여기 있던 규칙들은 site-header-account.css 보다 뒤에 실려서, 다른
   페이지와 달리 모드 페이지만 오른쪽 여백과 로그인 단추가 어긋났습니다.
   이제 모드 페이지도 위의 공통 규칙(html body>header)만 씁니다. */


/* 2026-08-18: one identical login button on every page */
html body>header>.auth-header-button{position:static!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:4!important;width:108px!important;min-width:108px!important;max-width:108px!important;height:42px!important;margin:0!important;padding:0 13px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;justify-self:end!important;color:#eaf5ee!important;background:#0e1813!important;border:1px solid #185d37!important;border-bottom:1px solid #185d37!important;border-radius:10px!important;box-shadow:none!important;transform:none!important;overflow:hidden!important;font:800 .76rem 'Noto Sans KR',sans-serif!important;white-space:nowrap!important}
html body>header>.auth-header-button>i{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;flex:0 0 24px!important;color:#062613!important;background:#2bdf78!important;border:0!important;border-radius:50%!important;font-size:.72rem!important;line-height:1!important}
html body>header>.auth-header-button>.auth-header-avatar{width:24px!important;height:24px!important;flex:0 0 24px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important}
html body>header>.auth-header-button:hover{color:#fff!important;background:#14241b!important;border-color:#257a4b!important}
@media(max-width:1050px){html body>header>.auth-header-button{grid-column:3!important}}
@media(max-width:600px){html body>header>.auth-header-button{grid-column:3!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;padding:0!important}html body>header>.auth-header-button>span{display:none!important}}


/* 2026-08-18: login button never moves on interaction */
html body>header>.auth-header-button,html body>header>.auth-header-button:hover,html body>header>.auth-header-button:focus,html body>header>.auth-header-button:focus-visible,html body>header>.auth-header-button:active{transform:none!important;translate:none!important;scale:none!important;animation:none!important}

/* 2026-08-20: 메뉴 항목이 늘어나(유용한 정보 · 스튜디오) 좁은 화면에서 글자가 겹치므로,
   더 일찍 줄이고 더 일찍 전체 메뉴(햄버거) 로 넘깁니다. */
@media(max-width:1320px){
 html body>header .nav-links{gap:6px!important}
 html body>header .nav-links a{font-size:.63rem!important}
 html body>header .nav-links .header-btn{padding:10px 12px!important}
}
@media(max-width:1220px){
 html body>header{grid-template-columns:42px minmax(0,1fr) 104px!important}
 html body>header .logo{grid-column:2!important}
 html body>header .nav-links{display:none!important}
 html body>header .auth-header-button{grid-column:3!important}
}

/* ── 스튜디오 페이지: 로고 옆 MPJstudio 표식 ─────────────────────────
   이 헤더는 칸 수가 고정된 grid 라, 요소를 하나 더 넣으면 네비와 로그인이
   다음 줄로 밀려 화면을 덮습니다. 이 페이지에서만 열을 하나 더 엽니다. */
html body.studio-body>header{grid-template-columns:42px 290px auto minmax(0,1fr) 108px!important}
html body.studio-body>header>.studio-header-mark{grid-column:3!important;justify-self:start!important;height:26px!important;width:auto!important}
html body.studio-body>header>.nav-links{grid-column:4!important}
html body.studio-body>header>.auth-header-button{grid-column:5!important}
@media(max-width:1500px){
  html body.studio-body>header{grid-template-columns:42px 250px auto minmax(0,1fr) 104px!important}
  html body.studio-body>header>.studio-header-mark{height:22px!important}
}
/* 1050px 아래부터는 원래 3칸 배치로 돌아가므로, 표식은 숨겨 배치를 건드리지 않습니다. */
@media(max-width:1050px){
  html body.studio-body>header{grid-template-columns:42px minmax(0,1fr) 104px!important}
  html body.studio-body>header>.studio-header-mark{display:none!important}
  html body.studio-body>header>.auth-header-button{grid-column:3!important}
}
@media(max-width:600px){
  html body.studio-body>header{grid-template-columns:42px minmax(0,1fr) 42px!important}
}

/* 2026-08-29: keep translated navigation readable and horizontally scrollable.
   Links must never shrink into each other; narrower screens get a dedicated
   second header row instead of losing the navigation altogether. */
html body>header .nav-links{
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
html body>header .nav-links::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
html body>header .nav-links a{
  flex:0 0 auto!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
/* 남는 공간은 첫 메뉴 앞에 배치하여 기존의 오른쪽 정렬 위치를 복원합니다.
   메뉴가 넘치면 auto margin은 0이 되어 첫 항목부터 정상적으로 스크롤됩니다. */
html body>header .nav-links a:first-child{margin-left:auto!important}

@media(max-width:1220px){
  html body>header,
  html body.mods-body>header,
  html body.mod-detail-body>header,
  html body.studio-body>header{
    height:112px!important;
    min-height:112px!important;
    padding:8px 16px 0!important;
    grid-template-columns:42px minmax(0,1fr) 104px!important;
    grid-template-rows:48px 55px!important;
    column-gap:12px!important;
    row-gap:0!important;
  }
  html body>header .site-menu-button{grid-column:1!important;grid-row:1!important}
  html body>header .logo{
    grid-column:2!important;grid-row:1!important;
    width:min(290px,100%)!important;max-width:290px!important;
  }
  html body>header .nav-links,
  html body.studio-body>header>.nav-links{
    grid-column:1 / -1!important;grid-row:2!important;
    width:100%!important;height:55px!important;
    display:flex!important;align-self:end!important;
    gap:18px!important;
  }
  html body>header .nav-links a{
    padding:18px 0 16px!important;
    font-size:.72rem!important;
  }
  html body>header .nav-links .header-btn{padding:10px 14px!important;margin-block:7px!important}
  html body>header>.auth-header-button,
  html body.mods-body>header>.auth-header-button,
  html body.mod-detail-body>header>.auth-header-button,
  html body.studio-body>header>.auth-header-button{
    grid-column:3!important;grid-row:1!important;
  }
  html body.studio-body>header>.studio-header-mark{display:none!important}
}

@media(max-width:600px){
  html body>header,
  html body.mods-body>header,
  html body.mod-detail-body>header,
  html body.studio-body>header{
    padding:8px 8px 0!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    column-gap:8px!important;
  }
  html body>header .logo{width:min(220px,100%)!important;max-width:220px!important}
  html body>header .nav-links{display:flex!important;gap:16px!important}
  html body>header>.auth-header-button,
  html body.mods-body>header>.auth-header-button,
  html body.mod-detail-body>header>.auth-header-button,
  html body.studio-body>header>.auth-header-button{
    grid-column:3!important;width:42px!important;min-width:42px!important;max-width:42px!important;padding:0!important;
  }
}
/* Keep the animated brand, but render it inside a fixed canvas so differently
   cropped GIF frames can never resize the header or push the navigation. */
html body>header .logo {
 width:250px!important;
 min-width:250px!important;
 max-width:250px!important;
 height:42px!important;
 overflow:hidden!important;
 background: url("magbFoxx_TOOLBOX_title2.gif?v=20260905-latest-fixed3") left calc(50% + 3px) / 245px 34.93px no-repeat !important;
 font-size: 0 !important;
}
html body>header .logo>span,
html body>header .logo>img { visibility: hidden !important; }
@media(max-width:600px){
 html body>header .logo{
  width:min(235px,100%)!important;
  min-width:0!important;
  max-width:235px!important;
  background-size:min(230px,100%) auto!important;
 }
}