/* ============================================================
   공용 메뉴 — 우측 하단 버전
   ------------------------------------------------------------
   About 페이지(about/style.css)의 네비 메뉴와 디자인·동작이 같고, 위치만
   우측 상단 → 우측 하단으로 옮긴 것이다. 그래서 커튼도 위에서
   내려오는 대신 아래에서 올라오고, 항목도 아래쪽에 모인다.

   아카이브/크레딧 두 페이지가 같이 쓴다. 각 페이지의 style.css보다
   뒤에 불러야 한다 — 기존 버튼 규칙과 겹칠 때 이 파일이 이기도록.
   ============================================================ */

:root {
  /* 이름을 fg/bg가 아니라 역할로 둔다 — 예전에는 커튼이 검정이라 fg가
     곧 커튼 색이었는데, 흰 커튼으로 뒤집으면서 그 짝이 어긋났다. */
  --menu-curtain: #fff; /* 커튼 색 */
  --menu-ink: #111; /* 커튼 위 글자 색 */
  /* 버튼을 화면 모서리에서 띄우는 거리. 아래 #menu-btn과 항목
     우측 여백이 이 값을 공유해서 세로로 정렬된다. */
  --menu-inset: clamp(16px, 4vw, 40px);

  /* 아래쪽만 따로 쓰는 값 — 안전 영역(홈 인디케이터·사파리 툴바가 차지하는
     높이)을 더한다.

     [왜 필요한가] iOS 사파리는 화면 맨 아래를 터치하면 접혀 있던 툴바를
     도로 펼친다. 버튼이 그 띠 안에 있으면 메뉴를 열려고 누를 때마다 툴바가
     같이 올라와서, 애써 접어둔 상태가 풀리고 페이지가 툴바 위에서 잘린다.
     안전 영역만큼 띄워 그 띠를 피한다. 안전 영역이 없는 기기나 데스크톱
     에서는 env()가 0이라 예전과 똑같은 위치가 된다. */
  --menu-inset-bottom: calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-bottom, 0px));
}

/* ── 2×2 그리드 아이콘 버튼 ────────────────────────
   mix-blend-mode: difference — 밑에 깔린 배경색을 반전시킨다.
   아카이브의 밝은 배경, 크레딧의 검은 배경, 메뉴를 열었을 때의 흰
   커튼 위에서까지 색을 바꾸지 않고 항상 대비가 생긴다. 흰 커튼 위에서는
   흰 사각형이 반전돼 검게 보이므로, 커튼 색을 바꿔도 손댈 것이 없다. */
#menu-btn {
  position: fixed;
  right: var(--menu-inset);
  bottom: var(--menu-inset-bottom);
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(5px, 1.3vw, 8px);
  width: clamp(28px, 7.4vw, 44px);
  height: clamp(28px, 7.4vw, 44px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  mix-blend-mode: difference;
}

/* 칸을 꽉 채우게 두면 버튼 크기만 바꿔도 네 사각형이 같이 따라온다 */
#menu-btn span {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 메뉴를 열면 네 점이 버튼 한가운데로 모여 하나로 겹친다.
   72%의 근거는 about/style.css의 같은 규칙에 적어둔 설명과 동일하다 —
   버튼 크기가 변해도 이동 거리가 같은 비율로 따라오므로 항상 정확히
   가운데에서 만난다. */
body.menu-open #menu-btn span:nth-child(1) { transform: translate( 72%,  72%); }
body.menu-open #menu-btn span:nth-child(2) { transform: translate(-72%,  72%); }
body.menu-open #menu-btn span:nth-child(3) { transform: translate( 72%, -72%); }
body.menu-open #menu-btn span:nth-child(4) { transform: translate(-72%, -72%); }

/* ── 메뉴 오버레이 ─────────────────────────────────
   항목을 아래쪽에 모으므로 justify-content: flex-end.
   padding-bottom은 버튼 자리를 비워두는 몫이다. */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 버튼과 마지막 항목 사이 거리. 버튼이 안전 영역만큼 올라갔으므로
     항목들도 같이 올려야 간격이 그대로 유지된다. */
  padding-bottom: calc(clamp(88px, 22vw, 170px) + env(safe-area-inset-bottom, 0px));
  background: transparent;
  pointer-events: none;
}

/* 메뉴가 열려 있는 동안 뒤 페이지가 따라 스크롤되지 않게 막는다.
   커튼이 화면을 다 덮고 pointer-events도 받으므로, 손가락은 전부 이
   오버레이 위에 닿는다. 여기서 touch-action을 꺼버리면 그 제스처가 스크롤로
   해석되지 않아 뒤가 움직이지 않는다.

   [왜 body에 overflow:hidden을 쓰지 않는가]
   예전에는 그 방식이었는데 두 가지가 깨졌다.
     1) 문서가 스크롤 불가 상태가 되면 iOS 사파리가 접어뒀던 툴바를 도로
        펼친다. 여닫을 때마다 뷰포트 높이가 출렁이고, 그 과정에서 커튼
        레이어가 흰 박스로 남는 문제가 생겼다.
     2) overflow:hidden은 body를 스크롤 컨테이너로 만들어서, 아카이브
        페이지 상단 바(#control-bars)의 position:sticky가 메뉴를 여는 순간
        풀려 버린다. archive/style.css의 overflow-x:clip 주석과 같은 이유다.
   touch-action은 문서의 스크롤 가능 여부 자체를 건드리지 않아 둘 다 피한다. */
body.menu-open #menu-overlay {
  pointer-events: auto;
  touch-action: none;
  overscroll-behavior: contain;
}

/* 흰 커튼. 상자 자체를 움직이면 안의 글자까지 늘어나므로 배경
   역할만 하는 가짜 요소를 따로 두고 이것만 세로로 편다.
   transform-origin: bottom → 아래 모서리에 고정된 채 위로 펼쳐진다
   (메인은 top에서 아래로 내려온다. 버튼 위치에 맞춘 차이다). */
#menu-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--menu-curtain);
  transform: scaleY(0);
  transform-origin: bottom;

  /* [주의] scaleY(0)으로 납작하게 눌러두기만 하면 이 레이어는 '보이지 않을
     뿐 계속 그려지는' 상태로 남는다. iOS 사파리에서는 메뉴를 여닫는 동안
     툴바가 접혔다 펴지며 뷰포트 높이가 바뀌는데, 그때 position:fixed 안의
     이 레이어가 갱신되지 않고 화면 아래쪽에 흰 띠로 남아 버린다(커튼이
     검정이던 시절에는 배경과 같은 색이라 안 보였을 뿐이다).
     그래서 닫힌 뒤에는 visibility로 아예 그리기 대상에서 뺀다. 지연
     0.42s는 커튼이 다 내려간 다음에 숨기려는 것 — 안 주면 애니메이션이
     시작하자마자 사라진다. */
  visibility: hidden;
  transition:
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.42s;
}

body.menu-open #menu-overlay::before {
  transform: scaleY(1);
  visibility: visible;
  /* 열 때는 지연 없이 즉시 보이게 — 커튼이 올라오는 걸 봐야 한다. */
  transition:
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

/* 항목 묶음. 글자 크기를 항목이 아니라 이 상자에 두는 이유는 gap이
   em 단위라서다 — 여기 두면 항목들이 상속받아 쓰면서 간격도 같은
   크기를 따라간다. */
#menu-list {
  display: flex;
  flex-direction: column;
  font-size: clamp(32px, 12.3vw, 80px); /* ← 글자 크기 */
  gap: 0.4em;                           /* ← 항목 사이 간격 */
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(30px, 8vw, 68px); /* ← 우측 여백 */
  font-family: 'Pretendard', sans-serif;
  font-weight: 900;
  line-height: 1.1; /* 항목 자체 높이. 사이 간격은 위 gap이 맡는다 */
  color: var(--menu-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  /* 표시만 대문자로 — HTML의 글자는 그대로라 검색·스크린리더에는
     원래 표기가 남는다. */
  text-transform: uppercase;

  /* 커튼이 다 올라온 뒤에 글자가 떠오르도록 지연을 준다. 열 때는
     아래 menu-open 규칙이 지연을 덮어쓰고, 닫을 때는 이 값(지연 0)이
     적용돼 글자가 먼저 사라진 뒤 커튼이 걷힌다. */
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.28s, transform 0.28s;
}

body.menu-open .menu-item {
  opacity: 1;
  transform: translateY(0);
}

/* 아래에서 올라오는 커튼이라 가까운 쪽(마지막 항목)부터 뜨게 한다.
   항목을 더 넣으면 한 줄씩 이어서 추가하면 된다. */
body.menu-open .menu-item:nth-last-child(1) { transition-delay: 0.30s; }
body.menu-open .menu-item:nth-last-child(2) { transition-delay: 0.38s; }
body.menu-open .menu-item:nth-last-child(3) { transition-delay: 0.46s; }
body.menu-open .menu-item:nth-last-child(4) { transition-delay: 0.54s; }

/* 현재 보고 있는 페이지 표시 — 글자 왼쪽에 네모 점.
   HTML의 aria-current="page" 하나로 표시가 결정되므로, 표식을 옮길 때는
   그 속성만 옮기면 된다(스크린리더도 같은 속성을 읽는다).

   크기·간격을 em으로 두어 #menu-list의 글자 크기를 따라간다.
   background는 currentColor라 글자색이 바뀌면 점도 같이 따라간다. */
.menu-item[aria-current='page']::before {
  content: '';
  flex-shrink: 0;
  width: 0.26em;
  height: 0.26em;
  margin-right: 0.42em; /* ← 점과 글자 사이 거리 */
  background: var(--dot-color, currentColor);
}

/* 점 색은 p5 그래픽이 쓰는 팔레트(shared/core.js의 RADIAL_COLOR_PALETTE)에서
   가져온다. 항목은 HTML의 data-key로 구분하므로, 항목 순서를 바꿔도
   색이 따라 움직이지 않는다. */
.menu-item[data-key='about']   { --dot-color: #f299c1; } /* 핑크 */
.menu-item[data-key='archive'] { --dot-color: #fee987; } /* 노랑 */
.menu-item[data-key='credit']  { --dot-color: #7ecaac; } /* 초록 */
.menu-item[data-key='apply']   { --dot-color: #f58b6e; } /* 주황 */