/* ==========================================================================
   menu.html 전용 — 전체 메뉴 페이지.

   2026-07-23: 1차 제작(숫자 붙은 flowing-list) 이후, 사용자가 레퍼런스
   스크린샷으로 새 방향을 지정 — about / work / contact 딱 세 단어만 화면
   중앙에 크게, 같은 글자 크기로. Work를 마우스오버하면 6개 시공 카테고리가
   한글로, Contact를 마우스오버하면 연락 수단들이 영문으로 아래에 펼쳐짐
   (펼쳐지는 항목도 위 3단어와 완전히 같은 글자 크기). 컨테이너 전체가
   세로 중앙정렬이라 펼쳐질 때 위/아래 항목이 자연스럽게 밀려남.

   2026-07-27: "너무 빨리 펼쳐지고 세부항목들이 다 똑같아서 구분이 안 된다"는
   피드백으로 wiggle 펀치 효과를 걷어내고, 인덱스 페이지(index.html의
   .category)에서 이미 검증된 두 가지 모션 언어를 그대로 재사용함:
   - about/work/contact 라벨 → 히어로/카테고리 제목과 동일한 "드르륵" 글자 롤
     (js/category-subnav.js의 wrapRollChars가 .mm-label을 감싸줌)
   - work/contact 아래로 펼쳐지는 세부 항목 → .category .sub-list li와 동일한
     "아래→위 슬라이드+페이드, 항목별 stagger, 개별 hover 시 밑줄" 패턴

   2026-07-27 (2차): "펼쳐지고 사라지는 속도가 너무 빠르다"는 피드백으로
   max-height/opacity/transform 트랜지션 지속시간과 stagger 간격을 전체적으로
   늘림(인덱스 페이지보다 이 페이지는 화면 전체를 쓰는 만큼 조금 더 여유있게).

   2026-07-29 (3차): Contact가 독립형 컨택 페이지(contact-v2.html)로 완성되면서,
   대표님이 "Contact도 세부메뉴 펼침 대신 About처럼 스르륵 롤 효과만 주고
   바로 연결해달라" 요청 — menu.html에서 Contact의 <button class="mm-trigger">
   + <div class="mm-sublist mm-sublist--en">(연락 수단 6개 펼침) 구조를 삭제,
   About과 동일한 <a class="mm-label"> 단일 링크로 교체(마크업이 같으니
   기존 CSS 셀렉터가 그대로 적용되어 별도 규칙 추가 불필요). 더 이상 쓰이지
   않는 .mm-sublist--en 규칙은 삭제.
   ========================================================================== */

body.work-dark{
  background:var(--color-noir);
  color:var(--color-blanc);
}

.menu-main{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mm-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.6vw,22px);
  text-align:center;
}

.mm-label,
.mm-nav > a.mm-label{
  display:inline-block;
  font:700 normal clamp(28px,4.6vw,60px)/1.15 var(--font-kr);
  letter-spacing:-.01em;
  text-transform:lowercase;
  color:var(--color-blanc);
}

.mm-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Work/Contact 트리거 — 버튼이지만 About과 완전히 같은 타이포로 보이게 */
.mm-trigger{
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  font:inherit;
}

/* 펼쳐지는 서브 목록 — max-height 트랜지션으로 "아래로 나옴". 전체가
   flex column + 부모(.menu-main)가 justify-content:center라 펼쳐지는 만큼
   위/아래 다른 항목들이 자연스럽게 밀려남 */
.mm-sublist{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(6px,1vw,14px);
  max-height:0;
  overflow:hidden;
  transition:max-height .8s cubic-bezier(.16,1,.3,1), margin-top .8s cubic-bezier(.16,1,.3,1);
  margin-top:0;
}
.mm-item:hover .mm-sublist,
.mm-item:focus-within .mm-sublist,
.mm-item.is-open .mm-sublist{
  max-height:900px;
  margin-top:clamp(10px,1.6vw,22px);
}

/* 세부 항목 — 인덱스 페이지 .category .sub-list li와 동일하게, 아래(8px)에서
   위로 슬라이드하며 페이드인. 항목별로 stagger를 줘서 순서대로 "주르륵"
   나오도록(가장 아래/라벨에 가까운 항목부터 먼저) */
.mm-sublist a{
  display:inline-block;
  font:700 normal clamp(28px,4.6vw,60px)/1.15 var(--font-kr);
  letter-spacing:-.01em;
  color:var(--color-blanc);
  text-transform:lowercase;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1), text-decoration-color .2s ease;
}
.mm-item:hover .mm-sublist a,
.mm-item:focus-within .mm-sublist a,
.mm-item.is-open .mm-sublist a{
  opacity:1;
  transform:translateY(0);
}
.mm-sublist a:nth-last-child(1){ transition-delay:0s; }
.mm-sublist a:nth-last-child(2){ transition-delay:.08s; }
.mm-sublist a:nth-last-child(3){ transition-delay:.16s; }
.mm-sublist a:nth-last-child(4){ transition-delay:.24s; }
.mm-sublist a:nth-last-child(5){ transition-delay:.32s; }
.mm-sublist a:nth-last-child(6){ transition-delay:.4s; }
.mm-item:not(:hover):not(:focus-within):not(.is-open) .mm-sublist a{ transition-delay:0s !important; }

/* 낱개 항목 마우스오버 — wiggle 대신 인덱스 세부 항목과 동일하게 밑줄만 */
.mm-sublist a:hover,
.mm-sublist a:focus-visible{
  text-decoration:underline;
}

/* about/work/contact 최상위 라벨 — 히어로/카테고리 제목과 동일한 "드르륵" 글자 롤.
   js/category-subnav.js가 텍스트를 .roll(.ra/.rb) 스팬으로 감싸두면, 나머지는
   순수 CSS :hover/:focus-within로 재생됨(css/style.css의 .category h3 .roll과
   완전히 동일한 패턴) */
.mm-label .roll{ position:relative; display:inline-block; overflow:hidden; vertical-align:top; }
.mm-label .roll .ra,
.mm-label .roll .rb{ display:block; transition:transform .5s cubic-bezier(.16,.03,.08,1); transition-delay:var(--rd,0ms); }
.mm-label .roll .rb{ position:absolute; left:0; top:100%; }
.mm-item:hover .mm-label .roll .ra,
.mm-item:hover .mm-label .roll .rb,
.mm-trigger:focus-visible .mm-label .roll .ra,
.mm-trigger:focus-visible .mm-label .roll .rb,
.mm-label:focus-visible .roll .ra,
.mm-label:focus-visible .roll .rb,
.mm-item:focus-within .mm-label .roll .ra,
.mm-item:focus-within .mm-label .roll .rb{
  transform:translateY(-100%);
}

@media (prefers-reduced-motion:reduce){
  .mm-sublist a,
  .mm-label .roll .ra,
  .mm-label .roll .rb{ transition:none; }
}