/* ==========================================================================
   운동 가이드 메가메뉴 (데스크톱)
   tokens-v3.css 토큰만 쓴다. 모션은 opacity·transform 만 — 열 때는 부드럽게, 닫을 때는 빠르게.
   JS 없이도 :hover / :focus-within 으로 열린다. 터치는 chrome-v3.js 가 첫 탭에 연다.
   ========================================================================== */

:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); color-scheme: dark; }
::selection { background: var(--accent); color: var(--on-accent); }

/* 헤더 링크 밑줄 (마우스가 있는 기기에서만) */
.nav__item { display: contents; }
.nav__item--mega { display: block; position: static; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a { position: relative; }
  .nav__links > a::after,
  .nav__trigger::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out);
  }
  .nav__links > a:hover::after,
  .nav__item--mega:is(:hover, :focus-within) .nav__trigger::after { transform: scaleX(1); }
  /* 트리거 글자 아래(헤더 하단)에서 패널까지 이어지는 투명 다리 — 대각선으로 내려가도 :hover 가 끊기지 않게 */
  .nav__trigger::before { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: calc(var(--head-h) / 2); }
}
.nav__links a[aria-current="page"] { color: var(--accent); }

/* ---- 패널 ---- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--bg); border-bottom: var(--rule); border-top: var(--rule);
  max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  /* 닫힐 때: 0.2초 유예 후 빠르게 접는다. 유예 중 커서가 패널로 돌아오면 다시 열린 채 유지되고,
     그 사이에도 패널은 보이는 상태라 이동 경로가 어긋나도 항목을 고를 수 있다 */
  transition: opacity .12s ease .2s, transform .12s ease .2s, visibility 0s linear .32s;
}
/* 트리거와 패널 사이의 빈틈을 이어 주는 투명 다리 */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item--mega:is(:hover, :focus-within) .mega,
.nav__item--mega.is-open .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.nav__item--mega.is-closed .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .12s ease, transform .12s ease, visibility 0s; }

.mega__inner { padding: 0 var(--pad) calc(var(--pad) * 1.25); }
.mega__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 18px 0 16px; border-bottom: var(--rule);
}
.mega__title { margin: 0; }
.mega__all { color: var(--accent); }
.mega__all:hover { color: var(--accent-hi); }

/* 윗줄: 근력(6) | 유산소(1) — 아랫줄: 스트레칭이 전체 폭을 쓴다 (세로로 길어지던 걸 가로로 펼침) */
.mega__groups { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr); }
.mega__group { padding: 18px 20px 0 0; }
.mega__group + .mega__group { padding-left: 20px; border-left: var(--rule); }
.mega__grouplabel { margin: 0 0 14px; color: var(--ink-dim); font-size: 0.75rem; }
.mega__note { color: var(--ink-dim); font-size: var(--t-small); }

.mega__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 20px; }
.mega__group--cardio .mega__cols, .mega__group--stretch .mega__cols { grid-template-columns: minmax(0, 1fr); }

/* 스트레칭: 묶음 하나 = 한 줄. 왼쪽 이름 + 오른쪽 항목을 2줄 가로 흐름(위→아래→옆으로)으로 */
.mega__groups .mega__group--stretch { grid-column: 1 / -1; padding: 18px 0 0; margin-top: 18px; border-left: 0; border-top: var(--rule); }
.mega__group--stretch .mega__cols { gap: 14px 0; }
.mega__group--stretch .mega__col { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 20px; align-items: start; }
.mega__group--stretch .mega__part { margin: 5px 0 0; }
.mega__group--stretch .mega__col ul {
  grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px 20px;
}
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__part { margin: 0 0 8px; font: 800 0.9375rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.mega__part .num { color: var(--ink-dim); font-weight: 500; font-size: 0.75rem; margin-left: .25em; }
.mega__part a:hover { color: var(--accent); }

.mega__col li a {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: 5px 0; color: var(--ink-dim); font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0;
  text-transform: none; font-family: var(--font-body); font-weight: 400;
  transition: color .15s ease, transform .2s var(--ease-out);
}
.mega__col li a::after { display: none; }
.mega__col li a:hover, .mega__col li a:focus-visible { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .mega__col li a:hover { transform: translateX(3px); } }
/* 2026-10-02: '영상' 라벨·영상 있는 항목만 밝게 하던 구분을 없앴다 — 영상은 전부 들어갈 예정이라 항목은 모두 같은 모양. 영상이 아직 없으면 상세에서 '준비 중'을 보여 준다. */

/* 열릴 때 그룹이 살짝 순서대로 (장식, 마우스 기기에서만) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav__item--mega:is(:hover, :focus-within) .mega__col,
  .nav__item--mega.is-open .mega__col { animation: megaRise .36s var(--ease-out) backwards; }
  .mega__col:nth-child(2) { animation-delay: 30ms !important; }
  .mega__col:nth-child(3) { animation-delay: 60ms !important; }
  .mega__col:nth-child(4) { animation-delay: 90ms !important; }
  .mega__col:nth-child(5) { animation-delay: 120ms !important; }
  .mega__col:nth-child(6) { animation-delay: 150ms !important; }
}
@keyframes megaRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@container (max-width: 1100px) {
  .mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
  .mega__groups { grid-template-columns: 1fr; }
  .mega__group--stretch .mega__col { grid-template-columns: 1fr; }
  .mega__group--stretch .mega__col ul { grid-template-rows: repeat(4, auto); }
  .mega__group + .mega__group { padding-left: 0; border-left: 0; border-top: var(--rule); margin-top: 18px; }
}
@container (max-width: 760px) { .mega { display: none; } }

.menu a:active { background: var(--bg-raised); }