/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PARTY 섹션 목차 네비게이션

   #party 는 UPCOMING EVENTS / PAST EVENTS / AFTERMOVIES / COLLABORATIONS / GALLERIES 다섯 덩어리가
   세로로 이어지고, 아래 섹션에 닿으려면 끝까지 스크롤하는 수밖에 없습니다. 실측 스크롤 높이는
   모바일 375px 폭에서 20,120px, 데스크톱 1280px 폭에서 8,128px 입니다.

   ── 형태를 알약에서 밑줄 탭으로 바꾼 이유 (2026-09-09 개정)
   첫 판은 테두리 있는 알약 줄이었고, 다음 이유로 폐기했습니다. 전부 실측입니다.

   1. 겹침. BACK 은 #global-section-close-btn 으로 position:fixed; top:105px(모바일 60px);
      z-index:99999 입니다. 모바일에서 BACK 은 y 58~91, 알약 바는 y 76~132 로 세로 15px,
      가로 74px 이 겹쳤고 z-index 차이 때문에 BACK 이 칩 위에 덮어 그렸습니다.
   2. 더 큰 문제로, 알약 바는 BACK 과 생김새가 같았습니다. 둘 다 어두운 반투명 알약에 얇은
      테두리와 blur, 높이도 33px 대 37px. 섹션을 나가는 컨트롤과 섹션 안에서 이동하는 컨트롤이
      같은 옷을 입고 붙어 있었습니다.
   3. 모바일에서 칩 줄이 570px 인데 보이는 폭은 337px 이라 41% 가 화면 밖이었습니다. 하필
      COLLABORATIONS 와 GALLERIES, 지름길이 가장 필요한 둘이 잘렸습니다.
   4. 칩 UPCOMING 40px 아래에 제목 ● UPCOMING EVENTS 가 있어 표지가 중복됐습니다.
   5. 회색 알약 줄은 문서 사이트 톤이고, 이 사이트의 굵은 대문자와 네온 글로우 언어와 달랐습니다.

   지금 형태는 .section-title 의 글로우 점과 같은 어휘를 쓰고, 알약을 버려 BACK 과 시각적으로
   완전히 갈라집니다. 높이를 44px 로 줄여 스티키로 붙었을 때 y 0~44 를 차지하므로 y 58 에서
   시작하는 BACK 과 겹치지 않고, 대기 상태에서는 BACK 아래로 내려가 앉습니다.

   ── 색
   파티 강조색 --neon-party #F59E0B 는 #151515 대비 8.67:1 로 이 글자 크기에서 안전합니다.
   시그니처 레드 #f2112c 였다면 4.25:1 이라 쓸 수 없었습니다.

   ADDITIVE. 이 파일과 js/party-nav.js 의 로드 태그 두 줄을 빼면 원래 #party 로 돌아갑니다.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.party-toc {
    position: sticky;
    top: 0;
    z-index: 60;
    /* 좌우 음수 마진으로 섹션 패딩을 상쇄해 바가 가장자리까지 닿게 하고 안쪽에서 되돌린다.
       그래야 아래로 흐르는 카드가 바 양옆으로 비어져 나오지 않는다.

       위쪽 마진은 BACK 을 피하기 위한 것이다. 데스크톱 BACK 은 top:105px 이라 y 95~135 를
       차지하는데(style.css:438-440), 여백이 없으면 바가 y 116 에서 시작해 19px 겹친다.
       스티키로 붙었을 때는 바가 y 0~44 라 애초에 닿지 않으므로, 대기 상태만 밀어내면 된다. */
    margin: 26px -60px 24px;
    padding: 0 60px;
    background: linear-gradient(to bottom,
            rgba(17, 17, 17, 0.94) 0%,
            rgba(17, 17, 17, 0.90) 70%,
            rgba(17, 17, 17, 0) 100%);
    backdrop-filter: blur(12px) saturate(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
}

.party-toc-inner {
    display: flex;
    align-items: stretch;
    gap: 22px;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.party-toc-inner::-webkit-scrollbar {
    display: none;
}

.party-toc-link {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* WCAG 2.5.8 의 최소 24px 은 44px 높이로 충족한다. 가로는 글자 폭이 결정하지만 가장 짧은
       PAST 도 30px 을 넘는다. */
    padding: 0 1px;
    border: 0;
    background: none;
    color: #8C8C8C;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 180ms ease;
}

/* 활성 표시는 밑줄. 알약을 쓰지 않으므로 BACK 버튼과 형태가 겹치지 않는다. */
.party-toc-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--neon-party, #F59E0B);
    box-shadow: 0 0 8px var(--shadow-party, rgba(245, 158, 11, 0.45));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.party-toc-link:hover {
    color: #D8D8D8;
}

/* 현재 위치. 글자를 흰색으로 올리고 밑줄을 켠다. 색 하나에만 의존하지 않게 두 신호를 함께
   쓴다(1.4.1). */
.party-toc-link[aria-current="true"] {
    color: #FFFFFF;
}

.party-toc-link[aria-current="true"]::after {
    transform: scaleX(1);
}

.party-toc-link:focus-visible {
    outline: 2px solid var(--neon-party, #F59E0B);
    outline-offset: 3px;
    border-radius: 2px;
}

/* 모바일에서만 짧은 표기를 쓴다. 접근성 이름은 js 가 aria-label 에 전체 단어로 넣는다. */
.party-toc-short {
    display: none;
}

/* 아직 콘텐츠가 없어 hidden 인 섹션의 항목은 js 가 이 클래스를 붙여 숨긴다. */
.party-toc-link.is-absent {
    display: none;
}

/* 항목이 하나뿐이면 목차일 이유가 없다. */
.party-toc.is-pointless {
    display: none;
}

/* ── 태블릿 이하 ─────────────────────────────────────────────────────────────────────────────
   style.css:2304 가 `padding: 60px 12px 220px !important`, apple-refinements.css:273 가 767px
   이하에서 좌우를 18px 로 올린다. 음수 마진이 그 값과 맞아야 한다.

   그리고 여기서 BACK 을 피한다. 모바일 BACK 은 y 58~91 에 뜬다(style.css:2313-2318 의
   top:60px). 대기 상태의 바가 그 아래에서 시작하도록 위쪽 여백을 준다. 스티키로 붙었을 때는
   y 0~44 라 애초에 닿지 않는다. */
@media (max-width: 1023px) {
    .party-toc {
        margin: 44px -12px 20px;
        padding: 0 12px;
    }

    /* 375px 폭에서 다섯 항목의 실측 합이 354px 이라 보이는 337px 을 17px 넘겨 GALLERIES 가
       잘렸다. 간격 16 -> 11 로 20px, 자간 0.05 -> 0.035em 으로 여유를 더 확보한다. */
    .party-toc-inner {
        gap: 11px;
        height: 42px;
    }

    .party-toc-link {
        font-size: 10.5px;
        letter-spacing: 0.035em;
    }

    /* 긴 단어만 줄여 다섯 항목이 한 화면에 다 들어오게 한다. 첫 판에서는 줄 전체가 570px 이라
       337px 폭에서 41% 가 잘렸고, COLLABORATIONS 와 GALLERIES 가 보이지 않았다. */
    .party-toc-full {
        display: none;
    }

    .party-toc-short {
        display: inline;
    }
}

@media (max-width: 767px) {
    .pif-ui .party-toc {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* 375px 에서 다섯 항목의 합이 정확히 337px 로 여유가 0 이다. 360px 안드로이드(내부 폭 324px)
   에서는 다시 넘치므로 좁은 화면에서만 한 번 더 조인다. 넘치더라도 줄은 가로로 스크롤되니
   기능이 깨지지는 않지만, 목차는 전부 보이는 편이 낫다. */
@media (max-width: 400px) {
    .party-toc-inner {
        gap: 8px;
    }

    .party-toc-link {
        font-size: 10px;
        letter-spacing: 0.02em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .party-toc-inner {
        scroll-behavior: auto;
    }

    .party-toc-link,
    .party-toc-link::after {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .party-toc-link {
        color: #C9C9C9;
    }

    .party-toc-inner {
        border-bottom-color: rgba(255, 255, 255, 0.45);
    }
}