/* PARTY index: quiet left rail on desktop, compact horizontal index on mobile. Internal #party scrolling, dynamic sections and existing BACK actions stay intact. */ .party-toc { position: sticky; top: var(--pif-toc-stick, 40px); z-index: 60; margin: 0 0 20px; padding: 0; background: rgba(18,18,20,.38); border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .party-toc-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; height: 42px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .party-toc-inner::-webkit-scrollbar { display: none; } .party-toc-link { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 1px; border: 0; border-radius: 0; background: transparent; color: #b5b5bb; font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .035em; white-space: nowrap; text-transform: uppercase; cursor: pointer; transition: color 160ms ease; } .party-toc-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--neon-party, #D4D4D4); opacity: 0; pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--spring-move, cubic-bezier(0.23,1,0.32,1)), opacity 160ms ease; } .party-toc-link[aria-current="true"] { color: #fff; } .party-toc-link[aria-current="true"]::after { opacity: 1; transform: scaleX(1); } .party-toc-docked { display: none; } .party-toc-progress { display: none; } /* 가로 진행률(모바일). 세로(레일)용과 기준 상자가 달라 요소를 따로 둡니다 - 세로는 .party-toc-inner, 가로는 nav 를 기준으로 써야 각각 제자리에 놓입니다. */ .party-toc-rule { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; background: rgba(255,255,255,.07); } .party-toc-rule-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, rgba(242,17,44,.45), var(--neon-pif-red, #f2112c)); box-shadow: 0 0 6px rgba(242,17,44,.4); } .pif-toc-anchor { height: 0; margin: 0; padding: 0; pointer-events: none; } .party-toc-link span { transition: transform 160ms var(--spring-move, cubic-bezier(0.23,1,0.32,1)); } .party-toc-link:active span { transform: scale(.97); } .party-toc.is-keyboard .party-toc-link::after, .party-toc.is-keyboard .party-toc-link span { transition: none; } .party-toc-link:focus-visible { outline: 2px solid var(--neon-party, #D4D4D4); outline-offset: -2px; } .party-toc-full { display: none; } .party-toc-short { display: inline; } .party-toc-link.is-absent, .party-toc.is-pointless { display: none; } #party > .pif-hero:not([hidden]) { margin-bottom: 0; } @media (max-width: 360px) { .party-toc-inner { gap: 5px; } .party-toc-link { font-size: 9px; letter-spacing: 0; } } @media (min-width: 1024px) { /* Match the rail gutter only when JS has successfully installed the navigation. */ .pif-ui #party.party-rail-ready { padding-left: clamp(190px, 15.5vw, 240px) !important; } /* ══════════════════════════════════════════════════════════════════════════════════ 레일은 간판 영상 **아래**에서 시작합니다 (2026-09-21) ⚠️ 레일이 position: fixed 라 처음에는 간판 위에 그대로 얹혔습니다. 1440x900 실측: 간판이 0.6~375, 레일이 261 에서 시작해 114px 을 덮었습니다. 고치는 방법은 top 을 두 값 중 **아래쪽**으로 두는 것입니다. - 쉬는 자리(--pif-rail-rest): 스크롤을 내린 뒤 서 있을 자리. 예전 값 그대로. - 밀린 자리(--pif-rail-push): 목차가 원래 있었어야 할 자리(.pif-toc-anchor)의 화면 좌표. js/party-nav.js 의 paintRail() 이 스크롤마다 넣습니다. 처음에는 밀린 자리(실측 403)가 아래라 레일이 간판 밑에 서고, 스크롤해서 그 값이 쉬는 자리 위로 올라가면 그때부터 쉬는 자리에 섭니다. 따라오는 동작은 그대로입니다. ⚠️ 쉬는 자리를 **변수로** 둔 이유는 js 가 clamp() 를 다시 계산하지 않아도 되게 하려는 것입니다. js 가 실패하면 --pif-rail-push 가 없어 0px 이 되고, 레일은 예전 자리에 그대로 섭니다(fail-safe). ⚠️ top 에 transition 을 걸지 마십시오. 스크롤마다 바뀌는 값이라 레일이 늘어집니다. ══════════════════════════════════════════════════════════════════════════════════ */ .party-toc--rail { --pif-rail-rest: clamp(130px, 29vh, 280px); display: none; position: fixed; left: clamp(22px, 2.8vw, 52px); top: max(var(--pif-rail-rest), var(--pif-rail-push, 0px)); width: 148px; max-height: calc(100dvh - max(var(--pif-rail-rest), var(--pif-rail-push, 0px)) - 30px); overflow-y: auto; margin: 0; padding: 0; z-index: 210; background: transparent; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .party-toc--rail.is-active:not(.is-pointless) { display: block; } .party-toc--rail::before { content: 'PARTY / INDEX'; display: block; padding: 0 0 18px 15px; color: #96969e; font-size: 9px; font-weight: 600; letter-spacing: .15em; } .party-toc--rail .party-toc-inner { display: flex; flex-direction: column; height: auto; gap: 7px; overflow: visible; border-left: 1px solid rgba(255,255,255,.12); } .party-toc--rail .party-toc-link { min-height: 40px; width: 100%; padding: 8px 0 8px 14px; font-size: 10px; letter-spacing: .045em; white-space: normal; text-align: left; line-height: 1.6; } .party-toc--rail .party-toc-link::after { left: -1px; right: auto; top: 8px; bottom: 8px; height: auto; width: 2px; transform: scaleY(0); transform-origin: center top; } .party-toc--rail .party-toc-link[aria-current="true"]::after { transform: scaleY(1); } /* ── 전체 진행률 ──────────────────────────────────────────────────────────────── casepeat.com 은 헤더 아래 2px 가로 막대로 같은 것을 보여 줍니다 (Casepeat_Official_Website/js/section-nav.js 의 paintProgress). 여기 레일은 세로라 그것을 90도 돌려, **이미 있는 왼쪽 세로줄 위에 겹쳐** 채웁니다. 줄을 하나 더 만들지 않으므로 지금 모양이 그대로 남습니다. ⚠️ 현재 항목 표시(.party-toc-link::after)와 **같은 자리**(left:-1px)를 씁니다. 겹쳐도 구분되도록 진행 쪽은 1px 반투명, 현재 항목은 2px 불투명으로 둡니다. 색만으로 구분하지 않도록 굵기도 다릅니다(WCAG 1.4.1). ⚠️ 채움은 아래쪽이 가장 밝습니다. 그 밝은 끝이 진행 머리로 읽혀서, 가만히 있는 현재 항목 표시와 성격이 달라 보입니다. ⚠️ 기준 상자는 .party-toc-inner 입니다. 0% 는 첫 항목의 위, 100% 는 마지막 항목의 아래입니다. 목차 위에 얹힌 눈금이라 위치가 곧 의미가 됩니다. ──────────────────────────────────────────────────────────────────────────────── */ .party-toc--rail .party-toc-inner { position: relative; } .party-toc--rail .party-toc-progress { display: block; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; overflow: hidden; pointer-events: none; background: rgba(255,255,255,.05); } .party-toc--rail .party-toc-progress-fill { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top center; background: linear-gradient(180deg, rgba(242,17,44,.38), rgba(242,17,44,.9)); box-shadow: 0 0 7px rgba(242,17,44,.38); } .party-toc--rail .party-toc-full { display: inline; } .party-toc--rail .party-toc-short { display: none; } } /* Shared MUSIC / PARTY / LIVE signature. The panel content starts below this row. */ .pif-past-modes { display: none; } /* Hero reaches the viewport edge; controls remain an overlay, not another content row. */ .pif-ui #party:has(> .pif-hero:not([hidden])) { padding-top: 0 !important; } .pif-ui #party > .pif-hero:not([hidden]) { margin-top: 0; } #party > .pif-hero .pif-hero-veil { background: linear-gradient(180deg,rgba(0,0,0,.58),transparent 42%,rgba(21,21,21,.7)); } @media (min-width: 1024px) { .pif-ui #party.party-rail-ready > .pif-hero:not([hidden]) { width: 100vw; max-width: none; margin-left: calc(-1 * clamp(190px,15.5vw,240px)); } #party > .pif-hero .pif-hero-frame { border-radius: 0; } } @media (max-width: 900px) { #party > .pif-hero:not([hidden]) { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } #party > .pif-hero .pif-hero-frame { border-radius: 0; } #party .past-section { min-width: 0; } /* ⚠️ 여기 있던 `justify-content: space-between` 을 뺐습니다. 이 제목에 점이 들어오면서 flex 항목이 [점][글자][모드버튼] 셋이 되는데, space-between 은 **셋을 균등하게 벌려** 점이 글자에서 떨어져 나갑니다. 오른쪽으로 미는 일은 버튼 쪽의 `margin-left: auto` 가 맡습니다 - 앞에 항목이 몇 개든 상관없이 동작합니다. ⚠️ 글자 크기도 다른 네 제목과 같은 값으로 되돌렸습니다. 여기만 clamp(18px,5.2vw,28px) 이라 412px 에서 21.4px, 나머지는 24px 이었습니다 - 점이 없던 것과 함께 이 줄만 작아 보이던 두 번째 이유입니다. */ /* ⚠️ `flex-wrap: wrap` + `white-space: nowrap` 은 한 쌍이고, 고정 분기점을 쓰지 않으려고 이렇게 짰습니다. 글자를 쪼갤 수 없게 만들면 자리가 모자랄 때 **버튼 뭉치가 다음 줄로** 내려갑니다. 실측: 412/360px 에서는 한 줄에 그대로 들어가고(글자 148px, 남는 자리 167.9px), 320px 에서만(남는 자리 126.8px) 버튼이 아래로 내려갑니다. 예전에는 이 제목만 글자를 18px 로 줄여 맞췄는데, 그러면 다섯 제목 중 하나만 작아집니다. 줄바꿈은 좁은 화면에서만 생기고 크기는 어디서나 같습니다. 세로 간격은 위 gap 이 맡습니다. */ #party .past-section > h2.section-title { gap: 10px; text-align: left; flex-wrap: wrap; white-space: nowrap; } .pif-past-modes { display: flex; gap: 4px; flex: none; margin-left: auto; } .pif-past-modes button { min-height: 36px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; background: transparent; color: #aaa; font: 700 9px/1.2 inherit; font-family: inherit; font-size: 9px; letter-spacing: .03em; cursor: pointer; } .pif-past-modes button[aria-pressed="true"] { color: #f2112c; border-color: #5A1A22; background: rgba(242,17,44,.06); } .pif-past-modes button:focus-visible, .past-gig-card:focus-visible { outline: 2px solid #f2112c; outline-offset: 3px; } #party .past-section:not(.past-full) #past-gigs-list { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 0 12px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #4A4A4A transparent; overscroll-behavior-x: contain; } #party .past-section:not(.past-full) .past-gig-card { flex: 0 0 144px; width: 144px; min-width: 0; display: block; border: 0; content-visibility: visible; contain-intrinsic-size: none; background: transparent; border-radius: 0; scroll-snap-align: start; } #party .past-section:not(.past-full) .past-gig-card .item-img-wrapper { width: 144px !important; height: 144px !important; aspect-ratio: 1 !important; border-radius: 0; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════════════ 압축 스트립 썸네일은 **정사각형을 꽉 채웁니다** (2026-09-21, 소유자 지정) 보고: "저 축소된 썸네일들 기본적으로는 정사각형을 꽉 채우는 방식, 즉 크롭을 디폴트로. 저렇게 비율이 제각각이면 엉성해 보이거든." 상자는 이미 144x144 로 전부 같았습니다. 어긋나 보이던 것은 **안쪽 그림**입니다. 카드가 `data-fit="contain"` 이라 9:16 포스터는 좌우에, 16:9 포스터는 위아래에 흐린 띠를 남겼고, 한 줄에 서로 다른 모양이 섞여 들쭉날쭉했습니다(실측: TRANCE4 포스터 960x1706 이 144 상자 안에서 81x144). 여기서만 cover 로 덮습니다. 초점은 관리자가 저장한 값(`--pif-pos`)을 그대로 쓰므로 편집 의도가 살아 있습니다 - 잘리는 방향만 바뀝니다. ⚠️ `data-fit` 속성은 **건드리지 않습니다.** 그 값은 카드 하나에 대해 네 군데(JS 두 곳, 레이아웃 계산, 회전 슬라이드)가 함께 읽는 신호라, 여기서 바꾸면 압축 스트립 밖의 동작까지 따라 바뀝니다. CSS 로 이 스트립 안에서만 덮는 편이 안전합니다. 그래서 특이도가 (1,5,0) + !important 로, `.gig-card[data-rotator][data-fit= "contain"] .item-media` 의 (0,4,0) + !important 를 이깁니다. ⚠️ 그 대신 **마스크를 꺼야 합니다.** pifCoverFade() 는 `data-fit` 을 보고 판단하는데 그것이 여전히 contain 이라, 가로 슬라이드가 올라오면 위아래에 페더를 칠합니다. 꽉 찬 그림에 페더가 걸리면 가장자리가 흐려집니다. 한 쌍이니 같이 두십시오. ⚠️ `.cvr-wash`(흐린 배경 복사본)도 끕니다. cover 면 그림이 상자를 다 덮어 보이지 않는데, 카드마다 144px 짜리 blur 레이어를 계속 칠하게 됩니다. 끄더라도 "슬라이드 한 장 = 불투명한 한 겹" 규칙은 그대로입니다 - 그림 자체가 상자를 전부 덮으므로 교차 페이드가 여전히 정확합니다. ══════════════════════════════════════════════════════════════════════════════════ */ #party .past-section:not(.past-full) .past-gig-card .item-media, #party .past-section:not(.past-full) .past-gig-card .video-placeholder-wrap video { object-fit: cover !important; -webkit-mask-image: none !important; mask-image: none !important; } #party .past-section:not(.past-full) .past-gig-card .cvr-wash { display: none; } #party .past-section:not(.past-full) .past-gig-card .item-info { padding: 10px 0 0; } #party .past-section:not(.past-full) .past-gig-card .item-title { font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; } #party .past-section:not(.past-full) .past-gig-card .item-date { display: block; font-size: 9px; line-height: 1.5; margin-bottom: 5px; } #party .past-section:not(.past-full) .past-gig-card .gig-card-labels, #party .past-section:not(.past-full) .past-gig-card .item-meta { display: none; } } /* ══════════════════════════════════════════════════════════════════════════════════════════ 탭 로고는 **고정을 풀고 흐름 안으로** 돌아왔습니다 (2026-09-21, 소유자 지정) 여기에는 `.pif-context-brand` 라는 `position: fixed` 로고가 있었습니다. 세 탭 어디서나 화면 오른쪽 위에 붙어 스크롤과 무관하게 떠 있었고, 모바일에서는 간판 영상 위에 얹혔습니다(실측 390x844: 로고 y 88~102, 간판 y 0.6~226.9). 보고는 "영상 위에 저래 나오니 영 안 이쁘고" 였습니다. 그래서 그 요소와, 그 요소를 위해 **마크업의 원래 로고를 숨기던 규칙**을 함께 지웠습니다. 이제 `.pif-section-brand` 가 제자리에서 다시 보입니다. PARTY 의 순서는 마크업과 js/party-nav.js 의 삽입 위치가 이미 `간판 - 목차 - 로고 - 내용` 이라, 로고가 저절로 "목차 줄과 UPCOMING EVENTS 사이" 에 놓입니다. 그 여백은 css/style.css 의 `#party .pif-section-brand` 에 있습니다. ⚠️ 옛 `padding-top: 140px`(모바일 96px)은 **고정 로고가 차지하던 줄**을 비워 두려던 값이라 같이 지웠습니다. 다만 원래 값으로 그냥 돌아가면 이번에는 **로고가 헤더에 닿습니다.** 실측(390x844): 섹션 상자가 뷰포트 -14.9 에서 시작하므로 padding-top 60 은 로고를 y 45.7 에 놓는데 헤더는 40 까지입니다 - 사이가 5.7px 뿐이라 붙어 보입니다 (1440 에서도 헤더 76 대 로고 85.7 로 9.7px). 헤더가 `position: fixed` 라 섹션은 그 높이를 모릅니다. 그래서 로고가 흐름 안에 있다는 전제로 값을 다시 잡습니다. 목표는 헤더 아래 데스크톱 약 34px, 모바일 약 26px 입니다. ⚠️ #party 는 여기 값을 쓰지 않습니다. 간판이 있으면 `.pif-ui #party:has(> .pif-hero:not([hidden])) { padding-top: 0 !important }` 가 특이도 (1,3,0) 으로 이깁니다(이 값은 (1,1,0)). 간판이 없는 날에만 여기 값을 씁니다. ⚠️ `pif-context-ready` 클래스 자체는 **남겨 둡니다.** 아래의 섹션 제목 타이포그래피와 간판 여백이 그 클래스에 걸려 있고, 그것들은 로고와 무관합니다. ══════════════════════════════════════════════════════════════════════════════════════════ */ .pif-context-ready #music, .pif-context-ready #party, .pif-context-ready #live { padding-top: 126px !important; } .pif-context-ready #party > .pif-hero { margin-top: 0; margin-bottom: 28px; } /* ── 섹션 제목은 세 탭이 같은 크기 ──────────────────────────────────────────────────────── MUSIC 의 `LATEST RELEASES` 는 `.content-section h2` 의 3rem(48px)을 그대로 쓰고 있었고, PARTY 의 다섯 제목은 여기 clamp 를 씁니다. 실측 1024px 에서 48 대 26.6 으로 거의 두 배 차이였습니다(모바일에서는 둘 다 24px 이라 우연히 맞았습니다). 탭을 오가면 제목의 크기와 정렬이 같이 바뀌어 같은 사이트로 읽히지 않았습니다. text-shadow 도 끕니다 - PARTY 제목에는 원래 없고, 글로우는 점이 맡습니다. */ .pif-context-ready #party .section-title, .pif-context-ready #music .section-title { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.025em; text-shadow: none; } /* ── 탭을 열면 **바로 보이는** 첫 제목은 등장 애니메이션을 타지 않습니다 ────────────────── `.section-title` 은 js/apple-refinements.js 의 REVEAL 목록에 들어 있어 화면에 들어올 때 페이드인합니다. 그 장치의 원칙이 "이미 보이는 것은 애니메이션하지 않는다"(guard 3)인데, **닫힌 섹션 안의 요소는 guard 2 에서 먼저 걸러져** 그 판정을 받지 못합니다. 그래서 탭을 여는 순간 첫 제목이 투명한 채 남고, 2.5초 주기 sweep 이 올 때까지 기다립니다. 실측(360x740, 새로 연 세션): MUSIC 의 `LATEST RELEASES` 가 탭이 열린 뒤 **2,254ms** 동안 빈 자리였습니다. PARTY 의 첫 제목은 506ms 였지만 이것도 sweep 주기가 어디에 걸리느냐에 달린 운입니다(최악 2,500ms). ⚠️ 공유 장치(js/apple-refinements.js)를 고치지 않고 **첫 제목 둘만** 빼 둡니다. 그 파일의 guard 순서를 바꾸면 사이트 전체의 등장 연출이 영향을 받습니다. 나머지 제목들은 스크롤해 들어올 때 페이드인하는 지금 동작을 그대로 유지합니다. ⚠️ `#party` 는 `.upcoming-section` 의 것만입니다. PAST 아래는 스크롤해야 보이므로 원래 동작이 맞습니다. */ .pif-reveal-on #music > .section-title.pif-reveal:not(.is-in), .pif-reveal-on #party .upcoming-section > .section-title.pif-reveal:not(.is-in) { opacity: 1; transform: none; transition: none; } @media (max-width: 900px) { /* ══════════════════════════════════════════════════════════════════════════════════ 모바일 목차 줄: 로고 · 칩 · 햄버거가 **한 면** 위에 있게 (2026-09-21) 보고: "양쪽 PIF 파비콘과 햄버거메뉴는 완전 투명인데 네비바만 약간 불투명한 배경이라 이질감이 심해." 실측(390x844, 붙은 상태)이 그대로 맞았습니다. 목차 줄은 x 40~342.6 만 차지하고, 그 바깥의 로고(12~32)와 햄버거(350~378)는 줄 **밖**이었습니다. 게다가 목차는 z-index 9998 이라 헤더(999) **위에** 있어서, 아이콘 자리에는 헤더 그러데이션만, 칩 자리에는 그 위에 목차의 반투명 띠가 한 겹 더 얹혔습니다. 같은 줄인데 배경이 두 종류였습니다. 고친 방법은 둘입니다. 1. 줄을 **화면 끝까지** 폅니다(left/right: 0). 칩이 아이콘 밑으로 들어가지 않게 안쪽 padding 으로 비켜 줍니다. 2. 줄을 헤더 **아래**로 내립니다(z-index 998). 그러면 로고와 햄버거가 이 띠 위에 또렷하게 얹혀 세 가지가 한 면으로 읽힙니다. ⚠️ z-index 를 **올려서** 해결하지 마십시오. 위로 올리면 이 띠의 반투명 배경과 blur 가 로고와 햄버거를 덮어 흐려집니다. 아래로 내려도 칩 클릭은 멀쩡합니다 - 헤더가 `pointer-events: none` 이라 빈 곳은 통과합니다(css/style.css 의 "투명한 헤더가 목차 클릭을 먹던" 항목). 200~999 사이에 다른 요소가 없는 것도 확인했습니다. ⚠️ 여백은 **바깥 요소**(.party-toc)에 줍니다. 안쪽 스크롤러에 주면 칩을 가로로 밀었을 때 다시 아이콘 밑으로 들어갑니다. ⚠️ padding 에 transition 을 걸지 마십시오(이 파일의 기존 경고). 대신 **배경만** ::before 의 opacity 로 짙어지게 해서 "쏙 들어가는" 느낌을 만듭니다. ══════════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ 여기서 `#party .party-toc` 로 쓰면 **모바일에서는 하나도 안 먹습니다.** js/party-nav.js 의 syncStuck() 이 모바일에서 목차를 `document.body` 로 옮기므로 그 순간 목차는 #party 의 자손이 아닙니다. 실측으로 붙은 상태의 padding 이 좌우 모두 0 이었고, 칩이 화면 가장자리에 그대로 닿았습니다. 모바일 여백은 `#party` 를 거치지 않는 `.party-toc--docked` 에 직접 겁니다. 아래 `#party .party-toc` 규칙은 901~1023px 구간(목차가 아직 #party 안에서 sticky 로 있는 폭)을 위한 것입니다. 둘 다 필요합니다. */ #party .party-toc { margin-inline: -18px; padding-inline: 18px; } #party .party-toc:not(.is-stuck) { padding-inline: 18px; } /* ⚠️ `position: fixed` 가 아니라 **sticky** 입니다(2026-09-21 되돌림). fixed 로 두면 줄이 #party 의 스크롤 사슬 밖이라 그 위에서 시작한 스와이프가 아무것도 굴리지 못했습니다. 자세한 이유는 js/party-nav.js 의 syncMode() 주석. top 은 숫자가 아니라 `--pif-toc-stick` 입니다 - sticky 의 기준이 스크롤 컨테이너의 패딩 박스이고 이 섹션은 뷰포트 -14.9 에서 시작하기 때문입니다. z-index 는 60 이면 충분합니다. #party 자체가 z-index 200 인 쌓임 맥락이라 이 줄은 자동으로 헤더(999) **아래**에 깔리고, 로고와 햄버거가 그 위에 또렷하게 얹힙니다 - fixed 시절에 998 로 맞춰 두던 것을 공짜로 얻습니다. */ .party-toc--docked { display: none; position: sticky; top: var(--pif-toc-stick, 0px); left: auto; right: auto; margin-inline: -18px; padding-inline: 18px; z-index: 60; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ⚠️ 여기에 backdrop-filter 를 넣지 마십시오. 이제 이 줄은 **스크롤 컨테이너 안에서** 매 프레임 다시 칠해집니다. 이 파일의 기존 경고와 같은 이유입니다(스크롤이 무거워진 원인 셋 중 하나가 바로 `.party-toc` 의 backdrop-filter 였습니다). 블러를 뺀 만큼 위쪽 불투명도를 올려 영상 위에서도 글자가 읽히게 했습니다. */ .party-toc--docked::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,16,.90) 0%, rgba(14,14,16,.52) 100%); opacity: .62; transition: opacity 220ms ease; } .party-toc--docked.is-stuck::before { opacity: 1; } .party-toc--docked.is-active:not(.is-pointless) { display: block; } /* ⚠️ 여기 있던 `pointer-events: none` 임시 처방은 **지웠습니다.** 줄이 스크롤 컨테이너 안으로 돌아왔으므로 칩 위에서 밀어도 브라우저가 알아서 #party 를 굴립니다. 빈 곳만 통과시키는 반쪽짜리 처방이 더는 필요 없습니다. */ #party .party-toc.is-stuck, .party-toc--docked.is-stuck { padding-left: var(--pif-toc-clear-left,44px); padding-right: var(--pif-toc-clear-right,52px); } /* ── 칩 간격 ────────────────────────────────────────────────────────────────────── 글자 폭이 제각각(UPCOMING 52.4 / PAST 25.1 / MIXES 29.8 / COLLABS 42.6 / GALLERIES 47.9)이라 gap 을 주면 리듬이 어긋납니다. gap 을 0 으로 두고 space-between 이 **남는 자리를 똑같이** 나누게 하고, 손가락이 닿을 자리는 칩 자신의 좌우 padding 으로 넓힙니다. 그러면 글자 사이 간격은 그대로 고르면서 터치 영역만 12px 씩 커집니다. 줄 높이는 40px 로 헤더와 맞췄습니다. 남는 2px 은 아래 진행률 눈금 자리입니다. */ .party-toc--docked .party-toc-inner, .party-toc.is-stuck .party-toc-inner { gap: 0; height: 40px; } .party-toc--docked .party-toc-link, .party-toc.is-stuck .party-toc-link { font-size: 9px; letter-spacing: .02em; color: #d8d8de; padding: 0 6px; } /* 밑줄은 글자를 감싸야 합니다. 칩에 padding 이 생겼으므로 그만큼 안으로 들이고, 세로로는 줄 바닥이 아니라 **글자 바로 밑**에 둡니다. */ .party-toc--docked .party-toc-link::after, .party-toc.is-stuck .party-toc-link::after { left: 6px; right: 6px; bottom: 9px; } .party-toc--docked .party-toc-short, .party-toc.is-stuck .party-toc-short { display: none; } .party-toc--docked .party-toc-docked, .party-toc.is-stuck .party-toc-docked { display: inline; } /* ── 전체 진행률 (가로) ─────────────────────────────────────────────────────────── casepeat.com 헤더 진행 바와 같은 모양·같은 계산입니다. 줄 맨 아래 2px. ⚠️ `left/right: 0` 이면 칩의 안쪽 여백과 상관없이 **화면 폭 전체**가 됩니다. 절대 위치의 기준은 padding 상자이고, padding 은 그 상자 **안에** 있기 때문입니다. 처음에 padding 만큼 음수로 빼 줬다가 오히려 양쪽으로 18px 씩 넘치게 만들었습니다 (실측 -18 ~ 408.3, 화면은 390.3). 여기에 음수 오프셋을 다시 넣지 마십시오. */ .party-toc--docked .party-toc-rule { display: block; } /* 모바일 헤더는 40px 이라 위 여백도 그만큼 낮춥니다. 로고가 헤더 아래 약 26px. */ .pif-context-ready #music, .pif-context-ready #party, .pif-context-ready #live { padding-top: 82px !important; } .pif-context-ready #party > .pif-hero { margin-bottom: 0; } } /* ══════════════════════════════════════════════════════════════════════════════════════════ 아주 좁은 폰: 칩을 더 조입니다 (2026-09-21) 실측(320px, 붙은 상태): 아이콘을 비켜 주고 남는 폭이 224px 인데 칩 다섯이 253.8px 이라 30px 이 넘쳐 칩 줄이 가로로 스크롤됐습니다(간격 0). 칩의 좌우 padding 을 6 -> 3 으로, 자간을 0 으로 줄이면 217.9px 이 되어 들어갑니다. 360px 에서는 간격이 2.6 -> 11.5 로 넉넉해집니다. ⚠️ 이 블록은 반드시 위의 `@media (max-width: 900px)` **뒤**에 있어야 합니다. 미디어 쿼리는 특이도를 더하지 않으므로 같은 특이도끼리는 **소스 순서**가 승부를 가릅니다. 파일 앞쪽에도 `@media (max-width: 360px)` 가 하나 있는데, 그쪽에 적으면 아래 900px 블록에 져서 아무 일도 일어나지 않습니다(실측으로 확인한 함정). ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 360px) { .party-toc--docked .party-toc-link, .party-toc.is-stuck .party-toc-link { padding: 0 3px; letter-spacing: 0; } .party-toc--docked .party-toc-link::after, .party-toc.is-stuck .party-toc-link::after { left: 3px; right: 3px; } } @media (hover: hover) and (pointer: fine) { .party-toc-link:hover { color: #fff; } .party-toc--rail .party-toc-link:hover span { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .party-toc-link, .party-toc-link::after, .party-toc-link span { transition: none; } .party-toc-link span { transform: none !important; } .party-toc--docked::before { transition: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .party-toc { background: #151515; } .party-toc-link { color: #ddd; } }