/* 01 룰렛 숫자 0 → 100으로 가속 → AI 등장 → 기존 제목과 게임 목록.
   둥둥 떠 있는 여섯 분야 낱말이 하나씩 숫자 한가운데로 쫙 날아들고, 닿을 때마다 숫자가 17 · 33 · … · 100 으로 뛴다(ai.js fly).
   낱말은 숫자 곁에서 존재감이 있게 크게(2026-10-22 사용자 "요소들이 너무 작고" — 1440 에서 약 50px, 전에는 32px).
   움직이지 않을 때(움직임 줄이기 · ?still · 스크립트 없음)는 무대 없이 머리와 카드가 처음부터 보인다. */

/* 무대: 섹션 전체에 깔린 판, 속 판(.c4-ai)은 화면 한 장 높이로 상단바 아래에 붙는다(좁은 화면은 섹션이 화면보다 길어 붙은 채 따라온다) */
.l5-ai-st{position:absolute;inset:0;z-index:3;pointer-events:none}
.l5-ai-st .c4-ai{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));max-height:100%}
.l5-ai-st .c4-ai-st{height:100%;background:none}
/* 숫자와 완성 글씨의 글꼴 · 기준선을 맞춰 한 글씨처럼 이어진다. */
.l5-ai-st .c4-ai-st{--ai-size:clamp(104px,15.5vw,240px)}
.l5-ai-count{position:absolute;inset:0;display:grid;place-content:center}
.l5-ai-st .c4-num{position:static;display:flex;align-items:center;margin:0;height:1.18em;font-size:var(--ai-size);line-height:1.18;font-variant-numeric:normal;opacity:1}
.l5-ai-wheel{display:block;flex:none;height:1.18em;overflow:hidden;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.l5-ai-reel{display:block;will-change:transform}
.l5-ai-reel > span{display:block;width:var(--digit-w);height:1.18em;text-align:center;line-height:1.18}
.l5-ai-fields{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.l5-ai-fields li{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;color:#D4D4DA;font-size:clamp(26px,3.5vw,58px);font-weight:750;line-height:1.2;letter-spacing:-.04em;white-space:nowrap;will-change:transform,opacity,filter}
.l5-ai-fields li:nth-child(1){--x:27%;--y:24%}
.l5-ai-fields li:nth-child(2){--x:73%;--y:23%}
.l5-ai-fields li:nth-child(3){--x:17%;--y:51%}
.l5-ai-fields li:nth-child(4){--x:83%;--y:53%}
.l5-ai-fields li:nth-child(5){--x:30%;--y:76%}
.l5-ai-fields li:nth-child(6){--x:70%;--y:78%}
.l5-ai-st .c4-ai.is-full .l5-ai-fields{visibility:hidden}
.l5-ai-st .c4-ai-h{font-size:var(--ai-size);will-change:transform}
.l5-ai-value{display:inline-block;visibility:hidden}
.l5-ai-pct{opacity:0;transition:opacity .24s .18s}
.l5-ai-st .c4-ai .c4-ai-w{opacity:0;animation:none;text-shadow:0 0 .36em rgba(255,65,85,.45);transform-origin:50% 65%}
.l5-ai-st .c4-ai.is-full .l5-ai-pct{opacity:1}
.l5-ai-st .c4-ai.is-done .l5-ai-value{visibility:visible}
.l5-ai-st .c4-ai:not(.is-full) :is(.l5-ai-pct,.c4-ai-w){transition:none}
.l5-ai-st .c4-ai.is-gone{visibility:hidden;opacity:0}
html:not(.c4-js) .l5-ai-st{display:none}
@media(max-width:759px){
  .l5-ai-st .c4-ai-st{--ai-size:clamp(72px,22vw,120px)}
  .l5-ai-fields li{font-size:clamp(20px,6.4vw,28px)}
  .l5-ai-fields li:nth-child(1){--x:24%;--y:27%}
  .l5-ai-fields li:nth-child(2){--x:76%;--y:26%}
  .l5-ai-fields li:nth-child(3){--x:15%;--y:51%}
  .l5-ai-fields li:nth-child(4){--x:83%;--y:53%}
  .l5-ai-fields li:nth-child(5){--x:27%;--y:73%}
  .l5-ai-fields li:nth-child(6){--x:73%;--y:75%}
}
@media(prefers-reduced-motion:no-preference){
  .l5-ai-st .c4-ai.is-done .c4-ai-w{animation:l5-ai-hit .46s cubic-bezier(.16,1,.3,1) both}
  @keyframes l5-ai-hit{
    0%{opacity:0;transform:translateY(-.12em) scale(1.3);filter:blur(8px)}
    58%{opacity:1;transform:translateY(.015em) scale(.96);filter:blur(0)}
    100%{opacity:1;transform:none;filter:blur(0)}
  }
}

/* 머리: 제목의 「100% AI」는 큰 글씨와 같은 꼴(굵기 · 자간 · 두 낱말 사이 · 100% 흰 · AI 빨강과 그 빛) — 날아온 글씨와 바뀌는 자리가 보이지 않게 */
/* 제목(2026-10-22 사용자 "heading 크기를 훨씬 더 키워줘"): 시안 4(약 50px)의 두 배 가까이. 화면 폭과 높이 가운데 작은 쪽을 따른다(낮은 화면에서 카드가 너무 줄지 않게) */
.c4-gm.l5-ai{--h2:clamp(48px,min(6.4vw,11vh),120px)}
.c4-gm.l5-ai .c4-hd h2{font-size:var(--h2);line-height:1.1;letter-spacing:-.045em}
@media (min-width:760px){.l5-ai-br{display:none}}
@media (max-width:759px){
  .c4-gm.l5-ai{--h2:min(14.5vw,64px)}
  .c4-gm.l5-ai .c4-hd h2{line-height:1.12}
}
.l5-ai-k{display:inline-flex;gap:.16em;margin-right:.04em;font-weight:900;letter-spacing:-.055em;white-space:nowrap}
.l5-ai-n{color:var(--t1)}
.l5-ai-a{color:var(--ac);text-shadow:0 0 .36em rgba(255,65,85,.45)}

/* 게임 판 높이: 머리 몫(시안 4 는 250px 고정)을 제목 한 줄 높이 + 190px 로 잡아 카드 폭을 줄여 화면 한 장에 맞춘다(넓은 화면만, 좁으면 시안 4 그대로) */
@media (min-width:1000px){
  .l5-ai .c4-gm-list{--cw:min(600px,calc((100vw - 144px - (var(--cols) - 1) * var(--gap)) / var(--cols)),calc((100vh - var(--head) - 2 * var(--gm-pad) - var(--h2) * 1.1 - 190px - var(--gap)) * 8 / 9))}
}

@media (prefers-reduced-motion:no-preference){
  /* 무대가 끝나기 전(섹션에 .is-shown 이 없을 때)은 머리 · 카드를 숨긴다. 머리 통째 떠오름(c4-rv)은 끄고 조각마다 따로 — 「100% AI」는 날아온 글씨와 바뀌는 순간 그대로 켜진다 */
  .c4-js .l5-ai .c4-hd.c4-rv{animation:none;opacity:1}
  .c4-js .l5-ai:not(.is-shown) .c4-gc.c4-rv{animation:none;opacity:0;visibility:hidden} /* 숨은 카드는 눌리거나 초점을 받지 않게 */
  .c4-js .l5-ai:not(.is-shown) :is(.c4-hd > :not(h2),.l5-ai-k){opacity:0}
  .c4-js .l5-ai .c4-hd h2,.c4-js .l5-ai .c4-hd h2 em{transition:color .6s var(--ease)}
  .c4-js .l5-ai:not(.is-shown) .c4-hd h2,.c4-js .l5-ai:not(.is-shown) .c4-hd h2 em{color:transparent;transition:none}
  .c4-js .l5-ai.is-shown .c4-hd > :not(h2){animation:c4-up .8s var(--ease) both}
  .c4-js .l5-ai.is-shown .c4-hd > .c4-lead{animation-delay:.1s}
  .c4-js .l5-ai.is-shown .c4-hd > .c4-gm-hint{animation-delay:.2s}
}