/* 상단 선반 바 — 위층은 메뉴 글자, 아래층은 마스코트가 걷는 선반 */
:root{--nav-height:76px;--shelf-body:60px;--shelf-face:68px;--nav-link-pad:11px}
.site-nav{height:var(--nav-height);align-items:flex-end;gap:0;border-bottom:0;overflow:visible}
.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;transform:translateY(calc(var(--shelf-body) * -.2))}
.site-nav .nav-logo .eb-mark{display:inline-block;line-height:0;filter:none}
.site-nav .nav-logo .eb-mark img{display:block;width:148px;height:auto}
.site-nav .nav-logo .eb-wordmark{display:inline-flex;filter:none}
.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))}
.site-nav .lang-switch{position:relative;z-index:2;flex:0 0 auto;color:var(--ink);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(--caps);letter-spacing:.14em;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:var(--ink);border-bottom:2px solid var(--cobalt);padding-bottom:calc(var(--nav-link-pad) - 2px)}
/* 마지막 화면에서는 바를 접어 둔다 */
.site-nav.is-away,.site-nav.is-visible.is-away{transform:translateY(-101%);visibility:hidden;pointer-events:none}
.nav-mascot,.nav-puff{display:none!important}

@media(max-width:760px){
  :root{--nav-height:64px;--shelf-body:48px;--shelf-face:50px;--nav-link-pad:13px}
  .site-nav{padding:0 16px}
  .site-nav .nav-logo{height:var(--shelf-body)}
  /* 폭은 감싸개(.eb-mark)에 준다 — img 만 줄이면 brand-mark.css 의 132px 감싸개가 그대로 남아
     로고 상자가 안 줄고, 그만큼 메뉴가 밀려 CONTACT 가 잘렸다 */
  .site-nav .nav-logo .eb-mark{width:112px}
  .site-nav .nav-logo .eb-mark img{width:100%;height:auto}
  /* 왼쪽 4% 여백이 메뉴를 오른쪽으로 밀어 390px 이하에서 CONTACT 가 잘려 나갔다.
     로고와 첫 메뉴가 붙지 않을 만큼(8px)만 남긴다. */
  .site-nav nav{height:var(--shelf-body);padding:0 0 0 8px}
  /* 누르는 영역은 위 규칙의 min-height:44px 가 맡는다. 좌우 여백은 1px.
     360px 이하에서 네 칸이 선반 폭을 넘지 않는 크기까지 줄어든다. */
  .site-nav nav a{font-size:clamp(9.5px,2.7vw,12px);letter-spacing:.04em;padding:var(--nav-link-pad) 1px}
}

/* Mobile navigation uses the existing links in a vertical, accessible panel.
   Desktop shelf geometry above remains untouched. */
.nav-menu-toggle{display:none}
@media(max-width:768px){
  .site-nav{
    height:64px;
    padding:0 18px;
    align-items:center;
    background:#f6f2e8;
    border-bottom:1px solid rgba(23,25,35,.24);
    overflow:visible;
  }
  .site-nav .nav-logo{height:64px;transform:none;z-index:4}
  .site-nav .nav-logo .eb-mark{width:auto}
  .site-nav .nav-logo .eb-mark img{width:clamp(112px,34vw,142px);height:auto}
  .nav-menu-toggle{
    position:relative;
    z-index:6;
    display:flex;
    flex:0 0 24px;
    width:24px;
    height:24px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:0;
    border:0;
    background:transparent;
    color:#171923;
  }
  .nav-menu-toggle span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .site-nav.is-mobile-menu-open .nav-menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .site-nav.is-mobile-menu-open .nav-menu-toggle span:nth-child(2){opacity:0}
  .site-nav.is-mobile-menu-open .nav-menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .site-nav nav{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    z-index:5;
    display:flex;
    height:250px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px;
    padding:28px 24px 22px;
    background:#f6f2e8;
    border-bottom:1px solid rgba(196,154,85,.42);
    box-shadow:0 14px 30px rgba(23,25,35,.12);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .site-nav.is-mobile-menu-open nav{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .site-nav nav a{
    position:relative;
    justify-content:flex-start;
    min-height:44px;
    padding:8px 0;
    color:#171923;
    font:500 20px/1 var(--caps);
    letter-spacing:.12em;
  }
  .site-nav nav a.is-here{color:#171923;border-bottom:0;padding-bottom:8px}
  .site-nav nav a.is-here::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:10px;
    border-radius:50%;
    background:#c8a15e;
  }
  .site-nav .lang-switch--nav{
    position:absolute;
    top:314px;
    left:24px;
    z-index:6;
    display:flex;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    color:#171923;
    transform:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .site-nav.is-mobile-menu-open .lang-switch--nav{opacity:1;visibility:visible;pointer-events:auto}
  .site-nav .lang-switch--nav button{min-width:36px;min-height:36px;padding:6px 4px;font:500 11px/1 var(--mono);letter-spacing:.12em}
}
/* 360px 이하에서는 로고까지 줄여야 CONTACT 가 들어온다 */
@media(max-width:360px){
  .site-nav .nav-logo .eb-mark{width:88px}
}
/* 움직임을 줄이는 설정이면 캐릭터를 세워두고 밑줄로 표시한다 */
.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)}
}