/* RookissLibrary crates/server/assets/static/css/challenge.css 를 옮겼다(2026-10-26, 랜딩 시안 5 용): {{asset:}} → 상대 경로, data: 그림 → ../img/ui/ 파일 */
/* 챌린지 홍보 랜딩(/landing, view/landing.rs challenge) — 시안 4 design/home/challenge4.css 를 옮겼다(2026-10-20 사용자 "이 시안을 그대로 적용해주세요".
   그 전의 시안 3 · 시안 1 판(접두사 cp- · c3-)은 git 기록에 있다). 움직임은 js/challenge.js(시안 challenge4.js), 마크업은 landing.rs 의 c4_* 함수.
   시안은 home.css · bar.css · foot.css 위에 얹는다 — 사이트에서는 실제 상단바(layout.rs .t-bar, app.css)와 꼬리말이 그 자리를 맡으므로,
   시안의 .w(바탕) · .c4-head(머리) 규칙만 사이트 짜임(body > header.t-bar · main#main > div.c4 · footer.f-foot)에 맞게 아래 첫 묶음으로 바꿨고, 나머지는 시안 그대로다.
   시안의 @container · cq 단위는 모두 요소 컨테이너(키 아트 무대 · 확대 상자 · 신화 카드 목록 · 광고 벽)라 그대로 둔다 — 시안의 페이지 컨테이너(.w)에 기대는 규칙은 없다
   (시안 · 사이트 모두 스크롤 막대를 숨겨 100vw = 페이지 폭). */
/* 바탕 · 본문 틀(시안 .w:has(.c4)): 바탕 #0F0F0F, #main 의 내용 폭 · 양옆 여백은 풀어 섹션이 화면 끝까지 */
body:has(.c4){background:#0F0F0F}
body:has(.c4) #main{max-width:none;padding:0}
/* 시안 바탕(home.css)의 초기화(* · a)를 이 부품 안에만(우선순위 0). 섹션 눈금(.c4-rail)은 js 가 body 끝에 붙인다 */
:where(.c4,.c4-rail),:where(.c4,.c4-rail) *{box-sizing:border-box;margin:0;padding:0}
:where(.c4) a{color:inherit}
.c4 {
  --ac: #FF4155; --ac2: #FF6B7B; --k: #0F0F0F; --k1: #141416; --k2: #1A1A1D; --ln: #26262A; --ln2: #34343B;
  --t1: #FFFFFF; --t2: #E4E4E7; --t3: #A1A1AA; --fine: #8A8A93; --t4: #71717A; --t5: #52525B; --head: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  display: block; overflow-x: clip; word-break: keep-all; background: var(--k); color: var(--t3); font: 16px/1.6 Pretendard, system-ui, sans-serif;
}
.c4 :is(img, video) { display: block; max-width: none; }
.c4 button { font: inherit; color: inherit; }
.c4-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* 머리(시안 .c4-head): 사이트 상단바를 쓰되 로고 · 메뉴(강의 · 라이브) · 로그인(회원이면 아바타)만 — 검색 · ≡ 는 숨긴다. 첫 화면처럼 넓은 머리(최대 2000, 양옆 clamp(24px, 50vw − 620px, 32px)),
   모바일도 메뉴 · 로그인을 접지 않는다(메뉴는 2026-10-20 사용자 "랜딩페이지 상단바에 강의랑 라이브 메뉴도 넣어주세요. 안 넣으니까 강의로 갈 수 있는 입구가 없는 것 같아요" —
   그 전에는 메뉴도 숨겼다). 상단바 높이는 사이트 · 시안 모두 64px(759 이하 56px) = --head */
body:has(.c4) .t-bar :is(.t-search,.t-menu){display:none}
@media (min-width: 760px) {
  body:has(.c4) .t-bar .t-row { max-width: 2000px; padding-inline: clamp(24px, 50vw - 620px, 32px); }
  /* 내 메뉴도 넓힌 머리의 아바타 아래에(learn.css · live-room.css 와 같은 규칙) */
  body:has(.c4) .t-me[popover] { right: calc(max(0px, (100% - 2000px) / 2) + clamp(24px, 50vw - 620px, 32px)); }
}
@media (max-width: 759px) {
  body:has(.c4) .t-bar .t-row { gap: 6px; }
  /* 메뉴는 룩 바로 옆에(사이트 모바일은 ≡ 시트 안에 둔다). 좁은 폭이라 칸 여백만 줄인다 */
  body:has(.c4) .t-bar .t-nav { display: flex; margin-left: 2px; }
  body:has(.c4) .t-bar .t-nav a { padding: 0 10px; }
  body:has(.c4) .t-bar .t-acc { display: flex; }
  body:has(.c4) .t-bar .t-sp { display: block; }
  body:has(.c4) .t-bar .t-link { padding: 0 10px; }
  body:has(.c4) .t-bar .t-acc .t-link:last-child { margin-right: 0; }
  /* 다른 페이지는 이 폭에서 아바타를 숨기지만 여기는 보이므로, 내 메뉴를 아바타 오른쪽 끝(.t-row 오른쪽 여백 8) · 상단바(56) 4px 아래에 */
  body:has(.c4) .t-me[popover] { top: 60px; right: 8px; }
  .c4 { --head: 56px; }
}

/* 단추: 왕관 레드 바탕 · 흰 글(사이트 신청 단추와 같다) */
.c4-btn { position: relative; overflow: hidden; display: inline-grid; place-items: center; height: 56px; min-width: 220px; padding: 0 40px; border-radius: 6px; background: var(--ac); color: #FFFFFF; font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 28px -10px rgba(255, 65, 85, .6); transition: background-color .15s; }
.c4-btn:hover { background: #FF5C6E; }
.c4-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.c4-btn--l { height: 62px; min-width: 320px; font-size: 17px; }

/* 섹션 공통: 한 화면(상단바 뺀 높이) 이상, 내용은 위아래 가운데. 머리 = 레드 눈썹 글 · 큰 제목 · 한 줄 */
.c4-hero, .c4-sec { scroll-margin-top: var(--head); }
.c4-sec { position: relative; display: grid; align-content: center; min-height: calc(100vh - var(--head)); padding-block: clamp(48px, 7vh, 112px); }
.c4-hd { text-align: center; }
.c4-hd h2, .c4-hz h2 { margin: 0; color: var(--t1); font-size: clamp(32px, 3.5vw, 52px); font-weight: 800; line-height: 1.22; letter-spacing: -.035em; text-wrap: balance; }
.c4 h2 em, .c4 h3 em { font-style: normal; color: var(--ac); }
.c4-lead { max-width: 36em; margin: 18px auto 0; color: var(--t3); font-size: 17px; line-height: 1.7; text-wrap: balance; }

/* ── 1 히어로: 제목 · 신청은 지금 사이트 히어로(.cp-hero) 그대로 위쪽, 아래 68% 는 시안 1 키 아트(창을 뺀 판) + 그 위 게임 영상 픽셀 창 ── */
.c4-hero { position: relative; overflow: clip; border-bottom: 2px solid var(--ac); color: #F4F4F5; text-align: center; }
.c4-hero::after { content: ''; position: absolute; z-index: 6; left: 50%; bottom: -2px; width: min(1400px, 140%); height: 260px; translate: -50% 50%; background: radial-gradient(closest-side, rgba(255, 65, 85, .32), rgba(255, 65, 85, 0)); pointer-events: none; }
.c4-art { position: absolute; inset: auto 0 0; height: 68%; overflow: clip; container-type: size; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
/* 무대 = 키 아트 영상이 object-fit: cover 로 놓일 자리 그대로(8:3, 아래 가운데 맞춤). 창은 이 무대의 논리 좌표(480×180, 1 = --u)로 놓여 화면이 바뀌어도 키 아트와 같이 움직인다 */
.c4-art-s { position: absolute; left: 50%; bottom: 0; width: max(100cqw, 100cqh * 8 / 3); aspect-ratio: 8 / 3; translate: -50% 0; container-type: size; }
.c4-art-v { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* 게임 영상 칸(2026-10-19 사용자 "테두리랑 제목은 안 해도 된다 — 이전 시안처럼 둥둥 떠 있는 영상으로만, 너무 내려왔다"):
   1차 판의 떠 있는 칸 — 가운데 자리(--x, --y, 히어로 기준) · 폭(1440 화면에서 --w px, 화면 폭에 비례) · 기울기 · 바깥쪽일수록 가운데를 향한 3D 기울기(--ry).
   깊이(--dz)만큼 마우스를 따라 밀린다(challenge4.js 가 --px · --py). 키 아트의 하늘 쪽(양옆 · 달 옆)에 떠 있고 바닥 격자로는 내려가지 않는다 */
.c4-float { position: absolute; z-index: 2; inset: 0; perspective: 1400px; perspective-origin: 50% 40%; pointer-events: none; }
.c4-fc { --dz: 22; position: absolute; left: var(--x); top: var(--y); width: max(calc(var(--w) / 1440 * 100vw * var(--fs, 1)), calc(var(--w) * .62px)); aspect-ratio: 16 / 9; margin: 0; border-radius: 12px; overflow: hidden; background: #151517;
  translate: calc(-50% + var(--px, 0) * var(--dz) * 1px) calc(-50% + var(--py, 0) * var(--dz) * 1px); rotate: 0 1 0 var(--ry, 0deg); transform: rotate(var(--r));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -18px rgba(0, 0, 0, .9); }
.c4-fc.is-tall { aspect-ratio: 9 / 16; border-radius: 14px; }
.c4-fc video { width: 100%; height: 100%; object-fit: cover; }
.c4-dn { z-index: 3; filter: brightness(.9) saturate(1.05); }
.c4-dm { --dz: 12; z-index: 2; filter: brightness(.62) saturate(.9); } /* 2026-10-19 사용자 "화질 up": 중간 칸의 흐림(.6px)은 뺐다 — 깊이는 어둡기로만, 흐림은 멀리 칸만 */
.c4-df { --dz: 5; z-index: 1; filter: brightness(.42) saturate(.75) blur(2.2px); opacity: .7; }
.c4-hero-in { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; min-height: max(640px, calc(100vh - var(--head))); padding: 88px 24px 96px; }
.c4-title { max-width: 15em; margin: 0; color: #FFFFFF; font-size: clamp(40px, 5.2vw, 72px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }

/* ── 2 100% AI: 무대(한 화면)에 분야 무대(한가운데 분야 · 둘레 도구) · 게이지 · 숫자 · 마지막 제목을 겹쳐 둔다. 낱말 · 숫자 · 고리 · 깔때기 빛 자리는 js/challenge.js 가 매 장면 그린다 ── */
.c4-ai { padding: 0; }
.c4-ai-st { position: relative; height: max(640px, calc(100vh - var(--head))); overflow: clip;
  background: radial-gradient(70% 55% at 50% var(--cy, 42%), rgba(255, 65, 85, .07), rgba(255, 65, 85, 0) 70%); }
.c4-words { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.c4-w { position: absolute; z-index: 3; left: 0; top: 0; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #D4D4D8; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; will-change: transform, opacity; transition: color .12s, background-color .12s, box-shadow .12s; }
/* 빨려 드는 도구는 빨간 테로 달아오른다 */
/* 아이콘 칩(2026-10-21 사용자 "글씨 10 : 아이콘 90"): 글씨 칩과 같은 테 · 같은 빨려 듦, 둥근 칸에 선 아이콘 */
.c4-w.is-ic { padding: 13px; border-radius: 50%; }
.c4-w.is-ic svg { display: block; width: 30px; height: 30px; }
.c4-w.is-suck { color: #FFFFFF; background: rgba(255, 65, 85, .2); box-shadow: inset 0 0 0 1px rgba(255, 65, 85, .75), 0 0 20px rgba(255, 65, 85, .4); }
/* 대표 색 칩(2026-10-21 사용자 "아이콘 원형에 색깔이 좀 있었으면, 각각의 대표 색 — 기본 색상도 좀 남겨 줘", 흑백 + 빨강 규칙의 예외): 분야마다 절반만(landing.rs K_*).
   테 · 선(글씨) · 옅은 바탕에 그 색(--k = r, g, b), 빨려 들 때는 빨강 대신 제 색으로 달아오른다 */
.c4-w.is-k { color: rgb(var(--k)); background: rgba(var(--k), .1); box-shadow: inset 0 0 0 1px rgba(var(--k), .42), 0 0 18px rgba(var(--k), .1); }
.c4-w.is-k.is-suck { color: #FFFFFF; background: rgba(var(--k), .3); box-shadow: inset 0 0 0 1px rgba(var(--k), .9), 0 0 20px rgba(var(--k), .5); }
/* 실제 프로그램 로고 칩(2026-10-21 사용자 "실제 프로그램 아이콘을 넣으면 안 되나?" → "바꿔봐"): 로고는 받은 그대로(색 · 모양 · 필터를 바꾸지 않는다). 바탕은 늘 어두운 무채색,
   테만 로고 대표 색을 옅게(--k — 흰 로고는 기본 테), 빨려 들 때 빛나는 것도 테 · 그림자에만. 가로로 긴 로고(.c4-lw — Blender · FMOD)는 알약 */
.c4-w.is-logo, .c4-w.is-logo.is-k, .c4-w.is-logo.is-suck { background: #17171A; }
.c4-w.is-logo svg { width: auto; height: 30px; }
.c4-w.is-logo:has(> .c4-lw) { padding: 15px 20px; }
.c4-w.is-logo .c4-lw { height: 26px; }
/* 상표 안내(로고를 넣으며 — 메인 조건 "섹션 안 늘 보이는 곳, 12px 이상 · 대비 4.5:1 이상"): 판 맨 아래 가운데, 끝 장면 · 움직임 줄이기에도 보인다. #8A8A93 / #0F0F0F 대비 약 5.6:1 */
.c4-ai-tm { position: absolute; z-index: 6; left: 0; right: 0; bottom: 4px; margin: 0; padding: 0 12px; color: var(--fine); font-size: 12px; line-height: 16px; letter-spacing: -.01em; text-align: center; text-wrap: balance; pointer-events: none; }
/* 한가운데 분야: 빨간 선 아이콘 위, 큰 이름 아래 */
.c4-w.is-cat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; background: none; box-shadow: none; color: var(--t1); font-size: clamp(56px, 5.4vw, 84px); font-weight: 900; letter-spacing: -.05em; text-shadow: 0 0 50px rgba(255, 65, 85, .3), 0 2px 24px rgba(15, 15, 15, .9); transition: none; }
.c4-w.is-cat svg { width: .56em; height: .56em; color: var(--ac); filter: drop-shadow(0 0 12px rgba(255, 65, 85, .55)); }
.c4-w.is-cat b { font-weight: 900; }
/* 둘레 고리(분야 무대의 옅은 타원 빛 — 빨려 들 때 오므라듦) · 깔때기 빛(무대 가운데 → 제 칸, 빨려 드는 동안만) */
.c4-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c4-orb { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 65, 85, .11), rgba(255, 65, 85, .03) 60%, rgba(255, 65, 85, 0)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); will-change: transform, opacity; }
.c4-orb::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); }
.c4-beam, .c4-beam i { position: absolute; inset: 0; }
.c4-beam { opacity: 0; filter: blur(10px); will-change: opacity; } /* 깔때기 모양(clip-path)은 속 i 에 — 흐림은 자른 뒤에 걸어야 가장자리가 부드럽다 */
.c4-meter { position: absolute; z-index: 2; left: 50%; top: 80%; width: min(1120px, 82vw); translate: -50% -50%; transform-origin: 100% 50%; }
.c4-meter-l { position: absolute; left: 0; bottom: calc(100% + 22px); margin: 0; color: var(--t4); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
/* 2026-10-19 사용자 "게이지 바를 좀 더 크게": 10 → 22px, 안쪽 위 빛줄 */
.c4-bar { position: relative; height: 22px; border-radius: 11px; background: #18181C; box-shadow: inset 0 0 0 1px #2C2C33, 0 0 0 6px rgba(255, 255, 255, .025); }
.c4-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, #A3132A 0%, #FF4155 55%, #FF8C99 90%, #FFFFFF 100%); box-shadow: 0 0 26px rgba(255, 65, 85, .6), 0 0 2px rgba(255, 255, 255, .5); }
.c4-fill::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.c4-head-dot { position: absolute; top: 50%; left: calc(var(--f, 0) * 100%); width: 60px; height: 60px; translate: -50% -50%; scale: var(--pulse, 1); border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 15%, rgba(255, 130, 145, .9) 29%, rgba(255, 65, 85, 0) 70%); opacity: min(1, calc(var(--f, 0) * 30)); }
/* 분야 눈금: 그 분야 낱말이 다 들어오는 자리(--at)에 세로 금, 아래에 이름 — 다 차면 흰색 */
.c4-tick { position: absolute; top: -10px; bottom: -10px; left: calc(var(--at, 0) * 100%); width: 1px; background: #34343B; transition: background-color .3s; }
/* 분야 칸(2026-10-21 사용자 "게이지바 아래에 체크표시가 아니라 아이콘이 옆에 있고 게이지바에 흡수되면 빛날 수 있도록"): 눈금 사이 칸(--a0 ~ --at) 가운데에
   테 두른 분야 아이콘 + 이름. 지금 뜬 분야(.is-cur)는 흰 테, 그 분야가 다 빨려 들면(.is-lit) 아이콘이 빨갛게 번쩍 켜진 채로 남는다 */
.c4-seg { position: absolute; top: calc(100% + 18px); left: calc(var(--a0, 0) * 100%); width: calc((var(--at, 0) - var(--a0, 0)) * 100%); display: flex; justify-content: center; align-items: center; gap: 10px; color: #4A4A52; pointer-events: none; transition: color .2s; }
.c4-seg i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #141417; box-shadow: inset 0 0 0 1.5px #2C2C33; transition: color .2s, background-color .2s, box-shadow .2s; }
.c4-seg svg { width: 20px; height: 20px; }
.c4-seg em { font-size: clamp(16px, 1.4vw, 21px); font-style: normal; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.c4-seg.is-cur { color: var(--t2); }
.c4-seg.is-cur i { color: var(--t1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 18px rgba(255, 255, 255, .12); }
.c4-seg.is-lit { color: var(--t1); }
.c4-seg.is-lit i { color: #FFFFFF; background: var(--ac); box-shadow: 0 0 0 4px rgba(255, 65, 85, .18), 0 0 22px rgba(255, 65, 85, .75), 0 0 48px rgba(255, 65, 85, .35); }
.c4-tick.is-done { background: rgba(255, 255, 255, .9); }
.c4-num { position: absolute; z-index: 4; left: 0; top: 0; margin: 0; color: var(--t1); font-size: 58px; font-weight: 900; line-height: normal; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 50%; will-change: transform; }
.c4-ai-say { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 24px; text-align: center; pointer-events: none; }
.c4-ai-h { display: flex; justify-content: center; align-items: baseline; gap: .16em; margin: 0; color: var(--t1); font-size: clamp(104px, 15.5vw, 240px); font-weight: 900; line-height: .92; letter-spacing: -.055em; white-space: nowrap; }
.c4-ai-w { color: var(--ac); text-shadow: 0 0 80px rgba(255, 65, 85, .45); }
.c4-ai-l { margin: clamp(24px, 3.4vh, 40px) 0 0; color: #D4D4D8; font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; line-height: 1.65; letter-spacing: -.025em; }
.c4-ai-l > span { display: block; text-wrap: balance; }
.c4-ai-l em { font-style: normal; font-weight: 800; color: var(--ac); }
.c4-ai-l b { color: var(--t1); font-weight: 800; }
/* "확인해 보기"(2026-10-19 사용자): 섹션 맨 아래 가운데 — 바로 다음 섹션(게임 탑)으로 넘어가는 느낌. 테두리 알약 + 아래로 까딱이는 꺾쇠
   (가운데 맞춤은 translate 대신 좌우 auto — 떠오르는 c4-up 이 translate 를 쓴다) */
.c4-ai-go { position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(22px, 4.2vh, 44px); display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; margin: 0 auto; color: var(--t2); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.c4-ai-go span { padding: 13px 28px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .15s, box-shadow .15s, color .15s; }
.c4-ai-go svg { width: 22px; height: 22px; color: var(--ac); }
.c4-ai-go:hover span { background: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); color: #FFFFFF; }
.c4-ai-go:focus-visible { outline: 0; }
.c4-ai-go:focus-visible span { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ── 3 우리 게임(2026-10-19 밤 사용자 "사각형들이 크기가 같고 정렬되어 있었으면, 문구도 위쪽에" — 그 전 스케치 배치(가운데 틀 둘레에 크기가 다른 카드)는 git 기록에):
   제목 · 리드가 위, 그 아래 같은 크기(16:9) 카드 일곱을 줄마다 가운데 맞춰 늘어놓는다(넓은 화면 4 + 3 · 999 이하 3 + 3 + 1 · 599 이하 2 + 2 + 2 + 1).
   넓은 화면의 카드 폭은 두 줄이 제목과 함께 한 화면에 들게 화면 높이로도 막는다(가로는 오른쪽 섹션 눈금을 비켜 100vw - 144px). 보이는 동안 각자 영상이 돌고,
   누르면 그 영상이 가운데로 날아가 커지는 확대(.c4-gv)는 아래. 세로 게임(.is-tall)은 카드 안에 contain + 흐린 포스터 바탕 ── */
.c4-sec.c4-gm { --gm-pad: clamp(32px, 6vh, 88px); padding-block: var(--gm-pad); }
.c4-gm .c4-in { max-width: none; }
.c4-gm .c4-hd { margin-bottom: clamp(28px, 4.4vh, 52px); }
.c4-gm-list { --cols: 4; --gap: clamp(12px, 1.25vw, 20px);
  --cw: min(600px, calc((100vw - 144px - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((100vh - var(--head) - 2 * var(--gm-pad) - 250px - var(--gap)) * 8 / 9));
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: calc(var(--cols) * var(--cw) + (var(--cols) - 1) * var(--gap) + 1px); margin: 0 auto; padding: 0; list-style: none; }
.c4-gc { flex: none; width: var(--cw); aspect-ratio: 16 / 9; }
/* 안내: 리드 아래 알약 — 카드의 확대 표시와 같은 그림 */
.c4-gm-hint { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 7px 15px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #D4D4D8; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.c4-gm-hint svg { width: 15px; height: 15px; color: var(--ac); }
/* 카드: 영상(cover) · 아래 어둠 · 왼쪽 아래 이름표 · 마우스를 올리면 떠오르며 오른쪽 위 확대 표시 */
.c4-gc-b { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.c4-gc-m { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 14px; background: #141416; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 50px -26px rgba(0, 0, 0, .95); transition: translate .45s var(--ease), box-shadow .45s var(--ease); }
.c4-gc-m > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 세로 게임: 영상은 통째로(contain), 빈 양옆은 같은 포스터를 크게 흐려 깐다(z -1 — 영상이 확대에서 돌아오면 맨 앞에 붙어도 바탕은 늘 뒤). 확대도 contain(--gv-fit 1)이라 날 때 모양이 이어진다 */
.c4-gc.is-tall .c4-gc-m > video { object-fit: contain; }
.c4-gc-bd { position: absolute; z-index: -1; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(16px) brightness(.5) saturate(1.15); }
.c4-gc-m::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(rgba(10, 10, 11, 0), rgba(10, 10, 11, .8)); pointer-events: none; }
.c4-gc-t { position: absolute; z-index: 1; left: 14px; right: 48px; bottom: 11px; color: #FFFFFF; font-size: clamp(13px, 1.1vw, 16px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-align: left; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.c4-gc-z { position: absolute; z-index: 1; right: 10px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 15, 15, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #FFFFFF; opacity: 0; scale: .8; transition: opacity .2s, scale .25s var(--ease); }
.c4-gc-z svg { width: 15px; height: 15px; }
/* 꼬리표: 오른쪽 위에 기간 · 상황 · 장르(좁으면 줄을 바꿔 오른쪽 맞춤). 영상 위라 어두운 반투명 바탕 */
.c4-gc-tag { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; pointer-events: none; }
.c4-gc-tag > * { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(12, 12, 13, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #E4E4E7; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.c4-gc-d { box-shadow: inset 0 0 0 1px rgba(255, 65, 85, .6); color: var(--ac2); font-weight: 800; }
.c4-gc-g { border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #D4D4D8; font-weight: 600; }
.c4-gc-b:is(:hover, :focus-visible) .c4-gc-m { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 32px 60px -26px rgba(0, 0, 0, .95), 0 0 46px -14px rgba(255, 65, 85, .5); }
.c4-gc-b:is(:hover, :focus-visible) .c4-gc-z { opacity: 1; scale: 1; }
.c4-gc-b:focus-visible { outline: 0; }
.c4-gc-b:focus-visible .c4-gc-m { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.c4-gc-b.is-out .c4-gc-m { translate: none; } /* 영상이 확대로 나가 있는 카드(흐린 뒤에 빈 칸으로 남는다) */
@media (hover: none) { .c4-gc-z { opacity: .9; scale: .85; } } /* 터치 기기는 누를 수 있다는 표시를 늘 */

/* 확대(<dialog> showModal — 맨 위 층이라 .w 의 레이아웃 가둠(container) 밖, 화면 기준 · 뒤는 inert): 위 "100% AI" · 가운데 영상 · 아래 차례 · 이름 · 기간 · 상황 · 장르 · Google Play.
   영상 상자(.c4-gv-scr)는 challenge4.js 가 카드 자리 ↔ 이 자리로 left · top · width · height 를 움직이고, 속 영상(.c4-gv-mv)은 상자의 컨테이너 단위로 크기를 잡아
   cover(세로 게임은 --gv-fit 1 = contain + 흐린 바탕)라 날아가는 동안에도 늘어나지 않는다. 뒤(::backdrop)는 흐리고 어둡게. 폭은 min(1080, 82vw) · 높이 안 */
@property --gv-fit { syntax: '<number>'; inherits: true; initial-value: 0; }
.c4-gv { --ar: 1.7778; --sw: min(1080px, 82vw, calc((100vh - 236px) * var(--ar))); position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: var(--t3); overflow: hidden; }
.c4-gv[open] { display: grid; place-items: center; }
.c4-gv::backdrop { background: rgba(9, 9, 10, .66); -webkit-backdrop-filter: blur(18px) saturate(.7); backdrop-filter: blur(18px) saturate(.7); }
.c4-gv:not(.is-in)::backdrop { opacity: 0; }
@media (orientation: portrait) { .c4-gv.is-tall { --ar: .5625; } } /* 세로 화면에서는 세로 게임을 세로 상자로 */
.c4-gv-in { display: grid; justify-items: center; width: var(--sw); }
/* 영상 바로 위 "100% AI"(2026-10-19 사용자) — 양옆 가는 선 사이 가운데 */
.c4-gv-ai { display: flex; align-items: center; gap: 20px; width: 100%; margin: 0 0 14px; color: var(--t1); font-size: clamp(22px, 1.9vw, 28px); font-weight: 900; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.c4-gv-ai::before, .c4-gv-ai::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(52, 52, 59, 0), #3A3A42); }
.c4-gv-ai::after { background: linear-gradient(90deg, #3A3A42, rgba(52, 52, 59, 0)); }
.c4-gv-ai em { color: var(--ac); font-style: normal; text-shadow: 0 0 22px rgba(255, 65, 85, .55); }
.c4-gv-w { position: relative; width: 100%; aspect-ratio: var(--ar); }
.c4-gv-scr { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; container-type: size; border-radius: 18px; background: #0B0B0C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 140px -40px rgba(255, 65, 85, .3); }
.c4-gv.is-tall .c4-gv-scr { --gv-fit: 1; }
.c4-gv-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(30px) brightness(.42) saturate(1.2); opacity: 0; transition: opacity .5s; }
.c4-gv.is-tall .c4-gv-bg { opacity: 1; }
.c4-gv-mv { --a: 1.7778; position: absolute; left: 50%; top: 50%; aspect-ratio: var(--a); width: calc(max(100cqw, 100cqh * var(--a)) * (1 - var(--gv-fit)) + min(100cqw, 100cqh * var(--a)) * var(--gv-fit)); translate: -50% -50%; }
.c4-gv.is-tall .c4-gv-mv { --a: .5625; filter: drop-shadow(0 0 40px rgba(0, 0, 0, .8)); }
.c4-gv-mv > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c4-gv-v { opacity: 0; transition: opacity .35s; } /* 원본 — 준비되면 날아온 카드 클립을 덮는다 */
.c4-gv-scr.is-hi .c4-gv-v { opacity: 1; }
.c4-gv-x { position: absolute; z-index: 3; top: clamp(14px, 2.4vh, 28px); right: clamp(14px, 2vw, 32px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 23, .86); box-shadow: inset 0 0 0 1px #3A3A42, 0 10px 30px -8px rgba(0, 0, 0, .9); color: var(--t2); cursor: pointer; }
.c4-gv-x svg { width: 20px; height: 20px; }
.c4-gv-x:hover { background: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); color: #FFFFFF; }
.c4-gv-x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* 열리는 동안(.is-in 전) 위아래 글 · 단추는 숨었다가 영상이 거의 닿을 때 떠오른다 */
.c4-gv:not(.is-in) :is(.c4-gv-ai, .c4-cap, .c4-nav, .c4-gv-x) { opacity: 0; }
.c4-gv:not(.is-in) .c4-gv-ai { translate: 0 10px; }
.c4-gv:not(.is-in) .c4-cap { translate: 0 -10px; }
.c4-nav { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 23, .86); box-shadow: inset 0 0 0 1px #3A3A42, 0 10px 30px -8px rgba(0, 0, 0, .9); color: var(--t2); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s, box-shadow .15s, color .15s, scale .15s; }
.c4-nav svg { width: 22px; height: 22px; }
.c4-prev { left: -26px; }
.c4-next { right: -26px; }
.c4-nav:hover { background: var(--ac); box-shadow: inset 0 0 0 1px var(--ac), 0 10px 30px -6px rgba(255, 65, 85, .6); color: #FFFFFF; }
.c4-nav:active { scale: .94; }
.c4-nav:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* 영상 아래: 차례 · 이름 · 개발 기간(빨간 테 글자) · 지금 상황(점, 출시 완료는 빨간 체크) · 장르(회색 알약) */
.c4-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; width: 100%; min-height: 46px; margin-top: 16px; text-align: left; }
.c4-cap [hidden] { display: none; }
.c4-cap-m { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } /* 기간 · 상황 · 꼬리표는 한 덩어리로 줄바꿈 */
.c4-cap-n { color: var(--t5); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c4-cap-n b { color: var(--ac); }
.c4-cap-t { margin-right: 4px; color: var(--t1); font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
.c4-cap-d { padding: 5px 10px 4px; border-radius: 6px; background: rgba(255, 65, 85, .12); box-shadow: inset 0 0 0 1px rgba(255, 65, 85, .5); color: var(--ac2); font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.c4-cap-s { display: inline-flex; align-items: center; gap: 8px; color: var(--t2); font-size: 14.5px; font-weight: 700; }
.c4-cap-s::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #71717A; }
.c4-cap-s.is-done { color: var(--t1); }
.c4-cap-s.is-done::before { width: 16px; height: 16px; background: var(--ac) url(../img/ui/ui-2.svg) center / 12px no-repeat; box-shadow: 0 0 12px rgba(255, 65, 85, .55); }
.c4-cap-tags { display: contents; } /* 꼬리표 알약들(js 가 넘길 때 다시 채움)도 .c4-cap-m 의 줄바꿈 칸으로 */
.c4-cap-g { padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #34343B; color: var(--t3); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
/* Google Play 단추(출시 완료 게임만, 2026-10-19 사용자) — 스토어 배지 모양, 흑백, 줄 오른쪽 끝 */
.c4-cap-gp { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; height: 46px; padding: 0 18px 0 14px; border-radius: 10px; background: #050506; box-shadow: inset 0 0 0 1px #5A5A63; color: #FFFFFF; line-height: 1; transition: background-color .15s, box-shadow .15s; }
.c4-cap-gp svg { width: 22px; height: 22px; flex: none; }
.c4-cap-gp span { display: grid; gap: 3px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.c4-cap-gp small { color: #A1A1AA; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.c4-cap-gp:hover { background: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
.c4-cap-gp:hover small { color: rgba(255, 255, 255, .8); }
.c4-cap-gp:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* 좁은 화면: 999 이하 한 줄에 셋, 599 이하 둘(마지막 하나는 가운데) — 높이는 막지 않는다(섹션이 화면보다 길어도 된다) */
@media (max-width: 999px) {
  .c4-gm-list { --cols: 3; --cw: calc((min(100vw - 144px, 820px) - 2 * var(--gap)) / 3); } /* 오른쪽 섹션 눈금을 비킨다 */
}
@media (max-width: 599px) {
  .c4-gm-list { --cols: 2; --gap: 10px; --cw: calc((100vw - 40px - var(--gap)) / 2); }
  .c4-gc-tag { top: 6px; left: 6px; right: 6px; gap: 3px; }
  .c4-gc-tag > * { height: 18px; padding: 0 5px; border-radius: 5px; font-size: 9.5px; }
  .c4-gm-hint { margin-top: 12px; font-size: 13px; }
  .c4-gc-m { border-radius: 12px; }
}
@media (max-width: 759px) {
  .c4-sec.c4-gm { padding-block: 48px; }
  .c4-gm .c4-lead { font-size: 15px; }
  .c4-gm .c4-hd { margin-bottom: 24px; }
  .c4-gc-t { left: 10px; right: 38px; bottom: 8px; font-size: 12.5px; }
  .c4-gc-z { right: 6px; bottom: 6px; width: 28px; height: 28px; }
  .c4-gc-z svg { width: 13px; height: 13px; }
  /* 확대: 화면 폭에 맞추고 좌우 단추는 영상 안쪽으로 */
  .c4-gv { --sw: min(calc(100vw - 32px), calc((100vh - 280px) * var(--ar))); --sw: min(calc(100vw - 32px), calc((100dvh - 280px) * var(--ar))); }
  .c4-gv-scr { border-radius: 14px; }
  .c4-gv-ai { margin-bottom: 12px; font-size: 24px; }
  .c4-gv-x { width: 44px; height: 44px; }
  .c4-nav { width: 42px; height: 42px; margin-top: -21px; }
  .c4-prev { left: 8px; }
  .c4-next { right: 8px; }
  /* 아래 글: 첫 줄 차례 · 이름 · (Google Play), 둘째 줄 기간 · 상황 · 장르 — 게임이 바뀌어도 높이가 같게(섹션이 위아래로 흔들리지 않게) */
  .c4-cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t gp" "m m m"; align-items: center; gap: 10px; min-height: 0; margin-top: 14px; }
  .c4-cap-n { grid-area: n; }
  .c4-cap-t { grid-area: t; display: flex; align-items: center; min-height: 42px; margin: 0; font-size: 22px; }
  .c4-cap-m { grid-area: m; gap: 8px; } /* 알약 다섯(기간 · 서버 둘 · PC · 모바일)이 390 에서 한 줄에 */
  .c4-cap-g { padding: 5px 10px; }
  .c4-cap-gp { grid-area: gp; height: 42px; margin-left: 0; padding: 0 14px 0 12px; gap: 8px; }
  .c4-cap-gp svg { width: 20px; height: 20px; }
  .c4-cap-gp span { font-size: 14.5px; }
}
@media (max-width: 374px) {
  .c4-cap-t { font-size: 19px; } /* 360 에서 「랜덤 스킬 디펜스」 + Google Play 가 한 줄에 들게 */
  .c4-cap-gp { padding: 0 11px 0 10px; }
}
/* 움직임: 확대가 열릴 때 뒤 흐림이 번지고 위아래 글 · 단추가 영상이 닿을 즈음 떠오름(닫을 때는 금방 사라짐) · 다른 게임으로 넘기면 아래 글이 떠오름(날기는 challenge4.js) */
@media (prefers-reduced-motion: no-preference) {
  .c4-gv::backdrop { transition: opacity .5s ease; }
  @starting-style { .c4-gv[open]::backdrop { opacity: 0; } } /* 맨 위 층에 처음 그려질 때도 흐림이 번지게 */
  .c4-gv :is(.c4-gv-ai, .c4-cap, .c4-gv-x) { transition: opacity .16s, translate .16s; }
  .c4-gv .c4-nav { transition: opacity .16s, background-color .15s, box-shadow .15s, color .15s, scale .15s; }
  .c4-gv.is-in :is(.c4-gv-ai, .c4-cap, .c4-gv-x) { transition: opacity .45s .32s, translate .6s .32s var(--ease); }
  .c4-gv.is-in .c4-nav { transition: opacity .45s .4s, background-color .15s, box-shadow .15s, color .15s, scale .15s; }
  .c4-cap.is-swap > * { animation: c4-cap .5s var(--ease) both; }
  .c4-cap.is-swap > :nth-child(2) { animation-delay: .05s; }
  .c4-cap.is-swap > :nth-child(3) { animation-delay: .1s; }
  .c4-cap.is-swap > :nth-child(4) { animation-delay: .15s; }
}

/* ── 4 대기업과 비교: 게이지 판(2026-10-19 밤 사용자 "그냥 게이지 바로 — 위에는 대기업 게이지 바 2개, 아래는 RookissAI 게이지 바 2개, 약 몇 분의 몇이 차이 나는지 적어 주면").
   판(.c4-gb) 하나에 두 묶음: 위 대기업(회색 점) · 아래 RookissAI(빨간 왕관). 줄마다 [항목 이름 | 막대 칸 | 값] — 묶음 · 줄이 판 격자를 subgrid 로 같이 써서 네 줄의 막대 시작 · 값 끝이 맞는다.
   대기업 = 칸 끝까지 찬 묵직한 회색 막대. RookissAI = 같은 길이의 빈 칸(점선 — 대기업 막대 자리) 맨 앞 빨간 조각(실제 비율은 1px 도 안 돼 8px) + 그 뒤 빈자리에 「대기업의 1/10,000 · 약 1/1,095」 알약.
   값은 「억 · 만」 · 「원」 · 「이상」까지 숫자와 같은 크기(앞 판에서 "100 · 100 숫자가 같아 보인다", 같은 밤 "원을 작게 하지 말고 같은 크기로"). 759px 이하는 줄마다 이름 · 값이 위 한 줄, 막대가 아래 한 줄.
   앞 판들(10,000칸 격자 · 아이소메트릭 블록 · 「한 칸으로 재기」 달력 · 칸 막대 · 매끈한 게이지 · VS 판)은 git 기록에 ── */
.c4-gb { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: clamp(18px, 2.2vw, 32px); width: min(1000px, 100%); margin: clamp(32px, 5vh, 52px) auto 0; padding: clamp(22px, 3vh, 32px) clamp(24px, 3.4vw, 48px); border-radius: 22px; text-align: left;
  background: radial-gradient(55% 45% at 18% 100%, rgba(255, 65, 85, .09), rgba(255, 65, 85, 0) 70%), linear-gradient(180deg, #1C1C1F, #121214);
  box-shadow: inset 0 0 0 1px var(--ln), inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px rgba(0, 0, 0, .35); }
.c4-gb-g { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: clamp(10px, 1.7vh, 16px); }
.c4-gb-g + .c4-gb-g { margin-top: clamp(18px, 2.8vh, 28px); padding-top: clamp(18px, 2.8vh, 28px); border-top: 1px solid var(--ln); }
.c4-gb-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 0; font-size: clamp(15px, 1.2vw, 17px); font-weight: 800; letter-spacing: -.01em; }
.c4-gb-h::before { content: ''; flex: none; }
.c4-gb-g.is-big .c4-gb-h { color: #A1A1AA; }
.c4-gb-g.is-big .c4-gb-h::before { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8E8E97, #3A3A41); }
.c4-gb-g.is-ai .c4-gb-h { color: var(--t1); }
.c4-gb-g.is-ai .c4-gb-h::before { width: 18px; height: 6px; background: url(../img/ui/ui-1.svg) center / contain no-repeat; }
.c4-gb-r { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.c4-gb-k { grid-column: 1; grid-row: 1; margin: 0; color: var(--t3); font-size: clamp(14px, 1.15vw, 16px); font-weight: 600; white-space: nowrap; }
.c4-gb-t { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 14px; height: clamp(28px, 4vh, 38px); border-radius: 9px; }
.c4-gb-f { flex: none; display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; }
.c4-gb-v { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; font-size: clamp(28px, 2.8vw, 40px); font-weight: 900; line-height: 1; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 대기업: 칸 끝까지 찬 묵직한 회색(위 빛 · 아래 그늘 + 아주 옅은 사선 결) */
.c4-gb-g.is-big .c4-gb-f { width: 100%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, rgba(255, 255, 255, 0) 2px 9px), linear-gradient(180deg, #5E5E66, #3B3B42 55%, #2C2C32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .35); }
.c4-gb-g.is-big .c4-gb-v { color: #A1A1AA; }
/* RookissAI: 같은 길이의 빈 칸(점선) 맨 앞에 빨간 조각, 그 뒤 빈자리에 배수 알약 */
.c4-gb-g.is-ai .c4-gb-t { padding: 3px; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02); }
.c4-gb-g.is-ai .c4-gb-f { width: max(8px, 100% * var(--r, .0001)); border-radius: 6px; background: linear-gradient(180deg, #FF8C99, var(--ac) 60%, #E0283D); box-shadow: 0 0 0 1px rgba(255, 140, 150, .5), 0 0 14px 2px rgba(255, 65, 85, .75), 0 0 36px 6px rgba(255, 65, 85, .3); }
.c4-gb-g.is-ai .c4-gb-v { color: var(--ac); text-shadow: 0 0 24px rgba(255, 65, 85, .45); }
.c4-gb-x { display: inline-flex; align-items: baseline; padding: 3px 12px; border-radius: 999px; background: rgba(255, 65, 85, .12); box-shadow: inset 0 0 0 1px rgba(255, 65, 85, .45); color: #FFFFFF; font-size: clamp(14px, 1.2vw, 17px); font-weight: 800; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c4-gb-x small { margin-right: 5px; color: #FFB3BC; font-size: .86em; font-weight: 700; }
.c4-note { margin: 16px 0 0; color: var(--t5); font-size: 12.5px; text-align: center; }

/* ── 5 새로운 지평선: 별 · 떠오르는 빛 · 지평선 한 줄 · 다가오는 레드 격자 바닥 ── */
.c4-hz { --hz: 63%; align-content: start; padding: 0; min-height: max(680px, calc(100vh - var(--head))); overflow: clip; background: radial-gradient(110% 60% at 50% var(--hz), #1C0C11 0%, rgba(15, 15, 15, 0) 70%), var(--k); }
.c4-hz-sky { position: absolute; inset: 0; pointer-events: none; }
.c4-star { position: absolute; left: 0; top: 0; width: 1.6px; height: 1.6px; border-radius: 50%; }
.c4-sun { position: absolute; left: 50%; top: var(--hz); width: min(1200px, 130vw); aspect-ratio: 2 / 1; translate: -50% -100%; background: radial-gradient(50% 100% at 50% 100%, rgba(255, 255, 255, .95) 0%, rgba(255, 214, 219, .8) 5%, rgba(255, 65, 85, .5) 20%, rgba(255, 65, 85, .14) 46%, rgba(255, 65, 85, 0) 72%); }
.c4-floor { position: absolute; left: -60%; right: -60%; top: var(--hz); height: 64%; transform: perspective(360px) rotateX(74deg); transform-origin: 50% 0; opacity: .6;
  background: linear-gradient(rgba(255, 65, 85, .42) 1.5px, transparent 1.5px) 0 0 / 100% 72px, linear-gradient(90deg, rgba(255, 65, 85, .42) 1.5px, transparent 1.5px) 50% 0 / 72px 100%;
  -webkit-mask-image: linear-gradient(transparent 0, #000 10%, #000 55%, transparent 95%); mask-image: linear-gradient(transparent 0, #000 10%, #000 55%, transparent 95%); }
.c4-line { position: absolute; left: 0; right: 0; top: var(--hz); height: 1.5px; translate: 0 -50%; background: linear-gradient(90deg, rgba(255, 65, 85, 0), rgba(255, 65, 85, .55) 18%, #FFD6DC 44%, #FFFFFF 50%, #FFD6DC 56%, rgba(255, 65, 85, .55) 82%, rgba(255, 65, 85, 0)); box-shadow: 0 0 18px 1px rgba(255, 90, 110, .65); }
.c4-hz-t { position: absolute; z-index: 2; inset: 0; padding-top: clamp(56px, 11vh, 120px); text-align: center; }
.c4-hz h2 { font-size: clamp(44px, 5.4vw, 84px); line-height: 1.1; letter-spacing: -.045em; }
.c4-hz h2 em { background: linear-gradient(180deg, #FFFFFF 10%, #FFB3BC 55%, var(--ac) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c4-hz-l { margin: 22px 0 0; color: #D4D4D8; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.02em; }
.c4-hz-big { position: absolute; left: 0; right: 0; top: calc(var(--hz) + clamp(36px, 6vh, 64px)); margin: 0; color: var(--t1); font-size: clamp(26px, 2.7vw, 40px); font-weight: 800; line-height: 1.35; letter-spacing: -.035em; text-shadow: 0 2px 24px rgba(15, 15, 15, .9); }
.c4-hz-big em { font-style: normal; color: var(--ac); font-size: 1.22em; text-shadow: 0 0 40px rgba(255, 65, 85, .6); }

/* ── 6 디렉터: 뷰파인더(네 모서리 · REC · 타임코드 · 삼등분 선), 가운데 "디렉터"에 초점이 맞는다(뒤 게임 영상은 2026-10-19 밤 사용자 지시로 뺐다) ── */
.c4-dr { padding: 0; min-height: max(640px, calc(100vh - var(--head))); align-content: center; overflow: clip; }
.c4-dr::before { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(42% 46% at 50% 50%, rgba(15, 15, 15, .72), rgba(15, 15, 15, .4) 70%, rgba(15, 15, 15, .92) 100%); }
.c4-vf { position: absolute; z-index: 2; inset: clamp(28px, 6vh, 60px) clamp(20px, 5vw, 88px); pointer-events: none; color: rgba(255, 255, 255, .62); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.c4-vf-c { position: absolute; width: 46px; height: 46px; border: 0 solid rgba(255, 255, 255, .88); }
.c4-vf-c:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.c4-vf-c:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.c4-vf-c:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.c4-vf-c:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.c4-vf-rec, .c4-vf-tc, .c4-vf-s, .c4-vf-r { position: absolute; }
.c4-vf-rec { top: 16px; left: 66px; display: flex; align-items: center; gap: 9px; color: #FFFFFF; }
.c4-vf-rec::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.c4-vf-tc { top: 16px; right: 66px; color: rgba(255, 255, 255, .85); letter-spacing: .08em; }
.c4-vf-s { bottom: 16px; left: 66px; }
.c4-vf-r { bottom: 16px; right: 66px; }
.c4-vf-g { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(100% / 3 - .5px), rgba(255, 255, 255, .07) calc(100% / 3 - .5px) calc(100% / 3 + .5px), transparent calc(100% / 3 + .5px) calc(200% / 3 - .5px), rgba(255, 255, 255, .07) calc(200% / 3 - .5px) calc(200% / 3 + .5px), transparent calc(200% / 3 + .5px)),
  linear-gradient(transparent calc(100% / 3 - .5px), rgba(255, 255, 255, .07) calc(100% / 3 - .5px) calc(100% / 3 + .5px), transparent calc(100% / 3 + .5px) calc(200% / 3 - .5px), rgba(255, 255, 255, .07) calc(200% / 3 - .5px) calc(200% / 3 + .5px), transparent calc(200% / 3 + .5px)); }
.c4-dr-t { position: relative; z-index: 3; text-align: center; }
.c4-dr-q { margin: 0; color: rgba(255, 255, 255, .7); font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; letter-spacing: -.015em; }
.c4-dr-h { margin: clamp(18px, 3vh, 30px) 0 0; }
.c4-dr-h span { display: block; color: var(--t1); font-size: clamp(28px, 3vw, 46px); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
.c4-dr-h em { display: block; margin-top: 4px; color: var(--ac); font-size: clamp(92px, 12.5vw, 196px); font-weight: 900; line-height: 1.02; letter-spacing: -.06em; text-shadow: 0 0 90px rgba(255, 65, 85, .38); }
.c4-dr-s { margin: clamp(18px, 3vh, 30px) 0 0; color: var(--t2); font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.025em; }
.c4-dr-s b { color: var(--t1); font-weight: 800; }

/* ── 6-2 게이머에서 디렉터로: 왼쪽은 차가운 회색(불안 · 게이머), 오른쪽은 레드 빛(디렉터). 게이머 ─빛→ 디렉터 ── */
.c4-gx { overflow: clip; text-align: center; }
.c4-gx-bg { position: absolute; inset: 0; pointer-events: none; }
.c4-gx-bg i { position: absolute; top: 18%; bottom: 0; width: 60%; }
.c4-gx-l { left: -6%; background: radial-gradient(50% 46% at 50% 62%, rgba(161, 161, 170, .07), rgba(161, 161, 170, 0) 72%); }
.c4-gx-r { right: -6%; background: radial-gradient(50% 46% at 50% 62%, rgba(255, 65, 85, .2), rgba(255, 65, 85, 0) 72%); }
.c4-gx-in { position: relative; }
.c4-gx-a { margin: 0; color: var(--t4); font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.025em; }
/* 꿈을 묻는 RPG 대화 창: 바깥 흰 테 · 안쪽 가는 테(이중 테), 오른쪽 아래 빨간 ▼ 가 깜빡인다. 글자는 한 글자씩(모션) */
.c4-gx-dlg { position: relative; max-width: 780px; margin: clamp(22px, 3.6vh, 34px) auto 0; padding: clamp(18px, 2.6vh, 24px) clamp(22px, 2.6vw, 36px) clamp(20px, 2.8vh, 26px); border-radius: 8px; background: linear-gradient(180deg, rgba(26, 26, 30, .92), rgba(15, 15, 15, .92)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78), inset 0 0 0 6px #121214, inset 0 0 0 7px rgba(255, 255, 255, .16), 0 30px 70px rgba(0, 0, 0, .5); text-align: left; }
.c4-gx-q { margin: 0; color: var(--t1); font-size: clamp(19px, 1.75vw, 27px); font-weight: 700; line-height: 1.55; letter-spacing: -.03em; }
.c4-gx-q i { font-style: normal; }
.c4-gx-q em { font-style: normal; color: var(--ac2); }
.c4-gx-more { position: absolute; right: 20px; bottom: 14px; width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid var(--ac); border-bottom: 0; }
.c4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c4-gx-b { margin: 22px 0 0; color: var(--t2); font-size: clamp(20px, 1.85vw, 28px); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.c4-gx-b em { font-style: normal; color: var(--ac); }
.c4-gx-h { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 3vw, 48px); margin: clamp(28px, 5vh, 56px) 0 0; font-weight: 900; }
.c4-gx-w { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.c4-gx-k { display: inline-flex; align-items: center; gap: 10px; color: var(--t4); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.c4-gx-ic { width: 30px; height: 30px; }
.c4-gx-t { color: var(--t1); font-size: clamp(56px, 7.4vw, 116px); line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.c4-gx-t b { font-weight: 900; }
.is-g .c4-gx-t { color: #5E5E66; }
.is-g .c4-gx-t b { color: #8E8E96; }
.is-d .c4-gx-k { color: var(--ac); }
.is-d .c4-gx-t b { color: var(--ac); text-shadow: 0 0 70px rgba(255, 65, 85, .45); }
/* 화살: 가는 선 + 끝 꺾쇠, 빛 한 점이 왼쪽에서 오른쪽으로 지나간다 */
.c4-gx-to { position: relative; align-self: center; flex: none; width: clamp(64px, 8vw, 128px); height: 2px; margin-top: 46px; background: linear-gradient(90deg, #3A3A42, var(--ac)); }
.c4-gx-to::after { content: ''; position: absolute; right: -1px; top: 50%; width: 12px; height: 12px; border: solid var(--ac); border-width: 2px 2px 0 0; translate: 0 -50%; rotate: 45deg; }
.c4-gx-to i { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 20%, rgba(255, 110, 125, .9) 38%, rgba(255, 65, 85, 0) 70%); opacity: 0; }
.c4-gx-c { margin: clamp(28px, 5vh, 56px) 0 0; color: var(--t3); font-size: clamp(18px, 1.55vw, 23px); font-weight: 600; line-height: 1.6; letter-spacing: -.025em; }
.c4-gx-c b { color: var(--t1); font-weight: 800; }

/* ── 7 파트너 모집: 혜택 넷(넷 모두 같은 결 — 위 빨간 빛 선 · 빨간 번호 · 아이콘, 2026-10-19 사용자 "툴 지원만 강조돼 보인다") · 툴 두 칸 · 신청 ── */
.c4-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 5vh, 52px) 0 0; padding: 0; list-style: none; text-align: left; }
/* 카드 안 줄(아이콘 · 제목 · 설명 · 보충)을 subgrid 로 맞춰, 제목이 두 줄인 카드가 있어도 설명이 같은 높이에서 시작한다(보충은 04 에만) */
.c4-pk { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; gap: 0; position: relative; overflow: hidden; padding: 26px 24px 28px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 65, 85, .07), rgba(255, 65, 85, 0) 46%), var(--k1); box-shadow: inset 0 0 0 1px var(--ln), 0 8px 24px -24px rgba(0, 0, 0, 0); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.c4-pk::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, rgba(255, 65, 85, 0), var(--ac), rgba(255, 65, 85, 0)); opacity: .8; transition: opacity .55s var(--ease); }
/* 호버는 천천히 떠오르고 같은 결로 내려온다(2026-10-19 밤 사용자 "…스르륵 부드럽게"). 등장(.c4-rv 의 c4-up, both)이 translate 를 계속 붙잡아 transition 이 안 먹고 툭 튀었으므로, 호버 이동은 transform 으로 나눈다. 터치 기기엔 호버를 남기지 않고, 움직임 줄이기면 이동 없이 빛만 */
@media (hover: hover) {
  .c4-pk:hover { box-shadow: inset 0 0 0 1px rgba(255, 65, 85, .45), 0 26px 48px -26px rgba(0, 0, 0, .9); }
  .c4-pk:hover::before { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .c4-pk:hover { transform: translateY(-8px); }
}
.c4-ic { display: block; width: 30px; height: 30px; color: var(--ac); }
.c4-pk-n { position: absolute; top: 26px; right: 24px; color: var(--ac); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.c4-pk h3 { margin: 22px 0 0; color: var(--t1); font-size: 19px; font-weight: 750; line-height: 1.35; letter-spacing: -.025em; text-wrap: balance; }
.c4-pk p { margin: 10px 0 0; color: var(--t3); font-size: 14.5px; font-weight: 500; line-height: 1.65; }
/* 넷이 한 줄인 폭은 판을 넓혀 카드 설명이 모두 두 줄 안에(2026-10-21 사용자 "퍼블리싱 지원 카드만 글씨가 많아 어색" — 04 는 설명 두 줄 + 비보장 보충) */
@media (min-width: 1101px) { .c4-rc .c4-in { max-width: 1400px; } }
@media (min-width: 1600px) { .c4-rc .c4-in { max-width: 1560px; } }
.c4-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 940px; margin: 36px auto 0; }
.c4-tools-k { grid-column: 1 / -1; margin: 0 0 2px; color: var(--t3); font-size: 14px; font-weight: 600; text-align: left; }
.c4-tools-k b { margin-right: 6px; color: var(--ac); font-weight: 800; font-variant-numeric: tabular-nums; }
.c4-tw { margin: 0; overflow: hidden; border-radius: 16px; background: #121214; box-shadow: inset 0 0 0 1px var(--ln); text-align: left; }
.c4-tw-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-bottom: 1px solid #1F1F23; color: var(--t2); font-size: 14px; }
.c4-tw-bar::before { content: ''; width: 11px; height: 13px; background: url(../img/ui/ui-3.svg) center / contain no-repeat; }
.c4-tw-bar b { font-weight: 750; letter-spacing: -.01em; }
.c4-tw-bar span { margin-left: auto; color: var(--t4); font-size: 12.5px; font-weight: 600; }
.c4-tw-v { position: relative; aspect-ratio: 16 / 9; background: #0B0B0C; }
.c4-tw-v video { width: 100%; height: 100%; object-fit: cover; }
.c4-tw-v--slot { display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--t5); font-size: 14px; font-weight: 600; background: repeating-linear-gradient(135deg, #0E0E10 0 14px, #121215 14px 28px); }
.c4-tw-play { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #3A3A42; }
.c4-tw-play::before { content: ''; width: 18px; height: 20px; margin-left: 4px; background: #52525B; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.c4-tw figcaption { padding: 14px 18px 16px; color: var(--t3); font-size: 14px; font-weight: 500; }
/* 계약 체결 · 출시 · 수익을 보장하지 않는다는 보충 한 문장(2026-10-20 밤 사용자 "보장하지 않음은 회색 작은 글씨로", 「약관」 확정 — 조건 · 숫자는 본문 크기):
   혜택 04 「퍼블리싱 검토」 설명 바로 아래 늘 보이고 접지 않는다(2026-10-21 혜택 아래 안내 상자를 상세 소개로 옮기며 이 한 문장만 카드 안에 남김).
   글자는 12px 아래로 내리지 않고, --fine #8A8A93 은 4.5:1 이상(바탕 #0F0F0F 에 5.60:1) */
.c4 .c4-fine { margin: 8px 0 0; color: var(--fine); font-size: 12.5px; font-weight: 500; line-height: 1.6; }
/* 영상이 없는 툴 칸(2026-10-20 사용자 — 영상 · 그림 자리 없이 이름 · 한 줄만): 같은 카드 결에 왕관 + 이름, 아래 한 줄 */
.c4-tw--text { padding: 18px 20px 19px; }
.c4-tw--text .c4-tw-bar { height: auto; padding: 0; border-bottom: 0; color: var(--t1); font-size: 16px; }
.c4-tw--text p { margin: 8px 0 0; color: var(--t3); font-size: 14px; font-weight: 500; line-height: 1.6; }
.c4-go { display: flex; flex-direction: column; align-items: center; margin-top: clamp(36px, 5vh, 52px); }

/* ── 8 자주 묻는 질문: 접는 목록(빨간 Q. · 오른쪽 꺾쇠가 열리면 뒤집힘), 첫 질문은 열림. 열고 닫을 때 높이가 부드럽게(지원하는 브라우저만) ── */
.c4-faq { interpolate-size: allow-keywords; }
.c4-qa { max-width: 880px; margin: clamp(32px, 5vh, 52px) auto 0; border-top: 1px solid var(--ln); text-align: left; }
.c4-q { border-bottom: 1px solid var(--ln); }
.c4-q summary { display: flex; align-items: center; gap: 14px; padding: 24px 6px; color: var(--t2); font-size: clamp(17px, 1.3vw, 19px); font-weight: 700; letter-spacing: -.02em; list-style: none; cursor: pointer; transition: color .15s; }
.c4-q summary::-webkit-details-marker { display: none; }
.c4-q summary b { flex: none; color: var(--ac); font-weight: 800; }
.c4-q summary span { flex: 1; min-width: 0; }
.c4-q summary i { flex: none; width: 10px; height: 10px; margin: -4px 6px 0 0; border: solid var(--t4); border-width: 0 2px 2px 0; rotate: 45deg; transition: rotate .3s var(--ease), border-color .15s, margin .3s var(--ease); }
.c4-q summary:hover { color: var(--t1); }
.c4-q summary:hover i { border-color: var(--t2); }
.c4-q summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; border-radius: 6px; }
.c4-q[open] summary { color: var(--t1); }
.c4-q[open] summary i { rotate: 225deg; margin-top: 6px; border-color: var(--ac); }
.c4-q p { margin: 0; padding: 0 6px 26px 40px; color: var(--t3); font-size: 16px; font-weight: 500; line-height: 1.75; text-wrap: pretty; }
.c4-q::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.c4-q[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .c4-q::details-content { transition: none; } }
@media (max-width: 759px) {
  .c4-q summary { gap: 10px; padding: 20px 2px; font-size: 16px; }
  .c4-q p { padding: 0 2px 22px 30px; font-size: 15px; }
}

/* ── 1-2 인디 게임 신화(id c4-my, 2026-10-19 깨진 약속의 첫 장면에서 떼어 냄): 작은 리드 · 큰 줄(은빛 둘째 줄) · 공식 아트 카드 여섯(같은 밤 셋 → 다섯 → 여섯) ──
   세로 카드(위 그림 · 아래 글) 셋 × 두 줄(같은 밤 사용자 "3카드씩 2줄로", 가로형으로 바꿨다가 "카드 형태는 그대로 유지한 상태로" — 그 전엔 한 줄 여섯).
   1100px 이상은 두 줄이 한 화면에 들게 카드 폭을 남은 높이에서 셈: .c4-in 이 화면 높이를 채우는 세로 flex, 목록(ul)이 남은 높이를 받는 크기 컨테이너,
   카드 폭 --cw = (100cqh - 줄 간격 - 2 × --tx(글 높이)) × 1.745 / 2(그림 616 : 353), 셋이 100cqw 를 넘지 않게, 그림 높이도 --cw 로 못 박음(안 그러면 줄이 눌려 그림이 잘린다).
   폭이 먼저 막히는 화면(세로로 긴 창)은 목록 높이 상한(--W 로 셈한 카드 두 줄)으로 남는 높이를 머리 · 카드 · 주석 묶음 위아래로 돌린다.
   1440×900 은 카드 약 210px 로 한 화면, 1920×1080 은 약 310px. 1280×720 처럼 낮은 화면은 최소 폭 210 — 섹션이 길어지고 넘김이 위 · 아래 두 번 멈춘다.
   760~1099(태블릿 · 좁은 창)는 높이 셈 없이 폭을 셋으로 나눈 보통 흐름.
   759 이하는 가로 카드 목록. 목록 폭은 섹션 눈금을 비키게 100vw - 144px 안 */
.c4-my { --my-pad: clamp(28px, 3.6vh, 64px); padding-block: var(--my-pad); }
.c4-my .c4-in { max-width: 1440px; }
.c4-my-l { margin: 0 0 8px; color: var(--t3); font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; letter-spacing: -.02em; }
.c4-my .c4-hd h2 { font-size: clamp(32px, 3.2vw, 50px); line-height: 1.14; letter-spacing: -.045em; }
.c4-my .c4-hd h2 span { background: linear-gradient(180deg, #FFFFFF 0%, #ECECF0 40%, #9A9AA6 56%, #DADAE0 76%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .25)); }
.c4-my-news { --g: clamp(12px, 1.1vw, 18px); --tx: 158px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); width: min(1400px, 100%, 100vw - 144px); margin: 24px auto 0; padding: 0; list-style: none; text-align: left; }
.c4-my-news li { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 16px; background: #18181B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -34px #000; transition: translate .3s var(--ease), box-shadow .3s; }
.c4-my-news li:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 36px 70px -34px #000; }
.c4-my-art { display: block; overflow: hidden; }
.c4-my-art img { display: block; width: 100%; height: auto; aspect-ratio: 616 / 353; object-fit: cover; transition: scale .5s var(--ease); }
.c4-my-news li:hover img { scale: 1.04; }
/* 글: 분류 · 이름 · 한 줄, 맨 아래(카드 높이가 달라도 같은 줄에) 추정 총매출 — 빨간 큰 금액 */
.c4-my-news li > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px 12px; }
.c4-my-nm { margin: 0; color: var(--t4); font-size: 11px; font-weight: 700; }
.c4-my-news strong { color: var(--t1); font-size: clamp(15px, 1.1vw, 19px); font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.c4-my-d { margin: 0; color: var(--t3); font-size: clamp(12px, .88vw, 14px); line-height: 1.45; text-wrap: pretty; }
.c4-my-won { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--ln); }
.c4-my-won span { color: var(--t4); font-size: 11.5px; font-weight: 700; }
.c4-my-won b { color: var(--ac); font-size: clamp(17px, 1.4vw, 24px); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255, 65, 85, .35); }
.c4-my .c4-note { margin-top: 14px; }
@media (min-width: 1100px) {
  .c4-my > .c4-in { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--head) - 2 * var(--my-pad)); }
  .c4-my-news { --W: min(1400px, 100vw - 144px); container-type: size; flex: 1 0 calc(2 * (210px / 1.745 + var(--tx)) + var(--g)); max-height: calc(2 * (min((var(--W) - 2 * var(--g)) / 3, 480px) / 1.745 + var(--tx)) + var(--g)); grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; }
  .c4-my-news li { --cw: min((100cqw - 2 * var(--g)) / 3, 480px, max(210px, (100cqh - var(--g) - 2 * var(--tx)) * .8725)); width: var(--cw); }
  .c4-my-art img { height: calc(var(--cw) / 1.745); }
}
@media (max-width: 1099px) and (min-width: 760px) {
  .c4-my-news { --g: 14px; }
}
@media (max-width: 899px) and (min-width: 760px) {
  .c4-my-news li > div { padding: 12px 14px 14px; }
  .c4-my-news strong { font-size: 17px; }
  .c4-my-d { font-size: 13px; }
  .c4-my-won { padding-top: 10px; }
  .c4-my-won b { font-size: 22px; }
}
@media (max-width: 759px) {
  .c4-my .c4-hd h2 { font-size: 28px; }
  .c4-my-l { margin-bottom: 10px; font-size: 14.5px; }
  .c4-my-news { grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin-top: 24px; } /* 섹션 눈금이 없는 폭 — 100vw - 144px 상한을 풂 */
  .c4-my-news li { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: none; border-radius: 12px; }
  .c4-my-art img { height: 100%; aspect-ratio: auto; }
  .c4-my-news li > div { gap: 3px; padding: 11px 12px 12px; }
  .c4-my-nm { font-size: 10.5px; }
  .c4-my-news strong { font-size: 16px; }
  .c4-my-d { font-size: 12.5px; line-height: 1.45; }
  .c4-my-won { padding-top: 7px; }
  .c4-my-won span { font-size: 11px; }
  .c4-my-won b { font-size: 18px; }
}
@media (max-height: 800px) and (min-width: 900px) {
  .c4-my .c4-hd h2 { font-size: clamp(30px, 3vw, 42px); }
  .c4-my-news { margin-top: 18px; }
}
/* 큰 화면: 여섯 장을 조금 더 크게(카드 폭은 위 높이 셈이 정한다) */
@media (min-width: 1600px) and (min-height: 860px) {
  .c4-my .c4-in { max-width: 1640px; }
  .c4-my-news { --g: 20px; --tx: 168px; --W: min(1560px, 100vw - 144px); width: min(1560px, 100%, 100vw - 144px); margin-top: 38px; }
  .c4-my-news li > div { padding: 15px 18px 17px; }
}

/* ── 1-3 깨진 약속: 두 장면 — 섹션 화면을 꽉 채운 남의 강의 광고 캡처 모음에 저절로 금이 가 번지고 쨍그랑 → 질문 · 깨진 약속 넷 ──
   남의 화면은 '남의 약속'이라 레드를 쓰지 않는다 — 밝은 바탕 · 흰 카드 · 파랑 · 보라(주황 · 라임 · 녹색 없음). 깨진 뒤의 질문부터 다시 흑백 + 레드.
   장면 상태(.is-ad · .is-k1 · .is-k2 · .is-broken)와 금 · 조각은 challenge4.js 가 단다. 조각은 모음을 복제해 금 모양으로 잘라 날린다(.c4-vb-sh).
   모음의 상태 규칙은 모두 '.c4-vb > .c4-vb-wall'(바로 아래)에 건다 — 조각 속 복제에는 걸리지 않게. */
.c4-vb { overflow-x: clip; }
/* 장면 1 — 캡처 모음(2026-10-19 밤 사용자 "화면 전체에 강의 상세 소개 · 썸네일 · 인디 게임 신화 … 캡처들이 여러 개, 그 섹션 자체가 깨지게 — 실제 캡처 말고 연상되게 직접 만들어"):
   섹션 한 화면(상단바 아래)을 꽉 채운 밝은 바탕 위에 캡처 열한 장을 비스듬히 겹쳐 붙인다. 크기는 모음 기준 단위 --u(가로 화면이면 대개 1cqw) —
   화면 크기가 달라도 같은 짜임. 모음이 세로로 길면(모바일 · 세로 태블릿) 아홉 장만 다른 자리에(@container 아래). */
.c4-vb-wall {
  position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: calc(100vh - var(--head)); overflow: hidden;
  container-type: size; color: #1F2033; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle, rgba(60, 60, 130, .15) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(160deg, #F4F3F9, #E1E0EC);
}
/* 유리 앞면(비스듬한 반사 두 줄)과 지나가는 빛 — 캡처 위, 금 아래 */
.c4-vb-wall::before { content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, .2) 27%, transparent 35%, transparent 58%, rgba(255, 255, 255, .13) 63%, transparent 68%); }
.c4-vb-wall::after { content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); translate: -120% 0; }
:where(.c4-vb-wall) :is(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
/* 캡처 한 장: 자리 --x · --y(모음의 %), 너비 --w(단위 수), 기울기 --r */
.c4-vb-p {
  --u: min(1cqw, 1.75cqh);
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * var(--u)); rotate: var(--r, 0deg);
  overflow: hidden; border-radius: calc(var(--u) * .8); background: #FFFFFF; font-size: calc(var(--u) * 1.1); line-height: 1.4; letter-spacing: -.02em;
  box-shadow: 0 0 0 1px rgba(40, 40, 90, .08), 0 calc(var(--u) * 1.6) calc(var(--u) * 3.2) calc(var(--u) * -1.2) rgba(30, 25, 90, .42);
}
.c4-vb-t1 { --x: 1.5%; --y: 4%; --w: 26; --r: -3deg; }
.c4-vb-bn { --x: 30.5%; --y: 4.5%; --w: 38; --r: 1.2deg; }
.c4-vb-t2 { --x: 72.5%; --y: 2.5%; --w: 25; --r: 2.6deg; }
.c4-vb-cu { --x: 1.5%; --y: 37%; --w: 22; --r: 2deg; }
.c4-vb-dp { --x: 26%; --y: 30%; --w: 47; --r: -1deg; }
.c4-vb-by { --x: 75%; --y: 27%; --w: 23; --r: 1.6deg; }
.c4-vb-rv { --x: 3%; --y: 68%; --w: 27; --r: -1.6deg; }
.c4-vb-as { --x: 35%; --y: 70%; --w: 27; --r: 1.2deg; }
.c4-vb-t3 { --x: 68.5%; --y: 70%; --w: 26; --r: -2.4deg; }
.c4-vb-sk { --x: 64.5%; --y: 55%; --w: 10.5; --r: 12deg; }
.c4-vb-ts { --x: 3%; --y: 27%; --w: 25; --r: -1deg; }
/* 썸네일: 게임 화면 + 왼쪽 어둡게 + 굵은 두 줄(아랫줄은 색 상자) + 재생 시간 */
.c4-vb-tb { aspect-ratio: 16 / 9; border-radius: calc(var(--u) * .6); background: #14122A; }
.c4-vb-tb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c4-vb-tb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 30, .84), rgba(10, 8, 30, .3) 68%, rgba(10, 8, 30, 0)); }
.c4-vb-tb p { position: absolute; z-index: 1; left: 6%; bottom: 13%; color: #FFFFFF; font-size: calc(var(--u) * 3.2); font-weight: 900; line-height: 1.14; letter-spacing: -.05em; text-shadow: 0 .06em 0 #0A0820, 0 0 .3em rgba(10, 8, 32, .8); }
.c4-vb-tb em { display: inline-block; margin-top: .1em; padding: .02em .18em; border-radius: .08em; background: #4B3FE0; font-style: normal; text-shadow: none; box-shadow: .07em .07em 0 #0A0820; }
.c4-vb-t2 em { background: #2F5BFF; }
.c4-vb-t3 em { background: #8B3DF0; }
.c4-vb-tb span { position: absolute; z-index: 1; right: 4%; bottom: 7%; padding: .15em .45em; border-radius: .3em; background: rgba(0, 0, 0, .8); color: #FFFFFF; font-size: calc(var(--u) * .95); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 상세페이지(브라우저 창): 주소창 / 맛보기 게임 화면 | 분류 · 꼬리표 · 들뜬 제목('인디 게임 신화!' 에서 금이 시작) · 별점 */
.c4-vb-dp { border-radius: calc(var(--u) * 1); background: #F6F5FB; }
.c4-vb-bar { display: flex; align-items: center; gap: calc(var(--u) * .55); height: calc(var(--u) * 2.7); padding: 0 calc(var(--u) * 1.1); background: #E7E5F0; box-shadow: inset 0 -1px #D8D5E5; }
.c4-vb-bar i { flex: none; width: calc(var(--u) * .75); height: calc(var(--u) * .75); border-radius: 50%; background: #C9C6DA; }
.c4-vb-url { flex: 0 1 62%; min-width: 0; margin-left: calc(var(--u) * .9); padding: .3em .9em .3em 2.1em; overflow: hidden; border-radius: .5em; background: #FFFFFF url(../img/ui/ui-4.svg) .85em 50% / .75em no-repeat; color: #6E7088; font-size: calc(var(--u) * .95); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.c4-vb-dpb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--u) * 1.8); align-items: center; padding: calc(var(--u) * 1.8); }
.c4-vb-dpb > div + div { display: grid; gap: calc(var(--u) * .75); justify-items: start; }
.c4-vb-th { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(var(--u) * .35); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * -1.4) rgba(40, 30, 140, .65); }
.c4-vb-th img { width: 100%; height: 100%; object-fit: cover; }
.c4-vb-pv { position: absolute; right: 5%; bottom: 7%; display: flex; align-items: center; gap: .4em; padding: .35em .8em .35em .45em; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #2A1FA8; font-size: calc(var(--u) * .95); font-weight: 800; }
.c4-vb-pv::before { content: ''; width: 1.5em; height: 1.5em; border-radius: 50%; background: #4B3FE0 url(../img/ui/ui-5.svg) 55% 50% / 1em no-repeat; }
.c4-vb-crumb { color: #8C8EA2; font-size: calc(var(--u) * .95); font-weight: 600; }
.c4-vb-tag { display: flex; gap: .4em; }
.c4-vb-tag :is(b, span) { padding: .2em .6em; border-radius: .35em; font-size: calc(var(--u) * .9); font-weight: 800; }
.c4-vb-tag b { background: #111322; color: #FFFFFF; letter-spacing: .06em; }
.c4-vb-tag span { background: #E9E8FF; color: #4B3FE0; }
.c4-vb-big { color: #111322; font-size: calc(var(--u) * 2.5); font-weight: 900; line-height: 1.16; letter-spacing: -.05em; }
.c4-vb-o { background: linear-gradient(90deg, #3346F0, #8B3DF0); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.c4-vb-rate { display: flex; align-items: center; gap: .4em; color: #8C8EA2; font-size: calc(var(--u) * 1); font-weight: 600; }
.c4-vb-rate i { color: #5B4BF0; font-style: normal; letter-spacing: .05em; }
.c4-vb-rate b { color: #111322; font-weight: 800; }
/* 신화 배너: 남보라 띠 · 큰 두 줄 · 신화 이름 */
.c4-vb-bn { display: grid; gap: calc(var(--u) * .75); justify-items: start; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 1); color: #FFFFFF; background: radial-gradient(circle at 86% 30%, rgba(160, 200, 255, .45), rgba(160, 200, 255, 0) 22%), linear-gradient(118deg, #17195E, #3F2BD0 55%, #8B3DF0); }
.c4-vb-bn::after { content: '★'; position: absolute; right: 5%; top: 50%; translate: 0 -50%; color: rgba(255, 255, 255, .14); font-size: calc(var(--u) * 10); line-height: 1; rotate: 14deg; }
.c4-vb-bk { padding: .25em .75em; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: calc(var(--u) * .95); font-weight: 800; }
.c4-vb-bt { position: relative; z-index: 1; font-size: calc(var(--u) * 2.9); font-weight: 900; line-height: 1.14; letter-spacing: -.05em; }
.c4-vb-bt em { color: #8FE3FF; font-style: normal; }
.c4-vb-bl { position: relative; z-index: 1; color: rgba(255, 255, 255, .8); font-size: calc(var(--u) * 1.05); font-weight: 600; }
/* 구매 상자: 마감 임박 · 할인가 · 약속 넷(깨진 뒤 현실 카드의 머리) · 마감 시계 · 신청 */
.c4-vb-by { display: grid; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.6); }
.c4-vb-byh { color: #4B3FE0; font-size: calc(var(--u) * 1); font-weight: 700; }
.c4-vb-byh b { margin-right: .2em; padding: .15em .5em; border-radius: .3em; background: #4B3FE0; color: #FFFFFF; font-weight: 800; }
.c4-vb-price { display: flex; align-items: baseline; gap: .3em; font-size: calc(var(--u) * 2.4); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.c4-vb-price b { color: #4B3FE0; }
.c4-vb-price strong { color: #111322; }
.c4-vb-was { color: #A3A5B6; font-size: calc(var(--u) * .95); }
.c4-vb-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em .6em; padding: .8em 0 !important; border-block: 1px solid #ECEBF3; }
.c4-vb-pills li { display: flex; align-items: center; gap: .35em; color: #2A2C40; font-size: calc(var(--u) * .9); font-weight: 700; white-space: nowrap; }
.c4-vb-pills li::before { content: ''; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: #3F4CF0 url(../img/ui/ui-6.svg) center / 1em no-repeat; }
.c4-vb-cd { display: flex; justify-content: space-between; align-items: center; padding: .45em .75em; border-radius: .5em; background: #111322; color: #C5C8DE; font-size: calc(var(--u) * .92); font-weight: 700; }
.c4-vb-cd span { color: #FFFFFF; font-weight: 800; font-variant-numeric: tabular-nums; }
.c4-vb-cta { display: grid; place-items: center; height: calc(var(--u) * 3.4); border-radius: calc(var(--u) * .7); background: linear-gradient(90deg, #3346F0, #7C3AED); color: #FFFFFF; font-size: calc(var(--u) * 1.2); font-weight: 800; }
/* 커리큘럼 · 후기 · 에셋 팩: 흰 카드 머리 + 줄 */
.c4-vb-ch { color: #111322; font-size: calc(var(--u) * 1.35); font-weight: 800; letter-spacing: -.03em; }
.c4-vb-ch :is(i, em) { color: #4B3FE0; font-style: normal; }
.c4-vb-cu { display: grid; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.6) calc(var(--u) * .9); }
.c4-vb-cu li { display: flex; align-items: center; gap: .6em; padding: .55em 0; border-top: 1px solid #ECEBF3; color: #2A2C40; font-size: calc(var(--u) * 1.02); font-weight: 600; }
.c4-vb-cu li b { flex: none; padding: .15em .5em; border-radius: .3em; background: #E9E8FF; color: #4B3FE0; font-size: .88em; font-weight: 800; }
.c4-vb-rv { display: grid; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.6); }
.c4-vb-rv ul { display: grid; gap: calc(var(--u) * .65); }
.c4-vb-rv li { display: grid; gap: .3em; padding: .8em .9em; border-radius: .6em; background: #F4F3FA; }
.c4-vb-rv li p { color: #1F2033; font-size: calc(var(--u) * 1.08); font-weight: 700; line-height: 1.35; }
.c4-vb-rv li span { color: #8C8EA2; font-size: calc(var(--u) * .86); font-weight: 600; }
.c4-vb-as { display: grid; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.6); }
.c4-vb-as ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * .5); }
.c4-vb-as li { aspect-ratio: 16 / 10; border-radius: calc(var(--u) * .4); background-color: #1A1736; background-repeat: no-repeat; background-size: 914.3% auto; image-rendering: pixelated; }
.c4-vb-asn { color: #6E7088; font-size: calc(var(--u) * .92); font-weight: 600; }
/* 스티커 · 신청 알림: 다른 캡처 위에 붙은 것 */
.c4-vb-sk { display: grid; place-items: center; aspect-ratio: 1; overflow: visible; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7A6CFF, #3B2FC8 70%); color: #FFFFFF; text-align: center; box-shadow: 0 0 0 calc(var(--u) * .35) #FFFFFF, 0 calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * -.6) rgba(30, 20, 120, .6); }
.c4-vb-sk p { font-size: calc(var(--u) * .95); font-weight: 800; line-height: 1.2; }
.c4-vb-sk b { display: block; font-size: calc(var(--u) * 2.8); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; }
.c4-vb-ts { display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.2); }
.c4-vb-ts i { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.6); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #5B4BF0, #8B3DF0); color: #FFFFFF; font-size: calc(var(--u) * 1.1); font-style: normal; font-weight: 800; }
.c4-vb-ts p { display: grid; gap: .15em; min-width: 0; }
.c4-vb-ts b { color: #1F2033; font-size: calc(var(--u) * 1.02); font-weight: 800; white-space: nowrap; }
.c4-vb-ts span { color: #8C8EA2; font-size: calc(var(--u) * .86); font-weight: 600; }
/* 세로로 긴 모음(모바일 · 세로 태블릿): 단위를 키우고 아홉 장만 다른 자리에(커리큘럼 · 셋째 썸네일은 뺀다) */
@container (orientation: portrait) {
  .c4-vb-p { --u: min(2.5cqw, 1.65cqh); }
  .c4-vb-t1 { --x: -3%; --y: 2%; --w: 21; --r: -4deg; }
  .c4-vb-bn { --x: 40%; --y: 4%; --w: 25; --r: 3deg; }
  .c4-vb-bt { font-size: calc(var(--u) * 2.2); }
  .c4-vb-bl { display: none; }
  .c4-vb-ts { --x: 20%; --y: 19.5%; --w: 25; }
  .c4-vb-dp { --x: 2.5%; --y: 26%; --w: 38; --r: -1.5deg; }
  .c4-vb-big { font-size: calc(var(--u) * 2.05); }
  .c4-vb-rv { --x: -2%; --y: 54%; --w: 22; --r: -2deg; }
  .c4-vb-by { --x: 46%; --y: 51%; --w: 22.5; --r: 2deg; }
  .c4-vb-sk { --x: -1%; --y: 44%; --w: 9; }
  .c4-vb-t2 { --x: 2%; --y: 79%; --w: 21; --r: 3deg; }
  .c4-vb-as { --x: 50%; --y: 81%; --w: 20; --r: -1.5deg; }
  .c4-vb-cu, .c4-vb-t3 { display: none; }
}
/* 금(흰 테를 두른 짙은 줄 — 밝은 바탕 · 짙은 썸네일 어디서나 보인다. 바퀴살 · 고리, 기어 나오듯 그어진다)과 시작점의 빛 */
.c4-vb-crack { position: absolute; inset: 0; z-index: 21; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, .95)); }
.c4-vb-crack path { fill: none; stroke: rgba(26, 24, 50, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.c4-vb-crack path.r { stroke: rgba(26, 24, 50, .55); stroke-width: 1.1; }
.c4-vb-crack circle { fill: url(#c4-vb-g); opacity: 0; }
/* 깨짐: 모음 자리에 조각(모음 복제를 금 모양으로 자른 것 — 칸을 감싸는 상자만큼만)과 반짝이. 조각은 첫 금 때 미리 만들어 숨겨 둔다 */
.c4-vb-shards { position: absolute; z-index: 3; visibility: hidden; pointer-events: none; perspective: 1400px; }
.c4-vb.is-broken > .c4-vb-shards { visibility: visible; }
.c4-vb-sh { position: absolute; overflow: hidden; }
.c4-vb-sh > .c4-vb-wall { position: absolute; cursor: default; }
.c4-vb-sh > .c4-vb-wall::after { content: none; }
.c4-vb-edge { position: absolute; inset: 0; z-index: 22; width: 100%; height: 100%; overflow: visible; }
.c4-vb-edge polygon { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-linejoin: round; }
.c4-vb-sp { position: absolute; top: 0; left: 0; width: var(--s); height: var(--s); background: linear-gradient(135deg, #FFFFFF, rgba(255, 255, 255, .35)); clip-path: polygon(50% 0, 100% 78%, 8% 100%); will-change: transform, opacity; }
.c4-vb::after { content: ''; position: absolute; z-index: 4; top: var(--fy, 50%); left: var(--fx, 50%); width: 150vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0)); opacity: 0; pointer-events: none; }
/* 장면 2 — 깨진 뒤: 질문 · 깨진 약속 넷(카드 머리 = 광고의 약속에 빨간 ✕ · 줄) · 맺음 */
.c4-vb-truth { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.c4-vb .c4-hd h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.16; letter-spacing: -.045em; }
.c4-vb .c4-hd h2 em { color: var(--ac); font-style: normal; }
.c4-vb-l { margin: 22px 0 0; color: var(--t3); font-size: 18px; font-weight: 500; line-height: 1.65; text-wrap: balance; }
.c4-vb-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 48px 0 0; padding: 0; list-style: none; text-align: left; }
/* 카드 안 줄(약속 · 질문 · 설명)은 subgrid — 질문이 두 줄인 카드("에셋을 전부 제공받진 않았나요?")가 있어도 설명이 같은 높이에서 시작 */
.c4-vb-list li { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 10px; min-height: 190px; padding: 26px 24px; background: linear-gradient(160deg, #3C3C44, #222227 55%, #1E1E22); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.c4-vb-list li::before { content: ''; position: absolute; inset: 1px; background: linear-gradient(180deg, #1A1A1D, #131315); clip-path: polygon(0 0, calc(100% - 25.6px) 0, 100% 25.6px, 100% 100%, 0 100%); }
.c4-vb-list li > * { position: relative; }
.c4-vb-n { display: inline-flex; align-items: center; gap: 8px; color: var(--t3); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.c4-vb-n::before { content: ''; flex: none; width: 11px; height: 11px; background: url(../img/ui/ui-7.svg) center / contain no-repeat; }
.c4-vb-n s { text-decoration: line-through 1.5px rgba(255, 65, 85, .85); }
.c4-vb-list b { color: var(--t1); font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em; }
.c4-vb-list p { margin: 0; color: var(--t3); font-size: 15px; line-height: 1.6; }
.c4-vb-end { margin: 44px 0 0; color: var(--t3); font-size: 19px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.c4-vb-end em { color: var(--t1); font-size: 1.24em; font-weight: 800; font-style: normal; }
/* 스크립트 없음 · 움직임 줄이기: 캡처 모음 없이 마지막 장면 */
html:not(.c4-js) .c4-vb-wall { display: none; }
@media (prefers-reduced-motion: reduce) {
  .c4-vb-wall { display: none; }
}
/* 넷이 한 줄인 폭: 카드 제목은 늘 한 줄(2026-10-21 사용자 — "에셋을 전부 제공받진 않았나요?"만 두 줄로 꺾여 어색) — 판을 1400 까지 넓히고(큰 화면은
   아래 1680), 그래도 모자라면(1101~1219) 제목이 긴 칸만 제 폭만큼 넓어진다(min-content = 한 줄 제목 + 여백) */
@media (min-width: 1101px) {
  .c4-vb .c4-in { max-width: 1400px; }
  .c4-vb-list { grid-template-columns: repeat(4, minmax(min-content, 1fr)); }
  .c4-vb-list b { white-space: nowrap; }
}
@media (max-width: 1100px) {
  .c4-vb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c4-vb-list li { min-height: 0; }
}
@media (max-width: 759px) {
  .c4-vb .c4-hd h2 { font-size: 29px; }
  .c4-vb-l { margin-top: 16px; font-size: 15px; }
  .c4-vb-list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
  .c4-vb-list li { gap: 8px; padding: 20px 20px 22px; }
  .c4-vb-list b { font-size: 17px; }
  .c4-vb-list p { font-size: 14.5px; }
  .c4-vb-end { margin-top: 32px; font-size: 16px; }
}
/* 낮은 화면(1280×720 · 1366×768): 깨진 뒤 장면이 한 화면에 */
@media (max-height: 800px) and (min-width: 900px) {
  .c4-vb .c4-hd h2 { font-size: clamp(34px, 3.9vw, 50px); }
  .c4-vb-l { margin-top: 16px; font-size: 16.5px; }
  .c4-vb-list { margin-top: 34px; }
  .c4-vb-list li { min-height: 168px; padding: 22px 22px; }
  .c4-vb-end { margin-top: 30px; }
}
/* 4 게이지 판: 낮은 화면(1280×720 · 1366×768)에서 머리 · 판 · 주석이 한 화면에 */
@media (max-height: 800px) and (min-width: 900px) {
  .c4-gb { margin-top: 26px; padding-block: 18px; }
  .c4-gb-g { row-gap: 8px; }
  .c4-gb-g + .c4-gb-g { margin-top: 14px; padding-top: 14px; }
  .c4-gb-t { height: 30px; }
  .c4-gb-v { font-size: clamp(26px, 2.5vw, 34px); }
  .c4-gb-x { padding-block: 2px; font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 장면 차례: 캡처 모음(.is-ad — 바탕이 켜지고 캡처가 한 장씩 붙는다) → 금 시작(.is-k1 — 삐걱 떨리며 '인디 게임 신화!'에서 금이 기어 나온다)
     → 화면 끝까지 번짐(.is-k2 — 더 크게 떨림) → 깨짐(.is-broken, 번쩍). 망치 없음(2026-10-19 밤 사용자 "망치로 깨지 말고 그냥 섹션 자체가 금 가서 깨지는 것처럼") */
  .c4-js .c4-vb:not(.is-broken) .c4-vb-truth { visibility: hidden; }
  .c4-js .c4-vb:not(.is-ad) > .c4-vb-wall { visibility: hidden; }
  .c4-js .c4-vb.is-ad > .c4-vb-wall { animation: c4-vb-bg .3s ease-out both; }
  .c4-js .c4-vb.is-ad > .c4-vb-wall .c4-vb-p { animation: c4-vb-pop .5s calc(.06s + var(--i) * .055s) cubic-bezier(.2, 1.15, .4, 1) both; }
  .c4-js .c4-vb.is-ad > .c4-vb-wall::after { animation: c4-shine 1.3s .75s ease-in-out both; }
  .c4-js .c4-vb.is-ad.is-k1 > .c4-vb-wall { animation: c4-vb-creak1 .34s cubic-bezier(.3, .7, .4, 1) both; }
  .c4-js .c4-vb.is-ad.is-k2 > .c4-vb-wall { animation: c4-vb-creak2 .42s cubic-bezier(.3, .7, .4, 1) both; }
  .c4-vb.is-k1 > .c4-vb-wall .c4-vb-crack .k1 { animation: c4-vb-draw .42s var(--dl, 0s) cubic-bezier(.45, .3, .3, 1) forwards; }
  .c4-vb.is-k2 > .c4-vb-wall .c4-vb-crack .k2 { animation: c4-vb-draw .5s var(--dl, 0s) cubic-bezier(.35, .5, .3, 1) forwards; }
  .c4-vb.is-k1 > .c4-vb-wall .c4-vb-crack .h1, .c4-vb.is-k2 > .c4-vb-wall .c4-vb-crack .h2 { animation: c4-vb-hit .6s ease-out both; }
  .c4-vb.is-broken > .c4-vb-wall { visibility: hidden; }
  .c4-vb.is-broken::after { animation: c4-vb-flash .47s ease-out both; }
  /* 깨진 뒤: 유리 뒤에 있던 글이 초점이 맞으며 드러나고, 현실 카드는 조각처럼 떨어져 자리 잡는다 */
  .c4-vb.is-broken .c4-vb-truth .c4-hd > * { animation: c4-vb-focus .67s var(--ease) both; animation-delay: .13s; }
  .c4-vb.is-broken .c4-vb-truth .c4-hd > :nth-child(2) { animation-delay: .21s; }
  .c4-vb.is-broken .c4-vb-truth .c4-hd > :nth-child(3) { animation-delay: .4s; }
  .c4-vb.is-broken .c4-vb-truth h2 em { animation: c4-first .93s .67s ease-out both; }
  .c4-vb.is-broken .c4-vb-list li { animation: c4-vb-land .53s calc(.57s + var(--i) * .07s) cubic-bezier(.2, 1.25, .4, 1) both; }
  .c4-vb.is-broken .c4-vb-end { animation: c4-up .67s 1.1s var(--ease) both; }
}
@keyframes c4-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes c4-vb-bg { from { opacity: 0; } }
@keyframes c4-vb-pop { from { opacity: 0; scale: 1.14; translate: 0 calc(var(--u) * -1.2); } 50% { opacity: 1; } }
/* 삐걱: 가장자리가 비지 않게 떠는 동안 살짝 키운다 */
@keyframes c4-vb-creak1 { 0%, 100% { translate: 0 0; scale: 1; } 12% { translate: -3px 2px; scale: 1.008; } 30% { translate: 3px -1px; scale: 1.008; } 52% { translate: -2px 1px; scale: 1.005; } 76% { translate: 1px 0; scale: 1.002; } }
@keyframes c4-vb-creak2 { 0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; } 10% { translate: 6px -3px; rotate: .22deg; scale: 1.014; } 28% { translate: -6px 2px; rotate: -.18deg; scale: 1.014; } 48% { translate: 4px -1px; rotate: .08deg; scale: 1.01; } 70% { translate: -2px 1px; rotate: 0deg; scale: 1.004; } }
@keyframes c4-vb-draw { to { stroke-dashoffset: 0; } }
@keyframes c4-vb-hit { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .4; } }
@keyframes c4-vb-flash { 0% { opacity: 0; scale: .25; } 10% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
@keyframes c4-vb-focus { from { opacity: 0; filter: blur(14px); scale: 1.06; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes c4-vb-land { from { opacity: 0; translate: 0 -46px; rotate: var(--rz, -4deg); } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.c4-vb-list li:nth-child(2n) { --rz: 3deg; }
.c4-vb-list li:nth-child(3) { --rz: -2deg; }

/* 오른쪽 섹션 눈금(사이트 /landing 의 .cp-rail 과 같은 모양, challenge4.js 가 그린다) */
.c4-rail { position: fixed; z-index: 30; top: calc(50% + 32px); right: clamp(6px, 1.4vw, 24px); display: grid; justify-items: end; translate: 0 -50%; }
.c4-rail button { position: relative; display: grid; align-items: center; justify-items: end; width: 40px; height: 18px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.c4-rail button::before { content: ''; width: 12px; height: 2px; border-radius: 1px; background: #52525B; box-shadow: 0 0 0 1px rgba(15, 15, 15, .55); }
.c4-rail button:hover::before { width: 20px; background: #E4E4E7; }
.c4-rail button[aria-current]::before { width: 28px; background: #FF4155; }
.c4-rail button::after { content: attr(aria-label); position: absolute; right: 48px; padding: 5px 10px; border-radius: 6px; background: #1C1C21; box-shadow: inset 0 0 0 1px #2A2A30; color: #E4E4E7; font: 600 12.5px/1.4 Pretendard, system-ui, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; }
.c4-rail button:is(:hover, :focus-visible)::after { opacity: 1; }
.c4-rail button:focus-visible { outline: 0; }
.c4-rail button:focus-visible::before { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ── 낮은 화면(1280×720 · 1366×768 등 — 판이 한 화면에 들게) ── */
@media (max-height: 800px) and (min-width: 900px) {
  /* 히어로: 제목 · 단추를 올려 키 아트의 왕관과 겹치지 않게, 게임 칸은 조금 작게(높이에 견줘 폭이 넓은 화면이라 칸끼리 겹친다) */
  .c4-float { --fs: .84; }
  .c4-hero-in { padding-top: 52px; }
  .c4-title { font-size: clamp(38px, 4.6vw, 60px); }
  .c4-hd h2 { font-size: clamp(30px, 3vw, 42px); }
  .c4-lead { margin-top: 12px; font-size: 16px; }
  .c4-note { margin-top: 18px; }
}

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .c4-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .c4-gb { width: min(100%, 100vw - 144px); } /* 4 게이지 판: 오른쪽 섹션 눈금에 닿지 않게(820 태블릿) */
  /* 6-2: 게이머 ↓ 디렉터(화살이 아래로) */
  .c4-gx-in { min-width: 0; }
  .c4-gx-dlg { padding: 16px 18px 22px; }
  .c4-gx-q { font-size: 17px; }
  .c4-gx-more { right: 14px; bottom: 10px; }
  .c4-gx-h { flex-direction: column; align-items: center; gap: 22px; }
  .c4-gx-to { width: 2px; height: 56px; margin-top: 0; background: linear-gradient(180deg, #3A3A42, var(--ac)); transform-origin: 50% 0; }
  .c4-gx-to::after { right: 50%; top: auto; bottom: -1px; translate: 50% 0; rotate: 135deg; }
  .c4-gx-to i { left: 50%; top: 0; }
  .c4-gx-bg i { width: 120%; left: -10%; right: auto; }
  .c4-gx-l { top: 10%; bottom: 50%; }
  .c4-gx-r { top: 45%; }
}
@media (max-width: 759px) {
  .c4-in { padding: 0 20px; }
  .c4-sec { padding-block: 72px; }
  .c4-ai { padding: 0; } /* 100% AI 판은 화면 한 장 그대로 — 위 여백이 붙으면 「확인해 보기」가 화면 밑으로 밀린다 */
  .c4-cost .c4-hd h2 { font-size: clamp(22px, 6.2vw, 26px); } /* 둘째 줄 「RookissAI는 그 부담을 현저히 낮춥니다.」는 좁으면 「현저히 낮춥니다.」(&nbsp;)째 내려가 세 줄 */
  /* 4 게이지 판: 줄마다 이름(왼쪽) · 값(오른쪽)이 위 한 줄, 막대가 아래 한 줄 */
  .c4-gb { display: block; width: 100%; padding: 18px 16px 20px; border-radius: 18px; }
  .c4-gb-g { display: block; }
  .c4-gb-g + .c4-gb-g { margin-top: 18px; padding-top: 18px; }
  .c4-gb-h { margin-bottom: 12px; font-size: 14.5px; }
  .c4-gb-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "t t"; row-gap: 8px; align-items: end; }
  .c4-gb-r + .c4-gb-r { margin-top: 14px; }
  .c4-gb-k { grid-area: k; font-size: 13.5px; }
  .c4-gb-v { grid-area: v; font-size: clamp(24px, 7vw, 30px); }
  .c4-gb-t { grid-area: t; height: 30px; gap: 10px; }
  .c4-gb-x { padding: 2px 9px; font-size: 12px; }
  .c4-lead { font-size: 15.5px; }
  .c4-art { height: 54%; }
  .c4-fc:not(.is-m) { display: none; }
  .c4-fc.is-m { left: var(--mx); top: var(--my); width: var(--mw); }
  .c4-hero-in { min-height: max(560px, calc(100vh - var(--head))); padding: 64px 20px 64px; }
  .c4-title { font-size: 34px; }
  .c4-btn--l { width: 100%; min-width: 0; }
  .c4-w { padding: 8px 12px; font-size: 13.5px; }
  .c4-w.is-ic { padding: 10px; }
  .c4-w.is-ic svg { width: 22px; height: 22px; }
  .c4-w.is-logo svg { width: auto; height: 22px; }
  .c4-w.is-logo:has(> .c4-lw) { padding: 12px 14px; }
  .c4-w.is-logo .c4-lw { height: 18px; }
  .c4-w.is-cat { gap: 8px; font-size: 44px; }
  .c4-seg { top: calc(100% + 12px); flex-direction: column; gap: 5px; }
  .c4-seg i { width: 30px; height: 30px; }
  .c4-seg svg { width: 16px; height: 16px; }
  .c4-seg em { font-size: 11.5px; letter-spacing: -.03em; }
  .c4-num { font-size: 34px; }
  .c4-ai-h { font-size: clamp(72px, 22vw, 120px); } /* 390 에서 25vw 는 "100% AI" 가 양 끝에 닿았다 */
  .c4-ai-l { font-size: 16px; }
  .c4-hz h2 { font-size: 40px; }
  .c4-hz-big { font-size: 24px; padding: 0 20px; }
  .c4-vf-s, .c4-vf-r { display: none; }
  .c4-vf-rec { left: 56px; }
  .c4-vf-tc { right: 56px; }
  .c4-dr-h em { font-size: 25vw; }
  .c4-perks { grid-template-columns: minmax(0, 1fr); }
  .c4-tools { grid-template-columns: minmax(0, 1fr); }
  .c4-rail { display: none; }
}
/* 움직임 없음 · 스크립트 없음 · 움직임 줄이기: 2 의 낱말 · 게이지 · 날아가는 숫자는 숨기고 마지막 제목만 */
html:not(.c4-js) :is(.c4-words, .c4-meter, .c4-num, .c4-fx) { display: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.c4-words, .c4-meter, .c4-num, .c4-fx) { display: none; }
}

/* ── 모션 ── */
@media (prefers-reduced-motion: no-preference) {
  /* 1 히어로: 낱말이 차례로 떠오름 · 단추 빛 스침 · 키 아트가 서서히 · 게임 창이 차례로 켜진 뒤 키 아트 창처럼 1.5 칸 둥둥(8초, 창마다 차례 어긋남) */
  /* 첫 움직임은 .is-on 에 묶는다 — 아래로 갔다가 다시 올라오면 처음부터(2026-10-19 사용자 "위로 올려서 돌아가면 다시 재생"). 스크립트가 없으면 처음 한 번 */
  .c4-title span { display: inline-block; }
  :is(html:not(.c4-js), .c4-hero.is-on) .c4-title span { animation: c4-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.07s * var(--i) + .1s); }
  .c4-hero::after { animation: c4-glow 4s ease-in-out infinite alternate; }
  .c4-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); translate: -120% 0; animation: c4-shine 4.5s 1.6s ease-in-out infinite; pointer-events: none; }
  :is(html:not(.c4-js), .c4-hero.is-on) .c4-art { animation: c4-fade 1.8s .15s ease both; }
  :is(html:not(.c4-js), .c4-hero.is-on) .c4-fc { animation: c4-fcin 1.4s calc(.6s + var(--i) * .1s) cubic-bezier(.2, .8, .2, 1) both, c4-bob calc(6.5s + var(--i) * .55s) calc(var(--i) * -1.7s) ease-in-out infinite alternate; }

  /* 섹션이 들어오면(.is-on) 차례로 떠오름. 스크립트가 없으면 처음부터 보인다 */
  .c4-js .c4-rv, .c4-js .c4-w, .c4-js .c4-num { opacity: 0; }
  .c4-js .is-on .c4-rv { animation: c4-up 1s var(--d, 0s) var(--ease) both; }

  /* 2: 다 차는 순간 막대 번쩍 · 숫자가 날아가는 동안 막대가 오른쪽 끝으로 말려 들어감 · 끝 장면에 AI 와 두 줄 */
  .c4-js .c4-ai :is(.c4-100, .c4-ai-w, .c4-ai-l > span, .c4-ai-go) { opacity: 0; }
  .c4-js .c4-ai:not(.is-done) .c4-ai-go { visibility: hidden; }
  .c4-ai.is-full .c4-fill { animation: c4-flash .4s ease-out both; }
  .c4-ai.is-full .c4-head-dot { animation: c4-bloom .47s ease-out both; }
  /* 칸 아이콘: 켜지는 순간 크게 번쩍했다 제자리, 다 차면 여섯이 왼쪽부터 한 번 더 */
  .c4-seg.is-lit i { animation: c4-lit .4s cubic-bezier(.2, .8, .2, 1) both; }
  .c4-ai.is-full .c4-seg i { animation: c4-lit2 .4s calc(var(--c, 0) * .04s) ease-out both; }
  .c4-meter { transition: opacity .3s, scale .4s cubic-bezier(.6, 0, .3, 1); }
  .c4-ai.is-fly .c4-meter { opacity: 0; scale: 0 1; }
  .c4-js .c4-ai.is-done .c4-100 { opacity: 1; }
  .c4-js .c4-ai.is-done .c4-ai-w { animation: c4-aiw .6s .03s cubic-bezier(.2, .8, .2, 1) both; }
  .c4-js .c4-ai.is-done .c4-ai-l > span { animation: c4-up .6s var(--ease) both; animation-delay: .37s; }
  .c4-js .c4-ai.is-done .c4-ai-l > span + span { animation-delay: .5s; }
  .c4-ai.is-done .c4-ai-l em { animation: c4-first .73s .9s ease-out both; }
  .c4-js .c4-ai.is-done .c4-ai-go { animation: c4-up .6s .75s var(--ease) both; }
  .c4-ai.is-done .c4-ai-go svg { animation: c4-nudge 1.6s 1.4s ease-in-out infinite; }

  /* 4 게이지 판: 대기업 머리 → 회색 막대 둘이 왼쪽에서 칸 끝까지 묵직하게 차고(둘째는 .15초 늦게) 값이 뜬다 →
     RookissAI 머리 · 빈 칸 → 빨간 조각이 반짝 커졌다 제자리 · 값 → 마지막에 배수 알약이 조각 쪽에서 밀려 나온다. 다 해서 약 3초 */
  .c4-gb-r { --w: calc(var(--g, 0) * .15s); }
  .c4-js .c4-cost:not(.is-on) :is(.c4-gb-h, .c4-gb-k, .c4-gb-f, .c4-gb-v, .c4-gb-x, .c4-gb-g.is-ai .c4-gb-t) { opacity: 0; }
  .c4-cost.is-on .c4-gb-g.is-big .c4-gb-h { animation: c4-up .6s .3s var(--ease) both; }
  .c4-cost.is-on .c4-gb-g.is-big .c4-gb-k { animation: c4-up .6s calc(.4s + var(--w)) var(--ease) both; }
  .c4-cost.is-on .c4-gb-g.is-big .c4-gb-f { animation: c4-gb-grow 1.1s calc(.5s + var(--w)) cubic-bezier(.65, 0, .25, 1) both; }
  .c4-cost.is-on .c4-gb-g.is-big .c4-gb-v { animation: c4-up .6s calc(1.35s + var(--w)) var(--ease) both; }
  .c4-cost.is-on .c4-gb-g.is-ai .c4-gb-h { animation: c4-up .6s 1.8s var(--ease) both; }
  .c4-cost.is-on .c4-gb-g.is-ai .c4-gb-k { animation: c4-up .6s calc(1.9s + var(--w)) var(--ease) both; }
  .c4-cost.is-on .c4-gb-g.is-ai .c4-gb-t { animation: c4-fade .5s calc(1.9s + var(--w)) ease-out both; }
  .c4-cost.is-on .c4-gb-g.is-ai .c4-gb-f { animation: c4-gb-pop .7s calc(2.15s + var(--w)) ease-out both; }
  .c4-cost.is-on .c4-gb-g.is-ai .c4-gb-v { animation: c4-up .6s calc(2.25s + var(--w)) var(--ease) both; }
  .c4-cost.is-on .c4-gb-x { animation: c4-gb-x .6s calc(2.55s + var(--w)) var(--ease) both; }

  /* 6-2: 불안 한 줄이 깜빡이며 켜지고 → 아군 → 게이머가 떠올랐다가 회색으로 식고 → 빛 한 점이 화살을 지나 → 디렉터가 초점이 맞듯 켜지며 오른쪽 레드 빛 */
  .c4-js .c4-gx:not(.is-on) :is(.c4-gx-w, .c4-gx-to, .c4-gx-r) { opacity: 0; }
  .c4-gx.is-on .c4-gx-a { animation: c4-up 1s .3s var(--ease) both, c4-flick 1.1s .45s linear both; }
  /* 꿈 두 줄이 대화 창에 한 글자씩(38ms) 찍히고 ▼ 가 깜빡인 뒤, 아군 → 게이머 → 디렉터(이전보다 1.6초 늦게) */
  .c4-js .c4-gx:not(.is-on) :is(.c4-gx-q i, .c4-gx-more) { opacity: 0; }
  .c4-gx-q { --t0: 1.1s; }
  .c4-gx-q + .c4-gx-q { --t0: 2.05s; }
  /* steps(1, end) 는 끝 진행도가 0.99999… 로 떨어지면 opacity 0 에 머문다(둘째 줄에서 실제로 남음) — 시작하자마자 켜지는 jump-start */
  .c4-gx.is-on .c4-gx-q i { animation: c4-type .01s calc(var(--t0) + var(--i) * 38ms) steps(1, jump-start) both; }
  .c4-gx.is-on .c4-gx-more { animation: c4-blink 1s 3s steps(1, end) infinite; }
  .c4-gx.is-on .c4-gx-b em { animation: c4-first 1.2s 3.4s ease-out both; }
  .c4-gx.is-on .is-g { animation: c4-up .9s 3.5s var(--ease) both; }
  .c4-gx.is-on .is-g :is(.c4-gx-t, .c4-gx-t b, .c4-gx-k) { animation: c4-cool 1.1s 4.2s ease both; }
  .c4-gx-to { transform-origin: 0 50%; }
  .c4-gx.is-on .c4-gx-to { animation: c4-draw .7s 4.2s cubic-bezier(.7, 0, .2, 1) both; }
  .c4-gx.is-on .c4-gx-to i { animation: c4-travel .75s 4.5s cubic-bezier(.5, 0, .5, 1) both; }
  .c4-gx.is-on .is-d { animation: c4-focus 1.4s 4.95s cubic-bezier(.3, .7, .2, 1) both; }
  .c4-gx.is-on .c4-gx-r { animation: c4-fade 1.8s 4.95s ease-out both; }


  /* 5: 지평선이 가운데부터 그어지고 빛이 떠오르며 바닥 격자가 다가온다 · 별 반짝임 */
  .c4-js .c4-hz:not(.is-on) :is(.c4-line, .c4-sun, .c4-floor) { opacity: 0; }
  .c4-hz.is-on .c4-line { animation: c4-draw 1.4s .1s cubic-bezier(.7, 0, .2, 1) both; }
  .c4-hz.is-on .c4-sun { animation: c4-sun 2.6s .35s cubic-bezier(.2, .7, .2, 1) both; }
  .c4-hz.is-on .c4-floor { animation: c4-floor-in 1.6s .7s ease-out both, c4-grid 2.4s linear infinite; }
  .c4-star { animation: c4-twinkle 3.2s ease-in-out infinite alternate; }
  .c4-star:nth-child(2) { animation-duration: 4.4s; animation-delay: -1.3s; }
  .c4-star:nth-child(3) { animation-duration: 2.6s; animation-delay: -2.1s; }
  .c4-hz.is-on .c4-hz-big em { animation: c4-pulse 2.8s 3s ease-in-out infinite alternate; }

  /* 6: 뷰파인더가 조여 들어오고 · 배경 초점이 당겨지고 · "디렉터"에 초점이 맞는다(흐림 → 또렷 → 살짝 흔들림 → 또렷) */
  .c4-js .c4-dr:not(.is-on) .c4-vf { opacity: 0; }
  .c4-dr.is-on .c4-vf { animation: c4-vf 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .c4-dr.is-on .c4-dr-h em { animation: c4-focus 1.6s 1s cubic-bezier(.3, .7, .2, 1) both; }
  .c4-vf-rec::before { animation: c4-blink 1.1s steps(1, end) infinite; }

}
@keyframes c4-rise { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
@keyframes c4-glow { from { opacity: .5; } to { opacity: 1; } }
@keyframes c4-shine { 0% { translate: -120% 0; } 40%, 100% { translate: 120% 0; } }
@keyframes c4-fade { from { opacity: 0; } }
@keyframes c4-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes c4-fcin { from { opacity: 0; scale: .86; } }
@keyframes c4-bob { from { transform: rotate(var(--r)) translate3d(0, 8px, 0) rotate(-.6deg); } to { transform: rotate(var(--r)) translate3d(0, -12px, 0) rotate(.8deg); } }
@keyframes c4-up { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; } }
@keyframes c4-flash { 0% { filter: brightness(1); box-shadow: 0 0 18px rgba(255, 65, 85, .55); } 25% { filter: brightness(1.8); box-shadow: 0 0 60px 6px rgba(255, 90, 110, .9); } 100% { filter: brightness(1); box-shadow: 0 0 24px rgba(255, 65, 85, .6); } }
@keyframes c4-bloom { 0% { scale: 1; } 30% { scale: 3.2; } 100% { scale: 1.4; } }
@keyframes c4-aiw { from { opacity: 0; translate: .3em 0; filter: blur(14px); clip-path: inset(-40% 100% -40% -10%); } 80% { opacity: 1; clip-path: inset(-40% -40% -40% -10%); } to { opacity: 1; clip-path: inset(-300%); } } /* 끝에서 자르기를 풀어 빛(text-shadow)이 네모로 잘려 보이지 않게 */
@keyframes c4-first { 0%, 100% { text-shadow: 0 0 0 rgba(255, 65, 85, 0); } 40% { text-shadow: 0 0 26px rgba(255, 65, 85, .9); } }
@keyframes c4-lit { from { scale: 1.6; filter: brightness(2.2); } to { scale: 1; filter: none; } }
@keyframes c4-lit2 { 0%, 100% { scale: 1; filter: none; } 40% { scale: 1.18; filter: brightness(1.6); } }
@keyframes c4-cap { from { opacity: 0; translate: 0 10px; } }
@keyframes c4-draw { from { opacity: 0; scale: 0 1; } 20% { opacity: 1; } }
@keyframes c4-sun { from { opacity: 0; translate: -50% -70%; scale: .8 .6; } }
@keyframes c4-floor-in { from { opacity: 0; } }
@keyframes c4-grid { from { background-position: 0 0, 50% 0; } to { background-position: 0 72px, 50% 0; } }
@keyframes c4-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes c4-pulse { from { text-shadow: 0 0 30px rgba(255, 65, 85, .45); } to { text-shadow: 0 0 60px rgba(255, 65, 85, .9); } }
@keyframes c4-vf { from { opacity: 0; scale: 1.12; } }
@keyframes c4-focus { 0% { opacity: 0; filter: blur(22px); scale: 1.1; } 55% { opacity: 1; filter: blur(0); scale: 1; } 68% { filter: blur(3px); } 82%, 100% { filter: blur(0); } }
@keyframes c4-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
/* 4 게이지 판: 회색 막대가 왼쪽에서 차오름 · 빨간 조각 반짝(옆으로 커졌다 제자리) · 배수 알약이 조각 쪽에서 밀려 나옴 */
@keyframes c4-gb-grow { from { scale: 0 1; } }
@keyframes c4-gb-pop { 0% { opacity: 0; scale: 0 .4; filter: brightness(2.2); } 40% { opacity: 1; scale: 1.35 1.12; filter: brightness(1.8); } 100% { opacity: 1; scale: 1; filter: brightness(1); } }
@keyframes c4-gb-x { from { opacity: 0; translate: -14px 0; filter: blur(6px); } to { opacity: 1; } }
@keyframes c4-flick { 0%, 12%, 18%, 40%, 46% { color: var(--t4); } 14%, 16%, 42% { color: #E4E4E7; } 100% { color: var(--t4); } }
@keyframes c4-cool { from { color: #FFFFFF; } }
@keyframes c4-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes c4-travel-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .c4-gx.is-on .c4-gx-to { animation-name: c4-drawv; }
  .c4-gx.is-on .c4-gx-to i { animation-name: c4-travel-v; }
}
@keyframes c4-drawv { from { opacity: 0; scale: 1 0; } 20% { opacity: 1; } }

/* 큰 화면(전체 화면 1920×1080 등): 게임 목록 · 바이브코딩 진실 판의 글자 · 칸을 화면에 맞춰 키운다(2026-10-19 밤 사용자 "브라우저 전체 화면으로 보니 전부 작더라, 조금만 더 키워 줘").
   1440×900 은 그대로, 1920 에서 약 1.2배. 게임 카드 폭은 위 --cw 의 상한(600px)만 풀면 화면 폭 · 높이 식이 알아서 키운다 */
@media (min-width: 1600px) and (min-height: 860px) {
  .c4-gm .c4-hd h2 { font-size: clamp(52px, 3.2vw, 68px); }
  .c4-gm .c4-lead { margin-top: 20px; font-size: clamp(17px, 1.05vw, 22px); }
  .c4-gm-hint { margin-top: 20px; padding: 9px 18px 9px 15px; font-size: 16px; }
  .c4-gm-hint svg { width: 17px; height: 17px; }
  .c4-gc-m { border-radius: 16px; }
  .c4-gc-tag { top: 12px; left: 12px; right: 12px; gap: 6px; }
  .c4-gc-tag > * { height: 27px; padding: 0 10px; border-radius: 7px; font-size: 13px; }
  .c4-gc-t { left: 16px; right: 58px; bottom: 14px; font-size: clamp(16px, 1vw, 21px); }
  .c4-gc-z { right: 12px; bottom: 10px; width: 38px; height: 38px; }
  .c4-gc-z svg { width: 17px; height: 17px; }

  .c4-vb .c4-in { max-width: 1680px; }
  .c4-vb .c4-hd h2 { font-size: clamp(60px, 3.75vw, 80px); }
  .c4-vb-l { margin-top: 26px; font-size: clamp(18px, 1.1vw, 24px); }
  .c4-vb-list { gap: 20px; margin-top: 58px; }
  .c4-vb-list li { gap: 12px; min-height: 228px; padding: 32px 30px; }
  .c4-vb-n { gap: 9px; font-size: 16px; }
  .c4-vb-n::before { width: 13px; height: 13px; }
  .c4-vb-list b { font-size: clamp(19px, 1.2vw, 26px); }
  .c4-vb-list p { font-size: clamp(15px, .92vw, 19px); }
  .c4-vb-end { margin-top: 54px; font-size: clamp(19px, 1.15vw, 25px); }
}