/* ==========================================================================
라인업 · 떠다니는 카드 (임시 실험)
--------------------------------------------------------------------------
⚠️ 임시 장치다. 확정된 것이 아니다.
끄는 법 : 섹션에서 `xc-lineup--float` 한 글자만 지우면 기존 hover 아코디언이
그대로 돌아온다. 이 파일과 lineup-float.js 는 남아 있어도 아무 일도 하지 않는다.
main.css 의 아코디언 규칙(1069~1500)은 하나도 지우지 않았다.
⚠️ new/index.html 과 legacy/.../main_xc.blade.php **양쪽**에 클래스가 있다.
── 스크롤 순서 (2026-08-26 확정) ──────────────────────────────────
① 섹션이 고정된다
② 가운데 글이 한 줄씩 뜬다 (눈썹 → 제목 → 설명 1줄 → 설명 2줄)
③ 카드 일곱 장이 **글 좌우에** 스며든다 — 왼쪽 4장 · 오른쪽 3장.
**각 영역 안에서 다시 좌우로 엇갈린다**(안쪽 ↔ 바깥쪽 지그재그).
글은 가운데에 그대로 있다(속도가 제각각). **불투명도만 변한다**
④ 글이 위로 올라가며 사라지고, 카드가 가운데로 모여 한 장으로 합쳐진다
⑤ 합쳐진 카드가 커지며 **화면 전체**를 덮고(네 변 모두 끝까지, 여백 없다),
그다음부터는 다음 장이 앞 장 위에 겹쳐 나타나며 갈아 끼운다
── 자리 계산은 JS 가 한다 ────────────────────────────────────────
⚠️ 카드 좌표를 CSS 에 두지 않는다. 이 파일은 '모든 카드를 무대 한가운데에
놓는 것'까지만 하고, 좌우 줄·모임 자리는 lineup-float.js 가 무대를 실측해
transform 으로 옮긴다. 단계가 셋(좌우 → 모임 → 펼침)이라 CSS 좌표로는
상태 전환이 표현되지 않는다.
⚠️ 그래서 카드는 크기가 변해도 **중심이 움직이지 않는다**(아래 translate -50%).
펼칠 때 화면 한가운데에 정확히 놓이는 것이 그 한 줄 덕이다.
========================================================================== */
/* ⚠️ 모션 최소화를 조건에 함께 건다. lineup-float.js 의 matchMedia 도 같은 조건이다.
둘 중 하나만 걸리면 '작은 네모인데 펼칠 방법이 없는' 화면이 된다.
조건이 어긋나는 순간 main.css 의 아코디언이 통째로 그대로 산다. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
.xc-lineup--float {
padding-block: 0;
/* ── 크기 ──
--fx-s 접힌 정사각형 한 변
--fx-txt 전체 화면 카드 안에서 글 덩어리가 차지하는 폭. 나머지는 사진이 드러난다
⚠️ 펼친 카드의 크기 토큰(--fx-w · --fx-h)은 없앴다. 펼친 카드가 **화면 전체**라
크기가 무대 상자에서 바로 온다(JS 가 잰다).
⚠️ 접힌 네모는 108 → 150 으로 키운 값이다. 배치가 세로 계단에서 가로 지그재그
2행으로 바뀌면서 세로로는 두 줄만 쓰면 되기 때문이다. */
/* ⚠️ 한 줄에 최대 네 장(왼쪽)이므로 세로 간격 = (쓸 높이 − s) ÷ 3 이다.
일곱 칸을 한 줄에 세우던 시절(÷6)보다 여유가 두 배라 네모를 크게 쓸 수 있다. */
--fx-s: clamp(96px, 10.4vw, 150px);
/* 한 영역 안에서 카드가 좌우로 엇갈리는 폭.
왼쪽 영역은 [바깥 · 안쪽 · 바깥 · 안쪽], 오른쪽 영역은 [바깥 · 안쪽 · 바깥] 이다.
⚠️ 이 값만큼 영역이 넓어지므로 가운데 글이 그만큼 좁아진다.
글 폭 = 무대폭 − 2×(--fx-mx + --fx-s + --fx-zig + 24) 다. 셋이 한 묶음이다. */
--fx-zig: clamp(40px, 5.8vw, 110px);
--fx-txt: clamp(420px, 38vw, 560px);
/* ── 전체 화면 카드 안의 여백 ──
--fx-gut 왼쪽 기둥. **글 두 덩어리와 차례표가 같은 세로선에 선다.**
셋이 이 값을 함께 읽는다. 하나만 고치면 줄이 어긋난다
--fx-top 위 덩어리(분류·이름·Wield)가 화면 위에서 떨어지는 거리.
⚠️ GNB 가 80px 을 덮는다. 그보다 작게 두면 분류가 GNB 밑으로 들어간다
--fx-bot 아래 덩어리(태그라인·본문)가 화면 아래에서 떨어지는 거리 */
--fx-gut: clamp(56px, 7vw, 132px);
--fx-top: clamp(104px, 12vh, 148px);
--fx-bot: clamp(72px, 9vh, 116px);
/* 차례표가 화면 왼쪽 끝에서 떨어지는 거리.
⚠️ --fx-gut 과 **다른 값이다.** 차례표는 카드 안 내용이 아니라 화면 가장자리에
붙는 장치라 글 기둥보다 더 왼쪽에 선다(2026-08-27 사용자 결정).
예전에는 --fx-gut 을 같이 읽어 글과 한 세로선에 섰다. 되돌리지 말 것. */
--fx-rail-x: clamp(24px, 2.4vw, 44px);
/* 차례표 한 칸. **세로 줄 길이 = 이 값 × 7** 이고 막대 높이도 이 값이다.
⚠️ 셋이 한 값에서 나온다. 줄만 늘리거나 막대만 키우면 자리가 어긋난다.
⚠️ 예전에는 이름·번호가 앉는 줄 높이였다(26~36px). 글자가 다 빠지면서
순수한 눈금이 되어 16~24px 로 줄였다(2026-08-27 사용자 결정). */
--fx-tick: clamp(16px, 2.2vh, 24px);
/* ⚠️ 액자 여백은 없앴다 — 2026-08-27 사용자 결정. 전체 화면 카드는 무대(=화면)
네 변 모두 끝까지 간다. 되살리려면 **셋을 같이** 되돌려야 한다. 하나만 되돌리면
그때마다 어긋난다.
① 카드 크기 — lineup-float.js 의 full
② 모서리 둥글기 — 지금은 JS 가 0 으로 굴린다. 여백이 있으면 굴릴 필요가 없다
③ 앞 장이 물러나는 방식 — 지금은 옆으로 민다. 여백이 있으면 그 띠에서 삐져나온다 */
/* 무대 좌우 끝에서 카드가 떨어지는 거리.
⚠️ % 가 아니라 px 다. 오른쪽 고정 퀵버튼(.xc-quick)이 화면 오른쪽 끝에서
항상 100px 자리를 쓰는데, % 로 잡으면 좁은 화면에서 그 폭이 같이 줄어
카드가 버튼 밑으로 들어간다.
⚠️ 116px 이다(예전 92 에서 올렸다). 무대가 .xc-area 의 **패딩 상자**를 기준으로
잡히기 때문에 페이지 좌우 여백(30px)이 무대 안에 들어와 있다. 그만큼
카드가 화면 끝에 더 가까워져 92 로는 퀵버튼과 8px 겹쳤다(실측).
지금은 1440 에서 16px · 1025 에서 16px 남는다. */
--fx-mx: 116px;
/* 고정된 동안 위아래로 비우는 자리. 위쪽은 GNB(높이 80px)가 글을 덮지 않게 하는 몫.
⚠️ 위아래가 같아야 한다. 한쪽만 주면 내용이 그 절반만큼 치우쳐 가운데가 아니게 된다. */
--fx-pad: 80px;
}
/* ⚠️ 자식 선택자(>)로 조이면 안 된다. ScrollTrigger 가 고정할 때 한 겹 감쌀 수 있다. */
.xc-lineup--float .xc-area {
position: relative;
min-height: 100dvh;
padding-block: var(--fx-pad);
/* ⚠️ 폭 제한을 푼다. main.css 의 .xc-area 는 max-width:1440 + 좌우 padding 30 이라,
그대로 두면 1600·1920 화면에서 '전체 화면' 카드가 1440 폭에 갇힌다
(실측 1600 화면에서 무대가 1440 이었다 — 양옆 72px 씩이 죽은 자리로 남았다).
무대(.xc-lineup__acc)가 이 상자를 기준으로 inset:0 을 잡으므로 여기서 풀어야
실제 해상도가 그대로 카드 크기가 된다.
⚠️ 100vw 를 쓰면 안 된다. 스크롤바 폭이 포함돼 가로 스크롤이 생긴다.
width:100% 는 스크롤바를 뺀 실제 폭이라 그 문제가 없다. */
max-width: none; width: 100%;
padding-inline: 0;
/* 안의 둘(글·무대)이 전부 절대 배치라 흐름에 남는 내용이 없다.
높이는 위 min-height 가 정한다. */
display: block;
}
/* ── 가운데 글 ──
②에서 한 줄씩 뜨고, ③ 내내 가운데에 그대로 있다가 ④에서 위로 올라가며 사라진다.
⚠️ 폭을 **좌우 카드 영역 안쪽까지**로 묶는다. ③ 에서 카드가 글 양옆에 서기 때문에
피하지 않으면 겹친다. 영역의 안쪽 변은 무대 끝에서
(--fx-mx + --fx-s + --fx-zig) 다 — 영역 안 지그재그의 안쪽 자리까지 포함한다.
글 폭과 카드 가로 자리(JS 의 LX·zig)는 한 묶음이다. 하나만 바꾸면 겹친다. */
.xc-lineup--float .xc-lineup__head {
position: absolute; left: 50%; top: 50%;
translate: -50% -50%;
width: min(900px, calc(100% - 2 * (var(--fx-mx) + var(--fx-s) + var(--fx-zig) + 24px)));
max-width: none; margin: 0;
text-align: center;
z-index: 5;
}
/* 설명 두 줄은 JS 가
기준으로 갈라 이 span 으로 감싼다.
⚠️ inline-block 이어야 transform 이 먹는다. inline 이면 y 이동이 무시된다. */
.xc-lineup--float .xc-fx-line { display: inline-block; }
/* ── 무대 ──
고정된 화면에서 위아래 여백을 뺀 자리를 전부 쓴다. 좌우 줄이 세로로 네 장까지
서기 때문에 예전처럼 낮은 띠로는 모자란다. */
.xc-lineup--float .xc-lineup__acc {
/* ⚠️ inset:0 이다. 펼친 카드가 **화면 전체**를 덮어야 하므로 무대가 위아래 여백까지
포함해야 한다. 위아래 여백(--fx-pad)은 이제 무대가 아니라 JS 의 자리 계산이
챙긴다(글이 붙는 자리 · 카드 띠의 위아래 끝). */
position: absolute; inset: 0;
/* ⚠️ height:auto 가 반드시 있어야 한다. main.css 가 .xc-lineup__acc 에
height: clamp(420px, 38vw, 520px) 를 박아 두는데, height 가 auto 가 아니면
top+height 로 상자가 정해지고 bottom 이 무시된다. 실측 1440x900 에서
무대가 화면 높이가 아니라 520 으로 잡힌다. */
height: auto;
display: block; margin: 0;
/* ⚠️ 컨테이너 쿼리를 끈다. main.css 의 --card-w-open 이 100cqw 로 계산되는데
카드가 flex 항목이 아니게 되면서 그 값의 전제가 사라졌다. */
container-type: normal;
/* ⚠️ 가로 스크롤 금지 (프로젝트 절대 규칙). 카드는 무대 안에서만 움직인다.
⚠️ **이 한 줄이 지금은 더 중요하다.** ⑤ 에서 갈아 끼울 때 새 장이 scale 1.06,
앞 장이 1.04 로 화면보다 커진다(lineup-float.js 의 ⑤-2~7). 이것이 없으면
그만큼 그대로 삐져나와 가로 스크롤이 생긴다. */
overflow: hidden;
/* ④ 고리를 진짜 원근으로 돌린다 (2026-08-28).
⚠️ `transform-style: preserve-3d` 는 **쓰지 않는다.** 두 가지 때문이다.
① 바로 위 `overflow: hidden` 이 있으면 규격상 preserve-3d 가 flat 으로 강제된다.
그 한 줄은 ⑤ 의 가로 스크롤을 막는 것이라 뺄 수 없다.
② preserve-3d 를 켜면 형제들이 **실제 깊이로** 정렬되어, ⑤ 에서 일곱 장을
z-index 로 쌓아 올리는 것이 밀릴 위험이 있다.
`perspective` 는 그 규칙과 무관하다. 자식에게 원근만 입히고 칠하는 순서는
그대로 z-index 가 쥔다 — 우리가 원하는 그림이다.
⚠️ 값은 lineup-float.js 의 PERSP 와 **같아야 한다.** 자리 보정을 그 값으로 계산한다. */
perspective: 1400px;
}
/* ── 카드 ──
자리는 JS 가 transform(x·y)으로 준다. CSS 는 '무대 한가운데' 까지만 놓는다. */
.xc-lineup--float .xc-card {
position: absolute; left: 50%; top: 50%;
width: var(--fx-s); height: var(--fx-s);
/* 접힌 네모의 둥글기다. main.css 는 12px 이고 여기서 18px 로 올렸다(150px 에서 12%).
⚠️ **전체 화면에서는 JS 가 0 으로 굴린다.** 화면 끝까지 가는 카드에 둥근 모서리가
남으면 네 귀퉁이에 페이지 바탕이 비친다. 여백이 있던 시절에는 안 비쳤다. */
border-radius: 18px;
flex: none;
z-index: 1;
contain: layout paint;
/* 전환은 GSAP 이 인라인으로 지배한다. CSS transition 이 남아 있으면
스크럽으로 되감을 때 두 겹이 되어 늘어진다. */
transition: none;
/* ⚠️ 등장(0→1)과 흐림(1→.32)을 **opacity 하나로** 굴린다. 새 순서에서는 둘이
시간상 겹치지 않는다(등장은 ③, 흐림은 ⑤). 예전처럼 --fx-in × --fx-dim 으로
나누면 커스텀 속성이 되는데, GSAP 은 -- 속성에 길이 0 짜리 값을 넣을 때
끝값이 아니라 시작값을 써 버려 시작 상태가 통째로 어긋난다(실측 두 번 확인).
네이티브 opacity 는 그런 문제가 없다.
⚠️ 기본값 1 이다. GSAP 이 막힌 화면에서 카드가 통째로 사라지지 않게 하는 몫이고,
JS 가 뜨자마자 0 으로 내린다.
⚠️ 떠다님은 걷어냈다. 쓸 수 있는 자리가 transform 하나뿐인데 그것을 자리 이동이
쓰고, CSS translate 는 아래 이유로 못 쓴다.
⚠️ 가운데 맞춤(-50%)은 **CSS 의 translate 로 하면 안 된다.** GSAP 은 요소에
transform 을 걸 때 translate·rotate·scale 개별 속성을 자기 행렬에 흡수한 뒤
none 으로 지워 버린다. 그래서 카드가 -50% 를 잃고 정확히 절반(61.5px)만큼
오른쪽 아래로 밀린다(실측). 대신 JS 가 xPercent·yPercent -50 을 준다 —
GSAP 은 그것을 transform 문자열 안의 %로 내보내므로 크기가 변해도 따라온다. */
--fx-seen: 0;
opacity: 1;
}
/* ── 사진판·패널 ──
카드를 꽉 채운다. 카드가 접힘(정사각형)에서 화면 전체까지 커지므로 사진도 같이 커진다.
⚠️ 예전에는 사진판을 '펼친 크기'로 고정해 두고 카드(창)만 여닫아 사진을 리스케일하지
않았다(main.css 의 커튼 방식). 지금은 펼친 크기가 화면 전체라 그 방식이 성립하지
않는다 — 148px 짜리 창에 1425×900 사진판을 두면 접힘에서 사진의 1% 만 보인다.
⚠️ 크기가 변하는 것은 첫 장이 화면을 덮을 때 한 번뿐이다. 그다음 장들은 이미
전체 화면 크기로 겹쳐 나타나므로 transform 만 돈다. */
.xc-lineup--float .xc-card :is(.xc-card__media, .xc-card__panel) {
inset: 0; width: 100%; height: 100%;
left: 0; top: 0; right: 0; bottom: 0;
translate: none;
}
/* ④ 고리에서 **각이 진 카드에 그림자**를 얹어 깊이를 보탠다 (2026-08-28 사용자 지시).
⚠️ 값은 JS 가 넣는다(--fx-shx · --fx-sha). **기본이 0 이라 ④ 밖에서는 그림자가 없다** —
⑤ 에서 전체화면이 될 때 그림자가 남으면 화면 가장자리에 검은 띠가 생긴다.
그래서 ⑤-1 과 ⑤-2~7 의 fromTo 에도 0 을 명시해 둔다(lineup-float.js).
⚠️ 이 그림자는 카드와 **같이 기울어진다**(transform 이 걸린 요소의 box-shadow 라서).
바닥에 지는 그림자가 아니라 '떠 있는 판' 의 그림자로 읽힌다 — 이 연출에는 그게 맞다.
⚠️ 카드의 overflow: hidden 은 **바깥 그림자를 안 자른다.** 안쪽(inset)이었다면 잘린다. */
.xc-lineup--float .xc-card {
/* ── 두 겹 그림자 (2026-08-31 · 사용자 지시 「그림자 너무 진하고 어색함」) ──
그전에는 `var(--fx-shx) 30px 44px rgba(0,0,0, var(--fx-sha))` **한 겹**이었다.
🔴 「진하다」보다 **어색하다** 쪽이 원인이었다. 세로 30px 은 44px 블러 한 겹으로
감당하기에 너무 먼 거리라 접지가 안 읽히고 **카드 뒤에 검은 카드가 한 장 더
있는 것**처럼 보였다. 알파만 내려도 안 풀린다 — 형태 문제라서, 옅은 겹유령이
될 뿐이다(안 R1 을 렌더해 확인하고 버렸다).
고침: **그림자를 원래대로 두 겹으로 나눈다.**
① 가까운 겹(4px/10px) = 「바닥에 닿아 있다」
② 먼 겹(20px/46px) = 「떠 있다」
③ ADD 무대의 접지 그림자(slabGroundSoft/Tight)가 두 겹인 것과 같은 이유다.
⚠️ 색을 **검정이 아니라 네이비**(--xc-navy #161D29)로 둔다. 카드가 어두운 사진이라
순검정 그림자는 카드의 겹유령으로 읽힌다. ③ 에서 확인한 것과 같은 원리다 —
대상·배경과 다른 계열의 그림자는 뜬다.
🔴 **--fx-sha 는 이제 알파가 아니라 '각도 비율' 이다.** 실제 진하기는 여기서
계수(.34/.46)를 곱해 정한다. lineup-float.js 의 SH_MIN/SH_MAX(.08/.26)를
**내리지 말 것** — 그 값은 각도 비율이고, ring.mjs 가 그것으로
「그림자가 각도를 따르는가」를 검증한다(앞 > 0.05 · 옆이 앞보다 +0.15 이상).
상수를 내리면 연출이 아니라 **검사가 깨진다.** 진하기는 이 계수로 조절한다.
⚠️ 옆으로 눕는 거리도 .55 로 줄였다. ±30px 이 그대로면 겹치는 두 장 사이로
그림자가 들어가 그 사이가 탁해진다.
⚠️ 세로 오프셋은 고리를 **눕힌 정도(RING_AR)와 같이 간다.** 눕힐수록 그림자가
더 아래로 진다. 2026-08-28 에 고리를 더 눕히면서 22 → 30 으로 올렸고,
두 겹으로 나누면서 먼 겹이 그 몫(20px)을 이어받는다. */
box-shadow:
0 4px 10px rgba(22, 29, 41, calc(var(--fx-sha, 0) * .34)),
calc(var(--fx-shx, 0px) * .55) 20px 46px rgba(22, 29, 41, calc(var(--fx-sha, 0) * .46));
}
/* ⚠️ **사진만 1px 씩 넘겨 깐다.** 카드가 xPercent/yPercent -50 으로 반 픽셀 자리에
놓이면서 합성 이음매가 생겨, 맨 왼쪽 한 줄에 사진도 스크림도 안 찍히고 카드 바탕
(--xc-navy)이 그대로 샜다. 어두운 사진 위에서 그것이 흰 테두리선처럼 읽혔다
(실측 x=0 은 34,43,53 · x=1 부터는 5,10,13).
⚠️ 섹션 배경이 흰색이 된 뒤에도(2026-08-28) 이 처리는 그대로 필요하다. 새는 것은
페이지 바탕이 아니라 **카드 자신의 --xc-navy 면**이라서, 이번에는 같은 한 줄이
어두운 선으로 읽힌다. 방향만 뒤집혔을 뿐 원인과 고침이 같다.
border 도 outline 도 box-shadow 도 없다 — 그것들을 찾으면 헛수고다.
⚠️ 패널(글)은 넘기면 안 된다. padding 이 글 자리를 정하는데 상자가 커지면 어긋난다.
⚠️ 넘긴 만큼은 .xc-card 의 overflow:hidden 이 자른다. 밖으로 안 나간다. */
.xc-lineup--float .xc-card .xc-card__media {
inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
left: -1px; top: -1px; right: -1px; bottom: -1px;
}
/* ⚠️ 패널·번호판의 CSS transition 도 끈다. .xc-card 에만 끄고 이 둘을 놓쳤더니
main.css 의 `transition: opacity` 가 살아남아, 스크럽으로 GSAP 이 매 프레임 넣는
값을 브라우저가 뒤늦게 쫓아갔다. 겹쳐 넘기기에서 **앞 장 글과 새 장 글이 동시에
비치는 구간**이 그렇게 생겼다(실측 1440·1600·1920 에서 각각 1~3곳).
전환은 GSAP 이 인라인으로 지배한다. 두 겹이 되면 안 된다. */
.xc-lineup--float .xc-card :is(.xc-card__panel, .xc-card__spine),
.xc-lineup--float .xc-card__panel > * { transition: none; }
/* ── 사진 막 ──
전체 화면 카드에서 글은 늘 왼쪽에 온다. 그쪽을 짙게 덮고 오른쪽으로 가며 걷는다.
⚠️ 세기는 색에 담는다 — 곱하기 막이라 opacity 로는 그라디언트가 안 된다.
왼쪽 rgb(80,86,94) 은 곱하기 세기 m=.75 로, main.css 가 본문 대비 5.67:1 을
재어 정한 값이다. 더 밝게 하면 대비가 먼저 깨진다.
⚠️ 55% 까지 세기를 유지한다. 글 덩어리(--fx-txt)의 오른쪽 끝이 거기까지 온다. */
.xc-lineup--float .xc-card__media::after {
background: linear-gradient(90deg,
rgb(80, 86, 94) 0%,
rgb(80, 86, 94) 55%,
rgb(146, 149, 155) 100%);
/* ── 접힌 카드는 막을 걷어 조금 밝게 (2026-08-28 사용자 지시) ──
「7개 카드 작을 때 조금 밝게 해」.
⚠️ **세기(색)는 그대로 두고 막 전체의 불투명도만 내린다.** 위 색은 펼친 카드의
본문 대비 5.67:1 을 재어 정한 값이라 색을 건드리면 그 계산이 통째로 깨진다.
한 겹의 불투명도는 가로 방향 비율을 유지한 채 전체를 고르게 옅게 만든다
(그라디언트가 필요했던 것은 세기의 **가로 변화**였다. 그건 색이 계속 맡는다).
⚠️ **크기가 아니라 `--fx-open`(글이 떠 있는가) 에 물린다.** ⑥ 에서 카드가 다시
작아질 때도 글은 그대로 있으므로 거기서는 밝아지면 안 된다.
lineup-float.js 가 ⑤ 의 spine·panel 과 같은 구간에서 0 → 1 로 올린다.
⚠️🔴 **기본값이 0 이다. 1 로 두면 안 된다.** GSAP 이 이 속성을 트윈 대상으로 잡으면
**초기에 인라인 값을 지워 버린다**(실측: 바로 윗줄에서 같이 박은 --fx-seen 은
남는데 --fx-open 만 사라졌다. 차이는 GSAP 이 트윈하느냐 뿐이다).
그래서 lineup-float.js 가 박아 두는 초기값에 기대면 안 되고, **없을 때의 값이
곧 접힘 상태**여야 한다. 이 규칙은 float 조건 안에만 있으므로 아코디언에는
닿지 않는다 — 거기는 main.css 의 막이 그대로 쓰인다.
.68 → 접힘일 때 왼쪽 실효 세기 m = 1 − .68 + .68 × .75 = **.83**.
접힘에 뜨는 글은 이름·번호뿐이다. 1440×900 · 일곱 장 실측(같은 방법으로 전후 비교):
이름 16.69~18.93 : 1 → **14.17~18.32 : 1**
번호 5.42~ 6.49 : 1 → **5.42~ 6.58 : 1** (번호는 사실상 그대로다)
가장 낮은 것이 5.42:1 로 AA(4.5:1) 위에 있다.
⚠️ 더 내리려면 **다시 재고** 내릴 것. 번호가 바닥이고 여유가 1:1 도 안 된다.
번호는 --fx-seen 이 0 일 때 흰색 58% 라 원래부터 가장 약하다. */
opacity: calc(.68 + .32 * var(--fx-open, 0));
}
/* ── 접힘 : 번호와 이름 ──
main.css 는 세로쓰기다. 좁은 세로 띠일 때만 뜻이 있던 표현이라 정사각형에서는
가로로 되돌린다(1024 이하 블록이 하는 것과 같은 되돌림이다). */
.xc-lineup--float .xc-card__spine {
inset: auto 0 0 0; top: auto;
padding: 0 14px 12px;
flex-direction: column; align-items: flex-start; justify-content: flex-end;
gap: 2px;
}
.xc-lineup--float .xc-card__label {
display: block; writing-mode: horizontal-tb; font-size: var(--xc-fs-14);
}
/* 진행 표시 — 다 접힌 짧은 구간에서 방금 읽은 장의 번호가 밝아지고 밑줄이 찬다.
⚠️ 클래스가 아니라 --fx-seen(0~1) 하나로 굴린다. 스크럽은 되감기므로, 되감을 때
스스로 벗겨지지 않는 클래스를 쓰면 위로 올라갔을 때 표시가 전부 채워진 채 남는다. */
.xc-lineup--float .xc-card__no {
position: relative;
writing-mode: horizontal-tb; margin-top: 0;
line-height: var(--xc-lh-body);
color: var(--xc-text);
opacity: calc(.58 + .42 * var(--fx-seen, 0));
}
.xc-lineup--float .xc-card__no::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
background: currentColor;
transform: scaleX(var(--fx-seen, 0)); transform-origin: left center;
}
/* ── 전체 화면 카드의 글 ──
**위 셋(분류·이름·Wield)은 상단에, 아래 둘(태그라인·본문)은 하단에** 붙는다.
⚠️ 가르는 장치는 main.css 의 `.xc-card__tag { margin-top: auto }` 하나다. 여기서는
그것을 **건드리지 않기만** 하면 된다(예전에는 justify-content:center 로 가운데에
모으고 auto 마진을 보통 값으로 덮었다. 2026-08-27 에 되돌렸다).
main.css 가 이 배치를 고른 이유도 적혀 있다 — 가운데가 비어 사진이 가장 넓게
드러나는 띠가 살고, 글자가 그 밝은 띠를 피해 대비가 6.00:1 로 가장 좋다.
⚠️ 그리고 그 빈 띠가 **차례표(.xc-fx-rail)가 서는 자리**다. 글을 다시 가운데로
모으면 차례표와 겹친다. 셋이 한 묶음이다.
⚠️ 글자 크기도 아코디언 기준이라 화면 전체에서는 너무 작다. 이 셀렉터가 가리키는
것만 키운다 — 공용 토큰(--xc-fs-*)을 건드리면 다른 페이지 수십 곳이 같이 움직인다. */
.xc-lineup--float .xc-card__panel {
padding: var(--fx-top) var(--fx-gut) var(--fx-bot);
justify-content: flex-start;
}
.xc-lineup--float .xc-card__panel > * { max-width: var(--fx-txt); }
.xc-lineup--float .xc-card__cat { font-size: clamp(13px, 1.1vw, 16px); }
/* ⚠️ 분류 오른쪽으로 그어지던 가로선을 지운다(2026-08-27 사용자 지시).
main.css 의 `.xc-card__cat::after` 는 아코디언에서 **카드가 펼쳐지는 동안** 오른쪽으로
그어지며 '커튼이 열린다' 를 거들던 장치다. float 모드에는 그 여닫힘이 없고, 카드가
화면 전체라 선이 화면을 가로지르는 흰 줄로만 남는다.
⚠️ main.js 가 아코디언 시절 그대로 첫 장에 `is-open` 을 붙여서 `--card-line` 이 1 이
된다(실측). 그래서 값으로 끄는 것으로는 안 되고 여기서 display 로 끊는다. */
.xc-lineup--float .xc-card__cat::after { display: none; }
.xc-lineup--float .xc-card__name { font-size: clamp(40px, 4.2vw, 64px); }
.xc-lineup--float .xc-card__wield{ font-size: clamp(15px, 1.3vw, 19px); }
/* ⚠️ margin-top 을 여기서 주지 않는다. main.css 의 `margin-top: auto` 가 아래 덩어리를
화면 바닥으로 미는 장치다. 값을 주면 그 순간 위아래 가르기가 사라진다. */
.xc-lineup--float .xc-card__tag { font-size: clamp(24px, 2.5vw, 38px); }
/* ⚠️ 아래 덩어리를 키우면 그만큼 위로 자라 차례표를 밀어붙인다. 좁고 낮은 화면
(1025×680)에서 본문이 네 줄로 접히면 여유가 20px 남짓밖에 안 남는다.
더 키우려면 --fx-tick(차례표 눈금)이나 --fx-bot 을 같이 봐야 한다. */
.xc-lineup--float .xc-card__desc { font-size: clamp(16px, 1.45vw, 22px); }
/* ── 「자세히 보기」 ──
본문 바로 아래, 글과 **같은 왼쪽 기둥**에 선다(2026-08-27 사용자 결정).
⚠️ 버튼은 lineup-float.js 가 만든다. 마크업에는 글자(data-fx-more)만 있다.
⚠️ align-self 가 반드시 있어야 한다. 패널이 세로 flex 라 그냥 두면 알약이
글 폭(--fx-txt)만큼 늘어난다.
⚠️ 위 .xc-card__panel > * 의 max-width 를 그대로 받는다. 알약은 white-space:nowrap
이라 글자가 길어지면 그 폭을 넘길 수 있는데, 넘겨도 카드 안이라 문제는 없다. */
.xc-lineup--float .xc-card__more {
align-self: flex-start;
margin-top: clamp(20px, 2.2vw, 32px);
/* ⚠️ 알약의 테두리·바탕·글자는 **여기서 손대지 않는다.** .xc-card 자신이 다크 한 벌을
통째로 갖는다(main.css). 한때 여기에 --xc-bg 만 덧대어 호버 글자 사라짐을 막았는데,
그러면 테두리(--xc-border-strong)는 라이트 값 그대로라 어두운 사진 위에서 안 보이고
알약이 맨 글자로 읽혔다(2026-08-28). 반쪽만 고치는 자리를 없앴다. */
}
/* ── ⑤ 왼쪽 차례표 (토스식) ──
지금 몇 번째 장을 보고 있는지와 남은 차례를 한눈에 준다.
⚠️ **글자가 하나도 없다. 세로 줄과 막대뿐이다**(2026-08-27 사용자 결정).
이름 → 번호 → 아무것도 없음 순으로 두 번에 걸쳐 걷어냈다. 이름도 번호도
화면 가운데에 이미 있다. 다시 넣지 말 것 — 같은 말이 두 번 된다.
막대가 줄의 1/7 을 차지하므로 '일곱 중 몇 번째' 는 비율로 읽힌다.
⚠️ **마크업이 아니라 lineup-float.js 가 만든다.** 메인은 세 벌(프로토타입 · ko · en)
이라 손으로 넣으면 세 곳이 어긋난다. 글감은 카드가 이미 갖고 있다
(.xc-card__no · .xc-card__label). 새로 짓는 문안이 아니다.
⚠️ 카드 **밖**에 있다. 안에 넣으면 장을 갈아 끼울 때 카드와 같이 사라진다.
⚠️ 위아래로 갈라 놓은 글 사이의 빈 띠에 선다. 글을 다시 가운데로 모으면 겹친다.
⚠️ 왼쪽 자리는 --fx-gut(글 기둥)이 아니라 --fx-rail-x 다. 둘은 다른 값이다. */
.xc-lineup--float .xc-fx-rail {
position: absolute; z-index: 30;
/* ⚠️ top:50% + translate 로 가운데를 맞추지 않는다. 이 파일 맨 위에 적어 둔 대로
GSAP 이 어느 날 이 요소에 transform 을 걸면 translate 를 흡수해 지운다.
위아래를 붙이고 align-items 로 가운데를 잡으면 transform 이 필요 없다. */
/* ⚠️ top·bottom 은 JS 가 인라인으로 덮는다. 화면 세로 가운데가 아니라 **글 두 덩어리
사이의 빈 띠** 안에서 가운데다 — 일곱 장의 글 높이가 달라 CSS 만으로는 못 잡는다
(lineup-float.js 의 measure() 참고). 여기 0 0 은 JS 가 막혔을 때의 자리다. */
left: var(--fx-rail-x); top: 0; bottom: 0;
display: flex; align-items: center;
/* JS 가 ⑤ 에서 올린다. 카드가 작은 네모일 때는 보이면 안 된다.
⚠️ visibility 를 같이 내린다. 안에 누를 수 있는 버튼이 일곱 개라 투명하기만 하면
안 보이는 채로 **탭에 잡히고 클릭도 먹는다.** JS 는 autoAlpha 로 이 둘을
같이 올리고 내린다(lineup-float.js). 한쪽만 고치면 어긋난다. */
opacity: 0; visibility: hidden;
/* 줄과 막대는 클릭을 통과시킨다. 누를 수 있는 것은 아래 __go 버튼뿐이다 */
pointer-events: none;
color: var(--xc-white);
}
/* 세로 줄과 그 위를 미끄러지는 막대 — 차례표에 남은 것은 이 둘뿐이다.
⚠️ 줄이 어두운 사진 위에 놓인다. .18 은 눈에 겨우 걸리는 세기다. 더 내리면
'남은 차례' 가 통째로 안 보여 막대만 떠 있는 것으로 읽힌다. */
.xc-lineup--float .xc-fx-rail__track {
position: relative; flex: none;
width: 2px; height: calc(var(--fx-n, 7) * var(--fx-tick));
border-radius: 2px;
background: rgba(255, 255, 255, .18);
}
/* ⚠️ 지금 장을 **클래스가 아니라 숫자 하나(--fx-at)** 로 가리킨다. 스크럽은 되감기므로,
스스로 벗겨지지 않는 클래스를 쓰면 위로 올라갔을 때 표시가 남는다
(.xc-card__no 의 --fx-seen 과 같은 이유). 장을 갈아 끼우는 동안 --fx-at 이 소수라
막대가 두 칸 사이를 미끄러진다. */
.xc-lineup--float .xc-fx-rail__thumb {
position: absolute; left: 0;
width: 2px; height: var(--fx-tick);
border-radius: 2px;
background: var(--xc-gradient);
/* ⚠️ transform 이 아니라 top 이다. 이유는 위 .xc-fx-rail 주석과 같다. */
top: calc(var(--fx-at, 0) * var(--fx-tick));
}
/* ── 차례표를 눌러 그 장으로 간다 (2026-08-28 사용자 지시) ──
⚠️ **보이지 않는다.** 화면에 남는 것은 여전히 줄과 막대뿐이라는 규칙을 안 깬다.
줄이 2px 이라 그대로는 못 누르므로, 칸마다 손 닿을 넓이만 얹는다.
⚠️ 자리는 --fx-tick 으로 낸다. 칸 높이가 화면마다 달라져서 px 를 박으면 어긋난다.
⚠️ 폭 32px 은 줄을 가운데 두고 좌우로 벌린 값이다. 오른쪽으로 더 벌리면 글 기둥
(--fx-gut)에 닿아 본문 위를 덮는다. 그 둘은 다른 값이다(--fx-rail-x ≠ --fx-gut).
⚠️ 이 구간은 1025px 이상에서만 돌아 마우스 전용이다. 손가락 기준(44px)은 안 쓴다. */
.xc-lineup--float .xc-fx-rail__go {
position: absolute; left: -15px; width: 32px;
top: calc(var(--fx-i) * var(--fx-tick)); height: var(--fx-tick);
padding: 0; border: 0; background: none;
pointer-events: auto; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
/* 누를 수 있다는 신호. 글자를 넣지 않고 **그 칸의 줄만 밝힌다**.
⚠️ 막대(현재 장)와 같은 그라디언트를 쓰지 않는다. 지금 장으로 오해된다. */
.xc-lineup--float .xc-fx-rail__go::after {
content: ''; position: absolute; left: 15px; top: 0;
width: 2px; height: 100%; border-radius: 2px;
background: rgba(255, 255, 255, .62);
opacity: 0; transition: opacity var(--xc-dur-base, .3s) ease;
}
.xc-lineup--float .xc-fx-rail__go:hover::after,
.xc-lineup--float .xc-fx-rail__go:focus-visible::after { opacity: 1; }
.xc-lineup--float .xc-fx-rail__go:focus-visible {
outline: 2px solid var(--xc-white); outline-offset: 2px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
.xc-lineup--float .xc-fx-rail__go::after { transition-duration: .01ms; }
}
/* ── 떠 있는 네모에 손이 닿았을 때 ──
⚠️ hover 로 펼치지 않는다. 펼침은 스크롤이 지배한다. 둘 다 두면 매 프레임 서로
덮어써서 마우스가 안 먹는 것처럼 보인다. 여기서는 '누를 수 있다'는 신호만 준다. */
.xc-lineup--float .xc-card:is(:hover, :has(.xc-card__link:focus-visible)) { z-index: 2; }
.xc-lineup--float .xc-card:is(:hover, :has(.xc-card__link:focus-visible))
.xc-card__label { color: var(--xc-text); }
/* ⚠️ **카드 전체를 클릭 영역으로 늘리지 않는다**(2026-08-27 사용자 지시).
카드가 화면 전체라 '아무 데나 눌러도 간다' 가 되는데, 그러면 스크롤로 읽는 화면에서
오조작이 난다. 누를 자리는 카드 안에 따로 둔다.
⚠️ 지금은 솔루션 이름(