/* 상단 선반 바 — 위층은 메뉴 글자, 아래층은 마스코트가 걷는 선반 */
:root{--nav-height:76px;--shelf-body:60px;--nav-link-pad:11px}
.site-nav{height:var(--nav-height);align-items:flex-end;gap:0;border-bottom:0;overflow:hidden}
.site-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.site-nav .nav-logo{position:relative;z-index:2;display:flex;align-items:center;height:var(--shelf-body);padding:0;font:0/0 a;transform:translateY(calc(var(--shelf-body) * -.2))}
.site-nav .nav-logo img{display:block;flex:none;width:auto;height:52px;margin-left:-5px;object-fit:contain}
.site-nav nav{position:relative;z-index:2;flex:1;height:var(--shelf-body);display:flex;align-items:center;justify-content:space-around;gap:0;padding:0 0 0 6%;transform:translateY(calc(var(--shelf-body) * -.2))}
/* 감사 #25·#29·#36·#85: 흐림을 opacity 로 주면 포커스 테두리까지 같이 지워진다. 그래서 흐림은 글자색으로만 준다.
   #6f7077 = 흰 바 위에서 대비 4.93:1 (WCAG AA 기준 4.5:1 통과).
   감사 #95·[22]: 누르는 영역을 21px → 35px 로 넓혔지만, min-height:0 이 styles.css 의 44px 기준을 지우고 있었다.
   이제 44px 를 그대로 살린다. 글자는 flex 로 가운데 정렬해 보이는 위치가 전과 같다(상자만 커진다). */
.site-nav nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--nav-link-pad) 6px;font:500 13px/1 var(--mono);letter-spacing:.1em;color:#6f7077;transition:color .3s}
.site-nav nav a:after{display:none}
.site-nav nav a:hover{color:var(--ink)}
/* 지금 보고 있는 구역은 글자를 비우고 캐릭터가 그 자리에 선다 (요소 자체는 그대로라 포커스 테두리는 그려진다) */
.site-nav nav a.is-here{color:transparent}
/* 캐릭터 그림이 끊겨 자리를 비우면, 비워 뒀던 현재 구역 글자를 되살린다 (현재 위치 표시가 통째로 사라지지 않게) */
.site-nav.has-broken-mascot nav a.is-here{color:#6f7077}
/* 현재 메뉴의 글자를 읽거나 누를 때는 캐릭터 표시를 숨겨 글자 위에 겹치지 않는다. */
.site-nav nav a.is-here:focus-visible{color:var(--ink)}
.site-nav:has(nav a.is-here:focus-visible) .nav-mascot{opacity:0;visibility:hidden;transition:none}
/* 2026-10-08 r6 g3: 마우스 올리기(:hover)는 마우스가 있는 기기에서만. 휴대폰은 탭한 메뉴에 :hover 가 남아 도착한 캐릭터가 계속 숨었다. */
@media(hover:hover) and (pointer:fine){
  .site-nav nav a.is-here:hover{color:var(--ink)}
  .site-nav:has(nav a.is-here:hover) .nav-mascot{opacity:0;visibility:hidden;transition:none}
}
/* 마지막 화면에서는 바를 접어 둔다 */
.site-nav.is-away,.site-nav.is-visible.is-away{transform:translateY(-101%);visibility:hidden;pointer-events:none}
/* 선반 위를 걷는 마스코트 */
.nav-mascot{position:absolute;left:0;bottom:0;z-index:1;pointer-events:none;transform-origin:50% 100%;will-change:transform,left;transition:opacity .2s}
.nav-mascot.is-yielding{opacity:0!important;visibility:hidden!important;transition:none} /* 2026-10-09 r8-k1: ORIGINAL 이 바 선에 걸친 전환 중에는 비켜 준다(nav-shelf.js theaterOwnsBar) */
/* 감사 #7·#102: 자리에 서면 JS 루프를 재운다. 숨쉬기만 CSS 로 이어받아 메인 스레드 비용 없이 살아 있게 한다 */
.nav-mascot.is-parked{animation:nav-mascot-breathe 3.6s ease-in-out infinite}
@keyframes nav-mascot-breathe{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(1) translateY(-1.4px)}} /* 2026-10-08 r5: 정지(idle) 숨쉬기는 반전 없이 고정 — --nav-dir 를 더 쓰지 않는다 */
.nav-puff{position:absolute;bottom:2px;z-index:1;width:5px;height:5px;border-radius:50%;background:rgb(23 25 35/.2);opacity:0;pointer-events:none}

@media(max-width:760px){
  :root{--nav-height:64px;--shelf-body:48px;--nav-link-pad:13px}
  .site-nav{padding:0 16px}
  .site-nav .nav-logo{height:var(--shelf-body)}
  .site-nav .nav-logo img{height:40px}
  .site-nav nav{height:var(--shelf-body);padding:0 0 0 4%}
  /* 감사 #95·[22]: 누르는 영역은 위 규칙의 min-height:44px 가 맡는다(전에는 18.5px→36.5px 였다).
     좌우 여백은 320px 화면에서 메뉴가 넘치지 않게 1px 로 둔다.
     글자는 화면이 넓어지는 만큼만 커진다(320px 에서는 지금과 같은 10.5px). */
  .site-nav nav a{font-size:clamp(10.5px,3.05vw,12px);letter-spacing:.06em;padding:var(--nav-link-pad) 1px}
}
@media(max-width:430px){
  .site-nav{padding-inline:10px;gap:8px;overflow:hidden}
  .site-nav .nav-logo img{height:34px}
  .site-nav nav{padding-left:0;justify-content:space-between;min-width:0;gap:4px}
  .site-nav nav a{font-size:10px;letter-spacing:.02em;padding-inline:0;white-space:nowrap}
}
/* 움직임을 줄이는 설정이면 캐릭터를 세워두고 밑줄로 표시한다 */
.reduced-motion .nav-mascot{display:none}
.reduced-motion .site-nav nav a.is-here{color:var(--ink);border-bottom:2px solid var(--cobalt);padding-bottom:calc(var(--nav-link-pad) - 2px)}
@media(prefers-reduced-motion:reduce){
  .nav-mascot{display:none}
  .nav-mascot.is-parked{animation:none}
  .site-nav nav a.is-here{color:var(--ink);border-bottom:2px solid var(--cobalt);padding-bottom:calc(var(--nav-link-pad) - 2px)}
}

/* ── 2026-09-18 헤더 r1: 오른쪽 끝 도구 (심플 모드 · 언어 KR/ENG) ────────────
   나브 글자와 같은 모노/자간을 쓰고, 버튼 높이는 32px, 간격은 4px 체계(4·8)로 맞춘다.
   .site-nav 는 space-between + nav{flex:1} 이라 이 묶음이 자동으로 오른쪽 끝에 선다.
   보임/숨김은 기존 표시 로직(app.js applyNav 의 is-visible·inert)을 그대로 따른다. */
.site-nav .nav-tools{position:relative;z-index:2;display:flex;align-items:center;gap:8px;height:var(--shelf-body);flex:none;transform:translateY(calc(var(--shelf-body) * -.2))}
.site-nav .nav-tool{position:static;inset:auto;min-height:0;z-index:auto;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 8px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
/* 켜짐은 색 반전, 마우스를 올린 것은 옅은 회색 — 두 상태가 같아 보이지 않게 구분한다 */
.site-nav .nav-tool:hover{background:#f1f1f3}
.site-nav .nav-tool[aria-pressed=true]{background:var(--ink);color:var(--white)}
.site-nav .nav-tool[aria-pressed=true]:hover{background:#3a3c47}
.site-nav .nav-tool__state{font-size:10px;letter-spacing:.06em;opacity:.6}
.site-nav .nav-tool[aria-pressed=true] .nav-tool__state{opacity:1}
.site-nav .nav-lang{display:flex;align-items:center;gap:0}
.site-nav .nav-lang__btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 4px;border:0;background:none;color:#6f7077;font:500 12px/1 var(--mono);letter-spacing:.1em;transition:color .2s}
.site-nav .nav-lang__btn:hover{color:var(--ink)}
.site-nav .nav-lang__btn.is-on{color:var(--ink);font-weight:700}
.site-nav .nav-lang__bar{color:#c7c8cd;font:12px/1 var(--mono)}
.site-nav .nav-lang__short{display:none}
/* 캐릭터가 오른쪽 도구 위로 올라가지 않게 한다(도구가 늘 위층) */
.site-nav .nav-mascot{z-index:1}
.site-nav:has(a[href="#original"][aria-current="location"]){
  --nav-theater-ink:#f7efe5;
  background:linear-gradient(180deg,rgba(15,7,5,.98),rgba(24,10,8,.94));
  color:var(--nav-theater-ink);
  border-bottom-color:rgba(247,239,229,.5);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
}
.site-nav:has(a[href="#original"][aria-current="location"]):after{background:rgba(247,239,229,.58)}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-logo img{filter:brightness(0) invert(1)}
.site-nav:has(a[href="#original"][aria-current="location"]) nav a,
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-lang__btn{color:rgba(247,239,229,.72)}
.site-nav:has(a[href="#original"][aria-current="location"]) nav a:hover,
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-lang__btn:hover,
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-lang__btn.is-on{color:var(--nav-theater-ink)}
.site-nav:has(a[href="#original"][aria-current="location"]) nav a[href="#original"]{color:transparent}
.site-nav:has(a[href="#original"][aria-current="location"]) nav a[href="#original"]:hover,
.site-nav:has(a[href="#original"][aria-current="location"]) nav a[href="#original"]:focus-visible{color:var(--nav-theater-ink)}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-tool{
  color:var(--nav-theater-ink);
  border-color:rgba(247,239,229,.54);
  background:rgba(255,255,255,.06);
}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-tool:hover{background:rgba(255,255,255,.14)}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-tool[aria-pressed=true]{background:var(--nav-theater-ink);color:#180a08}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-lang__bar{color:rgba(247,239,229,.35)}
.site-nav:has(a[href="#original"][aria-current="location"]) .nav-mascot{opacity:0!important;visibility:hidden}

@media(max-width:760px){
  .site-nav .nav-tools{gap:6px}
  .site-nav .nav-tool{height:30px;padding:0 6px;font-size:10px;letter-spacing:.06em}
  .site-nav .nav-lang__btn{height:30px;font-size:11px;letter-spacing:.06em;padding:0 3px}
  .site-nav .nav-lang__bar{font-size:11px}
}
@media(max-width:520px){
  /* 좁은 화면에서는 켬/끔 글자를 빼고 색 반전으로만 상태를 보인다(aria-pressed 는 그대로) */
  .site-nav .nav-tools{gap:4px}
  .site-nav .nav-tool__state{display:none}
  .site-nav .nav-tool{height:28px;padding:0 5px;font-size:9.5px;letter-spacing:.04em}
  .site-nav .nav-lang__btn{height:28px;font-size:10px;letter-spacing:.02em;padding:0 2px}
  .site-nav .nav-lang__bar{font-size:10px}
  .site-nav .nav-lang__full{display:none}
  .site-nav .nav-lang__short{display:inline}
  /* 나브 글자와 겹치지 않게 링크 간격을 줄인다 */
  .site-nav nav{padding-left:0;gap:2px}
}
@media(max-width:400px){
  /* 360px 영문 모드에서 CONTACT 글자와 도구가 맞닿았다(빈틈 0). 도구만 더 줄여 빈틈을 낸다. */
  .site-nav .nav-tools{gap:3px}
  .site-nav .nav-tool{padding:0 4px;font-size:9px;letter-spacing:0}
  .site-nav .nav-lang__btn{padding:0 1px;font-size:9px;letter-spacing:0}
  .site-nav .nav-lang__bar{font-size:9px}
  /* 메뉴 글자끼리도 붙지 않게: 로고를 조금 줄여 그만큼을 글자 사이 빈틈으로 돌린다 */
  .site-nav .nav-logo img{height:30px}
  .site-nav nav{gap:6px}
}