/* s4x.css — 4 다섯 단계 '밤 무대'(lab-s4 · Integrate 때 index head 에 s4.css 다음 한 줄). 한 파일 세 블록 소유 계약:
   stage = .s4x 아래(판·트랙·핀·3D 무대·제목·덱 배치·다섯 단계·안내 줄·#principles 틀) · cards = .s4x-c 아래(면·창·이름·로고·꽃 타일)
   · open = .s4x-panel·.s4x-layer·html.s4x-lock 아래. 고치기 직전에 다시 읽고 자기 블록 안만 Edit(통째 Write 금지).
   3D 사슬(.s4x-scene·.s4x-depth·.s4x-world·ol.s4x-deck·li.s4x-c)에 overflow·opacity<1·filter·clip-path·isolation·mix-blend 0 — 밝기·투명은 면(.s4x-face)에만. */

/* LANE:s4x-stage start */
/* 갈래 stage — 판·트랙·핀·3D 무대·제목·덱 배치(목록·격자·나선·원통·벽·고리·평면)·다섯 단계·안내 줄·#principles 틀. 선택자는 .s4x 아래만.
   세 상태(같은 DOM): ① JS 꺼짐(data-open-ready 없음) = 판 sticky 0 · 머리 2열 · li [카드 200 | 패널] 목록 · 다섯 단계 · #principles
   ② 정돈 격자([data-open-ready]:not(.is-live) — 모션 줄이기·저사양·?still=1·?fail=1·무대 붙기 전) = 카드 격자(앞면만) · 핀 0 · 누르면 바로 펼침
      html.s4x-pre(lab head 인라인 한 줄 · JS 켜짐) = open init 전 첫 그리기부터 ② 자리(/#how-we-work 바로 들어오기 CLS 0). 모듈 실패면 load+3초에 풀려 ①
   ③ .is-live = 3D(js/s4x-stage.js 가 li·머리·world·depth·판 transform 과 li --b·--o 만 씀). 숫자 = js/s4x-geo.js GEO */

/* ① 바탕(JS 꺼짐 판 = 이 규칙 그대로) */
.s4.s4x { max-width: none; margin: 120px 0 0; padding: 0; }
.s4x .s4x-track { position: relative; }
.s4x .s4x-plate { position: relative; margin: 0 12px; padding: 72px 56px 56px; border-radius: var(--r-band); background: #151414; color: #fcf9f5; overflow: clip; }
.s4x .s4x-scene { position: relative; }
.s4x .head4 .eb { margin: 0 0 18px; color: #a39d95; }
.s4x .head4 .t-h { color: #fcf9f5; }
.s4x .head4 .t-story { color: #a39d95; }
.s4x .s4x-deck { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.s4x .s4x-c { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.s4x .s4x-c > .s4x-front, .s4x .s4x-c > .s4x-back { grid-column: 1; grid-row: 1; width: 200px; height: 282px; }
.s4x .s4x-c > .s4x-panel { grid-column: 2; grid-row: 1; min-width: 0; }
.s4x .s4x-hint { display: none; }
.s4x .s4x-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; font-size: 16px; line-height: 1.5; color: #fcf9f5; }
.s4x .s4x-steps li { padding-top: 14px; border-top: 1px solid #4d4741; text-wrap: pretty; }
.s4x .s4x-steps b { font-weight: 720; }
/* 기술 이름: 켜지면 주황 2px 밑줄(fix-1: 알약 칩은 양 끝 반지름이 '이·기' 획을 자르고 토씨 '과·를'을 덮음 → 밑줄 · 글 자리·띄어쓰기 그대로) */
.s4x .s4x-tk { white-space: nowrap; text-decoration: underline 2px transparent; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.s4x .s4x-dots { display: none; }
/* #principles 담는 틀(크림 바탕 · 줄 규칙은 s4.css .s4 .prin 그대로) */
.s4x > .prin { width: calc(100% - 80px); max-width: 1360px; margin: 48px auto 0; }

/* ② 정돈 격자 */
html.s4x-pre .s4x:not([data-open-ready]) .s4x-deck .s4x-panel { display: none; }   /* open init 전 자리(패널 숨김은 open 블록 규칙과 같은 뜻) */
:is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-deck { max-width: 1136px; margin: 48px auto 0; grid-template-columns: repeat(auto-fill, 176px); justify-content: center; gap: 16px; }
:is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-c { display: block; width: 176px; height: 248px; }
:is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-c > .s4x-face { position: absolute; inset: 0; width: auto; height: auto; }
:is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-hint { display: block; margin: 20px 0 0; text-align: center; font-size: 15px; line-height: 1.5; color: #a39d95; }

/* ③ 3D(.is-live) — 판 sticky · 트랙 = 판 + 핀 1600 · 원근 = 판 높이 × 1.45(scene 에 인라인 0 — boot clearArt) */
.s4x.is-live .s4x-track { height: calc(100svh - 88px + 1600px); }
.s4x.is-live .s4x-plate { position: sticky; top: 72px; height: calc(100svh - 88px); padding: 0; transform-origin: 50% 30%; touch-action: pan-y; }   /* pan-y = 세로 스크롤 그대로 · 가로 끌기는 무대가 받음 */
.s4x.is-live .s4x-scene { position: absolute; inset: 0; perspective: calc((100svh - 88px) * 1.45); perspective-origin: 50% 50%; }
/* depth·world·deck·머리 = 무대 전체 크기 z 0 평면 → 누름 0(아니면 z 0 뒤의 벽·나선 카드 누름을 이 평면이 가로챔) · 카드만 누름 */
.s4x.is-live .s4x-depth, .s4x.is-live .s4x-world { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.s4x.is-live .s4x-deck { position: absolute; inset: 0; margin: 0; display: block; transform-style: preserve-3d; pointer-events: none; -webkit-user-select: none; user-select: none; }
.s4x.is-live .s4x-c { position: absolute; left: 50%; top: 50%; display: block; width: 200px; height: 282px; margin: -141px 0 0 -100px; transform-style: preserve-3d; will-change: transform; pointer-events: auto; cursor: pointer; }
.s4x.is-live .s4x-c > .s4x-face { position: absolute; inset: 0; width: auto; height: auto; }
.s4x.is-live .s4x-c.is-lifted { visibility: hidden; }
.s4x.is-live .s4x-c.is-ghost { pointer-events: none; }   /* 이음매에서 안 보이는 카드(--o 0)는 누름 0 */
/* 머리: world 안 z 0 평면(카드가 제목 앞뒤를 지나감) · 자리·배율은 stage 가 transform 으로 */
.s4x.is-live .head4 { position: absolute; inset: 0; display: block; pointer-events: none; transform-style: preserve-3d; }   /* 수리(10-24 · desk #5): 3D 맥락 유지 — 제목 translateZ(200) 가 평면으로 눌리면 가운데로 17% 끌려가고 작아짐(실측 x 181 · 폭 296) */
.s4x.is-live .head4 > div { position: absolute; left: 0; top: 0; width: max-content; text-align: center; transform-origin: 0 0; }
.s4x.is-live .head4 .eb { margin: 0 0 20px; transform-origin: 50% 100%; transition: opacity 400ms var(--ease-ui); }   /* 제목이 줄 때 stage 가 되돌림 배율(보이는 12px 바닥) */
.s4x.is-live .head4 .t-h { font-size: 96px; line-height: 1.02; letter-spacing: -.04em; text-wrap: nowrap; }
.s4x.is-live .head4 .t-story { position: absolute; left: 0; top: 0; width: 520px; max-width: none; padding: 0; font-size: 20px; line-height: 1.6; text-align: center; transform-origin: 0 0; transition: opacity 200ms var(--ease-ui); }   /* 나선 중 0 → 감기 때 오른쪽 위(stage 가 inline opacity) */
/* 제목 오름(판 위 끝이 화면 45% — stage 가 data-head 를 담): 줄마다 90px 아래 → 0 · 620ms · 줄 간격 90ms(글자 쪼개기 0 — 마크업 동결) */
.s4x.is-live .head4 .w4, .s4x.is-live .head4 .w7 { display: inline-block; transition: transform 620ms var(--ease-ui), opacity 620ms var(--ease-ui); }
.s4x.is-live .head4 .w7 { transition-delay: 90ms; }
.s4x.is-live:not([data-head]) .head4 .w4, .s4x.is-live:not([data-head]) .head4 .w7 { transform: translateY(90px); opacity: 0; }
.s4x.is-live:not([data-head]) .head4 .eb, .s4x.is-live:not([data-head]) .head4 .t-story { opacity: 0; }
/* 안내 줄 · 다섯 단계(3D 무대 밖 · z 2) */
.s4x.is-live .s4x-hint { display: block; position: absolute; z-index: 2; right: 56px; top: 150px; width: 416px; margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: #a39d95; opacity: 0; transition: opacity 300ms var(--ease-ui); pointer-events: none; }
.s4x.is-live[data-hint] .s4x-hint { opacity: 1; }
/* 수리(10-24 · desk #6·#7): 자리 잡은 이야기 문장·안내 줄 = 왼쪽 정렬(제목 줄도 stage 가 왼쪽으로 맞춤) · 오른쪽 끝 = 쪽 칸(stage 가 hint right 를 씀) */
@media (min-width: 768px) { .s4x.is-live .head4 .t-story, .s4x.is-live .s4x-hint { text-align: left; } }
.s4x.is-live .s4x-steps { position: absolute; z-index: 2; left: 56px; right: 56px; bottom: 32px; margin: 0; grid-template-columns: repeat(5, minmax(0, 248px)); justify-content: center; opacity: 0; pointer-events: none; }
/* 꺼진 줄 #8a857e(먹 위 5.0:1 · fix-1: #6f6a64 = 3.43 → AA 미달) */
.s4x.is-live .s4x-steps li { color: #8a857e; border-top-color: #2f2a27; transition: color 240ms var(--ease-ui), border-color 240ms var(--ease-ui); }
.s4x.is-live .s4x-steps li.is-on { color: #fcf9f5; border-top-color: #4d4741; }
.s4x.is-live .s4x-steps li.is-cur { border-top-color: #ff5e1f; }
.s4x.is-live .s4x-tk { transition: text-decoration-color 180ms var(--ease-ui); }
.s4x.is-live .s4x-steps li.is-cur .s4x-tk { text-decoration-color: #ff5e1f; }
/* 열림 중(stage data-away · 정돈 격자 = open .is-open): 제목·이야기 문장·안내 줄·다섯 단계·점 = 0(desk-1 #2 · 3D 사슬 밖 요소만 · 인라인 opacity 를 이김) */
.s4x.is-live .head4 > div, .s4x.is-live .s4x-steps, .s4x.is-live .s4x-dots { transition: opacity 200ms var(--ease-ui); }
.s4x.is-live[data-away] :is(.head4 > div, .head4 .t-story, .s4x-hint, .s4x-steps, .s4x-dots), .s4x.is-open:not(.is-live) :is(.head4, .s4x-hint, .s4x-steps) { opacity: 0 !important; }
/* 1600 이상(big): 카드 240×338 · 제목 112(desk-1 #7: 1920 에서 카드 떼가 판 폭 47%) — 숫자 = js/s4x-geo.js GEO.d.big */
@media (min-width: 1600px) {
  .s4x.is-live .s4x-c { width: 240px; height: 338px; margin: -169px 0 0 -120px; }
  .s4x.is-live .head4 .t-h { font-size: 112px; }
}

/* 태블릿(768~1023): 카드 168×236 · 벽 4×3 · 다섯 단계 3+2 */
@media (min-width: 768px) and (max-width: 1023px) {
  .s4x .s4x-plate { padding: 56px 40px 48px; }
  .s4x .s4x-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; }
  .s4x .s4x-steps li { grid-column: span 2; }
  .s4x .s4x-steps li:nth-child(n + 4) { grid-column: span 3; }
  .s4x.is-live .s4x-c { width: 168px; height: 236px; margin: -118px 0 0 -84px; }
  .s4x.is-live .head4 .t-h { font-size: 72px; }
  .s4x.is-live .head4 .t-story { width: 440px; font-size: 18px; }
  .s4x.is-live .s4x-hint { right: 40px; width: 352px; }
  .s4x.is-live .s4x-steps { left: 40px; right: 40px; bottom: 24px; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; row-gap: 10px; font-size: 15px; }
}
/* 폰(768 미만 · 기준 갤럭시 360×656 → 판 360×600) */
@media (max-width: 767px) {
  .s4.s4x { margin-top: 96px; }
  .s4x .s4x-plate { margin: 0; padding: 48px 16px 40px; border-radius: 24px; }
  .s4x .s4x-deck { margin-top: 32px; row-gap: 32px; }
  .s4x .s4x-c { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .s4x .s4x-c > .s4x-front, .s4x .s4x-c > .s4x-back { width: 164px; height: 231px; }
  .s4x .s4x-c > .s4x-panel { grid-column: 1; grid-row: 2; }
  .s4x .s4x-steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .s4x .s4x-steps li { padding: 12px 0; }
  .s4x > .prin { width: calc(100% - 32px); }
  /* JS 꺼짐 목록(폰): 카드 = 가로 머리 한 줄(52 꽃 창 + 이름 + 로고) — fix-2: 164×231 카드 12장이면 구간 16,200px(약 25화면) */
  html:not(.s4x-pre) .s4x:not([data-open-ready]) .s4x-c { row-gap: 12px; }
  html:not(.s4x-pre) .s4x:not([data-open-ready]) .s4x-c > .s4x-front { width: 100%; height: 64px; flex-direction: row; align-items: center; padding: 6px 12px 6px 6px; }
  html:not(.s4x-pre) .s4x:not([data-open-ready]) .s4x-c .s4x-win { flex: none; width: 52px; height: 52px; }
  html:not(.s4x-pre) .s4x:not([data-open-ready]) .s4x-c .s4x-name { flex: 1; min-width: 0; margin: 0 0 0 12px; }
  html:not(.s4x-pre) .s4x:not([data-open-ready]) .s4x-c .s4x-marks { flex: none; margin: 0 0 0 8px; padding: 0; }
  :is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-plate { padding: 40px 12px 32px; }
  :is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .head4 { padding: 0 4px; }
  :is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-deck { margin-top: 28px; grid-template-columns: repeat(2, 164px); gap: 8px; }
  :is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-c { width: 164px; height: 231px; }
  :is(.s4x[data-open-ready], html.s4x-pre .s4x):not(.is-live) .s4x-steps { padding: 0 4px; }
  /* 3D: 판 = 화면 전체(top 0 · 100dvh — galaxy #1: 실제 크롬은 머리줄이 숨고 주소창이 접혀 top 56·100svh−56 판 위아래로 크림 띠 56px)
     판 안 위 56 = 머리줄 자리(먹 여백 · stage G.top) · 트랙 = 판 + 핀 900 · 3D 카드 10장 144×204 · 평면 2장 164×52 */
  .s4x.is-live .s4x-track { height: calc(100vh + 900px); height: calc(100dvh + 900px); }
  .s4x.is-live .s4x-plate { top: 0; height: 100vh; height: 100dvh; padding: 0; touch-action: pan-y; }
  .s4x.is-live[data-pin] .s4x-plate { border-radius: 0; }   /* 핀 = 화면 전체 → 귀퉁이 크림 쐐기 0(fix-2 · stage data-pin) */
  .s4x.is-live .s4x-plate { transition: border-radius 160ms var(--ease-ui); }
  .s4x.is-live .s4x-scene { perspective: calc(100vh * 1.45); perspective: calc(100dvh * 1.45); }
  .s4x.is-live .s4x-c { width: 144px; height: 204px; margin: -102px 0 0 -72px; }
  .s4x.is-live .s4x-c[data-d3="0"] { left: 0; top: 0; width: 164px; height: 52px; margin: 0; transform-style: flat; will-change: auto; }
  .s4x.is-live .head4 .eb { margin: 0 0 10px; }
  .s4x.is-live .head4 .t-h { font-size: 44px; line-height: 1.08; letter-spacing: -.035em; }
  .s4x.is-live .head4 .t-story { width: 328px; font-size: 15px; line-height: 1.5; transition: none; }
  .s4x.is-live:not([data-head]) .head4 .w4, .s4x.is-live:not([data-head]) .head4 .w7 { transform: translateY(64px); }
  .s4x.is-live .s4x-hint, .s4x.is-live .s4x-steps { left: 16px; right: 16px; top: auto; bottom: 96px; width: auto; height: 72px; }
  .s4x.is-live .s4x-hint { display: flex; align-items: center; justify-content: center; }
  .s4x.is-live .s4x-steps { display: grid; grid-template-columns: minmax(0, 1fr); opacity: 1; }
  .s4x.is-live .s4x-steps li { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui), color 240ms var(--ease-ui);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .s4x.is-live .s4x-steps li.is-cur { opacity: 1; transform: none; color: #fcf9f5; }
  .s4x.is-live .s4x-dots { display: flex; position: absolute; z-index: 2; left: 50%; bottom: 78px; gap: 8px; transform: translateX(-50%); pointer-events: none; }
  .s4x.is-live:not([data-step]) .s4x-dots { opacity: 0; }   /* 단계가 켜지기 전(나선·감기) 점 0(galaxy #10) */
  .s4x.is-live .s4x-dots i { width: 8px; height: 8px; border-radius: 999px; background: #4d4741; transition: background-color 240ms var(--ease-ui); }
  .s4x.is-live .s4x-dots i.is-on { background: #ff5e1f; }
}
/* LANE:s4x-stage end */

/* LANE:s4x-cards start */
/* 갈래 cards — 카드 면 모양만(.s4x-c 아래 · 덱 li 와 .s4x-layer 대리 카드·정지 표지 공용). li 의 크기·자리·transform 은 stage 몫.
   앞면 button.s4x-front = 크림 종이 · 위 44% 꽃 창(들임 8 · 반경 10) · 이름(안쪽 12 · 2줄 · keep-all) · 맨 아래 단색 글자 로고(최대 2).
   뒷면 span.s4x-back = 꽃 타일 꽉(still/s4x-tile-<id>.webp · 오기 전엔 --bg 단색) · 이 블록의 유일한 transform = rotateY(180deg).
   두 면 = backface hidden + filter brightness(var(--b)) + opacity var(--o) — li 에는 0(3D 사슬이 납작해짐). 그림자·테·그라디언트 0. 반경: 카드 16 · 창 10 */
.s4x-c { --nm: 20px; }
.s4x-c .s4x-face { box-sizing: border-box; border-radius: var(--r-card, 16px); -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: brightness(var(--b, 1)); opacity: var(--o, 1); }
.s4x-c .s4x-front { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 8px 8px 12px; border: 0; background: #fcf9f5; color: #151414; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* 꽃 창 58%(fix-1 · cards 제안: 44% 면 벽·고리·표지에서 이름 아래가 빈 크림 덩어리 · 모든 상태 이름 2줄 안 = cards-final/fit-win.json) */
.s4x-c .s4x-win { flex: none; display: block; height: 58%; border-radius: 10px; background-color: var(--bg, #f1dbc1); background-image: var(--tile, none); background-position: center; background-size: cover; background-repeat: no-repeat; }
.s4x-c .s4x-name { display: block; margin: 12px 4px 0; font-size: var(--nm); line-height: 1.25; font-weight: 720; letter-spacing: -.02em; color: #151414; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }   /* balance 는 '디시인사이드 | ·커뮤니티'(줄 머리 가운뎃점) → pretty */
.s4x-c .s4x-marks { display: flex; align-items: center; gap: 8px; height: 14px; margin: auto 4px 0; padding-top: 8px; box-sizing: content-box; }
.s4x-c .s4x-mark { display: block; flex: none; width: auto; height: 14px; fill: #2a2623; }
.s4x-c .s4x-back { display: block; transform: rotateY(180deg); background-color: var(--bg, #f1dbc1); background-image: var(--tile, none); background-position: center; background-size: cover; background-repeat: no-repeat; }
/* 기술이 켜진 줄의 카드(stage .is-hot) = 주황 2px 테(그림자 아님) · 키보드 포커스 = 주황 2px 바깥 4 */
.s4x-c.is-hot .s4x-front { outline: 2px solid #ff5e1f; outline-offset: -2px; }
.s4x-c .s4x-front:focus-visible { outline: 2px solid #ff5e1f; outline-offset: 4px; }
/* JS 꺼짐 목록·정돈 격자 = 앞면만 */
.s4x:not(.is-live) .s4x-c .s4x-back { display: none; }
.s4x[data-open-ready]:not(.is-live) .s4x-c { --nm: 18px; }
/* 열린 판의 대리 카드(.s4x-proxy)·정지 표지(.s4x-cover) = 표지 크기(데스크톱 224×318 · 1600↑ 256×363 · 폰 132×187)로 그려 둠(확대 흐림 0) · 두 면 겹쳐 3D 로 돎
   안쪽 치수 = 덱 카드 치수 × --k(표지 폭 ÷ 3D 카드 폭) → 이름 줄바꿈이 덱 카드와 같음(desk-1 #5: 착지 때 '성인 사이트에 퍼진 영상' 1줄→2줄 튐 0) */
.s4x-c.s4x-proxy, .s4x-c.s4x-cover { --k: 1.12; --nm0: 20px; --mk0: 14px; --mp0: 8px; --nm: calc(var(--nm0) * var(--k)); transform-style: preserve-3d; }
.s4x-c.s4x-proxy > .s4x-face, .s4x-c.s4x-cover > .s4x-face { position: absolute; inset: 0; }
.s4x-c:is(.s4x-proxy, .s4x-cover) .s4x-front { padding: calc(8px * var(--k)) calc(8px * var(--k)) calc(12px * var(--k)); }
.s4x-c:is(.s4x-proxy, .s4x-cover) .s4x-win { border-radius: calc(10px * var(--k)); }
.s4x-c:is(.s4x-proxy, .s4x-cover) .s4x-name { margin: calc(12px * var(--k)) calc(4px * var(--k)) 0; }
.s4x-c:is(.s4x-proxy, .s4x-cover) .s4x-marks { height: calc(var(--mk0) * var(--k)); gap: calc(8px * var(--k)); margin: auto calc(4px * var(--k)) 0; padding-top: calc(var(--mp0) * var(--k)); }
.s4x-c:is(.s4x-proxy, .s4x-cover) .s4x-mark { height: calc(var(--mk0) * var(--k)); }
@media (min-width: 1600px) {
  .s4x.is-live .s4x-c { --nm: 24px; }
  .s4x-c.s4x-proxy, .s4x-c.s4x-cover { --k: 1.0667; --nm0: 24px; }
}
/* 리드 결정용: 로고 대신 이름만(section[data-mark-mode="text"] 한 줄 — 덱·열린 판 둘 다) */
.s4x[data-mark-mode="text"] .s4x-c .s4x-marks, :root:has(.s4x[data-mark-mode="text"]) .s4x-c .s4x-marks { display: none; }
@media (min-width: 768px) and (max-width: 1023px) {
  .s4x.is-live .s4x-c { --nm: 17px; }
  .s4x-c.s4x-proxy, .s4x-c.s4x-cover { --k: 1; --nm0: 17px; }
}
@media (max-width: 767px) {
  .s4x-c, .s4x[data-open-ready]:not(.is-live) .s4x-c { --nm: 16px; }
  .s4x-c .s4x-marks { height: 12px; padding-top: 6px; }
  .s4x-c .s4x-mark { height: 12px; }
  .s4x-c.s4x-proxy, .s4x-c.s4x-cover { --k: .9167; --nm0: 16px; --mk0: 12px; --mp0: 6px; }   /* 표지 132 ÷ 카드 144 → 이름 14.7px(galaxy #3: 13px) */
  /* 폰 평면 카드(순위 11·12 · 3D 층 0) 164×52 가로형: 왼쪽 52 꽃 창(들임 4 · 반경 10) · 오른쪽 이름 15px 2줄 · 뒷면·로고 0 */
  .s4x.is-live .s4x-c[data-d3="0"] { --nm: 15px; }
  .s4x.is-live .s4x-c[data-d3="0"] .s4x-front { flex-direction: row; align-items: center; gap: 0; padding: 4px 10px 4px 4px; }
  .s4x.is-live .s4x-c[data-d3="0"] .s4x-win { width: 44px; height: 44px; }
  .s4x.is-live .s4x-c[data-d3="0"] .s4x-name { flex: 1; min-width: 0; margin: 0 0 0 10px; }
  .s4x.is-live .s4x-c[data-d3="0"] .s4x-marks, .s4x.is-live .s4x-c[data-d3="0"] .s4x-back { display: none; }
}
/* LANE:s4x-cards end */

/* LANE:s4x-open start */
/* 갈래 open — 패널 글(.s4x-panel · 서버 HTML · JS 꺼짐 = 펼친 글) · 열림 판(.s4x-layer · body 직속) · html.s4x-lock.
   여기 값은 모두 '다 열린 끝 상태'예요. 움직임은 js/s4x-open-ui.js WAAPI(시작 모양 → 이 값) 라 끝나면 cancel 만 해도 그대로.
   반경: 띠·안전 띠 16 · 단추·링크·닫기 12 · 칩 999 · 강조 #ff5e1f = 등뼈·점·칩·포커스·안전 띠 테만. 그림자·그라디언트 0 */

/* 1) 패널 글(먹 무대 위 크림 글 · 덱 안 JS 꺼짐 판과 열림 판 공통) */
.s4x-panel { color: #fcf9f5; font-size: 16px; line-height: 1.5; text-align: left; }
.s4x-panel .s4x-ph { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 720; letter-spacing: -.02em; word-break: keep-all; outline: none; }
.s4x-panel .s4x-addr { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; line-height: 1.5; color: #a39d95; }
.s4x-panel .s4x-addr code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; color: #fcf9f5; }
.s4x-panel .s4x-safe { list-style: none; margin: 20px 0 0; padding: 16px 20px; display: grid; gap: 8px; background: #221f1d; border: 1.5px solid #ff5e1f; border-radius: 16px; }
.s4x-panel .s4x-safe li { font-size: 16px; line-height: 1.5; word-break: keep-all; }
.s4x-panel .s4x-safe li[data-kind="minor"] { font-weight: 720; }
.s4x-panel .s4x-tel { display: flex; width: fit-content; align-items: center; min-height: 48px; margin-top: 10px; padding: 0 18px; border-radius: 12px; background: #fcf9f5; color: #151414; font-weight: 720; text-decoration: none; }
.s4x-panel .s4x-rows { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.s4x-panel .s4x-row { position: relative; padding: 12px 20px 14px; background: #221f1d; border: 1px solid #2f2a27; border-radius: 16px; }
.s4x-panel .s4x-rl { display: block; min-height: 20px; font-size: 14px; line-height: 1.45; font-weight: 600; color: #a39d95; }
.s4x-panel .s4x-rt { display: block; margin-top: 4px; font-size: 17px; line-height: 1.5; color: #fcf9f5; word-break: keep-all; text-wrap: pretty; }
.s4x-panel .s4x-routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.s4x-panel .s4x-route { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #4d4741; border-radius: 999px; font-size: 14px; color: #fcf9f5; white-space: nowrap; }
.s4x-panel .s4x-tech { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s4x-panel .s4x-tech li { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid #ff5e1f; border-radius: 999px; background: #ff5e1f; color: #151414; font-size: 14px; font-weight: 600; white-space: nowrap; }
.s4x-panel .s4x-extra, .s4x-panel .s4x-lim1, .s4x-panel .s4x-limit, .s4x-panel .s4x-official { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #a39d95; word-break: keep-all; }
.s4x-panel .s4x-extra { margin-top: 18px; color: #fcf9f5; }
.s4x-panel .s4x-more { display: inline-flex; align-items: center; min-height: 48px; margin-top: 20px; padding: 0 20px; border-radius: 12px; background: #fcf9f5; color: #151414; font-size: 16px; font-weight: 720; text-decoration: none; }
.s4x-panel a:focus-visible { outline: 2px solid #ff5e1f; outline-offset: 4px; }
/* 띠 글 속 기술 이름 = 글 그대로(다섯 단계 칩용 안쪽 여백이 JS 꺼짐 패널 글에 '찾기 로' 틈을 만들던 것 0 · 밑줄은 열림 판 js) */
.s4x-panel .s4x-tk { padding: 0; margin: 0; border-radius: 0; }
/* 덱 안: open init 이 section[data-open-ready] 를 단 뒤에만 숨김(JS 꺼짐·모듈 실패 = 펼친 글 그대로) */
.s4x[data-open-ready] .s4x-deck .s4x-panel { display: none; }
@media (max-width: 767px) {   /* 폰 글 14px 바닥(galaxy #3: 예시 주소 13 · 주소 12 · 띠 이름 13 → 14) */
  .s4x-panel .s4x-ph { font-size: 22px; line-height: 1.3; }
  .s4x-panel .s4x-row { padding: 12px 16px 14px; }
  .s4x-panel .s4x-rt { font-size: 16px; }
  .s4x-panel .s4x-safe { padding: 14px 16px; }
}

/* 2) 열림 판 — 화면 전체(z 90 · 머리줄 50 · 시트 70 · 건너뛰기 80 위) · 스크롤은 판 안에서만 */
html.s4x-lock { overflow: hidden; }
.s4x-layer { position: fixed; inset: 0; z-index: 90; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: #fcf9f5; -webkit-tap-highlight-color: transparent; }
.s4x-layer[hidden] { display: none; }
.s4x-layer .s4x-scrim { position: fixed; inset: 0; background: #151414; opacity: .78; }
.s4x-layer[data-mode="m"] .s4x-scrim { opacity: .94; }
.s4x-layer .s4x-x { position: fixed; top: 104px; right: 24px; z-index: 5; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid #4d4741; border-radius: 12px; background: #221f1d; color: #fcf9f5; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.s4x-layer .s4x-x:focus-visible { outline: 2px solid #ff5e1f; outline-offset: 4px; }
.s4x-layer.is-pre .s4x-col, .s4x-layer.is-pre .s4x-ghosts { display: none; }   /* 첫 프레임 = 가림막·대리 카드만(기둥 배치는 둘째 프레임 · 띠 시작 모양과 함께) */
/* 대리 카드 껍질: 바깥(자리·크기 · 원근 1200) > 호(translateZ) > 돌기(rotateZ·rotateY) > .s4x-c.s4x-proxy(두 면 · cards 블록) */
.s4x-layer .s4x-fly { position: fixed; z-index: 3; perspective: 1200px; }
.s4x-layer .s4x-arc, .s4x-layer .s4x-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.s4x-layer .s4x-c.s4x-proxy { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
.s4x-layer .s4x-cover { position: absolute; z-index: 3; transform: rotateZ(-4deg); }
/* 기둥(데스크톱: 표지 오른쪽 40 · 글 폭 676 — 왼쪽·폭은 js 가 화면 폭으로). 먹 판(.s4x-sheet)이 뒤 글(가림막 .78 너머 덱·다섯 단계)을 가려 띠 밖 글도 읽힘.
   위 = 머리줄(64) 아래 88 · 판 높이 = 화면 − 112 안(넘치면 판 안에서 스크롤 · desk-1 #3: 1440×900 에서 판 아래 끝 942 · '자세히 보기' 잘림) · 닫기 = 판 오른쪽 위 안쪽 16 */
.s4x-layer .s4x-col { position: absolute; z-index: 2; top: 88px; }
.s4x-layer .s4x-sheet { box-sizing: border-box; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4d4741 transparent; padding: 24px 24px 28px; background: #151414; border-radius: 24px; }
.s4x-layer[data-mode="d"] .s4x-row { padding: 10px 18px 12px; }
.s4x-layer[data-mode="d"] .s4x-rt { font-size: 16px; }
.s4x-layer[data-mode="d"] .s4x-rows, .s4x-layer[data-mode="d"] .s4x-safe { margin-top: 16px; }
.s4x-layer[data-mode="d"] .s4x-tech { margin-top: 16px; }
.s4x-layer[data-mode="d"] .s4x-more { margin-top: 16px; }
.s4x-layer[data-mode="d"] .s4x-ph { padding-right: 64px; }
.s4x-layer .s4x-panel { position: relative; }
.s4x-layer .s4x-rows { position: relative; padding-left: 28px; perspective: 900px; }
.s4x-layer.is-still .s4x-rows, .s4x-layer.is-still[data-mode="m"] .s4x-rows { padding-left: 0; }   /* 모션 줄이기 = 등뼈 0 → 띠 들임도 0(폰 규칙보다 셈 · galaxy #5) */
.s4x-layer .s4x-row { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* 주황 등뼈·점(띠 왼쪽 · 자리는 js 가 배치 뒤에 잼) */
.s4x-layer .s4x-panel > .s4x-rail { position: absolute; left: 0; top: 0; width: 28px; height: 0; pointer-events: none; }
.s4x-layer .s4x-spine { position: absolute; left: 9px; width: 2px; background: #ff5e1f; transform-origin: 50% 0; }
.s4x-layer .s4x-rail i { position: absolute; left: 6px; width: 8px; height: 8px; border-radius: 999px; background: #ff5e1f; }
/* 띠 안 박자: 장부 칩(사건 기록) · 30칸 날짜 띠 · 글 속 기술 이름 밑줄 — 칩 글 14px(galaxy #3) */
.s4x-layer .s4x-row[data-k="record"] .s4x-rl { min-height: 26px; }
.s4x-layer .s4x-ledger { position: absolute; top: 9px; right: 14px; display: flex; gap: 4px; pointer-events: none; }
.s4x-layer .s4x-ledger > span { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #2f2a27; color: #fcf9f5; font-size: 14px; font-weight: 600; white-space: nowrap; }
.s4x-layer .s4x-ledger i { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; background: #ff5e1f; transform-origin: 0 50%; }
/* 30일 = 글 아래 가로 30칸(desk-1 #11: 눈금 원은 불러오는 중 스피너로 읽힘) · 켜진 칸 겹(.l)은 가리개가 왼쪽에서 오른쪽으로 한 칸씩(js steps(30)) */
.s4x-layer .s4x-cal { position: relative; display: flex; gap: 2px; width: max-content; margin-top: 10px; pointer-events: none; }
.s4x-layer .s4x-cal i { display: block; width: 6px; height: 10px; border-radius: 999px; background: #4d4741; }
.s4x-layer .s4x-cal .l { position: absolute; inset: 0; overflow: hidden; }
.s4x-layer .s4x-cal .l > span { display: flex; gap: 2px; }
.s4x-layer .s4x-cal .l i { background: #ff5e1f; }
.s4x-layer .s4x-tk { position: relative; white-space: nowrap; }
.s4x-layer .s4x-ul { position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #ff5e1f; transform-origin: 0 50%; }
/* 복사본 유령(표지 뒤 z 1 · 같은 꽃 타일 · 점선 테) + 귀퉁이 칩 */
.s4x-layer .s4x-ghosts { position: fixed; z-index: 1; pointer-events: none; }
.s4x-layer .s4x-ghost { position: absolute; inset: 0; }
.s4x-layer .s4x-gface { position: absolute; inset: 0; box-sizing: border-box; border-radius: 16px; border: 1.5px dashed rgba(252, 249, 245, .7); background-color: var(--bg, #f1dbc1); background-image: var(--tile, none); background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .55; }
.s4x-layer .s4x-gchip { position: absolute; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fcf9f5; color: #151414; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; }
.s4x-layer .s4x-gchip[data-at="tl"] { left: -8px; top: -12px; }
.s4x-layer .s4x-gchip[data-at="tc"] { left: 50%; top: -12px; translate: -50% 0; }
.s4x-layer .s4x-gchip[data-at="tr"] { right: -8px; top: -12px; }
.s4x-layer .s4x-gchip[data-at="bl"] { left: 12px; bottom: -12px; }

/* 3) 폰(768 미만): 전체 화면 판 · 가림막 .94 · 닫기 (8,8) · 표지 132×187 (16,64) −4°(fix-1: 120×170 이면 표지 이름 13px) · 이름·주소는 표지 오른쪽(164~344) · 띠는 y 267 부터 폭 328 */
.s4x-layer .s4x-bar { display: none; }
.s4x-layer[data-mode="m"] .s4x-x { top: 8px; right: 8px; }
/* 판을 내리면 위 64 를 먹 띠로 덮고 닫기를 그 위에(galaxy #8: 닫기 단추가 띠 오른쪽 위 장부·날짜 띠를 가림) */
.s4x-layer[data-mode="m"] .s4x-bar { display: block; position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 4; background: #151414; opacity: 0; transition: opacity 120ms var(--ease-ui); pointer-events: none; }
.s4x-layer[data-mode="m"].is-scrolled .s4x-bar { opacity: 1; }
.s4x-layer[data-mode="m"] .s4x-col { position: relative; top: 0; width: 100%; min-height: 100%; padding-bottom: 32px; }
/* 폰 판 = 화면 전체 먹(가림막 .94 너머 덱 제목이 이름·주소 옆에 비치던 것 → 글 칸 뒤 비침 0) */
.s4x-layer[data-mode="m"] .s4x-sheet { min-height: 100svh; max-height: none; overflow: visible; padding: 0; border-radius: 0; }
.s4x-layer[data-mode="m"] .s4x-ghosts { position: absolute; }
.s4x-layer[data-mode="m"] .s4x-panel { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 64px 16px 0; }
.s4x-layer[data-mode="m"] .s4x-panel::before { content: ""; grid-column: 1; grid-row: 1 / span 3; height: 187px; }
.s4x-layer[data-mode="m"] .s4x-panel > * { grid-column: 1 / -1; min-width: 0; }
.s4x-layer[data-mode="m"] .s4x-panel > .s4x-ph { grid-column: 2; grid-row: 1; align-self: start; font-size: 22px; line-height: 1.3; }
.s4x-layer[data-mode="m"] .s4x-panel > .s4x-addr { grid-column: 2; grid-row: 2; align-self: start; }
.s4x-layer[data-mode="m"] .s4x-panel > .s4x-rail { grid-area: auto; }
.s4x-layer[data-mode="m"] .s4x-panel > .s4x-safe, .s4x-layer[data-mode="m"] .s4x-panel > .s4x-rows { margin-top: 16px; }
.s4x-layer[data-mode="m"] .s4x-rows { padding-left: 20px; }
.s4x-layer[data-mode="m"] .s4x-row { transform-origin: 50% 0; }
.s4x-layer[data-mode="m"] .s4x-spine { left: 5px; }
.s4x-layer[data-mode="m"] .s4x-rail i { left: 2px; }
/* 폰 유령 칩 = 표지 위 한 줄(유령 귀퉁이에 붙이면 360 에서 이름 칸·왼쪽 끝과 겹침 · galaxy #7) · y 10~38 · 닫기(x 304~) 왼쪽 */
.s4x-layer[data-mode="m"] .s4x-gchip[data-at="m0"] { left: 0; top: -54px; }
.s4x-layer[data-mode="m"] .s4x-gchip[data-at="m1"] { left: 74px; top: -54px; }
.s4x-layer[data-mode="m"] .s4x-gchip[data-at="m2"] { left: 162px; top: -54px; }
/* 폰 장부 = 글 아래 줄(14px 칩 4개가 띠 이름 줄 오른쪽에 안 들어감) */
.s4x-layer[data-mode="m"] .s4x-ledger { position: static; margin-top: 10px; flex-wrap: wrap; }
.s4x-layer[data-mode="m"] .s4x-row[data-k="record"] .s4x-rl { min-height: 20px; }
/* LANE:s4x-open end */