/* 1인 기업(design/landing-v5 #solo, 2026-10-22 사용자 "채용 연계 얘기를 빼고, 1인 기업으로 게임 시장에서 대기업과의 경쟁에 오히려 맞선다는 느낌으로 — 디자인도, 문구도").
   문구는 랜딩문구 1안. 머리말 아래 한 장의 대비: 왼쪽은 끝이 보이지 않는 회색 점 무리(큰 조직), 가운데 VS 줄, 오른쪽은 빨간 점 하나(한 명의 디렉터)와 AI 테 셋.
   가장 바깥 테의 지름이 무리의 높이(--fh)와 같아, 한 명이 AI 로 같은 높이에 선다. 빨강은 「1인 기업」 하나(제목 · 점 · 테). 대기업은 일반 명사로만 쓰고 숫자를 넣지 않는다.
   움직임: 무리가 왼쪽에서 밀려 들어오고 → VS → 점이 내려앉고 → 테가 안쪽부터 퍼진다. 스크립트가 없거나 움직임 줄이기 · ?still 이면 마지막 장면. */
.l5-solo{--fh:clamp(200px,29vh,300px);padding-block:clamp(32px,5vh,64px);border-top:1px solid var(--ln);overflow:hidden}
.l5-solo-hd{text-align:center}
.l5-solo-eye{color:var(--t3);font-size:clamp(17px,1.5vw,21px);font-weight:650;letter-spacing:-.02em}
.l5-solo .l5-h2{margin-top:10px;font-size:clamp(42px,5vw,76px);line-height:1.12;letter-spacing:-.05em}
.l5-solo .l5-lead{max-width:none;margin:clamp(14px,2.4vh,24px) auto 0;color:var(--t3);text-wrap:balance}

/* 대비 무대: 무리 | VS | 한 명 */
.l5-solo-field{display:grid;grid-template-columns:minmax(0,1.6fr) 96px minmax(0,1fr);align-items:start;margin-top:clamp(28px,5vh,56px)}
.l5-solo-crowd{height:var(--fh);background:radial-gradient(circle,#4A4A52 0 2.3px,transparent 2.8px) 100% 50%/15px 15px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 42%);mask:linear-gradient(90deg,transparent,#000 42%)}
.l5-solo-k{display:flex;flex-direction:column;gap:4px;margin-top:18px;line-height:1.3}
.l5-solo-k b{color:var(--t2);font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.03em}
.l5-solo-k span{color:var(--t4);font-size:14px;font-weight:600}
.l5-solo-big .l5-solo-k{align-items:flex-end;text-align:right}
.l5-solo-one .l5-solo-k{align-items:center;text-align:center}
.l5-solo-one .l5-solo-k b{color:#fff}
.l5-solo-vs{position:relative;display:grid;place-items:center;height:var(--fh)}
.l5-solo-vs::before{content:"";position:absolute;left:50%;top:-8%;bottom:-8%;width:1px;background:linear-gradient(transparent,var(--ln2) 22%,var(--ln2) 78%,transparent)}
.l5-solo-vs span{position:relative;padding:8px 0;background:var(--k);color:var(--t3);font-size:13px;font-weight:800;letter-spacing:.14em}
.l5-solo-me{position:relative;display:grid;place-items:center;height:var(--fh)}
.l5-solo-ring{position:absolute;left:50%;top:50%;width:calc(var(--fh) * var(--k) / 3);aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  box-shadow:inset 0 0 0 1px rgba(255,65,85,calc(.62 - var(--k) * .15)),0 0 calc(var(--k) * 14px) -6px rgba(255,65,85,.18)}
.l5-solo-dot{position:relative;width:16px;height:16px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 5px rgba(255,65,85,.16),0 0 28px rgba(255,65,85,.7)}
.l5-solo-ai{position:absolute;left:50%;top:0;padding:0 10px;background:var(--k);color:var(--ac2);font-size:12.5px;font-weight:800;letter-spacing:.16em;line-height:1;translate:-50% -50%}
.l5-solo-cap{margin-top:clamp(22px,3.6vh,40px);color:var(--t3);font-size:15px;font-weight:650;letter-spacing:-.01em;text-align:center}

@media (min-width:1000px) and (max-height:800px){
  .l5-solo{--fh:clamp(170px,27vh,220px)}
  .l5-solo .l5-h2{font-size:clamp(40px,min(4.6vw,8.4vh),60px)}
  .l5-solo .l5-lead{font-size:16px}
  .l5-solo-k{margin-top:12px}
  .l5-solo-cap{margin-top:18px}
}
@media (min-width:760px) and (max-width:999px){
  .l5-solo-field{grid-template-columns:minmax(0,1.3fr) 64px minmax(0,1fr)}
}
@media (max-width:759px){
  .l5-solo{--fh:168px}
  .l5-solo .l5-h2{font-size:clamp(36px,10.4vw,48px);line-height:1.18}
  .l5-solo-field{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .l5-solo-crowd{-webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%);background-position:50% 100%}
  .l5-solo-big .l5-solo-k,.l5-solo-one .l5-solo-k{align-items:center;text-align:center;margin-top:12px}
  .l5-solo-vs{height:64px}
  .l5-solo-me{margin-top:14px}
  .l5-solo-vs::before{left:10%;right:10%;top:50%;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--ln2) 22%,var(--ln2) 78%,transparent)}
  .l5-solo-vs span{padding:0 12px}
  .l5-solo-cap{margin-top:28px}
}

@media (prefers-reduced-motion:no-preference){
  /* 무리가 왼쪽(모바일은 위)에서 밀려 들어온다 */
  .l5-js .l5-solo-crowd{clip-path:inset(0 100% 0 0)}
  .l5-js .is-on .l5-solo-crowd{animation:l5-solo-push 1.3s cubic-bezier(.6,0,.2,1) .35s both}
  @keyframes l5-solo-push{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .l5-js .l5-solo-vs span{opacity:0}
  .l5-js .is-on .l5-solo-vs span{animation:l5-solo-fade .5s var(--ease) 1.25s both}
  @keyframes l5-solo-fade{from{opacity:0}to{opacity:1}}
  /* 점이 내려앉고, 테가 안쪽부터 퍼져 무리의 높이에 닿는다 */
  .l5-js .l5-solo-dot{opacity:0}
  .l5-js .is-on .l5-solo-dot{animation:l5-solo-drop .6s var(--hop) 1.75s both}
  @keyframes l5-solo-drop{from{opacity:0;transform:translateY(-22px) scale(.6)}to{opacity:1;transform:none}}
  .l5-js .l5-solo-ring{opacity:0}
  .l5-js .is-on .l5-solo-ring{animation:l5-solo-ring .9s var(--ease) calc(2.05s + var(--k) * .16s) both}
  @keyframes l5-solo-ring{from{opacity:0;scale:.25}to{opacity:1;scale:1}}
  .l5-js .l5-solo-ai{opacity:0}
  .l5-js .is-on .l5-solo-ai{animation:l5-solo-fade .5s var(--ease) 2.75s both}
}
@media (prefers-reduced-motion:no-preference) and (max-width:759px){
  .l5-js .l5-solo-crowd{clip-path:inset(0 0 100% 0)}
  .l5-js .is-on .l5-solo-crowd{animation-name:l5-solo-push-m}
  @keyframes l5-solo-push-m{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}