/* ARIFE shared top navigation — one geometry and typography across every route. */
:root{
  --arife-nav-height:60px;
  --arife-nav-font:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
}

html{scroll-padding-top:var(--arife-nav-height)}
body{font-family:var(--arife-nav-font)!important}

.site-nav{
  position:sticky!important;
  inset:0 0 auto!important;
  z-index:120!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--arife-nav-height)!important;
  min-height:var(--arife-nav-height)!important;
  max-height:var(--arife-nav-height)!important;
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr) 310px!important;
  align-items:center!important;
  gap:16px!important;
  margin:0!important;
  padding:0 24px!important;
  border:0!important;
  border-bottom:1px solid #2d3237!important;
  background:rgba(9,11,13,.97)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.2)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  transform:none!important;
  animation:none!important;
  overflow:visible!important;
  font-family:var(--arife-nav-font)!important;
}

.site-nav .brand{
  justify-self:start!important;
  width:92px!important;
  min-width:92px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  overflow:visible!important;
}

.site-nav .brand .company-logo,
.site-nav .company-logo{
  display:block!important;
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
}

.site-nav .nav-links{
  justify-self:center!important;
  min-width:0!important;
  height:var(--arife-nav-height)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(13px,1.35vw,25px)!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.site-nav .nav-links a{
  position:relative!important;
  flex:none!important;
  height:var(--arife-nav-height)!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:1px 0 0!important;
  color:#92999f!important;
  font-family:var(--arife-nav-font)!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.35!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.active{color:#fff!important}
.site-nav .nav-links a::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:2px!important;
  border-radius:2px 2px 0 0!important;
  background:#3cc9e2!important;
  opacity:0!important;
  transform:scaleX(.25)!important;
}
.site-nav .nav-links a.active::after{opacity:1!important;transform:scaleX(1)!important}

.site-nav .nav-actions{
  justify-self:end!important;
  min-width:0!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-family:var(--arife-nav-font)!important;
}

.site-nav .nav-pill,
.site-nav .top-role-trigger{
  box-sizing:border-box!important;
  min-height:38px!important;
  height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 15px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.site-nav .nav-pill.primary{
  min-width:106px!important;
  border-color:#a4edf9!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.68),0 4px 0 #0d6f81!important;
  color:#0b1004!important;
}

.site-nav .top-role-switcher{flex:0 0 auto!important;height:38px!important}
.site-nav .top-role-trigger{max-width:130px!important;overflow:hidden!important;text-overflow:ellipsis!important}

.site-nav .nav-avatar{
  position:relative!important;
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  overflow:visible!important;
  aspect-ratio:1/1!important;
  align-self:center!important;
}

.site-nav .nav-avatar-button{
  box-sizing:border-box!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:2px solid rgba(79, 211, 234,.75)!important;
  border-radius:50%!important;
  overflow:hidden!important;
  aspect-ratio:1/1!important;
  clip-path:circle(50% at 50% 50%)!important;
}

.site-nav .nav-avatar-button img,
.site-nav .nav-avatar-button>span{
  box-sizing:border-box!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:1/1!important;
  clip-path:circle(50% at 50% 50%)!important;
}

.site-nav .menu-button{display:none!important}

@media(max-width:1220px){
  .site-nav{grid-template-columns:130px minmax(0,1fr) 285px!important;padding-inline:18px!important;gap:10px!important}
  .site-nav .nav-links{gap:12px!important}
  .site-nav .nav-links a{font-size:12px!important}
  .site-nav .top-role-trigger{max-width:112px!important;padding-inline:11px!important}
}

@media(max-width:980px){
  .site-nav{grid-template-columns:110px 1fr auto!important;padding-inline:15px!important}
  .site-nav .menu-button{display:grid!important;grid-column:2!important;justify-self:end!important;width:38px!important;height:38px!important;place-items:center!important;border:1px solid #343a40!important;border-radius:10px!important;background:#171a1d!important;color:#fff!important}
  .site-nav .nav-links{display:none!important}
  .site-nav .nav-links.open{position:absolute!important;left:12px!important;right:12px!important;top:calc(var(--arife-nav-height) + 8px)!important;height:auto!important;display:grid!important;gap:3px!important;padding:10px!important;border:1px solid #343a40!important;border-radius:14px!important;background:#14171a!important;box-shadow:0 22px 55px rgba(0,0,0,.6)!important}
  .site-nav .nav-links.open a{height:38px!important;padding:0 10px!important;border-radius:8px!important}
  .site-nav .nav-links.open a::after{display:none!important}
  .site-nav .nav-actions{grid-column:3!important}
  .site-nav .nav-pill:not(.primary){display:none!important}
}

@media(max-width:620px){
  .site-nav{grid-template-columns:92px 1fr auto!important;height:56px!important;min-height:56px!important;max-height:56px!important;padding-inline:12px!important;--arife-nav-height:56px}
  .site-nav .brand{width:82px!important;min-width:82px!important}
  .site-nav .brand .company-logo,.site-nav .company-logo{width:78px!important;min-width:78px!important;max-width:78px!important}
  .site-nav .nav-pill.primary{display:none!important}
  .site-nav .top-role-trigger{width:38px!important;min-width:38px!important;max-width:38px!important;padding:0!important;font-size:0!important}
  .site-nav .top-role-trigger::before{width:8px!important;height:8px!important}
}

/* ══════════════════════════════════════════════════════════════
   상단 메뉴 한 벌로 통일 v2500 (클로드코드)

   이 파일은 원래 "모든 화면에서 같은 상단 메뉴"를 만들려고 쓴 것이다.
   그런데 선택자가 `.site-nav` 하나뿐이라, 회차별 묶음이 본문 클래스를
   7~8개씩 붙여 덮어써 버렸다. 그 결과 페이지마다 값이 달랐다 —
     높이 68 / 72 / 74px · 글씨 8 / 9 / 10 / 11 / 12 / 13px
     좌우 여백 24 / 31.7 / 34.6 / 42 / 43.2 / 57.6px
     로고 폭 90 / 92 / 102 / 104 / 118px · 여섯 가지
   `:not(#_)` 는 아무것도 안 거르지만 우선순위를 아이디급으로 올려 준다.
   덕분에 클래스를 몇 개 붙이든 여기 값이 이긴다.
   색은 새 디자인(남색)에 맞춘다.
   ══════════════════════════════════════════════════════════════ */
:root{ --arife-nav-height:68px; }

.site-nav:not(#_):not(#_){
  height:68px!important;
  min-height:68px!important;
  max-height:68px!important;
  padding:0 clamp(16px,2.2vw,30px)!important;
  grid-template-columns:112px minmax(0,1fr) auto!important;
  gap:14px!important;
  border-bottom:1px solid rgba(120,162,212,.18)!important;
  /* v2600: 8% 투명이라 아래 내용이 메뉴 막대 위로 비쳤다.
     실제로 카드의 'VERIFIED · ORBIT MOTORS' 가 '요금' 옆에 겹쳐 보였다.
     밑바탕과 같은 색으로 꽉 채운다 — 보이는 색은 그대로다. */
  background:#060f1b!important;
  box-shadow:0 10px 26px rgba(0,0,0,.26)!important;
}

.site-nav:not(#_):not(#_) .brand{
  width:auto!important;
  min-width:0!important;
  height:68px!important;
}
.site-nav:not(#_):not(#_) .company-logo{
  width:auto!important;
  min-width:0!important;
  max-width:112px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
}

.site-nav:not(#_):not(#_) .nav-links{
  height:68px!important;
  gap:2px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

.site-nav:not(#_):not(#_) .nav-links a{
  height:36px!important;
  min-height:36px!important;
  padding:0 11px!important;
  border-radius:11px!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
  line-height:1!important;
}
.site-nav:not(#_):not(#_) .nav-links a.active{
  background:rgba(79,211,234,.12)!important;
  color:#eaf7ff!important;
}

.site-nav:not(#_):not(#_) .nav-actions{
  height:68px!important;
  gap:8px!important;
}
.site-nav:not(#_):not(#_) .nav-actions .nav-pill{
  min-height:36px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  font-size:11px!important;
  font-weight:800!important;
}

@media (max-width:1180px){
  .site-nav:not(#_):not(#_){ grid-template-columns:96px minmax(0,1fr) auto!important; }
  .site-nav:not(#_):not(#_) .nav-links a{ padding:0 8px!important; font-size:12px!important; }
}

/* 페이지 바탕색도 한 값으로 (클로드코드)
   화면마다 왼쪽 아래 귀퉁이 실측이 rgb(2,8,14)~rgb(8,10,15) 로 조금씩 달라
   고정 막대 아래 틈이 어떤 장에서는 새까맣게, 어떤 장에서는 남색으로 보였다.
   각 장의 무늬(gradient)는 그대로 두고 밑바탕만 같게 맞춘다. */
/* 2026-09-05 — 이 두 줄이 테마를 안 가리고 남색을 깔아서, body.a-glass-page 가
   없는 화면(404·desk·auth·admin·elements·reset-password·personalization-admin)은
   밝은 화면에서도 바탕이 남색이었고 그 위에 검은 글자가 얹혔다(실측 대비 1.37).
   어두운 화면에만 남색을, 밝은 화면에는 a-glass-page 와 같은 #dbe3ef 를 깐다. */
html[data-theme="dark"]:not(#_):not(#_){ background-color:#060f1b!important; }
html[data-theme="dark"] body:not(#_):not(#_){ background-color:#060f1b!important; }
html:not([data-theme="dark"]):not(#_):not(#_){ background-color:#dbe3ef!important; }
html:not([data-theme="dark"]) body:not(#_):not(#_){ background-color:transparent!important; }

/* 영화 제작소 메뉴(`.project-global-nav-v311`)를 오른쪽 끝에 붙이던 예전 규칙은
   뺐다. 이제 아래 v2510 이 45장과 같은 자리(화면 정중앙)에 놓는다.
   자식이 넷이 되어도 자리는 아래에서 못 박으므로 4열로 늘릴 필요가 없다. */

/* ══════════════════════════════════════════════════════════════
   상단 메뉴 — 자리와 접히는 폭을 하나로 (v2510 · v2520, 클로드코드)

   ① 자리
   메뉴는 '왼쪽 로고 칸을 뺀 나머지의 가운데'에 있었다. 오른쪽 단추 묶음
   폭이 장마다 달라(175px ~ 282px) 메뉴 중심이 장을 넘길 때마다 흔들렸다
   — 실측 632 · 658 · 689px. 격자 칸을 1fr 로 반씩 나누는 방법은 981px
   부근에서 가운데 칸이 0px 으로 찌그러져 못 쓴다. 그래서 칸 계산에
   기대지 않고 화면 정중앙에 직접 붙인다.

   ② 접히는 폭
   회차 묶음마다 접는 폭이 따로 적혀 있었다 — 1180 · 1100 · 1024 · 1000
   · 980 · 971px, 여섯 가지. 그래서 창을 줄이면 장마다 다르게 접혔다.

   기준을 **1200px** 하나로 잡는다. 가장 넓은 메뉴(7칸 560px)가 오른쪽
   단추 묶음(최대 282px)과 부딪히지 않으려면 최소 1176px 이 필요하다 —
   숫자가 정한 값이지 취향이 아니다(1181px 에서는 틈이 2px 까지 좁아져 1200px 로 잡았다).
   이보다 좁으면 ☰ 로 접는다.

   (영화 제작소 메뉴는 네 칸뿐이라 훨씬 좁은 폭까지 그대로 둔다.
    자세한 건 arife-cinema-structure-v2500.css)
   ══════════════════════════════════════════════════════════════ */

/* 가운데 정렬 — 사이트 공통 메뉴 */
@media (min-width:1201px){
  .site-nav:not(#_):not(#_) > .brand{ grid-column:1!important; grid-row:1!important; justify-self:start!important; }
  .site-nav:not(#_):not(#_) > .nav-actions{ grid-column:3!important; grid-row:1!important; justify-self:end!important; }
  .site-nav:not(#_):not(#_) > .nav-links{
    position:absolute!important;
    left:50%!important; top:0!important; right:auto!important; bottom:auto!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    justify-self:center!important;
    z-index:2!important;
    display:flex!important;
  }
  .site-nav:not(#_):not(#_) > .menu-button{ display:none!important; }
}

/* 1180px 아래는 어느 장이든 ☰ */
@media (max-width:1200px){
  .site-nav:not(#_):not(#_) > .nav-links:not(.open){ display:none!important; }
  .site-nav:not(#_):not(#_) > .menu-button{ display:grid!important; }
}

/* 가운데 정렬 — 영화 제작소 메뉴(네 칸)는 900px 까지 한 줄로 버틴다 */
@media (min-width:901px){
  .site-nav:not(#_):not(#_) > .project-global-nav-v311{
    position:absolute!important;
    left:50%!important; top:0!important; right:auto!important; bottom:auto!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    justify-self:center!important;
    z-index:2!important;
  }
  .site-nav:not(#_):not(#_):has(.project-global-nav-v311) > .brand{ grid-column:1!important; grid-row:1!important; justify-self:start!important; }
  .site-nav:not(#_):not(#_):has(.project-global-nav-v311) > .nav-actions{ grid-column:3!important; grid-row:1!important; justify-self:end!important; }
}