/* ═══════════════════════════════════════════════════
   공용 통합 메뉴 — "턱시도" 풀스크린 오버레이
   벤치마킹: sanggong.co.kr (Asli 템플릿 패턴) 번안
   · 상단바 = 로고 + CTA + 비대칭 2줄 버거만
   · 오버레이 = 블랙 전면, 우측정렬 초경량 대형 타이포
   · 호버 = 한글↑ → 오렌지 영문 라벨 세로 롤
   3페이지(/, /academy, /online) 공용 — 마크업은 각 페이지에 정적(SEO).
   ═══════════════════════════════════════════════════ */

/* ── 버거 버튼 (우측 상단) ─────────────── */
.mn-burger{
  display:flex;align-items:center;gap:11px;
  background:none;border:0;cursor:pointer;padding:10px 0 10px 6px;
  -webkit-tap-highlight-color:transparent;
}
/* 자석은 내용물만 움직인다 — 히트박스(버튼)는 고정(빠른 클릭 미스 방지) */
.mn-burger>span{transition:transform .35s cubic-bezier(.19,1,.22,1)}
.mn-burger-label{
  position:relative;overflow:hidden;height:13px;
  font-family:var(--body);font-size:10.5px;font-weight:700;
  letter-spacing:.3em;color:var(--orange);line-height:13px;
}
/* 3단 롤 — 기본 MENU · 호버 OPEN · 열림 CLOSE (상공 문법) */
.mn-burger-label i{
  display:block;font-style:normal;
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.mn-burger:hover .mn-burger-label i{transform:translateY(-100%)}
body.mn-open .mn-burger-label i,
body.mn-open .mn-burger:hover .mn-burger-label i{transform:translateY(-200%)}
/* 비대칭 2줄 — 위 짧고 아래 길다 (상공 문법) */
.mn-burger-lines{
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;width:30px;
}
.mn-burger-lines i{
  position:relative;overflow:hidden;
  display:block;height:2.5px;border-radius:2px;background:#fff;
  transition:transform .5s cubic-bezier(.19,1,.22,1),width .3s ease;
}
.mn-burger-lines i:nth-child(1){width:15px}
.mn-burger-lines i:nth-child(2){width:30px}
/* 호버 = 줄 길이 등화 + 오렌지 채움 바가 좌→우로 밀려들어옴 (상공 실측 easing) */
.mn-burger-lines i::after{
  content:"";position:absolute;inset:0;background:var(--orange);
  transform:translateX(-101%);
  transition:transform .3s cubic-bezier(.785,.135,.15,.86);
}
.mn-burger-lines i:nth-child(2)::after{transition-delay:.06s}
.mn-burger:hover .mn-burger-lines i{width:30px}
.mn-burger:hover .mn-burger-lines i::after{transform:translateX(0)}
/* 열림 = X자 */
body.mn-open .mn-burger-lines i{width:30px}
body.mn-open .mn-burger-lines i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
body.mn-open .mn-burger-lines i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}

/* ── 상단바 — 항상 커튼 위층(닫을 땐 로고가 안 사라진다, james) ── */
header#hd{z-index:160}

/* ── 로고 유령 시퀀스(james 2026-07-11): 커튼 촤악 = 로고 순간 증발 →
   메뉴 착지 후 스르륵 귀환 → 마지막에 조로 눈빛이 푸른색으로 번쩍 ── */
body.mn-open .brand{animation:mn-logo-ghost 2.1s ease both}
@keyframes mn-logo-ghost{
  0%{opacity:1;filter:none}
  6%{opacity:0;filter:blur(2px)}    /* 커튼과 동시에 순간 증발 */
  55%{opacity:0;filter:blur(7px)}   /* 메뉴 뜨는 동안 잠적 */
  100%{opacity:1;filter:blur(0)}    /* 유령처럼 스르륵 귀환 */
}
/* 오른쪽 눈(주황 스파클)이 주황→푸른색으로 번쩍 (james) — 리얼 글린트 v2:
   예열(살짝 죽음)→1차 번쩍→깜빡→2차 강섬광(확대+비틀림+3겹 글로우)→여운→주황 복귀 */
body.mn-open .brand svg path[fill="#e87f00"]{
  transform-box:fill-box;transform-origin:center;
  animation:mn-eye-flash 1.9s cubic-bezier(.36,.07,.19,.97) 2.2s both;
}
/* 메뉴발 이동(스크롤 출발) 순간에도 번쩍 — 조로가 안내한다(james) */
body.mn-eyeflash .brand svg path[fill="#e87f00"]{
  transform-box:fill-box;transform-origin:center;
  animation:mn-eye-flash 1.9s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes mn-eye-flash{
  0%{fill:#e87f00;transform:scale(1);filter:none}
  10%{fill:#b96504;transform:scale(.9);filter:none}
  20%{fill:#7fd8ff;transform:scale(1.32) rotate(9deg);filter:drop-shadow(0 0 8px rgba(120,205,255,1)) drop-shadow(0 0 20px rgba(56,160,255,.8))}
  30%{fill:#3f9fe0;transform:scale(1.04);filter:drop-shadow(0 0 4px rgba(90,180,255,.5))}
  42%{fill:#eaf8ff;transform:scale(1.5) rotate(-7deg);filter:drop-shadow(0 0 10px rgba(160,220,255,1)) drop-shadow(0 0 30px rgba(64,168,255,.9)) drop-shadow(0 0 54px rgba(40,140,255,.5))}
  62%{fill:#6fc8ff;transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(96,192,255,.6))}
  100%{fill:#e87f00;transform:scale(1);filter:none}
}
.nav .cta{transition:background .2s,color .2s,opacity .35s ease,transform .35s ease}
body.mn-open header{background:transparent!important;box-shadow:none!important}
body.mn-open .nav .cta{opacity:0;transform:translateY(-12px);pointer-events:none}
body.mn-open{overflow:hidden}

/* ── 풀스크린 오버레이 — 블랙 커튼 낙하 + 감쇠 스프링 안착 (james 확정 85점 정본) ── */
.mn-overlay{
  position:fixed;inset:0;z-index:150;background:var(--black);
  visibility:hidden;transform:translateY(-102%);
  transition:transform .85s cubic-bezier(.7,0,.3,1),visibility 0s linear .85s;
  overflow-y:auto;overscroll-behavior:contain;
  will-change:transform;
}
body.mn-open .mn-overlay{
  visibility:visible;transform:translateY(0);
  /* 스프링 폴백(구형) → linear() 감쇠 스프링(지원 브라우저): 5% 오버슛 후 안착 */
  transition:transform 1.05s cubic-bezier(.22,1.18,.36,1);
  transition-timing-function:linear(
    0, .055 5.4%, .21 10.7%, .451 16.1%, .742 22%, .933 26.4%,
    1.027 30.9%, 1.062 35.4%, 1.059 40.3%, 1.028 46.9%,
    1.005 53.9%, .994 62.4%, .998 74.1%, 1
  );
}
.mn-inner{
  min-height:100%;max-width:1180px;margin:0 auto;
  padding:110px clamp(20px,4vw,48px) 48px;
  display:grid;grid-template-columns:auto 1fr;gap:44px;
  align-content:center;  /* 행(=메뉴 블록 높이) 자체는 세로 중앙 */
}

/* ── 메뉴 본문 — 우측정렬 초경량 대형 타이포 ── */
.mn-menu ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:clamp(2px,.9vh,10px);
}
/* 마스크 라인 리빌 — 세로만 클립, 가로는 개방(긴 영문 롤이 왼쪽으로 뻗도록) */
.mn-menu li{-webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw)}
.mn-menu a{
  display:block;text-decoration:none;
  font-family:var(--body);font-weight:200;
  font-size:clamp(34px,7vh,84px);line-height:1.14;letter-spacing:-.01em;
  color:var(--white);text-align:right;
  transform:translateY(115%);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
body.mn-open .mn-menu a{
  transform:none;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(.42s + var(--i,0)*.06s);  /* 커튼 안착 직후 순차 등장 (스태거 60ms 추정치) */
}
/* 호버 세로 롤 — 한글만 보이다가, 호버 시 같은 크기 오렌지 영문이 올라온다 (james 확정) */
.mn-roll{
  position:relative;display:block;
  -webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw);
}
.mn-kr{display:block;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.mn-en{
  position:absolute;top:0;bottom:0;right:0;left:auto;width:max-content;
  color:var(--orange);text-transform:uppercase;white-space:nowrap;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.mn-menu a:hover .mn-kr,.mn-menu a:focus-visible .mn-kr,.mn-menu a.is-hover .mn-kr{transform:translateY(-100%)}
.mn-menu a:hover .mn-en,.mn-menu a:focus-visible .mn-en,.mn-menu a.is-hover .mn-en{transform:translateY(0)}

/* ── 좌측 연락처 위젯 ──────────────────── */
.mn-aside{
  /* 데스크톱 = 좌측 열, 하단을 문의하기(메뉴 마지막 줄) 하단에 정렬(james) */
  align-self:end;
  display:flex;flex-direction:column;gap:26px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
}
body.mn-open .mn-aside{
  opacity:1;transform:none;
  transition:opacity .6s ease .6s,transform .6s ease .6s;
}
.mn-aside dt{
  font-size:10.5px;font-weight:700;letter-spacing:.4em;
  color:var(--orange);text-transform:uppercase;margin-bottom:7px;
}
.mn-aside dd{margin:0;font-size:15px;line-height:1.6}
.mn-aside dd a{color:var(--white);text-decoration:none;transition:color .2s}
.mn-aside dd a:hover{color:var(--orange)}

/* ── 모바일 ────────────────────────────── */
@media(max-width:860px){
  .mn-inner{grid-template-columns:1fr;padding:96px 24px 40px}
  .mn-menu{order:0}
  .mn-aside{order:1;gap:18px;align-self:auto}  /* 모바일 = 메뉴 "아래" 흐름 */
  .mn-menu a{font-size:clamp(30px,5.6vh,52px)}
  .mn-aside dd{font-size:14px}

  /* 모바일 = 커튼·순차등장 없이 즉시 나타나기(james: 스크롤 연출 정신사나움) */
  .mn-overlay{transform:none;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
  body.mn-open .mn-overlay{transform:none;opacity:1;transition:opacity .25s ease}
  .mn-menu a,body.mn-open .mn-menu a{transform:none;transition:none;transition-delay:0s}
  .mn-aside,body.mn-open .mn-aside{opacity:1;transform:none;transition:none}
}
@media(max-width:400px){
  .nav .cta{display:none}  /* 초소형 화면 — 문의하기는 오버레이 안에 있음 */
}

/* ── 원형 커서 팔로워 (데스크톱 전용, james: 동그란 박스) ── */
html.cur-active,html.cur-active body,html.cur-active a,html.cur-active button{cursor:none}
.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:999;opacity:0;
}
.cur-dot{width:5px;height:5px;background:var(--orange)}
.cur-ring{
  width:34px;height:34px;border:1.5px solid rgba(255,255,255,.5);
  transition:width .3s ease,height .3s ease,border-color .3s ease,opacity .3s ease;
}
html.cur-active .cur-dot,html.cur-active .cur-ring{opacity:1}
.cur-ring.on{width:58px;height:58px;border-color:var(--orange)}
.cur-ring.on-big{width:86px;height:86px;border-color:var(--orange)}  /* 대형 메뉴 타이포 위 */

/* ── 접근성 — 모션 최소화 ──────────────── */
@media(prefers-reduced-motion:reduce){
  .mn-overlay,.mn-menu a,.mn-kr,.mn-en,.mn-aside,
  .mn-burger,.mn-burger-lines i,.mn-burger-lines i::after,.mn-burger-label i{transition:none!important}
  body.mn-open .brand,body.mn-open .brand svg *,body.mn-eyeflash .brand svg *{animation:none!important}
  .cur-dot,.cur-ring{display:none}
}